diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/animationtimeline/Track.tsx | 76 |
1 files changed, 45 insertions, 31 deletions
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx index e352cdbb5..32fa1d9ca 100644 --- a/src/client/views/animationtimeline/Track.tsx +++ b/src/client/views/animationtimeline/Track.tsx @@ -29,6 +29,7 @@ export class Track extends React.Component<IProps> { @observable private _currentBarXReaction: any; @observable private _timelineVisibleReaction: any; @observable private _autoKfReaction: any; + @observable private _newKeyframe: boolean = false; private readonly MAX_TITLE_HEIGHT = 75; private _trackHeight = 0; private primitiveWhitelist = [ @@ -36,11 +37,12 @@ export class Track extends React.Component<IProps> { "y", "width", "height", - "opacity" + "opacity", + "data", ]; private objectWhitelist = [ "data" - ] + ]; @computed private get regions() { return Cast(this.props.node.regions, listSpec(Doc)) as List<Doc>; } @computed private get time() { return NumCast(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); } @@ -57,12 +59,12 @@ export class Track extends React.Component<IProps> { componentDidMount() { runInAction(async () => { - // this._timelineVisibleReaction = this.timelineVisibleReaction(); + this._timelineVisibleReaction = this.timelineVisibleReaction(); this._currentBarXReaction = this.currentBarXReaction(); if (this.regions.length === 0) this.createRegion(this.time); this.props.node.hidden = false; this.props.node.opacity = 1; - this.autoCreateKeyframe(); + // this.autoCreateKeyframe(); }); } @@ -108,10 +110,21 @@ export class Track extends React.Component<IProps> { (Cast(edge!.key, Doc)! as Doc).opacity = 0.1; (Cast(rightkf!.key, Doc)! as Doc).opacity = 1; } + } else if (this._newKeyframe) { + // console.log("new keyframe registering"); + // let kfList = DocListCast(this.saveStateRegion!.keyframes); + // kfList.forEach(kf => { + // kf.key = this.makeCopy(); + // if (kfList.indexOf(kf) === 0 || kfList.indexOf(kf) === 3){ + // (kf.key as Doc).opacity = 0.1; + // } + // }); + } keyframes[kfIndex] = kf; this.saveStateKf = undefined; this.saveStateRegion = undefined; + this._newKeyframe = false; } @@ -129,8 +142,6 @@ export class Track extends React.Component<IProps> { return reaction(() => { return [...this.primitiveWhitelist.map(key => node[key]), ...objects]; }, (changed, reaction) => { - console.log("autocreated"); - console.log(changed); //check for region this.findRegion(this.time).then((region) => { if (region !== undefined) { //if region at scrub time exist @@ -179,30 +190,28 @@ export class Track extends React.Component<IProps> { }); } - // /** - // * when timeline is visible, reaction is ran so states are reverted - // */ - // @action - // timelineVisibleReaction = () => { - // return reaction(() => { - // return this.props.timelineVisible; - // }, isVisible => { - // this.revertState(); - // if (isVisible) { - // DocListCast(this.regions).forEach(region => { - // if (!BoolCast((Cast(region, Doc) as Doc).hasData)) { - // for (let i = 0; i < 4; i++) { - // DocListCast(((Cast(region, Doc) as Doc).keyframes as List<Doc>))[i].key = Doc.MakeCopy(this.props.node, true); - // if (i === 0 || i === 3) { - // DocListCast(((Cast(region, Doc) as Doc).keyframes as List<Doc>))[i].key.opacity = 0.1; - // } - // } - // console.log("saving keyframes"); - // } - // }); - // } - // }); - // } + /** + * when timeline is visible, reaction is ran so states are reverted + */ + @action + timelineVisibleReaction = () => { + return reaction(() => { + return this.props.timelineVisible; + }, isVisible => { + if (isVisible) { + DocListCast(this.regions).forEach(region => { + if (!BoolCast((Cast(region, Doc) as Doc).hasData)) { + for (let i = 0; i < 4; i++) { + DocListCast(((Cast(region, Doc) as Doc).keyframes as List<Doc>))[i].key = this.makeCopy(); + if (i === 0 || i === 3) { //manually inputing fades + (DocListCast(((Cast(region, Doc) as Doc).keyframes as List<Doc>))[i].key! as Doc).opacity = 0.1; + } + } + } + }); + } + }); + } @observable private saveStateKf: (Doc | undefined) = undefined; @observable private saveStateRegion: (Doc | undefined) = undefined; @@ -214,7 +223,7 @@ export class Track extends React.Component<IProps> { timeChange = async () => { if (this.saveStateKf !== undefined) { await this.saveKeyframe(); - } + } let regiondata = await this.findRegion(Math.round(this.time)); //finds a region that the scrubber is on if (regiondata) { let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata, this.time); // lef keyframe, if it exists @@ -318,6 +327,8 @@ export class Track extends React.Component<IProps> { createRegion = async (time: number) => { if (await this.findRegion(time) === undefined) { //check if there is a region where double clicking (prevents phantom regions) let regiondata = KeyframeFunc.defaultKeyframe(); //create keyframe data + this._newKeyframe = true; + this.saveStateRegion = regiondata; regiondata.position = time; //set position let rightRegion = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.right, regiondata, this.regions); @@ -362,6 +373,9 @@ export class Track extends React.Component<IProps> { let doc = new Doc(); this.primitiveWhitelist.forEach(key => { let originalVal = this.props.node[key]; + if (key === "data"){ + console.log(originalVal); + } doc[key] = originalVal instanceof ObjectField ? originalVal[Copy]() : this.props.node[key]; }); return doc; |