icon tools on sidebar

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.6",
+    "react-material-workspace-layout": "^0.1.8",
     "react-monaco-editor": "^0.25.1",
     "react-remove-scroll": "^2.0.4",
     "react-select": "^3.0.8",

src/MainLayout/icon-dictionary.js

@@ -1,5 +1,40 @@
 // @flow
 
-export const iconDictionary = {}
+import React from "react"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import {
+  faArrowsAlt,
+  faMousePointer,
+  faExpandArrowsAlt,
+  faGripLines,
+  faTag,
+  faPaintBrush,
+  faCrosshairs,
+  faDrawPolygon,
+  faVectorSquare,
+  faHandPaper,
+  faSearch,
+  faMask,
+} from "@fortawesome/free-solid-svg-icons"
+
+export const iconDictionary = {
+  select: () => <FontAwesomeIcon size="xs" fixedWidth icon={faMousePointer} />,
+  pan: () => <FontAwesomeIcon size="xs" fixedWidth icon={faHandPaper} />,
+  zoom: () => <FontAwesomeIcon size="xs" fixedWidth icon={faSearch} />,
+  "show-tags": () => <FontAwesomeIcon size="xs" fixedWidth icon={faTag} />,
+  "create-point": () => (
+    <FontAwesomeIcon size="xs" fixedWidth icon={faCrosshairs} />
+  ),
+  "create-box": () => (
+    <FontAwesomeIcon size="xs" fixedWidth icon={faVectorSquare} />
+  ),
+  "create-polygon": () => (
+    <FontAwesomeIcon size="xs" fixedWidth icon={faDrawPolygon} />
+  ),
+  "create-expanding-line": () => (
+    <FontAwesomeIcon size="xs" fixedWidth icon={faGripLines} />
+  ),
+  "show-mask": () => <FontAwesomeIcon size="xs" fixedWidth icon={faMask} />,
+}
 
 export default iconDictionary

src/MainLayout/index.js

@@ -30,6 +30,7 @@ import RegionSelector from "../RegionSelectorSidebarBox"
 import ImageSelector from "../ImageSelectorSidebarBox"
 import HistorySidebarBox from "../HistorySidebarBox"
 
+const emptyArr = []
 const useStyles = makeStyles(styles)
 
 const HotkeyDiv = withHotKeys(({ hotKeys, children, divRef, ...props }) => (
@@ -196,39 +197,40 @@ export const MainLayout = ({
       iconSidebarItems={[
         {
           name: "select",
-          toolTip: "Select",
+          helperText: "Select",
+          selected: true,
         },
         {
           name: "pan",
-          toolTip: "Drag/Pan",
+          helperText: "Drag/Pan",
         },
         {
           name: "zoom",
-          toolTip: "Zoom In/Out",
+          helperText: "Zoom In/Out",
         },
         {
           name: "show-tags",
-          toolTip: "Show / Hide Tags",
+          helperText: "Show / Hide Tags",
         },
         {
           name: "create-point",
-          toolTip: "Add Point",
+          helperText: "Add Point",
         },
         {
           name: "create-box",
-          toolTip: "Add Bounding Box",
+          helperText: "Add Bounding Box",
         },
         {
           name: "create-polygon",
-          toolTip: "Add Polygon",
+          helperText: "Add Polygon",
         },
         {
           name: "create-expanding-line",
-          toolTip: "Add Expanding Line",
+          helperText: "Add Expanding Line",
         },
         {
           name: "show-mask",
-          toolTip: "Show / Hide Mask",
+          helperText: "Show / Hide Mask",
         },
       ]}
       rightSidebarItems={[

src/RegionSelectorSidebarBox/index.js

@@ -160,8 +160,10 @@ const MemoRow = memo(
     prevProps.color === nextProps.color
 )
 
+const emptyArr = []
+
 export const RegionSelectorSidebarBox = ({
-  regions,
+  regions = emptyArr,
   onDeleteRegion,
   onChangeRegion,
   onSelectRegion,
@@ -203,7 +205,7 @@ const mapUsedRegionProperties = (r) => [
 
 export default memo(RegionSelectorSidebarBox, (prevProps, nextProps) =>
   isEqual(
-    prevProps.regions.map(mapUsedRegionProperties),
-    nextProps.regions.map(mapUsedRegionProperties)
+    (prevProps.regions || emptyArr).map(mapUsedRegionProperties),
+    (nextProps.regions || emptyArr).map(mapUsedRegionProperties)
   )
 )

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.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/react-material-workspace-layout/-/react-material-workspace-layout-0.1.6.tgz#38412f8ca2e282ebc169d709cc12137351c8c427"
-  integrity sha512-494vMTYgyPfC5MS7opvRcrWvDyYh3cmKP5uWH8LdSF7oDDVGi9WDEqRQK8eFt0GrBSfNk85eHUEnX74B2cjsDg==
+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==
   dependencies:
     "@material-ui/core" "^4.10.0"
     "@material-ui/icons" "^4.9.1"