@krainovsd/graph 0.12.0-beta.2 → 0.12.0-beta.3

package/lib/cjs/index.cjs

@@ -308,9 +308,9 @@ function rgbAnimationByProgress(start, end, progress) {
 let countTime = 0;
 let countOperation = 0;
 function setDrawTime(cb, showEveryTick) {
-    return () => {
+    return (recursive) => {
         const start = performance.now();
-        cb();
+        cb(recursive);
         const end = performance.now();
         const result = end - start;
         countTime += result;
@@ -1944,29 +1944,42 @@ function getDrawNode(nodeRenders, textRenders) {
 }
 
 function initDraw() {
-    function calculateHighlight() {
-        this.highlightDrawing = true;
+    let hasHighlight = false;
+    function calculateHighlight(recursive) {
+        if (hasHighlight && !recursive)
+            return;
+        /** animation up */
         if (!this.highlightWorking && this.highlightProgress > 0) {
             const highlightDownStep = 1 / this.highlightSettings.highlightDownFrames;
             this.highlightProgress -= highlightDownStep;
             if (!this.simulationWorking) {
-                return void requestAnimationFrame(() => this.draw());
+                hasHighlight = true;
+                return void requestAnimationFrame(() => this.draw(true));
             }
-            if (!this.linkSettings.particles)
+            if (!this.linkSettings.particles) {
+                hasHighlight = false;
                 return;
+            }
         }
+        /** animation down */
         if (this.highlightWorking && this.highlightProgress < 1) {
             const highlightUpStep = 1 / this.highlightSettings.highlightUpFrames;
             this.highlightProgress += highlightUpStep;
             if (!this.simulationWorking) {
-                return void requestAnimationFrame(() => this.draw());
+                hasHighlight = true;
+                return void requestAnimationFrame(() => this.draw(true));
             }
-            if (!this.linkSettings.particles)
+            if (!this.linkSettings.particles) {
+                hasHighlight = false;
                 return;
+            }
         }
+        /** animation active */
         if (this.linkSettings.particles && this.highlightWorking && !this.simulationWorking) {
-            return void requestAnimationFrame(() => this.draw());
+            hasHighlight = true;
+            return void requestAnimationFrame(() => this.draw(true));
         }
+        /** animation stop */
         if (!this.highlightWorking && this.highlightProgress <= 0) {
             if (this.highlightedNeighbors || this.highlightedNode || this.highlightedLink) {
                 this.highlightedNeighbors = null;
@@ -1974,13 +1987,14 @@ function initDraw() {
                 this.highlightedLink = null;
                 this.particles = {};
                 if (!this.simulationWorking) {
-                    return void requestAnimationFrame(() => this.draw());
+                    hasHighlight = true;
+                    return void requestAnimationFrame(() => this.draw(true));
                 }
             }
         }
-        this.highlightDrawing = false;
+        hasHighlight = false;
     }
-    function draw() {
+    function draw(recursive = false) {
         if (!this.context)
             return;
         if (this.listeners.onDraw) {
@@ -2001,7 +2015,7 @@ function initDraw() {
         textRenders.forEach((render) => render());
         this.context.restore();
         this.listeners.onDrawFinished?.call?.(this);
-        calculateHighlight.bind(this)();
+        calculateHighlight.bind(this)(recursive);
     }
     if (this.graphSettings.showDrawTime) {
         return setDrawTime(draw.bind(this), this.graphSettings.showDrawTimeEveryTick);
@@ -2059,7 +2073,7 @@ function initPointer() {
             this.highlightedLink = null;
             this.highlightedNeighbors = new Set(this.highlightedNode?.neighbors ?? []);
             this.highlightWorking = true;
-            if (!this.simulationWorking && !this.highlightDrawing)
+            if (!this.simulationWorking)
                 requestAnimationFrame(() => {
                     this.draw();
                 });
@@ -2074,14 +2088,14 @@ function initPointer() {
             this.highlightedNode = null;
             this.highlightedNeighbors = new Set([currentLink.source.id, currentLink.target.id]);
             this.highlightWorking = true;
-            if (!this.simulationWorking && !this.highlightDrawing)
+            if (!this.simulationWorking)
                 requestAnimationFrame(() => {
                     this.draw();
                 });
         }
         else if (!currentNode && !currentLink && (this.highlightedNode || this.highlightedLink)) {
             this.highlightWorking = false;
-            if (!this.simulationWorking && !this.highlightDrawing)
+            if (!this.simulationWorking)
                 requestAnimationFrame(() => {
                     this.draw();
                 });
@@ -2469,7 +2483,6 @@ class GraphCanvas {
     highlightedNeighbors = null;
     highlightProgress = 1;
     highlightWorking = false;
-    highlightDrawing = false;
     get simulationWorking() {
         const simulationAlpha = this.simulation?.alpha?.() ?? 0;
         const simulationAlphaMin = this.simulation?.alphaMin?.() ?? 0;
@@ -2504,15 +2517,15 @@ class GraphCanvas {
             nodes: this.nodes,
         };
     }
-    changeData(options, alpha) {
+    changeData(options, alpha = 0.5, clearCache = true) {
         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);
+            this.updateData(alpha, clearCache);
     }
-    changeSettings(options) {
+    changeSettings(options, clearCache = true) {
         if (options.graphSettings) {
             this.graphSettings = graphSettingsGetter(options.graphSettings, this.graphSettings);
             this.draw = initDraw.call(this);
@@ -2523,22 +2536,28 @@ class GraphCanvas {
         }
         if (options.highlightSettings) {
             this.highlightSettings = highlightSettingsGetter(options.highlightSettings, this.highlightSettings);
-            this.linkOptionsCache = {};
-            this.cachedNodeText = {};
-            this.cachedNodeLabel = {};
-            this.cachedTextNodeParameters = {};
-            this.nodeOptionsCache = {};
+            if (clearCache) {
+                this.linkOptionsCache = {};
+                this.cachedNodeText = {};
+                this.cachedNodeLabel = {};
+                this.cachedTextNodeParameters = {};
+                this.nodeOptionsCache = {};
+            }
         }
         if (options.linkSettings) {
             this.linkSettings = linkSettingsGetter(options.linkSettings, this.linkSettings);
-            this.linkOptionsCache = {};
+            if (clearCache) {
+                this.linkOptionsCache = {};
+            }
         }
         if (options.nodeSettings) {
             this.nodeSettings = nodeSettingsGetter(options.nodeSettings, this.nodeSettings);
-            this.cachedNodeText = {};
-            this.cachedNodeLabel = {};
-            this.cachedTextNodeParameters = {};
-            this.nodeOptionsCache = {};
+            if (clearCache) {
+                this.cachedNodeText = {};
+                this.cachedNodeLabel = {};
+                this.cachedTextNodeParameters = {};
+                this.nodeOptionsCache = {};
+            }
             initCollideForce.call(this, true);
         }
         if (options.forceSettings) {
@@ -2631,10 +2650,11 @@ class GraphCanvas {
         this.highlightedNeighbors = null;
         this.highlightProgress = 0;
         this.highlightWorking = false;
-        this.highlightDrawing = false;
     }
-    updateData(alpha) {
-        this.clearCache();
+    updateData(alpha = 0.5, clearCache = true) {
+        if (clearCache) {
+            this.clearCache();
+        }
         if (this.simulation) {
             initCollideForce.call(this, false);
             this.simulation
@@ -2650,7 +2670,7 @@ class GraphCanvas {
                 .iterations(this.forceSettings.forces && this.forceSettings.linkForce
                 ? this.forceSettings.linkIterations
                 : 0))
-                .alpha(alpha ?? 0.5)
+                .alpha(alpha)
                 .restart();
         }
     }