Close token menu when transforming

src/components/konva/Token.tsx

@@ -28,6 +28,7 @@ import { TokenState } from "../../types/TokenState";
 import { Map } from "../../types/Map";
 import {
   TokenDragEventHandler,
+  TokenMenuCloseChangeEventHandler,
   TokenMenuOpenChangeEventHandler,
   TokenStateChangeEventHandler,
 } from "../../types/Events";
@@ -37,6 +38,7 @@ type MapTokenProps = {
   tokenState: TokenState;
   onTokenStateChange: TokenStateChangeEventHandler;
   onTokenMenuOpen: TokenMenuOpenChangeEventHandler;
+  onTokenMenuClose: TokenMenuCloseChangeEventHandler;
   onTokenDragStart: TokenDragEventHandler;
   onTokenDragEnd: TokenDragEventHandler;
   draggable: boolean;
@@ -49,6 +51,7 @@ function Token({
   tokenState,
   onTokenStateChange,
   onTokenMenuOpen,
+  onTokenMenuClose,
   onTokenDragStart,
   onTokenDragEnd,
   draggable,
@@ -197,6 +200,13 @@ function Token({
   }
 
   const tokenRef = useRef<Konva.Group>(null);
+
+  const [isTransforming, setIsTransforming] = useState(false);
+  function handleTransformStart() {
+    setIsTransforming(true);
+    onTokenMenuClose();
+  }
+
   function handleTransformEnd(event: Konva.KonvaEventObject<Event>) {
     if (tokenRef.current) {
       const sizeChange = event.target.scaleX();
@@ -209,7 +219,9 @@ function Token({
       });
       tokenRef.current.scaleX(1);
       tokenRef.current.scaleY(1);
+      onTokenMenuOpen(tokenState.id, event.target);
     }
+    setIsTransforming(false);
   }
 
   const minCellSize = Math.min(
@@ -288,7 +300,9 @@ function Token({
             image={tokenImage}
             hitFunc={() => {}}
           />
-          <Group>
+        </Group>
+        {!isTransforming ? (
+          <Group offsetX={tokenWidth / 2} offsetY={tokenHeight / 2}>
             {tokenState.statuses?.length > 0 ? (
               <TokenStatus
                 tokenState={tokenState}
@@ -296,22 +310,21 @@ function Token({
                 height={tokenHeight}
               />
             ) : null}
+            {tokenState.label ? (
+              <TokenLabel
+                tokenState={tokenState}
+                width={tokenWidth}
+                height={tokenHeight}
+              />
+            ) : null}
           </Group>
-        </Group>
-        <Group offsetX={tokenWidth / 2} offsetY={tokenHeight / 2}>
-          {tokenState.label ? (
-            <TokenLabel
-              tokenState={tokenState}
-              width={tokenWidth}
-              height={tokenHeight}
-            />
-          ) : null}
-        </Group>
+        ) : null}
       </animated.Group>
       <Transformer
-        active={selected}
+        active={selected || isTransforming}
         nodeRef={tokenRef}
         onTransformEnd={handleTransformEnd}
+        onTransformStart={handleTransformStart}
       />
     </>
   );

src/components/konva/Transformer.tsx

@@ -63,23 +63,19 @@ function Transformer({
 
       transformerRef.current.getLayer()?.batchDraw();
     }
-  }, [active, nodeRef, anchorScale]);
+  }, [active, nodeRef, anchorScale, anchorRotate]);
 
   const movingAnchorRef = useRef<string>();
   function handleTransformStart(e: Konva.KonvaEventObject<Event>) {
     if (transformerRef.current) {
       movingAnchorRef.current = transformerRef.current._movingAnchorName;
-      if (active) {
-        setPreventMapInteraction(true);
-      }
+      setPreventMapInteraction(true);
       onTransformStart && onTransformStart(e);
     }
   }
 
   function handleTransformEnd(e: Konva.KonvaEventObject<Event>) {
-    if (active) {
-      setPreventMapInteraction(false);
-    }
+    setPreventMapInteraction(false);
     onTransformEnd && onTransformEnd(e);
   }
 

src/hooks/useMapTokens.tsx

@@ -54,6 +54,10 @@ function useMapTokens(
     setIsTokenMenuOpen(true);
   }
 
+  function handleTokenMenuClose() {
+    setIsTokenMenuOpen(false);
+  }
+
   function handleTokenDragStart(
     _: KonvaEventObject<DragEvent>,
     tokenStateId: string
@@ -87,6 +91,7 @@ function useMapTokens(
             tokenState={tokenState}
             onTokenStateChange={onTokenStateChange}
             onTokenMenuOpen={handleTokenMenuOpen}
+            onTokenMenuClose={handleTokenMenuClose}
             onTokenDragStart={handleTokenDragStart}
             onTokenDragEnd={handleTokenDragEnd}
             draggable={
@@ -98,6 +103,7 @@ function useMapTokens(
             map={map}
             selected={
               !!tokenMenuOptions &&
+              isTokenMenuOpen &&
               tokenMenuOptions.tokenStateId === tokenState.id
             }
           />
@@ -108,7 +114,7 @@ function useMapTokens(
   const tokenMenu = (
     <TokenMenu
       isOpen={isTokenMenuOpen}
-      onRequestClose={() => setIsTokenMenuOpen(false)}
+      onRequestClose={handleTokenMenuClose}
       onTokenStateChange={onTokenStateChange}
       tokenState={
         tokenMenuOptions && mapState?.tokens[tokenMenuOptions.tokenStateId]

src/types/Events.ts

@@ -30,6 +30,7 @@ export type TokenMenuOpenChangeEventHandler = (
   tokenStateId: string,
   tokenImage: Konva.Node
 ) => void;
+export type TokenMenuCloseChangeEventHandler = () => void;
 export type TokenSettingsChangeEventHandler = (change: Partial<Token>) => void;
 export type TokenDragEventHandler = (
   event: Konva.KonvaEventObject<DragEvent>,