import { Howl } from 'howler'; import { action, computed, makeObservable, observable, ObservableSet, observe } from 'mobx'; import { Doc, Opt } from '../../fields/Doc'; import { Animation, DocData } from '../../fields/DocSymbols'; import { listSpec } from '../../fields/Schema'; import { Cast, DocCast, NumCast, StrCast } from '../../fields/Types'; import { AudioField } from '../../fields/URLField'; import { CollectionViewType } from '../documents/DocumentTypes'; import { DocumentView, DocumentViewInternal } from '../views/nodes/DocumentView'; import { FocusEffectDelay, FocusViewOptions } from '../views/nodes/FocusViewOptions'; import { OpenWhere } from '../views/nodes/OpenWhere'; import { PresBox } from '../views/nodes/trails'; type childIterator = { viewSpec: Opt; childDocView: Opt; focused: boolean; contextPath: Doc[] }; export class DocumentManager { // eslint-disable-next-line no-use-before-define private static _instance: DocumentManager; public static get Instance(): DocumentManager { return this._instance || (this._instance = new this()); } // global holds all of the nodes (regardless of which collection they're in) @observable private _documentViews = new Set(); @computed public get DocumentViews() { return Array.from(this._documentViews).filter(view => (!view.ComponentView?.dontRegisterView?.() && !DocumentView.LightboxDoc()) || DocumentView.LightboxContains(view)); } public AddDocumentView(dv: DocumentView) { this._documentViews.add(dv); } public DeleteDocumentView(dv: DocumentView) { this._documentViews.delete(dv); } // private constructor so no other class can create a nodemanager private constructor() { makeObservable(this); DocumentView.allViews = () => this.DocumentViews; DocumentView.addView = this.AddView; DocumentView.removeView = this.RemoveView; DocumentView.showDocument = this.showDocument; DocumentView.showDocumentView = this.showDocumentView; DocumentView.linkCommonAncestor = DocumentManager.LinkCommonAncestor; DocumentView.addViewRenderedCb = this.AddViewRenderedCb; DocumentView.getFirstDocumentView = this.getFirstDocumentView; DocumentView.getDocumentView = this.getDocumentView; DocumentView.getDocViewIndex = this.getDocViewIndex; DocumentView.getContextPath = DocumentManager.GetContextPath; DocumentView.getLightboxDocumentView = this.getLightboxDocumentView; observe(Doc.CurrentlyLoading, change => { // watch CurrentlyLoading-- when something is loaded, it's removed from the list and we have to update its icon if it were iconified since LoadingBox icons are different than the media they become switch (change.type) { case 'update': break; case 'splice': change.removed.forEach((doc: Doc) => DocumentManager.Instance.getAllDocumentViews(doc).forEach(dv => StrCast(dv.Document.layout_fieldKey) === 'layout_icon' && dv.iconify(() => dv.iconify()))); break; default: } }); } private _anyViewRenderedCbs: ((dv: DocumentView) => unknown)[] = []; public AddAnyViewRenderedCB = (func: (dv: DocumentView) => unknown) => { this._anyViewRenderedCbs.push(func); }; private _viewRenderedCbs: { doc: Doc; func: (dv: DocumentView) => unknown }[] = []; public AddViewRenderedCb = (doc: Opt, func: (dv: DocumentView) => unknown) => { if (doc) { const dv = DocumentView.LightboxDoc() ? this.getLightboxDocumentView(doc) : this.getDocumentView(doc); this._viewRenderedCbs.push({ doc, func }); if (dv) { this.callAddViewFuncs(dv); return true; } } else { // eslint-disable-next-line @typescript-eslint/no-explicit-any func(undefined as any); } return false; }; callAddViewFuncs = (view: DocumentView) => { const docCallFuncs = this._viewRenderedCbs.filter(vc => vc.doc === view.Document); const callFuncs = docCallFuncs.map(vc => vc.func).concat(this._anyViewRenderedCbs); if (callFuncs.length) { this._viewRenderedCbs = this._viewRenderedCbs.filter(vc => !docCallFuncs.includes(vc)); const intTimer = setInterval( () => { if (!view.ComponentView?.incrementalRendering?.()) { callFuncs.forEach(cf => cf(view)); clearInterval(intTimer); } }, view.ComponentView?.incrementalRendering?.() ? 0 : 100 ); } }; @action public AddView = (view: DocumentView) => { this.AddDocumentView(view); this.callAddViewFuncs(view); }; public RemoveView = action((view: DocumentView) => { this.DeleteDocumentView(view); DocumentView.DeselectView(view); }); // gets all views public getAllDocumentViews(doc: Doc) { const toReturn: DocumentView[] = []; DocumentManager.Instance.DocumentViews.forEach(view => { if (view.Document === doc) { toReturn.push(view); } }); if (toReturn.length === 0) { DocumentManager.Instance.DocumentViews.forEach(view => { if (view.Document[DocData] === doc) { toReturn.push(view); } }); } return toReturn; } public getDocumentView(target: Doc | undefined, preferredCollection?: DocumentView): DocumentView | undefined { const docViewArray = DocumentManager.Instance.DocumentViews; const passes = !target ? [] : preferredCollection ? [preferredCollection, undefined] : [undefined]; return passes.reduce( (toReturn, pass) => toReturn ?? docViewArray.filter(view => view.Document === target).find(view => !pass || view.containerViewPath?.().lastElement() === preferredCollection) ?? docViewArray.filter(view => Doc.AreProtosEqual(view.Document, target)).find(view => !pass || view.containerViewPath?.().lastElement() === preferredCollection), undefined as Opt ); } public getDocViewIndex(target: Doc): number { return DocumentManager.Instance.DocumentViews.findIndex(dv => dv.Document === target); } public getLightboxDocumentView = (toFind: Doc): DocumentView | undefined => { const views: DocumentView[] = []; DocumentManager.Instance.DocumentViews.forEach(view => DocumentView.LightboxContains(view) && Doc.AreProtosEqual(view.Document, 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): DocumentView | undefined => { if (DocumentView.LightboxDoc()) return DocumentManager.Instance.getLightboxDocumentView(toFind); const views = this.getDocumentViews(toFind); // .filter(view => view.Document !== 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.filter(view => !DocumentView.LightboxContains(view)); const lightViews = DocumentManager.Instance.DocumentViews.filter(view => DocumentView.LightboxContains(view)); // heuristic to return the "best" documents first: // choose a document in the lightbox first // choose an exact match over an embedding match lightViews.map(view => view.Document === toFind && toReturn.push(view)); lightViews.map(view => view.Document !== toFind && Doc.AreProtosEqual(view.Document, toFind) && toReturn.push(view)); docViews.map(view => view.Document === toFind && toReturn.push(view)); docViews.map(view => view.Document !== toFind && Doc.AreProtosEqual(view.Document, toFind) && toReturn.push(view)); return toReturn; } static GetContextPath(doc: Opt, includeExistingViews?: boolean) { if (!doc) return []; const srcContext = DocCast(doc.annotationOn, DocCast(doc.embedContainer)); let containerDocContext = srcContext ? [srcContext, doc] : [doc]; while ( containerDocContext.length && DocCast(containerDocContext[0]?.embedContainer) && DocCast(containerDocContext[0].embedContainer)!._type_collection !== CollectionViewType.Docking && (includeExistingViews || !DocumentManager.Instance.getDocumentView(containerDocContext[0])) ) { containerDocContext = [DocCast(containerDocContext[0].embedContainer)!, ...containerDocContext]; } return containerDocContext; } static _howl: Howl; static playAudioAnno(doc: Doc) { const anno = Cast(doc[Doc.LayoutDataKey(doc) + '_audioAnnotations'], listSpec(AudioField), null)?.lastElement(); if (anno) { this._howl?.stop(); if (anno instanceof AudioField) { this._howl = new Howl({ src: [anno.url.href], format: ['mp3'], autoplay: true, loop: false, volume: 0.5, }); } } } public static removeOverlayViews() { DocumentManager._overlayViews?.forEach(view => view.setTextHtmlOverlay(undefined, undefined)); DocumentManager._overlayViews?.clear(); } static _overlayViews = new ObservableSet(); /** * Find the nearest common ancestor collection that contains a link's source and target * @param linkDoc * @returns common ancestor DocumentView */ public static LinkCommonAncestor(linkDoc: Doc) { const getAnchor = (which: number) => { const anch = DocCast(linkDoc['link_anchor_' + which]); const anchor = anch?.layout_unrendered ? DocCast(anch.annotationOn) : anch; return DocumentManager.Instance.getDocumentView(anchor); }; const anchor1 = getAnchor(1); const anchor2 = getAnchor(2); return anchor1 ?.docViewPath() .reverse() .find(ancestor => anchor2?.docViewPath().includes(ancestor)); } // shows a documentView by: // traverses down through the viewPath of contexts to the view: // focusing on each context public showDocumentView = async (targetDocView: DocumentView, options: FocusViewOptions) => { const docViewPath = [...(targetDocView.containerViewPath?.() ?? []), targetDocView]; const rootContextView = docViewPath.shift(); const iterator = () => ({ childDocView: docViewPath.shift(), viewSpec: undefined, focused: false, contextPath: docViewPath.map(dv => dv.Document) }); options.contextPath = docViewPath.map(dv => dv.Document); await (rootContextView && this.focusViewsInPath(rootContextView, options, iterator)); if (options.toggleTarget && (!options.didMove || targetDocView.Document.hidden)) targetDocView.Document.hidden = !targetDocView.Document.hidden; else if (options.openLocation?.startsWith(OpenWhere.toggle) && !options.didMove && rootContextView) DocumentViewInternal.addDocTabFunc(rootContextView.Document, options.openLocation); }; // shows a document by first: // traversing down through the contexts that contain target until an existing view is found // if no container view is found, create one by: opening an existing tab that has the top-level view, or showing the top-level context in the lightbox. // once a containing view is found, it then traverses back down through the contexts to the target document by: // focusing on each context // and finally restoring the targetDoc to the viewSpec specified by the last document which may either be the targetDoc, or a viewSpec that describes the targetDoc configuration public showDocument = async ( targetDoc: Doc, // document to display optionsIn: FocusViewOptions, // options for how to navigate to target finished?: (changed: boolean) => void // func called after focusing on target with flag indicating whether anything needed to be done. ) => { const options = optionsIn; Doc.MyRecentlyClosed && Doc.RemoveDocFromList(Doc.MyRecentlyClosed, undefined, targetDoc); const docContextPath = DocumentManager.GetContextPath(targetDoc, true); if (docContextPath.some(doc => doc !== targetDoc && doc.hidden)) options.toggleTarget = false; let activatedTab = false; if (DocumentView.activateTabView(docContextPath[0])) { options.toggleTarget = false; activatedTab = true; } const rootContextView = docContextPath.length && (await new Promise(res => { const viewIndex = docContextPath.findIndex(doc => this.getDocumentView(doc)); if (viewIndex !== -1) { viewIndex && docContextPath.splice(0, viewIndex); res(this.getDocumentView(docContextPath[0])!); return; } options.didMove = true; (!DocumentView.LightboxDoc() && (activatedTab || docContextPath.some(doc => DocumentView.activateTabView(doc)))) || DocumentViewInternal.addDocTabFunc(docContextPath[0], options.openLocation ?? OpenWhere.addRight); this.AddViewRenderedCb(docContextPath[0], dv => res(dv)); })); if (options.openLocation?.includes(OpenWhere.lightbox)) { // even if we found the document view, if the target is a lightbox, we try to open it in the lightbox to preserve lightbox semantics (eg, there's only one active doc in the lightbox) const target = DocCast(targetDoc.annotationOn, targetDoc)!; const compView = this.getDocumentView(DocCast(target.embedContainer))?.ComponentView; options.didMove = target.hidden || options.didMove ? true : false; if ((compView?.addDocTab ?? compView?._props.addDocTab)?.(target, options.openLocation)) { await new Promise(waitres => { setTimeout(() => waitres()); }); } } if (rootContextView) { const childViewIterator = async (docView: DocumentView): Promise => { const innerDoc = docContextPath.shift(); const childDocView = innerDoc && !innerDoc.layout_unrendered ? (await docView.ComponentView?.getView?.(innerDoc, options)) ?? this.getDocumentView(innerDoc): undefined; // prettier-ignore return { focused: false, viewSpec: innerDoc, childDocView, contextPath: docContextPath }; }; docContextPath.shift(); options.contextPath = docContextPath; const target = await this.focusViewsInPath(rootContextView, options, childViewIterator); if (target) { this.restoreDocView(target.viewSpec, target.docView, options, target.contextView ?? target.docView, targetDoc); finished?.(target.focused); return; } } finished?.(false); }; focusViewsInPath = async ( docViewIn: DocumentView, // optionsIn: FocusViewOptions, iterator: (docView: DocumentView) => childIterator | Promise ) => { let contextView: DocumentView | undefined; // view containing context that contains target let focused = false; let docView = docViewIn; let anchor = docView.Document; const options = optionsIn; const maxFocusLength = 100; // want to keep focusing until we get to target, but avoid an infinite loop for (let i = 0; i < maxFocusLength; i++) { if (docView.Document.layout_fieldKey === 'layout_icon') { // eslint-disable-next-line no-loop-func const prom = new Promise(res => { docView.iconify(res); }); // eslint-disable-next-line no-await-in-loop await prom; options.didMove = true; } const nextFocus = docView._props.focus(anchor, options); // focus the view within its container focused = focused || nextFocus !== undefined; // keep track of whether focusing on a view needed to actually change anything // eslint-disable-next-line no-await-in-loop const { childDocView, viewSpec, contextPath } = await iterator(docView); if (!childDocView) return { viewSpec: viewSpec ?? docView.Document, docView, contextView, focused }; contextView = !childDocView.Document.layout_unrendered ? childDocView : docView; docView = childDocView; anchor = viewSpec ?? docView.Document; options.contextPath = contextPath; } options.contextPath = undefined; return undefined; }; @action restoreDocView(viewSpec: Opt, docViewIn: DocumentView, options: FocusViewOptions, contextView: Opt, targetDoc: Doc) { const docView = docViewIn; if (viewSpec && docView) { // if (docView.ComponentView instanceof FormattedTextBox) // viewSpec !== docView.Document && docView.ComponentView?.focus?.(viewSpec, options); PresBox.restoreTargetDocView(docView, viewSpec, options.zoomTime ?? 500); // if there's an options.effect, it will be handled from linkFollowHighlight. We delay the start of // the highlight so that the target document can be somewhat centered so that the effect/highlight will be seen // bcz: should this delay be an options parameter? setTimeout(() => { Doc.linkFollowHighlight(viewSpec ? [docView.Document, viewSpec] : docView.Document, undefined, options.effect); const zoomableText = StrCast(targetDoc.text_html, StrCast(targetDoc.ai_prompt)); if (options.zoomTextSelections && Doc.IsUnhighlightTimerSet() && contextView && zoomableText) { // if the docView is a text anchor, the contextView is the PDF/Web/Text doc contextView.setTextHtmlOverlay(zoomableText, options.effect); DocumentManager._overlayViews.add(contextView); } Doc.AddUnHighlightWatcher(() => { docView.Document[Animation] = undefined; DocumentManager.removeOverlayViews(); }); }, FocusEffectDelay(options)); if (options.playMedia) docView.ComponentView?.playFrom?.(NumCast(docView.Document._layout_currentTimecode)); if (options.playAudio) DocumentManager.playAudioAnno(docView.Document); if (options.toggleTarget && (!options.didMove || docView.Document.hidden)) docView.Document.hidden = !docView.Document.hidden; } } } setTimeout(() => DocumentManager.Instance);