removing decorations on recording box

4 files changed, 1812 insertions, 1803 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 29e088143..bc4fec3f0 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -33,548 +33,552 @@ import React = require("react");
 
 @observer
 export class DocumentDecorations extends React.Component<{ PanelWidth: number, PanelHeight: number, boundsLeft: number, boundsTop: number }, { value: string }> {
-    static Instance: DocumentDecorations;
-    private _resizeHdlId = "";
-    private _keyinput = React.createRef<HTMLInputElement>();
-    private _resizeBorderWidth = 16;
-    private _linkBoxHeight = 20 + 3; // link button height + margin
-    private _titleHeight = 20;
-    private _resizeUndo?: UndoManager.Batch;
-    private _offX = 0; _offY = 0;  // offset from click pt to inner edge of resize border
-    private _snapX = 0; _snapY = 0; // last snapped location of resize border
-    private _dragHeights = new Map<Doc, { start: number, lowest: number }>();
-    private _inkDragDocs: { doc: Doc, x: number, y: number, width: number, height: number }[] = [];
-
-    @observable private _accumulatedTitle = "";
-    @observable private _titleControlString: string = "#title";
-    @observable private _edtingTitle = false;
-    @observable private _hidden = false;
-    @observable public AddToSelection = false; // if Shift is pressed, then this should be set so that clicking on the selection background is ignored so overlapped documents can be added to the selection set.
-    @observable public Interacting = false;
-    @observable public pushIcon: IconProp = "arrow-alt-circle-up";
-    @observable public pullIcon: IconProp = "arrow-alt-circle-down";
-    @observable public pullColor: string = "white";
-
-    constructor(props: any) {
-        super(props);
-        DocumentDecorations.Instance = this;
-        reaction(() => SelectionManager.Views().slice(), action(docs => this._edtingTitle = false));
-    }
-
-    @computed
-    get Bounds() {
-        const views = SelectionManager.Views();
-        return views.filter(dv => dv.props.renderDepth > 0).map(dv => dv.getBounds()).reduce((bounds, rect) =>
-            !rect ? bounds :
-                {
-                    x: Math.min(rect.left, bounds.x),
-                    y: Math.min(rect.top, bounds.y),
-                    r: Math.max(rect.right, bounds.r),
-                    b: Math.max(rect.bottom, bounds.b),
-                    c: views.length === 1 ? rect.center : undefined
-                },
-            { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE, c: undefined as ({ X: number, Y: number } | undefined) });
-    }
-
-    @action
-    titleBlur = () => {
-        this._edtingTitle = false;
-        if (this._accumulatedTitle.startsWith("#") || this._accumulatedTitle.startsWith("=")) {
-            this._titleControlString = this._accumulatedTitle;
-        } else if (this._titleControlString.startsWith("#")) {
-            const titleFieldKey = this._titleControlString.substring(1);
-            UndoManager.RunInBatch(() => titleFieldKey && SelectionManager.Views().forEach(d => {
-                if (titleFieldKey === "title") {
-                    d.dataDoc["title-custom"] = !this._accumulatedTitle.startsWith("-");
-                    if (StrCast(d.rootDoc.title).startsWith("@") && !this._accumulatedTitle.startsWith("@")) {
-                        Doc.RemoveDocFromList(Doc.UserDoc(), "myPublishedDocs", d.rootDoc);
-                    }
-                    if (!StrCast(d.rootDoc.title).startsWith("@") && this._accumulatedTitle.startsWith("@")) {
-                        Doc.AddDocToList(Doc.UserDoc(), "myPublishedDocs", d.rootDoc);
-                    }
-                }
-                //@ts-ignore
-                const titleField = (+this._accumulatedTitle === this._accumulatedTitle ? +this._accumulatedTitle : this._accumulatedTitle);
-                Doc.SetInPlace(d.rootDoc, titleFieldKey, titleField, true);
-
-                if (d.rootDoc.syncLayoutFieldWithTitle) {
-                    const title = titleField.toString();
-                    const curKey = Doc.LayoutFieldKey(d.rootDoc);
-                    if (curKey !== title && d.dataDoc[title] === undefined) {
-                        d.rootDoc.layout = FormattedTextBox.LayoutString(title);
-                        setTimeout(() => {
-                            const val = d.dataDoc[curKey];
-                            d.dataDoc[curKey] = undefined;
-                            d.dataDoc[title] = val;
-                        });
-                    }
-                }
-            }), "title blur");
-        }
-    }
-
-    titleEntered = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter") {
-            e.stopPropagation();
-            (e.target as any).blur();
-        }
-    }
-
-    @action onTitleDown = (e: React.PointerEvent): void => {
-        setupMoveUpEvents(this, e, e => this.onBackgroundMove(true, e), (e) => { }, action((e) => {
-            !this._edtingTitle && (this._accumulatedTitle = this._titleControlString.startsWith("#") ? this.selectionTitle : this._titleControlString);
-            this._edtingTitle = true;
-            this._keyinput.current && setTimeout(this._keyinput.current.focus);
-        }));
-    }
-
-    onBackgroundDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, e => this.onBackgroundMove(false, e), emptyFunction, emptyFunction);
-
-    @action
-    onBackgroundMove = (dragTitle: boolean, e: PointerEvent): boolean => {
-        const dragDocView = SelectionManager.Views()[0];
-        const { left, top } = dragDocView.getBounds() || { left: 0, top: 0 };
-        const dragData = new DragManager.DocumentDragData(SelectionManager.Views().map(dv => dv.props.Document), dragDocView.props.dropAction);
-        dragData.offset = dragDocView.props.ScreenToLocalTransform().transformDirection(e.x - left, e.y - top);
-        dragData.moveDocument = dragDocView.props.moveDocument;
-        dragData.isDocDecorationMove = true;
-        dragData.canEmbed = dragTitle;
-        this._hidden = this.Interacting = true;
-        DragManager.StartDocumentDrag(SelectionManager.Views().map(dv => dv.ContentDiv!), dragData, e.x, e.y, {
-            dragComplete: action(e => {
-                dragData.canEmbed && SelectionManager.DeselectAll();
-                this._hidden = this.Interacting = false;
-            }),
-            hideSource: true
-        });
-        return true;
-    }
-
-    _deleteAfterIconify = false;
-    _iconifyBatch: UndoManager.Batch | undefined;
-    onCloseClick = (forceDeleteOrIconify: boolean | undefined) => {
-        if (this.canDelete) {
-            const views = SelectionManager.Views().slice().filter(v => v);
-            if (forceDeleteOrIconify === false && this._iconifyBatch) return;
-            this._deleteAfterIconify = forceDeleteOrIconify || this._iconifyBatch ? true : false;
-            if (!this._iconifyBatch) {
-                this._iconifyBatch = UndoManager.StartBatch("iconifying");
-            } else {
-                forceDeleteOrIconify = false; // can't force immediate close in the middle of iconifying -- have to wait until iconifying completes
+      static Instance: DocumentDecorations;
+      private _resizeHdlId = "";
+      private _keyinput = React.createRef<HTMLInputElement>();
+      private _resizeBorderWidth = 16;
+      private _linkBoxHeight = 20 + 3; // link button height + margin
+      private _titleHeight = 20;
+      private _resizeUndo?: UndoManager.Batch;
+      private _offX = 0; _offY = 0;  // offset from click pt to inner edge of resize border
+      private _snapX = 0; _snapY = 0; // last snapped location of resize border
+      private _dragHeights = new Map<Doc, { start: number, lowest: number }>();
+      private _inkDragDocs: { doc: Doc, x: number, y: number, width: number, height: number }[] = [];
+
+      @observable private _accumulatedTitle = "";
+      @observable private _titleControlString: string = "#title";
+      @observable private _edtingTitle = false;
+      @observable private _hidden = false;
+      @observable public AddToSelection = false; // if Shift is pressed, then this should be set so that clicking on the selection background is ignored so overlapped documents can be added to the selection set.
+      @observable public Interacting = false;
+      @observable public pushIcon: IconProp = "arrow-alt-circle-up";
+      @observable public pullIcon: IconProp = "arrow-alt-circle-down";
+      @observable public pullColor: string = "white";
+
+      constructor(props: any) {
+            super(props);
+            DocumentDecorations.Instance = this;
+            reaction(() => SelectionManager.Views().slice(), action(docs => this._edtingTitle = false));
+      }
+
+      @computed
+      get Bounds() {
+            const views = SelectionManager.Views();
+            return views.filter(dv => dv.props.renderDepth > 0).map(dv => dv.getBounds()).reduce((bounds, rect) =>
+                  !rect ? bounds :
+                        {
+                              x: Math.min(rect.left, bounds.x),
+                              y: Math.min(rect.top, bounds.y),
+                              r: Math.max(rect.right, bounds.r),
+                              b: Math.max(rect.bottom, bounds.b),
+                              c: views.length === 1 ? rect.center : undefined
+                        },
+                  { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE, c: undefined as ({ X: number, Y: number } | undefined) });
+      }
+
+      @action
+      titleBlur = () => {
+            this._edtingTitle = false;
+            if (this._accumulatedTitle.startsWith("#") || this._accumulatedTitle.startsWith("=")) {
+                  this._titleControlString = this._accumulatedTitle;
+            } else if (this._titleControlString.startsWith("#")) {
+                  const titleFieldKey = this._titleControlString.substring(1);
+                  UndoManager.RunInBatch(() => titleFieldKey && SelectionManager.Views().forEach(d => {
+                        if (titleFieldKey === "title") {
+                              d.dataDoc["title-custom"] = !this._accumulatedTitle.startsWith("-");
+                              if (StrCast(d.rootDoc.title).startsWith("@") && !this._accumulatedTitle.startsWith("@")) {
+                                    Doc.RemoveDocFromList(Doc.UserDoc(), "myPublishedDocs", d.rootDoc);
+                              }
+                              if (!StrCast(d.rootDoc.title).startsWith("@") && this._accumulatedTitle.startsWith("@")) {
+                                    Doc.AddDocToList(Doc.UserDoc(), "myPublishedDocs", d.rootDoc);
+                              }
+                        }
+                        //@ts-ignore
+                        const titleField = (+this._accumulatedTitle === this._accumulatedTitle ? +this._accumulatedTitle : this._accumulatedTitle);
+                        Doc.SetInPlace(d.rootDoc, titleFieldKey, titleField, true);
+
+                        if (d.rootDoc.syncLayoutFieldWithTitle) {
+                              const title = titleField.toString();
+                              const curKey = Doc.LayoutFieldKey(d.rootDoc);
+                              if (curKey !== title && d.dataDoc[title] === undefined) {
+                                    d.rootDoc.layout = FormattedTextBox.LayoutString(title);
+                                    setTimeout(() => {
+                                          const val = d.dataDoc[curKey];
+                                          d.dataDoc[curKey] = undefined;
+                                          d.dataDoc[title] = val;
+                                    });
+                              }
+                        }
+                  }), "title blur");
             }
-            var iconifyingCount = views.length;
-            const finished = action((force?: boolean) => {
-                if ((force || --iconifyingCount === 0) && this._iconifyBatch) {
-                    if (this._deleteAfterIconify) {
-                        views.forEach(iconView => iconView.props.removeDocument?.(iconView.props.Document));
-                        SelectionManager.DeselectAll();
-                    }
-                    this._iconifyBatch?.end();
-                    this._iconifyBatch = undefined;
-                }
+      }
+
+      titleEntered = (e: React.KeyboardEvent) => {
+            if (e.key === "Enter") {
+                  e.stopPropagation();
+                  (e.target as any).blur();
+            }
+      }
+
+      @action onTitleDown = (e: React.PointerEvent): void => {
+            setupMoveUpEvents(this, e, e => this.onBackgroundMove(true, e), (e) => { }, action((e) => {
+                  !this._edtingTitle && (this._accumulatedTitle = this._titleControlString.startsWith("#") ? this.selectionTitle : this._titleControlString);
+                  this._edtingTitle = true;
+                  this._keyinput.current && setTimeout(this._keyinput.current.focus);
+            }));
+      }
+
+      onBackgroundDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, e => this.onBackgroundMove(false, e), emptyFunction, emptyFunction);
+
+      @action
+      onBackgroundMove = (dragTitle: boolean, e: PointerEvent): boolean => {
+            const dragDocView = SelectionManager.Views()[0];
+            const { left, top } = dragDocView.getBounds() || { left: 0, top: 0 };
+            const dragData = new DragManager.DocumentDragData(SelectionManager.Views().map(dv => dv.props.Document), dragDocView.props.dropAction);
+            dragData.offset = dragDocView.props.ScreenToLocalTransform().transformDirection(e.x - left, e.y - top);
+            dragData.moveDocument = dragDocView.props.moveDocument;
+            dragData.isDocDecorationMove = true;
+            dragData.canEmbed = dragTitle;
+            this._hidden = this.Interacting = true;
+            DragManager.StartDocumentDrag(SelectionManager.Views().map(dv => dv.ContentDiv!), dragData, e.x, e.y, {
+                  dragComplete: action(e => {
+                        dragData.canEmbed && SelectionManager.DeselectAll();
+                        this._hidden = this.Interacting = false;
+                  }),
+                  hideSource: true
             });
-            if (forceDeleteOrIconify) finished(forceDeleteOrIconify);
-            else if (!this._deleteAfterIconify) views.forEach(dv => dv.iconify(finished));
-        }
-    }
-    onMaximizeDown = (e: React.PointerEvent) => {
-        setupMoveUpEvents(this, e, () => {
-            DragManager.StartWindowDrag?.(e, [SelectionManager.Views().slice(-1)[0].rootDoc]);
             return true;
-        }, emptyFunction, this.onMaximizeClick, false, false);
-    }
-
-    onMaximizeClick = (e: any): void => {
-        const selectedDocs = SelectionManager.Views();
-        if (selectedDocs.length) {
-            if (e.ctrlKey) {    // open an alias in a new tab with Ctrl Key
-                const bestAlias = DocListCast(selectedDocs[0].props.Document.aliases).find(doc => !doc.context && doc.author === Doc.CurrentUserEmail);
-                CollectionDockingView.AddSplit(bestAlias ?? Doc.MakeAlias(selectedDocs[0].props.Document), "right");
-            } else if (e.shiftKey) {   // open centered in a new workspace with Shift Key
-                const alias = Doc.MakeAlias(selectedDocs[0].props.Document);
-                alias.context = undefined;
-                alias.x = -alias[WidthSym]() / 2;
-                alias.y = -alias[HeightSym]() / 2;
-                CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([alias], { title: "Tab for " + alias.title }), "right");
-            } else if (e.altKey) {    // open same document in new tab
-                CollectionDockingView.ToggleSplit(selectedDocs[0].props.Document, "right");
-            } else {
-                var openDoc = selectedDocs[0].props.Document;
-                if (openDoc.layoutKey === "layout_icon") {
-                    openDoc = DocListCast(openDoc.aliases).find(alias => !alias.context) ?? Doc.MakeAlias(openDoc);
-                    Doc.deiconifyView(openDoc);
-                }
-                LightboxView.SetLightboxDoc(openDoc, undefined, selectedDocs.slice(1).map(view => view.props.Document));
+      }
+
+      _deleteAfterIconify = false;
+      _iconifyBatch: UndoManager.Batch | undefined;
+      onCloseClick = (forceDeleteOrIconify: boolean | undefined) => {
+            if (this.canDelete) {
+                  const views = SelectionManager.Views().slice().filter(v => v);
+                  if (forceDeleteOrIconify === false && this._iconifyBatch) return;
+                  this._deleteAfterIconify = forceDeleteOrIconify || this._iconifyBatch ? true : false;
+                  if (!this._iconifyBatch) {
+                        this._iconifyBatch = UndoManager.StartBatch("iconifying");
+                  } else {
+                        forceDeleteOrIconify = false; // can't force immediate close in the middle of iconifying -- have to wait until iconifying completes
+                  }
+                  var iconifyingCount = views.length;
+                  const finished = action((force?: boolean) => {
+                        if ((force || --iconifyingCount === 0) && this._iconifyBatch) {
+                              if (this._deleteAfterIconify) {
+                                    views.forEach(iconView => iconView.props.removeDocument?.(iconView.props.Document));
+                                    SelectionManager.DeselectAll();
+                              }
+                              this._iconifyBatch?.end();
+                              this._iconifyBatch = undefined;
+                        }
+                  });
+                  if (forceDeleteOrIconify) finished(forceDeleteOrIconify);
+                  else if (!this._deleteAfterIconify) views.forEach(dv => dv.iconify(finished));
             }
-        }
-        SelectionManager.DeselectAll();
-    }
-
-    onIconifyClick = (): void => {
-        SelectionManager.Views().forEach(dv => dv?.iconify());
-        SelectionManager.DeselectAll();
-    }
-
-    onSelectorClick = () => SelectionManager.Views()?.[0]?.props.ContainingCollectionView?.props.select(false);
-
-    onRadiusDown = (e: React.PointerEvent): void => {
-        this._resizeUndo = UndoManager.StartBatch("DocDecs set radius");
-        setupMoveUpEvents(this, e, (e, down) => {
-            const dist = Math.sqrt((e.clientX - down[0]) * (e.clientX - down[0]) + (e.clientY - down[1]) * (e.clientY - down[1]));
-            SelectionManager.Views().map(dv => dv.props.Document).map(doc => doc.layout instanceof Doc ? doc.layout : doc.isTemplateForField ? doc : Doc.GetProto(doc)).
-                map(d => d.borderRounding = `${Math.max(0, dist < 3 ? 0 : dist)}px`);
-            return false;
-        }, (e) => this._resizeUndo?.end(), (e) => { });
-    }
-
-    @action
-    onRotateDown = (e: React.PointerEvent): void => {
-        const rotateUndo = UndoManager.StartBatch("rotatedown");
-        const selectedInk = SelectionManager.Views().filter(i => i.ComponentView instanceof InkingStroke);
-        const centerPoint = !selectedInk.length ? { X: this.Bounds.x, Y: this.Bounds.y } : { X: this.Bounds.c?.X ?? (this.Bounds.x + this.Bounds.r) / 2, Y: this.Bounds.c?.Y ?? (this.Bounds.y + this.Bounds.b) / 2 };
-        setupMoveUpEvents(this, e,
-            (e: PointerEvent, down: number[], delta: number[]) => {
-                const previousPoint = { X: e.clientX, Y: e.clientY };
-                const movedPoint = { X: e.clientX - delta[0], Y: e.clientY - delta[1] };
-                const angle = InkStrokeProperties.angleChange(previousPoint, movedPoint, centerPoint);
-                if (selectedInk.length) {
-                    angle && InkStrokeProperties.Instance.rotateInk(selectedInk, -angle, centerPoint);
-                } else {
-                    SelectionManager.Views().forEach(dv => dv.rootDoc._jitterRotation = NumCast(dv.rootDoc._jitterRotation) - angle * 180 / Math.PI);
-                }
-                return false;
-            },
-            () => {
-                rotateUndo?.end();
-                UndoManager.FilterBatches(["data", "x", "y", "width", "height"]);
-            },
-            emptyFunction);
-    }
-
-    @action
-    onPointerDown = (e: React.PointerEvent): void => {
-        DragManager.docsBeingDragged = SelectionManager.Views().map(dv => dv.rootDoc);
-        this._inkDragDocs = DragManager.docsBeingDragged
-            .filter(doc => doc.type === DocumentType.INK)
-            .map(doc => {
-                if (InkStrokeProperties.Instance._lock) {
-                    Doc.SetNativeHeight(doc, NumCast(doc._height));
-                    Doc.SetNativeWidth(doc, NumCast(doc._width));
-                }
-                return ({ doc, x: NumCast(doc.x), y: NumCast(doc.y), width: NumCast(doc._width), height: NumCast(doc._height) });
-            });
-
-        setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction);
-        this.Interacting = true; // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them
-        this._resizeHdlId = e.currentTarget.className;
-        const bounds = e.currentTarget.getBoundingClientRect();
-        this._offX = this._resizeHdlId.toLowerCase().includes("left") ? bounds.right - e.clientX : bounds.left - e.clientX;
-        this._offY = this._resizeHdlId.toLowerCase().includes("top") ? bounds.bottom - e.clientY : bounds.top - e.clientY;
-        this._resizeUndo = UndoManager.StartBatch("DocDecs resize");
-        this._snapX = e.pageX;
-        this._snapY = e.pageY;
-        const ffviewSet = new Set<CollectionFreeFormView>();
-        SelectionManager.Views().forEach(docView => {
-            const ffview = docView.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView;
-            ffview && ffviewSet.add(ffview);
-            this._dragHeights.set(docView.layoutDoc, { start: NumCast(docView.rootDoc._height), lowest: NumCast(docView.rootDoc._height) });
-        });
-        Array.from(ffviewSet).map(ffview => ffview.setupDragLines(false));
-    }
-
-    onPointerMove = (e: PointerEvent, down: number[], move: number[]): boolean => {
-        const first = SelectionManager.Views()[0];
-        let thisPt = { x: e.clientX - this._offX, y: e.clientY - this._offY };
-        var fixedAspect = Doc.NativeAspect(first.layoutDoc);
-        InkStrokeProperties.Instance._lock && SelectionManager.Views().filter(dv => dv.rootDoc.type === DocumentType.INK)
-            .forEach(dv => fixedAspect = Doc.NativeAspect(dv.rootDoc));
-
-        const resizeHdl = this._resizeHdlId.split(" ")[0];
-        if (fixedAspect && (resizeHdl === "documentDecorations-bottomRightResizer" || resizeHdl === "documentDecorations-topLeftResizer")) { // need to generalize for bl and tr drag handles
-            const project = (p: number[], a: number[], b: number[]) => {
-                const atob = [b[0] - a[0], b[1] - a[1]];
-                const atop = [p[0] - a[0], p[1] - a[1]];
-                const len = atob[0] * atob[0] + atob[1] * atob[1];
-                let dot = atop[0] * atob[0] + atop[1] * atob[1];
-                const t = dot / len;
-                dot = (b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]);
-                return [a[0] + atob[0] * t, a[1] + atob[1] * t];
-            };
-            const tl = first.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-            const drag = project([e.clientX + this._offX, e.clientY + this._offY], tl, [tl[0] + fixedAspect, tl[1] + 1]);
-            thisPt = DragManager.snapDragAspect(drag, fixedAspect);
-        } else {
-            thisPt = DragManager.snapDrag(e, -this._offX, -this._offY, this._offX, this._offY);
-        }
-
-        move[0] = thisPt.x - this._snapX;
-        move[1] = thisPt.y - this._snapY;
-        this._snapX = thisPt.x;
-        this._snapY = thisPt.y;
-        let dragBottom = false, dragRight = false, dragBotRight = false;
-        let dX = 0, dY = 0, dW = 0, dH = 0;
-        switch (this._resizeHdlId.split(" ")[0]) {
-            case "": break;
-            case "documentDecorations-topLeftResizer":
-                dX = -1;
-                dY = -1;
-                dW = -move[0];
-                dH = -move[1];
-                break;
-            case "documentDecorations-topRightResizer":
-                dW = move[0];
-                dY = -1;
-                dH = -move[1];
-                break;
-            case "documentDecorations-topResizer":
-                dY = -1;
-                dH = -move[1];
-                dragBottom = true;
-                break;
-            case "documentDecorations-bottomLeftResizer":
-                dX = -1;
-                dW = -move[0];
-                dH = move[1];
-                break;
-            case "documentDecorations-bottomRightResizer":
-                dW = move[0];
-                dH = move[1];
-                dragBotRight = true;
-                break;
-            case "documentDecorations-bottomResizer":
-                dH = move[1];
-                dragBottom = true;
-                break;
-            case "documentDecorations-leftResizer":
-                dX = -1;
-                dW = -move[0];
-                break;
-            case "documentDecorations-rightResizer":
-                dW = move[0];
-                dragRight = true;
-                break;
-        }
-
-        SelectionManager.Views().forEach(action((docView: DocumentView) => {
-            if (e.ctrlKey && !Doc.NativeHeight(docView.props.Document)) docView.toggleNativeDimensions();
-            if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) {
-                const doc = Document(docView.rootDoc);
-                const nwidth = docView.nativeWidth;
-                const nheight = docView.nativeHeight;
-                const docheight = doc._height || 0;
-                const docwidth = doc._width || 0;
-                const width = docwidth;
-                let height = (docheight || (nheight / nwidth * width));
-                height = !height || isNaN(height) ? 20 : height;
-                const scale = docView.props.ScreenToLocalTransform().Scale;
-                const modifyNativeDim = (e.ctrlKey || doc.forceReflow) && doc.nativeDimModifiable;
-                if (nwidth && nheight) {
-                    if (nwidth / nheight !== width / height && !dragBottom) {
-                        height = nheight / nwidth * width;
-                    }
-                    if (modifyNativeDim && !dragBottom) { // ctrl key enables modification of the nativeWidth or nativeHeight durin the interaction
-                        if (Math.abs(dW) > Math.abs(dH)) dH = dW * nheight / nwidth;
-                        else dW = dH * nwidth / nheight;
-                    }
-                }
-                let actualdW = Math.max(width + (dW * scale), 20);
-                let actualdH = Math.max(height + (dH * scale), 20);
-                const fixedAspect = (nwidth && nheight && !doc._fitWidth);
-                if (fixedAspect) {
-                    if ((Math.abs(dW) > Math.abs(dH) && (!dragBottom || !modifyNativeDim)) || dragRight) {
-                        if (dragRight && modifyNativeDim) {
-                            doc._nativeWidth = actualdW / (doc._width || 1) * Doc.NativeWidth(doc);
-                        } else {
-                            if (!doc._fitWidth) {
-                                actualdH = nheight / nwidth * actualdW;
-                                doc._height = actualdH;
-                            }
-                            else if (!modifyNativeDim || dragBotRight) doc._height = actualdH;
+      }
+      onMaximizeDown = (e: React.PointerEvent) => {
+            setupMoveUpEvents(this, e, () => {
+                  DragManager.StartWindowDrag?.(e, [SelectionManager.Views().slice(-1)[0].rootDoc]);
+                  return true;
+            }, emptyFunction, this.onMaximizeClick, false, false);
+      }
+
+      onMaximizeClick = (e: any): void => {
+            const selectedDocs = SelectionManager.Views();
+            if (selectedDocs.length) {
+                  if (e.ctrlKey) {    // open an alias in a new tab with Ctrl Key
+                        const bestAlias = DocListCast(selectedDocs[0].props.Document.aliases).find(doc => !doc.context && doc.author === Doc.CurrentUserEmail);
+                        CollectionDockingView.AddSplit(bestAlias ?? Doc.MakeAlias(selectedDocs[0].props.Document), "right");
+                  } else if (e.shiftKey) {   // open centered in a new workspace with Shift Key
+                        const alias = Doc.MakeAlias(selectedDocs[0].props.Document);
+                        alias.context = undefined;
+                        alias.x = -alias[WidthSym]() / 2;
+                        alias.y = -alias[HeightSym]() / 2;
+                        CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([alias], { title: "Tab for " + alias.title }), "right");
+                  } else if (e.altKey) {    // open same document in new tab
+                        CollectionDockingView.ToggleSplit(selectedDocs[0].props.Document, "right");
+                  } else {
+                        var openDoc = selectedDocs[0].props.Document;
+                        if (openDoc.layoutKey === "layout_icon") {
+                              openDoc = DocListCast(openDoc.aliases).find(alias => !alias.context) ?? Doc.MakeAlias(openDoc);
+                              Doc.deiconifyView(openDoc);
                         }
-                        doc._width = actualdW;
-                    }
-                    else {
-                        if (dragBottom && (modifyNativeDim ||
-                            (docView.layoutDoc.nativeHeightUnfrozen && docView.layoutDoc._fitWidth))) { // frozen web pages, PDFs, and some RTFS have frozen nativewidth/height.  But they are marked to allow their nativeHeight to be explicitly modified with fitWidth and vertical resizing. (ie, with fitWidth they can't grow horizontally to match a vertical resize so it makes more sense to change their nativeheight even if the ctrl key isn't used)
-                            doc._nativeHeight = actualdH / (doc._height || 1) * Doc.NativeHeight(doc);
-                            doc._autoHeight = false;
+                        LightboxView.SetLightboxDoc(openDoc, undefined, selectedDocs.slice(1).map(view => view.props.Document));
+                  }
+            }
+            SelectionManager.DeselectAll();
+      }
+
+      onIconifyClick = (): void => {
+            SelectionManager.Views().forEach(dv => dv?.iconify());
+            SelectionManager.DeselectAll();
+      }
+
+      onSelectorClick = () => SelectionManager.Views()?.[0]?.props.ContainingCollectionView?.props.select(false);
+
+      onRadiusDown = (e: React.PointerEvent): void => {
+            this._resizeUndo = UndoManager.StartBatch("DocDecs set radius");
+            setupMoveUpEvents(this, e, (e, down) => {
+                  const dist = Math.sqrt((e.clientX - down[0]) * (e.clientX - down[0]) + (e.clientY - down[1]) * (e.clientY - down[1]));
+                  SelectionManager.Views().map(dv => dv.props.Document).map(doc => doc.layout instanceof Doc ? doc.layout : doc.isTemplateForField ? doc : Doc.GetProto(doc)).
+                        map(d => d.borderRounding = `${Math.max(0, dist < 3 ? 0 : dist)}px`);
+                  return false;
+            }, (e) => this._resizeUndo?.end(), (e) => { });
+      }
+
+      @action
+      onRotateDown = (e: React.PointerEvent): void => {
+            const rotateUndo = UndoManager.StartBatch("rotatedown");
+            const selectedInk = SelectionManager.Views().filter(i => i.ComponentView instanceof InkingStroke);
+            const centerPoint = !selectedInk.length ? { X: this.Bounds.x, Y: this.Bounds.y } : { X: this.Bounds.c?.X ?? (this.Bounds.x + this.Bounds.r) / 2, Y: this.Bounds.c?.Y ?? (this.Bounds.y + this.Bounds.b) / 2 };
+            setupMoveUpEvents(this, e,
+                  (e: PointerEvent, down: number[], delta: number[]) => {
+                        const previousPoint = { X: e.clientX, Y: e.clientY };
+                        const movedPoint = { X: e.clientX - delta[0], Y: e.clientY - delta[1] };
+                        const angle = InkStrokeProperties.angleChange(previousPoint, movedPoint, centerPoint);
+                        if (selectedInk.length) {
+                              angle && InkStrokeProperties.Instance.rotateInk(selectedInk, -angle, centerPoint);
                         } else {
-                            if (!doc._fitWidth) {
-                                actualdW = nwidth / nheight * actualdH;
-                                doc._width = actualdW;
-                            }
-                            else if (!modifyNativeDim || dragBotRight) doc._width = actualdW;
+                              SelectionManager.Views().forEach(dv => dv.rootDoc._jitterRotation = NumCast(dv.rootDoc._jitterRotation) - angle * 180 / Math.PI);
                         }
-                        if (!modifyNativeDim) {
-                            actualdH = Math.min(nheight / nwidth * NumCast(doc._width), actualdH);
-                            doc._height = actualdH;
+                        return false;
+                  },
+                  () => {
+                        rotateUndo?.end();
+                        UndoManager.FilterBatches(["data", "x", "y", "width", "height"]);
+                  },
+                  emptyFunction);
+      }
+
+      @action
+      onPointerDown = (e: React.PointerEvent): void => {
+            DragManager.docsBeingDragged = SelectionManager.Views().map(dv => dv.rootDoc);
+            this._inkDragDocs = DragManager.docsBeingDragged
+                  .filter(doc => doc.type === DocumentType.INK)
+                  .map(doc => {
+                        if (InkStrokeProperties.Instance._lock) {
+                              Doc.SetNativeHeight(doc, NumCast(doc._height));
+                              Doc.SetNativeWidth(doc, NumCast(doc._width));
                         }
-                        else doc._height = actualdH;
-                    }
-                } else {
-                    dH && (doc._height = actualdH);
-                    dW && (doc._width = actualdW);
-                    dH && (doc._autoHeight = false);
-                }
-                doc.x = (doc.x || 0) + dX * (actualdW - docwidth);
-                doc.y = (doc.y || 0) + dY * (actualdH - docheight);
-                doc._lastModified = new DateField();
-            }
-            const val = this._dragHeights.get(docView.layoutDoc);
-            if (val) this._dragHeights.set(docView.layoutDoc, { start: val.start, lowest: Math.min(val.lowest, NumCast(docView.layoutDoc._height)) });
-        }));
-        return false;
-    }
-
-    @action
-    onPointerUp = (e: PointerEvent): void => {
-        this._resizeHdlId = "";
-        this.Interacting = false;
-        this._resizeUndo?.end();
-        SnappingManager.clearSnapLines();
-
-        // detect autoHeight gesture and apply
-        SelectionManager.Views().map(docView => ({ doc: docView.layoutDoc, hgts: this._dragHeights.get(docView.layoutDoc) }))
-            .filter(pair => pair.hgts && pair.hgts.lowest < pair.hgts.start && pair.hgts.lowest <= 20)
-            .forEach(pair => pair.doc._autoHeight = true);
-        //need to change points for resize, or else rotation/control points will fail.
-        this._inkDragDocs.map(oldbds => ({ oldbds, inkPts: Cast(oldbds.doc.data, InkField)?.inkData || [] }))
-            .forEach(({ oldbds: { doc, x, y, width, height }, inkPts }) => {
-                Doc.GetProto(doc).data = new InkField(inkPts.map(ipt =>  // (new x — oldx) + newWidth * (oldxpoint /oldWidth)
-                ({
-                    X: (NumCast(doc.x) - x) + NumCast(doc.width) * ipt.X / width,
-                    Y: (NumCast(doc.y) - y) + NumCast(doc.height) * ipt.Y / height
-                })));
-                Doc.SetNativeWidth(doc, undefined);
-                Doc.SetNativeHeight(doc, undefined);
+                        return ({ doc, x: NumCast(doc.x), y: NumCast(doc.y), width: NumCast(doc._width), height: NumCast(doc._height) });
+                  });
+
+            setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction);
+            this.Interacting = true; // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them
+            this._resizeHdlId = e.currentTarget.className;
+            const bounds = e.currentTarget.getBoundingClientRect();
+            this._offX = this._resizeHdlId.toLowerCase().includes("left") ? bounds.right - e.clientX : bounds.left - e.clientX;
+            this._offY = this._resizeHdlId.toLowerCase().includes("top") ? bounds.bottom - e.clientY : bounds.top - e.clientY;
+            this._resizeUndo = UndoManager.StartBatch("DocDecs resize");
+            this._snapX = e.pageX;
+            this._snapY = e.pageY;
+            const ffviewSet = new Set<CollectionFreeFormView>();
+            SelectionManager.Views().forEach(docView => {
+                  const ffview = docView.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView;
+                  ffview && ffviewSet.add(ffview);
+                  this._dragHeights.set(docView.layoutDoc, { start: NumCast(docView.rootDoc._height), lowest: NumCast(docView.rootDoc._height) });
             });
-    }
-
-    @computed
-    get selectionTitle(): string {
-        if (SelectionManager.Views().length === 1) {
-            const selected = SelectionManager.Views()[0];
-            if (selected.ComponentView?.getTitle?.()) {
-                return selected.ComponentView.getTitle();
+            Array.from(ffviewSet).map(ffview => ffview.setupDragLines(false));
+      }
+
+      onPointerMove = (e: PointerEvent, down: number[], move: number[]): boolean => {
+            const first = SelectionManager.Views()[0];
+            let thisPt = { x: e.clientX - this._offX, y: e.clientY - this._offY };
+            var fixedAspect = Doc.NativeAspect(first.layoutDoc);
+            InkStrokeProperties.Instance._lock && SelectionManager.Views().filter(dv => dv.rootDoc.type === DocumentType.INK)
+                  .forEach(dv => fixedAspect = Doc.NativeAspect(dv.rootDoc));
+
+            const resizeHdl = this._resizeHdlId.split(" ")[0];
+            if (fixedAspect && (resizeHdl === "documentDecorations-bottomRightResizer" || resizeHdl === "documentDecorations-topLeftResizer")) { // need to generalize for bl and tr drag handles
+                  const project = (p: number[], a: number[], b: number[]) => {
+                        const atob = [b[0] - a[0], b[1] - a[1]];
+                        const atop = [p[0] - a[0], p[1] - a[1]];
+                        const len = atob[0] * atob[0] + atob[1] * atob[1];
+                        let dot = atop[0] * atob[0] + atop[1] * atob[1];
+                        const t = dot / len;
+                        dot = (b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]);
+                        return [a[0] + atob[0] * t, a[1] + atob[1] * t];
+                  };
+                  const tl = first.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+                  const drag = project([e.clientX + this._offX, e.clientY + this._offY], tl, [tl[0] + fixedAspect, tl[1] + 1]);
+                  thisPt = DragManager.snapDragAspect(drag, fixedAspect);
+            } else {
+                  thisPt = DragManager.snapDrag(e, -this._offX, -this._offY, this._offX, this._offY);
             }
-            if (this._titleControlString.startsWith("=")) {
-                return ScriptField.MakeFunction(this._titleControlString.substring(1), { doc: Doc.name })!.script.run({ self: selected.rootDoc, this: selected.layoutDoc }, console.log).result?.toString() || "";
+
+            move[0] = thisPt.x - this._snapX;
+            move[1] = thisPt.y - this._snapY;
+            this._snapX = thisPt.x;
+            this._snapY = thisPt.y;
+            let dragBottom = false, dragRight = false, dragBotRight = false;
+            let dX = 0, dY = 0, dW = 0, dH = 0;
+            switch (this._resizeHdlId.split(" ")[0]) {
+                  case "": break;
+                  case "documentDecorations-topLeftResizer":
+                        dX = -1;
+                        dY = -1;
+                        dW = -move[0];
+                        dH = -move[1];
+                        break;
+                  case "documentDecorations-topRightResizer":
+                        dW = move[0];
+                        dY = -1;
+                        dH = -move[1];
+                        break;
+                  case "documentDecorations-topResizer":
+                        dY = -1;
+                        dH = -move[1];
+                        dragBottom = true;
+                        break;
+                  case "documentDecorations-bottomLeftResizer":
+                        dX = -1;
+                        dW = -move[0];
+                        dH = move[1];
+                        break;
+                  case "documentDecorations-bottomRightResizer":
+                        dW = move[0];
+                        dH = move[1];
+                        dragBotRight = true;
+                        break;
+                  case "documentDecorations-bottomResizer":
+                        dH = move[1];
+                        dragBottom = true;
+                        break;
+                  case "documentDecorations-leftResizer":
+                        dX = -1;
+                        dW = -move[0];
+                        break;
+                  case "documentDecorations-rightResizer":
+                        dW = move[0];
+                        dragRight = true;
+                        break;
             }
-            if (this._titleControlString.startsWith("#")) {
-                return Field.toString(selected.props.Document[this._titleControlString.substring(1)] as Field) || "-unset-";
+
+            SelectionManager.Views().forEach(action((docView: DocumentView) => {
+                  if (e.ctrlKey && !Doc.NativeHeight(docView.props.Document)) docView.toggleNativeDimensions();
+                  if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) {
+                        const doc = Document(docView.rootDoc);
+                        const nwidth = docView.nativeWidth;
+                        const nheight = docView.nativeHeight;
+                        const docheight = doc._height || 0;
+                        const docwidth = doc._width || 0;
+                        const width = docwidth;
+                        let height = (docheight || (nheight / nwidth * width));
+                        height = !height || isNaN(height) ? 20 : height;
+                        const scale = docView.props.ScreenToLocalTransform().Scale;
+                        const modifyNativeDim = (e.ctrlKey || doc.forceReflow) && doc.nativeDimModifiable;
+                        if (nwidth && nheight) {
+                              if (nwidth / nheight !== width / height && !dragBottom) {
+                                    height = nheight / nwidth * width;
+                              }
+                              if (modifyNativeDim && !dragBottom) { // ctrl key enables modification of the nativeWidth or nativeHeight durin the interaction
+                                    if (Math.abs(dW) > Math.abs(dH)) dH = dW * nheight / nwidth;
+                                    else dW = dH * nwidth / nheight;
+                              }
+                        }
+                        let actualdW = Math.max(width + (dW * scale), 20);
+                        let actualdH = Math.max(height + (dH * scale), 20);
+                        const fixedAspect = (nwidth && nheight && !doc._fitWidth);
+                        if (fixedAspect) {
+                              if ((Math.abs(dW) > Math.abs(dH) && (!dragBottom || !modifyNativeDim)) || dragRight) {
+                                    if (dragRight && modifyNativeDim) {
+                                          doc._nativeWidth = actualdW / (doc._width || 1) * Doc.NativeWidth(doc);
+                                    } else {
+                                          if (!doc._fitWidth) {
+                                                actualdH = nheight / nwidth * actualdW;
+                                                doc._height = actualdH;
+                                          }
+                                          else if (!modifyNativeDim || dragBotRight) doc._height = actualdH;
+                                    }
+                                    doc._width = actualdW;
+                              }
+                              else {
+                                    if (dragBottom && (modifyNativeDim ||
+                                          (docView.layoutDoc.nativeHeightUnfrozen && docView.layoutDoc._fitWidth))) { // frozen web pages, PDFs, and some RTFS have frozen nativewidth/height.  But they are marked to allow their nativeHeight to be explicitly modified with fitWidth and vertical resizing. (ie, with fitWidth they can't grow horizontally to match a vertical resize so it makes more sense to change their nativeheight even if the ctrl key isn't used)
+                                          doc._nativeHeight = actualdH / (doc._height || 1) * Doc.NativeHeight(doc);
+                                          doc._autoHeight = false;
+                                    } else {
+                                          if (!doc._fitWidth) {
+                                                actualdW = nwidth / nheight * actualdH;
+                                                doc._width = actualdW;
+                                          }
+                                          else if (!modifyNativeDim || dragBotRight) doc._width = actualdW;
+                                    }
+                                    if (!modifyNativeDim) {
+                                          actualdH = Math.min(nheight / nwidth * NumCast(doc._width), actualdH);
+                                          doc._height = actualdH;
+                                    }
+                                    else doc._height = actualdH;
+                              }
+                        } else {
+                              dH && (doc._height = actualdH);
+                              dW && (doc._width = actualdW);
+                              dH && (doc._autoHeight = false);
+                        }
+                        doc.x = (doc.x || 0) + dX * (actualdW - docwidth);
+                        doc.y = (doc.y || 0) + dY * (actualdH - docheight);
+                        doc._lastModified = new DateField();
+                  }
+                  const val = this._dragHeights.get(docView.layoutDoc);
+                  if (val) this._dragHeights.set(docView.layoutDoc, { start: val.start, lowest: Math.min(val.lowest, NumCast(docView.layoutDoc._height)) });
+            }));
+            return false;
+      }
+
+      @action
+      onPointerUp = (e: PointerEvent): void => {
+            this._resizeHdlId = "";
+            this.Interacting = false;
+            this._resizeUndo?.end();
+            SnappingManager.clearSnapLines();
+
+            // detect autoHeight gesture and apply
+            SelectionManager.Views().map(docView => ({ doc: docView.layoutDoc, hgts: this._dragHeights.get(docView.layoutDoc) }))
+                  .filter(pair => pair.hgts && pair.hgts.lowest < pair.hgts.start && pair.hgts.lowest <= 20)
+                  .forEach(pair => pair.doc._autoHeight = true);
+            //need to change points for resize, or else rotation/control points will fail.
+            this._inkDragDocs.map(oldbds => ({ oldbds, inkPts: Cast(oldbds.doc.data, InkField)?.inkData || [] }))
+                  .forEach(({ oldbds: { doc, x, y, width, height }, inkPts }) => {
+                        Doc.GetProto(doc).data = new InkField(inkPts.map(ipt =>  // (new x — oldx) + newWidth * (oldxpoint /oldWidth)
+                        ({
+                              X: (NumCast(doc.x) - x) + NumCast(doc.width) * ipt.X / width,
+                              Y: (NumCast(doc.y) - y) + NumCast(doc.height) * ipt.Y / height
+                        })));
+                        Doc.SetNativeWidth(doc, undefined);
+                        Doc.SetNativeHeight(doc, undefined);
+                  });
+      }
+
+      @computed
+      get selectionTitle(): string {
+            if (SelectionManager.Views().length === 1) {
+                  const selected = SelectionManager.Views()[0];
+                  if (selected.ComponentView?.getTitle?.()) {
+                        return selected.ComponentView.getTitle();
+                  }
+                  if (this._titleControlString.startsWith("=")) {
+                        return ScriptField.MakeFunction(this._titleControlString.substring(1), { doc: Doc.name })!.script.run({ self: selected.rootDoc, this: selected.layoutDoc }, console.log).result?.toString() || "";
+                  }
+                  if (this._titleControlString.startsWith("#")) {
+                        return Field.toString(selected.props.Document[this._titleControlString.substring(1)] as Field) || "-unset-";
+                  }
+                  return this._accumulatedTitle;
+            }
+            return SelectionManager.Views().length > 1 ? "-multiple-" : "-unset-";
+      }
+
+      @computed get canDelete() {
+            return SelectionManager.Views().some(docView => {
+                  if (docView.rootDoc.stayInCollection) return false;
+                  const collectionAcl = docView.props.ContainingCollectionView ? GetEffectiveAcl(docView.props.ContainingCollectionDoc?.[DataSym]) : AclEdit;
+                  //return (!docView.rootDoc._stayInCollection || docView.rootDoc.isInkMask) &&
+                  return (collectionAcl === AclAdmin || collectionAcl === AclEdit || GetEffectiveAcl(docView.rootDoc) === AclAdmin);
+            });
+      }
+      @computed get hasIcons() {
+            return SelectionManager.Views().some(docView => docView.rootDoc.layoutKey === "layout_icon");
+      }
+
+      render() {
+            const bounds = this.Bounds;
+            const seldoc = SelectionManager.Views().slice(-1)[0];
+            if (SnappingManager.GetIsDragging() || bounds.r - bounds.x < 1 || bounds.x === Number.MAX_VALUE || !seldoc || this._hidden || isNaN(bounds.r) || isNaN(bounds.b) || isNaN(bounds.x) || isNaN(bounds.y)) {
+                  return (null);
             }
-            return this._accumulatedTitle;
-        }
-        return SelectionManager.Views().length > 1 ? "-multiple-" : "-unset-";
-    }
-
-    @computed get canDelete() {
-        return SelectionManager.Views().some(docView => {
-            if (docView.rootDoc.stayInCollection) return false;
-            const collectionAcl = docView.props.ContainingCollectionView ? GetEffectiveAcl(docView.props.ContainingCollectionDoc?.[DataSym]) : AclEdit;
-            //return (!docView.rootDoc._stayInCollection || docView.rootDoc.isInkMask) &&
-            return (collectionAcl === AclAdmin || collectionAcl === AclEdit || GetEffectiveAcl(docView.rootDoc) === AclAdmin);
-        });
-    }
-    @computed get hasIcons() {
-        return SelectionManager.Views().some(docView => docView.rootDoc.layoutKey === "layout_icon");
-    }
-
-    render() {
-        const bounds = this.Bounds;
-        const seldoc = SelectionManager.Views().slice(-1)[0];
-        if (SnappingManager.GetIsDragging() || bounds.r - bounds.x < 1 || bounds.x === Number.MAX_VALUE || !seldoc || this._hidden || isNaN(bounds.r) || isNaN(bounds.b) || isNaN(bounds.x) || isNaN(bounds.y)) {
-            return (null);
-        }
-        const hideResizers = seldoc.props.hideResizeHandles || seldoc.rootDoc.hideResizeHandles || seldoc.rootDoc._isGroup;
-        const hideTitle = seldoc.props.hideDecorationTitle || seldoc.rootDoc.hideDecorationTitle;
-        const canOpen = SelectionManager.Views().some(docView => !docView.props.Document._stayInCollection && !docView.props.Document.isGroup && !docView.props.Document.hideOpenButton);
-        const canDelete = this.canDelete;
-        const topBtn = (key: string, icon: string, pointerDown: undefined | ((e: React.PointerEvent) => void), click: undefined | ((e: any) => void), title: string) => (
-            <Tooltip key={key} title={<div className="dash-tooltip">{title}</div>} placement="top">
-                <div className={`documentDecorations-${key}Button`} onContextMenu={e => e.preventDefault()}
-                    onPointerDown={pointerDown ?? (e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(e => click!(e))))} >
-                    <FontAwesomeIcon icon={icon as any} />
-                </div>
-            </Tooltip>);
-
-        const colorScheme = StrCast(CurrentUserUtils.ActiveDashboard?.colorScheme);
-        const titleArea = hideTitle ? <div className="documentDecorations-title" onPointerDown={this.onTitleDown} key="title" /> :
-            this._edtingTitle ?
-                <input ref={this._keyinput} className={`documentDecorations-title${colorScheme}`}
-                    type="text" name="dynbox" autoComplete="on"
-                    value={this._accumulatedTitle}
-                    onBlur={e => this.titleBlur()}
-                    onChange={action(e => this._accumulatedTitle = e.target.value)}
-                    onKeyDown={this.titleEntered} /> :
-                <div className="documentDecorations-title" key="title" onPointerDown={this.onTitleDown} >
-                    <span className={`documentDecorations-titleSpan${colorScheme}`}>{`${this.selectionTitle}`}</span>
-                </div>;
-
-
-        const leftBounds = this.props.boundsLeft;
-        const topBounds = LightboxView.LightboxDoc ? 0 : this.props.boundsTop;
-        bounds.x = Math.max(leftBounds, bounds.x - this._resizeBorderWidth / 2) + this._resizeBorderWidth / 2;
-        bounds.y = Math.max(topBounds, bounds.y - this._resizeBorderWidth / 2 - this._titleHeight) + this._resizeBorderWidth / 2 + this._titleHeight;
-        const borderRadiusDraggerWidth = 15;
-        bounds.r = Math.max(bounds.x, Math.max(leftBounds, Math.min(window.innerWidth, bounds.r + borderRadiusDraggerWidth + this._resizeBorderWidth / 2) - this._resizeBorderWidth / 2 - borderRadiusDraggerWidth));
-        bounds.b = Math.max(bounds.y, Math.max(topBounds, Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth / 2 + this._linkBoxHeight) - this._resizeBorderWidth / 2 - this._linkBoxHeight));
-
-        const useRotation = seldoc.ComponentView instanceof InkingStroke || seldoc.ComponentView instanceof ImageBox;
-        const resizerScheme = colorScheme ? "documentDecorations-resizer" + colorScheme : "";
-
-        const rotation = NumCast(seldoc.rootDoc._jitterRotation);
-
-        return (<div className={`documentDecorations${colorScheme}`}>
-            <div className="documentDecorations-background" style={{
-                transform: `rotate(${rotation}deg)`,
-                transformOrigin: "top  left",
-                width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
-                height: (bounds.b - bounds.y + this._resizeBorderWidth) + "px",
-                left: bounds.x - this._resizeBorderWidth / 2,
-                top: bounds.y - this._resizeBorderWidth / 2,
-                pointerEvents: DocumentDecorations.Instance.AddToSelection || this.Interacting ? "none" : "all",
-                display: SelectionManager.Views().length <= 1 ? "none" : undefined
-            }} onPointerDown={this.onBackgroundDown} onContextMenu={e => { e.preventDefault(); e.stopPropagation(); }} />
-            {bounds.r - bounds.x < 15 && bounds.b - bounds.y < 15 ? (null) : <>
-                <div className="documentDecorations-container" key="container" style={{
-                    transform: ` translate(${bounds.x - this._resizeBorderWidth / 2}px, ${bounds.y - this._resizeBorderWidth / 2 - this._titleHeight}px) rotate(${rotation}deg)`,
-                    transformOrigin: `8px 26px`,
-                    width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
-                    height: (bounds.b - bounds.y + this._resizeBorderWidth + this._titleHeight) + "px",
-                }}>
-                    {!canDelete ? <div /> : topBtn("close", this.hasIcons ? "times" : "window-maximize", undefined, e => this.onCloseClick(this.hasIcons ? true : undefined), "Close")}
-                    {titleArea}
-                    {!canOpen ? (null) : topBtn("open", "external-link-alt", this.onMaximizeDown, undefined, "Open in Tab (ctrl: as alias, shift: in new collection)")}
-                    {hideResizers ? (null) :
-                        <>
-                            <div key="tl" className={`documentDecorations-topLeftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-                            <div key="t" className={`documentDecorations-topResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-                            <div key="tr" className={`documentDecorations-topRightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-                            <div key="l" className={`documentDecorations-leftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-                            <div key="c" className={`documentDecorations-centerCont ${resizerScheme}`}></div>
-                            <div key="r" className={`documentDecorations-rightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-                            <div key="bl" className={`documentDecorations-bottomLeftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-                            <div key="b" className={`documentDecorations-bottomResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-                            <div key="br" className={`documentDecorations-bottomRightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-
-                            {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) :
-                                topBtn("selector", "arrow-alt-circle-up", undefined, this.onSelectorClick, "tap to select containing document")}
-                            <div key="rot" className={`documentDecorations-${useRotation ? "rotation" : "borderRadius"}`}
-                                onPointerDown={useRotation ? this.onRotateDown : this.onRadiusDown}
-                                onContextMenu={e => e.preventDefault()}>{useRotation && "⟲"}</div>
-                        </>
-                    }
-                    {seldoc?.Document.type === DocumentType.FONTICON ? (null) :
-                        <div className="link-button-container" key="links"
-                            style={{
-                                transform: ` translate(${- this._resizeBorderWidth / 2 + 10}px, ${this._resizeBorderWidth + bounds.b - bounds.y + this._titleHeight}px) `,
-                            }}>
-                            <DocumentButtonBar views={SelectionManager.Views} />
-                        </div>}
-                </div >
-            </>}
-        </div >
-        );
-    }
+            // hide the decorations if the parent chooses to hide it or if the document itself hides it
+            const hideResizers = seldoc.props.hideResizeHandles || seldoc.rootDoc.hideResizeHandles || seldoc.rootDoc._isGroup;
+            const hideTitle = seldoc.props.hideDecorationTitle || seldoc.rootDoc.hideDecorationTitle;
+            const hideDocumentButtonBar = seldoc.props.hideDocumentButtonBar || seldoc.rootDoc.hideDocumentButtonBar;
+            // if multiple documents have been opened at the same time, then don't show open button
+            const canOpen = SelectionManager.Views().some(docView => !docView.props.Document._stayInCollection && !docView.props.Document.isGroup && !docView.props.Document.hideOpenButton);
+            const canDelete = this.canDelete;
+            const topBtn = (key: string, icon: string, pointerDown: undefined | ((e: React.PointerEvent) => void), click: undefined | ((e: any) => void), title: string) => (
+                  <Tooltip key={key} title={<div className="dash-tooltip">{title}</div>} placement="top">
+                        <div className={`documentDecorations-${key}Button`} onContextMenu={e => e.preventDefault()}
+                              onPointerDown={pointerDown ?? (e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(e => click!(e))))} >
+                              <FontAwesomeIcon icon={icon as any} />
+                        </div>
+                  </Tooltip>);
+
+            const colorScheme = StrCast(CurrentUserUtils.ActiveDashboard?.colorScheme);
+            const titleArea = hideTitle ? <div className="documentDecorations-title" onPointerDown={this.onTitleDown} key="title" /> :
+                  this._edtingTitle ?
+                        <input ref={this._keyinput} className={`documentDecorations-title${colorScheme}`}
+                              type="text" name="dynbox" autoComplete="on"
+                              value={this._accumulatedTitle}
+                              onBlur={e => this.titleBlur()}
+                              onChange={action(e => this._accumulatedTitle = e.target.value)}
+                              onKeyDown={this.titleEntered} /> :
+                        <div className="documentDecorations-title" key="title" onPointerDown={this.onTitleDown} >
+                              <span className={`documentDecorations-titleSpan${colorScheme}`}>{`${this.selectionTitle}`}</span>
+                        </div>;
+
+
+            const leftBounds = this.props.boundsLeft;
+            const topBounds = LightboxView.LightboxDoc ? 0 : this.props.boundsTop;
+            bounds.x = Math.max(leftBounds, bounds.x - this._resizeBorderWidth / 2) + this._resizeBorderWidth / 2;
+            bounds.y = Math.max(topBounds, bounds.y - this._resizeBorderWidth / 2 - this._titleHeight) + this._resizeBorderWidth / 2 + this._titleHeight;
+            const borderRadiusDraggerWidth = 15;
+            bounds.r = Math.max(bounds.x, Math.max(leftBounds, Math.min(window.innerWidth, bounds.r + borderRadiusDraggerWidth + this._resizeBorderWidth / 2) - this._resizeBorderWidth / 2 - borderRadiusDraggerWidth));
+            bounds.b = Math.max(bounds.y, Math.max(topBounds, Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth / 2 + this._linkBoxHeight) - this._resizeBorderWidth / 2 - this._linkBoxHeight));
+
+            const useRotation = seldoc.ComponentView instanceof InkingStroke || seldoc.ComponentView instanceof ImageBox;
+            const resizerScheme = colorScheme ? "documentDecorations-resizer" + colorScheme : "";
+
+            const rotation = NumCast(seldoc.rootDoc._jitterRotation);
+
+            return (<div className={`documentDecorations${colorScheme}`}>
+                  <div className="documentDecorations-background" style={{
+                        transform: `rotate(${rotation}deg)`,
+                        transformOrigin: "top  left",
+                        width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
+                        height: (bounds.b - bounds.y + this._resizeBorderWidth) + "px",
+                        left: bounds.x - this._resizeBorderWidth / 2,
+                        top: bounds.y - this._resizeBorderWidth / 2,
+                        pointerEvents: DocumentDecorations.Instance.AddToSelection || this.Interacting ? "none" : "all",
+                        display: SelectionManager.Views().length <= 1 ? "none" : undefined
+                  }} onPointerDown={this.onBackgroundDown} onContextMenu={e => { e.preventDefault(); e.stopPropagation(); }} />
+                  {bounds.r - bounds.x < 15 && bounds.b - bounds.y < 15 ? (null) : <>
+                        <div className="documentDecorations-container" key="container" style={{
+                              transform: ` translate(${bounds.x - this._resizeBorderWidth / 2}px, ${bounds.y - this._resizeBorderWidth / 2 - this._titleHeight}px) rotate(${rotation}deg)`,
+                              transformOrigin: `8px 26px`,
+                              width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
+                              height: (bounds.b - bounds.y + this._resizeBorderWidth + this._titleHeight) + "px",
+                        }}>
+                              {!canDelete ? <div /> : topBtn("close", this.hasIcons ? "times" : "window-maximize", undefined, e => this.onCloseClick(this.hasIcons ? true : undefined), "Close")}
+                              {titleArea}
+                              {!canOpen ? (null) : topBtn("open", "external-link-alt", this.onMaximizeDown, undefined, "Open in Tab (ctrl: as alias, shift: in new collection)")}
+                              {hideResizers ? (null) :
+                                    <>
+                                          <div key="tl" className={`documentDecorations-topLeftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+                                          <div key="t" className={`documentDecorations-topResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+                                          <div key="tr" className={`documentDecorations-topRightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+                                          <div key="l" className={`documentDecorations-leftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+                                          <div key="c" className={`documentDecorations-centerCont ${resizerScheme}`}></div>
+                                          <div key="r" className={`documentDecorations-rightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+                                          <div key="bl" className={`documentDecorations-bottomLeftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+                                          <div key="b" className={`documentDecorations-bottomResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+                                          <div key="br" className={`documentDecorations-bottomRightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+
+                                          {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) :
+                                                topBtn("selector", "arrow-alt-circle-up", undefined, this.onSelectorClick, "tap to select containing document")}
+                                          <div key="rot" className={`documentDecorations-${useRotation ? "rotation" : "borderRadius"}`}
+                                                onPointerDown={useRotation ? this.onRotateDown : this.onRadiusDown}
+                                                onContextMenu={e => e.preventDefault()}>{useRotation && "⟲"}</div>
+                                    </>
+                              }
+
+                              {hideDocumentButtonBar ? (null) :
+                                    <div className="link-button-container" key="links"
+                                          style={{
+                                                transform: ` translate(${- this._resizeBorderWidth / 2 + 10}px, ${this._resizeBorderWidth + bounds.b - bounds.y + this._titleHeight}px) `,
+                                          }}>
+                                          <DocumentButtonBar views={SelectionManager.Views} />
+                                    </div>}
+                        </div >
+                  </>}
+            </div >
+            );
+      }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 373e3ee57..96c989e77 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -54,1344 +54,1345 @@ import { FieldViewProps } from "./FieldView";
 const { Howl } = require('howler');
 
 interface Window {
-    MediaRecorder: MediaRecorder;
+      MediaRecorder: MediaRecorder;
 }
 
 declare class MediaRecorder {
-    // whatever MediaRecorder has
-    constructor(e: any);
+      // whatever MediaRecorder has
+      constructor(e: any);
 }
 
 export enum ViewAdjustment {
-    resetView = 1,
-    doNothing = 0
+      resetView = 1,
+      doNothing = 0
 }
 
 export const ViewSpecPrefix = "viewSpec";  // field prefix for anchor fields that are immediately copied over to the target document when link is followed.  Other anchor properties will be copied over in the specific setViewSpec() method on their view (which allows for seting preview values instead of writing to the document)
 
 export interface DocFocusOptions {
-    originalTarget?: Doc; // set in JumpToDocument, used by TabDocView to determine whether to fit contents to tab
-    willZoom?: boolean;   // determines whether to zoom in on target document
-    scale?: number;       // percent of containing frame to zoom into document
-    afterFocus?: DocAfterFocusFunc;  // function to call after focusing on a document
-    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)
+      originalTarget?: Doc; // set in JumpToDocument, used by TabDocView to determine whether to fit contents to tab
+      willZoom?: boolean;   // determines whether to zoom in on target document
+      scale?: number;       // percent of containing frame to zoom into document
+      afterFocus?: DocAfterFocusFunc;  // function to call after focusing on a document
+      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)
 }
 export type DocAfterFocusFunc = (notFocused: boolean) => Promise<ViewAdjustment>;
 export type DocFocusFunc = (doc: Doc, options?: DocFocusOptions) => void;
 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?: () => 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)
-    scrollFocus?: (doc: Doc, smooth: boolean) => Opt<number>; // returns the duration of the focus
-    setViewSpec?: (anchor: Doc, preview: boolean) => void;  // sets viewing information for a componentview, typically when following a link. 'preview' tells the view to use the values without writing to the document
-    reverseNativeScaling?: () => boolean; // DocumentView's setup screenToLocal based on the doc having a nativeWidth/Height.  However, some content views (e.g., FreeFormView w/ fitToBox 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
-    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
-    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;
-    setFocus?: () => void;
-    componentUI?: (boundsLeft: number, boundsTop: number) => JSX.Element | null;
-    fieldKey?: string;
-    annotationKey?: string;
-    getTitle?: () => string;
-    getScrollHeight?: () => number;
-    getCenter?: (xf: Transform) => { 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;
+      updateIcon?: () => void; // updates the icon representation of the document
+      getAnchor?: () => 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)
+      scrollFocus?: (doc: Doc, smooth: boolean) => Opt<number>; // returns the duration of the focus
+      setViewSpec?: (anchor: Doc, preview: boolean) => void;  // sets viewing information for a componentview, typically when following a link. 'preview' tells the view to use the values without writing to the document
+      reverseNativeScaling?: () => boolean; // DocumentView's setup screenToLocal based on the doc having a nativeWidth/Height.  However, some content views (e.g., FreeFormView w/ fitToBox 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
+      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
+      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;
+      setFocus?: () => void;
+      componentUI?: (boundsLeft: number, boundsTop: number) => JSX.Element | null;
+      fieldKey?: string;
+      annotationKey?: string;
+      getTitle?: () => string;
+      getScrollHeight?: () => number;
+      getCenter?: (xf: Transform) => { 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;
-    fitContentsToDoc?: () => boolean; // used by freeformview to fit its contents to its panel. corresponds to _fitToBox property on a Document
-    ContainingCollectionView: Opt<CollectionView>;
-    ContainingCollectionDoc: Opt<Doc>;
-    suppressSetHeight?: boolean;
-    thumbShown?: () => boolean;
-    isHovering?: () => boolean;
-    setContentView?: (view: DocComponentView) => any;
-    CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView;
-    PanelWidth: () => number;
-    PanelHeight: () => number;
-    docViewPath: () => DocumentView[];
-    childHideDecorationTitle?: () => boolean;
-    childHideResizeHandles?: () => boolean;
-    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>;
-    focus: DocFocusFunc;
-    fitWidth?: (doc: Doc) => boolean;
-    docFilters: () => string[];
-    docRangeFilters: () => string[];
-    searchFilterDocs: () => Doc[];
-    showTitle?: () => string;
-    whenChildContentsActiveChanged: (isActive: boolean) => void;
-    rootSelected: (outsideReaction?: boolean) => boolean; // whether the root of a template has been selected
-    addDocTab: (doc: Doc, where: string) => 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[]) => boolean;
-    removeDocument?: (doc: Doc | Doc[]) => boolean;
-    moveDocument?: (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean;
-    pinToPres: (document: Doc) => void;
-    ScreenToLocalTransform: () => Transform;
-    bringToFront: (doc: Doc, sendToBack?: boolean) => void;
-    dropAction?: dropActionType;
-    dontRegisterView?: boolean;
-    hideLinkButton?: boolean;
-    hideCaptions?: boolean;
-    ignoreAutoHeight?: boolean;
-    forceAutoHeight?: boolean;
-    disableDocBrushing?: boolean; // should highlighting for this view be disabled when same document in another view is hovered over.
-    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;
+      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;
+      fitContentsToDoc?: () => boolean; // used by freeformview to fit its contents to its panel. corresponds to _fitToBox property on a Document
+      ContainingCollectionView: Opt<CollectionView>;
+      ContainingCollectionDoc: Opt<Doc>;
+      suppressSetHeight?: boolean;
+      thumbShown?: () => boolean;
+      isHovering?: () => boolean;
+      setContentView?: (view: DocComponentView) => any;
+      CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView;
+      PanelWidth: () => number;
+      PanelHeight: () => number;
+      docViewPath: () => DocumentView[];
+      childHideDecorationTitle?: () => boolean;
+      childHideResizeHandles?: () => boolean;
+      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>;
+      focus: DocFocusFunc;
+      fitWidth?: (doc: Doc) => boolean;
+      docFilters: () => string[];
+      docRangeFilters: () => string[];
+      searchFilterDocs: () => Doc[];
+      showTitle?: () => string;
+      whenChildContentsActiveChanged: (isActive: boolean) => void;
+      rootSelected: (outsideReaction?: boolean) => boolean; // whether the root of a template has been selected
+      addDocTab: (doc: Doc, where: string) => 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[]) => boolean;
+      removeDocument?: (doc: Doc | Doc[]) => boolean;
+      moveDocument?: (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean;
+      pinToPres: (document: Doc) => void;
+      ScreenToLocalTransform: () => Transform;
+      bringToFront: (doc: Doc, sendToBack?: boolean) => void;
+      dropAction?: dropActionType;
+      dontRegisterView?: boolean;
+      hideLinkButton?: boolean;
+      hideCaptions?: boolean;
+      ignoreAutoHeight?: boolean;
+      forceAutoHeight?: boolean;
+      disableDocBrushing?: boolean; // should highlighting for this view be disabled when same document in another view is hovered over.
+      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;
 }
 
 // these props are specific to DocuentViews
 export interface DocumentViewProps extends DocumentViewSharedProps {
-    // properties specific to DocumentViews but not to FieldView
-    freezeDimensions?: boolean;
-    hideResizeHandles?: boolean; // whether to suppress DocumentDecorations 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
-    treeViewDoc?: Doc;
-    isDocumentActive?: () => boolean | undefined; // whether a document should handle pointer events
-    isContentActive: () => boolean | undefined; // whether document contents should handle pointer events
-    contentPointerEvents?: string; // 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";
-    dontScaleFilter?: (doc: Doc) => boolean; // decides whether a document can be scaled to fit its container vs native size with scrolling
-    ContentScaling?: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal
-    NativeWidth?: () => number;
-    NativeHeight?: () => number;
-    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);
+      // properties specific to DocumentViews but not to FieldView
+      freezeDimensions?: boolean;
+      hideResizeHandles?: boolean; // whether to suppress DocumentDecorations 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;
+      treeViewDoc?: Doc;
+      isDocumentActive?: () => boolean | undefined; // whether a document should handle pointer events
+      isContentActive: () => boolean | undefined; // whether document contents should handle pointer events
+      contentPointerEvents?: string; // 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";
+      dontScaleFilter?: (doc: Doc) => boolean; // decides whether a document can be scaled to fit its container vs native size with scrolling
+      ContentScaling?: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal
+      NativeWidth?: () => number;
+      NativeHeight?: () => number;
+      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) => void;
-    DocumentView: () => DocumentView;
-    viewPath: () => DocumentView[];
+      NativeWidth: () => number;
+      NativeHeight: () => number;
+      isSelected: (outsideReaction?: boolean) => boolean;
+      select: (ctrlPressed: 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.
-    _animateScaleTime = 300; // milliseconds;
-    @observable _animateScalingTo = 0;
-    @observable _mediaState = 0;
-    @observable _pendingDoubleClick = false;
-    private _disposers: { [name: string]: IReactionDisposer } = {};
-    private _downX: number = 0;
-    private _downY: number = 0;
-    private _firstX: number = -1;
-    private _firstY: number = -1;
-    private _lastTap: number = 0;
-    private _doubleTap = false;
-    private _mainCont = React.createRef<HTMLDivElement>();
-    private _titleRef = React.createRef<EditableView>();
-    private _timeout: NodeJS.Timeout | undefined;
-    private _dropDisposer?: DragManager.DragDropDisposer;
-    private _holdDisposer?: InteractionUtils.MultiTouchEventDisposer;
-    protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
-    @observable _componentView: Opt<DocComponentView>; // needs to be accessed from DocumentView wrapper class
-
-    private get topMost() { return this.props.renderDepth === 0 && !LightboxView.LightboxDoc; }
-    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 ShowTitle() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.ShowTitle) as (Opt<string>); }
-    @computed get ContentScale() { return this.props.ContentScaling?.() || 1; }
-    @computed get thumb() { return ImageCast(this.layoutDoc["thumb-frozen"], ImageCast(this.layoutDoc.thumb))?.url.href.replace(".png", "_m.png"); }
-    @computed get hidden() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Hidden); }
-    @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 hideLinkButton() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkButton + (this.props.isSelected() ? ":selected" : "")); }
-    @computed get widgetDecorations() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Decorations + (this.props.isSelected() ? ":selected" : "")); }
-    @computed get backgroundColor() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor); }
-    @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 titleHeight() { return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.TitleHeight) || 0; }
-    @computed get pointerEvents() { return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (this.props.isSelected() ? ":selected" : "")); }
-    @computed get finalLayoutKey() { return StrCast(this.Document.layoutKey, "layout"); }
-    @computed get nativeWidth() { return this.props.NativeWidth(); }
-    @computed get nativeHeight() { return this.props.NativeHeight(); }
-    @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(); }
-    //componentDidUpdate() { this.setupHandlers(); }
-    setupHandlers() {
-        this.cleanupHandlers(false);
-        if (this._mainCont.current) {
-            this._dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, this.drop.bind(this), this.props.Document);
-            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?.());
-    }
-
-    handle1PointerHoldStart = (e: Event, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
-        this.removeMoveListeners();
-        this.removeEndListeners();
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        if (RadialMenu.Instance._display === false) {
-            this.addHoldMoveListeners();
-            this.addHoldEndListeners();
-            this.onRadialMenu(e, me);
+      public static SelectAfterContextMenu = true; //  whether a document should be selected after it's contextmenu is triggered.
+      _animateScaleTime = 300; // milliseconds;
+      @observable _animateScalingTo = 0;
+      @observable _mediaState = 0;
+      @observable _pendingDoubleClick = false;
+      private _disposers: { [name: string]: IReactionDisposer } = {};
+      private _downX: number = 0;
+      private _downY: number = 0;
+      private _firstX: number = -1;
+      private _firstY: number = -1;
+      private _lastTap: number = 0;
+      private _doubleTap = false;
+      private _mainCont = React.createRef<HTMLDivElement>();
+      private _titleRef = React.createRef<EditableView>();
+      private _timeout: NodeJS.Timeout | undefined;
+      private _dropDisposer?: DragManager.DragDropDisposer;
+      private _holdDisposer?: InteractionUtils.MultiTouchEventDisposer;
+      protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
+      @observable _componentView: Opt<DocComponentView>; // needs to be accessed from DocumentView wrapper class
+
+      private get topMost() { return this.props.renderDepth === 0 && !LightboxView.LightboxDoc; }
+      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 ShowTitle() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.ShowTitle) as (Opt<string>); }
+      @computed get ContentScale() { return this.props.ContentScaling?.() || 1; }
+      @computed get thumb() { return ImageCast(this.layoutDoc["thumb-frozen"], ImageCast(this.layoutDoc.thumb))?.url.href.replace(".png", "_m.png"); }
+      @computed get hidden() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Hidden); }
+      @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 hideLinkButton() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkButton + (this.props.isSelected() ? ":selected" : "")); }
+      @computed get widgetDecorations() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Decorations + (this.props.isSelected() ? ":selected" : "")); }
+      @computed get backgroundColor() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor); }
+      @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 titleHeight() { return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.TitleHeight) || 0; }
+      @computed get pointerEvents() { return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (this.props.isSelected() ? ":selected" : "")); }
+      @computed get finalLayoutKey() { return StrCast(this.Document.layoutKey, "layout"); }
+      @computed get nativeWidth() { return this.props.NativeWidth(); }
+      @computed get nativeHeight() { return this.props.NativeHeight(); }
+      @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(); }
+      //componentDidUpdate() { this.setupHandlers(); }
+      setupHandlers() {
+            this.cleanupHandlers(false);
+            if (this._mainCont.current) {
+                  this._dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, this.drop.bind(this), this.props.Document);
+                  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?.());
+      }
+
+      handle1PointerHoldStart = (e: Event, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
+            this.removeMoveListeners();
+            this.removeEndListeners();
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+            if (RadialMenu.Instance._display === false) {
+                  this.addHoldMoveListeners();
+                  this.addHoldEndListeners();
+                  this.onRadialMenu(e, me);
+                  const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1];
+                  this._firstX = pt.pageX;
+                  this._firstY = pt.pageY;
+            }
+      }
+
+      handle1PointerHoldMove = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
             const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1];
-            this._firstX = pt.pageX;
-            this._firstY = pt.pageY;
-        }
-    }
-
-    handle1PointerHoldMove = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
-        const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1];
-
-        if (this._firstX === -1 || this._firstY === -1) {
-            return;
-        }
-        if (Math.abs(pt.pageX - this._firstX) > 150 || Math.abs(pt.pageY - this._firstY) > 150) {
-            this.handle1PointerHoldEnd(e, me);
-        }
-    }
-
-    handle1PointerHoldEnd = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
-        this.removeHoldMoveListeners();
-        this.removeHoldEndListeners();
-        RadialMenu.Instance.closeMenu();
-        this._firstX = -1;
-        this._firstY = -1;
-        SelectionManager.DeselectAll();
-        me.touchEvent.stopPropagation();
-        me.touchEvent.preventDefault();
-        e.stopPropagation();
-        if (RadialMenu.Instance.used) {
-            this.onContextMenu(undefined, me.touches[0].pageX, me.touches[0].pageY);
-        }
-    }
-
-    handle2PointersDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>) => {
-        if (!e.nativeEvent.cancelBubble && !this.props.isSelected()) {
+
+            if (this._firstX === -1 || this._firstY === -1) {
+                  return;
+            }
+            if (Math.abs(pt.pageX - this._firstX) > 150 || Math.abs(pt.pageY - this._firstY) > 150) {
+                  this.handle1PointerHoldEnd(e, me);
+            }
+      }
+
+      handle1PointerHoldEnd = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
+            this.removeHoldMoveListeners();
+            this.removeHoldEndListeners();
+            RadialMenu.Instance.closeMenu();
+            this._firstX = -1;
+            this._firstY = -1;
+            SelectionManager.DeselectAll();
+            me.touchEvent.stopPropagation();
+            me.touchEvent.preventDefault();
             e.stopPropagation();
-            e.preventDefault();
+            if (RadialMenu.Instance.used) {
+                  this.onContextMenu(undefined, me.touches[0].pageX, me.touches[0].pageY);
+            }
+      }
 
-            this.removeMoveListeners();
-            this.addMoveListeners();
-            this.removeEndListeners();
-            this.addEndListeners();
-        }
-    }
-
-    handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>) => {
-        SelectionManager.DeselectAll();
-        if (this.Document.onPointerDown) return;
-        const touch = me.touchEvent.changedTouches.item(0);
-        if (touch) {
-            this._downX = touch.clientX;
-            this._downY = touch.clientY;
-            if (!e.nativeEvent.cancelBubble) {
-                if ((this.props.isDocumentActive?.() || this.layoutDoc.onDragStart || this.onClickHandler) && !e.ctrlKey && !this.layoutDoc._lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) e.stopPropagation();
-                this.removeMoveListeners();
-                this.addMoveListeners();
-                this.removeEndListeners();
-                this.addEndListeners();
-                e.stopPropagation();
+      handle2PointersDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>) => {
+            if (!e.nativeEvent.cancelBubble && !this.props.isSelected()) {
+                  e.stopPropagation();
+                  e.preventDefault();
+
+                  this.removeMoveListeners();
+                  this.addMoveListeners();
+                  this.removeEndListeners();
+                  this.addEndListeners();
             }
-        }
-    }
+      }
 
-    handle1PointerMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent<TouchEvent>) => {
-        if (e.cancelBubble && this.props.isDocumentActive?.()) {
-            this.removeMoveListeners();
-        }
-        else if (!e.cancelBubble && (this.props.isDocumentActive?.() || this.layoutDoc.onDragStart || this.onClickHandler) && !this.layoutDoc._lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) {
+      handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>) => {
+            SelectionManager.DeselectAll();
+            if (this.Document.onPointerDown) return;
             const touch = me.touchEvent.changedTouches.item(0);
-            if (touch && (Math.abs(this._downX - touch.clientX) > 3 || Math.abs(this._downY - touch.clientY) > 3)) {
-                if (!e.altKey && (!this.topMost || this.layoutDoc.onDragStart || this.onClickHandler)) {
-                    this.cleanUpInteractions();
-                    this.startDragging(this._downX, this._downY, this.Document.dropAction ? this.Document.dropAction as any : e.ctrlKey || e.altKey ? "alias" : undefined);
-                }
+            if (touch) {
+                  this._downX = touch.clientX;
+                  this._downY = touch.clientY;
+                  if (!e.nativeEvent.cancelBubble) {
+                        if ((this.props.isDocumentActive?.() || this.layoutDoc.onDragStart || this.onClickHandler) && !e.ctrlKey && !this.layoutDoc._lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) e.stopPropagation();
+                        this.removeMoveListeners();
+                        this.addMoveListeners();
+                        this.removeEndListeners();
+                        this.addEndListeners();
+                        e.stopPropagation();
+                  }
             }
-            e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document'  however it does mark the event as cancelBubble=true which we test for in the move event handlers
-            e.preventDefault();
-        }
-    }
-
-    @action
-    handle2PointersMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent<TouchEvent>) => {
-        const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true);
-        const pt1 = myTouches[0];
-        const pt2 = myTouches[1];
-        const oldPoint1 = this.prevPoints.get(pt1.identifier);
-        const oldPoint2 = this.prevPoints.get(pt2.identifier);
-        const pinching = InteractionUtils.Pinning(pt1, pt2, oldPoint1!, oldPoint2!);
-        if (pinching !== 0 && oldPoint1 && oldPoint2) {
-            const dW = (Math.abs(pt1.clientX - pt2.clientX) - Math.abs(oldPoint1.clientX - oldPoint2.clientX));
-            const dH = (Math.abs(pt1.clientY - pt2.clientY) - Math.abs(oldPoint1.clientY - oldPoint2.clientY));
-            const dX = -1 * Math.sign(dW);
-            const dY = -1 * Math.sign(dH);
-
-            if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) {
-                const doc = Document(this.props.Document);
-                const layoutDoc = Document(Doc.Layout(this.props.Document));
-                let nwidth = Doc.NativeWidth(layoutDoc);
-                let nheight = Doc.NativeHeight(layoutDoc);
-                const width = (layoutDoc._width || 0);
-                const height = (layoutDoc._height || (nheight / nwidth * width));
-                const scale = this.props.ScreenToLocalTransform().Scale * this.ContentScale;
-                const actualdW = Math.max(width + (dW * scale), 20);
-                const actualdH = Math.max(height + (dH * scale), 20);
-                doc.x = (doc.x || 0) + dX * (actualdW - width);
-                doc.y = (doc.y || 0) + dY * (actualdH - height);
-                const fixedAspect = e.ctrlKey || (nwidth && nheight);
-                if (fixedAspect && (!nwidth || !nheight)) {
-                    Doc.SetNativeWidth(layoutDoc, nwidth = layoutDoc._width || 0);
-                    Doc.SetNativeHeight(layoutDoc, nheight = layoutDoc._height || 0);
-                }
-                if (nwidth > 0 && nheight > 0) {
-                    if (Math.abs(dW) > Math.abs(dH)) {
-                        if (!fixedAspect) {
-                            Doc.SetNativeWidth(layoutDoc, actualdW / (layoutDoc._width || 1) * Doc.NativeWidth(layoutDoc));
+      }
+
+      handle1PointerMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent<TouchEvent>) => {
+            if (e.cancelBubble && this.props.isDocumentActive?.()) {
+                  this.removeMoveListeners();
+            }
+            else if (!e.cancelBubble && (this.props.isDocumentActive?.() || this.layoutDoc.onDragStart || this.onClickHandler) && !this.layoutDoc._lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) {
+                  const touch = me.touchEvent.changedTouches.item(0);
+                  if (touch && (Math.abs(this._downX - touch.clientX) > 3 || Math.abs(this._downY - touch.clientY) > 3)) {
+                        if (!e.altKey && (!this.topMost || this.layoutDoc.onDragStart || this.onClickHandler)) {
+                              this.cleanUpInteractions();
+                              this.startDragging(this._downX, this._downY, this.Document.dropAction ? this.Document.dropAction as any : e.ctrlKey || e.altKey ? "alias" : undefined);
+                        }
+                  }
+                  e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document'  however it does mark the event as cancelBubble=true which we test for in the move event handlers
+                  e.preventDefault();
+            }
+      }
+
+      @action
+      handle2PointersMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent<TouchEvent>) => {
+            const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true);
+            const pt1 = myTouches[0];
+            const pt2 = myTouches[1];
+            const oldPoint1 = this.prevPoints.get(pt1.identifier);
+            const oldPoint2 = this.prevPoints.get(pt2.identifier);
+            const pinching = InteractionUtils.Pinning(pt1, pt2, oldPoint1!, oldPoint2!);
+            if (pinching !== 0 && oldPoint1 && oldPoint2) {
+                  const dW = (Math.abs(pt1.clientX - pt2.clientX) - Math.abs(oldPoint1.clientX - oldPoint2.clientX));
+                  const dH = (Math.abs(pt1.clientY - pt2.clientY) - Math.abs(oldPoint1.clientY - oldPoint2.clientY));
+                  const dX = -1 * Math.sign(dW);
+                  const dY = -1 * Math.sign(dH);
+
+                  if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) {
+                        const doc = Document(this.props.Document);
+                        const layoutDoc = Document(Doc.Layout(this.props.Document));
+                        let nwidth = Doc.NativeWidth(layoutDoc);
+                        let nheight = Doc.NativeHeight(layoutDoc);
+                        const width = (layoutDoc._width || 0);
+                        const height = (layoutDoc._height || (nheight / nwidth * width));
+                        const scale = this.props.ScreenToLocalTransform().Scale * this.ContentScale;
+                        const actualdW = Math.max(width + (dW * scale), 20);
+                        const actualdH = Math.max(height + (dH * scale), 20);
+                        doc.x = (doc.x || 0) + dX * (actualdW - width);
+                        doc.y = (doc.y || 0) + dY * (actualdH - height);
+                        const fixedAspect = e.ctrlKey || (nwidth && nheight);
+                        if (fixedAspect && (!nwidth || !nheight)) {
+                              Doc.SetNativeWidth(layoutDoc, nwidth = layoutDoc._width || 0);
+                              Doc.SetNativeHeight(layoutDoc, nheight = layoutDoc._height || 0);
                         }
-                        layoutDoc._width = actualdW;
-                        if (fixedAspect && !this.props.DocumentView().fitWidth) layoutDoc._height = nheight / nwidth * layoutDoc._width;
-                        else layoutDoc._height = actualdH;
-                    }
-                    else {
-                        if (!fixedAspect) {
-                            Doc.SetNativeHeight(layoutDoc, actualdH / (layoutDoc._height || 1) * Doc.NativeHeight(doc));
+                        if (nwidth > 0 && nheight > 0) {
+                              if (Math.abs(dW) > Math.abs(dH)) {
+                                    if (!fixedAspect) {
+                                          Doc.SetNativeWidth(layoutDoc, actualdW / (layoutDoc._width || 1) * Doc.NativeWidth(layoutDoc));
+                                    }
+                                    layoutDoc._width = actualdW;
+                                    if (fixedAspect && !this.props.DocumentView().fitWidth) layoutDoc._height = nheight / nwidth * layoutDoc._width;
+                                    else layoutDoc._height = actualdH;
+                              }
+                              else {
+                                    if (!fixedAspect) {
+                                          Doc.SetNativeHeight(layoutDoc, actualdH / (layoutDoc._height || 1) * Doc.NativeHeight(doc));
+                                    }
+                                    layoutDoc._height = actualdH;
+                                    if (fixedAspect && !this.props.DocumentView().fitWidth) layoutDoc._width = nwidth / nheight * layoutDoc._height;
+                                    else layoutDoc._width = actualdW;
+                              }
+                        } else {
+                              dW && (layoutDoc._width = actualdW);
+                              dH && (layoutDoc._height = actualdH);
+                              dH && layoutDoc._autoHeight && (layoutDoc._autoHeight = false);
                         }
-                        layoutDoc._height = actualdH;
-                        if (fixedAspect && !this.props.DocumentView().fitWidth) layoutDoc._width = nwidth / nheight * layoutDoc._height;
-                        else layoutDoc._width = actualdW;
-                    }
-                } else {
-                    dW && (layoutDoc._width = actualdW);
-                    dH && (layoutDoc._height = actualdH);
-                    dH && layoutDoc._autoHeight && (layoutDoc._autoHeight = false);
-                }
+                  }
+                  e.stopPropagation();
+                  e.preventDefault();
             }
-            e.stopPropagation();
-            e.preventDefault();
-        }
-    }
-
-    @action
-    onRadialMenu = (e: Event, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): void => {
-        const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1];
-        RadialMenu.Instance.openMenu(pt.pageX - 15, pt.pageY - 15);
-
-        // RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "add:right"), icon: "map-pin", selected: -1 });
-        const effectiveAcl = GetEffectiveAcl(this.props.Document[DataSym]);
-        (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) && RadialMenu.Instance.addItem({ description: "Delete", event: () => { this.props.ContainingCollectionView?.removeDocument(this.props.Document), RadialMenu.Instance.closeMenu(); }, icon: "external-link-square-alt", selected: -1 });
-        // RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, "add:right"), icon: "trash", selected: -1 });
-        RadialMenu.Instance.addItem({ description: "Pin", event: () => this.props.pinToPres(this.props.Document), icon: "map-pin", selected: -1 });
-        RadialMenu.Instance.addItem({ description: "Open", event: () => MobileInterface.Instance.handleClick(this.props.Document), icon: "trash", selected: -1 });
-
-        SelectionManager.DeselectAll();
-    }
-
-    startDragging(x: number, y: number, dropAction: dropActionType, hideSource = false) {
-        if (this._mainCont.current) {
-            const dragData = new DragManager.DocumentDragData([this.props.Document]);
-            const [left, top] = this.props.ScreenToLocalTransform().scale(this.ContentScale).inverse().transformPoint(0, 0);
-            dragData.offset = this.props.ScreenToLocalTransform().scale(this.ContentScale).transformDirection(x - left, y - top);
-            dragData.offset[0] = Math.min(this.rootDoc[WidthSym](), dragData.offset[0]);
-            dragData.offset[1] = Math.min(this.rootDoc[HeightSym](), dragData.offset[1]);
-            dragData.dropAction = dropAction;
-            dragData.treeViewDoc = this.props.treeViewDoc;
-            dragData.removeDocument = this.props.removeDocument;
-            dragData.moveDocument = this.props.moveDocument;
-            const ffview = this.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView;
-            ffview && runInAction(() => (ffview.ChildDrag = this.props.DocumentView()));
-            DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, { hideSource: hideSource || (!dropAction && !this.layoutDoc.onDragStart) },
-                () => setTimeout(action(() => ffview && (ffview.ChildDrag = undefined)))); // this needs to happen after the drop event is processed.
-            ffview?.setupDragLines(false);
-        }
-    }
-
-    onKeyDown = (e: React.KeyboardEvent) => {
-        if (e.altKey && !e.nativeEvent.cancelBubble) {
-            e.stopPropagation();
-            e.preventDefault();
-            if (e.key === "†" || e.key === "t") {
-                if (!StrCast(this.layoutDoc._showTitle)) this.layoutDoc._showTitle = "title";
-                if (!this._titleRef.current) setTimeout(() => this._titleRef.current?.setIsFocused(true), 0);
-                else if (!this._titleRef.current.setIsFocused(true)) { // if focus didn't change, focus on interior text...
-                    this._titleRef.current?.setIsFocused(false);
-                    this._componentView?.setFocus?.();
-                }
+      }
+
+      @action
+      onRadialMenu = (e: Event, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): void => {
+            const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1];
+            RadialMenu.Instance.openMenu(pt.pageX - 15, pt.pageY - 15);
+
+            // RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "add:right"), icon: "map-pin", selected: -1 });
+            const effectiveAcl = GetEffectiveAcl(this.props.Document[DataSym]);
+            (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) && RadialMenu.Instance.addItem({ description: "Delete", event: () => { this.props.ContainingCollectionView?.removeDocument(this.props.Document), RadialMenu.Instance.closeMenu(); }, icon: "external-link-square-alt", selected: -1 });
+            // RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, "add:right"), icon: "trash", selected: -1 });
+            RadialMenu.Instance.addItem({ description: "Pin", event: () => this.props.pinToPres(this.props.Document), icon: "map-pin", selected: -1 });
+            RadialMenu.Instance.addItem({ description: "Open", event: () => MobileInterface.Instance.handleClick(this.props.Document), icon: "trash", selected: -1 });
+
+            SelectionManager.DeselectAll();
+      }
+
+      startDragging(x: number, y: number, dropAction: dropActionType, hideSource = false) {
+            if (this._mainCont.current) {
+                  const dragData = new DragManager.DocumentDragData([this.props.Document]);
+                  const [left, top] = this.props.ScreenToLocalTransform().scale(this.ContentScale).inverse().transformPoint(0, 0);
+                  dragData.offset = this.props.ScreenToLocalTransform().scale(this.ContentScale).transformDirection(x - left, y - top);
+                  dragData.offset[0] = Math.min(this.rootDoc[WidthSym](), dragData.offset[0]);
+                  dragData.offset[1] = Math.min(this.rootDoc[HeightSym](), dragData.offset[1]);
+                  dragData.dropAction = dropAction;
+                  dragData.treeViewDoc = this.props.treeViewDoc;
+                  dragData.removeDocument = this.props.removeDocument;
+                  dragData.moveDocument = this.props.moveDocument;
+                  const ffview = this.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView;
+                  ffview && runInAction(() => (ffview.ChildDrag = this.props.DocumentView()));
+                  DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, { hideSource: hideSource || (!dropAction && !this.layoutDoc.onDragStart) },
+                        () => setTimeout(action(() => ffview && (ffview.ChildDrag = undefined)))); // this needs to happen after the drop event is processed.
+                  ffview?.setupDragLines(false);
             }
-        }
-    }
-
-    focus = (anchor: Doc, options?: DocFocusOptions) => {
-        LightboxView.SetCookie(StrCast(anchor["cookies-set"]));
-        // copying over VIEW fields immediately allows the view type to switch to create the right _componentView
-        Array.from(Object.keys(Doc.GetProto(anchor))).filter(key => key.startsWith(ViewSpecPrefix)).forEach(spec => {
-            this.layoutDoc[spec.replace(ViewSpecPrefix, "")] = ((field) => field instanceof ObjectField ? ObjectField.MakeCopy(field) : field)(anchor[spec]);
-        });
-        // after  a timeout, the right _componentView should have been created, so call it to update its view spec values
-        setTimeout(() => this._componentView?.setViewSpec?.(anchor, LinkDocPreview.LinkInfo ? true : false));
-        const focusSpeed = this._componentView?.scrollFocus?.(anchor, !options?.instant || !LinkDocPreview.LinkInfo); // bcz: smooth parameter should really be passed into focus() instead of inferred here
-        const endFocus = focusSpeed === undefined ? options?.afterFocus : async (moved: boolean) => options?.afterFocus ? options?.afterFocus(true) : ViewAdjustment.doNothing;
-        this.props.focus(options?.docTransform ? anchor : this.rootDoc, {
-            ...options, afterFocus: (didFocus: boolean) =>
-                new Promise<ViewAdjustment>(res => setTimeout(async () => res(endFocus ? await endFocus(didFocus) : ViewAdjustment.doNothing), focusSpeed ?? 0))
-        });
-
-    }
-    onClick = action((e: React.MouseEvent | React.PointerEvent) => {
-        if (!e.nativeEvent.cancelBubble && !this.Document.ignoreClick && this.props.renderDepth >= 0 &&
-            (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) {
-            let stopPropagate = true;
-            let preventDefault = true;
-            (this.rootDoc._raiseWhenDragged === undefined ? Doc.UserDoc()._raiseWhenDragged : this.rootDoc._raiseWhenDragged) && this.props.bringToFront(this.rootDoc);
-            if (this._doubleTap && (this.props.Document.type !== DocumentType.FONTICON || this.onDoubleClickHandler)) {// && !this.onClickHandler?.script) { // disable double-click to show full screen for things that have an on click behavior since clicking them twice can be misinterpreted as a double click
-                if (this._timeout) {
-                    clearTimeout(this._timeout);
-                    this._pendingDoubleClick = false;
-                    this._timeout = undefined;
-                }
-                if (this.onDoubleClickHandler?.script && !StrCast(Doc.LayoutField(this.layoutDoc))?.includes(ScriptingBox.name)) { // bcz: hack? don't execute script if you're clicking on a scripting box itself
-                    const { clientX, clientY, shiftKey } = e;
-                    const func = () => this.onDoubleClickHandler.script.run({
-                        this: this.layoutDoc,
-                        self: this.rootDoc,
-                        scriptContext: this.props.scriptContext,
-                        thisContainer: this.props.ContainingCollectionDoc,
-                        documentView: this.props.DocumentView(),
-                        clientX, clientY, shiftKey
-                    }, console.log);
-                    UndoManager.RunInBatch(() => func().result?.select === true ? this.props.select(false) : "", "on double click");
-                } else if (!Doc.IsSystem(this.rootDoc)) {
-                    UndoManager.RunInBatch(() =>
-                        LightboxView.AddDocTab(this.rootDoc, "lightbox", this.props.LayoutTemplate?.())
-                        , "double tap");
-                    SelectionManager.DeselectAll();
-                    Doc.UnBrushDoc(this.props.Document);
-                }
-            } else if (this.onClickHandler?.script && !StrCast(Doc.LayoutField(this.layoutDoc))?.includes(ScriptingBox.name)) { // bcz: hack? don't execute script if you're clicking on a scripting box itself
-                const { clientX, clientY, shiftKey } = e;
-                const func = () => this.onClickHandler.script.run({
-                    this: this.layoutDoc,
-                    self: this.rootDoc,
-                    _readOnly_: false,
-                    scriptContext: this.props.scriptContext,
-                    thisContainer: this.props.ContainingCollectionDoc,
-                    documentView: this.props.DocumentView(),
-                    clientX, clientY, shiftKey
-                }, console.log).result?.select === true ? this.props.select(false) : "";
-                const clickFunc = () => this.props.Document.dontUndo ? func() : UndoManager.RunInBatch(func, "on click");
-                if (this.onDoubleClickHandler) {
-                    runInAction(() => this._pendingDoubleClick = true);
-                    this._timeout = setTimeout(() => { this._timeout = undefined; clickFunc(); }, 350);
-                } else clickFunc();
-            } else if (this.allLinks && this.Document.type !== DocumentType.LINK && this.Document.isLinkButton && !e.shiftKey && !e.ctrlKey) {
-                this.allLinks.length && LinkManager.FollowLink(undefined, this.props.Document, this.props, e.altKey);
-            } else {
-                if ((this.layoutDoc.onDragStart || this.props.Document.rootDocument) && !(e.ctrlKey || e.button > 0)) {  // onDragStart implies a button doc that we don't want to select when clicking.   RootDocument & isTemplaetForField implies we're clicking on part of a template instance and we want to select the whole template, not the part
-                    stopPropagate = false; // don't stop propagation for field templates -- want the selection to propagate up to the root document of the template
-                } else {
-                    runInAction(() => this._pendingDoubleClick = true);
-                    this._timeout = setTimeout(action(() => { this._pendingDoubleClick = false; this._timeout = undefined; }), 350);
-                    this.props.select(e.ctrlKey || e.shiftKey);
-                }
-                preventDefault = false;
+      }
+
+      onKeyDown = (e: React.KeyboardEvent) => {
+            if (e.altKey && !e.nativeEvent.cancelBubble) {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  if (e.key === "†" || e.key === "t") {
+                        if (!StrCast(this.layoutDoc._showTitle)) this.layoutDoc._showTitle = "title";
+                        if (!this._titleRef.current) setTimeout(() => this._titleRef.current?.setIsFocused(true), 0);
+                        else if (!this._titleRef.current.setIsFocused(true)) { // if focus didn't change, focus on interior text...
+                              this._titleRef.current?.setIsFocused(false);
+                              this._componentView?.setFocus?.();
+                        }
+                  }
             }
-            stopPropagate && e.stopPropagation();
-            preventDefault && e.preventDefault();
-        }
-    });
-
-    onPointerDown = (e: React.PointerEvent): void => {
-        if (this.rootDoc.type === DocumentType.INK && CurrentUserUtils.SelectedTool === InkTool.Eraser) return;
-        // continue if the event hasn't been canceled AND we are using a mouse or this has an onClick or onDragStart function (meaning it is a button document)
-        if (!(InteractionUtils.IsType(e, InteractionUtils.MOUSETYPE) || [InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(CurrentUserUtils.SelectedTool))) {
-            if (!InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) {
-                e.stopPropagation();
-                if (SelectionManager.IsSelected(this.props.DocumentView(), true) && this.props.Document._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it
-                // TODO: check here for panning/inking
+      }
+
+      focus = (anchor: Doc, options?: DocFocusOptions) => {
+            LightboxView.SetCookie(StrCast(anchor["cookies-set"]));
+            // copying over VIEW fields immediately allows the view type to switch to create the right _componentView
+            Array.from(Object.keys(Doc.GetProto(anchor))).filter(key => key.startsWith(ViewSpecPrefix)).forEach(spec => {
+                  this.layoutDoc[spec.replace(ViewSpecPrefix, "")] = ((field) => field instanceof ObjectField ? ObjectField.MakeCopy(field) : field)(anchor[spec]);
+            });
+            // after  a timeout, the right _componentView should have been created, so call it to update its view spec values
+            setTimeout(() => this._componentView?.setViewSpec?.(anchor, LinkDocPreview.LinkInfo ? true : false));
+            const focusSpeed = this._componentView?.scrollFocus?.(anchor, !options?.instant || !LinkDocPreview.LinkInfo); // bcz: smooth parameter should really be passed into focus() instead of inferred here
+            const endFocus = focusSpeed === undefined ? options?.afterFocus : async (moved: boolean) => options?.afterFocus ? options?.afterFocus(true) : ViewAdjustment.doNothing;
+            this.props.focus(options?.docTransform ? anchor : this.rootDoc, {
+                  ...options, afterFocus: (didFocus: boolean) =>
+                        new Promise<ViewAdjustment>(res => setTimeout(async () => res(endFocus ? await endFocus(didFocus) : ViewAdjustment.doNothing), focusSpeed ?? 0))
+            });
+
+      }
+      onClick = action((e: React.MouseEvent | React.PointerEvent) => {
+            if (!e.nativeEvent.cancelBubble && !this.Document.ignoreClick && this.props.renderDepth >= 0 &&
+                  (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) {
+                  let stopPropagate = true;
+                  let preventDefault = true;
+                  (this.rootDoc._raiseWhenDragged === undefined ? Doc.UserDoc()._raiseWhenDragged : this.rootDoc._raiseWhenDragged) && this.props.bringToFront(this.rootDoc);
+                  if (this._doubleTap && (this.props.Document.type !== DocumentType.FONTICON || this.onDoubleClickHandler)) {// && !this.onClickHandler?.script) { // disable double-click to show full screen for things that have an on click behavior since clicking them twice can be misinterpreted as a double click
+                        if (this._timeout) {
+                              clearTimeout(this._timeout);
+                              this._pendingDoubleClick = false;
+                              this._timeout = undefined;
+                        }
+                        if (this.onDoubleClickHandler?.script && !StrCast(Doc.LayoutField(this.layoutDoc))?.includes(ScriptingBox.name)) { // bcz: hack? don't execute script if you're clicking on a scripting box itself
+                              const { clientX, clientY, shiftKey } = e;
+                              const func = () => this.onDoubleClickHandler.script.run({
+                                    this: this.layoutDoc,
+                                    self: this.rootDoc,
+                                    scriptContext: this.props.scriptContext,
+                                    thisContainer: this.props.ContainingCollectionDoc,
+                                    documentView: this.props.DocumentView(),
+                                    clientX, clientY, shiftKey
+                              }, console.log);
+                              UndoManager.RunInBatch(() => func().result?.select === true ? this.props.select(false) : "", "on double click");
+                        } else if (!Doc.IsSystem(this.rootDoc)) {
+                              UndoManager.RunInBatch(() =>
+                                    LightboxView.AddDocTab(this.rootDoc, "lightbox", this.props.LayoutTemplate?.())
+                                    , "double tap");
+                              SelectionManager.DeselectAll();
+                              Doc.UnBrushDoc(this.props.Document);
+                        }
+                  } else if (this.onClickHandler?.script && !StrCast(Doc.LayoutField(this.layoutDoc))?.includes(ScriptingBox.name)) { // bcz: hack? don't execute script if you're clicking on a scripting box itself
+                        const { clientX, clientY, shiftKey } = e;
+                        const func = () => this.onClickHandler.script.run({
+                              this: this.layoutDoc,
+                              self: this.rootDoc,
+                              _readOnly_: false,
+                              scriptContext: this.props.scriptContext,
+                              thisContainer: this.props.ContainingCollectionDoc,
+                              documentView: this.props.DocumentView(),
+                              clientX, clientY, shiftKey
+                        }, console.log).result?.select === true ? this.props.select(false) : "";
+                        const clickFunc = () => this.props.Document.dontUndo ? func() : UndoManager.RunInBatch(func, "on click");
+                        if (this.onDoubleClickHandler) {
+                              runInAction(() => this._pendingDoubleClick = true);
+                              this._timeout = setTimeout(() => { this._timeout = undefined; clickFunc(); }, 350);
+                        } else clickFunc();
+                  } else if (this.allLinks && this.Document.type !== DocumentType.LINK && this.Document.isLinkButton && !e.shiftKey && !e.ctrlKey) {
+                        this.allLinks.length && LinkManager.FollowLink(undefined, this.props.Document, this.props, e.altKey);
+                  } else {
+                        if ((this.layoutDoc.onDragStart || this.props.Document.rootDocument) && !(e.ctrlKey || e.button > 0)) {  // onDragStart implies a button doc that we don't want to select when clicking.   RootDocument & isTemplaetForField implies we're clicking on part of a template instance and we want to select the whole template, not the part
+                              stopPropagate = false; // don't stop propagation for field templates -- want the selection to propagate up to the root document of the template
+                        } else {
+                              runInAction(() => this._pendingDoubleClick = true);
+                              this._timeout = setTimeout(action(() => { this._pendingDoubleClick = false; this._timeout = undefined; }), 350);
+                              this.props.select(e.ctrlKey || e.shiftKey);
+                        }
+                        preventDefault = false;
+                  }
+                  stopPropagate && e.stopPropagation();
+                  preventDefault && e.preventDefault();
             }
-            return;
-        }
-        this._downX = e.clientX;
-        this._downY = e.clientY;
-        if ((!e.nativeEvent.cancelBubble || this.onClickHandler || this.layoutDoc.onDragStart) &&
-            // if this is part of a template, let the event go up to the tempalte root unless right/ctrl clicking
-            !(this.props.Document.rootDocument && !(e.ctrlKey || e.button > 0))) {
-            if ((this.props.isDocumentActive?.() || this.layoutDoc.onDragStart) &&
-                !this.props.onBrowseClick?.() &&
-                !this.Document.ignoreClick &&
-                !e.ctrlKey &&
-                (e.button === 0 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) &&
-                !CurrentUserUtils.OverlayDocs.includes(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._viewType !== CollectionViewType.Docking) e.preventDefault();
+      });
+
+      onPointerDown = (e: React.PointerEvent): void => {
+            if (this.rootDoc.type === DocumentType.INK && CurrentUserUtils.SelectedTool === InkTool.Eraser) return;
+            // continue if the event hasn't been canceled AND we are using a mouse or this has an onClick or onDragStart function (meaning it is a button document)
+            if (!(InteractionUtils.IsType(e, InteractionUtils.MOUSETYPE) || [InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(CurrentUserUtils.SelectedTool))) {
+                  if (!InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) {
+                        e.stopPropagation();
+                        if (SelectionManager.IsSelected(this.props.DocumentView(), true) && this.props.Document._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it
+                        // TODO: check here for panning/inking
+                  }
+                  return;
             }
-            if (this.props.isDocumentActive?.()) {
-                document.removeEventListener("pointermove", this.onPointerMove);
-                document.addEventListener("pointermove", this.onPointerMove);
+            this._downX = e.clientX;
+            this._downY = e.clientY;
+            if ((!e.nativeEvent.cancelBubble || this.onClickHandler || this.layoutDoc.onDragStart) &&
+                  // if this is part of a template, let the event go up to the tempalte root unless right/ctrl clicking
+                  !(this.props.Document.rootDocument && !(e.ctrlKey || e.button > 0))) {
+                  if ((this.props.isDocumentActive?.() || this.layoutDoc.onDragStart) &&
+                        !this.props.onBrowseClick?.() &&
+                        !this.Document.ignoreClick &&
+                        !e.ctrlKey &&
+                        (e.button === 0 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) &&
+                        !CurrentUserUtils.OverlayDocs.includes(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._viewType !== CollectionViewType.Docking) e.preventDefault();
+                  }
+                  if (this.props.isDocumentActive?.()) {
+                        document.removeEventListener("pointermove", this.onPointerMove);
+                        document.addEventListener("pointermove", this.onPointerMove);
+                  }
+                  document.removeEventListener("pointerup", this.onPointerUp);
+                  document.addEventListener("pointerup", this.onPointerUp);
             }
+      }
+
+      onPointerMove = (e: PointerEvent): void => {
+            if (e.cancelBubble) return;
+            if ((InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || [InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(CurrentUserUtils.SelectedTool))) return;
+
+            if ((this.props.isDocumentActive?.() || this.layoutDoc.onDragStart) && !this.layoutDoc._lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) {
+                  if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
+                        if (!e.altKey && (!this.topMost || this.layoutDoc.onDragStart || this.onClickHandler) && (e.buttons === 1 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE))) {
+                              document.removeEventListener("pointermove", this.onPointerMove);
+                              document.removeEventListener("pointerup", this.onPointerUp);
+                              this.startDragging(this._downX, this._downY, ((e.ctrlKey || e.altKey) && "alias") || (this.props.dropAction || this.Document.dropAction || undefined) as dropActionType);
+                        }
+                  }
+                  e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document'  however it does mark the event as cancelBubble=true which we test for in the move event handlers
+                  e.preventDefault();
+            }
+      }
+
+      cleanupPointerEvents = () => {
+            this.cleanUpInteractions();
+            document.removeEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
-            document.addEventListener("pointerup", this.onPointerUp);
-        }
-    }
-
-    onPointerMove = (e: PointerEvent): void => {
-        if (e.cancelBubble) return;
-        if ((InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || [InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(CurrentUserUtils.SelectedTool))) return;
-
-        if ((this.props.isDocumentActive?.() || this.layoutDoc.onDragStart) && !this.layoutDoc._lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) {
-            if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
-                if (!e.altKey && (!this.topMost || this.layoutDoc.onDragStart || this.onClickHandler) && (e.buttons === 1 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE))) {
-                    document.removeEventListener("pointermove", this.onPointerMove);
-                    document.removeEventListener("pointerup", this.onPointerUp);
-                    this.startDragging(this._downX, this._downY, ((e.ctrlKey || e.altKey) && "alias") || (this.props.dropAction || this.Document.dropAction || undefined) as dropActionType);
-                }
+      }
+
+      onPointerUp = (e: PointerEvent): void => {
+            this.cleanupPointerEvents();
+
+            if (this.onPointerUpHandler?.script && !InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) {
+                  this.onPointerUpHandler.script.run({ self: this.rootDoc, this: this.layoutDoc }, console.log);
+            } else {
+                  this._doubleTap = (Date.now() - this._lastTap < 300 && e.button === 0 && Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2);
+                  // bcz: this is a placeholder.  documents, when selected, should stopPropagation on doubleClicks if they want to keep the DocumentView from getting them
+                  if (!this.props.isSelected(true) || ![DocumentType.PDF, DocumentType.RTF].includes(StrCast(this.rootDoc.type) as any)) this._lastTap = Date.now();// don't want to process the start of a double tap if the doucment is selected
+            }
+      }
+
+      @undoBatch @action
+      toggleFollowLink = (location: Opt<string>, zoom?: boolean, setPushpin?: boolean): void => {
+            this.Document.ignoreClick = false;
+            if (setPushpin) {
+                  this.Document.isPushpin = !this.Document.isPushpin;
+                  this.Document._isLinkButton = this.Document.isPushpin || this.Document._isLinkButton;
+            } else {
+                  this.Document._isLinkButton = !this.Document._isLinkButton;
             }
-            e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document'  however it does mark the event as cancelBubble=true which we test for in the move event handlers
-            e.preventDefault();
-        }
-    }
-
-    cleanupPointerEvents = () => {
-        this.cleanUpInteractions();
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-    }
-
-    onPointerUp = (e: PointerEvent): void => {
-        this.cleanupPointerEvents();
-
-        if (this.onPointerUpHandler?.script && !InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) {
-            this.onPointerUpHandler.script.run({ self: this.rootDoc, this: this.layoutDoc }, console.log);
-        } else {
-            this._doubleTap = (Date.now() - this._lastTap < 300 && e.button === 0 && Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2);
-            // bcz: this is a placeholder.  documents, when selected, should stopPropagation on doubleClicks if they want to keep the DocumentView from getting them
-            if (!this.props.isSelected(true) || ![DocumentType.PDF, DocumentType.RTF].includes(StrCast(this.rootDoc.type) as any)) this._lastTap = Date.now();// don't want to process the start of a double tap if the doucment is selected
-        }
-    }
-
-    @undoBatch @action
-    toggleFollowLink = (location: Opt<string>, zoom?: boolean, setPushpin?: boolean): void => {
-        this.Document.ignoreClick = false;
-        if (setPushpin) {
-            this.Document.isPushpin = !this.Document.isPushpin;
-            this.Document._isLinkButton = this.Document.isPushpin || this.Document._isLinkButton;
-        } else {
-            this.Document._isLinkButton = !this.Document._isLinkButton;
-        }
-        if (this.Document._isLinkButton && !this.onClickHandler) {
-            zoom !== undefined && (this.Document.followLinkZoom = zoom);
+            if (this.Document._isLinkButton && !this.onClickHandler) {
+                  zoom !== undefined && (this.Document.followLinkZoom = zoom);
+                  this.Document.followLinkLocation = location;
+            } else if (this.Document._isLinkButton && this.onClickHandler) {
+                  this.Document._isLinkButton = false;
+                  this.Document["onClick-rawScript"] = this.dataDoc["onClick-rawScript"] = this.dataDoc.onClick = this.Document.onClick = this.layoutDoc.onClick = undefined;
+            }
+      }
+      @undoBatch @action
+      toggleTargetOnClick = (): void => {
+            this.Document.ignoreClick = false;
+            this.Document._isLinkButton = true;
+            this.Document.isPushpin = true;
+      }
+      @undoBatch @action
+      followLinkOnClick = (location: Opt<string>, zoom: boolean,): void => {
+            this.Document.ignoreClick = false;
+            this.Document._isLinkButton = true;
+            this.Document.isPushpin = false;
+            this.Document.followLinkZoom = zoom;
             this.Document.followLinkLocation = location;
-        } else if (this.Document._isLinkButton && this.onClickHandler) {
+      }
+      @undoBatch @action
+      selectOnClick = (): void => {
+            this.Document.ignoreClick = false;
             this.Document._isLinkButton = false;
-            this.Document["onClick-rawScript"] = this.dataDoc["onClick-rawScript"] = this.dataDoc.onClick = this.Document.onClick = this.layoutDoc.onClick = undefined;
-        }
-    }
-    @undoBatch @action
-    toggleTargetOnClick = (): void => {
-        this.Document.ignoreClick = false;
-        this.Document._isLinkButton = true;
-        this.Document.isPushpin = true;
-    }
-    @undoBatch @action
-    followLinkOnClick = (location: Opt<string>, zoom: boolean,): void => {
-        this.Document.ignoreClick = false;
-        this.Document._isLinkButton = true;
-        this.Document.isPushpin = false;
-        this.Document.followLinkZoom = zoom;
-        this.Document.followLinkLocation = location;
-    }
-    @undoBatch @action
-    selectOnClick = (): void => {
-        this.Document.ignoreClick = false;
-        this.Document._isLinkButton = false;
-        this.Document.isPushpin = false;
-        this.Document.onClick = this.layoutDoc.onClick = undefined;
-    }
-    @undoBatch
-    noOnClick = (): void => {
-        this.Document.ignoreClick = false;
-        this.Document._isLinkButton = false;
-    }
-
-    @undoBatch deleteClicked = () => this.props.removeDocument?.(this.props.Document);
-    @undoBatch setToggleDetail = () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(documentView, "${StrCast(this.Document.layoutKey).replace("layout_", "")}")`, { documentView: "any" });
-
-    @undoBatch @action
-    drop = async (e: Event, de: DragManager.DropEvent) => {
-        if (this.props.dontRegisterView || this.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) return;
-        if (this.props.Document === CurrentUserUtils.ActiveDashboard) {
-            alert((e.target as any)?.closest?.("*.lm_content") ?
-                "You can't perform this move most likely because you don't have permission to modify the destination." :
-                "Linking to document tabs not yet supported. Drop link on document content.");
-            return;
-        }
-        const linkdrag = de.complete.annoDragData ?? de.complete.linkDragData;
-        if (linkdrag) linkdrag.linkSourceDoc = linkdrag.linkSourceGetAnchor();
-        if (linkdrag?.linkSourceDoc) {
-            e.stopPropagation();
-            if (de.complete.annoDragData && !de.complete.annoDragData.dropDocument) {
-                de.complete.annoDragData.dropDocument = de.complete.annoDragData.dropDocCreator(undefined);
+            this.Document.isPushpin = false;
+            this.Document.onClick = this.layoutDoc.onClick = undefined;
+      }
+      @undoBatch
+      noOnClick = (): void => {
+            this.Document.ignoreClick = false;
+            this.Document._isLinkButton = false;
+      }
+
+      @undoBatch deleteClicked = () => this.props.removeDocument?.(this.props.Document);
+      @undoBatch setToggleDetail = () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(documentView, "${StrCast(this.Document.layoutKey).replace("layout_", "")}")`, { documentView: "any" });
+
+      @undoBatch @action
+      drop = async (e: Event, de: DragManager.DropEvent) => {
+            if (this.props.dontRegisterView || this.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) return;
+            if (this.props.Document === CurrentUserUtils.ActiveDashboard) {
+                  alert((e.target as any)?.closest?.("*.lm_content") ?
+                        "You can't perform this move most likely because you don't have permission to modify the destination." :
+                        "Linking to document tabs not yet supported. Drop link on document content.");
+                  return;
             }
-            if (de.complete.annoDragData || this.rootDoc !== linkdrag.linkSourceDoc.context) {
-                const dropDoc = de.complete.annoDragData?.dropDocument ?? this._componentView?.getAnchor?.() ?? this.props.Document;
-                de.complete.linkDocument = DocUtils.MakeLink({ doc: linkdrag.linkSourceDoc }, { doc: dropDoc }, undefined, undefined, undefined, undefined, [de.x, de.y - 50]);
+            const linkdrag = de.complete.annoDragData ?? de.complete.linkDragData;
+            if (linkdrag) linkdrag.linkSourceDoc = linkdrag.linkSourceGetAnchor();
+            if (linkdrag?.linkSourceDoc) {
+                  e.stopPropagation();
+                  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.context) {
+                        const dropDoc = de.complete.annoDragData?.dropDocument ?? this._componentView?.getAnchor?.() ?? this.props.Document;
+                        de.complete.linkDocument = DocUtils.MakeLink({ doc: linkdrag.linkSourceDoc }, { doc: dropDoc }, undefined, undefined, undefined, undefined, [de.x, de.y - 50]);
+                  }
             }
-        }
-    }
-
-    @undoBatch
-    @action
-    makeIntoPortal = async () => {
-        const portalLink = this.allLinks.find(d => d.anchor1 === this.props.Document);
-        if (!portalLink) {
-            const portal = Docs.Create.FreeformDocument([], { _width: NumCast(this.layoutDoc._width) + 10, _height: NumCast(this.layoutDoc._height), _fitWidth: true, title: StrCast(this.props.Document.title) + " [Portal]" });
-            DocUtils.MakeLink({ doc: this.props.Document }, { doc: portal }, "portal to:portal from");
-        }
-        this.Document.followLinkLocation = "inPlace";
-        this.Document.followLinkZoom = true;
-        this.Document._isLinkButton = true;
-    }
-
-    @action
-    onContextMenu = (e?: React.MouseEvent, pageX?: number, pageY?: number) => {
-        if (e && this.rootDoc._hideContextMenu && Doc.UserDoc().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;
+      }
+
+      @undoBatch
+      @action
+      makeIntoPortal = async () => {
+            const portalLink = this.allLinks.find(d => d.anchor1 === this.props.Document);
+            if (!portalLink) {
+                  const portal = Docs.Create.FreeformDocument([], { _width: NumCast(this.layoutDoc._width) + 10, _height: NumCast(this.layoutDoc._height), _fitWidth: true, title: StrCast(this.props.Document.title) + " [Portal]" });
+                  DocUtils.MakeLink({ doc: this.props.Document }, { doc: portal }, "portal to:portal from");
             }
-            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;
+            this.Document.followLinkLocation = "inPlace";
+            this.Document.followLinkZoom = true;
+            this.Document._isLinkButton = true;
+      }
+
+      @action
+      onContextMenu = (e?: React.MouseEvent, pageX?: number, pageY?: number) => {
+            if (e && this.rootDoc._hideContextMenu && Doc.UserDoc().noviceMode) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  //!this.props.isSelected(true) && SelectionManager.SelectView(this.props.DocumentView(), false);
             }
-        }
-
-        const cm = ContextMenu.Instance;
-        if (!cm || (e as any)?.nativeEvent?.SchemaHandled) return;
-
-        if (e && !(e.nativeEvent as any).dash) {
-            const onDisplay = () => setTimeout(() => {
-                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(() => {
-                    const ele = document.elementFromPoint(e.clientX, e.clientY);
-                    simulateMouseClick(ele, 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.layoutKey)], Doc, null);
-            const appearance = cm.findByDescription("UI Controls...");
-            const appearanceItems: ContextMenuProps[] = appearance && "subitems" in appearance ? appearance.subitems : [];
-            !Doc.UserDoc().noviceMode && templateDoc && appearanceItems.push({ description: "Open Template   ", event: () => this.props.addDocTab(templateDoc, "add:right"), icon: "eye" });
-            !Doc.UserDoc().noviceMode && appearanceItems.push({
-                description: "Add a Field", event: () => {
-                    const alias = Doc.MakeAlias(this.rootDoc);
-                    alias.layout = FormattedTextBox.LayoutString("newfield");
-                    alias.title = "newfield";
-                    alias._height = 35;
-                    alias._width = 100;
-                    alias.syncLayoutFieldWithTitle = true;
-                    alias.x = NumCast(this.rootDoc.x) + NumCast(this.rootDoc.width);
-                    alias.y = NumCast(this.rootDoc.y);
-                    this.props.addDocument?.(alias);
-                }, icon: "eye"
-            });
-            DocListCast(this.Document.links).length && appearanceItems.splice(0, 0, { description: `${this.layoutDoc.hideLinkButton ? "Show" : "Hide"} Link Button`, event: action(() => this.layoutDoc.hideLinkButton = !this.layoutDoc.hideLinkButton), icon: "eye" });
-            !appearance && cm.addItem({ description: "UI Controls...", subitems: appearanceItems, icon: "compass" });
-
-            if (!Doc.IsSystem(this.rootDoc) && this.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Tree) {
-                !Doc.UserDoc().noviceMode && appearanceItems.splice(0, 0, { description: `${!this.layoutDoc._showAudio ? "Show" : "Hide"} Audio Button`, event: action(() => this.layoutDoc._showAudio = !this.layoutDoc._showAudio), icon: "microphone" });
-                const existingOnClick = cm.findByDescription("OnClick...");
-                const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : [];
-
-                const zorders = cm.findByDescription("ZOrder...");
-                const zorderItems: ContextMenuProps[] = zorders && "subitems" in zorders ? zorders.subitems : [];
-                if (this.props.bringToFront !== emptyFunction) {
-                    zorderItems.push({ description: "Bring to Front", event: () => SelectionManager.Views().forEach(dv => dv.props.bringToFront(dv.rootDoc, false)), icon: "expand-arrows-alt" });
-                    zorderItems.push({ description: "Send to Back", event: () => SelectionManager.Views().forEach(dv => dv.props.bringToFront(dv.rootDoc, true)), icon: "expand-arrows-alt" });
-                    zorderItems.push({ description: this.rootDoc._raiseWhenDragged !== false ? "Keep ZIndex when dragged" : "Allow ZIndex to change when dragged", event: undoBatch(action(() => this.rootDoc._raiseWhenDragged = this.rootDoc._raiseWhenDragged === undefined ? false : undefined)), icon: "expand-arrows-alt" });
-                }
-                !zorders && cm.addItem({ description: "ZOrder...", noexpand: true, subitems: zorderItems, icon: "compass" });
-
-                !Doc.UserDoc().noviceMode && onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" });
-                !Doc.UserDoc().noviceMode && onClicks.push({ description: "Toggle Detail", event: this.setToggleDetail, icon: "concierge-bell" });
-                this.props.CollectionFreeFormDocumentView && onClicks.push({ description: (this.Document.followLinkZoom ? "Don't" : "") + " zoom following link", event: () => this.Document.followLinkZoom = !this.Document.followLinkZoom, icon: this.Document.ignoreClick ? "unlock" : "lock" });
-
-                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.Document.ignoreClick ? "Select" : "Do Nothing", event: () => this.Document.ignoreClick = !this.Document.ignoreClick, icon: this.Document.ignoreClick ? "unlock" : "lock" });
-                    onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: () => this.toggleFollowLink("inPlace", true, false), icon: "link" });
-                    !this.Document.isLinkButton && onClicks.push({ description: "Follow Link on Right", event: () => this.toggleFollowLink("add:right", false, false), icon: "link" });
-                    onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: () => this.toggleFollowLink(undefined, false, false), icon: "link" });
-                    onClicks.push({ description: (this.Document.isPushpin ? "Remove" : "Make") + " Pushpin", event: () => this.toggleFollowLink(undefined, false, true), icon: "map-pin" });
-                    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...", addDivider: true, noexpand: true, subitems: onClicks, icon: "mouse-pointer" });
-                } else if (DocListCast(this.Document.links).length) {
-                    onClicks.push({ description: "Select on Click", event: () => this.selectOnClick(), icon: "link" });
-                    onClicks.push({ description: "Follow Link on Click", event: () => this.followLinkOnClick(undefined, false), icon: "link" });
-                    onClicks.push({ description: "Toggle Link Target on Click", event: () => this.toggleTargetOnClick(), icon: "map-pin" });
-                    !existingOnClick && cm.addItem({ description: "OnClick...", addDivider: true, subitems: onClicks, icon: "mouse-pointer" });
-                }
+            // 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 funcs: ContextMenuProps[] = [];
-            if (!Doc.UserDoc().noviceMode && this.layoutDoc.onDragStart) {
-                funcs.push({ description: "Drag an Alias", icon: "edit", event: () => this.Document.dragFactory && (this.layoutDoc.onDragStart = ScriptField.MakeFunction('getAlias(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 cm = ContextMenu.Instance;
+            if (!cm || (e as any)?.nativeEvent?.SchemaHandled) return;
+
+            if (e && !(e.nativeEvent as any).dash) {
+                  const onDisplay = () => setTimeout(() => {
+                        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(() => {
+                              const ele = document.elementFromPoint(e.clientX, e.clientY);
+                              simulateMouseClick(ele, 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 more = cm.findByDescription("More...");
-            const moreItems = more && "subitems" in more ? more.subitems : [];
-            if (!Doc.IsSystem(this.rootDoc)) {
-                (this.rootDoc._viewType !== CollectionViewType.Docking || !Doc.UserDoc().noviceMode) && moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this.props.DocumentView()), icon: "users" });
-                if (!Doc.UserDoc().noviceMode) {
-                    moreItems.push({ description: "Make View of Metadata Field", event: () => Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.DataDoc), icon: "concierge-bell" });
-                    moreItems.push({ description: `${this.Document._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" });
-                }
+            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.layoutKey)], Doc, null);
+                  const appearance = cm.findByDescription("UI Controls...");
+                  const appearanceItems: ContextMenuProps[] = appearance && "subitems" in appearance ? appearance.subitems : [];
+                  !Doc.UserDoc().noviceMode && templateDoc && appearanceItems.push({ description: "Open Template   ", event: () => this.props.addDocTab(templateDoc, "add:right"), icon: "eye" });
+                  !Doc.UserDoc().noviceMode && appearanceItems.push({
+                        description: "Add a Field", event: () => {
+                              const alias = Doc.MakeAlias(this.rootDoc);
+                              alias.layout = FormattedTextBox.LayoutString("newfield");
+                              alias.title = "newfield";
+                              alias._height = 35;
+                              alias._width = 100;
+                              alias.syncLayoutFieldWithTitle = true;
+                              alias.x = NumCast(this.rootDoc.x) + NumCast(this.rootDoc.width);
+                              alias.y = NumCast(this.rootDoc.y);
+                              this.props.addDocument?.(alias);
+                        }, icon: "eye"
+                  });
+                  DocListCast(this.Document.links).length && appearanceItems.splice(0, 0, { description: `${this.layoutDoc.hideLinkButton ? "Show" : "Hide"} Link Button`, event: action(() => this.layoutDoc.hideLinkButton = !this.layoutDoc.hideLinkButton), icon: "eye" });
+                  !appearance && cm.addItem({ description: "UI Controls...", subitems: appearanceItems, icon: "compass" });
+
+                  if (!Doc.IsSystem(this.rootDoc) && this.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Tree) {
+                        !Doc.UserDoc().noviceMode && appearanceItems.splice(0, 0, { description: `${!this.layoutDoc._showAudio ? "Show" : "Hide"} Audio Button`, event: action(() => this.layoutDoc._showAudio = !this.layoutDoc._showAudio), icon: "microphone" });
+                        const existingOnClick = cm.findByDescription("OnClick...");
+                        const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : [];
+
+                        const zorders = cm.findByDescription("ZOrder...");
+                        const zorderItems: ContextMenuProps[] = zorders && "subitems" in zorders ? zorders.subitems : [];
+                        if (this.props.bringToFront !== emptyFunction) {
+                              zorderItems.push({ description: "Bring to Front", event: () => SelectionManager.Views().forEach(dv => dv.props.bringToFront(dv.rootDoc, false)), icon: "expand-arrows-alt" });
+                              zorderItems.push({ description: "Send to Back", event: () => SelectionManager.Views().forEach(dv => dv.props.bringToFront(dv.rootDoc, true)), icon: "expand-arrows-alt" });
+                              zorderItems.push({ description: this.rootDoc._raiseWhenDragged !== false ? "Keep ZIndex when dragged" : "Allow ZIndex to change when dragged", event: undoBatch(action(() => this.rootDoc._raiseWhenDragged = this.rootDoc._raiseWhenDragged === undefined ? false : undefined)), icon: "expand-arrows-alt" });
+                        }
+                        !zorders && cm.addItem({ description: "ZOrder...", noexpand: true, subitems: zorderItems, icon: "compass" });
+
+                        !Doc.UserDoc().noviceMode && onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" });
+                        !Doc.UserDoc().noviceMode && onClicks.push({ description: "Toggle Detail", event: this.setToggleDetail, icon: "concierge-bell" });
+                        this.props.CollectionFreeFormDocumentView && onClicks.push({ description: (this.Document.followLinkZoom ? "Don't" : "") + " zoom following link", event: () => this.Document.followLinkZoom = !this.Document.followLinkZoom, icon: this.Document.ignoreClick ? "unlock" : "lock" });
+
+                        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.Document.ignoreClick ? "Select" : "Do Nothing", event: () => this.Document.ignoreClick = !this.Document.ignoreClick, icon: this.Document.ignoreClick ? "unlock" : "lock" });
+                              onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: () => this.toggleFollowLink("inPlace", true, false), icon: "link" });
+                              !this.Document.isLinkButton && onClicks.push({ description: "Follow Link on Right", event: () => this.toggleFollowLink("add:right", false, false), icon: "link" });
+                              onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: () => this.toggleFollowLink(undefined, false, false), icon: "link" });
+                              onClicks.push({ description: (this.Document.isPushpin ? "Remove" : "Make") + " Pushpin", event: () => this.toggleFollowLink(undefined, false, true), icon: "map-pin" });
+                              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...", addDivider: true, noexpand: true, subitems: onClicks, icon: "mouse-pointer" });
+                        } else if (DocListCast(this.Document.links).length) {
+                              onClicks.push({ description: "Select on Click", event: () => this.selectOnClick(), icon: "link" });
+                              onClicks.push({ description: "Follow Link on Click", event: () => this.followLinkOnClick(undefined, false), icon: "link" });
+                              onClicks.push({ description: "Toggle Link Target on Click", event: () => this.toggleTargetOnClick(), icon: "map-pin" });
+                              !existingOnClick && cm.addItem({ description: "OnClick...", addDivider: true, subitems: onClicks, icon: "mouse-pointer" });
+                        }
+                  }
+
+                  const funcs: ContextMenuProps[] = [];
+                  if (!Doc.UserDoc().noviceMode && this.layoutDoc.onDragStart) {
+                        funcs.push({ description: "Drag an Alias", icon: "edit", event: () => this.Document.dragFactory && (this.layoutDoc.onDragStart = ScriptField.MakeFunction('getAlias(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)) {
+                        (this.rootDoc._viewType !== CollectionViewType.Docking || !Doc.UserDoc().noviceMode) && moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this.props.DocumentView()), icon: "users" });
+                        if (!Doc.UserDoc().noviceMode) {
+                              moreItems.push({ description: "Make View of Metadata Field", event: () => Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.DataDoc), icon: "concierge-bell" });
+                              moreItems.push({ description: `${this.Document._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" });
+                        }
+                  }
+
+                  if (this.props.removeDocument && !Doc.IsSystem(this.rootDoc) && CurrentUserUtils.ActiveDashboard !== this.props.Document) { // need option to gray out menu items ... preferably with a '?' that explains why they're grayed out (eg., no permissions)
+                        moreItems.push({ description: "Close", event: this.deleteClicked, icon: "times" });
+                  }
+                  !more && moreItems.length && cm.addItem({ description: "More...", subitems: moreItems, icon: "compass" });
+
+                  const help = cm.findByDescription("Help...");
+                  const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : [];
+                  !Doc.UserDoc().novice && helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "add:right"), icon: "layer-group" });
+                  helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument("/assets/cheat-sheet.pdf", { _width: 300, _height: 300 }), "add:right"), icon: "keyboard" });
+                  !Doc.UserDoc().novice && helpItems.push({ description: "Print Document in Console", event: () => console.log(this.props.Document), icon: "hand-point-right" });
+                  !Doc.UserDoc().novice && helpItems.push({ description: "Print DataDoc in Console", event: () => console.log(this.props.Document[DataSym]), icon: "hand-point-right" });
+                  cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" });
             }
 
-            if (this.props.removeDocument && !Doc.IsSystem(this.rootDoc) && CurrentUserUtils.ActiveDashboard !== this.props.Document) { // need option to gray out menu items ... preferably with a '?' that explains why they're grayed out (eg., no permissions)
-                moreItems.push({ description: "Close", event: this.deleteClicked, icon: "times" });
-            }
-            !more && moreItems.length && cm.addItem({ description: "More...", subitems: moreItems, icon: "compass" });
-
-            const help = cm.findByDescription("Help...");
-            const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : [];
-            !Doc.UserDoc().novice && helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "add:right"), icon: "layer-group" });
-            helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument("/assets/cheat-sheet.pdf", { _width: 300, _height: 300 }), "add:right"), icon: "keyboard" });
-            !Doc.UserDoc().novice && helpItems.push({ description: "Print Document in Console", event: () => console.log(this.props.Document), icon: "hand-point-right" });
-            !Doc.UserDoc().novice && helpItems.push({ description: "Print DataDoc in Console", event: () => console.log(this.props.Document[DataSym]), icon: "hand-point-right" });
-            cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" });
-        }
-
-        if (!this.topMost) e?.stopPropagation(); // DocumentViews should stop propagation of this event
-        cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15);
-    }
-
-    collectionFilters = () => StrListCast(this.props.Document._docFilters);
-    collectionRangeDocFilters = () => StrListCast(this.props.Document._docRangeFilters);
-    @computed get showFilterIcon() {
-        return this.collectionFilters().length || this.collectionRangeDocFilters().length ? "hasFilter" :
-            this.props.docFilters?.().filter(f => Utils.IsRecursiveFilter(f)).length || this.props.docRangeFilters().length ? "inheritsFilter" : undefined;
-    }
-    rootSelected = (outsideReaction?: boolean) => this.props.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false;
-    panelHeight = () => this.props.PanelHeight() - this.headerMargin;
-    screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin);
-    contentScaling = () => this.ContentScale;
-    onClickFunc = () => this.onClickHandler;
-    setHeight = (height: number) => this.layoutDoc._height = height;
-    setContentView = action((view: { getAnchor?: () => Doc, forward?: () => boolean, back?: () => boolean }) => this._componentView = view);
-    isContentActive = (outsideReaction?: boolean) => {
-        return this.props.isContentActive() === false ? false : (
-            CurrentUserUtils.SelectedTool !== InkTool.None ||
-            SnappingManager.GetIsDragging() ||
-            this.rootSelected() ||
-            this.props.Document.forceActive ||
-            this.props.isSelected(outsideReaction) ||
-            this._componentView?.isAnyChildContentActive?.() ||
-            this.props.isContentActive()) ? true : undefined;
-    }
-    @observable _retryThumb = 1;
-    thumbShown = () => {
-        return !this.props.isSelected() && LightboxView.LightboxDoc !== this.rootDoc && this.thumb &&
-            !Doc.AreProtosEqual(DocumentLinksButton.StartLink, this.rootDoc) &&
-            !Doc.isBrushedHighlightedDegree(this.props.Document) &&
-            !this._componentView?.isAnyChildContentActive?.() ? true : false;
-    }
-    @computed get contents() {
-        TraceMobx();
-        const audioView = !this.layoutDoc._showAudio ? (null) :
-            <div className="documentView-audioBackground" onPointerDown={this.recordAudioAnnotation} onPointerEnter={this.onPointerEnter} >
-                <FontAwesomeIcon className="documentView-audioFont"
-                    style={{ color: [DocListCast(this.dataDoc[this.LayoutFieldKey + "-audioAnnotations"]).length ? "blue" : "gray", "green", "red"][this._mediaState] }}
-                    icon={!DocListCast(this.dataDoc[this.LayoutFieldKey + "-audioAnnotations"]).length ? "microphone" : "file-audio"} size="sm" />
+            if (!this.topMost) e?.stopPropagation(); // DocumentViews should stop propagation of this event
+            cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15);
+      }
+
+      collectionFilters = () => StrListCast(this.props.Document._docFilters);
+      collectionRangeDocFilters = () => StrListCast(this.props.Document._docRangeFilters);
+      @computed get showFilterIcon() {
+            return this.collectionFilters().length || this.collectionRangeDocFilters().length ? "hasFilter" :
+                  this.props.docFilters?.().filter(f => Utils.IsRecursiveFilter(f)).length || this.props.docRangeFilters().length ? "inheritsFilter" : undefined;
+      }
+      rootSelected = (outsideReaction?: boolean) => this.props.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false;
+      panelHeight = () => this.props.PanelHeight() - this.headerMargin;
+      screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin);
+      contentScaling = () => this.ContentScale;
+      onClickFunc = () => this.onClickHandler;
+      setHeight = (height: number) => this.layoutDoc._height = height;
+      setContentView = action((view: { getAnchor?: () => Doc, forward?: () => boolean, back?: () => boolean }) => this._componentView = view);
+      isContentActive = (outsideReaction?: boolean) => {
+            return this.props.isContentActive() === false ? false : (
+                  CurrentUserUtils.SelectedTool !== InkTool.None ||
+                  SnappingManager.GetIsDragging() ||
+                  this.rootSelected() ||
+                  this.props.Document.forceActive ||
+                  this.props.isSelected(outsideReaction) ||
+                  this._componentView?.isAnyChildContentActive?.() ||
+                  this.props.isContentActive()) ? true : undefined;
+      }
+      @observable _retryThumb = 1;
+      thumbShown = () => {
+            return !this.props.isSelected() && LightboxView.LightboxDoc !== this.rootDoc && this.thumb &&
+                  !Doc.AreProtosEqual(DocumentLinksButton.StartLink, this.rootDoc) &&
+                  !Doc.isBrushedHighlightedDegree(this.props.Document) &&
+                  !this._componentView?.isAnyChildContentActive?.() ? true : false;
+      }
+      @computed get contents() {
+            TraceMobx();
+            const audioView = !this.layoutDoc._showAudio ? (null) :
+                  <div className="documentView-audioBackground" onPointerDown={this.recordAudioAnnotation} onPointerEnter={this.onPointerEnter} >
+                        <FontAwesomeIcon className="documentView-audioFont"
+                              style={{ color: [DocListCast(this.dataDoc[this.LayoutFieldKey + "-audioAnnotations"]).length ? "blue" : "gray", "green", "red"][this._mediaState] }}
+                              icon={!DocListCast(this.dataDoc[this.LayoutFieldKey + "-audioAnnotations"]).length ? "microphone" : "file-audio"} size="sm" />
+                  </div>;
+
+            return <div className="documentView-contentsView"
+                  style={{
+                        pointerEvents: this.props.pointerEvents?.() as any ?? this.rootDoc.layoutKey === "layout_icon" ? "none" :
+                              this.props.contentPointerEvents as any ? this.props.contentPointerEvents as any :
+                                    this.rootDoc.type !== DocumentType.INK && this.isContentActive() ? "all" :
+                                          "none",
+                        height: this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined,
+                  }}>
+                  {!this._retryThumb || !this.thumbShown() ? (null) :
+                        <img style={{ background: "white", top: 0, position: "relative" }} src={this.thumb} // + '?d=' + (new Date()).getTime()}
+                              width={this.props.PanelWidth()} height={this.props.PanelHeight()}
+                              onError={(e: any) => {
+                                    setTimeout(action(() => this._retryThumb = 0), 0);
+                                    setTimeout(action(() => this._retryThumb = 1), 150);
+                              }} />}
+                  <DocumentContentsView key={1}
+                        {...this.props}
+                        docViewPath={this.props.viewPath}
+                        thumbShown={this.thumbShown}
+                        isHovering={this.isHovering}
+                        setContentView={this.setContentView}
+                        scaling={this.contentScaling}
+                        PanelHeight={this.panelHeight}
+                        setHeight={!this.props.suppressSetHeight ? this.setHeight : undefined}
+                        isContentActive={this.isContentActive}
+                        ScreenToLocalTransform={this.screenToLocal}
+                        rootSelected={this.rootSelected}
+                        onClick={this.onClickFunc}
+                        focus={this.focus}
+                        layoutKey={this.finalLayoutKey} />
+                  {this.layoutDoc.hideAllLinks ? (null) : this.allLinkEndpoints}
+                  {(!this.props.isSelected() && !this._isHovering) || this.hideLinkButton || this.props.renderDepth === -1 || SnappingManager.GetIsDragging() ? (null) :
+                        <DocumentLinksButton View={this.props.DocumentView()}
+                              ContentScaling={this.props.ContentScaling}
+                              Offset={[this.topMost ? 0 : !this.props.isSelected() ? - 15 : -30, undefined, undefined, this.topMost ? 10 : !this.props.isSelected() ? - 15 : -30]} />
+                  }
+                  {audioView}
             </div>;
-
-        return <div className="documentView-contentsView"
-            style={{
-                pointerEvents: this.props.pointerEvents?.() as any ?? this.rootDoc.layoutKey === "layout_icon" ? "none" :
-                    this.props.contentPointerEvents as any ? this.props.contentPointerEvents as any :
-                        this.rootDoc.type !== DocumentType.INK && this.isContentActive() ? "all" :
-                            "none",
-                height: this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined,
-            }}>
-            {!this._retryThumb || !this.thumbShown() ? (null) :
-                <img style={{ background: "white", top: 0, position: "relative" }} src={this.thumb} // + '?d=' + (new Date()).getTime()}
-                    width={this.props.PanelWidth()} height={this.props.PanelHeight()}
-                    onError={(e: any) => {
-                        setTimeout(action(() => this._retryThumb = 0), 0);
-                        setTimeout(action(() => this._retryThumb = 1), 150);
-                    }} />}
-            <DocumentContentsView key={1}
-                {...this.props}
-                docViewPath={this.props.viewPath}
-                thumbShown={this.thumbShown}
-                isHovering={this.isHovering}
-                setContentView={this.setContentView}
-                scaling={this.contentScaling}
-                PanelHeight={this.panelHeight}
-                setHeight={!this.props.suppressSetHeight ? this.setHeight : undefined}
-                isContentActive={this.isContentActive}
-                ScreenToLocalTransform={this.screenToLocal}
-                rootSelected={this.rootSelected}
-                onClick={this.onClickFunc}
-                focus={this.focus}
-                layoutKey={this.finalLayoutKey} />
-            {this.layoutDoc.hideAllLinks ? (null) : this.allLinkEndpoints}
-            {(!this.props.isSelected() && !this._isHovering) || this.hideLinkButton || this.props.renderDepth === -1 || SnappingManager.GetIsDragging() ? (null) :
-                <DocumentLinksButton View={this.props.DocumentView()}
-                    ContentScaling={this.props.ContentScaling}
-                    Offset={[this.topMost ? 0 : !this.props.isSelected() ? - 15 : -30, undefined, undefined, this.topMost ? 10 : !this.props.isSelected() ? - 15 : -30]} />
+      }
+
+      get indicatorIcon() {
+            if (this.props.Document["acl-Public"] !== SharingPermissions.None) return "globe-americas";
+            else if (this.props.Document.numGroupsShared || NumCast(this.props.Document.numUsersShared, 0) > 1) return "users";
+            else return "user";
+      }
+
+      @undoBatch
+      hideLinkAnchor = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && (doc.hidden = true), true)
+      anchorPanelWidth = () => this.props.PanelWidth() || 1;
+      anchorPanelHeight = () => this.props.PanelHeight() || 1;
+      anchorStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any => {
+            switch (property) {
+                  case StyleProp.ShowTitle: return "";
+                  case StyleProp.PointerEvents: return "none";
+                  case StyleProp.LinkSource: return this.props.Document;// pass the LinkSource to the LinkAnchorBox
+                  default: return this.props.styleProvider?.(doc, props, property);
             }
-            {audioView}
-        </div>;
-    }
-
-    get indicatorIcon() {
-        if (this.props.Document["acl-Public"] !== SharingPermissions.None) return "globe-americas";
-        else if (this.props.Document.numGroupsShared || NumCast(this.props.Document.numUsersShared, 0) > 1) return "users";
-        else return "user";
-    }
-
-    @undoBatch
-    hideLinkAnchor = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && (doc.hidden = true), true)
-    anchorPanelWidth = () => this.props.PanelWidth() || 1;
-    anchorPanelHeight = () => this.props.PanelHeight() || 1;
-    anchorStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any => {
-        switch (property) {
-            case StyleProp.ShowTitle: return "";
-            case StyleProp.PointerEvents: return "none";
-            case StyleProp.LinkSource: return this.props.Document;// pass the LinkSource to the LinkAnchorBox
-            default: 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 '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 =>
-            Doc.AreProtosEqual(link.anchor1 as Doc, this.rootDoc) ||
-            Doc.AreProtosEqual(link.anchor2 as Doc, this.rootDoc) ||
-            ((link.anchor1 as Doc).unrendered && Doc.AreProtosEqual((link.anchor1 as Doc).annotationOn as Doc, this.rootDoc)) ||
-            ((link.anchor2 as Doc).unrendered && Doc.AreProtosEqual((link.anchor2 as Doc).annotationOn as Doc, this.rootDoc))
-        );
-    }
-    @computed get allLinks() { TraceMobx(); return LinkManager.Instance.getAllRelatedLinks(this.rootDoc); }
-    @computed get allLinkEndpoints() {  // the small blue dots that mark the endpoints of links
-        TraceMobx();
-        if (this.layoutDoc.unrendered || this.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) return null;
-        if (this.layoutDoc.presBox || this.rootDoc.type === DocumentType.LINK || this.props.dontRegisterView) return (null);
-        const filtered = DocUtils.FilterDocs(this.directLinks, this.props.docFilters?.() ?? [], []).filter(d => !d.hidden);
-        return filtered.map((link, i) =>
-            <div className="documentView-anchorCont" key={link[Id]}>
-                <DocumentView {...this.props}
-                    Document={link}
-                    PanelWidth={this.anchorPanelWidth}
-                    PanelHeight={this.anchorPanelHeight}
-                    dontRegisterView={false}
-                    showTitle={returnEmptyString}
-                    hideCaptions={true}
-                    fitWidth={returnTrue}
-                    styleProvider={this.anchorStyleProvider}
-                    removeDocument={this.hideLinkAnchor}
-                    LayoutTemplate={undefined}
-                    LayoutTemplateString={LinkAnchorBox.LayoutString(`anchor${Doc.LinkEndpoint(link, this.rootDoc)}`)} />
-            </div >);
-    }
-
-    @action
-    onPointerEnter = () => {
-        const self = this;
-        const audioAnnos = DocListCast(this.dataDoc[this.LayoutFieldKey + "-audioAnnotations"]);
-        if (audioAnnos && audioAnnos.length && this._mediaState === 0) {
-            const anno = audioAnnos[Math.floor(Math.random() * audioAnnos.length)];
-            anno.data instanceof AudioField && new Howl({
-                src: [anno.data.url.href],
-                format: ["mp3"],
-                autoplay: true,
-                loop: false,
-                volume: 0.5,
-                onend: function () {
-                    runInAction(() => self._mediaState = 0);
-                }
-            });
-            this._mediaState = 1;
-        }
-    }
-    recordAudioAnnotation = () => {
-        let gumStream: any;
-        let recorder: any;
-        const self = this;
-        navigator.mediaDevices.getUserMedia({
-            audio: true
-        }).then(function (stream) {
-            gumStream = stream;
-            recorder = new MediaRecorder(stream);
-            recorder.ondataavailable = async (e: any) => {
-                const [{ result }] = await Networking.UploadFilesToServer(e.data);
-                if (!(result instanceof Error)) {
-                    const audioDoc = Docs.Create.AudioDocument(result.accessPaths.agnostic.client, { title: "audio test", _width: 200, _height: 32 });
-                    audioDoc.treeViewExpandedView = "layout";
-                    const audioAnnos = Cast(self.dataDoc[self.LayoutFieldKey + "-audioAnnotations"], listSpec(Doc));
-                    if (audioAnnos === undefined) {
-                        self.dataDoc[self.LayoutFieldKey + "-audioAnnotations"] = new List([audioDoc]);
-                    } else {
-                        audioAnnos.push(audioDoc);
-                    }
-                }
-            };
-            runInAction(() => self._mediaState = 2);
-            recorder.start();
-            setTimeout(() => {
-                recorder.stop();
-                runInAction(() => self._mediaState = 0);
-                gumStream.getAudioTracks()[0].stop();
-            }, 5000);
-        });
-    }
-
-    captionStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewInternalProps>, property: string) => this.props?.styleProvider?.(doc, props, property + ":caption");
-    @computed get innards() {
-        TraceMobx();
-        const ffscale = () => (this.props.DocumentView().props.CollectionFreeFormDocumentView?.().props.ScreenToLocalTransform().Scale || 1);
-        const showTitle = this.ShowTitle?.split(":")[0];
-        const showTitleHover = this.ShowTitle?.includes(":hover");
-        const showCaption = !this.props.hideCaptions && this.Document._viewType !== CollectionViewType.Carousel ? StrCast(this.layoutDoc._showCaption) : undefined;
-        const captionView = !showCaption ? (null) :
-            <div className="documentView-captionWrapper"
-                style={{
-                    pointerEvents: this.onClickHandler || this.Document.ignoreClick ? "none" : this.isContentActive() || this.props.isDocumentActive?.() ? "all" : undefined,
-                    minWidth: 50 * ffscale(),
-                    maxHeight: `max(100%, ${20 * ffscale()}px)`
-                }}>
-                <FormattedTextBox {...OmitKeys(this.props, ['children']).omit}
-                    yPadding={10}
-                    xPadding={10}
-                    fieldKey={showCaption}
-                    fontSize={12 * Math.max(1, 2 * ffscale() / 3)}
-                    styleProvider={this.captionStyleProvider}
-                    dontRegisterView={true}
-                    noSidebar={true}
-                    dontScale={true}
-                    isContentActive={this.isContentActive}
-                    onClick={this.onClickFunc}
-                />
-            </div>;
-        const targetDoc = (showTitle?.startsWith("_") ? this.layoutDoc : this.rootDoc);
-        const background = StrCast(SharingManager.Instance.users.find(users => users.user.email === this.dataDoc.author)?.sharingDoc.userColor,
-            Doc.UserDoc().showTitle && [DocumentType.RTF, DocumentType.COL].includes(this.rootDoc.type as any) ? StrCast(Doc.SharingDoc().userColor) : "rgba(0,0,0,0.4)");
-        const titleView = !showTitle ? (null) :
-            <div className={`documentView-titleWrapper${showTitleHover ? "-hover" : ""}`} key="title" style={{
-                position: this.headerMargin ? "relative" : "absolute",
-                height: this.titleHeight,
-                color: lightOrDark(background),
-                background,
-                pointerEvents: this.onClickHandler || this.Document.ignoreClick ? "none" : this.isContentActive() || this.props.isDocumentActive?.() ? "all" : undefined,
-            }}>
-                <EditableView ref={this._titleRef}
-                    contents={showTitle.split(";").map(field => field.trim()).map(field => targetDoc[field]?.toString()).join("\\")}
-                    display={"block"}
-                    fontSize={10}
-                    GetValue={() => showTitle.split(";").length === 1 ? showTitle + "=" + Field.toString(targetDoc[showTitle.split(";")[0]] as any as Field) : "#" + showTitle}
-                    SetValue={undoBatch((input: string) => {
-                        if (input?.startsWith("#")) {
-                            if (this.props.showTitle) {
-                                this.rootDoc._showTitle = input?.substring(1) ? input.substring(1) : undefined;
-                            } else {
-                                Doc.UserDoc().showTitle = input?.substring(1) ? input.substring(1) : "creationDate";
-                            }
-                        } else {
-                            var value = input.replace(new RegExp(showTitle + "="), "") as string | number;
-                            if (showTitle !== "title" && Number(value).toString() === value) value = Number(value);
-                            if (showTitle.includes("Date") || showTitle === "author") return true;
-                            Doc.SetInPlace(targetDoc, showTitle, value, true);
+      }
+      // 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 '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 =>
+                  Doc.AreProtosEqual(link.anchor1 as Doc, this.rootDoc) ||
+                  Doc.AreProtosEqual(link.anchor2 as Doc, this.rootDoc) ||
+                  ((link.anchor1 as Doc).unrendered && Doc.AreProtosEqual((link.anchor1 as Doc).annotationOn as Doc, this.rootDoc)) ||
+                  ((link.anchor2 as Doc).unrendered && Doc.AreProtosEqual((link.anchor2 as Doc).annotationOn as Doc, this.rootDoc))
+            );
+      }
+      @computed get allLinks() { TraceMobx(); return LinkManager.Instance.getAllRelatedLinks(this.rootDoc); }
+      @computed get allLinkEndpoints() {  // the small blue dots that mark the endpoints of links
+            TraceMobx();
+            if (this.layoutDoc.unrendered || this.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) return null;
+            if (this.layoutDoc.presBox || this.rootDoc.type === DocumentType.LINK || this.props.dontRegisterView) return (null);
+            const filtered = DocUtils.FilterDocs(this.directLinks, this.props.docFilters?.() ?? [], []).filter(d => !d.hidden);
+            return filtered.map((link, i) =>
+                  <div className="documentView-anchorCont" key={link[Id]}>
+                        <DocumentView {...this.props}
+                              Document={link}
+                              PanelWidth={this.anchorPanelWidth}
+                              PanelHeight={this.anchorPanelHeight}
+                              dontRegisterView={false}
+                              showTitle={returnEmptyString}
+                              hideCaptions={true}
+                              fitWidth={returnTrue}
+                              styleProvider={this.anchorStyleProvider}
+                              removeDocument={this.hideLinkAnchor}
+                              LayoutTemplate={undefined}
+                              LayoutTemplateString={LinkAnchorBox.LayoutString(`anchor${Doc.LinkEndpoint(link, this.rootDoc)}`)} />
+                  </div >);
+      }
+
+      @action
+      onPointerEnter = () => {
+            const self = this;
+            const audioAnnos = DocListCast(this.dataDoc[this.LayoutFieldKey + "-audioAnnotations"]);
+            if (audioAnnos && audioAnnos.length && this._mediaState === 0) {
+                  const anno = audioAnnos[Math.floor(Math.random() * audioAnnos.length)];
+                  anno.data instanceof AudioField && new Howl({
+                        src: [anno.data.url.href],
+                        format: ["mp3"],
+                        autoplay: true,
+                        loop: false,
+                        volume: 0.5,
+                        onend: function () {
+                              runInAction(() => self._mediaState = 0);
                         }
-                        return true;
-                    })}
-                />
-            </div>;
-        return this.props.hideTitle || (!showTitle && !showCaption) ?
-            this.contents :
-            <div className="documentView-styleWrapper" >
-                {!this.headerMargin ? <> {this.contents} {titleView} </> : <> {titleView} {this.contents} </>}
-                {captionView}
-            </div>;
-    }
-    isHovering = () => this._isHovering;
-    @observable _isHovering = false;
-    @observable _: string = "";
-    @computed get renderDoc() {
-        TraceMobx();
-        const thumb = ImageCast(this.layoutDoc["thumb-frozen"], ImageCast(this.layoutDoc.thumb))?.url.href.replace(".png", "_m.png");
-        const isButton = this.props.Document.type === DocumentType.FONTICON;
-        if (!(this.props.Document instanceof Doc) || GetEffectiveAcl(this.props.Document[DataSym]) === AclPrivate || (this.hidden && !this.props.treeViewDoc)) return null;
-        return this.docContents ??
-            <div className={`documentView-node${this.topMost ? "-topmost" : ""}`}
-                id={this.props.Document[Id]}
-                onPointerEnter={action(() => this._isHovering = true)}
-                onPointerLeave={action(() => this._isHovering = false)}
-                style={{
-                    background: isButton || thumb ? undefined : this.backgroundColor,
-                    opacity: this.opacity,
-                    color: StrCast(this.layoutDoc.color, "inherit"),
-                    fontFamily: StrCast(this.Document._fontFamily, "inherit"),
-                    fontSize: Cast(this.Document._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.onClickHandler && this.props.ContainingCollectionView?.props.Document._viewType === CollectionViewType.Time ? <div className="documentView-contentBlocker" /> : (null)}
-                {this.widgetDecorations ?? null}
-            </div>;
-    }
-    render() {
-        TraceMobx();
-        const highlightIndex = this.props.LayoutTemplateString ? (Doc.IsHighlighted(this.props.Document) ? 6 : 0) : Doc.isBrushedHighlightedDegree(this.props.Document); // bcz: Argh!! need to identify a tree view doc better than a LayoutTemlatString
-        const highlightColor = ["transparent", "rgb(68, 118, 247)", "rgb(68, 118, 247)", "orange", "lightBlue"][highlightIndex];
-        const highlightStyle = ["solid", "dashed", "solid", "solid", "solid"][highlightIndex];
-        const excludeTypes = !this.props.treeViewDoc && highlightIndex < 3 ? [DocumentType.FONTICON, DocumentType.INK] : [DocumentType.FONTICON];
-        let highlighting = !this.props.disableDocBrushing && highlightIndex && !excludeTypes.includes(this.layoutDoc.type as any) && this.layoutDoc._viewType !== CollectionViewType.Linear;
-        highlighting = highlighting && this.props.focus !== emptyFunction && this.layoutDoc.title !== "[pres element template]";  // bcz: hack to turn off highlighting onsidebar panel documents.  need to flag a document as not highlightable in a more direct way
-
-        const borderPath = this.props.styleProvider?.(this.props.Document, this.props, StyleProp.BorderPath) || { path: undefined };
-        const internal = PresBox.EffectsProvider(this.layoutDoc, this.renderDoc) || this.renderDoc;
-        const boxShadow = this.props.treeViewDoc ? null : highlighting && this.borderRounding && highlightStyle !== "dashed" ? `0 0 0 ${highlightIndex}px ${highlightColor}` :
-            this.boxShadow || (this.props.Document.isTemplateForField ? "black 0.2vw 0.2vw 0.8vw" : undefined);
-
-        // Return surrounding highlight 
-        return <div className={`${DocumentView.ROOT_DIV} docView-hack`} ref={this._mainCont}
-            onContextMenu={this.onContextMenu}
-            onKeyDown={this.onKeyDown}
-            onPointerDown={this.onPointerDown}
-            onClick={this.onClick}
-            onPointerEnter={action(e => !SnappingManager.GetIsDragging() && Doc.BrushDoc(this.props.Document))}
-            onPointerLeave={action(e => !hasDescendantTarget(e.nativeEvent.x, e.nativeEvent.y, this.ContentDiv) && Doc.UnBrushDoc(this.props.Document))}
-            style={{
-                display: this.hidden ? "inline" : undefined,
-                borderRadius: this.borderRounding,
-                pointerEvents: this.pointerEvents,
-                outline: highlighting && !this.borderRounding ? `${highlightColor} ${highlightStyle} ${highlightIndex}px` : "solid 0px",
-                border: highlighting && this.borderRounding && highlightStyle === "dashed" ? `${highlightStyle} ${highlightColor} ${highlightIndex}px` : undefined,
-                boxShadow,
-                clipPath: borderPath.path ? `path('${borderPath.path}')` : undefined
-            }}>
-            {!borderPath.path ? internal :
-                <>
-                    {/* <div style={{ clipPath: `path('${borderPath.fill}')` }}>
+                  });
+                  this._mediaState = 1;
+            }
+      }
+      recordAudioAnnotation = () => {
+            let gumStream: any;
+            let recorder: any;
+            const self = this;
+            navigator.mediaDevices.getUserMedia({
+                  audio: true
+            }).then(function (stream) {
+                  gumStream = stream;
+                  recorder = new MediaRecorder(stream);
+                  recorder.ondataavailable = async (e: any) => {
+                        const [{ result }] = await Networking.UploadFilesToServer(e.data);
+                        if (!(result instanceof Error)) {
+                              const audioDoc = Docs.Create.AudioDocument(result.accessPaths.agnostic.client, { title: "audio test", _width: 200, _height: 32 });
+                              audioDoc.treeViewExpandedView = "layout";
+                              const audioAnnos = Cast(self.dataDoc[self.LayoutFieldKey + "-audioAnnotations"], listSpec(Doc));
+                              if (audioAnnos === undefined) {
+                                    self.dataDoc[self.LayoutFieldKey + "-audioAnnotations"] = new List([audioDoc]);
+                              } else {
+                                    audioAnnos.push(audioDoc);
+                              }
+                        }
+                  };
+                  runInAction(() => self._mediaState = 2);
+                  recorder.start();
+                  setTimeout(() => {
+                        recorder.stop();
+                        runInAction(() => self._mediaState = 0);
+                        gumStream.getAudioTracks()[0].stop();
+                  }, 5000);
+            });
+      }
+
+      captionStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewInternalProps>, property: string) => this.props?.styleProvider?.(doc, props, property + ":caption");
+      @computed get innards() {
+            TraceMobx();
+            const ffscale = () => (this.props.DocumentView().props.CollectionFreeFormDocumentView?.().props.ScreenToLocalTransform().Scale || 1);
+            const showTitle = this.ShowTitle?.split(":")[0];
+            const showTitleHover = this.ShowTitle?.includes(":hover");
+            const showCaption = !this.props.hideCaptions && this.Document._viewType !== CollectionViewType.Carousel ? StrCast(this.layoutDoc._showCaption) : undefined;
+            const captionView = !showCaption ? (null) :
+                  <div className="documentView-captionWrapper"
+                        style={{
+                              pointerEvents: this.onClickHandler || this.Document.ignoreClick ? "none" : this.isContentActive() || this.props.isDocumentActive?.() ? "all" : undefined,
+                              minWidth: 50 * ffscale(),
+                              maxHeight: `max(100%, ${20 * ffscale()}px)`
+                        }}>
+                        <FormattedTextBox {...OmitKeys(this.props, ['children']).omit}
+                              yPadding={10}
+                              xPadding={10}
+                              fieldKey={showCaption}
+                              fontSize={12 * Math.max(1, 2 * ffscale() / 3)}
+                              styleProvider={this.captionStyleProvider}
+                              dontRegisterView={true}
+                              noSidebar={true}
+                              dontScale={true}
+                              isContentActive={this.isContentActive}
+                              onClick={this.onClickFunc}
+                        />
+                  </div>;
+            const targetDoc = (showTitle?.startsWith("_") ? this.layoutDoc : this.rootDoc);
+            const background = StrCast(SharingManager.Instance.users.find(users => users.user.email === this.dataDoc.author)?.sharingDoc.userColor,
+                  Doc.UserDoc().showTitle && [DocumentType.RTF, DocumentType.COL].includes(this.rootDoc.type as any) ? StrCast(Doc.SharingDoc().userColor) : "rgba(0,0,0,0.4)");
+            const titleView = !showTitle ? (null) :
+                  <div className={`documentView-titleWrapper${showTitleHover ? "-hover" : ""}`} key="title" style={{
+                        position: this.headerMargin ? "relative" : "absolute",
+                        height: this.titleHeight,
+                        color: lightOrDark(background),
+                        background,
+                        pointerEvents: this.onClickHandler || this.Document.ignoreClick ? "none" : this.isContentActive() || this.props.isDocumentActive?.() ? "all" : undefined,
+                  }}>
+                        <EditableView ref={this._titleRef}
+                              contents={showTitle.split(";").map(field => field.trim()).map(field => targetDoc[field]?.toString()).join("\\")}
+                              display={"block"}
+                              fontSize={10}
+                              GetValue={() => showTitle.split(";").length === 1 ? showTitle + "=" + Field.toString(targetDoc[showTitle.split(";")[0]] as any as Field) : "#" + showTitle}
+                              SetValue={undoBatch((input: string) => {
+                                    if (input?.startsWith("#")) {
+                                          if (this.props.showTitle) {
+                                                this.rootDoc._showTitle = input?.substring(1) ? input.substring(1) : undefined;
+                                          } else {
+                                                Doc.UserDoc().showTitle = input?.substring(1) ? input.substring(1) : "creationDate";
+                                          }
+                                    } else {
+                                          var value = input.replace(new RegExp(showTitle + "="), "") as string | number;
+                                          if (showTitle !== "title" && Number(value).toString() === value) value = Number(value);
+                                          if (showTitle.includes("Date") || showTitle === "author") return true;
+                                          Doc.SetInPlace(targetDoc, showTitle, value, true);
+                                    }
+                                    return true;
+                              })}
+                        />
+                  </div>;
+            return this.props.hideTitle || (!showTitle && !showCaption) ?
+                  this.contents :
+                  <div className="documentView-styleWrapper" >
+                        {!this.headerMargin ? <> {this.contents} {titleView} </> : <> {titleView} {this.contents} </>}
+                        {captionView}
+                  </div>;
+      }
+      isHovering = () => this._isHovering;
+      @observable _isHovering = false;
+      @observable _: string = "";
+      @computed get renderDoc() {
+            TraceMobx();
+            const thumb = ImageCast(this.layoutDoc["thumb-frozen"], ImageCast(this.layoutDoc.thumb))?.url.href.replace(".png", "_m.png");
+            const isButton = this.props.Document.type === DocumentType.FONTICON;
+            if (!(this.props.Document instanceof Doc) || GetEffectiveAcl(this.props.Document[DataSym]) === AclPrivate || (this.hidden && !this.props.treeViewDoc)) return null;
+            return this.docContents ??
+                  <div className={`documentView-node${this.topMost ? "-topmost" : ""}`}
+                        id={this.props.Document[Id]}
+                        onPointerEnter={action(() => this._isHovering = true)}
+                        onPointerLeave={action(() => this._isHovering = false)}
+                        style={{
+                              background: isButton || thumb ? undefined : this.backgroundColor,
+                              opacity: this.opacity,
+                              color: StrCast(this.layoutDoc.color, "inherit"),
+                              fontFamily: StrCast(this.Document._fontFamily, "inherit"),
+                              fontSize: Cast(this.Document._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.onClickHandler && this.props.ContainingCollectionView?.props.Document._viewType === CollectionViewType.Time ? <div className="documentView-contentBlocker" /> : (null)}
+                        {this.widgetDecorations ?? null}
+                  </div>;
+      }
+      render() {
+            TraceMobx();
+            const highlightIndex = this.props.LayoutTemplateString ? (Doc.IsHighlighted(this.props.Document) ? 6 : 0) : Doc.isBrushedHighlightedDegree(this.props.Document); // bcz: Argh!! need to identify a tree view doc better than a LayoutTemlatString
+            const highlightColor = ["transparent", "rgb(68, 118, 247)", "rgb(68, 118, 247)", "orange", "lightBlue"][highlightIndex];
+            const highlightStyle = ["solid", "dashed", "solid", "solid", "solid"][highlightIndex];
+            const excludeTypes = !this.props.treeViewDoc && highlightIndex < 3 ? [DocumentType.FONTICON, DocumentType.INK] : [DocumentType.FONTICON];
+            let highlighting = !this.props.disableDocBrushing && highlightIndex && !excludeTypes.includes(this.layoutDoc.type as any) && this.layoutDoc._viewType !== CollectionViewType.Linear;
+            highlighting = highlighting && this.props.focus !== emptyFunction && this.layoutDoc.title !== "[pres element template]";  // bcz: hack to turn off highlighting onsidebar panel documents.  need to flag a document as not highlightable in a more direct way
+
+            const borderPath = this.props.styleProvider?.(this.props.Document, this.props, StyleProp.BorderPath) || { path: undefined };
+            const internal = PresBox.EffectsProvider(this.layoutDoc, this.renderDoc) || this.renderDoc;
+            const boxShadow = this.props.treeViewDoc ? null : highlighting && this.borderRounding && highlightStyle !== "dashed" ? `0 0 0 ${highlightIndex}px ${highlightColor}` :
+                  this.boxShadow || (this.props.Document.isTemplateForField ? "black 0.2vw 0.2vw 0.8vw" : undefined);
+
+            // Return surrounding highlight 
+            return <div className={`${DocumentView.ROOT_DIV} docView-hack`} ref={this._mainCont}
+                  onContextMenu={this.onContextMenu}
+                  onKeyDown={this.onKeyDown}
+                  onPointerDown={this.onPointerDown}
+                  onClick={this.onClick}
+                  onPointerEnter={action(e => !SnappingManager.GetIsDragging() && Doc.BrushDoc(this.props.Document))}
+                  onPointerLeave={action(e => !hasDescendantTarget(e.nativeEvent.x, e.nativeEvent.y, this.ContentDiv) && Doc.UnBrushDoc(this.props.Document))}
+                  style={{
+                        display: this.hidden ? "inline" : undefined,
+                        borderRadius: this.borderRounding,
+                        pointerEvents: this.pointerEvents,
+                        outline: highlighting && !this.borderRounding ? `${highlightColor} ${highlightStyle} ${highlightIndex}px` : "solid 0px",
+                        border: highlighting && this.borderRounding && highlightStyle === "dashed" ? `${highlightStyle} ${highlightColor} ${highlightIndex}px` : undefined,
+                        boxShadow,
+                        clipPath: borderPath.path ? `path('${borderPath.path}')` : undefined
+                  }}>
+                  {!borderPath.path ? internal :
+                        <>
+                              {/* <div style={{ clipPath: `path('${borderPath.fill}')` }}>
                         {internal}
                     </div> */}
-                    {internal}
-                    <div key="border2" className="documentView-customBorder" style={{ pointerEvents: "none" }} >
-                        <svg style={{ overflow: "visible" }} viewBox={`0 0 ${this.props.PanelWidth()} ${this.props.PanelHeight()}`}>
-                            <path d={borderPath.path} style={{ stroke: "black", fill: "transparent", strokeWidth: borderPath.width }} />
-                        </svg>
-                    </div>
-                </>
-            }
-            {this.showFilterIcon ?
-                <FontAwesomeIcon icon={"filter"} size="lg"
-                    style={{ position: 'absolute', top: '1%', right: '1%', cursor: "pointer", padding: 1, color: this.showFilterIcon === "hasFilter" ? '#18c718bd' : "orange", zIndex: 1 }}
-                    onPointerDown={action(e => { this.props.select(false); CurrentUserUtils.propertiesWidth = 250; e.stopPropagation(); })}
-                />
-                : (null)}
-        </div>;
-    }
+                              {internal}
+                              <div key="border2" className="documentView-customBorder" style={{ pointerEvents: "none" }} >
+                                    <svg style={{ overflow: "visible" }} viewBox={`0 0 ${this.props.PanelWidth()} ${this.props.PanelHeight()}`}>
+                                          <path d={borderPath.path} style={{ stroke: "black", fill: "transparent", strokeWidth: borderPath.width }} />
+                                    </svg>
+                              </div>
+                        </>
+                  }
+                  {this.showFilterIcon ?
+                        <FontAwesomeIcon icon={"filter"} size="lg"
+                              style={{ position: 'absolute', top: '1%', right: '1%', cursor: "pointer", padding: 1, color: this.showFilterIcon === "hasFilter" ? '#18c718bd' : "orange", zIndex: 1 }}
+                              onPointerDown={action(e => { this.props.select(false); CurrentUserUtils.propertiesWidth = 250; e.stopPropagation(); })}
+                        />
+                        : (null)}
+            </div>;
+      }
 }
 
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
-    public static ROOT_DIV = "documentView-effectsWrapper";
-    public get displayName() { return "DocumentView(" + this.props.Document?.title + ")"; } // this makes mobx trace() statements more descriptive
-    public ContentRef = React.createRef<HTMLDivElement>();
-    private _disposers: { [name: string]: IReactionDisposer } = {};
-
-    public static showBackLinks(linkSource: Doc) {
-        const docid = Doc.CurrentUserEmail + Doc.GetProto(linkSource)[Id] + "-pivotish";
-        DocServer.GetRefField(docid).then(docx => {
-            const rootAlias = () => {
-                const rootAlias = Doc.MakeAlias(linkSource);
-                rootAlias.x = rootAlias.y = 0;
-                return rootAlias;
-            };
-            const linkCollection = ((docx instanceof Doc) && docx) || Docs.Create.StackingDocument([/*rootAlias()*/], { title: linkSource.title + "-pivot", _width: 500, _height: 500, }, docid);
-            linkCollection.linkSource = linkSource;
-            if (!linkCollection.reactionScript) linkCollection.reactionScript = ScriptField.MakeScript("updateLinkCollection(self)");
-            LightboxView.SetLightboxDoc(linkCollection);
-        });
-    }
-
-    @observable public docView: DocumentViewInternal | undefined | null;
-
-    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 finalLayoutKey() { return this.docView?.finalLayoutKey || "layout"; }
-    get ContentDiv() { return this.docView?.ContentDiv; }
-    get ComponentView() { return this.docView?._componentView; }
-    get allLinks() { return this.docView?.allLinks || []; }
-    get LayoutFieldKey() { return this.docView?.LayoutFieldKey || "layout"; }
-    get fitWidth() { return this.props.fitWidth?.(this.rootDoc) || this.layoutDoc.fitWidth; }
-
-    @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.props.freezeDimensions));
-    }
-    @computed get nativeHeight() {
-        return this.docView?._componentView?.reverseNativeScaling?.() ? 0 :
-            returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions));
-    }
-    @computed get shouldNotScale() {
-        return (this.fitWidth && !this.nativeWidth) ||
-            this.props.dontScaleFilter?.(this.Document) ||
-            this.props.treeViewDoc || [CollectionViewType.Docking].includes(this.Document._viewType 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.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 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) {
-            return Math.min(this.props.PanelHeight(), Math.max(this.ComponentView?.getScrollHeight?.() ?? NumCast(this.layoutDoc.scrollHeight), this.effectiveNativeHeight) * this.nativeScaling);
-        }
-        return this.props.PanelHeight();
-    }
-    @computed get Xshift() { return this.effectiveNativeWidth ? (this.props.PanelWidth() - this.effectiveNativeWidth * this.nativeScaling) / 2 : 0; }
-    @computed get Yshift() { return this.effectiveNativeWidth && this.effectiveNativeHeight && Math.abs(this.Xshift) < 0.001 ? (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.fitWidth || this.props.dontCenter?.includes("y") ? 0 : this.Yshift; }
-
-    toggleNativeDimensions = () => this.docView && Doc.toggleNativeDimensions(this.layoutDoc, this.docView.ContentScale, this.props.PanelWidth(), this.props.PanelHeight());
-    focus = (doc: Doc, options?: DocFocusOptions) => this.docView?.focus(doc, options);
-    getBounds = () => {
-        if (!this.docView || !this.docView.ContentDiv || this.docView.props.treeViewDoc || Doc.AreProtosEqual(this.props.Document, Doc.UserDoc())) {
-            return undefined;
-        }
-        const xf = (this.docView?.props.ScreenToLocalTransform().scale(this.nativeScaling)).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) {
-        this.ComponentView?.updateIcon?.();
-        const layoutKey = Cast(this.Document.layoutKey, "string", null);
-        if (layoutKey !== "layout_icon") {
-            this.switchViews(true, "icon", finished);
-            if (layoutKey && layoutKey !== "layout" && layoutKey !== "layout_icon") this.Document.deiconifyLayout = layoutKey.replace("layout_", "");
-        } else {
-            const deiconifyLayout = Cast(this.Document.deiconifyLayout, "string", null);
-            this.switchViews(deiconifyLayout ? true : false, deiconifyLayout, finished);
-            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);
-    }
-    switchViews = action((custom: boolean, view: string, finished?: () => void) => {
-        this.docView && (this.docView._animateScalingTo = 0.1);  // shrink doc
-        setTimeout(action(() => {
-            this.setCustomView(custom, view);
-            this.docView && (this.docView._animateScalingTo = 1); // expand it
+      public static ROOT_DIV = "documentView-effectsWrapper";
+      public get displayName() { return "DocumentView(" + this.props.Document?.title + ")"; } // this makes mobx trace() statements more descriptive
+      public ContentRef = React.createRef<HTMLDivElement>();
+      private _disposers: { [name: string]: IReactionDisposer } = {};
+
+      public static showBackLinks(linkSource: Doc) {
+            const docid = Doc.CurrentUserEmail + Doc.GetProto(linkSource)[Id] + "-pivotish";
+            DocServer.GetRefField(docid).then(docx => {
+                  const rootAlias = () => {
+                        const rootAlias = Doc.MakeAlias(linkSource);
+                        rootAlias.x = rootAlias.y = 0;
+                        return rootAlias;
+                  };
+                  const linkCollection = ((docx instanceof Doc) && docx) || Docs.Create.StackingDocument([/*rootAlias()*/], { title: linkSource.title + "-pivot", _width: 500, _height: 500, }, docid);
+                  linkCollection.linkSource = linkSource;
+                  if (!linkCollection.reactionScript) linkCollection.reactionScript = ScriptField.MakeScript("updateLinkCollection(self)");
+                  LightboxView.SetLightboxDoc(linkCollection);
+            });
+      }
+
+      @observable public docView: DocumentViewInternal | undefined | null;
+
+      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 finalLayoutKey() { return this.docView?.finalLayoutKey || "layout"; }
+      get ContentDiv() { return this.docView?.ContentDiv; }
+      get ComponentView() { return this.docView?._componentView; }
+      get allLinks() { return this.docView?.allLinks || []; }
+      get LayoutFieldKey() { return this.docView?.LayoutFieldKey || "layout"; }
+      get fitWidth() { return this.props.fitWidth?.(this.rootDoc) || this.layoutDoc.fitWidth; }
+
+      @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.props.freezeDimensions));
+      }
+      @computed get nativeHeight() {
+            return this.docView?._componentView?.reverseNativeScaling?.() ? 0 :
+                  returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions));
+      }
+      @computed get shouldNotScale() {
+            return (this.fitWidth && !this.nativeWidth) ||
+                  this.props.dontScaleFilter?.(this.Document) ||
+                  this.props.treeViewDoc || [CollectionViewType.Docking].includes(this.Document._viewType 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.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 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) {
+                  return Math.min(this.props.PanelHeight(), Math.max(this.ComponentView?.getScrollHeight?.() ?? NumCast(this.layoutDoc.scrollHeight), this.effectiveNativeHeight) * this.nativeScaling);
+            }
+            return this.props.PanelHeight();
+      }
+      @computed get Xshift() { return this.effectiveNativeWidth ? (this.props.PanelWidth() - this.effectiveNativeWidth * this.nativeScaling) / 2 : 0; }
+      @computed get Yshift() { return this.effectiveNativeWidth && this.effectiveNativeHeight && Math.abs(this.Xshift) < 0.001 ? (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.fitWidth || this.props.dontCenter?.includes("y") ? 0 : this.Yshift; }
+
+      toggleNativeDimensions = () => this.docView && Doc.toggleNativeDimensions(this.layoutDoc, this.docView.ContentScale, this.props.PanelWidth(), this.props.PanelHeight());
+      focus = (doc: Doc, options?: DocFocusOptions) => this.docView?.focus(doc, options);
+      getBounds = () => {
+            if (!this.docView || !this.docView.ContentDiv || this.docView.props.treeViewDoc || Doc.AreProtosEqual(this.props.Document, Doc.UserDoc())) {
+                  return undefined;
+            }
+            const xf = (this.docView?.props.ScreenToLocalTransform().scale(this.nativeScaling)).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) {
+            this.ComponentView?.updateIcon?.();
+            const layoutKey = Cast(this.Document.layoutKey, "string", null);
+            if (layoutKey !== "layout_icon") {
+                  this.switchViews(true, "icon", finished);
+                  if (layoutKey && layoutKey !== "layout" && layoutKey !== "layout_icon") this.Document.deiconifyLayout = layoutKey.replace("layout_", "");
+            } else {
+                  const deiconifyLayout = Cast(this.Document.deiconifyLayout, "string", null);
+                  this.switchViews(deiconifyLayout ? true : false, deiconifyLayout, finished);
+                  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);
+      }
+      switchViews = action((custom: boolean, view: string, finished?: () => void) => {
+            this.docView && (this.docView._animateScalingTo = 0.1);  // shrink doc
             setTimeout(action(() => {
-                this.docView && (this.docView._animateScalingTo = 0);
-                finished?.();
+                  this.setCustomView(custom, view);
+                  this.docView && (this.docView._animateScalingTo = 1); // expand it
+                  setTimeout(action(() => {
+                        this.docView && (this.docView._animateScalingTo = 0);
+                        finished?.();
+                  }), this.docView!._animateScaleTime - 10);
             }), this.docView!._animateScaleTime - 10);
-        }), this.docView!._animateScaleTime - 10);
-    });
-
-    startDragging = (x: number, y: number, dropAction: dropActionType, hideSource = false) => this.docView?.startDragging(x, y, dropAction, hideSource);
-
-    docViewPathFunc = () => this.docViewPath;
-    isSelected = (outsideReaction?: boolean) => SelectionManager.IsSelected(this, outsideReaction);
-    select = (extendSelection: boolean) => SelectionManager.SelectView(this, !SelectionManager.Views().some(v => v.props.Document === this.props.ContainingCollectionDoc) && extendSelection);
-    NativeWidth = () => this.effectiveNativeWidth;
-    NativeHeight = () => this.effectiveNativeHeight;
-    PanelWidth = () => this.panelWidth;
-    PanelHeight = () => this.panelHeight;
-    ContentScale = () => this.nativeScaling;
-    selfView = () => this;
-    screenToLocalTransform = () => {
-        return this.props.ScreenToLocalTransform().translate(-this.centeringX, -this.centeringY).scale(1 / this.nativeScaling);
-    }
-    componentDidMount() {
-        this._disposers.reactionScript = reaction(
-            () => ScriptCast(this.rootDoc.reactionScript)?.script?.run({ this: this.props.Document, self: Cast(this.rootDoc, Doc, null) || this.props.Document }).result,
-            output => output
-        );
-        this._disposers.height = reaction(
-            () => NumCast(this.layoutDoc._height),
-            action(height => {
-                const docMax = NumCast(this.layoutDoc.docMaxAutoHeight);
-                if (docMax && docMax < height) this.layoutDoc.docMaxAutoHeight = 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);
-    }
-
-    render() {
-        TraceMobx();
-        const xshift = () => (this.props.Document.isInkMask ? InkingStroke.MaskDim : Math.abs(this.Xshift) <= 0.001 ? this.props.PanelWidth() : undefined);
-        const yshift = () => (this.props.Document.isInkMask ? InkingStroke.MaskDim : Math.abs(this.Yshift) <= 0.001 ? this.props.PanelHeight() : undefined);
-        const isPresTreeElement: boolean = this.props.treeViewDoc?.type === DocumentType.PRES;
-        const isButton: boolean = this.props.Document.type === DocumentType.FONTICON || this.props.Document._viewType === CollectionViewType.Linear;
-        return (<div className="contentFittingDocumentView">
-            {!this.props.Document || !this.props.PanelWidth() ? (null) : (
-                <div className="contentFittingDocumentView-previewDoc" ref={this.ContentRef}
-                    style={{
-                        transition: this.props.dataTransition,
-                        position: this.props.Document.isInkMask ? "absolute" : undefined,
-                        transform: isButton ? undefined : `translate(${this.centeringX}px, ${this.centeringY}px)`,
-                        width: isButton || isPresTreeElement ? "100%" : xshift() ?? `${100 * (this.props.PanelWidth() - this.Xshift * 2) / this.props.PanelWidth()}%`,
-                        height: isButton || this.props.forceAutoHeight ? undefined : yshift() ?? (this.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}
-                        isSelected={this.isSelected}
-                        select={this.select}
-                        ContentScaling={this.ContentScale}
-                        ScreenToLocalTransform={this.screenToLocalTransform}
-                        focus={this.props.focus || emptyFunction}
-                        ref={action((r: DocumentViewInternal | null) => r && (this.docView = r))} />
-                </div>)}
-        </div>);
-    }
+      });
+
+      startDragging = (x: number, y: number, dropAction: dropActionType, hideSource = false) => this.docView?.startDragging(x, y, dropAction, hideSource);
+
+      docViewPathFunc = () => this.docViewPath;
+      isSelected = (outsideReaction?: boolean) => SelectionManager.IsSelected(this, outsideReaction);
+      select = (extendSelection: boolean) => SelectionManager.SelectView(this, !SelectionManager.Views().some(v => v.props.Document === this.props.ContainingCollectionDoc) && extendSelection);
+      NativeWidth = () => this.effectiveNativeWidth;
+      NativeHeight = () => this.effectiveNativeHeight;
+      PanelWidth = () => this.panelWidth;
+      PanelHeight = () => this.panelHeight;
+      ContentScale = () => this.nativeScaling;
+      selfView = () => this;
+      screenToLocalTransform = () => {
+            return this.props.ScreenToLocalTransform().translate(-this.centeringX, -this.centeringY).scale(1 / this.nativeScaling);
+      }
+      componentDidMount() {
+            this._disposers.reactionScript = reaction(
+                  () => ScriptCast(this.rootDoc.reactionScript)?.script?.run({ this: this.props.Document, self: Cast(this.rootDoc, Doc, null) || this.props.Document }).result,
+                  output => output
+            );
+            this._disposers.height = reaction(
+                  () => NumCast(this.layoutDoc._height),
+                  action(height => {
+                        const docMax = NumCast(this.layoutDoc.docMaxAutoHeight);
+                        if (docMax && docMax < height) this.layoutDoc.docMaxAutoHeight = 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);
+      }
+
+      render() {
+            TraceMobx();
+            const xshift = () => (this.props.Document.isInkMask ? InkingStroke.MaskDim : Math.abs(this.Xshift) <= 0.001 ? this.props.PanelWidth() : undefined);
+            const yshift = () => (this.props.Document.isInkMask ? InkingStroke.MaskDim : Math.abs(this.Yshift) <= 0.001 ? this.props.PanelHeight() : undefined);
+            const isPresTreeElement: boolean = this.props.treeViewDoc?.type === DocumentType.PRES;
+            const isButton: boolean = this.props.Document.type === DocumentType.FONTICON || this.props.Document._viewType === CollectionViewType.Linear;
+            return (<div className="contentFittingDocumentView">
+                  {!this.props.Document || !this.props.PanelWidth() ? (null) : (
+                        <div className="contentFittingDocumentView-previewDoc" ref={this.ContentRef}
+                              style={{
+                                    transition: this.props.dataTransition,
+                                    position: this.props.Document.isInkMask ? "absolute" : undefined,
+                                    transform: isButton ? undefined : `translate(${this.centeringX}px, ${this.centeringY}px)`,
+                                    width: isButton || isPresTreeElement ? "100%" : xshift() ?? `${100 * (this.props.PanelWidth() - this.Xshift * 2) / this.props.PanelWidth()}%`,
+                                    height: isButton || this.props.forceAutoHeight ? undefined : yshift() ?? (this.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}
+                                    isSelected={this.isSelected}
+                                    select={this.select}
+                                    ContentScaling={this.ContentScale}
+                                    ScreenToLocalTransform={this.screenToLocalTransform}
+                                    focus={this.props.focus || emptyFunction}
+                                    ref={action((r: DocumentViewInternal | null) => r && (this.docView = r))} />
+                        </div>)}
+            </div>);
+      }
 }
 
 export function deiconifyViewFunc(documentView: DocumentView) {
-    documentView.iconify();
-    //StrCast(doc.layoutKey).split("_")[1] === "icon" && setNativeView(doc);
+      documentView.iconify();
+      //StrCast(doc.layoutKey).split("_")[1] === "icon" && setNativeView(doc);
 }
 ScriptingGlobals.add(function deiconifyView(documentView: DocumentView) {
-    documentView.iconify();
-    documentView.select(false);
+      documentView.iconify();
+      documentView.select(false);
 });
 
 ScriptingGlobals.add(function toggleDetail(dv: DocumentView, detailLayoutKeySuffix: string) {
-    if (dv.Document.layoutKey === "layout_" + detailLayoutKeySuffix) dv.switchViews(false, "layout");
-    else dv.switchViews(true, detailLayoutKeySuffix);
+      if (dv.Document.layoutKey === "layout_" + detailLayoutKeySuffix) dv.switchViews(false, "layout");
+      else dv.switchViews(true, detailLayoutKeySuffix);
 });
 
 ScriptingGlobals.add(function updateLinkCollection(linkCollection: Doc) {
-    const linkSource = Cast(linkCollection.linkSource, Doc, null);
-    const collectedLinks = DocListCast(Doc.GetProto(linkCollection).data);
-    let wid = linkSource[WidthSym]();
-    const links = DocListCast(linkSource.links);
-    links.forEach(link => {
-        const other = LinkManager.getOppositeAnchor(link, linkSource);
-        const otherdoc = !other ? undefined : other.annotationOn ? Cast(other.annotationOn, Doc, null) : other;
-        if (otherdoc && !collectedLinks?.some(d => Doc.AreProtosEqual(d, otherdoc))) {
-            const alias = Doc.MakeAlias(otherdoc);
-            alias.x = wid;
-            alias.y = 0;
-            alias._lockedPosition = false;
-            wid += otherdoc[WidthSym]();
-            Doc.AddDocToList(Doc.GetProto(linkCollection), "data", alias);
-        }
-    });
-    return links;
+      const linkSource = Cast(linkCollection.linkSource, Doc, null);
+      const collectedLinks = DocListCast(Doc.GetProto(linkCollection).data);
+      let wid = linkSource[WidthSym]();
+      const links = DocListCast(linkSource.links);
+      links.forEach(link => {
+            const other = LinkManager.getOppositeAnchor(link, linkSource);
+            const otherdoc = !other ? undefined : other.annotationOn ? Cast(other.annotationOn, Doc, null) : other;
+            if (otherdoc && !collectedLinks?.some(d => Doc.AreProtosEqual(d, otherdoc))) {
+                  const alias = Doc.MakeAlias(otherdoc);
+                  alias.x = wid;
+                  alias.y = 0;
+                  alias._lockedPosition = false;
+                  wid += otherdoc[WidthSym]();
+                  Doc.AddDocToList(Doc.GetProto(linkCollection), "data", alias);
+            }
+      });
+      return links;
 });
\ No newline at end of file
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 87716e9cc..5826abd65 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -9,6 +9,7 @@ import { Networking } from '../../../Network';
 import { Upload } from '../../../../server/SharedMediaTypes';
 
 import { RecordingApi } from '../../../util/RecordingApi';
+import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../../Utils';
 
 interface MediaSegment {
       videoChunks: any[],
@@ -193,12 +194,15 @@ export function RecordingView(props: IRecordingViewProps) {
             }
       }
 
-      const startOrResume = () => {
-            if (!videoRecorder.current || videoRecorder.current.state === "inactive") {
-                  record();
-            } else if (videoRecorder.current.state === "paused") {
-                  videoRecorder.current.resume();
-            }
+      const startOrResume = (e: React.PointerEvent) => {
+            // the code to start or resume does not get triggered if we start dragging the button
+            setupMoveUpEvents({}, e, returnFalse, returnFalse, () => {
+                  if (!videoRecorder.current || videoRecorder.current.state === "inactive") {
+                        record();
+                  } else if (videoRecorder.current.state === "paused") {
+                        videoRecorder.current.resume();
+                  }
+            })
       }
 
       const clearPrevious = () => {
@@ -240,8 +244,8 @@ export function RecordingView(props: IRecordingViewProps) {
                               <div className="controls-inner-container">
                                     <div className="record-button-wrapper">
                                           {recording ?
-                                                <button className="stop-button" onClick={pause} /> :
-                                                <button className="record-button" onClick={startOrResume} />
+                                                <button className="stop-button" onPointerDown={pause} /> :
+                                                <button className="record-button" onPointerDown={startOrResume} />
                                           }
                                     </div>
 
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index 99fc61cde..083ca5bea 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -51,11 +51,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
       componentWillUnmount() {
             this._heightDisposer?.();
       }
-    
-        @action
-        presExpandDocumentClick = () => {
+
+      @action
+      presExpandDocumentClick = () => {
             this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton;
-        }
+      }
 
       /**
        * Returns a local transformed coordinate array for given coordinates.
@@ -324,7 +324,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
             } else {
                   // if we dont have any recording
-                  const recording = Docs.Create.WebCamDocument("", { _width: 400, _height: 200, title: "recording", cloneFieldFilter: new List<string>(["system"]) });
+                  const recording = Docs.Create.WebCamDocument("", { _width: 400, _height: 200, hideDocumentButtonBar: true, title: "recording", cloneFieldFilter: new List<string>(["system"]) });
 
                   // attach the recording to the slide, and attach the slide to the recording
                   recording.slides = activeItem