@dualbox/editor 1.0.72 → 1.0.73

package/js/src/c/GraphController.js

@@ -23,46 +23,54 @@ class GraphController {
     }
 
     registerNodeToInterface(id) {
-        var n = this.m.getNode(id);
-        if (n.isWidget()) {
-            var options = {};
-            var registerTargets = n.m.getSpecialUINodes(n.getRegisterType());
-            _.each(registerTargets, (n) => options[n.graphId] = n.graphId);
-
-            swal({
-                title: 'Select a registration target',
-                text: 'You just added a Widget node. It must be registered to an element of type ' + n.getRegisterType() +
-                    " to work. Please choose one on the following list.",
-                input: 'select',
-                inputOptions: options
-            }).then((result) => {
-                if (result.value) {
-                    // register the widget
-                    this.registerWidget(n.id, result.value);
-
-                    // find the panel of the target and put the widget on the same panel
-                    var panel = this.m.getNode(result.value).getPanel();
-                    this.m.addNodeToPanel(n.id, panel);
-
-                    this.v.repaint();
-                }
-            });
-        } else {
-            var options = {};
-            _.each(this.m.getPanels(), (name) => options[name] = name);
-
-            swal({
-                title: 'Select a panel',
-                text: 'You just added an UI. Please select in which panel of the app we should locate it.',
-                input: 'select',
-                inputOptions: options
-            }).then((result) => {
-                if (result.value) {
-                    this.m.addNodeToPanel(id, result.value);
-                    this.v.repaint();
-                }
-            });
-        }
+        return new Promise((resolve, reject) => {
+            var n = this.m.getNode(id);
+            if (n.isWidget()) {
+                var options = {};
+                var registerTargets = n.m.getSpecialUINodes(n.getRegisterType());
+                _.each(registerTargets, (n) => options[n.graphId] = n.graphId);
+
+                swal({
+                    title: 'Select a registration target',
+                    text: 'You just added a Widget node. It must be registered to an element of type ' + n.getRegisterType() +
+                        " to work. Please choose one on the following list.",
+                    input: 'select',
+                    inputOptions: options
+                }).then(async (result) => {
+                    if (result.value) {
+                        // register the widget
+                        this.registerWidget(n.id, result.value);
+
+                        // find the panel of the target and put the widget on the same panel
+                        var panel = this.m.getNode(result.value).getPanel();
+                        this.m.addNodeToPanel(n.id, panel);
+
+                        await this.v.repaint();
+                        resolve();
+                    } else {
+                        reject("No registration target selected");
+                    }
+                });
+            } else {
+                var options = {};
+                _.each(this.m.getPanels(), (name) => options[name] = name);
+
+                swal({
+                    title: 'Select a panel',
+                    text: 'You just added an UI. Please select in which panel of the app we should locate it.',
+                    input: 'select',
+                    inputOptions: options
+                }).then(async (result) => {
+                    if (result.value) {
+                        this.m.addNodeToPanel(id, result.value);
+                        await this.v.repaint();
+                        resolve();
+                    } else {
+                        reject("no panel selected");
+                    }
+                });
+            }
+        });
     }
 
     // Add a node from the search results
@@ -80,32 +88,25 @@ class GraphController {
             var pkg = this.e.packages[packageName];
             if (pkg) {
                 // first, add node in the model
-                // 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);
+                // batch it so add node + set position + register to UI is 1 history change only
+                this.m.batch(async () => {
+                    var nodeInfo = this.m.addNode(id, pkg);
+                    if (nodeInfo) {
+                        if (pos) {
+                            var node = this.m.getNode(nodeInfo.id);
+                            node.setPosition(pos);
+                        }
+
+                        // if the node is an UI, we also need to add it to a panel
+                        var n = this.m.getNode(id);
+                        if (n.isUI()) {
+                            await this.registerNodeToInterface(id);
+                        }
                     }
                 });
 
-                if (nodeInfo) {
-                    if (pos) {
-                        var node = this.m.getNode(nodeInfo.id);
-                        node.setPosition(pos);
-                    }
-
-                    // if model accepts the operation, add it to the view
-                    //this.v.addNode(id, pkg);
-                    this.v.repaint();
-
-                    // if the node is an UI, we also need to add it to a panel
-                    var n = this.m.getNode(id);
-                    if (n.isUI()) {
-                        this.registerNodeToInterface(id);
-                    }
-                }
+                // repaint
+                await this.v.repaint();
             } else {
                 console.error('Package ' + packageName + ' not found');
             }
@@ -280,11 +281,9 @@ class GraphController {
     setEventProperty(id, index, prop, val) {
         if (id.startsWith("#application-events-in")) {
             var eventName = id.split('-')[id.split('-').length - 1];
-            var def = this.m.getCurrentApp().getEventIn(eventName)[index];
-            def[prop] = val;
+            this.m.getCurrentApp().setEventIn(eventName, index, prop, val);
         } else if (id.startsWith("#application-events-out")) {
-            var def = this.m.getCurrentApp().getEventOut();
-            def[prop] = val;
+            this.m.getCurrentApp().setEventOut(eventName, prop, val);
         } else {
             var def = this.m.getNode(id).getEvent(index);
             def[prop] = val;

package/js/src/m/GraphModel.js

@@ -42,13 +42,14 @@ class GraphModel {
             windows: null
         };
         this.data.app = null;
-        this.data.windows = [
+        this.defaultWindows = [
             [this.e.rootAppName, null]
         ];
+        this.data.windows = _.clone(this.defaultWindows);
 
         // 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.root));
+        this.history.setOrigin(_.cloneDeep(this.data.root), _.clone(this.defaultWindows));
 
         this.inputPrefix = "in-";
         this.outputPrefix = "out-";
@@ -72,7 +73,7 @@ class GraphModel {
 
         await this.addNativeTypes();
 
-        this.history.setOrigin(_.cloneDeep(this.data.root));
+        this.history.setOrigin(_.cloneDeep(this.data.root), _.clone(this.defaultWindows));
     }
 
     addNativeTypes() {
@@ -177,7 +178,6 @@ class GraphModel {
     getCleanJson() {
         var json = _.cloneDeep(this.data.root);
         var parser = new AppParser(json);
-        console.log('Getting clean json');
         parser.eachNode((json, id) => {
             delete json.snapshot;
         });
@@ -213,10 +213,23 @@ class GraphModel {
         }
     }
 
+    // batch all changes in a function into one (for history save)
+    // if cb returns a Promise, return a Promise that will be resolved once it's all done
     batch(cb) {
-        var diff = this.history.batch(cb);
-        if (this.onChangeCb) {
-            this.onChangeCb(diff);
+        var ret = this.history.batch(cb);
+        if (ret && ret.then) {
+            // it's a promise, wait for it
+            return Promise.resolve(ret).then((diff) => {
+                if (this.onChangeCb) {
+                    this.onChangeCb(diff);
+                }
+            });
+        } else {
+            // not a promise, ret is our diff
+            let diff = ret;
+            if (this.onChangeCb) {
+                this.onChangeCb(diff);
+            }
         }
     }
 
@@ -2394,11 +2407,23 @@ class Application {
     }
 
     getEventIn(name) {
-        return idx(this.json, o => o.events[name].in);
+        return _.get(this.json, ["events", name, "in"]);
     }
 
     getEventOut(name) {
-        return idx(this.json, o => o.events[name].out);
+        return _.get(this.json, ["events", name, "out"]);
+    }
+
+    setEventIn(appEventName, index, prop, val) {
+        var def = this.m.getCurrentApp().getEventIn(appEventName)[index];
+        def[prop] = val;
+        this.m.save();
+    }
+
+    setEventOut(appEventName, prop, val) {
+        var def = this.m.getCurrentApp().getEventOut(appEventName);
+        def[prop] = val;
+        this.m.save();
     }
 
     removeAppEvent(name) {

package/js/src/m/History.js

@@ -67,11 +67,11 @@ class History {
         }
     }
 
-    setOrigin(origin) {
+    setOrigin(origin, windows) {
         this.states = [];
         this.current = -1;
         this.origin = origin;
-        this.lastState = origin;
+        this.lastState = { root: origin, app: null, windows: windows || null };
     }
 
     getState(n) {
@@ -100,6 +100,7 @@ class History {
                 this.lastState = currentAppClone;
                 this.pushState(diff);
                 this.current++;
+                console.log("SAVED");
                 return {
                     diff: this.clone(diff),
                     hash: previousHash
@@ -140,14 +141,30 @@ class History {
 
     // execute the callback and save the history as 1 change
     batch(cb) {
-        this.ignore(cb);
-        return this.save();
+        let ret = this.ignore(cb);
+        if (ret && ret.then) {
+            // its a promise
+            return Promise.resolve(ret).then(() => {
+                return this.save();
+            });
+        } else {
+            return this.save();
+        }
     }
 
+    // ignore history saves during the time of the callback
+    // if cb return a promise, wait until it's resolved and return a Promise
     ignore(cb) {
         this.holdSaving(true);
-        cb();
-        this.holdSaving(false);
+        let ret = cb();
+        if (ret && ret.then) {
+            // its a promise
+            return Promise.resolve(ret).then(() => {
+                this.holdSaving(false);
+            });
+        } else {
+            this.holdSaving(false);
+        }
     }
 }
 

package/js/src/v/GraphView.js

@@ -147,6 +147,10 @@ class GraphView {
         await this.hideCanvas();
         await this.setNavigation();
 
+        // update the html and css editor
+        this.mainVue.htmlCode.refresh();
+        this.mainVue.cssCode.refresh();
+
         // first deactivate the zoom
         await this.zoomer.deactivate();
 

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

@@ -244,7 +244,7 @@ i.fa, i.fas, i.far {
                                         </template>
                                         <tr>
                                             <td colspan="5" style="padding-top: 0px; padding-bottom: 0px;">
-                                                <button class="btn btn-sm btn-add-subevent" style="width: 100%;" @click="addSubEvent(key)">Add a subevent</button>
+                                                <button class="btn btn-secondary btn-sm btn-add-subevent" style="width: 100%;" @click="addSubEvent(key)">Add a subevent</button>
                                             </td>
                                         </tr>
                                     </tbody>

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

@@ -174,8 +174,7 @@
                     <button class="btn btn-primary btn-save-node-name-change" :data-id="n.graphId" style="display: inline-block;" @click="saveNodeName">Save</button>
                 </div>
                 <div v-else class="dualbox-node-name">
-                    <button class="btn btn-light btn-sm btn-edit-dualbox-node-name" @click="editNodeName"><i class="fa fa-edit"></i></button>
-                    <span class="dualbox-node-name-span text-truncate d-inline-block">{{n.graphId}}</span>
+                    <span class="dualbox-node-name-span text-truncate d-inline-block" @click="editNodeName">{{n.graphId}}</span>
                 </div>
             </h2>
             <p style="margin-bottom: 0"><small class="edit-dualbox-node-package-name">{{n.getPackageName()}}</small></p>
@@ -494,7 +493,7 @@
                                 </template>
                                 <tr>
                                     <td colspan="5" style="padding-top: 0px; padding-bottom: 0px;">
-                                        <button class="btn btn-sm" :data-id="n.id" style="width: 100%;" @click="addEvent">Add event</button>
+                                        <button class="btn btn-secondary btn-sm" :data-id="n.id" style="width: 100%;" @click="addEvent">Add event</button>
                                     </td>
                                 </tr>
                             </tbody>
@@ -762,6 +761,8 @@ export default {
         },
 
         editNodeName: function(e) {
+            e.preventDefault();
+            e.stopPropagation();
             this.nowEditingNodeName = true;
         },