fix linking just click bug and endTableId error

src/components/canvas.jsx

@@ -4,6 +4,22 @@ import Table from "./table";
 import { defaultTableTheme } from "../data/data";
 
 export default function Canvas(props) {
+  const Cardinality = {
+    NONE: -1,
+    ONE_TO_ONE: 0,
+    ONE_TO_MANY: 1,
+    MANY_TO_ONE: 2,
+    MANY_TO_MANY: 3,
+  };
+
+  const Constraint = {
+    none: "None",
+    restrict: "Restrict",
+    cascade: "Cascade",
+    setNull: "Set null",
+    setDefault: "Set default",
+  };
+
   const [dragging, setDragging] = useState(-1);
   const [linking, setLinking] = useState(false);
   const [line, setLine] = useState({
@@ -15,8 +31,12 @@ export default function Canvas(props) {
     startY: 0,
     endX: 0,
     endY: 0,
+    name: "",
+    cardinality: Cardinality.NONE,
+    updateConstraint: Constraint.none,
+    deleteConstraint: Constraint.none,
+    mandatory: false,
   });
-  const [relationships, setRelationships] = useState([]);
   const [offset, setOffset] = useState({ x: 0, y: 0 });
   const [onRect, setOnRect] = useState({
     tableId: -1,
@@ -64,8 +84,8 @@ export default function Canvas(props) {
         }))
       );
 
-      setRelationships(
+      props.setRelationships(
-        relationships.map((r) => ({
+        props.relationships.map((r) => ({
           ...r,
           startX: r.startX + dx,
           startY: r.startY + dy,
@@ -86,7 +106,7 @@ export default function Canvas(props) {
         return t;
       });
       props.setTables(updatedTables);
-      const updatedRelationShips = relationships.map((r) => {
+      const updatedRelationShips = props.relationships.map((r) => {
         if (r.startTableId === dragging) {
           return {
             ...r,
@@ -103,7 +123,7 @@ export default function Canvas(props) {
         }
         return r;
       });
-      setRelationships(updatedRelationShips);
+      props.setRelationships(updatedRelationShips);
     }
   };
 
@@ -140,14 +160,22 @@ export default function Canvas(props) {
   const handleLinking = () => {
     if (onRect.tableId < 0) return;
     if (onRect.field < 0) return;
-    setRelationships((prev) => [
+    if (
+      line.startTableId === onRect.tableId &&
+      line.startFieldId === onRect.field
+    )
+      return;
+    props.setRelationships((prev) => [
       ...prev,
       {
         ...line,
-        endX: props.tables[onRect.tableId].x + 15,
-        endY: props.tables[onRect.tableId].y + onRect.field * 36 + 40 + 19,
         endTableId: onRect.tableId,
         endFieldId: onRect.field,
+        endX: props.tables[onRect.tableId].x + 15,
+        endY: props.tables[onRect.tableId].y + onRect.field * 36 + 40 + 19,
+        name: `${props.tables[line.startTableId].name}_to_${
+          props.tables[onRect.tableId].name
+        }`,
       },
     ]);
   };
@@ -162,7 +190,7 @@ export default function Canvas(props) {
         const y = offset.y - canvasRect.top - 100 * 0.5;
         const newTable = {
           id: props.tables.length,
-          name: `Table ${props.tables.length}`,
+          name: `table_${props.tables.length}`,
           x: x,
           y: y,
           fields: [
@@ -195,6 +223,7 @@ export default function Canvas(props) {
     }),
     [props.tables]
   );
+
   return (
     <div ref={drop} className="flex-grow" id="canvas">
       <div ref={canvas} className="w-full h-screen">
@@ -259,7 +288,7 @@ export default function Canvas(props) {
               strokeDasharray="5,5"
             />
           )}
-          {relationships.map((e, i) => (
+          {props.relationships.map((e, i) => (
             <line
               key={i}
               x1={e.startX}
@@ -267,6 +296,8 @@ export default function Canvas(props) {
               x2={e.endX}
               y2={e.endY}
               stroke="gray"
+              strokeWidth={2.5}
+              onClick={() => {}}
             />
           ))}
         </svg>

src/components/editor_panel.jsx

@@ -10,7 +10,8 @@ import html2canvas from "html2canvas";
 import { Parser } from "node-sql-parser";
 import { Tabs } from "@douyinfe/semi-ui";
 import "react-resizable/css/styles.css";
-import DiagramOverview from "./diagram_overview";
+import TableOverview from "./table_overview";
+import ReferenceOverview from "./reference_overview";
 import { defaultTableTheme } from "../data/data";
 
 const myTheme = createTheme({
@@ -32,13 +33,20 @@ export default function EditorPanel(props) {
   const map = useRef(new Map());
 
   const tabList = [
-    { tab: "Overview", itemKey: "1" },
+    { tab: "Tables", itemKey: "1" },
-    { tab: "Shapes", itemKey: "2" },
+    { tab: "References", itemKey: "2" },
-    { tab: "Editor", itemKey: "3" },
+    { tab: "Shapes", itemKey: "3" },
+    { tab: "Editor", itemKey: "4" },
   ];
   const contentList = [
     <div>
-      <DiagramOverview tables={props.tables} setTables={props.setTables} />
+      <TableOverview tables={props.tables} setTables={props.setTables} />
+    </div>,
+    <div>
+      <ReferenceOverview
+        relationships={props.relationships}
+        tables={props.tables}
+      />
     </div>,
     <div>
       <Shape />
@@ -81,7 +89,7 @@ export default function EditorPanel(props) {
           onClick={() => {
             const newTable = {
               id: props.tables.length,
-              name: `Table ${props.tables.length}`,
+              name: `table_${props.tables.length}`,
               x: 0,
               y: 0,
               fields: [
@@ -141,7 +149,7 @@ export default function EditorPanel(props) {
                   map.current.set(t.table, t);
                   const newTable = {
                     id: props.tables.length,
-                    name: `Table ${props.tables.length}`,
+                    name: `table_${props.tables.length}`,
                     x: 0,
                     y: 0,
                     fields: [

src/components/reference_overview.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Collapse, Input } from "@douyinfe/semi-ui";
+
+export default function ReferenceOverview(props) {
+  return (
+    <Collapse>
+      {props.relationships.map((r, i) => (
+        <Collapse.Panel
+          key={i}
+          header={
+            <div>
+              <Input defaultValue={r.name} borderless />
+            </div>
+          }
+          itemKey={`${i}`}
+        >
+          {r.name}
+        </Collapse.Panel>
+      ))}
+    </Collapse>
+  );
+}

src/components/table.jsx

@@ -205,7 +205,7 @@ export default function Table(props) {
                     </p>
                     <p className="text-slate-600">
                       <strong>Comment :</strong>{" "}
-                      {e.default === "" ? "Not comment" : e.comment}
+                      {e.comment === "" ? "Not comment" : e.comment}
                     </p>
                   </div>
                 }

src/components/table_overview.jsx

@@ -20,7 +20,7 @@ import {
   IconCheckboxTick,
 } from "@douyinfe/semi-icons";
 
-export default function DiagramOverview(props) {
+export default function TableOverview(props) {
   const [indexActiveKey, setIndexActiveKey] = useState("");
 
   const updateColor = (id, c) => {

src/data/data.js

@@ -27,6 +27,7 @@ const menu = {
     Grid: [],
     Sidebar: [],
     Editor: [],
+    "Strict mode": [],
     "Reset view": [],
     "View schema": [],
     Theme: ["Light", "Dark"],
@@ -97,6 +98,6 @@ const tableThemes = [
   "#ff9159",
 ];
 
-const defaultTableTheme = "#9e9e9e"
+const defaultTableTheme = "#9e9e9e";
 
 export { menu, sqlDataTypes, tableThemes, defaultTableTheme };

src/pages/editor.jsx

@@ -10,6 +10,7 @@ import EditorPanel from "../components/editor_panel";
 export default function Editor(props) {
   const [code, setCode] = useState("");
   const [tables, setTables] = useState([]);
+  const [relationships, setRelationships] = useState([]);
 
   return (
     <>
@@ -22,12 +23,16 @@ export default function Editor(props) {
             setTables={setTables}
             code={code}
             setCode={setCode}
+            relationships={relationships}
+            setRelationships={setRelationships}
           />
           <Canvas
             tables={tables}
             setTables={setTables}
             code={code}
             setCode={setCode}
+            relationships={relationships}
+            setRelationships={setRelationships}
           />
         </DndProvider>
         <Sidebar />