Merge pull request #23 from starwit/Removed_Fullscreen_Button

Removed Fullscreen Icon and all Routines

Author: witchpou

package-lock.json

@@ -22,7 +22,6 @@
     "moment": "^2.29.4",
     "prop-types": "^15.8.1",
     "react-draggable": "^4.4.6",
-    "react-full-screen": "^1.1.1",
     "react-hotkeys": "^2.0.0",
     "react-i18next": "^14.1.0",
     "react-remove-scroll": "^2.5.9",

package.json

@@ -48,7 +48,6 @@ export const Annotator = ({
   hidePrev,
   hideClone,
   hideSettings,
-  hideFullScreen,
   hideSave,
   enabledRegionProps = ["class", "name"],
   userReducer
@@ -151,7 +150,6 @@ export const Annotator = ({
         hidePrev={hidePrev}
         hideClone={hideClone}
         hideSettings={hideSettings}
-        hideFullScreen={hideFullScreen}
         hideSave={hideSave}
         enabledRegionProps={enabledRegionProps}
       />
@@ -195,7 +193,6 @@ Annotator.propTypes = {
   hidePrev: PropTypes.bool,
   hideClone: PropTypes.bool,
   hideSettings: PropTypes.bool,
-  hideFullScreen: PropTypes.bool,
   hideSave: PropTypes.bool,
   enabledRegionProps: PropTypes.arrayOf(PropTypes.string),
   userReducer: PropTypes.func

src/Annotator/index.jsx

@@ -846,13 +846,6 @@ export default (state, action) => {
         case "help": {
           return state
         }
-        case "fullscreen": {
-          return setIn(state, ["fullScreen"], true)
-        }
-        case "exit fullscreen":
-        case "window": {
-          return setIn(state, ["fullScreen"], false)
-        }
         case "hotkeys": {
           return state
         }

src/Annotator/reducers/general-reducer.js

@@ -15,7 +15,6 @@ import {
   faTag,
   faVectorSquare
 } from "@fortawesome/free-solid-svg-icons"
-import FullscreenIcon from "@mui/icons-material/Fullscreen"
 import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew"
 
 const faStyle = { marginTop: 4, width: 16, height: 16, marginBottom: 4 }
@@ -69,8 +68,7 @@ export const iconDictionary = {
   "modify-allowed-area": () => (
     <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faEdit} />
   ),
-  "create-keypoints": AccessibilityNewIcon,
-  window: FullscreenIcon,
+  "create-keypoints": AccessibilityNewIcon
 }
 
 export default iconDictionary

src/MainLayout/icon-dictionary.jsx

@@ -1,6 +1,5 @@
 // @flow
 
-import {FullScreen, useFullScreenHandle} from "react-full-screen"
 import React, {useCallback, useRef} from "react"
 import {createTheme, styled, ThemeProvider} from "@mui/material/styles"
 
@@ -24,7 +23,6 @@ import {useSettings} from "../SettingsProvider"
 import {withHotKeys} from "react-hotkeys"
 import {Save} from "@mui/icons-material"
 
-// import Fullscreen from "../Fullscreen"
 
 const emptyArr = []
 const theme = createTheme()
@@ -35,15 +33,6 @@ const HotkeyDiv = withHotKeys(({hotKeys, children, divRef, ...props}) => (
   </div>
 ))
 
-const FullScreenContainer = styled("div")(({theme}) => ({
-  width: "100%",
-  height: "100%",
-  "& .fullscreen": {
-    width: "100%",
-    height: "100%",
-  },
-}))
-
 export const MainLayout = ({
   state,
   dispatch,
@@ -55,12 +44,10 @@ export const MainLayout = ({
   hidePrev = false,
   hideClone = false,
   hideSettings = false,
-  hideFullScreen = false,
   hideSave = false,
   enabledRegionProps,
 }) => {
   const settings = useSettings()
-  const fullScreenHandle = useFullScreenHandle()
 
   const memoizedActionFns = useRef({})
   const action = (type, ...params) => {
@@ -179,44 +166,25 @@ export const MainLayout = ({
       enabledRegionProps={enabledRegionProps}
     />
   )
-
   const onClickHeaderItem = useEventCallback((item) => {
-    if (item.name === "Fullscreen") {
-      fullScreenHandle.enter()
-    } else if (item.name === "Window") {
-      fullScreenHandle.exit()
-    }
     dispatch({type: "HEADER_BUTTON_CLICKED", buttonName: item.name})
   })
-
   const debugModeOn = Boolean(window.localStorage.$ANNOTATE_DEBUG_MODE && state)
   const nextImageHasRegions =
     !nextImage || (nextImage.regions && nextImage.regions.length > 0)
 
   return (
     <ThemeProvider theme={theme}>
-      <FullScreenContainer>
-        <FullScreen
-          handle={fullScreenHandle}
-          onChange={(open) => {
-            if (!open) {
-              fullScreenHandle.exit()
-              action("HEADER_BUTTON_CLICKED", "buttonName")("Window")
-            }
-          }}
-        >
           <HotkeyDiv
             tabIndex={-1}
             divRef={innerContainerRef}
             onMouseDown={refocusOnMouseEvent}
             onMouseOver={refocusOnMouseEvent}
             allowChanges
             handlers={hotkeyHandlers}
-            className={state.fullScreen ? "Fullscreen" : ""}
             style={styles.container}
           >
             <Workspace
-              allowFullscreen
               iconDictionary={iconDictionary}
               hideHeader={hideHeader}
               hideHeaderText={hideHeaderText}
@@ -245,10 +213,6 @@ export const MainLayout = ({
                 !nextImageHasRegions &&
                 activeImage.regions && {name: "Clone"},
                 !hideSettings && {name: "Settings"},
-                !hideFullScreen &&
-                (state.fullScreen
-                  ? {name: "Window"}
-                  : {name: "Fullscreen"}),
                 !hideSave && {name: "Save", icon: <Save />},
               ].filter(Boolean)}
               onClickHeaderItem={onClickHeaderItem}
@@ -310,8 +274,6 @@ export const MainLayout = ({
               {canvas}
             </Workspace>
           </HotkeyDiv>
-        </FullScreen>
-      </FullScreenContainer>
     </ThemeProvider>
   )
 }

src/MainLayout/index.jsx

@@ -9,14 +9,6 @@ export default {
     maxHeight: "100vh",
     backgroundColor: "#fff",
     overflow: "hidden",
-    "&.fullscreen": {
-      position: "absolute",
-      zIndex: 99999,
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0,
-    },
   },
   headerTitle: {
     fontWeight: "bold",

src/MainLayout/styles.js

@@ -4,7 +4,6 @@ import PlayIcon from "@mui/icons-material/PlayArrow"
 import PauseIcon from "@mui/icons-material/Pause"
 import SettingsIcon from "@mui/icons-material/Settings"
 import HelpIcon from "@mui/icons-material/Help"
-import FullscreenIcon from "@mui/icons-material/Fullscreen"
 import ExitIcon from "@mui/icons-material/ExitToApp"
 import QueuePlayNextIcon from "@mui/icons-material/QueuePlayNext"
 import HotkeysIcon from "@mui/icons-material/Keyboard"
@@ -20,7 +19,6 @@ export const iconMapping = {
   settings: SettingsIcon,
   options: SettingsIcon,
   help: HelpIcon,
-  fullscreen: FullscreenIcon,
   exit: ExitIcon,
   quit: ExitIcon,
   save: ExitIcon,