bunch of changes, everything still broken

1 files changed, 134 insertions, 0 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