From 8320813a7d998c853d4b21b74749ebe417717675 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 5 Mar 2021 13:48:01 -0500
Subject: fixed linked doc preview of images

---
 src/client/views/nodes/LinkDocPreview.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 716810536..a3c149ffc 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -109,8 +109,20 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
             this.props.docProps?.addDocTab(Docs.Create.WebDocument(this.props.hrefs[0], { title: this.props.hrefs[0], _width: 200, _height: 400, useCors: true }), "add:right");
         }
     }
-    width = () => Math.min(225, NumCast(this._targetDoc?.[WidthSym](), 225));
-    height = () => Math.min(225, NumCast(this._targetDoc?.[HeightSym](), 225));
+    width = () => {
+        if (!this._targetDoc) return 225;
+        if (this._targetDoc[WidthSym]() < this._targetDoc?.[HeightSym]()) {
+            return Math.min(225, this._targetDoc[HeightSym]()) * this._targetDoc[WidthSym]() / this._targetDoc[HeightSym]();
+        }
+        return Math.min(225, NumCast(this._targetDoc?.[WidthSym](), 225));
+    }
+    height = () => {
+        if (!this._targetDoc) return 225;
+        if (this._targetDoc[WidthSym]() > this._targetDoc?.[HeightSym]()) {
+            return Math.min(225, this._targetDoc[WidthSym]()) * this._targetDoc[HeightSym]() / this._targetDoc[WidthSym]();
+        }
+        return Math.min(225, NumCast(this._targetDoc?.[HeightSym](), 225));
+    }
     @computed get previewHeader() {
         return !this._linkDoc || !this._targetDoc || !this._linkSrc ? (null) :
             <div className="linkDocPreview-info" ref={this._infoRef}>
@@ -177,8 +189,9 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
     }
 
     render() {
+        const borders = 16; // 8px border on each side
         return <div className="linkDocPreview" onPointerDown={this.followLink}
-            style={{ left: this.props.location[0], top: this.props.location[1], width: this.width() + 16 }}>
+            style={{ left: this.props.location[0], top: this.props.location[1], width: this.width() + borders, height: this.height() + borders }}>
             {this.docPreview}
         </div>;
     }
-- 
cgit v1.2.3-70-g09d2