aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/animationtimeline/Timeline.scss68
-rw-r--r--src/client/views/animationtimeline/Timeline.tsx51
2 files changed, 85 insertions, 34 deletions
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index cf6b4b3d5..f6a48d876 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -7,10 +7,48 @@
display:flex;
align-items: flex-start;
flex-direction: row;
+ justify-content: space-evenly;
+ align-items: baseline;
top: 10px;
div{
margin-left:10px;
}
+ .animation-text{
+ font-size: 20px;
+ height: auto;
+ width: auto;
+ }
+ .round-toggle {
+ height: 40px;
+ width: 80px;
+ background-color: white;
+ border: 2px solid purple;
+ border-radius: 20px;
+ animation-fill-mode: forwards;
+ animation-duration: 500ms;
+ top: 30px;
+ input{
+ position:absolute;
+ opacity: 0;
+ height: 0;
+ width: 0;
+ }
+ .round-toggle-slider{
+ height: 35px;
+ width: 35px;
+ background-color: white;
+ border:1px solid grey;
+ border-radius: 20px;
+ transition: transform 500ms ease-in-out;
+ margin-left: 0px;
+ margin-top: 0.5px;
+ }
+ }
+ .time-input{
+ height: 40px;
+ width: 100px;
+
+ }
}
.tick{
@@ -112,38 +150,12 @@
float: left 0px;
top: 25%;
height: 75%;
- width: 100%;
+ width: 100%;
background-color: grey;
}
}
-.round-toggle {
- height: 40px;
- width: 80px;
- background-color: white;
- border: 2px solid purple;
- border-radius: 20px;
- animation-fill-mode: forwards;
- animation-duration: 500ms;
- top: 20px;
- input{
- position:absolute;
- opacity: 0;
- height: 0;
- width: 0;
- }
- .round-toggle-slider{
- height: 35px;
- width: 35px;
- background-color: white;
- border:1px solid grey;
- border-radius: 20px;
- transition: transform 500ms ease-in-out;
- margin-left: 0px;
- margin-top: 0.5px;
- }
-
-}
+
@keyframes turnon{
from{
background-color: white;
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 666048a54..30fa70b12 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -31,6 +31,7 @@ export class Timeline extends React.Component<FieldViewProps> {
@observable private _infoContainer = React.createRef<HTMLDivElement>();
@observable private _roundToggleRef = React.createRef<HTMLDivElement>();
@observable private _roundToggleContainerRef = React.createRef<HTMLDivElement>();
+ @observable private _timeInputRef = React.createRef<HTMLInputElement>();
@observable private _currentBarX: number = 0;
@observable private _windSpeed: number = 1;
@@ -62,12 +63,27 @@ export class Timeline extends React.Component<FieldViewProps> {
componentDidMount() {
runInAction(() => {
+ if (!this.props.Document.AnimationLength){
+ this.props.Document.AnimationLength = this._time;
+ } else {
+ this._time = NumCast(this.props.Document.AnimationLength);
+ console.log(this._time);
+ }
this._totalLength = this._tickSpacing * (this._time / this._tickIncrement);
this._visibleLength = this._infoContainer.current!.getBoundingClientRect().width;
this._visibleStart = this._infoContainer.current!.scrollLeft;
+ this.props.Document.isAnimating = !this.props.Document.isAnimating;
+ this.toggleHandle();
});
}
+ componentWillUnmount(){
+ runInAction(() => {
+ console.log(this._time);
+ this.props.Document.AnimationLength = this._time;
+ });
+ }
+
/**
* React Functional Component
* Purpose: For drawing Tick marks across the timeline in authoring mode
@@ -194,16 +210,20 @@ export class Timeline extends React.Component<FieldViewProps> {
let titleContainer = this._titleContainer.current!;
this.movePanX(this._visibleStart - e.movementX);
trackbox.scrollTop = trackbox.scrollTop - e.movementY;
- titleContainer.scrollTop = titleContainer.scrollTop - e.movementY;
+ titleContainer.scrollTop = titleContainer.scrollTop - e.movementY;
+ if (this._visibleStart + this._visibleLength + 20>= this._totalLength){
+ this._visibleStart -= e.movementX;
+ this._totalLength -= e.movementX;
+ this._time -= KeyframeFunc.convertPixelTime(e.movementX, "mili", "time", this._tickSpacing, this._tickIncrement);
+ this.props.Document.AnimationLength = this._time;
+ }
+
}
@action
movePanX = (pixel: number) => {
let infoContainer = this._infoContainer.current!;
infoContainer.scrollLeft = pixel;
this._visibleStart = infoContainer.scrollLeft;
- console.log(infoContainer.scrollLeft);
- console.log(this._totalLength);
- console.log(this._visibleLength);
}
@action
@@ -300,19 +320,39 @@ export class Timeline extends React.Component<FieldViewProps> {
<div key="timeline_toolbox" className="timeline-toolbox" style={{ height: `${size}px` }}>
<div key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} style={{ height: `${size}px`, width: `${size}px` }} /> </div>
<div key=" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} style={{ height: `${size}px`, width: `${size}px` }} /> </div>
- <div key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} style={{ height: `${size}px`, width: `${size}px` }} /> </div>
+ <div key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} style={{ height: `${size}px`, width: `${size}px` }} /> </div>
+ <div key="overview-text" className="animation-text"><p>Timeline Overview</p></div>
<TimelineOverview scale={scale} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX} />
+ <div key="animation-text" className="animation-text"><p>Mode: {this.props.Document.isAnimating ? "Authoring" : "Play"}</p></div>
<div key="round-toggle" ref={this._roundToggleContainerRef} className="round-toggle">
<div key="round-toggle-slider" ref={this._roundToggleRef} className="round-toggle-slider" onPointerDown={this.toggleChecked}> </div>
</div>
+ <div key="time-text" className="animation-text"><p>Length: </p></div>
+ <input placeholder={String(this._time) + "ms"} ref = {this._timeInputRef} onKeyDown={this.onTimeInput}/>
+
</div>
);
}
+
+ @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;
+
+ }
+ }
@action
private toggleChecked = (e: React.PointerEvent) => {
e.preventDefault();
e.stopPropagation();
+ this.toggleHandle();
+ }
+
+ private toggleHandle = () => {
let roundToggle = this._roundToggleRef.current!;
let roundToggleContainer = this._roundToggleContainerRef.current!;
let timelineContainer = this._timelineContainer.current!;
@@ -322,7 +362,6 @@ export class Timeline extends React.Component<FieldViewProps> {
roundToggleContainer.style.animationName = "turnoff";
timelineContainer.style.top = `${-this._containerHeight}px`;
this.props.Document.isAnimating = false;
-
} else {
roundToggle.style.transform = "translate(45px, 0px)";
roundToggle.style.animationName = "turnon";
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 08:26:12 +0000