fix nodemove

emilwidlund · May 20, 2024 · f3d1276 · f3d1276
1 parent 1c4a47e
commit f3d1276
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 138 deletions.
diff --git a/apps/web/src/app/(landing)/CircuitExample.tsx b/apps/web/src/app/(landing)/CircuitExample.tsx
@@ -53,7 +53,7 @@ export const CircuitExample = () => {
 
     return (
         <StoreContext.Provider value={{ store: circuitStore }}>
-            <div className="relative flex flex-col justify-between h-screen md:h-auto md:aspect-video w-full cursor-[url('/cursor.svg')_4_4,auto] rounded-[2rem] overflow-hidden pointer-events-none">
+            <div className="relative flex flex-col justify-between h-screen md:h-auto md:aspect-video w-full cursor-[url('/cursor.svg')_4_4,auto] rounded-[2rem] overflow-hidden">
                 <CircuitComponent
                     store={circuitStore}
                     nodeWindowResolver={nodeWindowResolver}

diff --git a/apps/web/src/app/(protected)/circuit/[...circuitId]/ClientPage.tsx b/apps/web/src/app/(protected)/circuit/[...circuitId]/ClientPage.tsx
@@ -22,6 +22,7 @@ import { Menu } from '../../../../components/Menu/Menu/Menu';
 import { Avatar } from '../../../../circuit/components/Avatar/Avatar';
 import { KeyboardArrowDownOutlined } from '@mui/icons-material';
 import { updateCircuit } from '../../../../server/mutations/updateCircuit';
+import { moveNode } from '@/server/mutations/moveNode';
 
 export const ClientPage = ({ circuit }: { circuit: ExtendedNode }) => {
     const [menuOpen, setMenuOpen] = useState(false);
@@ -70,6 +71,15 @@ export const ClientPage = ({ circuit }: { circuit: ExtendedNode }) => {
                     <CircuitComponent
                         store={canvasStore}
                         nodeWindowResolver={nodeWindowResolver}
+                        onNodeMoveStop={e => {
+                            for (const selectedNode of canvasStore.selectedNodes ||
+                                []) {
+                                moveNode(selectedNode.id, {
+                                    x: selectedNode.position.x,
+                                    y: selectedNode.position.y
+                                });
+                            }
+                        }}
                     />
                     {menuOpen && <Menu onClose={() => setMenuOpen(false)} />}
                     <div className="absolute left-1/2 bottom-12 -translate-x-1/2 flex flex-row justify-center">

diff --git a/apps/web/src/circuit/components/Node/Node.tsx b/apps/web/src/circuit/components/Node/Node.tsx
@@ -13,162 +13,156 @@ import clsx from 'clsx';
 import { motion } from 'framer-motion';
 import { Circuit } from '@bitspace/circuit';
 import { useRouter } from 'next/navigation';
-import { moveNode } from '../../../server/mutations/moveNode';
 import { removeNode } from '../../../server/mutations/removeNode';
 
-export const Node = observer(({ node, actions, window }: NodeProps) => {
-    const ref = React.useRef<HTMLDivElement>(null);
-    const { onMouseEnter, onMouseLeave, isHovered } = useHover();
-    const { store } = React.useContext(StoreContext);
-    const router = useRouter();
+export const Node = observer(
+    ({ node, actions, window, onMoveStop }: NodeProps) => {
+        const ref = React.useRef<HTMLDivElement>(null);
+        const { onMouseEnter, onMouseLeave, isHovered } = useHover();
+        const { store } = React.useContext(StoreContext);
+        const router = useRouter();
 
-    React.useEffect(() => {
-        if (ref.current) {
-            store.setNodeElement(node.id, ref.current);
+        React.useEffect(() => {
+            if (ref.current) {
+                store.setNodeElement(node.id, ref.current);
 
-            return () => {
-                store.removeNodeElement(node.id);
-            };
-        }
-    }, [ref]);
+                return () => {
+                    store.removeNodeElement(node.id);
+                };
+            }
+        }, [ref]);
+
+        const handleOnClick = React.useCallback(
+            (e: React.MouseEvent<HTMLDivElement>) => {
+                if (!store.selectedNodes?.includes(node)) {
+                    store.selectNodes([node]);
+                }
+            },
+            [node]
+        );
 
-    const handleOnClick = React.useCallback(
-        (e: React.MouseEvent<HTMLDivElement>) => {
+        const handleOnFocus = React.useCallback(() => {
             if (!store.selectedNodes?.includes(node)) {
                 store.selectNodes([node]);
             }
-        },
-        [node]
-    );
+        }, [node]);
 
-    const handleOnFocus = React.useCallback(() => {
-        if (!store.selectedNodes?.includes(node)) {
-            store.selectNodes([node]);
-        }
-    }, [node]);
+        const handleOnDrag: DraggableEventHandler = React.useCallback(
+            (e, { deltaX, deltaY }) => {
+                e.preventDefault();
+                e.stopPropagation();
 
-    const handleOnDrag: DraggableEventHandler = React.useCallback(
-        (e, { deltaX, deltaY }) => {
-            e.preventDefault();
-            e.stopPropagation();
+                for (const selectedNode of store.selectedNodes || []) {
+                    selectedNode.incrementPosition(deltaX, -deltaY);
+                }
+            },
+            [node]
+        );
 
-            for (const selectedNode of store.selectedNodes || []) {
-                selectedNode.incrementPosition(deltaX, -deltaY);
-            }
-        },
-        [node]
-    );
+        const handleRemoveNode = React.useCallback(() => {
+            node.dispose();
 
-    const handleRemoveNode = React.useCallback(() => {
-        node.dispose();
+            store.removeNode(node);
 
-        store.removeNode(node);
+            removeNode(node.id);
+        }, [node]);
 
-        removeNode(node.id);
-    }, [node]);
+        const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> =
+            React.useCallback(() => {
+                if (node instanceof Circuit) {
+                    router.push(`/circuit/${store.circuit.id}/${node.id}`);
+                }
+            }, [node, store]);
 
-    const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> =
-        React.useCallback(() => {
-            if (node instanceof Circuit) {
-                router.push(`/circuit/${store.circuit.id}/${node.id}`);
-            }
-        }, [node, store]);
-
-    const active = store.selectedNodes?.indexOf(node) !== -1;
-    const position = node.position || { x: 0, y: 0 };
-
-    const nodeWrapperClassNames = clsx(
-        `absolute flex flex-col select-none focus:outline-none w-[260px] bg-[#fcfdff] border-white border rounded-3xl transition-shadow active:shadow-2xl opacity-100`,
-        {
-            'z-10': !active,
-            'z-20': active,
-            'shadow-2xl': active
-        }
-    );
+        const active = store.selectedNodes?.indexOf(node) !== -1;
+        const position = node.position || { x: 0, y: 0 };
 
-    const nodeHeaderWrapperClassNames = clsx(
-        'relative flex flex-row justify-center items-center px-4 pt-4 text-xs font-medium rounded-t-xl handle',
-        {
-            'text-black': active
-        }
-    );
+        const nodeWrapperClassNames = clsx(
+            `absolute flex flex-col select-none focus:outline-none w-[260px] bg-[#fcfdff] border-white border rounded-3xl transition-shadow active:shadow-2xl opacity-100`,
+            {
+                'z-10': !active,
+                'z-20': active,
+                'shadow-2xl': active
+            }
+        );
 
-    const nodeActionsClassNames = clsx(
-        'absolute right-5 top-5 flex flex-row nowrap gap-x-2 align-center transition-opacity',
-        {
-            'opacity-0': !(isHovered || active),
-            'opacity-100': isHovered || active
-        }
-    );
+        const nodeHeaderWrapperClassNames = clsx(
+            'relative flex flex-row justify-center items-center px-4 pt-4 text-xs font-medium rounded-t-xl handle',
+            {
+                'text-black': active
+            }
+        );
 
-    const nodeContentWrapperClassNames = clsx(
-        `flex flex-row justify-between items-start rounded-b-xl border-b-slate-100`,
-        {
-            'mt-4': !window
-        }
-    );
+        const nodeActionsClassNames = clsx(
+            'absolute right-5 top-5 flex flex-row nowrap gap-x-2 align-center transition-opacity',
+            {
+                'opacity-0': !(isHovered || active),
+                'opacity-100': isHovered || active
+            }
+        );
 
-    return (
-        <Draggable
-            nodeRef={ref}
-            position={fromCanvasCartesianPoint(
-                position.x - NODE_POSITION_OFFSET_X,
-                position.y
-            )}
-            onDrag={handleOnDrag}
-            onStop={e => {
-                for (const selectedNode of store.selectedNodes || []) {
-                    moveNode(selectedNode.id, {
-                        x: selectedNode.position.x,
-                        y: selectedNode.position.y
-                    });
-                }
-            }}
-        >
-            <motion.div
-                ref={ref}
-                className={nodeWrapperClassNames}
-                onClick={handleOnClick}
-                onFocus={handleOnFocus}
-                onMouseEnter={onMouseEnter}
-                onMouseLeave={onMouseLeave}
-                onDoubleClick={handleDoubleClick}
-                tabIndex={0}
-                variants={{
-                    initial: {
-                        opacity: 0
-                    },
-                    animate: {
-                        opacity: 1,
-                        transition: {
-                            duration: 1.5,
-                            ease: [0.75, 0, 0.25, 1]
-                        }
-                    }
-                }}
+        const nodeContentWrapperClassNames = clsx(
+            `flex flex-row justify-between items-start rounded-b-xl border-b-slate-100`,
+            {
+                'mt-4': !window
+            }
+        );
+
+        return (
+            <Draggable
+                nodeRef={ref}
+                position={fromCanvasCartesianPoint(
+                    position.x - NODE_POSITION_OFFSET_X,
+                    position.y
+                )}
+                onDrag={handleOnDrag}
+                onStop={onMoveStop}
             >
-                <div className={nodeHeaderWrapperClassNames}>
-                    {/** @ts-ignore */}
-                    <span>{node.constructor.displayName}</span>
-                    <div className={nodeActionsClassNames}>
-                        <NodeAction
-                            color="#ff4444"
-                            onClick={handleRemoveNode}
+                <motion.div
+                    ref={ref}
+                    className={nodeWrapperClassNames}
+                    onClick={handleOnClick}
+                    onFocus={handleOnFocus}
+                    onMouseEnter={onMouseEnter}
+                    onMouseLeave={onMouseLeave}
+                    onDoubleClick={handleDoubleClick}
+                    tabIndex={0}
+                    variants={{
+                        initial: {
+                            opacity: 0
+                        },
+                        animate: {
+                            opacity: 1,
+                            transition: {
+                                duration: 1.5,
+                                ease: [0.75, 0, 0.25, 1]
+                            }
+                        }
+                    }}
+                >
+                    <div className={nodeHeaderWrapperClassNames}>
+                        {/** @ts-ignore */}
+                        <span>{node.constructor.displayName}</span>
+                        <div className={nodeActionsClassNames}>
+                            <NodeAction
+                                color="#ff4444"
+                                onClick={handleRemoveNode}
+                            />
+                        </div>
+                    </div>
+                    {window}
+                    <div className={nodeContentWrapperClassNames}>
+                        <NodePorts ports={Object.values(node.inputs)} />
+                        <NodePorts
+                            ports={Object.values(node.outputs)}
+                            isOutputWrapper={true}
                         />
                     </div>
-                </div>
-                {window}
-                <div className={nodeContentWrapperClassNames}>
-                    <NodePorts ports={Object.values(node.inputs)} />
-                    <NodePorts
-                        ports={Object.values(node.outputs)}
-                        isOutputWrapper={true}
-                    />
-                </div>
-            </motion.div>
-        </Draggable>
-    );
-});
+                </motion.div>
+            </Draggable>
+        );
+    }
+);
 
 const NodeAction = ({ color = '#fff', onClick }: NodeActionProps) => {
     return (

diff --git a/apps/web/src/circuit/components/Node/Node.types.ts b/apps/web/src/circuit/components/Node/Node.types.ts
@@ -1,12 +1,13 @@
 import { Input, Node, Output } from '@bitspace/circuit';
-import { DraggableProps } from 'react-draggable';
+import { DraggableEventHandler, DraggableProps } from 'react-draggable';
 
 export type NodeProps = {
     node: Node;
     window?: JSX.Element;
     actions?: NodeActionProps[];
     className?: string;
     disabled?: boolean;
+    onMoveStop?: DraggableEventHandler;
 } & Partial<DraggableProps>;
 
 export type NodeActionProps = {

diff --git a/apps/web/src/circuit/containers/Circuit/Circuit.tsx b/apps/web/src/circuit/containers/Circuit/Circuit.tsx
@@ -16,9 +16,16 @@ import { CircuitProps, NodeWindowResolver } from './Circuit.types';
 import { motion } from 'framer-motion';
 import clsx from 'clsx';
 import { useUploadFile } from '../../hooks/useDropzone/useDropzone';
+import { DraggableEventHandler } from 'react-draggable';
 
 const Nodes = observer(
-    ({ windowResolver }: { windowResolver?: NodeWindowResolver }) => {
+    ({
+        windowResolver,
+        onNodeMoveStop
+    }: {
+        windowResolver?: NodeWindowResolver;
+        onNodeMoveStop?: DraggableEventHandler;
+    }) => {
         const { store } = React.useContext(StoreContext);
 
         return (
@@ -28,6 +35,7 @@ const Nodes = observer(
                         key={node.id}
                         node={node}
                         window={windowResolver?.(node)}
+                        onMoveStop={onNodeMoveStop}
                     />
                 ))}
             </>
@@ -93,6 +101,7 @@ export const Circuit = observer(
         onConnection,
         onConnectionRemoval,
         onNodeRemoval,
+        onNodeMoveStop,
         onSelectionChanged
     }: CircuitProps) => {
         useKeyboardActions(store);
@@ -164,7 +173,10 @@ export const Circuit = observer(
                 onScroll={onScroll}
                 onDrop={uploadFile}
             >
-                <Nodes windowResolver={nodeWindowResolver} />
+                <Nodes
+                    windowResolver={nodeWindowResolver}
+                    onNodeMoveStop={onNodeMoveStop}
+                />
                 <Connections />
                 <Selection />
             </Canvas>