aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/DocumentDecorations.tsx2
-rw-r--r--src/client/views/LightboxView.tsx433
-rw-r--r--src/client/views/MainView.tsx2
-rw-r--r--src/client/views/collections/CollectionMenu.tsx2
-rw-r--r--src/client/views/collections/CollectionNoteTakingView.tsx2
-rw-r--r--src/client/views/collections/TabDocView.tsx2
-rw-r--r--src/client/views/nodes/DocumentView.tsx9
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.tsx2
-rw-r--r--src/client/views/nodes/trails/PresBox.tsx36
9 files changed, 193 insertions, 297 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 6c55895ef..ff7daa2eb 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -307,7 +307,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
openDoc = DocListCast(openDoc.proto_embeddings).find(embedding => !embedding.embedContainer) ?? Doc.MakeEmbedding(openDoc);
Doc.deiconifyView(openDoc);
}
- LightboxView.SetLightboxDoc(
+ LightboxView.Instance.SetLightboxDoc(
openDoc,
undefined,
selectedDocs.slice(1).map(view => view.rootDoc)
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 93eaec959..c91f8455a 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, 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, returnTrue, Utils } from '../../Utils';
import { DocUtils } from '../documents/Documents';
import { DocumentManager } from '../util/DocumentManager';
import { LinkManager } from '../util/LinkManager';
@@ -27,216 +28,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;
+ public static IsLightboxDocView(path: DocumentView[]) { return (path ?? []).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>;
+ @observable private _layoutTemplateString: Opt<string>;
+ @observable private _doc: Opt<Doc>;
+ @observable private _docTarget: Opt<Doc>;
+ @observable private _docView: Opt<DocumentView>;
+
+ @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);
+ if (LightboxView.Instance) console.log('SDFSFASFASFSALFKJD:SLFJS:LDFJKS:LFJS:LDJFL:SDFJL:SDJF:LSJ');
+ 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;
+ DocumentView.ExploreMode = 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 = () => (DocumentView.ExploreMode = !DocumentView.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,16 +243,14 @@ 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}
+ ref={action((r: DocumentView | null) => (this._docView = r !== null ? r : undefined))}
+ Document={this._doc}
DataDoc={undefined}
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}
@@ -265,13 +258,13 @@ export class LightboxView extends React.Component<LightboxViewProps> {
renderDepth={0}
rootSelected={returnTrue}
docViewPath={returnEmptyDoclist}
- childFilters={this.childFilters}
+ 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}
@@ -280,116 +273,34 @@ export class LightboxView extends React.Component<LightboxViewProps> {
</GestureOverlay>
</div>
- {this.navBtn(
- 0,
- undefined,
- this.props.PanelHeight / 2 - 12.5,
- 'chevron-left',
- () => (LightboxView.LightboxDoc && LightboxView._history?.length ? '' : 'none'),
- e => {
- e.stopPropagation();
- LightboxView.Previous();
- }
- )}
- {this.navBtn(
+ {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-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', DocumentView.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, '');
}
}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ccb46d7ec..f67bd3288 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -701,7 +701,7 @@ export class MainView extends React.Component {
if (doc.dockingConfig && !keyValue) return DashboardView.openDashboard(doc);
// prettier-ignore
switch (whereFields[0]) {
- case OpenWhere.lightbox: return LightboxView.AddDocTab(doc, location);
+ case OpenWhere.lightbox: return LightboxView.Instance.AddDocTab(doc, location);
case OpenWhere.close: return CollectionDockingView.CloseSplit(doc, whereMods);
case OpenWhere.toggle: return CollectionDockingView.ToggleSplit(doc, whereMods, undefined, "dontSelectOnActivate"); // bcz: hack! mark the toggle so that it won't be selected on activation- this is needed so that the backlinks menu can toggle views of targets on and off without selecting them
case OpenWhere.add:default:return CollectionDockingView.AddSplit(doc, whereMods, undefined, undefined, keyValue);
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index d0eadd9aa..f722682c9 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -634,7 +634,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu
className="antimodeMenu-button"
onPointerDown={() => {
const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
- LightboxView.SetLightboxDoc(targetDoc, undefined, docs);
+ LightboxView.Instance.SetLightboxDoc(targetDoc, undefined, docs);
}}>
<FontAwesomeIcon className="colMenu-icon" icon="desktop" size="lg" />
</button>
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index bb6d94590..ac72a45e0 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -336,7 +336,7 @@ export class CollectionNoteTakingView extends CollectionSubView() {
// onPointerMove is used to preview where a document will drop in a column once a drag is complete.
@action
onPointerMove = (force: boolean, ex: number, ey: number) => {
- if (this.childDocList && (this.childDocList.includes(DragManager.DocDragData?.draggedDocuments.lastElement()!) || force || this.isContentActive())) {
+ if (this.childDocList?.includes(DragManager.DocDragData?.draggedDocuments?.lastElement() as any) || force || this.isContentActive()) {
// get the current docs for the column based on the mouse's x coordinate
const xCoord = this.props.ScreenToLocalTransform().transformPoint(ex, ey)[0] - 2 * this.gridGap;
const colDocs = this.getDocsFromXCoord(xCoord);
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 180578a36..df36fdfbf 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -379,7 +379,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
return true;
}
}
- return LightboxView.AddDocTab(doc, location);
+ return LightboxView.Instance.AddDocTab(doc, location);
case OpenWhere.close: return CollectionDockingView.CloseSplit(doc, whereMods);
case OpenWhere.replace: return CollectionDockingView.ReplaceTab(doc, whereMods, this.stack, undefined, keyValue);
case OpenWhere.toggle: return CollectionDockingView.ToggleSplit(doc, whereMods, this.stack, "dontSelectOnActivate", keyValue);
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 943408010..0aaa9c538 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -468,7 +468,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
}, console.log );
UndoManager.RunInBatch(() => (func().result?.select === true ? this.props.select(false) : ''), 'on double click');
} else if (!Doc.IsSystem(this.rootDoc) && (defaultDblclick === undefined || defaultDblclick === 'default')) {
- UndoManager.RunInBatch(() => LightboxView.AddDocTab(this.rootDoc, OpenWhere.lightbox), 'double tap');
+ UndoManager.RunInBatch(() => LightboxView.Instance.AddDocTab(this.rootDoc, OpenWhere.lightbox), 'double tap');
SelectionManager.DeselectAll();
Doc.UnBrushDoc(this.props.Document);
} else {
@@ -760,7 +760,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
const appearanceItems: ContextMenuProps[] = appearance && 'subitems' in appearance ? appearance.subitems : [];
if (this.props.renderDepth === 0) {
- appearanceItems.push({ description: 'Open in Lightbox', event: () => LightboxView.SetLightboxDoc(this.rootDoc), icon: 'hand-point-right' });
+ appearanceItems.push({ description: 'Open in Lightbox', event: () => LightboxView.Instance.SetLightboxDoc(this.rootDoc), icon: 'hand-point-right' });
}
!Doc.noviceMode && templateDoc && appearanceItems.push({ description: 'Open Template ', event: () => this.props.addDocTab(templateDoc, OpenWhere.addRight), icon: 'eye' });
!appearance && appearanceItems.length && cm.addItem({ description: 'UI Controls...', subitems: appearanceItems, icon: 'compass' });
@@ -1415,7 +1415,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
const docId = Doc.CurrentUserEmail + Doc.GetProto(linkAnchor)[Id] + '-pivotish';
// prettier-ignore
DocServer.GetRefField(docId).then(docx =>
- LightboxView.SetLightboxDoc(
+ LightboxView.Instance.SetLightboxDoc(
(docx as Doc) ?? // reuse existing pivot view of documents, or else create a new collection
Docs.Create.StackingDocument([], { title: linkAnchor.title + '-pivot', _width: 500, _height: 500, target: linkAnchor, updateContentsScript: ScriptField.MakeScript('updateLinkCollection(self, self.target)') }, docId)
)
@@ -1701,8 +1701,7 @@ ScriptingGlobals.add(function deiconifyView(documentView: DocumentView) {
});
ScriptingGlobals.add(function deiconifyViewToLightbox(documentView: DocumentView) {
- //documentView.iconify(() =>
- LightboxView.AddDocTab(documentView.rootDoc, OpenWhere.lightbox, 'layout'); //, 0);
+ LightboxView.Instance.AddDocTab(documentView.rootDoc, OpenWhere.lightbox, 'layout'); //, 0);
});
ScriptingGlobals.add(function toggleDetail(dv: DocumentView, detailLayoutKeySuffix: string) {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 515952ae4..7a175c9f6 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1936,7 +1936,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
const color = !annotated ? Colors.WHITE : Colors.BLACK;
const backgroundColor = !annotated ? (this.sidebarWidth() ? Colors.MEDIUM_BLUE : Colors.BLACK) : this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.WidgetColor + (annotated ? ':annotated' : ''));
- return !annotated && (!this.props.isContentActive() || SnappingManager.GetIsDragging()) ? null : (
+ return !annotated && (!this.props.isContentActive() || SnappingManager.GetIsDragging() || Doc.ActiveTool !== InkTool.None) ? null : (
<div
className="formattedTextBox-sidebar-handle"
onPointerDown={this.sidebarDown}
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 3d7c68bcd..c4ef07123 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -204,16 +204,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
);
this._disposers.editing = reaction(
() => this.layoutDoc.presentation_status === PresStatus.Edit,
- editing => {
- if (editing) {
- this.childDocs.forEach(doc => {
- if (doc.presentation_indexed !== undefined) {
- this.progressivizedItems(doc)?.forEach(indexedDoc => (indexedDoc.opacity = undefined));
- doc.presentation_indexed = Math.min(this.progressivizedItems(doc)?.length ?? 0, 1);
- }
- });
- }
- }
+ editing => editing &&
+ this.childDocs.filter(doc => doc.presentation_indexed !== undefined).forEach(doc => {
+ this.progressivizedItems(doc)?.forEach(indexedDoc => (indexedDoc.opacity = undefined));
+ doc.presentation_indexed = Math.min(this.progressivizedItems(doc)?.length ?? 0, 1);
+ }) // prettier-ignore
);
}
@@ -283,19 +278,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
};
// go to documents chain
- runSubroutines = (childrenToRun: Doc[], normallyNextSlide: Doc) => {
- console.log(childrenToRun, normallyNextSlide, 'runSUBFUNC');
- if (childrenToRun === undefined) {
- console.log('children undefined');
- return;
+ runSubroutines = (childrenToRun: Opt<Doc[]>, normallyNextSlide: Doc) => {
+ if (childrenToRun && childrenToRun[0] !== normallyNextSlide) {
+ childrenToRun.forEach(child => DocumentManager.Instance.showDocument(child, {}));
}
- if (childrenToRun[0] === normallyNextSlide) {
- return;
- }
-
- childrenToRun.forEach(child => {
- DocumentManager.Instance.showDocument(child, {});
- });
};
// Called when the user activates 'next' - to move to the next part of the pres. trail
@@ -806,7 +792,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if (activeItem.presentation_openInLightbox) {
const context = DocCast(targetDoc.annotationOn) ?? targetDoc;
if (!DocumentManager.Instance.getLightboxDocumentView(context)) {
- LightboxView.SetLightboxDoc(context);
+ LightboxView.Instance.SetLightboxDoc(context);
}
}
if (targetDoc) {
@@ -815,7 +801,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
DocumentManager.Instance.AddViewRenderedCb(LightboxView.LightboxDoc, dv => {
// if target or the doc it annotates is not in the lightbox, then close the lightbox
if (!DocumentManager.Instance.getLightboxDocumentView(DocCast(targetDoc.annotationOn) ?? targetDoc)) {
- LightboxView.SetLightboxDoc(undefined);
+ LightboxView.Instance.SetLightboxDoc(undefined);
}
DocumentManager.Instance.showDocument(targetDoc, options, finished);
});
@@ -909,7 +895,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
break;
}
});
- LightboxView.SetLightboxDoc(undefined);
+ LightboxView.Instance.SetLightboxDoc(undefined);
Doc.RemFromMyOverlay(this.rootDoc);
return PresStatus.Edit;
};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 10:08:27 +0000