Merge pull request #135 from vsn4ik/fullscreen-indicator

Fullscreen native indicator

src/App.jsx

@@ -7,7 +7,7 @@ import Shortcuts from "./pages/Shortcuts";
 import Templates from "./pages/Templates";
 import LandingPage from "./pages/LandingPage";
 import SettingsContextProvider from "./context/SettingsContext";
-import useSettings from "./hooks/useSettings";
+import { useSettings } from "./hooks";
 import NotFound from "./pages/NotFound";
 
 export default function App() {

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")}

src/context/AreasContext.jsx

@@ -1,8 +1,6 @@
 import { createContext, useState } from "react";
 import { Action, ObjectType, defaultBlue } from "../data/constants";
-import useUndoRedo from "../hooks/useUndoRedo";
+import { useUndoRedo, useTransform, useSelect } from "../hooks";
-import useTransform from "../hooks/useTransform";
-import useSelect from "../hooks/useSelect";
 import { Toast } from "@douyinfe/semi-ui";
 import { useTranslation } from "react-i18next";
 

src/context/DiagramContext.jsx

@@ -1,8 +1,6 @@
 import { createContext, useState } from "react";
 import { Action, DB, ObjectType, defaultBlue } from "../data/constants";
-import useTransform from "../hooks/useTransform";
+import { useTransform, useUndoRedo, useSelect } from "../hooks";
-import useUndoRedo from "../hooks/useUndoRedo";
-import useSelect from "../hooks/useSelect";
 import { Toast } from "@douyinfe/semi-ui";
 import { useTranslation } from "react-i18next";
 

src/context/LayoutContext.jsx

@@ -8,7 +8,6 @@ export default function LayoutContextProvider({ children }) {
     sidebar: true,
     issues: true,
     toolbar: true,
-    fullscreen: false,
   });
 
   return (

src/context/NotesContext.jsx

@@ -1,8 +1,6 @@
 import { createContext, useState } from "react";
-import useTransform from "../hooks/useTransform";
 import { Action, ObjectType, defaultNoteTheme } from "../data/constants";
-import useUndoRedo from "../hooks/useUndoRedo";
+import { useUndoRedo, useTransform, useSelect } from "../hooks";
-import useSelect from "../hooks/useSelect";
 import { Toast } from "@douyinfe/semi-ui";
 import { useTranslation } from "react-i18next";
 

src/context/TypesContext.jsx

@@ -1,6 +1,6 @@
 import { createContext, useState } from "react";
 import { Action, ObjectType } from "../data/constants";
-import useUndoRedo from "../hooks/useUndoRedo";
+import { useUndoRedo } from "../hooks";
 import { Toast } from "@douyinfe/semi-ui";
 import { useTranslation } from "react-i18next";
 

src/hooks/index.js

@@ -1,5 +1,6 @@
 export { default as useAreas } from "./useAreas";
 export { default as useCanvas } from "./useCanvas";
+export { default as useFullscreen } from "./useFullscreen";
 export { default as useLayout } from "./useLayout";
 export { default as useNotes } from "./useNotes";
 export { default as useSaveState } from "./useSaveState";

src/hooks/useFullscreen.js

@@ -0,0 +1,16 @@
+import { useState } from "react";
+import { useEventListener } from "usehooks-ts";
+
+export default function useFullscreen() {
+  const [value, setValue] = useState(() => {
+    return document.fullscreenElement === document.documentElement;
+  });
+
+  function handleFullscreenChange() {
+    setValue(document.fullscreenElement === document.documentElement);
+  }
+
+  useEventListener("fullscreenchange", handleFullscreenChange, document);
+
+  return value;
+}