fullscreen indicator

src/components/EditorHeader/ControlPanel.jsx

@@ -56,8 +56,9 @@ import {
   useNotes,
   useAreas,
   useEnums,
+  useFullscreen,
 } from "../../hooks";
-import { enterFullscreen } from "../../utils/fullscreen";
+import { enterFullscreen, exitFullscreen } from "../../utils/fullscreen";
 import { dataURItoBlob } from "../../utils/utils";
 import { IconAddArea, IconAddNote, IconAddTable } from "../../icons";
 import LayoutDropdown from "./LayoutDropdown";
@@ -682,6 +683,7 @@ export default function ControlPanel({
   const save = () => setSaveState(State.SAVING);
   const open = () => setModal(MODAL.OPEN);
   const saveDiagramAs = () => setModal(MODAL.SAVEAS);
+  const fullscreen = useFullscreen();
 
   const menu = {
     file: {
@@ -1204,7 +1206,12 @@ export default function ControlPanel({
         shortcut: "Ctrl+Down/Wheel",
       },
       fullscreen: {
-        function: enterFullscreen,
+        state: fullscreen ? (
+          <i className="bi bi-toggle-on" />
+        ) : (
+          <i className="bi bi-toggle-off" />
+        ),
+        function: fullscreen ? exitFullscreen : enterFullscreen,
       },
     },
     settings: {

src/components/EditorHeader/LayoutDropdown.jsx

@@ -4,11 +4,12 @@ import {
   IconRowsStroked,
 } from "@douyinfe/semi-icons";
 import { Dropdown } from "@douyinfe/semi-ui";
-import { useLayout } from "../../hooks";
+import { useFullscreen, useLayout } from "../../hooks";
 import { enterFullscreen, exitFullscreen } from "../../utils/fullscreen";
 import { useTranslation } from "react-i18next";
 
 export default function LayoutDropdown() {
+  const fullscreen = useFullscreen();
   const { layout, setLayout } = useLayout();
   const { t } = useTranslation();
 
@@ -47,14 +48,15 @@ export default function LayoutDropdown() {
           </Dropdown.Item>
           <Dropdown.Divider />
           <Dropdown.Item
-            icon={<div className="px-2" />}
+            icon={
+              fullscreen ? <IconCheckboxTick /> : <div className="px-2" />
+            }
             onClick={() => {
-              if (layout.fullscreen) {
+              if (fullscreen) {
                 exitFullscreen();
               } else {
                 enterFullscreen();
               }
-              invertLayout("fullscreen");
             }}
           >
             {t("fullscreen")}