@dualbox/editor 1.0.54 → 1.0.56

package/js/src/m/GraphModel.js

@@ -53,7 +53,7 @@ class GraphModel {
         this.outputPrefix = "out-";
 
         // on json change callback
-        this.onChange = null;
+        this.onChangeCb = null;
     }
 
     /***
@@ -209,6 +209,13 @@ class GraphModel {
         }
     }
 
+    batch(cb) {
+        var diff = this.history.batch(cb);
+        if (this.onChangeCb) {
+            this.onChangeCb(diff);
+        }
+    }
+
     setWindow(name) {
         var newWindows = [];
         _.each(this.data.windows, (w) => {
@@ -1768,7 +1775,7 @@ class GraphNode {
     }
 
     rename(newId) {
-        this.m.history.batch(() => {
+        this.m.batch(() => {
             // change the target name according to type (ex: if input: "size" -> "in-size")
             var newGraphId;
             if (this.isInput()) {

package/js/src/m/History.js

@@ -114,7 +114,7 @@ class History {
     // execute the callback and save the history as 1 change
     batch(cb) {
         this.ignore(cb);
-        this.save();
+        return this.save();
     }
 
     ignore(cb) {

package/js/src/m/Merger.js

@@ -23,24 +23,24 @@ class Merger {
 
         this.nodes = [];
         _.each(ids, (id) => {
-            this.nodes.push( this.m.getNode(id) );
+            this.nodes.push(this.m.getNode(id));
         });
 
         this.id = null;
 
         // links from and to outside
         this.inboundLinksFromOutside = [];
-        this.outboundLinksToOutside  = [];
+        this.outboundLinksToOutside = [];
     }
 
     // merge all divs into a metabox
     // ids: array of ids from the boxes to be merged
     // metaboxName: name of the new metabox
     // metaboxDesc: description of the new metabox
-    merge( metaboxName, metaboxDesc ) {
+    merge(metaboxName, metaboxDesc) {
         this.def.desc = metaboxDesc;
 
-        this.m.history.batch( () => {
+        this.m.batch(() => {
             // 0. create a new ID for our metanode
             this.id = metaboxName + '-' + utils.randomString(8);
 
@@ -64,16 +64,16 @@ class Merger {
 
             // 5. Our metanode definition is ready, add it to the app
             this.m.data.app.metanodes = this.m.data.app.metanodes || {};
-            this.m.data.app.metanodes[ metaboxName ] = this.def;
+            this.m.data.app.metanodes[metaboxName] = this.def;
 
             // 6. Create a new node from this def
             this.m.data.app.modules[this.id] = {
-                "module" : metaboxName,
+                "module": metaboxName,
                 "version": "*",
-                "graph"  : {
-                    "position" : {
-                        top  : (bbox.top + bbox.bottom) / 2,
-                        left : (bbox.left + bbox.right) / 2
+                "graph": {
+                    "position": {
+                        top: (bbox.top + bbox.bottom) / 2,
+                        left: (bbox.left + bbox.right) / 2
                     }
                 }
             };
@@ -85,13 +85,13 @@ class Merger {
     }
 
     _debug() {
-        console.log( this.def );
+        console.log(this.def);
     }
 
-    _isInMetanode( id ) {
+    _isInMetanode(id) {
         var inGroup = false;
-        _.each( this.nodes, (node) => {
-            if( node.id === id ) {
+        _.each(this.nodes, (node) => {
+            if (node.id === id) {
                 inGroup = true;
                 return false; // eol
             }
@@ -101,36 +101,35 @@ class Merger {
 
     // find the links from and to outside the metanode
     _collectAndDetachExternalLinks() {
-        _.each( this.nodes, (node) => {
+        _.each(this.nodes, (node) => {
             var links = node.getInboundLinks();
-            _.each( links, (link) => {
-                if( !this._isInMetanode(link.sourceId) ) {
+            _.each(links, (link) => {
+                if (!this._isInMetanode(link.sourceId)) {
                     link.detach(); // we don't need this link anymore
-                    this.inboundLinksFromOutside.push( link );
+                    this.inboundLinksFromOutside.push(link);
                 }
             });
 
             var links = node.getOutboundLinks();
-            _.each( links, (link) => {
-                if( !this._isInMetanode(link.targetId) ) {
+            _.each(links, (link) => {
+                if (!this._isInMetanode(link.targetId)) {
                     link.detach();
-                    this.outboundLinksToOutside.push( link );
+                    this.outboundLinksToOutside.push(link);
                 }
             });
         });
     }
 
     // transform "cond" into "cond2", or "cond3" if cond2 is taken, etc.
-    _nextName( type, name ) {
+    _nextName(type, name) {
         // find the appropriate number end (that is not taken already)
         var ending = 2;
-        if( type == "input" ) {
-            while( this.def.input[ name + "-" + ending ] ) ending++;
+        if (type == "input") {
+            while (this.def.input[name + "-" + ending]) ending++;
+        } else {
+            while (this.def.output[name + "-" + ending]) ending++;
         }
-        else {
-            while( this.def.output[ name + "-" + ending ] ) ending++;
-        }
-        return name+"-"+ending;
+        return name + "-" + ending;
     }
 
     // find and create the metabox inputs
@@ -143,7 +142,7 @@ class Merger {
         var getInputNameForThisLink = function(l) {
             var r = null;
             _.each(inputToLinks, (link, inputName) => {
-                if( link.sourceId == l.sourceId && link.sourceOutput == l.sourceOutput ) {
+                if (link.sourceId == l.sourceId && link.sourceOutput == l.sourceOutput) {
                     r = inputName;
                     return false;
                 }
@@ -157,7 +156,7 @@ class Merger {
 
             // get the original input name, rename if necessary
             var inputName = link.targetInput;
-            if( this.def.input[inputName] ) {
+            if (this.def.input[inputName]) {
                 // the input already exists. Check if the link that led to the creation of this
                 // input have the same source that 'link'. Otherwise, we create another input.
                 var l = inputToLinks[inputName];
@@ -168,8 +167,8 @@ class Merger {
                 inputName = lookupInputName ? lookupInputName : this._nextName("input", inputName);
             }
 
-            this.def.input[ inputName ] = {
-                type: targetNode.getInputType( link.targetInput ),
+            this.def.input[inputName] = {
+                type: targetNode.getInputType(link.targetInput),
                 graph: {
                     position: this._computeInputSmartPosition(index)
                 }
@@ -181,7 +180,7 @@ class Merger {
             link.nextTargetInput = inputName;
 
             // save our link in the dictionary
-            inputToLinks[ inputName ] = link;
+            inputToLinks[inputName] = link;
         });
     }
 
@@ -192,13 +191,13 @@ class Merger {
             var sourceNode = link.getSourceNode();
 
             var outputName = link.sourceOutput;
-            if( this.def.output[ outputName ] ) {
+            if (this.def.output[outputName]) {
                 // check if the source of the output is the same as this link
                 var outputLink = this.def.output[outputName].link;
                 var sourceId = _.keys(outputLink)[0];
                 var sourceOutput = outputLink[sourceId];
 
-                if( !(link.sourceId == sourceId && link.sourceOutput == sourceOutput) ) {
+                if (!(link.sourceId == sourceId && link.sourceOutput == sourceOutput)) {
                     // the output already exists. we need to create another one.
                     outputName = this._nextName("output", outputName);
                 }
@@ -206,8 +205,8 @@ class Merger {
 
             var l = {};
             l[link.sourceId] = link.sourceOutput;
-            this.def.output[ outputName ] = {
-                type: sourceNode.getOutputType( link.sourceOutput ),
+            this.def.output[outputName] = {
+                type: sourceNode.getOutputType(link.sourceOutput),
                 graph: {
                     position: this._computeOutputSmartPosition(index)
                 },
@@ -227,15 +226,15 @@ class Merger {
         var left = Number.MAX_SAFE_INTEGER;
         _.each(this.nodes, (node) => {
             var pos = node.getPosition();
-            if( pos.top < top ) top = pos.top;
-            if( pos.left < left ) left = pos.left;
+            if (pos.top < top) top = pos.top;
+            if (pos.left < left) left = pos.left;
         });
 
         // we want to put theses node to 50px top and 50px left, so compute the diff
         var topdiff = top - 50;
         var leftdiff = left - 250;
-        if( topdiff < 0 ) topdiff = 0;
-        if( leftdiff < 0 ) leftdiff = 0;
+        if (topdiff < 0) topdiff = 0;
+        if (leftdiff < 0) leftdiff = 0;
 
         // reposition all nodes
         _.each(this.nodes, (node) => {
@@ -249,18 +248,18 @@ class Merger {
     _moveNodes() {
         // move the nodes into the Metamodule def
         _.each(this.nodes, (node) => {
-            if( node.isMetanode() ) {
+            if (node.isMetanode()) {
                 // move the metanode definition too
-                this.def.metanodes[ node.def.module ] = node.getMetanodeDefinition();
+                this.def.metanodes[node.def.module] = node.getMetanodeDefinition();
             }
 
             // move the node module definition (preserving the links between metabox's node)
-            this.def.modules[node.id] = this.m.data.app.modules[ node.id ];
+            this.def.modules[node.id] = this.m.data.app.modules[node.id];
             delete this.m.data.app.modules[node.id];
 
-            if( node.isMetanode() ) {
+            if (node.isMetanode()) {
                 // if the metanode isn't still in use in the main app, remove def from here
-                if( !this.m.isMetanodeUsed(node.def.module) ) {
+                if (!this.m.isMetanodeUsed(node.def.module)) {
                     delete this.m.data.app.metanodes[node.def.module];
                 }
             }
@@ -270,7 +269,7 @@ class Merger {
     _bindInputs() {
         _.each(this.inboundLinksFromOutside, (link) => {
             // we created an input with the same name, bind it to it
-            this.def.modules[link.targetId].links[link.targetInput] = { "input" : link.nextTargetInput };
+            this.def.modules[link.targetId].links[link.targetInput] = { "input": link.nextTargetInput };
         });
     }
 
@@ -302,18 +301,18 @@ class Merger {
     // compute the bbox of all divs beeing merged, position the new div in the middle
     _computeBbox() {
         var most = {
-            top:    +Infinity,
+            top: +Infinity,
             bottom: -Infinity,
-            left:   +Infinity,
-            right:  -Infinity
+            left: +Infinity,
+            right: -Infinity
         };
 
-        _.each( this.nodes, (node) => {
+        _.each(this.nodes, (node) => {
             var pos = node.getPosition();
-            if( pos.top < most.top ) most.top = pos.top;
-            if( pos.top > most.bottom ) most.bottom = pos.top;
-            if( pos.left < most.left ) most.left = pos.left;
-            if( pos.left > most.right ) most.right = pos.left;
+            if (pos.top < most.top) most.top = pos.top;
+            if (pos.top > most.bottom) most.bottom = pos.top;
+            if (pos.left < most.left) most.left = pos.left;
+            if (pos.left > most.right) most.right = pos.left;
         });
 
         return most;
@@ -322,11 +321,11 @@ class Merger {
     _getPositioningValues() {
         // todo: get a better system with the real bbox
         return {
-            width       : 100,
-            height      : 80,
-            hMargin     : 80,
-            vMargin     : 20,
-            divAvgWidth : 150
+            width: 100,
+            height: 80,
+            hMargin: 80,
+            vMargin: 20,
+            divAvgWidth: 150
         }
     }
 
@@ -351,7 +350,4 @@ class Merger {
     }
 }
 
-export default Merger;
-
-
-
+export default Merger;

package/js/src/v/CanvasSizeHandler.js

@@ -6,11 +6,11 @@
 import _ from 'lodash';
 
 var editorView = null;
-$.fn.savePosition = function( selector ) {
+$.fn.savePosition = function(selector) {
     var id = $(this).attr('id');
-    if( id ) {
+    if (id) {
         var jsPlumbElement = editorView.jsPlumbInstance.getElement(id);
-        if( jsPlumbElement ) {
+        if (jsPlumbElement) {
             var pos = editorView.jsPlumbInstance.getPosition(jsPlumbElement);
             editorView.view.m.getNode(id).setPosition(pos);
         }
@@ -21,7 +21,7 @@ class CanvasSizeHandler {
     constructor(parent, canvas) {
         this.parent = editorView = parent;
         this.canvas = canvas;
-        this.minWidth  = this.width  = this.canvas.width();
+        this.minWidth = this.width = this.canvas.width();
         this.minHeight = this.height = this.canvas.height();
 
         // arbitrary: number of pixels to expand/shrink the canvas for 1 step
@@ -35,41 +35,41 @@ class CanvasSizeHandler {
         this.z = 0; // current zoom
     }
 
-    refreshZoom( z ) {
+    refreshZoom(z) {
         this.z = z;
     }
 
     // set the current width and height to the new canvas
     apply() {
         var offset = this.canvas.offset();
-        var oldWidth  = this.canvas.width();
+        var oldWidth = this.canvas.width();
         var oldHeight = this.canvas.height();
 
-        if( oldWidth !== this.width ) {
+        if (oldWidth !== this.width) {
             console.log('setting canvas width: %s -> %s', this.canvas.width(), this.width);
             this.canvas.width(this.width);
         }
-        if( oldHeight !== this.height ) {
+        if (oldHeight !== this.height) {
             console.log('setting canvas height: %s -> %s', this.canvas.height(), this.height);
             this.canvas.height(this.height);
         }
 
         // If we are in a zoomed state, we need to update the transform-origin so we stay at the same position
-        if( this.z !== 1 ) {
-            // transform-origin is defined in % in the debugger, but for some reason, jquery seems to give us offset when 
+        if (this.z !== 1) {
+            // transform-origin is defined in % in the debugger, but for some reason, jquery seems to give us offset when
             // we integrate it
             var oldTO = this.canvas.css('transform-origin');
             var oldTOX = parseFloat(oldTO);
             var oldTOY = parseFloat(oldTO.split(' ')[1]);
             var newTOX = oldTOX; // init thoses at the old value
-            var newTOY = oldTOY; 
+            var newTOY = oldTOY;
 
-            if( oldWidth !== this.width ) {
+            if (oldWidth !== this.width) {
                 var xRatioChange = this.width / oldWidth;
                 var newTOX = oldTOX * xRatioChange;
             }
 
-            if( oldHeight !== this.height ) {
+            if (oldHeight !== this.height) {
                 var yRatioChange = this.height / oldHeight;
                 var newTOY = oldTOY * yRatioChange;
             }
@@ -85,21 +85,21 @@ class CanvasSizeHandler {
         // dont trigger save
         this.parent.view.m.history.ignore(() => {
             // refresh zoom value, zoom affects width, height and offset calculations
-            this.refreshZoom( this.parent.zoomer.getZoom() );
+            this.refreshZoom(this.parent.zoomer.getZoom());
 
             // find the coord of the 2d box bounding all divs
             var most = {
-                top:    +Infinity,
+                top: +Infinity,
                 bottom: -Infinity,
-                left:   +Infinity,
-                right:  -Infinity
+                left: +Infinity,
+                right: -Infinity
             };
             this.canvas.find('.card').each(function() {
                 var rect = this.getBoundingClientRect();
-                if( rect.top < most.top ) most.top = Math.floor(rect.top);
-                if( rect.bottom > most.bottom ) most.bottom = Math.ceil(rect.bottom);
-                if( rect.left < most.left ) most.left = Math.floor(rect.left);
-                if( rect.right > most.right ) most.right = Math.ceil(rect.right);
+                if (rect.top < most.top) most.top = Math.floor(rect.top);
+                if (rect.bottom > most.bottom) most.bottom = Math.ceil(rect.bottom);
+                if (rect.left < most.left) most.left = Math.floor(rect.left);
+                if (rect.right > most.right) most.right = Math.ceil(rect.right);
             });
 
             // compare to the canvas coord
@@ -107,24 +107,24 @@ class CanvasSizeHandler {
             var tresholdAdapted = this.treshold * this.z;
 
             var r = {
-                top:    ((canvasRect.top + tresholdAdapted) - most.top) / this.z,
+                top: ((canvasRect.top + tresholdAdapted) - most.top) / this.z,
                 bottom: (most.bottom - (canvasRect.bottom - tresholdAdapted)) / this.z,
-                left:   ((canvasRect.left + tresholdAdapted) - most.left) / this.z,
-                right:  (most.right - (canvasRect.right - tresholdAdapted)) / this.z
+                left: ((canvasRect.left + tresholdAdapted) - most.left) / this.z,
+                right: (most.right - (canvasRect.right - tresholdAdapted)) / this.z
             }
 
             // avoid to resize for some pixel roundup
-            if( Math.abs(r.top) > 2 || Math.abs(r.left) > 2 || Math.abs(r.bottom) > 2 || Math.abs(r.right) > 2 ) {
+            if (Math.abs(r.top) > 2 || Math.abs(r.left) > 2 || Math.abs(r.bottom) > 2 || Math.abs(r.right) > 2) {
                 // resize width and height
                 this.width += r.left + r.right;
                 this.height += r.top + r.bottom;
-                if( this.width < this.minWidth ) this.width = this.minWidth;
-                if( this.height < this.minHeight ) this.height = this.minHeight;
+                if (this.width < this.minWidth) this.width = this.minWidth;
+                if (this.height < this.minHeight) this.height = this.minHeight;
                 this.apply();
 
                 // if we're expanding to the top or shrinking back, move the non-selected divs
                 // in the opposite direction
-                if( r.top > 0 || (r.top < 0 && this.height > this.minHeight)  ) {
+                if (r.top > 0 || (r.top < 0 && this.height > this.minHeight)) {
                     // move the non-selected divs to the bottom
                     this.canvas.find('.card:not(.selected)').each(function() {
                         var offset = $(this).offset();
@@ -140,7 +140,7 @@ class CanvasSizeHandler {
                 }
 
                 // same for left
-                if( r.left > 0 || (r.left < 0 && this.width > this.minWidth) ) {
+                if (r.left > 0 || (r.left < 0 && this.width > this.minWidth)) {
                     // move the non-selected divs to the right
                     this.canvas.find('.card:not(.selected)').each(function() {
                         var offset = $(this).offset();
@@ -174,4 +174,4 @@ class CanvasSizeHandler {
     }
 }
 
-export default CanvasSizeHandler;
+export default CanvasSizeHandler;

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

@@ -927,7 +927,7 @@ export default {
 
                             if( self.$parent.selector.isMultipleSelectionActive() ) {
                                 // We just dropped a bunch of divs, ajust all their positions
-                                self.view.m.history.batch(() => {
+                                self.view.m.batch(() => {
                                     self.$parent.selector.each(div => {
                                         var pos = self.$parent.jsPlumbInstance.getPosition(div);
                                         view.m.getNode($(div).attr('id')).setPosition(pos);

package/package.json

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