From f9d135b70cc38da5b9d86dbc807d1c6c52371254 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sun, 22 Apr 2018 14:10:53 +0200 Subject: [PATCH 1/3] Fix resizer selection on blur --- src/commands/view/SelectComponent.js | 37 +++++++++++++++------------- src/editor/index.js | 1 + src/editor/model/Editor.js | 11 +++------ 3 files changed, 25 insertions(+), 24 deletions(-) diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 9ebe6b1dd..325364a13 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -1,4 +1,4 @@ -import { bindAll } from 'underscore'; +import { bindAll, isElement } from 'underscore'; import { on, off, getUnitFromValue } from 'utils/mixins'; const ToolbarView = require('dom_components/view/ToolbarView'); @@ -54,7 +54,7 @@ module.exports = { methods[method](body, 'click', this.onClick); methods[method](win, 'scroll resize', this.onFrameScroll); methods[method](win, 'keydown', this.onKeyPress); - em[method]('change:selectedComponent', this.onSelect, this); + em[method]('component:selected', this.onSelect, this); }, /** @@ -186,6 +186,7 @@ module.exports = { if (model) { if (model.get('selectable')) { editor.select(model); + this.initResize(model); } else { let parent = model.parent(); while (parent && !parent.get('selectable')) parent = parent.parent(); @@ -261,9 +262,8 @@ module.exports = { * @param {Object} el * @private * */ - onSelect() { + onSelect(model) { const editor = this.editor; - const model = this.em.getSelected(); this.updateToolbar(model); if (model) { @@ -279,20 +279,21 @@ module.exports = { /** * Init resizer on the element if possible - * @param {HTMLElement} el + * @param {HTMLElement|Component} elem * @private */ - initResize(el) { - var em = this.em; - var editor = em ? em.get('Editor') : ''; - var config = em ? em.get('Config') : ''; - var pfx = config.stylePrefix || ''; - var attrName = `data-${pfx}handler`; - var resizeClass = `${pfx}resizing`; - var model = em.get('selectedComponent'); - var resizable = model.get('resizable'); - var options = {}; - var modelToStyle; + initResize(elem) { + const em = this.em; + const editor = em ? em.get('Editor') : ''; + const config = em ? em.get('Config') : ''; + const pfx = config.stylePrefix || ''; + const attrName = `data-${pfx}handler`; + const resizeClass = `${pfx}resizing`; + const model = !isElement(elem) ? elem : em.getSelected(); + const resizable = model.get('resizable'); + const el = isElement(elem) ? elem : model.getEl(); + let options = {}; + let modelToStyle; var toggleBodyClass = (method, e, opts) => { const docs = opts.docs; @@ -376,11 +377,13 @@ module.exports = { if (typeof resizable == 'object') { options = { ...options, ...resizable }; } - + console.log('init resize'); editor.runCommand('resize', { el, options }); // On undo/redo the resizer rect is not updating, need somehow to call // this.updateRect on undo/redo action + } else { + editor.stopCommand('resize'); } }, diff --git a/src/editor/index.js b/src/editor/index.js index 2ed623729..cd3d5f42a 100644 --- a/src/editor/index.js +++ b/src/editor/index.js @@ -17,6 +17,7 @@ * * `component:styleUpdate` - Triggered when the style of the component is updated, the model is passed as an argument to the callback * * `component:styleUpdate:{propertyName}` - Listen for a specific style property change, the model is passed as an argument to the callback * * `component:selected` - New component selected, the selected model is passed as an argument to the callback + * * `component:deselected` - Component deselected, the deselected model is passed as an argument to the callback * ## Blocks * * `block:add` - New block added * * `block:remove` - Block removed diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 759c42f10..983f079ba 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -197,13 +197,10 @@ module.exports = Backbone.Model.extend({ * @param {Object} Options * @private * */ - componentSelected(model, val, options) { - if (!this.get('selectedComponent')) { - this.trigger('deselect-comp'); - } else { - this.trigger('select-comp', [model, val, options]); - this.trigger('component:selected', arguments); - } + componentSelected(editor, selected, options) { + const prev = this.previous('selectedComponent'); + prev && this.trigger('component:deselected', prev, options); + selected && this.trigger('component:selected', selected, options); }, /** From e5538bf0e84bae8f67ec1ad8933c046fcf8eed18 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sun, 22 Apr 2018 14:19:11 +0200 Subject: [PATCH 2/3] Update the selected event in SelectComponent --- src/commands/view/SelectComponent.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 325364a13..59c22af9b 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -54,7 +54,7 @@ module.exports = { methods[method](body, 'click', this.onClick); methods[method](win, 'scroll resize', this.onFrameScroll); methods[method](win, 'keydown', this.onKeyPress); - em[method]('component:selected', this.onSelect, this); + em[method]('change:selectedComponent', this.onSelect, this); }, /** @@ -262,7 +262,7 @@ module.exports = { * @param {Object} el * @private * */ - onSelect(model) { + onSelect(em, model) { const editor = this.editor; this.updateToolbar(model); @@ -377,7 +377,6 @@ module.exports = { if (typeof resizable == 'object') { options = { ...options, ...resizable }; } - console.log('init resize'); editor.runCommand('resize', { el, options }); // On undo/redo the resizer rect is not updating, need somehow to call From 9f0ed070eb1b0571b8f200b95c6cac4bd17cac0c Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sun, 22 Apr 2018 14:33:26 +0200 Subject: [PATCH 3/3] Ensure the resizer focus on selected component --- src/commands/view/Resize.js | 1 + src/commands/view/SelectComponent.js | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/commands/view/Resize.js b/src/commands/view/Resize.js index a35becd63..90d0e6752 100644 --- a/src/commands/view/Resize.js +++ b/src/commands/view/Resize.js @@ -19,6 +19,7 @@ module.exports = { } canvasResizer.setOptions(options); + canvasResizer.blur(); canvasResizer.focus(el); return canvasResizer; }, diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 59c22af9b..c58decf07 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -262,8 +262,10 @@ module.exports = { * @param {Object} el * @private * */ - onSelect(em, model) { - const editor = this.editor; + onSelect() { + // Get the selected model directly from the Editor as the event might + // be triggered manually without the model + const model = this.em.getSelected(); this.updateToolbar(model); if (model) { @@ -273,7 +275,7 @@ module.exports = { this.hideHighlighter(); this.initResize(el); } else { - editor.stopCommand('resize'); + this.editor.stopCommand('resize'); } },