From da9ba0ef4b69ae8996b3a8a897f32c4b7ffd3f76 Mon Sep 17 00:00:00 2001
From: lethalSopaper <2bluisugartechea@gmail.com>
Date: Wed, 29 Oct 2025 14:30:25 -0600
Subject: [PATCH 1/3] Color picker for foreign key fields added in side panel

---
 src/components/EditorCanvas/Table.jsx         |  4 +-
 .../TablesTab/FieldDetails.jsx                | 61 ++++++++++++++++++-
 .../EditorSidePanel/TablesTab/TableField.jsx  |  3 +
 src/i18n/locales/en.js                        |  1 +
 src/i18n/locales/es.js                        |  1 +
 5 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/src/components/EditorCanvas/Table.jsx b/src/components/EditorCanvas/Table.jsx
index e084dc9ff..f7082ae9a 100644
--- a/src/components/EditorCanvas/Table.jsx
+++ b/src/components/EditorCanvas/Table.jsx
@@ -380,7 +380,7 @@ export default function Table(props) {
                       <p
                         className={`me-4 font-bold`}
                         style={{
-                          color: e.foreignK ? settings.defaultFkColor : 'inherit'
+                          color: e.foreignK ? (e.fkColor || settings.defaultFkColor) : 'inherit'
                         }}
                       >
                         {e.name}
@@ -610,7 +610,7 @@ export default function Table(props) {
               fieldData.foreignK ? "font-medium" : ""
             }`}
             style={{
-              color: fieldData.foreignK ? settings.defaultFkColor : 'inherit'
+              color: fieldData.foreignK ? (fieldData.fkColor || settings.defaultFkColor) : 'inherit'
             }}
           >
             {fieldData.name}
diff --git a/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx b/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx
index f013555d8..6718f2a5c 100644
--- a/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx
+++ b/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx
@@ -6,13 +6,15 @@ import {
   TagInput,
   Checkbox,
   Toast,
+  Popover,
 } from "@douyinfe/semi-ui";
 import { Action, ObjectType } from "../../../data/constants";
 import { IconDeleteStroked } from "@douyinfe/semi-icons";
-import { useDiagram, useUndoRedo } from "../../../hooks";
+import { useDiagram, useUndoRedo, useSettings } from "../../../hooks";
 import { useTranslation } from "react-i18next";
 import { dbToTypes } from "../../../data/datatypes";
 import { databases } from "../../../data/databases";
+import ColorPicker from "../../ColorPicker";
 
 export default function FieldDetails({ data, tid, index }) {
   const { t } = useTranslation();
@@ -20,6 +22,7 @@ export default function FieldDetails({ data, tid, index }) {
   const { pushUndo } = useUndoRedo();
   const { updateField, deleteField } = useDiagram();
   const [editField, setEditField] = useState({});
+  const { settings } = useSettings();
 
   return (
     <div>
@@ -243,6 +246,62 @@ export default function FieldDetails({ data, tid, index }) {
             />
           </div>
         )}
+      {data.foreignK && (
+        <div className="my-3">
+          <div className="font-semibold mb-2">{t("foreign_key")} Color</div>
+          <Popover
+            content={
+              <div className="popover-theme">
+                <ColorPicker
+                  currentColor={data.fkColor || settings.defaultFkColor}
+                  onClearColor={() => {
+                    pushUndo({
+                      action: Action.EDIT,
+                      element: ObjectType.TABLE,
+                      component: "field",
+                      tid: tid,
+                      fid: index,
+                      undo: { fkColor: data.fkColor },
+                      redo: { fkColor: undefined },
+                      message: t("edit_table", {
+                        tableName: tables[tid].name,
+                        extra: "[field color]",
+                      }),
+                    });
+                    updateField(tid, index, { fkColor: undefined });
+                  }}
+                  onPickColor={(color) => {
+                    pushUndo({
+                      action: Action.EDIT,
+                      element: ObjectType.TABLE,
+                      component: "field",
+                      tid: tid,
+                      fid: index,
+                      undo: { fkColor: data.fkColor },
+                      redo: { fkColor: color },
+                      message: t("edit_table", {
+                        tableName: tables[tid].name,
+                        extra: "[field color]",
+                      }),
+                    });
+                    updateField(tid, index, { fkColor: color });
+                  }}
+                />
+              </div>
+            }
+            trigger="click"
+            position="bottomLeft"
+            showArrow
+          >
+            <div
+              className="w-full h-8 rounded border-2 border-gray-300 dark:border-gray-600 cursor-pointer hover:border-blue-500 transition-colors"
+              style={{
+                backgroundColor: data.fkColor || settings.defaultFkColor,
+              }}
+            />
+          </Popover>
+        </div>
+      )}
       <div className="font-semibold">{t("comment")}</div>
       <TextArea
         className="my-2"
diff --git a/src/components/EditorSidePanel/TablesTab/TableField.jsx b/src/components/EditorSidePanel/TablesTab/TableField.jsx
index c263aee36..9530ecebd 100644
--- a/src/components/EditorSidePanel/TablesTab/TableField.jsx
+++ b/src/components/EditorSidePanel/TablesTab/TableField.jsx
@@ -69,6 +69,9 @@ export default function TableField({ data, tid, index }) {
             value={data.name}
             validateStatus={data.name.trim() === "" ? "error" : "default"}
             placeholder="Name"
+            style={{
+              color: data.foreignK ? (data.fkColor || settings.defaultFkColor) : 'inherit'
+            }}
             onChange={(value) =>
               updateField(tid, index, {
                 name: value
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
index 3e3d64d4a..de2b6e179 100644
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -163,6 +163,7 @@ const en = {
     title: "Title",
     not_set: "Not set",
     foreign: "Foreign",
+    foreign_key: "Foreign Key",
     relationship_type: "Relationship type",
     cardinality: "Cardinality",
     on_update: "On update",
diff --git a/src/i18n/locales/es.js b/src/i18n/locales/es.js
index 80bdfd61c..e9b6ea899 100644
--- a/src/i18n/locales/es.js
+++ b/src/i18n/locales/es.js
@@ -154,6 +154,7 @@ const es = {
     title: "Título",
     not_set: "No establecido",
     foreign: "Extranjero",
+    foreign_key: "Clave Foránea",
     relationship_type: "Tipo de relación",
     cardinality: "Cardinalidad",
     on_update: "Al actualizar",

From 62d409cd7b1bff6bb60e409af3c45db32cd5270c Mon Sep 17 00:00:00 2001
From: lethalSopaper <2bluisugartechea@gmail.com>
Date: Wed, 29 Oct 2025 14:52:41 -0600
Subject: [PATCH 2/3] add: full color change for foreign key fields

- Allows a more visual representation for foreign key fields.
- Side panel colorand field context menu modal color picker included
---
 src/components/EditorCanvas/Canvas.jsx        | 125 +++++++++++++++++-
 .../EditorCanvas/FieldContextMenu.jsx         |  11 ++
 2 files changed, 135 insertions(+), 1 deletion(-)

diff --git a/src/components/EditorCanvas/Canvas.jsx b/src/components/EditorCanvas/Canvas.jsx
index e0c1695e5..740f52e1b 100644
--- a/src/components/EditorCanvas/Canvas.jsx
+++ b/src/components/EditorCanvas/Canvas.jsx
@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, useCallback } from "react";
 import {
   Action,
   RelationshipType,
@@ -15,6 +15,7 @@ import {
 } from "../../data/constants";
 import { dbToTypes } from "../../data/datatypes";
 import { Toast, Modal, Input, InputNumber } from "@douyinfe/semi-ui";
+import ColorPicker from "../ColorPicker";
 import Table from "./Table";
 import Area from "./Area";
 import Relationship from "./Relationship";
@@ -269,6 +270,14 @@ export default function Canvas() {
     field: null,
   });
 
+  const [fieldForeignKeyColorModal, setFieldForeignKeyColorModal] = useState({
+    visible: false,
+    tableId: null,
+    fieldId: null,
+    field: null,
+    currentColor: "",
+  });
+
   // Field properties modal internal state
   const [fieldPropertiesPrecision, setFieldPropertiesPrecision] = useState("");
   const [fieldPropertiesAccuracy, setFieldPropertiesAccuracy] = useState("");
@@ -359,6 +368,26 @@ export default function Canvas() {
     }
   }, [changeCardinalityModal.visible]);
 
+  // Handle keyboard events for FK color modal
+  useEffect(() => {
+    if (!fieldForeignKeyColorModal.visible) return;
+
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleFieldForeignKeyColorConfirm(fieldForeignKeyColorModal.currentColor);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        handleFieldForeignKeyColorCancel();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [fieldForeignKeyColorModal.visible, fieldForeignKeyColorModal.currentColor, handleFieldForeignKeyColorConfirm, handleFieldForeignKeyColorCancel]);
+
   // Centralized function to close all context menus
   const closeAllContextMenus = () => {
     setContextMenu({
@@ -1817,6 +1846,69 @@ export default function Canvas() {
     setFieldPropertiesAccuracy("");
   };
 
+  const handleSetFieldForeignKeyColor = () => {
+    if (
+      fieldContextMenu.tableId !== null &&
+      fieldContextMenu.fieldId !== null
+    ) {
+      const table = tables.find((t) => t.id === fieldContextMenu.tableId);
+      const field = table?.fields.find(
+        (f) => f.id === fieldContextMenu.fieldId,
+      );
+
+      setFieldForeignKeyColorModal({
+        visible: true,
+        tableId: fieldContextMenu.tableId,
+        fieldId: fieldContextMenu.fieldId,
+        field: field,
+        currentColor: field?.fkColor || settings.defaultFkColor,
+      });
+      handleFieldContextMenuClose();
+    }
+  };
+
+  const handleFieldForeignKeyColorConfirm = useCallback((color) => {
+    const { tableId, fieldId } = fieldForeignKeyColorModal;
+
+    pushUndo({
+      action: Action.EDIT,
+      element: ObjectType.TABLE,
+      component: "field",
+      tid: tableId,
+      fid: fieldId,
+      undo: {
+        fkColor:
+          tables
+            .find((t) => t.id === tableId)
+            ?.fields.find((f) => f.id === fieldId)?.fkColor || null,
+      },
+      redo: { fkColor: color },
+      message: t("edit_table", {
+        tableName: tables.find((t) => t.id === tableId)?.name || "",
+        extra: "[foreign key color]",
+      }),
+    });
+
+    updateField(tableId, fieldId, { fkColor: color });
+    setFieldForeignKeyColorModal({
+      visible: false,
+      tableId: null,
+      fieldId: null,
+      field: null,
+      currentColor: "",
+    });
+  }, [fieldForeignKeyColorModal, pushUndo, tables, t, updateField]);
+
+  const handleFieldForeignKeyColorCancel = useCallback(() => {
+    setFieldForeignKeyColorModal({
+      visible: false,
+      tableId: null,
+      fieldId: null,
+      field: null,
+      currentColor: "",
+    });
+  }, []);
+
   const handleEditNoteContent = () => {
     if (noteContextMenu.noteId !== null) {
       // Focus on the textarea for the note
@@ -3411,6 +3503,7 @@ export default function Canvas() {
         onToggleUnique={handleToggleFieldUnique}
         onToggleAutoIncrement={handleToggleFieldAutoIncrement}
         onEditProperties={handleFieldEditProperties}
+        onSetForeignKeyColor={handleSetFieldForeignKeyColor}
       />
 
       <Modal
@@ -3805,6 +3898,36 @@ export default function Canvas() {
           )}
         </div>
       </Modal>
+
+      <Modal
+        title={`${t("foreign_key")} Color - ${fieldForeignKeyColorModal.field?.name || "Field"}`}
+        visible={fieldForeignKeyColorModal.visible}
+        onOk={() => handleFieldForeignKeyColorConfirm(fieldForeignKeyColorModal.currentColor)}
+        onCancel={handleFieldForeignKeyColorCancel}
+        okText={t("confirm")}
+        cancelText={t("cancel")}
+        maskClosable={false}
+        keyboard={true}
+      >
+        <div style={{ padding: "20px 0" }}>
+          <div className="font-semibold mb-4">Select color:</div>
+          <ColorPicker
+            currentColor={fieldForeignKeyColorModal.currentColor}
+            onClearColor={() => {
+              setFieldForeignKeyColorModal(prev => ({
+                ...prev,
+                currentColor: settings.defaultFkColor,
+              }));
+            }}
+            onPickColor={(color) => {
+              setFieldForeignKeyColorModal(prev => ({
+                ...prev,
+                currentColor: color,
+              }));
+            }}
+          />
+        </div>
+      </Modal>
     </div>
   );
 }
diff --git a/src/components/EditorCanvas/FieldContextMenu.jsx b/src/components/EditorCanvas/FieldContextMenu.jsx
index ac179f2f8..799d0e2ef 100644
--- a/src/components/EditorCanvas/FieldContextMenu.jsx
+++ b/src/components/EditorCanvas/FieldContextMenu.jsx
@@ -6,6 +6,7 @@ import {
   IconEdit2Stroked,
   IconCheckboxTick,
   IconMinus,
+  IconColorPalette,
 } from "@douyinfe/semi-icons";
 import { useTranslation } from "react-i18next";
 import { useSettings } from "../../hooks";
@@ -25,6 +26,7 @@ export default function FieldContextMenu({
   onToggleUnique,
   onToggleAutoIncrement,
   onEditProperties,
+  onSetForeignKeyColor,
 }) {
   const { t } = useTranslation();
   const { settings } = useSettings();
@@ -121,6 +123,15 @@ export default function FieldContextMenu({
         onClose();
       },
     },
+    // Only show FK color option for foreign key fields
+    ...(field?.foreignK ? [{
+      label: `Set ${t("foreign_key")} Color`,
+      icon: <IconColorPalette />,
+      onClick: () => {
+        onSetForeignKeyColor();
+        onClose();
+      },
+    }] : []),
     {
       type: "divider",
     },

From 3cee013953f2849e14517b7bdb8d334a438046a6 Mon Sep 17 00:00:00 2001
From: lethalSopaper <2bluisugartechea@gmail.com>
Date: Wed, 29 Oct 2025 17:56:47 -0600
Subject: [PATCH 3/3] fix: resolve function hoisting error in FK color modal

---
 src/components/EditorCanvas/Canvas.jsx | 121 ++++++++++++++-----------
 1 file changed, 68 insertions(+), 53 deletions(-)

diff --git a/src/components/EditorCanvas/Canvas.jsx b/src/components/EditorCanvas/Canvas.jsx
index 740f52e1b..035fc2eda 100644
--- a/src/components/EditorCanvas/Canvas.jsx
+++ b/src/components/EditorCanvas/Canvas.jsx
@@ -368,26 +368,6 @@ export default function Canvas() {
     }
   }, [changeCardinalityModal.visible]);
 
-  // Handle keyboard events for FK color modal
-  useEffect(() => {
-    if (!fieldForeignKeyColorModal.visible) return;
-
-    const handleKeyDown = (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        handleFieldForeignKeyColorConfirm(fieldForeignKeyColorModal.currentColor);
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        handleFieldForeignKeyColorCancel();
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [fieldForeignKeyColorModal.visible, fieldForeignKeyColorModal.currentColor, handleFieldForeignKeyColorConfirm, handleFieldForeignKeyColorCancel]);
-
   // Centralized function to close all context menus
   const closeAllContextMenus = () => {
     setContextMenu({
@@ -1102,7 +1082,8 @@ export default function Canvas() {
     if (!match) {
       return {
         valid: false,
-        message: "Invalid format. Use (x,y) where x is 0 or 1, and y is greater than 1 or *",
+        message:
+          "Invalid format. Use (x,y) where x is 0 or 1, and y is greater than 1 or *",
       };
     }
 
@@ -1867,37 +1848,40 @@ export default function Canvas() {
     }
   };
 
-  const handleFieldForeignKeyColorConfirm = useCallback((color) => {
-    const { tableId, fieldId } = fieldForeignKeyColorModal;
+  const handleFieldForeignKeyColorConfirm = useCallback(
+    (color) => {
+      const { tableId, fieldId } = fieldForeignKeyColorModal;
 
-    pushUndo({
-      action: Action.EDIT,
-      element: ObjectType.TABLE,
-      component: "field",
-      tid: tableId,
-      fid: fieldId,
-      undo: {
-        fkColor:
-          tables
-            .find((t) => t.id === tableId)
-            ?.fields.find((f) => f.id === fieldId)?.fkColor || null,
-      },
-      redo: { fkColor: color },
-      message: t("edit_table", {
-        tableName: tables.find((t) => t.id === tableId)?.name || "",
-        extra: "[foreign key color]",
-      }),
-    });
+      pushUndo({
+        action: Action.EDIT,
+        element: ObjectType.TABLE,
+        component: "field",
+        tid: tableId,
+        fid: fieldId,
+        undo: {
+          fkColor:
+            tables
+              .find((t) => t.id === tableId)
+              ?.fields.find((f) => f.id === fieldId)?.fkColor || null,
+        },
+        redo: { fkColor: color },
+        message: t("edit_table", {
+          tableName: tables.find((t) => t.id === tableId)?.name || "",
+          extra: "[foreign key color]",
+        }),
+      });
 
-    updateField(tableId, fieldId, { fkColor: color });
-    setFieldForeignKeyColorModal({
-      visible: false,
-      tableId: null,
-      fieldId: null,
-      field: null,
-      currentColor: "",
-    });
-  }, [fieldForeignKeyColorModal, pushUndo, tables, t, updateField]);
+      updateField(tableId, fieldId, { fkColor: color });
+      setFieldForeignKeyColorModal({
+        visible: false,
+        tableId: null,
+        fieldId: null,
+        field: null,
+        currentColor: "",
+      });
+    },
+    [fieldForeignKeyColorModal, pushUndo, tables, t, updateField],
+  );
 
   const handleFieldForeignKeyColorCancel = useCallback(() => {
     setFieldForeignKeyColorModal({
@@ -1909,6 +1893,33 @@ export default function Canvas() {
     });
   }, []);
 
+  // Handle keyboard events for FK color modal
+  useEffect(() => {
+    if (!fieldForeignKeyColorModal.visible) return;
+
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleFieldForeignKeyColorConfirm(
+          fieldForeignKeyColorModal.currentColor,
+        );
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        handleFieldForeignKeyColorCancel();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [
+    fieldForeignKeyColorModal.visible,
+    fieldForeignKeyColorModal.currentColor,
+    handleFieldForeignKeyColorConfirm,
+    handleFieldForeignKeyColorCancel,
+  ]);
+
   const handleEditNoteContent = () => {
     if (noteContextMenu.noteId !== null) {
       // Focus on the textarea for the note
@@ -3902,7 +3913,11 @@ export default function Canvas() {
       <Modal
         title={`${t("foreign_key")} Color - ${fieldForeignKeyColorModal.field?.name || "Field"}`}
         visible={fieldForeignKeyColorModal.visible}
-        onOk={() => handleFieldForeignKeyColorConfirm(fieldForeignKeyColorModal.currentColor)}
+        onOk={() =>
+          handleFieldForeignKeyColorConfirm(
+            fieldForeignKeyColorModal.currentColor,
+          )
+        }
         onCancel={handleFieldForeignKeyColorCancel}
         okText={t("confirm")}
         cancelText={t("cancel")}
@@ -3914,13 +3929,13 @@ export default function Canvas() {
           <ColorPicker
             currentColor={fieldForeignKeyColorModal.currentColor}
             onClearColor={() => {
-              setFieldForeignKeyColorModal(prev => ({
+              setFieldForeignKeyColorModal((prev) => ({
                 ...prev,
                 currentColor: settings.defaultFkColor,
               }));
             }}
             onPickColor={(color) => {
-              setFieldForeignKeyColorModal(prev => ({
+              setFieldForeignKeyColorModal((prev) => ({
                 ...prev,
                 currentColor: color,
               }));