Merge pull request #3797 from node-red/301

Update changelog and bump for 3.0.1
2025-03-01 10:36:34 +00:00 · 2022-07-22 10:27:46 +01:00 · 2022-07-22 09:50:37 +01:00 · 2022-07-21 16:27:41 +01:00 · 2022-07-21 14:44:29 +01:00 · 2022-07-21 11:39:50 +01:00
28 changed files with 410 additions and 434 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+#### 3.0.1: Maintenance Release
+
+Editor
+
+ - Allow codeEditor theme to be set even if `codeEditor` is not set in settings.js (#3794) @Steve-Mcl
+ - Sys info (diagnostics report) amendments (#3793) @Steve-Mcl
+ - Allow `mode` and `title` to be omitted in `options` argument for `createEditor` (#3791) @Steve-Mcl
+ - Fix focus issues (#3789) @Steve-Mcl
+ - Ensure all typedInput buttons have button type set (#3788) @knolleary
+ - Do not flag hasUsers=false nodes as unused in search (#3787) @knolleary
+ - Properly position quick-add dialog in all cases (#3786) @knolleary
+ - Ensure quick-add dialog does not obscure ghost node when shifted (#3785) @knolleary
+ - Remove use of Object.hasOwn (#3784) @knolleary
+
 #### 3.0.0: Milestone Release

 Editor
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -152,7 +152,6 @@ module.exports = function(grunt) {
                    "packages/node_modules/@node-red/editor-client/src/js/history.js",
                    "packages/node_modules/@node-red/editor-client/src/js/validators.js",
                    "packages/node_modules/@node-red/editor-client/src/js/ui/utils.js",
-                    "packages/node_modules/@node-red/editor-client/src/js/ui/utils-domselection.js",
                    "packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js",
                    "packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js",
                    "packages/node_modules/@node-red/editor-client/src/js/ui/common/checkboxSet.js",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "node-red",
-    "version": "3.1.0-beta.0",
+    "version": "3.0.1",
    "description": "Low-code programming for event-driven applications",
    "homepage": "http://nodered.org",
    "license": "Apache-2.0",
--- a/packages/node_modules/@node-red/editor-api/lib/editor/theme.js
+++ b/packages/node_modules/@node-red/editor-api/lib/editor/theme.js
@@ -327,9 +327,8 @@ module.exports = {
                        themeContext.header.url = themePlugin.header.url || themeContext.header.url
                    }
                }
-                if(theme.codeEditor) {
-                    theme.codeEditor.options = Object.assign({}, themePlugin.monacoOptions, theme.codeEditor.options);
-                }
+                theme.codeEditor = theme.codeEditor || {}
+                theme.codeEditor.options = Object.assign({}, themePlugin.monacoOptions, theme.codeEditor.options);
            }
            activeThemeInitialised = true;
        }
--- a/packages/node_modules/@node-red/editor-api/package.json
+++ b/packages/node_modules/@node-red/editor-api/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@node-red/editor-api",
-    "version": "3.1.0-beta.0",
+    "version": "3.0.1",
    "license": "Apache-2.0",
    "main": "./lib/index.js",
    "repository": {
@@ -16,8 +16,8 @@
        }
    ],
    "dependencies": {
-        "@node-red/util": "3.1.0-beta.0",
-        "@node-red/editor-client": "3.1.0-beta.0",
+        "@node-red/util": "3.0.1",
+        "@node-red/editor-client": "3.0.1",
        "bcryptjs": "2.4.3",
        "body-parser": "1.20.0",
        "clone": "2.1.2",
--- a/packages/node_modules/@node-red/editor-client/package.json
+++ b/packages/node_modules/@node-red/editor-client/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@node-red/editor-client",
-    "version": "3.1.0-beta.0",
+    "version": "3.0.1",
    "license": "Apache-2.0",
    "repository": {
        "type": "git",
--- a/packages/node_modules/@node-red/editor-client/src/js/red.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/red.js
@@ -766,7 +766,7 @@ var RED = (function() {
        $('<div id="red-ui-header-shade" class="hide"></div>').appendTo(header);
        $('<div id="red-ui-main-container" class="red-ui-sidebar-closed hide">'+
            '<div id="red-ui-workspace"></div>'+
-            '<div id="red-ui-editor-stack"></div>'+
+            '<div id="red-ui-editor-stack" tabindex="-1"></div>'+
            '<div id="red-ui-palette"></div>'+
            '<div id="red-ui-sidebar"></div>'+
            '<div id="red-ui-sidebar-separator"></div>'+
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
@@ -90,10 +90,10 @@
                        optEl.append(generateSpans(srcMatch));
                        optEl.appendTo(element);
                    }
-                    matches.push({ 
-                        value: optVal, 
-                        label: element, 
-                        i: (valMatch.found ? valMatch.index : srcMatch.index) 
+                    matches.push({
+                        value: optVal,
+                        label: element,
+                        i: (valMatch.found ? valMatch.index : srcMatch.index)
                    });
                }
            })
@@ -501,7 +501,7 @@
                this.options.types = this.options.types||Object.keys(allOptions);
            }

-            this.selectTrigger = $('<button class="red-ui-typedInput-type-select" tabindex="0"></button>').prependTo(this.uiSelect);
+            this.selectTrigger = $('<button type="button" class="red-ui-typedInput-type-select" tabindex="0"></button>').prependTo(this.uiSelect);
            $('<i class="red-ui-typedInput-icon fa fa-caret-down"></i>').toggle(this.options.types.length > 1).appendTo(this.selectTrigger);

            this.selectLabel = $('<span class="red-ui-typedInput-type-label"></span>').appendTo(this.selectTrigger);
@@ -570,7 +570,7 @@
            })

            // explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline'
-            this.optionSelectTrigger = $('<button tabindex="0" class="red-ui-typedInput-option-trigger" style="display:inline-block"><span class="red-ui-typedInput-option-caret"><i class="red-ui-typedInput-icon fa fa-caret-down"></i></span></button>').appendTo(this.uiSelect);
+            this.optionSelectTrigger = $('<button type="button" tabindex="0" class="red-ui-typedInput-option-trigger" style="display:inline-block"><span class="red-ui-typedInput-option-caret"><i class="red-ui-typedInput-icon fa fa-caret-down"></i></span></button>').appendTo(this.uiSelect);
            this.optionSelectLabel = $('<span class="red-ui-typedInput-option-label"></span>').prependTo(this.optionSelectTrigger);
            // RED.popover.tooltip(this.optionSelectLabel,function() {
            //     return that.optionValue;
@@ -591,7 +591,7 @@
                that.uiSelect.addClass('red-ui-typedInput-focus');
            });

-            this.optionExpandButton = $('<button tabindex="0" class="red-ui-typedInput-option-expand" style="display:inline-block"></button>').appendTo(this.uiSelect);
+            this.optionExpandButton = $('<button type="button" tabindex="0" class="red-ui-typedInput-option-expand" style="display:inline-block"></button>').appendTo(this.uiSelect);
            this.optionExpandButtonIcon = $('<i class="red-ui-typedInput-icon fa fa-ellipsis-h"></i>').appendTo(this.optionExpandButton);

            this.type(this.typeField.val() || this.options.default||this.typeList[0].value);
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js
@@ -44,14 +44,10 @@ RED.contextMenu = (function () {
        const canRemoveFromGroup = hasSelection && !!selection.nodes[0].g
        const offset = $("#red-ui-workspace-chart").offset()

-        let addX = options.x - offset.left + $("#red-ui-workspace-chart").scrollLeft()
-        let addY = options.y - offset.top + $("#red-ui-workspace-chart").scrollTop()
-
-        if (RED.view.snapGrid) {
-            const gridSize = RED.view.gridSize()
-            addX = gridSize * Math.floor(addX / gridSize)
-            addY = gridSize * Math.floor(addY / gridSize)
-        }
+        // addX/addY must be the position in the workspace accounting for both scroll and scale
+        // The +5 is because we display the contextMenu -5,-5 to actual click position
+        let addX = (options.x + 5 - offset.left + $("#red-ui-workspace-chart").scrollLeft()) / RED.view.scale()
+        let addY = (options.y + 5 - offset.top + $("#red-ui-workspace-chart").scrollTop()) / RED.view.scale()

        const menuItems = [
            { onselect: 'core:show-action-list', onpostselect: function () { } },
@@ -67,6 +63,10 @@ RED.contextMenu = (function () {
                                splice: isSingleLink ? selection.links[0] : undefined,
                                // spliceMultiple: isMultipleLinks
                            })
+                        },
+                        onpostselect: function() {
+                            // ensure quick add dialog search input has focus
+                            $('#red-ui-type-search-input').trigger('focus')
                        }
                    },
                    (hasLinks) ? { // has least 1 wire selected
@@ -144,7 +144,7 @@ RED.contextMenu = (function () {
            ($(window).width() -MENU_WIDTH)) {
            direction = "left";
        }
-        
+
        menu = RED.menu.init({
            direction: direction,
            onpreselect: function() {
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
@@ -1105,6 +1105,10 @@ RED.editor = (function() {
                if (editing_node) {
                    RED.sidebar.info.refresh(editing_node);
                    RED.sidebar.help.show(editing_node.type, false);
+                    //ensure focused element is NOT body (for keyboard scope to operate correctly)
+                    if (document.activeElement.tagName === 'BODY') {
+                        $('#red-ui-editor-stack').trigger('focus')
+                    }
                }
            }
        }
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/monaco.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/monaco.js
@@ -764,7 +764,7 @@ RED.editor.codeEditor.monaco = (function() {

        
        if(!options.stateId && options.stateId !== false) {
-            options.stateId = RED.editor.generateViewStateId("monaco", options, (options.mode || options.title).split("/").pop());
+            options.stateId = RED.editor.generateViewStateId("monaco", options, (options.mode || options.title || "").split("/").pop());
        }
        var el = options.element || $("#"+options.id)[0];
        var toolbarRow = $("<div>").appendTo(el);
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js
@@ -267,7 +267,7 @@ RED.keyboard = (function() {
                    return resolveKeyEvent(evt);
                }
                if (Object.keys(handler).length > 0) {
-                    // check if there's a potential combined handler initiated by this keyCode
+                    // check if there's a potential combined handler initiated by this keyCode 
                    for (let h in handler) {
                        if (matchHandlerToEvent(evt,handler[h]) > -1) {
                            partialState = handler;
@@ -298,21 +298,21 @@ RED.keyboard = (function() {
            return resolveKeyEvent(evt);
        }
    }
-    document.addEventListener("keydown", function(event) {
+    d3.select(window).on("keydown",function() {
        if (!handlersActive) {
            return;
        }
-        if (metaKeyCodes[event.keyCode]) {
+        if (metaKeyCodes[d3.event.keyCode]) {
            return;
        }
-        var handler = resolveKeyEvent(event);
+        var handler = resolveKeyEvent(d3.event);
        if (handler && handler.ondown) {
            if (typeof handler.ondown === "string") {
                RED.actions.invoke(handler.ondown);
            } else {
                handler.ondown();
            }
-            event.preventDefault();
+            d3.event.preventDefault();
        }
    });

--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
@@ -299,7 +299,7 @@ RED.palette = (function() {
                    RED.view.focus();
                },
                stop: function() {
-                    document.querySelectorAll(".red-ui-flow-link-splice").forEach(n => { n.classList.remove("red-ui-flow-link-splice") })
+                    d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false);
                    if (hoverGroup) {
                        document.getElementById("group_select_"+hoverGroup.id).classList.remove("red-ui-flow-group-hovered");
                    }
@@ -358,26 +358,26 @@ RED.palette = (function() {
                                var mx = mouseX / RED.view.scale();
                                var my = mouseY / RED.view.scale();
                                for (var i=0;i<nodes.length;i++) {
-                                    var node = nodes[i];
-                                    if (node.classList.contains('red-ui-flow-link-background') && !node.classList.contains('red-ui-flow-link-link')) {
-                                        var length = node.getTotalLength();
+                                    var node = d3.select(nodes[i]);
+                                    if (node.classed('red-ui-flow-link-background') && !node.classed('red-ui-flow-link-link')) {
+                                        var length = nodes[i].getTotalLength();
                                        for (var j=0;j<length;j+=10) {
-                                            var p = node.getPointAtLength(j);
+                                            var p = nodes[i].getPointAtLength(j);
                                            var d2 = ((p.x-mx)*(p.x-mx))+((p.y-my)*(p.y-my));
                                            if (d2 < 200 && d2 < bestDistance) {
                                                bestDistance = d2;
-                                                bestLink = node;
+                                                bestLink = nodes[i];
                                            }
                                        }
                                    }
                                }
                                if (activeSpliceLink && activeSpliceLink !== bestLink) {
-                                    activeSpliceLink.parentNode.classList.remove('red-ui-flow-link-splice');
+                                    d3.select(activeSpliceLink.parentNode).classed('red-ui-flow-link-splice',false);
                                }
                                if (bestLink) {
-                                    bestLink.parentNode.classList.add('red-ui-flow-link-splice');
+                                    d3.select(bestLink.parentNode).classed('red-ui-flow-link-splice',true)
                                } else {
-                                    document.querySelectorAll(".red-ui-flow-link-splice").forEach(n => { n.classList.remove("red-ui-flow-link-splice") })
+                                    d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false);
                                }
                                if (activeSpliceLink !== bestLink) {
                                    if (bestLink) {
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js
@@ -187,7 +187,7 @@ RED.search = (function() {
                        }
                        if (flags.hasOwnProperty("unused")) {
                            var isUnused = (node.node.type === 'subflow' && node.node.instances.length === 0) ||
-                                           (isConfigNode && node.node.users.length === 0)
+                                           (isConfigNode && node.node.users.length === 0 && node.node._def.hasUsers !== false)
                            if (flags.unused !== isUnused) {
                                continue;
                            }
@@ -538,7 +538,7 @@ RED.search = (function() {
                $(previousActiveElement).trigger("focus");
            }
            previousActiveElement = null;
-        } 
+        }
        if(!keepSearchToolbar) {
            clearActiveSearch();
        }
@@ -630,7 +630,7 @@ RED.search = (function() {
        $("#red-ui-sidebar-shade").on('mousedown',hide);

        $("#red-ui-view-searchtools-close").on("click", function close() {
-            clearActiveSearch();            
+            clearActiveSearch();
            updateSearchToolbar();
        });
        $("#red-ui-view-searchtools-close").trigger("click");
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js
@@ -27,24 +27,26 @@ RED.touch.radialMenu = (function() {
    function createRadial(obj,pos,options) {
        isActive = true;
        try {
-            touchMenu = $('<div>', {class: 'red-ui-editor-radial-menu'}).appendTo('body')
-                .on('touchstart',function(evt) {
+            touchMenu = d3.select("body").append("div").classed("red-ui-editor-radial-menu",true)
+                .on('touchstart',function() {
                    hide();
-                    evt.preventDefault();
+                    d3.event.preventDefault();
                });

-            var menu = $('<div>').appendTo(touchMenu).css({
+            var menu = touchMenu.append("div")
+                .style({
                    top: (pos[1]-80)+"px",
                    left:(pos[0]-80)+"px",
                });
+
            var menuOpts = [];
            var createMenuOpt = function(x,y,opt) {
-                opt.el = $('<div>', {class: 'red-ui-editor-radial-menu-opt'}).appendTo(menu)
-                    .css({
+                opt.el = menu.append("div").classed("red-ui-editor-radial-menu-opt",true)
+                    .style({
                        top: (y+80-25)+"px",
                        left:(x+80-25)+"px"
                    })
-                    .toggleClass("red-ui-editor-radial-menu-opt-disabled",!!opt.disabled)
+                    .classed("red-ui-editor-radial-menu-opt-disabled",!!opt.disabled)

                opt.el.html(opt.name);

@@ -52,16 +54,16 @@ RED.touch.radialMenu = (function() {
                opt.y = y;
                menuOpts.push(opt);

-                opt.el.on('touchstart',function(evt) {
-                    opt.el.toggleClass("red-ui-editor-radial-menu-opt-active",true)
-                    evt.preventDefault();
-                    evt.stopPropagation();
+                opt.el.on('touchstart',function() {
+                    opt.el.classed("red-ui-editor-radial-menu-opt-active",true)
+                    d3.event.preventDefault();
+                    d3.event.stopPropagation();
                });
-                opt.el.on('touchend',function(evt) {
+                opt.el.on('touchend',function() {
                    hide();
                    opt.onselect();
-                    evt.preventDefault();
-                    evt.stopPropagation();
+                    d3.event.preventDefault();
+                    d3.event.stopPropagation();
                });
            }

@@ -86,8 +88,8 @@ RED.touch.radialMenu = (function() {
            }

            obj.on('touchend.radial',function() {
-                    obj.off('touchend.radial');
-                    obj.off('touchmenu.radial');
+                    obj.on('touchend.radial',null);
+                    obj.on('touchmenu.radial',null);

                    if (activeOption) {
                        try {
@@ -101,9 +103,9 @@ RED.touch.radialMenu = (function() {
                    }
            });

-            obj.on('touchmove.radial',function(evt) {
+            obj.on('touchmove.radial',function() {
            try {
-                var touch0 = evt.touches.item(0);
+                var touch0 = d3.event.touches.item(0);
                var p = [touch0.pageX - pos[0],touch0.pageY-pos[1]];
                for (var i=0;i<menuOpts.length;i++) {
                    var opt = menuOpts[i];
@@ -117,7 +119,7 @@ RED.touch.radialMenu = (function() {
                            if (opt === activeOption) {
                                activeOption = null;
                            }
-                            opt.el.toggleClass("selected",false);
+                            opt.el.classed("selected",false);
                        }
                    }
                }
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js
@@ -269,8 +269,8 @@ RED.typeSearch = (function() {
        moveCallback = opts.move;
        RED.events.emit("type-search:open");
        //shade.show();
-        if ($("#red-ui-main-container").height() - opts.y - 150 < 0) {
-            opts.y = opts.y - 235;
+        if ($("#red-ui-main-container").height() - opts.y - 195 < 0) {
+            opts.y = opts.y - 275;
        }
        dialog.css({left:opts.x+"px",top:opts.y+"px"}).show();
        searchResultsDiv.slideDown(300);
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/utils-domselection.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/utils-domselection.js
@@ -1,61 +0,0 @@
-/**
- * Modelled after `d3.selection` this provides a way to keep a mapping of
- * DOM Nodes with a data collection.
- *
- * The goal here is not to reproduce d3 functionality as-is, but to provide an
- * api that is specific to what we need to do
- *
- * const domSelection = RED.utils.domSelection(container, selector, createNode, eachNode)
- *
- * - container - a DOM Node that is the container of the DOM Nodes to track
- * - selector - CSS selector to get the DOM nodes to track
- * - createNode - function called when a DOM node must be created for a piece of data.
- *                `this` is the data item. Should return the DOM Node. It will
- *                get added to the container.
- * - eachNode - function called for each DOM node/data item in the selection
- *
- * DomSelection.refresh(data) - called whenever the selection should be refreshed.
- *  Data is expected to be an array of objects that contain an 'id' property
- *
- */
-RED.utils.domSelection = (function() {
-
-    class DomSelection {
-        constructor(container, selector, createNode, eachNode) {
-            this.container = container
-            this.selector = selector
-            this.createNode = createNode
-            this.eachNode = eachNode
-            this.data = []
-        }
-
-        refresh(data) {
-            const domNodes = this.container.querySelectorAll(this.selector)
-            const domItems = new Map()
-            const dataLength = data.length
-            const domLength = domNodes.length
-            for (let i = 0; i < domLength; i++) {
-                const domNode = domNodes[i]
-                if (domNode.__data__) {
-                    domItems.set(domNode.__data__.id, domNode)
-                }
-            }
-            for (let i = 0; i < dataLength; i++) {
-                const datum = data[i]
-                let domNode = domItems.get(datum.id)
-                if (!domNode) {
-                    domNode = this.createNode.call(datum)
-                    this.container.appendChild(domNode)
-                    domNode.__data__ = datum
-                } else {
-                    domItems.delete(datum.id)
-                }
-                this.eachNode.call(datum, domNode)
-            }
-            for (const remainingDomNodes of domItems) {
-                remainingDomNodes[1].remove()
-            }
-        }
-    }
-    return (container, selector, createNode, eachNode) => new DomSelection(container, selector, createNode, eachNode)
-})()
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
@@ -1397,17 +1397,6 @@ 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,
@@ -1431,7 +1420,6 @@ RED.utils = (function() {
        getDarkerColor: getDarkerColor,
        parseModuleList: parseModuleList,
        checkModuleAllowed: checkModuleAllowed,
-        getBrowserInfo: getBrowserInfo,
-        createSVGElement: createSVGElement
+        getBrowserInfo: getBrowserInfo
    }
 })();
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-annotations.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-annotations.js
@@ -91,7 +91,8 @@ RED.view.annotations = (function() {
    function addAnnotation(id,evt) {
        var opts = annotations[id];
        evt.el.__annotations__ = evt.el.__annotations__ || [];
-        var annotationGroup = RED.utils.createSVGElement("g", { class: opts.class || '' })
+        var annotationGroup = document.createElementNS("http://www.w3.org/2000/svg","g");
+        annotationGroup.setAttribute("class",opts.class || "");
        evt.el.__annotations__.push({
            id:id,
            element: annotationGroup
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js
@@ -15,128 +15,133 @@
 **/


-RED.view.navigator = (function() {
-    var nav_scale = 25;
-    var nav_width = 5000/nav_scale;
-    var nav_height = 5000/nav_scale;
+ RED.view.navigator = (function() {

-    var navContainer;
-    var navBox;
-    var navBorder;
-    var scrollPos;
-    var scaleFactor;
-    var chartSize;
-    var dimensions;
-    var isDragging;
-    var isShowing = false;
+     var nav_scale = 25;
+     var nav_width = 5000/nav_scale;
+     var nav_height = 5000/nav_scale;

-    var domSelection
+     var navContainer;
+     var navBox;
+     var navBorder;
+     var navVis;
+     var scrollPos;
+     var scaleFactor;
+     var chartSize;
+     var dimensions;
+     var isDragging;
+     var isShowing = false;

-    function refreshNodes() {
-        if (!isShowing) {
-            return;
-        }
-        domSelection.refresh(RED.view.getActiveNodes())
-    }
+     function refreshNodes() {
+         if (!isShowing) {
+             return;
+         }
+         var navNode = navVis.selectAll(".red-ui-navigator-node").data(RED.view.getActiveNodes(),function(d){return d.id});
+         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");
+         }
+     }

-    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()];
+     return {
+         init: function() {

-            navBorder.attr('x', scrollPos[0]/nav_scale)
-            navBorder.attr('y', scrollPos[1]/nav_scale)
-            navBorder.attr('width',chartSize[0]/nav_scale/scaleFactor)
-            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");
-        }
-    }
+             $(window).on("resize", resizeNavBorder);
+             RED.events.on("sidebar:resize",resizeNavBorder);
+             RED.actions.add("core:toggle-navigator",toggle);
+             var hideTimeout;

-    return {
-        init: function() {
+             navContainer = $('<div>').css({
+                 "position":"absolute",
+                 "bottom":$("#red-ui-workspace-footer").height(),
+                 "right":0,
+                 zIndex: 1
+             }).appendTo("#red-ui-workspace").hide();

-            $(window).on("resize", resizeNavBorder);
-            RED.events.on("sidebar:resize",resizeNavBorder);
-            RED.actions.add("core:toggle-navigator",toggle);
+             navBox = d3.select(navContainer[0])
+                 .append("svg:svg")
+                 .attr("width", nav_width)
+                 .attr("height", nav_height)
+                 .attr("pointer-events", "all")
+                 .attr("id","red-ui-navigator-canvas")

-            navContainer = $('<div>').css({
-                "position":"absolute",
-                "bottom":$("#red-ui-workspace-footer").height(),
-                "right":0,
-                zIndex: 1
-            }).appendTo("#red-ui-workspace").hide();
+             navBox.append("rect").attr("x",0).attr("y",0).attr("width",nav_width).attr("height",nav_height).style({
+                 fill:"none",
+                 stroke:"none",
+                 pointerEvents:"all"
+             }).on("mousedown", function() {
+                 // 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(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;
+             })

-            navBox = $(RED.utils.createSVGElement('svg', {id: "red-ui-navigator-canvas", width: nav_width, height: nav_height, 'pointer-events': 'all'})).appendTo(navContainer)
+             navBorder = navBox.append("rect").attr("class","red-ui-navigator-border")

-            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)
+             navVis = navBox.append("svg:g")

-            navBorder = $(RED.utils.createSVGElement("rect", { "class": "red-ui-navigator-border" })).appendTo(navBox)
-
-            const navVis = $(RED.utils.createSVGElement('g')).appendTo(navBox)
-
-            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.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();
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
@@ -294,13 +294,25 @@ RED.view = (function() {
                    ]
                    startTouchDistance = Math.sqrt((a*a)+(b*b));
                } else {
+                    var obj = d3.select(document.body);
                    touch0 = d3.event.touches.item(0);
                    var pos = [touch0.pageX,touch0.pageY];
                    startTouchCenter = [touch0.pageX,touch0.pageY];
                    startTouchDistance = 0;
+                    var point = d3.touches(this)[0];
                    touchStartTime = setTimeout(function() {
                        touchStartTime = null;
-                        showTouchMenu(document.body,pos);
+                        showTouchMenu(obj,pos);
+                        //lasso = eventLayer.append("rect")
+                        //    .attr("ox",point[0])
+                        //    .attr("oy",point[1])
+                        //    .attr("rx",2)
+                        //    .attr("ry",2)
+                        //    .attr("x",point[0])
+                        //    .attr("y",point[1])
+                        //    .attr("width",0)
+                        //    .attr("height",0)
+                        //    .attr("class","nr-ui-view-lasso");
                    },touchLongPressTimeout);
                }
                d3.event.preventDefault();
@@ -700,11 +712,11 @@ RED.view = (function() {
            type: "badge",
            class: "red-ui-flow-node-changed",
            element: function() {
-                return RED.utils.createSVGElement("circle", {
-                    cx: 5,
-                    cy: 5,
-                    r: 5
-                })
+                var changeBadge = document.createElementNS("http://www.w3.org/2000/svg","circle");
+                changeBadge.setAttribute("cx",5);
+                changeBadge.setAttribute("cy",5);
+                changeBadge.setAttribute("r",5);
+                return changeBadge;
            },
            show: function(n) { return n.changed||n.moved }
        })
@@ -713,9 +725,9 @@ RED.view = (function() {
            type: "badge",
            class: "red-ui-flow-node-error",
            element: function(d) {
-                return RED.utils.createSVGElement("path", {
-                    d: "M 0,9 l 10,0 -5,-8 z"
-                })
+                var errorBadge = document.createElementNS("http://www.w3.org/2000/svg","path");
+                errorBadge.setAttribute("d","M 0,9 l 10,0 -5,-8 z");
+                return errorBadge
            },
            tooltip: function(d) {
                if (d.validationErrors && d.validationErrors.length > 0) {
@@ -1059,12 +1071,15 @@ RED.view = (function() {
            RED.view.redraw();
        }

+        // `point` is the place in the workspace the mouse has clicked.
+        //  This takes into account scrolling and scaling of the workspace.
        var ox = point[0];
        var oy = point[1];

+        // Need to map that to browser location to position the pop-up
        const offset = $("#red-ui-workspace-chart").offset()
-        var clientX = ox + offset.left - $("#red-ui-workspace-chart").scrollLeft()
-        var clientY = oy + offset.top - $("#red-ui-workspace-chart").scrollTop()
+        var clientX = (ox * scaleFactor) + offset.left - $("#red-ui-workspace-chart").scrollLeft()
+        var clientY = (oy * scaleFactor) + offset.top - $("#red-ui-workspace-chart").scrollTop()

        if (RED.settings.get("editor").view['view-snap-grid']) {
            // eventLayer.append("circle").attr("cx",point[0]).attr("cy",point[1]).attr("r","2").attr('fill','red')
@@ -3691,12 +3706,13 @@ RED.view = (function() {
    }
    function nodeTouchStart(d) {
        if (RED.view.DEBUG) { console.warn("nodeTouchStart", mouse_mode,d); }
+        var obj = d3.select(this);
        var touch0 = d3.event.touches.item(0);
        var pos = [touch0.pageX,touch0.pageY];
        startTouchCenter = [touch0.pageX,touch0.pageY];
        startTouchDistance = 0;
        touchStartTime = setTimeout(function() {
-            showTouchMenu(this,pos);
+            showTouchMenu(obj,pos);
        },touchLongPressTimeout);
        nodeMouseDown.call(this,d)
        d3.event.preventDefault();
@@ -3855,11 +3871,12 @@ RED.view = (function() {
        focusView();
        d3.event.stopPropagation();

+        var obj = d3.select(document.body);
        var touch0 = d3.event.touches.item(0);
        var pos = [touch0.pageX,touch0.pageY];
        touchStartTime = setTimeout(function() {
            touchStartTime = null;
-            showTouchMenu(document.body,pos);
+            showTouchMenu(obj,pos);
        },touchLongPressTimeout);
        d3.event.preventDefault();
    }
@@ -4233,14 +4250,13 @@ RED.view = (function() {
                    d.resize = true;
                    d.dirty = true;

-                    var mainRect = RED.utils.createSVGElement("rect", {
-                        class: "red-ui-flow-subflow-port",
-                        rx: 8,
-                        ry: 8,
-                        width: 40,
-                        height: 40,
-                    })
+                    var mainRect = document.createElementNS("http://www.w3.org/2000/svg","rect");
                    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)
@@ -4249,50 +4265,50 @@ RED.view = (function() {
                        .on("touchend",nodeTouchEnd)
                    nodeContents.appendChild(mainRect);

-                    var output_groupEl = RED.utils.createSVGElement("g", { x: 0, y: 0 })
+                    var output_groupEl = document.createElementNS("http://www.w3.org/2000/svg","g");
+                    output_groupEl.setAttribute("x",0);
+                    output_groupEl.setAttribute("y",0);
                    node[0][0].__outputLabelGroup__ = output_groupEl;

-                    var output_output = RED.utils.createSVGElement("text", { class: "red-ui-flow-port-label" })
+                    var output_output = document.createElementNS("http://www.w3.org/2000/svg","text");
+                    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 = RED.utils.createSVGElement("text", {
-                        class: "red-ui-flow-port-label red-ui-flow-port-index",
-                        x: 0,
-                        y: 0
-                    })
+                    var output_number = document.createElementNS("http://www.w3.org/2000/svg","text");
+                    output_number.setAttribute("class","red-ui-flow-port-label red-ui-flow-port-index");
+                    output_number.setAttribute("x",0);
+                    output_number.setAttribute("y",0);
                    output_number.textContent = d.i+1;
                    output_groupEl.appendChild(output_number);
                    node[0][0].__outputNumber__ = output_number;

-                    var output_border = RED.utils.createSVGElement("path", {
-                        d: "M 40 1 l 0 38",
-                        class: "red-ui-flow-node-icon-shade-border"
-                    })
+                    var output_border = document.createElementNS("http://www.w3.org/2000/svg","path");
+                    output_border.setAttribute("d","M 40 1 l 0 38")
+                    output_border.setAttribute("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 = RED.utils.createSVGElement("g", {
-                        class: "red-ui-flow-port-label",
-                        transform: "translate(38,0)",
-                        style: 'fill : #888'  // hard coded here!
-                    })
+                    var text = document.createElementNS("http://www.w3.org/2000/svg","g");
+                    text.setAttribute("class","red-ui-flow-port-label");
+                    text.setAttribute("transform","translate(38,0)");
+                    text.setAttribute('style', 'fill : #888');  // hard coded here!
                    node[0][0].__textGroup__ = text;
                    nodeContents.append(text);

-                    var portEl = RED.utils.createSVGElement("g", { transform: 'translate(-5,15)'})
+                    var portEl = document.createElementNS("http://www.w3.org/2000/svg","g");
+                    portEl.setAttribute('transform','translate(-5,15)')

-                    var port = RED.utils.createSVGElement("rect", {
-                        class: "red-ui-flow-port",
-                        rx: 3,
-                        ry: 3,
-                        width: 10,
-                        height: 10
-                    })
+                    var port = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                    port.setAttribute("class","red-ui-flow-port");
+                    port.setAttribute("rx",3);
+                    port.setAttribute("ry",3);
+                    port.setAttribute("width",10);
+                    port.setAttribute("height",10);
                    portEl.appendChild(port);
                    port.__data__ = d;

@@ -4421,11 +4437,10 @@ RED.view = (function() {
                                }
                                for (var i=0; i<sn; i++) {
                                    if (i===textLines.length) {
-                                        var line = RED.utils.createSVGElement("text", {
-                                            class: "red-ui-flow-node-label-text",
-                                            x: 0,
-                                            y: i*24
-                                        });
+                                        var line = document.createElementNS("http://www.w3.org/2000/svg","text");
+                                        line.setAttribute("class","red-ui-flow-node-label-text");
+                                        line.setAttribute("x",0);
+                                        line.setAttribute("y",i*24);
                                        this.__textGroup__.appendChild(line);
                                    }
                                    textLines[i].textContent = sa[i];
@@ -4495,35 +4510,32 @@ RED.view = (function() {
                d.resize = true;

                if (d._def.button) {
-                    var buttonGroup = RED.utils.createSVGElement("g", {
-                        class: "red-ui-flow-node-button",
-                        transform: "translate("+((d._def.align == "right") ? 94 : -25)+",2)"
-                    })
+                    var buttonGroup = document.createElementNS("http://www.w3.org/2000/svg","g");
                    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 = RED.utils.createSVGElement("rect", {
-                        class: "red-ui-flow-node-button-background",
-                        rx: 5,
-                        ry: 5,
-                        width: 32,
-                        height: node_height-4
-                    })
+                    var bgBackground = document.createElementNS("http://www.w3.org/2000/svg","rect");
                    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 = 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)
-                    })
+                    var bgButton = document.createElementNS("http://www.w3.org/2000/svg","rect");
                    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();}})
@@ -4544,13 +4556,12 @@ RED.view = (function() {

                }

-                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)
-                })
+                var mainRect = document.createElementNS("http://www.w3.org/2000/svg","rect");
                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)
@@ -4565,65 +4576,61 @@ RED.view = (function() {

                if (d._def.icon) {
                    var icon_url = RED.utils.getNodeIcon(d._def,d);
-                    var icon_groupEl = RED.utils.createSVGElement("g", {
-                        class: "red-ui-flow-node-icon-group"+("right" == d._def.align?" red-ui-flow-node-icon-group-right":""),
-                        x: 0,
-                        y: 0
-                    })
-                    icon_groupEl.style["pointer-events"] = "none";
+                    var icon_groupEl = document.createElementNS("http://www.w3.org/2000/svg","g");
                    icon_groupEl.__data__ = d;
+                    icon_groupEl.setAttribute("class","red-ui-flow-node-icon-group"+("right" == d._def.align?" red-ui-flow-node-icon-group-right":""));
+                    icon_groupEl.setAttribute("x",0);
+                    icon_groupEl.setAttribute("y",0);
+                    icon_groupEl.style["pointer-events"] = "none";
                    node[0][0].__iconGroup__ = icon_groupEl;
-                    var icon_shade = RED.utils.createSVGElement("path", {
-                        x: 0,
-                        y: 0,
-                        class: "red-ui-flow-node-icon-shade"
-                    })
+                    var icon_shade = document.createElementNS("http://www.w3.org/2000/svg","path");
+                    icon_shade.setAttribute("x",0);
+                    icon_shade.setAttribute("y",0);
+                    icon_shade.setAttribute("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 = RED.utils.createSVGElement("path", {
-                        d: "right" != d._def.align ? "M 30 1 l 0 "+(d.h-2) : "M 0 1 l 0 "+(d.h-2),
-                        class: "red-ui-flow-node-icon-shade-border"
-                    })
+                    var icon_shade_border = document.createElementNS("http://www.w3.org/2000/svg","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)  )
+                    icon_shade_border.setAttribute("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 = RED.utils.createSVGElement("g", {
-                    class: "red-ui-flow-node-label"+(hideLabel?" hide":"")+(d._def.align?" red-ui-flow-node-label-"+d._def.align:""),
-                    transform: "translate(38,0)"
-                    // dy: ".3px",
-                    // "text-anchor": d._def.align !== "right" ? "start":"end"
-                })
+                var text = document.createElementNS("http://www.w3.org/2000/svg","g");
+                text.setAttribute("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)");
+                // text.setAttribute("dy", ".3px");
+                // text.setAttribute("text-anchor",d._def.align !== "right" ? "start":"end");
                nodeContents.appendChild(text);
                node[0][0].__textGroup__ = text;

-                var statusEl = RED.utils.createSVGElement("g", { class: "red-ui-flow-node-status-group" })
+                var statusEl = document.createElementNS("http://www.w3.org/2000/svg","g");
+                // statusEl.__data__ = d;
+                statusEl.setAttribute("class","red-ui-flow-node-status-group");
                statusEl.style.display = "none";
                node[0][0].__statusGroup__ = statusEl;

-                var statusRect = RED.utils.createSVGElement("rect", {
-                    class: "red-ui-flow-node-status",
-                    x: 6,
-                    y: 1,
-                    width: 9,
-                    height: 9,
-                    rx: 2,
-                    ry: 2,
-                    "stroke-width": 3
-                })
+                var statusRect = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                statusRect.setAttribute("class","red-ui-flow-node-status");
+                statusRect.setAttribute("x",6);
+                statusRect.setAttribute("y",1);
+                statusRect.setAttribute("width",9);
+                statusRect.setAttribute("height",9);
+                statusRect.setAttribute("rx",2);
+                statusRect.setAttribute("ry",2);
+                statusRect.setAttribute("stroke-width","3");
                statusEl.appendChild(statusRect);
                node[0][0].__statusShape__ = statusRect;

-                var statusLabel = RED.utils.createSVGElement("text", {
-                    class: "red-ui-flow-node-status-label",
-                    x: 20,
-                    y: 10
-                })
+                var statusLabel = document.createElementNS("http://www.w3.org/2000/svg","text");
+                statusLabel.setAttribute("class","red-ui-flow-node-status-label");
+                statusLabel.setAttribute("x",20);
+                statusLabel.setAttribute("y",10);
                statusEl.appendChild(statusLabel);
                node[0][0].__statusLabel__ = statusLabel;

@@ -4708,11 +4715,10 @@ RED.view = (function() {
                            }
                            for (var i=0; i<sn; i++) {
                                if (i===textLines.length) {
-                                    var line = RED.utils.createSVGElement("text", {
-                                        class: "red-ui-flow-node-label-text",
-                                        x: 0,
-                                        y: i*24
-                                    })
+                                    var line = document.createElementNS("http://www.w3.org/2000/svg","text");
+                                    line.setAttribute("class","red-ui-flow-node-label-text");
+                                    line.setAttribute("x",0);
+                                    line.setAttribute("y",i*24);
                                    this.__textGroup__.appendChild(line);
                                }
                                textLines[i].textContent = sa[i];
@@ -4811,23 +4817,22 @@ RED.view = (function() {
                        for(var portIndex = 0; portIndex < numOutputs; portIndex++ ) {
                            var portGroup;
                            if (portIndex === this.__outputs__.length) {
-                                portGroup = RED.utils.createSVGElement("g", { class: "red-ui-flow-port-output" })
+                                portGroup = document.createElementNS("http://www.w3.org/2000/svg","g");
+                                portGroup.setAttribute("class","red-ui-flow-port-output");
                                var portPort;
                                if (d.type === "link out") {
-                                    portPort = RED.utils.createSVGElement("circle", {
-                                        cx: 11,
-                                        cy: 5,
-                                        r: 5,
-                                        class: "red-ui-flow-port red-ui-flow-link-port"
-                                    })
+                                    portPort = document.createElementNS("http://www.w3.org/2000/svg","circle");
+                                    portPort.setAttribute("cx",11);
+                                    portPort.setAttribute("cy",5);
+                                    portPort.setAttribute("r",5);
+                                    portPort.setAttribute("class","red-ui-flow-port red-ui-flow-link-port");
                                } else {
-                                    portPort = RED.utils.createSVGElement("rect", {
-                                        rx: 3,
-                                        ry: 3,
-                                        width: 10,
-                                        height: 10,
-                                        class: "red-ui-flow-port"
-                                    })
+                                    portPort = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                                    portPort.setAttribute("rx",3);
+                                    portPort.setAttribute("ry",3);
+                                    portPort.setAttribute("width",10);
+                                    portPort.setAttribute("height",10);
+                                    portPort.setAttribute("class","red-ui-flow-port");
                                }
                                portGroup.appendChild(portPort);
                                portGroup.__port__ = portPort;
@@ -4904,7 +4909,7 @@ RED.view = (function() {
                        if (d._def.button) {
                            var buttonEnabled = isButtonEnabled(d);
                            this.__buttonGroup__.classList.toggle("red-ui-flow-node-button-disabled", !buttonEnabled);
-                            if (RED.runtime && Object.hasOwn(RED.runtime,'started')) {
+                            if (RED.runtime && RED.runtime.started !== undefined) {
                                this.__buttonGroup__.classList.toggle("red-ui-flow-node-button-stopped", !RED.runtime.started);
                            }

@@ -4979,28 +4984,26 @@ RED.view = (function() {
                var junction = d3.select(this);
                var contents = document.createDocumentFragment();
                // d.added = true;
-                var junctionBack = RED.utils.createSVGElement("rect", {
-                    class: "red-ui-flow-junction-background",
-                    x: -5,
-                    y: -5,
-                    width: 10,
-                    height: 10,
-                    rx: 3,
-                    ry: 3
-                })
+                var junctionBack = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                junctionBack.setAttribute("class","red-ui-flow-junction-background");
+                junctionBack.setAttribute("x",-5);
+                junctionBack.setAttribute("y",-5);
+                junctionBack.setAttribute("width",10);
+                junctionBack.setAttribute("height",10);
+                junctionBack.setAttribute("rx",3);
+                junctionBack.setAttribute("ry",3);
                junctionBack.__data__ = d;
                this.__junctionBack__ = junctionBack;
                contents.appendChild(junctionBack);

-                var junctionInput = RED.utils.createSVGElement("rect", {
-                    class: "red-ui-flow-junction-port red-ui-flow-junction-port-input",
-                    x: -5,
-                    y: -5,
-                    width: 10,
-                    height: 10,
-                    rx: 3,
-                    ry: 3
-                })
+                var junctionInput = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                junctionInput.setAttribute("class","red-ui-flow-junction-port red-ui-flow-junction-port-input");
+                junctionInput.setAttribute("x",-5);
+                junctionInput.setAttribute("y",-5);
+                junctionInput.setAttribute("width",10);
+                junctionInput.setAttribute("height",10);
+                junctionInput.setAttribute("rx",3);
+                junctionInput.setAttribute("ry",3);
                junctionInput.__data__ = d;
                junctionInput.__portType__ = PORT_TYPE_INPUT;
                junctionInput.__portIndex__ = 0;
@@ -5012,15 +5015,14 @@ RED.view = (function() {

                this.__junctionInput__ = junctionInput;
                contents.appendChild(junctionInput);
-                var junctionOutput = RED.utils.createSVGElement("rect", {
-                    class: "red-ui-flow-junction-port red-ui-flow-junction-port-output",
-                    x: -5,
-                    y: -5,
-                    width: 10,
-                    height: 10,
-                    rx: 3,
-                    ry: 3,
-                })
+                var junctionOutput = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                junctionOutput.setAttribute("class","red-ui-flow-junction-port red-ui-flow-junction-port-output");
+                junctionOutput.setAttribute("x",-5);
+                junctionOutput.setAttribute("y",-5);
+                junctionOutput.setAttribute("width",10);
+                junctionOutput.setAttribute("height",10);
+                junctionOutput.setAttribute("rx",3);
+                junctionOutput.setAttribute("ry",3);
                junctionOutput.__data__ = d;
                junctionOutput.__portType__ = PORT_TYPE_OUTPUT;
                junctionOutput.__portIndex__ = 0;
@@ -5077,8 +5079,9 @@ RED.view = (function() {
                var pathContents = document.createDocumentFragment();

                d.added = true;
-                var pathBack = RED.utils.createSVGElement("path", { class: "red-ui-flow-link-background red-ui-flow-link-path"+(d.link?" red-ui-flow-link-link":"")})
+                var pathBack = document.createElementNS("http://www.w3.org/2000/svg","path");
                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)
@@ -5114,17 +5117,16 @@ RED.view = (function() {
                        }
                    })

-                var pathOutline = RED.utils.createSVGElement("path", {
-                    class: "red-ui-flow-link-outline red-ui-flow-link-path"
-                })
+                var pathOutline = document.createElementNS("http://www.w3.org/2000/svg","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 = 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":""))
-                })
+                var pathLine = document.createElementNS("http://www.w3.org/2000/svg","path");
                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);

--- a/packages/node_modules/@node-red/nodes/package.json
+++ b/packages/node_modules/@node-red/nodes/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@node-red/nodes",
-    "version": "3.1.0-beta.0",
+    "version": "3.0.1",
    "license": "Apache-2.0",
    "repository": {
        "type": "git",
--- a/packages/node_modules/@node-red/registry/package.json
+++ b/packages/node_modules/@node-red/registry/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@node-red/registry",
-    "version": "3.1.0-beta.0",
+    "version": "3.0.1",
    "license": "Apache-2.0",
    "main": "./lib/index.js",
    "repository": {
@@ -16,7 +16,7 @@
        }
    ],
    "dependencies": {
-        "@node-red/util": "3.1.0-beta.0",
+        "@node-red/util": "3.0.1",
        "clone": "2.1.2",
        "fs-extra": "10.1.0",
        "semver": "7.3.7",
--- a/packages/node_modules/@node-red/runtime/lib/api/diagnostics.js
+++ b/packages/node_modules/@node-red/runtime/lib/api/diagnostics.js
@@ -100,9 +100,13 @@ function buildDiagnosticReport(scope, callback) {
            version: os.version(),
        },
        runtime: {
-            isStarted: runtime.isStarted(),
-            modules: modules,
            version: runtime.settings.version,
+            isStarted: runtime.isStarted(),
+            flows: {
+                state: runtime.flows && runtime.flows.state(),
+                started: runtime.flows && runtime.flows.started,
+            },
+            modules: modules,
            settings: {
                available: runtime.settings.available(),
                apiMaxLength: runtime.settings.apiMaxLength || "UNSET",
@@ -114,6 +118,11 @@ function buildDiagnosticReport(scope, callback) {
                flowFile: runtime.settings.flowFile || "UNSET",
                mqttReconnectTime: runtime.settings.mqttReconnectTime || "UNSET",
                serialReconnectTime: runtime.settings.serialReconnectTime || "UNSET",
+                socketReconnectTime: runtime.settings.socketReconnectTime || "UNSET",
+                socketTimeout: runtime.settings.socketTimeout || "UNSET",
+                tcpMsgQueueSize: runtime.settings.tcpMsgQueueSize || "UNSET",
+                inboundWebSocketTimeout: runtime.settings.inboundWebSocketTimeout || "UNSET",
+                runtimeState: runtime.settings.runtimeState || "UNSET",

                adminAuth: runtime.settings.adminAuth ? "SET" : "UNSET",

@@ -131,6 +140,7 @@ function buildDiagnosticReport(scope, callback) {
                uiHost: runtime.settings.uiHost ? "SET" : "UNSET",
                uiPort: runtime.settings.uiPort ? "SET" : "UNSET",
                userDir: runtime.settings.userDir ? "SET" : "UNSET",
+                nodesDir: runtime.settings.nodesDir && runtime.settings.nodesDir.length ? "SET" : "UNSET",
            }
        }
    }
--- a/packages/node_modules/@node-red/runtime/package.json
+++ b/packages/node_modules/@node-red/runtime/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@node-red/runtime",
-    "version": "3.1.0-beta.0",
+    "version": "3.0.1",
    "license": "Apache-2.0",
    "main": "./lib/index.js",
    "repository": {
@@ -16,8 +16,8 @@
        }
    ],
    "dependencies": {
-        "@node-red/registry": "3.1.0-beta.0",
-        "@node-red/util": "3.1.0-beta.0",
+        "@node-red/registry": "3.0.1",
+        "@node-red/util": "3.0.1",
        "async-mutex": "0.3.2",
        "clone": "2.1.2",
        "express": "4.18.1",
--- a/packages/node_modules/@node-red/util/package.json
+++ b/packages/node_modules/@node-red/util/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@node-red/util",
-    "version": "3.1.0-beta.0",
+    "version": "3.0.1",
    "license": "Apache-2.0",
    "repository": {
        "type": "git",
--- a/packages/node_modules/node-red/package.json
+++ b/packages/node_modules/node-red/package.json
@@ -1,6 +1,6 @@
 {
    "name": "node-red",
-    "version": "3.1.0-beta.0",
+    "version": "3.0.1",
    "description": "Low-code programming for event-driven applications",
    "homepage": "http://nodered.org",
    "license": "Apache-2.0",
@@ -31,10 +31,10 @@
        "flow"
    ],
    "dependencies": {
-        "@node-red/editor-api": "3.1.0-beta.0",
-        "@node-red/runtime": "3.1.0-beta.0",
-        "@node-red/util": "3.1.0-beta.0",
-        "@node-red/nodes": "3.1.0-beta.0",
+        "@node-red/editor-api": "3.0.1",
+        "@node-red/runtime": "3.0.1",
+        "@node-red/util": "3.0.1",
+        "@node-red/nodes": "3.0.1",
        "basic-auth": "2.0.1",
        "bcryptjs": "2.4.3",
        "express": "4.18.1",
--- a/test/unit/@node-red/runtime/lib/api/diagnostics_spec.js
+++ b/test/unit/@node-red/runtime/lib/api/diagnostics_spec.js
@@ -33,6 +33,11 @@ describe("runtime-api/diagnostics", function() {
                    flowFile: "flows.json",
                    mqttReconnectTime: 321,
                    serialReconnectTime: 432,
+                    socketReconnectTime: 2222,
+                    socketTimeout: 3333,
+                    tcpMsgQueueSize: 4444,
+                    inboundWebSocketTimeout: 5555,
+                    runtimeState: {enabled: true, ui: false},
                    adminAuth: {},//should be sanitised to "SET"
                    httpAdminRoot: "/admin/root/",
                    httpAdminCors: {},//should be sanitised to "SET"
@@ -45,6 +50,7 @@ describe("runtime-api/diagnostics", function() {
                    uiHost: "something.secret.com",//should be sanitised to "SET"
                    uiPort: 1337,//should be sanitised to "SET"
                    userDir: "/var/super/secret/",//should be sanitised to "SET",
+                    nodesDir: "/var/super/secret/",//should be sanitised to "SET",
                    contextStorage: {
                        default    : { module: "memory" },
                        file: { module: "localfilesystem" },
@@ -73,8 +79,9 @@ describe("runtime-api/diagnostics", function() {

                //result.runtime.xxxxx
                const runtimeCount = Object.keys(result.runtime).length;
-                runtimeCount.should.eql(4);//ensure no more than 4 keys are present in runtime 
+                runtimeCount.should.eql(5);//ensure 5 keys are present in runtime 
                result.runtime.should.have.property('isStarted',true)
+                result.runtime.should.have.property('flows')
                result.runtime.should.have.property('modules').type("object");
                result.runtime.should.have.property('settings').type("object");
                result.runtime.should.have.property('version','7.7.7');
@@ -87,7 +94,7 @@ describe("runtime-api/diagnostics", function() {

                //result.runtime.settings.xxxxx
                const settingsCount = Object.keys(result.runtime.settings).length;
-                settingsCount.should.eql(21);//ensure no more than the 21 settings listed below are present in the settings object
+                settingsCount.should.eql(27);//ensure no more than the 21 settings listed below are present in the settings object
                result.runtime.settings.should.have.property('available',true);
                result.runtime.settings.should.have.property('apiMaxLength', "UNSET");//deliberately disabled to ensure UNSET is returned
                result.runtime.settings.should.have.property('debugMaxLength', 1111);
@@ -96,6 +103,11 @@ describe("runtime-api/diagnostics", function() {
                result.runtime.settings.should.have.property('flowFile', "flows.json");
                result.runtime.settings.should.have.property('mqttReconnectTime', 321);
                result.runtime.settings.should.have.property('serialReconnectTime', 432);
+                result.runtime.settings.should.have.property('socketReconnectTime', 2222);
+                result.runtime.settings.should.have.property('socketTimeout', 3333);
+                result.runtime.settings.should.have.property('tcpMsgQueueSize', 4444);
+                result.runtime.settings.should.have.property('inboundWebSocketTimeout', 5555);
+                result.runtime.settings.should.have.property('runtimeState', {enabled: true, ui: false});
                result.runtime.settings.should.have.property("adminAuth", "SET"); //should be sanitised to "SET"
                result.runtime.settings.should.have.property("httpAdminCors", "SET"); //should be sanitised to "SET"
                result.runtime.settings.should.have.property('httpAdminRoot', "/admin/root/");
@@ -109,6 +121,7 @@ describe("runtime-api/diagnostics", function() {
                result.runtime.settings.should.have.property("uiPort", "SET"); //should be sanitised to "SET"
                result.runtime.settings.should.have.property("userDir", "SET"); //should be sanitised to "SET"
                result.runtime.settings.should.have.property('contextStorage').type("object");
+                result.runtime.settings.should.have.property('nodesDir', "SET")

                //result.runtime.settings.contextStorage.xxxxx
                const contextCount = Object.keys(result.runtime.settings.contextStorage).length;
Author	SHA1	Message	Date
Nick O'Leary	dc7fef6395	Merge pull request #3797 from node-red/301 Update changelog and bump for 3.0.1	2022-07-22 10:27:46 +01:00
Nick O'Leary	da65bf7292	Update changelog and bump for 3.0.1	2022-07-22 09:50:37 +01:00
Nick O'Leary	17d9c2577e	Merge pull request #3794 from Steve-Mcl/fix-code-editor-theme-from-theme Allow codeEditor theme to be set even if `codeEditor` is not set in settings.js	2022-07-21 16:27:41 +01:00
Steve-Mcl	bc7852c1cc	Allow codeEditor theme to be set missing from settings.js	2022-07-21 14:44:29 +01:00
Nick O'Leary	51d8792f62	Merge pull request #3793 from Steve-Mcl/sys-info-amendments Sys info (diagnostics report) amendments	2022-07-21 11:39:50 +01:00
Nick O'Leary	bfdbeb0964	Merge pull request #3791 from Steve-Mcl/allow-editor-create-no-title-no-mode Allow `mode` and `title` to be omitted in `options` argument for `createEditor`	2022-07-21 11:39:02 +01:00
Nick O'Leary	ede82ad0d5	Merge pull request #3789 from Steve-Mcl/fix-focus-issues Fix focus issues	2022-07-21 11:38:38 +01:00
Nick O'Leary	f50dcb9e40	Merge pull request #3788 from node-red/fix-typedinput-submit Ensure all typedInput buttons have button type set	2022-07-21 11:37:52 +01:00
Nick O'Leary	676c5e5df5	Merge pull request #3787 from node-red/fix-search-unused Do not flag hasUsers=false nodes as unused in search	2022-07-21 11:37:39 +01:00
Nick O'Leary	d52be76c8a	Merge pull request #3786 from node-red/fix-quick-add-pos Properly position quick-add dialog in all cases	2022-07-21 11:37:26 +01:00
Nick O'Leary	c6a517c88c	Merge pull request #3785 from node-red/ts-pos Ensure quick-add dialog does not obscure ghost node when shifted	2022-07-21 11:37:10 +01:00
Nick O'Leary	96eb8719b8	Merge pull request #3784 from node-red/remove-hasown Remove use of Object.hasOwn	2022-07-21 11:36:56 +01:00
Steve-Mcl	bcd31610f6	update tests for sys info diagnostics ammendments	2022-07-21 10:07:40 +01:00
Steve-Mcl	a4d66622a5	add a handful of missing settings to basic report	2022-07-21 09:30:49 +01:00
Steve-Mcl	af4f07cb26	include flows stop/start state	2022-07-21 09:29:51 +01:00
Steve-Mcl	f7120b32f5	Allow `mode` and `title` to be empty fixes #3774	2022-07-20 13:58:03 +01:00
Steve-Mcl	273404e24d	focus search input when opened via context menu	2022-07-20 12:30:52 +01:00
Steve-Mcl	1b53b5b927	focus stack when re-showing nested editor	2022-07-20 12:30:15 +01:00
Steve-Mcl	7c5413e568	ensure red-ui-editor-stack is focusable	2022-07-20 12:29:16 +01:00
Nick O'Leary	39b2fe45a5	Ensure all typedInput buttons have button type set Fixes #3780 Otherwise they act as type="submit" and the browser will click on them when enter is pressed in an input	2022-07-20 11:11:44 +01:00
Nick O'Leary	8d3c5d09f6	Do not flag hasUsers=false nodes as unused in search Fixes #3777	2022-07-20 10:47:57 +01:00
Nick O'Leary	5944fdb5dc	Properly position quick-add dialog in all cases Fixes #3781	2022-07-20 10:40:20 +01:00
Nick O'Leary	e120bad779	Ensure quick-add dialog does not obscure ghost node when shifted	2022-07-20 10:37:40 +01:00
Nick O'Leary	d546a4a15b	Remove use of Object.hasOwn Fixes #3778	2022-07-20 10:14:06 +01:00