force-graph 1.43.5 → 1.44.0

package/dist/force-graph.mjs

@@ -3,7 +3,7 @@ import { zoom, zoomTransform } from 'd3-zoom';
 import { drag } from 'd3-drag';
 import { min, max } from 'd3-array';
 import { throttle } from 'lodash-es';
-import * as TWEEN from '@tweenjs/tween.js';
+import { Group, Tween, Easing } from '@tweenjs/tween.js';
 import Kapsule from 'kapsule';
 import accessorFn from 'accessor-fn';
 import ColorTracker from 'canvas-color-tracker';
@@ -16,7 +16,7 @@ import { schemePaired } from 'd3-scale-chromatic';
 function styleInject(css, ref) {
   if (ref === void 0) ref = {};
   var insertAt = ref.insertAt;
-  if (!css || typeof document === 'undefined') {
+  if (typeof document === 'undefined') {
     return;
   }
   var head = document.head || document.getElementsByTagName('head')[0];
@@ -41,12 +41,31 @@ function styleInject(css, ref) {
 var css_248z = ".force-graph-container canvas {\n  display: block;\n  user-select: none;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.force-graph-container .graph-tooltip {\n  position: absolute;\n  top: 0;\n  font-family: sans-serif;\n  font-size: 16px;\n  padding: 4px;\n  border-radius: 3px;\n  color: #eee;\n  background: rgba(0,0,0,0.65);\n  visibility: hidden; /* by default */\n}\n\n.force-graph-container .clickable {\n  cursor: pointer;\n}\n\n.force-graph-container .grabbable {\n  cursor: move;\n  cursor: grab;\n  cursor: -moz-grab;\n  cursor: -webkit-grab;\n}\n\n.force-graph-container .grabbable:active {\n  cursor: grabbing;\n  cursor: -moz-grabbing;\n  cursor: -webkit-grabbing;\n}\n";
 styleInject(css_248z);
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
 function _construct(t, e, r) {
   if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
   var o = [null];
   o.push.apply(o, e);
   var p = new (t.bind.apply(t, o))();
-  return r && _setPrototypeOf(p, r.prototype), p;
+  return p;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
 }
 function _isNativeReflectConstruct() {
   try {
@@ -56,6 +75,9 @@ function _isNativeReflectConstruct() {
     return !!t;
   })();
 }
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -67,10 +89,7 @@ function _iterableToArrayLimit(r, l) {
       f = !0,
       o = !1;
     try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
     } catch (r) {
       o = !0, n = r;
     } finally {
@@ -83,6 +102,12 @@ function _iterableToArrayLimit(r, l) {
     return a;
   }
 }
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -104,6 +129,12 @@ function _objectSpread2(e) {
   }
   return e;
 }
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -116,7 +147,7 @@ function _toPrimitive(t, r) {
 }
 function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : String(i);
+  return "symbol" == typeof i ? i : i + "";
 }
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -127,60 +158,12 @@ function _typeof(o) {
     return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
   }, _typeof(o);
 }
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
-  return obj;
-}
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 var autoColorScale = scaleOrdinal(schemePaired);
@@ -1032,6 +1015,12 @@ var forceGraph = Kapsule({
         links: []
       },
       onChange: function onChange(d, state) {
+        // Wipe color registry if all objects are new
+        [d.nodes, d.links].every(function (arr) {
+          return (arr || []).every(function (d) {
+            return !d.hasOwnProperty('__indexColor');
+          });
+        }) && state.colorTracker.reset();
         [{
           type: 'Node',
           objs: d.nodes
@@ -1215,7 +1204,7 @@ var forceGraph = Kapsule({
           // no animation
           setCenter(finalPos);
         } else {
-          new TWEEN.Tween(getCenter()).to(finalPos, transitionDuration).easing(TWEEN.Easing.Quadratic.Out).onUpdate(setCenter).start();
+          state.tweenGroup.add(new Tween(getCenter()).to(finalPos, transitionDuration).easing(Easing.Quadratic.Out).onUpdate(setCenter).start());
         }
         return this;
       }
@@ -1248,14 +1237,14 @@ var forceGraph = Kapsule({
           // no animation
           setZoom(k);
         } else {
-          new TWEEN.Tween({
+          state.tweenGroup.add(new Tween({
             k: getZoom()
           }).to({
             k: k
-          }, transitionDuration).easing(TWEEN.Easing.Quadratic.Out).onUpdate(function (_ref6) {
+          }, transitionDuration).easing(Easing.Quadratic.Out).onUpdate(function (_ref6) {
             var k = _ref6.k;
             return setZoom(k);
-          }).start();
+          }).start());
         }
         return this;
       }
@@ -1346,7 +1335,9 @@ var forceGraph = Kapsule({
       zoom: zoom(),
       forceGraph: new CanvasForceGraph(),
       shadowGraph: new CanvasForceGraph().cooldownTicks(0).nodeColor('__indexColor').linkColor('__indexColor').isShadow(true),
-      colorTracker: new ColorTracker() // indexed objects for rgb lookup
+      colorTracker: new ColorTracker(),
+      // indexed objects for rgb lookup
+      tweenGroup: new Group()
     };
   },
   init: function init(domNode, state) {
@@ -1646,7 +1637,7 @@ var forceGraph = Kapsule({
         state.forceGraph.globalScale(globalScale).tickFrame();
         state.onRenderFramePost && state.onRenderFramePost(ctx, globalScale);
       }
-      TWEEN.update(); // update canvas animation tweens
+      state.tweenGroup.update(); // update canvas animation tweens
 
       state.animationFrameRequestId = requestAnimationFrame(animate);
     })();

package/example/medium-graph/index.html

@@ -1,8 +1,8 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/force-graph"></script>
-  <!--<script src="../../dist/force-graph.js"></script>-->
+<!--  <script src="//unpkg.com/force-graph"></script>-->
+  <script src="../../dist/force-graph.js"></script>
 </head>
 
 <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "force-graph",
-  "version": "1.43.5",
+  "version": "1.44.0",
   "description": "2D force-directed graph rendered on HTML5 canvas",
   "type": "module",
   "unpkg": "dist/force-graph.min.js",
@@ -47,10 +47,10 @@
     "src/**/*"
   ],
   "dependencies": {
-    "@tweenjs/tween.js": "18 - 23",
+    "@tweenjs/tween.js": "18 - 25",
     "accessor-fn": "1",
     "bezier-js": "3 - 6",
-    "canvas-color-tracker": "1",
+    "canvas-color-tracker": "^1.3",
     "d3-array": "1 - 3",
     "d3-drag": "2 - 3",
     "d3-force-3d": "2 - 3",
@@ -63,18 +63,18 @@
     "lodash-es": "4"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "postcss": "^8.4.35",
-    "rimraf": "^5.0.5",
-    "rollup": "^4.12.0",
-    "rollup-plugin-dts": "^6.1.0",
+    "postcss": "^8.4.47",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.22.4",
+    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.6.2"
   },
   "engines": {
     "node": ">=12"

package/src/force-graph.js

@@ -3,7 +3,7 @@ import { zoom as d3Zoom, zoomTransform as d3ZoomTransform } from 'd3-zoom';
 import { drag as d3Drag } from 'd3-drag';
 import { max as d3Max, min as d3Min } from 'd3-array';
 import { throttle } from 'lodash-es';
-import * as TWEEN from '@tweenjs/tween.js';
+import { Tween, Group as TweenGroup, Easing } from '@tweenjs/tween.js';
 import Kapsule from 'kapsule';
 import accessorFn from 'accessor-fn';
 import ColorTracker from 'canvas-color-tracker';
@@ -125,6 +125,9 @@ export default Kapsule({
     graphData: {
       default: { nodes: [], links: [] },
       onChange: ((d, state) => {
+        // Wipe color registry if all objects are new
+        [d.nodes, d.links].every(arr => (arr || []).every(d => !d.hasOwnProperty('__indexColor'))) && state.colorTracker.reset();
+
         [{ type: 'Node', objs: d.nodes }, { type: 'Link', objs: d.links }].forEach(hexIndex);
         state.forceGraph.graphData(d);
         state.shadowGraph.graphData(d);
@@ -210,11 +213,13 @@ export default Kapsule({
         if (!transitionDuration) { // no animation
           setCenter(finalPos);
         } else {
-          new TWEEN.Tween(getCenter())
-            .to(finalPos, transitionDuration)
-            .easing(TWEEN.Easing.Quadratic.Out)
-            .onUpdate(setCenter)
-            .start();
+          state.tweenGroup.add(
+            new Tween(getCenter())
+              .to(finalPos, transitionDuration)
+              .easing(Easing.Quadratic.Out)
+              .onUpdate(setCenter)
+              .start()
+          );
         }
         return this;
       }
@@ -246,11 +251,13 @@ export default Kapsule({
         if (!transitionDuration) { // no animation
           setZoom(k);
         } else {
-          new TWEEN.Tween({ k: getZoom() })
-            .to({ k }, transitionDuration)
-            .easing(TWEEN.Easing.Quadratic.Out)
-            .onUpdate(({ k }) => setZoom(k))
-            .start();
+          state.tweenGroup.add(
+            new Tween({ k: getZoom() })
+              .to({ k }, transitionDuration)
+              .easing(Easing.Quadratic.Out)
+              .onUpdate(({ k }) => setZoom(k))
+              .start()
+          );
         }
         return this;
       }
@@ -339,7 +346,8 @@ export default Kapsule({
       .nodeColor('__indexColor')
       .linkColor('__indexColor')
       .isShadow(true),
-    colorTracker: new ColorTracker() // indexed objects for rgb lookup
+    colorTracker: new ColorTracker(), // indexed objects for rgb lookup
+    tweenGroup: new TweenGroup()
   }),
 
   init: function(domNode, state) {
@@ -640,7 +648,7 @@ export default Kapsule({
         state.onRenderFramePost && state.onRenderFramePost(ctx, globalScale);
       }
 
-      TWEEN.update(); // update canvas animation tweens
+      state.tweenGroup.update(); // update canvas animation tweens
 
       state.animationFrameRequestId = requestAnimationFrame(animate);
     })();