diff options
Diffstat (limited to 'src')
4 files changed, 73 insertions, 40 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 7491642eb..fcf237e02 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -57,8 +57,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { @observable _renderedDocCollectionPreview: Doc | undefined = undefined; @observable _renderedDocCollection: Doc | undefined = undefined; - @observable _templateDocs: Doc[] = []; - @observable _selectedTemplateDoc: 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 _selectedTemplate: Template | undefined = undefined; @observable _userCreatedColumns: Col[] = []; @observable _selectedCols: { title: string; type: string; desc: string }[] | undefined = []; @@ -69,6 +69,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { @observable _expandedPreview: { icon: ImageField; doc: Doc } | undefined = undefined; @observable _suggestedTemplates: Template[] = []; + @observable _suggestedTemplateDocs @observable _GPTOpt: boolean = false; @observable _userPrompt: string = ''; @observable _callCount: number = 0; @@ -117,7 +118,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { }; @computed get docsToRender() { - return this._selectedTemplateDoc ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : []; + return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : []; } @computed get rowsCount() { @@ -156,6 +157,45 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { return StrListCast(this._dataViz?.layoutDoc._dataViz_axes); } + @computed get selectedTemplateDocs(): {doc: React.JSX.Element, template: Template}[] { + const docs: {doc: Doc, template: Template}[] = this._suggestedTemplates?.map(template => { return {doc: template.mainField.renderedDoc(), template: template}}); + const docPreviews: {doc: Doc, template: Template}[] = docs.map(info => + {return {doc: Docs.Create.FreeformDocument([info.doc], { _height: NumListCast(info.doc._height)[0], _width: NumListCast(info.doc._width)[0], title: ''}), template: info.template} + }); + const renderedComponents = docPreviews.map(info => + {return {doc: <CollectionFreeFormView + Document={info.doc} + docViewPath={returnEmptyDocViewList} + childLayoutTemplate={() => Cast(info.doc.childLayoutTemplate, Doc, null)} + isContentActive={emptyFunction} + isAnyChildContentActive={() => true} + select={emptyFunction} + isSelected={returnFalse} + fieldKey={Doc.LayoutFieldKey(info.doc)} + addDocument={returnFalse} + moveDocument={returnFalse} + removeDocument={returnFalse} + PanelWidth={() => 100} + PanelHeight={() => 100} + ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)} + renderDepth={5} + 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={returnTrue} + xPadding={0} + yPadding={0} + />, template: info.template} + }); + return renderedComponents; + } + @computed get fieldsInfos(): Col[] { const colInfo = this._dataViz?.colsInfo; return this.selectedFields @@ -179,7 +219,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { } @computed get canMakeDocs() { - return this._selectedTemplateDoc !== undefined && this._layout !== undefined; + return this._selectedTemplate !== undefined && this._layout !== undefined; } get bounds(): { t: number; b: number; l: number; r: number } { @@ -239,8 +279,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { docs => this.updateIcons(docs) ); this._disposers.gpt = reaction( - () => this._suggestedTemplates.map(template => template.mainField.renderedDoc()).slice(), - docs => this.updateIcons(docs) + () => this._suggestedTemplates.slice(), + templates => this.updateIcons(templates.map(t => t.doc)) ); //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')}) this._disposers.lightbox = reaction( @@ -263,6 +303,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { } updateIcons = (docs: Doc[]) => { + console.log('called') docs.map(this.getIcon); }; @@ -289,9 +330,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { @action openMenu = () => { - const allTemplates = this._templateDocs.concat(this._suggestedTemplates.map(temp => temp.mainField.renderedDoc())); + const allTemplates = this._templateDocs.concat(this._suggestedTemplates.map(temp => temp.doc)); this._shouldDisplay = true; - this.updateIcons(allTemplates); }; @action @@ -375,11 +415,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { } @action updateSelectedTemplate = (template: Template) => { - if (this._selectedTemplateDoc === template.mainField.renderedDoc()) { - this._selectedTemplateDoc = undefined; + if (this._selectedTemplate === template) { + this._selectedTemplate = undefined; return; } else { - this._selectedTemplateDoc = template.mainField.renderedDoc(); + this._selectedTemplate = template; template.renderUpdates(); this._fullyRenderedDocs = this.createDocsFromTemplate(template) ?? []; this.updateRenderedDocCollection(); @@ -691,14 +731,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { //const renderedTemplates: Template[] = await Promise.all(renderedTemplatePromises); - const renderedTemplates: Doc[] = templates.map(template => template.mainField.renderedDoc()); - - const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; - - renderedTemplates.forEach(doc => { - mainCollection.addDocument(doc); - }); - setTimeout(() => { this.setSuggestedTemplates(templates); this._GPTLoading = false; @@ -734,14 +766,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { return renderedDocs; } - @action setExpandedView = (info: { icon: ImageField; doc: Doc } | undefined) => { - if (info) { - const doc = info.doc; - const wrapper: Doc = Docs.Create.FreeformDocument([info.doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''}); + @action setExpandedView = (doc: Doc | undefined) => { + if (doc) { + const wrapper: Doc = Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''}); const newInfo = {icon: new ImageField(''), doc: wrapper} this._expandedPreview = newInfo; } else { - this._expandedPreview = info; + this._expandedPreview = {icon: new ImageField(''), doc: doc ?? new Doc()}; //!!! get rid of image stuff } }; @@ -786,7 +817,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { <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, () => {this._expandedPreview && this.updateIcons(this._suggestedTemplates.map(template => template.mainField.renderedDoc()).slice()); this.setExpandedView(undefined)})}> + <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => {this._expandedPreview && this.updateIcons(this._suggestedTemplates.map(template => template.doc).slice()); this.setExpandedView(undefined)})}> <FontAwesomeIcon icon="minimize" /> </button> <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._templateDocs.push(this._expandedPreview.doc))}> @@ -805,6 +836,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { //<img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} /> + console.log('rendered') return ( <div className={`docCreatorMenu-templates-view`}> {this._expandedPreview ? ( @@ -824,30 +856,28 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} /> </div> ) : ( - this._suggestedTemplates - ?.map(template => ({ icon: ImageCast(template.mainField.renderedDoc().icon), doc: template.mainField.renderedDoc(), template: template })) - .filter(info => info.icon && info.doc) - .map(info => ( + this.selectedTemplateDocs + .map(({doc, template}) => ( <div className="docCreatorMenu-preview-window" style={{ - border: this._selectedTemplateDoc === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '', - boxShadow: this._selectedTemplateDoc === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '', + 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(info.template)))}> + onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(template)))}> <button className="option-button left" onPointerDown={e => this.setUpButtonClick(e, () => { - this.setExpandedView(info); + this.setExpandedView(template.mainField.renderedDoc()); }) }> <FontAwesomeIcon icon="magnifying-glass" color="white" /> </button> - <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}> + <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(template.mainField.renderedDoc()))}> <FontAwesomeIcon icon="plus" color="white" /> </button> - <img className="docCreatorMenu-preview-image" src={info.icon!.url.href.replace('.png', '_o.png')} /> + {doc} </div> )) )} @@ -1100,7 +1130,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { } layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => { - const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplateDoc; + const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate?.mainField.renderedDoc(); //!!! might cause a slow down if (!doc) return; return ( @@ -1220,9 +1250,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { emptyFunction, undoable(clickEv => { clickEv.stopPropagation(); - if (!this._selectedTemplateDoc) return; + if (!this._selectedTemplate) return; const layout: DataVizTemplateLayout = { - template: this._selectedTemplateDoc, + template: this._selectedTemplate.mainField.renderedDoc(), layout: { type: this._layout.type, xMargin: this._layout.xMargin, yMargin: this._layout.yMargin, repeat: 0 }, columns: this.columnsCount, rows: this.rowsCount, @@ -1247,8 +1277,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { emptyFunction, undoable(clickEv => { clickEv.stopPropagation(); - if (!this._selectedTemplateDoc) return; - const templateInfo: DataVizTemplateInfo = { doc: this._selectedTemplateDoc, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount }; + if (!this._selectedTemplate) return; + const templateInfo: DataVizTemplateInfo = { doc: this._selectedTemplate.mainField.renderedDoc(), layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount }; this._dataViz?.createDocsFromTemplate(templateInfo); }, 'make docs') ) diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx index c0f2f183a..953dbabf6 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx @@ -92,6 +92,7 @@ export class DynamicField implements Field { }; renderedDoc = (): Doc => { + console.log('called') switch (this.settings.viewType) { case ViewType.CAROUSEL3D: const carouselDoc = Docs.Create.Carousel3DDocument(this.subfields.map(field => field.renderedDoc()), { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx index 3e0c8abcf..1320e270d 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx @@ -53,6 +53,7 @@ export class StaticField { } renderedDoc = () => { + console.log('called') return this.renderedDocument; } diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx index 6b981d77f..c96135b4d 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx @@ -18,6 +18,7 @@ export class Template { get childFields(): Field[] { return this.mainField.getSubfields }; get allFields(): Field[] { return this.mainField.getAllSubfields }; get contentFields(): Field[] { return this.allFields.filter(field => field.getViewType === ViewType.STATIC) }; + get doc(){ return this.mainField.renderedDoc(); }; getFieldByID = (id: number): Field => { return this.allFields.filter(field => field.getID === id)[0]; |