From 9f66df90b1e1799137ed38e63e9d4d7d65fe52e6 Mon Sep 17 00:00:00 2001
From: Vasilii A <3757319+vsn4ik@users.noreply.github.com>
Date: Fri, 14 Jun 2024 16:27:44 +0000
Subject: [PATCH] fullscreen indicator

---
 src/App.jsx                                    |  2 +-
 src/components/EditorHeader/ControlPanel.jsx   | 11 +++++++++--
 src/components/EditorHeader/LayoutDropdown.jsx | 10 ++++++----
 src/context/AreasContext.jsx                   |  4 +---
 src/context/DiagramContext.jsx                 |  4 +---
 src/context/LayoutContext.jsx                  |  1 -
 src/context/NotesContext.jsx                   |  4 +---
 src/context/TypesContext.jsx                   |  2 +-
 src/hooks/index.js                             |  1 +
 src/hooks/useFullscreen.js                     | 16 ++++++++++++++++
 10 files changed, 37 insertions(+), 18 deletions(-)
 create mode 100644 src/hooks/useFullscreen.js

diff --git a/src/App.jsx b/src/App.jsx
index 7268dce..65aebc6 100644
--- a/src/App.jsx
+++ b/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() {
diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index 2cc81aa..ba92460 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/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: {
diff --git a/src/components/EditorHeader/LayoutDropdown.jsx b/src/components/EditorHeader/LayoutDropdown.jsx
index 804ea7a..a9c3629 100644
--- a/src/components/EditorHeader/LayoutDropdown.jsx
+++ b/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")}
diff --git a/src/context/AreasContext.jsx b/src/context/AreasContext.jsx
index 551b8b8..cc020ba 100644
--- a/src/context/AreasContext.jsx
+++ b/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 useTransform from "../hooks/useTransform";
-import useSelect from "../hooks/useSelect";
+import { useUndoRedo, useTransform, useSelect } from "../hooks";
 import { Toast } from "@douyinfe/semi-ui";
 import { useTranslation } from "react-i18next";
 
diff --git a/src/context/DiagramContext.jsx b/src/context/DiagramContext.jsx
index e77bd5f..ffa4997 100644
--- a/src/context/DiagramContext.jsx
+++ b/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 useUndoRedo from "../hooks/useUndoRedo";
-import useSelect from "../hooks/useSelect";
+import { useTransform, useUndoRedo, useSelect } from "../hooks";
 import { Toast } from "@douyinfe/semi-ui";
 import { useTranslation } from "react-i18next";
 
diff --git a/src/context/LayoutContext.jsx b/src/context/LayoutContext.jsx
index 60dcdab..cfb4836 100644
--- a/src/context/LayoutContext.jsx
+++ b/src/context/LayoutContext.jsx
@@ -8,7 +8,6 @@ export default function LayoutContextProvider({ children }) {
     sidebar: true,
     issues: true,
     toolbar: true,
-    fullscreen: false,
   });
 
   return (
diff --git a/src/context/NotesContext.jsx b/src/context/NotesContext.jsx
index 6df2ddf..712b0d1 100644
--- a/src/context/NotesContext.jsx
+++ b/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 useSelect from "../hooks/useSelect";
+import { useUndoRedo, useTransform, useSelect } from "../hooks";
 import { Toast } from "@douyinfe/semi-ui";
 import { useTranslation } from "react-i18next";
 
diff --git a/src/context/TypesContext.jsx b/src/context/TypesContext.jsx
index 539835e..c74dcbe 100644
--- a/src/context/TypesContext.jsx
+++ b/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";
 
diff --git a/src/hooks/index.js b/src/hooks/index.js
index 5dd76a9..e21eee1 100644
--- a/src/hooks/index.js
+++ b/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";
diff --git a/src/hooks/useFullscreen.js b/src/hooks/useFullscreen.js
new file mode 100644
index 0000000..041cce6
--- /dev/null
+++ b/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;
+}