Closed tkirchm closed 4 years ago
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:
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 ...
Thanks very much. I forgot to set the topic.
When loading the library externally I could test it a little bit and click event still worked as expected.
When loading the library externally I could test it a little bit and click event still worked as expected.
That is useful to know! So to summarize all the issues:
/ It cannot load the library from your Node-RED server. If you can answer my questions in the other issues, we hopefully get a better understanding of why that fails on your system.
/ When you use the external link it works. Did you change the link live in your browser's developer tools, or did you change it in the svg_graphics.js file ?
*/ With the external library the click event works correctly. So I assume you have not added options.preventMouseEventsDefault = false
?
What I really don't understand is that you don't see the extra logging (see other issue). Could it be that - when you installed the second my branch from Github - that you installed it in the wrong directory? Need to have the info from the other issue, before I can make any conclusions ....
@tkirchm, If you have somewhere some time left, please add some feedback in both your issues. It would be nice if we could finish your pan/zoom proposal (with some trial and error ...), because it would be useful for other users in the community ...
Thanks and my best wishes for 2020!!
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}]