Update canvas frame (#6414)

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<CanvasModule> {
@@ -56,14 +57,14 @@ export default class Canvas extends ModuleModel<CanvasModule> {
     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 });
     }
   }
 

packages/core/src/canvas/view/CanvasView.ts

@@ -84,7 +84,7 @@ export default class CanvasView extends ModuleView<Canvas> {
   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<Canvas> {
   }
 
   remove(...args: any) {
+    clearTimeout(this.timerZoom);
     this.frames?.remove();
     //@ts-ignore
     this.frames = undefined;
@@ -242,12 +243,12 @@ export default class CanvasView extends ModuleView<Canvas> {
     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<Canvas> {
 
   fitViewport(opts: FitViewportOptions = {}) {
     const { em, module, model } = this;
+    this.clearOff();
     const canvasRect = this.getCanvasOffset();
     const { el } = opts;
     const elFrame = el && getComponentView(el)?.frameView;

packages/core/src/canvas/view/FrameWrapView.ts

@@ -76,6 +76,7 @@ export default class FrameWrapView extends ModuleView<Frame> {
   }
 
   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<Frame> {
     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;
     }
 

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<any, { [k: string]: any }>;

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'

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

packages/core/src/pages/index.ts

@@ -161,33 +161,37 @@ export default class PageManager extends ItemManagerModule<PageManagerConfig, Pa
 
   /**
    * Move a page to a specific index in the pages collection.
-   * If the index is out of bounds, an error will be logged and the page will not be moved.
+   * If the index is out of bounds, the page will not be moved.
    *
-   * @param {string} pageId - The ID of the page to move.
-   * @param {number} index - The target index where the page should be moved.
-   * @returns {Page | undefined} - The moved page, or `undefined` if the page does not exist or the index is out of bounds.
+   * @param {string|[Page]} page Page or page id to move.
+   * @param {Object} [opts] Move options
+   * @param {number} [opts.at] The target index where the page should be moved.
+   * @returns {Page | undefined} The moved page, or `undefined` if the page does not exist or the index is out of bounds.
    * @example
    * // Move a page to index 2
-   * const movedPage = pageManager.move('page-id', 2);
+   * const movedPage = pageManager.move('page-id', { at: 2 });
    * if (movedPage) {
    *   console.log('Page moved successfully:', movedPage);
    * } else {
    *   console.log('Page could not be moved.');
    * }
    */
-  move(pageId: string, index: number): Page | undefined {
-    const page = this.get(pageId);
+  move(page: string | Page, opts: AddOptions = {}): Page | undefined {
+    const { pages } = this;
+    const pg = isString(page) ? this.get(page) : page;
+    const { at = 0, ...resOpts } = opts;
 
-    if (!page) return;
+    if (!pg) return;
 
-    if (index < 0 || index >= 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;
   }
 
   /**