hopefully last changes doc creator templates.

10 files changed, 97 insertions, 158 deletions

diff --git a/packages/components/src/components/Template/Template.tsx b/packages/components/src/components/Template/Template.tsx
index 6c6b26516..50b0dec0e 100644
--- a/packages/components/src/components/Template/Template.tsx
+++ b/packages/components/src/components/Template/Template.tsx
@@ -1,12 +1,8 @@
-import * as React from 'react'
-import { IGlobalProps , getFormLabelSize } from '../../global'
+import * as React from 'react';
+import { IGlobalProps } from '../../global';
 
-export interface ITemplateProps extends IGlobalProps {
-
-}
+export interface ITemplateProps extends IGlobalProps {}
 
 export const Template = (props: ITemplateProps) => {
-    return <div className={`template-container`}>
-        Template Component
-    </div>
-}
\ No newline at end of file
+    return <div className={`template-container`}>Template Component</div>;
+};
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index b335432c9..660452d9d 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -102,7 +102,7 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' };
         new PingManager();
         new KeyManager();
         new FaceRecognitionHandler();
-        TemplateField.initField = TemplateFieldUtils.initField; // set the init function for fields
+        TemplateField.CreateField = TemplateFieldUtils.CreateField; // set the init function for fields
 
         // initialize plugins and classes that require plugins
         CollectionDockingView.Init(TabDocView);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 444f0a29d..3253cefb9 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -616,18 +616,15 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         } else {
             this._dataViz?.updateColDefaults();
 
-            const cols = this.fieldsInfos;
-            templates.push(...this.templateManager.getValidTemplates(cols));
+            templates.push(...this.templateManager.getValidTemplates(this.fieldsInfos));
 
-            const assignments: [Template, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols);
+            const assignments = await this.assignColsToFields(templates, this.fieldsInfos);
 
-            const renderedTemplatePromises: Promise<Template | undefined>[] = assignments.map(([template, assgns]) => this.applyGPTContentToTemplate(template, assgns));
+            const renderedTemplatePromises = assignments.map(([template, assgns]) => this.applyGPTContentToTemplate(template, assgns));
 
             await Promise.all(renderedTemplatePromises);
         }
 
-        templates.forEach(template => template.mainField.initializeDocument({ title: template.title, opts: {}, viewType: ViewType.FREEFORM, tl: [0, 0], br: [900, 900] }, []));
-
         setTimeout(() => {
             this.setSuggestedTemplates(templates);
             this._GPTLoading = false;
@@ -731,7 +728,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                     }
                 });
 
-            return Promise.all(gptPromises).then(() => (this._DOCCC = templateCopy.mainField.renderedDoc));
+            return Promise.all(gptPromises).then(() => (this._DOCCC = templateCopy._mainField?.renderedDoc));
         };
 
         const rowContents = this.DEBUG_MODE
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
index b13ec46f0..cf6e145cb 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
@@ -5,52 +5,33 @@ import { DynamicField } from './TemplateFieldTypes/DynamicField';
 import { FieldSettings, TemplateField } from './TemplateFieldTypes/TemplateField';
 
 export class Template {
-    mainField: DynamicField;
-    private settings: FieldSettings;
+    _mainField: DynamicField | undefined;
 
-    constructor(templateInfo: FieldSettings, mainField?: DynamicField) {
+    /**
+     * A Template can be created from a description of its fields (FieldSettings) or from a DynamicField
+     * @param definition definition of template as settings or DynamicField
+     */
+    constructor(definition: FieldSettings | DynamicField) {
         makeAutoObservable(this);
-        this.settings = templateInfo;
-        this.mainField = mainField ?? this.setupMainField(templateInfo);
+        this._mainField = definition instanceof DynamicField ? definition : this.setupMainField(definition);
     }
 
     get childFields(): TemplateField[] {
-        return this.mainField.getSubfields;
+        return this._mainField?.getSubfields ?? [];
     }
     get allFields(): TemplateField[] {
-        return this.mainField.getAllSubfields;
+        return this._mainField?.getAllSubfields ?? [];
     }
     get contentFields(): TemplateField[] {
         return this.allFields.filter(field => field.isContentField);
     }
     get doc() {
-        return this.mainField.renderedDoc;
+        return this._mainField?.renderedDoc;
     }
     get title() {
-        return this.mainField.getTitle();
+        return this._mainField?.getTitle();
     }
 
-    cleanup = () => {
-        //dispose each subfields disposers, etc.
-    };
-
-    cloneBase = () => new Template(TemplateLayouts.BasicSettings, this.mainField.makeClone(undefined));
-
-    printFieldInfo = () => {
-        this.allFields.forEach(field => {
-            const doc = field.renderedDoc;
-            console.log('title: ', field.getTitle(), ' width: ', doc?.width);
-        });
-    };
-
-    getRenderedDoc = () => this.doc;
-
-    getFieldByID = (id: number): TemplateField => this.allFields.filter(field => field.getID === id)[0];
-
-    getFieldByTitle = (title: string) => this.allFields.filter(field => field.getTitle() === title)[0];
-
-    setupMainField = (templateInfo: FieldSettings) => DynamicField.Create(templateInfo, 1);
-
     get descriptionSummary(): string {
         let summary: string = '';
         this.contentFields.forEach(field => {
@@ -67,6 +48,27 @@ export class Template {
         return summary;
     }
 
+    cleanup = () => {
+        //dispose each subfields disposers, etc.
+    };
+
+    cloneBase = () => new Template(this._mainField?.makeClone(undefined) ?? TemplateLayouts.BasicSettings);
+
+    getRenderedDoc = () => this.doc;
+
+    getFieldByID = (id: number): TemplateField => this.allFields.filter(field => field.getID === id)[0];
+
+    getFieldByTitle = (title: string) => this.allFields.filter(field => field.getTitle() === title)[0];
+
+    setupMainField = (templateInfo: FieldSettings) => TemplateField.CreateField(templateInfo, 1, undefined) as DynamicField;
+
+    printFieldInfo = () => {
+        this.allFields.forEach(field => {
+            const doc = field.renderedDoc;
+            console.log('title: ', field.getTitle(), ' width: ', doc?.width);
+        });
+    };
+
     isValidTemplate = (cols: Col[]) => {
         const maxMatches = this.maxMatches(this.getMatches(cols));
         return maxMatches === this.contentFields.length;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DecorationField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DecorationField.ts
index 4f5ad89b6..98a9dc7a6 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DecorationField.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DecorationField.ts
@@ -1,11 +1,3 @@
 import { DynamicField } from './DynamicField';
-import { FieldSettings, TemplateField } from './TemplateField';
 
-export class DecorationField extends DynamicField {
-    private constructor(settings: FieldSettings, parent?: TemplateField, id: number = 1) {
-        super(settings, parent, id);
-    }
-    static Create(settings: FieldSettings, id: number | undefined, parent?: TemplateField) {
-        return DynamicField.Create(settings, id, parent);
-    }
-}
+export class DecorationField extends DynamicField {}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts
index 0baf321a2..b5e73ff18 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts
@@ -12,17 +12,6 @@ export class DynamicField extends TemplateField {
     protected _disposers: { [name: string]: IDisposer } = {};
     protected _subfields: TemplateField[] | undefined;
 
-    protected constructor(settings: FieldSettings, parent?: TemplateField, id: number = 1) {
-        super(settings, parent, id);
-    }
-    static Create(settings: FieldSettings, id: number | undefined, parent?: TemplateField) {
-        const field = new DynamicField(settings, parent, id);
-        field._subfields = settings.subfields?.map((fieldSettings, index) => TemplateField.initField(fieldSettings, index, field)) || [];
-        field._renderDoc = field.initializeDocument(settings, field._subfields);
-        field._disposers.fieldList = reaction(() => DocListCast(field._renderDoc?.[Doc.LayoutFieldKey(field._renderDoc)]), field.handleFieldUpdate);
-        return field;
-    }
-
     get getSubfields() {
         return this._subfields ?? [];
     }
@@ -51,7 +40,7 @@ export class DynamicField extends TemplateField {
             opts: {},
         };
 
-        this._subfields?.push(TemplateField.initField(settings, this._subfields.length, this));
+        this._subfields?.push(TemplateField.CreateField(settings, this._subfields.length, this));
     };
 
     addField = (field: TemplateField) => {
@@ -97,13 +86,16 @@ export class DynamicField extends TemplateField {
         return dynClone;
     }
 
-    initializeDocument = (settings: FieldSettings, subFields: TemplateField[]) => {
-        const renderedSubfields = subFields.filter(field => field.renderedDoc).map(field => field.renderedDoc!);
+    initRenderDoc = (settings: FieldSettings) => {
+        this._disposers.fieldList = reaction(() => DocListCast(this._renderDoc?.[Doc.LayoutFieldKey(this._renderDoc)]), this.handleFieldUpdate);
+        this._subfields = settings.subfields?.map((fieldSettings, index) => TemplateField.CreateField(fieldSettings, index, this)) || [];
+        const renderedSubfields = this._subfields.filter(field => field.renderedDoc).map(field => field.renderedDoc!);
         settings.opts.title = settings.title;
-        switch (settings.viewType) {
+        this._renderDoc = (() => { switch (settings.viewType) {
             case ViewType.CAROUSEL3D: return Docs.Create.Carousel3DDocument(renderedSubfields, settings.opts);
             case ViewType.FREEFORM:   
             default:                  return Docs.Create.FreeformDocument(renderedSubfields, settings.opts);
-        } // prettier-ignore
+        }})(); // prettier-ignore
+        return this;
     };
 }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts
index b8839efab..7049bb56f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts
@@ -1,3 +1,4 @@
+import { FieldResult } from '../../../../../../fields/Doc';
 import { DocData } from '../../../../../../fields/DocSymbols';
 import { RichTextField } from '../../../../../../fields/RichTextField';
 import { ImageField } from '../../../../../../fields/URLField';
@@ -12,61 +13,40 @@ export abstract class StaticContentField extends TemplateField {
     get isContentField(): boolean {
         return true;
     }
-}
+    protected setDataContent(viewType: ViewType, fieldKey: string, data: FieldResult, content: string, type?: ViewType) {
+        super.setContent(content, type);
 
-export class ImageTemplateField extends StaticContentField {
-    private constructor(settings: FieldSettings, parent?: TemplateField, id: number = 1) {
-        super(settings, parent, id);
-    }
-    static Create(settings: FieldSettings, id: number | undefined, parent: TemplateField | undefined) {
-        const field = new ImageTemplateField(settings, parent, id);
-        field._renderDoc = field.initializeDocument(settings);
-        return field;
+        if (type === viewType || type === undefined) {
+            this._content = content;
+            this._renderDoc && (this._renderDoc[DocData][fieldKey] = data);
+        } else {
+            this.changeFieldType(type).setContent(content, type);
+        }
     }
+}
 
+export class ImageTemplateField extends StaticContentField {
     setContent(url: string, type?: ViewType) {
-        super.setContent(url, type);
-
-        if (type === ViewType.IMG || type === undefined) {
-            this._renderDoc && (this._renderDoc[DocData].data = new ImageField(url));
-            this._content = url;
-        } else {
-            this.changeFieldType(type).setContent(url, type);
-        }
+        this.setDataContent(ViewType.IMG, 'data', new ImageField(url), url, type);
     }
 
-    initializeDocument = (settings: FieldSettings) => {
-        settings.opts.title = settings.title;
+    initRenderDoc(settings: FieldSettings) {
+        settings.opts.title = settings.title ?? '';
         settings.opts._layout_fitWidth = false;
-
-        return Docs.Create.ImageDocument('', settings.opts);
-    };
+        this._renderDoc = Docs.Create.ImageDocument('', settings.opts);
+        return this;
+    }
 }
 
 export class TextTemplateField extends StaticContentField {
-    private constructor(settings: FieldSettings, parent?: TemplateField, id: number = 1) {
-        super(settings, parent, id);
-    }
-    static Create(settings: FieldSettings, id: number, parent?: TemplateField) {
-        const field = new TextTemplateField(settings, parent, id);
-        field._renderDoc = field.initializeDocument(settings);
-        field._renderDoc.text_fontSize = `${TemplateFieldUtils.calculateFontSize(field._dimensions?.width ?? 10, field._dimensions?.height ?? 10, '', true)}`;
-        return field;
-    }
     setContent(text: string, type?: ViewType) {
-        super.setContent(text, type);
-
-        if (type === ViewType.TEXT || type === undefined) {
-            this._content = text;
-            this._renderDoc && (this._renderDoc[DocData].text = RichTextField.textToRtf(text));
-        } else {
-            this.changeFieldType(type).setContent(text, type);
-        }
+        this.setDataContent(ViewType.TEXT, 'text', RichTextField.textToRtf(text), text, type);
     }
 
-    initializeDocument = (settings: FieldSettings | undefined) => {
-        const opts = settings?.opts;
-        opts && (opts.title = settings?.title ?? '');
-        return Docs.Create.TextDocument('', opts);
-    };
+    initRenderDoc(settings: FieldSettings) {
+        settings.opts.title = settings.title ?? '';
+        settings.opts.text_fontSize = TemplateFieldUtils.calculateFontSize(this._dimensions?.width ?? 10, this._dimensions?.height ?? 10, '', true) + '';
+        this._renderDoc = Docs.Create.TextDocument('', settings.opts);
+        return this;
+    }
 }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
index d86254586..74d73e692 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
@@ -1,9 +1,5 @@
 /* eslint-disable no-use-before-define */
-import { computed } from 'mobx';
 import { Doc } from '../../../../../../fields/Doc';
-import { DocData } from '../../../../../../fields/DocSymbols';
-import { Copy } from '../../../../../../fields/FieldSymbols';
-import { ObjectField } from '../../../../../../fields/ObjectField';
 import { DocumentOptions } from '../../../../../documents/Documents';
 import { Col } from '../DocCreatorMenu';
 import { TemplateFieldSize, TemplateFieldType } from '../TemplateBackend';
@@ -20,7 +16,7 @@ export abstract class TemplateField {
      * @param sameId -
      * @returns TemplateField
      */
-    static initField: (settings: FieldSettings | undefined, index: number | undefined, parent: TemplateField | undefined, sameId?: boolean) => TemplateField;
+    static CreateField: (settings: FieldSettings, index: number, parent: TemplateField | undefined, sameId?: boolean) => TemplateField;
 
     protected _parent?: TemplateField;
     protected _id: number;
@@ -29,7 +25,7 @@ export abstract class TemplateField {
     protected _renderDoc: Doc | undefined;
     protected _dimensions: FieldDimensions | undefined;
 
-    constructor(settings: FieldSettings, parent?: TemplateField, id: number = 1) {
+    constructor(settings: FieldSettings, id: number = 1, parent?: TemplateField) {
         this._id = id;
         this._parent = parent;
         this._settings = settings;
@@ -56,8 +52,9 @@ export abstract class TemplateField {
     }
 
     abstract get isContentField(): boolean;
-
+    abstract initRenderDoc(settings: FieldSettings): TemplateField;
     abstract getContent(): string;
+
     setContent(content: string, type?: ViewType) {
         this._settings && (this._settings.viewType = type ?? this._settings.viewType);
     }
@@ -69,27 +66,19 @@ export abstract class TemplateField {
     getTitle = () => this._title;
 
     makeClone(parent?: TemplateField) {
-        const cloned = TemplateField.initField(this._settings, this._id, parent, true); // create a value for this.Document/subfields that we want to ignore
-        if (this._renderDoc) Doc.MakeClone(this._renderDoc).then(({ clone }) => (cloned._renderDoc = clone));
+        const cloned = TemplateField.CreateField(this._settings, this._id, parent, true); // create a value for this.Document/subfields that we want to ignore
+        this._renderDoc && Doc.MakeClone(this._renderDoc).then(({ clone }) => (cloned._renderDoc = clone));
         cloned._title = this._title;
         cloned._dimensions = this._dimensions;
         return cloned;
     }
 
-    @computed get documentOptions(): DocumentOptions {
-        const opts: DocumentOptions = {};
-        Object.assign(opts, this._renderDoc?.[DocData]);
-        Object.entries(opts).forEach(([key, field]) => {
-            Object.assign(opts, { [key]: field instanceof Object ? ObjectField.MakeCopy(field) : field[Copy]() });
-        });
-        return opts;
-    }
     exchangeFields(newField: TemplateField, oldField: TemplateField) {
         throw new Error('Only DynamicField can exchange fields.' + newField._title + ' ' + oldField._title);
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     changeFieldType = (newType: ViewType): TemplateField => {
-        const newField = TemplateField.initField(this._settings, this._id, this._parent, true);
+        const newField = TemplateField.CreateField(this._settings, this._id, this._parent, true);
         this._parent?.exchangeFields(newField, this);
         return newField;
     };
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateFieldUtils.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateFieldUtils.ts
index c38d769cd..b0b531b57 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateFieldUtils.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateFieldUtils.ts
@@ -11,21 +11,21 @@ export class TemplateFieldUtils {
      *
      * @param settings - specification of the field type and other parameters
      * @param index -
-     * @param parent - TemplateField that contains the new field
+     * @param parent - optional TemplateField that contains the new field
      * @param sameId -
      * @returns TemplateField
      */
-    public static initField = (settings: FieldSettings, index: number, parent: TemplateField | undefined, sameId: boolean = false): TemplateField => {
-        const id = sameId ? index : parent ? Number(`${parent.getID}${index}`) : 1;
-        switch (settings?.viewType) {
-            case ViewType.FREEFORM:
-            case ViewType.CAROUSEL3D: return DynamicField.Create(settings, id, parent);
-            case ViewType.IMG:        return ImageTemplateField.Create(settings, id, parent);
-            case ViewType.TEXT:       return TextTemplateField.Create(settings, id, parent);
-            case ViewType.DEC:        return DecorationField.Create(settings, id, parent);
-            default:                  return TextTemplateField.Create(settings, id, parent);
-        } // prettier-ignore
-    };
+    public static CreateField = (settings: FieldSettings, index: number, parent?: TemplateField, sameId: boolean = false): TemplateField =>
+        ((...args) => {
+            switch (settings?.viewType) {
+                case ViewType.FREEFORM:
+                case ViewType.CAROUSEL3D: return new DynamicField(...args).initRenderDoc(settings);
+                case ViewType.IMG:        return new ImageTemplateField(...args).initRenderDoc(settings);
+                case ViewType.TEXT:       return new TextTemplateField(...args).initRenderDoc(settings);
+                case ViewType.DEC:        return new DecorationField(...args).initRenderDoc(settings);
+                default:                  return new TextTemplateField(...args).initRenderDoc(settings);
+            } // prettier-ignore
+        })(settings, sameId ? index : parent ? Number(`${parent.getID}${index}`) : 1, parent);
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.ts
index 1959cf9d6..0978444e3 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.ts
@@ -11,20 +11,11 @@ export class TemplateManager {
         this.templates = this.initializeTemplates(templateSettings);
     }
 
-    initializeTemplates = (templateSettings: FieldSettings[]): Template[] => {
-        const initializedTemplates: Template[] = [];
-        templateSettings.forEach(settings => initializedTemplates.push(new Template(settings)));
-        return initializedTemplates;
-    };
+    initializeTemplates = (templateSettings: FieldSettings[]) => templateSettings.map(settings => new Template(settings));
 
-    getValidTemplates = (cols: Col[]): Template[] => {
-        console.log('called in manager with templates: ', this.templates);
-        return this.templates.filter(template => template.isValidTemplate(cols));
-    };
+    getValidTemplates = (cols: Col[]) => this.templates.filter(template => template.isValidTemplate(cols));
 
-    addTemplate = (newTemplate: Template) => {
-        this.templates.push(newTemplate);
-    };
+    addTemplate = (newTemplate: Template) => this.templates.push(newTemplate);
 
     removeTemplate = (template: Template) => {
         this.templates.splice(this.templates.indexOf(template), 1);