@dualbox/editor 1.0.69 → 1.0.70

package/js/src/GraphEditor.js

@@ -264,7 +264,8 @@ class DualboxEditor {
 
         this.loadCorePackages().then(() => {
             this.onReady(() => {
-                var p = this.setApp(attrs.json || defaultApp);
+                var hasInputJson = !!attrs.json && !_.isEmpty(attrs.json);
+                var p = this.setApp(hasInputJson ? attrs.json : defaultApp);
                 if (attrs.onLoaded) {
                     p.then(attrs.onLoaded);
                 }

package/js/src/m/GraphModel.js

@@ -1279,6 +1279,10 @@ class GraphNode {
         }
     }
 
+    isInputHideable(inputName) {
+        return this.isInputConnected(inputName) || this.hasDefaultValue(inputName);
+    }
+
     isInputVisible(inputName) {
         if (this.isInput() || this.isOutput()) {
             return true;
@@ -1286,29 +1290,33 @@ class GraphNode {
             if (this.isInputConnected(inputName)) {
                 return true;
             } else {
-                var val = idx(this.def, o => o.graph.in.visible[inputName]);
-                if (val !== undefined) {
-                    return val !== false;
+                if (!this.hasDefaultValue(inputName)) {
+                    return true; // input that is not connected and has no default value must be visible
                 } else {
-                    // check if the app did set a default value for this input
-                    var defaultVal = idx(this.def, o => o.defaultInputs[inputName]);
-                    if (defaultVal !== undefined) {
-                        return false; // make not visible when default value is set by the app
-                    }
+                    var val = idx(this.def, o => o.graph.in.visible[inputName]);
+                    if (val !== undefined) {
+                        return val !== false;
+                    } else {
+                        // check if the app did set a default value for this input
+                        var defaultVal = idx(this.def, o => o.defaultInputs[inputName]);
+                        if (defaultVal !== undefined) {
+                            return false; // make not visible when default value is set by the app
+                        }
 
-                    // else, make the input visible if the package didnt define a default value for it
-                    var pkg = this.getPackage();
-                    var pkgDef = idx(pkg, o => o.dualbox.input[inputName]);
-                    if (pkgDef) {
-                        if (pkgDef.visible === false) {
-                            return false;
-                        } else if (pkgDef.value !== undefined) {
-                            return false;
+                        // else, make the input visible if the package didnt define a default value for it
+                        var pkg = this.getPackage();
+                        var pkgDef = idx(pkg, o => o.dualbox.input[inputName]);
+                        if (pkgDef) {
+                            if (pkgDef.visible === false) {
+                                return false;
+                            } else if (pkgDef.value !== undefined) {
+                                return false;
+                            } else {
+                                return true;
+                            }
                         } else {
                             return true;
                         }
-                    } else {
-                        return true;
                     }
                 }
             }

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

@@ -311,7 +311,10 @@
                                         <button v-if="n.hasInputDesc(key)" type="button" class="btn btn-transparent" data-toggle="tooltip" data-placement="right" v-bind:title="n.getInputDesc(key)" style="padding: 0;"><i class="text-info far fa-question-circle"></i></button>
                                     </td>
                                     <td>
-                                        <input class="input-visibility-toggle" type="checkbox" v-bind:data-id="n.id" v-bind:data-input="key" v-bind:checked="n.isInputVisible(key)" @change="toggleInputVisibility">
+                                        <input v-if="n.isInputHideable(key)" class="input-visibility-toggle" type="checkbox" v-bind:data-id="n.id" v-bind:data-input="key" v-bind:checked="n.isInputVisible(key)" @change="toggleInputVisibility">
+                                        <span v-else class="d-inline-block" tabindex="0" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-original-title="Input is not connected, and has no default value. Cannot hide it yet.">
+                                            <input class="input-visibility-toggle" style="pointer-events: none;" type="checkbox" v-bind:checked="n.isInputVisible(key)" disabled>
+                                        </span>
                                     </td>
                                     <td>
                                         <!-- If there's a start, then we must edit the type -->

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

@@ -100,6 +100,7 @@ export default {
     created: function() {
         this.view = window.dualboxEditor.v;
         this.editor = null;
+        this.edited = false;
         this.initData();
     },
     mounted: function() {
@@ -121,6 +122,19 @@ export default {
             this.updateEditor();
         }
     },
+    beforeDestroy: function() {
+        // make sure the value was set
+        if( !this.emitted ) {
+            if( this.isBasicDataType()) {
+                var elt = $(this.$el).find('.edit-value-input');
+                var val = elt.val();
+                this.$emit("edited", val);
+            }
+            else {
+                this.saveChanges();
+            }
+        }
+    },
     methods: {
         hash: function() {
             var str = new String(this.v).toString();
@@ -232,26 +246,31 @@ export default {
 
             if( this.isTemplateType() ) {
                 this.$emit("edited", this.serialize(this.deserializedValue));
+                this.emitted = true;
             }
             else if( this.isObjectType() ) {
                 // emit the result to the parent Vue
                 this.$emit("edited", this.editor.get());
+                this.emitted = true;
             }
         },
 
         setStringValue: function(e) {
             var val = $(e.target).val();
             this.$emit("edited", val);
+            this.emitted = true;
         },
 
         setBoolValue: function(e) {
             var val = $(e.target).val() == "true";
             this.$emit("edited", val);
+            this.emitted = true;
         },
 
         setNumberValue: function(e) {
             var val = parseFloat($(e.target).val());
             this.$emit("edited", val);
+            this.emitted = true;
         },
 
         setNullValue: function() {

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

@@ -142,10 +142,6 @@ import ContextMenu from '../ContextMenu';
 // jsplumb style definitins
 import PlumbStyle from '../PlumbStyle';
 
-jQuery.fn.mouseIsOver = function () {
-    return $(this).parent().find($(this).selector + ":hover").length > 0;
-};
-
 export default {
     props: [
         "app",     // the app model
@@ -194,11 +190,11 @@ export default {
         // We use this way because it's easier than to set a tabindex on the dualbox-graph-container
         // to capture keyboard events (will break modals)
         var self = this;
-        $(document).keydown(function(e) {
+        this.keyDownHandler = function(e) {
             // Ensure event is not null
             e = e || window.event;
 
-            if( $(self.$el).mouseIsOver() ) {
+            if( $(self.$el).is(":hover") ) {
                 if ((e.which == 90 || e.keyCode == 90) && e.ctrlKey) { // ctrl + z
                     self.view.c.undo();
                 }
@@ -210,10 +206,14 @@ export default {
                     self.view.c.deleteSelection();
                 }
             }
-        });
+        }
 
+        $(document).on("keydown", this.keyDownHandler);
         return await this.initializeListeners();
     },
+    destroyed: function() {
+        $(document).off("keydown", this.keyDownHandler);
+    },
     beforeUpdate: async function() {
         // Reset the JSPlumb instance
         this.resetJsPlumb();
@@ -324,14 +324,8 @@ export default {
         return new Promise((resolve) => this.jsPlumbInstance.ready(resolve));
     },
     methods: {
-        undo : function() {
-
-        },
-        redo : function() {
-
-        },
         deleteSelection() {
-
+            this.view.c.deleteSelection();
         },
 
         getCurrentMousePosition(e) {

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

@@ -430,7 +430,7 @@ span.name {
                         <div class="names">
                             <span class="name" v-for="key in getVisibleOutputs()" v-bind:class="{feedback: n.isFeedbackTarget(key)}" v-bind:data-output="key">
                                 <span v-if="n.hasLoop() && n.hasFeedback(key)">{{key}}</span>
-                                <span v-else-if="n.hasLoop() && !n.hasFeedback(key)" v-html='"&lt;"+key+"&gt;"'></span>
+                                <span v-else-if="n.hasLoop() && !n.hasFeedback(key)">&lt;{{key}}&gt;</span>
                                 <span v-else>{{key}}</span>
 
                                 <span v-if="n.hasCacheActivated()">

package/package.json

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