Change relationship ids from numeric to unique

src/components/EditorCanvas/Canvas.jsx

@@ -31,6 +31,7 @@ import { useEventListener } from "usehooks-ts";
 import { areFieldsCompatible, getTableHeight } from "../../utils/utils";
 import { getRectFromEndpoints, isInsideRect } from "../../utils/rect";
 import { State, noteWidth } from "../../data/constants";
+import { nanoid } from "nanoid";
 
 export default function Canvas() {
   const { t } = useTranslation();
@@ -622,7 +623,7 @@ export default function Canvas() {
       updateConstraint: Constraint.NONE,
       deleteConstraint: Constraint.NONE,
       name: `fk_${startTableName}_${startField.name}_${endTableName}`,
-      id: relationships.length,
+      id: nanoid(),
     };
     delete newRelationship.startX;
     delete newRelationship.startY;

src/components/EditorHeader/ControlPanel.jsx

@@ -163,7 +163,7 @@ export default function ControlPanel({
       } else if (a.element === ObjectType.NOTE) {
         deleteNote(notes[notes.length - 1].id, false);
       } else if (a.element === ObjectType.RELATIONSHIP) {
-        deleteRelationship(a.data.id, false);
+        deleteRelationship(a.data.relationship.id, false);
       } else if (a.element === ObjectType.TYPE) {
         deleteType(types.length - 1, false);
       } else if (a.element === ObjectType.ENUM) {
@@ -361,7 +361,7 @@ export default function ControlPanel({
       if (a.element === ObjectType.TABLE) {
         deleteTable(a.data.table.id, false);
       } else if (a.element === ObjectType.RELATIONSHIP) {
-        deleteRelationship(a.data.id, false);
+        deleteRelationship(a.data.relationship.id, false);
       } else if (a.element === ObjectType.NOTE) {
         deleteNote(a.data.id, false);
       } else if (a.element === ObjectType.AREA) {

src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx

@@ -1,14 +1,18 @@
 import { Collapse } from "@douyinfe/semi-ui";
-import { useSelect, useDiagram } from "../../../hooks";
+import { useSelect, useDiagram, useSaveState, useLayout } from "../../../hooks";
 import Empty from "../Empty";
 import SearchBar from "./SearchBar";
 import RelationshipInfo from "./RelationshipInfo";
-import { ObjectType } from "../../../data/constants";
+import { ObjectType, State } from "../../../data/constants";
 import { useTranslation } from "react-i18next";
+import { SortableList } from "../../SortableList/SortableList";
+import { DragHandle } from "../../SortableList/DragHandle";
 
 export default function RelationshipsTab() {
-  const { relationships } = useDiagram();
+  const { relationships, setRelationships } = useDiagram();
   const { selectedElement, setSelectedElement } = useSelect();
+  const { setSaveState } = useSaveState();
+  const { layout } = useLayout();
   const { t } = useTranslation();
 
   return (
@@ -29,30 +33,40 @@ export default function RelationshipsTab() {
           }
           keepDOM={false}
           lazyRender
-          onChange={(k) =>
+          onChange={(k) => {
             setSelectedElement((prev) => ({
               ...prev,
               open: true,
-              id: parseInt(k),
+              id: k[0],
               element: ObjectType.RELATIONSHIP,
-            }))
-          }
+            }));
+          }}
           accordion
         >
-          {relationships.map((r) => (
-            <div id={`scroll_ref_${r.id}`} key={"relationship_" + r.id}>
-              <Collapse.Panel
-                header={
-                  <div className="overflow-hidden text-ellipsis whitespace-nowrap">
-                    {r.name}
-                  </div>
-                }
-                itemKey={`${r.id}`}
-              >
-                <RelationshipInfo data={r} />
-              </Collapse.Panel>
-            </div>
-          ))}
+          <SortableList
+            keyPrefix="relationships-tab"
+            items={relationships}
+            onChange={(newRelationships) => setRelationships(newRelationships)}
+            afterChange={() => setSaveState(State.SAVING)}
+            renderItem={(item) => (
+              <div id={`scroll_ref_${item.id}`} key={"relationship_" + item.id}>
+                <Collapse.Panel
+                  className="relative"
+                  header={
+                    <div className="w-full flex items-center gap-2">
+                      <DragHandle readOnly={layout.readOnly} id={item.id} />
+                      <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+                        {item.name}
+                      </div>
+                    </div>
+                  }
+                  itemKey={`${item.id}`}
+                >
+                  <RelationshipInfo data={item} />
+                </Collapse.Panel>
+              </div>
+            )}
+          />
         </Collapse>
       )}
     </>

src/context/DiagramContext.jsx

@@ -183,7 +183,10 @@ export default function DiagramContextProvider({ children }) {
           {
             action: Action.ADD,
             element: ObjectType.RELATIONSHIP,
-            data: data,
+            data: {
+              relationship: data,
+              index: prevUndo.length
+            },
             message: t("add_relationship"),
           },
         ]);
@@ -193,30 +196,32 @@ export default function DiagramContextProvider({ children }) {
     } else {
       setRelationships((prev) => {
         const temp = prev.slice();
-        temp.splice(data.id, 0, data);
-        return temp.map((t, i) => ({ ...t, id: i }));
+        temp.splice(data.index, 0, data.relationship || data);
+        return temp;
       });
     }
   };
 
   const deleteRelationship = (id, addToHistory = true) => {
     if (addToHistory) {
+      const relationshipIndex = relationships.findIndex((r) => r.id === id);
       setUndoStack((prev) => [
         ...prev,
         {
           action: Action.DELETE,
           element: ObjectType.RELATIONSHIP,
-          data: relationships[id],
+          data: {
+            relationship: relationships[relationshipIndex],
+            index: relationshipIndex,
+          },
           message: t("delete_relationship", {
-            refName: relationships[id].name,
+            refName: relationships[relationshipIndex].name,
           }),
         },
       ]);
       setRedoStack([]);
     }
-    setRelationships((prev) =>
-      prev.filter((e) => e.id !== id).map((e, i) => ({ ...e, id: i })),
-    );
+    setRelationships((prev) => prev.filter((e) => e.id !== id));
   };
 
   const updateRelationship = (id, updatedValues) => {

src/utils/importFrom/dbml.js

@@ -82,7 +82,7 @@ export function fromDBML(src) {
       relationship.endTableId = endTable.id;
       relationship.endFieldId = endField.id;
       relationship.startFieldId = startField.id;
-      relationship.id = relationships.length;
+      relationship.id = nanoid();
 
       relationship.updateConstraint = ref.onDelete
         ? ref.onDelete[0].toUpperCase() + ref.onDelete.substring(1)

src/utils/importSQL/mariadb.js

@@ -133,6 +133,7 @@ export function fromMariaDB(ast, diagramDb = DB.GENERIC) {
               relationship.endTableId = endTable.id;
               relationship.endFieldId = endField.id;
               relationship.startFieldId = startField.id;
+              relationship.id = nanoid()
               let updateConstraint = "No action";
               let deleteConstraint = "No action";
               d.reference_definition.on_action.forEach((c) => {
@@ -240,6 +241,7 @@ export function fromMariaDB(ast, diagramDb = DB.GENERIC) {
           relationship.endFieldId = endField.id;
           relationship.updateConstraint = updateConstraint;
           relationship.deleteConstraint = deleteConstraint;
+          relationship.id = nanoid();
 
           if (startField.unique) {
             relationship.cardinality = Cardinality.ONE_TO_ONE;
@@ -248,8 +250,6 @@ export function fromMariaDB(ast, diagramDb = DB.GENERIC) {
           }
 
           relationships.push(relationship);
-
-          relationships.forEach((r, i) => (r.id = i));
         }
       });
     }
@@ -261,7 +261,5 @@ export function fromMariaDB(ast, diagramDb = DB.GENERIC) {
     parseSingleStatement(ast);
   }
 
-  relationships.forEach((r, i) => (r.id = i));
-
   return { tables, relationships };
 }

src/utils/importSQL/mssql.js

@@ -145,6 +145,8 @@ export function fromMSSQL(ast, diagramDb = DB.GENERIC) {
               relationship.endTableId = endTable.id;
               relationship.endFieldId = endField.id;
               relationship.startFieldId = startField.id;
+              relationship.id = nanoid();
+
               let updateConstraint = "No action";
               let deleteConstraint = "No action";
               d.reference_definition.on_action.forEach((c) => {
@@ -244,6 +246,7 @@ export function fromMSSQL(ast, diagramDb = DB.GENERIC) {
           relationship.endFieldId = endField.id;
           relationship.updateConstraint = updateConstraint;
           relationship.deleteConstraint = deleteConstraint;
+          relationship.id = nanoid();
 
           if (startField.unique) {
             relationship.cardinality = Cardinality.ONE_TO_ONE;
@@ -252,8 +255,6 @@ export function fromMSSQL(ast, diagramDb = DB.GENERIC) {
           }
 
           relationships.push(relationship);
-
-          relationships.forEach((r, i) => (r.id = i));
         }
       });
     }

src/utils/importSQL/mysql.js

@@ -132,6 +132,8 @@ export function fromMySQL(ast, diagramDb = DB.GENERIC) {
               relationship.endTableId = endTable.id;
               relationship.endFieldId = endField.id;
               relationship.startFieldId = startField.id;
+              relationship.id = nanoid();
+
               let updateConstraint = "No action";
               let deleteConstraint = "No action";
               d.reference_definition.on_action.forEach((c) => {
@@ -238,6 +240,7 @@ export function fromMySQL(ast, diagramDb = DB.GENERIC) {
           relationship.endFieldId = endField.id;
           relationship.updateConstraint = updateConstraint;
           relationship.deleteConstraint = deleteConstraint;
+          relationship.id = nanoid();
 
           if (startField.unique) {
             relationship.cardinality = Cardinality.ONE_TO_ONE;
@@ -246,8 +249,6 @@ export function fromMySQL(ast, diagramDb = DB.GENERIC) {
           }
 
           relationships.push(relationship);
-
-          relationships.forEach((r, i) => (r.id = i));
         }
       });
     }
@@ -259,7 +260,5 @@ export function fromMySQL(ast, diagramDb = DB.GENERIC) {
     parseSingleStatement(ast);
   }
 
-  relationships.forEach((r, i) => (r.id = i));
-
   return { tables, relationships };
 }

src/utils/importSQL/oraclesql.js

@@ -98,6 +98,7 @@ export function fromOracleSQL(ast, diagramDb = DB.GENERIC) {
             );
             if (!startField) return;
 
+            relationship.id = nanoid();
             relationship.startTableId = table.id;
             relationship.startFieldId = startField.id;
             relationship.endTableId = endTable.id;
@@ -130,7 +131,5 @@ export function fromOracleSQL(ast, diagramDb = DB.GENERIC) {
 
   ast.forEach((e) => parseSingleStatement(e));
 
-  relationships.forEach((r, i) => (r.id = i));
-
   return { tables, relationships, enums };
 }

src/utils/importSQL/postgres.js

@@ -152,6 +152,8 @@ export function fromPostgres(ast, diagramDb = DB.GENERIC) {
               relationship.endTableId = endTable.id;
               relationship.endFieldId = endField.id;
               relationship.startFieldId = startField.id;
+              relationship.id = nanoid();
+
               let updateConstraint = Constraint.NONE;
               let deleteConstraint = Constraint.NONE;
               d.reference_definition.on_action.forEach((c) => {
@@ -224,6 +226,7 @@ export function fromPostgres(ast, diagramDb = DB.GENERIC) {
             relationship.endFieldId = endField.id;
             relationship.updateConstraint = updateConstraint;
             relationship.deleteConstraint = deleteConstraint;
+            relationship.id = nanoid();
 
             if (startField.unique) {
               relationship.cardinality = Cardinality.ONE_TO_ONE;
@@ -232,8 +235,6 @@ export function fromPostgres(ast, diagramDb = DB.GENERIC) {
             }
 
             relationships.push(relationship);
-
-            relationships.forEach((r, i) => (r.id = i));
           }
         });
         tables.push(table);
@@ -347,6 +348,7 @@ export function fromPostgres(ast, diagramDb = DB.GENERIC) {
             relationship.updateConstraint = updateConstraint;
             relationship.deleteConstraint = deleteConstraint;
             relationship.cardinality = Cardinality.ONE_TO_ONE;
+            relationship.id = nanoid();
 
             if (startField.unique) {
               relationship.cardinality = Cardinality.ONE_TO_ONE;
@@ -355,8 +357,6 @@ export function fromPostgres(ast, diagramDb = DB.GENERIC) {
             }
 
             relationships.push(relationship);
-
-            relationships.forEach((r, i) => (r.id = i));
           }
         });
       }
@@ -369,7 +369,5 @@ export function fromPostgres(ast, diagramDb = DB.GENERIC) {
     parseSingleStatement(ast);
   }
 
-  relationships.forEach((r, i) => (r.id = i));
-
   return { tables, relationships, types, enums };
 }

src/utils/importSQL/sqlite.js

@@ -65,6 +65,8 @@ export function fromSQLite(ast, diagramDb = DB.GENERIC) {
     relationship.endTableId = endTable.id;
     relationship.endFieldId = endField.id;
     relationship.startFieldId = startField.id;
+    relationship.id = nanoid();
+
     let updateConstraint = "No action";
     let deleteConstraint = "No action";
     referenceDefinition.on_action.forEach((c) => {
@@ -215,7 +217,5 @@ export function fromSQLite(ast, diagramDb = DB.GENERIC) {
     parseSingleStatement(ast);
   }
 
-  relationships.forEach((r, i) => (r.id = i));
-
   return { tables, relationships };
 }