From 3ed27a1b2a39e38c9cb7ad7d797241607b793c61 Mon Sep 17 00:00:00 2001
From: Alex Ritter <alex@undo.app>
Date: Sat, 9 Jul 2022 12:34:59 +0200
Subject: [PATCH] fix collection to handle undefined model param

---
 src/abstract/Collection.ts | 12 +++++++-----
 src/canvas/model/Frame.ts  |  8 ++++----
 src/canvas/model/Frames.ts |  4 +---
 src/pages/model/Page.ts    |  5 +----
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/abstract/Collection.ts b/src/abstract/Collection.ts
index 19d721d37..5832c7d1f 100644
--- a/src/abstract/Collection.ts
+++ b/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);
   }
 
diff --git a/src/canvas/model/Frame.ts b/src/canvas/model/Frame.ts
index ac12ec05f..b06ef5bed 100644
--- a/src/canvas/model/Frame.ts
+++ b/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 }[] {
diff --git a/src/canvas/model/Frames.ts b/src/canvas/model/Frames.ts
index 90506571a..33fc17742 100644
--- a/src/canvas/model/Frames.ts
+++ b/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);
diff --git a/src/pages/model/Page.ts b/src/pages/model/Page.ts
index 7a56bf24c..a2cddf984 100644
--- a/src/pages/model/Page.ts
+++ b/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());