@dualbox/editor 1.0.30 → 1.0.31

package/js/dist/GraphEditor.min.js

@@ -85820,16 +85820,21 @@ var script$d = {
         var self = this;
         $(this.$el).find("a[data-toggle='tab']").on("shown.bs.tab", function(e) {
             var target = $(e.target).attr("href"); // activated tab
-            if( target == "#1" ) {
+            if( target == "#editor-graph-tab" ) {
                 self.view.killApp();
             }
-            else if( target == "#2" ) {
+            else if( target == "#editor-interface-tab" ) {
                 self.htmlCode.refresh();
                 self.cssCode.refresh();
                 self.view.runApp( self.getOptions() );
             }
         });
 
+        $(this.$el).find("a[data-toggle='tab']").on('click', function (e) {
+            e.preventDefault();
+            $(this).tab('show');
+        });
+
         // Update html and css code editor
         this.updateCode();
 
@@ -86355,7 +86360,7 @@ var __vue_render__$d = function() {
             {
               staticClass: "tab-pane active",
               staticStyle: { width: "100%", height: "100%" },
-              attrs: { id: "1" }
+              attrs: { id: "editor-graph-tab" }
             },
             [
               _c("div", { staticClass: "dualbox-graph-left-section dark" }, [
@@ -86649,7 +86654,7 @@ var __vue_render__$d = function() {
             {
               staticClass: "tab-pane",
               staticStyle: { height: "100%", "background-color": "white" },
-              attrs: { id: "2" }
+              attrs: { id: "editor-interface-tab" }
             },
             [
               _c(
@@ -86933,7 +86938,7 @@ var __vue_staticRenderFns__$d = [
           "a",
           {
             staticClass: "nav-link graph-tab",
-            attrs: { href: "#1", "data-toggle": "tab" }
+            attrs: { href: "#editor-graph-tab", "data-toggle": "tab" }
           },
           [_vm._v("Application Graph")]
         )
@@ -86944,7 +86949,7 @@ var __vue_staticRenderFns__$d = [
           "a",
           {
             staticClass: "nav-link interface-tab",
-            attrs: { href: "#2", "data-toggle": "tab" }
+            attrs: { href: "#editor-interface-tab", "data-toggle": "tab" }
           },
           [_vm._v("Interface Editor")]
         )
@@ -87018,7 +87023,7 @@ __vue_render__$d._withStripped = true;
   /* style */
   const __vue_inject_styles__$d = function (inject) {
     if (!inject) return
-    inject("data-v-30027b44_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 _ from 'lodash';\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 });
+    inject("data-v-402f1ef4_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=\"#editor-graph-tab\" data-toggle=\"tab\">Application Graph</a>\n                </li>\n                <li class=\"nav-item\">\n                    <a class=\"nav-link interface-tab\" href=\"#editor-interface-tab\" data-toggle=\"tab\">Interface Editor</a>\n                </li>\n            </ul>\n\n            <div class=\"nav navbar-right\" style=\"vertical-align: top; margin-top: 5px; margin-right: 10px; margin-bottom: 5px;\">\n                <div v-if=\"showLoadButton === true\">\n                    <button class=\"load-app btn btn-sm btn-light\" style=\"position: relative; bottom: 3px;\" @click=\"loadApp\">Load App</button>\n                </div>\n                <div v-if=\"showSaveButton\">\n                    <button class=\"save-app btn btn-sm btn-light\" style=\"position: relative; bottom: 3px;\" @click=\"saveApp\">Save App</button>\n                </div>\n            </div>\n        </nav>\n        <div class=\"tab-content dualbox-graph-tab\" style=\"width: 100%; height: calc(100% - 46px);\">\n            <div class=\"tab-pane active\" id=\"editor-graph-tab\" style=\"width: 100%; height: 100%;\">\n                <div class=\"dualbox-graph-left-section dark\">\n                    <div class=\"dualbox-graph-left-window\">\n                        <button class=\"btn btn-light btn-toggle-left-window\" @click=\"toggleLeftWindow\" title=\"shrink window\" data-expanded=\"false\"><i class=\"fa fa-angle-double-right\"></i></button>\n                        <div class=\"dualbox-graph-left-panel light\">\n                            <edit-node-settings v-if=\"leftPanelMode == 'node' && selectedNodeId !== null\" :id=\"selectedNodeId\" :key=\"selectedNodeId\"></edit-node-settings>\n                            <edit-main-settings v-else-if=\"leftPanelMode == 'main'\" :app=\"getCurrentApplication()\" @edited=\"onEdited()\"></edit-main-settings>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"dualbox-graph-right-section dark\">\n                    <div class=\"dualbox-graph-right-window\">\n                        <button class=\"btn btn-light btn-toggle-right-window\" @click=\"toggleRightWindow\" title=\"shrink window\" data-expanded=\"false\"><i class=\"fa fa-angle-double-left\"></i></button>\n                        <div class=\"dualbox-graph-right-panel light\">\n                            <debug-node-infos v-if=\"debugNodeId !== null\" :id=\"debugNodeId\"></debug-node-infos>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"container-fluid dualbox-graph-main\" @click=\"setMainMenu\">\n                    <div class=\"row\">\n                        <div class=\"app-topbar dark\">\n                            <div class=\"justify-content-left\">\n                                <div class=\"dropdown\">\n                                    <button class=\"btn btn-primary dropdown-toggle d-none\" type=\"button\" id=\"add-node-dropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" style=\"margin-right: 5px;\">\n                                        Add\n                                    </button>\n                                    <div class=\"dropdown-menu\" aria-labelledby=\"add-node-dropdown\">\n                                        <a class=\"dropdown-item add-box\" @click=\"addBox\" href=\"#\">Add box</a>\n                                        <a class=\"dropdown-item add-metabox\" @click=\"addMetabox\" href=\"#\">Add metabox</a>\n                                        <a class=\"dropdown-item add-input\" @click=\"addInput\" href=\"#\">Add input</a>\n                                        <a class=\"dropdown-item add-output\" @click=\"addOutput\" href=\"#\">Add output</a>\n                                        <a class=\"dropdown-item import-metabox\" @click=\"importMetabox\" href=\"#\">Import metabox</a>\n                                    </div>\n                                    <button class=\"btn btn-light btn-undo\" title=\"undo (ctrl-z)\" @click=\"undo\"><i class=\"fa fa-undo\"></i></button>\n                                    <button class=\"btn btn-light btn-redo\" title=\"redo (ctrl-y)\" @click=\"redo\"><i class=\"fa fa-repeat fa-redo\"></i></button>\n                                    <div class=\"form-check d-inline-block ml-2\">\n                                        <label class=\"form-check-label\">\n                                            <input class=\"form-check-input show-events\" type=\"checkbox\" value=\"false\" @click=\"showEvents\">\n                                            <span class=\"noselect\">Show events</span>\n                                        </label>\n                                    </div>\n                                </div>\n                            </div>\n\n                            <div class=\"justify-content-center mx-auto\">\n                                <ol class=\"dualbox-app-navigation breadcrumb\"></ol>\n                            </div>\n\n                            <div class=\"justify-content-right\">\n                                <div class=\"dropdown selection-menu\" style=\"display: none;\">\n                                    <button class=\"btn btn-primary dropdown-toggle\" type=\"button\" id=\"selection-dropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                        Selection\n                                    </button>\n                                    <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"add-node-dropdown\">\n                                        <a class=\"dropdown-item dualbox-merge-selection\" @click=\"mergeSelection\" href=\"#\">Merge</a>\n                                        <a class=\"dropdown-item dualbox-remove-selection\" @click=\"removeSelection\" href=\"#\" style=\"color: red;\">Delete</a>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\" style=\"height: calc(100% - 58px);\">\n                        <graph-vue :app=\"app\" ref=\"graph\"></graph-vue>\n                    </div>\n                </div>\n            </div>\n            <div class=\"tab-pane\" id=\"editor-interface-tab\" style=\"width 100%; height: 100%; background-color: white;\">\n                <div class=\"db-editor-main\" style=\"width: 100%; height: 100%; overflow: hidden;\">\n                    <div class=\"code-panel\">\n                        <div class=\"button-bar form-inline code-controls\" style=\"position: relative;\">\n                            <button class=\"btn btn-primary btn-save-interface-element\" @click=\"saveInterfaceElement\">Save changes</button>\n                        </div>\n                        <div class=\"code-content\">\n                            <div class=\"code-html-container\">\n                                <div style=\"padding-top: 5px; padding-bottom: 5px; height: 50px; position: relative;\">\n                                    <h3 style=\"position: absolute; top: 0; margin: 5px; font-size: 16px; z-index: 100; display: inline-block; margin-top: 5px;\">HTML</h3>\n                                    <div class=\"d-inline-block ml-auto form-inline mr-2 mt-2\" style=\"position: absolute; top: 0; right: 0;\">\n                                        <button class=\"btn btn-success btn-sm btn-add-interface\" @click=\"addInterface\"><i class=\"fas fa-plus\"></i></button>\n                                        <select class=\"form-control btn-sm app-interface-select\" @change=\"selectInterface\" style=\"width: 150px; height: 32px;\">\n                                            <option>Load UI...</option>\n                                            <option v-for=\"interfaceName in getInterfacesNames()\" :value=\"interfaceName\">{{interfaceName}}</option>\n                                        </select>\n                                        <button class=\"btn btn-sm btn-light btn-edit-panel-description\" @click=\"editPanelDescription\"><i class=\"fas fa-info\" style=\"padding-left: 8px; padding-right: 8px;\"></i></button>\n                                        <button class=\"btn btn-danger btn-sm btn-remove-interface\" @click=\"removeInterface\"><i class=\"fas fa-minus\"></i></button>\n                                    </div>\n                                </div>\n                                <div class=\"code-html-text-container\" style=\"position: relative; height: calc(100% - 50px);\">\n                                    <textarea class=\"code-html\"></textarea>\n                                </div>\n                            </div>\n                            <div class=\"code-css-container\">\n                                <div style=\"height: 30px;\">\n                                    <h3 style=\"position: absolute; top: 0; margin: 5px; font-size: 16px; z-index: 100;\">CSS</h3>\n                                </div>\n                                <div class=\"colde-css-text-container\" style=\"position: relative; height: calc(100% - 30px);\">\n                                    <textarea class=\"code-css\" v-model=\"appCss\"></textarea>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"dragbar\"></div>\n                    <div class=\"application-container\">\n                        <div class=\"button-bar form-inline run-options\" style=\"position: relative;\">\n                            <button class=\"btn btn-success btn-run mr-2\" @click=\"runApp\">Run</button>\n\n                            <select class=\"form-control run-loglevel mr-1 ml-2\">\n                                <option>error</option>\n                                <option>warn</option>\n                                <option>info</option>\n                                <option>log</option>\n                                <option>debug</option>\n                            </select>\n\n                            <input class=\"form-control run-noversioncheck mr-1 ml-3\" type=\"checkbox\" checked>No version checking</input>\n                            <input class=\"form-control run-removetrycatch mr-1 ml-3\" type=\"checkbox\">Remove Try/catch</input>\n                            <input class=\"form-control run-makesynchrone mr-1 ml-3\" type=\"checkbox\">Make Synchrone</input>\n\n                            <div class=\"ml-auto\">\n                                <input class=\"form-control run-profiler mr-1 ml-3\" type=\"checkbox\">Profiler</input>\n                                <input class=\"form-control run-record mr-1 ml-3\" type=\"checkbox\">Record</input>\n                                <button class=\"btn btn-secondary btn-snapshot\" @click=\"takeAndLoadSnapshot\">Snapshot</button>\n                            </div>\n                        </div>\n                        <div class=\"application capture-left-click capture-right-click\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <add-node-vue :display=\"this.addingBox\" :mousePosition=\"this.newBoxPosition\" @closed=\"onAddBoxClosed\"></add-node-vue>\n    </div>\n</template>\n\n<script>\nimport _ from 'lodash';\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 == \"#editor-graph-tab\" ) {\n                self.view.killApp();\n            }\n            else if( target == \"#editor-interface-tab\" ) {\n                self.htmlCode.refresh();\n                self.cssCode.refresh();\n                self.view.runApp( self.getOptions() );\n            }\n        });\n\n        $(this.$el).find(\"a[data-toggle='tab']\").on('click', function (e) {\n            e.preventDefault()\n            $(this).tab('show')\n        });\n\n        // Update html and css code editor\n        this.updateCode();\n\n        // Resize horizontally\n        $(this.$el).find('.dragbar').mousedown(function(e){\n            e.preventDefault();\n            $(document).mouseup(function(e){\n                $(document).unbind('mousemove');\n            });\n            $(document).mousemove(function(e){\n                $('.code-panel').css('width', e.pageX + \"px\");\n                $('.application-container').css('width', ($(\".db-editor-main\").width() - e.pageX - 5) + \"px\");\n            })\n        });\n\n    },\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 */

package/js/src/v/templates/main.vue

@@ -400,10 +400,10 @@
         <nav class="main-navigation navbar navbar-default" style="position: relative; margin-bottom: 0px; padding: 0; padding-top: 5px; background-color: #2e6da4;">
             <ul class="nav nav-tabs">
                 <li class="nav-item active">
-                    <a class="nav-link graph-tab" href="#1" data-toggle="tab">Application Graph</a>
+                    <a class="nav-link graph-tab" href="#editor-graph-tab" data-toggle="tab">Application Graph</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link interface-tab" href="#2" data-toggle="tab">Interface Editor</a>
+                    <a class="nav-link interface-tab" href="#editor-interface-tab" data-toggle="tab">Interface Editor</a>
                 </li>
             </ul>
 
@@ -417,7 +417,7 @@
             </div>
         </nav>
         <div class="tab-content dualbox-graph-tab" style="width: 100%; height: calc(100% - 46px);">
-            <div class="tab-pane active" id="1" style="width: 100%; height: 100%;">
+            <div class="tab-pane active" id="editor-graph-tab" style="width: 100%; height: 100%;">
                 <div class="dualbox-graph-left-section dark">
                     <div class="dualbox-graph-left-window">
                         <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>
@@ -483,7 +483,7 @@
                     </div>
                 </div>
             </div>
-            <div class="tab-pane" id="2" style="width 100%; height: 100%; background-color: white;">
+            <div class="tab-pane" id="editor-interface-tab" style="width 100%; height: 100%; background-color: white;">
                 <div class="db-editor-main" style="width: 100%; height: 100%; overflow: hidden;">
                     <div class="code-panel">
                         <div class="button-bar form-inline code-controls" style="position: relative;">
@@ -661,16 +661,21 @@ export default {
         var self = this;
         $(this.$el).find("a[data-toggle='tab']").on("shown.bs.tab", function(e) {
             var target = $(e.target).attr("href") // activated tab
-            if( target == "#1" ) {
+            if( target == "#editor-graph-tab" ) {
                 self.view.killApp();
             }
-            else if( target == "#2" ) {
+            else if( target == "#editor-interface-tab" ) {
                 self.htmlCode.refresh();
                 self.cssCode.refresh();
                 self.view.runApp( self.getOptions() );
             }
         });
 
+        $(this.$el).find("a[data-toggle='tab']").on('click', function (e) {
+            e.preventDefault()
+            $(this).tab('show')
+        });
+
         // Update html and css code editor
         this.updateCode();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dualbox/editor",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "description": "Editor of Dualbox apps",
   "browser": "js/dist/GraphEditor.js",
   "main": "js/dist/GraphEditor.js",