Flow Edge

Introduction

FlowEdge extends Mesh and represents an edge or a connection between two nodes in a flow diagram.

Constructors

• FlowEdge(diagram: FlowDiagram, edge: FlowEdgeParameters)
  • Description: Initializes a new instance of the FlowEdge class with a reference to the diagram it belongs to and specific edge parameters.
  • Parameters:
    • diagram (FlowDiagram): The flow diagram to which this edge belongs.
    • edge (FlowEdgeParameters): Configuration parameters for the edge.
  • Example:

    const flowDiagram = new FlowDiagram();
    const edgeParams = { id: 'edge1', from: 'node1', to: 'node2', material:{color: 'blue'} };
    const flowEdge = new FlowEdge(flowDiagram, edgeParams);

Properties

• color
  • Type: ColorRepresentation
  • Description: Gets or sets the color of the edge.
• linestyle
  • Type: EdgeLineStyle
  • Description: Gets or sets the line style of the edge.
• divisions
  • Type: number
  • Description: Gets or sets the number of divisions for the edge curve.
• thickness
  • Type: number
  • Description: Gets or sets the thickness of the edge.
• data
  • Type: { [key: string]: any; } | undefined
  • Description: Optional data associated with the edge.

Public Methods

• addConnector(fromconnector?: string, toconnector?: string, update: boolean = true)

  • Description: Adds connectors to the edge from the source and target nodes.
  • Parameters:
    • fromconnector (string, optional): The identifier of the connector at the source node.
    • toconnector (string, optional): The identifier of the connector at the target node.
    • update (boolean, optional): Whether to update visuals after adding connectors.
  • Returns: void

• removeConnector()

  • Description: Removes connectors from the edge.
  • Returns: void

Override Methods

• createLine(curvepoints: Array): BufferGeometry

  • Description: Creates a line geometry for the edge.
  • Parameters:
    • curvepoints (Array): Points defining the curve of the line.
  • Returns: BufferGeometry
  • Usage:

    class CustomFlowEdge extends FlowEdge {
      override createLine(curvepoints: Array<Vector3>): BufferGeometry {
        return new BufferGeometry().setFromPoints(curvepoints);
      }
    }
    // or
    edge.createLine = (curvepoints: Array<Vector3>): BufferGeometry => {
      return new BufferGeometry().setFromPoints(curvepoints);
    }

• createGeometry(curvepoints: Array, thickness: number): BufferGeometry | undefined

  • Description: Creates a geometry for the edge. Can be overridden to customize the edge's shape.
  • Parameters:
    • curvepoints (Array): Points defining the curve of the edge.
    • thickness (number): Thickness of the edge.
  • Returns: BufferGeometry | undefined
  • Usage:

    class CustomFlowEdge extends FlowEdge {
      override createGeometry(curvepoints: Array<Vector3>, thickness: number): BufferGeometry | undefined {
        const curve = new CurvePath<Vector3>()
        for (let i = 0; i < curvepoints.length - 1; i++) {
          curve.add(new LineCurve3(curvepoints[i], curvepoints[i + 1]))
        }
        return new TubeGeometry(curve, 64, thickness)
      }
    }
    // or
    edge.createGeometry = (curvepoints: Array<Vector3>, thickness: number): BufferGeometry | undefined => {
      const curve = new CurvePath<Vector3>()
      for (let i = 0; i < curvepoints.length - 1; i++) {
        curve.add(new LineCurve3(curvepoints[i], curvepoints[i + 1]))
      }
      return new TubeGeometry(curve, 64, thickness)
    }

• createArrow(arrow: FlowArrowParameters): FlowArrow

  • Description: Creates an arrow for the edge.
  • Parameters:
    • arrow (FlowArrowParameters): Parameters for creating the arrow.
  • Returns: FlowArrow
  • Usage:

    class CustomFlowEdge extends FlowEdge {
      override createArrow(arrow: CustomFlowArrowParameters): FlowArrow {
        return new CustomFlowArrow(this, arrow)
      }
    }
    // or
    edge.createArrow = (arrow: CustomFlowArrowParameters): FlowArrow => {
      return new CustomFlowArrow(this, arrow)
    }