aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/Keyframe.tsx
diff options
context:
space:
mode:
authorandrewdkim <adkim414@gmail.com>2019-06-24 16:32:56 -0400
committerandrewdkim <adkim414@gmail.com>2019-06-24 16:32:56 -0400
commit33440b84d276b3488f10f14c4b51893d1d54353d (patch)
treef8462565bb4e87a3d28a3ef5e41983a435ec56c3 /src/client/views/nodes/Keyframe.tsx
parentdf5c4abc3acbf67db44384ef000c893c61270fcc (diff)
graphical change
Diffstat (limited to 'src/client/views/nodes/Keyframe.tsx')
-rw-r--r--src/client/views/nodes/Keyframe.tsx142
1 files changed, 73 insertions, 69 deletions
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index b3dd251f9..7f4f9ab3b 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -31,6 +31,8 @@ export class Keyframe extends React.Component<IProp> {
@observable private _bar = React.createRef<HTMLDivElement>();
@observable private _data:Doc = new Doc();
@observable private _position:number = 0;
+ @observable private _keyframes:number[] = [];
+
@action
@@ -41,87 +43,82 @@ export class Keyframe extends React.Component<IProp> {
this._data.duration = 200;
this._data.start = this._position - (this._duration/2);
this._data.end = this._position + (this._duration/2);
-
-
}
componentWillUnmount() {
}
- @action
- onPointerEnter = (e: React.PointerEvent) => {
- e.preventDefault();
- e.stopPropagation();
- //this._display = "block";
- }
-
- @action
- onPointerOut = (e: React.PointerEvent) => {
- e.preventDefault();
- e.stopPropagation();
- //this._display = "none";
- }
+ // @action
+ // onPointerEnter = (e: React.PointerEvent) => {
+ // e.preventDefault();
+ // e.stopPropagation();
+ // //this._display = "block";
+ // }
+
+ // @action
+ // onPointerOut = (e: React.PointerEvent) => {
+ // e.preventDefault();
+ // e.stopPropagation();
+ // //this._display = "none";
+ // }
@action
onBarPointerDown = (e: React.PointerEvent) => {
- console.log(e.clientX);
- this._position = e.clientX;
- }
-
- @action
- onKeyDown = (e: React.KeyboardEvent) => {
e.preventDefault();
e.stopPropagation();
- console.log("pressed");
- if (e.keyCode === 13){
- console.log("hellow");
- }
+ document.addEventListener("pointermove", this.onBarPointerMove);
+ document.addEventListener("pointerup", (e:PointerEvent) => {
+ document.removeEventListener("pointermove", this.onBarPointerMove);
+ });
}
@action
- onPointerDown = (e:React.PointerEvent) => {
+ onBarPointerMove = (e:PointerEvent) => {
e.preventDefault();
e.stopPropagation();
+ if (this._position >= 0){
+ let futureX = this._position + e.movementX;
+ if (futureX <= 0){
+ this._position = 0;
+ } else{
+ this._position += e.movementX;
+ }
+ }
}
@action
onResizeLeft = (e:React.PointerEvent)=>{
e.preventDefault();
- let bar = this._bar.current!;
+ e.stopPropagation();
document.addEventListener("pointermove", this.onDragResizeLeft);
+ document.addEventListener("pointerup", ()=>{
+ document.removeEventListener("pointermove", this.onDragResizeLeft);
+ });
}
@action
- onDragResizeLeft = (e:PointerEvent)=>{
+ onResizeRight = (e:React.PointerEvent)=> {
e.preventDefault();
- e.stopPropagation();
- console.log("Dragging");
- let bar = this._bar.current!;
- let barX = bar.getBoundingClientRect().left;
- let offset = barX - e.clientX;
- bar.style.width = `${bar.getBoundingClientRect().width + offset}px`;
- bar.style.transform = `translate(${e.clientX})`;
- document.addEventListener("pointerup", this.onResizeFinished);
+ e.stopPropagation();
+ document.addEventListener("pointermove", this.onDragResizeRight);
+ document.addEventListener("pointerup", ()=>{
+ document.removeEventListener("pointermove", this.onDragResizeRight);
+ });
}
@action
- onResizeFinished =(e:PointerEvent) => {
+ onDragResizeLeft = (e:PointerEvent)=>{
e.preventDefault();
- e.stopPropagation();
- let bar = this._bar.current!;
- document.removeEventListener("pointermove", this.onDragResizeLeft);
- document.removeEventListener("pointermove", this.onDragResizeRight);
+ e.stopPropagation();
+ let bar = this._bar.current!;
+ let barX = bar.getBoundingClientRect().left;
+ let offset = e.clientX - barX;
+ this._duration -= offset;
+ this._position += offset;
}
- @action
- onResizeRight = (e:React.PointerEvent)=> {
- e.preventDefault();
- e.stopPropagation();
- let bar = this._bar.current!;
- document.addEventListener("pointermove", this.onDragResizeRight);
- }
-
+
@action
onDragResizeRight = (e:PointerEvent) => {
e.preventDefault();
@@ -129,35 +126,42 @@ export class Keyframe extends React.Component<IProp> {
let bar = this._bar.current!;
let barX = bar.getBoundingClientRect().right;
let offset = e.clientX - barX;
- bar.style.width = `${bar.getBoundingClientRect().width + offset}px`;
- document.addEventListener("pointerup", this.onResizeFinished);
+ console.log(offset);
+ this._duration += offset;
}
- @action
- onResizeOut = (e:React.PointerEvent)=>{
- let bar = this._bar.current!;
- document.addEventListener("pointerup", this.onDragResizeRight);
+ createDivider = (type?: string):JSX.Element => {
+ if (type === "left"){
+ return <div className="divider" style={{right:"0px"}}></div>;
+ } else if (type === "right"){
+ return <div className="divider" style={{left:"0px"}}> </div>;
+ }
+ return <div className="divider"></div>;
}
-
- @action
- changeFlyoutContent = () => {
-
- }
-
@action
- onHover = (e:React.PointerEvent) => {
-
+ createKeyframe = (e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ let mouse = e.nativeEvent;
+ this._keyframes.push(mouse.offsetX);
}
-
+
render() {
return (
<div>
- <div className="bar" ref={this._bar} style={{ transform: `translate(${this._position - (this._duration/2)}px)`, width:`${this._duration}px`}} onPointerDown={this.onBarPointerDown}>
- <div className="leftResize" onPointerDown={this.onResizeLeft} ></div>
- <div className="rightResize" onPointerDown={this.onResizeRight} onPointerOut={this.onResizeOut}></div>
- <div className="menubox" style={{display: this._display}}>
- </div>
+ <div className="bar" ref={this._bar} style={{ transform: `translate(${this._position}px)`, width:`${this._duration}px`}} onPointerDown={this.onBarPointerDown} onDoubleClick={this.createKeyframe}>
+ <div className="leftResize" onPointerDown={this.onResizeLeft} ></div>
+ <div className="rightResize" onPointerDown={this.onResizeRight}></div>
+ {/* <div className="menubox" style={{display: this._display}}></div> */}
+ <div className="fadeLeft" style={{width:`${20}px`}}>{this.createDivider("left")}</div>
+ <div className="fadeRight" style={{width:`${20}px`}}>{this.createDivider("right")}</div>
+ {this._keyframes.map(kf => {return <div className="keyframe" style={{left: `${kf}px`}}>
+ {this.createDivider()}
+ <div className="keyframeCircle"></div>
+ </div>})}
+ {this.createDivider("left")}
+ {this.createDivider("right")}
</div>
</div>
);