Repository: h2oai/wave
File: ui/src/image_annotator.tsx (TypeScript)

Code before:
            x1 = clickStartPosition.x,
            y1 = clickStartPosition.y
          // Perf: We could store selected shapes in-memory instead of filtering them every time, but this should be fast enough.
          drawnShapes.filter(s => s.isFocused).forEach(s => {
            if (s.shape.rect) rectRef.current?.move(cursor_x - x1, cursor_y - y1, s)
            else if (s.shape.polygon) polygonRef.current?.move(cursor_x - x1, cursor_y - y1, s)
          })
          clickStartPosition.x = cursor_x
          clickStartPosition.y = cursor_y

          redrawExistingShapes()
          break
        }
      }
    },
    onClick = (e: React.MouseEvent) => {
      const canvas = canvasRef.current
      if (!canvas) return

      const
        start = clickStartPositionRef.current,
        rect = canvas.getBoundingClientRect(),
        { cursor_x, cursor_y } = eventToCursor(e, rect, zoom, imgPositionRef.current),
        intersected = getIntersectedShape(drawnShapes, cursor_x, cursor_y)

      if (model.events?.includes('click') && start?.x && start?.y) {
        wave.emit(model.name, 'click', {
          x: Math.round(start.x / aspectRatioRef.current),
          y: Math.round(start.y / aspectRatioRef.current)
        })
      }

      switch (activeShape) {
        case 'rect': {
          const newRect = rectRef.current?.onClick(cursor_x, cursor_y, activeTag, start)
          if (newRect) {
            setDrawnShapes(prevShapes => {
              const newShapes = [newRect, ...prevShapes]
              setWaveArgs(newShapes)
              return newShapes
            })
          }
          redrawExistingShapes()
          break
        }
        case 'polygon': {
          // Prevent drawing new polygon when switched from 'select' mode during shape dragging.
          if (!start) break
          const newPolygon = polygonRef.current?.onClick(cursor_x, cursor_y, getCurrentTagColor(activeTag), activeTag)
          if (newPolygon) {
            setDrawnShapes(prevShapes => {

Review comment (suggestion):
We probably want to support picking `[0,0]` as well.

```suggestion
      if (start && model.events?.includes('click')) {
```

Code after:
            x1 = clickStartPosition.x,
            y1 = clickStartPosition.y
          // Perf: We could store selected shapes in-memory instead of filtering them every time, but this should be fast enough.
          drawnShapes.filter(s => s.isFocused).forEach(s => {
            if (s.shape.rect) rectRef.current?.move(cursor_x - x1, cursor_y - y1, s)
            else if (s.shape.polygon) polygonRef.current?.move(cursor_x - x1, cursor_y - y1, s)
          })
          clickStartPosition.x = cursor_x
          clickStartPosition.y = cursor_y

          redrawExistingShapes()
          break
        }
      }
    },
    onClick = (e: React.MouseEvent) => {
      const canvas = canvasRef.current
      if (!canvas) return

      const
        start = clickStartPositionRef.current,
        rect = canvas.getBoundingClientRect(),
        { cursor_x, cursor_y } = eventToCursor(e, rect, zoom, imgPositionRef.current),
        intersected = getIntersectedShape(drawnShapes, cursor_x, cursor_y)

      if (model.events?.includes('click') && activeShape !== 'select' && start) {
        wave.emit(model.name, 'click', {
          x: Math.round(start.x / aspectRatioRef.current),
          y: Math.round(start.y / aspectRatioRef.current)
        })
      }

      switch (activeShape) {
        case 'rect': {
          const newRect = rectRef.current?.onClick(cursor_x, cursor_y, activeTag, start)
          if (newRect) {
            setDrawnShapes(prevShapes => {
              const newShapes = [newRect, ...prevShapes]
              setWaveArgs(newShapes)
              return newShapes
            })
          }
          redrawExistingShapes()
          break
        }
        case 'polygon': {
          // Prevent drawing new polygon when switched from 'select' mode during shape dragging.
          if (!start) break
          const newPolygon = polygonRef.current?.onClick(cursor_x, cursor_y, getCurrentTagColor(activeTag), activeTag)
          if (newPolygon) {
            setDrawnShapes(prevShapes => {