Исчезновение элементов изображения Konva

Question

Я создаю своего рода редактор изображений с помощью Konva. У меня есть меню, где изображения выбираются и добавляются на сцену. Он работал нормально, пока я не добавил возможность добавлять несколько изображений.

Публикация кода была бы очень трудоемкой для любого, чтобы прочитать, но в случае, если кто-то испытал ту же проблему,...

Функция устанавливает переменную 'active' в true, когда элемент выбирается. В тех же элементах выбирается снова, для 'active' будет установлено значение false. Это работает отлично, проблема возникает, когда я устанавливаю переменную 'active' элемента в false, щелкая где-нибудь вокруг него.

Раньше он просто отменял выбор и оставался на своем месте, но теперь, когда я отменяю его выбор извне, весь элемент становится невидимым. У меня есть свойство visible для каждого элемента, но оно имеет значение true и не изменяется во время этого процесса.

1. Элементы функции onClick:

    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. Внешняя функция отмены выбора:

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

Теперь, даже если какой-либо из них изменяет любое другое свойство элементов, и никакая другая функция не вызывается, я не понимаю, почему элементы становятся невидимыми при отмене выбора.

Любые идеи или комментарии хорошо приняты, спасибо.

---

Чтобы было понятно, '2. Внешняя функция отмены выбора 'вызывает пару функций в другом компоненте, который делает то же самое, что и'1. Элементы onClick '. Устанавливает для активного свойства значение false, а затем удаляет элемент из файла редуктора редакции элемента.

Answer 1

Я полагаю, что проблема заключалась в том, что компонент Konva.image требует, чтобы узел изображения ссылался на него при создании. При отмене выбора изображения со сцены React.Component, где находился начальный узел изображения, не будет визуализироваться до тех пор, пока Konva.image снова не будет выбран, поэтому Konva.image терял эту ссылку на изображение для отображения в это и оно исчезло.

Вот почему сам компонент все еще будет на сцене, но изображение не будет отображаться, пока Konva.image не будет снова выбран.

Я просто сохранил состояние Konva.image перед повторным рендерингом компонента, в котором ссылочный узел Image не собирался повторный рендеринг. Надеюсь, это достаточно ясно.

Спасибо за помощь.