Skip to content

Add a locate button to the table list that centers the table on the canvas - #1199

Merged
1ilit merged 2 commits into
drawdb-io:mainfrom
officialasishkumar:feat/locate-table-on-canvas
Nov 13, 2026
Merged

1ilit merged 2 commits into
drawdb-io:mainfrom
officialasishkumar:feat/locate-table-on-canvas

Conversation

@officialasishkumar

Copy link
Copy Markdown
Contributor

What

Adds a "Locate on canvas" (map pin) button to every row of the tables list in the side panel. Clicking it selects the table (so it gets the usual blue selection border) and pans the canvas so the table is centered in the view. The current zoom is kept.

Closes #1198
Closes #1190

Design notes

  • The button is disabled for hidden tables, since they are not drawn on the canvas.
  • The pan target comes from a new getTableCenter helper in utils.js, built on the same getTableWidth/getTableHeight the canvas uses. The canvas pan is the center of the viewport in diagram space, so the table center is the pan value.
  • Table rows are memoized, so the handler gets setTransform from a new TransformActionsContext (the same pattern as the select, diagram and undo contexts). Panning therefore doesn't re-render every row.
  • Only the English string (locate_table) is added; other locales fall back to English.

Testing

The repo has no test runner, so I checked it this way:

  • eslint --max-warnings 0 and prettier --check on the touched files pass.
  • vite build succeeds.

…anvas

Finding a table in a large diagram meant panning around by hand, even
though the side panel already lists every table. Each row in the tables
tab now has a map pin button that selects the table, so it gets the
usual blue selection border, and pans the canvas so the table sits in
the middle of the view. The current zoom is kept.

The button is disabled for hidden tables, since they are not drawn on
the canvas. The pan target comes from a new getTableCenter helper that
uses the same width and height calculations as the canvas.

Rows are memoized, so the handler reads setTransform from a new
TransformActionsContext (same pattern as the select, diagram and undo
contexts) rather than the transform context. That way panning does not
re-render every row.

Closes drawdb-io#1198
Closes drawdb-io#1190

Signed-off-by: Asish Kumar <officialasishkumar@gmail.com>
@vercel

vercel Bot commented Nov 11, 2026

Copy link
Copy Markdown

@officialasishkumar is attempting to deploy a commit to the dottle's projects Team on Vercel.

A member of the Team first needs to authorize it.

@vercel

vercel Bot commented Nov 11, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
drawdb Ready Ready Preview Nov 13, 2026 10:22pm UTC

@1ilit 1ilit left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

instead of adding an icon can u locate the table when it's selected?

Replace the locate button with panning to the table when its panel
is opened in the tables tab.
@officialasishkumar

Copy link
Copy Markdown
Contributor Author

Done, the icon is gone and the canvas now centers on the table when you select it in the list (06d6cd7).

@1ilit 1ilit left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm, thank u

@1ilit
1ilit merged commit af09640 into drawdb-io:main Nov 13, 2026
4 checks passed

This branch was successfully deployed

1 active deployment
Preview — 06d6cd7b Deployed Nov 13, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] Click table name to locate and highlight it on the canvas [FEATURE]Table in graph zone need can be focused with table in list

2 participants