From b59082b8c9e5d75dff4aeef022441703c15aad92 Mon Sep 17 00:00:00 2001
From: Veer Shah <185037322+VeerShah41@users.noreply.github.com>
Date: Thu, 19 Mar 2026 20:38:32 +0530
Subject: [PATCH] fix: offset new tables and areas to prevent overlapping
 placement

When clicking 'Add table' or 'Add area' multiple times in a row,
all new elements spawned at the exact same canvas coordinates
(transform.pan.x, transform.pan.y), stacking invisibly on top
of each other.

Apply a cascade offset of (count * 20)px on both x and y axes
so each new element appears visibly below and to the right of
the previous one.

Fixes #736
---
 src/context/AreasContext.jsx   | 29 ++++++++++++++++-------------
 src/context/DiagramContext.jsx |  5 +++--
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/context/AreasContext.jsx b/src/context/AreasContext.jsx
index 2e18c1c22..6640f50ac 100644
--- a/src/context/AreasContext.jsx
+++ b/src/context/AreasContext.jsx
@@ -23,19 +23,22 @@ export default function AreasContextProvider({ children }) {
     } else {
       const width = 200;
       const height = 200;
-      setAreas((prev) => [
-        ...prev,
-        {
-          id: prev.length,
-          name: `area_${prev.length}`,
-          x: transform.pan.x - width / 2,
-          y: transform.pan.y - height / 2,
-          width,
-          height,
-          color: defaultBlue,
-          locked: false,
-        },
-      ]);
+      setAreas((prev) => {
+        const offset = prev.length * 20;
+        return [
+          ...prev,
+          {
+            id: prev.length,
+            name: `area_${prev.length}`,
+            x: transform.pan.x - width / 2 + offset,
+            y: transform.pan.y - height / 2 + offset,
+            width,
+            height,
+            color: defaultBlue,
+            locked: false,
+          },
+        ];
+      });
     }
     if (addToHistory) {
       setUndoStack((prev) => [
diff --git a/src/context/DiagramContext.jsx b/src/context/DiagramContext.jsx
index bdb144b54..1a313c1c7 100644
--- a/src/context/DiagramContext.jsx
+++ b/src/context/DiagramContext.jsx
@@ -18,11 +18,12 @@ export default function DiagramContextProvider({ children }) {
 
   const addTable = (data, addToHistory = true) => {
     const id = nanoid();
+    const offset = tables.length * 20;
     const newTable = {
       id,
       name: `table_${id}`,
-      x: transform.pan.x,
-      y: transform.pan.y,
+      x: transform.pan.x + offset,
+      y: transform.pan.y + offset,
       locked: false,
       fields: [
         {