@krainovsd/graph 0.10.0-rc4 → 0.10.0-rc6

package/lib/esm/module/GraphCanvas/slices/draw-nodes.js

@@ -1,26 +1,22 @@
 import { isNumber } from '@krainovsd/js-helpers';
-import { colorToRgb } from '../../../lib/color-to-rgb.js';
-import { extractRgb } from '../../../lib/extract-rgb.js';
-import { fadeRgb } from '../../../lib/fade-rgb.js';
-import { rgbAnimationByProgress } from '../../../lib/rgb-animation-by-progress.js';
-import { nodeOptionsGetter, nodeRadiusGetter, nodeSizeGetter } from '../lib/settings/node-settings-getter.js';
+import { nodeRadiusGetter, nodeSizeGetter, nodeOptionsGetter } from '../lib/settings/node-settings-getter.js';
 import 'd3-array';
 import { nodeIterationExtractor } from '../lib/utils/node-iteration-extractor.js';
-import { animationByProgress } from '../lib/utils/animation-by-progress.js';
 import { isNodeVisible } from '../lib/utils/is-node-visible.js';
+import { nodeFade, nodeHighlight } from '../lib/utils/node-highlight.js';
 import { getTextLines, drawText } from './draw-text.js';
 
-function getDrawNode(nodeRenders, textRenders, state) {
+function getDrawNode(nodeRenders, textRenders) {
     return function drawNode(node, index) {
         if (!this.context || !node.x || !node.y)
             return;
         let nodeOptions;
-        if (this.nodeSettings.cache && this.nodeOptionsCache[node.id]) {
+        if (this.nodeSettings.cacheOptions && this.nodeOptionsCache[node.id]) {
             nodeOptions = this.nodeOptionsCache[node.id];
         }
         else {
-            nodeOptions = nodeIterationExtractor(node, index, this.nodes, state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
-            if (this.nodeSettings.cache) {
+            nodeOptions = nodeIterationExtractor(node, index, this.nodes, this, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+            if (this.nodeSettings.cacheOptions) {
                 this.nodeOptionsCache[node.id] = nodeOptions;
             }
         }
@@ -39,6 +35,8 @@ function getDrawNode(nodeRenders, textRenders, state) {
         }
         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;
@@ -47,101 +45,107 @@ function getDrawNode(nodeRenders, textRenders, state) {
         let textShiftX = nodeOptions.textShiftX;
         let textShiftY = nodeOptions.textShiftY;
         let textWeight = nodeOptions.textWeight;
-        let textWidth = nodeOptions.textWidth;
-        let sizeCoefficient = 1;
-        /** Node Highlight */
+        let labelSize = nodeOptions.labelSize;
+        let labelWeight = nodeOptions.labelWeight;
+        let labelAlpha = nodeOptions.labelAlpha;
+        /** Highlight */
         if (this.highlightedNeighbors && this.highlightedNode) {
-            /** Not highlighted */
+            /** By Node Not Highlight */
             if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {
-                if (this.nodeSettings.highlightByNodeNodeFading) {
-                    const min = this.nodeSettings.highlightByNodeNodeFadingMin < alpha
-                        ? this.nodeSettings.highlightByNodeNodeFadingMin
-                        : alpha;
-                    alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
-                }
-                if (this.nodeSettings.highlightByNodeTextFading) {
-                    const min = this.nodeSettings.highlightByNodeTextFadingMin < textAlpha
-                        ? this.nodeSettings.highlightByNodeTextFadingMin
-                        : textAlpha;
-                    textAlpha = animationByProgress(min, textAlpha - min, 1 - this.highlightProgress);
-                }
-                if (this.nodeSettings.highlightByNodeNodeColor) {
-                    const colorRgb = extractRgb(colorToRgb(color));
-                    if (colorRgb) {
-                        const colorRgbFade = fadeRgb(colorRgb, this.nodeSettings.highlightByNodeNodeColorFadingMin);
-                        const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbFade, this.highlightProgress);
-                        color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
-                    }
-                }
+                const fadingOptions = nodeFade({
+                    highlightProgress: this.highlightProgress,
+                    nodeOptions,
+                    highlightForLabelFadingMin: this.highlightSettings.highlightByNodeForLabelFadingMin,
+                    highlightForNodeColorFading: this.highlightSettings.highlightByNodeForNodeColorFading,
+                    highlightForNodeColorFadingMin: this.highlightSettings.highlightByNodeForNodeColorFadingMin,
+                    highlightForNodeFadingMin: this.highlightSettings.highlightByNodeForNodeFadingMin,
+                    highlightForTextFadingMin: this.highlightSettings.highlightByNodeForTextFadingMin,
+                });
+                alpha = fadingOptions.alpha;
+                color = fadingOptions.color;
+                textAlpha = fadingOptions.textAlpha;
+                labelAlpha = fadingOptions.labelAlpha;
             }
-            else if (!this.nodeSettings.highlightByNodeOnlyRoot ||
-                (this.nodeSettings.highlightByNodeOnlyRoot && this.highlightedNode.id === node.id)) {
-                /** Highlighted */
-                if (this.nodeSettings.highlightByNodeNodeSizing && nodeOptions.shape === "circle") {
-                    radiusInitial = animationByProgress(radiusInitial, this.nodeSettings.highlightByNodeNodeSizingAdditional, this.highlightProgress);
-                }
-                if (this.nodeSettings.highlightByNodeNodeSizing &&
-                    (nodeOptions.shape === "square" || nodeOptions.shape === "text")) {
-                    sizeCoefficient = animationByProgress(sizeCoefficient, this.nodeSettings.highlightByNodeNodeSizingAdditionalCoefficient, this.highlightProgress);
-                    widthInitial *= sizeCoefficient;
-                    heightInitial *= sizeCoefficient;
-                }
-                if (this.nodeSettings.highlightByNodeTextSizing) {
-                    textSize = animationByProgress(textSize, this.nodeSettings.highlightByNodeTextSizingAdditional, this.highlightProgress);
-                    textShiftX = animationByProgress(textShiftX, this.nodeSettings.highlightByNodeTextShiftXAdditional, this.highlightProgress);
-                    textShiftY = animationByProgress(textShiftY, this.nodeSettings.highlightByNodeTextShiftYAdditional, this.highlightProgress);
-                    textWeight = animationByProgress(textWeight, this.nodeSettings.highlightByNodeTextWeightAdditional, this.highlightProgress);
-                    textWidth = animationByProgress(textWidth, this.nodeSettings.highlightByNodeTextWidthAdditional, this.highlightProgress);
-                }
+            else if (!this.highlightSettings.highlightByNodeOnlyRoot ||
+                (this.highlightSettings.highlightByNodeOnlyRoot && this.highlightedNode.id === node.id)) {
+                /** By Node Highlight */
+                const highlightOptions = nodeHighlight({
+                    highlightProgress: this.highlightProgress,
+                    nodeOptions,
+                    highlightForLabelSizingAdditional: this.highlightSettings.highlightByNodeForLabelSizingAdditional,
+                    highlightForLabelWeightAdditional: this.highlightSettings.highlightByNodeForLabelWeightAdditional,
+                    highlightForNodeBorderColor: this.highlightSettings.highlightByNodeForNodeBorderColor,
+                    highlightForNodeBorderSizingAdditional: this.highlightSettings.highlightByNodeForNodeBorderSizingAdditional,
+                    highlightForNodeColor: this.highlightSettings.highlightByNodeForNodeColor,
+                    highlightForNodeSizingAdditional: this.highlightSettings.highlightByNodeForNodeSizingAdditional,
+                    highlightForNodeSizingAdditionalCoefficient: this.highlightSettings.highlightByNodeForNodeSizingAdditionalCoefficient,
+                    highlightForTextShiftXAdditional: this.highlightSettings.highlightByNodeForTextShiftXAdditional,
+                    highlightForTextShiftYAdditional: this.highlightSettings.highlightByNodeForTextShiftYAdditional,
+                    highlightForTextSizingAdditional: this.highlightSettings.highlightByNodeForTextSizingAdditional,
+                    highlightForTextWeightAdditional: this.highlightSettings.highlightByNodeForTextWeightAdditional,
+                });
+                color = highlightOptions.color;
+                borderColor = highlightOptions.borderColor;
+                borderWidth = highlightOptions.borderWidth;
+                radiusInitial = highlightOptions.radiusInitial;
+                widthInitial = highlightOptions.widthInitial;
+                heightInitial = highlightOptions.heightInitial;
+                textSize = highlightOptions.textSize;
+                textShiftX = highlightOptions.textShiftX;
+                textShiftY = highlightOptions.textShiftY;
+                textWeight = highlightOptions.textWeight;
+                labelSize = highlightOptions.labelSize;
+                labelWeight = highlightOptions.labelWeight;
             }
         }
-        /** LinkHighlight */
         if (this.highlightedNeighbors && this.highlightedLink) {
-            /** Not highlighted */
+            /** By Link Not Highlight */
             if (!this.highlightedNeighbors.has(node.id) &&
                 this.highlightedLink.source !== node &&
                 this.highlightedLink.target !== node) {
-                if (this.nodeSettings.highlightByLinkNodeFading) {
-                    const min = this.nodeSettings.highlightByLinkNodeFadingMin < alpha
-                        ? this.nodeSettings.highlightByLinkNodeFadingMin
-                        : alpha;
-                    alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
-                }
-                if (this.nodeSettings.highlightByLinkTextFading) {
-                    const min = this.nodeSettings.highlightByLinkTextFadingMin < textAlpha
-                        ? this.nodeSettings.highlightByLinkTextFadingMin
-                        : textAlpha;
-                    textAlpha = animationByProgress(min, textAlpha - min, 1 - this.highlightProgress);
-                }
-                if (this.nodeSettings.highlightByLinkNodeColor) {
-                    const colorRgb = extractRgb(colorToRgb(color));
-                    if (colorRgb) {
-                        const colorRgbFade = fadeRgb(colorRgb, this.nodeSettings.highlightByLinkNodeColorFadingMin);
-                        const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbFade, this.highlightProgress);
-                        color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
-                    }
-                }
+                const fadingOptions = nodeFade({
+                    highlightProgress: this.highlightProgress,
+                    nodeOptions,
+                    highlightForLabelFadingMin: this.highlightSettings.highlightByLinkForLabelFadingMin,
+                    highlightForNodeColorFading: this.highlightSettings.highlightByLinkForNodeColorFading,
+                    highlightForNodeColorFadingMin: this.highlightSettings.highlightByLinkForNodeColorFadingMin,
+                    highlightForNodeFadingMin: this.highlightSettings.highlightByLinkForNodeFadingMin,
+                    highlightForTextFadingMin: this.highlightSettings.highlightByLinkForTextFadingMin,
+                });
+                alpha = fadingOptions.alpha;
+                color = fadingOptions.color;
+                textAlpha = fadingOptions.textAlpha;
+                labelAlpha = fadingOptions.labelAlpha;
             }
             else {
-                /** Highlighted */
-                if (this.nodeSettings.highlightByLinkNodeSizing && nodeOptions.shape === "circle") {
-                    radiusInitial = animationByProgress(radiusInitial, this.nodeSettings.highlightByLinkNodeSizingAdditional, this.highlightProgress);
-                }
-                if (this.nodeSettings.highlightByLinkNodeSizing &&
-                    (nodeOptions.shape === "square" ||
-                        nodeOptions.shape === "text" ||
-                        nodeOptions.shape === "icon")) {
-                    sizeCoefficient = animationByProgress(sizeCoefficient, this.nodeSettings.highlightByNodeNodeSizingAdditionalCoefficient, this.highlightProgress);
-                    widthInitial *= sizeCoefficient;
-                    heightInitial *= sizeCoefficient;
-                }
-                if (this.nodeSettings.highlightByLinkTextSizing) {
-                    textSize = animationByProgress(textSize, this.nodeSettings.highlightByLinkTextSizingAdditional, this.highlightProgress);
-                    textShiftX = animationByProgress(textShiftX, this.nodeSettings.highlightByLinkTextShiftXAdditional, this.highlightProgress);
-                    textShiftY = animationByProgress(textShiftY, this.nodeSettings.highlightByLinkTextShiftYAdditional, this.highlightProgress);
-                    textWeight = animationByProgress(textWeight, this.nodeSettings.highlightByLinkTextWeightAdditional, this.highlightProgress);
-                    textWidth = animationByProgress(textWidth, this.nodeSettings.highlightByLinkTextWidthAdditional, this.highlightProgress);
-                }
+                /** By Link Highlight */
+                const highlightOptions = nodeHighlight({
+                    highlightProgress: this.highlightProgress,
+                    nodeOptions,
+                    highlightForLabelSizingAdditional: this.highlightSettings.highlightByLinkForLabelSizingAdditional,
+                    highlightForLabelWeightAdditional: this.highlightSettings.highlightByLinkForLabelWeightAdditional,
+                    highlightForNodeBorderColor: this.highlightSettings.highlightByLinkForNodeBorderColor,
+                    highlightForNodeBorderSizingAdditional: this.highlightSettings.highlightByLinkForNodeBorderSizingAdditional,
+                    highlightForNodeColor: this.highlightSettings.highlightByLinkForNodeColor,
+                    highlightForNodeSizingAdditional: this.highlightSettings.highlightByLinkForNodeSizingAdditional,
+                    highlightForNodeSizingAdditionalCoefficient: this.highlightSettings.highlightByLinkForNodeSizingAdditionalCoefficient,
+                    highlightForTextShiftXAdditional: this.highlightSettings.highlightByLinkForTextShiftXAdditional,
+                    highlightForTextShiftYAdditional: this.highlightSettings.highlightByLinkForTextShiftYAdditional,
+                    highlightForTextSizingAdditional: this.highlightSettings.highlightByLinkForTextSizingAdditional,
+                    highlightForTextWeightAdditional: this.highlightSettings.highlightByLinkForTextWeightAdditional,
+                });
+                color = highlightOptions.color;
+                borderColor = highlightOptions.borderColor;
+                borderWidth = highlightOptions.borderWidth;
+                radiusInitial = highlightOptions.radiusInitial;
+                widthInitial = highlightOptions.widthInitial;
+                heightInitial = highlightOptions.heightInitial;
+                textSize = highlightOptions.textSize;
+                textShiftX = highlightOptions.textShiftX;
+                textShiftY = highlightOptions.textShiftY;
+                textWeight = highlightOptions.textWeight;
+                labelSize = highlightOptions.labelSize;
+                labelWeight = highlightOptions.labelWeight;
             }
         }
         /** Flex radius */
@@ -179,14 +183,13 @@ function getDrawNode(nodeRenders, textRenders, state) {
                 sizeFactor: this.nodeSettings.nodeSizeFactor,
                 sizeFlexible: this.nodeSettings.nodeSizeFlexible,
             });
-            textSize *= size.additionalSizeCoefficient;
+            labelSize *= size.additionalSizeCoefficient;
         }
         /** Size by text in textNode */
-        if (nodeOptions.shape === "text" && nodeOptions.text) {
-            textWidth = width;
+        if (nodeOptions.shape === "text" && nodeOptions.label) {
             let lines;
             let textNodeParameters;
-            const cachedLines = this.cachedNodeText[node.id];
+            const cachedLines = this.cachedNodeLabel[node.id];
             const cachedTextNodeParameters = this.cachedTextNodeParameters[node.id];
             if (cachedLines != undefined && cachedTextNodeParameters != undefined) {
                 lines = cachedLines;
@@ -195,30 +198,31 @@ function getDrawNode(nodeRenders, textRenders, state) {
             else {
                 const textInfo = getTextLines({
                     context: this.context,
-                    text: nodeOptions.text,
-                    textAlign: nodeOptions.textAlign,
-                    textColor: nodeOptions.textColor,
-                    textFont: nodeOptions.textFont,
-                    textSize,
-                    maxWidth: textWidth,
-                    textStyle: nodeOptions.textStyle,
+                    text: nodeOptions.label,
+                    textAlign: nodeOptions.labelAlign,
+                    textColor: nodeOptions.labelColor,
+                    textFont: nodeOptions.labelFont,
+                    textSize: labelSize,
+                    maxWidth: nodeOptions.labelWidth,
+                    textStyle: nodeOptions.labelStyle,
                     textWeight,
                 });
-                textNodeParameters = [textInfo.currentMaxSize, textSize];
+                textNodeParameters = [textInfo.currentMaxSize, labelSize];
                 lines = textInfo.lines;
-                this.cachedNodeText[node.id] = lines;
+                this.cachedNodeLabel[node.id] = lines;
                 this.cachedTextNodeParameters[node.id] = textNodeParameters;
             }
-            const textSizeCoefficient = textSize / textNodeParameters[1];
+            const textSizeCoefficient = labelSize / textNodeParameters[1];
             const maxSize = textNodeParameters[0] * textSizeCoefficient;
             height =
-                lines.length * textSize +
-                    (lines.length - 1) * nodeOptions.textGap +
-                    nodeOptions.textNodeYPadding;
-            width = maxSize + nodeOptions.textNodeXPadding;
+                lines.length * labelSize +
+                    (lines.length - 1) * nodeOptions.labelGap +
+                    nodeOptions.labelYPadding;
+            width = maxSize + nodeOptions.labelXPadding;
         }
         /** Node parameters */
         node._radius = radius;
+        node._borderWidth = borderWidth;
         node._width = width;
         node._height = height;
         node._borderRadius =
@@ -243,49 +247,127 @@ function getDrawNode(nodeRenders, textRenders, state) {
                 return;
             this.context.beginPath();
             this.context.globalAlpha = alpha;
-            this.context.lineWidth = nodeOptions.borderWidth;
-            this.context.strokeStyle = nodeOptions.borderColor;
+            this.context.lineWidth = borderWidth;
+            this.context.strokeStyle = borderColor;
             this.context.fillStyle = color;
             switch (nodeOptions.shape) {
                 case "circle": {
-                    this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+                    if (!node.image) {
+                        this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+                        this.context.fill();
+                        if (borderWidth > 0) {
+                            this.context.stroke();
+                        }
+                    }
+                    else {
+                        this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+                        this.context.closePath();
+                        this.context.save();
+                        this.context.clip();
+                        this.context.drawImage(node.image, node.x - radius, node.y - radius, radius * 2, radius * 2);
+                        this.context.restore();
+                        if (borderWidth > 0) {
+                            this.context.stroke();
+                        }
+                    }
+                    if (node.label) {
+                        this.context.globalAlpha = labelAlpha;
+                        drawText({
+                            context: this.context,
+                            cachedNodeText: this.cachedNodeLabel,
+                            id: node.id,
+                            text: node.label,
+                            textAlign: nodeOptions.labelAlign,
+                            textColor: nodeOptions.labelColor,
+                            textFont: nodeOptions.labelFont,
+                            textGap: nodeOptions.labelGap,
+                            textSize: labelSize,
+                            textStyle: nodeOptions.labelStyle,
+                            textWeight: labelWeight,
+                            maxWidth: nodeOptions.labelWidth,
+                            x: node.x,
+                            y: node.y + labelSize / 3,
+                        });
+                    }
                     break;
                 }
                 case "square": {
-                    this.context.roundRect(node.x - width / 2, node.y - height / 2, width, height, node._borderRadius);
+                    if (!node.image) {
+                        this.context.roundRect(node.x - width / 2, node.y - height / 2, width, height, node._borderRadius);
+                        this.context.fill();
+                        if (borderWidth > 0) {
+                            this.context.stroke();
+                        }
+                    }
+                    else {
+                        this.context.roundRect(node.x - width / 2, node.y - height / 2, width, height, node._borderRadius);
+                        this.context.closePath();
+                        this.context.save();
+                        this.context.clip();
+                        this.context.drawImage(node.image, node.x - width / 2, node.y - height / 2, width, height);
+                        this.context.restore();
+                        if (borderWidth > 0) {
+                            this.context.stroke();
+                        }
+                    }
+                    if (node.label) {
+                        this.context.globalAlpha = labelAlpha;
+                        drawText({
+                            context: this.context,
+                            cachedNodeText: this.cachedNodeLabel,
+                            id: node.id,
+                            text: node.label,
+                            textAlign: nodeOptions.labelAlign,
+                            textColor: nodeOptions.labelColor,
+                            textFont: nodeOptions.labelFont,
+                            textGap: nodeOptions.labelGap,
+                            textSize: labelSize,
+                            textStyle: nodeOptions.labelStyle,
+                            textWeight: labelWeight,
+                            maxWidth: nodeOptions.labelWidth,
+                            x: node.x,
+                            y: node.y + labelSize / 3,
+                        });
+                    }
                     break;
                 }
                 case "text": {
                     if (this.nodeSettings.textNodeDebug) {
                         this.context.strokeRect(node.x - width / 2, node.y - height / 2, width, height);
                     }
-                    const lines = this.cachedNodeText[node.id];
-                    if (nodeOptions.text && lines)
+                    const lines = this.cachedNodeLabel[node.id];
+                    if (nodeOptions.label && lines)
                         drawText({
                             id: node.id,
-                            cachedNodeText: this.cachedNodeText,
+                            cachedNodeText: this.cachedNodeLabel,
                             context: this.context,
-                            text: nodeOptions.text,
-                            textAlign: nodeOptions.textAlign,
-                            textColor: nodeOptions.textColor,
-                            textFont: nodeOptions.textFont,
-                            textSize,
+                            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: textWidth,
-                            textStyle: nodeOptions.textStyle,
+                            maxWidth: nodeOptions.labelWidth,
+                            textStyle: nodeOptions.labelStyle,
                             textWeight,
-                            textGap: nodeOptions.textGap,
+                            textGap: nodeOptions.labelGap,
                         });
+                    this.context.fill();
+                    if (borderWidth > 0) {
+                        this.context.stroke();
+                    }
                     break;
                 }
                 default: {
                     this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+                    this.context.fill();
+                    if (borderWidth > 0) {
+                        this.context.stroke();
+                    }
                     break;
                 }
             }
-            this.context.fill();
-            this.context.stroke();
         });
         if (nodeOptions.nodeExtraDraw) {
             nodeRenders.push(() => {
@@ -299,12 +381,11 @@ function getDrawNode(nodeRenders, textRenders, state) {
                     textShiftX,
                     textShiftY,
                     textWeight,
-                    textWidth,
                 });
             });
         }
         /** Text draw */
-        if (nodeOptions.textVisible && nodeOptions.text && nodeOptions.shape !== "text") {
+        if (nodeOptions.textVisible && nodeOptions.text) {
             textRenders.push(() => {
                 if (nodeOptions.textDraw) {
                     nodeOptions.textDraw.bind(this)(node, {
@@ -317,7 +398,6 @@ function getDrawNode(nodeRenders, textRenders, state) {
                         textShiftX,
                         textShiftY,
                         textWeight,
-                        textWidth,
                     });
                     return;
                 }
@@ -329,7 +409,7 @@ function getDrawNode(nodeRenders, textRenders, state) {
                 if (nodeOptions.shape === "circle") {
                     y += radius;
                 }
-                if (nodeOptions.shape === "square") {
+                if (nodeOptions.shape === "square" || nodeOptions.shape === "text") {
                     y += height / 2;
                 }
                 drawText({
@@ -343,7 +423,7 @@ function getDrawNode(nodeRenders, textRenders, state) {
                     textSize,
                     x: node.x + textShiftX,
                     y,
-                    maxWidth: textWidth,
+                    maxWidth: nodeOptions.textWidth,
                     textStyle: nodeOptions.textStyle,
                     textWeight,
                     textGap: nodeOptions.textGap,
@@ -359,7 +439,6 @@ function getDrawNode(nodeRenders, textRenders, state) {
                         textShiftX,
                         textShiftY,
                         textWeight,
-                        textWidth,
                     });
                 }
             });