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

Add presentation mode

Browse Source
This commit is contained in:
1ilit 2024-02-03 13:48:07 +02:00
parent 6985eb2fdc
commit f9dd80f39c
2 changed files with 61 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/ControlPanel.jsx
View File

@ -1067,6 +1067,17 @@ export default function ControlPanel({
function: viewStrictMode,
shortcut: "Ctrl+Shift+M",
},
"Presentation mode": {
function: () => {
setLayout(prev => ({
...prev,
header: false,
sidebar: false,
toolbar: false,
}));
enterFullscreen();
}
},
"Field summary": {
function: viewFieldSummary,
shortcut: "Ctrl+Shift+F",
@ -1477,8 +1488,6 @@ export default function ControlPanel({
const endX = tables[endTableId].x + 15;
const endY = tables[endTableId].y + endFieldId * 36 + 69;
relationship.mandetory = false;
relationship.name = startTable + "_" + startField + "_fk";
relationship.startTableId = startTableId;
relationship.startFieldId = startFieldId;
@ -1908,7 +1917,7 @@ export default function ControlPanel({
return (
<>
{layout.header && header()}
{toolbar()}
{layout.toolbar && toolbar()}
<Modal
title={getModalTitle()}
visible={visible !== MODAL.NONE}
@ -2028,7 +2037,7 @@ export default function ControlPanel({
function toolbar() {
return (
<div className="py-1 px-5 flex justify-between items-center rounded-xl my-1 sm:mx-1 xl:mx-6 select-none overflow-x-hidden toolbar-theme">
<div className="py-1.5 px-5 flex justify-between items-center rounded-xl my-1 sm:mx-1 xl:mx-6 select-none overflow-hidden toolbar-theme">
<div className="flex justify-start items-center">
{layoutDropdown()}
<Divider layout="vertical" margin="8px" />

58
src/pages/Editor.jsx
View File

@ -11,6 +11,8 @@ import {
State,
} from "../data/data";
import { db } from "../data/db";
import { Divider, Tooltip } from "@douyinfe/semi-ui";
import { exitFullscreen } from "../utils";
export const LayoutContext = createContext();
export const TableContext = createContext();
@ -42,12 +44,8 @@ export default function Editor() {
header: true,
sidebar: true,
services: true,
tables: true,
areas: true,
relationships: true,
issues: true,
editor: true,
notes: true,
toolbar: true,
fullscreen: false,
});
const [settings, setSettings] = useState({
@ -698,7 +696,7 @@ export default function Editor() {
deleteType,
}}
>
<div className="h-[100vh] overflow-hidden theme">
<div className="h-[100vh] flex flex-col overflow-hidden theme">
<ControlPanel
diagramId={id}
setDiagramId={setId}
@ -710,11 +708,7 @@ export default function Editor() {
setLastSaved={setLastSaved}
/>
<div
className={
layout.header
? `flex h-[calc(100vh-120px)]`
: `flex h-[calc(100vh-52px)]`
}
className="flex h-full"
onMouseUp={() => setResize(false)}
onMouseMove={dragHandler}
>
@ -725,7 +719,49 @@ export default function Editor() {
width={width}
/>
)}
<div className="relative w-full h-full">
<Canvas state={state} setState={setState} />
{
!(layout.sidebar || layout.toolbar || layout.header) &&
<div className="fixed right-5 bottom-4 flex gap-2">
<div className="popover-theme flex rounded-lg items-center">
<button
className="px-3 py-2"
onClick={() =>
setSettings((prev) => ({ ...prev, zoom: prev.zoom / 1.2 }))
}>
<i className="bi bi-dash-lg"></i>
</button>
<Divider align="center" layout="vertical" />
<div className="px-3 py-2">{parseInt(settings.zoom * 100)}%</div>
<Divider align="center" layout="vertical" />
<button
className="px-3 py-2"
onClick={() =>
setSettings((prev) => ({ ...prev, zoom: prev.zoom * 1.2 }))
}>
<i className="bi bi-plus-lg"></i>
</button>
</div>
<Tooltip content="Exit">
<button
className="px-3 py-2 rounded-lg popover-theme"
onClick={() => {
setLayout(prev => ({
...prev,
sidebar: true,
toolbar: true,
header: true,
}));
exitFullscreen();
}}
>
<i className="bi bi-fullscreen-exit"></i>
</button>
</Tooltip>
</div>
}
</div>
</div>
</div>
</TypeContext.Provider>