diff options
Diffstat (limited to 'src')
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(); |