system-canvas-standalone 0.2.1 → 0.2.2

package/dist/system-canvas.js

@@ -12759,7 +12759,7 @@ var SystemCanvas = (() => {
     render: () => render,
     themes: () => themes
   });
-  var import_react22 = __toESM(require_react(), 1);
+  var import_react24 = __toESM(require_react(), 1);
   var import_client = __toESM(require_client(), 1);
 
   // ../react/dist/components/SystemCanvas.js
@@ -14649,15 +14649,19 @@ var SystemCanvas = (() => {
   // ../react/dist/hooks/useCanvasInteraction.js
   var import_react2 = __toESM(require_react(), 1);
   function useCanvasInteraction(options) {
-    const { onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onNavigableNodeClick, viewport, editable, onSelect, onBeginEdit, onSelectEdge, onBeginEditEdge } = options;
+    const { onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onNavigableNodeClick, viewport, editable, onSelect, onToggleSelect, onBeginEdit, onSelectEdge, onBeginEditEdge } = options;
     const handleNodeClick = (0, import_react2.useCallback)((node, event) => {
       event.stopPropagation();
       if (editable) {
-        onSelect?.(node.id);
-        onSelectEdge?.(null);
+        if (event.shiftKey && onToggleSelect) {
+          onToggleSelect(node.id);
+        } else {
+          onSelect?.(node.id);
+          onSelectEdge?.(null);
+        }
       }
       onNodeClick?.(node);
-    }, [editable, onNodeClick, onSelect, onSelectEdge]);
+    }, [editable, onNodeClick, onSelect, onToggleSelect, onSelectEdge]);
     const handleNodeDoubleClick = (0, import_react2.useCallback)((node, event) => {
       event.stopPropagation();
       onNodeDoubleClick?.(node);
@@ -14736,7 +14740,7 @@ var SystemCanvas = (() => {
   var import_react3 = __toESM(require_react(), 1);
   var DRAG_THRESHOLD = 3;
   function useNodeDrag(options) {
-    const { viewport, nodesRef, onCommit, svgRef, canDropNodeOn, onNodeDrop } = options;
+    const { viewport, nodesRef, onCommit, svgRef, canDropNodeOn, onNodeDrop, selectedIdsRef } = options;
     const [dragOverrides, setDragOverrides] = (0, import_react3.useState)(() => /* @__PURE__ */ new Map());
     const [isDragging, setIsDragging] = (0, import_react3.useState)(false);
     const [dropTargetId, setDropTargetId] = (0, import_react3.useState)(null);
@@ -14748,6 +14752,8 @@ var SystemCanvas = (() => {
     onNodeDropRef.current = onNodeDrop;
     const svgRefRef = (0, import_react3.useRef)(svgRef);
     svgRefRef.current = svgRef;
+    const emptySetRef = (0, import_react3.useRef)(/* @__PURE__ */ new Set());
+    const effectiveSelectedIdsRef = selectedIdsRef ?? emptySetRef;
     const dropTargetIdRef = (0, import_react3.useRef)(null);
     const computeDropTarget = (0, import_react3.useCallback)((clientX, clientY) => {
       const cb = canDropNodeOnRef.current;
@@ -14869,12 +14875,22 @@ var SystemCanvas = (() => {
         return;
       event.stopPropagation();
       const moving = /* @__PURE__ */ new Map();
-      moving.set(node.id, { startX: node.x, startY: node.y });
-      if (node.type === "group" && nodesRef.current) {
-        const children2 = getGroupChildren(node, nodesRef.current);
-        for (const c of children2) {
-          if (!moving.has(c.id)) {
-            moving.set(c.id, { startX: c.x, startY: c.y });
+      const sel = effectiveSelectedIdsRef.current;
+      if (sel && sel.size > 1 && sel.has(node.id) && nodesRef.current) {
+        for (const id2 of sel) {
+          const n = nodesRef.current.find((r) => r.id === id2);
+          if (n) {
+            moving.set(id2, { startX: n.x, startY: n.y });
+          }
+        }
+      } else {
+        moving.set(node.id, { startX: node.x, startY: node.y });
+        if (node.type === "group" && nodesRef.current) {
+          const children2 = getGroupChildren(node, nodesRef.current);
+          for (const c of children2) {
+            if (!moving.has(c.id)) {
+              moving.set(c.id, { startX: c.x, startY: c.y });
+            }
           }
         }
       }
@@ -18092,7 +18108,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/hooks/useViewport.js
   function useViewport(options) {
-    const { minZoom, maxZoom, defaultViewport, onViewportChange } = options;
+    const { minZoom, maxZoom, defaultViewport, onViewportChange, marqueeActiveRef } = options;
     const svgRef = (0, import_react7.useRef)(null);
     const groupRef = (0, import_react7.useRef)(null);
     const viewport = (0, import_react7.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
@@ -18105,6 +18121,8 @@ var SystemCanvas = (() => {
       if (!svg || !group)
         return;
       const zoomBehavior = zoom_default2().scaleExtent([minZoom, maxZoom]).filter((event) => {
+        if (marqueeActiveRef?.current && event.type !== "wheel")
+          return false;
         if (event.button)
           return false;
         if (event.type === "wheel")
@@ -20760,6 +20778,12 @@ var SystemCanvas = (() => {
     }, getViewport: getViewportState, containerWidth: containerSize.width, containerHeight: containerSize.height, render: renderNodeToolbar }), editable && (renderAddNodeButton ? renderAddNodeButton(renderProps) : (0, import_jsx_runtime28.jsx)(AddNodeButton, { ...renderProps })), nodeContextMenu && (0, import_jsx_runtime28.jsx)(NodeContextMenuOverlay, { state: contextMenuState, config: nodeContextMenu, theme, onClose: () => setContextMenuState(null) })] });
   });
 
+  // ../react/dist/hooks/useMultiSelect.js
+  var import_react22 = __toESM(require_react(), 1);
+
+  // ../react/dist/hooks/useMultiSelectClipboard.js
+  var import_react23 = __toESM(require_react(), 1);
+
   // src/index.tsx
   function resolveThemeOption(theme) {
     if (typeof theme === "string") {
@@ -20868,7 +20892,7 @@ var SystemCanvas = (() => {
         onEdgeUpdate: handleEdgeUpdate,
         onEdgeDelete: handleEdgeDelete
       };
-      root2.render(import_react22.default.createElement(SystemCanvas, props));
+      root2.render(import_react24.default.createElement(SystemCanvas, props));
     };
     doRender();
     return {