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

getting bounding box of transformed element #122

Open MadTooler opened 1 year ago

MadTooler commented 1 year ago

Hello again.

I am trying to get the bounding box size of an element (path type) that my dashboard interface is transforming per user input. It needs to be message driven.

I have seen a few other discussions that mention the bbox data, but nothing that seemed to fit what I need.

My goal is to at least read the size of the element from the svg node before the user starts scaling, rotating, and skewing the path so I can independently scale xy to desired final sizes. Better yet, I would love to get the size of the bounding box after it is transformed. I wasn't sure if this was possible with the existing tools, or if JS events could handle it.

Please note if this would be better to be posted in the node-red forum as a general question.

bartbutenaers commented 1 year ago

Hi @MadTooler,

Sorry for the delay, but personal life is getting more and more in the way...

Do I understand correctly: you want to inject a message to get the bounding box of a transformed path shape?

There is an issue when you want to do that with this node: the SVG drawing is not stored in the server side, but only in the client side. That was a decison I made based on feedback on Discourse, but that was not a good idea after all. So suppose I would support something like that, you would get N duplicate output messages when N dashboards are currently open. If N=0 (i.e. no dashboards are open) then you would get no output messages at all...

If I ever would have time to redevelop this node (e.g. for Flexdash), I would definately keep a DOM tree at the servers side. But now this node doesn't have that...

Bart

MadTooler commented 1 year ago

Hello again! @bartbutenaers

Personal life tends to do that. The older I get and the more life expands and gets in the way of my tasks, the more I wonder if one day it will be that no time is left to work on anything;)

Do I understand correctly: you want to inject a message to get the bounding box of a transformed path shape? Yes, you understood correctly.

I figured this was the case with the bounding box. I can make do for now. Thanks for the info.

The possibility of other hiccups resulting from N duplicates may bite me later with the multiple things I am asking the svg nodes to do at once. I will have to test to find out.

Thank you again. I hope you find some time to smell the roses and take a moment for yourself too.

MadTooler commented 1 year ago

The possibility of other hiccups resulting from N duplicates may bite me later with the multiple things I am asking the svg nodes to do at once. I will have to test to find out.

Yep, I found when I load an svg into the node from one dashboard, while another dashboard of the same page is open, then modify the svg node, I am getting warning errors because both dashboards have not loaded the svg with the specified elements. At least now I know why I was getting those warnings while it seemed to be doing what I asked. Maybe I could save the new svg to a temp file that the svg node is always looking at on the server and force an update to all dashboards everytime a change is made? Not a big deal right now. I will post a new issue if I need to find a workaround. Thanks

bartbutenaers commented 1 year ago

I should have build this node from the start with a DOM tree on the server. So that when a message is injected, the DOM tree on the server was updated and the updates send to the browsers. Then you could have queried all kind of info from that server side DOM tree, and you would have always get 1 output message containing that data. But that is too late now to rebuild everything...