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/views/collections/CollectionStackingView.tsx | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/client/views/collections/CollectionStackingView.tsx') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index d8a8723cd..745987780 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -207,6 +207,8 @@ export class CollectionStackingView extends CollectionSubView Date: Wed, 10 Feb 2021 16:06:53 -0500 Subject: fixes for stacking views to allow new text to be entered properly without losing focus. fixed document decorations for stacking views. fixed lightboxView criteria for going to an existing view in a lightbox instad of creating a new one. --- src/client/util/DocumentManager.ts | 20 +++++---- src/client/util/LinkManager.ts | 3 +- .../views/collections/CollectionStackingView.tsx | 49 ++++++++++------------ src/client/views/collections/TreeView.tsx | 2 +- src/client/views/nodes/DocumentContentsView.tsx | 21 +++++++--- src/client/views/nodes/DocumentView.tsx | 31 ++++++++------ .../nodes/formattedText/FormattedTextBox.scss | 1 + .../views/nodes/formattedText/FormattedTextBox.tsx | 1 - 8 files changed, 72 insertions(+), 56 deletions(-) (limited to 'src/client/views/collections/CollectionStackingView.tsx') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 2a48f74b2..811d04eb3 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -101,22 +101,28 @@ export class DocumentManager { return this.getDocumentViewById(toFind[Id], preferredCollection); } + public getLightboxDocumentView = (toFind: Doc, originatingDoc: Opt = undefined): DocumentView | undefined => { + const docViews = DocumentManager.Instance.DocumentViews; + const views: DocumentView[] = []; + docViews.map(view => view.docViewPath.includes(LightboxView.LightboxDocView.current!) && view.rootDoc === toFind && views.push(view)); + return views?.find(view => view.ContentDiv?.getBoundingClientRect().width && view.props.focus !== returnFalse) || views?.find(view => view.props.focus !== returnFalse) || (views.length ? views[0] : undefined); + } public getFirstDocumentView = (toFind: Doc, originatingDoc: Opt = undefined): DocumentView | undefined => { const views = this.getDocumentViews(toFind).filter(view => view.rootDoc !== originatingDoc); return views?.find(view => view.ContentDiv?.getBoundingClientRect().width && view.props.focus !== returnFalse) || views?.find(view => view.props.focus !== returnFalse) || (views.length ? views[0] : undefined); } public getDocumentViews(toFind: Doc): DocumentView[] { const toReturn: DocumentView[] = []; - const docViews = DocumentManager.Instance.DocumentViews; + const docViews = DocumentManager.Instance.DocumentViews.filter(view => !view.docViewPath.includes(LightboxView.LightboxDocView.current!)); + const lightboxViews = DocumentManager.Instance.DocumentViews.filter(view => view.docViewPath.includes(LightboxView.LightboxDocView.current!)); // heuristic to return the "best" documents first: + // choose a document in the lightbox 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(LightboxView.LightboxDocView.current!) && view.rootDoc === toFind && toReturn.push(view)); - docViews.map(view => view.props.PanelWidth() > 1 && view.rootDoc === toFind && toReturn.push(view)); - docViews.map(view => view.props.PanelWidth() <= 1 && view.rootDoc === toFind && toReturn.push(view)); - docViews.map(view => view.props.PanelWidth() > 1 && view.rootDoc !== toFind && Doc.AreProtosEqual(view.rootDoc, toFind) && toReturn.push(view)); - docViews.map(view => view.props.PanelWidth() <= 1 && view.rootDoc !== toFind && Doc.AreProtosEqual(view.rootDoc, toFind) && toReturn.push(view)); + lightboxViews.map(view => view.rootDoc === toFind && toReturn.push(view)); + lightboxViews.map(view => view.rootDoc !== toFind && Doc.AreProtosEqual(view.rootDoc, toFind) && toReturn.push(view)); + docViews.map(view => view.rootDoc === toFind && toReturn.push(view)); + docViews.map(view => view.rootDoc !== toFind && Doc.AreProtosEqual(view.rootDoc, toFind) && toReturn.push(view)); return toReturn; } diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts index c32a78ef3..a684a202d 100644 --- a/src/client/util/LinkManager.ts +++ b/src/client/util/LinkManager.ts @@ -145,7 +145,8 @@ 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 (LightboxView.LightboxDoc && doc.annotationOn !== LightboxView.LightboxDoc) { // following a link should replace an existing lightboxDoc unless the target is an annotation on the lightbox document + if (LightboxView.LightboxDoc && !DocumentManager.Instance.getLightboxDocumentView(doc)) { + //doc.annotationOn !== LightboxView.LightboxDoc) { // following a link should replace an existing lightboxDoc unless the target is an annotation on the lightbox document runInAction(() => LightboxView.LightboxDoc = (target.annotationOn as Doc) ?? target); finished?.(); } else { diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 745987780..4e093a83b 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -80,13 +80,10 @@ export class CollectionStackingView extends CollectionSubView { const height = () => this.getDocHeight(d); const width = () => this.getDocWidth(d); - const dref = React.createRef(); - const dxf = () => this.getDocTransform(d, dref.current!); - this._docXfs.push({ dxf, width, height }); const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap); const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` }; - return
- {this.getDisplayDoc(d, dxf, width)} + return
+ {this.getDisplayDoc(d, width)}
; }); } @@ -171,7 +168,6 @@ export class CollectionStackingView extends CollectionSubView { Doc.BrushDoc(doc); this.props.focus(this.props.Document, true); // bcz: want our containing collection to zoom @@ -186,27 +182,30 @@ export class CollectionStackingView extends CollectionSubView Transform, width: () => number) { + styleProvider = (doc: Doc | undefined, props: Opt, property: string) => { + if (property === StyleProp.Opacity && doc) { + if (this.props.childOpacity) { + return this.props.childOpacity(); + } + if (this.Document._currentFrame !== undefined) { + return CollectionFreeFormDocumentView.getValues(doc, NumCast(this.Document._currentFrame))?.opacity; + } + } + return this.props.styleProvider?.(doc, props, property); + }; + getDisplayDoc(doc: Doc, width: () => number) { const dataDoc = (!doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS) ? undefined : this.props.DataDoc; const height = () => this.getDocHeight(doc); - const styleProvider = (doc: Doc | undefined, props: Opt, property: string) => { - if (property === StyleProp.Opacity && doc) { - if (this.props.childOpacity) { - return this.props.childOpacity(); - } - if (this.Document._currentFrame !== undefined) { - return CollectionFreeFormDocumentView.getValues(doc, NumCast(this.Document._currentFrame))?.opacity; - } - } - return this.props.styleProvider?.(doc, props, property); - }; - return ; + const stackedDocTransform = () => this.getDocTransform(doc, dref); + return dref = r?.ContentDiv ? r.ContentDiv : undefined} Document={doc} DataDoc={dataDoc || (!Doc.AreProtosEqual(doc[DataSym], doc) && doc[DataSym])} renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - styleProvider={styleProvider} + styleProvider={this.styleProvider} layerProvider={this.props.layerProvider} docViewPath={this.props.docViewPath} LayoutTemplate={this.props.childLayoutTemplate} @@ -220,7 +219,7 @@ export class CollectionStackingView extends CollectionSubView; } - getDocTransform(doc: Doc, dref: HTMLDivElement) { - if (!dref) return Transform.Identity(); + getDocTransform(doc: Doc, dref?: HTMLDivElement) { const y = this._scroll; // required for document decorations to update when the text box container is scrolled const { scale, translateX, translateY } = Utils.GetScreenTransform(dref); - const outerXf = Utils.GetScreenTransform(this._masonryGridRef!); - const offset = this.props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY); - const offsety = 0; - return this.props.ScreenToLocalTransform().translate(offset[0], offset[1] + offsety); + return new Transform(-translateX, -translateY, 1).scale(this.props.ScreenToLocalTransform().Scale); } forceAutoHeight = () => { diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 6b7911b13..14075db1f 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -642,7 +642,7 @@ export class TreeView extends React.Component { rootSelected={returnTrue} styleProvider={asText ? this.titleStyleProvider : this.embeddedStyleProvider} layerProvider={undefined} - docViewPath={returnEmptyDoclist} + docViewPath={this.props.treeView.props.docViewPath} docFilters={returnEmptyFilter} docRangeFilters={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 6ecd70330..4b4720d58 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -111,7 +111,6 @@ export class DocumentContentsView extends React.Component number, layoutKey: string, hideOnLeave?: boolean, - makeLink?: () => Opt, // function to call when a link is made }> { @computed get layout(): string { TraceMobx(); @@ -141,16 +140,17 @@ export class DocumentContentsView extends React.Component, onInput: Opt): JsxBindings { const docOnlyProps = [ // these are the properties in DocumentViewProps that need to be removed to pass on only DocumentSharedViewProps to the FieldViews "freezeDimensions", + "hideResizeHandles", "hideTitle", "treeViewDoc", - "dragDivName", "contentPointerEvents", "radialMenu", "LayoutTemplateString", "LayoutTemplate", + "dontCenter", "ContentScaling", - "contentFittingScaling", "contextMenuItems", + "onClick", "onDoubleClick", "onPointerDown", "onPointerUp", @@ -166,7 +166,11 @@ export class DocumentContentsView extends React.Component 1 ? splits[0] + splits[1].replace(/{([^{}]|(?R))*}/, replacer4) : ""; // might have been more elegant if javascript supported recursive patterns + return { bindings, layoutFrame }; + } + + render() { + TraceMobx(); + const { bindings, layoutFrame } = this.renderData; + return (this.props.renderDepth > 12 || !layoutFrame || !this.layoutDoc || GetEffectiveAcl(this.layoutDoc) === AclPrivate) ? (null) : number; isSelected: (outsideReaction?: boolean) => boolean; select: (ctrlPressed: boolean) => void; - DocumentView: any; + DocumentView: () => DocumentView; viewPath: () => DocumentView[]; } @@ -154,7 +154,7 @@ export class DocumentViewInternal extends DocComponent (ffview().props.CollectionFreeFormView.ChildDrag = this.props.DocumentView)); + ffview && runInAction(() => (ffview().props.CollectionFreeFormView.ChildDrag = this.props.DocumentView())); const dragData = new DragManager.DocumentDragData([this.props.Document]); const [left, top] = this.props.ScreenToLocalTransform().scale(this.ContentScale).inverse().transformPoint(0, 0); dragData.offset = this.props.ScreenToLocalTransform().scale(this.ContentScale).transformDirection(x - left, y - top); @@ -398,7 +398,7 @@ export class DocumentViewInternal extends DocComponent SharingManager.Instance.open(this.props.DocumentView), icon: "users" }); + (this.rootDoc._viewType !== CollectionViewType.Docking || !Doc.UserDoc().noviceMode) && moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this.props.DocumentView()), icon: "users" }); if (!Doc.UserDoc().noviceMode) { moreItems.push({ description: "Make View of Metadata Field", event: () => Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.DataDoc), icon: "concierge-bell" }); moreItems.push({ description: `${this.Document._chromeStatus !== "disabled" ? "Hide" : "Show"} Chrome`, event: () => this.Document._chromeStatus = (this.Document._chromeStatus !== "disabled" ? "disabled" : "enabled"), icon: "project-diagram" }); @@ -708,7 +708,7 @@ export class DocumentViewInternal extends DocComponent SelectionManager.SelectView(this.props.DocumentView, false), 300); // on a mac, the context menu is triggered on mouse down, but a YouTube video becaomes interactive when selected which means that the context menu won't show up. by delaying the selection until hopefully after the pointer up, the context menu will appear. + !this.props.isSelected(true) && setTimeout(() => SelectionManager.SelectView(this.props.DocumentView(), false), 300); // on a mac, the context menu is triggered on mouse down, but a YouTube video becaomes interactive when selected which means that the context menu won't show up. by delaying the selection until hopefully after the pointer up, the context menu will appear. } rootSelected = (outsideReaction?: boolean) => this.props.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false; @@ -741,7 +741,7 @@ export class DocumentViewInternal extends DocComponent {this.layoutDoc.hideAllLinks ? (null) : this.allAnchors} {this.hideLinkButton ? (null) : - } + }
; } @@ -782,7 +782,11 @@ export class DocumentViewInternal extends DocComponent +
{ PanelWidth = () => this.panelWidth; PanelHeight = () => this.panelHeight; ContentScale = () => this.nativeScaling; + selfView = () => this; screenToLocalTransform = () => { return this.props.ScreenToLocalTransform().translate(-this.centeringX, -this.centeringY).scale(1 / this.nativeScaling); } @@ -978,7 +983,7 @@ export class DocumentView extends React.Component { TraceMobx(); const internalProps = { ...this.props, - DocumentView: this, + DocumentView: this.selfView, viewPath: this.docViewPathFunc, PanelWidth: this.PanelWidth, PanelHeight: this.PanelHeight, diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index 81bca4c00..33425ba15 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -389,6 +389,7 @@ footnote::after { overflow-x: hidden; color: initial; max-height: 100%; + width: 100%; display: flex; flex-direction: row; transition: opacity 1s; diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 9e2e8f1be..d608cc5df 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1719,7 +1719,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
Date: Thu, 11 Feb 2021 09:29:31 -0500 Subject: from last --- src/client/views/collections/CollectionStackingView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/collections/CollectionStackingView.tsx') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 4e093a83b..770aea362 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -168,7 +168,7 @@ export class CollectionStackingView extends CollectionSubView { + focusDocument = (doc: Doc, willZoom?: boolean, scale?: number, afterFocus?: DocAfterFocusFunc) => { Doc.BrushDoc(doc); this.props.focus(this.props.Document, true); // bcz: want our containing collection to zoom Doc.linkFollowHighlight(doc); -- cgit v1.2.3-70-g09d2 From 96d730a155cc9e49ee83c8e985fbc5de87e7959f Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 11 Feb 2021 11:23:55 -0500 Subject: fixes for focus'ing to enable resetting of all navigations if desired(eg. zooming into portal) --- src/Utils.ts | 4 +-- src/client/util/DocumentManager.ts | 23 ++++++++++---- src/client/util/LinkManager.ts | 32 ++++++++++--------- .../views/collections/CollectionStackingView.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 36 +++++++++++----------- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/PDFBox.tsx | 2 +- 7 files changed, 58 insertions(+), 43 deletions(-) (limited to 'src/client/views/collections/CollectionStackingView.tsx') diff --git a/src/Utils.ts b/src/Utils.ts index 770cef283..b6a59118a 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -193,9 +193,9 @@ export namespace Utils { export function scrollIntoView(targetY: number, targetHgt: number, scrollTop: number, contextHgt: number) { if (scrollTop + contextHgt < targetY + targetHgt * 1.1) { - return targetY + targetHgt * 1.1 - contextHgt; + return Math.ceil(targetY + targetHgt * 1.1 - contextHgt); } else if (scrollTop > targetY - targetHgt * .1) { - return Math.max(0, targetY - targetHgt * .1); + return Math.max(0, Math.floor(targetY - targetHgt * .1)); } } diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 5d3f8af57..816f7f6be 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -144,6 +144,10 @@ export class DocumentManager { ): Promise => { const getFirstDocView = LightboxView.LightboxDoc ? DocumentManager.Instance.getLightboxDocumentView : DocumentManager.Instance.getFirstDocumentView; const docView = getFirstDocView(targetDoc, originatingDoc); + const highlight = () => { + const finalDocView = getFirstDocView(targetDoc); + finalDocView && Doc.linkFollowHighlight(finalDocView.rootDoc); + }; const focusAndFinish = (didFocus: boolean) => { if (originatingDoc?.isPushpin) { if (!didFocus || targetDoc.hidden) { @@ -153,13 +157,10 @@ export class DocumentManager { targetDoc.hidden && (targetDoc.hidden = undefined); docView?.select(false); } + highlight(); finished?.(); return false; }; - const highlight = () => { - const finalDocView = getFirstDocView(targetDoc); - finalDocView && Doc.linkFollowHighlight(finalDocView.rootDoc); - }; let annotatedDoc = Cast(targetDoc.annotationOn, Doc, null); const contextDocs = docContext ? await DocListCastAsync(docContext.data) : undefined; const contextDoc = contextDocs?.find(doc => Doc.AreProtosEqual(doc, targetDoc) || Doc.AreProtosEqual(doc, annotatedDoc)) ? docContext : undefined; @@ -172,7 +173,12 @@ export class DocumentManager { first.focus(targetDoc, false); } } else if (docView && (targetDocContextView || !targetDocContext)) { // we have a docView already and aren't forced to create a new one ... just focus on the document. TODO move into view if necessary otherwise just highlight? - docView.props.focus(docView.rootDoc, willZoom, undefined, (didFocus: boolean) => focusAndFinish(didFocus)); + docView.props.focus(docView.rootDoc, willZoom, undefined, (didFocus: boolean) => + new Promise(res => { + focusAndFinish(didFocus); + res(); + }) + ); } else { if (!targetDocContext) { // we don't have a view and there's no context specified ... create a new view of the target using the dockFunc or default createViewFunc(Doc.BrushDoc(targetDoc), finished); // bcz: should we use this?: Doc.MakeAlias(targetDoc))); @@ -190,7 +196,12 @@ export class DocumentManager { const findView = (delay: number) => { const retryDocView = getFirstDocView(targetDoc); // test again for the target view snce we presumably created the context above by focusing on it if (retryDocView) { // we found the target in the context - retryDocView.props.focus(targetDoc, willZoom, undefined, focusAndFinish); // focus on the target in the context + retryDocView.props.focus(targetDoc, willZoom, undefined, (didFocus: boolean) => + new Promise(res => { + focusAndFinish(didFocus); + res(); + }) + ); // focus on the target in the context highlight(); } else if (delay > 1500) { // we didn't find the target, so it must have moved out of the context. Go back to just creating it. diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts index 8a6ed9944..58ccfe645 100644 --- a/src/client/util/LinkManager.ts +++ b/src/client/util/LinkManager.ts @@ -103,25 +103,29 @@ export class LinkManager { public static FollowLink = (linkDoc: Opt, sourceDoc: Doc, docViewProps: DocumentViewSharedProps, altKey: boolean) => { const batch = UndoManager.StartBatch("follow link click"); // open up target if it's not already in view ... - const createViewFunc = (doc: Doc, followLoc: string, finished: Opt<() => void>) => { - const targetFocusAfterDocFocus = (didFocus: boolean) => { + const createViewFunc = (doc: Doc, followLoc: string, finished?: Opt<() => void>) => { + const createTabForTarget = (didFocus: boolean) => new Promise(res => { const where = StrCast(sourceDoc.followLinkLocation) || followLoc; - const hackToCallFinishAfterFocus = () => { - finished && setTimeout(finished); // finished() needs to be called right after hackToCallFinishAfterFocus(), but there's no callback for that so we use the hacky timeout. - return false; // we must return false here so that the zoom to the document is not reversed. If it weren't for needing to call finished(), we wouldn't need this function at all since not having it is equivalent to returning false - }; - const addTab = docViewProps.addDocTab(doc, where); - addTab && setTimeout(() => { + docViewProps.addDocTab(doc, where); + setTimeout(() => { const targDocView = DocumentManager.Instance.getFirstDocumentView(doc); - targDocView?.props.focus(doc, BoolCast(sourceDoc.followLinkZoom, false), undefined, hackToCallFinishAfterFocus); - }); // add the target and focus on it. - return where !== "inPlace" || addTab; // return true to reset the initial focus&zoom (return false for 'inPlace' since resetting the initial focus&zoom will negate the zoom into the target) - }; + if (targDocView) { + targDocView.props.focus(doc, BoolCast(sourceDoc.followLinkZoom, false), undefined, (didFocus: boolean) => { + finished?.(); + res(true); + return new Promise(res2 => res2()); + }); + } else { + res(where !== "inPlace"); // return true to reset the initial focus&zoom (return false for 'inPlace' since resetting the initial focus&zoom will negate the zoom into the target) + } + }); + }); + if (!sourceDoc.followLinkZoom) { - targetFocusAfterDocFocus(false); + createTabForTarget(false); } else { // first focus & zoom onto this (the clicked document). Then execute the function to focus on the target - docViewProps.focus(sourceDoc, BoolCast(sourceDoc.followLinkZoom, true), 1, targetFocusAfterDocFocus); + docViewProps.focus(sourceDoc, BoolCast(sourceDoc.followLinkZoom, true), 1, createTabForTarget); } }; LinkManager.traverseLink(linkDoc, sourceDoc, createViewFunc, BoolCast(sourceDoc.followLinkZoom, false), docViewProps.ContainingCollectionDoc, batch.end, altKey ? true : undefined); diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 770aea362..9c12d5020 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -192,7 +192,7 @@ export class CollectionStackingView extends CollectionSubView number) { const dataDoc = (!doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS) ? undefined : this.props.DataDoc; const height = () => this.getDocHeight(doc); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 7ae4137d9..eeb4e61aa 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -49,6 +49,7 @@ import { CurrentUserUtils } from "../../../util/CurrentUserUtils"; import { StyleProp, StyleLayers } from "../../StyleProvider"; import { DocumentDecorations } from "../../DocumentDecorations"; import { FieldViewProps } from "../../nodes/FieldView"; +import { reset } from "colors"; export const panZoomSchema = createSchema({ _panX: "number", @@ -908,8 +909,8 @@ export class CollectionFreeFormView extends CollectionSubView { - setTimeout(() => { - if (afterFocus?.(didFocus || didMove)) { - doc.hidden && Doc.UnHighlightDoc(doc); - this.Document._panX = savedState.px; - this.Document._panY = savedState.py; - this.Document[this.scaleFieldKey] = savedState.s; - this.Document._viewTransition = savedState.pt; - } else { - doc.hidden && Doc.UnHighlightDoc(doc); - } - }, focusSpeed); - return false; - }) - }; + // focus on this collection within its parent view. the parent view after focusing determines whether to reset the view change within the collection + const endFocus = async (moved: boolean) => { + doc.hidden && Doc.UnHighlightDoc(doc); + const resetView = afterFocus ? await afterFocus(moved) : false; + if (resetView) { + this.Document._panX = savedState.px; + this.Document._panY = savedState.py; + this.Document[this.scaleFieldKey] = savedState.s; + this.Document._viewTransition = savedState.pt; + } + return resetView; + }; + this.props.focus(this.rootDoc._isGroup ? doc : this.rootDoc, willZoom, scale, (didFocus: boolean) => + new Promise(res => setTimeout(async () => res(await endFocus(didMove || didFocus)), focusSpeed))); + } } setPanIntoView = (doc: Doc) => { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d20866f94..3fc39d554 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -42,7 +42,7 @@ import { RadialMenu } from './RadialMenu'; import React = require("react"); import { LinkDocPreview } from "./LinkDocPreview"; -export type DocAfterFocusFunc = (notFocused: boolean) => boolean; +export type DocAfterFocusFunc = (notFocused: boolean) => Promise; export type DocFocusFunc = (doc: Doc, willZoom?: boolean, scale?: number, afterFocus?: DocAfterFocusFunc) => void; export type StyleProviderFunc = (doc: Opt, props: Opt, property: string) => any; export interface DocComponentView { diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 4b926bb6f..989be1ab9 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -80,7 +80,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent { this._pdfViewer?.scrollFocus(doc, smooth, afterFocus); } + scrollFocus = (doc: Doc, smooth: boolean, afterFocus?: DocAfterFocusFunc) => this._pdfViewer?.scrollFocus(doc, smooth, afterFocus); getAnchor = () => this.rootDoc; componentWillUnmount() { this._selectReactionDisposer?.(); } componentDidMount() { -- cgit v1.2.3-70-g09d2