changed lightbox to navigate within frame if next target is alreay there, otherwise create it. changed focus default to call afterFocus(). fixed bug of zooming on target doc to compute scale correctly.

17 files changed, 74 insertions, 48 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 77b43db9b..87ed142f8 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -175,10 +175,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
                 } else if (e.altKey) {    // open same document in new tab
                     CollectionDockingView.ToggleSplit(Cast(selectedDocs[0].props.Document._fullScreenView, Doc, null) || selectedDocs[0].props.Document, "right");
                 } else {
-                    runInAction(() => {
-                        LightboxView.LightboxDoc = selectedDocs[0].props.Document;
-                        LightboxView.LightboxFuture = selectedDocs.slice(1).map(view => view.props.Document);
-                    });
+                    LightboxView.SetLightboxDoc(selectedDocs[0].props.Document, selectedDocs.slice(1).map(view => view.props.Document));
                 }
             }
         }
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index d7e7e055f..b4051194f 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -873,7 +873,7 @@ export class GestureOverlay extends Touchable {
                 styleProvider={returnEmptyString}
                 layerProvider={undefined}
                 docViewPath={returnEmptyDoclist}
-                focus={emptyFunction}
+                focus={DocUtils.DefaultFocus}
                 parentActive={returnTrue}
                 whenActiveChanged={emptyFunction}
                 bringToFront={emptyFunction}
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 09b95315c..3ebcda219 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -130,7 +130,7 @@ export class KeyManager {
                 }
                 if (doDeselect) {
                     SelectionManager.DeselectAll();
-                    LightboxView.LightboxDoc = undefined;
+                    LightboxView.SetLightboxDoc(undefined);
                 }
                 DictationManager.Controls.stop();
                 GoogleAuthenticationManager.Instance.cancel();
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 4e9491ec6..fbfc9672f 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -9,6 +9,8 @@ import { Transform } from '../util/Transform';
 import "./LightboxView.scss";
 import { DocumentView } from './nodes/DocumentView';
 import { DefaultStyleProvider } from './StyleProvider';
+import { DocUtils } from '../documents/Documents';
+import { DocumentManager } from '../util/DocumentManager';
 
 interface LightboxViewProps {
     PanelWidth: number;
@@ -18,7 +20,16 @@ interface LightboxViewProps {
 
 @observer
 export class LightboxView extends React.Component<LightboxViewProps> {
-    @observable public static LightboxDoc: Opt<Doc>;
+    @observable static LightboxDoc: Opt<Doc>;
+    @action public static SetLightboxDoc(doc: Opt<Doc>, future?: Doc[]) {
+        LightboxView.LightboxDoc = doc;
+        if (!doc) {
+            LightboxView.LightboxFuture = LightboxView.LightboxHistory = [];
+        } else if (future) {
+            LightboxView.LightboxFuture = future;
+        }
+        return true;
+    }
     public static IsLightboxDocView(path: DocumentView[]) { return path.includes(LightboxView.LightboxDocView.current!); }
     public static LightboxHistory: (Opt<Doc>)[] = [];
     public static LightboxFuture: (Opt<Doc>)[] = [];
@@ -47,13 +58,11 @@ export class LightboxView extends React.Component<LightboxViewProps> {
         return !LightboxView.LightboxDoc ? (null) :
             <div className="lightboxView-frame"
                 onPointerDown={e => { downx = e.clientX; downy = e.clientY; }}
-                onClick={action(e => {
+                onClick={e => {
                     if (Math.abs(downx - e.clientX) < 4 && Math.abs(downy - e.clientY) < 4) {
-                        LightboxView.LightboxHistory = [];
-                        LightboxView.LightboxFuture = [];
-                        LightboxView.LightboxDoc = undefined;
+                        LightboxView.SetLightboxDoc(undefined);
                     }
-                })}  >
+                }}  >
                 <div className="lightboxView-contents" style={{
                     left: this.leftBorder,
                     top: this.topBorder,
@@ -74,7 +83,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                         ScreenToLocalTransform={this.lightboxScreenToLocal}
                         PanelWidth={this.lightboxWidth}
                         PanelHeight={this.lightboxHeight}
-                        focus={emptyFunction}
+                        focus={DocUtils.DefaultFocus}
                         parentActive={returnTrue}
                         whenActiveChanged={emptyFunction}
                         bringToFront={emptyFunction}
@@ -87,18 +96,31 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                 </div>
                 {this.navBtn(undefined, "chevron-left",
                     () => LightboxView.LightboxDoc && LightboxView.LightboxHistory.length ? "" : "none",
-                    action(e => {
+                    e => {
                         e.stopPropagation();
-                        const popped = LightboxView.LightboxHistory.pop();
-                        if (LightboxView.LightboxHistory.lastElement() !== LightboxView.LightboxFuture.lastElement()) LightboxView.LightboxFuture.push(popped);
-                        LightboxView.LightboxDoc = LightboxView.LightboxHistory.lastElement();
-                    }))}
+                        const previous = LightboxView.LightboxHistory.pop();
+                        const target = LightboxView.LightboxHistory.lastElement();
+                        const docView = target && DocumentManager.Instance.getLightboxDocumentView(target);
+                        if (docView && target) {
+                            if (LightboxView.LightboxFuture.lastElement() !== previous) LightboxView.LightboxFuture.push(previous);
+                            docView.focus(target, true, 0.9);
+                        } else {
+                            LightboxView.SetLightboxDoc(target);
+                        }
+                    })}
                 {this.navBtn(this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), "chevron-right",
                     () => LightboxView.LightboxDoc && LightboxView.LightboxFuture.length ? "" : "none",
-                    action(e => {
+                    e => {
                         e.stopPropagation();
-                        LightboxView.LightboxDoc = LightboxView.LightboxFuture.pop();
-                    }))}
+                        const target = LightboxView.LightboxFuture.pop();
+                        const docView = target && DocumentManager.Instance.getLightboxDocumentView(target);
+                        if (docView && target) {
+                            docView.focus(target, true, 0.9);
+                            if (LightboxView.LightboxHistory.lastElement() !== target) LightboxView.LightboxHistory.push(target);
+                        } else {
+                            LightboxView.SetLightboxDoc(target);
+                        }
+                    })}
 
             </div>;
     }
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ca07fa879..314922df8 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -16,7 +16,7 @@ import { TraceMobx } from '../../fields/util';
 import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick, Utils } from '../../Utils';
 import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
 import { DocServer } from '../DocServer';
-import { Docs } from '../documents/Documents';
+import { Docs, DocUtils } from '../documents/Documents';
 import { CurrentUserUtils } from '../util/CurrentUserUtils';
 import { DocumentManager } from '../util/DocumentManager';
 import { GroupManager } from '../util/GroupManager';
@@ -47,7 +47,7 @@ import { LinkMenu } from './linking/LinkMenu';
 import "./MainView.scss";
 import { AudioBox } from './nodes/AudioBox';
 import { DocumentLinksButton } from './nodes/DocumentLinksButton';
-import { DocumentView, DocumentViewProps } from './nodes/DocumentView';
+import { DocumentView, DocumentViewProps, DocAfterFocusFunc } from './nodes/DocumentView';
 import { FieldViewProps } from './nodes/FieldView';
 import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
 import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
@@ -257,7 +257,7 @@ export class MainView extends React.Component {
             ScreenToLocalTransform={Transform.Identity}
             PanelWidth={this.getPWidth}
             PanelHeight={this.getPHeight}
-            focus={emptyFunction}
+            focus={DocUtils.DefaultFocus}
             parentActive={returnTrue}
             whenActiveChanged={emptyFunction}
             bringToFront={emptyFunction}
@@ -350,7 +350,7 @@ export class MainView extends React.Component {
                         PanelHeight={this.getContentsHeight}
                         renderDepth={0}
                         scriptContext={CollectionDockingView.Instance.props.Document}
-                        focus={emptyFunction}
+                        focus={DocUtils.DefaultFocus}
                         parentActive={returnTrue}
                         whenActiveChanged={emptyFunction}
                         bringToFront={emptyFunction}
@@ -380,7 +380,7 @@ export class MainView extends React.Component {
                 PanelHeight={this.getContentsHeight}
                 renderDepth={0}
                 docViewPath={returnEmptyDoclist}
-                focus={emptyFunction}
+                focus={DocUtils.DefaultFocus}
                 styleProvider={DefaultStyleProvider}
                 layerProvider={undefined}
                 parentActive={returnTrue}
@@ -501,7 +501,7 @@ export class MainView extends React.Component {
                     PanelWidth={this.flyoutWidthFunc}
                     PanelHeight={this.getContentsHeight}
                     renderDepth={0}
-                    focus={emptyFunction}
+                    focus={DocUtils.DefaultFocus}
                     whenActiveChanged={emptyFunction}
                     docFilters={returnEmptyFilter}
                     docRangeFilters={returnEmptyFilter}
@@ -563,7 +563,7 @@ export class MainView extends React.Component {
                 PanelWidth={this.getPWidth}
                 PanelHeight={this.getPHeight}
                 renderDepth={0}
-                focus={emptyFunction}
+                focus={DocUtils.DefaultFocus}
                 docViewPath={returnEmptyDoclist}
                 parentActive={returnFalse}
                 whenActiveChanged={emptyFunction}
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index 64f907f4c..5696b16e9 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -15,6 +15,7 @@ import { DocumentView } from "./nodes/DocumentView";
 import './OverlayView.scss';
 import { ScriptingRepl } from './ScriptingRepl';
 import { DefaultStyleProvider } from "./StyleProvider";
+import { DocUtils } from "../documents/Documents";
 
 export type OverlayDisposer = () => void;
 
@@ -191,7 +192,7 @@ export class OverlayView extends React.Component {
                     renderDepth={1}
                     parentActive={returnTrue}
                     whenActiveChanged={emptyFunction}
-                    focus={emptyFunction}
+                    focus={DocUtils.DefaultFocus}
                     styleProvider={DefaultStyleProvider}
                     layerProvider={undefined}
                     docViewPath={returnEmptyDoclist}
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index d6e4b01c4..5fa988f06 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -489,13 +489,12 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
     @computed get lightboxButton() {
         const targetDoc = this.selectedDoc;
         return !targetDoc ? (null) : <Tooltip title={<div className="dash-tooltip">{"Show Lightbox of Documents"}</div>} placement="top">
-            <button className="antimodeMenu-button" onPointerDown={action(() => {
+            <button className="antimodeMenu-button" onPointerDown={() => {
                 const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
                 if (docs.length) {
-                    LightboxView.LightboxDoc = docs[0];
-                    LightboxView.LightboxFuture = docs.slice(1);
+                    LightboxView.SetLightboxDoc(targetDoc, docs);
                 }
-            })}>
+            }}>
                 <FontAwesomeIcon className="documentdecorations-icon" icon="desktop" size="lg" />
             </button>
         </Tooltip>;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 66064e354..d2ed5427b 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -25,6 +25,7 @@ import { DefaultStyleProvider } from "../StyleProvider";
 import "./CollectionSchemaView.scss";
 import { CollectionSubView } from "./CollectionSubView";
 import { SchemaTable } from "./SchemaTable";
+import { DocUtils } from "../../documents/Documents";
 // bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
 
 export enum ColumnType {
@@ -404,7 +405,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                     fitContentsToDoc={true}
                     freezeDimensions={true}
                     dontCenter={"y"}
-                    focus={emptyFunction}
+                    focus={DocUtils.DefaultFocus}
                     renderDepth={this.props.renderDepth}
                     rootSelected={this.rootSelected}
                     PanelWidth={this.previewWidth}
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index d4b4cf333..53801eef1 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -16,7 +16,7 @@ import { Cast, FieldValue, NumCast, StrCast } from "../../../fields/Types";
 import { ImageField } from "../../../fields/URLField";
 import { GetEffectiveAcl } from "../../../fields/util";
 import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse } from "../../../Utils";
-import { Docs, DocumentOptions } from "../../documents/Documents";
+import { Docs, DocumentOptions, DocUtils } from "../../documents/Documents";
 import { DocumentType } from "../../documents/DocumentTypes";
 import { CompileScript, Transformer, ts } from "../../util/Scripting";
 import { Transform } from "../../util/Transform";
@@ -575,7 +575,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                         layerProvider={undefined}
                         docViewPath={returnEmptyDoclist}
                         freezeDimensions={true}
-                        focus={emptyFunction}
+                        focus={DocUtils.DefaultFocus}
                         renderDepth={this.props.renderDepth}
                         rootSelected={() => false}
                         PanelWidth={() => 150}
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index e1e1c8656..0fb140231 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -34,6 +34,7 @@ import { CollectionViewType } from './CollectionView';
 import "./TabDocView.scss";
 import React = require("react");
 import Color = require('color');
+import { DocUtils } from '../../documents/Documents';
 const _global = (window /* browser */ || global /* node */) as any;
 
 interface TabDocViewProps {
@@ -278,7 +279,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
             case "close": return CollectionDockingView.CloseSplit(doc, locationParams);
             case "fullScreen": return CollectionDockingView.OpenFullScreen(doc);
             case "replace": return CollectionDockingView.ReplaceTab(doc, locationParams, this.stack);
-            case "lightbox": return runInAction(() => LightboxView.LightboxDoc = doc) ? true : false;
+            case "lightbox": return LightboxView.SetLightboxDoc(doc);
             case "inPlace":
             case "add":
             default:
@@ -333,7 +334,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                     ScreenToLocalTransform={Transform.Identity}
                     renderDepth={0}
                     whenActiveChanged={emptyFunction}
-                    focus={emptyFunction}
+                    focus={DocUtils.DefaultFocus}
                     styleProvider={TabDocView.miniStyleProvider}
                     layerProvider={undefined}
                     addDocTab={this.addDocTab}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index c18ef7a3b..74175c0b2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -963,7 +963,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         const bounds = { left: pt[0], right: pt2[0], top: pt[1], bot: pt2[1] };
 
         if (scale) {
-            this.Document[this.scaleFieldKey] = scale * Math.min(this.props.PanelWidth() / Math.abs(pt2[0] - pt[0])), this.props.PanelHeight() / Math.abs(pt2[1] - pt[1]);
+            this.Document[this.scaleFieldKey] = scale * Math.min(this.props.PanelWidth() / Math.abs(pt2[0] - pt[0]), this.props.PanelHeight() / Math.abs(pt2[1] - pt[1]));
             return { px: (bounds.left + bounds.right) / 2, py: (bounds.top + bounds.bot) / 2 };
         } else {
             const cx = NumCast(this.layoutDoc._panX);
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index e24a671d0..b681054fc 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -356,7 +356,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
             renderDepth={this.props.renderDepth + 1}
             startTag={"audioStart"}
             endTag={"audioEnd"}
-            focus={emptyFunction}
+            focus={DocUtils.DefaultFocus}
             bringToFront={emptyFunction}
             CollectionView={undefined}
             duration={this.duration}
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 4b4720d58..7a8eb5628 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -166,9 +166,9 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo
         return { props: list };
     }
 
-    componentWillUpdate(oldProps: any, newState: any) {
-        // console.log("willupdate", oldProps, this.props); // bcz: if you get a message saying something invalidated because reactive props changed, then this method allows you to figure out which prop changed
-    }
+    // componentWillUpdate(oldProps: any, newState: any) {
+    //     // console.log("willupdate", oldProps, this.props); // bcz: if you get a message saying something invalidated because reactive props changed, then this method allows you to figure out which prop changed
+    // }
 
     @computed get renderData() {
         TraceMobx();
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 150a549cb..488ce493c 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -7,7 +7,7 @@ import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../fields/Doc"
 import { NumCast, StrCast } from "../../../fields/Types";
 import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, setupMoveUpEvents, Utils } from "../../../Utils";
 import { DocServer } from '../../DocServer';
-import { Docs } from "../../documents/Documents";
+import { Docs, DocUtils } from "../../documents/Documents";
 import { LinkManager } from '../../util/LinkManager';
 import { Transform } from "../../util/Transform";
 import { undoBatch } from '../../util/UndoManager';
@@ -162,7 +162,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
                             renderDepth={-1}
                             PanelWidth={this.width}
                             PanelHeight={this.height}
-                            focus={emptyFunction}
+                            focus={DocUtils.DefaultFocus}
                             whenActiveChanged={returnFalse}
                             bringToFront={returnFalse}
                             NativeWidth={Doc.NativeWidth(this._targetDoc) ? () => Doc.NativeWidth(this._targetDoc) : undefined}
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 589a1c2ae..d736dc583 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -422,7 +422,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             this.layoutDoc.presCollection = targetDoc;
             // this still needs some fixing
             setTimeout(resetSelection, 500);
-            doc !== targetDoc && setTimeout(() => finished?.(), 100); /// give it some time to create the targetDoc if we're opening up its context
+            if (doc !== targetDoc) {
+                setTimeout(() => finished?.(), 100); /// give it some time to create the targetDoc if we're opening up its context
+            } else {
+                finished?.();
+            }
         };
         // If openDocument is selected then it should open the document for the user
         if (activeItem.openDocument) {
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index c0247c226..a99853aac 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -497,7 +497,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
                 startTag={"videoStart"}
                 endTag={"videoEnd"}
                 fieldKeySuffix={"-timeline"}
-                focus={emptyFunction}
+                focus={DocUtils.DefaultFocus}
                 bringToFront={emptyFunction}
                 CollectionView={undefined}
                 duration={this.duration}
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 01a55660a..c794a4132 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -22,6 +22,7 @@ import { PresBox, PresColor, PresMovement } from "../nodes/PresBox";
 import { StyleProp } from "../StyleProvider";
 import "./PresElementBox.scss";
 import React = require("react");
+import { DocUtils } from "../../documents/Documents";
 
 export const presSchema = createSchema({
     presentationTargetDoc: Doc,
@@ -105,7 +106,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     parentActive={this.props.active}
                     moveDocument={this.props.moveDocument!}
                     renderDepth={this.props.renderDepth + 1}
-                    focus={emptyFunction}
+                    focus={DocUtils.DefaultFocus}
                     whenActiveChanged={returnFalse}
                     bringToFront={returnFalse}
                     docFilters={this.props.docFilters}