@krainovsd/graph 0.10.0-rc1 → 0.10.0-rc3

package/lib/cjs/index.cjs

@@ -54,7 +54,7 @@ const NODE_SETTINGS = {
     highlightByHoverNode: true,
     nodeRadiusFlexible: true,
     nodeSizeFlexible: true,
-    textNodeDebug: false,
+    textNodeDebug: true,
     highlightByNodeNodeFading: true,
     highlightByNodeNodeColor: false,
     highlightByNodeNodeSizing: true,
@@ -70,7 +70,7 @@ const NODE_SETTINGS = {
     nodeSizeCoefficient: 5,
     nodeSizeFactor: 0.1,
     highlightByNodeNodeSizingAdditional: 0.5,
-    highlightByLinkNodeSizingAdditionalCoefficient: 0.35,
+    highlightByNodeNodeSizingAdditionalCoefficient: 0.35,
     highlightByNodeNodeColorFadingMin: 0.15,
     highlightByNodeTextShiftXAdditional: 0,
     highlightByNodeTextShiftYAdditional: 2,
@@ -80,7 +80,7 @@ const NODE_SETTINGS = {
     highlightByNodeNodeFadingMin: 0.21,
     highlightByNodeTextFadingMin: 0.21,
     highlightByLinkNodeSizingAdditional: 0.5,
-    highlightByNodeNodeSizingAdditionalCoefficient: 0.35,
+    highlightByLinkNodeSizingAdditionalCoefficient: 0.35,
     highlightByLinkNodeColorFadingMin: 0.15,
     highlightByLinkTextShiftXAdditional: 0,
     highlightByLinkTextShiftYAdditional: 2,
@@ -97,8 +97,8 @@ const NODE_OPTIONS = {
     borderRadius: 0,
     radius: 4,
     alpha: 1,
-    textNodeXPadding: 5,
-    textNodeYPadding: 3,
+    textNodeXPadding: 1,
+    textNodeYPadding: 1,
     borderWidth: 0.1,
     borderColor: "#000000FF",
     textAlpha: 1,
@@ -1265,13 +1265,15 @@ function nodeRadiusGetter({ radiusFlexible, radiusInitial, linkCount, radiusCoef
     return ((radiusFlexible && linkCount ? linkCount / radiusCoefficient : 0) * radiusFactor + radiusInitial);
 }
 function nodeSizeGetter({ heightInitial, linkCount, sizeCoefficient, sizeFactor, sizeFlexible, widthInitial, }) {
-    let widthCoefficient = 1;
-    let heightCoefficient = 1;
+    let additionalSizeCoefficient = 1;
     if (sizeFlexible && linkCount != undefined) {
-        widthCoefficient += (linkCount / sizeCoefficient) * sizeFactor;
-        heightCoefficient += (linkCount / sizeCoefficient) * sizeFactor;
+        additionalSizeCoefficient += (linkCount / sizeCoefficient) * sizeFactor;
     }
-    return { width: widthInitial * widthCoefficient, height: heightInitial * heightCoefficient };
+    return {
+        width: widthInitial * additionalSizeCoefficient,
+        height: heightInitial * additionalSizeCoefficient,
+        additionalSizeCoefficient,
+    };
 }
 function nodeIdGetter(node) {
     return node.id;
@@ -2118,7 +2120,7 @@ function drawText({ context, id, textAlign, textColor, textFont, textStyle, text
         context.fillText(text, x, y);
         return;
     }
-    const lines = getTextLines({
+    const { lines } = getTextLines({
         context,
         maxWidth,
         text,
@@ -2142,6 +2144,7 @@ function getTextLines({ context, textAlign, textColor, textFont, textStyle, text
     const lines = [];
     let lineWidth = 0;
     let line = "";
+    let currentMaxSize = 0;
     for (const word of text.split(" ")) {
         const size = context.measureText(word).width;
         lineWidth += size + spaceWidth;
@@ -2150,7 +2153,10 @@ function getTextLines({ context, textAlign, textColor, textFont, textStyle, text
             continue;
         }
         if (lineWidth > maxWidth) {
-            lineWidth = 0;
+            const initialSize = lineWidth - size - spaceWidth;
+            if (initialSize > currentMaxSize)
+                currentMaxSize = initialSize;
+            lineWidth = size;
             lines.push(line);
             line = word;
         }
@@ -2161,7 +2167,9 @@ function getTextLines({ context, textAlign, textColor, textFont, textStyle, text
     }
     if (line !== "")
         lines.push(line);
-    return lines;
+    if (lineWidth > currentMaxSize)
+        currentMaxSize = lineWidth;
+    return { lines, currentMaxSize };
 }
 
 function getDrawNode(nodeRenders, textRenders, state) {
@@ -2180,10 +2188,14 @@ function getDrawNode(nodeRenders, textRenders, state) {
         }
         if (nodeOptions.nodeDraw && nodeOptions.textDraw) {
             nodeRenders.push(() => {
-                nodeOptions?.nodeDraw?.(node, nodeOptions, state);
+                if (nodeOptions.nodeDraw) {
+                    nodeOptions.nodeDraw.bind(this)(node, nodeOptions);
+                }
             });
             textRenders.push(() => {
-                nodeOptions?.textDraw?.(node, nodeOptions, state);
+                if (nodeOptions.textDraw) {
+                    nodeOptions.textDraw.bind(this)(node, nodeOptions);
+                }
             });
             return;
         }
@@ -2198,6 +2210,7 @@ function getDrawNode(nodeRenders, textRenders, state) {
         let textShiftY = nodeOptions.textShiftY;
         let textWeight = nodeOptions.textWeight;
         let textWidth = nodeOptions.textWidth;
+        let sizeCoefficient = 1;
         /** Node Highlight */
         if (this.highlightedNeighbors && this.highlightedNode) {
             /** Not highlighted */
@@ -2229,12 +2242,11 @@ function getDrawNode(nodeRenders, textRenders, state) {
                 if (this.nodeSettings.highlightByNodeNodeSizing && nodeOptions.shape === "circle") {
                     radiusInitial = animationByProgress(radiusInitial, this.nodeSettings.highlightByNodeNodeSizingAdditional, this.highlightProgress);
                 }
-                if (this.nodeSettings.highlightByLinkNodeSizing &&
+                if (this.nodeSettings.highlightByNodeNodeSizing &&
                     (nodeOptions.shape === "square" || nodeOptions.shape === "text")) {
-                    const widthCoefficient = animationByProgress(1, this.nodeSettings.highlightByNodeNodeSizingAdditionalCoefficient, this.highlightProgress);
-                    const heightCoefficient = animationByProgress(1, this.nodeSettings.highlightByNodeNodeSizingAdditionalCoefficient, this.highlightProgress);
-                    widthInitial *= widthCoefficient;
-                    heightInitial *= heightCoefficient;
+                    sizeCoefficient = animationByProgress(sizeCoefficient, this.nodeSettings.highlightByNodeNodeSizingAdditionalCoefficient, this.highlightProgress);
+                    widthInitial *= sizeCoefficient;
+                    heightInitial *= sizeCoefficient;
                 }
                 if (this.nodeSettings.highlightByNodeTextSizing) {
                     textSize = animationByProgress(textSize, this.nodeSettings.highlightByNodeTextSizingAdditional, this.highlightProgress);
@@ -2281,10 +2293,9 @@ function getDrawNode(nodeRenders, textRenders, state) {
                     (nodeOptions.shape === "square" ||
                         nodeOptions.shape === "text" ||
                         nodeOptions.shape === "icon")) {
-                    const widthCoefficient = animationByProgress(1, this.nodeSettings.highlightByLinkNodeSizingAdditionalCoefficient, this.highlightProgress);
-                    const heightCoefficient = animationByProgress(1, this.nodeSettings.highlightByLinkNodeSizingAdditionalCoefficient, this.highlightProgress);
-                    widthInitial *= widthCoefficient;
-                    heightInitial *= heightCoefficient;
+                    sizeCoefficient = animationByProgress(sizeCoefficient, this.nodeSettings.highlightByNodeNodeSizingAdditionalCoefficient, this.highlightProgress);
+                    widthInitial *= sizeCoefficient;
+                    heightInitial *= sizeCoefficient;
                 }
                 if (this.nodeSettings.highlightByLinkTextSizing) {
                     textSize = animationByProgress(textSize, this.nodeSettings.highlightByLinkTextSizingAdditional, this.highlightProgress);
@@ -2308,7 +2319,7 @@ function getDrawNode(nodeRenders, textRenders, state) {
         /** Flex size */
         let height = heightInitial;
         let width = widthInitial;
-        if (nodeOptions.shape === "square" || nodeOptions.shape === "text") {
+        if (nodeOptions.shape === "square") {
             const size = nodeSizeGetter({
                 heightInitial,
                 widthInitial,
@@ -2320,27 +2331,53 @@ function getDrawNode(nodeRenders, textRenders, state) {
             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,
+            });
+            textSize *= size.additionalSizeCoefficient;
+        }
+        /** Size by text in textNode */
         if (nodeOptions.shape === "text" && nodeOptions.text) {
-            const lines = this.cachedNodeText[node.id] ??
-                getTextLines({
+            textWidth = width;
+            let lines;
+            let textNodeParameters;
+            const cachedLines = this.cachedNodeText[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.text,
                     textAlign: nodeOptions.textAlign,
                     textColor: nodeOptions.textColor,
                     textFont: nodeOptions.textFont,
                     textSize,
-                    maxWidth: width,
+                    maxWidth: textWidth,
                     textStyle: nodeOptions.textStyle,
                     textWeight,
                 });
-            if (!this.cachedNodeText[node.id]) {
+                textNodeParameters = [textInfo.currentMaxSize, textSize];
+                lines = textInfo.lines;
                 this.cachedNodeText[node.id] = lines;
+                this.cachedTextNodeParameters[node.id] = textNodeParameters;
             }
+            const textSizeCoefficient = textSize / textNodeParameters[1];
+            const maxSize = textNodeParameters[0] * textSizeCoefficient;
             height =
                 lines.length * textSize +
                     (lines.length - 1) * nodeOptions.textGap +
                     nodeOptions.textNodeYPadding;
-            width += nodeOptions.textNodeXPadding;
+            width = maxSize + nodeOptions.textNodeXPadding;
         }
         /** Node parameters */
         node._radius = radius;
@@ -2397,7 +2434,7 @@ function getDrawNode(nodeRenders, textRenders, state) {
                             textSize,
                             x: node.x,
                             y: node.y + textSize / 4 - (lines.length - 1) * (textSize / 2),
-                            maxWidth: widthInitial,
+                            maxWidth: textWidth,
                             textStyle: nodeOptions.textStyle,
                             textWeight,
                             textGap: nodeOptions.textGap,
@@ -2414,7 +2451,7 @@ function getDrawNode(nodeRenders, textRenders, state) {
         });
         if (nodeOptions.nodeExtraDraw) {
             nodeRenders.push(() => {
-                nodeOptions?.nodeExtraDraw?.(node, {
+                nodeOptions?.nodeExtraDraw?.bind?.(this)?.(node, {
                     ...nodeOptions,
                     radius,
                     alpha,
@@ -2425,14 +2462,14 @@ function getDrawNode(nodeRenders, textRenders, state) {
                     textShiftY,
                     textWeight,
                     textWidth,
-                }, state);
+                });
             });
         }
         /** Text draw */
         if (nodeOptions.textVisible && nodeOptions.text && nodeOptions.shape !== "text") {
             textRenders.push(() => {
                 if (nodeOptions.textDraw) {
-                    nodeOptions.textDraw(node, {
+                    nodeOptions.textDraw.bind(this)(node, {
                         ...nodeOptions,
                         radius,
                         alpha,
@@ -2443,7 +2480,7 @@ function getDrawNode(nodeRenders, textRenders, state) {
                         textShiftY,
                         textWeight,
                         textWidth,
-                    }, state);
+                    });
                     return;
                 }
                 if (!this.context || !node.x || !node.y || !nodeOptions.text)
@@ -2474,7 +2511,7 @@ function getDrawNode(nodeRenders, textRenders, state) {
                     textGap: nodeOptions.textGap,
                 });
                 if (nodeOptions.textExtraDraw) {
-                    nodeOptions.textExtraDraw(node, {
+                    nodeOptions.textExtraDraw.bind(this)(node, {
                         ...nodeOptions,
                         radius,
                         alpha,
@@ -2485,7 +2522,7 @@ function getDrawNode(nodeRenders, textRenders, state) {
                         textShiftY,
                         textWeight,
                         textWidth,
-                    }, state);
+                    });
                 }
             });
         }
@@ -2928,7 +2965,7 @@ function initCollideForce(forceUpdate) {
                                     maxWidth: width,
                                     textStyle: nodeOptions.textStyle,
                                     textWeight: nodeOptions.textWeight,
-                                });
+                                }).lines;
                             height =
                                 lines.length * nodeOptions.textSize +
                                     (lines.length - 1) * nodeOptions.textGap +
@@ -3013,6 +3050,7 @@ class GraphCanvas {
     draw;
     eventAbortController;
     cachedNodeText = {};
+    cachedTextNodeParameters = {};
     linkOptionsCache = {};
     nodeOptionsCache = {};
     isDragging = false;
@@ -3104,6 +3142,7 @@ class GraphCanvas {
         if (options.nodeSettings) {
             this.nodeSettings = nodeSettingsGetter(options.nodeSettings, this.nodeSettings);
             this.cachedNodeText = {};
+            this.cachedTextNodeParameters = {};
             this.nodeOptionsCache = {};
             initCollideForce.call(this, true);
         }
@@ -3120,6 +3159,7 @@ class GraphCanvas {
         this.nodeOptionsCache = {};
         this.linkOptionsCache = {};
         this.cachedNodeText = {};
+        this.cachedTextNodeParameters = {};
     }
     tick() {
         if (!this.simulationWorking && !this.highlightWorking)
@@ -3151,7 +3191,7 @@ class GraphCanvas {
         }
         this.clearHTMLElements();
         this.clearState();
-        this.clearDataDependencies();
+        this.clearCache();
     }
     clearHTMLElements() {
         this.root.replaceChildren();
@@ -3177,13 +3217,8 @@ class GraphCanvas {
         this.highlightWorking = false;
         this.highlightDrawing = false;
     }
-    clearDataDependencies() {
-        this.cachedNodeText = {};
-        this.nodeOptionsCache = {};
-        this.linkOptionsCache = {};
-    }
     updateData(alpha) {
-        this.clearDataDependencies();
+        this.clearCache();
         if (this.simulation) {
             initCollideForce.call(this, false);
             this.simulation