From 80a8e0a7e48ee84cb121b80d72d485bc10e9269b Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Thu, 1 Oct 2020 19:32:21 +0800
Subject: redesigned presItems

---
 .../views/presentationview/PresElementBox.tsx      | 132 ++++++++++++---------
 1 file changed, 76 insertions(+), 56 deletions(-)

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

diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index aa44c13d1..8d53c8cc6 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -74,7 +74,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     embedHeight = () => 100;
     // embedWidth = () => this.props.PanelWidth();
     // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight);
-    embedWidth = () => this.props.PanelWidth() - 20;
+    embedWidth = () => this.props.PanelWidth() - 30;
     /**
      * The function that is responsible for rendering a preview or not for this
      * presentation element.
@@ -155,11 +155,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     }
 
     headerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+        const activeItem = this.rootDoc;
         e.stopPropagation();
         e.preventDefault();
-        DragManager.docsBeingDragged = [];
-        this._highlightTopRef.current!.style.borderBottom = "0px";
-        this._highlightBottomRef.current!.style.borderBottom = "0px";
     }
 
     startDrag = (e: PointerEvent, down: number[], delta: number[]) => {
@@ -167,10 +165,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc));
         const dragItem: HTMLElement[] = [];
         PresBox.Instance._dragArray.map(ele => {
-            const drag = ele;
-            drag.style.backgroundColor = "#d5dce2";
-            drag.style.borderRadius = '5px';
-            dragItem.push(drag);
+            const doc = ele;
+            doc.className = "presItem-slide"
+            dragItem.push(doc);
         });
         if (activeItem) {
             DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY);
@@ -180,27 +177,39 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         return false;
     }
 
-    private _highlightTopRef: React.RefObject<HTMLDivElement> = React.createRef();
-    private _highlightBottomRef: React.RefObject<HTMLDivElement> = React.createRef();
-
-
-    onPointerTop = (e: React.PointerEvent<HTMLDivElement>) => {
-        if (DragManager.docsBeingDragged.length > 1) {
-            this._highlightTopRef.current!.style.borderTop = "solid 2px #5B9FDD";
-        }
+    onPointerOver = (e: any) => {
+        console.log('pointerOver');
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.addEventListener("pointermove", this.onPointerMove);
     }
 
-    onPointerBottom = (e: React.PointerEvent<HTMLDivElement>) => {
+    onPointerMove = (e: PointerEvent) => {
+        console.log('pointerMove');
+        const slide = this._itemRef.current!;
+        const rect = slide!.getBoundingClientRect();
+        let y = e.clientY - rect.top;  //y position within the element.
+        let height = slide.clientHeight;
+        let halfLine = height / 2;
+        console.log(y);
+        console.log(height);
+        console.log(halfLine);
         if (DragManager.docsBeingDragged.length > 1) {
-            this._highlightBottomRef.current!.style.borderBottom = "solid 2px #5B9FDD";
+            if (y <= halfLine) {
+                slide.style.borderTop = "solid 2px #5B9FDD";
+                slide.style.borderBottom = "0px";
+            } else if (y > halfLine) {
+                slide.style.borderTop = "0px";
+                slide.style.borderBottom = "solid 2px #5B9FDD";
+            }
         }
+        document.removeEventListener("pointermove", this.onPointerMove);
     }
 
-    onPointerLeave = (e: React.PointerEvent<HTMLDivElement>) => {
-        if (DragManager.docsBeingDragged.length > 1) {
-            this._highlightBottomRef.current!.style.borderBottom = "0px";
-            this._highlightTopRef.current!.style.borderTop = "0px";
-        }
+    onPointerLeave = (e: any) => {
+        console.log('pointerLeave');
+        this._itemRef.current!.style.borderTop = "0px"
+        this._itemRef.current!.style.borderBottom = "0px"
+        document.removeEventListener("pointermove", this.onPointerMove);
     }
 
     @action
@@ -225,12 +234,21 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         return true;
     }
 
-    render() {
-        const className = "presElementBox-item" + (PresBox.Instance._selectedArray.includes(this.rootDoc) ? " presElementBox-active" : "");
-        return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : (
-            <div className={className} key={this.props.Document[Id] + this.indexInPres}
+    @action
+    clearArrays = () => {
+        PresBox.Instance._eleArray = [];
+        PresBox.Instance._eleArray.push(this._itemRef.current!);
+        PresBox.Instance._dragArray = [];
+        PresBox.Instance._dragArray.push(this._dragRef.current!);
+    }
+
+    @computed get mainItem() {
+        const isSelected: boolean = PresBox.Instance._selectedArray.includes(this.rootDoc);
+        const isDragging: boolean = BoolCast(this.rootDoc.dragging);
+        return (
+            <div className={`presItem-container`} key={this.props.Document[Id] + this.indexInPres}
                 ref={this._itemRef}
-                style={{ outlineWidth: Doc.IsBrushed(this.targetDoc) ? `1px` : "0px", }}
+                style={{ backgroundColor: isSelected ? "#AEDDF8" : "rgba(0,0,0,0)" }}
                 onClick={e => {
                     e.stopPropagation();
                     e.preventDefault();
@@ -243,29 +261,25 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                         // Regular click
                     } else {
                         this.props.focus(this.rootDoc);
-                        PresBox.Instance._eleArray = [];
-                        PresBox.Instance._eleArray.push(this._itemRef.current!);
-                        PresBox.Instance._dragArray = [];
-                        PresBox.Instance._dragArray.push(this._dragRef.current!);
+                        this.clearArrays();
                     }
                 }}
                 onDoubleClick={e => {
                     console.log('double click to open');
                     this.toggleProperties();
                     this.props.focus(this.rootDoc);
-                    PresBox.Instance._eleArray = [];
-                    PresBox.Instance._eleArray.push(this._itemRef.current!);
-                    PresBox.Instance._dragArray = [];
-                    PresBox.Instance._dragArray.push(this._dragRef.current!);
+                    this.clearArrays();
                 }}
+                onPointerOver={this.onPointerOver}
+                onPointerLeave={this.onPointerLeave}
                 onPointerDown={this.headerDown}
                 onPointerUp={this.headerUp}
             >
-                <>
-                    <div className="presElementBox-number">
-                        {`${this.indexInPres + 1}.`}
-                    </div>
-                    <div ref={this._dragRef} className="presElementBox-name" style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}>
+                <div className="presItem-number">
+                    {`${this.indexInPres + 1}.`}
+                </div>
+                <div ref={this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`} style={{ opacity: isDragging ? 0.3 : 1 }}>
+                    <div className="presItem-name" onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); isSelected ? console.log('selected') : console.log('not selected'); }} style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}>
                         <EditableView
                             ref={this._titleRef}
                             contents={this.rootDoc.title}
@@ -279,20 +293,26 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.transition}</div></Tooltip>
                     <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.duration}</div></Tooltip>
                     <Tooltip title={<><div className="dash-tooltip">{"Presentation pin view"}</div></>}><div className="presElementBox-time" style={{ fontWeight: 700, display: this.rootDoc.presPinView && PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>V</div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
-                        className="presElementBox-closeIcon"
-                        onClick={this.removeItem}>
-                        <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} />
-                    </div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"presElementBox-expand" + (this.rootDoc.presExpandInlineButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
-                        <FontAwesomeIcon icon={(this.rootDoc.presExpandInlineButton ? "angle-up" : "angle-down")} onPointerDown={e => e.stopPropagation()} />
-                    </div></Tooltip>
-                </>
-                <div ref={this._highlightTopRef} onPointerOver={this.onPointerTop} onPointerLeave={this.onPointerLeave} className="presElementBox-highlightTop" style={{ zIndex: 299, backgroundColor: "rgba(0,0,0,0)" }} />
-                <div ref={this._highlightBottomRef} onPointerOver={this.onPointerBottom} onPointerLeave={this.onPointerLeave} className="presElementBox-highlightBottom" style={{ zIndex: 299, backgroundColor: "rgba(0,0,0,0)" }} />
-                <div className="presElementBox-highlight" style={{ backgroundColor: PresBox.Instance._selectedArray.includes(this.rootDoc) ? "#AEDDF8" : "rgba(0,0,0,0)" }} />
-                {this.renderEmbeddedInline}
-            </div>
-        );
+                    <div className={"presItem-slideButtons"}>
+                        <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>
+                        <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
+                            className={"slideButton"}
+                            onClick={this.removeItem}>
+                            <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} />
+                        </div></Tooltip>
+                    </div>
+                    {this.renderEmbeddedInline}
+                </div>
+            </div>);
+    }
+
+    render() {
+        let item = null;
+        if (!(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise) item = null;
+        else item = this.mainItem;
+
+        return item;
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From d6131dbdb72fe220af1857e8090b0ca67db8b22d Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Tue, 13 Oct 2020 17:37:14 +0800
Subject: updates before merge

---
 src/client/views/nodes/PresBox.scss                 |  1 -
 src/client/views/nodes/PresBox.tsx                  |  1 +
 .../views/presentationview/PresElementBox.scss      | 21 ++++++++-------------
 .../views/presentationview/PresElementBox.tsx       | 17 +++++++----------
 4 files changed, 16 insertions(+), 24 deletions(-)

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

diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 7bc6c1dfd..ad2e7122f 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -22,7 +22,6 @@ $light-background: #ececec;
         position: relative;
         height: calc(100% - 67px);
         width: 100%;
-        margin-top: 3px;
     }
 
     .presBox-toolbar-dropdown {
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 2af00586b..1af1d5c90 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -119,6 +119,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         this.rootDoc._replacedChrome = "replaced";
         this.layoutDoc.presStatus = "edit";
         this.layoutDoc._gridGap = 0;
+        this.layoutDoc._yMargin = 0;
         this.turnOffEdit(true);
         DocListCastAsync((Doc.UserDoc().myPresentations as Doc).data).then(async pres => {
             await Promise.all(pres!);
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index d757fc1de..0e1953e7c 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -25,13 +25,12 @@ $slide-active: #5B9FDD;
     align-items: center;
 
     .presItem-number {
+        margin-top: 7px;
         font-size: 12px;
         font-weight: 700;
         text-align: center;
         justify-self: center;
-        align-self: center;
-        /* padding-right: 3%; */
-        /* width: 8%; */
+        align-self: flex-start;
         position: relative;
         display: inline-block;
         overflow: hidden;
@@ -44,7 +43,7 @@ $slide-active: #5B9FDD;
     position: relative;
     background-color: #d5dce2;
     border-radius: 5px;
-    height: calc(100% - 5px);
+    height: calc(100% - 8px);
     width: calc(100% - 5px);
     display: grid;
     grid-template-columns: max-content max-content max-content max-content auto;
@@ -68,17 +67,12 @@ $slide-active: #5B9FDD;
 }
 
 .presItem-slide.active {
-    border: solid 2px $dark-blue;
-}
-
-.presItem-slide:hover {
-    background: $slide-hover;
+    box-shadow: 0 0 0px 1.5px $dark-blue;
 }
 
-.documentView-node {
-    position: absolute;
-    z-index: 1;
-}
+// .presItem-slide:hover {
+//     background: $slide-hover;
+// }
 
 .presElementBox-time {
     align-self: center;
@@ -135,6 +129,7 @@ $slide-active: #5B9FDD;
         justify-content: center;
         align-items: center;
         transition: 0.2s;
+        margin-right: 3px;
     }
 
     .slideButton:hover {
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 8d53c8cc6..97344d33d 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -178,21 +178,16 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     }
 
     onPointerOver = (e: any) => {
-        console.log('pointerOver');
         document.removeEventListener("pointermove", this.onPointerMove);
         document.addEventListener("pointermove", this.onPointerMove);
     }
 
     onPointerMove = (e: PointerEvent) => {
-        console.log('pointerMove');
         const slide = this._itemRef.current!;
         const rect = slide!.getBoundingClientRect();
         let y = e.clientY - rect.top;  //y position within the element.
         let height = slide.clientHeight;
         let halfLine = height / 2;
-        console.log(y);
-        console.log(height);
-        console.log(halfLine);
         if (DragManager.docsBeingDragged.length > 1) {
             if (y <= halfLine) {
                 slide.style.borderTop = "solid 2px #5B9FDD";
@@ -248,7 +243,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         return (
             <div className={`presItem-container`} key={this.props.Document[Id] + this.indexInPres}
                 ref={this._itemRef}
-                style={{ backgroundColor: isSelected ? "#AEDDF8" : "rgba(0,0,0,0)" }}
+                style={{ backgroundColor: isSelected ? "#AEDDF8" : "rgba(0,0,0,0)", opacity: isDragging ? 0.3 : 1 }}
                 onClick={e => {
                     e.stopPropagation();
                     e.preventDefault();
@@ -278,9 +273,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                 <div className="presItem-number">
                     {`${this.indexInPres + 1}.`}
                 </div>
-                <div ref={this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`} style={{ opacity: isDragging ? 0.3 : 1 }}>
-                    <div className="presItem-name" onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); isSelected ? console.log('selected') : console.log('not selected'); }} style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}>
-                        <EditableView
+                <div ref={this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}>
+                    <div className="presItem-name" style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}>
+                        {isSelected ? <EditableView
                             ref={this._titleRef}
                             contents={this.rootDoc.title}
                             GetValue={() => StrCast(this.rootDoc.title)}
@@ -288,7 +283,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                                 this.onSetValue(value);
                                 return true;
                             })}
-                        />
+                        /> :
+                            this.rootDoc.title
+                        }
                     </div>
                     <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.transition}</div></Tooltip>
                     <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.duration}</div></Tooltip>
-- 
cgit v1.2.3-70-g09d2


From 9aded8f992b83a53eeb31faa3af1aeea4a5f4617 Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Tue, 13 Oct 2020 23:08:20 +0800
Subject: Pres redesign and minor changes

---
 src/client/views/nodes/PresBox.tsx                 |  10 +-
 .../views/presentationview/PresElementBox.scss     | 134 +++++++++++----------
 .../views/presentationview/PresElementBox.tsx      |  12 +-
 3 files changed, 82 insertions(+), 74 deletions(-)

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

diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 1af1d5c90..f59d6f966 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -1312,7 +1312,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <div className={`presBox-ribbon ${this.progressivizeTools && this.layoutDoc.presStatus === "edit" ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
                         <div className="ribbon-box">
                             {this.stringType} selected
-                            <div className="ribbon-doubleButton" style={{ borderTop: 'solid 1px darkgrey', display: (targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform') || targetDoc.type === DocumentType.IMG ? "inline-flex" : "none" }}>
+                            <div className="ribbon-doubleButton" style={{ borderTop: 'solid 1px darkgrey', display: (targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform') || targetDoc.type === DocumentType.IMG || targetDoc.type === DocumentType.RTF ? "inline-flex" : "none" }}>
                                 <div className="ribbon-toggle" style={{ backgroundColor: activeItem.presProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeChild}>Contents</div>
                                 <div className="ribbon-toggle" style={{ opacity: activeItem.presProgressivize ? 1 : 0.4, backgroundColor: targetDoc.editProgressivize ? "#aedef8" : "" }} onClick={this.editProgressivize}>Edit</div>
                             </div>
@@ -1501,18 +1501,18 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const targetDoc: Doc = this.targetDoc;
         const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
         if (!activeItem.presProgressivize) {
-            targetDoc.editing = false;
+            // targetDoc.editing = false;
             activeItem.presProgressivize = true;
             targetDoc.presProgressivize = true;
             targetDoc._currentFrame = 0;
             docs.forEach((doc, i) => CollectionFreeFormDocumentView.setupKeyframes([doc], i, true));
             targetDoc.lastFrame = targetDoc.lastFrame ? NumCast(targetDoc.lastFrame) : docs.length - 1;
         } else {
-            targetDoc.editProgressivize = false;
+            // targetDoc.editProgressivize = false;
             activeItem.presProgressivize = false;
             targetDoc.presProgressivize = false;
             targetDoc._currentFrame = 0;
-            targetDoc.editing = true;
+            // targetDoc.editing = true;
         }
     }
 
@@ -1785,7 +1785,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 {this.topPanel}
                 {this.toolbar}
                 {this.newDocumentToolbarDropdown}
-                <div className="presBox-listCont" style={{ padding: 0 }}>
+                <div className="presBox-listCont">
                     {mode !== CollectionViewType.Invalid ?
                         <CollectionView {...this.props}
                             ContainingCollectionDoc={this.props.Document}
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 0e1953e7c..6bd80afb8 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -43,9 +43,10 @@ $slide-active: #5B9FDD;
     position: relative;
     background-color: #d5dce2;
     border-radius: 5px;
-    height: calc(100% - 8px);
+    height: calc(100% - 7px);
     width: calc(100% - 5px);
     display: grid;
+    grid-template-rows: 23px auto;
     grid-template-columns: max-content max-content max-content max-content auto;
 
     .presItem-name {
@@ -64,6 +65,75 @@ $slide-active: #5B9FDD;
         overflow: hidden;
         white-space: pre;
     }
+
+    .presItem-time {
+        align-self: center;
+        position: relative;
+        top: 2px;
+        padding-right: 10px;
+        font-size: 10;
+        font-weight: 300;
+        font-family: Roboto;
+        z-index: 300;
+        letter-spacing: normal;
+    }
+    
+    .presItem-embedded {
+        overflow: hidden;
+        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;
+        width: 60px;
+        justify-self: right;
+        justify-content: flex-end;
+
+        .slideButton {
+            cursor: pointer;
+            position: relative;
+            border-radius: 100%;
+            z-index: 300;
+            width: 15px;
+            height: 15px;
+            display: flex;
+            font-size: 75%;
+            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.15);
+        }
+    }
 }
 
 .presItem-slide.active {
@@ -74,66 +144,4 @@ $slide-active: #5B9FDD;
 //     background: $slide-hover;
 // }
 
-.presElementBox-time {
-    align-self: center;
-    position: relative;
-    top: 2px;
-    padding-right: 10px;
-    font-size: 10;
-    font-weight: 300;
-    font-family: Roboto;
-    z-index: 300;
-    letter-spacing: normal;
-}
-
-.presElementBox-embedded {
-    grid-column: 1/8;
-    position: relative;
-    display: flex;
-    width: auto;
-    justify-content: center;
-    margin: auto;
-}
-
-.presElementBox-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;
-    width: 60px;
-    justify-self: right;
-    justify-content: flex-end;
-
-    .slideButton {
-        cursor: pointer;
-        position: relative;
-        border-radius: 100%;
-        z-index: 300;
-        width: 15px;
-        height: 15px;
-        display: flex;
-        font-size: 75%;
-        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.15);
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 97344d33d..b1eac5832 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -71,7 +71,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton;
     }
 
-    embedHeight = () => 100;
+    embedHeight = () => 97;
     // embedWidth = () => this.props.PanelWidth();
     // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight);
     embedWidth = () => this.props.PanelWidth() - 30;
@@ -81,7 +81,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
      */
     @computed get renderEmbeddedInline() {
         return !this.rootDoc.presExpandInlineButton || !this.targetDoc ? (null) :
-            <div className="presElementBox-embedded" style={{ height: this.embedHeight(), width: this.embedWidth() }}>
+            <div className="presItem-embedded" style={{ height: this.embedHeight(), width: this.embedWidth() }}>
                 <ContentFittingDocumentView
                     Document={this.targetDoc}
                     DataDoc={this.targetDoc[DataSym] !== this.targetDoc && this.targetDoc[DataSym]}
@@ -110,7 +110,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     ContainingCollectionDoc={undefined}
                     ContentScaling={returnOne}
                 />
-                <div className="presElementBox-embeddedMask" />
+                <div className="presItem-embeddedMask" />
             </div>;
     }
 
@@ -287,9 +287,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                             this.rootDoc.title
                         }
                     </div>
-                    <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.transition}</div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.duration}</div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{"Presentation pin view"}</div></>}><div className="presElementBox-time" style={{ fontWeight: 700, display: this.rootDoc.presPinView && PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>V</div></Tooltip>
+                    <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.transition}</div></Tooltip>
+                    <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.duration}</div></Tooltip>
+                    <Tooltip title={<><div className="dash-tooltip">{"Presentation pin view"}</div></>}><div className="presItem-time" style={{ fontWeight: 700, display: this.rootDoc.presPinView && PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>V</div></Tooltip>
                     <div className={"presItem-slideButtons"}>
                         <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()} />
-- 
cgit v1.2.3-70-g09d2


From 80ccba05db32ca09ac513f3ec370f3deef873ce7 Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Wed, 14 Oct 2020 02:45:39 +0800
Subject: update view (as button), doc.dragging q?

---
 .../views/collections/CollectionStackingView.tsx   |  4 +--
 src/client/views/nodes/PresBox.tsx                 | 33 ++++++++++++++---
 .../views/presentationview/PresElementBox.tsx      | 42 ++++++++++++++++------
 3 files changed, 61 insertions(+), 18 deletions(-)

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

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index d41e0528d..3607b97d0 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -295,7 +295,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
                 if (docs) {
                     newDocs.map((doc, i) => {
                         if (i === 0) {
-                            doc.dragging = false;
+                            if (doc.presentationTargetDoc) doc.dragging = false; //glr: so it only applies to items in presentation
                             DragManager.docsBeingDragged = [];
                             if (targInd === -1) targInd = docs.length;
                             else targInd = docs.indexOf(this.filteredChildren[targInd]);
@@ -303,7 +303,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
                             docs.splice(srcInd, 1);
                             docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc);
                         } else if (i < (newDocs.length / 2)) { //glr: for some reason dragged documents are duplicated
-                            doc.dragging = false;
+                            if (doc.presentationTargetDoc) doc.dragging = false;
                             DragManager.docsBeingDragged = [];
                             if (targInd === -1) targInd = docs.length;
                             else targInd = docs.indexOf(newDocs[0]) + 1;
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 1a16e6237..8e2884968 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -1250,10 +1250,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const currentFrame = Cast(tagDoc._currentFrame, "number", null);
         if (currentFrame === undefined) {
             tagDoc._currentFrame = 0;
-            // CollectionFreeFormDocumentView.setupScroll(tagDoc, 0);
+            CollectionFreeFormDocumentView.setupScroll(tagDoc, 0);
             CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0);
         }
-        // if (tagDoc.editScrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame);
+        if (tagDoc.editScrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame);
         CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, tagDoc);
         tagDoc._currentFrame = Math.max(0, (currentFrame || 0) + 1);
         tagDoc.lastFrame = Math.max(NumCast(tagDoc._currentFrame), NumCast(tagDoc.lastFrame));
@@ -1314,7 +1314,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                                 <div className="ribbon-toggle" style={{ backgroundColor: activeItem.presProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeChild}>Contents</div>
                                 <div className="ribbon-toggle" style={{ opacity: activeItem.presProgressivize ? 1 : 0.4, backgroundColor: targetDoc.editProgressivize ? "#aedef8" : "" }} onClick={this.editProgressivize}>Edit</div>
                             </div>
-                            <div className="ribbon-doubleButton" style={{ display: activeItem.presProgressivize ? "inline-flex" : "none" }}>
+                            {/* <div className="ribbon-doubleButton" style={{ display: activeItem.presProgressivize ? "inline-flex" : "none" }}>
                                 <div className="presBox-subheading">Active text color</div>
                                 <div className="ribbon-colorBox" style={{ backgroundColor: activeFontColor, height: 15, width: 15 }} onClick={action(() => { this.openActiveColorPicker = !this.openActiveColorPicker; })}>
                                 </div>
@@ -1325,7 +1325,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                                 <div className="ribbon-colorBox" style={{ backgroundColor: viewedFontColor, height: 15, width: 15 }} onClick={action(() => this.openViewedColorPicker = !this.openViewedColorPicker)}>
                                 </div>
                             </div>
-                            {this.viewedColorPicker}
+                            {this.viewedColorPicker} */}
                             {/* <div className="ribbon-doubleButton" style={{ borderTop: 'solid 1px darkgrey', display: (targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform') || targetDoc.type === DocumentType.IMG ? "inline-flex" : "none" }}>
                                 <div className="ribbon-toggle" style={{ backgroundColor: activeItem.zoomProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeZoom}>Zoom</div>
                                 <div className="ribbon-toggle" style={{ opacity: activeItem.zoomProgressivize ? 1 : 0.4, backgroundColor: activeItem.editZoomProgressivize ? "#aedef8" : "" }} onClick={this.editZoomProgressivize}>Edit</div>
@@ -1352,6 +1352,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                                 </div>
                                 <Tooltip title={<><div className="dash-tooltip">{"Last frame"}</div></>}><div className="ribbon-property">{NumCast(targetDoc.lastFrame)}</div></Tooltip>
                             </div>
+                            <div className="ribbon-frameList">
+                                <div className="frameList-header">
+
+                                </div>
+                                <div className="frameList-item">
+                                    {this.frameList}
+                                </div>
+                            </div>
                             <div className="ribbon-toggle" style={{ height: 20, backgroundColor: "#AEDDF8" }} onClick={() => console.log(" TODO: play frames")}>Play</div>
                         </div>
                     </div>
@@ -1454,7 +1462,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         activeItem.scrollProgressivize = !activeItem.scrollProgressivize;
         const targetDoc: Doc = this.targetDoc;
         targetDoc.scrollProgressivize = !targetDoc.scrollProgressivize;
-        // CollectionFreeFormDocumentView.setupScroll(targetDoc, NumCast(targetDoc._currentFrame));
+        CollectionFreeFormDocumentView.setupScroll(targetDoc, NumCast(targetDoc._currentFrame));
         if (targetDoc.editScrollProgressivize) {
             targetDoc.editScrollProgressivize = false;
             targetDoc._currentFrame = 0;
@@ -1715,6 +1723,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         );
     }
 
+    @computed get frameList() {
+        const activeItem: Doc = this.activeItem;
+        const targetDoc: Doc = this.targetDoc;
+        const frameList: number[] = [];
+        frameList.length = NumCast(targetDoc.lastFrame);
+        const frameItems = frameList.map((value) => {
+            <div className="frameItem">
+
+            </div>
+        })
+        return <div>
+            {frameItems}
+        </div>;
+    }
+
     @computed get playButtonFrames() {
         const targetDoc: Doc = this.targetDoc;
         return (
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index b1eac5832..367bc6533 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -71,10 +71,10 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton;
     }
 
-    embedHeight = () => 97;
+    embedHeight = (): number => 97;
     // embedWidth = () => this.props.PanelWidth();
     // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight);
-    embedWidth = () => this.props.PanelWidth() - 30;
+    embedWidth = (): number => this.props.PanelWidth() - 30;
     /**
      * The function that is responsible for rendering a preview or not for this
      * presentation element.
@@ -155,7 +155,14 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     }
 
     headerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    stopDrag = (e: PointerEvent) => {
+        console.log('stop drag')
         const activeItem = this.rootDoc;
+        activeItem.dragging = false;
         e.stopPropagation();
         e.preventDefault();
     }
@@ -184,7 +191,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
 
     onPointerMove = (e: PointerEvent) => {
         const slide = this._itemRef.current!;
-        const rect = slide!.getBoundingClientRect();
+        const rect = slide?.getBoundingClientRect();
         let y = e.clientY - rect.top;  //y position within the element.
         let height = slide.clientHeight;
         let halfLine = height / 2;
@@ -201,9 +208,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     }
 
     onPointerLeave = (e: any) => {
-        console.log('pointerLeave');
-        this._itemRef.current!.style.borderTop = "0px"
-        this._itemRef.current!.style.borderBottom = "0px"
+        this._itemRef.current!.style.borderTop = "0px";
+        this._itemRef.current!.style.borderBottom = "0px";
         document.removeEventListener("pointermove", this.onPointerMove);
     }
 
@@ -240,6 +246,10 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     @computed get mainItem() {
         const isSelected: boolean = PresBox.Instance._selectedArray.includes(this.rootDoc);
         const isDragging: boolean = BoolCast(this.rootDoc.dragging);
+        const toolbarWidth: number = PresBox.Instance.toolbarWidth;
+        const showMore: boolean = PresBox.Instance.toolbarWidth >= 300;
+        const targetDoc: Doc = Cast(this.rootDoc.presentationTargetDoc, Doc, null);
+        const activeItem: Doc = this.rootDoc;
         return (
             <div className={`presItem-container`} key={this.props.Document[Id] + this.indexInPres}
                 ref={this._itemRef}
@@ -260,7 +270,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     }
                 }}
                 onDoubleClick={e => {
-                    console.log('double click to open');
                     this.toggleProperties();
                     this.props.focus(this.rootDoc);
                     this.clearArrays();
@@ -274,7 +283,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     {`${this.indexInPres + 1}.`}
                 </div>
                 <div ref={this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}>
-                    <div className="presItem-name" style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}>
+                    <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85 }}>
                         {isSelected ? <EditableView
                             ref={this._titleRef}
                             contents={this.rootDoc.title}
@@ -287,10 +296,21 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                             this.rootDoc.title
                         }
                     </div>
-                    <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.transition}</div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.duration}</div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{"Presentation pin view"}</div></>}><div className="presItem-time" style={{ fontWeight: 700, display: this.rootDoc.presPinView && PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>V</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"
+                                onClick={e => {
+                                    const x = targetDoc._panX;
+                                    const y = targetDoc._panY;
+                                    const scale = targetDoc._viewScale;
+                                    activeItem.presPinViewX = x;
+                                    activeItem.presPinViewY = y;
+                                    activeItem.presPinViewScale = scale;
+                                }}
+                                style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V</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>
-- 
cgit v1.2.3-70-g09d2


From 6762d82992732eb14d7d2313d92cf0ae3a30f5a9 Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Wed, 14 Oct 2020 02:52:32 +0800
Subject: remove console.log

---
 src/client/views/presentationview/PresElementBox.tsx | 1 -
 1 file changed, 1 deletion(-)

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

diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 367bc6533..9052967e5 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -160,7 +160,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     }
 
     stopDrag = (e: PointerEvent) => {
-        console.log('stop drag')
         const activeItem = this.rootDoc;
         activeItem.dragging = false;
         e.stopPropagation();
-- 
cgit v1.2.3-70-g09d2


From 94a08418663fbb327542f7be9e3909f383c8bc33 Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Wed, 14 Oct 2020 11:48:16 +0800
Subject: Fixed bug showing up

cannot read ... of rect...
---
 src/client/views/presentationview/PresElementBox.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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

diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 9052967e5..adaabec8a 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -190,11 +190,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
 
     onPointerMove = (e: PointerEvent) => {
         const slide = this._itemRef.current!;
-        const rect = slide?.getBoundingClientRect();
-        let y = e.clientY - rect.top;  //y position within the element.
-        let height = slide.clientHeight;
-        let halfLine = height / 2;
-        if (DragManager.docsBeingDragged.length > 1) {
+        if (slide && DragManager.docsBeingDragged.length > 1) {
+            const rect = slide.getBoundingClientRect();
+            let y = e.clientY - rect.top;  //y position within the element.
+            let height = slide.clientHeight;
+            let halfLine = height / 2;
             if (y <= halfLine) {
                 slide.style.borderTop = "solid 2px #5B9FDD";
                 slide.style.borderBottom = "0px";
-- 
cgit v1.2.3-70-g09d2


From 22b53b6070d777ee992e32e16cccebb0c104adf5 Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Thu, 15 Oct 2020 13:26:04 +0800
Subject: pin with view on scrollable documents

and some undo bug fixes
---
 src/client/views/collections/CollectionMenu.tsx    | 41 ++++++++++++++--------
 src/client/views/nodes/PresBox.tsx                 | 32 ++++++++++-------
 .../views/presentationview/PresElementBox.tsx      | 28 ++++++++++-----
 3 files changed, 64 insertions(+), 37 deletions(-)

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

diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index bf6067978..d9924c299 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -394,28 +394,39 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
         </Tooltip>;
     }
 
+    @undoBatch
+    @action
+    pinWithView = (targetDoc: Opt<Doc>) => {
+        if (targetDoc) {
+            TabDocView.PinDoc(targetDoc, false);
+            const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1];
+            if (targetDoc.type === DocumentType.PDF) {
+                const scroll = targetDoc._scrollTop;
+                activeDoc.presPinView = true;
+                activeDoc.presPinViewScroll = scroll;
+            } else {
+                const x = targetDoc._panX;
+                const y = targetDoc._panY;
+                const scale = targetDoc._viewScale;
+                activeDoc.presPinView = true;
+                activeDoc.presPinViewX = x;
+                activeDoc.presPinViewY = y;
+                activeDoc.presPinViewScale = scale;
+            }
+        }
+    }
+
     @computed
     get pinWithViewButton() {
         const presPinWithViewIcon = <img src={`/assets/pinWithView.png`} style={{ margin: "auto", width: 19 }} />;
         const targetDoc = this.selectedDoc;
-        return (!targetDoc || (targetDoc._viewType !== CollectionViewType.Freeform && targetDoc.type !== DocumentType.IMG)) ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin to presentation trail with current view"}</div></>} placement="top">
+        {/* return (!targetDoc || (targetDoc._viewType !== CollectionViewType.Freeform && targetDoc.type !== DocumentType.IMG)) ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin to presentation trail with current view"}</div></>} placement="top"> */ }
+        return (targetDoc && (targetDoc._viewType === CollectionViewType.Freeform || targetDoc.type === DocumentType.IMG || targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF)) ? <Tooltip title={<><div className="dash-tooltip">{"Pin to presentation trail with current view"}</div></>} placement="top">
             <button className="antimodeMenu-button" style={{ borderRight: "1px solid gray", borderLeft: "1px solid gray", justifyContent: 'center' }}
-                onClick={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;
-                    }
-                }}>
+                onClick={() => this.pinWithView(targetDoc)}>
                 {presPinWithViewIcon}
             </button>
-        </Tooltip>;
+        </Tooltip> : (null);
     }
 
 
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index dd7eba0b2..36705ecba 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -299,10 +299,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             // if targetDoc is not displayed but one of its aliases is, then we need to modify that alias, not the original target
             const bestTarget = DocumentManager.Instance.getFirstDocumentView(targetDoc)?.props.Document;
             bestTarget && runInAction(() => {
-                bestTarget._viewTransition = activeItem.presTransition ? `transform ${activeItem.presTransition}ms` : 'all 0.5s';
-                bestTarget._panX = activeItem.presPinViewX;
-                bestTarget._panY = activeItem.presPinViewY;
-                bestTarget._viewScale = activeItem.presPinViewScale;
+                if (bestTarget.type === DocumentType.PDF) {
+                    bestTarget._scrollY = activeItem.presPinViewScroll;
+                } else {
+                    bestTarget._viewTransition = activeItem.presTransition ? `transform ${activeItem.presTransition}ms` : 'all 0.5s';
+                    bestTarget._panX = activeItem.presPinViewX;
+                    bestTarget._panY = activeItem.presPinViewY;
+                    bestTarget._viewScale = activeItem.presPinViewScale;
+                }
             });
             //setTimeout(() => targetDoc._viewTransition = undefined, 1010);
         }
@@ -451,6 +455,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             srcContext.presPathView = this.pathBoolean;
         }
     }
+
+    @undoBatch
     @action toggleExpandMode = () => {
         this.rootDoc.expandBoolean = !this.rootDoc.expandBoolean;
         this.childDocs.forEach((doc) => {
@@ -890,9 +896,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <div className="ribbon-box">
                         Visibility {"&"} Duration
                         <div className="ribbon-doubleButton">
-                            <Tooltip title={<><div className="dash-tooltip">{"Hide before presented"}</div></>}><div className={`ribbon-toggle ${activeItem.presHideTillShownButton ? "active" : ""}`} onClick={() => activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton}>Hide before</div></Tooltip>
-                            <Tooltip title={<><div className="dash-tooltip">{"Hide after presented"}</div></>}><div className={`ribbon-toggle ${activeItem.presHideAfterButton ? "active" : ""}`} onClick={() => activeItem.presHideAfterButton = !activeItem.presHideAfterButton}>Hide after</div></Tooltip>
-                            <Tooltip title={<><div className="dash-tooltip">{"Open document in a new tab"}</div></>}><div className="ribbon-toggle" style={{ backgroundColor: activeItem.openDocument ? "#aedef8" : "" }} onClick={() => activeItem.openDocument = !activeItem.openDocument}>Open</div></Tooltip>
+                            <Tooltip title={<><div className="dash-tooltip">{"Hide before presented"}</div></>}><div className={`ribbon-toggle ${activeItem.presHideTillShownButton ? "active" : ""}`} onClick={undoBatch(() => activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton)}>Hide before</div></Tooltip>
+                            <Tooltip title={<><div className="dash-tooltip">{"Hide after presented"}</div></>}><div className={`ribbon-toggle ${activeItem.presHideAfterButton ? "active" : ""}`} onClick={undoBatch(() => activeItem.presHideAfterButton = !activeItem.presHideAfterButton)}>Hide after</div></Tooltip>
+                            <Tooltip title={<><div className="dash-tooltip">{"Open document in a new tab"}</div></>}><div className="ribbon-toggle" style={{ backgroundColor: activeItem.openDocument ? "#aedef8" : "" }} onClick={undoBatch(() => activeItem.openDocument = !activeItem.openDocument)}>Open</div></Tooltip>
                         </div>
                         <div className="ribbon-doubleButton" >
                             <div className="presBox-subheading">Slide Duration</div>
@@ -924,12 +930,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                             {effect}
                             <FontAwesomeIcon className='presBox-dropdownIcon' style={{ gridColumn: 2, color: this.openEffectDropdown ? '#5B9FDD' : 'black' }} icon={"angle-down"} />
                             <div className={'presBox-dropdownOptions'} id={'presBoxMovementDropdown'} style={{ display: this.openEffectDropdown ? "grid" : "none" }} onPointerDown={e => e.stopPropagation()}>
-                                <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={() => targetDoc.presEffect = 'None'}>None</div>
-                                <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Fade'}>Fade In</div>
-                                <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Flip'}>Flip</div>
-                                <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Rotate'}>Rotate</div>
-                                <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Bounce'}>Bounce</div>
-                                <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Roll'}>Roll</div>
+                                <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'None')}>None</div>
+                                <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Fade')}>Fade In</div>
+                                <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Flip')}>Flip</div>
+                                <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Rotate')}>Rotate</div>
+                                <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Bounce')}>Bounce</div>
+                                <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Roll')}>Roll</div>
                             </div>
                         </div>
                         <div className="ribbon-doubleButton" style={{ display: effect === 'None' ? "none" : "inline-flex" }}>
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index adaabec8a..9a6e4313d 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -242,6 +242,23 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         PresBox.Instance._dragArray.push(this._dragRef.current!);
     }
 
+    @undoBatch
+    @action
+    pinWithView = (targetDoc: Doc, activeItem: Doc) => {
+        console.log(targetDoc.type);
+        if (targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF) {
+            const scroll = targetDoc._scrollTop;
+            activeItem.presPinViewScroll = scroll;
+        } else {
+            const x = targetDoc._panX;
+            const y = targetDoc._panY;
+            const scale = targetDoc._viewScale;
+            activeItem.presPinViewX = x;
+            activeItem.presPinViewY = y;
+            activeItem.presPinViewScale = scale;
+        }
+    }
+
     @computed get mainItem() {
         const isSelected: boolean = PresBox.Instance._selectedArray.includes(this.rootDoc);
         const isDragging: boolean = BoolCast(this.rootDoc.dragging);
@@ -300,14 +317,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     <div className={"presItem-slideButtons"}>
                         <Tooltip title={<><div className="dash-tooltip">{"Update view"}</div></>}>
                             <div className="slideButton"
-                                onClick={e => {
-                                    const x = targetDoc._panX;
-                                    const y = targetDoc._panY;
-                                    const scale = targetDoc._viewScale;
-                                    activeItem.presPinViewX = x;
-                                    activeItem.presPinViewY = y;
-                                    activeItem.presPinViewScale = scale;
-                                }}
+                                onClick={() => this.pinWithView(targetDoc, activeItem)}
                                 style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V</div>
                         </Tooltip>
                         <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"slideButton"} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
@@ -321,7 +331,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     </div>
                     {this.renderEmbeddedInline}
                 </div>
-            </div>);
+            </div >);
     }
 
     render() {
-- 
cgit v1.2.3-70-g09d2

