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

/**
 * Copyright JS Foundation and other contributors, http://js.foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 **/

RED.group = (function() {

    var _groupEditTemplate = '<script type="text/x-red" data-template-name="group">'+
        '<div class="form-row">'+
            '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
            '<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">'+
        '</div>'+

        '<div class="form-row">'+
            '<label for="node-input-style-stroke" data-i18n="[append]editor:group.label.stroke">Stroke</label>'+
            '<input type="text" id="node-input-style-stroke">'+
        '</div>'+

        '<div class="form-row">'+
            '<label for="node-input-style-fill" data-i18n="[append]editor:group.label.fill">Fill</label>'+
            '<input type="text" id="node-input-style-fill">'+
        '</div>'+

        '</script>';

    var groupDef = {
        defaults:{
            name:{value:""},
            style:{value:{}},
            nodes:{value:[]}
        },
        category: "config",
        oneditprepare: function() {
            var style = this.style || {};
            $("#node-input-style-stroke").val(style.stroke || "#eeeeee")
            $("#node-input-style-fill").val(style.fill || "none")
        },
        oneditresize: function(size) {
        },
        oneditsave: function() {
            this.style.stroke = $("#node-input-style-stroke").val();
            this.style.fill = $("#node-input-style-fill").val();
        },
        set:{
            module: "node-red"
        }
    }

    function init() {


        RED.actions.add("core:group-selection", function() { groupSelection() })
        RED.actions.add("core:ungroup-selection", function() { ungroupSelection() })
        RED.actions.add("core:merge-selection-to-group", function() { mergeSelection() })
        RED.actions.add("core:remove-selection-from-group", function() { removeSelection() })

        $(_groupEditTemplate).appendTo("#red-ui-editor-node-configs");

    }

    function groupSelection() {
        var selection = RED.view.selection();
        if (selection.nodes) {
            var group = createGroup(selection.nodes);
            if (group) {
                var historyEvent = {
                    t:"createGroup",
                    groups: [ group ],
                    dirty: RED.nodes.dirty()
                }
                RED.history.push(historyEvent);
                RED.view.select({nodes:[group]});
                RED.nodes.dirty(true);
            }
        }
    }
    function ungroupSelection() {
        var selection = RED.view.selection();
        if (selection.nodes) {
            var newSelection = [];
            groups = selection.nodes.filter(function(n) { return n.type === "group" });

            var historyEvent = {
                t:"ungroup",
                groups: [ ],
                dirty: RED.nodes.dirty()
            }
            RED.history.push(historyEvent);


            groups.forEach(function(g) {
                newSelection = newSelection.concat(ungroup(g))
                historyEvent.groups.push(g);
            })
            RED.history.push(historyEvent);
            RED.view.select({nodes:newSelection})
            RED.nodes.dirty(true);
        }
    }

    function ungroup(g) {
        var nodes = [];
        var parentGroup = RED.nodes.group(g.g);
        g.nodes.forEach(function(n) {
            nodes.push(n);
            if (parentGroup) {
                // Move nodes to parent group
                n.g = parentGroup.id;
                parentGroup.nodes.push(n);
                parentGroup.dirty = true;
                n.dirty = true;
            } else {
                delete n.g;
            }
        })
        RED.nodes.removeGroup(g);
        return nodes;
    }

    function mergeSelection() {
        // TODO: this currently creates an entirely new group. Need to merge properties
        //       of any existing group
        var selection = RED.view.selection();
        if (selection.nodes) {
            var nodes = [];

            var historyEvent = {
                t: "multi",
                events: []
            }
            var ungroupHistoryEvent = {
                t: "ungroup",
                groups: []
            }


            var n;
            var parentGroup;
            // First pass, check they are all in the same parent
            // TODO: DRY mergeSelection,removeSelection,...
            for (var i=0; i<selection.nodes.length; i++) {
                n = selection.nodes[i];
                if (i === 0) {
                    parentGroup = n.g;
                } else if (n.g !== parentGroup) {
                    RED.notify("Cannot merge nodes from different groups","error");
                    return;
                }
            }
            // Second pass, ungroup any groups in the selection and add their contents
            // to the selection
            for (var i=0; i<selection.nodes.length; i++) {
                n = selection.nodes[i];
                if (n.type === "group") {
                    ungroupHistoryEvent.groups.push(n);
                    nodes = nodes.concat(ungroup(n));
                } else {
                    nodes.push(n);
                }
                n.dirty = true;
            }
            if (ungroupHistoryEvent.groups.length > 0) {
                historyEvent.events.push(ungroupHistoryEvent);
            }
            // Finally, create the new group
            var group = createGroup(nodes);
            if (group) {
                RED.view.select({nodes:[group]})
            }
            historyEvent.events.push({
                t:"createGroup",
                groups: [ group ],
                dirty: RED.nodes.dirty()
            });
            RED.history.push(historyEvent);
            RED.nodes.dirty(true);
        }
    }

    function removeSelection() {
        var selection = RED.view.selection();
        if (selection.nodes) {
            var nodes = [];
            var n;
            var parentGroup = RED.nodes.group(selection.nodes[0].g);
            if (parentGroup) {
                try {
                    removeFromGroup(parentGroup,selection.nodes);
                    var historyEvent = {
                        t: "removeFromGroup",
                        dirty: RED.nodes.dirty(),
                        group: parentGroup,
                        nodes: selection.nodes
                    }
                    RED.history.push(historyEvent);
                    RED.nodes.dirty(true);
                } catch(err) {
                    RED.notify(err,"error");
                    return;
                }
            }
            RED.view.select({nodes:selection.nodes})
        }
    }
    function createGroup(nodes) {
        if (nodes.length === 0) {
            return;
        }
        // nodes is an array
        // each node must be on the same tab (z)
        var group = {
            id: RED.nodes.id(),
            type: 'group',
            nodes: [],
            style: {
                stroke: "#999",
                fill: "none"
            },
            x: Number.POSITIVE_INFINITY,
            y: Number.POSITIVE_INFINITY,
            w: 0,
            h: 0,
            _def: RED.group.def
        }
        try {
            addToGroup(group,nodes);
        } catch(err) {
            RED.notify(err,"error");
            return;
        }
        group.z = nodes[0].z;

        RED.nodes.addGroup(group);
        return group;
    }
    function addToGroup(group,nodes) {
        if (!Array.isArray(nodes)) {
            nodes = [nodes];
        }
        var i,n,z;
        var g;
        // First pass - validate we can safely add these nodes to the group
        for (i=0;i<nodes.length;i++) {
            n = nodes[i]
            if (!n.z) {
                throw new Error("Cannot add node without a z property to a group")
            }
            if (!z) {
                z = n.z;
            } else if (z !== n.z) {
                throw new Error("Cannot create group using nodes with different z properties")
            }
            if (n.g) {
                // This is already in a group.
                //  - check they are all in the same group
                if (!g) {
                    if (i!==0) {
                        // TODO: this might be ok when merging groups
                        throw new Error("Cannot create group using nodes from different groups")
                    }
                    g = n.g
                }
            }
            if (g !== n.g) {
                throw new Error("Cannot create group using nodes from different groups")
            }
        }
        if (g) {
            g = RED.nodes.group(g);
            g.nodes.push(group);
            g.dirty = true;
            group.g = g.id;
        }
        // Second pass - add them to the group
        for (i=0;i<nodes.length;i++) {
            n = nodes[i];
            if (g && n.g === g.id) {
                var ni = g.nodes.indexOf(n);
                if (ni > -1) {
                    g.nodes.splice(ni,1)
                }
            }
            n.g = group.id;
            n.dirty = true;
            group.nodes.push(n);
            group.x = Math.min(group.x,n.x-n.w/2-25-((n._def.button && n._def.align!=="right")?20:0));
            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);
        }
    }
    function removeFromGroup(group, nodes) {
        if (!Array.isArray(nodes)) {
            nodes = [nodes];
        }
        var n;
        // First pass, check they are all in the same parent
        // TODO: DRY mergeSelection,removeSelection,...
        for (var i=0; i<nodes.length; i++) {
            if (nodes[i].g !== group.id) {
                RED.notify("Cannot remove node "+nodes[i].id+" from group it isn't in");
                return;
            }
        }

        var parentGroup = RED.nodes.group(group.g);
        for (var i=0; i<nodes.length; i++) {
            n = nodes[i];
            n.dirty = true;
            var index = group.nodes.indexOf(n);
            group.nodes.splice(index,1);
            group.dirty = true;
            if (group.g) {
                n.g = group.g
                parentGroup.nodes.push(n);
                parentGroup.dirty = true;
            } else {
                delete n.g;
            }
        }

    }

    function getNodes(group,recursive) {
        var nodes = [];
        group.nodes.forEach(function(n) {
            if (!recursive || n.type !== 'group') {
                nodes.push(n);
            } else {
                nodes = nodes.concat(getNodes(n,recursive))
            }
        })
        return nodes;
    }

    function groupContains(group,item) {
        if (item.g === group.id) {
            return true;
        }
        for (var i=0;i<group.nodes.length;i++) {
            if (group.nodes[i].type === "group") {
                if (groupContains(group.nodes[i],item)) {
                    return true;
                }
            }
        }
        return false;
    }
    function getRootGroup(group) {
        if (!group.g) {
            return group;
        }
        return getRootGroup(RED.nodes.group(group.g))
    }


    return {
        def: groupDef,
        init: init,
        createGroup: createGroup,
        ungroup: ungroup,
        addToGroup: addToGroup,
        removeFromGroup: removeFromGroup,
        getNodes: getNodes,
        contains: groupContains
    }
})();