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

Adding context menu to FA icons adds "white space" at the top of group #44

Closed mtoko closed 4 years ago

mtoko commented 4 years ago

Hi Bart and Steve Thanks for a great node that has enormous possibilities!!

I have a background image and I have added some FA icons ( 10 icons) which are clickable. The events activate a context menu for each icon with some options. This worked fine for one or two icons but each time a context menu is added the Dashboard group gets longer and there is white space at the top, vertical scroll bars appear.

Steps to reproduce 1.) Add SVG node to flow 2.) Open SVG editor and set document size to 1100 x 700 3.) Add 10 FA icons with clickable events for each icon 4.) Add 10 context menus, one for each event 5.) Each time a context menu is added group vertical height increases and scroll bars appear

Any help is appreciated, thanks for the great work

Darryl

bartbutenaers commented 4 years ago

Hi @mtoko,

Thanks for the feedback! Unfortunately I haven't been able to reproduce your problem. Here is my test flow, which should be similar to what you describe:

image

[{"id":"56d0d270.a1b0fc","type":"ui_svg_graphics","z":"e2675d9d.6854e","group":"87e79a83.f45268","order":3,"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 1100 700\" width=\"1100\" preserveAspectRatio=\"xMidYMid meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill: none; stroke: none;\"/><defs id=\"svgEditorDefs\"><symbol xmlns=\"http://www.w3.org/2000/svg\" id=\"f5d0\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 384 512\"><path d=\"M378.94 321.41L284.7 224h49.22c15.3 0 23.66-16.6 13.86-27.53L234.45 69.96c3.43-6.61 5.55-14 5.55-21.96 0-26.51-21.49-48-48-48s-48 21.49-48 48c0 7.96 2.12 15.35 5.55 21.96L36.22 196.47C26.42 207.4 34.78 224 50.08 224H99.3L5.06 321.41C-6.69 333.56 3.34 352 21.7 352H160v32H48c-8.84 0-16 7.16-16 16v96c0 8.84 7.16 16 16 16h288c8.84 0 16-7.16 16-16v-96c0-8.84-7.16-16-16-16H224v-32h138.3c18.36 0 28.39-18.44 16.64-30.59zM192 31.98c8.85 0 16.02 7.17 16.02 16.02 0 8.84-7.17 16.02-16.02 16.02S175.98 56.84 175.98 48c0-8.85 7.17-16.02 16.02-16.02zM304 432v32H80v-32h224z\"/></symbol><polygon id=\"svgEditorIconDefs\" style=\"fill:rosybrown;\"/><polygon id=\"svgEditorShapeDefs\" style=\"fill:rosybrown;stroke:black;vector-effect:non-scaling-stroke;stroke-width:1px;\"/></defs><use xlink:href=\"#f5d0\" x=\"203.00592041015625\" y=\"8.188654899597168\" width=\"533.145\" height=\"637.779\" id=\"e1_icon\" style=\"fill:rosybrown;\"/><circle id=\"circle_1\" cx=\"371.15161132812506\" cy=\"256.33679199218756\" style=\"fill:red;stroke:black;stroke-width:1px;\" r=\"18.972219962764\"/><circle id=\"circle_2\" cx=\"533.373779296875\" cy=\"191.89253234863287\" style=\"fill:red;stroke:black;stroke-width:1px;\" r=\"18.972219962764\"/><circle id=\"circle_3\" cx=\"483.0033264160156\" cy=\"267.4480895996094\" style=\"fill:red;stroke:black;stroke-width:1px;\" r=\"18.972219962764\"/><circle id=\"circle_4\" cx=\"512.633056640625\" cy=\"392.6332702636719\" style=\"fill:red;stroke:black;stroke-width:1px;\" r=\"18.972219962764\"/><circle id=\"circle_5\" cx=\"377.07745361328125\" cy=\"358.55917358398443\" style=\"fill:red;stroke:black;stroke-width:1px;\" r=\"18.972219962764\"/><circle id=\"circle_6\" cx=\"547.4478149414062\" cy=\"331.1517028808594\" style=\"fill:red;stroke:black;stroke-width:1px;\" r=\"18.972219962764\"/><circle id=\"circle_7\" cx=\"601.5219116210938\" cy=\"390.4110107421875\" style=\"fill:red;stroke:black;stroke-width:1px;\" r=\"18.972219962764\"/><circle id=\"circle_8\" cx=\"427.44775390625\" cy=\"164.485092163086\" style=\"fill:red;stroke:black;stroke-width:1px;\" r=\"18.972219962764\"/><circle id=\"circle_9\" cx=\"556.3367919921875\" cy=\"254.1147613525391\" style=\"fill:red;stroke:black;stroke-width:1px;\" r=\"18.972219962764\"/><circle id=\"circle_10\" cx=\"299.2997436523438\" cy=\"401.52203369140625\" style=\"fill:red;stroke:black;stroke-width:1px;\" r=\"18.972219962764\"/></svg>","clickableShapes":[{"targetId":"#circle_1","action":"click","payload":"#circle_1","payloadType":"str","topic":"#circle_1"},{"targetId":"#circle_2","action":"click","payload":"#circle_2","payloadType":"str","topic":"#circle_2"},{"targetId":"#circle_3","action":"click","payload":"#circle_3","payloadType":"str","topic":"#circle_3"},{"targetId":"#circle_4","action":"click","payload":"#circle_4","payloadType":"str","topic":"#circle_4"},{"targetId":"#circle_5","action":"click","payload":"#circle_5","payloadType":"str","topic":"#circle_5"},{"targetId":"#circle_6","action":"click","payload":"#circle_6","payloadType":"str","topic":"#circle_6"},{"targetId":"#circle_7","action":"click","payload":"#circle_7","payloadType":"str","topic":"#circle_7"},{"targetId":"#circle_8","action":"click","payload":"#circle_8","payloadType":"str","topic":"#circle_8"},{"targetId":"#circle_9","action":"click","payload":"#circle_9","payloadType":"str","topic":"#circle_9"},{"targetId":"#circle_10","action":"click","payload":"#circle_10","payloadType":"str","topic":"#circle_10"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"payload","editorUrl":"https://drawsvg.org/drawsvg.html","directory":"","name":"","x":800,"y":380,"wires":[["a74a8154.0d5a7"]]},{"id":"a74a8154.0d5a7","type":"switch","z":"e2675d9d.6854e","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"#circle_1","vt":"str"},{"t":"eq","v":"#circle_2","vt":"str"},{"t":"eq","v":"#circle_3","vt":"str"},{"t":"eq","v":"#circle_4","vt":"str"},{"t":"eq","v":"#circle_5","vt":"str"},{"t":"eq","v":"#circle_6","vt":"str"},{"t":"eq","v":"#circle_7","vt":"str"},{"t":"eq","v":"#circle_8","vt":"str"},{"t":"eq","v":"#circle_9","vt":"str"},{"t":"eq","v":"#circle_10","vt":"str"}],"checkall":"true","repair":false,"outputs":10,"x":990,"y":380,"wires":[["b7abd657.7a8658"],["34e9d581.a36f9a"],["6b2742eb.888f8c"],["25fb02f5.4579be"],["627f7859.e3bec8"],["c0fff112.b147"],["9a0916e3.043058"],["2385fcf3.c2e6b4"],["b3ab5414.9c1a38"],["5321a986.cb7108"]]},{"id":"b7abd657.7a8658","type":"ui_context_menu","z":"e2675d9d.6854e","group":"87e79a83.f45268","order":4,"width":0,"height":-1,"fontSize":16,"position":"msg","outputField":"payload","xCoordinate":50,"yCoordinate":50,"menu":"fixed","menuItems":[{"id":"item_1","icon":"","label":"Item 1","topic":"","payload":"Item 1","payloadType":"str","visible":true,"enabled":true},{"id":"item_2","icon":"","label":"Item 2","topic":"","payload":"Item 2","payloadType":"str","visible":true,"enabled":true}],"colors":"native","textColor":"#000000","backgroundColor":"#ffffff","borderColor":"#626262","intervalLength":0,"intervalUnit":"secs","name":"","x":1200,"y":240,"wires":[[]]},{"id":"34e9d581.a36f9a","type":"ui_context_menu","z":"e2675d9d.6854e","group":"87e79a83.f45268","order":4,"width":0,"height":-1,"fontSize":16,"position":"msg","outputField":"payload","xCoordinate":50,"yCoordinate":50,"menu":"fixed","menuItems":[{"id":"item_1","icon":"","label":"Item 1","topic":"","payload":"Item 1","payloadType":"str","visible":true,"enabled":true},{"id":"item_2","icon":"","label":"Item 2","topic":"","payload":"Item 2","payloadType":"str","visible":true,"enabled":true}],"colors":"native","textColor":"#000000","backgroundColor":"#ffffff","borderColor":"#626262","intervalLength":0,"intervalUnit":"secs","name":"","x":1200,"y":280,"wires":[[]]},{"id":"6b2742eb.888f8c","type":"ui_context_menu","z":"e2675d9d.6854e","group":"87e79a83.f45268","order":4,"width":0,"height":-1,"fontSize":16,"position":"msg","outputField":"payload","xCoordinate":50,"yCoordinate":50,"menu":"fixed","menuItems":[{"id":"item_1","icon":"","label":"Item 1","topic":"","payload":"Item 1","payloadType":"str","visible":true,"enabled":true},{"id":"item_2","icon":"","label":"Item 2","topic":"","payload":"Item 2","payloadType":"str","visible":true,"enabled":true}],"colors":"native","textColor":"#000000","backgroundColor":"#ffffff","borderColor":"#626262","intervalLength":0,"intervalUnit":"secs","name":"","x":1200,"y":320,"wires":[[]]},{"id":"25fb02f5.4579be","type":"ui_context_menu","z":"e2675d9d.6854e","group":"87e79a83.f45268","order":4,"width":0,"height":-1,"fontSize":16,"position":"msg","outputField":"payload","xCoordinate":50,"yCoordinate":50,"menu":"fixed","menuItems":[{"id":"item_1","icon":"","label":"Item 1","topic":"","payload":"Item 1","payloadType":"str","visible":true,"enabled":true},{"id":"item_2","icon":"","label":"Item 2","topic":"","payload":"Item 2","payloadType":"str","visible":true,"enabled":true}],"colors":"native","textColor":"#000000","backgroundColor":"#ffffff","borderColor":"#626262","intervalLength":0,"intervalUnit":"secs","name":"","x":1200,"y":360,"wires":[[]]},{"id":"627f7859.e3bec8","type":"ui_context_menu","z":"e2675d9d.6854e","group":"87e79a83.f45268","order":4,"width":0,"height":-1,"fontSize":16,"position":"msg","outputField":"payload","xCoordinate":50,"yCoordinate":50,"menu":"fixed","menuItems":[{"id":"item_1","icon":"","label":"Item 1","topic":"","payload":"Item 1","payloadType":"str","visible":true,"enabled":true},{"id":"item_2","icon":"","label":"Item 2","topic":"","payload":"Item 2","payloadType":"str","visible":true,"enabled":true}],"colors":"native","textColor":"#000000","backgroundColor":"#ffffff","borderColor":"#626262","intervalLength":0,"intervalUnit":"secs","name":"","x":1200,"y":400,"wires":[[]]},{"id":"c0fff112.b147","type":"ui_context_menu","z":"e2675d9d.6854e","group":"87e79a83.f45268","order":4,"width":0,"height":-1,"fontSize":16,"position":"msg","outputField":"payload","xCoordinate":50,"yCoordinate":50,"menu":"fixed","menuItems":[{"id":"item_1","icon":"","label":"Item 1","topic":"","payload":"Item 1","payloadType":"str","visible":true,"enabled":true},{"id":"item_2","icon":"","label":"Item 2","topic":"","payload":"Item 2","payloadType":"str","visible":true,"enabled":true}],"colors":"native","textColor":"#000000","backgroundColor":"#ffffff","borderColor":"#626262","intervalLength":0,"intervalUnit":"secs","name":"","x":1200,"y":440,"wires":[[]]},{"id":"9a0916e3.043058","type":"ui_context_menu","z":"e2675d9d.6854e","group":"87e79a83.f45268","order":4,"width":0,"height":-1,"fontSize":16,"position":"msg","outputField":"payload","xCoordinate":50,"yCoordinate":50,"menu":"fixed","menuItems":[{"id":"item_1","icon":"","label":"Item 1","topic":"","payload":"Item 1","payloadType":"str","visible":true,"enabled":true},{"id":"item_2","icon":"","label":"Item 2","topic":"","payload":"Item 2","payloadType":"str","visible":true,"enabled":true}],"colors":"native","textColor":"#000000","backgroundColor":"#ffffff","borderColor":"#626262","intervalLength":0,"intervalUnit":"secs","name":"","x":1200,"y":480,"wires":[[]]},{"id":"2385fcf3.c2e6b4","type":"ui_context_menu","z":"e2675d9d.6854e","group":"87e79a83.f45268","order":4,"width":0,"height":-1,"fontSize":16,"position":"msg","outputField":"payload","xCoordinate":50,"yCoordinate":50,"menu":"fixed","menuItems":[{"id":"item_1","icon":"","label":"Item 1","topic":"","payload":"Item 1","payloadType":"str","visible":true,"enabled":true},{"id":"item_2","icon":"","label":"Item 2","topic":"","payload":"Item 2","payloadType":"str","visible":true,"enabled":true}],"colors":"native","textColor":"#000000","backgroundColor":"#ffffff","borderColor":"#626262","intervalLength":0,"intervalUnit":"secs","name":"","x":1200,"y":520,"wires":[[]]},{"id":"b3ab5414.9c1a38","type":"ui_context_menu","z":"e2675d9d.6854e","group":"87e79a83.f45268","order":4,"width":0,"height":-1,"fontSize":16,"position":"msg","outputField":"payload","xCoordinate":50,"yCoordinate":50,"menu":"fixed","menuItems":[{"id":"item_1","icon":"","label":"Item 1","topic":"","payload":"Item 1","payloadType":"str","visible":true,"enabled":true},{"id":"item_2","icon":"","label":"Item 2","topic":"","payload":"Item 2","payloadType":"str","visible":true,"enabled":true}],"colors":"native","textColor":"#000000","backgroundColor":"#ffffff","borderColor":"#626262","intervalLength":0,"intervalUnit":"secs","name":"","x":1200,"y":560,"wires":[[]]},{"id":"5321a986.cb7108","type":"ui_context_menu","z":"e2675d9d.6854e","group":"87e79a83.f45268","order":4,"width":0,"height":-1,"fontSize":16,"position":"msg","outputField":"payload","xCoordinate":50,"yCoordinate":50,"menu":"fixed","menuItems":[{"id":"item_1","icon":"","label":"Item 1","topic":"","payload":"Item 1","payloadType":"str","visible":true,"enabled":true},{"id":"item_2","icon":"","label":"Item 2","topic":"","payload":"Item 2","payloadType":"str","visible":true,"enabled":true}],"colors":"native","textColor":"#000000","backgroundColor":"#ffffff","borderColor":"#626262","intervalLength":0,"intervalUnit":"secs","name":"","x":1200,"y":600,"wires":[[]]},{"id":"87e79a83.f45268","type":"ui_group","z":"","name":"Hikvision","tab":"935e3c31.38046","disp":true,"width":"14","collapse":false},{"id":"935e3c31.38046","type":"ui_tab","z":"","name":"Camera","icon":"dashboard","disabled":false,"hidden":false}]

Which results in this christmas tree with 10 clickable circles:

image

Could you please adjust this flow to simulate the problem? And perhaps add some screenshots or an animated gif or ...

And could the problem perhaps be related to this discussion. You need to have at least dashboard version 2.16.3

mtoko commented 4 years ago

Hi Thanks for the reply. Apologies, the problem is related to the version of dashboard node. I did search the forum and did not find that post, I also checked the flow on two different systems and the problem remained, but now find that both have an older version of dashboard.

Sorry to waste your time, but appreciate the advice

Work can continue!

Darryl

bartbutenaers commented 4 years ago

Hi Darryl,

I had on my (large) TODO list to add a warning about this on the readme page. But I have completely forgotten about it ...

But I have added it now, to make sure it becomes clear for all users:

image

So your question was useful anyway! Bart