Introduce RED.utils.createSVGElement

packages/node_modules/@node-red/editor-client/src/js/ui/utils.js

@@ -1397,6 +1397,17 @@ RED.utils = (function() {
         return r;
     }
 
+    function createSVGElement(tag, attrs = {}, parent) {
+        const element = document.createElementNS('http://www.w3.org/2000/svg', tag)
+        for (const k in attrs) {
+            element.setAttribute(k, attrs[k])
+        }
+        if (parent) {
+            parent.appendChild(element)
+        }
+        return element
+    }
+
     return {
         createObjectElement: createObjectElement,
         getMessageProperty: getMessageProperty,
@@ -1420,6 +1431,7 @@ RED.utils = (function() {
         getDarkerColor: getDarkerColor,
         parseModuleList: parseModuleList,
         checkModuleAllowed: checkModuleAllowed,
-        getBrowserInfo: getBrowserInfo
+        getBrowserInfo: getBrowserInfo,
+        createSVGElement: createSVGElement
     }
 })();

packages/node_modules/@node-red/editor-client/src/js/ui/view-annotations.js

@@ -91,8 +91,7 @@ RED.view.annotations = (function() {
     function addAnnotation(id,evt) {
         var opts = annotations[id];
         evt.el.__annotations__ = evt.el.__annotations__ || [];
-        var annotationGroup = document.createElementNS("http://www.w3.org/2000/svg","g");
+        var annotationGroup = RED.utils.createSVGElement("g", { class: opts.class || '' })
-        annotationGroup.setAttribute("class",opts.class || "");
         evt.el.__annotations__.push({
             id:id,
             element: annotationGroup

packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js

@@ -15,133 +15,128 @@
  **/
 
 
- RED.view.navigator = (function() {
+RED.view.navigator = (function() {
+    var nav_scale = 25;
+    var nav_width = 5000/nav_scale;
+    var nav_height = 5000/nav_scale;
 
-     var nav_scale = 25;
+    var navContainer;
-     var nav_width = 5000/nav_scale;
+    var navBox;
-     var nav_height = 5000/nav_scale;
+    var navBorder;
+    var scrollPos;
+    var scaleFactor;
+    var chartSize;
+    var dimensions;
+    var isDragging;
+    var isShowing = false;
 
-     var navContainer;
+    var domSelection
-     var navBox;
-     var navBorder;
-     var navVis;
-     var scrollPos;
-     var scaleFactor;
-     var chartSize;
-     var dimensions;
-     var isDragging;
-     var isShowing = false;
 
-     function refreshNodes() {
+    function refreshNodes() {
-         if (!isShowing) {
+        if (!isShowing) {
-             return;
+            return;
-         }
+        }
-         var navNode = navVis.selectAll(".red-ui-navigator-node").data(RED.view.getActiveNodes(),function(d){return d.id});
+        domSelection.refresh(RED.view.getActiveNodes())
-         navNode.exit().remove();
+    }
-         navNode.enter().insert("rect")
-             .attr('class','red-ui-navigator-node')
-             .attr("pointer-events", "none");
-         navNode.each(function(d) {
-             d3.select(this).attr("x",function(d) { return (d.x-d.w/2)/nav_scale })
-             .attr("y",function(d) { return (d.y-d.h/2)/nav_scale })
-             .attr("width",function(d) { return Math.max(9,d.w/nav_scale) })
-             .attr("height",function(d) { return Math.max(3,d.h/nav_scale) })
-             .attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def);})
-         });
-     }
-     function onScroll() {
-         if (!isDragging) {
-             resizeNavBorder();
-         }
-     }
-     function resizeNavBorder() {
-         if (navBorder) {
-             scaleFactor = RED.view.scale();
-             chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()];
-             scrollPos = [$("#red-ui-workspace-chart").scrollLeft(),$("#red-ui-workspace-chart").scrollTop()];
-             navBorder.attr('x',scrollPos[0]/nav_scale)
-                      .attr('y',scrollPos[1]/nav_scale)
-                      .attr('width',chartSize[0]/nav_scale/scaleFactor)
-                      .attr('height',chartSize[1]/nav_scale/scaleFactor)
-         }
-     }
-     function toggle() {
-         if (!isShowing) {
-             isShowing = true;
-             $("#red-ui-view-navigate").addClass("selected");
-             resizeNavBorder();
-             refreshNodes();
-             $("#red-ui-workspace-chart").on("scroll",onScroll);
-             navContainer.fadeIn(200);
-         } else {
-             isShowing = false;
-             navContainer.fadeOut(100);
-             $("#red-ui-workspace-chart").off("scroll",onScroll);
-             $("#red-ui-view-navigate").removeClass("selected");
-         }
-     }
 
-     return {
+    function onScroll() {
-         init: function() {
+        if (!isDragging) {
+            resizeNavBorder();
+        }
+    }
+    function resizeNavBorder() {
+        if (navBorder) {
+            scaleFactor = RED.view.scale();
+            chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()];
+            scrollPos = [$("#red-ui-workspace-chart").scrollLeft(),$("#red-ui-workspace-chart").scrollTop()];
 
-             $(window).on("resize", resizeNavBorder);
+            navBorder.attr('x', scrollPos[0]/nav_scale)
-             RED.events.on("sidebar:resize",resizeNavBorder);
+            navBorder.attr('y', scrollPos[1]/nav_scale)
-             RED.actions.add("core:toggle-navigator",toggle);
+            navBorder.attr('width',chartSize[0]/nav_scale/scaleFactor)
-             var hideTimeout;
+            navBorder.attr('height',chartSize[1]/nav_scale/scaleFactor)
+        }
+    }
+    function toggle() {
+        if (!isShowing) {
+            isShowing = true;
+            $("#red-ui-view-navigate").addClass("selected");
+            resizeNavBorder();
+            refreshNodes();
+            $("#red-ui-workspace-chart").on("scroll",onScroll);
+            navContainer.fadeIn(200);
+        } else {
+            isShowing = false;
+            navContainer.fadeOut(100);
+            $("#red-ui-workspace-chart").off("scroll",onScroll);
+            $("#red-ui-view-navigate").removeClass("selected");
+        }
+    }
 
-             navContainer = $('<div>').css({
+    return {
-                 "position":"absolute",
+        init: function() {
-                 "bottom":$("#red-ui-workspace-footer").height(),
-                 "right":0,
-                 zIndex: 1
-             }).appendTo("#red-ui-workspace").hide();
 
-             navBox = d3.select(navContainer[0])
+            $(window).on("resize", resizeNavBorder);
-                 .append("svg:svg")
+            RED.events.on("sidebar:resize",resizeNavBorder);
-                 .attr("width", nav_width)
+            RED.actions.add("core:toggle-navigator",toggle);
-                 .attr("height", nav_height)
-                 .attr("pointer-events", "all")
-                 .attr("id","red-ui-navigator-canvas")
 
-             navBox.append("rect").attr("x",0).attr("y",0).attr("width",nav_width).attr("height",nav_height).style({
+            navContainer = $('<div>').css({
-                 fill:"none",
+                "position":"absolute",
-                 stroke:"none",
+                "bottom":$("#red-ui-workspace-footer").height(),
-                 pointerEvents:"all"
+                "right":0,
-             }).on("mousedown", function() {
+                zIndex: 1
-                 // Update these in case they have changed
+            }).appendTo("#red-ui-workspace").hide();
-                 scaleFactor = RED.view.scale();
-                 chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()];
-                 dimensions = [chartSize[0]/nav_scale/scaleFactor, chartSize[1]/nav_scale/scaleFactor];
-                 var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
-                 var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
-                 navBorder.attr('x',newX).attr('y',newY);
-                 isDragging = true;
-                 $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
-                 $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
-             }).on("mousemove", function() {
-                 if (!isDragging) { return }
-                 if (d3.event.buttons === 0) {
-                     isDragging = false;
-                     return;
-                 }
-                 var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
-                 var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
-                 navBorder.attr('x',newX).attr('y',newY);
-                 $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
-                 $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
-             }).on("mouseup", function() {
-                 isDragging = false;
-             })
 
-             navBorder = navBox.append("rect").attr("class","red-ui-navigator-border")
+            navBox = $(RED.utils.createSVGElement('svg', {id: "red-ui-navigator-canvas", width: nav_width, height: nav_height, 'pointer-events': 'all'})).appendTo(navContainer)
 
-             navVis = navBox.append("svg:g")
+            const navBoxBody = $(RED.utils.createSVGElement("rect", { x: 0, y: 0, width: nav_width, height: nav_height, fill: 'none', stroke: 'none', 'pointer-events': 'all'}))
+            .css({'cursor': 'pointer'})
+            navBoxBody.on('mousedown',function(event) {
+                // Update these in case they have changed
+                scaleFactor = RED.view.scale();
+                chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()];
+                dimensions = [chartSize[0]/nav_scale/scaleFactor, chartSize[1]/nav_scale/scaleFactor];
+                var newX = Math.max(0,Math.min(event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
+                var newY = Math.max(0,Math.min(event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
+                navBorder.attr('x',newX)
+                navBorder.attr('y',newY);
+                isDragging = true;
+                $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
+                $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
+            }).on('mousemove', function(event) {
+                if (!isDragging) { return }
+                if (event.buttons === 0) {
+                    isDragging = false;
+                    return;
+                }
+                var newX = Math.max(0,Math.min(event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
+                var newY = Math.max(0,Math.min(event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
+                navBorder.attr('x',newX)
+                navBorder.attr('y',newY);
+                $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
+                $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
+            }).on('mouseup', function() {
+                isDragging = false;
+            }).appendTo(navBox)
 
-             RED.statusBar.add({
+            navBorder = $(RED.utils.createSVGElement("rect", { "class": "red-ui-navigator-border" })).appendTo(navBox)
-                 id: "view-navigator",
+
-                 align: "right",
+            const navVis = $(RED.utils.createSVGElement('g')).appendTo(navBox)
-                 element: $('<button class="red-ui-footer-button-toggle single" id="red-ui-view-navigate"><i class="fa fa-map-o"></i></button>')
+
-             })
+            domSelection = RED.utils.domSelection(navVis[0], '.red-ui-navigator-node', function() {
+                return RED.utils.createSVGElement('rect', { class: 'red-ui-navigator-node', 'pointer-events': 'none' })
+            }, function(node) {
+                node.setAttribute('x', (this.x-this.w/2)/nav_scale)
+                node.setAttribute('y', (this.y-this.h/2)/nav_scale)
+                node.setAttribute('width', Math.max(9,this.w/nav_scale))
+                node.setAttribute('height', Math.max(3,this.h/nav_scale))
+                node.setAttribute('fill', RED.utils.getNodeColor(this.type,this._def))
+            })
+
+            RED.statusBar.add({
+                id: "view-navigator",
+                align: "right",
+                element: $('<button class="red-ui-footer-button-toggle single" id="red-ui-view-navigate"><i class="fa fa-map-o"></i></button>')
+            })
 
             $("#red-ui-view-navigate").on("click", function(evt) {
                 evt.preventDefault();

packages/node_modules/@node-red/editor-client/src/js/ui/view.js

@@ -700,11 +700,11 @@ RED.view = (function() {
             type: "badge",
             class: "red-ui-flow-node-changed",
             element: function() {
-                var changeBadge = document.createElementNS("http://www.w3.org/2000/svg","circle");
+                return RED.utils.createSVGElement("circle", {
-                changeBadge.setAttribute("cx",5);
+                    cx: 5,
-                changeBadge.setAttribute("cy",5);
+                    cy: 5,
-                changeBadge.setAttribute("r",5);
+                    r: 5
-                return changeBadge;
+                })
             },
             show: function(n) { return n.changed||n.moved }
         })
@@ -713,9 +713,9 @@ RED.view = (function() {
             type: "badge",
             class: "red-ui-flow-node-error",
             element: function(d) {
-                var errorBadge = document.createElementNS("http://www.w3.org/2000/svg","path");
+                return RED.utils.createSVGElement("path", {
-                errorBadge.setAttribute("d","M 0,9 l 10,0 -5,-8 z");
+                    d: "M 0,9 l 10,0 -5,-8 z"
-                return errorBadge
+                })
             },
             tooltip: function(d) {
                 if (d.validationErrors && d.validationErrors.length > 0) {
@@ -4233,13 +4233,14 @@ RED.view = (function() {
                     d.resize = true;
                     d.dirty = true;
 
-                    var mainRect = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                    var mainRect = RED.utils.createSVGElement("rect", {
+                        class: "red-ui-flow-subflow-port",
+                        rx: 8,
+                        ry: 8,
+                        width: 40,
+                        height: 40,
+                    })
                     mainRect.__data__ = d;
-                    mainRect.setAttribute("class", "red-ui-flow-subflow-port");
-                    mainRect.setAttribute("rx", 8);
-                    mainRect.setAttribute("ry", 8);
-                    mainRect.setAttribute("width", 40);
-                    mainRect.setAttribute("height", 40);
                     node[0][0].__mainRect__ = mainRect;
                     d3.select(mainRect)
                         .on("mouseup",nodeMouseUp)
@@ -4248,50 +4249,50 @@ RED.view = (function() {
                         .on("touchend",nodeTouchEnd)
                     nodeContents.appendChild(mainRect);
 
-                    var output_groupEl = document.createElementNS("http://www.w3.org/2000/svg","g");
+                    var output_groupEl = RED.utils.createSVGElement("g", { x: 0, y: 0 })
-                    output_groupEl.setAttribute("x",0);
-                    output_groupEl.setAttribute("y",0);
                     node[0][0].__outputLabelGroup__ = output_groupEl;
 
-                    var output_output = document.createElementNS("http://www.w3.org/2000/svg","text");
+                    var output_output = RED.utils.createSVGElement("text", { class: "red-ui-flow-port-label" })
-                    output_output.setAttribute("class","red-ui-flow-port-label");
                     output_output.style["font-size"] = "10px";
                     output_output.textContent = "output";
                     output_groupEl.appendChild(output_output);
                     node[0][0].__outputOutput__ = output_output;
 
-                    var output_number = document.createElementNS("http://www.w3.org/2000/svg","text");
+                    var output_number = RED.utils.createSVGElement("text", {
-                    output_number.setAttribute("class","red-ui-flow-port-label red-ui-flow-port-index");
+                        class: "red-ui-flow-port-label red-ui-flow-port-index",
-                    output_number.setAttribute("x",0);
+                        x: 0,
-                    output_number.setAttribute("y",0);
+                        y: 0
+                    })
                     output_number.textContent = d.i+1;
                     output_groupEl.appendChild(output_number);
                     node[0][0].__outputNumber__ = output_number;
 
-                    var output_border = document.createElementNS("http://www.w3.org/2000/svg","path");
+                    var output_border = RED.utils.createSVGElement("path", {
-                    output_border.setAttribute("d","M 40 1 l 0 38")
+                        d: "M 40 1 l 0 38",
-                    output_border.setAttribute("class", "red-ui-flow-node-icon-shade-border")
+                        class: "red-ui-flow-node-icon-shade-border"
+                    })
                     output_groupEl.appendChild(output_border);
                     node[0][0].__outputBorder__ = output_border;
 
                     nodeContents.appendChild(output_groupEl);
 
-                    var text = document.createElementNS("http://www.w3.org/2000/svg","g");
+                    var text = RED.utils.createSVGElement("g", {
-                    text.setAttribute("class","red-ui-flow-port-label");
+                        class: "red-ui-flow-port-label",
-                    text.setAttribute("transform","translate(38,0)");
+                        transform: "translate(38,0)",
-                    text.setAttribute('style', 'fill : #888');  // hard coded here!
+                        style: 'fill : #888'  // hard coded here!
+                    })
                     node[0][0].__textGroup__ = text;
                     nodeContents.append(text);
 
-                    var portEl = document.createElementNS("http://www.w3.org/2000/svg","g");
+                    var portEl = RED.utils.createSVGElement("g", { transform: 'translate(-5,15)'})
-                    portEl.setAttribute('transform','translate(-5,15)')
 
-                    var port = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                    var port = RED.utils.createSVGElement("rect", {
-                    port.setAttribute("class","red-ui-flow-port");
+                        class: "red-ui-flow-port",
-                    port.setAttribute("rx",3);
+                        rx: 3,
-                    port.setAttribute("ry",3);
+                        ry: 3,
-                    port.setAttribute("width",10);
+                        width: 10,
-                    port.setAttribute("height",10);
+                        height: 10
+                    })
                     portEl.appendChild(port);
                     port.__data__ = d;
 
@@ -4420,10 +4421,11 @@ RED.view = (function() {
                                 }
                                 for (var i=0; i<sn; i++) {
                                     if (i===textLines.length) {
-                                        var line = document.createElementNS("http://www.w3.org/2000/svg","text");
+                                        var line = RED.utils.createSVGElement("text", {
-                                        line.setAttribute("class","red-ui-flow-node-label-text");
+                                            class: "red-ui-flow-node-label-text",
-                                        line.setAttribute("x",0);
+                                            x: 0,
-                                        line.setAttribute("y",i*24);
+                                            y: i*24
+                                        });
                                         this.__textGroup__.appendChild(line);
                                     }
                                     textLines[i].textContent = sa[i];
@@ -4493,32 +4495,35 @@ RED.view = (function() {
                 d.resize = true;
 
                 if (d._def.button) {
-                    var buttonGroup = document.createElementNS("http://www.w3.org/2000/svg","g");
+                    var buttonGroup = RED.utils.createSVGElement("g", {
+                        class: "red-ui-flow-node-button",
+                        transform: "translate("+((d._def.align == "right") ? 94 : -25)+",2)"
+                    })
                     buttonGroup.__data__ = d;
-                    buttonGroup.setAttribute("transform", "translate("+((d._def.align == "right") ? 94 : -25)+",2)");
-                    buttonGroup.setAttribute("class","red-ui-flow-node-button");
                     node[0][0].__buttonGroup__ = buttonGroup;
 
-                    var bgBackground = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                    var bgBackground = RED.utils.createSVGElement("rect", {
+                        class: "red-ui-flow-node-button-background",
+                        rx: 5,
+                        ry: 5,
+                        width: 32,
+                        height: node_height-4
+                    })
                     bgBackground.__data__ = d;
-                    bgBackground.setAttribute("class","red-ui-flow-node-button-background");
-                    bgBackground.setAttribute("rx",5);
-                    bgBackground.setAttribute("ry",5);
-                    bgBackground.setAttribute("width",32);
-                    bgBackground.setAttribute("height",node_height-4);
                     buttonGroup.appendChild(bgBackground);
                     node[0][0].__buttonGroupBackground__ = bgBackground;
 
-                    var bgButton = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                    var bgButton = RED.utils.createSVGElement("rect", {
+                        class: "red-ui-flow-node-button-button",
+                        x: d._def.align == "right"? 11:5,
+                        y: 4,
+                        rx: 4,
+                        ry: 4,
+                        width: 16,
+                        height: node_height-12,
+                        fill: RED.utils.getNodeColor(d.type,d._def)
+                    })
                     bgButton.__data__ = d;
-                    bgButton.setAttribute("class","red-ui-flow-node-button-button");
-                    bgButton.setAttribute("x", d._def.align == "right"? 11:5);
-                    bgButton.setAttribute("y",4);
-                    bgButton.setAttribute("rx",4);
-                    bgButton.setAttribute("ry",4);
-                    bgButton.setAttribute("width",16);
-                    bgButton.setAttribute("height",node_height-12);
-                    bgButton.setAttribute("fill", RED.utils.getNodeColor(d.type,d._def));
                     d3.select(bgButton)
                         .on("mousedown",function(d) {if (!lasso && isButtonEnabled(d)) {focusView();d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}})
                         .on("mouseup",function(d) {if (!lasso && isButtonEnabled(d)) { d3.select(this).attr("fill-opacity",0.4);d3.event.preventDefault();d3.event.stopPropagation();}})
@@ -4539,12 +4544,13 @@ RED.view = (function() {
 
                 }
 
-                var mainRect = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                var mainRect = RED.utils.createSVGElement("rect", {
+                    class: "red-ui-flow-node "+(d.type == "unknown"?"red-ui-flow-node-unknown":""),
+                    rx: 5,
+                    ry: 5,
+                    fill: RED.utils.getNodeColor(d.type,d._def)
+                })
                 mainRect.__data__ = d;
-                mainRect.setAttribute("class", "red-ui-flow-node "+(d.type == "unknown"?"red-ui-flow-node-unknown":""));
-                mainRect.setAttribute("rx", 5);
-                mainRect.setAttribute("ry", 5);
-                mainRect.setAttribute("fill", RED.utils.getNodeColor(d.type,d._def));
                 node[0][0].__mainRect__ = mainRect;
                 d3.select(mainRect)
                     .on("mouseup",nodeMouseUp)
@@ -4559,61 +4565,65 @@ RED.view = (function() {
 
                 if (d._def.icon) {
                     var icon_url = RED.utils.getNodeIcon(d._def,d);
-                    var icon_groupEl = document.createElementNS("http://www.w3.org/2000/svg","g");
+                    var icon_groupEl = RED.utils.createSVGElement("g", {
-                    icon_groupEl.__data__ = d;
+                        class: "red-ui-flow-node-icon-group"+("right" == d._def.align?" red-ui-flow-node-icon-group-right":""),
-                    icon_groupEl.setAttribute("class","red-ui-flow-node-icon-group"+("right" == d._def.align?" red-ui-flow-node-icon-group-right":""));
+                        x: 0,
-                    icon_groupEl.setAttribute("x",0);
+                        y: 0
-                    icon_groupEl.setAttribute("y",0);
+                    })
                     icon_groupEl.style["pointer-events"] = "none";
+                    icon_groupEl.__data__ = d;
                     node[0][0].__iconGroup__ = icon_groupEl;
-                    var icon_shade = document.createElementNS("http://www.w3.org/2000/svg","path");
+                    var icon_shade = RED.utils.createSVGElement("path", {
-                    icon_shade.setAttribute("x",0);
+                        x: 0,
-                    icon_shade.setAttribute("y",0);
+                        y: 0,
-                    icon_shade.setAttribute("class","red-ui-flow-node-icon-shade")
+                        class: "red-ui-flow-node-icon-shade"
+                    })
                     icon_groupEl.appendChild(icon_shade);
                     node[0][0].__iconShade__ = icon_shade;
 
                     var icon_group = d3.select(icon_groupEl)
                     createIconAttributes(icon_url, icon_group, d);
 
-                    var icon_shade_border = document.createElementNS("http://www.w3.org/2000/svg","path");
+                    var icon_shade_border = RED.utils.createSVGElement("path", {
-                    icon_shade_border.setAttribute("d","right" != d._def.align ? "M 30 1 l 0 "+(d.h-2) : "M 0 1 l 0 "+(d.h-2)  )
+                        d: "right" != d._def.align ? "M 30 1 l 0 "+(d.h-2) : "M 0 1 l 0 "+(d.h-2),
-                    icon_shade_border.setAttribute("class", "red-ui-flow-node-icon-shade-border")
+                        class: "red-ui-flow-node-icon-shade-border"
+                    })
                     icon_groupEl.appendChild(icon_shade_border);
                     node[0][0].__iconShadeBorder__ = icon_shade_border;
 
                     nodeContents.appendChild(icon_groupEl);
                 }
-                var text = document.createElementNS("http://www.w3.org/2000/svg","g");
+                var text = RED.utils.createSVGElement("g", {
-                text.setAttribute("class","red-ui-flow-node-label"+(hideLabel?" hide":"")+(d._def.align?" red-ui-flow-node-label-"+d._def.align:""));
+                    class: "red-ui-flow-node-label"+(hideLabel?" hide":"")+(d._def.align?" red-ui-flow-node-label-"+d._def.align:""),
-                text.setAttribute("transform","translate(38,0)");
+                    transform: "translate(38,0)"
-                // text.setAttribute("dy", ".3px");
+                    // dy: ".3px",
-                // text.setAttribute("text-anchor",d._def.align !== "right" ? "start":"end");
+                    // "text-anchor": d._def.align !== "right" ? "start":"end"
+                })
                 nodeContents.appendChild(text);
                 node[0][0].__textGroup__ = text;
 
-                var statusEl = document.createElementNS("http://www.w3.org/2000/svg","g");
+                var statusEl = RED.utils.createSVGElement("g", { class: "red-ui-flow-node-status-group" })
-                // statusEl.__data__ = d;
-                statusEl.setAttribute("class","red-ui-flow-node-status-group");
                 statusEl.style.display = "none";
                 node[0][0].__statusGroup__ = statusEl;
 
-                var statusRect = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                var statusRect = RED.utils.createSVGElement("rect", {
-                statusRect.setAttribute("class","red-ui-flow-node-status");
+                    class: "red-ui-flow-node-status",
-                statusRect.setAttribute("x",6);
+                    x: 6,
-                statusRect.setAttribute("y",1);
+                    y: 1,
-                statusRect.setAttribute("width",9);
+                    width: 9,
-                statusRect.setAttribute("height",9);
+                    height: 9,
-                statusRect.setAttribute("rx",2);
+                    rx: 2,
-                statusRect.setAttribute("ry",2);
+                    ry: 2,
-                statusRect.setAttribute("stroke-width","3");
+                    "stroke-width": 3
+                })
                 statusEl.appendChild(statusRect);
                 node[0][0].__statusShape__ = statusRect;
 
-                var statusLabel = document.createElementNS("http://www.w3.org/2000/svg","text");
+                var statusLabel = RED.utils.createSVGElement("text", {
-                statusLabel.setAttribute("class","red-ui-flow-node-status-label");
+                    class: "red-ui-flow-node-status-label",
-                statusLabel.setAttribute("x",20);
+                    x: 20,
-                statusLabel.setAttribute("y",10);
+                    y: 10
+                })
                 statusEl.appendChild(statusLabel);
                 node[0][0].__statusLabel__ = statusLabel;
 
@@ -4698,10 +4708,11 @@ RED.view = (function() {
                             }
                             for (var i=0; i<sn; i++) {
                                 if (i===textLines.length) {
-                                    var line = document.createElementNS("http://www.w3.org/2000/svg","text");
+                                    var line = RED.utils.createSVGElement("text", {
-                                    line.setAttribute("class","red-ui-flow-node-label-text");
+                                        class: "red-ui-flow-node-label-text",
-                                    line.setAttribute("x",0);
+                                        x: 0,
-                                    line.setAttribute("y",i*24);
+                                        y: i*24
+                                    })
                                     this.__textGroup__.appendChild(line);
                                 }
                                 textLines[i].textContent = sa[i];
@@ -4800,22 +4811,23 @@ RED.view = (function() {
                         for(var portIndex = 0; portIndex < numOutputs; portIndex++ ) {
                             var portGroup;
                             if (portIndex === this.__outputs__.length) {
-                                portGroup = document.createElementNS("http://www.w3.org/2000/svg","g");
+                                portGroup = RED.utils.createSVGElement("g", { class: "red-ui-flow-port-output" })
-                                portGroup.setAttribute("class","red-ui-flow-port-output");
                                 var portPort;
                                 if (d.type === "link out") {
-                                    portPort = document.createElementNS("http://www.w3.org/2000/svg","circle");
+                                    portPort = RED.utils.createSVGElement("circle", {
-                                    portPort.setAttribute("cx",11);
+                                        cx: 11,
-                                    portPort.setAttribute("cy",5);
+                                        cy: 5,
-                                    portPort.setAttribute("r",5);
+                                        r: 5,
-                                    portPort.setAttribute("class","red-ui-flow-port red-ui-flow-link-port");
+                                        class: "red-ui-flow-port red-ui-flow-link-port"
+                                    })
                                 } else {
-                                    portPort = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                                    portPort = RED.utils.createSVGElement("rect", {
-                                    portPort.setAttribute("rx",3);
+                                        rx: 3,
-                                    portPort.setAttribute("ry",3);
+                                        ry: 3,
-                                    portPort.setAttribute("width",10);
+                                        width: 10,
-                                    portPort.setAttribute("height",10);
+                                        height: 10,
-                                    portPort.setAttribute("class","red-ui-flow-port");
+                                        class: "red-ui-flow-port"
+                                    })
                                 }
                                 portGroup.appendChild(portPort);
                                 portGroup.__port__ = portPort;
@@ -4967,26 +4979,28 @@ RED.view = (function() {
                 var junction = d3.select(this);
                 var contents = document.createDocumentFragment();
                 // d.added = true;
-                var junctionBack = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                var junctionBack = RED.utils.createSVGElement("rect", {
-                junctionBack.setAttribute("class","red-ui-flow-junction-background");
+                    class: "red-ui-flow-junction-background",
-                junctionBack.setAttribute("x",-5);
+                    x: -5,
-                junctionBack.setAttribute("y",-5);
+                    y: -5,
-                junctionBack.setAttribute("width",10);
+                    width: 10,
-                junctionBack.setAttribute("height",10);
+                    height: 10,
-                junctionBack.setAttribute("rx",3);
+                    rx: 3,
-                junctionBack.setAttribute("ry",3);
+                    ry: 3
+                })
                 junctionBack.__data__ = d;
                 this.__junctionBack__ = junctionBack;
                 contents.appendChild(junctionBack);
 
-                var junctionInput = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                var junctionInput = RED.utils.createSVGElement("rect", {
-                junctionInput.setAttribute("class","red-ui-flow-junction-port red-ui-flow-junction-port-input");
+                    class: "red-ui-flow-junction-port red-ui-flow-junction-port-input",
-                junctionInput.setAttribute("x",-5);
+                    x: -5,
-                junctionInput.setAttribute("y",-5);
+                    y: -5,
-                junctionInput.setAttribute("width",10);
+                    width: 10,
-                junctionInput.setAttribute("height",10);
+                    height: 10,
-                junctionInput.setAttribute("rx",3);
+                    rx: 3,
-                junctionInput.setAttribute("ry",3);
+                    ry: 3
+                })
                 junctionInput.__data__ = d;
                 junctionInput.__portType__ = PORT_TYPE_INPUT;
                 junctionInput.__portIndex__ = 0;
@@ -4998,14 +5012,15 @@ RED.view = (function() {
 
                 this.__junctionInput__ = junctionInput;
                 contents.appendChild(junctionInput);
-                var junctionOutput = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                var junctionOutput = RED.utils.createSVGElement("rect", {
-                junctionOutput.setAttribute("class","red-ui-flow-junction-port red-ui-flow-junction-port-output");
+                    class: "red-ui-flow-junction-port red-ui-flow-junction-port-output",
-                junctionOutput.setAttribute("x",-5);
+                    x: -5,
-                junctionOutput.setAttribute("y",-5);
+                    y: -5,
-                junctionOutput.setAttribute("width",10);
+                    width: 10,
-                junctionOutput.setAttribute("height",10);
+                    height: 10,
-                junctionOutput.setAttribute("rx",3);
+                    rx: 3,
-                junctionOutput.setAttribute("ry",3);
+                    ry: 3,
+                })
                 junctionOutput.__data__ = d;
                 junctionOutput.__portType__ = PORT_TYPE_OUTPUT;
                 junctionOutput.__portIndex__ = 0;
@@ -5062,9 +5077,8 @@ RED.view = (function() {
                 var pathContents = document.createDocumentFragment();
 
                 d.added = true;
-                var pathBack = document.createElementNS("http://www.w3.org/2000/svg","path");
+                var pathBack = RED.utils.createSVGElement("path", { class: "red-ui-flow-link-background red-ui-flow-link-path"+(d.link?" red-ui-flow-link-link":"")})
                 pathBack.__data__ = d;
-                pathBack.setAttribute("class","red-ui-flow-link-background red-ui-flow-link-path"+(d.link?" red-ui-flow-link-link":""));
                 this.__pathBack__ = pathBack;
                 pathContents.appendChild(pathBack);
                 d3.select(pathBack)
@@ -5100,16 +5114,17 @@ RED.view = (function() {
                         }
                     })
 
-                var pathOutline = document.createElementNS("http://www.w3.org/2000/svg","path");
+                var pathOutline = RED.utils.createSVGElement("path", {
+                    class: "red-ui-flow-link-outline red-ui-flow-link-path"
+                })
                 pathOutline.__data__ = d;
-                pathOutline.setAttribute("class","red-ui-flow-link-outline red-ui-flow-link-path");
                 this.__pathOutline__ = pathOutline;
                 pathContents.appendChild(pathOutline);
 
-                var pathLine = document.createElementNS("http://www.w3.org/2000/svg","path");
+                var pathLine = RED.utils.createSVGElement("path", {
+                    class: "red-ui-flow-link-line red-ui-flow-link-path"+(d.link?" red-ui-flow-link-link":(activeSubflow?" red-ui-flow-subflow-link":""))
+                })
                 pathLine.__data__ = d;
-                pathLine.setAttribute("class","red-ui-flow-link-line red-ui-flow-link-path"+
-                    (d.link?" red-ui-flow-link-link":(activeSubflow?" red-ui-flow-subflow-link":"")));
                 this.__pathLine__ = pathLine;
                 pathContents.appendChild(pathLine);