@kumologica/sdk 3.0.0

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

@@ -0,0 +1,39 @@
+RED.actions = (function() {
+  var actions = {};
+
+  function addAction(name, handler) {
+    actions[name] = handler;
+  }
+  function removeAction(name) {
+    delete actions[name];
+  }
+  function getAction(name) {
+    return actions[name];
+  }
+  function invokeAction(name, args) {
+    // console.log(`[actions.js] invoke:${name}`);
+    if (actions.hasOwnProperty(name)) {
+      actions[name](args);
+    }
+  }
+  function listActions() {
+    var result = [];
+    Object.keys(actions).forEach(function(action) {
+      var shortcut = RED.keyboard.getShortcut(action);
+      result.push({
+        id: action,
+        scope: shortcut ? shortcut.scope : undefined,
+        key: shortcut ? shortcut.key : undefined,
+        user: shortcut ? shortcut.user : undefined
+      });
+    });
+    return result;
+  }
+  return {
+    add: addAction,
+    remove: removeAction,
+    get: getAction,
+    invoke: invokeAction,
+    list: listActions
+  };
+})();

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

@@ -0,0 +1,510 @@
+ RED.clipboard = (function() {
+
+    var dialog;
+    var dialogContainer;
+    var exportNodesDialog;
+    var importNodesDialog;
+    var disabled = false;
+    var popover;
+    var currentPopoverError;
+
+    function setupDialogs() {
+        dialog = $('<div id="clipboard-dialog" class="hide kumologica-core-dialog"><form class="dialog-form form-horizontal"></form></div>')
+            .appendTo("body")
+            .dialog({
+                modal: true,
+                autoOpen: false,
+                width: 500,
+                resizable: false,
+                buttons: [
+                    {
+                        id: "clipboard-dialog-cancel",
+                        text: 'Cancel',
+                        click: function() {
+                            $( this ).dialog( "close" );
+                        }
+                    },
+                    {
+                        id: "clipboard-dialog-close",
+                        class: "primary",
+                        text: 'Close',
+                        click: function() {
+                            $( this ).dialog( "close" );
+                        }
+                    },
+                    {
+                        id: "clipboard-dialog-download",
+                        class: "primary",
+                        text: 'Download',
+                        click: function() {
+                            var element = document.createElement('a');
+                            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent($("#clipboard-export").val()));
+                            element.setAttribute('download', "flows.json");
+                            element.style.display = 'none';
+                            document.body.appendChild(element);
+                            element.click();
+                            document.body.removeChild(element);
+                            $( this ).dialog( "close" );
+                        }
+                    },
+                    {
+                        id: "clipboard-dialog-copy",
+                        class: "primary",
+                        text: 'Copy',
+                        click: function() {
+                            $("#clipboard-export").select();
+                            document.execCommand("copy");
+                            document.getSelection().removeAllRanges();
+                            RED.notify('Nodes exported to clipboard',{id:"clipboard"});
+                            $( this ).dialog( "close" );
+                        }
+                    },
+                    {
+                        id: "clipboard-dialog-ok",
+                        class: "primary",
+                        text: 'Import',
+                        click: function() {
+                            RED.view.importNodes($("#clipboard-import").val(),$("#import-tab > a.selected").attr('id') === 'import-tab-new');
+                            $( this ).dialog( "close" );
+                        }
+                    }
+                ],
+                open: function(e) {
+                    $(this).parent().find(".ui-dialog-titlebar-close").hide();
+                },
+                close: function(e) {
+                    if (popover) {
+                        popover.close(true);
+                        currentPopoverError = null;
+                    }
+                }
+            });
+
+        dialogContainer = dialog.children(".dialog-form");
+
+        exportNodesDialog =
+            '<div class="form-row" style="margin-bottom:10px; text-align:center">'+
+                '<label style="width:auto;margin-right: 10px;"></label>'+
+                '<span id="export-range-group" class="button-group">'+
+                    '<a id="export-range-selected" class="editor-button toggle" href="#">Selected Nodes...</a>'+
+                    '<a id="export-range-flow" class="editor-button toggle" href="#">Current Workspace</a>'+
+                   // '<a id="export-range-full" class="editor-button toggle" href="#">All</a>'+
+                '</span>'+
+            '</div>'+
+            '<div class="form-row">'+
+                '<textarea readonly style="resize: none; width: 100%; border-radius: 4px;font-family: monospace; font-size: 12px; background:#f3f3f3; padding-left: 0.5em; box-sizing:border-box;" id="clipboard-export" rows="8"></textarea>'+
+            '</div>'+
+            '<div class="form-row" style="text-align: right;">'+
+                '<span id="export-format-group" class="button-group">'+
+                    '<a id="export-format-mini" class="editor-button editor-button-small toggle" href="#">Plain</a>'+
+                    '<a id="export-format-full" class="editor-button editor-button-small toggle" href="#">Prettify</a>'+
+                '</span>'+
+            '</div>';
+
+        importNodesDialog =
+            '<div style="margin-bottom: 10px" class="form-row"><span>Load nodes from </span>'+
+                '<a class="editor-button" id="import-file-upload-btn"><i class="fa fa-upload"></i> <span>File...</span></a>'+  '<span> or </span>' +
+                '<a class="editor-button" id="import-from-clipboard"><i class="fa fa-clipboard"></i> <span>Clipboard</span></a>' +
+                '<input type="file" id="import-file-upload" accept=".json" style="display:none">'+
+            '</div>'+
+            '<div class="form-row">'+
+                '<textarea style="resize: none; width: 100%; border-radius: 0px;font-family: monospace; font-size: 12px; background:#eee; padding-left: 0.5em; box-sizing:border-box;" id="clipboard-import" rows="8"></textarea>'+
+            '</div>'+
+            '<div class="form-row">'+
+            // '<label style="width:auto;margin-right: 10px;" data-i18n="clipboard.import.import"></label>'+
+            // '<span id="import-tab" class="button-group">'+
+            //     '<a id="import-tab-current" class="editor-button toggle selected" href="#">Current</a>'+
+            //     '<a id="import-tab-new" class="editor-button toggle" href="#">New Flow</a>'+
+            // '</span>'+
+            '</div>';
+    }
+
+    var validateImportTimeout;
+
+    function validateImport() {
+        if (validateImportTimeout) {
+            clearTimeout(validateImportTimeout);
+        }
+        validateImportTimeout = setTimeout(function() {
+            var importInput = $("#clipboard-import");
+            var v = importInput.val().trim();
+            if (v === "") {
+                popover.close(true);
+                currentPopoverError = null;
+                importInput.removeClass("input-error");
+                $("#clipboard-dialog-ok").button("disable");
+                return;
+            }
+            try {
+                if (!/^\[[\s\S]*\]$/m.test(v)) {
+                    throw new Error('Input not a JSON Array'); 
+                }
+                var res = JSON.parse(v);
+                for (var i=0;i<res.length;i++) {
+                    if (typeof res[i] !== "object") {
+                        throw new Error('Input not a valid flow'); 
+                    }
+                    if (!res[i].hasOwnProperty('id')) {
+                        throw new Error('Input not a valid flow');
+                    }
+                    if (!res[i].hasOwnProperty('type')) {
+                        throw new Error('Input not a valid flow');
+                    }
+                }
+                currentPopoverError = null;
+                popover.close(true);
+                importInput.removeClass("input-error");
+                importInput.val(v);
+                $("#clipboard-dialog-ok").button("enable");
+            } catch(err) {
+                if (v !== "") {
+                    importInput.addClass("input-error");
+                    var errString = err.toString();
+                    if (errString !== currentPopoverError) {
+                        // Display the error as-is.
+                        // Error messages are only in English. Each browser has its
+                        // own set of messages with very little consistency.
+                        // To provide translated messages this code will either need to:
+                        // - reduce everything down to 'unexpected token at position x'
+                        //   which is the least useful, but most consistent message
+                        // - use a custom/library parser that gives consistent messages
+                        //   which can be translated.
+                        var message = $('<div class="clipboard-import-error"></div>').text(errString);
+                        var errorPos;
+                        // Chrome error messages
+                        var m = /at position (\d+)/i.exec(errString);
+                        if (m) {
+                            errorPos = parseInt(m[1]);
+                        } else {
+                            // Firefox error messages
+                            m = /at line (\d+) column (\d+)/i.exec(errString);
+                            if (m) {
+                                var line = parseInt(m[1])-1;
+                                var col = parseInt(m[2])-1;
+                                var lines = v.split("\n");
+                                errorPos = 0;
+                                for (var i=0;i<line;i++) {
+                                    errorPos += lines[i].length+1;
+                                }
+                                errorPos += col;
+                            } else {
+                                // Safari doesn't provide any position information
+                                // IE: tbd
+                            }
+                        }
+
+                        if (errorPos !== undefined) {
+                            v = v.replace(/\n/g,"↵");
+                            var index = parseInt(m[1]);
+                            var parseError = $('<div>').appendTo(message);
+                            var code = $('<pre>').appendTo(parseError);
+                            $('<span>').text(v.substring(errorPos-12,errorPos)).appendTo(code)
+                            $('<span class="error">').text(v.charAt(errorPos)).appendTo(code);
+                            $('<span>').text(v.substring(errorPos+1,errorPos+12)).appendTo(code);
+                        }
+                        popover.close(true).setContent(message).open();
+                        currentPopoverError = errString;
+                    }
+                } else {
+                    currentPopoverError = null;
+                }
+                $("#clipboard-dialog-ok").button("disable");
+            }
+        },100);
+    }
+
+    // TODO: TODELETE
+    function importNodes() {
+        if (disabled) {
+            return;
+        }
+        dialogContainer.empty();
+        dialogContainer.append($(importNodesDialog));
+        dialogContainer.i18n();
+
+        $("#clipboard-dialog-ok").show();
+        $("#clipboard-dialog-cancel").show();
+        $("#clipboard-dialog-close").hide();
+        $("#clipboard-dialog-copy").hide();
+        $("#clipboard-dialog-download").hide();
+        $("#clipboard-dialog-ok").button("disable");
+        $("#clipboard-import").keyup(validateImport);
+        $("#clipboard-import").on('paste',function() { setTimeout(validateImport,10)});
+
+        $("#import-tab > a").click(function(evt) {
+            evt.preventDefault();
+            if ($(this).hasClass('disabled') || $(this).hasClass('selected')) {
+                return;
+            }
+            $(this).parent().children().removeClass('selected');
+            $(this).addClass('selected');
+        });
+
+        $("#import-file-upload").change(function() {
+            var fileReader = new FileReader();
+            fileReader.onload = function () {
+                $("#clipboard-import").val(fileReader.result);
+                validateImport();
+            };
+            fileReader.readAsText($(this).prop('files')[0]);
+        })
+        $("#import-file-upload-btn").click(function(evt) {
+            evt.preventDefault();
+            $("#import-file-upload").click();
+        })
+
+        $("#import-from-clipboard").click(function(evt) {
+            evt.preventDefault();
+            $('#clipboard-import').select();
+            document.execCommand("paste");
+            validateImport();
+        })
+
+        dialog.dialog("option","title",'Import nodes').dialog("open");
+        popover = RED.popover.create({
+            target: $("#clipboard-import"),
+            trigger: "manual",
+            direction: "bottom",
+            content: ""
+        });
+    }
+
+    // TODO: TODELETE
+    function exportNodes() {
+        if (disabled) {
+            console.log('[clipboard] disable dialog')
+            return;
+        }
+
+        dialogContainer.empty();
+        dialogContainer.append($(exportNodesDialog));
+        dialogContainer.i18n();
+        var format = RED.settings.flowFilePretty ? "export-format-full" : "export-format-mini";
+
+        $("#export-format-group > a").click(function(evt) {
+            evt.preventDefault();
+            if ($(this).hasClass('disabled') || $(this).hasClass('selected')) {
+                $("#clipboard-export").focus();
+                return;
+            }
+            $(this).parent().children().removeClass('selected');
+            $(this).addClass('selected');
+
+            var flow = $("#clipboard-export").val();
+            if (flow.length > 0) {
+                var nodes = JSON.parse(flow);
+
+                format = $(this).attr('id');
+                if (format === 'export-format-full') {
+                    flow = JSON.stringify(nodes,null,4);
+                } else {
+                    flow = JSON.stringify(nodes);
+                }
+                $("#clipboard-export").val(flow);
+                $("#clipboard-export").focus();
+            }
+        });
+
+        $("#export-range-group > a").click(function(evt) {
+            evt.preventDefault();
+            if ($(this).hasClass('disabled') || $(this).hasClass('selected')) {
+                $("#clipboard-export").focus();
+                return;
+            }
+            $(this).parent().children().removeClass('selected');
+            $(this).addClass('selected');
+            var type = $(this).attr('id');
+            var flow = "";
+            var nodes = null;
+            if (type === 'export-range-selected') {
+                var selection = RED.workspaces.selection();
+                if (selection.length > 0) {
+                    nodes = [];
+                    selection.forEach(function(n) {
+                        nodes.push(n);
+                        nodes = nodes.concat(RED.nodes.filterNodes({z:n.id}));
+                    });
+                } else {
+                    nodes = RED.view.selection().nodes||[];
+                }
+                // Don't include the subflow meta-port nodes in the exported selection
+                nodes = RED.nodes.createExportableNodeSet(nodes.filter(function(n) { return n.type !== 'subflow'}));
+            } else if (type === 'export-range-flow') {
+                var activeWorkspace = RED.workspaces.active();
+                nodes = RED.nodes.filterNodes({z:activeWorkspace});
+                var parentNode = RED.nodes.workspace(activeWorkspace)||RED.nodes.subflow(activeWorkspace);
+                nodes.unshift(parentNode);
+                nodes = RED.nodes.createExportableNodeSet(nodes);
+            } else if (type === 'export-range-full') {
+                nodes = RED.nodes.createCompleteNodeSet(false);
+            }
+            if (nodes !== null) {
+                if (format === "export-format-full") {
+                    flow = JSON.stringify(nodes,null,4);
+                } else {
+                    flow = JSON.stringify(nodes);
+                }
+            }
+            if (flow.length > 0) {
+                $("#export-copy").removeClass('disabled');
+            } else {
+                $("#export-copy").addClass('disabled');
+            }
+            $("#clipboard-export").val(flow);
+            $("#clipboard-export").focus();
+        })
+
+        $("#clipboard-dialog-ok").hide();
+        $("#clipboard-dialog-cancel").hide();
+        $("#clipboard-dialog-copy").hide();
+        $("#clipboard-dialog-close").hide();
+        var selection = RED.workspaces.selection();
+        if (selection.length > 0) {
+            $("#export-range-selected").click();
+        } else {
+            selection = RED.view.selection();
+            if (selection.nodes) {
+                $("#export-range-selected").click();
+            } else {
+                $("#export-range-selected").addClass('disabled').removeClass('selected');
+                $("#export-range-flow").click();
+            }
+        }
+        if (format === "export-format-full") {
+            $("#export-format-full").click();
+        } else {
+            $("#export-format-mini").click();
+        }
+        $("#clipboard-export")
+            .focus(function() {
+                var textarea = $(this);
+                textarea.select();
+                textarea.mouseup(function() {
+                    textarea.unbind("mouseup");
+                    return false;
+                })
+            });
+        dialog.dialog("option","title",'Export nodes').dialog( "open" );
+
+        $("#clipboard-export").focus();
+        if (!document.queryCommandSupported("copy")) {
+            $("#clipboard-dialog-cancel").hide();
+            $("#clipboard-dialog-close").show();
+        } else {
+            $("#clipboard-dialog-cancel").show();
+            $("#clipboard-dialog-copy").show();
+        }
+        $("#clipboard-dialog-download").show();
+
+    }
+
+    function hideDropTarget() {
+        $("#dropTarget").hide();
+        RED.keyboard.remove("escape");
+    }
+    function copyText(value,element,msg) {
+        var truncated = false;
+        if (typeof value !== "string" ) {
+            value = JSON.stringify(value, function(key,value) {
+                if (value !== null && typeof value === 'object') {
+                    if (value.__enc__) {
+                        if (value.hasOwnProperty('data') && value.hasOwnProperty('length')) {
+                            truncated = value.data.length !== value.length;
+                            return value.data;
+                        }
+                        if (value.type === 'function' || value.type === 'internal') {
+                            return undefined
+                        }
+                        if (value.type === 'number') {
+                            // Handle NaN and Infinity - they are not permitted
+                            // in JSON. We can either substitute with a String
+                            // representation or null
+                            return null;
+                        }
+                    }
+                }
+                return value;
+            });
+        }
+        if (truncated) {
+            msg += "_truncated";
+        }
+        $("#clipboard-hidden").val(value).select();
+        var result =  document.execCommand("copy");
+        if (result && element) {
+            var popover = RED.popover.create({
+                target: element,
+                direction: 'left',
+                size: 'small',
+                content: msg
+            });
+            setTimeout(function() {
+                popover.close();
+            },1000);
+            popover.open();
+        }
+        return result;
+    }
+    return {
+        init: function() {
+            setupDialogs();
+
+            $('<input type="text" id="clipboard-hidden">').appendTo("body");
+
+            RED.actions.add("core:show-export-dialog",exportNodes);
+            RED.actions.add("core:show-import-dialog",importNodes);
+
+
+            // RED.events.on("editor:open",function() { disabled = true; });
+            // RED.events.on("editor:close",function() { disabled = false; });
+            // RED.events.on("search:open",function() { disabled = true; });
+            // RED.events.on("search:close",function() { disabled = false; });
+            // RED.events.on("type-search:open",function() { disabled = true; });
+            // RED.events.on("type-search:close",function() { disabled = false; });
+
+
+            $('#chart').on("dragenter",function(event) {
+                if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 ||
+                     $.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
+                    $("#dropTarget").css({display:'table'});
+                    RED.keyboard.add("*", "escape" ,hideDropTarget);
+                }
+            });
+
+            $('#dropTarget').on("dragover",function(event) {
+                if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 ||
+                     $.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
+                    event.preventDefault();
+                }
+            })
+            .on("dragleave",function(event) {
+                hideDropTarget();
+            })
+            .on("drop",function(event) {
+                if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1) {
+                    var data = event.originalEvent.dataTransfer.getData("text/plain");
+                    data = data.substring(data.indexOf('['),data.lastIndexOf(']')+1);
+                    RED.view.importNodes(data);
+                } else if ($.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
+                    var files = event.originalEvent.dataTransfer.files;
+                    if (files.length === 1) {
+                        var file = files[0];
+                        var reader = new FileReader();
+                        reader.onload = (function(theFile) {
+                            return function(e) {
+                                RED.view.importNodes(e.target.result);
+                            };
+                        })(file);
+                        reader.readAsText(file);
+                    }
+                }
+                hideDropTarget();
+                event.preventDefault();
+            });
+
+        },
+        import: importNodes,
+        export: exportNodes,
+        copyText: copyText
+    }
+})();

package/src/app/ui/editor-client/src/js/ui/common/checkboxSet.js

@@ -0,0 +1,117 @@
+ 
+(function($) {
+    $.widget( "nodered.checkboxSet", {
+        _create: function() {
+            var that = this;
+            this.uiElement = this.element.wrap( "<span>" ).parent();
+            this.uiElement.addClass("red-ui-checkboxSet");
+            if (this.options.parent) {
+                this.parent = this.options.parent;
+                this.parent.checkboxSet('addChild',this.element);
+            }
+            this.children = [];
+            this.partialFlag = false;
+            this.stateValue = 0;
+            var initialState = this.element.prop('checked');
+            this.options = [
+                $('<span class="red-ui-checkboxSet-option hide"><i class="fa fa-square-o"></i></span>').appendTo(this.uiElement),
+                $('<span class="red-ui-checkboxSet-option hide"><i class="fa fa-check-square-o"></i></span>').appendTo(this.uiElement),
+                $('<span class="red-ui-checkboxSet-option hide"><i class="fa fa-minus-square-o"></i></span>').appendTo(this.uiElement)
+            ];
+            if (initialState) {
+                this.options[1].show();
+            } else {
+                this.options[0].show();
+            }
+
+            this.element.change(function() {
+                if (this.checked) {
+                    that.options[0].hide();
+                    that.options[1].show();
+                    that.options[2].hide();
+                } else {
+                    that.options[1].hide();
+                    that.options[0].show();
+                    that.options[2].hide();
+                }
+                var isChecked = this.checked;
+                that.children.forEach(function(child) {
+                    child.checkboxSet('state',isChecked,false,true);
+                })
+            })
+            this.uiElement.click(function(e) {
+                e.stopPropagation();
+                // state returns null for a partial state. Clicking on that should
+                // result in false.
+                that.state((that.state()===false)?true:false);
+            })
+            if (this.parent) {
+                this.parent.checkboxSet('updateChild',this);
+            }
+        },
+        _destroy: function() {
+            if (this.parent) {
+                this.parent.checkboxSet('removeChild',this.element);
+            }
+        },
+        addChild: function(child) {
+            var that = this;
+            this.children.push(child);
+        },
+        removeChild: function(child) {
+            var index = this.children.indexOf(child);
+            if (index > -1) {
+                this.children.splice(index,1);
+            }
+        },
+        updateChild: function(child) {
+            var checkedCount = 0;
+            this.children.forEach(function(c,i) {
+                if (c.checkboxSet('state') === true) {
+                    checkedCount++;
+                }
+            });
+            if (checkedCount === 0) {
+
+                this.state(false,true);
+            } else if (checkedCount === this.children.length) {
+                this.state(true,true);
+            } else {
+                this.state(null,true);
+            }
+        },
+        disable: function() {
+            this.uiElement.addClass('disabled');
+        },
+        state: function(state,suppressEvent,suppressParentUpdate) {
+
+            if (arguments.length === 0) {
+                return this.partialFlag?null:this.element.is(":checked");
+            } else {
+                this.partialFlag = (state === null);
+                var trueState = this.partialFlag||state;
+                this.element.prop('checked',trueState);
+                if (state === true) {
+                    this.options[0].hide();
+                    this.options[1].show();
+                    this.options[2].hide();
+                } else if (state === false) {
+                    this.options[2].hide();
+                    this.options[1].hide();
+                    this.options[0].show();
+                } else if (state === null) {
+                    this.options[0].hide();
+                    this.options[1].hide();
+                    this.options[2].show();
+                }
+                if (!suppressEvent) {
+                    this.element.trigger('change',null);
+                }
+                if (!suppressParentUpdate && this.parent) {
+                    this.parent.checkboxSet('updateChild',this);
+                }
+            }
+        }
+    })
+
+})(jQuery);