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.tsx448
1 files changed, 179 insertions, 269 deletions
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 93eaec959..c7ff7ce47 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -1,12 +1,13 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Toggle, ToggleType, Type } from 'browndash-components';
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
-import { Doc, DocListCast, Opt } from '../../fields/Doc';
+import { Doc, DocListCast, FieldResult, Opt } from '../../fields/Doc';
import { InkTool } from '../../fields/InkField';
-import { BoolCast, Cast, NumCast, StrCast } from '../../fields/Types';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue } from '../../Utils';
+import { Cast, NumCast } from '../../fields/Types';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, Utils } from '../../Utils';
import { DocUtils } from '../documents/Documents';
import { DocumentManager } from '../util/DocumentManager';
import { LinkManager } from '../util/LinkManager';
@@ -20,6 +21,8 @@ import { GestureOverlay } from './GestureOverlay';
import './LightboxView.scss';
import { DocumentView, OpenWhere, OpenWhereMod } from './nodes/DocumentView';
import { DefaultStyleProvider, wavyBorderPath } from './StyleProvider';
+import { ObservableReactComponent } from './ObservableReactComponent';
+import { SnappingManager } from '../util/SnappingManager';
interface LightboxViewProps {
PanelWidth: number;
@@ -27,216 +30,210 @@ interface LightboxViewProps {
maxBorder: number[];
}
-type LightboxSavedState = {
- panX: Opt<number>;
- panY: Opt<number>;
- scale: Opt<number>;
- scrollTop: Opt<number>;
- layout_fieldKey: Opt<string>;
-};
+const savedKeys = ['freeform_panX', 'freeform_panY', 'freeform_scale', 'layout_scrollTop', 'layout_fieldKey'];
+type LightboxSavedState = { [key: string]: FieldResult; }; // prettier-ignore
@observer
-export class LightboxView extends React.Component<LightboxViewProps> {
- @computed public static get LightboxDoc() {
- return this._doc;
+export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
+ public static Contains(view?:DocumentView) { return view && LightboxView.Instance?._docView&& (view.containerViewPath?.() ?? []).concat(view).includes(LightboxView.Instance?._docView); } // prettier-ignore
+ public static get LightboxDoc() { return LightboxView.Instance?._doc; } // prettier-ignore
+ static Instance: LightboxView;
+ private _path: {
+ doc: Opt<Doc>; //
+ target: Opt<Doc>;
+ history: { doc: Doc; target?: Doc }[];
+ future: Doc[];
+ saved: LightboxSavedState;
+ }[] = [];
+ private _savedState: LightboxSavedState = {};
+ private _history: { doc: Doc; target?: Doc }[] = [];
+ @observable private _future: Doc[] = [];
+ @observable private _layoutTemplate: Opt<Doc> = undefined;
+ @observable private _layoutTemplateString: Opt<string> = undefined;
+ @observable private _doc: Opt<Doc> = undefined;
+ @observable private _docTarget: Opt<Doc> = undefined;
+ @observable private _docView: Opt<DocumentView> = undefined;
+
+ @computed get leftBorder() { return Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]); } // prettier-ignore
+ @computed get topBorder() { return Math.min(this._props.PanelHeight / 4, this._props.maxBorder[1]); } // prettier-ignore
+
+ constructor(props: any) {
+ super(props);
+ makeObservable(this);
+ LightboxView.Instance = this;
}
- private static LightboxDocTemplate = () => LightboxView._layoutTemplate;
- @observable private static _layoutTemplate: Opt<Doc>;
- @observable private static _layoutTemplateString: Opt<string>;
- @observable private static _doc: Opt<Doc>;
- @observable private static _docTarget: Opt<Doc>;
- @observable private static _childFilters: string[] = []; // filters
- private static _savedState: Opt<LightboxSavedState>;
- private static _history: Opt<{ doc: Doc; target?: Doc }[]> = [];
- @observable private static _future: Opt<Doc[]> = [];
- @observable private static _docView: Opt<DocumentView>;
- static path: { doc: Opt<Doc>; target: Opt<Doc>; history: Opt<{ doc: Doc; target?: Doc }[]>; future: Opt<Doc[]>; saved: Opt<LightboxSavedState> }[] = [];
- @action public static SetLightboxDoc(doc: Opt<Doc>, target?: Doc, future?: Doc[], layoutTemplate?: Doc | string) {
- if (this.LightboxDoc && this.LightboxDoc !== doc && this._savedState) {
- if (this._savedState.panX !== undefined) this.LightboxDoc._freeform_panX = this._savedState.panX;
- if (this._savedState.panY !== undefined) this.LightboxDoc._freeform_panY = this._savedState.panY;
- if (this._savedState.scrollTop !== undefined) this.LightboxDoc._layout_scrollTop = this._savedState.scrollTop;
- if (this._savedState.scale !== undefined) this.LightboxDoc._freeform_scale = this._savedState.scale;
- this.LightboxDoc.layout_fieldKey = this._savedState.layout_fieldKey ? this._savedState.layout_fieldKey : undefined;
- }
- if (!doc) {
- this._childFilters && (this._childFilters.length = 0);
- this._future = this._history = [];
- Doc.ActiveTool = InkTool.None;
- DocumentView.ExploreMode = false;
- } else {
+
+ @action
+ public SetLightboxDoc(doc: Opt<Doc>, target?: Doc, future?: Doc[], layoutTemplate?: Doc | string) {
+ const lightDoc = this._doc;
+ lightDoc && lightDoc !== doc && savedKeys.forEach(key => (lightDoc[key] = this._savedState[key]));
+ this._savedState = {};
+
+ if (doc) {
+ lightDoc !== doc && savedKeys.map(key => (this._savedState[key] = Doc.Get(doc, key, true)));
const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement();
l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen');
CollectionStackedTimeline.CurrentlyPlaying?.forEach(dv => dv.ComponentView?.Pause?.());
- //TabDocView.PinDoc(doc, { hidePresBox: true });
- this._history ? this._history.push({ doc, target }) : (this._history = [{ doc, target }]);
- if (doc !== LightboxView.LightboxDoc) {
- this._savedState = {
- layout_fieldKey: StrCast(doc.layout_fieldKey),
- panX: Cast(doc.freeform_panX, 'number', null),
- panY: Cast(doc.freeform_panY, 'number', null),
- scale: Cast(doc.freeform_scale, 'number', null),
- scrollTop: Cast(doc.layout_scrollTop, 'number', null),
- };
- }
+ this._history.push({ doc, target });
+ } else {
+ this._future = [];
+ this._history = [];
+ Doc.ActiveTool = InkTool.None;
+ SnappingManager.SetExploreMode(false);
}
+ SelectionManager.DeselectAll();
if (future) {
- this._future = [
- ...(this._future ?? []),
- ...(this.LightboxDoc ? [this.LightboxDoc] : []),
+ this._future.push(
+ ...(this._doc ? [this._doc] : []),
...future
.slice()
.sort((a, b) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow))
- .sort((a, b) => LinkManager.Links(a).length - LinkManager.Links(b).length),
- ];
+ .sort((a, b) => LinkManager.Links(a).length - LinkManager.Links(b).length)
+ );
}
this._doc = doc;
this._layoutTemplate = layoutTemplate instanceof Doc ? layoutTemplate : undefined;
if (doc && (typeof layoutTemplate === 'string' ? layoutTemplate : undefined)) {
doc.layout_fieldKey = layoutTemplate;
}
- this._docTarget = target || doc;
+ this._docTarget = target ?? doc;
return true;
}
- public static IsLightboxDocView(path: DocumentView[]) {
- return (path ?? []).includes(this._docView!);
- }
- @computed get leftBorder() {
- return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]);
- }
- @computed get topBorder() {
- return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]);
- }
- lightboxWidth = () => this.props.PanelWidth - this.leftBorder * 2;
- lightboxHeight = () => this.props.PanelHeight - this.topBorder * 2;
- lightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1);
- navBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => {
- return (
- <div
- className="lightboxView-navBtn-frame"
- style={{
- display: display(),
- left,
- width: bottom !== undefined ? undefined : Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]),
- bottom,
- }}>
- <div className="lightboxView-navBtn" title={color} style={{ top, color: SettingsManager.userColor, background: undefined }} onClick={click}>
- <div style={{ height: 10 }}>{color}</div>
- <FontAwesomeIcon icon={icon as any} size="3x" />
- </div>
- </div>
- );
- };
- public static GetSavedState(doc: Doc) {
- return this.LightboxDoc === doc && this._savedState ? this._savedState : undefined;
- }
- // adds a cookie to the lightbox view - the cookie becomes part of a filter which will display any documents whose cookie metadata field matches this cookie
- @action
- public static SetCookie(cookie: string) {
- if (this.LightboxDoc && cookie) {
- this._childFilters = (f => (this._childFilters ? [this._childFilters.push(f) as any, this._childFilters][1] : [f]))(`cookies:${cookie}:provide`);
- }
- }
- public static AddDocTab = (doc: Doc, location: OpenWhere, layoutTemplate?: Doc | string) => {
- SelectionManager.DeselectAll();
- return LightboxView.SetLightboxDoc(
+ public AddDocTab = (doc: Doc, location: OpenWhere, layoutTemplate?: Doc | string) =>
+ this.SetLightboxDoc(
doc,
undefined,
- [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...(LightboxView._future ?? [])].sort(
- (a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)
+ [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...this._future].sort(
+ (a, b) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)
),
layoutTemplate
);
- };
- childFilters = () => LightboxView._childFilters || [];
- addDocTab = LightboxView.AddDocTab;
- @action public static Next() {
- const doc = LightboxView._doc!;
- const target = (LightboxView._docTarget = this._future?.pop());
+ @action
+ next = () => {
+ const lightDoc = this._doc;
+ if (!lightDoc) return;
+ const target = (this._docTarget = this._future.pop());
const targetDocView = target && DocumentManager.Instance.getLightboxDocumentView(target);
if (targetDocView && target) {
const l = DocUtils.MakeLinkToActiveAudio(() => targetDocView.ComponentView?.getAnchor?.(true) || target).lastElement();
l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen');
DocumentManager.Instance.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 });
- if (LightboxView._history?.lastElement().target !== target) LightboxView._history?.push({ doc, target });
+ if (this._history.lastElement().target !== target) this._history.push({ doc: lightDoc, target });
+ } else if (!target && this._path.length) {
+ savedKeys.forEach(key => (lightDoc[key] = this._savedState[key]));
+ this._path.pop();
} else {
- if (!target && LightboxView.path.length) {
- const saved = LightboxView._savedState;
- if (LightboxView.LightboxDoc && saved) {
- LightboxView.LightboxDoc._freeform_panX = saved.panX;
- LightboxView.LightboxDoc._freeform_panY = saved.panY;
- LightboxView.LightboxDoc._freeform_scale = saved.scale;
- LightboxView.LightboxDoc._layout_scrollTop = saved.scrollTop;
- }
- const pop = LightboxView.path.pop();
- if (pop) {
- LightboxView._doc = pop.doc;
- LightboxView._docTarget = pop.target;
- LightboxView._future = pop.future;
- LightboxView._history = pop.history;
- LightboxView._savedState = pop.saved;
- }
- } else {
- LightboxView.SetLightboxDoc(target);
- }
+ this.SetLightboxDoc(target);
}
- }
-
- @action public static Previous() {
- const previous = LightboxView._history?.pop();
- if (!previous || !LightboxView._history?.length) {
- LightboxView.SetLightboxDoc(undefined);
+ };
+ @action
+ previous = () => {
+ const previous = this._history.pop();
+ if (!previous || !this._history.length) {
+ this.SetLightboxDoc(undefined);
return;
}
- const { doc, target } = LightboxView._history?.lastElement();
+ const { doc, target } = this._history.lastElement();
const docView = DocumentManager.Instance.getLightboxDocumentView(target || doc);
if (docView) {
- LightboxView._docTarget = target;
+ this._docTarget = target;
target && DocumentManager.Instance.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 });
} else {
- LightboxView.SetLightboxDoc(doc, target);
+ this.SetLightboxDoc(doc, target);
}
- if (LightboxView._future?.lastElement() !== previous.target || previous.doc) LightboxView._future?.push(previous.target || previous.doc);
- }
+ if (this._future.lastElement() !== previous.target || previous.doc) this._future.push(previous.target || previous.doc);
+ };
@action
stepInto = () => {
- LightboxView.path.push({
- doc: LightboxView.LightboxDoc,
- target: LightboxView._docTarget,
- future: LightboxView._future,
- history: LightboxView._history,
- saved: LightboxView._savedState,
+ this._path.push({
+ doc: this._doc,
+ target: this._docTarget,
+ future: this._future,
+ history: this._history,
+ saved: this._savedState,
});
- const coll = LightboxView._docTarget;
- if (coll) {
- const fieldKey = Doc.LayoutFieldKey(coll);
- const contents = [...DocListCast(coll[fieldKey]), ...DocListCast(coll[fieldKey + '_annotations'])];
- const links = LinkManager.Links(coll)
- .map(link => LinkManager.getOppositeAnchor(link, coll))
- .filter(doc => doc)
- .map(doc => doc!);
- LightboxView.SetLightboxDoc(coll, undefined, contents.length ? contents : links);
+ if (this._docTarget) {
+ const fieldKey = Doc.LayoutFieldKey(this._docTarget);
+ const contents = [...DocListCast(this._docTarget[fieldKey]), ...DocListCast(this._docTarget[fieldKey + '_annotations'])];
+ const links = LinkManager.Links(this._docTarget)
+ .map(link => LinkManager.getOppositeAnchor(link, this._docTarget!)!)
+ .filter(doc => doc);
+ this.SetLightboxDoc(this._docTarget, undefined, contents.length ? contents : links);
+ }
+ };
+
+ downloadDoc = () => {
+ const lightDoc = this._docTarget ?? this._doc;
+ if (lightDoc) {
+ Doc.RemoveDocFromList(Doc.MyRecentlyClosed, 'data', lightDoc);
+ CollectionDockingView.AddSplit(lightDoc, OpenWhereMod.none);
+ this.SetLightboxDoc(undefined);
}
};
+ toggleFitWidth = () => this._doc && (this._doc._layout_fitWidth = !this._doc._layout_fitWidth);
+ togglePen = () => (Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen);
+ toggleExplore = () => SnappingManager.SetExploreMode(!SnappingManager.ExploreMode);
- future = () => LightboxView._future;
+ lightboxDoc = () => this._doc;
+ lightboxWidth = () => this._props.PanelWidth - this.leftBorder * 2;
+ lightboxHeight = () => this._props.PanelHeight - this.topBorder * 2;
+ lightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1);
+ lightboxDocTemplate = () => this._layoutTemplate;
+ future = () => this._future;
+
+ renderNavBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: IconProp, display: any, click: () => void, color?: string) => {
+ return (
+ <div
+ className="lightboxView-navBtn-frame"
+ style={{
+ display: display ? '' : 'none',
+ left,
+ width: bottom !== undefined ? undefined : Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]),
+ bottom,
+ }}>
+ <div
+ className="lightboxView-navBtn"
+ title={color}
+ style={{ top, color: SettingsManager.userColor, background: undefined }}
+ onClick={e => {
+ e.stopPropagation();
+ click();
+ }}>
+ <div style={{ height: 10 }}>{color}</div>
+ <FontAwesomeIcon icon={icon} size="3x" />
+ </div>
+ </div>
+ );
+ };
render() {
let downx = 0,
downy = 0;
- return !LightboxView.LightboxDoc ? null : (
+ const toggleBtn = (classname: string, tooltip: string, toggleBackground: any, icon: IconProp, icon2: IconProp | string, onClick: () => void) => (
+ <div className={classname}>
+ <Toggle
+ tooltip={tooltip}
+ color={SettingsManager.userColor}
+ background={toggleBackground ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
+ toggleType={ToggleType.BUTTON}
+ type={Type.TERT}
+ icon={<FontAwesomeIcon icon={toggleBackground ? icon : (icon2 as IconProp) || icon} size="sm" />}
+ onClick={e => {
+ e.stopPropagation();
+ runInAction(onClick);
+ }}
+ />
+ </div>
+ );
+ return !this._doc ? null : (
<div
className="lightboxView-frame"
+ style={{ background: SettingsManager.userBackgroundColor }}
onPointerDown={e => {
downx = e.clientX;
downy = e.clientY;
}}
- style={{ background: SettingsManager.userBackgroundColor }}
- onClick={e => {
- if (Math.abs(downx - e.clientX) < 4 && Math.abs(downy - e.clientY) < 4) {
- LightboxView.SetLightboxDoc(undefined);
- }
- }}>
+ onClick={e => Utils.isClick(e.clientX, e.clientY, downx, downy, Date.now()) && this.SetLightboxDoc(undefined)}>
<div
className="lightboxView-contents"
style={{
@@ -248,148 +245,61 @@ export class LightboxView extends React.Component<LightboxViewProps> {
background: SettingsManager.userBackgroundColor,
color: SettingsManager.userColor,
}}>
- {/* <CollectionMenu /> TODO:glr This is where it would go*/}
-
<GestureOverlay isActive={true}>
<DocumentView
- ref={action((r: DocumentView | null) => (LightboxView._docView = r !== null ? r : undefined))}
- Document={LightboxView.LightboxDoc}
- DataDoc={undefined}
+ ref={action((r: DocumentView | null) => (this._docView = r !== null ? r : undefined))}
+ Document={this._doc}
PanelWidth={this.lightboxWidth}
PanelHeight={this.lightboxHeight}
- LayoutTemplate={LightboxView.LightboxDocTemplate}
+ LayoutTemplate={this.lightboxDocTemplate}
isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected.
isContentActive={returnTrue}
styleProvider={DefaultStyleProvider}
ScreenToLocalTransform={this.lightboxScreenToLocal}
renderDepth={0}
- rootSelected={returnTrue}
- docViewPath={returnEmptyDoclist}
- childFilters={this.childFilters}
+ containerViewPath={returnEmptyDoclist}
+ childFilters={returnEmptyFilter}
childFiltersByRanges={returnEmptyFilter}
searchFilterDocs={returnEmptyDoclist}
addDocument={undefined}
removeDocument={undefined}
whenChildContentsActiveChanged={emptyFunction}
- addDocTab={this.addDocTab}
+ addDocTab={this.AddDocTab}
pinToPres={TabDocView.PinDoc}
- bringToFront={emptyFunction}
- onBrowseClick={DocumentView.exploreMode}
+ onBrowseClickScript={DocumentView.exploreMode}
focus={emptyFunction}
/>
</GestureOverlay>
</div>
- {this.navBtn(
- 0,
+ {this.renderNavBtn(0, undefined, this._props.PanelHeight / 2 - 12.5, 'chevron-left', this._doc && this._history.length, this.previous)}
+ {this.renderNavBtn(
+ this._props.PanelWidth - Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]),
undefined,
- this.props.PanelHeight / 2 - 12.5,
- 'chevron-left',
- () => (LightboxView.LightboxDoc && LightboxView._history?.length ? '' : 'none'),
- e => {
- e.stopPropagation();
- LightboxView.Previous();
- }
- )}
- {this.navBtn(
- this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]),
- undefined,
- this.props.PanelHeight / 2 - 12.5,
+ this._props.PanelHeight / 2 - 12.5,
'chevron-right',
- () => (LightboxView.LightboxDoc && LightboxView._future?.length ? '' : 'none'),
- e => {
- e.stopPropagation();
- LightboxView.Next();
- },
- this.future()?.length.toString()
+ this._doc && this._future.length,
+ this.next,
+ this.future().length.toString()
)}
- <LightboxTourBtn navBtn={this.navBtn} future={this.future} stepInto={this.stepInto} />
- <div className="lightboxView-navBtn">
- <Toggle
- tooltip="toggle reading view"
- color={SettingsManager.userColor}
- background={BoolCast(LightboxView.LightboxDoc!._layout_fitWidth) ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
- toggleType={ToggleType.BUTTON}
- type={Type.TERT}
- toggleStatus={BoolCast(LightboxView.LightboxDoc!._layout_fitWidth)}
- onClick={e => {
- e.stopPropagation();
- LightboxView.LightboxDoc!._layout_fitWidth = !LightboxView.LightboxDoc!._layout_fitWidth;
- }}
- icon={<FontAwesomeIcon icon={LightboxView.LightboxDoc?._layout_fitWidth ? 'book-open' : 'book'} size="sm" />}
- />
- </div>
- <div className="lightboxView-tabBtn">
- <Toggle
- tooltip="open document in a tab"
- color={SettingsManager.userColor}
- background={SettingsManager.userBackgroundColor}
- toggleType={ToggleType.BUTTON}
- type={Type.TERT}
- icon={<FontAwesomeIcon icon="file-download" size="sm" />}
- onClick={e => {
- const lightdoc = LightboxView._docTarget || LightboxView._doc!;
- e.stopPropagation();
- Doc.RemoveDocFromList(Doc.MyRecentlyClosed, 'data', lightdoc);
- CollectionDockingView.AddSplit(lightdoc, OpenWhereMod.none);
- SelectionManager.DeselectAll();
- LightboxView.SetLightboxDoc(undefined);
- }}
- />
- </div>
- <div className="lightboxView-penBtn">
- <Toggle
- tooltip="toggle pen annotation"
- color={SettingsManager.userColor}
- background={Doc.ActiveTool === InkTool.Pen ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
- toggleType={ToggleType.BUTTON}
- toggleStatus={Doc.ActiveTool === InkTool.Pen}
- type={Type.TERT}
- icon={<FontAwesomeIcon icon="pen" size="sm" />}
- onClick={e => {
- e.stopPropagation();
- Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
- }}
- />
- </div>
- <div className="lightboxView-exploreBtn">
- <Toggle
- tooltip="toggle explore mode to navigate among documents only"
- color={SettingsManager.userColor}
- background={DocumentView.ExploreMode ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
- toggleType={ToggleType.BUTTON}
- type={Type.TERT}
- toggleStatus={DocumentView.ExploreMode}
- icon={<FontAwesomeIcon icon="globe-americas" size="sm" />}
- onClick={action(e => {
- e.stopPropagation();
- DocumentView.ExploreMode = !DocumentView.ExploreMode;
- })}
- />
- </div>
+ <LightboxTourBtn lightboxDoc={this.lightboxDoc} navBtn={this.renderNavBtn} future={this.future} stepInto={this.stepInto} />
+ {toggleBtn('lightboxView-navBtn', 'toggle reading view', this._doc?._layout_fitWidth, 'book-open', 'book', this.toggleFitWidth)}
+ {toggleBtn('lightboxView-tabBtn', 'open document in a tab', false, 'file-download', '', this.downloadDoc)}
+ {toggleBtn('lightboxView-penBtn', 'toggle pen annotation', Doc.ActiveTool === InkTool.Pen, 'pen', '', this.togglePen)}
+ {toggleBtn('lightboxView-exploreBtn', 'toggle navigate only mode', SnappingManager.ExploreMode, 'globe-americas', '', this.toggleExplore)}
</div>
);
}
}
interface LightboxTourBtnProps {
- navBtn: (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => JSX.Element;
+ navBtn: (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: IconProp, display: any, click: () => void, color?: string) => JSX.Element;
future: () => Opt<Doc[]>;
stepInto: () => void;
+ lightboxDoc: () => Opt<Doc>;
}
@observer
export class LightboxTourBtn extends React.Component<LightboxTourBtnProps> {
render() {
- return this.props.navBtn(
- '50%',
- 0,
- 0,
- 'chevron-down',
- () => (LightboxView.LightboxDoc /*&& this.props.future()?.length*/ ? '' : 'none'),
- e => {
- e.stopPropagation();
- this.props.stepInto();
- },
- ''
- );
+ return this.props.navBtn('50%', 0, 0, 'chevron-down', this.props.lightboxDoc(), this.props.stepInto, '');
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 06:00:29 +0000