diff options
Diffstat (limited to 'src')
12 files changed, 429 insertions, 486 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index f5ea849ae..45d02e822 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -743,6 +743,7 @@ export namespace Docs { } // users placeholderDoc as proto if it exists + console.log('placeholder: ', placeholderDocIn, ' data: ', dataProps['data']) const dataDoc = Doc.assign(placeholderDoc ? Doc.GetProto(placeholderDoc) : Doc.MakeDelegate(proto, protoId), dataProps, undefined, true); if (placeholderDoc) { diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 22725a2b9..fc2d7f572 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -65,6 +65,8 @@ import { PresBox, PresElementBox } from './nodes/trails'; import { FaceRecognitionHandler } from './search/FaceRecognitionHandler'; import { SearchBox } from './search/SearchBox'; import { StickerPalette } from './smartdraw/StickerPalette'; +import { Field } from './nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field'; +import { FieldUtils } from './nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils'; dotenv.config(); @@ -100,6 +102,7 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' }; new PingManager(); new KeyManager(); new FaceRecognitionHandler(); + Field.initField = FieldUtils.initField; // set the init function for fields // initialize plugins and classes that require plugins CollectionDockingView.Init(TabDocView); diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index d404378eb..941402d6d 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -102,6 +102,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro return true; }; public static renderProps(props: SchemaTableCellProps) { + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { Document, fieldKey, getFinfo, columnWidth, isRowActive } = props; let protoCount = 0; let doc: Doc | undefined = Document; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 88f8a2d46..a702218b0 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -1,3 +1,5 @@ +import { Colors } from '@dash/components'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; @@ -6,33 +8,29 @@ import * as React from 'react'; import ReactLoading from 'react-loading'; import { ClientUtils, returnEmptyFilter, returnFalse, setupMoveUpEvents } from '../../../../../ClientUtils'; import { emptyFunction } from '../../../../../Utils'; -import { Doc, DocListCast, FieldType, NumListCast, StrListCast, returnEmptyDoclist } from '../../../../../fields/Doc'; +import { Doc, NumListCast, StrListCast, returnEmptyDoclist } from '../../../../../fields/Doc'; import { Id } from '../../../../../fields/FieldSymbols'; import { ImageCast, StrCast } from '../../../../../fields/Types'; import { ImageField } from '../../../../../fields/URLField'; +import { Upload } from '../../../../../server/SharedMediaTypes'; import { Networking } from '../../../../Network'; import { GPTCallType, gptAPICall, gptImageCall } from '../../../../apis/gpt/GPT'; import { Docs, DocumentOptions } from '../../../../documents/Documents'; import { DragManager } from '../../../../util/DragManager'; import { SnappingManager } from '../../../../util/SnappingManager'; +import { Transform } from '../../../../util/Transform'; import { UndoManager, undoable } from '../../../../util/UndoManager'; import { ObservableReactComponent } from '../../../ObservableReactComponent'; +import { DefaultStyleProvider } from '../../../StyleProvider'; import { CollectionFreeFormView } from '../../../collections/collectionFreeForm/CollectionFreeFormView'; import { DocumentView, DocumentViewInternal } from '../../DocumentView'; import { OpenWhere } from '../../OpenWhere'; import { DataVizBox } from '../DataVizBox'; import './DocCreatorMenu.scss'; -import { DefaultStyleProvider } from '../../../StyleProvider'; -import { Transform } from '../../../../util/Transform'; +import { Field, ViewType } from './FieldTypes/Field'; +import { Template } from './Template'; import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from './TemplateBackend'; import { TemplateManager } from './TemplateManager'; -import { Template } from './Template'; -import { Field, ViewType } from './FieldTypes/Field'; -import { TabDocView } from '../../../collections/TabDocView'; -import { DocData } from '../../../../../fields/DocSymbols'; -import { IconProp } from '@fortawesome/fontawesome-svg-core'; -import { Upload } from '../../../../../server/SharedMediaTypes'; -import { Colors } from '@dash/components'; export enum LayoutType { FREEFORM = 'Freeform', @@ -86,7 +84,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> @observable _renderedDocCollection: Doc | undefined = undefined; // fullyRenderedDocs in a parent collection @observable _docsRendering: boolean = false; // dictates loading symbol - @observable _userTemplates: Template[] = []; + @observable _userTemplates: Template[] = []; @observable _selectedTemplate: Template | undefined = undefined; @observable _currEditingTemplate: Template | undefined = undefined; @@ -98,7 +96,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> @observable _expandedPreview: Doc | undefined = undefined; @observable _suggestedTemplates: Template[] = []; - @observable _suggestedTemplatePreviews: {doc: Doc, template: Template}[] = []; + @observable _suggestedTemplatePreviews: { doc: Doc; template: Template }[] = []; @observable _GPTOpt: boolean = false; @observable _callCount: number = 0; @observable _GPTLoading: boolean = false; @@ -147,7 +145,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> }; @action removeUserTemplate = (template: Template) => { this._userTemplates.splice(this._userTemplates.indexOf(template), 1); - } + }; @action setSuggestedTemplates = (templates: Template[]) => { this._suggestedTemplates = templates; //prettier-ignore }; @@ -373,10 +371,10 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> } @action updateRenderedPreviewCollection = async (template: Template) => { - this._fullyRenderedDocs = await this.createDocsFromTemplate(template) ?? []; + this._fullyRenderedDocs = (await this.createDocsFromTemplate(template)) ?? []; console.log(this._fullyRenderedDocs); this.updateRenderedDocCollection(); - } + }; @action updateSelectedTemplate = async (template: Template) => { if (this._selectedTemplate === template) { @@ -407,13 +405,12 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> }; testTemplate = async () => { - this._suggestedTemplates = this.templateManager.templates; //prettier-ignore //console.log(this.templateManager.templates) // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; - + // this.templateManager.templates.forEach(template => { // const doc = template.mainField.renderedDoc(); // mainCollection.addDocument(doc); @@ -586,12 +583,13 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> const brokenDownAssignments: [Template, { [fieldID: number]: Col }][] = []; Object.entries(assignments).forEach(([tempTitle, assignment]) => { - const template = templates.filter(template => template.title === tempTitle)[0]; + const template = templates.filter(temp => temp.title === tempTitle)[0]; if (!template) return; 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 field + 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); @@ -615,11 +613,10 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> }; generatePresetTemplates = async () => { - const templates: Template[] = []; if (this.DEBUG_MODE) { - templates.push(...this.templateManager.templates) + templates.push(...this.templateManager.templates); } else { this._dataViz?.updateColDefaults(); @@ -628,12 +625,12 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> const assignments: [Template, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols); - const renderedTemplatePromises: Promise<Template | undefined>[] = assignments.map(([template, assignments]) => this.applyGPTContentToTemplate(template, assignments)); + const renderedTemplatePromises: Promise<Template | undefined>[] = assignments.map(([template, assgns]) => this.applyGPTContentToTemplate(template, assgns)); - const renderedTemplates: (Template | undefined)[] = await Promise.all(renderedTemplatePromises); + await Promise.all(renderedTemplatePromises); } - templates.forEach(template => template.mainField.initializeDocument()) + templates.forEach(template => template.mainField.initializeDocument({ subfields: [], title: template.title, opts: {}, viewType: ViewType.FREEFORM, tl: [0, 0], br: [900, 900] })); setTimeout(() => { this.setSuggestedTemplates(templates); @@ -699,9 +696,9 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> if (res) { const assignments: { [title: string]: { number: string; content: string } } = JSON.parse(res); - Object.entries(assignments).forEach(([title, info]) => { + Object.entries(assignments).forEach(([, /* title */ info]) => { const field: Field = template.getFieldByID(Number(info.number)); - const column = this.getColByTitle(title); + // const column = this.getColByTitle(title); field.setContent(info.content ?? '', ViewType.TEXT); field.setTitle(col.title); @@ -732,35 +729,40 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> return values; }); - - const processContent = async (content: {[title: string]: string}) => { - const templateCopy = await template.cloneBase(); + const processContent = async (content: { [title: string]: string }) => { + const templateCopy = await template.cloneBase(); - fields.filter(title => title).forEach(title => { - const field = templateCopy.getFieldByTitle(title); - if (field === undefined) return; - field.setContent(content[title], field.viewType); - }); - - const gptPromises = this._userCreatedFields.filter(field => field.type === TemplateFieldType.TEXT).map(field => { - const title = field.title; - const templateField = templateCopy.getFieldByTitle(title); - if (templateField === undefined) return; - const templatefieldID = templateField.getID; - - return this.renderGPTTextCall(templateCopy, field, templatefieldID); - }); + fields + .filter(title => title) + .forEach(title => { + const field = templateCopy.getFieldByTitle(title); + if (field === undefined) return; + field.setContent(content[title], field.viewType); + }); + + const gptPromises = this._userCreatedFields + .filter(field => field.type === TemplateFieldType.TEXT) + .map(field => { + const title = field.title; + const templateField = templateCopy.getFieldByTitle(title); + if (templateField === undefined) return; + const templatefieldID = templateField.getID; + + return this.renderGPTTextCall(templateCopy, field, templatefieldID); + }); + + const imagePromises = this._userCreatedFields + .filter(field => field.type === TemplateFieldType.VISUAL) + .map(field => { + const title = field.title; + const templateField = templateCopy.getFieldByTitle(title); + if (templateField === undefined) return; + const templatefieldID = templateField.getID; + + return this.renderGPTImageCall(templateCopy, field, templatefieldID); + }); - const imagePromises = this._userCreatedFields.filter(field => field.type === TemplateFieldType.VISUAL).map(field => { - const title = field.title; - const templateField = templateCopy.getFieldByTitle(title); - if (templateField === undefined) return; - const templatefieldID = templateField.getID; - - return this.renderGPTImageCall(templateCopy, field, templatefieldID); - }); - await Promise.all(gptPromises); await Promise.all(imagePromises); @@ -768,7 +770,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> this._DOCCC = templateCopy.mainField.renderedDoc; return templateCopy.mainField.renderedDoc; }; - + let docs: Promise<Doc>[]; if (this.DEBUG_MODE) { docs = [1, 2, 3, 4].map(() => processContent({})); @@ -781,7 +783,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> this._docsRendering = false; // removes loading indicator return renderedDocs; - } + }; addRenderedCollectionToMainview = () => { const collection = this._renderedDocCollection; @@ -835,16 +837,27 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> <div className="top-panel" /> {rendered} <div className="right-buttons-panel"> - <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => { - if (!this._currEditingTemplate) return; - if (this._currEditingTemplate === this._selectedTemplate) { - this.updateRenderedPreviewCollection(this._currEditingTemplate); - } - this.setExpandedView(undefined); - })}> + <button + className="docCreatorMenu-menu-button section-reveal-options top-right" + onPointerDown={e => + this.setUpButtonClick(e, () => { + if (!this._currEditingTemplate) return; + if (this._currEditingTemplate === this._selectedTemplate) { + this.updateRenderedPreviewCollection(this._currEditingTemplate); + } + this.setExpandedView(undefined); + }) + }> <FontAwesomeIcon icon="minimize" /> </button> - <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => {this._currEditingTemplate?.printFieldInfo();/*this._currEditingTemplate?.resetToBase();*/ this.setExpandedView(this._currEditingTemplate);})}> + <button + className="docCreatorMenu-menu-button section-reveal-options top-right-lower" + onPointerDown={e => + this.setUpButtonClick(e, () => { + this._currEditingTemplate?.printFieldInfo(); + /*this._currEditingTemplate?.resetToBase();*/ this.setExpandedView(this._currEditingTemplate); + }) + }> <FontAwesomeIcon icon="arrows-rotate" color="white" /> </button> </div> @@ -853,33 +866,32 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> } get templatesPreviewContents() { - const GPTOptions = <div></div>; - const previewDoc = (doc: Doc, template: Template) => - <DocumentView - Document={doc} - isContentActive={emptyFunction} // !!! should be return false - addDocument={returnFalse} - moveDocument={returnFalse} - removeDocument={returnFalse} - PanelWidth={() => 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} - /> + const previewDoc = (doc: Doc, template: Template) => ( + <DocumentView + Document={doc} + isContentActive={emptyFunction} // !!! should be return false + addDocument={returnFalse} + moveDocument={returnFalse} + removeDocument={returnFalse} + PanelWidth={() => (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} + pinToPres={() => undefined} + childFilters={returnEmptyFilter} + childFiltersByRanges={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + fitContentsToBox={returnFalse} + fitWidth={returnFalse} + hideDecorations={true} + /> + ); //<img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} /> @@ -902,30 +914,30 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} /> </div> ) : ( - this._suggestedTemplates - .map(template => ( - <div - className="docCreatorMenu-preview-window" - style={{ - border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '', - boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '', - }} - onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(template)))}> - <button - className="option-button left" - onPointerDown={e => - this.setUpButtonClick(e, () => { - this.setExpandedView(template); - }) - }> - <FontAwesomeIcon icon="magnifying-glass" color="white" /> - </button> - <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.addUserTemplate(template))}> - <FontAwesomeIcon icon="plus" color="white" /> - </button> - {previewDoc(template.getRenderedDoc(), template)} - </div> - )) + this._suggestedTemplates.map(template => ( + <div + key={template.toString()} + className="docCreatorMenu-preview-window" + style={{ + border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '', + boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '', + }} + onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(template)))}> + <button + className="option-button left" + onPointerDown={e => + this.setUpButtonClick(e, () => { + this.setExpandedView(template); + }) + }> + <FontAwesomeIcon icon="magnifying-glass" color="white" /> + </button> + <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.addUserTemplate(template))}> + <FontAwesomeIcon icon="plus" color="white" /> + </button> + {previewDoc(template.getRenderedDoc(), template)} + </div> + )) )} </div> <div className="docCreatorMenu-GPT-options"> @@ -949,30 +961,30 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> <div className="docCreatorMenu-preview-window empty"> <FontAwesomeIcon icon="plus" color="rgb(160, 160, 160)" /> </div> - {this._userTemplates - .map(template => ( - <div - className="docCreatorMenu-preview-window" - style={{ - border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '', - boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '', - }} - onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(template)))}> - <button - className="option-button left" - onPointerDown={e => - this.setUpButtonClick(e, () => { - this.setExpandedView(template); - }) - }> - <FontAwesomeIcon icon="magnifying-glass" color="white" /> - </button> - <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.removeUserTemplate(template))}> - <FontAwesomeIcon icon="minus" color="white" /> - </button> - {previewDoc(template.getRenderedDoc(), template)} - </div> - ))} + {this._userTemplates.map(template => ( + <div + key={template.toString()} + className="docCreatorMenu-preview-window" + style={{ + border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '', + boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '', + }} + onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(template)))}> + <button + className="option-button left" + onPointerDown={e => + this.setUpButtonClick(e, () => { + this.setExpandedView(template); + }) + }> + <FontAwesomeIcon icon="magnifying-glass" color="white" /> + </button> + <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.removeUserTemplate(template))}> + <FontAwesomeIcon icon="minus" color="white" /> + </button> + {previewDoc(template.getRenderedDoc(), template)} + </div> + ))} </div> </div> </div> @@ -1034,8 +1046,8 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> 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 startX: number = -Number(collection._width) / 2; + const startY: number = -Number(collection._height) / 2; const docHeight: number = Number(docs[0]._height); const docWidth: number = Number(docs[0]._width); @@ -1099,7 +1111,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> } }; - const collection = collectionFactory()([this._fullyRenderedDocs[6], this._fullyRenderedDocs[9]], { + const collection = collectionFactory()(this._fullyRenderedDocs, { isDefaultTemplateDoc: true, title: 'title', backgroundColor: 'gray', @@ -1117,7 +1129,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> mainCollection.addDocument(collection); console.log('changed to: ', collection); - } + }; layoutPreviewContents = () => { return this._docsRendering ? ( @@ -1126,7 +1138,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} /> </div> </div> - ) : !this._renderedDocCollection ? null : ( + ) : !this._renderedDocCollection ? null : ( <div className="docCreatorMenu-layout-preview-window-wrapper"> <DocumentView Document={this._renderedDocCollection} diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DecorationField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DecorationField.tsx index 62f5504a8..98a9dc7a6 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DecorationField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DecorationField.tsx @@ -1,35 +1,3 @@ -import { Doc, DocListCast } from "../../../../../../fields/Doc"; -import { Docs, DocumentOptions } from "../../../../../documents/Documents"; -import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field"; -import { RichTextField } from "../../../../../../fields/RichTextField"; -import { DocData } from "../../../../../../fields/DocSymbols"; -import { ImageField } from "../../../../../../fields/URLField"; -import { FieldUtils } from "./FieldUtils"; +import { DynamicField } from './DynamicField'; -export class DecorationField extends Field { - - protected content: string = ''; - protected subfields: Field[]; - - protected Document: Doc; - - constructor(settings: FieldSettings, id: number, parent: Field) { - super(settings, id, FieldUtils.initField, parent); - this.subfields = this.setupSubfields(this); - this.Document = this.initializeDocument(); - }; - - setContent = (content: string, type?: ViewType) => { return } - getContent = () => { return 'none'}; - get isContentField(): boolean { return false }; - - initializeDocument = (): Doc => { - const renderedSubfields: Doc[] = this.subfields.map(field => field.renderedDoc); - this.settings.opts.title = this.title; - let doc: Doc = Docs.Create.FreeformDocument(renderedSubfields, this.settings.opts); - - this.Document = doc; - - return doc; - }; -}
\ No newline at end of file +export class DecorationField extends DynamicField {} diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx index 1970d1557..f100830d3 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx @@ -1,69 +1,141 @@ -import { makeAutoObservable, makeObservable, reaction } from "mobx"; -import { Doc, DocListCast } from "../../../../../../fields/Doc"; -import { Docs, DocumentOptions } from "../../../../../documents/Documents"; -import { Col } from "../DocCreatorMenu"; -import { TemplateLayouts } from "../TemplateBackend"; -import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field"; -import { IDisposer } from "mobx-utils"; -import { FieldUtils } from "./FieldUtils"; -import { random } from "lodash"; +import { Doc, DocListCast } from '../../../../../../fields/Doc'; +import { Docs } from '../../../../../documents/Documents'; +import { Field, FieldSettings, ViewType } from './Field'; +import { List } from '../../../../../../fields/List'; +import { DocData } from '../../../../../../fields/DocSymbols'; +import { DocumentType } from '../../../../../documents/DocumentTypes'; +import { reaction } from 'mobx'; +import { IDisposer } from 'mobx-utils'; export class DynamicField extends Field { - protected subfields: Field[]; + protected subfields!: Field[]; - protected Document!: Doc; + protected disposers: { [name: string]: IDisposer } = {}; + init(settings: FieldSettings, id: number, parent?: DynamicField) { + super.baseinit(undefined as unknown as Doc, settings, parent, id); + const { doc, subFields } = this.initializeDocument(settings); + this.Document = doc; + this.subfields = subFields; + + this.disposers.fieldList = reaction( + () => DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)]), + docs => { + console.log('updated'); + this.handleFieldUpdate(docs); + } + ); + return this; + } - private idd: number; + static setupSubfields(subFieldSettings: FieldSettings[] | undefined, parent?: DynamicField): Field[] { + return subFieldSettings?.map((fieldSettings, index) => Field.initField!(fieldSettings, index, parent)) || []; + } - constructor(settings: FieldSettings, id: number, parent?: Field) { - super(settings, id, FieldUtils.initField, parent); - this.subfields = this.setupSubfields(this); - this.initializeDocument(); - this.idd = random(0, 1000); + get getSubfields(): Field[] { + return this.subfields ?? []; + } + get getAllSubfields() { + let fields: Field[] = []; + this.subfields?.forEach(field => { + fields.push(field); + fields = fields.concat(field instanceof DynamicField ? field.getAllSubfields : ([] as Field[])); + }); + return fields; } - setContent = (content: string, type: ViewType) => { return }; - getContent = () => { return '' }; - get isContentField(): boolean { return false }; + setSubFields = (fields: Field[]) => { + this.subfields = fields; + }; + handleFieldUpdate = (newDocsList: Doc[]) => { + const currRenderedDocs: Set<Doc> = new Set(); + this.subfields.forEach(field => currRenderedDocs.add(field.Document)); + newDocsList.forEach(doc => { + if (!currRenderedDocs.has(doc)) { + this.addFieldFromDoc(doc); + } + }); + currRenderedDocs.forEach(doc => { + if (!newDocsList.includes(doc)) { + const fields = this.subfields.filter(field => field.Document === doc); + fields.forEach(field => this.removeField(field)); + } + }); + }; + + addFieldFromDoc = (doc: Doc) => { + const par = this.Document; + const settings: FieldSettings = { + tl: [Number(doc._x) / Number(par._width), Number(doc._y) / Number(par._height)], + br: [(Number(doc._x) + Number(doc._width)) / Number(par._width), (Number(doc._y) + Number(doc._height)) / Number(par._height)], + viewType: doc.type === DocumentType.COL ? ViewType.FREEFORM : ViewType.STATIC, + opts: {}, + }; + + const newField: Field = Field.initField!(settings, this.subfields.length, this); + this.subfields.push(newField); + }; + + addField = (field: Field) => { + if (!this.subfields.includes(field)) { + this.subfields.push(field); + console.log('field added'); + // Doc.SetContainer(field.Document, this.Document); + } + }; + + dispose = () => { + Object.values(this.disposers).forEach(disposer => disposer?.()); + }; + + removeField = (field: Field) => { + // var childDocs: Doc[] = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)]); + // this.Document[Doc.LayoutFieldKey(this.Document)] = new List<Doc>([...childDocs.splice(childDocs.indexOf(field.Document), 1)]); + this.subfields.splice(this.subfields.indexOf(field), 1); + field instanceof DynamicField && field.dispose(); + }; + + exchangeFields = (newField: Field, oldField: Field) => { + this.subfields.splice(this.subfields.indexOf(oldField), 1, newField); + // this.renderedDoc. + }; + // eslint-disable-next-line @typescript-eslint/no-unused-vars + setContent = (content: string, type: ViewType) => { + return; + }; + getContent = () => { + return ''; + }; + get isContentField(): boolean { + return false; + } addChildToDocument = (doc: Doc) => { Doc.SetContainer(doc, this.Document); - } + }; matches = (): Array<number> => { return []; - } + }; - makeClone = async (subfields: boolean = false): Promise<Field> => { - const newSettings: FieldSettings = this.settings; - if (!subfields) newSettings.subfields = []; - const field: DynamicField = this.initField(newSettings, this.id, this.parent, true) as DynamicField; - //field.Document = (await Doc.MakeClone(this.Document)).clone; - return field + async makeClone(parent?: DynamicField): Promise<Field> { + const field = (await super.makeClone(parent)) as unknown as DynamicField; + field.subfields = await Promise.all(this.subfields.map(async cloneField => await cloneField.makeClone(field))); + field.Document[DocData].data = new List<Doc>(field.subfields.map(subfield => subfield.renderedDoc)); + return field; } - - initializeDocument = (oldOpts?: DocumentOptions): Doc => { - let doc: Doc; - //this.settings.opts.data = undefined; - const renderedSubfields: Doc[] = this.subfields.map(field => field.renderedDoc); - console.log('fields: ', renderedSubfields) - this.settings.opts.title = this.title; - switch (this.settings.viewType) { + initializeDocument = (settings: FieldSettings) => { + const subFields = DynamicField.setupSubfields(settings.subfields, this); + const renderedSubfields = subFields.map(field => field.renderedDoc); + settings.opts.title = settings.title; + switch (settings.viewType) { case ViewType.CAROUSEL3D: - doc = Docs.Create.Carousel3DDocument(renderedSubfields, this.settings.opts); - break; + return { doc: Docs.Create.Carousel3DDocument(renderedSubfields, settings.opts), subFields }; case ViewType.FREEFORM: - doc = Docs.Create.FreeformDocument(renderedSubfields, oldOpts ?? this.settings.opts); - break; + return { doc: Docs.Create.FreeformDocument(renderedSubfields, settings.opts), subFields }; default: - doc = Docs.Create.FreeformDocument(renderedSubfields, this.settings.opts); - break; + return { doc: Docs.Create.FreeformDocument(renderedSubfields, settings.opts), subFields }; } - - this.Document = doc; - return doc; - } - + }; } // export class DynamicField extends Field { @@ -114,4 +186,4 @@ export class DynamicField extends Field { // return doc; // } -// }
\ No newline at end of file +// } diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx index 06b364254..111ad8328 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx @@ -1,92 +1,73 @@ -import { computed, makeAutoObservable, makeObservable, reaction } from "mobx"; -import { Doc, DocListCast } from "../../../../../../fields/Doc"; -import { Col } from "../DocCreatorMenu"; -import { TemplateFieldSize, TemplateFieldType } from "../TemplateBackend"; -import { IDisposer } from "mobx-utils"; -import { DocumentType } from "../../../../../documents/DocumentTypes"; -import { Partial } from "@react-spring/web"; -import { DocumentOptions } from "../../../../../documents/Documents"; -import { List } from "../../../../../../fields/List"; -import { runInThisContext } from "vm"; -import { DocData } from "../../../../../../fields/DocSymbols"; -import { ObjectField } from "../../../../../../fields/ObjectField"; -import { ComputedField } from "../../../../../../fields/ScriptField"; -import { Copy } from "../../../../../../fields/FieldSymbols"; -import { OmitKeys } from "../../../../../../ClientUtils"; +/* eslint-disable @typescript-eslint/no-explicit-any */ +/* eslint-disable no-use-before-define */ +import { computed } from 'mobx'; +import { Doc } from '../../../../../../fields/Doc'; +import { DocData } from '../../../../../../fields/DocSymbols'; +import { Copy } from '../../../../../../fields/FieldSymbols'; +import { ObjectField } from '../../../../../../fields/ObjectField'; +import { ComputedField } from '../../../../../../fields/ScriptField'; +import { DocumentOptions } from '../../../../../documents/Documents'; +import { Col } from '../DocCreatorMenu'; +import { TemplateFieldSize, TemplateFieldType } from '../TemplateBackend'; export abstract class Field { + Document!: Doc; - protected disposers: { [name: string]: IDisposer } = {}; - - protected initField: (settings: FieldSettings, index: number, parent: Field, sameId?: boolean) => Field; + static initField?: (settings: FieldSettings, index: number, parent: any /* DynamicField */ | undefined, sameId?: boolean) => Field = undefined; - protected abstract subfields: Field[]; - - protected abstract Document: Doc; - - protected parent: Field; - protected id: number; - protected settings: FieldSettings; + protected parent?: any; + protected id!: number; + settings!: FieldSettings; protected title: string = ''; - protected dimensions: FieldDimensions; + dimensions!: FieldDimensions; + + constructor() {} - constructor(settings: FieldSettings, id: number, fieldFactory: (settings: FieldSettings, index: number, parent: Field) => Field, parent?: Field) { - this.initField = fieldFactory; - this.parent = parent ? parent : this; + baseinit(doc: Doc, settings: FieldSettings, parent?: any, id: number = 1) { this.id = id; + this.Document = doc; + this.parent = parent; this.settings = settings; this.title = settings.title ?? ''; - this.dimensions = this.getLocalDimensions({tl: this.settings.tl, br: this.settings.br}, this.parent.getDimensions); + this.dimensions = this.getLocalDimensions({ tl: this.settings.tl, br: this.settings.br }, this.parent?.getDimensions); this.applyBasicOpts(this.dimensions, settings); - - // this.disposers.fieldList = reaction( - // () => DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)]), - // docs => { - // console.log('updated') - // this.handleFieldUpdate(docs); - // } - // ); + return this; } - 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; - }; - - setSubFields = (fields: Field[]) => { - this.subfields = fields; + get renderedDoc() { + return this.Document; + } + get getDimensions() { + return this.dimensions; + } + get getID() { + return this.id; + } + get getDescription(): string { + return this.settings.description ?? ''; + } + get viewType(): ViewType { + return this.settings.viewType; } - get renderedDoc(){ return this.Document }; - get getDimensions() { return this.dimensions }; - get getID() { return this.id }; - get getDescription(): string { return this.settings.description ?? '' }; - get viewType(): ViewType { return this.settings.viewType } - - setTitle = (title: string) => { + setTitle = (title: string) => { this.title = title; this.Document.title = title; }; - getTitle = () => { return this.title }; + getTitle = () => { + return this.title; + }; abstract get isContentField(): boolean; abstract setContent(content: string, type: ViewType): void; abstract getContent(): string; - makeClone = async (subfields: boolean = false): Promise<Field> => { - const newSettings: FieldSettings = this.settings; - if (!subfields) newSettings.subfields = []; - newSettings.opts = this.documentOptions; - newSettings.title = this.title; - console.log('settings: ', newSettings.opts) - const field: Field = this.initField(newSettings, this.id, this.parent, true); - //field.Document = (await Doc.MakeClone(this.Document)).clone; - return field + async makeClone(parent?: any /* DynamicField*/): Promise<Field> { + const field = Field.initField!(this.settings, this.id, parent, true); // create a value for this.Document/subfields that we want to ignore + field.Document = (await Doc.MakeClone(this.Document)).clone; + field.title = this.title; + field.dimensions = this.dimensions; + return field; } @computed get documentOptions(): DocumentOptions { @@ -94,94 +75,26 @@ export abstract class Field { Object.assign(opts, this.Document[DocData]); Object.entries(opts).forEach(([key, field]) => { if (field instanceof ObjectField) { - Object.assign(opts, {[key]: ObjectField.MakeCopy(field)}) + Object.assign(opts, { [key]: ObjectField.MakeCopy(field) }); } else if (field instanceof ComputedField) { - Object.assign(opts, {[key]: field[Copy]()}) + Object.assign(opts, { [key]: field[Copy]() }); } - }) - return opts + }); + return opts; } + // eslint-disable-next-line @typescript-eslint/no-unused-vars changeFieldType = (newType: ViewType): Field => { - const newField: Field = this.initField(this.settings, this.id, this.parent, true); - this.parent.exchangeFields(newField, this); + const newField = Field.initField!(this.settings, this.id, this.parent, true); + this.parent?.exchangeFields(newField, this); return newField; - } - - exchangeFields = (newField: Field, oldField: Field) => { - this.subfields.splice(this.subfields.indexOf(oldField), 1, newField); - } - - addFieldFromDoc = (doc: Doc) => { - const par = this.Document; - const settings: FieldSettings = { - tl: [Number(doc._x) / Number(par._width), Number(doc._y) / Number(par._height)], - br: [(Number(doc._x) + Number(doc._width)) / Number(par._width), (Number(doc._y) + Number(doc._height)) / Number(par._height)], - viewType: doc.type === DocumentType.COL ? ViewType.FREEFORM : ViewType.STATIC, - opts: {}, - }; - - const newField: Field = this.initField(settings, this.subfields.length, this); - this.subfields.push(newField); - }; - - addField = (field: Field) => { - if (!this.subfields.includes(field)){ - this.subfields.push(field); - console.log('field added') - // Doc.SetContainer(field.Document, this.Document); - } - } - - removeField = (field: Field) => { - // var childDocs: Doc[] = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)]); - // this.Document[Doc.LayoutFieldKey(this.Document)] = new List<Doc>([...childDocs.splice(childDocs.indexOf(field.Document), 1)]); - this.subfields.splice(this.subfields.indexOf(field), 1); - field.dispose(); }; - setupSubfields = (parent: Field): Field[] => { - return this.settings.subfields?.map((fieldSettings, index) => { - return this.initField(fieldSettings, index, parent); - }) || []; - } - - applyAttributes(field: Field) { - field.setTitle(this.title); - field.initializeDocument(); - field.subfields = this.subfields; - } - - abstract initializeDocument(): void; - - dispose = () => { - Object.values(this.disposers).forEach(disposer => disposer?.()); - } - - handleFieldUpdate = (newDocsList: Doc[]) => { - const currRenderedDocs: Set<Doc> = new Set(); - this.subfields.forEach(field => currRenderedDocs.add(field.Document)); - newDocsList.forEach(doc => { - if (!currRenderedDocs.has(doc)) { - this.addFieldFromDoc(doc); - } - }); - currRenderedDocs.forEach(doc => { - if (!newDocsList.includes(doc)){ - const fields = this.subfields.filter(field => field.Document === doc); - fields.forEach(field => this.removeField(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; + const isMatch: boolean = (this.settings.sizes?.some(size => col.sizes?.includes(size)) && this.settings.types?.includes(col.type)) ?? false; return isMatch; - } + }; const matches: Array<number> = []; @@ -194,9 +107,9 @@ export abstract class Field { return matches; }; - private getLocalDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentDimensions: FieldDimensions): FieldDimensions => { - if (this.parent === this) { - return {width: coords.br[0] - coords.tl[0], height: coords.br[1] - coords.tl[1], coord: {x: coords.tl[0], y: coords.tl[1]}}; + private getLocalDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentDimensions?: FieldDimensions): FieldDimensions => { + if (!parentDimensions) { + return { width: coords.br[0] - coords.tl[0], height: coords.br[1] - coords.tl[1], coord: { x: coords.tl[0], y: coords.tl[1] } }; } const l = (coords.tl[0] * parentDimensions.width) / 2; const t = coords.tl[1] * parentDimensions.height / 2; //prettier-ignore @@ -220,7 +133,6 @@ export abstract class Field { opts._nativeHeight ??= dimensions.height; opts._layout_nativeDimEditable ??= true; }; - } export type FieldSettings = { @@ -247,9 +159,9 @@ export enum ViewType { export type FieldDimensions = { width: number; height: number; - coord: {x: number, y: number}; -} + coord: { x: number; y: number }; +}; export type FieldTree = { - node: {field: Field, subfields: FieldTree[]} -} + node: { field: Field; subfields: FieldTree[] }; +}; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx index eb12bfef9..0582c9ed3 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx @@ -1,25 +1,26 @@ -import { DynamicField } from "./DynamicField"; -import { Field, FieldSettings, ViewType } from "./Field"; -import { TextTemplateField, ImageTemplateField } from "./StaticContentField"; -import { DecorationField } from "./DecorationField"; +import { Field, FieldSettings, ViewType } from './Field'; +import { TextTemplateField, ImageTemplateField } from './StaticContentField'; +import { DecorationField } from './DecorationField'; +import { DynamicField } from './DynamicField'; export class FieldUtils { - - public static initField = (settings: FieldSettings, index: number, parent: Field, sameId: boolean = false): Field => { - const id = sameId ? index : Number(`${parent.getID}${index}`); + public static initField = (settings: FieldSettings, index: number, parent: DynamicField | undefined, sameId: boolean = false): Field => { + const id = sameId ? index : parent ? Number(`${parent.getID}${index}`) : 1; switch (settings.viewType) { - case ViewType.FREEFORM: case ViewType.CAROUSEL3D: - return new DynamicField(settings, id, parent); + case ViewType.FREEFORM: + case ViewType.CAROUSEL3D: + return new DynamicField().init(settings, id, parent); case ViewType.IMG: - return new ImageTemplateField(settings, id, parent); + return new ImageTemplateField().init(settings, id, parent); case ViewType.TEXT: - return new TextTemplateField(settings, id, parent); + return new TextTemplateField().init(settings, id, parent); case ViewType.DEC: - return new DecorationField(settings, id, parent); + return new DecorationField().init(settings, id, parent); } - return new TextTemplateField(settings, id, parent); - } + return new TextTemplateField().init(settings, id, parent); + }; + // eslint-disable-next-line @typescript-eslint/no-unused-vars public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => { const words: string[] = text.split(/\s+/).filter(Boolean); @@ -60,4 +61,4 @@ export class FieldUtils { return currFontSize - 1; }; -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx index 736f144cd..75aea5440 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx @@ -1,45 +1,35 @@ -import { Doc, DocListCast } from "../../../../../../fields/Doc"; -import { Docs, DocumentOptions } from "../../../../../documents/Documents"; -import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field"; -import { RichTextField } from "../../../../../../fields/RichTextField"; -import { DocData } from "../../../../../../fields/DocSymbols"; -import { ImageField } from "../../../../../../fields/URLField"; -import { ViewComponentType } from "@fullcalendar/core"; -import { DynamicField } from "./DynamicField"; -import { FieldUtils } from "./FieldUtils"; -import { random } from "lodash"; +import { DocData } from '../../../../../../fields/DocSymbols'; +import { RichTextField } from '../../../../../../fields/RichTextField'; +import { ImageField } from '../../../../../../fields/URLField'; +import { Docs } from '../../../../../documents/Documents'; +import { Field, FieldSettings, ViewType } from './Field'; +import { FieldUtils } from './FieldUtils'; +import { DynamicField } from './DynamicField'; export abstract class StaticContentField extends Field { - - protected content: string = ''; - protected subfields: Field[]; - - protected Document: Doc; - - protected idd: number; - - constructor(settings: FieldSettings, id: number, parent: Field) { - super(settings, id, FieldUtils.initField, parent); - this.subfields = this.setupSubfields(this); - this.Document = this.initializeDocument(); - this.idd = random(0, 1000); - }; + protected content: string = ''; abstract setContent(content: string, type?: ViewType): void; - getContent = () => { return this.content ?? 'unset'}; - get isContentField(): boolean { return true }; - - abstract initializeDocument(): Doc; + getContent = () => { + return this.content ?? 'unset'; + }; + get isContentField(): boolean { + return true; + } } export class ImageTemplateField extends StaticContentField { + init(settings: FieldSettings, id: number, parent: DynamicField | undefined) { + super.baseinit(this.initializeDocument(settings), settings, parent, id); + return this; + } - setContent = (url: string, type?: ViewType) => { + setContent = (url: string, type?: ViewType) => { this.settings.viewType = type ?? this.settings.viewType; - if (type === ViewType.IMG || type === undefined){ + if (type === ViewType.IMG || type === undefined) { const imgField = new ImageField(url); - this.Document[DocData]['data'] = imgField; + this.Document[DocData].data = imgField; this.content = url; } else { const updatedField = this.changeFieldType(type); @@ -47,19 +37,21 @@ export class ImageTemplateField extends StaticContentField { } }; - initializeDocument(): Doc { - this.settings.opts.title = this.title; - this.settings.opts._layout_fitWidth = false; + initializeDocument = (settings: FieldSettings) => { + settings.opts.title = settings.title; + settings.opts._layout_fitWidth = false; - let doc: Doc = Docs.Create.ImageDocument(this.content, this.settings.opts); - - return doc; + return Docs.Create.ImageDocument('', settings.opts); }; } export class TextTemplateField extends StaticContentField { - - setContent = (text: string, type?: ViewType) => { + init(settings: FieldSettings, id: number, parent?: DynamicField) { + super.baseinit(this.initializeDocument(settings), settings, parent, id); + this.Document.text_fontSize = `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, '', true)}`; + return this; + } + setContent = (text: string, type?: ViewType) => { this.settings.viewType = type ?? this.settings.viewType; if (type === ViewType.TEXT || type === undefined) { @@ -90,15 +82,9 @@ export class TextTemplateField extends StaticContentField { } }; - initializeDocument(): Doc { - const opts = this.settings.opts; - const text = this.content; - - opts.text_fontSize = `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}`; - opts.title = this.title; - - let doc: Doc = Docs.Create.TextDocument(text, opts); - - return doc; + initializeDocument = (settings: FieldSettings) => { + const opts = settings.opts; + opts.title = settings.title; + return Docs.Create.TextDocument('', opts); }; -}
\ 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 b0f8a522c..3c610b36a 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx @@ -1,13 +1,10 @@ -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"; -import { Field, FieldSettings, FieldTree, ViewType } from "./FieldTypes/Field"; -import { TemplateLayouts } from "./TemplateBackend"; +import { makeAutoObservable } from 'mobx'; +import { Col } from './DocCreatorMenu'; +import { DynamicField } from './FieldTypes/DynamicField'; +import { Field, FieldSettings } from './FieldTypes/Field'; +import { TemplateLayouts } from './TemplateBackend'; export class Template { - mainField: DynamicField; private settings: FieldSettings; @@ -17,57 +14,56 @@ export class Template { this.mainField = this.setupMainField(templateInfo); } - get childFields(): Field[] { return this.mainField.getSubfields }; - get allFields(): Field[] { return this.mainField.getAllSubfields }; - get contentFields(): Field[] { return this.allFields.filter(field => field.isContentField) }; - get doc(){ return this.mainField.renderedDoc; }; - get title() { return this.mainField.getTitle() }; + get childFields(): Field[] { + return this.mainField.getSubfields; + } + get allFields(): Field[] { + return this.mainField.getAllSubfields; + } + get contentFields(): Field[] { + return this.allFields.filter(field => field.isContentField); + } + get doc() { + return this.mainField.renderedDoc; + } + get title() { + return this.mainField.getTitle(); + } cleanup = () => { //dispose each subfields disposers, etc. - } + }; cloneBase = async (): Promise<Template> => { - const makeCloneFieldTree = async (field: Field): Promise<Field> => { - const root: Field = await field.makeClone(); - field.getSubfields.forEach(async field => { - const clone: Field = await makeCloneFieldTree(field); - root.addField(clone); - }); - return root; - } - const clone: Template = new Template(TemplateLayouts.BasicSettings); - clone.mainField = await makeCloneFieldTree(this.mainField) as DynamicField; - console.log('last init') - clone.mainField.initializeDocument(); + clone.mainField = (await this.mainField.makeClone(undefined)) as unknown as DynamicField; clone.mainField.renderedDoc._width = this.mainField.renderedDoc._width; clone.mainField.renderedDoc._height = this.mainField.renderedDoc._height; return clone; - } + }; printFieldInfo = () => { this.allFields.forEach(field => { const doc = field.renderedDoc; console.log('title: ', field.getTitle(), ' width: ', doc.width); }); - } + }; getRenderedDoc = () => { return this.doc; - } + }; getFieldByID = (id: number): Field => { return this.allFields.filter(field => field.getID === id)[0]; - } + }; getFieldByTitle = (title: string) => { return this.allFields.filter(field => field.getTitle() === title)[0]; - } + }; setupMainField = (templateInfo: FieldSettings) => { - return new DynamicField(templateInfo, 1); - } + return new DynamicField().init(templateInfo, 1); + }; get descriptionSummary(): string { let summary: string = ''; @@ -85,18 +81,11 @@ export class Template { return summary; } - resetToBase = () => { - this.allFields.forEach(field => { - field.initializeDocument(); - }) - } - isValidTemplate = (cols: Col[]) => { const matches: number[][] = this.getMatches(cols); const maxMatches: number = this.maxMatches(matches); - console.log('title: ', this.mainField.getTitle(), ' matches: ', matches, ' max: ', maxMatches, ' num content fields: ', this.contentFields.length) return maxMatches === this.contentFields.length; - } + }; getMatches = (cols: Col[]): number[][] => { const numFields = this.contentFields.length; @@ -108,11 +97,11 @@ export class Template { .map(() => []); this.contentFields.forEach((field, i) => { - matches[i] = (field.matches(cols)); + matches[i] = field.matches(cols); }); return matches; - } + }; maxMatches = (matches: number[][]) => { if (matches.length === 0) return 0; @@ -147,5 +136,4 @@ export class Template { return count; }; - -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx index e899b49bc..d6d15054b 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.tsx +++ b/src/client/views/nodes/formattedText/DashFieldView.tsx @@ -168,7 +168,7 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi deselectCell={emptyFunction} selectCell={emptyFunction} maxWidth={this._props.hideKey || this._hideKey ? undefined : this._props.tbox._props.PanelWidth} - columnWidth={this._expanded || this._props.nodeSelected() ? () => undefined : returnZero} + columnWidth={returnZero} selectedCells={this.selectedCells} selectedCol={returnZero} fieldKey={this._fieldKey} diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index a76805960..b0732c281 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -236,7 +236,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { undefined, action(() => { Array.from(classesToRestore).forEach(pair => { - // eslint-disable-next-line prefer-destructuring pair[0].className = pair[1]; }); this._dragging = false; |