Search code examples
javascriptgroupingpaperjs

Remove Item from Paper.js Group


Paper.js has a clear way to add an Item to a Group using addChild(item). However, there does not seem to be a clear way to remove an Item from a Group without also removing that item itself from the view.

Groups have a children property, but according to the documentation, it should not be mutated:

The children array should not be modified directly using array functions. To remove single items from the children list, use item.remove(), to remove all items from the children list, use item.removeChildren(). To add items to the children list, use item.addChild(item) or item.insertChild(index, item).

So each item has a remove() method, but this not only removes it from the Group but also from the display.

How can I remove an Item from a Group, only dissociating it with the Group and not removing it from the display? Is there a cleaner way to do it than this?

item.remove();
paper.project.activeLayer.addChild(item);

Solution

  • Your approach

    item.remove();
    paper.project.activeLayer.addChild(item);
    

    is how it should be done. Unless you call paper.view.update() it's not going to re-render the canvas in between the two calls, so there is little cost in making the extra function call.