Add resize init for dynamic configurations

packages/core/src/canvas/model/CanvasSpots.ts

@@ -17,7 +17,7 @@ export default class CanvasSpots extends ModuleCollection<CanvasSpot> {
     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());
   }
 

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;
         },

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