Transformer is not reusable about react-konva

[lavrton]

Please make a demo.

[rjungbeck]

I actually wrote a demo. But that was working correctly and helped me understand how Transformers (with multiple attached objects) work.

My orginal problem had to do with the way I handled onTransformEnd./ onDragEnd.

Maybe the documentation should describe that the events can be handled on ihe individual objects (even when using a Transformer to move or resize multiple objects). It also seems to be neccessary to reset scaleX and scaleY after during onEndtransform to 1

Here is my demo (as it might help others how it is supposed to work)

import React, {useState, useRef, useEffect} from "react";

import {Stage, Layer, Rect, Transformer, Group} from "react-konva";
import {Portal} from "react-konva-utils";

const initialConfigs = [
    {x: 0, y: 0, width: 100, height: 100, fill: "red", selected: false},
    {x: 200, y: 200, width: 100, height: 100, fill: "green", selected: false},
    {x: 400, y: 400, width: 100, height: 100, fill: "orange", selected: false},
    ];

const App = ({}) =>{
    const [configs, setConfigs] = useState(initialConfigs);

    const transformerRef = useRef();

    const handleUpdate = (index, values) => {
        console.log(index, values);
        setConfigs((oldConfigs) => {
            var newConfigs = structuredClone(oldConfigs);
            newConfigs[index] = {...newConfigs[index], ...values};
            return newConfigs;
            });
        }

    const handleOnlySelected = (newIndex) => {
        setConfigs((oldConfigs) => {
            var newConfigs = oldConfigs.map((config, index) => {
                return {...config, selected:index==newIndex};
                });
            return newConfigs;
            })
        }

    const boxes = configs.map((config, index) => {
        return <Box key={index} index={index} {...config} transformerRef={transformerRef} onUpdate={handleUpdate} onOnlySelected={handleOnlySelected}/>;
        });

    return  <div style= {{width: "95vw", height: "90vh", backgroundColor: "blue", overflow: "auto"}}>
                <Stage width={1000} height={1000}>
                    <Layer>
                        {boxes}
                        <Group name={"top"} />
                        <Transformer ref={transformerRef} />
                    </Layer>
                </Stage>
            </div>;
        }

const Box = ({transformerRef, index, selected, onUpdate, onOnlySelected,  ...rest}) => {
    const boxRef = useRef();

    const handleClick = () => {
        onUpdate(index,{selected: !selected});
        }

    const handleDragStart = (event) => {
        if (!selected) {
            onOnlySelected(index);
            }
        }

    const handleDragEnd = (event) => {
        const node = boxRef.current;
        onUpdate(index, {x: node.x(), y: node.y()});
        }

    const handleTransformEnd = (event) => {
        const node = boxRef.current;
        const newPos = {x: node.x(), y: node.y(), width: node.width() *node.scaleX(), height: node.height()*node.scaleY() };
        node.scaleX(1);
        node.scaleY(1);
        onUpdate(index, newPos);
        }

    useEffect(() => {
        var curNodes = transformerRef.current?.nodes();

        if (selected) {
            if (!curNodes.includes(boxRef.current)) {
                curNodes = [...curNodes, boxRef.current];
                transformerRef.current?.nodes(curNodes);
                }
            } else {
            if (curNodes.includes(boxRef.current)) {
                var curNodes = curNodes.filter((node) => node!=boxRef.current);
                transformerRef.current?.nodes(curNodes);
                }
            }
        }, [selected, transformerRef])

    console.log("Drawing", index, rest);

    return <Portal selector={".top"} enabled={selected}>
                <Rect ref={boxRef} {...rest} onClick={handleClick} draggable={true}  onTransformEnd={handleTransformEnd} onDragStart={handleDragStart} onDragEnd={handleDragEnd}/>
            </Portal>
    }

export default App;