three-forcegraph - npm Package Compare versions

Comparing version 1.27.1 to 1.28.0

dist/three-forcegraph.common.js

@@ -366,2 +366,3 @@ 'use strict';
   CylinderBufferGeometry: three$2.CylinderBufferGeometry,
+  TubeBufferGeometry: three$2.TubeBufferGeometry,
   ConeBufferGeometry: three$2.ConeBufferGeometry,
@@ -674,2 +675,3 @@ Line: three$2.Line,
 
+        var linkWidthAccessor = accessorFn(state.linkWidth);
         var linkCurvatureAccessor = accessorFn(state.linkCurvature);
@@ -707,8 +709,8 @@ var linkCurveRotationAccessor = accessorFn(state.linkCurveRotation);
 
+          var curveResolution = 30; // # line segments
+
+          var curve = link.__curve;
+
           if (line.type === 'Line') {
             // Update line geometry
-            var curveResolution = 30; // # line segments
-
-            var curve = link.__curve;
-
             if (!curve) {
@@ -737,15 +739,42 @@ // straight line
             // Update cylinder geometry
-            // links with width ignore linkCurvature because TubeGeometries can't be updated
-            link.__curve = null; // force reset link curve
+            if (!curve) {
+              // straight tube
+              if (line.geometry.type !== 'CylinderBufferGeometry') {
+                var linkWidth = Math.ceil(linkWidthAccessor(link) * 10) / 10;
+                var r = linkWidth / 2;
+                var geometry = new three.CylinderBufferGeometry(r, r, 1, state.linkResolution, 1, false);
+                geometry.applyMatrix(new three.Matrix4().makeTranslation(0, 1 / 2, 0));
+                geometry.applyMatrix(new three.Matrix4().makeRotationX(Math.PI / 2));
+                line.geometry.dispose();
+                line.geometry = geometry;
+              }
 
-            var vStart = new three.Vector3(start.x, start.y || 0, start.z || 0);
-            var vEnd = new three.Vector3(end.x, end.y || 0, end.z || 0);
-            var distance = vStart.distanceTo(vEnd);
-            line.position.x = vStart.x;
-            line.position.y = vStart.y;
-            line.position.z = vStart.z;
-            line.scale.z = distance;
-            line.parent.localToWorld(vEnd); // lookAt requires world coords
+              var vStart = new three.Vector3(start.x, start.y || 0, start.z || 0);
+              var vEnd = new three.Vector3(end.x, end.y || 0, end.z || 0);
+              var distance = vStart.distanceTo(vEnd);
+              line.position.x = vStart.x;
+              line.position.y = vStart.y;
+              line.position.z = vStart.z;
+              line.scale.z = distance;
+              line.parent.localToWorld(vEnd); // lookAt requires world coords
 
-            line.lookAt(vEnd);
+              line.lookAt(vEnd);
+            } else {
+              // curved tube
+              if (line.geometry.type !== 'TubeBufferGeometry') {
+                // reset object positioning
+                line.position.set(0, 0, 0);
+                line.rotation.set(0, 0, 0);
+                line.scale.set(1, 1, 1);
+              }
+
+              var _linkWidth = Math.ceil(linkWidthAccessor(link) * 10) / 10;
+
+              var _r = _linkWidth / 2;
+
+              var _geometry = new three.TubeBufferGeometry(curve, curveResolution, _r, state.linkResolution, false);
+
+              line.geometry.dispose();
+              line.geometry = _geometry;
+            }
           }
@@ -752,0 +781,0 @@ }); //

dist/three-forcegraph.module.js

@@ -1,2 +0,2 @@
-import { Group, Mesh, MeshLambertMaterial, Color, BufferGeometry, BufferAttribute, Matrix4, Vector3, SphereBufferGeometry, CylinderBufferGeometry, ConeBufferGeometry, Line, LineBasicMaterial, QuadraticBezierCurve3, CubicBezierCurve3 } from 'three';
+import { Group, Mesh, MeshLambertMaterial, Color, BufferGeometry, BufferAttribute, Matrix4, Vector3, SphereBufferGeometry, CylinderBufferGeometry, TubeBufferGeometry, ConeBufferGeometry, Line, LineBasicMaterial, QuadraticBezierCurve3, CubicBezierCurve3 } from 'three';
 import { forceSimulation, forceLink, forceManyBody, forceCenter, forceRadial } from 'd3-force-3d';
@@ -362,2 +362,3 @@ import graph from 'ngraph.graph';
   CylinderBufferGeometry: CylinderBufferGeometry,
+  TubeBufferGeometry: TubeBufferGeometry,
   ConeBufferGeometry: ConeBufferGeometry,
@@ -670,2 +671,3 @@ Line: Line,
 
+        var linkWidthAccessor = accessorFn(state.linkWidth);
         var linkCurvatureAccessor = accessorFn(state.linkCurvature);
@@ -703,8 +705,8 @@ var linkCurveRotationAccessor = accessorFn(state.linkCurveRotation);
 
+          var curveResolution = 30; // # line segments
+
+          var curve = link.__curve;
+
           if (line.type === 'Line') {
             // Update line geometry
-            var curveResolution = 30; // # line segments
-
-            var curve = link.__curve;
-
             if (!curve) {
@@ -733,15 +735,42 @@ // straight line
             // Update cylinder geometry
-            // links with width ignore linkCurvature because TubeGeometries can't be updated
-            link.__curve = null; // force reset link curve
+            if (!curve) {
+              // straight tube
+              if (line.geometry.type !== 'CylinderBufferGeometry') {
+                var linkWidth = Math.ceil(linkWidthAccessor(link) * 10) / 10;
+                var r = linkWidth / 2;
+                var geometry = new three.CylinderBufferGeometry(r, r, 1, state.linkResolution, 1, false);
+                geometry.applyMatrix(new three.Matrix4().makeTranslation(0, 1 / 2, 0));
+                geometry.applyMatrix(new three.Matrix4().makeRotationX(Math.PI / 2));
+                line.geometry.dispose();
+                line.geometry = geometry;
+              }
 
-            var vStart = new three.Vector3(start.x, start.y || 0, start.z || 0);
-            var vEnd = new three.Vector3(end.x, end.y || 0, end.z || 0);
-            var distance = vStart.distanceTo(vEnd);
-            line.position.x = vStart.x;
-            line.position.y = vStart.y;
-            line.position.z = vStart.z;
-            line.scale.z = distance;
-            line.parent.localToWorld(vEnd); // lookAt requires world coords
+              var vStart = new three.Vector3(start.x, start.y || 0, start.z || 0);
+              var vEnd = new three.Vector3(end.x, end.y || 0, end.z || 0);
+              var distance = vStart.distanceTo(vEnd);
+              line.position.x = vStart.x;
+              line.position.y = vStart.y;
+              line.position.z = vStart.z;
+              line.scale.z = distance;
+              line.parent.localToWorld(vEnd); // lookAt requires world coords
 
-            line.lookAt(vEnd);
+              line.lookAt(vEnd);
+            } else {
+              // curved tube
+              if (line.geometry.type !== 'TubeBufferGeometry') {
+                // reset object positioning
+                line.position.set(0, 0, 0);
+                line.rotation.set(0, 0, 0);
+                line.scale.set(1, 1, 1);
+              }
+
+              var _linkWidth = Math.ceil(linkWidthAccessor(link) * 10) / 10;
+
+              var _r = _linkWidth / 2;
+
+              var _geometry = new three.TubeBufferGeometry(curve, curveResolution, _r, state.linkResolution, false);
+
+              line.geometry.dispose();
+              line.geometry = _geometry;
+            }
           }
@@ -748,0 +777,0 @@ }); //

package.json

 {
   "name": "three-forcegraph",
-  "version": "1.27.1",
+  "version": "1.28.0",
   "description": "Force-directed graph as a ThreeJS 3d object",
@@ -5,0 +5,0 @@ "unpkg": "dist/three-forcegraph.min.js",

README.md

@@ -69,3 +69,3 @@ ThreeJS Force-Directed Graph
 | <b>linkResolution</b>([<i>num</i>]) | Getter/setter for the geometric resolution of each link, expressed in how many radial segments to divide the cylinder. Higher values yield smoother cylinders. Applicable only to links with positive width. | 6 |
-| <b>linkCurvature</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a numeric constant for the curvature radius of the link line. Only applicable to links using [ThreeJS Line](https://threejs.org/docs/#api/objects/Line) (`0` width). Curved lines are represented as 3D bezier curves, and any numeric value is accepted. A value of `0` renders a straight line. `1` indicates a radius equal to half of the line length, causing the curve to approximate a semi-circle. For self-referencing links (`source` equal to `target`) the curve is represented as a loop around the node, with length proportional to the curvature value. Lines are curved clockwise for positive values, and counter-clockwise for negative values. Note that rendering curved lines is purely a visual effect and does not affect the behavior of the underlying forces. | 0 |
+| <b>linkCurvature</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a numeric constant for the curvature radius of the link line. Curved lines are represented as 3D bezier curves, and any numeric value is accepted. A value of `0` renders a straight line. `1` indicates a radius equal to half of the line length, causing the curve to approximate a semi-circle. For self-referencing links (`source` equal to `target`) the curve is represented as a loop around the node, with length proportional to the curvature value. Lines are curved clockwise for positive values, and counter-clockwise for negative values. Note that rendering curved lines is purely a visual effect and does not affect the behavior of the underlying forces. | 0 |
 | <b>linkCurveRotation</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a numeric constant for the rotation along the line axis to apply to the curve. Has no effect on straight lines. At `0` rotation, the curve is oriented in the direction of the intersection with the `XY` plane. The rotation angle (in radians) will rotate the curved line clockwise around the "start-to-end" axis from this reference orientation. | 0 |
@@ -72,0 +72,0 @@ | <b>linkMaterial</b>([<i>Material</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for specifying a custom material to style the graph links with. Should return an instance of [ThreeJS Material](https://threejs.org/docs/#api/materials/Material). If a <i>falsy</i> value is returned, the default material will be used instead for that link. | *default link material is [MeshLambertMaterial](https://threejs.org/docs/#api/materials/MeshLambertMaterial) styled according to `color` and `opacity`.* |

No alert changes

Improved metrics

Total package byte prevSize

1160039

increased by0.6%

Lines of code

11365

increased by0.66%

No dependency changes