@krainovsd/graph 0.12.0-beta.6 → 0.13.0-beta3

package/lib/cjs/index.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const jsHelpers = require('@krainovsd/js-helpers');
 const d3Force = require('d3-force');
 const d3Zoom = require('d3-zoom');
-const jsHelpers = require('@krainovsd/js-helpers');
 const d3Array = require('d3-array');
 const d3Selection = require('d3-selection');
 const d3Drag = require('d3-drag');
@@ -41,158 +41,6 @@ const FORCE_SETTINGS = {
     collideRadius: null,
 };
 
-const GRAPH_SETTINGS = {
-    zoomExtent: [0.3, 10],
-    translateExtent: [[], []],
-    translateExtentEnable: true,
-    translateExtentCoefficient: [3, 3],
-    dragPlaceCoefficient: dragPlaceCoefficientGetter,
-    zoomInitial: null,
-    showDrawTime: true,
-    showDrawTimeEveryTick: false,
-};
-
-const HIGHLIGHT_SETTINGS = {
-    highlightByHoverNode: true,
-    highlightByHoverLink: true,
-    highlightUpFrames: 5,
-    highlightDownFrames: 5,
-    linkHoverExtraZone: 2,
-    /** Node */
-    highlightByNodeOnlyRoot: true,
-    highlightByNodeForNodeColorFading: false,
-    highlightByNodeForNodeColor: null,
-    highlightByNodeForNodeSizingAdditional: 0.5,
-    highlightByNodeForNodeSizingAdditionalCoefficient: 0.35,
-    highlightByNodeForNodeFadingMin: 0.21,
-    highlightByNodeForNodeBorderColor: null,
-    highlightByNodeForNodeBorderSizingAdditional: 0,
-    highlightByLinkForNodeColorFading: false,
-    highlightByLinkForNodeColor: null,
-    highlightByLinkForNodeSizingAdditional: 0.5,
-    highlightByLinkForNodeSizingAdditionalCoefficient: 0.35,
-    highlightByLinkForNodeFadingMin: 0.21,
-    highlightByLinkForNodeBorderColor: null,
-    highlightByLinkForNodeBorderSizingAdditional: 0,
-    /** Text */
-    highlightByNodeForTextShiftXAdditional: 0,
-    highlightByNodeForTextShiftYAdditional: 2,
-    highlightByNodeForTextSizingAdditional: 1,
-    highlightByNodeForTextWeightAdditional: 0,
-    highlightByNodeForTextFadingMin: 0.21,
-    highlightByLinkForTextShiftXAdditional: 0,
-    highlightByLinkForTextShiftYAdditional: 2,
-    highlightByLinkForTextSizingAdditional: 1,
-    highlightByLinkForTextWeightAdditional: 0,
-    highlightByLinkForTextFadingMin: 0.21,
-    /** Label */
-    highlightByNodeForLabelFadingMin: 0.21,
-    highlightByNodeForLabelSizingAdditional: 1,
-    highlightByNodeForLabelWeightAdditional: 0,
-    highlightByLinkForLabelFadingMin: 0.21,
-    highlightByLinkForLabelSizingAdditional: 1,
-    highlightByLinkForLabelWeightAdditional: 0,
-    /** Link */
-    highlightByNodeForLinkFadingMin: 0.21,
-    highlightByNodeForLinkSizeAdditional: 0,
-    highlightByNodeForLinkColor: null,
-    highlightByLinkForLinkFadingMin: 0.21,
-    highlightByLinkForLinkSizeAdditional: 0,
-    highlightByLinkForLinkColor: null,
-    /** Arrow */
-    highlightByNodeForArrowFadingMin: 0.21,
-    highlightByNodeForArrowSizeAdditional: 0,
-    highlightByNodeForArrowColor: null,
-    highlightByNodeForArrowBorderColor: null,
-    highlightByNodeForArrowBorderSizingAdditional: 0,
-    highlightByLinkForArrowFadingMin: 0.21,
-    highlightByLinkForArrowSizeAdditional: 0,
-    highlightByLinkForArrowColor: null,
-    highlightByLinkForArrowBorderColor: null,
-    highlightByLinkForArrowBorderSizingAdditional: 0,
-};
-
-const LINK_SETTINGS = {
-    prettyDraw: true,
-    linkScaleSwitch: 1,
-    linkColorAfterScaleSwitch: "#000000FF",
-    linkColorBeforeScaleSwitch: "#999",
-    linkWidthAfterScaleSwitch: 0.1,
-    linkWidthBeforeScaleSwitch: 1,
-    arrow: true,
-    arrowByHighlight: true,
-    particles: true,
-    particleFlexSpeed: true,
-    particleFlexSpeedCoefficient: 4,
-};
-const LINK_OPTIONS = {
-    alpha: 1,
-    arrowAlpha: 1,
-    arrowSize: 2,
-    arrowBorderColor: "#000000FF",
-    arrowBorderWidth: 0.1,
-    particleAlpha: 1,
-    particleColor: "#000000FF",
-    particleBorderColor: "#000000FF",
-    particleBorderWidth: 0.1,
-    particleCount: 2,
-    particleRadius: 0.5,
-    particleSteps: 60,
-};
-
-const NODE_SETTINGS = {
-    nodeRadiusFlexible: true,
-    nodeRadiusLinkCountForStep: 5,
-    nodeRadiusIncrementByStep: 1,
-    nodeRadiusMaxLinearSteps: 5,
-    nodeRadiusLinkCountDividerForLog: 25,
-    nodeRadiusLogFactor: 2.5,
-    nodeSizeFlexible: true,
-    nodeSizeLinkCountForStep: 5,
-    nodeSizeIncrementByStep: 0.1,
-    nodeSizeMaxLinearSteps: 5,
-    nodeSizeLinkCountDividerForLog: 25,
-    nodeSizeLogFactor: 2.5,
-    textScaleMin: 1.5,
-    textScaleMax: 18,
-    textSizeMin: 3.5,
-    textSizeMax: 1.5,
-    textShiftYMin: 4,
-    textShiftYMax: 2.5,
-    textNodeDebug: false,
-};
-const NODE_OPTIONS = {
-    shape: "circle",
-    height: 10,
-    width: 15,
-    borderRadius: 0,
-    radius: 4,
-    alpha: 1,
-    labelXPadding: 1,
-    labelYPadding: 1,
-    borderWidth: 0.1,
-    borderColor: "#000000FF",
-    textAlpha: 1,
-    textWidth: 20,
-    textShiftX: 0,
-    textFont: "Arial",
-    textAlign: "center",
-    textColor: "#333",
-    textStyle: "normal",
-    textWeight: 500,
-    textGap: 0,
-    label: null,
-    labelAlpha: 1,
-    labelAlign: "center",
-    labelColor: "#333",
-    labelFont: "Arial",
-    labelGap: 0,
-    labelSize: 3.5,
-    labelStyle: "normal",
-    labelWeight: 500,
-    labelWidth: 20,
-};
-
 function forceSettingsGetter(settings, prevSettings) {
     return {
         ...(prevSettings ?? FORCE_SETTINGS),
@@ -573,50 +421,52 @@ function nodeIterationExtractor(node, i, nodes, state, option, optionConstantGet
     return customOptions;
 }
 
-function calculateLinkPositionByNode(link, arrowSize = 0) {
-    const source = link.source;
-    const target = link.target;
-    if (typeof source != "object" || typeof target != "object")
-        return null;
+function calculateLinkPositionByNode(xStart, yStart, xEnd, yEnd, sourceNode, targetNode, arrowSize = 0) {
     const sourcePoint = getLinkPoint({
+        xStart,
+        yStart,
+        xEnd,
+        yEnd,
         arrowSize: 0,
-        node: source,
-        oppositeNode: target,
-    });
+        node: sourceNode});
     const targetPoint = getLinkPoint({
-        arrowSize: arrowSize > 0 ? arrowSize * 0.85 : 0,
-        node: target,
-        oppositeNode: source,
-    });
-    if (!sourcePoint || !targetPoint)
-        return null;
+        xStart: xEnd,
+        yStart: yEnd,
+        xEnd: xStart,
+        yEnd: yStart,
+        arrowSize: arrowSize > 0 ? arrowSize * 0.9 : 0,
+        node: targetNode});
+    const targetPointArrow = getLinkPoint({
+        xStart: xEnd,
+        yStart: yEnd,
+        xEnd: xStart,
+        yEnd: yStart,
+        arrowSize: 0,
+        node: targetNode});
     const distance = targetPoint && sourcePoint
         ? Math.sqrt((targetPoint.x - sourcePoint.x) ** 2 + (targetPoint.y - sourcePoint.y) ** 2)
         : 0;
     return {
-        x1: sourcePoint.x,
-        y1: sourcePoint.y,
-        x2: targetPoint.x,
-        y2: targetPoint.y,
+        xStart: sourcePoint.x,
+        yStart: sourcePoint.y,
+        xEnd: targetPoint.x,
+        yEnd: targetPoint.y,
+        xEndArrow: targetPointArrow.x,
+        yEndArrow: targetPointArrow.y,
         distance,
     };
 }
 function getLinkPoint(opts) {
-    if (opts.node.x == undefined ||
-        opts.node.y == undefined ||
-        opts.oppositeNode.x == undefined ||
-        opts.oppositeNode.y == undefined)
-        return null;
     let nodePoint;
     switch (opts.node._shape) {
         case "circle": {
             nodePoint = getCircleIntersection({
-                x: opts.node.x,
-                y: opts.node.y,
+                x: opts.xStart,
+                y: opts.yStart,
                 radius: (opts.node._radius ?? COMMON_SETTINGS.nodeRadius) +
                     (opts.node._borderWidth ? opts.node._borderWidth / 2 : 0),
-                oppositeX: opts.oppositeNode.x,
-                oppositeY: opts.oppositeNode.y,
+                oppositeX: opts.xEnd,
+                oppositeY: opts.yEnd,
                 arrowSize: opts.arrowSize,
             });
             break;
@@ -625,23 +475,23 @@ function getLinkPoint(opts) {
         case "text": {
             nodePoint = getRectangleIntersection({
                 arrowSize: opts.arrowSize,
-                x: opts.node.x,
-                y: opts.node.y,
+                x: opts.xStart,
+                y: opts.yStart,
                 height: (opts.node._height ?? COMMON_SETTINGS.nodeSize) + (opts.node._borderWidth ?? 0),
                 width: (opts.node._width ?? COMMON_SETTINGS.nodeSize) + (opts.node._borderWidth ?? 0),
-                oppositeX: opts.oppositeNode.x,
-                oppositeY: opts.oppositeNode.y,
+                oppositeX: opts.xEnd,
+                oppositeY: opts.yEnd,
                 borderRadius: opts.node._shape === "text" ? 0 : (opts.node._borderRadius ?? 0),
             });
             break;
         }
         default: {
             nodePoint = getCircleIntersection({
-                x: opts.node.x,
-                y: opts.node.y,
+                x: opts.xStart,
+                y: opts.yStart,
                 radius: opts.node._radius ?? COMMON_SETTINGS.nodeRadius,
-                oppositeX: opts.oppositeNode.x,
-                oppositeY: opts.oppositeNode.y,
+                oppositeX: opts.xEnd,
+                oppositeY: opts.yEnd,
                 arrowSize: opts.arrowSize,
             });
         }
@@ -922,31 +772,34 @@ function getParticlePosition(opts) {
     }
 }
 
-function linkByPointerGetter({ areaRect, areaTransform, mouseEvent, links, linkHoverExtraZone, }) {
+function linkByPointerGetter({ areaRect, areaTransform, mouseEvent, links, linkHoverExtraZone, curve, }) {
     if (!areaRect)
         return undefined;
     const [pointerX, pointerY] = pointerGetter(mouseEvent, areaRect, areaTransform);
     return d3Array.greatest(links, (link) => {
-        if (isNearLink(pointerX, pointerY, link, linkHoverExtraZone))
-            return link.index;
+        if (!jsHelpers.isObject(link.source) ||
+            !jsHelpers.isObject(link.target) ||
+            link.source.visible === false ||
+            link.target.visible === false)
+            return;
+        const x1 = (link._x1 ?? link.source.x);
+        const y1 = (link._y1 ?? link.source.y);
+        const x2 = (link._x2 ?? link.target.x);
+        const y2 = (link._y2 ?? link.target.y);
+        const cx = link._cx ?? 0;
+        const cy = link._cy ?? 0;
+        return curve
+            ? hitTestQuadratic(pointerX, pointerY, x1, y1, cx, cy, x2, y2, linkHoverExtraZone)
+                ? link.index
+                : undefined
+            : isNearLink(pointerX, pointerY, x1, y1, x2, y2, linkHoverExtraZone)
+                ? link.index
+                : undefined;
     });
 }
-function isNearLink(mouseX, mouseY, link, threshold = 2) {
-    if (!jsHelpers.isObject(link.source) ||
-        !jsHelpers.isObject(link.target) ||
-        link.source.visible === false ||
-        link.target.visible === false)
-        return false;
-    const x1 = link.source.x;
-    const y1 = link.source.y;
-    const x2 = link.target.x;
-    const y2 = link.target.y;
-    const distance = distanceToLine(mouseX, mouseY, x1, y1, x2, y2);
-    return distance <= threshold;
-}
-function distanceToLine(x, y, x1, y1, x2, y2) {
-    const A = x - x1;
-    const B = y - y1;
+function isNearLink(px, py, x1, y1, x2, y2, threshold = 2) {
+    const A = px - x1;
+    const B = py - y1;
     const C = x2 - x1;
     const D = y2 - y1;
     const dot = A * C + B * D;
@@ -968,9 +821,56 @@ function distanceToLine(x, y, x1, y1, x2, y2) {
         xx = x1 + param * C;
         yy = y1 + param * D;
     }
-    const dx = x - xx;
-    const dy = y - yy;
-    return Math.sqrt(dx * dx + dy * dy);
+    const dx = px - xx;
+    const dy = py - yy;
+    return Math.sqrt(dx * dx + dy * dy) <= threshold;
+}
+function hitTestQuadratic(px, py, x0, y0, xc, yc, x2, y2, tol) {
+    const bb = bezierBBox(x0, y0, xc, yc, x2, y2);
+    if (px < bb.minX - tol || px > bb.maxX + tol || py < bb.minY - tol || py > bb.maxY + tol) {
+        return false;
+    }
+    const chord = Math.hypot(x2 - x0, y2 - y0);
+    const contLen = Math.hypot(xc - x0, yc - y0) + Math.hypot(x2 - xc, y2 - yc);
+    const approxLen = (chord + contLen) / 2;
+    const steps = Math.max(16, Math.ceil(approxLen / 1));
+    const tol2 = tol * tol;
+    for (let i = 0; i <= steps; i++) {
+        const t = i / steps;
+        const mt = 1 - t;
+        const x = mt * mt * x0 + 2 * mt * t * xc + t * t * x2;
+        const y = mt * mt * y0 + 2 * mt * t * yc + t * t * y2;
+        const dx = px - x;
+        const dy = py - y;
+        if (dx * dx + dy * dy <= tol2)
+            return true;
+    }
+    return false;
+}
+function bezierBBox(x0, y0, x1, y1, x2, y2) {
+    function extrema(p0, p1, p2) {
+        const denom = p0 - 2 * p1 + p2;
+        if (denom === 0)
+            return [];
+        const t = (p0 - p1) / denom;
+        return t > 0 && t < 1 ? [t] : [];
+    }
+    const ts = [...extrema(x0, x1, x2), ...extrema(y0, y1, y2), 0, 1];
+    let maxX = -Infinity, maxY = -Infinity, minX = Infinity, minY = Infinity;
+    for (const t of ts) {
+        const mt = 1 - t;
+        const x = mt * mt * x0 + 2 * mt * t * x1 + t * t * x2;
+        const y = mt * mt * y0 + 2 * mt * t * y1 + t * t * y2;
+        if (x < minX)
+            minX = x;
+        if (x > maxX)
+            maxX = x;
+        if (y < minY)
+            minY = y;
+        if (y > maxY)
+            maxY = y;
+    }
+    return { minX, minY, maxX, maxY };
 }
 
 function nodeHighlight(opts) {
@@ -1146,6 +1046,166 @@ function extractLinkPointIds(link) {
     return { sourceId, targetId };
 }
 
+const GRAPH_SETTINGS = {
+    zoomExtent: [0.3, 10],
+    translateExtent: [[], []],
+    translateExtentEnable: true,
+    translateExtentCoefficient: [3, 3],
+    dragPlaceCoefficient: dragPlaceCoefficientGetter,
+    zoomInitial: null,
+    showDrawTime: true,
+    showDrawTimeEveryTick: false,
+};
+
+const HIGHLIGHT_SETTINGS = {
+    highlightByHoverNode: true,
+    highlightByHoverLink: true,
+    highlightUpFrames: 5,
+    highlightDownFrames: 5,
+    linkHoverExtraZone: 2,
+    /** Node */
+    highlightByNodeOnlyRoot: true,
+    highlightByNodeForNodeColorFading: false,
+    highlightByNodeForNodeColor: null,
+    highlightByNodeForNodeSizingAdditional: 0.5,
+    highlightByNodeForNodeSizingAdditionalCoefficient: 0.35,
+    highlightByNodeForNodeFadingMin: 0.21,
+    highlightByNodeForNodeBorderColor: null,
+    highlightByNodeForNodeBorderSizingAdditional: 0,
+    highlightByLinkForNodeColorFading: false,
+    highlightByLinkForNodeColor: null,
+    highlightByLinkForNodeSizingAdditional: 0.5,
+    highlightByLinkForNodeSizingAdditionalCoefficient: 0.35,
+    highlightByLinkForNodeFadingMin: 0.21,
+    highlightByLinkForNodeBorderColor: null,
+    highlightByLinkForNodeBorderSizingAdditional: 0,
+    /** Text */
+    highlightByNodeForTextShiftXAdditional: 0,
+    highlightByNodeForTextShiftYAdditional: 2,
+    highlightByNodeForTextSizingAdditional: 1,
+    highlightByNodeForTextWeightAdditional: 0,
+    highlightByNodeForTextFadingMin: 0.21,
+    highlightByLinkForTextShiftXAdditional: 0,
+    highlightByLinkForTextShiftYAdditional: 2,
+    highlightByLinkForTextSizingAdditional: 1,
+    highlightByLinkForTextWeightAdditional: 0,
+    highlightByLinkForTextFadingMin: 0.21,
+    /** Label */
+    highlightByNodeForLabelFadingMin: 0.21,
+    highlightByNodeForLabelSizingAdditional: 1,
+    highlightByNodeForLabelWeightAdditional: 0,
+    highlightByLinkForLabelFadingMin: 0.21,
+    highlightByLinkForLabelSizingAdditional: 1,
+    highlightByLinkForLabelWeightAdditional: 0,
+    /** Link */
+    highlightByNodeForLinkFadingMin: 0.21,
+    highlightByNodeForLinkSizeAdditional: 0,
+    highlightByNodeForLinkColor: null,
+    highlightByLinkForLinkFadingMin: 0.21,
+    highlightByLinkForLinkSizeAdditional: 0,
+    highlightByLinkForLinkColor: null,
+    /** Arrow */
+    highlightByNodeForArrowFadingMin: 0.21,
+    highlightByNodeForArrowSizeAdditional: 0,
+    highlightByNodeForArrowColor: null,
+    highlightByNodeForArrowBorderColor: null,
+    highlightByNodeForArrowBorderSizingAdditional: 0,
+    highlightByLinkForArrowFadingMin: 0.21,
+    highlightByLinkForArrowSizeAdditional: 0,
+    highlightByLinkForArrowColor: null,
+    highlightByLinkForArrowBorderColor: null,
+    highlightByLinkForArrowBorderSizingAdditional: 0,
+};
+
+const LINK_SETTINGS = {
+    prettyDraw: true,
+    curve: false,
+    linkScaleSwitch: 1,
+    linkColorAfterScaleSwitch: "#000000FF",
+    linkColorBeforeScaleSwitch: "#999",
+    linkWidthAfterScaleSwitch: 0.1,
+    linkWidthBeforeScaleSwitch: 1,
+    arrow: true,
+    arrowByHighlight: true,
+    particles: true,
+    particleFlexSpeed: true,
+    particleFlexSpeedCoefficient: 4,
+};
+const LINK_OPTIONS = {
+    alpha: 1,
+    arrowAlpha: 1,
+    arrowSize: 2,
+    arrowBorderColor: "#000000FF",
+    arrowBorderWidth: 0.1,
+    particleAlpha: 1,
+    particleColor: "#000000FF",
+    particleBorderColor: "#000000FF",
+    particleBorderWidth: 0.1,
+    particleCount: 2,
+    particleRadius: 0.5,
+    particleSteps: 60,
+};
+
+const NODE_SETTINGS = {
+    nodeRadiusFlexible: true,
+    nodeRadiusLinkCountForStep: 5,
+    nodeRadiusIncrementByStep: 1,
+    nodeRadiusMaxLinearSteps: 5,
+    nodeRadiusLinkCountDividerForLog: 25,
+    nodeRadiusLogFactor: 2.5,
+    nodeSizeFlexible: true,
+    nodeSizeLinkCountForStep: 5,
+    nodeSizeIncrementByStep: 0.1,
+    nodeSizeMaxLinearSteps: 5,
+    nodeSizeLinkCountDividerForLog: 25,
+    nodeSizeLogFactor: 2.5,
+    textScaleMin: 1.5,
+    textScaleMax: 18,
+    textSizeMin: 3.5,
+    textSizeMax: 1.5,
+    textShiftYMin: 4,
+    textShiftYMax: 2.5,
+    textNodeDebug: false,
+};
+const NODE_OPTIONS = {
+    shape: "circle",
+    height: 10,
+    width: 15,
+    borderRadius: 0,
+    radius: 4,
+    alpha: 1,
+    labelXPadding: 1,
+    labelYPadding: 1,
+    borderWidth: 0.1,
+    borderColor: "#000000FF",
+    textAlpha: 1,
+    textWidth: 20,
+    textShiftX: 0,
+    textFont: "Arial",
+    textAlign: "center",
+    textColor: "#333",
+    textStyle: "normal",
+    textWeight: 500,
+    textGap: 0,
+    label: null,
+    labelAlpha: 1,
+    labelAlign: "center",
+    labelColor: "#333",
+    labelFont: "Arial",
+    labelGap: 0,
+    labelSize: 3.5,
+    labelStyle: "normal",
+    labelWeight: 500,
+    labelWidth: 20,
+};
+
+const GRAPH_CACHE_TYPE = {
+    NodeOptions: "nodeOptions",
+    LinkOptions: "linkOptions",
+    NodeText: "nodeText",
+    NodeLabel: "nodeLabel",
+};
+
 function initArea() {
     if (!this.area || !this.context || !this.container) {
         this.container = d3Selection.create("div")
@@ -1227,6 +1287,42 @@ function initDnd() {
     d3Selection.select(this.area).call(dragHandler);
 }
 
+function calculateCurveLinkPositionByNode(xStart, yStart, xEnd, yEnd, sourceNode, targetNode, groupIndex, arrowSize = 0) {
+    const sourceRadius = (sourceNode._radius ?? COMMON_SETTINGS.nodeRadius) + (sourceNode._borderWidth ?? 0) * 0.5;
+    const targetRadius = (targetNode._radius ?? COMMON_SETTINGS.nodeRadius) + (targetNode._borderWidth ?? 0) * 0.5;
+    const effectiveTargetRadius = targetRadius + arrowSize * 0.9;
+    const mx = (xStart + xEnd) * 0.5;
+    const my = (yStart + yEnd) * 0.5;
+    const dx = xEnd - xStart;
+    const dy = yEnd - yStart;
+    const lenSq = dx * dx + dy * dy;
+    const len = lenSq > 0 ? Math.sqrt(lenSq) : 1;
+    const nx = -dy / len;
+    const ny = dx / len;
+    const offset = 0.12 * len * groupIndex;
+    const xControl = mx + nx * offset;
+    const yControl = my + ny * offset;
+    const [xStartP, yStartP] = adjustPoint(xStart, yStart, xControl, yControl, sourceRadius);
+    const [xEndP, yEndP] = adjustPoint(xEnd, yEnd, xControl, yControl, effectiveTargetRadius);
+    const [xEndArrow, yEndArrow] = adjustPoint(xEnd, yEnd, xControl, yControl, targetRadius);
+    return {
+        xStart: xStartP,
+        yStart: yStartP,
+        xEnd: xEndP,
+        yEnd: yEndP,
+        xControl,
+        yControl,
+        xEndArrow,
+        yEndArrow,
+    };
+}
+function adjustPoint(x, y, xControl, yControl, radius) {
+    const dxToControl = xControl - x;
+    const dyToControl = yControl - y;
+    const distToControl = Math.sqrt(dxToControl * dxToControl + dyToControl * dyToControl) || 1;
+    return [x + (dxToControl / distToControl) * radius, y + (dyToControl / distToControl) * radius];
+}
+
 function getDrawLink() {
     return function drawLink(link) {
         if (!this.context ||
@@ -1342,23 +1438,62 @@ function getDrawLink() {
         let yStart = link.source.y;
         let xEnd = link.target.x;
         let yEnd = link.target.y;
+        let xControl = 0;
+        let yControl = 0;
+        let xEndArrow = xEnd;
+        let yEndArrow = yEnd;
         let linkDistance = 0;
-        if (this.linkSettings.prettyDraw ||
-            this.linkSettings.particleFlexSpeed ||
-            (this.linkSettings.arrow && arrowAlpha > 0)) {
-            const isHasArrow = this.linkSettings.arrow && arrowAlpha > 0;
-            const position = calculateLinkPositionByNode(link, isHasArrow ? arrowSize : 0);
-            if (position) {
-                xStart = position.x1;
-                xEnd = position.x2;
-                yStart = position.y1;
-                yEnd = position.y2;
+        const isHasArrow = this.linkSettings.arrow && arrowAlpha > 0;
+        if (!this.linkSettings.curve) {
+            if (this.linkSettings.prettyDraw ||
+                this.linkSettings.particleFlexSpeed ||
+                (this.linkSettings.arrow && arrowAlpha > 0)) {
+                const position = calculateLinkPositionByNode(xStart, yStart, xEnd, yEnd, link.source, link.target, isHasArrow ? arrowSize : 0);
+                xStart = position.xStart;
+                xEnd = position.xEnd;
+                yStart = position.yStart;
+                yEnd = position.yEnd;
+                xEndArrow = position.xEndArrow;
+                yEndArrow = position.yEndArrow;
                 linkDistance = position.distance;
             }
+            link._x1 = xStart;
+            link._y1 = yStart;
+            link._x2 = xEnd;
+            link._y2 = yEnd;
+            link._ax = xEndArrow;
+            link._ay = yEndArrow;
+            this.context.moveTo(xStart, yStart);
+            this.context.lineTo(xEnd, yEnd);
+            this.context.stroke();
+        }
+        else {
+            const position = calculateCurveLinkPositionByNode(xStart, yStart, xEnd, yEnd, link.source, link.target, link._groupIndex ?? 0, isHasArrow ? arrowSize : 0);
+            xStart = position.xStart;
+            yStart = position.yStart;
+            xEnd = position.xEnd;
+            yEnd = position.yEnd;
+            xControl = position.xControl;
+            yControl = position.yControl;
+            xEndArrow = position.xEndArrow;
+            yEndArrow = position.yEndArrow;
+            link._x1 = position.xStart;
+            link._y1 = position.yStart;
+            link._x2 = position.xEnd;
+            link._y2 = position.yEnd;
+            link._cx = position.xControl;
+            link._cy = position.yControl;
+            link._ax = position.xEndArrow;
+            link._ay = position.yEndArrow;
+            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();
         }
-        this.context.moveTo(xStart, yStart);
-        this.context.lineTo(xEnd, yEnd);
-        this.context.stroke();
         /** Particle */
         if (this.linkSettings.particles &&
             ((this.highlightedNode &&
@@ -1426,15 +1561,28 @@ function getDrawLink() {
         }
         /** Arrow */
         if (this.linkSettings.arrow && arrowAlpha > 0) {
+            let angle = 0;
+            if (!this.linkSettings.curve) {
+                angle = Math.atan2(yEndArrow - yStart, xEndArrow - xStart);
+            }
+            else {
+                const tangentX = 2 * (xEndArrow - xControl);
+                const tangentY = 2 * (yEndArrow - yControl);
+                if (Math.abs(tangentX) < 0.001 && Math.abs(tangentY) < 0.001) {
+                    angle = Math.atan2(yEndArrow - yControl, xEndArrow - xControl);
+                }
+                else {
+                    angle = Math.atan2(tangentY, tangentX);
+                }
+            }
             this.context.beginPath();
             this.context.globalAlpha = arrowAlpha;
             this.context.strokeStyle = arrowBorderColor;
             this.context.lineWidth = arrowBorderWidth;
             this.context.fillStyle = arrowColor;
-            const angle = Math.atan2(yEnd - yStart, xEnd - xStart);
-            this.context.moveTo(xEnd, yEnd);
-            this.context.lineTo(xEnd - arrowSize * Math.cos(angle - Math.PI / 6), yEnd - arrowSize * Math.sin(angle - Math.PI / 6));
-            this.context.lineTo(xEnd - arrowSize * Math.cos(angle + Math.PI / 6), yEnd - arrowSize * Math.sin(angle + Math.PI / 6));
+            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) {
@@ -1958,6 +2106,7 @@ function initPointer() {
                 areaTransform: this.areaTransform,
                 mouseEvent: event,
                 links: this.links,
+                curve: this.linkSettings.curve,
             });
             if (currentLink?.highlight != undefined)
                 highlightLink = currentLink?.highlight;
@@ -2019,6 +2168,7 @@ function initPointer() {
                 areaTransform: this.areaTransform,
                 mouseEvent: event,
                 links: this.links,
+                curve: this.linkSettings.curve,
             });
         }
         if (!currentNode)
@@ -2043,6 +2193,7 @@ function initPointer() {
                 areaTransform: this.areaTransform,
                 mouseEvent: event,
                 links: this.links,
+                curve: this.linkSettings.curve,
             });
             return void this.listeners.onWheelClick.call(this, event, undefined, currentLink);
         }
@@ -2064,6 +2215,7 @@ function initPointer() {
                 areaTransform: this.areaTransform,
                 mouseEvent: event,
                 links: this.links,
+                curve: this.linkSettings.curve,
             });
             return void this.listeners.onContextMenu.call(this, event, undefined, currentLink);
         }
@@ -2085,6 +2237,7 @@ function initPointer() {
                 areaTransform: this.areaTransform,
                 mouseEvent: event,
                 links: this.links,
+                curve: this.linkSettings.curve,
             });
             return void this.listeners.onDoubleClick.call(this, event, undefined, currentLink);
         }
@@ -2106,6 +2259,7 @@ function initPointer() {
                 areaTransform: this.areaTransform,
                 mouseEvent: event,
                 links: this.links,
+                curve: this.linkSettings.curve,
             });
             return void this.listeners.onClick.call(this, event, undefined, currentLink);
         }
@@ -2151,12 +2305,19 @@ function initResize() {
             return;
         }
         this.updateSize();
+        requestAnimationFrame(() => {
+            this.updateSize();
+        });
     });
     document.addEventListener("scroll", this.updateRect.bind(this), {
         capture: true,
         passive: true,
         signal: abortController.signal,
     });
+    document.addEventListener("visibilitychange", () => {
+        if (!document.hidden)
+            this.updateRect();
+    }, { signal: abortController.signal });
     observer.observe(this.area);
 }
 
@@ -2277,119 +2438,156 @@ function initCollideForce(forceUpdate) {
 
 function updateLinkCache() {
     this.linkOptionsCache = {};
+    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;
+        if (this.linkSettings.curve) {
+            if (sourceId === targetId) {
+                groupSelfMap[id] ??= 0;
+                link._groupIndex = ++groupSelfMap[id];
+                link._self = true;
+                continue;
+            }
+            const reverseId = `${sourceId}${targetId}`;
+            groupMap[reverseId] ??= 0;
+            groupMap[reverseId]++;
+            groupMap[id] ??= 0;
+            link._groupIndex = indexToPosition(++groupMap[id]);
+            link._self = false;
+        }
+    }
+    if (this.linkSettings.curve) {
+        for (const link of this.links) {
+            const { sourceId, targetId } = extractLinkPointIds(link);
+            const id = `${targetId}${sourceId}`;
+            link._groupSize = link._self ? (groupSelfMap[id] ?? 1) : (groupMap[id] ?? 1);
+        }
     }
 }
+function indexToPosition(n) {
+    if (n === 1)
+        return 0;
+    const index = n >> 1;
+    return n & 1 ? -(index * 2) : index * 2;
+    // return n & 1 ? -(n >> 1) : n >> 1;
+}
 
-function updateNodeCache() {
+function updateNodeCache(types) {
     this.nodeOptionsCache = {};
     if (!this.context)
         return;
     for (let i = 0; i < this.nodes.length; i++) {
         const node = this.nodes[i];
-        const nodeOptions = nodeIterationExtractor(node, i, this.nodes, this, this.nodeSettings.options ?? {}, nodeOptionsGetter);
-        const radius = nodeOptions.shape === "circle"
-            ? nodeRadiusGetter({
-                radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
-                radiusInitial: nodeOptions.radius,
-                radiusIncrementByStep: this.nodeSettings.nodeRadiusIncrementByStep,
-                radiusLinkCountForStep: this.nodeSettings.nodeRadiusLinkCountForStep,
-                radiusMaxLinearSteps: this.nodeSettings.nodeRadiusMaxLinearSteps,
-                radiusLogFactor: this.nodeSettings.nodeRadiusLogFactor,
-                radiusLinkCountDividerForLog: this.nodeSettings.nodeRadiusLinkCountDividerForLog,
-                linkCount: node.linkCount,
-            })
-            : nodeOptions.radius;
-        let width = nodeOptions.width;
-        let height = nodeOptions.height;
-        let labelSize = nodeOptions.labelSize;
-        if (nodeOptions.shape === "square") {
-            const size = nodeSizeGetter({
-                heightInitial: nodeOptions.height,
-                widthInitial: nodeOptions.width,
-                linkCount: node.linkCount,
-                sizeFlexible: this.nodeSettings.nodeSizeFlexible,
-                sizeIncrementByStep: this.nodeSettings.nodeSizeIncrementByStep,
-                sizeLinkCountForStep: this.nodeSettings.nodeSizeLinkCountForStep,
-                sizeMaxLinearSteps: this.nodeSettings.nodeSizeMaxLinearSteps,
-                sizeLogFactor: this.nodeSettings.nodeSizeLogFactor,
-                sizeLinkCountDividerForLog: this.nodeSettings.nodeSizeLinkCountDividerForLog,
-            });
-            width = size.width;
-            height = size.height;
-        }
-        if (nodeOptions.shape === "text") {
-            width = nodeOptions.width;
-            const size = nodeSizeGetter({
-                heightInitial: nodeOptions.height,
-                widthInitial: width,
-                linkCount: node.linkCount,
-                sizeFlexible: this.nodeSettings.nodeSizeFlexible,
-                sizeIncrementByStep: this.nodeSettings.nodeSizeIncrementByStep,
-                sizeLinkCountForStep: this.nodeSettings.nodeSizeLinkCountForStep,
-                sizeMaxLinearSteps: this.nodeSettings.nodeSizeMaxLinearSteps,
-                sizeLogFactor: this.nodeSettings.nodeSizeLogFactor,
-                sizeLinkCountDividerForLog: this.nodeSettings.nodeSizeLinkCountDividerForLog,
-            });
-            labelSize *= size.additionalSizeCoefficient;
-        }
-        /** label in not text shape */
-        if (nodeOptions.shape !== "text" && nodeOptions.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[node.id] = [nodeOptions.label];
+        if (types === true || (jsHelpers.isObject(types) && types.options)) {
+            const nodeOptions = nodeIterationExtractor(node, i, this.nodes, this, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+            const radius = nodeOptions.shape === "circle"
+                ? nodeRadiusGetter({
+                    radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
+                    radiusInitial: nodeOptions.radius,
+                    radiusIncrementByStep: this.nodeSettings.nodeRadiusIncrementByStep,
+                    radiusLinkCountForStep: this.nodeSettings.nodeRadiusLinkCountForStep,
+                    radiusMaxLinearSteps: this.nodeSettings.nodeRadiusMaxLinearSteps,
+                    radiusLogFactor: this.nodeSettings.nodeRadiusLogFactor,
+                    radiusLinkCountDividerForLog: this.nodeSettings.nodeRadiusLinkCountDividerForLog,
+                    linkCount: node.linkCount,
+                })
+                : nodeOptions.radius;
+            let width = nodeOptions.width;
+            let height = nodeOptions.height;
+            let labelSize = nodeOptions.labelSize;
+            if (nodeOptions.shape === "square") {
+                const size = nodeSizeGetter({
+                    heightInitial: nodeOptions.height,
+                    widthInitial: nodeOptions.width,
+                    linkCount: node.linkCount,
+                    sizeFlexible: this.nodeSettings.nodeSizeFlexible,
+                    sizeIncrementByStep: this.nodeSettings.nodeSizeIncrementByStep,
+                    sizeLinkCountForStep: this.nodeSettings.nodeSizeLinkCountForStep,
+                    sizeMaxLinearSteps: this.nodeSettings.nodeSizeMaxLinearSteps,
+                    sizeLogFactor: this.nodeSettings.nodeSizeLogFactor,
+                    sizeLinkCountDividerForLog: this.nodeSettings.nodeSizeLinkCountDividerForLog,
+                });
+                width = size.width;
+                height = size.height;
+            }
+            if (nodeOptions.shape === "text") {
+                width = nodeOptions.width;
+                const size = nodeSizeGetter({
+                    heightInitial: nodeOptions.height,
+                    widthInitial: width,
+                    linkCount: node.linkCount,
+                    sizeFlexible: this.nodeSettings.nodeSizeFlexible,
+                    sizeIncrementByStep: this.nodeSettings.nodeSizeIncrementByStep,
+                    sizeLinkCountForStep: this.nodeSettings.nodeSizeLinkCountForStep,
+                    sizeMaxLinearSteps: this.nodeSettings.nodeSizeMaxLinearSteps,
+                    sizeLogFactor: this.nodeSettings.nodeSizeLogFactor,
+                    sizeLinkCountDividerForLog: this.nodeSettings.nodeSizeLinkCountDividerForLog,
+                });
+                labelSize *= size.additionalSizeCoefficient;
+            }
+            nodeOptions.width = node.visible === false ? 0 : width;
+            nodeOptions.height = node.visible === false ? 0 : height;
+            nodeOptions.radius = node.visible === false ? 0 : radius;
+            nodeOptions.labelSize = labelSize;
+            this.nodeOptionsCache[node.id] = nodeOptions;
+        }
+        const nodeOptions = this.nodeOptionsCache[node.id];
+        /** label */
+        if (types === true || (jsHelpers.isObject(types) && types.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}`;
+                this.context.fillStyle = nodeOptions.labelColor;
+                this.context.textAlign = nodeOptions.labelAlign;
+                if (nodeOptions.labelWidth == undefined ||
+                    this.context.measureText(nodeOptions.label).width <= nodeOptions.labelWidth) {
+                    this.cachedNodeLabel[node.id] = [nodeOptions.label];
+                }
+                const { lines } = getTextLines({
+                    context: this.context,
+                    maxWidth: nodeOptions.labelWidth,
+                    text: nodeOptions.label,
+                    textAlign: nodeOptions.labelAlign,
+                    textColor: nodeOptions.labelColor,
+                    textFont: nodeOptions.labelFont,
+                    textSize: nodeOptions.labelSize,
+                    textStyle: nodeOptions.labelStyle,
+                    textWeight: nodeOptions.labelWeight,
+                });
+                this.cachedNodeLabel[node.id] = lines;
+                /** label in text shape */
+            }
+            else if (nodeOptions.shape === "text" && nodeOptions.label) {
+                const textInfo = getTextLines({
+                    context: this.context,
+                    text: nodeOptions.label,
+                    textAlign: nodeOptions.labelAlign,
+                    textColor: nodeOptions.labelColor,
+                    textFont: nodeOptions.labelFont,
+                    textSize: nodeOptions.labelSize,
+                    maxWidth: nodeOptions.labelWidth,
+                    textStyle: nodeOptions.labelStyle,
+                    textWeight: nodeOptions.textWeight,
+                });
+                const textNodeParameters = [textInfo.currentMaxSize, nodeOptions.labelSize];
+                const lines = textInfo.lines;
+                const textSizeCoefficient = nodeOptions.labelSize / textNodeParameters[1];
+                const maxSize = textNodeParameters[0] * textSizeCoefficient;
+                nodeOptions.height =
+                    lines.length * nodeOptions.labelSize +
+                        (lines.length - 1) * nodeOptions.labelGap +
+                        nodeOptions.labelYPadding;
+                nodeOptions.width = maxSize + nodeOptions.labelXPadding;
+                this.cachedNodeLabel[node.id] = lines;
             }
-            const { lines } = getTextLines({
-                context: this.context,
-                maxWidth: nodeOptions.labelWidth,
-                text: nodeOptions.label,
-                textAlign: nodeOptions.labelAlign,
-                textColor: nodeOptions.labelColor,
-                textFont: nodeOptions.labelFont,
-                textSize: nodeOptions.labelSize,
-                textStyle: nodeOptions.labelStyle,
-                textWeight: nodeOptions.labelWeight,
-            });
-            this.cachedNodeLabel[node.id] = lines;
         }
-        /** label in text shape */
-        if (nodeOptions.shape === "text" && nodeOptions.label) {
-            const textInfo = getTextLines({
-                context: this.context,
-                text: nodeOptions.label,
-                textAlign: nodeOptions.labelAlign,
-                textColor: nodeOptions.labelColor,
-                textFont: nodeOptions.labelFont,
-                textSize: labelSize,
-                maxWidth: nodeOptions.labelWidth,
-                textStyle: nodeOptions.labelStyle,
-                textWeight: nodeOptions.textWeight,
-            });
-            const textNodeParameters = [textInfo.currentMaxSize, labelSize];
-            const lines = textInfo.lines;
-            const textSizeCoefficient = labelSize / textNodeParameters[1];
-            const maxSize = textNodeParameters[0] * textSizeCoefficient;
-            height =
-                lines.length * labelSize +
-                    (lines.length - 1) * nodeOptions.labelGap +
-                    nodeOptions.labelYPadding;
-            width = maxSize + nodeOptions.labelXPadding;
-            this.cachedNodeLabel[node.id] = lines;
-        }
-        nodeOptions.width = node.visible === false ? 0 : width;
-        nodeOptions.height = node.visible === false ? 0 : height;
-        nodeOptions.radius = node.visible === false ? 0 : radius;
-        nodeOptions.labelSize = labelSize;
         /** text */
-        if (nodeOptions.text) {
+        if (nodeOptions.text && (types === true || (jsHelpers.isObject(types) && types.text))) {
             this.context.font = `${nodeOptions.textStyle} normal ${nodeOptions.textWeight} ${nodeOptions.textSize}px ${nodeOptions.textFont}`;
             this.context.fillStyle = nodeOptions.textColor;
             this.context.textAlign = nodeOptions.textAlign;
@@ -2410,7 +2608,6 @@ function updateNodeCache() {
             });
             this.cachedNodeText[node.id] = lines;
         }
-        this.nodeOptionsCache[node.id] = nodeOptions;
     }
 }
 
@@ -2421,9 +2618,12 @@ function initZoom(currentZoom) {
         .scaleExtent(this.graphSettings.zoomExtent)
         .on("zoom", (event) => {
         this.listeners.onZoom?.call?.(this, event);
+        const oldTransform = this.areaTransform;
         this.areaTransform = event.transform;
-        updateLinkCache.call(this);
-        updateNodeCache.call(this);
+        if (this.areaTransform.k !== oldTransform.k) {
+            updateLinkCache.call(this);
+            updateNodeCache.call(this, true);
+        }
         if (!this.simulationWorking && !this.highlightWorking)
             requestAnimationFrame(() => this.draw());
     });
@@ -2531,20 +2731,38 @@ class GraphCanvas {
         }
         if (options.highlightSettings) {
             this.highlightSettings = highlightSettingsGetter(options.highlightSettings, this.highlightSettings);
-            if (clearCache) {
-                this.clearCache(["nodeOptionsCache", "linkOptionsCache"]);
+            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(["linkOptionsCache"]);
+                this.clearCache([GRAPH_CACHE_TYPE.LinkOptions]);
+            }
+            else {
+                this.clearCache(clearCache);
             }
         }
         if (options.nodeSettings) {
             this.nodeSettings = nodeSettingsGetter(options.nodeSettings, this.nodeSettings);
             if (clearCache) {
-                this.clearCache(["nodeOptionsCache"]);
+                this.clearCache([
+                    GRAPH_CACHE_TYPE.NodeOptions,
+                    GRAPH_CACHE_TYPE.NodeText,
+                    GRAPH_CACHE_TYPE.NodeLabel,
+                ]);
+            }
+            else {
+                this.clearCache(clearCache);
             }
             initCollideForce.call(this, true);
         }
@@ -2572,48 +2790,24 @@ class GraphCanvas {
             throw new Error("couldn't create canvas context");
         this.context.scale(this.dpi, this.dpi);
         this.draw();
-        // this.clearHTMLElements();
-        // initArea.call<
-        //   GraphCanvas<NodeData, LinkData>,
-        //   Parameters<typeof initArea>,
-        //   ReturnType<typeof initArea>
-        // >(this);
-        // initDnd.call<
-        //   GraphCanvas<NodeData, LinkData>,
-        //   Parameters<typeof initDnd>,
-        //   ReturnType<typeof initDnd>
-        // >(this);
-        // initZoom.call<
-        //   GraphCanvas<NodeData, LinkData>,
-        //   Parameters<typeof initZoom>,
-        //   ReturnType<typeof initZoom>
-        // >(this);
-        // initResize.call<
-        //   GraphCanvas<NodeData, LinkData>,
-        //   Parameters<typeof initResize>,
-        //   ReturnType<typeof initResize>
-        // >(this);
-        // initPointer.call<
-        //   GraphCanvas<NodeData, LinkData>,
-        //   Parameters<typeof initPointer>,
-        //   ReturnType<typeof initPointer>
-        // >(this);
-        // this.draw();
     }
     clearCache(keys) {
-        if (!keys) {
-            updateNodeCache.call(this);
+        if (keys === true) {
+            updateNodeCache.call(this, true);
             updateLinkCache.call(this);
         }
-        else {
-            for (let i = 0; i < keys.length; i++) {
-                const key = keys[i];
-                if (key === "nodeOptionsCache") {
-                    updateNodeCache.call(this);
-                }
-                else {
-                    updateLinkCache.call(this);
-                }
+        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);
             }
         }
     }
@@ -2647,7 +2841,7 @@ class GraphCanvas {
         }
         this.clearHTMLElements();
         this.clearState();
-        this.clearCache();
+        this.clearCache(true);
     }
     clearHTMLElements() {
         this.root.replaceChildren();
@@ -2674,7 +2868,7 @@ class GraphCanvas {
     }
     updateData(alpha = 0.5, clearCache = true) {
         if (clearCache) {
-            this.clearCache();
+            this.clearCache(clearCache);
         }
         if (this.simulation) {
             initCollideForce.call(this, false);
@@ -2697,7 +2891,7 @@ class GraphCanvas {
     }
     init() {
         initArea.call(this);
-        updateNodeCache.call(this);
+        updateNodeCache.call(this, true);
         updateLinkCache.call(this);
         initSimulation.call(this);
         initDnd.call(this);
@@ -3884,6 +4078,7 @@ const NODE_OPTIONS_LABEL_CONTROLS = [
 exports.COMMON_SETTINGS = COMMON_SETTINGS;
 exports.FORCE_CONTROLS = FORCE_CONTROLS;
 exports.FORCE_SETTINGS = FORCE_SETTINGS;
+exports.GRAPH_CACHE_TYPE = GRAPH_CACHE_TYPE;
 exports.GRAPH_SETTINGS = GRAPH_SETTINGS;
 exports.GraphCanvas = GraphCanvas;
 exports.HIGHLIGHT_BY_LINK_FOR_ARROW_CONTROLS = HIGHLIGHT_BY_LINK_FOR_ARROW_CONTROLS;