more cleanup of webbox/pdfbox/sidebarAnnos

5 files changed, 111 insertions, 145 deletions

diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx
index 026942999..bbe874eac 100644
--- a/src/client/views/SidebarAnnos.tsx
+++ b/src/client/views/SidebarAnnos.tsx
@@ -1,13 +1,16 @@
 import { computed } from 'mobx';
 import { observer } from "mobx-react";
 import { Doc, DocListCast, StrListCast } from "../../fields/Doc";
+import { Id } from '../../fields/FieldSymbols';
 import { List } from '../../fields/List';
-import { NumCast } from '../../fields/Types';
+import { NumCast, StrCast } from '../../fields/Types';
 import { emptyFunction, OmitKeys, returnOne, returnTrue, returnZero } from '../../Utils';
+import { Docs, DocUtils } from '../documents/Documents';
 import { Transform } from '../util/Transform';
 import { CollectionStackingView } from './collections/CollectionStackingView';
 import { CollectionViewType } from './collections/CollectionView';
 import { FieldViewProps } from './nodes/FieldView';
+import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
 import { SearchBox } from './search/SearchBox';
 import "./SidebarAnnos.scss";
 import { StyleProp } from './StyleProvider';
@@ -27,6 +30,7 @@ interface extraProps {
 }
 @observer
 export class SidebarAnnos extends React.Component<FieldViewProps & extraProps> {
+    _stackRef = React.createRef<CollectionStackingView>();
     @computed get allHashtags() {
         const keys = new Set<string>();
         DocListCast(this.props.rootDoc[this.sidebarKey()]).forEach(doc => SearchBox.documentKeys(doc).forEach(key => keys.add(key)));
@@ -34,6 +38,21 @@ export class SidebarAnnos extends React.Component<FieldViewProps & extraProps> {
     }
     get filtersKey() { return "_" + this.sidebarKey() + "-docFilters"; }
 
+    anchorMenuClick = (anchor: Doc) => {
+        this.props.layoutDoc._showSidebar = true;
+        const startup = StrListCast(this.props.rootDoc.docFilters).map(filter => filter.split(":")[0]).join(" ");
+        const target = Docs.Create.TextDocument(startup, {
+            title: "anno",
+            annotationOn: this.props.rootDoc, _width: 200, _height: 50, _fitWidth: true, _autoHeight: true, _fontSize: StrCast(Doc.UserDoc().fontSize),
+            _fontFamily: StrCast(Doc.UserDoc().fontFamily)
+        });
+        FormattedTextBox.SelectOnLoad = target[Id];
+        FormattedTextBox.DontSelectInitialText = true;
+        this.allHashtags.map(tag => target[tag] = tag);
+        DocUtils.MakeLink({ doc: anchor }, { doc: target }, "inline markup", "annotation");
+        this.addDocument(target);
+        this._stackRef.current?.focusDocument(target);
+    }
     makeDocUnfiltered = (doc: Doc) => {
         if (DocListCast(this.props.rootDoc[this.sidebarKey()]).includes(doc)) {
             if (this.props.layoutDoc[this.filtersKey]) {
@@ -69,7 +88,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & extraProps> {
                 height: "100%"
             }}>
                 <div style={{ width: "100%", height: this.panelHeight(), position: "relative" }}>
-                    <CollectionStackingView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
+                    <CollectionStackingView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit} ref={this._stackRef}
                         NativeWidth={returnZero}
                         NativeHeight={returnZero}
                         PanelHeight={this.panelHeight}
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index d1dca5c68..0f46da294 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -18,11 +18,12 @@
         top: 0;
         left: 0;
 
-        .pdfBox-overlayButton-sidebar {
+        .pdfBox-sidebarBtn {
             background: #121721;
             height: 25px;
             width: 25px;
             right: 0;
+            color: white;
             display: flex;
             position: absolute;
             align-items: center;
@@ -39,8 +40,7 @@
             left: 5px;
             top: 5px;
 
-            .pdfBox-overlayButton-fwd,
-            .pdfBox-overlayButton-back {
+            .pdfBox-fwdBtn, .pdfBox-backBtn {
                 background: #121721;
                 height: 25px;
                 width: 25px;
@@ -63,6 +63,9 @@
             padding: 0;
             position: absolute;
             pointer-events: all;
+            color: white;
+            bottom: 0;
+            right: 0;
 
             .pdfBox-overlayButton-arrow {
                 width: 0;
@@ -89,6 +92,7 @@
         .pdfBox-nextIcon,
         .pdfBox-prevIcon {
             background: #121721;
+            color: white;
             height: 20px;
             width: 25px;
             display: flex;
@@ -311,6 +315,7 @@
         font-size: 30px;
         width: 50px;
         height: 50px;
+        color: white;
     }
 
     .pdfBox .pdfBox-ui .pdfBox-nextIcon,
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 81ef2472a..2342ef019 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -3,27 +3,23 @@ import { action, computed, IReactionDisposer, observable, reaction, runInAction
 import { observer } from "mobx-react";
 import * as Pdfjs from "pdfjs-dist";
 import "pdfjs-dist/web/pdf_viewer.css";
-import { Doc, DocListCast, Opt, StrListCast, WidthSym } from "../../../fields/Doc";
+import { Doc, Opt, WidthSym } from "../../../fields/Doc";
 import { documentSchema } from '../../../fields/documentSchemas';
-import { Id } from '../../../fields/FieldSymbols';
-import { List } from '../../../fields/List';
 import { makeInterface } from "../../../fields/Schema";
 import { Cast, NumCast, StrCast } from '../../../fields/Types';
 import { PdfField } from "../../../fields/URLField";
 import { TraceMobx } from '../../../fields/util';
 import { Utils } from '../../../Utils';
-import { Docs, DocUtils } from '../../documents/Documents';
+import { Docs } from '../../documents/Documents';
 import { KeyCodes } from '../../util/KeyCodes';
 import { undoBatch } from '../../util/UndoManager';
 import { panZoomSchema } from '../collections/collectionFreeForm/CollectionFreeFormView';
-import { CollectionViewType } from '../collections/CollectionView';
 import { ContextMenu } from '../ContextMenu';
 import { ContextMenuProps } from '../ContextMenuItem';
 import { ViewBoxAnnotatableComponent } from "../DocComponent";
 import { PDFViewer } from "../pdf/PDFViewer";
 import { SidebarAnnos } from '../SidebarAnnos';
 import { FieldView, FieldViewProps } from './FieldView';
-import { FormattedTextBox } from './formattedText/FormattedTextBox';
 import { pageSchema } from "./ImageBox";
 import "./PDFBox.scss";
 import React = require("react");
@@ -36,7 +32,6 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PDFBox, fieldKey); }
     private _searchString: string = "";
     private _initialScrollTarget: Opt<Doc>;
-    private _displayPdfLive = false; // has this box ever had its contents activated -- if so, stop drawing the overlay title
     private _pdfViewer: PDFViewer | undefined;
     private _searchRef = React.createRef<HTMLInputElement>();
     private _selectReactionDisposer: IReactionDisposer | undefined;
@@ -46,21 +41,20 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
     @observable private _pdf: Opt<Pdfjs.PDFDocumentProxy>;
     @observable private _pageControls = false;
 
+    @computed get pdfUrl() { return Cast(this.dataDoc[this.props.fieldKey], PdfField); }
+
     constructor(props: any) {
         super(props);
         const nw = Doc.NativeWidth(this.Document, this.dataDoc) || 927;
         const nh = Doc.NativeHeight(this.Document, this.dataDoc) || 1200;
         !this.Document._fitWidth && (this.Document._height = this.Document[WidthSym]() * (nh / nw));
-        const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField);
-        if (pdfUrl) {
-            if (PDFBox.pdfcache.get(pdfUrl.url.href)) runInAction(() => this._pdf = PDFBox.pdfcache.get(pdfUrl.url.href));
-            else if (PDFBox.pdfpromise.get(pdfUrl.url.href)) PDFBox.pdfpromise.get(pdfUrl.url.href)?.then(action(pdf => this._pdf = pdf));
+        if (this.pdfUrl) {
+            if (PDFBox.pdfcache.get(this.pdfUrl.url.href)) runInAction(() => this._pdf = PDFBox.pdfcache.get(this.pdfUrl!.url.href));
+            else if (PDFBox.pdfpromise.get(this.pdfUrl.url.href)) PDFBox.pdfpromise.get(this.pdfUrl.url.href)?.then(action(pdf => this._pdf = pdf));
         }
 
         const backup = "oldPath";
-        const { Document } = this.props;
-        const pdf = Cast(this.dataDoc[this.props.fieldKey], PdfField);
-        const href = pdf?.url?.href;
+        const href = this.pdfUrl?.url.href;
         if (href) {
             const pathCorrectionTest = /upload\_[a-z0-9]{32}.(.*)/g;
             const matches = pathCorrectionTest.exec(href);
@@ -72,7 +66,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
                 //console.log(properPath);
                 if (!properPath.includes(href)) {
                     console.log(`The two (url and proper path) were not equal`);
-                    const proto = Doc.GetProto(Document);
+                    const proto = Doc.GetProto(this.props.Document);
                     proto[this.props.fieldKey] = new PdfField(properPath);
                     proto[backup] = href;
                 } else {
@@ -118,26 +112,24 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
         !this.Document._fitWidth && (this.Document._height = this.Document[WidthSym]() * (nh / nw));
     }
 
-    public search = (string: string, fwd: boolean) => { this._pdfViewer?.search(string, fwd); };
-    public prevAnnotation = () => { this._pdfViewer?.prevAnnotation(); };
-    public nextAnnotation = () => { this._pdfViewer?.nextAnnotation(); };
+    public search = (string: string, fwd: boolean) => this._pdfViewer?.search(string, fwd);
+    public prevAnnotation = () => this._pdfViewer?.prevAnnotation();
+    public nextAnnotation = () => this._pdfViewer?.nextAnnotation();
     public backPage = () => { this.Document._curPage = (this.Document._curPage || 1) - 1; return true; };
     public forwardPage = () => { this.Document._curPage = (this.Document._curPage || 1) + 1; return true; };
-    public gotoPage = (p: number) => { this.Document._curPage = p; };
+    public gotoPage = (p: number) => this.Document._curPage = p;
 
     @undoBatch
     onKeyDown = action((e: KeyboardEvent) => {
         let processed = false;
-        if (e.key === "f" && e.ctrlKey) {
-            this._searching = true;
-            setTimeout(() => this._searchRef.current && this._searchRef.current.focus(), 100);
-            processed = true;
-        }
-        if (e.key === "PageDown") processed = this.forwardPage();
-        if (e.key === "PageUp") processed = this.backPage();
-        if (e.target instanceof HTMLInputElement || this.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform) {
-            if (e.key === "ArrowDown" || e.key === "ArrowRight") processed = this.forwardPage();
-            if (e.key === "ArrowUp" || e.key === "ArrowLeft") processed = this.backPage();
+        switch (e.key) {
+            case "f": if (e.ctrlKey) {
+                setTimeout(() => this._searchRef.current?.focus(), 100);
+                this._searching = processed = true;
+            }
+                break;
+            case "PageDown": processed = this.forwardPage(); break;
+            case "PageUp": processed = this.backPage(); break;
         }
         if (processed) {
             e.stopImmediatePropagation();
@@ -154,92 +146,72 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
     }
     searchStringChanged = (e: React.ChangeEvent<HTMLInputElement>) => this._searchString = e.currentTarget.value;
     toggleSidebar = () => {
-        if (this.layoutDoc.nativeWidth === this.layoutDoc[this.fieldKey + "-nativeWidth"]) {
-            this.layoutDoc.nativeWidth = 250 + NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]);
-        } else {
-            this.layoutDoc.nativeWidth = NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]);
-        }
-        this.layoutDoc._width = NumCast(this.layoutDoc._nativeWidth) * (NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]) / NumCast(this.layoutDoc[this.fieldKey + "-nativeHeight"]));
+        const nativeWidth = NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]);
+        const nativeHeight = NumCast(this.layoutDoc[this.fieldKey + "-nativeHeight"]);
+        this.layoutDoc.nativeWidth = nativeWidth + (this.layoutDoc.nativeWidth === nativeWidth ? 250 : 0);
+        this.layoutDoc._width = NumCast(this.layoutDoc._nativeWidth) * (nativeWidth / nativeHeight);
     }
     settingsPanel() {
         const pageBtns = <>
-            <button className="pdfBox-overlayButton-back" key="back" title="Page Back"
-                onPointerDown={e => e.stopPropagation()} onClick={e => this.backPage()} >
+            <button className="pdfBox-backBtn" key="back" title="Page Back"
+                onPointerDown={e => e.stopPropagation()} onClick={this.backPage} >
                 <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-left"} size="sm" />
             </button>
-            <button className="pdfBox-overlayButton-fwd" key="fwd" title="Page Forward"
-                onPointerDown={e => e.stopPropagation()} onClick={e => this.forwardPage()} >
+            <button className="pdfBox-fwdBtn" key="fwd" title="Page Forward"
+                onPointerDown={e => e.stopPropagation()} onClick={this.forwardPage} >
                 <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-right"} size="sm" />
             </button>
         </>;
         const searchTitle = `${!this._searching ? "Open" : "Close"} Search Bar`;
         const curPage = this.Document._curPage || 1;
         return !this.active() ? (null) :
-            (<div className="pdfBox-ui" onKeyDown={e => e.keyCode === KeyCodes.BACKSPACE || e.keyCode === KeyCodes.DELETE ? e.stopPropagation() : true}
+            <div className="pdfBox-ui" onKeyDown={e => [KeyCodes.BACKSPACE, KeyCodes.DELETE].includes(e.keyCode) ? e.stopPropagation() : true}
                 onPointerDown={e => e.stopPropagation()} style={{ display: this.active() ? "flex" : "none" }}>
-                <div className="pdfBox-overlayCont" key="cont" onPointerDown={(e) => e.stopPropagation()} style={{ left: `${this._searching ? 0 : 100}%` }}>
+                <div className="pdfBox-overlayCont" onPointerDown={(e) => e.stopPropagation()} style={{ left: `${this._searching ? 0 : 100}%` }}>
                     <button className="pdfBox-overlayButton" title={searchTitle} />
-                    <input className="pdfBox-searchBar" placeholder="Search" ref={this._searchRef} onChange={this.searchStringChanged} onKeyDown={e => e.keyCode === KeyCodes.ENTER && this.search(this._searchString, !e.shiftKey)} />
+                    <input className="pdfBox-searchBar" placeholder="Search" ref={this._searchRef} onChange={this.searchStringChanged}
+                        onKeyDown={e => e.keyCode === KeyCodes.ENTER && this.search(this._searchString, !e.shiftKey)} />
                     <button className="pdfBox-search" title="Search" onClick={e => this.search(this._searchString, !e.shiftKey)}>
-                        <FontAwesomeIcon icon="search" size="sm" color="white" /></button>
-                    <button className="pdfBox-prevIcon " title="Previous Annotation" onClick={this.prevAnnotation} >
-                        <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-up"} size="lg" />
+                        <FontAwesomeIcon icon="search" size="sm" />
+                    </button>
+                    <button className="pdfBox-prevIcon" title="Previous Annotation" onClick={this.prevAnnotation} >
+                        <FontAwesomeIcon icon={"arrow-up"} size="lg" />
                     </button>
                     <button className="pdfBox-nextIcon" title="Next Annotation" onClick={this.nextAnnotation} >
-                        <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-down"} size="lg" />
+                        <FontAwesomeIcon icon={"arrow-down"} size="lg" />
                     </button>
                 </div>
-                <button className="pdfBox-overlayButton" key="search" onClick={action(() => {
-                    this._searching = !this._searching;
-                    this.search("mxytzlaf", true);
-                })} title={searchTitle} style={{ bottom: 0, right: 0 }}>
-                    <div className="pdfBox-overlayButton-arrow" onPointerDown={(e) => e.stopPropagation()}></div>
+                <button className="pdfBox-overlayButton" title={searchTitle}
+                    onClick={action(() => { this._searching = !this._searching; this.search("mxytzlaf", true); })} >
+                    <div className="pdfBox-overlayButton-arrow" onPointerDown={(e) => e.stopPropagation()} />
                     <div className="pdfBox-overlayButton-iconCont" onPointerDown={(e) => e.stopPropagation()}>
-                        <FontAwesomeIcon style={{ color: "white" }} icon={this._searching ? "times" : "search"} size="lg" /></div>
+                        <FontAwesomeIcon icon={this._searching ? "times" : "search"} size="lg" />
+                    </div>
                 </button>
 
                 <div className="pdfBox-pageNums">
-                    <input value={curPage}
+                    <input value={curPage} style={{ width: `${curPage > 99 ? 4 : 3}ch`, pointerEvents: "all" }}
                         onChange={e => this.Document._curPage = Number(e.currentTarget.value)}
-                        style={{ width: `${curPage > 99 ? 4 : 3}ch`, pointerEvents: "all" }}
                         onClick={action(() => this._pageControls = !this._pageControls)} />
                     {this._pageControls ? pageBtns : (null)}
                 </div>
-                <button className="pdfBox-overlayButton-sidebar" key="sidebar" title="Toggle Sidebar" style={{ right: this.sidebarWidth() + 7 }}
+                <button className="pdfBox-sidebarBtn" title="Toggle Sidebar" style={{ right: this.sidebarWidth() + 7 }}
                     onPointerDown={e => e.stopPropagation()} onClick={e => this.toggleSidebar()} >
-                    <FontAwesomeIcon style={{ color: "white" }} icon={"chevron-left"} size="sm" />
+                    <FontAwesomeIcon icon={"chevron-left"} size="sm" />
                 </button>
-            </div>);
+            </div>;
     }
     sidebarWidth = () => !this.layoutDoc._showSidebar ? 0 : (NumCast(this.layoutDoc.nativeWidth) - Doc.NativeWidth(this.dataDoc)) * this.props.PanelWidth() / NumCast(this.layoutDoc.nativeWidth);
 
-
     specificContextMenu = (e: React.MouseEvent): void => {
-        const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField);
         const funcs: ContextMenuProps[] = [];
-        pdfUrl && funcs.push({ description: "Copy path", event: () => Utils.CopyText(pdfUrl.url.pathname), icon: "expand-arrows-alt" });
+        funcs.push({ description: "Copy path", event: () => this.pdfUrl && Utils.CopyText(this.pdfUrl.url.pathname), icon: "expand-arrows-alt" });
         funcs.push({ description: "Toggle Fit Width " + (this.Document._fitWidth ? "Off" : "On"), event: () => this.Document._fitWidth = !this.Document._fitWidth, icon: "expand-arrows-alt" });
         funcs.push({ description: "Toggle Annotation View ", event: () => this.Document._showSidebar = !this.Document._showSidebar, icon: "expand-arrows-alt" });
         funcs.push({ description: "Toggle Sidebar ", event: () => this.toggleSidebar(), icon: "expand-arrows-alt" });
-
         ContextMenu.Instance.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
     }
 
-    anchorMenuClick = (anchor: Doc) => {
-        this.props.Document._showSidebar = true;
-        const startup = StrListCast(this.rootDoc.docFilters).map(filter => filter.split(":")[0]).join(" ");
-        const target = Docs.Create.TextDocument(startup, {
-            title: "anno",
-            annotationOn: this.rootDoc, _width: 200, _height: 50, _fitWidth: true, _autoHeight: true, _fontSize: StrCast(Doc.UserDoc().fontSize),
-            _fontFamily: StrCast(Doc.UserDoc().fontFamily)
-        });
-        FormattedTextBox.SelectOnLoad = target[Id];
-        FormattedTextBox.DontSelectInitialText = true;
-        //this.sidebarAllTags.map(tag => target[tag] = tag);
-        DocUtils.MakeLink({ doc: anchor }, { doc: target }, "inline markup", "annotation");
-        this._sidebarRef.current?.addDocument(target);
-    }
-
     @computed get renderTitleBox() {
         const classname = "pdfBox" + (this.active() ? "-interactive" : "");
         return <div className={classname} >
@@ -251,15 +223,17 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
 
     @computed get renderPdfView() {
         TraceMobx();
-        const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField);
         return <div className={"pdfBox"} onContextMenu={this.specificContextMenu}
-            style={{ height: this.props.Document._scrollTop && !this.Document._fitWidth && (window.screen.width > 600) ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}>
+            style={{
+                height: this.props.Document._scrollTop && !this.Document._fitWidth && (window.screen.width > 600) ?
+                    NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined
+            }}>
             <div className="pdfBox-background" />
             <PDFViewer {...this.props}
                 pdf={this._pdf!}
-                url={pdfUrl!.url.pathname}
+                url={this.pdfUrl!.url.pathname}
                 active={this.active}
-                anchorMenuClick={this.anchorMenuClick}
+                anchorMenuClick={this._sidebarRef.current?.anchorMenuClick}
                 loaded={!Doc.NativeAspect(this.dataDoc) ? this.loaded : undefined}
                 setPdfViewer={this.setPdfViewer}
                 addDocument={this.addDocument}
@@ -287,19 +261,14 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
     static pdfpromise = new Map<string, Pdfjs.PDFPromise<Pdfjs.PDFDocumentProxy>>();
     render() {
         TraceMobx();
-        if (true) {//this.props.isSelected() || (this.props.active() && this.props.renderDepth === 0)) {
-            this._displayPdfLive = true;
-        }
-        if (this._displayPdfLive) {
-            if (this._pdf) return this.renderPdfView;
+        if (this._pdf) return this.renderPdfView;
 
-            const href = Cast(this.dataDoc[this.props.fieldKey], PdfField, null)?.url.href;
-            if (href) {
-                if (PDFBox.pdfcache.get(href)) setTimeout(action(() => this._pdf = PDFBox.pdfcache.get(href)));
-                else {
-                    if (!PDFBox.pdfpromise.get(href)) PDFBox.pdfpromise.set(href, Pdfjs.getDocument(href).promise);
-                    PDFBox.pdfpromise.get(href)?.then(action(pdf => PDFBox.pdfcache.set(href, this._pdf = pdf)));
-                }
+        const href = this.pdfUrl?.url.href;
+        if (href) {
+            if (PDFBox.pdfcache.get(href)) setTimeout(action(() => this._pdf = PDFBox.pdfcache.get(href)));
+            else {
+                if (!PDFBox.pdfpromise.get(href)) PDFBox.pdfpromise.set(href, Pdfjs.getDocument(href).promise);
+                PDFBox.pdfpromise.get(href)?.then(action(pdf => PDFBox.pdfcache.set(href, this._pdf = pdf)));
             }
         }
         return this.renderTitleBox;
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 2a0fc47b4..adfe5d694 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -8,19 +8,17 @@ import { Id } from "../../../fields/FieldSymbols";
 import { HtmlField } from "../../../fields/HtmlField";
 import { InkTool } from "../../../fields/InkField";
 import { List } from "../../../fields/List";
-import { listSpec, makeInterface } from "../../../fields/Schema";
+import { makeInterface } from "../../../fields/Schema";
 import { Cast, NumCast, StrCast } from "../../../fields/Types";
 import { WebField } from "../../../fields/URLField";
 import { TraceMobx } from "../../../fields/util";
-import { emptyFunction, getWordAtPoint, OmitKeys, returnOne, returnTrue, returnZero, smoothScroll, Utils } from "../../../Utils";
-import { Docs, DocUtils } from "../../documents/Documents";
+import { emptyFunction, getWordAtPoint, OmitKeys, returnOne, smoothScroll, Utils } from "../../../Utils";
+import { Docs } from "../../documents/Documents";
 import { DocumentType } from '../../documents/DocumentTypes';
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
 import { SnappingManager } from "../../util/SnappingManager";
 import { undoBatch } from "../../util/UndoManager";
 import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
-import { CollectionStackingView } from "../collections/CollectionStackingView";
-import { CollectionViewType } from "../collections/CollectionView";
 import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
 import { ViewBoxAnnotatableComponent } from "../DocComponent";
@@ -29,14 +27,11 @@ import { LightboxView } from "../LightboxView";
 import { MarqueeAnnotator } from "../MarqueeAnnotator";
 import { AnchorMenu } from "../pdf/AnchorMenu";
 import { Annotation } from "../pdf/Annotation";
-import { SearchBox } from "../search/SearchBox";
-import { StyleProp } from "../StyleProvider";
+import { SidebarAnnos } from "../SidebarAnnos";
 import { FieldView, FieldViewProps } from './FieldView';
-import { FormattedTextBox } from "./formattedText/FormattedTextBox";
 import { LinkDocPreview } from "./LinkDocPreview";
 import "./WebBox.scss";
 import React = require("react");
-import { SidebarAnnos } from "../SidebarAnnos";
 const htmlToText = require("html-to-text");
 
 type WebDocument = makeInterface<[typeof documentSchema]>;
@@ -110,9 +105,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         var quickScroll = true;
         this._disposers.scrollReaction = reaction(() => NumCast(this.layoutDoc._scrollTop),
             (scrollTop) => {
-                if (quickScroll) {
-                    this._initialScroll = scrollTop;
-                }
+                if (quickScroll) this._initialScroll = scrollTop;
                 else {
                     const viewTrans = StrCast(this.Document._viewTransition);
                     const durationMiliStr = viewTrans.match(/([0-9]*)ms/);
@@ -151,11 +144,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         //this._selectionText = selRange.cloneContents().textContent || "";
 
         // clear selection
-        if (sel.empty) {  // Chrome
-            sel.empty();
-        } else if (sel.removeAllRanges) {  // Firefox
-            sel.removeAllRanges();
-        }
+        if (sel.empty) sel.empty();// Chrome
+        else if (sel.removeAllRanges) sel.removeAllRanges();  // Firefox
     }
 
     menuControls = () => this.urlEditor; // controls to be added to the top bar when a document of this type is selected
@@ -283,8 +273,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
 
     @action
     forward = () => {
-        const future = Cast(this.dataDoc[this.fieldKey + "-future"], listSpec("string"), null);
-        const history = Cast(this.dataDoc[this.fieldKey + "-history"], listSpec("string"), null);
+        const future = StrListCast(this.dataDoc[this.fieldKey + "-future"]);
+        const history = StrListCast(this.dataDoc[this.fieldKey + "-history"]);
         if (future.length) {
             history.push(this._url);
             this.dataDoc[this.fieldKey] = new WebField(new URL(this._url = future.pop()!));
@@ -296,8 +286,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
 
     @action
     back = () => {
-        const future = Cast(this.dataDoc[this.fieldKey + "-future"], listSpec("string"), null);
-        const history = Cast(this.dataDoc[this.fieldKey + "-history"], listSpec("string"), null);
+        const future = StrListCast(this.dataDoc[this.fieldKey + "-future"]);
+        const history = StrListCast(this.dataDoc[this.fieldKey + "-history"]);
         if (history.length) {
             if (future === undefined) this.dataDoc[this.fieldKey + "-future"] = new List<string>([this._url]);
             else future.push(this._url);
@@ -317,8 +307,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         if (!newUrl) return;
         if (!newUrl.startsWith("http")) newUrl = "http://" + newUrl;
         try {
-            const future = Cast(this.dataDoc[this.fieldKey + "-future"], listSpec("string"), null);
-            const history = Cast(this.dataDoc[this.fieldKey + "-history"], listSpec("string"), null);
+            const future = StrListCast(this.dataDoc[this.fieldKey + "-future"]);
+            const history = StrListCast(this.dataDoc[this.fieldKey + "-history"]);
             const url = this.webField?.toString();
             if (url) {
                 if (history === undefined) {
@@ -409,7 +399,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
             view = <span className="webBox-htmlSpan" dangerouslySetInnerHTML={{ __html: field.html }} />;
         } 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"}
                 style={{ pointerEvents: this._scrollTimer ? "none" : undefined }}
                 ref={action((r: HTMLIFrameElement | null) => this._iframe = r)} src={url} onLoad={this.iframeLoaded}
@@ -424,27 +413,11 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         return view;
     }
 
-    anchorMenuClick = (anchor: Doc) => {
-        this.Document._showSidebar = true;
-        const startup = StrListCast(this.rootDoc.docFilters).map(filter => filter.split(":")[0]).join(" ");
-        const target = Docs.Create.TextDocument(startup, {
-            title: "anno",
-            annotationOn: this.rootDoc, _width: 200, _height: 50, _fitWidth: true, _autoHeight: true, _fontSize: StrCast(Doc.UserDoc().fontSize),
-            _fontFamily: StrCast(Doc.UserDoc().fontFamily)
-        });
-        FormattedTextBox.SelectOnLoad = target[Id];
-        FormattedTextBox.DontSelectInitialText = true;
-        //this.sidebarAllTags.map(tag => target[tag] = tag);
-        DocUtils.MakeLink({ doc: anchor }, { doc: target }, "inline markup", "annotation");
-        this._sidebarRef.current?.addDocument(target);
-    }
     toggleSidebar = () => {
-        if (this.layoutDoc.nativeWidth === this.layoutDoc[this.fieldKey + "-nativeWidth"]) {
-            this.layoutDoc.nativeWidth = 250 + NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]);
-        } else {
-            this.layoutDoc.nativeWidth = NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]);
-        }
-        this.layoutDoc._width = NumCast(this.layoutDoc._nativeWidth) * (NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]) / NumCast(this.layoutDoc[this.fieldKey + "-nativeHeight"]));
+        const nativeWidth = NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]);
+        const nativeHeight = NumCast(this.layoutDoc[this.fieldKey + "-nativeHeight"]);
+        this.layoutDoc.nativeWidth = nativeWidth + (this.layoutDoc.nativeWidth === nativeWidth ? 250 : 0);
+        this.layoutDoc._width = NumCast(this.layoutDoc._nativeWidth) * (nativeWidth / nativeHeight);
     }
     sidebarWidth = () => !this.layoutDoc._showSidebar ? 0 : (NumCast(this.layoutDoc.nativeWidth) - Doc.NativeWidth(this.dataDoc)) * this.props.PanelWidth() / NumCast(this.layoutDoc.nativeWidth);
 
@@ -513,14 +486,14 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                                 ScreenToLocalTransform={this.scrollXf}
                                 renderDepth={this.props.renderDepth + 1}
                                 scaling={returnOne}
-                                //pointerEvents={this._isAnnotating || SnappingManager.GetIsDragging() ? "all" : "none"}
-                                childPointerEvents={true} />
+                                childPointerEvents={true}
+                                pointerEvents={this._isAnnotating || SnappingManager.GetIsDragging() ? "all" : "none"} />
                             {this.annotationLayer}
                         </div>
                     </div>
                     {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) :
                         <MarqueeAnnotator rootDoc={this.rootDoc}
-                            anchorMenuClick={this.anchorMenuClick}
+                            anchorMenuClick={this._sidebarRef.current?.anchorMenuClick}
                             scrollTop={0}
                             down={this._marqueeing} scaling={returnOne}
                             addDocument={this.addDocument}
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 0a46b2120..163336e3e 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -55,7 +55,7 @@ interface IViewerProps extends FieldViewProps {
     setPdfViewer: (view: PDFViewer) => void;
     ContentScaling?: () => number;
     sidebarWidth: () => number;
-    anchorMenuClick: (anchor: Doc) => void;
+    anchorMenuClick?: (anchor: Doc) => void;
 }
 
 /**