@krainovsd/graph 0.8.3 → 0.9.0

package/lib/cjs/index.cjs

@@ -178,8 +178,14 @@ function nodeIdGetter(node) {
 }
 
 function pointerGetter(mouseEvent, areaRect, areaTransform) {
-    const px = (mouseEvent.clientX - areaRect.left - areaTransform.x) / areaTransform.k;
-    const py = (mouseEvent.clientY - areaRect.top - areaTransform.y) / areaTransform.k;
+    const clientX = "clientX" in mouseEvent
+        ? mouseEvent.clientX
+        : (mouseEvent.touches[0]?.clientX ?? mouseEvent.changedTouches[0]?.clientX);
+    const clientY = "clientX" in mouseEvent
+        ? mouseEvent.clientY
+        : (mouseEvent.touches[0]?.clientY ?? mouseEvent.changedTouches[0]?.clientY);
+    const px = (clientX - areaRect.left - areaTransform.x) / areaTransform.k;
+    const py = (clientY - areaRect.top - areaTransform.y) / areaTransform.k;
     return [px, py];
 }
 
@@ -387,6 +393,55 @@ function getParticlePosition(opts) {
     opts.particle.step++;
 }
 
+/* eslint-disable id-length */
+function linkByPointerGetter({ areaRect, areaTransform, mouseEvent, links, graphSettings, }) {
+    if (!areaRect)
+        return undefined;
+    const [pointerX, pointerY] = pointerGetter(mouseEvent, areaRect, areaTransform);
+    return d3Array.greatest(links, (link) => {
+        if (isNearLink(pointerX, pointerY, link, graphSettings.hoverLinkThreshold))
+            return link.index;
+    });
+}
+function isNearLink(mouseX, mouseY, link, threshold = 2) {
+    if (!jsHelpers.isObject(link.source) || !jsHelpers.isObject(link.target))
+        return false;
+    const x1 = link.source.x;
+    const y1 = link.source.y;
+    const x2 = link.target.x;
+    const y2 = link.target.y;
+    const distance = distanceToLine(mouseX, mouseY, x1, y1, x2, y2);
+    return distance <= threshold;
+}
+function distanceToLine(x, y, x1, y1, x2, y2) {
+    const A = x - x1;
+    const B = y - y1;
+    const C = x2 - x1;
+    const D = y2 - y1;
+    const dot = A * C + B * D;
+    const lenSq = C * C + D * D;
+    let param = -1;
+    if (lenSq !== 0) {
+        param = dot / lenSq;
+    }
+    let xx, yy;
+    if (param < 0) {
+        xx = x1;
+        yy = y1;
+    }
+    else if (param > 1) {
+        xx = x2;
+        yy = y2;
+    }
+    else {
+        xx = x1 + param * C;
+        yy = y1 + param * D;
+    }
+    const dx = x - xx;
+    const dy = y - yy;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+
 const FORCE_SETTINGS = {
     centerPosition: {},
     centerStrength: 1,
@@ -412,20 +467,34 @@ const GRAPH_SETTINGS = {
     translateExtent: [[], []],
     translateExtentEnable: true,
     translateExtentCoefficient: [3, 3],
-    highlightSizingAdditional: 0.5,
-    highlightColorFadingMin: 0.15,
-    highlightTextShiftXAdditional: 0,
-    highlightTextShiftYAdditional: 2,
-    highlightTextSizingAdditional: 1,
-    highlightTextWeightAdditional: 0,
-    highlightTextWidthAdditional: 10,
-    highlightOnlyRoot: true,
+    highlightByNodeNodeSizingAdditional: 0.5,
+    highlightByNodeNodeColorFadingMin: 0.15,
+    highlightByNodeTextShiftXAdditional: 0,
+    highlightByNodeTextShiftYAdditional: 2,
+    highlightByNodeTextSizingAdditional: 1,
+    highlightByNodeTextWeightAdditional: 0,
+    highlightByNodeTextWidthAdditional: 10,
+    highlightByNodeLinkFadingMin: 0.21,
+    highlightByNodeNodeFadingMin: 0.21,
+    highlightByNodeTextFadingMin: 0.21,
+    highlightByNodeArrowFadingMin: 0.21,
+    highlightByNodeOnlyRoot: true,
+    highlightByLinkNodeSizingAdditional: 0.5,
+    highlightByLinkNodeColorFadingMin: 0.15,
+    highlightByLinkTextShiftXAdditional: 0,
+    highlightByLinkTextShiftYAdditional: 2,
+    highlightByLinkTextSizingAdditional: 1,
+    highlightByLinkTextWeightAdditional: 0,
+    highlightByLinkTextWidthAdditional: 10,
+    highlightByLinkLinkFadingMin: 0.21,
+    highlightByLinkNodeFadingMin: 0.21,
+    highlightByLinkTextFadingMin: 0.21,
+    highlightByLinkArrowFadingMin: 0.21,
+    highlightByLinkOnlyRoot: true,
     stickAfterDrag: false,
-    highlightByHover: true,
-    highlightLinkFadingMin: 0.21,
-    highlightFadingMin: 0.21,
-    highlightTextFadingMin: 0.21,
-    highlightArrowFadingMin: 0.21,
+    highlightByHoverNode: true,
+    highlightByHoverLink: true,
+    hoverLinkThreshold: 2,
     highlightDownStep: 0.2,
     highlightUpStep: 0.2,
     dragPlaceCoefficient: dragPlaceCoefficientGetter,
@@ -454,11 +523,16 @@ const NODE_OPTIONS = {
     textStyle: "normal",
     textWeight: 500,
     textGap: 1,
-    highlightFading: true,
-    highlightColor: false,
-    highlightSizing: true,
-    highlightTextFading: true,
-    highlightTextSizing: true,
+    highlightByNodeNodeFading: true,
+    highlightByNodeNodeColor: false,
+    highlightByNodeNodeSizing: true,
+    highlightByNodeTextFading: true,
+    highlightByNodeTextSizing: true,
+    highlightByLinkNodeFading: false,
+    highlightByLinkNodeColor: false,
+    highlightByLinkNodeSizing: true,
+    highlightByLinkTextFading: false,
+    highlightByLinkTextSizing: true,
 };
 const LINK_SETTINGS = {
     cache: false,
@@ -466,12 +540,14 @@ const LINK_SETTINGS = {
 };
 const LINK_OPTIONS = {
     alpha: 1,
-    highlightFading: true,
+    highlightByNodeLinkFading: true,
+    highlightByNodeArrowFading: true,
+    highlightByLinkLinkFading: false,
+    highlightByLinkArrowFading: false,
     pretty: true,
     arrow: true,
     arrowAlpha: 1,
     arrowSize: 2,
-    arrowHighlightFading: true,
     arrowReverseAppear: true,
     particleAlpha: 1,
     particleColor: "#000000FF",
@@ -608,103 +684,214 @@ function getForceControls(keys) {
 function getGraphControls(keys) {
     const GRAPH_CONTROLS = [
         {
-            id: "highlightSizingAdditional",
-            initialValue: GRAPH_SETTINGS.highlightSizingAdditional,
+            id: "highlightByNodeNodeSizingAdditional",
+            initialValue: GRAPH_SETTINGS.highlightByNodeNodeSizingAdditional,
             max: 10,
             min: 0.1,
             step: 0.01,
             type: "range",
-            label: "Дополнительный размер при анимации",
+            label: "Дополнительный размер при анимации ноды",
         },
         {
-            id: "highlightColorFadingMin",
-            initialValue: GRAPH_SETTINGS.highlightColorFadingMin,
+            id: "highlightByNodeNodeColorFadingMin",
+            initialValue: GRAPH_SETTINGS.highlightByNodeNodeColorFadingMin,
             max: 1,
             min: 0.01,
             step: 0.01,
             type: "range",
-            label: "Граница затухания цвета",
+            label: "Граница затухания цвета при анимации ноды",
         },
         {
-            id: "highlightTextShiftXAdditional",
-            initialValue: GRAPH_SETTINGS.highlightTextShiftXAdditional,
+            id: "highlightByNodeTextShiftXAdditional",
+            initialValue: GRAPH_SETTINGS.highlightByNodeTextShiftXAdditional,
             max: 50,
             min: 0,
             step: 0.1,
             type: "range",
-            label: "Смещение текста по X при анимации",
+            label: "Смещение текста по X при анимации ноды",
         },
         {
-            id: "highlightTextShiftYAdditional",
-            initialValue: GRAPH_SETTINGS.highlightTextShiftYAdditional,
+            id: "highlightByNodeTextShiftYAdditional",
+            initialValue: GRAPH_SETTINGS.highlightByNodeTextShiftYAdditional,
             max: 50,
             min: 0,
             step: 0.1,
             type: "range",
-            label: "Смещение текста по Y при анимации",
+            label: "Смещение текста по Y при анимации ноды",
         },
         {
-            id: "highlightTextSizingAdditional",
-            initialValue: GRAPH_SETTINGS.highlightTextSizingAdditional,
+            id: "highlightByNodeTextSizingAdditional",
+            initialValue: GRAPH_SETTINGS.highlightByNodeTextSizingAdditional,
             max: 10,
             min: 0.1,
             step: 0.1,
             type: "range",
-            label: "Увеличение текста при анимации",
+            label: "Увеличение текста при анимации ноды",
         },
         {
-            id: "highlightTextWeightAdditional",
-            initialValue: GRAPH_SETTINGS.highlightTextWeightAdditional,
+            id: "highlightByNodeTextWeightAdditional",
+            initialValue: GRAPH_SETTINGS.highlightByNodeTextWeightAdditional,
             max: 1000,
             min: 0,
             step: 100,
             type: "range",
-            label: "Увеличение жирности текста при анимации",
+            label: "Увеличение жирности текста при анимации ноды",
         },
         {
-            id: "highlightTextWidthAdditional",
-            initialValue: GRAPH_SETTINGS.highlightTextWidthAdditional,
+            id: "highlightByNodeTextWidthAdditional",
+            initialValue: GRAPH_SETTINGS.highlightByNodeTextWidthAdditional,
             max: 100,
             min: 0,
             step: 0.1,
             type: "range",
-            label: "Увеличение ширины текста при анимации",
+            label: "Увеличение ширины текста при анимации ноды",
         },
         {
-            id: "highlightTextFadingMin",
-            initialValue: GRAPH_SETTINGS.highlightTextFadingMin,
+            id: "highlightByNodeTextFadingMin",
+            initialValue: GRAPH_SETTINGS.highlightByNodeTextFadingMin,
             max: 1,
             min: 0,
             step: 0.01,
             type: "range",
-            label: "Граница затухания текста при анимации",
+            label: "Граница затухания текста при анимации ноды",
         },
         {
-            id: "highlightLinkFadingMin",
-            initialValue: GRAPH_SETTINGS.highlightLinkFadingMin,
+            id: "highlightByNodeLinkFadingMin",
+            initialValue: GRAPH_SETTINGS.highlightByNodeLinkFadingMin,
             max: 1,
             min: 0,
             step: 0.01,
             type: "range",
-            label: "Граница затухания связи при анимации",
+            label: "Граница затухания связи при анимации ноды",
         },
         {
-            id: "highlightFadingMin",
-            initialValue: GRAPH_SETTINGS.highlightFadingMin,
+            id: "highlightByNodeNodeFadingMin",
+            initialValue: GRAPH_SETTINGS.highlightByNodeNodeFadingMin,
             max: 1,
             min: 0,
             step: 0.01,
             type: "range",
-            label: "Граница затухания ноды при анимации",
+            label: "Граница затухания ноды при анимации ноды",
         },
         {
-            id: "highlightArrowFadingMin",
-            initialValue: GRAPH_SETTINGS.highlightArrowFadingMin,
+            id: "highlightByNodeArrowFadingMin",
+            initialValue: GRAPH_SETTINGS.highlightByNodeArrowFadingMin,
             max: 1,
             min: 0,
             step: 0.01,
             type: "range",
-            label: "Граница затухания стрелки при анимации",
+            label: "Граница затухания стрелки при анимации ноды",
+        },
+        {
+            id: "highlightByNodeOnlyRoot",
+            type: "checkbox",
+            initialValue: GRAPH_SETTINGS.highlightByNodeOnlyRoot,
+            label: "Дополнительная анимация только главное цели при анимации ноды",
+        },
+        {
+            id: "highlightByLinkNodeSizingAdditional",
+            initialValue: GRAPH_SETTINGS.highlightByLinkNodeSizingAdditional,
+            max: 10,
+            min: 0.1,
+            step: 0.01,
+            type: "range",
+            label: "Дополнительный размер при анимации связи",
+        },
+        {
+            id: "highlightByLinkNodeColorFadingMin",
+            initialValue: GRAPH_SETTINGS.highlightByLinkNodeColorFadingMin,
+            max: 1,
+            min: 0.01,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания цвета при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextShiftXAdditional",
+            initialValue: GRAPH_SETTINGS.highlightByLinkTextShiftXAdditional,
+            max: 50,
+            min: 0,
+            step: 0.1,
+            type: "range",
+            label: "Смещение текста по X при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextShiftYAdditional",
+            initialValue: GRAPH_SETTINGS.highlightByLinkTextShiftYAdditional,
+            max: 50,
+            min: 0,
+            step: 0.1,
+            type: "range",
+            label: "Смещение текста по Y при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextSizingAdditional",
+            initialValue: GRAPH_SETTINGS.highlightByLinkTextSizingAdditional,
+            max: 10,
+            min: 0.1,
+            step: 0.1,
+            type: "range",
+            label: "Увеличение текста при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextWeightAdditional",
+            initialValue: GRAPH_SETTINGS.highlightByLinkTextWeightAdditional,
+            max: 1000,
+            min: 0,
+            step: 100,
+            type: "range",
+            label: "Увеличение жирности текста при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextWidthAdditional",
+            initialValue: GRAPH_SETTINGS.highlightByLinkTextWidthAdditional,
+            max: 100,
+            min: 0,
+            step: 0.1,
+            type: "range",
+            label: "Увеличение ширины текста при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextFadingMin",
+            initialValue: GRAPH_SETTINGS.highlightByLinkTextFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания текста при анимации связи",
+        },
+        {
+            id: "highlightByLinkLinkFadingMin",
+            initialValue: GRAPH_SETTINGS.highlightByLinkLinkFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания связи при анимации связи",
+        },
+        {
+            id: "highlightByLinkNodeFadingMin",
+            initialValue: GRAPH_SETTINGS.highlightByLinkNodeFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания ноды при анимации связи",
+        },
+        {
+            id: "highlightByLinkArrowFadingMin",
+            initialValue: GRAPH_SETTINGS.highlightByLinkArrowFadingMin,
+            max: 1,
+            min: 0,
+            step: 0.01,
+            type: "range",
+            label: "Граница затухания стрелки при анимации связи",
+        },
+        {
+            id: "highlightByLinkOnlyRoot",
+            type: "checkbox",
+            initialValue: GRAPH_SETTINGS.highlightByLinkOnlyRoot,
+            label: "Дополнительная анимация только главное цели при анимации связи",
         },
         {
             id: "highlightDownStep",
@@ -751,12 +938,6 @@ function getGraphControls(keys) {
             type: "range",
             label: "Коэффициент увеличения радиуса",
         },
-        {
-            id: "highlightOnlyRoot",
-            type: "checkbox",
-            initialValue: GRAPH_SETTINGS.highlightOnlyRoot,
-            label: "Дополнительная анимация только главное цели",
-        },
         {
             id: "stickAfterDrag",
             type: "checkbox",
@@ -764,9 +945,9 @@ function getGraphControls(keys) {
             label: "Фиксировании ноды после перетаскивания",
         },
         {
-            id: "highlightByHover",
+            id: "highlightByHoverNode",
             type: "checkbox",
-            initialValue: GRAPH_SETTINGS.highlightByHover,
+            initialValue: GRAPH_SETTINGS.highlightByHoverNode,
             label: "Анимации при наведении",
         },
         {
@@ -874,34 +1055,64 @@ function getNodeControls(keys) {
             initialValue: NODE_OPTIONS.textGap,
         },
         {
-            id: "highlightFading",
+            id: "highlightByNodeNodeFading",
             type: "checkbox",
-            initialValue: NODE_OPTIONS.highlightFading,
-            label: "Анимация затухания",
+            initialValue: NODE_OPTIONS.highlightByNodeNodeFading,
+            label: "Затухание при анимации ноды",
         },
         {
-            id: "highlightColor",
+            id: "highlightByNodeNodeColor",
             type: "checkbox",
-            initialValue: NODE_OPTIONS.highlightColor,
-            label: "Анимация затухания цвета",
+            initialValue: NODE_OPTIONS.highlightByNodeNodeColor,
+            label: "Затухание цвета при анимации ноды",
         },
         {
-            id: "highlightSizing",
+            id: "highlightByNodeNodeSizing",
             type: "checkbox",
-            initialValue: NODE_OPTIONS.highlightSizing,
-            label: "Анимация размера",
+            initialValue: NODE_OPTIONS.highlightByNodeNodeSizing,
+            label: "Изменение размера при анимации ноды",
         },
         {
-            id: "highlightTextFading",
+            id: "highlightByNodeTextFading",
             type: "checkbox",
-            initialValue: NODE_OPTIONS.highlightTextFading,
-            label: "Анимация затухания текста",
+            initialValue: NODE_OPTIONS.highlightByNodeTextFading,
+            label: "Затухание текста при анимации ноды",
         },
         {
-            id: "highlightTextSizing",
+            id: "highlightByNodeTextSizing",
             type: "checkbox",
-            initialValue: NODE_OPTIONS.highlightTextSizing,
-            label: "Анимация размера текста",
+            initialValue: NODE_OPTIONS.highlightByNodeTextSizing,
+            label: "Изменение размера текста при анимации ноды",
+        },
+        {
+            id: "highlightByLinkNodeFading",
+            type: "checkbox",
+            initialValue: NODE_OPTIONS.highlightByLinkNodeFading,
+            label: "Затухание при анимации связи",
+        },
+        {
+            id: "highlightByLinkNodeColor",
+            type: "checkbox",
+            initialValue: NODE_OPTIONS.highlightByLinkNodeColor,
+            label: "Затухание цвета при анимации связи",
+        },
+        {
+            id: "highlightByLinkNodeSizing",
+            type: "checkbox",
+            initialValue: NODE_OPTIONS.highlightByLinkNodeSizing,
+            label: "Изменение размера при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextFading",
+            type: "checkbox",
+            initialValue: NODE_OPTIONS.highlightByLinkTextFading,
+            label: "Затухание текста при анимации связи",
+        },
+        {
+            id: "highlightByLinkTextSizing",
+            type: "checkbox",
+            initialValue: NODE_OPTIONS.highlightByLinkTextSizing,
+            label: "Изменение размера текста при анимации связи",
         },
     ];
     return keys ? NODE_CONTROLS.filter((control) => keys.includes(control.id)) : NODE_CONTROLS;
@@ -998,12 +1209,6 @@ function getLinkControls(keys) {
             initialValue: "#000000FF",
             label: "Цвет частиц",
         },
-        {
-            id: "highlightFading",
-            type: "checkbox",
-            label: "Анимация Затухания",
-            initialValue: LINK_OPTIONS.highlightFading,
-        },
         {
             id: "pretty",
             type: "checkbox",
@@ -1017,10 +1222,28 @@ function getLinkControls(keys) {
             initialValue: LINK_OPTIONS.arrow,
         },
         {
-            id: "arrowHighlightFading",
+            id: "highlightByNodeLinkFading",
+            type: "checkbox",
+            label: "Затухание при анимации ноды",
+            initialValue: LINK_OPTIONS.highlightByNodeLinkFading,
+        },
+        {
+            id: "highlightByNodeArrowFading",
+            type: "checkbox",
+            label: "Затухание стрелки при анимации ноды",
+            initialValue: LINK_OPTIONS.highlightByNodeArrowFading,
+        },
+        {
+            id: "highlightByLinkLinkFading",
             type: "checkbox",
-            label: "Анимация затухания стрелки",
-            initialValue: LINK_OPTIONS.arrowHighlightFading,
+            label: "Затухание при анимации связи",
+            initialValue: LINK_OPTIONS.highlightByLinkLinkFading,
+        },
+        {
+            id: "highlightByLinkArrowFading",
+            type: "checkbox",
+            label: "Затухание стрелки при анимации связи",
+            initialValue: LINK_OPTIONS.highlightByLinkArrowFading,
         },
         {
             id: "arrowReverseAppear",
@@ -1083,6 +1306,7 @@ class GraphCanvas {
     nodeOptionsCache = {};
     isDragging = false;
     highlightedNode = null;
+    highlightedLink = null;
     highlightedNeighbors = null;
     highlightProgress = 1;
     highlightWorking = false;
@@ -1104,6 +1328,7 @@ class GraphCanvas {
             highlightDrawing: this.highlightDrawing,
             highlightedNeighbors: this.highlightedNeighbors,
             highlightedNode: this.highlightedNode,
+            highlightedLink: this.highlightedLink,
             highlightWorking: this.highlightWorking,
             isDragging: this.isDragging,
             simulation: this.simulation,
@@ -1175,6 +1400,10 @@ class GraphCanvas {
         }
         this.tick();
     }
+    updateRect() {
+        if (this.area)
+            this.areaRect = this.area.getBoundingClientRect();
+    }
     clearCache() {
         this.nodeOptionsCache = {};
         this.linkOptionsCache = {};
@@ -1230,6 +1459,7 @@ class GraphCanvas {
     clearState() {
         this.isDragging = false;
         this.highlightedNode = null;
+        this.highlightedLink = null;
         this.highlightedNeighbors = null;
         this.highlightProgress = 0;
         this.highlightWorking = false;
@@ -1390,9 +1620,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());
@@ -1412,6 +1643,8 @@ class GraphCanvas {
                         this.highlightedNeighbors = null;
                     if (this.highlightedNode)
                         this.highlightedNode = null;
+                    if (this.highlightedLink)
+                        this.highlightedLink = null;
                 });
                 return;
             }
@@ -1460,21 +1693,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);
                         }
@@ -1514,8 +1775,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;
@@ -1604,42 +1867,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);
                         }
                     }
                 }
@@ -1771,11 +2076,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,
@@ -1785,10 +2086,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,
@@ -1796,26 +2101,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, jsHelpers.isObject(currentLink.source)) &&
+                checkType(currentLink.target, jsHelpers.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,
@@ -1823,13 +2163,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,
@@ -1838,11 +2188,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,
@@ -1851,13 +2210,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,
@@ -1866,13 +2232,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,
@@ -1881,15 +2254,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");
-        d3Selection.select(this.area).call(d3Drag.drag()
+        const dragHandler = d3Drag.drag()
             .subject((event) => {
             if (this.listeners.onDragSubject) {
                 return this.listeners.onDragSubject(event, this.state);
@@ -1951,7 +2355,8 @@ class GraphCanvas {
                 event.subject.fy = null;
             }
             this.listeners.onEndDragFinished?.(event, this.state);
-        }));
+        });
+        d3Selection.select(this.area).call(dragHandler);
     }
     initZoom(currentZoom) {
         if (!this.area)
@@ -1996,8 +2401,10 @@ exports.getGraphControls = getGraphControls;
 exports.getLinkControls = getLinkControls;
 exports.getNodeControls = getNodeControls;
 exports.getParticlePosition = getParticlePosition;
+exports.linkByPointerGetter = linkByPointerGetter;
 exports.linkIterationExtractor = linkIterationExtractor;
 exports.linkOptionsGetter = linkOptionsGetter;
+exports.nodeByPointerGetter = nodeByPointerGetter;
 exports.nodeIterationExtractor = nodeIterationExtractor;
 exports.nodeOptionsGetter = nodeOptionsGetter;
 exports.nodeRadiusGetter = nodeRadiusGetter;