From f7e28d954902bf9e7e8567ce06b6eb03b6cd92ef Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 2 Mar 2025 03:19:21 -0500
Subject: Slight refactors (with so much wasted time trying for larger ones)

---
 src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index a80df8468..687b655d1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -38,7 +38,7 @@ export class Template {
             const matchingField: Field = this.allFields.filter(f => f.getID === field.getID)[0];
             matchingField.applyAttributes(field);
         })
-        clone.mainField.initRenderedDoc();
+        clone.mainField.initializeDocument();
         return clone;
     }
 
@@ -83,7 +83,7 @@ export class Template {
 
     resetToBase = () => {
         this.allFields.forEach(field => {
-            field.initRenderedDoc();
+            field.initializeDocument();
         })
     }
 
-- 
cgit v1.2.3-70-g09d2


From 41d56b090d00b76c44644c07fdd2017a96ac3aae Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 4 Mar 2025 03:27:14 -0500
Subject: removed logs

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |  1 -
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   | 60 +---------------------
 .../nodes/DataVizBox/DocCreatorMenu/Template.tsx   |  2 -
 3 files changed, 2 insertions(+), 61 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index dececd1dc..50d72e2e4 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -172,7 +172,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const colInfo = this.colsInfo.get(colTitle);
         if (colInfo) {
             colInfo.title = newTitle;
-            console.log(colInfo.title);
         } else {
             this.colsInfo.set(colTitle, { title: newTitle, desc: '', type: TemplateFieldType.UNSET, sizes: [] });
         }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 2324006f7..7b28a06a3 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -241,18 +241,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     componentDidMount() {
         document.addEventListener('pointerdown', this.onPointerDown, true);
         document.addEventListener('pointerup', this.onPointerUp);
-        //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')})
-        this._disposers.lightbox = reaction(
-            () => LightboxView.LightboxDoc(),
-            doc => {
-                doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu();
-            }
-        );
-        // this._disposers.layout = reaction(
-        //     () => this._layout,
-        //     layout => { this.updateRenderedDocCollection(); }
-        // );
-        //this._disposers.fields = reaction(() => this._dataViz?.axes, cols => this._selectedCols = cols?.map(col => { return {title: col, type: '', desc: ''}}))
     }
 
     componentWillUnmount() {
@@ -391,38 +379,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     editTemplate = (doc: Doc) => {
-        //this.closeMenu();
         DocumentViewInternal.addDocTabFunc(doc, OpenWhere.addRight);
         DocumentView.DeselectAll();
         Doc.UnBrushDoc(doc);
     };
 
-    testTemplate = async () => {
-
-        //console.log(this.templateManager.templates)
-
-        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        
-        this.templateManager.templates.forEach(template => {
-            const doc = template.mainField.renderedDoc();
-            mainCollection.addDocument(doc);
-        })
-
-        this.forceUpdate();
-
-        // try {
-        //     const res = await gptImageCall('Image of panda eating a cookie');
-
-        //     if (res) {
-        //         const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
-
-        //         console.log(result);
-        //     }
-        // } catch (e) {
-        //     console.log(e);
-        // }
-    };
-
     @action addField = () => {
         const newFields: Col[] = this._userCreatedFields.concat([{ title: '', type: TemplateFieldType.UNSET, desc: '', sizes: [] }]);
         this._userCreatedFields = newFields;
@@ -490,8 +451,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     generateGPTImage = async (prompt: string): Promise<string | undefined> => {
-        console.log(prompt);
-
         try {
             const res = await gptImageCall(prompt);
 
@@ -526,8 +485,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             await Promise.all(promises);
         }
 
-        console.log(GPTIMGCalls)
-
         if (GPTIMGCalls.length) {
             const promises = GPTIMGCalls.map(async ([fieldNum, col]) => {
                 return this.renderGPTImageCall(template, col, Number(fieldNum));
@@ -589,7 +546,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                             const col = this.getColByTitle(colTitle);
                             if (!this._userCreatedFields.includes(col)){ // do the following for any fields not added by the user; will change in the future, for now only GPT content works with user-added fields
                                 const field = template.getFieldByID(Number(fieldID));
-                                //console.log(field);
                                 field.setContent(col.defaultContent ?? '', col.type === TemplateFieldType.VISUAL ? FieldContentType.IMAGE : FieldContentType.STRING);
                                 field.setTitle(col.title);
                             } else {
@@ -632,7 +588,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     renderGPTImageCall = async (template: Template, col: Col, fieldNum: number): Promise<boolean> => {
         const generateAndLoadImage = async (fieldNum: string, col: Col, prompt: string) => {
             const url = await this.generateGPTImage(prompt);
-            console.log('url: ', url)
             const field: Field = template.getFieldByID(Number(fieldNum));
 
             field.setContent(url ?? '', FieldContentType.IMAGE);
@@ -684,8 +639,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
             const res = await gptAPICall(`${++this._callCount}: ${prompt}`, GPTCallType.FILL);
 
-            console.log('prompt: ', prompt, ' response: ', res);
-
             if (res) {
                 const assignments: { [title: string]: { number: string; content: string } } = JSON.parse(res);
                 Object.entries(assignments).forEach(([title, info]) => {
@@ -705,7 +658,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     createDocsFromTemplate = async (template: Template) => {
         const dv = this._dataViz;
-        console.log('dataviz: ', dv);
+
         if (!dv) return;
 
         this._docsRendering = true;
@@ -837,8 +790,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const GPTOptions = <div></div>;
 
-        //<img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
-
         return (
             <div className={`docCreatorMenu-templates-view`}>
                 {this._expandedPreview ? (
@@ -924,7 +875,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 </button>
                             </div>
                             <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this._menuDimensions.width > 400 ? 'center' : '' }}>
-                                <div className="docCreatorMenu-preview-window empty" onPointerDown={e => this.testTemplate()}>
+                                <div className="docCreatorMenu-preview-window empty">
                                     <FontAwesomeIcon icon="plus" color="rgb(160, 160, 160)" />
                                 </div>
                                 {this._userTemplates
@@ -1027,10 +978,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }
     }
 
-    // doc = () => {
-    //     return Docs.Create.FreeformDocument([], { _height: 200, _width: 200, title: 'title'});
-    // }
-
     screenToLocalTransform = () => this._props.ScreenToLocalTransform();
 
     applyLayout = (collection: Doc, docs: Doc[]) => {
@@ -1092,7 +1039,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         if (!this._fullyRenderedDocs) return;
 
         const { horizontalSpan, verticalSpan } = this.previewInfo;
-        //const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan;
 
         const collectionFactory = (): (docs: Doc[], options: DocumentOptions) => Doc => {
             switch (this._layout.type) {
@@ -1162,8 +1108,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     get optionsMenuContents() {
-        const layoutEquals = (layout: DataVizTemplateLayout) => {}; //TODO: ADD LATER
-
         const layoutOption = (option: LayoutType, optStyle?: {}, specialFunc?: Function) => {
             return (
                 <div
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index 31402eeeb..39215eb06 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -135,8 +135,6 @@ export class Template {
             if (mt[i] !== -1) ++count;
         }
 
-        console.log(this.mainField.getTitle(), count)
-
         return count;
     };
 
-- 
cgit v1.2.3-70-g09d2


From 0a8f3739cf5c30852f18751a4c05d81e0dabe928 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 4 Mar 2025 04:19:01 -0500
Subject: linting

---
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   | 156 ++++++++++-----------
 .../DocCreatorMenu/FieldTypes/DynamicField.tsx     |  21 ++-
 .../DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx |  61 ++++----
 .../DocCreatorMenu/FieldTypes/StaticField.tsx      |  13 +-
 .../nodes/DataVizBox/DocCreatorMenu/Template.tsx   |   2 -
 .../DataVizBox/DocCreatorMenu/TemplateBackend.tsx  |   2 +-
 .../DataVizBox/DocCreatorMenu/TemplateManager.tsx  |   1 -
 7 files changed, 116 insertions(+), 140 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 7b28a06a3..7bc1b8064 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -1,24 +1,22 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Colors } from 'browndash-components';
-import { action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { action, computed, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { IDisposer } from 'mobx-utils';
 import * as React from 'react';
 import ReactLoading from 'react-loading';
-import { ClientUtils, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../../ClientUtils';
+import { ClientUtils, returnEmptyFilter, returnFalse, setupMoveUpEvents } from '../../../../../ClientUtils';
 import { emptyFunction } from '../../../../../Utils';
-import { Doc, FieldType, NumListCast, StrListCast, returnEmptyDoclist } from '../../../../../fields/Doc';
+import { Doc, NumListCast, StrListCast, returnEmptyDoclist } from '../../../../../fields/Doc';
 import { Id } from '../../../../../fields/FieldSymbols';
-import { Cast, DocCast, ImageCast, StrCast } from '../../../../../fields/Types';
+import { ImageCast, StrCast } from '../../../../../fields/Types';
 import { ImageField } from '../../../../../fields/URLField';
 import { Networking } from '../../../../Network';
 import { GPTCallType, gptAPICall, gptImageCall } from '../../../../apis/gpt/GPT';
 import { Docs, DocumentOptions } from '../../../../documents/Documents';
 import { DragManager } from '../../../../util/DragManager';
-import { MakeTemplate } from '../../../../util/DropConverter';
 import { SnappingManager } from '../../../../util/SnappingManager';
 import { UndoManager, undoable } from '../../../../util/UndoManager';
-import { LightboxView } from '../../../LightboxView';
 import { ObservableReactComponent } from '../../../ObservableReactComponent';
 import { CollectionFreeFormView } from '../../../collections/collectionFreeForm/CollectionFreeFormView';
 import { DocumentView, DocumentViewInternal } from '../../DocumentView';
@@ -26,14 +24,13 @@ import { FieldViewProps } from '../../FieldView';
 import { OpenWhere } from '../../OpenWhere';
 import { DataVizBox } from '../DataVizBox';
 import './DocCreatorMenu.scss';
-import { DefaultStyleProvider, returnEmptyDocViewList } from '../../../StyleProvider';
+import { DefaultStyleProvider } from '../../../StyleProvider';
 import { Transform } from '../../../../util/Transform';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from './TemplateBackend';
 import { TemplateManager } from './TemplateManager';
 import { Template } from './Template';
 import { Field, FieldContentType } from './FieldTypes/Field';
-import { TabDocView } from '../../../collections/TabDocView';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 export enum LayoutType {
     FREEFORM = 'Freeform',
@@ -43,6 +40,29 @@ export enum LayoutType {
     CARD = 'Card View',
 }
 
+export interface DataVizTemplateInfo {
+    doc: Doc;
+    layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number };
+    columns: number;
+    referencePos: { x: number; y: number };
+}
+
+export interface DataVizTemplateLayout {
+    template: Doc;
+    docsNumList: number[];
+    layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number };
+    columns: number;
+    rows: number;
+}
+
+export type Col = {
+    sizes: TemplateFieldSize[];
+    desc: string;
+    title: string;
+    type: TemplateFieldType;
+    defaultContent?: string;
+};
+
 @observer
 export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     static Instance: DocCreatorMenu;
@@ -89,8 +109,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _dragging: boolean = false;
     @observable _draggingIndicator: boolean = false;
     @observable _dataViz?: DataVizBox;
-    @observable _interactionLock: any;
-    @observable _snapPt: any;
+    @observable _interactionLock: boolean | undefined;
+    @observable _snapPt: {x: number, y: number} = {x: 0, y: 0};
     @observable _resizeHdlId: string = '';
     @observable _resizing: boolean = false;
     @observable _offset: { x: number; y: number } = { x: 0, y: 0 };
@@ -195,7 +215,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return bounds;
     }
 
-    setUpButtonClick = (e: any, func: Function) => {
+    setUpButtonClick = (e: any, func: () => void) => {
         setupMoveUpEvents(
             this,
             e,
@@ -249,11 +269,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         document.removeEventListener('pointerup', this.onPointerUp);
     }
 
-    @action
-    updateSelectedCols = (cols: string[]) => {
-        this._selectedCols;
-    };
-
     @action
     toggleDisplay = (x: number, y: number) => {
         if (this._shouldDisplay) {
@@ -302,7 +317,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this._interactionLock = true;
         const scaleAspect = {x: scale.x, y: scale.y};
         this.resizeView(refPt, scaleAspect, transl); // prettier-ignore
-        await new Promise<any>(res => { setTimeout(() => { res(this._interactionLock = undefined)})});
+        await new Promise<boolean | undefined>(res => { setTimeout(() => { res(this._interactionLock = undefined)})});
         }); // prettier-ignore
         return true;
     };
@@ -318,7 +333,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     getResizeVals = (thisPt: { x: number; y: number }, dragHdl: string) => {
         const [w, h] = [this._initDimensions.width, this._initDimensions.height];
-        const [moveX, moveY] = [thisPt.x - this._snapPt.x, thisPt.y - this._snapPt.y];
+        const [moveX, moveY] = [thisPt.x - this._snapPt!.x, thisPt.y - this._snapPt!.y];
         let vals: { scale: { x: number; y: number }; refPt: [number, number]; transl: { x: number; y: number } };
         switch (dragHdl) {
             case 'topLeft':    vals = { scale: { x: 1 - moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.r, this.bounds.b], transl: {x: moveX, y: moveY } }; break;
@@ -335,7 +350,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     resizeView = (refPt: number[], scale: { x: number; y: number }, translation: { x: number; y: number }) => {
-        const refCent = [refPt[0], refPt[1]]; // fixed reference point for resize (ie, a point that doesn't move)
         if (this._initDimensions.x === undefined) this._initDimensions.x = this._pageX;
         if (this._initDimensions.y === undefined) this._initDimensions.y = this._pageY;
         const { height, width, x, y } = this._initDimensions;
@@ -475,8 +489,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const GPTTextCalls = Object.entries(assignments).filter(([str, col]) => col.type === TemplateFieldType.TEXT && this._userCreatedFields.includes(col));
         const GPTIMGCalls = Object.entries(assignments).filter(([str, col]) => col.type === TemplateFieldType.VISUAL && this._userCreatedFields.includes(col));
 
-        let fieldContent: string = template.compiledContent;
-
         if (GPTTextCalls.length) {
             const promises = GPTTextCalls.map(([str, col]) => {
                 return this.renderGPTTextCall(template, col, Number(str));
@@ -527,7 +539,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         ++this._callCount;
         const origCount = this._callCount;
 
-        let prompt: string = `(${origCount}) ${inputText}`;
+        const prompt: string = `(${origCount}) ${inputText}`;
 
         this._GPTLoading = true;
 
@@ -539,7 +551,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 const brokenDownAssignments: [Template, { [fieldID: number]: Col }][] = [];
 
                 Object.entries(assignments).forEach(([tempTitle, assignment]) => {
-                    const template = templates.filter(template => template.mainField.getTitle() === tempTitle)[0];
+                    const template = templates.filter(t => t.mainField.getTitle() === tempTitle)[0];
                     if (!template) return;
                     const toObj = Object.entries(assignment).reduce(
                         (a, [fieldID, colTitle]) => {
@@ -575,9 +587,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const assignments: [Template, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols);
 
-        const renderedTemplatePromises: Promise<Template | undefined>[] = assignments.map(([template, assignments]) => this.applyGPTContentToTemplate(template, assignments));
+        const renderedTemplatePromises: Promise<Template | undefined>[] = assignments.map(([template, asns]) => this.applyGPTContentToTemplate(template, asns));
 
-        const renderedTemplates: (Template | undefined)[] = await Promise.all(renderedTemplatePromises);
+        await Promise.all(renderedTemplatePromises);
 
         setTimeout(() => {
             this.setSuggestedTemplates(templates);
@@ -585,16 +597,16 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         });
     };
 
-    renderGPTImageCall = async (template: Template, col: Col, fieldNum: number): Promise<boolean> => {
-        const generateAndLoadImage = async (fieldNum: string, col: Col, prompt: string) => {
+    renderGPTImageCall = async (template: Template, col: Col, fieldNumber: number): Promise<boolean> => {
+        const generateAndLoadImage = async (fieldNum: string, column: Col, prompt: string) => {
             const url = await this.generateGPTImage(prompt);
             const field: Field = template.getFieldByID(Number(fieldNum));
 
             field.setContent(url ?? '', FieldContentType.IMAGE);
-            field.setTitle(col.title);
+            field.setTitle(column.title);
         };
 
-        let fieldContent: string = template.compiledContent;
+        const fieldContent: string = template.compiledContent;
 
         try {
             const sysPrompt =
@@ -605,7 +617,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
             const prompt = await gptAPICall(sysPrompt, GPTCallType.COMPLETEPROMPT);
 
-            await generateAndLoadImage(String(fieldNum), col, prompt);
+            await generateAndLoadImage(String(fieldNumber), col, prompt);
         } catch (e) {
             console.log(e);
         }
@@ -632,7 +644,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const textAssignment = `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.sizes[0])} words, assigned field: ${fieldNum} ---`;
 
-        let fieldContent: string = template.compiledContent;
+        const fieldContent: string = template.compiledContent;
 
         try {
             const prompt = fieldContent + textAssignment;
@@ -643,10 +655,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 const assignments: { [title: string]: { number: string; content: string } } = JSON.parse(res);
                 Object.entries(assignments).forEach(([title, info]) => {
                     const field: Field = template.getFieldByID(Number(info.number));
-                    const col = this.getColByTitle(title);
+                    const column = this.getColByTitle(title);
 
                     field.setContent(info.content ?? '', FieldContentType.STRING);
-                    field.setTitle(col.title);
+                    field.setTitle(column.title);
                 });
             }
         } catch (err) {
@@ -667,7 +679,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const selectedRows = NumListCast(dv.layoutDoc.dataViz_selectedRows);
     
         const rowContents: { [title: string]: string }[] = selectedRows.map(row => {
-            let values: { [title: string]: string } = {};
+            const values: { [title: string]: string } = {};
             fields.forEach(col => {
                 values[col] = dv.records[row][col];
             });
@@ -756,7 +768,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     focus={emptyFunction}
                     styleProvider={DefaultStyleProvider}
                     addDocTab={DocumentViewInternal.addDocTabFunc}
-                    // eslint-disable-next-line no-use-before-define
                     pinToPres={() => undefined}
                     childFilters={returnEmptyFilter}
                     childFiltersByRanges={returnEmptyFilter}
@@ -786,7 +797,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     get templatesPreviewContents() {
-        const renderedTemplates: Doc[] = [];
 
         const GPTOptions = <div></div>;
 
@@ -813,6 +823,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                         .map(({doc, template}) => (
                                             <div
                                                 className="docCreatorMenu-preview-window"
+                                                key='0'
                                                 style={{
                                                     border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
                                                     boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
@@ -844,7 +855,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                                     focus={emptyFunction}
                                                     styleProvider={DefaultStyleProvider}
                                                     addDocTab={this._props.addDocTab}
-                                                    // eslint-disable-next-line no-use-before-define
                                                     pinToPres={() => undefined}
                                                     childFilters={returnEmptyFilter}
                                                     childFiltersByRanges={returnEmptyFilter}
@@ -882,6 +892,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                     .map(({template, doc}) => (
                                         <div
                                             className="docCreatorMenu-preview-window"
+                                            key='0'
                                             style={{
                                                 border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
                                                 boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
@@ -913,7 +924,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                                 focus={emptyFunction}
                                                 styleProvider={DefaultStyleProvider}
                                                 addDocTab={this._props.addDocTab}
-                                                // eslint-disable-next-line no-use-before-define
                                                 pinToPres={() => undefined}
                                                 childFilters={returnEmptyFilter}
                                                 childFiltersByRanges={returnEmptyFilter}
@@ -953,11 +963,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     get layoutConfigOptions() {
-        const optionInput = (icon: string, func: Function, def?: number, key?: string, noMargin?: boolean) => {
+        const optionInput = (icon: string, func: (input: string) => void, def?: number, key?: string, noMargin?: boolean) => {
             return (
                 <div className="docCreatorMenu-option-container small no-margin" key={key} style={{ marginTop: noMargin ? '0px' : '' }}>
                     <div className="docCreatorMenu-option-title config layout-config">
-                        <FontAwesomeIcon icon={icon as any} />
+                        <FontAwesomeIcon icon={icon as IconProp} />
                     </div>
                     <input defaultValue={def} onInput={e => func(e.currentTarget.value)} className="docCreatorMenu-input config layout-config" />
                 </div>
@@ -1070,16 +1080,16 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this._renderedDocCollection = collection;
     }
 
-    layoutPreviewContents = (id?: number) => {
+    layoutPreviewContents = () => {
 
         return this._docsRendering ? (
-            <div className="docCreatorMenu-layout-preview-window-wrapper loading" id={String(id) ?? undefined}>
+            <div className="docCreatorMenu-layout-preview-window-wrapper loading">
                 <div className="loading-spinner">
                     <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
                 </div> 
             </div>
             ) : !this._renderedDocCollection? null : (
-            <div className="docCreatorMenu-layout-preview-window-wrapper" id={String(id) ?? undefined}>
+            <div className="docCreatorMenu-layout-preview-window-wrapper">
                 <DocumentView
                     Document={this._renderedDocCollection}
                     isContentActive={emptyFunction}
@@ -1094,7 +1104,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     focus={emptyFunction}
                     styleProvider={DefaultStyleProvider}
                     addDocTab={this._props.addDocTab}
-                    // eslint-disable-next-line no-use-before-define
                     pinToPres={() => undefined}
                     childFilters={returnEmptyFilter}
                     childFiltersByRanges={returnEmptyFilter}
@@ -1108,7 +1117,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     get optionsMenuContents() {
-        const layoutOption = (option: LayoutType, optStyle?: {}, specialFunc?: Function) => {
+        const layoutOption = (option: LayoutType, optStyle?: object, specialFunc?: () => void) => {
             return (
                 <div
                     className="docCreatorMenu-dropdown-option"
@@ -1131,7 +1140,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             return (
                 <div className="docCreatorMenu-option-container">
                     <div className={`docCreatorMenu-option-title config ${specClass}`} style={{ width: width * 0.4, height: height }}>
-                        <FontAwesomeIcon icon={icon as any} />
+                        <FontAwesomeIcon icon={icon as IconProp} />
                     </div>
                     {manual ? (
                         <input className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }} />
@@ -1162,13 +1171,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     </div>
                 </div>
                 {this._layout.type ? this.layoutConfigOptions : null}
-                {this.layoutPreviewContents(this._menuDimensions.width * 0.75)}
+                {this.layoutPreviewContents()}
                 {selectionBox(
                     60,
                     20,
                     'repeat',
                     undefined,
-                    repeatOptions.map(num => <option onPointerDown={e => (this._layout.repeat = num)}>{`${num}x`}</option>)
+                    repeatOptions.map(num => <option key={num} onPointerDown={() => (this._layout.repeat = num)}>{`${num}x`}</option>)
                 )}
                 <hr className="docCreatorMenu-option-divider" />
                 <div className="docCreatorMenu-general-options-container">
@@ -1333,19 +1342,19 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const width: number = ref?.width ?? 0;
 
         return [
-            <div className='docCreatorMenu-resizer top' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: -7}}/>, 
-            <div className='docCreatorMenu-resizer left' onPointerDown={this.onResizePointerDown} style={{height: height, left: -7, top: 0}}/>,
-            <div className='docCreatorMenu-resizer right' onPointerDown={this.onResizePointerDown} style={{height: height, left: width - 3, top: 0}}/>, 
-            <div className='docCreatorMenu-resizer bottom' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: height - 3}}/>,
-            <div className='docCreatorMenu-resizer topLeft' onPointerDown={this.onResizePointerDown} style={{left: -10, top: -10, cursor: 'nwse-resize'}}/>,
-            <div className='docCreatorMenu-resizer topRight' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: -10, cursor: 'nesw-resize'}}/>,
-            <div className='docCreatorMenu-resizer bottomLeft' onPointerDown={this.onResizePointerDown} style={{left: -10, top: height - 5, cursor: 'nesw-resize'}}/>,
-            <div className='docCreatorMenu-resizer bottomRight' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: height - 5, cursor: 'nwse-resize'}}/>,
+            <div className='docCreatorMenu-resizer top' key='0' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: -7}}/>, 
+            <div className='docCreatorMenu-resizer left' key='1' onPointerDown={this.onResizePointerDown} style={{height: height, left: -7, top: 0}}/>,
+            <div className='docCreatorMenu-resizer right' key='2' onPointerDown={this.onResizePointerDown} style={{height: height, left: width - 3, top: 0}}/>, 
+            <div className='docCreatorMenu-resizer bottom' key='3' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: height - 3}}/>,
+            <div className='docCreatorMenu-resizer topLeft' key='4' onPointerDown={this.onResizePointerDown} style={{left: -10, top: -10, cursor: 'nwse-resize'}}/>,
+            <div className='docCreatorMenu-resizer topRight' key='5' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: -10, cursor: 'nesw-resize'}}/>,
+            <div className='docCreatorMenu-resizer bottomLeft' key='6' onPointerDown={this.onResizePointerDown} style={{left: -10, top: height - 5, cursor: 'nesw-resize'}}/>,
+            <div className='docCreatorMenu-resizer bottomRight' key='7' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: height - 5, cursor: 'nwse-resize'}}/>,
         ]; //prettier-ignore
     }
 
     render() {
-        const topButton = (icon: string, opt: string, func: Function, tag: string) => {
+        const topButton = (icon: string, opt: string, func: () => void, tag: string) => {
             return (
                 <div className={`top-button-container ${tag} ${opt === this._menuContent ? 'selected' : ''}`}>
                     <div
@@ -1357,7 +1366,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 })
                             )
                         }>
-                        <FontAwesomeIcon icon={icon as any} />
+                        <FontAwesomeIcon icon={icon as IconProp} />
                     </div>
                 </div>
             );
@@ -1396,11 +1405,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 setupMoveUpEvents(
                                     this,
                                     e,
-                                    e => {
+                                    event => {
                                         this._dragging = true;
                                         this._startPos = { x: 0, y: 0 };
-                                        this._startPos.x = e.pageX - (this._ref?.getBoundingClientRect().left ?? 0);
-                                        this._startPos.y = e.pageY - (this._ref?.getBoundingClientRect().top ?? 0);
+                                        this._startPos.x = event.pageX - (this._ref?.getBoundingClientRect().left ?? 0);
+                                        this._startPos.y = event.pageY - (this._ref?.getBoundingClientRect().top ?? 0);
                                         document.addEventListener('pointermove', this.onDrag);
                                         return true;
                                     },
@@ -1426,26 +1435,3 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         );
     }
 }
-
-export interface DataVizTemplateInfo {
-    doc: Doc;
-    layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number };
-    columns: number;
-    referencePos: { x: number; y: number };
-}
-
-export interface DataVizTemplateLayout {
-    template: Doc;
-    docsNumList: number[];
-    layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number };
-    columns: number;
-    rows: number;
-}
-
-export type Col = {
-    sizes: TemplateFieldSize[];
-    desc: string;
-    title: string;
-    type: TemplateFieldType;
-    defaultContent?: string;
-};
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
index 68cf027b0..c5254c17d 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
@@ -1,8 +1,6 @@
 import { Doc } from "../../../../../../fields/Doc";
 import { Docs } from "../../../../../documents/Documents";
-import { Col } from "../DocCreatorMenu";
-import { TemplateLayouts } from "../TemplateBackend";
-import { Field, FieldContentType, FieldDimensions, FieldSettings, ViewType } from "./Field";
+import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field";
 import { FieldUtils } from "./FieldUtils";
 import { StaticField } from "./StaticField";
 
@@ -30,7 +28,7 @@ export class DynamicField implements Field {
         this.subfields = this.setupSubfields();
     }
 
-    setContent = (content: string, type?: FieldContentType) => { return };
+    setContent = () => { return };
     getContent = () => { return '' };
 
     setTitle = (title: string) => { this.title = title };
@@ -54,7 +52,7 @@ export class DynamicField implements Field {
         return this.settings.description ?? '';
     }
 
-    matches = (cols: Col[]): Array<number> => {
+    matches = (): Array<number> => {
         return [];
     }
 
@@ -97,19 +95,20 @@ export class DynamicField implements Field {
     };
 
     renderedDoc = (): Doc => {
+        let doc: Doc;
         switch (this.settings.viewType) {
             case ViewType.CAROUSEL3D:
-                const carouselDoc = Docs.Create.Carousel3DDocument(this.subfields.map(field => field.renderedDoc()), {
+                doc = Docs.Create.Carousel3DDocument(this.subfields.map(field => field.renderedDoc()), {
                     title: this.title,
                 });
-                FieldUtils.applyBasicOpts(carouselDoc, this.dimensions, this.settings);
-                return carouselDoc;
+                FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings);
+                return doc;
             case ViewType.FREEFORM:
-                const freeformDoc = Docs.Create.FreeformDocument(this.subfields.map(field => field.renderedDoc()), {
+                doc = Docs.Create.FreeformDocument(this.subfields.map(field => field.renderedDoc()), {
                     title: this.title,
                 });
-                FieldUtils.applyBasicOpts(freeformDoc, this.dimensions, this.settings);
-                return freeformDoc;
+                FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings);
+                return doc;
             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
index ebd8f0f6c..ea9b566b3 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
@@ -2,36 +2,6 @@ import { Doc } from "../../../../../../fields/Doc";
 import { Col } from "../DocCreatorMenu";
 import { TemplateFieldSize, TemplateFieldType } from "../TemplateBackend";
 
-export interface Field {
-    getContent: () => string;
-    setContent: (content: string, type?: FieldContentType) => void;
-    getDimensions: FieldDimensions;
-    getSubfields: Field[];
-    getAllSubfields: Field[];
-    getID: number;
-    getViewType: ViewType;
-    getDescription: string;
-    getTitle: () => string;
-    setTitle: (title: string) => void;
-    setupSubfields: () => Field[];
-    applyAttributes: (field: Field) => void;
-    renderedDoc: () => Doc;
-    matches: (cols: Col[]) => number[];
-    updateRenderedDoc: (oldDoc?: Doc) => Doc;
-}
-
-export type FieldSettings = {
-    tl: [number, number];
-    br: [number, number];
-    opts: FieldOpts;
-    viewType: ViewType;
-    title?: string;
-    subfields?: FieldSettings[];
-    types?: TemplateFieldType[];
-    sizes?: TemplateFieldSize[];
-    description?: string;
-};
-
 export enum FieldContentType {
     STRING = 'string',
     IMAGE = 'image',
@@ -60,8 +30,37 @@ export interface FieldOpts {
     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;
+    viewType: ViewType;
+    title?: string;
+    subfields?: FieldSettings[];
+    types?: TemplateFieldType[];
+    sizes?: TemplateFieldSize[];
+    description?: string;
+};
+
+export interface Field {
+    getContent: () => string;
+    setContent: (content: string, type?: FieldContentType) => void;
+    getDimensions: FieldDimensions;
+    getSubfields: Field[];
+    getAllSubfields: Field[];
+    getID: number;
+    getViewType: ViewType;
+    getDescription: string;
+    getTitle: () => string;
+    setTitle: (title: string) => void;
+    setupSubfields: () => Field[];
+    applyAttributes: (field: Field) => void;
+    renderedDoc: () => Doc;
+    matches: (cols: Col[]) => number[];
+    updateRenderedDoc: (oldDoc?: Doc) => Doc;
 }
\ 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
index e55c127e7..47b43f051 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
@@ -1,9 +1,6 @@
-import { TbHospital } from "react-icons/tb";
 import { Doc } from "../../../../../../fields/Doc";
-import { FieldType } from "../../../../../../fields/ObjectField";
-import { Docs, DocumentOptions } from "../../../../../documents/Documents";
+import { Docs } from "../../../../../documents/Documents";
 import { Col } from "../DocCreatorMenu";
-import { Template } from "../Template";
 import { DynamicField } from "./DynamicField";
 import { FieldUtils } from "./FieldUtils";
 import { Field, FieldContentType, FieldDimensions, FieldSettings, ViewType } from "./Field";
@@ -124,20 +121,18 @@ export class StaticField {
 
         switch (this.contentType) {
             case FieldContentType.STRING:
-                const text = String(this.content);
-                doc = Docs.Create.TextDocument(text, {
+                doc = Docs.Create.TextDocument(String(this.content), {
                     title: this.title,
                     text_fontColor: oldDoc ? String(oldDoc.color) : opts.color,
                     contentBold: oldDoc ? Boolean(oldDoc.fontBold) : opts.fontBold,
                     textTransform: oldDoc ? String(oldDoc.fontTransform) : opts.fontTransform,
                     color: oldDoc ? String(oldDoc.color) : opts.color,
-                    _text_fontSize: `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}`
+                    _text_fontSize: `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, String(this.content), true)}`
                 });
                 FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc);
                 break;
             case FieldContentType.IMAGE:
-                const url = String(this.content);
-                doc = Docs.Create.ImageDocument(url, {
+                doc = Docs.Create.ImageDocument(String(this.content), {
                     title: this.title,
                     _layout_fitWidth: false,
                 });
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index 39215eb06..0a5097d4a 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -1,6 +1,4 @@
-
 import { Doc, FieldType } from "../../../../../fields/Doc";
-import { Docs } from "../../../../documents/Documents";
 import { Col } from "./DocCreatorMenu";
 import { DynamicField } from "./FieldTypes/DynamicField";
 import { Field, FieldSettings, ViewType } from "./FieldTypes/Field";
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
index 99edce34e..d3282eda3 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
@@ -1,4 +1,4 @@
-import { FieldOpts, FieldSettings, ViewType } from "./FieldTypes/Field";
+import { FieldSettings, ViewType } from "./FieldTypes/Field";
 import { } from "./FieldTypes/StaticField";
 
 export enum TemplateFieldType {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
index 890bc6f73..50ae4d72a 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
@@ -1,7 +1,6 @@
 import { Col } from "./DocCreatorMenu";
 import { FieldSettings } from "./FieldTypes/Field";
 import { Template } from "./Template";
-import { TemplateLayouts } from "./TemplateBackend";
 
 export class TemplateManager {
 
-- 
cgit v1.2.3-70-g09d2


From 2c7462f38a086f156a7d2e20dc15b822b7d7b1fb Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 5 Mar 2025 02:19:04 -0500
Subject: working on template cloning

---
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   | 28 ++++---
 .../DocCreatorMenu/FieldTypes/DynamicField.tsx     | 13 +++-
 .../DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx | 90 ++++++++++++++--------
 .../DocCreatorMenu/FieldTypes/FieldUtils.tsx       |  4 +-
 .../FieldTypes/StaticContentField.tsx              | 42 ++++------
 .../nodes/DataVizBox/DocCreatorMenu/Template.tsx   | 27 ++++---
 6 files changed, 120 insertions(+), 84 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index cc161e688..099d082d3 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -632,7 +632,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             const renderedTemplates: (Template | undefined)[] = await Promise.all(renderedTemplatePromises);
         }
 
-        // templates.forEach(template => template.mainField.initRenderedDoc())
+        templates.forEach(template => template.mainField.initializeDocument())
 
         setTimeout(() => {
             this.setSuggestedTemplates(templates);
@@ -695,7 +695,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
             const res = await gptAPICall(`${++this._callCount}: ${prompt}`, GPTCallType.FILL);
 
-            console.log('prompt: ', prompt, ' response: ', res);
+            // console.log('prompt: ', prompt, ' response: ', res);
 
             if (res) {
                 const assignments: { [title: string]: { number: string; content: string } } = JSON.parse(res);
@@ -740,6 +740,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             fields.filter(title => title).forEach(title => {
                 const field = templateCopy.getFieldByTitle(title);
                 if (field === undefined) return;
+                console.log('setting content to: ', content[title]);
                 field.setContent(content[title], field.viewType);
             });
     
@@ -769,17 +770,19 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         };
 
         const rows = [1, 2, 3, 4];
-    
-        //const promises = rowContents.map(content => processContent(content));
-    
-        const promises = rows.map(row => processContent({}));
+        
+        let docs: Promise<Doc>[];
+        if (this.DEBUG_MODE) {
+            docs = rows.map(() => processContent({}));
+        } else {
+            docs = rowContents.map(content => processContent(content));
+        }
 
-        const renderedDocs = await Promise.all(promises);
+        const renderedDocs = await Promise.all(docs);
 
-        this._docsRendering = false; // removes loading indicator
+        //renderedDocs.forEach(doc => {console.log(doc._height, doc._width); doc._height = 400; doc._width = 400});
 
-        console.log('docs: ', renderedDocs);
-        console.log('first doc height: ', renderedDocs[0]._height);
+        this._docsRendering = false; // removes loading indicator
 
         return renderedDocs;
     }
@@ -1032,6 +1035,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     applyLayout = (collection: Doc, docs: Doc[]) => {
         const { horizontalSpan, verticalSpan } = this.previewInfo;
+        console.log(this.previewInfo)
         collection._height = verticalSpan;
         collection._width = horizontalSpan;
 
@@ -1111,7 +1115,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             title: 'title',
             backgroundColor: 'gray',
             x: 200,
-            y: 200
+            y: 200,
+            _width: 4000,
+            _height: 4000,
         });
 
         this.applyLayout(collection, this._fullyRenderedDocs);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
index e17ad3860..c9e76dcbd 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
@@ -1,21 +1,25 @@
 import { makeAutoObservable, makeObservable, reaction } from "mobx";
 import { Doc, DocListCast } from "../../../../../../fields/Doc";
-import { Docs } from "../../../../../documents/Documents";
+import { Docs, DocumentOptions } from "../../../../../documents/Documents";
 import { Col } from "../DocCreatorMenu";
 import { TemplateLayouts } from "../TemplateBackend";
 import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field";
 import { IDisposer } from "mobx-utils";
 import { FieldUtils } from "./FieldUtils";
+import { random } from "lodash";
 
 export class DynamicField extends Field {
     protected subfields: Field[];
 
     protected Document!: Doc;
 
+    private idd: number;
+
     constructor(settings: FieldSettings, id: number, parent?: Field) {
         super(settings, id, FieldUtils.initField, parent);
         this.subfields = this.setupSubfields(this);
         this.initializeDocument();
+        this.idd = random(0, 1000);
     }
 
     setContent = (content: string, type: ViewType) => { return };
@@ -30,7 +34,7 @@ export class DynamicField extends Field {
         return [];
     }
 
-    initializeDocument = (): Doc => {
+    initializeDocument = (oldOpts?: DocumentOptions): Doc => {
         let doc: Doc;
         const renderedSubfields: Doc[] = this.subfields.map(field => field.renderedDoc);
         this.settings.opts.title = this.title;
@@ -39,14 +43,15 @@ export class DynamicField extends Field {
                 doc = Docs.Create.Carousel3DDocument(renderedSubfields, this.settings.opts);
                 break;
             case ViewType.FREEFORM:
-                doc = Docs.Create.FreeformDocument(renderedSubfields, this.settings.opts);
+                doc = Docs.Create.FreeformDocument(renderedSubfields, oldOpts ?? this.settings.opts);
                 break;
             default:
                 doc = Docs.Create.FreeformDocument(renderedSubfields, this.settings.opts);
-            break;
+                break;
         }
 
         this.Document = doc;
+        console.log('width: ', doc._width, ' height: ', doc._height, ' id: ', this.idd)
         return doc;
     }
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
index 07278f4ee..afdbeeadd 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
@@ -1,4 +1,4 @@
-import { makeAutoObservable, makeObservable, reaction } from "mobx";
+import { computed, makeAutoObservable, makeObservable, reaction } from "mobx";
 import { Doc, DocListCast } from "../../../../../../fields/Doc";
 import { Col } from "../DocCreatorMenu";
 import { TemplateFieldSize, TemplateFieldType } from "../TemplateBackend";
@@ -8,12 +8,16 @@ import { Partial } from "@react-spring/web";
 import { DocumentOptions } from "../../../../../documents/Documents";
 import { List } from "../../../../../../fields/List";
 import { runInThisContext } from "vm";
+import { DocData } from "../../../../../../fields/DocSymbols";
+import { ObjectField } from "../../../../../../fields/ObjectField";
+import { ComputedField } from "../../../../../../fields/ScriptField";
+import { Copy } from "../../../../../../fields/FieldSymbols";
 
 export abstract class Field {
 
     protected disposers: { [name: string]: IDisposer } = {};
     
-    private initField: (settings: FieldSettings, index: number, parent: Field) => Field;
+    protected initField: (settings: FieldSettings, index: number, parent: Field, sameId?: boolean) => Field;
 
     protected abstract subfields: Field[];
 
@@ -34,13 +38,13 @@ export abstract class Field {
         this.dimensions = this.getLocalDimensions({tl: this.settings.tl, br: this.settings.br}, this.parent.getDimensions);
         this.applyBasicOpts(this.dimensions, settings);
 
-        this.disposers.fieldList = reaction(
-            () => DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)]),
-            docs => {
-                console.log('updated')
-                this.handleFieldUpdate(docs);
-            }
-        );
+        // this.disposers.fieldList = reaction(
+        //     () => DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)]),
+        //     docs => {
+        //         console.log('updated')
+        //         this.handleFieldUpdate(docs);
+        //     }
+        // );
     }
 
     get getSubfields(): Field[] { return this.subfields ?? []; };
@@ -53,6 +57,10 @@ export abstract class Field {
         return fields;
     };
 
+    setSubFields = (fields: Field[]) => {
+        this.subfields = fields;
+    }
+
     get renderedDoc(){ return this.Document };
     get getDimensions() { return this.dimensions };
     get getID() { return this.id };
@@ -69,10 +77,28 @@ export abstract class Field {
     abstract setContent(content: string, type: ViewType): void;
     abstract getContent(): string;
 
+    makeClone = (subfields: boolean = false): Field => {
+        const newSettings: FieldSettings = this.settings;
+        if (!subfields) newSettings.subfields = [];
+        newSettings.opts = this.documentOptions;
+        return this.initField(newSettings, this.id, this.parent, true);
+    }
+
+    @computed get documentOptions(): DocumentOptions {
+        const opts: DocumentOptions = {};
+        Object.assign(opts, this.Document[DocData]);
+        Object.entries(opts).forEach(([key, field]) => {
+            if (field instanceof ObjectField) {
+                Object.assign(opts, {[key]: ObjectField.MakeCopy(field)})
+            } else if (field instanceof ComputedField) {
+                Object.assign(opts, {[key]: field[Copy]()})
+            }
+        })
+        return opts
+    }
+
     changeFieldType = (newType: ViewType): Field => {
-        console.log('changed')
-        this.settings.viewType = newType;
-        const newField: Field = this.initField(this.settings, this.id, this.parent);
+        const newField: Field = this.initField(this.settings, this.id, this.parent, true);
         this.parent.exchangeFields(newField, this);
         return newField;
     }
@@ -82,7 +108,6 @@ export abstract class Field {
     }
 
     addFieldFromDoc = (doc: Doc) => {
-        console.log('add field called');
         const par = this.Document;
         const settings: FieldSettings = {
             tl: [Number(doc._x) / Number(par._width), Number(doc._y) / Number(par._height)],
@@ -95,13 +120,12 @@ export abstract class Field {
         this.subfields.push(newField);
     };
 
-    // addField = (field: Field) => {
-    //     console.log('added')
-    //     if (!this.subfields.includes(field)){
-    //         this.subfields.push(field);
-    //         // Doc.SetContainer(field.Document, this.Document);
-    //     }
-    // }
+    addField = (field: Field) => {
+        if (!this.subfields.includes(field)){
+            this.subfields.push(field);
+            // Doc.SetContainer(field.Document, this.Document);
+        }
+    }
 
     removeField = (field: Field) => {
         // var childDocs: Doc[] = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)]);
@@ -118,11 +142,11 @@ export abstract class Field {
 
     applyAttributes(field: Field) {
         field.setTitle(this.title);
-        field.initializeDocument(this.Document);
+        field.initializeDocument();
         field.subfields = this.subfields;
     }
 
-    abstract initializeDocument(oldDoc?: Doc): void;
+    abstract initializeDocument(): void;
 
     dispose = () => {
         Object.values(this.disposers).forEach(disposer => disposer?.());
@@ -180,15 +204,15 @@ export abstract class Field {
 
     private applyBasicOpts = (dimensions: FieldDimensions, settings: FieldSettings) => {
         const opts: DocumentOptions = settings.opts;
-        opts.isDefaultTemplateDoc = true;
-        opts._layout_hideScroll = true;
-        opts.x = dimensions.coord.x;
-        opts.y = dimensions.coord.y;
-        opts._height = dimensions.height;
-        opts._width = dimensions.width;
-        opts._nativeWidth = dimensions.width;
-        opts._nativeHeight = dimensions.height;
-        opts._layout_nativeDimEditable = true;
+        opts.isDefaultTemplateDoc ??= true;
+        opts._layout_hideScroll ??= true;
+        opts.x ??= dimensions.coord.x;
+        opts.y ??= dimensions.coord.y;
+        opts._height ??= dimensions.height;
+        opts._width ??= dimensions.width;
+        opts._nativeWidth ??= dimensions.width;
+        opts._nativeHeight ??= dimensions.height;
+        opts._layout_nativeDimEditable ??= true;
     };
 
 }
@@ -219,3 +243,7 @@ export type FieldDimensions = {
     height: number;
     coord: {x: number, y: number};
 }
+
+export type FieldTree = {
+    node: {field: Field, subfields: FieldTree[]}
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
index f3e4130a4..eb12bfef9 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
@@ -5,8 +5,8 @@ import { DecorationField } from "./DecorationField";
 
 export class FieldUtils {
 
-    public static initField = (settings: FieldSettings, index: number, parent: Field): Field => { 
-        const id = Number(`${parent.getID}${index}`);
+    public static initField = (settings: FieldSettings, index: number, parent: Field, sameId: boolean = false): Field => { 
+        const id = sameId ? index : Number(`${parent.getID}${index}`);
         switch (settings.viewType) {
             case ViewType.FREEFORM: case ViewType.CAROUSEL3D:
                 return new DynamicField(settings, id, parent);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx
index 63fe530a6..8b28d82e1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx
@@ -13,12 +13,15 @@ export abstract class StaticContentField extends Field {
     protected content: string = ''; 
     protected subfields: Field[];
 
-    constructor(settings: FieldSettings, parent: Field, id: number) {
+    protected Document: Doc;
+
+    constructor(settings: FieldSettings, id: number, parent: Field) {
         super(settings, id, FieldUtils.initField, parent);
         this.subfields = this.setupSubfields(this);
+        this.Document = this.initializeDocument();
     };
 
-    abstract setContent(content: string, type: ViewType): void;
+    abstract setContent(content: string, type?: ViewType): void;
     getContent = () => { return this.content ?? 'unset'};
     get isContentField(): boolean { return true };
 
@@ -27,15 +30,10 @@ export abstract class StaticContentField extends Field {
 
 export class ImageTemplateField extends StaticContentField {
 
-    protected Document: Doc;
-
-    constructor(settings: FieldSettings, id: number, parent: Field){
-        super(settings, parent, id)
-        this.Document = this.initializeDocument();
-    }
+    setContent = (url: string, type?: ViewType) => { 
+        this.settings.viewType = type ?? this.settings.viewType;
 
-    setContent = (url: string, type: ViewType) => { 
-        if (type === ViewType.IMG){
+        if (type === ViewType.IMG || type === undefined){
             const imgField = new ImageField(url);
             this.Document[DocData]['data'] = imgField;
             this.content = url;
@@ -45,14 +43,11 @@ export class ImageTemplateField extends StaticContentField {
         }
     };
 
-    initializeDocument = (): Doc => {
-        const url = String(this.content);
+    initializeDocument(): Doc {
         this.settings.opts.title = this.title;
         this.settings.opts._layout_fitWidth = false;
 
-        let doc: Doc = Docs.Create.ImageDocument(url, this.settings.opts);
-
-        this.Document = doc;
+        let doc: Doc = Docs.Create.ImageDocument(this.content, this.settings.opts);
 
         return doc;
     };
@@ -60,15 +55,10 @@ export class ImageTemplateField extends StaticContentField {
 
 export class TextTemplateField extends StaticContentField {
 
-    protected Document: Doc;
+    setContent = (text: string, type?: ViewType) => { 
+        this.settings.viewType = type ?? this.settings.viewType;
 
-    constructor(settings: FieldSettings, id: number, parent: Field){
-        super(settings, parent, id)
-        this.Document = this.initializeDocument();
-    }
-
-    setContent = (text: string, type: ViewType) => { 
-        if (type === ViewType.TEXT) {
+        if (type === ViewType.TEXT || type === undefined) {
             const rtf = {
                 doc: {
                     type: 'doc',
@@ -96,17 +86,15 @@ export class TextTemplateField extends StaticContentField {
         }
     };
 
-    initializeDocument = (): Doc => {
+    initializeDocument(): Doc {
         const opts = this.settings.opts;
         const text = this.content;
 
-        // opts._text_fontSize = `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}`;
+        opts._text_fontSize = `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}`;
         opts.title = this.title;
 
         let doc: Doc = Docs.Create.TextDocument(text, opts);
 
-        this.Document = doc;
-
         return doc;
     };
 }
\ 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 687b655d1..43f622512 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -4,11 +4,12 @@ import { Doc, DocListCast, FieldType } from "../../../../../fields/Doc";
 import { Docs } from "../../../../documents/Documents";
 import { Col } from "./DocCreatorMenu";
 import { DynamicField } from "./FieldTypes/DynamicField";
-import { Field, FieldSettings, ViewType } from "./FieldTypes/Field";
+import { Field, FieldSettings, FieldTree, ViewType } from "./FieldTypes/Field";
 import {  } from "./FieldTypes/FieldUtils";
 import { observer } from "mobx-react";
 import { IDisposer } from "mobx-utils";
 import { Width } from "../../../../../fields/DocSymbols";
+import { TemplateLayouts } from "./TemplateBackend";
 
 export class Template {
 
@@ -31,14 +32,22 @@ export class Template {
         //dispose each subfields disposers, etc.
     }
 
-    cloneBase = () => {
-        const clone: Template = new Template(this.settings);
-        this.mainField.applyAttributes(clone.mainField);
-        clone.allFields.filter(field => field !== clone.mainField).forEach(field => {
-            const matchingField: Field = this.allFields.filter(f => f.getID === field.getID)[0];
-            matchingField.applyAttributes(field);
-        })
-        clone.mainField.initializeDocument();
+    cloneBase = (): Template => {
+        const makeCloneFieldTree = (field: Field): Field => {
+            const root: Field = field.makeClone();
+            field.getSubfields.forEach(field => {
+                const clone: Field = makeCloneFieldTree(field);
+                root.addField(clone);
+            });
+            return root;
+        }
+
+        const clone: Template = new Template(TemplateLayouts.BasicSettings);
+        console.log('made clone')
+        clone.mainField = makeCloneFieldTree(this.mainField) as DynamicField;
+        console.log('reinit')
+        clone.mainField.initializeDocument(clone.mainField.documentOptions);
+        console.log('cloned, fieldinfo: ', this.mainField, ' width: ', this.mainField.renderedDoc._width, ' options width: ', clone.mainField.documentOptions._width);
         return clone;
     }
 
-- 
cgit v1.2.3-70-g09d2


From cf91c46cfec6e3e36b9184764016f9c1b5c997d4 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 11 Mar 2025 17:31:16 +0100
Subject: c

---
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   | 26 ++++++++--------------
 .../DocCreatorMenu/FieldTypes/DynamicField.tsx     | 11 ++++++++-
 .../DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx | 10 +++++++--
 .../FieldTypes/StaticContentField.tsx              |  4 ++++
 .../nodes/DataVizBox/DocCreatorMenu/Template.tsx   | 20 ++++++++---------
 5 files changed, 41 insertions(+), 30 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 099d082d3..6d0155b45 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -7,7 +7,7 @@ import * as React from 'react';
 import ReactLoading from 'react-loading';
 import { ClientUtils, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../../ClientUtils';
 import { emptyFunction } from '../../../../../Utils';
-import { Doc, FieldType, NumListCast, StrListCast, returnEmptyDoclist } from '../../../../../fields/Doc';
+import { Doc, DocListCast, FieldType, NumListCast, StrListCast, returnEmptyDoclist } from '../../../../../fields/Doc';
 import { Id } from '../../../../../fields/FieldSymbols';
 import { Cast, DocCast, ImageCast, StrCast } from '../../../../../fields/Types';
 import { ImageField } from '../../../../../fields/URLField';
@@ -34,6 +34,7 @@ import { TemplateManager } from './TemplateManager';
 import { Template } from './Template';
 import { Field, ViewType } from './FieldTypes/Field';
 import { TabDocView } from '../../../collections/TabDocView';
+import { DocData } from '../../../../../fields/DocSymbols';
 
 export enum LayoutType {
     FREEFORM = 'Freeform',
@@ -74,6 +75,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _GPTOpt: boolean = false;
     @observable _callCount: number = 0;
     @observable _GPTLoading: boolean = false;
+    @observable _DOCCC: Doc | undefined;
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
@@ -623,8 +625,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             const cols = this.fieldsInfos;
             templates.push(...this.templateManager.getValidTemplates(cols));
 
-            console.log(templates)
-
             const assignments: [Template, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols);
 
             const renderedTemplatePromises: Promise<Template | undefined>[] = assignments.map(([template, assignments]) => this.applyGPTContentToTemplate(template, assignments));
@@ -735,12 +735,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     
         const processContent = async (content: {[title: string]: string}) => {
 
-            const templateCopy = template.cloneBase(); 
+            const templateCopy = await template.cloneBase(); 
 
             fields.filter(title => title).forEach(title => {
                 const field = templateCopy.getFieldByTitle(title);
                 if (field === undefined) return;
-                console.log('setting content to: ', content[title]);
                 field.setContent(content[title], field.viewType);
             });
     
@@ -765,23 +764,20 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             await Promise.all(gptPromises);
 
             await Promise.all(imagePromises);
-    
-            return templateCopy.getRenderedDoc();
-        };
 
-        const rows = [1, 2, 3, 4];
+            this._DOCCC = templateCopy.mainField.renderedDoc;
+            return templateCopy.mainField.renderedDoc;
+        };
         
         let docs: Promise<Doc>[];
         if (this.DEBUG_MODE) {
-            docs = rows.map(() => processContent({}));
+            docs = [1, 2, 3, 4].map(() => processContent({}));
         } else {
             docs = rowContents.map(content => processContent(content));
         }
 
         const renderedDocs = await Promise.all(docs);
 
-        //renderedDocs.forEach(doc => {console.log(doc._height, doc._width); doc._height = 400; doc._width = 400});
-
         this._docsRendering = false; // removes loading indicator
 
         return renderedDocs;
@@ -1035,7 +1031,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     applyLayout = (collection: Doc, docs: Doc[]) => {
         const { horizontalSpan, verticalSpan } = this.previewInfo;
-        console.log(this.previewInfo)
         collection._height = verticalSpan;
         collection._width = horizontalSpan;
 
@@ -1088,11 +1083,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @type the type of collection the docs should render to (ie. freeform, carousel, card)
      */
     updateRenderedDocCollection = () => {
-        console.log('called');
         if (!this._fullyRenderedDocs) return;
 
-        //const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan;
-
         const collectionFactory = (): (docs: Doc[], options: DocumentOptions) => Doc => {
             switch (this._layout.type) {
                 case LayoutType.CAROUSEL3D:
@@ -1110,7 +1102,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             }
         }
 
-        const collection = collectionFactory()(this._fullyRenderedDocs, {
+        const collection = collectionFactory()([this._fullyRenderedDocs[6], this._fullyRenderedDocs[9]], {
             isDefaultTemplateDoc: true,
             title: 'title',
             backgroundColor: 'gray',
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
index c9e76dcbd..bf4f1b0a4 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
@@ -34,9 +34,19 @@ export class DynamicField extends Field {
         return [];
     }
 
+    makeClone = async (subfields: boolean = false): Promise<Field> => {
+        const newSettings: FieldSettings = this.settings;
+        if (!subfields) newSettings.subfields = [];
+        const field: DynamicField = this.initField(newSettings, this.id, this.parent, true) as DynamicField;
+        //field.Document = (await Doc.MakeClone(this.Document)).clone;
+        return field
+    }
+
     initializeDocument = (oldOpts?: DocumentOptions): Doc => {
         let doc: Doc;
+        //this.settings.opts.data = undefined;
         const renderedSubfields: Doc[] = this.subfields.map(field => field.renderedDoc);
+        console.log('fields: ', renderedSubfields)
         this.settings.opts.title = this.title;
         switch (this.settings.viewType) {
             case ViewType.CAROUSEL3D:
@@ -51,7 +61,6 @@ export class DynamicField extends Field {
         }
 
         this.Document = doc;
-        console.log('width: ', doc._width, ' height: ', doc._height, ' id: ', this.idd)
         return doc;
     }
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
index afdbeeadd..06b364254 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
@@ -12,6 +12,7 @@ import { DocData } from "../../../../../../fields/DocSymbols";
 import { ObjectField } from "../../../../../../fields/ObjectField";
 import { ComputedField } from "../../../../../../fields/ScriptField";
 import { Copy } from "../../../../../../fields/FieldSymbols";
+import { OmitKeys } from "../../../../../../ClientUtils";
 
 export abstract class Field {
 
@@ -77,11 +78,15 @@ export abstract class Field {
     abstract setContent(content: string, type: ViewType): void;
     abstract getContent(): string;
 
-    makeClone = (subfields: boolean = false): Field => {
+    makeClone = async (subfields: boolean = false): Promise<Field> => {
         const newSettings: FieldSettings = this.settings;
         if (!subfields) newSettings.subfields = [];
         newSettings.opts = this.documentOptions;
-        return this.initField(newSettings, this.id, this.parent, true);
+        newSettings.title = this.title;
+        console.log('settings: ', newSettings.opts)
+        const field: Field = this.initField(newSettings, this.id, this.parent, true);
+        //field.Document = (await Doc.MakeClone(this.Document)).clone;
+        return field
     }
 
     @computed get documentOptions(): DocumentOptions {
@@ -123,6 +128,7 @@ export abstract class Field {
     addField = (field: Field) => {
         if (!this.subfields.includes(field)){
             this.subfields.push(field);
+            console.log('field added')
             // Doc.SetContainer(field.Document, this.Document);
         }
     }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx
index 8b28d82e1..18b72e4ea 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx
@@ -7,6 +7,7 @@ import { ImageField } from "../../../../../../fields/URLField";
 import { ViewComponentType } from "@fullcalendar/core";
 import { DynamicField } from "./DynamicField";
 import { FieldUtils } from "./FieldUtils";
+import { random } from "lodash";
 
 export abstract class StaticContentField extends Field {
 
@@ -15,10 +16,13 @@ export abstract class StaticContentField extends Field {
 
     protected Document: Doc;
 
+    protected idd: number;
+
     constructor(settings: FieldSettings, id: number, parent: Field) {
         super(settings, id, FieldUtils.initField, parent);
         this.subfields = this.setupSubfields(this);
         this.Document = this.initializeDocument();
+        this.idd = random(0, 1000);
     };
 
     abstract setContent(content: string, type?: ViewType): void;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index 43f622512..0f911421a 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -32,22 +32,22 @@ export class Template {
         //dispose each subfields disposers, etc.
     }
 
-    cloneBase = (): Template => {
-        const makeCloneFieldTree = (field: Field): Field => {
-            const root: Field = field.makeClone();
-            field.getSubfields.forEach(field => {
-                const clone: Field = makeCloneFieldTree(field);
+    cloneBase = async (): Promise<Template> => {
+        const makeCloneFieldTree = async (field: Field): Promise<Field> => {
+            const root: Field = await field.makeClone();
+            field.getSubfields.forEach(async field => {
+                const clone: Field = await makeCloneFieldTree(field);
                 root.addField(clone);
             });
             return root;
         }
 
         const clone: Template = new Template(TemplateLayouts.BasicSettings);
-        console.log('made clone')
-        clone.mainField = makeCloneFieldTree(this.mainField) as DynamicField;
-        console.log('reinit')
-        clone.mainField.initializeDocument(clone.mainField.documentOptions);
-        console.log('cloned, fieldinfo: ', this.mainField, ' width: ', this.mainField.renderedDoc._width, ' options width: ', clone.mainField.documentOptions._width);
+        clone.mainField = await makeCloneFieldTree(this.mainField) as DynamicField;
+        console.log('last init')
+        clone.mainField.initializeDocument();
+        clone.mainField.renderedDoc._width = this.mainField.renderedDoc._width;
+        clone.mainField.renderedDoc._height = this.mainField.renderedDoc._height;
         return clone;
     }
 
-- 
cgit v1.2.3-70-g09d2


From 5a926baa62489d5aa5134f8e5e08cfcb236102c2 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 11 Mar 2025 17:43:27 +0100
Subject: c

---
 .../nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx | 2 +-
 src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx         | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx
index 18b72e4ea..736f144cd 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx
@@ -94,7 +94,7 @@ export class TextTemplateField extends StaticContentField {
         const opts = this.settings.opts;
         const text = this.content;
 
-        opts._text_fontSize = `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}`;
+        opts.text_fontSize = `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}`;
         opts.title = this.title;
 
         let doc: Doc = Docs.Create.TextDocument(text, opts);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index bdfedbdc9..b0f8a522c 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -1,13 +1,9 @@
-import { Doc, FieldType } from "../../../../../fields/Doc";
-
 import { makeAutoObservable, reaction } from "mobx";
 import { Doc, DocListCast, FieldType } from "../../../../../fields/Doc";
 import { Docs } from "../../../../documents/Documents";
 import { Col } from "./DocCreatorMenu";
 import { DynamicField } from "./FieldTypes/DynamicField";
 import { Field, FieldSettings, FieldTree, ViewType } from "./FieldTypes/Field";
-import {  } from "./FieldTypes/FieldUtils";
-import { } from "./FieldTypes/StaticField";
 import { TemplateLayouts } from "./TemplateBackend";
 
 export class Template {
-- 
cgit v1.2.3-70-g09d2

