@dualbox/editor 1.0.85 → 1.0.87

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

@@ -514,88 +514,6 @@
                 </div>
             </div>
         </div>
-
-        <div class="modal edit-value-modal" tabindex="-1" role="dialog">
-            <div class="modal-dialog" role="document">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title">Edit value</h5>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                            <span aria-hidden="true">&times;</span>
-                        </button>
-                    </div>
-                    <div class="modal-body">
-                        <div class="set-type">
-                            <div class="form-check">
-                                <input type="radio" class="form-check-input set-value unset-value" id="unset-value" name="set-value" value="unset-value" checked>
-                                <label class="form-check-label" for="unset-value">
-                                    don't set a value
-                                </label>
-                            </div>
-                            <div class="form-check">
-                                <input type="radio" class="form-check-input set-value set-value-null" id="set-value-null" name="set-value" value="set-value-null">
-                                <label class="form-check-label" for="set-value-null">
-                                    set null
-                                </label>
-                            </div>
-                            <div class="form-check">
-                                <input type="radio" class="form-check-input set-value set-value-type" id="set-value-type" name="set-value" value="set-value-type" aria-label="Set a value of type">
-                                <div class="form-inline form-check-label" style="height: 24px;">
-                                    <label for="set-value-type">
-                                        set a value of type:
-                                        <select class="form-control choose-value-type d-inline-block form-control-sm ml-2">
-                                            <option value="string">String</option>
-                                            <option value="number">Number</option>
-                                            <option value="boolean">Boolean</option>
-                                            <option value="object">Object</option>
-                                            <option value="file">File</option>
-                                        </select>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                        <hr class="separator"/>
-                        <div class="has-value" style="display: none;">
-                            <div class="define-value define-boolean" style="display: none;">
-                                <div class="form-inline">
-                                    <label>Value: </label>
-                                    <select class="form-control form-control-sm bool-value d-inline-block ml-2">
-                                        <option value=true>True</option>
-                                        <option value=false>False</option>
-                                    </select>
-                                </div>
-                            </div>
-                            <div class="define-value define-file" style="display: none;">
-                                <div class="form-inline">
-                                    <label>File input</label>
-                                    <input type="file" class="form-control-file form-control-sm file-value">
-                                </div>
-                            </div>
-                            <div class="define-value define-number" style="display: none;">
-                                <div class="form-inline">
-                                    <label>Value: </label>
-                                    <input type="number" class="form-control form-control-sm number-value ml-2"/>
-                                </div>
-                            </div>
-                            <div class="define-value define-string" style="display: none;">
-                                <div class="form-inline">
-                                    <label>Value: </label>
-                                    <input type="text" class="form-control form-control-sm text-value ml-2"/>
-                                </div>
-                            </div>
-                            <div class="define-value define-object" style="display: none;">
-                                <label>Value: </label>
-                                <div class="json-editor" style="height: 400px;"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-primary btn-save">Save changes</button>
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                    </div>
-                </div>
-            </div>
-        </div>
     </div>
 </template>
 
@@ -604,7 +522,6 @@ import _ from 'lodash-es';
 import DisplayTypeVue from './displayType.vue';
 import DisplayValueVue from './displayValue.vue';
 import GraphNodeVue from './graphNode.vue';
-import JSONEditor from '@dualbox/dualbox-lib-jsoneditor';
 import swal from 'sweetalert2';
 
 export default {
@@ -644,10 +561,6 @@ export default {
 
         // allow tooltips
         this.activateTooltip();
-
-        // bind the json editor
-        this.editor = new JSONEditor($(this.$el).find('.json-editor')[0], { modes: ['tree', 'code', 'text' ]});
-        this.editor.set({});
     },
     beforeUpdate: function() {
         //console.log('[Updating] node-settings');
@@ -669,11 +582,6 @@ export default {
     deactivate: function() {
         this.deactivateTooltip();
     },
-    destroyed: function() {
-        if( this.editor ) {
-            this.editor.destroy();
-        }
-    },
     methods: {
         fixCardStyle: function() {
             var card = $(this.$el).find('.module-left-signature .card');

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

@@ -15,6 +15,11 @@
 .dragOver {
     border-bottom: 2px solid blue;
 }
+
+.edit-input-value[type="text"] {
+    font-size: 75px;
+}
+
 </style>
 
 <template>
@@ -22,7 +27,7 @@
         <p style="display: none;">{{cIndex}}</p>
         <template v-if="isBasicDataType()">
             <template v-if="dataType === 'string'">
-                <input class="edit-value-input" type="text" @keyup.enter="setStringValue" @keyup.esc="setStringValue" @blur="setStringValueFromBlur" :value="v" @focus="$event.target.select()" />
+                <textarea rows=3 class="edit-value-input" type="text" @keyup.enter="setStringValue" @keyup.esc="setStringValue" @blur="setStringValueFromBlur" :value="v" @focus="$event.target.select()" />
             </template>
 
             <template v-else-if="dataType === 'boolean'">
@@ -44,8 +49,8 @@
                     <div v-if="isArrayType()" class="row" style="background-color: rgba(0,0,0,.125);">Array Editor</div>
                     <div v-else-if="isMapType()" class="row" style="background-color: rgba(0,0,0,.125);">Map Editor</div>
                     <div class="row" style="1px solid rgba(0,0,0,.125);">
-                        <div class="col list-group-flush" :class="{ 'col-1' : isArrayType(), 'col-2' : isMapType()}" style="padding: 0; background-color: white; overflow-y: auto; border-right: 1px solid rgba(0, 0, 0, 0.125);">
-                            <button v-for="index in deserializedValue.keys()" :draggable="isArrayType()" @dragstart="arrayIndexDragStart(index, $event)" @dragover.prevent @dragenter="arrayIndexDragEnter" @dragleave="arrayIndexDragLeave" @drop="arrayIndexDrop(index, $event)" :key="index" :data-key="index" type="button" class="list-group-item list-group-item-action" :class="{ active: isSelectedIndex(index) }" style="text-align: center;" @click="selectIndex(index)">{{index}}</button>
+                        <div class="col list-group-flush" :class="{ 'col-1' : isArrayType(), 'col-2' : isMapType()}" style="padding: 0; background-color: white; overflow-y: auto; border-right: 1px solid rgba(0, 0, 0, 0.125); max-height: 500px;">
+                            <button v-for="index in deserializedValue.keys()" :draggable="isArrayType()" @dragstart="arrayIndexDragStart(index, $event)" @dragover.prevent @dragenter="arrayIndexDragEnter" @dragleave="arrayIndexDragLeave" @drop="arrayIndexDrop(index, $event)" :key="index" :data-key="index" type="button" class="list-group-item list-group-item-action" :class="{ active: isSelectedIndex(index) }" style="text-align: center; padding: 12px;" @click="selectIndex(index)">{{index}}</button>
                             <button type="button" @click="addItem" class="list-group-item list-group-item-action add-item" style="text-align: center;"><i class="fas fa-plus-circle"></i></button>
                         </div>
                         <div class="col" style="padding: 10px">
@@ -77,6 +82,8 @@ import _ from "lodash-es";
 import swal from "sweetalert2";
 import JSONEditor from "@dualbox/dualbox-lib-jsoneditor";
 
+var JSONEditorMode = "tree";
+
 String.prototype.hashCode = function() {
     var hash = 0,
         i,
@@ -189,8 +196,12 @@ export default {
                     this.editor = new JSONEditor(
                         $(this.$el).find(".field-editor")[0],
                         {
+                            mode: JSONEditorMode,
                             modes: ["tree", "code", "text"],
-                            onChange: this.debouncedJsonEmit
+                            onChange: this.debouncedJsonEmit,
+                            onModeChange: (newMode) => {
+                                JSONEditorMode = newMode;
+                            }
                         }
                     );
                 }

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

@@ -1164,7 +1164,7 @@ export default {
                     }
                 }
             ];
-            if (this.n.isModule() || this.n.isUI()) {
+            if (this.n.isModule() || this.n.isUI() || this.n.isInput() || this.n.isOutput()) {
                 contextOptions.push({
                     name: "Duplicate this box",
                     fn: () => {

package/package.json

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

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

@@ -1,109 +0,0 @@
-<style>
-.add-node-modal .modal-body {
-    height: 70vh;
-}
-
-.h100 {
-    height: 100%!important;
-    min-height: 100%!important;
-}
-
-.table-desc th, .table-desc td {
-    margin-right: 10px;
-}
-
-#add-node-modal .modal-dialog {
-  min-width: calc(100% - 40px)!important;
-  height: calc(100% - 40px);
-  margin: 20px;
-  padding: 0;
-}
-
-#add-node-modal .modal-content {
-  height: auto;
-  min-height: 100%;
-  border-radius: 0;
-}
-</style>
-
-<template>
-    <div class="modal fade add-node-modal" :class="{ 'hide' : !display }" id="add-node-modal" tabindex="-1" role="dialog">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content h100">
-                <div class="modal-header">
-                    <h5 class="modal-title">Add a new Input</h5>
-
-                    <div class="mx-auto">
-                        <input class="form-control mx-auto search-modules" type="text" placeholder="Search modules..." id="search-nodes" style="width: 300px;" @input="searchModules"/>
-                    </div>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    <div class="container-fluid h100">
-                        <div class="row">
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary add-node-btn" v-on:click="addSelectedInput">Add Input</button>
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import _ from 'lodash-es';
-import swal from 'sweetalert2';
-
-export default {
-    props: [
-        "display", // original state (true = show, false=hide) of the modal
-    ],
-    components: {
-
-    },
-    data: function () {
-        return {
-            error: null,
-            results: [],
-            selectedResult : null,
-        }
-    },
-    created: function() {
-        this.view = window.dualboxEditor.v;
-    },
-    updated: function() {
-        console.log('AddNode updated !');
-        this.updateVisibility();
-    },
-    mounted: function() {
-        var self = this;
-        this.updateVisibility(); // to init our modal
-        $(this.$el).on("hide.bs.modal", () => {
-            self.$emit('closed');
-        });
-    },
-    methods: {
-        updateVisibility : function() {
-            if( this.display ) {
-                $(this.$el).modal("show");
-            }
-            else {
-                $(this.$el).modal("hide");
-            }
-        },
-
-        addSelectedInput: function(e) {
-
-        },
-
-
-    }
-}
-
-</script>
-