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.tsx101
1 files changed, 58 insertions, 43 deletions
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 25354a09d..5613e82fb 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -4,6 +4,7 @@ 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,6 +15,7 @@ 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 { DocumentView } from './nodes/DocumentView';
import { DefaultStyleProvider, wavyBorderPath } from './StyleProvider';
@@ -267,45 +269,48 @@ 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}
+ 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>
</div>
{this.navBtn(
@@ -333,6 +338,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 +359,14 @@ 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>
);