fix: Allow polygon to move properly. #1597

h2oai · Sep 30, 2022 · 480bcb6 · 480bcb6
1 parent a779e08
commit 480bcb6
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 0 deletions.
diff --git a/ui/src/image_annotator.test.tsx b/ui/src/image_annotator.test.tsx
@@ -376,5 +376,49 @@ describe('ImageAnnotator.tsx', () => {
         { shape: { polygon: { items: [{ x: 100, y: 200 }, { x: 240, y: 100 }, { x: 240, y: 220 },] } }, tag: 'person' },
       ])
     })
+
+    it('Moves polygon by a single point correctly', async () => {
+      const { container } = render(<XImageAnnotator model={model} />)
+      await waitForImgLoad()
+      const canvasEl = container.querySelectorAll('canvas')[1]
+
+      fireEvent.click(canvasEl, { clientX: 180, clientY: 120 })
+      fireEvent.mouseDown(canvasEl, { clientX: 105, clientY: 100 })
+      fireEvent.mouseMove(canvasEl, { clientX: 105, clientY: 100, buttons: 1 })
+      fireEvent.mouseMove(canvasEl, { clientX: 100, clientY: 200, buttons: 1 })
+      fireEvent.click(canvasEl, { clientX: 100, clientY: 200 })
+
+      expect(wave.args[name]).toMatchObject([
+        rect,
+        { shape: { polygon: { items: [{ x: 100, y: 200 }, { x: 240, y: 100 }, { x: 240, y: 220 },] } }, tag: 'person' },
+      ])
+    })
+
+    it.only('Moves polygon by a single point, then moves it whole', async () => {
+      const { container } = render(<XImageAnnotator model={model} />)
+      await waitForImgLoad()
+      const canvasEl = container.querySelectorAll('canvas')[1]
+
+      fireEvent.click(canvasEl, { clientX: 180, clientY: 120 })
+      fireEvent.mouseDown(canvasEl, { clientX: 105, clientY: 100 })
+      fireEvent.mouseMove(canvasEl, { clientX: 105, clientY: 100, buttons: 1 })
+      fireEvent.mouseMove(canvasEl, { clientX: 100, clientY: 200, buttons: 1 })
+      fireEvent.click(canvasEl, { clientX: 100, clientY: 200 })
+
+      expect(wave.args[name]).toMatchObject([
+        rect,
+        { shape: { polygon: { items: [{ x: 100, y: 200 }, { x: 240, y: 100 }, { x: 240, y: 220 },] } }, tag: 'person' },
+      ])
+
+      fireEvent.click(canvasEl, { clientX: 180, clientY: 150 })
+      fireEvent.mouseDown(canvasEl, { clientX: 180, clientY: 150 })
+      fireEvent.mouseMove(canvasEl, { clientX: 190, clientY: 160, buttons: 1 })
+      fireEvent.click(canvasEl, { clientX: 190, clientY: 160 })
+
+      expect(wave.args[name]).toMatchObject([
+        rect,
+        { shape: { polygon: { items: [{ x: 110, y: 210 }, { x: 250, y: 110 }, { x: 250, y: 230 },] } }, tag: 'person' },
+      ])
+    })
   })
 })
diff --git a/ui/src/image_annotator.tsx b/ui/src/image_annotator.tsx
@@ -260,6 +260,7 @@ export const XImageAnnotator = ({ model }: { model: ImageAnnotator }) => {
         }
         case 'select': {
           if (intersected) setActiveTag(intersected.tag)
+          polygonRef.current?.resetDragging()
           setDrawnShapes(drawnShapes => drawnShapes.map(s => { s.isFocused = s === intersected; return s }))
           redrawExistingShapes()
           break

diff --git a/ui/src/image_annotator_polygon.ts b/ui/src/image_annotator_polygon.ts
@@ -10,6 +10,11 @@ export class PolygonAnnotator {
 
   constructor(private canvas: HTMLCanvasElement) { this.ctx = canvas.getContext('2d') }
 
+  resetDragging() {
+    this.draggedPoint = null
+    this.draggedShape = null
+  }
+
   onClick(cursor_x: U, cursor_y: U, color: S, tag: S): DrawnShape | undefined {
     if (!this.ctx) return