refactored preview updating code, hopefully user added templates should be working

1 files changed, 74 insertions, 62 deletions

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<FieldViewProps> {
     @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<FieldViewProps> {
     @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<FieldViewProps> {
     @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<FieldViewProps> {
             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<FieldViewProps> {
 
     @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<FieldViewProps> {
         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<FieldViewProps> {
     }
 
     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<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.updateTemplatePreviews(this._suggestedTemplates); this.setExpandedView(undefined)})}>
+                    <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => {this._currEditingTemplate && this.updateTemplatePreview(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._expandedPreview && this._templateDocs.push(this._expandedPreview))}>
+                    <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._currEditingTemplate && this.addUserTemplate(this._currEditingTemplate))}>
                         <FontAwesomeIcon icon="plus" color="white" />
                     </button>
                 </div>
@@ -815,7 +817,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                                     }>
                                                     <FontAwesomeIcon icon="magnifying-glass" color="white" />
                                                 </button>
-                                                <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(template.mainField.renderedDoc()))}>
+                                                <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.addUserTemplate(template))}>
                                                     <FontAwesomeIcon icon="plus" color="white" />
                                                 </button>
                                                 <DocumentView
@@ -866,42 +868,52 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 <div className="docCreatorMenu-preview-window empty" onPointerDown={e => this.testTemplate()}>
                                     <FontAwesomeIcon icon="plus" color="rgb(160, 160, 160)" />
                                 </div>
-                                {/* {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 (
-                                            <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)` : '',
-                                                }}
-                                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
-                                                <button
-                                                    className="option-button left"
-                                                    onPointerDown={e =>
-                                                        this.setUpButtonClick(e, () => {
-                                                            this.editTemplate(info.doc);
-                                                        })
-                                                    }>
-                                                    <FontAwesomeIcon icon="pencil" color="black" />
-                                                </button>
-                                                <button
-                                                    className="option-button right"
-                                                    onPointerDown={e =>
-                                                        this.setUpButtonClick(e, () => {
-                                                            this.removeTemplate(info.doc);
-                                                        })
-                                                    }>
-                                                    <FontAwesomeIcon icon="trash" color="black" />
-                                                </button>
-                                                <img className="docCreatorMenu-preview-image" src={info.icon!.url.href.replace('.png', '_o.png')} />
-                                            </div>
-                                        );
-                                    })} */}
+                                {this._userTemplates
+                                    .map(({template, doc}) => (
+                                        <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.mainField.renderedDoc());
+                                                    })
+                                                }>
+                                                <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>
+                                            <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}
+                                                />
+                                        </div>
+                                    ))}
                             </div>
                         </div>
                     </div>
@@ -1091,7 +1103,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     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<FieldViewProps> {
                                 undoable(clickEv => {
                                     clickEv.stopPropagation();
                                     if (!this._selectedTemplate) return;
-                                    
+                                    this.addRenderedCollectionToMainview();
                                 }, 'make docs')
                             )
                         }>