@krainovsd/graph 0.6.1 → 0.8.0

package/lib/esm/module/GraphCanvas/GraphCanvas.js

@@ -19,11 +19,16 @@ import { nodeByPointerGetter } from './lib/utils/node-by-pointer-getter.js';
 import { nodeIterationExtractor } from './lib/utils/node-iteration-extractor.js';
 import { drawText } from './lib/utils/draw-text.js';
 import { calculateLinkPositionByRadius } from './lib/utils/calculate-link-position-by-radius.js';
+import { animationByProgress } from './lib/utils/animation-by-progress.js';
+import { isNodeVisible } from './lib/utils/is-node-visible.js';
+import { getParticlePosition } from './lib/utils/get-particle-position.js';
+import { getDrawTime, setDrawTime } from '../../lib/draw-time.js';
 
 class GraphCanvas {
     /** initial data */
     nodes;
     links;
+    particles = {};
     width;
     height;
     root;
@@ -43,6 +48,8 @@ class GraphCanvas {
     draw;
     eventAbortController;
     cachedNodeText = {};
+    linkOptionsCache = {};
+    nodeOptionsCache = {};
     isDragging = false;
     highlightedNode = null;
     highlightedNeighbors = null;
@@ -115,20 +122,35 @@ class GraphCanvas {
             this.updateData(alpha);
     }
     changeSettings(options) {
-        if (options.graphSettings)
+        if (options.graphSettings) {
             this.graphSettings = graphSettingsGetter(options.graphSettings, this.graphSettings);
-        if (options.forceSettings)
+            this.draw = this.initDraw();
+            this.initZoom(this.areaTransform);
+        }
+        if (options.forceSettings) {
             this.forceSettings = forceSettingsGetter(options.forceSettings, this.forceSettings);
-        if (options.linkSettings)
-            this.linkSettings = linkSettingsGetter(options.linkSettings);
-        if (options.nodeSettings)
-            this.nodeSettings = nodeSettingsGetter(options.nodeSettings);
-        if (options.forceSettings)
+        }
+        if (options.linkSettings) {
+            this.linkSettings = linkSettingsGetter(options.linkSettings, this.linkSettings);
+            this.linkOptionsCache = {};
+        }
+        if (options.nodeSettings) {
+            this.nodeSettings = nodeSettingsGetter(options.nodeSettings, this.nodeSettings);
+            this.cachedNodeText = {};
+            this.nodeOptionsCache = {};
+        }
+        if (options.forceSettings) {
             return void this.updateSimulation();
+        }
         this.tick();
     }
+    clearCache() {
+        this.nodeOptionsCache = {};
+        this.linkOptionsCache = {};
+        this.cachedNodeText = {};
+    }
     tick() {
-        if (!this.simulationWorking)
+        if (!this.simulationWorking && !this.highlightWorking)
             this.draw();
     }
     restart(alpha) {
@@ -184,6 +206,8 @@ class GraphCanvas {
     }
     clearDataDependencies() {
         this.cachedNodeText = {};
+        this.nodeOptionsCache = {};
+        this.linkOptionsCache = {};
     }
     updateData(alpha) {
         this.clearDataDependencies();
@@ -207,7 +231,7 @@ class GraphCanvas {
         this.initZoom();
         this.initResize();
         this.initPointer();
-        if (!this.simulationWorking)
+        if (!this.simulationWorking && !this.highlightWorking)
             this.draw();
     }
     init() {
@@ -228,6 +252,8 @@ class GraphCanvas {
             })
                 .on("end", () => {
                 this.listeners.onSimulationEnd?.(this.state);
+                if (this.graphSettings.showDrawTime)
+                    getDrawTime();
             });
             this.initSimulationForces();
         }
@@ -250,9 +276,9 @@ class GraphCanvas {
             .distanceMax(this.forceSettings.chargeDistanceMax)
             .distanceMin(this.forceSettings.chargeDistanceMin))
             .force("center", forceCenter(this.forceSettings.centerPosition.x ?? 0, this.forceSettings.centerPosition.y ?? 0).strength(this.forceSettings.centerStrength));
-        this.initCollideForce();
+        this.initCollideForce(true);
     }
-    initCollideForce() {
+    initCollideForce(forceUpdate) {
         if (!this.simulation)
             return;
         if (!this.forceSettings.collideOn) {
@@ -263,9 +289,10 @@ class GraphCanvas {
         const isHasMax = this.forceSettings.collideOffMax.links != 0 && this.forceSettings.collideOffMax.nodes != 0;
         const isMaxCollideNodes = isHasMax && this.forceSettings.collideOffMax.nodes < this.nodes.length;
         const isMaxCollideLinks = isHasMax && this.forceSettings.collideOffMax.links < this.links.length;
-        if (isMaxCollideNodes && isMaxCollideLinks)
+        if (isMaxCollideNodes && isMaxCollideLinks) {
             this.simulation.force("collide", null);
-        else if (!this.simulation.force("collide"))
+        }
+        else if (!this.simulation.force("collide") || forceUpdate) {
             this.simulation.force("collide", forceCollide()
                 .radius((node, index) => {
                 if (this.forceSettings.collideRadius) {
@@ -283,6 +310,7 @@ class GraphCanvas {
             })
                 .strength(this.forceSettings.collideStrength)
                 .iterations(this.forceSettings.collideIterations));
+        }
     }
     initArea() {
         if (!this.area || !this.context || !this.container) {
@@ -317,27 +345,36 @@ class GraphCanvas {
                 this.highlightProgress -= this.graphSettings.highlightDownStep;
                 if (!this.simulationWorking)
                     return void requestAnimationFrame(() => this.draw());
-                return;
+                if (!this.linkSettings.particles)
+                    return;
             }
             if (this.highlightWorking && this.highlightProgress < 1) {
                 this.highlightProgress += this.graphSettings.highlightUpStep;
                 if (!this.simulationWorking)
                     return void requestAnimationFrame(() => this.draw());
-                return;
+                if (!this.linkSettings.particles)
+                    return;
+            }
+            if (this.linkSettings.particles && this.highlightWorking && !this.simulationWorking) {
+                return void requestAnimationFrame(() => this.draw());
             }
             if (!this.highlightWorking && this.highlightProgress <= 0) {
-                if (this.highlightedNeighbors)
+                if (this.highlightedNeighbors || this.highlightedNode) {
                     this.highlightedNeighbors = null;
-                if (this.highlightedNode)
                     this.highlightedNode = null;
+                    this.particles = {};
+                    if (!this.simulationWorking)
+                        return void requestAnimationFrame(() => this.draw());
+                }
             }
             this.highlightDrawing = false;
         }
         function draw() {
             if (!this.context)
                 return;
+            const state = this.state;
             if (this.listeners.onDraw) {
-                this.listeners.onDraw(this.state, (status) => {
+                this.listeners.onDraw(state, (status) => {
                     this.highlightDrawing = status;
                 }, () => {
                     if (this.highlightedNeighbors)
@@ -351,160 +388,331 @@ class GraphCanvas {
             this.context.clearRect(0, 0, this.width, this.height);
             this.context.translate(this.areaTransform.x, this.areaTransform.y);
             this.context.scale(this.areaTransform.k, this.areaTransform.k);
+            const textRenders = [];
+            const nodeRenders = [];
+            this.nodes.forEach(getDrawNode(nodeRenders, textRenders, state).bind(this));
             /** links */
-            this.context.beginPath();
-            this.links.forEach(drawLink.bind(this));
-            this.context.stroke();
+            this.links.forEach(getDrawLink(state).bind(this));
             /** nodes */
-            const textRenders = [];
-            this.nodes.forEach(drawNode(textRenders).bind(this));
+            nodeRenders.forEach((render) => render());
             textRenders.forEach((render) => render());
             this.context.restore();
-            this.listeners.onDrawFinished?.(this.state);
+            this.listeners.onDrawFinished?.(state);
             calculateHighlightFading.bind(this)();
         }
-        function drawLink(link, index) {
-            if (!this.context ||
-                typeof link.source !== "object" ||
-                typeof link.target !== "object" ||
-                !link.source.x ||
-                !link.source.y ||
-                !link.target.x ||
-                !link.target.y)
-                return;
-            const linkOptions = linkIterationExtractor(link, index, this.links, this.state, this.linkSettings.options ?? {}, linkOptionsGetter);
-            let alpha = linkOptions.alpha;
-            if (this.highlightedNeighbors && this.highlightedNode) {
-                /** Not highlighted */
-                if (this.highlightedNode.id != link.source.id &&
-                    this.highlightedNode.id != link.target.id) {
-                    if (linkOptions.highlightFading)
-                        alpha =
-                            this.graphSettings.highlightLinkFadingMin +
-                                (alpha - this.graphSettings.highlightLinkFadingMin) * (1 - this.highlightProgress);
+        function getDrawLink(state) {
+            return function drawLink(link, index) {
+                if (!this.context ||
+                    typeof link.source !== "object" ||
+                    typeof link.target !== "object" ||
+                    !link.source.x ||
+                    !link.source.y ||
+                    !link.target.x ||
+                    !link.target.y)
+                    return;
+                if (!link.source._visible && !link.target._visible)
+                    return;
+                const id = `${link.target.id}${link.source.id}`;
+                let linkOptions;
+                if (this.linkSettings.cache && this.linkOptionsCache[id]) {
+                    linkOptions = this.linkOptionsCache[id];
                 }
+                else {
+                    linkOptions = linkIterationExtractor(link, index, this.links, state, this.linkSettings.options ?? {}, linkOptionsGetter);
+                    if (this.linkSettings.cache) {
+                        this.linkOptionsCache[id] = linkOptions;
+                    }
+                }
+                if (linkOptions.drawLink) {
+                    linkOptions.drawLink(link, linkOptions, state);
+                    return;
+                }
+                let alpha = linkOptions.alpha;
+                let arrowAlpha = linkOptions.arrowReverseAppear ? 0 : linkOptions.arrowAlpha;
+                if (this.highlightedNeighbors && this.highlightedNode) {
+                    /** Not highlighted */
+                    if (this.highlightedNode.id != link.source.id &&
+                        this.highlightedNode.id != link.target.id) {
+                        if (linkOptions.highlightFading) {
+                            const min = this.graphSettings.highlightLinkFadingMin < alpha
+                                ? this.graphSettings.highlightLinkFadingMin
+                                : alpha;
+                            alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
+                        }
+                        if (linkOptions.arrow &&
+                            linkOptions.arrowHighlightFading &&
+                            !linkOptions.arrowReverseAppear) {
+                            const min = this.graphSettings.highlightArrowFadingMin < arrowAlpha
+                                ? this.graphSettings.highlightArrowFadingMin
+                                : arrowAlpha;
+                            arrowAlpha = animationByProgress(min, arrowAlpha - min, 1 - this.highlightProgress);
+                        }
+                    }
+                    else {
+                        // eslint-disable-next-line no-lonely-if
+                        if (linkOptions.arrow && linkOptions.arrowReverseAppear) {
+                            /** Highlighted */
+                            arrowAlpha = animationByProgress(0, linkOptions.arrowAlpha, this.highlightProgress);
+                        }
+                    }
+                }
+                /** Link */
                 this.context.beginPath();
-            }
-            this.context.globalAlpha = alpha;
-            this.context.strokeStyle = linkOptions.color;
-            this.context.lineWidth = linkOptions.width;
-            if (linkOptions.pretty) {
-                const { x1, x2, y1, y2 } = calculateLinkPositionByRadius(link) ?? {
-                    x1: 0,
-                    x2: 0,
-                    y1: 0,
-                    y2: 0,
-                };
-                this.context.moveTo(x1, y1);
-                this.context.lineTo(x2, y2);
-            }
-            else {
-                this.context.moveTo(link.source.x, link.source.y);
-                this.context.lineTo(link.target.x, link.target.y);
-            }
-            if (this.highlightedNeighbors && this.highlightedNode)
+                this.context.globalAlpha = alpha;
+                this.context.strokeStyle = linkOptions.color;
+                this.context.lineWidth = linkOptions.width;
+                let xStart = link.source.x;
+                let yStart = link.source.y;
+                let xEnd = link.target.x;
+                let yEnd = link.target.y;
+                if (linkOptions.pretty) {
+                    const isHasArrow = linkOptions.arrow && arrowAlpha > 0;
+                    const { x1, x2, y1, y2 } = calculateLinkPositionByRadius(link, isHasArrow ? linkOptions.arrowSize : 0) ?? {
+                        x1: 0,
+                        x2: 0,
+                        y1: 0,
+                        y2: 0,
+                    };
+                    xStart = x1;
+                    xEnd = x2;
+                    yStart = y1;
+                    yEnd = y2;
+                }
+                this.context.moveTo(xStart, yStart);
+                this.context.lineTo(xEnd, yEnd);
                 this.context.stroke();
-        }
-        const drawNode = (textRenders) => function drawNode(node, index) {
-            if (!this.context || !node.x || !node.y)
-                return;
-            const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this.state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
-            let alpha = nodeOptions.alpha;
-            let color = nodeOptions.color;
-            let radiusInitial = nodeOptions.radius ?? this.graphSettings.nodeRadiusInitial;
-            let textAlpha = nodeOptions.textAlpha;
-            let textSize = nodeOptions.textSize;
-            let textShiftX = nodeOptions.textShiftX;
-            let textShiftY = nodeOptions.textShiftY;
-            let textWeight = nodeOptions.textWeight;
-            let textWidth = nodeOptions.textWidth;
-            if (this.highlightedNeighbors && this.highlightedNode) {
-                /** Not highlighted */
-                if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {
-                    if (nodeOptions.highlightFading) {
-                        alpha =
-                            this.graphSettings.highlightFadingMin +
-                                (alpha - this.graphSettings.highlightFadingMin) * (1 - this.highlightProgress);
-                    }
-                    if (nodeOptions.highlightTextFading) {
-                        textAlpha =
-                            this.graphSettings.highlightTextFadingMin +
-                                (textAlpha - this.graphSettings.highlightTextFadingMin) *
-                                    (1 - this.highlightProgress);
+                /** Particle */
+                if (this.linkSettings.particles &&
+                    this.highlightedNode &&
+                    (this.highlightedNode.id === link.source.id || this.highlightedNode.id === link.target.id)) {
+                    if (!this.particles[id]) {
+                        const sourceId = link.source.id;
+                        const targetId = link.target.id;
+                        this.particles[id] = Array.from({ length: linkOptions.particleCount }, (_, index) => {
+                            return {
+                                step: 0,
+                                wait: index * (linkOptions.particleSteps / linkOptions.particleCount),
+                                sourceId,
+                                targetId,
+                            };
+                        });
                     }
-                    if (nodeOptions.highlightColor) {
-                        const colorRgb = extractRgb(colorToRgb(color));
-                        if (colorRgb) {
-                            const colorRgbFade = fadeRgb(colorRgb, this.graphSettings.highlightColorFadingMin);
-                            const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbFade, this.highlightProgress);
-                            color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+                    this.particles[id].forEach((particle) => {
+                        if (!this.context)
+                            return;
+                        getParticlePosition({
+                            particle,
+                            totalSteps: linkOptions.particleSteps,
+                            xEnd,
+                            xStart,
+                            yEnd,
+                            yStart,
+                        });
+                        if (particle.x != undefined && particle.y != undefined) {
+                            this.context.beginPath();
+                            this.context.arc(particle.x, particle.y, linkOptions.particleRadius, 0, Math.PI * 2);
+                            this.context.fillStyle = linkOptions.particleColor;
+                            this.context.fill();
+                            this.context.stroke();
                         }
+                    });
+                }
+                /** Arrow */
+                if (linkOptions.arrow && arrowAlpha > 0) {
+                    const { x1: xStart, x2: xEnd, y1: yStart, y2: yEnd, } = calculateLinkPositionByRadius(link) ?? {
+                        x1: 0,
+                        x2: 0,
+                        y1: 0,
+                        y2: 0,
+                    };
+                    const angle = Math.atan2(yEnd - yStart, xEnd - xStart);
+                    this.context.beginPath();
+                    this.context.globalAlpha = arrowAlpha;
+                    this.context.moveTo(xEnd, yEnd);
+                    this.context.lineTo(xEnd - linkOptions.arrowSize * Math.cos(angle - Math.PI / 6), yEnd - linkOptions.arrowSize * Math.sin(angle - Math.PI / 6));
+                    this.context.lineTo(xEnd - linkOptions.arrowSize * Math.cos(angle + Math.PI / 6), yEnd - linkOptions.arrowSize * Math.sin(angle + Math.PI / 6));
+                    this.context.closePath();
+                    this.context.fillStyle = linkOptions.arrowColor;
+                    this.context.fill();
+                    this.context.stroke();
+                }
+                if (linkOptions.drawExtraLink) {
+                    linkOptions.drawExtraLink(link, { ...linkOptions, alpha }, state);
+                }
+            };
+        }
+        function getDrawNode(nodeRenders, textRenders, state) {
+            return function drawNode(node, index) {
+                if (!this.context || !node.x || !node.y)
+                    return;
+                let nodeOptions;
+                if (this.nodeSettings.cache && this.nodeOptionsCache[node.id]) {
+                    nodeOptions = this.nodeOptionsCache[node.id];
+                }
+                else {
+                    nodeOptions = nodeIterationExtractor(node, index, this.nodes, state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+                    if (this.nodeSettings.cache) {
+                        this.nodeOptionsCache[node.id] = nodeOptions;
                     }
                 }
-                else if (!this.graphSettings.highlightOnlyRoot ||
-                    (this.graphSettings.highlightOnlyRoot && this.highlightedNode.id === node.id)) {
-                    /** Highlighted */
-                    if (nodeOptions.highlightSizing) {
-                        const radiusMax = radiusInitial + this.graphSettings.highlightSizingAdditional;
-                        radiusInitial += ((radiusMax - radiusInitial) / 100) * (this.highlightProgress * 100);
+                if (nodeOptions.nodeDraw) {
+                    nodeOptions.nodeDraw(node, nodeOptions, state);
+                    return;
+                }
+                let alpha = nodeOptions.alpha;
+                let color = nodeOptions.color;
+                let radiusInitial = nodeOptions.radius ?? this.graphSettings.nodeRadiusInitial;
+                let textAlpha = nodeOptions.textAlpha;
+                let textSize = nodeOptions.textSize;
+                let textShiftX = nodeOptions.textShiftX;
+                let textShiftY = nodeOptions.textShiftY;
+                let textWeight = nodeOptions.textWeight;
+                let textWidth = nodeOptions.textWidth;
+                if (this.highlightedNeighbors && this.highlightedNode) {
+                    /** Not highlighted */
+                    if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {
+                        if (nodeOptions.highlightFading) {
+                            const min = this.graphSettings.highlightFadingMin < alpha
+                                ? this.graphSettings.highlightFadingMin
+                                : alpha;
+                            alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
+                        }
+                        if (nodeOptions.highlightTextFading) {
+                            const min = this.graphSettings.highlightTextFadingMin < textAlpha
+                                ? this.graphSettings.highlightTextFadingMin
+                                : textAlpha;
+                            textAlpha = animationByProgress(min, textAlpha - min, 1 - this.highlightProgress);
+                        }
+                        if (nodeOptions.highlightColor) {
+                            const colorRgb = extractRgb(colorToRgb(color));
+                            if (colorRgb) {
+                                const colorRgbFade = fadeRgb(colorRgb, this.graphSettings.highlightColorFadingMin);
+                                const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbFade, this.highlightProgress);
+                                color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+                            }
+                        }
                     }
-                    if (nodeOptions.highlightTextSizing) {
-                        const textSizeMax = textSize + this.graphSettings.highlightTextSizingAdditional;
-                        const textShiftXMax = textShiftX + this.graphSettings.highlightTextShiftXAdditional;
-                        const textShiftYMax = textShiftY + this.graphSettings.highlightTextShiftYAdditional;
-                        const textWeightMax = textWeight + this.graphSettings.highlightTextWeightAdditional;
-                        const textWidthMax = textWidth + this.graphSettings.highlightTextWidthAdditional;
-                        textSize += ((textSizeMax - textSize) / 100) * (this.highlightProgress * 100);
-                        textShiftX += ((textShiftXMax - textShiftX) / 100) * (this.highlightProgress * 100);
-                        textShiftY += ((textShiftYMax - textShiftY) / 100) * (this.highlightProgress * 100);
-                        textWeight += ((textWeightMax - textWeight) / 100) * (this.highlightProgress * 100);
-                        textWidth += ((textWidthMax - textWidth) / 100) * (this.highlightProgress * 100);
+                    else if (!this.graphSettings.highlightOnlyRoot ||
+                        (this.graphSettings.highlightOnlyRoot && this.highlightedNode.id === node.id)) {
+                        /** Highlighted */
+                        if (nodeOptions.highlightSizing) {
+                            radiusInitial = animationByProgress(radiusInitial, this.graphSettings.highlightSizingAdditional, this.highlightProgress);
+                        }
+                        if (nodeOptions.highlightTextSizing) {
+                            textSize = animationByProgress(textSize, this.graphSettings.highlightTextSizingAdditional, this.highlightProgress);
+                            textShiftX = animationByProgress(textShiftX, this.graphSettings.highlightTextShiftXAdditional, this.highlightProgress);
+                            textShiftY = animationByProgress(textShiftY, this.graphSettings.highlightTextShiftYAdditional, this.highlightProgress);
+                            textWeight = animationByProgress(textWeight, this.graphSettings.highlightTextWeightAdditional, this.highlightProgress);
+                            textWidth = animationByProgress(textWidth, this.graphSettings.highlightTextWidthAdditional, this.highlightProgress);
+                        }
                     }
                 }
-            }
-            const radius = nodeRadiusGetter({
-                radiusFlexible: this.graphSettings.nodeRadiusFlexible,
-                radiusInitial,
-                radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
-                radiusFactor: this.graphSettings.nodeRadiusFactor,
-                linkCount: node.linkCount,
-            });
-            node._radius = radius;
-            this.context.beginPath();
-            this.context.globalAlpha = alpha;
-            /** text */
-            if (nodeOptions.textVisible && nodeOptions.text) {
-                textRenders.push(() => {
-                    if (!this.context || !node.x || !node.y || !nodeOptions.text)
+                const radius = nodeRadiusGetter({
+                    radiusFlexible: this.graphSettings.nodeRadiusFlexible,
+                    radiusInitial,
+                    radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
+                    radiusFactor: this.graphSettings.nodeRadiusFactor,
+                    linkCount: node.linkCount,
+                });
+                node._radius = radius;
+                if (!isNodeVisible({
+                    height: this.height,
+                    width: this.width,
+                    x: node.x,
+                    y: node.y,
+                    radius,
+                    transform: this.areaTransform,
+                })) {
+                    node._visible = false;
+                    return;
+                }
+                node._visible = true;
+                nodeRenders.push(() => {
+                    if (!this.context || !node.x || !node.y)
                         return;
                     this.context.beginPath();
-                    this.context.globalAlpha = textAlpha;
-                    drawText({
-                        id: node.id,
-                        cachedNodeText: this.cachedNodeText,
-                        context: this.context,
-                        text: nodeOptions.text,
-                        textAlign: nodeOptions.textAlign,
-                        textColor: nodeOptions.textColor,
-                        textFont: nodeOptions.textFont,
+                    this.context.globalAlpha = alpha;
+                    /** circle */
+                    this.context.lineWidth = nodeOptions.borderWidth;
+                    this.context.strokeStyle = nodeOptions.borderColor;
+                    this.context.fillStyle = color;
+                    this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+                    this.context.fill();
+                    this.context.stroke();
+                });
+                /** text */
+                if (nodeOptions.textVisible && nodeOptions.text) {
+                    textRenders.push(() => {
+                        if (nodeOptions.textDraw) {
+                            nodeOptions.textDraw(node, {
+                                ...nodeOptions,
+                                radius,
+                                alpha,
+                                color,
+                                textAlpha,
+                                textSize,
+                                textShiftX,
+                                textShiftY,
+                                textWeight,
+                                textWidth,
+                            }, state);
+                            return;
+                        }
+                        if (!this.context || !node.x || !node.y || !nodeOptions.text)
+                            return;
+                        this.context.beginPath();
+                        this.context.globalAlpha = textAlpha;
+                        drawText({
+                            id: node.id,
+                            cachedNodeText: this.cachedNodeText,
+                            context: this.context,
+                            text: nodeOptions.text,
+                            textAlign: nodeOptions.textAlign,
+                            textColor: nodeOptions.textColor,
+                            textFont: nodeOptions.textFont,
+                            textSize,
+                            x: node.x + textShiftX,
+                            y: node.y + radius + textShiftY,
+                            maxWidth: textWidth,
+                            textStyle: nodeOptions.textStyle,
+                            textWeight,
+                            textGap: nodeOptions.textGap,
+                        });
+                        if (nodeOptions.textExtraDraw) {
+                            nodeOptions.textExtraDraw(node, {
+                                ...nodeOptions,
+                                radius,
+                                alpha,
+                                color,
+                                textAlpha,
+                                textSize,
+                                textShiftX,
+                                textShiftY,
+                                textWeight,
+                                textWidth,
+                            }, state);
+                        }
+                    });
+                }
+                if (nodeOptions.nodeExtraDraw) {
+                    nodeOptions.nodeExtraDraw(node, {
+                        ...nodeOptions,
+                        radius,
+                        alpha,
+                        color,
+                        textAlpha,
                         textSize,
-                        x: node.x + textShiftX,
-                        y: node.y + radius + textShiftY,
-                        maxWidth: textWidth,
-                        textStyle: nodeOptions.textStyle,
+                        textShiftX,
+                        textShiftY,
                         textWeight,
-                        textGap: nodeOptions.textGap,
-                    });
-                });
-            }
-            /** circle */
-            this.context.lineWidth = nodeOptions.borderWidth;
-            this.context.strokeStyle = nodeOptions.borderColor;
-            this.context.fillStyle = color;
-            this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
-            this.context.fill();
-            this.context.stroke();
-        };
+                        textWidth,
+                    }, state);
+                }
+            };
+        }
+        if (this.graphSettings.showDrawTime) {
+            return setDrawTime(draw.bind(this), this.graphSettings.showDrawTimeEveryTick);
+        }
         return draw;
     }
     initResize() {
@@ -698,7 +906,7 @@ class GraphCanvas {
             this.listeners.onEndDragFinished?.(event, this.state);
         }));
     }
-    initZoom() {
+    initZoom(currentZoom) {
         if (!this.area)
             throw new Error("bad init data");
         const zoomInstance = zoom()
@@ -706,7 +914,9 @@ class GraphCanvas {
             .on("zoom", (event) => {
             this.listeners.onZoom?.(event);
             this.areaTransform = event.transform;
-            if (!this.simulationWorking)
+            this.linkOptionsCache = {};
+            this.nodeOptionsCache = {};
+            if (!this.simulationWorking && !this.highlightWorking)
                 requestAnimationFrame(() => this.draw());
         });
         if (this.graphSettings.translateExtentEnable) {
@@ -721,7 +931,7 @@ class GraphCanvas {
             ]);
         }
         select(this.area).call(zoomInstance).on("dblclick.zoom", null);
-        const zoomInitial = this.graphSettings.zoomInitial;
+        const zoomInitial = currentZoom ?? this.graphSettings.zoomInitial;
         this.areaTransform = new ZoomTransform(zoomInitial?.k ?? 1, zoomInitial?.x ?? this.width / 2, zoomInitial?.y ?? this.height / 2);
         zoom().transform(select(this.area), this.areaTransform);
     }