aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/animationtimeline/Keyframe.tsx31
-rw-r--r--src/client/views/animationtimeline/Track.tsx32
2 files changed, 32 insertions, 31 deletions
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<IProps> {
@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<Doc>();
- 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<Doc>();
+ 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<IProps> {
*/
@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<IProps> {
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<IProps> {
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<IProps> {
/**
- * 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<IProps> {
@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<IProps> {
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;
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 07:29:24 +0000