Add more consistent events in the editor

This introduces a much more consistent set of events within the editor for whenever a element is added, removed or modified. The events emited on the `RED.events` event system. The event names take the form: `"<thing>:<action>"`. `<thing>` can be one of: - nodes - flows - subflows - groups - links `<action>` can be one of: - add - remove - change The payload of the events is the object in question. There is also: - flows:reorder - when tabs are reordered. Payload is array of flow ids. - workspace:clear - when the workspace is emptied - part of switching projects The `nodes:change` event was already used by RED.nodes.dirty() to cause the Deploy button to become active. This renames that event to: - workspace:dirty - Payload is boolean flag for the dirty state This commit also updates the Palette to use the subflows:change event to only redraw subflows that have actually changed rather than refresh them all whenever one of them *might* have changed. This removes a noticable flicker of the icon which was needlessly being redrawn.
2025-03-01 10:36:34 +00:00 · 2020-04-20 21:30:03 +01:00
parent ae3e250269
commit 373267c53b
10 changed files with 167 additions and 89 deletions
--- a/packages/node_modules/@node-red/editor-client/src/js/events.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/events.js
@@ -32,11 +32,16 @@
             }
         }
     }
-     function emit(evt,arg) {
+     function emit() {
+         var evt = arguments[0]
+         var args = Array.prototype.slice.call(arguments,1);
+         if (RED.events.DEBUG) {
+             console.log(evt,args);
+         }
         if (handlers[evt]) {
             for (var i=0;i<handlers[evt].length;i++) {
                 try {
-                     handlers[evt][i](arg);
+                     handlers[evt][i].apply(null, args);
                 } catch(err) {
                     console.log("RED.events.emit error: ["+evt+"] "+(err.toString()));
                     console.log(err);
--- a/packages/node_modules/@node-red/editor-client/src/js/history.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/history.js
@@ -260,9 +260,12 @@ RED.history = (function() {
                                }
                                node.dirty = true;
                            }
+                            RED.events.emit("nodes:change",node);
                        }
                    }
-
+                }
+                if (subflow) {
+                    RED.events.emit("subflows:change", subflow);
                }
            } else if (ev.t == "move") {
                inverseEv = {
@@ -323,6 +326,17 @@ RED.history = (function() {
                        ev.node[i] = ev.changes[i];
                    }
                }
+                var eventType;
+                switch(ev.node.type) {
+                    case 'tab': eventType = "flows"; break;
+                    case 'group': eventType = "groups"; break;
+                    case 'subflow': eventType = "subflows"; break;
+                    default: eventType = "nodes"; break;
+                }
+                eventType += ":change";
+                RED.events.emit(eventType,ev.node);
+
+
                if (ev.node.type === 'tab' && ev.changes.hasOwnProperty('disabled')) {
                    $("#red-ui-tab-"+(ev.node.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!ev.node.disabled);
                    $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!ev.node.disabled);
@@ -559,7 +573,6 @@ RED.history = (function() {
            RED.nodes.dirty(ev.dirty);
            RED.view.updateActive();
            RED.view.select(null);
-            RED.palette.refresh();
            RED.workspaces.refresh();
            RED.sidebar.config.refresh();
            RED.subflow.refresh();
--- a/packages/node_modules/@node-red/editor-client/src/js/nodes.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
@@ -36,7 +36,7 @@ RED.nodes = (function() {

    function setDirty(d) {
        dirty = d;
-        RED.events.emit("nodes:change",{dirty:dirty});
+        RED.events.emit("workspace:dirty",{dirty:dirty});
    }

    var registry = (function() {
@@ -228,6 +228,7 @@ RED.nodes = (function() {
    }
    function addLink(l) {
        links.push(l);
+        RED.events.emit("links:add",l);
    }

    function getNode(id) {
@@ -260,7 +261,7 @@ RED.nodes = (function() {
                    delete nodeTabMap[node.z][node.id];
                }
                removedLinks = links.filter(function(l) { return (l.source === node) || (l.target === node); });
-                removedLinks.forEach(function(l) {links.splice(links.indexOf(l), 1); });
+                removedLinks.forEach(removeLink);
                var updatedConfigNode = false;
                for (var d in node._def.defaults) {
                    if (node._def.defaults.hasOwnProperty(d)) {
@@ -317,6 +318,7 @@ RED.nodes = (function() {
        }
        nodeTabMap[z][node.id] = node;
        node.z = z;
+        RED.events.emit("nodes:change",node);
    }
    function moveGroupToTab(group, z) {
        var index = groupsByZ[group.z].indexOf(group);
@@ -324,6 +326,7 @@ RED.nodes = (function() {
        groupsByZ[z] = groupsByZ[z] || [];
        groupsByZ[z].push(group);
        group.z = z;
+        RED.events.emit("groups:change",group);
    }

    function removeLink(l) {
@@ -331,6 +334,7 @@ RED.nodes = (function() {
        if (index != -1) {
            links.splice(index,1);
        }
+        RED.events.emit("links:remove",l);
    }

    function addWorkspace(ws,targetIndex) {
@@ -343,44 +347,49 @@ RED.nodes = (function() {
        } else {
            workspacesOrder.splice(targetIndex,0,ws.id);
        }
+        RED.events.emit('flows:add',ws);
    }
    function getWorkspace(id) {
        return workspaces[id];
    }
    function removeWorkspace(id) {
-        delete workspaces[id];
-        delete nodeTabMap[id];
-        workspacesOrder.splice(workspacesOrder.indexOf(id),1);
-
+        var ws = workspaces[id];
        var removedNodes = [];
        var removedLinks = [];
        var removedGroups = [];
-        var n;
-        var node;
-        for (n=0;n<nodes.length;n++) {
-            node = nodes[n];
-            if (node.z == id) {
-                removedNodes.push(node);
-            }
-        }
-        for(n in configNodes) {
-            if (configNodes.hasOwnProperty(n)) {
-                node = configNodes[n];
+        if (ws) {
+            delete workspaces[id];
+            delete nodeTabMap[id];
+            workspacesOrder.splice(workspacesOrder.indexOf(id),1);
+            var n;
+            var node;
+            for (n=0;n<nodes.length;n++) {
+                node = nodes[n];
                if (node.z == id) {
                    removedNodes.push(node);
                }
            }
-        }
-        removedGroups = groupsByZ[id] || [];
-        removedGroups.forEach(function(g) {
-            delete groups[g.id]
-        })
-        delete groupsByZ[id];
+            for(n in configNodes) {
+                if (configNodes.hasOwnProperty(n)) {
+                    node = configNodes[n];
+                    if (node.z == id) {
+                        removedNodes.push(node);
+                    }
+                }
+            }
+            removedGroups = groupsByZ[id] || [];
+            removedGroups.forEach(function(g) {
+                delete groups[g.id]
+            })
+            delete groupsByZ[id];

-        for (n=0;n<removedNodes.length;n++) {
-            var result = removeNode(removedNodes[n].id);
-            removedLinks = removedLinks.concat(result.links);
+            for (n=0;n<removedNodes.length;n++) {
+                var result = removeNode(removedNodes[n].id);
+                removedLinks = removedLinks.concat(result.links);
+            }
+            RED.events.emit('flows:remove',ws);
        }
+
        return {nodes:removedNodes,links:removedLinks, groups: removedGroups};
    }

@@ -438,14 +447,18 @@ RED.nodes = (function() {
            }
        });
        sf._def = RED.nodes.getType("subflow:"+sf.id);
+        RED.events.emit("subflows:add",sf);
    }
    function getSubflow(id) {
        return subflows[id];
    }
    function removeSubflow(sf) {
-        delete subflows[sf.id];
-        delete nodeTabMap[sf.id];
-        registry.removeNodeType("subflow:"+sf.id);
+        if (subflows[sf.id]) {
+            delete subflows[sf.id];
+            delete nodeTabMap[sf.id];
+            registry.removeNodeType("subflow:"+sf.id);
+            RED.events.emit("subflows:remove",sf);
+        }
    }

    function subflowContains(sfid,nodeid) {
@@ -1508,6 +1521,7 @@ RED.nodes = (function() {
        groupsByZ = {};

        var subflowIds = Object.keys(subflows);
+        subflows = {};
        subflowIds.forEach(function(id) {
            RED.subflow.removeSubflow(id)
        });
@@ -1524,6 +1538,8 @@ RED.nodes = (function() {
        RED.sidebar.config.refresh();
        RED.sidebar.info.refresh();

+        RED.events.emit("workspace:clear");
+
        // var node_defs = {};
        // var nodes = [];
        // var configNodes = {};
@@ -1539,6 +1555,7 @@ RED.nodes = (function() {
        groupsByZ[group.z] = groupsByZ[group.z] || [];
        groupsByZ[group.z].push(group);
        groups[group.id] = group;
+        RED.events.emit("groups:add",group);
    }
    function removeGroup(group) {
        var i = groupsByZ[group.z].indexOf(group);
@@ -1553,6 +1570,7 @@ RED.nodes = (function() {
        RED.group.markDirty(group);

        delete groups[group.id];
+        RED.events.emit("groups:remove",group);
    }


--- a/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js
@@ -108,7 +108,7 @@ RED.deploy = (function() {



-        RED.events.on('nodes:change',function(state) {
+        RED.events.on('workspace:dirty',function(state) {
            if (state.dirty) {
                window.onbeforeunload = function() {
                    return RED._("deploy.confirm.undeployedChanges");
--- 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
@@ -1469,6 +1469,7 @@ RED.editor = (function() {
                        editing_node.dirty = true;
                        validateNode(editing_node);
                        RED.events.emit("editor:save",editing_node);
+                        RED.events.emit("nodes:change",editing_node);
                        RED.tray.close();
                    }
                }
@@ -1989,6 +1990,7 @@ RED.editor = (function() {
                    RED.view.redraw(true);
                    if (!configAdding) {
                        RED.events.emit("editor:save",editing_config_node);
+                        RED.events.emit("nodes:change",editing_config_node);
                    }
                    RED.tray.close(function() {
                        updateConfigNodeSelect(configProperty,configType,editing_config_node.id,prefix);
@@ -2222,7 +2224,6 @@ RED.editor = (function() {
                            changes.env = editing_node.env;
                            changed = true;
                        }
-                        RED.palette.refresh();

                        if (changed) {
                            var wasChanged = editing_node.changed;
@@ -2242,6 +2243,7 @@ RED.editor = (function() {
                                    validateNode(n);
                                }
                            });
+                            RED.events.emit("subflows:change",editing_node);
                            RED.nodes.dirty(true);
                            var historyEvent = {
                                t:'edit',
@@ -2535,6 +2537,7 @@ RED.editor = (function() {
                                changed:wasChanged
                            };
                            RED.history.push(historyEvent);
+                            RED.events.emit("groups:change",editing_node);
                        }
                        editing_node.dirty = true;
                        RED.tray.close();
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
@@ -311,6 +311,11 @@ RED.group = (function() {
            } else {
                delete n.g;
            }
+            if (n.type === 'group') {
+                RED.events.emit("groups:change",n)
+            } else {
+                RED.events.emit("nodes:change",n)
+            }
        })
        RED.nodes.removeGroup(g);
        return nodes;
@@ -491,6 +496,11 @@ RED.group = (function() {
                group.y = Math.min(group.y,n.y-n.h/2-25);
                group.w = Math.max(group.w,n.x+n.w/2+25+((n._def.button && n._def.align=="right")?20:0) - group.x);
                group.h = Math.max(group.h,n.y+n.h/2+25-group.y);
+                if (n.type === 'group') {
+                    RED.events.emit("groups:change",n)
+                } else {
+                    RED.events.emit("nodes:change",n)
+                }
            }
        }

@@ -520,6 +530,11 @@ RED.group = (function() {
            } else {
                delete n.g;
            }
+            if (n.type === 'group') {
+                RED.events.emit("groups:change",n)
+            } else {
+                RED.events.emit("nodes:change",n)
+            }
        }
        markDirty(group);
    }
--- 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
@@ -181,7 +181,11 @@ RED.palette = (function() {
    function setIcon(element,sf) {
        var icon_url = RED.utils.getNodeIcon(sf._def);
        var iconContainer = element.find(".red-ui-palette-icon-container");
-        RED.utils.createIconElement(icon_url, iconContainer, true);
+        var currentIcon = iconContainer.attr("data-palette-icon");
+        if (currentIcon !== icon_url) {
+            iconContainer.attr("data-palette-icon", icon_url);
+            RED.utils.createIconElement(icon_url, iconContainer, true);
+        }
    }

    function getPaletteNode(type) {
@@ -224,6 +228,7 @@ RED.palette = (function() {
                var iconContainer = $('<div/>', {
                    class: "red-ui-palette-icon-container"+(((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " red-ui-palette-icon-container-right" : "")
                }).appendTo(d);
+                iconContainer.attr("data-palette-icon", icon_url);
                RED.utils.createIconElement(icon_url, iconContainer, true);
            }

@@ -452,61 +457,67 @@ RED.palette = (function() {
        categoryNode.show();
        paletteNode.show();
    }
-
    function refreshNodeTypes() {
-        RED.nodes.eachSubflow(function(sf) {
-            var paletteNode = getPaletteNode('subflow:'+sf.id);
-            var portInput = paletteNode.find(".red-ui-palette-port-input");
-            var portOutput = paletteNode.find(".red-ui-palette-port-output");
+        RED.nodes.eachSubflow(refreshSubflow)
+    }
+    function refreshSubflow(sf) {
+        var paletteNode = getPaletteNode('subflow:'+sf.id);
+        var portInput = paletteNode.find(".red-ui-palette-port-input");
+        var portOutput = paletteNode.find(".red-ui-palette-port-output");

-            var paletteLabel = paletteNode.find(".red-ui-palette-label");
-            paletteLabel.attr("class","red-ui-palette-label" + (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " red-ui-palette-label-right" : ""));
+        var paletteLabel = paletteNode.find(".red-ui-palette-label");
+        paletteLabel.attr("class","red-ui-palette-label" + (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " red-ui-palette-label-right" : ""));

-            var paletteIconContainer = paletteNode.find(".red-ui-palette-icon-container");
-            paletteIconContainer.attr("class","red-ui-palette-icon-container" + (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " red-ui-palette-icon-container-right" : ""));
+        var paletteIconContainer = paletteNode.find(".red-ui-palette-icon-container");
+        paletteIconContainer.attr("class","red-ui-palette-icon-container" + (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " red-ui-palette-icon-container-right" : ""));

-            if (portInput.length === 0 && sf.in.length > 0) {
-                var portIn = document.createElement("div");
-                portIn.className = "red-ui-palette-port red-ui-palette-port-input";
-                paletteNode.append(portIn);
-            } else if (portInput.length !== 0 && sf.in.length === 0) {
-                portInput.remove();
-            }
+        if (portInput.length === 0 && sf.in.length > 0) {
+            var portIn = document.createElement("div");
+            portIn.className = "red-ui-palette-port red-ui-palette-port-input";
+            paletteNode.append(portIn);
+        } else if (portInput.length !== 0 && sf.in.length === 0) {
+            portInput.remove();
+        }

-            if (portOutput.length === 0 && sf.out.length > 0) {
-                var portOut = document.createElement("div");
-                portOut.className = "red-ui-palette-port red-ui-palette-port-output";
-                paletteNode.append(portOut);
-            } else if (portOutput.length !== 0 && sf.out.length === 0) {
-                portOutput.remove();
-            }
+        if (portOutput.length === 0 && sf.out.length > 0) {
+            var portOut = document.createElement("div");
+            portOut.className = "red-ui-palette-port red-ui-palette-port-output";
+            paletteNode.append(portOut);
+        } else if (portOutput.length !== 0 && sf.out.length === 0) {
+            portOutput.remove();
+        }
+        var currentLabel = paletteNode.attr("data-palette-label");
+        var currentInfo = paletteNode.attr("data-palette-info");
+
+        if (currentLabel !== sf.name || currentInfo !== sf.info) {
+            paletteNode.attr("data-palette-info",sf.info);
            setLabel(sf.type+":"+sf.id,paletteNode,sf.name,RED.utils.renderMarkdown(sf.info||""));
-            setIcon(paletteNode,sf);
+        }
+        setIcon(paletteNode,sf);

-            var currentCategory = paletteNode.data('category');
-            var newCategory = (sf.category||"subflows");
-            if (currentCategory !== newCategory) {
-                var category = escapeCategory(newCategory);
-                createCategory(newCategory,category,category,"node-red");
+        var currentCategory = paletteNode.data('category');
+        var newCategory = (sf.category||"subflows");
+        if (currentCategory !== newCategory) {
+            var category = escapeCategory(newCategory);
+            createCategory(newCategory,category,category,"node-red");

-                var currentCategoryNode = paletteNode.closest(".red-ui-palette-category");
-                var newCategoryNode = $("#red-ui-palette-"+category);
-                newCategoryNode.append(paletteNode);
-                if (newCategoryNode.find(".red-ui-palette-node").length === 1) {
-                    categoryContainers[category].open();
-                }
-
-                paletteNode.data('category',newCategory);
-                if (currentCategoryNode.find(".red-ui-palette-node").length === 0) {
-                    if (currentCategoryNode.find("i").hasClass("expanded")) {
-                        currentCategoryNode.find(".red-ui-palette-content").slideToggle();
-                        currentCategoryNode.find("i").toggleClass("expanded");
-                    }
-                }
+            var currentCategoryNode = paletteNode.closest(".red-ui-palette-category");
+            var newCategoryNode = $("#red-ui-palette-"+category);
+            newCategoryNode.append(paletteNode);
+            if (newCategoryNode.find(".red-ui-palette-node").length === 1) {
+                categoryContainers[category].open();
            }

-            paletteNode.css("backgroundColor", sf.color);
-        });
+            paletteNode.data('category',newCategory);
+            if (currentCategoryNode.find(".red-ui-palette-node").length === 0) {
+                if (currentCategoryNode.find("i").hasClass("expanded")) {
+                    currentCategoryNode.find(".red-ui-palette-content").slideToggle();
+                    currentCategoryNode.find("i").toggleClass("expanded");
+                }
+            }
+        }
+
+        paletteNode.css("backgroundColor", sf.color);
    }

    function filterChange(val) {
@@ -544,6 +555,8 @@ RED.palette = (function() {
        $('<div class="red-ui-component-footer"></div>').appendTo("#red-ui-palette");
        $('<div id="red-ui-palette-shade" class="hide"></div>').appendTo("#red-ui-palette");

+        $("#red-ui-palette > .red-ui-palette-spinner").show();
+

        RED.events.on('registry:node-type-added', function(nodeType) {
            var def = RED.nodes.getType(nodeType);
@@ -585,7 +598,8 @@ RED.palette = (function() {
            }
        });

-        $("#red-ui-palette > .red-ui-palette-spinner").show();
+        RED.events.on("subflows:change",refreshSubflow);
+


        $("#red-ui-palette-search input").searchBox({
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
@@ -106,7 +106,7 @@ RED.subflow = (function() {
        RED.view.redraw();
        $("#red-ui-subflow-input-add").addClass("active");
        $("#red-ui-subflow-input-remove").removeClass("active");
-        RED.palette.refresh();
+        RED.events.emit("subflows:change",subflow);
    }

    function removeSubflowInput() {
@@ -128,7 +128,7 @@ RED.subflow = (function() {
        $("#red-ui-subflow-input-add").removeClass("active");
        $("#red-ui-subflow-input-remove").addClass("active");
        activeSubflow.changed = true;
-        RED.palette.refresh();
+        RED.events.emit("subflows:change",activeSubflow);
        return {subflowInputs: [ removedInput ], links:removedInputLinks};
    }

@@ -169,7 +169,7 @@ RED.subflow = (function() {
        RED.nodes.dirty(true);
        RED.view.redraw();
        $("#red-ui-subflow-output .spinner-value").text(subflow.out.length);
-        RED.palette.refresh();
+        RED.events.emit("subflows:change",subflow);
    }

    function removeSubflowOutput(removedSubflowOutputs) {
@@ -209,7 +209,7 @@ RED.subflow = (function() {
            }
        }
        activeSubflow.changed = true;
-        RED.palette.refresh();
+        RED.events.emit("subflows:change",activeSubflow);
        return {subflowOutputs: removedSubflowOutputs, links: removedLinks}
    }

@@ -244,6 +244,7 @@ RED.subflow = (function() {
        RED.view.select();
        RED.nodes.dirty(true);
        RED.view.redraw();
+        RED.events.emit("subflows:change",subflow);
        $("#red-ui-subflow-status").prop("checked",!!subflow.status);
        $("#red-ui-subflow-status").parent().parent().toggleClass("active",!!subflow.status);
    }
--- 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
@@ -393,6 +393,8 @@ RED.view = (function() {
                    historyEvent.removedLinks = [spliceLink];
                }

+                RED.nodes.add(nn);
+
                var group = $(ui.helper).data("group");
                if (group) {
                    RED.group.addToGroup(group, nn);
@@ -409,7 +411,6 @@ RED.view = (function() {
                }

                RED.history.push(historyEvent);
-                RED.nodes.add(nn);
                RED.editor.validateNode(nn);
                RED.nodes.dirty(true);
                // auto select dropped node - so info shows (if visible)
@@ -4528,6 +4529,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
                        }
                        node.dirty = true;
                        node.changed = true;
+                        RED.events.emit("nodes:change",node);
                    }
                }
            }
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
@@ -140,6 +140,7 @@ RED.workspaces = (function() {
                                });
                                RED.view.redraw();
                            }
+                            RED.events.emit("flows:change",workspace);
                        }
                        RED.tray.close();
                    }
@@ -380,6 +381,7 @@ RED.workspaces = (function() {
            }
            workspace.changed = true;
            RED.history.push(historyEvent);
+            RED.events.emit("flows:change",workspace);
            RED.nodes.dirty(true);
            RED.sidebar.config.refresh();
            var selection = RED.view.selection();
@@ -412,9 +414,14 @@ RED.workspaces = (function() {
    }

    function setWorkspaceOrder(order) {
-        RED.nodes.setWorkspaceOrder(order.filter(function(id) {
+        var newOrder = order.filter(function(id) {
            return RED.nodes.workspace(id) !== undefined;
-        }));
+        })
+        var currentOrder = RED.nodes.getWorkspaceOrder();
+        if (JSON.stringify(newOrder) !== JSON.stringify(currentOrder)) {
+            RED.nodes.setWorkspaceOrder(newOrder);
+            RED.events.emit("flows:reorder",newOrder);
+        }
        workspace_tabs.order(order);
    }