@dualbox/editor 1.0.61 → 1.0.62

package/js/src/c/GraphController.js

@@ -47,8 +47,7 @@ class GraphController {
                     this.v.repaint();
                 }
             });
-        }
-        else {
+        } else {
             var options = {};
             _.each(this.m.getPanels(), (name) => options[name] = name);
 
@@ -81,7 +80,16 @@ class GraphController {
             var pkg = this.e.packages[packageName];
             if (pkg) {
                 // first, add node in the model
-                var nodeInfo = this.m.addNode(id, pkg);
+                // batch it so add node + set position is 1 history change only
+                var nodeInfo;
+                this.m.batch(() => {
+                    nodeInfo = this.m.addNode(id, pkg);
+                    if (nodeInfo && pos) {
+                        var node = this.m.getNode(nodeInfo.id);
+                        node.setPosition(pos);
+                    }
+                });
+
                 if (nodeInfo) {
                     if (pos) {
                         var node = this.m.getNode(nodeInfo.id);
@@ -98,8 +106,7 @@ class GraphController {
                         this.registerNodeToInterface(id);
                     }
                 }
-            }
-            else {
+            } else {
                 console.error('Package ' + packageName + ' not found');
             }
         });
@@ -109,8 +116,7 @@ class GraphController {
     addNewMetabox(name, json = {}, pos) {
         if (this.m.hasMetanode(name)) {
             swal("Can't add metabox", "metabox with name '" + name + "' already exists.", "error");
-        }
-        else {
+        } else {
             // add metabox def
             this.m.addMetanode(name, json);
 
@@ -121,7 +127,7 @@ class GraphController {
                 "name": name,
                 "version": "*"
             });
-            if( pos ) {
+            if (pos) {
                 var n = this.m.getNode(id);
                 n.setPosition(pos);
             }
@@ -157,8 +163,7 @@ class GraphController {
         // if it's an UI, we need to register it to a panel
         if (type === "ui") {
             this.registerNodeToInterface(newId); // will repaint
-        }
-        else {
+        } else {
             this.v.repaint();
         }
     }
@@ -168,8 +173,7 @@ class GraphController {
         if (node.isInputConnected(input) && !visible) {
             swal('Not yet', 'Please remove all connections to this input before changing its visibility', 'error');
             return false;
-        }
-        else {
+        } else {
             node.setInputVisibility(input, visible);
             this.v.repaint();
             return true;
@@ -181,8 +185,7 @@ class GraphController {
         if (node.isOutputConnected(output) && !visible) {
             swal('Not yet', 'Please remove all connections to this output before changing its visibility', 'error');
             return false;
-        }
-        else {
+        } else {
             node.setOutputVisibility(output, visible);
             this.v.repaint();
             return true;
@@ -230,12 +233,10 @@ class GraphController {
             if (type == "input") {
                 oldId = this.m.inputPrefix + oldId;
                 newId = this.m.inputPrefix + newId;
-            }
-            else if (type == "output") {
+            } else if (type == "output") {
                 oldId = this.m.outputPrefix + oldId;
                 newId = this.m.outputPrefix + newId;
-            }
-            else {
+            } else {
                 if (newId.startsWith(this.m.inputPrefix) ||
                     newId.startsWith(this.m.outputPrefix)) {
                     swal('Breaking convention', 'Only input boxes and output boxes can have a name that starts with "' + this.m.inputPrefix + '" or "' + this.m.outputPrefix + '".', "error");
@@ -276,12 +277,10 @@ class GraphController {
             var eventName = id.split('-')[id.split('-').length - 1];
             var def = this.m.getCurrentApp().getEventIn(eventName)[index];
             def[prop] = val;
-        }
-        else if (id.startsWith("#application-events-out")) {
+        } else if (id.startsWith("#application-events-out")) {
             var def = this.m.getCurrentApp().getEventOut();
             def[prop] = val;
-        }
-        else {
+        } else {
             var def = this.m.getNode(id).getEvent(index);
             def[prop] = val;
             this.m.getNode(id).setEvent(index, def);
@@ -365,35 +364,32 @@ class GraphController {
         var nodeIndex = -1;
         var eventIndex = -1;
 
-        var iterateToNextEvent = function () {
+        var iterateToNextEvent = function() {
             if (eventIndex + 1 < eventNames.length) {
                 eventIndex++;
                 eventName = eventNames[eventIndex];
                 return eventName;
-            }
-            else {
+            } else {
                 return null;
             }
         }
 
-        var iterateToNextNode = function () {
+        var iterateToNextNode = function() {
             if (nodeIndex + 1 < nodes.length) {
                 nodeIndex++;
                 node = nodes[nodeIndex];
                 eventNames = node.getEventsNames();
                 if (eventNames.length !== 0) {
                     return node;
-                }
-                else {
+                } else {
                     return iterateToNextNode();
                 }
-            }
-            else {
+            } else {
                 return null;
             }
         }
 
-        var iterate = function () {
+        var iterate = function() {
             var n, e;
             e = iterateToNextEvent();
             if (e === null) n = iterateToNextNode();
@@ -424,8 +420,7 @@ class GraphController {
         if (node != null) {
             var evtName = node.getEventsNames()[0];
             this.m.getCurrentApp().addSubEvent(name, node.getGraphId(), evtName);
-        }
-        else {
+        } else {
             this.m.getCurrentApp().addSubEvent(name, null, null);
         }
         this.v.setMainMenu();
@@ -444,7 +439,7 @@ class GraphController {
     addInput(name, type, desc, pos) {
         var input = this.m.addInput(name, type, desc);
         if (pos) {
-            var node = this.m.getNode("in-"+name);
+            var node = this.m.getNode("in-" + name);
             node.setPosition(pos);
         }
         this.v.repaint();
@@ -453,7 +448,7 @@ class GraphController {
     addOutput(name, type, desc, pos) {
         var output = this.m.addOutput(name, type, desc);
         if (pos) {
-            var node = this.m.getNode("out-"+name);
+            var node = this.m.getNode("out-" + name);
             node.setPosition(pos);
         }
         this.v.repaint();
@@ -465,8 +460,7 @@ class GraphController {
             confirmButtonText: 'Next &rarr;',
             showCancelButton: true,
             progressSteps: ['1', '2']
-        }).queue([
-            {
+        }).queue([{
                 input: 'text',
                 title: 'Enter the input name',
             },
@@ -503,8 +497,7 @@ class GraphController {
             confirmButtonText: 'Next &rarr;',
             showCancelButton: true,
             progressSteps: ['1', '2']
-        }).queue([
-            {
+        }).queue([{
                 input: 'text',
                 title: 'Enter the output name',
             },
@@ -544,7 +537,7 @@ class GraphController {
 
     unsetIterator(id, input) {
         var node = this.m.getNode(id);
-        node.detachInput(input);  // this connection is invalid now
+        node.detachInput(input); // this connection is invalid now
         node.unsetIterator(input);
         this.v.repaint();
     }
@@ -675,8 +668,7 @@ class GraphController {
             confirmButtonText: 'Next &rarr;',
             showCancelButton: true,
             progressSteps: ['1', '2']
-        }).queue([
-            {
+        }).queue([{
                 input: 'text',
                 title: 'Enter the metabox name',
             },
@@ -710,4 +702,4 @@ class GraphController {
     }
 }
 
-export default GraphController;
+export default GraphController;

package/js/src/m/GraphModel.js

@@ -31,6 +31,7 @@ class GraphModel {
             // Pointer that changes when we view/edit metanodes
             // All methodes are relative to this pointer, so we just need to change it
             // to enter/exit a metanode
+            // Path to the current metanode. Use this.getCurrentMetanode() to resolve it
             app: null,
 
             // Array of pointers to manage navigation between metanodes
@@ -40,14 +41,14 @@ class GraphModel {
             // w[2] = view state (result of zoomer.saveState())
             windows: null
         };
-        this.data.app = this.data.root;
+        this.data.app = null;
         this.data.windows = [
-            [this.e.rootAppName, this.data.app]
+            [this.e.rootAppName, null]
         ];
 
         // An object to save/restore different states of this.data (ctrl-z/ctrl-y)
         this.history = new History(this);
-        this.history.setOrigin(_.cloneDeep(this.data));
+        this.history.setOrigin(_.cloneDeep(this.data.root));
 
         this.inputPrefix = "in-";
         this.outputPrefix = "out-";
@@ -64,14 +65,14 @@ class GraphModel {
         this.check(json);
 
         this.data.root = json;
-        this.data.app = this.data.root; // reset ptr
+        this.data.app = null; // reset ptr
         this.data.windows = [
-            [this.e.rootAppName, this.data.app]
+            [this.e.rootAppName, null]
         ];
 
         await this.addNativeTypes();
 
-        this.history.setOrigin(_.cloneDeep(this.data));
+        this.history.setOrigin(_.cloneDeep(this.data.root));
     }
 
     addNativeTypes() {
@@ -115,7 +116,11 @@ class GraphModel {
     }
 
     getCurrentMetanode() {
-        return this.data.app;
+        if (this.data.app === null) {
+            return this.data.root
+        } else {
+            return _.get(this.data.root, this.data.app);
+        }
     }
 
     getCurrentMetanodeName() {
@@ -189,10 +194,6 @@ class GraphModel {
         return this.data.windows;
     }
 
-    getCurrentWindow() {
-        return this.data.app;
-    }
-
     getPanels() {
         return _.keys(this.data.root.interface);
     }
@@ -263,20 +264,20 @@ class GraphModel {
      *   Json security methods
      */
     ensure(field) {
-        this.data.app[field] = this.data.app[field] || {};
+        this.getCurrentMetanode()[field] = this.getCurrentMetanode()[field] || {};
     }
 
     /**
      *   Metanodes navigation
      */
     enterMetanode(id, viewState) {
-        var node = this.data.app.modules[id];
+        var node = this.getCurrentMetanode().modules[id];
         if (!node) {
             throw "couldn't find node " + id;
         }
 
         var name = node.module;
-        var metanode = this.data.app.metanodes[name];
+        var metanode = this.getCurrentMetanode().metanodes[name];
         if (!metanode) {
             throw "couldn't find definition for metanode " + name;
         }
@@ -285,7 +286,7 @@ class GraphModel {
         this.data.windows[this.data.windows.length - 1][2] = viewState;
 
         // switch to the next window
-        this.data.app = metanode;
+        this.data.app = ["metanodes", name];
         this.data.windows.push([name, metanode]);
         this.save();
     }
@@ -295,7 +296,7 @@ class GraphModel {
      */
     addMetanode(name, def) {
         this.ensure('metanodes');
-        this.data.app.metanodes[name] = def;
+        this.getCurrentMetanode().metanodes[name] = def;
     }
 
     addInput(name, type, desc) {
@@ -304,7 +305,7 @@ class GraphModel {
             "desc": desc
         };
         this.ensure('input');
-        this.data.app.input[name] = input;
+        this.getCurrentMetanode().input[name] = input;
         this.save();
         return input;
     }
@@ -315,13 +316,13 @@ class GraphModel {
             "desc": desc
         };
         this.ensure('output');
-        this.data.app.output[name] = output;
+        this.getCurrentMetanode().output[name] = output;
         this.save();
         return output;
     }
 
     hasMetanode(name) {
-        return idx(this.data, o => o.app.metanodes[name]) !== undefined;
+        return _.get(this.getCurrentMetanode(), ["metanodes", name]) !== undefined;
     }
 
     isRootApp(app) {
@@ -331,7 +332,7 @@ class GraphModel {
     getMetanodeInstances(app) {
         // first identify metanode name
         var metanodeName = null;
-        _.each(this.data.app.metanodes, (metanode, name) => {
+        _.each(this.getCurrentMetanode().metanodes, (metanode, name) => {
             if (app == metanode) {
                 metanodeName = name;
                 return false;
@@ -339,7 +340,7 @@ class GraphModel {
         });
 
         var instances = [];
-        _.each(this.data.app.modules, (json, id) => {
+        _.each(this.getCurrentMetanode().modules, (json, id) => {
             if (json.module == metanodeName) {
                 instances.push(this.getNode(id));
             }
@@ -358,24 +359,24 @@ class GraphModel {
         }
         if (utils.isModule(pkg.name)) {
             this.ensure('modules');
-            if (this.data.app.modules[id]) {
+            if (this.getCurrentMetanode().modules[id]) {
                 console.error('Could not add module ' + id + ': already exists');
                 return false;
             }
-            var node = this.data.app.modules[id] = desc;
+            var node = this.getCurrentMetanode().modules[id] = desc;
         } else if (utils.isUI(pkg.name)) {
             this.ensure('ui');
-            if (this.data.app.ui[id]) {
+            if (this.getCurrentMetanode().ui[id]) {
                 console.error('Could not add ui ' + id + ': already exists');
                 return false;
             }
-            var node = this.data.app.ui[id] = desc;
+            var node = this.getCurrentMetanode().ui[id] = desc;
         } else {
             // may be a metanode
-            var nodeDef = idx(this.data.app, o => o.metanodes[pkg.name]);
+            var nodeDef = idx(this.getCurrentMetanode(), o => o.metanodes[pkg.name]);
             if (nodeDef) {
                 this.ensure('modules');
-                var node = this.data.app.modules[id] = desc;
+                var node = this.getCurrentMetanode().modules[id] = desc;
                 return node;
             } else {
                 throw pkg.name + " is not module or ui, can't add node !";
@@ -417,11 +418,11 @@ class GraphModel {
         switch (type) {
             case "module":
                 this.ensure('modules');
-                this.data.app.modules[id] = def;
+                this.getCurrentMetanode().modules[id] = def;
                 break;
             case "ui":
                 this.ensure('ui');
-                this.data.app.ui[id] = def;
+                this.getCurrentMetanode().ui[id] = def;
                 break;
             default:
                 throw type + " is not module or ui, error";
@@ -467,7 +468,7 @@ class GraphModel {
     // check if metanode def is used by at least 1 module
     isMetanodeUsed(name) {
         var stillUsed = false;
-        _.each(this.data.app.modules, (n) => {
+        _.each(this.getCurrentMetanode().modules, (n) => {
             if (n.module === name) {
                 stillUsed = true;
                 return false; // eol
@@ -505,25 +506,25 @@ class GraphModel {
         var keys = null;
         switch (type) {
             case "input":
-                keys = _.keys(this.data.app.input);
+                keys = _.keys(this.getCurrentMetanode().input);
                 keys = _.map(keys, k => this.inputPrefix + k);
                 break;
             case "output":
-                keys = _.keys(this.data.app.output);
+                keys = _.keys(this.getCurrentMetanode().output);
                 keys = _.map(keys, k => this.outputPrefix + k);
                 break;
             case "modules":
-                keys = _.keys(this.data.app.modules);
+                keys = _.keys(this.getCurrentMetanode().modules);
                 break;
             case "ui":
-                keys = _.keys(this.data.app.ui);
+                keys = _.keys(this.getCurrentMetanode().ui);
                 break;
             default:
                 if (type === undefined) {
-                    keys = [].concat(_.map(_.keys(this.data.app.input), k => this.inputPrefix + k))
-                        .concat(_.map(_.keys(this.data.app.output), k => this.outputPrefix + k))
-                        .concat(_.keys(this.data.app.modules))
-                        .concat(_.keys(this.data.app.ui));
+                    keys = [].concat(_.map(_.keys(this.getCurrentMetanode().input), k => this.inputPrefix + k))
+                        .concat(_.map(_.keys(this.getCurrentMetanode().output), k => this.outputPrefix + k))
+                        .concat(_.keys(this.getCurrentMetanode().modules))
+                        .concat(_.keys(this.getCurrentMetanode().ui));
                 } else {
                     throw new Error('unknown node type: ' + type);
                 }
@@ -629,7 +630,7 @@ class GraphModel {
 class GraphNode {
     constructor(m, id, example = false) {
         this.m = m;
-        this.app = this.m.data.app;
+        this.app = this.m.getCurrentMetanode();
         this.id = id;
         this.uniqId = this.m.getCurrentMetanodePath() + '->' + this.id;
 
@@ -1446,10 +1447,10 @@ class GraphNode {
         var collectInputLinks = (def, id) => collectLinks(def, this.m.inputPrefix + id);
         var collectOutputLinks = (def, id) => collectLinks(def, this.m.outputPrefix + id);
 
-        _.each(this.m.data.app.modules, collectLinks);
-        _.each(this.m.data.app.ui, collectLinks);
-        _.each(this.m.data.app.input, collectInputLinks);
-        _.each(this.m.data.app.output, collectOutputLinks);
+        _.each(this.m.getCurrentMetanode().modules, collectLinks);
+        _.each(this.m.getCurrentMetanode().ui, collectLinks);
+        _.each(this.m.getCurrentMetanode().input, collectInputLinks);
+        _.each(this.m.getCurrentMetanode().output, collectOutputLinks);
         return links;
     }
 
@@ -1464,7 +1465,7 @@ class GraphNode {
                 }
             });
         };
-        _.each(this.m.data.app.ui, collectEvents);
+        _.each(this.m.getCurrentMetanode().ui, collectEvents);
         return events;
     }
 
@@ -1579,8 +1580,11 @@ class GraphNode {
     // pos: { top: Integer, left: Integer }
     setPosition(pos) {
         this.def.graph = this.def.graph || {};
-        this.def.graph.position = pos;
-        this.m.save();
+        var curPos = this.def.graph.position;
+        if (!curPos || curPos.top != pos.top || curPos.left != pos.left) {
+            this.def.graph.position = pos;
+            this.m.save();
+        }
     }
 
     getPosition() {

package/js/src/m/History.js

@@ -14,7 +14,7 @@ class History {
         this.states = []; // all states, save as json diffs
 
         this._holdSaving = false; // if true, save() will have no effect
-        this.maxStates = 5; // to be changed accordingly
+        this.maxStates = 100; // to be changed accordingly
 
         this.current = -1;
         this.lastState = null;
@@ -49,6 +49,7 @@ class History {
         this.states = [];
         this.current = -1;
         this.origin = origin;
+        this.lastState = origin;
     }
 
     getState(n) {
@@ -63,26 +64,27 @@ class History {
         return this.getState(this.current);
     }
 
+    clone(o) {
+        return JSON.parse(JSON.stringify(o));
+    }
+
     save() {
         if (!this._holdSaving) {
-            console.time('state saved');
-            var previousState = this.lastState ? this.lastState : this.origin;
-            var diff = patcher.diff(this.lastState, this.m.data);
-            this.lastState = _.cloneDeep(this.m.data);
-            this.pushState(diff);
-            this.current++;
-            console.timeEnd("state saved");
-            return _.cloneDeep(diff);
+            var currentAppClone = this.clone(this.m.data);
+            var diff = patcher.diff(this.lastState, currentAppClone);
+            if (diff) {
+                this.lastState = currentAppClone;
+                this.pushState(diff);
+                this.current++;
+                return this.clone(diff);
+            }
         }
     }
 
     undo() {
         if (this.current >= 0) {
-            console.time('undo');
             patcher.unpatch(this.lastState, this.states[this.current]);
-            this.m.data = _.cloneDeep(this.lastState);
-            //this.setState(this.current);
-            console.timeEnd('undo');
+            this.m.data = this.clone(this.lastState);
         }
 
         if (this.current >= 0) {
@@ -96,10 +98,8 @@ class History {
         }
 
         if (this.current >= 0) {
-            console.time('redo');
             patcher.patch(this.lastState, this.states[this.current]);
-            this.m.data = _.cloneDeep(this.lastState);
-            console.timeEnd('undo');
+            this.m.data = this.clone(this.lastState);
         }
     }
 

package/js/src/m/Merger.js

@@ -63,11 +63,11 @@ class Merger {
             this._bindOutputs();
 
             // 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.getCurrentMetanode().metanodes = this.m.getCurrentMetanode().metanodes || {};
+            this.m.getCurrentMetanode().metanodes[metaboxName] = this.def;
 
             // 6. Create a new node from this def
-            this.m.data.app.modules[this.id] = {
+            this.m.getCurrentMetanode().modules[this.id] = {
                 "module": metaboxName,
                 "version": "*",
                 "graph": {
@@ -254,13 +254,13 @@ class Merger {
             }
 
             // move the node module definition (preserving the links between metabox's node)
-            this.def.modules[node.id] = this.m.data.app.modules[node.id];
-            delete this.m.data.app.modules[node.id];
+            this.def.modules[node.id] = this.m.getCurrentMetanode().modules[node.id];
+            delete this.m.getCurrentMetanode().modules[node.id];
 
             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)) {
-                    delete this.m.data.app.metanodes[node.def.module];
+                    delete this.m.getCurrentMetanode().metanodes[node.def.module];
                 }
             }
         });

package/package.json

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