merging

1 files changed, 110 insertions, 152 deletions

diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 4b7f0bf77..ef0df25b6 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -24,12 +24,12 @@ import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
 import { ViewBoxAnnotatableComponent } from "../DocComponent";
 import { DocumentDecorations } from "../DocumentDecorations";
+import { MarqueeAnnotator } from "../MarqueeAnnotator";
 import { Annotation } from "../pdf/Annotation";
-import { AnchorMenu } from "../pdf/AnchorMenu";
+import { DocAfterFocusFunc } from "./DocumentView";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./WebBox.scss";
 import React = require("react");
-import { MarqueeAnnotator } from "../MarqueeAnnotator";
 const htmlToText = require("html-to-text");
 
 type WebDocument = makeInterface<[typeof documentSchema]>;
@@ -37,25 +37,23 @@ const WebDocument = makeInterface(documentSchema);
 
 @observer
 export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocument>(WebDocument) {
-    private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(WebBox, fieldKey); }
     private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
-    private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean) => void);
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _longPressSecondsHack?: NodeJS.Timeout;
     private _outerRef = React.createRef<HTMLDivElement>();
+    private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
     private _iframeIndicatorRef = React.createRef<HTMLDivElement>();
     private _iframeDragRef = React.createRef<HTMLDivElement>();
+    private _ignoreScroll = false;
+    private _initialScroll: Opt<number>;
     @observable private _marqueeing: number[] | undefined;
     @observable private _url: string = "hello";
     @observable private _pressX: number = 0;
     @observable private _pressY: number = 0;
     @observable private _iframe: HTMLIFrameElement | null = null;
     @observable private _savedAnnotations: Dictionary<number, HTMLDivElement[]> = new Dictionary<number, HTMLDivElement[]>();
-
     get scrollHeight() { return this.webpage?.scrollHeight || 1000; }
-    get _collapsed() { return StrCast(this.layoutDoc._chromeStatus) !== "enabled"; }
-    set _collapsed(value) { this.layoutDoc._chromeStatus = !value ? "enabled" : "disabled"; }
     get webpage() { return this._iframe?.contentDocument?.children[0]; }
 
     constructor(props: any) {
@@ -64,11 +62,17 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
             Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(this.dataDoc) || 850);
             Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(this.dataDoc) || this.Document[HeightSym]() / this.Document[WidthSym]() * 850);
         }
+        this._annotationKey = this._annotationKey + "-" + this.urlHash(this._url);
     }
 
-    iframeLoaded = action((e: any) => {
+    iframeLoaded = (e: any) => {
         const iframe = this._iframe;
         if (iframe?.contentDocument) {
+            if (this._initialScroll !== undefined && this._outerRef.current && this.webpage) {
+                this.webpage.scrollTop = this._initialScroll;
+                this._outerRef.current.scrollTop = this._initialScroll;
+                this._initialScroll = undefined;
+            }
             iframe.setAttribute("enable-annotation", "true");
             iframe.contentDocument.addEventListener("click", undoBatch(action(e => {
                 let href = "";
@@ -76,86 +80,60 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                     href = (typeof (ele.href) === "string" ? ele.href : ele.href?.baseVal) || ele.parentElement?.href || href;
                 }
                 if (href) {
-                    this._url = href.replace(Utils.prepend(""), Cast(this.dataDoc[this.fieldKey], WebField, null)?.url.origin);
-                    this.submitURL();
+                    this.submitURL(href.replace(Utils.prepend(""), Cast(this.dataDoc[this.fieldKey], WebField, null)?.url.origin));
+                    if (this.webpage) {
+                        this.webpage.scrollTop = NumCast(this.layoutDoc._scrollTop);
+                        this.webpage.scrollLeft = 0;
+                    }
                 }
             })));
             iframe.contentDocument.addEventListener('wheel', this.iframeWheel, false);
-            if (this.webpage) {
-                this.webpage.scrollTop = NumCast(this.layoutDoc._scrollTop);
-                this.webpage.scrollLeft = NumCast(this.layoutDoc._scrollLeft);
-            }
         }
-        this._disposers.scrollReaction?.();
-        this._disposers.scrollReaction = reaction(() => ({ scrollY: this.layoutDoc._scrollY, scrollX: this.layoutDoc._scrollX }),
-            ({ scrollY, scrollX }) => {
-                const delay = this._outerRef.current ? 0 : 250; // wait for mainCont and try again to scroll
-                const durationStr = StrCast(this.Document._viewTransition).match(/([0-9]*)ms/);
-                const duration = durationStr ? Number(durationStr[1]) : 1000;
-                if (scrollY !== undefined) {
-                    this._forceSmoothScrollUpdate = true;
-                    this.layoutDoc._scrollY = undefined;
-                    setTimeout(() => this._outerRef.current && smoothScroll(duration, this._outerRef.current, Math.abs(scrollY || 0), () => this.layoutDoc._scrollTop = scrollY), delay);
-                }
-                if (scrollX !== undefined) {
-                    this._forceSmoothScrollUpdate = true;
-                    this.layoutDoc._scrollX = undefined;
-                    setTimeout(() => this._outerRef.current && smoothScroll(duration, this._outerRef.current, Math.abs(scrollX || 0), () => this.layoutDoc._scrollLeft = scrollX), delay);
-                }
-            },
-            { fireImmediately: true }
-        );
-        this._disposers.scrollTop = reaction(() => this.layoutDoc._scrollTop,
-            scrollTop => {
-                const durationStr = StrCast(this.Document._viewTransition).match(/([0-9]*)ms/);
-                const duration = durationStr ? Number(durationStr[1]) : 1000;
-                if (scrollTop !== this._outerRef.current?.scrollTop && scrollTop !== undefined && this._forceSmoothScrollUpdate) {
-                    this._outerRef.current && smoothScroll(duration, this._outerRef.current, Math.abs(scrollTop || 0), () => this._forceSmoothScrollUpdate = true);
-                } else this._forceSmoothScrollUpdate = true;
-            },
-            { fireImmediately: true }
-        );
-    });
-    _forceSmoothScrollUpdate = true;
+    }
 
-    updateScroll = (x: Opt<number>, y: Opt<number>) => {
-        if (y !== undefined) {
-            this._outerRef.current!.scrollTop = y;
-            this.layoutDoc._scrollY = undefined;
-        }
-        if (x !== undefined) {
-            this._outerRef.current!.scrollLeft = x;
-            this.layoutDoc.scrollX = undefined;
+    @action
+    onWheelScroll = (scrollTop: number) => {
+        if (this.webpage && this._outerRef.current) {
+            this.webpage.scrollLeft = 0;
+            this._outerRef.current.scrollTop = scrollTop;
+            this._outerRef.current.scrollLeft = 0;
+            this._ignoreScroll = true;
+            if (this.layoutDoc._scrollTop !== scrollTop) {
+                this.layoutDoc._scrollTop = scrollTop;
+            }
+            this._ignoreScroll = false;
         }
     }
+    iframeWheel = (e: any) => this.webpage && e.target?.children && this.onWheelScroll(this.webpage.scrollTop);
+    onWheel = (e: React.WheelEvent) => {
+        this._outerRef.current && this.onWheelScroll(this._outerRef.current.scrollTop);
+        e.stopPropagation();
+    }
 
-    setPreviewCursor = (func?: (x: number, y: number, drag: boolean) => void) => this._setPreviewCursor = func;
-    iframeWheel = (e: any) => {
-        if (this._forceSmoothScrollUpdate && e.target?.children) {
-            this.webpage && setTimeout(action(() => {
-                this.webpage!.scrollLeft = 0;
-                const scrollTop = this.webpage!.scrollTop;
-                const scrollLeft = this.webpage!.scrollLeft;
-                this._outerRef.current!.scrollTop = scrollTop;
-                this._outerRef.current!.scrollLeft = scrollLeft;
-                if (this.layoutDoc._scrollTop !== scrollTop) {
-                    this._forceSmoothScrollUpdate = false;
-                    this.layoutDoc._scrollTop = scrollTop;
-                }
-                if (this.layoutDoc._scrollLeft !== scrollLeft) {
-                    this._forceSmoothScrollUpdate = false;
-                    this.layoutDoc._scrollLeft = scrollLeft;
-                }
-            }));
+    getAnchor = () => this.rootDoc;
+    scrollFocus = (doc: Doc, smooth: boolean, afterFocus?: DocAfterFocusFunc) => {
+        if (doc !== this.rootDoc && this.webpage && this._outerRef.current) {
+            const scrollTo = Utils.scrollIntoView(NumCast(doc.y), doc[HeightSym](), NumCast(this.layoutDoc._scrollTop), this.props.PanelHeight() / (this.props.scaling?.() || 1));
+            if (scrollTo !== undefined) {
+                this._initialScroll !== undefined && (this._initialScroll = scrollTo);
+                this._ignoreScroll = true;
+                this.goTo(scrollTo, smooth ? 500 : 0);
+                this.layoutDoc._scrollTop = scrollTo;
+                this._ignoreScroll = false;
+                return afterFocus?.(true);
+            }
+        } else {
+            this._initialScroll = NumCast(doc.y);
         }
+        afterFocus?.(false);
     }
+
     async componentDidMount() {
+        this.props.setContentView?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
+
         const urlField = Cast(this.dataDoc[this.props.fieldKey], WebField);
         runInAction(() => this._url = urlField?.url.toString() || "");
 
-        this._disposers.scrollMove = reaction(() => this.layoutDoc.x || this.layoutDoc.y,
-            () => this.updateScroll(this.layoutDoc._scrollLeft, this.layoutDoc._scrollTop));
-
         this._disposers.selection = reaction(() => this.props.isSelected(),
             selected => {
                 if (!selected) {
@@ -185,6 +163,36 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                 this.dataDoc.text = htmlToText.fromString(result.content);
             }
         }
+
+        var quickScroll = true;
+        this._disposers.scrollReaction = reaction(() => NumCast(this.layoutDoc._scrollTop),
+            (scrollTop) => {
+                if (quickScroll) {
+                    this._initialScroll = scrollTop;
+                }
+                else if (!this._ignoreScroll) {
+                    const viewTrans = StrCast(this.Document._viewTransition);
+                    const durationMiliStr = viewTrans.match(/([0-9]*)ms/);
+                    const durationSecStr = viewTrans.match(/([0-9.]*)s/);
+                    const duration = durationMiliStr ? Number(durationMiliStr[1]) : durationSecStr ? Number(durationSecStr[1]) * 1000 : 0;
+                    this.goTo(scrollTop, duration);
+                }
+            },
+            { fireImmediately: true }
+        );
+        quickScroll = false;
+    }
+
+    goTo = (scrollTop: number, duration: number) => {
+        if (this._outerRef.current && this.webpage) {
+            if (duration) {
+                smoothScroll(duration, this.webpage as any as HTMLElement, scrollTop);
+                smoothScroll(duration, this._outerRef.current, scrollTop);
+            } else {
+                this.webpage.scrollTop = scrollTop;
+                this._outerRef.current.scrollTop = scrollTop;
+            }
+        }
     }
 
     componentWillUnmount() {
@@ -194,31 +202,17 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         this._iframe?.removeEventListener('wheel', this.iframeWheel);
     }
 
-    onUrlDragover = (e: React.DragEvent) => { e.preventDefault(); };
-
-    @undoBatch
-    @action
-    onUrlDrop = (e: React.DragEvent) => {
-        const { dataTransfer } = e;
-        const html = dataTransfer.getData("text/html");
-        const uri = dataTransfer.getData("text/uri-list");
-        const url = uri || html || this._url;
-        this._url = url.startsWith(window.location.origin) ?
-            url.replace(window.location.origin, this._url.match(/http[s]?:\/\/[^\/]*/)?.[0] || "") : url;
-        this.submitURL();
-        e.stopPropagation();
-    }
-
     @action
     forward = () => {
         const future = Cast(this.dataDoc[this.fieldKey + "-future"], listSpec("string"), null);
         const history = Cast(this.dataDoc[this.fieldKey + "-history"], listSpec("string"), null);
         if (future.length) {
             history.push(this._url);
-            this.dataDoc[this.annotationKey + "-" + this.urlHash(this._url)] = new List<Doc>(DocListCast(this.dataDoc[this.annotationKey]));
             this.dataDoc[this.fieldKey] = new WebField(new URL(this._url = future.pop()!));
-            this.dataDoc[this.annotationKey] = new List<Doc>(DocListCast(this.dataDoc[this.annotationKey + "-" + this.urlHash(this._url)]));
+            this._annotationKey = this.fieldKey + "-annotations-" + this.urlHash(this._url);
+            return true;
         }
+        return false;
     }
 
     @action
@@ -228,10 +222,11 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         if (history.length) {
             if (future === undefined) this.dataDoc[this.fieldKey + "-future"] = new List<string>([this._url]);
             else future.push(this._url);
-            this.dataDoc[this.annotationKey + "-" + this.urlHash(this._url)] = new List<Doc>(DocListCast(this.dataDoc[this.annotationKey]));
             this.dataDoc[this.fieldKey] = new WebField(new URL(this._url = history.pop()!));
-            this.dataDoc[this.annotationKey] = new List<Doc>(DocListCast(this.dataDoc[this.annotationKey + "-" + this.urlHash(this._url)]));
+            this._annotationKey = this.fieldKey + "-annotations-" + this.urlHash(this._url);
+            return true;
         }
+        return false;
     }
 
     urlHash(s: string) {
@@ -239,34 +234,28 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
     }
 
     @action
-    submitURL = () => {
-        if (!this._url.startsWith("http")) this._url = "http://" + this._url;
+    submitURL = (newUrl: string) => {
+        if (!newUrl.startsWith("http")) newUrl = "http://" + newUrl;
         try {
-            const URLy = new URL(this._url);
             const future = Cast(this.dataDoc[this.fieldKey + "-future"], listSpec("string"), null);
             const history = Cast(this.dataDoc[this.fieldKey + "-history"], listSpec("string"), null);
-            const annos = DocListCast(this.dataDoc[this.annotationKey]);
             const url = Cast(this.dataDoc[this.fieldKey], WebField, null)?.url.toString();
             if (url) {
                 if (history === undefined) {
                     this.dataDoc[this.fieldKey + "-history"] = new List<string>([url]);
-
                 } else {
                     history.push(url);
                 }
+                this.layoutDoc._scrollTop = 0;
                 future && (future.length = 0);
-                this.dataDoc[this.annotationKey + "-" + this.urlHash(url)] = new List<Doc>(annos);
             }
-            this.dataDoc[this.fieldKey] = new WebField(URLy);
-            this.dataDoc[this.annotationKey] = new List<Doc>([]);
+            this._url = newUrl;
+            this._annotationKey = this.fieldKey + "-annotations-" + this.urlHash(this._url);
+            this.dataDoc[this.fieldKey] = new WebField(new URL(newUrl));
         } catch (e) {
             console.log("WebBox URL error:" + this._url);
         }
-    }
-
-    onValueKeyDown = async (e: React.KeyboardEvent) => {
-        if (e.key === "Enter") this.submitURL();
-        e.stopPropagation();
+        return true;
     }
 
     editToggleBtn() {
@@ -280,15 +269,10 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
     }
 
     _ignore = 0;
-    onPreWheel = (e: React.WheelEvent) => { this._ignore = e.timeStamp; };
-    onPrePointer = (e: React.PointerEvent) => { this._ignore = e.timeStamp; };
-    onPostPointer = (e: React.PointerEvent) => {
-        if (this._ignore !== e.timeStamp) e.stopPropagation();
-    }
-
-    onPostWheel = (e: React.WheelEvent) => {
-        if (this._ignore !== e.timeStamp) e.stopPropagation();
-    }
+    onPreWheel = (e: React.WheelEvent) => this._ignore = e.timeStamp;
+    onPrePointer = (e: React.PointerEvent) => this._ignore = e.timeStamp;
+    onPostPointer = (e: React.PointerEvent) => this._ignore !== e.timeStamp && e.stopPropagation();
+    onPostWheel = (e: React.WheelEvent) => this._ignore !== e.timeStamp && e.stopPropagation();
 
     onLongPressDown = (e: React.PointerEvent) => {
         this._pressX = e.clientX;
@@ -372,22 +356,14 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
             }
         }, 1500);
     }
-
     onLongPressMove = (e: PointerEvent) => {
         // this._pressX = e.clientX;
         // this._pressY = e.clientY;
     }
-
     onLongPressUp = (e: PointerEvent) => {
-        if (this._longPressSecondsHack) {
-            clearTimeout(this._longPressSecondsHack);
-        }
-        if (this._iframeIndicatorRef.current) {
-            this._iframeIndicatorRef.current.classList.remove("active");
-        }
-        if (this._iframeDragRef.current) {
-            while (this._iframeDragRef.current.firstChild) this._iframeDragRef.current.removeChild(this._iframeDragRef.current.firstChild);
-        }
+        this._longPressSecondsHack && clearTimeout(this._longPressSecondsHack);
+        this._iframeIndicatorRef.current?.classList.remove("active");
+        while (this._iframeDragRef.current?.firstChild) this._iframeDragRef.current.removeChild(this._iframeDragRef.current.firstChild);
     }
 
     specificContextMenu = (e: React.MouseEvent): void => {
@@ -396,11 +372,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         funcs.push({ description: (this.layoutDoc.useCors ? "Don't Use" : "Use") + " Cors", event: () => this.layoutDoc.useCors = !this.layoutDoc.useCors, icon: "snowflake" });
         funcs.push({ description: (this.layoutDoc[this.fieldKey + "-contentWidth"] ? "Unfreeze" : "Freeze") + " Content Width", event: () => this.layoutDoc[this.fieldKey + "-contentWidth"] = this.layoutDoc[this.fieldKey + "-contentWidth"] ? undefined : Doc.NativeWidth(this.layoutDoc), icon: "snowflake" });
         cm.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
-
     }
 
-    //const href = "https://brown365-my.sharepoint.com/personal/bcz_ad_brown_edu/_layouts/15/Doc.aspx?sourcedoc={31aa3178-4c21-4474-b367-877d0a7135e4}&action=embedview&wdStartOn=1";
-
     @computed
     get urlContent() {
         const field = this.dataDoc[this.props.fieldKey];
@@ -410,7 +383,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         } else if (field instanceof WebField) {
             const url = this.layoutDoc.useCors ? Utils.CorsProxy(field.url.href) : field.url.href;
             //    view = <iframe className="webBox-iframe" src={url} onLoad={e => { e.currentTarget.before((e.currentTarget.contentDocument?.body || e.currentTarget.contentDocument)?.children[0]!); e.currentTarget.remove(); }}
-
             view = <iframe className="webBox-iframe" enable-annotation={"true"} ref={action((r: HTMLIFrameElement | null) => this._iframe = r)} src={url} onLoad={this.iframeLoaded}
                 // the 'allow-top-navigation' and 'allow-top-navigation-by-user-activation' attributes are left out to prevent iframes from redirecting the top-level Dash page
                 // sandbox={"allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts"} />;
@@ -423,10 +395,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
 
     @computed
     get content() {
-        const view = this.urlContent;
         const frozen = !this.props.isSelected() || DocumentDecorations.Instance?.Interacting;
         const scale = this.props.scaling?.() || 1;
-
         return (<>
             <div className={"webBox-cont" + (this.props.isSelected() && Doc.GetSelectedTool() === InkTool.None && !DocumentDecorations.Instance?.Interacting ? "-interactive" : "")}
                 style={{
@@ -435,7 +405,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                     transform: `scale(${scale})`
                 }}
                 onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}>
-                {view}
+                {this.urlContent}
             </div>
             {!frozen ? (null) :
                 <div className="webBox-overlay" style={{ pointerEvents: this.props.layerProvider?.(this.layoutDoc) === false ? undefined : "all" }}
@@ -450,7 +420,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
 
     @computed get allAnnotations() { return DocListCast(this.dataDoc[this.props.fieldKey + "-annotations"]); }
     @computed get nonDocAnnotations() { return this.allAnnotations.filter(a => a.annotations); }
-
     @computed get annotationLayer() {
         TraceMobx();
         return <div className="webBox-annotationLayer" style={{ height: Doc.NativeHeight(this.Document) || undefined }} ref={this._annotationLayer}>
@@ -471,7 +440,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         this.props.select(true);
     }
 
-    scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop));
+    panelWidth = () => this.props.PanelWidth() / (this.props.scaling?.() || 1); // (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));
     render() {
         const inactiveLayer = this.props.layerProvider?.(this.layoutDoc) === false;
         const scale = this.props.scaling?.() || 1;
@@ -486,21 +457,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                         width: `${100 / scale}%`, height: `${100 / scale}%`, transform: `scale(${scale})`,
                         pointerEvents: this.layoutDoc.isAnnotating && !inactiveLayer ? "all" : "none"
                     }}
-                    onWheel={e => {
-                        const target = this._outerRef.current;
-                        if (this._forceSmoothScrollUpdate && target && this.webpage) {
-                            setTimeout(action(() => {
-                                target.scrollLeft = 0;
-                                const scrollTop = target.scrollTop;
-                                const scrollLeft = target.scrollLeft;
-                                this.webpage!.scrollTop = scrollTop;
-                                this.webpage!.scrollLeft = scrollLeft;
-                                if (this.layoutDoc._scrollTop !== scrollTop) this.layoutDoc._scrollTop = scrollTop;
-                                if (this.layoutDoc._scrollLeft !== scrollLeft) this.layoutDoc._scrollLeft = scrollLeft;
-                            }));
-                        }
-                        e.stopPropagation();
-                    }}
+                    onWheel={this.onWheel}
                     onPointerDown={this.onMarqueeDown}
                     onScroll={e => e.stopPropagation()}
                 >
@@ -514,11 +471,12 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                             fieldKey={this.annotationKey}
                             isAnnotationOverlay={true}
                             scaling={returnOne}
+                            PanelWidth={this.panelWidth}
+                            PanelHeight={this.panelHeight}
                             ScreenToLocalTransform={this.scrollXf}
                             removeDocument={this.removeDocument}
                             moveDocument={this.moveDocument}
                             addDocument={this.addDocument}
-                            setPreviewCursor={this.setPreviewCursor}
                             select={emptyFunction}
                             active={this.active}
                             whenActiveChanged={this.whenActiveChanged}>
@@ -527,7 +485,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                 </div>
                 {this.annotationLayer}
                 {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) :
-                    <MarqueeAnnotator rootDoc={this.rootDoc} down={this._marqueeing} scaling={this.props.scaling} addDocument={this.addDocument} finishMarquee={this.finishMarquee} savedAnnotations={this._savedAnnotations} annotationLayer={this._annotationLayer.current} mainCont={this._mainCont.current} />}
+                    <MarqueeAnnotator rootDoc={this.rootDoc} scrollTop={NumCast(this.rootDoc._scrollTop)} down={this._marqueeing} scaling={this.props.scaling} addDocument={this.addDocument} finishMarquee={this.finishMarquee} savedAnnotations={this._savedAnnotations} annotationLayer={this._annotationLayer.current} mainCont={this._mainCont.current} />}
             </div >
             {this.props.isSelected() ? this.editToggleBtn() : null}
         </div>);