From f7e28d954902bf9e7e8567ce06b6eb03b6cd92ef Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 2 Mar 2025 03:19:21 -0500
Subject: Slight refactors (with so much wasted time trying for larger ones)

---
 src/client/documents/Documents.ts                  |   1 +
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   |  32 ++++--
 .../DocCreatorMenu/FieldTypes/DecorationField.tsx  |  19 ++--
 .../DocCreatorMenu/FieldTypes/DynamicField.tsx     |  99 +++++++++++-------
 .../DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx | 114 ++++++++-------------
 .../DocCreatorMenu/FieldTypes/FieldUtils.tsx       |  53 +---------
 .../FieldTypes/StaticContentField.tsx              |  59 +++++------
 .../nodes/DataVizBox/DocCreatorMenu/Template.tsx   |   4 +-
 .../DataVizBox/DocCreatorMenu/TemplateBackend.tsx  |   8 +-
 9 files changed, 173 insertions(+), 216 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 0a7047128..b35845de9 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -285,6 +285,7 @@ export class DocumentOptions {
     _layout_showSidebar?: BOOLt = new BoolInfo('whether an annotationsidebar should be displayed for text docuemnts');
     _layout_showCaption?: string; // which field to display in the caption area.  leave empty to have no caption
     _layout_showTags?: BOOLt = new BoolInfo('whether to show the list of document tags at the bottom of a DocView');
+    _layout_hideScroll?: BOOLt = new BoolInfo('whether to hide scroll bars on the document');
 
     _chromeHidden?: BOOLt = new BoolInfo('whether the editing chrome for a document is hidden');
     hideClickBehaviors?: BOOLt = new BoolInfo('whether to hide click behaviors in context menu');
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index faa6cffa8..cc161e688 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -47,6 +47,8 @@ export enum LayoutType {
 export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     static Instance: DocCreatorMenu;
 
+    private DEBUG_MODE: boolean = false;
+
     private _disposers: { [name: string]: IDisposer } = {};
 
     private _ref: HTMLDivElement | null = null;
@@ -122,8 +124,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     @computed get docsToRender() {
-        return [1, 2, 3, 4];
-        //this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : []; !!! put this back for GPT rendering
+        if (this.DEBUG_MODE) {
+            return [1, 2, 3, 4];
+        } else {
+            return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
+        }
     }
 
     @computed get rowsCount() {
@@ -607,20 +612,27 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     generatePresetTemplates = async () => {
-        this._dataViz?.updateColDefaults();
 
-        const cols = this.fieldsInfos;
-        const templates = this.templateManager.getValidTemplates(cols);
+        const templates: Template[] = [];
 
-        console.log(templates)
+        if (this.DEBUG_MODE) {
+            templates.push(...this.templateManager.templates)
+        } else {
+            this._dataViz?.updateColDefaults();
 
-        const assignments: [Template, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols);
+            const cols = this.fieldsInfos;
+            templates.push(...this.templateManager.getValidTemplates(cols));
 
-        const renderedTemplatePromises: Promise<Template | undefined>[] = assignments.map(([template, assignments]) => this.applyGPTContentToTemplate(template, assignments));
+            console.log(templates)
 
-        const renderedTemplates: (Template | undefined)[] = await Promise.all(renderedTemplatePromises);
+            const assignments: [Template, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols);
+
+            const renderedTemplatePromises: Promise<Template | undefined>[] = assignments.map(([template, assignments]) => this.applyGPTContentToTemplate(template, assignments));
+
+            const renderedTemplates: (Template | undefined)[] = await Promise.all(renderedTemplatePromises);
+        }
 
-        templates.forEach(template => template.mainField.initRenderedDoc())
+        // templates.forEach(template => template.mainField.initRenderedDoc())
 
         setTimeout(() => {
             this.setSuggestedTemplates(templates);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DecorationField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DecorationField.tsx
index efe398aaa..62f5504a8 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DecorationField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DecorationField.tsx
@@ -1,37 +1,34 @@
 import { Doc, DocListCast } from "../../../../../../fields/Doc";
 import { Docs, DocumentOptions } from "../../../../../documents/Documents";
-import { FieldUtils } from "./FieldUtils";
 import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field";
 import { RichTextField } from "../../../../../../fields/RichTextField";
 import { DocData } from "../../../../../../fields/DocSymbols";
 import { ImageField } from "../../../../../../fields/URLField";
+import { FieldUtils } from "./FieldUtils";
 
 export class DecorationField extends Field {
 
     protected content: string = ''; 
     protected subfields: Field[];
 
-    protected renderedDocument: Doc;
-
-    protected dimensions: FieldDimensions;
+    protected Document: Doc;
 
-    constructor(settings: FieldSettings, parent: Field, id: number) {
+    constructor(settings: FieldSettings, id: number, parent: Field) {
         super(settings, id, FieldUtils.initField, parent);
-        this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
         this.subfields = this.setupSubfields(this);
-        this.renderedDocument = this.initRenderedDoc();
+        this.Document = this.initializeDocument();
     };
 
     setContent = (content: string, type?: ViewType) => { return }
     getContent = () => { return 'none'};
     get isContentField(): boolean { return false };
 
-    initRenderedDoc = (): Doc => {
+    initializeDocument = (): Doc => {
         const renderedSubfields: Doc[] = this.subfields.map(field => field.renderedDoc);
-        let doc: Doc = Docs.Create.FreeformDocument(renderedSubfields, { title: this.title, });
-        FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings);
+        this.settings.opts.title = this.title;
+        let doc: Doc = Docs.Create.FreeformDocument(renderedSubfields, this.settings.opts);
 
-        this.renderedDocument = doc;
+        this.Document = doc;
 
         return doc;
     };
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
index 7ffb1884e..59a955c66 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
@@ -1,58 +1,36 @@
+import { makeAutoObservable, makeObservable, reaction } from "mobx";
 import { Doc, DocListCast } from "../../../../../../fields/Doc";
 import { Docs } from "../../../../../documents/Documents";
 import { Col } from "../DocCreatorMenu";
+import { TemplateLayouts } from "../TemplateBackend";
 import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field";
+import { IDisposer } from "mobx-utils";
 import { FieldUtils } from "./FieldUtils";
 
 export class DynamicField extends Field {
-    protected parent: Field;
-    protected dimensions: FieldDimensions;
     protected subfields: Field[];
 
-    protected renderedDocument: Doc;
+    protected Document!: Doc;
 
     constructor(settings: FieldSettings, id: number, parent?: Field) {
         super(settings, id, FieldUtils.initField, parent);
-        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]}};
-        } else {
-            this.parent = parent;
-            this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
-        }
-        //console.log('new field dimensions: ', this.dimensions);
         this.subfields = this.setupSubfields(this);
-        this.renderedDocument = this.initRenderedDoc(); //!!!
-
-        // this.disposers.fieldList = reaction(
-        //     () => DocListCast(this.doc[Doc.LayoutFieldKey(this.doc)]),
-        //     docs => {
-        //         this.handleFieldUpdate(docs);
-        //     }
-        // );
+        this.initializeDocument();
     }
 
     setContent = (content: string, type: ViewType) => { return };
     getContent = () => { return '' };
     get isContentField(): boolean { return false };
 
+    addChildToDocument = (doc: Doc) => {
+        Doc.SetContainer(doc, this.Document);
+    }
+
     matches = (cols: Col[]): Array<number> => {
         return [];
     }
 
-    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
-        const r = (coords.br[0] * this.dimensions.height) / 2;
-        const b = coords.br[1] * this.dimensions.width / 2; //prettier-ignore
-        const width = r - l;
-        const height = b - t;
-        const coord = { x: l, y: t };
-        return { width, height, coord };
-    };
-
-    initRenderedDoc = (): Doc => {
-        console.log('dynamic field updated');
+    initializeDocument = (): Doc => {
         let doc: Doc;
         const renderedSubfields: Doc[] = this.subfields.map(field => field.renderedDoc);
         switch (this.settings.viewType) {
@@ -60,24 +38,71 @@ export class DynamicField extends Field {
                 doc = Docs.Create.Carousel3DDocument(renderedSubfields, {
                     title: this.title,
                 });
-                FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings);
                 break;
             case ViewType.FREEFORM:
                 doc = Docs.Create.FreeformDocument(renderedSubfields, {
                     title: this.title,
                 });
-                FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings);
                 break;
             default:
-                doc = Docs.Create.Carousel3DDocument(renderedSubfields, {
+                doc = Docs.Create.FreeformDocument(renderedSubfields, {
                     title: this.title,
                 });
-                FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings);
             break;
         }
 
-        this.renderedDocument = doc;
+        this.Document = doc;
         return doc;
     }
 
 }
+
+// export class DynamicField extends Field {
+//     protected subfields: Field[];
+
+//     protected Document!: Doc;
+
+//     constructor(settings: FieldSettings, id: number, parent?: Field) {
+//         super(settings, id, parent);
+//         this.subfields = this.setupSubfields(this);
+//         this.initializeDocument();
+//     }
+
+//     setContent = (content: string, type: ViewType) => { return };
+//     getContent = () => { return '' };
+//     get isContentField(): boolean { return false };
+
+//     addChildToDocument = (doc: Doc) => {
+//         Doc.SetContainer(doc, this.Document);
+//     }
+
+//     matches = (cols: Col[]): Array<number> => {
+//         return [];
+//     }
+
+//     initializeDocument = (): Doc => {
+//         let doc: Doc;
+//         const renderedSubfields: Doc[] = this.subfields.map(field => field.renderedDoc);
+//         switch (this.settings.viewType) {
+//             case ViewType.CAROUSEL3D:
+//                 doc = Docs.Create.Carousel3DDocument(renderedSubfields, {
+//                     title: this.title,
+//                 });
+//                 break;
+//             case ViewType.FREEFORM:
+//                 doc = Docs.Create.FreeformDocument(renderedSubfields, {
+//                     title: this.title,
+//                 });
+//                 break;
+//             default:
+//                 doc = Docs.Create.FreeformDocument(renderedSubfields, {
+//                     title: this.title,
+//                 });
+//             break;
+//         }
+
+//         this.Document = doc;
+//         return doc;
+//     }
+
+// }
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
index 6c78e15ad..df98e6181 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
@@ -4,22 +4,24 @@ import { Col } from "../DocCreatorMenu";
 import { TemplateFieldSize, TemplateFieldType } from "../TemplateBackend";
 import { IDisposer } from "mobx-utils";
 import { DocumentType } from "../../../../../documents/DocumentTypes";
+import { Partial } from "@react-spring/web";
+import { DocumentOptions } from "../../../../../documents/Documents";
 
 export abstract class Field {
 
     protected disposers: { [name: string]: IDisposer } = {};
+    
     private initField: (settings: FieldSettings, index: number, parent: Field) => Field;
 
     protected abstract subfields: Field[];
 
-    protected abstract renderedDocument: Doc;
+    protected abstract Document: Doc;
 
     protected parent: Field;
     protected id: number;
     protected settings: FieldSettings;
     protected title: string = '';
-
-    protected abstract dimensions: FieldDimensions;
+    protected dimensions: FieldDimensions;
 
     constructor(settings: FieldSettings, id: number, fieldFactory: (settings: FieldSettings, index: number, parent: Field) => Field, parent?: Field) {
         this.initField = fieldFactory;
@@ -27,10 +29,13 @@ export abstract class Field {
         this.id = id;
         this.settings = settings;
         this.title = settings.title ?? '';
+        this.dimensions = this.getLocalDimensions({tl: this.settings.tl, br: this.settings.br}, this.parent.getDimensions);
+        this.applyBasicOpts(this.dimensions, settings);
 
         this.disposers.fieldList = reaction(
-            () => DocListCast(this.renderedDocument[Doc.LayoutFieldKey(this.renderedDocument)]),
+            () => DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)]),
             docs => {
+                console.log('updated')
                 this.handleFieldUpdate(docs);
             }
         );
@@ -46,7 +51,7 @@ export abstract class Field {
         return fields;
     };
 
-    get renderedDoc(){ return this.renderedDocument };
+    get renderedDoc(){ return this.Document };
     get getDimensions() { return this.dimensions };
     get getID() { return this.id };
     get getDescription(): string { return this.settings.description ?? '' };
@@ -54,7 +59,7 @@ export abstract class Field {
 
     setTitle = (title: string) => { 
         this.title = title;
-        this.renderedDocument.title = title;
+        this.Document.title = title;
     };
     getTitle = () => { return this.title };
 
@@ -73,66 +78,22 @@ export abstract class Field {
         this.subfields.splice(this.subfields.indexOf(oldField), 1, newField);
     }
 
-    setupFieldChangeReaction = () => {
-
-    }
-
     addFieldFromDoc = (doc: Doc) => {
         console.log('add field called');
-        const par = this.renderedDocument;
+        const par = this.Document;
         const settings: FieldSettings = {
             tl: [Number(doc._x) / Number(par._width), Number(doc._y) / Number(par._height)],
             br: [(Number(doc._x) + Number(doc._width)) / Number(par._width), (Number(doc._y) + Number(doc._height)) / Number(par._height)],
             viewType: doc.type === DocumentType.COL ? ViewType.FREEFORM : ViewType.STATIC,
             opts: {},
         };
-
-        Object.getOwnPropertyNames(FieldOpts.prototype).forEach(([key, value]) => {
-            switch (key) {
-                case 'text_fontColor':
-                case 'backgroundColor':
-                case 'borderWidth':
-                case 'borderColor':
-                    settings.opts[key] = String(doc[key]);
-                    break;
-            
-                case '_layout_borderRounding':
-                case 'opacity':
-                case '_rotation':
-                    settings.opts[key] = Number(doc[key]);
-                    break;
-            
-                case 'contentBold':
-                    settings.opts[key] = Boolean(doc[key]);
-                    break;
-            
-                case 'hCentering':
-                    settings.opts[key] = String(doc[key]) as 'h-left' | 'h-center' | 'h-right';
-                    break;
-                case 'contentYCentering':
-                    settings.opts[key] = String(doc[key]) as 'top' | 'center' | 'bottom';
-                    break;
-                case 'textTransform':
-                    settings.opts[key] = String(doc[key]) as 'uppercase' | 'lowercase';
-                    break;
-                case 'fieldViewType':
-                    settings.opts[key] = String(doc[key]) as 'freeform' | 'stacked';
-                    break;
-            
-                default:
-                    break;
-            }
-        });
         
         const newField: Field = this.initField(settings, this.subfields.length, this);
         this.subfields.push(newField);
     };
 
-    addField = (type?: ViewType) => {
-        
-    }
-
     removeField = (field: Field) => {
+        console.log('removefield called')
         this.subfields.splice(this.subfields.indexOf(field), 1);
         field.dispose();
     };
@@ -145,11 +106,11 @@ export abstract class Field {
 
     applyAttributes(field: Field) {
         field.setTitle(this.title);
-        field.initRenderedDoc(this.renderedDoc);
+        field.initializeDocument(this.renderedDoc);
         field.subfields = this.subfields;
     }
 
-    abstract initRenderedDoc(oldDoc?: Doc): void;
+    abstract initializeDocument(oldDoc?: Doc): void;
 
     dispose = () => {
         Object.values(this.disposers).forEach(disposer => disposer?.());
@@ -191,12 +152,39 @@ export abstract class Field {
         return matches;
     };
 
+    private getLocalDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentDimensions: FieldDimensions): FieldDimensions => {
+        if (!parentDimensions) {
+            return {width: coords.br[0] - coords.tl[0], height: coords.br[1] - coords.tl[1], coord: {x: coords.tl[0], y: coords.tl[1]}};
+        }
+        const l = (coords.tl[0] * parentDimensions.width) / 2;
+        const t = coords.tl[1] * parentDimensions.height / 2; //prettier-ignore
+        const r = (coords.br[0] * parentDimensions.width) / 2;
+        const b = coords.br[1] * parentDimensions.height / 2; //prettier-ignore
+        const width = r - l;
+        const height = b - t;
+        const coord = { x: l, y: t };
+        return { width, height, coord };
+    };
+
+    private applyBasicOpts = (dimensions: FieldDimensions, settings: FieldSettings) => {
+        const opts: DocumentOptions = settings.opts;
+        opts.isDefaultTemplateDoc = true;
+        opts._layout_hideScroll = true;
+        opts.x = dimensions.coord.x;
+        opts.y = dimensions.coord.y;
+        opts._height = dimensions.height;
+        opts._width = dimensions.width;
+        opts._nativeWidth = dimensions.width;
+        opts._nativeHeight = dimensions.height;
+        opts._layout_nativeDimEditable = true;
+    };
+
 }
 
 export type FieldSettings = {
     tl: [number, number];
     br: [number, number];
-    opts: FieldOpts;
+    opts: DocumentOptions;
     viewType: ViewType;
     title?: string;
     subfields?: FieldSettings[];
@@ -219,19 +207,3 @@ export type FieldDimensions = {
     height: number;
     coord: {x: number, y: number};
 }
-
-export class FieldOpts {
-    backgroundColor?: string;
-    text_fontColor?: string;
-    _layout_borderRounding?: number;
-    borderWidth?: string;
-    borderColor?: string;
-    hCentering?: 'h-left' | 'h-center' | 'h-right';
-    contentYCentering?: 'top' | 'center' | 'bottom';
-    opacity?: number;
-    _rotation?: number;
-    //animation?: boolean;
-    contentBold?: boolean;
-    textTransform?: 'uppercase' | 'lowercase';
-    fieldViewType?: 'freeform' | 'stacked';
-}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
index d7cf24794..f3e4130a4 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
@@ -1,25 +1,9 @@
-import { Doc } from "../../../../../../fields/Doc";
-import { ComputedField, ScriptField } from "../../../../../../fields/ScriptField";
-import { Col } from "../DocCreatorMenu";
-import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from "../TemplateBackend";
 import { DynamicField } from "./DynamicField";
-import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field";
+import { Field, FieldSettings, ViewType } from "./Field";
 import { TextTemplateField, ImageTemplateField } from "./StaticContentField";
 import { DecorationField } from "./DecorationField";
 
 export class FieldUtils {
-    public static getLocalDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentDimensions: FieldDimensions): FieldDimensions => {
-        //console.log('parent dimensions', parentDimensions, 'coords: ', coords);
-        const l = (coords.tl[0] * parentDimensions.width) / 2;
-        const t = coords.tl[1] * parentDimensions.height / 2; //prettier-ignore
-        const r = (coords.br[0] * parentDimensions.width) / 2;
-        const b = coords.br[1] * parentDimensions.height / 2; //prettier-ignore
-        const width = r - l;
-        const height = b - t;
-        const coord = { x: l, y: t };
-        //console.log('width: ', width, 'height: ', height);
-        return { width, height, coord };
-    };
 
     public static initField = (settings: FieldSettings, index: number, parent: Field): Field => { 
         const id = Number(`${parent.getID}${index}`);
@@ -27,42 +11,15 @@ export class FieldUtils {
             case ViewType.FREEFORM: case ViewType.CAROUSEL3D:
                 return new DynamicField(settings, id, parent);
             case ViewType.IMG:
-                return new ImageTemplateField(settings, parent, id);
+                return new ImageTemplateField(settings, id, parent);
             case ViewType.TEXT:
-                return new TextTemplateField(settings, parent, id);
+                return new TextTemplateField(settings, id, parent);
             case ViewType.DEC:
-                return new DecorationField(settings, parent, id);
+                return new DecorationField(settings, id, parent);
         }
-        return new TextTemplateField(settings, parent, id);
+        return new TextTemplateField(settings, id, parent);
     }
 
-    public static textProperties: string[] = [
-        "textTransform",
-        "contentBold",
-        "text_fontColor",
-        "hCentering",
-    ]
-
-    public static applyBasicOpts = (doc: Doc, parentDimensions: FieldDimensions, settings: FieldSettings, oldDoc?: Doc) => {
-        const opts = settings.opts;
-        doc.isDefaultTemplateDoc = oldDoc ? oldDoc.isDefaultTemplateDoc : true;
-        doc._layout_hideScroll = oldDoc ? oldDoc._layout_hideScroll : true;
-        doc.x = oldDoc ? oldDoc.x : parentDimensions.coord.x;
-        doc.y = oldDoc ? oldDoc.y : parentDimensions.coord.y;
-        doc._height = oldDoc ? oldDoc.height : parentDimensions.height;
-        doc._width = oldDoc ? oldDoc.width : parentDimensions.width;
-        doc.backgroundColor = oldDoc ? oldDoc.backgroundColor : opts.backgroundColor ?? '';
-        //doc._layout_borderRounding = !opts._layout_borderRounding ? '0px' : ScriptField.MakeFunction(`${opts._layout_borderRounding} * this.width + 'px'`);
-        doc.borderColor = oldDoc ? oldDoc.borderColor : opts.borderColor;
-        doc.borderWidth = oldDoc ? oldDoc.borderWidth : opts.borderWidth;
-        doc.opacity = oldDoc ? oldDoc.opacity : opts.opacity;
-        doc._rotation = oldDoc ? oldDoc._rotation : opts._rotation;
-        doc.hCentering = oldDoc ? oldDoc.hCentering : opts.hCentering;
-        doc.nativeWidth = parentDimensions.width;
-        doc.nativeHeight = parentDimensions.height;
-        doc._layout_nativeDimEditable = true;
-    };
-
     public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
         const words: string[] = text.split(/\s+/).filter(Boolean);
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx
index 627d3a939..63fe530a6 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx
@@ -1,22 +1,20 @@
 import { Doc, DocListCast } from "../../../../../../fields/Doc";
 import { Docs, DocumentOptions } from "../../../../../documents/Documents";
-import { FieldUtils } from "./FieldUtils";
 import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field";
 import { RichTextField } from "../../../../../../fields/RichTextField";
 import { DocData } from "../../../../../../fields/DocSymbols";
 import { ImageField } from "../../../../../../fields/URLField";
 import { ViewComponentType } from "@fullcalendar/core";
+import { DynamicField } from "./DynamicField";
+import { FieldUtils } from "./FieldUtils";
 
 export abstract class StaticContentField extends Field {
 
     protected content: string = ''; 
     protected subfields: Field[];
 
-    protected dimensions: FieldDimensions;
-
     constructor(settings: FieldSettings, parent: Field, id: number) {
         super(settings, id, FieldUtils.initField, parent);
-        this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
         this.subfields = this.setupSubfields(this);
     };
 
@@ -24,22 +22,22 @@ export abstract class StaticContentField extends Field {
     getContent = () => { return this.content ?? 'unset'};
     get isContentField(): boolean { return true };
 
-    abstract initRenderedDoc(): Doc;
+    abstract initializeDocument(): Doc;
 }
 
 export class ImageTemplateField extends StaticContentField {
 
-    protected renderedDocument: Doc;
+    protected Document: Doc;
 
-    constructor(settings: FieldSettings, parent: Field, id: number){
+    constructor(settings: FieldSettings, id: number, parent: Field){
         super(settings, parent, id)
-        this.renderedDocument = this.initRenderedDoc();
+        this.Document = this.initializeDocument();
     }
 
     setContent = (url: string, type: ViewType) => { 
         if (type === ViewType.IMG){
             const imgField = new ImageField(url);
-            this.renderedDocument[DocData]['data'] = imgField;
+            this.Document[DocData]['data'] = imgField;
             this.content = url;
         } else {
             const updatedField = this.changeFieldType(type);
@@ -47,15 +45,14 @@ export class ImageTemplateField extends StaticContentField {
         }
     };
 
-    initRenderedDoc = (): Doc => {
+    initializeDocument = (): Doc => {
         const url = String(this.content);
-        let doc: Doc = Docs.Create.ImageDocument(url, {
-            title: this.title,
-            _layout_fitWidth: false,
-        });
-        FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings);
+        this.settings.opts.title = this.title;
+        this.settings.opts._layout_fitWidth = false;
+
+        let doc: Doc = Docs.Create.ImageDocument(url, this.settings.opts);
 
-        this.renderedDocument = doc;
+        this.Document = doc;
 
         return doc;
     };
@@ -63,11 +60,11 @@ export class ImageTemplateField extends StaticContentField {
 
 export class TextTemplateField extends StaticContentField {
 
-    protected renderedDocument: Doc;
+    protected Document: Doc;
 
-    constructor(settings: FieldSettings, parent: Field, id: number){
+    constructor(settings: FieldSettings, id: number, parent: Field){
         super(settings, parent, id)
-        this.renderedDocument = this.initRenderedDoc();
+        this.Document = this.initializeDocument();
     }
 
     setContent = (text: string, type: ViewType) => { 
@@ -92,27 +89,23 @@ export class TextTemplateField extends StaticContentField {
             };
             this.content = text;
             const field = new RichTextField(JSON.stringify(rtf), text);
-            this.renderedDocument[DocData]['text'] = field;
+            this.Document[DocData]['text'] = field;
         } else {
             const updatedField = this.changeFieldType(type);
             updatedField.setContent(text, type);
         }
     };
 
-    initRenderedDoc = (): Doc => {
+    initializeDocument = (): Doc => {
         const opts = this.settings.opts;
-        const text = String(this.content);
-        let doc: Doc = Docs.Create.TextDocument(text, {
-            title: this.title,
-            text_fontColor: opts.text_fontColor,
-            contentBold: opts.contentBold,
-            textTransform: opts.textTransform,
-            color: opts.text_fontColor,
-            _text_fontSize: `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}`
-        });
-        FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings);
-
-        this.renderedDocument = doc;
+        const text = this.content;
+
+        // opts._text_fontSize = `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}`;
+        opts.title = this.title;
+
+        let doc: Doc = Docs.Create.TextDocument(text, opts);
+
+        this.Document = doc;
 
         return doc;
     };
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index a80df8468..687b655d1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -38,7 +38,7 @@ export class Template {
             const matchingField: Field = this.allFields.filter(f => f.getID === field.getID)[0];
             matchingField.applyAttributes(field);
         })
-        clone.mainField.initRenderedDoc();
+        clone.mainField.initializeDocument();
         return clone;
     }
 
@@ -83,7 +83,7 @@ export class Template {
 
     resetToBase = () => {
         this.allFields.forEach(field => {
-            field.initRenderedDoc();
+            field.initializeDocument();
         })
     }
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
index 583b2f472..b1e06206f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
@@ -1,4 +1,4 @@
-import { FieldOpts, FieldSettings, ViewType } from "./FieldTypes/Field";
+import { FieldSettings, ViewType } from "./FieldTypes/Field";
 
 export enum TemplateFieldType {
     TEXT = 'text',
@@ -34,7 +34,7 @@ export class TemplateLayouts {
         viewType: ViewType.FREEFORM,
         opts: {
             backgroundColor: '#C0B887',
-            _layout_borderRounding: .05,
+            _layout_borderRounding: '.05',
             //borderColor: '#6B461F',
             //borderWidth: '12',
         },
@@ -61,7 +61,7 @@ export class TemplateLayouts {
                 sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                 description: 'The main focus of the template; could be an image, long text, etc.',
                 opts: {
-                    _layout_borderRounding: .05,
+                    _layout_borderRounding: '.05',
                     borderColor: '#8F5B25',
                     borderWidth: '6',
                     backgroundColor: '#CECAB9',
@@ -88,7 +88,7 @@ export class TemplateLayouts {
                 sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                 description: 'A medium-sized field for medium/long text.',
                 opts: {
-                    _layout_borderRounding: .05,
+                    _layout_borderRounding: '.05',
                     borderColor: '#8F5B25',
                     borderWidth: '6',
                     backgroundColor: '#CECAB9',
-- 
cgit v1.2.3-70-g09d2