tab-info-outliner.js

RED.sidebar.info.outliner = (function() {

    var treeList;
    var searchInput;
    var activeSearch;
    var projectInfo;
    var projectInfoLabel;
    var flowList;
    var subflowList;
    var globalConfigNodes;

    var objects = {};
    var missingParents = {};

    function getFlowData() {
        var flowData = [
            {
                label: RED._("menu.label.flows"),
                expanded: true,
                children: []
            },
            {
                label: RED._("menu.label.subflows"),
                children: []
            },
            {
                id: "__global__",
                label: RED._("sidebar.info.globalConfig"),
                children: []
            }
        ]
        flowList = flowData[0];
        subflowList = flowData[1];
        globalConfigNodes = flowData[2];

        return flowData;
    }

    function getProjectLabel(p) {
        var div = $('<div>',{class:"red-ui-info-outline-item red-ui-info-outline-item-flow"});
        div.css("width", "calc(100% - 40px)");
        var contentDiv = $('<div>',{class:"red-ui-search-result-description red-ui-info-outline-item-label"}).appendTo(div);
        contentDiv.text(p.name);
        var controls = $('<div>',{class:"red-ui-info-outline-item-controls"}).appendTo(div);
        var editProjectButton = $('<button class="red-ui-button red-ui-button-small" style="position:absolute;right:5px;top: 3px;"><i class="fa fa-ellipsis-h"></i></button>')
            .appendTo(controls)
            .on("click", function(evt) {
                evt.preventDefault();
                RED.projects.editProject();
            });
        RED.popover.tooltip(editProjectButton,RED._('sidebar.project.showProjectSettings'));
        return div;
    }

    var empties = {};
    function getEmptyItem(id) {
        var item = {
            empty: true,
            element: $('<div class="red-ui-info-outline-item red-ui-info-outline-item-empty">').text(RED._("sidebar.info.empty")),
        }
        empties[id] = item;
        return item;
    }

    function getNodeLabelText(n) {
        var label = n.name || n.type+": "+n.id;
        if (n._def.label) {
            try {
                label = (typeof n._def.label === "function" ? n._def.label.call(n) : n._def.label)||"";
            } catch(err) {
                console.log("Definition error: "+type+".label",err);
            }
        }
        var newlineIndex = label.indexOf("\\n");
        if (newlineIndex > -1) {
            label = label.substring(0,newlineIndex)+"...";
        }
        return label;
    }

    function getNodeLabel(n) {
        var div = $('<div>',{class:"red-ui-info-outline-item"});
        RED.utils.createNodeIcon(n).appendTo(div);
        var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
        var labelText = getNodeLabelText(n);
        var label = $('<div>',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).appendTo(contentDiv);
        if (labelText) {
            label.text(labelText)
        } else {
            label.html("&nbsp;")
        }

        addControls(n, div);

        return div;
    }

    function getFlowLabel(n) {
        var div = $('<div>',{class:"red-ui-info-outline-item red-ui-info-outline-item-flow"});
        var contentDiv = $('<div>',{class:"red-ui-search-result-description red-ui-info-outline-item-label"}).appendTo(div);
        var label = (typeof n === "string")? n : n.label;
        var newlineIndex = label.indexOf("\\n");
        if (newlineIndex > -1) {
            label = label.substring(0,newlineIndex)+"...";
        }
        contentDiv.text(label);
        addControls(n, div);
        return div;
    }

    function getSubflowLabel(n) {

        var div = $('<div>',{class:"red-ui-info-outline-item"});
        RED.utils.createNodeIcon(n).appendTo(div);
        var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
        var labelText = getNodeLabelText(n);
        var label = $('<div>',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).appendTo(contentDiv);
        if (labelText) {
            label.text(labelText)
        } else {
            label.html("&nbsp;")
        }

        addControls(n, div);

        return div;


        // var div = $('<div>',{class:"red-ui-info-outline-item red-ui-info-outline-item-flow"});
        // var contentDiv = $('<div>',{class:"red-ui-search-result-description red-ui-info-outline-item-label"}).appendTo(div);
        // contentDiv.text(n.name || n.id);
        // addControls(n, div);
        // return div;
    }

    function addControls(n,div) {
        var controls = $('<div>',{class:"red-ui-info-outline-item-controls red-ui-info-outline-item-hover-controls"}).appendTo(div);
        if (n._def.button) {
            var triggerButton = $('<button type="button" class="red-ui-info-outline-item-control-action red-ui-button red-ui-button-small"><i class="fa fa-toggle-right"></i></button>').appendTo(controls).on("click",function(evt) {
                evt.preventDefault();
                evt.stopPropagation();
                RED.view.clickNodeButton(n);
            })
            RED.popover.tooltip(triggerButton,RED._("sidebar.info.triggerAction"));
        }
        // $('<button type="button" class="red-ui-info-outline-item-control-reveal red-ui-button red-ui-button-small"><i class="fa fa-eye"></i></button>').appendTo(controls).on("click",function(evt) {
        //     evt.preventDefault();
        //     evt.stopPropagation();
        //     RED.view.reveal(n.id);
        // })
        if (n.type !== 'group' && n.type !== 'subflow') {
            var toggleButton = $('<button type="button" class="red-ui-info-outline-item-control-disable red-ui-button red-ui-button-small"><i class="fa fa-circle-thin"></i><i class="fa fa-ban"></i></button>').appendTo(controls).on("click",function(evt) {
                evt.preventDefault();
                evt.stopPropagation();
                if (n.type === 'tab') {
                    if (n.disabled) {
                        RED.workspaces.enable(n.id)
                    } else {
                        RED.workspaces.disable(n.id)
                    }
                } else {
                    // TODO: this ought to be a utility function in RED.nodes
                    var historyEvent = {
                        t: "edit",
                        node: n,
                        changed: n.changed,
                        changes: {
                            d: n.d
                        },
                        dirty:RED.nodes.dirty()
                    }
                    if (n.d) {
                        delete n.d;
                    } else {
                        n.d = true;
                    }
                    n.dirty = true;
                    n.changed = true;
                    RED.events.emit("nodes:change",n);
                    RED.nodes.dirty(true)
                    RED.view.redraw();
                }
            });
            RED.popover.tooltip(toggleButton,function() {
                return RED._("common.label."+((n.type==='tab' && n.disabled) || (n.type!=='tab' && n.d))?"enable":"disable")
            });
        } else {
            $('<div class="red-ui-info-outline-item-control-spacer">').appendTo(controls)
        }
        controls.find("button").on("dblclick", function(evt) {
            evt.preventDefault();
            evt.stopPropagation();
        })
    }

    function onProjectLoad(activeProject) {
        objects = {};
        var newFlowData = getFlowData();
        projectInfoLabel.empty();
        getProjectLabel(activeProject).appendTo(projectInfoLabel);
        projectInfo.show();
        treeList.treeList('data',newFlowData);
    }

    function build() {
        var container = $("<div>", {class:"red-ui-info-outline"}).css({'height': '100%'});
        var toolbar = $("<div>", {class:"red-ui-sidebar-header red-ui-info-toolbar"}).appendTo(container);

        searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.search">').appendTo(toolbar).searchBox({
            style: "compact",
            delay: 500,
            change: function() {
                var val = $(this).val();
                var searchResults = RED.search.search(val);
                if (val) {
                    activeSearch = val;
                    var resultMap = {};
                    for (var i=0,l=searchResults.length;i<l;i++) {
                        resultMap[searchResults[i].node.id] = true;
                    }
                    var c = treeList.treeList('filter',function(item) {
                        if (item.depth === 0) {
                            return true;
                        }
                        return item.id &&  objects[item.id] && resultMap[item.id]
                    },true)
                } else {
                    activeSearch = null;
                    treeList.treeList('filter',null);
                    var selected = treeList.treeList('selected');
                    if (selected.id) {
                        treeList.treeList('show',selected.id);
                    }

                }
            },
            options: [
                {label:RED._("sidebar.info.search.configNodes"), value:"is:config"},
                {label:RED._("sidebar.info.search.unusedConfigNodes"), value:"is:config is:unused"},
                {label:RED._("sidebar.info.search.invalidNodes"), value: "is:invalid"},
                {label:RED._("sidebar.info.search.uknownNodes"), value: "type:unknown"},
                {label:RED._("sidebar.info.search.unusedSubflows"), value:"is:subflow is:unused"},
            ]
        });

        projectInfo = $('<div class="red-ui-treeList-label red-ui-info-outline-project"><span class="red-ui-treeList-icon"><i class="fa fa-archive"></i></span></div>').hide().appendTo(container)
        projectInfoLabel = $('<span>').appendTo(projectInfo);

        // <div class="red-ui-info-outline-item red-ui-info-outline-item-flow" style=";"><div class="red-ui-search-result-description red-ui-info-outline-item-label">Space Monkey</div><div class="red-ui-info-outline-item-controls"><button class="red-ui-button red-ui-button-small" style="position:absolute;right:5px;"><i class="fa fa-ellipsis-h"></i></button></div></div></div>').appendTo(container)

        treeList = $("<div>").css({width: "100%"}).appendTo(container).treeList({
            data:getFlowData()
        })
        treeList.on('treelistselect', function(e,item) {
            var node = RED.nodes.node(item.id) || RED.nodes.group(item.id);
            if (node) {
                if (node.type === 'group' || node._def.category !== "config") {
                    RED.view.select({nodes:[node]})
                } else {
                    RED.view.select({nodes:[]})
                }
            }
        })
        treeList.on('treelistconfirm', function(e,item) {
            var node = RED.nodes.node(item.id);
            if (node) {
                if (node._def.category === "config") {
                    RED.editor.editConfig("", node.type, node.id);
                } else {
                    RED.editor.edit(node);
                }
            }
        })

        RED.events.on("projects:load", onProjectLoad)

        RED.events.on("flows:add", onFlowAdd)
        RED.events.on("flows:remove", onObjectRemove)
        RED.events.on("flows:change", onFlowChange)
        RED.events.on("flows:reorder", onFlowsReorder)

        RED.events.on("subflows:add", onSubflowAdd)
        RED.events.on("subflows:remove", onObjectRemove)
        RED.events.on("subflows:change", onSubflowChange)

        RED.events.on("nodes:add",onNodeAdd);
        RED.events.on("nodes:remove",onObjectRemove);
        RED.events.on("nodes:change",onNodeChange);

        RED.events.on("groups:add",onNodeAdd);
        RED.events.on("groups:remove",onObjectRemove);
        RED.events.on("groups:change",onNodeChange);

        RED.events.on("workspace:clear", onWorkspaceClear)

        return container;
    }
    function onWorkspaceClear() {
        treeList.treeList('data',getFlowData());
    }
    function onFlowAdd(ws) {
        objects[ws.id] = {
            id: ws.id,
            element: getFlowLabel(ws),
            children:[],
            deferBuild: true,
            icon: "red-ui-icons red-ui-icons-flow",
            gutter: getGutter(ws)
        }
        if (missingParents[ws.id]) {
            objects[ws.id].children = missingParents[ws.id];
            delete missingParents[ws.id]
        } else {
            objects[ws.id].children.push(getEmptyItem(ws.id));
        }
        flowList.treeList.addChild(objects[ws.id])
        objects[ws.id].element.toggleClass("red-ui-info-outline-item-disabled", !!ws.disabled)
        objects[ws.id].treeList.container.toggleClass("red-ui-info-outline-item-disabled", !!ws.disabled)
        updateSearch();

    }
    function onFlowChange(n) {
        var existingObject = objects[n.id];

        var label = n.label || n.id;
        var newlineIndex = label.indexOf("\\n");
        if (newlineIndex > -1) {
            label = label.substring(0,newlineIndex)+"...";
        }
        existingObject.element.find(".red-ui-info-outline-item-label").text(label);
        existingObject.element.toggleClass("red-ui-info-outline-item-disabled", !!n.disabled)
        existingObject.treeList.container.toggleClass("red-ui-info-outline-item-disabled", !!n.disabled)
        updateSearch();
    }
    function onFlowsReorder(order) {
        var indexMap = {};
        order.forEach(function(id,index) {
            indexMap[id] = index;
        })

        flowList.treeList.sortChildren(function(A,B) {
            if (A.id === "__global__") { return -1 }
            if (B.id === "__global__") { return 1 }
            return indexMap[A.id] - indexMap[B.id]
        })
    }
    function onSubflowAdd(sf) {
        objects[sf.id] = {
            id: sf.id,
            element: getNodeLabel(sf),
            children:[],
            deferBuild: true,
            gutter: getGutter(sf)
        }
        if (missingParents[sf.id]) {
            objects[sf.id].children = missingParents[sf.id];
            delete missingParents[sf.id]
        } else {
            objects[sf.id].children.push(getEmptyItem(sf.id));
        }
        subflowList.treeList.addChild(objects[sf.id])
        updateSearch();
    }
    function onSubflowChange(sf) {
        var existingObject = objects[sf.id];
        existingObject.treeList.replaceElement(getNodeLabel(sf));
        // existingObject.element.find(".red-ui-info-outline-item-label").text(n.name || n.id);
        RED.nodes.eachNode(function(n) {
            if (n.type == "subflow:"+sf.id) {
                var sfInstance = objects[n.id];
                sfInstance.treeList.replaceElement(getNodeLabel(n));
            }
        });
        updateSearch();
    }

    function onNodeChange(n) {
        var existingObject = objects[n.id];
        var parent = n.g||n.z||"__global__";

        var nodeLabelText = getNodeLabelText(n);
        if (nodeLabelText) {
            existingObject.element.find(".red-ui-info-outline-item-label").text(nodeLabelText);
        } else {
            existingObject.element.find(".red-ui-info-outline-item-label").html("&nbsp;");
        }
        var oldParent = existingObject.parent;
        var oldParentID = oldParent.id;
        if (parent !== oldParentID) {
            existingObject.treeList.remove(true);
            if (oldParent.children.length === 0) {
                objects[oldParentID].treeList.addChild(getEmptyItem(oldParentID));
            }
            if (parent === "__global__") {
                globalConfigNodes.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();
    }
    function onObjectRemove(n) {
        var existingObject = objects[n.id];
        existingObject.treeList.remove();
        delete objects[n.id]

        // If this is a group being removed, it may have an empty item
        if (empties[n.id]) {
            delete empties[n.id];
        }

        var parent = existingObject.parent;
        if (parent.children.length === 0) {
            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) {
            evt.preventDefault();
            evt.stopPropagation();
            RED.view.reveal(n.id);
        })
        RED.popover.tooltip(revealButton,RED._("sidebar.info.find"));
        return span;
    }
    function onNodeAdd(n) {
        objects[n.id] = {
            id: n.id,
            element: getNodeLabel(n),
            gutter: getGutter(n)
        }
        if (n.type === "group") {
            objects[n.id].children = [];
            objects[n.id].deferBuild = true;
            if (missingParents[n.id]) {
                objects[n.id].children = missingParents[n.id];
                delete missingParents[n.id]
            }
        }
        var parent = n.g||n.z;
        if (parent) {
            if (objects[parent]) {
                if (empties[parent]) {
                    empties[parent].treeList.remove();
                    delete empties[parent];
                }
                if (objects[parent].treeList) {
                    objects[parent].treeList.addChild(objects[n.id]);
                } else {
                    objects[parent].children.push(objects[n.id])
                }
            } else {
                missingParents[parent] = missingParents[parent]||[];
                missingParents[parent].push(objects[n.id])
            }
        } else {
            // 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();
    }

    var updateSearchTimer;
    function updateSearch() {
        if (updateSearchTimer) {
            clearTimeout(updateSearchTimer)
        }
        if (activeSearch) {
            updateSearchTimer = setTimeout(function() {
                searchInput.searchBox("change");
            },100);
        }
    }
    function onSelectionChanged(selection) {
        // treeList.treeList('clearSelection');
    }

    return {
        build: build,
        search: function(val) {
            searchInput.searchBox('value',val)
        },
        select: function(node) {
            if (node) {
                if (Array.isArray(node)) {
                    treeList.treeList('select', node.map(function(n) { return objects[n.id] }), false)
                } else {
                    treeList.treeList('select', objects[node.id], false)

                }
            } else {
                treeList.treeList('clearSelection')
            }
        },
        reveal: function(node) {
            treeList.treeList('show', objects[node.id])
        }
    }
})();