Show relationship names on the diagrams(#314)

Author: 1ilit

src/components/EditorCanvas/Canvas.jsx

@@ -3,6 +3,7 @@ import {
   Action,
   Cardinality,
   Constraint,
+  darkBgTheme,
   ObjectType,
 } from "../../data/constants";
 import { Toast } from "@douyinfe/semi-ui";
@@ -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

@@ -1229,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/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",
   },
 };