path: root/src/client/views/nodes/DocumentView.tsx

/* eslint-disable no-use-before-define */
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { Property } from 'csstype';
import { Howl } from 'howler';
import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Fade, JackInTheBox } from 'react-awesome-reveal';
import { ClientUtils, DivWidth, isTargetChildOf as isParentOf, lightOrDark, returnFalse, returnVal, simMouseEvent, simulateMouseClick } from '../../../ClientUtils';
import { Utils, emptyFunction } from '../../../Utils';
import { Doc, DocListCast, Field, FieldType, Opt, StrListCast } from '../../../fields/Doc';
import { AclAdmin, AclEdit, AclPrivate, Animation, AudioPlay, DocData, DocViews } from '../../../fields/DocSymbols';
import { Id } from '../../../fields/FieldSymbols';
import { InkTool } from '../../../fields/InkField';
import { List } from '../../../fields/List';
import { PrefetchProxy } from '../../../fields/Proxy';
import { listSpec } from '../../../fields/Schema';
import { ScriptField } from '../../../fields/ScriptField';
import { BoolCast, Cast, DocCast, NumCast, RTFCast, ScriptCast, StrCast } from '../../../fields/Types';
import { AudioField } from '../../../fields/URLField';
import { GetEffectiveAcl, TraceMobx } from '../../../fields/util';
import { AudioAnnoState } from '../../../server/SharedMediaTypes';
import { DocServer } from '../../DocServer';
import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT';
import { DocUtils, FollowLinkScript } from '../../documents/DocUtils';
import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
import { Docs } from '../../documents/Documents';
import { DragManager } from '../../util/DragManager';
import { dropActionType } from '../../util/DropActionTypes';
import { MakeTemplate, makeUserTemplateButton } from '../../util/DropConverter';
import { UPDATE_SERVER_CACHE } from '../../util/LinkManager';
import { ScriptingGlobals } from '../../util/ScriptingGlobals';
import { SearchUtil } from '../../util/SearchUtil';
import { SnappingManager } from '../../util/SnappingManager';
import { UndoManager, undoable } from '../../util/UndoManager';
import { ContextMenu } from '../ContextMenu';
import { ContextMenuProps } from '../ContextMenuItem';
import { DocComponent } from '../DocComponent';
import { EditableView } from '../EditableView';
import { FieldsDropdown } from '../FieldsDropdown';
import { ObserverJsxParser } from '../ObservableReactComponent';
import { PinProps } from '../PinFuncs';
import { StyleProp } from '../StyleProp';
import { ViewBoxInterface } from '../ViewBoxInterface';
import { GroupActive } from './CollectionFreeFormDocumentView';
import { DocumentContentsView } from './DocumentContentsView';
import { DocumentLinksButton } from './DocumentLinksButton';
import './DocumentView.scss';
import { FieldViewProps, FieldViewSharedProps } from './FieldView';
import { FocusViewOptions } from './FocusViewOptions';
import { OpenWhere, OpenWhereMod } from './OpenWhere';
import { FormattedTextBox } from './formattedText/FormattedTextBox';
import { PresEffect, PresEffectDirection } from './trails/PresEnums';
import SpringAnimation from './trails/SlideEffect';
import { SpringType, springMappings } from './trails/SpringUtils';

export interface DocumentViewProps extends FieldViewSharedProps {
    hideDecorations?: boolean; // whether to suppress all DocumentDecorations when doc is selected
    hideResizeHandles?: boolean; // whether to suppress resized handles on doc decorations when this document is selected
    hideTitle?: boolean; // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
    hideDecorationTitle?: boolean; // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
    hideDocumentButtonBar?: boolean;
    hideOpenButton?: boolean;
    hideDeleteButton?: boolean;
    hideLinkAnchors?: boolean;
    hideLinkButton?: boolean;
    hideCaptions?: boolean;
    contentPointerEvents?: Property.PointerEvents | undefined; // pointer events allowed for content of a document view.  eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents
    dontCenter?: 'x' | 'y' | 'xy';
    childHideDecorationTitle?: boolean;
    childHideResizeHandles?: boolean;
    childDragAction?: dropActionType; // allows child documents to be dragged out of collection without holding the embedKey or dragging the doc decorations title bar.
    dragWhenActive?: boolean;
    dontHideOnDrag?: boolean;
    onClickScriptDisable?: 'never' | 'always'; // undefined = only when selected
    DataTransition?: () => string | undefined;
    NativeWidth?: () => number;
    NativeHeight?: () => number;
    contextMenuItems?: () => { script?: ScriptField; method?: () => void; filter?: ScriptField; label: string; icon: string }[];
    dragConfig?: (data: DragManager.DocumentDragData) => void;
    dragStarting?: () => void;
    dragEnding?: () => void;

    reactParent?: React.Component; // parent React component view (see CollectionFreeFormDocumentView)
}
@observer
export class DocumentViewInternal extends DocComponent<FieldViewProps & DocumentViewProps>() {
    // this makes mobx trace() statements more descriptive
    public get displayName()  { return 'DocumentViewInternal(' + this.Document.title + ')'; } // prettier-ignore
    public static SelectAfterContextMenu = true; //  whether a document should be selected after it's contextmenu is triggered.

    /**
     * This function is filled in by MainView to allow non-viewBox views to add Docs as tabs without
     * needing to know about/reference MainView
     */
    public static addDocTabFunc: (doc: Doc | Doc[], location: OpenWhere) => boolean = returnFalse;

    private _disposers: { [name: string]: IReactionDisposer } = {};
    private _doubleClickTimeout: NodeJS.Timeout | undefined;
    private _singleClickFunc: undefined | (() => void);
    private _longPressSelector: NodeJS.Timeout | undefined;
    private _downX: number = 0;
    private _downY: number = 0;
    private _downTime: number = 0;
    private _lastTap: number = 0;
    private _doubleTap = false;
    private _mainCont = React.createRef<HTMLDivElement>();
    private _titleRef = React.createRef<EditableView>();
    private _dropDisposer?: DragManager.DragDropDisposer;
    constructor(props: FieldViewProps & DocumentViewProps) {
        super(props);
        makeObservable(this);
    }

    @observable _changingTitleField = false;
    @observable _titleDropDownInnerWidth = 0; // width of menu dropdown when setting doc title
    @observable _mounted = false; // turn off all pointer events if component isn't yet mounted (enables nested Docs in alternate UI textboxes that appear on hover which otherwise would grab focus from the text box, reverting to the original UI )
    @observable _isContentActive: boolean | undefined = undefined;
    @observable _pointerEvents: Property.PointerEvents | undefined = undefined;
    @observable _componentView: Opt<ViewBoxInterface<FieldViewProps>> = undefined; // needs to be accessed from DocumentView wrapper class
    @observable _animateScaleTime: Opt<number> = undefined; // milliseconds for animating between views.  defaults to 300 if not uset
    @observable _animateScalingTo = 0;

    get _contentDiv()  { return this._mainCont.current; } // prettier-ignore
    get _docView()     { return this._props.DocumentView?.(); } // prettier-ignore

    animateScaleTime = () => this._animateScaleTime ?? 100;
    style = (doc: Doc, sprop: StyleProp | string) => this._props.styleProvider?.(doc, this._props, sprop);
    @computed get opacity()           { return this.style(this.layoutDoc, StyleProp.Opacity) as number; } // prettier-ignore
    @computed get boxShadow()         { return this.style(this.layoutDoc, StyleProp.BoxShadow) as string; } // prettier-ignore
    @computed get borderRounding()    { return this.style(this.layoutDoc, StyleProp.BorderRounding) as string; } // prettier-ignore
    @computed get widgetDecorations() { return this.style(this.layoutDoc, StyleProp.Decorations) as JSX.Element; } // prettier-ignore
    @computed get backgroundBoxColor(){ return this.style(this.layoutDoc, StyleProp.BackgroundColor + ':docView') as string; } // prettier-ignore
    @computed get showTitle()         { return this.style(this.layoutDoc, StyleProp.ShowTitle) as Opt<string>; } // prettier-ignore
    @computed get showCaption()       { return this.style(this.layoutDoc, StyleProp.ShowCaption) as string ?? "";  } // prettier-ignore
    @computed get headerMargin()      { return this.style(this.layoutDoc, StyleProp.HeaderMargin)  as number ?? 0; } // prettier-ignore
    @computed get titleHeight()       { return this.style(this.layoutDoc, StyleProp.TitleHeight) as number ?? 0;  } // prettier-ignore
    @computed get docContents()       { return this.style(this.Document, StyleProp.DocContents) as JSX.Element; } // prettier-ignore
    @computed get highlighting()      { return this.style(this.Document, StyleProp.Highlighting); } // prettier-ignore
    @computed get borderPath()        { return this.style(this.Document, StyleProp.BorderPath); } // prettier-ignore

    @computed get onClickHdlr()       { return this._props.onClickScript?.()       ?? ScriptCast(this.layoutDoc.onClick       ?? this.Document.onClick); } // prettier-ignore
    @computed get onDoubleClickHdlr() { return this._props.onDoubleClickScript?.() ?? ScriptCast(this.layoutDoc.onDoubleClick ?? this.Document.onDoubleClick); } // prettier-ignore
    @computed get onPointerDownHdlr() { return this._props.onPointerDownScript?.() ?? ScriptCast(this.layoutDoc.onPointerDown ?? this.Document.onPointerDown); } // prettier-ignore
    @computed get onPointerUpHdlr()   { return this._props.onPointerUpScript?.()   ?? ScriptCast(this.layoutDoc.onPointerUp   ?? this.Document.onPointerUp); } // prettier-ignore

    @computed get disableClickScriptFunc() {
        const onScriptDisable = this._props.onClickScriptDisable ?? this._componentView?.onClickScriptDisable?.() ?? this.layoutDoc.onClickScriptDisable;
        return (SnappingManager.LongPress ||
                onScriptDisable === 'always' ||
                (onScriptDisable !== 'never' && (this.rootSelected() || this._componentView?.isAnyChildContentActive?.()))); // prettier-ignore
    }
    @computed get _rootSelected() {
        return this._props.isSelected() || BoolCast(this._props.TemplateDataDocument && this._props.rootSelected?.());
    }
    /// disable pointer events on content when there's an enabled onClick script (and not in explore mode) and the contents aren't forced active, or if contents are marked inactive
    @computed get _contentPointerEvents() {
        TraceMobx();
        return (this._props.contentPointerEvents ??
            ((!this.disableClickScriptFunc && //
                this.onClickHdlr &&
                !SnappingManager.ExploreMode &&
                !this.layoutDoc.layout_isSvg &&
                this.isContentActive() !== true) ||
                this.isContentActive() === false))
            ? 'none'
            : this._pointerEvents;
    }

    // We need to use allrelatedLinks to get not just links to the document as a whole, but links to
    // anchors that are not rendered as DocumentViews (marked as 'layout_unrendered' with their 'annotationOn' set to this document).  e.g.,
    //     - PDF text regions are rendered as an Annotations without generating a DocumentView, '
    //     - RTF selections are rendered via Prosemirror and have a mark which contains the Document ID for the annotation link
    //     - and links to PDF/Web docs at a certain scroll location never create an explicit anchor view.
    @computed get directLinks() {
        TraceMobx();
        return Doc.Links(this.Document).filter(
            link =>
                (link.link_matchEmbeddings ? link.link_anchor_1 === this.Document : Doc.AreProtosEqual(link.link_anchor_1 as Doc, this.Document)) ||
                (link.link_matchEmbeddings ? link.link_anchor_2 === this.Document : Doc.AreProtosEqual(link.link_anchor_2 as Doc, this.Document)) ||
                ((link.link_anchor_1 as Doc)?.layout_unrendered && Doc.AreProtosEqual((link.link_anchor_1 as Doc)?.annotationOn as Doc, this.Document)) ||
                ((link.link_anchor_2 as Doc)?.layout_unrendered && Doc.AreProtosEqual((link.link_anchor_2 as Doc)?.annotationOn as Doc, this.Document))
        );
    }
    @computed get _allLinks(): Doc[] {
        TraceMobx();
        return Doc.Links(this.Document).filter(link => !link.link_matchEmbeddings || link.link_anchor_1 === this.Document || link.link_anchor_2 === this.Document);
    }

    @computed get filteredLinks() {
        return DocUtils.FilterDocs(this.directLinks, this._props.childFilters?.() ?? [], []);
    }

    componentWillUnmount() {
        this.cleanupHandlers(true);
    }

    componentDidMount() {
        runInAction(() => {
            this._mounted = true;
        });
        this.setupHandlers();
        this._disposers.contentActive = reaction(
            () =>
                //  true  - if the document has been activated directly or indirectly (by having its children selected)
                //  false - if its pointer events are explicitly turned off or if it's container tells it that it's inactive
                // undefined - it is not active, but it should be responsive to actions that might activate it or its contents (eg clicking)
                this._props.isContentActive() === false || this._props.pointerEvents?.() === 'none'
                    ? false
                    : Doc.ActiveTool !== InkTool.None || SnappingManager.CanEmbed || this.rootSelected() || this.Document.forceActive || this._componentView?.isAnyChildContentActive?.() || this._props.isContentActive()
                      ? true
                      : undefined,
            active => {
                this._isContentActive = active;
            },
            { fireImmediately: true }
        );
        this._disposers.pointerevents = reaction(
            () => this.style(this.Document, StyleProp.PointerEvents) as Property.PointerEvents | undefined,
            pointerevents => {
                this._pointerEvents = pointerevents;
            },
            { fireImmediately: true }
        );
    }
    preDrop = (e: Event, de: DragManager.DropEvent, dropAction: dropActionType) => {
        const dragData = de.complete.docDragData;
        if (dragData && this.isContentActive() && !this.props.dontRegisterView) {
            dragData.dropAction = dropAction || dragData.dropAction;
            e.stopPropagation();
        }
    };
    setupHandlers() {
        this.cleanupHandlers(false);
        if (this._mainCont.current) {
            this._dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, this.drop.bind(this), this.Document, this.preDrop);
        }
    }

    cleanupHandlers(unbrush: boolean) {
        this._dropDisposer?.();
        unbrush && Doc.UnBrushDoc(this.Document);
        Object.values(this._disposers).forEach(disposer => disposer?.());
    }

    startDragging(x: number, y: number, dropAction: dropActionType | undefined, hideSource = false) {
        const docView = this._docView;
        if (this._mainCont.current && docView) {
            const views = DocumentView.Selected().filter(dv => dv.ContentDiv);
            const selected = views.length > 1 && views.some(dv => dv.Document === this.Document) ? views : [docView];
            const dragData = new DragManager.DocumentDragData(selected.map(dv => dv.Document));
            const screenXf = docView.screenToViewTransform();
            const [left, top] = screenXf.inverse().transformPoint(0, 0);
            dragData.offset = screenXf.transformDirection(x - left, y - top);
            dragData.dropAction = dropAction;
            dragData.removeDocument = this._props.removeDocument;
            dragData.moveDocument = this._props.moveDocument;
            dragData.dragEnding = () => docView.props.dragEnding?.();
            dragData.dragStarting = () => docView.props.dragStarting?.();
            dragData.canEmbed = !!(this.Document.dragAction ?? this._props.dragAction);
            (this._props.dragConfig ?? this._componentView?.dragConfig)?.(dragData);
            DragManager.StartDocumentDrag(
                selected.map(dv => dv.ContentDiv!),
                dragData,
                x,
                y,
                { hideSource: hideSource || (!dropAction && !this.layoutDoc.onDragStart && !this._props.dontHideOnDrag) }
            ); // this needs to happen after the drop event is processed.
        }
    }

    // switches text input focus to the title bar of the document (and displays the title bar if it hadn't been)
    setTitleFocus = () => {
        if (!StrCast(this.layoutDoc._layout_showTitle)) this.layoutDoc._layout_showTitle = 'title';
        setTimeout(() => this._titleRef.current?.setIsFocused(true)); // use timeout in case title wasn't shown to allow re-render so that titleref will be defined
    };
    onBrowseClick = (e: React.MouseEvent) => {
        const browseTransitionTime = 500;
        DocumentView.DeselectAll();
        DocumentView.showDocument(this.Document, { zoomScale: 0.8, willZoomCentered: true }, (focused: boolean) => {
            const options: FocusViewOptions = { pointFocus: { X: e.clientX, Y: e.clientY }, zoomTime: browseTransitionTime };
            if (!focused && this._docView) {
                this._docView
                    .docViewPath()
                    .reverse()
                    .forEach(cont => cont.ComponentView?.focus?.(cont.Document, options));
                Doc.linkFollowHighlight(this.Document, false);
            }
        });
        e.stopPropagation();
    };
    onClick = action((e: React.MouseEvent | React.PointerEvent) => {
        if (this._props.isGroupActive?.() === GroupActive.child && !this._props.isDocumentActive?.()) return;
        if (this._docView && !this.Document.ignoreClick && this._props.renderDepth >= 0 && ClientUtils.isClick(e.clientX, e.clientY, this._downX, this._downY, this._downTime)) {
            let stopPropagate = true;
            let preventDefault = true;
            const scriptProps = {
                this: this.Document,
                _readOnly_: false,
                scriptContext: this._props.scriptContext,
                documentView: this._docView,
                clientX: e.clientX,
                clientY: e.clientY,
                shiftKey: e.shiftKey,
                altKey: e.altKey,
                metaKey: e.metaKey,
                value: undefined,
            };
            if (this._doubleTap) {
                const defaultDblclick = this._props.defaultDoubleClick?.() || this.Document.defaultDoubleClick;
                undoable(() => {
                    if (this.onDoubleClickHdlr?.script) {
                        const res = this.onDoubleClickHdlr.script.run(scriptProps, console.log).result as { select: boolean };
                        res.select && this._props.select(false);
                    } else if (!Doc.IsSystem(this.Document) && defaultDblclick !== 'ignore') {
                        this._props.addDocTab(this.Document, OpenWhere.lightboxAlways);
                        DocumentView.DeselectAll();
                        Doc.UnBrushDoc(this.Document);
                    } else this._singleClickFunc?.();
                }, 'on double click: ' + this.Document.title)();
                this._doubleClickTimeout && clearTimeout(this._doubleClickTimeout);
                this._doubleClickTimeout = undefined;
                this._singleClickFunc = undefined;
            } else {
                const sendToBack = e.altKey ? () => this._props.bringToFront?.(this.Document, true) : undefined;
                const selectFunc = () => {
                    !this.layoutDoc._keepZWhenDragged && this._props.bringToFront?.(this.Document);
                    // selecting a view that is part of a template proxies the selection back to the root of the template
                    const templateRoot = !(e.ctrlKey || e.button > 0) && this._props.docViewPath?.().reverse().find(dv => !dv._props.TemplateDataDocument); // prettier-ignore
                    (templateRoot || this._docView)?.select(e.ctrlKey || e.shiftKey, e.metaKey);
                };
                const clickFunc = this.onClickFunc?.()?.script ? () => (this.onClickFunc?.()?.script.run(scriptProps, console.log).result as Opt<{ select: boolean }>)?.select && this._props.select(false) : undefined;
                if (!clickFunc) {
                    // onDragStart implies a button doc that we don't want to select when clicking. RootDocument & isTemplateForField implies we're clicking on part of a template instance and we want to select the whole template, not the part
                    if (this.layoutDoc.onDragStart && !(e.ctrlKey || e.button > 0)) stopPropagate = false;
                    preventDefault = false;
                }
                this._singleClickFunc = undoable(clickFunc ?? sendToBack ?? selectFunc, 'click: ' + this.Document.title);
                const waitForDblClick = this._props.waitForDoubleClickToClick?.() ?? this.Document.waitForDoubleClickToClick;
                if ((clickFunc && waitForDblClick !== 'never') || waitForDblClick === 'always') {
                    this._doubleClickTimeout && clearTimeout(this._doubleClickTimeout);
                    this._doubleClickTimeout = setTimeout(this._singleClickFunc, 300);
                } else if (!SnappingManager.LongPress) {
                    this._singleClickFunc();
                    this._singleClickFunc = undefined;
                }
            }
            stopPropagate && e.stopPropagation();
            preventDefault && e.preventDefault();
        }
    });

    onPointerDown = (e: React.PointerEvent): void => {
        if (this._props.isGroupActive?.() === GroupActive.child && !this._props.isDocumentActive?.()) return;
        this._longPressSelector = setTimeout(() => SnappingManager.LongPress && this._props.select(false), 1000);
        if (!DocumentView.DownDocView) DocumentView.DownDocView = this._docView;

        this._downX = e.clientX;
        this._downY = e.clientY;
        this._downTime = Date.now();
        // click events stop here if the document is active and no modes are overriding it
        if (Doc.ActiveTool === InkTool.None || this._props.addDocTab === returnFalse) {
            if ((this._props.isDocumentActive?.() || this._props.isContentActive?.()) &&
                !SnappingManager.ExploreMode &&
                !this.Document.ignoreClick &&
                e.button === 0 &&
                !Doc.IsInMyOverlay(this.layoutDoc)
            ) {
                e.stopPropagation(); // don't preventDefault.  Goldenlayout, PDF text selection and RTF text selection all need it to go though

                // listen to move events when document content isn't active or document is always draggable
                if (!this.layoutDoc._lockedPosition && (!this.isContentActive() || BoolCast(this.layoutDoc._dragWhenActive, this._props.dragWhenActive))) {
                    document.addEventListener('pointermove', this.onPointerMove);
                }
            } // prettier-ignore
            document.addEventListener('pointerup', this.onPointerUp);
        }
    };

    onPointerMove = (e: PointerEvent): void => {
        if (e.buttons !== 1 || [InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) return;

        if (!ClientUtils.isClick(e.clientX, e.clientY, this._downX, this._downY, Date.now())) {
            this.cleanupPointerEvents();
            this._longPressSelector && clearTimeout(this._longPressSelector);
            this.startDragging(this._downX, this._downY, ((e.ctrlKey || e.altKey) && dropActionType.embed) || ((this.Document.dragAction || this._props.dragAction || undefined) as dropActionType));
        }
    };

    cleanupPointerEvents = () => {
        document.removeEventListener('pointermove', this.onPointerMove);
        document.removeEventListener('pointerup', this.onPointerUp);
    };

    onPointerUp = (e: PointerEvent): void => {
        this.cleanupPointerEvents();
        this._longPressSelector && clearTimeout(this._longPressSelector);

        if (this.onPointerUpHdlr?.script) {
            this.onPointerUpHdlr.script.run({ this: this.Document }, console.log);
        } else if (e.button === 0 && ClientUtils.isClick(e.clientX, e.clientY, this._downX, this._downY, this._downTime)) {
            this._doubleTap = (this.onDoubleClickHdlr?.script || this.Document.defaultDoubleClick !== 'ignore') && Date.now() - this._lastTap < ClientUtils.CLICK_TIME;
            if (!this.isContentActive()) this._lastTap = Date.now(); // don't want to process the start of a double tap if the doucment is selected
        }
        if (SnappingManager.LongPress) e.preventDefault();
    };

    toggleFollowLink = undoable((): void => {
        const hadOnClick = this.Document.onClick;
        this.noOnClick();
        this.Document.onClick = hadOnClick ? undefined : FollowLinkScript();
        this.Document.waitForDoubleClickToClick = hadOnClick ? undefined : 'never';
    }, 'toggle follow link');

    followLinkOnClick = undoable(() => {
        this.Document.ignoreClick = false;
        this.Document.onClick = FollowLinkScript();
        this.Document.followLinkToggle = false;
        this.Document.followLinkZoom = false;
        this.Document.followLinkLocation = undefined;
    }, 'follow link on click');

    noOnClick = undoable(() => {
        this.Document.ignoreClick = false;
        this.Document.onClick = this.Document[DocData].onClick = undefined;
    }, 'default on click');

    deleteClicked = undoable(() => this._props.removeDocument?.(this.Document), 'delete doc');
    setToggleDetail = undoable((scriptFieldKey: 'onClick') => {
        this.Document[scriptFieldKey] = ScriptField.MakeScript(
            `toggleDetail(documentView, "${StrCast(this.Document.layout_fieldKey)
                .replace('layout_', '')
                .replace(/^layout$/, 'detail')}")`,
            { documentView: 'any' }
        );
    }, 'set toggle detail');

    drop = undoable((e: Event, de: DragManager.DropEvent) => {
        if (this._props.dontRegisterView) return false;
        if (this.Document === Doc.ActiveDashboard) {
            e.stopPropagation();
            e.preventDefault();
            alert(
                (e.target as HTMLElement)?.closest?.('*.lm_content')
                    ? "You can't perform this move most likely because you didn't drag the document's title bar to enable embedding in a different document."
                    : 'Linking to document tabs not yet supported.'
            );
            return true;
        }
        const annoData = de.complete.annoDragData;
        const linkdrag = annoData ?? de.complete.linkDragData;
        if (linkdrag) {
            linkdrag.linkSourceDoc = linkdrag.linkSourceGetAnchor();
            if (linkdrag.linkSourceDoc && linkdrag.linkSourceDoc !== this.Document) {
                if (annoData && !annoData.dropDocument) {
                    annoData.dropDocument = annoData.dropDocCreator(undefined);
                }
                if (annoData || this.Document !== linkdrag.linkSourceDoc.embedContainer) {
                    const dropDoc = annoData?.dropDocument ?? this._componentView?.getAnchor?.(true) ?? this.Document;
                    const linkDoc = DocUtils.MakeLink(linkdrag.linkSourceDoc, dropDoc, {}, undefined, [de.x, de.y - 50]);
                    if (linkDoc) {
                        de.complete.linkDocument = linkDoc;
                        linkDoc.layout_isSvg = true;
                        DocumentView.linkCommonAncestor(linkDoc)?.ComponentView?.addDocument?.(linkDoc);
                    }
                }
                e.stopPropagation();
                return true;
            }
        }
        return false;
    }, 'drop doc');

    importDocument = () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.zip';
        input.onchange = () => {
            if (input.files) {
                const batch = UndoManager.StartBatch('importing');
                Doc.importDocument(input.files[0]).then(doc => {
                    if (doc instanceof Doc) {
                        this._props.addDocTab(doc, OpenWhere.addRight);
                        batch.end();
                    }
                });
            }
        };
        input.click();
    };

    askGPT = async (): Promise<string | undefined> => {
        const queryText = RTFCast(DocCast(this.dataDoc[this.props.fieldKey + '_1']).text)?.Text;
        try {
            const res = await gptAPICall('Question: ' + StrCast(queryText), GPTCallType.CHATCARD);
            if (!res) {
                console.error('GPT call failed');
                return;
            }
            DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res;
            console.log(res);
        } catch (err) {
            console.error('GPT call failed', err);
        }
    };

    onContextMenu = (e?: React.MouseEvent, pageX?: number, pageY?: number) => {
        if (e && this.layoutDoc.layout_hideContextMenu && Doc.noviceMode) {
            e.preventDefault();
            e.stopPropagation();
            // !this._props.isSelected(true) && DocumentView.SelectView(this.DocumentView(), false);
        }
        // the touch onContextMenu is button 0, the pointer onContextMenu is button 2
        if (e) {
            if ((e.button === 0 && !e.ctrlKey) || e.isDefaultPrevented()) {
                e.preventDefault();
                return;
            }
            e.preventDefault();
            e.stopPropagation();
            e.persist();

            if (!navigator.userAgent.includes('Mozilla') && (Math.abs(this._downX - (e?.clientX ?? 0)) > 3 || Math.abs(this._downY - (e?.clientY ?? 0)) > 3)) {
                return;
            }
        }

        const cm = ContextMenu.Instance;
        if (!cm || SnappingManager.ExploreMode) return;

        if (e && !(e.nativeEvent instanceof simMouseEvent ? e.nativeEvent.dash : false)) {
            const onDisplay = () => {
                if (this.Document.type !== DocumentType.MAP) DocumentViewInternal.SelectAfterContextMenu && this._props.select(false); // 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.
                setTimeout(() => simulateMouseClick(document.elementFromPoint(e.clientX, e.clientY), e.clientX, e.clientY, e.screenX, e.screenY));
            };
            if (navigator.userAgent.includes('Macintosh')) {
                cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15, undefined, undefined, onDisplay);
            } else {
                onDisplay();
            }
            return;
        }

        const customScripts = Cast(this.Document.contextMenuScripts, listSpec(ScriptField), []);
        StrListCast(this.Document.contextMenuLabels).forEach((label, i) =>
            cm.addItem({ description: label, event: () => customScripts[i]?.script.run({ documentView: this, this: this.Document, scriptContext: this._props.scriptContext }), icon: 'sticky-note' })
        );
        this._props
            .contextMenuItems?.()
            .forEach(
                item =>
                    item.label &&
                    cm.addItem({ description: item.label, event: () => (item.method ? item.method() : item.script?.script.run({ this: this.Document, documentView: this, scriptContext: this._props.scriptContext })), icon: item.icon as IconProp })
            );

        if (!this.Document.isFolder) {
            const templateDoc = Cast(this.Document[StrCast(this.Document.layout_fieldKey)], Doc, null);
            const appearance = cm.findByDescription('Appearance...');
            const appearanceItems = appearance?.subitems ?? [];

            if (this._props.renderDepth === 0) {
                appearanceItems.splice(0, 0, { description: 'Open in Lightbox', event: () => DocumentView.SetLightboxDoc(this.Document), icon: 'external-link-alt' });
            }
            appearanceItems.push({ description: 'Pin', event: () => this._props.pinToPres(this.Document, {}), icon: 'map-pin' });
            if (this.Document._layout_isFlashcard) {
                appearanceItems.push({ description: 'Create ChatCard', event: () => this.askGPT(), icon: 'id-card' });
            }

            !Doc.noviceMode && templateDoc && appearanceItems.push({ description: 'Open Template   ', event: () => this._props.addDocTab(templateDoc, OpenWhere.addRight), icon: 'eye' });
            !appearance && appearanceItems.length && cm.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'compass' });

            // creates menu for the user to select how to reveal the flashcards
            if (this.Document._layout_isFlashcard) {
                const revealOptions = cm.findByDescription('Reveal Options');
                const revealItems = revealOptions?.subitems ?? [];
                revealItems.push({ description: 'Hover', event: () => { this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover'; }, icon: 'hand-point-up' }); // prettier-ignore
                revealItems.push({ description: 'Flip', event: () => { this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip'; }, icon: 'rotate' }); // prettier-ignore
                !revealOptions && cm.addItem({ description: 'Reveal Options', addDivider: false, noexpand: true, subitems: revealItems, icon: 'layer-group' });
            }

            if (this._props.bringToFront) {
                const zorders = cm.findByDescription('ZOrder...');
                const zorderItems = zorders?.subitems ?? [];
                zorderItems.push({ description: 'Bring to Front', event: () => DocumentView.Selected().forEach(dv => dv._props.bringToFront?.(dv.Document, false)), icon: 'arrow-up' });
                zorderItems.push({ description: 'Send to Back', event: () => DocumentView.Selected().forEach(dv => dv._props.bringToFront?.(dv.Document, true)), icon: 'arrow-down' });
                zorderItems.push({
                    description: !this.layoutDoc._keepZDragged ? 'Keep ZIndex when dragged' : 'Allow ZIndex to change when dragged',
                    event: undoable(
                        action(() => {
                            this.layoutDoc._keepZWhenDragged = !this.layoutDoc._keepZWhenDragged;
                        }),
                        'set zIndex drag'
                    ),
                    icon: 'hand-point-up',
                });
                !zorders && cm.addItem({ description: 'Z Order...', addDivider: true, noexpand: true, subitems: zorderItems, icon: 'layer-group' });
            }

            if (!Doc.IsSystem(this.Document) && !this.Document.hideClickBehaviors && !this._props.hideClickBehaviors) {
                const existingOnClick = cm.findByDescription('OnClick...');
                const onClicks = existingOnClick?.subitems ?? [];

                onClicks.push({ description: 'Enter Portal', event: undoable(() => DocUtils.makeIntoPortal(this.Document, this.layoutDoc, this._allLinks), 'make into portal'), icon: 'window-restore' });
                !Doc.noviceMode && onClicks.push({ description: 'Toggle Detail', event: this.setToggleDetail, icon: 'concierge-bell' });

                if (!this.Document.annotationOn) {
                    onClicks.push({ description: this.onClickHdlr ? 'Remove Click Behavior' : 'Follow Link', event: () => this.toggleFollowLink(false, false), icon: 'link' });
                    !Doc.noviceMode && onClicks.push({ description: 'Edit onClick Script', event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.Document, undefined, 'onClick'), 'edit onClick'), icon: 'terminal' });
                    !existingOnClick && cm.addItem({ description: 'OnClick...', noexpand: true, subitems: onClicks, icon: 'mouse-pointer' });
                } else if (Doc.Links(this.Document).length) {
                    onClicks.push({ description: 'Restore On Click default', event: () => this.noOnClick(), icon: 'link' });
                    onClicks.push({ description: 'Follow Link on Click', event: () => this.followLinkOnClick(), icon: 'link' });
                    !existingOnClick && cm.addItem({ description: 'OnClick...', subitems: onClicks, icon: 'mouse-pointer' });
                }
            }

            const funcs: ContextMenuProps[] = [];
            if (!Doc.noviceMode && this.layoutDoc.onDragStart) {
                funcs.push({ description: 'Drag an Embedding', icon: 'edit', event: () => { this.Document.dragFactory && (this.layoutDoc.onDragStart = ScriptField.MakeFunction('getEmbedding(this.dragFactory)')); } }); // prettier-ignore
                funcs.push({ description: 'Drag a Copy', icon: 'edit', event: () => { this.Document.dragFactory && (this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)')); } }); // prettier-ignore
                funcs.push({ description: 'Drag Document', icon: 'edit', event: () => { this.layoutDoc.onDragStart = undefined; } }); // prettier-ignore
                cm.addItem({ description: 'OnDrag...', noexpand: true, subitems: funcs, icon: 'asterisk' });
            }

            const more = cm.findByDescription('More...');
            const moreItems = more?.subitems ?? [];
            if (!Doc.IsSystem(this.Document)) {
                if (!Doc.noviceMode) {
                    moreItems.push({ description: 'Make View of Metadata Field', event: () => Doc.MakeMetadataFieldTemplate(this.Document, this._props.TemplateDataDocument), icon: 'concierge-bell' });
                    moreItems.push({ description: `${this.Document._chromeHidden ? 'Show' : 'Hide'} Chrome`, event: () => { this.Document._chromeHidden = !this.Document._chromeHidden; }, icon: 'project-diagram' }); // prettier-ignore
                    moreItems.push({ description: 'Copy ID', event: () => ClientUtils.CopyText(Doc.globalServerPath(this.Document)), icon: 'fingerprint' });
                }
            }

            !more && moreItems.length && cm.addItem({ description: 'More...', subitems: moreItems, icon: 'eye' });
        }
        const constantItems: ContextMenuProps[] = [];
        if (!Doc.IsSystem(this.Document) && this.Document._type_collection !== CollectionViewType.Docking) {
            constantItems.push({ description: 'Zip Export', icon: 'download', event: async () => DocUtils.Zip(this.Document) });
            constantItems.push({ description: 'Share', event: () => DocumentView.ShareOpen(this._docView), icon: 'users' });
            if (this._props.removeDocument && Doc.ActiveDashboard !== this.Document) {
                // need option to gray out menu items ... preferably with a '?' that explains why they're grayed out (eg., no permissions)
                constantItems.push({ description: 'Close', event: this.deleteClicked, icon: 'times' });
            }
        }
        constantItems.push({ description: 'Show Metadata', event: () => this._props.addDocTab(this.Document, OpenWhere.addRightKeyvalue), icon: 'table-columns' });
        cm.addItem({ description: 'General...', noexpand: false, subitems: constantItems, icon: 'question' });

        const help = cm.findByDescription('Help...');
        const helpItems = help?.subitems ?? [];
        !Doc.noviceMode && helpItems.push({ description: 'Text Shortcuts Ctrl+/', event: () => this._props.addDocTab(Docs.Create.PdfDocument('/assets/cheat-sheet.pdf', { _width: 300, _height: 300 }), OpenWhere.addRight), icon: 'keyboard' });
        !Doc.noviceMode && helpItems.push({ description: 'Print Document in Console', event: () => console.log(this.Document), icon: 'hand-point-right' });
        !Doc.noviceMode && helpItems.push({ description: 'Print DataDoc in Console', event: () => console.log(this.dataDoc), icon: 'hand-point-right' });

        let documentationDescription: string | undefined;
        let documentationLink: string | undefined;
        switch (this.Document.type) {
            case DocumentType.COL:
                documentationDescription = 'See collection documentation';
                documentationLink = 'https://brown-dash.github.io/Dash-Documentation/views/';
                break;
            case DocumentType.PDF:
                documentationDescription = 'See PDF node documentation';
                documentationLink = 'https://brown-dash.github.io/Dash-Documentation/documents/pdf/';
                break;
            case DocumentType.VID:
                documentationDescription = 'See video node documentation';
                documentationLink = 'https://brown-dash.github.io/Dash-Documentation/documents/tempMedia/video';
                break;
            case DocumentType.AUDIO:
                documentationDescription = 'See audio node documentation';
                documentationLink = 'https://brown-dash.github.io/Dash-Documentation/documents/tempMedia/audio';
                break;
            case DocumentType.WEB:
                documentationDescription = 'See webpage node documentation';
                documentationLink = 'https://brown-dash.github.io/Dash-Documentation/documents/webpage/';
                break;
            case DocumentType.IMG:
                documentationDescription = 'See image node documentation';
                documentationLink = 'https://brown-dash.github.io/Dash-Documentation/documents/images/';
                break;
            case DocumentType.RTF:
                documentationDescription = 'See text node documentation';
                documentationLink = 'https://brown-dash.github.io/Dash-Documentation/documents/text/';
                break;
            case DocumentType.DATAVIZ:
                documentationDescription = 'See DataViz node documentation';
                documentationLink = 'https://brown-dash.github.io/Dash-Documentation/documents/dataViz/';
                break;
            default:
        }
        // Add link to help documentation (unless the doc contents have been overriden in which case the documentation isn't relevant)
        if (!this.docContents && documentationDescription && documentationLink) {
            helpItems.push({
                description: documentationDescription,
                event: () => window.open(documentationLink, '_blank'),
                icon: 'book',
            });
        }
        if (!help) cm.addItem({ description: 'Help...', noexpand: !Doc.noviceMode, subitems: helpItems, icon: 'question' });
        else cm.moveAfter(help);

        e?.stopPropagation(); // DocumentViews should stop propagation of this event
        cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15, undefined, undefined, undefined);
    };

    rootSelected = () => this._rootSelected;
    panelHeight = () => this._props.PanelHeight() - this.headerMargin;
    screenToLocalContent = () => this._props.ScreenToLocalTransform().translate(0, -this.headerMargin);
    onClickFunc = this.disableClickScriptFunc ? undefined : () => this.onClickHdlr;
    setHeight = (height: number) => { !this._props.suppressSetHeight && (this.layoutDoc._height = Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), height)); } // prettier-ignore
    setContentView = action((view: ViewBoxInterface<FieldViewProps>) => { this._componentView = view; }); // prettier-ignore
    isContentActive = (): boolean | undefined => this._isContentActive;
    childFilters = () => [...this._props.childFilters(), ...StrListCast(this.layoutDoc.childFilters)];

    contentPointerEvents = () => this._contentPointerEvents;

    anchorPanelWidth = () => this._props.PanelWidth() || 1;
    anchorPanelHeight = () => this._props.PanelHeight() || 1;
    anchorStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => {
        // prettier-ignore
        switch (property.split(':')[0]) {
            case StyleProp.ShowTitle:     return '';
            case StyleProp.PointerEvents: return 'none';
            case StyleProp.Highlighting:  return undefined;
            case StyleProp.Opacity:       {
                const filtered = DocUtils.FilterDocs(this.directLinks, this._props.childFilters?.() ?? [], []);
                return filtered.some(link => link._link_displayArrow) ? 0 : undefined;
            }
            default:
        }
        return this._props.styleProvider?.(doc, props, property);
    };

    @computed get viewBoxContents() {
        TraceMobx();
        const isInk = this.layoutDoc._layout_isSvg && !this._props.LayoutTemplateString;
        const noBackground = this.Document.isGroup && !this._componentView?.isUnstyledView?.() && (!this.layoutDoc.backgroundColor || this.layoutDoc.backgroundColor === 'transparent');
        return (
            <div
                className="documentView-contentsView"
                style={{
                    pointerEvents: (isInk || noBackground ? 'none' : this.contentPointerEvents()) ?? (this._mounted ? 'all' : 'none'),
                    height: this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined,
                }}>
                <DocumentContentsView
                    {...this._props}
                    layoutFieldKey={StrCast(this.Document.layout_fieldKey, 'layout')}
                    pointerEvents={this.contentPointerEvents}
                    setContentViewBox={this.setContentView}
                    childFilters={this.childFilters}
                    PanelHeight={this.panelHeight}
                    setHeight={this.setHeight}
                    isContentActive={this.isContentActive}
                    ScreenToLocalTransform={this.screenToLocalContent}
                    rootSelected={this.rootSelected}
                    onClickScript={this.onClickFunc}
                    setTitleFocus={this.setTitleFocus}
                    hideClickBehaviors={BoolCast(this.Document.hideClickBehaviors)}
                />
            </div>
        );
    }

    captionStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => this._props?.styleProvider?.(doc, props, property + ':caption');
    fieldsDropdown = (placeholder: string) => (
        <div
            ref={r => { r && runInAction(() => (this._titleDropDownInnerWidth = DivWidth(r)));}} // prettier-ignore
            onPointerDown={action(() => { this._changingTitleField = true; })} // prettier-ignore
            style={{ width: 'max-content', background: SnappingManager.userBackgroundColor, color: SnappingManager.userColor, transformOrigin: 'left', transform: `scale(${this.titleHeight / 30 /* height of Dropdown */})` }}>
            <FieldsDropdown
                Document={this.Document}
                placeholder={placeholder}
                selectFunc={action((field: string | number) => {
                    if (this.layoutDoc.layout_showTitle) {
                        this.layoutDoc._layout_showTitle = field;
                    } else if (!this._props.showTitle) {
                        Doc.UserDoc().layout_showTitle = field;
                    }
                    this._changingTitleField = false;
                })}
                menuClose={action(() => { this._changingTitleField = false; })} // prettier-ignore
            />
        </div>
    );
    /**
     * displays a 'title' at the top of a document. The title contents default to the 'title' field, but can be changed to one or more fields by
     * setting layout_showTitle using the format:   field1[:hover]
     * */
    @computed get titleView() {
        const showTitle = this.showTitle?.split(':')[0];
        const showTitleHover = this.showTitle?.includes(':hover');

        const targetDoc = showTitle?.startsWith('_') ? this.layoutDoc : this.Document;
        const background = StrCast(
            this.layoutDoc.layout_headingColor,
            // StrCast(SharingManager.Instance.users.find(u => u.user.email === this.dataDoc.author)?.sharingDoc.headingColor,
            StrCast(Doc.SharingDoc().headingColor, SnappingManager.userBackgroundColor)
            // )
        );
        const dropdownWidth = this._titleRef.current?._editing || this._changingTitleField ? Math.max(10, (this._titleDropDownInnerWidth * this.titleHeight) / 30) : 0;
        const sidebarWidthPercent = +StrCast(this.layoutDoc.layout_sidebarWidthPercent).replace('%', '');

        return !showTitle ? null : (
            <div
                className={`documentView-titleWrapper${showTitleHover ? '-hover' : ''}`}
                key="title"
                style={{
                    zIndex: 1,
                    position: this.headerMargin ? 'relative' : 'absolute',
                    height: this.titleHeight,
                    width: 100 - sidebarWidthPercent + '%',
                    color: background === 'transparent' ? SnappingManager.userColor : lightOrDark(background),
                    background,
                    pointerEvents: (!this.disableClickScriptFunc && this.onClickHdlr) || this.Document.ignoreClick ? 'none' : this.isContentActive() || this._props.isDocumentActive?.() ? 'all' : undefined,
                }}>
                {!dropdownWidth ? null : (
                    <div className="documntViewInternal-dropdown" style={{ width: dropdownWidth }}>
                        {this.fieldsDropdown(showTitle)}
                    </div>
                )}
                <div
                    style={{
                        width: `calc(100% - ${dropdownWidth}px)`,
                        minWidth: '100px',
                        color: this._titleRef.current?._editing || this._changingTitleField ? 'black' : undefined,
                        background: this._titleRef.current?._editing || this._changingTitleField ? 'yellow' : undefined,
                    }}>
                    <EditableView
                        ref={this._titleRef}
                        contents={
                            showTitle
                                .split(';')
                                .map(field => Field.toJavascriptString(this.Document[field] as FieldType))
                                .join(' \\ ') || '-unset-'
                        }
                        display="block"
                        oneLine
                        fontSize={(this.titleHeight / 15) * 10}
                        GetValue={() =>
                            showTitle
                                .split(';')
                                .map(field => Field.toKeyValueString(this.Document, field))
                                .join('\\')
                        }
                        SetValue={undoable((input: string) => {
                            if (input?.startsWith('$')) {
                                if (this.layoutDoc.layout_showTitle) {
                                    this.layoutDoc._layout_showTitle = input?.substring(1) ? input.substring(1) : undefined;
                                } else if (!this._props.showTitle) {
                                    Doc.UserDoc().layout_showTitle = input?.substring(1) ? input.substring(1) : 'title';
                                }
                            } else if (showTitle && !showTitle.includes(';') && !showTitle.includes('Date') && showTitle !== 'author') {
                                Doc.SetField(targetDoc, showTitle, input);
                            }
                            return true;
                        }, 'set title')}
                    />
                </div>
            </div>
        );
    }

    @computed get captionView() {
        return !this.showCaption ? null : (
            <div
                className="documentView-captionWrapper"
                style={{
                    pointerEvents: this.Document.ignoreClick ? 'none' : this.isContentActive() || this._props.isDocumentActive?.() ? 'all' : undefined,
                    background: StrCast(this.layoutDoc._backgroundColor, 'rgba(0,0,0,0.2)'),
                    color: lightOrDark(StrCast(this.layoutDoc._backgroundColor, 'black')),
                }}>
                <FormattedTextBox
                    {...this._props}
                    yPadding={10}
                    xPadding={10}
                    fieldKey={this.showCaption}
                    styleProvider={this.captionStyleProvider}
                    dontRegisterView
                    rootSelected={this.rootSelected}
                    noSidebar
                    dontScale
                    renderDepth={this._props.renderDepth}
                    isContentActive={this.isContentActive}
                />
            </div>
        );
    }

    renderDoc = (style: object) => {
        TraceMobx();
        const showTitle = this.showTitle?.split(':')[0];
        return !DocCast(this.Document) || GetEffectiveAcl(this.dataDoc) === AclPrivate
            ? null
            : (this.docContents ?? (
                  <div
                      className="documentView-node"
                      id={this.Document.type !== DocumentType.LINK ? this._docView?.DocUniqueId : undefined}
                      style={{
                          ...style,
                          background: this.backgroundBoxColor,
                          opacity: this.opacity,
                          cursor: Doc.ActiveTool === InkTool.None ? 'grab' : 'crosshair',
                          color: StrCast(this.layoutDoc.color, 'inherit'),
                          fontFamily: StrCast(this.Document._text_fontFamily, 'inherit'),
                          fontSize: Cast(this.Document._text_fontSize, 'string', null),
                          transform: this._animateScalingTo ? `scale(${this._animateScalingTo})` : undefined,
                          transition: !this._animateScalingTo ? this._props.DataTransition?.() : `transform ${this.animateScaleTime() / 1000}s ease-${this._animateScalingTo < 1 ? 'in' : 'out'}`,
                      }}>
                      {this._props.hideTitle || (!showTitle && !this.showCaption) ? (
                          this.viewBoxContents
                      ) : (
                          <div className="documentView-styleWrapper">
                              {this.titleView}
                              {this.viewBoxContents}
                              {this.captionView}
                          </div>
                      )}
                      {this.widgetDecorations ?? null}
                  </div>
              ));
    };

    render() {
        TraceMobx();
        const { highlighting, borderPath } = this;
        const { highlightIndex, highlightStyle, highlightColor, highlightStroke } = (highlighting as { highlightIndex: number; highlightStyle: string; highlightColor: string; highlightStroke: boolean }) ?? {
            highlightIndex: undefined,
            highlightStyle: undefined,
            highlightColor: undefined,
            highlightStroke: undefined,
        };
        const { clipPath, jsx } = (borderPath as { clipPath: string; jsx: JSX.Element }) ?? { clipPath: undefined, jsx: undefined };
        const boxShadow = !highlighting
            ? this.boxShadow
            : highlighting && this.borderRounding && highlightStyle !== 'dashed'
              ? `0 0 0 ${highlightIndex}px ${highlightColor}`
              : this.boxShadow || (this.Document.isTemplateForField ? 'black 0.2vw 0.2vw 0.8vw' : undefined);
        const renderDoc = this.renderDoc({
            borderRadius: this.borderRounding,
            outline: highlighting && !this.borderRounding && !highlightStroke ? `${highlightColor} ${highlightStyle} ${highlightIndex}px` : 'solid 0px',
            border: highlighting && this.borderRounding && highlightStyle === 'dashed' ? `${highlightStyle} ${highlightColor} ${highlightIndex}px` : undefined,
            boxShadow,
            clipPath,
        });

        return (
            <div
                className={`${DocumentView.ROOT_DIV} docView-hack`}
                ref={this._mainCont}
                onContextMenu={this.onContextMenu}
                onPointerDown={this.onPointerDown}
                onClick={SnappingManager.ExploreMode ? this.onBrowseClick : this.onClick}
                onPointerEnter={() => (!SnappingManager.IsDragging || SnappingManager.CanEmbed) && Doc.BrushDoc(this.Document)}
                onPointerOver={() => (!SnappingManager.IsDragging || SnappingManager.CanEmbed) && Doc.BrushDoc(this.Document)}
                onPointerLeave={e => !isParentOf(this._contentDiv, document.elementFromPoint(e.nativeEvent.x, e.nativeEvent.y)) && Doc.UnBrushDoc(this.Document)}
                style={{
                    borderRadius: this.borderRounding,
                    pointerEvents: this._pointerEvents === 'visiblePainted' ? 'none' : this._pointerEvents, // visible painted means that the underlying doc contents are irregular and will process their own pointer events (otherwise, the contents are expected to fill the entire doc view box so we can handle pointer events here)
                }}>
                {this._componentView?.isUnstyledView?.() || this.Document.type === DocumentType.CONFIG || !renderDoc ? renderDoc : DocumentViewInternal.AnimationEffect(renderDoc, this.Document[Animation], this.Document)}
                {jsx}
            </div>
        );
    }

    /**
     * returns an entrance animation effect function to wrap a JSX element
     * @param presEffectDoc presentation effects document that specifies the animation effect parameters
     * @returns a function that will wrap a JSX animation element wrapping any JSX element
     */
    public static AnimationEffect(
        renderDoc: JSX.Element,
        presEffectDoc: Opt<
            | Doc
            | {
                  presentation_effectDirection?: string;
                  followLinkAnimDirection?: string;
                  presentation_transition?: number;
                  followLinkTransitionTime?: number;
                  presentation_effectTiming?: number;
                  presentation_effect?: string;
                  followLinkAnimEffect?: string;
              }
        >,
        root: Doc
    ) {
        const dir = ((presEffectDoc?.presentation_effectDirection ?? presEffectDoc?.followLinkAnimDirection) || PresEffectDirection.Center) as PresEffectDirection;
        const duration = Cast(presEffectDoc?.presentation_transition, 'number', Cast(presEffectDoc?.followLinkTransitionTime, 'number', null));
        const effectProps = {
            left: dir === PresEffectDirection.Left,
            right: dir === PresEffectDirection.Right,
            top: dir === PresEffectDirection.Top,
            bottom: dir === PresEffectDirection.Bottom,
            opposite: true,
            delay: 0,
            duration,
        };

        const timing = StrCast(presEffectDoc?.presentation_effectTiming);
        const timingConfig = (timing ? JSON.parse(timing) : undefined) ?? {
            type: SpringType.GENTLE,
            ...springMappings.gentle,
        };
        switch (StrCast(presEffectDoc?.presentation_effect, StrCast(presEffectDoc?.followLinkAnimEffect))) {
            case PresEffect.Expand:     return <SpringAnimation doc={root} startOpacity={0} dir={dir} presEffect={PresEffect.Expand} springSettings={timingConfig}>{renderDoc}</SpringAnimation>
            case PresEffect.Flip:       return <SpringAnimation doc={root} startOpacity={0} dir={dir} presEffect={PresEffect.Flip}   springSettings={timingConfig}>{renderDoc}</SpringAnimation>
            case PresEffect.Rotate:     return <SpringAnimation doc={root} startOpacity={0} dir={dir} presEffect={PresEffect.Rotate} springSettings={timingConfig}>{renderDoc}</SpringAnimation>
            case PresEffect.Bounce:     return <SpringAnimation doc={root} startOpacity={0} dir={dir} presEffect={PresEffect.Bounce} springSettings={timingConfig}>{renderDoc}</SpringAnimation>
            case PresEffect.Roll:       return <SpringAnimation doc={root} startOpacity={0} dir={dir} presEffect={PresEffect.Roll}   springSettings={timingConfig}>{renderDoc}</SpringAnimation>
            // case PresEffect.Fade:    return <SlideEffect doc={root} dir={dir} presEffect={PresEffect.Fade} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
            case PresEffect.Fade:       return <Fade {...effectProps}>{renderDoc}</Fade>
            // keep as preset, doesn't really make sense with spring config
            case PresEffect.Lightspeed: return <JackInTheBox {...effectProps}>{renderDoc}</JackInTheBox>;
            case PresEffect.None:       
            default:                    return renderDoc;
        } // prettier-ignore
    }
}

@observer
export class DocumentView extends DocComponent<DocumentViewProps>() {
    public static ROOT_DIV = 'documentView-effectsWrapper';
    /**
     * Opens a new Tab for the doc in the specified location (or in the lightbox)
     */
    public static addSplit: (Doc: Doc, where: OpenWhereMod) => void;
    // Lightbox
    public static _lightboxDoc: () => Doc | undefined;
    public static _lightboxContains: (view?: DocumentView) => boolean | undefined;
    public static _setLightboxDoc: (doc: Opt<Doc>, target?: Doc, future?: Doc[], layoutTemplate?: Doc | string) => boolean;
    /**
     * @returns The Doc, if any, being displayed in the lightbox
     */
    public static readonly LightboxDoc = () => DocumentView._lightboxDoc?.();
    /**
     * @param view
     * @returns whether 'view' is anywhere in the rendering hierarchy of the lightbox
     */
    public static readonly LightboxContains = (view?: DocumentView) => DocumentView._lightboxContains?.(view);
    /**
     * Sets the root Doc to render in the lightbox view.
     * @param doc
     * @param target a Doc within 'doc' to focus on (useful for freeform collections)
     * @param future a list of Docs to step through with the arrow buttons of the lightbox
     * @param layoutTemplate a template to apply to 'doc' to render it.
     * @returns success flag which is currently always true
     */
    public static readonly SetLightboxDoc = (doc: Opt<Doc>, target?: Doc, future?: Doc[], layoutTemplate?: Doc | string) => DocumentView._setLightboxDoc(doc, target, future, layoutTemplate);
    // Sharing Manager
    public static ShareOpen: (target?: DocumentView, targetDoc?: Doc) => void;
    // LinkFollower
    public static FollowLink: (linkDoc: Opt<Doc>, sourceDoc: Doc, altKey: boolean) => boolean;
    // selection funcs
    public static DeselectAll: (except?: Doc) => void | undefined;
    public static DeselectView: (dv: DocumentView | undefined) => void | undefined;
    public static SelectView: (dv: DocumentView | undefined, extendSelection: boolean) => void | undefined;
    /**
     * returns a list of all currently selected DocumentViews
     */
    public static Selected: () => DocumentView[];
    /**
     * returns a list of all currently selected Docs
     */
    public static SelectedDocs: () => Doc[];
    public static SelectSchemaDoc: (doc: Doc, deselectAllFirst?: boolean) => void;
    public static SelectedSchemaDoc: () => Opt<Doc>;
    // view mgr funcs
    public static activateTabView: (tabDoc: Doc) => boolean;
    public static allViews: () => DocumentView[];
    public static addView: (dv: DocumentView) => void | undefined;
    public static removeView: (dv: DocumentView) => void | undefined;
    public static addViewRenderedCb: (doc: Opt<Doc>, func: (dv: DocumentView) => void) => boolean;
    public static getViews = (doc?: Doc) => Array.from(doc?.[DocViews] ?? []) as DocumentView[];
    public static getFirstDocumentView: (toFind: Doc) => DocumentView | undefined;
    public static getDocumentView: (target: Doc | undefined, preferredCollection?: DocumentView) => Opt<DocumentView>;
    public static getContextPath: (doc: Opt<Doc>, includeExistingViews?: boolean) => Doc[];
    public static getLightboxDocumentView: (toFind: Doc) => Opt<DocumentView>;
    public static showDocumentView: (targetDocView: DocumentView, options: FocusViewOptions) => Promise<void>;
    public static showDocument: (
        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.
    ) => Promise<void>;
    public static linkCommonAncestor: (link: Doc) => DocumentView | undefined;
    /**
     * Pins a Doc to the current presentation trail. (see TabDocView for implementation)
     */
    public static PinDoc: (docIn: Doc | Doc[], pinProps: PinProps) => void;
    /**
     * The DocumentView below the cursor at the start of a gesture (that receives the pointerDown event).  Used by GestureOverlay to determine the doc a gesture should apply to.
     */
    public static DownDocView: DocumentView | undefined;

    public get displayName() {  return 'DocumentView(' + (this.Document?.title??"") + ')';  } // prettier-ignore
    private _htmlOverlayEffect: Opt<Doc>;
    private _disposers: { [name: string]: IReactionDisposer } = {};
    private _viewTimer: NodeJS.Timeout | undefined;
    private _animEffectTimer: NodeJS.Timeout | undefined;
    /**
     * This is used to create an id for tracking a Doc.  Since the Doc can be in a regular view and in the lightbox at
     * the same time, this creates a different version of the id depending on whether the search scope will be in the lightbox or not.
     * @param inLightbox is the id scoped to the lightbox
     * @param id the id
     * @returns
     */
    public static UniquifyId(inLightbox: boolean | undefined, id: string) {
        return (inLightbox ? 'lightbox-' : '') + id;
    }
    public ViewGuid = DocumentView.UniquifyId(DocumentView.LightboxContains(this), Utils.GenerateGuid()); // a unique id associated with the main <div>. used by LinkBox's Xanchor to find the arrowhead locations.
    public DocUniqueId = DocumentView.UniquifyId(DocumentView.LightboxContains(this), this.Document[Id]);

    constructor(props: DocumentViewProps) {
        super(props);
        makeObservable(this);
    }

    // want the htmloverlay to be able to fade in but we also want it to be display 'none' until it is needed.
    // unfortunately, CSS can't transition animate any properties for something that is display 'none'.
    // so we need to first activate the div, then, after a render timeout, start the opacity transition.
    @observable private _enableHtmlOverlayTransitions: boolean = false;
    @observable private _docViewInternal: DocumentViewInternal | undefined | null = undefined;
    @observable private _htmlOverlayText: Opt<string> = undefined;
    @observable private _isHovering = false;
    @observable private _selected = false;
    @observable public static CurrentlyPlaying: DocumentView[] = []; // audio or video media views that are currently playing

    @computed private get shouldNotScale() {
        return (this.layout_fitWidth && !this.nativeWidth) || this.ComponentView?.isUnstyledView?.();
    }
    @computed private get effectiveNativeWidth() {
        return this.shouldNotScale ? 0 : this.nativeWidth || NumCast(this.layoutDoc.width);
    }
    @computed private get effectiveNativeHeight() {
        return this.shouldNotScale ? 0 : this.nativeHeight || NumCast(this.layoutDoc.height);
    }
    @computed private get nativeScaling() {
        if (this.shouldNotScale) return 1;
        const minTextScale = this.Document.type === DocumentType.RTF ? 0.1 : 0;
        if (this.layout_fitWidth || this._props.PanelHeight() / (this.effectiveNativeHeight || 1) > this._props.PanelWidth() / (this.effectiveNativeWidth || 1)) {
            return Math.max(minTextScale, this._props.PanelWidth() / (this.effectiveNativeWidth || 1)); // width-limited or layout_fitWidth
        }
        return Math.max(minTextScale, this._props.PanelHeight() / (this.effectiveNativeHeight || 1)); // height-limited or unscaled
    }
    @computed private get panelWidth() {
        return this.effectiveNativeWidth ? this.effectiveNativeWidth * this.nativeScaling : this._props.PanelWidth();
    }
    @computed private get panelHeight() {
        if (this.effectiveNativeHeight && (!this.layout_fitWidth || !this.layoutDoc.layout_reflowVertical)) {
            return Math.min(this._props.PanelHeight(), this.effectiveNativeHeight * this.nativeScaling);
        }
        return this._props.PanelHeight();
    }
    @computed private get Xshift() {
        return this.effectiveNativeWidth ? Math.max(0, (this._props.PanelWidth() - this.effectiveNativeWidth * this.nativeScaling) / 2) : 0;
    }
    @computed private get Yshift() {
        return this.effectiveNativeWidth &&
            this.effectiveNativeHeight &&
            Math.abs(this.Xshift) < 0.001 &&
            (!this.layoutDoc.layout_reflowVertical || (!this.layout_fitWidth && this.effectiveNativeHeight * this.nativeScaling <= this._props.PanelHeight()))
            ? Math.max(0, (this._props.PanelHeight() - this.effectiveNativeHeight * this.nativeScaling) / 2)
            : 0;
    }
    @computed private get hideLinkButton() {
        return (
            this._props.hideLinkButton ||
            this._props.renderDepth === -1 || //
            (this.IsSelected && this._props.renderDepth) ||
            !this._isHovering ||
            (!this.IsSelected && this.layoutDoc.layout_hideLinkButton) ||
            SnappingManager.IsDragging ||
            SnappingManager.IsResizing
        );
    }

    componentDidMount() {
        runInAction(() => this.Document[DocViews].add(this));
        this._disposers.onViewMounted = reaction(() => ScriptCast(this.Document.onViewMounted)?.script?.run({ this: this.Document }).result, emptyFunction);
        !BoolCast(this.Document.dontRegisterView, this._props.dontRegisterView) && DocumentView.addView(this);
    }

    componentWillUnmount() {
        this._viewTimer && clearTimeout(this._viewTimer);
        runInAction(() => this.Document[DocViews].delete(this));
        Object.values(this._disposers).forEach(disposer => disposer?.());
        !BoolCast(this.Document.dontRegisterView, this._props.dontRegisterView) && DocumentView.removeView(this);
    }

    public set IsSelected(val)  { runInAction(() => { this._selected = val; }); } // prettier-ignore
    public get IsSelected()     { return this._selected; } // prettier-ignore
    public get topMost()        { return this._props.renderDepth === 0; } // prettier-ignore
    public get ContentDiv()     { return this._docViewInternal?._contentDiv; } // prettier-ignore
    public get ComponentView()  { return this._docViewInternal?._componentView; } // prettier-ignore
    public get allLinks()       { return this._docViewInternal?._allLinks ?? []; } // prettier-ignore

    get LayoutFieldKey() {
        return Doc.LayoutFieldKey(this.Document, this._props.LayoutTemplateString);
    }

    @computed get layout_fitWidth() {
        return this._props.fitWidth?.(this.layoutDoc) ?? this.layoutDoc?.layout_fitWidth;
    }
    @computed get anchorViewDoc() {
        return this._props.LayoutTemplateString?.includes('link_anchor_2') ? DocCast(this.Document.link_anchor_2) : this._props.LayoutTemplateString?.includes('link_anchor_1') ? DocCast(this.Document.link_anchor_1) : undefined;
    }

    @computed get getBounds(): Opt<{ left: number; top: number; right: number; bottom: number; transition?: string }> {
        if (!this.ContentDiv || Doc.AreProtosEqual(this.Document, Doc.UserDoc())) {
            return undefined;
        }
        if (this.ComponentView?.screenBounds?.()) {
            return this.ComponentView.screenBounds();
        }
        const xf = this.screenToContentsTransform().scale(this.nativeScaling).inverse();
        const [[left, top], [right, bottom]] = [xf.transformPoint(0, 0), xf.transformPoint(this.panelWidth, this.panelHeight)];

        // transition is returned so that the bounds will 'update' at the end of an animated transition.  This is needed by xAnchor in LinkBox
        const transition = this.docViewPath().find((parent: DocumentView) => parent.DataTransition?.() || parent.ComponentView?.viewTransition?.());
        return { left, top, right, bottom, transition: transition?.DataTransition?.() || transition?.ComponentView?.viewTransition?.() };
    }

    @computed get nativeWidth() {
        return returnVal(this._props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this._props.TemplateDataDocument, !this.layout_fitWidth));
    }
    @computed get nativeHeight() {
        return returnVal(this._props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this._props.TemplateDataDocument, !this.layout_fitWidth));
    }
    @computed public get centeringX() { return this._props.dontCenter?.includes('x') ? 0 : this.Xshift; } // prettier-ignore
    @computed public get centeringY() { return this._props.dontCenter?.includes('y') ? 0 : this.Yshift; } // prettier-ignore

    /**
     * path of DocumentViews hat contains this DocumentView (does not includes this DocumentView thouhg)
     */
    public get containerViewPath() { return this._props.containerViewPath; } // prettier-ignore
    public get LocalRotation() { return this._props.LocalRotation?.(); } // prettier-ignore

    public clearViewTransition = () => {
        this._viewTimer && clearTimeout(this._viewTimer);
        this.layoutDoc._viewTransition = undefined;
    };
    public noOnClick = () => this._docViewInternal?.noOnClick();
    public toggleFollowLink = (zoom?: boolean, setTargetToggle?: boolean): void => this._docViewInternal?.toggleFollowLink(zoom, setTargetToggle);
    public setToggleDetail = (scriptFieldKey = 'onClick') => this._docViewInternal?.setToggleDetail(scriptFieldKey);
    public onContextMenu = (e?: React.MouseEvent, pageX?: number, pageY?: number) => this._docViewInternal?.onContextMenu?.(e, pageX, pageY);
    public cleanupPointerEvents = () => this._docViewInternal?.cleanupPointerEvents();
    public startDragging = (x: number, y: number, dropAction: dropActionType | undefined, hideSource = false) => this._docViewInternal?.startDragging(x, y, dropAction, hideSource);
    public showContextMenu = (pageX: number, pageY: number) => this._docViewInternal?.onContextMenu(undefined, pageX, pageY);

    public toggleNativeDimensions = () => this._docViewInternal && this.Document.type !== DocumentType.INK && Doc.toggleNativeDimensions(this.layoutDoc, this.NativeDimScaling() ?? 1, this._props.PanelWidth(), this._props.PanelHeight());

    public iconify(finished?: () => void, animateTime?: number) {
        this.ComponentView?.updateIcon?.();
        const animTime = this._docViewInternal?.animateScaleTime();
        runInAction(() => { this._docViewInternal && animateTime !== undefined && (this._docViewInternal._animateScaleTime = animateTime); }); // prettier-ignore
        const finalFinished = action(() => {
            finished?.();
            this._docViewInternal && (this._docViewInternal._animateScaleTime = animTime);
        });
        const layoutFieldKey = Cast(this.Document.layout_fieldKey, 'string', null);
        if (layoutFieldKey !== 'layout_icon') {
            this.switchViews(true, 'icon', finalFinished);
            if (layoutFieldKey && layoutFieldKey !== 'layout' && layoutFieldKey !== 'layout_icon') this.Document.deiconifyLayout = layoutFieldKey.replace('layout_', '');
        } else {
            const deiconifyLayout = Cast(this.Document.deiconifyLayout, 'string', null);
            this.switchViews(!!deiconifyLayout, deiconifyLayout, finalFinished, true);
            this.Document.deiconifyLayout = undefined;
            this._props.bringToFront?.(this.Document);
        }
    }

    public playAnnotation = () => {
        const audioAnnoState = this.dataDoc.audioAnnoState ?? AudioAnnoState.stopped;
        const audioAnnos = Cast(this.dataDoc[this.LayoutFieldKey + '_audioAnnotations'], listSpec(AudioField), null);
        const anno = audioAnnos?.lastElement();
        if (anno instanceof AudioField) {
            switch (audioAnnoState) {
                case AudioAnnoState.stopped:
                    this.dataDoc[AudioPlay] = new Howl({
                        src: [anno.url.href],
                        format: ['mp3'],
                        autoplay: true,
                        loop: false,
                        volume: 0.5,
                        onend: action(() => { this.dataDoc.audioAnnoState = AudioAnnoState.stopped; }), // prettier-ignore
                    });
                    this.dataDoc.audioAnnoState = AudioAnnoState.playing;
                    break;
                case AudioAnnoState.playing:
                    (this.dataDoc[AudioPlay] as Howl)?.stop();
                    this.dataDoc.audioAnnoState = AudioAnnoState.stopped;
                    break;
                default:
            }
        }
    };

    public setTextHtmlOverlay = action((text: string | undefined, effect?: Doc) => {
        this._htmlOverlayText = text;
        this._htmlOverlayEffect = effect;
    });
    public setAnimateScaling = action((scale: number, time?: number) => {
        if (this._docViewInternal) {
            this._docViewInternal._animateScalingTo = scale;
            this._docViewInternal._animateScaleTime = time;
        }
    });
    public setAnimEffect = (presEffect: Doc, timeInMs: number /* , afterTrans?: () => void */) => {
        this._animEffectTimer && clearTimeout(this._animEffectTimer);
        this.Document[Animation] = presEffect;
        this._animEffectTimer = setTimeout(() => { this.Document[Animation] = undefined; }, timeInMs); // prettier-ignore
    };
    public setViewTransition = (transProp: string, timeInMs: number, afterTrans?: () => void, dataTrans = false) => {
        this._viewTimer = DocumentView.SetViewTransition([this.layoutDoc], transProp, timeInMs, this._viewTimer, afterTrans, dataTrans);
    };

    public setCustomView = undoable((custom: boolean, layout: string): void => {
        Doc.setNativeView(this.Document);
        custom && DocUtils.makeCustomViewClicked(this.Document, Docs.Create.StackingDocument, layout, undefined);
    }, 'set custom view');

    public static setDefaultTemplate(checkResult?: boolean) {
        if (checkResult) {
            return Doc.UserDoc().defaultTextLayout;
        }
        const view = DocumentView.Selected()[0]?._props.renderDepth > 0 ? DocumentView.Selected()[0] : undefined;
        undoable(() => {
            let tempDoc: Opt<Doc>;
            if (view) {
                if (!view.layoutDoc.isTemplateDoc) {
                    tempDoc = view.Document;
                    MakeTemplate(tempDoc);
                    Doc.AddDocToList(Doc.UserDoc(), 'template_user', tempDoc);
                    Doc.AddDocToList(DocListCast(Doc.MyTools.data)[1], 'data', makeUserTemplateButton(tempDoc));
                    tempDoc && Doc.AddDocToList(Cast(Doc.UserDoc().template_user, Doc, null), 'data', tempDoc);
                } else {
                    tempDoc = DocCast(view.Document[StrCast(view.Document.layout_fieldKey)]);
                    if (!tempDoc) {
                        tempDoc = view.Document;
                        while (tempDoc && !Doc.isTemplateDoc(tempDoc)) tempDoc = DocCast(tempDoc.proto);
                    }
                }
            }
            Doc.UserDoc().defaultTextLayout = tempDoc ? new PrefetchProxy(tempDoc) : undefined;
        }, 'set default template')();
        return undefined;
    }

    /**
     * This switches between the current view of a Doc and a specified alternate layout view.
     * The current view of the Doc is stored in the layout_default field so that it can be restored.
     * If the current view of the Doc is already the specified alternate layout view, this will switch
     * back to the original layout (stored in layout_default)
     * @param detailLayoutKeySuffix the name of the alternate layout field key (NOTE: 'layout_' will be prepended to this string to get the actual field nam)
     */
    public toggleDetail = (detailLayoutKeySuffix: string) => {
        const curLayout = StrCast(this.Document.layout_fieldKey).replace('layout_', '').replace('layout', '');
        if (!this.Document.layout_default && curLayout !== detailLayoutKeySuffix) this.Document.layout_default = curLayout;
        const defaultLayout = StrCast(this.Document.layout_default);
        if (this.Document.layout_fieldKey === 'layout_' + detailLayoutKeySuffix) this.switchViews(!!defaultLayout, defaultLayout, undefined, true);
        else this.switchViews(true, detailLayoutKeySuffix, undefined, true);
    };
    public switchViews = (custom: boolean, view: string, finished?: () => void, useExistingLayout = false) => {
        const batch = UndoManager.StartBatch('switchView:' + view);
        // shrink doc first..
        runInAction(() => { this._docViewInternal && (this._docViewInternal._animateScalingTo = 0.1); }); // prettier-ignore
        setTimeout(
            action(() => {
                if (useExistingLayout && custom && this.Document['layout_' + view]) {
                    this.Document.layout_fieldKey = 'layout_' + view;
                } else {
                    this.setCustomView(custom, view);
                }
                this._docViewInternal && (this._docViewInternal._animateScalingTo = 1); // now expand it
                setTimeout(
                    action(() => {
                        this._docViewInternal && (this._docViewInternal._animateScalingTo = 0);
                        batch.end();
                        finished?.();
                    }),
                    Math.max(0, (this._docViewInternal?.animateScaleTime() ?? 0) - 10)
                );
            }),
            Math.max(0, (this._docViewInternal?.animateScaleTime() ?? 0) - 10)
        );
    };
    /**
     * @returns a hierarchy path through  the nested DocumentViews that display this view.  The last element of the path is this view.
     */
    public docViewPath = () => (this.containerViewPath ? [...this.containerViewPath(), this] : [this]);

    layout_fitWidthFunc = (/* doc: Doc */) => BoolCast(this.layout_fitWidth);
    screenToLocalScale = () => this._props.ScreenToLocalTransform().Scale;
    isSelected = () => this.IsSelected;
    select = (extendSelection: boolean, focusSelection?: boolean) => {
        DocumentView.SelectView(this, extendSelection);
        if (focusSelection) {
            DocumentView.showDocument(this.Document, {
                willZoomCentered: true,
                zoomScale: 0.9,
                zoomTime: 500,
            });
        }
    };
    backgroundColor = () => this._docViewInternal?.backgroundBoxColor;
    DataTransition = () => this._props.DataTransition?.() || StrCast(this.Document.dataTransition);
    ShouldNotScale = () => this.shouldNotScale;
    NativeWidth = () => this.effectiveNativeWidth;
    NativeHeight = () => this.effectiveNativeHeight;
    PanelWidth = () => this.panelWidth;
    PanelHeight = () => this.panelHeight;
    NativeDimScaling = () => this.nativeScaling;
    hideLinkCount = () => !!this.hideLinkButton;
    isHovering = () => this._isHovering;
    selfView = () => this;
    /**
     * @returns Transform to the document view (in the coordinate system of whatever contains the DocumentView)
     */
    screenToViewTransform = () => this._props.ScreenToLocalTransform();
    /**
     * @returns Transform to the coordinate system of the contents of the document view (includes native dimension scaling and centering)
     */
    screenToContentsTransform = () =>
        this._props
            .ScreenToLocalTransform()
            .translate(-this.centeringX, -this.centeringY)
            .scale(1 / this.nativeScaling);

    htmlOverlay = () => {
        const effect = StrCast(this._htmlOverlayEffect?.presentation_effect, StrCast(this._htmlOverlayEffect?.followLinkAnimEffect));
        return (
            <div
                className="documentView-htmlOverlay"
                ref={r => {
                    const val = r?.style.display !== 'none'; // if the outer overlay has been displayed, trigger the innner div to start it's opacity fade in transition
                    if (r && val !== this._enableHtmlOverlayTransitions) {
                        setTimeout(action(() => { this._enableHtmlOverlayTransitions = val; })); // prettier-ignore
                    }
                }}
                style={{ display: !this._htmlOverlayText ? 'none' : undefined }}>
                <div className="documentView-htmlOverlayInner" style={{ transition: `all 500ms`, opacity: this._enableHtmlOverlayTransitions ? 0.9 : 0 }}>
                    {DocumentViewInternal.AnimationEffect(
                        <div className="webBox-textHighlight">
                            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any  */}
                            <ObserverJsxParser autoCloseVoidElements key={42} onError={(e: any) => console.log('PARSE error', e)} renderInWrapper={false} jsx={StrCast(this._htmlOverlayText)} />
                        </div>,
                        { ...(this._htmlOverlayEffect ?? {}), presentation_effect: effect ?? PresEffect.Expand },
                        this.Document
                    )}
                </div>
            </div>
        );
    };

    render() {
        TraceMobx();
        const xshift = Math.abs(this.Xshift) <= 0.001 ? this._props.PanelWidth() : undefined;
        const yshift = Math.abs(this.Yshift) <= 0.001 ? this._props.PanelHeight() : undefined;

        return (
            <div
                id={this.ViewGuid}
                className="contentFittingDocumentView"
                onPointerEnter={action(() => {
                    this._isHovering = true;
                })}
                onPointerLeave={action(() => {
                    this._isHovering = false;
                })}>
                {!this.Document || !this._props.PanelWidth() ? null : (
                    <div
                        className="contentFittingDocumentView-previewDoc"
                        style={{
                            transform: `translate(${this.centeringX}px, ${this.centeringY}px)`,
                            width: xshift ?? `${this._props.PanelWidth() - this.Xshift * 2}px`,
                            height: this._props.forceAutoHeight ? undefined : (yshift ?? (this.layout_fitWidth ? `${this.panelHeight}px` : `${(this.effectiveNativeHeight / this.effectiveNativeWidth) * this._props.PanelWidth()}px`)),
                        }}>
                        <DocumentViewInternal
                            {...this._props}
                            reactParent={undefined}
                            isHovering={this.isHovering}
                            fieldKey={this.LayoutFieldKey}
                            DataTransition={this.DataTransition}
                            DocumentView={this.selfView}
                            docViewPath={this.docViewPath}
                            PanelWidth={this.PanelWidth}
                            PanelHeight={this.PanelHeight}
                            NativeWidth={this.NativeWidth}
                            NativeHeight={this.NativeHeight}
                            NativeDimScaling={this.NativeDimScaling}
                            isSelected={this.isSelected}
                            select={this.select}
                            fitWidth={this.layout_fitWidthFunc}
                            ScreenToLocalTransform={this.screenToContentsTransform}
                            focus={this._props.focus || emptyFunction}
                            ref={action((r: DocumentViewInternal | null) => {
                                r && (this._docViewInternal = r);
                            })}
                        />
                        {this.htmlOverlay()}
                        {this.ComponentView?.infoUI?.()}
                    </div>
                )}
                {/* display link count button */}
                <DocumentLinksButton hideCount={this.hideLinkCount} View={this} scaling={this.screenToLocalScale} OnHover Bottom={this.topMost} ShowCount />
            </div>
        );
    }

    public static SetViewTransition(docs: Doc[], transProp: string, timeInMs: number, timer?: NodeJS.Timeout | undefined, afterTrans?: () => void, dataTrans = false) {
        docs.forEach(doc => {
            doc._viewTransition = `${transProp} ${timeInMs}ms`;
            dataTrans && (doc.dataTransition = `${transProp} ${timeInMs}ms`);
        });
        timer && clearTimeout(timer);
        return setTimeout(
            () =>
                docs.forEach(doc => {
                    doc._viewTransition = undefined;
                    dataTrans && (doc.dataTransition = 'inherit');
                    afterTrans?.();
                }),
            timeInMs + 10
        );
    }

    // shows a stacking view collection (by default, but the user can change) of all documents linked to the source
    public static showBackLinks(linkAnchor: Doc) {
        const docId = ClientUtils.CurrentUserEmail() + Doc.GetProto(linkAnchor)[Id] + '-pivotish';
        // prettier-ignore
        DocServer.GetRefField(docId).then(docx =>
            DocumentView.SetLightboxDoc(
                (docx as Doc) ?? // reuse existing pivot view of documents, or else create a new collection
                Docs.Create.StackingDocument([], { title: linkAnchor.title + '-pivot', _width: 500, _height: 500, target: linkAnchor, onViewMounted: ScriptField.MakeScript('updateLinkCollection(this, this.target)') }, docId)
            )
        );
    }

    public static FocusOrOpen(docIn: Doc, optionsIn: FocusViewOptions = { willZoomCentered: true, zoomScale: 0, openLocation: OpenWhere.toggleRight }, containingDoc?: Doc) {
        let doc = docIn;
        const options = optionsIn;
        const func = () => {
            const cv = DocumentView.getDocumentView(containingDoc);
            const dv = DocumentView.getDocumentView(doc, cv);
            if (dv && (!containingDoc || dv.containerViewPath?.().lastElement()?.Document === containingDoc)) {
                DocumentView.showDocumentView(dv, options).then(() => dv && Doc.linkFollowHighlight(dv.Document));
            } else {
                const container = DocCast(containingDoc ?? doc.embedContainer ?? Doc.BestEmbedding(doc));
                const showDoc = !Doc.IsSystem(container) && !cv ? container : doc;
                options.toggleTarget = undefined;
                DocumentView.showDocument(showDoc, options, () => DocumentView.showDocument(doc, { ...options, openLocation: undefined })).then(() => {
                    const cvFound = DocumentView.getDocumentView(containingDoc);
                    const dvFound = DocumentView.getDocumentView(doc, cvFound);
                    dvFound && Doc.linkFollowHighlight(dvFound.Document);
                });
            }
        };
        if (Doc.IsDataProto(doc) && Doc.GetEmbeddings(doc).some(embed => embed.hidden && [AclAdmin, AclEdit].includes(GetEffectiveAcl(embed)))) {
            doc = Doc.GetEmbeddings(doc).find(embed => embed.hidden && [AclAdmin, AclEdit].includes(GetEffectiveAcl(embed)))!;
        }
        if (doc.hidden) {
            doc.hidden = false;
            options.toggleTarget = false;
            setTimeout(func);
        } else func();
    }
}

export function ActiveFillColor(): string { 
    const dv = DocumentView.Selected().lastElement() ?.Document._layout_isSvg ? DocumentView.Selected().lastElement() : undefined;
    return StrCast(dv?.Document.fillColor, StrCast(ActiveInkPen()?.activeFillColor, "")); 
} // prettier-ignore
export function ActiveInkPen(): Doc { return Doc.UserDoc(); } // prettier-ignore
export function ActiveInkColor(): string { return StrCast(ActiveInkPen()?.activeInkColor, 'black'); } // prettier-ignore
export function ActiveIsInkMask(): boolean { return BoolCast(ActiveInkPen()?.activeIsInkMask, false); } // prettier-ignore
export function ActiveInkHideTextLabels(): boolean { return BoolCast(ActiveInkPen().activeInkHideTextLabels, false); } // prettier-ignore
export function ActiveArrowStart(): string { return StrCast(ActiveInkPen()?.activeArrowStart, ''); } // prettier-ignore
export function ActiveArrowEnd(): string { return StrCast(ActiveInkPen()?.activeArrowEnd, ''); } // prettier-ignore
export function ActiveArrowScale(): number { return NumCast(ActiveInkPen()?.activeArrowScale, 1); } // prettier-ignore
export function ActiveDash(): string { return StrCast(ActiveInkPen()?.activeDash, '0'); } // prettier-ignore
export function ActiveInkWidth(): number { return Number(ActiveInkPen()?.activeInkWidth); } // prettier-ignore
export function ActiveInkBezierApprox(): string { return StrCast(ActiveInkPen()?.activeInkBezier); } // prettier-ignore
export function ActiveEraserWidth(): number { return Number(ActiveInkPen()?.eraserWidth); } // prettier-ignore

export function SetActiveInkWidth(width: string): void {
    !isNaN(parseInt(width)) && ActiveInkPen() && (ActiveInkPen().activeInkWidth = width);
}
export function SetActiveBezierApprox(bezier: string): void {
    ActiveInkPen() && (ActiveInkPen().activeInkBezier = isNaN(parseInt(bezier)) ? '' : bezier);
}
export function SetActiveInkColor(value: string) {
    ActiveInkPen() && (ActiveInkPen().activeInkColor = value);
}
export function SetActiveIsInkMask(value: boolean) {
    ActiveInkPen() && (ActiveInkPen().activeIsInkMask = value);
}
export function SetActiveInkHideTextLabels(value: boolean) {
    ActiveInkPen() && (ActiveInkPen().activeInkHideTextLabels = value);
}
export function SetActiveFillColor(value: string) {
    ActiveInkPen() && (ActiveInkPen().activeFillColor = value);
}
export function SetActiveArrowStart(value: string) {
    ActiveInkPen() && (ActiveInkPen().activeArrowStart = value);
}
export function SetActiveArrowEnd(value: string) {
    ActiveInkPen() && (ActiveInkPen().activeArrowEnd = value);
}
export function SetActiveArrowScale(value: number) {
    ActiveInkPen() && (ActiveInkPen().activeArrowScale = value);
}
export function SetActiveDash(dash: string): void {
    !isNaN(parseInt(dash)) && ActiveInkPen() && (ActiveInkPen().activeDash = dash);
}
export function SetEraserWidth(width: number): void {
    ActiveInkPen() && (ActiveInkPen().eraserWidth = width);
}

// eslint-disable-next-line prefer-arrow-callback
ScriptingGlobals.add(function DocFocusOrOpen(docIn: Doc, optionsIn?: FocusViewOptions, containingDoc?: Doc) {
    return DocumentView.FocusOrOpen(docIn, optionsIn, containingDoc);
});

// eslint-disable-next-line prefer-arrow-callback
ScriptingGlobals.add(function deiconifyView(documentView: DocumentView) {
    documentView.iconify();
    documentView.select(false);
});

// eslint-disable-next-line prefer-arrow-callback
ScriptingGlobals.add(function toggleDetail(dv: DocumentView, detailLayoutKeySuffix: string) {
    dv.toggleDetail(detailLayoutKeySuffix);
});

// eslint-disable-next-line prefer-arrow-callback
ScriptingGlobals.add(function updateLinkCollection(linkCollection: Doc, linkSource: Doc) {
    const collectedLinks = DocListCast(linkCollection[DocData].data);
    let wid = NumCast(linkSource._width);
    let embedding: Doc | undefined;
    const links = Doc.Links(linkSource);
    links.forEach(link => {
        const other = Doc.getOppositeAnchor(link, linkSource);
        const otherdoc = DocCast(other?.annotationOn ?? other);
        if (otherdoc && !collectedLinks?.some(d => Doc.AreProtosEqual(d, otherdoc))) {
            embedding = Doc.MakeEmbedding(otherdoc);
            embedding.x = wid;
            embedding.y = 0;
            embedding._lockedPosition = false;
            wid += NumCast(otherdoc._width);
            Doc.AddDocToList(Doc.GetProto(linkCollection), 'data', embedding);
        }
    });
    embedding && UPDATE_SERVER_CACHE(); // if a new embedding was made, update the client's server cache so that it will not come back as a promise
    return links;
});
// eslint-disable-next-line prefer-arrow-callback
ScriptingGlobals.add(function updateTagsCollection(collection: Doc) {
    const tag = StrCast(collection.title).split('-->')[1];
    const matchedTags = Array.from(SearchUtil.SearchCollection(Doc.MyFilesystem, tag, false, ['tags']).keys());
    const collectionDocs = DocListCast(collection[DocData].data).concat(collection);
    let wid = 100;
    let created = false;
    const matchedDocs = matchedTags
        .filter(tagDoc => !Doc.AreProtosEqual(collection, tagDoc))
        .reduce((aset, tagDoc) => {
            let embedding = Array.from(aset).find(doc => Doc.AreProtosEqual(tagDoc, doc)) ?? collectionDocs.find(doc => Doc.AreProtosEqual(tagDoc, doc));
            if (!embedding) {
                embedding = Doc.MakeEmbedding(tagDoc);
                embedding.x = wid;
                embedding.y = 0;
                embedding._lockedPosition = false;
                wid += NumCast(tagDoc._width);
                created = true;
            }
            Doc.SetContainer(embedding, collection);
            aset.add(embedding);
            return aset;
        }, new Set<Doc>());

    created && (collection[DocData].data = new List<Doc>(Array.from(matchedDocs)));
    return true;
});