diff options
Diffstat (limited to 'src/client/views/collections')
| -rw-r--r-- | src/client/views/collections/CollectionStackedTimeline.scss | 1 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionStackedTimeline.tsx | 44 |
2 files changed, 29 insertions, 16 deletions
diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss index 091337aac..7a957ae5c 100644 --- a/src/client/views/collections/CollectionStackedTimeline.scss +++ b/src/client/views/collections/CollectionStackedTimeline.scss @@ -5,7 +5,6 @@ width: 100%; height: 100%; z-index: 1000; - overflow: hidden; top: 0px; .collectionStackedTimeline-trim-shade { diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index 0a0581f3c..3ec7f27d3 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -87,6 +87,8 @@ export class CollectionStackedTimeline extends CollectionSubView< @observable _trimStart: number = 0; @observable _trimEnd: number = 0; + @observable _zoomFactor: number = 1; + get minTrimLength() { return this._timeline?.getBoundingClientRect() ? 0.05 * this.clipDuration : 0; } @computed get trimStart() { return this.IsTrimming !== TrimScope.None ? this._trimStart : this.clipStart; } @computed get trimDuration() { return this.trimEnd - this.trimStart; } @@ -133,6 +135,7 @@ export class CollectionStackedTimeline extends CollectionSubView< @action public StartTrimming(scope: TrimScope) { + console.log(this.minTrimLength); this._trimStart = this.clipStart; this._trimEnd = this.clipEnd; this._trimming = scope; @@ -144,6 +147,11 @@ export class CollectionStackedTimeline extends CollectionSubView< this._trimming = TrimScope.None; } + @action + public setZoom(change: number) { + this._zoomFactor = Math.max(1, this._zoomFactor + change); + } + anchorStart = (anchor: Doc) => NumCast(anchor._timecodeToShow, NumCast(anchor[this.props.startTag])); anchorEnd = (anchor: Doc, val: any = null) => NumCast(anchor._timecodeToHide, NumCast(anchor[this.props.endTag], val) ?? null); toTimeline = (screen_delta: number, width: number) => { @@ -181,6 +189,11 @@ export class CollectionStackedTimeline extends CollectionSubView< this._markerEnd = undefined; CollectionStackedTimeline.SelectingRegion = undefined; } + break; + case "Escape": + this._trimStart = this.clipStart; + this._trimStart = this.clipEnd; + this._trimming = TrimScope.None; } } } @@ -285,7 +298,7 @@ export class CollectionStackedTimeline extends CollectionSubView< this._trimStart = Math.min( Math.max( this.trimStart + (e.movementX / rect.width) * this.clipDuration, - 0 + this.clipStart ), this.trimEnd - this.minTrimLength ); @@ -311,7 +324,7 @@ export class CollectionStackedTimeline extends CollectionSubView< this._trimEnd = Math.max( Math.min( this.trimEnd + (e.movementX / rect.width) * this.clipDuration, - this.clipStart + this.clipDuration + this.clipEnd ), this.trimStart + this.minTrimLength ); @@ -560,6 +573,7 @@ export class CollectionStackedTimeline extends CollectionSubView< ref={(timeline: HTMLDivElement | null) => (this._timeline = timeline)} onClick={(e) => this.isContentActive() && StopEvent(e)} onPointerDown={(e) => this.isContentActive() && this.onPointerDownTimeline(e)} + style={{ width: `${this._zoomFactor * 100}%` }} > {drawAnchors.map((d) => { const start = this.anchorStart(d.anchor); @@ -854,19 +868,19 @@ 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)} + /> + </> + )} </> ); } |