diff options
Diffstat (limited to 'src/client/views/animationtimeline/Keyframe.tsx')
| -rw-r--r-- | src/client/views/animationtimeline/Keyframe.tsx | 95 |
1 files changed, 42 insertions, 53 deletions
diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx index 9f4d80d2b..4f6ba728d 100644 --- a/src/client/views/animationtimeline/Keyframe.tsx +++ b/src/client/views/animationtimeline/Keyframe.tsx @@ -20,15 +20,18 @@ import { undoBatch, UndoManager } from "../../util/UndoManager"; * Useful static functions that you can use. Mostly for logic, but you can also add UI logic here also */ export namespace KeyframeFunc { + export enum KeyframeType { end = "end", fade = "fade", default = "default", } + export enum Direction { left = "left", right = "right" } + export const findAdjacentRegion = (dir: KeyframeFunc.Direction, currentRegion: Doc, regions: List<Doc>): (RegionData | undefined) => { let leftMost: (RegionData | undefined) = undefined; let rightMost: (RegionData | undefined) = undefined; @@ -97,41 +100,6 @@ export namespace KeyframeFunc { return regiondata; }; - export const makeKeyData = async (regiondata:RegionData, time: number, badNode:Doc, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time - runInAction(async () => { - console.log("ran"); - let doclist = (await DocListCastAsync(regiondata.keyframes))!; - let existingkf: (Doc | undefined) = undefined; - doclist.forEach(TK => { - if (TK.time === time) existingkf = TK; - }); - if (existingkf) return existingkf; - let TK: Doc = new Doc(); - TK.time = time; - TK.key = Doc.MakeCopy(badNode, true); - TK.type = type; - regiondata.keyframes!.push(TK); - let interpolationFunctions = new Doc(); - interpolationFunctions.interpolationX = new List<number>([0, 1]); - interpolationFunctions.interpolationY = new List<number>([0, 100]); - interpolationFunctions.pathX = new List<number>(); - interpolationFunctions.pathY = new List<number>(); - regiondata.functions!.push(interpolationFunctions); - let found: boolean = false; - regiondata.keyframes!.forEach(compkf => { - compkf = compkf as Doc; - if (time < NumCast(compkf.time) && !found) { - runInAction(() => { - regiondata.keyframes!.splice(doclist.indexOf(compkf as Doc), 0, TK); - regiondata.keyframes!.pop(); - found = true; - }); - return; - } - }); - return TK; - }); - }; export const convertPixelTime = (pos: number, unit: "mili" | "sec" | "min" | "hr", dir: "pixel" | "time", tickSpacing: number, tickIncrement: number) => { let time = dir === "pixel" ? (pos * tickSpacing) / tickIncrement : (pos / tickSpacing) * tickIncrement; @@ -202,7 +170,6 @@ interface IProps { export class Keyframe extends React.Component<IProps> { @observable private _bar = React.createRef<HTMLDivElement>(); - @observable private _gain = 20; //default @observable private _mouseToggled = false; @observable private _doubleClickEnabled = false; @@ -215,18 +182,15 @@ export class Keyframe extends React.Component<IProps> { @computed private get pixelFadeOut() { return KeyframeFunc.convertPixelTime(this.regiondata.fadeOut, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); } componentWillMount() { - runInAction(async () => { - if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>(); - let fadeIn = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.fadeIn, this.props.node, KeyframeFunc.KeyframeType.fade))! as any as Doc; - let fadeOut = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, this.props.node, KeyframeFunc.KeyframeType.fade))! as any as Doc; - let start = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position, this.props.node, KeyframeFunc.KeyframeType.end))! as any as Doc; - let finish = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration, this.props.node, KeyframeFunc.KeyframeType.end))! as any as Doc; - (fadeIn.key! as Doc).opacity = 1; - (fadeOut.key! as Doc).opacity = 1; - (start.key! as Doc).opacity = 0.1; - (finish.key! as Doc).opacity = 0.1; - this.forceUpdate(); - }); + if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>(); + let start = this.makeKeyData(this.regiondata, this.regiondata.position, KeyframeFunc.KeyframeType.end); + let fadeIn = this.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.fadeIn, KeyframeFunc.KeyframeType.fade); + let fadeOut = this.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, KeyframeFunc.KeyframeType.fade); + let finish = this.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration,KeyframeFunc.KeyframeType.end); + (fadeIn.key as Doc).opacity = 1; + (fadeOut.key as Doc).opacity = 1; + (start.key as Doc).opacity = 0.1; + (finish.key as Doc).opacity = 0.1; } @@ -253,7 +217,32 @@ export class Keyframe extends React.Component<IProps> { }); } } - + private makeKeyData = (regiondata:RegionData, time: number, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time + let doclist = DocListCast(regiondata.keyframes)!; + let existingkf: (Doc | undefined) = undefined; + doclist.forEach(TK => { + if (TK.time === time) existingkf = TK; + }); + if (existingkf) return existingkf; + //else creates a new doc. + let TK: Doc = new Doc(); + TK.time = time; + TK.key = Doc.MakeCopy(this.props.node, true); + TK.type = type; + //assuming there are already keyframes (for keeping keyframes in order, sorted by time) + console.log("making..."); + if (doclist.length === 0) regiondata.keyframes!.push(TK); + doclist.forEach(kf => { + let index = doclist.indexOf(kf); + let kfTime = NumCast(kf.time); + console.log(kfTime); + if ((kfTime < time && index === doclist.length - 1) || (kfTime < time && time < NumCast(doclist[index + 1].time))){ + regiondata.keyframes!.splice(index + 1, 0, TK); + return; + } + }); + return TK; + } @action onBarPointerMove = (e: PointerEvent) => { @@ -353,7 +342,7 @@ export class Keyframe extends React.Component<IProps> { let offset = KeyframeFunc.convertPixelTime(Math.round((clientX - bar.getBoundingClientRect().left) * this.props.transform.Scale), "mili", "time", this.props.tickSpacing, this.props.tickIncrement); if (offset > this.regiondata.fadeIn && offset < this.regiondata.duration - this.regiondata.fadeOut) { //make sure keyframe is not created inbetween fades and ends let position = this.regiondata.position; - await KeyframeFunc.makeKeyData(this.regiondata, Math.round(position + offset), this.props.node); + this.makeKeyData(this.regiondata, Math.round(position + offset)); this.regiondata.hasData = true; this.props.changeCurrentBarX(KeyframeFunc.convertPixelTime(Math.round(position + offset), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement)); //first move the keyframe to the correct location and make a copy so the correct file gets coppied @@ -552,12 +541,12 @@ export class Keyframe extends React.Component<IProps> { DocListCast(this.regiondata.keyframes).forEach(kf => { let index = this.keyframes.indexOf(kf); if (index !== this.keyframes.length - 1) { - let left = this.keyframes[this.keyframes.indexOf(kf) + 1]; + let right = this.keyframes[index + 1]; let bodyRef = React.createRef<HTMLDivElement>(); let kfPos = KeyframeFunc.convertPixelTime(NumCast(kf.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); - let leftPos = KeyframeFunc.convertPixelTime(NumCast(left!.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); + let rightPos = KeyframeFunc.convertPixelTime(NumCast(right.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); keyframeDividers.push( - <div ref={bodyRef} className="body-container" style={{ left: `${kfPos - this.pixelPosition}px`, width: `${leftPos - kfPos}px` }} + <div ref={bodyRef} className="body-container" style={{ left: `${kfPos - this.pixelPosition}px`, width: `${rightPos - kfPos}px` }} onPointerOver={(e) => { e.preventDefault(); e.stopPropagation(); this.onContainerOver(e, bodyRef); }} onPointerOut={(e) => { e.preventDefault(); e.stopPropagation(); this.onContainerOut(e, bodyRef); }} onContextMenu={(e) => { |