Positions don't update correctly on transform changes

[lehoffma]

Hey! Whenever the transform value of a tracked item changes, e.g. from translateX(100px) to translateX(200px), the selection rectangle seems to just stick with the initially calculated position. That results in the selection rectangle behaving in unexpected ways, i.e. selecting an item outside the rectangle or not selecting an item even if it is inside.

I created a repository with a minimal reproduction here.

Thanks in advance!

[d3lm]

Hey, thanks for filing this issue. The problem here is that you cannot just transform the select items using a CSS Transform. That invalidates the bounding box and the library only updates the bounding box on certain events, such as resize, scroll etc. So basically it's not behaving correctly because it uses an incorrect bounding box (which is cached until one of those event happen) for figuring out if an item needs to be selected. If you really need to change the position of an item on a button click or something you'd have to call update on the select-container. This methods recalculate bounding box for the container and its children (for more info see the readme).

[d3lm]

Another thing I have noticed is that adding a border once the item is selected is problematic because it again changes the bounding box and the lib is still using an old cached version. That's also why the select box is a bit off and starts to select items even though you're not yet on that element.

[lehoffma]

You're right, calling update() fixed my problem. Thanks for your quick help :)

[d3lm]

You're welcome!