merged

1 files changed, 64 insertions, 82 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 8d905bcac..372dc5456 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -3,29 +3,29 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tooltip } from '@material-ui/core';
 import { action, computed, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { AclAdmin, AclEdit, DataSym, Doc, Field, WidthSym, HeightSym } from "../../fields/Doc";
+import { AclAdmin, AclEdit, DataSym, Doc, Field, HeightSym, WidthSym } from "../../fields/Doc";
 import { Document } from '../../fields/documentSchemas';
 import { HtmlField } from '../../fields/HtmlField';
 import { InkField } from "../../fields/InkField";
 import { ScriptField } from '../../fields/ScriptField';
 import { Cast, NumCast } from "../../fields/Types";
 import { GetEffectiveAcl } from '../../fields/util';
-import { emptyFunction, returnFalse, setupMoveUpEvents, simulateMouseClick, returnVal } from "../../Utils";
-import { DocUtils, Docs } from "../documents/Documents";
+import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../Utils";
+import { Docs, DocUtils } from "../documents/Documents";
 import { DocumentType } from '../documents/DocumentTypes';
-import { DragManager, dropActionType } from "../util/DragManager";
+import { CurrentUserUtils } from '../util/CurrentUserUtils';
+import { DragManager } from "../util/DragManager";
 import { SelectionManager } from "../util/SelectionManager";
 import { SnappingManager } from '../util/SnappingManager';
 import { undoBatch, UndoManager } from "../util/UndoManager";
 import { CollectionDockingView } from './collections/CollectionDockingView';
 import { DocumentButtonBar } from './DocumentButtonBar';
 import './DocumentDecorations.scss';
+import { KeyManager } from './GlobalKeyHandler';
+import { InkStrokeProperties } from './InkStrokeProperties';
 import { DocumentView } from "./nodes/DocumentView";
 import React = require("react");
 import e = require('express');
-import { CurrentUserUtils } from '../util/CurrentUserUtils';
-import { InkStrokeProperties } from './InkStrokeProperties';
-import { KeyManager } from './GlobalKeyHandler';
 
 @observer
 export class DocumentDecorations extends React.Component<{ boundsLeft: number, boundsTop: number }, { value: string }> {
@@ -57,36 +57,20 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
     constructor(props: any) {
         super(props);
         DocumentDecorations.Instance = this;
-        reaction(() => SelectionManager.SelectedDocuments().slice(), docs => this.titleBlur(false));
+        reaction(() => SelectionManager.Views().slice(), docs => this.titleBlur(false));
     }
 
     @computed
     get Bounds(): { x: number, y: number, b: number, r: number } {
-        return SelectionManager.SelectedDocuments().reduce((bounds, documentView) => {
-            if (documentView.props.renderDepth === 0 ||
-                documentView.props.treeViewDoc ||
-                !documentView.ContentDiv ||
-                Doc.AreProtosEqual(documentView.props.Document, Doc.UserDoc())) {
-                return bounds;
-            }
-            const transform = (documentView.props.ScreenToLocalTransform().scale(documentView.props.ContentScaling())).inverse();
-            var [sptX, sptY] = transform.transformPoint(0, 0);
-            let [bptX, bptY] = transform.transformPoint(documentView.props.PanelWidth(), documentView.props.PanelHeight());
-            if (documentView.props.LayoutTemplateString?.includes("LinkAnchorBox")) {
-                const docuBox = documentView.ContentDiv.getElementsByClassName("linkAnchorBox-cont");
-                if (docuBox.length) {
-                    const rect = docuBox[0].getBoundingClientRect();
-                    sptX = rect.left;
-                    sptY = rect.top;
-                    bptX = rect.right;
-                    bptY = rect.bottom;
-                }
-            }
-            return {
-                x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y),
-                r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b)
-            };
-        }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
+        return SelectionManager.Views().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)
+                },
+            { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
     }
 
     titleBlur = action((commit: boolean) => {
@@ -96,8 +80,8 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
                 this._titleControlString = this._accumulatedTitle;
             } else if (this._titleControlString.startsWith("#")) {
                 const selectionTitleFieldKey = this._titleControlString.substring(1);
-                selectionTitleFieldKey === "title" && (SelectionManager.SelectedDocuments()[0].dataDoc["title-custom"] = !this._accumulatedTitle.startsWith("-"));
-                UndoManager.RunInBatch(() => selectionTitleFieldKey && SelectionManager.SelectedDocuments().forEach(d => {
+                selectionTitleFieldKey === "title" && (SelectionManager.Views()[0].dataDoc["title-custom"] = !this._accumulatedTitle.startsWith("-"));
+                UndoManager.RunInBatch(() => selectionTitleFieldKey && SelectionManager.Views().forEach(d => {
                     const value = typeof d.props.Document[selectionTitleFieldKey] === "number" ? +this._accumulatedTitle : this._accumulatedTitle;
                     Doc.SetInPlace(d.props.Document, selectionTitleFieldKey, value, true);
                 }), "title blur");
@@ -112,7 +96,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
             const text = e.target.value;
             if (text.startsWith("::")) {
                 this._accumulatedTitle = text.slice(2, text.length);
-                const promoteDoc = SelectionManager.SelectedDocuments()[0];
+                const promoteDoc = SelectionManager.Views()[0];
                 Doc.SetInPlace(promoteDoc.props.Document, "title", this._accumulatedTitle, true);
                 DocUtils.Publish(promoteDoc.props.Document, this._accumulatedTitle, promoteDoc.props.addDocument, promoteDoc.props.removeDocument);
             }
@@ -134,17 +118,17 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
 
     @action
     onBackgroundMove = (dragTitle: boolean, e: PointerEvent): boolean => {
-        const dragDocView = SelectionManager.SelectedDocuments()[0];
-        const dragData = new DragManager.DocumentDragData(SelectionManager.SelectedDocuments().map(dv => dv.props.Document));
-        const [left, top] = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.props.ContentScaling()).inverse().transformPoint(0, 0);
-        dragData.offset = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.props.ContentScaling()).transformDirection(e.x - left, e.y - top);
+        const dragDocView = SelectionManager.Views()[0];
+        const dragData = new DragManager.DocumentDragData(SelectionManager.Views().map(dv => dv.props.Document));
+        const { left, top } = dragDocView.getBounds() || { left: 0, top: 0 };
+        dragData.offset = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.ContentScale()).transformDirection(e.x - left, e.y - top);
         dragData.moveDocument = dragDocView.props.moveDocument;
         dragData.isSelectionMove = true;
         dragData.canEmbed = dragTitle;
         dragData.dropAction = dragDocView.props.dropAction;
         this.Interacting = true;
         this._hidden = true;
-        DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(dv => dv.ContentDiv!), dragData, e.x, e.y, {
+        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;
@@ -161,7 +145,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
     @action
     onCloseClick = async (e: React.MouseEvent | undefined) => {
         if (!e?.button) {
-            const selected = SelectionManager.SelectedDocuments().slice();
+            const selected = SelectionManager.Views().slice();
             SelectionManager.DeselectAll();
             selected.map(dv => dv.props.removeDocument?.(dv.props.Document));
         }
@@ -174,7 +158,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
     @action
     onMaximizeClick = (e: PointerEvent): void => {
         if (e.button === 0) {
-            const selectedDocs = SelectionManager.SelectedDocuments();
+            const selectedDocs = SelectionManager.Views();
             if (selectedDocs.length) {
                 if (e.ctrlKey) {    // open an alias in a new tab with Ctrl Key
                     selectedDocs[0].props.Document._fullScreenView = Doc.MakeAlias(selectedDocs[0].props.Document);
@@ -196,20 +180,14 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
     @undoBatch
     @action
     onIconifyClick = (e: PointerEvent): void => {
-        if (e.button === 0) {
-            SelectionManager.SelectedDocuments().forEach(dv => dv?.iconify());
-        }
+        (e.button === 0) && SelectionManager.Views().forEach(dv => dv?.iconify());
         SelectionManager.DeselectAll();
     }
 
     @action
     onSelectorUp = (e: React.PointerEvent): void => {
-        setupMoveUpEvents(this, e, returnFalse, emptyFunction, action((e) => {
-            const selDoc = SelectionManager.SelectedDocuments()?.[0];
-            if (selDoc) {
-                selDoc.props.ContainingCollectionView?.props.select(false);
-            }
-        }));
+        setupMoveUpEvents(this, e, returnFalse, emptyFunction, action((e) =>
+            SelectionManager.Views()?.[0]?.props.ContainingCollectionView?.props.select(false)));
     }
 
     @action
@@ -223,7 +201,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
     onRadiusMove = (e: PointerEvent, down: number[]): boolean => {
         let dist = Math.sqrt((e.clientX - down[0]) * (e.clientX - down[0]) + (e.clientY - down[1]) * (e.clientY - down[1]));
         dist = dist < 3 ? 0 : dist;
-        SelectionManager.SelectedDocuments().map(dv => dv.props.Document).map(doc => doc.layout instanceof Doc ? doc.layout : doc.isTemplateForField ? doc : Doc.GetProto(doc)).
+        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)}px`);
         return false;
     }
@@ -236,7 +214,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
         setupMoveUpEvents(this, e, this.onRotateMove, this.onRotateUp, (e) => { });
         this._prevX = e.clientX;
         this._prevY = e.clientY;
-        SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
+        SelectionManager.Views().forEach(action((element: DocumentView) => {
             const doc = Document(element.rootDoc);
             if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
                 const ink = Cast(doc.data, InkField)?.inkData;
@@ -273,7 +251,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
         this._prevX = e.clientX;
         this._prevY = e.clientY;
         var index = 0;
-        SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
+        SelectionManager.Views().forEach(action((element: DocumentView) => {
             const doc = Document(element.rootDoc);
             if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
                 doc.rotation = Number(doc.rotation) + Number(angle);
@@ -320,7 +298,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
     onPointerDown = (e: React.PointerEvent): void => {
 
         this._inkDocs = [];
-        SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
+        SelectionManager.Views().forEach(action((element: DocumentView) => {
             const doc = Document(element.rootDoc);
             if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height) {
                 this._inkDocs.push({ x: doc.x, y: doc.y, width: doc._width, height: doc._height });
@@ -339,23 +317,22 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
             this._offY = this._resizeHdlId.toLowerCase().includes("top") ? bounds.bottom - e.clientY : bounds.top - e.clientY;
             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._resizeUndo = UndoManager.StartBatch("DocDecs resize");
-            SelectionManager.SelectedDocuments()[0].props.setupDragLines?.(e.ctrlKey || e.shiftKey);
         }
         this._snapX = e.pageX;
         this._snapY = e.pageY;
         this._initialAutoHeight = true;
-        DragManager.docsBeingDragged = SelectionManager.SelectedDocuments().map(dv => dv.rootDoc);
-        SelectionManager.SelectedDocuments().map(dv => {
+        DragManager.docsBeingDragged = SelectionManager.Views().map(dv => dv.rootDoc);
+        SelectionManager.Views().map(dv => {
             this._dragHeights.set(dv.layoutDoc, NumCast(dv.layoutDoc._height));
             dv.layoutDoc._delayAutoHeight = dv.layoutDoc._height;
         });
     }
 
     onPointerMove = (e: PointerEvent, down: number[], move: number[]): boolean => {
-        const first = SelectionManager.SelectedDocuments()[0];
+        const first = SelectionManager.Views()[0];
         let thisPt = { thisX: e.clientX - this._offX, thisY: e.clientY - this._offY };
         var fixedAspect = Doc.NativeAspect(first.layoutDoc);
-        SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
+        SelectionManager.Views().forEach(action((element: DocumentView) => {
             const doc = Document(element.rootDoc);
             if (doc.type === DocumentType.INK && doc._width && doc._height && InkStrokeProperties.Instance?._lock) {
                 fixedAspect = Doc.NativeHeight(doc);
@@ -388,7 +365,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
         let dragRight = false;
         let dX = 0, dY = 0, dW = 0, dH = 0;
         const unfreeze = () =>
-            SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) =>
+            SelectionManager.Views().forEach(action((element: DocumentView) =>
                 ((element.rootDoc.type === DocumentType.RTF ||
                     element.rootDoc.type === DocumentType.COMPARISON ||
                     (element.rootDoc.type === DocumentType.WEB && Doc.LayoutField(element.rootDoc) instanceof HtmlField))
@@ -437,16 +414,16 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
                 break;
         }
 
-        SelectionManager.SelectedDocuments().forEach(action((docView: DocumentView) => {
+        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);
-                let nwidth = returnVal(docView.NativeWidth?.(), Doc.NativeWidth(doc));
-                let nheight = returnVal(docView.NativeHeight?.(), Doc.NativeHeight(doc));
+                let nwidth = docView.nativeWidth;
+                let nheight = docView.nativeHeight;
                 const width = (doc._width || 0);
                 let height = (doc._height || (nheight / nwidth * width));
                 height = !height || isNaN(height) ? 20 : height;
-                const scale = docView.props.ScreenToLocalTransform().Scale * docView.props.ContentScaling();
+                const scale = docView.props.ScreenToLocalTransform().Scale * docView.ContentScale();
                 if (nwidth && nheight) {
                     if (nwidth / nheight !== width / height && !dragBottom) {
                         height = nheight / nwidth * width;
@@ -503,9 +480,9 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
 
     @action
     onPointerUp = (e: PointerEvent): void => {
-        SelectionManager.SelectedDocuments().map(dv => {
+        SelectionManager.Views().map(dv => {
             if (NumCast(dv.layoutDoc._delayAutoHeight) < this._dragHeights.get(dv.layoutDoc)!) {
-                dv.nativeWidth > 0 && Doc.toggleNativeDimensions(dv.layoutDoc, dv.props.ContentScaling(), dv.props.PanelWidth(), dv.props.PanelHeight());
+                dv.nativeWidth > 0 && Doc.toggleNativeDimensions(dv.layoutDoc, dv.ContentScale(), dv.props.PanelWidth(), dv.props.PanelHeight());
                 dv.layoutDoc._autoHeight = true;
             }
             dv.layoutDoc._delayAutoHeight = undefined;
@@ -518,7 +495,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
 
 
         //need to change points for resize, or else rotation/control points will fail.
-        SelectionManager.SelectedDocuments().forEach(action((element: DocumentView, index) => {
+        SelectionManager.Views().forEach(action((element: DocumentView, index) => {
             const doc = Document(element.rootDoc);
             if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) {
                 const ink = Cast(doc.data, InkField)?.inkData;
@@ -541,8 +518,8 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
 
     @computed
     get selectionTitle(): string {
-        if (SelectionManager.SelectedDocuments().length === 1) {
-            const selected = SelectionManager.SelectedDocuments()[0];
+        if (SelectionManager.Views().length === 1) {
+            const selected = SelectionManager.Views()[0];
             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() || "";
             }
@@ -550,7 +527,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
                 return Field.toString(selected.props.Document[this._titleControlString.substring(1)] as Field) || "-unset-";
             }
             return this._accumulatedTitle;
-        } else if (SelectionManager.SelectedDocuments().length > 1) {
+        } else if (SelectionManager.Views().length > 1) {
             return "-multiple-";
         }
         return "-unset-";
@@ -575,16 +552,16 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
     render() {
         const darkScheme = CurrentUserUtils.ActiveDashboard?.darkScheme ? "dimgray" : undefined;
         const bounds = this.Bounds;
-        const seldoc = SelectionManager.SelectedDocuments().length ? SelectionManager.SelectedDocuments()[0] : undefined;
+        const seldoc = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
         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 canDelete = SelectionManager.SelectedDocuments().some(docView => {
+        const canDelete = SelectionManager.Views().some(docView => {
             const collectionAcl = docView.props.ContainingCollectionView ? GetEffectiveAcl(docView.props.ContainingCollectionDoc?.[DataSym]) : AclEdit;
             const docAcl = GetEffectiveAcl(docView.props.Document);
             return !docView.props.Document._stayInCollection && (collectionAcl === AclAdmin || collectionAcl === AclEdit || docAcl === AclAdmin);
         });
-        const canOpen = SelectionManager.SelectedDocuments().some(docView => !docView.props.Document._stayInCollection);
+        const canOpen = SelectionManager.Views().some(docView => !docView.props.Document._stayInCollection);
         const closeIcon = !canDelete ? (null) : (
             <Tooltip title={<div className="dash-tooltip">Close</div>} placement="top">
                 <div className="documentDecorations-closeButton" onClick={this.onCloseClick}>
@@ -592,7 +569,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
                 </div></Tooltip>);
 
         const openIcon = !canOpen ? (null) : <Tooltip title={<div className="dash-tooltip">Open in Tab (ctrl: as alias, shift: in new collection)</div>} placement="top"><div className="documentDecorations-openInTab" onContextMenu={e => { e.preventDefault(); e.stopPropagation(); }} onPointerDown={this.onMaximizeDown}>
-            {SelectionManager.SelectedDocuments().length === 1 ? <FontAwesomeIcon icon="external-link-alt" className="documentView-minimizedIcon" /> : "..."}
+            {SelectionManager.Views().length === 1 ? <FontAwesomeIcon icon="external-link-alt" className="documentView-minimizedIcon" /> : "..."}
         </div>
         </Tooltip>;
 
@@ -603,7 +580,11 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
                 <span style={{ width: "100%", display: "inline-block", cursor: "move" }}>{`${this.selectionTitle}`}</span>
             </div>;
 
-        const leftBounds = this.props.boundsLeft;
+        let inMainMenuPanel = false;
+        for (let node = seldoc.ContentDiv; node && !inMainMenuPanel; node = node?.parentNode as any) {
+            if (node.className === "mainView-mainContent") inMainMenuPanel = true;
+        }
+        const leftBounds = inMainMenuPanel ? 0 : this.props.boundsLeft;
         const topBounds = 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;
@@ -619,7 +600,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
                 left: bounds.x - this._resizeBorderWidth / 2,
                 top: bounds.y - this._resizeBorderWidth / 2,
                 pointerEvents: KeyManager.Instance.ShiftPressed || this.Interacting ? "none" : "all",
-                zIndex: SelectionManager.SelectedDocuments().length > 1 ? 900 : 0,
+                zIndex: SelectionManager.Views().length > 1 ? 900 : 0,
             }} onPointerDown={this.onBackgroundDown} onContextMenu={e => { e.preventDefault(); e.stopPropagation(); }} >
             </div>
             {bounds.r - bounds.x < 15 && bounds.b - bounds.y < 15 ? (null) : <>
@@ -630,12 +611,13 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
                     top: bounds.y - this._resizeBorderWidth / 2 - this._titleHeight,
                 }}>
                     {closeIcon}
-                    {Object.keys(SelectionManager.SelectedDocuments()[0].props).includes("treeViewDoc") ? (null) : titleArea}
-                    {SelectionManager.SelectedDocuments().length !== 1 || seldoc.Document.type === DocumentType.INK || Object.keys(SelectionManager.SelectedDocuments()[0].props).includes("treeViewDoc") ? (null) :
+                    {bounds.r - bounds.x < 100 ? null : titleArea}
+                    {SelectionManager.Views().length !== 1 || seldoc.Document.type === DocumentType.INK ? (null) :
                         <Tooltip title={<div className="dash-tooltip">{`${seldoc.finalLayoutKey.includes("icon") ? "De" : ""}Iconify Document`}</div>} placement="top">
                             <div className="documentDecorations-iconifyButton" onPointerDown={this.onIconifyDown}>
                                 <FontAwesomeIcon icon={seldoc.finalLayoutKey.includes("icon") ? "window-restore" : "window-minimize"} className="documentView-minimizedIcon" />
-                            </div></Tooltip>}
+                            </div>
+                        </Tooltip>}
                     {openIcon}
                     <div className="documentDecorations-topLeftResizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
                     <div className="documentDecorations-topResizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
@@ -657,7 +639,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
 
                 </div >
                 {seldoc?.Document.type === DocumentType.FONTICON ? (null) : <div className="link-button-container" key="links" style={{ left: bounds.x - this._resizeBorderWidth / 2 + 10, top: bounds.b + this._resizeBorderWidth / 2 }}>
-                    <DocumentButtonBar views={SelectionManager.SelectedDocuments} />
+                    <DocumentButtonBar views={SelectionManager.Views} />
                 </div>}
             </>}
         </div >