Use abstract Model in Canvas

src/abstract/Model.ts

@@ -29,4 +29,8 @@ export default class Model<
   protected get em() {
     return this._module.em;
   }
+
+  public get em() {
+    return this._module.em;
+  }
 }

src/canvas/index.ts

@@ -90,7 +90,7 @@ export default class CanvasModule extends Module<typeof defaults> {
       ...this.config,
       module: this,
     };
-    this.canvas = new Canvas(this.em, this.config);
+    this.canvas = new Canvas(this);
     this.model = this.canvas;
     this.startAutoscroll = this.startAutoscroll.bind(this);
     this.stopAutoscroll = this.stopAutoscroll.bind(this);

src/canvas/model/Canvas.ts

@@ -1,11 +1,10 @@
-import { Model } from '../../common';
+import { Model } from "../../abstract";
-import Backbone from 'backbone';
+import { evPageSelect } from "../../pages";
-import { evPageSelect } from '../../pages';
+import Frames from "./Frames";
-import Frames from './Frames';
+import Page from "../../pages/model/Page";
-import EditorModel from '../../editor/model/Editor';
+import CanvasModule from "..";
-import Page from '../../pages/model/Page';
 
-export default class Canvas extends Backbone.Model {
+export default class Canvas extends Model<CanvasModule> {
   defaults() {
     return {
       frame: '',
@@ -20,18 +19,16 @@ export default class Canvas extends Backbone.Model {
       styles: [],
     };
   }
-  em: EditorModel;
-  config: any;
 
-  constructor(em: EditorModel, config: any = {}) {
+  constructor(module: CanvasModule) {
+    const { em, config } = module;
     const { scripts, styles } = config;
-    super({scripts, styles});
+    super(module, {scripts, styles});
-    this.config = config;
+    this.listenTo(this, "change:zoom", this.onZoomChange);
-    this.em = em;
+    this.listenTo(em, "change:device", this.updateDevice);
-    this.listenTo(this, 'change:zoom', this.onZoomChange);
-    this.listenTo(em, 'change:device', this.updateDevice);
     this.listenTo(em, evPageSelect, this._pageUpdated);
   }
+
   get frames(): Frames {
     return this.get('frames');
   }

src/editor/index.ts

@@ -54,14 +54,15 @@
  * ## Methods
  * @module Editor
  */
-import { EventHandler } from 'backbone';
+import { EventHandler } from "backbone";
-import { isUndefined } from 'underscore';
+import { isUndefined } from "underscore";
-import { IBaseModule } from '../abstract/Module';
+import { IBaseModule } from "../abstract/Module";
-import cash from '../utils/cash-dom';
+import CanvasModule from "../canvas";
-import html from '../utils/html';
+import cash from "../utils/cash-dom";
-import defaults from './config/config';
+import html from "../utils/html";
-import EditorModel from './model/Editor';
+import defaults from "./config/config";
-import EditorView from './view/EditorView';
+import EditorModel from "./model/Editor";
+import EditorView from "./view/EditorView";
 
 export default class EditorModule implements IBaseModule<typeof defaults> {
   constructor(config = {}, opts: any = {}) {
@@ -112,7 +113,7 @@ export default class EditorModule implements IBaseModule<typeof defaults> {
   get Panels(): PanelsModule {
     return this.em.get('Panels');
   }
-  //@ts-ignore
+  
   get Canvas(): CanvasModule {
     return this.em.get('Canvas');
   }