hi

src/components/canvas.jsx

@@ -102,7 +102,12 @@ export default function Canvas(props) {
         prevY: note.y,
       });
     }
-    setSelectedElement({ element: type, id: id, openDialogue: false, openCollapse: false });
+    setSelectedElement({
+      element: type,
+      id: id,
+      openDialogue: false,
+      openCollapse: false,
+    });
   };
 
   const handleMouseMove = (e) => {
@@ -113,8 +118,8 @@ export default function Canvas(props) {
 
       setLine({
         ...line,
-        endX: (e.clientX - offsetX) / settings.zoom - settings.pan.x,
+        endX: (e.clientX - offsetX - settings.pan.x) / settings.zoom,
-        endY: (e.clientY - offsetY) / settings.zoom - settings.pan.y,
+        endY: (e.clientY - offsetY - settings.pan.y) / settings.zoom,
       });
     } else if (
       panning.state &&

src/components/reference_overview.jsx

@@ -12,7 +12,6 @@ import {
   Table,
 } from "@douyinfe/semi-ui";
 import {
-  IconRowsStroked,
   IconDeleteStroked,
   IconLoopTextStroked,
   IconMore,
@@ -309,27 +308,14 @@ export default function ReferenceOverview(props) {
                     }}
                   ></Checkbox>
                 </div>
-                <Row gutter={6} className="mt-3">
+                <Button
-                  <Col span={12}>
+                  icon={<IconDeleteStroked />}
-                    <Button
+                  block
-                      icon={<IconRowsStroked />}
+                  type="danger"
-                      disabled={r.cardinality === Cardinality.ONE_TO_ONE}
+                  onClick={() => deleteRelationship(r.id, true)}
-                      block
+                >
-                    >
+                  Delete
-                      Extract to table
+                </Button>
-                    </Button>
-                  </Col>
-                  <Col span={12}>
-                    <Button
-                      icon={<IconDeleteStroked />}
-                      block
-                      type="danger"
-                      onClick={() => deleteRelationship(r.id, true)}
-                    >
-                      Delete
-                    </Button>
-                  </Col>
-                </Row>
               </Collapse.Panel>
             </div>
           ))

src/components/table.jsx

@@ -44,10 +44,10 @@ import {
 export default function Table(props) {
   const [isHovered, setIsHovered] = useState(false);
   const [hoveredField, setHoveredField] = useState(-1);
-  // const [visible, setVisible] = useState(false);
   const [editField, setEditField] = useState({});
   const { layout } = useContext(LayoutContext);
-  const { deleteTable, updateTable, updateField } = useContext(TableContext);
+  const { deleteTable, updateTable, updateField, setRelationships } =
+    useContext(TableContext);
   const { tab, setTab } = useContext(TabContext);
   const { settings } = useContext(SettingsContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
@@ -88,7 +88,15 @@ export default function Table(props) {
             style={{ backgroundColor: props.tableData.color }}
           />
           <div className="font-bold text-slate-800 h-[40px] flex justify-between items-center border-b border-gray-400 bg-gray-200">
-            <div className="px-3">{props.tableData.name}</div>
+            <div className="px-3">
+              {isHovered
+                ? props.tableData.name.length < 10
+                  ? props.tableData.name
+                  : `${props.tableData.name.substring(0, 10)}...`
+                : props.tableData.name.length < 14
+                ? props.tableData.name
+                : `${props.tableData.name.substring(0, 14)}...`}
+            </div>
             {isHovered && (
               <div className="flex justify-end items-center mx-2">
                 <Button
@@ -662,6 +670,19 @@ export default function Table(props) {
                             },
                           ]);
                           setRedoStack([]);
+                          setRelationships((prev) =>
+                            prev
+                              .filter(
+                                (e) =>
+                                  !(
+                                    (e.startTableId === props.tableData.id &&
+                                      e.startFieldId === j) ||
+                                    (e.endTableId === props.tableData.id &&
+                                      e.endFieldId === j)
+                                  )
+                              )
+                              .map((e, i) => ({ ...e, id: i }))
+                          );
                           updateTable(props.tableData.id, {
                             fields: props.tableData.fields
                               .filter((field) => field.id !== j)
@@ -1102,6 +1123,19 @@ export default function Table(props) {
                   },
                 ]);
                 setRedoStack([]);
+                setRelationships((prev) =>
+                  prev
+                    .filter(
+                      (e) =>
+                        !(
+                          (e.startTableId === props.tableData.id &&
+                            e.startFieldId === index) ||
+                          (e.endTableId === props.tableData.id &&
+                            e.endFieldId === index)
+                        )
+                    )
+                    .map((e, i) => ({ ...e, id: i }))
+                );
                 updateTable(props.tableData.id, {
                   fields: props.tableData.fields
                     .filter((e) => e.id !== fieldData.id)

src/components/table_overview.jsx

@@ -39,8 +39,14 @@ import { SelectContext, TableContext, UndoRedoContext } from "../pages/editor";
 export default function TableOverview(props) {
   const [indexActiveKey, setIndexActiveKey] = useState("");
   const [value, setValue] = useState("");
-  const { tables, addTable, deleteTable, updateField, updateTable } =
+  const {
-    useContext(TableContext);
+    tables,
+    addTable,
+    deleteTable,
+    updateField,
+    updateTable,
+    setRelationships,
+  } = useContext(TableContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
   const { selectedElement, setSelectedElement } = useContext(SelectContext);
   const [editField, setEditField] = useState({});
@@ -502,6 +508,21 @@ export default function TableOverview(props) {
                                   },
                                 ]);
                                 setRedoStack([]);
+                                setRelationships((prev) =>
+                                  prev
+                                    .filter(
+                                      (e) =>
+                                        !(
+                                          (e.startTableId ===
+                                            props.tableData.id &&
+                                            e.startFieldId === j) ||
+                                          (e.endTableId ===
+                                            props.tableData.id &&
+                                            e.endFieldId === j)
+                                        )
+                                    )
+                                    .map((e, i) => ({ ...e, id: i }))
+                                );
                                 updateTable(i, {
                                   fields: t.fields
                                     .filter((field) => field.id !== j)

src/pages/editor.jsx

@@ -230,6 +230,11 @@ export default function Editor(props) {
     setTables((prev) =>
       prev.filter((e) => e.id !== id).map((e, i) => ({ ...e, id: i }))
     );
+    setRelationships((prev) =>
+      prev
+        .filter((e) => e.startTableId !== id && e.endTableId !== id)
+        .map((e, i) => ({ ...e, id: i }))
+    );
     if (id === selectedElement.id) {
       setSelectedElement({
         element: ObjectType.NONE,