From e8938d5d7b889551c1d32bcf5385e369ed67cea5 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 7 Apr 2022 14:42:11 -0400
Subject: fixed iconizing images to not get the wrong height because of
 templates.   fixed cross-fade of images to work without needing doc to be
 selected.

---
 src/client/views/nodes/ImageBox.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 0a4168698..17f95c1cc 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -45,7 +45,6 @@ const uploadIcons = {
 export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() {
     protected _multiTouchDisposer?: import("../../util/InteractionUtils").InteractionUtils.MultiTouchEventDisposer | undefined;
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ImageBox, fieldKey); }
-    private _imgRef: React.RefObject<HTMLImageElement> = React.createRef();
     private _dropDisposer?: DragManager.DragDropDisposer;
     private _disposers: { [name: string]: IReactionDisposer } = {};
     @observable _curSuffix = "";
@@ -78,7 +77,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             { fireImmediately: true, delay: 1000 });
         this._disposers.path = reaction(() => ({ nativeSize: this.nativeSize, width: this.layoutDoc[WidthSym]() }),
             ({ nativeSize, width }) => {
-                if (!this.layoutDoc._height) {
+                if (true || !this.layoutDoc._height) {
                     this.layoutDoc._height = width * nativeSize.nativeHeight / nativeSize.nativeWidth;
                 }
             },
@@ -282,17 +281,18 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
         return <div className="imageBox-cont" key={this.layoutDoc[Id]} ref={this.createDropTarget} onPointerDown={this.marqueeDown}>
             <div className="imageBox-fader" style={{ overflow: Array.from(this.props.docViewPath?.()).slice(-1)[0].fitWidth ? "auto" : undefined }} >
-                <img key="paths" ref={this._imgRef}
+                <img key="paths"
                     src={srcpath}
                     style={{ transform, transformOrigin }}
                     draggable={false}
                     width={nativeWidth} />
-                {fadepath === srcpath ? (null) : <div className="imageBox-fadeBlocker">
-                    <img className="imageBox-fadeaway" key={"fadeaway"} ref={this._imgRef}
-                        src={fadepath}
-                        style={{ transform, transformOrigin }} draggable={false}
-                        width={nativeWidth} />
-                </div>}
+                {fadepath === srcpath ? (null) :
+                    <div className={`imageBox-fadeBlocker${this.props.isHovering?.() ? "-hover" : ""}`}>
+                        <img className="imageBox-fadeaway" key={"fadeaway"}
+                            src={fadepath}
+                            style={{ transform, transformOrigin }} draggable={false}
+                            width={nativeWidth} />
+                    </div>}
             </div>
             {this.considerDownloadIcon}
             {this.considerGooglePhotosLink()}
-- 
cgit v1.2.3-70-g09d2