Node-red-contrib-ui-svg click and dblclick in same element

Hi @BartButenaers

I have already do some test and the funcionality work fine.
Of course you notice the delay on the button but this is normal.
But I found a bug. When this option is enabled, if another button has only the click event, it will not perform its action. as workaround all buttons must have both events (click and doubleclick).

I have modified your example and add a blue circle whith aonly click event, and the event will not fier.

[{"id":"ab3a4e6a9e4dbcbe","type":"ui_svg_graphics","z":"3a7eabc8.9fb564","group":"28cdac6db4804909","order":3,"width":"10","height":"6","svgString":"<svg x=\"0\" y=\"0\" height=\"100\" viewBox=\"0 0 100 100\" width=\"200\" 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  <circle id=\"blue_circle\" cx=\"125\" cy=\"30\" r=\"20\" stroke=\"none\" stroke-width=\"3\" fill=\"blue\">\n  </circle>\n</svg>","clickableShapes":[{"targetId":"#red_circle","action":"dblclick","payload":"#red_circle","payloadType":"str","topic":"DOUBLE_CLICK"},{"targetId":"#red_circle","action":"click","payload":"#red_circle","payloadType":"str","topic":"SINGLE_CLICK"}],"javascriptHandlers":[{"selector":"#green_circle","action":"click","sourceCode":"$scope.send({topic:\"JS_SINGLE_CLICK\"})"},{"selector":"#green_circle","action":"dblclick","sourceCode":"$scope.send({topic:\"JS_DOUBLE_CLICK\"})"},{"selector":"#blue_circle","action":"click","sourceCode":"$scope.send({topic:\"JS_SINGLE_CLICK_BLUE\"})"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":true,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"name":"","x":1820,"y":980,"wires":[["b56c29126796965e"]]},{"id":"b56c29126796965e","type":"debug","z":"3a7eabc8.9fb564","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"topic","targetType":"msg","statusVal":"","statusType":"auto","x":2010,"y":980,"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}]

But if you add the double click event, it will work.

@samuelbras,
You were lucky that I was at this very moment shortly on my computer at home :wink:
I have pushed a fix to Github.
Can you please reinstall and try again?

@BartButenaers,

your GuitHub?
npm install bartbutenaers/node-red-contrib-ui-svg?

Yes that is correct.

@BartButenaers,

By my test it work fine, thanks

1 Like

@samuelbras,

Version 2.2.4 is now available in the Node-RED palette:

image

P.S. I have now also started using Github releases, to make it easier for users to follow up what has changed.

1 Like

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