Skip to content

Commit 781ae69

Browse files
1ilit1ilit
authored
Add ids to types (#710)
* Add ids to types * Remove log * Add type field ids
1 parent aa0e519 commit 781ae69

File tree

5 files changed

+132
-38
lines changed

5 files changed

+132
-38
lines changed

‎src/components/EditorHeader/ControlPanel.jsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ export default function ControlPanel({
165165
} else if (a.element === ObjectType.RELATIONSHIP) {
166166
deleteRelationship(a.data.relationship.id, false);
167167
} else if (a.element === ObjectType.TYPE) {
168-
deleteType(types.length - 1, false);
168+
deleteType(a.data.type.id, false);
169169
} else if (a.element === ObjectType.ENUM) {
170170
deleteEnum(enums.length - 1, false);
171171
}
@@ -199,7 +199,7 @@ export default function ControlPanel({
199199
} else if (a.element === ObjectType.AREA) {
200200
addArea(a.data, false);
201201
} else if (a.element === ObjectType.TYPE) {
202-
addType({ id: a.id, ...a.data }, false);
202+
addType(a.data, false);
203203
} else if (a.element === ObjectType.ENUM) {
204204
addEnum({ id: a.id, ...a.data }, false);
205205
}
@@ -258,9 +258,12 @@ export default function ControlPanel({
258258
updateRelationship(a.rid, a.undo);
259259
} else if (a.element === ObjectType.TYPE) {
260260
if (a.component === "field_add") {
261+
const type = types.find((t, i) =>
262+
typeof a.tid === "number" ? i === a.tid : t.id === a.tid,
263+
);
261264
updateType(a.tid, {
262-
fields: types[a.tid].fields.filter(
263-
(_, i) => i !== types[a.tid].fields.length - 1,
265+
fields: type.fields.filter((f, i) =>
266+
f.id ? f.id !== a.data.field.id : i !== type.fields.length - 1,
264267
),
265268
});
266269
}
@@ -334,7 +337,7 @@ export default function ControlPanel({
334337
} else if (a.element === ObjectType.RELATIONSHIP) {
335338
addRelationship(a.data, false);
336339
} else if (a.element === ObjectType.TYPE) {
337-
addType(null, false);
340+
addType(a.data, false);
338341
} else if (a.element === ObjectType.ENUM) {
339342
addEnum(null, false);
340343
}
@@ -367,7 +370,7 @@ export default function ControlPanel({
367370
} else if (a.element === ObjectType.AREA) {
368371
deleteArea(a.data.id, false);
369372
} else if (a.element === ObjectType.TYPE) {
370-
deleteType(a.id, false);
373+
deleteType(a.data.type.id, false);
371374
} else if (a.element === ObjectType.ENUM) {
372375
deleteEnum(a.id, false);
373376
}
@@ -436,14 +439,11 @@ export default function ControlPanel({
436439
updateRelationship(a.rid, a.redo);
437440
} else if (a.element === ObjectType.TYPE) {
438441
if (a.component === "field_add") {
442+
const type = types.find((t, i) =>
443+
typeof a.tid === "number" ? i === a.tid : t.id === a.tid,
444+
);
439445
updateType(a.tid, {
440-
fields: [
441-
...types[a.tid].fields,
442-
{
443-
name: "",
444-
type: "",
445-
},
446-
],
446+
fields: [...type.fields, a.data.field],
447447
});
448448
} else if (a.component === "field") {
449449
updateType(a.tid, {

‎src/components/EditorSidePanel/TypesTab/TypeInfo.jsx‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { IconDeleteStroked, IconPlus } from "@douyinfe/semi-icons";
1313
import { useUndoRedo, useTypes, useDiagram, useLayout } from "../../../hooks";
1414
import TypeField from "./TypeField";
1515
import { useTranslation } from "react-i18next";
16+
import { nanoid } from "nanoid";
1617

1718
export default function TypeInfo({ index, data }) {
1819
const { layout } = useLayout();
@@ -22,8 +23,11 @@ export default function TypeInfo({ index, data }) {
2223
const [editField, setEditField] = useState({});
2324
const { t } = useTranslation();
2425

26+
// TODO: remove indexes, not a valid case after adding id to types
27+
const typeId = data.id ?? index;
28+
2529
return (
26-
<div id={`scroll_type_${index}`}>
30+
<div id={`scroll_type_${typeId}`}>
2731
<Collapse.Panel
2832
header={
2933
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
@@ -41,7 +45,7 @@ export default function TypeInfo({ index, data }) {
4145
placeholder={t("name")}
4246
className="ms-2"
4347
onChange={(value) => {
44-
updateType(index, { name: value });
48+
updateType(typeId, { name: value });
4549
tables.forEach((table) => {
4650
table.fields.forEach((field) => {
4751
if (field.type.toLowerCase() === data.name.toLowerCase()) {
@@ -71,7 +75,7 @@ export default function TypeInfo({ index, data }) {
7175
action: Action.EDIT,
7276
element: ObjectType.TYPE,
7377
component: "self",
74-
tid: index,
78+
tid: typeId,
7579
undo: editField,
7680
redo: { name: e.target.value },
7781
updatedFields,
@@ -103,7 +107,7 @@ export default function TypeInfo({ index, data }) {
103107
placeholder={t("comment")}
104108
rows={1}
105109
onChange={(value) =>
106-
updateType(index, { comment: value }, false)
110+
updateType(typeId, { comment: value }, false)
107111
}
108112
onFocus={(e) => setEditField({ comment: e.target.value })}
109113
onBlur={(e) => {
@@ -114,7 +118,7 @@ export default function TypeInfo({ index, data }) {
114118
action: Action.EDIT,
115119
element: ObjectType.TYPE,
116120
component: "self",
117-
tid: index,
121+
tid: typeId,
118122
undo: editField,
119123
redo: { comment: e.target.value },
120124
message: t("edit_type", {
@@ -135,28 +139,31 @@ export default function TypeInfo({ index, data }) {
135139
icon={<IconPlus />}
136140
disabled={layout.readOnly}
137141
onClick={() => {
142+
const newField = {
143+
name: "",
144+
type: "",
145+
id: nanoid(),
146+
};
138147
setUndoStack((prev) => [
139148
...prev,
140149
{
141150
action: Action.EDIT,
142151
element: ObjectType.TYPE,
143152
component: "field_add",
144-
tid: index,
153+
data: {
154+
field: newField,
155+
index: data.fields.length,
156+
},
157+
tid: typeId,
145158
message: t("edit_type", {
146159
typeName: data.name,
147160
extra: "[add field]",
148161
}),
149162
},
150163
]);
151164
setRedoStack([]);
152-
updateType(index, {
153-
fields: [
154-
...data.fields,
155-
{
156-
name: "",
157-
type: "",
158-
},
159-
],
165+
updateType(typeId, {
166+
fields: [...data.fields, newField],
160167
});
161168
}}
162169
block
@@ -170,7 +177,7 @@ export default function TypeInfo({ index, data }) {
170177
type="danger"
171178
disabled={layout.readOnly}
172179
icon={<IconDeleteStroked />}
173-
onClick={() => deleteType(index)}
180+
onClick={() => deleteType(typeId)}
174181
>
175182
{t("delete")}
176183
</Button>

‎src/components/Workspace.jsx‎

Lines changed: 69 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { databases } from "../data/databases";
2626
import { isRtl } from "../i18n/utils/rtl";
2727
import { useSearchParams } from "react-router-dom";
2828
import { get, SHARE_FILENAME } from "../api/gists";
29+
import { nanoid } from "nanoid";
2930

3031
export const IdContext = createContext({
3132
gistId: "",
@@ -196,7 +197,23 @@ export default function WorkSpace() {
196197
setTasks(d.todos ?? []);
197198
setTransform({ pan: d.pan, zoom: d.zoom });
198199
if (databases[database].hasTypes) {
199-
setTypes(d.types ?? []);
200+
if (d.types) {
201+
setTypes(
202+
d.types.map((t) =>
203+
t.id
204+
? t
205+
: {
206+
...t,
207+
id: nanoid(),
208+
fields: t.fields.map((f) =>
209+
f.id ? f : { ...f, id: nanoid() },
210+
),
211+
},
212+
),
213+
);
214+
} else {
215+
setTypes([]);
216+
}
200217
}
201218
if (databases[database].hasEnums) {
202219
setEnums(d.enums ?? []);
@@ -238,7 +255,23 @@ export default function WorkSpace() {
238255
setUndoStack([]);
239256
setRedoStack([]);
240257
if (databases[database].hasTypes) {
241-
setTypes(diagram.types ?? []);
258+
if (diagram.types) {
259+
setTypes(
260+
diagram.types.map((t) =>
261+
t.id
262+
? t
263+
: {
264+
...t,
265+
id: nanoid(),
266+
fields: t.fields.map((f) =>
267+
f.id ? f : { ...f, id: nanoid() },
268+
),
269+
},
270+
),
271+
);
272+
} else {
273+
setTypes([]);
274+
}
242275
}
243276
if (databases[database].hasEnums) {
244277
setEnums(diagram.enums ?? []);
@@ -277,7 +310,23 @@ export default function WorkSpace() {
277310
setUndoStack([]);
278311
setRedoStack([]);
279312
if (databases[database].hasTypes) {
280-
setTypes(diagram.types ?? []);
313+
if (diagram.types) {
314+
setTypes(
315+
diagram.types.map((t) =>
316+
t.id
317+
? t
318+
: {
319+
...t,
320+
id: nanoid(),
321+
fields: t.fields.map((f) =>
322+
f.id ? f : { ...f, id: nanoid() },
323+
),
324+
},
325+
),
326+
);
327+
} else {
328+
setTypes([]);
329+
}
281330
}
282331
if (databases[database].hasEnums) {
283332
setEnums(diagram.enums ?? []);
@@ -308,7 +357,23 @@ export default function WorkSpace() {
308357
setAreas(parsedDiagram.subjectAreas);
309358
setTransform(parsedDiagram.transform);
310359
if (databases[parsedDiagram.database].hasTypes) {
311-
setTypes(parsedDiagram.types ?? []);
360+
if (parsedDiagram.types) {
361+
setTypes(
362+
parsedDiagram.types.map((t) =>
363+
t.id
364+
? t
365+
: {
366+
...t,
367+
id: nanoid(),
368+
fields: t.fields.map((f) =>
369+
f.id ? f : { ...f, id: nanoid() },
370+
),
371+
},
372+
),
373+
);
374+
} else {
375+
setTypes([]);
376+
}
312377
}
313378
if (databases[parsedDiagram.database].hasEnums) {
314379
setEnums(parsedDiagram.enums ?? []);

‎src/context/TypesContext.jsx‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Action, ObjectType } from "../data/constants";
33
import { useUndoRedo } from "../hooks";
44
import { Toast } from "@douyinfe/semi-ui";
55
import { useTranslation } from "react-i18next";
6+
import { nanoid } from "nanoid";
67

78
export const TypesContext = createContext(null);
89

@@ -12,16 +13,18 @@ export default function TypesContextProvider({ children }) {
1213
const { setUndoStack, setRedoStack } = useUndoRedo();
1314

1415
const addType = (data, addToHistory = true) => {
16+
const id = nanoid();
1517
if (data) {
1618
setTypes((prev) => {
1719
const temp = prev.slice();
18-
temp.splice(data.id, 0, data);
20+
temp.splice(data.index, 0, data.type);
1921
return temp;
2022
});
2123
} else {
2224
setTypes((prev) => [
2325
...prev,
2426
{
27+
id,
2528
name: `type_${prev.length}`,
2629
fields: [],
2730
comment: "",
@@ -32,6 +35,15 @@ export default function TypesContextProvider({ children }) {
3235
setUndoStack((prev) => [
3336
...prev,
3437
{
38+
data: {
39+
index: types.length,
40+
type: data?.type ?? {
41+
id,
42+
name: `type_${prev.length}`,
43+
fields: [],
44+
comment: "",
45+
},
46+
},
3547
action: Action.ADD,
3648
element: ObjectType.TYPE,
3749
message: t("add_type"),
@@ -43,27 +55,35 @@ export default function TypesContextProvider({ children }) {
4355

4456
const deleteType = (id, addToHistory = true) => {
4557
if (addToHistory) {
58+
const deletedTypeIndex = types.findIndex((e, i) =>
59+
typeof id === "number" ? i === id : e.id === id,
60+
);
4661
Toast.success(t("type_deleted"));
4762
setUndoStack((prev) => [
4863
...prev,
4964
{
5065
action: Action.DELETE,
5166
element: ObjectType.TYPE,
52-
id: id,
53-
data: types[id],
67+
data: { type: types[deletedTypeIndex], index: deletedTypeIndex },
5468
message: t("delete_type", {
55-
typeName: types[id].name,
69+
typeName: types[deletedTypeIndex].name,
5670
}),
5771
},
5872
]);
5973
setRedoStack([]);
6074
}
61-
setTypes((prev) => prev.filter((e, i) => i !== id));
75+
setTypes((prev) =>
76+
prev.filter((e, i) => (typeof id === "number" ? i !== id : e.id !== id)),
77+
);
6278
};
6379

6480
const updateType = (id, values) => {
6581
setTypes((prev) =>
66-
prev.map((e, i) => (i === id ? { ...e, ...values } : e)),
82+
prev.map((item, index) => {
83+
const isMatch = typeof id === "number" ? index === id : item.id === id;
84+
85+
return isMatch ? { ...item, ...values } : item;
86+
}),
6787
);
6888
};
6989

‎src/data/schemas.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,14 @@ export const noteSchema = {
9797
export const typeSchema = {
9898
type: "object",
9999
properties: {
100+
id: { type: ["string"] },
100101
name: { type: "string" },
101102
fields: {
102103
type: "array",
103104
items: {
104105
type: "object",
105106
properties: {
107+
id: { type: ["string"] },
106108
name: { type: "string" },
107109
type: { type: "string" },
108110
values: {

0 commit comments

Comments
 (0)