Flow Node

Introduction

FlowNode extends Mesh and is designed to represent a node within a flow diagram.

Constructors

• FlowNode(diagram: FlowDiagram, node: FlowNodeParameters)
  • Description: Initializes a new instance of FlowNode with the specified diagram and node parameters.
  • Parameters:
    • diagram (FlowDiagram): The flow diagram to which this node belongs.
    • node (FlowNodeParameters): Configuration parameters for the node.
  • Example:

    const flowDiagram = new FlowDiagram();
    const nodeParams = { id: 'node1', material: {color: 'red'}, width: 100, height: 50 };
    const flowNode = new FlowNode(flowDiagram, nodeParams);

Properties

• width
  • Type: number
  • Description: Gets or sets the width of the node. The value is clamped between minwidth and maxwidth. Fires FlowEventType.WIDTH_CHANGED event
• height
  • Type: number
  • Description: Gets or sets the height of the node. The value is clamped between minheight and maxheight. Fires FlowEventType.HEIGHT_CHANGED event
• lockaspectratio
  • Type: boolean
  • Description: When true, resizing objects with same width and height (like circles and squares) works correctly. color
  • Type: ColorRepresentation
  • Description: Gets or sets the color of the node.
• resizable
  • Type: boolean
  • Description: Indicates whether the node is resizable. Fires FlowEventType.RESIZABLE_CHANGED event
• draggable
  • Type: boolean
  • Description: Indicates whether the node is draggable. Fires FlowEventType.DRAGGABLE_CHANGED event
• scalable
  • Type: boolean
  • Description: Indicates whether the node is scalable. Fires FlowEventType.SCALABLE_CHANGED event
• scalar
  • Type: number
  • Description: Gets or sets the scale factor of the node. Fires FlowEventType.SCALE_CHANGED event
• hidden
  • Type: boolean
  • Description: Gets or sets the visibility of the node. Fires FlowEventType.HIDDEN_CHANGED event

Public Methods

• getConnector(id?: string): Object3D
  • Description: Retrieves a connector object for this node. This can be used for linking nodes with edges.
  • Parameters:
    • id (string, optional): The identifier of the connector.
  • Returns: Object3D
  • Usage:

    const connector = flowNode.getConnector('connectorId');

Override Methods

• createGeometry(parameters: FlowNodeParameters): BufferGeometry

  • Description: Creates the geometry for the node. This method can be overridden to customize the node's shape.
  • Parameters:
    • parameters (FlowNodeParameters): The parameters for the node.
  • Returns: BufferGeometry
  • Usage:

    class CustomFlowNode extends FlowNode {
      override createGeometry(params:CustomFlowNodeParameters) {
        return new CustomGeometry(params.width, params.height);
      }
    }
    // or
    node.createGeometry = (parameters: CustomFlowNodeParameters): BufferGeometry => {
      return new CustomGeometry(this.width, this.height)
    }

• resizeGeometry()

  • Description: Called by the base class when geometry is resized. Allows derived classes to resize based on new width and height.
  • Returns: void
  • Usage:

    this.resizeGeometry = () => {
      mesh.geometry = this.bannerGeometry(bannerheight, bannerdentsize)
      mesh.position.set(0, (-this.height + bannerheight) / 2, 0.001)
    
      if (subtitle.wrapwidth != this.width - 0.2) {
        subtitle.wrapwidth = this.width - 0.2
        subtitle.updateLabel()
      }
    }

• dispose()

  • Description: Disposes of the node, freeing up resources and Fires FlowEventType.DISPOSE event
  • Returns: void
  • Usage:

      flowNode.dispose();

Events

• FlowEventType.WIDTH_CHANGED
  • Description: Fired when the node's width changes.
• FlowEventType.HEIGHT_CHANGED
  • Description: Fired when the node's height changes.
• FlowEventType.RESIZABLE_CHANGED
  • Description: Fired when the resizable property changes.
• FlowEventType.DRAGGABLE_CHANGED
  • Description: Fired when the draggable property changes.
• FlowEventType.SCALABLE_CHANGED
  • Description: Fired when the scalable property changes.
• FlowEventType.SCALE_CHANGED
  • Description: Fired when the scalar property changes.
• FlowEventType.HIDDEN_CHANGED
  • Description: Fired when the hidden property changes.
• FlowEventType.DISPOSE
  • Description: Fired when the node is disposed.