aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/nodes/Timeline.scss13
-rw-r--r--src/client/views/nodes/Timeline.tsx90
-rw-r--r--src/client/views/nodes/Track.scss58
-rw-r--r--src/client/views/nodes/Track.tsx131
4 files changed, 149 insertions, 143 deletions
diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss
index 102515b6a..a7b0323ff 100644
--- a/src/client/views/nodes/Timeline.scss
+++ b/src/client/views/nodes/Timeline.scss
@@ -8,6 +8,19 @@
.toolbox{
padding-top:10px;
}
+ .scrubberbox{
+ z-index:10;
+ background-color: black;
+ height: 20px;
+ margin-left:calc(10% + 100px);
+ width: calc(80% - 100px);
+ .scrubber{
+ z-index:10;
+ height:300px;
+ width: 5px;
+ background-color:green;
+ }
+ }
.trackbox{
height:60%;
width:80%;
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index f18d8f2a0..91e308f89 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -3,21 +3,103 @@ import * as ReactDOM from "react-dom";
import "./Timeline.scss";
import { CollectionSubView } from "../collections/CollectionSubView";
import { Document, listSpec, createSchema, makeInterface, defaultSpec } from "../../../new_fields/Schema";
-import { observer } from "mobx-react";
+import { observer} from "mobx-react";
import { Track } from "./Track";
-
+import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS, Reaction } from "mobx";
+import { Cast } from "../../../new_fields/Types";
+import { SelectionManager } from "../../util/SelectionManager";
+import { List } from "../../../new_fields/List";
+import { Self } from "../../../new_fields/FieldSymbols";
+import { Doc } from "../../../new_fields/Doc";
@observer
export class Timeline extends CollectionSubView(Document){
+ @observable private _scrubberbox = React.createRef<HTMLDivElement>()
+ @observable private _currentBarX:number = 0;
+ @observable private _windSpeed:number = 1;
+ @observable private _isPlaying:boolean = false;
+ @observable private _boxLength:number = 0;
+ @observable private _nodes:List<Doc> = new List<Doc>();
+
+
+ private _reactionDisposers: IReactionDisposer[] = [];
+
+
+ @action
+ componentDidMount(){
+ let scrubber = this._scrubberbox.current!;
+ this._boxLength = scrubber.getBoundingClientRect().width;
+ let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc));
+ if (!children) {
+ return;
+ }
+ let childrenList = ((children[Self] as any).__fields) as List<Doc>;
+ this._nodes = childrenList;
+ }
+
+ componentWillUnmount(){
+
+
+ }
+
+ @action
+ onPlay = async (e: React.MouseEvent) => {
+ if (this._isPlaying) {
+ this._isPlaying = false;
+ } else {
+ this._isPlaying = true;
+ this.changeCurrentX();
+ }
+ }
+
+ @action
+ changeCurrentX = () => {
+ if (this._currentBarX >= this._boxLength && this._isPlaying) {
+ this._currentBarX = 0;
+ }
+ if (this._currentBarX <= this._boxLength && this._isPlaying) {
+ this._currentBarX = this._currentBarX + this._windSpeed;
+ setTimeout(this.changeCurrentX, 15);
+ }
+ }
+
+ @action
+ windForward = (e: React.MouseEvent) => {
+ if (this._windSpeed < 64) { //max speed is 32
+ this._windSpeed = this._windSpeed * 2;
+ }
+ }
+
+ @action
+ windBackward = (e: React.MouseEvent) => {
+ if (this._windSpeed > 1 / 16) { // min speed is 1/8
+ this._windSpeed = this._windSpeed / 2;
+ }
+ }
+
+ @action
+ onScrubberDown = (e:React.PointerEvent) => {
+ let scrubberbox = this._scrubberbox.current!;
+ let left = scrubberbox.getBoundingClientRect().left;
+ let offsetX = Math.round(e.clientX - left);
+ this._currentBarX = offsetX;
+ }
+
+
render(){
return (
<div className="timeline-container">
<div className="toolbox">
- <button> Play </button>
+ <button onClick={this.windBackward}> {"<"} </button>
+ <button onClick={this.onPlay}> Play </button>
+ <button onClick={this.windForward}> {">"} </button>
+ </div>
+ <div className="scrubberbox" onPointerDown={this.onScrubberDown} ref ={this._scrubberbox}>
+ <div className="scrubber" style={{transform:`translate(${this._currentBarX}px)`}}></div>
</div>
<div className="trackbox">
- <Track {...this.props}/>
+ {this._nodes.map(doc => {return <Track {...this.props}/>})}
</div>
</div>
);
diff --git a/src/client/views/nodes/Track.scss b/src/client/views/nodes/Track.scss
index 9c6ab08f0..e922aa1df 100644
--- a/src/client/views/nodes/Track.scss
+++ b/src/client/views/nodes/Track.scss
@@ -1,42 +1,26 @@
-.track-container {
- height: 100px;
- width: 500px;
- background-color: rgb(160, 226, 243);
- position: absolute;
- left: 15%;
- top: 1%;
- font-size: 75%;
+@import "./../globalCssVariables.scss";
- .track {
- height: 60px;
- width: 500px;
- bottom: 0px;
- background-color: grey;
- position: absolute;
- }
-
- .inner {
- height: 44px;
- width: 484px;
- background-color: black;
- //opacity: 0.5;
- position: absolute;
- margin: 8px;
- z-index: 10;
+.track-container{
+
+ .datapane{
+ top:0px;
+ width: 100px;
+ height: 100px;
+ background-color: $light-color-secondary;
+ position:relative;
+ float:left;
+ border-style:solid;
}
- button {
- height: 30px;
- width: 50px;
- font-size: 1em;
- position: relative;
- margin: 5px;
- }
-
- input {
- height: 30px;
- width: 100px;
- font-size: 1em;
- margin: 5px;
+ .track {
+ .inner {
+ top:0px;
+ float:right;
+ height: 100px;
+ width: calc(100% - 100px);
+ background-color: $light-color;
+ border-style:solid;
+ position:relative;
+ }
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index 3f840db78..4ea98c35e 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -43,6 +43,7 @@ type TimeAndPosition = makeInterface<[typeof TimeAndPositionSchema]>;
const TimeAndPosition = makeInterface(TimeAndPositionSchema);
+
@observer
export class Track extends CollectionSubView(Document) {
@observable private _inner = React.createRef<HTMLDivElement>();
@@ -50,7 +51,6 @@ export class Track extends CollectionSubView(Document) {
@observable private _playButton = React.createRef<HTMLButtonElement>();
@observable private _isRecording: Boolean = false;
- @observable private _windSpeed: number = 1;
private _reactionDisposers: IReactionDisposer[] = [];
private _selectionManagerChanged?: IReactionDisposer;
@@ -75,11 +75,7 @@ export class Track extends CollectionSubView(Document) {
*/
@action
onRecord = (e: React.MouseEvent) => {
- if (this._isRecording === true) {
- this._isRecording = false;
- return;
- }
- this._isRecording = true;
+
let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc));
if (!children) {
return;
@@ -277,54 +273,8 @@ export class Track extends CollectionSubView(Document) {
});
}
-
-
- @observable private _isPlaying = false;
-
- @action
- onPlay = async (e: React.MouseEvent) => {
- let playButton: HTMLButtonElement = (await this._playButton.current)!;
- if (this._isPlaying) {
- playButton.innerHTML = "Play";
- this._isPlaying = false;
- this._barMoved = false;
- } else {
- playButton.innerHTML = "Stop";
- this._barMoved = true;
- this._isPlaying = true;
- this.changeCurrentX();
- }
-
- }
-
-
- @action
- changeCurrentX = () => {
- if (this._currentBarX >= this._length && this._isPlaying === true) {
- this._currentBarX = 0;
- }
- if (this._currentBarX <= this._length && this._isPlaying === true) { ///////////////////////////////////////////////////////////////////////////// needs to be width
- this._currentBarX = this._currentBarX + this._windSpeed;
- setTimeout(this.changeCurrentX, 15);
- this.timeChange(this._currentBarX);
- }
- }
- @action
- windForward = (e: React.MouseEvent) => {
- if (this._windSpeed < 64) { //max speed is 32
- this._windSpeed = this._windSpeed * 2;
- }
- }
-
- @action
- windBackward = (e: React.MouseEvent) => {
- if (this._windSpeed > 1 / 16) { // min speed is 1/8
- this._windSpeed = this._windSpeed / 2;
- }
- }
-
/**
* called when you input a certain time on the input bar and press enter. The green bar will move to that location.
* @param e keyboard event
@@ -340,26 +290,8 @@ export class Track extends CollectionSubView(Document) {
}
}
-
- @action
- timer = (sec:number) => {
- if(sec <= 0){
- return;
- }
- setTimeout(() => {
- this.timer(sec - 1);
- this._timer = sec;
- //dconsole.log(this._timer);
- }, 1000);
- }
-
@observable private _timer:number = 0;
async componentDidMount() {
- this.timer(100);
- console.log(toJS(this.props.Document.proto) || null);
- if (this._inner.current){
- console.log(this._inner.current.getBoundingClientRect().width);
- }
if (!this._keyframes) {
this.props.Document.keyframes = new List<List<Doc>>();
}
@@ -401,9 +333,9 @@ export class Track extends CollectionSubView(Document) {
e.preventDefault();
e.stopPropagation();
if (this._inner.current) {
- if (!this._isPlaying) {
- this._barMoved = false;
- }
+ // if (!this._isPlaying) {
+ // this._barMoved = false;
+ // }
this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
}
}
@@ -417,19 +349,17 @@ export class Track extends CollectionSubView(Document) {
e.preventDefault();
e.stopPropagation();
console.log("on timeline");
- if (this._isRecording) {
- if (this._inner.current) {
- this._barMoved = true;
- // let mouse = e.nativeEvent;
- // let offsetX = Math.round(mouse.offsetX);
- let left = this._inner.current.getBoundingClientRect().left;
- let offsetX = Math.round(e.clientX - left);
- console.log(offsetX);
- this._currentBarX = offsetX;
- this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
- this._inner.current.addEventListener("pointermove", this.onInnerPointerMove);
- this.timeChange(this._currentBarX);
- }
+ if (this._inner.current) {
+ this._barMoved = true;
+ // let mouse = e.nativeEvent;
+ // let offsetX = Math.round(mouse.offsetX);
+ let left = this._inner.current.getBoundingClientRect().left;
+ let offsetX = Math.round(e.clientX - left);
+ //this._currentBarX = offsetX;
+ this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
+ this._inner.current.addEventListener("pointermove", this.onInnerPointerMove);
+ this.timeChange(this._currentBarX);
+
}
}
@@ -457,24 +387,21 @@ export class Track extends CollectionSubView(Document) {
render() {
return (
- <div>
- <div className="track-container">
- <div className="track">
- <div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick} onPointerDown={this.onInnerPointerDown} onPointerUp={this.onInnerPointerUp}>
- {SelectionManager.SelectedDocuments().map(dv => this.displayKeyFrames(dv.props.Document))}
- {this._bars.map((data) => {
- return <Keyframe position={data.x} node={data.doc}></Keyframe>;
- })}
- <Keyframe position={this._currentBarX} node={this.props.Document}></Keyframe>
- </div>
+ <div className="track-container">
+ <div className="datapane">
+ <h1>Certain node</h1>
+ </div>
+ <div className="track">
+ <div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick}>
+ {SelectionManager.SelectedDocuments().map(dv => this.displayKeyFrames(dv.props.Document))}
+ {this._bars.map((data) => {
+ return <Keyframe position={data.x} node={data.doc}></Keyframe>;
+ })}
</div>
- <button onClick={this.onRecord}>Record</button>
- <input placeholder={this._currentBarX.toString()} ref={this._timeInput} onKeyDown={this.onTimeEntered} ></input>
- <button onClick={this.windBackward}> {"<"}</button>
- <button onClick={this.onPlay} ref={this._playButton}> Play </button>
- <button onClick={this.windForward}>{">"}</button>
- <button onClick={() => { console.log(this._data + " data, "); console.log(this._keyframes.length + " keyframes"); }}>data</button>
</div>
+ {/* <button onClick={this.onRecord}>Record</button>
+ <input placeholder={this._currentBarX.toString()} ref={this._timeInput} onKeyDown={this.onTimeEntered} ></input>
+ <button onClick={this.onPlay} ref={this._playButton}> Play </button>*/}
</div>
);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-23 07:30:23 +0000