Table and field drag and drop ordering (drawdb-io#444)

* Add dnd for tables and fields

* Fix inputs

* Decouple ids and indecies in the editor

* Decouple ids and indecies in utils

* Fix field indexes

* Use nanoid instead of numberic ids for fields and tables

* Fix review comments

Author: 1ilit

package-lock.json

@@ -11,6 +11,9 @@
   },
   "dependencies": {
     "@dbml/core": "^3.9.7-alpha.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@douyinfe/semi-ui": "^2.77.1",
     "@lexical/react": "^0.12.5",
     "@monaco-editor/react": "^4.7.0",
@@ -27,6 +30,7 @@
     "jspdf": "^3.0.1",
     "jszip": "^3.10.1",
     "lexical": "^0.12.5",
+    "nanoid": "^5.1.5",
     "node-sql-parser": "^5.3.9",
     "octokit": "^4.0.2",
     "oracle-sql-parser": "^0.1.0",

package.json

@@ -56,7 +56,7 @@ export default function Canvas() {
   } = useSelect();
   const [dragging, setDragging] = useState({
     element: ObjectType.NONE,
-    id: -1,
+    id: null,
     prevX: 0,
     prevY: 0,
     initialPositions: [],
@@ -74,8 +74,8 @@ export default function Canvas() {
   });
   const [grabOffset, setGrabOffset] = useState({ x: 0, y: 0 });
   const [hoveredTable, setHoveredTable] = useState({
-    tableId: -1,
-    field: -2,
+    tableId: null,
+    fieldId: null,
   });
   const [panning, setPanning] = useState({
     isPanning: false,
@@ -168,7 +168,7 @@ export default function Canvas() {
   const getElement = (element) => {
     switch (element.type) {
       case ObjectType.TABLE:
-        return tables[element.id];
+        return tables.find((t) => t.id === element.id);
       case ObjectType.AREA:
         return areas[element.id];
       case ObjectType.NOTE:
@@ -265,7 +265,7 @@ export default function Canvas() {
       });
     } else if (
       dragging.element !== ObjectType.NONE &&
-      dragging.id >= 0 &&
+      dragging.id !== null &&
       bulkSelectedElements.length
     ) {
       const currentX = pointer.spaces.diagram.x + grabOffset.x;
@@ -275,9 +275,10 @@ export default function Canvas() {
 
       for (const element of bulkSelectedElements) {
         if (element.type === ObjectType.TABLE) {
+          const { x, y } = tables.find((e) => e.id === element.id);
           updateTable(element.id, {
-            x: tables[element.id].x + deltaX,
-            y: tables[element.id].y + deltaY,
+            x: x + deltaX,
+            y: y + deltaY,
           });
         }
         if (element.type === ObjectType.AREA) {
@@ -318,21 +319,21 @@ export default function Canvas() {
             (panning.cursorStart.y - pointer.spaces.screen.y) / transform.zoom,
         },
       }));
-    } else if (dragging.element === ObjectType.TABLE && dragging.id >= 0) {
+    } else if (dragging.element === ObjectType.TABLE && dragging.id !== null) {
       updateTable(dragging.id, {
         x: pointer.spaces.diagram.x + grabOffset.x,
         y: pointer.spaces.diagram.y + grabOffset.y,
       });
     } else if (
       dragging.element === ObjectType.AREA &&
-      dragging.id >= 0 &&
+      dragging.id !== null &&
       areaResize.id === -1
     ) {
       updateArea(dragging.id, {
         x: pointer.spaces.diagram.x + grabOffset.x,
         y: pointer.spaces.diagram.y + grabOffset.y,
       });
-    } else if (dragging.element === ObjectType.NOTE && dragging.id >= 0) {
+    } else if (dragging.element === ObjectType.NOTE && dragging.id !== null) {
       updateNote(dragging.id, {
         x: pointer.spaces.diagram.x + grabOffset.x,
         y: pointer.spaces.diagram.y + grabOffset.y,
@@ -442,7 +443,10 @@ export default function Canvas() {
   };
 
   const didPan = () =>
-    !(transform.pan.x === panning.panStart.x && transform.pan.y === panning.panStart.y);
+    !(
+      transform.pan.x === panning.panStart.x &&
+      transform.pan.y === panning.panStart.y
+    );
 
   /**
    * @param {PointerEvent} e
@@ -504,7 +508,7 @@ export default function Canvas() {
     }
     setDragging({
       element: ObjectType.NONE,
-      id: -1,
+      id: null,
       prevX: 0,
       prevY: 0,
       initialPositions: [],
@@ -586,7 +590,7 @@ export default function Canvas() {
     setPanning((old) => ({ ...old, isPanning: false }));
     setDragging({
       element: ObjectType.NONE,
-      id: -1,
+      id: null,
       prevX: 0,
       prevY: 0,
       initialPositions: [],
@@ -595,28 +599,36 @@ export default function Canvas() {
   };
 
   const handleLinking = () => {
-    if (hoveredTable.tableId < 0) return;
-    if (hoveredTable.field < 0) return;
-    if (
-      !areFieldsCompatible(
-        database,
-        tables[linkingLine.startTableId].fields[linkingLine.startFieldId],
-        tables[hoveredTable.tableId].fields[hoveredTable.field],
-      )
-    ) {
+    if (hoveredTable.tableId === null) return;
+    if (hoveredTable.fieldId === null) return;
+
+    const { fields: startTableFields } = tables.find(
+      (t) => t.id === linkingLine.startTableId,
+    );
+    const { type: startType } = startTableFields.find(
+      (f) => f.id === linkingLine.startFieldId,
+    );
+    const { fields: endTableFields } = tables.find(
+      (t) => t.id === hoveredTable.tableId,
+    );
+    const { type: endType } = endTableFields.find(
+      (f) => f.id === hoveredTable.fieldId,
+    );
+
+    if (!areFieldsCompatible(database, startType, endType)) {
       Toast.info(t("cannot_connect"));
       return;
     }
     if (
       linkingLine.startTableId === hoveredTable.tableId &&
-      linkingLine.startFieldId === hoveredTable.field
+      linkingLine.startFieldId === hoveredTable.fieldId
     )
       return;
 
     const newRelationship = {
       ...linkingLine,
       endTableId: hoveredTable.tableId,
-      endFieldId: hoveredTable.field,
+      endFieldId: hoveredTable.fieldId,
       cardinality: Cardinality.ONE_TO_ONE,
       updateConstraint: Constraint.NONE,
       deleteConstraint: Constraint.NONE,

src/components/EditorCanvas/Canvas.jsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useMemo, useRef } from "react";
 import {
   Cardinality,
   darkBgTheme,
@@ -20,6 +20,22 @@ export default function Relationship({ data }) {
   const { selectedElement, setSelectedElement } = useSelect();
   const { t } = useTranslation();
 
+  const pathValues = useMemo(() => {
+    const startTable = tables.find((t) => t.id === data.startTableId);
+    const endTable = tables.find((t) => t.id === data.endTableId);
+
+    if (!startTable || !endTable) return null;
+
+    return {
+      startFieldIndex: startTable.fields.findIndex(
+        (f) => f.id === data.startFieldId,
+      ),
+      endFieldIndex: endTable.fields.findIndex((f) => f.id === data.endFieldId),
+      startTable: { x: startTable.x, y: startTable.y },
+      endTable: { x: endTable.x, y: endTable.y },
+    };
+  }, [tables, data]);
+
   const theme = localStorage.getItem("theme");
 
   const pathRef = useRef();
@@ -106,20 +122,7 @@ export default function Relationship({ data }) {
       <g className="select-none group" onDoubleClick={edit}>
         <path
           ref={pathRef}
-          d={calcPath(
-            {
-              ...data,
-              startTable: {
-                x: tables[data.startTableId].x,
-                y: tables[data.startTableId].y,
-              },
-              endTable: {
-                x: tables[data.endTableId].x,
-                y: tables[data.endTableId].y,
-              },
-            },
-            settings.tableWidth,
-          )}
+          d={calcPath(pathValues, settings.tableWidth)}
           stroke="gray"
           className="group-hover:stroke-sky-700"
           fill="none"