@krainovsd/graph 0.8.3 → 0.9.0

package/lib/esm/module/GraphCanvas/GraphCanvas.js

@@ -1,9 +1,10 @@
-import { isBoolean, isArray } from '@krainovsd/js-helpers';
+import { isBoolean, isArray, isObject } from '@krainovsd/js-helpers';
 import { greatest } from 'd3-array';
 import { drag } from 'd3-drag';
 import { forceLink, forceSimulation, forceX, forceY, forceManyBody, forceCenter, forceCollide } from 'd3-force';
 import { create, select } from 'd3-selection';
 import { zoomIdentity, zoom, ZoomTransform } from 'd3-zoom';
+import { checkType } from '../../lib/check-type.js';
 import { colorToRgb } from '../../lib/color-to-rgb.js';
 import { extractRgb } from '../../lib/extract-rgb.js';
 import { fadeRgb } from '../../lib/fade-rgb.js';
@@ -22,6 +23,7 @@ import { calculateLinkPositionByRadius } from './lib/utils/calculate-link-positi
 import { animationByProgress } from './lib/utils/animation-by-progress.js';
 import { isNodeVisible } from './lib/utils/is-node-visible.js';
 import { getParticlePosition } from './lib/utils/get-particle-position.js';
+import { linkByPointerGetter } from './lib/utils/link-by-pointer-getter.js';
 import { getDrawTime, setDrawTime } from '../../lib/draw-time.js';
 
 class GraphCanvas {
@@ -52,6 +54,7 @@ class GraphCanvas {
     nodeOptionsCache = {};
     isDragging = false;
     highlightedNode = null;
+    highlightedLink = null;
     highlightedNeighbors = null;
     highlightProgress = 1;
     highlightWorking = false;
@@ -73,6 +76,7 @@ class GraphCanvas {
             highlightDrawing: this.highlightDrawing,
             highlightedNeighbors: this.highlightedNeighbors,
             highlightedNode: this.highlightedNode,
+            highlightedLink: this.highlightedLink,
             highlightWorking: this.highlightWorking,
             isDragging: this.isDragging,
             simulation: this.simulation,
@@ -144,6 +148,10 @@ class GraphCanvas {
         }
         this.tick();
     }
+    updateRect() {
+        if (this.area)
+            this.areaRect = this.area.getBoundingClientRect();
+    }
     clearCache() {
         this.nodeOptionsCache = {};
         this.linkOptionsCache = {};
@@ -199,6 +207,7 @@ class GraphCanvas {
     clearState() {
         this.isDragging = false;
         this.highlightedNode = null;
+        this.highlightedLink = null;
         this.highlightedNeighbors = null;
         this.highlightProgress = 0;
         this.highlightWorking = false;
@@ -359,9 +368,10 @@ class GraphCanvas {
                 return void requestAnimationFrame(() => this.draw());
             }
             if (!this.highlightWorking && this.highlightProgress <= 0) {
-                if (this.highlightedNeighbors || this.highlightedNode) {
+                if (this.highlightedNeighbors || this.highlightedNode || this.highlightedLink) {
                     this.highlightedNeighbors = null;
                     this.highlightedNode = null;
+                    this.highlightedLink = null;
                     this.particles = {};
                     if (!this.simulationWorking)
                         return void requestAnimationFrame(() => this.draw());
@@ -381,6 +391,8 @@ class GraphCanvas {
                         this.highlightedNeighbors = null;
                     if (this.highlightedNode)
                         this.highlightedNode = null;
+                    if (this.highlightedLink)
+                        this.highlightedLink = null;
                 });
                 return;
             }
@@ -429,21 +441,49 @@ class GraphCanvas {
                 }
                 let alpha = linkOptions.alpha;
                 let arrowAlpha = linkOptions.arrowReverseAppear ? 0 : linkOptions.arrowAlpha;
+                /** NODE HIGHLIGHT */
                 if (this.highlightedNeighbors && this.highlightedNode) {
                     /** Not highlighted */
                     if (this.highlightedNode.id != link.source.id &&
                         this.highlightedNode.id != link.target.id) {
-                        if (linkOptions.highlightFading) {
-                            const min = this.graphSettings.highlightLinkFadingMin < alpha
-                                ? this.graphSettings.highlightLinkFadingMin
+                        if (linkOptions.highlightByNodeLinkFading) {
+                            const min = this.graphSettings.highlightByNodeLinkFadingMin < alpha
+                                ? this.graphSettings.highlightByNodeLinkFadingMin
                                 : alpha;
                             alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
                         }
                         if (linkOptions.arrow &&
-                            linkOptions.arrowHighlightFading &&
+                            linkOptions.highlightByNodeArrowFading &&
                             !linkOptions.arrowReverseAppear) {
-                            const min = this.graphSettings.highlightArrowFadingMin < arrowAlpha
-                                ? this.graphSettings.highlightArrowFadingMin
+                            const min = this.graphSettings.highlightByNodeArrowFadingMin < arrowAlpha
+                                ? this.graphSettings.highlightByNodeArrowFadingMin
+                                : arrowAlpha;
+                            arrowAlpha = animationByProgress(min, arrowAlpha - min, 1 - this.highlightProgress);
+                        }
+                    }
+                    else {
+                        // eslint-disable-next-line no-lonely-if
+                        if (linkOptions.arrow && linkOptions.arrowReverseAppear) {
+                            /** Highlighted */
+                            arrowAlpha = animationByProgress(0, linkOptions.arrowAlpha, this.highlightProgress);
+                        }
+                    }
+                }
+                /** LINK HIGHLIGHT */
+                if (this.highlightedNeighbors && this.highlightedLink) {
+                    /** Not highlighted */
+                    if (this.highlightedLink !== link) {
+                        if (linkOptions.highlightByLinkLinkFading) {
+                            const min = this.graphSettings.highlightByLinkLinkFadingMin < alpha
+                                ? this.graphSettings.highlightByLinkLinkFadingMin
+                                : alpha;
+                            alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
+                        }
+                        if (linkOptions.arrow &&
+                            linkOptions.highlightByLinkArrowFading &&
+                            !linkOptions.arrowReverseAppear) {
+                            const min = this.graphSettings.highlightByLinkArrowFadingMin < arrowAlpha
+                                ? this.graphSettings.highlightByLinkArrowFadingMin
                                 : arrowAlpha;
                             arrowAlpha = animationByProgress(min, arrowAlpha - min, 1 - this.highlightProgress);
                         }
@@ -483,8 +523,10 @@ class GraphCanvas {
                 this.context.stroke();
                 /** Particle */
                 if (this.linkSettings.particles &&
-                    this.highlightedNode &&
-                    (this.highlightedNode.id === link.source.id || this.highlightedNode.id === link.target.id)) {
+                    ((this.highlightedNode &&
+                        (this.highlightedNode.id === link.source.id ||
+                            this.highlightedNode.id === link.target.id)) ||
+                        (this.highlightedLink && this.highlightedLink === link))) {
                     if (!this.particles[id]) {
                         const sourceId = link.source.id;
                         const targetId = link.target.id;
@@ -573,42 +615,84 @@ class GraphCanvas {
                 let textShiftY = nodeOptions.textShiftY;
                 let textWeight = nodeOptions.textWeight;
                 let textWidth = nodeOptions.textWidth;
+                /** Node Highlight */
                 if (this.highlightedNeighbors && this.highlightedNode) {
                     /** Not highlighted */
                     if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {
-                        if (nodeOptions.highlightFading) {
-                            const min = this.graphSettings.highlightFadingMin < alpha
-                                ? this.graphSettings.highlightFadingMin
+                        if (nodeOptions.highlightByNodeNodeFading) {
+                            const min = this.graphSettings.highlightByNodeNodeFadingMin < alpha
+                                ? this.graphSettings.highlightByNodeNodeFadingMin
                                 : alpha;
                             alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
                         }
-                        if (nodeOptions.highlightTextFading) {
-                            const min = this.graphSettings.highlightTextFadingMin < textAlpha
-                                ? this.graphSettings.highlightTextFadingMin
+                        if (nodeOptions.highlightByNodeTextFading) {
+                            const min = this.graphSettings.highlightByNodeTextFadingMin < textAlpha
+                                ? this.graphSettings.highlightByNodeTextFadingMin
                                 : textAlpha;
                             textAlpha = animationByProgress(min, textAlpha - min, 1 - this.highlightProgress);
                         }
-                        if (nodeOptions.highlightColor) {
+                        if (nodeOptions.highlightByNodeNodeColor) {
                             const colorRgb = extractRgb(colorToRgb(color));
                             if (colorRgb) {
-                                const colorRgbFade = fadeRgb(colorRgb, this.graphSettings.highlightColorFadingMin);
+                                const colorRgbFade = fadeRgb(colorRgb, this.graphSettings.highlightByNodeNodeColorFadingMin);
                                 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)) {
+                    else if (!this.graphSettings.highlightByNodeOnlyRoot ||
+                        (this.graphSettings.highlightByNodeOnlyRoot && this.highlightedNode.id === node.id)) {
                         /** Highlighted */
-                        if (nodeOptions.highlightSizing) {
-                            radiusInitial = animationByProgress(radiusInitial, this.graphSettings.highlightSizingAdditional, this.highlightProgress);
+                        if (nodeOptions.highlightByNodeNodeSizing) {
+                            radiusInitial = animationByProgress(radiusInitial, this.graphSettings.highlightByNodeNodeSizingAdditional, this.highlightProgress);
                         }
-                        if (nodeOptions.highlightTextSizing) {
-                            textSize = animationByProgress(textSize, this.graphSettings.highlightTextSizingAdditional, this.highlightProgress);
-                            textShiftX = animationByProgress(textShiftX, this.graphSettings.highlightTextShiftXAdditional, this.highlightProgress);
-                            textShiftY = animationByProgress(textShiftY, this.graphSettings.highlightTextShiftYAdditional, this.highlightProgress);
-                            textWeight = animationByProgress(textWeight, this.graphSettings.highlightTextWeightAdditional, this.highlightProgress);
-                            textWidth = animationByProgress(textWidth, this.graphSettings.highlightTextWidthAdditional, this.highlightProgress);
+                        if (nodeOptions.highlightByNodeTextSizing) {
+                            textSize = animationByProgress(textSize, this.graphSettings.highlightByNodeTextSizingAdditional, this.highlightProgress);
+                            textShiftX = animationByProgress(textShiftX, this.graphSettings.highlightByNodeTextShiftXAdditional, this.highlightProgress);
+                            textShiftY = animationByProgress(textShiftY, this.graphSettings.highlightByNodeTextShiftYAdditional, this.highlightProgress);
+                            textWeight = animationByProgress(textWeight, this.graphSettings.highlightByNodeTextWeightAdditional, this.highlightProgress);
+                            textWidth = animationByProgress(textWidth, this.graphSettings.highlightByNodeTextWidthAdditional, this.highlightProgress);
+                        }
+                    }
+                }
+                /** LinkHighlight */
+                if (this.highlightedNeighbors && this.highlightedLink) {
+                    /** Not highlighted */
+                    if (!this.highlightedNeighbors.has(node.id) &&
+                        this.highlightedLink.source !== node &&
+                        this.highlightedLink.target !== node) {
+                        if (nodeOptions.highlightByLinkNodeFading) {
+                            const min = this.graphSettings.highlightByLinkNodeFadingMin < alpha
+                                ? this.graphSettings.highlightByLinkNodeFadingMin
+                                : alpha;
+                            alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
+                        }
+                        if (nodeOptions.highlightByLinkTextFading) {
+                            const min = this.graphSettings.highlightByLinkTextFadingMin < textAlpha
+                                ? this.graphSettings.highlightByLinkTextFadingMin
+                                : textAlpha;
+                            textAlpha = animationByProgress(min, textAlpha - min, 1 - this.highlightProgress);
+                        }
+                        if (nodeOptions.highlightByLinkNodeColor) {
+                            const colorRgb = extractRgb(colorToRgb(color));
+                            if (colorRgb) {
+                                const colorRgbFade = fadeRgb(colorRgb, this.graphSettings.highlightByLinkNodeColorFadingMin);
+                                const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbFade, this.highlightProgress);
+                                color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+                            }
+                        }
+                    }
+                    else {
+                        /** Highlighted */
+                        if (nodeOptions.highlightByLinkNodeSizing) {
+                            radiusInitial = animationByProgress(radiusInitial, this.graphSettings.highlightByLinkNodeSizingAdditional, this.highlightProgress);
+                        }
+                        if (nodeOptions.highlightByLinkTextSizing) {
+                            textSize = animationByProgress(textSize, this.graphSettings.highlightByLinkTextSizingAdditional, this.highlightProgress);
+                            textShiftX = animationByProgress(textShiftX, this.graphSettings.highlightByLinkTextShiftXAdditional, this.highlightProgress);
+                            textShiftY = animationByProgress(textShiftY, this.graphSettings.highlightByLinkTextShiftYAdditional, this.highlightProgress);
+                            textWeight = animationByProgress(textWeight, this.graphSettings.highlightByLinkTextWeightAdditional, this.highlightProgress);
+                            textWidth = animationByProgress(textWidth, this.graphSettings.highlightByLinkTextWidthAdditional, this.highlightProgress);
                         }
                     }
                 }
@@ -740,11 +824,7 @@ class GraphCanvas {
                 this.updateSize();
             });
         });
-        function updateRect() {
-            if (this.area)
-                this.areaRect = this.area.getBoundingClientRect();
-        }
-        document.addEventListener("scroll", updateRect.bind(this), {
+        document.addEventListener("scroll", this.updateRect.bind(this), {
             capture: true,
             passive: true,
             signal: abortController.signal,
@@ -754,10 +834,14 @@ class GraphCanvas {
     initPointer() {
         if (!this.area || !this.nodes || !this.simulation)
             throw new Error("bad init data");
-        /** hover */
-        this.area.addEventListener("pointermove", (event) => {
+        function onHover(event) {
+            if (!this.area)
+                return;
             let currentNode;
-            if (this.graphSettings.highlightByHover && !this.isDragging) {
+            let currentLink;
+            const checkHighlightNode = this.graphSettings.highlightByHoverNode && !this.isDragging;
+            const checkHighlightLink = this.graphSettings.highlightByHoverLink && !this.isDragging;
+            if (checkHighlightNode) {
                 currentNode = nodeByPointerGetter({
                     graphSettings: this.graphSettings,
                     areaRect: this.areaRect,
@@ -765,26 +849,61 @@ class GraphCanvas {
                     mouseEvent: event,
                     nodes: this.nodes,
                 });
-                if (currentNode && this.highlightedNode !== currentNode) {
-                    this.highlightedNode = currentNode;
-                    this.highlightedNeighbors = new Set(this.highlightedNode?.neighbors ?? []);
-                    this.highlightWorking = true;
-                    if (!this.simulationWorking && !this.highlightDrawing)
-                        requestAnimationFrame(() => {
-                            this.draw();
-                        });
+            }
+            if (currentNode) {
+                this.area.style.cursor = "pointer";
+            }
+            else if (checkHighlightLink) {
+                currentLink = linkByPointerGetter({
+                    graphSettings: this.graphSettings,
+                    areaRect: this.areaRect,
+                    areaTransform: this.areaTransform,
+                    mouseEvent: event,
+                    links: this.links,
+                });
+                if (currentLink) {
+                    this.area.style.cursor = "pointer";
                 }
-                else if (!currentNode && this.highlightedNode) {
-                    this.highlightWorking = false;
-                    if (!this.simulationWorking && !this.highlightDrawing)
-                        requestAnimationFrame(() => {
-                            this.draw();
-                        });
+                else {
+                    this.area.style.cursor = "default";
                 }
             }
+            else {
+                this.area.style.cursor = "default";
+            }
+            if (currentNode && this.highlightedNode !== currentNode) {
+                this.highlightedNode = currentNode;
+                this.highlightedLink = null;
+                this.highlightedNeighbors = new Set(this.highlightedNode?.neighbors ?? []);
+                this.highlightWorking = true;
+                if (!this.simulationWorking && !this.highlightDrawing)
+                    requestAnimationFrame(() => {
+                        this.draw();
+                    });
+            }
+            else if (currentLink &&
+                checkType(currentLink.source, isObject(currentLink.source)) &&
+                checkType(currentLink.target, isObject(currentLink.target)) &&
+                this.highlightedLink !== currentLink) {
+                this.highlightedLink = currentLink;
+                this.highlightedNode = null;
+                this.highlightedNeighbors = new Set([currentLink.source.id, currentLink.target.id]);
+                this.highlightWorking = true;
+                if (!this.simulationWorking && !this.highlightDrawing)
+                    requestAnimationFrame(() => {
+                        this.draw();
+                    });
+            }
+            else if (!currentNode && !currentLink && (this.highlightedNode || this.highlightedLink)) {
+                this.highlightWorking = false;
+                if (!this.simulationWorking && !this.highlightDrawing)
+                    requestAnimationFrame(() => {
+                        this.draw();
+                    });
+            }
             if (!this.listeners.onMove)
                 return;
-            if (!currentNode)
+            if (!currentNode && !checkHighlightNode)
                 currentNode = nodeByPointerGetter({
                     graphSettings: this.graphSettings,
                     areaRect: this.areaRect,
@@ -792,13 +911,23 @@ class GraphCanvas {
                     mouseEvent: event,
                     nodes: this.nodes,
                 });
-            return void this.listeners.onMove(event, currentNode);
-        }, {
-            signal: this.eventAbortController.signal,
-        });
-        /** dblclick */
-        this.area.addEventListener("dblclick", (event) => {
-            if (!this.listeners.onDoubleClick)
+            if (!currentNode && (!checkHighlightNode || (!checkHighlightLink && !currentLink))) {
+                currentLink = linkByPointerGetter({
+                    graphSettings: this.graphSettings,
+                    areaRect: this.areaRect,
+                    areaTransform: this.areaTransform,
+                    mouseEvent: event,
+                    links: this.links,
+                });
+            }
+            if (!currentNode)
+                return void this.listeners.onMove(event, currentNode, currentLink);
+        }
+        function onWheelClick(event) {
+            if (this.isDragging ||
+                !this.listeners.onWheelClick ||
+                !("button" in event) ||
+                event.button !== 1)
                 return;
             const currentNode = nodeByPointerGetter({
                 graphSettings: this.graphSettings,
@@ -807,11 +936,20 @@ class GraphCanvas {
                 mouseEvent: event,
                 nodes: this.nodes,
             });
-            return void this.listeners.onDoubleClick(event, currentNode);
-        });
-        /** wheel click */
-        this.area.addEventListener("mousedown", (event) => {
-            if (this.isDragging || !this.listeners.onWheelClick || event.button !== 1)
+            if (!currentNode) {
+                const currentLink = linkByPointerGetter({
+                    graphSettings: this.graphSettings,
+                    areaRect: this.areaRect,
+                    areaTransform: this.areaTransform,
+                    mouseEvent: event,
+                    links: this.links,
+                });
+                return void this.listeners.onWheelClick(event, undefined, currentLink);
+            }
+            return void this.listeners.onWheelClick(event, currentNode, undefined);
+        }
+        function onRightClick(event) {
+            if (!this.listeners.onContextMenu)
                 return;
             const currentNode = nodeByPointerGetter({
                 graphSettings: this.graphSettings,
@@ -820,13 +958,20 @@ class GraphCanvas {
                 mouseEvent: event,
                 nodes: this.nodes,
             });
-            return void this.listeners.onWheelClick(event, currentNode);
-        }, {
-            signal: this.eventAbortController.signal,
-        });
-        /** click */
-        this.area.addEventListener("click", (event) => {
-            if (this.isDragging || !this.listeners.onClick || event.button !== 0)
+            if (!currentNode) {
+                const currentLink = linkByPointerGetter({
+                    graphSettings: this.graphSettings,
+                    areaRect: this.areaRect,
+                    areaTransform: this.areaTransform,
+                    mouseEvent: event,
+                    links: this.links,
+                });
+                return void this.listeners.onContextMenu(event, undefined, currentLink);
+            }
+            return void this.listeners.onContextMenu(event, currentNode, undefined);
+        }
+        function onDoubleClick(event) {
+            if (!this.listeners.onDoubleClick)
                 return;
             const currentNode = nodeByPointerGetter({
                 graphSettings: this.graphSettings,
@@ -835,13 +980,20 @@ class GraphCanvas {
                 mouseEvent: event,
                 nodes: this.nodes,
             });
-            return void this.listeners.onClick(event, currentNode);
-        }, {
-            signal: this.eventAbortController.signal,
-        });
-        /** right click */
-        this.area.addEventListener("contextmenu", (event) => {
-            if (!this.listeners.onContextMenu)
+            if (!currentNode) {
+                const currentLink = linkByPointerGetter({
+                    graphSettings: this.graphSettings,
+                    areaRect: this.areaRect,
+                    areaTransform: this.areaTransform,
+                    mouseEvent: event,
+                    links: this.links,
+                });
+                return void this.listeners.onDoubleClick(event, undefined, currentLink);
+            }
+            return void this.listeners.onDoubleClick(event, currentNode, undefined);
+        }
+        function onClick(event) {
+            if (this.isDragging || !this.listeners.onClick || ("button" in event && event.button !== 0))
                 return;
             const currentNode = nodeByPointerGetter({
                 graphSettings: this.graphSettings,
@@ -850,15 +1002,46 @@ class GraphCanvas {
                 mouseEvent: event,
                 nodes: this.nodes,
             });
-            return void this.listeners.onContextMenu(event, currentNode);
-        }, {
+            if (!currentNode) {
+                const currentLink = linkByPointerGetter({
+                    graphSettings: this.graphSettings,
+                    areaRect: this.areaRect,
+                    areaTransform: this.areaTransform,
+                    mouseEvent: event,
+                    links: this.links,
+                });
+                return void this.listeners.onClick(event, undefined, currentLink);
+            }
+            return void this.listeners.onClick(event, currentNode, undefined);
+        }
+        /** hover */
+        this.area.addEventListener("mousemove", onHover.bind(this), {
+            signal: this.eventAbortController.signal,
+        });
+        this.area.addEventListener("touchmove", onHover.bind(this), {
+            signal: this.eventAbortController.signal,
+        });
+        /** dblclick */
+        this.area.addEventListener("dblclick", onDoubleClick.bind(this), {
+            signal: this.eventAbortController.signal,
+        });
+        /** wheel click */
+        this.area.addEventListener("mousedown", onWheelClick.bind(this), {
+            signal: this.eventAbortController.signal,
+        });
+        /** click */
+        this.area.addEventListener("click", onClick.bind(this), {
+            signal: this.eventAbortController.signal,
+        });
+        /** right click */
+        this.area.addEventListener("contextmenu", onRightClick.bind(this), {
             signal: this.eventAbortController.signal,
         });
     }
     initDnd() {
         if (!this.area || !this.nodes || !this.simulation)
             throw new Error("bad init data");
-        select(this.area).call(drag()
+        const dragHandler = drag()
             .subject((event) => {
             if (this.listeners.onDragSubject) {
                 return this.listeners.onDragSubject(event, this.state);
@@ -920,7 +1103,8 @@ class GraphCanvas {
                 event.subject.fy = null;
             }
             this.listeners.onEndDragFinished?.(event, this.state);
-        }));
+        });
+        select(this.area).call(dragHandler);
     }
     initZoom(currentZoom) {
         if (!this.area)