search

bartbutenaers / node-red-contrib-ui-svg

A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard
Apache License 2.0
94 stars 27 forks source link

How to get exact coordinates of an element? #113

Open andreypopov opened 1 year ago

andreypopov commented 1 year ago

I had confused, when I tried to determine elementId coordinates 2022-08-02_17-28-26

I place menu with: $('.my_menu').show().css({top: msg.event.svgY, left: msg.event.svgX}).insertAfter("#noContextMenu"); But I want to get coordinates of my element and place menu bottom-middle (under red square)

I checked your code and there is some kind of koef which you use to calculate svgX/svgY pt = pt.matrixTransform($scope.svg.getScreenCTM().inverse()); Maybe you should apply it to bbox?

bartbutenaers commented 1 year ago

At the time being we had a discussion about this on Discourse, to make sure all ui nodes had (some kind of) standardized output message format. As you can see here one of the results was to calculate the bbox via getBoundingClientRect instead of via getBBox.

Although that was more about the same order of the values (left-bottom-right-top), but it seems - see this Stackoverflow discussion - that getBoundingClientRect provides coordinates in screen space (= origin is the top left of the window), while getBBox uses the same coordinate space as the SVG elements (= origin is the top left of the SVG).

So it could be that we should use getBBox instead. However it is not clear to me (see here) whether transforms are included? So take transforms into account, your proposal might make mare sense.

And then there is also (see here) the getBoundingClientRect, which they claim takes into account transforms already.

I don't have enough free time these days to figure it all out on my own. So if you could do some comparisons in your drawing for these different methods, that would be welcome!

And if we find a solution, I am not sure whether we should fix the current bbox or not. Because I don't want to break existing flow. On the other hand if the bbox is incorrect, then perhaps nobody uses it. Not sure...