Expand and collapse working

projects/three-flow/src/lib/diagram.ts

@@ -1,5 +1,4 @@
 import { Box3, Material, MaterialParameters, MeshBasicMaterial, MeshBasicMaterialParameters, Object3D, Vector2, Vector3 } from "three";
-import { LineMaterial, LineMaterialParameters } from "three/examples/jsm/lines/LineMaterial";
 import { FlowEdgeParameters, FlowDiagramParameters, FlowNodeParameters, FlowRouteParameters, EdgeLineStyle, FlowEventType, FlowLayout, FlowLabelParameters } from "./model";
 import { Font } from "three/examples/jsm/loaders/FontLoader";
 import { FlowEdge } from "./edge";
@@ -94,11 +93,11 @@ export class FlowDiagram extends Object3D {
     }
   }
 
-  layout(label: any = {}, filter?: (nodeId: string) => boolean) {
+  layout(options: any = {}, filter?: (nodeId: string) => boolean) {
     const nodes = this.allNodes.map(node => node.parameters)
     const edges = this.allEdges.map(edge => edge.parameters)
 
-    const result = this.graph.layout(nodes, edges, label, filter)
+    const result = this.graph.layout(nodes, edges, options, filter)
 
     const centerx = result.width! / 2
     const centery = result.height! / 2
@@ -107,20 +106,21 @@ export class FlowDiagram extends Object3D {
       const item = this.hasNode(node.id)
       if (item) {
         item.position.set(node.x! - centerx, -node.y! + centery, 0)
+        item.dispatchEvent<any>({type: FlowEventType.DRAGGED})
       }
     })
 
-    // redraw edges using calculated points
-    result.edges.forEach(edge => {
-      const item = this.hasEdge(edge.id)
-      if (item) {
-        const center = new Vector2(centerx, centery)
-        edge.points.forEach(point => point.sub(center))
-        item.parameters.points = edge.points
-
-        item.updateVisuals()
-      }
-    })
+    //// redraw edges using calculated points
+    //result.edges.forEach(edge => {
+    //  const item = this.hasEdge(edge.id)
+    //  if (item) {
+    //    const center = new Vector2(centerx, centery)
+    //    edge.points.forEach(point => point.sub(center))
+    //    item.parameters.points = edge.points
+
+    //    item.updateVisuals()
+    //  }
+    //})
 
   }
 

src/examples/expand-collapse.ts

@@ -2,7 +2,8 @@ import { AmbientLight, AxesHelper, Color, PointLight, Scene } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 
 import { ThreeJSApp } from "../app/threejs-app";
-import { FlowDiagram, FlowPointerEventType } from "three-flow";
+import { FlowDiagram, FlowDiagramParameters, FlowEdge, FlowEdgeParameters, FlowEventType, FlowInteraction, FlowLabel, FlowNode, FlowNodeParameters, FlowPointer, FlowPointerEventType } from "three-flow";
+import { DagreLayout } from "./dagre-layout";
 
 export class ExpandCollapseExample {
 
@@ -45,11 +46,116 @@ export class ExpandCollapseExample {
 
     //scene.add(new AxesHelper(3))
 
-    const flow = new FlowDiagram()
+    const nodes: Array<FlowNodeParameters> = [
+      { id: 'n1' },
+      { id: 'n2' },
+      { id: 'n3' },
+      { id: 'n4' },
+      { id: 'n5' },
+
+      { id: 'n6' },
+      { id: 'n7' },
+      { id: 'n8' },
+    ]
+
+    const edges: Array<FlowEdgeParameters> = [
+      { from: 'n1', to: 'n2' },
+      { from: 'n1', to: 'n3' },
+      { from: 'n2', to: 'n4' },
+      { from: 'n3', to: 'n5' },
+
+      { from: 'n6', to: 'n7' },
+      { from: 'n6', to: 'n8' },
+    ]
+
+    const diagram: FlowDiagramParameters = {
+      nodes, edges
+    }
+
+    const flow = new FlowDiagram({ linestyle: 'bezier', layout: new DagreLayout() })
     scene.add(flow);
 
+    const interaction = new FlowInteraction(flow, app.interactive)
+
+    flow.createNode = (parameters: FlowNodeParameters): FlowNode => {
+      return new ExpandCollapseNode(flow, parameters)
+    }
+
+    flow.loadDiagram(diagram)
+
+    flow.layout({ rankdir: 'TB', ranksep: 0.7 })
+
     this.dispose = () => {
+      interaction.dispose()
       orbit.dispose()
     }
   }
 }
+
+type ExpandState = 'none' | 'expand' | 'collapse'
+
+class ExpandCollapseNode extends FlowNode {
+  constructor(diagram: FlowDiagram, parameters: FlowNodeParameters) {
+    parameters.label = { text: '', size: 0.07 }
+    parameters.height = 0.2
+    parameters.scalable = parameters.resizable = false
+    parameters.draggable = false
+
+    super(diagram, parameters)
+
+    const label = this.label!
+    label.text = 'nothing to expand'
+
+    let state: ExpandState = 'none'
+    const icon = new FlowLabel(diagram, { text: '', isicon: true })
+    label.add(icon)
+    icon.visible = false
+
+    const connectedNodes: Array<FlowNode> = []
+
+    diagram.addEventListener(FlowEventType.EDGE_ADDED, (e: any) => {
+      const edge = e.edge as FlowEdge
+      if (edge.from != this.name) return
+      connectedNodes.push(diagram.hasNode(edge.to)!)
+
+      label.text = 'click to collapse'
+      state = 'collapse'
+      icon.text = 'expand_less'
+      icon.visible = true
+    })
+
+    diagram.addEventListener(FlowEventType.NODE_REMOVED, (e: any) => {
+      console.warn('node removed', e)
+      const node = e.node as FlowNode
+    })
+
+    label.addEventListener(FlowEventType.WIDTH_CHANGED, () => {
+      icon.position.x = label.width / 2
+    })
+
+    this.addEventListener(FlowPointerEventType.CLICK, () => {
+      if (state == 'none') return
+      if (state == 'expand') {
+        label.text = 'click to collapse'
+        state = 'collapse'
+        icon.text = 'expand_less'
+      }
+      else {
+        label.text = 'click to expand'
+        icon.text = 'expand_more'
+        state = 'expand'
+      }
+
+      connectedNodes.forEach(node => node.hidden = !node.hidden)
+      //diagram.layout({ rankdir: 'TB', ranksep: 0.7 })
+    })
+
+    // listen for changes and forward to anything connected to match this nodes hidden state
+    this.addEventListener(FlowEventType.HIDDEN_CHANGED, () => {
+      if (state != 'collapse') return
+      connectedNodes.forEach(node => node.hidden = this.hidden)
+    })
+
+  }
+
+}