@dualbox/editor 1.0.78 → 1.0.80

package/js/dist/GraphEditor.min.js

@@ -44508,6 +44508,29 @@ class GraphNode {
         }
     }
 
+    checkTypeMatch(type, val) {
+        let lowercaseType = type.toLowerCase();
+        switch (lowercaseType) {
+            case "string":
+                if (typeof val !== "string") {
+                    throw "Expected string type but got " + type;
+                }
+                break;
+            case "number":
+                if (typeof val !== "number") {
+                    throw "Expected number type but got " + type;
+                }
+                break;
+            case "boolean":
+                if (typeof val !== "boolean") {
+                    throw "Expected boolean type but got " + type;
+                }
+                break;
+            default:
+                break;
+        }
+    }
+
     getInputDefaultValue(inputName) {
         var pkg = this.getPackage();
         var pkgDefault = pkg && pkg.dualbox && pkg.dualbox.input && pkg.dualbox.input[inputName] && pkg.dualbox.input[inputName].value;
@@ -44521,6 +44544,7 @@ class GraphNode {
     }
 
     setInputDefaultValue(inputName, val) {
+        this.checkTypeMatch(this.getInputType(inputName), val);
         this.def.defaultInputs = this.def.defaultInputs || {};
         this.def.defaultInputs[inputName] = val;
         this.m.save();
@@ -44599,6 +44623,7 @@ class GraphNode {
     }
 
     setAttributeValue(attrName, val) {
+        this.checkTypeMatch(this.getAttributeType(attrName), val);
         this.def.attr = this.def.attr || {};
         this.def.attr[attrName] = val;
         this.m.save();
@@ -45397,34 +45422,78 @@ class GraphNode {
             // Deep search and replaces the given property value "prevVal" with "newVal"
 
             // remove the ui of id "id" from interface
-            var removeFromInterface = (o, id) => {
-                let newObject = lodash.clone(o);
-                let remove = false;
-
-                lodash.each(o, (val, key) => {
-                    if (key == "node" && val === id) {
-                        remove = true;
-                    } else if (typeof(val) === 'object' || typeof(val) === 'array') {
-                        var cleaned = removeFromInterface(val, id);
-                        if (cleaned === "remove") {
-                            if (key === "dataset" || key === "attributes") {
-                                remove = true; // delete 1 more upper level
-                            } else {
-                                lodash.remove(newObject, (v, k) => k == key);
-                            }
+            // var removeFromInterface = (o, id) => {
+            //     let newObject = _.clone(o);
+
+            //     if (typeof o === "object" || typeof o === "array") {
+            //         for (let [key, val] of Object.entries(o)) {
+            //             let nodeId = _.get(val, ["attributes", "dataset", "node"]);
+            //             if (nodeId == id) {
+            //                 _.unset(newObject, key);
+            //             } else {
+            //                 newObject[key] = removeFromInterface(val, id);
+            //             }
+            //         }
+            //     }
+
+            //     return newObject;
+            // }
+            // app.interface = removeFromInterface(app.interface, this.id);
+
+            var getUIPath = (o, id, path = []) => {
+                let p = lodash.clone(path);
+                let identification = ["attributes", "dataset", "node"];
+
+                if (typeof o === "object" || typeof o === "array") {
+                    for (let [key, val] of Object.entries(o)) {
+                        let nodeId = lodash.get(val, identification);
+                        if (nodeId == id) {
+                            return path.concat(key);
                         } else {
-                            newObject[key] = cleaned;
+                            let fullpath = getUIPath(val, id, path.concat(key));
+                            if (fullpath !== null) {
+                                return fullpath;
+                            }
                         }
                     }
-                });
+                } else {
+                    return null;
+                }
 
-                if (remove) {
-                    return "remove";
+                // if we arrive here, we didn't find a valid path parcouring children nodes
+                return null;
+            };
+
+            var removePath = (json, path) => {
+                if (isNaN(parseInt(lodash.last(path)))) {
+                    lodash.unset(json, path); // not an array
                 } else {
-                    return newObject;
+                    // Check if it's an object or an element in an array
+                    if (path.length > 1) {
+                        let p = lodash.clone(path);
+                        let last = p.pop();
+
+                        let parent = lodash.get(json, p);
+                        if (Array.isArray(parent)) {
+                            // Array, use _.remove instead
+                            lodash.remove(parent, (v, k) => k == last);
+                            lodash.set(json, p, parent);
+                        } else {
+                            lodash.unset(json, path); // not an array
+                        }
+                    } else {
+                        lodash.unset(json, path); // not an array
+                    }
                 }
+
+                return json;
             };
-            app.interface = removeFromInterface(app.interface, this.id);
+
+            let UIFullPath = getUIPath(app.interface, this.id);
+            console.log("Found UI " + this.id + " at path " + UIFullPath);
+            if (UIFullPath !== null) {
+                app.interface = removePath(app.interface, UIFullPath);
+            }
 
             // remove this node from all app events (API) using it
             var removeFromAppEvents = (o, id) => {
@@ -46460,53 +46529,92 @@ $.fn.fixCardDisplay = function() {
     var offsetPoint = 12;
     var offsetBorder = parseInt($(this).css("border-top-width"));
 
-    if ($(this).find('.box-inputs').height() === 0 && $(this).find('.box-outputs').height() === 0) {
+    // if we have width or height set to 0, we are not ready yet to
+    // execute this function. Postpone it.
+    if( $(this).width() === 0 || $(this).height() === 0 ) {
+        setTimeout(() => {
+            $(this).fixCardDisplay();
+        }, 50);
+        return;
+    }
+
+    if (
+        $(this)
+            .find(".box-inputs")
+            .height() === 0 &&
+        $(this)
+            .find(".box-outputs")
+            .height() === 0
+    ) {
         // if this card has no input/output, remove the card center
-        $(this).find('.card-center').remove();
+        $(this)
+            .find(".card-center")
+            .remove();
     } else {
         // else, adjust the input/output display for endpoints
         // 1) translate inputs by the right amount of pixels to have the circle on the line
-        var boxInputs = $(this).find('.box-inputs');
+        var boxInputs = $(this).find(".box-inputs");
 
         // fix css names width
-        var namesDiv = boxInputs.find('.names');
-        namesDiv.css('width', (namesDiv.width() + 1) + 'px');
+        var namesDiv = boxInputs.find(".names");
+        namesDiv.css("width", namesDiv.width() + 1 + "px");
 
         // translate inputs to the left
-        var translateLeft = boxInputs.find('.types').width() + offsetPoint + offsetBorder / 2;
-        $(this).find('.box-inputs').css('transform', 'translateX(-' + translateLeft + 'px)');
+        var translateLeft =
+            boxInputs.find(".types").width() + offsetPoint + offsetBorder / 2;
+        $(this)
+            .find(".box-inputs")
+            .css("transform", "translateX(-" + translateLeft + "px)");
 
         // adjust inputs main div width
-        $(this).find('.inputs').width($(this).find('.inputs').width() - translateLeft + 10 /* margin */ );
-
+        $(this)
+            .find(".inputs")
+            .width(
+                $(this)
+                    .find(".inputs")
+                    .width() -
+                    translateLeft +
+                    10 /* margin */
+            );
 
         // 2) translate outputs by the right amount of pixels to have the circle on the line
-        var boxOutputs = $(this).find('.box-outputs');
+        var boxOutputs = $(this).find(".box-outputs");
 
         // fix css names with
-        var namesDiv = boxOutputs.find('.names');
-        namesDiv.css('width', (namesDiv.width() + 1) + 'px');
+        var namesDiv = boxOutputs.find(".names");
+        namesDiv.css("width", namesDiv.width() + 1 + "px");
 
         // translate inputs to the right
-        var translateRight = boxOutputs.find('.types').width() + offsetPoint + offsetBorder / 2;
-        $(this).find('.box-outputs').css('transform', 'translateX(' + translateRight + 'px)');
+        var translateRight =
+            boxOutputs.find(".types").width() + offsetPoint + offsetBorder / 2;
+        $(this)
+            .find(".box-outputs")
+            .css("transform", "translateX(" + translateRight + "px)");
 
         // adjust output main div width
-        $(this).find('.outputs').width($(this).find('.outputs').width() - translateRight + 10 /* margin */ );
+        $(this)
+            .find(".outputs")
+            .width(
+                $(this)
+                    .find(".outputs")
+                    .width() -
+                    translateRight +
+                    10 /* margin */
+            );
 
         // fix io width
         //$('.dualbox-io').css('width', (($(this).find('.inputs').width() + $(this).find('.outputs').width()) + "px"));
     }
-};
 
-// take the current width and add it as a css property
-$.fn.fixWidth = function() {
-    var width = $(this).width();
-    width += parseInt($(this).css('padding-right'));
-    width += parseInt($(this).css('padding-left'));
-    width += parseInt($(this).css('border-left-width'));
-    width += parseInt($(this).css('border-right-width'));
-    $(this).css('width', Math.ceil(width) + 'px');
+    $(this).ready(() => {
+        // take the current width and add it as a css property
+        var width = $(this).width();
+        width += parseInt($(this).css("padding-right"));
+        width += parseInt($(this).css("padding-left"));
+        width += parseInt($(this).css("border-left-width"));
+        width += parseInt($(this).css("border-right-width"));
+        $(this).css("width", Math.ceil(width) + "px");
+    });
 };
 
 // find position of element relative to an ancestor matching selector
@@ -46516,8 +46624,8 @@ $.fn.positionFrom = function(selector) {
     var ancestorOffset = ancestor.offset();
     return {
         top: offset.top - ancestorOffset.top,
-        left: offset.left - ancestorOffset.left,
-    }
+        left: offset.left - ancestorOffset.left
+    };
 };
 
 var script = {
@@ -46526,20 +46634,21 @@ var script = {
         "pkg", // the module package.json
         "n", // the GraphNode object (from model)
         "example", // true if this vue is used as an example display (no need to connect)
-        "displayEvents", // true if events should be displayed
+        "displayEvents" // true if events should be displayed
     ],
     data: function() {
         return {
             shortName: "",
-            point: '<svg width="14" height="14" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="7" cy="7" r="5" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#ffffff" stroke="#727272" style="" stroke-width="2"></circle></svg>',
-        }
+            point:
+                '<svg width="14" height="14" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="7" cy="7" r="5" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#ffffff" stroke="#727272" style="" stroke-width="2"></circle></svg>'
+        };
     },
     beforeUpdate: function() {
         //console.log('[UPDATING] ' + this.n.getUniqId());
     },
     destroyed: function() {
         this.deactivateTooltip();
-        $('.tooltip').remove();
+        $(".tooltip").remove();
     },
     created: function() {
         this.initialized = false;
@@ -46557,11 +46666,6 @@ var script = {
         //console.log('[MOUNTED] ' + this.n.getUniqId());
         var div = $(this.$el);
         div.fixCardDisplay();
-        div.ready(() => {
-            //if( !this.example ) {
-            div.fixWidth();
-            //}
-        });
         this.activateTooltip();
         return await this.initialize();
     },
@@ -46577,7 +46681,6 @@ var script = {
 
         $(this.$el).fixCardDisplay();
         $(this.$el).ready(() => {
-            $(this.$el).fixWidth();
             this.activateTooltip();
         });
         return await this.initialize();
@@ -46592,15 +46695,19 @@ var script = {
         getId: function() {
             // if this is an example graphNode, change our "id" to "id-junk"
             // to avoid connection jsplumb conflicts with the real node
-            return this.example ? this.id + '-junk' : this.id;
+            return this.example ? this.id + "-junk" : this.id;
         },
 
         activateTooltip: function() {
-            $(this.$el).find('[data-toggle="tooltip"]').tooltip();
+            $(this.$el)
+                .find('[data-toggle="tooltip"]')
+                .tooltip();
         },
 
         deactivateTooltip: function() {
-            $(this.$el).find('[data-toggle="tooltip"]').tooltip("dispose");
+            $(this.$el)
+                .find('[data-toggle="tooltip"]')
+                .tooltip("dispose");
         },
 
         initialize: async function() {
@@ -46616,12 +46723,17 @@ var script = {
                 var def = this.n.getDef();
                 var position = lodash.get(def, ["graph", "position"]);
                 if (position) {
-                    var jsPlumbElement = self.$parent.jsPlumbInstance.getElement(id);
-                    self.$parent.jsPlumbInstance.setPosition(jsPlumbElement, position);
+                    var jsPlumbElement = self.$parent.jsPlumbInstance.getElement(
+                        id
+                    );
+                    self.$parent.jsPlumbInstance.setPosition(
+                        jsPlumbElement,
+                        position
+                    );
                 }
 
                 // This needs to be registered before draggable
-                div.on('mousedown', function(e) {
+                div.on("mousedown", function(e) {
                     // if this div is not selected already, deselect the other divs
                     if (!self.$parent.selector.isSelected(this)) {
                         self.$parent.selector.deselect();
@@ -46656,228 +46768,387 @@ var script = {
 
             if (!this.example) {
                 // If this node was never initialized in this jsplumb instance, do it
-                if (!lodash.get(this.$parent.jsPlumbInstance, ["initializedNodes", id])) {
-                    lodash.set(this.$parent.jsPlumbInstance, ["initializedNodes", id], true); // initialized
+                if (
+                    !lodash.get(this.$parent.jsPlumbInstance, [
+                        "initializedNodes",
+                        id
+                    ])
+                ) {
+                    lodash.set(
+                        this.$parent.jsPlumbInstance,
+                        ["initializedNodes", id],
+                        true
+                    ); // initialized
 
                     if (this.n.isInput() || this.n.isOutput()) {
                         var input = "value";
                         var output = "value";
-                        var offsetTop = $(div).find('.card-top').height() + 12 /* hr size */ - 3;
-
-                        var uuid = [id, "input", input].join('#');
-                        var ep = this.$parent.jsPlumbInstance.addEndpoint(id, {
-                            isSource: false,
-                            isTarget: true,
-                            uuid: uuid,
-                            anchor: [0, 0, -1, 0, 0, offsetTop],
-                            maxConnections: 1,
-                            parameters: {
-                                type: "data",
-                                target: {
-                                    id: id,
-                                    input: output
+                        var offsetTop =
+                            $(div)
+                                .find(".card-top")
+                                .height() +
+                            12 /* hr size */ -
+                            3;
+
+                        var uuid = [id, "input", input].join("#");
+                        var ep = this.$parent.jsPlumbInstance.addEndpoint(
+                            id,
+                            {
+                                isSource: false,
+                                isTarget: true,
+                                uuid: uuid,
+                                anchor: [0, 0, -1, 0, 0, offsetTop],
+                                maxConnections: 1,
+                                parameters: {
+                                    type: "data",
+                                    target: {
+                                        id: id,
+                                        input: output
+                                    }
                                 }
-                            }
-                        }, this.$parent.style.inputEndpoint);
+                            },
+                            this.$parent.style.inputEndpoint
+                        );
 
                         // add data to the endpoint div so we can identify it easier
-                        $(ep.canvas).attr('data-node', id);
-                        $(ep.canvas).attr('data-type', 'input');
-                        $(ep.canvas).attr('data-input', input);
+                        $(ep.canvas).attr("data-node", id);
+                        $(ep.canvas).attr("data-type", "input");
+                        $(ep.canvas).attr("data-input", input);
 
                         // bind tooltip
-                        $(ep.canvas).attr('data-toggle', "tooltip");
-                        $(ep.canvas).attr('data-trigger', "hover");
-                        $(ep.canvas).attr('data-placement', "left");
-                        $(ep.canvas).attr('data-html', "true");
-                        var inputType = view.m.getNode(id).getInputType("value");
-                        $(ep.canvas).attr('title', "Type: <b>" + inputType + "</b>");
+                        $(ep.canvas).attr("data-toggle", "tooltip");
+                        $(ep.canvas).attr("data-trigger", "hover");
+                        $(ep.canvas).attr("data-placement", "left");
+                        $(ep.canvas).attr("data-html", "true");
+                        var inputType = view.m
+                            .getNode(id)
+                            .getInputType("value");
+                        $(ep.canvas).attr(
+                            "title",
+                            "Type: <b>" + inputType + "</b>"
+                        );
                         $(ep.canvas).tooltip();
 
                         // bind context menu to the endpoint
-                        $(ep.canvas).addClass('capture-right-click');
+                        $(ep.canvas).addClass("capture-right-click");
                         $(ep.canvas).ready(function() {
-                            var menu = new ContextMenu(".jtk-endpoint-anchor[data-node='" + id.trim() + "'][data-input='" + input + "']", [{
-                                name: 'Create input for here',
-                                fn: () => {
-                                    view.c.createInputFromConnection(id, input);
-                                }
-                            }, ]);
+                            var menu = new ContextMenu(
+                                ".jtk-endpoint-anchor[data-node='" +
+                                    id.trim() +
+                                    "'][data-input='" +
+                                    input +
+                                    "']",
+                                [
+                                    {
+                                        name: "Create input for here",
+                                        fn: () => {
+                                            view.c.createInputFromConnection(
+                                                id,
+                                                input
+                                            );
+                                        }
+                                    }
+                                ]
+                            );
                         });
 
-                        var uuid = [id, "output", output].join('#');
-                        var ep = this.$parent.jsPlumbInstance.addEndpoint(id, {
-                            isSource: true,
-                            isTarget: false,
-                            uuid: uuid,
-                            anchor: [1, 0, 1, 0, 0, offsetTop],
-                            parameters: {
-                                type: "data",
-                                source: {
-                                    id: id,
-                                    output: output
+                        var uuid = [id, "output", output].join("#");
+                        var ep = this.$parent.jsPlumbInstance.addEndpoint(
+                            id,
+                            {
+                                isSource: true,
+                                isTarget: false,
+                                uuid: uuid,
+                                anchor: [1, 0, 1, 0, 0, offsetTop],
+                                parameters: {
+                                    type: "data",
+                                    source: {
+                                        id: id,
+                                        output: output
+                                    }
                                 }
-                            }
-                        }, this.$parent.style.outputEndpoint);
+                            },
+                            this.$parent.style.outputEndpoint
+                        );
 
                         // add data to the endpoint div so we can identify it easier
-                        $(ep.canvas).attr('data-node', id);
-                        $(ep.canvas).attr('data-type', "output");
-                        $(ep.canvas).attr('data-output', output);
+                        $(ep.canvas).attr("data-node", id);
+                        $(ep.canvas).attr("data-type", "output");
+                        $(ep.canvas).attr("data-output", output);
 
                         // bind tooltip
-                        $(ep.canvas).attr('data-toggle', "tooltip");
-                        $(ep.canvas).attr('data-trigger', "hover");
-                        $(ep.canvas).attr('data-placement', "right");
-                        $(ep.canvas).attr('data-html', "true");
-                        var outputType = view.m.getNode(id).getOutputType("value");
-                        $(ep.canvas).attr('title', "Type: <b>" + outputType + "</b>");
+                        $(ep.canvas).attr("data-toggle", "tooltip");
+                        $(ep.canvas).attr("data-trigger", "hover");
+                        $(ep.canvas).attr("data-placement", "right");
+                        $(ep.canvas).attr("data-html", "true");
+                        var outputType = view.m
+                            .getNode(id)
+                            .getOutputType("value");
+                        $(ep.canvas).attr(
+                            "title",
+                            "Type: <b>" + outputType + "</b>"
+                        );
                         $(ep.canvas).tooltip();
 
                         // bind context menu to the endpoint
-                        $(ep.canvas).addClass('capture-right-click');
+                        $(ep.canvas).addClass("capture-right-click");
                         $(ep.canvas).ready(function() {
-                            var menu = new ContextMenu(".jtk-endpoint-anchor[data-node='" + id.trim() + "'][data-output='" + output.trim() + "']", [{
-                                name: 'Create output for here',
-                                fn: () => {
-                                    view.c.createOutputFromConnection(id, output);
-                                }
-                            }, ]);
+                            var menu = new ContextMenu(
+                                ".jtk-endpoint-anchor[data-node='" +
+                                    id.trim() +
+                                    "'][data-output='" +
+                                    output.trim() +
+                                    "']",
+                                [
+                                    {
+                                        name: "Create output for here",
+                                        fn: () => {
+                                            view.c.createOutputFromConnection(
+                                                id,
+                                                output
+                                            );
+                                        }
+                                    }
+                                ]
+                            );
                         });
                     } else {
                         // add input endoints
-                        div.find('.box-inputs').find('.point').each(function(index) {
-                            $(this).css('visibility', 'hidden').css('opacity', '0'); // replaced by jsPlumb point
-
-                            var input = div.find('.box-inputs').find('.name').eq(index).attr('data-input').trim();
-                            var type = view.m.getNode(id).getInputType(input);
-
-                            var offsetTop = $(this).positionFrom('.card').top + $(this).height() / 2 - 3;
-                            var uuid = [id, "input", $(this).data('key')].join('#');
-                            var ep = self.$parent.jsPlumbInstance.addEndpoint(id, {
-                                isSource: false,
-                                isTarget: true,
-                                uuid: uuid,
-                                anchor: [0, 0, -1, 0, 0, offsetTop],
-                                maxConnections: 1,
-                                parameters: {
-                                    type: "data",
-                                    target: {
-                                        id: id,
-                                        input: $(this).data('key')
-                                    }
-                                }
-                            }, self.$parent.style.inputEndpoint);
-
-                            // add data to the endpoint div so we can identify it easier
-                            $(ep.canvas).attr('data-node', id);
-                            $(ep.canvas).attr('data-type', 'input');
-                            $(ep.canvas).attr('data-input', input);
-
-                            // bind tooltip
-                            $(ep.canvas).attr('data-toggle', "tooltip");
-                            $(ep.canvas).attr('data-trigger', "hover");
-                            $(ep.canvas).attr('data-placement', "left");
-                            $(ep.canvas).attr('data-html', "true");
-                            $(ep.canvas).attr('title', "Type:  <b>" + type + "</b>");
-                            $(ep.canvas).tooltip();
+                        div.find(".box-inputs")
+                            .find(".point")
+                            .each(function(index) {
+                                $(this)
+                                    .css("visibility", "hidden")
+                                    .css("opacity", "0"); // replaced by jsPlumb point
+
+                                var input = div
+                                    .find(".box-inputs")
+                                    .find(".name")
+                                    .eq(index)
+                                    .attr("data-input")
+                                    .trim();
+                                var type = view.m
+                                    .getNode(id)
+                                    .getInputType(input);
+
+                                var offsetTop =
+                                    $(this).positionFrom(".card").top +
+                                    $(this).height() / 2 -
+                                    3;
+                                var uuid = [
+                                    id,
+                                    "input",
+                                    $(this).data("key")
+                                ].join("#");
+                                var ep = self.$parent.jsPlumbInstance.addEndpoint(
+                                    id,
+                                    {
+                                        isSource: false,
+                                        isTarget: true,
+                                        uuid: uuid,
+                                        anchor: [0, 0, -1, 0, 0, offsetTop],
+                                        maxConnections: 1,
+                                        parameters: {
+                                            type: "data",
+                                            target: {
+                                                id: id,
+                                                input: $(this).data("key")
+                                            }
+                                        }
+                                    },
+                                    self.$parent.style.inputEndpoint
+                                );
 
-                            // bind context menu to the endpoint
-                            $(ep.canvas).addClass('capture-right-click');
-                            $(ep.canvas).ready(function() {
-                                var menu = new ContextMenu(".jtk-endpoint-anchor[data-node='" + id.trim() + "'][data-input='" + input.trim() + "']", [{
-                                    name: 'Create input for here',
-                                    fn: () => {
-                                        view.c.createInputFromConnection(id, input);
-                                    }
-                                }, ]);
+                                // add data to the endpoint div so we can identify it easier
+                                $(ep.canvas).attr("data-node", id);
+                                $(ep.canvas).attr("data-type", "input");
+                                $(ep.canvas).attr("data-input", input);
+
+                                // bind tooltip
+                                $(ep.canvas).attr("data-toggle", "tooltip");
+                                $(ep.canvas).attr("data-trigger", "hover");
+                                $(ep.canvas).attr("data-placement", "left");
+                                $(ep.canvas).attr("data-html", "true");
+                                $(ep.canvas).attr(
+                                    "title",
+                                    "Type:  <b>" + type + "</b>"
+                                );
+                                $(ep.canvas).tooltip();
+
+                                // bind context menu to the endpoint
+                                $(ep.canvas).addClass("capture-right-click");
+                                $(ep.canvas).ready(function() {
+                                    var menu = new ContextMenu(
+                                        ".jtk-endpoint-anchor[data-node='" +
+                                            id.trim() +
+                                            "'][data-input='" +
+                                            input.trim() +
+                                            "']",
+                                        [
+                                            {
+                                                name: "Create input for here",
+                                                fn: () => {
+                                                    view.c.createInputFromConnection(
+                                                        id,
+                                                        input
+                                                    );
+                                                }
+                                            }
+                                        ]
+                                    );
+                                });
                             });
-                        });
 
                         // add output endpoints
-                        div.find('.box-outputs').find('.point').each(function(index) {
-                            $(this).css('visibility', 'hidden').css('opacity', '0'); // replaced by jsPlumb point
-
-                            var output = div.find('.box-outputs').find('.name').eq(index).attr('data-output').trim();
-                            var type = view.m.getNode(id).getOutputType(output);
-
-                            var offsetTop = $(this).positionFrom('.card').top + $(this).height() / 2 - 3;
-                            var uuid = [id, "output", $(this).data('key')].join('#');
-                            var ep = self.$parent.jsPlumbInstance.addEndpoint(id, {
-                                isSource: true,
-                                isTarget: false,
-                                uuid: uuid,
-                                anchor: [1, 0, 1, 0, 0, offsetTop],
-                                parameters: {
-                                    type: "data",
-                                    source: {
-                                        id: id,
-                                        output: $(this).data('key')
-                                    }
-                                }
-                            }, self.$parent.style.outputEndpoint);
-
-                            // add data to the endpoint div so we can identify it easier
-                            $(ep.canvas).attr('data-node', id);
-                            $(ep.canvas).attr('data-type', "output");
-                            $(ep.canvas).attr('data-output', output);
-
-                            // bind tooltip
-                            $(ep.canvas).attr('data-toggle', "tooltip");
-                            $(ep.canvas).attr('data-trigger', "hover");
-                            $(ep.canvas).attr('data-placement', "right");
-                            $(ep.canvas).attr('data-html', "true");
-                            $(ep.canvas).attr('title', "Type: <b>" + type + "</b>");
-                            $(ep.canvas).tooltip();
+                        div.find(".box-outputs")
+                            .find(".point")
+                            .each(function(index) {
+                                $(this)
+                                    .css("visibility", "hidden")
+                                    .css("opacity", "0"); // replaced by jsPlumb point
+
+                                var output = div
+                                    .find(".box-outputs")
+                                    .find(".name")
+                                    .eq(index)
+                                    .attr("data-output")
+                                    .trim();
+                                var type = view.m
+                                    .getNode(id)
+                                    .getOutputType(output);
+
+                                var offsetTop =
+                                    $(this).positionFrom(".card").top +
+                                    $(this).height() / 2 -
+                                    3;
+                                var uuid = [
+                                    id,
+                                    "output",
+                                    $(this).data("key")
+                                ].join("#");
+                                var ep = self.$parent.jsPlumbInstance.addEndpoint(
+                                    id,
+                                    {
+                                        isSource: true,
+                                        isTarget: false,
+                                        uuid: uuid,
+                                        anchor: [1, 0, 1, 0, 0, offsetTop],
+                                        parameters: {
+                                            type: "data",
+                                            source: {
+                                                id: id,
+                                                output: $(this).data("key")
+                                            }
+                                        }
+                                    },
+                                    self.$parent.style.outputEndpoint
+                                );
 
-                            // bind context menu to the endpoint
-                            $(ep.canvas).addClass('capture-right-click');
-                            $(ep.canvas).ready(function() {
-                                var menu = new ContextMenu(".jtk-endpoint-anchor[data-node='" + id.trim() + "'][data-output='" + output.trim() + "']", [{
-                                    name: 'Create output for here',
-                                    fn: () => {
-                                        view.c.createOutputFromConnection(id, output);
-                                    }
-                                }, ]);
+                                // add data to the endpoint div so we can identify it easier
+                                $(ep.canvas).attr("data-node", id);
+                                $(ep.canvas).attr("data-type", "output");
+                                $(ep.canvas).attr("data-output", output);
+
+                                // bind tooltip
+                                $(ep.canvas).attr("data-toggle", "tooltip");
+                                $(ep.canvas).attr("data-trigger", "hover");
+                                $(ep.canvas).attr("data-placement", "right");
+                                $(ep.canvas).attr("data-html", "true");
+                                $(ep.canvas).attr(
+                                    "title",
+                                    "Type: <b>" + type + "</b>"
+                                );
+                                $(ep.canvas).tooltip();
+
+                                // bind context menu to the endpoint
+                                $(ep.canvas).addClass("capture-right-click");
+                                $(ep.canvas).ready(function() {
+                                    var menu = new ContextMenu(
+                                        ".jtk-endpoint-anchor[data-node='" +
+                                            id.trim() +
+                                            "'][data-output='" +
+                                            output.trim() +
+                                            "']",
+                                        [
+                                            {
+                                                name: "Create output for here",
+                                                fn: () => {
+                                                    view.c.createOutputFromConnection(
+                                                        id,
+                                                        output
+                                                    );
+                                                }
+                                            }
+                                        ]
+                                    );
+                                });
                             });
-                        });
 
                         if (this.n.isUI() && this.displayEvents) {
                             // Make this a target for events
-                            this.$parent.jsPlumbInstance.makeTarget(id, {
-                                isSource: false,
-                                isTarget: true,
-                                uniqueEndpoint: false,
-                                anchor: "Continuous",
-                                uuid: id + "#event-in",
-                                paintStyle: { fill: "green", radius: 3, stroke: "#727272", strokeWidth: 1 },
-                                parameters: {
-                                    type: "event",
-                                    target: { "id": id }
+                            this.$parent.jsPlumbInstance.makeTarget(
+                                id,
+                                {
+                                    isSource: false,
+                                    isTarget: true,
+                                    uniqueEndpoint: false,
+                                    anchor: "Continuous",
+                                    uuid: id + "#event-in",
+                                    paintStyle: {
+                                        fill: "green",
+                                        radius: 3,
+                                        stroke: "#727272",
+                                        strokeWidth: 1
+                                    },
+                                    parameters: {
+                                        type: "event",
+                                        target: { id: id }
+                                    }
                                 },
-                            }, self.$parent.style.eventEndpoint);
+                                self.$parent.style.eventEndpoint
+                            );
 
                             // Create an enpoint to create a new event
-                            var ep = this.$parent.jsPlumbInstance.addEndpoint(id, {
-                                isSource: true,
-                                isTarget: false,
-                                uuid: id + "#event-out",
-                                anchor: [1, 1, 0, 1, 0, -10],
-                                parameters: {
-                                    type: "event",
-                                    source: { "id": id }
+                            var ep = this.$parent.jsPlumbInstance.addEndpoint(
+                                id,
+                                {
+                                    isSource: true,
+                                    isTarget: false,
+                                    uuid: id + "#event-out",
+                                    anchor: [1, 1, 0, 1, 0, -10],
+                                    parameters: {
+                                        type: "event",
+                                        source: { id: id }
+                                    },
+                                    paintStyle: {
+                                        fill: "green",
+                                        radius: 3,
+                                        stroke: "#727272",
+                                        strokeWidth: 1
+                                    }
                                 },
-                                paintStyle: { fill: "green", radius: 3, stroke: "#727272", strokeWidth: 1 },
-                            }, this.$parent.style.eventEndpoint);
+                                this.$parent.style.eventEndpoint
+                            );
 
                             // Add overlay here so we don't mess with splitConnection
-                            ep.addOverlay(["PlainArrow", { width: 15, length: 15, location: 1, id: "arrow" }]);
-
-                            $(ep.canvas).attr('data-toggle', "tooltip");
-                            $(ep.canvas).attr('data-trigger', "hover");
-                            $(ep.canvas).attr('data-placement', "bottom");
-                            $(ep.canvas).attr('data-html', "true");
-                            $(ep.canvas).attr('title', "Connect from here ito add an event that will be triggered when this box is done computing.");
+                            ep.addOverlay([
+                                "PlainArrow",
+                                {
+                                    width: 15,
+                                    length: 15,
+                                    location: 1,
+                                    id: "arrow"
+                                }
+                            ]);
+
+                            $(ep.canvas).attr("data-toggle", "tooltip");
+                            $(ep.canvas).attr("data-trigger", "hover");
+                            $(ep.canvas).attr("data-placement", "bottom");
+                            $(ep.canvas).attr("data-html", "true");
+                            $(ep.canvas).attr(
+                                "title",
+                                "Connect from here ito add an event that will be triggered when this box is done computing."
+                            );
                             $(ep.canvas).tooltip();
                         }
                     }
@@ -46898,19 +47169,29 @@ var script = {
                             // resize the canvas if necessary
                             self.$parent.canvasSizeHandler.debouncedResize();
 
-                            if (self.$parent.selector.isMultipleSelectionActive()) {
+                            if (
+                                self.$parent.selector.isMultipleSelectionActive()
+                            ) {
                                 // We just dropped a bunch of divs, ajust all their positions
                                 self.view.m.batch(() => {
                                     self.$parent.selector.each(div => {
-                                        var pos = self.$parent.jsPlumbInstance.getPosition(div);
-                                        view.m.getNode($(div).attr('id')).setPosition(pos);
+                                        var pos = self.$parent.jsPlumbInstance.getPosition(
+                                            div
+                                        );
+                                        view.m
+                                            .getNode($(div).attr("id"))
+                                            .setPosition(pos);
                                     });
                                 });
                             } else {
                                 // We just dropped this one, set the new position in the graph model
-                                var el = self.$parent.jsPlumbInstance.getElement(id);
+                                var el = self.$parent.jsPlumbInstance.getElement(
+                                    id
+                                );
                                 $(el).ready(function() {
-                                    var pos = self.$parent.jsPlumbInstance.getPosition(el);
+                                    var pos = self.$parent.jsPlumbInstance.getPosition(
+                                        el
+                                    );
                                     view.m.getNode(id).setPosition(pos);
                                 });
                             }
@@ -46919,22 +47200,26 @@ var script = {
                 }
             }
 
-            return new Promise((resolve) => this.$parent.jsPlumbInstance.ready(resolve));
+            return new Promise(resolve =>
+                this.$parent.jsPlumbInstance.ready(resolve)
+            );
         },
 
         assignContextMenu: function() {
             var id = this.getId();
 
             // Create a contextmenu for the div
-            var contextOptions = [{
-                name: 'Remove this box',
-                fn: () => {
-                    this.view.c.removeBox(id);
+            var contextOptions = [
+                {
+                    name: "Remove this box",
+                    fn: () => {
+                        this.view.c.removeBox(id);
+                    }
                 }
-            }];
+            ];
             if (this.n.isModule() || this.n.isUI()) {
                 contextOptions.push({
-                    name: 'Duplicate this box',
+                    name: "Duplicate this box",
                     fn: () => {
                         this.view.c.duplicateBox(id);
                     }
@@ -46948,15 +47233,15 @@ var script = {
         },
 
         getVisibleInputs: function() {
-            return this.n.getInputsNames().filter((inputName) => {
+            return this.n.getInputsNames().filter(inputName => {
                 return this.n.isInputVisible(inputName);
-            })
+            });
         },
 
         getVisibleOutputs: function() {
-            return this.n.getOutputsNames().filter((outputName) => {
+            return this.n.getOutputsNames().filter(outputName => {
                 return this.n.isOutputVisible(outputName);
-            })
+            });
         },
 
         enterMetanode: function(e) {
@@ -46983,9 +47268,9 @@ var script = {
         }
     },
     watch: {
-        'app': {
+        app: {
             handler: () => {
-                console.log('graphVue.app changed');
+                console.log("graphVue.app changed");
             },
             deep: true
         }
@@ -47303,7 +47588,7 @@ var __vue_render__ = function() {
                     _c("b", [_vm._v("META")])
                   ])
                 : _vm._e(),
-              _vm._v(" " + _vm._s(_vm.n.graphId) + "\n            "),
+              _vm._v(" " + _vm._s(_vm.n.graphId) + "\n                "),
               _vm.n.isParallel()
                 ? _c("i", {
                     staticClass: "fas fa-server",
@@ -47356,9 +47641,9 @@ var __vue_render__ = function() {
                             { staticClass: "type", attrs: { "data-key": key } },
                             [
                               _vm._v(
-                                "\n                                    " +
+                                "\n                            " +
                                   _vm._s(_vm.n.getInputType(key)) +
-                                  "\n                                "
+                                  "\n                        "
                               )
                             ]
                           )
@@ -47458,7 +47743,7 @@ var __vue_render__ = function() {
                               _vm.n.hasCacheActivated()
                                 ? _c("span", [
                                     _vm._v(
-                                      "\n                                         "
+                                      "\n                                 "
                                     ),
                                     _c("i", {
                                       staticClass: "fa fa-hdd",
@@ -47499,9 +47784,9 @@ var __vue_render__ = function() {
                             { staticClass: "type", attrs: { "data-key": key } },
                             [
                               _vm._v(
-                                "\n                                    " +
+                                "\n                            " +
                                   _vm._s(_vm.n.getOutputType(key)) +
-                                  "\n                                "
+                                  "\n                        "
                               )
                             ]
                           )
@@ -47546,7 +47831,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-c892dbee_0", { source: "\n.card-ui {\r\n    background-color: #bff2ca !important;\n}\n.card-loop {\r\n    /* background-color: #e5e8ea!important; */\r\n    border: 5px double #dddddd;\r\n    border-width: 4px;\n}\n.card-input {\r\n    background-color: #f5d76e !important;\n}\n.card-output {\r\n    background-color: #ffb3a7 !important;\n}\n.box-inputs {\r\n    float: left;\r\n    padding-left: 2px;\r\n    padding-right: 5px;\r\n    vertical-align: top;\r\n    text-align: left;\n}\n.box-outputs {\r\n    float: right;\r\n    padding-left: 5px;\r\n    padding-right: 2px;\r\n    vertical-align: top;\r\n    text-align: right;\n}\n.dualbox-graph-canvas .card,\r\n.card-node {\r\n    /*border: 1px solid #dddddd;*/\r\n    box-shadow: 1px 1px 5px #716f6f;\r\n    opacity: 1;\r\n    cursor: pointer;\r\n    z-index: 20;\r\n    position: absolute;\r\n    -webkit-transition: -webkit-box-shadow 0.15s ease-in;\r\n    -moz-transition: -moz-box-shadow 0.15s ease-in;\r\n    -o-transition: -o-box-shadow 0.15s ease-in;\r\n    transition: box-shadow 0.15s ease-in;\r\n    color: #4d4d4d;\r\n    user-select: none;\r\n    padding: 0px 8px 0px 8px;\r\n    overflow: hidden;\r\n    background-color: #fff;\r\n    -moz-border-radius: 3px;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n    font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif;\n}\n.card-node .card-top {\r\n    padding-top: 2px;\n}\n.card-node .card-bottom {\r\n    padding-bottom: 2px;\r\n    text-align: center;\r\n    line-height: 14px;\r\n    white-space: nowrap;\n}\n.card-node hr {\r\n    margin-top: 2px;\r\n    margin-bottom: 2px;\r\n    border-color: rgba(0, 0, 0, 0.1);\r\n    margin-left: -8px;\r\n    margin-right: -8px;\n}\n.card-node:hover {\r\n    border-color: #80b2fc;\r\n    box-shadow: 1px 1px 10px #80b2fc;\n}\n.card-node.selected,\r\n.card-node.selected:hover {\r\n    border-color: #0066ff;\r\n    box-shadow: 1px 1px 10px #0066ff;\n}\n.card-node-incomplete {\r\n    box-shadow: 1px 1px 5px #dd6666 !important;\n}\n.input-not-resolvable {\r\n    color: #dd6666 !important;\n}\n.card-node .title {\r\n    vertical-align: top;\r\n    font-weight: bold;\n}\n.card-node .subtitle {\r\n    color: #929292;\r\n    font-size: 11px;\r\n    font-style: italic;\r\n    vertical-align: center;\r\n    font-family: tahoma, sans-serif;\n}\n.card-node .input {\r\n    font-size: 13px;\r\n    color: #8c8c8c;\n}\n.card-node .output {\r\n    font-size: 13px;\r\n    color: #8c8c8c;\r\n    text-align: right;\n}\n.card-node .jtk-endpoint.active svg circle {\r\n    /* fill: #99ff33 */\r\n    stroke: #59b300;\n}\n.point {\r\n    /* display: inline-block; */\r\n    display: none;\r\n    position: relative;\r\n    top: 3px;\r\n    margin-right: 5px;\r\n    margin-left: 5px;\n}\n.dualbox-io {\r\n    overflow: visible;\r\n    margin-left: -8px;\r\n    margin-right: -8px;\n}\n.box-inputs {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    position: relative;\r\n    padding: 0;\r\n    pointer-events: none;\n}\n.types {\r\n    color: #6c757d !important;\r\n    opacity: 0.7;\r\n    pointer-events: none;\n}\n.box-inputs .types {\r\n    display: inline-block;\n}\n.box-inputs .name {\r\n    display: inline-block;\n}\n.box-inputs .type {\r\n    display: block;\r\n    text-align: right;\n}\n.box-inputs .point {\r\n    display: block;\n}\n.box-inputs .name {\r\n    display: block;\n}\n.box-outputs {\r\n    display: flex;\r\n    justify-content: center;\r\n    position: relative;\r\n    padding: 0;\r\n    pointer-events: none;\n}\n.box-outputs .types {\r\n    display: inline-block;\n}\n.box-outputs .point {\r\n    display: inline-block;\n}\n.box-outputs .name {\r\n    display: inline-block;\n}\n.box-outputs .type {\r\n    display: block;\r\n    text-align: left;\n}\n.box-outputs .point {\r\n    display: block;\n}\n.box-outputs .name {\r\n    display: block;\n}\nspan.feedback {\r\n    font-weight: bold;\n}\n.event-dock {\r\n    background-color: rgb(136, 137, 138);\r\n    background-color: #a6a6a6;\r\n    width: calc(100% + 18px);\r\n    height: 12px;\r\n    z-index: 3 !important;\n}\n.event-dock-top {\r\n    margin-left: -9px;\r\n    margin-right: -9px;\r\n    margin-top: -3px;\r\n    border-top-left-radius: 4px;\r\n    border-top-right-radius: 4px;\r\n    margin-bottom: 4px;\n}\n.event-dock-bottom {\r\n    margin-left: -9px;\r\n    margin-right: -9px;\r\n    margin-bottom: -3px;\r\n    border-bottom-left-radius: 4px;\r\n    border-bottom-right-radius: 4px;\r\n    margin-top: 4px;\r\n    height: 11px;\r\n    /* shorter because of box-shadow */\n}\n.event-label {\r\n    z-index: 21;\r\n    padding-left: 15px;\r\n    transform: rotate(-90deg) translate(0%, -50%) !important;\r\n    transform-origin: 0% 0%;\r\n    color: #6c757d !important;\r\n    font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif;\r\n    font-size: 14px;\r\n    opacity: 0.7;\r\n    cursor: pointer;\n}\n.transparent {\r\n    opacity: 0.3 !important;\n}\n.card-node {\r\n    position: relative;\n}\n.card-comment {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    margin-top: -22px;\r\n    color: #f4ad42 !important;\n}\n.card-problem {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    margin-top: -22px;\r\n    color: red !important;\n}\n.card-snapshot {}\n.card-snapshot-idle {\r\n    border: 2px solid gray !important;\r\n    box-shadow: 1px 1px 5px gray !important;\r\n    opacity: 0.7 !important;\n}\n.card-snapshot-computing {\r\n    border: 2px solid darkgreen !important;\r\n    box-shadow: 1px 1px 5px darkgreen !important;\r\n    opacity: 1 !important;\n}\n.card-snapshot-awaiting-data {\r\n    border: 2px solid blue !important;\r\n    box-shadow: 1px 1px 5px blue !important;\r\n    opacity: 0.7 !important;\n}\n.card-snapshot-ready {\r\n    border: 2px solid lightgreen !important;\r\n    box-shadow: 1px 1px 5px lightgreen !important;\r\n    opacity: 1 !important;\n}\n.card-status {\r\n    position: absolute;\r\n    bottom: 0;\r\n    right: 0;\r\n    left: 0;\r\n    margin-bottom: -26px;\r\n    color: #f4ad42 !important;\r\n    font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif;\r\n    font-weight: bold;\r\n    text-align: center;\n}\n.card-status-idle {\r\n    color: gray !important;\r\n    min-width: 85px;\n}\n.card-status-computing {\r\n    color: darkgreen !important;\r\n    min-width: 110px;\n}\n.card-status-awaiting-data {\r\n    color: blue !important;\r\n    min-width: 85px;\n}\n.card-status-ready {\r\n    color: lightgreen !important;\r\n    min-width: 85px;\n}\n.btn-snapshot-details {\r\n    position: relative;\r\n    margin-top: -2px;\r\n    color: inherit;\n}\nspan.name {\r\n    overflow-wrap: normal;\n}\r\n", map: {"version":3,"sources":["C:\\Users\\maxim\\Projects\\dualbox\\editor\\js\\src\\v\\templates\\graphNode.vue"],"names":[],"mappings":";AACA;IACA,oCAAA;AACA;AAEA;IACA,yCAAA;IACA,0BAAA;IACA,iBAAA;AACA;AAEA;IACA,oCAAA;AACA;AAEA;IACA,oCAAA;AACA;AAEA;IACA,WAAA;IACA,iBAAA;IACA,kBAAA;IACA,mBAAA;IACA,gBAAA;AACA;AAEA;IACA,YAAA;IACA,iBAAA;IACA,kBAAA;IACA,mBAAA;IACA,iBAAA;AACA;AAEA;;IAEA,6BAAA;IACA,+BAAA;IACA,UAAA;IACA,eAAA;IACA,WAAA;IACA,kBAAA;IACA,oDAAA;IACA,8CAAA;IACA,0CAAA;IACA,oCAAA;IACA,cAAA;IACA,iBAAA;IACA,wBAAA;IACA,gBAAA;IACA,sBAAA;IACA,uBAAA;IACA,kBAAA;IACA,eAAA;IACA,2DAAA;AACA;AAEA;IACA,gBAAA;AACA;AAEA;IACA,mBAAA;IACA,kBAAA;IACA,iBAAA;IACA,mBAAA;AACA;AAEA;IACA,eAAA;IACA,kBAAA;IACA,gCAAA;IACA,iBAAA;IACA,kBAAA;AACA;AAEA;IACA,qBAAA;IACA,gCAAA;AACA;AAEA;;IAEA,qBAAA;IACA,gCAAA;AACA;AAEA;IACA,0CAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,mBAAA;IACA,iBAAA;AACA;AAEA;IACA,cAAA;IACA,eAAA;IACA,kBAAA;IACA,sBAAA;IACA,+BAAA;AACA;AAEA;IACA,eAAA;IACA,cAAA;AACA;AAEA;IACA,eAAA;IACA,cAAA;IACA,iBAAA;AACA;AAEA;IACA,kBAAA;IACA,eAAA;AACA;AAEA;IACA,2BAAA;IACA,aAAA;IACA,kBAAA;IACA,QAAA;IACA,iBAAA;IACA,gBAAA;AACA;AAEA;IACA,iBAAA;IACA,iBAAA;IACA,kBAAA;AACA;AAEA;IACA,aAAA;IACA,8BAAA;IACA,kBAAA;IACA,UAAA;IACA,oBAAA;AACA;AAEA;IACA,yBAAA;IACA,YAAA;IACA,oBAAA;AACA;AAEA;IACA,qBAAA;AACA;AAEA;IACA,qBAAA;AACA;AAEA;IACA,cAAA;IACA,iBAAA;AACA;AAEA;IACA,cAAA;AACA;AAEA;IACA,cAAA;AACA;AAEA;IACA,aAAA;IACA,uBAAA;IACA,kBAAA;IACA,UAAA;IACA,oBAAA;AACA;AAEA;IACA,qBAAA;AACA;AAEA;IACA,qBAAA;AACA;AAEA;IACA,qBAAA;AACA;AAEA;IACA,cAAA;IACA,gBAAA;AACA;AAEA;IACA,cAAA;AACA;AAEA;IACA,cAAA;AACA;AAEA;IACA,iBAAA;AACA;AAEA;IACA,oCAAA;IACA,yBAAA;IACA,wBAAA;IACA,YAAA;IACA,qBAAA;AACA;AAEA;IACA,iBAAA;IACA,kBAAA;IACA,gBAAA;IACA,2BAAA;IACA,4BAAA;IACA,kBAAA;AACA;AAEA;IACA,iBAAA;IACA,kBAAA;IACA,mBAAA;IACA,8BAAA;IACA,+BAAA;IACA,eAAA;IACA,YAAA;IACA,kCAAA;AACA;AAEA;IACA,WAAA;IACA,kBAAA;IACA,wDAAA;IACA,uBAAA;IACA,yBAAA;IACA,2DAAA;IACA,eAAA;IACA,YAAA;IACA,eAAA;AACA;AAEA;IACA,uBAAA;AACA;AAEA;IACA,kBAAA;AACA;AAEA;IACA,kBAAA;IACA,MAAA;IACA,QAAA;IACA,iBAAA;IACA,yBAAA;AACA;AAEA;IACA,kBAAA;IACA,MAAA;IACA,OAAA;IACA,iBAAA;IACA,qBAAA;AACA;AAEA,gBAAA;AAEA;IACA,iCAAA;IACA,uCAAA;IACA,uBAAA;AACA;AAEA;IACA,sCAAA;IACA,4CAAA;IACA,qBAAA;AACA;AAEA;IACA,iCAAA;IACA,uCAAA;IACA,uBAAA;AACA;AAEA;IACA,uCAAA;IACA,6CAAA;IACA,qBAAA;AACA;AAEA;IACA,kBAAA;IACA,SAAA;IACA,QAAA;IACA,OAAA;IACA,oBAAA;IACA,yBAAA;IACA,2DAAA;IACA,iBAAA;IACA,kBAAA;AACA;AAEA;IACA,sBAAA;IACA,eAAA;AACA;AAEA;IACA,2BAAA;IACA,gBAAA;AACA;AAEA;IACA,sBAAA;IACA,eAAA;AACA;AAEA;IACA,4BAAA;IACA,eAAA;AACA;AAEA;IACA,kBAAA;IACA,gBAAA;IACA,cAAA;AACA;AAEA;IACA,qBAAA;AACA","file":"graphNode.vue","sourcesContent":["<style>\r\n.card-ui {\r\n    background-color: #bff2ca !important;\r\n}\r\n\r\n.card-loop {\r\n    /* background-color: #e5e8ea!important; */\r\n    border: 5px double #dddddd;\r\n    border-width: 4px;\r\n}\r\n\r\n.card-input {\r\n    background-color: #f5d76e !important;\r\n}\r\n\r\n.card-output {\r\n    background-color: #ffb3a7 !important;\r\n}\r\n\r\n.box-inputs {\r\n    float: left;\r\n    padding-left: 2px;\r\n    padding-right: 5px;\r\n    vertical-align: top;\r\n    text-align: left;\r\n}\r\n\r\n.box-outputs {\r\n    float: right;\r\n    padding-left: 5px;\r\n    padding-right: 2px;\r\n    vertical-align: top;\r\n    text-align: right;\r\n}\r\n\r\n.dualbox-graph-canvas .card,\r\n.card-node {\r\n    /*border: 1px solid #dddddd;*/\r\n    box-shadow: 1px 1px 5px #716f6f;\r\n    opacity: 1;\r\n    cursor: pointer;\r\n    z-index: 20;\r\n    position: absolute;\r\n    -webkit-transition: -webkit-box-shadow 0.15s ease-in;\r\n    -moz-transition: -moz-box-shadow 0.15s ease-in;\r\n    -o-transition: -o-box-shadow 0.15s ease-in;\r\n    transition: box-shadow 0.15s ease-in;\r\n    color: #4d4d4d;\r\n    user-select: none;\r\n    padding: 0px 8px 0px 8px;\r\n    overflow: hidden;\r\n    background-color: #fff;\r\n    -moz-border-radius: 3px;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n    font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif;\r\n}\r\n\r\n.card-node .card-top {\r\n    padding-top: 2px;\r\n}\r\n\r\n.card-node .card-bottom {\r\n    padding-bottom: 2px;\r\n    text-align: center;\r\n    line-height: 14px;\r\n    white-space: nowrap;\r\n}\r\n\r\n.card-node hr {\r\n    margin-top: 2px;\r\n    margin-bottom: 2px;\r\n    border-color: rgba(0, 0, 0, 0.1);\r\n    margin-left: -8px;\r\n    margin-right: -8px;\r\n}\r\n\r\n.card-node:hover {\r\n    border-color: #80b2fc;\r\n    box-shadow: 1px 1px 10px #80b2fc;\r\n}\r\n\r\n.card-node.selected,\r\n.card-node.selected:hover {\r\n    border-color: #0066ff;\r\n    box-shadow: 1px 1px 10px #0066ff;\r\n}\r\n\r\n.card-node-incomplete {\r\n    box-shadow: 1px 1px 5px #dd6666 !important;\r\n}\r\n\r\n.input-not-resolvable {\r\n    color: #dd6666 !important;\r\n}\r\n\r\n.card-node .title {\r\n    vertical-align: top;\r\n    font-weight: bold;\r\n}\r\n\r\n.card-node .subtitle {\r\n    color: #929292;\r\n    font-size: 11px;\r\n    font-style: italic;\r\n    vertical-align: center;\r\n    font-family: tahoma, sans-serif;\r\n}\r\n\r\n.card-node .input {\r\n    font-size: 13px;\r\n    color: #8c8c8c;\r\n}\r\n\r\n.card-node .output {\r\n    font-size: 13px;\r\n    color: #8c8c8c;\r\n    text-align: right;\r\n}\r\n\r\n.card-node .jtk-endpoint.active svg circle {\r\n    /* fill: #99ff33 */\r\n    stroke: #59b300;\r\n}\r\n\r\n.point {\r\n    /* display: inline-block; */\r\n    display: none;\r\n    position: relative;\r\n    top: 3px;\r\n    margin-right: 5px;\r\n    margin-left: 5px;\r\n}\r\n\r\n.dualbox-io {\r\n    overflow: visible;\r\n    margin-left: -8px;\r\n    margin-right: -8px;\r\n}\r\n\r\n.box-inputs {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    position: relative;\r\n    padding: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n.types {\r\n    color: #6c757d !important;\r\n    opacity: 0.7;\r\n    pointer-events: none;\r\n}\r\n\r\n.box-inputs .types {\r\n    display: inline-block;\r\n}\r\n\r\n.box-inputs .name {\r\n    display: inline-block;\r\n}\r\n\r\n.box-inputs .type {\r\n    display: block;\r\n    text-align: right;\r\n}\r\n\r\n.box-inputs .point {\r\n    display: block;\r\n}\r\n\r\n.box-inputs .name {\r\n    display: block;\r\n}\r\n\r\n.box-outputs {\r\n    display: flex;\r\n    justify-content: center;\r\n    position: relative;\r\n    padding: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n.box-outputs .types {\r\n    display: inline-block;\r\n}\r\n\r\n.box-outputs .point {\r\n    display: inline-block;\r\n}\r\n\r\n.box-outputs .name {\r\n    display: inline-block;\r\n}\r\n\r\n.box-outputs .type {\r\n    display: block;\r\n    text-align: left;\r\n}\r\n\r\n.box-outputs .point {\r\n    display: block;\r\n}\r\n\r\n.box-outputs .name {\r\n    display: block;\r\n}\r\n\r\nspan.feedback {\r\n    font-weight: bold;\r\n}\r\n\r\n.event-dock {\r\n    background-color: rgb(136, 137, 138);\r\n    background-color: #a6a6a6;\r\n    width: calc(100% + 18px);\r\n    height: 12px;\r\n    z-index: 3 !important;\r\n}\r\n\r\n.event-dock-top {\r\n    margin-left: -9px;\r\n    margin-right: -9px;\r\n    margin-top: -3px;\r\n    border-top-left-radius: 4px;\r\n    border-top-right-radius: 4px;\r\n    margin-bottom: 4px;\r\n}\r\n\r\n.event-dock-bottom {\r\n    margin-left: -9px;\r\n    margin-right: -9px;\r\n    margin-bottom: -3px;\r\n    border-bottom-left-radius: 4px;\r\n    border-bottom-right-radius: 4px;\r\n    margin-top: 4px;\r\n    height: 11px;\r\n    /* shorter because of box-shadow */\r\n}\r\n\r\n.event-label {\r\n    z-index: 21;\r\n    padding-left: 15px;\r\n    transform: rotate(-90deg) translate(0%, -50%) !important;\r\n    transform-origin: 0% 0%;\r\n    color: #6c757d !important;\r\n    font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif;\r\n    font-size: 14px;\r\n    opacity: 0.7;\r\n    cursor: pointer;\r\n}\r\n\r\n.transparent {\r\n    opacity: 0.3 !important;\r\n}\r\n\r\n.card-node {\r\n    position: relative;\r\n}\r\n\r\n.card-comment {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    margin-top: -22px;\r\n    color: #f4ad42 !important;\r\n}\r\n\r\n.card-problem {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    margin-top: -22px;\r\n    color: red !important;\r\n}\r\n\r\n.card-snapshot {}\r\n\r\n.card-snapshot-idle {\r\n    border: 2px solid gray !important;\r\n    box-shadow: 1px 1px 5px gray !important;\r\n    opacity: 0.7 !important;\r\n}\r\n\r\n.card-snapshot-computing {\r\n    border: 2px solid darkgreen !important;\r\n    box-shadow: 1px 1px 5px darkgreen !important;\r\n    opacity: 1 !important;\r\n}\r\n\r\n.card-snapshot-awaiting-data {\r\n    border: 2px solid blue !important;\r\n    box-shadow: 1px 1px 5px blue !important;\r\n    opacity: 0.7 !important;\r\n}\r\n\r\n.card-snapshot-ready {\r\n    border: 2px solid lightgreen !important;\r\n    box-shadow: 1px 1px 5px lightgreen !important;\r\n    opacity: 1 !important;\r\n}\r\n\r\n.card-status {\r\n    position: absolute;\r\n    bottom: 0;\r\n    right: 0;\r\n    left: 0;\r\n    margin-bottom: -26px;\r\n    color: #f4ad42 !important;\r\n    font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif;\r\n    font-weight: bold;\r\n    text-align: center;\r\n}\r\n\r\n.card-status-idle {\r\n    color: gray !important;\r\n    min-width: 85px;\r\n}\r\n\r\n.card-status-computing {\r\n    color: darkgreen !important;\r\n    min-width: 110px;\r\n}\r\n\r\n.card-status-awaiting-data {\r\n    color: blue !important;\r\n    min-width: 85px;\r\n}\r\n\r\n.card-status-ready {\r\n    color: lightgreen !important;\r\n    min-width: 85px;\r\n}\r\n\r\n.btn-snapshot-details {\r\n    position: relative;\r\n    margin-top: -2px;\r\n    color: inherit;\r\n}\r\n\r\nspan.name {\r\n    overflow-wrap: normal;\r\n}\r\n</style>\r\n\r\n<template>\r\n    <div class=\"jtk-node card card-node contextmenu\" v-bind:class=\"{ 'card-loop': n.hasLoop(), 'card-ui': n.isUI(), 'card-metanode': n.isMetanode(), 'card-input': n.isInput(), 'card-output': n.isOutput(), 'card-snapshot': n.hasSnapshot(), 'card-snapshot-idle': n.hasSnapshot() && n.isSnapshotStatus(0), 'card-snapshot-computing': n.hasSnapshot() && n.isSnapshotStatus(1), 'card-snapshot-awaiting-data': n.hasSnapshot() && n.isSnapshotStatus(2), 'card-snapshot-ready': n.hasSnapshot() && n.isSnapshotStatus(3) }\"\r\n        v-bind:id=\"getId()\" v-bind:data-id=\"getId()\" v-bind:data-name=\"pkg.name\" style=\"overflow: visible;\">\r\n        <div v-if=\"n.hasComment()\">\r\n            <div class=\"card-comment\" data-toggle=\"tooltip\" data-placement=\"top\" :title=\"n.getComment()\">\r\n                <i class=\"fas fa-comment-alt\" data-container=\"body\"></i>\r\n            </div>\r\n        </div>\r\n\r\n        <div v-if=\"n.hasSnapshot()\">\r\n            <div class=\"card-status\">\r\n                <div v-if=\"n.isSnapshotStatus(0)\">\r\n                    <div class=\"card-status-idle\">\r\n                        <span>IDLE</span>\r\n                        <button class=\"btn btn-editor-xs btn-outline-secondary btn-outline-discrete btn-snapshot-details d-inline-block\" data-id=\"getId()\" v-on:click=\"openSnapshotDetails\"><i class=\"fas fa-info-circle\"></i></button>\r\n                    </div>\r\n                </div>\r\n\r\n                <div v-if=\"n.isSnapshotStatus(1)\">\r\n                    <div class=\"card-status-computing\">\r\n                        <span>COMPUTING</span>\r\n                        <button class=\"btn btn-editor-xs btn-outline-secondary btn-outline-discrete btn-snapshot-details d-inline-block\" data-id=\"getId()\" v-on:click=\"openSnapshotDetails\"><i class=\"fas fa-info-circle\"></i></button>\r\n                    </div>\r\n                </div>\r\n\r\n                <div v-if=\"n.isSnapshotStatus(2)\">\r\n                    <div class=\"card-status-awaiting-data\">\r\n                        <span>WAITING</span>\r\n                        <button class=\"btn btn-editor-xs btn-outline-secondary btn-outline-discrete btn-snapshot-details d-inline-block\" data-id=\"getId()\" v-on:click=\"openSnapshotDetails\"><i class=\"fas fa-info-circle\"></i></button>\r\n                    </div>\r\n                </div>\r\n\r\n                <div v-if=\"n.isSnapshotStatus(3)\">\r\n                    <div class=\"card-status-ready\">\r\n                        <span>READY</span>\r\n                        <button class=\"btn btn-editor-xs btn-outline-secondary btn-outline-discrete btn-snapshot-details d-inline-block\" data-id=\"getId()\" v-on:click=\"openSnapshotDetails\"><i class=\"fas fa-info-circle\"></i></button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div v-if=\"!example && n.isUI() && !n.isOnAPanel()\">\r\n            <div @click=\"registerToPanel\" class=\"card-problem\">\r\n                <i class=\"fas fa-exclamation-circle\" data-container=\"body\" data-toggle=\"popover\" data-placement=\"top\" data-content=\"This UI is not set in a panel. It won't have any effect. Go to the Interface tab to add it to a panel.\"></i>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"card-top\">\r\n            <div class=\"d-flex\">\r\n                <span class=\"title\" style=\"white-space: nowrap; margin-right: 5px;\">\r\n                            <span v-if=\"n.isMetanode()\" class=\"badge badge-secondary\"><b>META</b></span> {{n.graphId}}\r\n                <i v-if=\"n.isParallel()\" class=\"fas fa-server\" style=\"color: orange;\" title=\"this module is computed in a web worker\"></i>\r\n                </span>\r\n\r\n                <div class=\"ml-auto\">\r\n                    <button class=\"btn btn-outline-secondary btn-outline-discrete btn-editor-xs btn-settings\" v-on:click=\"openNodeSettings\"><i class=\"fas fa-cog\"></i></button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div v-if=\"!n.isInput() && !n.isOutput()\" class=\"card-center\">\r\n            <hr style=\"margin-bottom: 5px;\" />\r\n            <div class=\"dualbox-io\" style=\"overflow: visible;\">\r\n                <div class=\"inputs\" style=\"display: inline-block; float: left;\">\r\n                    <div class=\"box-inputs\">\r\n                        <div class=\"types\">\r\n                            <span class=\"type\" v-for=\"key in getVisibleInputs()\" v-bind:data-key=\"key\">\r\n                                        {{ n.getInputType(key) }}\r\n                                    </span>\r\n                        </div>\r\n                        <div class=\"points\">\r\n                            <div class=\"point\" v-for=\"key in getVisibleInputs()\" v-bind:data-key=\"key\" v-bind:data-type=\"n.getInputDef(key).type\" v-html=\"point\"></div>\r\n                        </div>\r\n                        <div class=\"names\">\r\n                            <span class=\"name\" v-for=\"key in getVisibleInputs()\" :class=\"{'feedback': n.isFeedbackTarget(key), 'input-not-resolvable': !example && !n.isInputResolvable(key) }\" v-bind:data-input=\"key\">\r\n                                        <span v-if=\"n.hasIterator(key)\">&lt;{{key}}&gt;</span>\r\n                            <span v-else>{{key}}</span>\r\n                            <small v-if=\"!n.isInputConst(key)\" data-toggle=\"tooltip\" data-trigger=\"hover\" title=\"this value will be cloned at execution time\"><i class=\"fas fa-clone transparent\"></i></small>\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"outputs\" style=\"display: inline-block; float: right\">\r\n                    <div class=\"box-outputs\">\r\n                        <div class=\"names\">\r\n                            <span class=\"name\" v-for=\"key in getVisibleOutputs()\" v-bind:class=\"{feedback: n.isFeedbackTarget(key)}\" v-bind:data-output=\"key\">\r\n                                        <span v-if=\"n.hasLoop() && n.hasFeedback(key)\">{{key}}</span>\r\n                            <span v-else-if=\"n.hasLoop() && !n.hasFeedback(key)\">&lt;{{key}}&gt;</span>\r\n                            <span v-else>{{key}}</span>\r\n\r\n                            <span v-if=\"n.hasCacheActivated()\">\r\n                                            &nbsp;<i class=\"fa fa-hdd\" title=\"This module has cache activated\"></i>\r\n                                        </span>\r\n                            </span>\r\n                        </div>\r\n                        <div class=\"points\">\r\n                            <div class=\"point\" v-for=\"key in getVisibleOutputs()\" v-bind:data-key=\"key\" v-bind:data-type=\"n.getOutputDef(key).type\" v-html=\"point\"></div>\r\n                        </div>\r\n                        <div class=\"types\">\r\n                            <span class=\"type\" v-for=\"key in getVisibleOutputs()\" v-bind:data-key=\"key\">\r\n                                        {{ n.getOutputType(key) }}\r\n                                    </span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <hr style=\"margin-top: 5px;\" />\r\n        <div class=\"card-bottom\">\r\n            <span class=\"subtitle\">{{ shortName }}</span>\r\n\r\n            <div v-if=\"n.isMetanode()\" class=\"d-inline-block\">\r\n                <button class=\"btn btn-outline-secondary btn-outline-discrete btn-editor-xs btn-enter-metanode\" v-on:click=\"enterMetanode\"><i class=\"fas fa-sign-in-alt\"></i></button>\r\n            </div>\r\n\r\n            <!--\r\n                        <div v-if=\"n.isUI()\" class=\"event-dock event-dock-bottom\"></div>\r\n                    -->\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport ContextMenu from '../ContextMenu';\r\nimport _ from 'lodash-es';\r\nimport dbutils from '../../m/DualboxUtils';\r\n\r\n// fix inputs types and output types position relatively to the div\r\n$.fn.fixCardDisplay = function() {\r\n    var offsetPoint = 12;\r\n    var offsetBorder = parseInt($(this).css(\"border-top-width\"));\r\n\r\n    if ($(this).find('.box-inputs').height() === 0 && $(this).find('.box-outputs').height() === 0) {\r\n        // if this card has no input/output, remove the card center\r\n        $(this).find('.card-center').remove();\r\n    } else {\r\n        // else, adjust the input/output display for endpoints\r\n        // 1) translate inputs by the right amount of pixels to have the circle on the line\r\n        var boxInputs = $(this).find('.box-inputs');\r\n\r\n        // fix css names width\r\n        var namesDiv = boxInputs.find('.names');\r\n        namesDiv.css('width', (namesDiv.width() + 1) + 'px');\r\n\r\n        // translate inputs to the left\r\n        var translateLeft = boxInputs.find('.types').width() + offsetPoint + offsetBorder / 2;\r\n        $(this).find('.box-inputs').css('transform', 'translateX(-' + translateLeft + 'px)');\r\n\r\n        // adjust inputs main div width\r\n        $(this).find('.inputs').width($(this).find('.inputs').width() - translateLeft + 10 /* margin */ );\r\n\r\n\r\n        // 2) translate outputs by the right amount of pixels to have the circle on the line\r\n        var boxOutputs = $(this).find('.box-outputs');\r\n\r\n        // fix css names with\r\n        var namesDiv = boxOutputs.find('.names');\r\n        namesDiv.css('width', (namesDiv.width() + 1) + 'px');\r\n\r\n        // translate inputs to the right\r\n        var translateRight = boxOutputs.find('.types').width() + offsetPoint + offsetBorder / 2;\r\n        $(this).find('.box-outputs').css('transform', 'translateX(' + translateRight + 'px)');\r\n\r\n        // adjust output main div width\r\n        $(this).find('.outputs').width($(this).find('.outputs').width() - translateRight + 10 /* margin */ );\r\n\r\n        // fix io width\r\n        //$('.dualbox-io').css('width', (($(this).find('.inputs').width() + $(this).find('.outputs').width()) + \"px\"));\r\n    }\r\n}\r\n\r\n// take the current width and add it as a css property\r\n$.fn.fixWidth = function() {\r\n    var width = $(this).width();\r\n    width += parseInt($(this).css('padding-right'));\r\n    width += parseInt($(this).css('padding-left'));\r\n    width += parseInt($(this).css('border-left-width'));\r\n    width += parseInt($(this).css('border-right-width'));\r\n    $(this).css('width', Math.ceil(width) + 'px');\r\n}\r\n\r\n// find position of element relative to an ancestor matching selector\r\n$.fn.positionFrom = function(selector) {\r\n    var ancestor = $(this).closest(selector);\r\n    var offset = $(this).offset();\r\n    var ancestorOffset = ancestor.offset();\r\n    return {\r\n        top: offset.top - ancestorOffset.top,\r\n        left: offset.left - ancestorOffset.left,\r\n    }\r\n}\r\n\r\nexport default {\r\n    props: [\r\n        \"id\", // the module id\r\n        \"pkg\", // the module package.json\r\n        \"n\", // the GraphNode object (from model)\r\n        \"example\", // true if this vue is used as an example display (no need to connect)\r\n        \"displayEvents\", // true if events should be displayed\r\n    ],\r\n    data: function() {\r\n        return {\r\n            shortName: \"\",\r\n            point: '<svg width=\"14\" height=\"14\" pointer-events=\"all\" position=\"absolute\" version=\"1.1\" xmlns=\"http://www.w3.org/1999/xhtml\"><circle cx=\"7\" cy=\"7\" r=\"5\" version=\"1.1\" xmlns=\"http://www.w3.org/1999/xhtml\" fill=\"#ffffff\" stroke=\"#727272\" style=\"\" stroke-width=\"2\"></circle></svg>',\r\n        }\r\n    },\r\n    beforeUpdate: function() {\r\n        //console.log('[UPDATING] ' + this.n.getUniqId());\r\n    },\r\n    destroyed: function() {\r\n        this.deactivateTooltip();\r\n        $('.tooltip').remove();\r\n    },\r\n    created: function() {\r\n        this.initialized = false;\r\n        this.view = window.dualboxEditor.v;\r\n\r\n        //console.log('[CREATED] ' + this.n.getUniqId());\r\n        // We compute the shortname of our box\r\n        if (this.n.isInput() || this.n.isOutput()) {\r\n            this.shortName = this.n.getType();\r\n        } else {\r\n            this.shortName = dbutils.shortName(this.pkg.name);\r\n        }\r\n    },\r\n    mounted: async function() {\r\n        //console.log('[MOUNTED] ' + this.n.getUniqId());\r\n        var div = $(this.$el);\r\n        div.fixCardDisplay();\r\n        div.ready(() => {\r\n            //if( !this.example ) {\r\n            div.fixWidth();\r\n            //}\r\n        });\r\n        this.activateTooltip();\r\n        return await this.initialize();\r\n    },\r\n    beforeUpdate: function() {\r\n        this.deactivateTooltip();\r\n    },\r\n    updated: async function() {\r\n        //console.log('[UPDATED] ' + this.n.getUniqId());\r\n\r\n        // we reset jsPlumb before app update (in graph.vue)\r\n        // so we need to initialize again\r\n        this.assignContextMenu();\r\n\r\n        $(this.$el).fixCardDisplay();\r\n        $(this.$el).ready(() => {\r\n            $(this.$el).fixWidth();\r\n            this.activateTooltip();\r\n        });\r\n        return await this.initialize();\r\n    },\r\n    activate: function() {\r\n        this.activateTooltip();\r\n    },\r\n    deactivate: function() {\r\n        this.deactivateTooltip();\r\n    },\r\n    methods: {\r\n        getId: function() {\r\n            // if this is an example graphNode, change our \"id\" to \"id-junk\"\r\n            // to avoid connection jsplumb conflicts with the real node\r\n            return this.example ? this.id + '-junk' : this.id;\r\n        },\r\n\r\n        activateTooltip: function() {\r\n            $(this.$el).find('[data-toggle=\"tooltip\"]').tooltip();\r\n        },\r\n\r\n        deactivateTooltip: function() {\r\n            $(this.$el).find('[data-toggle=\"tooltip\"]').tooltip(\"dispose\");\r\n        },\r\n\r\n        initialize: async function() {\r\n            var self = this;\r\n            var div = $(this.$el);\r\n            var id = this.getId();\r\n            var view = this.view;\r\n\r\n            this.initialized = false;\r\n\r\n            if (!this.example) {\r\n                // if we have a position, set it\r\n                var def = this.n.getDef();\r\n                var position = _.get(def, [\"graph\", \"position\"]);\r\n                if (position) {\r\n                    var jsPlumbElement = self.$parent.jsPlumbInstance.getElement(id);\r\n                    self.$parent.jsPlumbInstance.setPosition(jsPlumbElement, position);\r\n                }\r\n\r\n                // This needs to be registered before draggable\r\n                div.on('mousedown', function(e) {\r\n                    // if this div is not selected already, deselect the other divs\r\n                    if (!self.$parent.selector.isSelected(this)) {\r\n                        self.$parent.selector.deselect();\r\n                    }\r\n                });\r\n\r\n                await this.initializeJsPlumb();\r\n\r\n                div.click(function(e) {\r\n                    if (e.ctrlKey) {\r\n                        view.selector.toggleSelection(this);\r\n                    }\r\n                });\r\n\r\n                this.assignContextMenu();\r\n            }\r\n\r\n            return new Promise(resolve => {\r\n                div.ready(() => {\r\n                    //console.log('[INITIALIZED] ' + this.n.getUniqId());\r\n                    this.initialized = true;\r\n                    resolve();\r\n                });\r\n            });\r\n        },\r\n\r\n        initializeJsPlumb: function() {\r\n            var self = this;\r\n            var div = $(this.$el);\r\n            var id = this.getId();\r\n            var view = this.view;\r\n\r\n            if (!this.example) {\r\n                // If this node was never initialized in this jsplumb instance, do it\r\n                if (!_.get(this.$parent.jsPlumbInstance, [\"initializedNodes\", id])) {\r\n                    _.set(this.$parent.jsPlumbInstance, [\"initializedNodes\", id], true); // initialized\r\n\r\n                    if (this.n.isInput() || this.n.isOutput()) {\r\n                        var type = \"*\";\r\n                        var input = \"value\";\r\n                        var output = \"value\";\r\n                        var offsetTop = $(div).find('.card-top').height() + 12 /* hr size */ - 3;\r\n\r\n                        var uuid = [id, \"input\", input].join('#');\r\n                        var ep = this.$parent.jsPlumbInstance.addEndpoint(id, {\r\n                            isSource: false,\r\n                            isTarget: true,\r\n                            uuid: uuid,\r\n                            anchor: [0, 0, -1, 0, 0, offsetTop],\r\n                            maxConnections: 1,\r\n                            parameters: {\r\n                                type: \"data\",\r\n                                target: {\r\n                                    id: id,\r\n                                    input: output\r\n                                }\r\n                            }\r\n                        }, this.$parent.style.inputEndpoint);\r\n\r\n                        // add data to the endpoint div so we can identify it easier\r\n                        $(ep.canvas).attr('data-node', id);\r\n                        $(ep.canvas).attr('data-type', 'input');\r\n                        $(ep.canvas).attr('data-input', input);\r\n\r\n                        // bind tooltip\r\n                        $(ep.canvas).attr('data-toggle', \"tooltip\");\r\n                        $(ep.canvas).attr('data-trigger', \"hover\");\r\n                        $(ep.canvas).attr('data-placement', \"left\");\r\n                        $(ep.canvas).attr('data-html', \"true\");\r\n                        var inputType = view.m.getNode(id).getInputType(\"value\");\r\n                        $(ep.canvas).attr('title', \"Type: <b>\" + inputType + \"</b>\");\r\n                        $(ep.canvas).tooltip();\r\n\r\n                        // bind context menu to the endpoint\r\n                        $(ep.canvas).addClass('capture-right-click');\r\n                        $(ep.canvas).ready(function() {\r\n                            var menu = new ContextMenu(\".jtk-endpoint-anchor[data-node='\" + id.trim() + \"'][data-input='\" + input + \"']\", [{\r\n                                name: 'Create input for here',\r\n                                fn: () => {\r\n                                    view.c.createInputFromConnection(id, input);\r\n                                }\r\n                            }, ]);\r\n                        });\r\n\r\n                        var uuid = [id, \"output\", output].join('#');\r\n                        var ep = this.$parent.jsPlumbInstance.addEndpoint(id, {\r\n                            isSource: true,\r\n                            isTarget: false,\r\n                            uuid: uuid,\r\n                            anchor: [1, 0, 1, 0, 0, offsetTop],\r\n                            parameters: {\r\n                                type: \"data\",\r\n                                source: {\r\n                                    id: id,\r\n                                    output: output\r\n                                }\r\n                            }\r\n                        }, this.$parent.style.outputEndpoint);\r\n\r\n                        // add data to the endpoint div so we can identify it easier\r\n                        $(ep.canvas).attr('data-node', id);\r\n                        $(ep.canvas).attr('data-type', \"output\");\r\n                        $(ep.canvas).attr('data-output', output);\r\n\r\n                        // bind tooltip\r\n                        $(ep.canvas).attr('data-toggle', \"tooltip\");\r\n                        $(ep.canvas).attr('data-trigger', \"hover\");\r\n                        $(ep.canvas).attr('data-placement', \"right\");\r\n                        $(ep.canvas).attr('data-html', \"true\");\r\n                        var outputType = view.m.getNode(id).getOutputType(\"value\");\r\n                        $(ep.canvas).attr('title', \"Type: <b>\" + outputType + \"</b>\");\r\n                        $(ep.canvas).tooltip();\r\n\r\n                        // bind context menu to the endpoint\r\n                        $(ep.canvas).addClass('capture-right-click');\r\n                        $(ep.canvas).ready(function() {\r\n                            var menu = new ContextMenu(\".jtk-endpoint-anchor[data-node='\" + id.trim() + \"'][data-output='\" + output.trim() + \"']\", [{\r\n                                name: 'Create output for here',\r\n                                fn: () => {\r\n                                    view.c.createOutputFromConnection(id, output);\r\n                                }\r\n                            }, ]);\r\n                        });\r\n                    } else {\r\n                        // add input endoints\r\n                        div.find('.box-inputs').find('.point').each(function(index) {\r\n                            $(this).css('visibility', 'hidden').css('opacity', '0'); // replaced by jsPlumb point\r\n\r\n                            var input = div.find('.box-inputs').find('.name').eq(index).attr('data-input').trim();\r\n                            var type = view.m.getNode(id).getInputType(input);\r\n\r\n                            var offsetTop = $(this).positionFrom('.card').top + $(this).height() / 2 - 3;\r\n                            var uuid = [id, \"input\", $(this).data('key')].join('#');\r\n                            var ep = self.$parent.jsPlumbInstance.addEndpoint(id, {\r\n                                isSource: false,\r\n                                isTarget: true,\r\n                                uuid: uuid,\r\n                                anchor: [0, 0, -1, 0, 0, offsetTop],\r\n                                maxConnections: 1,\r\n                                parameters: {\r\n                                    type: \"data\",\r\n                                    target: {\r\n                                        id: id,\r\n                                        input: $(this).data('key')\r\n                                    }\r\n                                }\r\n                            }, self.$parent.style.inputEndpoint);\r\n\r\n                            // add data to the endpoint div so we can identify it easier\r\n                            $(ep.canvas).attr('data-node', id);\r\n                            $(ep.canvas).attr('data-type', 'input');\r\n                            $(ep.canvas).attr('data-input', input);\r\n\r\n                            // bind tooltip\r\n                            $(ep.canvas).attr('data-toggle', \"tooltip\");\r\n                            $(ep.canvas).attr('data-trigger', \"hover\");\r\n                            $(ep.canvas).attr('data-placement', \"left\");\r\n                            $(ep.canvas).attr('data-html', \"true\");\r\n                            $(ep.canvas).attr('title', \"Type:  <b>\" + type + \"</b>\");\r\n                            $(ep.canvas).tooltip();\r\n\r\n                            // bind context menu to the endpoint\r\n                            $(ep.canvas).addClass('capture-right-click');\r\n                            $(ep.canvas).ready(function() {\r\n                                var menu = new ContextMenu(\".jtk-endpoint-anchor[data-node='\" + id.trim() + \"'][data-input='\" + input.trim() + \"']\", [{\r\n                                    name: 'Create input for here',\r\n                                    fn: () => {\r\n                                        view.c.createInputFromConnection(id, input);\r\n                                    }\r\n                                }, ]);\r\n                            });\r\n                        });\r\n\r\n                        // add output endpoints\r\n                        div.find('.box-outputs').find('.point').each(function(index) {\r\n                            $(this).css('visibility', 'hidden').css('opacity', '0'); // replaced by jsPlumb point\r\n\r\n                            var output = div.find('.box-outputs').find('.name').eq(index).attr('data-output').trim();\r\n                            var type = view.m.getNode(id).getOutputType(output);\r\n\r\n                            var offsetTop = $(this).positionFrom('.card').top + $(this).height() / 2 - 3;\r\n                            var uuid = [id, \"output\", $(this).data('key')].join('#');\r\n                            var ep = self.$parent.jsPlumbInstance.addEndpoint(id, {\r\n                                isSource: true,\r\n                                isTarget: false,\r\n                                uuid: uuid,\r\n                                anchor: [1, 0, 1, 0, 0, offsetTop],\r\n                                parameters: {\r\n                                    type: \"data\",\r\n                                    source: {\r\n                                        id: id,\r\n                                        output: $(this).data('key')\r\n                                    }\r\n                                }\r\n                            }, self.$parent.style.outputEndpoint);\r\n\r\n                            // add data to the endpoint div so we can identify it easier\r\n                            $(ep.canvas).attr('data-node', id);\r\n                            $(ep.canvas).attr('data-type', \"output\");\r\n                            $(ep.canvas).attr('data-output', output);\r\n\r\n                            // bind tooltip\r\n                            $(ep.canvas).attr('data-toggle', \"tooltip\");\r\n                            $(ep.canvas).attr('data-trigger', \"hover\");\r\n                            $(ep.canvas).attr('data-placement', \"right\");\r\n                            $(ep.canvas).attr('data-html', \"true\");\r\n                            $(ep.canvas).attr('title', \"Type: <b>\" + type + \"</b>\");\r\n                            $(ep.canvas).tooltip();\r\n\r\n                            // bind context menu to the endpoint\r\n                            $(ep.canvas).addClass('capture-right-click');\r\n                            $(ep.canvas).ready(function() {\r\n                                var menu = new ContextMenu(\".jtk-endpoint-anchor[data-node='\" + id.trim() + \"'][data-output='\" + output.trim() + \"']\", [{\r\n                                    name: 'Create output for here',\r\n                                    fn: () => {\r\n                                        view.c.createOutputFromConnection(id, output);\r\n                                    }\r\n                                }, ]);\r\n                            });\r\n                        });\r\n\r\n                        if (this.n.isUI() && this.displayEvents) {\r\n                            // Make this a target for events\r\n                            this.$parent.jsPlumbInstance.makeTarget(id, {\r\n                                isSource: false,\r\n                                isTarget: true,\r\n                                uniqueEndpoint: false,\r\n                                anchor: \"Continuous\",\r\n                                uuid: id + \"#event-in\",\r\n                                paintStyle: { fill: \"green\", radius: 3, stroke: \"#727272\", strokeWidth: 1 },\r\n                                parameters: {\r\n                                    type: \"event\",\r\n                                    target: { \"id\": id }\r\n                                },\r\n                            }, self.$parent.style.eventEndpoint);\r\n\r\n                            // Create an enpoint to create a new event\r\n                            var ep = this.$parent.jsPlumbInstance.addEndpoint(id, {\r\n                                isSource: true,\r\n                                isTarget: false,\r\n                                uuid: id + \"#event-out\",\r\n                                anchor: [1, 1, 0, 1, 0, -10],\r\n                                parameters: {\r\n                                    type: \"event\",\r\n                                    source: { \"id\": id }\r\n                                },\r\n                                paintStyle: { fill: \"green\", radius: 3, stroke: \"#727272\", strokeWidth: 1 },\r\n                            }, this.$parent.style.eventEndpoint);\r\n\r\n                            // Add overlay here so we don't mess with splitConnection\r\n                            ep.addOverlay([\"PlainArrow\", { width: 15, length: 15, location: 1, id: \"arrow\" }]);\r\n\r\n                            $(ep.canvas).attr('data-toggle', \"tooltip\");\r\n                            $(ep.canvas).attr('data-trigger', \"hover\");\r\n                            $(ep.canvas).attr('data-placement', \"bottom\");\r\n                            $(ep.canvas).attr('data-html', \"true\");\r\n                            $(ep.canvas).attr('title', \"Connect from here ito add an event that will be triggered when this box is done computing.\");\r\n                            $(ep.canvas).tooltip();\r\n                        }\r\n                    }\r\n\r\n                    // Make the div draggable\r\n                    this.$parent.jsPlumbInstance.draggable(div, {\r\n                        //containment:true, // not allowed outside of container div\r\n                        drag: function(e) {\r\n                            // TODO: bug. After a repaint(), jsPlumb seems to be broken (connections dont follow on div drag)\r\n                            // It doesn't occur on jsPlumb.reset() instead of creating another instance on beforeUpdate(),\r\n                            // (as it should be), but we can't do that, because JsPlumb is broken on zoom otherwise...\r\n                            // One of thoses problem may be fixed later by updating jsPlumb...\r\n                            // Note: this \"fix\" may affect performances on drag, maybe a setTimeout will do\r\n                            //self.$parent.jsPlumbInstance.repaintEverything();\r\n                            self.$parent.jsPlumbInstance.repaint(id);\r\n                        },\r\n                        stop: function(e) {\r\n                            // resize the canvas if necessary\r\n                            self.$parent.canvasSizeHandler.debouncedResize();\r\n\r\n                            if (self.$parent.selector.isMultipleSelectionActive()) {\r\n                                // We just dropped a bunch of divs, ajust all their positions\r\n                                self.view.m.batch(() => {\r\n                                    self.$parent.selector.each(div => {\r\n                                        var pos = self.$parent.jsPlumbInstance.getPosition(div);\r\n                                        view.m.getNode($(div).attr('id')).setPosition(pos);\r\n                                    });\r\n                                });\r\n                            } else {\r\n                                // We just dropped this one, set the new position in the graph model\r\n                                var el = self.$parent.jsPlumbInstance.getElement(id);\r\n                                $(el).ready(function() {\r\n                                    var pos = self.$parent.jsPlumbInstance.getPosition(el);\r\n                                    view.m.getNode(id).setPosition(pos);\r\n                                });\r\n                            }\r\n                        }\r\n                    });\r\n                }\r\n            }\r\n\r\n            return new Promise((resolve) => this.$parent.jsPlumbInstance.ready(resolve));\r\n        },\r\n\r\n        assignContextMenu: function() {\r\n            var id = this.getId();\r\n\r\n            // Create a contextmenu for the div\r\n            var contextOptions = [{\r\n                name: 'Remove this box',\r\n                fn: () => {\r\n                    this.view.c.removeBox(id);\r\n                }\r\n            }];\r\n            if (this.n.isModule() || this.n.isUI()) {\r\n                contextOptions.push({\r\n                    name: 'Duplicate this box',\r\n                    fn: () => {\r\n                        this.view.c.duplicateBox(id);\r\n                    }\r\n                });\r\n            }\r\n            var nodeMenu = new ContextMenu(\"#\" + id, contextOptions);\r\n        },\r\n\r\n        htmlentities: function(s) {\r\n            return this.view.utils.htmlentities(s);\r\n        },\r\n\r\n        getVisibleInputs: function() {\r\n            return this.n.getInputsNames().filter((inputName) => {\r\n                return this.n.isInputVisible(inputName);\r\n            })\r\n        },\r\n\r\n        getVisibleOutputs: function() {\r\n            return this.n.getOutputsNames().filter((outputName) => {\r\n                return this.n.isOutputVisible(outputName);\r\n            })\r\n        },\r\n\r\n        enterMetanode: function(e) {\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n\r\n            this.view.c.enterMetanode(this.id);\r\n        },\r\n\r\n        openNodeSettings: function(e) {\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n            this.view.openBoxSettings(this.id);\r\n        },\r\n\r\n        openSnapshotDetails: async function(e) {\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n            await this.view.openDebug(this.id);\r\n        },\r\n\r\n        registerToPanel: async function(e) {\r\n            await this.view.c.registerNodeToInterface(this.id);\r\n        }\r\n    },\r\n    watch: {\r\n        'app': {\r\n            handler: () => {\r\n                console.log('graphVue.app changed');\r\n            },\r\n            deep: true\r\n        }\r\n    }\r\n}\r\n</script>\r\n"]}, media: undefined });
+    inject("data-v-4f0778c6_0", { source: "\n.card-ui {\r\n    background-color: #bff2ca !important;\n}\n.card-loop {\r\n    /* background-color: #e5e8ea!important; */\r\n    border: 5px double #dddddd;\r\n    border-width: 4px;\n}\n.card-input {\r\n    background-color: #f5d76e !important;\n}\n.card-output {\r\n    background-color: #ffb3a7 !important;\n}\n.box-inputs {\r\n    float: left;\r\n    padding-left: 2px;\r\n    padding-right: 5px;\r\n    vertical-align: top;\r\n    text-align: left;\n}\n.box-outputs {\r\n    float: right;\r\n    padding-left: 5px;\r\n    padding-right: 2px;\r\n    vertical-align: top;\r\n    text-align: right;\n}\n.dualbox-graph-canvas .card,\r\n.card-node {\r\n    /*border: 1px solid #dddddd;*/\r\n    box-shadow: 1px 1px 5px #716f6f;\r\n    opacity: 1;\r\n    cursor: pointer;\r\n    z-index: 20;\r\n    position: absolute;\r\n    -webkit-transition: -webkit-box-shadow 0.15s ease-in;\r\n    -moz-transition: -moz-box-shadow 0.15s ease-in;\r\n    -o-transition: -o-box-shadow 0.15s ease-in;\r\n    transition: box-shadow 0.15s ease-in;\r\n    color: #4d4d4d;\r\n    user-select: none;\r\n    padding: 0px 8px 0px 8px;\r\n    overflow: hidden;\r\n    background-color: #fff;\r\n    -moz-border-radius: 3px;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n    font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif;\n}\n.card-node .card-top {\r\n    padding-top: 2px;\n}\n.card-node .card-bottom {\r\n    padding-bottom: 2px;\r\n    text-align: center;\r\n    line-height: 14px;\r\n    white-space: nowrap;\n}\n.card-node hr {\r\n    margin-top: 2px;\r\n    margin-bottom: 2px;\r\n    border-color: rgba(0, 0, 0, 0.1);\r\n    margin-left: -8px;\r\n    margin-right: -8px;\n}\n.card-node:hover {\r\n    border-color: #80b2fc;\r\n    box-shadow: 1px 1px 10px #80b2fc;\n}\n.card-node.selected,\r\n.card-node.selected:hover {\r\n    border-color: #0066ff;\r\n    box-shadow: 1px 1px 10px #0066ff;\n}\n.card-node-incomplete {\r\n    box-shadow: 1px 1px 5px #dd6666 !important;\n}\n.input-not-resolvable {\r\n    color: #dd6666 !important;\n}\n.card-node .title {\r\n    vertical-align: top;\r\n    font-weight: bold;\n}\n.card-node .subtitle {\r\n    color: #929292;\r\n    font-size: 11px;\r\n    font-style: italic;\r\n    vertical-align: center;\r\n    font-family: tahoma, sans-serif;\n}\n.card-node .input {\r\n    font-size: 13px;\r\n    color: #8c8c8c;\n}\n.card-node .output {\r\n    font-size: 13px;\r\n    color: #8c8c8c;\r\n    text-align: right;\n}\n.card-node .jtk-endpoint.active svg circle {\r\n    /* fill: #99ff33 */\r\n    stroke: #59b300;\n}\n.point {\r\n    /* display: inline-block; */\r\n    display: none;\r\n    position: relative;\r\n    top: 3px;\r\n    margin-right: 5px;\r\n    margin-left: 5px;\n}\n.dualbox-io {\r\n    overflow: visible;\r\n    margin-left: -8px;\r\n    margin-right: -8px;\n}\n.box-inputs {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    position: relative;\r\n    padding: 0;\r\n    pointer-events: none;\n}\n.types {\r\n    color: #6c757d !important;\r\n    opacity: 0.7;\r\n    pointer-events: none;\n}\n.box-inputs .types {\r\n    display: inline-block;\n}\n.box-inputs .name {\r\n    display: inline-block;\n}\n.box-inputs .type {\r\n    display: block;\r\n    text-align: right;\n}\n.box-inputs .point {\r\n    display: block;\n}\n.box-inputs .name {\r\n    display: block;\n}\n.box-outputs {\r\n    display: flex;\r\n    justify-content: center;\r\n    position: relative;\r\n    padding: 0;\r\n    pointer-events: none;\n}\n.box-outputs .types {\r\n    display: inline-block;\n}\n.box-outputs .point {\r\n    display: inline-block;\n}\n.box-outputs .name {\r\n    display: inline-block;\n}\n.box-outputs .type {\r\n    display: block;\r\n    text-align: left;\n}\n.box-outputs .point {\r\n    display: block;\n}\n.box-outputs .name {\r\n    display: block;\n}\nspan.feedback {\r\n    font-weight: bold;\n}\n.event-dock {\r\n    background-color: rgb(136, 137, 138);\r\n    background-color: #a6a6a6;\r\n    width: calc(100% + 18px);\r\n    height: 12px;\r\n    z-index: 3 !important;\n}\n.event-dock-top {\r\n    margin-left: -9px;\r\n    margin-right: -9px;\r\n    margin-top: -3px;\r\n    border-top-left-radius: 4px;\r\n    border-top-right-radius: 4px;\r\n    margin-bottom: 4px;\n}\n.event-dock-bottom {\r\n    margin-left: -9px;\r\n    margin-right: -9px;\r\n    margin-bottom: -3px;\r\n    border-bottom-left-radius: 4px;\r\n    border-bottom-right-radius: 4px;\r\n    margin-top: 4px;\r\n    height: 11px;\r\n    /* shorter because of box-shadow */\n}\n.event-label {\r\n    z-index: 21;\r\n    padding-left: 15px;\r\n    transform: rotate(-90deg) translate(0%, -50%) !important;\r\n    transform-origin: 0% 0%;\r\n    color: #6c757d !important;\r\n    font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif;\r\n    font-size: 14px;\r\n    opacity: 0.7;\r\n    cursor: pointer;\n}\n.transparent {\r\n    opacity: 0.3 !important;\n}\n.card-node {\r\n    position: relative;\n}\n.card-comment {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    margin-top: -22px;\r\n    color: #f4ad42 !important;\n}\n.card-problem {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    margin-top: -22px;\r\n    color: red !important;\n}\n.card-snapshot {\n}\n.card-snapshot-idle {\r\n    border: 2px solid gray !important;\r\n    box-shadow: 1px 1px 5px gray !important;\r\n    opacity: 0.7 !important;\n}\n.card-snapshot-computing {\r\n    border: 2px solid darkgreen !important;\r\n    box-shadow: 1px 1px 5px darkgreen !important;\r\n    opacity: 1 !important;\n}\n.card-snapshot-awaiting-data {\r\n    border: 2px solid blue !important;\r\n    box-shadow: 1px 1px 5px blue !important;\r\n    opacity: 0.7 !important;\n}\n.card-snapshot-ready {\r\n    border: 2px solid lightgreen !important;\r\n    box-shadow: 1px 1px 5px lightgreen !important;\r\n    opacity: 1 !important;\n}\n.card-status {\r\n    position: absolute;\r\n    bottom: 0;\r\n    right: 0;\r\n    left: 0;\r\n    margin-bottom: -26px;\r\n    color: #f4ad42 !important;\r\n    font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif;\r\n    font-weight: bold;\r\n    text-align: center;\n}\n.card-status-idle {\r\n    color: gray !important;\r\n    min-width: 85px;\n}\n.card-status-computing {\r\n    color: darkgreen !important;\r\n    min-width: 110px;\n}\n.card-status-awaiting-data {\r\n    color: blue !important;\r\n    min-width: 85px;\n}\n.card-status-ready {\r\n    color: lightgreen !important;\r\n    min-width: 85px;\n}\n.btn-snapshot-details {\r\n    position: relative;\r\n    margin-top: -2px;\r\n    color: inherit;\n}\nspan.name {\r\n    overflow-wrap: normal;\n}\r\n", map: {"version":3,"sources":["C:\\Users\\maxim\\Projects\\dualbox\\editor\\js\\src\\v\\templates\\graphNode.vue"],"names":[],"mappings":";AACA;IACA,oCAAA;AACA;AAEA;IACA,yCAAA;IACA,0BAAA;IACA,iBAAA;AACA;AAEA;IACA,oCAAA;AACA;AAEA;IACA,oCAAA;AACA;AAEA;IACA,WAAA;IACA,iBAAA;IACA,kBAAA;IACA,mBAAA;IACA,gBAAA;AACA;AAEA;IACA,YAAA;IACA,iBAAA;IACA,kBAAA;IACA,mBAAA;IACA,iBAAA;AACA;AAEA;;IAEA,6BAAA;IACA,+BAAA;IACA,UAAA;IACA,eAAA;IACA,WAAA;IACA,kBAAA;IACA,oDAAA;IACA,8CAAA;IACA,0CAAA;IACA,oCAAA;IACA,cAAA;IACA,iBAAA;IACA,wBAAA;IACA,gBAAA;IACA,sBAAA;IACA,uBAAA;IACA,kBAAA;IACA,eAAA;IACA,2DAAA;AACA;AAEA;IACA,gBAAA;AACA;AAEA;IACA,mBAAA;IACA,kBAAA;IACA,iBAAA;IACA,mBAAA;AACA;AAEA;IACA,eAAA;IACA,kBAAA;IACA,gCAAA;IACA,iBAAA;IACA,kBAAA;AACA;AAEA;IACA,qBAAA;IACA,gCAAA;AACA;AAEA;;IAEA,qBAAA;IACA,gCAAA;AACA;AAEA;IACA,0CAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,mBAAA;IACA,iBAAA;AACA;AAEA;IACA,cAAA;IACA,eAAA;IACA,kBAAA;IACA,sBAAA;IACA,+BAAA;AACA;AAEA;IACA,eAAA;IACA,cAAA;AACA;AAEA;IACA,eAAA;IACA,cAAA;IACA,iBAAA;AACA;AAEA;IACA,kBAAA;IACA,eAAA;AACA;AAEA;IACA,2BAAA;IACA,aAAA;IACA,kBAAA;IACA,QAAA;IACA,iBAAA;IACA,gBAAA;AACA;AAEA;IACA,iBAAA;IACA,iBAAA;IACA,kBAAA;AACA;AAEA;IACA,aAAA;IACA,8BAAA;IACA,kBAAA;IACA,UAAA;IACA,oBAAA;AACA;AAEA;IACA,yBAAA;IACA,YAAA;IACA,oBAAA;AACA;AAEA;IACA,qBAAA;AACA;AAEA;IACA,qBAAA;AACA;AAEA;IACA,cAAA;IACA,iBAAA;AACA;AAEA;IACA,cAAA;AACA;AAEA;IACA,cAAA;AACA;AAEA;IACA,aAAA;IACA,uBAAA;IACA,kBAAA;IACA,UAAA;IACA,oBAAA;AACA;AAEA;IACA,qBAAA;AACA;AAEA;IACA,qBAAA;AACA;AAEA;IACA,qBAAA;AACA;AAEA;IACA,cAAA;IACA,gBAAA;AACA;AAEA;IACA,cAAA;AACA;AAEA;IACA,cAAA;AACA;AAEA;IACA,iBAAA;AACA;AAEA;IACA,oCAAA;IACA,yBAAA;IACA,wBAAA;IACA,YAAA;IACA,qBAAA;AACA;AAEA;IACA,iBAAA;IACA,kBAAA;IACA,gBAAA;IACA,2BAAA;IACA,4BAAA;IACA,kBAAA;AACA;AAEA;IACA,iBAAA;IACA,kBAAA;IACA,mBAAA;IACA,8BAAA;IACA,+BAAA;IACA,eAAA;IACA,YAAA;IACA,kCAAA;AACA;AAEA;IACA,WAAA;IACA,kBAAA;IACA,wDAAA;IACA,uBAAA;IACA,yBAAA;IACA,2DAAA;IACA,eAAA;IACA,YAAA;IACA,eAAA;AACA;AAEA;IACA,uBAAA;AACA;AAEA;IACA,kBAAA;AACA;AAEA;IACA,kBAAA;IACA,MAAA;IACA,QAAA;IACA,iBAAA;IACA,yBAAA;AACA;AAEA;IACA,kBAAA;IACA,MAAA;IACA,OAAA;IACA,iBAAA;IACA,qBAAA;AACA;AAEA;AACA;AAEA;IACA,iCAAA;IACA,uCAAA;IACA,uBAAA;AACA;AAEA;IACA,sCAAA;IACA,4CAAA;IACA,qBAAA;AACA;AAEA;IACA,iCAAA;IACA,uCAAA;IACA,uBAAA;AACA;AAEA;IACA,uCAAA;IACA,6CAAA;IACA,qBAAA;AACA;AAEA;IACA,kBAAA;IACA,SAAA;IACA,QAAA;IACA,OAAA;IACA,oBAAA;IACA,yBAAA;IACA,2DAAA;IACA,iBAAA;IACA,kBAAA;AACA;AAEA;IACA,sBAAA;IACA,eAAA;AACA;AAEA;IACA,2BAAA;IACA,gBAAA;AACA;AAEA;IACA,sBAAA;IACA,eAAA;AACA;AAEA;IACA,4BAAA;IACA,eAAA;AACA;AAEA;IACA,kBAAA;IACA,gBAAA;IACA,cAAA;AACA;AAEA;IACA,qBAAA;AACA","file":"graphNode.vue","sourcesContent":["<style>\r\n.card-ui {\r\n    background-color: #bff2ca !important;\r\n}\r\n\r\n.card-loop {\r\n    /* background-color: #e5e8ea!important; */\r\n    border: 5px double #dddddd;\r\n    border-width: 4px;\r\n}\r\n\r\n.card-input {\r\n    background-color: #f5d76e !important;\r\n}\r\n\r\n.card-output {\r\n    background-color: #ffb3a7 !important;\r\n}\r\n\r\n.box-inputs {\r\n    float: left;\r\n    padding-left: 2px;\r\n    padding-right: 5px;\r\n    vertical-align: top;\r\n    text-align: left;\r\n}\r\n\r\n.box-outputs {\r\n    float: right;\r\n    padding-left: 5px;\r\n    padding-right: 2px;\r\n    vertical-align: top;\r\n    text-align: right;\r\n}\r\n\r\n.dualbox-graph-canvas .card,\r\n.card-node {\r\n    /*border: 1px solid #dddddd;*/\r\n    box-shadow: 1px 1px 5px #716f6f;\r\n    opacity: 1;\r\n    cursor: pointer;\r\n    z-index: 20;\r\n    position: absolute;\r\n    -webkit-transition: -webkit-box-shadow 0.15s ease-in;\r\n    -moz-transition: -moz-box-shadow 0.15s ease-in;\r\n    -o-transition: -o-box-shadow 0.15s ease-in;\r\n    transition: box-shadow 0.15s ease-in;\r\n    color: #4d4d4d;\r\n    user-select: none;\r\n    padding: 0px 8px 0px 8px;\r\n    overflow: hidden;\r\n    background-color: #fff;\r\n    -moz-border-radius: 3px;\r\n    border-radius: 3px;\r\n    font-size: 14px;\r\n    font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif;\r\n}\r\n\r\n.card-node .card-top {\r\n    padding-top: 2px;\r\n}\r\n\r\n.card-node .card-bottom {\r\n    padding-bottom: 2px;\r\n    text-align: center;\r\n    line-height: 14px;\r\n    white-space: nowrap;\r\n}\r\n\r\n.card-node hr {\r\n    margin-top: 2px;\r\n    margin-bottom: 2px;\r\n    border-color: rgba(0, 0, 0, 0.1);\r\n    margin-left: -8px;\r\n    margin-right: -8px;\r\n}\r\n\r\n.card-node:hover {\r\n    border-color: #80b2fc;\r\n    box-shadow: 1px 1px 10px #80b2fc;\r\n}\r\n\r\n.card-node.selected,\r\n.card-node.selected:hover {\r\n    border-color: #0066ff;\r\n    box-shadow: 1px 1px 10px #0066ff;\r\n}\r\n\r\n.card-node-incomplete {\r\n    box-shadow: 1px 1px 5px #dd6666 !important;\r\n}\r\n\r\n.input-not-resolvable {\r\n    color: #dd6666 !important;\r\n}\r\n\r\n.card-node .title {\r\n    vertical-align: top;\r\n    font-weight: bold;\r\n}\r\n\r\n.card-node .subtitle {\r\n    color: #929292;\r\n    font-size: 11px;\r\n    font-style: italic;\r\n    vertical-align: center;\r\n    font-family: tahoma, sans-serif;\r\n}\r\n\r\n.card-node .input {\r\n    font-size: 13px;\r\n    color: #8c8c8c;\r\n}\r\n\r\n.card-node .output {\r\n    font-size: 13px;\r\n    color: #8c8c8c;\r\n    text-align: right;\r\n}\r\n\r\n.card-node .jtk-endpoint.active svg circle {\r\n    /* fill: #99ff33 */\r\n    stroke: #59b300;\r\n}\r\n\r\n.point {\r\n    /* display: inline-block; */\r\n    display: none;\r\n    position: relative;\r\n    top: 3px;\r\n    margin-right: 5px;\r\n    margin-left: 5px;\r\n}\r\n\r\n.dualbox-io {\r\n    overflow: visible;\r\n    margin-left: -8px;\r\n    margin-right: -8px;\r\n}\r\n\r\n.box-inputs {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    position: relative;\r\n    padding: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n.types {\r\n    color: #6c757d !important;\r\n    opacity: 0.7;\r\n    pointer-events: none;\r\n}\r\n\r\n.box-inputs .types {\r\n    display: inline-block;\r\n}\r\n\r\n.box-inputs .name {\r\n    display: inline-block;\r\n}\r\n\r\n.box-inputs .type {\r\n    display: block;\r\n    text-align: right;\r\n}\r\n\r\n.box-inputs .point {\r\n    display: block;\r\n}\r\n\r\n.box-inputs .name {\r\n    display: block;\r\n}\r\n\r\n.box-outputs {\r\n    display: flex;\r\n    justify-content: center;\r\n    position: relative;\r\n    padding: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n.box-outputs .types {\r\n    display: inline-block;\r\n}\r\n\r\n.box-outputs .point {\r\n    display: inline-block;\r\n}\r\n\r\n.box-outputs .name {\r\n    display: inline-block;\r\n}\r\n\r\n.box-outputs .type {\r\n    display: block;\r\n    text-align: left;\r\n}\r\n\r\n.box-outputs .point {\r\n    display: block;\r\n}\r\n\r\n.box-outputs .name {\r\n    display: block;\r\n}\r\n\r\nspan.feedback {\r\n    font-weight: bold;\r\n}\r\n\r\n.event-dock {\r\n    background-color: rgb(136, 137, 138);\r\n    background-color: #a6a6a6;\r\n    width: calc(100% + 18px);\r\n    height: 12px;\r\n    z-index: 3 !important;\r\n}\r\n\r\n.event-dock-top {\r\n    margin-left: -9px;\r\n    margin-right: -9px;\r\n    margin-top: -3px;\r\n    border-top-left-radius: 4px;\r\n    border-top-right-radius: 4px;\r\n    margin-bottom: 4px;\r\n}\r\n\r\n.event-dock-bottom {\r\n    margin-left: -9px;\r\n    margin-right: -9px;\r\n    margin-bottom: -3px;\r\n    border-bottom-left-radius: 4px;\r\n    border-bottom-right-radius: 4px;\r\n    margin-top: 4px;\r\n    height: 11px;\r\n    /* shorter because of box-shadow */\r\n}\r\n\r\n.event-label {\r\n    z-index: 21;\r\n    padding-left: 15px;\r\n    transform: rotate(-90deg) translate(0%, -50%) !important;\r\n    transform-origin: 0% 0%;\r\n    color: #6c757d !important;\r\n    font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif;\r\n    font-size: 14px;\r\n    opacity: 0.7;\r\n    cursor: pointer;\r\n}\r\n\r\n.transparent {\r\n    opacity: 0.3 !important;\r\n}\r\n\r\n.card-node {\r\n    position: relative;\r\n}\r\n\r\n.card-comment {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    margin-top: -22px;\r\n    color: #f4ad42 !important;\r\n}\r\n\r\n.card-problem {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    margin-top: -22px;\r\n    color: red !important;\r\n}\r\n\r\n.card-snapshot {\r\n}\r\n\r\n.card-snapshot-idle {\r\n    border: 2px solid gray !important;\r\n    box-shadow: 1px 1px 5px gray !important;\r\n    opacity: 0.7 !important;\r\n}\r\n\r\n.card-snapshot-computing {\r\n    border: 2px solid darkgreen !important;\r\n    box-shadow: 1px 1px 5px darkgreen !important;\r\n    opacity: 1 !important;\r\n}\r\n\r\n.card-snapshot-awaiting-data {\r\n    border: 2px solid blue !important;\r\n    box-shadow: 1px 1px 5px blue !important;\r\n    opacity: 0.7 !important;\r\n}\r\n\r\n.card-snapshot-ready {\r\n    border: 2px solid lightgreen !important;\r\n    box-shadow: 1px 1px 5px lightgreen !important;\r\n    opacity: 1 !important;\r\n}\r\n\r\n.card-status {\r\n    position: absolute;\r\n    bottom: 0;\r\n    right: 0;\r\n    left: 0;\r\n    margin-bottom: -26px;\r\n    color: #f4ad42 !important;\r\n    font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif;\r\n    font-weight: bold;\r\n    text-align: center;\r\n}\r\n\r\n.card-status-idle {\r\n    color: gray !important;\r\n    min-width: 85px;\r\n}\r\n\r\n.card-status-computing {\r\n    color: darkgreen !important;\r\n    min-width: 110px;\r\n}\r\n\r\n.card-status-awaiting-data {\r\n    color: blue !important;\r\n    min-width: 85px;\r\n}\r\n\r\n.card-status-ready {\r\n    color: lightgreen !important;\r\n    min-width: 85px;\r\n}\r\n\r\n.btn-snapshot-details {\r\n    position: relative;\r\n    margin-top: -2px;\r\n    color: inherit;\r\n}\r\n\r\nspan.name {\r\n    overflow-wrap: normal;\r\n}\r\n</style>\r\n\r\n<template>\r\n    <div class=\"jtk-node card card-node contextmenu\" v-bind:class=\"{ 'card-loop': n.hasLoop(), 'card-ui': n.isUI(), 'card-metanode': n.isMetanode(), 'card-input': n.isInput(), 'card-output': n.isOutput(), 'card-snapshot': n.hasSnapshot(), 'card-snapshot-idle': n.hasSnapshot() && n.isSnapshotStatus(0), 'card-snapshot-computing': n.hasSnapshot() && n.isSnapshotStatus(1), 'card-snapshot-awaiting-data': n.hasSnapshot() && n.isSnapshotStatus(2), 'card-snapshot-ready': n.hasSnapshot() && n.isSnapshotStatus(3) }\" v-bind:id=\"getId()\" v-bind:data-id=\"getId()\" v-bind:data-name=\"pkg.name\" style=\"overflow: visible;\">\r\n        <div v-if=\"n.hasComment()\">\r\n            <div class=\"card-comment\" data-toggle=\"tooltip\" data-placement=\"top\" :title=\"n.getComment()\">\r\n                <i class=\"fas fa-comment-alt\" data-container=\"body\"></i>\r\n            </div>\r\n        </div>\r\n\r\n        <div v-if=\"n.hasSnapshot()\">\r\n            <div class=\"card-status\">\r\n                <div v-if=\"n.isSnapshotStatus(0)\">\r\n                    <div class=\"card-status-idle\">\r\n                        <span>IDLE</span>\r\n                        <button class=\"btn btn-editor-xs btn-outline-secondary btn-outline-discrete btn-snapshot-details d-inline-block\" data-id=\"getId()\" v-on:click=\"openSnapshotDetails\"><i class=\"fas fa-info-circle\"></i></button>\r\n                    </div>\r\n                </div>\r\n\r\n                <div v-if=\"n.isSnapshotStatus(1)\">\r\n                    <div class=\"card-status-computing\">\r\n                        <span>COMPUTING</span>\r\n                        <button class=\"btn btn-editor-xs btn-outline-secondary btn-outline-discrete btn-snapshot-details d-inline-block\" data-id=\"getId()\" v-on:click=\"openSnapshotDetails\"><i class=\"fas fa-info-circle\"></i></button>\r\n                    </div>\r\n                </div>\r\n\r\n                <div v-if=\"n.isSnapshotStatus(2)\">\r\n                    <div class=\"card-status-awaiting-data\">\r\n                        <span>WAITING</span>\r\n                        <button class=\"btn btn-editor-xs btn-outline-secondary btn-outline-discrete btn-snapshot-details d-inline-block\" data-id=\"getId()\" v-on:click=\"openSnapshotDetails\"><i class=\"fas fa-info-circle\"></i></button>\r\n                    </div>\r\n                </div>\r\n\r\n                <div v-if=\"n.isSnapshotStatus(3)\">\r\n                    <div class=\"card-status-ready\">\r\n                        <span>READY</span>\r\n                        <button class=\"btn btn-editor-xs btn-outline-secondary btn-outline-discrete btn-snapshot-details d-inline-block\" data-id=\"getId()\" v-on:click=\"openSnapshotDetails\"><i class=\"fas fa-info-circle\"></i></button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div v-if=\"!example && n.isUI() && !n.isOnAPanel()\">\r\n            <div @click=\"registerToPanel\" class=\"card-problem\">\r\n                <i class=\"fas fa-exclamation-circle\" data-container=\"body\" data-toggle=\"popover\" data-placement=\"top\" data-content=\"This UI is not set in a panel. It won't have any effect. Go to the Interface tab to add it to a panel.\"></i>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"card-top\">\r\n            <div class=\"d-flex\">\r\n                <span class=\"title\" style=\"white-space: nowrap; margin-right: 5px;\">\r\n                    <span v-if=\"n.isMetanode()\" class=\"badge badge-secondary\"><b>META</b></span> {{n.graphId}}\r\n                    <i v-if=\"n.isParallel()\" class=\"fas fa-server\" style=\"color: orange;\" title=\"this module is computed in a web worker\"></i>\r\n                </span>\r\n\r\n                <div class=\"ml-auto\">\r\n                    <button class=\"btn btn-outline-secondary btn-outline-discrete btn-editor-xs btn-settings\" v-on:click=\"openNodeSettings\"><i class=\"fas fa-cog\"></i></button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div v-if=\"!n.isInput() && !n.isOutput()\" class=\"card-center\">\r\n            <hr style=\"margin-bottom: 5px;\" />\r\n            <div class=\"dualbox-io\" style=\"overflow: visible;\">\r\n                <div class=\"inputs\" style=\"display: inline-block; float: left;\">\r\n                    <div class=\"box-inputs\">\r\n                        <div class=\"types\">\r\n                            <span class=\"type\" v-for=\"key in getVisibleInputs()\" v-bind:data-key=\"key\">\r\n                                {{ n.getInputType(key) }}\r\n                            </span>\r\n                        </div>\r\n                        <div class=\"points\">\r\n                            <div class=\"point\" v-for=\"key in getVisibleInputs()\" v-bind:data-key=\"key\" v-bind:data-type=\"n.getInputDef(key).type\" v-html=\"point\"></div>\r\n                        </div>\r\n                        <div class=\"names\">\r\n                            <span class=\"name\" v-for=\"key in getVisibleInputs()\" :class=\"{'feedback': n.isFeedbackTarget(key), 'input-not-resolvable': !example && !n.isInputResolvable(key) }\" v-bind:data-input=\"key\">\r\n                                <span v-if=\"n.hasIterator(key)\">&lt;{{key}}&gt;</span>\r\n                                <span v-else>{{key}}</span>\r\n                                <small v-if=\"!n.isInputConst(key)\" data-toggle=\"tooltip\" data-trigger=\"hover\" title=\"this value will be cloned at execution time\"><i class=\"fas fa-clone transparent\"></i></small>\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"outputs\" style=\"display: inline-block; float: right\">\r\n                    <div class=\"box-outputs\">\r\n                        <div class=\"names\">\r\n                            <span class=\"name\" v-for=\"key in getVisibleOutputs()\" v-bind:class=\"{feedback: n.isFeedbackTarget(key)}\" v-bind:data-output=\"key\">\r\n                                <span v-if=\"n.hasLoop() && n.hasFeedback(key)\">{{key}}</span>\r\n                                <span v-else-if=\"n.hasLoop() && !n.hasFeedback(key)\">&lt;{{key}}&gt;</span>\r\n                                <span v-else>{{key}}</span>\r\n\r\n                                <span v-if=\"n.hasCacheActivated()\">\r\n                                    &nbsp;<i class=\"fa fa-hdd\" title=\"This module has cache activated\"></i>\r\n                                </span>\r\n                            </span>\r\n                        </div>\r\n                        <div class=\"points\">\r\n                            <div class=\"point\" v-for=\"key in getVisibleOutputs()\" v-bind:data-key=\"key\" v-bind:data-type=\"n.getOutputDef(key).type\" v-html=\"point\"></div>\r\n                        </div>\r\n                        <div class=\"types\">\r\n                            <span class=\"type\" v-for=\"key in getVisibleOutputs()\" v-bind:data-key=\"key\">\r\n                                {{ n.getOutputType(key) }}\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <hr style=\"margin-top: 5px;\" />\r\n        <div class=\"card-bottom\">\r\n            <span class=\"subtitle\">{{ shortName }}</span>\r\n\r\n            <div v-if=\"n.isMetanode()\" class=\"d-inline-block\">\r\n                <button class=\"btn btn-outline-secondary btn-outline-discrete btn-editor-xs btn-enter-metanode\" v-on:click=\"enterMetanode\"><i class=\"fas fa-sign-in-alt\"></i></button>\r\n            </div>\r\n\r\n            <!--\r\n                        <div v-if=\"n.isUI()\" class=\"event-dock event-dock-bottom\"></div>\r\n                    -->\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport ContextMenu from \"../ContextMenu\";\r\nimport _ from \"lodash-es\";\r\nimport dbutils from \"../../m/DualboxUtils\";\r\n\r\n// fix inputs types and output types position relatively to the div\r\n$.fn.fixCardDisplay = function() {\r\n    var offsetPoint = 12;\r\n    var offsetBorder = parseInt($(this).css(\"border-top-width\"));\r\n\r\n    // if we have width or height set to 0, we are not ready yet to\r\n    // execute this function. Postpone it.\r\n    if( $(this).width() === 0 || $(this).height() === 0 ) {\r\n        setTimeout(() => {\r\n            $(this).fixCardDisplay();\r\n        }, 50);\r\n        return;\r\n    }\r\n\r\n    if (\r\n        $(this)\r\n            .find(\".box-inputs\")\r\n            .height() === 0 &&\r\n        $(this)\r\n            .find(\".box-outputs\")\r\n            .height() === 0\r\n    ) {\r\n        // if this card has no input/output, remove the card center\r\n        $(this)\r\n            .find(\".card-center\")\r\n            .remove();\r\n    } else {\r\n        // else, adjust the input/output display for endpoints\r\n        // 1) translate inputs by the right amount of pixels to have the circle on the line\r\n        var boxInputs = $(this).find(\".box-inputs\");\r\n\r\n        // fix css names width\r\n        var namesDiv = boxInputs.find(\".names\");\r\n        namesDiv.css(\"width\", namesDiv.width() + 1 + \"px\");\r\n\r\n        // translate inputs to the left\r\n        var translateLeft =\r\n            boxInputs.find(\".types\").width() + offsetPoint + offsetBorder / 2;\r\n        $(this)\r\n            .find(\".box-inputs\")\r\n            .css(\"transform\", \"translateX(-\" + translateLeft + \"px)\");\r\n\r\n        // adjust inputs main div width\r\n        $(this)\r\n            .find(\".inputs\")\r\n            .width(\r\n                $(this)\r\n                    .find(\".inputs\")\r\n                    .width() -\r\n                    translateLeft +\r\n                    10 /* margin */\r\n            );\r\n\r\n        // 2) translate outputs by the right amount of pixels to have the circle on the line\r\n        var boxOutputs = $(this).find(\".box-outputs\");\r\n\r\n        // fix css names with\r\n        var namesDiv = boxOutputs.find(\".names\");\r\n        namesDiv.css(\"width\", namesDiv.width() + 1 + \"px\");\r\n\r\n        // translate inputs to the right\r\n        var translateRight =\r\n            boxOutputs.find(\".types\").width() + offsetPoint + offsetBorder / 2;\r\n        $(this)\r\n            .find(\".box-outputs\")\r\n            .css(\"transform\", \"translateX(\" + translateRight + \"px)\");\r\n\r\n        // adjust output main div width\r\n        $(this)\r\n            .find(\".outputs\")\r\n            .width(\r\n                $(this)\r\n                    .find(\".outputs\")\r\n                    .width() -\r\n                    translateRight +\r\n                    10 /* margin */\r\n            );\r\n\r\n        // fix io width\r\n        //$('.dualbox-io').css('width', (($(this).find('.inputs').width() + $(this).find('.outputs').width()) + \"px\"));\r\n    }\r\n\r\n    $(this).ready(() => {\r\n        // take the current width and add it as a css property\r\n        var width = $(this).width();\r\n        width += parseInt($(this).css(\"padding-right\"));\r\n        width += parseInt($(this).css(\"padding-left\"));\r\n        width += parseInt($(this).css(\"border-left-width\"));\r\n        width += parseInt($(this).css(\"border-right-width\"));\r\n        $(this).css(\"width\", Math.ceil(width) + \"px\");\r\n    });\r\n};\r\n\r\n// find position of element relative to an ancestor matching selector\r\n$.fn.positionFrom = function(selector) {\r\n    var ancestor = $(this).closest(selector);\r\n    var offset = $(this).offset();\r\n    var ancestorOffset = ancestor.offset();\r\n    return {\r\n        top: offset.top - ancestorOffset.top,\r\n        left: offset.left - ancestorOffset.left\r\n    };\r\n};\r\n\r\nexport default {\r\n    props: [\r\n        \"id\", // the module id\r\n        \"pkg\", // the module package.json\r\n        \"n\", // the GraphNode object (from model)\r\n        \"example\", // true if this vue is used as an example display (no need to connect)\r\n        \"displayEvents\" // true if events should be displayed\r\n    ],\r\n    data: function() {\r\n        return {\r\n            shortName: \"\",\r\n            point:\r\n                '<svg width=\"14\" height=\"14\" pointer-events=\"all\" position=\"absolute\" version=\"1.1\" xmlns=\"http://www.w3.org/1999/xhtml\"><circle cx=\"7\" cy=\"7\" r=\"5\" version=\"1.1\" xmlns=\"http://www.w3.org/1999/xhtml\" fill=\"#ffffff\" stroke=\"#727272\" style=\"\" stroke-width=\"2\"></circle></svg>'\r\n        };\r\n    },\r\n    beforeUpdate: function() {\r\n        //console.log('[UPDATING] ' + this.n.getUniqId());\r\n    },\r\n    destroyed: function() {\r\n        this.deactivateTooltip();\r\n        $(\".tooltip\").remove();\r\n    },\r\n    created: function() {\r\n        this.initialized = false;\r\n        this.view = window.dualboxEditor.v;\r\n\r\n        //console.log('[CREATED] ' + this.n.getUniqId());\r\n        // We compute the shortname of our box\r\n        if (this.n.isInput() || this.n.isOutput()) {\r\n            this.shortName = this.n.getType();\r\n        } else {\r\n            this.shortName = dbutils.shortName(this.pkg.name);\r\n        }\r\n    },\r\n    mounted: async function() {\r\n        //console.log('[MOUNTED] ' + this.n.getUniqId());\r\n        var div = $(this.$el);\r\n        div.fixCardDisplay();\r\n        this.activateTooltip();\r\n        return await this.initialize();\r\n    },\r\n    beforeUpdate: function() {\r\n        this.deactivateTooltip();\r\n    },\r\n    updated: async function() {\r\n        //console.log('[UPDATED] ' + this.n.getUniqId());\r\n\r\n        // we reset jsPlumb before app update (in graph.vue)\r\n        // so we need to initialize again\r\n        this.assignContextMenu();\r\n\r\n        $(this.$el).fixCardDisplay();\r\n        $(this.$el).ready(() => {\r\n            this.activateTooltip();\r\n        });\r\n        return await this.initialize();\r\n    },\r\n    activate: function() {\r\n        this.activateTooltip();\r\n    },\r\n    deactivate: function() {\r\n        this.deactivateTooltip();\r\n    },\r\n    methods: {\r\n        getId: function() {\r\n            // if this is an example graphNode, change our \"id\" to \"id-junk\"\r\n            // to avoid connection jsplumb conflicts with the real node\r\n            return this.example ? this.id + \"-junk\" : this.id;\r\n        },\r\n\r\n        activateTooltip: function() {\r\n            $(this.$el)\r\n                .find('[data-toggle=\"tooltip\"]')\r\n                .tooltip();\r\n        },\r\n\r\n        deactivateTooltip: function() {\r\n            $(this.$el)\r\n                .find('[data-toggle=\"tooltip\"]')\r\n                .tooltip(\"dispose\");\r\n        },\r\n\r\n        initialize: async function() {\r\n            var self = this;\r\n            var div = $(this.$el);\r\n            var id = this.getId();\r\n            var view = this.view;\r\n\r\n            this.initialized = false;\r\n\r\n            if (!this.example) {\r\n                // if we have a position, set it\r\n                var def = this.n.getDef();\r\n                var position = _.get(def, [\"graph\", \"position\"]);\r\n                if (position) {\r\n                    var jsPlumbElement = self.$parent.jsPlumbInstance.getElement(\r\n                        id\r\n                    );\r\n                    self.$parent.jsPlumbInstance.setPosition(\r\n                        jsPlumbElement,\r\n                        position\r\n                    );\r\n                }\r\n\r\n                // This needs to be registered before draggable\r\n                div.on(\"mousedown\", function(e) {\r\n                    // if this div is not selected already, deselect the other divs\r\n                    if (!self.$parent.selector.isSelected(this)) {\r\n                        self.$parent.selector.deselect();\r\n                    }\r\n                });\r\n\r\n                await this.initializeJsPlumb();\r\n\r\n                div.click(function(e) {\r\n                    if (e.ctrlKey) {\r\n                        view.selector.toggleSelection(this);\r\n                    }\r\n                });\r\n\r\n                this.assignContextMenu();\r\n            }\r\n\r\n            return new Promise(resolve => {\r\n                div.ready(() => {\r\n                    //console.log('[INITIALIZED] ' + this.n.getUniqId());\r\n                    this.initialized = true;\r\n                    resolve();\r\n                });\r\n            });\r\n        },\r\n\r\n        initializeJsPlumb: function() {\r\n            var self = this;\r\n            var div = $(this.$el);\r\n            var id = this.getId();\r\n            var view = this.view;\r\n\r\n            if (!this.example) {\r\n                // If this node was never initialized in this jsplumb instance, do it\r\n                if (\r\n                    !_.get(this.$parent.jsPlumbInstance, [\r\n                        \"initializedNodes\",\r\n                        id\r\n                    ])\r\n                ) {\r\n                    _.set(\r\n                        this.$parent.jsPlumbInstance,\r\n                        [\"initializedNodes\", id],\r\n                        true\r\n                    ); // initialized\r\n\r\n                    if (this.n.isInput() || this.n.isOutput()) {\r\n                        var type = \"*\";\r\n                        var input = \"value\";\r\n                        var output = \"value\";\r\n                        var offsetTop =\r\n                            $(div)\r\n                                .find(\".card-top\")\r\n                                .height() +\r\n                            12 /* hr size */ -\r\n                            3;\r\n\r\n                        var uuid = [id, \"input\", input].join(\"#\");\r\n                        var ep = this.$parent.jsPlumbInstance.addEndpoint(\r\n                            id,\r\n                            {\r\n                                isSource: false,\r\n                                isTarget: true,\r\n                                uuid: uuid,\r\n                                anchor: [0, 0, -1, 0, 0, offsetTop],\r\n                                maxConnections: 1,\r\n                                parameters: {\r\n                                    type: \"data\",\r\n                                    target: {\r\n                                        id: id,\r\n                                        input: output\r\n                                    }\r\n                                }\r\n                            },\r\n                            this.$parent.style.inputEndpoint\r\n                        );\r\n\r\n                        // add data to the endpoint div so we can identify it easier\r\n                        $(ep.canvas).attr(\"data-node\", id);\r\n                        $(ep.canvas).attr(\"data-type\", \"input\");\r\n                        $(ep.canvas).attr(\"data-input\", input);\r\n\r\n                        // bind tooltip\r\n                        $(ep.canvas).attr(\"data-toggle\", \"tooltip\");\r\n                        $(ep.canvas).attr(\"data-trigger\", \"hover\");\r\n                        $(ep.canvas).attr(\"data-placement\", \"left\");\r\n                        $(ep.canvas).attr(\"data-html\", \"true\");\r\n                        var inputType = view.m\r\n                            .getNode(id)\r\n                            .getInputType(\"value\");\r\n                        $(ep.canvas).attr(\r\n                            \"title\",\r\n                            \"Type: <b>\" + inputType + \"</b>\"\r\n                        );\r\n                        $(ep.canvas).tooltip();\r\n\r\n                        // bind context menu to the endpoint\r\n                        $(ep.canvas).addClass(\"capture-right-click\");\r\n                        $(ep.canvas).ready(function() {\r\n                            var menu = new ContextMenu(\r\n                                \".jtk-endpoint-anchor[data-node='\" +\r\n                                    id.trim() +\r\n                                    \"'][data-input='\" +\r\n                                    input +\r\n                                    \"']\",\r\n                                [\r\n                                    {\r\n                                        name: \"Create input for here\",\r\n                                        fn: () => {\r\n                                            view.c.createInputFromConnection(\r\n                                                id,\r\n                                                input\r\n                                            );\r\n                                        }\r\n                                    }\r\n                                ]\r\n                            );\r\n                        });\r\n\r\n                        var uuid = [id, \"output\", output].join(\"#\");\r\n                        var ep = this.$parent.jsPlumbInstance.addEndpoint(\r\n                            id,\r\n                            {\r\n                                isSource: true,\r\n                                isTarget: false,\r\n                                uuid: uuid,\r\n                                anchor: [1, 0, 1, 0, 0, offsetTop],\r\n                                parameters: {\r\n                                    type: \"data\",\r\n                                    source: {\r\n                                        id: id,\r\n                                        output: output\r\n                                    }\r\n                                }\r\n                            },\r\n                            this.$parent.style.outputEndpoint\r\n                        );\r\n\r\n                        // add data to the endpoint div so we can identify it easier\r\n                        $(ep.canvas).attr(\"data-node\", id);\r\n                        $(ep.canvas).attr(\"data-type\", \"output\");\r\n                        $(ep.canvas).attr(\"data-output\", output);\r\n\r\n                        // bind tooltip\r\n                        $(ep.canvas).attr(\"data-toggle\", \"tooltip\");\r\n                        $(ep.canvas).attr(\"data-trigger\", \"hover\");\r\n                        $(ep.canvas).attr(\"data-placement\", \"right\");\r\n                        $(ep.canvas).attr(\"data-html\", \"true\");\r\n                        var outputType = view.m\r\n                            .getNode(id)\r\n                            .getOutputType(\"value\");\r\n                        $(ep.canvas).attr(\r\n                            \"title\",\r\n                            \"Type: <b>\" + outputType + \"</b>\"\r\n                        );\r\n                        $(ep.canvas).tooltip();\r\n\r\n                        // bind context menu to the endpoint\r\n                        $(ep.canvas).addClass(\"capture-right-click\");\r\n                        $(ep.canvas).ready(function() {\r\n                            var menu = new ContextMenu(\r\n                                \".jtk-endpoint-anchor[data-node='\" +\r\n                                    id.trim() +\r\n                                    \"'][data-output='\" +\r\n                                    output.trim() +\r\n                                    \"']\",\r\n                                [\r\n                                    {\r\n                                        name: \"Create output for here\",\r\n                                        fn: () => {\r\n                                            view.c.createOutputFromConnection(\r\n                                                id,\r\n                                                output\r\n                                            );\r\n                                        }\r\n                                    }\r\n                                ]\r\n                            );\r\n                        });\r\n                    } else {\r\n                        // add input endoints\r\n                        div.find(\".box-inputs\")\r\n                            .find(\".point\")\r\n                            .each(function(index) {\r\n                                $(this)\r\n                                    .css(\"visibility\", \"hidden\")\r\n                                    .css(\"opacity\", \"0\"); // replaced by jsPlumb point\r\n\r\n                                var input = div\r\n                                    .find(\".box-inputs\")\r\n                                    .find(\".name\")\r\n                                    .eq(index)\r\n                                    .attr(\"data-input\")\r\n                                    .trim();\r\n                                var type = view.m\r\n                                    .getNode(id)\r\n                                    .getInputType(input);\r\n\r\n                                var offsetTop =\r\n                                    $(this).positionFrom(\".card\").top +\r\n                                    $(this).height() / 2 -\r\n                                    3;\r\n                                var uuid = [\r\n                                    id,\r\n                                    \"input\",\r\n                                    $(this).data(\"key\")\r\n                                ].join(\"#\");\r\n                                var ep = self.$parent.jsPlumbInstance.addEndpoint(\r\n                                    id,\r\n                                    {\r\n                                        isSource: false,\r\n                                        isTarget: true,\r\n                                        uuid: uuid,\r\n                                        anchor: [0, 0, -1, 0, 0, offsetTop],\r\n                                        maxConnections: 1,\r\n                                        parameters: {\r\n                                            type: \"data\",\r\n                                            target: {\r\n                                                id: id,\r\n                                                input: $(this).data(\"key\")\r\n                                            }\r\n                                        }\r\n                                    },\r\n                                    self.$parent.style.inputEndpoint\r\n                                );\r\n\r\n                                // add data to the endpoint div so we can identify it easier\r\n                                $(ep.canvas).attr(\"data-node\", id);\r\n                                $(ep.canvas).attr(\"data-type\", \"input\");\r\n                                $(ep.canvas).attr(\"data-input\", input);\r\n\r\n                                // bind tooltip\r\n                                $(ep.canvas).attr(\"data-toggle\", \"tooltip\");\r\n                                $(ep.canvas).attr(\"data-trigger\", \"hover\");\r\n                                $(ep.canvas).attr(\"data-placement\", \"left\");\r\n                                $(ep.canvas).attr(\"data-html\", \"true\");\r\n                                $(ep.canvas).attr(\r\n                                    \"title\",\r\n                                    \"Type:  <b>\" + type + \"</b>\"\r\n                                );\r\n                                $(ep.canvas).tooltip();\r\n\r\n                                // bind context menu to the endpoint\r\n                                $(ep.canvas).addClass(\"capture-right-click\");\r\n                                $(ep.canvas).ready(function() {\r\n                                    var menu = new ContextMenu(\r\n                                        \".jtk-endpoint-anchor[data-node='\" +\r\n                                            id.trim() +\r\n                                            \"'][data-input='\" +\r\n                                            input.trim() +\r\n                                            \"']\",\r\n                                        [\r\n                                            {\r\n                                                name: \"Create input for here\",\r\n                                                fn: () => {\r\n                                                    view.c.createInputFromConnection(\r\n                                                        id,\r\n                                                        input\r\n                                                    );\r\n                                                }\r\n                                            }\r\n                                        ]\r\n                                    );\r\n                                });\r\n                            });\r\n\r\n                        // add output endpoints\r\n                        div.find(\".box-outputs\")\r\n                            .find(\".point\")\r\n                            .each(function(index) {\r\n                                $(this)\r\n                                    .css(\"visibility\", \"hidden\")\r\n                                    .css(\"opacity\", \"0\"); // replaced by jsPlumb point\r\n\r\n                                var output = div\r\n                                    .find(\".box-outputs\")\r\n                                    .find(\".name\")\r\n                                    .eq(index)\r\n                                    .attr(\"data-output\")\r\n                                    .trim();\r\n                                var type = view.m\r\n                                    .getNode(id)\r\n                                    .getOutputType(output);\r\n\r\n                                var offsetTop =\r\n                                    $(this).positionFrom(\".card\").top +\r\n                                    $(this).height() / 2 -\r\n                                    3;\r\n                                var uuid = [\r\n                                    id,\r\n                                    \"output\",\r\n                                    $(this).data(\"key\")\r\n                                ].join(\"#\");\r\n                                var ep = self.$parent.jsPlumbInstance.addEndpoint(\r\n                                    id,\r\n                                    {\r\n                                        isSource: true,\r\n                                        isTarget: false,\r\n                                        uuid: uuid,\r\n                                        anchor: [1, 0, 1, 0, 0, offsetTop],\r\n                                        parameters: {\r\n                                            type: \"data\",\r\n                                            source: {\r\n                                                id: id,\r\n                                                output: $(this).data(\"key\")\r\n                                            }\r\n                                        }\r\n                                    },\r\n                                    self.$parent.style.outputEndpoint\r\n                                );\r\n\r\n                                // add data to the endpoint div so we can identify it easier\r\n                                $(ep.canvas).attr(\"data-node\", id);\r\n                                $(ep.canvas).attr(\"data-type\", \"output\");\r\n                                $(ep.canvas).attr(\"data-output\", output);\r\n\r\n                                // bind tooltip\r\n                                $(ep.canvas).attr(\"data-toggle\", \"tooltip\");\r\n                                $(ep.canvas).attr(\"data-trigger\", \"hover\");\r\n                                $(ep.canvas).attr(\"data-placement\", \"right\");\r\n                                $(ep.canvas).attr(\"data-html\", \"true\");\r\n                                $(ep.canvas).attr(\r\n                                    \"title\",\r\n                                    \"Type: <b>\" + type + \"</b>\"\r\n                                );\r\n                                $(ep.canvas).tooltip();\r\n\r\n                                // bind context menu to the endpoint\r\n                                $(ep.canvas).addClass(\"capture-right-click\");\r\n                                $(ep.canvas).ready(function() {\r\n                                    var menu = new ContextMenu(\r\n                                        \".jtk-endpoint-anchor[data-node='\" +\r\n                                            id.trim() +\r\n                                            \"'][data-output='\" +\r\n                                            output.trim() +\r\n                                            \"']\",\r\n                                        [\r\n                                            {\r\n                                                name: \"Create output for here\",\r\n                                                fn: () => {\r\n                                                    view.c.createOutputFromConnection(\r\n                                                        id,\r\n                                                        output\r\n                                                    );\r\n                                                }\r\n                                            }\r\n                                        ]\r\n                                    );\r\n                                });\r\n                            });\r\n\r\n                        if (this.n.isUI() && this.displayEvents) {\r\n                            // Make this a target for events\r\n                            this.$parent.jsPlumbInstance.makeTarget(\r\n                                id,\r\n                                {\r\n                                    isSource: false,\r\n                                    isTarget: true,\r\n                                    uniqueEndpoint: false,\r\n                                    anchor: \"Continuous\",\r\n                                    uuid: id + \"#event-in\",\r\n                                    paintStyle: {\r\n                                        fill: \"green\",\r\n                                        radius: 3,\r\n                                        stroke: \"#727272\",\r\n                                        strokeWidth: 1\r\n                                    },\r\n                                    parameters: {\r\n                                        type: \"event\",\r\n                                        target: { id: id }\r\n                                    }\r\n                                },\r\n                                self.$parent.style.eventEndpoint\r\n                            );\r\n\r\n                            // Create an enpoint to create a new event\r\n                            var ep = this.$parent.jsPlumbInstance.addEndpoint(\r\n                                id,\r\n                                {\r\n                                    isSource: true,\r\n                                    isTarget: false,\r\n                                    uuid: id + \"#event-out\",\r\n                                    anchor: [1, 1, 0, 1, 0, -10],\r\n                                    parameters: {\r\n                                        type: \"event\",\r\n                                        source: { id: id }\r\n                                    },\r\n                                    paintStyle: {\r\n                                        fill: \"green\",\r\n                                        radius: 3,\r\n                                        stroke: \"#727272\",\r\n                                        strokeWidth: 1\r\n                                    }\r\n                                },\r\n                                this.$parent.style.eventEndpoint\r\n                            );\r\n\r\n                            // Add overlay here so we don't mess with splitConnection\r\n                            ep.addOverlay([\r\n                                \"PlainArrow\",\r\n                                {\r\n                                    width: 15,\r\n                                    length: 15,\r\n                                    location: 1,\r\n                                    id: \"arrow\"\r\n                                }\r\n                            ]);\r\n\r\n                            $(ep.canvas).attr(\"data-toggle\", \"tooltip\");\r\n                            $(ep.canvas).attr(\"data-trigger\", \"hover\");\r\n                            $(ep.canvas).attr(\"data-placement\", \"bottom\");\r\n                            $(ep.canvas).attr(\"data-html\", \"true\");\r\n                            $(ep.canvas).attr(\r\n                                \"title\",\r\n                                \"Connect from here ito add an event that will be triggered when this box is done computing.\"\r\n                            );\r\n                            $(ep.canvas).tooltip();\r\n                        }\r\n                    }\r\n\r\n                    // Make the div draggable\r\n                    this.$parent.jsPlumbInstance.draggable(div, {\r\n                        //containment:true, // not allowed outside of container div\r\n                        drag: function(e) {\r\n                            // TODO: bug. After a repaint(), jsPlumb seems to be broken (connections dont follow on div drag)\r\n                            // It doesn't occur on jsPlumb.reset() instead of creating another instance on beforeUpdate(),\r\n                            // (as it should be), but we can't do that, because JsPlumb is broken on zoom otherwise...\r\n                            // One of thoses problem may be fixed later by updating jsPlumb...\r\n                            // Note: this \"fix\" may affect performances on drag, maybe a setTimeout will do\r\n                            //self.$parent.jsPlumbInstance.repaintEverything();\r\n                            self.$parent.jsPlumbInstance.repaint(id);\r\n                        },\r\n                        stop: function(e) {\r\n                            // resize the canvas if necessary\r\n                            self.$parent.canvasSizeHandler.debouncedResize();\r\n\r\n                            if (\r\n                                self.$parent.selector.isMultipleSelectionActive()\r\n                            ) {\r\n                                // We just dropped a bunch of divs, ajust all their positions\r\n                                self.view.m.batch(() => {\r\n                                    self.$parent.selector.each(div => {\r\n                                        var pos = self.$parent.jsPlumbInstance.getPosition(\r\n                                            div\r\n                                        );\r\n                                        view.m\r\n                                            .getNode($(div).attr(\"id\"))\r\n                                            .setPosition(pos);\r\n                                    });\r\n                                });\r\n                            } else {\r\n                                // We just dropped this one, set the new position in the graph model\r\n                                var el = self.$parent.jsPlumbInstance.getElement(\r\n                                    id\r\n                                );\r\n                                $(el).ready(function() {\r\n                                    var pos = self.$parent.jsPlumbInstance.getPosition(\r\n                                        el\r\n                                    );\r\n                                    view.m.getNode(id).setPosition(pos);\r\n                                });\r\n                            }\r\n                        }\r\n                    });\r\n                }\r\n            }\r\n\r\n            return new Promise(resolve =>\r\n                this.$parent.jsPlumbInstance.ready(resolve)\r\n            );\r\n        },\r\n\r\n        assignContextMenu: function() {\r\n            var id = this.getId();\r\n\r\n            // Create a contextmenu for the div\r\n            var contextOptions = [\r\n                {\r\n                    name: \"Remove this box\",\r\n                    fn: () => {\r\n                        this.view.c.removeBox(id);\r\n                    }\r\n                }\r\n            ];\r\n            if (this.n.isModule() || this.n.isUI()) {\r\n                contextOptions.push({\r\n                    name: \"Duplicate this box\",\r\n                    fn: () => {\r\n                        this.view.c.duplicateBox(id);\r\n                    }\r\n                });\r\n            }\r\n            var nodeMenu = new ContextMenu(\"#\" + id, contextOptions);\r\n        },\r\n\r\n        htmlentities: function(s) {\r\n            return this.view.utils.htmlentities(s);\r\n        },\r\n\r\n        getVisibleInputs: function() {\r\n            return this.n.getInputsNames().filter(inputName => {\r\n                return this.n.isInputVisible(inputName);\r\n            });\r\n        },\r\n\r\n        getVisibleOutputs: function() {\r\n            return this.n.getOutputsNames().filter(outputName => {\r\n                return this.n.isOutputVisible(outputName);\r\n            });\r\n        },\r\n\r\n        enterMetanode: function(e) {\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n\r\n            this.view.c.enterMetanode(this.id);\r\n        },\r\n\r\n        openNodeSettings: function(e) {\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n            this.view.openBoxSettings(this.id);\r\n        },\r\n\r\n        openSnapshotDetails: async function(e) {\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n            await this.view.openDebug(this.id);\r\n        },\r\n\r\n        registerToPanel: async function(e) {\r\n            await this.view.c.registerNodeToInterface(this.id);\r\n        }\r\n    },\r\n    watch: {\r\n        app: {\r\n            handler: () => {\r\n                console.log(\"graphVue.app changed\");\r\n            },\r\n            deep: true\r\n        }\r\n    }\r\n};\r\n</script>\r\n"]}, media: undefined });
 
   };
   /* scoped */