added the auto organize button

Author: VIDHITTS

package-lock.json

@@ -21,6 +21,7 @@
     "@vercel/speed-insights": "^1.2.0",
     "axios": "^1.12.0",
     "classnames": "^2.5.1",
+    "dagre": "^0.8.5",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.7",
     "file-saver": "^2.0.5",

package.json

@@ -119,6 +119,7 @@ export default function ControlPanel({
     addRelationship,
     deleteRelationship,
     updateRelationship,
+    autoArrangeTables,
     database,
     setDatabase,
   } = useDiagram();
@@ -253,6 +254,10 @@ export default function ControlPanel({
           });
         } else if (a.component === "self") {
           updateTable(a.tid, a.undo);
+        } else if (a.component === "auto_arrange") {
+          a.data.oldTables.forEach((oldTable) => {
+            updateTable(oldTable.id, { x: oldTable.x, y: oldTable.y });
+          });
         }
       } else if (a.element === ObjectType.RELATIONSHIP) {
         updateRelationship(a.rid, a.undo);
@@ -431,6 +436,10 @@ export default function ControlPanel({
           });
         } else if (a.component === "self") {
           updateTable(a.tid, a.redo, false);
+        } else if (a.component === "auto_arrange") {
+          a.data.newTables.forEach((newTable) => {
+            updateTable(newTable.id, { x: newTable.x, y: newTable.y });
+          });
         }
       } else if (a.element === ObjectType.RELATIONSHIP) {
         updateRelationship(a.rid, a.redo);
@@ -1820,6 +1829,14 @@ export default function ControlPanel({
               <i className="fa-solid fa-circle-half-stroke" />
             </button>
           </Tooltip>
+          <Tooltip content={t("Auto_arrange")} position="bottom">
+            <button
+              className="py-1 px-2 hover-2 rounded-sm text-xl -mt-0.5"
+              onClick={autoArrangeTables}
+            >
+              <i className="fa-solid fa-table-cells" />
+            </button>
+          </Tooltip>
         </div>
         <button
           onClick={() => invertLayout("header")}

src/components/EditorHeader/ControlPanel.jsx

@@ -1,9 +1,19 @@
 import { createContext, useState } from "react";
-import { Action, DB, ObjectType, defaultBlue } from "../data/constants";
+import {
+  Action,
+  DB,
+  ObjectType,
+  defaultBlue,
+  tableWidth,
+  tableFieldHeight,
+  tableHeaderHeight,
+  tableColorStripHeight,
+} from "../data/constants";
 import { useTransform, useUndoRedo, useSelect } from "../hooks";
 import { Toast } from "@douyinfe/semi-ui";
 import { useTranslation } from "react-i18next";
 import { nanoid } from "nanoid";
+import dagre from "dagre";
 
 export const DiagramContext = createContext(null);
 
@@ -228,6 +238,72 @@ export default function DiagramContextProvider({ children }) {
     );
   };
 
+  const autoArrangeTables = () => {
+    if (tables.length === 0) return;
+
+    const newGraph = new dagre.graphlib.Graph();
+
+    newGraph.setGraph({
+      rankdir: "TB",
+      nodesep: 100,
+      ranksep: 120,
+      marginx: 50,
+      marginy: 50,
+    });
+
+    newGraph.setDefaultEdgeLabel(() => ({}));
+
+    tables.forEach((table) => {
+      const height =
+        table.fields.length * tableFieldHeight +
+        tableHeaderHeight +
+        tableColorStripHeight;
+      newGraph.setNode(table.id, {
+        label: table.name,
+        width: tableWidth,
+        height: height,
+      });
+    });
+
+    relationships.forEach((rel) => {
+      newGraph.setEdge(rel.startTableId, rel.endTableId);
+    });
+
+    dagre.layout(newGraph);
+
+    const arrangedTables = tables.map((table) => {
+      const node = newGraph.node(table.id);
+      return {
+        ...table,
+        x: Math.round(node.x - tableWidth / 2),
+        y: Math.round(node.y - node.height / 2),
+      };
+    });
+
+    setTables(arrangedTables);
+
+    setUndoStack((prev) => [
+      ...prev,
+      {
+        action: Action.EDIT,
+        element: ObjectType.TABLE,
+        component: "auto_arrange",
+        data: {
+          oldTables: tables.map((t) => ({ id: t.id, x: t.x, y: t.y })),
+          newTables: arrangedTables.map((t) => ({
+            id: t.id,
+            x: t.x,
+            y: t.y,
+          })),
+        },
+        message: t("auto_arrange_tables") || "Auto-arrange tables",
+      },
+    ]);
+    setRedoStack([]);
+
+    Toast.success(t("tables_arranged") || "Tables arranged successfully!");
+  };
+
   return (
     <DiagramContext.Provider
       value={{
@@ -243,6 +319,7 @@ export default function DiagramContextProvider({ children }) {
         addRelationship,
         deleteRelationship,
         updateRelationship,
+        autoArrangeTables,
         database,
         setDatabase,
         tablesCount: tables.length,