styled label markers on audio timeline to have border rounding. fixed setting drop location of documents on a clipped timeline. fixed clipping markers on timeline that do not overlap current clip. fixed escape aborting selecting a region on timeline to not restart on movement after esc.

2 files changed, 24 insertions, 15 deletions

diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index cd6e11bda..e6490a56c 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -106,7 +106,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
             if (!backColor) return undefined;
             return lightOrDark(backColor);
         case StyleProp.Hidden: return BoolCast(doc?._hidden);
-        case StyleProp.BorderRounding: return StrCast(doc?.[fieldKey + "borderRounding"], doc?._viewType === CollectionViewType.Pile ? "50%" : "");
+        case StyleProp.BorderRounding: return StrCast(doc?.[fieldKey + "borderRounding"], StrCast(doc?.borderRounding, doc?._viewType === CollectionViewType.Pile ? "50%" : ""));
         case StyleProp.TitleHeight: return 15;
         case StyleProp.BorderPath: return comicStyle() && props?.renderDepth ? { path: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0), fill: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0, .08), width: 3 } : { path: undefined, width: 0 };
         case StyleProp.JitterRotation: return comicStyle() ? random(-1, 1, NumCast(doc?.x), NumCast(doc?.y)) * ((props?.PanelWidth() || 0) > (props?.PanelHeight() || 0) ? 5 : 10) : 0;
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 8f8936997..fb0a0ec1d 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -185,13 +185,15 @@ export class CollectionStackedTimeline extends CollectionSubView<
                         this._markerStart = this._markerEnd = this.currentTime;
                         CollectionStackedTimeline.SelectingRegion = this;
                     } else {
+                        this._markerEnd = this.currentTime;
                         CollectionStackedTimeline.createAnchor(
                             this.rootDoc,
                             this.dataDoc,
                             this.props.fieldKey,
                             this.props.startTag,
                             this.props.endTag,
-                            this.currentTime
+                            this._markerStart,
+                            this._markerEnd
                         );
                         CollectionStackedTimeline.SelectingRegion = undefined;
                     }
@@ -218,10 +220,11 @@ export class CollectionStackedTimeline extends CollectionSubView<
     onPointerDownTimeline = (e: React.PointerEvent): void => {
         const rect = this._timeline?.getBoundingClientRect();
         const clientX = e.clientX;
+        const shiftKey = e.shiftKey;
         if (rect && this.props.isContentActive()) {
             const wasPlaying = this.props.playing();
             if (wasPlaying) this.props.Pause();
-            const wasSelecting = CollectionStackedTimeline.SelectingRegion === this;
+            var wasSelecting = CollectionStackedTimeline.SelectingRegion === this;
             setupMoveUpEvents(
                 this,
                 e,
@@ -235,6 +238,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
                             rect.width
                         );
                         CollectionStackedTimeline.SelectingRegion = this;
+                        wasSelecting = true;
                     }
                     this._markerEnd = this.toTimeline(e.clientX - rect.x, rect.width);
                     return false;
@@ -268,7 +272,12 @@ export class CollectionStackedTimeline extends CollectionSubView<
                 }),
                 (e, doubleTap) => {
                     this.props.select(false);
-                    e.shiftKey &&
+                    !wasPlaying && doubleTap && this.props.Play();
+                },
+                this.props.isSelected(true) || this.props.isContentActive(),
+                undefined,
+                () => {
+                    if (shiftKey) {
                         CollectionStackedTimeline.createAnchor(
                             this.rootDoc,
                             this.dataDoc,
@@ -277,12 +286,9 @@ export class CollectionStackedTimeline extends CollectionSubView<
                             this.props.endTag,
                             this.currentTime
                         );
-                    !wasPlaying && doubleTap && this.props.Play();
-                },
-                this.props.isSelected(true) || this.props.isContentActive(),
-                undefined,
-                () => {
-                    !wasPlaying && this.props.setTime(((clientX - rect.x) / rect.width) * this.clipDuration + this.props.clipStart);
+                    } else {
+                        !wasPlaying && this.props.setTime(((clientX - rect.x) / rect.width) * this.clipDuration + this.props.clipStart);
+                    }
                 }
             );
         }
@@ -354,11 +360,11 @@ 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 timelineContentWidth = this.props.PanelWidth();
+        const timelinePt = this.toTimeline(x, this.props.PanelWidth());
         for (let i = 0; i < docDragData.droppedDocuments.length; i++) {
             const d = Doc.GetProto(docDragData.droppedDocuments[i]);
-            d._timecodeToHide = x / timelineContentWidth * this.props.trimDuration() + NumCast(d._timecodeToHide) - NumCast(d._timecodeToShow);
-            d._timecodeToShow = x / timelineContentWidth * this.props.trimDuration();
+            d._timecodeToHide = timelinePt + NumCast(d._timecodeToHide) - NumCast(d._timecodeToShow);
+            d._timecodeToShow = timelinePt;
         }
 
         return true;
@@ -391,6 +397,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
             hideLinkButton: true,
             annotationOn: rootDoc,
             _timelineLabel: true,
+            borderRounding: anchorEndTime === undefined ? "100%" : undefined
         });
         Doc.GetProto(anchor)[startTag] = anchorStartTime;
         Doc.GetProto(anchor)[endTag] = anchorEndTime;
@@ -574,12 +581,12 @@ export class CollectionStackedTimeline extends CollectionSubView<
                 onPointerDown={(e) => isActive && this.onPointerDownTimeline(e)}
             >
                 {drawAnchors.map((d) => {
-
                     const start = this.anchorStart(d.anchor);
                     const end = this.anchorEnd(
                         d.anchor,
                         start + (10 / timelineContentWidth) * this.clipDuration
                     );
+                    if (end < this.props.clipStart || start > this.props.clipEnd) return (null);
                     const left = Math.max((start - this.props.clipStart) / this.clipDuration * timelineContentWidth, 0);
                     const top = (d.level / maxLevel) * this.timelineContentHeight();
                     const timespan = end - start;
@@ -748,16 +755,18 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps>
             const rect = (e.target as any).getBoundingClientRect();
             return this.props.toTimeline(e.clientX - rect.x, rect.width);
         };
-        const changeAnchor = (anchor: Doc, left: boolean, time: number) => {
+        const changeAnchor = (anchor: Doc, left: boolean, time: number | undefined) => {
             const timelineOnly =
                 Cast(anchor[this.props.startTag], "number", null) !== undefined;
             if (timelineOnly) {
+                if (!left && time !== undefined && time <= NumCast(anchor[this.props.startTag])) time = undefined;
                 Doc.SetInPlace(
                     anchor,
                     left ? this.props.startTag : this.props.endTag,
                     time,
                     true
                 );
+                if (!left) Doc.SetInPlace(anchor, "borderRounding", time !== undefined ? undefined : "100%", true);
             }
             else {
                 left