Skip to content
D
Documentation

Components — functions

reference
2 min readUpdated

Functions

Import these from @grafloria/angular.

Functions

clamp01

ts
function clamp01(t: number): number

closestOnPolyline

ts
function closestOnPolyline(points: Point[], target: Point): ClosestHit | null

createAddConnectionAction

Create action to add connection from this node Enables connection mode starting from this node

ts
function createAddConnectionAction(engine: DiagramEngine): ToolbarAction

createAllActions

Helper to create all actions including advanced ones Returns the full set of available toolbar actions

ts
function createAllActions(
  engine: DiagramEngine,
  onEdit?: (node: NodeModel) => void
): ToolbarAction[]

createBringToFrontAction

Create action to bring node to front Sets node z-index to a high value

ts
function createBringToFrontAction(engine: DiagramEngine): ToolbarAction

createCompactPreset

Compact Preset Minimal vertical toolbar for tight spaces

ts
function createCompactPreset(engine: DiagramEngine, onEdit?: (node: any) => void): NodeToolbarConfig

createContextMenuPreset

Context Menu Preset Right-click context menu style

ts
function createContextMenuPreset(engine: DiagramEngine, onEdit?: (node: any) => void): NodeToolbarConfig

createDefaultLinkActions

The two built-ins, in the order they read best on the toolbar.

ts
function createDefaultLinkActions(engine: DiagramEngine): LinkToolbarAction[]

createDeleteAction

Create standard delete action Removes the node from the diagram

ts
function createDeleteAction(engine: DiagramEngine): ToolbarAction

createDeleteLinkAction

Delete the link. Routed through RemoveLinkCommand so it lands on the undo stack (diagram.removeLink() alone is NOT undoable).

ts
function createDeleteLinkAction(engine: DiagramEngine): LinkToolbarAction

createDuplicateAction

Create standard duplicate action Creates a copy of the node with the same type and data

ts
function createDuplicateAction(engine: DiagramEngine): ToolbarAction

createEditAction

Create standard edit action Triggers a custom edit callback

ts
function createEditAction(onEdit: (node: NodeModel) => void): ToolbarAction

createERDPreset

ERD (Entity-Relationship Diagram) Preset Optimized for database schema design

ts
function createERDPreset(engine: DiagramEngine, onEdit?: (node: any) => void): NodeToolbarConfig

createFullPreset

Full Preset Complete set of actions including z-order manipulation

ts
function createFullPreset(engine: DiagramEngine, onEdit?: (node: any) => void): NodeToolbarConfig

createInsertNodeAction

Insert a node ON the edge: the link is split at the toolbar's anchor and the new node is spliced in between the two halves.

ts
function createInsertNodeAction(
  engine: DiagramEngine,
  options: InsertNodeOnEdgeOptions = {}
): LinkToolbarAction

createKanbanPreset

Kanban Preset Optimized for kanban board cards

ts
function createKanbanPreset(engine: DiagramEngine, onEdit?: (node: any) => void): NodeToolbarConfig

createLockAction

Create action to lock/unlock node Toggles the locked state of the node

ts
function createLockAction(): ToolbarAction

createMindMapPreset

Mind Map Preset Optimized for hierarchical mind mapping

ts
function createMindMapPreset(engine: DiagramEngine, onEdit?: (node: any) => void): NodeToolbarConfig

createMinimalPreset

Minimal Preset Basic actions for simple diagrams

ts
function createMinimalPreset(engine: DiagramEngine, onEdit?: (node: any) => void): NodeToolbarConfig

createSendToBackAction

Create action to send node to back Sets node z-index to 0 or minimum value

ts
function createSendToBackAction(engine: DiagramEngine): ToolbarAction

createStandardActions

Helper to create all standard actions Returns an array of commonly used toolbar actions

ts
function createStandardActions(
  engine: DiagramEngine,
  onEdit?: (node: NodeModel) => void
): ToolbarAction[]

createStandardPreset

Standard Preset Comprehensive set of actions for general-purpose diagrams

ts
function createStandardPreset(engine: DiagramEngine, onEdit?: (node: any) => void): NodeToolbarConfig

createWorkflowPreset

Workflow Preset Optimized for process flow diagrams

ts
function createWorkflowPreset(engine: DiagramEngine, onEdit?: (node: any) => void): NodeToolbarConfig

getToolbarPreset

Get a preset by name

ts
function getToolbarPreset(
  name: ToolbarPresetName,
  engine: DiagramEngine,
  onEdit?: (node: any) => void
): NodeToolbarConfig

insertNodeOnEdge

Split a link around a new node, as ONE undoable step.

The whole splice is wrapped in a MacroCommand — remove the old link, add the node, add the two halves — so a single Ctrl+Z restores the original edge exactly (MacroCommand undoes its steps in reverse).

MANUAL WAYPOINTS ARE RESPECTED: a hand-routed link keeps its shape. The waypoints upstream of the split stay on the first half, the downstream ones move to the second, and each half is re-flagged hasManualWaypoints only if it actually inherited any (otherwise it auto-routes, as a fresh link should).

ts
async function insertNodeOnEdge(
  engine: DiagramEngine,
  link: LinkModel,
  t: number,
  point: Point,
  tangent?: Point,
  options: InsertNodeOnEdgeOptions = {}
): Promise<{ nodeId: string; sourceLinkId: string; targetLinkId: string } | null>

Returns the ids of the created node and links, or null if the split was impossible.

pointAtFraction

Arc-length interpolation along a polyline (NOT index interpolation).

ts
function pointAtFraction(points: Point[], t: number): Point | null

polylineLength

ts
function polylineLength(points: Point[]): number

portSidesForTangent

Which sides of the inserted node the two halves connect to, from the edge's direction of travel: a rightward edge enters on the LEFT and leaves on the RIGHT, a downward edge enters on TOP and leaves at the BOTTOM, etc.

ts
function portSidesForTangent(tangent?: Point): {
  entry: 'left' | 'right' | 'top' | 'bottom';
  exit: 'left' | 'right' | 'top' | 'bottom';
}

splitPolylineAt

Split a polyline at fraction t, keeping every interior vertex on the correct side. This is what lets insert-node-on-edge RESPECT MANUAL WAYPOINTS: the waypoints before the split stay on the upstream link, the ones after it move to the downstream link.

ts
function splitPolylineAt(
  points: Point[],
  t: number
): { before: Point[]; after: Point[]; point: Point } | null

tangentAtFraction

Unit direction of travel at fraction t.

ts
function tangentAtFraction(points: Point[], t: number): Point | null

Was this page helpful?

Components — functions — Grafloria