From e39d157b06f815644f7cbd87179307efd9524623 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 5 Feb 2021 14:27:20 -0500
Subject: fixed lightbox frame sizing.

---
 src/client/views/LightboxView.tsx | 21 +++++++++++----------
 src/client/views/MainView.tsx     | 11 ++++++++---
 2 files changed, 19 insertions(+), 13 deletions(-)

(limited to 'src')

diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 263117437..a1047fafc 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -13,7 +13,7 @@ import { DefaultStyleProvider } from './StyleProvider';
 interface LightboxViewProps {
     PanelWidth: number;
     PanelHeight: number;
-    minBorder: number[];
+    maxBorder: number[];
 }
 
 @observer
@@ -23,14 +23,14 @@ export class LightboxView extends React.Component<LightboxViewProps> {
     public static LightboxFuture: (Opt<Doc>)[] = [];
     public static LightboxDocView = React.createRef<DocumentView>();
     public LightboxDocView = React.createRef<DocumentView>();
-    lightboxWidth = () => this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.minBorder[0]) * 2;
-    lightboxHeight = () => this.props.PanelHeight - Math.min(this.props.PanelHeight / 4, this.props.minBorder[1]) * 2;
-    lightboxScreenToLocal = () => new Transform(-Math.min(this.props.PanelWidth / 4, this.props.minBorder[0]), -Math.min(this.props.PanelHeight / 4, this.props.minBorder[1]), 1);
+    lightboxWidth = () => this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]) * 2;
+    lightboxHeight = () => this.props.PanelHeight - Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]) * 2;
+    lightboxScreenToLocal = () => new Transform(-Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), -Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]), 1);
     navBtn = (left: Opt<number>, icon: string, display: () => string, click: (e: React.MouseEvent) => void) => {
         return <div className="lightboxView-navBtn-frame" style={{
             display: display(),
             left,
-            width: Math.min(this.props.PanelWidth / 4, this.props.minBorder[0])
+            width: Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0])
         }}>
             <div className="lightboxView-navBtn" style={{ top: this.props.PanelHeight / 2 - 12.50 }}
                 onClick={click}>
@@ -40,6 +40,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
     }
 
     render() {
+        console.log("ph = " + this.props.PanelHeight);
         if (LightboxView.LightboxHistory.lastElement() !== LightboxView.LightboxDoc) LightboxView.LightboxHistory.push(LightboxView.LightboxDoc);
         let downx = 0, downy = 0;
         return !LightboxView.LightboxDoc ? (null) :
@@ -53,10 +54,10 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                     }
                 })}  >
                 <div className="lightboxView-contents" style={{
-                    left: Math.min(this.props.PanelWidth / 4, this.props.minBorder[0]),
-                    top: Math.min(this.props.PanelHeight / 4, this.props.minBorder[1]),
-                    width: this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.minBorder[0]) * 2,
-                    height: this.props.PanelHeight - Math.min(this.props.PanelHeight / 4, this.props.minBorder[1]) * 2
+                    left: Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]),
+                    top: Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]),
+                    width: this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]) * 2,
+                    height: this.props.PanelHeight - Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]) * 2
                 }}>
                     <DocumentView ref={this.LightboxDocView}
                         Document={LightboxView.LightboxDoc}
@@ -91,7 +92,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                         if (LightboxView.LightboxHistory.lastElement() !== LightboxView.LightboxFuture.lastElement()) LightboxView.LightboxFuture.push(popped);
                         LightboxView.LightboxDoc = LightboxView.LightboxHistory.lastElement();
                     }))}
-                {this.navBtn(this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.minBorder[0]), "chevron-right",
+                {this.navBtn(this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), "chevron-right",
                     () => LightboxView.LightboxDoc && LightboxView.LightboxFuture.length ? "" : "none",
                     action(e => {
                         e.stopPropagation();
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index b3f5cc54f..44aa41f85 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -67,8 +67,9 @@ const _global = (window /* browser */ || global /* node */) as any;
 export class MainView extends React.Component {
     public static Instance: MainView;
     private _docBtnRef = React.createRef<HTMLDivElement>();
-    private _mainViewRef = React.createRef<HTMLDivElement>();
     @observable public LastButton: Opt<Doc>;
+    @observable private _windowWidth: number = 0;
+    @observable private _windowHeight: number = 0;
     @observable private _panelWidth: number = 0;
     @observable private _panelHeight: number = 0;
     @observable private _panelContent: string = "none";
@@ -609,7 +610,11 @@ export class MainView extends React.Component {
     }
 
     render() {
-        return (<div className={"mainView-container" + (this.darkScheme ? "-dark" : "")} onScroll={() => ((ele) => ele.scrollTop = ele.scrollLeft = 0)(document.getElementById("root")!)} ref={this._mainViewRef}>
+        return (<div className={"mainView-container" + (this.darkScheme ? "-dark" : "")}
+            onScroll={() => ((ele) => ele.scrollTop = ele.scrollLeft = 0)(document.getElementById("root")!)}
+            ref={r => {
+                r && new _global.ResizeObserver(action(() => { this._windowWidth = r.getBoundingClientRect().width; this._windowHeight = r.getBoundingClientRect().height; })).observe(r);
+            }}>
             {this.inkResources}
             <DictationOverlay />
             <SharingManager />
@@ -636,7 +641,7 @@ export class MainView extends React.Component {
             <TimelineMenu />
             {this.snapLines}
             <div className="mainView-webRef" ref={this.makeWebRef} />
-            <LightboxView PanelWidth={this._panelWidth} PanelHeight={this._panelHeight} minBorder={[200, 100]} />
+            <LightboxView PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 100]} />
         </div>);
     }
 
-- 
cgit v1.2.3-70-g09d2