docpreviews resize (mostly) appropriately

1 files changed, 28 insertions, 10 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
index c5c5f5cfd..08a48ccb9 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, observable, runInAction } from "mobx";
+import { action, observable, reaction, runInAction } from "mobx";
 import React from "react";
-import { returnFalse, returnEmptyFilter } from "../../../../../../ClientUtils";
+import { returnFalse, returnEmptyFilter, returnTrue } from "../../../../../../ClientUtils";
 import { emptyFunction } from "../../../../../../Utils";
 import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc";
 import { DefaultStyleProvider } from "../../../../StyleProvider";
@@ -13,6 +13,7 @@ import { Transform } from "../../../../../util/Transform";
 import { Template } from "../Template";
 import { TemplateMenuAIUtils } from "../Backend/TemplateMenuAIUtils";
 import { ObservableReactComponent } from "../../../../ObservableReactComponent";
+import { IDisposer } from "mobx-utils";
 
 interface TemplateEditingWindowProps {
     menu: DocCreatorMenu;
@@ -25,12 +26,26 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
 
     private fireflyPrompt: string = 'Use this template to generate an empty baseball card template.';
     private previewWindow: HTMLDivElement | null = null;
+    private _disposers: { [name: string]: IDisposer } = {};
 
     @observable _variationsTabOpen: boolean = false;
     @observable _variations: Doc[] = [];
 
+    componentDidMount(): void {
+        this._disposers.windowDimensions = reaction(() => 
+            this._props.menu._resizing, 
+            () => { this.forceUpdate() }, 
+            { fireImmediately: true }
+            );
+    }
+
+    componentWillUnmount() {
+        Object.values(this._disposers).forEach(disposer => disposer?.());
+    }
+
     setContainerRef: React.LegacyRef<HTMLDivElement> = (node) => {
         this.previewWindow = node;
+        this.forceUpdate();
     }
 
     @action setVariationTab = (open: boolean) => {
@@ -78,15 +93,15 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
 
         return (
             <div className="docCreatorMenu-expanded-template-preview" ref={this.setContainerRef}>
-                <DocumentView
+                {this.previewWindow ? <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)}
+                    PanelWidth={() => this.previewWindow?.clientWidth ?? 500}
+                    PanelHeight={() => this.previewWindow?.clientHeight ?? 500}
+                    ScreenToLocalTransform={() => new Transform(/*-this._props.menu._pageX - 5, -this._props.menu._pageY - 35*/0, 0, 1)}
                     renderDepth={5}
                     whenChildContentsActiveChanged={emptyFunction}
                     focus={emptyFunction}
@@ -98,18 +113,19 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                     searchFilterDocs={returnEmptyDoclist}
                     fitContentsToBox={returnFalse}
                     fitWidth={returnFalse}
-                />
+                /> : null}
             </div>
         )
     }
 
     render() {
         return (
-            <div className={`docCreatorMenu-templates-view`}>
+            <div className='docCreatorMenu-templates-view'>
                 <div className="docCreatorMenu-expanded-template-preview">
-                    <div className="top-panel" />
+                    <div className="top-panel"/>
                     {this.renderedDocPreview}
-                    {this.fireflyVariationsTab}
+                    <div className="docCreatorMenu-option-divider full"/>
+                    {this._variationsTabOpen ? this.fireflyVariationsTab : null}
                     <div className="right-buttons-panel">
                         <button
                             className="docCreatorMenu-menu-button section-reveal-options top-right"
@@ -125,6 +141,8 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                         </button>
                         <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this._props.setupButtonClick(e, async () => {
                                 this.setVariationTab(!this._variationsTabOpen);
+                                this.forceUpdate();
+                                console.log('window: ', this.previewWindow)
                             })}>
                             <FontAwesomeIcon icon="lightbulb" />
                         </button>