UP SelectComponent initResize

src/commands/view/Resize.ts

@@ -1,4 +1,4 @@
-import Resizer from '../../utils/Resizer';
+import Resizer, { ResizerOptions } from '../../utils/Resizer';
 import { CommandObject } from './CommandAbstract';
 
 export default {
@@ -6,7 +6,7 @@ export default {
     const opt = opts || {};
     const canvas = editor.Canvas;
     const canvasView = canvas.getCanvasView();
-    const options = {
+    const options: ResizerOptions = {
       appendTo: canvas.getResizerEl(),
       prefix: editor.getConfig().stylePrefix,
       posFetcher: canvasView.getElementPos.bind(canvasView),

src/commands/view/SelectComponent.ts

@@ -3,9 +3,10 @@ import Component from '../../dom_components/model/Component';
 import Toolbar from '../../dom_components/model/Toolbar';
 import ToolbarView from '../../dom_components/view/ToolbarView';
 import { isDoc, isTaggableNode, isVisible, off, on } from '../../utils/dom';
-import { getComponentModel, getComponentView, getUnitFromValue, getViewEl, hasWin } from '../../utils/mixins';
+import { getComponentModel, getComponentView, getUnitFromValue, getViewEl, hasWin, isObject } from '../../utils/mixins';
 import { CommandObject } from './CommandAbstract';
 import { CanvasSpotBuiltInTypes } from '../../canvas/model/CanvasSpot';
+import { ResizerOptions } from '../../utils/Resizer';
 
 let showOffsets: boolean;
 /**
@@ -377,28 +378,27 @@ export default {
    */
   initResize(elem: HTMLElement) {
     const { em, canvas } = this;
-    const editor = em?.Editor;
-    const config = em?.config;
+    const editor = em.Editor;
+    const config = em.config;
     const pfx = config.stylePrefix || '';
     const resizeClass = `${pfx}resizing`;
     const model = !isElement(elem) && isTaggableNode(elem) ? elem : em.getSelected();
-    const resizable = model && model.get('resizable');
-    let options = {};
+    const resizable = model?.get('resizable');
     let modelToStyle: any;
 
-    var toggleBodyClass = (method: string, e: any, opts: any) => {
-      const docs = opts.docs;
-      docs &&
-        docs.forEach((doc: Document) => {
-          const body = doc.body;
-          const cls = body.className || '';
-          body.className = (method == 'add' ? `${cls} ${resizeClass}` : cls.replace(resizeClass, '')).trim();
-        });
-    };
+    if (model && resizable) {
+      const toggleBodyClass = (method: string, e: any, opts: any) => {
+        const docs = opts.docs;
+        docs &&
+          docs.forEach((doc: Document) => {
+            const body = doc.body;
+            const cls = body.className || '';
+            body.className = (method == 'add' ? `${cls} ${resizeClass}` : cls.replace(resizeClass, '')).trim();
+          });
+      };
 
-    if (editor && resizable) {
       const el = isElement(elem) ? elem : model.getEl();
-      options = {
+      const options: ResizerOptions = {
         // Here the resizer is updated with the current element height and width
         onStart(e: Event, opts: any = {}) {
           const { el, config, resizer } = opts;
@@ -477,12 +477,9 @@ export default {
           modelToStyle.addStyle(finalStyle, { avoidStore: !store });
           em.Styles.__emitCmpStyleUpdate(finalStyle, { components: em.getSelected() });
         },
+        ...(isObject(resizable) ? resizable : {}),
       };
 
-      if (typeof resizable == 'object') {
-        options = { ...options, ...resizable, parent: options };
-      }
-
       this.resizer = editor.runCommand('resize', { el, options, force: 1 });
     } else {
       editor.stopCommand('resize');

src/utils/mixins.ts

@@ -3,6 +3,7 @@ import ComponentView from '../dom_components/view/ComponentView';
 import EditorModel from '../editor/model/Editor';
 import { isTextNode } from './dom';
 import Component from '../dom_components/model/Component';
+import { ObjectAny } from '../common';
 
 export const isDef = (value: any) => typeof value !== 'undefined';
 
@@ -60,8 +61,8 @@ const appendStyles = (styles: {}, opts: { unique?: boolean; prepand?: boolean }
  * shallowDiff(a, b);
  * // -> {baz: 2, faz: null, bar: ''};
  */
-const shallowDiff = (objOrig: Record<string, any>, objNew: Record<string, any>) => {
-  const result: Record<string, any> = {};
+const shallowDiff = (objOrig: ObjectAny, objNew: ObjectAny) => {
+  const result: ObjectAny = {};
   const keysNew = keys(objNew);
 
   for (let prop in objOrig) {
@@ -152,7 +153,7 @@ export const escapeNodeContent = (str = '') => {
   return `${str}`.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 };
 
-export const deepMerge = (...args: Record<string, any>[]) => {
+export const deepMerge = (...args: ObjectAny[]) => {
   const target = { ...args[0] };
 
   for (let i = 1; i < args.length; i++) {
@@ -188,8 +189,8 @@ const getModel = (el: any, $?: any) => {
   return model;
 };
 
-const isObject = (val: any): val is Object => val !== null && !Array.isArray(val) && typeof val === 'object';
-const isEmptyObj = (val: Record<string, any>) => Object.keys(val).length <= 0;
+const isObject = (val: any): val is ObjectAny => val && !Array.isArray(val) && typeof val === 'object';
+const isEmptyObj = (val: ObjectAny) => Object.keys(val).length <= 0;
 
 const capitalize = (str: string = '') => str && str.charAt(0).toUpperCase() + str.substring(1);
 const isRule = (obj: any) => obj && obj.toCSS;