Questions on node-red-contrib-ui-svg

General
21

This is now hopefuly solved with the Github version...

In the Github version you can now adjust the zoom percentage (minimum value is 100%):

image

This was again a brain breaker... At the end I found this:

image

Since the upper left corner of the drawing was the center of animation, the circly would have moved to that point ...

So now I pass the (client) coordinates - where you have double clicked/tapped - to the zoom function, to make sure that point is the center of the animation:

svg_double_click

Don't understand exactly what is going on...
I fixed one thing, but I'm not sure whether it will entirely solve your problem: in the input msg ({"command":"zoom_by_percentage","percentage":300,"x":300,"y":30}) you specify SVG coordinates, because it it are the coordinates relative to the upper left point of your drawing. However the zoomtopoint function expects client coordinates, i.e. relative to your browser window. When I have a circle at (100, 100), I can now zoom in on it - similar to the above double click animation - by injecting your message:

svg_client_coord

But I have a bad feeling that this this client coordinate fix is not end of story yet ...

1 Like
22

Sean,
Here a little summary of the 3 available coordinate systems:

image
image571Ɨ608 76.2 KB

So you inject a message with SVG coordinates, i.e. and X and Y coordinate relative to the green origin.
But the PanZoom library (zoomToPoint) expects client coordinates, i.e. relative to the red origin.
=> I now convert your SVG coordinates to client coordinates:
clientX = yourSvgX + svgDrawingOriginX

Hopefully this gives you some insights, and you can give me some more tips of where it might go wrong ...

1 Like
23

Bart,

Tool tip is now viewable on the top. Injecting zoom values seems to be consistent on both my tablet and PC at different screen resolutions.

Unfortunately I think you missed off the zoom percentage box as I cannot see it in settings, and double click to zoom no longer works ?

Take a look in your own time- Just reporting back !

Sean

24

Could it be that you have forgotten to refresh the browser session where your flow editor is running? I have installed the version from github:

  • The checkbox is there
  • The double mouse click works fine on Windows 10
  • The double tap works fine on my Android phone
1 Like
25

My bad again - All good now thanks for all your help !

1 Like
26

Ooooooh, so glad it works...
At the time being I had to replace quickly the underlying panzoom library, because the previous one seemed not to be maintained anymore. But had no time unfortunately to test it in detail like you did now.
Anyway hopefully others can benefit now from it.
I will release this as soon on NPM...

27

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.