bunch of changes, everything still broken

3 files changed, 169 insertions, 29 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
new file mode 100644
index 000000000..fe7822087
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
@@ -0,0 +1,134 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { action, observable, runInAction } from "mobx";
+import React from "react";
+import { returnFalse, returnEmptyFilter } from "../../../../../../ClientUtils";
+import { emptyFunction } from "../../../../../../Utils";
+import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc";
+import { DefaultStyleProvider } from "../../../../StyleProvider";
+import { DocumentView, DocumentViewInternal } from "../../../DocumentView";
+import { DocCreatorMenu } from "../DocCreatorMenu";
+import { TemplateSidescrollView } from "./TemplatesSidescrollDisplay";
+import { observer } from "mobx-react";
+import { Transform } from "../../../../../util/Transform";
+import { Template } from "../Template";
+import { TemplateMenuAIUtils } from "../Backend/TemplateMenuAIUtils";
+import { ObservableReactComponent } from "../../../../ObservableReactComponent";
+
+interface TemplateEditingWindowProps {
+    menu: DocCreatorMenu;
+    template: Template;
+    setupButtonClick: (e: React.PointerEvent, func: () => void) => void;
+}
+
+@observer
+export class TemplateEditingWindow extends ObservableReactComponent<TemplateEditingWindowProps> {
+
+    private fireflyPrompt: string = 'Use this template to generate an empty baseball card template.';
+    private previewWindow: HTMLDivElement | null = null;
+
+    @observable _variationsTabOpen: boolean = false;
+    @observable _variations: Doc[] = [];
+
+    setContainerRef: React.LegacyRef<HTMLDivElement> = (node) => {
+        this.previewWindow = node;
+    }
+
+    @action setVariationTab = (open: boolean) => {
+        this._variationsTabOpen = open;
+        if (this.previewWindow && open) {
+            this.previewWindow.style.height = String(Number(this.previewWindow.clientHeight) * .6);
+        } else if (this.previewWindow && !open) {
+            this.previewWindow.style.height = String(Number(this.previewWindow.clientHeight) * 5/3);
+        }
+    }
+
+    get fireflyVariationsTab() {
+
+        return (
+            <>
+                <TemplateSidescrollView
+                    menu={this._props.menu}
+                    title={'Generate Variations'}
+                    templates={[]}
+                    setupButtonClick={this._props.setupButtonClick}
+                />
+                <div className="docCreatorMenu-section">
+                    <div className="docCreatorMenu-variation-prompt-input">
+                        <textarea
+                            className="docCreatorMenu-variation-prompt-input-textbox"
+                            onChange={e => this.fireflyPrompt = e.target.value}
+                            defaultValue={''}
+                            placeholder={'Enter a custom prompt here (optional)'}
+                        />
+                        <button className="docCreatorMenu-menu-button" 
+                            onPointerDown={e => this._props.setupButtonClick(e, async () => {
+                                this._variations = await this._props.menu.generateVariations(this._props.template.getRenderedDoc()!, this.fireflyPrompt);
+                            })
+                        }>
+                            <FontAwesomeIcon icon="arrows-rotate" />
+                        </button>
+                    </div>
+                </div>
+            </>
+        )
+    }
+   
+    get renderedDocPreview(){
+        const doc: Doc = this._props.template.getRenderedDoc() as unknown as Doc;
+
+        return (
+            <div className="docCreatorMenu-expanded-template-preview" ref={this.setContainerRef}>
+                <DocumentView
+                    Document={doc}
+                    isContentActive={emptyFunction}
+                    addDocument={returnFalse}
+                    moveDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    PanelWidth={() => this.previewWindow?.clientWidth ?? 1000 - 10}
+                    PanelHeight={() => this.previewWindow?.clientHeight ?? 1000 - 60}
+                    ScreenToLocalTransform={() => new Transform(-this._props.menu._pageX - 5, -this._props.menu._pageY - 35, 1)}
+                    renderDepth={5}
+                    whenChildContentsActiveChanged={emptyFunction}
+                    focus={emptyFunction}
+                    styleProvider={DefaultStyleProvider}
+                    addDocTab={DocumentViewInternal.addDocTabFunc}
+                    pinToPres={() => undefined}
+                    childFilters={returnEmptyFilter}
+                    childFiltersByRanges={returnEmptyFilter}
+                    searchFilterDocs={returnEmptyDoclist}
+                    fitContentsToBox={returnFalse}
+                    fitWidth={returnFalse}
+                />
+            </div>
+        )
+    }
+
+    render() {
+        return (
+            <div className="docCreatorMenu-expanded-template-preview">
+                <div className="top-panel" />
+                {this.renderedDocPreview}
+                {this.fireflyVariationsTab}
+                <div className="right-buttons-panel">
+                    <button
+                        className="docCreatorMenu-menu-button section-reveal-options top-right"
+                        onPointerDown={e =>
+                            this._props.setupButtonClick(e, () => {
+                                if (this._props.template === this._props.menu._selectedTemplate) {
+                                    this._props.menu.updateRenderedPreviewCollection(this._props.template);
+                                }
+                                this._props.menu.setExpandedView(undefined);
+                            })
+                        }>
+                        <FontAwesomeIcon icon="minimize" />
+                    </button>
+                    <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this._props.setupButtonClick(e, async () => {
+                            this.setVariationTab(!this._variationsTabOpen);
+                         })}>
+                         <FontAwesomeIcon icon="lightbulb" />
+                    </button>
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
index e40192fa8..4759a4158 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
@@ -6,6 +6,12 @@ import React from "react";
 import { ObservableReactComponent } from "../../../../ObservableReactComponent";
 import { DocCreatorMenu } from "../DocCreatorMenu";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { DocumentView } from "../../../DocumentView";
+import { emptyFunction } from "../../../../../../Utils";
+import { returnEmptyFilter, returnFalse } from "../../../../../../ClientUtils";
+import { Transform } from "../../../../../util/Transform";
+import { DefaultStyleProvider } from "../../../../StyleProvider";
+import { returnEmptyDoclist } from "../../../../../../fields/Doc";
 
 export interface TemplatePreviewBoxProps {
     template: Template;
@@ -27,7 +33,7 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview
                     border: this.props.menu._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
                     boxShadow: this.props.menu._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
                 }}
-                onPointerDown={e => this.props.menu.setUpButtonClick(e, () => runInAction(() => this.props.menu._selectedTemplate = template))}>
+                onPointerDown={e => this.props.menu.setUpButtonClick(e, () => runInAction(() => {console.log('setting'); this.props.menu._selectedTemplate = template}))}>
                 { this.props.leftButtonOpts ? 
                 <button
                     className="option-button left"
@@ -41,7 +47,28 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview
                 <button className="option-button right" onPointerDown={e => this.props.menu.setUpButtonClick(e, () => this.props.rightButtonOpts![1](template))}>
                     <FontAwesomeIcon icon={this.props.rightButtonOpts![0]} color="white" />
                 </button> : null }
-                {this.props.menu.docPreview(template.getRenderedDoc())}
+                <DocumentView
+                    Document={this.props.template.getRenderedDoc()!} //!!! bad
+                    isContentActive={emptyFunction} // !!! should be return false
+                    addDocument={returnFalse}
+                    moveDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    PanelWidth={() => this.props.menu._menuDimensions.height * .3}
+                    PanelHeight={() => this.props.menu._menuDimensions.height * .3}
+                    ScreenToLocalTransform={() => new Transform(-this.props.menu._pageX - 5, -this.props.menu._pageY - 35, 1)}
+                    renderDepth={1}
+                    whenChildContentsActiveChanged={emptyFunction}
+                    focus={emptyFunction}
+                    styleProvider={DefaultStyleProvider}
+                    addDocTab={this.props.menu._props.addDocTab}
+                    pinToPres={() => undefined}
+                    childFilters={returnEmptyFilter}
+                    childFiltersByRanges={returnEmptyFilter}
+                    searchFilterDocs={returnEmptyDoclist}
+                    fitContentsToBox={returnFalse}
+                    fitWidth={returnFalse}
+                    hideDecorations={true}
+                />
             </div>
         )
     }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/SuggestedTemplatesWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx
index 517a998d9..5035227d1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/SuggestedTemplatesWindow.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx
@@ -13,20 +13,17 @@ import { TemplatePreviewBox } from "./TemplatePreviewBox";
 
 export interface SuggestedTemplatesProps {
     menu: DocCreatorMenu;
+    templates: Template[];
+    previewBoxLeftButtonOpts?: [string, () => any];
+    previewBoxRightButtonOpts?: [string, () => any];
     setupButtonClick: (e: React.PointerEvent, func: () => void) => void;
 }
 
 @observer
-export class SuggestedTemplatesWindow extends ObservableReactComponent<SuggestedTemplatesProps> {
+export class TemplateSidescrollView extends ObservableReactComponent<SuggestedTemplatesProps> {
 
     @observable _GPTLoading: boolean = false;
 
-    @observable _suggestedTemplates: Template[] = [];
-    @observable _userTemplates: Template[] = [];
-
-    @action addUserTemplate = (template: Template) => { this._userTemplates.push(template) };
-    @action removeUserTemplate = (template: Template) => { this._userTemplates.splice(this._userTemplates.indexOf(template), 1) };
-
     render() {
         return (
             <div className='docCreatorMenu-templates-view'>
@@ -39,12 +36,12 @@ export class SuggestedTemplatesWindow extends ObservableReactComponent<Suggested
                             </button>
                         </div>
                         <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this.props.menu._menuDimensions.width > 400 ? 'center' : '' }}>
-                            {this._suggestedTemplates.map(template => (
+                            {this.props.templates.map(template => (
                                 <TemplatePreviewBox 
                                 template={template} 
                                 menu={this.props.menu} 
                                 leftButtonOpts={["magnifying-glass", (template: Template) => { this.props.menu.setExpandedView(template); this.forceUpdate(); }]}
-                                rightButtonOpts={["plus", (template: Template) => this.addUserTemplate(template)]}
+                                rightButtonOpts={["plus", (template: Template) => {}]}
                                 />
                             ))}
                         </div>
@@ -56,24 +53,6 @@ export class SuggestedTemplatesWindow extends ObservableReactComponent<Suggested
                             </div>
                         </div>
                     </div>
-                    <hr className="docCreatorMenu-option-divider full no-margin" />
-                    <div className="docCreatorMenu-section">
-                        <div className="docCreatorMenu-section-topbar">
-                            <div className="docCreatorMenu-section-title">Your Templates</div>
-                            <button className="docCreatorMenu-menu-button section-reveal-options">
-                                <FontAwesomeIcon icon="gear" />
-                            </button>
-                        </div>
-                        <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this.props.menu._menuDimensions.width > 400 ? 'center' : '' }}>
-                            {this._userTemplates.map(template => (
-                                <TemplatePreviewBox 
-                                template={template} 
-                                menu={this.props.menu} 
-                                
-                                />
-                            ))}
-                        </div>
-                    </div>
                 </div>
             </div>
         );