1 files changed, 43 insertions, 27 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index 0a5097d4a..bdfedbdc9 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -1,43 +1,64 @@
 import { Doc, FieldType } from "../../../../../fields/Doc";
+
+import { makeAutoObservable, reaction } from "mobx";
+import { Doc, DocListCast, FieldType } from "../../../../../fields/Doc";
+import { Docs } from "../../../../documents/Documents";
 import { Col } from "./DocCreatorMenu";
 import { DynamicField } from "./FieldTypes/DynamicField";
-import { Field, FieldSettings, ViewType } from "./FieldTypes/Field";
+import { Field, FieldSettings, FieldTree, ViewType } from "./FieldTypes/Field";
 import {  } from "./FieldTypes/FieldUtils";
 import { } from "./FieldTypes/StaticField";
+import { TemplateLayouts } from "./TemplateBackend";
 
 export class Template {
 
     mainField: DynamicField;
-    settings: FieldSettings;
+    private settings: FieldSettings;
 
     constructor(templateInfo: FieldSettings) {
-        this.mainField = this.setupMainField(templateInfo);
+        makeAutoObservable(this);
         this.settings = templateInfo;
+        this.mainField = this.setupMainField(templateInfo);
     }
 
     get childFields(): Field[] { return this.mainField.getSubfields };
     get allFields(): Field[] { return this.mainField.getAllSubfields };
-    get contentFields(): Field[] { return this.allFields.filter(field => field.getViewType === ViewType.STATIC) };
-    get doc(){ return this.mainField.renderedDoc(); };
-
-    cloneBase = () => {
-        const clone: Template = new Template(this.settings);
-        clone.allFields.forEach(field => {
-            const matchingField: Field = this.allFields.filter(f => f.getID === field.getID)[0];
-            matchingField.applyAttributes(field);
-        })
+    get contentFields(): Field[] { return this.allFields.filter(field => field.isContentField) };
+    get doc(){ return this.mainField.renderedDoc; };
+    get title() { return this.mainField.getTitle() };
+
+    cleanup = () => {
+        //dispose each subfields disposers, etc.
+    }
+
+    cloneBase = async (): Promise<Template> => {
+        const makeCloneFieldTree = async (field: Field): Promise<Field> => {
+            const root: Field = await field.makeClone();
+            field.getSubfields.forEach(async field => {
+                const clone: Field = await makeCloneFieldTree(field);
+                root.addField(clone);
+            });
+            return root;
+        }
+
+        const clone: Template = new Template(TemplateLayouts.BasicSettings);
+        clone.mainField = await makeCloneFieldTree(this.mainField) as DynamicField;
+        console.log('last init')
+        clone.mainField.initializeDocument();
+        clone.mainField.renderedDoc._width = this.mainField.renderedDoc._width;
+        clone.mainField.renderedDoc._height = this.mainField.renderedDoc._height;
         return clone;
     }
 
-    getRenderedDoc = () => {
-        const doc: Doc = this.mainField.renderedDoc();
-        this.contentFields.forEach(field => {
-            const title: string = field.getTitle();
-            const val: FieldType = field.getContent() as FieldType;
-            if (!title || !val) return;
-            doc[title] = val;
+    printFieldInfo = () => {
+        this.allFields.forEach(field => {
+            const doc = field.renderedDoc;
+            console.log('title: ', field.getTitle(), ' width: ', doc.width);
         });
-        return doc;
+    }
+
+    getRenderedDoc = () => {
+        return this.doc;
     }
 
     getFieldByID = (id: number): Field => {
@@ -68,21 +89,16 @@ export class Template {
         return summary;
     }
 
-    renderUpdates = () => {
-        this.allFields.forEach(field => {
-            field.updateRenderedDoc(field.renderedDoc());
-        });
-    };
-
     resetToBase = () => {
         this.allFields.forEach(field => {
-            field.updateRenderedDoc();
+            field.initializeDocument();
         })
     }
 
     isValidTemplate = (cols: Col[]) => {
         const matches: number[][] = this.getMatches(cols);
         const maxMatches: number = this.maxMatches(matches);
+        console.log('title: ', this.mainField.getTitle(), ' matches: ', matches, ' max: ', maxMatches, ' num content fields: ', this.contentFields.length)
         return maxMatches === this.contentFields.length;
     }