@krainovsd/graph 0.14.0-beta.3 → 0.14.0-beta.5

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));
@@ -2098,6 +2095,19 @@ function initDraw() {
         nodeRenders.forEach((render) => render());
         textRenders.forEach((render) => render());
         this.context.restore();
+        /** selection rectangle */
+        if (this.isSelecting && this.selectionRect) {
+            const rect = this.selectionRect;
+            const screenX = Math.min(rect.x1, rect.x2) * this.areaTransform.k + this.areaTransform.x;
+            const screenY = Math.min(rect.y1, rect.y2) * this.areaTransform.k + this.areaTransform.y;
+            const screenW = Math.abs(rect.x2 - rect.x1) * this.areaTransform.k;
+            const screenH = Math.abs(rect.y2 - rect.y1) * this.areaTransform.k;
+            this.context.fillStyle = "rgba(66, 133, 244, 0.2)";
+            this.context.fillRect(screenX, screenY, screenW, screenH);
+            this.context.strokeStyle = "rgba(66, 133, 244, 0.8)";
+            this.context.lineWidth = 2;
+            this.context.strokeRect(screenX, screenY, screenW, screenH);
+        }
         this.listeners.onDrawFinished?.call?.(this);
     }
     if (this.graphSettings.showDrawTime) {
@@ -2110,7 +2120,7 @@ function initPointer() {
     if (!this.area || !this.nodes)
         throw new Error("bad init data");
     function onHover(event) {
-        if (!this.area)
+        if (!this.area || this.isSelecting)
             return;
         let currentNode;
         let currentLink;
@@ -2119,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)
@@ -2132,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,
             });
@@ -2155,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,
             });
@@ -2181,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,
             });
@@ -2203,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,
             });
@@ -2225,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,
             });
@@ -2247,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,
             });
@@ -2317,11 +2328,161 @@ function initResize() {
     });
     document.addEventListener("visibilitychange", () => {
         if (!document.hidden)
-            this.updateRect();
+            this.updateSize();
     }, { signal: abortController.signal });
     observer.observe(this.area);
 }
 
+function initSelection() {
+    if (!this.area)
+        throw new Error("bad init data");
+    this.isSelecting = false;
+    this.selectionRect = null;
+    let selectedNodesSet = new Set();
+    let selectedLinksSet = new Set();
+    let localSelection = false;
+    function onMouseDown(event) {
+        if (event.button !== 0 || !event.shiftKey)
+            return;
+        if (!this.area)
+            return;
+        event.stopPropagation();
+        event.preventDefault();
+        const [startX, startY] = this.getPointerAreaPosition(event);
+        this.isSelecting = true;
+        localSelection = true;
+        this.selectionRect = { x1: startX, y1: startY, x2: startX, y2: startY };
+        selectedNodesSet = new Set();
+        selectedLinksSet = new Set();
+        const controller = new AbortController();
+        this.area.addEventListener("mousemove", onMouseMove.bind(this), {
+            signal: controller.signal,
+        });
+        this.area.addEventListener("mouseup", () => {
+            onMouseUp.call(this, controller);
+        }, {
+            signal: controller.signal,
+        });
+        window.addEventListener("keyup", (event) => {
+            if (event.key === "Shift") {
+                onMouseUp.call(this, controller);
+            }
+        }, { signal: controller.signal });
+    }
+    function onMouseMove(event) {
+        if (!this.isSelecting || !this.selectionRect)
+            return;
+        event.stopPropagation();
+        const [x, y] = this.getPointerAreaPosition(event);
+        this.selectionRect.x2 = x;
+        this.selectionRect.y2 = y;
+        const rect = normalizeRect(this.selectionRect);
+        const newNodes = new Set();
+        for (let i = 0; i < this.nodes.length; i++) {
+            const node = this.nodes[i];
+            if (node.x == undefined || node.y == undefined)
+                continue;
+            if (node.visible === false)
+                continue;
+            const cache = this.nodeOptionsCache[i];
+            if (isNodeInRect(node, rect, cache)) {
+                newNodes.add(node);
+            }
+        }
+        const newLinks = new Set();
+        for (const link of this.links) {
+            const source = link.source;
+            const target = link.target;
+            if (newNodes.has(source) && newNodes.has(target)) {
+                newLinks.add(link);
+            }
+        }
+        for (const node of selectedNodesSet) {
+            if (!newNodes.has(node)) {
+                node._selected = false;
+                this.listeners.onSelectionOut?.call(this, node, undefined);
+            }
+        }
+        for (const link of selectedLinksSet) {
+            if (!newLinks.has(link)) {
+                link._selected = false;
+                this.listeners.onSelectionOut?.call(this, undefined, link);
+            }
+        }
+        for (const node of newNodes) {
+            if (!selectedNodesSet.has(node)) {
+                node._selected = true;
+                this.listeners.onSelectionIn?.call(this, node, undefined);
+            }
+        }
+        for (const link of newLinks) {
+            if (!selectedLinksSet.has(link)) {
+                link._selected = true;
+                this.listeners.onSelectionIn?.call(this, undefined, link);
+            }
+        }
+        selectedNodesSet = newNodes;
+        selectedLinksSet = newLinks;
+        this.draw();
+    }
+    function onMouseUp(controller) {
+        controller.abort();
+        if (!this.isSelecting)
+            return;
+        const nodes = Array.from(selectedNodesSet);
+        const links = Array.from(selectedLinksSet);
+        for (const node of nodes) {
+            node._selected = false;
+        }
+        for (const link of links) {
+            link._selected = false;
+        }
+        this.isSelecting = false;
+        this.selectionRect = null;
+        selectedNodesSet = new Set();
+        selectedLinksSet = new Set();
+        this.listeners.onSelectionEnd?.call(this, nodes, links);
+        this.tick();
+    }
+    function onSelectionEnd(event) {
+        if (localSelection) {
+            event.stopImmediatePropagation();
+            localSelection = false;
+        }
+    }
+    this.area.addEventListener("mousedown", onMouseDown.bind(this), {
+        signal: this.eventAbortController.signal,
+    });
+    this.area.addEventListener("click", onSelectionEnd, { signal: this.eventAbortController.signal });
+}
+function normalizeRect(rect) {
+    const x = Math.min(rect.x1, rect.x2);
+    const y = Math.min(rect.y1, rect.y2);
+    const width = Math.abs(rect.x2 - rect.x1);
+    const height = Math.abs(rect.y2 - rect.y1);
+    return { x, y, width, height };
+}
+function isNodeInRect(node, rect, cache) {
+    const nx = node.x;
+    const ny = node.y;
+    if (nx == undefined || ny == undefined)
+        return false;
+    if (cache?.shape === "circle") {
+        const r = cache.radius ?? 0;
+        const closestX = Math.max(rect.x, Math.min(nx, rect.x + rect.width));
+        const closestY = Math.max(rect.y, Math.min(ny, rect.y + rect.height));
+        const dx = nx - closestX;
+        const dy = ny - closestY;
+        return dx * dx + dy * dy <= r * r;
+    }
+    const hw = (cache?.width ?? 0) / 2;
+    const hh = (cache?.height ?? 0) / 2;
+    return (nx - hw >= rect.x &&
+        nx + hw <= rect.x + rect.width &&
+        ny - hh >= rect.y &&
+        ny + hh <= rect.y + rect.height);
+}
+
 function updateLinkCache() {
     if (!this.context)
         return;
@@ -2574,6 +2735,9 @@ function initZoom(currentZoom) {
     this._translateExtent = translateExtent;
     const zoomInstance = d3Zoom.zoom()
         .scaleExtent(zoomExtent)
+        .filter((event) => {
+        return !(event instanceof MouseEvent && event.shiftKey);
+    })
         .on("zoom", (event) => {
         if (this._zoomAnimating)
             return;
@@ -2798,7 +2962,6 @@ class GraphCanvas {
     simulation;
     areaTransform = d3Zoom.zoomIdentity;
     _translateExtent;
-    areaRect;
     draw;
     eventAbortController;
     cachedNodeText = [];
@@ -2816,6 +2979,12 @@ class GraphCanvas {
     _lastNodeZoomK;
     _lastLinkZoomK;
     _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;
@@ -2973,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");
@@ -3077,6 +3246,26 @@ class GraphCanvas {
         this.clearState();
         this.clearCache(true);
     };
+    getPointerAreaPosition = (event) => {
+        let localX;
+        let localY;
+        if ("offsetX" in event) {
+            localX = event.offsetX;
+            localY = event.offsetY;
+        }
+        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;
@@ -3099,6 +3288,8 @@ class GraphCanvas {
         this.highlightProgress = 0;
         this.highlightStart = null;
         this.highlightPositive = false;
+        this.isSelecting = false;
+        this.selectionRect = null;
     };
     init = () => {
         initArea.call(this);
@@ -3109,6 +3300,7 @@ class GraphCanvas {
         initDnd.call(this);
         initZoom.call(this);
         initResize.call(this);
+        initSelection.call(this);
         initPointer.call(this);
         updateNodeCache.call(this);
         updateLinkCache.call(this);