Handle entering and exiting fullscreen

src/components/control_panel.jsx

@@ -21,6 +21,7 @@ import {
 } from "@douyinfe/semi-ui";
 import { toPng, toJpeg, toSvg } from "html-to-image";
 import { saveAs } from "file-saver";
+import { enterFullscreen, exitFullscreen } from "../utils";
 
 export default function ControlPanel(props) {
   const [visible, setVisible] = useState(false);
@@ -193,18 +194,7 @@ export default function ControlPanel(props) {
       },
       Fullscreen: {
         children: [],
-        function: () => {
+        function: enterFullscreen,
-          const element = document.documentElement;
-          if (element.requestFullscreen) {
-            element.requestFullscreen();
-          } else if (element.mozRequestFullScreen) {
-            element.mozRequestFullScreen();
-          } else if (element.webkitRequestFullscreen) {
-            element.webkitRequestFullscreen();
-          } else if (element.msRequestFullscreen) {
-            element.msRequestFullscreen();
-          }
-        },
       },
     },
     Logs: {
@@ -247,9 +237,7 @@ export default function ControlPanel(props) {
 
   return (
     <>
-      {props.layout.header && (
+      {props.layout.header && header()}
-        header()
-      )}
       <div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 mx-6 text-slate-700 select-none">
         <div className="flex justify-start items-center">
           {layoutDropdown()}
@@ -396,14 +384,16 @@ export default function ControlPanel(props) {
   );
 
   function header() {
-    return <nav className="flex justify-between pt-1 items-center whitespace-nowrap">
+    return (
+      <nav className="flex justify-between pt-1 items-center whitespace-nowrap">
         <div className="flex justify-start items-center text-slate-800">
           <Link to="/">
             <img
               width={54}
               src={icon}
               alt="logo"
-            className="ms-8 min-w-[54px]" />
+              className="ms-8 min-w-[54px]"
+            />
           </Link>
           <div className="ms-1 mt-1">
             <div className="text-xl ms-3">Project1 / Untitled</div>
@@ -414,7 +404,8 @@ export default function ControlPanel(props) {
                     key={category}
                     position="bottomLeft"
                     style={{ width: "200px" }}
-                  render={<Dropdown.Menu>
+                    render={
+                      <Dropdown.Menu>
                         {Object.keys(menu[category]).map((item, index) => {
                           if (menu[category][item].children.length > 0) {
                             return (
@@ -422,7 +413,8 @@ export default function ControlPanel(props) {
                                 style={{ width: "120px" }}
                                 key={item}
                                 position={"rightTop"}
-                            render={<Dropdown.Menu>
+                                render={
+                                  <Dropdown.Menu>
                                     {menu[category][item].children.map(
                                       (e, i) => (
                                         <Dropdown.Item
@@ -433,7 +425,8 @@ export default function ControlPanel(props) {
                                         </Dropdown.Item>
                                       )
                                     )}
-                            </Dropdown.Menu>}
+                                  </Dropdown.Menu>
+                                }
                               >
                                 <Dropdown.Item
                                   style={{
@@ -458,7 +451,8 @@ export default function ControlPanel(props) {
                             </Dropdown.Item>
                           );
                         })}
-                  </Dropdown.Menu>}
+                      </Dropdown.Menu>
+                    }
                   >
                     <div className="px-3 py-1 hover:bg-gray-100 rounded">
                       {category}
@@ -502,7 +496,8 @@ export default function ControlPanel(props) {
             BZ
           </Avatar>
         </div>
-    </nav>;
+      </nav>
+    );
   }
 
   function layoutDropdown() {
@@ -657,7 +652,26 @@ export default function ControlPanel(props) {
               Services
             </Dropdown.Item>
             <Dropdown.Divider />
-            <Dropdown.Item icon={<IconCheckboxTick />}>
+            <Dropdown.Item
+              icon={
+                props.layout.fullscreen ? (
+                  <IconCheckboxTick />
+                ) : (
+                  <div className="px-2"></div>
+                )
+              }
+              onClick={() => {
+                if (props.layout.fullscreen) {
+                  exitFullscreen();
+                } else {
+                  enterFullscreen();
+                }
+                props.setLayout((prev) => ({
+                  ...prev,
+                  fullscreen: !prev.fullscreen,
+                }));
+              }}
+            >
               Fullscreen
             </Dropdown.Item>
           </Dropdown.Menu>

src/pages/editor.jsx

@@ -22,6 +22,7 @@ export default function Editor(props) {
     issues: true,
     editor: true,
     shapes: true,
+    fullscreen: false,
   });
 
   const dragHandler = (e) => {

src/utils/index.js

@@ -0,0 +1,26 @@
+const enterFullscreen = () => {
+  const element = document.documentElement;
+  if (element.requestFullscreen) {
+    element.requestFullscreen();
+  } else if (element.mozRequestFullScreen) {
+    element.mozRequestFullScreen();
+  } else if (element.webkitRequestFullscreen) {
+    element.webkitRequestFullscreen();
+  } else if (element.msRequestFullscreen) {
+    element.msRequestFullscreen();
+  }
+};
+
+const exitFullscreen = () => {
+  if (document.exitFullscreen) {
+    document.exitFullscreen();
+  } else if (document.mozCancelFullScreen) {
+    document.mozCancelFullScreen();
+  } else if (document.webkitExitFullscreen) {
+    document.webkitExitFullscreen();
+  } else if (document.msExitFullscreen) {
+    document.msExitFullscreen();
+  }
+};
+
+export { enterFullscreen, exitFullscreen };