Convert Page, Pages into ts

src/canvas/model/Frame.ts

@@ -1,5 +1,7 @@
 import { result, forEach, isEmpty, isString } from "underscore";
 import { Model } from "../../common";
+import { Component } from "../../dom_components/model/Component";
+import Components from "../../dom_components/model/Components";
 import EditorModel from "../../editor/model/Editor";
 import { isComponent, isObject } from "../../utils/mixins";
 import FrameView from "../view/FrameView";
@@ -95,7 +97,7 @@ export default class Frame extends Model {
     this.set("changesCount", this.get("changesCount") + 1);
   }
 
-  getComponent() {
+  getComponent(): typeof Components {
     return this.get("component");
   }
 

src/canvas/model/Frames.js

@@ -10,6 +10,7 @@ export default class Frames extends Collection {
     this.on('reset', this.onReset);
     this.on('remove', this.onRemove);
   }
+  page;
 
   onReset(m, opts = {}) {
     const prev = opts.previousModels || [];

src/pages/index.js

@@ -96,7 +96,7 @@ export default () => {
       const cnf = { ...opts };
       this.config = cnf;
       this.em = em;
-      const pages = new Pages([], cnf);
+      const pages = new Pages([]);
       this.pages = pages;
       this.all = pages;
       const model = new Model({ _undo: true });
@@ -121,7 +121,7 @@ export default () => {
     onLoad() {
       const { pages } = this;
       const opt = { silent: true };
-      pages.add(this.config.pages || [], opt);
+      pages.add(this.config.pages?.map(page => new Page(page, { em: this.em, config: this.config })) || [], opt);
       const mainPage = !pages.length ? this.add({ type: typeMain }, opt) : this.getMain();
       this.select(mainPage, opt);
     },
@@ -158,7 +158,7 @@ export default () => {
       const { em } = this;
       props.id = props.id || this._createId();
       const add = () => {
-        const page = this.pages.add(props, opts);
+        const page = this.pages.add(new Page(props, { em: this.em, config: this.config }), opts);
         opts.select && this.select(page);
         return page;
       };

src/pages/model/Page.js → src/pages/model/Page.ts

@@ -1,6 +1,8 @@
-import { result, forEach } from 'underscore';
-import { Model } from '../../common';
-import Frames from '../../canvas/model/Frames';
+import { result, forEach } from "underscore";
+import { Model } from "../../common";
+import Frames from "../../canvas/model/Frames";
+import Frame from "../../canvas/model/Frame";
+import EditorModel from "../../editor/model/Editor";
 
 export default class Page extends Model {
   defaults() {
@@ -9,31 +11,33 @@ export default class Page extends Model {
       _undo: true,
     };
   }
+  em: EditorModel;
 
-  initialize(props, opts = {}) {
+  constructor(props: any, opts: any = {}) {
+    super(props, opts);
     const { config = {} } = opts;
-    const { em } = config;
-    const defFrame = {};
+    const { em } = opts;
+    const defFrame: any = {};
     this.em = em;
     if (!props.frames) {
       defFrame.component = props.component;
       defFrame.styles = props.styles;
-      ['component', 'styles'].map(i => this.unset(i));
+      ["component", "styles"].map((i) => this.unset(i));
     }
     const frms = props.frames || [defFrame];
     const frames = new Frames(frms, config);
     frames.page = this;
-    this.set('frames', frames);
-    const um = em && em.get('UndoManager');
+    this.set("frames", frames);
+    const um = em && em.get("UndoManager");
     um && um.add(frames);
   }
 
   onRemove() {
-    this.get('frames').reset();
+    this.get("frames").reset();
   }
 
-  getFrames() {
-    return this.get('frames');
+  getFrames(): Frames {
+    return this.get("frames");
   }
 
   /**
@@ -48,8 +52,8 @@ export default class Page extends Model {
    * Get page name
    * @returns {String}
    */
-  getName() {
-    return this.get('name');
+  getName(): string {
+    return this.get("name");
   }
 
   /**
@@ -58,8 +62,8 @@ export default class Page extends Model {
    * @example
    * page.setName('New name');
    */
-  setName(name) {
-    return this.get({ name });
+  setName(name: string) {
+    return this.set({ name });
   }
 
   /**
@@ -68,7 +72,8 @@ export default class Page extends Model {
    * @example
    * const arrayOfFrames = page.getAllFrames();
    */
-  getAllFrames() {
+  getAllFrames(): Frame[] {
+    //@ts-ignore
     return this.getFrames().models || [];
   }
 
@@ -78,7 +83,8 @@ export default class Page extends Model {
    * @example
    * const mainFrame = page.getMainFrame();
    */
-  getMainFrame() {
+  getMainFrame(): Frame {
+    //@ts-ignore
     return this.getFrames().at(0);
   }
 
@@ -91,16 +97,16 @@ export default class Page extends Model {
    */
   getMainComponent() {
     const frame = this.getMainFrame();
-    return frame && frame.getComponent();
+    return frame?.getComponent();
   }
 
   toJSON(opts = {}) {
     const obj = Model.prototype.toJSON.call(this, opts);
-    const defaults = result(this, 'defaults');
+    const defaults = result(this, "defaults");
 
     // Remove private keys
     forEach(obj, (value, key) => {
-      key.indexOf('_') === 0 && delete obj[key];
+      key.indexOf("_") === 0 && delete obj[key];
     });
 
     forEach(defaults, (value, key) => {

src/pages/model/Pages.js

@@ -1,26 +0,0 @@
-import { Collection } from '../../common';
-import Page from './Page';
-
-export default class Pages extends Collection {
-  initialize(models, config = {}) {
-    this.config = config;
-    this.on('reset', this.onReset);
-    this.on('remove', this.onRemove);
-  }
-
-  onReset(m, opts = {}) {
-    const prev = opts.previousModels || [];
-    prev.map(p => this.onRemove(p));
-  }
-
-  onRemove(removed) {
-    removed && removed.onRemove();
-  }
-
-  add(m, o = {}) {
-    const { config } = this;
-    return Collection.prototype.add.call(this, m, { ...o, config });
-  }
-}
-
-Pages.prototype.model = Page;

src/pages/model/Pages.ts

@@ -0,0 +1,18 @@
+import { Collection } from "../../common";
+import Page from "./Page";
+
+export default class Pages extends Collection<Page> {
+  constructor(models: any) {
+    super(models);
+    this.on("reset", this.onReset);
+    this.on("remove", this.onRemove);
+  }
+
+  onReset(m: Page, opts?: { previousModels?: Pages }) {
+    opts?.previousModels?.map((p) => this.onRemove(p));
+  }
+
+  onRemove(removed?: Page) {
+    removed?.onRemove();
+  }
+}