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

import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { action, computed, IReactionDisposer, observable, reaction, runInAction, trace } from 'mobx';
import { observer } from 'mobx-react';
import { computedFn } from 'mobx-utils';
import { Bounce, Fade, Flip, LightSpeed, Roll, Rotate, Zoom } from 'react-reveal';
import { Doc, DocListCast, Field, Opt, StrListCast } from '../../../fields/Doc';
import { AclPrivate, Animation, AudioPlay, DocData, Width } from '../../../fields/DocSymbols';
import { Id } from '../../../fields/FieldSymbols';
import { InkTool } from '../../../fields/InkField';
import { List } from '../../../fields/List';
import { RefField } from '../../../fields/RefField';
import { listSpec } from '../../../fields/Schema';
import { ScriptField } from '../../../fields/ScriptField';
import { BoolCast, Cast, DocCast, ImageCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
import { AudioField } from '../../../fields/URLField';
import { GetEffectiveAcl, TraceMobx } from '../../../fields/util';
import { emptyFunction, isTargetChildOf as isParentOf, lightOrDark, returnEmptyString, returnFalse, returnTrue, returnVal, simulateMouseClick, Utils } from '../../../Utils';
import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils';
import { DocServer } from '../../DocServer';
import { DocOptions, Docs, DocUtils, FInfo } from '../../documents/Documents';
import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
import { Networking } from '../../Network';
import { DictationManager } from '../../util/DictationManager';
import { DocumentManager } from '../../util/DocumentManager';
import { DragManager, dropActionType } from '../../util/DragManager';
import { InteractionUtils } from '../../util/InteractionUtils';
import { FollowLinkScript } from '../../util/LinkFollower';
import { LinkManager } from '../../util/LinkManager';
import { ScriptingGlobals } from '../../util/ScriptingGlobals';
import { SelectionManager } from '../../util/SelectionManager';
import { SettingsManager } from '../../util/SettingsManager';
import { SharingManager } from '../../util/SharingManager';
import { SnappingManager } from '../../util/SnappingManager';
import { Transform } from '../../util/Transform';
import { undoBatch, UndoManager } from '../../util/UndoManager';
import { ContextMenu } from '../ContextMenu';
import { ContextMenuProps } from '../ContextMenuItem';
import { DocComponent } from '../DocComponent';
import { EditableView } from '../EditableView';
import { GestureOverlay } from '../GestureOverlay';
import { InkingStroke } from '../InkingStroke';
import { LightboxView } from '../LightboxView';
import { StyleProp } from '../StyleProvider';
import { UndoStack } from '../UndoStack';
import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
import { DocumentContentsView, ObserverJsxParser } from './DocumentContentsView';
import { DocumentLinksButton } from './DocumentLinksButton';
import './DocumentView.scss';
import { FieldViewProps } from './FieldView';
import { FormattedTextBox } from './formattedText/FormattedTextBox';
import { LinkAnchorBox } from './LinkAnchorBox';
import { PresEffect, PresEffectDirection } from './trails';
import { PinProps, PresBox } from './trails/PresBox';
import React = require('react');
import { KeyValueBox } from './KeyValueBox';
import { LinkBox } from './LinkBox';
import { FilterPanel } from '../FilterPanel';
import { Dropdown, DropdownType, Type } from 'browndash-components';
const { Howl } = require('howler');

interface Window {
    MediaRecorder: MediaRecorder;
}

declare class MediaRecorder {
    // whatever MediaRecorder has
    constructor(e: any);
}

export enum OpenWhere {
    lightbox = 'lightbox',
    add = 'add',
    addLeft = 'add:left',
    addRight = 'add:right',
    addBottom = 'add:bottom',
    close = 'close',
    toggle = 'toggle',
    toggleRight = 'toggle:right',
    replace = 'replace',
    replaceRight = 'replace:right',
    replaceLeft = 'replace:left',
    inParent = 'inParent',
    inParentFromScreen = 'inParentFromScreen',
    overlay = 'overlay',
}
export enum OpenWhereMod {
    none = '',
    left = 'left',
    right = 'right',
    top = 'top',
    bottom = 'bottom',
    rightKeyValue = 'rightKeyValue',
}

export interface DocFocusOptions {
    willPan?: boolean; // determines whether to pan to target document
    willZoomCentered?: boolean; // determines whether to zoom in on target document.  if zoomScale is 0, this just centers the document
    zoomScale?: number; // percent of containing frame to zoom into document
    zoomTime?: number;
    didMove?: boolean; // whether a document was changed during the showDocument process
    docTransform?: Transform; // when a document can't be panned and zoomed within its own container (say a group), then we need to continue to move up the render hierarchy to find something that can pan and zoom.  when this happens the docTransform must accumulate all the transforms of each level of the hierarchy
    instant?: boolean; // whether focus should happen instantly (as opposed to smooth zoom)
    preview?: boolean; // whether changes should be previewed by the componentView or written to the document
    effect?: Doc; // animation effect for focus
    noSelect?: boolean; // whether target should be selected after focusing
    playAudio?: boolean; // whether to play audio annotation on focus
    playMedia?: boolean; // whether to play start target videos
    openLocation?: OpenWhere; // where to open a missing document
    zoomTextSelections?: boolean; // whether to display a zoomed overlay of anchor text selections
    toggleTarget?: boolean; // whether to toggle target on and off
    anchorDoc?: Doc; // doc containing anchor info to apply at end of focus to target doc
    easeFunc?: 'linear' | 'ease'; // transition method for scrolling
}
export type DocFocusFunc = (doc: Doc, options: DocFocusOptions) => Opt<number>;
export type StyleProviderFunc = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string) => any;
export interface DocComponentView {
    updateIcon?: () => void; // updates the icon representation of the document
    getAnchor?: (addAsAnnotation: boolean, pinData?: PinProps) => Doc; // returns an Anchor Doc that represents the current state of the doc's componentview (e.g., the current playhead location of a an audio/video box)
    restoreView?: (viewSpec: Doc) => boolean;
    scrollPreview?: (docView: DocumentView, doc: Doc, focusSpeed: number, options: DocFocusOptions) => Opt<number>; // returns the duration of the focus
    brushView?: (view: { width: number; height: number; panX: number; panY: number }, transTime: number) => void; // highlight a region of a view (used by freeforms)
    getView?: (doc: Doc) => Promise<Opt<DocumentView>>; // returns a nested DocumentView for the specified doc or undefined
    addDocTab?: (doc: Doc, where: OpenWhere) => boolean; // determines how to add a document - used in following links to open the target ina local lightbox
    addDocument?: (doc: Doc | Doc[], annotationKey?: string) => boolean; // add a document (used only by collections)
    reverseNativeScaling?: () => boolean; // DocumentView's setup screenToLocal based on the doc having a nativeWidth/Height.  However, some content views (e.g., FreeFormView w/ fitContentsToBox set) may ignore the native dimensions so this flags the DocumentView to not do Nativre scaling.
    shrinkWrap?: () => void; // requests a document to display all of its contents with no white space.  currently only implemented (needed?) for freeform views
    select?: (ctrlKey: boolean, shiftKey: boolean) => void;
    focus?: (textAnchor: Doc, options: DocFocusOptions) => Opt<number>;
    menuControls?: () => JSX.Element; // controls to display in the top menu bar when the document is selected.
    isAnyChildContentActive?: () => boolean; // is any child content of the document active
    onClickScriptDisable?: () => 'never' | 'always'; // disable click scripts : never, always, or undefined = only when selected
    getKeyFrameEditing?: () => boolean; // whether the document is in keyframe editing mode (if it is, then all hidden documents that are not active at the keyframe time will still be shown)
    setKeyFrameEditing?: (set: boolean) => void; // whether the document is in keyframe editing mode (if it is, then all hidden documents that are not active at the keyframe time will still be shown)
    playFrom?: (time: number, endTime?: number) => void;
    Pause?: () => void; // pause a media document (eg, audio/video)
    IsPlaying?: () => boolean; // is a media document playing
    TogglePause?: (keep?: boolean) => void; // toggle media document playing state
    setFocus?: () => void; // sets input focus to the componentView
    setData?: (data: Field | Promise<RefField | undefined>) => boolean;
    componentUI?: (boundsLeft: number, boundsTop: number) => JSX.Element | null;
    incrementalRendering?: () => void;
    layout_fitWidth?: () => boolean; // whether the component always fits width (eg, KeyValueBox)
    overridePointerEvents?: () => 'all' | 'none' | undefined; // if the conmponent overrides the pointer events for the document
    fieldKey?: string;
    annotationKey?: string;
    getTitle?: () => string;
    getCenter?: (xf: Transform) => { X: number; Y: number };
    screenBounds?: () => { left: number; top: number; right: number; bottom: number; center?: { X: number; Y: number } };
    ptToScreen?: (pt: { X: number; Y: number }) => { X: number; Y: number };
    ptFromScreen?: (pt: { X: number; Y: number }) => { X: number; Y: number };
    snapPt?: (pt: { X: number; Y: number }, excludeSegs?: number[]) => { nearestPt: { X: number; Y: number }; distance: number };
    search?: (str: string, bwd?: boolean, clear?: boolean) => boolean;
}
// These props are passed to both FieldViews and DocumentViews
export interface DocumentViewSharedProps {
    fieldKey?: string; // only used by FieldViews but helpful here to allow styleProviders to access fieldKey of FieldViewProps.  In priniciple, passing a fieldKey to a documentView could override or be the default fieldKey for fieldViews
    DocumentView?: () => DocumentView;
    renderDepth: number;
    Document: Doc;
    DataDoc?: Doc;
    fitContentsToBox?: () => boolean; // used by freeformview to fit its contents to its panel. corresponds to _freeform_fitContentsToBox property on a Document
    suppressSetHeight?: boolean;
    setContentView?: (view: DocComponentView) => any;
    CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView;
    PanelWidth: () => number;
    PanelHeight: () => number;
    shouldNotScale?: () => boolean;
    docViewPath: () => DocumentView[];
    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.
    dataTransition?: string; // specifies animation transition - used by collectionPile and potentially other layout engines when changing the size of documents so that the change won't be abrupt
    styleProvider: Opt<StyleProviderFunc>;
    setTitleFocus?: () => void;
    focus: DocFocusFunc;
    layout_fitWidth?: (doc: Doc) => boolean | undefined;
    childFilters: () => string[];
    childFiltersByRanges: () => string[];
    searchFilterDocs: () => Doc[];
    layout_showTitle?: () => string;
    whenChildContentsActiveChanged: (isActive: boolean) => void;
    rootSelected: (outsideReaction?: boolean) => boolean; // whether the root of a template has been selected
    addDocTab: (doc: Doc, where: OpenWhere) => boolean;
    filterAddDocument?: (doc: Doc[]) => boolean; // allows a document that renders a Collection view to filter or modify any documents added to the collection (see PresBox for an example)
    addDocument?: (doc: Doc | Doc[], annotationKey?: string) => boolean;
    removeDocument?: (doc: Doc | Doc[], annotationKey?: string) => boolean;
    moveDocument?: (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[], annotationKey?: string) => boolean) => boolean;
    pinToPres: (document: Doc, pinProps: PinProps) => void;
    ScreenToLocalTransform: () => Transform;
    bringToFront: (doc: Doc, sendToBack?: boolean) => void;
    dragAction?: dropActionType;
    treeViewDoc?: Doc;
    xPadding?: number;
    yPadding?: number;
    dropAction?: dropActionType;
    dontRegisterView?: boolean;
    hideLinkButton?: boolean;
    hideCaptions?: boolean;
    ignoreAutoHeight?: boolean;
    forceAutoHeight?: boolean;
    disableBrushing?: boolean; // should highlighting for this view be disabled when same document in another view is hovered over.
    onClickScriptDisable?: 'never' | 'always'; // undefined = only when selected
    waitForDoubleClickToClick?: () => 'never' | 'always' | undefined;
    defaultDoubleClick?: () => 'default' | 'ignore' | undefined;
    pointerEvents?: () => Opt<string>;
    scriptContext?: any; // can be assigned anything and will be passed as 'scriptContext' to any OnClick script that executes on this document
    createNewFilterDoc?: () => void;
    updateFilterDoc?: (doc: Doc) => void;
    dontHideOnDrag?: boolean;
}

// these props are specific to DocuentViews
export interface DocumentViewProps extends DocumentViewSharedProps {
    // properties specific to DocumentViews but not to FieldView
    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;
    isDocumentActive?: () => boolean | undefined; // whether a document should handle pointer events
    isContentActive: () => boolean | undefined; // whether document contents should handle pointer events
    contentPointerEvents?: 'none' | 'all' | 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
    radialMenu?: String[];
    LayoutTemplateString?: string;
    dontCenter?: 'x' | 'y' | 'xy';
    NativeWidth?: () => number;
    NativeHeight?: () => number;
    NativeDimScaling?: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal NOTE: Must also be added to FieldViewProps
    LayoutTemplate?: () => Opt<Doc>;
    contextMenuItems?: () => { script: ScriptField; filter?: ScriptField; label: string; icon: string }[];
    onClick?: () => ScriptField;
    onDoubleClick?: () => ScriptField;
    onPointerDown?: () => ScriptField;
    onPointerUp?: () => ScriptField;
    onBrowseClick?: () => ScriptField | undefined;
    onKey?: (e: React.KeyboardEvent, fieldProps: FieldViewProps) => boolean | undefined;
}

// these props are only available in DocumentViewIntenral
export interface DocumentViewInternalProps extends DocumentViewProps {
    NativeWidth: () => number;
    NativeHeight: () => number;
    isSelected: (outsideReaction?: boolean) => boolean;
    select: (ctrlPressed: boolean, shiftPress?: boolean) => void;
    DocumentView: () => DocumentView;
    viewPath: () => DocumentView[];
}

@observer
export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps>() {
    public static SelectAfterContextMenu = true; //  whether a document should be selected after it's contextmenu is triggered.
    private _disposers: { [name: string]: IReactionDisposer } = {};
    private _doubleClickTimeout: NodeJS.Timeout | undefined;
    private _singleClickFunc: undefined | (() => any);
    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;
    private _holdDisposer?: InteractionUtils.MultiTouchEventDisposer;
    protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;

    @observable _componentView: Opt<DocComponentView>; // needs to be accessed from DocumentView wrapper class
    @observable _animateScaleTime: Opt<number>; // milliseconds for animating between views.  defaults to 300 if not uset
    @observable _animateScalingTo = 0;

    public get animateScaleTime() {
        return this._animateScaleTime ?? 100;
    }
    public get displayName() {
        return 'DocumentView(' + this.props.Document.title + ')';
    } // this makes mobx trace() statements more descriptive
    public get ContentDiv() {
        return this._mainCont.current;
    }
    public get LayoutFieldKey() {
        return Doc.LayoutFieldKey(this.layoutDoc);
    }
    @computed get layout_showTitle() {
        return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.ShowTitle) as Opt<string>;
    }
    @computed get NativeDimScaling() {
        return this.props.NativeDimScaling?.() || 1;
    }
    @computed get thumb() {
        return ImageCast(this.layoutDoc['thumb-frozen'], ImageCast(this.layoutDoc.thumb))?.url?.href.replace('.png', '_m.png');
    }
    @computed get opacity() {
        return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Opacity);
    }
    @computed get boxShadow() {
        return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow);
    }
    @computed get borderRounding() {
        return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BorderRounding);
    }
    @computed get widgetDecorations() {
        TraceMobx();
        return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Decorations);
    }
    @computed get backgroundBoxColor() {
        return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor + ':box');
    }
    @computed get docContents() {
        return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.DocContents);
    }
    @computed get headerMargin() {
        return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin) || 0;
    }
    @computed get layout_showCaption() {
        return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.ShowCaption) || 0;
    }
    @computed get titleHeight() {
        return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.TitleHeight) || 0;
    }
    @computed get pointerEvents(): 'none' | 'all' | 'visiblePainted' | undefined {
        return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents);
    }
    @computed get finalLayoutKey() {
        return StrCast(this.Document.layout_fieldKey, 'layout');
    }
    @computed get nativeWidth() {
        return this.props.NativeWidth();
    }
    @computed get nativeHeight() {
        return this.props.NativeHeight();
    }
    @computed get disableClickScriptFunc() {
        const onScriptDisable = this.props.onClickScriptDisable ?? this._componentView?.onClickScriptDisable?.() ?? this.layoutDoc.onClickScriptDisable;
        // prettier-ignore
        return (
            DocumentView.LongPress ||
            onScriptDisable === 'always' ||
            (onScriptDisable !== 'never' && (this.rootSelected() || this._componentView?.isAnyChildContentActive?.()))
        );
    }
    @computed get onClickHandler() {
        return this.props.onClick?.() ?? this.props.onBrowseClick?.() ?? Cast(this.Document.onClick, ScriptField, Cast(this.layoutDoc.onClick, ScriptField, null));
    }
    @computed get onDoubleClickHandler() {
        return this.props.onDoubleClick?.() ?? Cast(this.layoutDoc.onDoubleClick, ScriptField, null) ?? this.Document.onDoubleClick;
    }
    @computed get onPointerDownHandler() {
        return this.props.onPointerDown?.() ?? ScriptCast(this.Document.onPointerDown);
    }
    @computed get onPointerUpHandler() {
        return this.props.onPointerUp?.() ?? ScriptCast(this.Document.onPointerUp);
    }

    componentWillUnmount() {
        this.cleanupHandlers(true);
    }
    componentDidMount() {
        this.setupHandlers();
    }
    preDropFunc = (e: Event, de: DragManager.DropEvent) => {
        const dropAction = this.layoutDoc.dropAction as dropActionType;
        if (de.complete.docDragData && this.isContentActive() && !this.props.treeViewDoc) {
            dropAction && (de.complete.docDragData.dropAction = dropAction);
            e.stopPropagation();
        }
    };
    setupHandlers() {
        this.cleanupHandlers(false);
        if (this._mainCont.current) {
            this._dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, this.drop.bind(this), this.props.Document, this.preDropFunc);
            this._multiTouchDisposer = InteractionUtils.MakeMultiTouchTarget(this._mainCont.current, this.onTouchStart.bind(this));
            this._holdDisposer = InteractionUtils.MakeHoldTouchTarget(this._mainCont.current, this.handle1PointerHoldStart.bind(this));
        }
    }
    @action
    cleanupHandlers(unbrush: boolean) {
        this._dropDisposer?.();
        this._multiTouchDisposer?.();
        this._holdDisposer?.();
        unbrush && Doc.UnBrushDoc(this.props.Document);
        Object.values(this._disposers).forEach(disposer => disposer?.());
    }

    startDragging(x: number, y: number, dropAction: dropActionType, hideSource = false) {
        if (this._mainCont.current) {
            const views = SelectionManager.Views().filter(dv => dv.docView?._mainCont.current);
            const selected = views.some(dv => dv.rootDoc === this.Document) ? views : [this.props.DocumentView()];
            const dragData = new DragManager.DocumentDragData(selected.map(dv => dv.rootDoc));
            const [left, top] = this.props.ScreenToLocalTransform().scale(this.NativeDimScaling).inverse().transformPoint(0, 0);
            dragData.offset = this.props
                .ScreenToLocalTransform()
                .scale(this.NativeDimScaling)
                .transformDirection(x - left, y - top);
            dragData.dropAction = dropAction;
            dragData.treeViewDoc = this.props.treeViewDoc;
            dragData.removeDocument = this.props.removeDocument;
            dragData.moveDocument = this.props.moveDocument;
            dragData.draggedViews = [this.props.DocumentView()];
            dragData.canEmbed = this.rootDoc.dragAction ?? this.props.dragAction ? true : false;
            DragManager.StartDocumentDrag(
                selected.map(dv => dv.docView!._mainCont.current!),
                dragData,
                x,
                y,
                { hideSource: hideSource || (!dropAction && !this.layoutDoc.onDragStart && !this.props.dontHideOnDrag) }
            ); // this needs to happen after the drop event is processed.
        }
    }

    defaultRestoreTargetView = (docView: DocumentView, anchor: Doc, focusSpeed: number, options: DocFocusOptions) => {
        const targetMatch =
            Doc.AreProtosEqual(anchor, this.rootDoc) || // anchor is this document, so anchor's properties apply to this document
            (DocCast(anchor)?.layout_unrendered && Doc.AreProtosEqual(DocCast(anchor.annotationOn), this.rootDoc)) // the anchor is an layout_unrendered annotation on this document, so anchor properties apply to this document
                ? true
                : false;
        return targetMatch && PresBox.restoreTargetDocView(docView, anchor, focusSpeed) ? focusSpeed : undefined;
    };

    // 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
    };

    public static addDocTabFunc: (doc: Doc, location: OpenWhere) => boolean = returnFalse;

    onClick = action((e: React.MouseEvent | React.PointerEvent) => {
        if (!this.Document.ignoreClick && this.props.renderDepth >= 0 && Utils.isClick(e.clientX, e.clientY, this._downX, this._downY, this._downTime)) {
            let stopPropagate = true;
            let preventDefault = true;
            !this.rootDoc._keepZWhenDragged && this.props.bringToFront(this.rootDoc);
            if (this._doubleTap) {
                const defaultDblclick = this.props.defaultDoubleClick?.() || this.Document.defaultDoubleClick;
                if (this.onDoubleClickHandler?.script) {
                    const { clientX, clientY, shiftKey, altKey, ctrlKey } = e; // or we could call e.persist() to capture variables
                    // prettier-ignore
                    const func = () => this.onDoubleClickHandler.script.run( {
                            this: this.layoutDoc,
                            self: this.rootDoc,
                            scriptContext: this.props.scriptContext,
                            documentView: this.props.DocumentView(),
                            clientX, clientY,  altKey,  shiftKey,  ctrlKey,
                            value: undefined,
                        }, console.log  );
                    UndoManager.RunInBatch(() => (func().result?.select === true ? this.props.select(false) : ''), 'on double click');
                } else if (!Doc.IsSystem(this.rootDoc) && (defaultDblclick === undefined || defaultDblclick === 'default')) {
                    UndoManager.RunInBatch(() => LightboxView.AddDocTab(this.rootDoc, OpenWhere.lightbox), 'double tap');
                    SelectionManager.DeselectAll();
                    Doc.UnBrushDoc(this.props.Document);
                } else {
                    this._singleClickFunc?.();
                }
                this._doubleClickTimeout && clearTimeout(this._doubleClickTimeout);
                this._doubleClickTimeout = undefined;
                this._singleClickFunc = undefined;
            } else {
                let clickFunc: undefined | (() => any);
                if (!this.disableClickScriptFunc && this.onClickHandler?.script) {
                    const { clientX, clientY, shiftKey, altKey, metaKey } = e;
                    const func = () => {
                        // replace default add doc func with this view's add doc func.
                        // to allow override behaviors for how to display links to undisplayed documents.
                        // e.g., if this document is part of a labeled 'lightbox' container, then documents will be shown in place
                        // instead of in the global lightbox
                        const oldFunc = DocumentViewInternal.addDocTabFunc;
                        DocumentViewInternal.addDocTabFunc = this.props.addDocTab;
                        this.onClickHandler?.script.run(
                            {
                                this: this.layoutDoc,
                                self: this.rootDoc,
                                _readOnly_: false,
                                scriptContext: this.props.scriptContext,
                                documentView: this.props.DocumentView(),
                                clientX,
                                clientY,
                                shiftKey,
                                altKey,
                                metaKey,
                            },
                            console.log
                        ).result?.select === true
                            ? this.props.select(false)
                            : '';
                        DocumentViewInternal.addDocTabFunc = oldFunc;
                    };
                    clickFunc = () => UndoManager.RunInBatch(func, 'click ' + this.rootDoc.title);
                } else {
                    // 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 || this.props.Document.rootDocument) && !(e.ctrlKey || e.button > 0)) {
                        stopPropagate = false; // don't stop propagation for field templates -- want the selection to propagate up to the root document of the template
                    }
                    preventDefault = false;
                }
                const sendToBack = e.altKey;
                this._singleClickFunc =
                    // prettier-ignore
                    clickFunc ?? (() => (sendToBack ? this.props.DocumentView().props.bringToFront(this.rootDoc, true) : 
                                                      this._componentView?.select?.(e.ctrlKey || e.metaKey, e.shiftKey) ?? 
                                        this.props.select(e.ctrlKey || e.metaKey || e.shiftKey)));
                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 (!DocumentView.LongPress) {
                    this._singleClickFunc();
                    this._singleClickFunc = undefined;
                }
            }
            stopPropagate && e.stopPropagation();
            preventDefault && e.preventDefault();
        }
    });

    @action
    onPointerDown = (e: React.PointerEvent): void => {
        this._longPressSelector = setTimeout(() => {
            if (DocumentView.LongPress) {
                if (this.rootDoc.undoIgnoreFields) {
                    runInAction(() => (UndoStack.HideInline = !UndoStack.HideInline));
                } else {
                    this.props.select(false);
                }
            }
        }, 1000);
        if (!GestureOverlay.DownDocView) GestureOverlay.DownDocView = this.props.DocumentView();

        this._downX = e.clientX;
        this._downY = e.clientY;
        this._downTime = Date.now();
        if ((Doc.ActiveTool === InkTool.None || this.props.addDocTab === returnFalse) && !(this.props.Document.rootDocument && !(e.ctrlKey || e.button > 0))) {
            // click events stop here if the document is active and no modes are overriding it
            // if this is part of a template, let the event go up to the template root unless right/ctrl clicking
            if (
                // prettier-ignore
                (this.props.isDocumentActive?.() || this.props.isContentActive?.()) &&
                !this.props.onBrowseClick?.() &&
                !this.Document.ignoreClick &&
                e.button === 0 &&
                !Doc.IsInMyOverlay(this.layoutDoc)
            ) {
                e.stopPropagation();
                // don't preventDefault anymore.  Goldenlayout, PDF text selection and RTF text selection all need it to go though
                //if (this.props.isSelected(true) && this.rootDoc.type !== DocumentType.PDF && this.layoutDoc._type_collection !== CollectionViewType.Docking) e.preventDefault();

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

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

        if (!Utils.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) && 'embed') || ((this.Document.dragAction || this.props.dragAction || undefined) as dropActionType));
        }
    };

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

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

        if (this.onPointerUpHandler?.script) {
            this.onPointerUpHandler.script.run({ self: this.rootDoc, this: this.layoutDoc }, console.log);
        } else if (e.button === 0 && Utils.isClick(e.clientX, e.clientY, this._downX, this._downY, this._downTime)) {
            this._doubleTap = (this.onDoubleClickHandler?.script || this.rootDoc.defaultDoubleClick !== 'ignore') && Date.now() - this._lastTap < Utils.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 (DocumentView.LongPress) e.preventDefault();
    };

    @undoBatch
    @action
    toggleFollowLink = (zoom?: boolean, setTargetToggle?: boolean): void => {
        const hadOnClick = this.rootDoc.onClick;
        this.noOnClick();
        this.Document.onClick = hadOnClick ? undefined : FollowLinkScript();
        this.Document.waitForDoubleClickToClick = hadOnClick ? undefined : 'never';
    };
    @undoBatch
    @action
    followLinkOnClick = (): void => {
        this.Document.ignoreClick = false;
        this.Document.onClick = FollowLinkScript();
        this.Document.followLinkToggle = false;
        this.Document.followLinkZoom = false;
        this.Document.followLinkLocation = undefined;
    };
    @undoBatch
    noOnClick = (): void => {
        this.Document.ignoreClick = false;
        this.Document.onClick = Doc.GetProto(this.Document).onClick = undefined;
    };

    @undoBatch deleteClicked = () => this.props.removeDocument?.(this.props.Document);
    @undoBatch setToggleDetail = () =>
        (this.Document.onClick = ScriptField.MakeScript(
            `toggleDetail(documentView, "${StrCast(this.Document.layout_fieldKey)
                .replace('layout_', '')
                .replace(/^layout$/, 'detail')}")`,
            { documentView: 'any' }
        ));

    @undoBatch
    @action
    drop = (e: Event, de: DragManager.DropEvent) => {
        if (this.props.dontRegisterView || this.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) return false;
        if (this.props.Document === Doc.ActiveDashboard) {
            e.stopPropagation();
            e.preventDefault();
            alert(
                (e.target as any)?.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. Drop link on document content.'
            );
            return true;
        }
        const linkdrag = de.complete.annoDragData ?? de.complete.linkDragData;
        if (linkdrag) {
            linkdrag.linkSourceDoc = linkdrag.linkSourceGetAnchor();
            if (linkdrag.linkSourceDoc && linkdrag.linkSourceDoc !== this.rootDoc) {
                if (de.complete.annoDragData && !de.complete.annoDragData.dropDocument) {
                    de.complete.annoDragData.dropDocument = de.complete.annoDragData.dropDocCreator(undefined);
                }
                if (de.complete.annoDragData || this.rootDoc !== linkdrag.linkSourceDoc.embedContainer) {
                    const dropDoc = de.complete.annoDragData?.dropDocument ?? this._componentView?.getAnchor?.(true) ?? this.rootDoc;
                    de.complete.linkDocument = DocUtils.MakeLink(linkdrag.linkSourceDoc, dropDoc, {}, undefined, [de.x, de.y - 50]);
                    if (de.complete.linkDocument) {
                        de.complete.linkDocument.layout_isSvg = true;
                        this.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView.addDocument(de.complete.linkDocument);
                    }
                }
                e.stopPropagation();
                return true;
            }
        }
        return false;
    };

    @undoBatch
    @action
    makeIntoPortal = () => {
        const portalLink = this.allLinks.find(d => d.link_anchor_1 === this.props.Document && d.link_relationship === 'portal to:portal from');
        if (!portalLink) {
            DocUtils.MakeLink(
                this.props.Document,
                Docs.Create.FreeformDocument([], { _width: NumCast(this.layoutDoc._width) + 10, _height: NumCast(this.layoutDoc._height), _isLightbox: true, _layout_fitWidth: true, title: StrCast(this.props.Document.title) + ' [Portal]' }),
                { link_relationship: 'portal to:portal from' }
            );
        }
        this.Document.followLinkLocation = OpenWhere.lightbox;
        this.Document.onClick = FollowLinkScript();
    };

    importDocument = () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.zip';
        input.onchange = _e => {
            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();
    };

    @action
    onContextMenu = (e?: React.MouseEvent, pageX?: number, pageY?: number) => {
        if (e && this.rootDoc._layout_hideContextMenu && Doc.noviceMode) {
            e.preventDefault();
            e.stopPropagation();
            //!this.props.isSelected(true) && SelectionManager.SelectView(this.props.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) > 3 || Math.abs(this._downY - e?.clientY) > 3)) {
                return;
            }
        }

        const cm = ContextMenu.Instance;
        if (!cm || (e as any)?.nativeEvent?.SchemaHandled || DocumentView.ExploreMode) return;

        if (e && !(e.nativeEvent as any).dash) {
            const onDisplay = () => {
                if (this.rootDoc.type !== DocumentType.MAP) DocumentViewInternal.SelectAfterContextMenu && !this.props.isSelected(true) && SelectionManager.SelectView(this.props.DocumentView(), 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.props.Document.contextMenuScripts, listSpec(ScriptField), []);
        StrListCast(this.Document.contextMenuLabels).forEach((label, i) =>
            cm.addItem({ description: label, event: () => customScripts[i]?.script.run({ documentView: this, this: this.layoutDoc, scriptContext: this.props.scriptContext, self: this.rootDoc }), icon: 'sticky-note' })
        );
        this.props
            .contextMenuItems?.()
            .forEach(item => item.label && cm.addItem({ description: item.label, event: () => item.script.script.run({ this: this.layoutDoc, scriptContext: this.props.scriptContext, self: this.rootDoc }), icon: item.icon as IconProp }));

        if (!this.props.Document.isFolder) {
            const templateDoc = Cast(this.props.Document[StrCast(this.props.Document.layout_fieldKey)], Doc, null);
            const appearance = cm.findByDescription('UI Controls...');
            const appearanceItems: ContextMenuProps[] = appearance && 'subitems' in appearance ? appearance.subitems : [];

            if (this.props.renderDepth === 0) {
                appearanceItems.push({ description: 'Open in Lightbox', event: () => LightboxView.SetLightboxDoc(this.rootDoc), icon: 'hand-point-right' });
            }
            !Doc.noviceMode && templateDoc && appearanceItems.push({ description: 'Open Template   ', event: () => this.props.addDocTab(templateDoc, OpenWhere.addRight), icon: 'eye' });
            !appearance && appearanceItems.length && cm.addItem({ description: 'UI Controls...', subitems: appearanceItems, icon: 'compass' });

            if (!Doc.IsSystem(this.rootDoc) && this.rootDoc.type !== DocumentType.PRES && ![CollectionViewType.Docking, CollectionViewType.Tree].includes(this.rootDoc._type_collection as any)) {
                const existingOnClick = cm.findByDescription('OnClick...');
                const onClicks: ContextMenuProps[] = existingOnClick && 'subitems' in existingOnClick ? existingOnClick.subitems : [];

                if (this.props.bringToFront !== emptyFunction) {
                    const zorders = cm.findByDescription('ZOrder...');
                    const zorderItems: ContextMenuProps[] = zorders && 'subitems' in zorders ? zorders.subitems : [];
                    zorderItems.push({ description: 'Bring to Front', event: () => SelectionManager.Views().forEach(dv => dv.props.bringToFront(dv.rootDoc, false)), icon: 'arrow-up' });
                    zorderItems.push({ description: 'Send to Back', event: () => SelectionManager.Views().forEach(dv => dv.props.bringToFront(dv.rootDoc, true)), icon: 'arrow-down' });
                    zorderItems.push({
                        description: !this.rootDoc._keepZDragged ? 'Keep ZIndex when dragged' : 'Allow ZIndex to change when dragged',
                        event: undoBatch(action(() => (this.rootDoc._keepZWhenDragged = !this.rootDoc._keepZWhenDragged))),
                        icon: 'hand-point-up',
                    });
                    !zorders && cm.addItem({ description: 'Z Order...', addDivider: true, noexpand: true, subitems: zorderItems, icon: 'layer-group' });
                }

                onClicks.push({ description: 'Enter Portal', event: this.makeIntoPortal, icon: 'window-restore' });
                !Doc.noviceMode && onClicks.push({ description: 'Toggle Detail', event: this.setToggleDetail, icon: 'concierge-bell' });

                if (!this.props.treeViewDoc) {
                    if (!this.Document.annotationOn) {
                        const options = cm.findByDescription('Options...');
                        const optionItems: ContextMenuProps[] = options && 'subitems' in options ? options.subitems : [];
                        !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'compass' });

                        onClicks.push({ description: this.onClickHandler ? '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.props.Document, undefined, 'onClick'), 'edit onClick'), icon: 'terminal' });
                        !existingOnClick && cm.addItem({ description: 'OnClick...', noexpand: true, subitems: onClicks, icon: 'mouse-pointer' });
                    } else if (LinkManager.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)')) });
                funcs.push({ description: 'Drag a Copy', icon: 'edit', event: () => this.Document.dragFactory && (this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)')) });
                funcs.push({ description: 'Drag Document', icon: 'edit', event: () => (this.layoutDoc.onDragStart = undefined) });
                cm.addItem({ description: 'OnDrag...', noexpand: true, subitems: funcs, icon: 'asterisk' });
            }

            const more = cm.findByDescription('More...');
            const moreItems = more && 'subitems' in more ? more.subitems : [];
            if (!Doc.IsSystem(this.rootDoc)) {
                if (!Doc.noviceMode) {
                    moreItems.push({ description: 'Make View of Metadata Field', event: () => Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.DataDoc), icon: 'concierge-bell' });
                    moreItems.push({ description: `${this.Document._chromeHidden ? 'Show' : 'Hide'} Chrome`, event: () => (this.Document._chromeHidden = !this.Document._chromeHidden), icon: 'project-diagram' });

                    if (Cast(Doc.GetProto(this.props.Document).data, listSpec(Doc))) {
                        moreItems.push({ description: 'Export to Google Photos Album', event: () => GooglePhotos.Export.CollectionToAlbum({ collection: this.props.Document }).then(console.log), icon: 'caret-square-right' });
                        moreItems.push({ description: 'Tag Child Images via Google Photos', event: () => GooglePhotos.Query.TagChildImages(this.props.Document), icon: 'caret-square-right' });
                        moreItems.push({ description: 'Write Back Link to Album', event: () => GooglePhotos.Transactions.AddTextEnrichment(this.props.Document), icon: 'caret-square-right' });
                    }
                    moreItems.push({ description: 'Copy ID', event: () => Utils.CopyText(Doc.globalServerPath(this.props.Document)), icon: 'fingerprint' });
                }
            }

            !more && moreItems.length && cm.addItem({ description: 'More...', subitems: moreItems, icon: 'compass' });
        }
        const constantItems: ContextMenuProps[] = [];
        if (!Doc.IsSystem(this.rootDoc) && this.rootDoc._type_collection !== CollectionViewType.Docking) {
            constantItems.push({ description: 'Zip Export', icon: 'download', event: async () => Doc.Zip(this.props.Document) });
            (this.rootDoc._type_collection !== CollectionViewType.Docking || !Doc.noviceMode) && constantItems.push({ description: 'Share', event: () => SharingManager.Instance.open(this.props.DocumentView()), icon: 'users' });
            if (this.props.removeDocument && Doc.ActiveDashboard !== this.props.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.props.Document, (OpenWhere.addRight.toString() + 'KeyValue') as OpenWhere), icon: 'table-columns' });
        cm.addItem({ description: 'General...', noexpand: false, subitems: constantItems, icon: 'question' });

        const help = cm.findByDescription('Help...');
        const helpItems: ContextMenuProps[] = help && 'subitems' in help ? 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.props.Document), icon: 'hand-point-right' });
        !Doc.noviceMode && helpItems.push({ description: 'Print DataDoc in Console', event: () => console.log(this.props.Document[DocData]), icon: 'hand-point-right' });

        let documentationDescription: string | undefined = undefined;
        let documentationLink: string | undefined = undefined;
        switch (this.props.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;
        }
        // Add link to help documentation
        if (!this.props.treeViewDoc && 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);
    };

    @computed get _rootSelected() {
        return this.props.isSelected(false) || (this.props.Document.rootDocument && this.props.rootSelected?.(false)) || false;
    }
    rootSelected = (outsideReaction?: boolean) => this._rootSelected;
    panelHeight = () => this.props.PanelHeight() - this.headerMargin;
    screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin);
    onClickFunc: any = () => (this.disableClickScriptFunc ? undefined : this.onClickHandler);
    setHeight = (height: number) => (this.layoutDoc._height = height);
    setContentView = action((view: { getAnchor?: (addAsAnnotation: boolean) => Doc; forward?: () => boolean; back?: () => boolean }) => (this._componentView = view));
    @computed get _isContentActive() {
        //  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 active it or its contents (eg clicking)
        return this.props.isContentActive() === false || this.props.pointerEvents?.() === 'none'
            ? false
            : Doc.ActiveTool !== InkTool.None || SnappingManager.GetIsDragging() || this.rootSelected() || this.rootDoc.forceActive || this._componentView?.isAnyChildContentActive?.() || this.props.isContentActive()
            ? true
            : undefined;
    }
    isContentActive = (): boolean | undefined => this._isContentActive;
    childFilters = () => [...this.props.childFilters(), ...StrListCast(this.layoutDoc.childFilters)];

    /// disable pointer events on content when there's an enabled onClick script (but not the browse script) and the contents aren't forced active, or if contents are marked inactive
    @computed get _contentPointerEvents() {
        if (this.props.contentPointerEvents) return this.props.contentPointerEvents;
        return (!this.disableClickScriptFunc && this.onClickHandler && !this.props.onBrowseClick?.() && this.isContentActive() !== true) || this.isContentActive() === false ? 'none' : this.pointerEvents;
    }
    contentPointerEvents = () => this._contentPointerEvents;
    @computed get contents() {
        TraceMobx();
        const isInk = this.layoutDoc._layout_isSvg && !this.props.LayoutTemplateString;
        return (
            <div
                className="documentView-contentsView"
                style={{
                    pointerEvents: (isInk ? 'none' : this.contentPointerEvents()) ?? 'all',
                    height: this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined,
                }}>
                <DocumentContentsView
                    key={1}
                    {...this.props}
                    pointerEvents={this.contentPointerEvents}
                    docViewPath={this.props.viewPath}
                    setContentView={this.setContentView}
                    childFilters={this.childFilters}
                    NativeDimScaling={this.props.NativeDimScaling}
                    PanelHeight={this.panelHeight}
                    setHeight={!this.props.suppressSetHeight ? this.setHeight : undefined}
                    isContentActive={this.isContentActive}
                    ScreenToLocalTransform={this.screenToLocal}
                    rootSelected={this.rootSelected}
                    onClick={this.onClickFunc}
                    focus={this.props.focus}
                    setTitleFocus={this.setTitleFocus}
                    layout_fieldKey={this.finalLayoutKey}
                />
                {this.layoutDoc.layout_hideAllLinks ? null : this.allLinkEndpoints}
            </div>
        );
    }

    anchorPanelWidth = () => this.props.PanelWidth() || 1;
    anchorPanelHeight = () => this.props.PanelHeight() || 1;
    anchorStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any => {
        // 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?.() ?? [], []).filter(d => d.link_displayLine || Doc.UserDoc().showLinkLines);
                return filtered.some(link => link._link_displayArrow) ? 0 : undefined;
            }
        }
        return this.props.styleProvider?.(doc, props, property);
    };
    // 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 view.
    // For each of these, we create LinkAnchorBox's on the border of the DocumentView.
    @computed get directLinks() {
        TraceMobx();
        return LinkManager.Instance.getAllRelatedLinks(this.rootDoc).filter(
            link =>
                (link.link_matchEmbeddings ? link.link_anchor_1 === this.rootDoc : Doc.AreProtosEqual(link.link_anchor_1 as Doc, this.rootDoc)) ||
                (link.link_matchEmbeddings ? link.link_anchor_2 === this.rootDoc : Doc.AreProtosEqual(link.link_anchor_2 as Doc, this.rootDoc)) ||
                ((link.link_anchor_1 as Doc)?.layout_unrendered && Doc.AreProtosEqual((link.link_anchor_1 as Doc)?.annotationOn as Doc, this.rootDoc)) ||
                ((link.link_anchor_2 as Doc)?.layout_unrendered && Doc.AreProtosEqual((link.link_anchor_2 as Doc)?.annotationOn as Doc, this.rootDoc))
        );
    }
    @computed get allLinks() {
        TraceMobx();
        return LinkManager.Instance.getAllRelatedLinks(this.rootDoc);
    }
    hideLink = computedFn((link: Doc) => () => (link.link_displayLine = false));
    @computed get allLinkEndpoints() {
        // the small blue dots that mark the endpoints of links
        TraceMobx();
        if (this._componentView instanceof KeyValueBox || this.props.hideLinkAnchors || this.layoutDoc.layout_hideLinkAnchors || this.props.dontRegisterView || this.layoutDoc.layout_unrendered) return null;
        const filtered = DocUtils.FilterDocs(this.directLinks, this.props.childFilters?.() ?? [], []).filter(d => d.link_displayLine || Doc.UserDoc().showLinkLines);
        return filtered.map(link => (
            <div className="documentView-anchorCont" key={link[Id]}>
                <DocumentView
                    {...this.props}
                    isContentActive={returnFalse}
                    Document={link}
                    docViewPath={this.props.viewPath}
                    PanelWidth={this.anchorPanelWidth}
                    PanelHeight={this.anchorPanelHeight}
                    dontRegisterView={false}
                    layout_showTitle={returnEmptyString}
                    hideCaptions={true}
                    hideLinkAnchors={true}
                    layout_fitWidth={returnTrue}
                    removeDocument={this.hideLink(link)}
                    styleProvider={this.anchorStyleProvider}
                    LayoutTemplate={undefined}
                    LayoutTemplateString={LinkAnchorBox.LayoutString(`link_anchor_${Doc.LinkEndpoint(link, this.rootDoc)}`)}
                />
            </div>
        ));
    }

    static recordAudioAnnotation(dataDoc: Doc, field: string, onRecording?: (stop: () => void) => void, onEnd?: () => void) {
        let gumStream: any;
        let recorder: any;
        navigator.mediaDevices
            .getUserMedia({
                audio: true,
            })
            .then(function (stream) {
                let audioTextAnnos = Cast(dataDoc[field + '_audioAnnotations_text'], listSpec('string'), null);
                if (audioTextAnnos) audioTextAnnos.push('');
                else audioTextAnnos = dataDoc[field + '_audioAnnotations_text'] = new List<string>(['']);
                DictationManager.Controls.listen({
                    interimHandler: value => (audioTextAnnos[audioTextAnnos.length - 1] = value),
                    continuous: { indefinite: false },
                }).then(results => {
                    if (results && [DictationManager.Controls.Infringed].includes(results)) {
                        DictationManager.Controls.stop();
                    }
                    onEnd?.();
                });

                gumStream = stream;
                recorder = new MediaRecorder(stream);
                recorder.ondataavailable = async (e: any) => {
                    const [{ result }] = await Networking.UploadFilesToServer({ file: e.data });
                    if (!(result instanceof Error)) {
                        const audioField = new AudioField(result.accessPaths.agnostic.client);
                        const audioAnnos = Cast(dataDoc[field + '_audioAnnotations'], listSpec(AudioField), null);
                        if (audioAnnos === undefined) {
                            dataDoc[field + '_audioAnnotations'] = new List([audioField]);
                        } else {
                            audioAnnos.push(audioField);
                        }
                    }
                };
                //runInAction(() => (dataDoc.audioAnnoState = 'recording'));
                recorder.start();
                const stopFunc = () => {
                    recorder.stop();
                    DictationManager.Controls.stop(false);
                    runInAction(() => (dataDoc.audioAnnoState = 'stopped'));
                    gumStream.getAudioTracks()[0].stop();
                };
                if (onRecording) onRecording(stopFunc);
                else setTimeout(stopFunc, 5000);
            });
    }
    playAnnotation = () => {
        const self = this;
        const audioAnnoState = this.dataDoc.audioAnnoState ?? 'stopped';
        const audioAnnos = Cast(this.dataDoc[this.LayoutFieldKey + '_audioAnnotations'], listSpec(AudioField), null);
        const anno = audioAnnos?.lastElement();
        if (anno instanceof AudioField) {
            switch (audioAnnoState) {
                case 'stopped':
                    this.dataDoc[AudioPlay] = new Howl({
                        src: [anno.url.href],
                        format: ['mp3'],
                        autoplay: true,
                        loop: false,
                        volume: 0.5,
                        onend: action(() => (self.dataDoc.audioAnnoState = 'stopped')),
                    });
                    this.dataDoc.audioAnnoState = 'playing';
                    break;
                case 'playing':
                    this.dataDoc[AudioPlay]?.stop();
                    this.dataDoc.audioAnnoState = 'stopped';
                    break;
            }
        }
    };

    captionStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string) => this.props?.styleProvider?.(doc, props, property + ':caption');
    @observable _changingTitleField = false;
    @observable _dropDownInnerWidth = 0;
    fieldsDropdown = (inputOptions: string[], dropdownWidth: number, placeholder: string, onChange: (val: string | number) => void, onClose: () => void) => {
        const filteredOptions = new Set(inputOptions);
        const scaling = this.titleHeight / 30; /* height of Dropdown */
        Object.entries(DocOptions)
            .filter(opts => opts[1].filterable)
            .forEach((pair: [string, FInfo]) => filteredOptions.add(pair[0]));
        filteredOptions.add(StrCast(this.layoutDoc.layout_showTitle));
        const options = Array.from(filteredOptions)
            .filter(f => f)
            .map(facet => ({ val: facet, text: facet }));
        return (
            <div style={{ width: dropdownWidth }}>
                <div
                    ref={action((r: any) => r && (this._dropDownInnerWidth = Number(getComputedStyle(r).width.replace('px', ''))))}
                    onPointerDown={action(e => (this._changingTitleField = true))}
                    style={{ width: 'max-content', transformOrigin: 'left', transform: `scale(${scaling})` }}>
                    <Dropdown
                        activeChanged={action(isOpen => !isOpen && (this._changingTitleField = false))}
                        selectedVal={placeholder}
                        setSelectedVal={onChange}
                        color={SettingsManager.userColor}
                        background={SettingsManager.userVariantColor}
                        type={Type.TERT}
                        closeOnSelect={true}
                        dropdownType={DropdownType.SELECT}
                        items={options}
                        width={100}
                        fillWidth
                    />
                </div>
            </div>
        );
    };
    @computed get innards() {
        TraceMobx();
        const showTitle = this.layout_showTitle?.split(':')[0];
        const showTitleHover = this.layout_showTitle?.includes(':hover');
        const captionView = !this.layout_showCaption ? null : (
            <div
                className="documentView-captionWrapper"
                style={{
                    pointerEvents: this.rootDoc.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.layout_showCaption}
                    styleProvider={this.captionStyleProvider}
                    dontRegisterView={true}
                    noSidebar={true}
                    dontScale={true}
                    renderDepth={this.props.renderDepth}
                    isContentActive={this.isContentActive}
                />
            </div>
        );
        const targetDoc = showTitle?.startsWith('_') ? this.layoutDoc : this.rootDoc;
        const background = StrCast(
            this.layoutDoc.layout_headingColor,
            StrCast(SharingManager.Instance.users.find(u => u.user.email === this.dataDoc.author)?.sharingDoc.headingColor, StrCast(this.layoutDoc.layout_headingColor, StrCast(Doc.SharingDoc().headingColor, SettingsManager.userBackgroundColor)))
        );
        const dropdownWidth = this._titleRef.current?._editing || this._changingTitleField ? Math.max(10, (this._dropDownInnerWidth * this.titleHeight) / 30) : 0;
        const sidebarWidthPercent = +StrCast(this.layoutDoc.layout_sidebarWidthPercent).replace('%', '');
        // 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[;field2[...][:hover]]
        // from the UI, this is done by clicking the title field and prefixin the format with '#'.  eg.,  #field1[;field2;...][:hover]
        const titleView = !showTitle ? null : (
            <div
                className={`documentView-titleWrapper${showTitleHover ? '-hover' : ''}`}
                key="title"
                style={{
                    position: this.headerMargin ? 'relative' : 'absolute',
                    height: this.titleHeight,
                    width: 100 - sidebarWidthPercent + '%',
                    color: background === 'transparent' ? SettingsManager.userColor : lightOrDark(background),
                    background,
                    pointerEvents: (!this.disableClickScriptFunc && this.onClickHandler) || this.Document.ignoreClick ? 'none' : this.isContentActive() || this.props.isDocumentActive?.() ? 'all' : undefined,
                }}>
                {!dropdownWidth
                    ? null
                    : this.fieldsDropdown(
                          [],
                          dropdownWidth,
                          StrCast(this.layoutDoc.layout_showTitle).split(':')[0],
                          action((field: string | number) => {
                              if (this.rootDoc.layout_showTitle) {
                                  this.rootDoc._layout_showTitle = field;
                              } else if (!this.props.layout_showTitle) {
                                  Doc.UserDoc().layout_showTitle = field;
                              }
                              this._changingTitleField = false;
                          }),
                          action(() => (this._changingTitleField = false))
                      )}
                <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 => targetDoc[field.trim()]?.toString())
                            .join(' \\ ')}
                        display="block"
                        oneLine={true}
                        fontSize={(this.titleHeight / 15) * 10}
                        GetValue={() => (showTitle.split(';').length !== 1 ? '#' + showTitle : Field.toKeyValueString(this.rootDoc, showTitle.split(';')[0]))}
                        SetValue={undoBatch((input: string) => {
                            if (input?.startsWith('#')) {
                                if (this.rootDoc.layout_showTitle) {
                                    this.rootDoc._layout_showTitle = input?.substring(1);
                                } else if (!this.props.layout_showTitle) {
                                    Doc.UserDoc().layout_showTitle = input?.substring(1) ?? 'author_date';
                                }
                            } else if (showTitle && !showTitle.includes('Date') && showTitle !== 'author') {
                                KeyValueBox.SetField(targetDoc, showTitle, input);
                            }
                            return true;
                        })}
                    />
                </div>
            </div>
        );
        return this.props.hideTitle || (!showTitle && !this.layout_showCaption) ? (
            this.contents
        ) : (
            <div className="documentView-styleWrapper">
                {' '}
                {!this.headerMargin ? this.contents : titleView}
                {!this.headerMargin ? titleView : this.contents}
                {' ' /* */}
                {captionView}
            </div>
        );
    }

    renderDoc = (style: object) => {
        TraceMobx();
        return !DocCast(this.Document) || GetEffectiveAcl(this.Document[DocData]) === AclPrivate
            ? null
            : this.docContents ?? (
                  <div
                      className="documentView-node"
                      id={this.Document[Id]}
                      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 ? StrCast(this.Document.dataTransition) : `transform ${this.animateScaleTime / 1000}s ease-${this._animateScalingTo < 1 ? 'in' : 'out'}`,
                      }}>
                      {this.innards}
                      {this.widgetDecorations ?? null}
                  </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>, root: Doc) {
        const dir = presEffectDoc?.presentation_effectDirection ?? presEffectDoc?.followLinkAnimDirection;
        const effectProps = {
            left: dir === PresEffectDirection.Left,
            right: dir === PresEffectDirection.Right,
            top: dir === PresEffectDirection.Top,
            bottom: dir === PresEffectDirection.Bottom,
            opposite: true,
            delay: 0,
            duration: Cast(presEffectDoc?.presentation_transition, 'number', Cast(presEffectDoc?.followLinkTransitionTime, 'number', null)),
        };
        //prettier-ignore
        switch (StrCast(presEffectDoc?.presentation_effect, StrCast(presEffectDoc?.followLinkAnimEffect))) {
            default: 
            case PresEffect.None:       return renderDoc;
            case PresEffect.Zoom:       return <Zoom {...effectProps}>{renderDoc}</Zoom>;
            case PresEffect.Fade:       return <Fade {...effectProps}>{renderDoc}</Fade>;
            case PresEffect.Flip:       return <Flip {...effectProps}>{renderDoc}</Flip>;
            case PresEffect.Rotate:     return <Rotate {...effectProps}>{renderDoc}</Rotate>;
            case PresEffect.Bounce:     return <Bounce {...effectProps}>{renderDoc}</Bounce>;
            case PresEffect.Roll:       return <Roll {...effectProps}>{renderDoc}</Roll>;
            case PresEffect.Lightspeed: return <LightSpeed {...effectProps}>{renderDoc}</LightSpeed>;
        }
    }
    @computed get highlighting() {
        return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Highlighting);
    }
    @computed get borderPath() {
        return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BorderPath);
    }
    render() {
        TraceMobx();
        const highlighting = this.highlighting;
        const borderPath = this.borderPath;
        const boxShadow =
            this.props.treeViewDoc || !highlighting
                ? this.boxShadow
                : highlighting && this.borderRounding && highlighting.highlightStyle !== 'dashed'
                ? `0 0 0 ${highlighting.highlightIndex}px ${highlighting.highlightColor}`
                : this.boxShadow || (this.rootDoc.isTemplateForField ? 'black 0.2vw 0.2vw 0.8vw' : undefined);
        const renderDoc = this.renderDoc({
            borderRadius: this.borderRounding,
            outline: highlighting && !this.borderRounding && !highlighting.highlightStroke ? `${highlighting.highlightColor} ${highlighting.highlightStyle} ${highlighting.highlightIndex}px` : 'solid 0px',
            border: highlighting && this.borderRounding && highlighting.highlightStyle === 'dashed' ? `${highlighting.highlightStyle} ${highlighting.highlightColor} ${highlighting.highlightIndex}px` : undefined,
            boxShadow,
            clipPath: borderPath?.clipPath,
        });

        return (
            <div
                className={`${DocumentView.ROOT_DIV} docView-hack`}
                ref={this._mainCont}
                onContextMenu={this.onContextMenu}
                onPointerDown={this.onPointerDown}
                onClick={this.onClick}
                onPointerEnter={e => (!SnappingManager.GetIsDragging() || DragManager.CanEmbed) && Doc.BrushDoc(this.rootDoc)}
                onPointerOver={e => (!SnappingManager.GetIsDragging() || DragManager.CanEmbed) && Doc.BrushDoc(this.rootDoc)}
                onPointerLeave={e => !isParentOf(this.ContentDiv, document.elementFromPoint(e.nativeEvent.x, e.nativeEvent.y)) && Doc.UnBrushDoc(this.rootDoc)}
                style={{
                    borderRadius: this.borderRounding,
                    pointerEvents: this.pointerEvents === 'visiblePainted' ? 'none' : this.pointerEvents,
                }}>
                <>
                    {this._componentView instanceof KeyValueBox ? renderDoc : DocumentViewInternal.AnimationEffect(renderDoc, this.rootDoc[Animation], this.rootDoc)}
                    {borderPath?.jsx}
                </>
            </div>
        );
    }
}

@observer
export class DocumentView extends React.Component<DocumentViewProps> {
    public static ROOT_DIV = 'documentView-effectsWrapper';
    @observable public static Interacting = false;
    @observable public static LongPress = false;
    @observable public static ExploreMode = false;
    @observable public static LastPressedSidebarBtn: Opt<Doc>; // bcz: this is a hack to handle highlighting buttons in the leftpanel menu .. need to find a cleaner approach
    @computed public static get exploreMode() {
        return () => (DocumentView.ExploreMode ? ScriptField.MakeScript('CollectionBrowseClick(documentView, clientX, clientY)', { documentView: 'any', clientX: 'number', clientY: 'number' })! : undefined);
    }
    @observable public docView: DocumentViewInternal | undefined | null;
    @observable public textHtmlOverlay: Opt<string>;
    @observable private _isHovering = false;

    public htmlOverlayEffect = '';
    public get displayName() {
        return 'DocumentView(' + this.props.Document?.title + ')';
    } // this makes mobx trace() statements more descriptive
    public ContentRef = React.createRef<HTMLDivElement>();
    public ViewTimer: NodeJS.Timeout | undefined; // timer for res
    public AnimEffectTimer: NodeJS.Timeout | undefined; // timer for res
    private _disposers: { [name: string]: IReactionDisposer } = {};
    public clearViewTransition = () => {
        this.ViewTimer && clearTimeout(this.ViewTimer);
        this.rootDoc._viewTransition = undefined;
    };
    public startDragging = (x: number, y: number, dropAction: dropActionType, hideSource = false) => this.docView?.startDragging(x, y, dropAction, hideSource);

    public showContextMenu = (pageX: number, pageY: number) => this.docView?.onContextMenu(undefined, pageX, pageY);

    public setAnimEffect = (presEffect: Doc, timeInMs: number, afterTrans?: () => void) => {
        this.AnimEffectTimer && clearTimeout(this.AnimEffectTimer);
        this.rootDoc[Animation] = presEffect;
        this.AnimEffectTimer = setTimeout(() => (this.rootDoc[Animation] = undefined), timeInMs);
    };
    public setViewTransition = (transProp: string, timeInMs: number, afterTrans?: () => void, dataTrans = false) => {
        this.rootDoc._viewTransition = `${transProp} ${timeInMs}ms`;
        if (dataTrans) this.rootDoc._dataTransition = `${transProp} ${timeInMs}ms`;
        this.ViewTimer && clearTimeout(this.ViewTimer);
        return (this.ViewTimer = setTimeout(() => {
            this.rootDoc._viewTransition = undefined;
            this.rootDoc._dataTransition = 'inherit';
            afterTrans?.();
        }, timeInMs + 10));
    };
    public static SetViewTransition(docs: Doc[], transProp: string, timeInMs: number, afterTrans?: () => void, dataTrans = false) {
        docs.forEach(doc => {
            doc._viewTransition = `${transProp} ${timeInMs}ms`;
            dataTrans && (doc.dataTransition = `${transProp} ${timeInMs}ms`);
        });
        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 = Doc.CurrentUserEmail + Doc.GetProto(linkAnchor)[Id] + '-pivotish';
        // prettier-ignore
        DocServer.GetRefField(docId).then(docx =>
            LightboxView.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, updateContentsScript: ScriptField.MakeScript('updateLinkCollection(self, self.target)') }, docId)
            )
        );
    }

    get Document() {
        return this.props.Document;
    }
    get topMost() {
        return this.props.renderDepth === 0;
    }
    get rootDoc() {
        return this.docView?.rootDoc ?? this.Document;
    }
    get dataDoc() {
        return this.docView?.dataDoc ?? this.Document;
    }
    get ContentDiv() {
        return this.docView?.ContentDiv;
    }
    get ComponentView() {
        return this.docView?._componentView;
    }
    get allLinks() {
        return (this.docView?.allLinks || []).filter(link => !link.link_matchEmbeddings || link.link_anchor_1 === this.rootDoc || link.link_anchor_2 === this.rootDoc);
    }
    get LayoutFieldKey() {
        return this.docView?.LayoutFieldKey || 'layout';
    }
    @computed get layout_fitWidth() {
        return this.docView?._componentView?.layout_fitWidth?.() ?? this.props.layout_fitWidth?.(this.rootDoc) ?? this.layoutDoc?.layout_fitWidth;
    }
    @computed get anchorViewDoc() {
        return this.props.LayoutTemplateString?.includes('link_anchor_2') ? DocCast(this.rootDoc['link_anchor_2']) : this.props.LayoutTemplateString?.includes('link_anchor_1') ? DocCast(this.rootDoc['link_anchor_1']) : undefined;
    }
    @computed get hideLinkButton() {
        return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkBtn + (this.isSelected() ? ':selected' : ''));
    }
    @computed get linkCountView() {
        const hideCount = this.props.renderDepth === -1 || SnappingManager.GetIsDragging() || (this.isSelected() && this.props.renderDepth) || !this._isHovering || this.hideLinkButton;
        return hideCount ? null : <DocumentLinksButton View={this} scaling={this.scaleToScreenSpace} OnHover={true} Bottom={this.topMost} ShowCount={true} />;
    }
    @computed get docViewPath(): DocumentView[] {
        return this.props.docViewPath ? [...this.props.docViewPath(), this] : [this];
    }
    @computed get layoutDoc() {
        return Doc.Layout(this.Document, this.props.LayoutTemplate?.());
    }
    @computed get nativeWidth() {
        return this.docView?._componentView?.reverseNativeScaling?.() ? 0 : returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, !this.layout_fitWidth));
    }
    @computed get nativeHeight() {
        return this.docView?._componentView?.reverseNativeScaling?.() ? 0 : returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, !this.layout_fitWidth));
    }
    @computed get shouldNotScale() {
        return this.props.shouldNotScale?.() || (this.layout_fitWidth && !this.nativeWidth) || [CollectionViewType.Docking].includes(this.Document._type_collection as any);
    }
    @computed get effectiveNativeWidth() {
        return this.shouldNotScale ? 0 : this.nativeWidth || NumCast(this.layoutDoc.width);
    }
    @computed get effectiveNativeHeight() {
        return this.shouldNotScale ? 0 : this.nativeHeight || NumCast(this.layoutDoc.height);
    }
    @computed 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 get panelWidth() {
        return this.effectiveNativeWidth ? this.effectiveNativeWidth * this.nativeScaling : this.props.PanelWidth();
    }
    @computed get panelHeight() {
        if (this.effectiveNativeHeight && (!this.layout_fitWidth || !this.layoutDoc.nativeHeightUnfrozen)) {
            return Math.min(this.props.PanelHeight(), this.effectiveNativeHeight * this.nativeScaling);
        }
        return this.props.PanelHeight();
    }
    @computed get Xshift() {
        return this.effectiveNativeWidth ? Math.max(0, (this.props.PanelWidth() - this.effectiveNativeWidth * this.nativeScaling) / 2) : 0;
    }
    @computed get Yshift() {
        return this.effectiveNativeWidth &&
            this.effectiveNativeHeight &&
            Math.abs(this.Xshift) < 0.001 &&
            (!this.layoutDoc.nativeHeightUnfrozen || (!this.layout_fitWidth && this.effectiveNativeHeight * this.nativeScaling <= this.props.PanelHeight()))
            ? Math.max(0, (this.props.PanelHeight() - this.effectiveNativeHeight * this.nativeScaling) / 2)
            : 0;
    }
    @computed get centeringX() {
        return this.props.dontCenter?.includes('x') ? 0 : this.Xshift;
    }
    @computed get centeringY() {
        return this.props.dontCenter?.includes('y') ? 0 : this.Yshift;
    }

    public toggleNativeDimensions = () => this.docView && this.rootDoc.type !== DocumentType.INK && Doc.toggleNativeDimensions(this.layoutDoc, this.docView.NativeDimScaling, this.props.PanelWidth(), this.props.PanelHeight());
    public getBounds = () => {
        if (!this.docView?.ContentDiv || this.props.treeViewDoc || Doc.AreProtosEqual(this.props.Document, Doc.UserDoc())) {
            return undefined;
        }
        if (this.docView._componentView?.screenBounds) {
            return this.docView._componentView.screenBounds();
        }
        const xf = this.docView.props
            .ScreenToLocalTransform()
            .scale(this.trueNativeWidth() ? this.nativeScaling : 1)
            .inverse();
        const [[left, top], [right, bottom]] = [xf.transformPoint(0, 0), xf.transformPoint(this.panelWidth, this.panelHeight)];

        if (this.docView.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) {
            const docuBox = this.docView.ContentDiv.getElementsByClassName('linkAnchorBox-cont');
            if (docuBox.length) return { ...docuBox[0].getBoundingClientRect(), center: undefined };
        }
        return { left, top, right, bottom, center: this.ComponentView?.getCenter?.(xf) };
    };

    public iconify(finished?: () => void, animateTime?: number) {
        this.ComponentView?.updateIcon?.();
        const animTime = this.docView?._animateScaleTime;
        runInAction(() => this.docView && animateTime !== undefined && (this.docView._animateScaleTime = animateTime));
        const finalFinished = action(() => {
            finished?.();
            this.docView && (this.docView._animateScaleTime = animTime);
        });
        const layout_fieldKey = Cast(this.Document.layout_fieldKey, 'string', null);
        if (layout_fieldKey !== 'layout_icon') {
            this.switchViews(true, 'icon', finalFinished);
            if (layout_fieldKey && layout_fieldKey !== 'layout' && layout_fieldKey !== 'layout_icon') this.Document.deiconifyLayout = layout_fieldKey.replace('layout_', '');
        } else {
            const deiconifyLayout = Cast(this.Document.deiconifyLayout, 'string', null);
            this.switchViews(deiconifyLayout ? true : false, deiconifyLayout, finalFinished);
            this.Document.deiconifyLayout = undefined;
            this.props.bringToFront(this.rootDoc);
        }
    }
    @undoBatch
    @action
    setCustomView = (custom: boolean, layout: string): void => {
        Doc.setNativeView(this.props.Document);
        custom && DocUtils.makeCustomViewClicked(this.props.Document, Docs.Create.StackingDocument, layout, undefined);
    };
    @action
    switchViews = (custom: boolean, view: string, finished?: () => void, useExistingLayout = false) => {
        this.docView && (this.docView._animateScalingTo = 0.1); // shrink doc
        setTimeout(
            action(() => {
                if (useExistingLayout && custom && this.rootDoc['layout_' + view]) {
                    this.rootDoc.layout_fieldKey = 'layout_' + view;
                } else {
                    this.setCustomView(custom, view);
                }
                this.docView && (this.docView._animateScalingTo = 1); // expand it
                setTimeout(
                    action(() => {
                        this.docView && (this.docView._animateScalingTo = 0);
                        finished?.();
                    }),
                    this.docView ? Math.max(0, this.docView.animateScaleTime - 10) : 0
                );
            }),
            this.docView ? Math.max(0, this.docView?.animateScaleTime - 10) : 0
        );
    };

    scaleToScreenSpace = () => (1 / (this.props.NativeDimScaling?.() || 1)) * this.screenToLocalTransform().Scale;
    docViewPathFunc = () => this.docViewPath;
    isSelected = (outsideReaction?: boolean) => SelectionManager.IsSelected(this, outsideReaction);
    select = (extendSelection: boolean) => SelectionManager.SelectView(this, extendSelection);
    NativeWidth = () => this.effectiveNativeWidth;
    NativeHeight = () => this.effectiveNativeHeight;
    PanelWidth = () => this.panelWidth;
    PanelHeight = () => this.panelHeight;
    NativeDimScaling = () => this.nativeScaling;
    selfView = () => this;
    trueNativeWidth = () => returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, false));
    screenToLocalTransform = () =>
        this.props
            .ScreenToLocalTransform()
            .translate(-this.centeringX, -this.centeringY)
            .scale(this.trueNativeWidth() ? 1 / this.nativeScaling : 1);
    componentDidMount() {
        this._disposers.updateContentsScript = reaction(
            () => ScriptCast(this.rootDoc.updateContentsScript)?.script?.run({ this: this.props.Document, self: Cast(this.rootDoc, Doc, null) || this.props.Document }).result,
            output => output
        );
        this._disposers.height = reaction(
            // increase max auto height if document has been resized to be greater than current max
            () => NumCast(this.layoutDoc._height),
            action(height => {
                const docMax = NumCast(this.layoutDoc.layout_maxAutoHeight);
                if (docMax && docMax < height) this.layoutDoc.layout_maxAutoHeight = height;
            })
        );
        !BoolCast(this.props.Document.dontRegisterView, this.props.dontRegisterView) && DocumentManager.Instance.AddView(this);
    }
    componentWillUnmount() {
        Object.values(this._disposers).forEach(disposer => disposer?.());
        !BoolCast(this.props.Document.dontRegisterView, this.props.dontRegisterView) && DocumentManager.Instance.RemoveView(this);
    }
    @computed get htmlOverlay() {
        return !this.textHtmlOverlay ? null : (
            <div className="documentView-htmlOverlay">
                <div className="documentView-htmlOverlayInner">
                    <Fade delay={0} duration={500}>
                        {DocumentViewInternal.AnimationEffect(
                            <div className="webBox-textHighlight">
                                <ObserverJsxParser autoCloseVoidElements={true} key={42} onError={(e: any) => console.log('PARSE error', e)} renderInWrapper={false} jsx={StrCast(this.textHtmlOverlay)} />
                            </div>,
                            { presentation_effect: this.htmlOverlayEffect ?? 'Zoom' } as any as Doc,
                            this.rootDoc
                        )}{' '}
                    </Fade>
                </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 className="contentFittingDocumentView" onPointerEnter={action(() => (this._isHovering = true))} onPointerLeave={action(() => (this._isHovering = false))}>
                {!this.props.Document || !this.props.PanelWidth() ? null : (
                    <div
                        className="contentFittingDocumentView-previewDoc"
                        ref={this.ContentRef}
                        style={{
                            transition: this.props.dataTransition,
                            transform: `translate(${this.centeringX}px, ${this.centeringY}px)`,
                            width: xshift ?? `${(100 * (this.props.PanelWidth() - this.Xshift * 2)) / this.props.PanelWidth()}%`,
                            height: this.props.forceAutoHeight
                                ? undefined
                                : yshift ?? (this.layout_fitWidth ? `${this.panelHeight}px` : `${(((100 * this.effectiveNativeHeight) / this.effectiveNativeWidth) * this.props.PanelWidth()) / this.props.PanelHeight()}%`),
                        }}>
                        <DocumentViewInternal
                            {...this.props}
                            DocumentView={this.selfView}
                            viewPath={this.docViewPathFunc}
                            PanelWidth={this.PanelWidth}
                            PanelHeight={this.PanelHeight}
                            NativeWidth={this.NativeWidth}
                            NativeHeight={this.NativeHeight}
                            NativeDimScaling={this.NativeDimScaling}
                            isSelected={this.isSelected}
                            select={this.select}
                            ScreenToLocalTransform={this.screenToLocalTransform}
                            focus={this.props.focus || emptyFunction}
                            ref={action((r: DocumentViewInternal | null) => r && (this.docView = r))}
                        />
                        {this.htmlOverlay}
                    </div>
                )}

                {this.linkCountView}
            </div>
        );
    }
}

ScriptingGlobals.add(function deiconifyView(documentView: DocumentView) {
    documentView.iconify();
    documentView.select(false);
});

ScriptingGlobals.add(function deiconifyViewToLightbox(documentView: DocumentView) {
    //documentView.iconify(() =>
    LightboxView.AddDocTab(documentView.rootDoc, OpenWhere.lightbox, 'layout'); //, 0);
});

ScriptingGlobals.add(function toggleDetail(dv: DocumentView, detailLayoutKeySuffix: string) {
    if (dv.Document.layout_fieldKey === 'layout_' + detailLayoutKeySuffix) dv.switchViews(false, 'layout');
    else dv.switchViews(true, detailLayoutKeySuffix, undefined, true);
});

ScriptingGlobals.add(function updateLinkCollection(linkCollection: Doc, linkSource: Doc) {
    const collectedLinks = DocListCast(Doc.GetProto(linkCollection).data);
    let wid = linkSource[Width]();
    let embedding: Doc | undefined;
    const links = LinkManager.Links(linkSource);
    links.forEach(link => {
        const other = LinkManager.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 += otherdoc[Width]();
            Doc.AddDocToList(Doc.GetProto(linkCollection), 'data', embedding);
        }
    });
    embedding && DocServer.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;
});