Add editing relationship names(#314)

Author: 1ilit

src/components/EditorHeader/ControlPanel.jsx

@@ -105,6 +105,7 @@ export default function ControlPanel({
     setRelationships,
     addRelationship,
     deleteRelationship,
+    updateRelationship,
     database,
   } = useDiagram();
   const { enums, setEnums, deleteEnum, addEnum, updateEnum } = useEnums();
@@ -275,9 +276,7 @@ export default function ControlPanel({
           updateTable(a.tid, a.undo);
         }
       } else if (a.element === ObjectType.RELATIONSHIP) {
-        setRelationships((prev) =>
-          prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.undo } : e)),
-        );
+        updateRelationship(a.rid, a.undo);
       } else if (a.element === ObjectType.TYPE) {
         if (a.component === "field_add") {
           updateType(a.tid, {
@@ -455,9 +454,7 @@ export default function ControlPanel({
           updateTable(a.tid, a.redo, false);
         }
       } else if (a.element === ObjectType.RELATIONSHIP) {
-        setRelationships((prev) =>
-          prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.redo } : e)),
-        );
+        updateRelationship(a.rid, a.redo);
       } else if (a.element === ObjectType.TYPE) {
         if (a.component === "field_add") {
           updateType(a.tid, {

src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx

@@ -1,4 +1,12 @@
-import { Row, Col, Select, Button, Popover, Table } from "@douyinfe/semi-ui";
+import {
+  Row,
+  Col,
+  Select,
+  Button,
+  Popover,
+  Table,
+  Input,
+} from "@douyinfe/semi-ui";
 import {
   IconDeleteStroked,
   IconLoopTextStroked,
@@ -13,6 +21,7 @@ import {
 import { useDiagram, useUndoRedo } from "../../../hooks";
 import i18n from "../../../i18n/i18n";
 import { useTranslation } from "react-i18next";
+import { useState } from "react";
 
 const columns = [
   {
@@ -27,8 +36,10 @@ const columns = [
 
 export default function RelationshipInfo({ data }) {
   const { setUndoStack, setRedoStack } = useUndoRedo();
-  const { tables, setRelationships, deleteRelationship } = useDiagram();
+  const { tables, setRelationships, deleteRelationship, updateRelationship } =
+    useDiagram();
   const { t } = useTranslation();
+  const [editField, setEditField] = useState({});
 
   const swapKeys = () => {
     setUndoStack((prev) => [
@@ -121,6 +132,36 @@ export default function RelationshipInfo({ data }) {
 
   return (
     <>
+      <div className="flex items-center mb-2.5">
+        <div className="text-md font-semibold break-keep">{t("name")}: </div>
+        <Input
+          value={data.name}
+          validateStatus={data.name.trim() === "" ? "error" : "default"}
+          placeholder={t("name")}
+          className="ms-2"
+          onChange={(value) => updateRelationship(data.id, { name: value })}
+          onFocus={(e) => setEditField({ name: e.target.value })}
+          onBlur={(e) => {
+            if (e.target.value === editField.name) return;
+            setUndoStack((prev) => [
+              ...prev,
+              {
+                action: Action.EDIT,
+                element: ObjectType.RELATIONSHIP,
+                component: "self",
+                rid: data.id,
+                undo: editField,
+                redo: { name: e.target.value },
+                message: t("edit_relationship", {
+                  refName: e.target.value,
+                  extra: "[name]",
+                }),
+              },
+            ]);
+            setRedoStack([]);
+          }}
+        />
+      </div>
       <div className="flex justify-between items-center mb-3">
         <div className="me-3">
           <span className="font-semibold">{t("primary")}: </span>

src/context/DiagramContext.jsx

@@ -246,6 +246,12 @@ export default function DiagramContextProvider({ children }) {
     );
   };
 
+  const updateRelationship = (id, updatedValues) => {
+    setRelationships((prev) =>
+      prev.map((t) => (t.id === id ? { ...t, ...updatedValues } : t)),
+    );
+  };
+
   return (
     <DiagramContext.Provider
       value={{
@@ -260,6 +266,7 @@ export default function DiagramContextProvider({ children }) {
         setRelationships,
         addRelationship,
         deleteRelationship,
+        updateRelationship,
         database,
         setDatabase,
         tablesCount: tables.length,