diff options
Diffstat (limited to 'src/client/views/nodes/Keyframe.tsx')
-rw-r--r-- | src/client/views/nodes/Keyframe.tsx | 66 |
1 files changed, 59 insertions, 7 deletions
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx index 4bccc6040..2f75a4b03 100644 --- a/src/client/views/nodes/Keyframe.tsx +++ b/src/client/views/nodes/Keyframe.tsx @@ -11,6 +11,7 @@ import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../new import { any } from "bluebird"; import { FlyoutProps } from "./Timeline"; import { number } from "prop-types"; +import { CollectionSchemaView, CollectionSchemaPreview } from "../collections/CollectionSchemaView"; export namespace KeyframeFunc{ export enum Direction{ @@ -38,18 +39,32 @@ export namespace KeyframeFunc{ return rightMost; } }; + + export const defaultKeyframe = () => { + let regiondata = new Doc(); //creating regiondata + regiondata.duration = 200; + regiondata.position = 0; + regiondata.fadeIn = 20; + regiondata.fadeOut = 20; + regiondata.keyframes = new List<Doc>(); + return regiondata; + }; + + export const compareKeyframe = (propsNode: Doc, kf: Doc) => { + + }; } -const RegionDataSchema = createSchema({ +export const RegionDataSchema = createSchema({ position: defaultSpec("number", 0), duration: defaultSpec("number", 0), keyframes: listSpec(Doc), fadeIn: defaultSpec("number", 0), fadeOut: defaultSpec("number", 0) }); -type RegionData = makeInterface<[typeof RegionDataSchema]>; -const RegionData = makeInterface(RegionDataSchema); +export type RegionData = makeInterface<[typeof RegionDataSchema]>; +export const RegionData = makeInterface(RegionDataSchema); interface IProps { node: Doc; @@ -64,7 +79,33 @@ export class Keyframe extends React.Component<IProps> { @observable private _bar = React.createRef<HTMLDivElement>(); @action - componentWillMount() { + componentDidMount() { + let fadeIn = this.makeKeyData(this.regiondata.position + this.regiondata.fadeIn)!; + let fadeOut = this.makeKeyData(this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut)!; + let fadeInIndex = this.regiondata.keyframes!.indexOf(fadeIn); + let fadeOutIndex = this.regiondata.keyframes!.indexOf(fadeOut); + + (fadeIn.key! as Doc).opacity = 1; + (fadeOut.key! as Doc).opacity = 1; + + this.regiondata.keyframes![fadeInIndex] =fadeIn; + this.regiondata.keyframes![fadeOutIndex] =fadeOut; + + + let start = this.makeKeyData(this.regiondata.position)!; + let finish = this.makeKeyData(this.regiondata.position + this.regiondata.duration)!; + + + let startIndex = this.regiondata.keyframes!.indexOf(start); + let finishIndex = this.regiondata.keyframes!.indexOf(finish); + + (start.key! as Doc).opacity = 0.1; + (finish.key! as Doc).opacity = 0.1; + + this.regiondata.keyframes![startIndex] = start; + this.regiondata.keyframes![finishIndex] = finish; + + } componentWillUnmount() { @@ -98,6 +139,7 @@ export class Keyframe extends React.Component<IProps> { TK.time = kfpos; TK.key = Doc.MakeCopy(this.props.node); this.regiondata.keyframes!.push(TK); + return TK; } } @@ -202,6 +244,7 @@ export class Keyframe extends React.Component<IProps> { let offset = e.clientX - bar.getBoundingClientRect().left; let position = NumCast(this.regiondata.position); this.makeKeyData(Math.round(position + offset)); + this.props.changeCurrentBarX(NumCast(Math.round(position + offset))); } @action @@ -212,6 +255,8 @@ export class Keyframe extends React.Component<IProps> { } + + render() { return ( <div> @@ -219,6 +264,8 @@ export class Keyframe extends React.Component<IProps> { onPointerDown={this.onBarPointerDown} onDoubleClick={this.createKeyframe} onContextMenu={action((e:React.MouseEvent)=>{ + e.preventDefault(); + e.stopPropagation(); let offsetLeft = this._bar.current!.getBoundingClientRect().left - this._bar.current!.parentElement!.getBoundingClientRect().left; let offsetTop = this._bar.current!.getBoundingClientRect().top; //+ this._bar.current!.parentElement!.getBoundingClientRect().top; console.log(offsetLeft); @@ -227,13 +274,18 @@ export class Keyframe extends React.Component<IProps> { })}> <div className="leftResize" onPointerDown={this.onResizeLeft} ></div> <div className="rightResize" onPointerDown={this.onResizeRight}></div> - <div className="fadeLeft" style={{ width: `${this.regiondata.fadeIn}px` }}>{this.createDivider(KeyframeFunc.Direction.left)}</div> - <div className="fadeRight" style={{ width: `${this.regiondata.fadeOut}px` }}>{this.createDivider(KeyframeFunc.Direction.right)}</div> + {/* <div className="fadeLeft" style={{ width: `${this.regiondata.fadeIn}px` }}>{this.createDivider(KeyframeFunc.Direction.left)}</div> + <div className="fadeRight" style={{ width: `${this.regiondata.fadeOut}px` }}>{this.createDivider(KeyframeFunc.Direction.right)}</div> */} + {this.regiondata.keyframes!.map(kf => { kf = kf as Doc; return <div className="keyframe" style={{ left: `${NumCast(kf.time) - this.regiondata.position}px` }}> {this.createDivider()} - <div className="keyframeCircle" onPointerDown={(e) => {this.moveKeyframe(e, kf as Doc);}}></div> + <div className="keyframeCircle" onPointerDown={(e) => {this.moveKeyframe(e, kf as Doc);} } onContextMenu={(e:React.MouseEvent)=>{ + e.preventDefault(); + e.stopPropagation(); + + }}></div> </div>; })} {this.createDivider(KeyframeFunc.Direction.left)} |