fixed dragging stackedTimeline entries so that they appear during drag. fixed cursors for video/pdf/stackedTimeline to be a little more clear. fixed initial corner resize of pdfs. fixed videobox marquee drag when viewScale is undefined.

8 files changed, 32 insertions, 24 deletions

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index cec158d23..664933de0 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -357,10 +357,13 @@ export namespace DragManager {
         let rot = 0;
         const docsToDrag = dragData instanceof DocumentDragData ? dragData.draggedDocuments : dragData instanceof AnchorAnnoDragData ? [dragData.dragDocument] : [];
         const dragElements = eles.map(ele => {
+            let useDim = false;
             if (ele?.parentElement?.parentElement?.parentElement?.className === 'collectionFreeFormDocumentView-container') {
                 ele = ele.parentElement.parentElement.parentElement;
                 const rotStr = ele.style.transform.replace(/.*rotate\(([-0-9.]*)deg\).*/, '$1');
                 if (rotStr) rot = Number(rotStr);
+            } else {
+                useDim = true;
             }
             if (rot < 0) rot += 360;
             if (!ele.parentNode) dragDiv.appendChild(ele);
@@ -402,6 +405,8 @@ export namespace DragManager {
             xs.push(((0 - minx) / (maxx - minx)) * rect.width + rect.left);
             ys.push(((0 - miny) / (maxy - miny)) * rect.height + rect.top);
             scalings.push(scaling);
+            const width = useDim ? getComputedStyle(ele).width : '';
+            const height = useDim ? getComputedStyle(ele).height : '';
             Object.assign(dragElement.style, {
                 opacity: '0.7',
                 position: 'absolute',
@@ -414,8 +419,8 @@ export namespace DragManager {
                 borderRadius: getComputedStyle(ele).borderRadius,
                 zIndex: globalCssVariables.contextMenuZindex,
                 transformOrigin: '0 0',
-                width: '',
-                height: '',
+                width,
+                height,
                 transform: `translate(${xs[0]}px, ${ys[0]}px) rotate(${rot}deg) scale(${scaling})`,
             });
             dragLabel.style.transform = `translate(${xs[0]}px, ${ys[0] - 20}px)`;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 3589e014a..a79f727a7 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -476,6 +476,9 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                 if (e.ctrlKey && !Doc.NativeHeight(docView.props.Document)) docView.toggleNativeDimensions();
                 if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) {
                     const doc = Document(docView.rootDoc);
+                    if (doc.nativeHeightUnfrozen && !NumCast(doc.nativeHeight)) {
+                        doc._nativeHeight = (NumCast(doc._height) / NumCast(doc._width, 1)) * docView.nativeWidth;
+                    }
                     const nwidth = docView.nativeWidth;
                     const nheight = docView.nativeHeight;
                     let docheight = doc._height || 0;
diff --git a/src/client/views/MarqueeAnnotator.scss b/src/client/views/MarqueeAnnotator.scss
index c90d48a65..5c65f35e9 100644
--- a/src/client/views/MarqueeAnnotator.scss
+++ b/src/client/views/MarqueeAnnotator.scss
@@ -1,12 +1,11 @@
-
 .marqueeAnnotator-annotationBox {
     position: absolute;
     background-color: rgba(245, 230, 95, 0.616);
 }
 
-
 .marqueeAnnotator-dragBox {
-    position:absolute;
+    position: absolute;
     background-color: transparent;
-    opacity: 0.1;
-}
\ No newline at end of file
+    opacity: 0.2;
+    cursor: default;
+}
diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx
index f90ad8bb5..d9a989309 100644
--- a/src/client/views/MarqueeAnnotator.tsx
+++ b/src/client/views/MarqueeAnnotator.tsx
@@ -271,8 +271,7 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
                     width: `${this._width}px`,
                     height: `${this._height}px`,
                     border: `${this._width === 0 ? '' : '2px dashed black'}`,
-                    opacity: 0.2,
-                }}></div>
+                }}/>
         );
     }
 }
diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index aa8502c20..5a107d2ca 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -10,6 +10,7 @@
     border-width: 0 2px 0 2px;
 
     &:hover {
+        cursor: default;
         .collectionStackedTimeline-hover {
             display: block;
         }
@@ -109,14 +110,15 @@
             height: 100%;
             width: 10px;
             pointer-events: all;
-            cursor: ew-resize;
             z-index: 100;
         }
         .collectionStackedTimeline-resizer {
             right: 0;
+            cursor: e-resize;
         }
         .collectionStackedTimeline-left-resizer {
             left: 0;
+            cursor: w-resize;
         }
     }
 
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 2543624d3..b29abf083 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -244,6 +244,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                     if (!wasSelecting) {
                         this._markerStart = this._markerEnd = this.toTimeline(clientX - rect.x, rect.width);
                         wasSelecting = true;
+                        this._timelineWrapper && (this._timelineWrapper.style.cursor = 'ew-resize');
                     }
                     this._markerEnd = this.toTimeline(e.clientX - rect.x, rect.width);
                     return false;
@@ -260,6 +261,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                         setTimeout(() => DocumentManager.Instance.getDocumentView(anchor)?.select(false));
                     }
                     (!isClick || !wasSelecting) && (this._markerEnd = undefined);
+                    this._timelineWrapper && (this._timelineWrapper.style.cursor = '');
                 }),
                 (e, doubleTap) => {
                     if (e.button !== 2) {
@@ -561,7 +563,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
             <div ref={this.createDashEventsTarget} style={{ pointerEvents: SnappingManager.GetIsDragging() ? 'all' : undefined }}>
                 <div
                     className="collectionStackedTimeline-timelineContainer"
-                    style={{ width: this.props.PanelWidth() }}
+                    style={{ width: this.props.PanelWidth(), cursor: SnappingManager.GetIsDragging() ? 'grab' : '' }}
                     onWheel={e => e.stopPropagation()}
                     onScroll={this.setScroll}
                     onMouseMove={e => this.isContentActive() && this.onHover(e)}
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.scss b/src/client/views/collections/collectionFreeForm/MarqueeView.scss
index 41e4d6b6a..e0f5cbe5b 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.scss
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.scss
@@ -1,16 +1,14 @@
-
 .marqueeView {
     position: inherit;
-    top:0;
-    left:0;
-    width:100%;
-    height:100%;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
     border-radius: inherit;
     user-select: none;
 }
 
-
 .marqueeView:focus-within {
     overflow: hidden;
 }
@@ -22,13 +20,13 @@
     border-color: black;
     pointer-events: none;
     .marquee-legend {
-        bottom:-18px;
-        left:0;
+        bottom: -18px;
+        left: 0;
         position: absolute;
         font-size: 9;
-        white-space:nowrap;
+        white-space: nowrap;
     }
     .marquee-legend::after {
-        content: "Press <space> for lasso"
+        content: 'Press <space> for lasso';
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index bfb8c1528..5a3594ffc 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -551,7 +551,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         return !field ? (
             <div key="loading">Loading</div>
         ) : (
-            <div className="videoBox-contentContainer" key="container" style={{ mixBlendMode: 'multiply', cursor: this._fullScreen && !this._controlsVisible ? 'none' : 'pointer' }}>
+            <div className="videoBox-contentContainer" key="container" style={{ mixBlendMode: 'multiply', cursor: this._fullScreen && !this._controlsVisible ? 'none' : 'default' }}>
                 <div className={classname} ref={this.setContentRef} onPointerDown={e => this._fullScreen && e.stopPropagation()}>
                     {this._fullScreen && (
                         <div
@@ -855,7 +855,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     // starts marquee selection
     marqueeDown = (e: React.PointerEvent) => {
-        if (!e.altKey && e.button === 0 && this.layoutDoc._viewScale === 1 && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen].includes(Doc.ActiveTool)) {
+        if (!e.altKey && e.button === 0 && NumCast(this.layoutDoc._viewScale, 1) === 1 && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen].includes(Doc.ActiveTool)) {
             setupMoveUpEvents(
                 this,
                 e,