edemaine / cocreate

Cocreate Shared Whiteboard/Drawing
MIT License
209 stars 27 forks source link

Big selections are slow #196

Closed edemaine closed 2 years ago

edemaine commented 2 years ago
  1. Selecting many objects takes a long time.
  2. Dragging many objects takes a long time.
  3. Deleting many objects takes a long time.

In each case, need to track down why. I hypothesize that it's about DOM manipulation, but should make sure it's not e.g. Meteor calls or finding the matching objects.

I think dragging in particular can be made much faster by modifying the existing selection objects, instead of destroying and rebuilding them. I think this is how it works already. Not sure about the others. #183 may offer some solutions.

We might also be able to simplify the selection renderer, e.g., using uniform pen stroke width for pen lines (ignore pressure sensitivity).

edemaine commented 2 years ago

It turns out that the main cause for this problem was an O(n^2) bug where we updated the selection outline after every item got added to the selection, and updating the outline involved computing the bounding box of all items in the selection (!). Delaying the update slightly fixed selecting (1) and deleting (3) especially.

Dragging (2) is still a little slow; presumably because of server interaction? At least I don't see why it's fundamentally different.

edemaine commented 2 years ago

Update: I found out why dragging was particularly slow. The selected versions of the objects were being redestroyed, modified, and reparsed as HTML. This is completely unnecessary when dragging, where we can just update the transform attribute. Much smoother now.