Added resize observer

apps/web/src/components/appStatusBar.tsx

@@ -1,4 +1,8 @@
 export const AppStatusBar = () => {
+  //image size
+  //selection size
+  //zoom level
+  //cursor position
   return <div className="px-2 border-t bg-secondary">Status bar</div>;
 };
 

apps/web/src/components/canvasViewport.tsx

@@ -60,7 +60,7 @@ export const CanvasViewport = () => {
       <div
         style={{ opacity: 0 }}
         ref={hostElementRef}
-        className="absolute size-full overflow-hidden transition-opacity duration-1000"
+        className="absolute size-full overflow-hidden transition-opacity duration-1000 cursor-crosshair"
       ></div>
       <div className="absolute p-small">Middle mouse to move/zoom</div>
     </div>

apps/web/src/hooks/useResizeObserver.ts

@@ -0,0 +1,27 @@
+import { Size } from "@/utils/common";
+import { RefObject, useEffect } from "react";
+
+export const useResizeObserver = (
+  ref: RefObject<HTMLElement>,
+  onResize: (size: Size) => void
+) => {
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const element = ref.current;
+    const observer = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        const { width, height } = entry.contentRect;
+        onResize({ width, height });
+      }
+    });
+
+    observer.observe(element);
+
+    return () => {
+      observer.unobserve(element);
+      observer.disconnect();
+    };
+  }, [ref, onResize]);
+};
+