WIP: move config nodes down a level in outliner tree

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

@@ -360,7 +360,7 @@
                 }
                 processChildren(item,newItem);
 
-                if (!item.deferBuild) {
+                if (!item.deferBuild && item.treeList.childList) {
                     item.treeList.childList.editableList('insertItemAt',newItem,position)
                     if (select) {
                         setTimeout(function() {

packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js

@@ -11,6 +11,8 @@ RED.sidebar.info.outliner = (function() {
 
     var objects = {};
     var missingParents = {};
+    var configNodeTypes;
+
 
     function getFlowData() {
         var flowData = [
@@ -29,6 +31,7 @@ RED.sidebar.info.outliner = (function() {
             {
                 id: "__global__",
                 label: RED._("sidebar.info.globalConfig"),
+                types: {},
                 children: [
                     getEmptyItem("__global__")
                 ]
@@ -38,6 +41,7 @@ RED.sidebar.info.outliner = (function() {
         flowList = flowData[0];
         subflowList = flowData[1];
         globalConfigNodes = flowData[2];
+        configNodeTypes = { __global__: globalConfigNodes};
 
         return flowData;
     }
@@ -395,16 +399,51 @@ RED.sidebar.info.outliner = (function() {
             existingObject.element.find(".red-ui-info-outline-item-label").html(" ");
         }
         if (parent !== existingObject.parent.id) {
+            var parentItem = existingObject.parent;
             existingObject.treeList.remove(true);
-            if (parent === "__global__") {
+            if (parentItem.children.length === 0) {
-                globalConfigNodes.treeList.addChild(existingObject);
+                if (parentItem.config) {
+                    // this is a config
+                    parentItem.treeList.remove();
+                    console.log("Removing",n.type,"from",parentItem.parent.id||parentItem.parent.parent.id)
+
+                    delete configNodeTypes[parentItem.parent.id||parentItem.parent.parent.id].types[n.type];
+
+
+                    if (parentItem.parent.children.length === 0) {
+                        if (parentItem.parent.id === "__global__") {
+                            parentItem.parent.treeList.addChild(getEmptyItem(parentItem.parent.id));
                         } else {
-                if (empties[parent]) {
+                            delete configNodeTypes[parentItem.parent.parent.id];
-                    empties[parent].treeList.remove();
+                            parentItem.parent.treeList.remove();
-                    delete empties[parent];
                         }
-                objects[parent].treeList.addChild(existingObject)
                     }
+                } else {
+                    parentItem.treeList.addChild(getEmptyItem(parentItem.id));
+                }
+            }
+            // This must be a config node that has been rescoped
+            createFlowConfigNode(parent,n.type);
+            configNodeTypes[parent].types[n.type].treeList.addChild(objects[n.id]);
+
+            // if (parent === "__global__") {
+            //     // Global always exists here
+            //     if (!configNodeTypes[parent][n.type]) {
+            //         configNodeTypes[parent][n.type] = {
+            //             config: true,
+            //             label: n.type,
+            //             children: []
+            //         }
+            //         globalConfigNodes.treeList.addChild(configNodeTypes[parent][n.type])
+            //     }
+            //     configNodeTypes[parent][n.type].treeList.addChild(existingObject);
+            // } else {
+            //     if (empties[parent]) {
+            //         empties[parent].treeList.remove();
+            //         delete empties[parent];
+            //     }
+            //     objects[parent].treeList.addChild(existingObject)
+            // }
         }
         existingObject.element.toggleClass("red-ui-info-outline-item-disabled", !!n.d)
         updateSearch();
@@ -418,12 +457,25 @@ RED.sidebar.info.outliner = (function() {
         if (empties[n.id]) {
             delete empties[n.id];
         }
-
         var parent = existingObject.parent;
         if (parent.children.length === 0) {
+            if (parent.config) {
+                // this is a config
+                parent.treeList.remove();
+                delete configNodeTypes[parent.parent.id||n.z].types[n.type];
+                if (parent.parent.children.length === 0) {
+                    if (parent.parent.id === "__global__") {
+                        parent.parent.treeList.addChild(getEmptyItem(parent.parent.id));
+                    } else {
+                        delete configNodeTypes[n.z];
+                        parent.parent.treeList.remove();
+                    }
+                }
+            } else {
                 parent.treeList.addChild(getEmptyItem(parent.id));
             }
         }
+    }
     function getGutter(n) {
         var span = $("<span>",{class:"red-ui-info-outline-gutter"});
         var revealButton = $('<button type="button" class="red-ui-info-outline-item-control-reveal red-ui-button red-ui-button-small"><i class="fa fa-search"></i></button>').appendTo(span).on("click",function(evt) {
@@ -434,6 +486,34 @@ RED.sidebar.info.outliner = (function() {
         RED.popover.tooltip(revealButton,RED._("sidebar.info.find"));
         return span;
     }
+
+    function createFlowConfigNode(parent,type) {
+        console.log("createFlowConfig",parent,type,configNodeTypes[parent]);
+        if (empties[parent]) {
+            empties[parent].treeList.remove();
+            delete empties[parent];
+        }
+        if (!configNodeTypes[parent]) {
+            // There is no 'config nodes' item in the parent flow
+            configNodeTypes[parent] = {
+                config: true,
+                types: {},
+                label: RED._("menu.label.displayConfig"),
+                children: []
+            }
+            objects[parent].treeList.insertChildAt(configNodeTypes[parent],0);
+            console.log("CREATED", parent)
+        }
+        if (!configNodeTypes[parent].types[type]) {
+            configNodeTypes[parent].types[type] = {
+                config: true,
+                label: type,
+                children: []
+            }
+            configNodeTypes[parent].treeList.addChild(configNodeTypes[parent].types[type]);
+            console.log("CREATED", parent,type)
+        }
+    }
     function onNodeAdd(n) {
         objects[n.id] = {
             id: n.id,
@@ -449,7 +529,8 @@ RED.sidebar.info.outliner = (function() {
             }
         }
         var parent = n.g||n.z||"__global__";
-        if (parent !== "__global__") {
+
+        if (n._def.category !== "config" || n.type === 'group') {
             if (objects[parent]) {
                 if (empties[parent]) {
                     empties[parent].treeList.remove();
@@ -465,12 +546,8 @@ RED.sidebar.info.outliner = (function() {
                 missingParents[parent].push(objects[n.id])
             }
         } else {
-            if (empties[parent]) {
+            createFlowConfigNode(parent,n.type);
-                empties[parent].treeList.remove();
+            configNodeTypes[parent].types[n.type].treeList.addChild(objects[n.id]);
-                delete empties[parent];
-            }
-            // No parent - add to Global flow list
-            globalConfigNodes.treeList.addChild(objects[n.id]);
         }
         objects[n.id].element.toggleClass("red-ui-info-outline-item-disabled", !!n.d)
         updateSearch();