Hi im building a collaborative whiteboard app with Konva. I want to drag images on the canvas and also make it displayed to the other clients connected to the app. I've tried to do some things but its not really working.. Here is what im trying to do:
{loadImages.map(image => (
<img id="img" className="img"
src={image.picture}
width="200"
height="200"
onDragStart={(e) => {
dragUrl.current = e.target.src;}}
/>
))}
<div
onDrop={(e) => {
e.preventDefault();
// register event position
stageEl.current.setPointersPositions(e);
// add image
setImages(
images.concat([
{
...stageEl.current.getPointerPosition(),
src: dragUrl.current,
},
])
);
socket.emit("canvas-data", [
{
...stageEl.current.getPointerPosition(),
src: dragUrl.current,
},
])
}}
onDragOver={(e) =>
e.preventDefault()
}
>
When the image gets dropped the image data is emitted to the socket server. An example of the image data would be this:
[ { x: 457.90001572844375,
y: 126.92498779296875,
src: 'http://localhost:3000/images/kitten.jpg' } ]
Then the image data gets received here:
socket.on("canvas-data", function(data){
var interval = setInterval(function(){
clearInterval(interval);
var stageData = JSON.parse(JSON.stringify(data));
console.log(stageData[0].x);
var layer = new Konva.Layer();
var image = new Konva.Image(
{
x: stageData[0].x,
y: stageData[0].y,
src: stageData[0].src
})
layer.add(image);
stageEl.current.add(layer);
})
}, 200)
Why is the dropped image still not being shown on other clients?
