another template loaded + description compiling methods

1 files changed, 135 insertions, 44 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 73c00c1c8..af15e6113 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -312,7 +312,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));;
         }
         return undefined;
-    }
+    };
 
     @action updateSelectedTemplate = (template: Doc) => {
         if (this._selectedTemplate === template) {
@@ -322,21 +322,21 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             this._selectedTemplate = template;
             MakeTemplate(template);
         }
-    }
+    };
 
     @action updateSelectedSavedLayout = (layout: DataVizTemplateLayout) => {
         this._layout.xMargin = layout.layout.xMargin;
         this._layout.yMargin = layout.layout.yMargin;
         this._layout.type = layout.layout.type;
         this._layout.columns = layout.columns;
-    }
+    };
 
     isSelectedLayout = (layout: DataVizTemplateLayout) => {
         return this._layout.xMargin === layout.layout.xMargin
         && this._layout.yMargin === layout.layout.yMargin 
         && this._layout.type === layout.layout.type 
         && this._layout.columns === layout.columns;
-    }
+    };
 
     @action
     generateTemplates = async (inputText: string) => {
@@ -361,7 +361,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         } catch (err) {
             console.error(err);
         } 
-    }
+    };
 
     @action
     createGeneratedTemplates = (layouts: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[], tempWidth: number, tempHeight: number) => { 
@@ -388,18 +388,18 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         setTimeout(() => {this.setGPTTemplates(GPTTemplates); /*GPTTemplates.forEach(template => mainCollection.removeDocument(template))*/}, 100);
 
         this.forceUpdate();
-    }
+    };
 
     editTemplate = (doc: Doc) => {
         //this.closeMenu();
         DocumentViewInternal.addDocTabFunc(doc, OpenWhere.lightboxAlways);
         DocumentView.DeselectAll();
         Doc.UnBrushDoc(doc);
-    }
+    };
 
     removeTemplate = (doc: Doc) => {
         this._templateDocs.splice(this._templateDocs.indexOf(doc), 1);
-    }
+    };
 
 
 
@@ -415,7 +415,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         // mainCollection.addDocument(doc);
 
-        const temp = TemplateLayouts.FourField003;
+        const temp = TemplateLayouts.FourField001;
 
         const img: Col = {type: TemplateFieldType.VISUAL, title: 'Image', desc: '', size: FieldSize.LARGE};
         const capt1: Col = {type: TemplateFieldType.TEXT, title: 'Type', desc: '', size: FieldSize.TINY};
@@ -425,12 +425,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const assignments = {'0': img, '1': capt1, '2': capt2, '3': desc}
 
         this.createEmptyTemplate(temp, assignments);
-    }
+    };
 
     @action addField = () => {
         const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.UNSET, desc: '', size: FieldSize.MEDIUM}])
         this._columns = newFields;
-    }
+    };
 
     @action removeField = (field: {title: string, type: string, desc: string}) => {
         if (this._dataViz?.axes.includes(field.title)) {
@@ -451,7 +451,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 this._columns.splice(this._columns.indexOf(toRemove[0]), 1);
             }
         }   
-    }
+    };
 
     setFieldType = (column: Col, type: TemplateFieldType) => {
         if (this.selectedFields.includes(column.title)) {
@@ -460,7 +460,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             column.type = type;
         }
         this.forceUpdate();
-    }
+    };
 
     setFieldDesc = (column: Col, desc: string) => {
         if (this.selectedFields.includes(column.title)) {
@@ -469,7 +469,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             column.desc = desc;
         }
         this.forceUpdate();
-    }
+    };
 
     matchesForTemplate = (template: TemplateDocInfos, cols: Col[]): number[][] => {
         const colMatchesField = (col: Col, field : Field) => { return field.sizes?.includes(col.size) && field.types?.includes(col.type) };
@@ -485,7 +485,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         });
 
         return matches;
-    }
+    };
 
     maxMatches = (fieldsCt: number, matches: number[][]) => {
         const used: boolean[] = Array(fieldsCt).fill(false);
@@ -515,7 +515,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }
 
         return count;
-    }
+    };
 
 
     findValidTemplates = (cols: Col[], templates: TemplateDocInfos[]) => {
@@ -529,14 +529,36 @@ 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;
+    // }
 
     createEmptyTemplate = (template: TemplateDocInfos, assignments: {[field: number]: Col}) => {
         const fields: Doc[] = [];
 
         Object.entries(assignments).forEach(([f, col]) => {
             const field: Field = template.fields[Number(f)];
-            console.log(field)
+
             const doc = (col.type === TemplateFieldType.VISUAL ? FieldFuncs.ImageField : FieldFuncs.TextField)({
                 tl: field.tl, 
                 br: field.br }, 
@@ -569,14 +591,42 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             _width: template.width, 
             title: template.title, 
             backgroundColor: template.opts.backgroundColor,
+            _layout_borderRounding: `${template.opts.cornerRounding}px` ?? '0px', 
+            borderWidth: template.opts.borderWidth,
+            borderColor: template.opts.borderColor,
             x: 400, 
-            y: 400 
+            y: 400,
         });
 
         const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         mainCollection.addDocument(renderedTemplate);
-    }
+    };
+
+    compileFieldDescriptions = (templates: TemplateDocInfos[]): string => {
+        let descriptions: string = '';
+        templates.forEach(template => {
+            descriptions += `----------  Description of template ${template.title}'s fields: `
+            template.fields.forEach((field, index) => {
+                descriptions += `{Field #${index}: ${field.description}} `
+            });
+        });
 
+        return descriptions;
+    };
+
+    compileColDescriptions = (cols: Col[]): string =>  {
+        let descriptions: string = '';
+        cols.forEach(col => descriptions += `{"${col.title} column: ${col.desc}} `);
+
+        return descriptions;
+    };
+
+    assignColsToFields = (templates: TemplateDocInfos[], cols: Col[]) => {
+        const fieldDescriptions: string = this.compileFieldDescriptions(templates);
+        const colDescriptions: string = this.compileColDescriptions(cols);
+
+
+    };
 
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
@@ -1109,7 +1159,9 @@ type Field = {
     br: [number, number], 
     types?: TemplateFieldType[], 
     sizes?: FieldSize[], 
+    description?: string;
     opts: FieldOpts;
+    subfields?: ['freeform' | 'stacking' | 'carousel', Field[]];
 };
 
 type InkDecoration = {
@@ -1242,40 +1294,55 @@ export class TemplateLayouts {
 
     public static FourField001: TemplateDocInfos = {
         title: 'fourfield1',
-        width: 450, 
-        height: 600, 
-        opts: {},
+        width: 416, 
+        height: 721, 
+        opts: {
+            backgroundColor: '#7B8D62',
+            cornerRounding: 20,
+            borderColor: '#642B00',
+            borderWidth: '12',
+        },
         fields: [{
-            tl: [-.6, -.9], 
-            br: [.6, -.8], 
+            tl: [-.85, -1], 
+            br: [.85, -.85], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.TINY],
+            description: '',
             opts: {
-
+                backgroundColor: 'transparent',
             }
         }, {
-            tl: [-.9, -.7], 
-            br: [.9, .2], 
+            tl: [-.87, -.83], 
+            br: [.87, .2], 
             types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+            description: '',
             opts: {
-
+                cornerRounding: 20,
+                borderColor: '#642B00',
+                borderWidth: '6',
+                backgroundColor: '#CECAB9',
             }
         }, {
-            tl: [-.6, .3], 
-            br: [.6, .4], 
+            tl: [-.8, .2], 
+            br: [.8, .35], 
             types: [TemplateFieldType.TEXT],
-            sizes: [FieldSize.TINY],
+            sizes: [FieldSize.TINY, FieldSize.SMALL],
+            description: '',
             opts: {
-
+                backgroundColor: 'transparent'
             }
         }, {
-            tl: [-.9, .5], 
-            br: [.9, .9], 
+            tl: [-.87, .37], 
+            br: [.87, .96], 
             types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+            description: '',
             opts: {
-
+                cornerRounding: 15,
+                borderColor: '#642B00',
+                borderWidth: '6',
+                backgroundColor: '#CECAB9',
             }
         }],
         decorations: [],
@@ -1293,6 +1360,7 @@ export class TemplateLayouts {
             br: [.83, -.2], 
             types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE],
+            description: '',
             opts: {
                 borderWidth: '8',
                 borderColor: '#F8E71C',
@@ -1302,6 +1370,7 @@ export class TemplateLayouts {
             br: [.45, 0], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.TINY, FieldSize.SMALL],
+            description: '',
             opts: {
                 backgroundColor: 'transparent',
                 color: 'white'
@@ -1311,6 +1380,7 @@ export class TemplateLayouts {
             br: [.45, .18], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.TINY, FieldSize.SMALL],
+            description: '',
             opts: {
                 backgroundColor: 'transparent',
                 color: 'white'
@@ -1320,6 +1390,7 @@ export class TemplateLayouts {
             br: [.83, .95], 
             types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+            description: '',
             opts: {
                 borderWidth: '8',
                 borderColor: '#F8E71C',
@@ -1378,6 +1449,7 @@ export class TemplateLayouts {
             br: [.875, .7], 
             types: [TemplateFieldType.VISUAL],
             sizes: [FieldSize.LARGE, FieldSize.HUGE],
+            description: '',
             opts: {
                 borderWidth: '15',
                 borderColor: '#E0E0DA',
@@ -1387,28 +1459,32 @@ export class TemplateLayouts {
             br: [-.1, .95], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.TINY, FieldSize.SMALL],
+            description: '',
             opts: {
                 backgroundColor: 'transparent',
-                color: 'white'
+                color: 'white',
+                contentXCentering: 'right',
             }
         }, {
             tl: [.1, .8], 
             br: [.95, .95], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.TINY, FieldSize.SMALL],
+            description: '',
             opts: {
                 backgroundColor: 'transparent',
-                color: 'white'
+                color: 'white',
+                contentXCentering: 'left'
             }
         }, {
-            tl: [-.83, .2], 
-            br: [.83, .95], 
+            tl: [0, -.9], 
+            br: [.85, -.66], 
             types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+            description: '',
             opts: {
-                borderWidth: '8',
-                borderColor: '#F8E71C',
-                backgroundColor: '#242425'
+                backgroundColor: 'transparent',
+                contentXCentering: 'right'
             }
         }],
         decorations: [{
@@ -1432,16 +1508,30 @@ export class TemplateLayouts {
             br: [.66, .247], 
             types: [TemplateFieldType.VISUAL],
             sizes: [FieldSize.LARGE, FieldSize.HUGE],
+            description: '',
             opts: {
                 borderColor: 'yellow',
                 borderWidth: '8',
                 rotation: 45,
-            }
+            },
+            subfields: [
+                'freeform',
+                [{
+                    tl: [-2, -2], 
+                    br: [2, 2], 
+                    types: [TemplateFieldType.VISUAL],
+                    sizes: [FieldSize.LARGE, FieldSize.HUGE],
+                    opts: {
+                        rotation: 315,
+                    }
+                }]
+            ]
         }, {
             tl: [-.7, .2], 
             br: [.7, .46], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.TINY, FieldSize.SMALL],
+            description: '',
             opts: {
                 backgroundColor: 'transparent',
                 contentXCentering: 'center',
@@ -1451,6 +1541,7 @@ export class TemplateLayouts {
             br: [.95, .95], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE],
+            description: '',
             opts: {
                 backgroundColor: 'transparent',
                 color: 'white'