Add presentation mode

src/components/ControlPanel.jsx

@@ -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" />

src/pages/Editor.jsx

@@ -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,
+    toolbar: true,
-    notes: 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={
+                            className="flex h-full"
-                              layout.header
-                                ? `flex h-[calc(100vh-120px)]`
-                                : `flex h-[calc(100vh-52px)]`
-                            }
                             onMouseUp={() => setResize(false)}
                             onMouseMove={dragHandler}
                           >
@@ -725,7 +719,49 @@ export default function Editor() {
                                 width={width}
                               />
                             )}
-                            <Canvas state={state} setState={setState} />
+                            <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>