presBox updates for pull

drag changes + renaming marquee options + fixes

6 files changed, 194 insertions, 85 deletions

diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 076502042..ed248c473 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -26,6 +26,7 @@ import { TemplateMenu } from "./TemplateMenu";
 import React = require("react");
 import { PresBox } from './nodes/PresBox';
 import { undoBatch } from '../util/UndoManager';
+import { CollectionViewType } from './collections/CollectionView';
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -186,7 +187,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
     get pinButton() {
         const targetDoc = this.view0?.props.Document;
         const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
-        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin to presentation"}</div></>}>
+        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{SelectionManager.SelectedDocuments().length > 1 ? "Pin multiple documents to presentation" : "Pin to presentation"}</div></>}>
             <div className="documentButtonBar-linker"
                 style={{ color: "white" }}
                 onClick={undoBatch(e => this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document, false)))}>
@@ -194,25 +195,40 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
             </div></Tooltip>;
     }
 
+    @undoBatch
+    @action
+    pinWithView = (targetDoc: Doc) => {
+        if (targetDoc) {
+            TabDocView.PinDoc(targetDoc, false);
+            const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1];
+            if (targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.WEB || targetDoc._viewType === CollectionViewType.Stacking) {
+                const scroll = targetDoc._scrollTop;
+                activeDoc.presPinView = true;
+                activeDoc.presPinViewScroll = scroll;
+            } else if ((targetDoc.type === DocumentType.COL && targetDoc._viewType === CollectionViewType.Freeform) || targetDoc.type === DocumentType.IMG) {
+                const x = targetDoc._panX;
+                const y = targetDoc._panY;
+                const scale = targetDoc._viewScale;
+                activeDoc.presPinView = true;
+                activeDoc.presPinViewX = x;
+                activeDoc.presPinViewY = y;
+                activeDoc.presPinViewScale = scale;
+            } else if (targetDoc.type === DocumentType.COMPARISON) {
+                const width = targetDoc._clipWidth;
+                activeDoc.presPinClipWidth = width;
+                activeDoc.presPinView = true;
+            }
+        }
+    }
+
     @computed
     get pinWithViewButton() {
         const presPinWithViewIcon = <img src="/assets/pinWithView.png" style={{ margin: "auto", width: 17, transform: 'translate(0, 1px)' }} />;
         const targetDoc = this.view0?.props.Document;
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin with current view"}</div></>}>
-            <div className="documentButtonBar-linker"
-                onClick={undoBatch(e => {
-                    if (targetDoc) {
-                        TabDocView.PinDoc(targetDoc, false);
-                        const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1];
-                        const x = targetDoc._panX;
-                        const y = targetDoc._panY;
-                        const scale = targetDoc._viewScale;
-                        activeDoc.presPinView = true;
-                        activeDoc.presPinViewX = x;
-                        activeDoc.presPinViewY = y;
-                        activeDoc.presPinViewScale = scale;
-                    }
-                })}>
+            <div
+                className="documentButtonBar-linker"
+                onClick={() => this.pinWithView(targetDoc)}>
                 {presPinWithViewIcon}
             </div>
         </Tooltip>;
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
index fd4fa0c7e..d8e44e781 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
@@ -54,7 +54,7 @@ export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> {
                     <FontAwesomeIcon icon="font" size="lg" />
                 </button>
             </Tooltip>,
-            <Tooltip key="pinWithView" title={<><div className="dash-tooltip">Pin with selected view</div></>} placement="bottom">
+            <Tooltip key="pinWithView" title={<><div className="dash-tooltip">Pin the selected region to presentation</div></>} placement="bottom">
                 <button
                     className="antimodeMenu-button"
                     onPointerDown={this.pinWithView}>
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 9a8b861ba..961d1707b 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -56,6 +56,7 @@ $light-background: #ececec;
             letter-spacing: 0;
             display: flex;
             align-items: center;
+            justify-content: center;
             transition: 0.5s;
         }
 
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 3b7794815..e819cd9c6 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -52,6 +52,11 @@ enum PresStatus {
     Edit = "edit"
 }
 
+enum PresColors {
+    Active = "#AEDDF8",
+
+}
+
 type PresBoxSchema = makeInterface<[typeof documentSchema]>;
 const PresBoxDocument = makeInterface(documentSchema);
 
@@ -69,14 +74,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @observable _sortedSelectedArray: Doc[] = [];
     @observable _eleArray: HTMLElement[] = [];
     @observable _dragArray: HTMLElement[] = [];
+    @observable _pathBoolean: boolean = false;
+    @observable _expandBoolean: boolean = false;
 
     @observable private transitionTools: boolean = false;
     @observable private newDocumentTools: boolean = false;
     @observable private progressivizeTools: boolean = false;
-    @observable private presentTools: boolean = false;
-    @observable private pathBoolean: boolean = false;
     @observable private openMovementDropdown: boolean = false;
     @observable private openEffectDropdown: boolean = false;
+    @observable private presentTools: boolean = false;
     @computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); }
     @computed get itemIndex() { return NumCast(this.rootDoc._itemIndex); }
     @computed get activeItem() { return Cast(this.childDocs[this.itemIndex], Doc, null); }
@@ -442,7 +448,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 }
             }
         };
-        this.layoutDoc.presStatus = PresStatus.Auto;
+        this.layoutDoc.presStatus = PresStatus.Autoplay;
         this.startPresentation(startSlide);
         this.gotoDocument(startSlide, this.itemIndex);
         load();
@@ -450,7 +456,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
     @action
     pauseAutoPres = () => {
-        if (this.layoutDoc.presStatus === PresStatus.Auto) {
+        if (this.layoutDoc.presStatus === PresStatus.Autoplay) {
             if (this._presTimer) clearTimeout(this._presTimer);
             this.layoutDoc.presStatus = PresStatus.Manual;
             this.layoutDoc.presLoop = false;
@@ -466,20 +472,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
     @action togglePath = (srcContext: Doc, off?: boolean) => {
         if (off) {
-            this.pathBoolean = false;
+            this._pathBoolean = false;
             srcContext.presPathView = false;
         } else {
-            this.pathBoolean = !this.pathBoolean;
-            srcContext.presPathView = this.pathBoolean;
+            undoBatch(() => {
+                runInAction(() => this._pathBoolean = !this._pathBoolean);
+                srcContext.presPathView = this._pathBoolean;
+            })
         }
     }
 
     @undoBatch
     @action toggleExpandMode = () => {
-        this.rootDoc.expandBoolean = !this.rootDoc.expandBoolean;
+        runInAction(() => this._expandBoolean = !this._expandBoolean);
         this.childDocs.forEach((doc) => {
-            if (this.rootDoc.expandBoolean) doc.presExpandInlineButton = true;
-            else if (!this.rootDoc.expandBoolean) doc.presExpandInlineButton = false;
+            doc.presExpandInlineButton = this._expandBoolean;
         });
     }
 
@@ -589,9 +596,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     addDocumentFilter = (doc: Doc | Doc[]) => {
         const docs = doc instanceof Doc ? [doc] : doc;
         docs.forEach((doc, i) => {
-            if (this.childDocs.includes(doc)) {
-                if (docs.length === i + 1) return false;
-            } else if (doc.type === DocumentType.LABEL) {
+            if (doc.type === DocumentType.LABEL) {
                 const audio = Cast(doc.annotationOn, Doc, null);
                 if (audio) {
                     audio.aliasOf instanceof Doc;
@@ -605,7 +610,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             } else {
                 doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf);
                 !this.childDocs.includes(doc) && (doc.presMovement = PresMovement.Zoom);
-                if (this.rootDoc.expandBoolean) doc.presExpandInlineButton = true;
+                if (this._expandBoolean) doc.presExpandInlineButton = true;
             }
         });
         return true;
@@ -743,7 +748,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     /**
      * 
      */
-    @undoBatch
     @action
     viewPaths = () => {
         const srcContext = Cast(this.rootDoc.presCollection, Doc, null);
@@ -1678,6 +1682,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const propIcon = CurrentUserUtils.propertiesWidth > 0 ? "angle-double-right" : "angle-double-left";
         const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Presentation Panel" : "Open Presentation Panel";
         const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
+        const isMini: boolean = this.toolbarWidth <= 100;
         return (mode === CollectionViewType.Carousel3D) ? (null) : (
             <div id="toolbarContainer" className={'presBox-toolbar'} style={{ display: this.layoutDoc.presStatus === "edit" ? "inline-flex" : "none" }}>
                 {/* <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}>
@@ -1685,23 +1690,29 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
                 </div></Tooltip> */}
                 <Tooltip title={<><div className="dash-tooltip">{"View paths"}</div></>}>
-                    <div style={{ opacity: this.childDocs.length > 1 ? 1 : 0.3 }} className={`toolbar-button ${this.pathBoolean ? "active" : ""}`} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}>
+                    <div style={{ opacity: this.childDocs.length > 1 ? 1 : 0.3, color: this._pathBoolean ? '#AEDDF8' : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}>
                         <FontAwesomeIcon icon={"exchange-alt"} />
                     </div>
                 </Tooltip>
-                <div className="toolbar-divider" />
-                <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.expandBoolean ? "Minimize all" : "Expand all"}</div></>}>
-                    <div className={`toolbar-button ${this.rootDoc.expandBoolean ? "active" : ""}`} onClick={this.toggleExpandMode}>
-                        {/* <FontAwesomeIcon icon={this.rootDoc.expandBoolean ? "eye-slash" : "eye"} /> */}
-                        <FontAwesomeIcon icon={"eye"} />
-                    </div>
-                </Tooltip>
-                <div className="toolbar-divider" />
-                <Tooltip title={<><div className="dash-tooltip">{propTitle}</div></>}>
-                    <div className="toolbar-button" style={{ position: 'absolute', right: 4, fontSize: 16 }} onClick={this.toggleProperties}>
-                        <FontAwesomeIcon className={"toolbar-thumbtack"} icon={propIcon} style={{ color: CurrentUserUtils.propertiesWidth > 0 ? '#AEDDF8' : 'white' }} />
-                    </div>
-                </Tooltip>
+                {isMini ? (null) :
+                    <>
+                        <div className="toolbar-divider" />
+                        <Tooltip title={<><div className="dash-tooltip">{this._expandBoolean ? "Minimize all" : "Expand all"}</div></>}>
+                            <div className={"toolbar-button"}
+                                style={{ color: this._expandBoolean ? '#AEDDF8' : 'white' }}
+                                onClick={this.toggleExpandMode}>
+                                {/* <FontAwesomeIcon icon={this.rootDoc.expandBoolean ? "eye-slash" : "eye"} /> */}
+                                <FontAwesomeIcon icon={"eye"} />
+                            </div>
+                        </Tooltip>
+                        <div className="toolbar-divider" />
+                        <Tooltip title={<><div className="dash-tooltip">{propTitle}</div></>}>
+                            <div className="toolbar-button" style={{ position: 'absolute', right: 4, fontSize: 16 }} onClick={this.toggleProperties}>
+                                <FontAwesomeIcon className={"toolbar-thumbtack"} icon={propIcon} style={{ color: CurrentUserUtils.propertiesWidth > 0 ? '#AEDDF8' : 'white' }} />
+                            </div>
+                        </Tooltip>
+                    </>
+                }
             </div>
         );
     }
@@ -1713,23 +1724,24 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
      */
     @computed get topPanel() {
         const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
+        const isMini: boolean = this.toolbarWidth <= 100;
         return (
             <div className="presBox-buttons" style={{ display: this.rootDoc._chromeStatus === "disabled" ? "none" : undefined }}>
-                <select className="presBox-viewPicker"
+                {isMini ? (null) : <select className="presBox-viewPicker"
                     style={{ display: this.layoutDoc.presStatus === "edit" ? "block" : "none" }}
                     onPointerDown={e => e.stopPropagation()}
                     onChange={this.viewChanged}
                     value={mode}>
                     <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Stacking}>List</option>
                     <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Carousel3D}>3D Carousel</option>
-                </select>
+                </select>}
                 <div className="presBox-presentPanel" style={{ opacity: this.childDocs.length > 0 ? 1 : 0.3 }}>
                     <span className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`}>
                         <div className="presBox-button-left" onClick={() => (this.childDocs.length > 0) && (this.layoutDoc.presStatus = "manual")}>
                             <FontAwesomeIcon icon={"play-circle"} />
                             <div style={{ display: this.props.PanelWidth() > 200 ? "inline-flex" : "none" }}>&nbsp; Present</div>
                         </div>
-                        {(mode === CollectionViewType.Carousel3D) ? (null) : <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`}
+                        {(mode === CollectionViewType.Carousel3D || isMini) ? (null) : <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`}
                             onClick={(action(() => {
                                 if (this.childDocs.length > 0) this.presentTools = !this.presentTools;
                             }))}>
@@ -1900,7 +1912,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 }
 Scripting.addGlobal(function lookupPresBoxField(container: Doc, field: string, data: Doc) {
     if (field === 'indexInPres') return DocListCast(container[StrCast(container.presentationFieldKey)]).indexOf(data);
-    if (field === 'presCollapsedHeight') return container._viewType === CollectionViewType.Stacking ? 30 : 26;
+    if (field === 'presCollapsedHeight') return container._viewType === CollectionViewType.Stacking ? 35 : 31;
     if (field === 'presStatus') return container.presStatus;
     if (field === '_itemIndex') return container._itemIndex;
     if (field === 'presBox') return container;
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index f1bdb7737..60fe33f3f 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -36,7 +36,6 @@ $slide-active: #5B9FDD;
         overflow: hidden;
     }
 
-
 }
 
 .presItem-slide {
@@ -46,17 +45,18 @@ $slide-active: #5B9FDD;
     height: calc(100% - 7px);
     width: calc(100% - 5px);
     display: grid;
-    grid-template-rows: 23px auto;
+    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: 1px;
         align-self: center;
-        font-size: 13px;
+        font-size: 12px;
         font-family: Roboto;
         font-weight: 500;
         position: relative;
-        top: 1px;
         padding-left: 10px;
         padding-right: 10px;
         letter-spacing: normal;
@@ -64,13 +64,35 @@ $slide-active: #5B9FDD;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: pre;
+        transition: 500ms;
+    }
+
+    .presItem-docName {
+        min-width: 20px;
+        z-index: 300;
+        align-self: center;
+        font-style: italic;
+        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;
+        transition: 500ms;
+        grid-row: 2;
+        grid-column: 1/6;
     }
 
     .presItem-time {
         align-self: center;
         position: relative;
-        top: 2px;
         padding-right: 10px;
+        top: 1px;
         font-size: 10;
         font-weight: 300;
         font-family: Roboto;
@@ -80,6 +102,7 @@ $slide-active: #5B9FDD;
     
     .presItem-embedded {
         overflow: hidden;
+        grid-row: 3;
         grid-column: 1/8;
         position: relative;
         display: flex;
@@ -106,6 +129,7 @@ $slide-active: #5B9FDD;
     .presItem-slideButtons {
         display: flex;
         grid-column: 7;
+        grid-row: 1/3;
         width: 60px;
         justify-self: right;
         justify-content: flex-end;
@@ -115,10 +139,10 @@ $slide-active: #5B9FDD;
             position: relative;
             border-radius: 100%;
             z-index: 300;
-            width: 15px;
-            height: 15px;
+            width: 18px;
+            height: 18px;
             display: flex;
-            font-size: 10px;
+            font-size: 12px;
             justify-self: center;
             align-self: center;
             background-color: rgba(0, 0, 0, 0.5);
@@ -131,15 +155,50 @@ $slide-active: #5B9FDD;
 
         .slideButton:hover {
             background-color: rgba(0, 0, 0, 1);
-            transform: scale(1.15);
+            transform: scale(1.2);
         }
     }
 }
 
+
+
 .presItem-slide.active {
     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: 40px;
+    position: absolute;
+    background-color: $dark-blue;
+    z-index: 4000;
+    border-radius: 10px;
+    box-shadow: black 0.4vw 0.4vw 0.8vw;
+
+}
+
+.presItem-miniSlide {
+    font-weight: 700;
+    grid-column: 1/8;
+    align-self: center;
+    justify-self: center;
+    background-color: #d5dce2;
+    width: 28px;
+    text-align: center;
+    height: 28px;
+    border-radius: 5px;
+}
+
+.presItem-miniSlide.active {
+    box-shadow: 0 0 0px 1.5px $dark-blue;
+}
+
 // .presItem-slide:hover {
 //     background: $slide-hover;
 // }
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index aea00f812..61d6e9027 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -161,26 +161,30 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         e.preventDefault();
     }
 
-    @action
-    stopDrag = (e: PointerEvent) => {
-        this._dragging = false;
-        e.stopPropagation();
-        e.preventDefault();
-    }
-
     startDrag = (e: PointerEvent, down: number[], delta: number[]) => {
+        const miniView: boolean = PresBox.Instance.toolbarWidth <= 100;
         const activeItem = this.rootDoc;
+        const dragArray = PresBox.Instance._dragArray;
         const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc));
         const dragItem: HTMLElement[] = [];
-        PresBox.Instance._dragArray.map(ele => {
-            const doc = ele;
-            doc.className = "presItem-slide";
+        if (dragArray.length === 1) {
+            const doc = dragArray[0];
+            doc.className = miniView ? "presItem-miniSlide" : "presItem-slide";
+            dragItem.push(doc);
+        } else if (dragArray.length >= 1) {
+            const doc = document.createElement('div');
+            doc.className = "presItem-multiDrag";
+            doc.innerText = "Move " + dragArray.length + " slides";
+            doc.style.position = 'absolute';
+            doc.style.top = (e.clientY) + 'px';
+            doc.style.left = (e.clientX - 50) + 'px';
             dragItem.push(doc);
-        });
-        const dropEvent = () => runInAction(() => this._dragging = false);
+        }
+
+        // const dropEvent = () => runInAction(() => this._dragging = false);
         if (activeItem) {
-            DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY, undefined, dropEvent);
-            runInAction(() => this._dragging = true);
+            DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY, undefined);
+            // runInAction(() => this._dragging = true);
             return true;
         }
         return false;
@@ -233,15 +237,18 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
 
     @action
     onSetValue = (value: string) => {
-        this.rootDoc.title = value;
+        const length: number = value.length;
+        const spaces: string = new Array(value.length + 1).join(" ");
+        if (length === 0 || value === spaces) this.rootDoc.title = "-untitled-";
+        else this.rootDoc.title = value;
         return true;
     }
 
     @action
     clearArrays = () => {
         PresBox.Instance._eleArray = [];
-        PresBox.Instance._eleArray.push(this._itemRef.current!);
         PresBox.Instance._dragArray = [];
+        PresBox.Instance._eleArray.push(this._itemRef.current!);
         PresBox.Instance._dragArray.push(this._dragRef.current!);
     }
 
@@ -275,7 +282,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         const isSelected: boolean = PresBox.Instance._selectedArray.includes(this.rootDoc);
         const toolbarWidth: number = PresBox.Instance.toolbarWidth;
         const showMore: boolean = PresBox.Instance.toolbarWidth >= 300;
-        const targetDoc: Doc = Cast(this.rootDoc.presentationTargetDoc, Doc, null);
+        const miniView: boolean = PresBox.Instance.toolbarWidth <= 100;
+        const targetDoc: Doc = this.targetDoc;
         const activeItem: Doc = this.rootDoc;
         return (
             <div className={`presItem-container`} key={this.props.Document[Id] + this.indexInPres}
@@ -306,21 +314,26 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                 onPointerDown={this.headerDown}
                 onPointerUp={this.headerUp}
             >
-                <div className="presItem-number">
-                    {`${this.indexInPres + 1}.`}
-                </div>
-                <div ref={this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}>
+                {miniView ?
+                    <div className={`presItem-miniSlide ${isSelected ? "active" : ""}`} ref={miniView ? this._dragRef : null}>
+                        {`${this.indexInPres + 1}.`}
+                    </div>
+                    :
+                    <div className="presItem-number">
+                        {`${this.indexInPres + 1}.`}
+                    </div>}
+                {miniView ? (null) : <div ref={miniView ? null : this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}>
                     <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85 }}>
                         {isSelected ? <EditableView
                             ref={this._titleRef}
-                            contents={this.rootDoc.title}
-                            GetValue={() => StrCast(this.rootDoc.title)}
-                            SetValue={action((value: string) => {
+                            contents={activeItem.title}
+                            GetValue={() => StrCast(activeItem.title)}
+                            SetValue={undoBatch(action((value: string) => {
                                 this.onSetValue(value);
                                 return true;
-                            })}
+                            }))}
                         /> :
-                            this.rootDoc.title
+                            activeItem.title
                         }
                     </div>
                     <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip>
@@ -331,6 +344,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                                 onClick={() => this.updateView(targetDoc, activeItem)}
                                 style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V</div>
                         </Tooltip>
+                        {/* <Tooltip title={<><div className="dash-tooltip">{"Group with up"}</div></>}>
+                            <div className="slideButton"
+                                onClick={() => activeItem.groupWithUp = !activeItem.groupWithUp}
+                                style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>
+                                <FontAwesomeIcon icon={""} onPointerDown={e => e.stopPropagation()} />
+                            </div>
+                        </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>
@@ -340,8 +360,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                             <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} />
                         </div></Tooltip>
                     </div>
+                    <div className="presItem-docName" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85 }}>{activeItem.presPinView ? "View of " + targetDoc.title : targetDoc.title}</div>
                     {this.renderEmbeddedInline}
-                </div>
+                </div>}
             </div >);
     }