diff --git a/src/components/konva/Transformer.tsx b/src/components/konva/Transformer.tsx index 7c49d80..7350f1d 100644 --- a/src/components/konva/Transformer.tsx +++ b/src/components/konva/Transformer.tsx @@ -1,6 +1,6 @@ import Konva from "konva"; import { Transform } from "konva/lib/Util"; -import { useEffect, useRef } from "react"; +import { useEffect, useMemo, useRef } from "react"; import { Transformer as KonvaTransformer } from "react-konva"; import { useGridCellPixelSize } from "../../contexts/GridContext"; @@ -8,6 +8,9 @@ import { useSetPreventMapInteraction } from "../../contexts/MapInteractionContex import { roundTo } from "../../helpers/shared"; import Vector2 from "../../helpers/Vector2"; +import scaleDark from "../../images/ScaleDark.png"; +import rotateDark from "../../images/RotateDark.png"; + type ResizerProps = { active: boolean; nodeRef: React.RefObject; @@ -25,14 +28,42 @@ function Transformer({ const gridCellPixelSize = useGridCellPixelSize(); + const anchorScale = useMemo(() => getAnchorImage(192, scaleDark), []); + const anchorRotate = useMemo(() => getAnchorImage(192, rotateDark), []); + const transformerRef = useRef(null); useEffect(() => { if (active && transformerRef.current && nodeRef.current) { // we need to attach transformer manually transformerRef.current.nodes([nodeRef.current]); + + const middleLeft = + transformerRef.current.findOne(".middle-left"); + const middleRight = + transformerRef.current.findOne(".middle-right"); + const rotater = transformerRef.current.findOne(".rotater"); + + middleLeft.fillPriority("pattern"); + middleLeft.fillPatternImage(anchorScale); + middleLeft.strokeEnabled(false); + middleLeft.fillPatternScaleX(-0.25); + middleLeft.fillPatternScaleY(0.25); + + middleRight.fillPriority("pattern"); + middleRight.fillPatternImage(anchorScale); + middleRight.strokeEnabled(false); + middleRight.fillPatternScaleX(0.25); + middleRight.fillPatternScaleY(0.25); + + rotater.fillPriority("pattern"); + rotater.fillPatternImage(anchorRotate); + rotater.strokeEnabled(false); + rotater.fillPatternScaleX(0.25); + rotater.fillPatternScaleY(0.25); + transformerRef.current.getLayer()?.batchDraw(); } - }, [active, nodeRef]); + }, [active, nodeRef, anchorScale]); const movingAnchorRef = useRef(); function handleTransformStart(e: Konva.KonvaEventObject) { @@ -132,19 +163,38 @@ function Transformer({ 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} + borderStroke="invisible" + anchorStroke="invisible" + anchorCornerRadius={24} + borderStrokeWidth={0} + anchorSize={48} useSingleNodeRotation={true} /> ); } +function getAnchorImage(size: number, source: string) { + const canvas = document.createElement("canvas"); + canvas.width = size; + canvas.height = size; + const ctx = canvas.getContext("2d"); + const image = new Image(); + image.src = source; + image.onload = () => { + const imageRatio = image.width / image.height; + const imageWidth = canvas.height * imageRatio; + ctx?.drawImage( + image, + canvas.width / 2 - imageWidth / 2, + 0, + imageWidth, + canvas.height + ); + }; + return canvas; +} + export default Transformer; diff --git a/src/images/RotateDark.png b/src/images/RotateDark.png new file mode 100644 index 0000000..d8ec78d Binary files /dev/null and b/src/images/RotateDark.png differ diff --git a/src/images/ScaleDark.png b/src/images/ScaleDark.png new file mode 100644 index 0000000..20af45d Binary files /dev/null and b/src/images/ScaleDark.png differ