From 2a4af13c04b05d3bc4a13dc400dd842060ab0339 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 14 Feb 2021 12:11:50 -0500 Subject: simplistic version of branching lightboxview --- src/client/views/LightboxView.tsx | 111 +++++++++++++++++++++++++++----------- 1 file changed, 79 insertions(+), 32 deletions(-) (limited to 'src') diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index d36c3ad4f..43d65795c 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -14,6 +14,7 @@ import { DocumentManager } from '../util/DocumentManager'; import { SelectionManager } from '../util/SelectionManager'; import { TabDocView } from './collections/TabDocView'; import { Cast, NumCast } from '../../fields/Types'; +import { path } from 'animejs'; interface LightboxViewProps { PanelWidth: number; @@ -26,6 +27,10 @@ export class LightboxView extends React.Component { public static SavedState: Opt<{ panX: Opt, panY: Opt, scale: Opt, transition: Opt }>; @observable static LightboxDoc: Opt; @observable static LightboxDocTarget: Opt; + public static LightboxHistory: Opt = []; + public static LightboxFuture: Opt = []; + public static LightboxDocView: Opt; + static path: { doc: Opt, target: Opt, history: Opt, future: Opt, saved: Opt<{ panX: Opt, panY: Opt, scale: Opt, transition: Opt }> }[] = []; @action public static SetLightboxDoc(doc: Opt, future?: Doc[]) { if (!doc) { if (this.LightboxDoc) { @@ -51,21 +56,19 @@ export class LightboxView extends React.Component { return true; } public static IsLightboxDocView(path: DocumentView[]) { return path.includes(LightboxView.LightboxDocView!); } - public static LightboxHistory: Opt = []; - public static LightboxFuture: Opt = []; - public static LightboxDocView: Opt; @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, icon: string, display: () => string, click: (e: React.MouseEvent) => void) => { + navBtn = (left: Opt, bottom: Opt, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void) => { return
-
@@ -81,6 +84,63 @@ export class LightboxView extends React.Component { .sort((a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow))); } addDocTab = LightboxView.AddDocTab; + @action + stepForward = () => { + const target = LightboxView.LightboxDocTarget = LightboxView.LightboxFuture?.pop(); + const docView = target && DocumentManager.Instance.getLightboxDocumentView(target); + if (docView && target) { + docView.focus(target, true, 0.9); + if (LightboxView.LightboxHistory?.lastElement() !== target) LightboxView.LightboxHistory?.push(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; + } + const pop = LightboxView.path.pop(); + if (pop) { + LightboxView.LightboxDoc = pop.doc; + LightboxView.LightboxDocTarget = pop.target; + LightboxView.LightboxFuture = pop.future; + LightboxView.LightboxHistory = pop.history; + LightboxView.SavedState = pop.saved; + } + } else { + LightboxView.SetLightboxDoc(target); + } + } + } + @action + stepBackward = () => { + const previous = LightboxView.LightboxHistory?.pop(); + const target = LightboxView.LightboxDocTarget = LightboxView.LightboxHistory?.lastElement(); + const docView = target && DocumentManager.Instance.getLightboxDocumentView(target); + if (docView && target) { + if (LightboxView.LightboxFuture?.lastElement() !== previous) LightboxView.LightboxFuture?.push(previous!); + docView.focus(target, true, 0.9); + } else { + LightboxView.SetLightboxDoc(target); + } + } + @action + stepInto = () => { + LightboxView.path.push({ + doc: LightboxView.LightboxDoc, + target: LightboxView.LightboxDocTarget, + future: LightboxView.LightboxFuture, + history: LightboxView.LightboxHistory, + saved: LightboxView.SavedState + }); + const coll = LightboxView.LightboxDocTarget; + if (coll) { + const fieldKey = Doc.LayoutFieldKey(coll); + LightboxView.SetLightboxDoc(coll, [...DocListCast(coll[fieldKey]), ...DocListCast(coll[fieldKey + "-annotations"])]); + } + setTimeout(() => this.stepForward()); + } fitToBox = () => LightboxView.LightboxDocTarget === LightboxView.LightboxDoc; render() { @@ -137,34 +197,21 @@ export class LightboxView extends React.Component { ContainingCollectionDoc={undefined} renderDepth={0} />
- {this.navBtn(undefined, "chevron-left", - () => LightboxView.LightboxDoc && LightboxView.LightboxHistory?.length ? "" : "none", - action(e => { + {this.navBtn(0, undefined, this.props.PanelHeight / 2 - 12.50, "chevron-left", + () => LightboxView.LightboxDoc && LightboxView.LightboxHistory?.length ? "" : "none", e => { e.stopPropagation(); - const previous = LightboxView.LightboxHistory?.pop(); - const target = LightboxView.LightboxDocTarget = LightboxView.LightboxHistory?.lastElement(); - const docView = target && DocumentManager.Instance.getLightboxDocumentView(target); - if (docView && target) { - if (LightboxView.LightboxFuture?.lastElement() !== previous) LightboxView.LightboxFuture?.push(previous!); - docView.focus(target, true, 0.9); - } else { - LightboxView.SetLightboxDoc(target); - } - }))} - {this.navBtn(this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), "chevron-right", - () => LightboxView.LightboxDoc && LightboxView.LightboxFuture?.length ? "" : "none", - action(e => { + this.stepBackward(); + })} + {this.navBtn(this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), undefined, this.props.PanelHeight / 2 - 12.50, "chevron-right", + () => LightboxView.LightboxDoc && LightboxView.LightboxFuture?.length ? "" : "none", e => { e.stopPropagation(); - const target = LightboxView.LightboxDocTarget = LightboxView.LightboxFuture?.pop(); - const docView = target && DocumentManager.Instance.getLightboxDocumentView(target); - if (docView && target) { - docView.focus(target, true, 0.9); - if (LightboxView.LightboxHistory?.lastElement() !== target) LightboxView.LightboxHistory?.push(target); - } else { - LightboxView.SetLightboxDoc(target); - } - }))} - + this.stepForward(); + })} + {this.navBtn("50%", 0, 0, "chevron-down", + () => LightboxView.LightboxDoc && LightboxView.LightboxFuture?.length ? "" : "none", e => { + e.stopPropagation(); + this.stepInto(); + })} ; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2