field superclass

6 files changed, 121 insertions, 202 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 079d222d3..d8a71a610 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -400,7 +400,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     testTemplate = async () => {
 
         const obj = new DocumentOptions();
-        console.log(Object.entries(obj)[1][0]);
 
         //console.log(this.templateManager.templates)
 
@@ -545,7 +544,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     compileFieldDescriptions = (templates: Template[]): string => {
         let descriptions: string = '';
         templates.forEach(template => {
-            descriptions += `----------  NEW TEMPLATE TO INCLUDE: The title is: ${template.mainField.getTitle()}. Its fields are: `;
+            descriptions += `----------  NEW TEMPLATE TO INCLUDE: The title is: ${template.title}. Its fields are: `;
             descriptions += template.descriptionSummary;
         });
 
@@ -585,7 +584,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 const brokenDownAssignments: [Template, { [fieldID: number]: Col }][] = [];
 
                 Object.entries(assignments).forEach(([tempTitle, assignment]) => {
-                    const template = templates.filter(template => template.mainField.getTitle() === tempTitle)[0];
+                    const template = templates.filter(template => template.title === tempTitle)[0];
                     if (!template) return;
                     const toObj = Object.entries(assignment).reduce(
                         (a, [fieldID, colTitle]) => {
@@ -707,7 +706,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     createDocsFromTemplate = async (template: Template) => {
         const dv = this._dataViz;
-        console.log('dataviz: ', dv);
+
         if (!dv) return;
 
         this._docsRendering = true;
@@ -781,7 +780,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @action setExpandedView = (template: Template | undefined) => {
         if (template) {
             this._currEditingTemplate = template;
-            this._expandedPreview = template.mainField.renderedDoc(); //Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''});
+            this._expandedPreview = template.doc; //Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''});
         } else {
             this._currEditingTemplate = undefined;
             this._expandedPreview = undefined;
@@ -839,6 +838,31 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const GPTOptions = <div></div>;
 
+        const previewDoc = (doc: Doc, template: Template) => 
+        <DocumentView
+        Document={doc}
+        isContentActive={emptyFunction} // !!! should be return false
+        addDocument={returnFalse}
+        moveDocument={returnFalse}
+        removeDocument={returnFalse}
+        PanelWidth={() => this._selectedTemplate === template ? 104 : 111}
+        PanelHeight={() => this._selectedTemplate === template ? 104 : 111}
+        ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)}
+        renderDepth={1}
+        whenChildContentsActiveChanged={emptyFunction}
+        focus={emptyFunction}
+        styleProvider={DefaultStyleProvider}
+        addDocTab={this._props.addDocTab}
+        // eslint-disable-next-line no-use-before-define
+        pinToPres={() => undefined}
+        childFilters={returnEmptyFilter}
+        childFiltersByRanges={returnEmptyFilter}
+        searchFilterDocs={returnEmptyDoclist}
+        fitContentsToBox={returnFalse}
+        fitWidth={returnFalse}
+        hideDecorations={true}
+        />
+
         //<img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
 
         return (
@@ -881,29 +905,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                                 <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.addUserTemplate(template))}>
                                                     <FontAwesomeIcon icon="plus" color="white" />
                                                 </button>
-                                                <DocumentView
-                                                    Document={doc}
-                                                    isContentActive={emptyFunction} // !!! should be return false
-                                                    addDocument={returnFalse}
-                                                    moveDocument={returnFalse}
-                                                    removeDocument={returnFalse}
-                                                    PanelWidth={() => this._selectedTemplate === template ? 104 : 111}
-                                                    PanelHeight={() => this._selectedTemplate === template ? 104 : 111}
-                                                    ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)}
-                                                    renderDepth={1}
-                                                    whenChildContentsActiveChanged={emptyFunction}
-                                                    focus={emptyFunction}
-                                                    styleProvider={DefaultStyleProvider}
-                                                    addDocTab={this._props.addDocTab}
-                                                    // eslint-disable-next-line no-use-before-define
-                                                    pinToPres={() => undefined}
-                                                    childFilters={returnEmptyFilter}
-                                                    childFiltersByRanges={returnEmptyFilter}
-                                                    searchFilterDocs={returnEmptyDoclist}
-                                                    fitContentsToBox={returnFalse}
-                                                    fitWidth={returnFalse}
-                                                    hideDecorations={true}
-                                                    />
+                                                {previewDoc(doc, template)}
                                             </div>
                                         ))
                                 )}
@@ -950,29 +952,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                             <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.removeUserTemplate(template))}>
                                                 <FontAwesomeIcon icon="minus" color="white" />
                                             </button>
-                                            <DocumentView
-                                                Document={doc}
-                                                isContentActive={emptyFunction} // !!! should be return false
-                                                addDocument={returnFalse}
-                                                moveDocument={returnFalse}
-                                                removeDocument={returnFalse}
-                                                PanelWidth={() => this._selectedTemplate === template ? 104 : 111}
-                                                PanelHeight={() => this._selectedTemplate === template ? 104 : 111}
-                                                ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)}
-                                                renderDepth={1}
-                                                whenChildContentsActiveChanged={emptyFunction}
-                                                focus={emptyFunction}
-                                                styleProvider={DefaultStyleProvider}
-                                                addDocTab={this._props.addDocTab}
-                                                // eslint-disable-next-line no-use-before-define
-                                                pinToPres={() => undefined}
-                                                childFilters={returnEmptyFilter}
-                                                childFiltersByRanges={returnEmptyFilter}
-                                                searchFilterDocs={returnEmptyDoclist}
-                                                fitContentsToBox={returnFalse}
-                                                fitWidth={returnFalse}
-                                                hideDecorations={true}
-                                                />
+                                            {previewDoc(doc, template)}
                                         </div>
                                     ))}
                             </div>
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
index 428f4a01c..681e1d48c 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
@@ -9,25 +9,14 @@ import { StaticField } from "./StaticField";
 import { IDisposer } from "mobx-utils";
 
 export class DynamicField extends Field {
-    private disposers: { [name: string]: IDisposer } = {};
-
-    private subfields: Field[] = [];
-
-    private id: number;
-    private settings: FieldSettings;
-    private title: string = '';
-
     private parent: Field;
-    private dimensions: FieldDimensions;
+    protected dimensions: FieldDimensions;
 
-    private renderedDocument: Doc;
+    protected 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 };
         if (!parent) {
             this.parent = this;
             this.dimensions = {width: this.settings.br[0] - this.settings.tl[0], height: this.settings.br[1] - this.settings.tl[1], coord: {x: this.settings.tl[0], y: this.settings.tl[1]}};
@@ -35,7 +24,7 @@ export class DynamicField extends Field {
             this.parent = parent;
             this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
         }
-        this.subfields = this.setupSubfields();
+        this.renderedDocument = new Doc(); //!!!
 
         // this.disposers.fieldList = reaction(
         //     () => DocListCast(this.doc[Doc.LayoutFieldKey(this.doc)]),
@@ -48,78 +37,10 @@ export class DynamicField extends Field {
     setContent = (content: string, type?: FieldContentType) => { return };
     getContent = () => { return '' };
 
-    setTitle = (title: string) => { this.title = title };
-    getTitle = () => { return this.title };
-
-    // addField = () => {
-    //     const newField: Field = new DynamicField();
-    //     //this.subfields.pu
-    // }
-
-    get getSubfields() { return this.subfields };
-    get getAllSubfields() {
-        let fields: Field[] = [];
-        this.subfields?.forEach(field => {
-            fields.push(field);
-            fields = fields.concat(field.getAllSubfields)
-        });
-        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 ?? '';
-    }
-
-    // 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 [];
     }
 
-    updateRenderedDoc = () => {
-        return new Doc();
-    }
-
-    setupSubfields = (): Field[] => {
-        const fields: Field[] = [];
-        this.settings.subfields?.forEach((fieldSettings, index) => {
-            let field: Field;
-            const type = fieldSettings.viewType;
-
-            const id = Number(String(this.id) + String(index));
-
-            if (type == ViewType.CAROUSEL3D || type === ViewType.FREEFORM) {
-                field = new DynamicField(fieldSettings, id, this); 
-            } else {  
-                field = new StaticField(fieldSettings, this, id);
-            }
-            fields.push(field);
-        });
-        return fields;
-    }
-
-    applyAttributes = (field: Field) => {
-        field.setTitle(this.title);
-        field.updateRenderedDoc(this.renderedDoc());
-    }
-
     getChildDimensions = (coords: { tl: [number, number]; br: [number, number] }): FieldDimensions => {
         const l = (coords.tl[0] * this.dimensions.height) / 2;
         const t = coords.tl[1] * this.dimensions.width / 2; //prettier-ignore
@@ -131,16 +52,16 @@ export class DynamicField extends Field {
         return { width, height, coord };
     };
 
-    renderedDoc = (): Doc => {
+    updateRenderedDoc = (): Doc => {
         switch (this.settings.viewType) {
             case ViewType.CAROUSEL3D:
-                const carouselDoc = Docs.Create.Carousel3DDocument(this.subfields.map(field => field.renderedDoc()), {
+                const carouselDoc = Docs.Create.Carousel3DDocument(this.subfields.map(field => field.renderedDoc), {
                     title: this.title,
                 });
                 FieldUtils.applyBasicOpts(carouselDoc, this.dimensions, this.settings);
                 return carouselDoc;
             case ViewType.FREEFORM:
-                const freeformDoc = Docs.Create.FreeformDocument(this.subfields.map(field => field.renderedDoc()), {
+                const freeformDoc = Docs.Create.FreeformDocument(this.subfields.map(field => field.renderedDoc), {
                     title: this.title,
                 });
                 FieldUtils.applyBasicOpts(freeformDoc, this.dimensions, this.settings);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
index 14f7cb109..4d0aa10c8 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
@@ -1,12 +1,17 @@
-import { Doc } from "../../../../../../fields/Doc";
+import { makeAutoObservable, reaction } from "mobx";
+import { Doc, DocListCast } from "../../../../../../fields/Doc";
 import { Col } from "../DocCreatorMenu";
 import { TemplateFieldSize, TemplateFieldType } from "../TemplateBackend";
 import { DynamicField } from "./DynamicField";
 import { FieldUtils } from "./FieldUtils";
 import { StaticField } from "./StaticField";
+import { IDisposer } from "mobx-utils";
+import { DocumentType } from "../../../../../documents/DocumentTypes";
 
 export abstract class Field {
-    protected subfields: Field[] = [];
+    protected disposers: { [name: string]: IDisposer } = {};
+
+    protected subfields: Field[];
 
     protected abstract renderedDocument: Doc;
 
@@ -17,9 +22,19 @@ export abstract class Field {
     protected abstract dimensions: FieldDimensions;
 
     constructor(settings: FieldSettings, id: number) {
+        makeAutoObservable(this);
+        
         this.id = id;
         this.settings = settings;
         this.title = settings.title ?? '';
+        this.subfields = this.setupSubfields();
+
+        this.disposers.fieldList = reaction(
+            () => DocListCast(this.renderedDocument[Doc.LayoutFieldKey(this.renderedDocument)]),
+            docs => {
+                this.handleFieldUpdate(docs);
+            }
+        );
     }
 
     get getSubfields(): Field[] { return this.subfields ?? []; };
@@ -36,6 +51,7 @@ export abstract class Field {
     get getDimensions() { return this.dimensions };
     get getID() { return this.id };
     get getViewType() { return this.settings.viewType };
+    get getDescription(): string { return this.settings.description ?? '' };
 
     setTitle = (title: string) => { 
         this.title = title;
@@ -46,15 +62,41 @@ export abstract class Field {
     abstract setContent(content: string, type?: FieldContentType): void;
     abstract getContent(): string;
 
-    addField = () => {};
-    removeField = () => {};
+    addFieldFromDoc = (doc: Doc) => {
+        const settings: FieldSettings = {
+            tl: [Number(doc._x), Number(doc._y)],
+            br: [Number(doc._x) + Number(doc._width), Number(doc._y) + Number(doc._height)],
+            viewType: doc.type === DocumentType.COL ? ViewType.FREEFORM : ViewType.STATIC,
+            opts: {},
+        };
+
+        Object.getOwnPropertyNames(FieldOpts.prototype).forEach(([key, value]) => {
+            settings.opts[key as keyof FieldOpts] = StringCast(doc[key]);
+        });
+
+        const newField = this.setupField(settings, this.subfields.length)
+        this.subfields.push(newField);
+    };
+
+    addField = (type?: FieldContentType) => {
+
+    }
+
+    removeField = (field: Field) => {
+        this.subfields.splice(this.subfields.indexOf(field), 1);
+        field.dispose();
+    };
+
+    private setupField = (settings: FieldSettings, index: number): Field => { 
+        const id = Number(`${this.id}${index}`);
+        return settings.viewType === ViewType.FREEFORM || settings.viewType === ViewType.CAROUSEL3D
+        ? new DynamicField(settings, id, this)
+        : new StaticField(settings, this, id); 
+    }
 
     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);
+            return this.setupField(fieldSettings, index);
         }) || [];
     }
 
@@ -67,6 +109,26 @@ export abstract class Field {
 
     abstract matches(cols: Col[]): Array<number>;
 
+    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.addFieldFromDoc(doc);
+            }
+        });
+        currRenderedDocs.forEach(doc => {
+            if (!newDocsList.includes(doc)){
+                const fields = this.subfields.filter(field => field.renderedDoc === doc);
+                fields.forEach(field => this.removeField(field));
+            }
+        });
+    }
+
 }
 
 export type FieldSettings = {
@@ -99,7 +161,7 @@ export type FieldDimensions = {
     coord: {x: number, y: number};
 }
 
-export interface FieldOpts {
+export class FieldOpts {
     backgroundColor?: string;
     text_fontColor?: string;
     _layout_borderRounding?: number;
@@ -114,3 +176,7 @@ export interface FieldOpts {
     textTransform?: 'uppercase' | 'lowercase';
     fieldViewType?: 'freeform' | 'stacked';
 }
+function StringCast(arg0: unknown): undefined {
+    throw new Error("Function not implemented.");
+}
+
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
index 88115c529..94ff7b8e8 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
@@ -14,7 +14,6 @@ import { makeAutoObservable, reaction } from "mobx";
 import { IDisposer } from "mobx-utils";
 
 export class StaticField extends Field {
-    private disposers: { [name: string]: IDisposer } = {};
 
     private content: string;
     private contentType: FieldContentType | undefined;
@@ -31,33 +30,10 @@ export class StaticField extends Field {
         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.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 ?? []; };
-
-    get getAllSubfields(): Field[] {
-        let fields: Field[] = [];
-        this.subfields?.forEach(field => {
-            fields.push(field);
-            fields = fields.concat(field.getAllSubfields);
-        });
-        return fields;
     };
 
-    get getDescription(): string {
-        return this.settings.description ?? '';
-    }
-
     setContent = (newContent: string, type?: FieldContentType) => { 
         this.content = newContent;
         if (type) this.contentType = type;
@@ -70,35 +46,6 @@ export class StaticField extends Field {
         field.setContent('', this.contentType);
     }
 
-    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);
-        }) || [];
-    }
-
-    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 = (
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index add588046..e079af4de 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -12,7 +12,7 @@ import { IDisposer } from "mobx-utils";
 
 export class Template {
 
-    private mainField: DynamicField;
+    mainField: DynamicField;
     private settings: FieldSettings;
 
     constructor(templateInfo: FieldSettings) {
@@ -24,7 +24,12 @@ export class Template {
     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(); };
+    get doc(){ return this.mainField.renderedDoc; };
+    get title() { return this.mainField.getTitle() };
+
+    cleanup = () => {
+        //dispose each subfields disposers, etc.
+    }
 
     cloneBase = () => {
         const clone: Template = new Template(this.settings);
@@ -76,7 +81,7 @@ export class Template {
 
     renderUpdates = () => {
         this.allFields.forEach(field => {
-            field.updateRenderedDoc(field.renderedDoc());
+            field.updateRenderedDoc(field.renderedDoc);
         });
     };
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
index 310b19890..413c3082e 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
@@ -30,6 +30,6 @@ export class TemplateManager {
 
     removeTemplate = (template: Template) => {
         this.templates.splice(this.templates.indexOf(template), 1);
-        template.dispose();
+        template.cleanup();
     }
 }
\ No newline at end of file