1 files changed, 47 insertions, 37 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
index 4759a4158..e63be8f9c 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
@@ -1,7 +1,7 @@
 import { Colors } from "@dash/components/src";
 import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
 import { Template } from "../Template";
-import { runInAction } from "mobx";
+import { reaction, runInAction } from "mobx";
 import React from "react";
 import { ObservableReactComponent } from "../../../../ObservableReactComponent";
 import { DocCreatorMenu } from "../DocCreatorMenu";
@@ -12,6 +12,7 @@ import { returnEmptyFilter, returnFalse } from "../../../../../../ClientUtils";
 import { Transform } from "../../../../../util/Transform";
 import { DefaultStyleProvider } from "../../../../StyleProvider";
 import { returnEmptyDoclist } from "../../../../../../fields/Doc";
+import { IDisposer } from "mobx-utils";
 
 export interface TemplatePreviewBoxProps {
     template: Template;
@@ -22,6 +23,13 @@ export interface TemplatePreviewBoxProps {
 
 export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> {
 
+    private previewWindow: HTMLDivElement | null = null;
+
+    setContainerRef: React.LegacyRef<HTMLDivElement> = (node) => {
+        this.previewWindow = node;
+        this.forceUpdate();
+    }
+
     render() {
         const template = this.props.template;
 
@@ -29,46 +37,48 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview
             <div
                 key={template.title}
                 className="docCreatorMenu-preview-window"
+                ref={this.setContainerRef}
                 style={{
                     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(() => {console.log('setting'); this.props.menu._selectedTemplate = template}))}>
-                { this.props.leftButtonOpts ? 
-                <button
-                    className="option-button left"
-                    onPointerDown={e =>
-                        this.props.menu.setUpButtonClick(e, () => this.props.leftButtonOpts![1](template))
-                    }>
-                    <FontAwesomeIcon icon={this.props.leftButtonOpts![0]} color="white" />
-                </button> : null
-                }
-                { this.props.rightButtonOpts ? 
-                <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 }
-                <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}
-                />
+                onPointerDown={e => this.props.menu.setUpButtonClick(e, () => runInAction(() => {console.log('setting'); this.props.menu._selectedTemplate = template}))}
+                >
+                    { this.props.leftButtonOpts ? 
+                    <button
+                        className="option-button left"
+                        onPointerDown={e =>
+                            this.props.menu.setUpButtonClick(e, () => this.props.leftButtonOpts![1](template))
+                        }>
+                        <FontAwesomeIcon icon={this.props.leftButtonOpts![0]} color="white" />
+                    </button> : null
+                    }
+                    { this.props.rightButtonOpts ? 
+                    <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 }
+                    <DocumentView
+                        Document={this.props.template.getRenderedDoc()!} //!!! bad
+                        isContentActive={emptyFunction} // !!! should be return false
+                        addDocument={returnFalse}
+                        moveDocument={returnFalse}
+                        removeDocument={returnFalse}
+                        PanelWidth={() => this.previewWindow?.clientWidth ?? this.props.menu._menuDimensions.height * .3}
+                        PanelHeight={() => this.previewWindow?.clientHeight ?? 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>
         )
     }