I’m new on Pixi React and trying to do a 2D floor plans, and I found something on the internet like Demo, having problem with drawing and moving the lines and the Stage.

bhavita

If you see on the Demo above, the Stage the lines and the corners are movable, and the way he draw the Line are different from mine

 const [isDrawing, setIsDrawing] = useState(false);
    const [lineData, setLineData] = useState([]);
    const graphicsRef = useRef();

    const handleMouseDown = (event) => {
        const { offsetX, offsetY } = event.nativeEvent;
        setIsDrawing(true);
        setLineData([{ x: offsetX, y: offsetY }]);
    };

    const handleMouseMove = (event) => {
        if (!isDrawing) return;
        const { offsetX, offsetY } = event.nativeEvent;
        const updatedLineData = [...lineData, { x: offsetX, y: offsetY }];
        setLineData(updatedLineData);
        drawLine(updatedLineData);
    };

    const handleMouseUp = () => {
        setIsDrawing(false);
    };

    const drawLine = (lineData) => {
        const graphics = graphicsRef.current;
        graphics.clear();
        graphics.lineStyle(2, 0xff0000);
        graphics.moveTo(lineData[0].x, lineData[0].y);
        for (let i = 1; i < lineData.length; i++) {
            const point = lineData[i];
            graphics.lineTo(point.x, point.y);
        }
    };

In conclution, my problem is :

1. how can I drag and move the hole stage like in Demo?
2. how can I create the line by clicking and not dragging?