diff options
Diffstat (limited to 'src')
6 files changed, 178 insertions, 133 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index d8a71a610..69c896ccf 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -53,12 +53,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { private templateManager: TemplateManager; - @observable _fullyRenderedDocs: Doc[] = []; - @observable _renderedDocCollectionPreview: Doc | undefined = undefined; - @observable _renderedDocCollection: Doc | undefined = undefined; - @observable _docsRendering: boolean = false; + @observable _fullyRenderedDocs: Doc[] = []; // collection of templates filled in with content + @observable _renderedDocCollection: Doc | undefined = undefined; // fullyRenderedDocs in a parent collection + @observable _docsRendering: boolean = false; // dictates loading symbol - @observable _userTemplates: {template: Template, doc: Doc}[] = []; //!!! used to keep track of all templates, should be refactored to work with actual templates and not docs + @observable _userTemplates: {template: Template, doc: Doc}[] = []; @observable _selectedTemplate: Template | undefined = undefined; @observable _currEditingTemplate: Template | undefined = undefined; @@ -66,11 +65,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { @observable _selectedCols: { title: string; type: string; desc: string }[] | undefined = []; @observable _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.FREEFORM, yMargin: 10, xMargin: 10, columns: 3, repeat: 0 }; - @observable _layoutPreviewScale: number = 1; @observable _savedLayouts: DataVizTemplateLayout[] = []; @observable _expandedPreview: Doc | undefined = undefined; - @observable _suggestedTemplates: Template[] = []; @observable _suggestedTemplatePreviews: {doc: Doc, template: Template}[] = []; @observable _GPTOpt: boolean = false; @observable _callCount: number = 0; @@ -110,10 +107,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { this._dataViz = dataViz; this._selectedTemplate = undefined; this._renderedDocCollection = undefined; - this._renderedDocCollectionPreview = undefined; this._fullyRenderedDocs = []; this._suggestedTemplatePreviews = []; - this._suggestedTemplates = []; this._userCreatedFields = []; }; @action addUserTemplate = (template: Template) => { @@ -129,7 +124,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { this._userTemplates = this._userTemplates.map(t => { return t.template === preview.template ? preview : t }); //prettier-ignore }; @action setSuggestedTemplates = (templates: Template[]) => { - this._suggestedTemplates = templates; this._suggestedTemplatePreviews = templates.map(template => {return {template: template, doc: template.getRenderedDoc()}}); //prettier-ignore }; @@ -399,7 +393,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { testTemplate = async () => { - const obj = new DocumentOptions(); + this._suggestedTemplatePreviews = this.templateManager.templates.map(template => {return {template: template, doc: template.getRenderedDoc()}}); //prettier-ignore //console.log(this.templateManager.templates) @@ -761,7 +755,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { const renderedDocs = await Promise.all(promises); - this._docsRendering = false; + this._docsRendering = false; // removes loading indicator return renderedDocs; } @@ -1110,7 +1104,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} /> </div> </div> - ) : !this._renderedDocCollection? null : ( + ) : !this._renderedDocCollection ? null : ( <div className="docCreatorMenu-layout-preview-window-wrapper" id={String(id) ?? undefined}> <DocumentView Document={this._renderedDocCollection} diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx index 681e1d48c..c0bebccb5 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx @@ -1,4 +1,4 @@ -import { makeAutoObservable, reaction } from "mobx"; +import { makeAutoObservable, makeObservable, reaction } from "mobx"; import { Doc, DocListCast } from "../../../../../../fields/Doc"; import { Docs } from "../../../../../documents/Documents"; import { Col } from "../DocCreatorMenu"; @@ -11,12 +11,12 @@ import { IDisposer } from "mobx-utils"; export class DynamicField extends Field { private parent: Field; protected dimensions: FieldDimensions; + protected subfields: Field[]; protected renderedDocument: Doc; constructor(settings: FieldSettings, id: number, parent?: Field) { - super(settings, id); - makeAutoObservable(this); + super(settings, id, FieldUtils.setupField); 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,7 +24,8 @@ export class DynamicField extends Field { this.parent = parent; this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions); } - this.renderedDocument = new Doc(); //!!! + this.subfields = this.setupSubfields(this); + this.renderedDocument = this.updateRenderedDoc(); //!!! // this.disposers.fieldList = reaction( // () => DocListCast(this.doc[Doc.LayoutFieldKey(this.doc)]), @@ -53,22 +54,32 @@ export class DynamicField extends Field { }; updateRenderedDoc = (): Doc => { + console.log('dynamic field updated'); + let doc: Doc; + const renderedSubfields: Doc[] = this.subfields.map(field => field.renderedDoc); switch (this.settings.viewType) { case ViewType.CAROUSEL3D: - const carouselDoc = Docs.Create.Carousel3DDocument(this.subfields.map(field => field.renderedDoc), { + doc = Docs.Create.Carousel3DDocument(renderedSubfields, { title: this.title, }); - FieldUtils.applyBasicOpts(carouselDoc, this.dimensions, this.settings); - return carouselDoc; + FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings); + break; case ViewType.FREEFORM: - const freeformDoc = Docs.Create.FreeformDocument(this.subfields.map(field => field.renderedDoc), { + doc = Docs.Create.FreeformDocument(renderedSubfields, { title: this.title, }); - FieldUtils.applyBasicOpts(freeformDoc, this.dimensions, this.settings); - return freeformDoc; + FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings); + break; default: - return new Doc(); + doc = Docs.Create.Carousel3DDocument(renderedSubfields, { + title: this.title, + }); + FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings); + break; } + + this.renderedDocument = doc; + 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 4d0aa10c8..23b36d680 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx @@ -1,17 +1,16 @@ -import { makeAutoObservable, reaction } from "mobx"; +import { makeAutoObservable, makeObservable, reaction } from "mobx"; import { Doc, DocListCast } from "../../../../../../fields/Doc"; import { Col } from "../DocCreatorMenu"; import { TemplateFieldSize, TemplateFieldType } from "../TemplateBackend"; -import { DynamicField } from "./DynamicField"; -import { FieldUtils } from "./FieldUtils"; -import { StaticField } from "./StaticField"; import { IDisposer } from "mobx-utils"; import { DocumentType } from "../../../../../documents/DocumentTypes"; export abstract class Field { + protected disposers: { [name: string]: IDisposer } = {}; + private setupField: (settings: FieldSettings, index: number, parent: Field) => Field; - protected subfields: Field[]; + protected abstract subfields: Field[]; protected abstract renderedDocument: Doc; @@ -21,13 +20,11 @@ export abstract class Field { protected abstract dimensions: FieldDimensions; - constructor(settings: FieldSettings, id: number) { - makeAutoObservable(this); - + constructor(settings: FieldSettings, id: number, fieldFactory: (settings: FieldSettings, index: number, parent: Field) => Field) { + this.setupField = fieldFactory; this.id = id; this.settings = settings; this.title = settings.title ?? ''; - this.subfields = this.setupSubfields(); this.disposers.fieldList = reaction( () => DocListCast(this.renderedDocument[Doc.LayoutFieldKey(this.renderedDocument)]), @@ -47,7 +44,7 @@ export abstract class Field { return fields; }; - get renderedDoc() { return this.renderedDocument }; + get renderedDoc(){ return this.renderedDocument }; get getDimensions() { return this.dimensions }; get getID() { return this.id }; get getViewType() { return this.settings.viewType }; @@ -62,6 +59,10 @@ export abstract class Field { abstract setContent(content: string, type?: FieldContentType): void; abstract getContent(): string; + setupFieldChangeReaction = () => { + + } + addFieldFromDoc = (doc: Doc) => { const settings: FieldSettings = { tl: [Number(doc._x), Number(doc._y)], @@ -71,15 +72,48 @@ export abstract class Field { }; Object.getOwnPropertyNames(FieldOpts.prototype).forEach(([key, value]) => { - settings.opts[key as keyof FieldOpts] = StringCast(doc[key]); + switch (key) { + case 'text_fontColor': + case 'backgroundColor': + case 'borderWidth': + case 'borderColor': + settings.opts[key] = String(doc[key]); + break; + + case '_layout_borderRounding': + case 'opacity': + case '_rotation': + settings.opts[key] = Number(doc[key]); + break; + + case 'contentBold': + settings.opts[key] = Boolean(doc[key]); + break; + + case 'hCentering': + settings.opts[key] = String(doc[key]) as 'h-left' | 'h-center' | 'h-right'; + break; + case 'contentYCentering': + settings.opts[key] = String(doc[key]) as 'top' | 'center' | 'bottom'; + break; + case 'textTransform': + settings.opts[key] = String(doc[key]) as 'uppercase' | 'lowercase'; + break; + case 'fieldViewType': + settings.opts[key] = String(doc[key]) as 'freeform' | 'stacked'; + break; + + default: + break; + } }); - - const newField = this.setupField(settings, this.subfields.length) + + const newField: Field = this.setupField(settings, this.subfields.length, this); this.subfields.push(newField); }; addField = (type?: FieldContentType) => { - + } removeField = (field: Field) => { @@ -87,22 +121,16 @@ export abstract class Field { field.dispose(); }; - private setupField = (settings: FieldSettings, index: number): Field => { - const id = Number(`${this.id}${index}`); - return settings.viewType === ViewType.FREEFORM || settings.viewType === ViewType.CAROUSEL3D - ? new DynamicField(settings, id, this) - : new StaticField(settings, this, id); - } - - setupSubfields = (): Field[] => { + setupSubfields = (parent: Field): Field[] => { return this.settings.subfields?.map((fieldSettings, index) => { - return this.setupField(fieldSettings, index); + return this.setupField(fieldSettings, index, parent); }) || []; } applyAttributes(field: Field) { field.setTitle(this.title); field.updateRenderedDoc(this.renderedDoc); + console.log('set width to:', String(this.renderedDoc._width)); } abstract updateRenderedDoc(oldDoc?: Doc): void; @@ -114,6 +142,7 @@ export abstract class Field { } handleFieldUpdate = (newDocsList: Doc[]) => { + console.log('handlefielduodate called'); const currRenderedDocs: Set<Doc> = new Set(); this.subfields.forEach(field => currRenderedDocs.add(field.renderedDoc)); newDocsList.forEach(doc => { @@ -176,7 +205,3 @@ export class FieldOpts { textTransform?: 'uppercase' | 'lowercase'; fieldViewType?: 'freeform' | 'stacked'; } -function StringCast(arg0: unknown): undefined { - throw new Error("Function not implemented."); -} - diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx index 507790977..125624321 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx @@ -2,10 +2,13 @@ import { Doc } from "../../../../../../fields/Doc"; import { ComputedField, ScriptField } from "../../../../../../fields/ScriptField"; import { Col } from "../DocCreatorMenu"; import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from "../TemplateBackend"; -import { FieldDimensions, FieldSettings } from "./Field"; +import { DynamicField } from "./DynamicField"; +import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field"; +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); 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,7 +19,13 @@ export class FieldUtils { return { width, height, coord }; }; - + public static setupField = (settings: FieldSettings, index: number, parent: Field): Field => { + console.log('settings', settings); + const id = Number(`${parent.getID}${index}`); + return settings.viewType === ViewType.FREEFORM || settings.viewType === ViewType.CAROUSEL3D + ? new DynamicField(settings, id, parent) + : new StaticField(settings, parent, id); + } public static textProperties: string[] = [ "textTransform", diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx index 94ff7b8e8..b0ee537e7 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx @@ -10,7 +10,7 @@ import { Field, FieldContentType, FieldDimensions, FieldSettings, ViewType } fro import { indexOf } from "lodash"; import { ScriptField } from "../../../../../../fields/ScriptField"; import { StrCast } from "../../../../../../fields/Types"; -import { makeAutoObservable, reaction } from "mobx"; +import { makeAutoObservable, makeObservable, reaction } from "mobx"; import { IDisposer } from "mobx-utils"; export class StaticField extends Field { @@ -18,6 +18,7 @@ export class StaticField extends Field { private content: string; private contentType: FieldContentType | undefined; protected renderedDocument: Doc; + protected subfields: Field[]; private storedAttributes: Record<string, any>; @@ -25,12 +26,12 @@ export class StaticField extends Field { protected dimensions: FieldDimensions; constructor(settings: FieldSettings, parent: Field, id: number) { - super(settings, id); - makeAutoObservable(this); + super(settings, id, FieldUtils.setupField); this.parent = parent; this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions); this.content = ''; - this.renderedDocument = this.setupRenderedDoc(); + this.subfields = this.setupSubfields(this); + this.renderedDocument = this.updateRenderedDoc(); this.storedAttributes = new DocumentOptions(); }; @@ -66,96 +67,97 @@ export class StaticField extends Field { return matches; }; - // updateRenderedDoc = (oldDoc?: Doc): Doc => { - // const opts = this.settings.opts; + updateRenderedDoc = (oldDoc?: Doc): Doc => { + console.log(' static field updated'); + const opts = this.settings.opts; - // if (!this.contentType) { this.contentType = FieldContentType.STRING }; + if (!this.contentType) { this.contentType = FieldContentType.STRING }; - // let doc: Doc; + let doc: Doc; - // switch (this.contentType) { - // case FieldContentType.STRING: - // const text = String(this.content); - // doc = Docs.Create.TextDocument(text, { - // title: this.title, - // text_fontColor: oldDoc ? String(oldDoc.color) : opts.text_fontColor, - // contentBold: oldDoc ? Boolean(oldDoc.fontBold) : opts.contentBold, - // textTransform: oldDoc ? String(oldDoc.fontTransform) : opts.textTransform, - // color: oldDoc ? String(oldDoc.color) : opts.text_fontColor, - // _text_fontSize: `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}` - // }); - // FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc); - // break; - // case FieldContentType.IMAGE: - // const url = String(this.content); - // doc = Docs.Create.ImageDocument(url, { - // title: this.title, - // _layout_fitWidth: false, - // }); - // FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc); - // break; - // } - - // this.renderedDocument = doc; - - // return doc; - // }; + switch (this.contentType) { + case FieldContentType.STRING: + const text = String(this.content); + doc = Docs.Create.TextDocument(text, { + title: this.title, + text_fontColor: oldDoc ? String(oldDoc.color) : opts.text_fontColor, + contentBold: oldDoc ? Boolean(oldDoc.fontBold) : opts.contentBold, + textTransform: oldDoc ? String(oldDoc.fontTransform) : opts.textTransform, + color: oldDoc ? String(oldDoc.color) : opts.text_fontColor, + _text_fontSize: `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}` + }); + FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc); + break; + case FieldContentType.IMAGE: + const url = String(this.content); + doc = Docs.Create.ImageDocument(url, { + title: this.title, + _layout_fitWidth: false, + }); + FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc); + break; + } - updateRenderedDoc = (currDoc?: Doc, forceRerender?: boolean) => { + this.renderedDocument = doc; - if (!this.contentType) { this.contentType = FieldContentType.STRING }; + return doc; + }; - let doc: Doc; + // updateRenderedDoc = (currDoc?: Doc, forceRerender?: boolean) => { - // if (this.shouldRerender() || forceRerender) { - // } else { - // this.updateStoredAttributes(this.renderedDocument); - // } + // if (!this.contentType) { this.contentType = FieldContentType.STRING }; - this.updateStoredAttributes(this.renderedDocument); + // let doc: Doc; - let list: string[] = Object.entries(this.storedAttributes).map(([key, value]) => `${key}: ${value}`); - console.log(list); + // // if (this.shouldRerender() || forceRerender) { + // // } else { + // // this.updateStoredAttributes(this.renderedDocument); + // // } - switch (this.contentType) { - case FieldContentType.STRING: - const text = String(this.content); - this.storedAttributes._text_fontSize = `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, this.content, true)}` - doc = Docs.Create.TextDocument(text, this.storedAttributes); - break; - case FieldContentType.IMAGE: - const url = String(this.content); - doc = Docs.Create.ImageDocument(url, this.storedAttributes); - break; - } - doc._layout_hideScroll = true; + // this.updateStoredAttributes(this.renderedDocument); + // let list: string[] = Object.entries(this.storedAttributes).map(([key, value]) => `${key}: ${value}`); + // console.log(list); - console.log(StrCast(doc.backgroundColor), StrCast(doc._rotation)); + // switch (this.contentType) { + // case FieldContentType.STRING: + // const text = String(this.content); + // this.storedAttributes._text_fontSize = `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, this.content, true)}` + // doc = Docs.Create.TextDocument(text, this.storedAttributes); + // break; + // case FieldContentType.IMAGE: + // const url = String(this.content); + // doc = Docs.Create.ImageDocument(url, this.storedAttributes); + // break; + // } + // doc._layout_hideScroll = true; - this.renderedDocument = doc; - //this.renderedDocument = doc; - }; + // console.log(StrCast(doc.backgroundColor), StrCast(doc._rotation)); - private updateStoredAttributes = (currDoc?: Doc) => { - const opts = this.settings.opts; - console.log("num atts", Object.entries(this.storedAttributes).length); - Object.entries(this.storedAttributes).forEach(([key, value]) => { - key = String(key); - if (currDoc && currDoc[key] !== undefined) { - this.storedAttributes[key] = currDoc[key]; - } else if (opts[key as keyof typeof opts] !== undefined) { - this.storedAttributes[key] = opts[key as keyof typeof opts]; - } - }); - } + // this.renderedDocument = doc; - private shouldRerender = (): boolean => { - return FieldUtils.textProperties.some(property => - this.renderedDocument[property] !== this.storedAttributes[property] - ); - }; + // //this.renderedDocument = doc; + // }; + + // private updateStoredAttributes = (currDoc?: Doc) => { + // const opts = this.settings.opts; + // console.log("num atts", Object.entries(this.storedAttributes).length); + // Object.entries(this.storedAttributes).forEach(([key, value]) => { + // key = String(key); + // if (currDoc && currDoc[key] !== undefined) { + // this.storedAttributes[key] = currDoc[key]; + // } else if (opts[key as keyof typeof opts] !== undefined) { + // this.storedAttributes[key] = opts[key as keyof typeof opts]; + // } + // }); + // } + + // private shouldRerender = (): boolean => { + // return FieldUtils.textProperties.some(property => + // this.renderedDocument[property] !== this.storedAttributes[property] + // ); + // }; private setupRenderedDoc = (): Doc => { const docOptions: Record<string, any> = new DocumentOptions(); diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx index e079af4de..0e1ddc28f 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx @@ -17,8 +17,9 @@ export class Template { constructor(templateInfo: FieldSettings) { makeAutoObservable(this); - this.mainField = this.setupMainField(templateInfo); this.settings = templateInfo; + this.mainField = this.setupMainField(templateInfo); + console.log(templateInfo); } get childFields(): Field[] { return this.mainField.getSubfields }; @@ -33,10 +34,13 @@ export class Template { cloneBase = () => { const clone: Template = new Template(this.settings); - clone.allFields.forEach(field => { + + 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]; matchingField.applyAttributes(field); }) + clone.mainField.updateRenderedDoc(); return clone; } |