@krainovsd/graph 0.6.0 → 0.7.0

package/lib/cjs/index.cjs

@@ -196,6 +196,8 @@ function linkSettingsGetter(settings) {
 function linkOptionsGetter(_, __, ___, state) {
     return {
         ...LINK_SETTINGS,
+        drawExtraLink: null,
+        drawLink: null,
         color: state?.areaTransform && state?.areaTransform.k > COMMON_SETTINGS.linkColorZoomBorder
             ? COMMON_SETTINGS.linkColorZoomNear
             : COMMON_SETTINGS.linkColorZoomFar,
@@ -220,6 +222,10 @@ function nodeOptionsGetter(node, _, __, state) {
     const { textShiftY, textSize } = nodeTextSizeGetter(state?.areaTransform);
     return {
         ...NODE_SETTINGS,
+        nodeDraw: null,
+        nodeExtraDraw: null,
+        textDraw: null,
+        textExtraDraw: null,
         color: color(String(node.group ?? "_DEFAULT")),
         textVisible: Boolean(state?.areaTransform && state.areaTransform.k > COMMON_SETTINGS.nodeTextScaleMin),
         text: node.name ?? node.id.toString(),
@@ -738,8 +744,9 @@ class GraphCanvas {
         function draw() {
             if (!this.context)
                 return;
+            const state = this.state;
             if (this.listeners.onDraw) {
-                this.listeners.onDraw(this.state, (status) => {
+                this.listeners.onDraw(state, (status) => {
                     this.highlightDrawing = status;
                 }, () => {
                     if (this.highlightedNeighbors)
@@ -755,158 +762,216 @@ class GraphCanvas {
             this.context.scale(this.areaTransform.k, this.areaTransform.k);
             /** links */
             this.context.beginPath();
-            this.links.forEach(drawLink.bind(this));
+            this.links.forEach(getDrawLink(state).bind(this));
             this.context.stroke();
             /** nodes */
             const textRenders = [];
-            this.nodes.forEach(drawNode(textRenders).bind(this));
+            this.nodes.forEach(getDrawNode(textRenders, state).bind(this));
             textRenders.forEach((render) => render());
             this.context.restore();
-            this.listeners.onDrawFinished?.(this.state);
+            this.listeners.onDrawFinished?.(state);
             calculateHighlightFading.bind(this)();
         }
-        function drawLink(link, index) {
-            if (!this.context ||
-                typeof link.source !== "object" ||
-                typeof link.target !== "object" ||
-                !link.source.x ||
-                !link.source.y ||
-                !link.target.x ||
-                !link.target.y)
-                return;
-            const linkOptions = linkIterationExtractor(link, index, this.links, this.state, this.linkSettings.options ?? {}, linkOptionsGetter);
-            let alpha = linkOptions.alpha;
-            if (this.highlightedNeighbors && this.highlightedNode) {
-                /** Not highlighted */
-                if (this.highlightedNode.id != link.source.id &&
-                    this.highlightedNode.id != link.target.id) {
-                    if (linkOptions.highlightFading)
-                        alpha =
-                            this.graphSettings.highlightLinkFadingMin +
-                                (alpha - this.graphSettings.highlightLinkFadingMin) * (1 - this.highlightProgress);
+        function getDrawLink(state) {
+            return function drawLink(link, index) {
+                if (!this.context ||
+                    typeof link.source !== "object" ||
+                    typeof link.target !== "object" ||
+                    !link.source.x ||
+                    !link.source.y ||
+                    !link.target.x ||
+                    !link.target.y)
+                    return;
+                const linkOptions = linkIterationExtractor(link, index, this.links, state, this.linkSettings.options ?? {}, linkOptionsGetter);
+                if (linkOptions.drawLink) {
+                    linkOptions.drawLink(link, linkOptions, state);
+                    return;
                 }
-                this.context.beginPath();
-            }
-            this.context.globalAlpha = alpha;
-            this.context.strokeStyle = linkOptions.color;
-            this.context.lineWidth = linkOptions.width;
-            if (linkOptions.pretty) {
-                const { x1, x2, y1, y2 } = calculateLinkPositionByRadius(link) ?? {
-                    x1: 0,
-                    x2: 0,
-                    y1: 0,
-                    y2: 0,
-                };
-                this.context.moveTo(x1, y1);
-                this.context.lineTo(x2, y2);
-            }
-            else {
-                this.context.moveTo(link.source.x, link.source.y);
-                this.context.lineTo(link.target.x, link.target.y);
-            }
-            if (this.highlightedNeighbors && this.highlightedNode)
-                this.context.stroke();
-        }
-        const drawNode = (textRenders) => function drawNode(node, index) {
-            if (!this.context || !node.x || !node.y)
-                return;
-            const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this.state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
-            let alpha = nodeOptions.alpha;
-            let color = nodeOptions.color;
-            let radiusInitial = nodeOptions.radius ?? this.graphSettings.nodeRadiusInitial;
-            let textAlpha = nodeOptions.textAlpha;
-            let textSize = nodeOptions.textSize;
-            let textShiftX = nodeOptions.textShiftX;
-            let textShiftY = nodeOptions.textShiftY;
-            let textWeight = nodeOptions.textWeight;
-            let textWidth = nodeOptions.textWidth;
-            if (this.highlightedNeighbors && this.highlightedNode) {
-                /** Not highlighted */
-                if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {
-                    if (nodeOptions.highlightFading) {
-                        alpha =
-                            this.graphSettings.highlightFadingMin +
-                                (alpha - this.graphSettings.highlightFadingMin) * (1 - this.highlightProgress);
+                let alpha = linkOptions.alpha;
+                if (this.highlightedNeighbors && this.highlightedNode) {
+                    /** Not highlighted */
+                    if (this.highlightedNode.id != link.source.id &&
+                        this.highlightedNode.id != link.target.id) {
+                        if (linkOptions.highlightFading)
+                            alpha =
+                                this.graphSettings.highlightLinkFadingMin +
+                                    (alpha - this.graphSettings.highlightLinkFadingMin) * (1 - this.highlightProgress);
                     }
-                    if (nodeOptions.highlightTextFading) {
-                        textAlpha =
-                            this.graphSettings.highlightTextFadingMin +
-                                (textAlpha - this.graphSettings.highlightTextFadingMin) *
-                                    (1 - this.highlightProgress);
+                    this.context.beginPath();
+                }
+                this.context.globalAlpha = alpha;
+                this.context.strokeStyle = linkOptions.color;
+                this.context.lineWidth = linkOptions.width;
+                if (linkOptions.pretty) {
+                    const { x1, x2, y1, y2 } = calculateLinkPositionByRadius(link) ?? {
+                        x1: 0,
+                        x2: 0,
+                        y1: 0,
+                        y2: 0,
+                    };
+                    this.context.moveTo(x1, y1);
+                    this.context.lineTo(x2, y2);
+                }
+                else {
+                    this.context.moveTo(link.source.x, link.source.y);
+                    this.context.lineTo(link.target.x, link.target.y);
+                }
+                if (this.highlightedNeighbors && this.highlightedNode)
+                    this.context.stroke();
+                if (linkOptions.drawExtraLink) {
+                    linkOptions.drawExtraLink(link, { ...linkOptions, alpha }, state);
+                }
+            };
+        }
+        function getDrawNode(textRenders, state) {
+            return function drawNode(node, index) {
+                if (!this.context || !node.x || !node.y)
+                    return;
+                const nodeOptions = nodeIterationExtractor(node, index, this.nodes, state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+                if (nodeOptions.nodeDraw) {
+                    nodeOptions.nodeDraw(node, nodeOptions, state);
+                    return;
+                }
+                let alpha = nodeOptions.alpha;
+                let color = nodeOptions.color;
+                let radiusInitial = nodeOptions.radius ?? this.graphSettings.nodeRadiusInitial;
+                let textAlpha = nodeOptions.textAlpha;
+                let textSize = nodeOptions.textSize;
+                let textShiftX = nodeOptions.textShiftX;
+                let textShiftY = nodeOptions.textShiftY;
+                let textWeight = nodeOptions.textWeight;
+                let textWidth = nodeOptions.textWidth;
+                if (this.highlightedNeighbors && this.highlightedNode) {
+                    /** Not highlighted */
+                    if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {
+                        if (nodeOptions.highlightFading) {
+                            alpha =
+                                this.graphSettings.highlightFadingMin +
+                                    (alpha - this.graphSettings.highlightFadingMin) * (1 - this.highlightProgress);
+                        }
+                        if (nodeOptions.highlightTextFading) {
+                            textAlpha =
+                                this.graphSettings.highlightTextFadingMin +
+                                    (textAlpha - this.graphSettings.highlightTextFadingMin) *
+                                        (1 - this.highlightProgress);
+                        }
+                        if (nodeOptions.highlightColor) {
+                            const colorRgb = extractRgb(colorToRgb(color));
+                            if (colorRgb) {
+                                const colorRgbFade = fadeRgb(colorRgb, this.graphSettings.highlightColorFadingMin);
+                                const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbFade, this.highlightProgress);
+                                color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+                            }
+                        }
                     }
-                    if (nodeOptions.highlightColor) {
-                        const colorRgb = extractRgb(colorToRgb(color));
-                        if (colorRgb) {
-                            const colorRgbFade = fadeRgb(colorRgb, this.graphSettings.highlightColorFadingMin);
-                            const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbFade, this.highlightProgress);
-                            color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+                    else if (!this.graphSettings.highlightOnlyRoot ||
+                        (this.graphSettings.highlightOnlyRoot && this.highlightedNode.id === node.id)) {
+                        /** Highlighted */
+                        if (nodeOptions.highlightSizing) {
+                            const radiusMax = radiusInitial + this.graphSettings.highlightSizingAdditional;
+                            radiusInitial += ((radiusMax - radiusInitial) / 100) * (this.highlightProgress * 100);
+                        }
+                        if (nodeOptions.highlightTextSizing) {
+                            const textSizeMax = textSize + this.graphSettings.highlightTextSizingAdditional;
+                            const textShiftXMax = textShiftX + this.graphSettings.highlightTextShiftXAdditional;
+                            const textShiftYMax = textShiftY + this.graphSettings.highlightTextShiftYAdditional;
+                            const textWeightMax = textWeight + this.graphSettings.highlightTextWeightAdditional;
+                            const textWidthMax = textWidth + this.graphSettings.highlightTextWidthAdditional;
+                            textSize += ((textSizeMax - textSize) / 100) * (this.highlightProgress * 100);
+                            textShiftX += ((textShiftXMax - textShiftX) / 100) * (this.highlightProgress * 100);
+                            textShiftY += ((textShiftYMax - textShiftY) / 100) * (this.highlightProgress * 100);
+                            textWeight += ((textWeightMax - textWeight) / 100) * (this.highlightProgress * 100);
+                            textWidth += ((textWidthMax - textWidth) / 100) * (this.highlightProgress * 100);
                         }
                     }
                 }
-                else if (!this.graphSettings.highlightOnlyRoot ||
-                    (this.graphSettings.highlightOnlyRoot && this.highlightedNode.id === node.id)) {
-                    /** Highlighted */
-                    if (nodeOptions.highlightSizing) {
-                        const radiusMax = radiusInitial + this.graphSettings.highlightSizingAdditional;
-                        radiusInitial += ((radiusMax - radiusInitial) / 100) * (this.highlightProgress * 100);
-                    }
-                    if (nodeOptions.highlightTextSizing) {
-                        const textSizeMax = textSize + this.graphSettings.highlightTextSizingAdditional;
-                        const textShiftXMax = textShiftX + this.graphSettings.highlightTextShiftXAdditional;
-                        const textShiftYMax = textShiftY + this.graphSettings.highlightTextShiftYAdditional;
-                        const textWeightMax = textWeight + this.graphSettings.highlightTextWeightAdditional;
-                        const textWidthMax = textWidth + this.graphSettings.highlightTextWidthAdditional;
-                        textSize += ((textSizeMax - textSize) / 100) * (this.highlightProgress * 100);
-                        textShiftX += ((textShiftXMax - textShiftX) / 100) * (this.highlightProgress * 100);
-                        textShiftY += ((textShiftYMax - textShiftY) / 100) * (this.highlightProgress * 100);
-                        textWeight += ((textWeightMax - textWeight) / 100) * (this.highlightProgress * 100);
-                        textWidth += ((textWidthMax - textWidth) / 100) * (this.highlightProgress * 100);
-                    }
+                const radius = nodeRadiusGetter({
+                    radiusFlexible: this.graphSettings.nodeRadiusFlexible,
+                    radiusInitial,
+                    radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
+                    radiusFactor: this.graphSettings.nodeRadiusFactor,
+                    linkCount: node.linkCount,
+                });
+                node._radius = radius;
+                this.context.beginPath();
+                this.context.globalAlpha = alpha;
+                /** text */
+                if (nodeOptions.textVisible && nodeOptions.text) {
+                    textRenders.push(() => {
+                        if (nodeOptions.textDraw) {
+                            nodeOptions.textDraw(node, {
+                                ...nodeOptions,
+                                radius,
+                                alpha,
+                                color,
+                                textAlpha,
+                                textSize,
+                                textShiftX,
+                                textShiftY,
+                                textWeight,
+                                textWidth,
+                            }, state);
+                            return;
+                        }
+                        if (!this.context || !node.x || !node.y || !nodeOptions.text)
+                            return;
+                        this.context.beginPath();
+                        this.context.globalAlpha = textAlpha;
+                        drawText({
+                            id: node.id,
+                            cachedNodeText: this.cachedNodeText,
+                            context: this.context,
+                            text: nodeOptions.text,
+                            textAlign: nodeOptions.textAlign,
+                            textColor: nodeOptions.textColor,
+                            textFont: nodeOptions.textFont,
+                            textSize,
+                            x: node.x + textShiftX,
+                            y: node.y + radius + textShiftY,
+                            maxWidth: textWidth,
+                            textStyle: nodeOptions.textStyle,
+                            textWeight,
+                            textGap: nodeOptions.textGap,
+                        });
+                        if (nodeOptions.textExtraDraw) {
+                            nodeOptions.textExtraDraw(node, {
+                                ...nodeOptions,
+                                radius,
+                                alpha,
+                                color,
+                                textAlpha,
+                                textSize,
+                                textShiftX,
+                                textShiftY,
+                                textWeight,
+                                textWidth,
+                            }, state);
+                        }
+                    });
                 }
-            }
-            const radius = nodeRadiusGetter({
-                radiusFlexible: this.graphSettings.nodeRadiusFlexible,
-                radiusInitial,
-                radiusCoefficient: this.graphSettings.nodeRadiusCoefficient,
-                radiusFactor: this.graphSettings.nodeRadiusFactor,
-                linkCount: node.linkCount,
-            });
-            node._radius = radius;
-            this.context.beginPath();
-            this.context.globalAlpha = alpha;
-            /** text */
-            if (nodeOptions.textVisible && nodeOptions.text) {
-                textRenders.push(() => {
-                    if (!this.context || !node.x || !node.y || !nodeOptions.text)
-                        return;
-                    this.context.beginPath();
-                    this.context.globalAlpha = textAlpha;
-                    drawText({
-                        id: node.id,
-                        cachedNodeText: this.cachedNodeText,
-                        context: this.context,
-                        text: nodeOptions.text,
-                        textAlign: nodeOptions.textAlign,
-                        textColor: nodeOptions.textColor,
-                        textFont: nodeOptions.textFont,
+                /** circle */
+                this.context.lineWidth = nodeOptions.borderWidth;
+                this.context.strokeStyle = nodeOptions.borderColor;
+                this.context.fillStyle = color;
+                this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+                this.context.fill();
+                this.context.stroke();
+                if (nodeOptions.nodeExtraDraw) {
+                    nodeOptions.nodeExtraDraw(node, {
+                        ...nodeOptions,
+                        radius,
+                        alpha,
+                        color,
+                        textAlpha,
                         textSize,
-                        x: node.x + textShiftX,
-                        y: node.y + radius + textShiftY,
-                        maxWidth: textWidth,
-                        textStyle: nodeOptions.textStyle,
+                        textShiftX,
+                        textShiftY,
                         textWeight,
-                        textGap: nodeOptions.textGap,
-                    });
-                });
-            }
-            /** circle */
-            this.context.lineWidth = nodeOptions.borderWidth;
-            this.context.strokeStyle = nodeOptions.borderColor;
-            this.context.fillStyle = color;
-            this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
-            this.context.fill();
-            this.context.stroke();
-        };
+                        textWidth,
+                    }, state);
+                }
+            };
+        }
         return draw;
     }
     initResize() {
@@ -1116,7 +1181,7 @@ class GraphCanvas {
             const [coefficientX, coefficientY] = jsHelpers.isArray(coefficient)
                 ? coefficient
                 : [coefficient, coefficient];
-            const [[minX = -this.width * coefficientX, minY = -this.height * coefficientX], [maxX = this.width * coefficientY, maxY = this.height * coefficientY],] = this.graphSettings.translateExtent;
+            const [[minX = -this.width * coefficientX, minY = -this.height * coefficientY], [maxX = this.width * coefficientX, maxY = this.height * coefficientY],] = this.graphSettings.translateExtent;
             zoomInstance.translateExtent([
                 [minX, minY],
                 [maxX, maxY],