Не удается получить доступ к дочерним элементам Konva Stage после клонирования

У меня проблема с конвайсом. У меня есть этап konva, который я клонирую во временный этап, поэтому я могу отменить изменения, сделанные пользователем, когда пользователь отменяет их. Я делаю это следующим образом: я клонирую существующий этап во временный, уничтожаю дочерние элементы исходного, а затем перемещаю дочерние элементы временного этапа обратно в исходный и уничтожаю временный этап. Проблема в том, что когда я пытаюсь получить доступ к дочерним элементам сейчас, например, через findOne ('# id-of-child'), я получаю значение undefined, хотя дочерние элементы существуют.

Вот что я сделал до сих пор:

clone: function()
{
  var cloned_stage = this.stage.clone();

  Array.each(this.stage.getChildren(), function(layer, lidx) {
    if (layer.attrs.id) {
      // setting the id to the ones, the children had before
      cloned_stage.children[lidx].attrs.id = layer.attrs.id;
    }
  });
  return cloned_stage;
},

restore: function(tmp_stage)
{
  this.stage.destroyChildren();

  Array.each(tmp_stage.getChildren(), function(layer, lidx) {
    var tmp_layer = layer.clone();
    tmp_layer.attrs.id = layer.attrs.id;
    tmp_layer.moveTo(this.stage);
  }.bind(this));
  tmp_stage.destroy();
  this.stage.draw();
},

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

some_child_of_the_stage.getLayer();      ->     returns null 
var edit_layer = this.stage.findOne('#edit-layer');     ->    returns undefined

Но «some_child_of_the_stage» действительно существует и, конечно же, имеет слой, а у сцены есть дочерний элемент с идентификатором «edit-layer».

Я и мой коллега находимся на грани остроумия.

Я ценю любую помощь и предложения, спасибо.

Обновление: короткая скрипка, показывающая проблему через console.log: скрипка


person GiftZwergrapper    schedule 30.08.2016    source источник
comment
Можете ли вы сделать jsFiddle, чтобы люди, не знакомые с Konva.js, могли его тестировать?   -  person Sergio    schedule 30.08.2016


Ответы (1)


  1. Лучше не трогать attrs свойство узла и использовать публичные геттеры и сеттеры.

  2. Konva имеет специальную логику для хранения свойства id. Селектор по id #edit-layer может не работать из-за прямого доступа к attrs id.

  3. В этом случае вы можете использовать свойство name.

https://jsfiddle.net/s36hepvg/12/

person lavrton    schedule 30.08.2016
comment
Это решает проблему для this.stage.findOne('#edit-layer');, но проблема с функцией getLayer() все еще существует. Просто кажется, что есть какое-то кеширование или что-то в этом роде, потому что, когда я клонирую сцену, элементы на ней по-прежнему выводят тот же идентификатор, когда я добавляю событие щелчка, которое выводится через console.log(). - person GiftZwergrapper; 30.08.2016
comment
Вы можете добавить демо? - person lavrton; 31.08.2016
comment
layer здесь нулевой, потому что вы вызвали stage.destroyChildren();. destroy очистит все внутренние ссылки и отношения родитель-потомок. - person lavrton; 01.09.2016
comment
Да, но я клонировал this.stage в tmp_stage перед вызовом this.stage.destroyChildren(), а затем перемещаю слои с tmp_stage обратно на this.stage. Я действительно не понимаю, почему уничтожение потомков this.stage имеет такой эффект при таком подходе. - person GiftZwergrapper; 01.09.2016
comment
Вы вызываете rect.getLayer(), но rect - это ссылка на уничтоженный узел. - person lavrton; 02.09.2016
comment
Я также пытаюсь клонировать этап, а затем получить доступ к дочерним элементам клонированного этапа, но они отображаются в объекте, но при попытке доступа они не определены. var clonedStage = stage.clone();console.log(clonedStage.findOne('#documentLayer')); Мне кажется простым, но на самом деле не работает. Я не вызываю никаких методов уничтожения. - person stwhite; 03.11.2019