bugs fixes from other comp

1 files changed, 143 insertions, 146 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 98ea8998d..3448d2683 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -15,7 +15,7 @@ import { ScriptField } from "../../../../fields/ScriptField";
 import { BoolCast, Cast, FieldValue, NumCast, ScriptCast, StrCast } from "../../../../fields/Types";
 import { TraceMobx } from "../../../../fields/util";
 import { GestureUtils } from "../../../../pen-gestures/GestureUtils";
-import { aggregateBounds, intersectRect, returnFalse, returnOne, returnZero, Utils } from "../../../../Utils";
+import { aggregateBounds, intersectRect, returnFalse, returnOne, returnZero, Utils, setupMoveUpEvents } from "../../../../Utils";
 import { CognitiveServices } from "../../../cognitive_services/CognitiveServices";
 import { DocServer } from "../../../DocServer";
 import { Docs, DocUtils } from "../../../documents/Documents";
@@ -1515,70 +1515,66 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
     // }
 
 
-    //Adds event listener so knows pointer is down and moving
-    onPointerMid = (e: React.PointerEvent): void => {
-        e.stopPropagation();
-        e.preventDefault();
-        this._isDragging = 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
+    // 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));
+    // }
 
     //Adds event listener so knows pointer is down and moving
-    onPointerBR = (e: React.PointerEvent): void => {
+    onPointerDown = (e: React.PointerEvent): void => {
         e.stopPropagation();
         e.preventDefault();
-        this._isDraggingBR = true;
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.addEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        document.addEventListener("pointerup", this.onPointerUp);
+        const corner = document.elementFromPoint(e.clientX, e.clientY)?.id;
+        if (corner) this._drag = corner;
+        const rect = document.getElementById('resizable');
+        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
+    // 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
+    // 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);
-    }
+    // //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();
         e.preventDefault();
-        this._isDraggingTL = false;
-        this._isDraggingTR = false;
-        this._isDraggingBL = false;
-        this._isDraggingBR = false;
-        this._isDragging = false;
+        this._drag = "";
         document.removeEventListener("pointermove", this.onPointerMove);
         document.removeEventListener("pointerup", this.onPointerUp);
     }
@@ -1590,105 +1586,106 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
     //     const newPanY = Math.min((1 - 1 / scale) * this.nativeHeight), Math.max(0, panY));
     // }
 
-    @observable private _movementRight: number = 0;
+    @observable private _drag: string = '';
 
     //Adjusts the value in NodeStore
-    onPointerMove = (e: PointerEvent): void => {
+    @action
+    onPointerMove = (e: PointerEvent) => {
         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();
         const doc = document.getElementById('resizable');
-        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);
+        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;
+        };
+        if (doc) {
             let height = doc.offsetHeight;
             let width = doc.offsetWidth;
             let top = doc.offsetTop;
             let left = doc.offsetLeft;
-            // const newHeightB = height += (e.movementY * NumCast(targetDoc._viewScale));
-            // const newHeightT = height -= (e.movementY * NumCast(targetDoc._viewScale));
-            // const newWidthR = width += (e.movementX * NumCast(targetDoc._viewScale));
-            // const newWidthL = width -= (e.movementX * NumCast(targetDoc._viewScale));
-            // const newLeft = left += (e.movementX * NumCast(targetDoc._viewScale));
-            // const newTop = top += (e.movementY * NumCast(targetDoc._viewScale));
-            // 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';
-            // }
-            //Bottom right
-            if (this._isDraggingBR) {
-                const newHeight = height += (e.movementY * scale);
-                doc.style.height = newHeight + 'px';
-                const newWidth = width += (e.movementX * scale);
-                doc.style.width = newWidth + 'px';
-                // Bottom left
-            } else if (this._isDraggingBL) {
-                const newHeight = height += (e.movementY * scale);
-                doc.style.height = newHeight + 'px';
-                const newWidth = width -= (e.movementX * scale);
-                doc.style.width = newWidth + 'px';
-                const newLeft = left += (e.movementX * scale);
-                doc.style.left = newLeft + 'px';
-                // Top right
-            } else if (this._isDraggingTR) {
-                const newWidth = width += (e.movementX * scale);
-                doc.style.width = newWidth + 'px';
-                const newHeight = height -= (e.movementY * scale);
-                doc.style.height = newHeight + 'px';
-                const newTop = top += (e.movementY * scale);
-                doc.style.top = newTop + 'px';
-                // Top left
-            } else if (this._isDraggingTL) {
-                const newWidth = width -= (e.movementX * scale);
-                doc.style.width = newWidth + 'px';
-                const newHeight = height -= (e.movementY * scale);
-                doc.style.height = newHeight + 'px';
-                const newTop = top += (e.movementY * scale);
-                doc.style.top = newTop + 'px';
-                const newLeft = left += (e.movementX * scale);
-                doc.style.left = newLeft + 'px';
-            } else if (this._isDragging) {
-                const newTop = top += (e.movementY * scale);
-                doc.style.top = newTop + 'px';
-                const newLeft = left += (e.movementX * scale);
-                doc.style.left = newLeft + 'px';
+            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';
+                    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';
+                    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';
+                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';
+                case "resizable":
+                    doc.style.top = toNumber(e.clientY - rect.x, top) + 'px';
+                    doc.style.left = toNumber(e.clientX - rect.y, left) + '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);
+            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
@@ -1697,7 +1694,7 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
         if (x && x.length >= NumCast(doc.currentFrame) + 1) {
             x[NumCast(doc.currentFrame)] = val;
             list = x;
-        } else {
+        } else if (doc && x) {
             x.length = NumCast(doc.currentFrame) + 1;
             x[NumCast(doc.currentFrame)] = val;
             list = x;
@@ -1709,18 +1706,18 @@ 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 = PresBox.Instance.checkList(activeItem, activeItem["viewfinder-left-indexed"]);
-            const vfWidth: number = PresBox.Instance.checkList(activeItem, activeItem["viewfinder-width-indexed"]);
-            const vfTop: number = PresBox.Instance.checkList(activeItem, activeItem["viewfinder-top-indexed"]);
-            const vfHeight: number = PresBox.Instance.checkList(activeItem, activeItem["viewfinder-height-indexed"]);
+            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"]);
             return (
                 <>
-                    {!activeItem.editZoomProgressivize ? (null) : <div id="resizable" className="resizable" onPointerDown={this.onPointerMid} style={{ width: vfWidth, height: vfHeight, top: vfTop, left: vfLeft, position: 'absolute' }}>
+                    {!activeItem.editZoomProgressivize ? (null) : <div id="resizable" className="resizable" onPointerDown={this.onPointerDown} style={{ width: vfWidth, height: vfHeight, top: vfTop, left: vfLeft, position: 'absolute' }}>
                         <div className='resizers'>
-                            <div id="resizer-tl" className='resizer top-left' onPointerDown={this.onPointerTL}></div>
-                            <div id="resizer-tr" className='resizer top-right' onPointerDown={this.onPointerTR}></div>
-                            <div id="resizer-bl" className='resizer bottom-left' onPointerDown={this.onPointerBL}></div>
-                            <div id="resizer-br" className='resizer bottom-right' onPointerDown={this.onPointerBR}></div>
+                            <div id="resizer-tl" className='resizer top-left' onPointerDown={this.onPointerDown}></div>
+                            <div id="resizer-tr" className='resizer top-right' onPointerDown={this.onPointerDown}></div>
+                            <div id="resizer-bl" className='resizer bottom-left' onPointerDown={this.onPointerDown}></div>
+                            <div id="resizer-br" className='resizer bottom-right' onPointerDown={this.onPointerDown}></div>
                         </div>
                     </div>}
                 </>