Add a setting to resize table width (#21)

src/components/EditorCanvas/Relationship.jsx

@@ -41,7 +41,7 @@ export default function Relationship({ data }) {
     cardinalityStartX = point1.x;
     cardinalityStartY = point1.y;
     const point2 = pathRef.current.getPointAtLength(
-      pathLength - cardinalityOffset
+      pathLength - cardinalityOffset,
     );
     cardinalityEndX = point2.x;
     cardinalityEndY = point2.y;
@@ -51,17 +51,20 @@ export default function Relationship({ data }) {
     <g className="select-none group">
       <path
         ref={pathRef}
-        d={calcPath({
+        d={calcPath(
-          ...data,
+          {
-          startTable: {
+            ...data,
-            x: tables[data.startTableId].x,
+            startTable: {
-            y: tables[data.startTableId].y,
+              x: tables[data.startTableId].x,
+              y: tables[data.startTableId].y,
+            },
+            endTable: {
+              x: tables[data.endTableId].x,
+              y: tables[data.endTableId].y,
+            },
           },
-          endTable: {
+          settings.tableWidth,
-            x: tables[data.endTableId].x,
+        )}
-            y: tables[data.endTableId].y,
-          },
-        })}
         stroke="gray"
         className="group-hover:stroke-sky-700"
         fill="none"

src/components/EditorCanvas/Table.jsx

@@ -39,7 +39,7 @@ export default function Table(props) {
         key={tableData.id}
         x={tableData.x}
         y={tableData.y}
-        width={200}
+        width={settings.tableWidth}
         height={height}
         className="group drop-shadow-lg rounded-md cursor-move"
         onMouseDown={onMouseDown}

src/components/EditorHeader/ControlPanel.jsx

@@ -187,7 +187,7 @@ export default function ControlPanel({
                 return { ...t, fields: temp.map((t, i) => ({ ...t, id: i })) };
               }
               return t;
-            })
+            }),
           );
         } else if (a.component === "field_add") {
           updateTable(a.tid, {
@@ -209,7 +209,7 @@ export default function ControlPanel({
                     ...index,
                     ...a.undo,
                   }
-                : index
+                : index,
             ),
           });
         } else if (a.component === "index_delete") {
@@ -224,27 +224,27 @@ export default function ControlPanel({
                 };
               }
               return table;
-            })
+            }),
           );
         } else if (a.component === "self") {
           updateTable(a.tid, a.undo);
         }
       } else if (a.element === ObjectType.RELATIONSHIP) {
         setRelationships((prev) =>
-          prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.undo } : e))
+          prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.undo } : e)),
         );
       } else if (a.element === ObjectType.TYPE) {
         if (a.component === "field_add") {
           updateType(a.tid, {
             fields: types[a.tid].fields.filter(
-              (e, i) => i !== types[a.tid].fields.length - 1
+              (e, i) => i !== types[a.tid].fields.length - 1,
             ),
           });
         }
         if (a.component === "field") {
           updateType(a.tid, {
             fields: types[a.tid].fields.map((e, i) =>
-              i === a.fid ? { ...e, ...a.undo } : e
+              i === a.fid ? { ...e, ...a.undo } : e,
             ),
           });
         } else if (a.component === "field_delete") {
@@ -256,7 +256,7 @@ export default function ControlPanel({
                 return { ...t, fields: temp };
               }
               return t;
-            })
+            }),
           );
         } else if (a.component === "self") {
           updateType(a.tid, a.undo);
@@ -388,7 +388,7 @@ export default function ControlPanel({
                 };
               }
               return table;
-            })
+            }),
           );
         } else if (a.component === "index") {
           updateTable(a.tid, {
@@ -398,7 +398,7 @@ export default function ControlPanel({
                     ...index,
                     ...a.redo,
                   }
-                : index
+                : index,
             ),
           });
         } else if (a.component === "index_delete") {
@@ -412,7 +412,7 @@ export default function ControlPanel({
         }
       } else if (a.element === ObjectType.RELATIONSHIP) {
         setRelationships((prev) =>
-          prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.redo } : e))
+          prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.redo } : e)),
         );
       } else if (a.element === ObjectType.TYPE) {
         if (a.component === "field_add") {
@@ -428,7 +428,7 @@ export default function ControlPanel({
         } else if (a.component === "field") {
           updateType(a.tid, {
             fields: types[a.tid].fields.map((e, i) =>
-              i === a.fid ? { ...e, ...a.redo } : e
+              i === a.fid ? { ...e, ...a.redo } : e,
             ),
           });
         } else if (a.component === "field_delete") {
@@ -466,7 +466,7 @@ export default function ControlPanel({
       showFieldSummary: !prev.showFieldSummary,
     }));
     Toast.success(
-      `Field summary is ${settings.showFieldSummary ? "off" : "on"}.`
+      `Field summary is ${settings.showFieldSummary ? "off" : "on"}.`,
     );
   };
   const copyAsImage = () => {
@@ -762,7 +762,7 @@ export default function ControlPanel({
                     data: dataUrl,
                     extension: "jpeg",
                   }));
-                }
+                },
               );
               setModal(MODAL.IMG);
             },
@@ -780,7 +780,7 @@ export default function ControlPanel({
                   title: title,
                 },
                 null,
-                2
+                2,
               );
               setExportData((prev) => ({
                 ...prev,
@@ -799,7 +799,7 @@ export default function ControlPanel({
                     data: dataUrl,
                     extension: "svg",
                   }));
-                }
+                },
               );
               setModal(MODAL.IMG);
             },
@@ -818,7 +818,7 @@ export default function ControlPanel({
                   0,
                   0,
                   canvas.offsetWidth,
-                  canvas.offsetHeight
+                  canvas.offsetHeight,
                 );
                 doc.save(`${exportData.filename}.pdf`);
               });
@@ -838,7 +838,7 @@ export default function ControlPanel({
                   types: types,
                 },
                 null,
-                2
+                2,
               );
               const blob = new Blob([result], {
                 type: "text/plain;charset=utf-8",
@@ -1086,6 +1086,9 @@ export default function ControlPanel({
             return { ...prev, panning: !prev.panning };
           }),
       },
+      "Table width": {
+        function: () => setModal(MODAL.TABLE_WIDTH),
+      },
       "Flush storage": {
         function: async () => {
           db.delete()
@@ -1389,7 +1392,7 @@ export default function ControlPanel({
                                         >
                                           {Object.keys(e)[0]}
                                         </Dropdown.Item>
-                                      )
+                                      ),
                                     )}
                                   </Dropdown.Menu>
                                 }

src/components/EditorHeader/Modal/Modal.jsx

@@ -27,6 +27,7 @@ import New from "./New";
 import ImportDiagram from "./ImportDiagram";
 import ImportSource from "./ImportSource";
 import Editor from "@monaco-editor/react";
+import SetTableWidth from "./SetTableWidth";
 
 export default function Modal({
   modal,
@@ -105,7 +106,7 @@ export default function Modal({
       ast = parser.astify(importSource.src, { database: "MySQL" });
     } catch (err) {
       Toast.error(
-        "Could not parse the sql file. Make sure there are no syntax errors."
+        "Could not parse the sql file. Make sure there are no syntax errors.",
       );
       return;
     }
@@ -135,7 +136,7 @@ export default function Modal({
       case MODAL.IMG:
         saveAs(
           exportData.data,
-          `${exportData.filename}.${exportData.extension}`
+          `${exportData.filename}.${exportData.extension}`,
         );
         return;
       case MODAL.CODE: {
@@ -259,6 +260,8 @@ export default function Modal({
             </div>
           );
         }
+      case MODAL.TABLE_WIDTH:
+        return <SetTableWidth />;
       default:
         return <></>;
     }

src/components/EditorHeader/Modal/SetTableWidth.jsx

@@ -0,0 +1,17 @@
+import { InputNumber } from "@douyinfe/semi-ui";
+import { useSettings } from "../../../hooks";
+
+export default function SetTableWidth() {
+  const { settings, setSettings } = useSettings();
+
+  return (
+    <InputNumber
+      className="w-full"
+      value={settings.tableWidth}
+      onChange={(c) => {
+        if (c < 180) return;
+        setSettings((prev) => ({ ...prev, tableWidth: c }));
+      }}
+    />
+  );
+}

src/context/SettingsContext.jsx

@@ -1,4 +1,5 @@
 import { createContext, useState } from "react";
+import { tableWidth } from "../data/constants";
 
 export const SettingsContext = createContext(null);
 
@@ -11,6 +12,7 @@ export default function SettingsContextProvider({ children }) {
     autosave: true,
     panning: true,
     showCardinality: true,
+    tableWidth: tableWidth,
   });
 
   return (

src/data/constants.js

@@ -110,6 +110,7 @@ export const MODAL = {
   SAVEAS: 6,
   NEW: 7,
   IMPORT_SRC: 8,
+  TABLE_WIDTH: 9,
 };
 
 export const STATUS = {

src/utils/calcPath.js

@@ -1,10 +1,6 @@
-import {
+import { tableFieldHeight, tableHeaderHeight } from "../data/constants";
-  tableFieldHeight,
-  tableHeaderHeight,
-  tableWidth,
-} from "../data/constants";
 
-export function calcPath(r, zoom = 1) {
+export function calcPath(r, tableWidth = 200, zoom = 1) {
   const width = tableWidth * zoom;
   let x1 = r.startTable.x;
   let y1 =

src/utils/modalTitles.js

@@ -17,6 +17,8 @@ export const getModalTitle = (modal) => {
       return "Save as";
     case MODAL.NEW:
       return "Create new diagram";
+    case MODAL.TABLE_WIDTH:
+      return "Set the table width";
     default:
       return "";
   }