Skip to content

Commit 28221b7

Browse files
vloldikvloldik
authored
Merge branch 'drawdb-io:main' into main
2 parents dbcd8d1 + 0ead55c commit 28221b7

File tree

13 files changed

+137
-66
lines changed

13 files changed

+137
-66
lines changed

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
"postcss": "^8.4.32",
6060
"prettier": "3.2.5",
6161
"tailwindcss": "^4.0.14",
62-
"vite": "^6.3.6"
62+
"vite": "^6.4.1"
6363
},
6464
"overrides": {
6565
"follow-redirects": "^1.15.4"

‎src/components/EditorCanvas/Note.jsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,15 @@ export default function Note({ data, onPointerDown }) {
7878

7979
const handleChange = (e) => {
8080
const textarea = document.getElementById(`note_${data.id}`);
81+
if (!textarea) return;
8182
textarea.style.height = "0";
8283
textarea.style.height = textarea.scrollHeight + "px";
8384
const newHeight = textarea.scrollHeight + 42;
84-
updateNote(data.id, { content: e.target.value, height: newHeight });
85+
const updates = { content: e.target.value };
86+
if (newHeight !== data.height) {
87+
updates.height = newHeight;
88+
}
89+
updateNote(data.id, updates);
8590
};
8691

8792
const handleBlur = (e) => {
@@ -181,11 +186,17 @@ export default function Note({ data, onPointerDown }) {
181186

182187
useEffect(() => {
183188
const textarea = document.getElementById(`note_${data.id}`);
189+
if (!textarea) return;
190+
184191
textarea.style.height = "0";
185-
textarea.style.height = textarea.scrollHeight + "px";
186-
const newHeight = textarea.scrollHeight + 42;
192+
const scrollHeight = textarea.scrollHeight;
193+
textarea.style.height = scrollHeight + "px";
194+
const newHeight = scrollHeight + 42;
195+
196+
if (newHeight === data.height) return;
197+
187198
updateNote(data.id, { height: newHeight });
188-
}, [data.id, updateNote]);
199+
}, [data.id, data.height, updateNote]);
189200

190201
return (
191202
<g
@@ -339,7 +350,10 @@ export default function Note({ data, onPointerDown }) {
339350
onPointerMove={(e) => {
340351
if (!resizing) return;
341352
const delta = e.movementX / (transform?.zoom || 1);
342-
const next = Math.max(MIN_NOTE_WIDTH, (data.width ?? noteWidth) + delta);
353+
const next = Math.max(
354+
MIN_NOTE_WIDTH,
355+
(data.width ?? noteWidth) + delta,
356+
);
343357
if (next !== data.width) {
344358
updateNote(data.id, { width: next });
345359
}
@@ -514,4 +528,4 @@ export default function Note({ data, onPointerDown }) {
514528
</foreignObject>
515529
</g>
516530
);
517-
}
531+
}

‎src/components/EditorCanvas/Relationship.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ export default function Relationship({ data }) {
1919
const startTable = tables.find((t) => t.id === data.startTableId);
2020
const endTable = tables.find((t) => t.id === data.endTableId);
2121

22-
if (!startTable || !endTable) return null;
22+
if (!startTable || !endTable || startTable.hidden || endTable.hidden)
23+
return null;
2324

2425
return {
2526
startFieldIndex: startTable.fields.findIndex(
@@ -110,6 +111,8 @@ export default function Relationship({ data }) {
110111
}
111112
};
112113

114+
if (!pathValues) return null;
115+
113116
return (
114117
<>
115118
<g className="select-none group" onDoubleClick={edit}>

‎src/components/EditorCanvas/Table.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,8 @@ export default function Table({
129129
}
130130
};
131131

132+
if (tableData.hidden) return null;
133+
132134
return (
133135
<>
134136
<foreignObject

‎src/components/EditorHeader/ControlPanel.jsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export default function ControlPanel({
157157

158158
if (a.action === Action.ADD) {
159159
if (a.element === ObjectType.TABLE) {
160-
deleteTable(a.id, false);
160+
deleteTable(a.data.table.id, false);
161161
} else if (a.element === ObjectType.AREA) {
162162
deleteArea(areas[areas.length - 1].id, false);
163163
} else if (a.element === ObjectType.NOTE) {
@@ -191,7 +191,7 @@ export default function ControlPanel({
191191
} else if (a.action === Action.DELETE) {
192192
if (a.element === ObjectType.TABLE) {
193193
a.data.relationship.forEach((x) => addRelationship(x, false));
194-
addTable(a.data.table, false);
194+
addTable(a.data, false);
195195
} else if (a.element === ObjectType.RELATIONSHIP) {
196196
addRelationship(a.data, false);
197197
} else if (a.element === ObjectType.NOTE) {
@@ -326,7 +326,7 @@ export default function ControlPanel({
326326

327327
if (a.action === Action.ADD) {
328328
if (a.element === ObjectType.TABLE) {
329-
addTable(null, false);
329+
addTable(a.data, false);
330330
} else if (a.element === ObjectType.AREA) {
331331
addArea(null, false);
332332
} else if (a.element === ObjectType.NOTE) {
@@ -647,10 +647,12 @@ export default function ControlPanel({
647647
case ObjectType.TABLE: {
648648
const copiedTable = tables.find((t) => t.id === selectedElement.id);
649649
addTable({
650-
...copiedTable,
651-
x: copiedTable.x + 20,
652-
y: copiedTable.y + 20,
653-
id: nanoid(),
650+
table: {
651+
...copiedTable,
652+
x: copiedTable.x + 20,
653+
y: copiedTable.y + 20,
654+
id: nanoid(),
655+
},
654656
});
655657
break;
656658
}
@@ -709,12 +711,15 @@ export default function ControlPanel({
709711
return;
710712
}
711713
const v = new Validator();
714+
console.log(obj);
712715
if (v.validate(obj, tableSchema).valid) {
713716
addTable({
714-
...obj,
715-
x: obj.x + 20,
716-
y: obj.y + 20,
717-
id: nanoid(),
717+
table: {
718+
...obj,
719+
x: obj.x + 20,
720+
y: obj.y + 20,
721+
id: nanoid(),
722+
},
718723
});
719724
} else if (v.validate(obj, areaSchema).valid) {
720725
addArea({
@@ -767,6 +772,7 @@ export default function ControlPanel({
767772
setTables(diagram.tables);
768773
setRelationships(diagram.references);
769774
setAreas(diagram.areas);
775+
setGistId(diagram.gistId ?? "");
770776
setNotes(diagram.notes);
771777
setTasks(diagram.todos ?? []);
772778
setTransform({

‎src/components/EditorHeader/Modal/Modal.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
import { saveAs } from "file-saver";
99
import { Parser } from "node-sql-parser";
1010
import { Parser as OracleParser } from "oracle-sql-parser";
11-
import { useState } from "react";
11+
import { useContext, useState } from "react";
1212
import { useTranslation } from "react-i18next";
1313
import { DB, MODAL, STATUS, State } from "../../../data/constants";
1414
import { databases } from "../../../data/databases";
@@ -40,6 +40,7 @@ import Open from "./Open";
4040
import Rename from "./Rename";
4141
import SetTableWidth from "./SetTableWidth";
4242
import Share from "./Share";
43+
import { IdContext } from "../../Workspace";
4344

4445
const extensionToLanguage = {
4546
md: "markdown",
@@ -60,6 +61,7 @@ export default function Modal({
6061
importFrom,
6162
}) {
6263
const { t, i18n } = useTranslation();
64+
const { setGistId } = useContext(IdContext);
6365
const { setTables, setRelationships, database, setDatabase } = useDiagram();
6466
const { setNotes } = useNotes();
6567
const { setAreas } = useAreas();
@@ -119,6 +121,7 @@ export default function Modal({
119121
setAreas(diagram.areas);
120122
setNotes(diagram.notes);
121123
setTasks(diagram.todos ?? []);
124+
setGistId(diagram.gistId ?? "");
122125
setTransform({
123126
pan: diagram.pan,
124127
zoom: diagram.zoom,

‎src/components/EditorHeader/Modal/Share.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,14 +77,14 @@ export default function Share({ title, setModal }) {
7777
await patch(gistId, SHARE_FILENAME, diagramToString());
7878
}
7979
} catch (e) {
80-
console.error(e);
8180
setError(e);
8281
} finally {
8382
setLoading(false);
8483
}
8584
};
8685
updateOrGenerateLink();
87-
}, [gistId, diagramToString, setGistId]);
86+
// eslint-disable-next-line react-hooks/exhaustive-deps
87+
}, []);
8888

8989
const copyLink = () => {
9090
navigator.clipboard

‎src/components/EditorSidePanel/TablesTab/TablesTab.jsx‎

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import { Collapse, Button } from "@douyinfe/semi-ui";
2+
import { IconEyeOpened, IconEyeClosed } from "@douyinfe/semi-icons";
23
import { IconPlus } from "@douyinfe/semi-icons";
3-
import { useSelect, useDiagram, useSaveState, useLayout } from "../../../hooks";
4-
import { ObjectType, State } from "../../../data/constants";
4+
import {
5+
useSelect,
6+
useDiagram,
7+
useSaveState,
8+
useLayout,
9+
useUndoRedo,
10+
} from "../../../hooks";
11+
import { Action, ObjectType, State } from "../../../data/constants";
512
import { useTranslation } from "react-i18next";
613
import { DragHandle } from "../../SortableList/DragHandle";
714
import { SortableList } from "../../SortableList/SortableList";
@@ -67,24 +74,56 @@ export default function TablesTab() {
6774

6875
function TableListItem({ table }) {
6976
const { layout } = useLayout();
77+
const { updateTable } = useDiagram();
78+
const { setUndoStack, setRedoStack } = useUndoRedo();
79+
const { t } = useTranslation();
80+
81+
const toggleTableVisibility = (e) => {
82+
e.stopPropagation();
83+
setUndoStack((prev) => [
84+
...prev,
85+
{
86+
action: Action.EDIT,
87+
element: ObjectType.TABLE,
88+
component: "self",
89+
tid: table.id,
90+
undo: { hidden: table.hidden },
91+
redo: { hidden: !table.hidden },
92+
message: t("edit_table", {
93+
tableName: table.name,
94+
extra: "[hidden]",
95+
}),
96+
},
97+
]);
98+
setRedoStack([]);
99+
updateTable(table.id, { hidden: !table.hidden });
100+
};
70101

71102
return (
72103
<div id={`scroll_table_${table.id}`}>
73104
<Collapse.Panel
74105
className="relative"
75106
header={
76-
<>
77-
<div className="flex items-center gap-2">
107+
<div className="flex items-center justify-between w-full">
108+
<div className="flex items-center gap-2 flex-1">
78109
<DragHandle readOnly={layout.readOnly} id={table.id} />
79110
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
80111
{table.name}
81112
</div>
82113
</div>
114+
<Button
115+
size="small"
116+
theme="borderless"
117+
type="tertiary"
118+
onClick={toggleTableVisibility}
119+
icon={table.hidden ? <IconEyeClosed /> : <IconEyeOpened />}
120+
className="me-2"
121+
/>
83122
<div
84123
className="w-1 h-full absolute top-0 left-0 bottom-0"
85124
style={{ backgroundColor: table.color }}
86125
/>
87-
</>
126+
</div>
88127
}
89128
itemKey={`${table.id}`}
90129
>

‎src/components/SortableList/DragHandle.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export function DragHandle({ id, readOnly }) {
66

77
return (
88
<div
9-
className={`opacity-50 mt-0.5 ${readOnly ? "cursor-not-allowed" : "cursor-move"}`}
9+
className={`opacity-50 mt-1.5 ${readOnly ? "cursor-not-allowed" : "cursor-move"}`}
1010
{...(!readOnly && listeners)}
1111
>
1212
<IconHandle />

0 commit comments

Comments
 (0)