fix: reverts experimental mechanic to test efficiency gains

src/components/DebugUtils/DebugUtils.tsx

@@ -9,17 +9,14 @@ export const DebugUtils = () => {
   const {
     customVars: { appPadding }
   } = useTheme();
-  const uiState = useUiStateStore(({ scroll, mouse, zoom, rendererSize }) => {
-    return { scroll, mouse, zoom, rendererSize };
-  });
+  const uiState = useUiStateStore(
+    ({ scroll, mouse, zoom, rendererSize, mode }) => {
+      return { scroll, mouse, zoom, rendererSize, mode };
+    }
+  );
   const scene = useSceneStore((state) => {
     return state;
   });
-  const mode = useUiStateStore((state) => {
-    return state.mode;
-  });
-
-  const { scroll, mouse, zoom, rendererSize } = uiState;
 
   return (
     <Box
@@ -50,36 +47,36 @@ export const DebugUtils = () => {
       >
         <LineItem
           title="Mouse"
-          value={`${mouse.position.tile.x}, ${mouse.position.tile.y}`}
+          value={`${uiState.mouse.position.tile.x}, ${uiState.mouse.position.tile.y}`}
         />
         <LineItem
           title="Mouse down"
           value={
-            mouse.mousedown
-              ? `${mouse.mousedown.tile.x}, ${mouse.mousedown.tile.y}`
+            uiState.mouse.mousedown
+              ? `${uiState.mouse.mousedown.tile.x}, ${uiState.mouse.mousedown.tile.y}`
               : 'null'
           }
         />
         <LineItem
           title="Mouse delta"
           value={
-            mouse.delta
-              ? `${mouse.delta.tile.x}, ${mouse.delta.tile.y}`
+            uiState.mouse.delta
+              ? `${uiState.mouse.delta.tile.x}, ${uiState.mouse.delta.tile.y}`
               : 'null'
           }
         />
         <LineItem
           title="Scroll"
-          value={`${scroll.position.x}, ${scroll.position.y}`}
+          value={`${uiState.scroll.position.x}, ${uiState.scroll.position.y}`}
         />
-        <LineItem title="Zoom" value={zoom} />
+        <LineItem title="Zoom" value={uiState.zoom} />
         <LineItem
           title="Size"
-          value={`${rendererSize.width}, ${rendererSize.height}`}
+          value={`${uiState.rendererSize.width}, ${uiState.rendererSize.height}`}
         />
         <LineItem title="Scene info" value={`${scene.nodes.length} nodes`} />
-        <LineItem title="Mode" value={mode.type} />
-        <LineItem title="Mode data" value={JSON.stringify(mode)} />
+        <LineItem title="Mode" value={uiState.mode.type} />
+        <LineItem title="Mode data" value={JSON.stringify(uiState.mode)} />
       </Box>
     </Box>
   );

src/components/Renderer/Renderer.tsx

@@ -19,7 +19,7 @@ export const Renderer = () => {
   const mode = useUiStateStore((state) => {
     return state.mode;
   });
-  const { setRendererSize } = useUiStateStore((state) => {
+  const uiStateActions = useUiStateStore((state) => {
     return state.actions;
   });
   const { setElement: setInteractionsElement } = useInteractionManager();
@@ -37,12 +37,15 @@ export const Renderer = () => {
   }, [setInteractionsElement, observe, disconnect]);
 
   useEffect(() => {
-    setRendererSize(rendererSize);
-  }, [rendererSize, setRendererSize]);
+    uiStateActions.setRendererSize(rendererSize);
+  }, [rendererSize, uiStateActions]);
 
   return (
     <Box
       sx={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
         width: '100%',
         height: '100%'
       }}

src/interaction/useInteractionManager.ts

@@ -9,7 +9,6 @@ import { AreaTool } from './reducers/AreaTool';
 import { Connector } from './reducers/Connector';
 import { Pan } from './reducers/Pan';
 import { PlaceElement } from './reducers/PlaceElement';
-// import { Lasso } from './reducers/Lasso';
 
 const reducers: { [k in string]: InteractionReducer } = {
   CURSOR: Cursor,
@@ -18,11 +17,9 @@ const reducers: { [k in string]: InteractionReducer } = {
   CONNECTOR: Connector,
   PAN: Pan,
   PLACE_ELEMENT: PlaceElement
-  // LASSO: Lasso,
 };
 
 export const useInteractionManager = () => {
-  const onMouseEventRef = useRef<(e: MouseEvent) => void>(() => {});
   const rendererRef = useRef<HTMLElement>();
   const uiState = useUiStateStore((state) => {
     return state;
@@ -105,23 +102,19 @@ export const useInteractionManager = () => {
     [scene, uiState]
   );
 
-  useEffect(() => {
-    onMouseEventRef.current = onMouseEvent;
-  }, [onMouseEvent]);
-
   useEffect(() => {
     const el = window;
 
-    el.addEventListener('mousemove', onMouseEventRef.current);
-    el.addEventListener('mousedown', onMouseEventRef.current);
-    el.addEventListener('mouseup', onMouseEventRef.current);
+    el.addEventListener('mousemove', onMouseEvent);
+    el.addEventListener('mousedown', onMouseEvent);
+    el.addEventListener('mouseup', onMouseEvent);
 
     return () => {
-      el.removeEventListener('mousemove', onMouseEventRef.current);
-      el.removeEventListener('mousedown', onMouseEventRef.current);
-      el.removeEventListener('mouseup', onMouseEventRef.current);
+      el.removeEventListener('mousemove', onMouseEvent);
+      el.removeEventListener('mousedown', onMouseEvent);
+      el.removeEventListener('mouseup', onMouseEvent);
     };
-  }, []);
+  }, [onMouseEvent]);
 
   const setElement = useCallback((element: HTMLElement) => {
     rendererRef.current = element;