Skip to content

Commit 18ee3c9

Browse files
1ilit1ilit
authored
Show table comments on the diagram (#860)
1 parent 95976b6 commit 18ee3c9

File tree

8 files changed

+186
-112
lines changed

8 files changed

+186
-112
lines changed

‎src/components/EditorCanvas/Canvas.jsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,11 @@ export default function Canvas() {
135135
x: table.x,
136136
y: table.y,
137137
width: settings.tableWidth,
138-
height: getTableHeight(table),
138+
height: getTableHeight(
139+
table,
140+
settings.tableWidth,
141+
settings.showComments,
142+
),
139143
};
140144
if (shouldAddElement(tableRect, element)) {
141145
elements.push(element);
@@ -646,13 +650,13 @@ export default function Canvas() {
646650
x:
647651
prev.pan.x -
648652
(pointer.spaces.diagram.x - prev.pan.x) *
649-
eagernessFactor *
650-
Math.sign(e.deltaY),
653+
eagernessFactor *
654+
Math.sign(e.deltaY),
651655
y:
652656
prev.pan.y -
653657
(pointer.spaces.diagram.y - prev.pan.y) *
654-
eagernessFactor *
655-
Math.sign(e.deltaY),
658+
eagernessFactor *
659+
Math.sign(e.deltaY),
656660
},
657661
zoom: e.deltaY <= 0 ? prev.zoom * 1.05 : prev.zoom / 1.05,
658662
}));

‎src/components/EditorCanvas/Relationship.jsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,12 @@ export default function Relationship({ data }) {
2727
(f) => f.id === data.startFieldId,
2828
),
2929
endFieldIndex: endTable.fields.findIndex((f) => f.id === data.endFieldId),
30-
startTable: { x: startTable.x, y: startTable.y },
31-
endTable: { x: endTable.x, y: endTable.y },
30+
startTable: {
31+
x: startTable.x,
32+
y: startTable.y,
33+
comment: startTable.comment,
34+
},
35+
endTable: { x: endTable.x, y: endTable.y, comment: endTable.comment },
3236
};
3337
}, [tables, data]);
3438

@@ -118,15 +122,15 @@ export default function Relationship({ data }) {
118122
<g className="select-none group" onDoubleClick={edit}>
119123
{/* invisible wider path for better hover ux */}
120124
<path
121-
d={calcPath(pathValues, settings.tableWidth)}
125+
d={calcPath(pathValues, settings.tableWidth, 1, settings.showComments)}
122126
fill="none"
123127
stroke="transparent"
124128
strokeWidth={12}
125129
cursor="pointer"
126130
/>
127131
<path
128132
ref={pathRef}
129-
d={calcPath(pathValues, settings.tableWidth)}
133+
d={calcPath(pathValues, settings.tableWidth, 1, settings.showComments)}
130134
className="relationship-path"
131135
fill="none"
132136
cursor="pointer"

‎src/components/EditorCanvas/Table.jsx‎

Lines changed: 126 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { useTranslation } from "react-i18next";
2222
import { dbToTypes } from "../../data/datatypes";
2323
import { isRtl } from "../../i18n/utils/rtl";
2424
import i18n from "../../i18n/i18n";
25-
import { getTableHeight } from "../../utils/utils";
25+
import { getCommentHeight, getTableHeight } from "../../utils/utils";
2626

2727
export default function Table({
2828
tableData,
@@ -49,7 +49,11 @@ export default function Table({
4949
[settings.mode],
5050
);
5151

52-
const height = getTableHeight(tableData);
52+
const height = getTableHeight(
53+
tableData,
54+
settings.tableWidth,
55+
settings.showComments,
56+
);
5357

5458
const isSelected = useMemo(() => {
5559
return (
@@ -157,110 +161,124 @@ export default function Table({
157161
style={{ backgroundColor: tableData.color }}
158162
/>
159163
<div
160-
className={`overflow-hidden font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${
164+
className={`border-b border-gray-400 ${
161165
settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
162-
}`}
166+
} ${tableData.comment && settings.showComments ? "pb-3" : ""}`}
163167
>
164-
<div className="px-3 overflow-hidden text-ellipsis whitespace-nowrap">
165-
{tableData.name}
166-
</div>
167-
<div className="hidden group-hover:block">
168-
<div className="flex justify-end items-center mx-2 space-x-1.5">
169-
<Button
170-
icon={tableData.locked ? <IconLock /> : <IconUnlock />}
171-
size="small"
172-
theme="solid"
173-
style={{
174-
backgroundColor: "#2f68adb3",
175-
}}
176-
disabled={layout.readOnly}
177-
onClick={lockUnlockTable}
178-
/>
179-
<Button
180-
icon={<IconEdit />}
181-
size="small"
182-
theme="solid"
183-
style={{
184-
backgroundColor: "#2f68adb3",
185-
}}
186-
onClick={openEditor}
187-
/>
188-
<Popover
189-
key={tableData.id}
190-
content={
191-
<div className="popover-theme">
192-
<div className="mb-2">
193-
<strong>{t("comment")}:</strong>{" "}
194-
{tableData.comment === "" ? (
195-
t("not_set")
196-
) : (
197-
<div>{tableData.comment}</div>
198-
)}
199-
</div>
200-
<div>
201-
<strong
202-
className={`${
203-
tableData.indices.length === 0 ? "" : "block"
204-
}`}
205-
>
206-
{t("indices")}:
207-
</strong>{" "}
208-
{tableData.indices.length === 0 ? (
209-
t("not_set")
210-
) : (
211-
<div>
212-
{tableData.indices.map((index, k) => (
213-
<div
214-
key={k}
215-
className={`flex items-center my-1 px-2 py-1 rounded ${
216-
settings.mode === "light"
217-
? "bg-gray-100"
218-
: "bg-zinc-800"
219-
}`}
220-
>
221-
<i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
222-
<div>
223-
{index.fields.map((f) => (
224-
<Tag color="blue" key={f} className="me-1">
225-
{f}
226-
</Tag>
227-
))}
228-
</div>
229-
</div>
230-
))}
231-
</div>
232-
)}
233-
</div>
234-
<Button
235-
icon={<IconDeleteStroked />}
236-
type="danger"
237-
block
238-
style={{ marginTop: "8px" }}
239-
onClick={() => deleteTable(tableData.id)}
240-
disabled={layout.readOnly}
241-
>
242-
{t("delete")}
243-
</Button>
244-
</div>
245-
}
246-
position="rightTop"
247-
showArrow
248-
trigger="click"
249-
style={{ width: "200px", wordBreak: "break-word" }}
250-
>
168+
<div
169+
className={`overflow-hidden font-bold h-[40px] flex justify-between items-center`}
170+
>
171+
<div className="px-3 overflow-hidden text-ellipsis whitespace-nowrap">
172+
{tableData.name}
173+
</div>
174+
<div className="hidden group-hover:block">
175+
<div className="flex justify-end items-center mx-2 space-x-1.5">
251176
<Button
252-
icon={<IconMore />}
253-
type="tertiary"
177+
icon={tableData.locked ? <IconLock /> : <IconUnlock />}
254178
size="small"
179+
theme="solid"
255180
style={{
256-
backgroundColor: "#808080b3",
257-
color: "white",
181+
backgroundColor: "#2f68adb3",
258182
}}
183+
disabled={layout.readOnly}
184+
onClick={lockUnlockTable}
259185
/>
260-
</Popover>
186+
<Button
187+
icon={<IconEdit />}
188+
size="small"
189+
theme="solid"
190+
style={{
191+
backgroundColor: "#2f68adb3",
192+
}}
193+
onClick={openEditor}
194+
/>
195+
<Popover
196+
key={tableData.id}
197+
content={
198+
<div className="popover-theme">
199+
<div className="mb-2">
200+
<strong>{t("comment")}:</strong>{" "}
201+
{tableData.comment === "" ? (
202+
t("not_set")
203+
) : (
204+
<div>{tableData.comment}</div>
205+
)}
206+
</div>
207+
<div>
208+
<strong
209+
className={`${
210+
tableData.indices.length === 0 ? "" : "block"
211+
}`}
212+
>
213+
{t("indices")}:
214+
</strong>{" "}
215+
{tableData.indices.length === 0 ? (
216+
t("not_set")
217+
) : (
218+
<div>
219+
{tableData.indices.map((index, k) => (
220+
<div
221+
key={k}
222+
className={`flex items-center my-1 px-2 py-1 rounded ${
223+
settings.mode === "light"
224+
? "bg-gray-100"
225+
: "bg-zinc-800"
226+
}`}
227+
>
228+
<i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
229+
<div>
230+
{index.fields.map((f) => (
231+
<Tag
232+
color="blue"
233+
key={f}
234+
className="me-1"
235+
>
236+
{f}
237+
</Tag>
238+
))}
239+
</div>
240+
</div>
241+
))}
242+
</div>
243+
)}
244+
</div>
245+
<Button
246+
icon={<IconDeleteStroked />}
247+
type="danger"
248+
block
249+
style={{ marginTop: "8px" }}
250+
onClick={() => deleteTable(tableData.id)}
251+
disabled={layout.readOnly}
252+
>
253+
{t("delete")}
254+
</Button>
255+
</div>
256+
}
257+
position="rightTop"
258+
showArrow
259+
trigger="click"
260+
style={{ width: "200px", wordBreak: "break-word" }}
261+
>
262+
<Button
263+
icon={<IconMore />}
264+
type="tertiary"
265+
size="small"
266+
style={{
267+
backgroundColor: "#808080b3",
268+
color: "white",
269+
}}
270+
/>
271+
</Popover>
272+
</div>
261273
</div>
262274
</div>
275+
{tableData.comment && settings.showComments && (
276+
<div className="text-xs px-3 line-clamp-5">
277+
{tableData.comment}
278+
</div>
279+
)}
263280
</div>
281+
264282
{tableData.fields.map((e, i) => {
265283
return settings.showFieldSummary ? (
266284
<Popover
@@ -410,14 +428,24 @@ export default function Table({
410428
index * tableFieldHeight +
411429
tableHeaderHeight +
412430
tableColorStripHeight +
413-
12,
431+
getCommentHeight(
432+
tableData.comment,
433+
settings.tableWidth,
434+
settings.showComments,
435+
) +
436+
14,
414437
endX: tableData.x + 15,
415438
endY:
416439
tableData.y +
417440
index * tableFieldHeight +
418441
tableHeaderHeight +
419442
tableColorStripHeight +
420-
12,
443+
getCommentHeight(
444+
tableData.comment,
445+
settings.tableWidth,
446+
settings.showComments,
447+
) +
448+
14,
421449
}));
422450
}}
423451
/>

‎src/components/EditorHeader/ControlPanel.jsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -528,7 +528,7 @@ export default function ControlPanel({
528528
minMaxXY.minX = Math.min(minMaxXY.minX, table.x);
529529
minMaxXY.minY = Math.min(minMaxXY.minY, table.y);
530530
minMaxXY.maxX = Math.max(minMaxXY.maxX, table.x + settings.tableWidth);
531-
minMaxXY.maxY = Math.max(minMaxXY.maxY, table.y + getTableHeight(table));
531+
minMaxXY.maxY = Math.max(minMaxXY.maxY, table.y + getTableHeight(table, settings.tableWidth, settings.showComments));
532532
});
533533

534534
areas.forEach((area) => {
@@ -1427,6 +1427,18 @@ export default function ControlPanel({
14271427
function: resetView,
14281428
shortcut: "Enter/Return",
14291429
},
1430+
show_comments: {
1431+
state: settings.showComments ? (
1432+
<i className="bi bi-toggle-on" />
1433+
) : (
1434+
<i className="bi bi-toggle-off" />
1435+
),
1436+
function: () =>
1437+
setSettings((prev) => ({
1438+
...prev,
1439+
showComments: !prev.showComments,
1440+
})),
1441+
},
14301442
show_datatype: {
14311443
state: settings.showDataTypes ? (
14321444
<i className="bi bi-toggle-on" />

‎src/context/SettingsContext.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const defaultSettings = {
1313
showRelationshipLabels: true,
1414
tableWidth: tableWidth,
1515
showDebugCoordinates: false,
16+
showComments: true,
1617
};
1718

1819
export const SettingsContext = createContext(defaultSettings);
@@ -23,7 +24,7 @@ export default function SettingsContextProvider({ children }) {
2324
useEffect(() => {
2425
const settings = localStorage.getItem("settings");
2526
if (settings) {
26-
setSettings(JSON.parse(settings));
27+
setSettings({ ...defaultSettings, ...JSON.parse(settings) });
2728
}
2829
}, []);
2930

‎src/i18n/locales/en.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,7 @@ const en = {
290290
download: "Download",
291291
insert_sql: "Insert SQL",
292292
upload_file: "Upload file",
293+
show_comments: "Show comments",
293294
},
294295
};
295296

0 commit comments

Comments
 (0)