Merge branch 'link-width'

# Conflicts:
#	display/graph.js

config.js

@@ -10,6 +10,9 @@ export const COLOR_PALETTE = [
     "rgb(255, 255, 255)",
 ];
 
+export const LINK_WIDTH = 3;
+export const HOVER_LINK_WIDTH = 6;
+
 // Just renaming a variable which is given by the PHP script. This avoids errors in all other files.
 export const PLUGIN_PATH = ks_global.plugin_path;
 export var SPACE = ks_global.space_id;

display/graph.js

@@ -11,6 +11,8 @@ import {
 } from "three/examples/jsm/renderers/CSS3DRenderer.js";
 import { MODE, DRAG_THRESHOLD_3D } from "../config";
 
+import { Line2, LineGeometry, LineMaterial } from "three-fatline";
+
 /**
  * The main ForceGraph. Displays the graph and handles all connected events.
  */
@@ -56,27 +58,29 @@ export default class Graph {
         })(document.getElementById("3d-graph"))
             .graphData(this.gData)
             .nodeLabel("hidden") // Just a value that is not present as node attribute.
-            .nodeAutoColorBy("group")
-            .nodeColor((node) => this.getNodeColor(node))
-            .linkWidth((link) => this.getLinkWidth(link))
+            //.nodeAutoColorBy("group")
+            //.nodeColor((node) => this.getNodeColor(node))
+            //.linkWidth((link) => this.getLinkWidth(link))
             .onNodeClick((node) =>  this.onNodeClick(node))
             .onNodeHover((node) => {
                 this.onNodeHover(node);
                 this.updateHighlight();
             })
+            .onLinkHover((link, previousLink) =>
+                this.onLinkHover(link, previousLink)
+            )
             .onNodeDragEnd((node, translate) => this.onNodeDragEnd(node, translate))
-            .onLinkHover((link) => this.onLinkHover(link))
             //.linkColor((link) => this.getLinkColor(link))
             .linkPositionUpdate((line, { start, end }) =>
                 this.updateLinkPosition(line, start, end)
             )
-            .linkOpacity(0.8)
+            //.linkOpacity(0.8)
             .nodeThreeObjectExtend(false)
             .nodeThreeObject((node) => this.drawNode(node))
+            //.linkThreeObject((link) => this.drawLink(link))
             .onEngineTick(() => this.initializeModel())
             .width(Helpers.getWidth())
             .height(Helpers.getHeight());
-
     }
 
     /**
@@ -178,11 +182,17 @@ export default class Graph {
         this.hoverNode = node || null;
     }
 
-    onLinkHover(link) {
+    onLinkHover(link, previousLink) {
         this.highlightNodes.clear();
         this.highlightLinks.clear();
+        if (previousLink) {
+            // A bit hacky, but the alternative would require additional data structures
+            previousLink.__lineObj.material.linewidth = Config.LINK_WIDTH;
+        }
 
         if (link) {
+            link.__lineObj.material.linewidth = Config.HOVER_LINK_WIDTH;
+
             this.highlightLinks.add(link);
             this.highlightNodes.add(link.source);
             this.highlightNodes.add(link.target);
@@ -338,10 +348,10 @@ export default class Graph {
 
     updateHighlight() {
         // trigger update of highlighted objects in scene
-        this.graph
-            .nodeColor(this.graph.nodeColor())
-            .linkWidth(this.graph.linkWidth())
-            .linkDirectionalParticles(this.graph.linkDirectionalParticles());
+        // this.graph
+        //     .nodeColor(this.graph.nodeColor())
+        //     .linkWidth(this.graph.linkWidth())
+        //     .linkDirectionalParticles(this.graph.linkDirectionalParticles());
     }
 
     updateNodeMap() {
@@ -408,43 +418,54 @@ export default class Graph {
             )
         );
 
-        const material = new THREE.LineBasicMaterial({
-            vertexColors: THREE.VertexColors,
+        const geometry = new LineGeometry();
+        geometry.setPositions([0, 0, 0, 1, 1, 1]);
+        geometry.setColors(colors);
+
+        const material = new LineMaterial({
+            color: 0xffffff,
+            linewidth: Config.LINK_WIDTH, // in world units with size attenuation, pixels otherwise
+            vertexColors: true,
+
+            resolution: new THREE.Vector2(
+                window.screen.width,
+                window.screen.height
+            ), // Set the resolution to the maximum width and height of the screen.
+            dashed: false,
+            alphaToCoverage: true,
         });
-        const geometry = new THREE.BufferGeometry();
-        geometry.setAttribute(
-            "position",
-            new THREE.BufferAttribute(new Float32Array(2 * 3), 3)
-        );
-        geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
 
-        return new THREE.Line(geometry, material);
+        const line = new Line2(geometry, material);
+        line.computeLineDistances();
+        line.scale.set(1, 1, 1);
+        return line;
     }
 
     updateLinkPosition(line, start, end) {
+        if (!(line instanceof Line2)) {
+            return false;
+        }
+
         const startR = 4;
         const endR = 4;
-        // const startR = Graph.nodeRelSize();
-        // const endR = Graph.nodeRelSize();
         const lineLen = Math.sqrt(
             ["x", "y", "z"]
                 .map((dim) => Math.pow((end[dim] || 0) - (start[dim] || 0), 2))
                 .reduce((acc, v) => acc + v, 0)
         );
 
-        const linePos = line.geometry.getAttribute("position");
-
-        // calculate coordinate on the node's surface instead of center
-        linePos.set(
-            [startR / lineLen, 1 - endR / lineLen]
-                .map((t) =>
-                    ["x", "y", "z"].map(
-                        (dim) => start[dim] + (end[dim] - start[dim]) * t
-                    )
+        const positions = [startR / lineLen, 1 - endR / lineLen]
+            .map((t) =>
+                ["x", "y", "z"].map(
+                    (dim) => start[dim] + (end[dim] - start[dim]) * t
                 )
-                .flat()
-        );
-        linePos.needsUpdate = true;
+            )
+            .flat();
+
+        line.geometry.setPositions(positions);
+        //line.geometry.getAttribute("position").needsUpdate = true;
+        //line.computeLineDistances();
+
         return true;
     }
 
@@ -511,6 +532,4 @@ export default class Graph {
 
         return group;
     }
-
-
 }

package.json

@@ -49,6 +49,7 @@
     "force-graph": "^1.42.4",
     "jquery": "^3.6.0",
     "screenfull": "^6.0.0",
-    "three": ">=0.118.3"
+    "three": ">=0.118.3",
+    "three-fatline": "^0.5.3"
   }
 }