diff options
author | andrewdkim <adkim414@gmail.com> | 2019-06-24 16:32:56 -0400 |
---|---|---|
committer | andrewdkim <adkim414@gmail.com> | 2019-06-24 16:32:56 -0400 |
commit | 33440b84d276b3488f10f14c4b51893d1d54353d (patch) | |
tree | f8462565bb4e87a3d28a3ef5e41983a435ec56c3 /src/client/views/nodes/Keyframe.tsx | |
parent | df5c4abc3acbf67db44384ef000c893c61270fcc (diff) |
graphical change
Diffstat (limited to 'src/client/views/nodes/Keyframe.tsx')
-rw-r--r-- | src/client/views/nodes/Keyframe.tsx | 142 |
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> ); |