From f8fbeb137647374fae523bd8df7fb3a336f56a4c Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 7 Nov 2024 00:25:31 -0500 Subject: refactored preview updating code, hopefully user added templates should be working --- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 136 +++++++++++---------- 1 file changed, 74 insertions(+), 62 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index def4a3354..2e96465fc 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -57,8 +57,10 @@ export class DocCreatorMenu extends ObservableReactComponent { @observable _renderedDocCollectionPreview: Doc | undefined = undefined; @observable _renderedDocCollection: Doc | undefined = undefined; - @observable _templateDocs: Doc[] = []; //!!! used to keep track of all templates, should be refactored to work with actual templates and not docs + @observable _userTemplates: {template: Template, doc: Doc}[] = []; //!!! used to keep track of all templates, should be refactored to work with actual templates and not docs @observable _selectedTemplate: Template | undefined = undefined; + @observable _currEditingTemplate: Template | undefined = undefined; + @observable _userCreatedColumns: Col[] = []; @observable _selectedCols: { title: string; type: string; desc: string }[] | undefined = []; @@ -70,14 +72,11 @@ export class DocCreatorMenu extends ObservableReactComponent { @observable _suggestedTemplates: Template[] = []; @observable _suggestedTemplatePreviews: {doc: Doc, template: Template}[] = []; @observable _GPTOpt: boolean = false; - @observable _userPrompt: string = ''; @observable _callCount: number = 0; @observable _GPTLoading: boolean = false; @observable _pageX: number = 0; @observable _pageY: number = 0; - @observable _indicatorX: number | undefined = undefined; - @observable _indicatorY: number | undefined = undefined; @observable _hoveredLayoutPreview: number | undefined = undefined; @observable _mouseX: number = -1; @@ -109,20 +108,22 @@ export class DocCreatorMenu extends ObservableReactComponent { @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz; }; - @action setTemplateDocs = (docs: Doc[]) => { - this._templateDocs = docs.map(doc => (doc.annotationOn ? DocCast(doc.annotationOn) : doc)); + @action addUserTemplate = (template: Template) => { + this._userTemplates.push({template: template, doc: template.mainField.renderedDoc()}); }; - @action updateTemplatePreviews = (templates: Template[]) => { - templates.forEach(template => template.renderUpdates()); - this._suggestedTemplatePreviews = templates.map(template => { - const doc = template.mainField.renderedDoc(); - //const wrapper: Doc = Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''}); - return {doc: doc, template: template}; - }); + @action removeUserTemplate = (template: Template) => { + this._userTemplates = this._userTemplates.filter(info => info.template === template); + } + @action updateTemplatePreview = (template: Template) => { + template.renderUpdates(); + const preview = {template: template, doc: template.mainField.renderedDoc()}; + const doc = template.mainField.renderedDoc(); + this._suggestedTemplatePreviews.map(t => { return t.template === preview.template ? {doc: doc, template: template} : t }); //prettier-ignore + this._userTemplates = this._userTemplates.map(t => { return t.template === preview.template ? {doc: doc, template: template} : t }); //prettier-ignore }; @action setSuggestedTemplates = (templates: Template[]) => { this._suggestedTemplates = templates; - this.updateTemplatePreviews(templates); + templates.forEach(template => { this._suggestedTemplatePreviews.push({template: template, doc: template.mainField.renderedDoc()}) }); //prettier-ignore }; @computed get docsToRender() { @@ -134,7 +135,7 @@ export class DocCreatorMenu extends ObservableReactComponent { case LayoutType.FREEFORM: return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0; case LayoutType.CAROUSEL3D: - return 1.67; + return 1.8; default: return 1; } @@ -276,7 +277,6 @@ export class DocCreatorMenu extends ObservableReactComponent { @action openMenu = () => { - const allTemplates = this._templateDocs.concat(this._suggestedTemplates.map(temp => temp.doc)); this._shouldDisplay = true; }; @@ -390,10 +390,6 @@ export class DocCreatorMenu extends ObservableReactComponent { Doc.UnBrushDoc(doc); }; - removeTemplate = (doc: Doc) => { - this._templateDocs.splice(this._templateDocs.indexOf(doc), 1); - }; - testTemplate = async () => { //console.log(this.templateManager.templates) @@ -715,7 +711,13 @@ export class DocCreatorMenu extends ObservableReactComponent { } addRenderedCollectionToMainview = () => { - + const collection = this._renderedDocCollection; + if (!collection) return; + const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; + collection.x = this._pageX - this._menuDimensions.width; + collection.y = this._pageY - this._menuDimensions.height; + mainCollection.addDocument(collection); + this.closeMenu(); } @action setExpandedView = (doc: Doc | undefined) => { @@ -759,10 +761,10 @@ export class DocCreatorMenu extends ObservableReactComponent {
{rendered}
- -
@@ -815,7 +817,7 @@ export class DocCreatorMenu extends ObservableReactComponent { }> - {
this.testTemplate()}>
- {/* {this._templateDocs - .map(doc => ({ icon: ImageCast(doc.icon), doc })) - .filter(info => info.icon && info.doc) - .map(info => { - if (renderedTemplates.includes(info.doc)) return undefined; - renderedTemplates.push(info.doc); - return ( -
this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}> - - - -
- ); - })} */} + {this._userTemplates + .map(({template, doc}) => ( +
this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(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} + /> +
+ ))}
@@ -1091,7 +1103,7 @@ export class DocCreatorMenu extends ObservableReactComponent { addDocument={returnFalse} moveDocument={returnFalse} removeDocument={returnFalse} - PanelWidth={() => this._menuDimensions.width - 75} + PanelWidth={() => this._menuDimensions.width - 80} PanelHeight={() => this._menuDimensions.height - 105} ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)} renderDepth={5} @@ -1217,7 +1229,7 @@ export class DocCreatorMenu extends ObservableReactComponent { undoable(clickEv => { clickEv.stopPropagation(); if (!this._selectedTemplate) return; - + this.addRenderedCollectionToMainview(); }, 'make docs') ) }> -- cgit v1.2.3-70-g09d2