[Solved] Blaze + svg + zindex problems

I’m using blaze to populate an SVG with elements. I need these elements to be “brought to front” on hover. As I understand it, the only way to achieve this in SVG is to remove the element and append it to the parent. This works nicely from a UI perspective, but unfortunately, blaze stops updating the element after that.

There are a lot - several hundred - SVG being written by blaze, so I really don’t want to have to iterate over all elements and repaint them all each time the user hovers on one, but I need the element to continue being updated after the hover.

I already checked the obvious things:

  • the element’s view (Blaze.getView(...)) remains the save pre/post append
  • the view’s _domrange still contains the elemtn pre/post append
  • after a remove/add followed by what should have triggered a re-render of the element (but did not actually update the element), the elements view is the same as pre remove/add
  • after a re-render, which should have destroyed the element (e.g., it was removed from the set to be displayed), the elements view is the same

How does blaze determine that the element (or maybe the view?) is now orphaned? Does it happen when an element is removed, or appended? Is there a way of preventing (or restoring) this?

Alternatively, when the order of items changes in an array (every item has an _id), does every item need to be re-rendered, or just the one item that is now in a different position, or something in between (all items after the original position of the moved item)?

1 Like

sigh:

As is so often the case - 30 minutes after I ask, I find the answer. Seems if you use jquery this happens, if you use raw dom manipulation, it does NOT. Easy fix.

4 Likes