feat: Polygon movements. #1597

h2oai · Sep 29, 2022 · 2822f05 · 2822f05
1 parent 78e7451
commit 2822f05
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 25 deletions.
diff --git a/ui/src/image_annotator.tsx b/ui/src/image_annotator.tsx
@@ -129,31 +129,22 @@ const
 
     return cursor
   },
-  mapShapesToWaveArgs = (shapes: DrawnShape[], aspectRatio: F) => {
-    return shapes.map(({ shape, tag }) => {
-      if (shape.rect) return {
-        tag,
-        shape: {
-          rect: {
-            x1: shape.rect.x1 * aspectRatio,
-            x2: shape.rect.x2 * aspectRatio,
-            y1: shape.rect.y1 * aspectRatio,
-            y2: shape.rect.y2 * aspectRatio,
-          }
-        }
-      }
-      else if (shape.polygon) return {
-        tag,
-        shape: {
-          polygon: {
-            items: shape.polygon.items.map(i => ({ x: i.x * aspectRatio, y: i.y * aspectRatio }))
-          }
+  mapShapesToWaveArgs = (shapes: DrawnShape[], aspectRatio: F) => shapes.map(({ shape, tag }) => {
+    if (shape.rect) return {
+      tag,
+      shape: {
+        rect: {
+          x1: shape.rect.x1 * aspectRatio,
+          x2: shape.rect.x2 * aspectRatio,
+          y1: shape.rect.y1 * aspectRatio,
+          y2: shape.rect.y2 * aspectRatio,
         }
       }
-      return { tag, shape }
-    })
+    }
+    else if (shape.polygon) return { tag, shape: { polygon: { items: shape.polygon.items.map(i => ({ x: i.x * aspectRatio, y: i.y * aspectRatio })) } } }
+    return { tag, shape }
+  })
 
-  }
 
 export const XImageAnnotator = ({ model }: { model: ImageAnnotator }) => {
   const

diff --git a/ui/src/image_annotator_polygon.ts b/ui/src/image_annotator_polygon.ts
@@ -44,11 +44,13 @@ export class PolygonAnnotator {
       this.draggedPoint.y += cursor_y - this.draggedPoint.y
     }
     else if (intersected == focused || this.draggedShape) {
-      this.draggedShape = intersected || this.draggedShape
+      this.draggedShape = intersected?.shape.polygon && intersected.isFocused ? intersected : this.draggedShape
       this.draggedShape?.shape.polygon?.items.forEach(p => {
-        p.x += cursor_x - p.x
-        p.y += cursor_y - p.y
+        p.x += cursor_x - clickStartPosition!.x
+        p.y += cursor_y - clickStartPosition!.y
       })
+      clickStartPosition.x = cursor_x
+      clickStartPosition.y = cursor_y
     }
   }