clean up of LightboxView

9 files changed, 193 insertions, 297 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 6c55895ef..ff7daa2eb 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -307,7 +307,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                     openDoc = DocListCast(openDoc.proto_embeddings).find(embedding => !embedding.embedContainer) ?? Doc.MakeEmbedding(openDoc);
                     Doc.deiconifyView(openDoc);
                 }
-                LightboxView.SetLightboxDoc(
+                LightboxView.Instance.SetLightboxDoc(
                     openDoc,
                     undefined,
                     selectedDocs.slice(1).map(view => view.rootDoc)
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 93eaec959..c91f8455a 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -1,12 +1,13 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Toggle, ToggleType, Type } from 'browndash-components';
-import { action, computed, observable } from 'mobx';
+import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, DocListCast, Opt } from '../../fields/Doc';
+import { Doc, DocListCast, FieldResult, Opt } from '../../fields/Doc';
 import { InkTool } from '../../fields/InkField';
-import { BoolCast, Cast, NumCast, StrCast } from '../../fields/Types';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue } from '../../Utils';
+import { Cast, NumCast } from '../../fields/Types';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue, Utils } from '../../Utils';
 import { DocUtils } from '../documents/Documents';
 import { DocumentManager } from '../util/DocumentManager';
 import { LinkManager } from '../util/LinkManager';
@@ -27,216 +28,210 @@ interface LightboxViewProps {
     maxBorder: number[];
 }
 
-type LightboxSavedState = {
-    panX: Opt<number>;
-    panY: Opt<number>;
-    scale: Opt<number>;
-    scrollTop: Opt<number>;
-    layout_fieldKey: Opt<string>;
-};
+const savedKeys = ['freeform_panX', 'freeform_panY', 'freeform_scale', 'layout_scrollTop', 'layout_fieldKey'];
+type LightboxSavedState = { [key: string]: FieldResult; }; // prettier-ignore
 @observer
 export class LightboxView extends React.Component<LightboxViewProps> {
-    @computed public static get LightboxDoc() {
-        return this._doc;
+    public static IsLightboxDocView(path: DocumentView[]) { return (path ?? []).includes(LightboxView.Instance?._docView!); } // prettier-ignore
+    public static get LightboxDoc() { return LightboxView.Instance?._doc; } // prettier-ignore
+    static Instance: LightboxView;
+    private _path: {
+        doc: Opt<Doc>; //
+        target: Opt<Doc>;
+        history: { doc: Doc; target?: Doc }[];
+        future: Doc[];
+        saved: LightboxSavedState;
+    }[] = [];
+    private _savedState: LightboxSavedState = {};
+    private _history: { doc: Doc; target?: Doc }[] = [];
+    @observable private _future: Doc[] = [];
+    @observable private _layoutTemplate: Opt<Doc>;
+    @observable private _layoutTemplateString: Opt<string>;
+    @observable private _doc: Opt<Doc>;
+    @observable private _docTarget: Opt<Doc>;
+    @observable private _docView: Opt<DocumentView>;
+
+    @computed get leftBorder() { return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]); } // prettier-ignore
+    @computed get topBorder()  { return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]); } // prettier-ignore
+
+    constructor(props: any) {
+        super(props);
+        if (LightboxView.Instance) console.log('SDFSFASFASFSALFKJD:SLFJS:LDFJKS:LFJS:LDJFL:SDFJL:SDJF:LSJ');
+        LightboxView.Instance = this;
     }
-    private static LightboxDocTemplate = () => LightboxView._layoutTemplate;
-    @observable private static _layoutTemplate: Opt<Doc>;
-    @observable private static _layoutTemplateString: Opt<string>;
-    @observable private static _doc: Opt<Doc>;
-    @observable private static _docTarget: Opt<Doc>;
-    @observable private static _childFilters: string[] = []; // filters
-    private static _savedState: Opt<LightboxSavedState>;
-    private static _history: Opt<{ doc: Doc; target?: Doc }[]> = [];
-    @observable private static _future: Opt<Doc[]> = [];
-    @observable private static _docView: Opt<DocumentView>;
-    static path: { doc: Opt<Doc>; target: Opt<Doc>; history: Opt<{ doc: Doc; target?: Doc }[]>; future: Opt<Doc[]>; saved: Opt<LightboxSavedState> }[] = [];
-    @action public static SetLightboxDoc(doc: Opt<Doc>, target?: Doc, future?: Doc[], layoutTemplate?: Doc | string) {
-        if (this.LightboxDoc && this.LightboxDoc !== doc && this._savedState) {
-            if (this._savedState.panX !== undefined) this.LightboxDoc._freeform_panX = this._savedState.panX;
-            if (this._savedState.panY !== undefined) this.LightboxDoc._freeform_panY = this._savedState.panY;
-            if (this._savedState.scrollTop !== undefined) this.LightboxDoc._layout_scrollTop = this._savedState.scrollTop;
-            if (this._savedState.scale !== undefined) this.LightboxDoc._freeform_scale = this._savedState.scale;
-            this.LightboxDoc.layout_fieldKey = this._savedState.layout_fieldKey ? this._savedState.layout_fieldKey : undefined;
-        }
-        if (!doc) {
-            this._childFilters && (this._childFilters.length = 0);
-            this._future = this._history = [];
-            Doc.ActiveTool = InkTool.None;
-            DocumentView.ExploreMode = false;
-        } else {
+
+    @action
+    public SetLightboxDoc(doc: Opt<Doc>, target?: Doc, future?: Doc[], layoutTemplate?: Doc | string) {
+        const lightDoc = this._doc;
+        lightDoc && lightDoc !== doc && savedKeys.forEach(key => (lightDoc[key] = this._savedState[key]));
+        this._savedState = {};
+
+        if (doc) {
+            lightDoc !== doc && savedKeys.map(key => (this._savedState[key] = Doc.Get(doc, key, true)));
             const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement();
             l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen');
             CollectionStackedTimeline.CurrentlyPlaying?.forEach(dv => dv.ComponentView?.Pause?.());
-            //TabDocView.PinDoc(doc, { hidePresBox: true });
-            this._history ? this._history.push({ doc, target }) : (this._history = [{ doc, target }]);
-            if (doc !== LightboxView.LightboxDoc) {
-                this._savedState = {
-                    layout_fieldKey: StrCast(doc.layout_fieldKey),
-                    panX: Cast(doc.freeform_panX, 'number', null),
-                    panY: Cast(doc.freeform_panY, 'number', null),
-                    scale: Cast(doc.freeform_scale, 'number', null),
-                    scrollTop: Cast(doc.layout_scrollTop, 'number', null),
-                };
-            }
+            this._history.push({ doc, target });
+        } else {
+            this._future = [];
+            this._history = [];
+            Doc.ActiveTool = InkTool.None;
+            DocumentView.ExploreMode = false;
         }
+        SelectionManager.DeselectAll();
         if (future) {
-            this._future = [
-                ...(this._future ?? []),
-                ...(this.LightboxDoc ? [this.LightboxDoc] : []),
+            this._future.push(
+                ...(this._doc ? [this._doc] : []),
                 ...future
                     .slice()
                     .sort((a, b) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow))
-                    .sort((a, b) => LinkManager.Links(a).length - LinkManager.Links(b).length),
-            ];
+                    .sort((a, b) => LinkManager.Links(a).length - LinkManager.Links(b).length)
+            );
         }
         this._doc = doc;
         this._layoutTemplate = layoutTemplate instanceof Doc ? layoutTemplate : undefined;
         if (doc && (typeof layoutTemplate === 'string' ? layoutTemplate : undefined)) {
             doc.layout_fieldKey = layoutTemplate;
         }
-        this._docTarget = target || doc;
+        this._docTarget = target ?? doc;
 
         return true;
     }
-    public static IsLightboxDocView(path: DocumentView[]) {
-        return (path ?? []).includes(this._docView!);
-    }
-    @computed get leftBorder() {
-        return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]);
-    }
-    @computed get topBorder() {
-        return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]);
-    }
-    lightboxWidth = () => this.props.PanelWidth - this.leftBorder * 2;
-    lightboxHeight = () => this.props.PanelHeight - this.topBorder * 2;
-    lightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1);
-    navBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => {
-        return (
-            <div
-                className="lightboxView-navBtn-frame"
-                style={{
-                    display: display(),
-                    left,
-                    width: bottom !== undefined ? undefined : Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]),
-                    bottom,
-                }}>
-                <div className="lightboxView-navBtn" title={color} style={{ top, color: SettingsManager.userColor, background: undefined }} onClick={click}>
-                    <div style={{ height: 10 }}>{color}</div>
-                    <FontAwesomeIcon icon={icon as any} size="3x" />
-                </div>
-            </div>
-        );
-    };
-    public static GetSavedState(doc: Doc) {
-        return this.LightboxDoc === doc && this._savedState ? this._savedState : undefined;
-    }
 
-    // adds a cookie to the lightbox view - the cookie becomes part of a filter which will display any documents whose cookie metadata field matches this cookie
-    @action
-    public static SetCookie(cookie: string) {
-        if (this.LightboxDoc && cookie) {
-            this._childFilters = (f => (this._childFilters ? [this._childFilters.push(f) as any, this._childFilters][1] : [f]))(`cookies:${cookie}:provide`);
-        }
-    }
-    public static AddDocTab = (doc: Doc, location: OpenWhere, layoutTemplate?: Doc | string) => {
-        SelectionManager.DeselectAll();
-        return LightboxView.SetLightboxDoc(
+    public AddDocTab = (doc: Doc, location: OpenWhere, layoutTemplate?: Doc | string) =>
+        this.SetLightboxDoc(
             doc,
             undefined,
-            [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...(LightboxView._future ?? [])].sort(
-                (a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)
+            [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...this._future].sort(
+                (a, b) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)
             ),
             layoutTemplate
         );
-    };
-    childFilters = () => LightboxView._childFilters || [];
-    addDocTab = LightboxView.AddDocTab;
-    @action public static Next() {
-        const doc = LightboxView._doc!;
-        const target = (LightboxView._docTarget = this._future?.pop());
+    @action
+    next = () => {
+        const lightDoc = this._doc;
+        if (!lightDoc) return;
+        const target = (this._docTarget = this._future.pop());
         const targetDocView = target && DocumentManager.Instance.getLightboxDocumentView(target);
         if (targetDocView && target) {
             const l = DocUtils.MakeLinkToActiveAudio(() => targetDocView.ComponentView?.getAnchor?.(true) || target).lastElement();
             l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen');
             DocumentManager.Instance.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 });
-            if (LightboxView._history?.lastElement().target !== target) LightboxView._history?.push({ doc, target });
+            if (this._history.lastElement().target !== target) this._history.push({ doc: lightDoc, target });
+        } else if (!target && this._path.length) {
+            savedKeys.forEach(key => (lightDoc[key] = this._savedState[key]));
+            this._path.pop();
         } else {
-            if (!target && LightboxView.path.length) {
-                const saved = LightboxView._savedState;
-                if (LightboxView.LightboxDoc && saved) {
-                    LightboxView.LightboxDoc._freeform_panX = saved.panX;
-                    LightboxView.LightboxDoc._freeform_panY = saved.panY;
-                    LightboxView.LightboxDoc._freeform_scale = saved.scale;
-                    LightboxView.LightboxDoc._layout_scrollTop = saved.scrollTop;
-                }
-                const pop = LightboxView.path.pop();
-                if (pop) {
-                    LightboxView._doc = pop.doc;
-                    LightboxView._docTarget = pop.target;
-                    LightboxView._future = pop.future;
-                    LightboxView._history = pop.history;
-                    LightboxView._savedState = pop.saved;
-                }
-            } else {
-                LightboxView.SetLightboxDoc(target);
-            }
+            this.SetLightboxDoc(target);
         }
-    }
-
-    @action public static Previous() {
-        const previous = LightboxView._history?.pop();
-        if (!previous || !LightboxView._history?.length) {
-            LightboxView.SetLightboxDoc(undefined);
+    };
+    @action
+    previous = () => {
+        const previous = this._history.pop();
+        if (!previous || !this._history.length) {
+            this.SetLightboxDoc(undefined);
             return;
         }
-        const { doc, target } = LightboxView._history?.lastElement();
+        const { doc, target } = this._history.lastElement();
         const docView = DocumentManager.Instance.getLightboxDocumentView(target || doc);
         if (docView) {
-            LightboxView._docTarget = target;
+            this._docTarget = target;
             target && DocumentManager.Instance.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 });
         } else {
-            LightboxView.SetLightboxDoc(doc, target);
+            this.SetLightboxDoc(doc, target);
         }
-        if (LightboxView._future?.lastElement() !== previous.target || previous.doc) LightboxView._future?.push(previous.target || previous.doc);
-    }
+        if (this._future.lastElement() !== previous.target || previous.doc) this._future.push(previous.target || previous.doc);
+    };
     @action
     stepInto = () => {
-        LightboxView.path.push({
-            doc: LightboxView.LightboxDoc,
-            target: LightboxView._docTarget,
-            future: LightboxView._future,
-            history: LightboxView._history,
-            saved: LightboxView._savedState,
+        this._path.push({
+            doc: this._doc,
+            target: this._docTarget,
+            future: this._future,
+            history: this._history,
+            saved: this._savedState,
         });
-        const coll = LightboxView._docTarget;
-        if (coll) {
-            const fieldKey = Doc.LayoutFieldKey(coll);
-            const contents = [...DocListCast(coll[fieldKey]), ...DocListCast(coll[fieldKey + '_annotations'])];
-            const links = LinkManager.Links(coll)
-                .map(link => LinkManager.getOppositeAnchor(link, coll))
-                .filter(doc => doc)
-                .map(doc => doc!);
-            LightboxView.SetLightboxDoc(coll, undefined, contents.length ? contents : links);
+        if (this._docTarget) {
+            const fieldKey = Doc.LayoutFieldKey(this._docTarget);
+            const contents = [...DocListCast(this._docTarget[fieldKey]), ...DocListCast(this._docTarget[fieldKey + '_annotations'])];
+            const links = LinkManager.Links(this._docTarget)
+                .map(link => LinkManager.getOppositeAnchor(link, this._docTarget!)!)
+                .filter(doc => doc);
+            this.SetLightboxDoc(this._docTarget, undefined, contents.length ? contents : links);
+        }
+    };
+
+    downloadDoc = () => {
+        const lightDoc = this._docTarget ?? this._doc;
+        if (lightDoc) {
+            Doc.RemoveDocFromList(Doc.MyRecentlyClosed, 'data', lightDoc);
+            CollectionDockingView.AddSplit(lightDoc, OpenWhereMod.none);
+            this.SetLightboxDoc(undefined);
         }
     };
+    toggleFitWidth = () => this._doc && (this._doc._layout_fitWidth = !this._doc._layout_fitWidth);
+    togglePen = () => (Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen);
+    toggleExplore = () => (DocumentView.ExploreMode = !DocumentView.ExploreMode);
 
-    future = () => LightboxView._future;
+    lightboxDoc = () => this._doc;
+    lightboxWidth = () => this.props.PanelWidth - this.leftBorder * 2;
+    lightboxHeight = () => this.props.PanelHeight - this.topBorder * 2;
+    lightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1);
+    lightboxDocTemplate = () => this._layoutTemplate;
+    future = () => this._future;
+
+    renderNavBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: IconProp, display: any, click: () => void, color?: string) => {
+        return (
+            <div
+                className="lightboxView-navBtn-frame"
+                style={{
+                    display: display ? '' : 'none',
+                    left,
+                    width: bottom !== undefined ? undefined : Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]),
+                    bottom,
+                }}>
+                <div
+                    className="lightboxView-navBtn"
+                    title={color}
+                    style={{ top, color: SettingsManager.userColor, background: undefined }}
+                    onClick={e => {
+                        e.stopPropagation();
+                        click();
+                    }}>
+                    <div style={{ height: 10 }}>{color}</div>
+                    <FontAwesomeIcon icon={icon} size="3x" />
+                </div>
+            </div>
+        );
+    };
     render() {
         let downx = 0,
             downy = 0;
-        return !LightboxView.LightboxDoc ? null : (
+        const toggleBtn = (classname: string, tooltip: string, toggleBackground: any, icon: IconProp, icon2: IconProp | string, onClick: () => void) => (
+            <div className={classname}>
+                <Toggle
+                    tooltip={tooltip}
+                    color={SettingsManager.userColor}
+                    background={toggleBackground ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
+                    toggleType={ToggleType.BUTTON}
+                    type={Type.TERT}
+                    icon={<FontAwesomeIcon icon={toggleBackground ? icon : (icon2 as IconProp) || icon} size="sm" />}
+                    onClick={e => {
+                        e.stopPropagation();
+                        runInAction(onClick);
+                    }}
+                />
+            </div>
+        );
+        return !this._doc ? null : (
             <div
                 className="lightboxView-frame"
+                style={{ background: SettingsManager.userBackgroundColor }}
                 onPointerDown={e => {
                     downx = e.clientX;
                     downy = e.clientY;
                 }}
-                style={{ background: SettingsManager.userBackgroundColor }}
-                onClick={e => {
-                    if (Math.abs(downx - e.clientX) < 4 && Math.abs(downy - e.clientY) < 4) {
-                        LightboxView.SetLightboxDoc(undefined);
-                    }
-                }}>
+                onClick={e => Utils.isClick(e.clientX, e.clientY, downx, downy, Date.now()) && this.SetLightboxDoc(undefined)}>
                 <div
                     className="lightboxView-contents"
                     style={{
@@ -248,16 +243,14 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                         background: SettingsManager.userBackgroundColor,
                         color: SettingsManager.userColor,
                     }}>
-                    {/* <CollectionMenu /> TODO:glr This is where it would go*/}
-
                     <GestureOverlay isActive={true}>
                         <DocumentView
-                            ref={action((r: DocumentView | null) => (LightboxView._docView = r !== null ? r : undefined))}
-                            Document={LightboxView.LightboxDoc}
+                            ref={action((r: DocumentView | null) => (this._docView = r !== null ? r : undefined))}
+                            Document={this._doc}
                             DataDoc={undefined}
                             PanelWidth={this.lightboxWidth}
                             PanelHeight={this.lightboxHeight}
-                            LayoutTemplate={LightboxView.LightboxDocTemplate}
+                            LayoutTemplate={this.lightboxDocTemplate}
                             isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected.
                             isContentActive={returnTrue}
                             styleProvider={DefaultStyleProvider}
@@ -265,13 +258,13 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                             renderDepth={0}
                             rootSelected={returnTrue}
                             docViewPath={returnEmptyDoclist}
-                            childFilters={this.childFilters}
+                            childFilters={returnEmptyFilter}
                             childFiltersByRanges={returnEmptyFilter}
                             searchFilterDocs={returnEmptyDoclist}
                             addDocument={undefined}
                             removeDocument={undefined}
                             whenChildContentsActiveChanged={emptyFunction}
-                            addDocTab={this.addDocTab}
+                            addDocTab={this.AddDocTab}
                             pinToPres={TabDocView.PinDoc}
                             bringToFront={emptyFunction}
                             onBrowseClick={DocumentView.exploreMode}
@@ -280,116 +273,34 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                     </GestureOverlay>
                 </div>
 
-                {this.navBtn(
-                    0,
-                    undefined,
-                    this.props.PanelHeight / 2 - 12.5,
-                    'chevron-left',
-                    () => (LightboxView.LightboxDoc && LightboxView._history?.length ? '' : 'none'),
-                    e => {
-                        e.stopPropagation();
-                        LightboxView.Previous();
-                    }
-                )}
-                {this.navBtn(
+                {this.renderNavBtn(0, undefined, this.props.PanelHeight / 2 - 12.5, 'chevron-left', this._doc && this._history.length, this.previous)}
+                {this.renderNavBtn(
                     this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]),
                     undefined,
                     this.props.PanelHeight / 2 - 12.5,
                     'chevron-right',
-                    () => (LightboxView.LightboxDoc && LightboxView._future?.length ? '' : 'none'),
-                    e => {
-                        e.stopPropagation();
-                        LightboxView.Next();
-                    },
-                    this.future()?.length.toString()
+                    this._doc && this._future.length,
+                    this.next,
+                    this.future().length.toString()
                 )}
-                <LightboxTourBtn navBtn={this.navBtn} future={this.future} stepInto={this.stepInto} />
-                <div className="lightboxView-navBtn">
-                    <Toggle
-                        tooltip="toggle reading view"
-                        color={SettingsManager.userColor}
-                        background={BoolCast(LightboxView.LightboxDoc!._layout_fitWidth) ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
-                        toggleType={ToggleType.BUTTON}
-                        type={Type.TERT}
-                        toggleStatus={BoolCast(LightboxView.LightboxDoc!._layout_fitWidth)}
-                        onClick={e => {
-                            e.stopPropagation();
-                            LightboxView.LightboxDoc!._layout_fitWidth = !LightboxView.LightboxDoc!._layout_fitWidth;
-                        }}
-                        icon={<FontAwesomeIcon icon={LightboxView.LightboxDoc?._layout_fitWidth ? 'book-open' : 'book'} size="sm" />}
-                    />
-                </div>
-                <div className="lightboxView-tabBtn">
-                    <Toggle
-                        tooltip="open document in a tab"
-                        color={SettingsManager.userColor}
-                        background={SettingsManager.userBackgroundColor}
-                        toggleType={ToggleType.BUTTON}
-                        type={Type.TERT}
-                        icon={<FontAwesomeIcon icon="file-download" size="sm" />}
-                        onClick={e => {
-                            const lightdoc = LightboxView._docTarget || LightboxView._doc!;
-                            e.stopPropagation();
-                            Doc.RemoveDocFromList(Doc.MyRecentlyClosed, 'data', lightdoc);
-                            CollectionDockingView.AddSplit(lightdoc, OpenWhereMod.none);
-                            SelectionManager.DeselectAll();
-                            LightboxView.SetLightboxDoc(undefined);
-                        }}
-                    />
-                </div>
-                <div className="lightboxView-penBtn">
-                    <Toggle
-                        tooltip="toggle pen annotation"
-                        color={SettingsManager.userColor}
-                        background={Doc.ActiveTool === InkTool.Pen ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
-                        toggleType={ToggleType.BUTTON}
-                        toggleStatus={Doc.ActiveTool === InkTool.Pen}
-                        type={Type.TERT}
-                        icon={<FontAwesomeIcon icon="pen" size="sm" />}
-                        onClick={e => {
-                            e.stopPropagation();
-                            Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
-                        }}
-                    />
-                </div>
-                <div className="lightboxView-exploreBtn">
-                    <Toggle
-                        tooltip="toggle explore mode to navigate among documents only"
-                        color={SettingsManager.userColor}
-                        background={DocumentView.ExploreMode ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
-                        toggleType={ToggleType.BUTTON}
-                        type={Type.TERT}
-                        toggleStatus={DocumentView.ExploreMode}
-                        icon={<FontAwesomeIcon icon="globe-americas" size="sm" />}
-                        onClick={action(e => {
-                            e.stopPropagation();
-                            DocumentView.ExploreMode = !DocumentView.ExploreMode;
-                        })}
-                    />
-                </div>
+                <LightboxTourBtn lightboxDoc={this.lightboxDoc} navBtn={this.renderNavBtn} future={this.future} stepInto={this.stepInto} />
+                {toggleBtn('lightboxView-navBtn', 'toggle reading view', this._doc?._layout_fitWidth, 'book-open', 'book', this.toggleFitWidth)}
+                {toggleBtn('lightboxView-tabBtn', 'open document in a tab', false, 'file-download', '', this.downloadDoc)}
+                {toggleBtn('lightboxView-penBtn', 'toggle pen annotation', Doc.ActiveTool === InkTool.Pen, 'pen', '', this.togglePen)}
+                {toggleBtn('lightboxView-exploreBtn', 'toggle navigate only mode', DocumentView.ExploreMode, 'globe-americas', '', this.toggleExplore)}
             </div>
         );
     }
 }
 interface LightboxTourBtnProps {
-    navBtn: (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => JSX.Element;
+    navBtn: (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: IconProp, display: any, click: () => void, color?: string) => JSX.Element;
     future: () => Opt<Doc[]>;
     stepInto: () => void;
+    lightboxDoc: () => Opt<Doc>;
 }
 @observer
 export class LightboxTourBtn extends React.Component<LightboxTourBtnProps> {
     render() {
-        return this.props.navBtn(
-            '50%',
-            0,
-            0,
-            'chevron-down',
-            () => (LightboxView.LightboxDoc /*&& this.props.future()?.length*/ ? '' : 'none'),
-            e => {
-                e.stopPropagation();
-                this.props.stepInto();
-            },
-            ''
-        );
+        return this.props.navBtn('50%', 0, 0, 'chevron-down', this.props.lightboxDoc(), this.props.stepInto, '');
     }
 }
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ccb46d7ec..f67bd3288 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -701,7 +701,7 @@ export class MainView extends React.Component {
         if (doc.dockingConfig && !keyValue) return DashboardView.openDashboard(doc);
         // prettier-ignore
         switch (whereFields[0]) {
-            case OpenWhere.lightbox:   return LightboxView.AddDocTab(doc, location);
+            case OpenWhere.lightbox:   return LightboxView.Instance.AddDocTab(doc, location);
             case OpenWhere.close:      return CollectionDockingView.CloseSplit(doc, whereMods);
             case OpenWhere.toggle:     return CollectionDockingView.ToggleSplit(doc, whereMods, undefined, "dontSelectOnActivate"); // bcz: hack!  mark the toggle so that it won't be selected on activation- this is needed so that the backlinks menu can toggle views of targets on and off without selecting them
             case OpenWhere.add:default:return CollectionDockingView.AddSplit(doc, whereMods, undefined, undefined, keyValue);
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index d0eadd9aa..f722682c9 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -634,7 +634,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu
                     className="antimodeMenu-button"
                     onPointerDown={() => {
                         const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
-                        LightboxView.SetLightboxDoc(targetDoc, undefined, docs);
+                        LightboxView.Instance.SetLightboxDoc(targetDoc, undefined, docs);
                     }}>
                     <FontAwesomeIcon className="colMenu-icon" icon="desktop" size="lg" />
                 </button>
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index bb6d94590..ac72a45e0 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -336,7 +336,7 @@ export class CollectionNoteTakingView extends CollectionSubView() {
     // onPointerMove is used to preview where a document will drop in a column once a drag is complete.
     @action
     onPointerMove = (force: boolean, ex: number, ey: number) => {
-        if (this.childDocList && (this.childDocList.includes(DragManager.DocDragData?.draggedDocuments.lastElement()!) || force || this.isContentActive())) {
+        if (this.childDocList?.includes(DragManager.DocDragData?.draggedDocuments?.lastElement() as any) || force || this.isContentActive()) {
             // get the current docs for the column based on the mouse's x coordinate
             const xCoord = this.props.ScreenToLocalTransform().transformPoint(ex, ey)[0] - 2 * this.gridGap;
             const colDocs = this.getDocsFromXCoord(xCoord);
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 180578a36..df36fdfbf 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -379,7 +379,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                                                 return true;
                                             }
                                        }
-                                       return LightboxView.AddDocTab(doc, location);
+                                       return LightboxView.Instance.AddDocTab(doc, location);
             case OpenWhere.close:      return CollectionDockingView.CloseSplit(doc, whereMods);
             case OpenWhere.replace:    return CollectionDockingView.ReplaceTab(doc, whereMods, this.stack, undefined, keyValue);
             case OpenWhere.toggle:     return CollectionDockingView.ToggleSplit(doc, whereMods, this.stack, "dontSelectOnActivate", keyValue);
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 943408010..0aaa9c538 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -468,7 +468,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                         }, console.log  );
                     UndoManager.RunInBatch(() => (func().result?.select === true ? this.props.select(false) : ''), 'on double click');
                 } else if (!Doc.IsSystem(this.rootDoc) && (defaultDblclick === undefined || defaultDblclick === 'default')) {
-                    UndoManager.RunInBatch(() => LightboxView.AddDocTab(this.rootDoc, OpenWhere.lightbox), 'double tap');
+                    UndoManager.RunInBatch(() => LightboxView.Instance.AddDocTab(this.rootDoc, OpenWhere.lightbox), 'double tap');
                     SelectionManager.DeselectAll();
                     Doc.UnBrushDoc(this.props.Document);
                 } else {
@@ -760,7 +760,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             const appearanceItems: ContextMenuProps[] = appearance && 'subitems' in appearance ? appearance.subitems : [];
 
             if (this.props.renderDepth === 0) {
-                appearanceItems.push({ description: 'Open in Lightbox', event: () => LightboxView.SetLightboxDoc(this.rootDoc), icon: 'hand-point-right' });
+                appearanceItems.push({ description: 'Open in Lightbox', event: () => LightboxView.Instance.SetLightboxDoc(this.rootDoc), icon: 'hand-point-right' });
             }
             !Doc.noviceMode && templateDoc && appearanceItems.push({ description: 'Open Template   ', event: () => this.props.addDocTab(templateDoc, OpenWhere.addRight), icon: 'eye' });
             !appearance && appearanceItems.length && cm.addItem({ description: 'UI Controls...', subitems: appearanceItems, icon: 'compass' });
@@ -1415,7 +1415,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         const docId = Doc.CurrentUserEmail + Doc.GetProto(linkAnchor)[Id] + '-pivotish';
         // prettier-ignore
         DocServer.GetRefField(docId).then(docx =>
-            LightboxView.SetLightboxDoc(
+            LightboxView.Instance.SetLightboxDoc(
                 (docx as Doc) ?? // reuse existing pivot view of documents, or else create a new collection
                 Docs.Create.StackingDocument([], { title: linkAnchor.title + '-pivot', _width: 500, _height: 500, target: linkAnchor, updateContentsScript: ScriptField.MakeScript('updateLinkCollection(self, self.target)') }, docId)
             )
@@ -1701,8 +1701,7 @@ ScriptingGlobals.add(function deiconifyView(documentView: DocumentView) {
 });
 
 ScriptingGlobals.add(function deiconifyViewToLightbox(documentView: DocumentView) {
-    //documentView.iconify(() =>
-    LightboxView.AddDocTab(documentView.rootDoc, OpenWhere.lightbox, 'layout'); //, 0);
+    LightboxView.Instance.AddDocTab(documentView.rootDoc, OpenWhere.lightbox, 'layout'); //, 0);
 });
 
 ScriptingGlobals.add(function toggleDetail(dv: DocumentView, detailLayoutKeySuffix: string) {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 515952ae4..7a175c9f6 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1936,7 +1936,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         const color = !annotated ? Colors.WHITE : Colors.BLACK;
         const backgroundColor = !annotated ? (this.sidebarWidth() ? Colors.MEDIUM_BLUE : Colors.BLACK) : this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.WidgetColor + (annotated ? ':annotated' : ''));
 
-        return !annotated && (!this.props.isContentActive() || SnappingManager.GetIsDragging()) ? null : (
+        return !annotated && (!this.props.isContentActive() || SnappingManager.GetIsDragging() || Doc.ActiveTool !== InkTool.None) ? null : (
             <div
                 className="formattedTextBox-sidebar-handle"
                 onPointerDown={this.sidebarDown}
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 3d7c68bcd..c4ef07123 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -204,16 +204,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         );
         this._disposers.editing = reaction(
             () => this.layoutDoc.presentation_status === PresStatus.Edit,
-            editing => {
-                if (editing) {
-                    this.childDocs.forEach(doc => {
-                        if (doc.presentation_indexed !== undefined) {
-                            this.progressivizedItems(doc)?.forEach(indexedDoc => (indexedDoc.opacity = undefined));
-                            doc.presentation_indexed = Math.min(this.progressivizedItems(doc)?.length ?? 0, 1);
-                        }
-                    });
-                }
-            }
+            editing => editing && 
+                this.childDocs.filter(doc => doc.presentation_indexed !== undefined).forEach(doc => {
+                    this.progressivizedItems(doc)?.forEach(indexedDoc => (indexedDoc.opacity = undefined));
+                    doc.presentation_indexed = Math.min(this.progressivizedItems(doc)?.length ?? 0, 1);
+                }) // prettier-ignore
         );
     }
 
@@ -283,19 +278,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     };
 
     // go to documents chain
-    runSubroutines = (childrenToRun: Doc[], normallyNextSlide: Doc) => {
-        console.log(childrenToRun, normallyNextSlide, 'runSUBFUNC');
-        if (childrenToRun === undefined) {
-            console.log('children undefined');
-            return;
+    runSubroutines = (childrenToRun: Opt<Doc[]>, normallyNextSlide: Doc) => {
+        if (childrenToRun && childrenToRun[0] !== normallyNextSlide) {
+            childrenToRun.forEach(child => DocumentManager.Instance.showDocument(child, {}));
         }
-        if (childrenToRun[0] === normallyNextSlide) {
-            return;
-        }
-
-        childrenToRun.forEach(child => {
-            DocumentManager.Instance.showDocument(child, {});
-        });
     };
 
     // Called when the user activates 'next' - to move to the next part of the pres. trail
@@ -806,7 +792,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         if (activeItem.presentation_openInLightbox) {
             const context = DocCast(targetDoc.annotationOn) ?? targetDoc;
             if (!DocumentManager.Instance.getLightboxDocumentView(context)) {
-                LightboxView.SetLightboxDoc(context);
+                LightboxView.Instance.SetLightboxDoc(context);
             }
         }
         if (targetDoc) {
@@ -815,7 +801,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             DocumentManager.Instance.AddViewRenderedCb(LightboxView.LightboxDoc, dv => {
                 // if target or the doc it annotates is not in the lightbox, then close the lightbox
                 if (!DocumentManager.Instance.getLightboxDocumentView(DocCast(targetDoc.annotationOn) ?? targetDoc)) {
-                    LightboxView.SetLightboxDoc(undefined);
+                    LightboxView.Instance.SetLightboxDoc(undefined);
                 }
                 DocumentManager.Instance.showDocument(targetDoc, options, finished);
             });
@@ -909,7 +895,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             break;
                     }
                 });
-            LightboxView.SetLightboxDoc(undefined);
+            LightboxView.Instance.SetLightboxDoc(undefined);
             Doc.RemFromMyOverlay(this.rootDoc);
             return PresStatus.Edit;
         };