From a2aa12f59815499944ab2046be11289e9f367d06 Mon Sep 17 00:00:00 2001 From: 1ilit Date: Tue, 19 Sep 2023 15:48:34 +0300 Subject: [PATCH] Manage layout --- src/components/control_panel.jsx | 439 ++++++++++++++++++++----------- src/components/relationship.jsx | 2 +- src/components/table.jsx | 34 +-- src/pages/editor.jsx | 42 +-- 4 files changed, 322 insertions(+), 195 deletions(-) diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx index ee665f1..de8f003 100644 --- a/src/components/control_panel.jsx +++ b/src/components/control_panel.jsx @@ -22,9 +22,7 @@ import { import { toPng, toJpeg, toSvg } from "html-to-image"; import { saveAs } from "file-saver"; -export default function ControlPanel() { - const [showToolBar, setShowToolBar] = useState(true); - +export default function ControlPanel(props) { const [visible, setVisible] = useState(false); const [dataUrl, setDataUrl] = useState(""); const [filename, setFilename] = useState( @@ -249,157 +247,12 @@ export default function ControlPanel() { return ( <> - {showToolBar && ( - + {props.layout.header && ( + header() )}
- - - ) : ( -
- ) - } - onClick={() => setShowToolBar((prev) => !prev)} - > - Header - - }> - Overview - - }> - Services - - - }> - Fullscreen - - - } - trigger="click" - > -
- -
- + {layoutDropdown()}
-
); + + function header() { + return ; + } + + function layoutDropdown() { + return ( + + + ) : ( +
+ ) + } + onClick={() => + props.setLayout((prev) => ({ + ...prev, + header: !prev.header, + })) + } + > + Header + + + + ) : ( +
+ ) + } + onClick={() => + props.setLayout((prev) => ({ + ...prev, + tables: !prev.tables, + })) + } + > + Tables + + + ) : ( +
+ ) + } + onClick={() => + props.setLayout((prev) => ({ + ...prev, + relationships: !prev.relationships, + })) + } + > + Relationships + + + ) : ( +
+ ) + } + onClick={() => + props.setLayout((prev) => ({ + ...prev, + issues: !prev.issues, + })) + } + > + Issues + + + ) : ( +
+ ) + } + onClick={() => + props.setLayout((prev) => ({ + ...prev, + editor: !prev.editor, + })) + } + > + Editor + + + ) : ( +
+ ) + } + onClick={() => + props.setLayout((prev) => ({ + ...prev, + shapes: !prev.shapes, + })) + } + > + Shapes + + + } + > + + ) : ( +
+ ) + } + onClick={() => + props.setLayout((prev) => ({ + ...prev, + sidebar: !prev.sidebar, + })) + } + > + Sidebar + + + + ) : ( +
+ ) + } + onClick={() => + props.setLayout((prev) => ({ + ...prev, + services: !prev.services, + })) + } + > + Services + + + }> + Fullscreen + + + } + trigger="click" + > +
+ +
+ + ); + } } diff --git a/src/components/relationship.jsx b/src/components/relationship.jsx index d9d38cb..1c6b88d 100644 --- a/src/components/relationship.jsx +++ b/src/components/relationship.jsx @@ -5,7 +5,7 @@ export default function Relationship(props) { const calcPath = (x1, x2, y1, y2) => { let r = 16; const offsetX = 8; - const tableWidth = 240; + const tableWidth = 220; const midX = (x2 + x1 + tableWidth) / 2; const endX = x2 + tableWidth < x1 ? x2 + tableWidth - offsetX * 2 : x2; diff --git a/src/components/table.jsx b/src/components/table.jsx index 9cd286a..87a9fbb 100644 --- a/src/components/table.jsx +++ b/src/components/table.jsx @@ -93,7 +93,7 @@ export default function Table(props) { key={props.id} x={props.tableData.x} y={props.tableData.y} - width={240} + width={220} height={height} style={{ cursor: "move" }} onMouseDown={props.onMouseDown} @@ -111,34 +111,15 @@ export default function Table(props) {
- { -
e.preventDefault()} - onMouseEnter={() => - props.setOnRect({ - tableId: props.id, - field: -1, - }) - } - > -
setName(e.target.value)} - className={`p-1 select-text w-[100px] bg-gray-400 focus:bg-gray-200 ${ - false - ? "ring-2 ring-red-600" - : "focus:ring-2 focus:ring-sky-500 " - }`} - >{props.tableData.name}
-
- } +
+ {props.tableData.name} +
{isHovered && (