fix: Make sure drawing is fluent. #1601

h2oai · Apr 6, 2023 · 12672f5 · 12672f5
1 parent 83a31da
commit 12672f5
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 13 deletions.
diff --git a/ui/src/audio_annotator.test.tsx b/ui/src/audio_annotator.test.tsx
@@ -105,6 +105,34 @@ describe('AudioAnnotator.tsx', () => {
       expect(wave.args[name]).toMatchObject([items[0], { tag: 'tag1', start: 130, end: 140 }, items[1]])
     })
 
+    it('Draws a new annotation by moving forward and then a bit backward', async () => {
+      const { container } = render(<XAudioAnnotator model={model} />)
+      await waitForComponentLoad()
+      const canvasEl = container.querySelector('canvas')!
+      fireEvent.mouseDown(canvasEl, { clientX: 130, clientY: 10, buttons: 1 })
+      fireEvent.mouseMove(canvasEl, { clientX: 155, clientY: 20, buttons: 1 })
+      fireEvent.mouseMove(canvasEl, { clientX: 150, clientY: 20, buttons: 1 })
+      fireEvent.mouseMove(canvasEl, { clientX: 140, clientY: 20, buttons: 1 })
+      fireEvent.click(canvasEl, { clientX: 140, clientY: 20, buttons: 1 })
+
+      expect(wave.args[name]).toHaveLength(3)
+      expect(wave.args[name]).toMatchObject([items[0], { tag: 'tag1', start: 130, end: 140 }, items[1]])
+    })
+
+    it('Draws a new annotation by moving forward, backward, forward', async () => {
+      const { container } = render(<XAudioAnnotator model={model} />)
+      await waitForComponentLoad()
+      const canvasEl = container.querySelector('canvas')!
+      fireEvent.mouseDown(canvasEl, { clientX: 130, clientY: 10, buttons: 1 })
+      fireEvent.mouseMove(canvasEl, { clientX: 150, clientY: 20, buttons: 1 })
+      fireEvent.mouseMove(canvasEl, { clientX: 120, clientY: 20, buttons: 1 })
+      fireEvent.mouseMove(canvasEl, { clientX: 140, clientY: 20, buttons: 1 })
+      fireEvent.click(canvasEl, { clientX: 140, clientY: 20, buttons: 1 })
+
+      expect(wave.args[name]).toHaveLength(3)
+      expect(wave.args[name]).toMatchObject([items[0], { tag: 'tag1', start: 130, end: 140 }, items[1]])
+    })
+
     it('Does not draw a new annotation if too small', async () => {
       const { container } = render(<XAudioAnnotator model={model} />)
       await waitForComponentLoad()

diff --git a/ui/src/parts/range_annotator.tsx b/ui/src/parts/range_annotator.tsx
@@ -38,6 +38,7 @@ type DraggedAnnotation = {
   action?: 'resize' | 'move' | 'new'
   resized?: 'from' | 'to'
   intersected?: DrawnAnnotation
+  newAnnotationStart?: F
 }
 type TooltipProps = { title: S, range: S, top: U, left: U }
 type TagColor = { transparent: S, color: S, label: S }
@@ -102,9 +103,9 @@ const
     if (Math.abs(canvasEnd - x) <= ANNOTATION_HANDLE_OFFSET) return 'to'
   },
   getResized = (cursor_x: F, min: F, max: F) => {
-    return cursor_x === min
+    return cursor_x <= min
       ? 'from'
-      : cursor_x === max
+      : cursor_x >= max
         ? 'to'
         : undefined
   },
@@ -264,21 +265,21 @@ const
           : 'pointer'
 
         if (!currDrawnAnnotation.current || e.buttons !== 1) return
-        if (!currDrawnAnnotation.current?.action) currDrawnAnnotation.current.action = 'new'
+        if (!currDrawnAnnotation.current?.action) {
+          currDrawnAnnotation.current.action = 'new'
+          currDrawnAnnotation.current.newAnnotationStart = currDrawnAnnotation.current.from
+        }
 
         let tooltipFrom = 0
         let tooltipTo = 0
         const { action, intersected: currIntersected } = currDrawnAnnotation.current
-        if (action === 'new') {
-          const { from, to, resized } = currDrawnAnnotation.current
-          const min = Math.min(from, to, cursor_x)
-          const max = Math.max(from, to, cursor_x)
-          const start = resized === 'from' ? cursor_x : min
-          const end = resized === 'to' ? cursor_x : max
-          tooltipFrom = start
-          tooltipTo = end
-          currDrawnAnnotation.current = { from: start, to: end, action: 'new' }
-          currDrawnAnnotation.current.resized = getResized(cursor_x, min, max) || currDrawnAnnotation.current.resized
+        if (action === 'new' && currDrawnAnnotation.current.newAnnotationStart) {
+          const newAnnotationStart = currDrawnAnnotation.current.newAnnotationStart
+          const from = Math.min(cursor_x, newAnnotationStart)
+          const to = Math.max(cursor_x, newAnnotationStart)
+          tooltipFrom = from
+          tooltipTo = to
+          currDrawnAnnotation.current = { from, to, action: 'new', newAnnotationStart }
           canvas.style.cursor = 'ew-resize'
         }
         else if (action === 'move' && currIntersected) {