fix: implements various minor fixes

src/components/Connector/Connector.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Box } from '@mui/material';
-import { Connector as ConnectorI, Node, Coords } from 'src/types';
+import { Node, Coords } from 'src/types';
 import { UNPROJECTED_TILE_SIZE } from 'src/config';
 import { pathfinder, getBoundingBox, getBoundingBoxSize } from 'src/utils';
 import { IsoTileArea } from 'src/components/IsoTileArea/IsoTileArea';
@@ -8,7 +8,7 @@ import { useGetTilePosition } from 'src/hooks/useGetTilePosition';
 import { useUiStateStore } from 'src/stores/useUiStateStore';
 
 interface Props {
-  connector: ConnectorI;
+  // connector: ConnectorI;
   fromNode: Node;
   toNode: Node;
 }

src/components/Renderer/Renderer.tsx

@@ -8,7 +8,7 @@ import { Grid } from 'src/components/Grid/Grid';
 import { Cursor } from 'src/components/Cursor/Cursor';
 import { Node } from 'src/components/Node/Node';
 import { Group } from 'src/components/Group/Group';
-import { Connector } from 'src/components/Connector/Connector';
+// import { Connector } from 'src/components/Connector/Connector';
 import { DebugUtils } from 'src/components/DebugUtils/DebugUtils';
 import { useResizeObserver } from 'src/hooks/useResizeObserver';
 
@@ -37,7 +37,7 @@ export const Renderer = () => {
     return state.actions;
   });
   const { setElement } = useInteractionManager();
-  const { observe, size: rendererSize } = useResizeObserver();
+  const { observe, disconnect, size: rendererSize } = useResizeObserver();
 
   const getNodesFromIds = useCallback(
     (nodeIds: string[]) => {
@@ -59,7 +59,11 @@ export const Renderer = () => {
 
     observe(containerRef.current);
     setElement(containerRef.current);
-  }, [setElement, observe]);
+
+    return () => {
+      disconnect();
+    };
+  }, [setElement, observe, disconnect]);
 
   useEffect(() => {
     setRendererSize(rendererSize);

src/hooks/useDiagramUtils.ts

@@ -8,12 +8,6 @@ import { useGetTilePosition } from 'src/hooks/useGetTilePosition';
 const BOUNDING_BOX_PADDING = 4;
 
 export const useDiagramUtils = () => {
-  const zoom = useUiStateStore((state) => {
-    return state.zoom;
-  });
-  const scroll = useUiStateStore((state) => {
-    return state.scroll;
-  });
   const scene = useSceneStore(({ nodes, groups, connectors, icons }) => {
     return {
       nodes,
@@ -57,10 +51,10 @@ export const useDiagramUtils = () => {
 
   const fitDiagramToScreen = useCallback(() => {
     const boundingBox = getDiagramBoundingBox();
-    const newZoom = Math.min(
-      window.innerWidth / boundingBox.width,
-      window.innerHeight / boundingBox.height
-    );
+    // const newZoom = Math.min(
+    //   window.innerWidth / boundingBox.width,
+    //   window.innerHeight / boundingBox.height
+    // );
 
     uiStateActions.setScroll({
       offset: {

src/hooks/useResizeObserver.ts

@@ -9,18 +9,21 @@ export const useResizeObserver = () => {
     resizeObserverRef.current?.disconnect();
   }, []);
 
-  const observe = useCallback((element: HTMLElement) => {
-    disconnect();
+  const observe = useCallback(
+    (element: HTMLElement) => {
+      disconnect();
 
-    resizeObserverRef.current = new ResizeObserver(() => {
-      setSize({
-        width: element.clientWidth,
-        height: element.clientHeight
+      resizeObserverRef.current = new ResizeObserver(() => {
+        setSize({
+          width: element.clientWidth,
+          height: element.clientHeight
+        });
       });
-    });
 
-    resizeObserverRef.current.observe(element);
-  }, []);
+      resizeObserverRef.current.observe(element);
+    },
+    [disconnect]
+  );
 
   useEffect(() => {
     return () => {
@@ -30,6 +33,7 @@ export const useResizeObserver = () => {
 
   return {
     observe,
-    size
+    size,
+    disconnect
   };
 };

src/interaction/useInteractionManager.ts

@@ -135,7 +135,8 @@ export const useInteractionManager = () => {
       uiStateActions,
       scene,
       contextMenu,
-      zoom
+      zoom,
+      rendererSize
     ]
   );