fix: Fix overlap issue when creating multiple tables #22

HassanBahati · 2025-09-22T23:52:25Z

Description

When creating multiple tables in the diagram editor, new tables would overlap with existing ones because they were all positioned at the same fixed coordinates relative to the viewport center.

Brief summary of changes and motivation.
Implemented a smart positioning algorithm that automatically finds non-overlapping positions for new tables:

Added utility function findNonOverlappingPosition that checks if the default position overlaps with existing nodes and uses a spiral positioning algorithm to find alternative non-overlapping positions. Falls back to placing tables far from existing nodes if needed.

Type of Change

Bug fix
New feature
Breaking change
Documentation update

Testing

[] Tests added/updated
All tests pass locally
Tested on multiple browsers (Chrome, Firefox, Safari, Edge)

Test Environment:

Browser:
OS:

Checklist

Additional Notes

Any extra context or screenshots.

vercel · 2025-09-22T23:52:28Z

@HassanBahati is attempting to deploy a commit to the Md Azizul Hakim's projects Team on Vercel.

A member of the Team first needs to authorize it.

AHS12 · 2025-09-23T05:24:58Z

@HassanBahati Thanks, and Great job! This is indeed an issue, and your PR looks good, just some things to confirm before I approve this PR

I've created Issue [Bug]: Creating a new table form dialog/menu/shortcut overlap with each other and not showing in editor #23 to track this.
We have another feature allowing users to create a table from the right-click context menu. It uses a separate function, but please ensure your change doesn't impact that feature.
Since users can work on any part of the diagram, can you confirm that new tables are being created within the viewport area?
If the viewport area is crowded, will it default to overlap?

Again, thank you for your contribution. I really appreciate it

src/components/DiagramEditor.tsx

HassanBahati · 2025-09-23T09:46:28Z

src/lib/utils.ts

+    }
+  }
+
+  // Fallback: return a position far from existing nodes


If the viewport area is crowded, will it default to overlap?

I believe it will never default to overlap; the first attempt it tries the default position (near viewport center or right-click location). There is spiral search which ensures that if crowded, spirals outward in a golden angle pattern (up to 20 attempts). And finally calls a fallback where if still crowded, places the table far from existing nodes with proper spacing

Considering user experience, if they are dealing with a large, crowded diagram, overlapping might not be a major issue since they would need to locate the table anyway. After 20 attempts, we could create the table at its current position. Overlapping seems acceptable, as the user can simply drag it to a new spot.
@HassanBahati what do you think?

Well, from UX perspective, it is easy for a user to think the previously created tables disappear, or are removed once you create new ones due to the over lap. Here is a case study, a user creates over 20 tables, but they all keep overlapping, what would they think happened to the prior ones created? Would they assume they are ontop of each other? Would they think only the last created table exists?
here is an example in which i created 20 tables but the ui seems like i only have the last created table. But, in actual sense all 20 tables exist under the 20th.

You have a valid point on the user simply dragging it to a new spot...but doesn't assume that the user knows about the overlapping behavior? Does that mean new users have to first learn about the overlap behavior probably by reading some documentation?

@HassanBahati Let’s say the viewport is crowded, and there’s no space for a new table. When a user creates a new table, the table might find an empty spot elsewhere(outside of the viewport), but the user won’t notice it at first glance. That’s my concern. Your solution of avoiding overlap is actually good, and I’m happy to merge it. I just have this one case where I’m trying to find a solution: if there’s no space left in the viewport, can we allow overlap(inside the viewport)? That’s my question.

Desktop.2025.09.23.-.19.31.02.01.mp4

here is a demo video with my concern

oh i now get you, its a concern about what happens when there isnt any more space left in the viewpoint.

i agree with you that if there’s no space left in the viewport, we can allow overlap(inside the viewport)....in that case, can adjust to keep the algorithm aware of current viewpoint size, and work with that until full, after which can over lap to the last created.

@HassanBahati Since we’re in agreement, let’s proceed with updating your algorithm, and then I’ll merge it. Thanks for your time and effort!

Desktop.2025.09.23.-.23.15.00.02.mp4

@HassanBahati I can see the overlapping code, but it doesn't seem to be applying correctly. Let me know if you can check it out; I'm testing it in preview mode.

vercel · 2025-09-23T13:42:41Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
thoth-blueprint	Ready	Preview	Comment	Sep 23, 2025 5:09pm

HassanBahati · 2025-09-23T15:24:52Z

src/lib/utils.ts

-    x: maxX + spacing * 2,
-    y: maxY + spacing * 2,
-  };
+  // If all else fails, overlap on the last added table


added a final case that allows overlap to the last added table

Unfortunately, it's still not working as expected; the tables continue to be created outside the viewport when there's no available space. Perhaps you should consider passing an updated viewport boundary, which might help.

AHS12 · 2025-09-24T07:42:38Z

src/lib/utils.ts

+  preferredPosition: { x: number; y: number },
+  nodeWidth: number = 288,
+  nodeHeight: number = 100,
+  spacing: number = 50


Maybe we have to pass view port boundary here as well

AHS12 · 2025-09-24T07:46:17Z

src/lib/utils.ts

+
+  if (lastAddedNode && lastAddedNode.position) {
+    return {
+      x: lastAddedNode.position.x + 20,


Can we use const for this magic number 20?

AHS12 · 2025-09-24T07:47:05Z

src/lib/utils.ts

+  // try positions in a grid around the preferred position
+  const gridSize = nodeWidth + spacing;
+
+  for (let distance = 1; distance <= 10; distance++) {


const MAX_SEARCH_DISTANCE = 10;

Can we use a constant for this distance magic number?

AHS12 · 2025-10-05T07:09:04Z

@HassanBahati Hi, any updates from your side? I’m working on #11 and will need this feature. If I don’t hear back from you, I’ll close the PR and use your logic as a base for my fix. Thanks!

HassanBahati

Hi @AHS12 , sorry been caught up late. Will resolve on here by tomorrow. Thanks!

fix: Fix table overlap issue when creating multiple tables

9a1272a

HassanBahati changed the title ~~fix: Fix table overlap issue when creating multiple tables~~ fix: Fix overlap issue when creating multiple tables Sep 22, 2025

AHS12 mentioned this pull request Sep 23, 2025

[Bug]: Creating a new table form dialog/menu/shortcut overlap with each other and not showing in editor #23

Open

HassanBahati commented Sep 23, 2025

View reviewed changes

src/components/DiagramEditor.tsx Show resolved Hide resolved

HassanBahati commented Sep 23, 2025

View reviewed changes

src/components/DiagramEditor.tsx Show resolved Hide resolved

HassanBahati commented Sep 23, 2025

View reviewed changes

vercel bot deployed to Preview September 23, 2025 13:44 View deployment

feat: allow overlap when there isnt anymore free space left

94043f5

HassanBahati commented Sep 23, 2025

View reviewed changes

vercel bot deployed to Preview September 23, 2025 17:08 View deployment

AHS12 reviewed Sep 24, 2025

View reviewed changes

Merge branch 'main' into fix-overlapping-cards-on-table-creation

ff7acf1

HassanBahati commented Oct 6, 2025

View reviewed changes

fix: Fix overlap issue when creating multiple tables #22

Are you sure you want to change the base?

fix: Fix overlap issue when creating multiple tables #22

Uh oh!

Conversation

HassanBahati commented Sep 22, 2025

Description

Type of Change

Testing

Checklist

Additional Notes

Uh oh!

vercel bot commented Sep 22, 2025

Uh oh!

AHS12 commented Sep 23, 2025

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AHS12 Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HassanBahati Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AHS12 Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AHS12 commented Oct 5, 2025

Uh oh!

HassanBahati left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

AHS12 Sep 23, 2025 •

edited

Loading

HassanBahati Sep 23, 2025 •

edited

Loading

AHS12 Sep 23, 2025 •

edited

Loading

vercel bot commented Sep 23, 2025 •

edited

Loading