From 55460c79ddc12b44907979053058e04987f7e4c0 Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Thu, 13 Aug 2020 08:38:45 +0800
Subject: bug fixes, small UI changes, import in left sidebar

---
 .../views/collections/CollectionDockingView.tsx    |   1 +
 src/client/views/collections/CollectionMenu.tsx    |   6 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 188 ++++-----------------
 .../collectionFreeForm/PropertiesView.tsx          |   8 +-
 4 files changed, 45 insertions(+), 158 deletions(-)

(limited to 'src/client/views/collections')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 754d9257a..998e41bd2 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -731,6 +731,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                 if (!DocumentManager.Instance.getDocumentView(curPres)) {
                     CollectionDockingView.AddRightSplit(curPres);
                 }
+                DocumentManager.Instance.jumpToDocument(doc, false, undefined, Cast(doc.context, Doc, null));
             }
         }
     }
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 0377944b7..33617c7ba 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -622,7 +622,7 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
                     </div>
                 </Tooltip> : null}
                 {!this.isText && !this.props.isDoc ? <Tooltip key="num" title={<div className="dash-tooltip">Toggle View All</div>} placement="bottom">
-                    <div className="numKeyframe" style={{ backgroundColor: this.document.editing ? "#759c75" : "#c56565" }}
+                    <div className="numKeyframe" style={{ color: this.document.editing ? "white" : "black", backgroundColor: this.document.editing ? "#5B9FDD" : "#AEDDF8" }}
                         onClick={action(() => this.document.editing = !this.document.editing)} >
                         {NumCast(this.document.currentFrame)}
                     </div>
@@ -735,8 +735,10 @@ export class CollectionStackingViewChrome extends React.Component<CollectionMenu
     @action resetValue = () => { this._currentKey = this.pivotField; };
 
     render() {
+        const doctype = this.props.docView.Document.type;
+        const isPres: boolean = (doctype === DocumentType.PRES);
         return (
-            <div className="collectionStackingViewChrome-cont">
+            isPres ? (null) : <div className="collectionStackingViewChrome-cont">
                 <div className="collectionStackingViewChrome-pivotField-cont">
                     <div className="collectionStackingViewChrome-pivotField-label">
                         GROUP BY:
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 162713c3b..b15bda87d 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1496,82 +1496,22 @@ interface CollectionFreeFormViewPannableContentsProps {
 
 @observer
 class CollectionFreeFormViewPannableContents extends React.Component<CollectionFreeFormViewPannableContentsProps>{
-    private _isDraggingTL = false;
-    private _isDraggingTR = false;
-    private _isDraggingBR = false;
-    private _isDraggingBL = false;
-    private _isDragging = false;
-    // private _drag = "";
-
-    // onPointerDown = (e: React.PointerEvent): void => {
-    //     e.stopPropagation();
-    //     e.preventDefault();
-    //     if (e.button === 0) {
-    //         this._drag = e.currentTarget.id;
-    //         console.log(this._drag);
-    //     }
-    //     document.removeEventListener("pointermove", this.onPointerMove);
-    //     document.addEventListener("pointermove", this.onPointerMove);
-    //     document.removeEventListener("pointerup", this.onPointerUp);
-    //     document.addEventListener("pointerup", this.onPointerUp);
-    // }
-
-
-    // //Adds event listener so knows pointer is down and moving
-    // onPointerMid = (e: React.PointerEvent): void => {
-    //     e.stopPropagation();
-    //     e.preventDefault();
-    //     this._isDragging = true;
-    //     const dragData = new DragManager.DocumentDragData([]);
-    //     console.log(DragManager.StartDocumentDrag([], dragData, e.clientX, e.clientY));
-    // }
+    @observable private _drag: string = '';
 
     //Adds event listener so knows pointer is down and moving
     onPointerDown = (e: React.PointerEvent): void => {
         e.stopPropagation();
         e.preventDefault();
-        const corner = document.elementFromPoint(e.clientX, e.clientY)?.id;
-        if (corner) this._drag = corner;
-        const rect = document.getElementById('resizable');
+        const corner = e.target as any;
+        console.log(corner.id);
+        if (corner) this._drag = corner.id;
+        const rect = document.getElementById(this._drag);
         if (rect) {
             console.log(this._drag);
             setupMoveUpEvents(e.target, e, this.onPointerMove, (e) => { }, (e) => { });
         }
     }
 
-    // //Adds event listener so knows pointer is down and moving
-    // onPointerBL = (e: React.PointerEvent): void => {
-    //     e.stopPropagation();
-    //     e.preventDefault();
-    //     this._isDraggingBL = true;
-    //     document.removeEventListener("pointermove", this.onPointerMove);
-    //     document.addEventListener("pointermove", this.onPointerMove);
-    //     document.removeEventListener("pointerup", this.onPointerUp);
-    //     document.addEventListener("pointerup", this.onPointerUp);
-    // }
-
-    // //Adds event listener so knows pointer is down and moving
-    // onPointerTR = (e: React.PointerEvent): void => {
-    //     e.stopPropagation();
-    //     e.preventDefault();
-    //     this._isDraggingTR = true;
-    //     document.removeEventListener("pointermove", this.onPointerMove);
-    //     document.addEventListener("pointermove", this.onPointerMove);
-    //     document.removeEventListener("pointerup", this.onPointerUp);
-    //     document.addEventListener("pointerup", this.onPointerUp);
-    // }
-
-    // //Adds event listener so knows pointer is down and moving
-    // onPointerTL = (e: React.PointerEvent): void => {
-    //     e.stopPropagation();
-    //     e.preventDefault();
-    //     this._isDraggingTL = true;
-    //     document.removeEventListener("pointermove", this.onPointerMove);
-    //     document.addEventListener("pointermove", this.onPointerMove);
-    //     document.removeEventListener("pointerup", this.onPointerUp);
-    //     document.addEventListener("pointerup", this.onPointerUp);
-    // }
-
     //Removes all event listeners
     onPointerUp = (e: PointerEvent): void => {
         e.stopPropagation();
@@ -1581,26 +1521,13 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
         document.removeEventListener("pointerup", this.onPointerUp);
     }
 
-    // @action
-    // pan = (e: PointerEvent | React.Touch | { moveX: number, moveY: number }): void => {
-    //     const scale = this.props.getLocalTransform().inverse().Scale;
-    //     const newPanX = Math.min((1 - 1 / scale) * this.props.nativeWidth, Math.max(0, moveX));
-    //     const newPanY = Math.min((1 - 1 / scale) * this.nativeHeight), Math.max(0, panY));
-    // }
-
-    @observable private _drag: string = '';
-
     //Adjusts the value in NodeStore
     @action
     onPointerMove = (e: PointerEvent) => {
-        const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null);
-        const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
         const doc = document.getElementById('resizable');
-        const rect = (e.target as any).getBoundingClientRect();
-        const toNumber = (screen_delta: number, wh: number): number => {
-            // console.log(screen_delta);
-            // console.log(wh);
-            return screen_delta + wh;
+        const rect = doc!.getBoundingClientRect();
+        const toNumber = (original: number, delta: number): number => {
+            return original + (delta * this.props.zoomScaling());
         };
         if (doc) {
             let height = doc.offsetHeight;
@@ -1610,84 +1537,41 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
             switch (this._drag) {
                 case "": break;
                 case "resizer-br":
-                    doc.style.width = toNumber(e.clientX - rect.x, width) + 'px';
-                    doc.style.height = toNumber(e.clientY - rect.y, height) + 'px';
+                    doc.style.width = toNumber(width, e.movementX) + 'px';
+                    doc.style.height = toNumber(height, e.movementY) + 'px';
                     break;
                 case "resizer-bl":
-                    doc.style.width = toNumber(e.clientX - rect.x, width) + 'px';
-                    doc.style.height = toNumber(e.clientY - rect.y, height) + 'px';
-                    doc.style.left = toNumber(e.clientY - rect.y, height) + 'px';
+                    doc.style.width = toNumber(width, -e.movementX) + 'px';
+                    doc.style.height = toNumber(height, e.movementY) + 'px';
+                    doc.style.left = toNumber(left, e.movementX) + 'px';
                     break;
                 case "resizer-tr":
-                    doc.style.width = toNumber(e.clientX - rect.x, width) + 'px';
-                    doc.style.height = toNumber(e.clientY - rect.y, height) + 'px';
-                    doc.style.top = toNumber(e.clientY - rect.y, top) + 'px';
+                    doc.style.width = toNumber(width, -e.movementX) + 'px';
+                    doc.style.height = toNumber(height, -e.movementY) + 'px';
+                    doc.style.top = toNumber(top, e.movementY) + 'px';
                 case "resizer-tl":
-                    doc.style.width = toNumber(e.clientX - rect.x, width) + 'px';
-                    doc.style.height = toNumber(e.clientY - rect.y, height) + 'px';
-                    doc.style.top = toNumber(e.clientY - rect.x, top) + 'px';
-                    doc.style.left = toNumber(e.clientX - rect.y, left) + 'px';
+                    doc.style.width = toNumber(width, -e.movementX) + 'px';
+                    doc.style.height = toNumber(height, -e.movementY) + 'px';
+                    doc.style.top = toNumber(top, e.movementY) + 'px';
+                    doc.style.left = toNumber(left, e.movementX) + 'px';
                 case "resizable":
-                    doc.style.top = toNumber(e.clientY - rect.x, top) + 'px';
-                    doc.style.left = toNumber(e.clientX - rect.y, left) + 'px';
+                    doc.style.top = toNumber(top, e.movementY) + 'px';
+                    doc.style.left = toNumber(left, e.movementX) + 'px';
             }
-            this.updateList(targetDoc, activeItem["viewfinder-width-indexed"], width);
-            this.updateList(targetDoc, activeItem["viewfinder-height-indexed"], height);
-            this.updateList(targetDoc, activeItem["viewfinder-top-indexed"], top);
-            this.updateList(targetDoc, activeItem["viewfinder-left-indexed"], left);
+            this.updateAll(height, width, top, left);
             return false;
         }
         return true;
+    }
 
-
-        // const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null);
-        // const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
-        // const tagDocView = DocumentManager.Instance.getDocumentView(targetDoc);
-        // e.stopPropagation();
-        // e.preventDefault();
-        // if (doc && tagDocView) {
-
-        //     const scale = this.props.zoomScaling();
-        //     const scale2 = tagDocView.childScaling();
-        //     const scale3 = tagDocView.props.ScreenToLocalTransform().Scale;
-        //     const scale1 = NumCast(targetDoc._viewScale);
-        //     // const scale = this.props.zoomScaling();
-        //     console.log("_viewScale: " + scale1);
-        //     console.log("_StLT: " + scale3);
-        //     console.log("zoomScaling: " + scale);
-        //     console.log("movementX: " + e.movementX);
-        //     console.log("movementX * scale: " + e.movementX * scale);
-        //     let height = doc.offsetHeight;
-        //     let width = doc.offsetWidth;
-        //     let top = doc.offsetTop;
-        //     let left = doc.offsetLeft;
-        // switch (this._drag) {
-        //     case "": break;
-        //     case "resizer-br":
-        //         doc.style.height = newHeightB + 'px';
-        //         doc.style.width = newWidthR + 'px';
-        //         break;
-        //     case "resizer-bl":
-        //         doc.style.height = newHeightB + 'px';
-        //         doc.style.width = newWidthL + 'px';
-        //         doc.style.left = newLeft + 'px';
-        //         break;
-        //     case "resizer-tr":
-        //         doc.style.width = newWidthR + 'px';
-        //         doc.style.height = newHeightT + 'px';
-        //         doc.style.top = newTop + 'px';
-        //     case "resizer-tl":
-        //         doc.style.width = newWidthL + 'px';
-        //         doc.style.height = newHeightT + 'px';
-        //         doc.style.top = newTop + 'px';
-        //         doc.style.left = newLeft + 'px';
-        //     case "resizable":
-        //         doc.style.top = newTop + 'px';
-        //         doc.style.left = newLeft + 'px';
-        // }
-
-
-        // }
+    @action
+    updateAll = (width: number, height: number, top: number, left: number) => {
+        const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null);
+        const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+        this.updateList(targetDoc, activeItem["viewfinder-width-indexed"], width);
+        this.updateList(targetDoc, activeItem["viewfinder-height-indexed"], height);
+        this.updateList(targetDoc, activeItem["viewfinder-top-indexed"], top);
+        this.updateList(targetDoc, activeItem["viewfinder-left-indexed"], left);
     }
 
     @action
@@ -1708,10 +1592,10 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
         const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
         if (activeItem && activeItem.zoomProgressivize) {
-            const vfLeft: number = !activeItem ? 0 : PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-left-indexed"]);
-            const vfWidth: number = !activeItem ? 0 : PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-width-indexed"]);
-            const vfTop: number = !activeItem ? 0 : PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-top-indexed"]);
-            const vfHeight: number = !activeItem ? 0 : PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-height-indexed"]);
+            const vfLeft: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-left-indexed"]);
+            const vfWidth: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-width-indexed"]);
+            const vfTop: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-top-indexed"]);
+            const vfHeight: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-height-indexed"]);
             return (
                 <>
                     {!activeItem.editZoomProgressivize ? (null) : <div id="resizable" className="resizable" onPointerDown={this.onPointerDown} style={{ width: vfWidth, height: vfHeight, top: vfTop, left: vfLeft, position: 'absolute' }}>
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index c7edd67b3..a945ae2ba 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -963,8 +963,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             }
             if (this.isPres) {
                 const selectedItem: boolean = PresBox.Instance?._selectedArray.length > 0;
-                return <div className="propertiesView">
-                    <div className="propertiesView-title">
+                return <div className="propertiesView" style={{ width: this.props.width }}>
+                    <div className="propertiesView-title" style={{ width: this.props.width }}>
                         Presentation
                     </div>
                     <div className="propertiesView-name">
@@ -1028,7 +1028,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                             {PresBox.Instance.newDocumentDropdown}
                         </div> : null}
                     </div>
-                    <div className="propertiesView-sharing">
+                    {/* <div className="propertiesView-sharing">
                         <div className="propertiesView-sharing-title"
                             onPointerDown={() => runInAction(() => { this.openSharing = !this.openSharing; })}
                             style={{ backgroundColor: this.openSharing ? "black" : "" }}>
@@ -1040,7 +1040,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         {this.openSharing ? <div className="propertiesView-sharing-content">
                             {this.sharingTable}
                         </div> : null}
-                    </div>
+                    </div> */}
                 </div>;
             }
         }
-- 
cgit v1.2.3-70-g09d2