@krainovsd/graph 0.13.0-beta3 → 0.14.0-beta.2

package/lib/cjs/index.cjs

@@ -4,11 +4,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsHelpers = require('@krainovsd/js-helpers');
 const d3Force = require('d3-force');
+const d3Selection = require('d3-selection');
 const d3Zoom = require('d3-zoom');
 const d3Array = require('d3-array');
-const d3Selection = require('d3-selection');
 const d3Drag = require('d3-drag');
-const lodash = require('lodash');
 
 const COMMON_SETTINGS = {
     nodeRadius: 5,
@@ -23,6 +22,10 @@ const FORCE_SETTINGS = {
     xForce: true,
     yForce: true,
     collideForce: true,
+    precompute: true,
+    precomputeMaxTicks: 300,
+    precomputeMaxTimeMs: 200,
+    precomputeDisableForcesAfter: false,
     centerPosition: {},
     centerStrength: 1,
     collideStrength: 0.1,
@@ -40,6 +43,12 @@ const FORCE_SETTINGS = {
     linkStrength: 1,
     collideRadius: null,
 };
+const PERFORMANCE_FORCE_SETTINGS = {
+    ...FORCE_SETTINGS,
+    collideIterations: 1,
+    precomputeMaxTimeMs: 350,
+    precomputeDisableForcesAfter: true,
+};
 
 function forceSettingsGetter(settings, prevSettings) {
     return {
@@ -59,17 +68,18 @@ function linkSettingsGetter(settings, prevSettings) {
     return { ...(prevSettings ?? LINK_SETTINGS), ...settings };
 }
 function linkOptionsGetter() {
+    const aboveScale = this.areaTransform && this.areaTransform.k > this.linkSettings.linkScaleSwitch;
     return {
         ...LINK_OPTIONS,
         drawExtraLink: null,
         drawLink: null,
-        color: this.areaTransform && this.areaTransform.k > this.linkSettings.linkScaleSwitch
+        color: aboveScale
             ? this.linkSettings.linkColorAfterScaleSwitch
             : this.linkSettings.linkColorBeforeScaleSwitch,
-        arrowColor: this.areaTransform && this.areaTransform.k > this.linkSettings.linkScaleSwitch
+        arrowColor: aboveScale
             ? this.linkSettings.linkColorAfterScaleSwitch
             : this.linkSettings.linkColorBeforeScaleSwitch,
-        width: this.areaTransform && this.areaTransform.k > this.linkSettings.linkScaleSwitch
+        width: aboveScale
             ? this.linkSettings.linkWidthAfterScaleSwitch
             : this.linkSettings.linkWidthBeforeScaleSwitch,
     };
@@ -185,11 +195,20 @@ function resetDrawTime() {
 }
 
 function nodeSettingsGetter(settings, prevNodeSettings) {
-    return {
+    const result = {
         ...(prevNodeSettings ?? NODE_SETTINGS),
         idGetter: nodeIdGetter,
         ...settings,
     };
+    if (result.smartCache && (!result.textScaleSteps || result.textScaleSteps.length === 0)) {
+        const step = (result.textScaleMax - result.textScaleMin) / 9;
+        const steps = [];
+        for (let i = 0; i < 10; i++) {
+            steps.push(result.textScaleMin + i * step);
+        }
+        result.textScaleSteps = steps;
+    }
+    return result;
 }
 const color = colorGetter();
 function nodeOptionsGetter(node) {
@@ -271,6 +290,30 @@ function highlightSettingsGetter(settings, prevSettings) {
     };
 }
 
+function computeGraphBounds(nodes) {
+    if (!nodes.length)
+        return null;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const node of nodes) {
+        if (node.x === null || node.x === undefined || node.y === null || node.y === undefined)
+            continue;
+        if (node.visible === false)
+            continue;
+        let radius = node._radius;
+        radius ??= Math.max(node._width ?? 0, node._height ?? 0) / 2;
+        minX = Math.min(minX, node.x - radius);
+        minY = Math.min(minY, node.y - radius);
+        maxX = Math.max(maxX, node.x + radius);
+        maxY = Math.max(maxY, node.y + radius);
+    }
+    if (!isFinite(minX))
+        return null;
+    return { minX, minY, maxX, maxY };
+}
+
 function pointerGetter(mouseEvent, areaRect, areaTransform) {
     const clientX = "clientX" in mouseEvent
         ? mouseEvent.clientX
@@ -735,42 +778,52 @@ function isNodeVisible(opts) {
     }
 }
 
+const FRAME_INTERVAL = 1000 / 60;
 function getParticlePosition(opts) {
-    const prevStepDifference = opts.particle.step - (opts.particle.prev?.step ?? 0);
-    const nextStepDifference = (opts.particle.next?.step ?? 0) - opts.particle.step;
-    const needWait = opts.particle.next &&
-        opts.particle.next.step > opts.particle.step &&
-        nextStepDifference <= opts.distance;
-    const needSpeed = opts.particle.prev &&
-        opts.particle.prev.step !== 0 &&
-        opts.particle.prev.step < opts.particle.step &&
-        prevStepDifference < opts.distance;
-    if (opts.particle.step === 0 && needWait) {
-        opts.particle.x = undefined;
-        opts.particle.y = undefined;
-        return;
+    const now = performance.now();
+    const particle = opts.particle;
+    if (particle._lastTime == undefined) {
+        particle._distanceTraveled = (opts.distance / opts.totalCount) * particle.index;
+        particle._lastTime = now;
+        particle._lastDistance = opts.distance;
     }
-    const remainingSteps = opts.totalSteps - opts.particle.step;
-    const progress = opts.particle.step / opts.totalSteps;
-    if (remainingSteps <= 0) {
-        opts.particle.x = opts.xEnd;
-        opts.particle.y = opts.yEnd;
-        opts.particle.step = 0;
-        return;
+    const lastDistance = particle._lastDistance ?? 0;
+    if (lastDistance !== opts.distance && lastDistance > 0) {
+        const scale = opts.distance / lastDistance;
+        particle._distanceTraveled = ((particle._distanceTraveled ?? 0) * scale) % opts.distance;
+        particle._lastDistance = opts.distance;
     }
-    const dx = opts.xEnd - opts.xStart;
-    const dy = opts.yEnd - opts.yStart;
-    const newX = opts.xStart + dx * progress;
-    const newY = opts.yStart + dy * progress;
-    opts.particle.x = newX;
-    opts.particle.y = newY;
-    if (needSpeed) {
-        opts.particle.step += prevStepDifference <= 3 ? prevStepDifference : 3;
+    const delta = Math.min(now - particle._lastTime, FRAME_INTERVAL);
+    particle._lastTime = now;
+    particle._distanceTraveled =
+        ((particle._distanceTraveled ?? 0) + opts.speed * delta) % opts.distance;
+    const progress = particle._distanceTraveled / opts.distance;
+    if (opts.xControl !== 0 && opts.yControl !== 0) {
+        const t = 1 - progress;
+        particle.x =
+            t * t * opts.xStart + 2 * t * progress * opts.xControl + progress * progress * opts.xEnd;
+        particle.y =
+            t * t * opts.yStart + 2 * t * progress * opts.yControl + progress * progress * opts.yEnd;
     }
     else {
-        opts.particle.step++;
+        const dx = opts.xEnd - opts.xStart;
+        const dy = opts.yEnd - opts.yStart;
+        particle.x = opts.xStart + dx * progress;
+        particle.y = opts.yStart + dy * progress;
     }
 }
+function approximateQuadraticBezierLength(x0, y0, x1, y1, x2, y2) {
+    const dx01 = x1 - x0;
+    const dy01 = y1 - y0;
+    const dx12 = x2 - x1;
+    const dy12 = y2 - y1;
+    const dx02 = x2 - x0;
+    const dy02 = y2 - y0;
+    const a = Math.sqrt(dx01 * dx01 + dy01 * dy01);
+    const b = Math.sqrt(dx12 * dx12 + dy12 * dy12);
+    const c = Math.sqrt(dx02 * dx02 + dy02 * dy02);
+    return (a + b + c) / 2;
+}
 
 function linkByPointerGetter({ areaRect, areaTransform, mouseEvent, links, linkHoverExtraZone, curve, }) {
     if (!areaRect)
@@ -1046,22 +1099,38 @@ function extractLinkPointIds(link) {
     return { sourceId, targetId };
 }
 
+function isEmptyObject(obj) {
+    for (const key in obj) {
+        if (Object.hasOwn(obj, key)) {
+            return false;
+        }
+    }
+    return true;
+}
+
 const GRAPH_SETTINGS = {
-    zoomExtent: [0.3, 10],
-    translateExtent: [[], []],
-    translateExtentEnable: true,
-    translateExtentCoefficient: [3, 3],
+    zoomAnimation: true,
+    zoomAnimationDuration: 300,
+    zoomToNodeScale: 5,
+    zoomToFitMargin: 0.25,
+    zoomExtent: null,
+    zoomExtentMargin: 0.3,
+    translateExtent: null,
+    translateExtentCoefficient: null,
+    translateExtentOverlap: 0.3,
     dragPlaceCoefficient: dragPlaceCoefficientGetter,
     zoomInitial: null,
     showDrawTime: true,
     showDrawTimeEveryTick: false,
 };
+const PERFORMANCE_GRAPH_SETTINGS = {
+    ...GRAPH_SETTINGS,
+};
 
 const HIGHLIGHT_SETTINGS = {
     highlightByHoverNode: true,
     highlightByHoverLink: true,
-    highlightUpFrames: 5,
-    highlightDownFrames: 5,
+    highlightDuration: 150,
     linkHoverExtraZone: 2,
     /** Node */
     highlightByNodeOnlyRoot: true,
@@ -1116,37 +1185,51 @@ const HIGHLIGHT_SETTINGS = {
     highlightByLinkForArrowBorderColor: null,
     highlightByLinkForArrowBorderSizingAdditional: 0,
 };
+const PERFORMANCE_HIGHLIGHT_SETTINGS = {
+    ...HIGHLIGHT_SETTINGS,
+};
 
 const LINK_SETTINGS = {
+    smartCache: true,
     prettyDraw: true,
-    curve: false,
+    curve: true,
     linkScaleSwitch: 1,
-    linkColorAfterScaleSwitch: "#000000FF",
+    linkColorAfterScaleSwitch: "#C5C5C5FF",
     linkColorBeforeScaleSwitch: "#999",
     linkWidthAfterScaleSwitch: 0.1,
     linkWidthBeforeScaleSwitch: 1,
     arrow: true,
     arrowByHighlight: true,
     particles: true,
-    particleFlexSpeed: true,
-    particleFlexSpeedCoefficient: 4,
+    // spawn one more particle for N px
+    particleCountByDistance: 25,
+    // speed for 1px
+    particleSpeedByDistance: 50,
 };
 const LINK_OPTIONS = {
     alpha: 1,
     arrowAlpha: 1,
     arrowSize: 2,
-    arrowBorderColor: "#000000FF",
+    arrowBorderColor: "#C5C5C5FF",
     arrowBorderWidth: 0.1,
     particleAlpha: 1,
-    particleColor: "#000000FF",
-    particleBorderColor: "#000000FF",
+    particleColor: "#C5C5C5FF",
+    particleBorderColor: "#C5C5C5FF",
     particleBorderWidth: 0.1,
-    particleCount: 2,
     particleRadius: 0.5,
-    particleSteps: 60,
+};
+const PERFORMANCE_LINK_SETTINGS = {
+    ...LINK_SETTINGS,
+    particles: false,
+    prettyDraw: false,
+};
+const PERFORMANCE_LINK_OPTIONS = {
+    ...LINK_OPTIONS,
 };
 
 const NODE_SETTINGS = {
+    smartCache: true,
+    textScaleSteps: [],
     nodeRadiusFlexible: true,
     nodeRadiusLinkCountForStep: 5,
     nodeRadiusIncrementByStep: 1,
@@ -1183,14 +1266,14 @@ const NODE_OPTIONS = {
     textShiftX: 0,
     textFont: "Arial",
     textAlign: "center",
-    textColor: "#333",
+    textColor: "#d2d2d2",
     textStyle: "normal",
     textWeight: 500,
     textGap: 0,
     label: null,
     labelAlpha: 1,
     labelAlign: "center",
-    labelColor: "#333",
+    labelColor: "#ffffff",
     labelFont: "Arial",
     labelGap: 0,
     labelSize: 3.5,
@@ -1198,6 +1281,14 @@ const NODE_OPTIONS = {
     labelWeight: 500,
     labelWidth: 20,
 };
+const PERFORMANCE_NODE_SETTINGS = {
+    ...NODE_SETTINGS,
+    nodeRadiusFlexible: false,
+    nodeSizeFlexible: false,
+};
+const PERFOMANCE_NODE_OPTIONS = {
+    ...NODE_OPTIONS,
+};
 
 const GRAPH_CACHE_TYPE = {
     NodeOptions: "nodeOptions",
@@ -1264,8 +1355,14 @@ function initDnd() {
             return;
         const mouseEvent = event.sourceEvent;
         const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
-        event.subject.fx = pointerX;
-        event.subject.fy = pointerY;
+        if (this._translateExtent) {
+            event.subject.fx = Math.max(this._translateExtent[0][0], Math.min(this._translateExtent[1][0], pointerX));
+            event.subject.fy = Math.max(this._translateExtent[0][1], Math.min(this._translateExtent[1][1], pointerY));
+        }
+        else {
+            event.subject.fx = pointerX;
+            event.subject.fy = pointerY;
+        }
         this.listeners.onMoveDragFinished?.call?.(this, event);
     })
         .on("end", (event) => {
@@ -1275,8 +1372,14 @@ function initDnd() {
         const sourceEvent = event.sourceEvent;
         if (sourceEvent.altKey && this.areaRect) {
             const [pointerX, pointerY] = pointerGetter(sourceEvent, this.areaRect, this.areaTransform);
-            event.subject.fx = pointerX;
-            event.subject.fy = pointerY;
+            if (this._translateExtent) {
+                event.subject.fx = Math.max(this._translateExtent[0][0], Math.min(this._translateExtent[1][0], pointerX));
+                event.subject.fy = Math.max(this._translateExtent[0][1], Math.min(this._translateExtent[1][1], pointerY));
+            }
+            else {
+                event.subject.fx = pointerX;
+                event.subject.fy = pointerY;
+            }
         }
         else {
             event.subject.fx = null;
@@ -1324,7 +1427,7 @@ function adjustPoint(x, y, xControl, yControl, radius) {
 }
 
 function getDrawLink() {
-    return function drawLink(link) {
+    return function drawLink(link, index) {
         if (!this.context ||
             typeof link.source !== "object" ||
             typeof link.target !== "object" ||
@@ -1339,8 +1442,7 @@ function getDrawLink() {
             return;
         if (!link.source._visible && !link.target._visible)
             return;
-        const id = `${link.target.id}${link.source.id}`;
-        const linkOptions = this.linkOptionsCache[id];
+        const linkOptions = this.linkOptionsCache[index];
         if (!linkOptions)
             return;
         if (linkOptions.drawLink) {
@@ -1355,10 +1457,12 @@ function getDrawLink() {
         let arrowSize = linkOptions.arrowSize;
         let arrowBorderWidth = linkOptions.arrowBorderWidth;
         let arrowBorderColor = linkOptions.arrowBorderColor;
+        const currentNodeHighlighted = this.highlightedNode &&
+            (this.highlightedNode.id == link.source.id || this.highlightedNode.id == link.target.id);
         /** Highlight */
         if (this.highlightedNeighbors && this.highlightedNode) {
             /** By Node Not Highlight */
-            if (this.highlightedNode.id != link.source.id && this.highlightedNode.id != link.target.id) {
+            if (!currentNodeHighlighted) {
                 const fadeOptions = linkFade({
                     arrow: this.linkSettings.arrow,
                     arrowByHighlight: this.linkSettings.arrowByHighlight,
@@ -1392,9 +1496,10 @@ function getDrawLink() {
                 arrowBorderColor = highlightOptions.arrowBorderColor;
             }
         }
+        const currentLinkHighlighted = this.highlightedLink === link;
         if (this.highlightedNeighbors && this.highlightedLink) {
             /** By Link Not Highlight */
-            if (this.highlightedLink !== link) {
+            if (!currentLinkHighlighted) {
                 const fadeOptions = linkFade({
                     arrow: this.linkSettings.arrow,
                     arrowByHighlight: this.linkSettings.arrowByHighlight,
@@ -1446,8 +1551,8 @@ function getDrawLink() {
         const isHasArrow = this.linkSettings.arrow && arrowAlpha > 0;
         if (!this.linkSettings.curve) {
             if (this.linkSettings.prettyDraw ||
-                this.linkSettings.particleFlexSpeed ||
-                (this.linkSettings.arrow && arrowAlpha > 0)) {
+                (this.linkSettings.arrow && arrowAlpha > 0) ||
+                (this.particles && (currentNodeHighlighted || currentLinkHighlighted))) {
                 const position = calculateLinkPositionByNode(xStart, yStart, xEnd, yEnd, link.source, link.target, isHasArrow ? arrowSize : 0);
                 xStart = position.xStart;
                 xEnd = position.xEnd;
@@ -1485,6 +1590,7 @@ function getDrawLink() {
             link._cy = position.yControl;
             link._ax = position.xEndArrow;
             link._ay = position.yEndArrow;
+            linkDistance = approximateQuadraticBezierLength(position.xStart, position.yStart, position.xControl, position.yControl, position.xEnd, position.yEnd);
             this.context.beginPath();
             this.context.moveTo(position.xStart, position.yStart);
             this.context.quadraticCurveTo(position.xControl, position.yControl, position.xEnd, position.yEnd);
@@ -1495,69 +1601,46 @@ function getDrawLink() {
             this.context.stroke();
         }
         /** Particle */
-        if (this.linkSettings.particles &&
-            ((this.highlightedNode &&
-                (this.highlightedNode.id === link.source.id ||
-                    this.highlightedNode.id === link.target.id)) ||
-                (this.highlightedLink && this.highlightedLink === link))) {
-            const particleSteps = this.linkSettings.particleFlexSpeed
-                ? linkDistance <= 0
-                    ? 0
-                    : linkDistance * this.linkSettings.particleFlexSpeedCoefficient
-                : linkOptions.particleSteps;
-            const particleCount = linkOptions.particleCount;
-            if (!this.particles[id]) {
-                const sourceId = link.source.id;
-                const targetId = link.target.id;
+        if (this.linkSettings.particles && (currentLinkHighlighted || currentNodeHighlighted)) {
+            const speed = (1 / this.linkSettings.particleSpeedByDistance) * (1 + 0.5);
+            if (!this.particles[index]) {
+                const particleCount = Math.max(1, Math.floor(linkDistance / this.linkSettings.particleCountByDistance));
                 const particles = [];
-                let prevParticle;
                 for (let i = 0; i < particleCount; i++) {
                     const particle = {
-                        step: 0,
-                        sourceId,
-                        targetId,
-                        prev: prevParticle,
-                        next: undefined,
                         index: i,
                     };
-                    if (prevParticle)
-                        prevParticle.next = particle;
                     particles.push(particle);
-                    prevParticle = particle;
                 }
-                if (particles.length >= 2) {
-                    particles[0].prev = particles[particles.length - 1];
-                    particles[particles.length - 1].next = particles[0];
-                }
-                this.particles[id] = particles;
+                this.particles[index] = particles;
             }
-            if (particleSteps !== 0) {
-                this.particles[id].forEach((particle) => {
-                    if (!this.context)
-                        return;
-                    const distance = particleSteps / particleCount;
-                    getParticlePosition({
-                        distance,
-                        particle,
-                        totalSteps: particleSteps,
-                        xEnd,
-                        xStart,
-                        yEnd,
-                        yStart,
-                    });
-                    if (particle.x != undefined && particle.y != undefined) {
-                        this.context.beginPath();
-                        this.context.strokeStyle = linkOptions.particleBorderColor;
-                        this.context.lineWidth = linkOptions.particleBorderWidth;
-                        this.context.arc(particle.x, particle.y, linkOptions.particleRadius, 0, Math.PI * 2);
-                        this.context.fillStyle = linkOptions.particleColor;
-                        this.context.fill();
-                        if (linkOptions.particleBorderWidth > 0) {
-                            this.context.stroke();
-                        }
-                    }
+            this.particles[index].forEach((particle, _, particles) => {
+                if (!this.context)
+                    return;
+                getParticlePosition({
+                    distance: linkDistance,
+                    particle,
+                    totalCount: particles.length,
+                    xEnd,
+                    xStart,
+                    yEnd,
+                    yStart,
+                    xControl,
+                    yControl,
+                    speed,
                 });
-            }
+                if (particle.x != undefined && particle.y != undefined) {
+                    this.context.beginPath();
+                    this.context.strokeStyle = linkOptions.particleBorderColor;
+                    this.context.lineWidth = linkOptions.particleBorderWidth;
+                    this.context.arc(particle.x, particle.y, linkOptions.particleRadius, 0, Math.PI * 2);
+                    this.context.fillStyle = linkOptions.particleColor;
+                    this.context.fill();
+                    if (linkOptions.particleBorderWidth > 0) {
+                        this.context.stroke();
+                    }
+                }
+            });
         }
         /** Arrow */
         if (this.linkSettings.arrow && arrowAlpha > 0) {
@@ -1641,7 +1724,7 @@ function getTextLines({ context, textAlign, textColor, textFont, textStyle, text
 }
 
 function getDrawNode(nodeRenders, textRenders) {
-    return function drawNode(node) {
+    return function drawNode(node, index) {
         if (!this.context || !node.x || !node.y)
             return;
         if (node.visible != undefined && !node.visible) {
@@ -1650,7 +1733,7 @@ function getDrawNode(nodeRenders, textRenders) {
             node._height = 0;
             return;
         }
-        const nodeOptions = this.nodeOptionsCache[node.id];
+        const nodeOptions = this.nodeOptionsCache[index];
         if (!nodeOptions)
             return;
         if (nodeOptions.nodeDraw && nodeOptions.textDraw) {
@@ -1809,7 +1892,7 @@ function getDrawNode(nodeRenders, textRenders) {
             this.context.lineWidth = borderWidth;
             this.context.strokeStyle = borderColor;
             this.context.fillStyle = color;
-            const labelLines = this.cachedNodeLabel[node.id];
+            const labelLines = this.cachedNodeLabel[index];
             switch (nodeOptions.shape) {
                 case "circle": {
                     if (!node.image) {
@@ -1935,7 +2018,7 @@ function getDrawNode(nodeRenders, textRenders) {
             });
         }
         /** Text draw */
-        const textLines = this.cachedNodeText[node.id];
+        const textLines = this.cachedNodeText[index];
         if (nodeOptions.textVisible && nodeOptions.text && textLines) {
             textRenders.push(() => {
                 if (nodeOptions.textDraw) {
@@ -1995,57 +2078,7 @@ function getDrawNode(nodeRenders, textRenders) {
 }
 
 function initDraw() {
-    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) {
-                hasHighlight = true;
-                return void requestAnimationFrame(() => this.draw(true));
-            }
-            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) {
-                hasHighlight = true;
-                return void requestAnimationFrame(() => this.draw(true));
-            }
-            if (!this.linkSettings.particles) {
-                hasHighlight = false;
-                return;
-            }
-        }
-        /** animation active */
-        if (this.linkSettings.particles && this.highlightWorking && !this.simulationWorking) {
-            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;
-                this.highlightedNode = null;
-                this.highlightedLink = null;
-                this.particles = {};
-                if (!this.simulationWorking) {
-                    hasHighlight = true;
-                    return void requestAnimationFrame(() => this.draw(true));
-                }
-            }
-        }
-        hasHighlight = false;
-    }
-    function draw(recursive = false) {
+    function draw() {
         if (!this.context)
             return;
         if (this.listeners.onDraw) {
@@ -2066,7 +2099,6 @@ function initDraw() {
         textRenders.forEach((render) => render());
         this.context.restore();
         this.listeners.onDrawFinished?.call?.(this);
-        calculateHighlight.bind(this)(recursive);
     }
     if (this.graphSettings.showDrawTime) {
         return setDrawTime(draw.bind(this), this.graphSettings.showDrawTimeEveryTick);
@@ -2120,38 +2152,7 @@ function initPointer() {
         else {
             this.area.style.cursor = "default";
         }
-        if (currentNode && highlightNode && this.highlightedNode !== currentNode) {
-            this.highlightedNode = currentNode;
-            this.highlightedLink = null;
-            this.highlightedNeighbors = new Set(this.highlightedNode?.neighbors ?? []);
-            this.highlightWorking = true;
-            if (!this.simulationWorking)
-                requestAnimationFrame(() => {
-                    this.draw();
-                });
-        }
-        else if (currentLink &&
-            highlightLink &&
-            checkType(currentLink.source, lodash.isObject(currentLink.source)) &&
-            checkType(currentLink.target, lodash.isObject(currentLink.target)) &&
-            this.highlightedLink !== currentLink) {
-            this.highlightProgress = 0;
-            this.highlightedLink = currentLink;
-            this.highlightedNode = null;
-            this.highlightedNeighbors = new Set([currentLink.source.id, currentLink.target.id]);
-            this.highlightWorking = true;
-            if (!this.simulationWorking)
-                requestAnimationFrame(() => {
-                    this.draw();
-                });
-        }
-        else if (!currentNode && !currentLink && (this.highlightedNode || this.highlightedLink)) {
-            this.highlightWorking = false;
-            if (!this.simulationWorking)
-                requestAnimationFrame(() => {
-                    this.draw();
-                });
-        }
+        this.animateHighlight(highlightNode ? currentNode : undefined, highlightLink ? currentLink : undefined);
         if (!this.listeners.onMove)
             return;
         if (!currentNode && !checkHighlightNode)
@@ -2321,132 +2322,42 @@ function initResize() {
     observer.observe(this.area);
 }
 
-function initSimulation() {
-    if (!this.simulation) {
-        this.simulation = d3Force.forceSimulation()
-            .nodes(this.nodes)
-            .force("link", d3Force.forceLink(this.links).id(this.nodeSettings.idGetter.bind(this)))
-            .on("tick", () => {
-            this.draw();
-        })
-            .on("end", () => {
-            this.listeners.onSimulationEnd?.call?.(this);
-            if (this.graphSettings.showDrawTime) {
-                getDrawTime();
-                // eslint-disable-next-line no-console
-                console.log(`nodes: ${this.nodes.length} | links: ${this.links.length}`);
-                resetDrawTime();
-            }
-        });
-        initSimulationForces.call(this);
-    }
-}
-function initSimulationForces() {
-    if (!this.simulation)
-        return;
-    const linkForce = this.simulation.force("link");
-    if (!linkForce)
-        return;
-    if ((!this.forceSettings.forces || !this.forceSettings.xForce) && this.simulation.force("x")) {
-        this.simulation.force("x", null);
-    }
-    if ((!this.forceSettings.forces || !this.forceSettings.yForce) && this.simulation.force("y")) {
-        this.simulation.force("y", null);
-    }
-    if ((!this.forceSettings.forces || !this.forceSettings.chargeForce) &&
-        this.simulation.force("charge")) {
-        this.simulation.force("charge", null);
-    }
-    if ((!this.forceSettings.forces || !this.forceSettings.centerForce) &&
-        this.simulation.force("center")) {
-        this.simulation.force("center", null);
-    }
-    if (!this.forceSettings.forces || !this.forceSettings.linkForce) {
-        linkForce.distance(0).strength(0).iterations(0);
-    }
-    if (this.forceSettings.forces && this.forceSettings.linkForce) {
-        linkForce
-            .distance(this.forceSettings.linkDistance)
-            .strength(this.forceSettings.linkStrength)
-            .iterations(this.forceSettings.linkIterations);
-    }
-    if (this.forceSettings.forces && this.forceSettings.xForce) {
-        this.simulation.force("x", d3Force.forceX(this.forceSettings.xPosition).strength(this.forceSettings.xStrength));
-    }
-    if (this.forceSettings.forces && this.forceSettings.yForce) {
-        this.simulation.force("y", d3Force.forceY(this.forceSettings.yPosition).strength(this.forceSettings.yStrength));
-    }
-    if (this.forceSettings.forces && this.forceSettings.chargeForce) {
-        this.simulation.force("charge", d3Force.forceManyBody()
-            .strength(this.forceSettings.chargeStrength)
-            .distanceMax(Infinity)
-            .distanceMin(this.forceSettings.chargeDistanceMin));
-    }
-    if (this.forceSettings.forces && this.forceSettings.centerForce) {
-        this.simulation.force("center", d3Force.forceCenter(this.forceSettings.centerPosition.x ?? 0, this.forceSettings.centerPosition.y ?? 0).strength(this.forceSettings.centerStrength));
-    }
-    initCollideForce.call(this, true);
-}
-function initCollideForce(forceUpdate) {
-    if (!this.simulation)
+function updateLinkCache() {
+    if (!this.context)
         return;
-    if ((!this.forceSettings.collideForce || !this.forceSettings.forces) &&
-        this.simulation.force("collide")) {
-        this.simulation.force("collide", null);
-    }
-    if (this.forceSettings.forces && this.forceSettings.collideForce) {
-        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) {
-            this.simulation.force("collide", null);
+    const current = this.areaTransform.k;
+    if (this.linkSettings.smartCache &&
+        this._lastLinkZoomK !== undefined &&
+        this.linkOptionsCache.length > 0) {
+        const corner = this.linkSettings.linkScaleSwitch;
+        const prev = this._lastLinkZoomK;
+        this._lastLinkZoomK = current;
+        if (!((prev <= corner && current >= corner) || (prev >= corner && current <= corner))) {
+            return;
         }
-        else if (!this.simulation.force("collide") || forceUpdate) {
-            this.simulation.force("collide", d3Force.forceCollide()
-                .radius((node, index) => {
-                const nodeOptions = this.nodeOptionsCache[node.id];
-                if (!nodeOptions)
-                    return 0;
-                switch (nodeOptions.shape) {
-                    case "circle": {
-                        if (this.forceSettings.collideRadius) {
-                            return nodeIterationExtractor(node, index, this.nodes, this, this.forceSettings.collideRadius, undefined);
-                        }
-                        return nodeOptions.radius + this.forceSettings.collideAdditionalRadius;
-                    }
-                    case "square": {
-                        return (Math.sqrt(nodeOptions.width ** 2 + nodeOptions.height ** 2) / 2 +
-                            this.forceSettings.collideAdditionalRadius);
-                    }
-                    case "text": {
-                        return (Math.sqrt(nodeOptions.width ** 2 + nodeOptions.height ** 2) / 2 +
-                            this.forceSettings.collideAdditionalRadius);
-                    }
-                    default: {
-                        if (this.forceSettings.collideRadius) {
-                            return nodeIterationExtractor(node, index, this.nodes, this, this.forceSettings.collideRadius, undefined);
-                        }
-                        return nodeOptions.radius + this.forceSettings.collideAdditionalRadius;
-                    }
-                }
-            })
-                .strength(this.forceSettings.collideStrength)
-                .iterations(this.forceSettings.collideIterations));
+        for (let i = 0; i < this.links.length; i++) {
+            const link = this.links[i];
+            const linkOptions = linkIterationExtractor(link, i, this.links, this, this.linkSettings.options ?? {}, linkOptionsGetter);
+            const cache = this.linkOptionsCache[i];
+            if (cache) {
+                cache.color = linkOptions.color;
+                cache.arrowColor = linkOptions.arrowColor;
+                cache.width = linkOptions.width;
+            }
         }
+        return;
     }
-}
-
-function updateLinkCache() {
-    this.linkOptionsCache = {};
+    this._lastLinkZoomK = current;
+    this.linkOptionsCache.length = 0;
     const groupMap = {};
     const groupSelfMap = {};
     for (let i = 0; i < this.links.length; i++) {
         const link = this.links[i];
         const { sourceId, targetId } = extractLinkPointIds(link);
         const linkOptions = linkIterationExtractor(link, i, this.links, this, this.linkSettings.options ?? {}, linkOptionsGetter);
-        const id = `${targetId}${sourceId}`;
-        this.linkOptionsCache[id] = linkOptions;
+        this.linkOptionsCache[i] = linkOptions;
         if (this.linkSettings.curve) {
+            const id = `${targetId}${sourceId}`;
             if (sourceId === targetId) {
                 groupSelfMap[id] ??= 0;
                 link._groupIndex = ++groupSelfMap[id];
@@ -2477,13 +2388,34 @@ function indexToPosition(n) {
     // return n & 1 ? -(n >> 1) : n >> 1;
 }
 
-function updateNodeCache(types) {
-    this.nodeOptionsCache = {};
+function updateNodeCache() {
     if (!this.context)
         return;
+    const currentZoom = this.areaTransform.k;
+    const options = this.nodeOptionsCache.length === 0;
+    const label = this.cachedNodeLabel.length === 0;
+    let text = this.cachedNodeText.length === 0;
+    if (this.nodeSettings.smartCache &&
+        this._lastNodeZoomK !== undefined &&
+        !options &&
+        !text &&
+        !label) {
+        const thresholds = this.nodeSettings.textScaleSteps;
+        if (thresholds && thresholds.length > 0) {
+            const min = Math.min(this._lastNodeZoomK, currentZoom);
+            const max = Math.max(this._lastNodeZoomK, currentZoom);
+            const crossed = thresholds.some((t) => t >= min && t <= max);
+            this._lastNodeZoomK = currentZoom;
+            if (!crossed)
+                return;
+        }
+        this.cachedNodeText.length = 0;
+        text = true;
+    }
+    this._lastNodeZoomK = currentZoom;
     for (let i = 0; i < this.nodes.length; i++) {
         const node = this.nodes[i];
-        if (types === true || (jsHelpers.isObject(types) && types.options)) {
+        if (options) {
             const nodeOptions = nodeIterationExtractor(node, i, this.nodes, this, this.nodeSettings.options ?? {}, nodeOptionsGetter);
             const radius = nodeOptions.shape === "circle"
                 ? nodeRadiusGetter({
@@ -2534,11 +2466,19 @@ function updateNodeCache(types) {
             nodeOptions.height = node.visible === false ? 0 : height;
             nodeOptions.radius = node.visible === false ? 0 : radius;
             nodeOptions.labelSize = labelSize;
-            this.nodeOptionsCache[node.id] = nodeOptions;
+            this.nodeOptionsCache[i] = nodeOptions;
         }
-        const nodeOptions = this.nodeOptionsCache[node.id];
+        let nodeOptions = this.nodeOptionsCache[i];
+        if (!nodeOptions)
+            continue;
         /** label */
-        if (types === true || (jsHelpers.isObject(types) && types.label)) {
+        if (label) {
+            if (!options) {
+                nodeOptions = nodeIterationExtractor(node, i, this.nodes, this, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+                const cache = this.nodeOptionsCache[i];
+                if (cache)
+                    cache.label = nodeOptions.label;
+            }
             /** label in not text shape */
             if (nodeOptions.shape !== "text" && nodeOptions.label) {
                 this.context.font = `${nodeOptions.labelStyle} normal ${nodeOptions.labelWeight} ${nodeOptions.labelSize}px ${nodeOptions.labelFont}`;
@@ -2546,7 +2486,7 @@ function updateNodeCache(types) {
                 this.context.textAlign = nodeOptions.labelAlign;
                 if (nodeOptions.labelWidth == undefined ||
                     this.context.measureText(nodeOptions.label).width <= nodeOptions.labelWidth) {
-                    this.cachedNodeLabel[node.id] = [nodeOptions.label];
+                    this.cachedNodeLabel[i] = [nodeOptions.label];
                 }
                 const { lines } = getTextLines({
                     context: this.context,
@@ -2559,7 +2499,7 @@ function updateNodeCache(types) {
                     textStyle: nodeOptions.labelStyle,
                     textWeight: nodeOptions.labelWeight,
                 });
-                this.cachedNodeLabel[node.id] = lines;
+                this.cachedNodeLabel[i] = lines;
                 /** label in text shape */
             }
             else if (nodeOptions.shape === "text" && nodeOptions.label) {
@@ -2583,18 +2523,29 @@ function updateNodeCache(types) {
                         (lines.length - 1) * nodeOptions.labelGap +
                         nodeOptions.labelYPadding;
                 nodeOptions.width = maxSize + nodeOptions.labelXPadding;
-                this.cachedNodeLabel[node.id] = lines;
+                this.cachedNodeLabel[i] = lines;
+            }
+            else {
+                this.cachedNodeLabel[i] = [];
             }
         }
         /** text */
-        if (nodeOptions.text && (types === true || (jsHelpers.isObject(types) && types.text))) {
+        if (text) {
+            if (!options) {
+                nodeOptions = nodeIterationExtractor(node, i, this.nodes, this, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+                const cache = this.nodeOptionsCache[i];
+                if (cache) {
+                    cache.text = nodeOptions.text;
+                    cache.textVisible = nodeOptions.textVisible;
+                }
+            }
+            if (!nodeOptions.text) {
+                this.cachedNodeText[i] = [];
+                return;
+            }
             this.context.font = `${nodeOptions.textStyle} normal ${nodeOptions.textWeight} ${nodeOptions.textSize}px ${nodeOptions.textFont}`;
             this.context.fillStyle = nodeOptions.textColor;
             this.context.textAlign = nodeOptions.textAlign;
-            if (nodeOptions.textWidth == undefined ||
-                this.context.measureText(nodeOptions.text).width <= nodeOptions.textWidth) {
-                this.cachedNodeText[node.id] = [nodeOptions.text];
-            }
             const { lines } = getTextLines({
                 context: this.context,
                 maxWidth: nodeOptions.textWidth,
@@ -2606,49 +2557,230 @@ function updateNodeCache(types) {
                 textStyle: nodeOptions.textStyle,
                 textWeight: nodeOptions.textWeight,
             });
-            this.cachedNodeText[node.id] = lines;
+            this.cachedNodeText[i] = lines;
         }
     }
 }
 
+const DEFAULT_ZOOM_EXTENT = [0.3, 10];
+const DEFAULT_TRANSLATE_EXTENT_COEFFICIENT = 8;
+const DEFAULT_MARGIN = 0.25;
 function initZoom(currentZoom) {
     if (!this.area)
         throw new Error("bad init data");
+    const bounds = computeGraphBounds(this.nodes);
+    const zoomExtent = resolveZoomExtent(this.graphSettings.zoomExtent, this.width, this.height, this.graphSettings.zoomExtentMargin ?? DEFAULT_MARGIN, bounds);
+    const translateExtent = resolveTranslateExtent(this.graphSettings.translateExtent, this.graphSettings.translateExtentCoefficient, this.graphSettings.translateExtentOverlap, this.width, this.height, zoomExtent, bounds);
+    this._translateExtent = translateExtent;
     const zoomInstance = d3Zoom.zoom()
-        .scaleExtent(this.graphSettings.zoomExtent)
+        .scaleExtent(zoomExtent)
         .on("zoom", (event) => {
+        if (this._zoomAnimating)
+            return;
         this.listeners.onZoom?.call?.(this, event);
         const oldTransform = this.areaTransform;
         this.areaTransform = event.transform;
         if (this.areaTransform.k !== oldTransform.k) {
             updateLinkCache.call(this);
-            updateNodeCache.call(this, true);
+            updateNodeCache.call(this);
         }
-        if (!this.simulationWorking && !this.highlightWorking)
-            requestAnimationFrame(() => this.draw());
+        this.tick();
     });
-    if (this.graphSettings.translateExtentEnable) {
-        const coefficient = this.graphSettings.translateExtentCoefficient;
-        const [coefficientX, coefficientY] = jsHelpers.isArray(coefficient)
-            ? coefficient
-            : [coefficient, coefficient];
-        const [[minX = -this.width * coefficientX, minY = -this.height * coefficientY], [maxX = this.width * coefficientX, maxY = this.height * coefficientY],] = this.graphSettings.translateExtent;
-        zoomInstance.translateExtent([
-            [minX, minY],
-            [maxX, maxY],
-        ]);
-    }
+    zoomInstance.translateExtent(translateExtent);
     d3Selection.select(this.area).call(zoomInstance).on("dblclick.zoom", null);
     const zoomInitial = currentZoom ?? this.graphSettings.zoomInitial;
-    this.areaTransform = new d3Zoom.ZoomTransform(zoomInitial?.k ?? 1, zoomInitial?.x ?? this.width / 2, zoomInitial?.y ?? this.height / 2);
+    this.areaTransform = new d3Zoom.ZoomTransform(Math.max(zoomInitial?.k ?? 1, zoomExtent[0]), zoomInitial?.x ?? this.width / 2, zoomInitial?.y ?? this.height / 2);
     d3Zoom.zoom().transform(d3Selection.select(this.area), this.areaTransform);
 }
+function resolveZoomExtent(userExtent, viewWidth, viewHeight, margin, bounds) {
+    if (userExtent &&
+        userExtent.length === 2 &&
+        userExtent[0] != undefined &&
+        userExtent[1] != undefined) {
+        return userExtent;
+    }
+    if (!bounds)
+        return DEFAULT_ZOOM_EXTENT;
+    const graphWidth = bounds.maxX - bounds.minX;
+    const graphHeight = bounds.maxY - bounds.minY;
+    if (graphWidth === 0 || graphHeight === 0)
+        return DEFAULT_ZOOM_EXTENT;
+    const scaleToFit = (1 - margin) / Math.max(graphWidth / viewWidth, graphHeight / viewHeight);
+    return [scaleToFit, DEFAULT_ZOOM_EXTENT[1]];
+}
+function resolveTranslateExtent(userExtent, userCoefficient, overlap, viewWidth, viewHeight, zoomExtent, bounds) {
+    if (userExtent && userExtent.length >= 2 && jsHelpers.isArray(userExtent[0]) && jsHelpers.isArray(userExtent[1])) {
+        return [
+            [
+                userExtent[0][0] ?? -viewWidth * DEFAULT_TRANSLATE_EXTENT_COEFFICIENT,
+                userExtent[0][1] ?? -viewHeight * DEFAULT_TRANSLATE_EXTENT_COEFFICIENT,
+            ],
+            [
+                userExtent[1][0] ?? viewWidth * DEFAULT_TRANSLATE_EXTENT_COEFFICIENT,
+                userExtent[1][1] ?? viewHeight * DEFAULT_TRANSLATE_EXTENT_COEFFICIENT,
+            ],
+        ];
+    }
+    if (userCoefficient) {
+        const [cx, cy] = jsHelpers.isArray(userCoefficient)
+            ? userCoefficient
+            : [userCoefficient, userCoefficient];
+        return [
+            [-viewWidth * cx, -viewHeight * cy],
+            [viewWidth * cx, viewHeight * cy],
+        ];
+    }
+    if (!bounds) {
+        return [
+            [
+                -viewWidth * DEFAULT_TRANSLATE_EXTENT_COEFFICIENT,
+                -viewHeight * DEFAULT_TRANSLATE_EXTENT_COEFFICIENT,
+            ],
+            [
+                viewWidth * DEFAULT_TRANSLATE_EXTENT_COEFFICIENT,
+                viewHeight * DEFAULT_TRANSLATE_EXTENT_COEFFICIENT,
+            ],
+        ];
+    }
+    const minZoom = zoomExtent[0];
+    const zoomViewWidth = viewWidth / minZoom;
+    const zoomViewHeight = viewHeight / minZoom;
+    const graphWidth = bounds.maxX - bounds.minX;
+    const graphHeight = bounds.maxY - bounds.minY;
+    const minX = bounds.minX + overlap * graphWidth - zoomViewWidth;
+    const maxX = bounds.maxX - overlap * graphWidth + zoomViewWidth;
+    const minY = bounds.minY + overlap * graphHeight - zoomViewHeight;
+    const maxY = bounds.maxY - overlap * graphHeight + zoomViewHeight;
+    return [
+        [minX, minY],
+        [maxX, maxY],
+    ];
+}
+
+function initSimulation() {
+    if (!this.simulation) {
+        this.simulation = d3Force.forceSimulation()
+            .nodes(this.nodes)
+            .force("link", d3Force.forceLink(this.links).id(this.nodeSettings.idGetter.bind(this)))
+            .on("tick", () => {
+            this.draw();
+        })
+            .on("end", () => {
+            this.listeners.onSimulationEnd?.call?.(this);
+            if (this.area) {
+                initZoom.call(this, this.areaTransform);
+            }
+            if (this.graphSettings.showDrawTime) {
+                getDrawTime();
+                // eslint-disable-next-line no-console
+                console.log(`nodes: ${this.nodes.length} | links: ${this.links.length}`);
+                resetDrawTime();
+            }
+        })
+            .stop();
+        initSimulationForces.call(this);
+    }
+}
+function initSimulationForces() {
+    if (!this.simulation)
+        return;
+    const linkForce = this.simulation.force("link");
+    if (!linkForce)
+        return;
+    if ((!this.forceSettings.forces || !this.forceSettings.xForce) && this.simulation.force("x")) {
+        this.simulation.force("x", null);
+    }
+    if ((!this.forceSettings.forces || !this.forceSettings.yForce) && this.simulation.force("y")) {
+        this.simulation.force("y", null);
+    }
+    if ((!this.forceSettings.forces || !this.forceSettings.chargeForce) &&
+        this.simulation.force("charge")) {
+        this.simulation.force("charge", null);
+    }
+    if ((!this.forceSettings.forces || !this.forceSettings.centerForce) &&
+        this.simulation.force("center")) {
+        this.simulation.force("center", null);
+    }
+    if (!this.forceSettings.forces || !this.forceSettings.linkForce) {
+        linkForce.distance(0).strength(0).iterations(0);
+    }
+    if (this.forceSettings.forces && this.forceSettings.linkForce) {
+        linkForce
+            .distance(this.forceSettings.linkDistance)
+            .strength(this.forceSettings.linkStrength)
+            .iterations(this.forceSettings.linkIterations);
+    }
+    if (this.forceSettings.forces && this.forceSettings.xForce) {
+        this.simulation.force("x", d3Force.forceX(this.forceSettings.xPosition).strength(this.forceSettings.xStrength));
+    }
+    if (this.forceSettings.forces && this.forceSettings.yForce) {
+        this.simulation.force("y", d3Force.forceY(this.forceSettings.yPosition).strength(this.forceSettings.yStrength));
+    }
+    if (this.forceSettings.forces && this.forceSettings.chargeForce) {
+        this.simulation.force("charge", d3Force.forceManyBody()
+            .strength(this.forceSettings.chargeStrength)
+            .distanceMax(Infinity)
+            .distanceMin(this.forceSettings.chargeDistanceMin));
+    }
+    if (this.forceSettings.forces && this.forceSettings.centerForce) {
+        this.simulation.force("center", d3Force.forceCenter(this.forceSettings.centerPosition.x ?? 0, this.forceSettings.centerPosition.y ?? 0).strength(this.forceSettings.centerStrength));
+    }
+    initCollideForce.call(this, true);
+}
+function initCollideForce(forceUpdate) {
+    if (!this.simulation)
+        return;
+    if ((!this.forceSettings.collideForce || !this.forceSettings.forces) &&
+        this.simulation.force("collide")) {
+        this.simulation.force("collide", null);
+    }
+    if (this.forceSettings.forces && this.forceSettings.collideForce) {
+        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) {
+            this.simulation.force("collide", null);
+        }
+        else if (!this.simulation.force("collide") || forceUpdate) {
+            this.simulation.force("collide", d3Force.forceCollide()
+                .radius((node, index) => {
+                const nodeOptions = this.nodeOptionsCache[index];
+                if (!nodeOptions)
+                    return 0;
+                switch (nodeOptions.shape) {
+                    case "circle": {
+                        if (this.forceSettings.collideRadius) {
+                            return nodeIterationExtractor(node, index, this.nodes, this, this.forceSettings.collideRadius, undefined);
+                        }
+                        return nodeOptions.radius + this.forceSettings.collideAdditionalRadius;
+                    }
+                    case "square": {
+                        return (Math.sqrt(nodeOptions.width ** 2 + nodeOptions.height ** 2) / 2 +
+                            this.forceSettings.collideAdditionalRadius);
+                    }
+                    case "text": {
+                        return (Math.sqrt(nodeOptions.width ** 2 + nodeOptions.height ** 2) / 2 +
+                            this.forceSettings.collideAdditionalRadius);
+                    }
+                    default: {
+                        if (this.forceSettings.collideRadius) {
+                            return nodeIterationExtractor(node, index, this.nodes, this, this.forceSettings.collideRadius, undefined);
+                        }
+                        return nodeOptions.radius + this.forceSettings.collideAdditionalRadius;
+                    }
+                }
+            })
+                .strength(this.forceSettings.collideStrength)
+                .iterations(this.forceSettings.collideIterations));
+        }
+    }
+}
 
 class GraphCanvas {
     /** initial data */
     nodes;
     links;
-    particles = {};
+    particles = [];
     width;
     height;
     root;
@@ -2665,19 +2797,25 @@ class GraphCanvas {
     context;
     simulation;
     areaTransform = d3Zoom.zoomIdentity;
+    _translateExtent;
     areaRect;
     draw;
     eventAbortController;
-    cachedNodeText = {};
-    cachedNodeLabel = {};
-    linkOptionsCache = {};
-    nodeOptionsCache = {};
+    cachedNodeText = [];
+    cachedNodeLabel = [];
+    linkOptionsCache = [];
+    nodeOptionsCache = [];
     isDragging = false;
     highlightedNode = null;
     highlightedLink = null;
     highlightedNeighbors = null;
     highlightProgress = 1;
-    highlightWorking = false;
+    highlightStart = null;
+    highlightPositive = false;
+    highlightController;
+    _lastNodeZoomK;
+    _lastLinkZoomK;
+    _zoomAnimating = false;
     get simulationWorking() {
         const simulationAlpha = this.simulation?.alpha?.() ?? 0;
         const simulationAlphaMin = this.simulation?.alphaMin?.() ?? 0;
@@ -2706,21 +2844,72 @@ class GraphCanvas {
     get dpi() {
         return devicePixelRatio;
     }
-    getData() {
+    getData = () => {
         return {
             links: this.links,
             nodes: this.nodes,
         };
-    }
-    changeData(options, alpha = 0.5, clearCache = true) {
+    };
+    fitToView = (margin = this.graphSettings.zoomToFitMargin, duration = this.graphSettings.zoomAnimationDuration) => {
+        const area = this.area;
+        if (!area)
+            return;
+        const bounds = computeGraphBounds(this.nodes);
+        if (!bounds)
+            return;
+        const graphWidth = bounds.maxX - bounds.minX;
+        const graphHeight = bounds.maxY - bounds.minY;
+        if (graphWidth === 0 || graphHeight === 0)
+            return;
+        const graphCenterX = bounds.minX + graphWidth / 2;
+        const graphCenterY = bounds.minY + graphHeight / 2;
+        const scale = (1 - margin) / Math.max(graphWidth / this.width, graphHeight / this.height);
+        const clampedScale = Math.min(scale, this.graphSettings.zoomExtent?.[1] ?? scale);
+        const target = d3Zoom.zoomIdentity
+            .translate(this.width / 2, this.height / 2)
+            .scale(clampedScale)
+            .translate(-graphCenterX, -graphCenterY);
+        if (!this.graphSettings.zoomAnimation) {
+            this.areaTransform = target;
+            d3Zoom.zoom().transform(d3Selection.select(area), target);
+            this.clearCache(true);
+            this.tick();
+            return;
+        }
+        this.animateZoom(area, target, this.areaTransform, duration);
+    };
+    focusOnNode = (nodeId, scale = this.graphSettings.zoomToNodeScale, duration = this.graphSettings.zoomAnimationDuration) => {
+        const area = this.area;
+        if (!area)
+            return;
+        const node = this.nodes.find((n) => n.id === nodeId);
+        if (!node)
+            return;
+        if (node.x == undefined || node.y == undefined)
+            return;
+        const target = d3Zoom.zoomIdentity
+            .translate(this.width / 2, this.height / 2)
+            .scale(scale)
+            .translate(-node.x, -node.y);
+        if (!this.graphSettings.zoomAnimation) {
+            this.areaTransform = target;
+            d3Zoom.zoom().transform(d3Selection.select(area), target);
+            this.clearCache(true);
+            this.tick();
+            return;
+        }
+        this.animateZoom(area, target, this.areaTransform, duration);
+    };
+    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)
+        if (options.nodes != undefined || options.links != undefined) {
             this.updateData(alpha, clearCache);
-    }
-    changeSettings(options, clearCache = true) {
+        }
+    };
+    changeSettings = (options, clearCache = true) => {
         if (options.graphSettings) {
             this.graphSettings = graphSettingsGetter(options.graphSettings, this.graphSettings);
             this.draw = initDraw.call(this);
@@ -2770,13 +2959,13 @@ class GraphCanvas {
             return void this.updateSimulation();
         }
         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();
@@ -2790,51 +2979,96 @@ 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) {
-            updateNodeCache.call(this, true);
-            updateLinkCache.call(this);
+            this.nodeOptionsCache.length = 0;
+            this.linkOptionsCache.length = 0;
+            this.cachedNodeLabel.length = 0;
+            this.cachedNodeText.length = 0;
         }
         else if (jsHelpers.isArray(keys)) {
-            if (keys.some((k) => k === GRAPH_CACHE_TYPE.NodeText ||
-                k === GRAPH_CACHE_TYPE.NodeLabel ||
-                k === GRAPH_CACHE_TYPE.NodeOptions)) {
-                updateNodeCache.call(this, {
-                    label: keys.includes(GRAPH_CACHE_TYPE.NodeLabel),
-                    options: keys.includes(GRAPH_CACHE_TYPE.NodeOptions),
-                    text: keys.includes(GRAPH_CACHE_TYPE.NodeOptions),
-                });
-            }
-            if (keys.includes(GRAPH_CACHE_TYPE.LinkOptions)) {
-                updateLinkCache.call(this);
+            for (const key of keys) {
+                switch (key) {
+                    case GRAPH_CACHE_TYPE.NodeText: {
+                        this.cachedNodeText.length = 0;
+                        break;
+                    }
+                    case GRAPH_CACHE_TYPE.NodeLabel: {
+                        this.cachedNodeLabel.length = 0;
+                        break;
+                    }
+                    case GRAPH_CACHE_TYPE.NodeOptions: {
+                        this.nodeOptionsCache.length = 0;
+                        break;
+                    }
+                    case GRAPH_CACHE_TYPE.LinkOptions: {
+                        this.linkOptionsCache.length = 0;
+                        break;
+                    }
+                }
             }
         }
-    }
-    tick() {
-        if (!this.simulationWorking && !this.highlightWorking)
+        updateNodeCache.call(this);
+        updateLinkCache.call(this);
+    };
+    tick = () => {
+        if (!this.simulationWorking)
             this.draw();
-    }
-    restart(alpha) {
-        if (this.simulation)
+    };
+    restart = (alpha, options) => {
+        if (!this.simulation)
+            return;
+        const settings = {
+            precompute: options?.precompute ?? this.forceSettings.precompute,
+            precomputeMaxTimeMs: options?.precomputeMaxTimeMs ?? this.forceSettings?.precomputeMaxTimeMs,
+            precomputeMaxTicks: options?.precomputeMaxTicks ?? this.forceSettings?.precomputeMaxTicks ?? 300,
+            precomputeDisableForcesAfter: options?.precomputeDisableForcesAfter ??
+                this.forceSettings?.precomputeDisableForcesAfter ??
+                false,
+        };
+        if (!settings.precompute) {
             this.simulation.alpha(alpha ?? 1).restart();
-    }
-    start() {
+            return;
+        }
+        if (settings.precomputeDisableForcesAfter) {
+            this.forceSettings = forceSettingsGetter({ forces: true }, this.forceSettings);
+        }
+        initSimulationForces.call(this);
+        this.simulation.stop();
+        this.simulation.alpha(alpha ?? 1);
+        const startTime = performance.now();
+        let ticks = 0;
+        while (performance.now() - startTime < settings.precomputeMaxTimeMs &&
+            ticks < settings.precomputeMaxTicks) {
+            this.simulation.tick(1);
+            ticks++;
+            if (this.simulation.alpha() <= this.simulation.alphaMin())
+                break;
+        }
+        if (settings.precomputeDisableForcesAfter) {
+            this.forceSettings = forceSettingsGetter({ forces: false }, this.forceSettings);
+        }
+        initSimulationForces.call(this);
+        this.simulation.restart();
+        this.tick();
+    };
+    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;
@@ -2842,39 +3076,51 @@ 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 = () => {
         if (this.simulation) {
             initSimulationForces.call(this);
-            this.simulation.alpha(1);
-            this.simulation.restart();
+            this.restart(1);
         }
-    }
-    clearState() {
+    };
+    clearState = () => {
         this.isDragging = false;
         this.highlightedNode = null;
         this.highlightedLink = null;
         this.highlightedNeighbors = null;
         this.highlightProgress = 0;
-        this.highlightWorking = false;
-    }
-    updateData(alpha = 0.5, clearCache = true) {
+        this.highlightStart = null;
+        this.highlightPositive = false;
+    };
+    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) => {
         if (clearCache) {
             this.clearCache(clearCache);
         }
         if (this.simulation) {
             initCollideForce.call(this, false);
-            this.simulation
-                .nodes(this.nodes)
-                .force("link", d3Force.forceLink(this.links)
+            this.simulation.nodes(this.nodes).force("link", d3Force.forceLink(this.links)
                 .id(this.nodeSettings.idGetter.bind(this))
                 .distance(this.forceSettings.forces && this.forceSettings.linkForce
                 ? this.forceSettings.linkDistance
@@ -2884,21 +3130,95 @@ class GraphCanvas {
                 : 0)
                 .iterations(this.forceSettings.forces && this.forceSettings.linkForce
                 ? this.forceSettings.linkIterations
-                : 0))
-                .alpha(alpha)
-                .restart();
+                : 0));
+            this.restart(alpha);
+            initZoom.call(this, this.areaTransform);
         }
-    }
-    init() {
-        initArea.call(this);
-        updateNodeCache.call(this, true);
-        updateLinkCache.call(this);
-        initSimulation.call(this);
-        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 = [
@@ -3059,22 +3379,13 @@ const HIGHLIGHT_COMMON_CONTROLS = [
         label: "Расширение границы связи для курсора",
     },
     {
-        id: "highlightDownFrames",
-        initialValue: HIGHLIGHT_SETTINGS.highlightDownFrames,
-        max: 60,
-        min: 1,
-        step: 1,
-        type: "range",
-        label: "Скорость отмены анимации в кадрах",
-    },
-    {
-        id: "highlightUpFrames",
-        initialValue: HIGHLIGHT_SETTINGS.highlightUpFrames,
-        max: 60,
-        min: 1,
+        id: "highlightDuration",
+        initialValue: HIGHLIGHT_SETTINGS.highlightDuration,
+        max: 1000,
+        min: 10,
         step: 1,
         type: "range",
-        label: "Скорость применения анимации в кадрах",
+        label: "Скорость анимации",
     },
 ];
 const HIGHLIGHT_BY_NODE_FOR_NODE_CONTROLS = [
@@ -3547,19 +3858,22 @@ const LINK_SETTINGS_CONTROLS = [
         initialValue: LINK_SETTINGS.particles,
     },
     {
-        id: "particleFlexSpeed",
-        type: "checkbox",
-        label: "Гибкий расчет скорости частицы",
-        initialValue: LINK_SETTINGS.particleFlexSpeed,
+        id: "particleSpeedByDistance",
+        initialValue: LINK_SETTINGS.particleSpeedByDistance,
+        max: 500,
+        min: 1,
+        step: 1,
+        type: "range",
+        label: "Скорость частицы на один пиксель",
     },
     {
-        id: "particleFlexSpeedCoefficient",
-        initialValue: LINK_SETTINGS.particleFlexSpeedCoefficient,
-        max: 10,
-        min: 0.1,
-        step: 0.1,
+        id: "particleCountByDistance",
+        initialValue: LINK_SETTINGS.particleCountByDistance,
+        max: 250,
+        min: 1,
+        step: 1,
         type: "range",
-        label: "Коэффициент скорости частицы относительно расстояния",
+        label: "Количество пикселей для появления частицы",
     },
 ];
 const LINK_OPTIONS_LINK_CONTROLS = [
@@ -3654,24 +3968,6 @@ const LINK_OPTIONS_PARTICLE_CONTROLS = [
         label: "Радиус",
         initialValue: LINK_OPTIONS.particleRadius,
     },
-    {
-        id: "particleCount",
-        type: "range",
-        max: 20,
-        min: 1,
-        step: 1,
-        label: "Количество",
-        initialValue: LINK_OPTIONS.particleCount,
-    },
-    {
-        id: "particleSteps",
-        type: "range",
-        max: 200,
-        min: 1,
-        step: 1,
-        label: "Количество кадров",
-        initialValue: LINK_OPTIONS.particleSteps,
-    },
     {
         id: "particleBorderColor",
         type: "color",
@@ -4105,10 +4401,19 @@ exports.NODE_OPTIONS_NODE_CONTROLS = NODE_OPTIONS_NODE_CONTROLS;
 exports.NODE_OPTIONS_TEXT_CONTROLS = NODE_OPTIONS_TEXT_CONTROLS;
 exports.NODE_SETTINGS = NODE_SETTINGS;
 exports.NODE_SETTINGS_CONTROLS = NODE_SETTINGS_CONTROLS;
+exports.PERFOMANCE_NODE_OPTIONS = PERFOMANCE_NODE_OPTIONS;
+exports.PERFORMANCE_FORCE_SETTINGS = PERFORMANCE_FORCE_SETTINGS;
+exports.PERFORMANCE_GRAPH_SETTINGS = PERFORMANCE_GRAPH_SETTINGS;
+exports.PERFORMANCE_HIGHLIGHT_SETTINGS = PERFORMANCE_HIGHLIGHT_SETTINGS;
+exports.PERFORMANCE_LINK_OPTIONS = PERFORMANCE_LINK_OPTIONS;
+exports.PERFORMANCE_LINK_SETTINGS = PERFORMANCE_LINK_SETTINGS;
+exports.PERFORMANCE_NODE_SETTINGS = PERFORMANCE_NODE_SETTINGS;
 exports.animationByProgress = animationByProgress;
+exports.approximateQuadraticBezierLength = approximateQuadraticBezierLength;
 exports.calculateLinkPositionByNode = calculateLinkPositionByNode;
 exports.colorGetter = colorGetter;
 exports.colorToRgb = colorToRgb;
+exports.computeGraphBounds = computeGraphBounds;
 exports.dragPlaceCoefficientGetter = dragPlaceCoefficientGetter;
 exports.drawText = drawText;
 exports.extractLinkPointIds = extractLinkPointIds;
@@ -4120,6 +4425,7 @@ exports.getDrawNode = getDrawNode;
 exports.getParticlePosition = getParticlePosition;
 exports.graphSettingsGetter = graphSettingsGetter;
 exports.highlightSettingsGetter = highlightSettingsGetter;
+exports.isEmptyObject = isEmptyObject;
 exports.isNodeVisible = isNodeVisible;
 exports.isOverlapsNode = isOverlapsNode;
 exports.linkByPointerGetter = linkByPointerGetter;