Konva Image Elements Disapearing

Question

I am building sort of an image editor, with Konva. I have a menu where images get selected and added to the stage. It was working normally until I added the possibility to add multiple images.

To publish the code would be very time consuming for anyone to read, but in case anybody has experienced the same problem,...

A function sets a variable 'active' to true when an element gets selected. In the same elements gets selected again, 'active' would get set to false. This works perfectly, the problem appears when I set the element's 'active' variable to false by clicking anywhere around it.

It used to simply get deselected and stay in its place, but now when I deselect it from outside, the whole element turns invisible. I have a 'visible' property on each element too, but it is set to true and it doesn't change during this process.

1. Elements onClick function:

    onClick(){

      if (this.props.ElementReducer.element === null){
         // console.log("There is no element selected || I´m getting selected");
        this.setState({
          active: true
        });
        this.props.selectedElement(this.state);
      }else{
        if (this.props.ElementReducer.element.identity == this.state.identity){
          // console.log("I am already selected || I´m getting deselected");             
          this.setState({
            active: false
          });
          this.props.unSelectedElement();
        }else{
          // console.log("Something else is selected || I´m getting selected");                        
          this.props.prepareToUnSelectElement();
          setTimeout(()=> {
            this.props.unSelectedElement();
            this.setState({
              active: true
            });
            this.props.selectedElement(this.state);
          },10);
        }
      }
    }

2. External deselection function:

    deselectElement() {
      if (this.props.ElementReducer.selectedId !== -1) {
        this.props.prepareToUnSelectElement();
        setTimeout(this.props.unSelectedElement, 100);
      }
    }

Now even though any of them is changing any other property of the elements, and no other function is been called, I don't understand why the elements turn invisible when deselected.

Any ideas or comments are well received, Thanks.

To make it clear, the '2. External deselection function' calls a couple of functions in another component that does the same thing as the '1. Elements onClick function'. Sets the active property to false and it then removes the element from the element's edition reducer file.

Can you make a small online demo? I think you should check the properties of all nodes. Probably you have unexpected values somewhere. — lavrton, Oct 30 '18 at 13:43
Thanks @lavrton, I am also using redux to store the image elements and it keeps crashing when I try to see the properties on the extension. `window.Konva.stages` is helping to see all the properties. I will try to figure out where the problem is, and if nothing comes up, I will figure out a way to upload a demo with the problem in it. — Tomas Vich Cologan, Oct 30 '18 at 14:33

score 0 · Accepted Answer · answered Oct 31 '18 at 16:10

The problem, I assume, was that as the Konva.image component requires an image node to refer to when it is created. When de-selected the image from the stage, the React.Component, where the initial image node was, won't render until the Konva.image gets selected again, so the Konva.image was losing that reference of the image to display in it and it disappeared.

That is why the component itself would still be in the stage, but the image wasn't getting displayed until the Konva.image got selected again.

I simply saved the Konva.image state before re-rendering the component where the referenced Image node was not going to get re-rendered. I hope It is clear enough.

Thanks for the help.

Konva Image Elements Disapearing

1 Answers1