@krainovsd/graph 0.12.0-beta.2 → 0.12.0-beta.4

package/lib/cjs/index.cjs

@@ -113,7 +113,6 @@ const HIGHLIGHT_SETTINGS = {
 };
 
 const LINK_SETTINGS = {
-    cacheOptions: true,
     prettyDraw: true,
     linkScaleSwitch: 1,
     linkColorAfterScaleSwitch: "#000000FF",
@@ -142,13 +141,18 @@ const LINK_OPTIONS = {
 };
 
 const NODE_SETTINGS = {
-    cacheOptions: true,
     nodeRadiusFlexible: true,
-    nodeRadiusCoefficient: 5,
-    nodeRadiusFactor: 1,
+    nodeRadiusLinkCountForStep: 5,
+    nodeRadiusIncrementByStep: 1,
+    nodeRadiusMaxLinearSteps: 5,
+    nodeRadiusLinkCountDividerForLog: 25,
+    nodeRadiusLogFactor: 2.5,
     nodeSizeFlexible: true,
-    nodeSizeCoefficient: 5,
-    nodeSizeFactor: 0.1,
+    nodeSizeLinkCountForStep: 5,
+    nodeSizeIncrementByStep: 0.1,
+    nodeSizeMaxLinearSteps: 5,
+    nodeSizeLinkCountDividerForLog: 25,
+    nodeSizeLogFactor: 2.5,
     textScaleMin: 1.5,
     textScaleMax: 18,
     textSizeMin: 3.5,
@@ -308,9 +312,9 @@ function rgbAnimationByProgress(start, end, progress) {
 let countTime = 0;
 let countOperation = 0;
 function setDrawTime(cb, showEveryTick) {
-    return () => {
+    return (recursive) => {
         const start = performance.now();
-        cb();
+        cb(recursive);
         const end = performance.now();
         const result = end - start;
         countTime += result;
@@ -378,13 +382,29 @@ function nodeTextSizeGetter(transform, nodeSettings) {
     }
     return { textSize, textShiftY };
 }
-function nodeRadiusGetter({ radiusFlexible, radiusInitial, linkCount, radiusCoefficient, radiusFactor, }) {
-    return ((radiusFlexible && linkCount ? linkCount / radiusCoefficient : 0) * radiusFactor + radiusInitial);
+function nodeRadiusGetter({ radiusFlexible, linkCount, radiusInitial, radiusIncrementByStep, radiusLinkCountDividerForLog, radiusLinkCountForStep, radiusLogFactor, radiusMaxLinearSteps, }) {
+    if (!radiusFlexible || !linkCount)
+        return radiusInitial;
+    const steps = linkCount / radiusLinkCountForStep;
+    if (steps < radiusMaxLinearSteps) {
+        return steps * radiusIncrementByStep + radiusInitial;
+    }
+    return (radiusInitial +
+        radiusMaxLinearSteps * radiusIncrementByStep +
+        radiusLogFactor * Math.log10(linkCount / radiusLinkCountDividerForLog));
 }
-function nodeSizeGetter({ heightInitial, linkCount, sizeCoefficient, sizeFactor, sizeFlexible, widthInitial, }) {
+function nodeSizeGetter({ heightInitial, linkCount, sizeFlexible, widthInitial, sizeIncrementByStep, sizeLinkCountDividerForLog, sizeLinkCountForStep, sizeLogFactor, sizeMaxLinearSteps, }) {
     let additionalSizeCoefficient = 1;
     if (sizeFlexible && linkCount != undefined) {
-        additionalSizeCoefficient += (linkCount / sizeCoefficient) * sizeFactor;
+        const steps = linkCount / sizeLinkCountForStep;
+        if (steps < sizeMaxLinearSteps) {
+            additionalSizeCoefficient += steps * sizeIncrementByStep;
+        }
+        else {
+            additionalSizeCoefficient +=
+                sizeMaxLinearSteps * sizeIncrementByStep +
+                    sizeLogFactor * Math.log10(linkCount / sizeLinkCountDividerForLog);
+        }
     }
     return {
         width: widthInitial * additionalSizeCoefficient,
@@ -1205,7 +1225,7 @@ function initDnd() {
 }
 
 function getDrawLink() {
-    return function drawLink(link, index) {
+    return function drawLink(link) {
         if (!this.context ||
             typeof link.source !== "object" ||
             typeof link.target !== "object" ||
@@ -1221,16 +1241,9 @@ function getDrawLink() {
         if (!link.source._visible && !link.target._visible)
             return;
         const id = `${link.target.id}${link.source.id}`;
-        let linkOptions;
-        if (this.linkSettings.cacheOptions && this.linkOptionsCache[id]) {
-            linkOptions = this.linkOptionsCache[id];
-        }
-        else {
-            linkOptions = linkIterationExtractor(link, index, this.links, this, this.linkSettings.options ?? {}, linkOptionsGetter);
-            if (this.linkSettings.cacheOptions) {
-                this.linkOptionsCache[id] = linkOptions;
-            }
-        }
+        const linkOptions = this.linkOptionsCache[id];
+        if (!linkOptions)
+            return;
         if (linkOptions.drawLink) {
             linkOptions.drawLink.call(this, link, linkOptions);
             return;
@@ -1327,7 +1340,9 @@ function getDrawLink() {
         let xEnd = link.target.x;
         let yEnd = link.target.y;
         let linkDistance = 0;
-        if (this.linkSettings.prettyDraw || this.linkSettings.particleFlexSpeed) {
+        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) {
@@ -1408,12 +1423,6 @@ function getDrawLink() {
         }
         /** Arrow */
         if (this.linkSettings.arrow && arrowAlpha > 0) {
-            const { x1: xStart, x2: xEnd, y1: yStart, y2: yEnd, } = calculateLinkPositionByNode(link) ?? {
-                x1: 0,
-                x2: 0,
-                y1: 0,
-                y2: 0,
-            };
             this.context.beginPath();
             this.context.globalAlpha = arrowAlpha;
             this.context.strokeStyle = arrowBorderColor;
@@ -1436,33 +1445,10 @@ function getDrawLink() {
 }
 
 const SPACE = " ";
-function drawText({ context, id, textAlign, textColor, textFont, textStyle, textGap, textWeight, textSize, text, x, y, cachedNodeText, maxWidth, }) {
+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;
-    if (cachedNodeText[id] != undefined) {
-        cachedNodeText[id].forEach((line, index) => {
-            context.fillText(line, x, y + index * textSize + index * textGap);
-        });
-        return;
-    }
-    if (maxWidth == undefined || context.measureText(text).width <= maxWidth) {
-        cachedNodeText[id] = [text];
-        context.fillText(text, x, y);
-        return;
-    }
-    const { lines } = getTextLines({
-        context,
-        maxWidth,
-        text,
-        textAlign,
-        textColor,
-        textFont,
-        textSize,
-        textStyle,
-        textWeight,
-    });
-    cachedNodeText[id] = lines;
     lines.forEach((line, index) => {
         context.fillText(line, x, y + index * textSize + index * textGap);
     });
@@ -1504,21 +1490,14 @@ function getTextLines({ context, textAlign, textColor, textFont, textStyle, text
 }
 
 function getDrawNode(nodeRenders, textRenders) {
-    return function drawNode(node, index) {
+    return function drawNode(node) {
         if (!this.context || !node.x || !node.y)
             return;
         if (node.visible != undefined && !node.visible)
             return;
-        let nodeOptions;
-        if (this.nodeSettings.cacheOptions && this.nodeOptionsCache[node.id]) {
-            nodeOptions = this.nodeOptionsCache[node.id];
-        }
-        else {
-            nodeOptions = nodeIterationExtractor(node, index, this.nodes, this, this.nodeSettings.options ?? {}, nodeOptionsGetter);
-            if (this.nodeSettings.cacheOptions) {
-                this.nodeOptionsCache[node.id] = nodeOptions;
-            }
-        }
+        const nodeOptions = this.nodeOptionsCache[node.id];
+        if (!nodeOptions)
+            return;
         if (nodeOptions.nodeDraw && nodeOptions.textDraw) {
             nodeRenders.push(() => {
                 if (nodeOptions.nodeDraw) {
@@ -1532,13 +1511,13 @@ function getDrawNode(nodeRenders, textRenders) {
             });
             return;
         }
+        let radius = nodeOptions.radius;
+        let width = nodeOptions.width;
+        let height = nodeOptions.height;
         let alpha = nodeOptions.alpha;
         let color = nodeOptions.color;
         let borderColor = nodeOptions.borderColor;
         let borderWidth = nodeOptions.borderWidth;
-        let radiusInitial = nodeOptions.radius;
-        let widthInitial = nodeOptions.width;
-        let heightInitial = nodeOptions.height;
         let textAlpha = nodeOptions.textAlpha;
         let textSize = nodeOptions.textSize;
         let textShiftX = nodeOptions.textShiftX;
@@ -1585,9 +1564,9 @@ function getDrawNode(nodeRenders, textRenders) {
                 color = highlightOptions.color;
                 borderColor = highlightOptions.borderColor;
                 borderWidth = highlightOptions.borderWidth;
-                radiusInitial = highlightOptions.radiusInitial;
-                widthInitial = highlightOptions.widthInitial;
-                heightInitial = highlightOptions.heightInitial;
+                radius = highlightOptions.radiusInitial;
+                width = highlightOptions.widthInitial;
+                height = highlightOptions.heightInitial;
                 textSize = highlightOptions.textSize;
                 textShiftX = highlightOptions.textShiftX;
                 textShiftY = highlightOptions.textShiftY;
@@ -1634,9 +1613,9 @@ function getDrawNode(nodeRenders, textRenders) {
                 color = highlightOptions.color;
                 borderColor = highlightOptions.borderColor;
                 borderWidth = highlightOptions.borderWidth;
-                radiusInitial = highlightOptions.radiusInitial;
-                widthInitial = highlightOptions.widthInitial;
-                heightInitial = highlightOptions.heightInitial;
+                radius = highlightOptions.radiusInitial;
+                width = highlightOptions.widthInitial;
+                height = highlightOptions.heightInitial;
                 textSize = highlightOptions.textSize;
                 textShiftX = highlightOptions.textShiftX;
                 textShiftY = highlightOptions.textShiftY;
@@ -1645,78 +1624,6 @@ function getDrawNode(nodeRenders, textRenders) {
                 labelWeight = highlightOptions.labelWeight;
             }
         }
-        /** Flex radius */
-        const radius = nodeOptions.shape === "circle"
-            ? nodeRadiusGetter({
-                radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
-                radiusInitial,
-                radiusCoefficient: this.nodeSettings.nodeRadiusCoefficient,
-                radiusFactor: this.nodeSettings.nodeRadiusFactor,
-                linkCount: node.linkCount,
-            })
-            : radiusInitial;
-        /** Flex size */
-        let height = heightInitial;
-        let width = widthInitial;
-        if (nodeOptions.shape === "square") {
-            const size = nodeSizeGetter({
-                heightInitial,
-                widthInitial,
-                linkCount: node.linkCount,
-                sizeCoefficient: this.nodeSettings.nodeSizeCoefficient,
-                sizeFactor: this.nodeSettings.nodeSizeFactor,
-                sizeFlexible: this.nodeSettings.nodeSizeFlexible,
-            });
-            width = size.width;
-            height = size.height;
-        }
-        if (nodeOptions.shape === "text") {
-            width = nodeOptions.width;
-            const size = nodeSizeGetter({
-                heightInitial,
-                widthInitial: width,
-                linkCount: node.linkCount,
-                sizeCoefficient: this.nodeSettings.nodeSizeCoefficient,
-                sizeFactor: this.nodeSettings.nodeSizeFactor,
-                sizeFlexible: this.nodeSettings.nodeSizeFlexible,
-            });
-            labelSize *= size.additionalSizeCoefficient;
-        }
-        /** Size by text in textNode */
-        if (nodeOptions.shape === "text" && nodeOptions.label) {
-            let lines;
-            let textNodeParameters;
-            const cachedLines = this.cachedNodeLabel[node.id];
-            const cachedTextNodeParameters = this.cachedTextNodeParameters[node.id];
-            if (cachedLines != undefined && cachedTextNodeParameters != undefined) {
-                lines = cachedLines;
-                textNodeParameters = cachedTextNodeParameters;
-            }
-            else {
-                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,
-                });
-                textNodeParameters = [textInfo.currentMaxSize, labelSize];
-                lines = textInfo.lines;
-                this.cachedNodeLabel[node.id] = lines;
-                this.cachedTextNodeParameters[node.id] = textNodeParameters;
-            }
-            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;
-        }
         /** Node parameters */
         node._radius = radius;
         node._borderWidth = borderWidth;
@@ -1747,6 +1654,7 @@ function getDrawNode(nodeRenders, textRenders) {
             this.context.lineWidth = borderWidth;
             this.context.strokeStyle = borderColor;
             this.context.fillStyle = color;
+            const labelLines = this.cachedNodeLabel[node.id];
             switch (nodeOptions.shape) {
                 case "circle": {
                     if (!node.image) {
@@ -1767,13 +1675,11 @@ function getDrawNode(nodeRenders, textRenders) {
                             this.context.stroke();
                         }
                     }
-                    if (node.label) {
+                    if (node.label && labelLines) {
                         this.context.globalAlpha = labelAlpha;
                         drawText({
                             context: this.context,
-                            cachedNodeText: this.cachedNodeLabel,
-                            id: node.id,
-                            text: node.label,
+                            lines: labelLines,
                             textAlign: nodeOptions.labelAlign,
                             textColor: nodeOptions.labelColor,
                             textFont: nodeOptions.labelFont,
@@ -1781,7 +1687,6 @@ function getDrawNode(nodeRenders, textRenders) {
                             textSize: labelSize,
                             textStyle: nodeOptions.labelStyle,
                             textWeight: labelWeight,
-                            maxWidth: nodeOptions.labelWidth,
                             x: node.x,
                             y: node.y + labelSize / 3,
                         });
@@ -1807,13 +1712,11 @@ function getDrawNode(nodeRenders, textRenders) {
                             this.context.stroke();
                         }
                     }
-                    if (node.label) {
+                    if (node.label && labelLines) {
                         this.context.globalAlpha = labelAlpha;
                         drawText({
                             context: this.context,
-                            cachedNodeText: this.cachedNodeLabel,
-                            id: node.id,
-                            text: node.label,
+                            lines: labelLines,
                             textAlign: nodeOptions.labelAlign,
                             textColor: nodeOptions.labelColor,
                             textFont: nodeOptions.labelFont,
@@ -1821,7 +1724,6 @@ function getDrawNode(nodeRenders, textRenders) {
                             textSize: labelSize,
                             textStyle: nodeOptions.labelStyle,
                             textWeight: labelWeight,
-                            maxWidth: nodeOptions.labelWidth,
                             x: node.x,
                             y: node.y + labelSize / 3,
                         });
@@ -1832,20 +1734,16 @@ function getDrawNode(nodeRenders, textRenders) {
                     if (this.nodeSettings.textNodeDebug) {
                         this.context.strokeRect(node.x - width / 2, node.y - height / 2, width, height);
                     }
-                    const lines = this.cachedNodeLabel[node.id];
-                    if (nodeOptions.label && lines)
+                    if (nodeOptions.label && labelLines)
                         drawText({
-                            id: node.id,
-                            cachedNodeText: this.cachedNodeLabel,
+                            lines: labelLines,
                             context: this.context,
-                            text: nodeOptions.label,
                             textAlign: nodeOptions.labelAlign,
                             textColor: nodeOptions.labelColor,
                             textFont: nodeOptions.labelFont,
                             textSize: labelSize,
                             x: node.x,
-                            y: node.y + textSize / 4 - (lines.length - 1) * (textSize / 2),
-                            maxWidth: nodeOptions.labelWidth,
+                            y: node.y + textSize / 4 - (labelLines.length - 1) * (textSize / 2),
                             textStyle: nodeOptions.labelStyle,
                             textWeight,
                             textGap: nodeOptions.labelGap,
@@ -1882,7 +1780,8 @@ function getDrawNode(nodeRenders, textRenders) {
             });
         }
         /** Text draw */
-        if (nodeOptions.textVisible && nodeOptions.text) {
+        const textLines = this.cachedNodeText[node.id];
+        if (nodeOptions.textVisible && nodeOptions.text && textLines) {
             textRenders.push(() => {
                 if (nodeOptions.textDraw) {
                     nodeOptions.textDraw.bind(this)(node, {
@@ -1910,17 +1809,14 @@ function getDrawNode(nodeRenders, textRenders) {
                     y += height / 2;
                 }
                 drawText({
-                    id: node.id,
-                    cachedNodeText: this.cachedNodeText,
+                    lines: textLines,
                     context: this.context,
-                    text: nodeOptions.text,
                     textAlign: nodeOptions.textAlign,
                     textColor: nodeOptions.textColor,
                     textFont: nodeOptions.textFont,
                     textSize,
                     x: node.x + textShiftX,
                     y,
-                    maxWidth: nodeOptions.textWidth,
                     textStyle: nodeOptions.textStyle,
                     textWeight,
                     textGap: nodeOptions.textGap,
@@ -1944,29 +1840,42 @@ function getDrawNode(nodeRenders, textRenders) {
 }
 
 function initDraw() {
-    function calculateHighlight() {
-        this.highlightDrawing = true;
+    let hasHighlight = false;
+    function calculateHighlight(recursive) {
+        if (hasHighlight && !recursive)
+            return;
+        /** animation up */
         if (!this.highlightWorking && this.highlightProgress > 0) {
             const highlightDownStep = 1 / this.highlightSettings.highlightDownFrames;
             this.highlightProgress -= highlightDownStep;
             if (!this.simulationWorking) {
-                return void requestAnimationFrame(() => this.draw());
+                hasHighlight = true;
+                return void requestAnimationFrame(() => this.draw(true));
             }
-            if (!this.linkSettings.particles)
+            if (!this.linkSettings.particles) {
+                hasHighlight = false;
                 return;
+            }
         }
+        /** animation down */
         if (this.highlightWorking && this.highlightProgress < 1) {
             const highlightUpStep = 1 / this.highlightSettings.highlightUpFrames;
             this.highlightProgress += highlightUpStep;
             if (!this.simulationWorking) {
-                return void requestAnimationFrame(() => this.draw());
+                hasHighlight = true;
+                return void requestAnimationFrame(() => this.draw(true));
             }
-            if (!this.linkSettings.particles)
+            if (!this.linkSettings.particles) {
+                hasHighlight = false;
                 return;
+            }
         }
+        /** animation active */
         if (this.linkSettings.particles && this.highlightWorking && !this.simulationWorking) {
-            return void requestAnimationFrame(() => this.draw());
+            hasHighlight = true;
+            return void requestAnimationFrame(() => this.draw(true));
         }
+        /** animation stop */
         if (!this.highlightWorking && this.highlightProgress <= 0) {
             if (this.highlightedNeighbors || this.highlightedNode || this.highlightedLink) {
                 this.highlightedNeighbors = null;
@@ -1974,13 +1883,14 @@ function initDraw() {
                 this.highlightedLink = null;
                 this.particles = {};
                 if (!this.simulationWorking) {
-                    return void requestAnimationFrame(() => this.draw());
+                    hasHighlight = true;
+                    return void requestAnimationFrame(() => this.draw(true));
                 }
             }
         }
-        this.highlightDrawing = false;
+        hasHighlight = false;
     }
-    function draw() {
+    function draw(recursive = false) {
         if (!this.context)
             return;
         if (this.listeners.onDraw) {
@@ -2001,7 +1911,7 @@ function initDraw() {
         textRenders.forEach((render) => render());
         this.context.restore();
         this.listeners.onDrawFinished?.call?.(this);
-        calculateHighlight.bind(this)();
+        calculateHighlight.bind(this)(recursive);
     }
     if (this.graphSettings.showDrawTime) {
         return setDrawTime(draw.bind(this), this.graphSettings.showDrawTimeEveryTick);
@@ -2059,7 +1969,7 @@ function initPointer() {
             this.highlightedLink = null;
             this.highlightedNeighbors = new Set(this.highlightedNode?.neighbors ?? []);
             this.highlightWorking = true;
-            if (!this.simulationWorking && !this.highlightDrawing)
+            if (!this.simulationWorking)
                 requestAnimationFrame(() => {
                     this.draw();
                 });
@@ -2074,14 +1984,14 @@ function initPointer() {
             this.highlightedNode = null;
             this.highlightedNeighbors = new Set([currentLink.source.id, currentLink.target.id]);
             this.highlightWorking = true;
-            if (!this.simulationWorking && !this.highlightDrawing)
+            if (!this.simulationWorking)
                 requestAnimationFrame(() => {
                     this.draw();
                 });
         }
         else if (!currentNode && !currentLink && (this.highlightedNode || this.highlightedLink)) {
             this.highlightWorking = false;
-            if (!this.simulationWorking && !this.highlightDrawing)
+            if (!this.simulationWorking)
                 requestAnimationFrame(() => {
                     this.draw();
                 });
@@ -2335,9 +2245,12 @@ function initCollideForce(forceUpdate) {
                         const radius = nodeRadiusGetter({
                             radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
                             radiusInitial: nodeOptions.radius,
-                            radiusCoefficient: this.nodeSettings.nodeRadiusCoefficient,
-                            radiusFactor: this.nodeSettings.nodeRadiusFactor,
                             linkCount: node.linkCount,
+                            radiusIncrementByStep: this.nodeSettings.nodeRadiusIncrementByStep,
+                            radiusLinkCountForStep: this.nodeSettings.nodeRadiusLinkCountForStep,
+                            radiusMaxLinearSteps: this.nodeSettings.nodeRadiusMaxLinearSteps,
+                            radiusLogFactor: this.nodeSettings.nodeRadiusLogFactor,
+                            radiusLinkCountDividerForLog: this.nodeSettings.nodeRadiusLinkCountDividerForLog,
                         });
                         return radius + this.forceSettings.collideAdditionalRadius;
                     }
@@ -2346,9 +2259,12 @@ function initCollideForce(forceUpdate) {
                             heightInitial: nodeOptions.width,
                             widthInitial: nodeOptions.height,
                             linkCount: node.linkCount,
-                            sizeCoefficient: this.nodeSettings.nodeSizeCoefficient,
-                            sizeFactor: this.nodeSettings.nodeSizeFactor,
                             sizeFlexible: this.nodeSettings.nodeSizeFlexible,
+                            sizeIncrementByStep: this.nodeSettings.nodeSizeIncrementByStep,
+                            sizeLinkCountForStep: this.nodeSettings.nodeSizeLinkCountForStep,
+                            sizeMaxLinearSteps: this.nodeSettings.nodeSizeMaxLinearSteps,
+                            sizeLogFactor: this.nodeSettings.nodeSizeLogFactor,
+                            sizeLinkCountDividerForLog: this.nodeSettings.nodeSizeLinkCountDividerForLog,
                         });
                         return (Math.sqrt(width ** 2 + height ** 2) / 2 +
                             this.forceSettings.collideAdditionalRadius);
@@ -2358,9 +2274,12 @@ function initCollideForce(forceUpdate) {
                             heightInitial: nodeOptions.width,
                             widthInitial: nodeOptions.height,
                             linkCount: node.linkCount,
-                            sizeCoefficient: this.nodeSettings.nodeSizeCoefficient,
-                            sizeFactor: this.nodeSettings.nodeSizeFactor,
                             sizeFlexible: this.nodeSettings.nodeSizeFlexible,
+                            sizeIncrementByStep: this.nodeSettings.nodeSizeIncrementByStep,
+                            sizeLinkCountForStep: this.nodeSettings.nodeSizeLinkCountForStep,
+                            sizeMaxLinearSteps: this.nodeSettings.nodeSizeMaxLinearSteps,
+                            sizeLogFactor: this.nodeSettings.nodeSizeLogFactor,
+                            sizeLinkCountDividerForLog: this.nodeSettings.nodeSizeLinkCountDividerForLog,
                         });
                         if (this.context && nodeOptions.text) {
                             const textInfo = getTextLines({
@@ -2390,8 +2309,11 @@ function initCollideForce(forceUpdate) {
                         const radius = nodeRadiusGetter({
                             radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
                             radiusInitial: nodeOptions.radius,
-                            radiusCoefficient: this.nodeSettings.nodeRadiusCoefficient,
-                            radiusFactor: this.nodeSettings.nodeRadiusFactor,
+                            radiusIncrementByStep: this.nodeSettings.nodeRadiusIncrementByStep,
+                            radiusLinkCountForStep: this.nodeSettings.nodeRadiusLinkCountForStep,
+                            radiusMaxLinearSteps: this.nodeSettings.nodeRadiusMaxLinearSteps,
+                            radiusLogFactor: this.nodeSettings.nodeRadiusLogFactor,
+                            radiusLinkCountDividerForLog: this.nodeSettings.nodeRadiusLinkCountDividerForLog,
                             linkCount: node.linkCount,
                         });
                         return radius + this.forceSettings.collideAdditionalRadius;
@@ -2404,6 +2326,145 @@ function initCollideForce(forceUpdate) {
     }
 }
 
+function updateLinkCache() {
+    this.linkOptionsCache = {};
+    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;
+    }
+}
+
+function updateNodeCache() {
+    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];
+            }
+            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 = width;
+        nodeOptions.height = height;
+        nodeOptions.radius = radius;
+        nodeOptions.labelSize = labelSize;
+        /** text */
+        if (nodeOptions.text) {
+            this.context.font = `${nodeOptions.textStyle} normal ${nodeOptions.textWeight} ${nodeOptions.textSize}px ${nodeOptions.textFont}`;
+            this.context.fillStyle = nodeOptions.textColor;
+            this.context.textAlign = nodeOptions.textAlign;
+            if (nodeOptions.textWidth == undefined ||
+                this.context.measureText(nodeOptions.text).width <= nodeOptions.textWidth) {
+                this.cachedNodeText[node.id] = [nodeOptions.text];
+            }
+            const { lines } = getTextLines({
+                context: this.context,
+                maxWidth: nodeOptions.textWidth,
+                text: nodeOptions.text,
+                textAlign: nodeOptions.textAlign,
+                textColor: nodeOptions.textColor,
+                textFont: nodeOptions.textFont,
+                textSize: nodeOptions.textSize,
+                textStyle: nodeOptions.textStyle,
+                textWeight: nodeOptions.textWeight,
+            });
+            this.cachedNodeText[node.id] = lines;
+        }
+        this.nodeOptionsCache[node.id] = nodeOptions;
+    }
+}
+
 function initZoom(currentZoom) {
     if (!this.area)
         throw new Error("bad init data");
@@ -2412,8 +2473,8 @@ function initZoom(currentZoom) {
         .on("zoom", (event) => {
         this.listeners.onZoom?.call?.(this, event);
         this.areaTransform = event.transform;
-        this.linkOptionsCache = {};
-        this.nodeOptionsCache = {};
+        updateLinkCache.call(this);
+        updateNodeCache.call(this);
         if (!this.simulationWorking && !this.highlightWorking)
             requestAnimationFrame(() => this.draw());
     });
@@ -2460,7 +2521,6 @@ class GraphCanvas {
     eventAbortController;
     cachedNodeText = {};
     cachedNodeLabel = {};
-    cachedTextNodeParameters = {};
     linkOptionsCache = {};
     nodeOptionsCache = {};
     isDragging = false;
@@ -2469,7 +2529,6 @@ class GraphCanvas {
     highlightedNeighbors = null;
     highlightProgress = 1;
     highlightWorking = false;
-    highlightDrawing = false;
     get simulationWorking() {
         const simulationAlpha = this.simulation?.alpha?.() ?? 0;
         const simulationAlphaMin = this.simulation?.alphaMin?.() ?? 0;
@@ -2504,15 +2563,15 @@ class GraphCanvas {
             nodes: this.nodes,
         };
     }
-    changeData(options, alpha) {
+    changeData(options, alpha = 0.5, clearCache = true) {
         if (options.links != undefined)
             this.links = options.links;
         if (options.nodes != undefined)
             this.nodes = options.nodes;
         if (options.nodes != undefined || options.links != undefined)
-            this.updateData(alpha);
+            this.updateData(alpha, clearCache);
     }
-    changeSettings(options) {
+    changeSettings(options, clearCache = true) {
         if (options.graphSettings) {
             this.graphSettings = graphSettingsGetter(options.graphSettings, this.graphSettings);
             this.draw = initDraw.call(this);
@@ -2523,22 +2582,21 @@ class GraphCanvas {
         }
         if (options.highlightSettings) {
             this.highlightSettings = highlightSettingsGetter(options.highlightSettings, this.highlightSettings);
-            this.linkOptionsCache = {};
-            this.cachedNodeText = {};
-            this.cachedNodeLabel = {};
-            this.cachedTextNodeParameters = {};
-            this.nodeOptionsCache = {};
+            if (clearCache) {
+                this.clearCache(["nodeOptionsCache", "linkOptionsCache"]);
+            }
         }
         if (options.linkSettings) {
             this.linkSettings = linkSettingsGetter(options.linkSettings, this.linkSettings);
-            this.linkOptionsCache = {};
+            if (clearCache) {
+                this.clearCache(["linkOptionsCache"]);
+            }
         }
         if (options.nodeSettings) {
             this.nodeSettings = nodeSettingsGetter(options.nodeSettings, this.nodeSettings);
-            this.cachedNodeText = {};
-            this.cachedNodeLabel = {};
-            this.cachedTextNodeParameters = {};
-            this.nodeOptionsCache = {};
+            if (clearCache) {
+                this.clearCache(["nodeOptionsCache"]);
+            }
             initCollideForce.call(this, true);
         }
         if (options.forceSettings) {
@@ -2564,16 +2622,18 @@ class GraphCanvas {
     }
     clearCache(keys) {
         if (!keys) {
-            this.nodeOptionsCache = {};
-            this.linkOptionsCache = {};
-            this.cachedNodeText = {};
-            this.cachedNodeLabel = {};
-            this.cachedTextNodeParameters = {};
+            updateNodeCache.call(this);
+            updateLinkCache.call(this);
         }
         else {
             for (let i = 0; i < keys.length; i++) {
                 const key = keys[i];
-                this[key] = {};
+                if (key === "nodeOptionsCache") {
+                    updateNodeCache.call(this);
+                }
+                else {
+                    updateLinkCache.call(this);
+                }
             }
         }
     }
@@ -2631,10 +2691,11 @@ class GraphCanvas {
         this.highlightedNeighbors = null;
         this.highlightProgress = 0;
         this.highlightWorking = false;
-        this.highlightDrawing = false;
     }
-    updateData(alpha) {
-        this.clearCache();
+    updateData(alpha = 0.5, clearCache = true) {
+        if (clearCache) {
+            this.clearCache();
+        }
         if (this.simulation) {
             initCollideForce.call(this, false);
             this.simulation
@@ -2650,12 +2711,14 @@ class GraphCanvas {
                 .iterations(this.forceSettings.forces && this.forceSettings.linkForce
                 ? this.forceSettings.linkIterations
                 : 0))
-                .alpha(alpha ?? 0.5)
+                .alpha(alpha)
                 .restart();
         }
     }
     init() {
         initArea.call(this);
+        updateNodeCache.call(this);
+        updateLinkCache.call(this);
         initSimulation.call(this);
         initDnd.call(this);
         initZoom.call(this);
@@ -3246,12 +3309,6 @@ const HIGHLIGHT_BY_LINK_FOR_ARROW_CONTROLS = [
 ];
 
 const LINK_SETTINGS_CONTROLS = [
-    {
-        id: "cacheOptions",
-        type: "checkbox",
-        label: "Кеширование вычисляемых настроек",
-        initialValue: LINK_SETTINGS.cacheOptions,
-    },
     {
         id: "prettyDraw",
         type: "checkbox",
@@ -3459,12 +3516,6 @@ const LINK_OPTIONS_PARTICLE_CONTROLS = [
 ];
 
 const NODE_SETTINGS_CONTROLS = [
-    {
-        id: "cacheOptions",
-        type: "checkbox",
-        initialValue: NODE_SETTINGS.cacheOptions,
-        label: "Кеширование вычисляемых настроек",
-    },
     {
         id: "textNodeDebug",
         type: "checkbox",
@@ -3475,49 +3526,103 @@ const NODE_SETTINGS_CONTROLS = [
         id: "nodeRadiusFlexible",
         type: "checkbox",
         initialValue: NODE_SETTINGS.nodeRadiusFlexible,
-        label: "Гибкий радиус (только для круга)",
+        label: "Гибкий радиус",
     },
     {
-        id: "nodeRadiusCoefficient",
-        initialValue: NODE_SETTINGS.nodeRadiusCoefficient,
+        id: "nodeRadiusLinkCountForStep",
+        initialValue: NODE_SETTINGS.nodeRadiusLinkCountForStep,
         max: 100,
         min: 0.1,
         step: 0.1,
         type: "range",
-        label: "Количество связей для увеличения радиуса (только для круга)",
+        label: "Количество связей для увеличения линейного шага радиуса",
     },
     {
-        id: "nodeRadiusFactor",
-        initialValue: NODE_SETTINGS.nodeRadiusFactor,
+        id: "nodeRadiusIncrementByStep",
+        initialValue: NODE_SETTINGS.nodeRadiusIncrementByStep,
         max: 50,
         min: 0.1,
         step: 0.1,
         type: "range",
-        label: "Коэффициент увеличения радиуса (только для круга)",
+        label: "Размер шага линейного увеличения радиуса",
+    },
+    {
+        id: "nodeRadiusMaxLinearSteps",
+        initialValue: NODE_SETTINGS.nodeRadiusMaxLinearSteps,
+        max: 50,
+        min: 1,
+        step: 1,
+        type: "range",
+        label: "Максимальное число шагов линейного увеличения радиуса",
+    },
+    {
+        id: "nodeRadiusLogFactor",
+        initialValue: NODE_SETTINGS.nodeRadiusLogFactor,
+        max: 50,
+        min: 1,
+        step: 1,
+        type: "range",
+        label: "Число умножаемое на логарифм от количества связей для увеличения радиуса",
+    },
+    {
+        id: "nodeRadiusLinkCountDividerForLog",
+        initialValue: NODE_SETTINGS.nodeRadiusLinkCountDividerForLog,
+        max: 50,
+        min: 1,
+        step: 1,
+        type: "range",
+        label: "Делитель количества связей для вычисления логарифма увеличения радиуса.",
     },
     {
         id: "nodeSizeFlexible",
         type: "checkbox",
         initialValue: NODE_SETTINGS.nodeSizeFlexible,
-        label: "Гибкий размер (только не для круга)",
+        label: "Гибкий размер",
+    },
+    {
+        id: "nodeSizeLinkCountForStep",
+        initialValue: NODE_SETTINGS.nodeSizeLinkCountForStep,
+        max: 100,
+        min: 0.1,
+        step: 0.1,
+        type: "range",
+        label: "Количество связей для увеличения линейного шага размера",
     },
     {
-        id: "nodeSizeCoefficient",
-        initialValue: NODE_SETTINGS.nodeSizeCoefficient,
+        id: "nodeSizeIncrementByStep",
+        initialValue: NODE_SETTINGS.nodeSizeIncrementByStep,
         max: 50,
         min: 0.1,
         step: 0.1,
         type: "range",
-        label: "Количество связей для увеличения размера (только не для круга)",
+        label: "Размер шага линейного увеличения размера",
     },
     {
-        id: "nodeSizeFactor",
-        initialValue: NODE_SETTINGS.nodeSizeFactor,
-        max: 20,
-        min: 0.01,
-        step: 0.01,
+        id: "nodeSizeMaxLinearSteps",
+        initialValue: NODE_SETTINGS.nodeSizeMaxLinearSteps,
+        max: 50,
+        min: 1,
+        step: 1,
+        type: "range",
+        label: "Максимальное число шагов линейного увеличения размера",
+    },
+    {
+        id: "nodeSizeLogFactor",
+        initialValue: NODE_SETTINGS.nodeSizeLogFactor,
+        max: 50,
+        min: 1,
+        step: 1,
+        type: "range",
+        label: "Число умножаемое на логарифм от количества связей для увеличения размера",
+    },
+    {
+        id: "nodeSizeLinkCountDividerForLog",
+        initialValue: NODE_SETTINGS.nodeSizeLinkCountDividerForLog,
+        max: 50,
+        min: 1,
+        step: 1,
         type: "range",
-        label: "Коэффициент увеличения размера (только не для круга)",
+        label: "Делитель количества связей для вычисления логарифма увеличения размера.",
     },
     {
         id: "textScaleMin",
@@ -3581,7 +3686,6 @@ const NODE_OPTIONS_NODE_CONTROLS = [
         initialValue: NODE_OPTIONS.shape,
         label: "Форма",
         options: [
-            { label: "Картинки", value: "icon" },
             { label: "Круг", value: "circle" },
             { label: "Прямоугольник", value: "square" },
             { label: "Текст", value: "text" },