aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/LightboxView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/LightboxView.tsx')
-rw-r--r--src/client/views/LightboxView.tsx122
1 files changed, 75 insertions, 47 deletions
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index d5f5dabb6..22b0380a2 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -1,9 +1,9 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
-import 'normalize.css';
import * as React from 'react';
import { Doc, DocListCast, Opt } from '../../fields/Doc';
+import { InkTool } from '../../fields/InkField';
import { Cast, NumCast, StrCast } from '../../fields/Types';
import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../Utils';
import { DocUtils } from '../documents/Documents';
@@ -14,7 +14,9 @@ import { Transform } from '../util/Transform';
import { CollectionDockingView } from './collections/CollectionDockingView';
import { CollectionStackedTimeline } from './collections/CollectionStackedTimeline';
import { TabDocView } from './collections/TabDocView';
+import { GestureOverlay } from './GestureOverlay';
import './LightboxView.scss';
+import { MainView } from './MainView';
import { DocumentView } from './nodes/DocumentView';
import { DefaultStyleProvider, wavyBorderPath } from './StyleProvider';
@@ -38,7 +40,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
private static _savedState: Opt<{ panX: Opt<number>; panY: Opt<number>; scale: Opt<number>; scrollTop: Opt<number> }>;
private static _history: Opt<{ doc: Doc; target?: Doc }[]> = [];
@observable private static _future: Opt<Doc[]> = [];
- private static _docView: Opt<DocumentView>;
+ @observable private static _docView: Opt<DocumentView>;
private static openInTabFunc: any;
static path: { doc: Opt<Doc>; target: Opt<Doc>; history: Opt<{ doc: Doc; target?: Doc }[]>; future: Opt<Doc[]>; saved: Opt<{ panX: Opt<number>; panY: Opt<number>; scale: Opt<number>; scrollTop: Opt<number> }> }[] = [];
@action public static SetLightboxDoc(doc: Opt<Doc>, target?: Doc, future?: Doc[], layoutTemplate?: Doc) {
@@ -52,12 +54,14 @@ export class LightboxView extends React.Component<LightboxViewProps> {
if (!doc) {
this._docFilters && (this._docFilters.length = 0);
this._future = this._history = [];
+ Doc.ActiveTool = InkTool.None;
+ MainView.Instance._exploreMode = false;
} else {
if (doc) {
const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement();
l && (Cast(l.anchor2, Doc, null).backgroundColor = 'lightgreen');
}
- CollectionStackedTimeline.CurrentlyPlaying.forEach(doc => {
+ CollectionStackedTimeline.CurrentlyPlaying?.forEach(doc => {
DocumentManager.Instance.getAllDocumentViews(doc).forEach(dv => {
dv.ComponentView?.Pause?.();
});
@@ -97,7 +101,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
return true;
}
public static IsLightboxDocView(path: DocumentView[]) {
- return path.includes(this._docView!);
+ return (path ?? []).includes(this._docView!);
}
@computed get leftBorder() {
return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]);
@@ -267,45 +271,49 @@ export class LightboxView extends React.Component<LightboxViewProps> {
clipPath: `path('${Doc.UserDoc().renderStyle === 'comic' ? wavyBorderPath(this.lightboxWidth(), this.lightboxHeight()) : undefined}')`,
}}>
{/* <CollectionMenu /> TODO:glr This is where it would go*/}
- <DocumentView
- ref={action((r: DocumentView | null) => {
- LightboxView._docView = r !== null ? r : undefined;
- r &&
- setTimeout(
- action(() => {
- const target = LightboxView._docTarget;
- const doc = LightboxView._doc;
- const targetView = target && DocumentManager.Instance.getLightboxDocumentView(target);
- if (doc === r.props.Document && (!target || target === doc)) r.ComponentView?.shrinkWrap?.();
- //else target?.focus(target, { willZoom: true, scale: 0.9, instant: true }); // bcz: why was this here? it breaks smooth navigation in lightbox using 'next' button
- })
- );
- })}
- Document={LightboxView.LightboxDoc}
- DataDoc={undefined}
- LayoutTemplate={LightboxView.LightboxDocTemplate}
- addDocument={undefined}
- isDocumentActive={returnFalse}
- isContentActive={returnTrue}
- addDocTab={this.addDocTab}
- pinToPres={TabDocView.PinDoc}
- rootSelected={returnTrue}
- docViewPath={returnEmptyDoclist}
- docFilters={this.docFilters}
- removeDocument={undefined}
- styleProvider={DefaultStyleProvider}
- ScreenToLocalTransform={this.lightboxScreenToLocal}
- PanelWidth={this.lightboxWidth}
- PanelHeight={this.lightboxHeight}
- focus={DocUtils.DefaultFocus}
- whenChildContentsActiveChanged={emptyFunction}
- bringToFront={emptyFunction}
- docRangeFilters={returnEmptyFilter}
- searchFilterDocs={returnEmptyDoclist}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined}
- renderDepth={0}
- />
+
+ <GestureOverlay isActive={true}>
+ <DocumentView
+ ref={action((r: DocumentView | null) => {
+ LightboxView._docView = r !== null ? r : undefined;
+ r &&
+ setTimeout(
+ action(() => {
+ const target = LightboxView._docTarget;
+ const doc = LightboxView._doc;
+ //const targetView = target && DocumentManager.Instance.getLightboxDocumentView(target);
+ if (doc === r.props.Document && (!target || target === doc)) r.ComponentView?.shrinkWrap?.();
+ //else target?.focus(target, { willZoom: true, scale: 0.9, instant: true }); // bcz: why was this here? it breaks smooth navigation in lightbox using 'next' button
+ })
+ );
+ })}
+ Document={LightboxView.LightboxDoc}
+ DataDoc={undefined}
+ PanelWidth={this.lightboxWidth}
+ PanelHeight={this.lightboxHeight}
+ LayoutTemplate={LightboxView.LightboxDocTemplate}
+ isDocumentActive={returnFalse}
+ isContentActive={returnTrue}
+ styleProvider={DefaultStyleProvider}
+ ScreenToLocalTransform={this.lightboxScreenToLocal}
+ renderDepth={0}
+ rootSelected={returnTrue}
+ docViewPath={returnEmptyDoclist}
+ docFilters={this.docFilters}
+ docRangeFilters={returnEmptyFilter}
+ searchFilterDocs={returnEmptyDoclist}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined}
+ addDocument={undefined}
+ removeDocument={undefined}
+ whenChildContentsActiveChanged={emptyFunction}
+ addDocTab={this.addDocTab}
+ pinToPres={TabDocView.PinDoc}
+ bringToFront={emptyFunction}
+ onBrowseClick={MainView.Instance.exploreMode}
+ focus={DocUtils.DefaultFocus}
+ />
+ </GestureOverlay>
</div>
{this.navBtn(
@@ -333,6 +341,15 @@ export class LightboxView extends React.Component<LightboxViewProps> {
)}
<LightboxTourBtn navBtn={this.navBtn} future={this.future} stepInto={this.stepInto} tourMap={this.tourMap} />
<div
+ className="lightboxView-navBtn"
+ title={'toggle fit width'}
+ onClick={e => {
+ e.stopPropagation();
+ LightboxView.LightboxDoc!._fitWidth = !LightboxView.LightboxDoc!._fitWidth;
+ }}>
+ <FontAwesomeIcon icon={LightboxView.LightboxDoc?._fitWidth ? 'arrows-alt-h' : 'arrows-alt-v'} size="2x" />
+ </div>
+ <div
className="lightboxView-tabBtn"
title={'open in tab'}
onClick={e => {
@@ -345,13 +362,24 @@ export class LightboxView extends React.Component<LightboxViewProps> {
<FontAwesomeIcon icon={'file-download'} size="2x" />
</div>
<div
- className="lightboxView-navBtn"
- title={'toggle fit width'}
+ className="lightboxView-penBtn"
+ title="toggle pen annotation"
+ style={{ background: Doc.ActiveTool === InkTool.Pen ? 'white' : undefined }}
onClick={e => {
e.stopPropagation();
- LightboxView.LightboxDoc!._fitWidth = !LightboxView.LightboxDoc!._fitWidth;
+ Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
}}>
- <FontAwesomeIcon icon={LightboxView.LightboxDoc?._fitWidth ? 'arrows-alt-h' : 'arrows-alt-v'} size="2x" />
+ <FontAwesomeIcon color={Doc.ActiveTool === InkTool.Pen ? 'black' : 'white'} icon={'pen'} size="2x" />
+ </div>
+ <div
+ className="lightboxView-exploreBtn"
+ title="toggle explore mode to navigate among documents only"
+ style={{ background: MainView.Instance._exploreMode ? 'white' : undefined }}
+ onClick={action(e => {
+ e.stopPropagation();
+ MainView.Instance._exploreMode = !MainView.Instance._exploreMode;
+ })}>
+ <FontAwesomeIcon color={MainView.Instance._exploreMode ? 'black' : 'white'} icon={'globe-americas'} size="2x" />
</div>
</div>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 19:45:33 +0000