diff options
| -rw-r--r-- | src/client/views/animationtimeline/Timeline.tsx | 15 | ||||
| -rw-r--r-- | src/client/views/animationtimeline/TimelineOverview.scss | 2 | ||||
| -rw-r--r-- | src/client/views/animationtimeline/TimelineOverview.tsx | 8 |
3 files changed, 14 insertions, 11 deletions
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index f74d4c71e..5d5e78652 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -453,7 +453,7 @@ export class Timeline extends React.Component<FieldViewProps> { </div> <div className="time-box overview-tool" style={{ display: this._timelineVisible ? "flex" : "none" }}> <div key="time-text" className="animation-text" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden", display: this.props.Document.isATOn ? "flex" : "none" }}>{lengthString}</div> - <input className="time-input" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden", display: this.props.Document.isATOn ? "flex" : "none" }} placeholder={String(Math.floor(this._time) / 1000) + " s"} ref={this._timeInputRef} onKeyDown={this.onTimeInput} /> + <input className="time-input" disabled style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden", display: this.props.Document.isATOn ? "flex" : "none" }} placeholder={String(Math.floor(this._time) / 1000) + " s"} ref={this._timeInputRef} onKeyDown={this.onTimeInput} /> <div style={{ width: "100%", display: !this.props.Document.isATOn ? "flex" : "none" }}>Current: {this.getCurrentTime()}</div> </div> </div> @@ -466,12 +466,12 @@ export class Timeline extends React.Component<FieldViewProps> { */ @action private onTimeInput = (e: React.KeyboardEvent) => { - if (e.keyCode === 13) { - let timeInput = this._timeInputRef.current!; - this._time = parseInt(timeInput.value, 10); - this._totalLength = KeyframeFunc.convertPixelTime(this._time, "mili", "pixel", this._tickSpacing, this._tickIncrement); - this.props.Document.AnimationLength = this._time; - } + // if (e.keyCode === 13) { + // let timeInput = this._timeInputRef.current!; + // this._time = parseInt(timeInput.value, 10); + // this._totalLength = KeyframeFunc.convertPixelTime(this._time, "mili", "pixel", this._tickSpacing, this._tickIncrement); + // this.props.Document.AnimationLength = this._time; + // } } @@ -535,7 +535,6 @@ export class Timeline extends React.Component<FieldViewProps> { * basically the only thing you need to edit besides render methods in track (individual track lines) and keyframe (green region) */ render() { - console.log(this.props.Document.isATOn); runInAction(() => { this._panelWidth = this.props.PanelWidth(); this.changeLenths(); diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss index 283163ea7..b54399307 100644 --- a/src/client/views/animationtimeline/TimelineOverview.scss +++ b/src/client/views/animationtimeline/TimelineOverview.scss @@ -72,7 +72,7 @@ $timelineDark: #77a1aa; position: relative; padding: 0px; margin: 0px; - width: 100%; + // width: 100%; height: 4px; background-color: $timelineColor; border-radius: 20px; diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx index 7ff78955e..5d6378068 100644 --- a/src/client/views/animationtimeline/TimelineOverview.tsx +++ b/src/client/views/animationtimeline/TimelineOverview.tsx @@ -58,7 +58,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{ let width = $("#timelineOverview").width(); // console.log($("timelineOverview")) if (width) this.overviewBarWidth = width; - else this.overviewBarWidth = 0; + // else this.overviewBarWidth = 0; // console.log(this.overviewBarWidth) } @@ -95,10 +95,12 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{ onScrubberDown = (e: React.PointerEvent) => { e.preventDefault(); e.stopPropagation(); + if (!this.props.isAuthoring) { document.removeEventListener("pointermove", this.onScrubberMove); document.removeEventListener("pointerup", this.onScrubberUp); document.addEventListener("pointermove", this.onScrubberMove); document.addEventListener("pointerup", this.onScrubberUp); + } } @action @@ -107,8 +109,10 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{ e.stopPropagation(); let scrubberRef = this._scrubberRef.current!; let left = scrubberRef.getBoundingClientRect().left; + // left = e.screenX; let offsetX = Math.round(e.clientX - left); this.props.changeCurrentBarX((offsetX / (this.DEFAULT_WIDTH) * this.props.totalLength) + this.props.currentBarX); + // this.props.changeCurrentBarX(e.screenX) } @action @@ -154,7 +158,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{ </div> </div> ] : [ - <div className="timeline-play-bar"> + <div className="timeline-play-bar" style={{ width: this.overviewBarWidth }}> <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${(this.props.currentBarX / this.props.totalLength) * 294}px` }} onPointerDown={this.onScrubberDown}></div> </div>, <div className="timeline-play-tail" style={{ width: `${(this.props.currentBarX / this.props.totalLength) * 294}px` }}></div> |