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. --- .../views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx index 890bc6f73..95f0da43d 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx @@ -20,4 +20,12 @@ export class TemplateManager { getValidTemplates = (cols: Col[]): Template[] => { return this.templates.filter(template => template.isValidTemplate(cols)); } + + addTemplate = (newTemplate: Template) =>{ + this.templates.push(newTemplate); + } + + removeTemplate = (template: Template) => { + this.templates.splice(this.templates.indexOf(template), 1); + } } \ No newline at end of file -- 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/TemplateManager.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/TemplateManager.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 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/TemplateManager.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 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/TemplateManager.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