From 8195cb97556765a8025de554a44f48d4c15d4c64 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 11 May 2025 03:06:02 -0400
Subject: text and images are no longer messed up

---
 .../DocCreatorMenu/Menu/TemplatePreviewBox.tsx     | 38 ++++++++++++----------
 1 file changed, 20 insertions(+), 18 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
index e94ddfc15..c9f817d2f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
@@ -1,5 +1,5 @@
 import { Colors } from "@dash/components/src";
-import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import { Template } from "../Template";
 import { reaction, runInAction } from "mobx";
 import React from "react";
@@ -15,15 +15,17 @@ import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc";
 import { IDisposer } from "mobx-utils";
 import { ImageField } from "../../../../../../fields/URLField";
 import { ImageCast } from "../../../../../../fields/Types";
+import { observer } from "mobx-react";
 
-export interface TemplatePreviewBoxProps {
+export interface TemplatePreviewBox_props {
     template: Template;
     menu: DocCreatorMenu;
     leftButtonOpts?: [icon: IconProp, func: (...args: any) => void]
     rightButtonOpts?: [icon: IconProp, func: (...args: any) => void]
 }
 
-export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> {
+@observer
+export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBox_props> {
 
     private previewWindow: HTMLDivElement | null = null;
     // private icon: ImageField | undefined = undefined;
@@ -51,11 +53,11 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview
     // }
 
     get doc() {
-        return this.props.template.getRenderedDoc() as Doc;
+        return this._props.template.getRenderedDoc() as Doc;
     }
 
     render() {
-        const template = this.props.template;
+        const template = this._props.template;
 
         return (
             <div
@@ -63,23 +65,23 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview
                 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)` : '',
+                    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}))}
+                onPointerDown={e => this._props.menu.setUpButtonClick(e, () => this._props.menu.updateSelectedTemplate(template))}
                 >
-                    { this.props.leftButtonOpts ? 
+                    { this._props.leftButtonOpts ? 
                     <button
                         className="option-button left"
                         onPointerDown={e =>
-                            this.props.menu.setUpButtonClick(e, () => this.props.leftButtonOpts![1](template))
+                            this._props.menu.setUpButtonClick(e, () => this._props.leftButtonOpts![1](template))
                         }>
-                        <FontAwesomeIcon icon={this.props.leftButtonOpts![0]} color="white" />
+                        <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" />
+                    { 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 }
                     {/* { this.icon ? 
                         <img className="docCreatorMenu-preview-image" src={this.icon.url.href.replace('.png', '_o.png')} /> */}
@@ -89,14 +91,14 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview
                         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)}
+                        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}
+                        addDocTab={this._props.menu._props.addDocTab}
                         pinToPres={() => undefined}
                         childFilters={returnEmptyFilter}
                         childFiltersByRanges={returnEmptyFilter}
-- 
cgit v1.2.3-70-g09d2