From a23aa80dcb4c0278091de6a619a195072a564a7c Mon Sep 17 00:00:00 2001 From: andrewdkim Date: Sat, 1 Feb 2020 13:50:37 -0500 Subject: some cleanup --- src/client/views/animationtimeline/Keyframe.tsx | 1 + src/client/views/animationtimeline/Track.tsx | 162 +++++++++--------------- 2 files changed, 64 insertions(+), 99 deletions(-) (limited to 'src') diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx index 2f2639c76..9f4d80d2b 100644 --- a/src/client/views/animationtimeline/Keyframe.tsx +++ b/src/client/views/animationtimeline/Keyframe.tsx @@ -99,6 +99,7 @@ export namespace KeyframeFunc { 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 => { diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx index 1ca8022a1..6d9cfe55c 100644 --- a/src/client/views/animationtimeline/Track.tsx +++ b/src/client/views/animationtimeline/Track.tsx @@ -33,33 +33,17 @@ export class Track extends React.Component { @observable private _onKeyframe: (Doc | undefined) = undefined; @observable private _onRegionData: (Doc | undefined) = undefined; @observable private _storedState: (Doc | undefined) = undefined; - @observable private filterList = [ - "regions", - "cursors", - "hidden", - "nativeHeight", - "nativeWidth", - "schemaColumns", - "baseLayout", - "backgroundLayout", - "layout", - "title", - "AnimationLength", - "author", - "baseProto", - "creationDate", - "isATOn", - "isPrototype", - "lastOpened", - "proto", - "type", - "zIndex" - ]; - private readonly MAX_TITLE_HEIGHT = 75; private _trackHeight = 0; - + private whitelist = [ + "x", + "y", + "width", + "height", + "data" + ]; @computed private get regions() { return Cast(this.props.node.regions, listSpec(Doc)) as List; } + // @computed private get time() {} ////////// life cycle functions/////////////// componentWillMount() { @@ -78,7 +62,7 @@ export class Track extends React.Component { if (this.regions.length === 0) this.createRegion(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); this.props.node.hidden = false; this.props.node.opacity = 1; - this.autoCreateKeyframe(); + // this.autoCreateKeyframe(); }); } @@ -130,13 +114,6 @@ export class Track extends React.Component { } - private whitelist = [ - "x", - "y", - "width", - "height", - "data" - ] /** * autocreates keyframe */ @@ -146,22 +123,20 @@ export class Track extends React.Component { return reaction(() => { return this.whitelist.map(key => node[key]); }, (changed, reaction) => { + console.log(changed); //convert scrubber pos(pixel) to time let time = KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement); //check for region this.findRegion(time).then((region) => { - console.log(changed); + if (region !== undefined){ //if region at scrub time exist + let r = region as any as RegionData; //for some region is returning undefined... which is not the case + if (DocListCast(r.keyframes).find(kf => kf.time === time) === undefined ){ //basically when there is no additional keyframe at that timespot + KeyframeFunc.makeKeyData(r, time, this.props.node, KeyframeFunc.KeyframeType.default); + } + } + // reaction.dispose(); }); - - - // if (region !== undefined){ //if region at scrub time exist - // if (DocListCast(region!.keyframes).find(kf => {return kf.time === time}) === undefined ){ - // console.log("change has occured"); - // } - // } - //reaction.dispose(); }); - } /** @@ -186,7 +161,7 @@ export class Track extends React.Component { let regiondata: (Doc | undefined) = await this.findRegion(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); if (regiondata) { this.props.node.hidden = false; - //await this.timeChange(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); + await this.timeChange(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); } else { this.props.node.hidden = true; this.props.node.opacity = 0; @@ -267,19 +242,6 @@ export class Track extends React.Component { } - - /** - * changing the filter here - */ - @action - private filterKeys = (keys: string[]): string[] => { - return keys.reduce((acc: string[], key: string) => { - if (!this.filterList.includes(key)) acc.push(key); - return acc; - }, []); - } - - /** * calculating current keyframe, if the scrubber is right on the keyframe */ @@ -302,50 +264,52 @@ export class Track extends React.Component { interpolate = async (left: Doc, right: Doc, regiondata: Doc) => { let leftNode = left.key as Doc; let rightNode = right.key as Doc; - const dif_time = NumCast(right.time) - NumCast(left.time); - const timeratio = (KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement) - NumCast(left.time)) / dif_time; //linear - let keyframes = (await DocListCastAsync(regiondata.keyframes!))!; - let indexLeft = keyframes.indexOf(left); - let interY: List = (await ((regiondata.functions as List)[indexLeft] as Doc).interpolationY as List)!; - let realIndex = (interY.length - 1) * timeratio; - let xIndex = Math.floor(realIndex); - let yValue = interY[xIndex]; - let secondYOffset: number = yValue; - let minY = interY[0]; // for now - let maxY = interY[interY.length - 1]; //for now - if (interY.length !== 1) { - secondYOffset = interY[xIndex] + ((realIndex - xIndex) / 1) * (interY[xIndex + 1] - interY[xIndex]) - minY; - } - let finalRatio = secondYOffset / (maxY - minY); - let pathX: List = await ((regiondata.functions as List)[indexLeft] as Doc).pathX as List; - let pathY: List = await ((regiondata.functions as List)[indexLeft] as Doc).pathY as List; - let proposedX = 0; - let proposedY = 0; - if (pathX.length !== 0) { - let realPathCorrespondingIndex = finalRatio * (pathX.length - 1); - let pathCorrespondingIndex = Math.floor(realPathCorrespondingIndex); - if (pathCorrespondingIndex >= pathX.length - 1) { - proposedX = pathX[pathX.length - 1]; - proposedY = pathY[pathY.length - 1]; - } else if (pathCorrespondingIndex < 0) { - proposedX = pathX[0]; - proposedY = pathY[0]; - } else { - proposedX = pathX[pathCorrespondingIndex] + ((realPathCorrespondingIndex - pathCorrespondingIndex) / 1) * (pathX[pathCorrespondingIndex + 1] - pathX[pathCorrespondingIndex]); - proposedY = pathY[pathCorrespondingIndex] + ((realPathCorrespondingIndex - pathCorrespondingIndex) / 1) * (pathY[pathCorrespondingIndex + 1] - pathY[pathCorrespondingIndex]); - } - - } - this.filterKeys(Doc.allKeys(leftNode)).forEach(key => { + // const dif_time = NumCast(right.time) - NumCast(left.time); + // const timeratio = (KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement) - NumCast(left.time)) / dif_time; //linear + // let keyframes = (await DocListCastAsync(regiondata.keyframes!))!; + // let indexLeft = keyframes.indexOf(left); + // let interY: List = (await ((regiondata.functions as List)[indexLeft] as Doc).interpolationY as List)!; + // let realIndex = (interY.length - 1) * timeratio; + // let xIndex = Math.floor(realIndex); + // let yValue = interY[xIndex]; + // let secondYOffset: number = yValue; + // let minY = interY[0]; // for now + // let maxY = interY[interY.length - 1]; //for now + // if (interY.length !== 1) { + // secondYOffset = interY[xIndex] + ((realIndex - xIndex) / 1) * (interY[xIndex + 1] - interY[xIndex]) - minY; + // } + // let finalRatio = secondYOffset / (maxY - minY); + // let pathX: List = await ((regiondata.functions as List)[indexLeft] as Doc).pathX as List; + // let pathY: List = await ((regiondata.functions as List)[indexLeft] as Doc).pathY as List; + // let proposedX = 0; + // let proposedY = 0; + // if (pathX.length !== 0) { + // let realPathCorrespondingIndex = finalRatio * (pathX.length - 1); + // let pathCorrespondingIndex = Math.floor(realPathCorrespondingIndex); + // if (pathCorrespondingIndex >= pathX.length - 1) { + // proposedX = pathX[pathX.length - 1]; + // proposedY = pathY[pathY.length - 1]; + // } else if (pathCorrespondingIndex < 0) { + // proposedX = pathX[0]; + // proposedY = pathY[0]; + // } else { + // proposedX = pathX[pathCorrespondingIndex] + ((realPathCorrespondingIndex - pathCorrespondingIndex) / 1) * (pathX[pathCorrespondingIndex + 1] - pathX[pathCorrespondingIndex]); + // proposedY = pathY[pathCorrespondingIndex] + ((realPathCorrespondingIndex - pathCorrespondingIndex) / 1) * (pathY[pathCorrespondingIndex + 1] - pathY[pathCorrespondingIndex]); + // } + + // } + this.whitelist.forEach(key => { if (leftNode[key] && rightNode[key] && typeof (leftNode[key]) === "number" && typeof (rightNode[key]) === "number") { //if it is number, interpolate - if ((key === "x" || key === "y") && pathX.length !== 0) { - if (key === "x") this.props.node[key] = proposedX; - if (key === "y") this.props.node[key] = proposedY; - } else { - const diff = NumCast(rightNode[key]) - NumCast(leftNode[key]); - const adjusted = diff * finalRatio; - this.props.node[key] = NumCast(leftNode[key]) + adjusted; - } + // if ((key === "x" || key === "y") && pathX.length !== 0) { + // if (key === "x") this.props.node[key] = proposedX; + // if (key === "y") this.props.node[key] = proposedY; + // } else { + // const diff = NumCast(rightNode[key]) - NumCast(leftNode[key]); + // const adjusted = diff * finalRatio; + // this.props.node[key] = NumCast(leftNode[key]) + adjusted; + // } + let dif = NumCast(rightNode[key]) - NumCast(leftNode[key]); + } else { let stored = leftNode[key]; if (stored instanceof ObjectField) { -- cgit v1.2.3-70-g09d2 From 648aaeda9255f944275cb7c5ecbbceb669fa6c57 Mon Sep 17 00:00:00 2001 From: andrewdkim Date: Sat, 1 Feb 2020 13:52:55 -0500 Subject: another set of changes --- src/client/views/animationtimeline/Track.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx index 6d9cfe55c..e5e7a364c 100644 --- a/src/client/views/animationtimeline/Track.tsx +++ b/src/client/views/animationtimeline/Track.tsx @@ -226,8 +226,7 @@ export class Track extends React.Component { private applyKeys = async (kf: Doc) => { let kfNode = await Cast(kf.key, Doc) as Doc; let docFromApply = kfNode; - if (this.filterKeys(Doc.allKeys(this.props.node)).length > this.filterKeys(Doc.allKeys(kfNode)).length) docFromApply = this.props.node; - this.filterKeys(Doc.allKeys(docFromApply)).forEach(key => { + this.whitelist.forEach(key => { if (!kfNode[key]) { this.props.node[key] = undefined; } else { -- cgit v1.2.3-70-g09d2 From c12573ba5e45271493acf01ee7d63ce9387ac606 Mon Sep 17 00:00:00 2001 From: andrewdkim Date: Sat, 1 Feb 2020 16:23:51 -0500 Subject: lots of changes --- src/client/views/animationtimeline/Keyframe.tsx | 95 ++++++++-------- src/client/views/animationtimeline/Timeline.tsx | 4 - .../views/animationtimeline/TimelineOverview.tsx | 2 - src/client/views/animationtimeline/Track.tsx | 120 +++++++-------------- 4 files changed, 79 insertions(+), 142 deletions(-) (limited to 'src') 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): (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([0, 1]); - interpolationFunctions.interpolationY = new List([0, 100]); - interpolationFunctions.pathX = new List(); - interpolationFunctions.pathY = new List(); - 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 { @observable private _bar = React.createRef(); - @observable private _gain = 20; //default @observable private _mouseToggled = false; @observable private _doubleClickEnabled = false; @@ -215,18 +182,15 @@ export class Keyframe extends React.Component { @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(); - 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(); + 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 { }); } } - + 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 { 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 { 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(); 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( -
{ e.preventDefault(); e.stopPropagation(); this.onContainerOver(e, bodyRef); }} onPointerOut={(e) => { e.preventDefault(); e.stopPropagation(); this.onContainerOut(e, bodyRef); }} onContextMenu={(e) => { diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index 8b943f209..604827213 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -449,9 +449,6 @@ export class Timeline extends React.Component { // let overviewString: string = "Overview:"; // let lengthString: string = "Length: "; - console.log("visible: " + this._visibleLength) - console.log("total: " + this._totalLength) - return (
@@ -572,7 +569,6 @@ export class Timeline extends React.Component { runInAction(() => { this._panelWidth = this.props.PanelWidth(); this.changeLenths(); - console.log("changing!!") }); // change visible and total width diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx index caa97bb70..553ba890d 100644 --- a/src/client/views/animationtimeline/TimelineOverview.tsx +++ b/src/client/views/animationtimeline/TimelineOverview.tsx @@ -127,10 +127,8 @@ export class TimelineOverview extends React.Component{ render() { - console.log("helo") // calculates where everything should fall based on its size let percentVisible = this.props.visibleLength / this.props.totalLength; - console.log(this.props.visibleLength) let visibleBarWidth = percentVisible * this.overviewBarWidth; let percentScrubberStart = this.props.currentBarX / this.props.totalLength; diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx index e5e7a364c..17466bd1a 100644 --- a/src/client/views/animationtimeline/Track.tsx +++ b/src/client/views/animationtimeline/Track.tsx @@ -10,6 +10,7 @@ import { Keyframe, KeyframeFunc, RegionData } from "./Keyframe"; import { Transform } from "../../util/Transform"; import { Copy } from "../../../new_fields/FieldSymbols"; import { ObjectField } from "../../../new_fields/ObjectField"; +import { fromCallback } from "bluebird"; interface IProps { node: Doc; @@ -40,10 +41,12 @@ export class Track extends React.Component { "y", "width", "height", - "data" + "data", + "opacity" ]; + @computed private get regions() { return Cast(this.props.node.regions, listSpec(Doc)) as List; } - // @computed private get time() {} + @computed private get time() {return NumCast(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));} ////////// life cycle functions/////////////// componentWillMount() { @@ -59,7 +62,7 @@ export class Track extends React.Component { runInAction(async () => { this._timelineVisibleReaction = this.timelineVisibleReaction(); this._currentBarXReaction = this.currentBarXReaction(); - if (this.regions.length === 0) this.createRegion(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); + if (this.regions.length === 0) this.createRegion(this.time); this.props.node.hidden = false; this.props.node.opacity = 1; // this.autoCreateKeyframe(); @@ -90,17 +93,17 @@ export class Track extends React.Component { if (!kf) return; if (kf.type === KeyframeFunc.KeyframeType.default) { // only save for non-fades kf.key = Doc.MakeCopy(this.props.node, true); - let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), kf); // lef keyframe, if it exists - let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), kf); //right keyframe, if it exists + let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, this.time, kf); // lef keyframe, if it exists + let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, this.time, kf); //right keyframe, if it exists if (leftkf!.type === KeyframeFunc.KeyframeType.fade) { //replicating this keyframe to fades - let edge: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), leftkf!); + let edge: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, this.time, leftkf!); edge!.key = Doc.MakeCopy(kf.key as Doc, true); leftkf!.key = Doc.MakeCopy(kf.key as Doc, true); (Cast(edge!.key, Doc)! as Doc).opacity = 0.1; (Cast(leftkf!.key, Doc)! as Doc).opacity = 1; } if (rightkf!.type === KeyframeFunc.KeyframeType.fade) { - let edge: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), rightkf!); + let edge: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, this.time, rightkf!); edge!.key = Doc.MakeCopy(kf.key as Doc, true); rightkf!.key = Doc.MakeCopy(kf.key as Doc, true); (Cast(edge!.key, Doc)! as Doc).opacity = 0.1; @@ -124,14 +127,12 @@ export class Track extends React.Component { return this.whitelist.map(key => node[key]); }, (changed, reaction) => { console.log(changed); - //convert scrubber pos(pixel) to time - let time = KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement); //check for region - this.findRegion(time).then((region) => { + this.findRegion(this.time).then((region) => { if (region !== undefined){ //if region at scrub time exist let r = region as any as RegionData; //for some region is returning undefined... which is not the case - if (DocListCast(r.keyframes).find(kf => kf.time === time) === undefined ){ //basically when there is no additional keyframe at that timespot - KeyframeFunc.makeKeyData(r, time, this.props.node, KeyframeFunc.KeyframeType.default); + if (DocListCast(r.keyframes).find(kf => kf.time === this.time) === undefined ){ //basically when there is no additional keyframe at that timespot + KeyframeFunc.makeKeyData(r, this.time, this.props.node, KeyframeFunc.KeyframeType.default); } } // reaction.dispose(); @@ -158,10 +159,10 @@ export class Track extends React.Component { @action currentBarXReaction = () => { return reaction(() => this.props.currentBarX, async () => { - let regiondata: (Doc | undefined) = await this.findRegion(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); + let regiondata: (Doc | undefined) = await this.findRegion(this.time); if (regiondata) { this.props.node.hidden = false; - await this.timeChange(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); + await this.timeChange(); } else { this.props.node.hidden = true; this.props.node.opacity = 0; @@ -198,14 +199,14 @@ export class Track extends React.Component { * when scrubber position changes. Need to edit the logic */ @action - timeChange = async (time: number) => { + timeChange = async () => { if (this._isOnKeyframe && this._onKeyframe && this._onRegionData) { await this.saveKeyframe(this._onKeyframe, this._onRegionData); } - let regiondata = await this.findRegion(Math.round(time)); //finds a region that the scrubber is on + 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, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); // lef keyframe, if it exists - let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); //right keyframe, if it exists + let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata, this.time); // lef keyframe, if it exists + let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata, this.time); //right keyframe, if it exists let currentkf: (Doc | undefined) = await this.calcCurrent(regiondata); //if the scrubber is on top of the keyframe if (currentkf) { await this.applyKeys(currentkf); @@ -213,7 +214,7 @@ export class Track extends React.Component { this._onKeyframe = currentkf; this._onRegionData = regiondata; } else if (leftkf && rightkf) { - await this.interpolate(leftkf, rightkf, regiondata); + await this.interpolate(leftkf, rightkf); } } } @@ -225,17 +226,12 @@ export class Track extends React.Component { @action private applyKeys = async (kf: Doc) => { let kfNode = await Cast(kf.key, Doc) as Doc; - let docFromApply = kfNode; this.whitelist.forEach(key => { if (!kfNode[key]) { this.props.node[key] = undefined; } else { let stored = kfNode[key]; - if (stored instanceof ObjectField) { - this.props.node[key] = stored[Copy](); - } else { - this.props.node[key] = stored; - } + this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored; } }); } @@ -245,77 +241,35 @@ export class Track extends React.Component { * calculating current keyframe, if the scrubber is right on the keyframe */ @action - calcCurrent = async (region: Doc) => { + calcCurrent = (region: Doc) => { let currentkf: (Doc | undefined) = undefined; - let keyframes = await DocListCastAsync(region.keyframes!); - keyframes!.forEach((kf) => { - if (NumCast(kf.time) === Math.round(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement))) currentkf = kf; + let keyframes = DocListCast(region.keyframes!); + keyframes.forEach((kf) => { + if (NumCast(kf.time) === Math.round(this.time)) currentkf = kf; }); return currentkf; } /** - * interpolation. definetely needs to be changed. (currently involves custom linear splicing interpolations). - * Too complex right now. Also need to apply quadratic spline later on (for smoothness, instead applying "gains") + * basic linear interpolation function */ @action - interpolate = async (left: Doc, right: Doc, regiondata: Doc) => { - let leftNode = left.key as Doc; - let rightNode = right.key as Doc; - // const dif_time = NumCast(right.time) - NumCast(left.time); - // const timeratio = (KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement) - NumCast(left.time)) / dif_time; //linear - // let keyframes = (await DocListCastAsync(regiondata.keyframes!))!; - // let indexLeft = keyframes.indexOf(left); - // let interY: List = (await ((regiondata.functions as List)[indexLeft] as Doc).interpolationY as List)!; - // let realIndex = (interY.length - 1) * timeratio; - // let xIndex = Math.floor(realIndex); - // let yValue = interY[xIndex]; - // let secondYOffset: number = yValue; - // let minY = interY[0]; // for now - // let maxY = interY[interY.length - 1]; //for now - // if (interY.length !== 1) { - // secondYOffset = interY[xIndex] + ((realIndex - xIndex) / 1) * (interY[xIndex + 1] - interY[xIndex]) - minY; - // } - // let finalRatio = secondYOffset / (maxY - minY); - // let pathX: List = await ((regiondata.functions as List)[indexLeft] as Doc).pathX as List; - // let pathY: List = await ((regiondata.functions as List)[indexLeft] as Doc).pathY as List; - // let proposedX = 0; - // let proposedY = 0; - // if (pathX.length !== 0) { - // let realPathCorrespondingIndex = finalRatio * (pathX.length - 1); - // let pathCorrespondingIndex = Math.floor(realPathCorrespondingIndex); - // if (pathCorrespondingIndex >= pathX.length - 1) { - // proposedX = pathX[pathX.length - 1]; - // proposedY = pathY[pathY.length - 1]; - // } else if (pathCorrespondingIndex < 0) { - // proposedX = pathX[0]; - // proposedY = pathY[0]; - // } else { - // proposedX = pathX[pathCorrespondingIndex] + ((realPathCorrespondingIndex - pathCorrespondingIndex) / 1) * (pathX[pathCorrespondingIndex + 1] - pathX[pathCorrespondingIndex]); - // proposedY = pathY[pathCorrespondingIndex] + ((realPathCorrespondingIndex - pathCorrespondingIndex) / 1) * (pathY[pathCorrespondingIndex + 1] - pathY[pathCorrespondingIndex]); - // } - - // } + interpolate = async (left: Doc, right: Doc) => { + let leftNode = await(left.key) as Doc; + let rightNode = await(right.key) as Doc; this.whitelist.forEach(key => { + console.log(key); + console.log(leftNode[key]); + console.log(rightNode[key]); if (leftNode[key] && rightNode[key] && typeof (leftNode[key]) === "number" && typeof (rightNode[key]) === "number") { //if it is number, interpolate - // if ((key === "x" || key === "y") && pathX.length !== 0) { - // if (key === "x") this.props.node[key] = proposedX; - // if (key === "y") this.props.node[key] = proposedY; - // } else { - // const diff = NumCast(rightNode[key]) - NumCast(leftNode[key]); - // const adjusted = diff * finalRatio; - // this.props.node[key] = NumCast(leftNode[key]) + adjusted; - // } let dif = NumCast(rightNode[key]) - NumCast(leftNode[key]); - - } else { + let deltaLeft = this.time - NumCast(left.time); + let ratio = deltaLeft / (NumCast(right.time) - NumCast(left.time)); + this.props.node[key] = NumCast(leftNode[key]) + (dif * ratio); + } else { // case data let stored = leftNode[key]; - if (stored instanceof ObjectField) { - this.props.node[key] = stored[Copy](); - } else { - this.props.node[key] = stored; - } + this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored; } }); } -- cgit v1.2.3-70-g09d2 From ad15ebb5f1572702894ba96caf9a66be278e1e81 Mon Sep 17 00:00:00 2001 From: Andrew Kim Date: Sun, 2 Feb 2020 00:08:59 -0500 Subject: kinda unstable (will fix it in the morning) --- src/client/views/animationtimeline/Keyframe.tsx | 37 +----- src/client/views/animationtimeline/Track.tsx | 164 +++++++++++++++--------- 2 files changed, 106 insertions(+), 95 deletions(-) (limited to 'src') diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx index 4f6ba728d..d53000460 100644 --- a/src/client/views/animationtimeline/Keyframe.tsx +++ b/src/client/views/animationtimeline/Keyframe.tsx @@ -140,6 +140,7 @@ interface IProps { check: string; changeCurrentBarX: (x: number) => void; transform: Transform; + makeKeyData: (region:RegionData, pos: number, kftype:KeyframeFunc.KeyframeType) => Doc; } @@ -183,10 +184,10 @@ export class Keyframe extends React.Component { componentWillMount() { if (!this.regiondata.keyframes) this.regiondata.keyframes = new List(); - 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); + let start = this.props.makeKeyData(this.regiondata, this.regiondata.position, KeyframeFunc.KeyframeType.end); + let fadeIn = this.props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.fadeIn, KeyframeFunc.KeyframeType.fade); + let fadeOut = this.props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, KeyframeFunc.KeyframeType.fade); + let finish = this.props.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; @@ -217,32 +218,6 @@ export class Keyframe extends React.Component { }); } } - 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) => { @@ -342,7 +317,7 @@ export class Keyframe extends React.Component { 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; - this.makeKeyData(this.regiondata, Math.round(position + offset)); + this.props.makeKeyData(this.regiondata, Math.round(position + offset), KeyframeFunc.KeyframeType.default); 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 diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx index 17466bd1a..40350bc7a 100644 --- a/src/client/views/animationtimeline/Track.tsx +++ b/src/client/views/animationtimeline/Track.tsx @@ -60,12 +60,12 @@ export class Track extends React.Component { 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(); }); } @@ -86,34 +86,34 @@ export class Track extends React.Component { * */ @action - saveKeyframe = async (ref: Doc, regiondata: Doc) => { - let keyframes: List = (Cast(regiondata.keyframes, listSpec(Doc)) as List); - let kfIndex: number = keyframes.indexOf(ref); - let kf = keyframes[kfIndex] as Doc; + saveKeyframe = async () => { + console.log("saving keyframe"); + let keyframes: List = (Cast(this.saveStateRegion!.keyframes, listSpec(Doc)) as List); + let kfIndex: number = keyframes.indexOf(this.saveStateKf!); + let kf = keyframes[kfIndex] as Doc; //index in the keyframe if (!kf) return; if (kf.type === KeyframeFunc.KeyframeType.default) { // only save for non-fades - kf.key = Doc.MakeCopy(this.props.node, true); - let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, this.time, kf); // lef keyframe, if it exists - let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, this.time, kf); //right keyframe, if it exists + kf.key = this.makeCopy(); + let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(this.saveStateRegion!, this.time, kf); // lef keyframe, if it exists + let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(this.saveStateRegion!, this.time, kf); //right keyframe, if it exists if (leftkf!.type === KeyframeFunc.KeyframeType.fade) { //replicating this keyframe to fades - let edge: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, this.time, leftkf!); - edge!.key = Doc.MakeCopy(kf.key as Doc, true); - leftkf!.key = Doc.MakeCopy(kf.key as Doc, true); + let edge: (Doc | undefined) = await KeyframeFunc.calcMinLeft(this.saveStateRegion!, this.time, leftkf!); + edge!.key = this.makeCopy(); + leftkf!.key = this.makeCopy(); (Cast(edge!.key, Doc)! as Doc).opacity = 0.1; (Cast(leftkf!.key, Doc)! as Doc).opacity = 1; } if (rightkf!.type === KeyframeFunc.KeyframeType.fade) { - let edge: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, this.time, rightkf!); - edge!.key = Doc.MakeCopy(kf.key as Doc, true); - rightkf!.key = Doc.MakeCopy(kf.key as Doc, true); + let edge: (Doc | undefined) = await KeyframeFunc.calcMinRight(this.saveStateRegion!, this.time, rightkf!); + edge!.key = this.makeCopy(); + rightkf!.key = this.makeCopy(); (Cast(edge!.key, Doc)! as Doc).opacity = 0.1; (Cast(rightkf!.key, Doc)! as Doc).opacity = 1; } } keyframes[kfIndex] = kf; - this._onKeyframe = undefined; - this._onRegionData = undefined; - this._isOnKeyframe = false; + this.saveStateKf = undefined; + this.saveStateRegion = undefined; } @@ -126,13 +126,13 @@ export class Track extends React.Component { return reaction(() => { return this.whitelist.map(key => node[key]); }, (changed, reaction) => { - console.log(changed); + console.log("autocreated"); //check for region this.findRegion(this.time).then((region) => { if (region !== undefined){ //if region at scrub time exist let r = region as any as RegionData; //for some region is returning undefined... which is not the case if (DocListCast(r.keyframes).find(kf => kf.time === this.time) === undefined ){ //basically when there is no additional keyframe at that timespot - KeyframeFunc.makeKeyData(r, this.time, this.props.node, KeyframeFunc.KeyframeType.default); + this.makeKeyData(r, this.time, KeyframeFunc.KeyframeType.default); } } // reaction.dispose(); @@ -140,17 +140,17 @@ export class Track extends React.Component { }); } - /** - * reverting back to previous state before editing on AT - */ - @action - revertState = () => { - let copyDoc = Doc.MakeCopy(this.props.node, true); - if (this._storedState) this.applyKeys(this._storedState); - let newState = new Doc(); - newState.key = copyDoc; - this._storedState = newState; - } + // /** + // * reverting back to previous state before editing on AT + // */ + // @action + // revertState = () => { + // let copyDoc = Doc.MakeCopy(this.props.node, true); + // if (this._storedState) this.applyKeys(this._storedState); + // let newState = new Doc(); + // newState.key = copyDoc; + // this._storedState = newState; + // } /** * Reaction when scrubber bar changes @@ -170,38 +170,41 @@ export class Track extends React.Component { }); } - /** - * 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))[i].key = Doc.MakeCopy(this.props.node, true); - if (i === 0 || i === 3) { - DocListCast(((Cast(region, Doc) as Doc).keyframes as List))[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 => { + // 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))[i].key = Doc.MakeCopy(this.props.node, true); + // if (i === 0 || i === 3) { + // DocListCast(((Cast(region, Doc) as Doc).keyframes as List))[i].key.opacity = 0.1; + // } + // } + // console.log("saving keyframes"); + // } + // }); + // } + // }); + // } + + @observable private saveStateKf:(Doc | undefined) = undefined; + @observable private saveStateRegion: (Doc|undefined) = undefined; /**w * when scrubber position changes. Need to edit the logic */ @action timeChange = async () => { - if (this._isOnKeyframe && this._onKeyframe && this._onRegionData) { - await this.saveKeyframe(this._onKeyframe, this._onRegionData); + 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) { @@ -210,9 +213,8 @@ export class Track extends React.Component { let currentkf: (Doc | undefined) = await this.calcCurrent(regiondata); //if the scrubber is on top of the keyframe if (currentkf) { await this.applyKeys(currentkf); - this._isOnKeyframe = true; - this._onKeyframe = currentkf; - this._onRegionData = regiondata; + this.saveStateKf = currentkf; + this.saveStateRegion = regiondata; } else if (leftkf && rightkf) { await this.interpolate(leftkf, rightkf); } @@ -259,9 +261,6 @@ export class Track extends React.Component { let leftNode = await(left.key) as Doc; let rightNode = await(right.key) as Doc; this.whitelist.forEach(key => { - console.log(key); - console.log(leftNode[key]); - console.log(rightNode[key]); if (leftNode[key] && rightNode[key] && typeof (leftNode[key]) === "number" && typeof (rightNode[key]) === "number") { //if it is number, interpolate let dif = NumCast(rightNode[key]) - NumCast(leftNode[key]); let deltaLeft = this.time - NumCast(left.time); @@ -307,6 +306,7 @@ export class Track extends React.Component { /** * creates a region (KEYFRAME.TSX stuff). */ + @action 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 @@ -323,6 +323,42 @@ export class Track extends React.Component { } } + @action + makeKeyData = (regiondata:RegionData, time: number, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time + console.log("KEYDATA GENERATING"); + 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 = this.makeCopy(); + TK.type = type; + //assuming there are already keyframes (for keeping keyframes in order, sorted by time) + if (doclist.length === 0) regiondata.keyframes!.push(TK); + doclist.forEach(kf => { + let index = doclist.indexOf(kf); + let kfTime = NumCast(kf.time); + 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 + makeCopy = () => { + let doc = new Doc(); + this.whitelist.forEach(key => { + let originalVal = this.props.node[key]; + doc.key = originalVal instanceof ObjectField ? originalVal[Copy]() : this.props.node[key]; + }); + return doc; + } /** * UI sstuff here. Not really much to change @@ -333,7 +369,7 @@ export class Track extends React.Component {
{ Doc.BrushDoc(this.props.node); }} onPointerOut={() => { Doc.UnBrushDoc(this.props.node); }} style={{ height: `${this._trackHeight}px` }}> {DocListCast(this.regions).map((region) => { - return ; + return ; })}
-- cgit v1.2.3-70-g09d2 From 0688541300ad0fa5cda7543d5bdc2e2c56246fbc Mon Sep 17 00:00:00 2001 From: Andrew Kim Date: Sun, 2 Feb 2020 10:40:45 -0500 Subject: cleanup (unstable) --- src/client/views/animationtimeline/Keyframe.tsx | 1 - src/client/views/animationtimeline/Timeline.tsx | 48 +------------------------ src/client/views/animationtimeline/Track.tsx | 5 --- 3 files changed, 1 insertion(+), 53 deletions(-) (limited to 'src') diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx index d53000460..482d066ba 100644 --- a/src/client/views/animationtimeline/Keyframe.tsx +++ b/src/client/views/animationtimeline/Keyframe.tsx @@ -137,7 +137,6 @@ interface IProps { tickSpacing: number; tickIncrement: number; time: number; - check: string; changeCurrentBarX: (x: number) => void; transform: Transform; makeKeyData: (region:RegionData, pos: number, kftype:KeyframeFunc.KeyframeType) => Doc; diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index 604827213..da9c361da 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -79,7 +79,6 @@ export class Timeline extends React.Component { // so a reaction can be made @observable public _isAuthoring = this.props.Document.isATOn; - @observable private _resizeReaction?: IReactionDisposer; @observable private _panelWidth = 0; /** @@ -119,19 +118,6 @@ export class Timeline extends React.Component { this.props.Document.isATOn = !this.props.Document.isATOn; //turns the boolean on, saying AT (animation timeline) is on this.toggleHandle(); }); - - this._resizeReaction = reaction( - () => this.props.PanelWidth, - () => { - // if (!this.props.parent._isAuthoring) { - // runInAction(() => { - console.log("resizing"); - // this.setOverviewWidth(); - // }); - // } - }, - ); - } componentWillUnmount() { @@ -527,30 +513,6 @@ export class Timeline extends React.Component { } - @observable private _check: string = ""; - @observable private _checkVisible: boolean = false; - @action - private onCheckClicked = (type: string) => { - if (type === "yes") { - this._check = "yes"; - } else if (type === "no") { - this._check = "no"; - } - } - - - /** - * check mark thing that needs to be fixed. Do not edit this, because it most likely change. - */ - @action - private checkCallBack = (visible: boolean) => { - this._checkVisible = visible; - if (!visible) { //when user confirms - this._check = ""; - } - - } - @action.bound changeLenths() { if (this._infoContainer.current) { @@ -583,7 +545,7 @@ export class Timeline extends React.Component {
- {DocListCast(this.children).map(doc => )} + {DocListCast(this.children).map(doc => )}
@@ -593,14 +555,6 @@ export class Timeline extends React.Component {
-
-
{ this.onCheckClicked("yes"); }}> - -
-
{ this.onCheckClicked("no"); }}> - -
-
{this.timelineToolBox(1)} diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx index 40350bc7a..d260792e1 100644 --- a/src/client/views/animationtimeline/Track.tsx +++ b/src/client/views/animationtimeline/Track.tsx @@ -21,7 +21,6 @@ interface IProps { tickIncrement: number; tickSpacing: number; timelineVisible: boolean; - check: string; changeCurrentBarX: (x: number) => void; } @@ -30,10 +29,6 @@ export class Track extends React.Component { @observable private _inner = React.createRef(); @observable private _currentBarXReaction: any; @observable private _timelineVisibleReaction: any; - @observable private _isOnKeyframe: boolean = false; - @observable private _onKeyframe: (Doc | undefined) = undefined; - @observable private _onRegionData: (Doc | undefined) = undefined; - @observable private _storedState: (Doc | undefined) = undefined; private readonly MAX_TITLE_HEIGHT = 75; private _trackHeight = 0; private whitelist = [ -- cgit v1.2.3-70-g09d2 From 7284810ee039c8baa456d0579fefba59eef444ca Mon Sep 17 00:00:00 2001 From: Andrew Kim Date: Sun, 2 Feb 2020 13:18:39 -0500 Subject: stable --- src/client/views/animationtimeline/Keyframe.tsx | 31 ++++++++++++------------ src/client/views/animationtimeline/Track.tsx | 32 +++++++++++++------------ 2 files changed, 32 insertions(+), 31 deletions(-) (limited to 'src') diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx index 482d066ba..393168ac3 100644 --- a/src/client/views/animationtimeline/Keyframe.tsx +++ b/src/client/views/animationtimeline/Keyframe.tsx @@ -60,9 +60,7 @@ export namespace KeyframeFunc { let keyframes = await DocListCastAsync(region.keyframes!); keyframes!.forEach((kf) => { let compTime = currentBarX; - if (ref) { - compTime = NumCast(ref.time); - } + if (ref) compTime = NumCast(ref.time); if (NumCast(kf.time) < compTime && NumCast(kf.time) >= time) { leftKf = kf; time = NumCast(kf.time); @@ -78,9 +76,7 @@ export namespace KeyframeFunc { let keyframes = await DocListCastAsync(region.keyframes!); keyframes!.forEach((kf) => { let compTime = currentBarX; - if (ref) { - compTime = NumCast(ref.time); - } + if (ref) compTime = NumCast(ref.time); if (NumCast(kf.time) > compTime && NumCast(kf.time) <= NumCast(time)) { rightKf = kf; time = NumCast(kf.time); @@ -181,16 +177,19 @@ export class Keyframe extends React.Component { @computed private get pixelFadeIn() { return KeyframeFunc.convertPixelTime(this.regiondata.fadeIn, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); } @computed private get pixelFadeOut() { return KeyframeFunc.convertPixelTime(this.regiondata.fadeOut, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); } - componentWillMount() { - if (!this.regiondata.keyframes) this.regiondata.keyframes = new List(); - let start = this.props.makeKeyData(this.regiondata, this.regiondata.position, KeyframeFunc.KeyframeType.end); - let fadeIn = this.props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.fadeIn, KeyframeFunc.KeyframeType.fade); - let fadeOut = this.props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, KeyframeFunc.KeyframeType.fade); - let finish = this.props.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; + componentDidMount() { + setTimeout(() => { //giving it a temporary 1sec delay... + if (!this.regiondata.keyframes) this.regiondata.keyframes = new List(); + let start = this.props.makeKeyData(this.regiondata, this.regiondata.position, KeyframeFunc.KeyframeType.end); + let fadeIn = this.props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.fadeIn, KeyframeFunc.KeyframeType.fade); + let fadeOut = this.props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, KeyframeFunc.KeyframeType.fade); + let finish = this.props.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; + this.forceUpdate(); //not needed, if setTimeout is gone... + }, 1000); } diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx index d260792e1..a20769142 100644 --- a/src/client/views/animationtimeline/Track.tsx +++ b/src/client/views/animationtimeline/Track.tsx @@ -10,7 +10,6 @@ import { Keyframe, KeyframeFunc, RegionData } from "./Keyframe"; import { Transform } from "../../util/Transform"; import { Copy } from "../../../new_fields/FieldSymbols"; import { ObjectField } from "../../../new_fields/ObjectField"; -import { fromCallback } from "bluebird"; interface IProps { node: Doc; @@ -153,15 +152,16 @@ export class Track extends React.Component { */ @action currentBarXReaction = () => { - return reaction(() => this.props.currentBarX, async () => { - let regiondata: (Doc | undefined) = await this.findRegion(this.time); - if (regiondata) { - this.props.node.hidden = false; - await this.timeChange(); - } else { - this.props.node.hidden = true; - this.props.node.opacity = 0; - } + return reaction(() => this.props.currentBarX, () => { + this.findRegion(this.time).then((regiondata: (Doc | undefined)) => { + if (regiondata) { + this.props.node.hidden = false; + this.timeChange(); + } else { + this.props.node.hidden = true; + this.props.node.opacity = 0; + } + }); }); } @@ -207,10 +207,12 @@ export class Track extends React.Component { let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata, this.time); //right keyframe, if it exists let currentkf: (Doc | undefined) = await this.calcCurrent(regiondata); //if the scrubber is on top of the keyframe if (currentkf) { + console.log("on a keyframe"); await this.applyKeys(currentkf); this.saveStateKf = currentkf; this.saveStateRegion = regiondata; } else if (leftkf && rightkf) { + console.log("interpolating!"); await this.interpolate(leftkf, rightkf); } } @@ -228,6 +230,8 @@ export class Track extends React.Component { this.props.node[key] = undefined; } else { let stored = kfNode[key]; + console.log(key); + console.log(stored); this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored; } }); @@ -287,14 +291,13 @@ export class Track extends React.Component { /** - * double click on track. Signalling keyframe creation. Problem with phantom regions + * double click on track. Signalling keyframe creation. */ @action onInnerDoubleClick = (e: React.MouseEvent) => { let inner = this._inner.current!; let offsetX = Math.round((e.clientX - inner.getBoundingClientRect().left) * this.props.transform.Scale); this.createRegion(KeyframeFunc.convertPixelTime(offsetX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); - this.forceUpdate(); } @@ -320,7 +323,6 @@ export class Track extends React.Component { @action makeKeyData = (regiondata:RegionData, time: number, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time - console.log("KEYDATA GENERATING"); let doclist = DocListCast(regiondata.keyframes)!; let existingkf: (Doc | undefined) = undefined; doclist.forEach(TK => { @@ -349,8 +351,8 @@ export class Track extends React.Component { makeCopy = () => { let doc = new Doc(); this.whitelist.forEach(key => { - let originalVal = this.props.node[key]; - doc.key = originalVal instanceof ObjectField ? originalVal[Copy]() : this.props.node[key]; + let originalVal = this.props.node[key]; + doc[key] = originalVal instanceof ObjectField ? originalVal[Copy]() : this.props.node[key]; }); return doc; } -- cgit v1.2.3-70-g09d2 From d5cda7cf9a67d0e47908dd510fbc8d43a3920f15 Mon Sep 17 00:00:00 2001 From: Andrew Kim Date: Sun, 2 Feb 2020 13:45:01 -0500 Subject: autokeyframing problem --- src/client/views/animationtimeline/Track.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx index a20769142..24a5d2b6c 100644 --- a/src/client/views/animationtimeline/Track.tsx +++ b/src/client/views/animationtimeline/Track.tsx @@ -28,6 +28,7 @@ export class Track extends React.Component { @observable private _inner = React.createRef(); @observable private _currentBarXReaction: any; @observable private _timelineVisibleReaction: any; + @observable private _autoKfReaction: any; private readonly MAX_TITLE_HEIGHT = 75; private _trackHeight = 0; private whitelist = [ @@ -59,7 +60,7 @@ export class Track extends React.Component { if (this.regions.length === 0) this.createRegion(this.time); this.props.node.hidden = false; this.props.node.opacity = 1; - //this.autoCreateKeyframe(); + this.autoCreateKeyframe(); }); } @@ -71,6 +72,7 @@ export class Track extends React.Component { //disposing reactions if (this._currentBarXReaction) this._currentBarXReaction(); if (this._timelineVisibleReaction) this._timelineVisibleReaction(); + //if (this._autoKfReaction) this._autoKfReaction(); }); } //////////////////////////////// @@ -121,6 +123,7 @@ export class Track extends React.Component { return this.whitelist.map(key => node[key]); }, (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 @@ -129,9 +132,8 @@ export class Track extends React.Component { this.makeKeyData(r, this.time, KeyframeFunc.KeyframeType.default); } } - // reaction.dispose(); }); - }); + }, {fireImmediately: false}); } // /** @@ -156,10 +158,15 @@ export class Track extends React.Component { this.findRegion(this.time).then((regiondata: (Doc | undefined)) => { if (regiondata) { this.props.node.hidden = false; + if (!this._autoKfReaction){ + // console.log("creating another reaction"); + // this._autoKfReaction = this.autoCreateKeyframe(); + } this.timeChange(); } else { this.props.node.hidden = true; this.props.node.opacity = 0; + //if (this._autoKfReaction) this._autoKfReaction(); } }); }); @@ -207,12 +214,10 @@ export class Track extends React.Component { let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata, this.time); //right keyframe, if it exists let currentkf: (Doc | undefined) = await this.calcCurrent(regiondata); //if the scrubber is on top of the keyframe if (currentkf) { - console.log("on a keyframe"); await this.applyKeys(currentkf); this.saveStateKf = currentkf; this.saveStateRegion = regiondata; } else if (leftkf && rightkf) { - console.log("interpolating!"); await this.interpolate(leftkf, rightkf); } } @@ -229,9 +234,7 @@ export class Track extends React.Component { if (!kfNode[key]) { this.props.node[key] = undefined; } else { - let stored = kfNode[key]; - console.log(key); - console.log(stored); + let stored = kfNode[key]; this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored; } }); -- cgit v1.2.3-70-g09d2 From 84d5d8808bc0a51ae7a45f6415d9bd926c78bf6c Mon Sep 17 00:00:00 2001 From: andrewdkim Date: Sun, 2 Feb 2020 15:56:16 -0500 Subject: changes --- src/client/views/animationtimeline/Track.tsx | 105 ++++++++++++++------------- 1 file changed, 56 insertions(+), 49 deletions(-) (limited to 'src') diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx index 24a5d2b6c..e352cdbb5 100644 --- a/src/client/views/animationtimeline/Track.tsx +++ b/src/client/views/animationtimeline/Track.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { observer } from "mobx-react"; -import { observable, reaction, action, IReactionDisposer, computed, runInAction, autorun, toJS, isObservableArray, IObservableArray, trace } from "mobx"; +import { observable, reaction, action, IReactionDisposer, computed, runInAction, autorun, toJS, isObservableArray, IObservableArray, trace, observe, intercept } from "mobx"; import "./Track.scss"; import { Doc, DocListCastAsync, DocListCast, Field } from "../../../new_fields/Doc"; import { listSpec } from "../../../new_fields/Schema"; @@ -28,20 +28,22 @@ export class Track extends React.Component { @observable private _inner = React.createRef(); @observable private _currentBarXReaction: any; @observable private _timelineVisibleReaction: any; - @observable private _autoKfReaction: any; + @observable private _autoKfReaction: any; private readonly MAX_TITLE_HEIGHT = 75; private _trackHeight = 0; - private whitelist = [ + private primitiveWhitelist = [ "x", "y", "width", "height", - "data", "opacity" ]; + private objectWhitelist = [ + "data" + ] @computed private get regions() { return Cast(this.props.node.regions, listSpec(Doc)) as List; } - @computed private get time() {return NumCast(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));} + @computed private get time() { return NumCast(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); } ////////// life cycle functions/////////////// componentWillMount() { @@ -55,7 +57,7 @@ export class Track extends React.Component { 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; @@ -72,7 +74,7 @@ export class Track extends React.Component { //disposing reactions if (this._currentBarXReaction) this._currentBarXReaction(); if (this._timelineVisibleReaction) this._timelineVisibleReaction(); - //if (this._autoKfReaction) this._autoKfReaction(); + if (this._autoKfReaction) this._autoKfReaction(); }); } //////////////////////////////// @@ -89,12 +91,12 @@ export class Track extends React.Component { let kf = keyframes[kfIndex] as Doc; //index in the keyframe if (!kf) return; if (kf.type === KeyframeFunc.KeyframeType.default) { // only save for non-fades - kf.key = this.makeCopy(); + kf.key = this.makeCopy(); let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(this.saveStateRegion!, this.time, kf); // lef keyframe, if it exists let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(this.saveStateRegion!, this.time, kf); //right keyframe, if it exists if (leftkf!.type === KeyframeFunc.KeyframeType.fade) { //replicating this keyframe to fades let edge: (Doc | undefined) = await KeyframeFunc.calcMinLeft(this.saveStateRegion!, this.time, leftkf!); - edge!.key = this.makeCopy(); + edge!.key = this.makeCopy(); leftkf!.key = this.makeCopy(); (Cast(edge!.key, Doc)! as Doc).opacity = 0.1; (Cast(leftkf!.key, Doc)! as Doc).opacity = 1; @@ -102,13 +104,13 @@ export class Track extends React.Component { if (rightkf!.type === KeyframeFunc.KeyframeType.fade) { let edge: (Doc | undefined) = await KeyframeFunc.calcMinRight(this.saveStateRegion!, this.time, rightkf!); edge!.key = this.makeCopy(); - rightkf!.key = this.makeCopy(); + rightkf!.key = this.makeCopy(); (Cast(edge!.key, Doc)! as Doc).opacity = 0.1; (Cast(rightkf!.key, Doc)! as Doc).opacity = 1; } } keyframes[kfIndex] = kf; - this.saveStateKf = undefined; + this.saveStateKf = undefined; this.saveStateRegion = undefined; } @@ -119,21 +121,26 @@ export class Track extends React.Component { @action autoCreateKeyframe = () => { const { node } = this.props; + const objects = this.objectWhitelist.map(key => node[key]); + intercept(this.props.node, change => { + console.log(change); + return change; + }); return reaction(() => { - return this.whitelist.map(key => node[key]); + return [...this.primitiveWhitelist.map(key => node[key]), ...objects]; }, (changed, reaction) => { - console.log("autocreated"); + console.log("autocreated"); console.log(changed); //check for region this.findRegion(this.time).then((region) => { - if (region !== undefined){ //if region at scrub time exist + if (region !== undefined) { //if region at scrub time exist let r = region as any as RegionData; //for some region is returning undefined... which is not the case - if (DocListCast(r.keyframes).find(kf => kf.time === this.time) === undefined ){ //basically when there is no additional keyframe at that timespot - this.makeKeyData(r, this.time, KeyframeFunc.KeyframeType.default); - } + if (DocListCast(r.keyframes).find(kf => kf.time === this.time) === undefined) { //basically when there is no additional keyframe at that timespot + this.makeKeyData(r, this.time, KeyframeFunc.KeyframeType.default); + } } }); - }, {fireImmediately: false}); + }, { fireImmediately: false }); } // /** @@ -158,10 +165,10 @@ export class Track extends React.Component { this.findRegion(this.time).then((regiondata: (Doc | undefined)) => { if (regiondata) { this.props.node.hidden = false; - if (!this._autoKfReaction){ - // console.log("creating another reaction"); - // this._autoKfReaction = this.autoCreateKeyframe(); - } + if (!this._autoKfReaction) { + // console.log("creating another reaction"); + // this._autoKfReaction = this.autoCreateKeyframe(); + } this.timeChange(); } else { this.props.node.hidden = true; @@ -197,8 +204,8 @@ export class Track extends React.Component { // }); // } - @observable private saveStateKf:(Doc | undefined) = undefined; - @observable private saveStateRegion: (Doc|undefined) = undefined; + @observable private saveStateKf: (Doc | undefined) = undefined; + @observable private saveStateRegion: (Doc | undefined) = undefined; /**w * when scrubber position changes. Need to edit the logic @@ -215,8 +222,8 @@ export class Track extends React.Component { let currentkf: (Doc | undefined) = await this.calcCurrent(regiondata); //if the scrubber is on top of the keyframe if (currentkf) { await this.applyKeys(currentkf); - this.saveStateKf = currentkf; - this.saveStateRegion = regiondata; + this.saveStateKf = currentkf; + this.saveStateRegion = regiondata; } else if (leftkf && rightkf) { await this.interpolate(leftkf, rightkf); } @@ -230,12 +237,12 @@ export class Track extends React.Component { @action private applyKeys = async (kf: Doc) => { let kfNode = await Cast(kf.key, Doc) as Doc; - this.whitelist.forEach(key => { + this.primitiveWhitelist.forEach(key => { if (!kfNode[key]) { this.props.node[key] = undefined; } else { - let stored = kfNode[key]; - this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored; + let stored = kfNode[key]; + this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored; } }); } @@ -260,17 +267,17 @@ export class Track extends React.Component { */ @action interpolate = async (left: Doc, right: Doc) => { - let leftNode = await(left.key) as Doc; - let rightNode = await(right.key) as Doc; - this.whitelist.forEach(key => { + let leftNode = await (left.key) as Doc; + let rightNode = await (right.key) as Doc; + this.primitiveWhitelist.forEach(key => { if (leftNode[key] && rightNode[key] && typeof (leftNode[key]) === "number" && typeof (rightNode[key]) === "number") { //if it is number, interpolate - let dif = NumCast(rightNode[key]) - NumCast(leftNode[key]); + let dif = NumCast(rightNode[key]) - NumCast(leftNode[key]); let deltaLeft = this.time - NumCast(left.time); - let ratio = deltaLeft / (NumCast(right.time) - NumCast(left.time)); - this.props.node[key] = NumCast(leftNode[key]) + (dif * ratio); + let ratio = deltaLeft / (NumCast(right.time) - NumCast(left.time)); + this.props.node[key] = NumCast(leftNode[key]) + (dif * ratio); } else { // case data let stored = leftNode[key]; - this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored; + this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored; } }); } @@ -325,8 +332,8 @@ export class Track extends React.Component { } @action - makeKeyData = (regiondata:RegionData, time: number, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time - let doclist = DocListCast(regiondata.keyframes)!; + 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; @@ -338,26 +345,26 @@ export class Track extends React.Component { TK.key = this.makeCopy(); TK.type = type; //assuming there are already keyframes (for keeping keyframes in order, sorted by time) - if (doclist.length === 0) regiondata.keyframes!.push(TK); + if (doclist.length === 0) regiondata.keyframes!.push(TK); doclist.forEach(kf => { - let index = doclist.indexOf(kf); + let index = doclist.indexOf(kf); let kfTime = NumCast(kf.time); - if ((kfTime < time && index === doclist.length - 1) || (kfTime < time && time < NumCast(doclist[index + 1].time))){ - regiondata.keyframes!.splice(index + 1, 0, TK); - return; + 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; + return TK; } - @action + @action makeCopy = () => { - let doc = new Doc(); - this.whitelist.forEach(key => { + let doc = new Doc(); + this.primitiveWhitelist.forEach(key => { let originalVal = this.props.node[key]; - doc[key] = originalVal instanceof ObjectField ? originalVal[Copy]() : this.props.node[key]; + doc[key] = originalVal instanceof ObjectField ? originalVal[Copy]() : this.props.node[key]; }); - return doc; + return doc; } /** -- cgit v1.2.3-70-g09d2 From 6b8060dd969b314728a86fcd2fefc0e667ba079b Mon Sep 17 00:00:00 2001 From: Andrew Kim Date: Wed, 5 Feb 2020 00:22:54 -0500 Subject: everything works except data tracking --- src/client/views/animationtimeline/Track.tsx | 76 ++++++++++++++++------------ 1 file changed, 45 insertions(+), 31 deletions(-) (limited to 'src') 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 { @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 { "y", "width", "height", - "opacity" + "opacity", + "data", ]; private objectWhitelist = [ "data" - ] + ]; @computed private get regions() { return Cast(this.props.node.regions, listSpec(Doc)) as List; } @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 { 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 { (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 { 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 { }); } - // /** - // * 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))[i].key = Doc.MakeCopy(this.props.node, true); - // if (i === 0 || i === 3) { - // DocListCast(((Cast(region, Doc) as Doc).keyframes as List))[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))[i].key = this.makeCopy(); + if (i === 0 || i === 3) { //manually inputing fades + (DocListCast(((Cast(region, Doc) as Doc).keyframes as List))[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 { 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 { 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 { 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; -- cgit v1.2.3-70-g09d2 From c1846375f87b82ea2391f0e56bd1606e34a8f69b Mon Sep 17 00:00:00 2001 From: Andrew Kim Date: Wed, 5 Feb 2020 01:01:54 -0500 Subject: major changes --- src/client/views/animationtimeline/Track.tsx | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx index 32fa1d9ca..09ebbab14 100644 --- a/src/client/views/animationtimeline/Track.tsx +++ b/src/client/views/animationtimeline/Track.tsx @@ -91,6 +91,17 @@ export class Track extends React.Component { let keyframes: List = (Cast(this.saveStateRegion!.keyframes, listSpec(Doc)) as List); let kfIndex: number = keyframes.indexOf(this.saveStateKf!); let kf = keyframes[kfIndex] as Doc; //index in the keyframe + 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; + } + }); + this._newKeyframe = false; + } if (!kf) return; if (kf.type === KeyframeFunc.KeyframeType.default) { // only save for non-fades kf.key = this.makeCopy(); @@ -110,21 +121,10 @@ export class Track extends React.Component { (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; } @@ -223,7 +223,10 @@ export class Track extends React.Component { timeChange = async () => { if (this.saveStateKf !== undefined) { await this.saveKeyframe(); - } + } else if (this._newKeyframe){ + console.log("CALLED"); + 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 -- cgit v1.2.3-70-g09d2