Merge pull request #41 from PsycleResearch/fix/path-drawing-after-move

fix: Path drawing after move
PsycleResearch · Nov 17, 2022 · b0dac0c · b0dac0c
2 parents d48d2a6 + 7486d73
commit b0dac0c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git 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
@@ -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 {