diff options
6 files changed, 120 insertions, 84 deletions
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; } |