fix fullscreen, key issue

Author: seveibar

package.json

@@ -14,7 +14,7 @@
     "material-survey": "^1.0.34",
     "mmgc1-cpp": "^1.0.50",
     "moment": "^2.23.0",
-    "react-full-screen": "^0.2.4",
+    "react-full-screen": "^0.3.1",
     "react-hotkeys": "^2.0.0",
     "react-json-view": "^1.19.1",
     "react-markdown": "^4.0.6",

src/ImageCanvas/index.story.js

@@ -96,7 +96,6 @@ const events = {
 
   onChangeRegion: action("onChangeRegion"),
   onBeginRegionEdit: action("onBeginRegionEdit"),
-  onChangeRegion: action("onChangeRegion"),
   onCloseRegionEdit: action("onCloseRegionEdit"),
 
   onSelectRegion: action("onSelectRegion"),

src/MainLayout/index.js

@@ -10,7 +10,8 @@ import useKey from "use-key-hook"
 import classnames from "classnames"
 import { useSettings } from "../SettingsProvider"
 import SettingsDialog from "../SettingsDialog"
-import Fullscreen from "../Fullscreen"
+// import Fullscreen from "../Fullscreen"
+import { FullScreen, useFullScreenHandle } from "react-full-screen"
 import getActiveImage from "../Annotator/reducers/get-active-image"
 import useImpliedVideoRegions from "./use-implied-video-regions"
 import { useDispatchHotkeyHandlers } from "../ShortcutsManager"
@@ -55,6 +56,7 @@ export const MainLayout = ({
 }: Props) => {
   const classes = useStyles()
   const settings = useSettings()
+  const fullScreenHandle = useFullScreenHandle()
 
   const memoizedActionFns = useRef({})
   const action = (type: string, ...params: Array<string>) => {
@@ -165,6 +167,11 @@ export const MainLayout = ({
   })
 
   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 })
   })
 
@@ -173,11 +180,12 @@ export const MainLayout = ({
     !nextImage || (nextImage.regions && nextImage.regions.length > 0)
 
   return (
-    <Fullscreen
-      enabled={state.fullScreen}
+    <FullScreen
+      handle={fullScreenHandle}
       onChange={(open) => {
         if (!open) {
-          action("HEADER_BUTTON_CLICKED", "buttonName")("Exit Fullscreen")
+          fullScreenHandle.exit()
+          action("HEADER_BUTTON_CLICKED", "buttonName")("Window")
         }
       }}
     >
@@ -323,7 +331,7 @@ export const MainLayout = ({
           }
         />
       </HotkeyDiv>
-    </Fullscreen>
+    </FullScreen>
   )
 }
 

src/RegionShapes/index.js

@@ -24,8 +24,8 @@ const RegionComponents = {
         strokeWidth={2}
         x={0}
         y={0}
-        width={region.w * iw}
-        height={region.h * ih}
+        width={Math.max(region.w * iw, 0)}
+        height={Math.max(region.h * ih, 0)}
         stroke={colorAlpha(region.color, 0.75)}
         fill={colorAlpha(region.color, 0.25)}
       />
@@ -80,6 +80,7 @@ const RegionComponents = {
         />
         {points.map(({ x, y, angle }, i) => (
           <g
+            key={i}
             transform={`translate(${x * iw} ${y * ih}) rotate(${
               (-(angle || 0) * 180) / Math.PI
             })`}

yarn.lock

@@ -8419,7 +8419,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fscreen@^1.0.1:
+fscreen@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/fscreen/-/fscreen-1.0.2.tgz#c4c51d96d819d75a19d728e0df445f9be9bb984f"
   integrity sha1-xMUdltgZ11oZ1yjg30Rfm+m7mE8=
@@ -14459,13 +14459,12 @@ react-focus-lock@^2.1.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
-react-full-screen@^0.2.4:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/react-full-screen/-/react-full-screen-0.2.4.tgz#e5bda9535abb6523b65e0e46526c8f21be65ef7e"
-  integrity sha512-K6V87g/uopQnnebg6/jM7VL3FcurgCIQU4nTkzknbjGOT9XOOxr3XVwRweI8QPn1TFRZH7j5OpHanUdk5uYlBQ==
+react-full-screen@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/react-full-screen/-/react-full-screen-0.3.1.tgz#60bf7b1ab140348bcfee4f5c98e927b6a0766809"
+  integrity sha512-lguQkP+vqwyZGHsLXvM90d8Aktp4gTlPUzszYKuQ9YvxNXIXtu+BILdwr/T+j6P2jREvEppgV20UEauv/0WLDg==
   dependencies:
-    "@types/react" "*"
-    fscreen "^1.0.1"
+    fscreen "^1.0.2"
 
 react-github-btn@^1.1.1:
   version "1.1.1"