Skip to content
D
Documentation

NodeModel

reference
5 min readUpdated

Import it from @grafloria/engine.

Also has every member of DiagramEntity, listed on its own entry.

ts
class NodeModel extends DiagramEntity

Properties

NameTypeDefaultDescription
diagram?DiagramModel
positionPoint
sizeSize
rotationnumber0
scalePoint
positionModePositioningMode'absolute'
transformOriginPoint
zIndex?numberModel-level stacking order (lower renders further back), as on GroupModel. A document fact, so undo and the diff/collab layers see it (unlike style.zIndex).
flexConfig?FlexItemConfig
gridConfig?GridItemConfig
portRenderingConfig?any
dragHandlerConfig?any
connectionGroup?string
typestring
systemType?string
definitionId?string
parentId?string
childrenSet<string>
depthnumber0
portsMap<string, PortModel>
stateNodeState
behaviorNodeBehavior
stylePartial<NodeStyle>{}
classesSet<string>
dataRecord<string, any>{}
computedMap<string, any>

Methods

  • constructor(config: { id?: string; type: string; position: Point; size?: Size; systemType?: string; definitionId?: string; })
  • setPosition(x: number, y: number, z?: number): void — Set position
  • move(dx: number, dy: number, dz?: number): void — Move by delta
  • setSize(width: number, height: number, depth?: number): void — Set size.
  • resize(dw: number, dh: number, dd?: number): void — Resize by delta
  • setRotation(degrees: number): void — Set rotation
  • rotate(degrees: number): void — Rotate by delta
  • setScale(x: number, y: number): void — Set scale
  • addPort(port: PortModel): void — Add port
  • removePort(portId: string): PortModel | undefined — Remove port
  • getPort(portId: string): PortModel | undefined — Get port by ID
  • getPorts(): PortModel[] — Get all ports
  • getIncomingLinks(): import('./LinkModel').LinkModel[] — Links arriving at this node (resolved through the owning diagram; empty when the node isn't attached to a diagram yet)
  • getOutgoingLinks(): import('./LinkModel').LinkModel[] — Links leaving this node (resolved through the owning diagram)
  • getPortsByType(type: 'input' | 'output' | 'bi'): PortModel[] — Get ports by type
  • getPortBySide(side: 'top' | 'right' | 'bottom' | 'left'): PortModel | undefined — Get port by side Returns the first port found on the specified side
  • getPortsBySide(side: 'top' | 'right' | 'bottom' | 'left'): PortModel[] — Get all ports on a specific side Useful for nodes with multiple ports per side
  • getAvailablePorts(type?: 'input' | 'output' | 'bi'): PortModel[] — Get available ports that can accept connections
  • getConnectedPorts(): PortModel[] — Get ports that have active connections
  • setState(state: Partial<NodeState>): void — Set state property
  • replaceState(state: Partial<NodeState>): void — REPLACE the DOCUMENT half of state, keeping THIS viewer's own view half.
  • setBehavior(behavior: Partial<NodeBehavior>): void — Set behavior property
  • isSelected(): boolean — Check if node is selected
  • setSelected(selected: boolean): void — Set selection state
  • isHighlighted(): boolean — Check if node is highlighted (attention state, independent of selection)
  • setHighlighted(highlighted: boolean): void — Set highlight state (attention emphasis without selecting the node)
  • isSelectable(): boolean — Check if node is selectable (based on behavior) Note: Locked nodes are still selectable so users can unlock them
  • isDraggable(): boolean — Check if node is draggable (based on behavior and state) Note: Locked nodes cannot be dragged
  • setStyle(style: Partial<NodeStyle>): void — Set style property
  • replaceStyle(style: Partial<NodeStyle>): void — REPLACE the whole style object — the write setStyle cannot express.
  • addClass(className: string): void — Add CSS class
  • removeClass(className: string): void — Remove CSS class
  • setClasses(classNames: string[]): void — REPLACE the whole class collection.
  • setData(key: string, value: any): void — Set data property
  • getData(key: string): any — Get data property
  • setComputed(key: string, value: any): void — Set computed property
  • getComputed(key: string): any — Get computed property
  • getWorldPosition(): Point — Get world position (absolute coordinates accounting for parent chain) For nodes without parents, this is the same as position For child nodes, this walks up the parent chain and accumulates offsets
  • getBoundingBox(): BoundingBox — Get bounding box in world coordinates For child nodes, this accounts for parent position
  • getCenter(): Point — Get center point in world coordinates
  • containsPoint(point: Point): boolean — Check if point is inside node
  • intersectsBounds(bounds: BoundingBox): boolean — Check if intersects with bounding box
  • setParent(parentId: string | undefined): void — Set parent
  • addChild(childId: string): void — Add child
  • removeChild(childId: string): void — Remove child
  • setChildren(childIds: string[]): void — REPLACE the whole child collection. The collab reducer's write path.
  • setTransformOrigin(x: number, y: number): void — Set transform origin
  • getAbsoluteTransformOrigin(): Point — Get absolute transform origin in pixels
  • getLocalPosition(): Point — Get local position Returns the position property as-is
  • getGlobalPosition(): Point — Get global position In absolute mode: returns position as-is In relative mode: transforms position by parent's hierarchy transform
  • setLocalPosition(x: number, y: number, z?: number): void — Set local position Sets position directly and switches to relative mode
  • setGlobalPosition(x: number, y: number, z?: number): void — Set global position Converts global coordinates to local if parent exists
  • getLocalTransformMatrix(): TransformMatrix — Get local transform matrix Composes translation, rotation, and scale relative to transform origin
  • getGlobalTransformMatrix(): TransformMatrix — Get global transform matrix In absolute mode: returns local matrix In relative mode: composes parent's global matrix with local matrix
  • getGlobalBounds(): BoundingBox — Get global bounding box Calculates bounds by transforming all 4 corners through global matrix
  • getChildren(): NodeModel[] — Get direct children nodes
  • getParent(): NodeModel | undefined — Get parent node Public version of getParentNode
  • getAncestors(): NodeModel[] — Get all ancestor nodes up to root Returns array with direct parent first, then grandparent, etc.
  • getDescendants(): NodeModel[] — Get all descendant nodes recursively
  • getRoot(): NodeModel — Get root node of hierarchy Returns self if this is the root
  • getSiblings(): NodeModel[] — Get sibling nodes (same parent, excluding self)
  • isAncestorOf(nodeId: string): boolean — Check if this node is an ancestor of another node
  • getDepth(): number — Get depth in hierarchy Root nodes have depth 0, their children have depth 1, etc.
  • validateHierarchy(): boolean — Validate hierarchy for circular references
  • updateHierarchyDepth(): void — Update depth for this node and all descendants Recalculates depth values based on current hierarchy
  • getAffectedByTransform(): NodeModel[] — Get all nodes affected by transform changes Returns this node plus all descendants in relative positioning mode
  • getEffectiveZIndex(): number — The stacking index a renderer should paint by.
  • setZIndex(z: number | undefined): void — Set the stacking index (lower renders further back). Tracked for undo/diff.
  • bringToFront(diagram?: DiagramModel): void — Bring this node in front of every other node in the diagram. Falls back to a relative bump when the node is detached, exactly as GroupModel.bringToFront does.
  • sendToBack(diagram?: DiagramModel): void — Send this node behind every other node in the diagram.
  • setFlexItem(config: FlexItemConfig): void — Set flexbox item configuration
  • clearFlexItem(): void — Clear flexbox item configuration
  • getFlexItem(): FlexItemConfig | undefined — Get flexbox item configuration
  • hasFlexItem(): boolean — Check if node has flex item configuration
  • setGridItem(config: GridItemConfig): void — Set grid item configuration
  • clearGridItem(): void — Clear grid item configuration
  • getGridItem(): GridItemConfig | undefined — Get grid item configuration
  • hasGridItem(): boolean — Check if node has grid item configuration
  • setPortRenderingConfig(config: any): void — Set port rendering configuration
  • getPortRenderingConfig(): any | undefined — Get port rendering configuration
  • getPortRenderingMode(): 'svg' | 'html' | 'auto' — Get port rendering mode Auto-detects based on configuration and metadata
  • setDragHandlerConfig(config: any): void — Set drag handler configuration
  • getDragHandlerConfig(): any | undefined — Get drag handler configuration
  • isDragHandler(): boolean — Check if this node is a drag handler
  • setConnectionGroup(group: string): void — Set connection group
  • getConnectionGroup(): string | undefined — Get connection group
  • serialize(): SerializedNode — Serialize to JSON
  • static fromJSON(data: SerializedNode): NodeModel (static) — Deserialize from JSON

Was this page helpful?

NodeModel — Grafloria