From adf6a988db738b4aebf4a0aa4583eaced9f2544e Mon Sep 17 00:00:00 2001 From: andrewdkim Date: Thu, 27 Jun 2019 13:00:58 -0400 Subject: for demo --- src/client/views/nodes/Keyframe.tsx | 49 ++++++++++----- src/client/views/nodes/Timeline.tsx | 6 +- src/client/views/nodes/Track.tsx | 120 ++++++++++++++++++------------------ 3 files changed, 94 insertions(+), 81 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx index 352e5e0d7..c6177e5b3 100644 --- a/src/client/views/nodes/Keyframe.tsx +++ b/src/client/views/nodes/Keyframe.tsx @@ -20,6 +20,8 @@ import { List } from "../../../new_fields/List"; import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../new_fields/Schema"; import { CollectionBaseView } from "../collections/CollectionBaseView"; import { notDeepEqual } from "assert"; +import { DocUtils, Docs } from "../../documents/Documents"; +import { DragLinksAsDocuments } from "../../util/DragManager"; @@ -30,6 +32,8 @@ interface IProp { } const KeyDataSchema = createSchema({}); + + const TimeAndKeyDataSchema = createSchema({ time: defaultSpec("number", 0), key: Doc @@ -71,9 +75,7 @@ export class Keyframe extends React.Component { // need edge case here when keyframe data already exists when loading.....................; // let keyframes = Cast(this.props.node.keyframes, listSpec(Doc)) as List; // if keyframes.indexOf() - - let keyframes = Cast(this.props.node.keyframes, listSpec(Doc)) as List; - keyframes.indexOf(this.props.keyframedata); + } componentWillUnmount() { @@ -95,15 +97,13 @@ export class Keyframe extends React.Component { // } @computed - get keyframes() { + private get keyframes() { return Cast(this.props.node.keyframes, listSpec(Doc)) as List; } @action makeKeyData = (kfpos: number) => { //Kfpos is mouse offsetX, representing time let hasData = false; - let index = this.keyframes.indexOf(this.props.keyframedata); - let kfd = KeyframeData(this.keyframes[index] as Doc); - kfd.kfs!.forEach(TK => { //TK is TimeAndKey + this.kfd.kfs!.forEach(TK => { //TK is TimeAndKey TK = TK as Doc; if (TK.time === kfpos){ hasData = true; @@ -112,13 +112,19 @@ export class Keyframe extends React.Component { if (!hasData){ let TK:Doc = new Doc(); TK.time = kfpos; - TK.key = this.props.node; - kfd.kfs!.push(TK); - (this.keyframes[index] as Doc) = TK; + TK.key = Doc.MakeCopy(this.props.node); + this.kfd.kfs!.push(TK); } } + + @computed + private get kfd(){ + let index = this.keyframes.indexOf(this.props.keyframedata); + return KeyframeData(this.keyframes[index] as Doc); + } + @action onBarPointerDown = (e: React.PointerEvent) => { e.preventDefault(); @@ -133,12 +139,12 @@ export class Keyframe extends React.Component { onBarPointerMove = (e:PointerEvent) => { e.preventDefault(); e.stopPropagation(); - if (this._position >= 0){ - let futureX = this._position + e.movementX; + if (this.kfd.position >= 0){ + let futureX = this.kfd.position + e.movementX; if (futureX <= 0){ - this._position = 0; + this.kfd.position = 0; } else{ - this._position += e.movementX; + this.kfd.position += e.movementX; } } } @@ -171,7 +177,14 @@ export class Keyframe extends React.Component { let barX = bar.getBoundingClientRect().left; let offset = e.clientX - barX; this._duration -= offset; - this._position += offset; + this.kfd.position += offset; + this.kfd.kfs!.forEach(kf => { + kf = kf as Doc; + kf.time = NumCast(kf.time) + offset; + }); + this._keyframes.forEach(num => { + num += offset; + }); } @@ -184,6 +197,7 @@ export class Keyframe extends React.Component { let offset = e.clientX - barX; console.log(offset); this._duration += offset; + this.kfd.duration = this._duration; } createDivider = (type?: string):JSX.Element => { @@ -202,7 +216,8 @@ export class Keyframe extends React.Component { let mouse = e.nativeEvent; let position = NumCast(this.props.keyframedata.position); this._keyframes.push(mouse.offsetX); - this.makeKeyData(position); + this.makeKeyData(position + mouse.offsetX); + } render() { @@ -217,7 +232,7 @@ export class Keyframe extends React.Component { {this._keyframes.map(kf => {return
{this.createDivider()}
-
})} + ;})} {this.createDivider("left")} {this.createDivider("right")} diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index fc3b8f454..e6b57ec75 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -213,15 +213,15 @@ export class Timeline extends CollectionSubView(Document){
-
+ {/*

Timeline Overview

-
+
*/}
{this._ticks.map(element => { - return

{this.toTime(element)}

; + return

{this.toTime(element)}

; })}
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx index a774fe2d3..c7154fbb3 100644 --- a/src/client/views/nodes/Track.tsx +++ b/src/client/views/nodes/Track.tsx @@ -25,8 +25,6 @@ import { Tapable } from "tapable"; import { Keyframe, KeyframeData } from "./Keyframe"; import { timingSafeEqual } from "crypto"; import { node } from "prop-types"; -type Data = List; -type Keyframes = List>; const PositionSchema = createSchema({ x: defaultSpec("number", 0), @@ -56,34 +54,36 @@ export class Track extends React.Component { private _reactionDisposers: IReactionDisposer[] = []; private _selectionManagerChanged?: IReactionDisposer; - @observable private _currentBarX: number = 0; @observable private _keys = ["x", "y", "width", "height", "panX", "panY", "scale"]; - // @computed private get _keyframes() { - // return Cast(this.props.Document.keyframes, listSpec(Doc)) as any as List>; - // } - - // @computed private get _data() { - // //return Cast(this.props.Document.dataa, listSpec(Doc)) as List; - // return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc))!; - // } + @computed + private get keyframes(){ + return Cast(this.props.node.keyframes, listSpec(Doc)) as List ; + } @action timeChange = async (time: number) => { - let leftkf: (Doc | undefined) = this.calcMinLeft(time); - let rightkf: (Doc | undefined) = this.calcMinRight(time); - if (this.props.node.keyframedata!.kfs!.length < 2){ - return; - } + let singlekfd = this.findKeyframe(time); + let leftkf: (Doc | undefined) = this.calcMinLeft(singlekfd!); + let rightkf: (Doc | undefined) = this.calcMinRight(singlekfd!); + if (leftkf && rightkf){ - this.interpolate(leftkf, rightkf, time); + this.interpolate(leftkf, rightkf); } else if(leftkf){ - + console.log("left exists"); + this._keys.forEach(k => { + let data = leftkf!.key as Doc; + this.props.node[k] = data[k]; + }); } else if (rightkf){ - + console.log("right exists"); + this._keys.forEach(k => { + let data = rightkf!.key as Doc; + this.props.node[k] = data[k]; + }); } } @@ -94,12 +94,12 @@ export class Track extends React.Component { * @param time */ @action - calcMinLeft = (time: number): (Doc|undefined) => { //returns the time of the closet keyframe to the left + calcMinLeft = (singlekfd: Doc): (Doc|undefined) => { //returns the time of the closet keyframe to the left let leftKf:Doc = new Doc(); - leftKf.time = Infinity; - this._data.forEach((kf) => { + leftKf.time = Infinity; + (singlekfd.kfs! as List).forEach((kf) => { kf = kf as Doc; - if (NumCast(kf.time) < time && NumCast(leftKf.time) > NumCast(kf.time)) { + if (NumCast(kf.time) < this.props.currentBarX && NumCast(leftKf.time) > NumCast(kf.time)) { leftKf = kf; } }); @@ -115,12 +115,12 @@ export class Track extends React.Component { * @param time: time */ @action - calcMinRight = (time: number): (Doc|undefined) => { //returns the time of the closest keyframe to the right + calcMinRight = (singlekfd: Doc): (Doc|undefined) => { //returns the time of the closest keyframe to the right let rightKf:Doc = new Doc(); rightKf.time = Infinity; - this._data.forEach((kf) => { + (singlekfd.kfs! as List).forEach((kf) => { kf = kf as Doc; - if (NumCast(kf.time) > time && NumCast(rightKf.time) > NumCast(kf.time)) { + if (NumCast(kf.time) > this.props.currentBarX && NumCast(rightKf.time) > NumCast(kf.time)) { rightKf = kf; } }); @@ -140,61 +140,63 @@ export class Track extends React.Component { * @param time time that you want to interpolate */ @action - interpolate = async (kf1: Doc, kf2: Doc, time: number) => { - const keyFrame1 = (await kf1)!; - const keyFrame2 = (await kf2)!; - + interpolate = async (kf1: Doc, kf2: Doc) => { + let node1 = kf1.key as Doc; + let node2 = kf2.key as Doc; + console.log(toJS(node1)); + console.log(toJS(node2)); const dif_time = NumCast(kf2.time) - NumCast(kf1.time); - const ratio = (time - NumCast(kf1.time)) / dif_time; //linear + const ratio = (this.props.currentBarX - NumCast(kf1.time)) / dif_time; //linear this._keys.forEach(key => { - const diff = NumCast(keyFrame2[key]) - NumCast(keyFrame1[key]); + const diff = NumCast(node2[key]) - NumCast(node1[key]); const adjusted = diff * ratio; - this.props.node[key] = NumCast(keyFrame1[key]) + adjusted; + this.props.node[key] = NumCast(node1[key]) + adjusted; }); } @action componentDidMount() { this.props.node.hidden = true; + this.props.node.opacity = 0; this.props.node.keyframes = new List(); - let keyframes = Cast(this.props.node.keyframes, listSpec(Doc)) as List; reaction (() => this.props.currentBarX, () => { - keyframes.forEach((datum) => { - datum = KeyframeData(datum as Doc); - if (keyframes.length !== 0){ - let kf:(Doc | undefined) = this.findKeyframe(this.props.currentBarX); - if (kf !== undefined){ + this.keyframes.forEach((kfd) => { + kfd = KeyframeData(kfd as Doc); + if (kfd.length !== 0){ + let singlekfd:(Doc | undefined) = this.findKeyframe(this.props.currentBarX); + if (singlekfd !== undefined){ this.props.node.hidden = false; - console.log(toJS(kf.kfs!)); + this.timeChange(this.props.currentBarX); + } else { + this.props.node.hidden = true; } } }); }); - reaction(() => { - let keys = Doc.allKeys(this.props.node); - let x = keys.indexOf("keyframes"); - let afterX = keys.slice(x + 1); - let beforeX = keys.slice(0, x); - keys = beforeX.concat(afterX); - return keys.map(key => FieldValue(this.props.node[key])); - }, data => { - if (keyframes.length !== 0){ - let kf:(Doc | undefined) = this.findKeyframe(this.props.currentBarX); - console.log(kf + "from reaction wheh moving"); - } - }); + // reaction(() => { + // let keys = Doc.allKeys(this.props.node); + // let x = keys.indexOf("keyframes"); + // let afterX = keys.slice(x + 1); + // let beforeX = keys.slice(0, x); + // keys = beforeX.concat(afterX); + // return keys.map(key => FieldValue(this.props.node[key])); + // }, data => { + // if (this.keyframes.length !== 0){ + // let kf:(Doc | undefined) = this.findKeyframe(this.props.currentBarX); + // } + // }); } @action findKeyframe(time:number): (Doc | undefined){ let foundKeyframe = undefined; - (Cast(this.props.node.keyframes, listSpec(Doc)) as List).map(kf => { - kf = kf as Doc; - if (time >= NumCast(kf.position) && time <= (NumCast(kf.position) + NumCast(kf.duration))){ - foundKeyframe = kf; + this.keyframes.map(kfd => { + kfd = KeyframeData(kfd as Doc); + if (time >= NumCast(kfd.position) && time <= (NumCast(kfd.position) + NumCast(kfd.duration))){ + foundKeyframe = kfd; } }); return foundKeyframe; @@ -209,10 +211,6 @@ export class Track extends React.Component { @observable private _keyframes: JSX.Element[] = []; - @computed - get keyframes() { - return Cast(this.props.node.keyframes, listSpec(Doc)) as List; - } @action onInnerDoubleClick = (e: React.MouseEvent) => { -- cgit v1.2.3-70-g09d2