system-canvas-standalone 0.2.41 → 0.2.43

package/dist/system-canvas.js

@@ -15841,10 +15841,11 @@ var SystemCanvas = (() => {
   // ../react/dist/hooks/useMultiSelect.js
   var import_react7 = __toESM(require_react(), 1);
   function useMultiSelect(options) {
-    const { svgRef, viewport, nodesRef, containerRef, enabled } = options;
+    const { svgRef, viewport, nodesRef, containerRef, enabled, activationKey = "space" } = options;
     const [selectedIds, setSelectedIds] = (0, import_react7.useState)(() => /* @__PURE__ */ new Set());
     const [marqueeRect, setMarqueeRect] = (0, import_react7.useState)(null);
-    const marqueeActiveRef = (0, import_react7.useRef)(false);
+    const marqueeActiveRef = (0, import_react7.useRef)(activationKey === "none");
+    const isPendingRef = (0, import_react7.useRef)(false);
     const isDrawingRef = (0, import_react7.useRef)(false);
     const startScreenRef = (0, import_react7.useRef)(null);
     const pointerIdRef = (0, import_react7.useRef)(null);
@@ -15879,28 +15880,48 @@ var SystemCanvas = (() => {
     (0, import_react7.useEffect)(() => {
       if (!enabled)
         return;
+      if (activationKey === "none") {
+        marqueeActiveRef.current = true;
+        return;
+      }
       const container = containerRef.current;
       if (!container)
         return;
+      const matchesKey = (e) => {
+        switch (activationKey) {
+          case "space":
+            return e.code === "Space";
+          case "shift":
+            return e.key === "Shift";
+          case "alt":
+            return e.key === "Alt";
+          case "meta":
+            return e.key === "Meta";
+          default:
+            return false;
+        }
+      };
       const onKeyDown = (e) => {
-        if (e.code === "Space" && !e.repeat) {
-          const active = document.activeElement;
-          if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable) {
-            return;
-          }
-          e.preventDefault();
-          marqueeActiveRef.current = true;
+        if (!matchesKey(e) || e.repeat)
+          return;
+        const active = document.activeElement;
+        if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable) {
+          return;
         }
+        if (activationKey === "space")
+          e.preventDefault();
+        marqueeActiveRef.current = true;
       };
       const onKeyUp = (e) => {
-        if (e.code === "Space") {
-          marqueeActiveRef.current = false;
-          if (isDrawingRef.current) {
-            isDrawingRef.current = false;
-            startScreenRef.current = null;
-            pointerIdRef.current = null;
-            setMarqueeRect(null);
-          }
+        if (!matchesKey(e))
+          return;
+        marqueeActiveRef.current = false;
+        if (isDrawingRef.current || isPendingRef.current) {
+          isPendingRef.current = false;
+          isDrawingRef.current = false;
+          startScreenRef.current = null;
+          pointerIdRef.current = null;
+          setMarqueeRect(null);
         }
       };
       container.addEventListener("keydown", onKeyDown);
@@ -15909,7 +15930,7 @@ var SystemCanvas = (() => {
         container.removeEventListener("keydown", onKeyDown);
         container.removeEventListener("keyup", onKeyUp);
       };
-    }, [enabled, containerRef]);
+    }, [enabled, containerRef, activationKey]);
     (0, import_react7.useEffect)(() => {
       if (!enabled)
         return;
@@ -15946,6 +15967,12 @@ var SystemCanvas = (() => {
         if (target && typeof target.closest === "function") {
           if (target.closest(".system-canvas-node"))
             return;
+          if (target.closest(".system-canvas-edge"))
+            return;
+          if (target.closest(".system-canvas-resize-handles"))
+            return;
+          if (target.closest(".system-canvas-connection-handles"))
+            return;
         }
         const svg = svgRef.current;
         if (!svg)
@@ -15954,21 +15981,16 @@ var SystemCanvas = (() => {
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         startScreenRef.current = { x, y };
-        isDrawingRef.current = true;
+        isPendingRef.current = true;
+        isDrawingRef.current = false;
         pointerIdRef.current = e.pointerId;
-        setMarqueeRect({ x1: x, y1: y, x2: x, y2: y });
-        try {
-          container.setPointerCapture(e.pointerId);
-        } catch {
-        }
-        e.preventDefault();
-        e.stopPropagation();
       };
+      const MARQUEE_DRAG_THRESHOLD = 4;
       const onPointerMove = (e) => {
-        if (!isDrawingRef.current)
-          return;
         if (e.pointerId !== pointerIdRef.current)
           return;
+        if (!isPendingRef.current && !isDrawingRef.current)
+          return;
         const svg = svgRef.current;
         if (!svg)
           return;
@@ -15976,13 +15998,32 @@ var SystemCanvas = (() => {
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         const start2 = startScreenRef.current;
+        if (isPendingRef.current && !isDrawingRef.current) {
+          const dx = x - start2.x;
+          const dy = y - start2.y;
+          if (Math.hypot(dx, dy) < MARQUEE_DRAG_THRESHOLD)
+            return;
+          isPendingRef.current = false;
+          isDrawingRef.current = true;
+          try {
+            container.setPointerCapture(e.pointerId);
+          } catch {
+          }
+        }
+        e.preventDefault();
         setMarqueeRect({ x1: start2.x, y1: start2.y, x2: x, y2: y });
       };
       const onPointerUp = (e) => {
-        if (!isDrawingRef.current)
-          return;
         if (e.pointerId !== pointerIdRef.current)
           return;
+        if (isPendingRef.current && !isDrawingRef.current) {
+          isPendingRef.current = false;
+          startScreenRef.current = null;
+          pointerIdRef.current = null;
+          return;
+        }
+        if (!isDrawingRef.current)
+          return;
         const svg = svgRef.current;
         if (!svg)
           return;
@@ -16008,6 +16049,7 @@ var SystemCanvas = (() => {
         }
         setSelectedIds(matched);
         setMarqueeRect(null);
+        isPendingRef.current = false;
         isDrawingRef.current = false;
         startScreenRef.current = null;
         pointerIdRef.current = null;
@@ -22915,7 +22957,7 @@ var SystemCanvas = (() => {
   // ../react/dist/components/SystemCanvas.js
   var CASCADE_WINDOW_MS = 1500;
   var CASCADE_OFFSET = 20;
-  var SystemCanvas = (0, import_react34.forwardRef)(function SystemCanvas2({ canvas, onResolveCanvas, canvases, rootLabel = "Home", onNavigate, externalNavigation = false, onBreadcrumbClick, onBreadcrumbsChange, onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onSelectionChange, nodeContextMenu, edgeContextMenu, canvasContextMenu, editable = false, onNodeAdd, onNodeUpdate, onNodesUpdate, onNodeDelete, onNodesDelete, onEdgeUpdate, onEdgeDelete, onEdgeAdd, canDropNodeOn, onNodeDrop, renderAddNodeButton, showExportButton = false, renderExportButton, onImport, showNodeToolbar = true, renderNodeToolbar, theme: themeProp, themes: customThemes, edgeStyle = "bezier", defaultViewport, minZoom: minZoomProp, maxZoom, onViewportChange, panMode = "drag", autoFit = "canvas-change", laneHeaders = "pinned", snapToLanes = false, zoomNavigation = false, snapGrid, guideThreshold, alignDistributeMenu, historyDepth, onUndo, onRedo, collaborators = [], className, style }, forwardedRef) {
+  var SystemCanvas = (0, import_react34.forwardRef)(function SystemCanvas2({ canvas, onResolveCanvas, canvases, rootLabel = "Home", onNavigate, externalNavigation = false, onBreadcrumbClick, onBreadcrumbsChange, onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onSelectionChange, nodeContextMenu, edgeContextMenu, canvasContextMenu, editable = false, onNodeAdd, onNodeUpdate, onNodesUpdate, onNodeDelete, onNodesDelete, onEdgeUpdate, onEdgeDelete, onEdgeAdd, canDropNodeOn, onNodeDrop, renderAddNodeButton, showExportButton = false, renderExportButton, onImport, showNodeToolbar = true, renderNodeToolbar, theme: themeProp, themes: customThemes, edgeStyle = "bezier", defaultViewport, minZoom: minZoomProp, maxZoom, onViewportChange, panMode = "drag", multiSelectKey = "auto", autoFit = "canvas-change", laneHeaders = "pinned", snapToLanes = false, zoomNavigation = false, snapGrid, guideThreshold, alignDistributeMenu, historyDepth, onUndo, onRedo, collaborators = [], className, style }, forwardedRef) {
     const zoomNavConfig = (0, import_react34.useMemo)(() => {
       const defaults = {
         enterThreshold: 0.66,
@@ -23043,12 +23085,14 @@ var SystemCanvas = (() => {
     const [importError, setImportError] = (0, import_react34.useState)(null);
     const svgProxyRef = (0, import_react34.useRef)(null);
     const containerRef = (0, import_react34.useRef)(null);
+    const resolvedMultiSelectKey = multiSelectKey === "auto" ? panMode === "trackpad" ? "none" : "space" : multiSelectKey;
     const { selectedIds, selectNode, toggleNode, selectAll, clearSelection, selectMultiple, marqueeRect, marqueeActiveRef } = useMultiSelect({
       svgRef: svgProxyRef,
       viewport: viewportStateRef,
       nodesRef,
       containerRef,
-      enabled: editable
+      enabled: editable,
+      activationKey: resolvedMultiSelectKey
     });
     const selectedIdsRef = (0, import_react34.useRef)(selectedIds);
     (0, import_react34.useEffect)(() => {