Merge pull request #51 from beru/Show_HighlightBox

Add showHighlightBox property to control visibility of Highlight Box

Author: seveibar

src/ImageCanvas/index.js

@@ -55,6 +55,7 @@ type Props = {
   showTags?: boolean,
   realSize?: { width: number, height: number, unitName: string },
   showCrosshairs?: boolean,
+  showHighlightBox?: boolean,
   showPointDistances?: boolean,
   pointDistancePrecision?: number,
   regionClsList?: Array<string>,
@@ -99,6 +100,7 @@ export default ({
   regionClsList,
   regionTagList,
   showCrosshairs,
+  showHighlightBox,
   showPointDistances,
   allowedArea,
   RegionEditLabel = null,
@@ -421,6 +423,7 @@ export default ({
           onBeginBoxTransform={onBeginBoxTransform}
           onBeginMovePolygonPoint={onBeginMovePolygonPoint}
           onAddPolygonPoint={onAddPolygonPoint}
+          showHighlightBox={showHighlightBox}
         />
       )}
       {imageLoaded && showTags && (

src/RegionSelectAndTransformBoxes/index.js

@@ -33,6 +33,7 @@ export const RegionSelectAndTransformBoxes = ({
   onBeginBoxTransform,
   onBeginMovePolygonPoint,
   onAddPolygonPoint,
+  showHighlightBox,
 }) => {
   return regions
     .filter((r) => r.visible || r.visible === undefined)
@@ -43,16 +44,18 @@ export const RegionSelectAndTransformBoxes = ({
       return (
         <Fragment key={r.id}>
           <PreventScrollToParents>
-            <HighlightBox
-              region={r}
-              mouseEvents={mouseEvents}
-              dragWithPrimary={dragWithPrimary}
-              createWithPrimary={createWithPrimary}
-              zoomWithPrimary={zoomWithPrimary}
-              onBeginMovePoint={onBeginMovePoint}
-              onSelectRegion={onSelectRegion}
-              pbox={pbox}
-            />
+            {showHighlightBox && (
+              <HighlightBox
+                region={r}
+                mouseEvents={mouseEvents}
+                dragWithPrimary={dragWithPrimary}
+                createWithPrimary={createWithPrimary}
+                zoomWithPrimary={zoomWithPrimary}
+                onBeginMovePoint={onBeginMovePoint}
+                onSelectRegion={onSelectRegion}
+                pbox={pbox}
+              />
+            )}
             {r.type === "box" &&
               !dragWithPrimary &&
               !zoomWithPrimary &&

src/SettingsDialog/index.js

@@ -27,6 +27,11 @@ export const SettingsDialog = ({ open, onClose }) => {
                 title: "Show Crosshairs",
                 name: "showCrosshairs",
               },
+              {
+                type: "boolean",
+                title: "Show Highlight Box",
+                name: "showHighlightBox",
+              },
               {
                 type: "dropdown",
                 title: "Video Playback Speed",

src/SettingsProvider/index.js

@@ -4,6 +4,7 @@ import React, { createContext, useContext, useState } from "react"
 
 const defaultSettings = {
   showCrosshairs: false,
+  showHighlightBox: true,
 }
 
 export const SettingsContext = createContext(defaultSettings)