moving more logic into individual nodes to prep for GPU compute version

Author: Sean McBeth

src/Juniper.TypeScript/@juniper-lib/widgets/src/ForceDirectedGraph/ForceDirectedGraph.ts

@@ -193,11 +193,11 @@ export class ForceDirectedGraph<T> {
 
                 if (nextGrabbed !== lastGrabbed) {
                     if (lastGrabbed) {
-                        lastGrabbed.element.classList.remove("top-most");
+                        lastGrabbed.grabbed = false;
                     }
 
                     if (nextGrabbed) {
-                        nextGrabbed.element.classList.add("top-most");
+                        nextGrabbed.grabbed = true;
                         nextGrabbed.pinned = true;
                     }
                 }
@@ -258,7 +258,7 @@ export class ForceDirectedGraph<T> {
 
         const resizer = new ResizeObserver((evts) => {
             for (const evt of evts) {
-                if (evt.target == this.connectorsCanvas) {
+                if (evt.target === this.connectorsCanvas) {
                     this.resize();
                 }
             }
@@ -579,30 +579,14 @@ export class ForceDirectedGraph<T> {
         attractFunc: (connected: boolean, len: number) => number,
         repelFunc: (connected: boolean, len: number) => number) {
 
-        for (const node of this.graph.values()) {
-            node.resetForce();
-        }
-
         // calculate forces
         for (const n1 of this.graph.values()) {
-            if (this.displayDepth < 0 || n1.depth <= this.displayDepth) {
-                if (n1 === this.grabbed) {
-                    n1.moveTo(this.mousePoint);
-                }
-                else if (!n1.pinned
-                    && this.running
-                    && this.performLayout) {
-
-                    n1.gravitate(this.centeringGravity);
-
-                    for (const n2 of this.graph.values()) {
-                        if (n1 !== n2
-                            && (this.displayDepth < 0 || n2.depth <= this.displayDepth)) {
-                            n1.attractRepel(n2, this.attract, attractFunc, this.repel, repelFunc, this.getWeightMod);
-                        }
-                    }
-                }
-            }
+            n1.applyForces(
+                this.graph.values(), 
+                this.running, this.performLayout, this.displayDepth, this.centeringGravity, 
+                this.mousePoint, 
+                this.attract, this.repel, attractFunc, repelFunc,
+                this.getWeightMod);
         }
 
         for (const n1 of this.graph.values()) {

src/Juniper.TypeScript/@juniper-lib/widgets/src/ForceDirectedGraph/ForceDirectedNode.ts

@@ -47,18 +47,24 @@ export class ForceDirectedNode<T> extends GraphNode<T> {
     public readonly halfSize = new Vec2();
     public readonly dynamicForce = new Vec2();
 
-    private _pinned = false;
-
     public depth = -1;
     public hidden = false;
 
     get pinned() {
-        return this._pinned;
+        return this.element.classList.contains("pinned");
     }
 
     set pinned(v) {
-        this._pinned = v;
-        this.pinner.innerHTML = this.pinned ? pinned : unpinned;
+        this.element.classList.toggle("pinned", v);
+        this.pinner.innerHTML = v ? pinned : unpinned;
+    }
+
+    get grabbed() {
+        return this.element.classList.contains("top-most");
+    }
+
+    set grabbed(v) {
+        this.element.classList.toggle("top-most", v);
     }
 
     get moving() {
@@ -74,7 +80,6 @@ export class ForceDirectedNode<T> extends GraphNode<T> {
 
         this.pinner = document.createElement("button");
         this.pinner.type = "button";
-        this.pinner.innerHTML = unpinned;
         this.pinner.style.float = "right";
         this.pinner.style.backgroundColor = "transparent";
         this.pinner.addEventListener("click", () =>
@@ -90,6 +95,10 @@ export class ForceDirectedNode<T> extends GraphNode<T> {
         this.element.append(this.pinner, this.content);
 
         this.setContent(content);
+
+        this.pinned = false;
+        this.grabbed = false;
+        this.moving = false;
     }
 
     setContent(content: string | HTMLElement) {
@@ -111,6 +120,40 @@ export class ForceDirectedNode<T> extends GraphNode<T> {
         }
     }
 
+    applyForces(nodes: Iterable<ForceDirectedNode<T>>,
+        running: boolean,
+        performLayout: boolean,
+        displayDepth: number,
+        centeringGravity: number,
+        mousePoint: Vec2,
+        attract: number,
+        repel: number,
+        attractFunc: (connected: boolean, len: number) => number,
+        repelFunc: (connected: boolean, len: number) => number,
+        getWeightMod: (connected: boolean, dist: number, a: T, b: T) => number) {
+        this.dynamicForce.x = 0;
+        this.dynamicForce.y = 0;
+
+        if (displayDepth < 0 || this.depth <= displayDepth) {
+            if (this.grabbed) {
+                this.moveTo(mousePoint);
+            }
+            else if (!this.pinned
+                && running
+                && performLayout) {
+
+                this.dynamicForce.scaleAndAdd(this.position, -centeringGravity);
+
+                for (const n2 of nodes) {
+                    if (this !== n2
+                        && (displayDepth < 0 || n2.depth <= displayDepth)) {
+                        this.attractRepel(n2, attract, attractFunc, repel, repelFunc, getWeightMod);
+                    }
+                }
+            }
+        }
+    }
+
     updatePosition(center: Vec2, maxDepth: number) {
         const { position, element } = this;
         element.style.display = this.isVisible(maxDepth) ? "" : "none";
@@ -129,11 +172,6 @@ export class ForceDirectedNode<T> extends GraphNode<T> {
             .sub(this.mouseOffset);
     }
 
-    resetForce() {
-        this.dynamicForce.x = 0;
-        this.dynamicForce.y = 0;
-    }
-
     private isVisible(maxDepth: number) {
         return !this.hidden
             && (maxDepth < 0
@@ -145,10 +183,6 @@ export class ForceDirectedNode<T> extends GraphNode<T> {
             && !this.element.classList.contains("not-cycled");
     }
 
-    gravitate(gravity: number) {
-        this.dynamicForce.scaleAndAdd(this.position, -gravity);
-    }
-
     attractRepel(
         n2: ForceDirectedNode<T>,
         attract: number, attractFunc: (connected: boolean, len: number) => number,