Use abstract classes

package.json

@@ -16,7 +16,7 @@
     "url": "https://github.com/artf/grapesjs.git"
   },
   "dependencies": {
-    "backbone": "1.3.3",
+    "backbone": "1.4.1",
     "backbone-undo": "^0.2.5",
     "codemirror": "^5.63.0",
     "codemirror-formatting": "^1.0.0",

src/abstract/Collection.ts

@@ -1,6 +1,33 @@
-import Backbone from 'backbone';
+import Backbone, { AddOptions } from 'backbone';
+import { isArray, isObject } from 'underscore';
 import Model from './Model';
 
-export default class Collection<
-  TModel extends Model = Model
-> extends Backbone.Collection<TModel> {}
+type Module<TModel extends Model> = TModel extends Model<infer M> ? M : unknown;
+type ModelConstructor<TModel extends Model> = { new (mod: Module<TModel>, attr: any): TModel };
+
+export default class Collection<TModel extends Model = Model> extends Backbone.Collection<TModel> {
+  module!: Module<TModel>;
+  private newModel!: { new (mod: Module<TModel>, attr: any): TModel };
+
+  //modelConstructor = {new (mod: Module<TModel>, attr: any): TModel}
+  add(model: Array<Record<string, any>> | TModel, options?: AddOptions): TModel;
+  add(models: Array<Array<Record<string, any>> | TModel>, options?: AddOptions): TModel[];
+  add(model: unknown, options?: AddOptions): any {
+    var models = isArray(model) ? model : [model];
+    models = models.map(m => (m instanceof this.newModel ? m : new this.newModel(this.module, m)));
+    return super.add(isArray(model) ? models : models[0], options);
+  }
+
+  constructor(
+    module: Module<TModel>,
+    models: TModel[] | Array<Record<string, any>>,
+    modelConstructor: ModelConstructor<TModel>
+  ) {
+    super(models, { module, modelConstructor });
+  }
+
+  preinitialize(models?: TModel[] | Array<Record<string, any>>, options?: any) {
+    this.newModel = options.modelConstructor;
+    this.module = options.module;
+  }
+}

src/panels/index.ts

@@ -28,11 +28,12 @@
 import { Module } from '../abstract';
 import EditorModel from '../editor/model/Editor';
 import defaults from './config/config';
+import Button from './model/Button';
 import Panel from './model/Panel';
 import Panels from './model/Panels';
 import PanelsView from './view/PanelsView';
 
-export default class PanelsManager extends Module<typeof defaults> {
+export default class PanelManager extends Module<typeof defaults> {
   //config = {};
   panels: Panels;
   PanelsViewObj?: PanelsView;
@@ -44,7 +45,7 @@ export default class PanelsManager extends Module<typeof defaults> {
    */
   constructor(em: EditorModel) {
     super(em, 'Panels', defaults);
-    this.panels = new Panels(this.config.defaults);
+    this.panels = new Panels(this, this.config.defaults);
     for (var name in defaults) {
       //@ts-ignore
       if (!(name in this.config)) this.config[name] = defaults[name];
@@ -79,7 +80,7 @@ export default class PanelsManager extends Module<typeof defaults> {
    *  buttons  : [...],
    * });
    */
-  addPanel(panel: Panel) {
+  addPanel(panel: Panel | Array<Record<string, any>>) {
     return this.panels.add(panel);
   }
 

src/panels/model/Button.ts

@@ -1,7 +1,9 @@
-import { Model } from '../../common';
+import PanelManager from '..';
+import { Model } from '../../abstract';
+import EditorModel from '../../editor/model/Editor';
 import Buttons from './Buttons';
 
-export default class Button extends Model {
+export default class Button extends Model<PanelManager> {
   defaults() {
     return {
       id: '',
@@ -22,10 +24,10 @@ export default class Button extends Model {
     };
   }
 
-  constructor(options: any) {
-    super(options);
+  constructor(module: PanelManager, options: any) {
+    super(module, options);
     if (this.get('buttons').length) {
-      this.set('buttons', new Buttons(this.get('buttons')));
+      this.set('buttons', new Buttons(this.module, this.get('buttons')));
     }
   }
 }

src/panels/model/Buttons.ts

@@ -1,7 +1,11 @@
-import { Collection } from '../../common';
+import PanelManager from '..';
+import { Collection } from '../../abstract';
 import Button from './Button';
 
 export default class Buttons extends Collection<Button> {
+  constructor(module: PanelManager, models: Button[]) {
+    super(module, models, Button);
+  }
   /**
    * Deactivate all buttons, except one passed
    * @param  {Object}  except  Model to ignore

src/panels/model/Panel.ts

@@ -1,7 +1,8 @@
-import { Model } from '../../common';
+import PanelManager from '..';
+import { Model } from '../../abstract';
 import Buttons from './Buttons';
 
-export default class Panel extends Model {
+export default class Panel extends Model<PanelManager> {
   defaults() {
     return {
       id: '',
@@ -20,10 +21,9 @@ export default class Panel extends Model {
     this.set('buttons', buttons);
   }
 
-  constructor(options: any) {
-    super(options);
+  constructor(module: PanelManager, options: any) {
+    super(module, options);
     var btn = this.get('buttons') || [];
-    this.buttons = new Buttons(btn);
-    this.set('buttons', this.buttons);
+    this.buttons = new Buttons(module, btn);
   }
 }

src/panels/model/Panels.ts

@@ -1,6 +1,11 @@
-import { Collection } from '../../common';
+import PanelManager from '..';
+import { Collection } from '../../abstract';
 import Panel from './Panel';
 
-export default class Panels extends Collection<Panel> {}
+export default class Panels extends Collection<Panel> {
+  constructor(module: PanelManager, models: Panel[] | Array<Record<string, any>>) {
+    super(module, models, Panel);
+  }
+}
 
 Panels.prototype.model = Panel;

test/specs/panels/index.js

@@ -35,7 +35,7 @@ describe('Panels', () => {
     });
 
     test('Adds new panel correctly via Panel instance', () => {
-      var oPanel = new Panel({ id: 'test' });
+      var oPanel = new Panel(obj, { id: 'test' });
       var panel = obj.addPanel(oPanel);
       expect(panel).toEqual(oPanel);
       expect(panel.get('id')).toEqual('test');
@@ -131,7 +131,7 @@ describe('Panels', () => {
       });
 
       test('Removes panel correctly via Panel instance', () => {
-        var oPanel = new Panel({ id: 'test' });
+        var oPanel = new Panel(obj, { id: 'test' });
         var panel = obj.addPanel(oPanel);
         expect(panel).toEqual(oPanel);
         expect(panel.get('id')).toEqual('test');
@@ -140,7 +140,7 @@ describe('Panels', () => {
       });
 
       test('Removes panel correctly via id', () => {
-        var oPanel = new Panel({ id: 'test' });
+        var oPanel = new Panel(obj, { id: 'test' });
         var panel = obj.addPanel(oPanel);
         expect(panel).toEqual(oPanel);
         expect(panel.get('id')).toEqual('test');

test/specs/panels/model/PanelModels.js

@@ -22,7 +22,7 @@ describe('Button', () => {
   });
 
   test('Init with other buttons inside correctly', () => {
-    obj = new Button({
+    obj = new Button(null, {
       buttons: [{}],
     });
     expect(obj.get('buttons') instanceof Buttons).toEqual(true);
@@ -109,7 +109,7 @@ describe('Panel', () => {
   });
 
   test('Init with buttons inside correctly', () => {
-    obj = new Panel({
+    obj = new Panel(null, {
       buttons: [{}],
     });
     expect(obj.get('buttons') instanceof Buttons).toEqual(true);

test/specs/panels/view/ButtonView.js

@@ -1,14 +1,17 @@
 import ButtonView from 'panels/view/ButtonView';
 import Button from 'panels/model/Button';
+import Editor from 'editor';
 
 describe('ButtonView', () => {
   var fixtures;
+  var em;
   var model;
   var view;
-  var btnClass = 'btn';
+  var btnClass = 'gjs-pn-btn';
 
   beforeEach(() => {
-    model = new Button({ command: 'fake-command' });
+    em = new Editor({});
+    model = new Button(em.Panels, { command: 'fake-command' });
     view = new ButtonView({
       model: model,
     });
@@ -40,7 +43,7 @@ describe('ButtonView', () => {
   test('Check enable active', () => {
     model.set('active', true, { silent: true });
     view.checkActive();
-    expect(view.el.getAttribute('class')).toContain(btnClass + ' active');
+    expect(view.el.getAttribute('class')).toContain(btnClass + ' gjs-pn-active');
   });
 
   test('Check disable active', () => {
@@ -54,7 +57,7 @@ describe('ButtonView', () => {
   test('Disable the button', () => {
     model.set('disable', true, { silent: true });
     view.updateDisable();
-    expect(view.el.getAttribute('class')).toEqual(btnClass + ' disabled');
+    expect(view.el.getAttribute('class')).toEqual(btnClass + ' gjs-disabled');
   });
 
   test('Enable the disabled button', () => {

test/specs/panels/view/ButtonsView.js

@@ -1,13 +1,16 @@
 import ButtonsView from 'panels/view/ButtonsView';
 import Buttons from 'panels/model/Buttons';
+import Editor from 'editor';
 
 describe('ButtonsView', () => {
   var fixtures;
+  var em;
   var model;
   var view;
 
   beforeEach(() => {
-    model = new Buttons([]);
+    em = new Editor({});
+    model = new Buttons(em.Panels, []);
     view = new ButtonsView({
       collection: model,
     });