Fix SelectComponent resizer with custom options. Closes #5630

src/commands/view/SelectComponent.ts

@@ -388,6 +388,13 @@ export default {
     if (model && resizable) {
       canvas.addSpot({ type: spotTypeResize, component: model });
       const el = isElement(elem) ? elem : model.getEl();
+      const {
+        onStart = () => {},
+        onMove = () => {},
+        onEnd = () => {},
+        updateTarget = () => {},
+        ...resizableOpts
+      } = isObject(resizable) ? resizable : {};
 
       if (hasCustomResize || !el) return;
 
@@ -408,10 +415,11 @@ export default {
 
       const options: ResizerOptions = {
         // Here the resizer is updated with the current element height and width
-        onStart(e: Event, opts: any = {}) {
+        onStart(ev, opts) {
+          onStart(ev, opts);
           const { el, config, resizer } = opts;
           const { keyHeight, keyWidth, currentUnit, keepAutoHeight, keepAutoWidth } = config;
-          toggleBodyClass('add', e, opts);
+          toggleBodyClass('add', ev, opts);
           modelToStyle = em.Styles.getModelToStyle(model);
           canvas.toggleFramesEvents(false);
           const computedStyle = getComputedStyle(el);
@@ -429,8 +437,8 @@ export default {
             currentHeight = computedStyle[keyHeight];
           }
 
-          resizer.startDim.w = parseFloat(currentWidth);
-          resizer.startDim.h = parseFloat(currentHeight);
+          resizer.startDim!.w = parseFloat(currentWidth);
+          resizer.startDim!.h = parseFloat(currentHeight);
           showOffsets = false;
 
           if (currentUnit) {
@@ -440,36 +448,39 @@ export default {
         },
 
         // Update all positioned elements (eg. component toolbar)
-        onMove() {
+        onMove(ev) {
+          onMove(ev);
           editor.trigger('component:resize');
         },
 
-        onEnd(e: Event, opts: any) {
-          toggleBodyClass('remove', e, opts);
+        onEnd(ev, opts) {
+          onEnd(ev, opts);
+          toggleBodyClass('remove', ev, opts);
           editor.trigger('component:resize');
           canvas.toggleFramesEvents(true);
           showOffsets = true;
         },
 
-        updateTarget(el: any, rect: any, options: any = {}) {
+        updateTarget(el, rect, options) {
+          updateTarget(el, rect, options);
           if (!modelToStyle) {
             return;
           }
 
           const { store, selectedHandler, config } = options;
           const { keyHeight, keyWidth, autoHeight, autoWidth, unitWidth, unitHeight } = config;
-          const onlyHeight = ['tc', 'bc'].indexOf(selectedHandler) >= 0;
-          const onlyWidth = ['cl', 'cr'].indexOf(selectedHandler) >= 0;
+          const onlyHeight = ['tc', 'bc'].indexOf(selectedHandler!) >= 0;
+          const onlyWidth = ['cl', 'cr'].indexOf(selectedHandler!) >= 0;
           const style: any = {};
 
           if (!onlyHeight) {
             const bodyw = canvas.getBody().offsetWidth;
             const width = rect.w < bodyw ? rect.w : bodyw;
-            style[keyWidth] = autoWidth ? 'auto' : `${width}${unitWidth}`;
+            style[keyWidth!] = autoWidth ? 'auto' : `${width}${unitWidth}`;
           }
 
           if (!onlyWidth) {
-            style[keyHeight] = autoHeight ? 'auto' : `${rect.h}${unitHeight}`;
+            style[keyHeight!] = autoHeight ? 'auto' : `${rect.h}${unitHeight}`;
           }
 
           if (em.getDragMode(model)) {
@@ -485,7 +496,7 @@ export default {
           modelToStyle.addStyle(finalStyle, { avoidStore: !store });
           em.Styles.__emitCmpStyleUpdate(finalStyle, { components: em.getSelected() });
         },
-        ...(isObject(resizable) ? resizable : {}),
+        ...resizableOpts,
       };
 
       this.resizer = editor.runCommand('resize', { el, options, force: 1 });

src/utils/Resizer.ts

@@ -25,6 +25,19 @@ type CallbackOptions = {
   resizer: Resizer;
 };
 
+interface ResizerUpdateTargetOptions {
+  store: boolean;
+  selectedHandler?: string;
+  resizer: Resizer;
+  config: ResizerOptions;
+}
+
+interface ResizerOnUpdateContainerOptions {
+  el: HTMLElement;
+  resizer: Resizer;
+  opts: ResizerOptions;
+}
+
 export interface ResizerOptions {
   /**
    * Function which returns custom X and Y coordinates of the mouse.
@@ -34,12 +47,12 @@ export interface ResizerOptions {
   /**
    * Indicates custom target updating strategy.
    */
-  updateTarget?: (el: HTMLElement, rect: RectDim, opts: any) => void;
+  updateTarget?: (el: HTMLElement, rect: RectDim, opts: ResizerUpdateTargetOptions) => void;
 
   /**
    * Function which gets HTMLElement as an arg and returns it relative position
    */
-  posFetcher?: (el: HTMLElement, opts: any) => BoundingRect;
+  posFetcher?: (el: HTMLElement, opts: ElementPosOpts) => BoundingRect;
 
   /**
    * Indicate if the resizer should keep the default ratio.
@@ -65,7 +78,7 @@ export interface ResizerOptions {
   /**
    * On container update callback.
    */
-  onUpdateContainer?: (opts: any) => void;
+  onUpdateContainer?: (opts: ResizerOnUpdateContainerOptions) => void;
 
   /**
    * Resize unit step.