added modify allowed area icon

Author: seveibar

src/IconTools/index.js

@@ -52,6 +52,7 @@ const defaultTools = [
 export const IconTools = ({
   showTags,
   showMask,
+  modifyAllowedArea,
   selectedTool,
   onClickTool,
   enabledTools = defaultTools,
@@ -126,6 +127,13 @@ export const IconTools = ({
           name="Show / Hide Mask"
           icon={<FontAwesomeIcon size="xs" fixedWidth icon={faMask} />}
         />
+        <SmallToolButton
+          togglable
+          selected={modifyAllowedArea}
+          id="modify-allowed-area"
+          name="Modify Allowed Area"
+          icon={<FontAwesomeIcon size="xs" fixedWidth icon={faMask} />}
+        />
       </SelectedTool.Provider>
     </div>
   )

src/MainLayout/icon-dictionary.js

@@ -15,6 +15,7 @@ import {
   faHandPaper,
   faSearch,
   faMask,
+  faEdit,
 } from "@fortawesome/free-solid-svg-icons"
 import FullscreenIcon from "@material-ui/icons/Fullscreen"
 
@@ -63,6 +64,9 @@ export const iconDictionary = {
   "show-mask": () => (
     <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faMask} />
   ),
+  "modify-allowed-area": () => (
+    <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faEdit} />
+  ),
   window: FullscreenIcon,
 }
 

src/MainLayout/index.js

@@ -244,19 +244,23 @@ export const MainLayout = ({
             {
               name: "select",
               helperText: "Select",
+              alwaysShowing: true,
               selected: state.selectedTool,
             },
             {
               name: "pan",
               helperText: "Drag/Pan",
+              alwaysShowing: true,
             },
             {
               name: "zoom",
               helperText: "Zoom In/Out",
+              alwaysShowing: true,
             },
             {
               name: "show-tags",
               helperText: "Show / Hide Tags",
+              alwaysShowing: true,
             },
             {
               name: "create-point",
@@ -274,11 +278,20 @@ export const MainLayout = ({
               name: "create-expanding-line",
               helperText: "Add Expanding Line",
             },
-            {
+            state.fullImageSegmentationMode && {
               name: "show-mask",
+              alwaysShowing: true,
               helperText: "Show / Hide Mask",
             },
-          ]}
+            {
+              name: "modify-allowed-area",
+              helperText: "Modify Allowed Area",
+            },
+          ]
+            .filter(Boolean)
+            .filter(
+              (a) => a.alwaysShowing || state.enabledTools.includes(a.name)
+            )}
           rightSidebarItems={[
             debugModeOn && (
               <DebugBox state={debugModeOn} lastAction={state.lastAction} />

src/MainLayout/index.story.js

@@ -44,7 +44,7 @@ storiesOf("MainLayout", module)
           },
         ],
         mode: null,
-        enabledTools: [],
+        enabledTools: ["create-point", "create-polygon", "modify-allowed-area"],
         history: [{ name: "Reset Stuff", state: null, time: moment() }],
       }}
       dispatch={(a) => action(a.type)(a)}