0

So I have updated my previous react-konva example code with my latest problem: https://codesandbox.io/s/react-konva-drag-and-drop-image-with-delete-button-on-tranform-6977j?file=/src/Draganddrop.js

I am trying to add a delete button to every image that is visible when selected and when clicked removes the image that's selected from the stage and from the images array which I will eventually use to save and load state. I have managed to add the red circle and get it functioning as a delete button, but I cannot seem to move it to the top right of each image or add a white cross to the centre of the red circle.

The delete function itself removes the selected image from the images array and removes the node from the stage, but sometimes seems to remove multiple images from the stage even though it only ever removes the selected one from the array. I need it to only remove the one that is selected from the stage, I am current using UseRef to identify it, am i doing this wrong is there a better way to ensure it just removes the selected image?

Soultide
  • 15
  • 3
  • as an update to the second point i have now fixed it, I was using the .destroy() to destroy the node from the stage and in the same function then removing the data from the array that's mapped to the image tag, so by removing the destroy function it now just removes it from the array and therefore from the stage. – Soultide Sep 01 '21 at 14:13
  • By means of another update to my own point 1, i fixed the location of the red circle by using the imageRef.current.width() and multiplying it by the stageScale that i pass to it through props. this allows me to move the red circle to thte top right od each image and stay there onWheel scroll (zoom) Still no white cross, but maybe one day. – Soultide Sep 09 '21 at 07:54

1 Answers1

0

You should rewrite this part of your code:

const onDeleteImage = (node) => {
    const newImages = [...images];
    newImages.splice(node.index, 1);
    setImages(newImages);
};

Try not to use Konva instances when working with your state. node.index may be not equal to index of your image from the state. Because you may have many elements on the canvas, not just images (as in your example, you also have transformer). It effects Konva indexes. Instead, you should use your indexes from the state;

const onDeleteImage = (index) => {
    const newImages = [...images];
    newImages.splice(index, 1);
    setImages(newImages);
};

// in jsx
{images.map((image, index) => {
  return (
    <URLImage
      onDelete={() => onDeleteImage(index)}
    />
  );
})}
lavrton
  • 18,973
  • 4
  • 30
  • 63
  • Thank you I hadn't realised about the indexing being different with the transformer I will update this to make sure it selecting the correct index. Did you have any tips for the best way for me to move the red circle that's acting as a delete button at all please? the white cross in the centre is less important but would be a nice touch too, I have tried using the X prop to the circle to offset it to the width on the node that is being selected which works fine until I use the stage onWheel to zoom in and out I cant get the location of the red circle to change with the scaling. – Soultide Sep 02 '21 at 14:44