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.tsx117
1 files changed, 67 insertions, 50 deletions
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index e967a5b07..babc518ff 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -1,5 +1,5 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable } from 'mobx';
+import { action, computed, observable, trace } from 'mobx';
import { observer } from 'mobx-react';
import "normalize.css";
import * as React from 'react';
@@ -13,7 +13,7 @@ import { SelectionManager } from '../util/SelectionManager';
import { Transform } from '../util/Transform';
import { TabDocView } from './collections/TabDocView';
import "./LightboxView.scss";
-import { DocumentView } from './nodes/DocumentView';
+import { DocumentView, ViewAdjustment } from './nodes/DocumentView';
import { DefaultStyleProvider } from './StyleProvider';
interface LightboxViewProps {
@@ -28,32 +28,33 @@ export class LightboxView extends React.Component<LightboxViewProps> {
@computed public static get LightboxDoc() { return this._doc; }
@observable private static _doc: Opt<Doc>;
@observable private static _docTarget: Opt<Doc>;
- @observable private static _tourMap: Opt<Doc[]> = []; // list of all tours available from the current target
@observable private static _docFilters: string[] = []; // filters
- private static _savedState: Opt<{ panX: Opt<number>, panY: Opt<number>, scale: Opt<number>, transition: Opt<string> }>;
+ @observable private static _tourMap: Opt<Doc[]> = []; // list of all tours available from the current target
+ private static _savedState: Opt<{ panX: Opt<number>, panY: Opt<number>, scale: Opt<number> }>;
private static _history: Opt<{ doc: Doc, target?: Doc }[]> = [];
private static _future: Opt<Doc[]> = [];
private static _docView: Opt<DocumentView>;
- 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>, transition: Opt<string> }> }[] = [];
+ 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> }> }[] = [];
@action public static SetLightboxDoc(doc: Opt<Doc>, target?: Doc, future?: Doc[]) {
+ if (this.LightboxDoc && this.LightboxDoc !== doc && this._savedState) {
+ this.LightboxDoc._panX = this._savedState.panX;
+ this.LightboxDoc._panY = this._savedState.panY;
+ this.LightboxDoc._viewScale = this._savedState.scale;
+ this.LightboxDoc._viewTransition = undefined;
+ }
if (!doc) {
this._docFilters && (this._docFilters.length = 0);
- if (this.LightboxDoc) {
- this.LightboxDoc._panX = this._savedState?.panX;
- this.LightboxDoc._panY = this._savedState?.panY;
- this.LightboxDoc._viewScale = this._savedState?.scale;
- this.LightboxDoc._viewTransition = this._savedState?.transition;
- }
this._future = this._history = [];
} else {
TabDocView.PinDoc(doc, { hidePresBox: true });
this._history ? this._history.push({ doc, target }) : this._history = [{ doc, target }];
- this._savedState = {
- panX: Cast(doc._panX, "number", null),
- panY: Cast(doc._panY, "number", null),
- scale: Cast(doc._viewScale, "number", null),
- transition: Cast(doc._viewTransition, "string", null)
- };
+ if (doc !== LightboxView.LightboxDoc) {
+ this._savedState = {
+ panX: Cast(doc._panX, "number", null),
+ panY: Cast(doc._panY, "number", null),
+ scale: Cast(doc._viewScale, "number", null),
+ };
+ }
}
if (future) {
this._future = future.slice().sort((a, b) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)).sort((a, b) => DocListCast(a.links).length - DocListCast(b.links).length);
@@ -92,6 +93,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
}
// 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._docFilters = (f => this._docFilters ? [this._docFilters.push(f) as any, this._docFilters][1] : [f])(`cookies:${cookie}:provide`);
@@ -103,8 +105,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
[...DocListCast(doc[Doc.LayoutFieldKey(doc)]),
...DocListCast(doc[Doc.LayoutFieldKey(doc) + "-annotations"]),
...(LightboxView._future ?? [])
- ]
- .sort((a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)));
+ ].sort((a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)));
}
docFilters = () => LightboxView._docFilters || [];
addDocTab = LightboxView.AddDocTab;
@@ -113,16 +114,16 @@ export class LightboxView extends React.Component<LightboxViewProps> {
const target = LightboxView._docTarget = LightboxView._future?.pop();
const docView = target && DocumentManager.Instance.getLightboxDocumentView(target);
if (docView && target) {
- docView.focus(target, { willZoom: true, scale: 0.9 });
- if (LightboxView._history?.lastElement().target !== target) LightboxView._history?.push({ doc, target: LightboxView._docTarget });
+ docView.focus(target, { originalTarget: target, willZoom: true, scale: 0.9 });
+ if (LightboxView._history?.lastElement().target !== target) LightboxView._history?.push({ doc, target });
} else {
if (!target && LightboxView.path.length) {
const saved = LightboxView._savedState;
- if (LightboxView.LightboxDoc) {
- LightboxView.LightboxDoc._panX = saved?.panX;
- LightboxView.LightboxDoc._panY = saved?.panY;
- LightboxView.LightboxDoc._viewScale = saved?.scale;
- LightboxView.LightboxDoc._viewTransition = saved?.transition;
+ if (LightboxView.LightboxDoc && saved) {
+ LightboxView.LightboxDoc._panX = saved.panX;
+ LightboxView.LightboxDoc._panY = saved.panY;
+ LightboxView.LightboxDoc._viewScale = saved.scale;
+ LightboxView.LightboxDoc._viewTransition = undefined;
}
const pop = LightboxView.path.pop();
if (pop) {
@@ -149,16 +150,19 @@ export class LightboxView extends React.Component<LightboxViewProps> {
return;
}
const { doc, target } = LightboxView._history?.lastElement();
- const docView = target && DocumentManager.Instance.getLightboxDocumentView(target);
- if (docView && target) {
- LightboxView._doc = doc;
- LightboxView._docTarget = target || doc;
- if (LightboxView._future?.lastElement() !== previous.target || previous.doc) LightboxView._future?.push(previous.target || previous.doc);
- docView.focus(target, { willZoom: true, scale: 0.9 });
- } else {
- LightboxView._doc = doc;
- LightboxView._docTarget = target || doc;
+ const docView = DocumentManager.Instance.getLightboxDocumentView(target || doc);
+ if (docView) {
+ LightboxView._docTarget = undefined;
+ const focusSpeed = 1000;
+ doc._viewTransition = `transform ${focusSpeed}ms`;
+ if (!target) docView.ComponentView?.shrinkWrap?.();
+ else docView.focus(target, { willZoom: true, scale: 0.9 });
+ setTimeout(() => doc._viewTransition = undefined, focusSpeed);
}
+ else {
+ LightboxView.SetLightboxDoc(doc, target);
+ }
+ if (LightboxView._future?.lastElement() !== previous.target || previous.doc) LightboxView._future?.push(previous.target || previous.doc);
LightboxView._tourMap = DocListCast(LightboxView._docTarget?.links).map(link => {
const opp = LinkManager.getOppositeAnchor(link, LightboxView._docTarget!);
return opp?.TourMap ? opp : undefined;
@@ -188,6 +192,8 @@ export class LightboxView extends React.Component<LightboxViewProps> {
setTimeout(LightboxView.Next);
}
+ future = () => LightboxView._future;
+ tourMap = () => LightboxView._tourMap;
fitToBox = () => LightboxView._docTarget === LightboxView.LightboxDoc;
render() {
let downx = 0, downy = 0;
@@ -207,14 +213,13 @@ export class LightboxView extends React.Component<LightboxViewProps> {
}}>
<DocumentView ref={action((r: DocumentView | null) => {
LightboxView._docView = r !== null ? r : undefined;
- setTimeout(action(() => {
- const vals = r?.ComponentView?.freeformData?.();
- if (vals && r) {
- r.layoutDoc._panX = vals.panX;
- r.layoutDoc._panY = vals.panY;
- r.layoutDoc._viewScale = vals.scale;
- }
- r && (LightboxView._docTarget = 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 && targetView?.focus(target, { willZoom: true, scale: 0.9, instant: true });
+ LightboxView._docTarget = undefined;
}));
})}
Document={LightboxView.LightboxDoc}
@@ -252,13 +257,25 @@ export class LightboxView extends React.Component<LightboxViewProps> {
e.stopPropagation();
LightboxView.Next();
})}
- {this.navBtn("50%", 0, 0, "chevron-down",
- () => LightboxView.LightboxDoc && LightboxView._future?.length ? "" : "none", e => {
- e.stopPropagation();
- this.stepInto();
- },
- StrCast(LightboxView._tourMap?.lastElement()?.TourMap)
- )}
+ <LightboxTourBtn navBtn={this.navBtn} future={this.future} stepInto={this.stepInto} tourMap={this.tourMap} />
</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;
+ tourMap: () => Opt<Doc[]>;
+ future: () => Opt<Doc[]>;
+ stepInto: () => void;
+}
+@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();
+ },
+ StrCast(this.props.tourMap()?.lastElement()?.TourMap)
+ )
+ }
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 11:08:22 +0000