From fb75b91c05420b086069b066582f2b8b4a1e3eb3 Mon Sep 17 00:00:00 2001
From: Asish Kumar <officialasishkumar@gmail.com>
Date: Wed, 11 Nov 2026 19:50:11 +0530
Subject: [PATCH 1/2] Add a locate button to the table list that centers the
 table on the canvas

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 #1198
Closes #1190

Signed-off-by: Asish Kumar <officialasishkumar@gmail.com>
---
 .../EditorSidePanel/TablesTab/TablesTab.jsx   | 27 ++++++++++++++++++-
 src/context/TransformContext.jsx              | 13 ++++++---
 src/i18n/locales/en.js                        |  1 +
 src/utils/utils.js                            | 12 +++++++++
 4 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/src/components/EditorSidePanel/TablesTab/TablesTab.jsx b/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
index a11225970..c7ac8f362 100644
--- a/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
+++ b/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
@@ -1,6 +1,6 @@
 import { memo, useContext } from "react";
 import { Collapse, Button } from "@douyinfe/semi-ui";
-import { IconEyeOpened, IconEyeClosed } from "@douyinfe/semi-icons";
+import { IconEyeOpened, IconEyeClosed, IconMapPin } from "@douyinfe/semi-icons";
 import { IconPlus } from "@douyinfe/semi-icons";
 import {
   useSelect,
@@ -10,9 +10,12 @@ import {
   useSettings,
 } from "../../../hooks";
 import { DiagramActionsContext } from "../../../context/DiagramContext";
+import { TransformActionsContext } from "../../../context/TransformContext";
+import { SelectActionsContext } from "../../../context/SelectContext";
 import { UndoRedoActionsContext } from "../../../context/UndoRedoContext";
 import { Action, ObjectType, State } from "../../../data/constants";
 import { useTranslation } from "react-i18next";
+import { getTableCenter } from "../../../utils/utils";
 import { DragHandle } from "../../SortableList/DragHandle";
 import { SortableList } from "../../SortableList/SortableList";
 import SearchBar from "./SearchBar";
@@ -81,9 +84,22 @@ const TableListItem = memo(function TableListItem({ table }) {
   const { layout } = useLayout();
   const { updateTable } = useContext(DiagramActionsContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoActionsContext);
+  const { setTransform } = useContext(TransformActionsContext);
+  const { setSelectedElement } = useContext(SelectActionsContext);
   const { settings } = useSettings();
   const { t } = useTranslation();
 
+  const locateTable = (e) => {
+    e.stopPropagation();
+    setSelectedElement((prev) => ({
+      ...prev,
+      element: ObjectType.TABLE,
+      id: table.id,
+      open: false,
+    }));
+    setTransform({ pan: getTableCenter(table, settings.showComments) });
+  };
+
   const toggleTableVisibility = (e) => {
     e.stopPropagation();
     setUndoStack((prev) => [
@@ -125,6 +141,15 @@ const TableListItem = memo(function TableListItem({ table }) {
                 </div>
               )}
             </div>
+            <Button
+              size="small"
+              theme="borderless"
+              type="tertiary"
+              onClick={locateTable}
+              disabled={table.hidden}
+              title={t("locate_table")}
+              icon={<IconMapPin />}
+            />
             <Button
               size="small"
               theme="borderless"
diff --git a/src/context/TransformContext.jsx b/src/context/TransformContext.jsx
index 911ce4793..65c54e583 100644
--- a/src/context/TransformContext.jsx
+++ b/src/context/TransformContext.jsx
@@ -1,6 +1,7 @@
-import { createContext, useCallback, useState } from "react";
+import { createContext, useCallback, useMemo, useState } from "react";
 
 export const TransformContext = createContext(null);
+export const TransformActionsContext = createContext(null);
 
 export default function TransformContextProvider({ children }) {
   const [transform, setTransformInternal] = useState({
@@ -38,9 +39,13 @@ export default function TransformContextProvider({ children }) {
     [setTransformInternal],
   );
 
+  const actions = useMemo(() => ({ setTransform }), [setTransform]);
+
   return (
-    <TransformContext.Provider value={{ transform, setTransform }}>
-      {children}
-    </TransformContext.Provider>
+    <TransformActionsContext.Provider value={actions}>
+      <TransformContext.Provider value={{ transform, setTransform }}>
+        {children}
+      </TransformContext.Provider>
+    </TransformActionsContext.Provider>
   );
 }
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
index 024b1b37f..6bf6d02b6 100644
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -34,6 +34,7 @@ const en = {
     models: "Models",
     exit: "Exit",
     edit: "Edit",
+    locate_table: "Locate on canvas",
     undo: "Undo",
     redo: "Redo",
     clear: "Clear",
diff --git a/src/utils/utils.js b/src/utils/utils.js
index c33257e0b..fcf0c5c1b 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -262,3 +262,15 @@ export function getTableHeight(table, showComments = true, relatedFieldKeys) {
     getCommentHeight(table.comment, width, showComments)
   );
 }
+
+/**
+ * Returns the center of a table in diagram space, which is the value the
+ * canvas pan has to be set to for the table to appear in the middle of the
+ * screen.
+ */
+export function getTableCenter(table, showComments = true) {
+  return {
+    x: table.x + getTableWidth(table) / 2,
+    y: table.y + getTableHeight(table, showComments) / 2,
+  };
+}

From 06d6cd7ba94372be1451d55f31da71b89570c4f8 Mon Sep 17 00:00:00 2001
From: Asish Kumar <officialasishkumar@gmail.com>
Date: Thu, 12 Nov 2026 11:52:40 +0530
Subject: [PATCH 2/2] Center the canvas on a table when it is selected in the
 list

Replace the locate button with panning to the table when its panel
is opened in the tables tab.
---
 .../EditorSidePanel/TablesTab/TablesTab.jsx   | 40 ++++++-------------
 src/i18n/locales/en.js                        |  1 -
 2 files changed, 13 insertions(+), 28 deletions(-)

diff --git a/src/components/EditorSidePanel/TablesTab/TablesTab.jsx b/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
index c7ac8f362..de4000797 100644
--- a/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
+++ b/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
@@ -1,6 +1,6 @@
 import { memo, useContext } from "react";
 import { Collapse, Button } from "@douyinfe/semi-ui";
-import { IconEyeOpened, IconEyeClosed, IconMapPin } from "@douyinfe/semi-icons";
+import { IconEyeOpened, IconEyeClosed } from "@douyinfe/semi-icons";
 import { IconPlus } from "@douyinfe/semi-icons";
 import {
   useSelect,
@@ -11,7 +11,6 @@ import {
 } from "../../../hooks";
 import { DiagramActionsContext } from "../../../context/DiagramContext";
 import { TransformActionsContext } from "../../../context/TransformContext";
-import { SelectActionsContext } from "../../../context/SelectContext";
 import { UndoRedoActionsContext } from "../../../context/UndoRedoContext";
 import { Action, ObjectType, State } from "../../../data/constants";
 import { useTranslation } from "react-i18next";
@@ -28,6 +27,14 @@ export default function TablesTab() {
   const { t } = useTranslation();
   const { layout } = useLayout();
   const { setSaveState } = useSaveState();
+  const { setTransform } = useContext(TransformActionsContext);
+  const { settings } = useSettings();
+
+  const locateTable = (id) => {
+    const table = tables.find((tbl) => `${tbl.id}` === `${id}`);
+    if (!table || table.hidden) return;
+    setTransform({ pan: getTableCenter(table, settings.showComments) });
+  };
 
   return (
     <>
@@ -55,14 +62,15 @@ export default function TablesTab() {
           }
           keepDOM={false}
           lazyRender
-          onChange={(k) =>
+          onChange={(k) => {
             setSelectedElement((prev) => ({
               ...prev,
               open: true,
               id: k[0],
               element: ObjectType.TABLE,
-            }))
-          }
+            }));
+            if (k[0] !== undefined) locateTable(k[0]);
+          }}
           accordion
         >
           <SortableList
@@ -84,22 +92,9 @@ const TableListItem = memo(function TableListItem({ table }) {
   const { layout } = useLayout();
   const { updateTable } = useContext(DiagramActionsContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoActionsContext);
-  const { setTransform } = useContext(TransformActionsContext);
-  const { setSelectedElement } = useContext(SelectActionsContext);
   const { settings } = useSettings();
   const { t } = useTranslation();
 
-  const locateTable = (e) => {
-    e.stopPropagation();
-    setSelectedElement((prev) => ({
-      ...prev,
-      element: ObjectType.TABLE,
-      id: table.id,
-      open: false,
-    }));
-    setTransform({ pan: getTableCenter(table, settings.showComments) });
-  };
-
   const toggleTableVisibility = (e) => {
     e.stopPropagation();
     setUndoStack((prev) => [
@@ -141,15 +136,6 @@ const TableListItem = memo(function TableListItem({ table }) {
                 </div>
               )}
             </div>
-            <Button
-              size="small"
-              theme="borderless"
-              type="tertiary"
-              onClick={locateTable}
-              disabled={table.hidden}
-              title={t("locate_table")}
-              icon={<IconMapPin />}
-            />
             <Button
               size="small"
               theme="borderless"
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
index 6bf6d02b6..024b1b37f 100644
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -34,7 +34,6 @@ const en = {
     models: "Models",
     exit: "Exit",
     edit: "Edit",
-    locate_table: "Locate on canvas",
     undo: "Undo",
     redo: "Redo",
     clear: "Clear",