From 3ad726f5adb0d65cdaab95854ecbe88eb7e7fcfa Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Wed, 4 Aug 2021 07:32:13 +1000
Subject: [PATCH] Adjust token menu to not hide rotation handle at 180deg

---
 src/components/konva/Token.tsx       | 14 ++++++--------
 src/components/konva/Transformer.tsx |  2 +-
 src/components/token/TokenMenu.tsx   |  4 ++--
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/konva/Token.tsx b/src/components/konva/Token.tsx
index 4e6b1cb..e000b0c 100644
--- a/src/components/konva/Token.tsx
+++ b/src/components/konva/Token.tsx
@@ -152,10 +152,9 @@ function Token({
     onTokenDragEnd(event, tokenState.id);
   }
 
-  function handleClick(event: Konva.KonvaEventObject<MouseEvent>) {
-    if (draggable) {
-      const tokenImage = event.target;
-      onTokenMenuOpen(tokenState.id, tokenImage);
+  function handleClick() {
+    if (draggable && tokenRef.current) {
+      onTokenMenuOpen(tokenState.id, tokenRef.current);
     }
   }
 
@@ -177,12 +176,11 @@ function Token({
     }
     // Check token click when locked and we are the map owner
     // We can't use onClick because that doesn't check pointer distance
-    if (tokenState.locked && map.owner === userId) {
+    if (tokenState.locked && map.owner === userId && tokenRef.current) {
       // If down and up time is small trigger a click
       const delta = event.evt.timeStamp - tokenPointerDownTimeRef.current;
       if (delta < 300) {
-        const tokenImage = event.target;
-        onTokenMenuOpen(tokenState.id, tokenImage);
+        onTokenMenuOpen(tokenState.id, tokenRef.current);
       }
     }
   }
@@ -219,7 +217,7 @@ function Token({
       });
       tokenRef.current.scaleX(1);
       tokenRef.current.scaleY(1);
-      onTokenMenuOpen(tokenState.id, event.target);
+      onTokenMenuOpen(tokenState.id, tokenRef.current);
     }
     setIsTransforming(false);
   }
diff --git a/src/components/konva/Transformer.tsx b/src/components/konva/Transformer.tsx
index a61f113..137d86a 100644
--- a/src/components/konva/Transformer.tsx
+++ b/src/components/konva/Transformer.tsx
@@ -240,7 +240,7 @@ function Transformer({
       onTransformEnd={handleTransformEnd}
       centeredScaling={true}
       rotationSnaps={[...Array(24).keys()].map((n) => n * 15)}
-      rotateAnchorOffset={20}
+      rotateAnchorOffset={16}
       enabledAnchors={["middle-left", "middle-right"]}
       flipEnabled={false}
       ignoreStroke={true}
diff --git a/src/components/token/TokenMenu.tsx b/src/components/token/TokenMenu.tsx
index fc8751c..0c9cd6e 100644
--- a/src/components/token/TokenMenu.tsx
+++ b/src/components/token/TokenMenu.tsx
@@ -57,8 +57,8 @@ function TokenMenu({
           setMenuLeft(
             mapRect.left + imageRect.x + imageRect.width / 2 - 156 / 2
           );
-          // Y 12px from the bottom
-          setMenuTop(mapRect.top + imageRect.y + imageRect.height + 12);
+          // Y 20px from the bottom
+          setMenuTop(mapRect.top + imageRect.y + imageRect.height + 20);
         }
       }
     }