Skip to content

Commit 17b32e2

Browse files
1ilitewqazxc
1ilit
authored and
ewqazxc
committed
Add ids to types (drawdb-io#710)
* Add ids to types * Remove log * Add type field ids
1 parent 6a2b72a commit 17b32e2

File tree

5 files changed

+134
-40
lines changed

5 files changed

+134
-40
lines changed

‎src/components/EditorHeader/ControlPanel.jsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ export default function ControlPanel({
180180
} else if (a.element === ObjectType.RELATIONSHIP) {
181181
deleteRelationship(a.data.relationship.id, false);
182182
} else if (a.element === ObjectType.TYPE) {
183-
deleteType(types.length - 1, false);
183+
deleteType(a.data.type.id, false);
184184
} else if (a.element === ObjectType.ENUM) {
185185
deleteEnum(enums.length - 1, false);
186186
}
@@ -214,7 +214,7 @@ export default function ControlPanel({
214214
} else if (a.element === ObjectType.AREA) {
215215
addArea(a.data, false);
216216
} else if (a.element === ObjectType.TYPE) {
217-
addType({ id: a.id, ...a.data }, false);
217+
addType(a.data, false);
218218
} else if (a.element === ObjectType.ENUM) {
219219
addEnum({ id: a.id, ...a.data }, false);
220220
}
@@ -273,9 +273,12 @@ export default function ControlPanel({
273273
updateRelationship(a.rid, a.undo);
274274
} else if (a.element === ObjectType.TYPE) {
275275
if (a.component === "field_add") {
276+
const type = types.find((t, i) =>
277+
typeof a.tid === "number" ? i === a.tid : t.id === a.tid,
278+
);
276279
updateType(a.tid, {
277-
fields: types[a.tid].fields.filter(
278-
(_, i) => i !== types[a.tid].fields.length - 1,
280+
fields: type.fields.filter((f, i) =>
281+
f.id ? f.id !== a.data.field.id : i !== type.fields.length - 1,
279282
),
280283
});
281284
}
@@ -349,7 +352,7 @@ export default function ControlPanel({
349352
} else if (a.element === ObjectType.RELATIONSHIP) {
350353
addRelationship(a.data, false);
351354
} else if (a.element === ObjectType.TYPE) {
352-
addType(null, false);
355+
addType(a.data, false);
353356
} else if (a.element === ObjectType.ENUM) {
354357
addEnum(null, false);
355358
}
@@ -382,7 +385,7 @@ export default function ControlPanel({
382385
} else if (a.element === ObjectType.AREA) {
383386
deleteArea(a.data.id, false);
384387
} else if (a.element === ObjectType.TYPE) {
385-
deleteType(a.id, false);
388+
deleteType(a.data.type.id, false);
386389
} else if (a.element === ObjectType.ENUM) {
387390
deleteEnum(a.id, false);
388391
}
@@ -451,14 +454,11 @@ export default function ControlPanel({
451454
updateRelationship(a.rid, a.redo);
452455
} else if (a.element === ObjectType.TYPE) {
453456
if (a.component === "field_add") {
457+
const type = types.find((t, i) =>
458+
typeof a.tid === "number" ? i === a.tid : t.id === a.tid,
459+
);
454460
updateType(a.tid, {
455-
fields: [
456-
...types[a.tid].fields,
457-
{
458-
name: "",
459-
type: "",
460-
},
461-
],
461+
fields: [...type.fields, a.data.field],
462462
});
463463
} else if (a.component === "field") {
464464
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: 71 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { databases } from "../data/databases";
2727
import { isRtl } from "../i18n/utils/rtl";
2828
import { useSearchParams } from "react-router-dom";
2929
import { octokit } from "../data/octokit";
30+
import { nanoid } from "nanoid";
3031

3132
export const IdContext = createContext({
3233
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 ?? []);
@@ -233,8 +250,24 @@ export default function WorkSpace() {
233250
});
234251
setUndoStack([]);
235252
setRedoStack([]);
236-
if (databases[initDatabase].hasTypes) {
237-
setTypes(diagram.types ?? []);
253+
if (databases[database].hasTypes) {
254+
if (diagram.types) {
255+
setTypes(
256+
diagram.types.map((t) =>
257+
t.id
258+
? t
259+
: {
260+
...t,
261+
id: nanoid(),
262+
fields: t.fields.map((f) =>
263+
f.id ? f : { ...f, id: nanoid() },
264+
),
265+
},
266+
),
267+
);
268+
} else {
269+
setTypes([]);
270+
}
238271
}
239272
if (databases[initDatabase].hasEnums) {
240273
setEnums(diagram.enums ?? []);
@@ -272,8 +305,24 @@ export default function WorkSpace() {
272305
});
273306
setUndoStack([]);
274307
setRedoStack([]);
275-
if (databases[initDatabase].hasTypes) {
276-
setTypes(diagram.types ?? []);
308+
if (databases[database].hasTypes) {
309+
if (diagram.types) {
310+
setTypes(
311+
diagram.types.map((t) =>
312+
t.id
313+
? t
314+
: {
315+
...t,
316+
id: nanoid(),
317+
fields: t.fields.map((f) =>
318+
f.id ? f : { ...f, id: nanoid() },
319+
),
320+
},
321+
),
322+
);
323+
} else {
324+
setTypes([]);
325+
}
277326
}
278327
if (databases[initDatabase].hasEnums) {
279328
setEnums(diagram.enums ?? []);
@@ -311,7 +360,23 @@ export default function WorkSpace() {
311360
setAreas(parsedDiagram.subjectAreas);
312361
setTransform(parsedDiagram.transform);
313362
if (databases[parsedDiagram.database].hasTypes) {
314-
setTypes(parsedDiagram.types ?? []);
363+
if (parsedDiagram.types) {
364+
setTypes(
365+
parsedDiagram.types.map((t) =>
366+
t.id
367+
? t
368+
: {
369+
...t,
370+
id: nanoid(),
371+
fields: t.fields.map((f) =>
372+
f.id ? f : { ...f, id: nanoid() },
373+
),
374+
},
375+
),
376+
);
377+
} else {
378+
setTypes([]);
379+
}
315380
}
316381
if (databases[parsedDiagram.database].hasEnums) {
317382
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)