Ellipse transformer event....??

If you change the size, it will be greatly enlarged or reduced. Do you have anything to fix?

` import React from ‘react’; import { Ellipse, Circle, Transformer } from ‘react-konva’; import clamp from “clamp”;

      const CircleComponent = ({  shapeProps, tool, isSelected, onSelect, onChange, toolboxUse }) => {
        const shapeRef = React.useRef();
        const trRef = React.useRef();
      
        React.useEffect(() => {
          if (tool == "cursor" && isSelected && toolboxUse) {
            trRef.current.nodes([shapeRef.current]);
            trRef.current.getLayer().batchDraw();
          }
        }, [isSelected]);
      
        return (
          <React.Fragment>
            <Ellipse
              onClick={onSelect}
              onTap={onSelect}
              ref={shapeRef}
              strokeScaleEnabled={false}
              {...shapeProps}
              draggable={tool == "cursor" && toolboxUse}
              onDragEnd={(e) => {
                onChange({
                  ...shapeProps,
                  x: e.target.x(),
                  y: e.target.y(),
                });
              }}
              onTransformEnd={(e) => {
                const node = shapeRef.current;
      
                let radiusX = Math.floor(node.width() * node.scaleX() / 2);
                let radiusY = Math.floor(node.height() * node.scaleY() / 2);
      
                let param = {
                  fill: shapeProps.fill,
                  id: shapeProps.id,
                  key: shapeProps.key,
                  regId: shapeProps.regId,
                  scaleX: 1,
                  scaleY: 1,
                  stroke: shapeProps.stroke,
                  strokeWidth: shapeProps.strokeWidth,
                  tool: shapeProps.tool,
                  x: node.x(),
                  y: node.y(),
                  rotation : node.attrs.rotation,
                  radiusX : radiusX,
                  radiusY : radiusY,
                  width : node.width(),
                  height : node.height()
                };
      
                console.log(param);
                onChange(param);
              }}
            />
            {tool == "cursor" && isSelected && toolboxUse && (
              <Transformer
                ref={trRef}
                centeredScaling={true}
                boundBoxFunc={(oldBox, newBox) => {
                  console.log(oldBox);
                  console.log(newBox);
                  // if (newBox.width > 200) {
                  //   return oldBox;
                  // }
                  return newBox;
                }}
              />
            )}
          </React.Fragment>
        );
      };
      
      export default CircleComponent;

`

https://user-images.githubusercontent.com/36141397/108816214-1dab3c80-75f9-11eb-9715-af97bd01a8e2.mp4

[lavrton]

I see the issue.

width : node.width(),
height : node.height()

Do not specify width/height for an ellipse. It is a duplication from radiusX and radiusY. And looks like it produces conflict in attributes settings.

Fixed version: https://codesandbox.io/s/sleepy-cloud-7h8lh?file=/src/component/CircleComponent.js

[lavrton]

Can you please make a small codesandbox demo?