previewcollection updates automatically on closing editing window of selected template; removed redundant field updating now that everything is static; lots of comments to remove

6 files changed, 39 insertions, 23 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 69c896ccf..08583f594 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -118,7 +118,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this._userTemplates = this._userTemplates.filter(info => info.template !== template);
     }
     @action updateTemplatePreview = (template: Template) => {
-        template.renderUpdates();
+        //template.renderUpdates();
         const preview = {template: template, doc: template.getRenderedDoc()};
         this._suggestedTemplatePreviews = this._suggestedTemplatePreviews.map(t => { return t.template === preview.template ? preview : t }); //prettier-ignore
         this._userTemplates = this._userTemplates.map(t => { return t.template === preview.template ? preview : t }); //prettier-ignore
@@ -361,15 +361,19 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return undefined;
     }
 
+    @action updateRenderedPreviewCollection = async (template: Template) => {
+        this._fullyRenderedDocs = await this.createDocsFromTemplate(template) ?? [];
+        this.updateRenderedDocCollection();
+    }
+
     @action updateSelectedTemplate = async (template: Template) => {
         if (this._selectedTemplate === template) {
             this._selectedTemplate = undefined;
             return;
         } else {
             this._selectedTemplate = template;
-            template.renderUpdates();
-            this._fullyRenderedDocs = await this.createDocsFromTemplate(template) ?? [];
-            this.updateRenderedDocCollection();
+            //template.renderUpdates();
+            this.updateRenderedPreviewCollection(template);
         }
     };
 
@@ -759,6 +763,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         return renderedDocs;
     }
+
+    
     
 
     addRenderedCollectionToMainview = () => {
@@ -814,9 +820,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 {rendered}
                 <div className="right-buttons-panel">
                     <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => {
-                        this._currEditingTemplate && this.updateTemplatePreview(this._currEditingTemplate); 
-                        this.setExpandedView(undefined)}
-                        )}>
+                        if (!this._currEditingTemplate) return; 
+                        if (this._currEditingTemplate === this._selectedTemplate) {
+                            this.updateTemplatePreview(this._currEditingTemplate);
+                            this.updateRenderedPreviewCollection(this._currEditingTemplate);
+                        }
+                        this.updateRenderedPreviewCollection(this._currEditingTemplate);
+                        this.setExpandedView(undefined);
+                        })}>
                         <FontAwesomeIcon icon="minimize" />
                     </button>
                     <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => {this._currEditingTemplate?.resetToBase(); this.setExpandedView(this._currEditingTemplate);})}>
@@ -1061,6 +1072,7 @@ 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 { horizontalSpan, verticalSpan } = this.previewInfo;
@@ -1094,6 +1106,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this.applyLayout(collection, this._fullyRenderedDocs);
 
         this._renderedDocCollection = collection;
+
+        console.log('changed');
     }
 
     layoutPreviewContents = (id?: number) => {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
index c0bebccb5..0596e6d44 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
@@ -9,14 +9,14 @@ import { StaticField } from "./StaticField";
 import { IDisposer } from "mobx-utils";
 
 export class DynamicField extends Field {
-    private parent: Field;
+    protected parent: Field;
     protected dimensions: FieldDimensions;
     protected subfields: Field[];
 
     protected renderedDocument: Doc;
 
     constructor(settings: FieldSettings, id: number, parent?: Field) {
-        super(settings, id, FieldUtils.setupField);
+        super(settings, id, FieldUtils.setupField, parent);
         if (!parent) {
             this.parent = this;
             this.dimensions = {width: this.settings.br[0] - this.settings.tl[0], height: this.settings.br[1] - this.settings.tl[1], coord: {x: this.settings.tl[0], y: this.settings.tl[1]}};
@@ -24,6 +24,7 @@ export class DynamicField extends Field {
             this.parent = parent;
             this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
         }
+        console.log('new field dimensions: ', this.dimensions);
         this.subfields = this.setupSubfields(this);
         this.renderedDocument = this.updateRenderedDoc(); //!!!
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
index 23b36d680..9fd0fae19 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
@@ -14,14 +14,16 @@ export abstract class Field {
 
     protected abstract renderedDocument: Doc;
 
+    protected parent?: Field;
     protected id: number;
     protected settings: FieldSettings;
     protected title: string = '';
 
     protected abstract dimensions: FieldDimensions;
 
-    constructor(settings: FieldSettings, id: number, fieldFactory: (settings: FieldSettings, index: number, parent: Field) => Field) {
+    constructor(settings: FieldSettings, id: number, fieldFactory: (settings: FieldSettings, index: number, parent: Field) => Field, parent?: Field) {
         this.setupField = fieldFactory;
+        this.parent = parent ? parent : this;
         this.id = id;
         this.settings = settings;
         this.title = settings.title ?? '';
@@ -64,9 +66,10 @@ export abstract class Field {
     }
 
     addFieldFromDoc = (doc: Doc) => {
+        const par = this.renderedDocument;
         const settings: FieldSettings = {
-            tl: [Number(doc._x), Number(doc._y)],
-            br: [Number(doc._x) + Number(doc._width), Number(doc._y) + Number(doc._height)],
+            tl: [Number(doc._x) / Number(par._width), Number(doc._y) / Number(par._height)],
+            br: [(Number(doc._x) + Number(doc._width)) / Number(par._width), (Number(doc._y) + Number(doc._height)) / Number(par._height)],
             viewType: doc.type === DocumentType.COL ? ViewType.FREEFORM : ViewType.STATIC,
             opts: {},
         };
@@ -129,8 +132,11 @@ export abstract class Field {
 
     applyAttributes(field: Field) {
         field.setTitle(this.title);
+        //this.updateRenderedDoc(this.renderedDoc);
         field.updateRenderedDoc(this.renderedDoc);
-        console.log('set width to:', String(this.renderedDoc._width));
+        field.subfields = this.subfields;
+        console.log('id:', this.id, 'set width to:', Number(this.renderedDoc._width));
+        console.log('set height to:', Number(this.renderedDoc._height));
     }
 
     abstract updateRenderedDoc(oldDoc?: Doc): void;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
index 125624321..11e35746f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
@@ -8,7 +8,7 @@ import { StaticField } from "./StaticField";
 
 export class FieldUtils {
     public static getLocalDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentDimensions: FieldDimensions): FieldDimensions => {
-        console.log('parent dimensions', parentDimensions);
+        console.log('parent dimensions', parentDimensions, 'coords: ', coords);
         const l = (coords.tl[0] * parentDimensions.width) / 2;
         const t = coords.tl[1] * parentDimensions.height / 2; //prettier-ignore
         const r = (coords.br[0] * parentDimensions.width) / 2;
@@ -16,6 +16,7 @@ export class FieldUtils {
         const width = r - l;
         const height = b - t;
         const coord = { x: l, y: t };
+        console.log('width: ', width, 'height: ', height);
         return { width, height, coord };
     };
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
index b0ee537e7..0b2f437e8 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
@@ -22,11 +22,11 @@ export class StaticField extends Field {
 
     private storedAttributes: Record<string, any>;
 
-    private parent: Field;
+    protected parent: Field;
     protected dimensions: FieldDimensions;
 
     constructor(settings: FieldSettings, parent: Field, id: number) {
-        super(settings, id, FieldUtils.setupField);
+        super(settings, id, FieldUtils.setupField, parent);
         this.parent = parent;
         this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
         this.content = '';
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index 0e1ddc28f..9ebec9144 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -34,7 +34,7 @@ export class Template {
 
     cloneBase = () => {
         const clone: Template = new Template(this.settings);
-        
+        this.mainField.applyAttributes(clone.mainField);
         clone.allFields.filter(field => field !== clone.mainField).forEach(field => {
             console.log('id:', field.getID);
             const matchingField: Field = this.allFields.filter(f => f.getID === field.getID)[0];
@@ -83,12 +83,6 @@ export class Template {
         return summary;
     }
 
-    renderUpdates = () => {
-        this.allFields.forEach(field => {
-            field.updateRenderedDoc(field.renderedDoc);
-        });
-    };
-
     resetToBase = () => {
         this.allFields.forEach(field => {
             field.updateRenderedDoc();