diff options
Diffstat (limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')
| -rw-r--r-- | src/client/views/animationtimeline/TimelineOverview.tsx | 112 |
1 files changed, 52 insertions, 60 deletions
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx index 81a5587e4..82ac69a3b 100644 --- a/src/client/views/animationtimeline/TimelineOverview.tsx +++ b/src/client/views/animationtimeline/TimelineOverview.tsx @@ -1,11 +1,9 @@ -import * as React from "react"; -import { observable, action, computed, runInAction, reaction, IReactionDisposer } from "mobx"; -import { observer } from "mobx-react"; -import "./TimelineOverview.scss"; -import * as $ from 'jquery'; -import { Timeline } from "./Timeline"; -import { Keyframe, KeyframeFunc } from "./Keyframe"; - +import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { RegionHelpers } from './Region'; +import { Timeline } from './Timeline'; +import './TimelineOverview.scss'; interface TimelineOverviewProps { totalLength: number; @@ -21,9 +19,8 @@ interface TimelineOverviewProps { tickIncrement: number; } - @observer -export class TimelineOverview extends React.Component<TimelineOverviewProps>{ +export class TimelineOverview extends React.Component<TimelineOverviewProps> { @observable private _visibleRef = React.createRef<HTMLDivElement>(); @observable private _scrubberRef = React.createRef<HTMLDivElement>(); @observable private authoringContainer = React.createRef<HTMLDivElement>(); @@ -49,13 +46,13 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{ this.setOverviewWidth(); }); } - }, + } ); - } + }; componentWillUnmount = () => { this._authoringReaction && this._authoringReaction(); - } + }; @action setOverviewWidth() { @@ -66,8 +63,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{ if (this.props.isAuthoring) { this.activeOverviewWidth = this.overviewBarWidth; - } - else { + } else { this.activeOverviewWidth = this.playbarWidth; } } @@ -76,37 +72,37 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{ onPointerDown = (e: React.PointerEvent) => { e.stopPropagation(); e.preventDefault(); - document.removeEventListener("pointermove", this.onPanX); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointermove", this.onPanX); - document.addEventListener("pointerup", this.onPointerUp); - } + document.removeEventListener('pointermove', this.onPanX); + document.removeEventListener('pointerup', this.onPointerUp); + document.addEventListener('pointermove', this.onPanX); + document.addEventListener('pointerup', this.onPointerUp); + }; @action onPanX = (e: PointerEvent) => { e.stopPropagation(); e.preventDefault(); - const movX = (this.props.visibleStart / this.props.totalLength) * (this.DEFAULT_WIDTH) + e.movementX; - this.props.movePanX((movX / (this.DEFAULT_WIDTH)) * this.props.totalLength); - } + const movX = (this.props.visibleStart / this.props.totalLength) * this.DEFAULT_WIDTH + e.movementX; + this.props.movePanX((movX / this.DEFAULT_WIDTH) * this.props.totalLength); + }; @action onPointerUp = (e: PointerEvent) => { e.stopPropagation(); e.preventDefault(); - document.removeEventListener("pointermove", this.onPanX); - document.removeEventListener("pointerup", this.onPointerUp); - } + document.removeEventListener('pointermove', this.onPanX); + document.removeEventListener('pointerup', this.onPointerUp); + }; @action onScrubberDown = (e: React.PointerEvent) => { e.preventDefault(); e.stopPropagation(); - document.removeEventListener("pointermove", this.onScrubberMove); - document.removeEventListener("pointerup", this.onScrubberUp); - document.addEventListener("pointermove", this.onScrubberMove); - document.addEventListener("pointerup", this.onScrubberUp); - } + document.removeEventListener('pointermove', this.onScrubberMove); + document.removeEventListener('pointerup', this.onScrubberUp); + document.addEventListener('pointermove', this.onScrubberMove); + document.addEventListener('pointerup', this.onScrubberUp); + }; @action onScrubberMove = (e: PointerEvent) => { @@ -115,22 +111,22 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{ const scrubberRef = this._scrubberRef.current!; const left = scrubberRef.getBoundingClientRect().left; const offsetX = Math.round(e.clientX - left); - this.props.changeCurrentBarX((((offsetX) / this.activeOverviewWidth) * this.props.totalLength) + this.props.currentBarX); - } + this.props.changeCurrentBarX((offsetX / this.activeOverviewWidth) * this.props.totalLength + this.props.currentBarX); + }; @action onScrubberUp = (e: PointerEvent) => { e.preventDefault(); e.stopPropagation(); - document.removeEventListener("pointermove", this.onScrubberMove); - document.removeEventListener("pointerup", this.onScrubberUp); - } + document.removeEventListener('pointermove', this.onScrubberMove); + document.removeEventListener('pointerup', this.onScrubberUp); + }; @action getTimes() { - const vis = KeyframeFunc.convertPixelTime(this.props.visibleLength, "mili", "time", this.props.tickSpacing, this.props.tickIncrement); - const x = KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement); - const start = KeyframeFunc.convertPixelTime(this.props.visibleStart, "mili", "time", this.props.tickSpacing, this.props.tickIncrement); + const vis = RegionHelpers.convertPixelTime(this.props.visibleLength, 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement); + const x = RegionHelpers.convertPixelTime(this.props.currentBarX, 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement); + const start = RegionHelpers.convertPixelTime(this.props.visibleStart, 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement); this.visibleTime = vis; this.currentX = x; this.visibleStart = start; @@ -144,7 +140,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{ const visibleBarWidth = percentVisible * this.activeOverviewWidth; const percentScrubberStart = this.currentX / this.props.time; - let scrubberStart = this.props.currentBarX / this.props.totalLength * this.activeOverviewWidth; + let scrubberStart = (this.props.currentBarX / this.props.totalLength) * this.activeOverviewWidth; if (scrubberStart > this.activeOverviewWidth) scrubberStart = this.activeOverviewWidth; const percentBarStart = this.visibleStart / this.props.time; @@ -153,29 +149,25 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{ let playWidth = (this.props.currentBarX / this.props.totalLength) * this.activeOverviewWidth; if (playWidth > this.activeOverviewWidth) playWidth = this.activeOverviewWidth; - const timeline = this.props.isAuthoring ? [ - - <div key="timeline-overview-container" className="timeline-overview-container overviewBar" id="timelineOverview" ref={this.authoringContainer}> - <div ref={this._visibleRef} key="1" className="timeline-overview-visible" style={{ left: `${barStart}px`, width: `${visibleBarWidth}px` }} onPointerDown={this.onPointerDown}></div>, - <div ref={this._scrubberRef} key="2" className="timeline-overview-scrubber-container" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}> - <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div> - </div> - </div> - ] : [ - <div key="1" className="timeline-play-bar overviewBar" id="timelinePlay" ref={this.playbackContainer}> - <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}></div> - </div>, - <div key="2" className="timeline-play-tail" style={{ width: `${playWidth}px` }}></div> - ]; + const timeline = this.props.isAuthoring + ? [ + <div key="timeline-overview-container" className="timeline-overview-container overviewBar" id="timelineOverview" ref={this.authoringContainer}> + <div ref={this._visibleRef} key="1" className="timeline-overview-visible" style={{ left: `${barStart}px`, width: `${visibleBarWidth}px` }} onPointerDown={this.onPointerDown}></div>, + <div ref={this._scrubberRef} key="2" className="timeline-overview-scrubber-container" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}> + <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div> + </div> + </div>, + ] + : [ + <div key="1" className="timeline-play-bar overviewBar" id="timelinePlay" ref={this.playbackContainer}> + <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}></div> + </div>, + <div key="2" className="timeline-play-tail" style={{ width: `${playWidth}px` }}></div>, + ]; return ( <div className="timeline-flex"> - <div className="timelineOverview-bounding"> - {timeline} - </div> + <div className="timelineOverview-bounding">{timeline}</div> </div> ); } - } - - |