@krainovsd/graph 0.13.0-beta3 → 0.14.0-beta-7.1

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,15 +290,47 @@ 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
-        : (mouseEvent.touches[0]?.clientX ?? mouseEvent.changedTouches[0]?.clientX);
-    const clientY = "clientX" in mouseEvent
-        ? mouseEvent.clientY
-        : (mouseEvent.touches[0]?.clientY ?? mouseEvent.changedTouches[0]?.clientY);
-    const px = (clientX - areaRect.left - areaTransform.x) / areaTransform.k;
-    const py = (clientY - areaRect.top - areaTransform.y) / areaTransform.k;
+    let localX;
+    let localY;
+    if ("offsetX" in mouseEvent) {
+        localX = mouseEvent.offsetX;
+        localY = mouseEvent.offsetY;
+    }
+    else {
+        if (!areaRect)
+            return [0, 0];
+        const clientX = mouseEvent.touches[0]?.clientX ?? mouseEvent.changedTouches[0]?.clientX;
+        const clientY = mouseEvent.touches[0]?.clientY ?? mouseEvent.changedTouches[0]?.clientY;
+        localX = clientX - areaRect.left;
+        localY = clientY - areaRect.top;
+    }
+    const px = (localX - areaTransform.x) / areaTransform.k;
+    const py = (localY - areaTransform.y) / areaTransform.k;
     return [px, py];
 }
 
@@ -379,10 +430,7 @@ function linkIterationExtractor(link, i, links, state, option, optionConstantGet
     return customOptions;
 }
 
-function nodeByPointerGetter({ areaRect, areaTransform, mouseEvent, nodes, }) {
-    if (!areaRect)
-        return undefined;
-    const [pointerX, pointerY] = pointerGetter(mouseEvent, areaRect, areaTransform);
+function nodeByPointerGetter({ pointerX, pointerY, nodes, }) {
     return d3Array.greatest(nodes, (node) => {
         if (isOverlapsNode(node, pointerX, pointerY, undefined))
             return node.index;
@@ -735,47 +783,54 @@ 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)
-        return undefined;
-    const [pointerX, pointerY] = pointerGetter(mouseEvent, areaRect, areaTransform);
+function linkByPointerGetter({ pointerX, pointerY, links, linkHoverExtraZone, curve, }) {
     return d3Array.greatest(links, (link) => {
         if (!jsHelpers.isObject(link.source) ||
             !jsHelpers.isObject(link.target) ||
@@ -1046,22 +1101,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 +1187,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 +1268,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 +1283,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",
@@ -1225,11 +1318,11 @@ function initArea() {
         if (!this.area)
             throw new Error("couldn't create canvas");
         this.container.appendChild(this.area);
-        this.areaRect = this.area.getBoundingClientRect();
         this.context = this.area.getContext("2d");
         if (!this.context)
             throw new Error("couldn't create canvas context");
         this.context.scale(this.dpi, this.dpi);
+        this.updateRect();
     }
 }
 
@@ -1241,10 +1334,8 @@ function initDnd() {
         if (this.listeners.onDragSubject) {
             return this.listeners.onDragSubject.call(this, event);
         }
-        if (!this.areaRect)
-            return;
         const mouseEvent = event.sourceEvent;
-        const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
+        const [pointerX, pointerY] = this.getPointerAreaPosition(mouseEvent);
         return d3Array.greatest(this.nodes, (node) => {
             if (!node.x || !node.y || (jsHelpers.isBoolean(node.drag) && !node.drag))
                 return undefined;
@@ -1260,12 +1351,16 @@ function initDnd() {
             if (this.simulation)
                 this.simulation.alphaTarget(0.3).restart();
         }
-        if (!this.areaRect)
-            return;
         const mouseEvent = event.sourceEvent;
-        const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
-        event.subject.fx = pointerX;
-        event.subject.fy = pointerY;
+        const [pointerX, pointerY] = this.getPointerAreaPosition(mouseEvent);
+        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) => {
@@ -1273,10 +1368,16 @@ function initDnd() {
         if (!event.active && this.simulation)
             this.simulation.alphaTarget(0);
         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 (sourceEvent.altKey) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(sourceEvent);
+            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 +1425,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 +1440,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 +1455,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 +1494,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 +1549,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 +1588,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 +1599,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 +1722,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 +1731,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 +1890,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 +2016,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 +2076,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) {
@@ -2065,8 +2096,20 @@ function initDraw() {
         nodeRenders.forEach((render) => render());
         textRenders.forEach((render) => render());
         this.context.restore();
+        /** selection rectangle */
+        if (this.isSelecting && this.selectionRect) {
+            const rect = this.selectionRect;
+            const screenX = Math.min(rect.x1, rect.x2) * this.areaTransform.k + this.areaTransform.x;
+            const screenY = Math.min(rect.y1, rect.y2) * this.areaTransform.k + this.areaTransform.y;
+            const screenW = Math.abs(rect.x2 - rect.x1) * this.areaTransform.k;
+            const screenH = Math.abs(rect.y2 - rect.y1) * this.areaTransform.k;
+            this.context.fillStyle = "rgba(66, 133, 244, 0.2)";
+            this.context.fillRect(screenX, screenY, screenW, screenH);
+            this.context.strokeStyle = "rgba(66, 133, 244, 0.8)";
+            this.context.lineWidth = 2;
+            this.context.strokeRect(screenX, screenY, screenW, screenH);
+        }
         this.listeners.onDrawFinished?.call?.(this);
-        calculateHighlight.bind(this)(recursive);
     }
     if (this.graphSettings.showDrawTime) {
         return setDrawTime(draw.bind(this), this.graphSettings.showDrawTimeEveryTick);
@@ -2078,7 +2121,7 @@ function initPointer() {
     if (!this.area || !this.nodes)
         throw new Error("bad init data");
     function onHover(event) {
-        if (!this.area)
+        if (!this.area || this.isSelecting)
             return;
         let currentNode;
         let currentLink;
@@ -2087,10 +2130,10 @@ function initPointer() {
         let highlightNode = true;
         let highlightLink = true;
         if (checkHighlightNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentNode = nodeByPointerGetter({
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
+                pointerX,
+                pointerY,
                 nodes: this.nodes,
             });
             if (currentNode?.highlight != undefined)
@@ -2100,11 +2143,11 @@ function initPointer() {
             this.area.style.cursor = "pointer";
         }
         else if (checkHighlightLink) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -2120,53 +2163,23 @@ 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)
+        if (!currentNode && !checkHighlightNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentNode = nodeByPointerGetter({
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
+                pointerX,
+                pointerY,
                 nodes: this.nodes,
             });
+        }
         if (!currentNode && (!checkHighlightNode || (!checkHighlightLink && !currentLink))) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -2180,18 +2193,18 @@ function initPointer() {
             !("button" in event) ||
             event.button !== 1)
             return;
+        const [pointerX, pointerY] = this.getPointerAreaPosition(event);
         const currentNode = nodeByPointerGetter({
-            areaRect: this.areaRect,
-            areaTransform: this.areaTransform,
-            mouseEvent: event,
+            pointerX,
+            pointerY,
             nodes: this.nodes,
         });
         if (!currentNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             const currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -2202,18 +2215,18 @@ function initPointer() {
     function onRightClick(event) {
         if (!this.listeners.onContextMenu)
             return;
+        const [pointerX, pointerY] = this.getPointerAreaPosition(event);
         const currentNode = nodeByPointerGetter({
-            areaRect: this.areaRect,
-            areaTransform: this.areaTransform,
-            mouseEvent: event,
+            pointerX,
+            pointerY,
             nodes: this.nodes,
         });
         if (!currentNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             const currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -2224,18 +2237,18 @@ function initPointer() {
     function onDoubleClick(event) {
         if (!this.listeners.onDoubleClick)
             return;
+        const [pointerX, pointerY] = this.getPointerAreaPosition(event);
         const currentNode = nodeByPointerGetter({
-            areaRect: this.areaRect,
-            areaTransform: this.areaTransform,
-            mouseEvent: event,
+            pointerX,
+            pointerY,
             nodes: this.nodes,
         });
         if (!currentNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             const currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -2246,18 +2259,18 @@ function initPointer() {
     function onClick(event) {
         if (this.isDragging || !this.listeners.onClick || ("button" in event && event.button !== 0))
             return;
+        const [pointerX, pointerY] = this.getPointerAreaPosition(event);
         const currentNode = nodeByPointerGetter({
-            areaRect: this.areaRect,
-            areaTransform: this.areaTransform,
-            mouseEvent: event,
+            pointerX,
+            pointerY,
             nodes: this.nodes,
         });
         if (!currentNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             const currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -2315,138 +2328,202 @@ function initResize() {
         signal: abortController.signal,
     });
     document.addEventListener("visibilitychange", () => {
-        if (!document.hidden)
-            this.updateRect();
+        if (document.hidden)
+            return;
+        this.updateSize();
+        requestAnimationFrame(() => {
+            this.updateSize();
+        });
     }, { signal: abortController.signal });
     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();
-            }
+function initSelection() {
+    if (!this.area)
+        throw new Error("bad init data");
+    this.isSelecting = false;
+    this.selectionRect = null;
+    let selectedNodesSet = new Set();
+    let selectedLinksSet = new Set();
+    let localSelection = false;
+    function onMouseDown(event) {
+        if (event.button !== 0 || !event.shiftKey)
+            return;
+        if (!this.area)
+            return;
+        event.stopPropagation();
+        event.preventDefault();
+        const [startX, startY] = this.getPointerAreaPosition(event);
+        this.isSelecting = true;
+        localSelection = true;
+        this.selectionRect = { x1: startX, y1: startY, x2: startX, y2: startY };
+        selectedNodesSet = new Set();
+        selectedLinksSet = new Set();
+        const controller = new AbortController();
+        this.area.addEventListener("mousemove", onMouseMove.bind(this), {
+            signal: controller.signal,
         });
-        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);
+        this.area.addEventListener("mouseup", () => {
+            onMouseUp.call(this, controller);
+        }, {
+            signal: controller.signal,
+        });
+        window.addEventListener("keyup", (event) => {
+            if (event.key === "Shift") {
+                onMouseUp.call(this, controller);
+            }
+        }, { signal: controller.signal });
     }
-    if (this.forceSettings.forces && this.forceSettings.xForce) {
-        this.simulation.force("x", d3Force.forceX(this.forceSettings.xPosition).strength(this.forceSettings.xStrength));
+    function onMouseMove(event) {
+        if (!this.isSelecting || !this.selectionRect)
+            return;
+        event.stopPropagation();
+        const [x, y] = this.getPointerAreaPosition(event);
+        this.selectionRect.x2 = x;
+        this.selectionRect.y2 = y;
+        const rect = normalizeRect(this.selectionRect);
+        const newNodes = new Set();
+        for (let i = 0; i < this.nodes.length; i++) {
+            const node = this.nodes[i];
+            if (node.x == undefined || node.y == undefined)
+                continue;
+            if (node.visible === false)
+                continue;
+            const cache = this.nodeOptionsCache[i];
+            if (isNodeInRect(node, rect, cache)) {
+                newNodes.add(node);
+            }
+        }
+        const newLinks = new Set();
+        for (const link of this.links) {
+            const source = link.source;
+            const target = link.target;
+            if (newNodes.has(source) && newNodes.has(target)) {
+                newLinks.add(link);
+            }
+        }
+        for (const node of selectedNodesSet) {
+            if (!newNodes.has(node)) {
+                node._selected = false;
+                this.listeners.onSelectionOut?.call(this, node, undefined);
+            }
+        }
+        for (const link of selectedLinksSet) {
+            if (!newLinks.has(link)) {
+                link._selected = false;
+                this.listeners.onSelectionOut?.call(this, undefined, link);
+            }
+        }
+        for (const node of newNodes) {
+            if (!selectedNodesSet.has(node)) {
+                node._selected = true;
+                this.listeners.onSelectionIn?.call(this, node, undefined);
+            }
+        }
+        for (const link of newLinks) {
+            if (!selectedLinksSet.has(link)) {
+                link._selected = true;
+                this.listeners.onSelectionIn?.call(this, undefined, link);
+            }
+        }
+        selectedNodesSet = newNodes;
+        selectedLinksSet = newLinks;
+        this.draw();
     }
-    if (this.forceSettings.forces && this.forceSettings.yForce) {
-        this.simulation.force("y", d3Force.forceY(this.forceSettings.yPosition).strength(this.forceSettings.yStrength));
+    function onMouseUp(controller) {
+        controller.abort();
+        if (!this.isSelecting)
+            return;
+        const nodes = Array.from(selectedNodesSet);
+        const links = Array.from(selectedLinksSet);
+        for (const node of nodes) {
+            node._selected = false;
+        }
+        for (const link of links) {
+            link._selected = false;
+        }
+        this.isSelecting = false;
+        this.selectionRect = null;
+        selectedNodesSet = new Set();
+        selectedLinksSet = new Set();
+        this.listeners.onSelectionEnd?.call(this, nodes, links);
+        this.tick();
     }
-    if (this.forceSettings.forces && this.forceSettings.chargeForce) {
-        this.simulation.force("charge", d3Force.forceManyBody()
-            .strength(this.forceSettings.chargeStrength)
-            .distanceMax(Infinity)
-            .distanceMin(this.forceSettings.chargeDistanceMin));
+    function onSelectionEnd(event) {
+        if (localSelection) {
+            event.stopImmediatePropagation();
+            localSelection = false;
+        }
     }
-    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));
+    this.area.addEventListener("mousedown", onMouseDown.bind(this), {
+        signal: this.eventAbortController.signal,
+    });
+    this.area.addEventListener("click", onSelectionEnd, { signal: this.eventAbortController.signal });
+}
+function normalizeRect(rect) {
+    const x = Math.min(rect.x1, rect.x2);
+    const y = Math.min(rect.y1, rect.y2);
+    const width = Math.abs(rect.x2 - rect.x1);
+    const height = Math.abs(rect.y2 - rect.y1);
+    return { x, y, width, height };
+}
+function isNodeInRect(node, rect, cache) {
+    const nx = node.x;
+    const ny = node.y;
+    if (nx == undefined || ny == undefined)
+        return false;
+    if (cache?.shape === "circle") {
+        const r = cache.radius ?? 0;
+        const closestX = Math.max(rect.x, Math.min(nx, rect.x + rect.width));
+        const closestY = Math.max(rect.y, Math.min(ny, rect.y + rect.height));
+        const dx = nx - closestX;
+        const dy = ny - closestY;
+        return dx * dx + dy * dy <= r * r;
     }
-    initCollideForce.call(this, true);
+    const hw = (cache?.width ?? 0) / 2;
+    const hh = (cache?.height ?? 0) / 2;
+    return (nx - hw >= rect.x &&
+        nx + hw <= rect.x + rect.width &&
+        ny - hh >= rect.y &&
+        ny + hh <= rect.y + rect.height);
 }
-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 +2554,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 +2632,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 +2652,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 +2665,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 +2689,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 +2723,233 @@ 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)
+        .filter((event) => {
+        return !(event instanceof MouseEvent && event.shiftKey);
+    })
         .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);
 }
-
-class GraphCanvas {
+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 +2966,30 @@ class GraphCanvas {
     context;
     simulation;
     areaTransform = d3Zoom.zoomIdentity;
-    areaRect;
+    _translateExtent;
     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;
+    isSelecting = false;
+    selectionRect = null;
+    // protected areaRect: DOMRect | undefined;
+    get areaRect() {
+        return this.area?.getBoundingClientRect();
+    }
     get simulationWorking() {
         const simulationAlpha = this.simulation?.alpha?.() ?? 0;
         const simulationAlphaMin = this.simulation?.alphaMin?.() ?? 0;
@@ -2706,21 +3018,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, precompute = false) => {
         if (options.links != undefined)
             this.links = options.links;
         if (options.nodes != undefined)
             this.nodes = options.nodes;
-        if (options.nodes != undefined || options.links != undefined)
-            this.updateData(alpha, clearCache);
-    }
-    changeSettings(options, clearCache = true) {
+        if (options.nodes != undefined || options.links != undefined) {
+            this.updateData(alpha, clearCache, precompute);
+        }
+    };
+    changeSettings = (options, clearCache = true, precompute = false) => {
         if (options.graphSettings) {
             this.graphSettings = graphSettingsGetter(options.graphSettings, this.graphSettings);
             this.draw = initDraw.call(this);
@@ -2767,16 +3130,15 @@ class GraphCanvas {
             initCollideForce.call(this, true);
         }
         if (options.forceSettings) {
-            return void this.updateSimulation();
+            return void this.updateSimulation(precompute);
         }
         this.tick();
-    }
-    updateRect() {
-        if (!this.area)
-            return;
-        this.areaRect = this.area.getBoundingClientRect();
-    }
-    updateSize() {
+    };
+    updateRect = () => {
+        // if (!this.area) return;
+        // this.areaRect = this.area.getBoundingClientRect();
+    };
+    updateSize = () => {
         if (!this.area)
             return;
         const { width, height } = this.root.getBoundingClientRect();
@@ -2784,57 +3146,102 @@ class GraphCanvas {
         this.height = height;
         this.area.width = this.dpi * this.width;
         this.area.height = this.dpi * this.height;
-        this.areaRect = this.area.getBoundingClientRect();
+        this.updateRect();
         this.context = this.area.getContext("2d");
         if (!this.context)
             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 +3249,79 @@ class GraphCanvas {
         this.clearHTMLElements();
         this.clearState();
         this.clearCache(true);
-    }
-    clearHTMLElements() {
+    };
+    getPointerAreaPosition = (event) => {
+        let localX;
+        let localY;
+        if ("offsetX" in event) {
+            // localX = event.offsetX;
+            // localY = event.offsetY;
+            const rect = this.areaRect;
+            if (!rect)
+                return [0, 0];
+            localX = event.clientX - rect.left;
+            localY = event.clientY - rect.top;
+        }
+        else {
+            const rect = this.areaRect;
+            if (!rect)
+                return [0, 0];
+            const clientX = event.touches[0]?.clientX ?? event.changedTouches[0]?.clientX;
+            const clientY = event.touches[0]?.clientY ?? event.changedTouches[0]?.clientY;
+            localX = clientX - rect.left;
+            localY = clientY - rect.top;
+        }
+        const px = (localX - this.areaTransform.x) / this.areaTransform.k;
+        const py = (localY - this.areaTransform.y) / this.areaTransform.k;
+        return [px, py];
+    };
+    clearHTMLElements = () => {
         this.root.replaceChildren();
         this.area = undefined;
         this.context = undefined;
         this.container = undefined;
         this.eventAbortController.abort();
         this.eventAbortController = new AbortController();
-    }
-    updateSimulation() {
+    };
+    updateSimulation = (precompute = false) => {
         if (this.simulation) {
             initSimulationForces.call(this);
-            this.simulation.alpha(1);
-            this.simulation.restart();
+            this.restart(1, { precompute });
         }
-    }
-    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;
+        this.isSelecting = false;
+        this.selectionRect = null;
+    };
+    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);
+        initSelection.call(this);
+        initPointer.call(this);
+        updateNodeCache.call(this);
+        updateLinkCache.call(this);
+        this.tick();
+    };
+    updateData = (alpha = 0.5, clearCache = true, precompute = false) => {
         if (clearCache) {
             this.clearCache(clearCache);
         }
         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 +3331,95 @@ class GraphCanvas {
                 : 0)
                 .iterations(this.forceSettings.forces && this.forceSettings.linkForce
                 ? this.forceSettings.linkIterations
-                : 0))
-                .alpha(alpha)
-                .restart();
+                : 0));
+            this.restart(alpha, { precompute });
+            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 +3580,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 +4059,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 +4169,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 +4602,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 +4626,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;