fixed marker drag and drop in scrolled zoomed timeline

1 files changed, 6 insertions, 4 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 37fd42bc1..b63835b00 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -357,7 +357,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
         // determine x coordinate of drop and assign it to the documents being dragged  --- see internalDocDrop of collectionFreeFormView.tsx for how it's done when dropping onto a 2D freeform view
         const localPt = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y);
         const x = localPt[0] - docDragData.offset[0];
-        const timelinePt = this.toTimeline(x, this.props.PanelWidth());
+        const timelinePt = this.toTimeline(x + this._scroll, this.timelineContentWidth());
         docDragData.droppedDocuments.forEach(drop => {
             const anchorEnd = this.anchorEnd(drop);
             if (anchorEnd !== undefined) {
@@ -466,7 +466,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
         m: Doc,
         placed: { anchorStartTime: number; anchorEndTime: number; level: number }[]
     ) => {
-        const timelineContentWidth = this.props.PanelWidth();
+        const timelineContentWidth = this.timelineContentWidth();
         const x1 = this.anchorStart(m);
         const x2 = this.anchorEnd(
             m,
@@ -498,6 +498,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
     dictationHeightPercent = 50;
     dictationHeight = () => (this.props.PanelHeight() * (100 - this.dictationHeightPercent)) / 100;
     timelineContentHeight = () => (this.props.PanelHeight() * this.dictationHeightPercent) / 100;
+    timelineContentWidth = () => (this.props.PanelWidth() * this.zoomFactor - 4);  // subtract size of container border
     dictationScreenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.timelineContentHeight());
     isContentActive = () => this.props.isSelected() || this.props.isContentActive();
     currentTimecode = () => this.currentTime;
@@ -548,8 +549,9 @@ export class CollectionStackedTimeline extends CollectionSubView<
                     layoutDoc={this.layoutDoc}
                     clipStart={this.clipStart}
                     clipEnd={this.clipEnd}
-                    PanelHeight={this.timelineContentHeight}
                     zoomFactor={this.zoomFactor}
+                    PanelHeight={this.timelineContentHeight}
+                    PanelWidth={this.timelineContentWidth}
                 />
             </div>
         );
@@ -568,7 +570,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
     }
 
     render() {
-        const timelineContentWidth = this.props.PanelWidth() * this.zoomFactor - 4; // subtract size of container border
+        const timelineContentWidth = this.timelineContentWidth();
         const overlaps: {
             anchorStartTime: number;
             anchorEndTime: number;