CODEWITHSUNDEEP
javascriptfabricjs
Kieran E
Kieran E

Reputation: 3666

Deleting multiple paths in FabricJS

I'm creating a collaborative drawing app using Fabric. Due to the nature of this app, it's better for people to delete all of their lines at once than to implement some sort of undo/erase functionality.

I've tried iterating over the list of paths, like so:

canvas.getObjects().forEach((path) => {
  if(path.senderId === client.id){
    canvas.remove(path);
  }
});

// Or

let paths = canvas.getObjects().filter(path => path.senderId === client.id);

while(paths.length) {
  canvas.remove(paths[0]);
}

The first one doesn't work, since removing the path modifies the length of the array (as discussed here). However, the second one runs forever and I'm not sure why.

If this is the wrong approach, please let me know. Thanks!

Upvotes: 1

Views: 664

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

one nice and concise way is to do:

canvas.getObjects('path').forEach((path) => {
  if(path.senderId === client.id){
    canvas.remove(path);
  }
});

In this way getObjects will return a new array and you should be able to remove them without getting mad with which array you are working on.

I believe getObjects() should always return a shallow copy for easy handling of those situations. If someone has some performance concerns can still access canvas._objects directly.

Upvotes: 1

Related Questions