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.tsx83
1 files changed, 35 insertions, 48 deletions
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 3627aa783..2567d44bb 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -27,6 +27,13 @@ interface LightboxViewProps {
maxBorder: number[];
}
+type LightboxSavedState = {
+ panX: Opt<number>;
+ panY: Opt<number>;
+ scale: Opt<number>;
+ scrollTop: Opt<number>;
+ layoutKey: Opt<string>;
+};
@observer
export class LightboxView extends React.Component<LightboxViewProps> {
@computed public static get LightboxDoc() {
@@ -34,21 +41,22 @@ export class LightboxView extends React.Component<LightboxViewProps> {
}
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 _docFilters: string[] = []; // filters
- private static _savedState: Opt<{ panX: Opt<number>; panY: Opt<number>; scale: Opt<number>; scrollTop: Opt<number> }>;
+ 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>;
- 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) {
+ 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) {
- this.LightboxDoc._panX = this._savedState.panX;
- this.LightboxDoc._panY = this._savedState.panY;
- this.LightboxDoc._scrollTop = this._savedState.scrollTop;
- this.LightboxDoc._viewScale = this._savedState.scale;
+ if (this._savedState.panX !== undefined) this.LightboxDoc._panX = this._savedState.panX;
+ if (this._savedState.panY !== undefined) this.LightboxDoc._panY = this._savedState.panY;
+ if (this._savedState.scrollTop !== undefined) this.LightboxDoc._scrollTop = this._savedState.scrollTop;
+ if (this._savedState.scale !== undefined) this.LightboxDoc._viewScale = this._savedState.scale;
+ this.LightboxDoc.layoutKey = this._savedState.layoutKey;
}
if (!doc) {
this._docFilters && (this._docFilters.length = 0);
@@ -60,19 +68,16 @@ export class LightboxView extends React.Component<LightboxViewProps> {
const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement();
l && (Cast(l.anchor2, Doc, null).backgroundColor = 'lightgreen');
}
- CollectionStackedTimeline.CurrentlyPlaying?.forEach(doc => {
- DocumentManager.Instance.getAllDocumentViews(doc).forEach(dv => {
- dv.ComponentView?.Pause?.();
- });
- });
+ 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 = {
- panX: Cast(doc._panX, 'number', null),
- panY: Cast(doc._panY, 'number', null),
- scale: Cast(doc._viewScale, 'number', null),
- scrollTop: Cast(doc._scrollTop, 'number', null),
+ layoutKey: StrCast(doc.layoutKey),
+ panX: Cast(doc.panX, 'number', null),
+ panY: Cast(doc.panY, 'number', null),
+ scale: Cast(doc.viewScale, 'number', null),
+ scrollTop: Cast(doc.scrollTop, 'number', null),
};
}
}
@@ -87,7 +92,10 @@ export class LightboxView extends React.Component<LightboxViewProps> {
];
}
this._doc = doc;
- this._layoutTemplate = layoutTemplate;
+ this._layoutTemplate = layoutTemplate instanceof Doc ? layoutTemplate : undefined;
+ if (doc && (typeof layoutTemplate === 'string' ? layoutTemplate : undefined)) {
+ doc.layoutKey = layoutTemplate;
+ }
this._docTarget = target || doc;
return true;
@@ -132,20 +140,14 @@ export class LightboxView extends React.Component<LightboxViewProps> {
this._docFilters = (f => (this._docFilters ? [this._docFilters.push(f) as any, this._docFilters][1] : [f]))(`cookies:${cookie}:provide`);
}
}
- public static AddDocTab = (doc: Doc, location: OpenWhere, layoutTemplate?: Doc, openInTabFunc?: any) => {
- if (location !== OpenWhere.lightbox) {
- const inPlaceView = DocCast(doc.context) ? DocumentManager.Instance.getFirstDocumentView(DocCast(doc.context)) : undefined;
- if (inPlaceView) {
- inPlaceView.dataDoc[Doc.LayoutFieldKey(inPlaceView.rootDoc)] = new List<Doc>([doc]);
- return true;
- }
- }
- LightboxView.openInTabFunc = openInTabFunc;
+ public static AddDocTab = (doc: Doc, location: OpenWhere, layoutTemplate?: Doc | string) => {
SelectionManager.DeselectAll();
return LightboxView.SetLightboxDoc(
doc,
undefined,
- [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '-annotations']), ...(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), ...(LightboxView._future ?? [])].sort(
+ (a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)
+ ),
layoutTemplate
);
};
@@ -158,7 +160,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
if (targetDocView && target) {
const l = DocUtils.MakeLinkToActiveAudio(() => targetDocView.ComponentView?.getAnchor?.(true) || target).lastElement();
l && (Cast(l.anchor2, Doc, null).backgroundColor = 'lightgreen');
- targetDocView.focus(target, { originalTarget: target, willPanZoom: true, zoomScale: 0.9 });
+ DocumentManager.Instance.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 });
if (LightboxView._history?.lastElement().target !== target) LightboxView._history?.push({ doc, target });
} else {
if (!target && LightboxView.path.length) {
@@ -193,8 +195,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
const docView = DocumentManager.Instance.getLightboxDocumentView(target || doc);
if (docView) {
LightboxView._docTarget = target;
- if (!target) docView.ComponentView?.shrinkWrap?.();
- else docView.focus(target, { willPanZoom: true, zoomScale: 0.9 });
+ target && DocumentManager.Instance.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 });
} else {
LightboxView.SetLightboxDoc(doc, target);
}
@@ -218,7 +219,6 @@ export class LightboxView extends React.Component<LightboxViewProps> {
.filter(doc => doc)
.map(doc => doc!);
LightboxView.SetLightboxDoc(coll, undefined, contents.length ? contents : links);
- TabDocView.PinDoc(coll, { hidePresBox: true });
}
};
@@ -251,19 +251,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
<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
- })
- );
- })}
+ ref={action((r: DocumentView | null) => (LightboxView._docView = r !== null ? r : undefined))}
Document={LightboxView.LightboxDoc}
DataDoc={undefined}
PanelWidth={this.lightboxWidth}
@@ -319,7 +307,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
<LightboxTourBtn navBtn={this.navBtn} future={this.future} stepInto={this.stepInto} />
<div
className="lightboxView-navBtn"
- title={'toggle fit width'}
+ title="toggle fit width"
onClick={e => {
e.stopPropagation();
LightboxView.LightboxDoc!._fitWidth = !LightboxView.LightboxDoc!._fitWidth;
@@ -328,11 +316,10 @@ export class LightboxView extends React.Component<LightboxViewProps> {
</div>
<div
className="lightboxView-tabBtn"
- title={'open in tab'}
+ title="open in tab"
onClick={e => {
e.stopPropagation();
CollectionDockingView.AddSplit(LightboxView._docTarget || LightboxView._doc!, OpenWhereMod.none);
- //LightboxView.openInTabFunc(LightboxView._docTarget || LightboxView._doc!, "inPlace");
SelectionManager.DeselectAll();
LightboxView.SetLightboxDoc(undefined);
}}>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 11:39:10 +0000