From 7c1dd332dc444d2d34cc9cc142de5998ca4622b5 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 4 Feb 2021 14:32:38 -0500 Subject: fixed scrolling animations in view bounds for webbox and pdfBox's particualrly for lightbox views. added a docViewPath prop for docuentViews. --- src/client/util/DocumentManager.ts | 19 ++++++++++++---- src/client/util/LinkManager.ts | 2 +- src/client/views/MainView.tsx | 25 +++++++++++++++++++--- .../views/collections/CollectionStackingView.tsx | 2 ++ .../views/collections/CollectionTreeView.tsx | 2 ++ src/client/views/collections/TabDocView.tsx | 5 ++++- .../collectionFreeForm/CollectionFreeFormView.tsx | 9 +++++--- .../views/nodes/CollectionFreeFormDocumentView.tsx | 3 ++- src/client/views/nodes/DocumentContentsView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 9 ++++++-- src/client/views/nodes/WebBox.tsx | 11 ++++++++-- src/client/views/pdf/PDFViewer.tsx | 12 +++++------ 12 files changed, 77 insertions(+), 24 deletions(-) (limited to 'src') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 41c7a1409..08efdb36c 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -1,4 +1,4 @@ -import { action, observable } from 'mobx'; +import { action, observable, runInAction } from 'mobx'; import { Doc, DocListCast, DocListCastAsync, Opt } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { Cast, NumCast } from '../../fields/Types'; @@ -9,6 +9,7 @@ import { CollectionView } from '../views/collections/CollectionView'; import { DocumentView } from '../views/nodes/DocumentView'; import { LinkManager } from './LinkManager'; import { Scripting } from './Scripting'; +import { MainView } from '../views/MainView'; export type CreateViewFunc = (doc: Doc, followLinkLocation: string, finished?: () => void) => void; @@ -116,6 +117,7 @@ export class DocumentManager { // heuristic to return the "best" documents first: // choose an exact match over an alias match // choose documents that have a PanelWidth() over those that don't (the treeview documents have no panelWidth) + docViews.map(view => view.docViewPath.includes(MainView.Instance.lightboxDocView.current!) && view.props.Document === toFind && toReturn.push(view)); docViews.map(view => view.props.PanelWidth() > 1 && view.props.Document === toFind && toReturn.push(view)); docViews.map(view => view.props.PanelWidth() <= 1 && view.props.Document === toFind && toReturn.push(view)); docViews.map(view => view.props.PanelWidth() > 1 && view.props.Document !== toFind && Doc.AreProtosEqual(view.props.Document, toFind) && toReturn.push(view)); @@ -139,7 +141,10 @@ export class DocumentManager { originatingDoc: Opt = undefined, // doc that initiated the display of the target odoc finished?: () => void, ): Promise => { - const getFirstDocView = DocumentManager.Instance.getFirstDocumentView; + const getFirstDocView = (toFind: Doc, originatingDoc?: Doc) => { + const docView = DocumentManager.Instance.getFirstDocumentView(toFind, originatingDoc); + return (!MainView.Instance.LightboxDoc || docView?.docViewPath.includes(MainView.Instance.lightboxDocView.current!)) ? docView : undefined; + } const focusAndFinish = () => { finished?.(); return false; }; const highlight = () => { const finalDocView = getFirstDocView(targetDoc); @@ -214,8 +219,14 @@ export class DocumentManager { findView(0); } } else { // there's no context view so we need to create one first and try again when that finishes - createViewFunc(targetDocContext, // after creating the context, this calls the finish function that will retry looking for the target - () => this.jumpToDocument(targetDoc, willZoom, createViewFunc, docContext, linkDoc, true /* if we don't find the target, we want to get rid of the context just created */, undefined, finished)); + const finishFunc = () => this.jumpToDocument(targetDoc, willZoom, createViewFunc, docContext, linkDoc, true /* if we don't find the target, we want to get rid of the context just created */, undefined, finished); + if (MainView.Instance.LightboxDoc) { + runInAction(() => MainView.Instance.LightboxDoc = annotatedDoc ? annotatedDoc : targetDoc); + setTimeout(() => finishFunc, 250); + } else { + createViewFunc(targetDocContext, // after creating the context, this calls the finish function that will retry looking for the target + finishFunc); + } } } } diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts index 3dabe0ec0..000017ebb 100644 --- a/src/client/util/LinkManager.ts +++ b/src/client/util/LinkManager.ts @@ -147,7 +147,7 @@ export class LinkManager { doc === linkDoc.anchor2 ? Cast(linkDoc.anchor1_timecode, "number") : (Doc.AreProtosEqual(doc, linkDoc.anchor1 as Doc) || Doc.AreProtosEqual((linkDoc.anchor1 as Doc).annotationOn as Doc, doc) ? Cast(linkDoc.anchor2_timecode, "number") : Cast(linkDoc.anchor1_timecode, "number"))); if (target) { - if (MainView.Instance.LightboxDoc) { + if (MainView.Instance.LightboxDoc && doc.annotationOn !== MainView.Instance.LightboxDoc) { // following a link should replace an existing lightboxDoc unless the target is an annotation on the lightbox document runInAction(() => MainView.Instance.LightboxDoc = (target.annotationOn as Doc) ?? target); finished?.(); } else { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index d72b2b409..9d9698c9c 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -13,7 +13,7 @@ import { List } from '../../fields/List'; import { PrefetchProxy } from '../../fields/Proxy'; import { BoolCast, PromiseValue, StrCast } from '../../fields/Types'; import { TraceMobx } from '../../fields/util'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick, Utils } from '../../Utils'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick, Utils, emptyPath } from '../../Utils'; import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager'; import { DocServer } from '../DocServer'; import { Docs } from '../documents/Documents'; @@ -248,6 +248,9 @@ export class MainView extends React.Component { addDocument={undefined} addDocTab={this.addDocTabFunc} pinToPres={emptyFunction} + docViewPath={emptyPath} + layerProvider={undefined} + styleProvider={undefined} rootSelected={returnTrue} removeDocument={undefined} ScreenToLocalTransform={Transform.Identity} @@ -336,6 +339,9 @@ export class MainView extends React.Component { addDocument={undefined} addDocTab={this.addDocTabFunc} pinToPres={emptyFunction} + docViewPath={emptyPath} + layerProvider={undefined} + styleProvider={this._sidebarContent.proto === Doc.UserDoc().myDashboards ? this.DashboardStyleProvider : DefaultStyleProvider} rootSelected={returnTrue} removeDocument={returnFalse} ScreenToLocalTransform={this.mainContainerXf} @@ -344,7 +350,6 @@ export class MainView extends React.Component { renderDepth={0} scriptContext={CollectionDockingView.Instance.props.Document} focus={emptyFunction} - styleProvider={this._sidebarContent.proto === Doc.UserDoc().myDashboards ? this.DashboardStyleProvider : DefaultStyleProvider} parentActive={returnTrue} whenActiveChanged={emptyFunction} bringToFront={emptyFunction} @@ -373,8 +378,10 @@ export class MainView extends React.Component { PanelWidth={this.menuPanelWidth} PanelHeight={this.getContentsHeight} renderDepth={0} + docViewPath={emptyPath} focus={emptyFunction} styleProvider={DefaultStyleProvider} + layerProvider={undefined} parentActive={returnTrue} whenActiveChanged={emptyFunction} bringToFront={emptyFunction} @@ -476,11 +483,13 @@ export class MainView extends React.Component { dropAction={"alias"} parentActive={returnFalse} styleProvider={DefaultStyleProvider} + layerProvider={undefined} rootSelected={returnTrue} bringToFront={emptyFunction} select={emptyFunction} active={returnFalse} isSelected={returnFalse} + docViewPath={emptyPath} moveDocument={this.moveButtonDoc} CollectionView={undefined} addDocument={this.addButtonDoc} @@ -547,12 +556,14 @@ export class MainView extends React.Component { pinToPres={emptyFunction} rootSelected={returnTrue} styleProvider={DefaultStyleProvider} + layerProvider={undefined} removeDocument={undefined} ScreenToLocalTransform={Transform.Identity} PanelWidth={this.getPWidth} PanelHeight={this.getPHeight} renderDepth={0} focus={emptyFunction} + docViewPath={emptyPath} parentActive={returnFalse} whenActiveChanged={emptyFunction} bringToFront={emptyFunction} @@ -573,6 +584,8 @@ export class MainView extends React.Component { ContainingCollectionDoc={undefined} Document={DocumentLinksButton.invisibleWebDoc} dropAction={"move"} + layerProvider={undefined} + styleProvider={undefined} isSelected={returnFalse} select={returnFalse} rootSelected={returnFalse} @@ -585,6 +598,7 @@ export class MainView extends React.Component { active={returnFalse} whenActiveChanged={returnFalse} focus={returnFalse} + docViewPath={emptyPath} PanelWidth={() => 500} PanelHeight={() => 800} docFilters={returnEmptyFilter} @@ -599,6 +613,7 @@ export class MainView extends React.Component { lightboxScreenToLocal = () => new Transform(-Math.min(window.innerWidth / 4, 200), -Math.min(window.innerHeight / 4, 100), 1); lightboxHistory: (Opt)[] = []; lightboxFuture: (Opt)[] = []; + lightboxDocView = React.createRef(); @computed get lightboxView() { if (this.lightboxHistory.lastElement() !== this.LightboxDoc) this.lightboxHistory.push(this.LightboxDoc); let downx = 0, downy = 0; @@ -618,13 +633,14 @@ export class MainView extends React.Component { width: window.innerWidth - Math.min(window.innerWidth / 4, 200) * 2, height: window.innerHeight - Math.min(window.innerHeight / 4, 100) * 2 }}> - { ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} parentActive={returnFalse} + docViewPath={emptyPath} childLayoutTemplate={this.childLayoutTemplate} // bcz: Ugh .. should probably be rendering a CollectionView or the minimap should be part of the collectionFreeFormView to avoid having to set stuff like this. noOverlay={true} // don't render overlay Docs since they won't scale active={returnTrue} @@ -334,6 +335,7 @@ export class TabDocView extends React.Component { whenActiveChanged={emptyFunction} focus={emptyFunction} styleProvider={TabDocView.miniStyleProvider} + layerProvider={undefined} addDocTab={this.addDocTab} pinToPres={TabDocView.PinDoc} docFilters={CollectionDockingView.Instance.docFilters} @@ -408,6 +410,7 @@ export class TabDocView extends React.Component { parentActive={this.active} whenActiveChanged={emptyFunction} focus={this.focusFunc} + docViewPath={emptyPath} bringToFront={emptyFunction} pinToPres={TabDocView.PinDoc} /> {this._document._viewType !== CollectionViewType.Freeform ? (null) : diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 6c7512f7c..e25a46a5d 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -904,13 +904,14 @@ export class CollectionFreeFormView extends CollectionSubView 5 ? 1000 : 0; !dontCenter && this.props.focus(this.props.Document); - afterFocus && setTimeout(afterFocus, delay); + afterFocus && setTimeout(() => afterFocus?.(delay ? true : false), delay); } else { !dontCenter && delay && this.props.focus(this.props.Document); afterFocus?.(!dontCenter && delay ? true : false); @@ -988,6 +989,7 @@ export class CollectionFreeFormView extends CollectionSubView { x: number, y: number, zIndex?: number, opacity?: number, highlight?: boolean, z: number, transition?: string } | undefined; sizeProvider?: (doc: Doc, replica: string) => { width: number, height: number } | undefined; - layerProvider?: (doc: Doc, assign?: boolean) => boolean; + layerProvider: ((doc: Doc, assign?: boolean) => boolean) | undefined zIndex?: number; highlight?: boolean; jitterRotation: number; @@ -162,6 +162,7 @@ export class CollectionFreeFormDocumentView extends DocComponent 12 || !layoutFrame || !this.layoutDoc || GetEffectiveAcl(this.layoutDoc) === AclPrivate) ? (null) : CollectionFreeFormDocumentView; PanelWidth: () => number; PanelHeight: () => number; - layerProvider?: (doc: Doc, assign?: boolean) => boolean; - styleProvider?: StyleProviderFunc; + docViewPath: DocumentView[]; + layerProvider: undefined | ((doc: Doc, assign?: boolean) => boolean); + styleProvider: Opt; focus: DocFocusFunc; docFilters: () => string[]; docRangeFilters: () => string[]; @@ -113,6 +114,7 @@ export interface DocumentViewInternalProps extends DocumentViewProps { isSelected: (outsideReaction?: boolean) => boolean; select: (ctrlPressed: boolean) => void; DocumentView: any; + viewPath: DocumentView[]; } @observer @@ -720,6 +722,7 @@ export class DocumentViewInternal extends DocComponent { get allLinks() { return this.docView?.allLinks || []; } get LayoutFieldKey() { return this.docView?.LayoutFieldKey || "layout"; } + @computed get docViewPath() { return this.props.docViewPath ? [...this.props.docViewPath, this] : [this]; } @computed get layoutDoc() { return Doc.Layout(this.Document, this.props.LayoutTemplate?.()); } @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions)); } @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions) || 0); } @@ -965,6 +969,7 @@ export class DocumentView extends React.Component { const internalProps = { ...this.props, DocumentView: this, + viewPath: this.docViewPath, PanelWidth: this.PanelWidth, PanelHeight: this.PanelHeight, NativeWidth: this.NativeWidth, diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index a3afc96d4..e80a78b87 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -92,12 +92,14 @@ export class WebBox extends ViewBoxAnnotatableComponent this.layoutDoc._scrollY = undefined, duration); + setTimeout(() => this.webpage && smoothScroll(duration, this.webpage as any as HTMLElement, Math.abs(scrollY || 0)), delay); setTimeout(() => this._outerRef.current && smoothScroll(duration, this._outerRef.current, Math.abs(scrollY || 0), () => this.layoutDoc._scrollTop = scrollY), delay); } if (scrollX !== undefined) { this._forceSmoothScrollUpdate = true; - this.layoutDoc._scrollX = undefined; + setTimeout(() => this.layoutDoc._scrollX = undefined, duration); + setTimeout(() => this.webpage && smoothScroll(duration, this.webpage as any as HTMLElement, Math.abs(scrollX || 0)), delay); setTimeout(() => this._outerRef.current && smoothScroll(duration, this._outerRef.current, Math.abs(scrollX || 0), () => this.layoutDoc._scrollLeft = scrollX), delay); } }, @@ -108,6 +110,7 @@ export class WebBox extends ViewBoxAnnotatableComponent this._forceSmoothScrollUpdate = true); } else this._forceSmoothScrollUpdate = true; }, @@ -447,6 +450,8 @@ export class WebBox extends ViewBoxAnnotatableComponent this.props.PanelWidth() / (this.props.scaling?.() || 1); // (this.Document.scrollHeight || Doc.NativeHeight(this.Document) || 0); + panelHeight = () => this.props.PanelHeight() / (this.props.scaling?.() || 1); // () => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : Doc.NativeWidth(this.Document); scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); render() { const inactiveLayer = this.props.layerProvider?.(this.layoutDoc) === false; @@ -490,6 +495,8 @@ export class WebBox extends ViewBoxAnnotatableComponent this._mainCont.current && smoothScroll(duration, this._mainCont.current, Math.abs(scrollY || 0)), delay); - setTimeout(() => { this.Document._scrollTop = scrollY; this.Document._scrollY = undefined; }, duration + delay); + setTimeout(() => this.Document._scrollY = undefined, duration + delay); + setTimeout(() => this._mainCont.current && smoothScroll(duration, this._mainCont.current, Math.abs(scrollY || 0), () => this.layoutDoc._scrollTop = scrollY), delay); } } }, @@ -518,8 +518,8 @@ export class PDFViewer extends ViewBoxAnnotatableComponent) => this._overlayAnnoInfo = anno); overlayTransform = () => this.scrollXf().scale(1 / this._zoomed); - panelWidth = () => (this.Document.scrollHeight || Doc.NativeHeight(this.Document) || 0); - panelHeight = () => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : Doc.NativeWidth(this.Document); + panelWidth = () => this.props.PanelWidth() / (this.props.scaling?.() || 1); // (this.Document.scrollHeight || Doc.NativeHeight(this.Document) || 0); + panelHeight = () => this.props.PanelHeight() / (this.props.scaling?.() || 1); // () => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : Doc.NativeWidth(this.Document); @computed get overlayLayer() { return