From 7486d7317177271af27308279ff33994fc67b39d Mon Sep 17 00:00:00 2001
From: Maxime BAUMANN <maxime.baumann@psycle.io>
Date: Thu, 10 Nov 2022 17:18:36 +0100
Subject: [PATCH] fix: Path drawing after move

---
 package.json                 |  2 +-
 src/draw-zone/components.tsx | 25 ++++++++++++++++++++++---
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index b13b8c9..c7d3779 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@psycle/repsycle",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "description": "Psycle Research front-end toolkit",
   "author": "Psycle Research",
   "keywords": [
diff --git a/src/draw-zone/components.tsx b/src/draw-zone/components.tsx
index c90cfa3..e8c87a2 100644
--- a/src/draw-zone/components.tsx
+++ b/src/draw-zone/components.tsx
@@ -238,7 +238,7 @@ function DrawZoneInner({
                 position: 'relative',
                 pointerEvents: 'auto',
                 touchAction: 'none',
-                userSelect: 'none'
+                userSelect: 'none',
             }}
             ref={containerRef}
         >
@@ -407,6 +407,20 @@ function SvgZone({
         [pointOnPointerDown],
     )
 
+    useEffect(() => {
+        const { current } = ref
+
+        if (!current) return
+
+        const svg = SVG(current) as Svg
+
+        if (move) {
+            svg.css({ cursor: 'grab' })
+        } else {
+            svg.css({ cursor: 'default' })
+        }
+    }, [move])
+
     useEffect(() => {
         const { current } = ref
 
@@ -446,6 +460,8 @@ function SvgZone({
 
                 dragging.current = true
 
+                svg.css({ cursor: 'grabbing' })
+
                 return
             }
 
@@ -754,6 +770,7 @@ function SvgZone({
                 svg.css({ cursor: 'grab' })
 
                 dragging.current = false
+                startPosition.current = undefined
 
                 return
             }
@@ -805,11 +822,13 @@ function SvgZone({
 
                     if (drawOnPointerDown && lastRect && lastRect.rect) {
                         currentPosition.x = Math.min(
-                            startPosition.current.x + lastRect.rect.width * scale,
+                            startPosition.current.x +
+                                lastRect.rect.width * scale,
                             svgRect.width,
                         )
                         currentPosition.y = Math.min(
-                            startPosition.current.y + lastRect.rect.height * scale,
+                            startPosition.current.y +
+                                lastRect.rect.height * scale,
                             svgRect.height,
                         )
                     } else {