aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/views/animationtimeline/Timeline.tsx15
-rw-r--r--src/client/views/animationtimeline/TimelineOverview.scss2
-rw-r--r--src/client/views/animationtimeline/TimelineOverview.tsx8
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>