Node-red-contrib-ui-svg remove and add elements

Hi
I have a problema whith elements in the SVG.
I add elements by input text

{
        "command": "add_element",
        "elementType": "text",
        "elementId": "text140",
        "parentElementId": "group140",
        "elementAttributes": {
            "class": "gridElement cls-7 140"
        },
"textContent": "Text"
    }

but I need to remove the element

{
        "command": "remove_element",
        "selector": ".gridElement"
}

Everything is fine until now, but I need to add again the element whith another text and same Id, and the element is not added.
Is there any solution?
I need to do this by input message.

{
        "command": "add_element",
        "elementType": "text",
        "elementId": "text140",
        "parentElementId": "group140",
        "elementAttributes": {
            "class": "gridElement cls-7 140"
        },
"textContent": "Other text same Id"
    }

Do you actually need to add & remove the element?

Why not just set text blank then set new text?

Also, if you wish us to try this, you will have to post a demo flow that demonstrates this (some injects and the SVG node)

Lastly, can you confirm the versions of...

  • node-red
  • node-red-contrib-ui-svg
  • node-red-dashboard
  • the browser you are using

I need to add and remove the element because in the first time I can add 2 elements, but then add 6, then add 2.

  • node-red 1.3.4
  • node-red-contrib-ui-svg 7.13.0
  • node-red-dashboard 2.29.0
  • the browser you are using Chrome

Latest version is 2.2.4
image

Also, you have not exported a demo flow so cannot help you further

1 Like

Indeed. It could be a bug, but it can also be a fault in your svg: e.g. you have also applied that class to your group, so the group is also removed. Or whatever else...
Moreover it is very time consuming if we have to create test flows ourselves, for every issue that is being reported...

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.

Hi, there were a number of issues (duplicate IDs, specifying transforms for each element instead of the group, and some others that I have forgotten) so here is a working demo based on your flow...

[{"id":"795769ff.1d2ab8","type":"ui_svg_graphics","z":"af952aeaa20f4f97","group":"dce9e7a2.d20c78","order":2,"width":"9","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=\"800\" height=\"600\">\n    <g id=\"group100\" class=\"gridRow\" >\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,"cssString":"div.ui-svg svg{\n    color: var(--nr-dashboard-widgetColor);\n    fill: currentColor !important;\n}\ndiv.ui-svg path {\n    fill: inherit !important;\n}","name":"","x":940,"y":1400,"wires":[[]]},{"id":"6f9c8f56.e6bbd","type":"inject","z":"af952aeaa20f4f97","name":"Remove all","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"remove_element\",\"selector\":\".gridRow\"}","payloadType":"json","x":440,"y":1460,"wires":[["6afd33de1bd71c02"]]},{"id":"7895ede6.da6c54","type":"function","z":"af952aeaa20f4f97","name":"Add gridRow","func":"// Generate random coordinates between 0 and 100\nvar addX = 96;\nvar gridElementsAdded = context.global.get('ObjectiveGridAdded') || 0;\nvar positionX = 64 + (addX*gridElementsAdded);\nvar positionXLine = 100 + (addX*gridElementsAdded);\n\ncontext.global.set('ObjectiveGridAdded', gridElementsAdded+1);  \nvar groupId = \"group\" + (gridElementsAdded + 1);\nmsg.payload = [\n    {\n        \"command\": \"add_element\",\n        \"elementType\": \"g\",\n        \"elementId\": groupId,\n        \"parentElementId\": \"objectiveGroup\",\n        \"elementAttributes\": {\n            \"class\": \"gridRow row\" + (gridElementsAdded + 1),\n            \"transform\" : \"translate(72,\" + positionX + \")\"\n        },\n    },\n    {\n        \"command\": \"add_element\",\n        \"elementType\": \"text\",\n        \"parentElementId\": groupId,\n        \"elementAttributes\": {\n            \"class\": \"gridElement topic\",\n            \"transform\" : \"translate(72)\"\n        },\n        \"elementStyleAttributes\": {},\n        \"textContent\": \"4/5\",\n        gridElementsAdded: gridElementsAdded\n    },\n    {\n        \"command\": \"add_element\",\n        \"elementType\": \"text\",\n        \"parentElementId\": groupId,\n        \"elementAttributes\": {\n            \"class\": \"gridElement text\" + (gridElementsAdded + 1),\n            \"transform\": \"translate(171)\"\n        },\n        \"elementStyleAttributes\": {},\n        \"textContent\": \"Text\",\n        gridElementsAdded: gridElementsAdded\n    },\n    {\n        \"command\": \"add_element\",\n        \"elementType\": \"line\",\n        \"parentElementId\": groupId,\n        \"elementAttributes\": {\n            \"class\": \"cls-objectiveSeparator sep\" + (gridElementsAdded + 1),\n            \"transform\": \"translate(20,20)\",\n            \"x2\": \"1600\"\n        },\n        gridElementsAdded: gridElementsAdded\n    }\n]\n\n/*\n<g class=\"gridRow\" id=\"group100\" transform=\"translate(0, 50)\">\n        <text id=\"topicPos100\" class=\"gridElement \" transform=\"translate(72)\">index</text>\n        <text id=\"topicDesc100\" class=\"gridElement \" style=\"font-weight:bold\" transform=\"translate(171)\">\n           do some stuff</text>\n        <line id=\"line100\" class=\"cls-objectiveSeparator 100\" x2=\"1600\" transform=\"translate(20,20)\">\n    </line></g>\n*/\n\nreturn msg;\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":630,"y":1400,"wires":[["795769ff.1d2ab8","f8d80979.4204a8"]]},{"id":"f8d80979.4204a8","type":"debug","z":"af952aeaa20f4f97","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":930,"y":1360,"wires":[]},{"id":"6afd33de1bd71c02","type":"change","z":"af952aeaa20f4f97","name":"","rules":[{"t":"set","p":"ObjectiveGridAdded","pt":"global","to":"0","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":690,"y":1460,"wires":[["795769ff.1d2ab8"]]},{"id":"5c39bea75ed268ac","type":"inject","z":"af952aeaa20f4f97","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":440,"y":1400,"wires":[["7895ede6.da6c54"]]},{"id":"dce9e7a2.d20c78","type":"ui_group","name":"Object detection","tab":"5132060d.4cde48","order":1,"disp":true,"width":"9","collapse":false},{"id":"5132060d.4cde48","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

Hi @Steve-Mcl,
Thanks for your help !!!
Wasn't aware that you were going to assist. So unfortunately I have been spending my evening also on the same issues I'm afraid ...

Some other issues I found:

  • Instead of element type "g" he used "group"
  • The usage of "elementStyleAttributes": {} resulted in an incomplete style attribute. I have fixed that on Github, to make sure no style attribute is generated in this case.

I have also added point 4 to the 'troubleshooting' section on the readme page, to explain how to see the generated SVG DOM tree using the browser's developer tools. Because that might help users to troubleshoot issues.

Damn, I had planned to work on a new node this evening. But my time is almost up now...

Hi,
Thanks for the help.
The duplicated Id's was only for the demo, the problems it was that I add a element group instead of g.
now it's working.
Tanks again for the help.