From 6493d95e92c8ed58bb3a8c07ea4ca28dae82ea1d Mon Sep 17 00:00:00 2001
From: Jenny Yu <jennyyu212@outlook.com>
Date: Tue, 7 Jun 2022 08:51:41 -0700
Subject: removing decorations on recording box

---
 src/client/views/nodes/trails/PresElementBox.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/client/views/nodes/trails/PresElementBox.tsx')

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
-- 
cgit v1.2.3-70-g09d2


From c402d2a68670c50e91bc1a67c58c9537ce8ebdcc Mon Sep 17 00:00:00 2001
From: Jenny Yu <jennyyu212@outlook.com>
Date: Tue, 7 Jun 2022 23:42:15 -0700
Subject: fix: recording box appear on bottom right corner, removed document
 decorations

---
 src/client/views/DocumentDecorations.tsx         | 23 ++++++++++-------------
 src/client/views/nodes/DocumentView.tsx          |  2 ++
 src/client/views/nodes/trails/PresElementBox.tsx | 17 ++++++++++++-----
 3 files changed, 24 insertions(+), 18 deletions(-)

(limited to 'src/client/views/nodes/trails/PresElementBox.tsx')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index bc4fec3f0..0e9bf50fc 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -468,14 +468,6 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P
             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");
       }
@@ -491,8 +483,13 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P
             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 hideOpenButton = seldoc.props.hideOpenButton || seldoc.rootDoc.hideOpenButton ||
+                  SelectionManager.Views().some(docView => docView.props.Document._stayInCollection || docView.props.Document.isGroup || docView.props.Document.hideOpenButton);
+            const hideDeleteButton = seldoc.props.hideDeleteButton || seldoc.rootDoc.hideDeleteButton ||
+                  SelectionManager.Views().some(docView => {
+                        const collectionAcl = docView.props.ContainingCollectionView ? GetEffectiveAcl(docView.props.ContainingCollectionDoc?.[DataSym]) : AclEdit;
+                        return docView.rootDoc.stayInCollection || (collectionAcl !== AclAdmin && collectionAcl !== AclEdit && GetEffectiveAcl(docView.rootDoc) !== AclAdmin);
+                  });
             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()}
@@ -502,7 +499,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P
                   </Tooltip>);
 
             const colorScheme = StrCast(CurrentUserUtils.ActiveDashboard?.colorScheme);
-            const titleArea = hideTitle ? <div className="documentDecorations-title" onPointerDown={this.onTitleDown} key="title" /> :
+            const titleArea = hideTitle ? (null) :
                   this._edtingTitle ?
                         <input ref={this._keyinput} className={`documentDecorations-title${colorScheme}`}
                               type="text" name="dynbox" autoComplete="on"
@@ -546,9 +543,9 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P
                               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")}
+                              {hideDeleteButton ? <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)")}
+                              {hideOpenButton ? (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()} />
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 96c989e77..ddadde52a 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -164,6 +164,8 @@ export interface DocumentViewProps extends DocumentViewSharedProps {
       hideTitle?: boolean;  // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
       hideDecorationTitle?: boolean;  // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
       hideDocumentButtonBar?: boolean;
+      hideOpenButton?: boolean;
+      hideDeleteButton?: boolean;
       treeViewDoc?: Doc;
       isDocumentActive?: () => boolean | undefined; // whether a document should handle pointer events
       isContentActive: () => boolean | undefined; // whether document contents should handle pointer events
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index 083ca5bea..f1144b32d 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -324,16 +324,23 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
             } else {
                   // if we dont have any recording
-                  const recording = Docs.Create.WebCamDocument("", { _width: 400, _height: 200, hideDocumentButtonBar: true, title: "recording", cloneFieldFilter: new List<string>(["system"]) });
+                  const recording = Docs.Create.WebCamDocument("", {
+                        _width: 400, _height: 200,
+                        hideDocumentButtonBar: true,
+                        hideDecorationTitle: true,
+                        hideOpenButton: true,
+                        hideDeleteButton: true,
+                        cloneFieldFilter:
+                              new List<string>(["system"])
+                  });
 
                   // attach the recording to the slide, and attach the slide to the recording
                   recording.slides = activeItem
                   activeItem.recording = recording
 
-                  // TODO: Figure out exactly where we want the video to appear
-                  const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-                  recording.x = pt[0];
-                  recording.y = pt[1];
+                  // make recording box appear in the bottom right corner of the screen
+                  recording.x = window.innerWidth - recording._width - 20;
+                  recording.y = window.innerHeight - recording._height - 20;
                   Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, recording);
             }
       }
-- 
cgit v1.2.3-70-g09d2


From 58c2085ceb20cd2527ac69088efb7a46b20f8434 Mon Sep 17 00:00:00 2001
From: Jenny Yu <jennyyu212@outlook.com>
Date: Wed, 8 Jun 2022 00:49:12 -0700
Subject: styling: pres element box

---
 src/client/views/DocumentDecorations.tsx          |  44 +-
 src/client/views/collections/TabDocView.tsx       | 904 +++++++++++-----------
 src/client/views/nodes/trails/PresElementBox.scss | 338 ++++----
 src/client/views/nodes/trails/PresElementBox.tsx  |  20 +-
 4 files changed, 656 insertions(+), 650 deletions(-)

(limited to 'src/client/views/nodes/trails/PresElementBox.tsx')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 0e9bf50fc..b666b5977 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -153,29 +153,29 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P
       _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));
+
+            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));
+
       }
       onMaximizeDown = (e: React.PointerEvent) => {
             setupMoveUpEvents(this, e, () => {
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 2b78b20ea..39add0534 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -38,490 +38,490 @@ import React = require("react");
 const _global = (window /* browser */ || global /* node */) as any;
 
 interface TabDocViewProps {
-    documentId: FieldId;
-    glContainer: any;
+      documentId: FieldId;
+      glContainer: any;
 }
 @observer
 export class TabDocView extends React.Component<TabDocViewProps> {
-    _mainCont: HTMLDivElement | null = null;
-    _tabReaction: IReactionDisposer | undefined;
-    @observable _activated: boolean = false;
-    @observable _panelWidth = 0;
-    @observable _panelHeight = 0;
-    @observable _isActive: boolean = false;
-    @observable _document: Doc | undefined;
-    @observable _view: DocumentView | undefined;
+      _mainCont: HTMLDivElement | null = null;
+      _tabReaction: IReactionDisposer | undefined;
+      @observable _activated: boolean = false;
+      @observable _panelWidth = 0;
+      @observable _panelHeight = 0;
+      @observable _isActive: boolean = false;
+      @observable _document: Doc | undefined;
+      @observable _view: DocumentView | undefined;
 
-    @computed get layoutDoc() { return this._document && Doc.Layout(this._document); }
-    @computed get tabColor() { return StrCast(this._document?._backgroundColor, StrCast(this._document?.backgroundColor, DefaultStyleProvider(this._document, undefined, StyleProp.BackgroundColor))); }
-    @computed get tabTextColor() { return this._document?.type === DocumentType.PRES ? "black" : StrCast(this._document?._color, StrCast(this._document?.color, DefaultStyleProvider(this._document, undefined, StyleProp.Color))); }
-    // @computed get renderBounds() {
-    //     const bounds = this._document ? Cast(this._document._renderContentBounds, listSpec("number"), [0, 0, this.returnMiniSize(), this.returnMiniSize()]) : [0, 0, 0, 0];
-    //     const xbounds = bounds[2] - bounds[0];
-    //     const ybounds = bounds[3] - bounds[1];
-    //     const dim = Math.max(xbounds, ybounds);
-    //     return { l: bounds[0] + xbounds / 2 - dim / 2, t: bounds[1] + ybounds / 2 - dim / 2, cx: bounds[0] + xbounds / 2, cy: bounds[1] + ybounds / 2, dim };
-    // }
+      @computed get layoutDoc() { return this._document && Doc.Layout(this._document); }
+      @computed get tabColor() { return StrCast(this._document?._backgroundColor, StrCast(this._document?.backgroundColor, DefaultStyleProvider(this._document, undefined, StyleProp.BackgroundColor))); }
+      @computed get tabTextColor() { return this._document?.type === DocumentType.PRES ? "black" : StrCast(this._document?._color, StrCast(this._document?.color, DefaultStyleProvider(this._document, undefined, StyleProp.Color))); }
+      // @computed get renderBounds() {
+      //     const bounds = this._document ? Cast(this._document._renderContentBounds, listSpec("number"), [0, 0, this.returnMiniSize(), this.returnMiniSize()]) : [0, 0, 0, 0];
+      //     const xbounds = bounds[2] - bounds[0];
+      //     const ybounds = bounds[3] - bounds[1];
+      //     const dim = Math.max(xbounds, ybounds);
+      //     return { l: bounds[0] + xbounds / 2 - dim / 2, t: bounds[1] + ybounds / 2 - dim / 2, cx: bounds[0] + xbounds / 2, cy: bounds[1] + ybounds / 2, dim };
+      // }
 
-    get stack() { return (this.props as any).glContainer.parent.parent; }
-    get tab() { return (this.props as any).glContainer.tab; }
-    get view() { return this._view; }
+      get stack() { return (this.props as any).glContainer.parent.parent; }
+      get tab() { return (this.props as any).glContainer.tab; }
+      get view() { return this._view; }
 
-    @action
-    init = (tab: any, doc: Opt<Doc>) => {
-        if (tab.contentItem === tab.header.parent.getActiveContentItem()) this._activated = true;
-        if (tab.DashDoc !== doc && doc && tab.hasOwnProperty("contentItem") && tab.contentItem.config.type !== "stack") {
-            tab._disposers = {} as { [name: string]: IReactionDisposer };
-            tab.contentItem.config.fixed && (tab.contentItem.parent.config.fixed = true);
-            tab.DashDoc = doc;
-            CollectionDockingView.Instance.tabMap.add(tab);
-            const iconType: IconProp = Doc.toIcon(doc);
-            // setup the title element and set its size according to the # of chars in the title.  Show the full title when clicked.
-            const titleEle = tab.titleElement[0];
-            const iconWrap = document.createElement("div");
-            const closeWrap = document.createElement("div");
+      @action
+      init = (tab: any, doc: Opt<Doc>) => {
+            if (tab.contentItem === tab.header.parent.getActiveContentItem()) this._activated = true;
+            if (tab.DashDoc !== doc && doc && tab.hasOwnProperty("contentItem") && tab.contentItem.config.type !== "stack") {
+                  tab._disposers = {} as { [name: string]: IReactionDisposer };
+                  tab.contentItem.config.fixed && (tab.contentItem.parent.config.fixed = true);
+                  tab.DashDoc = doc;
+                  CollectionDockingView.Instance.tabMap.add(tab);
+                  const iconType: IconProp = Doc.toIcon(doc);
+                  // setup the title element and set its size according to the # of chars in the title.  Show the full title when clicked.
+                  const titleEle = tab.titleElement[0];
+                  const iconWrap = document.createElement("div");
+                  const closeWrap = document.createElement("div");
 
 
-            titleEle.size = StrCast(doc.title).length + 3;
-            titleEle.value = doc.title;
-            titleEle.onkeydown = (e: KeyboardEvent) => {
-                e.stopPropagation();
-            };
-            titleEle.onchange = undoBatch(action((e: any) => {
-                titleEle.size = e.currentTarget.value.length + 3;
-                Doc.GetProto(doc).title = e.currentTarget.value;
-            }));
+                  titleEle.size = StrCast(doc.title).length + 3;
+                  titleEle.value = doc.title;
+                  titleEle.onkeydown = (e: KeyboardEvent) => {
+                        e.stopPropagation();
+                  };
+                  titleEle.onchange = undoBatch(action((e: any) => {
+                        titleEle.size = e.currentTarget.value.length + 3;
+                        Doc.GetProto(doc).title = e.currentTarget.value;
+                  }));
 
-            const dragBtnDown = (e: React.PointerEvent) => {
-                setupMoveUpEvents(this, e, e => !e.defaultPrevented && DragManager.StartDocumentDrag([iconWrap], new DragManager.DocumentDragData([doc], doc.dropAction as dropActionType), e.clientX, e.clientY), returnFalse, emptyFunction);
-            };
+                  const dragBtnDown = (e: React.PointerEvent) => {
+                        setupMoveUpEvents(this, e, e => !e.defaultPrevented && DragManager.StartDocumentDrag([iconWrap], new DragManager.DocumentDragData([doc], doc.dropAction as dropActionType), e.clientX, e.clientY), returnFalse, emptyFunction);
+                  };
 
 
-            if (tab.element[0].children[1].children.length === 1) {
-                iconWrap.className = "lm_iconWrap";
-                iconWrap.id = "lm_iconWrap";
-                closeWrap.className = "lm_iconWrap";
-                closeWrap.id = "lm_closeWrap";
-                closeWrap.onclick = (e: MouseEvent) => {
-                    tab.header.parent.contentItem.remove();
-                    Doc.AddDocToList(CurrentUserUtils.MyHeaderBarDoc, "data", tab.DashDoc);
-                    Doc.AddDocToList(CurrentUserUtils.MyRecentlyClosed, "data", tab.DashDoc, undefined, true, true);
-                };
-                const docIcon = <FontAwesomeIcon onPointerDown={dragBtnDown} icon={iconType} />;
-                const closeIcon = <FontAwesomeIcon icon={"times"} />;
-                ReactDOM.render(docIcon, iconWrap);
-                ReactDOM.render(closeIcon, closeWrap);
-                // tab.element[0].append(closeWrap);
-                tab.element[0].prepend(iconWrap);
-                tab._disposers.layerDisposer = reaction(() => ({ layer: tab.DashDoc.activeLayer, color: this.tabColor }),
-                    ({ layer, color }) => {
-                        // console.log("TabDocView: " + this.tabColor);
-                        // console.log("lightOrDark: " + lightOrDark(this.tabColor));
-                        const textColor = lightOrDark(this.tabColor); //not working with StyleProp.Color
-                        titleEle.style.color = textColor;
-                        titleEle.style.backgroundColor = "transparent";
-                        iconWrap.style.color = textColor;
-                        closeWrap.style.color = textColor;
-                        moreInfoDrag.style.backgroundColor = textColor;
-                        tab.element[0].style.background = !layer ? color : "dimgrey";
-                    }, { fireImmediately: true });
-            }
-            // shifts the focus to this tab when another tab is dragged over it
-            tab.element[0].onmouseenter = (e: MouseEvent) => {
-                if (SnappingManager.GetIsDragging() && tab.contentItem !== tab.header.parent.getActiveContentItem()) {
-                    tab.header.parent.setActiveContentItem(tab.contentItem);
-                    tab.setActive(true);
-                }
-            };
-
+                  if (tab.element[0].children[1].children.length === 1) {
+                        iconWrap.className = "lm_iconWrap";
+                        iconWrap.id = "lm_iconWrap";
+                        closeWrap.className = "lm_iconWrap";
+                        closeWrap.id = "lm_closeWrap";
+                        closeWrap.onclick = (e: MouseEvent) => {
+                              tab.header.parent.contentItem.remove();
+                              Doc.AddDocToList(CurrentUserUtils.MyHeaderBarDoc, "data", tab.DashDoc);
+                              Doc.AddDocToList(CurrentUserUtils.MyRecentlyClosed, "data", tab.DashDoc, undefined, true, true);
+                        };
+                        const docIcon = <FontAwesomeIcon onPointerDown={dragBtnDown} icon={iconType} />;
+                        const closeIcon = <FontAwesomeIcon icon={"times"} />;
+                        ReactDOM.render(docIcon, iconWrap);
+                        ReactDOM.render(closeIcon, closeWrap);
+                        // tab.element[0].append(closeWrap);
+                        tab.element[0].prepend(iconWrap);
+                        tab._disposers.layerDisposer = reaction(() => ({ layer: tab.DashDoc.activeLayer, color: this.tabColor }),
+                              ({ layer, color }) => {
+                                    // console.log("TabDocView: " + this.tabColor);
+                                    // console.log("lightOrDark: " + lightOrDark(this.tabColor));
+                                    const textColor = lightOrDark(this.tabColor); //not working with StyleProp.Color
+                                    titleEle.style.color = textColor;
+                                    titleEle.style.backgroundColor = "transparent";
+                                    iconWrap.style.color = textColor;
+                                    closeWrap.style.color = textColor;
+                                    moreInfoDrag.style.backgroundColor = textColor;
+                                    tab.element[0].style.background = !layer ? color : "dimgrey";
+                              }, { fireImmediately: true });
+                  }
+                  // shifts the focus to this tab when another tab is dragged over it
+                  tab.element[0].onmouseenter = (e: MouseEvent) => {
+                        if (SnappingManager.GetIsDragging() && tab.contentItem !== tab.header.parent.getActiveContentItem()) {
+                              tab.header.parent.setActiveContentItem(tab.contentItem);
+                              tab.setActive(true);
+                        }
+                  };
 
-            // select the tab document when the tab is directly clicked and activate the tab whenver the tab document is selected
-            titleEle.onpointerdown = action((e: any) => {
-                if (e.target.className !== "lm_iconWrap") {
-                    if (this.view) SelectionManager.SelectView(this.view, false);
-                    else this._activated = true;
-                    if (Date.now() - titleEle.lastClick < 1000) titleEle.select();
-                    titleEle.lastClick = Date.now();
-                    (document.activeElement !== titleEle) && titleEle.focus();
-                }
-            });
-            tab._disposers.selectionDisposer = reaction(() => SelectionManager.Views().some(v => v.topMost && v.props.Document === doc),
-                action((selected) => {
-                    if (selected) this._activated = true;
-                    const toggle = tab.element[0].children[1].children[0] as HTMLInputElement;
-                    selected && tab.contentItem !== tab.header.parent.getActiveContentItem() &&
-                        UndoManager.RunInBatch(() => tab.header.parent.setActiveContentItem(tab.contentItem), "tab switch");
-                    // toggle.style.fontWeight = selected ? "bold" : "";
-                    // toggle.style.textTransform = selected ? "uppercase" : "";
-                }));
 
-            //attach the selection doc buttons menu to the drag handle
-            const stack: HTMLDivElement = tab.contentItem.parent;
-            const header: HTMLDivElement = tab;
-            stack.onscroll = action((e: any) => {
-                console.log('scrolling...');
-            });
-            const moreInfoDrag = document.createElement("div");
-            moreInfoDrag.className = "lm_iconWrap";
-            tab._disposers.buttonDisposer = reaction(() => this.view, view =>
-                view && [ReactDOM.render(<span><CollectionDockingViewMenu views={() => [view]} Stack={stack} /></span>, moreInfoDrag), tab._disposers.buttonDisposer?.()],
-                { fireImmediately: true });
-            // tab.reactComponents = [moreInfoDrag];
-            // tab.element[0].children[3].before(moreInfoDrag);
+                  // select the tab document when the tab is directly clicked and activate the tab whenver the tab document is selected
+                  titleEle.onpointerdown = action((e: any) => {
+                        if (e.target.className !== "lm_iconWrap") {
+                              if (this.view) SelectionManager.SelectView(this.view, false);
+                              else this._activated = true;
+                              if (Date.now() - titleEle.lastClick < 1000) titleEle.select();
+                              titleEle.lastClick = Date.now();
+                              (document.activeElement !== titleEle) && titleEle.focus();
+                        }
+                  });
+                  tab._disposers.selectionDisposer = reaction(() => SelectionManager.Views().some(v => v.topMost && v.props.Document === doc),
+                        action((selected) => {
+                              if (selected) this._activated = true;
+                              const toggle = tab.element[0].children[1].children[0] as HTMLInputElement;
+                              selected && tab.contentItem !== tab.header.parent.getActiveContentItem() &&
+                                    UndoManager.RunInBatch(() => tab.header.parent.setActiveContentItem(tab.contentItem), "tab switch");
+                              // toggle.style.fontWeight = selected ? "bold" : "";
+                              // toggle.style.textTransform = selected ? "uppercase" : "";
+                        }));
 
-            // highlight the tab when the tab document is brushed in any part of the UI
-            tab._disposers.reactionDisposer = reaction(() => ({ title: doc.title, degree: Doc.IsBrushedDegree(doc) }), ({ title, degree }) => {
-                //titleEle.value = title;
-                // titleEle.style.padding = degree ? 0 : 2;
-                // titleEle.style.border = `${["gray", "gray", "gray"][degree]} ${["none", "dashed", "solid"][degree]} 2px`;
-            }, { fireImmediately: true });
+                  //attach the selection doc buttons menu to the drag handle
+                  const stack: HTMLDivElement = tab.contentItem.parent;
+                  const header: HTMLDivElement = tab;
+                  stack.onscroll = action((e: any) => {
+                        console.log('scrolling...');
+                  });
+                  const moreInfoDrag = document.createElement("div");
+                  moreInfoDrag.className = "lm_iconWrap";
+                  tab._disposers.buttonDisposer = reaction(() => this.view, view =>
+                        view && [ReactDOM.render(<span><CollectionDockingViewMenu views={() => [view]} Stack={stack} /></span>, moreInfoDrag), tab._disposers.buttonDisposer?.()],
+                        { fireImmediately: true });
+                  // tab.reactComponents = [moreInfoDrag];
+                  // tab.element[0].children[3].before(moreInfoDrag);
 
-            // clean up the tab when it is closed
-            tab.closeElement.off('click') //unbind the current click handler
-                .click(function () {
-                    Object.values(tab._disposers).forEach((disposer: any) => disposer?.());
-                    SelectionManager.DeselectAll();
-                    UndoManager.RunInBatch(() => tab.contentItem.remove(), "delete tab");
-                });
-        }
-    }
+                  // highlight the tab when the tab document is brushed in any part of the UI
+                  tab._disposers.reactionDisposer = reaction(() => ({ title: doc.title, degree: Doc.IsBrushedDegree(doc) }), ({ title, degree }) => {
+                        //titleEle.value = title;
+                        // titleEle.style.padding = degree ? 0 : 2;
+                        // titleEle.style.border = `${["gray", "gray", "gray"][degree]} ${["none", "dashed", "solid"][degree]} 2px`;
+                  }, { fireImmediately: true });
 
-    /**
-     * Adds a document to the presentation view
-     **/
-    @action
-    public static async PinDoc(doc: Doc, pinProps?: PinProps) {
-        if (pinProps?.unpin) console.log('TODO: Remove UNPIN from this location');
-        //add this new doc to props.Document
-        const curPres = CurrentUserUtils.ActivePresentation;
-        if (curPres) {
-            if (doc === curPres) { alert("Cannot pin presentation document to itself"); return; }
-            const batch = UndoManager.StartBatch("pinning doc");
-            const pinDoc = Doc.MakeAlias(doc);
-            pinDoc.presentationTargetDoc = doc;
-            pinDoc.title = doc.title + " - Slide";
-            pinDoc.data = new List<Doc>();  // the children of the alias' layout are the presentation slide children.  the alias' data field might be children of a collection, PDF data, etc -- in any case we don't want the tree view to "see" this data
-            pinDoc.presMovement = PresMovement.Zoom;
-            pinDoc.groupWithUp = false;
-            pinDoc.context = curPres;
-            // these should potentially all be props passed down by the CollectionTreeView to the TreeView elements.  That way the PresBox could configure all of its children at render time
-            pinDoc.treeViewRenderAsBulletHeader = true; // forces a tree view to render the document next to the bullet in the header area
-            pinDoc.treeViewHeaderWidth = "100%"; // forces the header to grow to be the same size as its largest sibling.
-            pinDoc.treeViewChildrenOnRoot = true; // tree view will look for hierarchical children on the root doc, not the data doc.
-            pinDoc.treeViewFieldKey = "data"; // tree view will treat the 'data' field as the field where the hierarchical children are located instead of using the document's layout string field
-            pinDoc.treeViewExpandedView = "data";// in case the data doc has an expandedView set, this will mask that field and use the 'data' field when expanding the tree view
-            pinDoc.treeViewGrowsHorizontally = true;// the document expands horizontally when displayed as a tree view header  
-            pinDoc.treeViewHideHeaderIfTemplate = true;  // this will force the document to render itself as the tree view header
-            const presArray: Doc[] = PresBox.Instance?.sortArray();
-            const size: number = PresBox.Instance?._selectedArray.size;
-            const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined;
-            const duration = NumCast(doc[`${Doc.LayoutFieldKey(pinDoc)}-duration`], null);
-            Doc.AddDocToList(curPres, "data", pinDoc, presSelected);
-            if (!pinProps?.audioRange && duration !== undefined) {
-                pinDoc.mediaStart = "manual";
-                pinDoc.mediaStop = "manual";
-                pinDoc.presStartTime = NumCast(doc.clipStart);
-                pinDoc.presEndTime = NumCast(doc.clipEnd, duration);
+                  // clean up the tab when it is closed
+                  tab.closeElement.off('click') //unbind the current click handler
+                        .click(function () {
+                              Object.values(tab._disposers).forEach((disposer: any) => disposer?.());
+                              SelectionManager.DeselectAll();
+                              UndoManager.RunInBatch(() => tab.contentItem.remove(), "delete tab");
+                        });
             }
-            //save position
-            if (pinProps?.setPosition || pinDoc.isInkMask) {
-                pinDoc.setPosition = true;
-                pinDoc.y = doc.y;
-                pinDoc.x = doc.x;
-                pinDoc.presHideAfter = true;
-                pinDoc.presHideBefore = true;
-                pinDoc.title = doc.title + " (move)";
-                pinDoc.presMovement = PresMovement.None;
-            }
-            if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
-            const dview = CollectionDockingView.Instance.props.Document;
-            const fieldKey = CollectionDockingView.Instance.props.fieldKey;
-            const sublists = DocListCast(dview[fieldKey]);
-            const tabs = Cast(sublists[0], Doc, null);
-            const tabdocs = await DocListCastAsync(tabs?.data);
-            runInAction(() => {
-                if (!pinProps?.hidePresBox && !tabdocs?.includes(curPres)) {
-                    tabdocs?.push(curPres);  // bcz: Argh! this is annoying.  if multiple documents are pinned, this will get called multiple times before the presentation view is drawn.  Thus it won't be in the tabdocs list and it will get created multple times.  so need to explicilty add the presbox to the list of open tabs
-                    CollectionDockingView.AddSplit(curPres, "right");
-                }
-                PresBox.Instance?._selectedArray.clear();
-                pinDoc && PresBox.Instance?._selectedArray.set(pinDoc, undefined); //Update selected array
-                DocumentManager.Instance.jumpToDocument(doc, false, undefined, []);
-                batch.end();
-            });
-        }
-    }
+      }
 
-    componentDidMount() {
-        new _global.ResizeObserver(action((entries: any) => {
-            for (const entry of entries) {
-                this._panelWidth = entry.contentRect.width;
-                this._panelHeight = entry.contentRect.height;
+      /**
+       * Adds a document to the presentation view
+       **/
+      @action
+      public static async PinDoc(doc: Doc, pinProps?: PinProps) {
+            if (pinProps?.unpin) console.log('TODO: Remove UNPIN from this location');
+            //add this new doc to props.Document
+            const curPres = CurrentUserUtils.ActivePresentation;
+            if (curPres) {
+                  if (doc === curPres) { alert("Cannot pin presentation document to itself"); return; }
+                  const batch = UndoManager.StartBatch("pinning doc");
+                  const pinDoc = Doc.MakeAlias(doc);
+                  pinDoc.presentationTargetDoc = doc;
+                  pinDoc.title = doc.title;
+                  pinDoc.data = new List<Doc>();  // the children of the alias' layout are the presentation slide children.  the alias' data field might be children of a collection, PDF data, etc -- in any case we don't want the tree view to "see" this data
+                  pinDoc.presMovement = PresMovement.Zoom;
+                  pinDoc.groupWithUp = false;
+                  pinDoc.context = curPres;
+                  // these should potentially all be props passed down by the CollectionTreeView to the TreeView elements.  That way the PresBox could configure all of its children at render time
+                  pinDoc.treeViewRenderAsBulletHeader = true; // forces a tree view to render the document next to the bullet in the header area
+                  pinDoc.treeViewHeaderWidth = "100%"; // forces the header to grow to be the same size as its largest sibling.
+                  pinDoc.treeViewChildrenOnRoot = true; // tree view will look for hierarchical children on the root doc, not the data doc.
+                  pinDoc.treeViewFieldKey = "data"; // tree view will treat the 'data' field as the field where the hierarchical children are located instead of using the document's layout string field
+                  pinDoc.treeViewExpandedView = "data";// in case the data doc has an expandedView set, this will mask that field and use the 'data' field when expanding the tree view
+                  pinDoc.treeViewGrowsHorizontally = true;// the document expands horizontally when displayed as a tree view header  
+                  pinDoc.treeViewHideHeaderIfTemplate = true;  // this will force the document to render itself as the tree view header
+                  const presArray: Doc[] = PresBox.Instance?.sortArray();
+                  const size: number = PresBox.Instance?._selectedArray.size;
+                  const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined;
+                  const duration = NumCast(doc[`${Doc.LayoutFieldKey(pinDoc)}-duration`], null);
+                  Doc.AddDocToList(curPres, "data", pinDoc, presSelected);
+                  if (!pinProps?.audioRange && duration !== undefined) {
+                        pinDoc.mediaStart = "manual";
+                        pinDoc.mediaStop = "manual";
+                        pinDoc.presStartTime = NumCast(doc.clipStart);
+                        pinDoc.presEndTime = NumCast(doc.clipEnd, duration);
+                  }
+                  //save position
+                  if (pinProps?.setPosition || pinDoc.isInkMask) {
+                        pinDoc.setPosition = true;
+                        pinDoc.y = doc.y;
+                        pinDoc.x = doc.x;
+                        pinDoc.presHideAfter = true;
+                        pinDoc.presHideBefore = true;
+                        pinDoc.title = doc.title + " (move)";
+                        pinDoc.presMovement = PresMovement.None;
+                  }
+                  if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
+                  const dview = CollectionDockingView.Instance.props.Document;
+                  const fieldKey = CollectionDockingView.Instance.props.fieldKey;
+                  const sublists = DocListCast(dview[fieldKey]);
+                  const tabs = Cast(sublists[0], Doc, null);
+                  const tabdocs = await DocListCastAsync(tabs?.data);
+                  runInAction(() => {
+                        if (!pinProps?.hidePresBox && !tabdocs?.includes(curPres)) {
+                              tabdocs?.push(curPres);  // bcz: Argh! this is annoying.  if multiple documents are pinned, this will get called multiple times before the presentation view is drawn.  Thus it won't be in the tabdocs list and it will get created multple times.  so need to explicilty add the presbox to the list of open tabs
+                              CollectionDockingView.AddSplit(curPres, "right");
+                        }
+                        PresBox.Instance?._selectedArray.clear();
+                        pinDoc && PresBox.Instance?._selectedArray.set(pinDoc, undefined); //Update selected array
+                        DocumentManager.Instance.jumpToDocument(doc, false, undefined, []);
+                        batch.end();
+                  });
             }
-        })).observe(this.props.glContainer._element[0]);
-        this.props.glContainer.layoutManager.on("activeContentItemChanged", this.onActiveContentItemChanged);
-        this.props.glContainer.tab?.isActive && this.onActiveContentItemChanged(undefined);
-        // this._tabReaction = reaction(() => ({ selected: this.active(), title: this.tab?.titleElement[0] }),
-        //     ({ selected, title }) => title && (title.style.backgroundColor = selected ? "white" : ""),
-        //     { fireImmediately: true });
-    }
+      }
 
-    componentWillUnmount() {
-        this._tabReaction?.();
-        this.tab && CollectionDockingView.Instance.tabMap.delete(this.tab);
+      componentDidMount() {
+            new _global.ResizeObserver(action((entries: any) => {
+                  for (const entry of entries) {
+                        this._panelWidth = entry.contentRect.width;
+                        this._panelHeight = entry.contentRect.height;
+                  }
+            })).observe(this.props.glContainer._element[0]);
+            this.props.glContainer.layoutManager.on("activeContentItemChanged", this.onActiveContentItemChanged);
+            this.props.glContainer.tab?.isActive && this.onActiveContentItemChanged(undefined);
+            // this._tabReaction = reaction(() => ({ selected: this.active(), title: this.tab?.titleElement[0] }),
+            //     ({ selected, title }) => title && (title.style.backgroundColor = selected ? "white" : ""),
+            //     { fireImmediately: true });
+      }
 
-        this.props.glContainer.layoutManager.off("activeContentItemChanged", this.onActiveContentItemChanged);
-    }
+      componentWillUnmount() {
+            this._tabReaction?.();
+            this.tab && CollectionDockingView.Instance.tabMap.delete(this.tab);
 
-    @action.bound
-    private onActiveContentItemChanged(contentItem: any) {
-        if (!contentItem || (this.stack === contentItem.parent && ((contentItem?.tab === this.tab && !this._isActive) || (contentItem?.tab !== this.tab && this._isActive)))) {
-            this._activated = this._isActive = !contentItem || contentItem?.tab === this.tab;
-            !this._isActive && this._document && Doc.UnBrushDoc(this._document); // bcz: bad -- trying to simulate a pointer leave event when a new tab is opened up on top of an existing one.
-        }
-    }
+            this.props.glContainer.layoutManager.off("activeContentItemChanged", this.onActiveContentItemChanged);
+      }
+
+      @action.bound
+      private onActiveContentItemChanged(contentItem: any) {
+            if (!contentItem || (this.stack === contentItem.parent && ((contentItem?.tab === this.tab && !this._isActive) || (contentItem?.tab !== this.tab && this._isActive)))) {
+                  this._activated = this._isActive = !contentItem || contentItem?.tab === this.tab;
+                  !this._isActive && this._document && Doc.UnBrushDoc(this._document); // bcz: bad -- trying to simulate a pointer leave event when a new tab is opened up on top of an existing one.
+            }
+      }
 
-    // adds a tab to the layout based on the locaiton parameter which can be:
-    //  close[:{left,right,top,bottom}]  - e.g., "close" will close the tab, "close:left" will close the left tab,
-    //  add[:{left,right,top,bottom}] - e.g., "add" will add a tab to the current stack, "add:right" will add a tab on the right
-    //  replace[:{left,right,top,bottom,<any string>}] - e.g., "replace" will replace the current stack contents,
-    //                                  "replace:right" - will replace the stack on the right named "right" if it exists, or create a stack on the right with that name,
-    //                                   "replace:monkeys" - will replace any tab that has the label 'monkeys', or a tab with that label will be created by default on the right
-    //  inPlace - will add the document to any collection along the path from the document to the docking view that has a field isInPlaceContainer. if none is found, inPlace adds a tab to current stack
-    addDocTab = (doc: Doc, location: string) => {
-        SelectionManager.DeselectAll();
-        const locationFields = doc._viewType === CollectionViewType.Docking ? ["dashboard"] : location.split(":");
-        const locationParams = locationFields.length > 1 ? locationFields[1] : "";
-        switch (locationFields[0]) {
-            case "dashboard": return CurrentUserUtils.openDashboard(Doc.UserDoc(), doc);
-            case "close": return CollectionDockingView.CloseSplit(doc, locationParams);
-            case "fullScreen": return CollectionDockingView.OpenFullScreen(doc);
-            case "replace": return CollectionDockingView.ReplaceTab(doc, locationParams, this.stack);
-            case "lightbox": return LightboxView.AddDocTab(doc, location);
-            case "toggle": return CollectionDockingView.ToggleSplit(doc, locationParams, this.stack);
-            case "inPlace":
-            case "add":
-            default:
-                return CollectionDockingView.AddSplit(doc, locationParams, this.stack);
-        }
-    }
-    remDocTab = (doc: Doc | Doc[]) => {
-        if (doc === this._document) {
+      // adds a tab to the layout based on the locaiton parameter which can be:
+      //  close[:{left,right,top,bottom}]  - e.g., "close" will close the tab, "close:left" will close the left tab,
+      //  add[:{left,right,top,bottom}] - e.g., "add" will add a tab to the current stack, "add:right" will add a tab on the right
+      //  replace[:{left,right,top,bottom,<any string>}] - e.g., "replace" will replace the current stack contents,
+      //                                  "replace:right" - will replace the stack on the right named "right" if it exists, or create a stack on the right with that name,
+      //                                   "replace:monkeys" - will replace any tab that has the label 'monkeys', or a tab with that label will be created by default on the right
+      //  inPlace - will add the document to any collection along the path from the document to the docking view that has a field isInPlaceContainer. if none is found, inPlace adds a tab to current stack
+      addDocTab = (doc: Doc, location: string) => {
             SelectionManager.DeselectAll();
-            CollectionDockingView.CloseSplit(this._document);
-            return true;
-        }
-        return false;
-    }
+            const locationFields = doc._viewType === CollectionViewType.Docking ? ["dashboard"] : location.split(":");
+            const locationParams = locationFields.length > 1 ? locationFields[1] : "";
+            switch (locationFields[0]) {
+                  case "dashboard": return CurrentUserUtils.openDashboard(Doc.UserDoc(), doc);
+                  case "close": return CollectionDockingView.CloseSplit(doc, locationParams);
+                  case "fullScreen": return CollectionDockingView.OpenFullScreen(doc);
+                  case "replace": return CollectionDockingView.ReplaceTab(doc, locationParams, this.stack);
+                  case "lightbox": return LightboxView.AddDocTab(doc, location);
+                  case "toggle": return CollectionDockingView.ToggleSplit(doc, locationParams, this.stack);
+                  case "inPlace":
+                  case "add":
+                  default:
+                        return CollectionDockingView.AddSplit(doc, locationParams, this.stack);
+            }
+      }
+      remDocTab = (doc: Doc | Doc[]) => {
+            if (doc === this._document) {
+                  SelectionManager.DeselectAll();
+                  CollectionDockingView.CloseSplit(this._document);
+                  return true;
+            }
+            return false;
+      }
 
-    getCurrentFrame = () => {
-        return NumCast(Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex].presentationTargetDoc, Doc, null)._currentFrame);
-    }
-    @action
-    focusFunc = (doc: Doc, options?: DocFocusOptions) => {
-        const shrinkwrap = options?.originalTarget === this._document && this.view?.ComponentView?.shrinkWrap;
-        if (shrinkwrap && this._document) {
-            const focusSpeed = 1000;
-            shrinkwrap();
-            this._document._viewTransition = `transform ${focusSpeed}ms`;
-            setTimeout(action(() => {
-                this._document!._viewTransition = undefined;
-                options?.afterFocus?.(false);
-            }), focusSpeed);
-        } else {
-            options?.afterFocus?.(false);
-        }
-        if (!this.tab.header.parent._activeContentItem || this.tab.header.parent._activeContentItem !== this.tab.contentItem) {
-            this.tab.header.parent.setActiveContentItem(this.tab.contentItem); // glr: Panning does not work when this is set - (this line is for trying to make a tab that is not topmost become topmost)
-        }
-    }
-    active = () => this._isActive;
-    @observable _forceInvalidateScreenToLocal = 0;
-    ScreenToLocalTransform = () => {
-        this._forceInvalidateScreenToLocal;
-        const { translateX, translateY } = Utils.GetScreenTransform(this._mainCont?.children?.[0] as HTMLElement);
-        return CollectionDockingView.Instance?.props.ScreenToLocalTransform().translate(-translateX, -translateY);
-    }
-    PanelWidth = () => this._panelWidth;
-    PanelHeight = () => this._panelHeight;
-    miniMapColor = () => this.tabColor;
-    tabView = () => this._view;
-    disableMinimap = () => !this._document || (this._document.layout !== CollectionView.LayoutString(Doc.LayoutFieldKey(this._document)) || this._document?._viewType !== CollectionViewType.Freeform);
-    hideMinimap = () => this.disableMinimap() || BoolCast(this._document?.hideMinimap);
+      getCurrentFrame = () => {
+            return NumCast(Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex].presentationTargetDoc, Doc, null)._currentFrame);
+      }
+      @action
+      focusFunc = (doc: Doc, options?: DocFocusOptions) => {
+            const shrinkwrap = options?.originalTarget === this._document && this.view?.ComponentView?.shrinkWrap;
+            if (shrinkwrap && this._document) {
+                  const focusSpeed = 1000;
+                  shrinkwrap();
+                  this._document._viewTransition = `transform ${focusSpeed}ms`;
+                  setTimeout(action(() => {
+                        this._document!._viewTransition = undefined;
+                        options?.afterFocus?.(false);
+                  }), focusSpeed);
+            } else {
+                  options?.afterFocus?.(false);
+            }
+            if (!this.tab.header.parent._activeContentItem || this.tab.header.parent._activeContentItem !== this.tab.contentItem) {
+                  this.tab.header.parent.setActiveContentItem(this.tab.contentItem); // glr: Panning does not work when this is set - (this line is for trying to make a tab that is not topmost become topmost)
+            }
+      }
+      active = () => this._isActive;
+      @observable _forceInvalidateScreenToLocal = 0;
+      ScreenToLocalTransform = () => {
+            this._forceInvalidateScreenToLocal;
+            const { translateX, translateY } = Utils.GetScreenTransform(this._mainCont?.children?.[0] as HTMLElement);
+            return CollectionDockingView.Instance?.props.ScreenToLocalTransform().translate(-translateX, -translateY);
+      }
+      PanelWidth = () => this._panelWidth;
+      PanelHeight = () => this._panelHeight;
+      miniMapColor = () => this.tabColor;
+      tabView = () => this._view;
+      disableMinimap = () => !this._document || (this._document.layout !== CollectionView.LayoutString(Doc.LayoutFieldKey(this._document)) || this._document?._viewType !== CollectionViewType.Freeform);
+      hideMinimap = () => this.disableMinimap() || BoolCast(this._document?.hideMinimap);
 
-    @computed get docView() {
-        return !this._activated || !this._document || this._document._viewType === CollectionViewType.Docking ? (null) :
-            <><DocumentView key={this._document[Id]} ref={action((r: DocumentView) => this._view = r)}
-                renderDepth={0}
-                Document={this._document}
-                DataDoc={!Doc.AreProtosEqual(this._document[DataSym], this._document) ? this._document[DataSym] : undefined}
-                ContainingCollectionView={undefined}
-                ContainingCollectionDoc={undefined}
-                onBrowseClick={MainView.Instance.exploreMode}
-                isContentActive={returnTrue}
-                PanelWidth={this.PanelWidth}
-                PanelHeight={this.PanelHeight}
-                styleProvider={DefaultStyleProvider}
-                docFilters={CollectionDockingView.Instance.childDocFilters}
-                docRangeFilters={CollectionDockingView.Instance.childDocRangeFilters}
-                searchFilterDocs={CollectionDockingView.Instance.searchFilterDocs}
-                addDocument={undefined}
-                removeDocument={this.remDocTab}
-                addDocTab={this.addDocTab}
-                ScreenToLocalTransform={this.ScreenToLocalTransform}
-                dontCenter={"y"}
-                rootSelected={returnTrue}
-                whenChildContentsActiveChanged={emptyFunction}
-                focus={this.focusFunc}
-                docViewPath={returnEmptyDoclist}
-                bringToFront={emptyFunction}
-                pinToPres={TabDocView.PinDoc} />
-                <TabMinimapView key="minimap"
-                    hideMinimap={this.hideMinimap}
-                    addDocTab={this.addDocTab}
-                    PanelHeight={this.PanelHeight}
-                    PanelWidth={this.PanelWidth}
-                    background={this.miniMapColor}
-                    document={this._document}
-                    tabView={this.tabView} />
-                <Tooltip key="ttip" title={<div className="dash-tooltip">{this._document.hideMinimap ? "Open minimap" : "Close minimap"}</div>}>
-                    <div className="miniMap-hidden"
-                        style={{
-                            display: this.disableMinimap() || this._document._viewType !== "freeform" ? "none" : undefined,
-                            color: this._document.hideMinimap ? Colors.BLACK : Colors.WHITE,
-                            backgroundColor: this._document.hideMinimap ? Colors.LIGHT_GRAY : Colors.MEDIUM_BLUE,
-                            boxShadow: this._document.hideMinimap ? Shadows.STANDARD_SHADOW : undefined
-                        }}
-                        onPointerDown={e => e.stopPropagation()}
-                        onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} >
-                        <FontAwesomeIcon icon={"globe-asia"} size="lg" />
-                    </div>
-                </Tooltip>
-            </>;
-    }
+      @computed get docView() {
+            return !this._activated || !this._document || this._document._viewType === CollectionViewType.Docking ? (null) :
+                  <><DocumentView key={this._document[Id]} ref={action((r: DocumentView) => this._view = r)}
+                        renderDepth={0}
+                        Document={this._document}
+                        DataDoc={!Doc.AreProtosEqual(this._document[DataSym], this._document) ? this._document[DataSym] : undefined}
+                        ContainingCollectionView={undefined}
+                        ContainingCollectionDoc={undefined}
+                        onBrowseClick={MainView.Instance.exploreMode}
+                        isContentActive={returnTrue}
+                        PanelWidth={this.PanelWidth}
+                        PanelHeight={this.PanelHeight}
+                        styleProvider={DefaultStyleProvider}
+                        docFilters={CollectionDockingView.Instance.childDocFilters}
+                        docRangeFilters={CollectionDockingView.Instance.childDocRangeFilters}
+                        searchFilterDocs={CollectionDockingView.Instance.searchFilterDocs}
+                        addDocument={undefined}
+                        removeDocument={this.remDocTab}
+                        addDocTab={this.addDocTab}
+                        ScreenToLocalTransform={this.ScreenToLocalTransform}
+                        dontCenter={"y"}
+                        rootSelected={returnTrue}
+                        whenChildContentsActiveChanged={emptyFunction}
+                        focus={this.focusFunc}
+                        docViewPath={returnEmptyDoclist}
+                        bringToFront={emptyFunction}
+                        pinToPres={TabDocView.PinDoc} />
+                        <TabMinimapView key="minimap"
+                              hideMinimap={this.hideMinimap}
+                              addDocTab={this.addDocTab}
+                              PanelHeight={this.PanelHeight}
+                              PanelWidth={this.PanelWidth}
+                              background={this.miniMapColor}
+                              document={this._document}
+                              tabView={this.tabView} />
+                        <Tooltip key="ttip" title={<div className="dash-tooltip">{this._document.hideMinimap ? "Open minimap" : "Close minimap"}</div>}>
+                              <div className="miniMap-hidden"
+                                    style={{
+                                          display: this.disableMinimap() || this._document._viewType !== "freeform" ? "none" : undefined,
+                                          color: this._document.hideMinimap ? Colors.BLACK : Colors.WHITE,
+                                          backgroundColor: this._document.hideMinimap ? Colors.LIGHT_GRAY : Colors.MEDIUM_BLUE,
+                                          boxShadow: this._document.hideMinimap ? Shadows.STANDARD_SHADOW : undefined
+                                    }}
+                                    onPointerDown={e => e.stopPropagation()}
+                                    onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} >
+                                    <FontAwesomeIcon icon={"globe-asia"} size="lg" />
+                              </div>
+                        </Tooltip>
+                  </>;
+      }
 
-    render() {
-        return (
-            <div className="collectionDockingView-content" style={{
-                fontFamily: Doc.UserDoc().renderStyle === "comic" ? "Comic Sans MS" : undefined,
-                height: "100%", width: "100%"
-            }} ref={ref => {
-                if (this._mainCont = ref) {
-                    (this._mainCont as any).InitTab = (tab: any) => this.init(tab, this._document);
-                    DocServer.GetRefField(this.props.documentId).then(action(doc => doc instanceof Doc && (this._document = doc) && this.tab && this.init(this.tab, this._document)));
-                    new _global.ResizeObserver(action((entries: any) => this._forceInvalidateScreenToLocal++)).observe(ref);
-                }
-            }} >
-                {this.docView}
-            </div >
-        );
-    }
+      render() {
+            return (
+                  <div className="collectionDockingView-content" style={{
+                        fontFamily: Doc.UserDoc().renderStyle === "comic" ? "Comic Sans MS" : undefined,
+                        height: "100%", width: "100%"
+                  }} ref={ref => {
+                        if (this._mainCont = ref) {
+                              (this._mainCont as any).InitTab = (tab: any) => this.init(tab, this._document);
+                              DocServer.GetRefField(this.props.documentId).then(action(doc => doc instanceof Doc && (this._document = doc) && this.tab && this.init(this.tab, this._document)));
+                              new _global.ResizeObserver(action((entries: any) => this._forceInvalidateScreenToLocal++)).observe(ref);
+                        }
+                  }} >
+                        {this.docView}
+                  </div >
+            );
+      }
 }
 
 interface TabMinimapViewProps {
-    document: Doc;
-    hideMinimap: () => boolean;
-    tabView: () => DocumentView | undefined;
-    addDocTab: (doc: Doc, where: string) => boolean;
-    PanelWidth: () => number;
-    PanelHeight: () => number;
-    background: () => string;
+      document: Doc;
+      hideMinimap: () => boolean;
+      tabView: () => DocumentView | undefined;
+      addDocTab: (doc: Doc, where: string) => boolean;
+      PanelWidth: () => number;
+      PanelHeight: () => number;
+      background: () => string;
 }
 @observer
 export class TabMinimapView extends React.Component<TabMinimapViewProps> {
-    static miniStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any => {
-        if (doc) {
-            switch (property.split(":")[0]) {
-                default: return DefaultStyleProvider(doc, props, property);
-                case StyleProp.PointerEvents: return "none";
-                case StyleProp.DocContents:
-                    const background = ((type: DocumentType) => {
-                        switch (type) {
-                            case DocumentType.PDF: return "pink";
-                            case DocumentType.AUDIO: return "lightgreen";
-                            case DocumentType.WEB: return "brown";
-                            case DocumentType.IMG: return "blue";
-                            case DocumentType.MAP: return "orange";
-                            case DocumentType.VID: return "purple";
-                            case DocumentType.RTF: return "yellow";
-                            case DocumentType.COL: return undefined;
-                            default: return "gray";
-                        }
-                    })(doc.type as DocumentType);
-                    return !background ?
-                        undefined :
-                        <div style={{ width: doc[WidthSym](), height: doc[HeightSym](), position: "absolute", display: "block", background }} />;
+      static miniStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any => {
+            if (doc) {
+                  switch (property.split(":")[0]) {
+                        default: return DefaultStyleProvider(doc, props, property);
+                        case StyleProp.PointerEvents: return "none";
+                        case StyleProp.DocContents:
+                              const background = ((type: DocumentType) => {
+                                    switch (type) {
+                                          case DocumentType.PDF: return "pink";
+                                          case DocumentType.AUDIO: return "lightgreen";
+                                          case DocumentType.WEB: return "brown";
+                                          case DocumentType.IMG: return "blue";
+                                          case DocumentType.MAP: return "orange";
+                                          case DocumentType.VID: return "purple";
+                                          case DocumentType.RTF: return "yellow";
+                                          case DocumentType.COL: return undefined;
+                                          default: return "gray";
+                                    }
+                              })(doc.type as DocumentType);
+                              return !background ?
+                                    undefined :
+                                    <div style={{ width: doc[WidthSym](), height: doc[HeightSym](), position: "absolute", display: "block", background }} />;
+                  }
             }
-        }
-    }
-    @computed get renderBounds() {
-        const compView = this.props.tabView()?.ComponentView as CollectionFreeFormView;
-        const bounds = compView?.freeformData?.(true)?.bounds;
-        if (!bounds) return undefined;
-        const xbounds = bounds.r - bounds.x;
-        const ybounds = bounds.b - bounds.y;
-        const dim = Math.max(xbounds, ybounds);
-        return { l: bounds.x + xbounds / 2 - dim / 2, t: bounds.y + ybounds / 2 - dim / 2, cx: bounds.x + xbounds / 2, cy: bounds.y + ybounds / 2, dim };
-    }
-    childLayoutTemplate = () => Cast(this.props.document.childLayoutTemplate, Doc, null);
-    returnMiniSize = () => NumCast(this.props.document._miniMapSize, 150);
-    miniDown = (e: React.PointerEvent) => {
-        const doc = this.props.document;
-        const renderBounds = this.renderBounds ?? { l: 0, r: 0, t: 0, b: 0, dim: 1 };
-        const miniSize = this.returnMiniSize();
-        doc && setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
-            doc._panX = clamp(NumCast(doc._panX) + delta[0] / miniSize * renderBounds.dim, renderBounds.l, renderBounds.l + renderBounds.dim);
-            doc._panY = clamp(NumCast(doc._panY) + delta[1] / miniSize * renderBounds.dim, renderBounds.t, renderBounds.t + renderBounds.dim);
-            return false;
-        }), emptyFunction, emptyFunction);
-    }
-    render() {
-        if (!this.renderBounds) return (null);
-        const miniWidth = this.props.PanelWidth() / NumCast(this.props.document._viewScale, 1) / this.renderBounds.dim * 100;
-        const miniHeight = this.props.PanelHeight() / NumCast(this.props.document._viewScale, 1) / this.renderBounds.dim * 100;
-        const miniLeft = 50 + (NumCast(this.props.document._panX) - this.renderBounds.cx) / this.renderBounds.dim * 100 - miniWidth / 2;
-        const miniTop = 50 + (NumCast(this.props.document._panY) - this.renderBounds.cy) / this.renderBounds.dim * 100 - miniHeight / 2;
-        const miniSize = this.returnMiniSize();
-        return this.props.hideMinimap() ? (null) :
-            <div className="miniMap" style={{ width: miniSize, height: miniSize, background: this.props.background() }}>
-                <CollectionFreeFormView
-                    Document={this.props.document}
-                    CollectionView={undefined}
-                    ContainingCollectionView={undefined}
-                    ContainingCollectionDoc={undefined}
-                    docViewPath={returnEmptyDoclist}
-                    childLayoutTemplate={this.childLayoutTemplate} // bcz: Ugh .. should probably be rendering a CollectionView or the minimap should be part of the collectionFreeFormView to avoid having to set stuff like this.
-                    noOverlay={true} // don't render overlay Docs since they won't scale
-                    setHeight={returnFalse}
-                    isContentActive={emptyFunction}
-                    isAnyChildContentActive={returnFalse}
-                    select={emptyFunction}
-                    dropAction={undefined}
-                    isSelected={returnFalse}
-                    dontRegisterView={true}
-                    fieldKey={Doc.LayoutFieldKey(this.props.document)}
-                    bringToFront={emptyFunction}
-                    rootSelected={returnTrue}
-                    addDocument={returnFalse}
-                    moveDocument={returnFalse}
-                    removeDocument={returnFalse}
-                    PanelWidth={this.returnMiniSize}
-                    PanelHeight={this.returnMiniSize}
-                    ScreenToLocalTransform={Transform.Identity}
-                    renderDepth={0}
-                    whenChildContentsActiveChanged={emptyFunction}
-                    focus={DocUtils.DefaultFocus}
-                    styleProvider={TabMinimapView.miniStyleProvider}
-                    addDocTab={this.props.addDocTab}
-                    pinToPres={TabDocView.PinDoc}
-                    docFilters={CollectionDockingView.Instance.childDocFilters}
-                    docRangeFilters={CollectionDockingView.Instance.childDocRangeFilters}
-                    searchFilterDocs={CollectionDockingView.Instance.searchFilterDocs}
-                    fitContentsToDoc={returnTrue}
-                />
-                <div className="miniOverlay" onPointerDown={this.miniDown} >
-                    <div className="miniThumb" style={{ width: `${miniWidth}% `, height: `${miniHeight}% `, left: `${miniLeft}% `, top: `${miniTop}% `, }} />
-                </div>
-            </div>;
-    }
+      }
+      @computed get renderBounds() {
+            const compView = this.props.tabView()?.ComponentView as CollectionFreeFormView;
+            const bounds = compView?.freeformData?.(true)?.bounds;
+            if (!bounds) return undefined;
+            const xbounds = bounds.r - bounds.x;
+            const ybounds = bounds.b - bounds.y;
+            const dim = Math.max(xbounds, ybounds);
+            return { l: bounds.x + xbounds / 2 - dim / 2, t: bounds.y + ybounds / 2 - dim / 2, cx: bounds.x + xbounds / 2, cy: bounds.y + ybounds / 2, dim };
+      }
+      childLayoutTemplate = () => Cast(this.props.document.childLayoutTemplate, Doc, null);
+      returnMiniSize = () => NumCast(this.props.document._miniMapSize, 150);
+      miniDown = (e: React.PointerEvent) => {
+            const doc = this.props.document;
+            const renderBounds = this.renderBounds ?? { l: 0, r: 0, t: 0, b: 0, dim: 1 };
+            const miniSize = this.returnMiniSize();
+            doc && setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
+                  doc._panX = clamp(NumCast(doc._panX) + delta[0] / miniSize * renderBounds.dim, renderBounds.l, renderBounds.l + renderBounds.dim);
+                  doc._panY = clamp(NumCast(doc._panY) + delta[1] / miniSize * renderBounds.dim, renderBounds.t, renderBounds.t + renderBounds.dim);
+                  return false;
+            }), emptyFunction, emptyFunction);
+      }
+      render() {
+            if (!this.renderBounds) return (null);
+            const miniWidth = this.props.PanelWidth() / NumCast(this.props.document._viewScale, 1) / this.renderBounds.dim * 100;
+            const miniHeight = this.props.PanelHeight() / NumCast(this.props.document._viewScale, 1) / this.renderBounds.dim * 100;
+            const miniLeft = 50 + (NumCast(this.props.document._panX) - this.renderBounds.cx) / this.renderBounds.dim * 100 - miniWidth / 2;
+            const miniTop = 50 + (NumCast(this.props.document._panY) - this.renderBounds.cy) / this.renderBounds.dim * 100 - miniHeight / 2;
+            const miniSize = this.returnMiniSize();
+            return this.props.hideMinimap() ? (null) :
+                  <div className="miniMap" style={{ width: miniSize, height: miniSize, background: this.props.background() }}>
+                        <CollectionFreeFormView
+                              Document={this.props.document}
+                              CollectionView={undefined}
+                              ContainingCollectionView={undefined}
+                              ContainingCollectionDoc={undefined}
+                              docViewPath={returnEmptyDoclist}
+                              childLayoutTemplate={this.childLayoutTemplate} // bcz: Ugh .. should probably be rendering a CollectionView or the minimap should be part of the collectionFreeFormView to avoid having to set stuff like this.
+                              noOverlay={true} // don't render overlay Docs since they won't scale
+                              setHeight={returnFalse}
+                              isContentActive={emptyFunction}
+                              isAnyChildContentActive={returnFalse}
+                              select={emptyFunction}
+                              dropAction={undefined}
+                              isSelected={returnFalse}
+                              dontRegisterView={true}
+                              fieldKey={Doc.LayoutFieldKey(this.props.document)}
+                              bringToFront={emptyFunction}
+                              rootSelected={returnTrue}
+                              addDocument={returnFalse}
+                              moveDocument={returnFalse}
+                              removeDocument={returnFalse}
+                              PanelWidth={this.returnMiniSize}
+                              PanelHeight={this.returnMiniSize}
+                              ScreenToLocalTransform={Transform.Identity}
+                              renderDepth={0}
+                              whenChildContentsActiveChanged={emptyFunction}
+                              focus={DocUtils.DefaultFocus}
+                              styleProvider={TabMinimapView.miniStyleProvider}
+                              addDocTab={this.props.addDocTab}
+                              pinToPres={TabDocView.PinDoc}
+                              docFilters={CollectionDockingView.Instance.childDocFilters}
+                              docRangeFilters={CollectionDockingView.Instance.childDocRangeFilters}
+                              searchFilterDocs={CollectionDockingView.Instance.searchFilterDocs}
+                              fitContentsToDoc={returnTrue}
+                        />
+                        <div className="miniOverlay" onPointerDown={this.miniDown} >
+                              <div className="miniThumb" style={{ width: `${miniWidth}% `, height: `${miniHeight}% `, left: `${miniLeft}% `, top: `${miniTop}% `, }} />
+                        </div>
+                  </div>;
+      }
 }
diff --git a/src/client/views/nodes/trails/PresElementBox.scss b/src/client/views/nodes/trails/PresElementBox.scss
index a178be910..1919071df 100644
--- a/src/client/views/nodes/trails/PresElementBox.scss
+++ b/src/client/views/nodes/trails/PresElementBox.scss
@@ -5,155 +5,157 @@ $slide-background: #d5dce2;
 $slide-active: #5B9FDD;
 
 .presItem-container {
-    cursor: grab;
-    display: grid;
-    grid-template-columns: 20px auto;
-    font-family: Roboto;
-    letter-spacing: normal;
-    position: relative;
-    pointer-events: all;
-    width: 100%;
-    height: 100%;
-    font-weight: 400;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    align-items: center;
-
-    .presItem-number {
-        margin-top: 3.5px;
-        font-size: 12px;
-        font-weight: 700;
-        text-align: center;
-        justify-self: center;
-        align-self: flex-start;
-        position: relative;
-        display: inline-block;
-        overflow: hidden;
-    }
+      cursor: grab;
+      display: flex;
+      grid-template-columns: 20px auto;
+      font-family: Roboto;
+      letter-spacing: normal;
+      position: relative;
+      pointer-events: all;
+      width: 100%;
+      height: 100%;
+      font-weight: 400;
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      align-items: center;
+
+      //     .presItem-number {
+      //         margin-top: 3.5px;
+      //         font-size: 12px;
+      //         font-weight: 700;
+      //         text-align: center;
+      //         justify-self: center;
+      //         align-self: flex-start;
+      //         position: relative;
+      //         display: inline-block;
+      //         overflow: hidden;
+      //     }
 
 }
 
 .presItem-slide {
-    position: relative;
-    background-color: #d5dce2;
-    border-radius: 5px;
-    height: calc(100% - 7px);
-    width: 100%;
-    display: grid;
-    grid-template-rows: 16px 10px auto;
-    grid-template-columns: max-content max-content max-content max-content auto;
-
-    .presItem-name {
-        min-width: 20px;
-        z-index: 300;
-        top: 2px;
-        align-self: center;
-        font-size: 11px;
-        font-family: Roboto;
-        font-weight: 500;
-        position: relative;
-        padding-left: 10px;
-        padding-right: 10px;
-        letter-spacing: normal;
-        width: max-content;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: pre;
-    }
-
-    .presItem-docName {
-        min-width: 20px;
-        z-index: 300;
-        align-self: center;
-        font-size: 9px;
-        font-family: Roboto;
-        font-weight: 300;
-        position: relative;
-        padding-left: 10px;
-        padding-right: 10px;
-        letter-spacing: normal;
-        width: max-content;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: pre;
-        grid-row: 2;
-        grid-column: 1/6;
-    }
-
-    .presItem-time {
-        align-self: center;
-        position: relative;
-        padding-right: 10px;
-        top: 1px;
-        font-size: 10;
-        font-weight: 300;
-        font-family: Roboto;
-        z-index: 300;
-        letter-spacing: normal;
-    }
-
-    .presItem-embedded {
-        overflow: hidden;
-        grid-row: 3;
-        grid-column: 1/8;
-        position: relative;
-        display: flex;
-        width: auto;
-        justify-content: center;
-        margin: auto;
-        margin-bottom: 2px;
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px;
-    }
-
-    .presItem-embeddedMask {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        border-radius: 3px;
-        top: 0;
-        left: 0;
-        z-index: 1;
-        overflow: hidden;
-    }
-
-
-    .presItem-slideButtons {
-        display: flex;
-        grid-column: 7;
-        grid-row: 1/3;
-        width: max-content;
-        justify-self: right;
-        justify-content: flex-end;
-
-        .slideButton {
-            cursor: pointer;
+      position: relative;
+      height: 100%;
+      width: 100%;
+      border-bottom: .5px solid grey;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      grid-template-rows: 16px 10px auto;
+      grid-template-columns: max-content max-content max-content max-content auto;
+
+      .presItem-name {
+            display: flex;
+            min-width: 20px;
+            z-index: 300;
+            top: 2px;
+            align-self: center;
+            font-size: 11px;
+            font-family: Roboto;
+            font-weight: 500;
             position: relative;
-            border-radius: 100px;
+            padding-left: 10px;
+            padding-right: 10px;
+            letter-spacing: normal;
+            width: max-content;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: pre;
+      }
+
+      .presItem-docName {
+            min-width: 20px;
             z-index: 300;
-            width: 18px;
-            height: 18px;
-            display: flex;
-            font-size: 12px;
-            justify-self: center;
             align-self: center;
-            background-color: rgba(0, 0, 0, 0.5);
-            color: white;
+            font-size: 9px;
+            font-family: Roboto;
+            font-weight: 300;
+            position: relative;
+            padding-left: 10px;
+            padding-right: 10px;
+            letter-spacing: normal;
+            width: max-content;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: pre;
+            grid-row: 2;
+            grid-column: 1/6;
+      }
+
+      .presItem-time {
+            align-self: center;
+            position: relative;
+            padding-right: 10px;
+            top: 1px;
+            font-size: 10;
+            font-weight: 300;
+            font-family: Roboto;
+            z-index: 300;
+            letter-spacing: normal;
+      }
+
+      .presItem-embedded {
+            overflow: hidden;
+            grid-row: 3;
+            grid-column: 1/8;
+            position: relative;
+            display: flex;
+            width: auto;
             justify-content: center;
-            align-items: center;
-            transition: 0.2s;
-            margin-right: 3px;
-        }
-
-        .slideButton:hover {
-            background-color: rgba(0, 0, 0, 1);
-            transform: scale(1.2);
-        }
-    }
+            margin: auto;
+            margin-bottom: 2px;
+            border-bottom-left-radius: 5px;
+            border-bottom-right-radius: 5px;
+      }
+
+      .presItem-embeddedMask {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            border-radius: 3px;
+            top: 0;
+            left: 0;
+            z-index: 1;
+            overflow: hidden;
+      }
+
+
+      .presItem-slideButtons {
+            display: flex;
+            grid-column: 7;
+            grid-row: 1/3;
+            width: max-content;
+            justify-self: right;
+            justify-content: flex-end;
+
+            .slideButton {
+                  cursor: pointer;
+                  position: relative;
+                  border-radius: 100px;
+                  z-index: 300;
+                  width: 18px;
+                  height: 18px;
+                  display: flex;
+                  font-size: 12px;
+                  justify-self: center;
+                  align-self: center;
+                  background-color: rgba(0, 0, 0, 0.5);
+                  color: white;
+                  justify-content: center;
+                  align-items: center;
+                  transition: 0.2s;
+                  margin-right: 3px;
+            }
+
+            .slideButton:hover {
+                  background-color: rgba(0, 0, 0, 1);
+                  transform: scale(1.2);
+            }
+      }
 }
 
 // .presItem-slide:hover {
@@ -192,42 +194,42 @@ $slide-active: #5B9FDD;
 // }
 
 .presItem-slide.active {
-    box-shadow: 0 0 0px 1.5px $dark-blue;
+      box-shadow: 0 0 0px 1.5px $dark-blue;
 }
 
 .presItem-multiDrag {
-    font-family: Roboto;
-    font-weight: 600;
-    color: white;
-    text-align: center;
-    justify-content: center;
-    align-content: center;
-    width: 100px;
-    height: 30px;
-    position: absolute;
-    background-color: $dark-blue;
-    z-index: 4000;
-    border-radius: 10px;
-    box-shadow: black 0.4vw 0.4vw 0.8vw;
-    line-height: 30px;
+      font-family: Roboto;
+      font-weight: 600;
+      color: white;
+      text-align: center;
+      justify-content: center;
+      align-content: center;
+      width: 100px;
+      height: 30px;
+      position: absolute;
+      background-color: $dark-blue;
+      z-index: 4000;
+      border-radius: 10px;
+      box-shadow: black 0.4vw 0.4vw 0.8vw;
+      line-height: 30px;
 }
 
 .presItem-miniSlide {
-    font-weight: 700;
-    font-size: 12;
-    grid-column: 1/8;
-    align-self: center;
-    justify-self: center;
-    background-color: #d5dce2;
-    width: 26px;
-    text-align: center;
-    height: 26px;
-    line-height: 28px;
-    border-radius: 100%;
+      font-weight: 700;
+      font-size: 12;
+      grid-column: 1/8;
+      align-self: center;
+      justify-self: center;
+      background-color: #d5dce2;
+      width: 26px;
+      text-align: center;
+      height: 26px;
+      line-height: 28px;
+      border-radius: 100%;
 }
 
 .presItem-miniSlide.active {
-    box-shadow: 0 0 0px 1.5px $dark-blue;
+      box-shadow: 0 0 0px 1.5px $dark-blue;
 }
 
 // .presItem-slide:hover {
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index f1144b32d..acdf9c43f 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -329,7 +329,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         hideDocumentButtonBar: true,
                         hideDecorationTitle: true,
                         hideOpenButton: true,
-                        hideDeleteButton: true,
+                        // hideDeleteButton: true,
                         cloneFieldFilter:
                               new List<string>(["system"])
                   });
@@ -387,7 +387,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         onPointerDown={this.headerDown}
                         onPointerUp={this.headerUp}
                   >
-                        {miniView ?
+                        {/* {miniView ?
                               // when width is LESS than 110 px 
                               <div className={`presItem-miniSlide ${isSelected ? "active" : ""}`} ref={miniView ? this._dragRef : null}>
                                     {`${this.indexInPres + 1}.`}
@@ -396,13 +396,17 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                               // when width is MORE than 110 px 
                               <div className="presItem-number">
                                     {`${this.indexInPres + 1}.`}
-                              </div>}
+                              </div>} */}
+                        {/* <div className="presItem-number">
+                              {`${this.indexInPres + 1}.`}
+                        </div> */}
                         {miniView ? (null) : <div ref={miniView ? null : this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}
                               style={{
                                     backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
                                     boxShadow: presBoxColor && presBoxColor !== "white" && presBoxColor !== "transparent" ? isSelected ? "0 0 0px 1.5px" + presBoxColor : undefined : undefined
                               }}>
                               <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 195) : toolbarWidth - 105, cursor: isSelected ? 'text' : 'grab' }}>
+                                    <div>{`${this.indexInPres + 1}.  `}</div>
                                     <EditableView
                                           ref={this._titleRef}
                                           editing={!isSelected ? false : undefined}
@@ -412,8 +416,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                           SetValue={this.onSetValue}
                                     />
                               </div>
-                              <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip>
-                              <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.duration}</div></Tooltip>
+                              {/* <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip> */}
+                              {/* <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.duration}</div></Tooltip> */}
                               <div className={"presItem-slideButtons"}>
                                     <Tooltip title={<><div className="dash-tooltip">{"Update view"}</div></>}>
                                           <div className="slideButton"
@@ -439,7 +443,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     }
 
 
-                                    {this.indexInPres === 0 ? (null) : <Tooltip title={<><div className="dash-tooltip">{activeItem.groupWithUp ? "Ungroup" : "Group with up"}</div></>}>
+                                    {/* {this.indexInPres === 0 ? (null) : <Tooltip title={<><div className="dash-tooltip">{activeItem.groupWithUp ? "Ungroup" : "Group with up"}</div></>}>
                                           <div className="slideButton"
                                                 onClick={() => activeItem.groupWithUp = !activeItem.groupWithUp}
                                                 style={{
@@ -453,7 +457,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                                       <FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} />
                                                 </div>
                                           </div>
-                                    </Tooltip>}
+                                    </Tooltip>} */}
                                     {/* <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"slideButton"} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
                                           <FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? "eye-slash" : "eye"} onPointerDown={e => e.stopPropagation()} />
                                     </div></Tooltip> */}
@@ -463,7 +467,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                           <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} />
                                     </div></Tooltip>
                               </div>
-                              <div className="presItem-docName" style={{ maxWidth: showMore ? (toolbarWidth - 195) : toolbarWidth - 105 }}>{activeItem.presPinView ? (<><i>View of </i> {targetDoc.title}</>) : targetDoc.title}</div>
+                              {/* <div className="presItem-docName" style={{ maxWidth: showMore ? (toolbarWidth - 195) : toolbarWidth - 105 }}>{activeItem.presPinView ? (<><i>View of </i> {targetDoc.title}</>) : targetDoc.title}</div> */}
                               {this.renderEmbeddedInline}
                         </div>}
                   </div >);
-- 
cgit v1.2.3-70-g09d2


From 88a8f35c33bbff61b0058a66d7bcc586d483deca Mon Sep 17 00:00:00 2001
From: Jenny Yu <jennyyu212@outlook.com>
Date: Wed, 8 Jun 2022 01:03:44 -0700
Subject: fix: hide recording by stopping propagation

---
 src/client/views/nodes/trails/PresElementBox.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/client/views/nodes/trails/PresElementBox.tsx')

diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index acdf9c43f..9bace1c8d 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -284,7 +284,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
       @undoBatch
       @action
-      hideRecording = () => {
+      hideRecording = (e: React.PointerEvent) => {
+            e.stopPropagation()
             DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => {
                   if (doc.slides === this.rootDoc) {
                         Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, doc);
-- 
cgit v1.2.3-70-g09d2


From e08c690dbeca3e58b1bc0d387df0287f60f58b7a Mon Sep 17 00:00:00 2001
From: Jenny Yu <jennyyu212@outlook.com>
Date: Wed, 8 Jun 2022 21:20:01 -0700
Subject: fix: remove recording from overlay when deleting slide

---
 src/client/views/nodes/trails/PresBox.tsx        |  3 ---
 src/client/views/nodes/trails/PresElementBox.tsx | 24 ++++++++++++------------
 2 files changed, 12 insertions(+), 15 deletions(-)

(limited to 'src/client/views/nodes/trails/PresElementBox.tsx')

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 591480023..fe7b5c8c4 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -327,10 +327,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     navigateToView = (targetDoc: Doc, activeItem: Doc) => {
         clearTimeout(this._navTimer);
         const bestTarget = DocumentManager.Instance.getFirstDocumentView(targetDoc)?.props.Document;
-        if (bestTarget) console.log(bestTarget.title, bestTarget.type);
-        else console.log("no best target");
         bestTarget && runInAction(() => {
-            console.log(bestTarget.title, bestTarget.type);
             if (bestTarget.type === DocumentType.PDF || bestTarget.type === DocumentType.WEB || bestTarget.type === DocumentType.RTF || bestTarget._viewType === CollectionViewType.Stacking) {
                 bestTarget._viewTransition = activeItem.presTransition ? `transform ${activeItem.presTransition}ms` : 'all 0.5s';
                 bestTarget._scrollTop = activeItem.presPinViewScroll;
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index f56ca5471..a2d76978a 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -261,11 +261,12 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @undoBatch
     removeItem = action((e: React.MouseEvent) => {
+      e.stopPropagation();
         this.props.removeDocument?.(this.rootDoc);
         if (PresBox.Instance._selectedArray.has(this.rootDoc)) {
             PresBox.Instance._selectedArray.delete(this.rootDoc);
         }
-        e.stopPropagation();
+        this.removeAllRecordingInOverlay() 
     });
 
     // set the value/title of the individual pres element
@@ -318,10 +319,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
             return isInOverlay
       }
 
-      @undoBatch
-      @action
-      hideRecording = (e: React.PointerEvent) => {
-            e.stopPropagation()
+      removeAllRecordingInOverlay = () => {
             DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => {
                   if (doc.slides === this.rootDoc) {
                         Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, doc);
@@ -329,15 +327,17 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
             })
       }
 
+      @undoBatch
+      @action
+      hideRecording = (e: React.PointerEvent) => {
+            e.stopPropagation()
+            this.removeAllRecordingInOverlay()
+      }
+
       @undoBatch
       @action
       showRecording = (activeItem: Doc) => {
-            // Remove every recording that already exists in overlay view
-            DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => {
-                  if (doc.slides !== null) {
-                        Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, doc);
-                  }
-            })
+            this.removeAllRecordingInOverlay()
             if (activeItem.recording) {
                   // if we already have an existing recording
                   Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, Cast(activeItem.recording, Doc, null));
@@ -363,7 +363,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                   // if we dont have any recording
                   const recording = Docs.Create.WebCamDocument("", {
                         _width: 400, _height: 200,
-                        hideDocumentButtonBar: true,
+                        // hideDocumentButtonBar: true,
                         hideDecorationTitle: true,
                         hideOpenButton: true,
                         // hideDeleteButton: true,
-- 
cgit v1.2.3-70-g09d2


From 78b3b4f194b94a230ff0b07e397b595700d6529f Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 10 Jun 2022 10:52:45 -0400
Subject: fixed some errors

---
 src/client/documents/Documents.ts                |  4 ++++
 src/client/views/nodes/trails/PresElementBox.tsx | 11 +++++------
 2 files changed, 9 insertions(+), 6 deletions(-)

(limited to 'src/client/views/nodes/trails/PresElementBox.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 088593871..0bb6ce27f 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -191,6 +191,10 @@ export class DocumentOptions {
     childDontRegisterViews?: boolean;
     childHideLinkButton?: boolean; // hide link buttons on all children
     hideLinkButton?: boolean; // whether the blue link counter button should be hidden
+    hideDecorationTitle?: boolean;
+    hideOpenButton?: boolean;
+    hideResizeHandles?: boolean;
+    hideDocumentButtonBar?: boolean;
     hideAllLinks?: boolean; // whether all individual blue anchor dots should be hidden
     isTemplateForField?: string; // the field key for which the containing document is a rendering template
     isTemplateDoc?: boolean;
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index 9ad13eb84..50df00612 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tooltip } from "@material-ui/core";
 import { action, computed, IReactionDisposer, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, DocListCast, Opt } from "../../../../fields/Doc";
+import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../../fields/Doc";
 import { Id } from "../../../../fields/FieldSymbols";
 import { BoolCast, Cast, NumCast, StrCast } from "../../../../fields/Types";
 import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from "../../../../Utils";
@@ -328,7 +328,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
       @undoBatch
       @action
-      hideRecording = (e: React.PointerEvent) => {
+      hideRecording = (e: React.MouseEvent) => {
             e.stopPropagation()
             this.removeAllRecordingInOverlay()
       }
@@ -366,8 +366,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         hideDecorationTitle: true,
                         hideOpenButton: true,
                         // hideDeleteButton: true,
-                        cloneFieldFilter:
-                              new List<string>(["system"])
+                        cloneFieldFilter: new List<string>(["system"])
                   });
 
                   // attach the recording to the slide, and attach the slide to the recording
@@ -375,8 +374,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                   activeItem.recording = recording
 
                   // make recording box appear in the bottom right corner of the screen
-                  recording.x = window.innerWidth - recording._width - 20;
-                  recording.y = window.innerHeight - recording._height - 20;
+                  recording.x = window.innerWidth - recording[WidthSym]() - 20;
+                  recording.y = window.innerHeight - recording[HeightSym]() - 20;
                   Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, recording);
             }
       }
-- 
cgit v1.2.3-70-g09d2

