Handle merge conflicts with jenny work

1 files changed, 43 insertions, 31 deletions

diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 7ff47107e..5a39123b9 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -103,6 +103,14 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
         return true;
     }
+    setScrollPos = (pos: number) => {
+        if (!this._outerRef.current || this._outerRef.current.scrollHeight < pos) {
+            setTimeout(() => this.setScrollPos(pos), 250);
+        } else {
+            this._outerRef.current.scrollTop = pos;
+            this._initialScroll = undefined;
+        }
+    }
     async componentDidMount() {
         this.props.setContentView?.(this); // this tells the DocumentView that this WebBox is the "content" of the document.  this allows the DocumentView to call WebBox relevant methods to configure the UI (eg, show back/forward buttons)
 
@@ -118,15 +126,12 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     this._webPageHasBeenRendered = true;
                     setTimeout(action(() => {
                         this._scrollHeight = Math.max(this.scrollHeight, this._iframe?.contentDocument?.body.scrollHeight || 0);
-                        if (this._initialScroll !== undefined && this._outerRef.current) {
-                            setTimeout(() => {
-                                this._outerRef.current!.scrollTop = this._initialScroll!;
-                                this._initialScroll = undefined;
-                            });
+                        if (this._initialScroll !== undefined) {
+                            this.setScrollPos(this._initialScroll);
                         }
                     }));
-                } else if (!this.props.isContentActive() &&
-                    !this.props.docViewPath().lastElement()?.docView?._pendingDoubleClick && /// don't create a thumbnail when double-clicking to enter lightbox because thumbnail will be empty
+                } else if ((!this.props.isContentActive() || SnappingManager.GetIsDragging()) &&   // update thumnail when unselected AND (no child annotation is active OR we've started dragging the document in which case no additional deselect will occur so this is the only chance to update the thumbnail)
+                    !this.props.docViewPath().lastElement()?.docView?._pendingDoubleClick && // don't create a thumbnail when double-clicking to enter lightbox because thumbnail will be empty
                     LightboxView.LightboxDoc !== this.rootDoc) { // don't create a thumbnail if entering Lightbox from maximize either, since thumb will be empty.
                     const imageBitmap = ImageCast(this.layoutDoc["thumb-frozen"])?.url.href;
                     if (this._iframe && !imageBitmap) {
@@ -144,8 +149,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             nativeWidth * this.props.PanelHeight() / this.props.PanelWidth(),
                             NumCast(this.layoutDoc._scrollTop)
                         ).then
-                            ((dataUrl: any) => {
-                                VideoBox.convertDataUri(dataUrl, this.layoutDoc[Id] + "-thumb" + (new Date()).getTime(), true).then(
+                            ((data_url: any) => {
+                                VideoBox.convertDataUri(data_url, this.layoutDoc[Id] + "-icon" + (new Date()).getTime(), true, this.layoutDoc[Id] + "-icon").then(
                                     returnedfilename => setTimeout(action(() => this.layoutDoc.thumb = new ImageField(returnedfilename)), 500));
                             })
                             .catch(function (error: any) {
@@ -159,7 +164,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             autoHeight => {
                 if (autoHeight) {
                     this.layoutDoc._nativeHeight = NumCast(this.props.Document[this.props.fieldKey + "-nativeHeight"]);
-                    this.props.setHeight(NumCast(this.props.Document[this.props.fieldKey + "-nativeHeight"]) * (this.props.scaling?.() || 1));
+                    this.props.setHeight?.(NumCast(this.props.Document[this.props.fieldKey + "-nativeHeight"]) * (this.props.scaling?.() || 1));
                 }
             });
 
@@ -238,7 +243,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         if (this._sidebarRef?.current?.makeDocUnfiltered(doc)) return 1;
         if (doc !== this.rootDoc && this._outerRef.current) {
             const windowHeight = this.props.PanelHeight() / (this.props.scaling?.() || 1);
-            const scrollTo = Utils.scrollIntoView(NumCast(doc.y), doc[HeightSym](), NumCast(this.layoutDoc._scrollTop), windowHeight, windowHeight * .1);
+            const scrollTo = Utils.scrollIntoView(NumCast(doc.y), doc[HeightSym](), NumCast(this.layoutDoc._scrollTop), windowHeight, windowHeight * .1, this.getScrollHeight());
             if (scrollTo !== undefined) {
                 const focusSpeed = smooth ? 500 : 0;
                 this._initialScroll !== undefined && (this._initialScroll = scrollTo);
@@ -590,10 +595,12 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             this._draggingSidebar = true;
             const localDelta = this.props.ScreenToLocalTransform().scale(this.props.scaling?.() || 1).transformDirection(delta[0], delta[1]);
             const nativeWidth = NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]);
+            const nativeHeight = NumCast(this.layoutDoc[this.fieldKey + "-nativeHeight"]);
             const curNativeWidth = NumCast(this.layoutDoc.nativeWidth, nativeWidth);
             const ratio = (curNativeWidth + (onButton ? 1 : -1) * localDelta[0] / (this.props.scaling?.() || 1)) / nativeWidth;
             if (ratio >= 1) {
                 this.layoutDoc.nativeWidth = nativeWidth * ratio;
+                this.layoutDoc.nativeHeight = nativeHeight * (1 + ratio);
                 onButton && (this.layoutDoc._width = this.layoutDoc[WidthSym]() + localDelta[0]);
                 this.layoutDoc._showSidebar = nativeWidth !== this.layoutDoc._nativeWidth;
             }
@@ -619,9 +626,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
     });
     sidebarWidth = () => !this.SidebarShown ? 0 :
-        this._previewWidth ? WebBox.openSidebarWidth :
-            (NumCast(this.layoutDoc.nativeWidth) - Doc.NativeWidth(this.dataDoc)) * this.props.PanelWidth() /
-            NumCast(this.layoutDoc.nativeWidth)
+        WebBox.sidebarResizerWidth + (this._previewWidth ? WebBox.openSidebarWidth :
+            (NumCast(this.layoutDoc.nativeWidth) - Doc.NativeWidth(this.dataDoc)) * this.props.PanelWidth() / NumCast(this.layoutDoc.nativeWidth))
 
     @computed get content() {
         const interactive = !this.props.docViewPath().lastElement()?.docView?._pendingDoubleClick && this.props.isContentActive() && this.props.pointerEvents !== "none" && CurrentUserUtils.SelectedTool === InkTool.None && !DocumentDecorations.Instance?.Interacting;
@@ -665,7 +671,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     searchStringChanged = (e: React.ChangeEvent<HTMLInputElement>) => this._searchString = e.currentTarget.value;
     showInfo = action((anno: Opt<Doc>) => this._overlayAnnoInfo = anno);
     setPreviewCursor = (func?: (x: number, y: number, drag: boolean, hide: boolean) => void) => this._setPreviewCursor = func;
-    panelWidth = () => this.props.PanelWidth() / (this.props.scaling?.() || 1) - this.sidebarWidth(); // (this.Document.scrollHeight || Doc.NativeHeight(this.Document) || 0);
+    panelWidth = () => this.props.PanelWidth() / (this.props.scaling?.() || 1) - this.sidebarWidth() + WebBox.sidebarResizerWidth; // (this.Document.scrollHeight || Doc.NativeHeight(this.Document) || 0);
     panelHeight = () => this.props.PanelHeight() / (this.props.scaling?.() || 1); // () => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : Doc.NativeWidth(this.Document);
     scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._scrollTop));
     anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick;
@@ -710,10 +716,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return (
             <div className="webBox" ref={this._mainCont}
                 style={{ pointerEvents: this.pointerEvents(), display: this.props.thumbShown?.() ? "none" : undefined }} >
-                <div className="webBox-background" onPointerDown={e => this.sidebarBtnDown(e, false)} />
+                <div className="webBox-background" />
                 <div className="webBox-container" style={{
-                    position: "absolute",
-                    width: `calc(${100 / scale}% - ${(this.sidebarWidth() + WebBox.sidebarResizerWidth) / scale * (this._previewWidth ? scale : 1)}px)`,
+                    width: `calc(${100 / scale}% - ${!this.SidebarShown ? 0 : (this.sidebarWidth() - WebBox.sidebarResizerWidth) / scale * (this._previewWidth ? scale : 1)}px)`,
                     transform: `scale(${scale})`,
                     pointerEvents
                 }} onContextMenu={this.specificContextMenu}>
@@ -737,19 +742,26 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         </div>
                     </div>
                     {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) :
-                        <MarqueeAnnotator rootDoc={this.rootDoc}
-                            iframe={this.isFirefox() ? this.iframeClick : undefined}
-                            iframeScaling={this.isFirefox() ? this.iframeScaling : undefined}
-                            anchorMenuClick={this.anchorMenuClick}
-                            scrollTop={0}
-                            down={this._marqueeing} scaling={returnOne}
-                            addDocument={this.addDocumentWrapper}
-                            docView={this.props.docViewPath().lastElement()}
-                            finishMarquee={this.finishMarquee}
-                            savedAnnotations={this._savedAnnotations}
-                            annotationLayer={this._annotationLayer.current}
-                            mainCont={this._mainCont.current} />}
+                        <div style={{ transformOrigin: "top left", transform: `scale(${1 / scale})` }}>
+                            <MarqueeAnnotator rootDoc={this.rootDoc}
+                                iframe={this.isFirefox() ? this.iframeClick : undefined}
+                                iframeScaling={this.isFirefox() ? this.iframeScaling : undefined}
+                                anchorMenuClick={this.anchorMenuClick}
+                                scrollTop={0}
+                                down={this._marqueeing} scaling={returnOne}
+                                addDocument={this.addDocumentWrapper}
+                                docView={this.props.docViewPath().lastElement()}
+                                finishMarquee={this.finishMarquee}
+                                savedAnnotations={this._savedAnnotations}
+                                annotationLayer={this._annotationLayer.current}
+                                mainCont={this._mainCont.current} /> </div>}
                 </div >
+                <div className="webBox-sideResizer" style={{
+                    display: this.SidebarShown ? undefined : "none",
+                    width: WebBox.sidebarResizerWidth,
+                    left: `calc(100% - ${this.sidebarWidth() - WebBox.sidebarResizerWidth}px)`
+                }}
+                    onPointerDown={e => this.sidebarBtnDown(e, false)} />
                 <SidebarAnnos ref={this._sidebarRef}
                     {...this.props}
                     whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
@@ -758,7 +770,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     layoutDoc={this.layoutDoc}
                     dataDoc={this.dataDoc}
                     setHeight={emptyFunction}
-                    nativeWidth={this._previewNativeWidth ?? NumCast(this.layoutDoc._nativeWidth)}
+                    nativeWidth={this._previewNativeWidth ?? NumCast(this.layoutDoc._nativeWidth) - WebBox.sidebarResizerWidth / (this.props.scaling?.() || 1)}
                     showSidebar={this.SidebarShown}
                     sidebarAddDocument={this.sidebarAddDocument}
                     moveDocument={this.moveDocument}