@krainovsd/graph 0.14.0-beta.9 → 0.15.0-beta.1

package/lib/cjs/index.cjs

@@ -220,12 +220,24 @@ function nodeOptionsGetter(node) {
         textDraw: null,
         textExtraDraw: null,
         color: color(String(node.group ?? "_DEFAULT")),
-        textVisible: Boolean(this.areaTransform.k > this.nodeSettings.textScaleMin),
-        text: node.name ?? node.id.toString(),
         textShiftY,
         textSize,
     };
 }
+function nodeTextGetter(node, index) {
+    const cache = this.nodeOptionsCache[index];
+    if (cache?.shape == "text")
+        return null;
+    return this.areaTransform.k > this.nodeSettings.textScaleMin
+        ? (node.name ?? node.id.toString())
+        : null;
+}
+function nodeLabelGetter(node, index) {
+    const cache = this.nodeOptionsCache[index];
+    if (cache?.shape == "text")
+        return node.name ?? null;
+    return node.label ?? null;
+}
 function nodeTextSizeGetter(transform, nodeSettings) {
     let textSize = nodeSettings.textSizeMin;
     let textShiftY = nodeSettings.textShiftYMin;
@@ -314,6 +326,57 @@ function computeGraphBounds(nodes) {
     return { minX, minY, maxX, maxY };
 }
 
+function extractLinkPointIds(link) {
+    const sourceId = typeof link.source === "object" ? link.source.id : link.source;
+    const targetId = typeof link.target === "object" ? link.target.id : link.target;
+    return { sourceId, targetId };
+}
+
+function prepareGraph(opts) {
+    const nodes = opts.nodes;
+    const links = opts.links;
+    const map = new Map();
+    const neighbors = new Map();
+    for (let i = 0; i < links.length; i++) {
+        const link = links[i];
+        const { sourceId, targetId } = extractLinkPointIds(link);
+        const sources = neighbors.get(sourceId);
+        if (sources) {
+            sources.push(targetId);
+        }
+        else {
+            neighbors.set(sourceId, [targetId]);
+        }
+        const targets = neighbors.get(targetId);
+        if (targets) {
+            targets.push(sourceId);
+        }
+        else {
+            neighbors.set(targetId, [sourceId]);
+        }
+    }
+    for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        map.set(node.id, node);
+        node.index = i;
+        node.x ??= 0;
+        node.y ??= 0;
+        if (opts.neighbors) {
+            const n = neighbors.get(node.id);
+            if (n) {
+                node.neighbors = [...new Set(n)];
+                node.linkCount = node.neighbors.length;
+            }
+        }
+    }
+    for (let i = 0; i < links.length; i++) {
+        const link = links[i];
+        const { sourceId, targetId } = extractLinkPointIds(link);
+        link.source = map.get(sourceId) ?? link.source;
+        link.target = map.get(targetId) ?? link.target;
+    }
+}
+
 function pointerGetter(mouseEvent, areaRect, areaTransform) {
     let localX;
     let localY;
@@ -432,8 +495,9 @@ function linkIterationExtractor(link, i, links, state, option, optionConstantGet
 
 function nodeByPointerGetter({ pointerX, pointerY, nodes, }) {
     return d3Array.greatest(nodes, (node) => {
-        if (isOverlapsNode(node, pointerX, pointerY, undefined))
+        if (isOverlapsNode(node, pointerX, pointerY, undefined)) {
             return node.index;
+        }
     });
 }
 
@@ -455,6 +519,9 @@ function nodeIterationExtractor(node, i, nodes, state, option, optionConstantGet
             constantOptions = optionConstantGetter.call(state, node, i, nodes);
         else
             constantOptions = optionConstantGetter;
+        if (customOptions === undefined) {
+            return constantOptions;
+        }
         if (constantOptions &&
             typeof constantOptions === "object" &&
             !Array.isArray(constantOptions) &&
@@ -749,43 +816,39 @@ function animationByProgress(initial, additional, progress) {
 }
 
 const ADDITIONAL_VIEWPORT = 10;
-function isNodeVisible(opts) {
-    const left = -opts.transform.x / opts.transform.k;
-    const right = (opts.width - opts.transform.x) / opts.transform.k;
-    const top = -opts.transform.y / opts.transform.k;
-    const bottom = (opts.height - opts.transform.y) / opts.transform.k;
-    if (opts.node.x == undefined || opts.node.y == undefined)
+function isNodeVisible(node, area) {
+    if (node.x == undefined || node.y == undefined)
         return false;
-    switch (opts.node._shape) {
+    switch (node._shape) {
         case "circle": {
-            const radius = opts.node._radius ?? COMMON_SETTINGS.nodeRadius;
-            return (left < opts.node.x + radius + ADDITIONAL_VIEWPORT &&
-                opts.node.x - radius - ADDITIONAL_VIEWPORT < right &&
-                top < opts.node.y + radius + ADDITIONAL_VIEWPORT &&
-                opts.node.y - radius - ADDITIONAL_VIEWPORT < bottom);
+            const radius = node._radius ?? COMMON_SETTINGS.nodeRadius;
+            return (area.left < node.x + radius + ADDITIONAL_VIEWPORT &&
+                node.x - radius - ADDITIONAL_VIEWPORT < area.right &&
+                area.top < node.y + radius + ADDITIONAL_VIEWPORT &&
+                node.y - radius - ADDITIONAL_VIEWPORT < area.bottom);
         }
         case "square":
         case "text": {
-            const width = opts.node._width ?? COMMON_SETTINGS.nodeSize;
-            const height = opts.node._height ?? COMMON_SETTINGS.nodeSize;
-            return (left < opts.node.x + width + ADDITIONAL_VIEWPORT &&
-                opts.node.x - width - ADDITIONAL_VIEWPORT < right &&
-                top < opts.node.y + height + ADDITIONAL_VIEWPORT &&
-                opts.node.y - height - ADDITIONAL_VIEWPORT < bottom);
+            const width = node._width ?? COMMON_SETTINGS.nodeSize;
+            const height = node._height ?? COMMON_SETTINGS.nodeSize;
+            return (area.left < node.x + width + ADDITIONAL_VIEWPORT &&
+                node.x - width - ADDITIONAL_VIEWPORT < area.right &&
+                area.top < node.y + height + ADDITIONAL_VIEWPORT &&
+                node.y - height - ADDITIONAL_VIEWPORT < area.bottom);
         }
         default: {
-            const radius = opts.node._radius ?? COMMON_SETTINGS.nodeRadius;
-            return (left < opts.node.x + radius + ADDITIONAL_VIEWPORT &&
-                opts.node.x - radius - ADDITIONAL_VIEWPORT < right &&
-                top < opts.node.y + radius + ADDITIONAL_VIEWPORT &&
-                opts.node.y - radius - ADDITIONAL_VIEWPORT < bottom);
+            const radius = node._radius ?? COMMON_SETTINGS.nodeRadius;
+            return (area.left < node.x + radius + ADDITIONAL_VIEWPORT &&
+                node.x - radius - ADDITIONAL_VIEWPORT < area.right &&
+                area.top < node.y + radius + ADDITIONAL_VIEWPORT &&
+                node.y - radius - ADDITIONAL_VIEWPORT < area.bottom);
         }
     }
 }
 
 const FRAME_INTERVAL = 1000 / 60;
 function getParticlePosition(opts) {
-    const now = performance.now();
+    const now = opts.now;
     const particle = opts.particle;
     if (particle._lastTime == undefined) {
         particle._distanceTraveled = (opts.distance / opts.totalCount) * particle.index;
@@ -980,12 +1043,10 @@ function nodeHighlight(opts) {
     textShiftY = animationByProgress(textShiftY, opts.highlightForTextShiftYAdditional, opts.highlightProgress);
     /** Text Weight */
     textWeight = animationByProgress(textWeight, opts.highlightForTextWeightAdditional, opts.highlightProgress);
-    if (opts.nodeOptions.label) {
-        /** Label Size */
-        labelSize = animationByProgress(labelSize, opts.highlightForLabelSizingAdditional, opts.highlightProgress);
-        /** Label Weight */
-        labelWeight = animationByProgress(labelWeight, opts.highlightForLabelWeightAdditional, opts.highlightProgress);
-    }
+    /** Label Size */
+    labelSize = animationByProgress(labelSize, opts.highlightForLabelSizingAdditional, opts.highlightProgress);
+    /** Label Weight */
+    labelWeight = animationByProgress(labelWeight, opts.highlightForLabelWeightAdditional, opts.highlightProgress);
     return {
         color,
         borderColor,
@@ -1013,11 +1074,9 @@ function nodeFade(opts) {
     /** Text Alpha */
     const textAlphaMin = opts.highlightForTextFadingMin < textAlpha ? opts.highlightForTextFadingMin : textAlpha;
     textAlpha = animationByProgress(textAlphaMin, textAlpha - textAlphaMin, 1 - opts.highlightProgress);
-    if (opts.nodeOptions.label) {
-        /** Label Alpha */
-        const labelAlphaMin = opts.highlightForLabelFadingMin < labelAlpha ? opts.highlightForLabelFadingMin : labelAlpha;
-        labelAlpha = animationByProgress(labelAlphaMin, labelAlpha - labelAlphaMin, 1 - opts.highlightProgress);
-    }
+    /** Label Alpha */
+    const labelAlphaMin = opts.highlightForLabelFadingMin < labelAlpha ? opts.highlightForLabelFadingMin : labelAlpha;
+    labelAlpha = animationByProgress(labelAlphaMin, labelAlpha - labelAlphaMin, 1 - opts.highlightProgress);
     if (opts.highlightForNodeColorFading) {
         /** Color Fading */
         const colorRgb = extractRgb(colorToRgb(color));
@@ -1095,12 +1154,6 @@ function linkFade(opts) {
     return { alpha, arrowAlpha };
 }
 
-function extractLinkPointIds(link) {
-    const sourceId = typeof link.source === "object" ? link.source.id : link.source;
-    const targetId = typeof link.target === "object" ? link.target.id : link.target;
-    return { sourceId, targetId };
-}
-
 function isEmptyObject(obj) {
     for (const key in obj) {
         if (Object.hasOwn(obj, key)) {
@@ -1110,6 +1163,26 @@ function isEmptyObject(obj) {
     return true;
 }
 
+function precomputeGraph(opts) {
+    const div = document.createElement("div");
+    const graph = new GraphCanvas({
+        root: div,
+        nodes: opts.nodes,
+        links: opts.links,
+        nodeSettings: opts.nodeSettings,
+        linkSettings: opts.linkSettings,
+        forceSettings: {
+            ...opts.forceSettings,
+            precompute: true,
+            precomputeDisableForcesAfter: true,
+            precomputeMaxTicks: Infinity,
+            precomputeMaxTimeMs: opts.maxMs ?? Infinity,
+        },
+    });
+    graph.precompute();
+    graph.destroy();
+}
+
 const GRAPH_SETTINGS = {
     zoomAnimation: true,
     zoomAnimationDuration: 300,
@@ -1124,9 +1197,7 @@ const GRAPH_SETTINGS = {
     zoomInitial: null,
     showDrawTime: true,
     showDrawTimeEveryTick: false,
-};
-const PERFORMANCE_GRAPH_SETTINGS = {
-    ...GRAPH_SETTINGS,
+    maxFps: 120,
 };
 
 const HIGHLIGHT_SETTINGS = {
@@ -1187,9 +1258,6 @@ const HIGHLIGHT_SETTINGS = {
     highlightByLinkForArrowBorderColor: null,
     highlightByLinkForArrowBorderSizingAdditional: 0,
 };
-const PERFORMANCE_HIGHLIGHT_SETTINGS = {
-    ...HIGHLIGHT_SETTINGS,
-};
 
 const LINK_SETTINGS = {
     smartCache: true,
@@ -1220,14 +1288,6 @@ const LINK_OPTIONS = {
     particleBorderWidth: 0.1,
     particleRadius: 0.5,
 };
-const PERFORMANCE_LINK_SETTINGS = {
-    ...LINK_SETTINGS,
-    particles: false,
-    prettyDraw: false,
-};
-const PERFORMANCE_LINK_OPTIONS = {
-    ...LINK_OPTIONS,
-};
 
 const NODE_SETTINGS = {
     smartCache: true,
@@ -1272,7 +1332,6 @@ const NODE_OPTIONS = {
     textStyle: "normal",
     textWeight: 500,
     textGap: 0,
-    label: null,
     labelAlpha: 1,
     labelAlign: "center",
     labelColor: "#ffffff",
@@ -1283,14 +1342,6 @@ 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",
@@ -1326,7 +1377,7 @@ function initArea() {
     }
 }
 
-function initDnd() {
+function initDnd(staticMode = false) {
     if (!this.area || !this.nodes)
         throw new Error("bad init data");
     const dragHandler = d3Drag.drag()
@@ -1354,8 +1405,20 @@ function initDnd() {
         const mouseEvent = event.sourceEvent;
         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));
+            const x = Math.max(this._translateExtent[0][0], Math.min(this._translateExtent[1][0], pointerX));
+            const y = Math.max(this._translateExtent[0][1], Math.min(this._translateExtent[1][1], pointerY));
+            if (staticMode) {
+                event.subject.x = x;
+                event.subject.y = y;
+            }
+            else {
+                event.subject.fx = x;
+                event.subject.fy = y;
+            }
+        }
+        else if (staticMode) {
+            event.subject.x = pointerX;
+            event.subject.y = pointerY;
         }
         else {
             event.subject.fx = pointerX;
@@ -1424,7 +1487,7 @@ function adjustPoint(x, y, xControl, yControl, radius) {
     return [x + (dxToControl / distToControl) * radius, y + (dyToControl / distToControl) * radius];
 }
 
-function getDrawLink() {
+function getDrawLink(linkBatch, particleBatch, arrowBatch, now) {
     return function drawLink(link, index) {
         if (!this.context ||
             typeof link.source !== "object" ||
@@ -1533,10 +1596,9 @@ function getDrawLink() {
             }
         }
         /** Link */
-        this.context.beginPath();
-        this.context.globalAlpha = alpha;
-        this.context.strokeStyle = color;
-        this.context.lineWidth = width;
+        const linkBatchKey = `${alpha}|${color}|${width}`;
+        linkBatch[linkBatchKey] ??= [];
+        const linkGroup = linkBatch[linkBatchKey];
         let xStart = link.source.x;
         let yStart = link.source.y;
         let xEnd = link.target.x;
@@ -1566,9 +1628,7 @@ function getDrawLink() {
             link._y2 = yEnd;
             link._ax = xEndArrow;
             link._ay = yEndArrow;
-            this.context.moveTo(xStart, yStart);
-            this.context.lineTo(xEnd, yEnd);
-            this.context.stroke();
+            linkGroup.push({ curve: false, xStart, yStart, xEnd, yEnd, xControl, yControl });
         }
         else {
             const position = calculateCurveLinkPositionByNode(xStart, yStart, xEnd, yEnd, link.source, link.target, link._groupIndex ?? 0, isHasArrow ? arrowSize : 0);
@@ -1589,14 +1649,7 @@ function getDrawLink() {
             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);
-            this.context.setLineDash([]);
-            // if (isDashed) {
-            // this.context.setLineDash([10, 5]);
-            // }
-            this.context.stroke();
+            linkGroup.push({ curve: true, xStart, yStart, xEnd, yEnd, xControl, yControl });
         }
         /** Particle */
         if (this.linkSettings.particles && (currentLinkHighlighted || currentNodeHighlighted)) {
@@ -1612,6 +1665,9 @@ function getDrawLink() {
                 }
                 this.particles[index] = particles;
             }
+            const particleBatchKey = `${linkOptions.particleBorderColor}|${linkOptions.particleBorderWidth}|${linkOptions.particleColor}`;
+            particleBatch[particleBatchKey] ??= [];
+            const particleGroup = particleBatch[particleBatchKey];
             this.particles[index].forEach((particle, _, particles) => {
                 if (!this.context)
                     return;
@@ -1626,17 +1682,10 @@ function getDrawLink() {
                     xControl,
                     yControl,
                     speed,
+                    now,
                 });
                 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();
-                    }
+                    particleGroup.push({ x: particle.x, y: particle.y, r: linkOptions.particleRadius });
                 }
             });
         }
@@ -1656,19 +1705,15 @@ function getDrawLink() {
                     angle = Math.atan2(tangentY, tangentX);
                 }
             }
-            this.context.beginPath();
-            this.context.globalAlpha = arrowAlpha;
-            this.context.strokeStyle = arrowBorderColor;
-            this.context.lineWidth = arrowBorderWidth;
-            this.context.fillStyle = arrowColor;
-            this.context.moveTo(xEndArrow, yEndArrow);
-            this.context.lineTo(xEndArrow - arrowSize * Math.cos(angle - Math.PI / 6), yEndArrow - arrowSize * Math.sin(angle - Math.PI / 6));
-            this.context.lineTo(xEndArrow - arrowSize * Math.cos(angle + Math.PI / 6), yEndArrow - arrowSize * Math.sin(angle + Math.PI / 6));
-            this.context.closePath();
-            this.context.fill();
-            if (arrowBorderWidth > 0) {
-                this.context.stroke();
-            }
+            const arrowBatchKey = `${arrowAlpha}|${arrowBorderColor}|${arrowBorderWidth}|${arrowColor}`;
+            arrowBatch[arrowBatchKey] ??= [];
+            const arrowGroup = arrowBatch[arrowBatchKey];
+            arrowGroup.push({
+                x: xEndArrow,
+                y: yEndArrow,
+                size: arrowSize,
+                angle,
+            });
         }
         if (linkOptions.drawExtraLink) {
             linkOptions.drawExtraLink.call(this, link, { ...linkOptions, alpha });
@@ -1676,52 +1721,7 @@ function getDrawLink() {
     };
 }
 
-const SPACE = " ";
-function drawText({ context, textAlign, textColor, textFont, textStyle, textGap, textWeight, textSize, x, y, lines, }) {
-    context.font = `${textStyle} normal ${textWeight} ${textSize}px ${textFont}`;
-    context.fillStyle = textColor;
-    context.textAlign = textAlign;
-    lines.forEach((line, index) => {
-        context.fillText(line, x, y + index * textSize + index * textGap);
-    });
-}
-function getTextLines({ context, textAlign, textColor, textFont, textStyle, textWeight, textSize, text, maxWidth, }) {
-    context.font = `${textStyle} normal ${textWeight} ${textSize}px ${textFont}`;
-    context.fillStyle = textColor;
-    context.textAlign = textAlign;
-    const spaceWidth = context.measureText(" ").width;
-    const lines = [];
-    let lineWidth = 0;
-    let line = "";
-    let currentMaxSize = 0;
-    for (const word of text.split(" ")) {
-        const size = context.measureText(word).width;
-        lineWidth += size + spaceWidth;
-        if (line === "") {
-            line = word;
-            continue;
-        }
-        if (lineWidth > maxWidth) {
-            const initialSize = lineWidth - size - spaceWidth;
-            if (initialSize > currentMaxSize)
-                currentMaxSize = initialSize;
-            lineWidth = size;
-            lines.push(line);
-            line = word;
-        }
-        else {
-            lineWidth += spaceWidth;
-            line += `${SPACE}${word}`;
-        }
-    }
-    if (line !== "")
-        lines.push(line);
-    if (lineWidth > currentMaxSize)
-        currentMaxSize = lineWidth;
-    return { lines, currentMaxSize };
-}
-
-function getDrawNode(nodeRenders, textRenders) {
+function getDrawNode(nodeBatch, nodeImageBatch, textBatch, deferredNodeRender, deferredTextRender, area) {
     return function drawNode(node, index) {
         if (!this.context || !node.x || !node.y)
             return;
@@ -1735,12 +1735,12 @@ function getDrawNode(nodeRenders, textRenders) {
         if (!nodeOptions)
             return;
         if (nodeOptions.nodeDraw && nodeOptions.textDraw) {
-            nodeRenders.push(() => {
+            deferredNodeRender.push(() => {
                 if (nodeOptions.nodeDraw) {
                     nodeOptions.nodeDraw.bind(this)(node, nodeOptions);
                 }
             });
-            textRenders.push(() => {
+            deferredTextRender.push(() => {
                 if (nodeOptions.textDraw) {
                     nodeOptions.textDraw.bind(this)(node, nodeOptions);
                 }
@@ -1860,7 +1860,6 @@ function getDrawNode(nodeRenders, textRenders) {
                 labelWeight = highlightOptions.labelWeight;
             }
         }
-        /** Node parameters */
         node._radius = radius;
         node._borderWidth = borderWidth;
         node._width = width;
@@ -1870,138 +1869,55 @@ function getDrawNode(nodeRenders, textRenders) {
                 ? Math.min(nodeOptions.borderRadius, nodeOptions.width / 2, nodeOptions.height / 2)
                 : 0;
         node._shape = nodeOptions.shape ?? "circle";
-        /** Node Visibility */
-        if (!isNodeVisible({
-            height: this.height,
-            width: this.width,
-            transform: this.areaTransform,
-            node,
-        })) {
+        if (!isNodeVisible(node, area)) {
             node._visible = false;
             return;
         }
         node._visible = true;
-        /** Node draw */
-        nodeRenders.push(() => {
-            if (!this.context || !node.x || !node.y)
-                return;
-            this.context.beginPath();
-            this.context.globalAlpha = alpha;
-            this.context.lineWidth = borderWidth;
-            this.context.strokeStyle = borderColor;
-            this.context.fillStyle = color;
-            const labelLines = this.cachedNodeLabel[index];
-            switch (nodeOptions.shape) {
-                case "circle": {
-                    if (!node.image) {
-                        this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
-                        this.context.fill();
-                        if (borderWidth > 0) {
-                            this.context.stroke();
-                        }
-                    }
-                    else {
-                        this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
-                        this.context.closePath();
-                        this.context.save();
-                        this.context.clip();
-                        this.context.drawImage(node.image, node.x - radius, node.y - radius, radius * 2, radius * 2);
-                        this.context.restore();
-                        if (borderWidth > 0) {
-                            this.context.stroke();
-                        }
-                    }
-                    if (node.label && labelLines) {
-                        this.context.globalAlpha = labelAlpha;
-                        drawText({
-                            context: this.context,
-                            lines: labelLines,
-                            textAlign: nodeOptions.labelAlign,
-                            textColor: nodeOptions.labelColor,
-                            textFont: nodeOptions.labelFont,
-                            textGap: nodeOptions.labelGap,
-                            textSize: labelSize,
-                            textStyle: nodeOptions.labelStyle,
-                            textWeight: labelWeight,
-                            x: node.x,
-                            y: node.y + labelSize / 3,
-                        });
-                    }
-                    break;
-                }
-                case "square": {
-                    if (!node.image) {
-                        this.context.roundRect(node.x - width / 2, node.y - height / 2, width, height, node._borderRadius);
-                        this.context.fill();
-                        if (borderWidth > 0) {
-                            this.context.stroke();
-                        }
-                    }
-                    else {
-                        this.context.roundRect(node.x - width / 2, node.y - height / 2, width, height, node._borderRadius);
-                        this.context.closePath();
-                        this.context.save();
-                        this.context.clip();
-                        this.context.drawImage(node.image, node.x - width / 2, node.y - height / 2, width, height);
-                        this.context.restore();
-                        if (borderWidth > 0) {
-                            this.context.stroke();
-                        }
-                    }
-                    if (node.label && labelLines) {
-                        this.context.globalAlpha = labelAlpha;
-                        drawText({
-                            context: this.context,
-                            lines: labelLines,
-                            textAlign: nodeOptions.labelAlign,
-                            textColor: nodeOptions.labelColor,
-                            textFont: nodeOptions.labelFont,
-                            textGap: nodeOptions.labelGap,
-                            textSize: labelSize,
-                            textStyle: nodeOptions.labelStyle,
-                            textWeight: labelWeight,
-                            x: node.x,
-                            y: node.y + labelSize / 3,
-                        });
-                    }
-                    break;
-                }
-                case "text": {
-                    if (this.nodeSettings.textNodeDebug) {
-                        this.context.strokeRect(node.x - width / 2, node.y - height / 2, width, height);
-                    }
-                    if (nodeOptions.label && labelLines)
-                        drawText({
-                            lines: labelLines,
-                            context: this.context,
-                            textAlign: nodeOptions.labelAlign,
-                            textColor: nodeOptions.labelColor,
-                            textFont: nodeOptions.labelFont,
-                            textSize: labelSize,
-                            x: node.x,
-                            y: node.y + textSize / 4 - (labelLines.length - 1) * (textSize / 2),
-                            textStyle: nodeOptions.labelStyle,
-                            textWeight,
-                            textGap: nodeOptions.labelGap,
-                        });
-                    this.context.fill();
-                    if (borderWidth > 0) {
-                        this.context.stroke();
-                    }
-                    break;
-                }
-                default: {
-                    this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
-                    this.context.fill();
-                    if (borderWidth > 0) {
-                        this.context.stroke();
-                    }
-                    break;
-                }
-            }
+        const nodeBatchKey = `${alpha}|${borderColor}|${borderWidth}|${color}`;
+        let nodeGroup;
+        if (!node.image) {
+            nodeBatch[nodeBatchKey] ??= [];
+            nodeGroup = nodeBatch[nodeBatchKey];
+        }
+        else {
+            nodeImageBatch[nodeBatchKey] ??= [];
+            nodeGroup = nodeImageBatch[nodeBatchKey];
+        }
+        nodeGroup.push({
+            shape: nodeOptions.shape,
+            x: node.x,
+            y: node.y,
+            radius,
+            width,
+            height,
+            image: node.image,
         });
+        const labelLines = this.cachedNodeLabel[index];
+        if (labelLines && labelLines.length > 0) {
+            let y = node.y + labelSize / 3;
+            let weight = labelWeight;
+            if (nodeOptions.shape == "text") {
+                y = node.y + textSize / 4 - (labelLines.length - 1) * (textSize / 2);
+                weight = textWeight;
+            }
+            const font = `${nodeOptions.labelStyle} normal ${weight} ${labelSize}px ${nodeOptions.labelFont}`;
+            textBatch[font] ??= {};
+            const fontBatch = textBatch[font];
+            const textBatchKey = `${labelAlpha}|${nodeOptions.labelAlign}|${nodeOptions.labelColor}`;
+            fontBatch[textBatchKey] ??= [];
+            const textGroup = fontBatch[textBatchKey];
+            for (let i = 0; i < labelLines.length; i++) {
+                const line = labelLines[i];
+                textGroup.push({
+                    text: line,
+                    x: node.x,
+                    y: y + i * textSize + i * nodeOptions.textGap,
+                });
+            }
+        }
         if (nodeOptions.nodeExtraDraw) {
-            nodeRenders.push(() => {
+            deferredNodeRender.push(() => {
                 nodeOptions?.nodeExtraDraw?.bind?.(this)?.(node, {
                     ...nodeOptions,
                     radius,
@@ -2015,12 +1931,11 @@ function getDrawNode(nodeRenders, textRenders) {
                 });
             });
         }
-        /** Text draw */
         const textLines = this.cachedNodeText[index];
-        if (nodeOptions.textVisible && nodeOptions.text && textLines) {
-            textRenders.push(() => {
-                if (nodeOptions.textDraw) {
-                    nodeOptions.textDraw.bind(this)(node, {
+        if (textLines && textLines.length > 0) {
+            if (nodeOptions.textDraw) {
+                deferredTextRender.push(() => {
+                    nodeOptions?.textDraw?.bind?.(this)?.(node, {
                         ...nodeOptions,
                         radius,
                         alpha,
@@ -2031,34 +1946,32 @@ function getDrawNode(nodeRenders, textRenders) {
                         textShiftY,
                         textWeight,
                     });
-                    return;
-                }
-                if (!this.context || !node.x || !node.y || !nodeOptions.text)
-                    return;
-                this.context.beginPath();
-                this.context.globalAlpha = textAlpha;
-                let y = node.y + textShiftY;
-                if (nodeOptions.shape === "circle") {
-                    y += radius;
-                }
-                if (nodeOptions.shape === "square" || nodeOptions.shape === "text") {
-                    y += height / 2;
-                }
-                drawText({
-                    lines: textLines,
-                    context: this.context,
-                    textAlign: nodeOptions.textAlign,
-                    textColor: nodeOptions.textColor,
-                    textFont: nodeOptions.textFont,
-                    textSize,
+                });
+            }
+            let y = node.y + textShiftY;
+            if (nodeOptions.shape === "circle") {
+                y += radius;
+            }
+            if (nodeOptions.shape === "square" || nodeOptions.shape === "text") {
+                y += height / 2;
+            }
+            const font = `${nodeOptions.textStyle} normal ${textWeight} ${textSize}px ${nodeOptions.textFont}`;
+            textBatch[font] ??= {};
+            const fontBatch = textBatch[font];
+            const textBatchKey = `${textAlpha}|${nodeOptions.textAlign}|${nodeOptions.textColor}`;
+            fontBatch[textBatchKey] ??= [];
+            const textGroup = fontBatch[textBatchKey];
+            for (let i = 0; i < textLines.length; i++) {
+                const line = textLines[i];
+                textGroup.push({
+                    text: line,
                     x: node.x + textShiftX,
-                    y,
-                    textStyle: nodeOptions.textStyle,
-                    textWeight,
-                    textGap: nodeOptions.textGap,
+                    y: y + i * textSize + i * nodeOptions.textGap,
                 });
-                if (nodeOptions.textExtraDraw) {
-                    nodeOptions.textExtraDraw.bind(this)(node, {
+            }
+            if (nodeOptions.textExtraDraw) {
+                deferredTextRender.push(() => {
+                    nodeOptions?.textExtraDraw?.bind?.(this)?.(node, {
                         ...nodeOptions,
                         radius,
                         alpha,
@@ -2069,13 +1982,39 @@ function getDrawNode(nodeRenders, textRenders) {
                         textShiftY,
                         textWeight,
                     });
-                }
-            });
+                });
+            }
         }
     };
 }
 
+const COS_PI_6 = 0.8660254037844386;
+const SIN_PI_6 = 0.5;
+function clearBatch(batch) {
+    // eslint-disable-next-line guard-for-in
+    for (const key in batch) {
+        batch[key].length = 0;
+    }
+}
+function clearNestedBatch(batch) {
+    // eslint-disable-next-line guard-for-in
+    for (const outerKey in batch) {
+        const inner = batch[outerKey];
+        // eslint-disable-next-line guard-for-in
+        for (const innerKey in inner) {
+            inner[innerKey].length = 0;
+        }
+    }
+}
 function initDraw() {
+    const nodeBatch = {};
+    const nodeImageBatch = {};
+    const textBatch = {};
+    const deferredNodeDraw = [];
+    const deferredTextDraw = [];
+    const linkBatch = {};
+    const particleBatch = {};
+    const arrowBatch = {};
     function draw() {
         if (!this.context)
             return;
@@ -2083,18 +2022,196 @@ function initDraw() {
             this.listeners.onDraw.call(this);
             return;
         }
+        clearBatch(nodeBatch);
+        clearBatch(nodeImageBatch);
+        clearNestedBatch(textBatch);
+        deferredNodeDraw.length = 0;
+        deferredTextDraw.length = 0;
+        clearBatch(linkBatch);
+        clearBatch(particleBatch);
+        clearBatch(arrowBatch);
+        const k = this.areaTransform.k;
+        const area = {
+            left: -this.areaTransform.x / k,
+            right: (this.width - this.areaTransform.x) / k,
+            top: -this.areaTransform.y / k,
+            bottom: (this.height - this.areaTransform.y) / k,
+        };
         this.context.save();
         this.context.clearRect(0, 0, this.width, this.height);
         this.context.translate(this.areaTransform.x, this.areaTransform.y);
         this.context.scale(this.areaTransform.k, this.areaTransform.k);
-        const textRenders = [];
-        const nodeRenders = [];
-        this.nodes.forEach(getDrawNode(nodeRenders, textRenders).bind(this));
-        /** links */
-        this.links.forEach(getDrawLink().bind(this));
-        /** nodes */
-        nodeRenders.forEach((render) => render());
-        textRenders.forEach((render) => render());
+        this.nodes.forEach(getDrawNode(nodeBatch, nodeImageBatch, textBatch, deferredNodeDraw, deferredTextDraw, area), this);
+        this.links.forEach(getDrawLink(linkBatch, particleBatch, arrowBatch, performance.now()), this);
+        const linkKeys = Object.keys(linkBatch);
+        for (let i = 0; i < linkKeys.length; i++) {
+            const key = linkKeys[i];
+            const group = linkBatch[key];
+            const [alpha, color, width] = key.split("|");
+            this.context.beginPath();
+            this.context.globalAlpha = +alpha;
+            this.context.strokeStyle = color;
+            this.context.lineWidth = +width;
+            this.context.setLineDash([]);
+            for (let j = 0; j < group.length; j++) {
+                const item = group[j];
+                if (!item.curve) {
+                    this.context.moveTo(item.xStart, item.yStart);
+                    this.context.lineTo(item.xEnd, item.yEnd);
+                }
+                else {
+                    this.context.moveTo(item.xStart, item.yStart);
+                    this.context.quadraticCurveTo(item.xControl, item.yControl, item.xEnd, item.yEnd);
+                }
+            }
+            this.context.stroke();
+        }
+        const particleKeys = Object.keys(particleBatch);
+        for (let i = 0; i < particleKeys.length; i++) {
+            const key = particleKeys[i];
+            const group = particleBatch[key];
+            const [bcolor, width, color] = key.split("|");
+            this.context.beginPath();
+            this.context.globalAlpha = 1;
+            this.context.strokeStyle = bcolor;
+            this.context.lineWidth = +width;
+            this.context.fillStyle = color;
+            for (let j = 0; j < group.length; j++) {
+                const item = group[j];
+                this.context.moveTo(item.x + item.r, item.y);
+                this.context.arc(item.x, item.y, item.r, 0, Math.PI * 2);
+            }
+            this.context.fill();
+            if (+width > 0) {
+                this.context.stroke();
+            }
+        }
+        const arrowKeys = Object.keys(arrowBatch);
+        for (let i = 0; i < arrowKeys.length; i++) {
+            const key = arrowKeys[i];
+            const group = arrowBatch[key];
+            const [alpha, bcolor, width, color] = key.split("|");
+            this.context.beginPath();
+            this.context.globalAlpha = +alpha;
+            this.context.strokeStyle = bcolor;
+            this.context.lineWidth = +width;
+            this.context.fillStyle = color;
+            for (let j = 0; j < group.length; j++) {
+                const item = group[j];
+                this.context.moveTo(item.x, item.y);
+                const cosA = Math.cos(item.angle);
+                const sinA = Math.sin(item.angle);
+                const cos1 = cosA * COS_PI_6 + sinA * SIN_PI_6;
+                const sin1 = sinA * COS_PI_6 - cosA * SIN_PI_6;
+                const cos2 = cosA * COS_PI_6 - sinA * SIN_PI_6;
+                const sin2 = sinA * COS_PI_6 + cosA * SIN_PI_6;
+                this.context.lineTo(item.x - item.size * cos1, item.y - item.size * sin1);
+                this.context.lineTo(item.x - item.size * cos2, item.y - item.size * sin2);
+                this.context.closePath();
+            }
+            this.context.fill();
+            if (+width > 0) {
+                this.context.stroke();
+            }
+        }
+        const nodeKeys = Object.keys(nodeBatch);
+        for (let i = 0; i < nodeKeys.length; i++) {
+            const key = nodeKeys[i];
+            const group = nodeBatch[key];
+            const [alpha, bcolor, width, color] = key.split("|");
+            this.context.beginPath();
+            this.context.globalAlpha = +alpha;
+            this.context.strokeStyle = bcolor;
+            this.context.lineWidth = +width;
+            this.context.fillStyle = color;
+            for (let j = 0; j < group.length; j++) {
+                const item = group[j];
+                switch (item.shape) {
+                    case "circle": {
+                        this.context.moveTo(item.x + item.radius, item.y);
+                        this.context.arc(item.x, item.y, item.radius, 0, 2 * Math.PI);
+                        break;
+                    }
+                    case "square": {
+                        this.context.roundRect(item.x - item.width / 2, item.y - item.height / 2, item.width, item.height, item.radius);
+                        break;
+                    }
+                    case "text": {
+                        if (this.nodeSettings.textNodeDebug) {
+                            this.context.rect(item.x - item.width / 2, item.y - item.height / 2, item.width, item.height);
+                        }
+                        break;
+                    }
+                }
+            }
+            this.context.fill();
+            if (+width > 0) {
+                this.context.stroke();
+            }
+        }
+        const nodeImageKeys = Object.keys(nodeImageBatch);
+        for (let i = 0; i < nodeImageKeys.length; i++) {
+            const key = nodeImageKeys[i];
+            const group = nodeImageBatch[key];
+            const [alpha, bcolor, width, color] = key.split("|");
+            this.context.globalAlpha = +alpha;
+            this.context.strokeStyle = bcolor;
+            this.context.lineWidth = +width;
+            this.context.fillStyle = color;
+            for (let j = 0; j < group.length; j++) {
+                const item = group[j];
+                if (!item.image)
+                    continue;
+                this.context.beginPath();
+                switch (item.shape) {
+                    case "circle": {
+                        this.context.arc(item.x, item.y, item.radius, 0, 2 * Math.PI);
+                        this.context.closePath();
+                        this.context.save();
+                        this.context.clip();
+                        this.context.drawImage(item.image, item.x - item.radius, item.y - item.radius, item.radius * 2, item.radius * 2);
+                        this.context.restore();
+                        break;
+                    }
+                    case "square": {
+                        this.context.roundRect(item.x - item.width / 2, item.y - item.height / 2, item.width, item.height, item.radius);
+                        this.context.closePath();
+                        this.context.save();
+                        this.context.clip();
+                        this.context.drawImage(item.image, item.x - item.width / 2, item.y - item.height / 2, item.width, item.height);
+                        this.context.restore();
+                        break;
+                    }
+                    default: {
+                        continue;
+                    }
+                }
+                if (+width > 0) {
+                    this.context.stroke();
+                }
+            }
+        }
+        const textKeys = Object.keys(textBatch);
+        for (let i = 0; i < textKeys.length; i++) {
+            const font = textKeys[i];
+            const fontGroup = textBatch[font];
+            const textInnerKeys = Object.keys(fontGroup);
+            this.context.font = font;
+            for (let j = 0; j < textInnerKeys.length; j++) {
+                const key = textInnerKeys[j];
+                const group = fontGroup[key];
+                const [alpha, align, color] = key.split("|");
+                this.context.globalAlpha = +alpha;
+                this.context.textAlign = align;
+                this.context.fillStyle = color;
+                for (let k = 0; k < group.length; k++) {
+                    const item = group[k];
+                    this.context.fillText(item.text, item.x, item.y);
+                }
+            }
+        }
+        deferredNodeDraw.forEach((draw) => draw());
+        deferredTextDraw.forEach((draw) => draw());
         this.context.restore();
         /** selection rectangle */
         if (this.isSelecting && this.selectionRect) {
@@ -2123,6 +2240,7 @@ function initPointer() {
     function onHover(event) {
         if (!this.area || this.isSelecting)
             return;
+        const [pointerX, pointerY] = this.getPointerAreaPosition(event);
         let currentNode;
         let currentLink;
         const checkHighlightNode = this.highlightSettings.highlightByHoverNode && !this.isDragging;
@@ -2130,7 +2248,6 @@ function initPointer() {
         let highlightNode = true;
         let highlightLink = true;
         if (checkHighlightNode) {
-            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentNode = nodeByPointerGetter({
                 pointerX,
                 pointerY,
@@ -2143,7 +2260,6 @@ function initPointer() {
             this.area.style.cursor = "pointer";
         }
         else if (checkHighlightLink) {
-            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentLink = linkByPointerGetter({
                 pointerX,
                 pointerY,
@@ -2167,7 +2283,6 @@ function initPointer() {
         if (!this.listeners.onHover)
             return;
         if (!currentNode && !checkHighlightNode) {
-            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentNode = nodeByPointerGetter({
                 pointerX,
                 pointerY,
@@ -2175,7 +2290,6 @@ function initPointer() {
             });
         }
         if (!currentNode && (!checkHighlightNode || (!checkHighlightLink && !currentLink))) {
-            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentLink = linkByPointerGetter({
                 pointerX,
                 pointerY,
@@ -2561,6 +2675,43 @@ function indexToPosition(n) {
     // return n & 1 ? -(n >> 1) : n >> 1;
 }
 
+const SPACE = " ";
+function getTextLines({ context, textAlign, textColor, textFont, textStyle, textWeight, textSize, text, maxWidth, }) {
+    context.font = `${textStyle} normal ${textWeight} ${textSize}px ${textFont}`;
+    context.fillStyle = textColor;
+    context.textAlign = textAlign;
+    const spaceWidth = context.measureText(" ").width;
+    const lines = [];
+    let lineWidth = 0;
+    let line = "";
+    let currentMaxSize = 0;
+    for (const word of text.split(" ")) {
+        const size = context.measureText(word).width;
+        lineWidth += size + spaceWidth;
+        if (line === "") {
+            line = word;
+            continue;
+        }
+        if (lineWidth > maxWidth) {
+            const initialSize = lineWidth - size - spaceWidth;
+            if (initialSize > currentMaxSize)
+                currentMaxSize = initialSize;
+            lineWidth = size;
+            lines.push(line);
+            line = word;
+        }
+        else {
+            lineWidth += spaceWidth;
+            line += `${SPACE}${word}`;
+        }
+    }
+    if (line !== "")
+        lines.push(line);
+    if (lineWidth > currentMaxSize)
+        currentMaxSize = lineWidth;
+    return { lines, currentMaxSize };
+}
+
 function updateNodeCache() {
     if (!this.context)
         return;
@@ -2641,30 +2792,25 @@ function updateNodeCache() {
             nodeOptions.labelSize = labelSize;
             this.nodeOptionsCache[i] = nodeOptions;
         }
-        let nodeOptions = this.nodeOptionsCache[i];
+        const nodeOptions = this.nodeOptionsCache[i];
         if (!nodeOptions)
             continue;
         /** 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;
-            }
+            const label = nodeIterationExtractor(node, i, this.nodes, this, this.nodeSettings.label, nodeLabelGetter);
             /** label in not text shape */
-            if (nodeOptions.shape !== "text" && nodeOptions.label) {
+            if (nodeOptions.shape !== "text" && label) {
                 this.context.font = `${nodeOptions.labelStyle} normal ${nodeOptions.labelWeight} ${nodeOptions.labelSize}px ${nodeOptions.labelFont}`;
                 this.context.fillStyle = nodeOptions.labelColor;
                 this.context.textAlign = nodeOptions.labelAlign;
                 if (nodeOptions.labelWidth == undefined ||
-                    this.context.measureText(nodeOptions.label).width <= nodeOptions.labelWidth) {
-                    this.cachedNodeLabel[i] = [nodeOptions.label];
+                    this.context.measureText(label).width <= nodeOptions.labelWidth) {
+                    this.cachedNodeLabel[i] = [label];
                 }
                 const { lines } = getTextLines({
                     context: this.context,
                     maxWidth: nodeOptions.labelWidth,
-                    text: nodeOptions.label,
+                    text: label,
                     textAlign: nodeOptions.labelAlign,
                     textColor: nodeOptions.labelColor,
                     textFont: nodeOptions.labelFont,
@@ -2675,10 +2821,10 @@ function updateNodeCache() {
                 this.cachedNodeLabel[i] = lines;
                 /** label in text shape */
             }
-            else if (nodeOptions.shape === "text" && nodeOptions.label) {
+            else if (nodeOptions.shape === "text" && label) {
                 const textInfo = getTextLines({
                     context: this.context,
-                    text: nodeOptions.label,
+                    text: label,
                     textAlign: nodeOptions.labelAlign,
                     textColor: nodeOptions.labelColor,
                     textFont: nodeOptions.labelFont,
@@ -2704,17 +2850,10 @@ function updateNodeCache() {
         }
         /** 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) {
+            const text = nodeIterationExtractor(node, i, this.nodes, this, this.nodeSettings.text, nodeTextGetter);
+            if (!text) {
                 this.cachedNodeText[i] = [];
-                return;
+                continue;
             }
             this.context.font = `${nodeOptions.textStyle} normal ${nodeOptions.textWeight} ${nodeOptions.textSize}px ${nodeOptions.textFont}`;
             this.context.fillStyle = nodeOptions.textColor;
@@ -2722,7 +2861,7 @@ function updateNodeCache() {
             const { lines } = getTextLines({
                 context: this.context,
                 maxWidth: nodeOptions.textWidth,
-                text: nodeOptions.text,
+                text,
                 textAlign: nodeOptions.textAlign,
                 textColor: nodeOptions.textColor,
                 textFont: nodeOptions.textFont,
@@ -3181,6 +3320,7 @@ class GraphCanvas {
     areaTransform = d3Zoom.zoomIdentity;
     _translateExtent;
     draw;
+    instantDraw;
     eventAbortController;
     cachedNodeText = [];
     cachedNodeLabel = [];
@@ -3225,8 +3365,9 @@ class GraphCanvas {
         this.links = links;
         this.height = 0;
         this.width = 0;
-        this.draw = initDraw.call(this);
-        this.init();
+        const draw = initDraw.call(this);
+        this.draw = this.initSmartDraw(draw);
+        this.instantDraw = draw;
     }
     get dpi() {
         return devicePixelRatio;
@@ -3302,7 +3443,9 @@ class GraphCanvas {
     changeSettings = (options, clearCache = true, precompute = false) => {
         if (options.graphSettings) {
             this.graphSettings = graphSettingsGetter(options.graphSettings, this.graphSettings);
-            this.draw = initDraw.call(this);
+            const draw = initDraw.call(this);
+            this.draw = this.initSmartDraw(draw);
+            this.instantDraw = draw;
             initZoom.call(this, this.areaTransform);
         }
         if (options.forceSettings) {
@@ -3368,7 +3511,7 @@ class GraphCanvas {
         if (!this.context)
             throw new Error("couldn't create canvas context");
         this.context.scale(this.dpi, this.dpi);
-        this.draw();
+        this.instantDraw();
     };
     clearCache = (keys) => {
         if (keys === true) {
@@ -3443,18 +3586,6 @@ class GraphCanvas {
         this.simulation.restart();
         this.tick();
     };
-    start = () => {
-        if (this.simulation)
-            this.simulation.alpha(1).restart();
-        if (this.container)
-            this.container.style.display = "block";
-    };
-    stop = () => {
-        if (this.simulation)
-            this.simulation.stop();
-        if (this.container)
-            this.container.style.display = "none";
-    };
     create = () => {
         this.init();
     };
@@ -3467,6 +3598,33 @@ class GraphCanvas {
         this.clearState();
         this.clearCache(true);
     };
+    precompute = () => {
+        initArea.call(this);
+        updateNodeCache.call(this);
+        updateLinkCache.call(this);
+        initSimulation.call(this);
+        this.restart(1);
+    };
+    initSmartDraw = (draw) => {
+        const frameInterval = 1000 / this.graphSettings.maxFps;
+        let debouncedDrawId;
+        let lastDraw = 0;
+        return () => {
+            if (debouncedDrawId != undefined) {
+                clearTimeout(debouncedDrawId);
+            }
+            const elapsed = performance.now() - lastDraw;
+            if (elapsed < frameInterval) {
+                debouncedDrawId = setTimeout(() => {
+                    debouncedDrawId = undefined;
+                    this.tick();
+                }, frameInterval * 2);
+                return;
+            }
+            lastDraw = performance.now();
+            draw();
+        };
+    };
     getPointerAreaPosition = (event) => {
         let localX;
         let localY;
@@ -3639,6 +3797,111 @@ class GraphCanvas {
     };
 }
 
+class StaticGraphCanvas extends GraphCanvas {
+    get simulationWorking() {
+        return false;
+    }
+    _rafTickId;
+    init = () => {
+        initArea.call(this);
+        updateNodeCache.call(this);
+        updateLinkCache.call(this);
+        initDnd.call(this, true);
+        initZoom.call(this);
+        initResize.call(this);
+        initSelection.call(this);
+        initPointer.call(this);
+        updateNodeCache.call(this);
+        updateLinkCache.call(this);
+        this.fitToView();
+        this.tick();
+    };
+    tick = () => {
+        if (this._rafTickId != undefined)
+            return;
+        this._rafTickId = requestAnimationFrame(() => {
+            this._rafTickId = undefined;
+            this.draw();
+        });
+    };
+    restart = () => { };
+    changeData = (options, _alpha, clearCache = true) => {
+        if (options.links != undefined)
+            this.links = options.links;
+        if (options.nodes != undefined)
+            this.nodes = options.nodes;
+        if (options.nodes != undefined || options.links != undefined) {
+            this.updateData(undefined, clearCache);
+        }
+    };
+    changeSettings = (options, clearCache = true) => {
+        if (options.graphSettings) {
+            this.graphSettings = graphSettingsGetter(options.graphSettings, this.graphSettings);
+            const draw = initDraw.call(this);
+            this.draw = this.initSmartDraw(draw);
+            this.instantDraw = draw;
+            initZoom.call(this, this.areaTransform);
+        }
+        if (options.highlightSettings) {
+            this.highlightSettings = highlightSettingsGetter(options.highlightSettings, this.highlightSettings);
+            if (clearCache === true) {
+                this.clearCache([
+                    GRAPH_CACHE_TYPE.NodeOptions,
+                    GRAPH_CACHE_TYPE.NodeText,
+                    GRAPH_CACHE_TYPE.NodeLabel,
+                    GRAPH_CACHE_TYPE.LinkOptions,
+                ]);
+            }
+            else {
+                this.clearCache(clearCache);
+            }
+        }
+        if (options.linkSettings) {
+            this.linkSettings = linkSettingsGetter(options.linkSettings, this.linkSettings);
+            if (clearCache) {
+                this.clearCache([GRAPH_CACHE_TYPE.LinkOptions]);
+            }
+            else {
+                this.clearCache(clearCache);
+            }
+        }
+        if (options.nodeSettings) {
+            this.nodeSettings = nodeSettingsGetter(options.nodeSettings, this.nodeSettings);
+            if (clearCache) {
+                this.clearCache([
+                    GRAPH_CACHE_TYPE.NodeOptions,
+                    GRAPH_CACHE_TYPE.NodeText,
+                    GRAPH_CACHE_TYPE.NodeLabel,
+                ]);
+            }
+            else {
+                this.clearCache(clearCache);
+            }
+        }
+        this.tick();
+        return undefined;
+    };
+    destroy = () => {
+        if (this._rafTickId != undefined) {
+            cancelAnimationFrame(this._rafTickId);
+            this._rafTickId = undefined;
+        }
+        this.clearHTMLElements();
+        this.clearState();
+        this.clearCache(true);
+    };
+    updateData = (_alpha, clearCache = true) => {
+        if (clearCache) {
+            this.clearCache(clearCache);
+        }
+        updateNodeCache.call(this);
+        updateLinkCache.call(this);
+        initZoom.call(this, this.areaTransform);
+        this.fitToView();
+        this.tick();
+    };
+}
+
 const FORCE_CONTROLS = [
     {
         id: "forces",
@@ -4819,13 +5082,8 @@ 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.StaticGraphCanvas = StaticGraphCanvas;
 exports.animationByProgress = animationByProgress;
 exports.approximateQuadraticBezierLength = approximateQuadraticBezierLength;
 exports.calculateLinkPositionByNode = calculateLinkPositionByNode;
@@ -4833,7 +5091,6 @@ exports.colorGetter = colorGetter;
 exports.colorToRgb = colorToRgb;
 exports.computeGraphBounds = computeGraphBounds;
 exports.dragPlaceCoefficientGetter = dragPlaceCoefficientGetter;
-exports.drawText = drawText;
 exports.extractLinkPointIds = extractLinkPointIds;
 exports.extractRgb = extractRgb;
 exports.fadeRgb = fadeRgb;
@@ -4858,11 +5115,15 @@ exports.nodeFade = nodeFade;
 exports.nodeHighlight = nodeHighlight;
 exports.nodeIdGetter = nodeIdGetter;
 exports.nodeIterationExtractor = nodeIterationExtractor;
+exports.nodeLabelGetter = nodeLabelGetter;
 exports.nodeOptionsGetter = nodeOptionsGetter;
 exports.nodeRadiusGetter = nodeRadiusGetter;
 exports.nodeSettingsGetter = nodeSettingsGetter;
 exports.nodeSizeGetter = nodeSizeGetter;
+exports.nodeTextGetter = nodeTextGetter;
 exports.nodeTextSizeGetter = nodeTextSizeGetter;
 exports.pointerGetter = pointerGetter;
+exports.precomputeGraph = precomputeGraph;
+exports.prepareGraph = prepareGraph;
 exports.rgbAnimationByProgress = rgbAnimationByProgress;
 //# sourceMappingURL=index.cjs.map