From 97b8fd0ba641c50bf515e2dc3b9de1b6df983feb Mon Sep 17 00:00:00 2001
From: Mindee <mindee@Mindees-MacBook-Pro.local>
Date: Mon, 31 Mar 2025 10:17:38 +0200
Subject: [PATCH 1/4] chg: :children_crossing: updated to support draaging on
 shapes in annotation viewer

---
 src/utils/canvas.ts | 39 +++++++++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/utils/canvas.ts b/src/utils/canvas.ts
index bfa246f..e0a0cf9 100644
--- a/src/utils/canvas.ts
+++ b/src/utils/canvas.ts
@@ -59,19 +59,42 @@ const bindEventToPolygon = (
 ) => {
   const stage = polygon.getStage()
   const shape = polygon.getAttr('shape')
-  polygon.on('mousedown', (event) => {
-    event.cancelBubble = true
-    onClick?.(shape)
-    options?.onClick?.(polygon)
+  let startPos = { x: 0, y: 0 }
+  let hasMoved = false
+
+  polygon.on('mousedown', () => {
+    startPos = stage!.getPointerPosition() || { x: 0, y: 0 }
+    hasMoved = false
+  })
+
+  polygon.on('mousemove', () => {
+    if (!startPos) return
+    const currentPos = stage!.getPointerPosition() || { x: 0, y: 0 }
+    const dx = currentPos.x - startPos.x
+    const dy = currentPos.y - startPos.y
+
+    // If moved more than 5 pixels, consider it a drag
+    if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
+      hasMoved = true
+    }
   })
-  polygon.on('mouseleave', function (event) {
-    event.cancelBubble = true
+
+  polygon.on('mouseup', () => {
+    if (!hasMoved) {
+      onClick?.(shape)
+      options?.onClick?.(polygon)
+    }
+    startPos = { x: 0, y: 0 }
+    hasMoved = false
+  })
+
+  polygon.on('mouseleave', function () {
     stage!.container().style.cursor = 'inherit'
     options?.onMouseLeave?.(polygon)
     onShapeMouseLeave?.(shape)
   })
-  polygon.on('mouseenter', function (event) {
-    event.cancelBubble = true
+
+  polygon.on('mouseenter', function () {
     options?.onMouseEnter?.(polygon)
     stage!.container().style.cursor = 'pointer'
     onShapeMouseEnter?.(shape)

From 4c54732d94e16d542d13159c6eb325801860f2f9 Mon Sep 17 00:00:00 2001
From: Mindee <mindee@Mindees-MacBook-Pro.local>
Date: Mon, 31 Mar 2025 10:17:59 +0200
Subject: [PATCH 2/4] 1.6.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8fe103e..b7c8fb2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-mindee-js",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "Front-End Computer Vision SDK for React",
   "author": "@mindee",
   "license": "MIT",

From f4686765ba4f4e6216341564101984516db8a1c9 Mon Sep 17 00:00:00 2001
From: Mindee <mindee@Mindees-MacBook-Pro.local>
Date: Mon, 31 Mar 2025 10:41:36 +0200
Subject: [PATCH 3/4] chg: :children_crossing: updated change log with new
 version and changes

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 485c895..54cf97d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## v1.6.6 (31/03/2025)
+
+### Changes
+
+- :children_crossing: updated to support dragging on shapes in annotation viewer
+
 ## v1.6.5 (16/10/2023)
 
 ### Changes

From 9c7068cee0cfbf25c725144a7cf67f340fee7dd8 Mon Sep 17 00:00:00 2001
From: Mindee <mindee@Mindees-MacBook-Pro.local>
Date: Mon, 31 Mar 2025 15:12:46 +0200
Subject: [PATCH 4/4] chg: :children_crossing: updated to allow dragging on
 shapes showing grabbing cursor without any custom handling

---
 src/components/AnnotationViewer.tsx |  6 +++++
 src/utils/canvas.ts                 | 39 ++++++-----------------------
 2 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/src/components/AnnotationViewer.tsx b/src/components/AnnotationViewer.tsx
index cc72c01..e008c7d 100644
--- a/src/components/AnnotationViewer.tsx
+++ b/src/components/AnnotationViewer.tsx
@@ -174,6 +174,12 @@ export default function AnnotationViewer({
           onShapeMultiSelect,
         ),
       )
+
+      stageObject.current.on('dragstart', () => {
+        if (stageObject.current?.container()) {
+          stageObject.current.container().style.cursor = 'grabbing'
+        }
+      })
     }
   }
 
diff --git a/src/utils/canvas.ts b/src/utils/canvas.ts
index e0a0cf9..6622f8a 100644
--- a/src/utils/canvas.ts
+++ b/src/utils/canvas.ts
@@ -59,42 +59,19 @@ const bindEventToPolygon = (
 ) => {
   const stage = polygon.getStage()
   const shape = polygon.getAttr('shape')
-  let startPos = { x: 0, y: 0 }
-  let hasMoved = false
-
-  polygon.on('mousedown', () => {
-    startPos = stage!.getPointerPosition() || { x: 0, y: 0 }
-    hasMoved = false
-  })
-
-  polygon.on('mousemove', () => {
-    if (!startPos) return
-    const currentPos = stage!.getPointerPosition() || { x: 0, y: 0 }
-    const dx = currentPos.x - startPos.x
-    const dy = currentPos.y - startPos.y
-
-    // If moved more than 5 pixels, consider it a drag
-    if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
-      hasMoved = true
-    }
+  polygon.on('mouseup', (event) => {
+    event.cancelBubble = true
+    onClick?.(shape)
+    options?.onClick?.(polygon)
   })
-
-  polygon.on('mouseup', () => {
-    if (!hasMoved) {
-      onClick?.(shape)
-      options?.onClick?.(polygon)
-    }
-    startPos = { x: 0, y: 0 }
-    hasMoved = false
-  })
-
-  polygon.on('mouseleave', function () {
+  polygon.on('mouseleave', function (event) {
+    event.cancelBubble = true
     stage!.container().style.cursor = 'inherit'
     options?.onMouseLeave?.(polygon)
     onShapeMouseLeave?.(shape)
   })
-
-  polygon.on('mouseenter', function () {
+  polygon.on('mouseenter', function (event) {
+    event.cancelBubble = true
     options?.onMouseEnter?.(polygon)
     stage!.container().style.cursor = 'pointer'
     onShapeMouseEnter?.(shape)