aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorandrewdkim <adkim414@gmail.com>2019-09-06 11:00:37 -0400
committerandrewdkim <adkim414@gmail.com>2019-09-06 11:00:37 -0400
commitc7678db105f952e7562f1b573266fb295e13cf7b (patch)
tree641c5b19f050ca90897e289bf0cd08ad73511210
parent884a5ec15b1395690c78d18e8d2509b3619c8817 (diff)
initial transfer commit
-rw-r--r--src/client/views/animationtimeline/Track.tsx175
1 files changed, 90 insertions, 85 deletions
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 13fe55e80..8f0e2d1cc 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -10,15 +10,16 @@ import { Keyframe, KeyframeFunc, RegionData } from "./Keyframe";
import { Transform } from "../../util/Transform";
import { RichTextField } from "../../../new_fields/RichTextField";
import { DateField } from "../../../new_fields/DateField";
+import { Copy } from "../../../new_fields/FieldSymbols";
interface IProps {
node: Doc;
currentBarX: number;
transform: Transform;
- collection: Doc;
- time: number;
- tickIncrement: number;
- tickSpacing: number;
+ collection: Doc;
+ time: number;
+ tickIncrement: number;
+ tickSpacing: number;
changeCurrentBarX: (x: number) => void;
}
@@ -26,11 +27,11 @@ interface IProps {
export class Track extends React.Component<IProps> {
@observable private _inner = React.createRef<HTMLDivElement>();
@observable private _reactionDisposers: IReactionDisposer[] = [];
- @observable private _currentBarXReaction: any;
- @observable private _isOnKeyframe: boolean = false;
- @observable private _onKeyframe: (Doc | undefined) = undefined;
- @observable private _onRegionData : ( Doc | undefined) = undefined;
- @observable private _leftCurrKeyframe: (Doc | undefined) = undefined;
+ @observable private _currentBarXReaction: any;
+ @observable private _isOnKeyframe: boolean = false;
+ @observable private _onKeyframe: (Doc | undefined) = undefined;
+ @observable private _onRegionData: (Doc | undefined) = undefined;
+ @observable private _leftCurrKeyframe: (Doc | undefined) = undefined;
@computed
private get regions() {
@@ -59,36 +60,36 @@ export class Track extends React.Component<IProps> {
}
@action
- saveKeyframe = async (ref:Doc, regiondata:Doc) => {
- let keyframes:List<Doc> = (Cast(regiondata.keyframes, listSpec(Doc)) as List<Doc>);
- let kfIndex:number = keyframes.indexOf(ref);
- let kf = keyframes[kfIndex] as Doc;
+ saveKeyframe = async (ref: Doc, regiondata: Doc) => {
+ let keyframes: List<Doc> = (Cast(regiondata.keyframes, listSpec(Doc)) as List<Doc>);
+ let kfIndex: number = keyframes.indexOf(ref);
+ let kf = keyframes[kfIndex] as Doc;
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
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!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), 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!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), 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;
(Cast(rightkf!.key, Doc)! as Doc).opacity = 1;
- }
+ }
}
- keyframes[kfIndex] = kf;
- this._onKeyframe = undefined;
- this._onRegionData = undefined;
- this._isOnKeyframe = false;
+ keyframes[kfIndex] = kf;
+ this._onKeyframe = undefined;
+ this._onRegionData = undefined;
+ this._isOnKeyframe = false;
}
-
- @action
+
+ @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));
@@ -96,8 +97,8 @@ export class Track extends React.Component<IProps> {
this.props.node.hidden = false;
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;
+ this.props.node.hidden = true;
+ this.props.node.opacity = 0;
}
}, { fireImmediately: true });
}
@@ -105,8 +106,8 @@ export class Track extends React.Component<IProps> {
@action
timeChange = async (time: number) => {
- if (this._isOnKeyframe && this._onKeyframe && this._onRegionData) {
- await this.saveKeyframe(this._onKeyframe, this._onRegionData);
+ 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
if (regiondata) {
@@ -115,10 +116,10 @@ export class Track extends React.Component<IProps> {
let currentkf: (Doc | undefined) = await this.calcCurrent(regiondata); //if the scrubber is on top of the keyframe
if (currentkf) {
await this.applyKeys(currentkf);
- this._leftCurrKeyframe = currentkf;
- this._isOnKeyframe = true;
- this._onKeyframe = currentkf;
- this._onRegionData = regiondata;
+ this._leftCurrKeyframe = currentkf;
+ this._isOnKeyframe = true;
+ this._onKeyframe = currentkf;
+ this._onRegionData = regiondata;
} else if (leftkf && rightkf) {
await this.interpolate(leftkf, rightkf, regiondata);
}
@@ -127,28 +128,32 @@ export class Track extends React.Component<IProps> {
@action
private applyKeys = async (kf: Doc) => {
- let kfNode = await Cast(kf.key, Doc) as Doc;
- let docFromApply = kfNode;
- console.log(Doc.allKeys(docFromApply));
- if (this.filterKeys(Doc.allKeys(this.props.node)).length > this.filterKeys(Doc.allKeys(kfNode)).length) docFromApply = this.props.node;
+ let kfNode = await Cast(kf.key, Doc) as Doc;
+ let docFromApply = kfNode;
+ console.log(Doc.allKeys(docFromApply));
+ 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 => {
console.log(key);
if (!kfNode[key]) {
- this.props.node[key] = undefined;
+ this.props.node[key] = undefined;
} else {
if (key === "data") {
- if (this.props.node.type === "text"){
- let nodeData = (kfNode[key] as RichTextField).Data;
- this.props.node[key] = new RichTextField(nodeData);
+ if (this.props.node.type === "text") {
+ let nodeData = (kfNode[key] as RichTextField).Data;
+ this.props.node[key] = new RichTextField(nodeData);
}
} else if (key === "creationDate") {
- this.props.node[key] = new DateField();
- } else {
- this.props.node[key] = kfNode[key];
+ this.props.node[key] = new DateField();
+ } else {
+ let stored = kfNode[key];
+ if (stored instanceof DateField) {
+ stored = stored[Copy]();
+ }
+ this.props.node[key] = stored;
}
}
-
+
});
}
@@ -156,7 +161,7 @@ export class Track extends React.Component<IProps> {
@action
private filterKeys = (keys: string[]): string[] => {
return keys.reduce((acc: string[], key: string) => {
- if (key !== "regions" && key !== "cursors" && key !== "hidden" && key !== "nativeHeight" && key !== "nativeWidth" && key !== "schemaColumns" && key !== "creationDate") acc.push(key);
+ if (key !== "regions" && key !== "cursors" && key !== "hidden" && key !== "nativeHeight" && key !== "nativeWidth" && key !== "schemaColumns" && key !== "creationDate") acc.push(key);
return acc;
}, []);
}
@@ -164,57 +169,57 @@ export class Track extends React.Component<IProps> {
@action
calcCurrent = async (region: Doc) => {
let currentkf: (Doc | undefined) = undefined;
- let keyframes = await DocListCastAsync(region.keyframes!);
+ 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;
});
return currentkf;
}
-
+
@action
- interpolate = async (left: Doc, right: Doc, regiondata:Doc) => {
+ 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<number> = (await ((regiondata.functions as List<Doc>)[indexLeft] as Doc).interpolationY as List<number>)!;
- let realIndex = (interY.length - 1) * timeratio;
- let xIndex = Math.floor(realIndex);
- let yValue = interY[xIndex];
- let secondYOffset:number = yValue;
+ let keyframes = (await DocListCastAsync(regiondata.keyframes!))!;
+ let indexLeft = keyframes.indexOf(left);
+ let interY: List<number> = (await ((regiondata.functions as List<Doc>)[indexLeft] as Doc).interpolationY as List<number>)!;
+ 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<number> = await ((regiondata.functions as List<Doc>)[indexLeft] as Doc).pathX as List<number>;
- let pathY:List<number> = await ((regiondata.functions as List<Doc>)[indexLeft] as Doc).pathY as List<number>;
- let proposedX = 0;
- let proposedY = 0;
+ secondYOffset = interY[xIndex] + ((realIndex - xIndex) / 1) * (interY[xIndex + 1] - interY[xIndex]) - minY;
+ }
+ let finalRatio = secondYOffset / (maxY - minY);
+ let pathX: List<number> = await ((regiondata.functions as List<Doc>)[indexLeft] as Doc).pathX as List<number>;
+ let pathY: List<number> = await ((regiondata.functions as List<Doc>)[indexLeft] as Doc).pathY as List<number>;
+ let proposedX = 0;
+ let proposedY = 0;
if (pathX.length !== 0) {
- let realPathCorrespondingIndex = finalRatio * (pathX.length - 1);
- let pathCorrespondingIndex = Math.floor(realPathCorrespondingIndex);
+ 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];
+ 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]);
+ 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 => {
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;
+ 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;
@@ -222,13 +227,13 @@ export class Track extends React.Component<IProps> {
}
} else {
if (key === "data") {
- if (this.props.node.type === "text"){
- let nodeData = StrCast((leftNode[key] as RichTextField).Data);
- let currentNodeData = StrCast((this.props.node[key] as RichTextField).Data);
+ if (this.props.node.type === "text") {
+ let nodeData = StrCast((leftNode[key] as RichTextField).Data);
+ let currentNodeData = StrCast((this.props.node[key] as RichTextField).Data);
if (nodeData !== currentNodeData) {
- this.props.node[key] = new RichTextField(nodeData);
+ this.props.node[key] = new RichTextField(nodeData);
}
- }
+ }
} else if (key === "creationDate") {
} else {
@@ -239,9 +244,9 @@ export class Track extends React.Component<IProps> {
}
@action
- findRegion = async (time: number) => {
- let foundRegion:(Doc | undefined) = undefined;
- let regions = await DocListCastAsync(this.regions);
+ findRegion = async (time: number) => {
+ let foundRegion: (Doc | undefined) = undefined;
+ let regions = await DocListCastAsync(this.regions);
regions!.forEach(region => {
region = region as RegionData;
if (time >= NumCast(region.position) && time <= (NumCast(region.position) + NumCast(region.duration))) {
@@ -262,15 +267,15 @@ export class Track extends React.Component<IProps> {
let regiondata = KeyframeFunc.defaultKeyframe();
regiondata.position = position;
let rightRegion = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.right, regiondata, this.regions);
-
+
if (rightRegion && rightRegion.position - regiondata.position <= 4000) {
regiondata.duration = rightRegion.position - regiondata.position;
- }
- if(this.regions.length === 0 || !rightRegion || (rightRegion && rightRegion.position - regiondata.position >= NumCast(regiondata.fadeIn) + NumCast(regiondata.fadeOut))){
+ }
+ if (this.regions.length === 0 || !rightRegion || (rightRegion && rightRegion.position - regiondata.position >= NumCast(regiondata.fadeIn) + NumCast(regiondata.fadeOut))) {
this.regions.push(regiondata);
return regiondata;
}
-
+
}
@@ -280,7 +285,7 @@ export class Track extends React.Component<IProps> {
<div className="track">
<div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick}>
{DocListCast(this.regions).map((region) => {
- return <Keyframe {...this.props} RegionData={region}/>;
+ return <Keyframe {...this.props} RegionData={region} />;
})}
</div>
</div>