breaking up files

8 files changed, 405 insertions, 390 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index c86264716..02fd7f869 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -30,7 +30,7 @@ import { DefaultStyleProvider, returnEmptyDocViewList } from '../../../StyleProv
 import { Transform } from '../../../../util/Transform';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { TemplateDocInfos, TemplateFieldSize, TemplateFieldType, TemplateLayouts } from './TemplateBackend';
-import { FieldOpts, FieldSettings } from './FieldTypes';
+import { FieldOpts, FieldSettings } from './FieldTypes/StaticField';
 
 export enum LayoutType {
     STACKED = 'stacked',
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes.tsx
deleted file mode 100644
index f30183ed3..000000000
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes.tsx
+++ /dev/null
@@ -1,362 +0,0 @@
-import { Doc } from "../../../../../fields/Doc";
-import { FieldType } from "../../../../../fields/ObjectField";
-import { Docs, DocumentOptions } from "../../../../documents/Documents";
-import { Col } from "./DocCreatorMenu";
-import { Template } from "./Template";
-import { TemplateDocInfos, TemplateFieldSize, TemplateFieldType } from "./TemplateBackend";
-
-export enum FieldContentType {
-    STRING = 'string',
-    IMAGE = 'image',
-}
-
-export enum ViewType {
-    CAROUSEL3D = 'carousel3d',
-    FREEFORM = 'freeform',
-}
-
-export type FieldDimensions = {
-    width: number;
-    height: number;
-    coord: {x: number, y: number};
-}
-
-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';
-}
-
-export type FieldSettings = {
-    tl: [number, number];
-    br: [number, number];
-    opts: FieldOpts;
-    dynamicType?: ViewType;
-    subfields?: FieldSettings[];
-    types?: TemplateFieldType[];
-    sizes?: TemplateFieldSize[];
-    description?: string;
-};
-
-export interface Field {
-    getContent: () => string;
-    setContent: (content: string) => void;
-    getDimensions: FieldDimensions;
-    getSubfields: Field[];
-    getAllSubfields: Field[];
-    setupSubfields: () => Field[];
-    renderedDoc: (content: string) => Doc;
-    matches: () => number[][];
-}
-
-export class StaticField {
-    private content: string;
-    private contentType: FieldContentType | undefined;
-    private subfields: Field[] = [];
-
-    private settings: FieldSettings;
-
-    private parent: Field;
-    private dimensions: FieldDimensions;
-
-    constructor(settings: FieldSettings, parent: Field, autoSetupFields: boolean = true) {
-        this.settings = settings;
-        this.parent = parent;
-        this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
-        this.content = '';
-        if (autoSetupFields) { this.subfields = 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;
-    };
-
-    get getDimensions() { return this.dimensions };
-
-    setContent = (newContent: string) => { this.content = newContent };
-    getContent() { return this.content };
-
-    setupSubfields = (): Field[] => {
-        const fields: Field[] = [];
-        this.settings.subfields?.forEach(fieldSettings => {
-            let field: Field;
-            const dynamicType = fieldSettings.dynamicType;
-
-            if (dynamicType) { 
-                field = new DynamicField(fieldSettings, this, dynamicType); 
-            } else {
-                field = new StaticField(fieldSettings, this);
-            }
-
-            fields.push(field);
-        });
-        return fields;
-    };
-
-    matches = (): number[][] => {
-        return [];
-    };
-
-    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: `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}`
-                });
-                FieldUtils.applyBasicOpts(textDoc, this.dimensions, this.settings);
-                return textDoc;
-            case FieldContentType.IMAGE:
-                const url = String(content);
-                const imgDoc = Docs.Create.ImageDocument(url, {
-                    _layout_fitWidth: false,
-                });
-                FieldUtils.applyBasicOpts(imgDoc, this.dimensions, this.settings);
-                return imgDoc;
-        }   
-    };
-
-}
-
-class DynamicField implements Field {
-    private type: ViewType;
-    private subfields: Field[] = [];
-
-    private settings: FieldSettings;
-
-    private parent: Field;
-    private dimensions: FieldDimensions;
-
-    constructor(settings: FieldSettings, parent: Field, type: ViewType) {
-        this.type = type;
-        this.settings = settings;
-        this.parent = parent;
-        this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
-        this.subfields = this.setupSubfields();
-    }
-
-    setContent = (content: string) => { return };
-    getContent = () => { return '' };
-
-    get getSubfields() { return this.subfields };
-    get getAllSubfields() {
-        const fields: Field[] = [];
-        this.subfields?.forEach(field => {
-            fields.push(field);
-            fields.concat(field.getAllSubfields)
-        });
-        return fields;
-    };
-
-    get getDimensions() { return this.dimensions };
-
-    matches = () => {
-        return [];
-    }
-
-    setupSubfields = (): Field[] => {
-        this.settings.subfields?.forEach(fieldSettings => {
-            let field: Field;
-            const dynamicType = fieldSettings.dynamicType;
-
-            if (dynamicType) { field = new DynamicField(fieldSettings, this, dynamicType); }
-
-            field = new StaticField(fieldSettings, this);
-            this.subfields?.push(field);
-        });
-        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 };
-    };
-
-    renderedDoc = (): Doc => {
-        switch (this.type) {
-            case ViewType.CAROUSEL3D:
-                const carouselDoc = Docs.Create.Carousel3DDocument([], {
-                });
-                FieldUtils.applyBasicOpts(carouselDoc, this.dimensions, this.settings);
-            case ViewType.FREEFORM:
-                const freeformDoc = Docs.Create.FreeformDocument([], {
-                });
-                FieldUtils.applyBasicOpts(freeformDoc, this.dimensions, this.settings);
-            default:
-                return new Doc();
-        }
-    }
-
-}
-
-export class TemplateMatcher {
-
-    static matchesForTemplate = (field: FieldSettings, cols: Col[]): number[][] => {
-        const colMatchesField = (col: Col, field: FieldSettings) => {
-            return field.sizes?.some(size => col.sizes?.includes(size)) && field.types?.includes(col.type);
-        };
-
-        const matches: number[][] = Array(field.subfields?.length)
-            .fill([])
-            .map(() => []);
-
-        field.subfields?.forEach((field, i) => {
-            cols.forEach((col, v) => {
-                if (colMatchesField(col, field)) {
-                    matches[i].push(v);
-                }
-            });
-        });
-
-        return matches;
-    };
-
-    static maxMatches = (fieldsCt: number, matches: number[][]) => {
-        const used: boolean[] = Array(fieldsCt).fill(false);
-        const mt: number[] = Array(fieldsCt).fill(-1);
-
-        const augmentingPath = (v: number): boolean => {
-            if (used[v]) return false;
-            used[v] = true;
-            for (const to of matches[v]) {
-                if (mt[to] === -1 || augmentingPath(mt[to])) {
-                    mt[to] = v;
-                    return true;
-                }
-            }
-            return false;
-        };
-
-        for (let v = 0; v < fieldsCt; ++v) {
-            used.fill(false);
-            augmentingPath(v);
-        }
-
-        let count: number = 0;
-
-        for (let i = 0; i < fieldsCt; ++i) {
-            if (mt[i] !== -1) ++count;
-        }
-
-        return count;
-    };
-
-    findValidTemplates = (cols: Col[], templates: TemplateDocInfos[]) => {
-        let validTemplates: any[] = [];
-        templates.forEach(template => {
-            const numFields = template.fields.length;
-            if (!(numFields === cols.length)) return;
-            const matches = this.matchesForTemplate(template, cols);
-            if (this.maxMatches(numFields, matches) === numFields) {
-                validTemplates.push(template.title);
-            }
-        });
-
-        validTemplates = validTemplates.map(title => TemplateLayouts.getTemplateByTitle(title));
-
-        return validTemplates;
-    };
-
-}
-
-
-export class FieldUtils {
-    public static getLocalDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentDimensions: FieldDimensions): FieldDimensions => {
-        const l = (coords.tl[0] * parentDimensions.height) / 2;
-        const t = coords.tl[1] * parentDimensions.width / 2; //prettier-ignore
-        const r = (coords.br[0] * parentDimensions.height) / 2;
-        const b = coords.br[1] * parentDimensions.width / 2; //prettier-ignore
-        const width = r - l;
-        const height = b - t;
-        const coord = { x: l, y: t };
-        return { width, height, coord };
-    };
-
-    public static applyBasicOpts = (doc: Doc, parentDimensions: FieldDimensions, settings: FieldSettings) => {
-        const opts = settings.opts;
-        doc.isDefaultTemplateDoc = true,
-        doc.x = parentDimensions.coord.x;
-        doc.y = parentDimensions.coord.y;
-        doc._height = parentDimensions.height;
-        doc._width = parentDimensions.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;
-    };
-
-    public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
-        const words: string[] = text.split(/\s+/).filter(Boolean);
-
-        let currFontSize = 1;
-        let rowsCount = 1;
-        let currTextHeight = currFontSize * rowsCount * 2;
-
-        while (currTextHeight <= contHeight) {
-            let wordIndex = 0;
-            let currentRowWidth = 0;
-            let wordsInCurrRow = 0;
-            rowsCount = 1;
-
-            while (wordIndex < words.length) {
-                const word = words[wordIndex];
-                const wordWidth = word.length * currFontSize * 0.5;
-
-                if (currentRowWidth + wordWidth <= contWidth) {
-                    currentRowWidth += wordWidth;
-                    ++wordsInCurrRow;
-                } else {
-                    if (words.length !== 1 && words.length > wordsInCurrRow) {
-                        rowsCount++;
-                        currentRowWidth = wordWidth;
-                        wordsInCurrRow = 1;
-                    } else {
-                        break;
-                    }
-                }
-
-                wordIndex++;
-            }
-
-            currTextHeight = rowsCount * currFontSize * 2;
-
-            currFontSize += 1;
-        }
-
-        return currFontSize - 1;
-    };
-}
\ 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
new file mode 100644
index 000000000..361476446
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
@@ -0,0 +1,92 @@
+import { Doc } from "../../../../../../fields/Doc";
+import { Docs } from "../../../../../documents/Documents";
+import { Col } from "../DocCreatorMenu";
+import { TemplateLayouts } from "../TemplateBackend";
+import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field";
+import { FieldUtils } from "./FieldUtils";
+import { StaticField } from "./StaticField";
+
+export class DynamicField implements Field {
+    private type: ViewType;
+    private subfields: Field[] = [];
+
+    private id: number;
+    private settings: FieldSettings;
+
+    private parent: Field;
+    private dimensions: FieldDimensions;
+
+    constructor(settings: FieldSettings, type: ViewType, id: number, parent?: Field) {
+        this.type = type;
+        this.id = id;
+        this.settings = settings;
+        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);
+        }
+        this.subfields = this.setupSubfields();
+    }
+
+    setContent = (content: string) => { return };
+    getContent = () => { return '' };
+
+    get getSubfields() { return this.subfields };
+    get getAllSubfields() {
+        const fields: Field[] = [];
+        this.subfields?.forEach(field => {
+            fields.push(field);
+            fields.concat(field.getAllSubfields)
+        });
+        return fields;
+    };
+
+    get getDimensions() { return this.dimensions };
+    get getID() { return this.id };
+
+    matches = () => {
+        return [];
+    }
+
+    setupSubfields = (): Field[] => {
+        this.settings.subfields?.forEach(fieldSettings => {
+            let field: Field;
+            const dynamicType = fieldSettings.dynamicType;
+
+            if (dynamicType) { field = new DynamicField(fieldSettings, dynamicType, 0, this); }
+
+            field = new StaticField(fieldSettings, this, 0);
+            this.subfields?.push(field);
+        });
+        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 };
+    };
+
+    renderedDoc = (): Doc => {
+        switch (this.type) {
+            case ViewType.CAROUSEL3D:
+                const carouselDoc = Docs.Create.Carousel3DDocument([], {
+                });
+                FieldUtils.applyBasicOpts(carouselDoc, this.dimensions, this.settings);
+            case ViewType.FREEFORM:
+                const freeformDoc = Docs.Create.FreeformDocument([], {
+                });
+                FieldUtils.applyBasicOpts(freeformDoc, this.dimensions, this.settings);
+            default:
+                return new Doc();
+        }
+    }
+
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
new file mode 100644
index 000000000..0c1b6e5fc
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
@@ -0,0 +1,57 @@
+import { Doc } from "../../../../../../fields/Doc";
+import { TemplateFieldSize, TemplateFieldType } from "../TemplateBackend";
+
+export interface Field {
+    getContent: () => string;
+    setContent: (content: string) => void;
+    getDimensions: FieldDimensions;
+    getSubfields: Field[];
+    getAllSubfields: Field[];
+    getID: number;
+    setupSubfields: () => Field[];
+    renderedDoc: (content: string) => Doc;
+    matches: () => number[][];
+}
+
+export type FieldSettings = {
+    tl: [number, number];
+    br: [number, number];
+    opts: FieldOpts;
+    dynamicType?: ViewType;
+    subfields?: FieldSettings[];
+    types?: TemplateFieldType[];
+    sizes?: TemplateFieldSize[];
+    description?: string;
+};
+
+export enum FieldContentType {
+    STRING = 'string',
+    IMAGE = 'image',
+}
+
+export enum ViewType {
+    CAROUSEL3D = 'carousel3d',
+    FREEFORM = 'freeform',
+}
+
+export type FieldDimensions = {
+    width: number;
+    height: number;
+    coord: {x: number, y: number};
+}
+
+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';
+}
\ 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
new file mode 100644
index 000000000..ead46d721
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
@@ -0,0 +1,144 @@
+import { Doc } from "../../../../../../fields/Doc";
+import { Col } from "../DocCreatorMenu";
+import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from "../TemplateBackend";
+import { FieldDimensions, FieldSettings } from "./Field";
+
+export class FieldUtils {
+    public static getLocalDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentDimensions: FieldDimensions): FieldDimensions => {
+        const l = (coords.tl[0] * parentDimensions.height) / 2;
+        const t = coords.tl[1] * parentDimensions.width / 2; //prettier-ignore
+        const r = (coords.br[0] * parentDimensions.height) / 2;
+        const b = coords.br[1] * parentDimensions.width / 2; //prettier-ignore
+        const width = r - l;
+        const height = b - t;
+        const coord = { x: l, y: t };
+        return { width, height, coord };
+    };
+
+    public static applyBasicOpts = (doc: Doc, parentDimensions: FieldDimensions, settings: FieldSettings) => {
+        const opts = settings.opts;
+        doc.isDefaultTemplateDoc = true,
+        doc.x = parentDimensions.coord.x;
+        doc.y = parentDimensions.coord.y;
+        doc._height = parentDimensions.height;
+        doc._width = parentDimensions.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;
+    };
+
+    public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
+        const words: string[] = text.split(/\s+/).filter(Boolean);
+
+        let currFontSize = 1;
+        let rowsCount = 1;
+        let currTextHeight = currFontSize * rowsCount * 2;
+
+        while (currTextHeight <= contHeight) {
+            let wordIndex = 0;
+            let currentRowWidth = 0;
+            let wordsInCurrRow = 0;
+            rowsCount = 1;
+
+            while (wordIndex < words.length) {
+                const word = words[wordIndex];
+                const wordWidth = word.length * currFontSize * 0.5;
+
+                if (currentRowWidth + wordWidth <= contWidth) {
+                    currentRowWidth += wordWidth;
+                    ++wordsInCurrRow;
+                } else {
+                    if (words.length !== 1 && words.length > wordsInCurrRow) {
+                        rowsCount++;
+                        currentRowWidth = wordWidth;
+                        wordsInCurrRow = 1;
+                    } else {
+                        break;
+                    }
+                }
+
+                wordIndex++;
+            }
+
+            currTextHeight = rowsCount * currFontSize * 2;
+
+            currFontSize += 1;
+        }
+
+        return currFontSize - 1;
+    };
+}
+
+export class TemplateMatcher {
+
+    static matchesForTemplate = (field: FieldSettings, cols: Col[]): number[][] => {
+        const colMatchesField = (col: Col, field: FieldSettings) => {
+            return field.sizes?.some(size => col.sizes?.includes(size)) && field.types?.includes(col.type);
+        };
+
+        const matches: number[][] = Array(field.subfields?.length)
+            .fill([])
+            .map(() => []);
+
+        field.subfields?.forEach((field, i) => {
+            cols.forEach((col, v) => {
+                if (colMatchesField(col, field)) {
+                    matches[i].push(v);
+                }
+            });
+        });
+
+        return matches;
+    };
+
+    static maxMatches = (fieldsCt: number, matches: number[][]) => {
+        const used: boolean[] = Array(fieldsCt).fill(false);
+        const mt: number[] = Array(fieldsCt).fill(-1);
+
+        const augmentingPath = (v: number): boolean => {
+            if (used[v]) return false;
+            used[v] = true;
+            for (const to of matches[v]) {
+                if (mt[to] === -1 || augmentingPath(mt[to])) {
+                    mt[to] = v;
+                    return true;
+                }
+            }
+            return false;
+        };
+
+        for (let v = 0; v < fieldsCt; ++v) {
+            used.fill(false);
+            augmentingPath(v);
+        }
+
+        let count: number = 0;
+
+        for (let i = 0; i < fieldsCt; ++i) {
+            if (mt[i] !== -1) ++count;
+        }
+
+        return count;
+    };
+
+    findValidTemplates = (cols: Col[], templates: FieldSettings[]) => {
+        let validTemplates: any[] = [];
+        templates.forEach(template => {
+            const numFields = template.subfields?.length;
+            if (!(numFields === cols.length)) return;
+            const matches = TemplateMatcher.matchesForTemplate(template, cols);
+            if (TemplateMatcher.maxMatches(numFields, matches) === numFields) {
+                validTemplates.push('');
+            }
+        });
+
+        validTemplates = validTemplates.map(title => TemplateLayouts.getTemplateByTitle(title));
+
+        return validTemplates;
+    };
+
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
new file mode 100644
index 000000000..efceae65a
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
@@ -0,0 +1,98 @@
+import { TbHospital } from "react-icons/tb";
+import { Doc } from "../../../../../../fields/Doc";
+import { FieldType } from "../../../../../../fields/ObjectField";
+import { Docs, DocumentOptions } from "../../../../../documents/Documents";
+import { Col } from "../DocCreatorMenu";
+import { Template } from "../Template";
+import { TemplateDocInfos, TemplateFieldSize, TemplateFieldType, TemplateLayouts } from "../TemplateBackend";
+import { DynamicField } from "./DynamicField";
+import { FieldUtils } from "./FieldUtils";
+import { Field, FieldContentType, FieldDimensions, FieldSettings } from "./Field";
+
+export class StaticField {
+    private content: string;
+    private contentType: FieldContentType | undefined;
+    private subfields: Field[] = [];
+
+    private id: number;
+
+    private settings: FieldSettings;
+
+    private parent: Field;
+    private dimensions: FieldDimensions;
+
+    constructor(settings: FieldSettings, parent: Field, id: number) {
+        this.settings = settings;
+        this.id = id;
+        this.parent = parent;
+        this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
+        this.content = '';
+        this.subfields = 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;
+    };
+
+    get getDimensions() { return this.dimensions };
+    get getID() { return this.id };
+
+    setContent = (newContent: string) => { this.content = newContent };
+    getContent() { return this.content };
+
+    setupSubfields = (): Field[] => {
+        const fields: Field[] = [];
+        this.settings.subfields?.forEach(fieldSettings => {
+            let field: Field;
+            const dynamicType = fieldSettings.dynamicType;
+
+            if (dynamicType) { 
+                field = new DynamicField(fieldSettings, dynamicType, 0, this); 
+            } else {
+                field = new StaticField(fieldSettings, this, 0);
+            }
+
+            fields.push(field);
+        });
+        return fields;
+    };
+
+    matches = (): number[][] => {
+        return [];
+    };
+
+    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: `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}`
+                });
+                FieldUtils.applyBasicOpts(textDoc, this.dimensions, this.settings);
+                return textDoc;
+            case FieldContentType.IMAGE:
+                const url = String(content);
+                const imgDoc = Docs.Create.ImageDocument(url, {
+                    _layout_fitWidth: false,
+                });
+                FieldUtils.applyBasicOpts(imgDoc, this.dimensions, this.settings);
+                return imgDoc;
+        }   
+    };
+
+}
\ 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 57565906b..f05f61b61 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -1,40 +1,25 @@
 
 import { Doc } from "../../../../../fields/Doc";
 import { Docs } from "../../../../documents/Documents";
-import { Field } from "./FieldTypes";
+import { DynamicField } from "./FieldTypes/DynamicField";
+import { Field, FieldSettings, ViewType } from "./FieldTypes/Field";
+import {  } from "./FieldTypes/FieldUtils";
+import { } from "./FieldTypes/StaticField";
 import { TemplateDocInfos } from "./TemplateBackend";
 
 export class Template {
 
-    mainField: Field;
-    width: number = 0;
-    height: number = 0;
-    fields: Field[] = [];
+    mainField: DynamicField;
 
-    constructor(templateInfo: TemplateDocInfos) {
-        this.width = templateInfo.width;
-        this.height = templateInfo.height;
-        this.fields = templateInfo.fields.map(settings => new Field(settings, this));
+    constructor(templateInfo: FieldSettings) {
+        this.mainField = this.setupMainField(templateInfo);
     }
 
-    get childFields(): Field[] {
-        return this.fields;
-    }
+    get childFields(): Field[] { return this.mainField.getSubfields };
+    get allFields(): Field[] { return this.mainField.getAllSubfields };
 
-    get allFields(): Field[] {
-        const fields = this.fields;
-        this.fields.forEach(field => fields.concat(field.subfields));
-        return fields;
+    setupMainField = (templateInfo: FieldSettings) => {
+        return new DynamicField(templateInfo, ViewType.FREEFORM, 0);
     }
 
-    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
index a25eab74f..43b0b1572 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
@@ -1,4 +1,5 @@
-import { FieldOpts, FieldSettings } from "./FieldTypes";
+import { FieldOpts, FieldSettings } from "./FieldTypes/Field";
+import { } from "./FieldTypes/StaticField";
 
 export enum TemplateFieldType {
     TEXT = 'text',