Add custom transformer

src/components/konva/Token.tsx

@@ -31,6 +31,7 @@ import {
   TokenMenuOpenChangeEventHandler,
   TokenStateChangeEventHandler,
 } from "../../types/Events";
+import Transformer from "./Transformer";
 
 type MapTokenProps = {
   tokenState: TokenState;
@@ -41,6 +42,7 @@ type MapTokenProps = {
   draggable: boolean;
   fadeOnHover: boolean;
   map: Map;
+  selected: boolean;
 };
 
 function Token({
@@ -52,6 +54,7 @@ function Token({
   draggable,
   fadeOnHover,
   map,
+  selected,
 }: MapTokenProps) {
   const userId = useUserId();
 
@@ -193,6 +196,22 @@ function Token({
     }
   }
 
+  const tokenRef = useRef<Konva.Group>(null);
+  function handleTransformEnd(event: Konva.KonvaEventObject<Event>) {
+    if (tokenRef.current) {
+      const sizeChange = event.target.scaleX();
+      const rotation = event.target.rotation();
+      onTokenStateChange({
+        [tokenState.id]: {
+          size: tokenState.size * sizeChange,
+          rotation: rotation,
+        },
+      });
+      tokenRef.current.scaleX(1);
+      tokenRef.current.scaleY(1);
+    }
+  }
+
   const minCellSize = Math.min(
     gridCellPixelSize.width,
     gridCellPixelSize.height
@@ -228,68 +247,73 @@ function Token({
   }
 
   return (
-    <animated.Group
-      {...props}
-      width={tokenWidth}
-      height={tokenHeight}
-      draggable={draggable}
-      onMouseDown={handlePointerDown}
-      onMouseUp={handlePointerUp}
-      onMouseEnter={handlePointerEnter}
-      onMouseLeave={handlePointerLeave}
-      onTouchStart={handlePointerDown}
-      onTouchEnd={handlePointerUp}
-      onClick={handleClick}
-      onTap={handleClick}
-      onDragEnd={handleDragEnd}
-      onDragStart={handleDragStart}
-      onDragMove={handleDragMove}
-      opacity={tokenState.visible ? tokenOpacity : 0.5}
-      name={tokenName}
-      id={tokenState.id}
-    >
-      <Group
+    <>
+      <animated.Group
+        {...props}
         width={tokenWidth}
         height={tokenHeight}
-        x={0}
-        y={0}
-        rotation={tokenState.rotation}
-        offsetX={tokenWidth / 2}
-        offsetY={tokenHeight / 2}
+        draggable={draggable}
+        onMouseDown={handlePointerDown}
+        onMouseUp={handlePointerUp}
+        onMouseEnter={handlePointerEnter}
+        onMouseLeave={handlePointerLeave}
+        onTouchStart={handlePointerDown}
+        onTouchEnd={handlePointerUp}
+        onClick={handleClick}
+        onTap={handleClick}
+        onDragEnd={handleDragEnd}
+        onDragStart={handleDragStart}
+        onDragMove={handleDragMove}
+        opacity={tokenState.visible ? tokenOpacity : 0.5}
+        name={tokenName}
+        id={tokenState.id}
       >
-        <TokenOutline
-          outline={getScaledOutline(tokenState, tokenWidth, tokenHeight)}
-          hidden={!!tokenImage}
-        />
-      </Group>
-      <KonvaImage
-        width={tokenWidth}
-        height={tokenHeight}
-        x={0}
-        y={0}
-        image={tokenImage}
-        rotation={tokenState.rotation}
-        offsetX={tokenWidth / 2}
-        offsetY={tokenHeight / 2}
-        hitFunc={() => {}}
+        <Group
+          ref={tokenRef}
+          rotation={tokenState.rotation}
+          offsetX={tokenWidth / 2}
+          offsetY={tokenHeight / 2}
+        >
+          <Group width={tokenWidth} height={tokenHeight} x={0} y={0}>
+            <TokenOutline
+              outline={getScaledOutline(tokenState, tokenWidth, tokenHeight)}
+              hidden={!!tokenImage}
+            />
+          </Group>
+          <KonvaImage
+            width={tokenWidth}
+            height={tokenHeight}
+            x={0}
+            y={0}
+            image={tokenImage}
+            hitFunc={() => {}}
+          />
+          <Group>
+            {tokenState.statuses?.length > 0 ? (
+              <TokenStatus
+                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>
+      </animated.Group>
+      <Transformer
+        active={selected}
+        nodeRef={tokenRef}
+        onTransformEnd={handleTransformEnd}
       />
-      <Group offsetX={tokenWidth / 2} offsetY={tokenHeight / 2}>
-        {tokenState.statuses?.length > 0 ? (
-          <TokenStatus
-            tokenState={tokenState}
-            width={tokenWidth}
-            height={tokenHeight}
-          />
-        ) : null}
-        {tokenState.label ? (
-          <TokenLabel
-            tokenState={tokenState}
-            width={tokenWidth}
-            height={tokenHeight}
-          />
-        ) : null}
-      </Group>
-    </animated.Group>
+    </>
   );
 }
 

src/components/konva/Transformer.tsx

@@ -0,0 +1,113 @@
+import Konva from "konva";
+import { Transform } from "konva/lib/Util";
+import { useEffect, useRef } from "react";
+import { Transformer as KonvaTransformer } from "react-konva";
+
+import { useSetPreventMapInteraction } from "../../contexts/MapInteractionContext";
+
+type ResizerProps = {
+  active: boolean;
+  nodeRef: React.RefObject<Konva.Node>;
+  onTransformStart?: (event: Konva.KonvaEventObject<Event>) => void;
+  onTransformEnd?: (event: Konva.KonvaEventObject<Event>) => void;
+};
+
+function Transformer({
+  active,
+  nodeRef,
+  onTransformStart,
+  onTransformEnd,
+}: ResizerProps) {
+  const setPreventMapInteraction = useSetPreventMapInteraction();
+
+  const transformerRef = useRef<Konva.Transformer>(null);
+  useEffect(() => {
+    if (active && transformerRef.current && nodeRef.current) {
+      // we need to attach transformer manually
+      transformerRef.current.nodes([nodeRef.current]);
+      transformerRef.current.getLayer()?.batchDraw();
+    }
+  }, [active, nodeRef]);
+
+  const movingAnchorRef = useRef<string>();
+  function handleTransformStart(e: Konva.KonvaEventObject<Event>) {
+    if (transformerRef.current) {
+      movingAnchorRef.current = transformerRef.current._movingAnchorName;
+      if (active) {
+        setPreventMapInteraction(true);
+      }
+      onTransformStart && onTransformStart(e);
+    }
+  }
+
+  function handleTransformEnd(e: Konva.KonvaEventObject<Event>) {
+    if (active) {
+      setPreventMapInteraction(false);
+    }
+    onTransformEnd && onTransformEnd(e);
+  }
+
+  if (!active) {
+    return null;
+  }
+
+  return (
+    <KonvaTransformer
+      ref={transformerRef}
+      boundBoxFunc={(oldBox, newBox) => {
+        let snapBox = { ...newBox };
+        const movingAnchor = movingAnchorRef.current;
+        if (movingAnchor === "middle-left" || movingAnchor === "middle-right") {
+          const deltaWidth = newBox.width - oldBox.width;
+          // Account for node ratio
+          const inverseRatio =
+            Math.round(oldBox.height) / Math.round(oldBox.width);
+          const deltaHeight = inverseRatio * deltaWidth;
+
+          // Account for node rotation
+          // Create a transform to unrotate the x,y position of the Box
+          const rotator = new Transform();
+          rotator.rotate(-snapBox.rotation);
+
+          // Unrotate and add the resize amount
+          let rotatedMin = rotator.point({ x: snapBox.x, y: snapBox.y });
+          rotatedMin.y = rotatedMin.y - deltaHeight / 2;
+
+          // Rotated back
+          rotator.invert();
+          rotatedMin = rotator.point(rotatedMin);
+
+          snapBox = {
+            ...snapBox,
+            height: snapBox.height + deltaHeight,
+            x: rotatedMin.x,
+            y: rotatedMin.y,
+          };
+        }
+
+        if (snapBox.width < 5 || snapBox.height < 5) {
+          return oldBox;
+        }
+        return snapBox;
+      }}
+      onTransformStart={handleTransformStart}
+      onTransformEnd={handleTransformEnd}
+      centeredScaling={true}
+      rotationSnaps={[...Array(24).keys()].map((n) => n * 15)}
+      rotateAnchorOffset={20}
+      anchorCornerRadius={10}
+      enabledAnchors={["middle-left", "middle-right"]}
+      flipEnabled={false}
+      ignoreStroke={true}
+      borderStroke="transparent"
+      anchorStroke="hsl(210, 50%, 96%"
+      anchorFill="hsla(230, 25%, 15%, 80%)"
+      anchorStrokeWidth={3}
+      borderStrokeWidth={2}
+      anchorSize={15}
+      useSingleNodeRotation={true}
+    />
+  );
+}
+
+export default Transformer;

src/components/token/TokenMenu.tsx

@@ -2,8 +2,6 @@ import React, { useEffect, useState } from "react";
 import { Box, Input, Flex, Text, IconButton } from "theme-ui";
 import Konva from "konva";
 
-import Slider from "../Slider";
-
 import MapMenu from "../map/MapMenu";
 
 import colors, { Color, colorOptions } from "../../helpers/colors";
@@ -33,7 +31,6 @@ type TokenMenuProps = {
   map: Map | null;
 };
 
-const defaultTokenMaxSize = 6;
 function TokenMenu({
   isOpen,
   onRequestClose,
@@ -46,12 +43,10 @@ function TokenMenu({
 
   const wasOpen = usePrevious(isOpen);
 
-  const [tokenMaxSize, setTokenMaxSize] = useState(defaultTokenMaxSize);
   const [menuLeft, setMenuLeft] = useState(0);
   const [menuTop, setMenuTop] = useState(0);
   useEffect(() => {
     if (isOpen && !wasOpen && tokenState) {
-      setTokenMaxSize(Math.max(tokenState.size, defaultTokenMaxSize));
       // Update menu position
       if (tokenImage) {
         const imageRect = tokenImage.getClientRect();
@@ -89,19 +84,6 @@ function TokenMenu({
     });
   }
 
-  function handleSizeChange(event: React.ChangeEvent<HTMLInputElement>) {
-    const newSize = parseFloat(event.target.value);
-    tokenState && onTokenStateChange({ [tokenState.id]: { size: newSize } });
-  }
-
-  function handleRotationChange(event: React.ChangeEvent<HTMLInputElement>) {
-    const newRotation = parseInt(event.target.value);
-    tokenState &&
-      onTokenStateChange({
-        [tokenState.id]: { rotation: newRotation },
-      });
-  }
-
   function handleVisibleChange() {
     tokenState &&
       onTokenStateChange({
@@ -223,42 +205,6 @@ function TokenMenu({
               </Box>
             ))}
         </Box>
-        <Flex sx={{ alignItems: "center" }}>
-          <Text
-            as="label"
-            variant="body2"
-            sx={{ width: "40%", fontSize: "16px" }}
-            p={1}
-          >
-            Size:
-          </Text>
-          <Slider
-            value={(tokenState && tokenState.size) || 1}
-            onChange={handleSizeChange}
-            step={0.5}
-            min={0.5}
-            max={tokenMaxSize}
-            mr={1}
-          />
-        </Flex>
-        <Flex sx={{ alignItems: "center" }}>
-          <Text
-            as="label"
-            variant="body2"
-            sx={{ width: "65%", fontSize: "16px" }}
-            p={1}
-          >
-            Rotate:
-          </Text>
-          <Slider
-            value={(tokenState && tokenState.rotation) || 0}
-            onChange={handleRotationChange}
-            step={15}
-            min={0}
-            max={360}
-            mr={1}
-          />
-        </Flex>
         {/* Only show hide and lock token actions to map owners */}
         {map && map.owner === userId && (
           <Flex sx={{ alignItems: "center", justifyContent: "space-around" }}>

src/hooks/useMapTokens.tsx

@@ -96,6 +96,10 @@ function useMapTokens(
             }
             fadeOnHover={selectedToolId === "drawing"}
             map={map}
+            selected={
+              !!tokenMenuOptions &&
+              tokenMenuOptions.tokenStateId === tokenState.id
+            }
           />
         ))}
     </Group>