@dualbox/editor 1.0.39 → 1.0.41

package/js/src/v/Selector.js

@@ -3,15 +3,19 @@ class Selector {
         this.parent = parent;
         this.container = container;
         // translateZ(0) avoid paint glitches in chrome as it forces a repaint every time
-        this.div = $('<div/>', { id: 'selector', hidden: true, style: "border: 1px dotted #000; position: absolute; z-index: 100; transform: translateZ(0);" });
+        this.div = $('<div/>', {
+            id: 'selector',
+            hidden: true,
+            style: "border: 1px dotted #000; position: absolute; z-index: 100; transform: translateZ(0);"
+        });
         this.x1 = 0;
         this.x2 = 0;
         this.y1 = 0;
         this.y2 = 0;
 
         this.startEventHandler = this.onSelectionStart.bind(this);
-        this.moveEventHandler  = this.onSelectionMove.bind(this);
-        this.stopEventHandler  = this.onSelectionStop.bind(this);
+        this.moveEventHandler = this.onSelectionMove.bind(this);
+        this.stopEventHandler = this.onSelectionStop.bind(this);
 
         // offset difference relative to pageX/Y
         // we can't use offsetX and offsetY directly cause their value will be 0
@@ -32,10 +36,20 @@ class Selector {
         this.container.append(this.div);
         this.container.off('mousedown', this.startEventHandler);
         this.container.off('mousemove', this.moveEventHandler);
-        this.container.off('mouseup',   this.stopEventHandler);
+        this.container.off('mouseup', this.stopEventHandler);
         this.container.on('mousedown', this.startEventHandler);
         this.container.on('mousemove', this.moveEventHandler);
-        this.container.on('mouseup',   this.stopEventHandler);
+        this.container.on('mouseup', this.stopEventHandler);
+    }
+
+    each(cb) {
+        _.each(this.selection, selected => {
+            cb(selected);
+        });
+    }
+
+    isMultipleSelectionActive() {
+        return this.selection.length > 1;
     }
 
     getSelection() {
@@ -50,7 +64,7 @@ class Selector {
     isSelected(div) {
         var selected = false;
         _.each(this.selection, (selectedDiv) => {
-            if( $(div).is( $(selectedDiv) ) ) {
+            if ($(div).is($(selectedDiv))) {
                 selected = true;
                 return false; // end of loop
             }
@@ -68,7 +82,7 @@ class Selector {
 
         // find the index
         _.each(this.selection, (selectedDiv, index) => {
-            if( $(div).is( $(selectedDiv) ) ) {
+            if ($(div).is($(selectedDiv))) {
                 i = index;
                 return false; // end of loop
             }
@@ -79,32 +93,31 @@ class Selector {
     }
 
     toggleSelection(div) {
-        if( this.isSelected(div) ) {
+        if (this.isSelected(div)) {
             this.removeFromSelection(div);
-        }
-        else {
+        } else {
             this.addToSelection(div);
         }
         this.handleSelectionMenu();
     }
 
-    onSelect( cb ) {
+    onSelect(cb) {
         this.onSelectCb = cb;
     }
 
-    onSelecting( cb ) {
+    onSelecting(cb) {
         this.onSelectingCb = cb;
     }
 
-    onDeselect( cb ) {
+    onDeselect(cb) {
         this.onDeselectCb = cb;
     }
 
     reCalc() {
-        var x3 = Math.min(this.x1,this.x2);
-        var x4 = Math.max(this.x1,this.x2);
-        var y3 = Math.min(this.y1,this.y2);
-        var y4 = Math.max(this.y1,this.y2);
+        var x3 = Math.min(this.x1, this.x2);
+        var x4 = Math.max(this.x1, this.x2);
+        var y3 = Math.min(this.y1, this.y2);
+        var y4 = Math.max(this.y1, this.y2);
 
         this.div[0].style.left = (x3 - this.diffX) + 'px';
         this.div[0].style.top = (y3 - this.diffY) + 'px';
@@ -118,19 +131,19 @@ class Selector {
         // - it's over the container
         // - it's not over a container's button
         // - it's not over a "capture-left-click" item
-        if( e.which === 1 &&
+        if (e.which === 1 &&
             this.container.find('.btn:hover').length == 0 &&
             this.container.find('.nodrag:hover').length == 0 &&
             this.container.find('.jtk-connector:hover').length == 0 &&
             this.container.find('.capture-left-click:hover').length == 0
         ) {
-            if( this.container.is(':hover') ) {
+            if (this.container.is(':hover')) {
                 // we're starting a selection
                 e.preventDefault();
                 e.stopPropagation();
 
                 // remove previous selection
-                if( this.onDeselectCb ) {
+                if (this.onDeselectCb) {
                     this.onDeselectCb(this.selection);
                     this.selection = [];
                 }
@@ -150,7 +163,7 @@ class Selector {
     }
 
     onSelectionMove(e) {
-        if( this.selecting ) {
+        if (this.selecting) {
             e.preventDefault();
             e.stopPropagation();
 
@@ -159,14 +172,14 @@ class Selector {
             this.y2 = e.pageY;
             this.reCalc();
 
-            if( this.onSelectingCb ) {
+            if (this.onSelectingCb) {
                 // now we have our area, find all divs in it and return
                 // result to the onSelectCb
                 this.findCardDivs({
-                    left   : Math.min(this.x1, this.x2),
-                    right  : Math.max(this.x1, this.x2),
-                    top    : Math.min(this.y1, this.y2),
-                    bottom : Math.max(this.y1, this.y2)
+                    left: Math.min(this.x1, this.x2),
+                    right: Math.max(this.x1, this.x2),
+                    top: Math.min(this.y1, this.y2),
+                    bottom: Math.max(this.y1, this.y2)
                 }, (divs) => {
                     this.selection = divs;
                     this.handleSelectionMenu();
@@ -177,7 +190,7 @@ class Selector {
     }
 
     onSelectionStop(e) {
-        if( this.selecting && e.which === 1 ) {
+        if (this.selecting && e.which === 1) {
             e.preventDefault();
             e.stopPropagation();
 
@@ -185,14 +198,14 @@ class Selector {
             this.selecting = false;
             this.div[0].hidden = 1;
 
-            if( this.onSelectCb ) {
+            if (this.onSelectCb) {
                 // now we have our area, find all divs in it and return
                 // result to the onSelectCb
                 this.findCardDivs({
-                    left   : Math.min(this.x1, this.x2),
-                    right  : Math.max(this.x1, this.x2),
-                    top    : Math.min(this.y1, this.y2),
-                    bottom : Math.max(this.y1, this.y2)
+                    left: Math.min(this.x1, this.x2),
+                    right: Math.max(this.x1, this.x2),
+                    top: Math.min(this.y1, this.y2),
+                    bottom: Math.max(this.y1, this.y2)
                 }, (divs) => {
                     this.selection = divs;
                     this.handleSelectionMenu();
@@ -202,12 +215,12 @@ class Selector {
         }
     }
 
-    findCardDivs( area, cb ) {
+    findCardDivs(area, cb) {
         var self = this;
         var selectedCards = [];
-        this.container.find('.card, .connection-control').each(function() {
-            if( self._intersects( $(this), area ) ) {
-                selectedCards.push($(this));
+        this.container.find('.card, .connection-control').each(function () {
+            if (self._intersects($(this), area)) {
+                selectedCards.push($(this)[0]);
             }
         });
 
@@ -215,25 +228,24 @@ class Selector {
     }
 
     // utilities
-    _intersects( div, area ) {
+    _intersects(div, area) {
         var r1 = $(div)[0].getBoundingClientRect();
         var r2 = area;
         var res = !(r2.left > r1.right ||
-           r2.right < r1.left ||
-           r2.top > r1.bottom ||
-           r2.bottom < r1.top);
+            r2.right < r1.left ||
+            r2.top > r1.bottom ||
+            r2.bottom < r1.top);
         return res;
     }
 
     // show/hide the selection menu if we have more than 2 divs selected
     handleSelectionMenu() {
-        if( this.selection.length > 1 ) {
+        if (this.selection.length > 1) {
             this.parent.view.div.find('.selection-menu').show();
-        }
-        else {
+        } else {
             this.parent.view.div.find('.selection-menu').hide();
         }
     }
 }
 
-export default Selector;
+export default Selector;

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

@@ -344,7 +344,7 @@ export default {
         closeModal: function() {
             // don't mutate prop directly, mute the parent
             // this.display = false;
-            this.$emit('close');
+            this.$emit('closed');
         },
 
         setSearchFocus : function() {

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

@@ -51,9 +51,9 @@
 }
 
 .edit-body {
-    overflow-y: auto;
+    overflow-y: hidden;
     overflow-x: hidden;
-    max-height: calc(100% - 80px);
+    max-height: calc(100% - 90px);
 }
 
 /* remove bs4 transition on collapsing */
@@ -130,20 +130,24 @@ i.fa, i.fas, i.far {
     pointer-events: none;
 }
 
+.h100 {
+    height: 100%;
+}
+
 </style>
 
 <template>
 
 <div class="edit-main-panel h100" id="edit-main-panel">
-    <div style="padding-left: 10px; padding-top: 10px; padding-right: 10px;">
-        <h2 class="edit-dualbox-app">
+    <div class="edit-main-presentation" style="padding-left: 10px; padding-top: 10px; padding-right: 10px; padding-bottom 10px;">
+        <h2 class="edit-dualbox-app" style="margin-bottom: none;">
             <div class="dualbox-node-name">
                 <span class="text-truncate d-inline-block" style="width: 290px">Application</span>
             </div>
         </h2>
     </div>
 
-    <div class="edit-body">
+    <div class="edit-body h100">
         <div class="card">
             <div class="card-header" id="dualbox-main-desc" data-toggle="collapse" data-target="#dualbox-main-desc-collapse" aria-expanded="false" aria-controls="dualbox-main-desc-collapse">
                 <h5 class="mb-0 btn-link">Description</h5>
@@ -392,8 +396,22 @@ export default {
     mounted: function() {
         // bind tooltips
         $(this.$el).find('button[data-toggle="tooltip"]').tooltip();
+        this.fixMaxHeightForCategories();
+    },
+    updated: function() {
+        this.fixMaxHeightForCategories();
     },
     methods: {
+        // setup a max height for each menu, so a scroll appears if there's too much item in it
+        fixMaxHeightForCategories : function() {
+            let nbActiveCategories = $(this.$el).find('.edit-body > .card').length;
+            let headerHeight = $(this.$el).find('.edit-body > .card > .card-header').outerHeight();
+            let panelHeight = $(this.$el).height() - $(this.$el).find('.edit-main-presentation').outerHeight();
+            let maxCategoryHeight = panelHeight - nbActiveCategories * headerHeight;
+            $(this.$el).find('.edit-body').css('height', panelHeight);
+            $(this.$el).find('.edit-body > .card > .collapse > .card-body').css('max-height', maxCategoryHeight + "px");
+        },
+
         onEdited: function() {
             this.view.repaint();
         },

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

@@ -28,6 +28,7 @@
         font-size: 12px;
         padding-left: 5px;
         padding-right: 5px;
+        overflow-y: auto;
     }
 
     .table-desc {
@@ -86,9 +87,9 @@
     }
 
     .edit-body {
-        overflow-y: auto;
+        overflow-y: hidden;
         overflow-x: hidden;
-        max-height: calc(100% - 80px);
+        max-height: calc(100% - 90px);
     }
 
     .table-events .event-rooting {
@@ -158,11 +159,15 @@
         pointer-events: none;
     }
 
+    .h100 {
+        height: 100%;
+    }
+
 </style>
 
 <template>
     <div class="edit-node-panel h100" id="edit-node-panel" :key="n.id">
-        <div style="padding-left: 10px; padding-top: 10px; padding-right: 10px;">
+        <div class="edit-node-presentation" style="padding-left: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px;">
             <h2 class="edit-dualbox-node-id">
                 <div v-if="nowEditingNodeName" class="dualbox-node-name-edit">
                     <input type="text" class="form-control dualbox-node-name-input" style="display: inline-block;" :value="n.graphId" @keypress="changeNodeName" autofocus/>
@@ -173,11 +178,11 @@
                     <span class="dualbox-node-name-span text-truncate d-inline-block">{{n.graphId}}</span>
                 </div>
             </h2>
-            <p><small class="edit-dualbox-node-package-name">{{n.getPackageName()}}</small></p>
+            <p style="margin-bottom: 0"><small class="edit-dualbox-node-package-name">{{n.getPackageName()}}</small></p>
         </div>
 
         <div class="edit-body">
-            <div class="card">
+            <div class="card card-settings">
                 <div class="card-header" id="dualbox-node-desc" data-toggle="collapse" data-target="#dualbox-node-desc-collapse" aria-expanded="true" aria-controls="dualbox-node-desc-collapse">
                     <h5 class="mb-0 btn-link">Description</h5>
                 </div>
@@ -248,8 +253,8 @@
 
                             <div v-if="!n.isMetanode()">
                                 <label>
-                                    <input class="input-worker-toggle" type="checkbox" v-bind:data-id="n.id" v-bind:checked="n.isParallel()" @change="toggleWorker()" />
-                                    <span>Execute in a worker <button type="button" class="btn btn-transparent" data-toggle="tooltip" data-placement="top" title="Workers are separate contexts of executions that can execute long-running tasks without blocking the browser execution. Use this for heavy computations." style="padding: 0;"><i class="text-info far fa-question-circle"></i></button></span><br/><span v-if="isParallel" class="text-danger worker-warning" v-show="n.isParallel()">Due to some technical limitations, this will only affect the built bundle. Please run tests on the built bundle as well.</span>
+                                    <input class="input-worker-toggle" type="checkbox" v-bind:data-id="n.id" v-bind:checked="n.isParallel()" @change="toggleWorker" />
+                                    <span>Execute in a worker <button type="button" class="btn btn-transparent" data-toggle="tooltip" data-placement="top" title="Workers are separate contexts of executions that can execute long-running tasks without blocking the browser execution. Use this for heavy computations." style="padding: 0;"><i class="text-info far fa-question-circle"></i></button></span>
                                 </label>
                             </div>
                         </div>
@@ -622,6 +627,7 @@ export default {
         // adapt the style of the example graph node
         // remove the "position: absolute;" that messes up the display
         this.fixCardStyle();
+        this.fixMaxHeightForCategories();
 
         // allow tooltips
         this.activateTooltip();
@@ -639,6 +645,7 @@ export default {
     updated: function() {
         //console.log('[Updated] node-settings');
         this.fixCardStyle();
+        this.fixMaxHeightForCategories();
         this.activateTooltip();
         this.focus();
     },
@@ -665,6 +672,16 @@ export default {
             });
         },
 
+        // setup a max height for each menu, so a scroll appears if there's too much item in it
+        fixMaxHeightForCategories : function() {
+            let nbActiveCategories = $(this.$el).find('.edit-body > .card-settings').length;
+            let headerHeight = $(this.$el).find('.edit-body > .card-settings > .card-header').outerHeight();
+            let panelHeight = $(this.$el).height() - $(this.$el).find('.edit-node-presentation').outerHeight();
+            let maxCategoryHeight = panelHeight - nbActiveCategories * headerHeight;
+            $(this.$el).find('.edit-body').css('height', panelHeight);
+            $(this.$el).find('.edit-body > .card-settings > .collapse > .card-body').css('max-height', maxCategoryHeight + "px");
+        },
+
         activateTooltip: function() {
             $(this.$el).find('[data-toggle="tooltip"]').tooltip();
         },
@@ -715,7 +732,7 @@ export default {
 
         addEvent: function(e) {
             this.view.c.addEvent(this.n.id);
-            this.$forceUpdate();
+            this.onEdited();
         },
 
         toggleInputVisibility: function(e) {
@@ -813,22 +830,17 @@ export default {
             // change options of closest .select-event-name according to this new target
             var targetNode = this.view.m.getNode(target);
             var targetEvents = targetNode.getEventsNames();
-            var select = $(e.target).closest('tr').find('.select-event-name');
-            select.html('');
-            _.each(targetEvents, (eventName) => {
-                select.append( $('<option/>', {
-                    value: eventName
-                }).append(eventName));
-            });
 
             var index = parseInt($(e.target).attr('data-index'));
             this.view.c.setEventTarget( this.n.id, index, target );
+            this.onEdited();
         },
 
         selectEventName: function(e) {
             var index = parseInt($(e.target).attr('data-index'));
             var val = $(e.target).val();
             this.view.c.setEventName( this.n.id, index, val );
+            this.onEdited();
         },
 
         toggleCache: function(e) {
@@ -840,6 +852,7 @@ export default {
             var val = $(e.target).is(':checked');
             this.view.c.setBoxParallel( this.n.id, val );
             this.isParallel = val;
+            this.onEdited();
         },
 
         editModuleDescription: function(e) {
@@ -878,7 +891,7 @@ export default {
         onEditAttributeType(attributeName, typeStr) {
             this.n.assignAttributeType(attributeName, typeStr);
             this.onEdited();
-            this.view.repaint(); 
+            this.view.repaint();
         },
 
         onEditDefaultValue(val) {

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

@@ -923,12 +923,23 @@ export default {
                             // resize the canvas if necessary
                             self.$parent.canvasSizeHandler.debouncedResize();
 
-                            // set the new position in the graph model
-                            var el = self.$parent.jsPlumbInstance.getElement(id);
-                            $(el).ready(function() {
-                                var pos = self.$parent.jsPlumbInstance.getPosition(el);
-                                view.m.getNode(id).setPosition(pos);
-                            });
+                            if( self.$parent.selector.isMultipleSelectionActive() ) {
+                                // We just dropped a bunch of divs, ajust all their positions
+                                self.view.m.history.batch(() => {
+                                    self.$parent.selector.each(div => {
+                                        var pos = self.$parent.jsPlumbInstance.getPosition(div);
+                                        view.m.getNode($(div).attr('id')).setPosition(pos);
+                                    });
+                                });
+                            }
+                            else {
+                                // We just dropped this one, set the new position in the graph model
+                                var el = self.$parent.jsPlumbInstance.getElement(id);
+                                $(el).ready(function() {
+                                    var pos = self.$parent.jsPlumbInstance.getPosition(el);
+                                    view.m.getNode(id).setPosition(pos);
+                                });
+                            }
                         }
                     });
                 }

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

@@ -130,9 +130,8 @@
 
     .dualbox-graph-left-window {
         width: calc(100% - 35px);
-        height: calc(100% - 20px);
+        height: calc(100% - 10px);
         margin-top: 10px;
-        margin-bottom: 30px;
         /* background-color: #ECF2F8; */
         background-color: #f8f9fa;
         /* border: 1px solid grey; */