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