From 2f1adf3bebc9d064373e02fcdb67eb60c38bb484 Mon Sep 17 00:00:00 2001
From: Red-Hide <guillaume.ferrand67@gmail.com>
Date: Tue, 14 Oct 2025 14:08:52 +0200
Subject: [PATCH 1/3] Add color picker for relationships Issue : drawdb-io#651

---
 src/components/EditorCanvas/Canvas.jsx        |  2 +
 src/components/EditorCanvas/Relationship.jsx  |  1 +
 .../RelationshipsTab/RelationshipInfo.jsx     | 49 ++++++++++++++++++-
 3 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/components/EditorCanvas/Canvas.jsx b/src/components/EditorCanvas/Canvas.jsx
index d4ceecbfc..6b60ab503 100644
--- a/src/components/EditorCanvas/Canvas.jsx
+++ b/src/components/EditorCanvas/Canvas.jsx
@@ -8,6 +8,7 @@ import {
   gridSize,
   gridCircleRadius,
   minAreaSize,
+  defaultBlue,
 } from "../../data/constants";
 import { Toast } from "@douyinfe/semi-ui";
 import Table from "./Table";
@@ -624,6 +625,7 @@ export default function Canvas() {
       deleteConstraint: Constraint.NONE,
       name: `fk_${startTableName}_${startField.name}_${endTableName}`,
       id: nanoid(),
+      color: defaultBlue
     };
     delete newRelationship.startX;
     delete newRelationship.startY;
diff --git a/src/components/EditorCanvas/Relationship.jsx b/src/components/EditorCanvas/Relationship.jsx
index 72457de98..3dd17bfc3 100644
--- a/src/components/EditorCanvas/Relationship.jsx
+++ b/src/components/EditorCanvas/Relationship.jsx
@@ -127,6 +127,7 @@ export default function Relationship({ data }) {
           className="relationship-path"
           fill="none"
           cursor="pointer"
+          style={{ stroke: data.color }}
         />
         {settings.showRelationshipLabels && (
           <text
diff --git a/src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx b/src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx
index fc42ae13d..62089c5fe 100644
--- a/src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx
+++ b/src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx
@@ -21,7 +21,8 @@ import {
 import { useDiagram, useLayout, useUndoRedo } from "../../../hooks";
 import i18n from "../../../i18n/i18n";
 import { useTranslation } from "react-i18next";
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
+import ColorPicker from "../ColorPicker.jsx";
 
 const columns = [
   {
@@ -40,6 +41,8 @@ export default function RelationshipInfo({ data }) {
   const { t } = useTranslation();
   const { layout } = useLayout();
   const [editField, setEditField] = useState({});
+  const initialColorRef = useRef(data.color);
+
 
   const relValues = useMemo(() => {
     const { fields: startTableFields, name: startTableName } = tables.find(
@@ -141,6 +144,41 @@ export default function RelationshipInfo({ data }) {
     updateRelationship(data.id, { [undoKey]: value });
   };
 
+  const handleColorPick = (color) => {
+    setUndoStack((prev) => {
+      let undoColor = initialColorRef.current;
+      const lastColorChange = prev.findLast(
+        (e) =>
+          e.element === ObjectType.RELATIONSHIP &&
+          e.rid === data.id &&
+          e.action === Action.EDIT &&
+          e.redo?.color,
+      );
+      if (lastColorChange) {
+        undoColor = lastColorChange.redo.color;
+      }
+
+      if (color === undoColor) return prev;
+
+      const newStack = [
+        ...prev,
+        {
+          action: Action.EDIT,
+          element: ObjectType.RELATIONSHIP,
+          rid: data.id,
+          undo: { color: undoColor },
+          redo: { color: color },
+          message: t("edit_relationship", {
+            refName: data.name,
+            extra: "[color]",
+          }),
+        },
+      ];
+      return newStack;
+    });
+    setRedoStack([]);
+  };
+
   return (
     <>
       <div className="flex items-center mb-2.5">
@@ -173,6 +211,15 @@ export default function RelationshipInfo({ data }) {
             setRedoStack([]);
           }}
         />
+        <div className="ms-2">
+          <ColorPicker
+          usePopover={true}
+          readOnly={layout.readOnly}
+          value={data.color}
+          onChange={(color) => updateRelationship(data.id, { color })}
+          onColorPick={(color) => handleColorPick(color)}
+          />
+        </div>
       </div>
       <div className="flex justify-between items-center mb-3">
         <div className="me-3">

From 2e64de1f597ca6ac9588cb978f58cbda48578d82 Mon Sep 17 00:00:00 2001
From: Red-Hide <guillaume.ferrand67@gmail.com>
Date: Tue, 14 Oct 2025 14:23:59 +0200
Subject: [PATCH 2/3] Add color on relationship cardinality Issue :
 drawdb-io#651

---
 src/components/EditorCanvas/Relationship.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/EditorCanvas/Relationship.jsx b/src/components/EditorCanvas/Relationship.jsx
index 3dd17bfc3..670066ca0 100644
--- a/src/components/EditorCanvas/Relationship.jsx
+++ b/src/components/EditorCanvas/Relationship.jsx
@@ -148,11 +148,13 @@ export default function Relationship({ data }) {
               x={cardinalityStartX}
               y={cardinalityStartY}
               text={cardinalityStart}
+              color={data.color}
             />
             <CardinalityLabel
               x={cardinalityEndX}
               y={cardinalityEndY}
               text={cardinalityEnd}
+              color={data.color}
             />
           </>
         )}
@@ -182,7 +184,7 @@ export default function Relationship({ data }) {
   );
 }
 
-function CardinalityLabel({ x, y, text, r = 12, padding = 14 }) {
+function CardinalityLabel({ x, y, text, r = 12, padding = 14 , color = "grey"}) {
   const [textWidth, setTextWidth] = useState(0);
   const textRef = useRef(null);
 
@@ -202,7 +204,7 @@ function CardinalityLabel({ x, y, text, r = 12, padding = 14 }) {
         ry={r}
         width={textWidth + padding}
         height={r * 2}
-        fill="grey"
+        fill={color}
         className="group-hover:fill-sky-600"
       />
       <text

From d3bc77d89f93f7144a1eebca9cd2a95fce57f105 Mon Sep 17 00:00:00 2001
From: Red-Hide <guillaume.ferrand67@gmail.com>
Date: Tue, 14 Oct 2025 14:51:20 +0200
Subject: [PATCH 3/3] Add default relationship color to handle old versions
 Issue : drawdb-io#651

---
 src/components/EditorCanvas/Relationship.jsx             | 9 +++++++--
 .../RelationshipsTab/RelationshipInfo.jsx                | 5 +++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/EditorCanvas/Relationship.jsx b/src/components/EditorCanvas/Relationship.jsx
index 670066ca0..0ff82fa8b 100644
--- a/src/components/EditorCanvas/Relationship.jsx
+++ b/src/components/EditorCanvas/Relationship.jsx
@@ -1,5 +1,10 @@
 import { useMemo, useRef, useState, useEffect } from "react";
-import { Cardinality, ObjectType, Tab } from "../../data/constants";
+import {
+  Cardinality,
+  defaultBlue,
+  ObjectType,
+  Tab,
+} from "../../data/constants";
 import { calcPath } from "../../utils/calcPath";
 import { useDiagram, useSettings, useLayout, useSelect } from "../../hooks";
 import { useTranslation } from "react-i18next";
@@ -127,7 +132,7 @@ export default function Relationship({ data }) {
           className="relationship-path"
           fill="none"
           cursor="pointer"
-          style={{ stroke: data.color }}
+          style={{ stroke: data.color ?? defaultBlue }}
         />
         {settings.showRelationshipLabels && (
           <text
diff --git a/src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx b/src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx
index 62089c5fe..3bf97c323 100644
--- a/src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx
+++ b/src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx
@@ -17,6 +17,7 @@ import {
   Constraint,
   Action,
   ObjectType,
+  defaultBlue,
 } from "../../../data/constants";
 import { useDiagram, useLayout, useUndoRedo } from "../../../hooks";
 import i18n from "../../../i18n/i18n";
@@ -41,7 +42,7 @@ export default function RelationshipInfo({ data }) {
   const { t } = useTranslation();
   const { layout } = useLayout();
   const [editField, setEditField] = useState({});
-  const initialColorRef = useRef(data.color);
+  const initialColorRef = useRef(data.color ?? defaultBlue);
 
 
   const relValues = useMemo(() => {
@@ -215,7 +216,7 @@ export default function RelationshipInfo({ data }) {
           <ColorPicker
           usePopover={true}
           readOnly={layout.readOnly}
-          value={data.color}
+          value={data.color ?? defaultBlue}
           onChange={(color) => updateRelationship(data.id, { color })}
           onColorPick={(color) => handleColorPick(color)}
           />