From c6da9a2800037a951ea5070b4a77663401c4d00e Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Fri, 26 Jul 2019 18:52:30 -0400
Subject: resizable pres view

---
 .../views/presentationview/PresentationElement.tsx |  22 -----
 .../views/presentationview/PresentationView.scss   |   2 +-
 .../views/presentationview/PresentationView.tsx    | 109 +++++++++++++++------
 3 files changed, 80 insertions(+), 53 deletions(-)

(limited to 'src')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 3297acee9..fdddf0e41 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -800,36 +800,14 @@ export default class PresentationElement extends React.Component<PresentationEle
         // </ul >;
         let propDocWidth = NumCast(this.props.document.nativeWidth);
         let propDocHeight = NumCast(this.props.document.nativeHeight);
-        let previewWidth = NumCast(this.props.document.schemaPreviewWidth);
         let scale = () => {
             let newScale = 175 / NumCast(this.props.document.nativeWidth, 175);
             console.log("New Scale: ", newScale);
             return newScale;
         };
         return (
-            // <DocumentView
-            //     Document={this.props.document}
-            //     ContainingCollectionView={undefined}
-            //     ScreenToLocalTransform={Transform.Identity}
-            //     renderDepth={7}
-            //     ContentScaling={() => 1}
-            //     PanelWidth={() => 400}
-            //     PanelHeight={() => 400}
-            //     focus={(doc: Doc, willZoom: boolean) => { }}
-            //     selectOnLoad={false}
-            //     parentActive={returnFalse}
-            //     whenActiveChanged={(isActive: boolean) => { }}
-            //     bringToFront={(doc: Doc) => { }}
-            //     addDocTab={(doc: Doc, dataDoc: Doc | undefined, where: string) => { }}
-            //     zoomToScale={(scale: number) => { }}
-            //     getScale={() => 3.1415}
-            // />
-
             <div style={{
-                // overflowY: "scroll",
                 position: "relative",
-                // right: "45%",
-                // maxHeight: 250
                 height: propDocHeight === 0 ? 100 : propDocHeight * scale(),
                 width: propDocWidth === 0 ? "auto" : propDocWidth * scale(),
                 marginTop: 15
diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
index 93cf0b365..5769a1a0a 100644
--- a/src/client/views/presentationview/PresentationView.scss
+++ b/src/client/views/presentationview/PresentationView.scss
@@ -1,7 +1,7 @@
 .presentationView-cont {
     position: absolute;
     background: white;
-    z-index: 1;
+    z-index: 2;
     box-shadow: #AAAAAA .2vw .2vw .4vw;
     right: 0;
     top: 0;
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 718af1bf2..273fa5e5f 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -63,6 +63,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
     //Variable that holds reference to title input, so that new presentations get titles assigned.
     @observable titleInputElement: HTMLInputElement | undefined;
     @observable PresTitleChangeOpen: boolean = false;
+    @observable PresViewWidth: number | undefined;
 
     //initilize class variables
     constructor(props: PresViewProps) {
@@ -81,6 +82,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     //The first lifecycle function that gets called to set up the current presentation.
     async componentWillMount() {
+
         this.props.Documents.forEach(async (doc, index: number) => {
 
             //For each presentation received from mainContainer, a mapping is created.
@@ -806,43 +808,90 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.presElementsMappings.set(keyDoc, elem);
     }
 
+    //_downsize = 0;
+    onPointerDown = (e: React.PointerEvent) => {
+        //this._downsize = e.clientX;
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        document.addEventListener("pointermove", this.onPointerMove);
+        document.addEventListener("pointerup", this.onPointerUp);
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    @action
+    onPointerMove = (e: PointerEvent) => {
+
+        this.curPresentation.width = Math.max(window.innerWidth - e.clientX, 255);
+    }
+    @action
+    onPointerUp = (e: PointerEvent) => {
+        //this.isPointerDown = false;
+        // if (Math.abs(e.clientX - this._downsize) < 4) {
+        //     if (this.flyoutWidth < 5) this.flyoutWidth = 250;
+        //     else this.flyoutWidth = 0;
+        // }
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+    }
+
+    togglePresView = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        let width = NumCast(this.curPresentation.width);
+        if (width === 0) {
+            this.curPresentation.width = 255;
+        } else {
+            this.curPresentation.width = 0;
+        }
+    }
+
     render() {
 
         let width = NumCast(this.curPresentation.width);
+        this.PresViewWidth = width;
+
 
         return (
-            <div className="presentationView-cont" style={{ width: width, overflowY: "scroll", overflowX: "hidden" }}>
-                <div className="presentationView-heading">
-                    {this.renderSelectOrPresSelection()}
-                    <button title="Close Presentation" className='presentation-icon' onClick={this.closePresentation}><FontAwesomeIcon icon={"times"} /></button>
-                    <button title="Add Presentation" className="presentation-icon" style={{ marginRight: 10 }} onClick={() => {
-                        runInAction(() => { if (this.PresTitleChangeOpen) { this.PresTitleChangeOpen = false; } });
-                        runInAction(() => this.PresTitleInputOpen ? this.PresTitleInputOpen = false : this.PresTitleInputOpen = true);
-                    }}><FontAwesomeIcon icon={"plus"} /></button>
-                    <button title="Remove Presentation" className='presentation-icon' style={{ marginRight: 10 }} onClick={this.removePresentation}><FontAwesomeIcon icon={"minus"} /></button>
-                    <button title="Change Presentation Title" className="presentation-icon" style={{ marginRight: 10 }} onClick={() => {
-                        runInAction(() => { if (this.PresTitleInputOpen) { this.PresTitleInputOpen = false; } });
-                        runInAction(() => this.PresTitleChangeOpen ? this.PresTitleChangeOpen = false : this.PresTitleChangeOpen = true);
-                    }}><FontAwesomeIcon icon={"edit"} /></button>
+            <div>
+                <div className="presentationView-cont" style={{ width: width, overflowY: "scroll", overflowX: "hidden" }}>
+                    <div className="presentationView-heading">
+                        {this.renderSelectOrPresSelection()}
+                        <button title="Close Presentation" className='presentation-icon' onClick={this.closePresentation}><FontAwesomeIcon icon={"times"} /></button>
+                        <button title="Add Presentation" className="presentation-icon" style={{ marginRight: 10 }} onClick={() => {
+                            runInAction(() => { if (this.PresTitleChangeOpen) { this.PresTitleChangeOpen = false; } });
+                            runInAction(() => this.PresTitleInputOpen ? this.PresTitleInputOpen = false : this.PresTitleInputOpen = true);
+                        }}><FontAwesomeIcon icon={"plus"} /></button>
+                        <button title="Remove Presentation" className='presentation-icon' style={{ marginRight: 10 }} onClick={this.removePresentation}><FontAwesomeIcon icon={"minus"} /></button>
+                        <button title="Change Presentation Title" className="presentation-icon" style={{ marginRight: 10 }} onClick={() => {
+                            runInAction(() => { if (this.PresTitleInputOpen) { this.PresTitleInputOpen = false; } });
+                            runInAction(() => this.PresTitleChangeOpen ? this.PresTitleChangeOpen = false : this.PresTitleChangeOpen = true);
+                        }}><FontAwesomeIcon icon={"edit"} /></button>
+                    </div>
+                    <div className="presentation-buttons">
+                        <button title="Back" className="presentation-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
+                        {this.renderPlayPauseButton()}
+                        <button title="Next" className="presentation-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
+                    </div>
+
+                    <PresentationViewList
+                        mainDocument={this.curPresentation}
+                        deleteDocument={this.RemoveDoc}
+                        gotoDocument={this.gotoDocument}
+                        groupMappings={this.groupMappings}
+                        PresElementsMappings={this.presElementsMappings}
+                        setChildrenDocs={this.setChildrenDocs}
+                        presStatus={this.presStatus}
+                        presButtonBackUp={this.presButtonBackUp}
+                        presGroupBackUp={this.presGroupBackUp}
+                        removeDocByRef={this.removeDocByRef}
+                        clearElemMap={() => this.presElementsMappings.clear()}
+                    />
                 </div>
-                <div className="presentation-buttons">
-                    <button title="Back" className="presentation-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
-                    {this.renderPlayPauseButton()}
-                    <button title="Next" className="presentation-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
+                <div className="mainView-libraryHandle"
+                    style={{ cursor: "ew-resize", right: `${width - 10}px`, backgroundColor: "white" }}
+                    onPointerDown={this.onPointerDown} onClick={this.togglePresView}>
+                    <span title="library View Dragger" style={{ width: "100%", height: "100%", position: "absolute" }} />
                 </div>
-                <PresentationViewList
-                    mainDocument={this.curPresentation}
-                    deleteDocument={this.RemoveDoc}
-                    gotoDocument={this.gotoDocument}
-                    groupMappings={this.groupMappings}
-                    PresElementsMappings={this.presElementsMappings}
-                    setChildrenDocs={this.setChildrenDocs}
-                    presStatus={this.presStatus}
-                    presButtonBackUp={this.presButtonBackUp}
-                    presGroupBackUp={this.presGroupBackUp}
-                    removeDocByRef={this.removeDocByRef}
-                    clearElemMap={() => this.presElementsMappings.clear()}
-                />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2