@dualbox/editor 1.0.70 → 1.0.72

package/js/dist/GraphEditor.min.js

@@ -18017,6 +18017,7 @@ class History {
     save() {
         if (!this._holdSaving) {
             var currentAppClone = this.clone(this.m.data);
+            currentAppClone.root = this.m.getCleanJson(); // if it's a snapshot, remove the extra infos
             var previousHash = hash(this.lastState.root);
             var diff = patcher.diff(this.lastState, currentAppClone);
             if (diff) {
@@ -45956,6 +45957,7 @@ class AppManager {
             options.options.debug.makeSynchrone = options.options.debug.makeSynchrone || false;
             options.options.debug.removeTryCatch = options.options.debug.removeTryCatch || false;
             options.options.debug.record = options.options.debug.record || false;
+            options.options.debug.ressourceCaching = options.options.debug.ressourceCaching || false;
             options.ressources = window.DualBoxRessources || {};
 
             this.app = window.app = window.DualBox.start(options);
@@ -47358,16 +47360,20 @@ __vue_render__._withStripped = true;
   const __vue_is_functional_template__ = false;
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var GraphNodeVue = normalizeComponent_1(
+  const __vue_component__ = normalizeComponent_1(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
     __vue_scope_id__,
     __vue_is_functional_template__,
     __vue_module_identifier__,
+    false,
     browser,
+    undefined,
     undefined
   );
 
@@ -48423,7 +48429,7 @@ var script$1 = {
         "displayEvents" // display events or not
     ],
     components: {
-        'graph-node' : GraphNodeVue,
+        'graph-node' : __vue_component__,
     },
     data: function () {
         return {
@@ -49376,16 +49382,20 @@ __vue_render__$1._withStripped = true;
   const __vue_is_functional_template__$1 = false;
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var graphVue = normalizeComponent_1(
+  const __vue_component__$1 = normalizeComponent_1(
     { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
     __vue_inject_styles__$1,
     __vue_script__$1,
     __vue_scope_id__$1,
     __vue_is_functional_template__$1,
     __vue_module_identifier__$1,
+    false,
     browser,
+    undefined,
     undefined
   );
 
@@ -49510,16 +49520,20 @@ __vue_render__$2._withStripped = true;
   const __vue_is_functional_template__$2 = false;
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var SearchResultsVue = normalizeComponent_1(
+  const __vue_component__$2 = normalizeComponent_1(
     { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
     __vue_inject_styles__$2,
     __vue_script__$2,
     __vue_scope_id__$2,
     __vue_is_functional_template__$2,
     __vue_module_identifier__$2,
+    false,
     browser,
+    undefined,
     undefined
   );
 
@@ -49530,7 +49544,7 @@ var script$3 = {
         "result",
     ],
     components: {
-        'graph-node' : GraphNodeVue
+        'graph-node' : __vue_component__
     },
     created: function() {
         this.view = window.dualboxEditor.v;
@@ -49868,16 +49882,20 @@ __vue_render__$3._withStripped = true;
   const __vue_is_functional_template__$3 = false;
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var DisplayResultVue = normalizeComponent_1(
+  const __vue_component__$3 = normalizeComponent_1(
     { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
     __vue_inject_styles__$3,
     __vue_script__$3,
     __vue_scope_id__$3,
     __vue_is_functional_template__$3,
     __vue_module_identifier__$3,
+    false,
     browser,
+    undefined,
     undefined
   );
 
@@ -63065,16 +63083,20 @@ __vue_render__$4._withStripped = true;
   const __vue_is_functional_template__$4 = false;
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var EditTypeVue = normalizeComponent_1(
+  const __vue_component__$4 = normalizeComponent_1(
     { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
     __vue_inject_styles__$4,
     __vue_script__$4,
     __vue_scope_id__$4,
     __vue_is_functional_template__$4,
     __vue_module_identifier__$4,
+    false,
     browser,
+    undefined,
     undefined
   );
 
@@ -63086,9 +63108,9 @@ var script$5 = {
         "mousePosition" // mouse position when this panel was opened
     ],
     components: {
-        'search-results' : SearchResultsVue,
-        'display-result' : DisplayResultVue,
-        'edit-type'      : EditTypeVue
+        'search-results' : __vue_component__$2,
+        'display-result' : __vue_component__$3,
+        'edit-type'      : __vue_component__$4
     },
     data: function () {
         return {
@@ -63954,16 +63976,20 @@ __vue_render__$5._withStripped = true;
   const __vue_is_functional_template__$5 = false;
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var addNodeVue = normalizeComponent_1(
+  const __vue_component__$5 = normalizeComponent_1(
     { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
     __vue_inject_styles__$5,
     __vue_script__$5,
     __vue_scope_id__$5,
     __vue_is_functional_template__$5,
     __vue_module_identifier__$5,
+    false,
     browser,
+    undefined,
     undefined
   );
 
@@ -64122,15 +64148,19 @@ __vue_render__$6._withStripped = true;
   
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var ModalVue = normalizeComponent_1(
+  const __vue_component__$6 = normalizeComponent_1(
     { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
     __vue_inject_styles__$6,
     __vue_script__$6,
     __vue_scope_id__$6,
     __vue_is_functional_template__$6,
     __vue_module_identifier__$6,
+    false,
+    undefined,
     undefined,
     undefined
   );
@@ -64143,8 +64173,8 @@ var script$7 = {
         "readonly",
     ],
     components : {
-        'modal' : ModalVue,
-        'edit-type' : EditTypeVue
+        'modal' : __vue_component__$6,
+        'edit-type' : __vue_component__$4
     },
     data: function () {
         return {
@@ -64286,16 +64316,20 @@ __vue_render__$7._withStripped = true;
   const __vue_is_functional_template__$7 = false;
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var DisplayTypeVue = normalizeComponent_1(
+  const __vue_component__$7 = normalizeComponent_1(
     { render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
     __vue_inject_styles__$7,
     __vue_script__$7,
     __vue_scope_id__$7,
     __vue_is_functional_template__$7,
     __vue_module_identifier__$7,
+    false,
     browser,
+    undefined,
     undefined
   );
 
@@ -64513,8 +64547,7 @@ var script$8 = {
             if( ["string", "number", "boolean", "array", "map"].indexOf(this.dataType) == -1 ) {
                 this.dataType = "object";
             }
-
-            console.log(`Type: ${this.type}, Datatype: ${this.dataType}, embeddedType: ${this.embeddedType}`);
+            //console.log(`Type: ${this.type}, Datatype: ${this.dataType}, embeddedType: ${this.embeddedType}`);
         },
 
         initData: function() {
@@ -65007,27 +65040,31 @@ __vue_render__$8._withStripped = true;
   /* style */
   const __vue_inject_styles__$8 = function (inject) {
     if (!inject) return
-    inject("data-v-33721d92_0", { source: "\n.template-value-container[data-v-33721d92], .field-editor[data-v-33721d92] {\n    margin-bottom: 10px;\n}\n.template-value-message[data-v-33721d92] {\n    text-align: center;\n    margin-top: 30px;\n    margin-bottom: 30px;\n    width: 100%;\n    opacity: 0.5;\n}\n", map: {"version":3,"sources":["/home/seb/dev/dualbox/editor/js/src/v/templates/editValue.vue"],"names":[],"mappings":";AACA;IACA,mBAAA;AACA;AAEA;IACA,kBAAA;IACA,gBAAA;IACA,mBAAA;IACA,WAAA;IACA,YAAA;AACA","file":"editValue.vue","sourcesContent":["<style scoped>\n    .template-value-container, .field-editor {\n        margin-bottom: 10px;\n    }\n\n    .template-value-message {\n        text-align: center;\n        margin-top: 30px;\n        margin-bottom: 30px;\n        width: 100%;\n        opacity: 0.5;\n    }\n</style>\n\n<template>\n    <div class=\"w-100\">\n        <p style=\"display: none;\">{{cIndex}}</p>\n        <template v-if=\"isBasicDataType()\">\n            <template v-if=\"dataType === 'string'\">\n                <input class=\"edit-value-input\" type=\"text\" @keyup.enter=\"setStringValue\" @keyup.esc=\"setStringValue\" :value=\"v\" @focus=\"$event.target.select()\"></input>\n            </template>\n            <template v-else-if=\"dataType === 'boolean'\">\n                <select class=\"edit-value-input\" @change=\"setBoolValue\">\n                    <option value=\"true\" :selected=\"v == true\">True</option>\n                    <option value=\"false\" :selected=\"v == false\">False</option>\n                </select>\n            </template>\n            <template v-else-if=\"dataType === 'number'\">\n                <input class=\"edit-value-input\" type=\"number\" @keyup.enter=\"setNumberValue\" @blur=\"setNumberValue\" :value=\"v\" @focus=\"$event.target.select()\" style=\"width: 40px;\"></input>\n            </template>\n        </template>\n        <template v-else>\n            <!-- we already are in a modal, don't instanciate another one -->\n            <template v-if=\"isTemplateType()\">\n                <div class=\"container template-value-container\" style=\"border: 1px solid rgba(0, 0, 0, 0.125);\">\n                    <div v-if=\"isArrayType()\" class=\"row\" style=\"background-color: rgba(0,0,0,.125);\">Array Editor</div>\n                    <div v-else-if=\"isMapType()\" class=\"row\" style=\"background-color: rgba(0,0,0,.125);\">Map Editor</div>\n                    <div class=\"row\" style=\"1px solid rgba(0,0,0,.125);\">\n                        <div class=\"col list-group-flush\" :class=\"{ 'col-1' : isArrayType(), 'col-2' : isMapType()}\" style=\"padding: 0; background-color: white; overflow-y: auto; border-right: 1px solid rgba(0, 0, 0, 0.125);\">\n                            <button v-for=\"index in deserializedValue.keys()\" :key=\"index\" :data-key=\"index\" type=\"button\" class=\"list-group-item list-group-item-action\" :class=\"{ active: isSelectedIndex(index) }\" style=\"text-align: center;\" @click=\"selectIndex(index)\">{{index}}</button>\n                            <button type=\"button\" @click=\"addItem\" class=\"list-group-item list-group-item-action add-item\" style=\"text-align: center;\"><i class=\"fas fa-plus-circle\"></i></button>\n                        </div>\n                        <div class=\"col\" style=\"padding: 10px\">\n                            <edit-value v-if=\"selectedIndex !== undefined && selectedIndex !== null\" :cIndex=\"selectedIndex\" :type=\"embeddedType\" :v=\"getElement(selectedIndex)\" @edited=\"onSubValueEdited(selectedIndex, $event)\"></edit-value>\n                            <p v-else class=\"template-value-message\">Select an element to edit.</p>\n                        </div>\n                    </div>\n                </div>\n            </template>\n            <template v-else>\n                <div class=\"field-editor\" :data-value=\"hash()\"></div>\n            </template>\n        </template>\n\n        <!-- set null and delete buttons -->\n        <div class=\"d-inline-block float-right\">\n            <button class=\"btn btn-secondary btn-sm btn-xs\" title=\"set Null\" @click=\"setNullValue\">null</button>\n            <button class=\"btn btn-danger btn-sm btn-xs\" title=\"delete value\" @click=\"deleteValue\" style=\"margin-left: 0px;\"><i class=\"fas fa-trash\"></i></button>\n        </div>\n    </div>\n\n</template>\n\n<script>\nimport _ from 'lodash-es';\nimport swal from 'sweetalert2';\nimport JSONEditor from '@dualbox/dualbox-lib-jsoneditor';\n\nString.prototype.hashCode = function() {\n    var hash = 0, i, chr;\n    if (this.length === 0) return hash;\n    for (i = 0; i < this.length; i++) {\n        chr   = this.charCodeAt(i);\n        hash  = ((hash << 5) - hash) + chr;\n        hash |= 0; // Convert to 32bit integer\n    }\n    return hash;\n};\n\nexport default {\n    name : \"edit-value\",\n    props: [\n        // required\n        \"v\",     // the value\n        \"type\",  // the dualbox type of the value\n\n        // specific properties (for recursivity)\n        \"cIndex\"  // index for reference when in an array\n    ],\n    data: function () {\n        return {\n            \"dataType\": null,                    // the real javascript dataType of this.v\n            \"deserializedValue\": null,\n\n            // if type is a collection (dataType==\"map\" or dataType==\"array\")\n            \"embeddedType\": null,    // the embedded type of this templated collection\n            \"selectedIndex\": null,   // the current index of the element we are editing\n        };\n    },\n    created: function() {\n        this.view = window.dualboxEditor.v;\n        this.editor = null;\n        this.edited = false;\n        this.initData();\n    },\n    mounted: function() {\n        var self = this;\n\n        this.updateEditor();\n\n        $(this.$el).find('.edit-value-input').focus(); // focus on the edit element\n    },\n    beforeUpdate: function() {\n        this.updateData();\n    },\n    updated: function() {\n        if( this.autochange ) {\n            // change triggered by ourself, skip\n            this.autochange = false;\n        }\n        else {\n            this.updateEditor();\n        }\n    },\n    beforeDestroy: function() {\n        // make sure the value was set\n        if( !this.emitted ) {\n            if( this.isBasicDataType()) {\n                var elt = $(this.$el).find('.edit-value-input');\n                var val = elt.val();\n                this.$emit(\"edited\", val);\n            }\n            else {\n                this.saveChanges();\n            }\n        }\n    },\n    methods: {\n        hash: function() {\n            var str = new String(this.v).toString();\n            return str.split('').reduce((prevHash, currVal) => (((prevHash << 5) - prevHash) + currVal.charCodeAt(0))|0, 0);\n        },\n\n        updateEditor: function() {\n            if( this.dataType === \"object\" ) {\n                if( !this.editor && $(this.$el).find('.field-editor')[0] !== undefined ) {\n                    // bind the json editor\n                    this.editor = new JSONEditor(\n                        $(this.$el).find('.field-editor')[0], {\n                            modes: ['tree', 'code', 'text' ],\n                            onChange: () => {\n                                try {\n                                    var json = this.editor.get();\n                                    this.autochange = true;\n                                    this.$emit('edited', json);\n                                }\n                                catch(e) {}\n                            }\n                        });\n                }\n\n                if( this.editor ) {\n                    this.editor.set(this.v || {});\n                }\n            }\n        },\n        resolveDatatype() {\n            // determine datatype of the value\n            var resolvedType = this.type ? this.type.toLowerCase() : typeof this.v;\n\n            // If \"*\", resolve the type by detecting it dynamically from value\n            if( resolvedType.indexOf(\"*\") !== -1 ) {\n                resolvedType = window.DualBox.Type.detectType(this.v).toLowerCase();\n            }\n\n            // Check if we have a template type. If so, determine current index and embedded type\n            var templateType = null;\n            if( resolvedType.startsWith(\"array\") ) {\n                templateType = \"array\";\n                this.deserializedValue = this.v || [];\n            }\n            else if( resolvedType.startsWith(\"map\") ) {\n                templateType = \"map\";\n                this.deserializedValue = window.DualBox.Type.deserialize(this.v || {\n                    \"metadata\":{\n                        \"type\":\"Map<String,\"+ this.firstLetterUppercase( this.getEmbeddedType(resolvedType) )+\">\"\n                    },\n                    \"data\": {}\n                });\n            }\n\n            if( templateType ) {\n                this.dataType = templateType;\n                this.embeddedType = this.getEmbeddedType(resolvedType);\n                if( this.selectedIndex == null ) {\n                    var firstKey = this.deserializedValue.keys().next();\n                    if( firstKey && firstKey.value ) {\n                        this.selectedIndex = firstKey.value;\n                    }\n                }\n            }\n            else {\n                this.dataType = resolvedType;\n            }\n\n            // Finally, transform to object if not a basic value\n            if( [\"string\", \"number\", \"boolean\", \"array\", \"map\"].indexOf(this.dataType) == -1 ) {\n                this.dataType = \"object\";\n            }\n\n            console.log(`Type: ${this.type}, Datatype: ${this.dataType}, embeddedType: ${this.embeddedType}`);\n        },\n\n        initData: function() {\n            this.v = this.v;\n            this.resolveDatatype();\n            this.selectNextIndex();\n        },\n\n        updateData: function() {\n            this.resolveDatatype();\n        },\n\n        isBasicDataType()  {\n            return this.dataType == \"string\" ||\n                this.dataType == \"number\" ||\n                this.dataType == \"boolean\";\n        },\n\n        serialize( value ) {\n            if( this.isTemplateType() ) {\n                if( this.isArrayType() ) {\n                    return value; // we store arrays as is\n                }\n                else if( this.isMapType() ) {\n                    return window.DualBox.Type.serialize(value);\n                }\n            }\n            else {\n                return value;\n            }\n        },\n\n        saveChanges: function() {\n            this.$forceUpdate();\n\n            if( this.isTemplateType() ) {\n                this.$emit(\"edited\", this.serialize(this.deserializedValue));\n                this.emitted = true;\n            }\n            else if( this.isObjectType() ) {\n                // emit the result to the parent Vue\n                this.$emit(\"edited\", this.editor.get());\n                this.emitted = true;\n            }\n        },\n\n        setStringValue: function(e) {\n            var val = $(e.target).val();\n            this.$emit(\"edited\", val);\n            this.emitted = true;\n        },\n\n        setBoolValue: function(e) {\n            var val = $(e.target).val() == \"true\";\n            this.$emit(\"edited\", val);\n            this.emitted = true;\n        },\n\n        setNumberValue: function(e) {\n            var val = parseFloat($(e.target).val());\n            this.$emit(\"edited\", val);\n            this.emitted = true;\n        },\n\n        setNullValue: function() {\n            this.$forceUpdate();\n\n            // emit the result to the parent Vue\n            this.$emit(\"edited\", null);\n        },\n\n        selectNextIndex: function() {\n            if( this.isArrayType() ) {\n                this.selectedIndex = this.deserializedValue.length > 0 ? 0 : null;\n            }\n            else if( this.isMapType() ) {\n                var keys = this.deserializedValue.keys();\n                var next = keys.next();\n                this.selectedIndex = next ? next.value : null;\n            }\n        },\n\n        deleteValue: function(e) {\n            this.selectNextIndex();\n            this.$forceUpdate();\n\n            // emit the result to the parent Vue\n            this.$emit(\"edited\", undefined);\n        },\n\n        isArrayType: function() {\n            return this.dataType == \"array\";\n        },\n\n        isMapType: function() {\n            return this.dataType == \"map\";\n        },\n\n        isObjectType: function() {\n            return this.dataType == \"object\";\n        },\n\n        isTemplateType: function() {\n            return this.isArrayType() || this.isMapType();\n        },\n\n        getEmbeddedType: function(type) {\n            var start = type.indexOf('<') + 1;\n            var end   = type.lastIndexOf('>');\n            if( type.toLowerCase().startsWith('array') ) {\n                return type.substr(start, end - start).trim().toLowerCase();\n            }\n            else if( type.toLowerCase().startsWith('map') ) {\n                var sub = type.substr(start, end - start);\n                return sub.substr(sub.indexOf(',') + 1).trim().toLowerCase();\n            }\n        },\n\n        firstLetterUppercase: function(s)  {\n            return s.charAt(0).toUpperCase() + s.slice(1)\n        },\n\n        selectIndex: function(index) {\n            if( this.selectedIndex !== index ) {\n                this.selectedIndex = index;\n                this.$forceUpdate();\n            }\n        },\n\n        isSelectedIndex: function(index) {\n            return index == this.selectedIndex;\n        },\n\n        getElement: function(i) {\n            if( Array.isArray(this.v) ) {\n                return this.deserializedValue[i];\n            }\n            else {\n                return this.deserializedValue.get(i);\n            }\n        },\n\n        onSubValueEdited: function(index, newValue) {\n            console.log(`Edited at index ${index}: ${JSON.stringify(newValue)}`);\n            if( this.isArrayType() ) {\n                if( newValue === undefined ) {\n                    // we just remove this value\n                    this.deserializedValue.splice(index, 1);\n                }\n                else {\n                    this.deserializedValue[index] = newValue;\n                }\n            }\n            else if ( this.isMapType() ) {\n                if( newValue === undefined ) {\n                    this.deserializedValue.delete(index);\n                }\n                else {\n                    this.deserializedValue.set(index, newValue);\n                }\n            }\n            this.saveChanges();\n            this.$forceUpdate();\n        },\n\n        addItem: function() {\n            if( this.isArrayType() ) {\n                this.deserializedValue[ this.deserializedValue.length ] = null;\n                this.selectedIndex = this.deserializedValue.length - 1;\n                this.saveChanges();\n                this.$forceUpdate();\n            }\n            else if( this.isMapType() ) {\n                this.swalFixBootstrapModal();\n                swal({\n                    input: 'text',\n                    title: 'Enter map key',\n                }).then((result) => {\n                    this.swalRestoreBootstrapModal();\n                    if( result && result.value ) {\n                        this.selectedIndex = result.value;\n                        this.deserializedValue.set(result.value, null);\n                        this.saveChanges();\n                        this.$forceUpdate();\n                    }\n                });\n            }\n        },\n\n        // call this before showing SweetAlert:\n        swalFixBootstrapModal() {\n          var modal = $(\"body\").find('.modal[tabindex=\"-1\"]');\n          if (!modal) return;\n          modal.removeAttr('tabindex');\n          modal.addClass('js-swal-fixed');\n        },\n\n        // call this before hiding SweetAlert (inside done callback):\n        swalRestoreBootstrapModal() {\n          var modal = $(\"body\").find('.modal.js-swal-fixed');\n          if (!modal) return;\n          modal.attr('tabindex', '-1');\n          modal.removeClass('js-swal-fixed');\n        }\n    }\n}\n</script>\n"]}, media: undefined });
+    inject("data-v-b2b26ee0_0", { source: "\n.template-value-container[data-v-b2b26ee0], .field-editor[data-v-b2b26ee0] {\n    margin-bottom: 10px;\n}\n.template-value-message[data-v-b2b26ee0] {\n    text-align: center;\n    margin-top: 30px;\n    margin-bottom: 30px;\n    width: 100%;\n    opacity: 0.5;\n}\n", map: {"version":3,"sources":["/home/seb/dev/dualbox/editor/js/src/v/templates/editValue.vue"],"names":[],"mappings":";AACA;IACA,mBAAA;AACA;AAEA;IACA,kBAAA;IACA,gBAAA;IACA,mBAAA;IACA,WAAA;IACA,YAAA;AACA","file":"editValue.vue","sourcesContent":["<style scoped>\n    .template-value-container, .field-editor {\n        margin-bottom: 10px;\n    }\n\n    .template-value-message {\n        text-align: center;\n        margin-top: 30px;\n        margin-bottom: 30px;\n        width: 100%;\n        opacity: 0.5;\n    }\n</style>\n\n<template>\n    <div class=\"w-100\">\n        <p style=\"display: none;\">{{cIndex}}</p>\n        <template v-if=\"isBasicDataType()\">\n            <template v-if=\"dataType === 'string'\">\n                <input class=\"edit-value-input\" type=\"text\" @keyup.enter=\"setStringValue\" @keyup.esc=\"setStringValue\" :value=\"v\" @focus=\"$event.target.select()\"></input>\n            </template>\n            <template v-else-if=\"dataType === 'boolean'\">\n                <select class=\"edit-value-input\" @change=\"setBoolValue\">\n                    <option value=\"true\" :selected=\"v == true\">True</option>\n                    <option value=\"false\" :selected=\"v == false\">False</option>\n                </select>\n            </template>\n            <template v-else-if=\"dataType === 'number'\">\n                <input class=\"edit-value-input\" type=\"number\" @keyup.enter=\"setNumberValue\" @blur=\"setNumberValue\" :value=\"v\" @focus=\"$event.target.select()\" style=\"width: 40px;\"></input>\n            </template>\n        </template>\n        <template v-else>\n            <!-- we already are in a modal, don't instanciate another one -->\n            <template v-if=\"isTemplateType()\">\n                <div class=\"container template-value-container\" style=\"border: 1px solid rgba(0, 0, 0, 0.125);\">\n                    <div v-if=\"isArrayType()\" class=\"row\" style=\"background-color: rgba(0,0,0,.125);\">Array Editor</div>\n                    <div v-else-if=\"isMapType()\" class=\"row\" style=\"background-color: rgba(0,0,0,.125);\">Map Editor</div>\n                    <div class=\"row\" style=\"1px solid rgba(0,0,0,.125);\">\n                        <div class=\"col list-group-flush\" :class=\"{ 'col-1' : isArrayType(), 'col-2' : isMapType()}\" style=\"padding: 0; background-color: white; overflow-y: auto; border-right: 1px solid rgba(0, 0, 0, 0.125);\">\n                            <button v-for=\"index in deserializedValue.keys()\" :key=\"index\" :data-key=\"index\" type=\"button\" class=\"list-group-item list-group-item-action\" :class=\"{ active: isSelectedIndex(index) }\" style=\"text-align: center;\" @click=\"selectIndex(index)\">{{index}}</button>\n                            <button type=\"button\" @click=\"addItem\" class=\"list-group-item list-group-item-action add-item\" style=\"text-align: center;\"><i class=\"fas fa-plus-circle\"></i></button>\n                        </div>\n                        <div class=\"col\" style=\"padding: 10px\">\n                            <edit-value v-if=\"selectedIndex !== undefined && selectedIndex !== null\" :cIndex=\"selectedIndex\" :type=\"embeddedType\" :v=\"getElement(selectedIndex)\" @edited=\"onSubValueEdited(selectedIndex, $event)\"></edit-value>\n                            <p v-else class=\"template-value-message\">Select an element to edit.</p>\n                        </div>\n                    </div>\n                </div>\n            </template>\n            <template v-else>\n                <div class=\"field-editor\" :data-value=\"hash()\"></div>\n            </template>\n        </template>\n\n        <!-- set null and delete buttons -->\n        <div class=\"d-inline-block float-right\">\n            <button class=\"btn btn-secondary btn-sm btn-xs\" title=\"set Null\" @click=\"setNullValue\">null</button>\n            <button class=\"btn btn-danger btn-sm btn-xs\" title=\"delete value\" @click=\"deleteValue\" style=\"margin-left: 0px;\"><i class=\"fas fa-trash\"></i></button>\n        </div>\n    </div>\n\n</template>\n\n<script>\nimport _ from 'lodash-es';\nimport swal from 'sweetalert2';\nimport JSONEditor from '@dualbox/dualbox-lib-jsoneditor';\n\nString.prototype.hashCode = function() {\n    var hash = 0, i, chr;\n    if (this.length === 0) return hash;\n    for (i = 0; i < this.length; i++) {\n        chr   = this.charCodeAt(i);\n        hash  = ((hash << 5) - hash) + chr;\n        hash |= 0; // Convert to 32bit integer\n    }\n    return hash;\n};\n\nexport default {\n    name : \"edit-value\",\n    props: [\n        // required\n        \"v\",     // the value\n        \"type\",  // the dualbox type of the value\n\n        // specific properties (for recursivity)\n        \"cIndex\"  // index for reference when in an array\n    ],\n    data: function () {\n        return {\n            \"dataType\": null,                    // the real javascript dataType of this.v\n            \"deserializedValue\": null,\n\n            // if type is a collection (dataType==\"map\" or dataType==\"array\")\n            \"embeddedType\": null,    // the embedded type of this templated collection\n            \"selectedIndex\": null,   // the current index of the element we are editing\n        };\n    },\n    created: function() {\n        this.view = window.dualboxEditor.v;\n        this.editor = null;\n        this.edited = false;\n        this.initData();\n    },\n    mounted: function() {\n        var self = this;\n\n        this.updateEditor();\n\n        $(this.$el).find('.edit-value-input').focus(); // focus on the edit element\n    },\n    beforeUpdate: function() {\n        this.updateData();\n    },\n    updated: function() {\n        if( this.autochange ) {\n            // change triggered by ourself, skip\n            this.autochange = false;\n        }\n        else {\n            this.updateEditor();\n        }\n    },\n    beforeDestroy: function() {\n        // make sure the value was set\n        if( !this.emitted ) {\n            if( this.isBasicDataType()) {\n                var elt = $(this.$el).find('.edit-value-input');\n                var val = elt.val();\n                this.$emit(\"edited\", val);\n            }\n            else {\n                this.saveChanges();\n            }\n        }\n    },\n    methods: {\n        hash: function() {\n            var str = new String(this.v).toString();\n            return str.split('').reduce((prevHash, currVal) => (((prevHash << 5) - prevHash) + currVal.charCodeAt(0))|0, 0);\n        },\n\n        updateEditor: function() {\n            if( this.dataType === \"object\" ) {\n                if( !this.editor && $(this.$el).find('.field-editor')[0] !== undefined ) {\n                    // bind the json editor\n                    this.editor = new JSONEditor(\n                        $(this.$el).find('.field-editor')[0], {\n                            modes: ['tree', 'code', 'text' ],\n                            onChange: () => {\n                                try {\n                                    var json = this.editor.get();\n                                    this.autochange = true;\n                                    this.$emit('edited', json);\n                                }\n                                catch(e) {}\n                            }\n                        });\n                }\n\n                if( this.editor ) {\n                    this.editor.set(this.v || {});\n                }\n            }\n        },\n        resolveDatatype() {\n            // determine datatype of the value\n            var resolvedType = this.type ? this.type.toLowerCase() : typeof this.v;\n\n            // If \"*\", resolve the type by detecting it dynamically from value\n            if( resolvedType.indexOf(\"*\") !== -1 ) {\n                resolvedType = window.DualBox.Type.detectType(this.v).toLowerCase();\n            }\n\n            // Check if we have a template type. If so, determine current index and embedded type\n            var templateType = null;\n            if( resolvedType.startsWith(\"array\") ) {\n                templateType = \"array\";\n                this.deserializedValue = this.v || [];\n            }\n            else if( resolvedType.startsWith(\"map\") ) {\n                templateType = \"map\";\n                this.deserializedValue = window.DualBox.Type.deserialize(this.v || {\n                    \"metadata\":{\n                        \"type\":\"Map<String,\"+ this.firstLetterUppercase( this.getEmbeddedType(resolvedType) )+\">\"\n                    },\n                    \"data\": {}\n                });\n            }\n\n            if( templateType ) {\n                this.dataType = templateType;\n                this.embeddedType = this.getEmbeddedType(resolvedType);\n                if( this.selectedIndex == null ) {\n                    var firstKey = this.deserializedValue.keys().next();\n                    if( firstKey && firstKey.value ) {\n                        this.selectedIndex = firstKey.value;\n                    }\n                }\n            }\n            else {\n                this.dataType = resolvedType;\n            }\n\n            // Finally, transform to object if not a basic value\n            if( [\"string\", \"number\", \"boolean\", \"array\", \"map\"].indexOf(this.dataType) == -1 ) {\n                this.dataType = \"object\";\n            }\n            //console.log(`Type: ${this.type}, Datatype: ${this.dataType}, embeddedType: ${this.embeddedType}`);\n        },\n\n        initData: function() {\n            this.v = this.v;\n            this.resolveDatatype();\n            this.selectNextIndex();\n        },\n\n        updateData: function() {\n            this.resolveDatatype();\n        },\n\n        isBasicDataType()  {\n            return this.dataType == \"string\" ||\n                this.dataType == \"number\" ||\n                this.dataType == \"boolean\";\n        },\n\n        serialize( value ) {\n            if( this.isTemplateType() ) {\n                if( this.isArrayType() ) {\n                    return value; // we store arrays as is\n                }\n                else if( this.isMapType() ) {\n                    return window.DualBox.Type.serialize(value);\n                }\n            }\n            else {\n                return value;\n            }\n        },\n\n        saveChanges: function() {\n            this.$forceUpdate();\n\n            if( this.isTemplateType() ) {\n                this.$emit(\"edited\", this.serialize(this.deserializedValue));\n                this.emitted = true;\n            }\n            else if( this.isObjectType() ) {\n                // emit the result to the parent Vue\n                this.$emit(\"edited\", this.editor.get());\n                this.emitted = true;\n            }\n        },\n\n        setStringValue: function(e) {\n            var val = $(e.target).val();\n            this.$emit(\"edited\", val);\n            this.emitted = true;\n        },\n\n        setBoolValue: function(e) {\n            var val = $(e.target).val() == \"true\";\n            this.$emit(\"edited\", val);\n            this.emitted = true;\n        },\n\n        setNumberValue: function(e) {\n            var val = parseFloat($(e.target).val());\n            this.$emit(\"edited\", val);\n            this.emitted = true;\n        },\n\n        setNullValue: function() {\n            this.$forceUpdate();\n\n            // emit the result to the parent Vue\n            this.$emit(\"edited\", null);\n        },\n\n        selectNextIndex: function() {\n            if( this.isArrayType() ) {\n                this.selectedIndex = this.deserializedValue.length > 0 ? 0 : null;\n            }\n            else if( this.isMapType() ) {\n                var keys = this.deserializedValue.keys();\n                var next = keys.next();\n                this.selectedIndex = next ? next.value : null;\n            }\n        },\n\n        deleteValue: function(e) {\n            this.selectNextIndex();\n            this.$forceUpdate();\n\n            // emit the result to the parent Vue\n            this.$emit(\"edited\", undefined);\n        },\n\n        isArrayType: function() {\n            return this.dataType == \"array\";\n        },\n\n        isMapType: function() {\n            return this.dataType == \"map\";\n        },\n\n        isObjectType: function() {\n            return this.dataType == \"object\";\n        },\n\n        isTemplateType: function() {\n            return this.isArrayType() || this.isMapType();\n        },\n\n        getEmbeddedType: function(type) {\n            var start = type.indexOf('<') + 1;\n            var end   = type.lastIndexOf('>');\n            if( type.toLowerCase().startsWith('array') ) {\n                return type.substr(start, end - start).trim().toLowerCase();\n            }\n            else if( type.toLowerCase().startsWith('map') ) {\n                var sub = type.substr(start, end - start);\n                return sub.substr(sub.indexOf(',') + 1).trim().toLowerCase();\n            }\n        },\n\n        firstLetterUppercase: function(s)  {\n            return s.charAt(0).toUpperCase() + s.slice(1)\n        },\n\n        selectIndex: function(index) {\n            if( this.selectedIndex !== index ) {\n                this.selectedIndex = index;\n                this.$forceUpdate();\n            }\n        },\n\n        isSelectedIndex: function(index) {\n            return index == this.selectedIndex;\n        },\n\n        getElement: function(i) {\n            if( Array.isArray(this.v) ) {\n                return this.deserializedValue[i];\n            }\n            else {\n                return this.deserializedValue.get(i);\n            }\n        },\n\n        onSubValueEdited: function(index, newValue) {\n            console.log(`Edited at index ${index}: ${JSON.stringify(newValue)}`);\n            if( this.isArrayType() ) {\n                if( newValue === undefined ) {\n                    // we just remove this value\n                    this.deserializedValue.splice(index, 1);\n                }\n                else {\n                    this.deserializedValue[index] = newValue;\n                }\n            }\n            else if ( this.isMapType() ) {\n                if( newValue === undefined ) {\n                    this.deserializedValue.delete(index);\n                }\n                else {\n                    this.deserializedValue.set(index, newValue);\n                }\n            }\n            this.saveChanges();\n            this.$forceUpdate();\n        },\n\n        addItem: function() {\n            if( this.isArrayType() ) {\n                this.deserializedValue[ this.deserializedValue.length ] = null;\n                this.selectedIndex = this.deserializedValue.length - 1;\n                this.saveChanges();\n                this.$forceUpdate();\n            }\n            else if( this.isMapType() ) {\n                this.swalFixBootstrapModal();\n                swal({\n                    input: 'text',\n                    title: 'Enter map key',\n                }).then((result) => {\n                    this.swalRestoreBootstrapModal();\n                    if( result && result.value ) {\n                        this.selectedIndex = result.value;\n                        this.deserializedValue.set(result.value, null);\n                        this.saveChanges();\n                        this.$forceUpdate();\n                    }\n                });\n            }\n        },\n\n        // call this before showing SweetAlert:\n        swalFixBootstrapModal() {\n          var modal = $(\"body\").find('.modal[tabindex=\"-1\"]');\n          if (!modal) return;\n          modal.removeAttr('tabindex');\n          modal.addClass('js-swal-fixed');\n        },\n\n        // call this before hiding SweetAlert (inside done callback):\n        swalRestoreBootstrapModal() {\n          var modal = $(\"body\").find('.modal.js-swal-fixed');\n          if (!modal) return;\n          modal.attr('tabindex', '-1');\n          modal.removeClass('js-swal-fixed');\n        }\n    }\n}\n</script>\n"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$8 = "data-v-33721d92";
+  const __vue_scope_id__$8 = "data-v-b2b26ee0";
   /* module identifier */
   const __vue_module_identifier__$8 = undefined;
   /* functional template */
   const __vue_is_functional_template__$8 = false;
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var EditValueVue = normalizeComponent_1(
+  const __vue_component__$8 = normalizeComponent_1(
     { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
     __vue_inject_styles__$8,
     __vue_script__$8,
     __vue_scope_id__$8,
     __vue_is_functional_template__$8,
     __vue_module_identifier__$8,
+    false,
     browser,
+    undefined,
     undefined
   );
 
@@ -65041,8 +65078,8 @@ var script$9 = {
         "readonlyReason"
     ],
     components : {
-        'modal' : ModalVue,
-        'edit-value' : EditValueVue,
+        'modal' : __vue_component__$6,
+        'edit-value' : __vue_component__$8,
     },
     data: function () {
         return {
@@ -65255,16 +65292,20 @@ __vue_render__$9._withStripped = true;
   const __vue_is_functional_template__$9 = false;
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var DisplayValueVue = normalizeComponent_1(
+  const __vue_component__$9 = normalizeComponent_1(
     { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
     __vue_inject_styles__$9,
     __vue_script__$9,
     __vue_scope_id__$9,
     __vue_is_functional_template__$9,
     __vue_module_identifier__$9,
+    false,
     browser,
+    undefined,
     undefined
   );
 
@@ -65275,8 +65316,8 @@ var script$a = {
         "app"
     ],
     components: {
-        "display-type" : DisplayTypeVue,
-        "display-value" : DisplayValueVue,
+        "display-type" : __vue_component__$7,
+        "display-value" : __vue_component__$9,
     },
     data: function () {
         return {
@@ -66719,16 +66760,20 @@ __vue_render__$a._withStripped = true;
   const __vue_is_functional_template__$a = false;
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var editMainSettingsVue = normalizeComponent_1(
+  const __vue_component__$a = normalizeComponent_1(
     { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
     __vue_inject_styles__$a,
     __vue_script__$a,
     __vue_scope_id__$a,
     __vue_is_functional_template__$a,
     __vue_module_identifier__$a,
+    false,
     browser,
+    undefined,
     undefined
   );
 
@@ -66739,9 +66784,9 @@ var script$b = {
         "id",     // the GraphNode object
     ],
     components: {
-        "display-type"  : DisplayTypeVue,
-        "display-value" : DisplayValueVue,
-        "graph-node"    : GraphNodeVue
+        "display-type"  : __vue_component__$7,
+        "display-value" : __vue_component__$9,
+        "graph-node"    : __vue_component__
     },
     data: function () {
         return {
@@ -69030,16 +69075,20 @@ __vue_render__$b._withStripped = true;
   const __vue_is_functional_template__$b = false;
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var editNodeSettingsVue = normalizeComponent_1(
+  const __vue_component__$b = normalizeComponent_1(
     { render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
     __vue_inject_styles__$b,
     __vue_script__$b,
     __vue_scope_id__$b,
     __vue_is_functional_template__$b,
     __vue_module_identifier__$b,
+    false,
     browser,
+    undefined,
     undefined
   );
 
@@ -73650,7 +73699,7 @@ var script$c = {
         "id"
     ],
     components: {
-        "display-value" : DisplayValueVue,
+        "display-value" : __vue_component__$9,
     },
     data: function () {
         return {
@@ -73666,7 +73715,6 @@ var script$c = {
     beforeUpdate: function() {
         this.n = this.view.m.getNode(this.id); // it breaks updating node name
         this.debug = this.n.getSnapshot(); // shortcut
-        this.$forceupdate();
     },
     mounted: function() {
 
@@ -73887,7 +73935,7 @@ var __vue_render__$c = function() {
                   attrs: {
                     id: "debug-node-inputs-collapse",
                     "aria-labelledby": "debug-node-inputs",
-                    "data-parent": "#card-debug"
+                    "data-parent": "#debug-node"
                   }
                 },
                 [
@@ -73971,8 +74019,7 @@ var __vue_render__$c = function() {
                                         attrs: {
                                           v: _vm.n.m.getSnapshotValue(
                                             _vm.getInputData(key).value
-                                          ),
-                                          readonly: "true"
+                                          )
                                         }
                                       })
                                     ]
@@ -73990,8 +74037,7 @@ var __vue_render__$c = function() {
                                         attrs: {
                                           v: _vm.n.m.getSnapshotValue(
                                             _vm.getInputData(key).default
-                                          ),
-                                          readonly: "true"
+                                          )
                                         }
                                       })
                                     ]
@@ -74021,7 +74067,7 @@ var __vue_render__$c = function() {
                   attrs: {
                     id: "debug-node-cache-collapse",
                     "aria-labelledby": "debug-node-cache",
-                    "data-parent": "#card-debug"
+                    "data-parent": "#debug-node"
                   }
                 },
                 [
@@ -74053,8 +74099,7 @@ var __vue_render__$c = function() {
                                     attrs: {
                                       v: _vm.n.m.getSnapshotValue(
                                         _vm.debug.cache[_vm.key]
-                                      ),
-                                      readonly: "true"
+                                      )
                                     }
                                   })
                                 ],
@@ -74090,7 +74135,7 @@ var __vue_render__$c = function() {
                   attrs: {
                     id: "debug-node-events-collapse",
                     "aria-labelledby": "debug-node-events",
-                    "data-parent": "#card-debug"
+                    "data-parent": "#debug-node"
                   }
                 },
                 [
@@ -74242,8 +74287,7 @@ var __vue_render__$c = function() {
                                                   v: _vm.n.m.getSnapshotValue(
                                                     _vm.debug.times.emissions
                                                       .lastData.data[key]
-                                                  ),
-                                                  readonly: "true"
+                                                  )
                                                 }
                                               })
                                             ],
@@ -74281,7 +74325,7 @@ var __vue_render__$c = function() {
                   attrs: {
                     id: "debug-node-evaluations-collapse",
                     "aria-labelledby": "debug-node-evaluations",
-                    "data-parent": "#card-debug"
+                    "data-parent": "#debug-node"
                   }
                 },
                 [
@@ -74696,7 +74740,7 @@ __vue_render__$c._withStripped = true;
   /* style */
   const __vue_inject_styles__$c = function (inject) {
     if (!inject) return
-    inject("data-v-27e694bc_0", { source: "\n.card-debug .card-body {\n    font-size: 12px;\n    padding-left: 5px;\n    padding-right: 5px;\n}\n", map: {"version":3,"sources":["/home/seb/dev/dualbox/editor/js/src/v/templates/debugNodeInfos.vue"],"names":[],"mappings":";AACA;IACA,eAAA;IACA,iBAAA;IACA,kBAAA;AACA","file":"debugNodeInfos.vue","sourcesContent":["<style>\n    .card-debug .card-body {\n        font-size: 12px;\n        padding-left: 5px;\n        padding-right: 5px;\n    }\n</style>\n\n<template>\n<div class=\"card-debug h100\" id=\"debug-node\">\n    <div style=\"padding-left: 10px; padding-top: 10px; padding-right: 10px;\">\n        <h2 class=\"edit-dualbox-node-id\">\n            <div class=\"dualbox-node-name\">\n                <span class=\"text-truncate d-inline-block\" style=\"width: 290px\" :data-id=\"id\">{{n.graphId}}</span>\n            </div>\n            <div class=\"dualbox-node-name-edit\" style=\"display: none;\">\n                <input type=\"text\" class=\"form-control dualbox-node-name-input\" style=\"display: inline-block;\" :value=\"n.graphId\" :data-type=\"n.type\" autofocus/>\n                <button class=\"btn btn-primary btn-save-node-name-change\" :data-id=\"n.graphId\" :data-type=\"n.type\" style=\"display: inline-block;\">Save</button>\n            </div>\n        </h2>\n        <p><small class=\"edit-dualbox-node-package-name\">{{n.getPackageName()}}</small></p>\n    </div>\n\n    <div class=\"edit-body\">\n        <div class=\"card card-state\">\n            <div class=\"card-header\" id=\"debug-node-state\" data-toggle=\"collapse\" data-target=\"#debug-node-state-collapse\" aria-expanded=\"true\" aria-controls=\"debug-node-state-collapse\">\n                <h5 class=\"mb-0 btn-link\">State</h5>\n            </div>\n\n            <div id=\"debug-node-state-collapse\" class=\"collapse show\" aria-labelledby=\"debug-node-state\" data-parent=\"#debug-node\">\n                <div class=\"card-body\" style=\"padding-left: 15px;\">\n                    <table class=\"table-desc table-striped\">\n                        <thead class=\"thead-dark\">\n                            <th>Key</th>\n                            <th>Value</th>\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td>status</td>\n                                <td><span :class=\"{'card-status-idle':n.isSnapshotStatus(0),'card-status-computing':n.isSnapshotStatus(1),'card-status-awaiting-data':n.isSnapshotStatus(2), 'card-status-ready':n.isSnapshotStatus(3)}\">{{ getSnapshotStatus(n) }}</span></td>\n                            </tr>\n                            <tr><td>invalidateSent</td><td>{{debug.state.invalidateSent}}</td></tr>\n                            <tr><td>readSent</td><td>{{debug.state.readSent}}</td></tr>\n                            <tr><td>allowedToRestart</td><td>{{debug.state.allowedToRestart}}</td></tr>\n                            <tr><td>evaluating</td><td>{{debug.state.evaluating}}</td></tr>\n                            <tr><td>initialized</td><td>{{debug.state.initialized}}</td></tr>\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n        </div>\n\n\n        <div v-if=\"n.hasInputs()\" class=\"card card-settings\">\n            <div class=\"card-header\" id=\"debug-node-inputs\" data-toggle=\"collapse\" data-target=\"#debug-node-inputs-collapse\" aria-expanded=\"false\" aria-controls=\"debug-node-inputs-collapse\">\n                <h5 class=\"mb-0 btn-link\">Data <small><span class=\"badge badge-secondary\">{{ n.getInputsNames().length }}</span></small></h5>\n            </div>\n            <div id=\"debug-node-inputs-collapse\" class=\"collapse\" aria-labelledby=\"debug-node-inputs\" data-parent=\"#card-debug\">\n                <div class=\"card-body\">\n                    <table class=\"table-desc table-striped\">\n                        <thead class=\"thead-dark\">\n                            <th>Input</th>\n                            <th>Valid</th>\n                            <th>Type</th>\n                            <th>Value</th>\n                            <th>Default</th>\n                        </thead>\n                        <tbody>\n                            <tr v-for=\"key in n.getInputsNames()\" :key=\"n.id + '-input-' + key\">\n                                <td>\n                                    {{key}}\n                                    <button v-if=\"n.hasInputDesc(key)\" type=\"button\" class=\"btn btn-transparent\" data-toggle=\"tooltip\" data-placement=\"right\" :title=\"n.getInputDesc(key)\" style=\"padding: 0;\"><i class=\"text-info far fa-question-circle\"></i></button>\n                                </td>\n                                <td>{{ getInputData(key).valid }}</td>\n                                <td>\n                                    <template v-if=\"getInputData(key).value\">\n                                        <template v-if=\"getInputData(key).value.metadata && getInputData(key).value.metadata.type\">{{getInputData(key).value.metadata}}</template>\n                                        <template v-else>{{typeof n.m.getSnapshotValue(getInputData(key).value) }}</template>\n                                    </template>\n                                </td>\n                                <td>\n                                    <template v-if=\"getInputData(key).value\">\n                                        <display-value :v=\"n.m.getSnapshotValue(getInputData(key).value)\" readonly=true></display-value>\n                                    </template>\n                                </td>\n                                <td>\n                                    <template v-if=\"getInputData(key).default\">\n                                        <display-value :v=\"n.m.getSnapshotValue(getInputData(key).default)\" readonly=true></display-value>\n                                    </template>\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n        </div>\n\n        <div v-if=\"debug.cache\" class=\"card card-settings\">\n            <div class=\"card-header\" id=\"debug-node-cache\" data-toggle=\"collapse\" data-target=\"#debug-node-cache-collapse\" aria-expanded=\"false\" aria-controls=\"debug-node-cache-collapse\">\n                <h5 class=\"mb-0 btn-link\">Cache</h5>\n            </div>\n            <div id=\"debug-node-cache-collapse\" class=\"collapse\" aria-labelledby=\"debug-node-cache\" data-parent=\"#card-debug\">\n                <div class=\"card-body\" style=\"padding-left: 15px;\">\n                    <table class=\"table-desc table-striped\">\n                        <thead class=\"thead-dark\">\n                            <th>Output</th>\n                            <th>Value</th>\n                        </thead>\n                        <tbody>\n                            <tr v-for=\"key in Object.keys(debug.cache)\" :key=\"n.id + '-cache-' + key\">\n                                <tr>\n                                    <td>{{key}}</td>\n                                    <td><display-value :v=\"n.m.getSnapshotValue(debug.cache[key])\" readonly=true></display-value></td>\n                                </tr>\n                            }\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n        </div>\n\n        <div v-if=\"debug.times && debug.times.emissions && (debug.times.emissions.lastRead || debug.times.emissions.lastInvalidate || debug.times.emissions.lastData )\" class=\"card card-settings\">\n            <div class=\"card-header\" id=\"debug-node-events\" data-toggle=\"collapse\" data-target=\"#debug-node-events-collapse\" aria-expanded=\"false\" aria-controls=\"debug-node-events-collapse\">\n                <h5 class=\"mb-0 btn-link\">Last events</h5>\n            </div>\n            <div id=\"debug-node-events-collapse\" class=\"collapse\" aria-labelledby=\"debug-node-events\" data-parent=\"#card-debug\">\n                <div class=\"card-body\" style=\"padding-left: 15px;\">\n\n                    <div v-if=\"debug.times.emissions.lastRead\" class=\"mb-3\">\n                        <p><b><u>Last read {{showNumber(debug.times.emissions.nbRead)}}</u> <span class=\"float-right\">{{ showTime(debug.times.emissions.lastRead.date) }}</span></b></p>\n                        <span>Missing: <b>{{ debug.times.emissions.lastRead.data.join(', ') }}</b></span><br/>\n                    </div>\n\n                    <div v-if=\"debug.times.emissions.lastInvalidate\" class=\"mb-3\">\n                        <p><b><u>Last Invalidate {{showNumber(debug.times.emissions.nbInvalidate)}}</u> <span class=\"float-right\">{{ showTime(debug.times.emissions.lastInvalidate.date) }}</span></b></p>\n                        <span>Invalidated keys: <b>{{ debug.times.emissions.lastInvalidate.data.join(', ') }}</b></span><br/>\n                    </div>\n\n                    <div v-if=\"debug.times.emissions.lastData\" class=\"mb-3\">\n                        <p><b><u>Last Data {{ showNumber(debug.times.emissions.nbData) }}</u> <span class=\"float-right\">{{ showTime(debug.times.emissions.lastData.date) }}</span></b></p>\n                        <table class=\"table-desc table-striped\">\n                            <thead class=\"thead-dark\">\n                                <th>Output</th>\n                                <th>Value</th>\n                            </thead>\n                            <tbody>\n                                <tr v-for=\"key in Object.keys(debug.times.emissions.lastData.data)\"  :key=\"n.id + '-cache-' + key\">\n                                    <td>{{key}}</td>\n                                    <td><display-value :v=\"n.m.getSnapshotValue(debug.times.emissions.lastData.data[key])\" readonly=true></display-value></td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div v-if=\"debug.times && debug.times.evaluations && (debug.times.evaluations.lastStart || debug.times.evaluations.lastEnd || debug.times.evaluations.lastCancel )\" class=\"card card-settings\">\n            <div class=\"card-header\" id=\"debug-node-evaluations\" data-toggle=\"collapse\" data-target=\"#debug-node-evaluations-collapse\" aria-expanded=\"false\" aria-controls=\"debug-node-evaluations-collapse\">\n                <h5 class=\"mb-0 btn-link\">Last evaluations</h5>\n            </div>\n            <div id=\"debug-node-evaluations-collapse\" class=\"collapse\" aria-labelledby=\"debug-node-evaluations\" data-parent=\"#card-debug\">\n                <div class=\"card-body\" style=\"padding-left: 15px;\">\n\n                    <div v-if=\"debug.times.evaluations.lastStart\" class=\"mb-3\">\n                        <p><b><u>Last start</u> <span class=\"float-right\">{{ showTime(debug.times.evaluations.lastStart.date) }}</span></b></p>\n                    </div>\n\n                    <div v-if=\"debug.times.evaluations.lastEnd\" class=\"mb-3\">\n                        <p><b><u>Last end</u> <span class=\"float-right\">{{ showTime(debug.times.evaluations.lastEnd.date) }}</span></b></p>\n                    </div>\n\n                    <div v-if=\"debug.times.evaluations.lastCancel\" class=\"mb-3\">\n                        <p><b><u>Last Cancel</u> <span class=\"float-right\">{{ showTime(debug.times.evaluations.lastCancel.date) }}</span></b></p>\n                        <span>reason: <b>{{ debug.times.evaluations.lastCancel.reason }}</b></span><br/>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n\n        <div v-if=\"debug.performances\" class=\"card card-performances\">\n            <div class=\"card-header\" id=\"debug-node-performances\" data-toggle=\"collapse\" data-target=\"#debug-node-performances-collapse\" aria-expanded=\"false\" aria-controls=\"debug-node-performances-collapse\">\n                <h5 class=\"mb-0 btn-link\">Performances</h5>\n            </div>\n\n            <div id=\"debug-node-performances-collapse\" class=\"collapse\" aria-labelledby=\"debug-node-performances\" data-parent=\"#debug-node\">\n                <div class=\"card-body\" style=\"padding-left: 15px;\">\n                    <table class=\"table-desc table-striped\">\n                        <thead class=\"thead-dark\">\n                            <th>Stat</th>\n                            <th>Value</th>\n                        </thead>\n                        <tbody>\n                            <tr><td>min</td><td>{{debug.performances.min && debug.performances.min.toFixed(0)}}ms</td></tr>\n                            <tr><td>max</td><td>{{debug.performances.max && debug.performances.max.toFixed(0)}}ms</td></tr>\n                            <tr><td>avg</td><td>{{debug.performances.avg && debug.performances.avg.toFixed(0)}}ms</td></tr>\n                            <tr><td>total</td><td>{{debug.performances.total && debug.performances.total.toFixed(0)}}ms</td></tr>\n                            <tr><td>Nb of runs</td><td>{{debug.performances.nbRuns}}</td></tr>\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"modal debug-json-modal\" tabindex=\"-1\" role=\"dialog\">\n        <div class=\"modal-dialog\" role=\"document\">\n            <div class=\"modal-content\">\n                <div class=\"modal-header\">\n                    <h5 class=\"modal-title\">Value debugger</h5>\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                        <span aria-hidden=\"true\">&times;</span>\n                    </button>\n                </div>\n                <div class=\"modal-body\">\n                    <div class=\"json-editor\" style=\"height: 400px;\"></div>\n                </div>\n                <div class=\"modal-footer\">\n                    <button type=\"button\" class=\"btn btn-primary btn-save\">Save changes</button>\n                    <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n</template>\n\n<script>\nimport _ from 'lodash-es';\nimport moment from 'moment';\n\nimport DisplayValueVue from './displayValue.vue';\n\nexport default {\n    props: [\n        \"id\"\n    ],\n    components: {\n        \"display-value\" : DisplayValueVue,\n    },\n    data: function () {\n        return {\n            \"n\" : null,\n            \"debug\": null\n        };\n    },\n    created: function() {\n        this.view = window.dualboxEditor.v;\n        this.n = this.view.m.getNode(this.id);\n        this.debug = this.n.getSnapshot(); // shortcut\n    },\n    beforeUpdate: function() {\n        this.n = this.view.m.getNode(this.id); // it breaks updating node name\n        this.debug = this.n.getSnapshot(); // shortcut\n        this.$forceupdate();\n    },\n    mounted: function() {\n\n    },\n    methods: {\n        getSnapshotStatus : function(n) {\n            if( this.n.isSnapshotStatus(0) ) return \"IDLE\";\n            else if( this.n.isSnapshotStatus(1) ) return \"COMPUTING\";\n            else if( this.n.isSnapshotStatus(2) ) return \"WAITING\";\n            else if( this.n.isSnapshotStatus(3) ) return \"READY\";\n            else throw \"Error: unknown status\";\n        },\n\n        getInputData: function(key) {\n            return this.debug.data[key];\n        },\n\n        // show number if not null, undefined or 0\n        showNumber: function(n) {\n            return n? n: \"\";\n        },\n\n        showTime: function(d) {\n            return moment(d).format('HH:mm:ss.SSS');\n        }\n    }\n}\n</script>\n"]}, media: undefined });
+    inject("data-v-25f2255a_0", { source: "\n.card-debug .card-body {\n    font-size: 12px;\n    padding-left: 5px;\n    padding-right: 5px;\n}\n", map: {"version":3,"sources":["/home/seb/dev/dualbox/editor/js/src/v/templates/debugNodeInfos.vue"],"names":[],"mappings":";AACA;IACA,eAAA;IACA,iBAAA;IACA,kBAAA;AACA","file":"debugNodeInfos.vue","sourcesContent":["<style>\n    .card-debug .card-body {\n        font-size: 12px;\n        padding-left: 5px;\n        padding-right: 5px;\n    }\n</style>\n\n<template>\n<div class=\"card-debug h100\" id=\"debug-node\">\n    <div style=\"padding-left: 10px; padding-top: 10px; padding-right: 10px;\">\n        <h2 class=\"edit-dualbox-node-id\">\n            <div class=\"dualbox-node-name\">\n                <span class=\"text-truncate d-inline-block\" style=\"width: 290px\" :data-id=\"id\">{{n.graphId}}</span>\n            </div>\n            <div class=\"dualbox-node-name-edit\" style=\"display: none;\">\n                <input type=\"text\" class=\"form-control dualbox-node-name-input\" style=\"display: inline-block;\" :value=\"n.graphId\" :data-type=\"n.type\" autofocus/>\n                <button class=\"btn btn-primary btn-save-node-name-change\" :data-id=\"n.graphId\" :data-type=\"n.type\" style=\"display: inline-block;\">Save</button>\n            </div>\n        </h2>\n        <p><small class=\"edit-dualbox-node-package-name\">{{n.getPackageName()}}</small></p>\n    </div>\n\n    <div class=\"edit-body\">\n        <div class=\"card card-state\">\n            <div class=\"card-header\" id=\"debug-node-state\" data-toggle=\"collapse\" data-target=\"#debug-node-state-collapse\" aria-expanded=\"true\" aria-controls=\"debug-node-state-collapse\">\n                <h5 class=\"mb-0 btn-link\">State</h5>\n            </div>\n\n            <div id=\"debug-node-state-collapse\" class=\"collapse show\" aria-labelledby=\"debug-node-state\" data-parent=\"#debug-node\">\n                <div class=\"card-body\" style=\"padding-left: 15px;\">\n                    <table class=\"table-desc table-striped\">\n                        <thead class=\"thead-dark\">\n                            <th>Key</th>\n                            <th>Value</th>\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td>status</td>\n                                <td><span :class=\"{'card-status-idle':n.isSnapshotStatus(0),'card-status-computing':n.isSnapshotStatus(1),'card-status-awaiting-data':n.isSnapshotStatus(2), 'card-status-ready':n.isSnapshotStatus(3)}\">{{ getSnapshotStatus(n) }}</span></td>\n                            </tr>\n                            <tr><td>invalidateSent</td><td>{{debug.state.invalidateSent}}</td></tr>\n                            <tr><td>readSent</td><td>{{debug.state.readSent}}</td></tr>\n                            <tr><td>allowedToRestart</td><td>{{debug.state.allowedToRestart}}</td></tr>\n                            <tr><td>evaluating</td><td>{{debug.state.evaluating}}</td></tr>\n                            <tr><td>initialized</td><td>{{debug.state.initialized}}</td></tr>\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n        </div>\n\n\n        <div v-if=\"n.hasInputs()\" class=\"card card-settings\">\n            <div class=\"card-header\" id=\"debug-node-inputs\" data-toggle=\"collapse\" data-target=\"#debug-node-inputs-collapse\" aria-expanded=\"false\" aria-controls=\"debug-node-inputs-collapse\">\n                <h5 class=\"mb-0 btn-link\">Data <small><span class=\"badge badge-secondary\">{{ n.getInputsNames().length }}</span></small></h5>\n            </div>\n            <div id=\"debug-node-inputs-collapse\" class=\"collapse\" aria-labelledby=\"debug-node-inputs\" data-parent=\"#debug-node\">\n                <div class=\"card-body\">\n                    <table class=\"table-desc table-striped\">\n                        <thead class=\"thead-dark\">\n                            <th>Input</th>\n                            <th>Valid</th>\n                            <th>Type</th>\n                            <th>Value</th>\n                            <th>Default</th>\n                        </thead>\n                        <tbody>\n                            <tr v-for=\"key in n.getInputsNames()\" :key=\"n.id + '-input-' + key\">\n                                <td>\n                                    {{key}}\n                                    <button v-if=\"n.hasInputDesc(key)\" type=\"button\" class=\"btn btn-transparent\" data-toggle=\"tooltip\" data-placement=\"right\" :title=\"n.getInputDesc(key)\" style=\"padding: 0;\"><i class=\"text-info far fa-question-circle\"></i></button>\n                                </td>\n                                <td>{{ getInputData(key).valid }}</td>\n                                <td>\n                                    <template v-if=\"getInputData(key).value\">\n                                        <template v-if=\"getInputData(key).value.metadata && getInputData(key).value.metadata.type\">{{getInputData(key).value.metadata}}</template>\n                                        <template v-else>{{typeof n.m.getSnapshotValue(getInputData(key).value) }}</template>\n                                    </template>\n                                </td>\n                                <td>\n                                    <template v-if=\"getInputData(key).value\">\n                                        <display-value :v=\"n.m.getSnapshotValue(getInputData(key).value)\"></display-value>\n                                    </template>\n                                </td>\n                                <td>\n                                    <template v-if=\"getInputData(key).default\">\n                                        <display-value :v=\"n.m.getSnapshotValue(getInputData(key).default)\"></display-value>\n                                    </template>\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n        </div>\n\n        <div v-if=\"debug.cache\" class=\"card card-settings\">\n            <div class=\"card-header\" id=\"debug-node-cache\" data-toggle=\"collapse\" data-target=\"#debug-node-cache-collapse\" aria-expanded=\"false\" aria-controls=\"debug-node-cache-collapse\">\n                <h5 class=\"mb-0 btn-link\">Cache</h5>\n            </div>\n            <div id=\"debug-node-cache-collapse\" class=\"collapse\" aria-labelledby=\"debug-node-cache\" data-parent=\"#debug-node\">\n                <div class=\"card-body\" style=\"padding-left: 15px;\">\n                    <table class=\"table-desc table-striped\">\n                        <thead class=\"thead-dark\">\n                            <th>Output</th>\n                            <th>Value</th>\n                        </thead>\n                        <tbody>\n                            <tr v-for=\"key in Object.keys(debug.cache)\" :key=\"n.id + '-cache-' + key\">\n                                <tr>\n                                    <td>{{key}}</td>\n                                    <td><display-value :v=\"n.m.getSnapshotValue(debug.cache[key])\"></display-value></td>\n                                </tr>\n                            }\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n        </div>\n\n        <div v-if=\"debug.times && debug.times.emissions && (debug.times.emissions.lastRead || debug.times.emissions.lastInvalidate || debug.times.emissions.lastData )\" class=\"card card-settings\">\n            <div class=\"card-header\" id=\"debug-node-events\" data-toggle=\"collapse\" data-target=\"#debug-node-events-collapse\" aria-expanded=\"false\" aria-controls=\"debug-node-events-collapse\">\n                <h5 class=\"mb-0 btn-link\">Last events</h5>\n            </div>\n            <div id=\"debug-node-events-collapse\" class=\"collapse\" aria-labelledby=\"debug-node-events\" data-parent=\"#debug-node\">\n                <div class=\"card-body\" style=\"padding-left: 15px;\">\n\n                    <div v-if=\"debug.times.emissions.lastRead\" class=\"mb-3\">\n                        <p><b><u>Last read {{showNumber(debug.times.emissions.nbRead)}}</u> <span class=\"float-right\">{{ showTime(debug.times.emissions.lastRead.date) }}</span></b></p>\n                        <span>Missing: <b>{{ debug.times.emissions.lastRead.data.join(', ') }}</b></span><br/>\n                    </div>\n\n                    <div v-if=\"debug.times.emissions.lastInvalidate\" class=\"mb-3\">\n                        <p><b><u>Last Invalidate {{showNumber(debug.times.emissions.nbInvalidate)}}</u> <span class=\"float-right\">{{ showTime(debug.times.emissions.lastInvalidate.date) }}</span></b></p>\n                        <span>Invalidated keys: <b>{{ debug.times.emissions.lastInvalidate.data.join(', ') }}</b></span><br/>\n                    </div>\n\n                    <div v-if=\"debug.times.emissions.lastData\" class=\"mb-3\">\n                        <p><b><u>Last Data {{ showNumber(debug.times.emissions.nbData) }}</u> <span class=\"float-right\">{{ showTime(debug.times.emissions.lastData.date) }}</span></b></p>\n                        <table class=\"table-desc table-striped\">\n                            <thead class=\"thead-dark\">\n                                <th>Output</th>\n                                <th>Value</th>\n                            </thead>\n                            <tbody>\n                                <tr v-for=\"key in Object.keys(debug.times.emissions.lastData.data)\"  :key=\"n.id + '-cache-' + key\">\n                                    <td>{{key}}</td>\n                                    <td><display-value :v=\"n.m.getSnapshotValue(debug.times.emissions.lastData.data[key])\"></display-value></td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div v-if=\"debug.times && debug.times.evaluations && (debug.times.evaluations.lastStart || debug.times.evaluations.lastEnd || debug.times.evaluations.lastCancel )\" class=\"card card-settings\">\n            <div class=\"card-header\" id=\"debug-node-evaluations\" data-toggle=\"collapse\" data-target=\"#debug-node-evaluations-collapse\" aria-expanded=\"false\" aria-controls=\"debug-node-evaluations-collapse\">\n                <h5 class=\"mb-0 btn-link\">Last evaluations</h5>\n            </div>\n            <div id=\"debug-node-evaluations-collapse\" class=\"collapse\" aria-labelledby=\"debug-node-evaluations\" data-parent=\"#debug-node\">\n                <div class=\"card-body\" style=\"padding-left: 15px;\">\n\n                    <div v-if=\"debug.times.evaluations.lastStart\" class=\"mb-3\">\n                        <p><b><u>Last start</u> <span class=\"float-right\">{{ showTime(debug.times.evaluations.lastStart.date) }}</span></b></p>\n                    </div>\n\n                    <div v-if=\"debug.times.evaluations.lastEnd\" class=\"mb-3\">\n                        <p><b><u>Last end</u> <span class=\"float-right\">{{ showTime(debug.times.evaluations.lastEnd.date) }}</span></b></p>\n                    </div>\n\n                    <div v-if=\"debug.times.evaluations.lastCancel\" class=\"mb-3\">\n                        <p><b><u>Last Cancel</u> <span class=\"float-right\">{{ showTime(debug.times.evaluations.lastCancel.date) }}</span></b></p>\n                        <span>reason: <b>{{ debug.times.evaluations.lastCancel.reason }}</b></span><br/>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n\n        <div v-if=\"debug.performances\" class=\"card card-performances\">\n            <div class=\"card-header\" id=\"debug-node-performances\" data-toggle=\"collapse\" data-target=\"#debug-node-performances-collapse\" aria-expanded=\"false\" aria-controls=\"debug-node-performances-collapse\">\n                <h5 class=\"mb-0 btn-link\">Performances</h5>\n            </div>\n\n            <div id=\"debug-node-performances-collapse\" class=\"collapse\" aria-labelledby=\"debug-node-performances\" data-parent=\"#debug-node\">\n                <div class=\"card-body\" style=\"padding-left: 15px;\">\n                    <table class=\"table-desc table-striped\">\n                        <thead class=\"thead-dark\">\n                            <th>Stat</th>\n                            <th>Value</th>\n                        </thead>\n                        <tbody>\n                            <tr><td>min</td><td>{{debug.performances.min && debug.performances.min.toFixed(0)}}ms</td></tr>\n                            <tr><td>max</td><td>{{debug.performances.max && debug.performances.max.toFixed(0)}}ms</td></tr>\n                            <tr><td>avg</td><td>{{debug.performances.avg && debug.performances.avg.toFixed(0)}}ms</td></tr>\n                            <tr><td>total</td><td>{{debug.performances.total && debug.performances.total.toFixed(0)}}ms</td></tr>\n                            <tr><td>Nb of runs</td><td>{{debug.performances.nbRuns}}</td></tr>\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"modal debug-json-modal\" tabindex=\"-1\" role=\"dialog\">\n        <div class=\"modal-dialog\" role=\"document\">\n            <div class=\"modal-content\">\n                <div class=\"modal-header\">\n                    <h5 class=\"modal-title\">Value debugger</h5>\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                        <span aria-hidden=\"true\">&times;</span>\n                    </button>\n                </div>\n                <div class=\"modal-body\">\n                    <div class=\"json-editor\" style=\"height: 400px;\"></div>\n                </div>\n                <div class=\"modal-footer\">\n                    <button type=\"button\" class=\"btn btn-primary btn-save\">Save changes</button>\n                    <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n</template>\n\n<script>\nimport _ from 'lodash-es';\nimport moment from 'moment';\n\nimport DisplayValueVue from './displayValue.vue';\n\nexport default {\n    props: [\n        \"id\"\n    ],\n    components: {\n        \"display-value\" : DisplayValueVue,\n    },\n    data: function () {\n        return {\n            \"n\" : null,\n            \"debug\": null\n        };\n    },\n    created: function() {\n        this.view = window.dualboxEditor.v;\n        this.n = this.view.m.getNode(this.id);\n        this.debug = this.n.getSnapshot(); // shortcut\n    },\n    beforeUpdate: function() {\n        this.n = this.view.m.getNode(this.id); // it breaks updating node name\n        this.debug = this.n.getSnapshot(); // shortcut\n    },\n    mounted: function() {\n\n    },\n    methods: {\n        getSnapshotStatus : function(n) {\n            if( this.n.isSnapshotStatus(0) ) return \"IDLE\";\n            else if( this.n.isSnapshotStatus(1) ) return \"COMPUTING\";\n            else if( this.n.isSnapshotStatus(2) ) return \"WAITING\";\n            else if( this.n.isSnapshotStatus(3) ) return \"READY\";\n            else throw \"Error: unknown status\";\n        },\n\n        getInputData: function(key) {\n            return this.debug.data[key];\n        },\n\n        // show number if not null, undefined or 0\n        showNumber: function(n) {\n            return n? n: \"\";\n        },\n\n        showTime: function(d) {\n            return moment(d).format('HH:mm:ss.SSS');\n        }\n    }\n}\n</script>\n"]}, media: undefined });
 
   };
   /* scoped */
@@ -74707,16 +74751,20 @@ __vue_render__$c._withStripped = true;
   const __vue_is_functional_template__$c = false;
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var debugNodeInfosVue = normalizeComponent_1(
+  const __vue_component__$c = normalizeComponent_1(
     { render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
     __vue_inject_styles__$c,
     __vue_script__$c,
     __vue_scope_id__$c,
     __vue_is_functional_template__$c,
     __vue_module_identifier__$c,
+    false,
     browser,
+    undefined,
     undefined
   );
 
@@ -86795,11 +86843,11 @@ var script$d = {
         'eventVisibility' // are events visible
     ],
     components: {
-        'graph-vue': graphVue,
-        'add-node-vue': addNodeVue,
-        'edit-main-settings': editMainSettingsVue,
-        'edit-node-settings': editNodeSettingsVue,
-        'debug-node-infos': debugNodeInfosVue,
+        'graph-vue': __vue_component__$1,
+        'add-node-vue': __vue_component__$5,
+        'edit-main-settings': __vue_component__$a,
+        'edit-node-settings': __vue_component__$b,
+        'debug-node-infos': __vue_component__$c,
     },
     data() {
         return {
@@ -86928,8 +86976,9 @@ var script$d = {
                         removeTryCatch: $(this.$el).find('.run-removetrycatch').is(':checked'),
                         makeSynchrone: $(this.$el).find('.run-makesynchrone').is(':checked'),
                         record: $(this.$el).find('.run-record').is(':checked'),
+                        ressourceCaching: $(this.$el).find('.run-ressourcecaching').is(':checked'),
                     }
-                }
+                },
             }
         },
 
@@ -88053,6 +88102,13 @@ var __vue_render__$d = function() {
                         }),
                         _vm._v("Make Synchrone"),
                         _vm._v(" "),
+                        _c("input", {
+                          staticClass:
+                            "form-control run-ressourcecaching mr-1 ml-3",
+                          attrs: { type: "checkbox" }
+                        }),
+                        _vm._v("Ressource caching"),
+                        _vm._v(" "),
                         _c("div", { staticClass: "ml-auto" }, [
                           _c("input", {
                             staticClass: "form-control run-profiler mr-1 ml-3",
@@ -88194,7 +88250,7 @@ __vue_render__$d._withStripped = true;
   /* style */
   const __vue_inject_styles__$d = function (inject) {
     if (!inject) return
-    inject("data-v-357e9fe8_0", { source: "\n.code-panel {\n    width: 30%;\n    height: 100%;\n    vertical-align: top;\n    float: left;\n}\n.application-container {\n    width: calc(70% - 5px);\n    height: 100%;\n    display: inline-block;\n    vertical-align: top;\n    float: right;\n}\n.code-controls,\n.run-options {\n    width: 100%;\n    height: 60px;\n}\n.application {\n    width: 100%;\n    height: calc(100% - 60px);\n    background-color: #ccc;\n}\n.dragbar {\n    height: 100%;\n    width: 5px;\n    background-color: #e7e7e7;\n    display: inline-block;\n    cursor: col-resize;\n}\n.code-content {\n    position: relative;\n    height: calc(100% - 56px);\n}\n.code-html-container {\n    position: relative;\n    height: 50%;\n    border-bottom: 1px solid #e7e7e7;\n}\n.code-css-container {\n    position: relative;\n    height: calc(50% - 1px);\n    overflow: hidden;\n}\n.code-css {\n    width: 100%;\n    height: 100%;\n}\n.code-html {\n    height: calc(100% - 40px);\n    width: 100%;\n}\n.CodeMirror {\n    height: 100% !important;\n}\n.code-badge {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    padding: 10px;\n}\n.btn-light.focus,\n.btn-light:focus {\n    box-shadow: none !important;\n}\n.button-bar {\n    width: 60px;\n    padding: 10px;\n    border-bottom: 1px solid #e7e7e7;\n    width: 100%;\n    background-color: white;\n}\n.noselect {\n    -webkit-user-select: none;\n    /* Chrome/Safari */\n    -moz-user-select: none;\n    /* Firefox */\n    -ms-user-select: none;\n    /* IE10+ */\n    -o-user-select: none;\n    user-select: none;\n}\n.btn+.btn {\n    margin-left: 5px;\n}\n.btn-graph-goto {\n    box-shadow: none !important;\n}\n.nav-tabs {\n    border-bottom: none;\n}\n.main-navigation a.nav-link {\n    color: white;\n}\n.main-navigation a.nav-link.active {\n    color: #212529;\n}\n.dualbox-editor-body {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background-color: rgb(85, 85, 85);\n}\n.dualbox-graph-left-section {\n    height: 100%;\n    width: 500px;\n    float: left;\n    position: relative;\n    overflow: hidden;\n    margin-left: -465px;\n    transition: margin-left 0.3s ease;\n}\n.dualbox-graph-left-window {\n    width: calc(100% - 35px);\n    height: calc(100% - 10px);\n    margin-top: 10px;\n    /* background-color: #ECF2F8; */\n    background-color: #f8f9fa;\n    /* border: 1px solid grey; */\n    border-radius: 5px;\n    position: relative;\n    float: left;\n}\n.dualbox-graph-left-panel {\n    width: 100%;\n    height: 100%;\n}\n.btn-toggle-left-window {\n    position: absolute;\n    right: 0;\n    top: 0;\n    margin-right: -35px;\n    z-index: 100;\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n}\n.btn-toggle-left-window:hover,\n.btn-toggle-right-window:hover,\n.btn-toggle-left-window:focus,\n.btn-toggle-right-window:focus,\n.btn-toggle-left-window:active,\n.btn-toggle-right-window:active,\n.btn-toggle-left-window:active:hover,\n.btn-toggle-right-window:active:hover {\n    color: #212529 !important;\n    background-color: #f8f9fa !important;\n    border-color: #f8f9fa !important;\n}\n.dualbox-graph-right-section {\n    height: 100%;\n    width: 500px;\n    float: right;\n    position: relative;\n    overflow: hidden;\n    margin-right: -465px;\n    transition: margin-right 0.3s ease;\n}\n.dualbox-graph-right-window {\n    width: calc(100% - 35px);\n    height: calc(100% - 20px);\n    margin-top: 10px;\n    margin-bottom: 30px;\n    /* background-color: #ECF2F8; */\n    background-color: #f8f9fa;\n    /* border: 1px solid grey; */\n    border-radius: 5px;\n    position: relative;\n    float: right;\n}\n.dualbox-graph-right-panel {\n    width: 100%;\n    height: 100%;\n}\n.btn-toggle-right-window {\n    position: absolute;\n    left: 0;\n    top: 0;\n    margin-left: -35px;\n    z-index: 100;\n    border-top-right-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n.dualbox-graph-tab {\n    height: 100%;\n    width: 100%;\n    background-color: #555 !important;\n}\n.dualbox-graph-main {\n    height: 100%;\n    width: calc(100% - 70px);\n    float: right;\n    background-color: #555 !important;\n    transition: width 0.3s ease;\n}\n.dualbox-graph-main.left-panel-expanded {\n    width: calc(100% - 535px);\n    margin-left: -465px;\n}\n.dualbox-graph-main.right-panel-expanded {\n    width: calc(100% - 535px);\n}\n.dualbox-graph-main.left-panel-expanded.right-panel-expanded {\n    width: calc(100% - 1000px);\n    margin-left: -465px;\n}\n.opacity0 {\n    opacity: 0;\n}\n.btn-editor-xs {\n    width: 18px;\n    padding: 3px !important;\n    line-height: .5;\n    border-radius: 2px;\n}\n.btn-editor-xs>i {\n    font-size: 10px;\n}\n.btn-outline-discrete {\n    border-color: rgba(0, 0, 0, 0.05);\n    border-color: transparent;\n    color: rgba(0, 0, 0, 0.3);\n}\n.dualbox-app-navigation {\n    background-color: transparent;\n    margin-bottom: 0;\n    vertical-align: middle;\n    padding-top: 7px;\n    padding-bottom: 7px;\n    font-weight: bold;\n    user-select: none;\n}\n.app-topbar {\n    border-bottom: none;\n    padding-left: 15px;\n    padding-right: 15px;\n    display: flex;\n    width: 100%;\n    height: 58px;\n    padding-top: 10px;\n    padding-bottom: 10px;\n}\n.dark,\n.graph-tab.active,\n.nav-item.active .graph-tab {\n    color: white !important;\n    background-color: #555 !important;\n}\n.light {\n    color: #4d4d4d !important;\n    background-color: #f8f9fa !important;\n}\n.main-navigation .nav-link,\n.main-navigation .nav-link.active,\n.nav-item.active .nav-link {\n    border-bottom: none;\n    border-left: none;\n    border-top: none;\n    border-right: none;\n    position: relative;\n    top: 1px;\n}\n.btn:focus,\nbutton:focus {\n    outline: none;\n    box-shadow: none;\n}\n.btn-transparent,\n.btn-transparent:hover,\n.btn-transparent:focus {\n    background-color: transparent;\n}\n.connection-control {\n    position: absolute;\n    height: 14px;\n    width: 14px;\n    background-color: transparent;\n    z-index: 19;\n    cursor: move;\n}\n.connection-control.selected {\n    border-color: #0066ff;\n    box-shadow: 1px 1px 10px #0066ff;\n}\n.connection-label {\n    z-index: 22 !important;\n    color: #004d00 !important;\n    background-color: white !important;\n    padding: 4px 4px;\n    border: 2px solid #004d00;\n    font-size: 16px !important;\n    border-radius: 5px;\n}\n.input-color-tag {\n    background-color: #F2D600;\n}\n.output-color-tag {\n    background-color: #FFAB4A;\n}\n.ui-color-tag {\n    background-color: #61BD4F;\n}\n.metanode-color-tag {\n    background-color: #DDDDDD;\n}\n.input {}\n.output {}\n.fileUpload {\n    position: relative;\n    overflow: hidden;\n    margin: 10px;\n}\n.fileUpload input.upload {\n    position: absolute;\n    top: 0;\n    right: 0;\n    margin: 0;\n    padding: 0;\n    font-size: 20px;\n    cursor: pointer;\n    opacity: 0;\n    filter: alpha(opacity=0);\n}\n.module-edit-modal-body .btn+.btn {\n    margin-bottom: 0;\n    margin-left: 5px;\n}\n.btn-add-node {\n    width: 46%;\n    margin: 1%;\n}\nbutton.close {\n    position: absolute;\n    right: 0;\n    margin-right: 5px !important;\n}\n.CodeMirror {\n    height: auto;\n    min-height: 300px;\n}\n.load-app,\n.save-app {\n    margin-left: 5px;\n    margin-right: 5px;\n}\n.btn-xs {\n    padding: 0px 4px;\n    font-size: 12px;\n}\n", map: {"version":3,"sources":["/home/seb/dev/dualbox/editor/js/src/v/templates/main.vue"],"names":[],"mappings":";AACA;IACA,UAAA;IACA,YAAA;IACA,mBAAA;IACA,WAAA;AACA;AAEA;IACA,sBAAA;IACA,YAAA;IACA,qBAAA;IACA,mBAAA;IACA,YAAA;AACA;AAEA;;IAEA,WAAA;IACA,YAAA;AACA;AAEA;IACA,WAAA;IACA,yBAAA;IACA,sBAAA;AACA;AAEA;IACA,YAAA;IACA,UAAA;IACA,yBAAA;IACA,qBAAA;IACA,kBAAA;AACA;AAEA;IACA,kBAAA;IACA,yBAAA;AACA;AAEA;IACA,kBAAA;IACA,WAAA;IACA,gCAAA;AACA;AAEA;IACA,kBAAA;IACA,uBAAA;IACA,gBAAA;AACA;AAEA;IACA,WAAA;IACA,YAAA;AACA;AAEA;IACA,yBAAA;IACA,WAAA;AACA;AAEA;IACA,uBAAA;AACA;AAEA;IACA,kBAAA;IACA,SAAA;IACA,WAAA;IACA,aAAA;AACA;AAEA;;IAEA,2BAAA;AACA;AAEA;IACA,WAAA;IACA,aAAA;IACA,gCAAA;IACA,WAAA;IACA,uBAAA;AACA;AAEA;IACA,yBAAA;IACA,kBAAA;IACA,sBAAA;IACA,YAAA;IACA,qBAAA;IACA,UAAA;IACA,oBAAA;IACA,iBAAA;AACA;AAEA;IACA,gBAAA;AACA;AAEA;IACA,2BAAA;AACA;AAEA;IACA,mBAAA;AACA;AAEA;IACA,YAAA;AACA;AAEA;IACA,cAAA;AACA;AAEA;IACA,WAAA;IACA,YAAA;IACA,gBAAA;IACA,iCAAA;AACA;AAEA;IACA,YAAA;IACA,YAAA;IACA,WAAA;IACA,kBAAA;IACA,gBAAA;IACA,mBAAA;IACA,iCAAA;AACA;AAEA;IACA,wBAAA;IACA,yBAAA;IACA,gBAAA;IACA,+BAAA;IACA,yBAAA;IACA,4BAAA;IACA,kBAAA;IACA,kBAAA;IACA,WAAA;AACA;AAEA;IACA,WAAA;IACA,YAAA;AACA;AAEA;IACA,kBAAA;IACA,QAAA;IACA,MAAA;IACA,mBAAA;IACA,YAAA;IACA,2BAAA;IACA,8BAAA;AACA;AAEA;;;;;;;;IAQA,yBAAA;IACA,oCAAA;IACA,gCAAA;AACA;AAEA;IACA,YAAA;IACA,YAAA;IACA,YAAA;IACA,kBAAA;IACA,gBAAA;IACA,oBAAA;IACA,kCAAA;AACA;AAEA;IACA,wBAAA;IACA,yBAAA;IACA,gBAAA;IACA,mBAAA;IACA,+BAAA;IACA,yBAAA;IACA,4BAAA;IACA,kBAAA;IACA,kBAAA;IACA,YAAA;AACA;AAEA;IACA,WAAA;IACA,YAAA;AACA;AAEA;IACA,kBAAA;IACA,OAAA;IACA,MAAA;IACA,kBAAA;IACA,YAAA;IACA,4BAAA;IACA,+BAAA;AACA;AAEA;IACA,YAAA;IACA,WAAA;IACA,iCAAA;AACA;AAEA;IACA,YAAA;IACA,wBAAA;IACA,YAAA;IACA,iCAAA;IACA,2BAAA;AACA;AAEA;IACA,yBAAA;IACA,mBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,0BAAA;IACA,mBAAA;AACA;AAEA;IACA,UAAA;AACA;AAEA;IACA,WAAA;IACA,uBAAA;IACA,eAAA;IACA,kBAAA;AACA;AAEA;IACA,eAAA;AACA;AAEA;IACA,iCAAA;IACA,yBAAA;IACA,yBAAA;AACA;AAEA;IACA,6BAAA;IACA,gBAAA;IACA,sBAAA;IACA,gBAAA;IACA,mBAAA;IACA,iBAAA;IACA,iBAAA;AACA;AAEA;IACA,mBAAA;IACA,kBAAA;IACA,mBAAA;IACA,aAAA;IACA,WAAA;IACA,YAAA;IACA,iBAAA;IACA,oBAAA;AACA;AAEA;;;IAGA,uBAAA;IACA,iCAAA;AACA;AAEA;IACA,yBAAA;IACA,oCAAA;AACA;AAEA;;;IAGA,mBAAA;IACA,iBAAA;IACA,gBAAA;IACA,kBAAA;IACA,kBAAA;IACA,QAAA;AACA;AAEA;;IAEA,aAAA;IACA,gBAAA;AACA;AAEA;;;IAGA,6BAAA;AACA;AAEA;IACA,kBAAA;IACA,YAAA;IACA,WAAA;IACA,6BAAA;IACA,WAAA;IACA,YAAA;AACA;AAEA;IACA,qBAAA;IACA,gCAAA;AACA;AAEA;IACA,sBAAA;IACA,yBAAA;IACA,kCAAA;IACA,gBAAA;IACA,yBAAA;IACA,0BAAA;IACA,kBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA,QAAA;AAEA,SAAA;AAEA;IACA,kBAAA;IACA,gBAAA;IACA,YAAA;AACA;AAEA;IACA,kBAAA;IACA,MAAA;IACA,QAAA;IACA,SAAA;IACA,UAAA;IACA,eAAA;IACA,eAAA;IACA,UAAA;IACA,wBAAA;AACA;AAEA;IACA,gBAAA;IACA,gBAAA;AACA;AAEA;IACA,UAAA;IACA,UAAA;AACA;AAEA;IACA,kBAAA;IACA,QAAA;IACA,4BAAA;AACA;AAEA;IACA,YAAA;IACA,iBAAA;AACA;AAEA;;IAEA,gBAAA;IACA,iBAAA;AACA;AAEA;IACA,gBAAA;IACA,eAAA;AACA","file":"main.vue","sourcesContent":["<style>\n.code-panel {\n    width: 30%;\n    height: 100%;\n    vertical-align: top;\n    float: left;\n}\n\n.application-container {\n    width: calc(70% - 5px);\n    height: 100%;\n    display: inline-block;\n    vertical-align: top;\n    float: right;\n}\n\n.code-controls,\n.run-options {\n    width: 100%;\n    height: 60px;\n}\n\n.application {\n    width: 100%;\n    height: calc(100% - 60px);\n    background-color: #ccc;\n}\n\n.dragbar {\n    height: 100%;\n    width: 5px;\n    background-color: #e7e7e7;\n    display: inline-block;\n    cursor: col-resize;\n}\n\n.code-content {\n    position: relative;\n    height: calc(100% - 56px);\n}\n\n.code-html-container {\n    position: relative;\n    height: 50%;\n    border-bottom: 1px solid #e7e7e7;\n}\n\n.code-css-container {\n    position: relative;\n    height: calc(50% - 1px);\n    overflow: hidden;\n}\n\n.code-css {\n    width: 100%;\n    height: 100%;\n}\n\n.code-html {\n    height: calc(100% - 40px);\n    width: 100%;\n}\n\n.CodeMirror {\n    height: 100% !important;\n}\n\n.code-badge {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    padding: 10px;\n}\n\n.btn-light.focus,\n.btn-light:focus {\n    box-shadow: none !important;\n}\n\n.button-bar {\n    width: 60px;\n    padding: 10px;\n    border-bottom: 1px solid #e7e7e7;\n    width: 100%;\n    background-color: white;\n}\n\n.noselect {\n    -webkit-user-select: none;\n    /* Chrome/Safari */\n    -moz-user-select: none;\n    /* Firefox */\n    -ms-user-select: none;\n    /* IE10+ */\n    -o-user-select: none;\n    user-select: none;\n}\n\n.btn+.btn {\n    margin-left: 5px;\n}\n\n.btn-graph-goto {\n    box-shadow: none !important;\n}\n\n.nav-tabs {\n    border-bottom: none;\n}\n\n.main-navigation a.nav-link {\n    color: white;\n}\n\n.main-navigation a.nav-link.active {\n    color: #212529;\n}\n\n.dualbox-editor-body {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background-color: rgb(85, 85, 85);\n}\n\n.dualbox-graph-left-section {\n    height: 100%;\n    width: 500px;\n    float: left;\n    position: relative;\n    overflow: hidden;\n    margin-left: -465px;\n    transition: margin-left 0.3s ease;\n}\n\n.dualbox-graph-left-window {\n    width: calc(100% - 35px);\n    height: calc(100% - 10px);\n    margin-top: 10px;\n    /* background-color: #ECF2F8; */\n    background-color: #f8f9fa;\n    /* border: 1px solid grey; */\n    border-radius: 5px;\n    position: relative;\n    float: left;\n}\n\n.dualbox-graph-left-panel {\n    width: 100%;\n    height: 100%;\n}\n\n.btn-toggle-left-window {\n    position: absolute;\n    right: 0;\n    top: 0;\n    margin-right: -35px;\n    z-index: 100;\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n}\n\n.btn-toggle-left-window:hover,\n.btn-toggle-right-window:hover,\n.btn-toggle-left-window:focus,\n.btn-toggle-right-window:focus,\n.btn-toggle-left-window:active,\n.btn-toggle-right-window:active,\n.btn-toggle-left-window:active:hover,\n.btn-toggle-right-window:active:hover {\n    color: #212529 !important;\n    background-color: #f8f9fa !important;\n    border-color: #f8f9fa !important;\n}\n\n.dualbox-graph-right-section {\n    height: 100%;\n    width: 500px;\n    float: right;\n    position: relative;\n    overflow: hidden;\n    margin-right: -465px;\n    transition: margin-right 0.3s ease;\n}\n\n.dualbox-graph-right-window {\n    width: calc(100% - 35px);\n    height: calc(100% - 20px);\n    margin-top: 10px;\n    margin-bottom: 30px;\n    /* background-color: #ECF2F8; */\n    background-color: #f8f9fa;\n    /* border: 1px solid grey; */\n    border-radius: 5px;\n    position: relative;\n    float: right;\n}\n\n.dualbox-graph-right-panel {\n    width: 100%;\n    height: 100%;\n}\n\n.btn-toggle-right-window {\n    position: absolute;\n    left: 0;\n    top: 0;\n    margin-left: -35px;\n    z-index: 100;\n    border-top-right-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.dualbox-graph-tab {\n    height: 100%;\n    width: 100%;\n    background-color: #555 !important;\n}\n\n.dualbox-graph-main {\n    height: 100%;\n    width: calc(100% - 70px);\n    float: right;\n    background-color: #555 !important;\n    transition: width 0.3s ease;\n}\n\n.dualbox-graph-main.left-panel-expanded {\n    width: calc(100% - 535px);\n    margin-left: -465px;\n}\n\n.dualbox-graph-main.right-panel-expanded {\n    width: calc(100% - 535px);\n}\n\n.dualbox-graph-main.left-panel-expanded.right-panel-expanded {\n    width: calc(100% - 1000px);\n    margin-left: -465px;\n}\n\n.opacity0 {\n    opacity: 0;\n}\n\n.btn-editor-xs {\n    width: 18px;\n    padding: 3px !important;\n    line-height: .5;\n    border-radius: 2px;\n}\n\n.btn-editor-xs>i {\n    font-size: 10px;\n}\n\n.btn-outline-discrete {\n    border-color: rgba(0, 0, 0, 0.05);\n    border-color: transparent;\n    color: rgba(0, 0, 0, 0.3);\n}\n\n.dualbox-app-navigation {\n    background-color: transparent;\n    margin-bottom: 0;\n    vertical-align: middle;\n    padding-top: 7px;\n    padding-bottom: 7px;\n    font-weight: bold;\n    user-select: none;\n}\n\n.app-topbar {\n    border-bottom: none;\n    padding-left: 15px;\n    padding-right: 15px;\n    display: flex;\n    width: 100%;\n    height: 58px;\n    padding-top: 10px;\n    padding-bottom: 10px;\n}\n\n.dark,\n.graph-tab.active,\n.nav-item.active .graph-tab {\n    color: white !important;\n    background-color: #555 !important;\n}\n\n.light {\n    color: #4d4d4d !important;\n    background-color: #f8f9fa !important;\n}\n\n.main-navigation .nav-link,\n.main-navigation .nav-link.active,\n.nav-item.active .nav-link {\n    border-bottom: none;\n    border-left: none;\n    border-top: none;\n    border-right: none;\n    position: relative;\n    top: 1px;\n}\n\n.btn:focus,\nbutton:focus {\n    outline: none;\n    box-shadow: none;\n}\n\n.btn-transparent,\n.btn-transparent:hover,\n.btn-transparent:focus {\n    background-color: transparent;\n}\n\n.connection-control {\n    position: absolute;\n    height: 14px;\n    width: 14px;\n    background-color: transparent;\n    z-index: 19;\n    cursor: move;\n}\n\n.connection-control.selected {\n    border-color: #0066ff;\n    box-shadow: 1px 1px 10px #0066ff;\n}\n\n.connection-label {\n    z-index: 22 !important;\n    color: #004d00 !important;\n    background-color: white !important;\n    padding: 4px 4px;\n    border: 2px solid #004d00;\n    font-size: 16px !important;\n    border-radius: 5px;\n}\n\n.input-color-tag {\n    background-color: #F2D600;\n}\n\n.output-color-tag {\n    background-color: #FFAB4A;\n}\n\n.ui-color-tag {\n    background-color: #61BD4F;\n}\n\n.metanode-color-tag {\n    background-color: #DDDDDD;\n}\n\n.input {}\n\n.output {}\n\n.fileUpload {\n    position: relative;\n    overflow: hidden;\n    margin: 10px;\n}\n\n.fileUpload input.upload {\n    position: absolute;\n    top: 0;\n    right: 0;\n    margin: 0;\n    padding: 0;\n    font-size: 20px;\n    cursor: pointer;\n    opacity: 0;\n    filter: alpha(opacity=0);\n}\n\n.module-edit-modal-body .btn+.btn {\n    margin-bottom: 0;\n    margin-left: 5px;\n}\n\n.btn-add-node {\n    width: 46%;\n    margin: 1%;\n}\n\nbutton.close {\n    position: absolute;\n    right: 0;\n    margin-right: 5px !important;\n}\n\n.CodeMirror {\n    height: auto;\n    min-height: 300px;\n}\n\n.load-app,\n.save-app {\n    margin-left: 5px;\n    margin-right: 5px;\n}\n\n.btn-xs {\n    padding: 0px 4px;\n    font-size: 12px;\n}\n</style>\n\n<template>\n<div class=\"dualbox-editor-body\">\n    <nav class=\"main-navigation navbar navbar-default\" style=\"position: relative; margin-bottom: 0px; padding: 0; padding-top: 5px; background-color: #2e6da4;\">\n        <ul class=\"nav nav-tabs\">\n            <li class=\"nav-item active\">\n                <a class=\"nav-link graph-tab\" href=\"#editor-graph-tab\" data-toggle=\"tab\">Application Graph</a>\n            </li>\n            <li class=\"nav-item\">\n                <a class=\"nav-link interface-tab\" href=\"#editor-interface-tab\" data-toggle=\"tab\">Interface Editor</a>\n            </li>\n        </ul>\n\n        <div class=\"nav navbar-right\" style=\"vertical-align: top; margin-top: 5px; margin-right: 10px; margin-bottom: 5px;\">\n            <div v-if=\"showLoadButton === true\">\n                <button class=\"load-app btn btn-sm btn-light\" style=\"position: relative; bottom: 3px;\" @click=\"loadApp\">Load App</button>\n            </div>\n            <div v-if=\"showSaveButton\">\n                <button class=\"save-app btn btn-sm btn-light\" style=\"position: relative; bottom: 3px;\" @click=\"saveApp\">Save App</button>\n            </div>\n        </div>\n    </nav>\n    <div class=\"tab-content dualbox-graph-tab\" style=\"width: 100%; height: calc(100% - 46px);\">\n        <div class=\"tab-pane active\" id=\"editor-graph-tab\" style=\"width: 100%; height: 100%;\">\n            <div class=\"dualbox-graph-left-section dark\">\n                <div class=\"dualbox-graph-left-window\">\n                    <button class=\"btn btn-light btn-toggle-left-window\" @click=\"toggleLeftWindow\" title=\"shrink window\" data-expanded=\"false\"><i class=\"fa fa-angle-double-right\"></i></button>\n                    <div class=\"dualbox-graph-left-panel light\">\n                        <edit-node-settings v-if=\"leftPanelMode == 'node' && selectedNodeId !== null\" :id=\"selectedNodeId\" :key=\"selectedNodeId\"></edit-node-settings>\n                        <edit-main-settings v-else-if=\"leftPanelMode == 'main'\" :app=\"getCurrentApplication()\" @edited=\"onEdited()\"></edit-main-settings>\n                    </div>\n                </div>\n            </div>\n            <div class=\"dualbox-graph-right-section dark\">\n                <div class=\"dualbox-graph-right-window\">\n                    <button class=\"btn btn-light btn-toggle-right-window\" @click=\"toggleRightWindow\" title=\"shrink window\" data-expanded=\"false\"><i class=\"fa fa-angle-double-left\"></i></button>\n                    <div class=\"dualbox-graph-right-panel light\">\n                        <debug-node-infos v-if=\"debugNodeId !== null\" :id=\"debugNodeId\"></debug-node-infos>\n                    </div>\n                </div>\n            </div>\n            <div class=\"container-fluid dualbox-graph-main\" @click=\"setMainMenu\">\n                <div class=\"row\">\n                    <div class=\"app-topbar dark\">\n                        <div class=\"justify-content-left\">\n                            <div class=\"dropdown\">\n                                <button class=\"btn btn-primary dropdown-toggle d-none\" type=\"button\" id=\"add-node-dropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" style=\"margin-right: 5px;\">\n                                    Add\n                                </button>\n                                <div class=\"dropdown-menu\" aria-labelledby=\"add-node-dropdown\">\n                                    <a class=\"dropdown-item add-box\" @click=\"addBox\" href=\"#\">Add box</a>\n                                    <a class=\"dropdown-item add-metabox\" @click=\"addMetabox\" href=\"#\">Add metabox</a>\n                                    <a class=\"dropdown-item add-input\" @click=\"addInput\" href=\"#\">Add input</a>\n                                    <a class=\"dropdown-item add-output\" @click=\"addOutput\" href=\"#\">Add output</a>\n                                    <a class=\"dropdown-item import-metabox\" @click=\"importMetabox\" href=\"#\">Import metabox</a>\n                                </div>\n                                <button class=\"btn btn-light btn-undo\" title=\"undo (ctrl-z)\" @click=\"undo\"><i class=\"fa fa-undo\"></i></button>\n                                <button class=\"btn btn-light btn-redo\" title=\"redo (ctrl-y)\" @click=\"redo\"><i class=\"fa fa-repeat fa-redo\"></i></button>\n                                <div class=\"form-check d-inline-block ml-2\">\n                                    <label class=\"form-check-label\">\n                                        <input class=\"form-check-input show-events\" type=\"checkbox\" value=\"false\" @click=\"showEvents\">\n                                        <span class=\"noselect\">Show events</span>\n                                    </label>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"justify-content-center mx-auto\">\n                            <ol class=\"dualbox-app-navigation breadcrumb\"></ol>\n                        </div>\n\n                        <div class=\"justify-content-right\">\n                            <div class=\"dropdown selection-menu\" style=\"display: none;\">\n                                <button class=\"btn btn-primary dropdown-toggle\" type=\"button\" id=\"selection-dropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                    Selection\n                                </button>\n                                <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"add-node-dropdown\">\n                                    <a class=\"dropdown-item dualbox-merge-selection\" @click=\"mergeSelection\" href=\"#\">Merge</a>\n                                    <a class=\"dropdown-item dualbox-remove-selection\" @click=\"removeSelection\" href=\"#\" style=\"color: red;\">Delete</a>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"row\" style=\"height: calc(100% - 58px);\">\n                    <graph-vue :app=\"app\" ref=\"graph\" :displayEvents=\"displayEvents\"></graph-vue>\n                </div>\n            </div>\n        </div>\n        <div class=\"tab-pane\" id=\"editor-interface-tab\" style=\"width 100%; height: 100%; background-color: white;\">\n            <div class=\"db-editor-main\" style=\"width: 100%; height: 100%; overflow: hidden;\">\n                <div class=\"code-panel\">\n                    <div class=\"button-bar form-inline code-controls\" style=\"position: relative;\">\n                        <button class=\"btn btn-primary btn-save-interface-element\" @click=\"saveInterfaceElement\">Save changes</button>\n                    </div>\n                    <div class=\"code-content\">\n                        <div class=\"code-html-container\">\n                            <div style=\"padding-top: 5px; padding-bottom: 5px; height: 50px; position: relative;\">\n                                <h3 style=\"position: absolute; top: 0; margin: 5px; font-size: 16px; z-index: 100; display: inline-block; margin-top: 5px;\">HTML</h3>\n                                <div class=\"d-inline-block ml-auto form-inline mr-2 mt-2\" style=\"position: absolute; top: 0; right: 0;\">\n                                    <button class=\"btn btn-success btn-sm btn-add-interface\" @click=\"addInterface\"><i class=\"fas fa-plus\"></i></button>\n                                    <select class=\"form-control btn-sm app-interface-select\" @change=\"selectInterface\" style=\"width: 150px; height: 32px;\">\n                                        <option>Load UI...</option>\n                                        <option v-for=\"interfaceName in getInterfacesNames()\" :value=\"interfaceName\">{{interfaceName}}</option>\n                                    </select>\n                                    <button class=\"btn btn-sm btn-light btn-edit-panel-description\" @click=\"editPanelDescription\"><i class=\"fas fa-info\" style=\"padding-left: 8px; padding-right: 8px;\"></i></button>\n                                    <button class=\"btn btn-danger btn-sm btn-remove-interface\" @click=\"removeInterface\"><i class=\"fas fa-minus\"></i></button>\n                                </div>\n                            </div>\n                            <div class=\"code-html-text-container\" style=\"position: relative; height: calc(100% - 50px);\">\n                                <textarea class=\"code-html\"></textarea>\n                            </div>\n                        </div>\n                        <div class=\"code-css-container\">\n                            <div style=\"height: 30px;\">\n                                <h3 style=\"position: absolute; top: 0; margin: 5px; font-size: 16px; z-index: 100;\">CSS</h3>\n                            </div>\n                            <div class=\"colde-css-text-container\" style=\"position: relative; height: calc(100% - 30px);\">\n                                <textarea class=\"code-css\" v-model=\"appCss\"></textarea>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"dragbar\"></div>\n                <div class=\"application-container\">\n                    <div class=\"button-bar form-inline run-options\" style=\"position: relative;\">\n                        <button class=\"btn btn-success btn-run mr-2\" @click=\"runApp\">Run</button>\n\n                        <select class=\"form-control run-loglevel mr-1 ml-2\">\n                            <option>error</option>\n                            <option>warn</option>\n                            <option>info</option>\n                            <option>log</option>\n                            <option>debug</option>\n                        </select>\n\n                        <input class=\"form-control run-noversioncheck mr-1 ml-3\" type=\"checkbox\" checked>No version checking</input>\n                        <input class=\"form-control run-removetrycatch mr-1 ml-3\" type=\"checkbox\">Remove Try/catch</input>\n                        <input class=\"form-control run-makesynchrone mr-1 ml-3\" type=\"checkbox\">Make Synchrone</input>\n\n                        <div class=\"ml-auto\">\n                            <input class=\"form-control run-profiler mr-1 ml-3\" type=\"checkbox\">Profiler</input>\n                            <input class=\"form-control run-record mr-1 ml-3\" type=\"checkbox\">Record</input>\n                            <button class=\"btn btn-secondary btn-snapshot\" @click=\"takeAndLoadSnapshot\">Snapshot</button>\n                        </div>\n                    </div>\n                    <div class=\"application capture-left-click capture-right-click\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <add-node-vue :display=\"this.addingBox\" :mousePosition=\"this.newBoxPosition\" @closed=\"onAddBoxClosed\"></add-node-vue>\n</div>\n</template>\n\n<script>\nimport _ from 'lodash-es';\nimport swal from 'sweetalert2';\n\nimport graphVue from './graph.vue';\nimport addNodeVue from './addNode.vue';\nimport editMainSettingsVue from './editMainSettings.vue';\nimport editNodeSettingsVue from './editNodeSettings.vue';\nimport debugNodeInfosVue from './debugNodeInfos.vue';\n\n// CodeMirror\nimport CodeMirror from 'codemirror/lib/codemirror.js';\nimport 'codemirror/mode/xml/xml.js';\nimport 'codemirror/mode/css/css.js';\nimport 'codemirror/mode/javascript/javascript.js';\nimport 'codemirror/mode/htmlmixed/htmlmixed.js';\n\nimport htmltool from '@dualbox/dualbox-lib-htmltool';\n\nexport default {\n    props: [\n        'app', // the app\n\n        // Display configuration (online or offline ?)\n        'showLoadButton',\n        'showSaveButton',\n        'saveButtonFunction',\n\n        // modes\n        'eventVisibility' // are events visible\n    ],\n    components: {\n        'graph-vue': graphVue,\n        'add-node-vue': addNodeVue,\n        'edit-main-settings': editMainSettingsVue,\n        'edit-node-settings': editNodeSettingsVue,\n        'debug-node-infos': debugNodeInfosVue,\n    },\n    data() {\n        return {\n            // modes\n            addingBox: false,\n            leftPanelMode: 'main', // 'main' to display main menu, 'node' for a node\n            selectedNodeId: null, // id of the node to display in left menu\n            debugNodeId: null, // on a snapshot, id of the node to display debug infos\n            newBoxPosition: null, // track mouse position relative to the graph when adding a node\n            displayEvents: false,\n\n            // the specific app css\n            appCss: \"\",\n        }\n    },\n    created: function () {\n        this.view = window.dualboxEditor.v;\n        // TODO: restore this when all menus are migrated to Vue.js\n\n        this.cssCode = null;\n        this.htmlCode = null;\n    },\n    updated: function () {\n        //console.log('updating main view with: ' + JSON.stringify(this.app));\n        this.appCss = (this.app && this.app.css) || \"\";\n\n        // Update html and css code editor\n        this.updateCode();\n    },\n    mounted: function () {\n        //this.view.setMainMenu();\n\n        $(this.$el).bind('expandSettings', function (e) {\n            // expand\n            $(this).find('.dualbox-graph-left-section').css('margin-left', '0');\n            $(this).find('.dualbox-graph-main').addClass('left-panel-expanded');\n            $(this).find('.btn-toggle-left-window').data('expanded', true).find('i')\n                .removeClass('fa-angle-double-right')\n                .addClass('fa-angle-double-left')\n                .attr('title', 'shrink window');\n        });\n\n        $(this.$el).bind('shrinkSettings', function (e) {\n            // shrink\n            $(this).find('.dualbox-graph-left-section').css('margin-left', '-465px');\n            $(this).find('.dualbox-graph-main').removeClass('left-panel-expanded');\n            $(this).find('.btn-toggle-left-window').data('expanded', false).find('i')\n                .removeClass('fa-angle-double-left')\n                .addClass('fa-angle-double-right')\n                .attr('title', 'expand window');\n        });\n\n        $(this.$el).bind('expandDebug', function (e) {\n            // expand\n            $(this).find('.dualbox-graph-right-section').css('margin-right', '0');\n            $(this).find('.dualbox-graph-main').addClass('right-panel-expanded');\n            $(this).find('.btn-toggle-right-window').data('expanded', true).find('i')\n                .removeClass('fa-angle-double-left')\n                .addClass('fa-angle-double-right')\n                .attr('title', 'shrink window');\n        });\n\n        $(this.$el).bind('shrinkDebug', function (e) {\n            // shrink\n            $(this).find('.dualbox-graph-right-section').css('margin-right', '-465px');\n            $(this).find('.dualbox-graph-main').removeClass('right-panel-expanded');\n            $(this).find('.btn-toggle-right-window').data('expanded', false).find('i')\n                .removeClass('fa-angle-double-right')\n                .addClass('fa-angle-double-left')\n                .attr('title', 'expand window');\n        });\n\n        // bind tabs\n        var self = this;\n        $(this.$el).find(\"a[data-toggle='tab']\").on(\"shown.bs.tab\", function (e) {\n            var target = $(e.target).attr(\"href\") // activated tab\n            if (target == \"#editor-graph-tab\") {\n                self.view.killApp();\n            } else if (target == \"#editor-interface-tab\") {\n                self.htmlCode.refresh();\n                self.cssCode.refresh();\n                self.view.runApp(self.getOptions());\n            }\n        });\n\n        $(this.$el).find(\"a[data-toggle='tab']\").on('click', function (e) {\n            e.preventDefault()\n            $(this).tab('show');\n        });\n\n        // Update html and css code editor\n        this.updateCode();\n\n        // Resize horizontally\n        $(this.$el).find('.dragbar').mousedown(function (e) {\n            e.preventDefault();\n            $(document).mouseup(function (e) {\n                $(document).unbind('mousemove');\n            });\n            $(document).mousemove(function (e) {\n                $('.code-panel').css('width', e.pageX + \"px\");\n                $('.application-container').css('width', ($(\".db-editor-main\").width() - e.pageX - 5) + \"px\");\n            })\n        });\n\n        // prevent default behavior for ctrl+s / cmd+s\n        $(document).keydown(function (event) {\n            if ((event.ctrlKey || event.metaKey) && event.which == 83) {\n                event.preventDefault();\n                return false;\n            }\n        });\n    },\n    destroyed: function() {\n        console.log('Graph vue destroyed');\n        $('.ContextMenu').remove();\n    },\n    methods: {\n        \"getOptions\": function () {\n            return {\n                profiler: $(this.$el).find('.run-profiler').is(':checked'),\n                logLevel: $(this.$el).find('.run-loglevel').val(),\n                options: {\n                    noVersionCheck: $(this.$el).find('.run-noversioncheck').is(':checked'),\n                    debug: {\n                        removeTryCatch: $(this.$el).find('.run-removetrycatch').is(':checked'),\n                        makeSynchrone: $(this.$el).find('.run-makesynchrone').is(':checked'),\n                        record: $(this.$el).find('.run-record').is(':checked'),\n                    }\n                }\n            }\n        },\n\n        \"updateCode\": function () {\n            // instanciate codemirror for html and css\n            if (!this.htmlCode) {\n                this.htmlCode = CodeMirror.fromTextArea($(this.$el).find(\".code-html\")[0], {\n                    lineNumbers: true,\n                    mode: \"htmlmixed\",\n                    lineWrapping: true,\n                    extraKeys: {\n                        \"Ctrl-S\": () => {\n                            this.saveInterfaceElement();\n                            this.runApp();\n                        },\n                        \"Cmd-S\": () => {\n                            this.saveInterfaceElement();\n                            this.runApp();\n                        }\n                    }\n                });\n            }\n            if (!this.cssCode) {\n                this.cssCode = CodeMirror.fromTextArea($(this.$el).find(\".code-css\")[0], {\n                    lineNumbers: true,\n                    mode: \"css\",\n                    lineWrapping: true,\n                    extraKeys: {\n                        \"Ctrl-S\": () => {\n                            // save css code into app\n                            this.view.m.data.root.css = this.cssCode.getValue();\n                            this.runApp();\n                        },\n                        \"Cmd-S\": () => {\n                            // save css code into app\n                            this.view.m.data.root.css = this.cssCode.getValue();\n                            this.runApp();\n                        }\n                    }\n                });\n            }\n            this.cssCode.setValue(this.view.m.get().css || \"\");\n        },\n\n        \"loadApp\": function () {\n            var self = this;\n\n            // create a fake input and click it to select a file\n            var input = $('<input/>', {\n                \"type\": \"file\",\n                \"class\": \"upload\",\n                \"accept\": \".json\"\n            });\n            input.change(function (e) {\n                // if we're not here, go to 1st tab\n                $(\"a[data-toggle='tab'][href='#editor-graph-tab']\").click();\n\n                // parse the file JSON and load it\n                var files = e.target.files; // FileList object\n                var r = new FileReader();\n                r.onload = function (e) {\n                    var contents = e.target.result;\n                    var json = JSON.parse(contents);\n                    self.view.e.setApp(json);\n                };\n\n                r.readAsText(files[0]);\n            });\n            input.click();\n        },\n        \"saveApp\": function () {\n            // bind the app load\n            if (this.saveButtonFunction) {\n                var saveButtonFunction = (e) => {\n                    var json = this.view.m.getCleanJson();\n                    return this.saveButtonFunction(json);\n                }\n            } else {\n                var saveButtonFunction = (e) => {\n                    var app = this.view.m.getCleanJson();\n                    var text = JSON.stringify(app, null, 2);\n                    var blob = new Blob([text], {\n                        \"type\": \"application/octet-stream\"\n                    });\n\n                    var a = document.createElement('a');\n                    a.href = window.URL.createObjectURL(blob);\n                    a.download = \"app.json\";\n\n                    // simulate a click on the link\n                    if (document.createEvent) {\n                        var event = document.createEvent(\"MouseEvents\");\n                        event.initEvent(\"click\", true, true);\n                        a.dispatchEvent(event);\n                    } else {\n                        a.click();\n                    }\n                }\n            }\n            saveButtonFunction();\n        },\n        \"getCurrentMousePosition\": function (e) {\n            return this.$refs.graph.getCurrentMousePosition(e);\n        },\n        \"addBox\": function (e) {\n            this.addingBox = true;\n            this.newBoxPosition = this.getCurrentMousePosition(e);\n            this.$forceUpdate();\n        },\n        \"onAddBoxClosed\": function () {\n            this.addingBox = false;\n            this.$forceUpdate();\n        },\n        \"addMetabox\": function (e) {\n            var self = this;\n            e.preventDefault();\n            e.stopPropagation();\n\n            swal({\n                input: 'text',\n                title: 'Choose a name for the metabox',\n            }).then(function (result) {\n                if (result.value) {\n                    self.view.c.addNewMetabox(result.value);\n                }\n            });\n        },\n        \"addInput\": function (e) {\n            this.view.c.createInput();\n        },\n        \"addOutput\": function (e) {\n            this.view.c.createOutput();\n        },\n        \"importMetabox\": async function (e) {\n            var self = this;\n\n            const {\n                value: file\n            } = await swal({\n                title: 'Select your metabox file',\n                input: 'file',\n                inputAttributes: {\n                    'accept': 'application/json',\n                    'aria-label': 'Select your metabox file'\n                }\n            })\n\n            if (file) {\n                const reader = new FileReader()\n                reader.onload = (e) => {\n                    var json = JSON.parse(e.target.result);\n\n                    self.view.e.loadPackages(json).then(async () => {\n                        const {\n                            value: name\n                        } = await swal({\n                            title: 'Choose a name for your metabox',\n                            input: 'text',\n                            showCancelButton: true,\n                            inputValidator: (value) => {\n                                return !value && 'You need to write something!'\n                            }\n                        });\n\n                        self.view.c.addNewMetabox(name, json);\n                    }).catch((err) => {\n                        console.error(err);\n                    });\n                }\n                reader.readAsText(file)\n            }\n        },\n\n        getInterfacesNames: function () {\n            return _.keys(_.get(this.view.m, [\"data\", \"root\", \"interface\"]) || {});\n        },\n\n        \"selectInterface\": function (e) {\n            // Load the interface HTML when selected\n            var uiName = $(e.target).val();\n            if (uiName !== \"\" && uiName !== \"Load UI...\") {\n                var itf = this.view.m.data.root.interface;\n                var htmlString = htmltool.json2html(itf[uiName]);\n                var prettyString = htmltool.htmlPrettyPrint(htmlString);\n                this.htmlCode.setValue(prettyString);\n            } else {\n                this.htmlCode.setValue(\"\");\n            }\n        },\n        \"saveInterfaceElement\": function (e) {\n            var currentInterface = $(this.$el).find('.app-interface-select').val();\n            if (currentInterface !== \"\") {\n                var currentHTML = this.htmlCode.getValue();\n\n                // save html code into app\n                this.view.m.data.root.interface[currentInterface] = htmltool.html2json(currentHTML);\n            }\n\n            // save css code into app\n            this.view.m.data.root.css = this.cssCode.getValue();\n        },\n        \"addInterface\": function (e) {\n            var self = this;\n\n            swal.mixin({\n                confirmButtonText: 'Next &rarr;',\n                showCancelButton: true,\n                progressSteps: ['1', '2', '3']\n            }).queue([{\n                    input: 'text',\n                    title: 'Choose a name',\n                    text: 'Enter a name for the new interface'\n                },\n                {\n                    input: 'select',\n                    title: 'Choose the type',\n                    text: 'Is it a viewer panel or a control panel?',\n                    inputOptions: {\n                        'control': 'A control panel',\n                        'viewer': 'A viewer',\n                    },\n                },\n                {\n                    input: 'select',\n                    title: 'Choose the position',\n                    text: 'Where do you want to position your panel?',\n                    inputOptions: {\n                        'top-left': 'At the top-left',\n                        'top-center': 'At the top-center',\n                        'top-right': 'At the top-right',\n                        'center-left': 'At the center-left',\n                        'center': 'At the center',\n                        'center-right': 'At the center-right',\n                        'bottom-left': 'At the bottom-left',\n                        'bottom-center': 'At the bottom-center',\n                        'bottom-right': 'At the bottom-right',\n                        'whole-screen': 'I want my panel in full-screen',\n                    },\n                }\n            ]).then((result) => {\n                if (result.value) {\n                    var name = result.value[0];\n                    var type = result.value[1];\n                    var position = result.value[2];\n\n                    if (name === \"\") {\n                        swal.showInputError(\"the name is empty!\");\n                        return false\n                    }\n\n                    var appInterface = self.view.m.data.root.interface;\n                    if (appInterface[name]) {\n                        swal.showInputError(\"Interface \" + name + \" already exists!\");\n                        return false\n                    } else {\n                        var style = {};\n                        switch (position) {\n                            case 'top-left':\n                                style = {\n                                    'position': 'absolute',\n                                    'top': 0,\n                                    'left': 0,\n                                    'margin': '15px'\n                                };\n                                break;\n                            case 'top-center':\n                                style = {\n                                    'position': 'absolute',\n                                    'top': 0,\n                                    'margin': '15px auto'\n                                };\n                                break;\n                            case 'top-right':\n                                style = {\n                                    'position': 'absolute',\n                                    'top': 0,\n                                    'right': 0,\n                                    'margin': '15px'\n                                };\n                                break;\n                            case 'center-left':\n                                style = {\n                                    'position': 'absolute',\n                                    'top': 0,\n                                    'bottom': 0,\n                                    'left': 0,\n                                    'margin': 'auto 15px'\n                                };\n                                break;\n                            case 'center':\n                                style = {\n                                    'position': 'absolute',\n                                    'top': 0,\n                                    'bottom': 0,\n                                    'left': 0,\n                                    'right': 0,\n                                    'margin': 'auto'\n                                };\n                                break;\n                            case 'center-right':\n                                style = {\n                                    'position': 'absolute',\n                                    'top': 0,\n                                    'bottom': 0,\n                                    'right': 0,\n                                    'margin': 'auto 15px'\n                                };\n                                break;\n                            case 'bottom-left':\n                                style = {\n                                    'position': 'absolute',\n                                    'bottom': 0,\n                                    'left': 0,\n                                    'margin': '15px'\n                                };\n                                break;\n                            case 'bottom-center':\n                                style = {\n                                    'position': 'absolute',\n                                    'bottom': 0,\n                                    'left': 0,\n                                    'right': 0,\n                                    'margin': '15px auto'\n                                };\n                                break;\n                            case 'bottom-right':\n                                style = {\n                                    'position': 'absolute',\n                                    'bottom': 0,\n                                    'right': 0,\n                                    'margin': '15px'\n                                };\n                                break;\n                            case 'whole-screen':\n                                style = {\n                                    'position': 'absolute',\n                                    'top': 0,\n                                    'left': 0\n                                };\n                                break;\n                        }\n\n                        // some prefilled data\n                        style['width'] = \"300px\";\n                        style['padding'] = \"15px\";\n                        style['border'] = \"1px solid #ccc\";\n                        style['border-radius'] = \"4px\";\n                        style['background'] = \"white\";\n                        if (position.startsWith(\"center\")) {\n                            style['height'] = \"60px\"; // must define height\n                        } else {\n                            style['height'] = \"auto\";\n                        }\n\n                        // add a basic control\n                        appInterface[name] = {\n                            type: \"Element\",\n                            tagName: \"div\",\n                            attributes: {\n                                className: [\n                                    \"dualbox\",\n                                    \"dualbox-container\",\n                                    \"dualbox-container-\" + name,\n                                    type == \"viewer\" ? \"dualbox-viewer\" : \"dualbox-controls\"\n                                ],\n                                style: style,\n                            },\n                            children: []\n                        }\n\n                        // add the value to our select, and load it\n                        $(self.$el).find(\".app-interface-select\").append(\n                            $(\"<option/>\", {\n                                \"value\": name\n                            }).append(name)\n                        );\n                        $(document).ready(() => {\n                            $(self.$el).find('.app-interface-select').val(name).change();\n\n                            // set it into the editor\n                            var htmlString = htmltool.json2html(appInterface[name]);\n                            var prettyString = htmltool.htmlPrettyPrint(htmlString);\n                            this.htmlCode.setValue(prettyString);\n                            self.updateCode();\n                        });\n\n                        self.view.runApp(self.getOptions());\n                    }\n                }\n            })\n        },\n        \"removeInterface\": function (e) {\n            var self = this;\n            var name = $('.app-interface-select').val();\n\n            swal({\n                title: \"Confirm deleting \" + name + \" ?\",\n                type: \"warning\",\n                showCancelButton: true,\n                confirmButtonColor: \"#DD6B55\",\n                confirmButtonText: \"Yes, delete it!\",\n                closeOnConfirm: true,\n                closeOnCancel: true\n            }).then((result) => {\n                if (result.value) {\n                    // set the interface back to first value\n                    $(this.$el).find(\".app-interface-select option[value='\" + name + \"']\").remove();\n                    $(this.$el).find(\".app-interface-select\").change();\n                    delete self.view.m.data.root.interface[name];\n                    self.htmlCode.setValue(\"\");\n                    self.view.runApp(self.getOptions());\n                }\n            });\n        },\n        \"editPanelDescription\": function (e) {\n            var self = this;\n            var name = $('.app-interface-select').val();\n\n            swal({\n                title: \"Enter a description for this panel!\",\n                input: \"textarea\",\n                inputValue: this.view.m.data.root.interface[name].description || \"\",\n                showCancelButton: true,\n                closeOnConfirm: false,\n                showLoaderOnConfirm: true,\n                animation: \"slide-from-top\",\n                inputPlaceholder: \"Write something\"\n            }).then((result) => {\n                if (result.value === \"\") {\n                    swal.showInputError(\"You need to write something!\");\n                    return false\n                } else {\n                    self.view.m.data.root.interface[name].description = result.value;\n                }\n            });\n        },\n        \"toggleLeftWindow\": function (e) {\n            var expanded = $(e.target).closest('button').data('expanded');\n            if (expanded) {\n                $(this.$el).trigger('shrinkSettings');\n            } else {\n                $(this.$el).trigger('expandSettings');\n            }\n        },\n        \"toggleRightWindow\": function (e) {\n            var expanded = $(e.target).closest('button').data('expanded');\n            if (expanded) {\n                $(this.$el).trigger('shrinkDebug');\n            } else {\n                $(this.$el).trigger('expandDebug');\n            }\n        },\n\n        \"showEvents\": function (e) {\n            //this.view.setEventsVisibility( $(e.target).is(':checked') );\n            this.displayEvents = $(e.target).is(':checked');\n        },\n\n        \"runApp\": function (e) {\n            this.view.runApp(this.getOptions());\n        },\n\n        \"takeAndLoadSnapshot\": function (e) {\n            this.view.takeAndLoadSnapshot();\n        },\n\n        \"undo\": function (e) {\n            this.view.c.undo();\n        },\n\n        \"redo\": function (e) {\n            this.view.c.redo();\n        },\n\n        \"removeSelection\": function (e) {\n            this.view.c.deleteSelection();\n        },\n\n        \"mergeSelection\": function (e) {\n            this.view.c.mergeSelection();\n        },\n\n        \"setMainMenu\": async function (e) {\n            await this.view.setMainMenu();\n        },\n\n        \"getCurrentApplication\": function (e) {\n            // trick to make this function reactive to \"app\" field update\n            if (this.app) {\n                return this.view.m.getCurrentApp(true);\n            } else {\n                throw \"Error: no app found\";\n            }\n        },\n\n        \"onEdited\": function (e) {\n            console.log('Something was edited, forcing new render');\n            this.$forceUpdate();\n        },\n\n        \"ready\": function () {\n            return new Promise(resolve => {\n                this.$nextTick(() => {\n                    window.requestAnimationFrame(() => {\n                        $(this.$el).ready(resolve);\n                    })\n                })\n            })\n        }\n    }\n}\n</script>\n"]}, media: undefined });
+    inject("data-v-8de0abf4_0", { source: "\n.code-panel {\n    width: 30%;\n    height: 100%;\n    vertical-align: top;\n    float: left;\n}\n.application-container {\n    width: calc(70% - 5px);\n    height: 100%;\n    display: inline-block;\n    vertical-align: top;\n    float: right;\n}\n.code-controls,\n.run-options {\n    width: 100%;\n    height: 60px;\n}\n.application {\n    width: 100%;\n    height: calc(100% - 60px);\n    background-color: #ccc;\n}\n.dragbar {\n    height: 100%;\n    width: 5px;\n    background-color: #e7e7e7;\n    display: inline-block;\n    cursor: col-resize;\n}\n.code-content {\n    position: relative;\n    height: calc(100% - 56px);\n}\n.code-html-container {\n    position: relative;\n    height: 50%;\n    border-bottom: 1px solid #e7e7e7;\n}\n.code-css-container {\n    position: relative;\n    height: calc(50% - 1px);\n    overflow: hidden;\n}\n.code-css {\n    width: 100%;\n    height: 100%;\n}\n.code-html {\n    height: calc(100% - 40px);\n    width: 100%;\n}\n.CodeMirror {\n    height: 100% !important;\n}\n.code-badge {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    padding: 10px;\n}\n.btn-light.focus,\n.btn-light:focus {\n    box-shadow: none !important;\n}\n.button-bar {\n    width: 60px;\n    padding: 10px;\n    border-bottom: 1px solid #e7e7e7;\n    width: 100%;\n    background-color: white;\n}\n.noselect {\n    -webkit-user-select: none;\n    /* Chrome/Safari */\n    -moz-user-select: none;\n    /* Firefox */\n    -ms-user-select: none;\n    /* IE10+ */\n    -o-user-select: none;\n    user-select: none;\n}\n.btn+.btn {\n    margin-left: 5px;\n}\n.btn-graph-goto {\n    box-shadow: none !important;\n}\n.nav-tabs {\n    border-bottom: none;\n}\n.main-navigation a.nav-link {\n    color: white;\n}\n.main-navigation a.nav-link.active {\n    color: #212529;\n}\n.dualbox-editor-body {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background-color: rgb(85, 85, 85);\n}\n.dualbox-graph-left-section {\n    height: 100%;\n    width: 500px;\n    float: left;\n    position: relative;\n    overflow: hidden;\n    margin-left: -465px;\n    transition: margin-left 0.3s ease;\n}\n.dualbox-graph-left-window {\n    width: calc(100% - 35px);\n    height: calc(100% - 10px);\n    margin-top: 10px;\n    /* background-color: #ECF2F8; */\n    background-color: #f8f9fa;\n    /* border: 1px solid grey; */\n    border-radius: 5px;\n    position: relative;\n    float: left;\n}\n.dualbox-graph-left-panel {\n    width: 100%;\n    height: 100%;\n}\n.btn-toggle-left-window {\n    position: absolute;\n    right: 0;\n    top: 0;\n    margin-right: -35px;\n    z-index: 100;\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n}\n.btn-toggle-left-window:hover,\n.btn-toggle-right-window:hover,\n.btn-toggle-left-window:focus,\n.btn-toggle-right-window:focus,\n.btn-toggle-left-window:active,\n.btn-toggle-right-window:active,\n.btn-toggle-left-window:active:hover,\n.btn-toggle-right-window:active:hover {\n    color: #212529 !important;\n    background-color: #f8f9fa !important;\n    border-color: #f8f9fa !important;\n}\n.dualbox-graph-right-section {\n    height: 100%;\n    width: 500px;\n    float: right;\n    position: relative;\n    overflow: hidden;\n    margin-right: -465px;\n    transition: margin-right 0.3s ease;\n}\n.dualbox-graph-right-window {\n    width: calc(100% - 35px);\n    height: calc(100% - 20px);\n    margin-top: 10px;\n    margin-bottom: 30px;\n    /* background-color: #ECF2F8; */\n    background-color: #f8f9fa;\n    /* border: 1px solid grey; */\n    border-radius: 5px;\n    position: relative;\n    float: right;\n}\n.dualbox-graph-right-panel {\n    width: 100%;\n    height: 100%;\n}\n.btn-toggle-right-window {\n    position: absolute;\n    left: 0;\n    top: 0;\n    margin-left: -35px;\n    z-index: 100;\n    border-top-right-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n.dualbox-graph-tab {\n    height: 100%;\n    width: 100%;\n    background-color: #555 !important;\n}\n.dualbox-graph-main {\n    height: 100%;\n    width: calc(100% - 70px);\n    float: right;\n    background-color: #555 !important;\n    transition: width 0.3s ease;\n}\n.dualbox-graph-main.left-panel-expanded {\n    width: calc(100% - 535px);\n    margin-left: -465px;\n}\n.dualbox-graph-main.right-panel-expanded {\n    width: calc(100% - 535px);\n}\n.dualbox-graph-main.left-panel-expanded.right-panel-expanded {\n    width: calc(100% - 1000px);\n    margin-left: -465px;\n}\n.opacity0 {\n    opacity: 0;\n}\n.btn-editor-xs {\n    width: 18px;\n    padding: 3px !important;\n    line-height: .5;\n    border-radius: 2px;\n}\n.btn-editor-xs>i {\n    font-size: 10px;\n}\n.btn-outline-discrete {\n    border-color: rgba(0, 0, 0, 0.05);\n    border-color: transparent;\n    color: rgba(0, 0, 0, 0.3);\n}\n.dualbox-app-navigation {\n    background-color: transparent;\n    margin-bottom: 0;\n    vertical-align: middle;\n    padding-top: 7px;\n    padding-bottom: 7px;\n    font-weight: bold;\n    user-select: none;\n}\n.app-topbar {\n    border-bottom: none;\n    padding-left: 15px;\n    padding-right: 15px;\n    display: flex;\n    width: 100%;\n    height: 58px;\n    padding-top: 10px;\n    padding-bottom: 10px;\n}\n.dark,\n.graph-tab.active,\n.nav-item.active .graph-tab {\n    color: white !important;\n    background-color: #555 !important;\n}\n.light {\n    color: #4d4d4d !important;\n    background-color: #f8f9fa !important;\n}\n.main-navigation .nav-link,\n.main-navigation .nav-link.active,\n.nav-item.active .nav-link {\n    border-bottom: none;\n    border-left: none;\n    border-top: none;\n    border-right: none;\n    position: relative;\n    top: 1px;\n}\n.btn:focus,\nbutton:focus {\n    outline: none;\n    box-shadow: none;\n}\n.btn-transparent,\n.btn-transparent:hover,\n.btn-transparent:focus {\n    background-color: transparent;\n}\n.connection-control {\n    position: absolute;\n    height: 14px;\n    width: 14px;\n    background-color: transparent;\n    z-index: 19;\n    cursor: move;\n}\n.connection-control.selected {\n    border-color: #0066ff;\n    box-shadow: 1px 1px 10px #0066ff;\n}\n.connection-label {\n    z-index: 22 !important;\n    color: #004d00 !important;\n    background-color: white !important;\n    padding: 4px 4px;\n    border: 2px solid #004d00;\n    font-size: 16px !important;\n    border-radius: 5px;\n}\n.input-color-tag {\n    background-color: #F2D600;\n}\n.output-color-tag {\n    background-color: #FFAB4A;\n}\n.ui-color-tag {\n    background-color: #61BD4F;\n}\n.metanode-color-tag {\n    background-color: #DDDDDD;\n}\n.input {}\n.output {}\n.fileUpload {\n    position: relative;\n    overflow: hidden;\n    margin: 10px;\n}\n.fileUpload input.upload {\n    position: absolute;\n    top: 0;\n    right: 0;\n    margin: 0;\n    padding: 0;\n    font-size: 20px;\n    cursor: pointer;\n    opacity: 0;\n    filter: alpha(opacity=0);\n}\n.module-edit-modal-body .btn+.btn {\n    margin-bottom: 0;\n    margin-left: 5px;\n}\n.btn-add-node {\n    width: 46%;\n    margin: 1%;\n}\nbutton.close {\n    position: absolute;\n    right: 0;\n    margin-right: 5px !important;\n}\n.CodeMirror {\n    height: auto;\n    min-height: 300px;\n}\n.load-app,\n.save-app {\n    margin-left: 5px;\n    margin-right: 5px;\n}\n.btn-xs {\n    padding: 0px 4px;\n    font-size: 12px;\n}\n", map: {"version":3,"sources":["/home/seb/dev/dualbox/editor/js/src/v/templates/main.vue"],"names":[],"mappings":";AACA;IACA,UAAA;IACA,YAAA;IACA,mBAAA;IACA,WAAA;AACA;AAEA;IACA,sBAAA;IACA,YAAA;IACA,qBAAA;IACA,mBAAA;IACA,YAAA;AACA;AAEA;;IAEA,WAAA;IACA,YAAA;AACA;AAEA;IACA,WAAA;IACA,yBAAA;IACA,sBAAA;AACA;AAEA;IACA,YAAA;IACA,UAAA;IACA,yBAAA;IACA,qBAAA;IACA,kBAAA;AACA;AAEA;IACA,kBAAA;IACA,yBAAA;AACA;AAEA;IACA,kBAAA;IACA,WAAA;IACA,gCAAA;AACA;AAEA;IACA,kBAAA;IACA,uBAAA;IACA,gBAAA;AACA;AAEA;IACA,WAAA;IACA,YAAA;AACA;AAEA;IACA,yBAAA;IACA,WAAA;AACA;AAEA;IACA,uBAAA;AACA;AAEA;IACA,kBAAA;IACA,SAAA;IACA,WAAA;IACA,aAAA;AACA;AAEA;;IAEA,2BAAA;AACA;AAEA;IACA,WAAA;IACA,aAAA;IACA,gCAAA;IACA,WAAA;IACA,uBAAA;AACA;AAEA;IACA,yBAAA;IACA,kBAAA;IACA,sBAAA;IACA,YAAA;IACA,qBAAA;IACA,UAAA;IACA,oBAAA;IACA,iBAAA;AACA;AAEA;IACA,gBAAA;AACA;AAEA;IACA,2BAAA;AACA;AAEA;IACA,mBAAA;AACA;AAEA;IACA,YAAA;AACA;AAEA;IACA,cAAA;AACA;AAEA;IACA,WAAA;IACA,YAAA;IACA,gBAAA;IACA,iCAAA;AACA;AAEA;IACA,YAAA;IACA,YAAA;IACA,WAAA;IACA,kBAAA;IACA,gBAAA;IACA,mBAAA;IACA,iCAAA;AACA;AAEA;IACA,wBAAA;IACA,yBAAA;IACA,gBAAA;IACA,+BAAA;IACA,yBAAA;IACA,4BAAA;IACA,kBAAA;IACA,kBAAA;IACA,WAAA;AACA;AAEA;IACA,WAAA;IACA,YAAA;AACA;AAEA;IACA,kBAAA;IACA,QAAA;IACA,MAAA;IACA,mBAAA;IACA,YAAA;IACA,2BAAA;IACA,8BAAA;AACA;AAEA;;;;;;;;IAQA,yBAAA;IACA,oCAAA;IACA,gCAAA;AACA;AAEA;IACA,YAAA;IACA,YAAA;IACA,YAAA;IACA,kBAAA;IACA,gBAAA;IACA,oBAAA;IACA,kCAAA;AACA;AAEA;IACA,wBAAA;IACA,yBAAA;IACA,gBAAA;IACA,mBAAA;IACA,+BAAA;IACA,yBAAA;IACA,4BAAA;IACA,kBAAA;IACA,kBAAA;IACA,YAAA;AACA;AAEA;IACA,WAAA;IACA,YAAA;AACA;AAEA;IACA,kBAAA;IACA,OAAA;IACA,MAAA;IACA,kBAAA;IACA,YAAA;IACA,4BAAA;IACA,+BAAA;AACA;AAEA;IACA,YAAA;IACA,WAAA;IACA,iCAAA;AACA;AAEA;IACA,YAAA;IACA,wBAAA;IACA,YAAA;IACA,iCAAA;IACA,2BAAA;AACA;AAEA;IACA,yBAAA;IACA,mBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,0BAAA;IACA,mBAAA;AACA;AAEA;IACA,UAAA;AACA;AAEA;IACA,WAAA;IACA,uBAAA;IACA,eAAA;IACA,kBAAA;AACA;AAEA;IACA,eAAA;AACA;AAEA;IACA,iCAAA;IACA,yBAAA;IACA,yBAAA;AACA;AAEA;IACA,6BAAA;IACA,gBAAA;IACA,sBAAA;IACA,gBAAA;IACA,mBAAA;IACA,iBAAA;IACA,iBAAA;AACA;AAEA;IACA,mBAAA;IACA,kBAAA;IACA,mBAAA;IACA,aAAA;IACA,WAAA;IACA,YAAA;IACA,iBAAA;IACA,oBAAA;AACA;AAEA;;;IAGA,uBAAA;IACA,iCAAA;AACA;AAEA;IACA,yBAAA;IACA,oCAAA;AACA;AAEA;;;IAGA,mBAAA;IACA,iBAAA;IACA,gBAAA;IACA,kBAAA;IACA,kBAAA;IACA,QAAA;AACA;AAEA;;IAEA,aAAA;IACA,gBAAA;AACA;AAEA;;;IAGA,6BAAA;AACA;AAEA;IACA,kBAAA;IACA,YAAA;IACA,WAAA;IACA,6BAAA;IACA,WAAA;IACA,YAAA;AACA;AAEA;IACA,qBAAA;IACA,gCAAA;AACA;AAEA;IACA,sBAAA;IACA,yBAAA;IACA,kCAAA;IACA,gBAAA;IACA,yBAAA;IACA,0BAAA;IACA,kBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA,QAAA;AAEA,SAAA;AAEA;IACA,kBAAA;IACA,gBAAA;IACA,YAAA;AACA;AAEA;IACA,kBAAA;IACA,MAAA;IACA,QAAA;IACA,SAAA;IACA,UAAA;IACA,eAAA;IACA,eAAA;IACA,UAAA;IACA,wBAAA;AACA;AAEA;IACA,gBAAA;IACA,gBAAA;AACA;AAEA;IACA,UAAA;IACA,UAAA;AACA;AAEA;IACA,kBAAA;IACA,QAAA;IACA,4BAAA;AACA;AAEA;IACA,YAAA;IACA,iBAAA;AACA;AAEA;;IAEA,gBAAA;IACA,iBAAA;AACA;AAEA;IACA,gBAAA;IACA,eAAA;AACA","file":"main.vue","sourcesContent":["<style>\n.code-panel {\n    width: 30%;\n    height: 100%;\n    vertical-align: top;\n    float: left;\n}\n\n.application-container {\n    width: calc(70% - 5px);\n    height: 100%;\n    display: inline-block;\n    vertical-align: top;\n    float: right;\n}\n\n.code-controls,\n.run-options {\n    width: 100%;\n    height: 60px;\n}\n\n.application {\n    width: 100%;\n    height: calc(100% - 60px);\n    background-color: #ccc;\n}\n\n.dragbar {\n    height: 100%;\n    width: 5px;\n    background-color: #e7e7e7;\n    display: inline-block;\n    cursor: col-resize;\n}\n\n.code-content {\n    position: relative;\n    height: calc(100% - 56px);\n}\n\n.code-html-container {\n    position: relative;\n    height: 50%;\n    border-bottom: 1px solid #e7e7e7;\n}\n\n.code-css-container {\n    position: relative;\n    height: calc(50% - 1px);\n    overflow: hidden;\n}\n\n.code-css {\n    width: 100%;\n    height: 100%;\n}\n\n.code-html {\n    height: calc(100% - 40px);\n    width: 100%;\n}\n\n.CodeMirror {\n    height: 100% !important;\n}\n\n.code-badge {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    padding: 10px;\n}\n\n.btn-light.focus,\n.btn-light:focus {\n    box-shadow: none !important;\n}\n\n.button-bar {\n    width: 60px;\n    padding: 10px;\n    border-bottom: 1px solid #e7e7e7;\n    width: 100%;\n    background-color: white;\n}\n\n.noselect {\n    -webkit-user-select: none;\n    /* Chrome/Safari */\n    -moz-user-select: none;\n    /* Firefox */\n    -ms-user-select: none;\n    /* IE10+ */\n    -o-user-select: none;\n    user-select: none;\n}\n\n.btn+.btn {\n    margin-left: 5px;\n}\n\n.btn-graph-goto {\n    box-shadow: none !important;\n}\n\n.nav-tabs {\n    border-bottom: none;\n}\n\n.main-navigation a.nav-link {\n    color: white;\n}\n\n.main-navigation a.nav-link.active {\n    color: #212529;\n}\n\n.dualbox-editor-body {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background-color: rgb(85, 85, 85);\n}\n\n.dualbox-graph-left-section {\n    height: 100%;\n    width: 500px;\n    float: left;\n    position: relative;\n    overflow: hidden;\n    margin-left: -465px;\n    transition: margin-left 0.3s ease;\n}\n\n.dualbox-graph-left-window {\n    width: calc(100% - 35px);\n    height: calc(100% - 10px);\n    margin-top: 10px;\n    /* background-color: #ECF2F8; */\n    background-color: #f8f9fa;\n    /* border: 1px solid grey; */\n    border-radius: 5px;\n    position: relative;\n    float: left;\n}\n\n.dualbox-graph-left-panel {\n    width: 100%;\n    height: 100%;\n}\n\n.btn-toggle-left-window {\n    position: absolute;\n    right: 0;\n    top: 0;\n    margin-right: -35px;\n    z-index: 100;\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n}\n\n.btn-toggle-left-window:hover,\n.btn-toggle-right-window:hover,\n.btn-toggle-left-window:focus,\n.btn-toggle-right-window:focus,\n.btn-toggle-left-window:active,\n.btn-toggle-right-window:active,\n.btn-toggle-left-window:active:hover,\n.btn-toggle-right-window:active:hover {\n    color: #212529 !important;\n    background-color: #f8f9fa !important;\n    border-color: #f8f9fa !important;\n}\n\n.dualbox-graph-right-section {\n    height: 100%;\n    width: 500px;\n    float: right;\n    position: relative;\n    overflow: hidden;\n    margin-right: -465px;\n    transition: margin-right 0.3s ease;\n}\n\n.dualbox-graph-right-window {\n    width: calc(100% - 35px);\n    height: calc(100% - 20px);\n    margin-top: 10px;\n    margin-bottom: 30px;\n    /* background-color: #ECF2F8; */\n    background-color: #f8f9fa;\n    /* border: 1px solid grey; */\n    border-radius: 5px;\n    position: relative;\n    float: right;\n}\n\n.dualbox-graph-right-panel {\n    width: 100%;\n    height: 100%;\n}\n\n.btn-toggle-right-window {\n    position: absolute;\n    left: 0;\n    top: 0;\n    margin-left: -35px;\n    z-index: 100;\n    border-top-right-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.dualbox-graph-tab {\n    height: 100%;\n    width: 100%;\n    background-color: #555 !important;\n}\n\n.dualbox-graph-main {\n    height: 100%;\n    width: calc(100% - 70px);\n    float: right;\n    background-color: #555 !important;\n    transition: width 0.3s ease;\n}\n\n.dualbox-graph-main.left-panel-expanded {\n    width: calc(100% - 535px);\n    margin-left: -465px;\n}\n\n.dualbox-graph-main.right-panel-expanded {\n    width: calc(100% - 535px);\n}\n\n.dualbox-graph-main.left-panel-expanded.right-panel-expanded {\n    width: calc(100% - 1000px);\n    margin-left: -465px;\n}\n\n.opacity0 {\n    opacity: 0;\n}\n\n.btn-editor-xs {\n    width: 18px;\n    padding: 3px !important;\n    line-height: .5;\n    border-radius: 2px;\n}\n\n.btn-editor-xs>i {\n    font-size: 10px;\n}\n\n.btn-outline-discrete {\n    border-color: rgba(0, 0, 0, 0.05);\n    border-color: transparent;\n    color: rgba(0, 0, 0, 0.3);\n}\n\n.dualbox-app-navigation {\n    background-color: transparent;\n    margin-bottom: 0;\n    vertical-align: middle;\n    padding-top: 7px;\n    padding-bottom: 7px;\n    font-weight: bold;\n    user-select: none;\n}\n\n.app-topbar {\n    border-bottom: none;\n    padding-left: 15px;\n    padding-right: 15px;\n    display: flex;\n    width: 100%;\n    height: 58px;\n    padding-top: 10px;\n    padding-bottom: 10px;\n}\n\n.dark,\n.graph-tab.active,\n.nav-item.active .graph-tab {\n    color: white !important;\n    background-color: #555 !important;\n}\n\n.light {\n    color: #4d4d4d !important;\n    background-color: #f8f9fa !important;\n}\n\n.main-navigation .nav-link,\n.main-navigation .nav-link.active,\n.nav-item.active .nav-link {\n    border-bottom: none;\n    border-left: none;\n    border-top: none;\n    border-right: none;\n    position: relative;\n    top: 1px;\n}\n\n.btn:focus,\nbutton:focus {\n    outline: none;\n    box-shadow: none;\n}\n\n.btn-transparent,\n.btn-transparent:hover,\n.btn-transparent:focus {\n    background-color: transparent;\n}\n\n.connection-control {\n    position: absolute;\n    height: 14px;\n    width: 14px;\n    background-color: transparent;\n    z-index: 19;\n    cursor: move;\n}\n\n.connection-control.selected {\n    border-color: #0066ff;\n    box-shadow: 1px 1px 10px #0066ff;\n}\n\n.connection-label {\n    z-index: 22 !important;\n    color: #004d00 !important;\n    background-color: white !important;\n    padding: 4px 4px;\n    border: 2px solid #004d00;\n    font-size: 16px !important;\n    border-radius: 5px;\n}\n\n.input-color-tag {\n    background-color: #F2D600;\n}\n\n.output-color-tag {\n    background-color: #FFAB4A;\n}\n\n.ui-color-tag {\n    background-color: #61BD4F;\n}\n\n.metanode-color-tag {\n    background-color: #DDDDDD;\n}\n\n.input {}\n\n.output {}\n\n.fileUpload {\n    position: relative;\n    overflow: hidden;\n    margin: 10px;\n}\n\n.fileUpload input.upload {\n    position: absolute;\n    top: 0;\n    right: 0;\n    margin: 0;\n    padding: 0;\n    font-size: 20px;\n    cursor: pointer;\n    opacity: 0;\n    filter: alpha(opacity=0);\n}\n\n.module-edit-modal-body .btn+.btn {\n    margin-bottom: 0;\n    margin-left: 5px;\n}\n\n.btn-add-node {\n    width: 46%;\n    margin: 1%;\n}\n\nbutton.close {\n    position: absolute;\n    right: 0;\n    margin-right: 5px !important;\n}\n\n.CodeMirror {\n    height: auto;\n    min-height: 300px;\n}\n\n.load-app,\n.save-app {\n    margin-left: 5px;\n    margin-right: 5px;\n}\n\n.btn-xs {\n    padding: 0px 4px;\n    font-size: 12px;\n}\n</style>\n\n<template>\n<div class=\"dualbox-editor-body\">\n    <nav class=\"main-navigation navbar navbar-default\" style=\"position: relative; margin-bottom: 0px; padding: 0; padding-top: 5px; background-color: #2e6da4;\">\n        <ul class=\"nav nav-tabs\">\n            <li class=\"nav-item active\">\n                <a class=\"nav-link graph-tab\" href=\"#editor-graph-tab\" data-toggle=\"tab\">Application Graph</a>\n            </li>\n            <li class=\"nav-item\">\n                <a class=\"nav-link interface-tab\" href=\"#editor-interface-tab\" data-toggle=\"tab\">Interface Editor</a>\n            </li>\n        </ul>\n\n        <div class=\"nav navbar-right\" style=\"vertical-align: top; margin-top: 5px; margin-right: 10px; margin-bottom: 5px;\">\n            <div v-if=\"showLoadButton === true\">\n                <button class=\"load-app btn btn-sm btn-light\" style=\"position: relative; bottom: 3px;\" @click=\"loadApp\">Load App</button>\n            </div>\n            <div v-if=\"showSaveButton\">\n                <button class=\"save-app btn btn-sm btn-light\" style=\"position: relative; bottom: 3px;\" @click=\"saveApp\">Save App</button>\n            </div>\n        </div>\n    </nav>\n    <div class=\"tab-content dualbox-graph-tab\" style=\"width: 100%; height: calc(100% - 46px);\">\n        <div class=\"tab-pane active\" id=\"editor-graph-tab\" style=\"width: 100%; height: 100%;\">\n            <div class=\"dualbox-graph-left-section dark\">\n                <div class=\"dualbox-graph-left-window\">\n                    <button class=\"btn btn-light btn-toggle-left-window\" @click=\"toggleLeftWindow\" title=\"shrink window\" data-expanded=\"false\"><i class=\"fa fa-angle-double-right\"></i></button>\n                    <div class=\"dualbox-graph-left-panel light\">\n                        <edit-node-settings v-if=\"leftPanelMode == 'node' && selectedNodeId !== null\" :id=\"selectedNodeId\" :key=\"selectedNodeId\"></edit-node-settings>\n                        <edit-main-settings v-else-if=\"leftPanelMode == 'main'\" :app=\"getCurrentApplication()\" @edited=\"onEdited()\"></edit-main-settings>\n                    </div>\n                </div>\n            </div>\n            <div class=\"dualbox-graph-right-section dark\">\n                <div class=\"dualbox-graph-right-window\">\n                    <button class=\"btn btn-light btn-toggle-right-window\" @click=\"toggleRightWindow\" title=\"shrink window\" data-expanded=\"false\"><i class=\"fa fa-angle-double-left\"></i></button>\n                    <div class=\"dualbox-graph-right-panel light\">\n                        <debug-node-infos v-if=\"debugNodeId !== null\" :id=\"debugNodeId\"></debug-node-infos>\n                    </div>\n                </div>\n            </div>\n            <div class=\"container-fluid dualbox-graph-main\" @click=\"setMainMenu\">\n                <div class=\"row\">\n                    <div class=\"app-topbar dark\">\n                        <div class=\"justify-content-left\">\n                            <div class=\"dropdown\">\n                                <button class=\"btn btn-primary dropdown-toggle d-none\" type=\"button\" id=\"add-node-dropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" style=\"margin-right: 5px;\">\n                                    Add\n                                </button>\n                                <div class=\"dropdown-menu\" aria-labelledby=\"add-node-dropdown\">\n                                    <a class=\"dropdown-item add-box\" @click=\"addBox\" href=\"#\">Add box</a>\n                                    <a class=\"dropdown-item add-metabox\" @click=\"addMetabox\" href=\"#\">Add metabox</a>\n                                    <a class=\"dropdown-item add-input\" @click=\"addInput\" href=\"#\">Add input</a>\n                                    <a class=\"dropdown-item add-output\" @click=\"addOutput\" href=\"#\">Add output</a>\n                                    <a class=\"dropdown-item import-metabox\" @click=\"importMetabox\" href=\"#\">Import metabox</a>\n                                </div>\n                                <button class=\"btn btn-light btn-undo\" title=\"undo (ctrl-z)\" @click=\"undo\"><i class=\"fa fa-undo\"></i></button>\n                                <button class=\"btn btn-light btn-redo\" title=\"redo (ctrl-y)\" @click=\"redo\"><i class=\"fa fa-repeat fa-redo\"></i></button>\n                                <div class=\"form-check d-inline-block ml-2\">\n                                    <label class=\"form-check-label\">\n                                        <input class=\"form-check-input show-events\" type=\"checkbox\" value=\"false\" @click=\"showEvents\">\n                                        <span class=\"noselect\">Show events</span>\n                                    </label>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"justify-content-center mx-auto\">\n                            <ol class=\"dualbox-app-navigation breadcrumb\"></ol>\n                        </div>\n\n                        <div class=\"justify-content-right\">\n                            <div class=\"dropdown selection-menu\" style=\"display: none;\">\n                                <button class=\"btn btn-primary dropdown-toggle\" type=\"button\" id=\"selection-dropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                    Selection\n                                </button>\n                                <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"add-node-dropdown\">\n                                    <a class=\"dropdown-item dualbox-merge-selection\" @click=\"mergeSelection\" href=\"#\">Merge</a>\n                                    <a class=\"dropdown-item dualbox-remove-selection\" @click=\"removeSelection\" href=\"#\" style=\"color: red;\">Delete</a>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"row\" style=\"height: calc(100% - 58px);\">\n                    <graph-vue :app=\"app\" ref=\"graph\" :displayEvents=\"displayEvents\"></graph-vue>\n                </div>\n            </div>\n        </div>\n        <div class=\"tab-pane\" id=\"editor-interface-tab\" style=\"width 100%; height: 100%; background-color: white;\">\n            <div class=\"db-editor-main\" style=\"width: 100%; height: 100%; overflow: hidden;\">\n                <div class=\"code-panel\">\n                    <div class=\"button-bar form-inline code-controls\" style=\"position: relative;\">\n                        <button class=\"btn btn-primary btn-save-interface-element\" @click=\"saveInterfaceElement\">Save changes</button>\n                    </div>\n                    <div class=\"code-content\">\n                        <div class=\"code-html-container\">\n                            <div style=\"padding-top: 5px; padding-bottom: 5px; height: 50px; position: relative;\">\n                                <h3 style=\"position: absolute; top: 0; margin: 5px; font-size: 16px; z-index: 100; display: inline-block; margin-top: 5px;\">HTML</h3>\n                                <div class=\"d-inline-block ml-auto form-inline mr-2 mt-2\" style=\"position: absolute; top: 0; right: 0;\">\n                                    <button class=\"btn btn-success btn-sm btn-add-interface\" @click=\"addInterface\"><i class=\"fas fa-plus\"></i></button>\n                                    <select class=\"form-control btn-sm app-interface-select\" @change=\"selectInterface\" style=\"width: 150px; height: 32px;\">\n                                        <option>Load UI...</option>\n                                        <option v-for=\"interfaceName in getInterfacesNames()\" :value=\"interfaceName\">{{interfaceName}}</option>\n                                    </select>\n                                    <button class=\"btn btn-sm btn-light btn-edit-panel-description\" @click=\"editPanelDescription\"><i class=\"fas fa-info\" style=\"padding-left: 8px; padding-right: 8px;\"></i></button>\n                                    <button class=\"btn btn-danger btn-sm btn-remove-interface\" @click=\"removeInterface\"><i class=\"fas fa-minus\"></i></button>\n                                </div>\n                            </div>\n                            <div class=\"code-html-text-container\" style=\"position: relative; height: calc(100% - 50px);\">\n                                <textarea class=\"code-html\"></textarea>\n                            </div>\n                        </div>\n                        <div class=\"code-css-container\">\n                            <div style=\"height: 30px;\">\n                                <h3 style=\"position: absolute; top: 0; margin: 5px; font-size: 16px; z-index: 100;\">CSS</h3>\n                            </div>\n                            <div class=\"colde-css-text-container\" style=\"position: relative; height: calc(100% - 30px);\">\n                                <textarea class=\"code-css\" v-model=\"appCss\"></textarea>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"dragbar\"></div>\n                <div class=\"application-container\">\n                    <div class=\"button-bar form-inline run-options\" style=\"position: relative;\">\n                        <button class=\"btn btn-success btn-run mr-2\" @click=\"runApp\">Run</button>\n\n                        <select class=\"form-control run-loglevel mr-1 ml-2\">\n                            <option>error</option>\n                            <option>warn</option>\n                            <option>info</option>\n                            <option>log</option>\n                            <option>debug</option>\n                        </select>\n\n                        <input class=\"form-control run-noversioncheck mr-1 ml-3\" type=\"checkbox\" checked>No version checking</input>\n                        <input class=\"form-control run-removetrycatch mr-1 ml-3\" type=\"checkbox\">Remove Try/catch</input>\n                        <input class=\"form-control run-makesynchrone mr-1 ml-3\" type=\"checkbox\">Make Synchrone</input>\n                        <input class=\"form-control run-ressourcecaching mr-1 ml-3\" type=\"checkbox\">Ressource caching</input>\n\n                        <div class=\"ml-auto\">\n                            <input class=\"form-control run-profiler mr-1 ml-3\" type=\"checkbox\">Profiler</input>\n                            <input class=\"form-control run-record mr-1 ml-3\" type=\"checkbox\">Record</input>\n                            <button class=\"btn btn-secondary btn-snapshot\" @click=\"takeAndLoadSnapshot\">Snapshot</button>\n                        </div>\n                    </div>\n                    <div class=\"application capture-left-click capture-right-click\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <add-node-vue :display=\"this.addingBox\" :mousePosition=\"this.newBoxPosition\" @closed=\"onAddBoxClosed\"></add-node-vue>\n</div>\n</template>\n\n<script>\nimport _ from 'lodash-es';\nimport swal from 'sweetalert2';\n\nimport graphVue from './graph.vue';\nimport addNodeVue from './addNode.vue';\nimport editMainSettingsVue from './editMainSettings.vue';\nimport editNodeSettingsVue from './editNodeSettings.vue';\nimport debugNodeInfosVue from './debugNodeInfos.vue';\n\n// CodeMirror\nimport CodeMirror from 'codemirror/lib/codemirror.js';\nimport 'codemirror/mode/xml/xml.js';\nimport 'codemirror/mode/css/css.js';\nimport 'codemirror/mode/javascript/javascript.js';\nimport 'codemirror/mode/htmlmixed/htmlmixed.js';\n\nimport htmltool from '@dualbox/dualbox-lib-htmltool';\n\nexport default {\n    props: [\n        'app', // the app\n\n        // Display configuration (online or offline ?)\n        'showLoadButton',\n        'showSaveButton',\n        'saveButtonFunction',\n\n        // modes\n        'eventVisibility' // are events visible\n    ],\n    components: {\n        'graph-vue': graphVue,\n        'add-node-vue': addNodeVue,\n        'edit-main-settings': editMainSettingsVue,\n        'edit-node-settings': editNodeSettingsVue,\n        'debug-node-infos': debugNodeInfosVue,\n    },\n    data() {\n        return {\n            // modes\n            addingBox: false,\n            leftPanelMode: 'main', // 'main' to display main menu, 'node' for a node\n            selectedNodeId: null, // id of the node to display in left menu\n            debugNodeId: null, // on a snapshot, id of the node to display debug infos\n            newBoxPosition: null, // track mouse position relative to the graph when adding a node\n            displayEvents: false,\n\n            // the specific app css\n            appCss: \"\",\n        }\n    },\n    created: function () {\n        this.view = window.dualboxEditor.v;\n        // TODO: restore this when all menus are migrated to Vue.js\n\n        this.cssCode = null;\n        this.htmlCode = null;\n    },\n    updated: function () {\n        //console.log('updating main view with: ' + JSON.stringify(this.app));\n        this.appCss = (this.app && this.app.css) || \"\";\n\n        // Update html and css code editor\n        this.updateCode();\n    },\n    mounted: function () {\n        //this.view.setMainMenu();\n\n        $(this.$el).bind('expandSettings', function (e) {\n            // expand\n            $(this).find('.dualbox-graph-left-section').css('margin-left', '0');\n            $(this).find('.dualbox-graph-main').addClass('left-panel-expanded');\n            $(this).find('.btn-toggle-left-window').data('expanded', true).find('i')\n                .removeClass('fa-angle-double-right')\n                .addClass('fa-angle-double-left')\n                .attr('title', 'shrink window');\n        });\n\n        $(this.$el).bind('shrinkSettings', function (e) {\n            // shrink\n            $(this).find('.dualbox-graph-left-section').css('margin-left', '-465px');\n            $(this).find('.dualbox-graph-main').removeClass('left-panel-expanded');\n            $(this).find('.btn-toggle-left-window').data('expanded', false).find('i')\n                .removeClass('fa-angle-double-left')\n                .addClass('fa-angle-double-right')\n                .attr('title', 'expand window');\n        });\n\n        $(this.$el).bind('expandDebug', function (e) {\n            // expand\n            $(this).find('.dualbox-graph-right-section').css('margin-right', '0');\n            $(this).find('.dualbox-graph-main').addClass('right-panel-expanded');\n            $(this).find('.btn-toggle-right-window').data('expanded', true).find('i')\n                .removeClass('fa-angle-double-left')\n                .addClass('fa-angle-double-right')\n                .attr('title', 'shrink window');\n        });\n\n        $(this.$el).bind('shrinkDebug', function (e) {\n            // shrink\n            $(this).find('.dualbox-graph-right-section').css('margin-right', '-465px');\n            $(this).find('.dualbox-graph-main').removeClass('right-panel-expanded');\n            $(this).find('.btn-toggle-right-window').data('expanded', false).find('i')\n                .removeClass('fa-angle-double-right')\n                .addClass('fa-angle-double-left')\n                .attr('title', 'expand window');\n        });\n\n        // bind tabs\n        var self = this;\n        $(this.$el).find(\"a[data-toggle='tab']\").on(\"shown.bs.tab\", function (e) {\n            var target = $(e.target).attr(\"href\") // activated tab\n            if (target == \"#editor-graph-tab\") {\n                self.view.killApp();\n            } else if (target == \"#editor-interface-tab\") {\n                self.htmlCode.refresh();\n                self.cssCode.refresh();\n                self.view.runApp(self.getOptions());\n            }\n        });\n\n        $(this.$el).find(\"a[data-toggle='tab']\").on('click', function (e) {\n            e.preventDefault()\n            $(this).tab('show');\n        });\n\n        // Update html and css code editor\n        this.updateCode();\n\n        // Resize horizontally\n        $(this.$el).find('.dragbar').mousedown(function (e) {\n            e.preventDefault();\n            $(document).mouseup(function (e) {\n                $(document).unbind('mousemove');\n            });\n            $(document).mousemove(function (e) {\n                $('.code-panel').css('width', e.pageX + \"px\");\n                $('.application-container').css('width', ($(\".db-editor-main\").width() - e.pageX - 5) + \"px\");\n            })\n        });\n\n        // prevent default behavior for ctrl+s / cmd+s\n        $(document).keydown(function (event) {\n            if ((event.ctrlKey || event.metaKey) && event.which == 83) {\n                event.preventDefault();\n                return false;\n            }\n        });\n    },\n    destroyed: function() {\n        console.log('Graph vue destroyed');\n        $('.ContextMenu').remove();\n    },\n    methods: {\n        \"getOptions\": function () {\n            return {\n                profiler: $(this.$el).find('.run-profiler').is(':checked'),\n                logLevel: $(this.$el).find('.run-loglevel').val(),\n                options: {\n                    noVersionCheck: $(this.$el).find('.run-noversioncheck').is(':checked'),\n                    debug: {\n                        removeTryCatch: $(this.$el).find('.run-removetrycatch').is(':checked'),\n                        makeSynchrone: $(this.$el).find('.run-makesynchrone').is(':checked'),\n                        record: $(this.$el).find('.run-record').is(':checked'),\n                        ressourceCaching: $(this.$el).find('.run-ressourcecaching').is(':checked'),\n                    }\n                },\n            }\n        },\n\n        \"updateCode\": function () {\n            // instanciate codemirror for html and css\n            if (!this.htmlCode) {\n                this.htmlCode = CodeMirror.fromTextArea($(this.$el).find(\".code-html\")[0], {\n                    lineNumbers: true,\n                    mode: \"htmlmixed\",\n                    lineWrapping: true,\n                    extraKeys: {\n                        \"Ctrl-S\": () => {\n                            this.saveInterfaceElement();\n                            this.runApp();\n                        },\n                        \"Cmd-S\": () => {\n                            this.saveInterfaceElement();\n                            this.runApp();\n                        }\n                    }\n                });\n            }\n            if (!this.cssCode) {\n                this.cssCode = CodeMirror.fromTextArea($(this.$el).find(\".code-css\")[0], {\n                    lineNumbers: true,\n                    mode: \"css\",\n                    lineWrapping: true,\n                    extraKeys: {\n                        \"Ctrl-S\": () => {\n                            // save css code into app\n                            this.view.m.data.root.css = this.cssCode.getValue();\n                            this.runApp();\n                        },\n                        \"Cmd-S\": () => {\n                            // save css code into app\n                            this.view.m.data.root.css = this.cssCode.getValue();\n                            this.runApp();\n                        }\n                    }\n                });\n            }\n            this.cssCode.setValue(this.view.m.get().css || \"\");\n        },\n\n        \"loadApp\": function () {\n            var self = this;\n\n            // create a fake input and click it to select a file\n            var input = $('<input/>', {\n                \"type\": \"file\",\n                \"class\": \"upload\",\n                \"accept\": \".json\"\n            });\n            input.change(function (e) {\n                // if we're not here, go to 1st tab\n                $(\"a[data-toggle='tab'][href='#editor-graph-tab']\").click();\n\n                // parse the file JSON and load it\n                var files = e.target.files; // FileList object\n                var r = new FileReader();\n                r.onload = function (e) {\n                    var contents = e.target.result;\n                    var json = JSON.parse(contents);\n                    self.view.e.setApp(json);\n                };\n\n                r.readAsText(files[0]);\n            });\n            input.click();\n        },\n        \"saveApp\": function () {\n            // bind the app load\n            if (this.saveButtonFunction) {\n                var saveButtonFunction = (e) => {\n                    var json = this.view.m.getCleanJson();\n                    return this.saveButtonFunction(json);\n                }\n            } else {\n                var saveButtonFunction = (e) => {\n                    var app = this.view.m.getCleanJson();\n                    var text = JSON.stringify(app, null, 2);\n                    var blob = new Blob([text], {\n                        \"type\": \"application/octet-stream\"\n                    });\n\n                    var a = document.createElement('a');\n                    a.href = window.URL.createObjectURL(blob);\n                    a.download = \"app.json\";\n\n                    // simulate a click on the link\n                    if (document.createEvent) {\n                        var event = document.createEvent(\"MouseEvents\");\n                        event.initEvent(\"click\", true, true);\n                        a.dispatchEvent(event);\n                    } else {\n                        a.click();\n                    }\n                }\n            }\n            saveButtonFunction();\n        },\n        \"getCurrentMousePosition\": function (e) {\n            return this.$refs.graph.getCurrentMousePosition(e);\n        },\n        \"addBox\": function (e) {\n            this.addingBox = true;\n            this.newBoxPosition = this.getCurrentMousePosition(e);\n            this.$forceUpdate();\n        },\n        \"onAddBoxClosed\": function () {\n            this.addingBox = false;\n            this.$forceUpdate();\n        },\n        \"addMetabox\": function (e) {\n            var self = this;\n            e.preventDefault();\n            e.stopPropagation();\n\n            swal({\n                input: 'text',\n                title: 'Choose a name for the metabox',\n            }).then(function (result) {\n                if (result.value) {\n                    self.view.c.addNewMetabox(result.value);\n                }\n            });\n        },\n        \"addInput\": function (e) {\n            this.view.c.createInput();\n        },\n        \"addOutput\": function (e) {\n            this.view.c.createOutput();\n        },\n        \"importMetabox\": async function (e) {\n            var self = this;\n\n            const {\n                value: file\n            } = await swal({\n                title: 'Select your metabox file',\n                input: 'file',\n                inputAttributes: {\n                    'accept': 'application/json',\n                    'aria-label': 'Select your metabox file'\n                }\n            })\n\n            if (file) {\n                const reader = new FileReader()\n                reader.onload = (e) => {\n                    var json = JSON.parse(e.target.result);\n\n                    self.view.e.loadPackages(json).then(async () => {\n                        const {\n                            value: name\n                        } = await swal({\n                            title: 'Choose a name for your metabox',\n                            input: 'text',\n                            showCancelButton: true,\n                            inputValidator: (value) => {\n                                return !value && 'You need to write something!'\n                            }\n                        });\n\n                        self.view.c.addNewMetabox(name, json);\n                    }).catch((err) => {\n                        console.error(err);\n                    });\n                }\n                reader.readAsText(file)\n            }\n        },\n\n        getInterfacesNames: function () {\n            return _.keys(_.get(this.view.m, [\"data\", \"root\", \"interface\"]) || {});\n        },\n\n        \"selectInterface\": function (e) {\n            // Load the interface HTML when selected\n            var uiName = $(e.target).val();\n            if (uiName !== \"\" && uiName !== \"Load UI...\") {\n                var itf = this.view.m.data.root.interface;\n                var htmlString = htmltool.json2html(itf[uiName]);\n                var prettyString = htmltool.htmlPrettyPrint(htmlString);\n                this.htmlCode.setValue(prettyString);\n            } else {\n                this.htmlCode.setValue(\"\");\n            }\n        },\n        \"saveInterfaceElement\": function (e) {\n            var currentInterface = $(this.$el).find('.app-interface-select').val();\n            if (currentInterface !== \"\") {\n                var currentHTML = this.htmlCode.getValue();\n\n                // save html code into app\n                this.view.m.data.root.interface[currentInterface] = htmltool.html2json(currentHTML);\n            }\n\n            // save css code into app\n            this.view.m.data.root.css = this.cssCode.getValue();\n        },\n        \"addInterface\": function (e) {\n            var self = this;\n\n            swal.mixin({\n                confirmButtonText: 'Next &rarr;',\n                showCancelButton: true,\n                progressSteps: ['1', '2', '3']\n            }).queue([{\n                    input: 'text',\n                    title: 'Choose a name',\n                    text: 'Enter a name for the new interface'\n                },\n                {\n                    input: 'select',\n                    title: 'Choose the type',\n                    text: 'Is it a viewer panel or a control panel?',\n                    inputOptions: {\n                        'control': 'A control panel',\n                        'viewer': 'A viewer',\n                    },\n                },\n                {\n                    input: 'select',\n                    title: 'Choose the position',\n                    text: 'Where do you want to position your panel?',\n                    inputOptions: {\n                        'top-left': 'At the top-left',\n                        'top-center': 'At the top-center',\n                        'top-right': 'At the top-right',\n                        'center-left': 'At the center-left',\n                        'center': 'At the center',\n                        'center-right': 'At the center-right',\n                        'bottom-left': 'At the bottom-left',\n                        'bottom-center': 'At the bottom-center',\n                        'bottom-right': 'At the bottom-right',\n                        'whole-screen': 'I want my panel in full-screen',\n                    },\n                }\n            ]).then((result) => {\n                if (result.value) {\n                    var name = result.value[0];\n                    var type = result.value[1];\n                    var position = result.value[2];\n\n                    if (name === \"\") {\n                        swal.showInputError(\"the name is empty!\");\n                        return false\n                    }\n\n                    var appInterface = self.view.m.data.root.interface;\n                    if (appInterface[name]) {\n                        swal.showInputError(\"Interface \" + name + \" already exists!\");\n                        return false\n                    } else {\n                        var style = {};\n                        switch (position) {\n                            case 'top-left':\n                                style = {\n                                    'position': 'absolute',\n                                    'top': 0,\n                                    'left': 0,\n                                    'margin': '15px'\n                                };\n                                break;\n                            case 'top-center':\n                                style = {\n                                    'position': 'absolute',\n                                    'top': 0,\n                                    'margin': '15px auto'\n                                };\n                                break;\n                            case 'top-right':\n                                style = {\n                                    'position': 'absolute',\n                                    'top': 0,\n                                    'right': 0,\n                                    'margin': '15px'\n                                };\n                                break;\n                            case 'center-left':\n                                style = {\n                                    'position': 'absolute',\n                                    'top': 0,\n                                    'bottom': 0,\n                                    'left': 0,\n                                    'margin': 'auto 15px'\n                                };\n                                break;\n                            case 'center':\n                                style = {\n                                    'position': 'absolute',\n                                    'top': 0,\n                                    'bottom': 0,\n                                    'left': 0,\n                                    'right': 0,\n                                    'margin': 'auto'\n                                };\n                                break;\n                            case 'center-right':\n                                style = {\n                                    'position': 'absolute',\n                                    'top': 0,\n                                    'bottom': 0,\n                                    'right': 0,\n                                    'margin': 'auto 15px'\n                                };\n                                break;\n                            case 'bottom-left':\n                                style = {\n                                    'position': 'absolute',\n                                    'bottom': 0,\n                                    'left': 0,\n                                    'margin': '15px'\n                                };\n                                break;\n                            case 'bottom-center':\n                                style = {\n                                    'position': 'absolute',\n                                    'bottom': 0,\n                                    'left': 0,\n                                    'right': 0,\n                                    'margin': '15px auto'\n                                };\n                                break;\n                            case 'bottom-right':\n                                style = {\n                                    'position': 'absolute',\n                                    'bottom': 0,\n                                    'right': 0,\n                                    'margin': '15px'\n                                };\n                                break;\n                            case 'whole-screen':\n                                style = {\n                                    'position': 'absolute',\n                                    'top': 0,\n                                    'left': 0\n                                };\n                                break;\n                        }\n\n                        // some prefilled data\n                        style['width'] = \"300px\";\n                        style['padding'] = \"15px\";\n                        style['border'] = \"1px solid #ccc\";\n                        style['border-radius'] = \"4px\";\n                        style['background'] = \"white\";\n                        if (position.startsWith(\"center\")) {\n                            style['height'] = \"60px\"; // must define height\n                        } else {\n                            style['height'] = \"auto\";\n                        }\n\n                        // add a basic control\n                        appInterface[name] = {\n                            type: \"Element\",\n                            tagName: \"div\",\n                            attributes: {\n                                className: [\n                                    \"dualbox\",\n                                    \"dualbox-container\",\n                                    \"dualbox-container-\" + name,\n                                    type == \"viewer\" ? \"dualbox-viewer\" : \"dualbox-controls\"\n                                ],\n                                style: style,\n                            },\n                            children: []\n                        }\n\n                        // add the value to our select, and load it\n                        $(self.$el).find(\".app-interface-select\").append(\n                            $(\"<option/>\", {\n                                \"value\": name\n                            }).append(name)\n                        );\n                        $(document).ready(() => {\n                            $(self.$el).find('.app-interface-select').val(name).change();\n\n                            // set it into the editor\n                            var htmlString = htmltool.json2html(appInterface[name]);\n                            var prettyString = htmltool.htmlPrettyPrint(htmlString);\n                            this.htmlCode.setValue(prettyString);\n                            self.updateCode();\n                        });\n\n                        self.view.runApp(self.getOptions());\n                    }\n                }\n            })\n        },\n        \"removeInterface\": function (e) {\n            var self = this;\n            var name = $('.app-interface-select').val();\n\n            swal({\n                title: \"Confirm deleting \" + name + \" ?\",\n                type: \"warning\",\n                showCancelButton: true,\n                confirmButtonColor: \"#DD6B55\",\n                confirmButtonText: \"Yes, delete it!\",\n                closeOnConfirm: true,\n                closeOnCancel: true\n            }).then((result) => {\n                if (result.value) {\n                    // set the interface back to first value\n                    $(this.$el).find(\".app-interface-select option[value='\" + name + \"']\").remove();\n                    $(this.$el).find(\".app-interface-select\").change();\n                    delete self.view.m.data.root.interface[name];\n                    self.htmlCode.setValue(\"\");\n                    self.view.runApp(self.getOptions());\n                }\n            });\n        },\n        \"editPanelDescription\": function (e) {\n            var self = this;\n            var name = $('.app-interface-select').val();\n\n            swal({\n                title: \"Enter a description for this panel!\",\n                input: \"textarea\",\n                inputValue: this.view.m.data.root.interface[name].description || \"\",\n                showCancelButton: true,\n                closeOnConfirm: false,\n                showLoaderOnConfirm: true,\n                animation: \"slide-from-top\",\n                inputPlaceholder: \"Write something\"\n            }).then((result) => {\n                if (result.value === \"\") {\n                    swal.showInputError(\"You need to write something!\");\n                    return false\n                } else {\n                    self.view.m.data.root.interface[name].description = result.value;\n                }\n            });\n        },\n        \"toggleLeftWindow\": function (e) {\n            var expanded = $(e.target).closest('button').data('expanded');\n            if (expanded) {\n                $(this.$el).trigger('shrinkSettings');\n            } else {\n                $(this.$el).trigger('expandSettings');\n            }\n        },\n        \"toggleRightWindow\": function (e) {\n            var expanded = $(e.target).closest('button').data('expanded');\n            if (expanded) {\n                $(this.$el).trigger('shrinkDebug');\n            } else {\n                $(this.$el).trigger('expandDebug');\n            }\n        },\n\n        \"showEvents\": function (e) {\n            //this.view.setEventsVisibility( $(e.target).is(':checked') );\n            this.displayEvents = $(e.target).is(':checked');\n        },\n\n        \"runApp\": function (e) {\n            this.view.runApp(this.getOptions());\n        },\n\n        \"takeAndLoadSnapshot\": function (e) {\n            this.view.takeAndLoadSnapshot();\n        },\n\n        \"undo\": function (e) {\n            this.view.c.undo();\n        },\n\n        \"redo\": function (e) {\n            this.view.c.redo();\n        },\n\n        \"removeSelection\": function (e) {\n            this.view.c.deleteSelection();\n        },\n\n        \"mergeSelection\": function (e) {\n            this.view.c.mergeSelection();\n        },\n\n        \"setMainMenu\": async function (e) {\n            await this.view.setMainMenu();\n        },\n\n        \"getCurrentApplication\": function (e) {\n            // trick to make this function reactive to \"app\" field update\n            if (this.app) {\n                return this.view.m.getCurrentApp(true);\n            } else {\n                throw \"Error: no app found\";\n            }\n        },\n\n        \"onEdited\": function (e) {\n            console.log('Something was edited, forcing new render');\n            this.$forceUpdate();\n        },\n\n        \"ready\": function () {\n            return new Promise(resolve => {\n                this.$nextTick(() => {\n                    window.requestAnimationFrame(() => {\n                        $(this.$el).ready(resolve);\n                    })\n                })\n            })\n        }\n    }\n}\n</script>\n"]}, media: undefined });
 
   };
   /* scoped */
@@ -88205,24 +88261,28 @@ __vue_render__$d._withStripped = true;
   const __vue_is_functional_template__$d = false;
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var mainVue = normalizeComponent_1(
+  const __vue_component__$d = normalizeComponent_1(
     { render: __vue_render__$d, staticRenderFns: __vue_staticRenderFns__$d },
     __vue_inject_styles__$d,
     __vue_script__$d,
     __vue_scope_id__$d,
     __vue_is_functional_template__$d,
     __vue_module_identifier__$d,
+    false,
     browser,
+    undefined,
     undefined
   );
 
 var templates = {
-    "mainVue" : mainVue,
-    "editMainSettingsVue" : editMainSettingsVue,
-    "editNodeSettingsVue" : editNodeSettingsVue,
-    "debugNodeInfosVue" : debugNodeInfosVue
+    "mainVue" : __vue_component__$d,
+    "editMainSettingsVue" : __vue_component__$a,
+    "editNodeSettingsVue" : __vue_component__$b,
+    "debugNodeInfosVue" : __vue_component__$c
 };
 
 /**
@@ -88411,7 +88471,7 @@ class GraphView {
             // add main template
             this.div.append($('<div/>', { 'id': 'mainvue' })); // add a target
             this.div.ready(() => {
-                var MainVue = Vue.extend(mainVue); // create a class from our .vue template
+                var MainVue = Vue.extend(__vue_component__$d); // create a class from our .vue template
                 this.mainVue = new MainVue({
                     el: "#mainvue",
                     propsData: {
@@ -88562,11 +88622,10 @@ class GraphView {
     }
 
     async openDebug(id) {
-        var expandDebug = () => {
-            this.div.find('.dualbox-editor-body').trigger('expandDebug');
-        };
+        await this.setDebugMenu(id);
 
-        return await this.setDebugMenu(id, expandDebug);
+        // TODO: do this the vue.js way
+        this.div.find('.dualbox-editor-body').trigger('expandDebug');
     }
 
     // TODO: use proper vue.js reactivity here