aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/MainView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/MainView.tsx')
-rw-r--r--src/client/views/MainView.tsx285
1 files changed, 112 insertions, 173 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index e96f65548..b0888df68 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -3,23 +3,25 @@ import { faBuffer, faHireAHelper } from '@fortawesome/free-brands-svg-icons';
import * as far from '@fortawesome/free-regular-svg-icons';
import * as fa from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import 'browndash-components/dist/styles/global.min.css';
import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
+import 'normalize.css';
import * as React from 'react';
-import * as ReactDOM from 'react-dom';
import { Doc, DocListCast, Opt } from '../../fields/Doc';
import { ScriptField } from '../../fields/ScriptField';
import { StrCast } from '../../fields/Types';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero, setupMoveUpEvents, simulateMouseClick, Utils } from '../../Utils';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero, setupMoveUpEvents, Utils } from '../../Utils';
import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
import { DocServer } from '../DocServer';
import { Docs, DocUtils } from '../documents/Documents';
-import { CollectionViewType } from '../documents/DocumentTypes';
+import { CollectionViewType, DocumentType } from '../documents/DocumentTypes';
import { CaptureManager } from '../util/CaptureManager';
import { DocumentManager } from '../util/DocumentManager';
import { GroupManager } from '../util/GroupManager';
import { HistoryUtil } from '../util/History';
import { Hypothesis } from '../util/HypothesisUtils';
+import { ReportManager } from '../util/ReportManager';
import { ScriptingGlobals } from '../util/ScriptingGlobals';
import { SelectionManager } from '../util/SelectionManager';
import { ColorScheme, SettingsManager } from '../util/SettingsManager';
@@ -38,7 +40,7 @@ import { DashboardView } from './DashboardView';
import { DictationOverlay } from './DictationOverlay';
import { DocumentDecorations } from './DocumentDecorations';
import { GestureOverlay } from './GestureOverlay';
-import { DASHBOARD_SELECTOR_HEIGHT, LEFT_MENU_WIDTH } from './global/globalCssVariables.scss';
+import { TOPBAR_HEIGHT, LEFT_MENU_WIDTH } from './global/globalCssVariables.scss';
import { Colors } from './global/globalEnums';
import { KeyManager } from './GlobalKeyHandler';
import { InkTranscription } from './InkTranscription';
@@ -47,7 +49,7 @@ import { LinkMenu } from './linking/LinkMenu';
import './MainView.scss';
import { AudioBox } from './nodes/AudioBox';
import { DocumentLinksButton } from './nodes/DocumentLinksButton';
-import { DocumentView } from './nodes/DocumentView';
+import { DocumentView, OpenWhere, OpenWhereMod } from './nodes/DocumentView';
import { DashFieldViewMenu } from './nodes/formattedText/DashFieldView';
import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
import { RichTextMenu } from './nodes/formattedText/RichTextMenu';
@@ -55,7 +57,6 @@ import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
import { LinkDocPreview } from './nodes/LinkDocPreview';
import { RadialMenu } from './nodes/RadialMenu';
import { TaskCompletionBox } from './nodes/TaskCompletedBox';
-import { WebBox } from './nodes/WebBox';
import { OverlayView } from './OverlayView';
import { AnchorMenu } from './pdf/AnchorMenu';
import { PreviewCursor } from './PreviewCursor';
@@ -85,7 +86,7 @@ export class MainView extends React.Component {
return this._hideUI ? 0 : 27;
} // 27 comes form lm.config.defaultConfig.dimensions.headerHeight in goldenlayout.js
@computed private get topOfDashUI() {
- return this._hideUI ? 0 : Number(DASHBOARD_SELECTOR_HEIGHT.replace('px', ''));
+ return this._hideUI || LightboxView.LightboxDoc ? 0 : Number(TOPBAR_HEIGHT.replace('px', ''));
}
@computed private get topOfHeaderBarDoc() {
return this.topOfDashUI;
@@ -110,7 +111,7 @@ export class MainView extends React.Component {
}
@observable mainDoc: Opt<Doc>;
@computed private get mainContainer() {
- if (window.location.pathname.startsWith('/doc/')) {
+ if (window.location.pathname.startsWith('/doc/') && Doc.CurrentUserEmail === 'guest') {
DocServer.GetRefField(window.location.pathname.substring('/doc/'.length)).then(main => runInAction(() => (this.mainDoc = main as Doc)));
return this.mainDoc;
}
@@ -143,7 +144,6 @@ export class MainView extends React.Component {
if (ele && prog) {
// remove from DOM
setTimeout(() => {
- clearTimeout();
prog.style.transition = '1s';
prog.style.width = '100%';
}, 0);
@@ -153,12 +153,18 @@ export class MainView extends React.Component {
if (!MainView.Live) {
DocServer.setPlaygroundFields([
'dataTransition',
+ 'viewTransition',
'treeViewOpen',
'showSidebar',
+ 'itemIndex', // for changing slides in presentations
'sidebarWidthPercent',
- 'viewTransition',
+ 'currentTimecode',
+ 'timelineHeightPercent',
+ 'presStatus',
'panX',
'panY',
+ 'overlayX',
+ 'overlayY',
'fitWidth',
'nativeWidth',
'nativeHeight',
@@ -171,7 +177,9 @@ export class MainView extends React.Component {
'curPage',
'viewType',
'chromeHidden',
+ 'currentFrame',
'width',
+ 'height',
'nativeWidth',
]); // can play with these fields on someone else's
}
@@ -196,7 +204,7 @@ export class MainView extends React.Component {
document.addEventListener('dash', (e: any) => {
// event used by chrome plugin to tell Dash which document to focus on
const id = FormattedTextBox.GetDocFromUrl(e.detail);
- DocServer.GetRefField(id).then(doc => (doc instanceof Doc ? DocumentManager.Instance.jumpToDocument(doc, false, undefined, []) : null));
+ DocServer.GetRefField(id).then(doc => (doc instanceof Doc ? DocumentManager.Instance.showDocument(doc, { willPan: false }) : null));
});
document.addEventListener('linkAnnotationToDash', Hypothesis.linkListener);
this.initEventListeners();
@@ -206,6 +214,8 @@ export class MainView extends React.Component {
window.removeEventListener('keyup', KeyManager.Instance.unhandle);
window.removeEventListener('keydown', KeyManager.Instance.handle);
window.removeEventListener('pointerdown', this.globalPointerDown, true);
+ window.removeEventListener('pointermove', this.globalPointerMove, true);
+ window.removeEventListener('mouseclick', this.globalPointerClick, true);
window.removeEventListener('paste', KeyManager.Instance.paste as any);
document.removeEventListener('linkAnnotationToDash', Hypothesis.linkListener);
}
@@ -221,9 +231,13 @@ export class MainView extends React.Component {
if (window.location.pathname !== '/home') {
const pathname = window.location.pathname.substr(1).split('/');
if (pathname.length > 1 && pathname[0] === 'doc') {
- Doc.MainDocId = pathname[1];
- //!this.userDoc &&
- DocServer.GetRefField(pathname[1]).then(action(field => field instanceof Doc && (Doc.GuestTarget = field)));
+ DocServer.GetRefField(pathname[1]).then(
+ action(field => {
+ if (field instanceof Doc && field._viewType !== CollectionViewType.Docking) {
+ Doc.GuestTarget = field;
+ }
+ })
+ );
}
}
@@ -233,8 +247,10 @@ export class MainView extends React.Component {
fa.faTrash,
fa.faTrashAlt,
fa.faShare,
+ fa.faTaxi,
fa.faDownload,
fa.faExpandArrowsAlt,
+ fa.faAmbulance,
fa.faLayerGroup,
fa.faExternalLinkAlt,
fa.faCalendar,
@@ -243,6 +259,7 @@ export class MainView extends React.Component {
fa.faConciergeBell,
fa.faWindowRestore,
fa.faFolder,
+ fa.faFolderOpen,
fa.faMapPin,
fa.faMapMarker,
fa.faFingerprint,
@@ -253,6 +270,7 @@ export class MainView extends React.Component {
fa.faLaptopCode,
fa.faMale,
fa.faCopy,
+ fa.faHome,
fa.faHandPointLeft,
fa.faHandPointRight,
fa.faCompass,
@@ -285,6 +303,7 @@ export class MainView extends React.Component {
fa.faStop,
fa.faCalculator,
fa.faWindowMaximize,
+ fa.faIdCard,
fa.faAddressCard,
fa.faQuestionCircle,
fa.faArrowLeft,
@@ -445,6 +464,7 @@ export class MainView extends React.Component {
fa.faPhoneSlash,
fa.faGripLines,
fa.faSave,
+ fa.faBook,
fa.faBookmark,
fa.faList,
fa.faListOl,
@@ -457,12 +477,34 @@ export class MainView extends React.Component {
fa.faVolumeDown,
fa.faSquareRootAlt,
fa.faVolumeMute,
+ fa.faUserCircle,
+ fa.faHighlighter,
+ fa.faRemoveFormat,
+ fa.faHandPointUp,
+ fa.faXRay,
+ fa.faZ,
+ fa.faArrowsUpToLine,
+ fa.faArrowsDownToLine,
]
);
- this.initAuthenticationRouters();
}
+ private longPressTimer: NodeJS.Timeout | undefined;
+ globalPointerClick = action((e: any) => {
+ this.longPressTimer && clearTimeout(this.longPressTimer);
+ DocumentView.LongPress = false;
+ });
+ globalPointerMove = action((e: PointerEvent) => {
+ if (e.movementX > 3 || e.movementY > 3) this.longPressTimer && clearTimeout(this.longPressTimer);
+ });
globalPointerDown = action((e: PointerEvent) => {
+ DocumentView.LongPress = false;
+ this.longPressTimer = setTimeout(
+ action(() => (DocumentView.LongPress = true)),
+ 1000
+ );
+ DocumentManager.removeOverlayViews();
+ Doc.linkFollowUnhighlight();
AudioBox.Enabled = true;
const targets = document.elementsFromPoint(e.x, e.y);
if (targets.length) {
@@ -481,6 +523,8 @@ export class MainView extends React.Component {
window.addEventListener('dragover', e => e.preventDefault(), false);
// document.addEventListener("pointermove", action(e => SearchBox.Instance._undoBackground = UndoManager.batchCounter ? "#000000a8" : undefined));
document.addEventListener('pointerdown', this.globalPointerDown, true);
+ document.addEventListener('pointermove', this.globalPointerMove, true);
+ document.addEventListener('mouseclick', this.globalPointerClick, true);
document.addEventListener(
'click',
(e: MouseEvent) => {
@@ -496,29 +540,22 @@ export class MainView extends React.Component {
document.oncontextmenu = () => false;
};
- initAuthenticationRouters = async () => {
- const received = Doc.MainDocId;
- if (received && !this.userDoc) {
- reaction(
- () => Doc.GuestTarget,
- target => target && DashboardView.createNewDashboard(),
- { fireImmediately: true }
- );
- }
- // else {
- // PromiseValue(this.userDoc.activeDashboard).then(dash => {
- // if (dash instanceof Doc) DashboardView.openDashboard(dash);
- // else Doc.createNewDashboard();
- // });
- // }
+ @action
+ createNewPresentation = () => {
+ const pres = Doc.MakeCopy(Doc.UserDoc().emptyTrail as Doc, true);
+ CollectionDockingView.AddSplit(pres, OpenWhereMod.right);
+ Doc.MyTrails && Doc.AddDocToList(Doc.MyTrails, 'data', pres); // Doc.MyTrails should be created in createDashboard
+ Doc.ActivePresentation = pres;
};
@action
- createNewPresentation = async () => {
- const pres = Docs.Create.PresDocument({ title: 'Untitled Trail', _viewType: CollectionViewType.Stacking, _fitWidth: true, _width: 400, _height: 500, targetDropAction: 'alias', _chromeHidden: true, boxShadow: '0 0' });
- CollectionDockingView.AddSplit(pres, 'left');
- Doc.ActivePresentation = pres;
- Doc.AddDocToList(Doc.MyTrails, 'data', pres);
+ openPresentation = (pres: Doc) => {
+ if (pres.type === DocumentType.PRES) {
+ CollectionDockingView.AddSplit(pres, OpenWhereMod.right);
+ Doc.MyTrails && (Doc.ActivePresentation = pres);
+ Doc.AddDocToList(Doc.MyTrails, 'data', pres);
+ this.closeFlyout();
+ }
};
@action
@@ -541,7 +578,7 @@ export class MainView extends React.Component {
Document={this.headerBarDoc}
DataDoc={undefined}
addDocument={undefined}
- addDocTab={this.addDocTabFunc}
+ addDocTab={MainView.addDocTabFunc}
pinToPres={emptyFunction}
docViewPath={returnEmptyDoclist}
styleProvider={DefaultStyleProvider}
@@ -572,13 +609,13 @@ export class MainView extends React.Component {
@computed get mainDocView() {
return (
<>
- {this._hideUI ? null : this.headerBarDocView}
+ {this._hideUI || !this.headerBarDocHeight?.() ? null : this.headerBarDocView}
<DocumentView
key="main"
Document={this.mainContainer!}
DataDoc={undefined}
addDocument={undefined}
- addDocTab={this.addDocTabFunc}
+ addDocTab={MainView.addDocTabFunc}
pinToPres={emptyFunction}
docViewPath={returnEmptyDoclist}
styleProvider={this._hideUI ? DefaultStyleProvider : undefined}
@@ -605,7 +642,7 @@ export class MainView extends React.Component {
@computed get dockingContent() {
return (
- <GestureOverlay>
+ <GestureOverlay isActive={LightboxView.LightboxDoc ? false : true}>
<div
key="docking"
className={`mainView-dockingContent${this._leftMenuFlyoutWidth ? '-flyout' : ''}`}
@@ -614,6 +651,7 @@ export class MainView extends React.Component {
e.preventDefault();
}}
style={{
+ width: `calc(100% - ${this._leftMenuFlyoutWidth + this.leftMenuWidth() + this.propertiesWidth()}px)`,
minWidth: `calc(100% - ${this._leftMenuFlyoutWidth + this.leftMenuWidth() + this.propertiesWidth()}px)`,
transform: LightboxView.LightboxDoc ? 'scale(0.0001)' : undefined,
}}>
@@ -648,25 +686,19 @@ export class MainView extends React.Component {
sidebarScreenToLocal = () => new Transform(0, -this.topOfSidebarDoc, 1);
mainContainerXf = () => this.sidebarScreenToLocal().translate(-this.leftScreenOffsetOfMainDocView, 0);
- addDocTabFunc = (doc: Doc, location: string): boolean => {
- const locationFields = doc._viewType === CollectionViewType.Docking ? ['dashboard'] : location.split(':');
- const locationParams = locationFields.length > 1 ? locationFields[1] : '';
+ static addDocTabFunc = (doc: Doc, location: OpenWhere): boolean => {
+ const whereFields = doc._viewType === CollectionViewType.Docking ? [OpenWhere.dashboard] : location.split(':');
+ const keyValue = whereFields[1]?.includes('KeyValue');
+ const whereMods: OpenWhereMod = whereFields.length > 1 ? (whereFields[1].replace('KeyValue', '') as OpenWhereMod) : OpenWhereMod.none;
if (doc.dockingConfig) return DashboardView.openDashboard(doc);
- switch (locationFields[0]) {
- case 'dashboard':
- return DashboardView.openDashboard(doc);
- case 'close':
- return CollectionDockingView.CloseSplit(doc, locationParams);
- case 'fullScreen':
- return CollectionDockingView.OpenFullScreen(doc);
- case 'lightbox':
- return LightboxView.AddDocTab(doc, location);
- case 'toggle':
- return CollectionDockingView.ToggleSplit(doc, locationParams);
- case 'inPlace':
- case 'add':
- default:
- return CollectionDockingView.AddSplit(doc, locationParams);
+ // prettier-ignore
+ switch (whereFields[0]) {
+ case OpenWhere.lightbox: return LightboxView.AddDocTab(doc, location);
+ case OpenWhere.dashboard: return DashboardView.openDashboard(doc);
+ case OpenWhere.fullScreen: return CollectionDockingView.OpenFullScreen(doc);
+ case OpenWhere.close: return CollectionDockingView.CloseSplit(doc, whereMods);
+ case OpenWhere.toggle: return CollectionDockingView.ToggleSplit(doc, whereMods);
+ case OpenWhere.add:default:return CollectionDockingView.AddSplit(doc, whereMods, undefined, undefined, keyValue);
}
};
@@ -682,7 +714,7 @@ export class MainView extends React.Component {
Document={this._sidebarContent.proto || this._sidebarContent}
DataDoc={undefined}
addDocument={undefined}
- addDocTab={this.addDocTabFunc}
+ addDocTab={MainView.addDocTabFunc}
pinToPres={emptyFunction}
docViewPath={returnEmptyDoclist}
styleProvider={this._sidebarContent.proto === Doc.MyDashboards || this._sidebarContent.proto === Doc.MyFilesystem ? DashboardStyleProvider : DefaultStyleProvider}
@@ -711,12 +743,12 @@ export class MainView extends React.Component {
@computed get leftMenuPanel() {
return (
- <div key="menu" className="mainView-leftMenuPanel">
+ <div key="menu" className="mainView-leftMenuPanel" style={{ display: LightboxView.LightboxDoc ? 'none' : undefined }}>
<DocumentView
Document={Doc.MyLeftSidebarMenu}
DataDoc={undefined}
addDocument={undefined}
- addDocTab={this.addDocTabFunc}
+ addDocTab={MainView.addDocTabFunc}
pinToPres={emptyFunction}
rootSelected={returnTrue}
removeDocument={returnFalse}
@@ -780,7 +812,7 @@ export class MainView extends React.Component {
</div>
)}
<div className="properties-container" style={{ width: this.propertiesWidth() }}>
- {this.propertiesWidth() < 10 ? null : <PropertiesView styleProvider={DefaultStyleProvider} addDocTab={this.addDocTabFunc} width={this.propertiesWidth()} height={this.propertiesHeight()} />}
+ {this.propertiesWidth() < 10 ? null : <PropertiesView styleProvider={DefaultStyleProvider} addDocTab={MainView.addDocTabFunc} width={this.propertiesWidth()} height={this.propertiesHeight()} />}
</div>
</div>
</div>
@@ -812,15 +844,12 @@ export class MainView extends React.Component {
}
expandFlyout = action((button: Doc) => {
- // bcz: What's going on here!?
+ // bcz: What's going on here!? --- may be fixed now, so commenting out ...
// Chrome(not firefox) seems to have a bug when the flyout expands and there's a zoomed freeform tab. All of the div below the CollectionFreeFormView's main div
// generate the wrong value from getClientRectangle() -- specifically they return an 'x' that is the flyout's width greater than it should be.
// interactively adjusting the flyout fixes the problem. So does programmatically changing the value after a timeout to something *fractionally* different (ie, 1.5, not 1);)
this._leftMenuFlyoutWidth = this._leftMenuFlyoutWidth || 250;
- setTimeout(
- action(() => (this._leftMenuFlyoutWidth += 0.5)),
- 0
- );
+ //setTimeout(action(() => (this._leftMenuFlyoutWidth += 0.5)));
this._sidebarContent.proto = button.target as any;
this.LastButton = button;
@@ -845,7 +874,7 @@ export class MainView extends React.Component {
@computed get docButtons() {
return !Doc.MyDockedBtns ? null : (
- <div className="mainView-docButtons" ref={this._docBtnRef} style={{ height: !Doc.MyDockedBtns.linearViewIsExpanded ? '42px' : undefined }}>
+ <div className="mainView-docButtons" ref={this._docBtnRef}>
<CollectionLinearView
Document={Doc.MyDockedBtns}
DataDoc={undefined}
@@ -863,7 +892,7 @@ export class MainView extends React.Component {
moveDocument={this.moveButtonDoc}
CollectionView={undefined}
addDocument={this.addButtonDoc}
- addDocTab={this.addDocTabFunc}
+ addDocTab={MainView.addDocTabFunc}
pinToPres={emptyFunction}
removeDocument={this.remButtonDoc}
ScreenToLocalTransform={this.buttonBarXf}
@@ -883,7 +912,7 @@ export class MainView extends React.Component {
);
}
@computed get snapLines() {
- return !SnappingManager.GetShowSnapLines() ? null : (
+ return !SelectionManager.Views().some(dv => dv.rootDoc.showSnapLines) ? null : (
<div className="mainView-snapLines">
<svg style={{ width: '100%', height: '100%' }}>
{SnappingManager.horizSnapLines().map(l => (
@@ -922,38 +951,8 @@ export class MainView extends React.Component {
);
}
- @computed get invisibleWebBox() {
- // see note under the makeLink method in HypothesisUtils.ts
- return !DocumentLinksButton.invisibleWebDoc ? null : (
- <div className="mainView-invisibleWebRef" ref={DocumentLinksButton.invisibleWebRef}>
- <WebBox
- fieldKey={'data'}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined}
- Document={DocumentLinksButton.invisibleWebDoc}
- dropAction={'move'}
- styleProvider={undefined}
- isSelected={returnFalse}
- select={returnFalse}
- setHeight={returnFalse}
- rootSelected={returnFalse}
- renderDepth={0}
- addDocTab={returnFalse}
- pinToPres={returnFalse}
- ScreenToLocalTransform={Transform.Identity}
- bringToFront={returnFalse}
- isContentActive={emptyFunction}
- whenChildContentsActiveChanged={returnFalse}
- focus={returnFalse}
- docViewPath={returnEmptyDoclist}
- PanelWidth={() => 500}
- PanelHeight={() => 800}
- docFilters={returnEmptyFilter}
- docRangeFilters={returnEmptyFilter}
- searchFilterDocs={returnEmptyDoclist}
- />
- </div>
- );
+ @computed get linkDocPreview() {
+ return LinkDocPreview.LinkInfo ? <LinkDocPreview {...LinkDocPreview.LinkInfo} /> : null;
}
render() {
@@ -974,30 +973,28 @@ export class MainView extends React.Component {
<DictationOverlay />
<SharingManager />
<SettingsManager />
+ <ReportManager />
<CaptureManager />
<GroupManager />
<GoogleAuthenticationManager />
- <DocumentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfHeaderBarDoc} PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} />
+ <DocumentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfSidebarDoc} PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} />
<ComponentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfMainDocContent} />
{this._hideUI ? null : <TopBar />}
{LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
{DocumentLinksButton.LinkEditorDocView ? <LinkMenu clearLinkEditor={action(() => (DocumentLinksButton.LinkEditorDocView = undefined))} docView={DocumentLinksButton.LinkEditorDocView} /> : null}
- {LinkDocPreview.LinkInfo ? <LinkDocPreview {...LinkDocPreview.LinkInfo} /> : null}
+ {this.linkDocPreview}
{((page: string) => {
+ // prettier-ignore
switch (page) {
- case 'dashboard':
default:
- return (
- <>
- <div style={{ position: 'relative', display: this._hideUI || LightboxView.LightboxDoc ? 'none' : undefined, zIndex: 1999 }}>
- <CollectionMenu panelWidth={this.topMenuWidth} panelHeight={this.topMenuHeight} />
- </div>
- {this.mainDashboardArea}
- </>
- );
- case 'home':
- return <DashboardView />;
+ case 'dashboard': return (<>
+ <div key="dashdiv" style={{ position: 'relative', display: this._hideUI || LightboxView.LightboxDoc ? 'none' : undefined, zIndex: 2001 }}>
+ <CollectionMenu panelWidth={this.topMenuWidth} panelHeight={this.topMenuHeight} />
+ </div>
+ {this.mainDashboardArea}
+ </> );
+ case 'home': return <DashboardView />;
}
})(Doc.ActivePage)}
@@ -1013,68 +1010,10 @@ export class MainView extends React.Component {
<RichTextMenu />
<InkTranscription />
{this.snapLines}
- <div className="mainView-webRef" ref={this.makeWebRef} />
- <LightboxView PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} />
+ <LightboxView key="lightbox" PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} />
</div>
);
}
-
- makeWebRef = (ele: HTMLDivElement) => {
- reaction(
- () => DocumentLinksButton.invisibleWebDoc,
- invisibleDoc => {
- ReactDOM.unmountComponentAtNode(ele);
- invisibleDoc &&
- ReactDOM.render(
- <span title="Drag as document" className="invisible-webbox">
- <div className="mainView-webRef" ref={DocumentLinksButton.invisibleWebRef}>
- <WebBox
- fieldKey={'data'}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined}
- Document={invisibleDoc}
- dropAction={'move'}
- isSelected={returnFalse}
- docViewPath={returnEmptyDoclist}
- select={returnFalse}
- rootSelected={returnFalse}
- renderDepth={0}
- setHeight={returnFalse}
- styleProvider={undefined}
- addDocTab={returnFalse}
- pinToPres={returnFalse}
- ScreenToLocalTransform={Transform.Identity}
- bringToFront={returnFalse}
- isContentActive={emptyFunction}
- whenChildContentsActiveChanged={returnFalse}
- focus={returnFalse}
- PanelWidth={() => 500}
- PanelHeight={() => 800}
- docFilters={returnEmptyFilter}
- docRangeFilters={returnEmptyFilter}
- searchFilterDocs={returnEmptyDoclist}
- />
- </div>
- ;
- </span>,
- ele
- );
-
- let success = false;
- const onSuccess = () => {
- success = true;
- clearTimeout(interval);
- document.removeEventListener('editSuccess', onSuccess);
- };
-
- // For some reason, Hypothes.is annotations don't load until a click is registered on the page,
- // so we keep simulating clicks until annotations have loaded and editing is successful
- const interval = setInterval(() => !success && simulateMouseClick(ele, 50, 50, 50, 50), 500);
- setTimeout(() => !success && clearInterval(interval), 10000); // give up if no success after 10s
- document.addEventListener('editSuccess', onSuccess);
- }
- );
- };
}
ScriptingGlobals.add(function selectMainMenu(doc: Doc, title: string) {