Revert "Merge remote-tracking branch 'origin/master'"

This reverts commit 7f444182

config.js

@@ -10,9 +10,6 @@ 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,8 +11,6 @@ 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.
  */
@@ -58,29 +56,27 @@ 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());
+
     }
 
     /**
@@ -182,17 +178,11 @@ export default class Graph {
         this.hoverNode = node || null;
     }
 
-    onLinkHover(link, previousLink) {
+    onLinkHover(link) {
         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);
@@ -348,10 +338,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() {
@@ -418,54 +408,43 @@ export default class Graph {
             )
         );
 
-        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 material = new THREE.LineBasicMaterial({
+            vertexColors: THREE.VertexColors,
         });
+        const geometry = new THREE.BufferGeometry();
+        geometry.setAttribute(
+            "position",
+            new THREE.BufferAttribute(new Float32Array(2 * 3), 3)
+        );
+        geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
 
-        const line = new Line2(geometry, material);
-        line.computeLineDistances();
-        line.scale.set(1, 1, 1);
-        return line;
+        return new THREE.Line(geometry, material);
     }
 
     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 positions = [startR / lineLen, 1 - endR / lineLen]
-            .map((t) =>
-                ["x", "y", "z"].map(
-                    (dim) => start[dim] + (end[dim] - start[dim]) * t
-                )
-            )
-            .flat();
-
-        line.geometry.setPositions(positions);
-        //line.geometry.getAttribute("position").needsUpdate = true;
-        //line.computeLineDistances();
+        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
+                    )
+                )
+                .flat()
+        );
+        linePos.needsUpdate = true;
         return true;
     }
 
@@ -532,4 +511,6 @@ export default class Graph {
 
         return group;
     }
+
+
 }

package.json

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