import './App.css'

function App() {

  return (
    <>
      <h1>React + Konva</h1>
    </>
  )
}

export default App

// Canvas.jsx

import './Canvas.css';

function Canvas() {
    return (
        <div id="canvas">
            <p>test</p>
        </div>
    );
}

export default Canvas;

// App.jsx

import './App.css';
import Canvas from './components/Canvas';

function App() {

  return (
    <>
      <h1>React + Konva</h1>
      <Canvas />
    </>
  )
}

export default App;

// Canvas.jsx

import './Canvas.css';
import { Stage, Layer, Rect } from 'react-konva';

function Canvas() {
    return (
        <Stage id="canvas" width={window.innerWidth} height={window.innerHeight}>
            <Layer>
                <Rect
                    x={20}
                    y={20}
                    width={50}
                    height={50}
                    fill={'green'}
                    />
            </Layer>
        </Stage>
    );
}

export default Canvas;

// Canvas.jsx

import { useState } from 'react';
import { Stage, Layer, Rect } from 'react-konva';

import './Canvas.css';

function Canvas() {
    // Property to hold the x and y position for use in the project.
    const [rectXY, setRectXY] = useState({
        x: 0,
        y: 0
    });

    // Function to update the property values with the new position.
    const handleRectChangePos = (event) => {
        setRectXY({
            x: event.target.x(),
            y: event.target.y()
        })
    };

    return (
        <>
            {/* Write coordinates to the screen. */}
            <p>Coordinates: ({Math.round(rectXY.x)}, {Math.round(rectXY.y)})</p>
            
            <Stage id="canvas" width={window.innerWidth} height={window.innerHeight}>
                <Layer>
                    {/* `draggable` allows us to drag the rectangle around. */}
                    {/*
                        The rectXY property is not automatically updated
                        so we need to call `handleRectChangePos()`.
                    */}
                    <Rect
                        draggable
                        onDragEnd={handleRectChangePos}
                        {...rectXY}
                        width={50}
                        height={50}
                        fill={'green'}
                        />
                </Layer>
            </Stage>
        </>
    );
}

export default Canvas;