Skip to content

Commit 895c1da

Browse files
1ilit1ilit
committed
Add a setting to resize table width (#21)
1 parent 6ab13a7 commit 895c1da

File tree

9 files changed

+65
-38
lines changed

9 files changed

+65
-38
lines changed

‎src/components/EditorCanvas/Relationship.jsx

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default function Relationship({ data }) {
4141
cardinalityStartX = point1.x;
4242
cardinalityStartY = point1.y;
4343
const point2 = pathRef.current.getPointAtLength(
44-
pathLength - cardinalityOffset
44+
pathLength - cardinalityOffset,
4545
);
4646
cardinalityEndX = point2.x;
4747
cardinalityEndY = point2.y;
@@ -51,17 +51,20 @@ export default function Relationship({ data }) {
5151
<g className="select-none group">
5252
<path
5353
ref={pathRef}
54-
d={calcPath({
55-
...data,
56-
startTable: {
57-
x: tables[data.startTableId].x,
58-
y: tables[data.startTableId].y,
54+
d={calcPath(
55+
{
56+
...data,
57+
startTable: {
58+
x: tables[data.startTableId].x,
59+
y: tables[data.startTableId].y,
60+
},
61+
endTable: {
62+
x: tables[data.endTableId].x,
63+
y: tables[data.endTableId].y,
64+
},
5965
},
60-
endTable: {
61-
x: tables[data.endTableId].x,
62-
y: tables[data.endTableId].y,
63-
},
64-
})}
66+
settings.tableWidth,
67+
)}
6568
stroke="gray"
6669
className="group-hover:stroke-sky-700"
6770
fill="none"

‎src/components/EditorCanvas/Table.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default function Table(props) {
3939
key={tableData.id}
4040
x={tableData.x}
4141
y={tableData.y}
42-
width={200}
42+
width={settings.tableWidth}
4343
height={height}
4444
className="group drop-shadow-lg rounded-md cursor-move"
4545
onMouseDown={onMouseDown}

‎src/components/EditorHeader/ControlPanel.jsx

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ export default function ControlPanel({
187187
return { ...t, fields: temp.map((t, i) => ({ ...t, id: i })) };
188188
}
189189
return t;
190-
})
190+
}),
191191
);
192192
} else if (a.component === "field_add") {
193193
updateTable(a.tid, {
@@ -209,7 +209,7 @@ export default function ControlPanel({
209209
...index,
210210
...a.undo,
211211
}
212-
: index
212+
: index,
213213
),
214214
});
215215
} else if (a.component === "index_delete") {
@@ -224,27 +224,27 @@ export default function ControlPanel({
224224
};
225225
}
226226
return table;
227-
})
227+
}),
228228
);
229229
} else if (a.component === "self") {
230230
updateTable(a.tid, a.undo);
231231
}
232232
} else if (a.element === ObjectType.RELATIONSHIP) {
233233
setRelationships((prev) =>
234-
prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.undo } : e))
234+
prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.undo } : e)),
235235
);
236236
} else if (a.element === ObjectType.TYPE) {
237237
if (a.component === "field_add") {
238238
updateType(a.tid, {
239239
fields: types[a.tid].fields.filter(
240-
(e, i) => i !== types[a.tid].fields.length - 1
240+
(e, i) => i !== types[a.tid].fields.length - 1,
241241
),
242242
});
243243
}
244244
if (a.component === "field") {
245245
updateType(a.tid, {
246246
fields: types[a.tid].fields.map((e, i) =>
247-
i === a.fid ? { ...e, ...a.undo } : e
247+
i === a.fid ? { ...e, ...a.undo } : e,
248248
),
249249
});
250250
} else if (a.component === "field_delete") {
@@ -256,7 +256,7 @@ export default function ControlPanel({
256256
return { ...t, fields: temp };
257257
}
258258
return t;
259-
})
259+
}),
260260
);
261261
} else if (a.component === "self") {
262262
updateType(a.tid, a.undo);
@@ -388,7 +388,7 @@ export default function ControlPanel({
388388
};
389389
}
390390
return table;
391-
})
391+
}),
392392
);
393393
} else if (a.component === "index") {
394394
updateTable(a.tid, {
@@ -398,7 +398,7 @@ export default function ControlPanel({
398398
...index,
399399
...a.redo,
400400
}
401-
: index
401+
: index,
402402
),
403403
});
404404
} else if (a.component === "index_delete") {
@@ -412,7 +412,7 @@ export default function ControlPanel({
412412
}
413413
} else if (a.element === ObjectType.RELATIONSHIP) {
414414
setRelationships((prev) =>
415-
prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.redo } : e))
415+
prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.redo } : e)),
416416
);
417417
} else if (a.element === ObjectType.TYPE) {
418418
if (a.component === "field_add") {
@@ -428,7 +428,7 @@ export default function ControlPanel({
428428
} else if (a.component === "field") {
429429
updateType(a.tid, {
430430
fields: types[a.tid].fields.map((e, i) =>
431-
i === a.fid ? { ...e, ...a.redo } : e
431+
i === a.fid ? { ...e, ...a.redo } : e,
432432
),
433433
});
434434
} else if (a.component === "field_delete") {
@@ -466,7 +466,7 @@ export default function ControlPanel({
466466
showFieldSummary: !prev.showFieldSummary,
467467
}));
468468
Toast.success(
469-
`Field summary is ${settings.showFieldSummary ? "off" : "on"}.`
469+
`Field summary is ${settings.showFieldSummary ? "off" : "on"}.`,
470470
);
471471
};
472472
const copyAsImage = () => {
@@ -762,7 +762,7 @@ export default function ControlPanel({
762762
data: dataUrl,
763763
extension: "jpeg",
764764
}));
765-
}
765+
},
766766
);
767767
setModal(MODAL.IMG);
768768
},
@@ -780,7 +780,7 @@ export default function ControlPanel({
780780
title: title,
781781
},
782782
null,
783-
2
783+
2,
784784
);
785785
setExportData((prev) => ({
786786
...prev,
@@ -799,7 +799,7 @@ export default function ControlPanel({
799799
data: dataUrl,
800800
extension: "svg",
801801
}));
802-
}
802+
},
803803
);
804804
setModal(MODAL.IMG);
805805
},
@@ -818,7 +818,7 @@ export default function ControlPanel({
818818
0,
819819
0,
820820
canvas.offsetWidth,
821-
canvas.offsetHeight
821+
canvas.offsetHeight,
822822
);
823823
doc.save(`${exportData.filename}.pdf`);
824824
});
@@ -838,7 +838,7 @@ export default function ControlPanel({
838838
types: types,
839839
},
840840
null,
841-
2
841+
2,
842842
);
843843
const blob = new Blob([result], {
844844
type: "text/plain;charset=utf-8",
@@ -1086,6 +1086,9 @@ export default function ControlPanel({
10861086
return { ...prev, panning: !prev.panning };
10871087
}),
10881088
},
1089+
"Table width": {
1090+
function: () => setModal(MODAL.TABLE_WIDTH),
1091+
},
10891092
"Flush storage": {
10901093
function: async () => {
10911094
db.delete()
@@ -1389,7 +1392,7 @@ export default function ControlPanel({
13891392
>
13901393
{Object.keys(e)[0]}
13911394
</Dropdown.Item>
1392-
)
1395+
),
13931396
)}
13941397
</Dropdown.Menu>
13951398
}

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import New from "./New";
2727
import ImportDiagram from "./ImportDiagram";
2828
import ImportSource from "./ImportSource";
2929
import Editor from "@monaco-editor/react";
30+
import SetTableWidth from "./SetTableWidth";
3031

3132
export default function Modal({
3233
modal,
@@ -105,7 +106,7 @@ export default function Modal({
105106
ast = parser.astify(importSource.src, { database: "MySQL" });
106107
} catch (err) {
107108
Toast.error(
108-
"Could not parse the sql file. Make sure there are no syntax errors."
109+
"Could not parse the sql file. Make sure there are no syntax errors.",
109110
);
110111
return;
111112
}
@@ -135,7 +136,7 @@ export default function Modal({
135136
case MODAL.IMG:
136137
saveAs(
137138
exportData.data,
138-
`${exportData.filename}.${exportData.extension}`
139+
`${exportData.filename}.${exportData.extension}`,
139140
);
140141
return;
141142
case MODAL.CODE: {
@@ -259,6 +260,8 @@ export default function Modal({
259260
</div>
260261
);
261262
}
263+
case MODAL.TABLE_WIDTH:
264+
return <SetTableWidth />;
262265
default:
263266
return <></>;
264267
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { InputNumber } from "@douyinfe/semi-ui";
2+
import { useSettings } from "../../../hooks";
3+
4+
export default function SetTableWidth() {
5+
const { settings, setSettings } = useSettings();
6+
7+
return (
8+
<InputNumber
9+
className="w-full"
10+
value={settings.tableWidth}
11+
onChange={(c) => {
12+
if (c < 180) return;
13+
setSettings((prev) => ({ ...prev, tableWidth: c }));
14+
}}
15+
/>
16+
);
17+
}

‎src/context/SettingsContext.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { createContext, useState } from "react";
2+
import { tableWidth } from "../data/constants";
23

34
export const SettingsContext = createContext(null);
45

@@ -11,6 +12,7 @@ export default function SettingsContextProvider({ children }) {
1112
autosave: true,
1213
panning: true,
1314
showCardinality: true,
15+
tableWidth: tableWidth,
1416
});
1517

1618
return (

‎src/data/constants.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ export const MODAL = {
110110
SAVEAS: 6,
111111
NEW: 7,
112112
IMPORT_SRC: 8,
113+
TABLE_WIDTH: 9,
113114
};
114115

115116
export const STATUS = {

‎src/utils/calcPath.js

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
import {
2-
tableFieldHeight,
3-
tableHeaderHeight,
4-
tableWidth,
5-
} from "../data/constants";
1+
import { tableFieldHeight, tableHeaderHeight } from "../data/constants";
62

7-
export function calcPath(r, zoom = 1) {
3+
export function calcPath(r, tableWidth = 200, zoom = 1) {
84
const width = tableWidth * zoom;
95
let x1 = r.startTable.x;
106
let y1 =

‎src/utils/modalTitles.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ export const getModalTitle = (modal) => {
1717
return "Save as";
1818
case MODAL.NEW:
1919
return "Create new diagram";
20+
case MODAL.TABLE_WIDTH:
21+
return "Set the table width";
2022
default:
2123
return "";
2224
}

0 commit comments

Comments
 (0)