Getting Started

Welcome to the Three-Flow library! This guide will help you get started with integrating Three-Flow into your existing Three.js project to add interactive flow diagrams. Three-Flow leverages the power of Three.js to provide a robust set of classes for building, manipulating, and interacting with flow diagrams.

Creating a Flow Diagram

1. Initialize a Flow Diagram

   • First, create a new instance of FlowDiagram. This class represents the flow diagram within your Three.js scene.

   import { FlowDiagram } from 'three-flow';
   
   const flowDiagram = new FlowDiagram();
   scene.add(flowDiagram);

2. Adding Nodes and Edges to the Diagram

   • Nodes and Edges are the fundamental elements of your flow diagram. Node and edge data can be declared or downloaded in a JSON file and loaded.

const diagram: FlowDiagramParameters = {
  nodes: [
    {
      id: "1", material: {color: 'green'}, y: 1,
      label: { text: "Green Center", },
      labelanchor: 'top', labeltransform: { translate: { y: -0.1 } },
    },
    {
      id: "2", material: {color: 'red'}, x: 1.5,
      label: { text: "Red Right" },
    },
    {
      id: "3", material: {color: 'gold'}, x: -1.5,
      label: { text: "Gold Left" },
    }
  ],
  edges: [
    { from: "2", to: "1", },
    { from: "3", w: "2", },
  ]
}

const flow = new FlowDiagram()
scene.add(flow);

flow.load(diagram)

Alternatively, nodes and edges can be programmatically created using addNode and addEdge

const node4 = flow.addNode({
  id: '4', y: -0.5, material: {color: 'blue'},
  label: { text: 'Blue Square', material: {color: 'white'} }
})
flow.addEdge({ from: node4.name, to: '1' })

3. Connectors

• Connectors define points on nodes where edges can connect. Use FlowConnectors to manage these connectors, enabling the creation of more organized and visually coherent flow diagrams. Connectors allow for more precise control over where edges attach to nodes,

import { FlowConnectors } from 'three-flow';

// Assuming 'flowNode' is an instance of FlowNode
const flowConnectors = new FlowConnectors(flowDiagram);
const connectorParams = [{ id: 'connector1', anchor: 'top' }];
flowConnectors.addConnectors(node4, connectorParams);

4. Interactive Features

   • To add interactive features like dragging, resizing, and scaling nodes, create an instance of FlowInteraction before adding or loading anything to the diagram.

   import { FlowInteraction } from 'three-flow';
   
   const flowInteraction = new FlowInteraction(flowDiagram, renderer, camera);