bartbutenaers
commented
4 years ago Problem 1
I tried to test Input bind but the color isn't changing.
If you read our documentation, you will find an example message:
When I add that topic to your inject node:
Then it seems to work as expected:
Problem 2
And since update with pan&zoom click event isn't working any more.
That is what I was afraid about. Therefore I wrote in the your other issue:
But I have no time to test it thoroughly! So would be nice if you could test it and give me feedback! For example I'm not sure what happens if you define a shape as 'clickable'. Does the panzoom library swallow the click events, or isn't it clickable anymore (because the library uses the click event to start panning), or ...
When a click event is triggered, the panzoom library uses it to determine whether it should start panning or zooming. But that means the library handles the events, so it most probably won't arrive in our node... I think that they decide in this code to swallow (via preventDefault) the event:
SvgPanZoom.prototype.handleMouseDown = function(evt, prevEvt) {
if (this.options.preventMouseEventsDefault) {
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
}You can see that I can skip this code snippet by setting options.preventMouseEventsDefault = false (which is by default true). Afterwards I expect that the click event will be passed to the SVG node. But I'm not sure what the result would look like, if the event is handled twice. : the panzoom library will start panning, and the SVG element will e.g. try to show a contextmenu.
That will require much more testing, and comparing to other drawing software behaviur. But I have no spare time left at the moment to do all those things on my own ...
tkirchm
I tried to test Input bind but the color isn't changing. And since update with pan&zoom click event isn't working any more.
[{"id":"29b474d.051928c","type":"inject","z":"c087477b.d7dad8","name":"","topic":"","payload":"{\"a\":\"black\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":230,"y":280,"wires":[["345c1ca6.7d65c4"]]},{"id":"345c1ca6.7d65c4","type":"ui_svg_graphics","z":"c087477b.d7dad8","group":"7a4a3bfb.9ddc74","order":0,"width":0,"height":0,"svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0\" y=\"0\" height=\"700\" viewBox=\"0 -0.09671179950237274 1500 700.1934204101562\" width=\"1500\">\n <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"1500\" height=\"700\" style=\"fill: none; stroke: none;\" />\n <defs id=\"svgEditorDefs\">\n <linearGradient gradientUnits=\"objectBoundingBox\" id=\"lgrd2-fire\" spreadMethod=\"pad\" x1=\"0%\" x2=\"100%\" y1=\"0%\" y2=\"0%\">\n <stop offset=\"0%\" style=\"stop-color:rgb(255,255,0);stop-opacity:1\" />\n <stop offset=\"100%\" style=\"stop-color:rgb(255,0,0);stop-opacity:1\" />\n </linearGradient>\n <pattern height=\"10\" id=\"hatch-black-45\" patternTransform=\"rotate(45) scale(0.4)\" patternUnits=\"userSpaceOnUse\" viewBox=\"0 0 10 10\" width=\"10\" x=\"0\" y=\"0\">\n <line style=\"stroke:black;stroke-width:1px;\" x1=\"0\" x2=\"10\" y1=\"5\" y2=\"5\" />\n </pattern>\n <pattern height=\"49\" id=\"hexa-p\" patternContentUnits=\"userSpaceOnUse\" patternUnits=\"userSpaceOnUse\" preserveAspectRatio=\"xMinYMin meet\" viewBox=\"0 0 28 49\" width=\"28\" x=\"0\" y=\"0\">\n <rect height=\"49\" style=\"fill:#DFDBE5;stroke:none;\" width=\"28\" x=\"0\" y=\"0\" />\n <path d=\"M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z\" fill-rule=\"nonzero\" style=\"fill:#9C92AC;fill-opacity:0.4;\" />\n </pattern>\n <pattern height=\"20\" id=\"square-p\" patternContentUnits=\"userSpaceOnUse\" patternUnits=\"userSpaceOnUse\" preserveAspectRatio=\"xMinYMin meet\" viewBox=\"0 0 20 20\" width=\"20\" x=\"0\" y=\"0\">\n <rect fill=\"#fff\" height=\"20\" width=\"20\" />\n <rect fill=\"#ccc\" height=\"10\" width=\"10\" />\n <rect fill=\"#ccc\" height=\"10\" width=\"10\" x=\"10\" y=\"10\" />\n </pattern>\n <pattern height=\"12\" id=\"charlie-p\" patternContentUnits=\"userSpaceOnUse\" patternUnits=\"userSpaceOnUse\" preserveAspectRatio=\"xMinYMin meet\" viewBox=\"0 0 20 12\" width=\"20\" x=\"0\" y=\"0\">\n <rect height=\"12\" style=\"fill:#DFDBE5;stroke:none;\" width=\"20\" x=\"0\" y=\"0\" />\n <path d=\"M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z\" style=\"fill:#9C92AC;fill-opacity:0.4;\" />\n </pattern>\n <pattern height=\"16\" id=\"dot-p\" patternContentUnits=\"userSpaceOnUse\" patternUnits=\"userSpaceOnUse\" preserveAspectRatio=\"xMinYMin meet\" viewBox=\"0 0 16 16\" width=\"16\" x=\"0\" y=\"0\">\n <rect height=\"16\" style=\"fill:#DFDBE5;stroke:none;\" width=\"16\" x=\"0\" y=\"0\" />\n <path d=\"M0 0h16v2h-6v6h6v8H8v-6H2v6H0V0zm4 4h2v2H4V4zm8 8h2v2h-2v-2zm-8 0h2v2H4v-2zm8-8h2v2h-2V4z\" fill-rule=\"evenodd\" style=\"fill:#9C92AC;fill-opacity:0.4;\" />\n </pattern>\n </defs>\n <rect x=\"8\" y=\"8\" style=\"stroke-width: 1px; stroke-dasharray: 2px, 2px;fill:none;stroke:black;\" id=\"Bildausschnitt\" width=\"1492\" height=\"692\" />\n <rect x=\"343.655\" y=\"20.4421\" style=\"fill:url(#hexa-p);stroke:black;stroke-width:3px;\" id=\"Garage\" width=\"620.9\" height=\"342.359\" />\n <rect x=\"595.122\" y=\"364.741\" style=\"stroke-width: 3px; stroke: black;fill:url(#dot-p);\" id=\"EG\" width=\"880.074\" height=\"315.281\" />\n <circle id=\"Li_Esstisch\" cx=\"664.75409\" cy=\"600.71287\" r=\"27.354228\" fill=\"yellow\" />\n</svg>","clickableShapes":[{"targetId":"#Li_Esstisch","action":"click","payload":"#Li_Esstisch","payloadType":"str","topic":"#Li_Esstisch"}],"smilAnimations":[],"bindings":[{"selector":"#Li_Esstisch","bindSource":"payload.a","bindType":"attr","attribute":"fill"}],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"payload","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","panEnabled":true,"zoomEnabled":true,"controlIconsEnabled":true,"dblClickZoomEnabled":true,"mouseWheelZoomEnabled":true,"name":"","x":460,"y":280,"wires":[["3be6d81b.074a58"]]},{"id":"3be6d81b.074a58","type":"debug","z":"c087477b.d7dad8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":670,"y":280,"wires":[]},{"id":"7a4a3bfb.9ddc74","type":"ui_group","z":"","name":"test","tab":"1d116351.e0a96d","disp":true,"width":"30","collapse":false},{"id":"1d116351.e0a96d","type":"ui_tab","z":"","name":"test","icon":"dashboard","disabled":false,"hidden":false}]