Skip to content

Commit

Permalink
Merge pull request #24 from drawdb-io/change-tablewidth
Browse files Browse the repository at this point in the history 
Add a setting to resize table width (#21)
  • Loading branch information
@dott1e
dott1e authored Apr 10, 2024
2 parents 13897e7 + 895c1da commit d35461d
Show file tree
Hide file tree
Showing 9 changed files with 65 additions and 38 deletions.
25 changes: 14 additions & 11 deletions src/components/EditorCanvas/Relationship.jsx
View file
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
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
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
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
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
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
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
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
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

0 comments on commit d35461d

Please sign in to comment.