Dealing with computation-heavy reactive arrays?

1

So I have an SVG surface that I need to render a lot of complex objects too, and I’m trying to think of the most efficient way to do it.

So here’s a bit of pseudo-code… First up, my SVG surface:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>

Here’s a “naive” approach, whereby the svg is redrawn in it’s entirety if the database value is updated…

templateInstance.autorun(function () {
  var document = Drawing.findOne({ name: "example" }); // Reactive
  svg.clearAll();
  _.each(document.itemsToDraw, function(item) {
    svg.imaginaryComplexFn(item);
  });
});

This approach redraws the entire SVG if the database value is updated, but also allows the user to change the values “locally” before saving any changes.

templateInstance.autorun(function () {
  Session.set('drawing', Drawing.findOne({ name: "example" })); // Reactive
});

templateInstance.autorun(function () {
  var drawing = Session.get('drawing'); // Reactive
  svg.clearAll();
  _.each(document.itemsToDraw, function(item) {
    svg.imaginaryComplexFn(item);
  });
});

function updateItem (itemId, value) {
  var drawing = Session.get('drawing');
  var item = _.findWhere(drawing.itemsToDraw, { _id: itemId });
  item.value = value;
  Session.set('drawing', drawing); // Forces a reactive update
}

Now ideally, I’d like a solution that allows both a local copy to be modified without propagating the change to the server, and caters for the following situations:

  • The drawing is updated by another user -> Should force-refresh the current drawing losing all potential changes.
  • A drawing “item” is updated locally -> Should cause just that item to be re-drawn not the entire drawing.

Has anyone got any decent tips / design patterns that might help deal with this situation?

2

I was wondering if a combination of a 'drawing' session variable plus a ReactiveDict containing each of the itemsToDraw objects with the key being their _id might work, but I can’t really figure out how best to tie it all together.