janky fit window

src/components/canvas.jsx

@@ -15,7 +15,7 @@ import Note from "./note";
 export default function Canvas(props) {
   const { tables, updateTable, relationships, addRelationship } =
     useContext(TableContext);
-  const { areas, setAreas, updateArea } = useContext(AreaContext);
+  const { areas, updateArea } = useContext(AreaContext);
   const { notes, updateNote } = useContext(NoteContext);
   const { settings, setSettings } = useContext(SettingsContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
@@ -118,8 +118,8 @@ export default function Canvas(props) {
       dragging.element === ObjectType.NONE &&
       areaResize.id === -1
     ) {
-      const dx = (e.clientX - panOffset.x) / settings.zoom;
-      const dy = (e.clientY - panOffset.y) / settings.zoom;
+      const dx = e.clientX - panOffset.x;
+      const dy = e.clientY - panOffset.y;
       setSettings((prev) => ({
         ...prev,
         pan: { x: prev.pan.x + dx, y: prev.pan.y + dy },
@@ -169,20 +169,12 @@ export default function Canvas(props) {
         newHeight = initCoords.height + (mouseY - initCoords.mouseY);
       }
 
-      setAreas((prev) =>
-        prev.map((a) => {
-          if (a.id === areaResize.id) {
-            return {
-              ...a,
-              x: newX,
-              y: newY,
-              width: newWidth,
-              height: newHeight,
-            };
-          }
-          return a;
-        })
-      );
+      updateArea(areaResize.id, {
+        x: newX,
+        y: newY,
+        width: newWidth,
+        height: newHeight,
+      });
     }
   };
 
@@ -379,6 +371,7 @@ export default function Canvas(props) {
               transform: `translate(${settings.pan.x}px, ${settings.pan.y}px) scale(${settings.zoom})`,
               transformOrigin: "top left",
             }}
+            id="diagram"
           >
             {areas.map((a) => (
               <Area

src/components/control_panel.jsx

@@ -404,6 +404,24 @@ export default function ControlPanel(props) {
   };
   const resetView = () =>
     setSettings((prev) => ({ ...prev, zoom: 1, pan: { x: 0, y: 0 } }));
+  const fitWindow = () => {
+    const diagram = document.getElementById("diagram").getBoundingClientRect();
+    const canvas = document.getElementById("canvas").getBoundingClientRect();
+
+    const scaleX = canvas.width / diagram.width;
+    const scaleY = canvas.height / diagram.height;
+
+    const scale = Math.min(scaleX, scaleY);
+
+    const translateX = canvas.width / 2;
+    const translateY = canvas.height / 2;
+
+    setSettings((prev) => ({
+      ...prev,
+      zoom: scale,
+      pan: { x: translateX, y: translateY },
+    }));
+  };
 
   const menu = {
     File: {
@@ -691,6 +709,7 @@ export default function ControlPanel(props) {
   });
   useHotkeys("ctrl+alt+c, meta+alt+c", copyAsImage, { preventDefault: true });
   useHotkeys("ctrl+r, meta+r", resetView, { preventDefault: true });
+  useHotkeys("ctrl+alt+w, meta+alt+w", fitWindow, { preventDefault: true });
 
   return (
     <div>
@@ -700,11 +719,17 @@ export default function ControlPanel(props) {
           {layoutDropdown()}
           <Divider layout="vertical" margin="8px" />
           <Dropdown
-            style={{ width: "180px" }}
+            style={{ width: "240px" }}
             position="bottomLeft"
             render={
               <Dropdown.Menu>
-                <Dropdown.Item>Fit window</Dropdown.Item>
+                <Dropdown.Item
+                  onClick={fitWindow}
+                  style={{ display: "flex", justifyContent: "space-between" }}
+                >
+                  <div>Fit window / Reset</div>
+                  <div className="text-gray-400">Ctrl+Alt+W</div>
+                </Dropdown.Item>
                 <Dropdown.Divider />
                 {[0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 2.0, 3.0].map((e, i) => (
                   <Dropdown.Item

src/components/sidebar.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export default function Sidebar() {
   return (
-    <div className="px-3 fixed right-0 bg-white h-full">
+    <div className="px-3 right-0 bg-white h-full">
       <div className="w-12 h-12 bg-blue-200 rounded-full mb-4"></div>
       <div className="w-12 h-12 bg-blue-200 rounded-full mb-4"></div>
       <div className="w-12 h-12 bg-blue-200 rounded-full mb-4"></div>