@bian-womp/spark-workbench 0.3.62 → 0.3.63

package/lib/cjs/src/misc/SelectionActiveSync.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type SelectionActiveSyncProps = {
+    selection: {
+        nodes: string[];
+        edges: string[];
+    };
+};
+declare const SelectionActiveSync: React.FC<SelectionActiveSyncProps>;
+export default SelectionActiveSync;
+//# sourceMappingURL=SelectionActiveSync.d.ts.map

package/lib/cjs/src/misc/SelectionActiveSync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionActiveSync.d.ts","sourceRoot":"","sources":["../../../../src/misc/SelectionActiveSync.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;CACjD,CAAC;AAMF,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAgB3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/cjs/src/misc/WorkbenchCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WorkbenchCanvas.d.ts","sourceRoot":"","sources":["../../../../src/misc/WorkbenchCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,EAOL,iBAAiB,EACjB,IAAI,EACJ,IAAI,EACJ,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAuB1D,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,KAAK,MAAM,CAAC;IACvD,SAAS,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,kBAAkB,CAAC,EAAE,CACnB,MAAM,EAAE,MAAM,KACX;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IACnD,cAAc,CAAC,EAAE,OAAO,CACtB,IAAI,CACF,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,EACxB,OAAO,GACP,OAAO,GACP,WAAW,GACX,WAAW,GACX,yBAAyB,GACzB,QAAQ,GACR,WAAW,GACX,eAAe,GACf,eAAe,GACf,eAAe,GACf,eAAe,GACf,WAAW,CACd,CACF,GAAG;QACF,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;KAC5D,CAAC;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,wBAAwB,oGAggCnC,CAAC;AAEH,eAAO,MAAM,eAAe,oGAA2B,CAAC"}
+{"version":3,"file":"WorkbenchCanvas.d.ts","sourceRoot":"","sources":["../../../../src/misc/WorkbenchCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,EAOL,iBAAiB,EACjB,IAAI,EACJ,IAAI,EACJ,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAuB1D,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,KAAK,MAAM,CAAC;IACvD,SAAS,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,kBAAkB,CAAC,EAAE,CACnB,MAAM,EAAE,MAAM,KACX;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IACnD,cAAc,CAAC,EAAE,OAAO,CACtB,IAAI,CACF,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,EACxB,OAAO,GACP,OAAO,GACP,WAAW,GACX,WAAW,GACX,yBAAyB,GACzB,QAAQ,GACR,WAAW,GACX,eAAe,GACf,eAAe,GACf,eAAe,GACf,eAAe,GACf,WAAW,CACd,CACF,GAAG;QACF,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;KAC5D,CAAC;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,wBAAwB,oGAq/BnC,CAAC;AAEH,eAAO,MAAM,eAAe,oGAA2B,CAAC"}

package/lib/esm/index.js

@@ -1,7 +1,7 @@
 import { generateId, createSimpleGraphRegistry, GraphBuilder, unwrapValue, isTyped, getInputDeclaredTypes, LocalEngine, parseJsonPath, setValueAtPathWithCreation, buildValueConverter, convertSnapshot, unwrapTypeId, isInputPrivate, mergeInputHandleDescriptors, getInputTypeId, getInputHandleMetadata, offsetImportedPositions, createSimpleGraphDef, createAsyncGraphDef, createAsyncGraphRegistry, createProgressGraphDef, createProgressGraphRegistry, createValidationGraphDef, createValidationGraphRegistry } from '@bian-womp/spark-graph';
 import lod from 'lodash';
 import { RemoteRuntimeClient } from '@bian-womp/spark-remote';
-import { Position, Handle, NodeResizer, getBezierPath, BaseEdge, useReactFlow, ReactFlowProvider, ReactFlow, Background, BackgroundVariant, MiniMap, Controls } from '@xyflow/react';
+import { Position, Handle, NodeResizer, getBezierPath, BaseEdge, useReactFlow, useStoreApi, useStore, ReactFlowProvider, ReactFlow, Background, BackgroundVariant, MiniMap, Controls } from '@xyflow/react';
 import React, { useCallback, useState, useEffect, useRef, useMemo, createContext, useContext, useImperativeHandle } from 'react';
 import cx from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -5888,220 +5888,22 @@ function useKeyboardShortcutToast() {
     return { toast, showToast, hideToast };
 }
 
-const SelectionBoundOverlay = ({ selection, rfInstance, viewportTick }) => {
-    const overlayRef = useRef(null);
-    const [parentRect, setParentRect] = useState(null);
-    const [isDragging, setIsDragging] = useState(false);
-    const [bounds, setBounds] = useState(null);
-    const dragStateRef = useRef(null);
-    const moveListenerRef = useRef(null);
-    const upListenerRef = useRef(null);
-    useRef(null);
-    const { wb } = useWorkbenchContext();
+const selectionActiveSelector = (state) => state.nodesSelectionActive;
+const selectionDragActiveSelector = (state) => state.userSelectionActive;
+const SelectionActiveSync = ({ selection }) => {
+    const store = useStoreApi();
+    const currentActive = useStore(selectionActiveSelector);
+    const draggingSelection = useStore(selectionDragActiveSelector);
+    const active = selection.nodes.length > 1;
     useEffect(() => {
-        if (!overlayRef.current)
-            return;
-        const parent = overlayRef.current.parentElement;
-        if (!parent)
-            return;
-        const updateRect = () => {
-            setParentRect(parent.getBoundingClientRect());
-        };
-        updateRect();
-        const resizeObserver = new ResizeObserver(updateRect);
-        resizeObserver.observe(parent);
-        const scrollHandler = () => updateRect();
-        window.addEventListener("scroll", scrollHandler, true);
-        return () => {
-            resizeObserver.disconnect();
-            window.removeEventListener("scroll", scrollHandler, true);
-        };
-    }, [viewportTick]);
-    const cleanupDragListeners = useCallback(() => {
-        if (moveListenerRef.current) {
-            window.removeEventListener("mousemove", moveListenerRef.current);
-            moveListenerRef.current = null;
-        }
-        if (upListenerRef.current) {
-            window.removeEventListener("mouseup", upListenerRef.current);
-            upListenerRef.current = null;
-        }
-        dragStateRef.current = null;
-        setIsDragging(false);
-    }, []);
-    useEffect(() => cleanupDragListeners, [cleanupDragListeners]);
-    const handleMouseMove = useCallback((e) => {
-        if (!rfInstance || !wb || !parentRect)
-            return;
-        const dragState = dragStateRef.current;
-        if (!dragState)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        const current = rfInstance.screenToFlowPosition({
-            x: e.clientX,
-            y: e.clientY,
-        });
-        const dx = current.x - dragState.startFlow.x;
-        const dy = current.y - dragState.startFlow.y;
-        // Update nodes directly via React Flow for immediate visual feedback
-        const nodes = rfInstance.getNodes();
-        const updatedNodes = nodes.map((node) => {
-            if (dragState.initialPositions[node.id]) {
-                const initialPos = dragState.initialPositions[node.id];
-                return {
-                    ...node,
-                    position: {
-                        x: initialPos.x + dx,
-                        y: initialPos.y + dy,
-                    },
-                };
-            }
-            return node;
-        });
-        rfInstance.setNodes(updatedNodes);
-        // Also update workbench state
-        const nextPositions = {};
-        for (const [nodeId, pos] of Object.entries(dragState.initialPositions)) {
-            nextPositions[nodeId] = { x: pos.x + dx, y: pos.y + dy };
-        }
-        if (Object.keys(nextPositions).length) {
-            wb.setPositions(nextPositions, { commit: false });
-        }
-    }, [rfInstance, wb, parentRect]);
-    const handleMouseUp = useCallback((e) => {
-        if (!rfInstance || !wb) {
-            cleanupDragListeners();
+        if (draggingSelection)
             return;
+        if (currentActive !== active) {
+            console.log("[SelectionActiveSync] setting active selection to", active);
+            store.setState({ nodesSelectionActive: active });
         }
-        const dragState = dragStateRef.current;
-        if (!dragState) {
-            cleanupDragListeners();
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        const current = rfInstance.screenToFlowPosition({
-            x: e.clientX,
-            y: e.clientY,
-        });
-        const dx = current.x - dragState.startFlow.x;
-        const dy = current.y - dragState.startFlow.y;
-        const nextPositions = {};
-        for (const [nodeId, pos] of Object.entries(dragState.initialPositions)) {
-            nextPositions[nodeId] = { x: pos.x + dx, y: pos.y + dy };
-        }
-        if (Object.keys(nextPositions).length) {
-            wb.setPositions(nextPositions, { commit: true });
-        }
-        cleanupDragListeners();
-    }, [cleanupDragListeners, rfInstance, wb]);
-    const handleMouseDown = useCallback((e) => {
-        if (e.button !== 0)
-            return;
-        if (!rfInstance || !wb)
-            return;
-        if (selection.nodes.length < 2)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        const startFlow = rfInstance.screenToFlowPosition({
-            x: e.clientX,
-            y: e.clientY,
-        });
-        const positions = wb.getPositions();
-        const initialPositions = {};
-        for (const nodeId of selection.nodes) {
-            const pos = positions[nodeId];
-            if (pos) {
-                initialPositions[nodeId] = pos;
-            }
-        }
-        if (!Object.keys(initialPositions).length)
-            return;
-        dragStateRef.current = { startFlow, initialPositions };
-        setIsDragging(true);
-        moveListenerRef.current = handleMouseMove;
-        upListenerRef.current = handleMouseUp;
-        window.addEventListener("mousemove", handleMouseMove, { passive: false });
-        window.addEventListener("mouseup", handleMouseUp, { passive: false });
-    }, [handleMouseMove, handleMouseUp, rfInstance, selection.nodes, wb]);
-    // Continuous bounds update loop
-    useEffect(() => {
-        if (typeof document === "undefined" ||
-            !rfInstance ||
-            !parentRect ||
-            selection.nodes.length < 2) {
-            setBounds(null);
-            return;
-        }
-        let animationFrameId = null;
-        let isActive = true;
-        const updateBounds = () => {
-            if (!isActive)
-                return;
-            let calculatedBounds = null;
-            for (const nodeId of selection.nodes) {
-                const el = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`);
-                if (!el)
-                    continue;
-                const rect = el.getBoundingClientRect();
-                const relativeLeft = rect.left - parentRect.left;
-                const relativeTop = rect.top - parentRect.top;
-                const relativeRight = rect.right - parentRect.left;
-                const relativeBottom = rect.bottom - parentRect.top;
-                if (!calculatedBounds) {
-                    calculatedBounds = {
-                        left: relativeLeft,
-                        top: relativeTop,
-                        right: relativeRight,
-                        bottom: relativeBottom,
-                    };
-                }
-                else {
-                    calculatedBounds.left = Math.min(calculatedBounds.left, relativeLeft);
-                    calculatedBounds.top = Math.min(calculatedBounds.top, relativeTop);
-                    calculatedBounds.right = Math.max(calculatedBounds.right, relativeRight);
-                    calculatedBounds.bottom = Math.max(calculatedBounds.bottom, relativeBottom);
-                }
-            }
-            setBounds(calculatedBounds);
-            // Continue the animation loop
-            if (isActive) {
-                animationFrameId = requestAnimationFrame(updateBounds);
-            }
-        };
-        // Start the animation loop
-        animationFrameId = requestAnimationFrame(updateBounds);
-        return () => {
-            isActive = false;
-            if (animationFrameId !== null) {
-                cancelAnimationFrame(animationFrameId);
-            }
-        };
-    }, [selection.nodes, rfInstance, viewportTick, parentRect]);
-    if (!bounds || selection.nodes.length < 2) {
-        return jsx("div", { ref: overlayRef, style: { display: "none" } });
-    }
-    const { left, top, right, bottom } = bounds;
-    const width = right - left;
-    const height = bottom - top;
-    return (jsx("div", { ref: overlayRef, onMouseDown: handleMouseDown, style: {
-            position: "absolute",
-            left: `${left}px`,
-            top: `${top}px`,
-            width: `${width}px`,
-            height: `${height}px`,
-            border: isDragging ? "2px solid #0ea5e9" : "1px dashed #0ea5e9",
-            backgroundColor: isDragging
-                ? "rgba(14, 165, 233, 0.05)"
-                : "transparent",
-            pointerEvents: "auto",
-            cursor: isDragging ? "grabbing" : "move",
-            zIndex: 4,
-            boxSizing: "border-box",
-            transition: isDragging ? "none" : "border 0.1s ease",
-        } }));
+    }, [active, currentActive, draggingSelection, store]);
+    return null;
 };
 
 const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
@@ -6744,10 +6546,6 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
             connectionLineRenderer: ui.getConnectionLineRenderer(),
         };
     }, [ui, uiVersion]);
-    const [selectionOverlayTick, setSelectionOverlayTick] = useState(0);
-    const onMove = useCallback(() => {
-        setSelectionOverlayTick((t) => t + 1);
-    }, []);
     const onMoveEnd = useCallback(() => {
         if (rfInstanceRef.current) {
             const viewport = rfInstanceRef.current.getViewport();
@@ -6779,11 +6577,11 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
                             if (userOnInit) {
                                 userOnInit(inst);
                             }
-                        }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onMove: onMove, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", children: [children, BackgroundRenderer ? (jsx(BackgroundRenderer, {})) : (jsx(Background, { id: "workbench-canvas-background", variant: BackgroundVariant.Dots, gap: 12, size: 1 })), MinimapRenderer ? jsx(MinimapRenderer, {}) : jsx(MiniMap, {}), ControlsRenderer ? jsx(ControlsRenderer, {}) : jsx(Controls, {}), menuState?.type === "default" &&
+                        }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", children: [children, BackgroundRenderer ? (jsx(BackgroundRenderer, {})) : (jsx(Background, { id: "workbench-canvas-background", variant: BackgroundVariant.Dots, gap: 12, size: 1 })), MinimapRenderer ? jsx(MinimapRenderer, {}) : jsx(MiniMap, {}), ControlsRenderer ? jsx(ControlsRenderer, {}) : jsx(Controls, {}), menuState?.type === "default" &&
                                 (DefaultContextMenuRenderer ? (jsx(DefaultContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, keyboardShortcuts: keyboardShortcuts })) : (jsx(DefaultContextMenu, { open: true, clientPos: menuState.menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, keyboardShortcuts: keyboardShortcuts }))), menuState?.type === "node" &&
                                 nodeContextMenuHandlers &&
                                 (NodeContextMenuRenderer ? (jsx(NodeContextMenuRenderer, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode, wb: wb, keyboardShortcuts: keyboardShortcuts })) : (jsx(NodeContextMenu, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode }))), menuState?.type === "selection" &&
-                                (SelectionContextMenuRenderer ? (jsx(SelectionContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, keyboardShortcuts: keyboardShortcuts })) : (jsx(SelectionContextMenu, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, keyboardShortcuts: keyboardShortcuts })))] }), jsx(SelectionBoundOverlay, { selection: selection, rfInstance: rfInstanceRef.current, viewportTick: selectionOverlayTick })] }), toast && (jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
+                                (SelectionContextMenuRenderer ? (jsx(SelectionContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, keyboardShortcuts: keyboardShortcuts })) : (jsx(SelectionContextMenu, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, keyboardShortcuts: keyboardShortcuts })))] }), jsx(SelectionActiveSync, { selection: selection })] }), toast && (jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
 });
 const WorkbenchCanvas = WorkbenchCanvasComponent;