@krainovsd/graph 0.14.0-beta.1 → 0.14.0-beta.3

package/lib/cjs/index.cjs

@@ -2844,13 +2844,13 @@ class GraphCanvas {
     get dpi() {
         return devicePixelRatio;
     }
-    getData() {
+    getData = () => {
         return {
             links: this.links,
             nodes: this.nodes,
         };
-    }
-    fitToView(margin = this.graphSettings.zoomToFitMargin, duration = this.graphSettings.zoomAnimationDuration) {
+    };
+    fitToView = (margin = this.graphSettings.zoomToFitMargin, duration = this.graphSettings.zoomAnimationDuration) => {
         const area = this.area;
         if (!area)
             return;
@@ -2877,8 +2877,8 @@ class GraphCanvas {
             return;
         }
         this.animateZoom(area, target, this.areaTransform, duration);
-    }
-    focusOnNode(nodeId, scale = this.graphSettings.zoomToNodeScale, duration = this.graphSettings.zoomAnimationDuration) {
+    };
+    focusOnNode = (nodeId, scale = this.graphSettings.zoomToNodeScale, duration = this.graphSettings.zoomAnimationDuration) => {
         const area = this.area;
         if (!area)
             return;
@@ -2899,101 +2899,17 @@ class GraphCanvas {
             return;
         }
         this.animateZoom(area, target, this.areaTransform, duration);
-    }
-    animateHighlight(node, link, baseDuration = this.highlightSettings.highlightDuration) {
-        let positive = true;
-        if (node && (this.highlightedNode !== node || !this.highlightPositive)) {
-            this.highlightedNode = node;
-            this.highlightedNeighbors = new Set(node.neighbors);
-            this.particles = [];
-            this.highlightedLink = null;
-            this.highlightStart = performance.now();
-        }
-        else if (link && (this.highlightedLink !== link || !this.highlightPositive)) {
-            const { sourceId, targetId } = extractLinkPointIds(link);
-            this.highlightProgress = 0;
-            this.highlightedLink = link;
-            this.highlightedNeighbors = new Set([sourceId, targetId]);
-            this.particles = [];
-            this.highlightedNode = null;
-            this.highlightStart = performance.now();
-        }
-        else if (!node && !link && this.highlightPositive) {
-            positive = false;
-        }
-        else {
-            return;
-        }
-        if (this.highlightController) {
-            this.highlightController.abort();
-        }
-        const controller = new AbortController();
-        this.highlightPositive = positive;
-        this.highlightController = controller;
-        const startTime = performance.now();
-        const startProgress = this.highlightProgress;
-        const targetProgress = positive ? 1 : 0;
-        const delta = targetProgress - startProgress;
-        const duration = baseDuration * Math.abs(delta);
-        const animate = () => {
-            if (controller.signal.aborted)
-                return;
-            const elapsed = performance.now() - startTime;
-            const t = Math.min(elapsed / duration, 1);
-            const current = startProgress + delta * t;
-            const eased = current < 0.5 ? 4 * current * current * current : 1 - (-2 * current + 2) ** 3 / 2;
-            this.highlightProgress = eased;
-            if (t < 1 || positive) {
-                requestAnimationFrame(animate);
-                this.draw();
-            }
-            else {
-                this.highlightedNode = null;
-                this.highlightedLink = null;
-                this.highlightedNeighbors = null;
-                this.highlightStart = null;
-                this.particles = [];
-                this.tick();
-            }
-        };
-        requestAnimationFrame(animate);
-    }
-    animateZoom(area, target, start, duration) {
-        this._zoomAnimating = true;
-        const startTime = performance.now();
-        const animate = () => {
-            const elapsed = performance.now() - startTime;
-            const t = Math.min(elapsed / duration, 1);
-            const eased = t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
-            const x = start.x + (target.x - start.x) * eased;
-            const y = start.y + (target.y - start.y) * eased;
-            const k = start.k + (target.k - start.k) * eased;
-            this.areaTransform = new d3Zoom.ZoomTransform(k, x, y);
-            d3Zoom.zoom().transform(d3Selection.select(area), this.areaTransform);
-            updateLinkCache.call(this);
-            updateNodeCache.call(this);
-            this.tick();
-            if (t < 1) {
-                requestAnimationFrame(animate);
-            }
-            else {
-                this._zoomAnimating = false;
-                this.clearCache(true);
-                this.tick();
-            }
-        };
-        requestAnimationFrame(animate);
-    }
-    changeData(options, alpha = 0.5, clearCache = true) {
+    };
+    changeData = (options, alpha = 0.5, clearCache = true, precompute = false) => {
         if (options.links != undefined)
             this.links = options.links;
         if (options.nodes != undefined)
             this.nodes = options.nodes;
         if (options.nodes != undefined || options.links != undefined) {
-            this.updateData(alpha, clearCache);
+            this.updateData(alpha, clearCache, precompute);
         }
-    }
-    changeSettings(options, clearCache = true) {
+    };
+    changeSettings = (options, clearCache = true, precompute = false) => {
         if (options.graphSettings) {
             this.graphSettings = graphSettingsGetter(options.graphSettings, this.graphSettings);
             this.draw = initDraw.call(this);
@@ -3040,16 +2956,16 @@ class GraphCanvas {
             initCollideForce.call(this, true);
         }
         if (options.forceSettings) {
-            return void this.updateSimulation();
+            return void this.updateSimulation(precompute);
         }
         this.tick();
-    }
-    updateRect() {
+    };
+    updateRect = () => {
         if (!this.area)
             return;
         this.areaRect = this.area.getBoundingClientRect();
-    }
-    updateSize() {
+    };
+    updateSize = () => {
         if (!this.area)
             return;
         const { width, height } = this.root.getBoundingClientRect();
@@ -3063,8 +2979,8 @@ class GraphCanvas {
             throw new Error("couldn't create canvas context");
         this.context.scale(this.dpi, this.dpi);
         this.draw();
-    }
-    clearCache(keys) {
+    };
+    clearCache = (keys) => {
         if (keys === true) {
             this.nodeOptionsCache.length = 0;
             this.linkOptionsCache.length = 0;
@@ -3095,12 +3011,12 @@ class GraphCanvas {
         }
         updateNodeCache.call(this);
         updateLinkCache.call(this);
-    }
-    tick() {
+    };
+    tick = () => {
         if (!this.simulationWorking)
             this.draw();
-    }
-    restart(alpha, options) {
+    };
+    restart = (alpha, options) => {
         if (!this.simulation)
             return;
         const settings = {
@@ -3136,23 +3052,23 @@ class GraphCanvas {
         initSimulationForces.call(this);
         this.simulation.restart();
         this.tick();
-    }
-    start() {
+    };
+    start = () => {
         if (this.simulation)
             this.simulation.alpha(1).restart();
         if (this.container)
             this.container.style.display = "block";
-    }
-    stop() {
+    };
+    stop = () => {
         if (this.simulation)
             this.simulation.stop();
         if (this.container)
             this.container.style.display = "none";
-    }
-    create() {
+    };
+    create = () => {
         this.init();
-    }
-    destroy() {
+    };
+    destroy = () => {
         if (this.simulation) {
             this.simulation.stop();
             this.simulation = undefined;
@@ -3160,22 +3076,22 @@ class GraphCanvas {
         this.clearHTMLElements();
         this.clearState();
         this.clearCache(true);
-    }
-    clearHTMLElements() {
+    };
+    clearHTMLElements = () => {
         this.root.replaceChildren();
         this.area = undefined;
         this.context = undefined;
         this.container = undefined;
         this.eventAbortController.abort();
         this.eventAbortController = new AbortController();
-    }
-    updateSimulation() {
+    };
+    updateSimulation = (precompute = false) => {
         if (this.simulation) {
             initSimulationForces.call(this);
-            this.restart(1);
+            this.restart(1, { precompute });
         }
-    }
-    clearState() {
+    };
+    clearState = () => {
         this.isDragging = false;
         this.highlightedNode = null;
         this.highlightedLink = null;
@@ -3183,8 +3099,22 @@ class GraphCanvas {
         this.highlightProgress = 0;
         this.highlightStart = null;
         this.highlightPositive = false;
-    }
-    updateData(alpha = 0.5, clearCache = true) {
+    };
+    init = () => {
+        initArea.call(this);
+        updateNodeCache.call(this);
+        updateLinkCache.call(this);
+        initSimulation.call(this);
+        this.restart(1);
+        initDnd.call(this);
+        initZoom.call(this);
+        initResize.call(this);
+        initPointer.call(this);
+        updateNodeCache.call(this);
+        updateLinkCache.call(this);
+        this.tick();
+    };
+    updateData = (alpha = 0.5, clearCache = true, precompute = false) => {
         if (clearCache) {
             this.clearCache(clearCache);
         }
@@ -3201,21 +3131,94 @@ class GraphCanvas {
                 .iterations(this.forceSettings.forces && this.forceSettings.linkForce
                 ? this.forceSettings.linkIterations
                 : 0));
-            this.restart(alpha);
+            this.restart(alpha, { precompute });
             initZoom.call(this, this.areaTransform);
         }
-    }
-    init() {
-        initArea.call(this);
-        updateNodeCache.call(this);
-        updateLinkCache.call(this);
-        initSimulation.call(this);
-        this.restart(1);
-        initDnd.call(this);
-        initZoom.call(this);
-        initResize.call(this);
-        initPointer.call(this);
-    }
+    };
+    animateHighlight = (node, link, baseDuration = this.highlightSettings.highlightDuration) => {
+        let positive = true;
+        if (node && (this.highlightedNode !== node || !this.highlightPositive)) {
+            this.highlightedNode = node;
+            this.highlightedNeighbors = new Set(node.neighbors);
+            this.particles = [];
+            this.highlightedLink = null;
+            this.highlightStart = performance.now();
+        }
+        else if (link && (this.highlightedLink !== link || !this.highlightPositive)) {
+            const { sourceId, targetId } = extractLinkPointIds(link);
+            this.highlightProgress = 0;
+            this.highlightedLink = link;
+            this.highlightedNeighbors = new Set([sourceId, targetId]);
+            this.particles = [];
+            this.highlightedNode = null;
+            this.highlightStart = performance.now();
+        }
+        else if (!node && !link && this.highlightPositive) {
+            positive = false;
+        }
+        else {
+            return;
+        }
+        if (this.highlightController) {
+            this.highlightController.abort();
+        }
+        const controller = new AbortController();
+        this.highlightPositive = positive;
+        this.highlightController = controller;
+        const startTime = performance.now();
+        const startProgress = this.highlightProgress;
+        const targetProgress = positive ? 1 : 0;
+        const delta = targetProgress - startProgress;
+        const duration = baseDuration * Math.abs(delta);
+        const animate = () => {
+            if (controller.signal.aborted)
+                return;
+            const elapsed = performance.now() - startTime;
+            const t = Math.min(elapsed / duration, 1);
+            const current = startProgress + delta * t;
+            const eased = current < 0.5 ? 4 * current * current * current : 1 - (-2 * current + 2) ** 3 / 2;
+            this.highlightProgress = eased;
+            if (t < 1 || positive) {
+                requestAnimationFrame(animate);
+                this.draw();
+            }
+            else {
+                this.highlightedNode = null;
+                this.highlightedLink = null;
+                this.highlightedNeighbors = null;
+                this.highlightStart = null;
+                this.particles = [];
+                this.tick();
+            }
+        };
+        requestAnimationFrame(animate);
+    };
+    animateZoom = (area, target, start, duration) => {
+        this._zoomAnimating = true;
+        const startTime = performance.now();
+        const animate = () => {
+            const elapsed = performance.now() - startTime;
+            const t = Math.min(elapsed / duration, 1);
+            const eased = t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+            const x = start.x + (target.x - start.x) * eased;
+            const y = start.y + (target.y - start.y) * eased;
+            const k = start.k + (target.k - start.k) * eased;
+            this.areaTransform = new d3Zoom.ZoomTransform(k, x, y);
+            d3Zoom.zoom().transform(d3Selection.select(area), this.areaTransform);
+            updateLinkCache.call(this);
+            updateNodeCache.call(this);
+            this.tick();
+            if (t < 1) {
+                requestAnimationFrame(animate);
+            }
+            else {
+                this._zoomAnimating = false;
+                this.clearCache(true);
+                this.tick();
+            }
+        };
+        requestAnimationFrame(animate);
+    };
 }
 
 const FORCE_CONTROLS = [