diff options
| author | bobzel <zzzman@gmail.com> | 2021-08-30 10:23:13 -0400 |
|---|---|---|
| committer | bobzel <zzzman@gmail.com> | 2021-08-30 10:23:13 -0400 |
| commit | 962a1a3f1ae9a55c5aea630d3252cecb740fa15c (patch) | |
| tree | 9f5f234786af112a475ea5be962e2e2907fb2dfe /src/client/views/collections/CollectionStackedTimeline.tsx | |
| parent | 584926578067f023b52c7754e65bc289f2a745e6 (diff) | |
| parent | 2d2e027f11253834a337680bbfd1ac549bb2a1f0 (diff) | |
merged with master - fixed warnings and errors.
Diffstat (limited to 'src/client/views/collections/CollectionStackedTimeline.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionStackedTimeline.tsx | 79 |
1 files changed, 42 insertions, 37 deletions
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index 51e05e278..d98d966d8 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -141,25 +141,26 @@ export class CollectionStackedTimeline extends CollectionSubView< } componentWillUnmount() { document.removeEventListener("keydown", this.keyEvents, true); - if (CollectionStackedTimeline.SelectingRegion === this) + if (CollectionStackedTimeline.SelectingRegion === this) { runInAction( () => (CollectionStackedTimeline.SelectingRegion = undefined) ); + } } anchorStart = (anchor: Doc) => - NumCast(anchor._timecodeToShow, NumCast(anchor[this.props.startTag])); + NumCast(anchor._timecodeToShow, NumCast(anchor[this.props.startTag])) anchorEnd = (anchor: Doc, val: any = null) => { const endVal = NumCast(anchor[this.props.endTag], val); return NumCast( anchor._timecodeToHide, endVal === undefined ? null : endVal ); - }; + } toTimeline = (screen_delta: number, width: number) => { return Math.max( this.trimStart, - Math.min(this.trimEnd, (screen_delta / width) * this.props.trimDuration + this.trimStart)) + Math.min(this.trimEnd, (screen_delta / width) * this.props.trimDuration + this.trimStart)); } rangeClickScript = () => CollectionStackedTimeline.RangeScript; @@ -190,7 +191,7 @@ export class CollectionStackedTimeline extends CollectionSubView< } } } - }; + } getLinkData(l: Doc) { let la1 = l.anchor1 as Doc; @@ -279,12 +280,12 @@ export class CollectionStackedTimeline extends CollectionSubView< this.props.setTime(((clientX - rect.x) / rect.width) * this.duration) : this.props.setTime(((clientX - rect.x) / rect.width) * this.props.trimDuration + this.trimStart) - ) + ); } ); } - }; + } @action trimLeft = (e: React.PointerEvent): void => { @@ -312,7 +313,7 @@ export class CollectionStackedTimeline extends CollectionSubView< } }) ); - }; + } @action trimRight = (e: React.PointerEvent): void => { @@ -340,7 +341,7 @@ export class CollectionStackedTimeline extends CollectionSubView< } }) ); - }; + } @undoBatch @action @@ -395,12 +396,13 @@ export class CollectionStackedTimeline extends CollectionSubView< } } return { select: true }; - }; + } @action clickAnchor = (anchorDoc: Doc, clientX: number) => { - if (anchorDoc.isLinkButton) + if (anchorDoc.isLinkButton) { LinkManager.FollowLink(undefined, anchorDoc, this.props, false); + } const seekTimeInSeconds = this.anchorStart(anchorDoc) - 0.25; const endTime = this.anchorEnd(anchorDoc); if ( @@ -415,14 +417,15 @@ export class CollectionStackedTimeline extends CollectionSubView< this.props.setTime(this.toTimeline(clientX - rect.x, rect.width)); } } else { - if (this.layoutDoc.autoPlayAnchors) + if (this.layoutDoc.autoPlayAnchors) { this.props.playFrom(seekTimeInSeconds, endTime); + } else { this.props.setTime(seekTimeInSeconds); } } return { select: true }; - }; + } // makes sure no anchors overlaps each other by setting the correct position and width getLevel = ( @@ -456,17 +459,17 @@ export class CollectionStackedTimeline extends CollectionSubView< placed.push({ anchorStartTime: x1, anchorEndTime: x2, level }); return level; - }; + } dictationHeightPercent = 50; dictationHeight = () => - (this.props.PanelHeight() * (100 - this.dictationHeightPercent)) / 100; + (this.props.PanelHeight() * (100 - this.dictationHeightPercent)) / 100 timelineContentHeight = () => - (this.props.PanelHeight() * this.dictationHeightPercent) / 100; + (this.props.PanelHeight() * this.dictationHeightPercent) / 100 dictationScreenToLocalTransform = () => this.props .ScreenToLocalTransform() - .translate(0, -this.timelineContentHeight()); + .translate(0, -this.timelineContentHeight()) @computed get renderDictation() { const dictation = Cast(this.dataDoc[this.props.dictationKey], Doc, null); return !dictation ? null : ( @@ -552,7 +555,7 @@ export class CollectionStackedTimeline extends CollectionSubView< const top = (d.level / maxLevel) * this.timelineContentHeight(); const timespan = end - start; const width = (timespan / this.props.trimDuration) * timelineContentWidth; - const height = this.timelineContentHeight() / maxLevel + const height = this.timelineContentHeight() / maxLevel; return this.props.Document.hideAnchors ? null : ( <div className={"collectionStackedTimeline-marker-timeline"} @@ -723,17 +726,19 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps> const changeAnchor = (anchor: Doc, left: boolean, time: number) => { const timelineOnly = Cast(anchor[this.props.startTag], "number", null) !== undefined; - if (timelineOnly) + if (timelineOnly) { Doc.SetInPlace( anchor, left ? this.props.startTag : this.props.endTag, time, true ); - else + } + else { left ? (anchor._timecodeToShow = time) : (anchor._timecodeToHide = time); + } return false; }; setupMoveUpEvents( @@ -746,13 +751,13 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps> }, emptyFunction ); - }; + } @action computeTitle = () => { const start = Math.max(NumCast(this.props.mark[this.props.startTag]), this.props.trimStart) - this.props.trimStart; const end = Math.min(NumCast(this.props.mark[this.props.endTag]), this.props.trimEnd) - this.props.trimStart; - return `#${formatTime(start)}-${formatTime(end)}` + return `#${formatTime(start)}-${formatTime(end)}`; } renderInner = computedFn(function ( @@ -824,21 +829,21 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps> {inner.view} {!inner.anchor.view || !SelectionManager.IsSelected(inner.anchor.view) ? null : ( - <> - <div - key="left" - className="collectionStackedTimeline-left-resizer" - onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, true)} - /> - <div - key="right" - className="collectionStackedTimeline-resizer" - onPointerDown={(e) => - this.onAnchorDown(e, this.props.mark, false) - } - /> - </> - )} + <> + <div + key="left" + className="collectionStackedTimeline-left-resizer" + onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, true)} + /> + <div + key="right" + className="collectionStackedTimeline-resizer" + onPointerDown={(e) => + this.onAnchorDown(e, this.props.mark, false) + } + /> + </> + )} </> ); } |
