work on field refactor

6 files changed, 680 insertions, 706 deletions

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index e743f01f5..d38e512bd 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -66,19 +66,19 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
         prompt: 'List unique differences between the content of the UserAnswer and Rubric. Before each difference, label it and provide any additional information the UserAnswer missed and explain it in second person without separating it into UserAnswer and Rubric content and additional information. If there are no differences, say correct',
     },
     template: {
-        model: 'gpt-4-turbo',
+        model: 'gpt-4o-mini',
         maxTokens: 512,
         temp: 0.5,
         prompt: 'You will be given a list of field descriptions for multiple templates in the format {field #0: “description”}{field #1: “description”}{...}, and a list of column descriptions in the format {“title”: “description”}{...}. Your job is to match columns with fields based on their descriptions. Your output should be in the following JSON format: {“Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}, “Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}} where “Template title” represents the template,  # represents the field # and “title” the title of the column assigned to it. A filled out example might look like {“fivefield2”:{“0”:”Name”, “1”:”Image”, “2”:”Caption”, “3”:”Position”, “4”:”Stats”}, “fivefield3”:{0:”Image”, 1:”Name”, 2:”Caption”, 3:”Stats”, 4:”Position”}. Include one object for each template. IT IS VERY IMPORTANT THAT YOU ONLY INCLUDE TEXT IN THE FORMAT ABOVE, WITH NO ADDITIONS WHATSOEVER. Do not include extraneous ‘#’ characters, ‘column’ for columns, or ‘template’ for templates: ONLY THE TITLES AND NUMBERS. There should never be one column assigned to more than one field (ie. if the “name” column is assigned to field 1, it can’t be assigned to any other fields) . Do this for each template whose fields are described. The descriptions are as follows:',
     },
     vizsum: {
-        model: 'gpt-4-turbo',
+        model: 'gpt-4o-mini',
         maxTokens: 512,
         temp: 0.5,
         prompt: 'Your job is to provide brief descriptions for columns in a dataset based on example rows. Your descriptions should be geared towards how each column’s data might fit together into a visual template. Would they make good titles, main focuses, captions, descriptions, etc. Pay special attention to connections between columns, i.e. is there one column that specifically seems to describe/be related to another more than the rest? You should provide your analysis in JSON format like so: {“col1”:”description”, “col2”:”description”, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.',
     },
     vizsum2: {
-        model: 'gpt-4-turbo',
+        model: 'gpt-4o-mini',
         maxTokens: 512,
         temp: 0.5,
         prompt: 'Your job is to provide structured information on columns in a dataset based on example rows. You will categorize each column in two ways: by type and size. The size categories are as follows: tiny (one or two words), small (a sentence/multiple words), medium (a few sentences), large (a longer paragraph), and huge (a very long or multiple paragraphs). The type categories are as follows: visual (links/file paths to images, pdfs, maps, or any other visual media type), and text (plain text that isn’t a link/file path). Visual media should be assumed to have size “medium” “large” or “huge”. You will give your responses in JSON format, like so: {“title (of column)”:{“type”:”text”, “size”:”small”}, “title (of column)”:{“type”:”visual”, “size”:”medium”}, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.',
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index c44fb2ee2..c34403e79 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -29,6 +29,8 @@ import './DocCreatorMenu.scss';
 import { DefaultStyleProvider, returnEmptyDocViewList } from '../../../StyleProvider';
 import { Transform } from '../../../../util/Transform';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { TemplateDocInfos, TemplateFieldSize, TemplateFieldType, TemplateLayouts } from './TemplateBackend';
+import { FieldOpts, FieldSettings } from './FieldTypes';
 
 export enum LayoutType {
     STACKED = 'stacked',
@@ -377,8 +379,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             this._selectedTemplate = template;
             MakeTemplate(template);
             const templateInfo: DataVizTemplateInfo = { doc: template, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount };
-            this._fullyRenderedDocs = this._dataViz?.createDocsFromTemplate(templateInfo, true) ?? [];
-            this.updateRenderedDocCollection();
+            // this._fullyRenderedDocs = this._dataViz?.createDocsFromTemplate(templateInfo, true) ?? [];
+            // this.updateRenderedDocCollection();
         }
     };
 
@@ -626,28 +628,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return validTemplates;
     };
 
-    // createColumnField = (template: TemplateDocInfos, field: Field, column: Col): Doc => {
-
-    //     if (field.subfields) {
-    //         const doc = FieldFuncs.FreeformField({
-    //             tl: field.tl,
-    //             br: field.br },
-    //             template.height,
-    //             template.width,
-    //             column.title,
-    //             '',
-    //             field.opts
-    //         );
-
-    //         field.subfields[1].forEach(f => {
-    //             const fDoc = ()
-    //         })
-
-    //     }
-
-    //     return new Doc;
-    // }
-
     /**
      * Populates a preset template framework with content from a datavizbox or any AI-generated content.
      * @param template the preloaded template framework being filled in
@@ -1287,7 +1267,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         this.applyLayout(docWithBasicOpts, this._fullyRenderedDocs);
 
-        const wrapper: Doc = Docs.Create.FreeformDocument([docWithBasicOpts], { _height: NumListCast(docWithBasicOpts._height)[0], _width: NumListCast(docWithBasicOpts._width)[0], title: ''});
+        const wrapper: Doc = Docs.Create.FreeformDocument([docWithBasicOpts], { _height: 200, _width: 200, title: ''});
 
         const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         mainCollection.addDocument(docWithBasicOpts);
@@ -1446,7 +1426,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                     clickEv.stopPropagation();
                                     if (!this._selectedTemplate) return;
                                     const templateInfo: DataVizTemplateInfo = { doc: this._selectedTemplate, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount };
-                                    this._renderedDocCollection && this.addDocAsResult(this._renderedDocCollection);
+                                    this._dataViz?.createDocsFromTemplate(templateInfo);
                                 }, 'make docs')
                             )
                         }>
@@ -1680,20 +1660,6 @@ export interface DataVizTemplateLayout {
     rows: number;
 }
 
-export enum TemplateFieldType {
-    TEXT = 'text',
-    VISUAL = 'visual',
-    UNSET = 'unset',
-}
-
-export enum TemplateFieldSize {
-    TINY = 'tiny',
-    SMALL = 'small',
-    MEDIUM = 'medium',
-    LARGE = 'large',
-    HUGE = 'huge',
-}
-
 export type Col = {
     sizes: TemplateFieldSize[];
     desc: string;
@@ -1701,60 +1667,6 @@ export type Col = {
     type: TemplateFieldType;
     defaultContent?: string;
 };
-export interface FieldOpts {
-    backgroundColor?: string;
-    color?: string;
-    cornerRounding?: number;
-    borderWidth?: string;
-    borderColor?: string;
-    contentXCentering?: 'h-left' | 'h-center' | 'h-right';
-    contentYCentering?: 'top' | 'center' | 'bottom';
-    opacity?: number;
-    rotation?: number;
-    //animation?: boolean;
-    fontBold?: boolean;
-    fontTransform?: 'uppercase' | 'lowercase';
-    fieldViewType?: 'freeform' | 'stacked';
-}
-
-type FieldSettings = {
-    tl: [number, number];
-    br: [number, number];
-    opts: FieldOpts;
-    subfields?: FieldSettings[];
-    types?: TemplateFieldType[];
-    sizes?: TemplateFieldSize[];
-    isDecoration?: boolean;
-    description?: string;
-};
-
-// class ContentField implements Field {
-//     tl: [number, number];
-//     br: [number, number];
-//     opts: FieldOpts;
-//     subfields?: Field[];
-//     types?: TemplateFieldType[];
-//     sizes?: TemplateFieldSize[];
-//     description?: string;
-
-//     constructor( tl: [number, number], br: [number, number],
-//                         opts: FieldOpts, subfields?: Field[],
-//                         types?: TemplateFieldType[],
-//                         sizes?: TemplateFieldSize[],
-//                         description?: string) {
-//         this.tl = tl;
-//         this.br = br;
-//         this.opts = opts;
-//         this.subfields = subfields;
-//         this.types = types;
-//         this.sizes = sizes;
-//         this.description = description;
-//     }
-
-//     render = (content: any): Doc => {
-//         return new Doc;
-//     }
-// }
 
 type DecorationField = FieldSettings;
 
@@ -1764,493 +1676,7 @@ type TemplateDecorations = FieldSettings | InkDecoration;
 
 interface TemplateOpts extends FieldOpts {}
 
-export interface TemplateDocInfos {
-    title: string;
-    height: number;
-    width: number;
-    opts: TemplateOpts;
-    fields: FieldSettings[];
-    decorations: FieldSettings[];
-}
-
-export class TemplateLayouts {
-    public static get allTemplates(): TemplateDocInfos[] {
-        return Object.values(TemplateLayouts).filter(value => typeof value === 'object' && value !== null && 'title' in value) as TemplateDocInfos[];
-    }
-
-    public static getTemplateByTitle = (title: string): TemplateDocInfos | undefined => {
-        switch (title) {
-            case 'fourfield1':
-                return TemplateLayouts.FourField001;
-            case 'fourfield2':
-                return TemplateLayouts.FourField002;
-            // case 'fourfield3':
-            //     return TemplateLayouts.FourField003;
-            case 'fourfield4':
-                return TemplateLayouts.FourField004;
-            case 'threefield1':
-                return TemplateLayouts.ThreeField001;
-            case 'threefield2':
-                return TemplateLayouts.ThreeField002;
-            default:
-                break;
-        }
-
-        return undefined;
-    };
-
-    public static FourField001: TemplateDocInfos = {
-        title: 'fourfield1',
-        width: 416,
-        height: 700,
-        opts: {
-            backgroundColor: '#C0B887',
-            cornerRounding: 20,
-            borderColor: '#6B461F',
-            borderWidth: '12',
-        },
-        fields: [
-            {
-                tl: [-0.95, -1],
-                br: [0.95, -0.85],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY],
-                description: 'A title field for very short text that contextualizes the content.',
-                opts: {
-                    backgroundColor: 'transparent',
-                    color: '#F1F0E9',
-                    contentXCentering: 'h-center',
-                    fontBold: true,
-                },
-            },
-            {
-                tl: [-0.87, -0.83],
-                br: [0.87, 0.2],
-                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-                description: 'The main focus of the template; could be an image, long text, etc.',
-                opts: {
-                    cornerRounding: 20,
-                    borderColor: '#8F5B25',
-                    borderWidth: '6',
-                    backgroundColor: '#CECAB9',
-                },
-            },
-            {
-                tl: [-0.8, 0.2],
-                br: [0.8, 0.3],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-                description: 'A caption for field #2, very short to short text that contextualizes the content of field #2',
-                opts: {
-                    backgroundColor: 'transparent',
-                    contentXCentering: 'h-center',
-                    color: '#F1F0E9',
-                },
-            },
-            {
-                tl: [-0.87, 0.37],
-                br: [0.87, 0.96],
-                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-                description: 'A medium-sized field for medium/long text.',
-                opts: {
-                    cornerRounding: 15,
-                    borderColor: '#8F5B25',
-                    borderWidth: '6',
-                    backgroundColor: '#CECAB9',
-                },
-            },
-        ],
-        decorations: [],
-    };
-
-    public static FourField002: TemplateDocInfos = {
-        title: 'fourfield2',
-        width: 425,
-        height: 778,
-        opts: {
-            backgroundColor: '#242425',
-        },
-        fields: [
-            {
-                tl: [-0.83, -0.95],
-                br: [0.83, -0.2],
-                types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
-                description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus.',
-                opts: {
-                    borderWidth: '8',
-                    borderColor: '#F8E71C',
-                },
-            },
-            {
-                tl: [-0.65, -0.2],
-                br: [0.65, -0.02],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY],
-                description: 'A tiny field for just a word or two of plain text.',
-                opts: {
-                    backgroundColor: 'transparent',
-                    color: 'white',
-                    contentXCentering: 'h-center',
-                    fontTransform: 'uppercase',
-                },
-            },
-            {
-                tl: [-0.65, 0],
-                br: [0.65, 0.18],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY],
-                description: 'A tiny field for just a word or two of plain text.',
-                opts: {
-                    backgroundColor: 'transparent',
-                    color: 'white',
-                    contentXCentering: 'h-center',
-                    fontTransform: 'uppercase',
-                },
-            },
-            {
-                tl: [-0.83, 0.2],
-                br: [0.83, 0.95],
-                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-                description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus, or share focus with field 1.',
-                opts: {
-                    borderWidth: '8',
-                    borderColor: '#F8E71C',
-                    color: 'white',
-                    backgroundColor: '#242425',
-                },
-            },
-        ],
-        decorations: [
-            {
-                tl: [-0.8, -0.075],
-                br: [-0.525, 0.075],
-                opts: {
-                    backgroundColor: '#F8E71C',
-                    rotation: 45,
-                },
-            },
-            {
-                tl: [-0.3075, -0.0245],
-                br: [-0.2175, 0.0245],
-                opts: {
-                    backgroundColor: '#F8E71C',
-                    rotation: 45,
-                },
-            },
-            {
-                tl: [-0.045, -0.0245],
-                br: [0.045, 0.0245],
-                opts: {
-                    backgroundColor: '#F8E71C',
-                    rotation: 45,
-                },
-            },
-            {
-                tl: [0.2175, -0.0245],
-                br: [0.3075, 0.0245],
-                opts: {
-                    backgroundColor: '#F8E71C',
-                    rotation: 45,
-                },
-            },
-            {
-                tl: [0.525, -0.075],
-                br: [0.8, 0.075],
-                opts: {
-                    backgroundColor: '#F8E71C',
-                    rotation: 45,
-                },
-            },
-        ],
-    };
-
-    // public static FourField003: TemplateDocInfos = {
-    //     title: 'fourfield3',
-    //     width: 477,
-    //     height: 662,
-    //     opts: {
-    //         backgroundColor: '#9E9C95'
-    //     },
-    //     fields: [{
-    //         tl: [-.875, -.9],
-    //         br: [.875, .7],
-    //         types: [TemplateFieldType.VISUAL],
-    //         sizes: [TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-    //         description: '',
-    //         opts: {
-    //             borderWidth: '15',
-    //             borderColor: '#E0E0DA',
-    //         }
-    //     }, {
-    //         tl: [-.95, .8],
-    //         br: [-.1, .95],
-    //         types: [TemplateFieldType.TEXT],
-    //         sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-    //         description: '',
-    //         opts: {
-    //             backgroundColor: 'transparent',
-    //             color: 'white',
-    //             contentXCentering: 'h-right',
-    //         }
-    //     }, {
-    //         tl: [.1, .8],
-    //         br: [.95, .95],
-    //         types: [TemplateFieldType.TEXT],
-    //         sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-    //         description: '',
-    //         opts: {
-    //             backgroundColor: 'transparent',
-    //             color: 'red',
-    //             fontTransform: 'uppercase',
-    //             contentXCentering: 'h-left'
-    //         }
-    //     }, {
-    //         tl: [0, -.9],
-    //         br: [.85, -.66],
-    //         types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
-    //         sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-    //         description: '',
-    //         opts: {
-    //             backgroundColor: 'transparent',
-    //             contentXCentering: 'h-right'
-    //         }
-    //     }],
-    //     decorations: [{
-    //         tl: [-.025, .8],
-    //         br: [.025, .95],
-    //         opts: {
-    //             backgroundColor: '#E0E0DA',
-    //         }
-    //     }]
-    // };
-
-    public static FourField004: TemplateDocInfos = {
-        title: 'fourfield4',
-        width: 414,
-        height: 583,
-        opts: {
-            backgroundColor: '#6CCAF0',
-            borderColor: '#1088C3',
-            borderWidth: '10',
-        },
-        fields: [
-            {
-                tl: [-0.86, -0.92],
-                br: [-0.075, -0.77],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY],
-                description: 'A tiny field for just a word or two of plain text.',
-                opts: {
-                    backgroundColor: '#E2B4F5',
-                    borderWidth: '9',
-                    borderColor: '#9222F1',
-                    contentXCentering: 'h-center',
-                },
-            },
-            {
-                tl: [0.075, -0.92],
-                br: [0.86, -0.77],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY],
-                description: 'A tiny field for just a word or two of plain text.',
-                opts: {
-                    backgroundColor: '#F5B4DD',
-                    borderWidth: '9',
-                    borderColor: '#E260F3',
-                    contentXCentering: 'h-center',
-                },
-            },
-            {
-                tl: [-0.81, -0.64],
-                br: [0.81, 0.48],
-                types: [TemplateFieldType.VISUAL],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-                description: 'A large to huge field for visual content that is the main content of the template.',
-                opts: {
-                    borderWidth: '16',
-                    borderColor: '#A2BD77',
-                },
-            },
-            {
-                tl: [-0.86, 0.6],
-                br: [0.86, 0.92],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
-                description: 'A medium to large field for text that describes the visual content above',
-                opts: {
-                    borderWidth: '9',
-                    borderColor: '#F0D601',
-                    backgroundColor: '#F3F57D',
-                },
-            },
-        ],
-        decorations: [
-            {
-                tl: [-0.852, -0.67],
-                br: [0.852, 0.51],
-                opts: {
-                    backgroundColor: 'transparent',
-                    borderColor: '#007C0C',
-                    borderWidth: '10',
-                },
-            },
-        ],
-    };
-
-    public static ThreeField001: TemplateDocInfos = {
-        title: 'threefield1',
-        width: 575,
-        height: 770,
-        opts: {
-            backgroundColor: '#DDD3A9',
-        },
-        fields: [
-            {
-                tl: [-0.66, -0.747],
-                br: [0.66, 0.247],
-                types: [TemplateFieldType.VISUAL],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-                description: 'A medium to large field for visual content that is the central focus.',
-                opts: {
-                    borderColor: 'yellow',
-                    borderWidth: '8',
-                    rotation: 45,
-                },
-            },
-            {
-                tl: [-0.7, 0.2],
-                br: [0.7, 0.46],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-                description: 'A very small text field for one to a few words. A good caption for the image.',
-                opts: {
-                    backgroundColor: 'transparent',
-                    contentXCentering: 'h-center',
-                },
-            },
-            {
-                tl: [-0.95, 0.5],
-                br: [0.95, 0.95],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
-                description: 'A medium to large text field for a thorough description of the image. ',
-                opts: {
-                    backgroundColor: 'transparent',
-                    color: 'white',
-                },
-            },
-        ],
-        decorations: [
-            {
-                tl: [0.2, -1.32],
-                br: [1.8, -0.66],
-                opts: {
-                    backgroundColor: '#CEB155',
-                    rotation: 45,
-                },
-            },
-            {
-                tl: [-1.8, -1.32],
-                br: [-0.2, -0.66],
-                opts: {
-                    backgroundColor: '#CEB155',
-                    rotation: 135,
-                },
-            },
-            {
-                tl: [0.33, 0.75],
-                br: [1.66, 1.25],
-                opts: {
-                    backgroundColor: '#CEB155',
-                    rotation: 135,
-                },
-            },
-            {
-                tl: [-1.66, 0.75],
-                br: [-0.33, 1.25],
-                opts: {
-                    backgroundColor: '#CEB155',
-                    rotation: 45,
-                },
-            },
-        ],
-    };
-
-    public static ThreeField002: TemplateDocInfos = {
-        title: 'threefield2',
-        width: 477,
-        height: 662,
-        opts: {
-            backgroundColor: '#9E9C95',
-        },
-        fields: [
-            {
-                tl: [-0.875, -0.9],
-                br: [0.875, 0.7],
-                types: [TemplateFieldType.VISUAL],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-                description: 'A medium to large visual field for the main content of the template',
-                opts: {
-                    borderWidth: '15',
-                    borderColor: '#E0E0DA',
-                },
-            },
-            {
-                tl: [0.1, 0.775],
-                br: [0.95, 0.975],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-                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',
-                },
-            },
-            {
-                tl: [-0.95, 0.775],
-                br: [-0.1, 0.975],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-                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',
-                },
-            },
-        ],
-        decorations: [
-            {
-                tl: [-0.025, 0.8],
-                br: [0.025, 0.95],
-                opts: {
-                    backgroundColor: '#E0E0DA',
-                },
-            },
-        ],
-    };
-}
-
 export class FieldUtils {
-    public static contentFields = (fields: FieldSettings[]) => {
-        let toRet: FieldSettings[] = [];
-        fields.forEach(field => {
-            if (!field.isDecoration) {
-                toRet.push(field);
-            }
-            toRet = toRet.concat(FieldUtils.contentFields(field.subfields ?? []));
-        });
-
-        return toRet;
-    };
-
     public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
         const words: string[] = text.split(/\s+/).filter(Boolean);
 
@@ -2388,52 +1814,4 @@ export class FieldUtils {
 
         return doc;
     };
-}
-
-//     public static FourField002: TemplateDocInfos = {
-//         width: 450,
-//         height: 600,
-//         fields: [{
-//             tl: [-.6, -.9],
-//             br: [.6, -.8],
-//             types: [FieldType.TEXT],
-//             sizes: [FieldSize.TINY]
-//         }, {
-//             tl: [-.9, -.7],
-//             br: [.9, .2],
-//             types: [FieldType.TEXT, FieldType.VISUAL],
-//             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
-//         }, {
-//             tl: [-.9, .3],
-//             br: [-.05, .9],
-//             types: [FieldType.TEXT],
-//             sizes: [FieldSize.TINY]
-//         }, {
-//             tl: [.05, .3],
-//             br: [.9, .9],
-//             types: [FieldType.TEXT, FieldType.VISUAL],
-//             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
-//         }]
-//     };
-
-//     public static TwoFieldPlusCarousel: TemplateDocInfos = {
-//         width: 500,
-//         height: 600,
-//         fields: [{
-//             tl: [-.9, -.99],
-//             br: [.9, -.7],
-//             types: [FieldType.TEXT],
-//             sizes: [FieldSize.TINY]
-//         }, {
-//             tl: [-.9, -.65],
-//             br: [.9, .35],
-//             types: [],
-//             sizes: []
-//         }, {
-//             tl: [-.9, .4],
-//             br: [.9, .95],
-//             types: [FieldType.TEXT],
-//             sizes: [FieldSize.TINY]
-//         }]
-//     };
-//  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes.tsx
index fbb44e4a4..119de88d0 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes.tsx
@@ -1,7 +1,18 @@
 import { Doc } from "../../../../../fields/Doc";
 import { FieldType } from "../../../../../fields/ObjectField";
 import { Docs, DocumentOptions } from "../../../../documents/Documents";
-import { TemplateFieldSize, TemplateFieldType } from "./DocCreatorMenu";
+import { Template } from "./Template";
+import { TemplateFieldSize, TemplateFieldType } from "./TemplateBackend";
+
+export enum FieldContentType {
+    STRING = 'string',
+    IMAGE = 'image',
+}
+
+export enum ViewType {
+    CAROUSEL3D = 'carousel3d',
+    FREEFORM = 'freeform',
+}
 
 export interface FieldOpts {
     backgroundColor?: string;
@@ -19,32 +30,112 @@ export interface FieldOpts {
     fieldViewType?: 'freeform' | 'stacked';
 }
 
-type FieldSettings = {
+export type FieldSettings = {
     tl: [number, number];
     br: [number, number];
     opts: FieldOpts;
-    subfields?: Field[];
+    dynamicType?: ViewType;
+    subfields?: FieldSettings[];
     types?: TemplateFieldType[];
     sizes?: TemplateFieldSize[];
     description?: string;
 };
 
-interface ConstructedField<T> {
-    renderedDoc: () => Doc;
-    validSubfieldGroups: () => Field[];
-    setContent: (newContent: T) => void;
-    getContent: () => T;
-}
+export class Field {
+    private content: string;
+    private contentType: FieldContentType | undefined;
+    private subfields: Field[] | undefined;
 
-class Field {
-    settings: FieldSettings;
-    parent: Field;
-    dimensions: { width: number; height: number; coord: { x: number; y: number }};
+    private settings: FieldSettings;
 
-    constructor(settings: FieldSettings, parent: Field) {
+    private parent: Field | Template;
+    private dimensions: { width: number; height: number; coord: { x: number; y: number }};
+
+    constructor(settings: FieldSettings, parent: Field | Template) {
         this.settings = settings;
         this.parent = parent;
         this.dimensions = this.parent.getChildDimensions({tl: settings.tl, br: settings.br});
+        this.content = '';
+        this.setupSubfields();
+    }
+
+    get getSubfields(): Field[] { return this.subfields ?? []; };
+    get getAllSubfields(): Field[] {
+        const fields: Field[] = [];
+        this.subfields?.forEach(field => {
+            fields.push(field);
+            fields.concat(field.getAllSubfields)
+        });
+        return fields;
+    }
+
+    setContent = (newContent: string) => { this.content = newContent };
+    getContent() { return this.content };
+
+    setupSubfields = () => {
+        this.settings.subfields?.forEach(fieldSettings => {
+            let field: Field;
+            const dynamicType = fieldSettings.dynamicType;
+
+            if (dynamicType) { field = new DynamicField(fieldSettings, this, dynamicType); }
+
+            field = new Field(fieldSettings, this);
+            this.subfields?.push(field);
+        });
+    }
+
+    renderedDoc = (content: string): Doc => {
+        const opts = this.settings.opts;
+
+        if (!this.contentType) { this.contentType = FieldContentType.STRING };
+
+        switch (this.contentType) {
+            case FieldContentType.STRING:
+                const text = String(content);
+                const textDoc = Docs.Create.TextDocument(text, {
+                    text_fontColor: opts.color,
+                    contentBold: opts.fontBold,
+                    textTransform: opts.fontTransform,
+                    color: opts.color,
+                    _text_fontSize: `${this.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}`
+                });
+                this.applyBasicOpts(textDoc);
+                return textDoc;
+            case FieldContentType.IMAGE:
+                const url = String(content);
+                const imgDoc = Docs.Create.ImageDocument(url, {
+                    _layout_fitWidth: false,
+                });
+                this.applyBasicOpts(imgDoc);
+                return imgDoc;
+        }   
+    }
+
+    getChildDimensions = (coords: { tl: [number, number]; br: [number, number] }): { width: number; height: number; coord: { x: number; y: number } } => {
+        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 };
+    };
+
+    applyBasicOpts = (doc: Doc) => {
+        const opts = this.settings.opts;
+        doc.isDefaultTemplateDoc = true,
+        doc.x = this.dimensions.coord.x;
+        doc.y = this.dimensions.coord.y;
+        doc._height = this.dimensions.height;
+        doc._width = this.dimensions.width;
+        doc.backgroundColor = opts.backgroundColor ?? '';
+        doc._layout_borderRounding = `${opts.cornerRounding ?? 0}px`;
+        doc.borderColor = opts.borderColor;
+        doc.borderWidth = opts.borderWidth;
+        doc.opacity = opts.opacity;
+        doc._rotation = opts.rotation;
+        doc.hCentering = opts.contentXCentering;
     }
 
     calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
@@ -88,70 +179,36 @@ class Field {
         return currFontSize - 1;
     };
 
-    getChildDimensions = (coords: { tl: [number, number]; br: [number, number] }): { width: number; height: number; coord: { x: number; y: number } } => {
-        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 };
-    };
-
-    applyBasicOpts = (doc: Doc) => {
-        const opts = this.settings.opts;
-        doc.isDefaultTemplateDoc = true,
-        doc.x = this.dimensions.coord.x;
-        doc.y = this.dimensions.coord.y;
-        doc._height = this.dimensions.height;
-        doc._width = this.dimensions.width;
-        doc.backgroundColor = opts.backgroundColor ?? '';
-        doc._layout_borderRounding = `${opts.cornerRounding ?? 0}px`;
-        doc.borderColor = opts.borderColor;
-        doc.borderWidth = opts.borderWidth;
-        doc.opacity = opts.opacity;
-        doc._rotation = opts.rotation;
-        doc.hCentering = opts.contentXCentering;
-    }
 }
 
-class TextField extends Field implements ConstructedField<string> {
-    content: string = '';
-    fontSize: string = '10';
+class DynamicField extends Field {
+    type: ViewType;
 
-    constructor(settings: FieldSettings, parent: Field) {
+    constructor(settings: FieldSettings, parent: Field | Template, type: ViewType) {
         super(settings, parent);
+        this.type = type;
     }
 
     renderedDoc = (): Doc => {
-        const opts = this.settings.opts;
-        const doc = Docs.Create.TextDocument(this.content, {
-            text_fontColor: opts.color,
-            contentBold: opts.fontBold,
-            textTransform: opts.fontTransform,
-            color: opts.color,
-            _text_fontSize: `${this.calculateFontSize(this.dimensions.width, this.dimensions.height, this.content, true)}`
-        });
-        this.applyBasicOpts(doc);
-        return doc;
+        switch (this.type) {
+            case ViewType.CAROUSEL3D:
+                const carouselDoc = Docs.Create.Carousel3DDocument([], {
+                });
+                this.applyBasicOpts(carouselDoc);
+            case ViewType.FREEFORM:
+                const freeformDoc = Docs.Create.FreeformDocument([], {
+                });
+                this.applyBasicOpts(freeformDoc);
+            default:
+                return new Doc();
+        }
     }
 
-    validSubfieldGroups = () => {
-        
 
-        return [];
-    }
-
-    setContent = (newContent: string) => {
-        this.content = newContent;
-    }
 
-    getContent() {
-        return this.content;
-    };
 }
 
+
 type DecorationField = FieldSettings;
 
 type InkDecoration = {};
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
new file mode 100644
index 000000000..f9bf22047
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -0,0 +1,48 @@
+
+import { Doc } from "../../../../../fields/Doc";
+import { Docs } from "../../../../documents/Documents";
+import { Field } from "./FieldTypes";
+import { TemplateDocInfos } from "./TemplateBackend";
+
+export class Template {
+
+    width: number = 0;
+    height: number = 0;
+    fields: Field[] = [];
+    mainDoc: Doc;
+
+    constructor(templateInfo: TemplateDocInfos) {
+        this.width = templateInfo.width;
+        this.height = templateInfo.height;
+        this.fields = templateInfo.fields.map(settings => new Field(settings, this));
+        this.mainDoc = this.setupMainDoc();
+    }
+
+    setupMainDoc = (): Doc => {
+        Docs.Create.FreeformDocument(, ){
+
+        }
+        return new Doc;
+    }
+
+    get childFields(): Field[] {
+        return this.fields;
+    }
+
+    get allFields(): Field[] {
+        const fields = this.fields;
+        this.fields.forEach(field => fields.concat(field.subfields));
+        return fields;
+    }
+
+    getChildDimensions = (coords: { tl: [number, number]; br: [number, number] }): { width: number; height: number; coord: { x: number; y: number } } => {
+        const l = (coords.tl[0] * this.height) / 2;
+        const t = coords.tl[1] * this.width / 2; //prettier-ignore
+        const r = (coords.br[0] * this.height) / 2;
+        const b = coords.br[1] * this.width / 2; //prettier-ignore
+        const width = r - l;
+        const height = b - t;
+        const coord = { x: l, y: t };
+        return { width, height, coord };
+    };
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
new file mode 100644
index 000000000..a25eab74f
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
@@ -0,0 +1,491 @@
+import { FieldOpts, FieldSettings } from "./FieldTypes";
+
+export enum TemplateFieldType {
+    TEXT = 'text',
+    VISUAL = 'visual',
+    UNSET = 'unset',
+}
+
+export enum TemplateFieldSize {
+    TINY = 'tiny',
+    SMALL = 'small',
+    MEDIUM = 'medium',
+    LARGE = 'large',
+    HUGE = 'huge',
+}
+
+export interface TemplateDocInfos {
+    title: string;
+    height: number;
+    width: number;
+    opts: FieldOpts;
+    fields: FieldSettings[];
+    decorations: FieldSettings[];
+}
+
+export class TemplateLayouts {
+    public static get allTemplates(): TemplateDocInfos[] {
+        return Object.values(TemplateLayouts).filter(value => typeof value === 'object' && value !== null && 'title' in value) as TemplateDocInfos[];
+    }
+
+    public static getTemplateByTitle = (title: string): TemplateDocInfos | undefined => {
+        switch (title) {
+            case 'fourfield1':
+                return TemplateLayouts.FourField001;
+            case 'fourfield2':
+                return TemplateLayouts.FourField002;
+            // case 'fourfield3':
+            //     return TemplateLayouts.FourField003;
+            case 'fourfield4':
+                return TemplateLayouts.FourField004;
+            case 'threefield1':
+                return TemplateLayouts.ThreeField001;
+            case 'threefield2':
+                return TemplateLayouts.ThreeField002;
+            default:
+                break;
+        }
+
+        return undefined;
+    };
+
+    public static FourField001: TemplateDocInfos = {
+        title: 'fourfield1',
+        width: 416,
+        height: 700,
+        opts: {
+            backgroundColor: '#C0B887',
+            cornerRounding: 20,
+            borderColor: '#6B461F',
+            borderWidth: '12',
+        },
+        fields: [
+            {
+                tl: [-0.95, -1],
+                br: [0.95, -0.85],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY],
+                description: 'A title field for very short text that contextualizes the content.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: '#F1F0E9',
+                    contentXCentering: 'h-center',
+                    fontBold: true,
+                },
+            },
+            {
+                tl: [-0.87, -0.83],
+                br: [0.87, 0.2],
+                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'The main focus of the template; could be an image, long text, etc.',
+                opts: {
+                    cornerRounding: 20,
+                    borderColor: '#8F5B25',
+                    borderWidth: '6',
+                    backgroundColor: '#CECAB9',
+                },
+            },
+            {
+                tl: [-0.8, 0.2],
+                br: [0.8, 0.3],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+                description: 'A caption for field #2, very short to short text that contextualizes the content of field #2',
+                opts: {
+                    backgroundColor: 'transparent',
+                    contentXCentering: 'h-center',
+                    color: '#F1F0E9',
+                },
+            },
+            {
+                tl: [-0.87, 0.37],
+                br: [0.87, 0.96],
+                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'A medium-sized field for medium/long text.',
+                opts: {
+                    cornerRounding: 15,
+                    borderColor: '#8F5B25',
+                    borderWidth: '6',
+                    backgroundColor: '#CECAB9',
+                },
+            },
+        ],
+        decorations: [],
+    };
+
+    public static FourField002: TemplateDocInfos = {
+        title: 'fourfield2',
+        width: 425,
+        height: 778,
+        opts: {
+            backgroundColor: '#242425',
+        },
+        fields: [
+            {
+                tl: [-0.83, -0.95],
+                br: [0.83, -0.2],
+                types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
+                description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus.',
+                opts: {
+                    borderWidth: '8',
+                    borderColor: '#F8E71C',
+                },
+            },
+            {
+                tl: [-0.65, -0.2],
+                br: [0.65, -0.02],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY],
+                description: 'A tiny field for just a word or two of plain text.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: 'white',
+                    contentXCentering: 'h-center',
+                    fontTransform: 'uppercase',
+                },
+            },
+            {
+                tl: [-0.65, 0],
+                br: [0.65, 0.18],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY],
+                description: 'A tiny field for just a word or two of plain text.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: 'white',
+                    contentXCentering: 'h-center',
+                    fontTransform: 'uppercase',
+                },
+            },
+            {
+                tl: [-0.83, 0.2],
+                br: [0.83, 0.95],
+                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus, or share focus with field 1.',
+                opts: {
+                    borderWidth: '8',
+                    borderColor: '#F8E71C',
+                    color: 'white',
+                    backgroundColor: '#242425',
+                },
+            },
+        ],
+        decorations: [
+            {
+                tl: [-0.8, -0.075],
+                br: [-0.525, 0.075],
+                opts: {
+                    backgroundColor: '#F8E71C',
+                    //rotation: 45,
+                },
+            },
+            {
+                tl: [-0.3075, -0.0245],
+                br: [-0.2175, 0.0245],
+                opts: {
+                    backgroundColor: '#F8E71C',
+                    //rotation: 45,
+                },
+            },
+            {
+                tl: [-0.045, -0.0245],
+                br: [0.045, 0.0245],
+                opts: {
+                    backgroundColor: '#F8E71C',
+                    //rotation: 45,
+                },
+            },
+            {
+                tl: [0.2175, -0.0245],
+                br: [0.3075, 0.0245],
+                opts: {
+                    backgroundColor: '#F8E71C',
+                    //rotation: 45,
+                },
+            },
+            {
+                tl: [0.525, -0.075],
+                br: [0.8, 0.075],
+                opts: {
+                    backgroundColor: '#F8E71C',
+                    //rotation: 45,
+                },
+            },
+        ],
+    };
+
+    // public static FourField003: TemplateDocInfos = {
+    //     title: 'fourfield3',
+    //     width: 477,
+    //     height: 662,
+    //     opts: {
+    //         backgroundColor: '#9E9C95'
+    //     },
+    //     fields: [{
+    //         tl: [-.875, -.9],
+    //         br: [.875, .7],
+    //         types: [TemplateFieldType.VISUAL],
+    //         sizes: [TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+    //         description: '',
+    //         opts: {
+    //             borderWidth: '15',
+    //             borderColor: '#E0E0DA',
+    //         }
+    //     }, {
+    //         tl: [-.95, .8],
+    //         br: [-.1, .95],
+    //         types: [TemplateFieldType.TEXT],
+    //         sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+    //         description: '',
+    //         opts: {
+    //             backgroundColor: 'transparent',
+    //             color: 'white',
+    //             contentXCentering: 'h-right',
+    //         }
+    //     }, {
+    //         tl: [.1, .8],
+    //         br: [.95, .95],
+    //         types: [TemplateFieldType.TEXT],
+    //         sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+    //         description: '',
+    //         opts: {
+    //             backgroundColor: 'transparent',
+    //             color: 'red',
+    //             fontTransform: 'uppercase',
+    //             contentXCentering: 'h-left'
+    //         }
+    //     }, {
+    //         tl: [0, -.9],
+    //         br: [.85, -.66],
+    //         types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+    //         sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+    //         description: '',
+    //         opts: {
+    //             backgroundColor: 'transparent',
+    //             contentXCentering: 'h-right'
+    //         }
+    //     }],
+    //     decorations: [{
+    //         tl: [-.025, .8],
+    //         br: [.025, .95],
+    //         opts: {
+    //             backgroundColor: '#E0E0DA',
+    //         }
+    //     }]
+    // };
+
+    public static FourField004: TemplateDocInfos = {
+        title: 'fourfield4',
+        width: 414,
+        height: 583,
+        opts: {
+            backgroundColor: '#6CCAF0',
+            borderColor: '#1088C3',
+            borderWidth: '10',
+        },
+        fields: [
+            {
+                tl: [-0.86, -0.92],
+                br: [-0.075, -0.77],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY],
+                description: 'A tiny field for just a word or two of plain text.',
+                opts: {
+                    backgroundColor: '#E2B4F5',
+                    borderWidth: '9',
+                    borderColor: '#9222F1',
+                    contentXCentering: 'h-center',
+                },
+            },
+            {
+                tl: [0.075, -0.92],
+                br: [0.86, -0.77],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY],
+                description: 'A tiny field for just a word or two of plain text.',
+                opts: {
+                    backgroundColor: '#F5B4DD',
+                    borderWidth: '9',
+                    borderColor: '#E260F3',
+                    contentXCentering: 'h-center',
+                },
+            },
+            {
+                tl: [-0.81, -0.64],
+                br: [0.81, 0.48],
+                types: [TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'A large to huge field for visual content that is the main content of the template.',
+                opts: {
+                    borderWidth: '16',
+                    borderColor: '#A2BD77',
+                },
+            },
+            {
+                tl: [-0.86, 0.6],
+                br: [0.86, 0.92],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
+                description: 'A medium to large field for text that describes the visual content above',
+                opts: {
+                    borderWidth: '9',
+                    borderColor: '#F0D601',
+                    backgroundColor: '#F3F57D',
+                },
+            },
+        ],
+        decorations: [
+            {
+                tl: [-0.852, -0.67],
+                br: [0.852, 0.51],
+                opts: {
+                    backgroundColor: 'transparent',
+                    borderColor: '#007C0C',
+                    borderWidth: '10',
+                },
+            },
+        ],
+    };
+
+    public static ThreeField001: TemplateDocInfos = {
+        title: 'threefield1',
+        width: 575,
+        height: 770,
+        opts: {
+            backgroundColor: '#DDD3A9',
+        },
+        fields: [
+            {
+                tl: [-0.66, -0.747],
+                br: [0.66, 0.247],
+                types: [TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'A medium to large field for visual content that is the central focus.',
+                opts: {
+                    borderColor: 'yellow',
+                    borderWidth: '8',
+                    rotation: 45,
+                },
+            },
+            {
+                tl: [-0.7, 0.2],
+                br: [0.7, 0.46],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+                description: 'A very small text field for one to a few words. A good caption for the image.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    contentXCentering: 'h-center',
+                },
+            },
+            {
+                tl: [-0.95, 0.5],
+                br: [0.95, 0.95],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
+                description: 'A medium to large text field for a thorough description of the image. ',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: 'white',
+                },
+            },
+        ],
+        decorations: [
+            {
+                tl: [0.2, -1.32],
+                br: [1.8, -0.66],
+                opts: {
+                    backgroundColor: '#CEB155',
+                    rotation: 45,
+                },
+            },
+            {
+                tl: [-1.8, -1.32],
+                br: [-0.2, -0.66],
+                opts: {
+                    backgroundColor: '#CEB155',
+                    rotation: 135,
+                },
+            },
+            {
+                tl: [0.33, 0.75],
+                br: [1.66, 1.25],
+                opts: {
+                    backgroundColor: '#CEB155',
+                    rotation: 135,
+                },
+            },
+            {
+                tl: [-1.66, 0.75],
+                br: [-0.33, 1.25],
+                opts: {
+                    backgroundColor: '#CEB155',
+                    rotation: 45,
+                },
+            },
+        ],
+    };
+
+    public static ThreeField002: TemplateDocInfos = {
+        title: 'threefield2',
+        width: 477,
+        height: 662,
+        opts: {
+            backgroundColor: '#9E9C95',
+        },
+        fields: [
+            {
+                tl: [-0.875, -0.9],
+                br: [0.875, 0.7],
+                types: [TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'A medium to large visual field for the main content of the template',
+                opts: {
+                    borderWidth: '15',
+                    borderColor: '#E0E0DA',
+                },
+            },
+            {
+                tl: [0.1, 0.775],
+                br: [0.95, 0.975],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+                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',
+                },
+            },
+            {
+                tl: [-0.95, 0.775],
+                br: [-0.1, 0.975],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+                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',
+                },
+            },
+        ],
+        decorations: [
+            {
+                tl: [-0.025, 0.8],
+                br: [0.025, 0.95],
+                opts: {
+                    backgroundColor: '#E0E0DA',
+                },
+            },
+        ],
+    };
+}
+
+
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index c156c80e4..226fad977 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -124,15 +124,15 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             { fireImmediately: true, delay: 1000 }
         );
         const { layoutDoc } = this;
-        this._disposers.path = reaction(
-            () => ({ nativeSize: this.nativeSize, width: NumCast(this.layoutDoc._width) }),
-            ({ nativeSize, width }) => {
-                if (layoutDoc === this.layoutDoc || !this.layoutDoc._height) {
-                    this.layoutDoc._height = (width * nativeSize.nativeHeight) / nativeSize.nativeWidth;
-                }
-            },
-            { fireImmediately: true }
-        );
+        // this._disposers.path = reaction(
+        //     () => ({ nativeSize: this.nativeSize, width: NumCast(this.layoutDoc._width) }),
+        //     ({ nativeSize, width }) => {
+        //         if (layoutDoc === this.layoutDoc || !this.layoutDoc._height) {
+        //             this.layoutDoc._height = (width * nativeSize.nativeHeight) / nativeSize.nativeWidth;
+        //         }
+        //     },
+        //     { fireImmediately: true }
+        // );
         this._disposers.scroll = reaction(
             () => this.layoutDoc.layout_scrollTop,
             sTop => {