Skip to content

Flow Diagram

Jump to bottom
anidivr edited this page Nov 30, 2023 · 13 revisions

Introduction

FlowDiagram extends Object3D and is designed for creating and managing flow diagrams.

Constructors

  • FlowDiagram(options?: FlowDiagramOptions)
    • Description: Constructs a new FlowDiagram instance with optional configuration.
    • Parameters:
      • options (FlowDiagramOptions, optional): Configuration options for the diagram.
    • Example: 
      const diagram = new FlowDiagram({ gridsize: 10, linematerial: {color: 0xff0000 } });

Properties

  • nodeCount

    • Type: number
    • Description: Retrieves the current count of nodes in the diagram.

  • edgeCount

    • Type: number
    • Description: Retrieves the current count of edges in the diagram.

  • active

    • Type: FlowNode | undefined
    • Description: Gets or sets the active node in the diagram. Fires FlowEventType.ACTIVE_CHANGED event

  • gridsize

    • Type: number
    • Description: Gets or sets the grid size of the diagram.

Methods

  • save(): FlowDiagramParameters

    • Description: Saves the current state of the diagram, including its nodes and edges.
    • Returns: FlowDiagramParameters
    • Example: 
      // Assuming 'diagram' is an instance of FlowDiagram
const savedDiagramState = diagram.save();

// 'savedDiagramState' now contains the data of the diagram
// This can be used to persist the diagram state, for example, saving to a file or database
console.log(savedDiagramState);

  • load(input: FlowDiagramParameters)

    • Description: Loads a diagram from a previously saved state.
    • Parameters:
      • input (FlowDiagramParameters): The diagram data to load.
    • Returns: void
    • Example: 
      // Assuming 'diagram' is an instance of FlowDiagram
// And 'diagramData' is the previously saved state of a diagram
const diagramData = {
  version: 1,
  nodes: [{ /* node data */ }],
  edges: [{ /* edge data */ }]
};

diagram.load(diagramData);

// The diagram now reflects the state from 'diagramData'

  • layout(label: any, filter?: (nodeId: string) => boolean)

    • Description: Applies a layout to the diagram, arranging its nodes and edges based on certain criteria or algorithms.
    • Parameters:
      • label (any): Label information for layout.
      • filter (Function, optional): A function to filter nodes.
    • Returns: void
    • Example: 
      // Assuming 'diagram' is an instance of FlowDiagram
// Applying a layout to the diagram
// 'label' can be an object with layout-related properties
// 'filter' is an optional function to filter nodes based on their IDs
diagram.layout({ /* label properties */ }, (nodeId) => {
  // Return true for nodes that should be included in the layout
  return true; // This example includes all nodes
});

// After this call, the nodes and edges of the diagram are rearranged according to the specified layout

  • getCenter(): Vector3

    • Description: Computes the center of the diagram.
    • Returns: Vector3

  • getFont(name: string = 'default'): Font | undefined

    • Description: Retrieves a font by name.
    • Parameters:
      • name (string, optional): Name of the font.
    • Returns: Font | undefined
    • Example: 
      // Assuming 'diagram' is an instance of FlowDiagram
let font = diagram.getFont('Arial'); // Retrieve Arial font

// If 'Arial' font is not available, it returns undefined
if (font) {
    console.log('Arial font found');
} else {
    console.log('Arial font not found, using default font');
    font = diagram.getFont(); // Retrieve default font
}

  • addNode(node: FlowNodeParameters): FlowNode

    • Description: Adds a new node to the diagram. Fires FlowEventType.NODE_ADDED event
    • Parameters:
      • node (FlowNodeParameters): The parameters for the node to be added.
    • Returns: FlowNode - The newly added node.
    • Example: 
      const newNode = diagram.addNode({ id: 'node1', label: 'Node 1' });

  • addRoute(route: FlowRouteParameters): FlowNode

    • Description: Adds a new route to the diagram. Fires FlowEventType.NODE_ADDED event
    • Parameters:
      • route (FlowRouteParameters): The parameters for the route to be added.
    • Returns: FlowNode - The newly added route.
    • Example: 
      const newRoute = diagram.addRoute({ id: 'route1', label: 'Route 1' });

  • removeNode(node: FlowNode)

    • Description: Removes the specified node from the diagram. Fires FlowEventType.NODE_REMOVED event
    • Parameters:
      • node (FlowNode): The node to be removed.
    • Returns: void
    • Example: 
      // Assuming 'diagram' is an instance of FlowDiagram
// And 'nodeToRemove' is a FlowNode instance that you want to remove
diagram.removeNode(nodeToRemove);

// The node is now removed from the diagram

  • nextNodeId(): string

    • Description: Generates the next unique node ID.
    • Returns: string - The next node ID.

  • newNode(): FlowNode

    • Description: Creates and adds a new node to the diagram.
    • Returns: FlowNode - The newly created node.

  • hasNode(id: string): FlowNode | undefined

    • Description: Checks if a node with the given ID exists in the diagram.
    • Parameters:
      • id (string): The ID of the node to check.
    • Returns: FlowNode | undefined - The node if found, otherwise undefined.

  • addEdge(edge: FlowEdgeParameters): FlowEdge

    • Description: Adds a new edge to the diagram. Fires FlowEventType.EDGE_ADDED event
    • Parameters:
      • edge (FlowEdgeParameters): The parameters for the edge to be added.
    • Returns: FlowEdge - The newly added edge.
    • Example: 
      // Assuming 'diagram' is an instance of FlowDiagram
const newEdgeParameters = {
    id: 'edge1',
    from: 'node1',
    to: 'node2',
    material: {color: 0xff0000}
};

const newEdge = diagram.addEdge(newEdgeParameters);

// A new edge has been added to the diagram

  • removeEdge(edge: FlowEdge)

    • Description: Removes the specified edge from the diagram. Fires FlowEventType.EDGE_REMOVED event
    • Parameters:
      • edge (FlowEdge): The edge to be removed.
    • Returns: void
    • Example: 
      // Assuming 'diagram' is an instance of FlowDiagram
// And 'edgeToRemove' is a FlowEdge instance that you want to remove
diagram.removeEdge(edgeToRemove);

// The edge is now removed from the diagram

  • nextEdgeId(): string

    • Description: Generates the next unique edge ID.
    • Returns: string - The next edge ID.

  • hasEdge(id: string): FlowEdge | undefined

    • Description: Checks if an edge with the given ID exists in the diagram.
    • Parameters:
      • id (string): The ID of the edge to check.
    • Returns: FlowEdge | undefined - The edge if found, otherwise undefined.

  • getMaterial(type: FlowMaterialType, purpose: string, parameters: MaterialParameters): Material

    • Description: Retrieves a material based on type, purpose, and color.
    • Parameters:
      • type (FlowMaterialType): The type of material (line or geometry).
      • purpose (string): The purpose of the material.
      • material (MaterialParameters): The color of the material.
    • Returns: Material - The retrieved material.
    • Example: 
      // Assuming 'diagram' is an instance of FlowDiagram
const materialType = 'line'; // or 'geometry'
const purpose = 'highlight';
const color = 0x00ff00; // Green color

const material = diagram.getMaterial(materialType, purpose, color);

// 'material' is now a LineBasicMaterial or MeshBasicMaterial (based on 'materialType') with green color

  • dispose()

    • Description: Disposes of the diagram and its resources. Fires FlowEventType.DISPOSE event
    • Returns: void

Override Methods

  • createLineMaterial(purpose: string, parameters: LineBasicMaterialParameters): Material

    • Description: Override to create a new line material based on the purpose and color.
    • Parameters:
      • purpose (string): The purpose of the material.
      • material (LineBasicMaterialParameters): The color for the material.
    • Returns: Material - The newly created line material.
    • Example: 
      class CustomFlowDiagram extends FlowDiagram {
  override createLineMaterial(purpose: string, parameters: LineBasicMaterialParameters): Material {
    return new CustomLineBasicMaterial(material);
  }   
}

// or
flow.createLineMaterial = (purpose: string, parameters: MeshBasicMaterialParameters): Material => {
  return new CustomLineBasicMaterial(parameters);
}

  • createMeshMaterial(purpose: string, parameters: MaterialParameters): Material

    • Description: Creates a new mesh material based on the purpose and color.
    • Parameters:
      • purpose (string): The purpose of the material.
      • material (MaterialParameters): The color for the material.
    • Returns: Material - The newly created mesh material.
    • Example: 
      class CustomFlowDiagram extends FlowDiagram {
  override createMeshMaterial(purpose: string, parameters: MaterialParameters): Material {
    return new MeshStandardMaterial(parameters);
  }
}
// or
flow.createMeshMaterial = (purpose: string, parameters: MeshStandardMaterialParameters): Material => {
  return new MeshStandardMaterial(parameters);
}

  • createNode(node: MyFlowNodeParameters): FlowNode

    • Description: Creates a new FlowNode instance based on the provided parameters.
    • Parameters:
      • node (FlowNodeParameters): Parameters for creating the node.
    • Returns: FlowNode - The newly created node.
    • Example: 
      class CustomFlowDiagram extends FlowDiagram {
  override createNode(node: CustomFlowNodeParameters): FlowNode {
    return new CustomFlowNode(this, node)
  }
}
// or
flow.createNode = (node: CustomFlowNodeParameters): FlowNode => {
  return new CustomFlowNode(this, node)
}

  • createRoute(route: FlowRouteParameters): FlowNode

    • Description: Creates a new FlowRoute instance based on the provided parameters.
    • Parameters:
      • route (FlowRouteParameters): Parameters for creating the route.
    • Returns: FlowNode - The newly created route.
    • Example: 
      class CustomFlowDiagram extends FlowDiagram {
  override createRoute(route: CustomFlowRouteParameters): FlowNode {
    return new CustomFlowRoute(this, route)
  }
}
// or
flow.createRoute = (route: CustomFlowRouteParameters): FlowNode => {
  return new CustomFlowRoute(this, route)
}

  • createEdge(edge: FlowEdgeParameters): FlowEdge

    • Description: Creates a new FlowEdge instance based on the provided parameters.
    • Parameters:
      • edge (FlowEdgeParameters): Parameters for creating the edge.
    • Returns: FlowEdge - The newly created edge.
    • Example: 
      class CustomFlowDiagram extends FlowDiagram {
  override createEdge(edge: CustomFlowEdgeParameters): FlowEdge {
    return new CustomFlowEdge(this, edge)
  }
}
// or
flow.createEdge = (edge: CustomFlowEdgeParameters): FlowEdge => {
  return new CustomFlowEdge(this, edge)
}

  • createLabel(label: FlowLabelParameters): FlowLabel

    • Description: Creates a new FlowLabel instance based on the provided parameters.
    • Parameters:
      • label (FlowLabelParameters): Parameters for creating the label.
    • Returns: FlowLabel - The newly created label.
    • Example: 
      class CustomFlowDiagram extends FlowDiagram {
  override createLabel(label: CustomFlowLabelParameters): FlowLabel {
    return new CustomFlowLabel(this, label)
  }
}
// or
flow.createLabel = (label: CustomFlowLabelParameters): FlowLabel => {
  return new CustomFlowLabel(this, label)
}

Events

  • FlowEventType.ACTIVE_CHANGED

    • Description: Fired when the active node changes.

  • FlowEventType.DISPOSE

    • Description: Fired when the diagram is disposed.

  • FlowEventType.NODE_ADDED

    • Description: Fired when a new node is added.

  • FlowEventType.NODE_REMOVED

    • Description: Fired when a node is removed.

  • FlowEventType.EDGE_ADDED

    • Description: Fired when a new edge is added.

  • FlowEventType.EDGE_REMOVED

    • Description: Fired when an edge is removed.
Clone this wiki locally