titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #24 from drawdb-io/change-tablewidth

Browse Source 
Add a setting to resize table width (#21)
This commit is contained in:
dot 2024-04-10 06:53:18 +03:00 committed by GitHub
commit d35461dbd3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 65 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/EditorCanvas/Relationship.jsx
View File

@ -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;
@ -51,7 +51,8 @@ export default function Relationship({ data }) {
<g className="select-none group">
<path
ref={pathRef}
d={calcPath({
d={calcPath(
{
...data,
startTable: {
x: tables[data.startTableId].x,
@ -61,7 +62,9 @@ export default function Relationship({ data }) {
x: tables[data.endTableId].x,
y: tables[data.endTableId].y,
},
})}
},
settings.tableWidth,
)}
stroke="gray"
className="group-hover:stroke-sky-700"
fill="none"

2
src/components/EditorCanvas/Table.jsx
View File

@ -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}

39
src/components/EditorHeader/ControlPanel.jsx
View File

@ -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, {
@ -209,7 +209,7 @@ export default function ControlPanel({
...index,
...a.undo,
}
: index
: index,
),
});
} else if (a.component === "index_delete") {
@ -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") {
@ -256,7 +256,7 @@ export default function ControlPanel({
return { ...t, fields: temp };
}
return t;
})
}),
);
} else if (a.component === "self") {
updateType(a.tid, a.undo);
@ -388,7 +388,7 @@ export default function ControlPanel({
};
}
return table;
})
}),
);
} else if (a.component === "index") {
updateTable(a.tid, {
@ -398,7 +398,7 @@ export default function ControlPanel({
...index,
...a.redo,
}
: index
: index,
),
});
} else if (a.component === "index_delete") {
@ -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") {
@ -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") {
@ -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 = () => {
@ -762,7 +762,7 @@ export default function ControlPanel({
data: dataUrl,
extension: "jpeg",
}));
}
},
);
setModal(MODAL.IMG);
},
@ -780,7 +780,7 @@ export default function ControlPanel({
title: title,
},
null,
2
2,
);
setExportData((prev) => ({
...prev,
@ -799,7 +799,7 @@ export default function ControlPanel({
data: dataUrl,
extension: "svg",
}));
}
},
);
setModal(MODAL.IMG);
},
@ -818,7 +818,7 @@ export default function ControlPanel({
0,
0,
canvas.offsetWidth,
canvas.offsetHeight
canvas.offsetHeight,
);
doc.save(`${exportData.filename}.pdf`);
});
@ -838,7 +838,7 @@ export default function ControlPanel({
types: types,
},
null,
2
2,
);
const blob = new Blob([result], {
type: "text/plain;charset=utf-8",
@ -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()
@ -1389,7 +1392,7 @@ export default function ControlPanel({
>
{Object.keys(e)[0]}
</Dropdown.Item>
)
),
)}
</Dropdown.Menu>
}

7
src/components/EditorHeader/Modal/Modal.jsx
View File

@ -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,
@ -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;
}
@ -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: {
@ -259,6 +260,8 @@ export default function Modal({
</div>
);
}
case MODAL.TABLE_WIDTH:
return <SetTableWidth />;
default:
return <></>;
}

17
src/components/EditorHeader/Modal/SetTableWidth.jsx Normal file
View File

@ -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
src/context/SettingsContext.jsx
View File

@ -1,4 +1,5 @@
import { createContext, useState } from "react";
import { tableWidth } from "../data/constants";
export const SettingsContext = createContext(null);
@ -11,6 +12,7 @@ export default function SettingsContextProvider({ children }) {
autosave: true,
panning: true,
showCardinality: true,
tableWidth: tableWidth,
});
return (

1
src/data/constants.js
View File

@ -110,6 +110,7 @@ export const MODAL = {
SAVEAS: 6,
NEW: 7,
IMPORT_SRC: 8,
TABLE_WIDTH: 9,
};
export const STATUS = {

8
src/utils/calcPath.js
View File

@ -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 =

2
src/utils/modalTitles.js
View File

@ -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 "";
}