How to keep the Transformer active anchor stable during a single drag event?

[fallingleaflun]

Hi,

I'm using Konva and have encountered an issue with the Transformer component. When dragging a transformer anchor, the active anchor can change during the drag event, which is not the desired behavior. I would like to stop resizing when the selected anchor moves to the edge (e.g., stop resizing when the top-left anchor is dragged beyond the right edge or bottom edge). I tried to override the anchorDragBoundFunc and use transformer.getActiveAnchor to restrict the selected anchor, but it turns out that ActiveAnchor changes automatically. How can I achieve this goal?

[lavrton]

Can you make a simple demo and what you tried?

[fallingleaflun]

Can you make a simple demo and what you tried?
https://codesandbox.io/p/devbox/dazzling-rhodes-m8ncxy?workspaceId=ws_VsTWkRbLaJGqFM8HhuW7t7

import { Stage, Layer, Rect, Transformer } from "react-konva";
import { useRef, useEffect } from "react";

const App = () => {
  const rectRef = useRef();
  const trRef = useRef();
  const bbox = {
    x: 50,
    y: 50,
    width: 100,
    height: 100,
  };

  useEffect(() => {
    trRef.current.nodes([rectRef.current]);
    trRef.current.getLayer().batchDraw();
  }, []);

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Rect
          x={50}
          y={50}
          width={100}
          height={100}
          fill="yellow"
          stroke="black"
          draggable
          ref={rectRef}
        />
        <Transformer
          ref={trRef}
          anchorDragBoundFunc={(oldPos, newPos, evt) => {
            const anchor = trRef.current.getActiveAnchor();
            console.log(`current anchor is: ${anchor}`);
            if (!anchor) {
              return newPos;
            }
            if (anchor.includes("top-left")) {
              return {
                x: Math.min(newPos.x, bbox.x + bbox.width),
                y: Math.min(newPos.y, bbox.y + bbox.height),
              };
            }
            return newPos;
          }}
        />
      </Layer>
    </Stage>
  );
};

export default App;

[fallingleaflun]

Currently, when I hold and drag a specific anchor (e.g., the top-left anchor), the position of other anchors can also be affected if I move my mouse over them. I would like to request a feature that restricts the movement to only the selected anchor, ensuring that only the position of the anchor being dragged is modified.