update view (as button), doc.dragging q?

3 files changed, 61 insertions, 18 deletions

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>