fix collection to handle undefined model param

src/abstract/Collection.ts

@@ -1,5 +1,5 @@
 import Backbone, { AddOptions } from 'backbone';
-import { isArray, isObject } from 'underscore';
+import { isArray, isObject, isUndefined } from 'underscore';
 import Model from './Model';
 
 type Module<TModel extends Model> = TModel extends Model<infer M> ? M : unknown;
@@ -9,12 +9,14 @@ export default class Collection<TModel extends Model = Model> extends Backbone.C
   module!: Module<TModel>;
   private newModel!: ModelConstructor<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)));
+  add(model?: unknown, options?: AddOptions): any {
+    //Note: the undefined case needed because backbonejs not handle the reset() correctly
+    var models = isArray(model) ? model : !isUndefined(model) ? [model] : undefined;
+
+    models = models?.map(m => (m instanceof this.newModel ? m : new this.newModel(this.module, m))) ?? [undefined];
+
     return super.add(isArray(model) ? models : models[0], options);
   }
 

src/canvas/model/Frame.ts

@@ -38,8 +38,8 @@ export default class Frame extends Model<CanvasModule> {
   /**
    * @hideconstructor
    */
-  constructor(module: CanvasModule, props: any) {
-    super(module, props);
+  constructor(module: CanvasModule, attr: any) {
+    super(module, attr);
     const { em } = this;
     const { styles, component } = this.attributes;
     const domc = em.get('DomComponents');
@@ -82,8 +82,8 @@ export default class Frame extends Model<CanvasModule> {
       this.set('styles', allRules);
     }
 
-    !props.width && this.set(keyAutoW, 1);
-    !props.height && this.set(keyAutoH, 1);
+    !attr.width && this.set(keyAutoW, 1);
+    !attr.height && this.set(keyAutoH, 1);
   }
 
   get head(): { tag: string; attributes: any }[] {

src/canvas/model/Frames.ts

@@ -8,11 +8,9 @@ export default class Frames extends Collection<Frame> {
   loadedItems = 0;
   itemsToLoad = 0;
   page?: Page;
-  module: CanvasModule;
 
-  constructor(module: CanvasModule, models: Frame[] = []) {
+  constructor(module: CanvasModule, models: Frame[] | Array<Record<string, any>> = []) {
     super(module, models, Frame);
-    this.module = module;
     bindAll(this, 'itemLoaded');
     this.on('reset', this.onReset);
     this.on('remove', this.onRemove);

src/pages/model/Page.ts

@@ -24,10 +24,7 @@ export default class Page extends Model {
       ['component', 'styles'].map(i => this.unset(i));
     }
     const frms: any[] = props.frames || [defFrame];
-    const frames = new Frames(
-      em.get('Canvas'),
-      frms?.map(model => new Frame(em.get('Canvas'), model))
-    );
+    const frames = new Frames(em.get('Canvas'), frms);
     frames.page = this;
     this.set('frames', frames);
     !this.getId() && this.set('id', em?.get('PageManager')._createId());