@dualbox/editor 1.0.25 → 1.0.26

package/js/dist/GraphEditor.min.js

@@ -25,7 +25,7 @@ var lodash = createCommonjsModule(function (module, exports) {
   var undefined$1;
 
   /** Used as the semantic version number. */
-  var VERSION = '4.17.11';
+  var VERSION = '4.17.15';
 
   /** Used as the size to enable large array optimizations. */
   var LARGE_ARRAY_SIZE = 200;
@@ -2684,16 +2684,10 @@ var lodash = createCommonjsModule(function (module, exports) {
         value.forEach(function(subValue) {
           result.add(baseClone(subValue, bitmask, customizer, subValue, value, stack));
         });
-
-        return result;
-      }
-
-      if (isMap(value)) {
+      } else if (isMap(value)) {
         value.forEach(function(subValue, key) {
           result.set(key, baseClone(subValue, bitmask, customizer, key, value, stack));
         });
-
-        return result;
       }
 
       var keysFunc = isFull
@@ -3617,8 +3611,8 @@ var lodash = createCommonjsModule(function (module, exports) {
         return;
       }
       baseFor(source, function(srcValue, key) {
+        stack || (stack = new Stack);
         if (isObject(srcValue)) {
-          stack || (stack = new Stack);
           baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
         }
         else {
@@ -5435,7 +5429,7 @@ var lodash = createCommonjsModule(function (module, exports) {
       return function(number, precision) {
         number = toNumber(number);
         precision = precision == null ? 0 : nativeMin(toInteger(precision), 292);
-        if (precision) {
+        if (precision && nativeIsFinite(number)) {
           // Shift with exponential notation to avoid floating-point issues.
           // See [MDN](https://mdn.io/round#Examples) for more details.
           var pair = (toString(number) + 'e').split('e'),
@@ -6618,7 +6612,7 @@ var lodash = createCommonjsModule(function (module, exports) {
     }
 
     /**
-     * Gets the value at `key`, unless `key` is "__proto__".
+     * Gets the value at `key`, unless `key` is "__proto__" or "constructor".
      *
      * @private
      * @param {Object} object The object to query.
@@ -6626,6 +6620,10 @@ var lodash = createCommonjsModule(function (module, exports) {
      * @returns {*} Returns the property value.
      */
     function safeGet(object, key) {
+      if (key === 'constructor' && typeof object[key] === 'function') {
+        return;
+      }
+
       if (key == '__proto__') {
         return;
       }
@@ -10426,6 +10424,7 @@ var lodash = createCommonjsModule(function (module, exports) {
           }
           if (maxing) {
             // Handle invocations in a tight loop.
+            clearTimeout(timerId);
             timerId = setTimeout(timerExpired, wait);
             return invokeFunc(lastCallTime);
           }
@@ -14812,9 +14811,12 @@ var lodash = createCommonjsModule(function (module, exports) {
       , 'g');
 
       // Use a sourceURL for easier debugging.
+      // The sourceURL gets injected into the source that's eval-ed, so be careful
+      // with lookup (in case of e.g. prototype pollution), and strip newlines if any.
+      // A newline wouldn't be a valid sourceURL anyway, and it'd enable code injection.
       var sourceURL = '//# sourceURL=' +
-        ('sourceURL' in options
-          ? options.sourceURL
+        (hasOwnProperty.call(options, 'sourceURL')
+          ? (options.sourceURL + '').replace(/[\r\n]/g, ' ')
           : ('lodash.templateSources[' + (++templateCounter) + ']')
         ) + '\n';
 
@@ -14847,7 +14849,9 @@ var lodash = createCommonjsModule(function (module, exports) {
 
       // If `variable` is not specified wrap a with-statement around the generated
       // code to add the data object to the top of the scope chain.
-      var variable = options.variable;
+      // Like with sourceURL, we take care to not check the option's prototype,
+      // as this configuration is a code injection vector.
+      var variable = hasOwnProperty.call(options, 'variable') && options.variable;
       if (!variable) {
         source = 'with (obj) {\n' + source + '\n}\n';
       }
@@ -17052,10 +17056,11 @@ var lodash = createCommonjsModule(function (module, exports) {
     baseForOwn(LazyWrapper.prototype, function(func, methodName) {
       var lodashFunc = lodash[methodName];
       if (lodashFunc) {
-        var key = (lodashFunc.name + ''),
-            names = realNames[key] || (realNames[key] = []);
-
-        names.push({ 'name': methodName, 'func': lodashFunc });
+        var key = lodashFunc.name + '';
+        if (!hasOwnProperty.call(realNames, key)) {
+          realNames[key] = [];
+        }
+        realNames[key].push({ 'name': methodName, 'func': lodashFunc });
       }
     });
 
@@ -46333,16 +46338,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
   );
 
@@ -47389,7 +47398,7 @@ var script$1 = {
         "app"     // the app model
     ],
     components: {
-        'graph-node' : GraphNodeVue,
+        'graph-node' : __vue_component__,
     },
     data: function () {
         return {
@@ -48343,16 +48352,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
   );
 
@@ -48477,16 +48490,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
   );
 
@@ -48497,7 +48514,7 @@ var script$3 = {
         "result",
     ],
     components: {
-        'graph-node' : GraphNodeVue
+        'graph-node' : __vue_component__
     },
     created: function() {
         this.view = window.dualboxEditor.v;
@@ -48835,16 +48852,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
   );
 
@@ -61783,16 +61804,9 @@ var bootstrapSelect = createCommonjsModule(function (module) {
 });
 
 //
-
-// avoid bootstrap-select to install itself in another jquery =_=
-window.oldjquery = window.jquery;
-window.jquery = window.jQuery;
 if( $.fn.selectpicker ) {
     $.fn.selectpicker.Constructor.BootstrapVersion = '4';
 }
-window.jquery = window.oldjquery;
-delete window.oldjquery;
-
 
 var script$4 = {
     name : "edit-type",
@@ -62023,7 +62037,7 @@ __vue_render__$4._withStripped = true;
   /* style */
   const __vue_inject_styles__$4 = function (inject) {
     if (!inject) return
-    inject("data-v-87e7e906_0", { source: "\n.list-types {\n    max-height: 518px;\n    overflow-y: auto;\n    padding-top: 10px;\n}\n.list-types li {\n    cursor: pointer;\n}\n.list-types li:hover {\n    background-color: rgba(0,0,0,0.1);\n}\nspan.type-display {\n    font-size: 16px;\n    font-weight: bold;\n}\n.choose-type {\n    font-weight: bold;\n    font-size: 18px;\n}\n.bs3 {\n    display: none!important;\n}\n", map: {"version":3,"sources":["/home/seb/dev/dualbox/editor/js/src/v/templates/editType.vue"],"names":[],"mappings":";AACA;IACA,iBAAA;IACA,gBAAA;IACA,iBAAA;AACA;AAEA;IACA,eAAA;AACA;AAEA;IACA,iCAAA;AACA;AAEA;IACA,eAAA;IACA,iBAAA;AACA;AAEA;IACA,iBAAA;IACA,eAAA;AACA;AAEA;IACA,uBAAA;AACA","file":"editType.vue","sourcesContent":["<style>\n    .list-types {\n        max-height: 518px;\n        overflow-y: auto;\n        padding-top: 10px;\n    }\n\n    .list-types li {\n        cursor: pointer;\n    }\n\n    .list-types li:hover {\n        background-color: rgba(0,0,0,0.1);\n    }\n\n    span.type-display {\n        font-size: 16px;\n        font-weight: bold;\n    }\n\n    .choose-type {\n        font-weight: bold;\n        font-size: 18px;\n    }\n\n    .bs3 {\n        display: none!important;\n    }\n</style>\n\n<template>\n    <div style=\"width: 100%;\">\n        <span class=\"d-inline-block\"><span class=\"type-display\">{{typePrefix}}</span></span>\n        <select class=\"selectpicker d-inline-block\">\n            <option disabled value='default' :selected=\"!selectedType || selectedType=='*'\" >Select a type</option>\n            <option v-for=\"typeName in getMatchingTypes()\" :value=\"typeName\" :selected=\"typeName == selectedType\">{{typeName}}</option>\n        </select>\n        <span class=\"d-inline-block type-display\">{{typeSuffix}}</span>\n        <button v-if=\"displayOKButton!==false\" class=\"btn btn-success d-inline-block\" @click=\"emitType\">Ok</button>\n        <button v-if=\"displayResetButton!==false\" class=\"btn btn-outline-secondary d-inline-block\" @click=\"resetChanges\">Reset</button>\n        <small v-if=\"showExtendedTypeMessage\" class=\"form-text text-muted\">\n            You are building a complex type (types with Array or Map). Continue to select the '*' type until all star are resolved.\n        </small>\n    </div>\n</template>\n\n<script>\nimport _ from 'lodash';\n\n// avoid bootstrap-select to install itself in another jquery =_=\nwindow.oldjquery = window.jquery;\nwindow.jquery = window.jQuery;\nimport 'bootstrap-select/dist/css/bootstrap-select.min.css';\nimport 'bootstrap-select';\nif( $.fn.selectpicker ) {\n    $.fn.selectpicker.Constructor.BootstrapVersion = '4';\n}\nwindow.jquery = window.oldjquery;\ndelete window.oldjquery;\n\n\nexport default {\n    name : \"edit-type\",\n    props: [\n        \"type\",  // the dualbox type of the value\n        \"displayOKButton\",\n        \"displayResetButton\"\n    ],\n    data: function () {\n        return {\n            \"types\" : null,\n            \"searchText\" : null,\n            \"selectedType\": null,\n\n            \"typePrefix\" : \"\",\n            \"typeSuffix\" : \"\",\n            \"showExtendedTypeMessage\": false,\n        };\n    },\n    created: async function() {\n        this.view = window.dualboxEditor.v;\n        this.types = await this.getTypes();\n        this.initToTypeValue();\n    },\n    mounted: function() {\n        var self = this;\n        this.initSelectPicker();\n        this.bindSelectPicker();\n    },\n    updated: function() {\n        console.log('updated');\n    },\n    methods: {\n        initToTypeValue() {\n            if( this.type ) {\n                var a = this.type.split('<');\n                var fragment = a[ a.length -1 ];\n                a = fragment.split('>');\n                fragment = a[0];\n                a = fragment.split(',');\n                fragment = a[ a.length - 1 ];\n\n                this.typePrefix = this.type.substr(0, this.type.indexOf(fragment));\n                this.selectedType = fragment;\n                this.typeSuffix = this.type.substr(this.type.indexOf(fragment) + fragment.length, this.type.length -1);\n            }\n        },\n\n        isSelected(typeName) {\n            return typeName == this.selectedType;\n        },\n\n        initSelectPicker: function() {\n            this.selectDiv = $(this.$el).find('select.selectpicker');\n            this.selectDiv.selectpicker({\n                liveSearch: true,\n                liveSearchPlaceholder: \"Search through types\",\n            });\n        },\n\n        removeSelectPicler: function() {\n            this.selectDiv.selectpicker('destroy');\n        },\n\n        refreshSelectPicker: function() {\n            this.selectDiv.selectpicker('refresh');\n        },\n\n        unbindSelectPicker: function() {\n            this.selectDiv.off('changed.bs.select');\n        },\n\n        bindSelectPicker: function() {\n            this.selectDiv.on('changed.bs.select', (event, clickedIndex, isSelected, previousValue) => {\n                var val = this.selectDiv.selectpicker('val');\n                this.selectType( val );\n            });\n        },\n\n        destroySelectPicker: function() {\n            this.selectDiv.off('changed.bs.select');\n            this.selectDiv.selectpicker('destroy');\n        },\n\n        refreshSelectPicker: function() {\n            this.unbindSelectPicker();\n            this.selectDiv.selectpicker('val', 'default');\n            this.bindSelectPicker();\n        },\n\n        getTypes: async function() {\n            var rootTypesPkg = await this.view.e.getRootTypes();\n            var rootTypes = _.map(rootTypesPkg, pkg => _.get(pkg, \"dualbox.type.name\"));\n\n            // Remove array and maps, insert them on top\n            rootTypes = rootTypes.filter(n => n.toLowerCase()!=='array' && n.toLowerCase()!=='map');\n            rootTypes.unshift(\"Array<*>\", \"Map<String, *>\");\n            return rootTypes;\n        },\n\n        getMatchingTypes : function() {\n            if( this.searchText ) {\n                return _.filter(this.types, t => { return t.indexOf(this.searchText) !== -1; });\n            }\n            else {\n                return this.types;\n            }\n        },\n\n        selectType: function(typeName) {\n            // We selected a star-type. Now, continue the selection to resolve the star\n            if( typeName.indexOf('*') !== -1 ) {\n                this.showExtendedTypeMessage = true;\n\n                var prefix, suffix;\n                [prefix, suffix] = typeName.split('*');\n                this.typePrefix = this.typePrefix + prefix;\n                this.typeSuffix = suffix + this.typeSuffix;\n\n                // reset the select\n                this.refreshSelectPicker();\n            }\n            else {\n                this.selectedType = this.typePrefix + typeName + this.typeSuffix;\n            }\n        },\n\n        emitType: function(e) {\n            this.$emit('edited', this.get())\n        },\n\n        get: function() {\n            return this.selectedType ? this.selectedType.replace(/\\s/g, \"\") : undefined;\n        },\n\n        resetChanges: function() {\n            this.typePrefix = \"\";\n            this.typeSuffix = \"\";\n            this.selectedType = null;\n            this.showExtendedTypeMessage = false;\n            this.searchText = \"\";\n            this.refreshSelectPicker();\n        },\n    }\n}\n</script>\n"]}, media: undefined });
+    inject("data-v-6c8b19fa_0", { source: "\n.list-types {\n    max-height: 518px;\n    overflow-y: auto;\n    padding-top: 10px;\n}\n.list-types li {\n    cursor: pointer;\n}\n.list-types li:hover {\n    background-color: rgba(0,0,0,0.1);\n}\nspan.type-display {\n    font-size: 16px;\n    font-weight: bold;\n}\n.choose-type {\n    font-weight: bold;\n    font-size: 18px;\n}\n.bs3 {\n    display: none!important;\n}\n", map: {"version":3,"sources":["/home/seb/dev/dualbox/editor/js/src/v/templates/editType.vue"],"names":[],"mappings":";AACA;IACA,iBAAA;IACA,gBAAA;IACA,iBAAA;AACA;AAEA;IACA,eAAA;AACA;AAEA;IACA,iCAAA;AACA;AAEA;IACA,eAAA;IACA,iBAAA;AACA;AAEA;IACA,iBAAA;IACA,eAAA;AACA;AAEA;IACA,uBAAA;AACA","file":"editType.vue","sourcesContent":["<style>\n    .list-types {\n        max-height: 518px;\n        overflow-y: auto;\n        padding-top: 10px;\n    }\n\n    .list-types li {\n        cursor: pointer;\n    }\n\n    .list-types li:hover {\n        background-color: rgba(0,0,0,0.1);\n    }\n\n    span.type-display {\n        font-size: 16px;\n        font-weight: bold;\n    }\n\n    .choose-type {\n        font-weight: bold;\n        font-size: 18px;\n    }\n\n    .bs3 {\n        display: none!important;\n    }\n</style>\n\n<template>\n    <div style=\"width: 100%;\">\n        <span class=\"d-inline-block\"><span class=\"type-display\">{{typePrefix}}</span></span>\n        <select class=\"selectpicker d-inline-block\">\n            <option disabled value='default' :selected=\"!selectedType || selectedType=='*'\" >Select a type</option>\n            <option v-for=\"typeName in getMatchingTypes()\" :value=\"typeName\" :selected=\"typeName == selectedType\">{{typeName}}</option>\n        </select>\n        <span class=\"d-inline-block type-display\">{{typeSuffix}}</span>\n        <button v-if=\"displayOKButton!==false\" class=\"btn btn-success d-inline-block\" @click=\"emitType\">Ok</button>\n        <button v-if=\"displayResetButton!==false\" class=\"btn btn-outline-secondary d-inline-block\" @click=\"resetChanges\">Reset</button>\n        <small v-if=\"showExtendedTypeMessage\" class=\"form-text text-muted\">\n            You are building a complex type (types with Array or Map). Continue to select the '*' type until all star are resolved.\n        </small>\n    </div>\n</template>\n\n<script>\nimport _ from 'lodash';\n\n// including bootstrap-select doesn't work\n// made a PR for this: see https://github.com/snapappointments/bootstrap-select/issues/2374\nimport 'bootstrap-select/dist/css/bootstrap-select.min.css';\nimport 'bootstrap-select';\nif( $.fn.selectpicker ) {\n    $.fn.selectpicker.Constructor.BootstrapVersion = '4';\n}\n\nexport default {\n    name : \"edit-type\",\n    props: [\n        \"type\",  // the dualbox type of the value\n        \"displayOKButton\",\n        \"displayResetButton\"\n    ],\n    data: function () {\n        return {\n            \"types\" : null,\n            \"searchText\" : null,\n            \"selectedType\": null,\n\n            \"typePrefix\" : \"\",\n            \"typeSuffix\" : \"\",\n            \"showExtendedTypeMessage\": false,\n        };\n    },\n    created: async function() {\n        this.view = window.dualboxEditor.v;\n        this.types = await this.getTypes();\n        this.initToTypeValue();\n    },\n    mounted: function() {\n        var self = this;\n        this.initSelectPicker();\n        this.bindSelectPicker();\n    },\n    updated: function() {\n        console.log('updated');\n    },\n    methods: {\n        initToTypeValue() {\n            if( this.type ) {\n                var a = this.type.split('<');\n                var fragment = a[ a.length -1 ];\n                a = fragment.split('>');\n                fragment = a[0];\n                a = fragment.split(',');\n                fragment = a[ a.length - 1 ];\n\n                this.typePrefix = this.type.substr(0, this.type.indexOf(fragment));\n                this.selectedType = fragment;\n                this.typeSuffix = this.type.substr(this.type.indexOf(fragment) + fragment.length, this.type.length -1);\n            }\n        },\n\n        isSelected(typeName) {\n            return typeName == this.selectedType;\n        },\n\n        initSelectPicker: function() {\n            this.selectDiv = $(this.$el).find('select.selectpicker');\n            this.selectDiv.selectpicker({\n                liveSearch: true,\n                liveSearchPlaceholder: \"Search through types\",\n            });\n        },\n\n        removeSelectPicler: function() {\n            this.selectDiv.selectpicker('destroy');\n        },\n\n        refreshSelectPicker: function() {\n            this.selectDiv.selectpicker('refresh');\n        },\n\n        unbindSelectPicker: function() {\n            this.selectDiv.off('changed.bs.select');\n        },\n\n        bindSelectPicker: function() {\n            this.selectDiv.on('changed.bs.select', (event, clickedIndex, isSelected, previousValue) => {\n                var val = this.selectDiv.selectpicker('val');\n                this.selectType( val );\n            });\n        },\n\n        destroySelectPicker: function() {\n            this.selectDiv.off('changed.bs.select');\n            this.selectDiv.selectpicker('destroy');\n        },\n\n        refreshSelectPicker: function() {\n            this.unbindSelectPicker();\n            this.selectDiv.selectpicker('val', 'default');\n            this.bindSelectPicker();\n        },\n\n        getTypes: async function() {\n            var rootTypesPkg = await this.view.e.getRootTypes();\n            var rootTypes = _.map(rootTypesPkg, pkg => _.get(pkg, \"dualbox.type.name\"));\n\n            // Remove array and maps, insert them on top\n            rootTypes = rootTypes.filter(n => n.toLowerCase()!=='array' && n.toLowerCase()!=='map');\n            rootTypes.unshift(\"Array<*>\", \"Map<String, *>\");\n            return rootTypes;\n        },\n\n        getMatchingTypes : function() {\n            if( this.searchText ) {\n                return _.filter(this.types, t => { return t.indexOf(this.searchText) !== -1; });\n            }\n            else {\n                return this.types;\n            }\n        },\n\n        selectType: function(typeName) {\n            // We selected a star-type. Now, continue the selection to resolve the star\n            if( typeName.indexOf('*') !== -1 ) {\n                this.showExtendedTypeMessage = true;\n\n                var prefix, suffix;\n                [prefix, suffix] = typeName.split('*');\n                this.typePrefix = this.typePrefix + prefix;\n                this.typeSuffix = suffix + this.typeSuffix;\n\n                // reset the select\n                this.refreshSelectPicker();\n            }\n            else {\n                this.selectedType = this.typePrefix + typeName + this.typeSuffix;\n            }\n        },\n\n        emitType: function(e) {\n            this.$emit('edited', this.get())\n        },\n\n        get: function() {\n            return this.selectedType ? this.selectedType.replace(/\\s/g, \"\") : undefined;\n        },\n\n        resetChanges: function() {\n            this.typePrefix = \"\";\n            this.typeSuffix = \"\";\n            this.selectedType = null;\n            this.showExtendedTypeMessage = false;\n            this.searchText = \"\";\n            this.refreshSelectPicker();\n        },\n    }\n}\n</script>\n"]}, media: undefined });
 
   };
   /* scoped */
@@ -62034,16 +62048,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
   );
 
@@ -62055,9 +62073,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 {
@@ -62906,16 +62924,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
   );
 
@@ -63074,15 +63096,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
   );
@@ -63095,8 +63121,8 @@ var script$7 = {
         "readonly",
     ],
     components : {
-        'modal' : ModalVue,
-        'edit-type' : EditTypeVue
+        'modal' : __vue_component__$6,
+        'edit-type' : __vue_component__$4
     },
     data: function () {
         return {
@@ -63238,16 +63264,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
   );
 
@@ -63951,16 +63981,20 @@ __vue_render__$8._withStripped = true;
   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
   );
 
@@ -63974,8 +64008,8 @@ var script$9 = {
         "readonlyReason"
     ],
     components : {
-        'modal' : ModalVue,
-        'edit-value' : EditValueVue,
+        'modal' : __vue_component__$6,
+        'edit-value' : __vue_component__$8,
     },
     data: function () {
         return {
@@ -64188,16 +64222,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
   );
 
@@ -64208,8 +64246,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 {
@@ -65630,16 +65668,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
   );
 
@@ -65650,9 +65692,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 {
@@ -67923,16 +67965,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
   );
 
@@ -72543,7 +72589,7 @@ var script$c = {
         "id"
     ],
     components: {
-        "display-value" : DisplayValueVue,
+        "display-value" : __vue_component__$9,
     },
     data: function () {
         return {
@@ -73600,16 +73646,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
   );
 
@@ -85688,11 +85738,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 {
@@ -85950,7 +86000,7 @@ var script$d = {
         },
 
         getInterfacesNames : function() {
-            return _.keys(this.view.m.data.root.interface);
+            return _.keys( _.get(this.view.m, ["data","root", "interface"]) || {} );
         },
 
         "selectInterface": function(e) {
@@ -86966,7 +87016,7 @@ __vue_render__$d._withStripped = true;
   /* style */
   const __vue_inject_styles__$d = function (inject) {
     if (!inject) return
-    inject("data-v-0a59c206_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, .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, .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; /* Chrome/Safari */\n    -moz-user-select: none; /* Firefox */\n    -ms-user-select: none; /* 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% - 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: 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, .btn-toggle-right-window:hover, .btn-toggle-left-window:focus, .btn-toggle-right-window:focus, .btn-toggle-left-window:active, .btn-toggle-right-window:active, .btn-toggle-left-window:active:hover, .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, .graph-tab.active, .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, .main-navigation .nav-link.active, .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, button:focus {\n    outline: none;\n    box-shadow: none;\n}\n.btn-transparent, .btn-transparent:hover, .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}\n.output {\n}\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, .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;IACA,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,sBAAA;AACA;AAEA;IACA,kBAAA;IACA,SAAA;IACA,WAAA;IACA,aAAA;AACA;AAEA;IACA,0BAAA;AACA;AAEA;IACA,WAAA;IACA,aAAA;IACA,gCAAA;IACA,WAAA;IACA,uBAAA;AACA;AAEA;IACA,yBAAA,EAAA,kBAAA;IACA,sBAAA,EAAA,YAAA;IACA,qBAAA,EAAA,UAAA;IACA,oBAAA;IACA,iBAAA;AACA;AAEA;IACA,gBAAA;AACA;AAEA;IACA,0BAAA;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,mBAAA;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;IACA,wBAAA;IACA,mCAAA;IACA,+BAAA;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,gCAAA;AACA;AAEA;IACA,YAAA;IACA,wBAAA;IACA,YAAA;IACA,gCAAA;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,wBAAA;IACA,iBAAA;IACA,mBAAA;AACA;AAEA;IACA,iBAAA;AACA;AAEA;IACA,8BAAA;IACA,yBAAA;IACA,sBAAA;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;IACA,sBAAA;IACA,gCAAA;AACA;AAEA;IACA,wBAAA;IACA,mCAAA;AACA;AAEA;IACA,mBAAA;IACA,iBAAA;IACA,gBAAA;IACA,kBAAA;IACA,kBAAA;IACA,QAAA;AACA;AAEA;IACA,aAAA;IACA,gBAAA;AACA;AAEA;IACA,6BAAA;AACA;AAEA;IACA,kBAAA;IACA,YAAA;IACA,WAAA;IACA,6BAAA;IACA,WAAA;IACA,YAAA;AACA;AAEA;IACA,qBAAA;IACA,gCAAA;AACA;AAEA;IACA,qBAAA;IACA,wBAAA;IACA,iCAAA;IACA,gBAAA;IACA,yBAAA;IACA,yBAAA;IACA,kBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;AACA;AAEA;AACA;AAGA;IACA,kBAAA;IACA,gBAAA;IACA,YAAA;AACA;AACA;IACA,kBAAA;IACA,MAAA;IACA,QAAA;IACA,SAAA;IACA,UAAA;IACA,eAAA;IACA,eAAA;IACA,UAAA;IACA,wBAAA;AACA;AAGA;IACA,gBAAA;IACA,gBAAA;AACA;AAEA;IACA,SAAA;IACA,SAAA;AACA;AAEA;IACA,kBAAA;IACA,QAAA;IACA,2BAAA;AACA;AAEA;IACA,YAAA;IACA,iBAAA;AACA;AAEA;IACA,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, .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, .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; /* Chrome/Safari */\n        -moz-user-select: none; /* Firefox */\n        -ms-user-select: none; /* 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% - 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: 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, .btn-toggle-right-window:hover, .btn-toggle-left-window:focus, .btn-toggle-right-window:focus, .btn-toggle-left-window:active, .btn-toggle-right-window:active, .btn-toggle-left-window:active:hover, .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, .graph-tab.active, .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, .main-navigation .nav-link.active, .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, button:focus {\n        outline: none;\n        box-shadow: none;\n    }\n\n    .btn-transparent, .btn-transparent:hover, .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\n    .output {\n    }\n\n\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\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\n    button.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, .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=\"#1\" data-toggle=\"tab\">Application Graph</a>\n                </li>\n                <li class=\"nav-item\">\n                    <a class=\"nav-link interface-tab\" href=\"#2\" 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=\"1\" 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\"></graph-vue>\n                    </div>\n                </div>\n            </div>\n            <div class=\"tab-pane\" id=\"2\" 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 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\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 == \"#1\" ) {\n                self.view.killApp();\n            }\n            else if( target == \"#2\" ) {\n                self.htmlCode.refresh();\n                self.cssCode.refresh();\n                self.view.runApp( self.getOptions() );\n            }\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    },\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                });\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                });\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/>', { \"type\": \"file\", \"class\": \"upload\", \"accept\" : \".json\" });\n            input.change( function(e) {\n                // if we're not here, go to 1st tab\n                $(\"a[data-toggle='tab'][href='#1']\").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            }\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], { \"type\" : \"application/octet-stream\" });\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 { value: file } = 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 { value: name } = 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(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            }\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                {\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                    }\n                    else {\n                        var style={};\n                        switch(position) {\n                        case 'top-left':      style={ 'position': 'absolute', 'top': 0, 'left': 0, 'margin': '15px' }; break;\n                        case 'top-center':    style={ 'position': 'absolute', 'top': 0, 'margin': '15px auto' }; break;\n                        case 'top-right':     style={ 'position': 'absolute', 'top': 0, 'right': 0, 'margin': '15px' }; break;\n                        case 'center-left':   style={ 'position': 'absolute', 'top': 0, 'bottom': 0, 'left': 0, 'margin': 'auto 15px' }; break;\n                        case 'center':        style={ 'position': 'absolute', 'top': 0, 'bottom': 0, 'left': 0, 'right': 0, 'margin': 'auto' }; break;\n                        case 'center-right':  style={ 'position': 'absolute', 'top': 0, 'bottom': 0, 'right': 0, 'margin': 'auto 15px' }; break;\n                        case 'bottom-left':   style={ 'position': 'absolute', 'bottom': 0, 'left': 0, 'margin': '15px' }; break;\n                        case 'bottom-center': style={ 'position': 'absolute', 'bottom': 0, 'left': 0, 'right': 0, 'margin': '15px auto' }; break;\n                        case 'bottom-right':  style={ 'position': 'absolute', 'bottom': 0, 'right': 0, 'margin': '15px' }; break;\n                        case 'whole-screen':  style={ 'position': 'absolute', 'top': 0, 'left': 0 }; 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                        }\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/>\", { \"value\" : name }).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                }\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            }\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            }\n            else {\n                $(this.$el).trigger('expandDebug');\n            }\n        },\n\n        \"showEvents\": function(e) {\n            this.view.setEventsVisibility( $(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\": function(e) {\n            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            }\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-73882bf0_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, .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, .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; /* Chrome/Safari */\n    -moz-user-select: none; /* Firefox */\n    -ms-user-select: none; /* 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% - 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: 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, .btn-toggle-right-window:hover, .btn-toggle-left-window:focus, .btn-toggle-right-window:focus, .btn-toggle-left-window:active, .btn-toggle-right-window:active, .btn-toggle-left-window:active:hover, .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, .graph-tab.active, .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, .main-navigation .nav-link.active, .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, button:focus {\n    outline: none;\n    box-shadow: none;\n}\n.btn-transparent, .btn-transparent:hover, .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}\n.output {\n}\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, .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;IACA,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,sBAAA;AACA;AAEA;IACA,kBAAA;IACA,SAAA;IACA,WAAA;IACA,aAAA;AACA;AAEA;IACA,0BAAA;AACA;AAEA;IACA,WAAA;IACA,aAAA;IACA,gCAAA;IACA,WAAA;IACA,uBAAA;AACA;AAEA;IACA,yBAAA,EAAA,kBAAA;IACA,sBAAA,EAAA,YAAA;IACA,qBAAA,EAAA,UAAA;IACA,oBAAA;IACA,iBAAA;AACA;AAEA;IACA,gBAAA;AACA;AAEA;IACA,0BAAA;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,mBAAA;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;IACA,wBAAA;IACA,mCAAA;IACA,+BAAA;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,gCAAA;AACA;AAEA;IACA,YAAA;IACA,wBAAA;IACA,YAAA;IACA,gCAAA;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,wBAAA;IACA,iBAAA;IACA,mBAAA;AACA;AAEA;IACA,iBAAA;AACA;AAEA;IACA,8BAAA;IACA,yBAAA;IACA,sBAAA;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;IACA,sBAAA;IACA,gCAAA;AACA;AAEA;IACA,wBAAA;IACA,mCAAA;AACA;AAEA;IACA,mBAAA;IACA,iBAAA;IACA,gBAAA;IACA,kBAAA;IACA,kBAAA;IACA,QAAA;AACA;AAEA;IACA,aAAA;IACA,gBAAA;AACA;AAEA;IACA,6BAAA;AACA;AAEA;IACA,kBAAA;IACA,YAAA;IACA,WAAA;IACA,6BAAA;IACA,WAAA;IACA,YAAA;AACA;AAEA;IACA,qBAAA;IACA,gCAAA;AACA;AAEA;IACA,qBAAA;IACA,wBAAA;IACA,iCAAA;IACA,gBAAA;IACA,yBAAA;IACA,yBAAA;IACA,kBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;IACA,yBAAA;AACA;AAEA;AACA;AAEA;AACA;AAGA;IACA,kBAAA;IACA,gBAAA;IACA,YAAA;AACA;AACA;IACA,kBAAA;IACA,MAAA;IACA,QAAA;IACA,SAAA;IACA,UAAA;IACA,eAAA;IACA,eAAA;IACA,UAAA;IACA,wBAAA;AACA;AAGA;IACA,gBAAA;IACA,gBAAA;AACA;AAEA;IACA,SAAA;IACA,SAAA;AACA;AAEA;IACA,kBAAA;IACA,QAAA;IACA,2BAAA;AACA;AAEA;IACA,YAAA;IACA,iBAAA;AACA;AAEA;IACA,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, .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, .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; /* Chrome/Safari */\n        -moz-user-select: none; /* Firefox */\n        -ms-user-select: none; /* 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% - 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: 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, .btn-toggle-right-window:hover, .btn-toggle-left-window:focus, .btn-toggle-right-window:focus, .btn-toggle-left-window:active, .btn-toggle-right-window:active, .btn-toggle-left-window:active:hover, .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, .graph-tab.active, .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, .main-navigation .nav-link.active, .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, button:focus {\n        outline: none;\n        box-shadow: none;\n    }\n\n    .btn-transparent, .btn-transparent:hover, .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\n    .output {\n    }\n\n\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\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\n    button.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, .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=\"#1\" data-toggle=\"tab\">Application Graph</a>\n                </li>\n                <li class=\"nav-item\">\n                    <a class=\"nav-link interface-tab\" href=\"#2\" 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=\"1\" 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\"></graph-vue>\n                    </div>\n                </div>\n            </div>\n            <div class=\"tab-pane\" id=\"2\" 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 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\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 == \"#1\" ) {\n                self.view.killApp();\n            }\n            else if( target == \"#2\" ) {\n                self.htmlCode.refresh();\n                self.cssCode.refresh();\n                self.view.runApp( self.getOptions() );\n            }\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    },\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                });\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                });\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/>', { \"type\": \"file\", \"class\": \"upload\", \"accept\" : \".json\" });\n            input.change( function(e) {\n                // if we're not here, go to 1st tab\n                $(\"a[data-toggle='tab'][href='#1']\").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            }\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], { \"type\" : \"application/octet-stream\" });\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 { value: file } = 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 { value: name } = 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            }\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                {\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                    }\n                    else {\n                        var style={};\n                        switch(position) {\n                        case 'top-left':      style={ 'position': 'absolute', 'top': 0, 'left': 0, 'margin': '15px' }; break;\n                        case 'top-center':    style={ 'position': 'absolute', 'top': 0, 'margin': '15px auto' }; break;\n                        case 'top-right':     style={ 'position': 'absolute', 'top': 0, 'right': 0, 'margin': '15px' }; break;\n                        case 'center-left':   style={ 'position': 'absolute', 'top': 0, 'bottom': 0, 'left': 0, 'margin': 'auto 15px' }; break;\n                        case 'center':        style={ 'position': 'absolute', 'top': 0, 'bottom': 0, 'left': 0, 'right': 0, 'margin': 'auto' }; break;\n                        case 'center-right':  style={ 'position': 'absolute', 'top': 0, 'bottom': 0, 'right': 0, 'margin': 'auto 15px' }; break;\n                        case 'bottom-left':   style={ 'position': 'absolute', 'bottom': 0, 'left': 0, 'margin': '15px' }; break;\n                        case 'bottom-center': style={ 'position': 'absolute', 'bottom': 0, 'left': 0, 'right': 0, 'margin': '15px auto' }; break;\n                        case 'bottom-right':  style={ 'position': 'absolute', 'bottom': 0, 'right': 0, 'margin': '15px' }; break;\n                        case 'whole-screen':  style={ 'position': 'absolute', 'top': 0, 'left': 0 }; 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                        }\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/>\", { \"value\" : name }).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                }\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            }\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            }\n            else {\n                $(this.$el).trigger('expandDebug');\n            }\n        },\n\n        \"showEvents\": function(e) {\n            this.view.setEventsVisibility( $(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\": function(e) {\n            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            }\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 */
@@ -86977,24 +87027,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
 };
 
 /**
@@ -87185,7 +87239,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: {