diff --git a/packages/core/src/canvas/model/Canvas.ts b/packages/core/src/canvas/model/Canvas.ts index 6e67e8866..7c539f6de 100644 --- a/packages/core/src/canvas/model/Canvas.ts +++ b/packages/core/src/canvas/model/Canvas.ts @@ -4,6 +4,7 @@ import { Coordinates, CoordinatesTypes, DEFAULT_COORDS } from '../../common'; import { evUpdate as evDeviceUpdate } from '../../device_manager'; import Page from '../../pages/model/Page'; import PagesEvents from '../../pages/types'; +import Frame from './Frame'; import Frames from './Frames'; export default class Canvas extends ModuleModel { @@ -56,14 +57,14 @@ export default class Canvas extends ModuleModel { this.updateDevice({ frame: page.getMainFrame() }); } - updateDevice(opts: any = {}) { + updateDevice(opts: { frame?: Frame } = {}) { const { em } = this; const device = em.getDeviceModel(); - const model = opts.frame || em.getCurrentFrameModel(); + const frame = opts.frame || em.getCurrentFrameModel(); - if (model && device) { - const { width, height } = device.attributes; - model.set({ width, height }, { noUndo: 1 }); + if (frame && device) { + const { width, height, minHeight } = device.attributes; + frame.set({ width, height, minHeight }, { noUndo: 1 }); } } diff --git a/packages/core/src/canvas/view/CanvasView.ts b/packages/core/src/canvas/view/CanvasView.ts index f8a3b86da..dc0e0ce63 100644 --- a/packages/core/src/canvas/view/CanvasView.ts +++ b/packages/core/src/canvas/view/CanvasView.ts @@ -84,7 +84,7 @@ export default class CanvasView extends ModuleView { frames!: FramesView; frame?: FrameView; - private timerZoom?: number; + private timerZoom?: NodeJS.Timeout; private frmOff?: { top: number; left: number; width: number; height: number }; private cvsOff?: { top: number; left: number; width: number; height: number }; @@ -135,6 +135,7 @@ export default class CanvasView extends ModuleView { } remove(...args: any) { + clearTimeout(this.timerZoom); this.frames?.remove(); //@ts-ignore this.frames = undefined; @@ -242,12 +243,12 @@ export default class CanvasView extends ModuleView { this.clearOff(); toolsWrpEl.style.display = 'none'; em.trigger('canvas:update', ev); - this.timerZoom && clearTimeout(this.timerZoom); + clearTimeout(this.timerZoom); this.timerZoom = setTimeout(() => { em.stopDefault(defOpts); em.runDefault(defOpts); toolsWrpEl.style.display = ''; - }, 300) as any; + }, 300); } updateFramesArea() { @@ -270,6 +271,7 @@ export default class CanvasView extends ModuleView { fitViewport(opts: FitViewportOptions = {}) { const { em, module, model } = this; + this.clearOff(); const canvasRect = this.getCanvasOffset(); const { el } = opts; const elFrame = el && getComponentView(el)?.frameView; diff --git a/packages/core/src/canvas/view/FrameWrapView.ts b/packages/core/src/canvas/view/FrameWrapView.ts index 670a6b31b..e825e0121 100644 --- a/packages/core/src/canvas/view/FrameWrapView.ts +++ b/packages/core/src/canvas/view/FrameWrapView.ts @@ -76,6 +76,7 @@ export default class FrameWrapView extends ModuleView { } remove(opts?: any) { + this.sizeObserver?.disconnect(); this.__clear(opts); ModuleView.prototype.remove.apply(this, opts); //@ts-ignore @@ -161,26 +162,23 @@ export default class FrameWrapView extends ModuleView { const newWidth = isNumber(newW) ? `${newW}${un}` : newW; const newHeight = isNumber(newH) ? `${newH}${un}` : newH; style.width = newWidth; + this.sizeObserver?.disconnect(); if (model.hasAutoHeight()) { const iframe = this.frame.el; + const { contentDocument } = iframe; - if ( - iframe.contentDocument - // this doesn't work always - // && !this.sizeObserver - ) { - const { contentDocument } = iframe; + if (contentDocument) { const observer = new ResizeObserver(() => { - style.height = `${contentDocument.body.scrollHeight}px`; + const minHeight = parseFloat(model.get('minHeight')) || 0; + const heightResult = Math.max(contentDocument.body.scrollHeight, minHeight); + style.height = `${heightResult}px`; }); observer.observe(contentDocument.body); - this.sizeObserver?.disconnect(); this.sizeObserver = observer; } } else { style.height = newHeight; - this.sizeObserver?.disconnect(); delete this.sizeObserver; } diff --git a/packages/core/src/commands/view/SelectComponent.ts b/packages/core/src/commands/view/SelectComponent.ts index cfafd661c..0c4b29285 100644 --- a/packages/core/src/commands/view/SelectComponent.ts +++ b/packages/core/src/commands/view/SelectComponent.ts @@ -800,6 +800,7 @@ export default { this.stopSelectComponent(); !opts.preserveSelected && em.setSelected(); this.toggleToolsEl(); + this.updateAttached.cancel(); editor && editor.stopCommand('resize'); }, } as CommandObject; diff --git a/packages/core/src/device_manager/model/Device.ts b/packages/core/src/device_manager/model/Device.ts index 83fcabe37..81e64adcc 100644 --- a/packages/core/src/device_manager/model/Device.ts +++ b/packages/core/src/device_manager/model/Device.ts @@ -18,6 +18,11 @@ export interface DeviceProperties { * @example '600px' */ height?: string; + /** + * Min height to set for the editor iframe. + * @example '600px' + */ + minHeight?: string; /** * The width which will be used in media queries, if empty the `width` will be used. * @example '900px' diff --git a/packages/core/src/editor/model/Editor.ts b/packages/core/src/editor/model/Editor.ts index 1c9918a60..077474478 100644 --- a/packages/core/src/editor/model/Editor.ts +++ b/packages/core/src/editor/model/Editor.ts @@ -110,9 +110,9 @@ export default class EditorModel extends Model { device: '', }; } - Model = Model; Collection = Collection; + events = EditorEvents; __skip = false; defaultRunning = false; destroyed = false; @@ -907,10 +907,10 @@ export default class EditorModel extends Model { * @private */ runDefault(opts = {}) { - const command = this.get('Commands').get(this.config.defaultCommand); + const command = this.Commands.get(this.config.defaultCommand!); if (!command || this.defaultRunning) return; - command.stop(this, this, opts); - command.run(this, this, opts); + command.stop!(this as any, this, opts); + command.run!(this as any, this, opts); this.defaultRunning = true; } @@ -920,11 +920,11 @@ export default class EditorModel extends Model { * @private */ stopDefault(opts = {}) { - const commands = this.get('Commands'); + const commands = this.Commands; if (!commands) return; - const command = commands.get(this.config.defaultCommand); + const command = commands.get(this.config.defaultCommand!); if (!command || !this.defaultRunning) return; - command.stop(this, this, opts); + command.stop!(this as any, this, opts); this.defaultRunning = false; } diff --git a/packages/core/src/pages/index.ts b/packages/core/src/pages/index.ts index 910c44ec1..ebb13495e 100644 --- a/packages/core/src/pages/index.ts +++ b/packages/core/src/pages/index.ts @@ -161,33 +161,37 @@ export default class PageManager extends ItemManagerModule= this.pages.length) { - this.em.logError('Index out of bounds'); - } + const currIndex = pages.indexOf(pg); + const sameIndex = currIndex === at; + + if (at < 0 || at >= pages.length || sameIndex) return; - this.remove(page, { temporary: true }); - this.pages.add(page, { at: index }); + this.remove(pg, { ...resOpts, temporary: true }); + pages.add(pg, { ...resOpts, at }); - return page; + return pg; } /**