1 files changed, 4 insertions, 78 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5873ce650..b3f5cc54f 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -13,7 +13,7 @@ import { List } from '../../fields/List';
 import { PrefetchProxy } from '../../fields/Proxy';
 import { BoolCast, PromiseValue, StrCast } from '../../fields/Types';
 import { TraceMobx } from '../../fields/util';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick, Utils, emptyPath } from '../../Utils';
+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';
@@ -42,6 +42,7 @@ import { GestureOverlay } from './GestureOverlay';
 import { MENU_PANEL_WIDTH, SEARCH_PANEL_HEIGHT } from './globalCssVariables.scss';
 import { KeyManager } from './GlobalKeyHandler';
 import { InkStrokeProperties } from './InkStrokeProperties';
+import { LightboxView } from './LightboxView';
 import { LinkMenu } from './linking/LinkMenu';
 import "./MainView.scss";
 import { AudioBox } from './nodes/AudioBox';
@@ -59,7 +60,7 @@ import { AnchorMenu } from './pdf/AnchorMenu';
 import { PreviewCursor } from './PreviewCursor';
 import { PropertiesView } from './PropertiesView';
 import { SearchBox } from './search/SearchBox';
-import { DefaultStyleProvider, StyleProp, DefaultLayerProvider } from './StyleProvider';
+import { DefaultStyleProvider, StyleProp } from './StyleProvider';
 const _global = (window /* browser */ || global /* node */) as any;
 
 @observer
@@ -68,7 +69,6 @@ export class MainView extends React.Component {
     private _docBtnRef = React.createRef<HTMLDivElement>();
     private _mainViewRef = React.createRef<HTMLDivElement>();
     @observable public LastButton: Opt<Doc>;
-    @observable public LightboxDoc: Opt<Doc>;
     @observable private _panelWidth: number = 0;
     @observable private _panelHeight: number = 0;
     @observable private _panelContent: string = "none";
@@ -608,80 +608,6 @@ export class MainView extends React.Component {
             </div>;
     }
 
-    lightboxWidth = () => window.innerWidth - Math.min(window.innerWidth / 4, 200) * 2;
-    lightboxHeight = () => window.innerHeight - Math.min(window.innerHeight / 4, 100) * 2;
-    lightboxScreenToLocal = () => new Transform(-Math.min(window.innerWidth / 4, 200), -Math.min(window.innerHeight / 4, 100), 1);
-    lightboxHistory: (Opt<Doc>)[] = [];
-    lightboxFuture: (Opt<Doc>)[] = [];
-    lightboxDocView = React.createRef<DocumentView>();
-    @computed get lightboxView() {
-        if (this.lightboxHistory.lastElement() !== this.LightboxDoc) this.lightboxHistory.push(this.LightboxDoc);
-        let downx = 0, downy = 0;
-        return !this.LightboxDoc ? (null) :
-            <div className="mainView-lightBox-frame"
-                onPointerDown={e => { downx = e.clientX; downy = e.clientY; }}
-                onClick={action(e => {
-                    if (Math.abs(downx - e.clientX) < 4 && Math.abs(downy - e.clientY) < 4) {
-                        this.lightboxHistory = [];
-                        this.lightboxFuture = [];
-                        this.LightboxDoc = undefined;
-                    }
-                })}  >
-                <div className="mainView-lightBox-contents" style={{
-                    left: Math.min(window.innerWidth / 4, 200),
-                    top: Math.min(window.innerHeight / 4, 100),
-                    width: window.innerWidth - Math.min(window.innerWidth / 4, 200) * 2,
-                    height: window.innerHeight - Math.min(window.innerHeight / 4, 100) * 2
-                }}>
-                    <DocumentView ref={this.lightboxDocView}
-                        Document={this.LightboxDoc}
-                        DataDoc={undefined}
-                        addDocument={undefined}
-                        addDocTab={this.addDocTabFunc}
-                        pinToPres={emptyFunction}
-                        rootSelected={returnTrue}
-                        docViewPath={emptyPath}
-                        removeDocument={undefined}
-                        styleProvider={DefaultStyleProvider}
-                        layerProvider={DefaultLayerProvider(this.LightboxDoc)}
-                        ScreenToLocalTransform={this.lightboxScreenToLocal}
-                        PanelWidth={this.lightboxWidth}
-                        PanelHeight={this.lightboxHeight}
-                        focus={emptyFunction}
-                        parentActive={returnTrue}
-                        whenActiveChanged={emptyFunction}
-                        bringToFront={emptyFunction}
-                        docFilters={returnEmptyFilter}
-                        docRangeFilters={returnEmptyFilter}
-                        searchFilterDocs={returnEmptyDoclist}
-                        ContainingCollectionView={undefined}
-                        ContainingCollectionDoc={undefined}
-                        renderDepth={0} />
-                </div>
-                <div style={{ position: "absolute", display: this.LightboxDoc && this.lightboxHistory.length ? "" : "none", width: Math.min(window.innerWidth / 4, 200) }}>
-                    <div className="mainView-lightBox-navBtn" style={{ top: window.innerHeight / 2 - 12.50 }}
-                        onClick={action(e => {
-                            e.stopPropagation();
-                            const popped = this.lightboxHistory.pop();
-                            if (this.lightboxHistory.lastElement() !== this.lightboxFuture.lastElement()) this.lightboxFuture.push(popped);
-                            this.LightboxDoc = this.lightboxHistory.lastElement();
-                        })}>
-                        <FontAwesomeIcon icon={"chevron-left"} size="3x" />
-                    </div>
-                </div>
-                <div style={{ position: "absolute", display: this.LightboxDoc && this.lightboxFuture.length ? "" : "none", left: window.innerWidth - Math.min(window.innerWidth / 4, 200), width: Math.min(window.innerWidth / 4, 200) }}>
-                    <div className="mainView-lightBox-navBtn" style={{ top: window.innerHeight / 2 - 12.50 }}
-                        onClick={action(e => {
-                            e.stopPropagation();
-                            this.LightboxDoc = this.lightboxFuture.pop();
-                        })}>
-                        <FontAwesomeIcon icon={"chevron-right"} size="3x" />
-                    </div>
-                </div>
-            </div>;
-    }
-
-
     render() {
         return (<div className={"mainView-container" + (this.darkScheme ? "-dark" : "")} onScroll={() => ((ele) => ele.scrollTop = ele.scrollLeft = 0)(document.getElementById("root")!)} ref={this._mainViewRef}>
             {this.inkResources}
@@ -710,7 +636,7 @@ export class MainView extends React.Component {
             <TimelineMenu />
             {this.snapLines}
             <div className="mainView-webRef" ref={this.makeWebRef} />
-            {this.lightboxView}
+            <LightboxView PanelWidth={this._panelWidth} PanelHeight={this._panelHeight} minBorder={[200, 100]} />
         </div>);
     }