Adjust token menu to not hide rotation handle at 180deg

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);
   }

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}

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);
         }
       }
     }