fix header buttons, settings and fullscreen broken

Author: seveibar

package.json

@@ -18,7 +18,7 @@
     "react-hotkeys": "^2.0.0",
     "react-json-view": "^1.19.1",
     "react-markdown": "^4.0.6",
-    "react-material-workspace-layout": "^0.1.8",
+    "react-material-workspace-layout": "^0.1.13",
     "react-monaco-editor": "^0.25.1",
     "react-remove-scroll": "^2.0.4",
     "react-select": "^3.0.8",

src/FullImageSegmentationAnnotator/index.story.js

@@ -13,7 +13,7 @@ import FullImageSegmentationAnnotator from "./"
 
 storiesOf("FullImageSegmentationAnnotator.Basic", module)
   .add("Orange 2 Class", () => (
-    <div style={{ width: "100vw", height: "100vh" }}>
+    <div style={{ width: "95vw", height: "95vh" }}>
       <FullImageSegmentationAnnotator
         images={[
           {
@@ -59,7 +59,7 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
     </div>
   ))
   .add("S3 CORS domain", () => (
-    <div style={{ width: "100vw", height: "100vh" }}>
+    <div style={{ width: "95vw", height: "95vh" }}>
       <FullImageSegmentationAnnotator
         images={[
           {
@@ -90,7 +90,7 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
     </div>
   ))
   .add("Orange 3 Class", () => (
-    <div style={{ width: "100vw", height: "100vh" }}>
+    <div style={{ width: "95vw", height: "95vh" }}>
       <FullImageSegmentationAnnotator
         images={[
           {
@@ -120,7 +120,7 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
     </div>
   ))
   .add("Hard 1, 8 Class, Simple Mode", () => (
-    <div style={{ width: "100vw", height: "100vh" }}>
+    <div style={{ width: "95vw", height: "95vh" }}>
       <FullImageSegmentationAnnotator
         images={[
           {
@@ -135,7 +135,7 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
     </div>
   ))
   .add("Hard 1, 8 Class", () => (
-    <div style={{ width: "100vw", height: "100vh" }}>
+    <div style={{ width: "95vw", height: "95vh" }}>
       <FullImageSegmentationAnnotator
         images={[
           {
@@ -149,7 +149,7 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
     </div>
   ))
   .add("Hard 2, 8 Class", () => (
-    <div style={{ width: "100vw", height: "100vh" }}>
+    <div style={{ width: "95vw", height: "95vh" }}>
       <FullImageSegmentationAnnotator
         images={[
           {
@@ -163,7 +163,7 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
     </div>
   ))
   .add("Hard 3, 8 Class", () => (
-    <div style={{ width: "100vw", height: "100vh" }}>
+    <div style={{ width: "95vw", height: "95vh" }}>
       <FullImageSegmentationAnnotator
         images={[
           {

src/MainLayout/index.js

@@ -29,6 +29,7 @@ import TaskDescription from "../TaskDescriptionSidebarBox"
 import RegionSelector from "../RegionSelectorSidebarBox"
 import ImageSelector from "../ImageSelectorSidebarBox"
 import HistorySidebarBox from "../HistorySidebarBox"
+import useEventCallback from "use-event-callback"
 
 const emptyArr = []
 const useStyles = makeStyles(styles)
@@ -164,6 +165,14 @@ export const MainLayout = ({
     />
   )
 
+  const onClickIconSidebarItem = useEventCallback((item) => {
+    dispatch({ type: "SELECT_TOOL", selectedTool: item.name })
+  })
+
+  const onClickHeaderItem = useEventCallback((item) => {
+    dispatch({ type: "HEADER_BUTTON_CLICKED", buttonName: item.name })
+  })
+
   const debugModeOn = Boolean(window.localStorage.$ANNOTATE_DEBUG_MODE && state)
 
   return (
@@ -192,13 +201,18 @@ export const MainLayout = ({
         { name: "Fullscreen" },
         { name: "Save" },
       ].filter(Boolean)}
-      onClickHeaderItem={console.log}
-      onClickIconSidebarItem={console.log}
+      onClickHeaderItem={onClickHeaderItem}
+      onClickIconSidebarItem={onClickIconSidebarItem}
+      selectedTools={[
+        state.selectedTool,
+        state.showTags && "show-tags",
+        state.showMask && "show-mask",
+      ].filter(Boolean)}
       iconSidebarItems={[
         {
           name: "select",
           helperText: "Select",
-          selected: true,
+          selected: state.selectedTool,
         },
         {
           name: "pan",
@@ -256,7 +270,7 @@ export const MainLayout = ({
           />
         ),
         <RegionSelector
-          regions={activeImage ? activeImage.regions : null}
+          regions={activeImage ? activeImage.regions : emptyArr}
           onSelectRegion={action("SELECT_REGION", "region")}
           onDeleteRegion={action("DELETE_REGION", "region")}
           onChangeRegion={action("CHANGE_REGION", "region")}

yarn.lock

@@ -14522,10 +14522,10 @@ react-markdown@^4.0.6:
     unist-util-visit "^1.3.0"
     xtend "^4.0.1"
 
-react-material-workspace-layout@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/react-material-workspace-layout/-/react-material-workspace-layout-0.1.8.tgz#b81ca443d6a57b4668ce823c00c52d14d5556020"
-  integrity sha512-XgC7ucxKZ1YMxA3hMPAhrrsqcCG0oZ5NAC+ua2brkvr8io4u1Nrj5BFrzGIfpRqJIzO2BVOn4DOZJhpgXIQKOQ==
+react-material-workspace-layout@^0.1.13:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/react-material-workspace-layout/-/react-material-workspace-layout-0.1.13.tgz#b28d00598a0cabfdd2909b5c0c3c9c645010bb6a"
+  integrity sha512-D2ad99pyDxJOZexnjL/IQMqqrGpM8wqh3S2UCqMe/TeMy+9W8zMXgyce6VDUsU4jPEOB+16sVcohuIYWllwZGA==
   dependencies:
     "@material-ui/core" "^4.10.0"
     "@material-ui/icons" "^4.9.1"