performance fix for node windows

emilwidlund · May 30, 2024 · 9f39c10 · 9f39c10
1 parent bb7c37b
commit 9f39c10
Show file tree

Hide file tree

Showing 5 changed files with 248 additions and 192 deletions.
diff --git a/apps/web/src/circuit/components/Connection/Connection.tsx b/apps/web/src/circuit/components/Connection/Connection.tsx
@@ -26,71 +26,84 @@ export const Connection = observer(
         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;
-                        }
+            return autorun(() => {
+                if (connection) {
+                    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);
+
+                    if (!outputElement || !inputElement) {
+                        return;
+                    }
+
+                    const fromPosition = store.getNodeByPortId(
+                        connection.from.id
+                    )?.position;
+                    const toPosition = store.getNodeByPortId(
+                        connection.to.id
+                    )?.position;
 
-                        const outputCartesian = fromCanvasCartesianPoint(
-                            fromPosition.x + NODE_POSITION_OFFSET_X,
-                            fromPosition.y
-                        );
+                    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 inputCartesian = fromCanvasCartesianPoint(
+                        toPosition.x - NODE_POSITION_OFFSET_X,
+                        toPosition.y
+                    );
 
-                        const outputPortPosition = {
-                            x: outputCartesian.x,
-                            y: outputCartesian.y + outputElement.offsetTop
-                        };
+                    const outputPortPosition = {
+                        x: outputCartesian.x,
+                        y: outputCartesian.y + outputElement.offsetTop
+                    };
 
-                        const inputPortPosition = {
-                            x: inputCartesian.x + inputElement.offsetLeft,
-                            y: inputCartesian.y + inputElement.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 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
-                        };
+                    const newToPos = {
+                        x: inputPortPosition.x - INPUT_PORT_OFFSET_X,
+                        y: inputPortPosition.y + INPUT_PORT_OFFSET_Y
+                    };
 
-                        setFromPos(newFromPos);
-                        setToPos(newToPos);
+                    setFromPos(newFromPos);
+                    setToPos(newToPos);
 
-                        setPathString(quadraticCurve(newFromPos, newToPos));
-                    }
-                });
-            }
-        }, [outputElement, inputElement]);
+                    setPathString(quadraticCurve(newFromPos, newToPos));
+                }
+            });
+        }, []);
 
         React.useEffect(() => {
-            if (output && outputElement) {
+            if (output) {
                 return autorun(() => {
+                    const outputElement = connection
+                        ? store.portElements.get(connection.from.id)
+                        : output
+                          ? store.portElements.get(output.id)
+                          : undefined;
+
+                    if (!outputElement) {
+                        return;
+                    }
+
                     const outputPosition = store.getNodeByPortId(
                         output.id
                     )?.position;
@@ -122,7 +135,7 @@ export const Connection = observer(
                     );
                 });
             }
-        }, [output, outputElement]);
+        }, [output]);
 
         const handleClick = React.useCallback(() => {
             if (connection) {

diff --git a/apps/web/src/circuit/components/Node/Node.tsx b/apps/web/src/circuit/components/Node/Node.tsx
@@ -21,6 +21,27 @@ export const Node = observer(
         const { store } = React.useContext(StoreContext);
         const router = useRouter();
 
+        const [windowActive, setWindowActive] = React.useState(false);
+
+        React.useEffect(() => {
+            if (ref.current) {
+                const observer = new IntersectionObserver(
+                    entries => {
+                        entries.forEach(entry => {
+                            setWindowActive(entry.isIntersecting);
+                        });
+                    },
+                    { threshold: 0 }
+                );
+
+                observer.observe(ref.current);
+
+                return () => {
+                    observer.disconnect();
+                };
+            }
+        }, []);
+
         React.useEffect(() => {
             if (ref.current) {
                 store.setNodeElement(node.id, ref.current);
@@ -147,10 +168,14 @@ export const Node = observer(
                             />
                         </div>
                     </div>
-                    {window}
+                    {windowActive && window}
                     <div className={nodeContentWrapperClassNames}>
-                        <NodePorts ports={Object.values(node.inputs)} />
                         <NodePorts
+                            ports={Object.values(node.inputs)}
+                            windowActive={windowActive}
+                        />
+                        <NodePorts
+                            windowActive={windowActive}
                             ports={Object.values(node.outputs)}
                             isOutputWrapper={true}
                         />
@@ -171,27 +196,35 @@ const NodeAction = ({ color = '#fff', onClick }: NodeActionProps) => {
     );
 };
 
-const NodePorts = ({ ports, isOutputWrapper }: NodePortsProps) => {
+const NodePorts = ({
+    ports,
+    isOutputWrapper,
+    windowActive
+}: NodePortsProps) => {
     const nodePortsWrapperClassNames = clsx(
         'flex flex-col flex-grow px-4 pb-5',
         isOutputWrapper ? 'items-end' : 'items-start'
     );
     return (
         <div className={nodePortsWrapperClassNames}>
             {ports.map(port => (
-                <Port key={port.id} port={port} isOutput={!!isOutputWrapper} />
+                <Port
+                    key={port.id}
+                    port={port}
+                    isOutput={!!isOutputWrapper}
+                    windowActive={windowActive}
+                />
             ))}
         </div>
     );
 };
 
-export const NodeWindow = React.forwardRef<
-    HTMLDivElement,
-    React.PropsWithChildren<{ className?: string }>
->(({ children, className }, ref) => {
+export const NodeWindow = ({
+    children,
+    className
+}: React.PropsWithChildren<{ className?: string }>) => {
     return (
         <div
-            ref={ref}
             className={clsx(
                 'relative flex flex-col m-4 rounded-3xl overflow-hidden bg-slate-100 max-h-[226px] h-full',
                 className
@@ -201,4 +234,4 @@ export const NodeWindow = React.forwardRef<
             {children}
         </div>
     );
-});
+};
diff --git a/apps/web/src/circuit/components/Node/Node.types.ts b/apps/web/src/circuit/components/Node/Node.types.ts
@@ -18,4 +18,5 @@ export type NodeActionProps = {
 export type NodePortsProps = {
     ports: Input<unknown>[] | Output<unknown>[];
     isOutputWrapper?: boolean;
+    windowActive: boolean;
 };