fix example

emilwidlund · May 21, 2024 · b7413d1 · b7413d1
1 parent f3d1276
commit b7413d1
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 137 deletions.
diff --git a/apps/web/src/app/(landing)/CircuitExample.tsx b/apps/web/src/app/(landing)/CircuitExample.tsx
@@ -26,7 +26,7 @@ export const CircuitExample = () => {
         const hsvNode = new FromHSV();
         const hsvNode2 = new FromHSV();
 
-        timer.setPosition(-1300, 100);
+        timer.setPosition(-1400, 100);
         multiplication.setPosition(-1000, 100);
         toHSV.setPosition(-600, 100);
         cHarmonyNode.setPosition(-200, 50);
@@ -55,6 +55,7 @@ export const CircuitExample = () => {
         <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">
                 <CircuitComponent
+                    className="overflow-hidden"
                     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
@@ -23,6 +23,8 @@ 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';
+import { removeNode } from '@/server/mutations/removeNode';
+import { removeConnection } from '@/server/mutations/removeConnection';
 
 export const ClientPage = ({ circuit }: { circuit: ExtendedNode }) => {
     const [menuOpen, setMenuOpen] = useState(false);
@@ -71,6 +73,15 @@ export const ClientPage = ({ circuit }: { circuit: ExtendedNode }) => {
                     <CircuitComponent
                         store={canvasStore}
                         nodeWindowResolver={nodeWindowResolver}
+                        onNodeRemoval={node => {
+                            removeNode(node.id);
+                        }}
+                        onConnectionRemoval={connection => {
+                            removeConnection(
+                                connection.from.id,
+                                connection.to.id
+                            );
+                        }}
                         onNodeMoveStop={e => {
                             for (const selectedNode of canvasStore.selectedNodes ||
                                 []) {

diff --git a/apps/web/src/circuit/components/Connection/Connection.tsx b/apps/web/src/circuit/components/Connection/Connection.tsx
@@ -10,7 +10,6 @@ import { ConnectionProps } from './Connection.types';
 import { quadraticCurve } from './Connection.utils';
 import { motion } from 'framer-motion';
 import posthog from 'posthog-js';
-import { removeConnection } from '../../../server/mutations/removeConnection';
 
 const INPUT_PORT_OFFSET_X = 16;
 const INPUT_PORT_OFFSET_Y = 12;
@@ -20,152 +19,163 @@ const OUTPUT_PORT_OFFSET_Y = 12;
 
 const defaultPosition = { x: 0, y: 0 };
 
-export const Connection = observer(<T,>({ output, connection }: ConnectionProps<T>) => {
-    const [pathString, setPathString] = React.useState('');
-    const [fromPos, setFromPos] = React.useState(defaultPosition);
-    const [toPos, setToPos] = React.useState(defaultPosition);
-    const { store } = React.useContext(StoreContext);
-
-    const outputElement = connection
-        ? store.portElements.get(connection.from.id)
-        : output
-          ? store.portElements.get(output.id)
-          : undefined;
-    const inputElement = connection && store.portElements.get(connection.to.id);
-
-    React.useEffect(() => {
-        if (outputElement && inputElement) {
-            return autorun(() => {
-                if (connection) {
-                    const fromPosition = store.getNodeByPortId(connection.from.id)?.position;
-                    const toPosition = store.getNodeByPortId(connection.to.id)?.position;
-
-                    if (!fromPosition || !toPosition) {
+export const Connection = observer(
+    <T,>({ output, connection }: ConnectionProps<T>) => {
+        const [pathString, setPathString] = React.useState('');
+        const [fromPos, setFromPos] = React.useState(defaultPosition);
+        const [toPos, setToPos] = React.useState(defaultPosition);
+        const { store } = React.useContext(StoreContext);
+
+        const outputElement = connection
+            ? store.portElements.get(connection.from.id)
+            : output
+              ? store.portElements.get(output.id)
+              : undefined;
+        const inputElement =
+            connection && store.portElements.get(connection.to.id);
+
+        React.useEffect(() => {
+            if (outputElement && inputElement) {
+                return autorun(() => {
+                    if (connection) {
+                        const fromPosition = store.getNodeByPortId(
+                            connection.from.id
+                        )?.position;
+                        const toPosition = store.getNodeByPortId(
+                            connection.to.id
+                        )?.position;
+
+                        if (!fromPosition || !toPosition) {
+                            return;
+                        }
+
+                        const outputCartesian = fromCanvasCartesianPoint(
+                            fromPosition.x + NODE_POSITION_OFFSET_X,
+                            fromPosition.y
+                        );
+
+                        const inputCartesian = fromCanvasCartesianPoint(
+                            toPosition.x - NODE_POSITION_OFFSET_X,
+                            toPosition.y
+                        );
+
+                        const outputPortPosition = {
+                            x: outputCartesian.x,
+                            y: outputCartesian.y + outputElement.offsetTop
+                        };
+
+                        const inputPortPosition = {
+                            x: inputCartesian.x + inputElement.offsetLeft,
+                            y: inputCartesian.y + inputElement.offsetTop
+                        };
+
+                        const newFromPos = {
+                            x: outputPortPosition.x + OUTPUT_PORT_OFFSET_X,
+                            y: outputPortPosition.y + OUTPUT_PORT_OFFSET_Y
+                        };
+
+                        const newToPos = {
+                            x: inputPortPosition.x - INPUT_PORT_OFFSET_X,
+                            y: inputPortPosition.y + INPUT_PORT_OFFSET_Y
+                        };
+
+                        setFromPos(newFromPos);
+                        setToPos(newToPos);
+
+                        setPathString(quadraticCurve(newFromPos, newToPos));
+                    }
+                });
+            }
+        }, [outputElement, inputElement]);
+
+        React.useEffect(() => {
+            if (output && outputElement) {
+                return autorun(() => {
+                    const outputPosition = store.getNodeByPortId(
+                        output.id
+                    )?.position;
+
+                    if (!outputPosition) {
                         return;
                     }
 
                     const outputCartesian = fromCanvasCartesianPoint(
-                        fromPosition.x + NODE_POSITION_OFFSET_X,
-                        fromPosition.y
-                    );
-
-                    const inputCartesian = fromCanvasCartesianPoint(
-                        toPosition.x - NODE_POSITION_OFFSET_X,
-                        toPosition.y
+                        outputPosition.x + NODE_POSITION_OFFSET_X,
+                        outputPosition.y
                     );
 
                     const outputPortPosition = {
                         x: outputCartesian.x,
                         y: outputCartesian.y + outputElement.offsetTop
                     };
 
-                    const inputPortPosition = {
-                        x: inputCartesian.x + inputElement.offsetLeft,
-                        y: inputCartesian.y + inputElement.offsetTop
-                    };
-
                     const newFromPos = {
                         x: outputPortPosition.x + OUTPUT_PORT_OFFSET_X,
                         y: outputPortPosition.y + OUTPUT_PORT_OFFSET_Y
                     };
 
-                    const newToPos = {
-                        x: inputPortPosition.x - INPUT_PORT_OFFSET_X,
-                        y: inputPortPosition.y + INPUT_PORT_OFFSET_Y
-                    };
-
                     setFromPos(newFromPos);
-                    setToPos(newToPos);
-
-                    setPathString(quadraticCurve(newFromPos, newToPos));
-                }
-            });
-        }
-    }, [outputElement, inputElement]);
-
-    React.useEffect(() => {
-        if (output && outputElement) {
-            return autorun(() => {
-                const outputPosition = store.getNodeByPortId(output.id)?.position;
-
-                if (!outputPosition) {
-                    return;
-                }
-
-                const outputCartesian = fromCanvasCartesianPoint(
-                    outputPosition.x + NODE_POSITION_OFFSET_X,
-                    outputPosition.y
-                );
-
-                const outputPortPosition = {
-                    x: outputCartesian.x,
-                    y: outputCartesian.y + outputElement.offsetTop
-                };
-
-                const newFromPos = {
-                    x: outputPortPosition.x + OUTPUT_PORT_OFFSET_X,
-                    y: outputPortPosition.y + OUTPUT_PORT_OFFSET_Y
-                };
-
-                setFromPos(newFromPos);
-                setToPos(store.mousePosition);
-
-                setPathString(quadraticCurve(newFromPos, store.mousePosition));
-            });
-        }
-    }, [output, outputElement]);
-
-    const handleClick = React.useCallback(() => {
-        if (connection) {
-            connection.dispose();
-
-            removeConnection(connection.from.id, connection.to.id);
-
-            posthog.capture('Connection removed on connection click');
-        }
-    }, [connection]);
-
-    const selectedConnection =
-        connection &&
-        store.selectedNodes?.flatMap(node => node.connections).includes(connection as NodlConnection<unknown>);
-    const strokeColor = selectedConnection || output ? '#444' : '#ced5db';
-
-    return (
-        <motion.g
-            variants={{
-                initial: {
-                    opacity: 0
-                },
-                animate: {
-                    opacity: 1,
-                    transition: {
-                        duration: 1
+                    setToPos(store.mousePosition);
+
+                    setPathString(
+                        quadraticCurve(newFromPos, store.mousePosition)
+                    );
+                });
+            }
+        }, [output, outputElement]);
+
+        const handleClick = React.useCallback(() => {
+            if (connection) {
+                connection.dispose();
+
+                posthog.capture('Connection removed on connection click');
+            }
+        }, [connection]);
+
+        const selectedConnection =
+            connection &&
+            store.selectedNodes
+                ?.flatMap(node => node.connections)
+                .includes(connection as NodlConnection<unknown>);
+        const strokeColor = selectedConnection || output ? '#444' : '#ced5db';
+
+        return (
+            <motion.g
+                variants={{
+                    initial: {
+                        opacity: 0
+                    },
+                    animate: {
+                        opacity: 1,
+                        transition: {
+                            duration: 1
+                        }
                     }
-                }
-            }}
-        >
-            <path
-                className="connector"
-                d={pathString}
-                fill="none"
-                strokeWidth="2"
-                stroke={strokeColor}
-                onClick={handleClick}
-            />
-            <path
-                className="port"
-                d={`M${fromPos.x},${fromPos.y},${fromPos.x + 2},${fromPos.y}`}
-                fill="none"
-                strokeWidth="8"
-                stroke={strokeColor}
-            />
-            <path
-                className="port"
-                d={`M${toPos.x - 2},${toPos.y},${toPos.x},${toPos.y}`}
-                fill="none"
-                strokeWidth="8"
-                stroke={strokeColor}
-            />
-        </motion.g>
-    );
-});
+                }}
+            >
+                <path
+                    className="connector"
+                    d={pathString}
+                    fill="none"
+                    strokeWidth="2"
+                    stroke={strokeColor}
+                    onClick={handleClick}
+                />
+                <path
+                    className="port"
+                    d={`M${fromPos.x},${fromPos.y},${fromPos.x + 2},${fromPos.y}`}
+                    fill="none"
+                    strokeWidth="8"
+                    stroke={strokeColor}
+                />
+                <path
+                    className="port"
+                    d={`M${toPos.x - 2},${toPos.y},${toPos.x},${toPos.y}`}
+                    fill="none"
+                    strokeWidth="8"
+                    stroke={strokeColor}
+                />
+            </motion.g>
+        );
+    }
+);
diff --git a/apps/web/src/circuit/components/Node/Node.tsx b/apps/web/src/circuit/components/Node/Node.tsx
@@ -13,7 +13,6 @@ import clsx from 'clsx';
 import { motion } from 'framer-motion';
 import { Circuit } from '@bitspace/circuit';
 import { useRouter } from 'next/navigation';
-import { removeNode } from '../../../server/mutations/removeNode';
 
 export const Node = observer(
     ({ node, actions, window, onMoveStop }: NodeProps) => {
@@ -63,9 +62,7 @@ export const Node = observer(
             node.dispose();
 
             store.removeNode(node);
-
-            removeNode(node.id);
-        }, [node]);
+        }, [node, store]);
 
         const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> =
             React.useCallback(() => {

diff --git a/apps/web/src/circuit/containers/Circuit/Circuit.tsx b/apps/web/src/circuit/containers/Circuit/Circuit.tsx
@@ -154,6 +154,23 @@ export const Circuit = observer(
             );
         }, [onNodeRemoval, store]);
 
+        React.useEffect(() => {
+            return reaction(
+                () => store.circuit.connections,
+                (connections, prevConnections) => {
+                    const removedConnections = prevConnections.filter(
+                        node => !connections.includes(node)
+                    );
+
+                    if (removedConnections.length && onConnectionRemoval) {
+                        for (const connection of removedConnections) {
+                            onConnectionRemoval(connection);
+                        }
+                    }
+                }
+            );
+        }, [onNodeRemoval, store]);
+
         React.useEffect(() => {
             return reaction(
                 () => store.selectedNodes,