diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 187d9ecc1..b330c2429 100644 --- a/src/canvas/view/CanvasView.js +++ b/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; - var fdoc = this.frame.el.contentDocument; + const doc = document; + 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)); }); } }, diff --git a/src/commands/index.js b/src/commands/index.js index 374d4f398..d7616ff0a 100644 --- a/src/commands/index.js +++ b/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.editor.set('selectedComponent', null); + ed.trigger('change:canvasOffset'); + //ed.refresh();//change:canvasOffset }, }; diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 2b43a23b1..e5409475b 100644 --- a/src/commands/view/SelectComponent.js +++ b/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); diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 0f0ecd113..939a66307 100644 --- a/src/editor/model/Editor.js +++ b/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');