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

package/lib/cjs/index.cjs

@@ -2098,6 +2098,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 +2123,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;
@@ -2322,6 +2335,156 @@ function initResize() {
     observer.observe(this.area);
 }
 
+function initSelection() {
+    if (!this.area || !this.areaRect)
+        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.areaRect || !this.area)
+            return;
+        event.stopPropagation();
+        event.preventDefault();
+        const [startX, startY] = pointerGetter(event, this.areaRect, this.areaTransform);
+        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 || !this.areaRect)
+            return;
+        event.stopPropagation();
+        const [x, y] = pointerGetter(event, this.areaRect, this.areaTransform);
+        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 +2737,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;
@@ -2816,6 +2982,8 @@ class GraphCanvas {
     _lastNodeZoomK;
     _lastLinkZoomK;
     _zoomAnimating = false;
+    isSelecting = false;
+    selectionRect = null;
     get simulationWorking() {
         const simulationAlpha = this.simulation?.alpha?.() ?? 0;
         const simulationAlphaMin = this.simulation?.alphaMin?.() ?? 0;
@@ -3099,6 +3267,8 @@ class GraphCanvas {
         this.highlightProgress = 0;
         this.highlightStart = null;
         this.highlightPositive = false;
+        this.isSelecting = false;
+        this.selectionRect = null;
     };
     init = () => {
         initArea.call(this);
@@ -3109,6 +3279,7 @@ class GraphCanvas {
         initDnd.call(this);
         initZoom.call(this);
         initResize.call(this);
+        initSelection.call(this);
         initPointer.call(this);
         updateNodeCache.call(this);
         updateLinkCache.call(this);