Is their a way to reset all properties on a group and it's children to default values? Or clone() a Node without causing duplicates to be added to the stage?

[MartinDawson]

Here's what I have tried right now:

  cacheOutOfViewportCells() {
    this.cellsMap.forEach((cell, cellId) => {
      if (!cell.group.isClientRectOnScreen()) {
        cell.text.setAttrs({
          ...this.cachedCellText.getAttrs(),
        });

        cell.rect.setAttrs({
          ...this.cachedCellRect.getAttrs(),
        });

        this.cachedCellsGroups.push(cell.group);
      }
    });
  }

So in the above code I am trying to just reset the attrs of Text and Rect.

The alternative would be to destroy() and new () a new Text and Rect up but that is much much slower in my performance tests so I cannot do that.

Basically I am looking for something like this: cell.rect.resetAttrs() which resets stuff like fill, stroke etc and any others that aren't default values.

I also thought of using the clone() method but whenever I try it, it ends up adding duplicate groups to my Stage, even when I set the id() of it to be the same as the previous group.

[MartinDawson]

Here's what I did in meantime:

    this.rect.fill(backgroundColor ?? 'white');

But I think default properties object would be easier than individually doing the above many times

[lavrton]

@magicienap are there issues with the first approach?

cell.text.setAttrs({
  ...this.cachedCellText.getAttrs(),
});

Currently, there is no simple API to reset to defaults. Only if you do that manually. Some options are:

// (1) set all to nulls (it will reset to defaults
const oldAttrs = node.getAttrs();
const resetValues = {};
for (var key in oldAttrs) {
  resetValues[key] = null;
}
node.setAttrs(resetValues);

// (2) probably this will work too:
node.attrs = {};
node._clearCache();

[MartinDawson]

Thanks, the first answer works well, I was doing it wrong before