Update the KeyboardEvent propagation in canvas (fixes undo/redo issues)

src/canvas/view/CanvasView.js

@@ -179,13 +179,30 @@ module.exports = Backbone.View.extend({
 
       // When the iframe is focused the event dispatcher is not the same so
       // I need to delegate all events to the parent document
-      var doc = document;
+      const doc = document;
-      var fdoc = this.frame.el.contentDocument;
+      const fdoc = this.frame.el.contentDocument;
+
+      // Unfortunately just creating `KeyboardEvent(e.type, e)` is not enough,
+      // the keyCode/which will be always `0`. Even if it's an old/deprecated
+      // property keymaster (and many others) still use it... using `defineProperty`
+      // hack seems the only way
+      const createCustomEvent = (e) => {
+        var oEvent = new KeyboardEvent(e.type, e);
+        oEvent.keyCodeVal = e.keyCode;
+        ['keyCode', 'which'].forEach(prop => {
+          Object.defineProperty(oEvent, prop, {
+            get() {
+              return this.keyCodeVal;
+            }
+          });
+        });
+        return oEvent;
+      }
       fdoc.addEventListener('keydown', e => {
-        doc.dispatchEvent(new KeyboardEvent(e.type, e));
+        doc.dispatchEvent(createCustomEvent(e));
       });
       fdoc.addEventListener('keyup', e => {
-        doc.dispatchEvent(new KeyboardEvent(e.type, e));
+        doc.dispatchEvent(createCustomEvent(e));
       });
     }
   },

src/commands/index.js

@@ -114,10 +114,10 @@ module.exports = () => {
             return;
           }
 
-          sel.set('status', '');
+          ed.select(null);
           sel.destroy();
-          ed.trigger('component:update', sel);
+          ed.trigger('change:canvasOffset');
-          ed.editor.set('selectedComponent', null);
+          //ed.refresh();//change:canvasOffset
         },
       };
 

src/commands/view/SelectComponent.js

@@ -404,17 +404,24 @@ module.exports = {
   updateToolbar(mod) {
     var em = this.config.em;
     var model = mod == em ? em.get('selectedComponent') : mod;
-    if(!model){
+    var toolbarEl = this.canvas.getToolbarEl();
+    var toolbarStyle = toolbarEl.style;
+
+    if (!model) {
+      // By putting `toolbarStyle.display = 'none'` will cause kind
+      // of freezed effect with component selection (probably by iframe
+      // switching)
+      toolbarStyle.opacity = 0;
       return;
     }
+
     var toolbar = model.get('toolbar');
     var ppfx = this.ppfx;
     var showToolbar = em.get('Config').showToolbar;
-    var toolbarEl = this.canvas.getToolbarEl();
-    var toolbarStyle = toolbarEl.style;
 
     if (showToolbar && toolbar && toolbar.length) {
-      toolbarStyle.display = 'flex';
+      toolbarStyle.opacity = '';
+      toolbarStyle.display = '';
       if(!this.toolbar) {
         toolbarEl.innerHTML = '';
         this.toolbar = new Toolbar(toolbar);

src/editor/model/Editor.js

@@ -221,10 +221,12 @@ module.exports = Backbone.Model.extend({
       });
       this.UndoManager = this.um;
       this.set('UndoManager', this.um);
+
       key('⌘+z, ctrl+z', () => {
         that.um.undo(true);
         that.trigger('component:update');
       });
+
       key('⌘+shift+z, ctrl+shift+z', () => {
         that.um.redo(true);
         that.trigger('component:update');