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
93 stars 27 forks source link

With panzoom enabled, animations triggering other animationns is not working #61

Closed ipamaas closed 4 years ago

ipamaas commented 4 years ago

Panzoom is a great new feature! But if panzoom is enabled, the following (custom) begin-trigger is no longer working. begin="press_down_anim.begin + 7s" Sample SVG animations:

    <animate 
       xlink:href="#svg_press_element"
       attributeName="points"
       from="107.829,108.999 107.265,178.435 90.3291,178.999 90.3291,197.628 160.894,197.063 160.33,178.998 142.265,178.434 141.136,108.998"
       to="107.829,139.483 107.265,208.919 90.3291,209.483 90.3291,228.112 160.894,227.547 160.33,209.482 142.265,208.918 141.136,139.482" 
       dur="6s"
       begin="unload"
       fill="freeze"
       id="press_down_anim"/>

    <animate 
       xlink:href="#svg_press_element"
       attributeName="points"
       from="107.829,139.483 107.265,208.919 90.3291,209.483 90.3291,228.112 160.894,227.547 160.33,209.482 142.265,208.918 141.136,139.482"
       to="107.829,108.999 107.265,178.435 90.3291,178.999 90.3291,197.628 160.894,197.063 160.33,178.998 142.265,178.434 141.136,108.998" 
       dur="4s"
       begin="press_down_anim.begin + 7s"
       fill="freeze" 
       id="press_up_anim"/>

If panzoom is disabled again, all works as expected.

bartbutenaers commented 4 years ago

Hi Matthias, if not to much work, then it would be nice if you could add a simplyfied flow here also. Will have a look then as soon as possible. Because I don't want to break any existing flows with the 2.0 release... Thanks again! Bart

ipamaas commented 4 years ago

Hi Bart, sure: animation_trigger_other_fail.zip In this sample only the "press_down_anim" works, but the "press_up_anim" is not triggered by:

begin="press_down_anim.begin + 7s"

If you turn of panzoom in settings, it works as expected. BR Matthias

bartbutenaers commented 4 years ago

Hey Matthias, Last week I have integrated another panzoom library into this SVG node (on the "panzoom" branch), since the other library wasn't maintained very well. With this library I don't have the problems that you are describing. Indeed I can even use panning and zooming while the successive animations are running:

svg_animation_panning

I'm going to close this issue, but if you still have the problem don't hesitate to reopen it! Bart

ipamaas commented 4 years ago

Hi Bart, thank you for fixing, the new library is working fine! Matthias