Fix panning

src/components/canvas.jsx

@@ -110,8 +110,8 @@ export default function Canvas(props) {
 
       setLine({
         ...line,
-        endX: (e.clientX - offsetX) / settings.zoom,
+        endX: (e.clientX - offsetX) / settings.zoom - settings.pan.x,
-        endY: (e.clientY - offsetY) / settings.zoom,
+        endY: (e.clientY - offsetY) / settings.zoom - settings.pan.y,
       });
     } else if (
       panning &&
@@ -120,29 +120,11 @@ export default function Canvas(props) {
     ) {
       const dx = (e.clientX - panOffset.x) / settings.zoom;
       const dy = (e.clientY - panOffset.y) / settings.zoom;
+      setSettings((prev) => ({
+        ...prev,
+        pan: { x: prev.pan.x + dx, y: prev.pan.y + dy },
+      }));
       setPanOffset({ x: e.clientX, y: e.clientY });
-
-      setTables((prev) =>
-        prev.map((t) => ({
-          ...t,
-          x: t.x + dx,
-          y: t.y + dy,
-        }))
-      );
-
-      setRelationships(
-        relationships.map((r) => ({
-          ...r,
-          startX: tables[r.startTableId].x + 15,
-          startY: tables[r.startTableId].y + r.startFieldId * 36 + 69,
-          endX: tables[r.endTableId].x + 15,
-          endY: tables[r.endTableId].y + r.endFieldId * 36 + 69,
-        }))
-      );
-
-      setAreas((prev) => prev.map((t) => ({ ...t, x: t.x + dx, y: t.y + dy })));
-
-      setNotes((prev) => prev.map((n) => ({ ...n, x: n.x + dx, y: n.y + dy })));
     } else if (dragging.element === ObjectType.TABLE && dragging.id >= 0) {
       const updatedTables = tables.map((t) => {
         if (t.id === dragging.id) {
@@ -385,8 +367,8 @@ export default function Canvas(props) {
           )}
           <g
             style={{
-              transform: `scale(${settings.zoom})`,
+              transform: `translate(${settings.pan.x}px, ${settings.pan.y}px) scale(${settings.zoom})`,
-              transformOrigin: "0 0",
+              transformOrigin: "top left",
             }}
           >
             {areas.map((a) => (

src/components/control_panel.jsx

@@ -113,8 +113,8 @@ export default function ControlPanel(props) {
       {
         id: prev.length,
         name: `table_${prev.length}`,
-        x: 0,
+        x: -settings.pan.x,
-        y: 0,
+        y: -settings.pan.y,
         fields: [
           {
             name: "id",
@@ -141,8 +141,8 @@ export default function ControlPanel(props) {
       {
         id: prev.length,
         name: `area_${prev.length}`,
-        x: 0,
+        x: -settings.pan.x,
-        y: 0,
+        y: -settings.pan.y,
         width: 200,
         height: 200,
         color: defaultTableTheme,
@@ -155,8 +155,8 @@ export default function ControlPanel(props) {
       ...prev,
       {
         id: prev.length,
-        x: 0,
+        x: -settings.pan.x,
-        y: 0,
+        y: -settings.pan.y,
         title: `note_${prev.length}`,
         content: "",
         color: defaultNoteTheme,

src/pages/editor.jsx

@@ -41,6 +41,7 @@ export default function Editor(props) {
     strictMode: false,
     showFieldSummary: true,
     zoom: 1,
+    pan: {x: 0, y: 0},
     showGrid: true,
   });
   const [undoStack, setUndoStack] = useState([]);