@krainovsd/graph 0.14.0-beta.4 → 0.14.0-beta.6

package/lib/cjs/index.cjs

@@ -315,14 +315,22 @@ function computeGraphBounds(nodes) {
 }
 
 function pointerGetter(mouseEvent, areaRect, areaTransform) {
-    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;
+    let localX;
+    let localY;
+    if ("offsetX" in mouseEvent) {
+        localX = mouseEvent.offsetX;
+        localY = mouseEvent.offsetY;
+    }
+    else {
+        if (!areaRect)
+            return [0, 0];
+        const clientX = mouseEvent.touches[0]?.clientX ?? mouseEvent.changedTouches[0]?.clientX;
+        const clientY = mouseEvent.touches[0]?.clientY ?? mouseEvent.changedTouches[0]?.clientY;
+        localX = clientX - areaRect.left;
+        localY = clientY - areaRect.top;
+    }
+    const px = (localX - areaTransform.x) / areaTransform.k;
+    const py = (localY - areaTransform.y) / areaTransform.k;
     return [px, py];
 }
 
@@ -422,10 +430,7 @@ function linkIterationExtractor(link, i, links, state, option, optionConstantGet
     return customOptions;
 }
 
-function nodeByPointerGetter({ areaRect, areaTransform, mouseEvent, nodes, }) {
-    if (!areaRect)
-        return undefined;
-    const [pointerX, pointerY] = pointerGetter(mouseEvent, areaRect, areaTransform);
+function nodeByPointerGetter({ pointerX, pointerY, nodes, }) {
     return d3Array.greatest(nodes, (node) => {
         if (isOverlapsNode(node, pointerX, pointerY, undefined))
             return node.index;
@@ -825,10 +830,7 @@ function approximateQuadraticBezierLength(x0, y0, x1, y1, x2, y2) {
     return (a + b + c) / 2;
 }
 
-function linkByPointerGetter({ areaRect, areaTransform, mouseEvent, links, linkHoverExtraZone, curve, }) {
-    if (!areaRect)
-        return undefined;
-    const [pointerX, pointerY] = pointerGetter(mouseEvent, areaRect, areaTransform);
+function linkByPointerGetter({ pointerX, pointerY, links, linkHoverExtraZone, curve, }) {
     return d3Array.greatest(links, (link) => {
         if (!jsHelpers.isObject(link.source) ||
             !jsHelpers.isObject(link.target) ||
@@ -1316,7 +1318,6 @@ function initArea() {
         if (!this.area)
             throw new Error("couldn't create canvas");
         this.container.appendChild(this.area);
-        this.areaRect = this.area.getBoundingClientRect();
         this.context = this.area.getContext("2d");
         if (!this.context)
             throw new Error("couldn't create canvas context");
@@ -1332,10 +1333,8 @@ function initDnd() {
         if (this.listeners.onDragSubject) {
             return this.listeners.onDragSubject.call(this, event);
         }
-        if (!this.areaRect)
-            return;
         const mouseEvent = event.sourceEvent;
-        const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
+        const [pointerX, pointerY] = this.getPointerAreaPosition(mouseEvent);
         return d3Array.greatest(this.nodes, (node) => {
             if (!node.x || !node.y || (jsHelpers.isBoolean(node.drag) && !node.drag))
                 return undefined;
@@ -1351,10 +1350,8 @@ function initDnd() {
             if (this.simulation)
                 this.simulation.alphaTarget(0.3).restart();
         }
-        if (!this.areaRect)
-            return;
         const mouseEvent = event.sourceEvent;
-        const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
+        const [pointerX, pointerY] = this.getPointerAreaPosition(mouseEvent);
         if (this._translateExtent) {
             event.subject.fx = Math.max(this._translateExtent[0][0], Math.min(this._translateExtent[1][0], pointerX));
             event.subject.fy = Math.max(this._translateExtent[0][1], Math.min(this._translateExtent[1][1], pointerY));
@@ -1370,8 +1367,8 @@ function initDnd() {
         if (!event.active && this.simulation)
             this.simulation.alphaTarget(0);
         const sourceEvent = event.sourceEvent;
-        if (sourceEvent.altKey && this.areaRect) {
-            const [pointerX, pointerY] = pointerGetter(sourceEvent, this.areaRect, this.areaTransform);
+        if (sourceEvent.altKey) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(sourceEvent);
             if (this._translateExtent) {
                 event.subject.fx = Math.max(this._translateExtent[0][0], Math.min(this._translateExtent[1][0], pointerX));
                 event.subject.fy = Math.max(this._translateExtent[0][1], Math.min(this._translateExtent[1][1], pointerY));
@@ -2132,10 +2129,10 @@ function initPointer() {
         let highlightNode = true;
         let highlightLink = true;
         if (checkHighlightNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentNode = nodeByPointerGetter({
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
+                pointerX,
+                pointerY,
                 nodes: this.nodes,
             });
             if (currentNode?.highlight != undefined)
@@ -2145,11 +2142,11 @@ function initPointer() {
             this.area.style.cursor = "pointer";
         }
         else if (checkHighlightLink) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -2168,19 +2165,20 @@ function initPointer() {
         this.animateHighlight(highlightNode ? currentNode : undefined, highlightLink ? currentLink : undefined);
         if (!this.listeners.onMove)
             return;
-        if (!currentNode && !checkHighlightNode)
+        if (!currentNode && !checkHighlightNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentNode = nodeByPointerGetter({
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
+                pointerX,
+                pointerY,
                 nodes: this.nodes,
             });
+        }
         if (!currentNode && (!checkHighlightNode || (!checkHighlightLink && !currentLink))) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -2194,18 +2192,18 @@ function initPointer() {
             !("button" in event) ||
             event.button !== 1)
             return;
+        const [pointerX, pointerY] = this.getPointerAreaPosition(event);
         const currentNode = nodeByPointerGetter({
-            areaRect: this.areaRect,
-            areaTransform: this.areaTransform,
-            mouseEvent: event,
+            pointerX,
+            pointerY,
             nodes: this.nodes,
         });
         if (!currentNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             const currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -2216,18 +2214,18 @@ function initPointer() {
     function onRightClick(event) {
         if (!this.listeners.onContextMenu)
             return;
+        const [pointerX, pointerY] = this.getPointerAreaPosition(event);
         const currentNode = nodeByPointerGetter({
-            areaRect: this.areaRect,
-            areaTransform: this.areaTransform,
-            mouseEvent: event,
+            pointerX,
+            pointerY,
             nodes: this.nodes,
         });
         if (!currentNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             const currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -2238,18 +2236,18 @@ function initPointer() {
     function onDoubleClick(event) {
         if (!this.listeners.onDoubleClick)
             return;
+        const [pointerX, pointerY] = this.getPointerAreaPosition(event);
         const currentNode = nodeByPointerGetter({
-            areaRect: this.areaRect,
-            areaTransform: this.areaTransform,
-            mouseEvent: event,
+            pointerX,
+            pointerY,
             nodes: this.nodes,
         });
         if (!currentNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             const currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -2260,18 +2258,18 @@ function initPointer() {
     function onClick(event) {
         if (this.isDragging || !this.listeners.onClick || ("button" in event && event.button !== 0))
             return;
+        const [pointerX, pointerY] = this.getPointerAreaPosition(event);
         const currentNode = nodeByPointerGetter({
-            areaRect: this.areaRect,
-            areaTransform: this.areaTransform,
-            mouseEvent: event,
+            pointerX,
+            pointerY,
             nodes: this.nodes,
         });
         if (!currentNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             const currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -2330,13 +2328,13 @@ function initResize() {
     });
     document.addEventListener("visibilitychange", () => {
         if (!document.hidden)
-            this.updateRect();
+            this.updateSize();
     }, { signal: abortController.signal });
     observer.observe(this.area);
 }
 
 function initSelection() {
-    if (!this.area || !this.areaRect)
+    if (!this.area)
         throw new Error("bad init data");
     this.isSelecting = false;
     this.selectionRect = null;
@@ -2346,11 +2344,11 @@ function initSelection() {
     function onMouseDown(event) {
         if (event.button !== 0 || !event.shiftKey)
             return;
-        if (!this.areaRect || !this.area)
+        if (!this.area)
             return;
         event.stopPropagation();
         event.preventDefault();
-        const [startX, startY] = pointerGetter(event, this.areaRect, this.areaTransform);
+        const [startX, startY] = this.getPointerAreaPosition(event);
         this.isSelecting = true;
         localSelection = true;
         this.selectionRect = { x1: startX, y1: startY, x2: startX, y2: startY };
@@ -2372,10 +2370,10 @@ function initSelection() {
         }, { signal: controller.signal });
     }
     function onMouseMove(event) {
-        if (!this.isSelecting || !this.selectionRect || !this.areaRect)
+        if (!this.isSelecting || !this.selectionRect)
             return;
         event.stopPropagation();
-        const [x, y] = pointerGetter(event, this.areaRect, this.areaTransform);
+        const [x, y] = this.getPointerAreaPosition(event);
         this.selectionRect.x2 = x;
         this.selectionRect.y2 = y;
         const rect = normalizeRect(this.selectionRect);
@@ -2964,7 +2962,6 @@ class GraphCanvas {
     simulation;
     areaTransform = d3Zoom.zoomIdentity;
     _translateExtent;
-    areaRect;
     draw;
     eventAbortController;
     cachedNodeText = [];
@@ -2984,6 +2981,10 @@ class GraphCanvas {
     _zoomAnimating = false;
     isSelecting = false;
     selectionRect = null;
+    areaRect;
+    // protected get areaRect() {
+    //   return this.area?.getBoundingClientRect();
+    // }
     get simulationWorking() {
         const simulationAlpha = this.simulation?.alpha?.() ?? 0;
         const simulationAlphaMin = this.simulation?.alphaMin?.() ?? 0;
@@ -3141,7 +3142,7 @@ class GraphCanvas {
         this.height = height;
         this.area.width = this.dpi * this.width;
         this.area.height = this.dpi * this.height;
-        this.areaRect = this.area.getBoundingClientRect();
+        this.updateRect();
         this.context = this.area.getContext("2d");
         if (!this.context)
             throw new Error("couldn't create canvas context");
@@ -3245,6 +3246,31 @@ class GraphCanvas {
         this.clearState();
         this.clearCache(true);
     };
+    getPointerAreaPosition = (event) => {
+        let localX;
+        let localY;
+        if ("offsetX" in event) {
+            // localX = event.offsetX;
+            // localY = event.offsetY;
+            const rect = this.areaRect;
+            if (!rect)
+                return [0, 0];
+            localX = event.clientX - rect.left;
+            localY = event.clientY - rect.top;
+        }
+        else {
+            const rect = this.areaRect;
+            if (!rect)
+                return [0, 0];
+            const clientX = event.touches[0]?.clientX ?? event.changedTouches[0]?.clientX;
+            const clientY = event.touches[0]?.clientY ?? event.changedTouches[0]?.clientY;
+            localX = clientX - rect.left;
+            localY = clientY - rect.top;
+        }
+        const px = (localX - this.areaTransform.x) / this.areaTransform.k;
+        const py = (localY - this.areaTransform.y) / this.areaTransform.k;
+        return [px, py];
+    };
     clearHTMLElements = () => {
         this.root.replaceChildren();
         this.area = undefined;