bunch of changes related to rendering changes to template docs; trying to make it so docs don't need to rerender every time, and so that all attributes are accounted for.

9 files changed, 194 insertions, 95 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 2324006f7..5ff809170 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -1027,10 +1027,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }
     }
 
-    // doc = () => {
-    //     return Docs.Create.FreeformDocument([], { _height: 200, _width: 200, title: 'title'});
-    // }
-
     screenToLocalTransform = () => this._props.ScreenToLocalTransform();
 
     applyLayout = (collection: Doc, docs: Doc[]) => {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/EditableTemplateDoc.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/EditableTemplateDoc.tsx
new file mode 100644
index 000000000..5ec27f338
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/EditableTemplateDoc.tsx
@@ -0,0 +1,22 @@
+import { Doc } from "../../../../../fields/Doc";
+import { SubCollectionViewProps } from "../../../collections/CollectionSubView";
+import { CollectionFreeFormView } from "../../../collections/collectionFreeForm";
+import { TemplateManager } from "./TemplateManager";
+import { TemplateLayouts } from "./TemplateBackend";
+import { Template } from "./Template";
+
+class EditableTemplateDoc extends CollectionFreeFormView {
+
+    template: Template;
+
+    constructor(props: SubCollectionViewProps, template: Template){
+        super(props);
+        this.template = template;
+    }
+
+    addDocumenta = (newBox: Doc | Doc[]): boolean => {
+        this.addDocument(newBox);
+        
+        return true;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
index 68cf027b0..c6f07d6c6 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
@@ -36,6 +36,11 @@ export class DynamicField implements Field {
     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[] = [];
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
index ebd8f0f6c..5eaa7381c 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
@@ -17,7 +17,7 @@ export interface Field {
     applyAttributes: (field: Field) => void;
     renderedDoc: () => Doc;
     matches: (cols: Col[]) => number[];
-    updateRenderedDoc: (oldDoc?: Doc) => Doc;
+    updateRenderedDoc: (oldDoc?: Doc) => void;
 }
 
 export type FieldSettings = {
@@ -52,16 +52,16 @@ export type FieldDimensions = {
 
 export interface FieldOpts {
     backgroundColor?: string;
-    color?: string;
-    cornerRounding?: number;
+    text_fontColor?: string;
+    _layout_borderRounding?: number;
     borderWidth?: string;
     borderColor?: string;
-    contentXCentering?: 'h-left' | 'h-center' | 'h-right';
+    hCentering?: 'h-left' | 'h-center' | 'h-right';
     contentYCentering?: 'top' | 'center' | 'bottom';
     opacity?: number;
-    rotation?: number;
+    _rotation?: number;
     //animation?: boolean;
-    fontBold?: boolean;
-    fontTransform?: 'uppercase' | 'lowercase';
+    contentBold?: boolean;
+    textTransform?: 'uppercase' | 'lowercase';
     fieldViewType?: 'freeform' | 'stacked';
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
index 3886774d2..9ae04d086 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
@@ -16,6 +16,15 @@ export class FieldUtils {
         return { width, height, coord };
     };
 
+
+
+    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;
@@ -25,12 +34,12 @@ export class FieldUtils {
         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.cornerRounding ? '0px' : ScriptField.MakeFunction(`${opts.cornerRounding} * this.width + 'px'`);
+        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.contentXCentering;
+        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;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
index e55c127e7..db54f1397 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
@@ -7,6 +7,8 @@ import { Template } from "../Template";
 import { DynamicField } from "./DynamicField";
 import { FieldUtils } from "./FieldUtils";
 import { Field, FieldContentType, FieldDimensions, FieldSettings, ViewType } from "./Field";
+import { indexOf } from "lodash";
+import { ScriptField } from "../../../../../../fields/ScriptField";
 
 export class StaticField {
     private content: string;
@@ -14,6 +16,8 @@ export class StaticField {
     private subfields: Field[] = [];
     private renderedDocument: Doc;
 
+    private storedAttributes: Record<string, any>;
+
     private id: number;
     private title: string = '';
 
@@ -30,7 +34,8 @@ export class StaticField {
         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.contentType ?? FieldContentType.STRING);
+        this.storedAttributes = new DocumentOptions();
     };
 
     get getSubfields(): Field[] { return this.subfields ?? []; };
@@ -59,7 +64,7 @@ export class StaticField {
     setContent = (newContent: string, type?: FieldContentType) => { 
         this.content = newContent;
         if (type) this.contentType = type;
-        this.updateRenderedDoc(this.renderedDocument);
+        this.updateRenderedDoc(this.renderedDocument, true);
     };
     getContent() { return this.content };
 
@@ -77,23 +82,13 @@ export class StaticField {
     }
 
     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.FREEFORM || type === ViewType.CAROUSEL3D) { 
-                field = new DynamicField(fieldSettings, id, this); 
-            } else {
-                field = new StaticField(fieldSettings, this, id);
-            };
-
-            fields.push(field);
-        });
-        return fields;
-    };
+        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);
+        }) || [];
+    }
 
     matches = (cols: Col[]): number[] => {
         const colMatchesField = (col: Col) => {
@@ -115,38 +110,82 @@ export class StaticField {
         return matches;
     };
 
-    updateRenderedDoc = (oldDoc?: Doc): Doc => {
+    updateRenderedDoc = (currDoc?: Doc, forceRerender?: boolean) => {
         const opts = this.settings.opts;
 
         if (!this.contentType) { this.contentType = FieldContentType.STRING };
 
         let doc: Doc;
 
+        if (this.shouldRerender()) {
+            this.updateStoredAttributes(this.renderedDocument);
+            switch (this.contentType) {
+                case FieldContentType.STRING:
+                    const text = String(this.content);
+                    doc = Docs.Create.TextDocument(text, this.storedAttributes);
+                    break;
+                case FieldContentType.IMAGE:
+                    const url = String(this.content);
+                    doc = Docs.Create.ImageDocument(url, this.storedAttributes);
+                    break;
+            }   
+            this.renderedDocument = doc;
+        } else {
+            this.updateStoredAttributes(this.renderedDocument);
+        }
+    };
+
+    private updateStoredAttributes = (currDoc?: Doc) => {
+        const opts = this.settings.opts;
+        Object.entries(this.storedAttributes).forEach(([key, value]) => {
+            key = String(key);
+            if (currDoc && currDoc[key] !== undefined) {
+                this.storedAttributes[key] = currDoc[key];
+            } else if (opts[key as keyof typeof opts] !== undefined) {
+                this.storedAttributes[key] = opts[key as keyof typeof opts];
+            }
+        });
+    }
+
+    private shouldRerender = (): boolean => {
+        return FieldUtils.textProperties.some(property => 
+            this.renderedDocument[property] !== this.storedAttributes[property]
+        );
+    };
+
+    private setupRenderedDoc = (contentType: FieldContentType): Doc => {
+        const opts = this.settings.opts;
+
+        const docOptions: Record<string, any> = new DocumentOptions();
+
+        docOptions.isDefaultTemplateDoc = true;
+        docOptions.x = this.dimensions.coord.x;
+        docOptions.y = this.dimensions.coord.y;
+        docOptions._height = this.dimensions.height;
+        docOptions._width = this.dimensions.width;
+        docOptions._nativeWidth = this.dimensions.width;
+        docOptions._nativeHeight = this.dimensions.height;
+
+        Object.keys(opts).forEach(([key, value]) => {
+            docOptions[key] = value;
+        });
+
+        let doc: Doc;
         switch (this.contentType) {
             case FieldContentType.STRING:
-                const text = String(this.content);
-                doc = Docs.Create.TextDocument(text, {
-                    title: this.title,
-                    text_fontColor: oldDoc ? String(oldDoc.color) : opts.color,
-                    contentBold: oldDoc ? Boolean(oldDoc.fontBold) : opts.fontBold,
-                    textTransform: oldDoc ? String(oldDoc.fontTransform) : opts.fontTransform,
-                    color: oldDoc ? String(oldDoc.color) : opts.color,
-                    _text_fontSize: `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}`
-                });
-                FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc);
+                doc = Docs.Create.TextDocument(this.content, docOptions);
                 break;
             case FieldContentType.IMAGE:
-                const url = String(this.content);
-                doc = Docs.Create.ImageDocument(url, {
-                    title: this.title,
-                    _layout_fitWidth: false,
-                });
-                FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc);
+                doc = Docs.Create.ImageDocument(this.content, docOptions);
                 break;
-        }   
+            default:
+                doc = Docs.Create.TextDocument(this.content, docOptions);
+                break;
+        }  
 
-        this.renderedDocument = doc;
+        doc._layout_hideScroll = true;
+        doc._layout_borderRounding = !opts._layout_borderRounding ? '0px' : ScriptField.MakeFunction(`${opts._layout_borderRounding} * this.width + 'px'`);
 
         return doc;
-    };
+        }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index 31402eeeb..4680b0316 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -1,4 +1,5 @@
 
+import { makeAutoObservable } from "mobx";
 import { Doc, FieldType } from "../../../../../fields/Doc";
 import { Docs } from "../../../../documents/Documents";
 import { Col } from "./DocCreatorMenu";
@@ -6,22 +7,33 @@ import { DynamicField } from "./FieldTypes/DynamicField";
 import { Field, FieldSettings, ViewType } from "./FieldTypes/Field";
 import {  } from "./FieldTypes/FieldUtils";
 import { } from "./FieldTypes/StaticField";
+import { observer } from "mobx-react";
 
 export class Template {
 
     mainField: DynamicField;
     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 => {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
index 99edce34e..4f1186320 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
@@ -20,6 +20,14 @@ export class TemplateLayouts {
         return Object.values(TemplateLayouts);
     }
 
+    public static BasicSettings: FieldSettings = {
+        title: 'template_framework',
+        tl: [0, 0],
+        br: [400, 700],
+        viewType: ViewType.FREEFORM,
+        opts: {}
+    }
+
     public static FourField001: FieldSettings = {
         title: 'fourfield001',
         tl: [0, 0],
@@ -27,7 +35,7 @@ export class TemplateLayouts {
         viewType: ViewType.FREEFORM,
         opts: {
             backgroundColor: '#C0B887',
-            cornerRounding: .05,
+            _layout_borderRounding: .05,
             //borderColor: '#6B461F',
             //borderWidth: '12',
         },
@@ -41,9 +49,9 @@ export class TemplateLayouts {
                 description: 'A title field for very short text that contextualizes the content.',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: '#F1F0E9',
-                    contentXCentering: 'h-center',
-                    fontBold: true,
+                    text_fontColor: '#F1F0E9',
+                    hCentering: 'h-center',
+                    contentBold: true,
                 },
             },
             {
@@ -54,7 +62,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: {
-                    cornerRounding: .05,
+                    _layout_borderRounding: .05,
                     borderColor: '#8F5B25',
                     borderWidth: '6',
                     backgroundColor: '#CECAB9',
@@ -69,8 +77,8 @@ export class TemplateLayouts {
                 description: 'A caption for field #2, very short text.',
                 opts: {
                     backgroundColor: 'transparent',
-                    contentXCentering: 'h-center',
-                    color: '#F1F0E9',
+                    hCentering: 'h-center',
+                    text_fontColor: '#F1F0E9',
                 },
             },
             {
@@ -81,7 +89,7 @@ export class TemplateLayouts {
                 sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                 description: 'A medium-sized field for medium/long text.',
                 opts: {
-                    cornerRounding: .05,
+                    _layout_borderRounding: .05,
                     borderColor: '#8F5B25',
                     borderWidth: '6',
                     backgroundColor: '#CECAB9',
@@ -110,7 +118,7 @@ export class TemplateLayouts {
                     borderWidth: '8',
                     borderColor: '#F8E71C',
                     backgroundColor: '#242425',
-                    color: 'white',
+                    text_fontColor: 'white',
                 },
             },
             {
@@ -122,9 +130,9 @@ export class TemplateLayouts {
                 description: 'A tiny field for just a word or two of plain text.',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: 'white',
-                    contentXCentering: 'h-center',
-                    fontTransform: 'uppercase',
+                    text_fontColor: 'white',
+                    hCentering: 'h-center',
+                    textTransform: 'uppercase',
                 },
             },
             {
@@ -136,9 +144,9 @@ export class TemplateLayouts {
                 description: 'A tiny field for just a word or two of plain text.',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: 'white',
-                    contentXCentering: 'h-center',
-                    fontTransform: 'uppercase',
+                    text_fontColor: 'white',
+                    hCentering: 'h-center',
+                    textTransform: 'uppercase',
                 },
             },
             {
@@ -151,7 +159,7 @@ export class TemplateLayouts {
                 opts: {
                     borderWidth: '8',
                     borderColor: '#F8E71C',
-                    color: 'white',
+                    text_fontColor: 'white',
                     backgroundColor: '#242425',
                 },
             },
@@ -161,7 +169,7 @@ export class TemplateLayouts {
                 br: [-0.525, 0.075],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    rotation: 45,
+                    _rotation: 45,
                 },
             },
             {
@@ -170,7 +178,7 @@ export class TemplateLayouts {
                 br: [-0.2175, 0.0245],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    rotation: 45,
+                    _rotation: 45,
                 },
             },
             {
@@ -179,7 +187,7 @@ export class TemplateLayouts {
                 br: [0.045, 0.0245],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    rotation: 45,
+                    _rotation: 45,
                 },
             },
             {
@@ -188,7 +196,7 @@ export class TemplateLayouts {
                 br: [0.3075, 0.0245],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    rotation: 45,
+                    _rotation: 45,
                 },
             },
             {
@@ -197,7 +205,7 @@ export class TemplateLayouts {
                 br: [0.8, 0.075],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    rotation: 45,
+                    _rotation: 45,
                 },
             },
         ],
@@ -285,7 +293,7 @@ export class TemplateLayouts {
                     backgroundColor: '#E2B4F5',
                     borderWidth: '9',
                     borderColor: '#9222F1',
-                    contentXCentering: 'h-center',
+                    hCentering: 'h-center',
                 },
             },
             {
@@ -299,7 +307,7 @@ export class TemplateLayouts {
                     backgroundColor: '#F5B4DD',
                     borderWidth: '9',
                     borderColor: '#E260F3',
-                    contentXCentering: 'h-center',
+                    hCentering: 'h-center',
                 },
             },
             {
@@ -359,7 +367,7 @@ export class TemplateLayouts {
                 opts: {
                     borderColor: '#3B4A2C',
                     borderWidth: '8',
-                    contentXCentering: "h-center",
+                    hCentering: "h-center",
                     backgroundColor: '#B8DC90',
                 },
             },
@@ -373,7 +381,7 @@ export class TemplateLayouts {
                 opts: {
                     borderColor: '#3B4A2C',
                     borderWidth: '8',
-                    contentXCentering: "h-center",
+                    hCentering: "h-center",
                     backgroundColor: '#B8DC90',
                 },
             },
@@ -410,7 +418,7 @@ export class TemplateLayouts {
                 opts: {
                     borderColor: '#3B4A2C',
                     borderWidth: '8',
-                    contentXCentering: "h-center",
+                    hCentering: "h-center",
                     backgroundColor: '#B8DC90',
                 },
             },
@@ -496,7 +504,7 @@ export class TemplateLayouts {
                 opts: {
                     borderColor: 'yellow',
                     borderWidth: '8',
-                    contentXCentering: "h-center",
+                    hCentering: "h-center",
                     backgroundColor: 'transparent',
                 },
             },
@@ -569,7 +577,7 @@ export class TemplateLayouts {
                     borderColor: 'yellow',
                     borderWidth: '8',
                     backgroundColor: '#DDD3A9',
-                    rotation: 45,
+                    _rotation: 45,
                 },
                 subfields: [
                     {
@@ -580,7 +588,7 @@ export class TemplateLayouts {
                     sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                     description: 'A medium to large field for visual content that is the central focus.',
                     opts: {
-                        rotation: -45,
+                        _rotation: -45,
                     },
                 },
             ]
@@ -594,7 +602,7 @@ export class TemplateLayouts {
                 description: 'A very small text field for one to a few words. A good caption for the image.',
                 opts: {
                     backgroundColor: 'transparent',
-                    contentXCentering: 'h-center',
+                    hCentering: 'h-center',
                 },
             },
             {
@@ -606,7 +614,7 @@ export class TemplateLayouts {
                 description: 'A medium to large text field for a thorough description of the image. ',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: 'white',
+                    text_fontColor: 'white',
                 },
             },
             {
@@ -615,7 +623,7 @@ export class TemplateLayouts {
                 br: [1.8, -0.66],
                 opts: {
                     backgroundColor: '#CEB155',
-                    rotation: 45,
+                    _rotation: 45,
                 },
                 subfields: [
                     {
@@ -634,7 +642,7 @@ export class TemplateLayouts {
                 br: [-0.2, -0.66],
                 opts: {
                     backgroundColor: '#CEB155',
-                    rotation: 135,
+                    _rotation: 135,
                 },
                 subfields: [
                     {
@@ -653,7 +661,7 @@ export class TemplateLayouts {
                 br: [1.66, 1.25],
                 opts: {
                     backgroundColor: '#CEB155',
-                    rotation: 135,
+                    _rotation: 135,
                 },
                 subfields: [
                     {
@@ -672,7 +680,7 @@ export class TemplateLayouts {
                 br: [-0.33, 1.25],
                 opts: {
                     backgroundColor: '#CEB155',
-                    rotation: 45,
+                    _rotation: 45,
                 },
                 subfields: [
                     {
@@ -718,10 +726,10 @@ export class TemplateLayouts {
                 description: 'A very small text field for one to a few words. The content should represent a general categorization of the image.',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: '#AF0D0D',
-                    fontTransform: 'uppercase',
-                    fontBold: true,
-                    contentXCentering: 'h-left',
+                    text_fontColor: '#AF0D0D',
+                    textTransform: 'uppercase',
+                    contentBold: true,
+                    hCentering: 'h-left',
                 },
             },
             {
@@ -733,8 +741,8 @@ export class TemplateLayouts {
                 description: 'A very small text field for one to a few words. The content should contextualize field 2.',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: 'black',
-                    contentXCentering: 'h-right',
+                    text_fontColor: 'black',
+                    hCentering: 'h-right',
                 },
             },
             {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
index 890bc6f73..95f0da43d 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
@@ -20,4 +20,12 @@ export class TemplateManager {
     getValidTemplates = (cols: Col[]): Template[] => {
         return this.templates.filter(template => template.isValidTemplate(cols));
     }
+
+    addTemplate = (newTemplate: Template) =>{
+        this.templates.push(newTemplate);
+    }
+
+    removeTemplate = (template: Template) => {
+        this.templates.splice(this.templates.indexOf(template), 1);
+    }
 }
\ No newline at end of file