zooming on allowed area

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

src/ImageCanvas/index.js

@@ -1,6 +1,12 @@
 // @flow weak
 
-import React, { useRef, useState, useLayoutEffect, useMemo } from "react"
+import React, {
+  useRef,
+  useState,
+  useLayoutEffect,
+  useEffect,
+  useMemo,
+} from "react"
 import type { Node } from "react"
 import { Matrix } from "transformation-matrix-js"
 import Crosshairs from "../Crosshairs"
@@ -48,6 +54,7 @@ type Props = {
   allowedArea?: { x: number, y: number, w: number, h: number },
   RegionEditLabel?: Node,
   videoPlaying?: boolean,
+  zoomOnAllowedArea?: boolean,
   fullImageSegmentationMode?: boolean,
   autoSegmentationOptions?: Object,
 
@@ -70,7 +77,15 @@ type Props = {
   onChangeVideoPlaying?: Function,
 }
 
-const getDefaultMat = () => Matrix.from(1, 0, 0, 1, -10, -10)
+const getDefaultMat = (allowedArea = null, { iw, ih } = {}) => {
+  let mat = Matrix.from(1, 0, 0, 1, -10, -10)
+  if (allowedArea && iw) {
+    mat = mat
+      .translate(allowedArea.x * iw, allowedArea.y * ih)
+      .scaleU(allowedArea.w + 0.05)
+  }
+  return mat
+}
 
 export const ImageCanvas = ({
   regions,
@@ -110,6 +125,7 @@ export const ImageCanvas = ({
   onChangeVideoTime,
   onChangeVideoPlaying,
   onRegionClassAdded,
+  zoomOnAllowedArea = true,
 }: Props) => {
   const classes = useStyles()
 
@@ -155,6 +171,7 @@ export const ImageCanvas = ({
 
   const [imageDimensions, changeImageDimensions] = useState()
   const imageLoaded = Boolean(imageDimensions && imageDimensions.naturalWidth)
+
   const onVideoOrImageLoaded = useEventCallback(
     ({ naturalWidth, naturalHeight, duration }) => {
       const dims = { naturalWidth, naturalHeight, duration }
@@ -190,6 +207,17 @@ export const ImageCanvas = ({
     }
   }
 
+  useEffect(() => {
+    if (!imageLoaded) return
+    changeMat(
+      getDefaultMat(
+        zoomOnAllowedArea ? allowedArea : null,
+        layoutParams.current
+      )
+    )
+    // eslint-disable-next-line
+  }, [imageLoaded])
+
   useLayoutEffect(() => {
     if (!imageDimensions) return
     const { clientWidth, clientHeight } = canvas

src/ImageCanvas/index.story.js

@@ -138,3 +138,13 @@ storiesOf("ImageCanvas", module)
       {...events}
     />
   ))
+  .add("Allowed Area (2)", () => (
+    <ImageCanvas
+      showTags
+      regions={[]}
+      imageSrc={exampleImage}
+      zoomWithPrimary
+      allowedArea={{ x: 0.6, y: 0.6, w: 0.2, h: 0.2 }}
+      {...events}
+    />
+  ))

src/MainLayout/index.js

@@ -105,6 +105,10 @@ export const MainLayout = ({
   const canvas = (
     <ImageCanvas
       {...settings}
+      showCrosshairs={
+        settings.showCrosshairs &&
+        !["select", "pan", "zoom"].includes(state.selectedTool)
+      }
       key={state.selectedImage}
       showMask={state.showMask}
       fullImageSegmentationMode={state.fullImageSegmentationMode}

src/RegionShapes/index.js

@@ -157,6 +157,7 @@ export const RegionShapes = ({
       }}
     >
       <WrappedRegionList
+        key="wrapped-region-list"
         regions={regions}
         iw={iw}
         ih={ih}

yarn.lock

@@ -14546,10 +14546,10 @@ react-markdown@^4.0.6:
     unist-util-visit "^1.3.0"
     xtend "^4.0.1"
 
-react-material-workspace-layout@^0.1.16:
-  version "0.1.16"
-  resolved "https://registry.yarnpkg.com/react-material-workspace-layout/-/react-material-workspace-layout-0.1.16.tgz#fa51c8a52e19cc3f8cc1627d69f761851447621e"
-  integrity sha512-knxP+1dYMueWdpp/LZoTt23P5LJjtoexZsKBTgRZFMZwvc1uXSK3u2Lwxf6jw5AMI55mrTrWNhB7aqOpzROtjA==
+react-material-workspace-layout@^0.1.17:
+  version "0.1.17"
+  resolved "https://registry.yarnpkg.com/react-material-workspace-layout/-/react-material-workspace-layout-0.1.17.tgz#98a997e7d8671444fafe53caa4298b6643d1b9cb"
+  integrity sha512-GY+jFZ14IYKyzIW/KI8/R0Mttb5dTRdYDKdj++YAU/Z3HSQ7kZJ678mv5Nl7X0o081IpMFg5CRiBvvdozUmBtQ==
   dependencies:
     "@material-ui/core" "^4.10.0"
     "@material-ui/icons" "^4.9.1"