diff --git a/src/commands/view/Resize.ts b/src/commands/view/Resize.ts index b533c8840..5df162e2d 100644 --- a/src/commands/view/Resize.ts +++ b/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), diff --git a/src/commands/view/SelectComponent.ts b/src/commands/view/SelectComponent.ts index acd8589d5..6e21f1c17 100644 --- a/src/commands/view/SelectComponent.ts +++ b/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'); diff --git a/src/utils/mixins.ts b/src/utils/mixins.ts index e6e0f835a..0b75b6bbf 100644 --- a/src/utils/mixins.ts +++ b/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, objNew: Record) => { - const result: Record = {}; +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, '&').replace(//g, '>'); }; -export const deepMerge = (...args: Record[]) => { +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) => 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;