@dualbox/editor 1.0.19 → 1.0.21

package/js/src/v/GraphView.js

@@ -112,7 +112,11 @@ class GraphView {
             }
 
             // add main template
-            this.templateMgr.appendTemplate(this.div, "main", {showLoadSaveButtons: this.attrs.showLoadSaveButtons}, () => {
+            this.templateMgr.appendTemplate(this.div, "main", {
+                showLoadButton: this.attrs.showLoadButton,
+                showSaveButton: this.attrs.showSaveButton,
+                saveButtonFunction: this.attrs.saveButtonFunction
+            }, () => {
                 // for convenience, define thoses once the main div is ready
                 this.div.ready(() => {
                     this.graphContainer = this.div.find('.dualbox-graph-container');

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

@@ -352,3 +352,129 @@
 .dualbox-graph-container span {
     pointer-events: none;
 }
+
+/* ex-plumb.css */
+.dualbox-graph-canvas .marker-color-tag {
+    height: 8px;
+    margin: 0 3px 3px 0;
+    padding: 0;
+    width: 42px;
+    line-height: 75pt;
+    border-radius: 3px;
+    display: block;
+    width: 100%;
+}
+
+.input-color-tag {
+    background-color: #F2D600;
+}
+
+.output-color-tag {
+    background-color: #FFAB4A;
+}
+
+.ui-color-tag {
+    background-color: #61BD4F;
+}
+
+.metanode-color-tag {
+    background-color: #DDDDDD;
+}
+
+.input {
+}
+
+.output {
+}
+
+.dualbox-graph-canvas .jsplumb-connector {
+    z-index: 4;
+}
+
+.dualbox-graph-canvas .jsplumb-endpoint {
+    z-index: 30;
+}
+.dualbox-graph-canvas .inoutEndpointLabel, .endpointSourceLabel {
+    box-shadow: 1px 1px 1px #716f6f;
+    -o-box-shadow: 1px 1px 1px #716f6f;
+    -webkit-box-shadow: 0px 1px 1px #716f6f;
+    -moz-box-shadow: 1px 1px 1px #716f6f;
+    z-index: 2000;
+    transform:translate(0%,0%) !important; /* this shit is just to prevent jsplumb of centering the box on the endpoint... */
+}
+.dualbox-graph-canvas .descSpan {
+    box-shadow: 1px 1px 1px #716f6f;
+    -o-box-shadow: 1px 1px 1px #716f6f;
+    -webkit-box-shadow: 0px 1px 1px #716f6f;
+    -moz-box-shadow: 1px 1px 1px #716f6f;
+    position: fixed;
+    display:none;
+    z-index:2010;
+}
+
+.dualbox-graph-canvas .aLabel {
+    background-color: white;
+    padding: 0.4em;
+    font: 12px sans-serif;
+    color: #444;
+    z-index: 21;
+    border: 1px dotted gray;
+    opacity: 0.8;
+    cursor: pointer;
+}
+
+.dualbox-graph-canvas .aLabel.jsplumb-hover {
+    background-color: #5C96BC;
+    color: white;
+    border: 1px solid white;
+}
+
+.card.jsplumb-connected {
+    /*border: 1px solid #a1a1a1; change border when connected to spot isolated elements as disabled*/
+}
+
+.jsplumb-drag {
+    opacity:0.7 !important;
+}
+
+path, .jsplumb-endpoint {
+    cursor: pointer;
+}
+
+.jsplumb-overlay {
+    background-color:transparent;
+}
+
+.fileUpload {
+    position: relative;
+    overflow: hidden;
+    margin: 10px;
+}
+.fileUpload input.upload {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    padding: 0;
+    font-size: 20px;
+    cursor: pointer;
+    opacity: 0;
+    filter: alpha(opacity=0);
+}
+
+
+.module-edit-modal-body .btn+.btn {
+    margin-bottom: 0;
+    margin-left: 5px;
+}
+
+.btn-add-node {
+    width:46%;
+    margin:1%;
+}
+
+button.close {
+    position: absolute;
+    right: 0;
+    margin-right: 5px!important;
+}

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

@@ -10,12 +10,14 @@
             </li>
         </ul>
 
-        @if (attrs.showLoadSaveButtons) {
-            <div class="nav navbar-right" style="vertical-align: top; margin-top: 5px; margin-right: 10px; margin-bottom: 5px;">
-                <button class="load-app btn btn-sm btn-light" style="position: relative; bottom: 3px;">Load App</button>
-                <button class="save-app btn btn-sm btn-light" style="position: relative; bottom: 3px;">Save App</button>
-            </div>
-        }
+        <div class="nav navbar-right" style="vertical-align: top; margin-top: 5px; margin-right: 10px; margin-bottom: 5px;">
+            @if (attrs.showLoadButton) {
+            <button class="load-app btn btn-sm btn-light" style="position: relative; bottom: 3px;">Load App</button>
+            }
+            @if (attrs.showSaveButton) {
+            <button class="save-app btn btn-sm btn-light" style="position: relative; bottom: 3px;">Save App</button>
+            }
+        </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%;">

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

@@ -1,7 +1,7 @@
 const swal = require('sweetalert2');
 var CodeMirror = require('../../libs/CodeMirror.js');
 
-var TemplateBinds = function(view, div) {
+var TemplateBinds = function(view, div, data) {
     // instanciate main settings first
     view.setMainMenu();
 
@@ -32,7 +32,6 @@ var TemplateBinds = function(view, div) {
         })
     });
 
-    // bind the app load
     div.find('.load-app').click(function(e) {
         // create a fake input and click it to select a file
         var input = $('<input/>', { "type": "file", "class": "upload", "accept" : ".json" });
@@ -55,24 +54,33 @@ var TemplateBinds = function(view, div) {
     });
 
     // bind the app load
-    div.find('.save-app').click(function(e) {
-        var app = view.m.getCleanJson();
-        var text = JSON.stringify(app, null, 2);
-        var blob = new Blob([text], { "type" : "application/octet-stream" });
-
-        var a = document.createElement('a');
-        a.href = window.URL.createObjectURL(blob);
-        a.download = "app.json";
-
-        // simulate a click on the link
-        if (document.createEvent) {
-            var event = document.createEvent("MouseEvents");
-            event.initEvent("click", true, true);
-            a.dispatchEvent(event);
-        } else {
-            a.click();
+    if( data.saveButtonFunction ) {
+        var saveButtonFunction = function(e) {
+            var json = view.m.getCleanJson();
+            return data.saveButtonFunction(json);
         }
-    });
+    }
+    else {
+        var saveButtonFunction = function(e) {
+            var app = view.m.getCleanJson();
+            var text = JSON.stringify(app, null, 2);
+            var blob = new Blob([text], { "type" : "application/octet-stream" });
+
+            var a = document.createElement('a');
+            a.href = window.URL.createObjectURL(blob);
+            a.download = "app.json";
+
+            // simulate a click on the link
+            if (document.createEvent) {
+                var event = document.createEvent("MouseEvents");
+                event.initEvent("click", true, true);
+                a.dispatchEvent(event);
+            } else {
+                a.click();
+            }
+        }
+    }
+    div.find('.save-app').click(saveButtonFunction);
 
     div.find('.add-box').click(function(e) {
         $('#add-node-modal').modal();

package/package.json

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