field refactor

1 files changed, 66 insertions, 49 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index ffe58dee5..19881f4d2 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -396,17 +396,23 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         this._templateDocs.splice(this._templateDocs.indexOf(doc), 1);
     }
 
-    testTemplate = () => { 
-        const temp = TemplateLayouts.TwoFieldPlusCarousel;
-        const title = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br});
-        const focus = new TemplateDocTextField({tl: temp.fields[1].tl, br: temp.fields[1].br});
-        const caption = new TemplateDocTextField({tl: temp.fields[2].tl, br: temp.fields[2].br});
-        const fields = [title, focus, caption].map(field => field.getDoc(temp.width, temp.height, 'hey now', ''));
-        console.log(temp.height, temp.width)
-        const doc = Docs.Create.FreeformDocument(fields, { _height: temp.height, _width: temp.width, title: 'hey', x: 400, y: 400 });
 
-        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        mainCollection.addDocument(doc);
+
+    testTemplate = () => { 
+        // const temp = TemplateLayouts.TwoFieldPlusCarousel;
+        // const title = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br});
+        // const title1 = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br});
+        // const title2 = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br});
+        // const title3 = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br});
+        // const focus = new TemplateDocCarouselField({tl: temp.fields[1].tl, br: temp.fields[1].br}, temp.width, temp.height, '', [title1, title2, title3].map(field => field.getDoc(temp.width, temp.height, 'hey now', '')));
+        // const caption = new TemplateDocTextField({tl: temp.fields[2].tl, br: temp.fields[2].br});
+        // let fields = [title, caption].map(field => field.getDoc(temp.width, temp.height, 'hey now', ''));
+        // fields = fields.concat(focus.getDoc());
+        // console.log(temp.height, temp.width)
+        // const doc = Docs.Create.StackingDocument(fields, { _height: temp.height, _width: temp.width, title: 'hey', x: 400, y: 400 });
+
+        // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+        // mainCollection.addDocument(doc);
     }
 
     get templatesPreviewContents(){
@@ -931,58 +937,69 @@ export interface TemplateDocField {
     getDoc: (parentWidth: number, parentHeight: number, title: string, content: string) => Doc;
 }
 
-export class TemplateDocTextField implements TemplateDocField {
-
-    coordinates: {tl: [number, number], br: [number, number]};
+export interface FieldOpts {
+    backgroundColor?: string;
+    roundedCorners?: boolean;
+    vertCenteredText?: boolean;
+    horizCenteredText?: boolean;
+    transparency?: number;
+    rotation?: number;
+    //animation?: boolean;
+    fontColor?: string;
+    fontBold?: boolean;
+    fontTransform?: 'toUpper' | 'toLower';
+}
 
-    constructor(coords: {tl: [number, number], br: [number, number]}) {
-        this.coordinates = coords;
-    }
+export class FieldFuncs {
 
-    getDoc = (parentWidth: number, parentHeight: number, title: string, content: string) => {
-        const l = this.coordinates.tl[0] * parentWidth / 2; const t = this.coordinates.tl[1] * parentHeight / 2; //prettier-ignore
-        const r = this.coordinates.br[0] * parentWidth / 2; const b = this.coordinates.br[1] * parentHeight / 2; //prettier-ignore
+    private static getDimensions = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number): {width: number, height: number, coord: {x: number, y: number}} => {
+        const l = coords.tl[0] * parentWidth / 2; const t = coords.tl[1] * parentHeight / 2; //prettier-ignore
+        const r = coords.br[0] * parentWidth / 2; const b = coords.br[1] * parentHeight / 2; //prettier-ignore
         const width = r - l;
         const height = b - t;
         const coord = {x: l, y: t};
-        console.log(coord, width, height, l, t);
+        return {width, height, coord};
+    }
 
-        const doc = Docs.Create.TextDocument(content, { _height: height, _width: width, title: title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` })
+    public static TextField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
+        const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
+
+        const doc = Docs.Create.TextDocument(content, {   
+            _height: height, 
+            _width: width, 
+            title: title, 
+            x: coord.x, 
+            y: coord.y, 
+            _text_fontSize: `${height/2}` ,
+            backgroundColor: opts.backgroundColor ?? '',
+            
+        
+        })
 
         return doc;
-    };
-}
+    }
 
-export class TemplateDocImageField implements TemplateDocField {
+    public static ImageField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string) => {
+        const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
 
-    coordinates: {tl: [number, number], br: [number, number]};
-    title: string;
-    content: string;
+        const doc = Docs.Create.ImageDocument(content, {   
+            _height: height, 
+            _width: width, 
+            title: title, 
+            x: coord.x, 
+            y: coord.y, 
+            _text_fontSize: `${height/2}` })
 
-    constructor(coords: {tl: [number, number], br: [number, number]}, title: string, content: string) {
-        this.coordinates = coords;
-        this.title = title;
-        this.content = content;
+        return doc;
     }
 
-    getDoc = (parentWidth: number, parentHeight: number) => {
-        // const l = this.coordinates.tl[0] * parentWidth; const t = this.coordinates.tl[1] * parentHeight; //prettier-ignore
-        // const r = this.coordinates.br[0] * parentWidth; const b = this.coordinates.br[1] * parentHeight; //prettier-ignore
-        // const presetWidth = l - r;
-        // const presetHeight = t - b;
-        // const presetRatio = presetWidth/presetHeight; 
-
-        const l = this.coordinates.tl[0] * parentWidth / 2; const t = this.coordinates.tl[1] * parentHeight / 2; //prettier-ignore
-        const r = this.coordinates.br[0] * parentWidth / 2; const b = this.coordinates.br[1] * parentHeight / 2; //prettier-ignore
-        const width = l - r;
-        const height = t - b;
-        const coord = {x: l, y: t};
+    public static CarouselField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, fields: Doc[]) => {
+        const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
 
-        const doc: ImageBox = Docs.Create.ImageDocument(this.content, { _height: height, _width: width, title: this.title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` }) as unknown as ImageBox;
-
-        return new Doc();
-    };
+        const doc = Docs.Create.Carousel3DDocument(fields, { _height: height, _width: width, title: title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` })
 
+        return doc;
+    }
     
 }
 
@@ -1051,8 +1068,8 @@ export class TemplateLayouts {
         }, {
             tl: [-.9, -.65], 
             br: [.9, .35], 
-            types: [FieldType.TEXT, FieldType.VISUAL],
-            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+            types: [],
+            sizes: []
         }, {
             tl: [-.9, .4], 
             br: [.9, .95],