fix: Merge pull request #83 from UniversalDataTool/remove-image-selector

better interactive allowedArea limits

Author: seveibar

package.json

@@ -9,6 +9,7 @@
     "@material-ui/icons": "^4.9.1",
     "@semantic-release/git": "^9.0.0",
     "autoseg": "^0.0.8",
+    "clamp": "^1.0.1",
     "color-alpha": "^1.0.4",
     "get-image-data": "^3.0.1",
     "material-survey": "^1.0.34",

src/Annotator/reducers/general-reducer.js

@@ -9,6 +9,7 @@ import { saveToHistory } from "./history-handler.js"
 import colors from "../../colors"
 import fixTwisted from "./fix-twisted"
 import convertExpandingLineToPolygon from "./convert-expanding-line-to-polygon"
+import clamp from "clamp"
 
 const getRandomId = () => Math.random().toString().split(".")[1]
 
@@ -207,7 +208,13 @@ export default (state: MainLayoutState, action: Action) => {
       })
     }
     case "MOUSE_MOVE": {
-      const { x, y } = action
+      let { x, y } = action
+      if (state.allowedArea) {
+        const aa = state.allowedArea
+        x = clamp(x, aa.x, aa.x + aa.w)
+        y = clamp(y, aa.x, aa.x + aa.w)
+      }
+
       if (!state.mode) return state
       if (!activeImage) return state
       const { mouseDownAt } = state
@@ -352,18 +359,16 @@ export default (state: MainLayoutState, action: Action) => {
     }
     case "MOUSE_DOWN": {
       if (!activeImage) return state
-      const { x, y } = action
-      state = setIn(state, ["mouseDownAt"], { x, y })
+      let { x, y } = action
 
       if (state.allowedArea) {
-        // TODO clamp x/y instead of giving up
-        // TODO or image bounds
         const aa = state.allowedArea
-        if (x < aa.x || x > aa.x + aa.w || y < aa.y || y > aa.y + aa.h) {
-          return state
-        }
+        x = clamp(x, aa.x, aa.x + aa.w)
+        y = clamp(y, aa.x, aa.x + aa.w)
       }
 
+      state = setIn(state, ["mouseDownAt"], { x, y })
+
       if (state.mode) {
         switch (state.mode.mode) {
           case "DRAW_POLYGON": {
@@ -529,7 +534,13 @@ export default (state: MainLayoutState, action: Action) => {
       return setIn(state, [...pathToActiveImage, "regions"], regions)
     }
     case "MOUSE_UP": {
-      const { x, y } = action
+      let { x, y } = action
+      if (state.allowedArea) {
+        const aa = state.allowedArea
+        x = clamp(x, aa.x, aa.x + aa.w)
+        y = clamp(y, aa.x, aa.x + aa.w)
+      }
+
       const { mouseDownAt = { x, y } } = state
       if (!state.mode) return state
       state = setIn(state, ["mouseDownAt"], null)

yarn.lock

@@ -5719,6 +5719,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+clamp@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
+  integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ=
+
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"