39 lines
1012 B
TypeScript
39 lines
1012 B
TypeScript
'use client';
|
|
import { Stage, Layer } from 'react-konva';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
|
|
export default function Konva() {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [dimensions, setDimensions] = useState({ width: 800, height: 600 });
|
|
|
|
useEffect(() => {
|
|
setDimensions({
|
|
width: window.innerWidth - 500,
|
|
height: window.innerHeight - 200,
|
|
});
|
|
}, []);
|
|
|
|
function handleDrop(e: React.DragEvent<HTMLDivElement>) {
|
|
e.preventDefault();
|
|
const data = e.dataTransfer.getData('text/plain');
|
|
console.log(JSON.parse(data));
|
|
}
|
|
|
|
function handleDragOver(e: React.DragEvent<HTMLDivElement>) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
onDrop={handleDrop}
|
|
onDragOver={handleDragOver}
|
|
className="w-4/5 h-4/5 border-[1px] rounded-md shadow-sm bg-neutral-800"
|
|
>
|
|
<Stage width={dimensions.width} height={dimensions.height} className="">
|
|
<Layer></Layer>
|
|
</Stage>
|
|
</div>
|
|
);
|
|
}
|