diff --git a/packages/core/src/canvas/model/CanvasSpots.ts b/packages/core/src/canvas/model/CanvasSpots.ts index 4838640b1..165657988 100644 --- a/packages/core/src/canvas/model/CanvasSpots.ts +++ b/packages/core/src/canvas/model/CanvasSpots.ts @@ -17,7 +17,7 @@ export default class CanvasSpots extends ModuleCollection { const { em } = this; this.refreshDbn = debounce(() => this.refresh(), 0); - const evToRefreshDbn = `component:resize styleable:change component:input ${ComponentsEvents.update} frame:updated undo redo`; + const evToRefreshDbn = `${ComponentsEvents.resize} styleable:change component:input ${ComponentsEvents.update} frame:updated undo redo`; this.listenTo(em, evToRefreshDbn, () => this.refreshDbn()); } diff --git a/packages/core/src/commands/view/SelectComponent.ts b/packages/core/src/commands/view/SelectComponent.ts index 608097350..6253d0f0f 100644 --- a/packages/core/src/commands/view/SelectComponent.ts +++ b/packages/core/src/commands/view/SelectComponent.ts @@ -96,7 +96,7 @@ export default { methods[method](listenToEl, 'scroll', this.onContainerChange); em[method](`component:toggled ${eventCmpUpdate} undo redo`, this.onSelect, this); em[method]('change:componentHovered', this.onHovered, this); - em[method]('component:resize styleable:change component:input', this.updateGlobalPos, this); + em[method](`${ComponentsEvents.resize} styleable:change component:input`, this.updateGlobalPos, this); em[method](`${eventCmpUpdate}:toolbar`, this._upToolbar, this); em[method]('frame:updated', this.onFrameUpdated, this); em[method]('canvas:updateTools', this.onFrameUpdated, this); @@ -400,8 +400,16 @@ export default { const spotTypeResize = CanvasSpotBuiltInTypes.Resize; const hasCustomResize = canvas.hasCustomSpot(spotTypeResize); canvas.removeSpots({ type: spotTypeResize }); + const initEventOpts = { + component: model, + hasCustomResize, + resizable, + }; + + model && em.trigger(ComponentsEvents.resizeInit, initEventOpts); + const resizableResult = initEventOpts.resizable; - if (model && resizable) { + if (model && resizableResult) { canvas.addSpot({ type: spotTypeResize, component: model }); const el = isElement(elem) ? elem : model.getEl(); const { @@ -410,7 +418,7 @@ export default { onEnd = () => {}, updateTarget = () => {}, ...resizableOpts - } = isObject(resizable) ? resizable : {}; + } = isObject(resizableResult) ? resizableResult : {}; if (hasCustomResize || !el || this.activeResizer) return; @@ -466,19 +474,19 @@ export default { config.unitWidth = getUnitFromValue(currentWidth); } self.activeResizer = true; - editor.trigger('component:resize', { ...resizeEventOpts, type: 'start' }); + editor.trigger(ComponentsEvents.resize, { ...resizeEventOpts, type: 'start' }); }, // Update all positioned elements (eg. component toolbar) onMove(ev) { onMove(ev); - editor.trigger('component:resize', { ...resizeEventOpts, type: 'move' }); + editor.trigger(ComponentsEvents.resize, { ...resizeEventOpts, type: 'move' }); }, onEnd(ev, opts) { onEnd(ev, opts); toggleBodyClass('remove', ev, opts); - editor.trigger('component:resize', { ...resizeEventOpts, type: 'end' }); + editor.trigger(ComponentsEvents.resize, { ...resizeEventOpts, type: 'end' }); showOffsets = true; self.activeResizer = false; }, diff --git a/packages/core/src/dom_components/types.ts b/packages/core/src/dom_components/types.ts index e3b87a563..188b7f9e7 100644 --- a/packages/core/src/dom_components/types.ts +++ b/packages/core/src/dom_components/types.ts @@ -83,6 +83,26 @@ export enum ComponentsEvents { */ render = 'component:render', + /** + * @event `component:resize` Component resized. This event is triggered when the component is resized in the canvas. + * @example + * editor.on('component:resize', ({ component, type }) => { + * // type can be 'start', 'move', or 'end' + * }); + */ + resize = 'component:resize', + + /** + * @event `component:resize:init` Component resize init. This event allows you to control the resizer options dinamically. + * @example + * editor.on('component:resize:init', (opts) => { + * if (opts.component.is('someType')) { + * opts.resizable = true; // Update resizable options + * } + * }); + */ + resizeInit = 'component:resize:init', + /** * @event `symbol:main:add` Added new main symbol. * @example