How To react to radius and center changes for circle?

[shadowvzs]

How To react to radius and center changes for circle?

Hi, how can i use / do callbacks for Circle center/radius changes because atm is editable but cannot detect it when it was changed

This will be shown but ofc never called the props

  { circles.map(x => <Circle {...x} onRadiusChanged={e => console.log('---',e)} />) }

i tried wrap it but it now show at map also i realized at ref i get back an react component but not a refObject :/

const CircleV2 = (props: { circle: ICircle }) => {
    const circle = props.circle;
    console.log(props)
    const circleRef = useRef<HTMLElement>(null);

    useEffect(() => {
        if (!circleRef.current) { return; }
        const { events } = circle;

        const onCenterChange = () => {
            console.log('on center change')
            if (events.center_changed) {
                events.center_changed(circle, 'center_changed', circle);
            }
        };

        const onRadiusChange = () => {
            console.log('on radius change')
            if (events.radius_changed) {
                events.radius_changed(circle, 'radius_changed', circle);
            }
        };

        circleRef.current.addEventListener('center_changed',  onCenterChange);
        circleRef.current.addEventListener('radius_changed',  onRadiusChange);

        return () => {
            circleRef.current.removeEventListener('center_changed',  onCenterChange);
            circleRef.current.removeEventListener('radius_changed',  onRadiusChange);
        };
    }, []);

    return (
        <Circle ref={(...a) => console.log(a)} {...circle} key={circle.id} />
    );
};