From af94458be6620ae8a05730f17ee3fc4ec403cf09 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 3 Dec 2024 19:44:25 -0500 Subject: bunch of changes related to rendering changes to template docs; trying to make it so docs don't need to rerender every time, and so that all attributes are accounted for. --- src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 4 ---- 1 file changed, 4 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 2324006f7..5ff809170 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -1027,10 +1027,6 @@ export class DocCreatorMenu extends ObservableReactComponent { } } - // doc = () => { - // return Docs.Create.FreeformDocument([], { _height: 200, _width: 200, title: 'title'}); - // } - screenToLocalTransform = () => this._props.ScreenToLocalTransform(); applyLayout = (collection: Doc, docs: Doc[]) => { -- cgit v1.2.3-70-g09d2 From 2b9251f36be19b9fab9ce6ccc9280321c032fc0f Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Wed, 4 Dec 2024 17:49:11 -0500 Subject: stuff seems to have broken... (some changes relating to doc rerendering) --- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 1 - .../DocCreatorMenu/FieldTypes/FieldUtils.tsx | 2 +- .../DocCreatorMenu/FieldTypes/StaticField.tsx | 58 ++++++++++++++++++---- .../nodes/DataVizBox/DocCreatorMenu/Template.tsx | 2 - 4 files changed, 48 insertions(+), 15 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 5ff809170..d45e11f95 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -589,7 +589,6 @@ export class DocCreatorMenu extends ObservableReactComponent { 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 { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx index 9ae04d086..507790977 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx @@ -34,7 +34,7 @@ export class FieldUtils { doc._height = oldDoc ? oldDoc.height : parentDimensions.height; doc._width = oldDoc ? oldDoc.width : parentDimensions.width; doc.backgroundColor = oldDoc ? oldDoc.backgroundColor : opts.backgroundColor ?? ''; - doc._layout_borderRounding = !opts._layout_borderRounding ? '0px' : ScriptField.MakeFunction(`${opts._layout_borderRounding} * this.width + 'px'`); + //doc._layout_borderRounding = !opts._layout_borderRounding ? '0px' : ScriptField.MakeFunction(`${opts._layout_borderRounding} * this.width + 'px'`); doc.borderColor = oldDoc ? oldDoc.borderColor : opts.borderColor; doc.borderWidth = oldDoc ? oldDoc.borderWidth : opts.borderWidth; doc.opacity = oldDoc ? oldDoc.opacity : opts.opacity; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx index db54f1397..f5d86f56e 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx @@ -34,7 +34,7 @@ export class StaticField { this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions); this.content = ''; this.subfields = this.setupSubfields(); - this.renderedDocument = this.setupRenderedDoc(this.contentType ?? FieldContentType.STRING); + this.renderedDocument = this.updateRenderedDoc(); this.storedAttributes = new DocumentOptions(); }; @@ -64,14 +64,13 @@ export class StaticField { setContent = (newContent: string, type?: FieldContentType) => { this.content = newContent; if (type) this.contentType = type; - this.updateRenderedDoc(this.renderedDocument, true); + this.updateRenderedDoc(this.renderedDocument /*, true*/); }; getContent() { return this.content }; setTitle = (title: string) => { this.title = title; this.renderedDocument.title = title; - this.updateRenderedDoc(this.renderedDocument); }; getTitle = () => { return this.title }; @@ -110,25 +109,61 @@ export class StaticField { return matches; }; + // updateRenderedDoc = (oldDoc?: Doc): Doc => { + // const opts = this.settings.opts; + + // if (!this.contentType) { this.contentType = FieldContentType.STRING }; + + // 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; + // }; + updateRenderedDoc = (currDoc?: Doc, forceRerender?: boolean) => { - const opts = this.settings.opts; if (!this.contentType) { this.contentType = FieldContentType.STRING }; let doc: Doc; - if (this.shouldRerender()) { + if (this.shouldRerender() || forceRerender) { 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.renderedDocument = doc; } else { this.updateStoredAttributes(this.renderedDocument); @@ -153,9 +188,7 @@ export class StaticField { ); }; - private setupRenderedDoc = (contentType: FieldContentType): Doc => { - const opts = this.settings.opts; - + private setupRenderedDoc = (): Doc => { const docOptions: Record = new DocumentOptions(); docOptions.isDefaultTemplateDoc = true; @@ -166,7 +199,7 @@ export class StaticField { docOptions._nativeWidth = this.dimensions.width; docOptions._nativeHeight = this.dimensions.height; - Object.keys(opts).forEach(([key, value]) => { + Object.entries(this.settings.opts).forEach(([key, value]) => { docOptions[key] = value; }); @@ -184,8 +217,11 @@ export class StaticField { } doc._layout_hideScroll = true; - doc._layout_borderRounding = !opts._layout_borderRounding ? '0px' : ScriptField.MakeFunction(`${opts._layout_borderRounding} * this.width + 'px'`); + //doc._layout_borderRounding = !opts._layout_borderRounding ? '0px' : ScriptField.MakeFunction(`${opts._layout_borderRounding} * this.width + 'px'`); + + this.renderedDocument = 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 4680b0316..94ef1d212 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx @@ -147,8 +147,6 @@ export class Template { if (mt[i] !== -1) ++count; } - console.log(this.mainField.getTitle(), count) - return count; }; -- cgit v1.2.3-70-g09d2 From 047bd02ea4f2a7f565ddfb5da9d1c0685d18e08e Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sat, 7 Dec 2024 01:32:44 -0500 Subject: work started on field interface --> inheritcance structure --- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 15 ++-- .../DocCreatorMenu/FieldTypes/DynamicField.tsx | 34 +++++++- .../DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx | 81 +++++++++++++++---- .../DocCreatorMenu/FieldTypes/StaticField.tsx | 94 +++++++++++++--------- .../nodes/DataVizBox/DocCreatorMenu/Template.tsx | 20 ++--- .../DataVizBox/DocCreatorMenu/TemplateManager.tsx | 4 + src/fields/Doc.ts | 2 +- 7 files changed, 175 insertions(+), 75 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index d45e11f95..079d222d3 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -399,16 +399,19 @@ export class DocCreatorMenu extends ObservableReactComponent { testTemplate = async () => { + const obj = new DocumentOptions(); + console.log(Object.entries(obj)[1][0]); + //console.log(this.templateManager.templates) - const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; + // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; - this.templateManager.templates.forEach(template => { - const doc = template.mainField.renderedDoc(); - mainCollection.addDocument(doc); - }) + // this.templateManager.templates.forEach(template => { + // const doc = template.mainField.renderedDoc(); + // mainCollection.addDocument(doc); + // }) - this.forceUpdate(); + // this.forceUpdate(); // try { // const res = await gptImageCall('Image of panda eating a cookie'); diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx index c6f07d6c6..428f4a01c 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx @@ -1,12 +1,16 @@ -import { Doc } from "../../../../../../fields/Doc"; +import { makeAutoObservable, reaction } from "mobx"; +import { Doc, DocListCast } 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 { FieldUtils } from "./FieldUtils"; import { StaticField } from "./StaticField"; +import { IDisposer } from "mobx-utils"; + +export class DynamicField extends Field { + private disposers: { [name: string]: IDisposer } = {}; -export class DynamicField implements Field { private subfields: Field[] = []; private id: number; @@ -16,7 +20,11 @@ export class DynamicField implements Field { private parent: Field; private dimensions: FieldDimensions; + private renderedDocument: Doc; + constructor(settings: FieldSettings, id: number, parent?: Field) { + super(settings, id); + makeAutoObservable(this); this.id = id; this.settings = settings; if (settings.title) { this.title = settings.title }; @@ -28,6 +36,13 @@ export class DynamicField implements Field { this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions); } this.subfields = this.setupSubfields(); + + // this.disposers.fieldList = reaction( + // () => DocListCast(this.doc[Doc.LayoutFieldKey(this.doc)]), + // docs => { + // this.handleFieldUpdate(docs); + // } + // ); } setContent = (content: string, type?: FieldContentType) => { return }; @@ -59,6 +74,21 @@ export class DynamicField implements Field { return this.settings.description ?? ''; } + // dispose = () => { + // Object.values(this.disposers).forEach(disposer => disposer?.()); + // } + + // handleFieldUpdate = (newDocsList: Doc[]) => { + // const currRenderedDocs: Set = new Set(); + // this.subfields.forEach(field => currRenderedDocs.add(field.renderedDoc())); + // newDocsList.forEach(doc => { + // if (!currRenderedDocs.has(doc)) { + // this.addField(doc); + // } + // }); + // currRenderedDocs.forEach(); + // } + matches = (cols: Col[]): Array => { return []; } diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx index 5eaa7381c..14f7cb109 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx @@ -1,23 +1,72 @@ import { Doc } from "../../../../../../fields/Doc"; import { Col } from "../DocCreatorMenu"; import { TemplateFieldSize, TemplateFieldType } from "../TemplateBackend"; +import { DynamicField } from "./DynamicField"; +import { FieldUtils } from "./FieldUtils"; +import { StaticField } from "./StaticField"; + +export abstract class Field { + protected subfields: Field[] = []; + + protected abstract renderedDocument: Doc; + + protected id: number; + protected settings: FieldSettings; + protected title: string = ''; + + protected abstract dimensions: FieldDimensions; + + constructor(settings: FieldSettings, id: number) { + this.id = id; + this.settings = settings; + this.title = settings.title ?? ''; + } + + get getSubfields(): Field[] { return this.subfields ?? []; }; + get getAllSubfields() { + let fields: Field[] = []; + this.subfields?.forEach(field => { + fields.push(field); + fields = fields.concat(field.getAllSubfields) + }); + return fields; + }; + + get renderedDoc() { return this.renderedDocument }; + get getDimensions() { return this.dimensions }; + get getID() { return this.id }; + get getViewType() { return this.settings.viewType }; + + setTitle = (title: string) => { + this.title = title; + this.renderedDocument.title = title; + }; + getTitle = () => { return this.title }; + + abstract setContent(content: string, type?: FieldContentType): void; + abstract getContent(): string; + + addField = () => {}; + removeField = () => {}; + + setupSubfields = (): Field[] => { + return this.settings.subfields?.map((fieldSettings, index) => { + const id = Number(`${this.id}${index}`); + return fieldSettings.viewType === ViewType.FREEFORM || fieldSettings.viewType === ViewType.CAROUSEL3D + ? new DynamicField(fieldSettings, id, this) + : new StaticField(fieldSettings, this, id); + }) || []; + } + + applyAttributes(field: Field) { + field.setTitle(this.title); + field.updateRenderedDoc(this.renderedDoc); + } + + abstract updateRenderedDoc(oldDoc?: Doc): void; + + abstract matches(cols: Col[]): Array; -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) => void; } export type FieldSettings = { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx index f5d86f56e..88115c529 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx @@ -1,5 +1,5 @@ import { TbHospital } from "react-icons/tb"; -import { Doc } from "../../../../../../fields/Doc"; +import { Doc, DocListCast } from "../../../../../../fields/Doc"; import { FieldType } from "../../../../../../fields/ObjectField"; import { Docs, DocumentOptions } from "../../../../../documents/Documents"; import { Col } from "../DocCreatorMenu"; @@ -9,33 +9,38 @@ import { FieldUtils } from "./FieldUtils"; import { Field, FieldContentType, FieldDimensions, FieldSettings, ViewType } from "./Field"; import { indexOf } from "lodash"; import { ScriptField } from "../../../../../../fields/ScriptField"; +import { StrCast } from "../../../../../../fields/Types"; +import { makeAutoObservable, reaction } from "mobx"; +import { IDisposer } from "mobx-utils"; + +export class StaticField extends Field { + private disposers: { [name: string]: IDisposer } = {}; -export class StaticField { private content: string; private contentType: FieldContentType | undefined; - private subfields: Field[] = []; - private renderedDocument: Doc; + protected renderedDocument: Doc; private storedAttributes: Record; - private id: number; - private title: string = ''; - - private settings: FieldSettings; - private parent: Field; - private dimensions: FieldDimensions; + protected dimensions: FieldDimensions; constructor(settings: FieldSettings, parent: Field, id: number) { - this.settings = settings; - if (settings.title) { this.title = settings.title }; - this.id = id; + super(settings, id); + makeAutoObservable(this); this.parent = parent; this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions); this.content = ''; this.subfields = this.setupSubfields(); - this.renderedDocument = this.updateRenderedDoc(); + this.renderedDocument = this.setupRenderedDoc(); this.storedAttributes = new DocumentOptions(); + + this.disposers.fieldList = reaction( + () => DocListCast(this.renderedDocument[Doc.LayoutFieldKey(this.renderedDocument)]), + docs => { + this.handleFieldUpdate(docs); + } + ); }; get getSubfields(): Field[] { return this.subfields ?? []; }; @@ -49,18 +54,10 @@ export class StaticField { return fields; }; - get getDimensions() { return this.dimensions }; - get getID() { return this.id }; - get getViewType() { return this.settings.viewType }; - get getDescription(): string { return this.settings.description ?? ''; } - renderedDoc = () => { - return this.renderedDocument; - } - setContent = (newContent: string, type?: FieldContentType) => { this.content = newContent; if (type) this.contentType = type; @@ -68,16 +65,9 @@ export class StaticField { }; getContent() { return this.content }; - setTitle = (title: string) => { - this.title = title; - this.renderedDocument.title = title; - }; - getTitle = () => { return this.title }; - applyAttributes = (field: Field) => { //!!! can be updated later for more robust clonign; this is all ythat's needed now - field.setTitle(this.title); + super.applyAttributes(field); field.setContent('', this.contentType); - field.updateRenderedDoc(this.renderedDoc()); } setupSubfields = (): Field[] => { @@ -89,6 +79,26 @@ export class StaticField { }) || []; } + dispose = () => { + Object.values(this.disposers).forEach(disposer => disposer?.()); + } + + handleFieldUpdate = (newDocsList: Doc[]) => { + const currRenderedDocs: Set = new Set(); + this.subfields.forEach(field => currRenderedDocs.add(field.renderedDoc)); + newDocsList.forEach(doc => { + if (!currRenderedDocs.has(doc)) { + this.addField(doc); + } + }); + currRenderedDocs.forEach(doc => { + if (!newDocsList.includes(doc)){ + const fields = this.subfields.filter(field => field.renderedDoc === doc); + fields.forEach(field => this.removeField(field)); + } + }); + } + matches = (cols: Col[]): number[] => { const colMatchesField = (col: Col) => { const isMatch: boolean = ( @@ -150,8 +160,16 @@ export class StaticField { let doc: Doc; - if (this.shouldRerender() || forceRerender) { - this.updateStoredAttributes(this.renderedDocument); + // if (this.shouldRerender() || forceRerender) { + // } else { + // this.updateStoredAttributes(this.renderedDocument); + // } + + this.updateStoredAttributes(this.renderedDocument); + + let list: string[] = Object.entries(this.storedAttributes).map(([key, value]) => `${key}: ${value}`); + console.log(list); + switch (this.contentType) { case FieldContentType.STRING: const text = String(this.content); @@ -164,16 +182,20 @@ export class StaticField { break; } doc._layout_hideScroll = true; + + + console.log(StrCast(doc.backgroundColor), StrCast(doc._rotation)); + this.renderedDocument = doc; - } else { - this.updateStoredAttributes(this.renderedDocument); - } + + //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); + key = String(key); if (currDoc && currDoc[key] !== undefined) { this.storedAttributes[key] = currDoc[key]; } else if (opts[key as keyof typeof opts] !== undefined) { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx index 94ef1d212..add588046 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx @@ -1,6 +1,6 @@ -import { makeAutoObservable } from "mobx"; -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"; @@ -8,32 +8,24 @@ import { Field, FieldSettings, ViewType } from "./FieldTypes/Field"; import { } from "./FieldTypes/FieldUtils"; import { } from "./FieldTypes/StaticField"; import { observer } from "mobx-react"; +import { IDisposer } from "mobx-utils"; export class Template { - mainField: DynamicField; - settings: FieldSettings; - + private mainField: DynamicField; + private settings: FieldSettings; constructor(templateInfo: FieldSettings) { makeAutoObservable(this); this.mainField = this.setupMainField(templateInfo); this.settings = templateInfo; - } - - get childFields(): Field[] { return this.mainField.getSubfields }; get allFields(): Field[] { return this.mainField.getAllSubfields }; get contentFields(): Field[] { return this.allFields.filter(field => field.getViewType === ViewType.STATIC) }; get doc(){ return this.mainField.renderedDoc(); }; - // addField = (type: FieldType, doc?: Doc): Field => { - - // this.mainField.addField(); - // } - cloneBase = () => { const clone: Template = new Template(this.settings); clone.allFields.forEach(field => { @@ -44,7 +36,7 @@ export class Template { } getRenderedDoc = () => { - const doc: Doc = this.mainField.renderedDoc(); + const doc: Doc = this.doc; this.contentFields.forEach(field => { const title: string = field.getTitle(); const val: FieldType = field.getContent() as FieldType; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx index 95f0da43d..310b19890 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx @@ -1,3 +1,4 @@ +import { makeAutoObservable } from "mobx"; import { Col } from "./DocCreatorMenu"; import { FieldSettings } from "./FieldTypes/Field"; import { Template } from "./Template"; @@ -6,8 +7,10 @@ import { TemplateLayouts } from "./TemplateBackend"; export class TemplateManager { templates: Template[] = []; + //updateTrack constructor(templateSettings: FieldSettings[]) { + makeAutoObservable(this); this.templates = this.initializeTemplates(templateSettings); } @@ -27,5 +30,6 @@ export class TemplateManager { removeTemplate = (template: Template) => { this.templates.splice(this.templates.indexOf(template), 1); + template.dispose(); } } \ No newline at end of file diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index a9bc5ee70..3f8de2988 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -576,7 +576,7 @@ export namespace Doc { if (!skipUndefineds || value !== undefined) { // Do we want to filter out undefineds? if (typeof value === 'object' && 'values' in value) { - console.log(value); + //console.log(value); } doc[key] = value; } -- cgit v1.2.3-70-g09d2 From fe744903609e669c5f3048743ceba9268b8dfe0d Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sat, 7 Dec 2024 19:46:07 -0500 Subject: field superclass --- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 82 ++++++++----------- .../DocCreatorMenu/FieldTypes/DynamicField.tsx | 91 ++-------------------- .../DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx | 84 +++++++++++++++++--- .../DocCreatorMenu/FieldTypes/StaticField.tsx | 53 ------------- .../nodes/DataVizBox/DocCreatorMenu/Template.tsx | 11 ++- .../DataVizBox/DocCreatorMenu/TemplateManager.tsx | 2 +- 6 files changed, 121 insertions(+), 202 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 079d222d3..d8a71a610 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -400,7 +400,6 @@ export class DocCreatorMenu extends ObservableReactComponent { testTemplate = async () => { const obj = new DocumentOptions(); - console.log(Object.entries(obj)[1][0]); //console.log(this.templateManager.templates) @@ -545,7 +544,7 @@ export class DocCreatorMenu extends ObservableReactComponent { compileFieldDescriptions = (templates: Template[]): string => { let descriptions: string = ''; templates.forEach(template => { - descriptions += `---------- NEW TEMPLATE TO INCLUDE: The title is: ${template.mainField.getTitle()}. Its fields are: `; + descriptions += `---------- NEW TEMPLATE TO INCLUDE: The title is: ${template.title}. Its fields are: `; descriptions += template.descriptionSummary; }); @@ -585,7 +584,7 @@ export class DocCreatorMenu extends ObservableReactComponent { 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(template => template.title === tempTitle)[0]; if (!template) return; const toObj = Object.entries(assignment).reduce( (a, [fieldID, colTitle]) => { @@ -707,7 +706,7 @@ export class DocCreatorMenu extends ObservableReactComponent { createDocsFromTemplate = async (template: Template) => { const dv = this._dataViz; - console.log('dataviz: ', dv); + if (!dv) return; this._docsRendering = true; @@ -781,7 +780,7 @@ export class DocCreatorMenu extends ObservableReactComponent { @action setExpandedView = (template: Template | undefined) => { if (template) { this._currEditingTemplate = template; - this._expandedPreview = template.mainField.renderedDoc(); //Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''}); + this._expandedPreview = template.doc; //Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''}); } else { this._currEditingTemplate = undefined; this._expandedPreview = undefined; @@ -839,6 +838,31 @@ export class DocCreatorMenu extends ObservableReactComponent { const GPTOptions =
; + const previewDoc = (doc: Doc, template: Template) => + this._selectedTemplate === template ? 104 : 111} + PanelHeight={() => this._selectedTemplate === template ? 104 : 111} + ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)} + renderDepth={1} + whenChildContentsActiveChanged={emptyFunction} + focus={emptyFunction} + styleProvider={DefaultStyleProvider} + addDocTab={this._props.addDocTab} + // eslint-disable-next-line no-use-before-define + pinToPres={() => undefined} + childFilters={returnEmptyFilter} + childFiltersByRanges={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + fitContentsToBox={returnFalse} + fitWidth={returnFalse} + hideDecorations={true} + /> + // return ( @@ -881,29 +905,7 @@ export class DocCreatorMenu extends ObservableReactComponent { - this._selectedTemplate === template ? 104 : 111} - PanelHeight={() => this._selectedTemplate === template ? 104 : 111} - ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)} - renderDepth={1} - whenChildContentsActiveChanged={emptyFunction} - focus={emptyFunction} - styleProvider={DefaultStyleProvider} - addDocTab={this._props.addDocTab} - // eslint-disable-next-line no-use-before-define - pinToPres={() => undefined} - childFilters={returnEmptyFilter} - childFiltersByRanges={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - fitContentsToBox={returnFalse} - fitWidth={returnFalse} - hideDecorations={true} - /> + {previewDoc(doc, template)} )) )} @@ -950,29 +952,7 @@ export class DocCreatorMenu extends ObservableReactComponent { - this._selectedTemplate === template ? 104 : 111} - PanelHeight={() => this._selectedTemplate === template ? 104 : 111} - ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)} - renderDepth={1} - whenChildContentsActiveChanged={emptyFunction} - focus={emptyFunction} - styleProvider={DefaultStyleProvider} - addDocTab={this._props.addDocTab} - // eslint-disable-next-line no-use-before-define - pinToPres={() => undefined} - childFilters={returnEmptyFilter} - childFiltersByRanges={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - fitContentsToBox={returnFalse} - fitWidth={returnFalse} - hideDecorations={true} - /> + {previewDoc(doc, template)} ))} diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx index 428f4a01c..681e1d48c 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx @@ -9,25 +9,14 @@ import { StaticField } from "./StaticField"; import { IDisposer } from "mobx-utils"; export class DynamicField extends Field { - private disposers: { [name: string]: IDisposer } = {}; - - private subfields: Field[] = []; - - private id: number; - private settings: FieldSettings; - private title: string = ''; - private parent: Field; - private dimensions: FieldDimensions; + protected dimensions: FieldDimensions; - private renderedDocument: Doc; + protected renderedDocument: Doc; constructor(settings: FieldSettings, id: number, parent?: Field) { super(settings, id); makeAutoObservable(this); - this.id = id; - this.settings = settings; - if (settings.title) { this.title = settings.title }; 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]}}; @@ -35,7 +24,7 @@ export class DynamicField extends Field { this.parent = parent; this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions); } - this.subfields = this.setupSubfields(); + this.renderedDocument = new Doc(); //!!! // this.disposers.fieldList = reaction( // () => DocListCast(this.doc[Doc.LayoutFieldKey(this.doc)]), @@ -48,78 +37,10 @@ export class DynamicField extends Field { setContent = (content: string, type?: FieldContentType) => { return }; getContent = () => { return '' }; - setTitle = (title: string) => { this.title = title }; - getTitle = () => { return this.title }; - - // addField = () => { - // const newField: Field = new DynamicField(); - // //this.subfields.pu - // } - - get getSubfields() { return this.subfields }; - get getAllSubfields() { - let fields: Field[] = []; - this.subfields?.forEach(field => { - fields.push(field); - fields = fields.concat(field.getAllSubfields) - }); - return fields; - }; - - get getDimensions() { return this.dimensions }; - get getID() { return this.id }; - get getViewType() { return this.settings.viewType }; - - get getDescription(): string { - return this.settings.description ?? ''; - } - - // dispose = () => { - // Object.values(this.disposers).forEach(disposer => disposer?.()); - // } - - // handleFieldUpdate = (newDocsList: Doc[]) => { - // const currRenderedDocs: Set = new Set(); - // this.subfields.forEach(field => currRenderedDocs.add(field.renderedDoc())); - // newDocsList.forEach(doc => { - // if (!currRenderedDocs.has(doc)) { - // this.addField(doc); - // } - // }); - // currRenderedDocs.forEach(); - // } - matches = (cols: Col[]): Array => { return []; } - updateRenderedDoc = () => { - return new Doc(); - } - - setupSubfields = (): Field[] => { - const fields: Field[] = []; - this.settings.subfields?.forEach((fieldSettings, index) => { - let field: Field; - const type = fieldSettings.viewType; - - const id = Number(String(this.id) + String(index)); - - if (type == ViewType.CAROUSEL3D || type === ViewType.FREEFORM) { - field = new DynamicField(fieldSettings, id, this); - } else { - field = new StaticField(fieldSettings, this, id); - } - fields.push(field); - }); - return fields; - } - - applyAttributes = (field: Field) => { - field.setTitle(this.title); - field.updateRenderedDoc(this.renderedDoc()); - } - getChildDimensions = (coords: { tl: [number, number]; br: [number, number] }): FieldDimensions => { const l = (coords.tl[0] * this.dimensions.height) / 2; const t = coords.tl[1] * this.dimensions.width / 2; //prettier-ignore @@ -131,16 +52,16 @@ export class DynamicField extends Field { return { width, height, coord }; }; - renderedDoc = (): Doc => { + updateRenderedDoc = (): Doc => { switch (this.settings.viewType) { case ViewType.CAROUSEL3D: - const carouselDoc = Docs.Create.Carousel3DDocument(this.subfields.map(field => field.renderedDoc()), { + const carouselDoc = Docs.Create.Carousel3DDocument(this.subfields.map(field => field.renderedDoc), { title: this.title, }); FieldUtils.applyBasicOpts(carouselDoc, this.dimensions, this.settings); return carouselDoc; case ViewType.FREEFORM: - const freeformDoc = Docs.Create.FreeformDocument(this.subfields.map(field => field.renderedDoc()), { + const freeformDoc = Docs.Create.FreeformDocument(this.subfields.map(field => field.renderedDoc), { title: this.title, }); FieldUtils.applyBasicOpts(freeformDoc, this.dimensions, this.settings); diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx index 14f7cb109..4d0aa10c8 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx @@ -1,12 +1,17 @@ -import { Doc } from "../../../../../../fields/Doc"; +import { makeAutoObservable, 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 subfields: Field[] = []; + protected disposers: { [name: string]: IDisposer } = {}; + + protected subfields: Field[]; protected abstract renderedDocument: Doc; @@ -17,9 +22,19 @@ export abstract class Field { protected abstract dimensions: FieldDimensions; constructor(settings: FieldSettings, id: number) { + makeAutoObservable(this); + 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)]), + docs => { + this.handleFieldUpdate(docs); + } + ); } get getSubfields(): Field[] { return this.subfields ?? []; }; @@ -36,6 +51,7 @@ export abstract class Field { get getDimensions() { return this.dimensions }; get getID() { return this.id }; get getViewType() { return this.settings.viewType }; + get getDescription(): string { return this.settings.description ?? '' }; setTitle = (title: string) => { this.title = title; @@ -46,15 +62,41 @@ export abstract class Field { abstract setContent(content: string, type?: FieldContentType): void; abstract getContent(): string; - addField = () => {}; - removeField = () => {}; + addFieldFromDoc = (doc: Doc) => { + const settings: FieldSettings = { + tl: [Number(doc._x), Number(doc._y)], + br: [Number(doc._x) + Number(doc._width), Number(doc._y) + Number(doc._height)], + viewType: doc.type === DocumentType.COL ? ViewType.FREEFORM : ViewType.STATIC, + opts: {}, + }; + + Object.getOwnPropertyNames(FieldOpts.prototype).forEach(([key, value]) => { + settings.opts[key as keyof FieldOpts] = StringCast(doc[key]); + }); + + const newField = this.setupField(settings, this.subfields.length) + this.subfields.push(newField); + }; + + addField = (type?: FieldContentType) => { + + } + + removeField = (field: Field) => { + this.subfields.splice(this.subfields.indexOf(field), 1); + 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[] => { return this.settings.subfields?.map((fieldSettings, index) => { - const id = Number(`${this.id}${index}`); - return fieldSettings.viewType === ViewType.FREEFORM || fieldSettings.viewType === ViewType.CAROUSEL3D - ? new DynamicField(fieldSettings, id, this) - : new StaticField(fieldSettings, this, id); + return this.setupField(fieldSettings, index); }) || []; } @@ -67,6 +109,26 @@ export abstract class Field { abstract matches(cols: Col[]): Array; + dispose = () => { + Object.values(this.disposers).forEach(disposer => disposer?.()); + } + + handleFieldUpdate = (newDocsList: Doc[]) => { + const currRenderedDocs: Set = new Set(); + this.subfields.forEach(field => currRenderedDocs.add(field.renderedDoc)); + newDocsList.forEach(doc => { + if (!currRenderedDocs.has(doc)) { + this.addFieldFromDoc(doc); + } + }); + currRenderedDocs.forEach(doc => { + if (!newDocsList.includes(doc)){ + const fields = this.subfields.filter(field => field.renderedDoc === doc); + fields.forEach(field => this.removeField(field)); + } + }); + } + } export type FieldSettings = { @@ -99,7 +161,7 @@ export type FieldDimensions = { coord: {x: number, y: number}; } -export interface FieldOpts { +export class FieldOpts { backgroundColor?: string; text_fontColor?: string; _layout_borderRounding?: number; @@ -114,3 +176,7 @@ export interface 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/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx index 88115c529..94ff7b8e8 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx @@ -14,7 +14,6 @@ import { makeAutoObservable, reaction } from "mobx"; import { IDisposer } from "mobx-utils"; export class StaticField extends Field { - private disposers: { [name: string]: IDisposer } = {}; private content: string; private contentType: FieldContentType | undefined; @@ -31,33 +30,10 @@ export class StaticField extends Field { this.parent = parent; this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions); this.content = ''; - this.subfields = this.setupSubfields(); this.renderedDocument = this.setupRenderedDoc(); this.storedAttributes = new DocumentOptions(); - - this.disposers.fieldList = reaction( - () => DocListCast(this.renderedDocument[Doc.LayoutFieldKey(this.renderedDocument)]), - docs => { - this.handleFieldUpdate(docs); - } - ); - }; - - get getSubfields(): Field[] { return this.subfields ?? []; }; - - get getAllSubfields(): Field[] { - let fields: Field[] = []; - this.subfields?.forEach(field => { - fields.push(field); - fields = fields.concat(field.getAllSubfields); - }); - return fields; }; - get getDescription(): string { - return this.settings.description ?? ''; - } - setContent = (newContent: string, type?: FieldContentType) => { this.content = newContent; if (type) this.contentType = type; @@ -70,35 +46,6 @@ export class StaticField extends Field { field.setContent('', this.contentType); } - setupSubfields = (): Field[] => { - return this.settings.subfields?.map((fieldSettings, index) => { - const id = Number(`${this.id}${index}`); - return fieldSettings.viewType === ViewType.FREEFORM || fieldSettings.viewType === ViewType.CAROUSEL3D - ? new DynamicField(fieldSettings, id, this) - : new StaticField(fieldSettings, this, id); - }) || []; - } - - dispose = () => { - Object.values(this.disposers).forEach(disposer => disposer?.()); - } - - handleFieldUpdate = (newDocsList: Doc[]) => { - const currRenderedDocs: Set = new Set(); - this.subfields.forEach(field => currRenderedDocs.add(field.renderedDoc)); - newDocsList.forEach(doc => { - if (!currRenderedDocs.has(doc)) { - this.addField(doc); - } - }); - currRenderedDocs.forEach(doc => { - if (!newDocsList.includes(doc)){ - const fields = this.subfields.filter(field => field.renderedDoc === doc); - fields.forEach(field => this.removeField(field)); - } - }); - } - matches = (cols: Col[]): number[] => { const colMatchesField = (col: Col) => { const isMatch: boolean = ( diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx index add588046..e079af4de 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx @@ -12,7 +12,7 @@ import { IDisposer } from "mobx-utils"; export class Template { - private mainField: DynamicField; + mainField: DynamicField; private settings: FieldSettings; constructor(templateInfo: FieldSettings) { @@ -24,7 +24,12 @@ export class Template { get childFields(): Field[] { return this.mainField.getSubfields }; get allFields(): Field[] { return this.mainField.getAllSubfields }; get contentFields(): Field[] { return this.allFields.filter(field => field.getViewType === ViewType.STATIC) }; - get doc(){ return this.mainField.renderedDoc(); }; + get doc(){ return this.mainField.renderedDoc; }; + get title() { return this.mainField.getTitle() }; + + cleanup = () => { + //dispose each subfields disposers, etc. + } cloneBase = () => { const clone: Template = new Template(this.settings); @@ -76,7 +81,7 @@ export class Template { renderUpdates = () => { this.allFields.forEach(field => { - field.updateRenderedDoc(field.renderedDoc()); + field.updateRenderedDoc(field.renderedDoc); }); }; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx index 310b19890..413c3082e 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx @@ -30,6 +30,6 @@ export class TemplateManager { removeTemplate = (template: Template) => { this.templates.splice(this.templates.indexOf(template), 1); - template.dispose(); + template.cleanup(); } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From a79431a47aa7fdff8e55ff653f28dd23c9af4650 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sun, 15 Dec 2024 05:13:35 -0500 Subject: Temprarily reverted static field rerendering changes; Persistent rendereddoc now working for dynamic field; work on making adding fields functional --- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 20 +-- .../DocCreatorMenu/FieldTypes/DynamicField.tsx | 33 +++-- .../DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx | 79 +++++++---- .../DocCreatorMenu/FieldTypes/FieldUtils.tsx | 13 +- .../DocCreatorMenu/FieldTypes/StaticField.tsx | 158 +++++++++++---------- .../nodes/DataVizBox/DocCreatorMenu/Template.tsx | 8 +- 6 files changed, 178 insertions(+), 133 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx') 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 { 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 { @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 { 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 { 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 { 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 { 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 { - ) : !this._renderedDocCollection? null : ( + ) : !this._renderedDocCollection ? null : (
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 = 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; @@ -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 = 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; } -- cgit v1.2.3-70-g09d2 From f02559f86c339d069743590bcac0c6d5407ecba8 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 19 Dec 2024 04:19:29 -0500 Subject: previewcollection updates automatically on closing editing window of selected template; removed redundant field updating now that everything is static; lots of comments to remove --- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 28 ++++++++++++++++------ .../DocCreatorMenu/FieldTypes/DynamicField.tsx | 5 ++-- .../DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx | 14 +++++++---- .../DocCreatorMenu/FieldTypes/FieldUtils.tsx | 3 ++- .../DocCreatorMenu/FieldTypes/StaticField.tsx | 4 ++-- .../nodes/DataVizBox/DocCreatorMenu/Template.tsx | 8 +------ 6 files changed, 39 insertions(+), 23 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx') 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 { 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 { 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 { return renderedDocs; } + + addRenderedCollectionToMainview = () => { @@ -814,9 +820,14 @@ export class DocCreatorMenu extends ObservableReactComponent { {rendered}
) : ( - this._suggestedTemplatePreviews - .map(({doc, template}) => ( + this._suggestedTemplates + .map(template => (
{ - {previewDoc(doc, template)} + {previewDoc(template.getRenderedDoc(), template)}
)) )} diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx index 0596e6d44..c751c91bd 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx @@ -24,7 +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); + //console.log('new field dimensions: ', this.dimensions); this.subfields = this.setupSubfields(this); this.renderedDocument = this.updateRenderedDoc(); //!!! @@ -55,7 +55,8 @@ export class DynamicField extends Field { }; updateRenderedDoc = (): Doc => { - console.log('dynamic field updated'); + + //console.log('dynamic field updated'); let doc: Doc; const renderedSubfields: Doc[] = this.subfields.map(field => field.renderedDoc); switch (this.settings.viewType) { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx index 9fd0fae19..1dd442c97 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx @@ -66,6 +66,7 @@ export abstract class Field { } addFieldFromDoc = (doc: Doc) => { + console.log('add field called'); const par = this.renderedDocument; const settings: FieldSettings = { tl: [Number(doc._x) / Number(par._width), Number(doc._y) / Number(par._height)], @@ -135,8 +136,8 @@ export abstract class Field { //this.updateRenderedDoc(this.renderedDoc); field.updateRenderedDoc(this.renderedDoc); 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)); + 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 11e35746f..27ea8e1f5 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, 'coords: ', coords); + //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,12 +16,12 @@ export class FieldUtils { const width = r - l; const height = b - t; const coord = { x: l, y: t }; - console.log('width: ', width, 'height: ', height); + //console.log('width: ', width, 'height: ', height); return { width, height, coord }; }; public static setupField = (settings: FieldSettings, index: number, parent: Field): Field => { - console.log('settings', settings); + //console.log('settings', settings); const id = Number(`${parent.getID}${index}`); return settings.viewType === ViewType.FREEFORM || settings.viewType === ViewType.CAROUSEL3D ? new DynamicField(settings, id, parent) diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx index 9ebec9144..7515a39be 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx @@ -45,6 +45,7 @@ export class Template { } getRenderedDoc = () => { + console.log('called'); const doc: Doc = this.doc; this.contentFields.forEach(field => { const title: string = field.getTitle(); -- cgit v1.2.3-70-g09d2 From cd6459e5a8e0abb5aa196dc6627f6ed998b7012e Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 19 Dec 2024 05:42:58 -0500 Subject: same change for usertemplates --- .../views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 505b7bd46..e1f53ec47 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -57,7 +57,7 @@ export class DocCreatorMenu extends ObservableReactComponent { @observable _renderedDocCollection: Doc | undefined = undefined; // fullyRenderedDocs in a parent collection @observable _docsRendering: boolean = false; // dictates loading symbol - @observable _userTemplates: {template: Template, doc: Doc}[] = []; + @observable _userTemplates: Template[] = []; @observable _selectedTemplate: Template | undefined = undefined; @observable _currEditingTemplate: Template | undefined = undefined; @@ -112,10 +112,10 @@ export class DocCreatorMenu extends ObservableReactComponent { this._userCreatedFields = []; }; @action addUserTemplate = (template: Template) => { - this._userTemplates.push({template: template.cloneBase(), doc: template.getRenderedDoc()}); + this._userTemplates.push(template); }; @action removeUserTemplate = (template: Template) => { - this._userTemplates = this._userTemplates.filter(info => info.template !== template); + this._userTemplates.splice(this._userTemplates.indexOf(t), 1); } @action setSuggestedTemplates = (templates: Template[]) => { this._suggestedTemplates = templates; //prettier-ignore @@ -928,7 +928,7 @@ export class DocCreatorMenu extends ObservableReactComponent {
{this._userTemplates - .map(({template, doc}) => ( + .map(template => (
{ - {previewDoc(doc, template)} + {previewDoc(template.getRenderedDoc(), template)}
))} -- cgit v1.2.3-70-g09d2 From 6c5d7c2a4584e73e17593cb54071c91bcf153cca Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sun, 22 Dec 2024 04:37:25 -0500 Subject: changes for testing without using GPT --- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 8 ++-- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 41 ++++++++++-------- .../DocCreatorMenu/FieldTypes/DynamicField.tsx | 4 -- .../DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx | 4 +- .../DocCreatorMenu/FieldTypes/StaticField.tsx | 14 ++---- .../nodes/DataVizBox/DocCreatorMenu/Template.tsx | 18 ++++---- .../DataVizBox/DocCreatorMenu/TemplateBackend.tsx | 50 ++++++++++++++-------- .../DataVizBox/DocCreatorMenu/TemplateManager.tsx | 1 - 8 files changed, 74 insertions(+), 66 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx') diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index dececd1dc..117311b8c 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -411,10 +411,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { }, { fireImmediately: true } ); - this._disposers.contentSummary = reaction( - () => this.records, - () => this.updateGPTSummary() - ); + // this._disposers.contentSummary = reaction( + // () => this.records, + // () => this.updateGPTSummary() + // ); } fetchData = () => { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index e1f53ec47..e8b80b7b5 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -115,14 +115,15 @@ export class DocCreatorMenu extends ObservableReactComponent { this._userTemplates.push(template); }; @action removeUserTemplate = (template: Template) => { - this._userTemplates.splice(this._userTemplates.indexOf(t), 1); + this._userTemplates.splice(this._userTemplates.indexOf(template), 1); } @action setSuggestedTemplates = (templates: Template[]) => { this._suggestedTemplates = templates; //prettier-ignore }; @computed get docsToRender() { - return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : []; + return [1, 2, 3, 4]; + //this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : []; !!! put this back for GPT rendering } @computed get rowsCount() { @@ -357,6 +358,7 @@ export class DocCreatorMenu extends ObservableReactComponent { @action updateRenderedPreviewCollection = async (template: Template) => { this._fullyRenderedDocs = await this.createDocsFromTemplate(template) ?? []; + console.log(this._fullyRenderedDocs); this.updateRenderedDocCollection(); } @@ -716,6 +718,7 @@ export class DocCreatorMenu extends ObservableReactComponent { }); const processContent = async (content: {[title: string]: string}) => { + const templateCopy = template.cloneBase(); fields.filter(title => title).forEach(title => { @@ -748,19 +751,23 @@ export class DocCreatorMenu extends ObservableReactComponent { return templateCopy.getRenderedDoc(); }; + + const rows = [1, 2, 3, 4]; - const promises = rowContents.map(content => processContent(content)); + //const promises = rowContents.map(content => processContent(content)); + const promises = rows.map(row => processContent({})); + const renderedDocs = await Promise.all(promises); this._docsRendering = false; // removes loading indicator + console.log('docs: ', renderedDocs); + console.log('first doc height: ', renderedDocs[0]._height); + return renderedDocs; } - - - addRenderedCollectionToMainview = () => { const collection = this._renderedDocCollection; if (!collection) return; @@ -822,7 +829,7 @@ export class DocCreatorMenu extends ObservableReactComponent { })}> - @@ -1012,11 +1019,9 @@ export class DocCreatorMenu extends ObservableReactComponent { collection._height = verticalSpan; collection._width = horizontalSpan; - const layout = this._layout; - const columns: number = layout.columns ?? this.columnsCount; - const xGap: number = layout.xMargin; - const yGap: number = layout.yMargin; - // const repeat: number = templateInfo.layout.repeat; + const columns: number = this._layout.columns ?? this.columnsCount; + const xGap: number = this._layout.xMargin; + const yGap: number = this._layout.yMargin; const startX: number = -Number(collection._width)/2; const startY: number = -Number(collection._height)/2; const docHeight: number = Number(docs[0]._height); @@ -1066,7 +1071,6 @@ export class DocCreatorMenu extends ObservableReactComponent { console.log('called'); if (!this._fullyRenderedDocs) return; - const { horizontalSpan, verticalSpan } = this.previewInfo; //const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan; const collectionFactory = (): (docs: Doc[], options: DocumentOptions) => Doc => { @@ -1086,19 +1090,22 @@ export class DocCreatorMenu extends ObservableReactComponent { } } - const collection: Doc = collectionFactory()(this._fullyRenderedDocs, { + const collection = collectionFactory()(this._fullyRenderedDocs, { isDefaultTemplateDoc: true, - _height: verticalSpan, - _width: horizontalSpan, title: 'title', backgroundColor: 'gray', + x: 200, + y: 200 }); this.applyLayout(collection, this._fullyRenderedDocs); this._renderedDocCollection = collection; - console.log('changed'); + const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; + mainCollection.addDocument(collection); + + console.log('changed to: ', collection); } 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 c751c91bd..c244dd57c 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx @@ -1,12 +1,8 @@ -import { makeAutoObservable, makeObservable, reaction } from "mobx"; import { Doc, DocListCast } 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 { FieldUtils } from "./FieldUtils"; -import { StaticField } from "./StaticField"; -import { IDisposer } from "mobx-utils"; export class DynamicField extends Field { protected parent: Field; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx index 1dd442c97..2aa9f9032 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx @@ -136,8 +136,8 @@ export abstract class Field { //this.updateRenderedDoc(this.renderedDoc); field.updateRenderedDoc(this.renderedDoc); 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)); + //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/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx index 0b2f437e8..df997c8c5 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx @@ -1,17 +1,8 @@ -import { TbHospital } from "react-icons/tb"; import { Doc, DocListCast } from "../../../../../../fields/Doc"; -import { FieldType } from "../../../../../../fields/ObjectField"; import { Docs, DocumentOptions } 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"; -import { indexOf } from "lodash"; -import { ScriptField } from "../../../../../../fields/ScriptField"; -import { StrCast } from "../../../../../../fields/Types"; -import { makeAutoObservable, makeObservable, reaction } from "mobx"; -import { IDisposer } from "mobx-utils"; export class StaticField extends Field { @@ -38,9 +29,10 @@ export class StaticField extends Field { setContent = (newContent: string, type?: FieldContentType) => { this.content = newContent; if (type) this.contentType = type; + this.updateRenderedDoc(this.renderedDocument /*, true*/); }; - getContent() { return this.content }; + getContent() { return this.content ?? 'Unset'}; applyAttributes = (field: Field) => { //!!! can be updated later for more robust clonign; this is all ythat's needed now super.applyAttributes(field); @@ -98,6 +90,8 @@ export class StaticField extends Field { break; } + //doc[this.title] = this.content; broken for some reason + this.renderedDocument = doc; return doc; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx index 7515a39be..16e70a47b 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx @@ -9,6 +9,7 @@ import { } from "./FieldTypes/FieldUtils"; import { } from "./FieldTypes/StaticField"; import { observer } from "mobx-react"; import { IDisposer } from "mobx-utils"; +import { Width } from "../../../../../fields/DocSymbols"; export class Template { @@ -44,16 +45,15 @@ export class Template { return clone; } - getRenderedDoc = () => { - console.log('called'); - const doc: Doc = this.doc; - this.contentFields.forEach(field => { - const title: string = field.getTitle(); - const val: FieldType = field.getContent() as FieldType; - if (!title || !val) return; - doc[title] = val; + printFieldInfo = () => { + this.allFields.forEach(field => { + const doc = field.renderedDoc; + console.log('title: ', field.getTitle(), ' width: ', doc.width); }); - return doc; + } + + getRenderedDoc = () => { + return this.doc; } getFieldByID = (id: number): Field => { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx index 4f1186320..bea5c2d5d 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx @@ -491,7 +491,7 @@ export class TemplateLayouts { tl:[0,0], br:[500, 600], opts: { - backgroundColor: '#DDD3A9', + backgroundColor: '#D7CBAB', }, subfields: [ { @@ -502,63 +502,75 @@ export class TemplateLayouts { sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], description: 'A small text field for a title that categorizes the rest of the content.', opts: { - borderColor: 'yellow', - borderWidth: '8', hCentering: "h-center", backgroundColor: 'transparent', + textTransform: 'uppercase', }, }, { viewType: ViewType.CAROUSEL3D, - tl: [-0.9, -.3], - br: [0.9, .9], + tl: [-0.9, -.5], + br: [0.9, .25], opts: { - borderColor: 'yellow', + borderColor: '#847F69', borderWidth: '8', - backgroundColor: 'transparent', + backgroundColor: '#C8BA94', }, subfields: [ { viewType: ViewType.STATIC, - tl: [-.3, -.6], - br: [.3, .6], + tl: [-.4, -.6], + br: [.4, .6], types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT], sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], description: 'A medium to large field for content that will share central focus with other content in the carousel.', opts: { - borderColor: 'yellow', - borderWidth: '8', + //borderColor: 'yellow', + //borderWidth: '8', }, }, { viewType: ViewType.STATIC, - tl: [-.3, -.6], - br: [.3, .6], + tl: [-.4, -.6], + br: [.4, .6], types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT], sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], description: 'A medium to large field for content that will share central focus with other content in the carousel.', opts: { - borderColor: 'black', - borderWidth: '8', + //borderColor: 'black', + //borderWidth: '8', }, }, { viewType: ViewType.STATIC, - tl: [-.3, -.6], - br: [.3, .6], + tl: [-.4, -.6], + br: [.4, .6], types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT], sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], description: 'A medium to large field for content that will share central focus with other content in the carousel.', opts: { - borderColor: 'yellow', - borderWidth: '8', + //borderColor: 'yellow', + //borderWidth: '8', }, }, ] }, + { + viewType: ViewType.STATIC, + tl: [-0.9, .35], + br: [0.9, .9], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE], + description: 'A medium text field for a description of the content in the carousel.', + opts: { + hCentering: "h-center", + backgroundColor: 'transparent', + }, + }, ] } + public static ThreeField001: FieldSettings = { title: 'threefield001', viewType: ViewType.FREEFORM, diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx index 413c3082e..6ab0a1774 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx @@ -2,7 +2,6 @@ import { makeAutoObservable } from "mobx"; 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 fe1536918dbbca08c9900497bb466fd7aa36ffdf Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sat, 22 Feb 2025 15:02:26 -0500 Subject: Splitting staticfield into different content types (as subclasses) --- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 8 +- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 10 +- .../DocCreatorMenu/EditableTemplateDoc.tsx | 22 --- .../DocCreatorMenu/FieldTypes/DynamicField.tsx | 3 +- .../DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx | 36 ++-- .../DocCreatorMenu/FieldTypes/FieldUtils.tsx | 14 +- .../DocCreatorMenu/FieldTypes/StaticContentField | 98 ++++++++++ .../DocCreatorMenu/FieldTypes/StaticField.tsx | 214 --------------------- .../nodes/DataVizBox/DocCreatorMenu/Template.tsx | 3 +- .../DataVizBox/DocCreatorMenu/TemplateBackend.tsx | 1 - 10 files changed, 145 insertions(+), 264 deletions(-) delete mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/EditableTemplateDoc.tsx create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField delete mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx') diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 117311b8c..dececd1dc 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -411,10 +411,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { }, { fireImmediately: true } ); - // this._disposers.contentSummary = reaction( - // () => this.records, - // () => this.updateGPTSummary() - // ); + this._disposers.contentSummary = reaction( + () => this.records, + () => this.updateGPTSummary() + ); } fetchData = () => { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index e8b80b7b5..b576aee82 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -32,7 +32,7 @@ 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 { Field, ViewType } from './FieldTypes/Field'; import { TabDocView } from '../../../collections/TabDocView'; export enum LayoutType { @@ -585,7 +585,7 @@ export class DocCreatorMenu extends ObservableReactComponent { 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)); - field.setContent(col.defaultContent ?? '', col.type === TemplateFieldType.VISUAL ? FieldContentType.IMAGE : FieldContentType.STRING); + field.setContent(col.defaultContent ?? '', col.type === TemplateFieldType.VISUAL ? ViewType.IMG : ViewType.TEXT); field.setTitle(col.title); } else { a[Number(fieldID)] = this.getColByTitle(colTitle); @@ -618,6 +618,8 @@ export class DocCreatorMenu extends ObservableReactComponent { const renderedTemplates: (Template | undefined)[] = await Promise.all(renderedTemplatePromises); + templates.forEach(template => template.mainField.updateRenderedDoc()) + setTimeout(() => { this.setSuggestedTemplates(templates); this._GPTLoading = false; @@ -630,7 +632,7 @@ export class DocCreatorMenu extends ObservableReactComponent { console.log('url: ', url) const field: Field = template.getFieldByID(Number(fieldNum)); - field.setContent(url ?? '', FieldContentType.IMAGE); + field.setContent(url ?? '', ViewType.IMG); field.setTitle(col.title); }; @@ -687,7 +689,7 @@ export class DocCreatorMenu extends ObservableReactComponent { const field: Field = template.getFieldByID(Number(info.number)); const col = this.getColByTitle(title); - field.setContent(info.content ?? '', FieldContentType.STRING); + field.setContent(info.content ?? '', ViewType.TEXT); field.setTitle(col.title); }); } diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/EditableTemplateDoc.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/EditableTemplateDoc.tsx deleted file mode 100644 index 5ec27f338..000000000 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/EditableTemplateDoc.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Doc } from "../../../../../fields/Doc"; -import { SubCollectionViewProps } from "../../../collections/CollectionSubView"; -import { CollectionFreeFormView } from "../../../collections/collectionFreeForm"; -import { TemplateManager } from "./TemplateManager"; -import { TemplateLayouts } from "./TemplateBackend"; -import { Template } from "./Template"; - -class EditableTemplateDoc extends CollectionFreeFormView { - - template: Template; - - constructor(props: SubCollectionViewProps, template: Template){ - super(props); - this.template = template; - } - - addDocumenta = (newBox: Doc | Doc[]): boolean => { - this.addDocument(newBox); - - return true; - } -} \ No newline at end of file diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx index c244dd57c..2d8328ed6 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx @@ -51,8 +51,7 @@ export class DynamicField extends Field { }; updateRenderedDoc = (): Doc => { - - //console.log('dynamic field updated'); + console.log('dynamic field updated'); let doc: Doc; const renderedSubfields: Doc[] = this.subfields.map(field => field.renderedDoc); switch (this.settings.viewType) { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx index 2aa9f9032..d164053c3 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx @@ -49,7 +49,6 @@ export abstract class Field { get renderedDoc(){ return this.renderedDocument }; get getDimensions() { return this.dimensions }; get getID() { return this.id }; - get getViewType() { return this.settings.viewType }; get getDescription(): string { return this.settings.description ?? '' }; setTitle = (title: string) => { @@ -58,7 +57,7 @@ export abstract class Field { }; getTitle = () => { return this.title }; - abstract setContent(content: string, type?: FieldContentType): void; + abstract setContent(content: string, type?: ViewType): void; abstract getContent(): string; setupFieldChangeReaction = () => { @@ -116,7 +115,7 @@ export abstract class Field { this.subfields.push(newField); }; - addField = (type?: FieldContentType) => { + addField = (type?: ViewType) => { } @@ -142,8 +141,6 @@ export abstract class Field { abstract updateRenderedDoc(oldDoc?: Doc): void; - abstract matches(cols: Col[]): Array; - dispose = () => { Object.values(this.disposers).forEach(disposer => disposer?.()); } @@ -165,6 +162,26 @@ export abstract class Field { }); } + matches = (cols: Col[]): number[] => { + const colMatchesField = (col: Col) => { + const isMatch: boolean = ( + this.settings.sizes?.some(size => col.sizes?.includes(size)) + && this.settings.types?.includes(col.type)) + ?? false; + return isMatch; + } + + const matches: Array = []; + + cols.forEach((col, v) => { + if (colMatchesField(col)) { + matches.push(v); + } + }); + + return matches; + }; + } export type FieldSettings = { @@ -179,16 +196,13 @@ export type FieldSettings = { description?: string; }; -export enum FieldContentType { - STRING = 'string', - IMAGE = 'image', -} - export enum ViewType { CAROUSEL3D = 'carousel3d', FREEFORM = 'freeform', STATIC = 'static', - DEC = 'decoration' + DEC = 'decoration', + IMG = 'image', + TEXT = 'text', } export type FieldDimensions = { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx index 27ea8e1f5..6a800b8d1 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx @@ -4,7 +4,7 @@ import { Col } from "../DocCreatorMenu"; import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from "../TemplateBackend"; import { DynamicField } from "./DynamicField"; import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field"; -import { StaticField } from "./StaticField"; +import { TextTemplateField, ImageTemplateField } from "./StaticContentField"; export class FieldUtils { public static getLocalDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentDimensions: FieldDimensions): FieldDimensions => { @@ -23,9 +23,15 @@ export class FieldUtils { 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); + switch (settings.viewType) { + case ViewType.FREEFORM: case ViewType.CAROUSEL3D: + return new DynamicField(settings, id, parent); + case ViewType.IMG: + return new ImageTemplateField(settings, id, parent); + case ViewType.TEXT: + return new TextTemplateField(settings, id, parent); + } + return new TextTemplateField(settings, id, parent); } public static textProperties: string[] = [ diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField new file mode 100644 index 000000000..da2671f9c --- /dev/null +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField @@ -0,0 +1,98 @@ +import { Doc, DocListCast } from "../../../../../../fields/Doc"; +import { Docs, DocumentOptions } from "../../../../../documents/Documents"; +import { FieldUtils } from "./FieldUtils"; +import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field"; +import { RichTextField } from "../../../../../../fields/RichTextField"; +import { DocData } from "../../../../../../fields/DocSymbols"; +import { ImageField } from "../../../../../../fields/URLField"; + +export abstract class StaticContentField extends Field { + + protected content: string; + protected renderedDocument: Doc; + protected subfields: Field[]; + + protected parent: Field; + protected dimensions: FieldDimensions; + + constructor(settings: FieldSettings, parent: Field, id: number) { + super(settings, id, FieldUtils.setupField, parent); + this.parent = parent; + this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions); + this.content = ''; + this.subfields = this.setupSubfields(this); + this.renderedDocument = this.updateRenderedDoc(); + }; + + abstract setContent(content: string): void; + getContent() { return this.content ?? 'unset'}; + + abstract updateRenderedDoc(): Doc; +} + +export class ImageTemplateField extends StaticContentField { + + setContent = (url: string) => { + const imgField = new ImageField(url); + this.renderedDocument[DocData]['data'] = imgField; + this.content = url; + }; + + updateRenderedDoc = (): Doc => { + const url = String(this.content); + let doc: Doc = Docs.Create.ImageDocument(url, { + title: this.title, + _layout_fitWidth: false, + }); + FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings); + + this.renderedDocument = doc; + + return doc; + }; +} + +export class TextTemplateField extends StaticContentField { + + setContent = (text: string) => { + const rtf = { + doc: { + type: 'doc', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text, + }, + ], + }, + ], + }, + selection: { type: 'text', anchor: 1, head: 1 }, + storedMarks: [], + }; + this.content = text; + const field = new RichTextField(JSON.stringify(rtf), text); + this.renderedDocument[DocData]['text'] = field; + }; + + updateRenderedDoc = (): Doc => { + const opts = this.settings.opts; + const text = String(this.content); + let doc: Doc = Docs.Create.TextDocument(text, { + title: this.title, + text_fontColor: opts.text_fontColor, + contentBold: opts.contentBold, + textTransform: opts.textTransform, + color: opts.text_fontColor, + _text_fontSize: `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}` + }); + FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings); + + this.renderedDocument = doc; + + return 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 deleted file mode 100644 index 2090d94b9..000000000 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx +++ /dev/null @@ -1,214 +0,0 @@ -import { Doc, DocListCast } from "../../../../../../fields/Doc"; -import { Docs, DocumentOptions } from "../../../../../documents/Documents"; -import { Col } from "../DocCreatorMenu"; -import { FieldUtils } from "./FieldUtils"; -import { Field, FieldContentType, FieldDimensions, FieldSettings, ViewType } from "./Field"; -import { RichTextField } from "../../../../../../fields/RichTextField"; - -export class StaticField extends Field { - - private content: string; - private contentType: FieldContentType | undefined; - protected renderedDocument: Doc; - protected subfields: Field[]; - - private storedAttributes: Record; - - protected parent: Field; - protected dimensions: FieldDimensions; - - constructor(settings: FieldSettings, parent: Field, id: number) { - super(settings, id, FieldUtils.setupField, parent); - this.parent = parent; - this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions); - this.content = ''; - this.subfields = this.setupSubfields(this); - this.renderedDocument = this.updateRenderedDoc(); - this.storedAttributes = new DocumentOptions(); - }; - - setContent = (newContent: string, type?: FieldContentType) => { - console.log('set to: ', newContent) - const rtf = { - doc: { - type: 'doc', - content: [ - { - type: 'paragraph', - content: [ - { - type: 'text', - newContent, - }, - ], - }, - ], - }, - selection: { type: 'text', anchor: 1, head: 1 }, - storedMarks: [], - }; - const field = new RichTextField(JSON.stringify(rtf), newContent); - this.content = newContent; - // this.renderedDocument['data'] = field; - if (type) this.contentType = type; - - this.updateRenderedDoc(this.renderedDocument /*, true*/); - }; - getContent() { return this.content ?? 'Unset'}; - - applyAttributes = (field: Field) => { //!!! can be updated later for more robust clonign; this is all ythat's needed now - super.applyAttributes(field); - field.setContent('', this.contentType); - } - - matches = (cols: Col[]): number[] => { - const colMatchesField = (col: Col) => { - const isMatch: boolean = ( - this.settings.sizes?.some(size => col.sizes?.includes(size)) - && this.settings.types?.includes(col.type)) - ?? false; - return isMatch; - } - - const matches: Array = []; - - cols.forEach((col, v) => { - if (colMatchesField(col)) { - matches.push(v); - } - }); - - return matches; - }; - - updateRenderedDoc = (oldDoc?: Doc): Doc => { - const opts = this.settings.opts; - - if (!this.contentType) { this.contentType = FieldContentType.STRING }; - - let doc: Doc; - - switch (this.contentType) { - case FieldContentType.STRING: - const text = String(this.content); - console.log('creating text doc with text: ', text) - 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; - } - - //doc[this.title] = this.content; broken for some reason - - this.renderedDocument = doc; - - return doc; - }; - - // updateRenderedDoc = (currDoc?: Doc, forceRerender?: boolean) => { - - // if (!this.contentType) { this.contentType = FieldContentType.STRING }; - - // let doc: Doc; - - // // if (this.shouldRerender() || forceRerender) { - // // } else { - // // this.updateStoredAttributes(this.renderedDocument); - // // } - - // this.updateStoredAttributes(this.renderedDocument); - - // let list: string[] = Object.entries(this.storedAttributes).map(([key, value]) => `${key}: ${value}`); - // console.log(list); - - // 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; - - - // console.log(StrCast(doc.backgroundColor), StrCast(doc._rotation)); - - // this.renderedDocument = doc; - - // //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 = new DocumentOptions(); - - docOptions.isDefaultTemplateDoc = true; - docOptions.x = this.dimensions.coord.x; - docOptions.y = this.dimensions.coord.y; - docOptions._height = this.dimensions.height; - docOptions._width = this.dimensions.width; - docOptions._nativeWidth = this.dimensions.width; - docOptions._nativeHeight = this.dimensions.height; - - Object.entries(this.settings.opts).forEach(([key, value]) => { - docOptions[key] = value; - }); - - let doc: Doc; - switch (this.contentType) { - case FieldContentType.STRING: - doc = Docs.Create.TextDocument(this.content, docOptions); - break; - case FieldContentType.IMAGE: - doc = Docs.Create.ImageDocument(this.content, docOptions); - break; - default: - doc = Docs.Create.TextDocument(this.content, docOptions); - break; - } - - doc._layout_hideScroll = true; - //doc._layout_borderRounding = !opts._layout_borderRounding ? '0px' : ScriptField.MakeFunction(`${opts._layout_borderRounding} * this.width + 'px'`); - - this.renderedDocument = 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 16e70a47b..9d132d637 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx @@ -6,7 +6,6 @@ import { Col } from "./DocCreatorMenu"; import { DynamicField } from "./FieldTypes/DynamicField"; import { Field, FieldSettings, ViewType } from "./FieldTypes/Field"; import { } from "./FieldTypes/FieldUtils"; -import { } from "./FieldTypes/StaticField"; import { observer } from "mobx-react"; import { IDisposer } from "mobx-utils"; import { Width } from "../../../../../fields/DocSymbols"; @@ -25,7 +24,7 @@ export class Template { get childFields(): Field[] { return this.mainField.getSubfields }; get allFields(): Field[] { return this.mainField.getAllSubfields }; - get contentFields(): Field[] { return this.allFields.filter(field => field.getViewType === ViewType.STATIC) }; + get contentFields(): Field[] { return this.allFields.filter(field => field !instanceof DynamicField) }; get doc(){ return this.mainField.renderedDoc; }; get title() { return this.mainField.getTitle() }; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx index bea5c2d5d..583b2f472 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx @@ -1,5 +1,4 @@ import { FieldOpts, FieldSettings, ViewType } from "./FieldTypes/Field"; -import { } from "./FieldTypes/StaticField"; export enum TemplateFieldType { TEXT = 'text', -- cgit v1.2.3-70-g09d2 From 3b98831182a4d830cf577fa217a477b2cadcd7bc Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Wed, 26 Feb 2025 16:27:10 -0500 Subject: separated field content classes technically working --- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 12 ++- .../DocCreatorMenu/FieldTypes/DecorationField.tsx | 38 +++++++ .../DocCreatorMenu/FieldTypes/DynamicField.tsx | 11 ++- .../DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx | 19 ++-- .../DocCreatorMenu/FieldTypes/FieldUtils.tsx | 12 ++- .../DocCreatorMenu/FieldTypes/StaticContentField | 98 ------------------ .../FieldTypes/StaticContentField.tsx | 109 +++++++++++++++++++++ .../nodes/DataVizBox/DocCreatorMenu/Template.tsx | 8 +- .../DataVizBox/DocCreatorMenu/TemplateManager.tsx | 2 +- 9 files changed, 183 insertions(+), 126 deletions(-) create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DecorationField.tsx delete mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index b576aee82..6f3647133 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -568,13 +568,17 @@ export class DocCreatorMenu extends ObservableReactComponent { let prompt: string = `(${origCount}) ${inputText}`; + console.log('prompt is: ', prompt) + this._GPTLoading = true; try { const res = await gptAPICall(prompt, GPTCallType.TEMPLATE); if (res) { + console.log('res is: ', res) const assignments: { [templateTitle: string]: { [fieldID: string]: string } } = JSON.parse(res); + console.log('assignments: ', assignments) const brokenDownAssignments: [Template, { [fieldID: number]: Col }][] = []; Object.entries(assignments).forEach(([tempTitle, assignment]) => { @@ -583,7 +587,7 @@ export class DocCreatorMenu extends ObservableReactComponent { const toObj = Object.entries(assignment).reduce( (a, [fieldID, colTitle]) => { 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 + 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 field const field = template.getFieldByID(Number(fieldID)); field.setContent(col.defaultContent ?? '', col.type === TemplateFieldType.VISUAL ? ViewType.IMG : ViewType.TEXT); field.setTitle(col.title); @@ -594,7 +598,9 @@ export class DocCreatorMenu extends ObservableReactComponent { }, {} as { [field: number]: Col } ); + console.log('all assignments: ', toObj) brokenDownAssignments.push([template, toObj]); + console.log('brokendownassignments: ', brokenDownAssignments) }); return brokenDownAssignments; @@ -612,13 +618,15 @@ export class DocCreatorMenu extends ObservableReactComponent { const cols = this.fieldsInfos; const templates = this.templateManager.getValidTemplates(cols); + console.log(templates) + const assignments: [Template, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols); const renderedTemplatePromises: Promise