Hi,
my node-red-contrib-ui-svg is 2.2.3
I have made a test flow
[{"id":"e8b1d123.357a1","type":"inject","z":"e9e5c0eb.489de","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"command\":\"add_element\",\"elementType\":\"group\",\"elementId\":\"group140\",\"parentElementId\":\"objectiveGroup\"},{\"command\":\"add_element\",\"elementType\":\"text\",\"elementId\":\"topicPos140\",\"parentElementId\":\"group140\",\"elementAttributes\":{\"class\":\"gridElement\"},\"elementStyleAttributes\":{},\"textContent\":\"4/5\"},{\"command\":\"add_element\",\"elementType\":\"text\",\"elementId\":\"text140\",\"parentElementId\":\"group140\",\"elementAttributes\":{\"class\":\"gridElement \"},\"elementStyleAttributes\":{},\"textContent\":\"Text\"},{\"command\":\"add_element\",\"elementType\":\"line\",\"parentElementId\":\"group140\",\"elementAttributes\":{\"class\":\"cls-objectiveSeparator \",\"x2\":\"1600\"}}]","payloadType":"json","x":610,"y":800,"wires":[["7895ede6.da6c54"]]},{"id":"795769ff.1d2ab8","type":"ui_svg_graphics","z":"e9e5c0eb.489de","group":"8d3148e0.0eee88","order":2,"width":"24","height":"14","svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:drawsvg=\"http://www.drawsvg.org\" id=\"svgMap\" x=\"0\" y=\"0\" viewBox=\"0 0 1920 1200\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\n\n<!-- Add here your SVG shapes (circles, rectangles, ...) -->\n<!-- Or remove everything, if you want to paste an entire drawing (<svg...>...</svg>).-->\n<g id=\"objectiveGroup\" style=\"display:block\" x=\"0\" y=\"0\" width=\"1642\" height=\"1040\">\n <g id=\"group100\" >\n <text id=\"topicPos100\" class=\"gridElement \" transform=\"translate(72 64)\">index</text>\n <text id=\"topicDesc100\" class=\"gridElement \" transform=\"translate(171 64)\" style=\"font-weight:bold\">\n do some stuff</text>\n <line id=\"line100\" class=\"cls-objectiveSeparator 100\" x2=\"1600\" transform=\"translate(20 100)\">\n </g>\n</g>\n<style>\n.cls-objectiveSeparator {\n stroke: #e5e5e5;\n stroke-width: 3px;\n }\n </style>\n</svg>","clickableShapes":[],"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":1120,"y":840,"wires":[[]]},{"id":"6f9c8f56.e6bbd","type":"inject","z":"e9e5c0eb.489de","name":"Remove all","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"remove_element\",\"selector\":\".gridElement\"}","payloadType":"json","x":620,"y":860,"wires":[["650afc27.8335e4"]]},{"id":"7895ede6.da6c54","type":"function","z":"e9e5c0eb.489de","name":"Add gridRow","func":"// Generate random coordinates between 0 and 100\nvar addX = 96;\nvar gridElementsAdded = context.global.get('ObjectiveGridAdded');\n\nif(gridElementsAdded == null)\n{\n gridElementsAdded = 0;\n}\nvar positionX = 64 + (addX*gridElementsAdded);\nvar positionXLine = 100 + (addX*gridElementsAdded);\n\nmsg.payload[1].elementAttributes.transform = \"translate(72 \" + positionX +\")\"\nmsg.payload[1].gridElementsAdded = gridElementsAdded;\n \nmsg.payload[2].elementAttributes.transform = \"translate(171 \" + positionX +\")\"\nmsg.payload[2].gridElementsAdded = gridElementsAdded;\n\nmsg.payload[3].elementAttributes.transform = \"translate(20 \" + positionXLine +\")\"\nmsg.payload[3].gridElementsAdded = gridElementsAdded;\n\ncontext.global.set('ObjectiveGridAdded', gridElementsAdded+1); \n\nreturn msg;\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":810,"y":800,"wires":[["795769ff.1d2ab8","f8d80979.4204a8"]]},{"id":"f8d80979.4204a8","type":"debug","z":"e9e5c0eb.489de","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1110,"y":760,"wires":[]},{"id":"650afc27.8335e4","type":"function","z":"e9e5c0eb.489de","name":"Add gridRow","func":"\ncontext.global.set('ObjectiveGridAdded', 0); \n\nreturn msg;\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":810,"y":860,"wires":[["795769ff.1d2ab8"]]},{"id":"54c66bfc.861e44","type":"inject","z":"e9e5c0eb.489de","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"command\":\"add_element\",\"elementType\":\"text\",\"elementId\":\"top140\",\"elementAttributes\":{\"class\":\"gridElement\"},\"elementStyleAttributes\":{},\"textContent\":\"77\"},{\"command\":\"add_element\",\"elementType\":\"text\",\"elementId\":\"topicPos140\",\"elementAttributes\":{\"class\":\"gridElement\"},\"elementStyleAttributes\":{},\"textContent\":\"4/5\"},{\"command\":\"add_element\",\"elementType\":\"text\",\"elementId\":\"text140\",\"elementAttributes\":{\"class\":\"gridElement \"},\"elementStyleAttributes\":{},\"textContent\":\"Text\"},{\"command\":\"add_element\",\"elementType\":\"line\",\"elementAttributes\":{\"class\":\"cls-objectiveSeparator \",\"x2\":\"1600\"}}]","payloadType":"json","x":610,"y":740,"wires":[["7895ede6.da6c54"]]},{"id":"8d3148e0.0eee88","type":"ui_group","name":"7Shield","tab":"1a3b3b7a.dfdbf5","order":1,"disp":false,"width":"24","collapse":false},{"id":"1a3b3b7a.dfdbf5","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":true}]
I have already solved one problem. I have not put the class to the group, so wen I remove, the group have stay and I was unable to add it again.
The other problem is, if I need to add a group and elements inside the group they don't apear.
But if I add tthe elements in the root all go fine.
For my application I need to hide some groups.
