Skip to content

Commit bef42b6

Browse files
1ilit1ilit
authored
Change relationship ids from numeric to unique (#631)
1 parent d3702ee commit bef42b6

File tree

11 files changed

+68
-53
lines changed

11 files changed

+68
-53
lines changed

‎src/components/EditorCanvas/Canvas.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { useEventListener } from "usehooks-ts";
3131
import { areFieldsCompatible, getTableHeight } from "../../utils/utils";
3232
import { getRectFromEndpoints, isInsideRect } from "../../utils/rect";
3333
import { State, noteWidth } from "../../data/constants";
34+
import { nanoid } from "nanoid";
3435

3536
export default function Canvas() {
3637
const { t } = useTranslation();
@@ -622,7 +623,7 @@ export default function Canvas() {
622623
updateConstraint: Constraint.NONE,
623624
deleteConstraint: Constraint.NONE,
624625
name: `fk_${startTableName}_${startField.name}_${endTableName}`,
625-
id: relationships.length,
626+
id: nanoid(),
626627
};
627628
delete newRelationship.startX;
628629
delete newRelationship.startY;

‎src/components/EditorHeader/ControlPanel.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ export default function ControlPanel({
163163
} else if (a.element === ObjectType.NOTE) {
164164
deleteNote(notes[notes.length - 1].id, false);
165165
} else if (a.element === ObjectType.RELATIONSHIP) {
166-
deleteRelationship(a.data.id, false);
166+
deleteRelationship(a.data.relationship.id, false);
167167
} else if (a.element === ObjectType.TYPE) {
168168
deleteType(types.length - 1, false);
169169
} else if (a.element === ObjectType.ENUM) {
@@ -361,7 +361,7 @@ export default function ControlPanel({
361361
if (a.element === ObjectType.TABLE) {
362362
deleteTable(a.data.table.id, false);
363363
} else if (a.element === ObjectType.RELATIONSHIP) {
364-
deleteRelationship(a.data.id, false);
364+
deleteRelationship(a.data.relationship.id, false);
365365
} else if (a.element === ObjectType.NOTE) {
366366
deleteNote(a.data.id, false);
367367
} else if (a.element === ObjectType.AREA) {

‎src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx‎

Lines changed: 35 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import { Collapse } from "@douyinfe/semi-ui";
2-
import { useSelect, useDiagram } from "../../../hooks";
2+
import { useSelect, useDiagram, useSaveState, useLayout } from "../../../hooks";
33
import Empty from "../Empty";
44
import SearchBar from "./SearchBar";
55
import RelationshipInfo from "./RelationshipInfo";
6-
import { ObjectType } from "../../../data/constants";
6+
import { ObjectType, State } from "../../../data/constants";
77
import { useTranslation } from "react-i18next";
8+
import { SortableList } from "../../SortableList/SortableList";
9+
import { DragHandle } from "../../SortableList/DragHandle";
810

911
export default function RelationshipsTab() {
10-
const { relationships } = useDiagram();
12+
const { relationships, setRelationships } = useDiagram();
1113
const { selectedElement, setSelectedElement } = useSelect();
14+
const { setSaveState } = useSaveState();
15+
const { layout } = useLayout();
1216
const { t } = useTranslation();
1317

1418
return (
@@ -29,30 +33,40 @@ export default function RelationshipsTab() {
2933
}
3034
keepDOM={false}
3135
lazyRender
32-
onChange={(k) =>
36+
onChange={(k) => {
3337
setSelectedElement((prev) => ({
3438
...prev,
3539
open: true,
36-
id: parseInt(k),
40+
id: k[0],
3741
element: ObjectType.RELATIONSHIP,
38-
}))
39-
}
42+
}));
43+
}}
4044
accordion
4145
>
42-
{relationships.map((r) => (
43-
<div id={`scroll_ref_${r.id}`} key={"relationship_" + r.id}>
44-
<Collapse.Panel
45-
header={
46-
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
47-
{r.name}
48-
</div>
49-
}
50-
itemKey={`${r.id}`}
51-
>
52-
<RelationshipInfo data={r} />
53-
</Collapse.Panel>
54-
</div>
55-
))}
46+
<SortableList
47+
keyPrefix="relationships-tab"
48+
items={relationships}
49+
onChange={(newRelationships) => setRelationships(newRelationships)}
50+
afterChange={() => setSaveState(State.SAVING)}
51+
renderItem={(item) => (
52+
<div id={`scroll_ref_${item.id}`} key={"relationship_" + item.id}>
53+
<Collapse.Panel
54+
className="relative"
55+
header={
56+
<div className="w-full flex items-center gap-2">
57+
<DragHandle readOnly={layout.readOnly} id={item.id} />
58+
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
59+
{item.name}
60+
</div>
61+
</div>
62+
}
63+
itemKey={`${item.id}`}
64+
>
65+
<RelationshipInfo data={item} />
66+
</Collapse.Panel>
67+
</div>
68+
)}
69+
/>
5670
</Collapse>
5771
)}
5872
</>

‎src/context/DiagramContext.jsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,10 @@ export default function DiagramContextProvider({ children }) {
183183
{
184184
action: Action.ADD,
185185
element: ObjectType.RELATIONSHIP,
186-
data: data,
186+
data: {
187+
relationship: data,
188+
index: prevUndo.length
189+
},
187190
message: t("add_relationship"),
188191
},
189192
]);
@@ -193,30 +196,32 @@ export default function DiagramContextProvider({ children }) {
193196
} else {
194197
setRelationships((prev) => {
195198
const temp = prev.slice();
196-
temp.splice(data.id, 0, data);
197-
return temp.map((t, i) => ({ ...t, id: i }));
199+
temp.splice(data.index, 0, data.relationship || data);
200+
return temp;
198201
});
199202
}
200203
};
201204

202205
const deleteRelationship = (id, addToHistory = true) => {
203206
if (addToHistory) {
207+
const relationshipIndex = relationships.findIndex((r) => r.id === id);
204208
setUndoStack((prev) => [
205209
...prev,
206210
{
207211
action: Action.DELETE,
208212
element: ObjectType.RELATIONSHIP,
209-
data: relationships[id],
213+
data: {
214+
relationship: relationships[relationshipIndex],
215+
index: relationshipIndex,
216+
},
210217
message: t("delete_relationship", {
211-
refName: relationships[id].name,
218+
refName: relationships[relationshipIndex].name,
212219
}),
213220
},
214221
]);
215222
setRedoStack([]);
216223
}
217-
setRelationships((prev) =>
218-
prev.filter((e) => e.id !== id).map((e, i) => ({ ...e, id: i })),
219-
);
224+
setRelationships((prev) => prev.filter((e) => e.id !== id));
220225
};
221226

222227
const updateRelationship = (id, updatedValues) => {

‎src/utils/importFrom/dbml.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export function fromDBML(src) {
8282
relationship.endTableId = endTable.id;
8383
relationship.endFieldId = endField.id;
8484
relationship.startFieldId = startField.id;
85-
relationship.id = relationships.length;
85+
relationship.id = nanoid();
8686

8787
relationship.updateConstraint = ref.onDelete
8888
? ref.onDelete[0].toUpperCase() + ref.onDelete.substring(1)

‎src/utils/importSQL/mariadb.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@ export function fromMariaDB(ast, diagramDb = DB.GENERIC) {
133133
relationship.endTableId = endTable.id;
134134
relationship.endFieldId = endField.id;
135135
relationship.startFieldId = startField.id;
136+
relationship.id = nanoid()
136137
let updateConstraint = "No action";
137138
let deleteConstraint = "No action";
138139
d.reference_definition.on_action.forEach((c) => {
@@ -240,6 +241,7 @@ export function fromMariaDB(ast, diagramDb = DB.GENERIC) {
240241
relationship.endFieldId = endField.id;
241242
relationship.updateConstraint = updateConstraint;
242243
relationship.deleteConstraint = deleteConstraint;
244+
relationship.id = nanoid();
243245

244246
if (startField.unique) {
245247
relationship.cardinality = Cardinality.ONE_TO_ONE;
@@ -248,8 +250,6 @@ export function fromMariaDB(ast, diagramDb = DB.GENERIC) {
248250
}
249251

250252
relationships.push(relationship);
251-
252-
relationships.forEach((r, i) => (r.id = i));
253253
}
254254
});
255255
}
@@ -261,7 +261,5 @@ export function fromMariaDB(ast, diagramDb = DB.GENERIC) {
261261
parseSingleStatement(ast);
262262
}
263263

264-
relationships.forEach((r, i) => (r.id = i));
265-
266264
return { tables, relationships };
267265
}

‎src/utils/importSQL/mssql.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,8 @@ export function fromMSSQL(ast, diagramDb = DB.GENERIC) {
145145
relationship.endTableId = endTable.id;
146146
relationship.endFieldId = endField.id;
147147
relationship.startFieldId = startField.id;
148+
relationship.id = nanoid();
149+
148150
let updateConstraint = "No action";
149151
let deleteConstraint = "No action";
150152
d.reference_definition.on_action.forEach((c) => {
@@ -244,6 +246,7 @@ export function fromMSSQL(ast, diagramDb = DB.GENERIC) {
244246
relationship.endFieldId = endField.id;
245247
relationship.updateConstraint = updateConstraint;
246248
relationship.deleteConstraint = deleteConstraint;
249+
relationship.id = nanoid();
247250

248251
if (startField.unique) {
249252
relationship.cardinality = Cardinality.ONE_TO_ONE;
@@ -252,8 +255,6 @@ export function fromMSSQL(ast, diagramDb = DB.GENERIC) {
252255
}
253256

254257
relationships.push(relationship);
255-
256-
relationships.forEach((r, i) => (r.id = i));
257258
}
258259
});
259260
}

‎src/utils/importSQL/mysql.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,8 @@ export function fromMySQL(ast, diagramDb = DB.GENERIC) {
132132
relationship.endTableId = endTable.id;
133133
relationship.endFieldId = endField.id;
134134
relationship.startFieldId = startField.id;
135+
relationship.id = nanoid();
136+
135137
let updateConstraint = "No action";
136138
let deleteConstraint = "No action";
137139
d.reference_definition.on_action.forEach((c) => {
@@ -238,6 +240,7 @@ export function fromMySQL(ast, diagramDb = DB.GENERIC) {
238240
relationship.endFieldId = endField.id;
239241
relationship.updateConstraint = updateConstraint;
240242
relationship.deleteConstraint = deleteConstraint;
243+
relationship.id = nanoid();
241244

242245
if (startField.unique) {
243246
relationship.cardinality = Cardinality.ONE_TO_ONE;
@@ -246,8 +249,6 @@ export function fromMySQL(ast, diagramDb = DB.GENERIC) {
246249
}
247250

248251
relationships.push(relationship);
249-
250-
relationships.forEach((r, i) => (r.id = i));
251252
}
252253
});
253254
}
@@ -259,7 +260,5 @@ export function fromMySQL(ast, diagramDb = DB.GENERIC) {
259260
parseSingleStatement(ast);
260261
}
261262

262-
relationships.forEach((r, i) => (r.id = i));
263-
264263
return { tables, relationships };
265264
}

‎src/utils/importSQL/oraclesql.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ export function fromOracleSQL(ast, diagramDb = DB.GENERIC) {
9898
);
9999
if (!startField) return;
100100

101+
relationship.id = nanoid();
101102
relationship.startTableId = table.id;
102103
relationship.startFieldId = startField.id;
103104
relationship.endTableId = endTable.id;
@@ -130,7 +131,5 @@ export function fromOracleSQL(ast, diagramDb = DB.GENERIC) {
130131

131132
ast.forEach((e) => parseSingleStatement(e));
132133

133-
relationships.forEach((r, i) => (r.id = i));
134-
135134
return { tables, relationships, enums };
136135
}

‎src/utils/importSQL/postgres.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,8 @@ export function fromPostgres(ast, diagramDb = DB.GENERIC) {
152152
relationship.endTableId = endTable.id;
153153
relationship.endFieldId = endField.id;
154154
relationship.startFieldId = startField.id;
155+
relationship.id = nanoid();
156+
155157
let updateConstraint = Constraint.NONE;
156158
let deleteConstraint = Constraint.NONE;
157159
d.reference_definition.on_action.forEach((c) => {
@@ -224,6 +226,7 @@ export function fromPostgres(ast, diagramDb = DB.GENERIC) {
224226
relationship.endFieldId = endField.id;
225227
relationship.updateConstraint = updateConstraint;
226228
relationship.deleteConstraint = deleteConstraint;
229+
relationship.id = nanoid();
227230

228231
if (startField.unique) {
229232
relationship.cardinality = Cardinality.ONE_TO_ONE;
@@ -232,8 +235,6 @@ export function fromPostgres(ast, diagramDb = DB.GENERIC) {
232235
}
233236

234237
relationships.push(relationship);
235-
236-
relationships.forEach((r, i) => (r.id = i));
237238
}
238239
});
239240
tables.push(table);
@@ -347,6 +348,7 @@ export function fromPostgres(ast, diagramDb = DB.GENERIC) {
347348
relationship.updateConstraint = updateConstraint;
348349
relationship.deleteConstraint = deleteConstraint;
349350
relationship.cardinality = Cardinality.ONE_TO_ONE;
351+
relationship.id = nanoid();
350352

351353
if (startField.unique) {
352354
relationship.cardinality = Cardinality.ONE_TO_ONE;
@@ -355,8 +357,6 @@ export function fromPostgres(ast, diagramDb = DB.GENERIC) {
355357
}
356358

357359
relationships.push(relationship);
358-
359-
relationships.forEach((r, i) => (r.id = i));
360360
}
361361
});
362362
}
@@ -386,7 +386,5 @@ export function fromPostgres(ast, diagramDb = DB.GENERIC) {
386386
parseSingleStatement(ast);
387387
}
388388

389-
relationships.forEach((r, i) => (r.id = i));
390-
391389
return { tables, relationships, types, enums };
392390
}

0 commit comments

Comments
 (0)