@kumologica/sdk 3.0.0

package/src/app/ui/editor-client/src/js/ui/subflow.js

@@ -0,0 +1,748 @@
+ 
+
+RED.subflow = (function() {
+
+    var _subflowEditTemplate = '<script type="text/x-kumologica" data-template-name="subflow">'+
+        '<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"></div>'+
+        '<div class="form-row" style="margin-bottom: 0px;"><label style="width: auto;" data-i18n="[append]editor:editor-tab.env"><i class="fa fa-th-list"></i> </label></div>'+
+        '<div class="form-row node-input-env-container-row"><ol id="node-input-env-container"></ol></div>'+
+        '</script>';
+
+    var _subflowTemplateEditTemplate = '<script type="text/x-kumologica" data-template-name="subflow-template">'+
+        '<div class="form-row"><i class="fa fa-tag"></i> <label for="subflow-input-name" data-i18n="common.label.name"></label><input type="text" id="subflow-input-name"></div>'+
+        '<div class="form-row"><i class="fa fa-folder-o"></i> <label for="subflow-input-category" data-i18n="editor:subflow.category"></label><select style="width: 250px;" id="subflow-input-category"></select><input style="display:none; margin-left: 10px; width:calc(100% - 250px)" type="text" id="subflow-input-custom-category"></div>'+
+        '<div class="form-row" style="margin-bottom: 0px;"><label style="width: auto;" data-i18n="[append]editor:editor-tab.env"><i class="fa fa-th-list"></i> </label></div>'+
+        '<div class="form-row node-input-env-container-row"><ol id="node-input-env-container"></ol></div>'+
+        '<div class="form-row form-tips" id="subflow-dialog-user-count"></div>'+
+        '</script>';
+
+    function findAvailableSubflowIOPosition(subflow,isInput) {
+        var pos = {x:50,y:30};
+        if (!isInput) {
+            pos.x += 110;
+        }
+        var ports = [].concat(subflow.out).concat(subflow.in);
+        if (subflow.status) {
+            ports.push(subflow.status);
+        }
+        ports.sort(function(A,B) {
+            return A.x-B.x;
+        });
+        for (var i=0; i<ports.length; i++) {
+            var port = ports[i];
+            if (port.x == pos.x && port.y == pos.y) {
+                pos.x += 55;
+            }
+        }
+        return pos;
+    }
+
+    function addSubflowInput() {
+        var subflow = RED.nodes.subflow(RED.workspaces.active());
+        if (subflow.in.length === 1) {
+            return;
+        }
+        var position = findAvailableSubflowIOPosition(subflow,true);
+        var newInput = {
+            type:"subflow",
+            direction:"in",
+            z:subflow.id,
+            i:subflow.in.length,
+            x:position.x,
+            y:position.y,
+            id:RED.nodes.id()
+        };
+        var oldInCount = subflow.in.length;
+        subflow.in.push(newInput);
+        subflow.dirty = true;
+        var wasDirty = RED.nodes.dirty();
+        var wasChanged = subflow.changed;
+        subflow.changed = true;
+        var result = refresh(true);
+        var historyEvent = {
+            t:'edit',
+            node:subflow,
+            dirty:wasDirty,
+            changed:wasChanged,
+            subflow: {
+                inputCount: oldInCount,
+                instances: result.instances
+            }
+        };
+        RED.history.push(historyEvent);
+        RED.view.select();
+        RED.nodes.dirty(true);
+        RED.view.redraw();
+        $("#workspace-subflow-input-add").addClass("active");
+        $("#workspace-subflow-input-remove").removeClass("active");
+        RED.palette.refresh();
+    }
+
+    function removeSubflowInput() {
+        var activeSubflow = RED.nodes.subflow(RED.workspaces.active());
+        if (activeSubflow.in.length === 0) {
+            return;
+        }
+        var removedInput = activeSubflow.in[0];
+        var removedInputLinks = [];
+        RED.nodes.eachLink(function(l) {
+            if (l.source.type == "subflow" && l.source.z == activeSubflow.id && l.source.i == removedInput.i) {
+                removedInputLinks.push(l);
+            } else if (l.target.type == "subflow:"+activeSubflow.id) {
+                removedInputLinks.push(l);
+            }
+        });
+        removedInputLinks.forEach(function(l) { RED.nodes.removeLink(l)});
+        activeSubflow.in = [];
+        $("#workspace-subflow-input-add").removeClass("active");
+        $("#workspace-subflow-input-remove").addClass("active");
+        activeSubflow.changed = true;
+        RED.palette.refresh();
+        return {subflowInputs: [ removedInput ], links:removedInputLinks};
+    }
+
+    function addSubflowOutput(id) {
+        var subflow = RED.nodes.subflow(RED.workspaces.active());
+        var position = findAvailableSubflowIOPosition(subflow,false);
+
+        var newOutput = {
+            type:"subflow",
+            direction:"out",
+            z:subflow.id,
+            i:subflow.out.length,
+            x:position.x,
+            y:position.y,
+            id:RED.nodes.id()
+        };
+        var oldOutCount = subflow.out.length;
+        subflow.out.push(newOutput);
+        subflow.dirty = true;
+        var wasDirty = RED.nodes.dirty();
+        var wasChanged = subflow.changed;
+        subflow.changed = true;
+
+        var result = refresh(true);
+
+        var historyEvent = {
+            t:'edit',
+            node:subflow,
+            dirty:wasDirty,
+            changed:wasChanged,
+            subflow: {
+                outputCount: oldOutCount,
+                instances: result.instances
+            }
+        };
+        RED.history.push(historyEvent);
+        RED.view.select();
+        RED.nodes.dirty(true);
+        RED.view.redraw();
+        $("#workspace-subflow-output .spinner-value").text(subflow.out.length);
+        RED.palette.refresh();
+    }
+
+    function removeSubflowOutput(removedSubflowOutputs) {
+        var activeSubflow = RED.nodes.subflow(RED.workspaces.active());
+        if (activeSubflow.out.length === 0) {
+            return;
+        }
+        if (typeof removedSubflowOutputs === "undefined") {
+            removedSubflowOutputs = [activeSubflow.out[activeSubflow.out.length-1]];
+        }
+        var removedLinks = [];
+        removedSubflowOutputs.sort(function(a,b) { return b.i-a.i});
+        for (i=0;i<removedSubflowOutputs.length;i++) {
+            var output = removedSubflowOutputs[i];
+            activeSubflow.out.splice(output.i,1);
+            var subflowRemovedLinks = [];
+            var subflowMovedLinks = [];
+            RED.nodes.eachLink(function(l) {
+                if (l.target.type == "subflow" && l.target.z == activeSubflow.id && l.target.i == output.i) {
+                    subflowRemovedLinks.push(l);
+                }
+                if (l.source.type == "subflow:"+activeSubflow.id) {
+                    if (l.sourcePort == output.i) {
+                        subflowRemovedLinks.push(l);
+                    } else if (l.sourcePort > output.i) {
+                        subflowMovedLinks.push(l);
+                    }
+                }
+            });
+            subflowRemovedLinks.forEach(function(l) { RED.nodes.removeLink(l)});
+            subflowMovedLinks.forEach(function(l) { l.sourcePort--; });
+
+            removedLinks = removedLinks.concat(subflowRemovedLinks);
+            for (var j=output.i;j<activeSubflow.out.length;j++) {
+                activeSubflow.out[j].i--;
+                activeSubflow.out[j].dirty = true;
+            }
+        }
+        activeSubflow.changed = true;
+        RED.palette.refresh();
+        return {subflowOutputs: removedSubflowOutputs, links: removedLinks}
+    }
+
+    function addSubflowStatus() {
+        var subflow = RED.nodes.subflow(RED.workspaces.active());
+        if (subflow.status) {
+            return;
+        }
+        var position = findAvailableSubflowIOPosition(subflow,false);
+        var statusNode = {
+            type:"subflow",
+            direction:"status",
+            z:subflow.id,
+            x:position.x,
+            y:position.y,
+            id:RED.nodes.id()
+        };
+        subflow.status = statusNode;
+        subflow.dirty = true;
+        var wasDirty = RED.nodes.dirty();
+        var wasChanged = subflow.changed;
+        subflow.changed = true;
+        var result = refresh(true);
+        var historyEvent = {
+            t:'edit',
+            node:subflow,
+            dirty:wasDirty,
+            changed:wasChanged,
+            subflow: { status: true }
+        };
+        RED.history.push(historyEvent);
+        RED.view.select();
+        RED.nodes.dirty(true);
+        RED.view.redraw();
+        $("#workspace-subflow-status").prop("checked",!!subflow.status);
+        $("#workspace-subflow-status").parent().parent().toggleClass("active",!!subflow.status);
+    }
+
+    function removeSubflowStatus() {
+        var subflow = RED.nodes.subflow(RED.workspaces.active());
+        if (!subflow.status) {
+            return;
+        }
+        var subflowRemovedLinks = [];
+        RED.nodes.eachLink(function(l) {
+            if (l.target.type == "subflow" && l.target.z == subflow.id && l.target.direction == "status") {
+                subflowRemovedLinks.push(l);
+            }
+        });
+        subflowRemovedLinks.forEach(function(l) { RED.nodes.removeLink(l)});
+        delete subflow.status;
+
+        $("#workspace-subflow-status").prop("checked",!!subflow.status);
+        $("#workspace-subflow-status").parent().parent().toggleClass("active",!!subflow.status);
+
+        return { links: subflowRemovedLinks }
+    }
+
+    function refresh(markChange) {
+        var activeSubflow = RED.nodes.subflow(RED.workspaces.active());
+        refreshToolbar(activeSubflow);
+        var subflowInstances = [];
+        if (activeSubflow) {
+            RED.nodes.filterNodes({type:"subflow:"+activeSubflow.id}).forEach(function(n) {
+                subflowInstances.push({
+                    id: n.id,
+                    changed: n.changed
+                });
+                if (markChange) {
+                    n.changed = true;
+                }
+                n.inputs = activeSubflow.in.length;
+                n.outputs = activeSubflow.out.length;
+                while (n.outputs < n.ports.length) {
+                    n.ports.pop();
+                }
+                n.resize = true;
+                n.dirty = true;
+                RED.editor.updateNodeProperties(n);
+            });
+            RED.editor.validateNode(activeSubflow);
+            return {
+                instances: subflowInstances
+            }
+        }
+    }
+
+    function refreshToolbar(activeSubflow) {
+        if (activeSubflow) {
+            $("#workspace-subflow-input-add").toggleClass("active", activeSubflow.in.length !== 0);
+            $("#workspace-subflow-input-remove").toggleClass("active",activeSubflow.in.length === 0);
+
+            $("#workspace-subflow-output .spinner-value").text(activeSubflow.out.length);
+
+            $("#workspace-subflow-status").prop("checked",!!activeSubflow.status);
+            $("#workspace-subflow-status").parent().parent().toggleClass("active",!!activeSubflow.status);
+
+        }
+    }
+
+    function showWorkspaceToolbar(activeSubflow) {
+        var toolbar = $("#workspace-toolbar");
+        toolbar.empty();
+
+        // Edit properties
+        $('<a class="button" id="workspace-subflow-edit" href="#" data-i18n="[append]subflow.editSubflowProperties"><i class="fa fa-pencil"></i> </a>').appendTo(toolbar);
+
+        // Inputs
+        $('<span style="margin-left: 5px;" data-i18n="subflow.input"></span> '+
+            '<div style="display: inline-block;" class="button-group">'+
+            '<a id="workspace-subflow-input-remove" class="button active" href="#">0</a>'+
+            '<a id="workspace-subflow-input-add" class="button" href="#">1</a>'+
+            '</div>').appendTo(toolbar);
+
+        // Outputs
+        $('<span style="margin-left: 5px;" data-i18n="subflow.output"></span> <div id="workspace-subflow-output" style="display: inline-block;" class="button-group spinner-group">'+
+            '<a id="workspace-subflow-output-remove" class="button" href="#"><i class="fa fa-minus"></i></a>'+
+            '<div class="spinner-value">3</div>'+
+            '<a id="workspace-subflow-output-add" class="button" href="#"><i class="fa fa-plus"></i></a>'+
+            '</div>').appendTo(toolbar);
+
+        // Status
+        $('<span class="button-group"><span class="button" style="padding:0"><label for="workspace-subflow-status"><input id="workspace-subflow-status" type="checkbox"> <span data-i18n="subflow.status"></span></label></span></span>').appendTo(toolbar);
+
+        // $('<a class="button disabled" id="workspace-subflow-add-input" href="#" data-i18n="[append]subflow.input"><i class="fa fa-plus"></i> </a>').appendTo(toolbar);
+        // $('<a class="button" id="workspace-subflow-add-output" href="#" data-i18n="[append]subflow.output"><i class="fa fa-plus"></i> </a>').appendTo(toolbar);
+
+        // Delete
+        $('<a class="button" id="workspace-subflow-delete" href="#" data-i18n="[append]subflow.deleteSubflow"><i class="fa fa-trash"></i> </a>').appendTo(toolbar);
+
+        toolbar.i18n();
+
+
+        $("#workspace-subflow-output-remove").click(function(event) {
+            event.preventDefault();
+            var wasDirty = RED.nodes.dirty();
+            var wasChanged = activeSubflow.changed;
+            var result = removeSubflowOutput();
+            if (result) {
+                var inst = refresh(true);
+                RED.history.push({
+                    t:'delete',
+                    links:result.links,
+                    subflowOutputs: result.subflowOutputs,
+                    changed: wasChanged,
+                    dirty:wasDirty,
+                    subflow: {
+                        instances: inst.instances
+                    }
+                });
+
+                RED.view.select();
+                RED.nodes.dirty(true);
+                RED.view.redraw(true);
+            }
+        });
+
+        $("#workspace-subflow-output-add").click(function(event) {
+            event.preventDefault();
+            addSubflowOutput();
+        });
+
+        $("#workspace-subflow-input-add").click(function(event) {
+            event.preventDefault();
+            addSubflowInput();
+        });
+
+        $("#workspace-subflow-input-remove").click(function(event) {
+            event.preventDefault();
+            var wasDirty = RED.nodes.dirty();
+            var wasChanged = activeSubflow.changed;
+            activeSubflow.changed = true;
+            var result = removeSubflowInput();
+            if (result) {
+                var inst = refresh(true);
+                RED.history.push({
+                    t:'delete',
+                    links:result.links,
+                    changed: wasChanged,
+                    subflowInputs: result.subflowInputs,
+                    dirty:wasDirty,
+                    subflow: {
+                        instances: inst.instances
+                    }
+                });
+                RED.view.select();
+                RED.nodes.dirty(true);
+                RED.view.redraw(true);
+            }
+        });
+
+        $("#workspace-subflow-status").change(function(evt) {
+            if (this.checked) {
+                addSubflowStatus();
+            } else {
+                var currentStatus = activeSubflow.status;
+                var wasChanged = activeSubflow.changed;
+                var result = removeSubflowStatus();
+                if (result) {
+                    activeSubflow.changed = true;
+                    var wasDirty = RED.nodes.dirty();
+                    RED.history.push({
+                        t:'delete',
+                        links:result.links,
+                        changed: wasChanged,
+                        dirty:wasDirty,
+                        subflow: {
+                            id: activeSubflow.id,
+                            status: currentStatus
+                        }
+                    });
+                    RED.view.select();
+                    RED.nodes.dirty(true);
+                    RED.view.redraw();
+                }
+            }
+        })
+
+        $("#workspace-subflow-edit").click(function(event) {
+            RED.editor.editSubflow(RED.nodes.subflow(RED.workspaces.active()));
+            event.preventDefault();
+        });
+
+        $("#workspace-subflow-delete").click(function(event) {
+            event.preventDefault();
+            var startDirty = RED.nodes.dirty();
+            var historyEvent = removeSubflow(RED.workspaces.active());
+            historyEvent.t = 'delete';
+            historyEvent.dirty = startDirty;
+
+            RED.history.push(historyEvent);
+
+        });
+
+        refreshToolbar(activeSubflow);
+
+        $("#chart").css({"margin-top": "40px"});
+        $("#workspace-toolbar").show();
+    }
+
+    function hideWorkspaceToolbar() {
+        $("#workspace-toolbar").hide().empty();
+        $("#chart").css({"margin-top": "0"});
+    }
+
+    function removeSubflow(id) {
+        var removedNodes = [];
+        var removedLinks = [];
+
+        var activeSubflow = RED.nodes.subflow(id);
+
+        RED.nodes.eachNode(function(n) {
+            if (n.type == "subflow:"+activeSubflow.id) {
+                removedNodes.push(n);
+            }
+            if (n.z == activeSubflow.id) {
+                removedNodes.push(n);
+            }
+        });
+        RED.nodes.eachConfig(function(n) {
+            if (n.z == activeSubflow.id) {
+                removedNodes.push(n);
+            }
+        });
+
+        var removedConfigNodes = [];
+        for (var i=0;i<removedNodes.length;i++) {
+            var removedEntities = RED.nodes.remove(removedNodes[i].id);
+            removedLinks = removedLinks.concat(removedEntities.links);
+            removedConfigNodes = removedConfigNodes.concat(removedEntities.nodes);
+        }
+        // TODO: this whole delete logic should be in RED.nodes.removeSubflow..
+        removedNodes = removedNodes.concat(removedConfigNodes);
+
+        RED.nodes.removeSubflow(activeSubflow);
+        RED.workspaces.remove(activeSubflow);
+        RED.nodes.dirty(true);
+        RED.view.redraw();
+
+        return {
+            nodes:removedNodes,
+            links:removedLinks,
+            subflows: [activeSubflow]
+        }
+    }
+
+    function init() {
+        RED.events.on("workspace:change",function(event) {
+            var activeSubflow = RED.nodes.subflow(event.workspace);
+            if (activeSubflow) {
+                showWorkspaceToolbar(activeSubflow);
+            } else {
+                hideWorkspaceToolbar();
+            }
+        });
+        RED.events.on("view:selection-changed",function(selection) {
+            if (!selection.nodes) {
+                RED.menu.setDisabled("menu-item-subflow-convert",true);
+            } else {
+                RED.menu.setDisabled("menu-item-subflow-convert",false);
+            }
+        });
+
+        RED.actions.add("core:create-subflow",createSubflow);
+        RED.actions.add("core:convert-to-subflow",convertToSubflow);
+
+        $(_subflowEditTemplate).appendTo(document.body);
+        $(_subflowTemplateEditTemplate).appendTo(document.body);
+
+    }
+
+    function createSubflow() {
+        var lastIndex = 0;
+        RED.nodes.eachSubflow(function(sf) {
+           var m = (new RegExp("^Subflow (\\d+)$")).exec(sf.name);
+           if (m) {
+               lastIndex = Math.max(lastIndex,m[1]);
+           }
+        });
+
+        var name = "Subflow "+(lastIndex+1);
+
+        var subflowId = RED.nodes.id();
+        var subflow = {
+            type:"subflow",
+            id:subflowId,
+            name:name,
+            info:"",
+            in: [],
+            out: []
+        };
+        RED.nodes.addSubflow(subflow);
+        RED.history.push({
+            t:'createSubflow',
+            subflow: {
+                subflow:subflow
+            },
+            dirty:RED.nodes.dirty()
+        });
+        RED.workspaces.show(subflowId);
+        RED.nodes.dirty(true);
+    }
+
+    function snapToGrid(x) {
+        if (RED.settings.get("editor").view['view-snap-grid']) {
+            x = Math.round(x / RED.view.gridSize()) * RED.view.gridSize();
+        }
+        return x;
+    }
+
+    function convertToSubflow() {
+        var selection = RED.view.selection();
+        if (!selection.nodes) {
+            RED.notify(RED._("subflow.errors.noNodesSelected"),"error");
+            return;
+        }
+        var i,n;
+        var nodes = {};
+        var new_links = [];
+        var removedLinks = [];
+
+        var candidateInputs = [];
+        var candidateOutputs = [];
+        var candidateInputNodes = {};
+
+        var boundingBox = [selection.nodes[0].x,
+            selection.nodes[0].y,
+            selection.nodes[0].x,
+            selection.nodes[0].y];
+
+        for (i=0;i<selection.nodes.length;i++) {
+            n = selection.nodes[i];
+            nodes[n.id] = {n:n,outputs:{}};
+            boundingBox = [
+                Math.min(boundingBox[0],n.x),
+                Math.min(boundingBox[1],n.y),
+                Math.max(boundingBox[2],n.x),
+                Math.max(boundingBox[3],n.y)
+            ]
+        }
+        var offsetX = snapToGrid(boundingBox[0] - 200);
+        var offsetY = snapToGrid(boundingBox[1] - 80);
+
+
+        var center = [
+            snapToGrid((boundingBox[2]+boundingBox[0]) / 2),
+            snapToGrid((boundingBox[3]+boundingBox[1]) / 2)
+        ];
+
+        RED.nodes.eachLink(function(link) {
+            if (nodes[link.source.id] && nodes[link.target.id]) {
+                // A link wholely within the selection
+            }
+
+            if (nodes[link.source.id] && !nodes[link.target.id]) {
+                // An outbound link from the selection
+                candidateOutputs.push(link);
+                removedLinks.push(link);
+            }
+            if (!nodes[link.source.id] && nodes[link.target.id]) {
+                // An inbound link
+                candidateInputs.push(link);
+                candidateInputNodes[link.target.id] = link.target;
+                removedLinks.push(link);
+            }
+        });
+
+        var outputs = {};
+        candidateOutputs = candidateOutputs.filter(function(v) {
+             if (outputs[v.source.id+":"+v.sourcePort]) {
+                 outputs[v.source.id+":"+v.sourcePort].targets.push(v.target);
+                 return false;
+             }
+             v.targets = [];
+             v.targets.push(v.target);
+             outputs[v.source.id+":"+v.sourcePort] = v;
+             return true;
+        });
+        candidateOutputs.sort(function(a,b) { return a.source.y-b.source.y});
+
+        if (Object.keys(candidateInputNodes).length > 1) {
+             RED.notify(RED._("subflow.errors.multipleInputsToSelection"),"error");
+             return;
+        }
+
+        var lastIndex = 0;
+        RED.nodes.eachSubflow(function(sf) {
+           var m = (new RegExp("^Subflow (\\d+)$")).exec(sf.name);
+           if (m) {
+               lastIndex = Math.max(lastIndex,m[1]);
+           }
+        });
+
+        var name = "Subflow "+(lastIndex+1);
+
+        var subflowId = RED.nodes.id();
+        var subflow = {
+            type:"subflow",
+            id:subflowId,
+            name:name,
+            info:"",
+            in: Object.keys(candidateInputNodes).map(function(v,i) { var index = i; return {
+                type:"subflow",
+                direction:"in",
+                x:snapToGrid(candidateInputNodes[v].x-(candidateInputNodes[v].w/2)-80 - offsetX),
+                y:snapToGrid(candidateInputNodes[v].y - offsetY),
+                z:subflowId,
+                i:index,
+                id:RED.nodes.id(),
+                wires:[{id:candidateInputNodes[v].id}]
+            }}),
+            out: candidateOutputs.map(function(v,i) { var index = i; return {
+                type:"subflow",
+                direction:"out",
+                x:snapToGrid(v.source.x+(v.source.w/2)+80 - offsetX),
+                y:snapToGrid(v.source.y - offsetY),
+                z:subflowId,
+                i:index,
+                id:RED.nodes.id(),
+                wires:[{id:v.source.id,port:v.sourcePort}]
+            }})
+        };
+
+        RED.nodes.addSubflow(subflow);
+
+        var subflowInstance = {
+            id:RED.nodes.id(),
+            type:"subflow:"+subflow.id,
+            x: center[0],
+            y: center[1],
+            z: RED.workspaces.active(),
+            inputs: subflow.in.length,
+            outputs: subflow.out.length,
+            h: Math.max(30/*node_height*/,(subflow.out.length||0) * 15),
+            changed:true
+        }
+        subflowInstance._def = RED.nodes.getType(subflowInstance.type);
+        RED.editor.validateNode(subflowInstance);
+        RED.nodes.add(subflowInstance);
+
+        candidateInputs.forEach(function(l) {
+            var link = {source:l.source, sourcePort:l.sourcePort, target: subflowInstance};
+            new_links.push(link);
+            RED.nodes.addLink(link);
+        });
+
+        candidateOutputs.forEach(function(output,i) {
+            output.targets.forEach(function(target) {
+                var link = {source:subflowInstance, sourcePort:i, target: target};
+                new_links.push(link);
+                RED.nodes.addLink(link);
+            });
+        });
+
+        subflow.in.forEach(function(input) {
+            input.wires.forEach(function(wire) {
+                var link = {source: input, sourcePort: 0, target: RED.nodes.node(wire.id) }
+                new_links.push(link);
+                RED.nodes.addLink(link);
+            });
+        });
+        subflow.out.forEach(function(output,i) {
+            output.wires.forEach(function(wire) {
+                var link = {source: RED.nodes.node(wire.id), sourcePort: wire.port , target: output }
+                new_links.push(link);
+                RED.nodes.addLink(link);
+            });
+        });
+
+        for (i=0;i<removedLinks.length;i++) {
+            RED.nodes.removeLink(removedLinks[i]);
+        }
+
+        for (i=0;i<selection.nodes.length;i++) {
+            n = selection.nodes[i];
+            if (/^link /.test(n.type)) {
+                n.links = n.links.filter(function(id) {
+                    var isLocalLink = nodes.hasOwnProperty(id);
+                    if (!isLocalLink) {
+                        var otherNode = RED.nodes.node(id);
+                        if (otherNode && otherNode.links) {
+                            var i = otherNode.links.indexOf(n.id);
+                            if (i > -1) {
+                                otherNode.links.splice(i,1);
+                            }
+                        }
+                    }
+                    return isLocalLink;
+                });
+            }
+            n.x -= offsetX;
+            n.y -= offsetY;
+            n.z = subflow.id;
+        }
+
+        RED.history.push({
+            t:'createSubflow',
+            nodes:[subflowInstance.id],
+            links:new_links,
+            subflow: {
+                subflow: subflow,
+                offsetX: offsetX,
+                offsetY: offsetY
+            },
+
+            activeWorkspace: RED.workspaces.active(),
+            removedLinks: removedLinks,
+
+            dirty:RED.nodes.dirty()
+        });
+        RED.view.select(null);
+        RED.editor.validateNode(subflow);
+        RED.nodes.dirty(true);
+        RED.view.redraw(true);
+    }
+
+    return {
+        init: init,
+        createSubflow: createSubflow,
+        convertToSubflow: convertToSubflow,
+        removeSubflow: removeSubflow,
+        refresh: refresh,
+        removeInput: removeSubflowInput,
+        removeOutput: removeSubflowOutput,
+        removeStatus: removeSubflowStatus
+    }
+})();