2.2.4 broke all events

[andreypopov]

Event click has occured
No user data available for this click event

Example:
<g id="wb-mr6c_23-K5" class="bulb box p-middle" data-status="s0" transform="translate(100 98)"> <rect x="0" y="10" width="65" height="65" fill-opacity="0" stroke-opacity="0" /> <g transform="matrix(0.55 0 0 0.55 0 0)"> <path d="M24.043 58.233c-0.631 13.205 5.858 24.94 15.957 31.701v14.066h40v-14.066c9.647-6.458 16-17.453 16-29.934 0-20.264-16.742-36.617-37.148-35.982-18.625 0.579-33.919 15.603-34.809 34.215z" /> <path d="M40 112.16c0 8.749 7.091 15.84 15.84 15.84h8.32c8.749 0 15.84-7.091 15.84-15.84v-0.16h-40v0.16z" /> </g> </g>

Issue ie somewhere here:

[bartbutenaers]

Hi @andreypopov,

Is there anything special in that example svg of yours? It would help if you shared your simplified flow, because now it is e.g. not clear to me whether you are talking about events or JS events?

I did a simple test for a normal event using this flow:

[{"id":"ab3a4e6a9e4dbcbe","type":"ui_svg_graphics","z":"3e329e777a5729f1","group":"28cdac6db4804909","order":3,"width":0,"height":0,"svgString":"<svg x=\"0\" y=\"0\" height=\"100\" viewBox=\"0 0 100 100\" width=\"100\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n  <circle id=\"red_circle\" cx=\"25\" cy=\"30\" r=\"20\" stroke=\"none\" stroke-width=\"3\" fill=\"red\">\n  </circle>\n  <circle id=\"green_circle\" cx=\"75\" cy=\"30\" r=\"20\" stroke=\"none\" stroke-width=\"3\" fill=\"green\">\n  </circle>\n</svg>","clickableShapes":[{"targetId":"#red_circle","action":"dblclick","payload":"double","payloadType":"str","topic":"DOUBLE_CLICK"},{"targetId":"#red_circle","action":"click","payload":"single","payloadType":"str","topic":"SINGLE_CLICK"}],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"name":"","x":410,"y":620,"wires":[["b56c29126796965e"]]},{"id":"b56c29126796965e","type":"debug","z":"3e329e777a5729f1","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":590,"y":620,"wires":[]},{"id":"28cdac6db4804909","type":"ui_group","name":"External SVG file demo","tab":"3667e211.c08f0e","order":1,"disp":true,"width":"10","collapse":false},{"id":"3667e211.c08f0e","type":"ui_tab","name":"Showcase","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

And then the output message seems correct to me:

Can you explain a bit more about what is going wrong?
Bart

[andreypopov]

<g id="id1" data-event_click="">
<path>here is svg graphics</path>
<g>

when you click on path element there is no data-event_click attribute on it

[{"id":"ab3a4e6a9e4dbcbe","type":"ui_svg_graphics","z":"537a2461067032e2","group":"28cdac6db4804909","order":3,"width":0,"height":0,"svgString":"<svg x=\"0\" y=\"0\" fill=\"black\" height=\"100\" viewBox=\"0 0 100 100\" width=\"100\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n<g id=\"wb-mr6c_23-K5\" fill=\"red\" color=\"red\">\n <rect x=\"0\" y=\"10\" width=\"65\" height=\"65\" fill-opacity=\"0\" stroke-opacity=\"0\" />\n <g transform=\"matrix(0.55 0 0 0.55 0 0)\" fill=\"red\">\n <path\n d=\"M24.043 58.233c-0.631 13.205 5.858 24.94 15.957 31.701v14.066h40v-14.066c9.647-6.458 16-17.453 16-29.934 0-20.264-16.742-36.617-37.148-35.982-18.625 0.579-33.919 15.603-34.809 34.215z\" />\n <path d=\"M40 112.16c0 8.749 7.091 15.84 15.84 15.84h8.32c8.749 0 15.84-7.091 15.84-15.84v-0.16h-40v0.16z\" />\n </g>\n</g>\n</svg>","clickableShapes":[{"targetId":"#wb-mr6c_23-K5","action":"dblclick","payload":"double","payloadType":"str","topic":"DOUBLE_CLICK"},{"targetId":"#wb-mr6c_23-K5","action":"click","payload":"single","payloadType":"str","topic":"SINGLE_CLICK"}],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"name":"","x":860,"y":120,"wires":[["b56c29126796965e"]]},{"id":"b56c29126796965e","type":"debug","z":"537a2461067032e2","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1040,"y":120,"wires":[]},{"id":"28cdac6db4804909","type":"ui_group","name":"External SVG file demo","tab":"3667e211.c08f0e","order":1,"disp":true,"width":"10","collapse":false},{"id":"3667e211.c08f0e","type":"ui_tab","name":"Showcase","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

[bartbutenaers]

I think I found the root cause.

• In the previous version, this in the event handler was referring to the SVG element to which the event handler was attached. In your case the group element:

  

  Since the "data-event_xxx" attribute is available in the element that has the event handler, it was no problem to find that attribute value.

• In the current version, it was not possible anymore to use this in the event handler (because the event handler function was also being called from within a timer). So I had replaced it by evt.target:

  • It worked fine in my test case, since in my test I clicked on the same element that had also the event handler.
  • However you click on a (sub)element (i.e. the path), but the event will bubble up to the element that has the event handler (i.e. the group). This means the evt event object has two different targets:
    • evt.target refers to the element that receives the event (i.e. the path)
    • èvt.currentTarget refers to the element that has the event handler (i.e. the group)

  When I use èvt.currentTarget instead of evt.target then I have the same result as in the previous version.

Would be nice if you could install my fix and test it (before I publish it on npm):

npm install bartbutenaers/node-red-contrib-ui-svg

[bartbutenaers]

Hi @andreypopov,
If you have time to test this, that would be nice.
Because I need to publish another fix, and I would like to create a single release.

[andreypopov]

Nothing works, reverted to 2.2.2
Where is 2.3.0 lets test it :)

[bartbutenaers]

Nothing works

Well that is a bit too much to solve in my limited spare time. In that case there won't be ever a 2.3.0 version of this node...

[bartbutenaers]

@andreypopov,
I have reinstalled the 2.3.0 version from Github (using the above command) and tested the flow above you have provided. For me it all seems to work as expected.
So unless you clearly explain what is wrong and how I can reproduce the issue, I considered everything solved in a couple of days when the 2.3.0 is released.

[bartbutenaers]

@andreypopov,
All other requestors have meanwhile finished their testing, so I would like to publish version 2.3.0 on npm this week. If you don't specify more details, I cannot solve your issue(s). And hopefully things haven't got worse for others, by the changes I implemented especially for your request ...

[bartbutenaers]

Due to lack of response, I have tried to figure out on my own what "nothing works" could mean... I 'assume' it means that a single click does not work anymore when also a double click event handler has been specified.

This is now hopefully fixed by commit da3d145.

Reminder for myself next time: I have tested this now by following flow, which contains all combinations that I am aware off at this moment:

[{"id":"017b802aae874bc4","type":"debug","z":"b6c46bbc8cfc81cb","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":750,"y":220,"wires":[]},{"id":"fe8deaee5c60fbad","type":"ui_svg_graphics","z":"b6c46bbc8cfc81cb","group":"c20e25fb6de0c5b9","order":1,"width":0,"height":0,"svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:bx=\"https://boxy-svg.com\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 1000 700\" width=\"1000\" height=\"700\" preserveAspectRatio=\"xMidYMid meet\">\n  <circle id=\"red_circle\" cx=\"30\" cy=\"50\" r=\"20\" fill=\"red\"/>\n  <circle id=\"green_circle\" cx=\"80\" cy=\"50\" r=\"20\" fill=\"green\"/>\n  <circle id=\"blue_circle\" cx=\"130\" cy=\"50\" r=\"20\" fill=\"blue\"/>\n  <circle id=\"orange_circle\" cx=\"180\" cy=\"50\" r=\"20\" fill=\"orange\"/>\n  <g id=\"violet_group\">\n    <circle cx=\"230\" cy=\"50\" r=\"20\" fill=\"violet\"/>\n  </g>\n  <g id=\"magenta_group\">\n    <circle cx=\"280\" cy=\"50\" r=\"20\" fill=\"magenta\"/>\n  </g>\n  <g id=\"chocolate_group\">\n    <circle cx=\"330\" cy=\"50\" r=\"20\" fill=\"chocolate\"/>\n  </g>\n  <g id=\"yellow_group\">\n    <circle cx=\"380\" cy=\"50\" r=\"20\" fill=\"yellow\"/>\n  </g>\n</svg>","clickableShapes":[{"targetId":"#red_circle","action":"click","payload":"#mycircle","payloadType":"str","topic":"CLICK"},{"targetId":"#red_circle","action":"dblclick","payload":"#mycircle","payloadType":"str","topic":"DBLCLICK"},{"targetId":"#green_circle","action":"click","payload":"#mycircle2","payloadType":"str","topic":"CLICK"},{"targetId":"#violet_group","action":"click","payload":"#violet_group","payloadType":"str","topic":"CLICK"},{"targetId":"#violet_group","action":"dblclick","payload":"#violet_group","payloadType":"str","topic":"DBLCLICK"},{"targetId":"#magenta_group","action":"click","payload":"#magenta_group","payloadType":"str","topic":"CLICK"}],"javascriptHandlers":[{"selector":"#blue_circle","action":"click","sourceCode":"$scope.send({topic: \"click\"});"},{"selector":"#blue_circle","action":"dblclick","sourceCode":"$scope.send({topic: \"dbclick\"});"},{"selector":"#orange_circle","action":"click","sourceCode":"$scope.send({topic: \"click\"});"},{"selector":"#chocolate_group","action":"click","sourceCode":"$scope.send({topic: \"click\"});"},{"selector":"#chocolate_group","action":"dblclick","sourceCode":"$scope.send({topic: \"dbclick\"});"},{"selector":"#yellow_group","action":"click","sourceCode":"$scope.send({topic: \"click\"});"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":true,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n    color: var(--nr-dashboard-widgetColor);\n    fill: currentColor !important;\n}\ndiv.ui-svg path {\n    fill: inherit !important;\n}","name":"","x":590,"y":220,"wires":[["017b802aae874bc4"]]},{"id":"c20e25fb6de0c5b9","type":"ui_group","name":"(double) click test","tab":"a28ff08f.3a822","order":1,"disp":true,"width":"30","collapse":false,"className":""},{"id":"a28ff08f.3a822","type":"ui_tab","name":"SVG","icon":"dashboard","order":38,"disabled":false,"hidden":false}]

• red: normal event handler on circle for both single click and double click
• green: normal event handleron circle for only single click
• blue: javascript event handler on circle for both single click and double click
• orange: javascript event handler on circle for only single click
• violet: normal event handler on group for both single click and double click
• magenta: normal event handleron group for only single click
• chocolate: javascript event handler on group for both single click and double click
• yellow: javascript event handler on group for only single click

For every circle there should be a test executed both by double clicking it and by single click it.

The test should be repeated twice for all circles: one with the checkbox "Don't send click events in case of a double click event" activated, and afterwards again deactivated.

[andreypopov]

2.3 works:) but returned right menu bug