work started on field interface --> inheritcance structure

7 files changed, 175 insertions, 75 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index d45e11f95..079d222d3 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -399,16 +399,19 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     testTemplate = async () => {
 
+        const obj = new DocumentOptions();
+        console.log(Object.entries(obj)[1][0]);
+
         //console.log(this.templateManager.templates)
 
-        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+        // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         
-        this.templateManager.templates.forEach(template => {
-            const doc = template.mainField.renderedDoc();
-            mainCollection.addDocument(doc);
-        })
+        // this.templateManager.templates.forEach(template => {
+        //     const doc = template.mainField.renderedDoc();
+        //     mainCollection.addDocument(doc);
+        // })
 
-        this.forceUpdate();
+        // this.forceUpdate();
 
         // try {
         //     const res = await gptImageCall('Image of panda eating a cookie');
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
index c6f07d6c6..428f4a01c 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
@@ -1,12 +1,16 @@
-import { Doc } from "../../../../../../fields/Doc";
+import { makeAutoObservable, reaction } from "mobx";
+import { Doc, DocListCast } from "../../../../../../fields/Doc";
 import { Docs } from "../../../../../documents/Documents";
 import { Col } from "../DocCreatorMenu";
 import { TemplateLayouts } from "../TemplateBackend";
 import { Field, FieldContentType, FieldDimensions, FieldSettings, ViewType } from "./Field";
 import { FieldUtils } from "./FieldUtils";
 import { StaticField } from "./StaticField";
+import { IDisposer } from "mobx-utils";
+
+export class DynamicField extends Field {
+    private disposers: { [name: string]: IDisposer } = {};
 
-export class DynamicField implements Field {
     private subfields: Field[] = [];
 
     private id: number;
@@ -16,7 +20,11 @@ export class DynamicField implements Field {
     private parent: Field;
     private dimensions: FieldDimensions;
 
+    private renderedDocument: Doc;
+
     constructor(settings: FieldSettings, id: number, parent?: Field) {
+        super(settings, id);
+        makeAutoObservable(this);
         this.id = id;
         this.settings = settings;
         if (settings.title) { this.title = settings.title };
@@ -28,6 +36,13 @@ export class DynamicField implements Field {
             this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
         }
         this.subfields = this.setupSubfields();
+
+        // this.disposers.fieldList = reaction(
+        //     () => DocListCast(this.doc[Doc.LayoutFieldKey(this.doc)]),
+        //     docs => {
+        //         this.handleFieldUpdate(docs);
+        //     }
+        // );
     }
 
     setContent = (content: string, type?: FieldContentType) => { return };
@@ -59,6 +74,21 @@ export class DynamicField implements Field {
         return this.settings.description ?? '';
     }
 
+    // dispose = () => {
+    //     Object.values(this.disposers).forEach(disposer => disposer?.());
+    // }
+
+    // handleFieldUpdate = (newDocsList: Doc[]) => {
+    //     const currRenderedDocs: Set<Doc> = new Set();
+    //     this.subfields.forEach(field => currRenderedDocs.add(field.renderedDoc()));
+    //     newDocsList.forEach(doc => {
+    //         if (!currRenderedDocs.has(doc)) {
+    //             this.addField(doc);
+    //         }
+    //     });
+    //     currRenderedDocs.forEach();
+    // }
+
     matches = (cols: Col[]): Array<number> => {
         return [];
     }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
index 5eaa7381c..14f7cb109 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
@@ -1,23 +1,72 @@
 import { Doc } from "../../../../../../fields/Doc";
 import { Col } from "../DocCreatorMenu";
 import { TemplateFieldSize, TemplateFieldType } from "../TemplateBackend";
+import { DynamicField } from "./DynamicField";
+import { FieldUtils } from "./FieldUtils";
+import { StaticField } from "./StaticField";
+
+export abstract class Field {
+    protected subfields: Field[] = [];
+
+    protected abstract renderedDocument: Doc;
+
+    protected id: number;
+    protected settings: FieldSettings;
+    protected title: string = '';
+
+    protected abstract dimensions: FieldDimensions;
+
+    constructor(settings: FieldSettings, id: number) {
+        this.id = id;
+        this.settings = settings;
+        this.title = settings.title ?? '';
+    }
+
+    get getSubfields(): Field[] { return this.subfields ?? []; };
+    get getAllSubfields() {
+        let fields: Field[] = [];
+        this.subfields?.forEach(field => {
+            fields.push(field);
+            fields = fields.concat(field.getAllSubfields)
+        });
+        return fields;
+    };
+
+    get renderedDoc() { return this.renderedDocument };
+    get getDimensions() { return this.dimensions };
+    get getID() { return this.id };
+    get getViewType() { return this.settings.viewType };
+
+    setTitle = (title: string) => { 
+        this.title = title;
+        this.renderedDocument.title = title;
+    };
+    getTitle = () => { return this.title };
+
+    abstract setContent(content: string, type?: FieldContentType): void;
+    abstract getContent(): string;
+
+    addField = () => {};
+    removeField = () => {};
+
+    setupSubfields = (): Field[] => {
+        return this.settings.subfields?.map((fieldSettings, index) => {
+            const id = Number(`${this.id}${index}`);
+            return fieldSettings.viewType === ViewType.FREEFORM || fieldSettings.viewType === ViewType.CAROUSEL3D
+                ? new DynamicField(fieldSettings, id, this)
+                : new StaticField(fieldSettings, this, id);
+        }) || [];
+    }
+
+    applyAttributes(field: Field) {
+        field.setTitle(this.title);
+        field.updateRenderedDoc(this.renderedDoc);
+    }
+
+    abstract updateRenderedDoc(oldDoc?: Doc): void;
+
+    abstract matches(cols: Col[]): Array<number>;
 
-export interface Field {
-    getContent: () => string;
-    setContent: (content: string, type?: FieldContentType) => void;
-    getDimensions: FieldDimensions;
-    getSubfields: Field[];
-    getAllSubfields: Field[];
-    getID: number;
-    getViewType: ViewType;
-    getDescription: string;
-    getTitle: () => string;
-    setTitle: (title: string) => void;
-    setupSubfields: () => Field[];
-    applyAttributes: (field: Field) => void;
-    renderedDoc: () => Doc;
-    matches: (cols: Col[]) => number[];
-    updateRenderedDoc: (oldDoc?: Doc) => void;
 }
 
 export type FieldSettings = {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
index f5d86f56e..88115c529 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
@@ -1,5 +1,5 @@
 import { TbHospital } from "react-icons/tb";
-import { Doc } from "../../../../../../fields/Doc";
+import { Doc, DocListCast } from "../../../../../../fields/Doc";
 import { FieldType } from "../../../../../../fields/ObjectField";
 import { Docs, DocumentOptions } from "../../../../../documents/Documents";
 import { Col } from "../DocCreatorMenu";
@@ -9,33 +9,38 @@ import { FieldUtils } from "./FieldUtils";
 import { Field, FieldContentType, FieldDimensions, FieldSettings, ViewType } from "./Field";
 import { indexOf } from "lodash";
 import { ScriptField } from "../../../../../../fields/ScriptField";
+import { StrCast } from "../../../../../../fields/Types";
+import { makeAutoObservable, reaction } from "mobx";
+import { IDisposer } from "mobx-utils";
+
+export class StaticField extends Field {
+    private disposers: { [name: string]: IDisposer } = {};
 
-export class StaticField {
     private content: string;
     private contentType: FieldContentType | undefined;
-    private subfields: Field[] = [];
-    private renderedDocument: Doc;
+    protected renderedDocument: Doc;
 
     private storedAttributes: Record<string, any>;
 
-    private id: number;
-    private title: string = '';
-
-    private settings: FieldSettings;
-
     private parent: Field;
-    private dimensions: FieldDimensions;
+    protected dimensions: FieldDimensions;
 
     constructor(settings: FieldSettings, parent: Field, id: number) {
-        this.settings = settings;
-        if (settings.title) { this.title = settings.title };
-        this.id = id;
+        super(settings, id);
+        makeAutoObservable(this);
         this.parent = parent;
         this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
         this.content = '';
         this.subfields = this.setupSubfields();
-        this.renderedDocument = this.updateRenderedDoc();
+        this.renderedDocument = this.setupRenderedDoc();
         this.storedAttributes = new DocumentOptions();
+
+        this.disposers.fieldList = reaction(
+            () => DocListCast(this.renderedDocument[Doc.LayoutFieldKey(this.renderedDocument)]),
+            docs => {
+                this.handleFieldUpdate(docs);
+            }
+        );
     };
 
     get getSubfields(): Field[] { return this.subfields ?? []; };
@@ -49,18 +54,10 @@ export class StaticField {
         return fields;
     };
 
-    get getDimensions() { return this.dimensions };
-    get getID() { return this.id };
-    get getViewType() { return this.settings.viewType };
-
     get getDescription(): string {
         return this.settings.description ?? '';
     }
 
-    renderedDoc = () => {
-        return this.renderedDocument;
-    }
-
     setContent = (newContent: string, type?: FieldContentType) => { 
         this.content = newContent;
         if (type) this.contentType = type;
@@ -68,16 +65,9 @@ export class StaticField {
     };
     getContent() { return this.content };
 
-    setTitle = (title: string) => { 
-        this.title = title;
-        this.renderedDocument.title = title;
-    };
-    getTitle = () => { return this.title };
-
     applyAttributes = (field: Field) => { //!!! can be updated later for more robust clonign; this is all ythat's needed now
-        field.setTitle(this.title);
+        super.applyAttributes(field);
         field.setContent('', this.contentType);
-        field.updateRenderedDoc(this.renderedDoc());
     }
 
     setupSubfields = (): Field[] => {
@@ -89,6 +79,26 @@ export class StaticField {
         }) || [];
     }
 
+    dispose = () => {
+        Object.values(this.disposers).forEach(disposer => disposer?.());
+    }
+
+    handleFieldUpdate = (newDocsList: Doc[]) => {
+        const currRenderedDocs: Set<Doc> = new Set();
+        this.subfields.forEach(field => currRenderedDocs.add(field.renderedDoc));
+        newDocsList.forEach(doc => {
+            if (!currRenderedDocs.has(doc)) {
+                this.addField(doc);
+            }
+        });
+        currRenderedDocs.forEach(doc => {
+            if (!newDocsList.includes(doc)){
+                const fields = this.subfields.filter(field => field.renderedDoc === doc);
+                fields.forEach(field => this.removeField(field));
+            }
+        });
+    }
+
     matches = (cols: Col[]): number[] => {
         const colMatchesField = (col: Col) => {
             const isMatch: boolean = (
@@ -150,8 +160,16 @@ export class StaticField {
 
         let doc: Doc;
 
-        if (this.shouldRerender() || forceRerender) {
-            this.updateStoredAttributes(this.renderedDocument);
+        // if (this.shouldRerender() || forceRerender) {
+        // } else {
+        //     this.updateStoredAttributes(this.renderedDocument);
+        // }
+
+        this.updateStoredAttributes(this.renderedDocument);
+
+        let list: string[] = Object.entries(this.storedAttributes).map(([key, value]) => `${key}: ${value}`);
+        console.log(list);
+
             switch (this.contentType) {
                 case FieldContentType.STRING:
                     const text = String(this.content);
@@ -164,16 +182,20 @@ export class StaticField {
                     break;
             } 
             doc._layout_hideScroll = true;  
+
+
+            console.log(StrCast(doc.backgroundColor), StrCast(doc._rotation));
+
             this.renderedDocument = doc;
-        } else {
-            this.updateStoredAttributes(this.renderedDocument);
-        }
+
+        //this.renderedDocument = doc;
     };
 
     private updateStoredAttributes = (currDoc?: Doc) => {
         const opts = this.settings.opts;
+        console.log("num atts", Object.entries(this.storedAttributes).length);
         Object.entries(this.storedAttributes).forEach(([key, value]) => {
-            key = String(key);
+            key = String(key); 
             if (currDoc && currDoc[key] !== undefined) {
                 this.storedAttributes[key] = currDoc[key];
             } else if (opts[key as keyof typeof opts] !== undefined) {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index 94ef1d212..add588046 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -1,6 +1,6 @@
 
-import { makeAutoObservable } from "mobx";
-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";
@@ -8,32 +8,24 @@ import { Field, FieldSettings, ViewType } from "./FieldTypes/Field";
 import {  } from "./FieldTypes/FieldUtils";
 import { } from "./FieldTypes/StaticField";
 import { observer } from "mobx-react";
+import { IDisposer } from "mobx-utils";
 
 export class Template {
 
-    mainField: DynamicField;
-    settings: FieldSettings;
-    
+    private mainField: DynamicField;
+    private settings: FieldSettings;
 
     constructor(templateInfo: FieldSettings) {
         makeAutoObservable(this);
         this.mainField = this.setupMainField(templateInfo);
         this.settings = 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(); };
 
-    // addField = (type: FieldType, doc?: Doc): Field => {
-        
-    //     this.mainField.addField();
-    // }
-
     cloneBase = () => {
         const clone: Template = new Template(this.settings);
         clone.allFields.forEach(field => {
@@ -44,7 +36,7 @@ export class Template {
     }
 
     getRenderedDoc = () => {
-        const doc: Doc = this.mainField.renderedDoc();
+        const doc: Doc = this.doc;
         this.contentFields.forEach(field => {
             const title: string = field.getTitle();
             const val: FieldType = field.getContent() as FieldType;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
index 95f0da43d..310b19890 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
@@ -1,3 +1,4 @@
+import { makeAutoObservable } from "mobx";
 import { Col } from "./DocCreatorMenu";
 import { FieldSettings } from "./FieldTypes/Field";
 import { Template } from "./Template";
@@ -6,8 +7,10 @@ import { TemplateLayouts } from "./TemplateBackend";
 export class TemplateManager {
 
     templates: Template[] = [];
+    //updateTrack
 
     constructor(templateSettings: FieldSettings[]) {
+        makeAutoObservable(this);
         this.templates = this.initializeTemplates(templateSettings);
     }
 
@@ -27,5 +30,6 @@ export class TemplateManager {
 
     removeTemplate = (template: Template) => {
         this.templates.splice(this.templates.indexOf(template), 1);
+        template.dispose();
     }
 }
\ No newline at end of file
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index a9bc5ee70..3f8de2988 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -576,7 +576,7 @@ export namespace Doc {
             if (!skipUndefineds || value !== undefined) {
                 // Do we want to filter out undefineds?
                 if (typeof value === 'object' && 'values' in value) {
-                    console.log(value);
+                    //console.log(value);
                 }
                 doc[key] = value;
             }