system-canvas-standalone 0.2.41 → 0.2.42

package/dist/system-canvas.js

@@ -15841,10 +15841,10 @@ 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 isDrawingRef = (0, import_react7.useRef)(false);
     const startScreenRef = (0, import_react7.useRef)(null);
     const pointerIdRef = (0, import_react7.useRef)(null);
@@ -15879,28 +15879,47 @@ 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) {
+          isDrawingRef.current = false;
+          startScreenRef.current = null;
+          pointerIdRef.current = null;
+          setMarqueeRect(null);
         }
       };
       container.addEventListener("keydown", onKeyDown);
@@ -15909,7 +15928,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 +15965,10 @@ var SystemCanvas = (() => {
         if (target && typeof target.closest === "function") {
           if (target.closest(".system-canvas-node"))
             return;
+          if (target.closest(".system-canvas-resize-handles"))
+            return;
+          if (target.closest(".system-canvas-connection-handles"))
+            return;
         }
         const svg = svgRef.current;
         if (!svg)
@@ -22915,7 +22938,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 +23066,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)(() => {