diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index d029169..a8d33d3 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/src/components/EditorHeader/ControlPanel.jsx
@@ -167,7 +167,7 @@ export default function ControlPanel({
} else if (a.element === ObjectType.TYPE) {
deleteType(a.data.type.id, false);
} else if (a.element === ObjectType.ENUM) {
- deleteEnum(enums.length - 1, false);
+ deleteEnum(a.data.enum.id, false);
}
setRedoStack((prev) => [...prev, a]);
} else if (a.action === Action.MOVE) {
@@ -201,7 +201,7 @@ export default function ControlPanel({
} else if (a.element === ObjectType.TYPE) {
addType(a.data, false);
} else if (a.element === ObjectType.ENUM) {
- addEnum({ id: a.id, ...a.data }, false);
+ addEnum(a.data, false);
}
setRedoStack((prev) => [...prev, a]);
} else if (a.action === Action.EDIT) {
@@ -339,7 +339,7 @@ export default function ControlPanel({
} else if (a.element === ObjectType.TYPE) {
addType(a.data, false);
} else if (a.element === ObjectType.ENUM) {
- addEnum(null, false);
+ addEnum(a.data, false);
}
setUndoStack((prev) => [...prev, a]);
} else if (a.action === Action.MOVE) {
@@ -372,7 +372,7 @@ export default function ControlPanel({
} else if (a.element === ObjectType.TYPE) {
deleteType(a.data.type.id, false);
} else if (a.element === ObjectType.ENUM) {
- deleteEnum(a.id, false);
+ deleteEnum(a.data.enum.id, false);
}
setUndoStack((prev) => [...prev, a]);
} else if (a.action === Action.EDIT) {
@@ -781,11 +781,24 @@ export default function ControlPanel({
setUndoStack([]);
setRedoStack([]);
if (databases[database].hasTypes) {
- setTypes(diagram.types ?? []);
- }
- if (databases[database].hasEnums) {
- setEnums(diagram.enums ?? []);
+ setTypes(
+ diagram.types.map((t) =>
+ t.id
+ ? t
+ : {
+ ...t,
+ id: nanoid(),
+ fields: t.fields.map((f) =>
+ f.id ? f : { ...f, id: nanoid() },
+ ),
+ },
+ ),
+ );
}
+ setEnums(
+ diagram.enums.map((e) => (!e.id ? { ...e, id: nanoid() } : e)) ??
+ [],
+ );
window.name = `d ${diagram.id}`;
} else {
window.name = "";
diff --git a/src/components/EditorHeader/Modal/Modal.jsx b/src/components/EditorHeader/Modal/Modal.jsx
index c31e52a..502fc1b 100644
--- a/src/components/EditorHeader/Modal/Modal.jsx
+++ b/src/components/EditorHeader/Modal/Modal.jsx
@@ -41,6 +41,7 @@ import Rename from "./Rename";
import SetTableWidth from "./SetTableWidth";
import Share from "./Share";
import { IdContext } from "../../Workspace";
+import { nanoid } from "nanoid";
const extensionToLanguage = {
md: "markdown",
@@ -129,11 +130,24 @@ export default function Modal({
setUndoStack([]);
setRedoStack([]);
if (databases[database].hasTypes) {
- setTypes(diagram.types ?? []);
- }
- if (databases[database].hasEnums) {
- setEnums(diagram.enums ?? []);
+ setTypes(
+ diagram.types.map((t) =>
+ t.id
+ ? t
+ : {
+ ...t,
+ id: nanoid(),
+ fields: t.fields.map((f) =>
+ f.id ? f : { ...f, id: nanoid() },
+ ),
+ },
+ ),
+ );
}
+ setEnums(
+ diagram.enums.map((e) => (!e.id ? { ...e, id: nanoid() } : e)) ??
+ [],
+ );
window.name = `d ${diagram.id}`;
setSaveState(State.SAVING);
} else {
diff --git a/src/components/EditorSidePanel/EnumsTab/EnumDetails.jsx b/src/components/EditorSidePanel/EnumsTab/EnumDetails.jsx
index 4500275..9d4aa61 100644
--- a/src/components/EditorSidePanel/EnumsTab/EnumDetails.jsx
+++ b/src/components/EditorSidePanel/EnumsTab/EnumDetails.jsx
@@ -5,7 +5,7 @@ import { useDiagram, useEnums, useLayout, useUndoRedo } from "../../../hooks";
import { Action, ObjectType } from "../../../data/constants";
import { useTranslation } from "react-i18next";
-export default function EnumDetails({ data, i }) {
+export default function EnumDetails({ data }) {
const { t } = useTranslation();
const { layout } = useLayout();
const { deleteEnum, updateEnum } = useEnums();
@@ -23,7 +23,7 @@ export default function EnumDetails({ data, i }) {
placeholder={t("name")}
validateStatus={data.name.trim() === "" ? "error" : "default"}
onChange={(value) => {
- updateEnum(i, { name: value });
+ updateEnum(data.id, { name: value });
tables.forEach((table) => {
table.fields.forEach((field) => {
if (field.type.toLowerCase() === data.name.toLowerCase()) {
@@ -52,7 +52,7 @@ export default function EnumDetails({ data, i }) {
{
action: Action.EDIT,
element: ObjectType.ENUM,
- id: i,
+ id: data.id,
undo: editField,
redo: { name: e.target.value },
updatedFields,
@@ -75,8 +75,7 @@ export default function EnumDetails({ data, i }) {
validateStatus={data.values.length === 0 ? "error" : "default"}
onChange={(v) => {
if (layout.readOnly) return;
-
- updateEnum(i, { values: v });
+ updateEnum(data.id, { values: v });
}}
onFocus={() => setEditField({ values: data.values })}
onBlur={() => {
@@ -87,7 +86,7 @@ export default function EnumDetails({ data, i }) {
{
action: Action.EDIT,
element: ObjectType.ENUM,
- id: i,
+ id: data.id,
undo: editField,
redo: { values: data.values },
message: t("edit_enum", {
@@ -104,7 +103,7 @@ export default function EnumDetails({ data, i }) {
type="danger"
icon={}
disabled={layout.readOnly}
- onClick={() => deleteEnum(i, true)}
+ onClick={() => deleteEnum(data.id, true)}
>
{t("delete")}
diff --git a/src/components/EditorSidePanel/EnumsTab/EnumsTab.jsx b/src/components/EditorSidePanel/EnumsTab/EnumsTab.jsx
index 2ba8fea..d59c0ba 100644
--- a/src/components/EditorSidePanel/EnumsTab/EnumsTab.jsx
+++ b/src/components/EditorSidePanel/EnumsTab/EnumsTab.jsx
@@ -30,18 +30,18 @@ export default function EnumsTab() {
) : (
- {enums.map((e, i) => (
+ {enums.map((e) => (
{e.name}
}
- itemKey={`${i}`}
+ itemKey={e.id}
>
-
+
))}
diff --git a/src/components/EditorSidePanel/EnumsTab/SearchBar.jsx b/src/components/EditorSidePanel/EnumsTab/SearchBar.jsx
index 0d8ac8c..979fadb 100644
--- a/src/components/EditorSidePanel/EnumsTab/SearchBar.jsx
+++ b/src/components/EditorSidePanel/EnumsTab/SearchBar.jsx
@@ -30,9 +30,9 @@ export default function SearchBar() {
emptyContent={{t("not_found")}
}
onChange={(v) => setValue(v)}
onSelect={(v) => {
- const i = enums.findIndex((t) => t.name === v);
+ const e = enums.find((t) => t.name === v);
document
- .getElementById(`scroll_enum_${i}`)
+ .getElementById(`scroll_enum_${e.id}`)
.scrollIntoView({ behavior: "smooth" });
}}
className="w-full"
diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx
index efe8bc9..38f53d5 100644
--- a/src/components/Workspace.jsx
+++ b/src/components/Workspace.jsx
@@ -216,7 +216,9 @@ export default function WorkSpace() {
}
}
if (databases[database].hasEnums) {
- setEnums(d.enums ?? []);
+ setEnums(
+ d.enums.map((e) => (!e.id ? { ...e, id: nanoid() } : e)) ?? [],
+ );
}
window.name = `d ${d.id}`;
} else {
@@ -274,7 +276,11 @@ export default function WorkSpace() {
}
}
if (databases[database].hasEnums) {
- setEnums(diagram.enums ?? []);
+ setEnums(
+ diagram.enums.map((e) =>
+ !e.id ? { ...e, id: nanoid() } : e,
+ ) ?? [],
+ );
}
window.name = `d ${diagram.id}`;
} else {
@@ -329,7 +335,11 @@ export default function WorkSpace() {
}
}
if (databases[database].hasEnums) {
- setEnums(diagram.enums ?? []);
+ setEnums(
+ diagram.enums.map((e) =>
+ !e.id ? { ...e, id: nanoid() } : e,
+ ) ?? [],
+ );
}
} else {
if (selectedDb === "") setShowSelectDbModal(true);
@@ -376,7 +386,11 @@ export default function WorkSpace() {
}
}
if (databases[parsedDiagram.database].hasEnums) {
- setEnums(parsedDiagram.enums ?? []);
+ setEnums(
+ parsedDiagram.enums.map((e) =>
+ !e.id ? { ...e, id: nanoid() } : e,
+ ) ?? [],
+ );
}
} catch (e) {
console.log(e);
diff --git a/src/context/EnumsContext.jsx b/src/context/EnumsContext.jsx
index 8e3f46e..a2ddf75 100644
--- a/src/context/EnumsContext.jsx
+++ b/src/context/EnumsContext.jsx
@@ -3,6 +3,7 @@ import { Action, ObjectType } from "../data/constants";
import { Toast } from "@douyinfe/semi-ui";
import { useTranslation } from "react-i18next";
import { useUndoRedo } from "../hooks";
+import { nanoid } from "nanoid";
export const EnumsContext = createContext(null);
@@ -12,26 +13,29 @@ export default function EnumsContextProvider({ children }) {
const { setUndoStack, setRedoStack } = useUndoRedo();
const addEnum = (data, addToHistory = true) => {
+ const newEnum = {
+ id: nanoid(),
+ name: `enum_${enums.length}`,
+ values: [],
+ };
if (data) {
setEnums((prev) => {
const temp = prev.slice();
- temp.splice(data.id, 0, data);
+ temp.splice(data.index, 0, data.enum);
return temp;
});
} else {
- setEnums((prev) => [
- ...prev,
- {
- name: `enum_${prev.length}`,
- values: [],
- },
- ]);
+ setEnums((prev) => [...prev, newEnum]);
}
if (addToHistory) {
setUndoStack((prev) => [
...prev,
{
action: Action.ADD,
+ data: {
+ index: enums.length,
+ enum: data?.enum ?? newEnum,
+ },
element: ObjectType.ENUM,
message: t("add_enum"),
},
@@ -41,6 +45,7 @@ export default function EnumsContextProvider({ children }) {
};
const deleteEnum = (id, addToHistory = true) => {
+ const enumIndex = enums.findIndex((e) => e.id === id);
if (addToHistory) {
Toast.success(t("enum_deleted"));
setUndoStack((prev) => [
@@ -48,21 +53,23 @@ export default function EnumsContextProvider({ children }) {
{
action: Action.DELETE,
element: ObjectType.ENUM,
- id: id,
- data: enums[id],
+ data: {
+ index: enumIndex,
+ enum: enums[enumIndex],
+ },
message: t("delete_enum", {
- enumName: enums[id].name,
+ enumName: enums[enumIndex].name,
}),
},
]);
setRedoStack([]);
}
- setEnums((prev) => prev.filter((_, i) => i !== id));
+ setEnums((prev) => prev.filter((e) => e.id !== id));
};
const updateEnum = (id, values) => {
setEnums((prev) =>
- prev.map((e, i) => (i === id ? { ...e, ...values } : e)),
+ prev.map((e) => (e.id === id ? { ...e, ...values } : e)),
);
};
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
index f5fda66..9d13f0a 100644
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -238,6 +238,7 @@ const en = {
enum_w_no_name: "Found enum with no name",
enum_w_no_values: "Found enum '{{enumName}}' with no values",
duplicate_enums: "Duplicate enums with the name '{{enumName}}'",
+ enum_deleted: "Enum deleted",
no_enums: "No enums",
no_enums_text: "Define enums here",
declare_array: "Declare array",