Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a setting to resize table width (#21) #24

Merged
merged 1 commit into from
Apr 10, 2024
Merged

Add a setting to resize table width (#21) #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 14 additions & 11 deletions src/components/EditorCanvas/Relationship.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function Relationship({ data }) {
cardinalityStartX = point1.x;
cardinalityStartY = point1.y;
const point2 = pathRef.current.getPointAtLength(
pathLength - cardinalityOffset
pathLength - cardinalityOffset,
);
cardinalityEndX = point2.x;
cardinalityEndY = point2.y;
Expand All @@ -51,17 +51,20 @@ export default function Relationship({ data }) {
<g className="select-none group">
<path
ref={pathRef}
d={calcPath({
...data,
startTable: {
x: tables[data.startTableId].x,
y: tables[data.startTableId].y,
d={calcPath(
{
...data,
startTable: {
x: tables[data.startTableId].x,
y: tables[data.startTableId].y,
},
endTable: {
x: tables[data.endTableId].x,
y: tables[data.endTableId].y,
},
},
endTable: {
x: tables[data.endTableId].x,
y: tables[data.endTableId].y,
},
})}
settings.tableWidth,
)}
stroke="gray"
className="group-hover:stroke-sky-700"
fill="none"
Expand Down
2 changes: 1 addition & 1 deletion src/components/EditorCanvas/Table.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default function Table(props) {
key={tableData.id}
x={tableData.x}
y={tableData.y}
width={200}
width={settings.tableWidth}
height={height}
className="group drop-shadow-lg rounded-md cursor-move"
onMouseDown={onMouseDown}
Expand Down
39 changes: 21 additions & 18 deletions src/components/EditorHeader/ControlPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export default function ControlPanel({
return { ...t, fields: temp.map((t, i) => ({ ...t, id: i })) };
}
return t;
})
}),
);
} else if (a.component === "field_add") {
updateTable(a.tid, {
Expand All @@ -209,7 +209,7 @@ export default function ControlPanel({
...index,
...a.undo,
}
: index
: index,
),
});
} else if (a.component === "index_delete") {
Expand All @@ -224,27 +224,27 @@ export default function ControlPanel({
};
}
return table;
})
}),
);
} else if (a.component === "self") {
updateTable(a.tid, a.undo);
}
} else if (a.element === ObjectType.RELATIONSHIP) {
setRelationships((prev) =>
prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.undo } : e))
prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.undo } : e)),
);
} else if (a.element === ObjectType.TYPE) {
if (a.component === "field_add") {
updateType(a.tid, {
fields: types[a.tid].fields.filter(
(e, i) => i !== types[a.tid].fields.length - 1
(e, i) => i !== types[a.tid].fields.length - 1,
),
});
}
if (a.component === "field") {
updateType(a.tid, {
fields: types[a.tid].fields.map((e, i) =>
i === a.fid ? { ...e, ...a.undo } : e
i === a.fid ? { ...e, ...a.undo } : e,
),
});
} else if (a.component === "field_delete") {
Expand All @@ -256,7 +256,7 @@ export default function ControlPanel({
return { ...t, fields: temp };
}
return t;
})
}),
);
} else if (a.component === "self") {
updateType(a.tid, a.undo);
Expand Down Expand Up @@ -388,7 +388,7 @@ export default function ControlPanel({
};
}
return table;
})
}),
);
} else if (a.component === "index") {
updateTable(a.tid, {
Expand All @@ -398,7 +398,7 @@ export default function ControlPanel({
...index,
...a.redo,
}
: index
: index,
),
});
} else if (a.component === "index_delete") {
Expand All @@ -412,7 +412,7 @@ export default function ControlPanel({
}
} else if (a.element === ObjectType.RELATIONSHIP) {
setRelationships((prev) =>
prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.redo } : e))
prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.redo } : e)),
);
} else if (a.element === ObjectType.TYPE) {
if (a.component === "field_add") {
Expand All @@ -428,7 +428,7 @@ export default function ControlPanel({
} else if (a.component === "field") {
updateType(a.tid, {
fields: types[a.tid].fields.map((e, i) =>
i === a.fid ? { ...e, ...a.redo } : e
i === a.fid ? { ...e, ...a.redo } : e,
),
});
} else if (a.component === "field_delete") {
Expand Down Expand Up @@ -466,7 +466,7 @@ export default function ControlPanel({
showFieldSummary: !prev.showFieldSummary,
}));
Toast.success(
`Field summary is ${settings.showFieldSummary ? "off" : "on"}.`
`Field summary is ${settings.showFieldSummary ? "off" : "on"}.`,
);
};
const copyAsImage = () => {
Expand Down Expand Up @@ -762,7 +762,7 @@ export default function ControlPanel({
data: dataUrl,
extension: "jpeg",
}));
}
},
);
setModal(MODAL.IMG);
},
Expand All @@ -780,7 +780,7 @@ export default function ControlPanel({
title: title,
},
null,
2
2,
);
setExportData((prev) => ({
...prev,
Expand All @@ -799,7 +799,7 @@ export default function ControlPanel({
data: dataUrl,
extension: "svg",
}));
}
},
);
setModal(MODAL.IMG);
},
Expand All @@ -818,7 +818,7 @@ export default function ControlPanel({
0,
0,
canvas.offsetWidth,
canvas.offsetHeight
canvas.offsetHeight,
);
doc.save(`${exportData.filename}.pdf`);
});
Expand All @@ -838,7 +838,7 @@ export default function ControlPanel({
types: types,
},
null,
2
2,
);
const blob = new Blob([result], {
type: "text/plain;charset=utf-8",
Expand Down Expand Up @@ -1086,6 +1086,9 @@ export default function ControlPanel({
return { ...prev, panning: !prev.panning };
}),
},
"Table width": {
function: () => setModal(MODAL.TABLE_WIDTH),
},
"Flush storage": {
function: async () => {
db.delete()
Expand Down Expand Up @@ -1389,7 +1392,7 @@ export default function ControlPanel({
>
{Object.keys(e)[0]}
</Dropdown.Item>
)
),
)}
</Dropdown.Menu>
}
Expand Down
7 changes: 5 additions & 2 deletions src/components/EditorHeader/Modal/Modal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import New from "./New";
import ImportDiagram from "./ImportDiagram";
import ImportSource from "./ImportSource";
import Editor from "@monaco-editor/react";
import SetTableWidth from "./SetTableWidth";

export default function Modal({
modal,
Expand Down Expand Up @@ -105,7 +106,7 @@ export default function Modal({
ast = parser.astify(importSource.src, { database: "MySQL" });
} catch (err) {
Toast.error(
"Could not parse the sql file. Make sure there are no syntax errors."
"Could not parse the sql file. Make sure there are no syntax errors.",
);
return;
}
Expand Down Expand Up @@ -135,7 +136,7 @@ export default function Modal({
case MODAL.IMG:
saveAs(
exportData.data,
`${exportData.filename}.${exportData.extension}`
`${exportData.filename}.${exportData.extension}`,
);
return;
case MODAL.CODE: {
Expand Down Expand Up @@ -259,6 +260,8 @@ export default function Modal({
</div>
);
}
case MODAL.TABLE_WIDTH:
return <SetTableWidth />;
default:
return <></>;
}
Expand Down
17 changes: 17 additions & 0 deletions src/components/EditorHeader/Modal/SetTableWidth.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { InputNumber } from "@douyinfe/semi-ui";
import { useSettings } from "../../../hooks";

export default function SetTableWidth() {
const { settings, setSettings } = useSettings();

return (
<InputNumber
className="w-full"
value={settings.tableWidth}
onChange={(c) => {
if (c < 180) return;
setSettings((prev) => ({ ...prev, tableWidth: c }));
}}
/>
);
}
2 changes: 2 additions & 0 deletions src/context/SettingsContext.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { createContext, useState } from "react";
import { tableWidth } from "../data/constants";

export const SettingsContext = createContext(null);

Expand All @@ -11,6 +12,7 @@ export default function SettingsContextProvider({ children }) {
autosave: true,
panning: true,
showCardinality: true,
tableWidth: tableWidth,
});

return (
Expand Down
1 change: 1 addition & 0 deletions src/data/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export const MODAL = {
SAVEAS: 6,
NEW: 7,
IMPORT_SRC: 8,
TABLE_WIDTH: 9,
};

export const STATUS = {
Expand Down
8 changes: 2 additions & 6 deletions src/utils/calcPath.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import {
tableFieldHeight,
tableHeaderHeight,
tableWidth,
} from "../data/constants";
import { tableFieldHeight, tableHeaderHeight } from "../data/constants";

export function calcPath(r, zoom = 1) {
export function calcPath(r, tableWidth = 200, zoom = 1) {
const width = tableWidth * zoom;
let x1 = r.startTable.x;
let y1 =
Expand Down
2 changes: 2 additions & 0 deletions src/utils/modalTitles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export const getModalTitle = (modal) => {
return "Save as";
case MODAL.NEW:
return "Create new diagram";
case MODAL.TABLE_WIDTH:
return "Set the table width";
default:
return "";
}
Expand Down
Loading