Add named relationships

src/components/EditorCanvas/Canvas.jsx

@@ -3,6 +3,7 @@ import {
   Action,
   Cardinality,
   Constraint,
+  darkBgTheme,
   ObjectType,
 } from "../../data/constants";
 import { Toast } from "@douyinfe/semi-ui";
@@ -431,9 +432,9 @@ export default function Canvas() {
       cardinality: Cardinality.ONE_TO_ONE,
       updateConstraint: Constraint.NONE,
       deleteConstraint: Constraint.NONE,
-      name: `${tables[linkingLine.startTableId].name}_${
+      name: `fk_${tables[linkingLine.startTableId].name}_${
         tables[linkingLine.startTableId].fields[linkingLine.startFieldId].name
-      }_fk`,
+      }_${tables[hoveredTable.tableId].name}`,
       id: relationships.length,
     };
     delete newRelationship.startX;
@@ -498,7 +499,7 @@ export default function Canvas() {
         className="w-full h-full"
         style={{
           cursor: pointer.style,
-          backgroundColor: theme === "dark" ? "rgba(22, 22, 26, 1)" : "white",
+          backgroundColor: theme === "dark" ? darkBgTheme : "white",
         }}
       >
         {settings.showGrid && (

src/components/EditorCanvas/Relationship.jsx

@@ -1,18 +1,29 @@
 import { useRef } from "react";
-import { Cardinality, ObjectType, Tab } from "../../data/constants";
+import {
+  Cardinality,
+  darkBgTheme,
+  ObjectType,
+  Tab,
+} from "../../data/constants";
 import { calcPath } from "../../utils/calcPath";
 import { useDiagram, useSettings, useLayout, useSelect } from "../../hooks";
 import { useTranslation } from "react-i18next";
 import { SideSheet } from "@douyinfe/semi-ui";
 import RelationshipInfo from "../EditorSidePanel/RelationshipsTab/RelationshipInfo";
 
+const labelFontSize = 16;
+
 export default function Relationship({ data }) {
   const { settings } = useSettings();
   const { tables } = useDiagram();
   const { layout } = useLayout();
   const { selectedElement, setSelectedElement } = useSelect();
   const { t } = useTranslation();
+
+  const theme = localStorage.getItem("theme");
+
   const pathRef = useRef();
+  const labelRef = useRef();
 
   let cardinalityStart = "1";
   let cardinalityEnd = "1";
@@ -42,11 +53,21 @@ export default function Relationship({ data }) {
   let cardinalityEndX = 0;
   let cardinalityStartY = 0;
   let cardinalityEndY = 0;
+  let labelX = 0;
+  let labelY = 0;
+
+  let labelWidth = labelRef.current?.getBBox().width ?? 0;
+  let labelHeight = labelRef.current?.getBBox().height ?? 0;
 
   const cardinalityOffset = 28;
 
   if (pathRef.current) {
     const pathLength = pathRef.current.getTotalLength();
+
+    const labelPoint = pathRef.current.getPointAtLength(pathLength / 2);
+    labelX = labelPoint.x - (labelWidth ?? 0) / 2;
+    labelY = labelPoint.y + (labelHeight ?? 0) / 2;
+
     const point1 = pathRef.current.getPointAtLength(cardinalityOffset);
     cardinalityStartX = point1.x;
     cardinalityStartY = point1.y;
@@ -105,6 +126,28 @@ export default function Relationship({ data }) {
           strokeWidth={2}
           cursor="pointer"
         />
+        {settings.showRelationshipLabels && (
+          <>
+            <rect
+              x={labelX - 2}
+              y={labelY - labelFontSize}
+              fill={theme === "dark" ? darkBgTheme : "white"}
+              width={labelWidth + 4}
+              height={labelHeight}
+            />
+            <text
+              x={labelX}
+              y={labelY}
+              fill={theme === "dark" ? "lightgrey" : "#333"}
+              fontSize={labelFontSize}
+              fontWeight={500}
+              ref={labelRef}
+              className="group-hover:fill-sky-700"
+            >
+              {data.name}
+            </text>
+          </>
+        )}
         {pathRef.current && settings.showCardinality && (
           <>
             <circle

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, {
@@ -1232,6 +1229,18 @@ export default function ControlPanel({
             showCardinality: !prev.showCardinality,
           })),
       },
+      show_relationship_labels: {
+        state: settings.showRelationshipLabels ? (
+          <i className="bi bi-toggle-on" />
+        ) : (
+          <i className="bi bi-toggle-off" />
+        ),
+        function: () =>
+          setSettings((prev) => ({
+            ...prev,
+            showRelationshipLabels: !prev.showRelationshipLabels,
+          })),
+      },
       show_debug_coordinates: {
         state: settings.showDebugCoordinates ? (
           <i className="bi bi-toggle-on" />

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) => [
@@ -61,9 +72,9 @@ export default function RelationshipInfo({ data }) {
         idx === data.id
           ? {
               ...e,
-              name: `${tables[e.startTableId].name}_${
-                tables[e.startTableId].fields[e.startFieldId].name
-              }_fk`,
+              name: `fk_${tables[e.endTableId].name}_${
+                tables[e.endTableId].fields[e.endFieldId].name
+              }_${tables[e.startTableId].name}`,
               startTableId: e.endTableId,
               startFieldId: e.endFieldId,
               endTableId: e.startTableId,
@@ -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,

src/context/SettingsContext.jsx

@@ -9,6 +9,7 @@ const defaultSettings = {
   autosave: true,
   panning: true,
   showCardinality: true,
+  showRelationshipLabels: true,
   tableWidth: tableWidth,
   showDebugCoordinates: false,
 };

src/data/constants.js

@@ -23,6 +23,7 @@ export const noteThemes = [
 
 export const defaultBlue = "#175e7a";
 export const defaultNoteTheme = "#fcf7ac";
+export const darkBgTheme = "#16161A";
 export const tableHeaderHeight = 50;
 export const tableWidth = 220;
 export const tableFieldHeight = 36;

src/i18n/locales/en.js

@@ -243,6 +243,7 @@ const en = {
     failed_to_load: "Failed to load. Make sure the link is correct.",
     share_info:
       "* Sharing this link will not create a live real-time collaboration session.",
+    show_relationship_labels: "Show relationship labels",
   },
 };
 

src/utils/importSQL/mariadb.js

@@ -126,7 +126,8 @@ export function fromMariaDB(ast, diagramDb = DB.GENERIC) {
               );
               if (startFieldId === -1) return;
 
-              relationship.name = startTable + "_" + startField + "_fk";
+              relationship.name =
+                "fk_" + startTable + "_" + startField + "_" + endTable;
               relationship.startTableId = startTableId;
               relationship.endTableId = endTableId;
               relationship.endFieldId = endFieldId;
@@ -187,7 +188,8 @@ export function fromMariaDB(ast, diagramDb = DB.GENERIC) {
       e.expr.forEach((expr) => {
         if (
           expr.action === "add" &&
-          expr.create_definitions.constraint_type.toLowerCase() === "foreign key"
+          expr.create_definitions.constraint_type.toLowerCase() ===
+            "foreign key"
         ) {
           const relationship = {};
           const startTable = e.table[0].table;
@@ -230,7 +232,8 @@ export function fromMariaDB(ast, diagramDb = DB.GENERIC) {
           );
           if (startFieldId === -1) return;
 
-          relationship.name = startTable + "_" + startField + "_fk";
+          relationship.name =
+            "fk_" + startTable + "_" + startField + "_" + endTable;
           relationship.startTableId = startTableId;
           relationship.startFieldId = startFieldId;
           relationship.endTableId = endTableId;

src/utils/importSQL/mssql.js

@@ -138,7 +138,8 @@ export function fromMSSQL(ast, diagramDb = DB.GENERIC) {
               );
               if (startFieldId === -1) return;
 
-              relationship.name = startTable + "_" + startField + "_fk";
+              relationship.name =
+                "fk_" + startTable + "_" + startField + "_" + endTable;
               relationship.startTableId = startTableId;
               relationship.endTableId = endTableId;
               relationship.endFieldId = endFieldId;
@@ -243,7 +244,8 @@ export function fromMSSQL(ast, diagramDb = DB.GENERIC) {
           );
           if (startFieldId === -1) return;
 
-          relationship.name = startTable + "_" + startField + "_fk";
+          relationship.name =
+            "fk_" + startTable + "_" + startField + "_" + endTable;
           relationship.startTableId = startTableId;
           relationship.startFieldId = startFieldId;
           relationship.endTableId = endTableId;

src/utils/importSQL/mysql.js

@@ -126,7 +126,8 @@ export function fromMySQL(ast, diagramDb = DB.GENERIC) {
               );
               if (startFieldId === -1) return;
 
-              relationship.name = startTable + "_" + startField + "_fk";
+              relationship.name =
+                "fk_" + startTable + "_" + startField + "_" + endTable;
               relationship.startTableId = startTableId;
               relationship.endTableId = endTableId;
               relationship.endFieldId = endFieldId;
@@ -187,7 +188,8 @@ export function fromMySQL(ast, diagramDb = DB.GENERIC) {
       e.expr.forEach((expr) => {
         if (
           expr.action === "add" &&
-          expr.create_definitions.constraint_type.toLowerCase() === "foreign key"
+          expr.create_definitions.constraint_type.toLowerCase() ===
+            "foreign key"
         ) {
           const relationship = {};
           const startTable = e.table[0].table;
@@ -230,7 +232,8 @@ export function fromMySQL(ast, diagramDb = DB.GENERIC) {
           );
           if (startFieldId === -1) return;
 
-          relationship.name = startTable + "_" + startField + "_fk";
+          relationship.name =
+            "fk_" + startTable + "_" + startField + "_" + endTable;
           relationship.startTableId = startTableId;
           relationship.startFieldId = startFieldId;
           relationship.endTableId = endTableId;

src/utils/importSQL/postgres.js

@@ -129,7 +129,8 @@ export function fromPostgres(ast, diagramDb = DB.GENERIC) {
               );
               if (startFieldId === -1) return;
 
-              relationship.name = startTable + "_" + startField + "_fk";
+              relationship.name =
+                "fk_" + startTable + "_" + startField + "_" + endTable;
               relationship.startTableId = startTableId;
               relationship.endTableId = endTableId;
               relationship.endFieldId = endFieldId;
@@ -199,7 +200,8 @@ export function fromPostgres(ast, diagramDb = DB.GENERIC) {
             );
             if (startFieldId === -1) return;
 
-            relationship.name = startTable + "_" + startField + "_fk";
+            relationship.name =
+              "fk_" + startTable + "_" + startField + "_" + endTable;
             relationship.startTableId = startTableId;
             relationship.startFieldId = startFieldId;
             relationship.endTableId = endTableId;
@@ -326,7 +328,8 @@ export function fromPostgres(ast, diagramDb = DB.GENERIC) {
           );
           if (startFieldId === -1) return;
 
-          relationship.name = startTable + "_" + startField + "_fk";
+          relationship.name =
+            "fk_" + startTable + "_" + startField + "_" + endTable;
           relationship.startTableId = startTableId;
           relationship.startFieldId = startFieldId;
           relationship.endTableId = endTableId;