Layout info

2 files changed, 133 insertions, 20 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 8ec255dfe..ffe58dee5 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -28,6 +28,7 @@ import { CollectionStackingView } from '../../collections/CollectionStackingView
 import { FieldViewProps } from '../FieldView';
 import { CollectionViewType } from '../../../documents/DocumentTypes';
 import { dropActionType } from '../../../util/DropActionTypes';
+import { ImageBox } from '../ImageBox';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -395,6 +396,19 @@ 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);
+    }
+
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
 
@@ -454,7 +468,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
                         </button>
                     </div>
                     <div className='docCreatorMenu-templates-preview-window' style={{justifyContent: this._menuDimensions.width > 400 ? 'center' : ''}}>
-                        <div className='docCreatorMenu-preview-window empty'>
+                        <div className='docCreatorMenu-preview-window empty' onPointerDown={e => this.testTemplate()}>
                             <FontAwesomeIcon icon='plus' color='rgb(160, 160, 160)'/>
                         </div>
                         {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
@@ -893,39 +907,47 @@ export interface DataVizTemplateLayout {
     rows: number;
 }
 
+enum FieldType {
+    TEXT = 'text',
+    VISUAL = 'visual'
+}
+
+enum FieldSize {
+    TINY = 'tiny',
+    SMALL = 'small',
+    MEDIUM = 'medium',
+    LARGE = 'large',
+    HUGE = 'huge'
+}
+
 export interface TemplateDocInfos {
-    baseHeight: number;
-    baseWidth: number;
-    fields: TemplateDocField[];
+    height: number;
+    width: number;
+    fields: {tl: [number, number], br: [number, number], types: FieldType[], sizes?: FieldSize[]}[];
 }
 
 export interface TemplateDocField {
     coordinates: {tl: [number, number], br: [number, number]};
-    title: string;
-    content: string;
-    getDoc: (parentWidth: number, parentHeight: number) => Doc;
+    getDoc: (parentWidth: number, parentHeight: number, title: string, content: string) => Doc;
 }
 
 export class TemplateDocTextField implements TemplateDocField {
 
     coordinates: {tl: [number, number], br: [number, number]};
-    title: string;
-    content: string;
 
-    constructor(coords: {tl: [number, number], br: [number, number]}, title: string, content: string) {
+    constructor(coords: {tl: [number, number], br: [number, number]}) {
         this.coordinates = coords;
-        this.title = title;
-        this.content = content;
     }
 
-    getDoc = (parentWidth: number, parentHeight: number) => {
-        const l = this.coordinates.tl[0] * parentWidth; const t = this.coordinates.tl[1] * parentWidth; //prettier-ignore
-        const r = this.coordinates.br[0] * parentWidth; const b = this.coordinates.br[1] * parentWidth; //prettier-ignore
-        const width = l - r;
-        const height = t - b;
+    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
+        const width = r - l;
+        const height = b - t;
         const coord = {x: l, y: t};
+        console.log(coord, width, height, l, t);
 
-        const doc = Docs.Create.TextDocument(this.content, { _height: height, _width: width, title: this.title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` })
+        const doc = Docs.Create.TextDocument(content, { _height: height, _width: width, title: title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` })
 
         return doc;
     };
@@ -944,8 +966,99 @@ export class TemplateDocImageField implements TemplateDocField {
     }
 
     getDoc = (parentWidth: number, parentHeight: number) => {
-        const width = (this.coordinates.br[0] - this.coordinates.tl[0]) * parentWidth;
-        //const height; 
+        // 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};
+
+        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();
     };
+
+    
+}
+
+export class TemplateLayouts {
+
+    public static FourField001: 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: [-.6, .3], 
+            br: [.6, .4], 
+            types: [FieldType.TEXT],
+            sizes: [FieldSize.TINY]
+        }, {
+            tl: [-.9, .5], 
+            br: [.9, .9], 
+            types: [FieldType.TEXT, FieldType.VISUAL],
+            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+        }]
+    };
+
+    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: [FieldType.TEXT, FieldType.VISUAL],
+            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+        }, {
+            tl: [-.9, .4], 
+            br: [.9, .95], 
+            types: [FieldType.TEXT],
+            sizes: [FieldSize.TINY]
+        }]
+    };
+
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/TemplateDocTypes.tsx b/src/client/views/nodes/DataVizBox/TemplateDocTypes.tsx
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/TemplateDocTypes.tsx