aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/nodes/Keyframe.tsx46
-rw-r--r--src/client/views/nodes/Timeline.tsx3
-rw-r--r--src/client/views/nodes/Track.tsx7
3 files changed, 27 insertions, 29 deletions
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index 4cba6e8f9..69303d673 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -4,7 +4,7 @@ import "./Timeline.scss";
import "./../globalCssVariables.scss";
import { observer, Observer } from "mobx-react";
import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS, isComputedProp } from "mobx";
-import { Doc, DocListCast } from "../../../new_fields/Doc";
+import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
import { Cast, FieldValue, StrCast, NumCast } from "../../../new_fields/Types";
import { List } from "../../../new_fields/List";
import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../new_fields/Schema";
@@ -76,8 +76,6 @@ interface IProps {
export class Keyframe extends React.Component<IProps> {
@observable private _bar = React.createRef<HTMLDivElement>();
- @observable private _firstkf: (Doc | undefined) = undefined;
- @observable private _lastkf: (Doc | undefined) = undefined;
@computed
private get regiondata() {
@@ -90,7 +88,6 @@ export class Keyframe extends React.Component<IProps> {
return Cast(this.props.node.regions, listSpec(Doc)) as List<Doc>;
}
-
@computed
private get firstKeyframe(){
let first: (Doc | undefined) = undefined;
@@ -126,12 +123,11 @@ export class Keyframe extends React.Component<IProps> {
@action
- componentDidMount() {
-
- let fadeIn = this.makeKeyData(this.regiondata.position + this.regiondata.fadeIn, KeyframeFunc.KeyframeType.fade)!;
- let fadeOut = this.makeKeyData(this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, KeyframeFunc.KeyframeType.fade)!;
- let start = this.makeKeyData(this.regiondata.position, KeyframeFunc.KeyframeType.fade)!;
- let finish = this.makeKeyData(this.regiondata.position + this.regiondata.duration, KeyframeFunc.KeyframeType.fade)!;
+ async componentDidMount() {
+ let fadeIn = await this.makeKeyData(this.regiondata.position + this.regiondata.fadeIn, KeyframeFunc.KeyframeType.fade)!;
+ let fadeOut = await this.makeKeyData(this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, KeyframeFunc.KeyframeType.fade)!;
+ let start = await this.makeKeyData(this.regiondata.position, KeyframeFunc.KeyframeType.fade)!;
+ let finish = await this.makeKeyData(this.regiondata.position + this.regiondata.duration, KeyframeFunc.KeyframeType.fade)!;
(fadeIn.key! as Doc).opacity = 1;
(fadeOut.key! as Doc).opacity = 1;
(start.key! as Doc) .opacity = 0.1;
@@ -158,19 +154,27 @@ export class Keyframe extends React.Component<IProps> {
});
}
+
@action
- makeKeyData = (kfpos: number, type:KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time
- DocListCast(this.regiondata.keyframes!).forEach(TK => { //TK is TimeAndKey
- if (TK.time === kfpos) {
- return TK;
- }
- });
+ makeKeyData = async (kfpos: number, type:KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time
+ let doclist = await DocListCastAsync(this.regiondata.keyframes!);
+ let existingkf:(Doc | undefined) = undefined;
+ if (doclist) {
+ doclist.forEach(TK => { //TK is TimeAndKey
+ if (TK.time === kfpos) {
+ existingkf = TK;
+ }
+ });
+ }
+ if (existingkf) {
+ return existingkf;
+ }
let TK: Doc = new Doc();
TK.time = kfpos;
TK.key = Doc.MakeCopy(this.props.node, true);
TK.type = type;
this.regiondata.keyframes!.push(TK);
- return TK;
+ return TK;
}
@action
@@ -297,9 +301,11 @@ export class Keyframe extends React.Component<IProps> {
e.stopPropagation();
let bar = this._bar.current!;
let offset = e.clientX - bar.getBoundingClientRect().left;
- let position = NumCast(this.regiondata.position);
- let tk = this.makeKeyData(Math.round(position + offset));
- this.props.changeCurrentBarX(NumCast(Math.round(position + offset))); //first move the keyframe to the correct location and make a copy so the correct file gets coppied
+ if (offset > this.regiondata.fadeIn && offset < this.regiondata.duration - this.regiondata.fadeOut) { //make sure keyframe is not created inbetween fades and ends
+ let position = NumCast(this.regiondata.position);
+ this.makeKeyData(Math.round(position + offset));
+ this.props.changeCurrentBarX(NumCast(Math.round(position + offset))); //first move the keyframe to the correct location and make a copy so the correct file gets coppied
+ }
}
@action
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index a996b5bff..2b3563963 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -74,8 +74,7 @@ export class Timeline extends CollectionSubView(Document) {
componentDidMount() {
if (StrCast(this.props.Document.type) === "video") {
- let dv = DocumentManager.Instance.getDocumentView(this.props.Document);
- console.log(toJS(dv));
+
}
runInAction(() => {
reaction(() => {
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index 4ed2ded85..fe9034e8a 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -53,7 +53,6 @@ export class Track extends React.Component<IProps> {
@action
keyReaction = () => {
return reaction(() => {
- console.log("keyreaction ran");
let keys = Doc.allKeys(this.props.node);
return keys.map(key => FieldValue(this.props.node[key]));
}, data => {
@@ -114,10 +113,6 @@ export class Track extends React.Component<IProps> {
let leftkf: (Doc | undefined) = this.calcMinLeft(region!); // lef keyframe, if it exists
let rightkf: (Doc | undefined) = this.calcMinRight(region!); //right keyframe, if it exists
let currentkf: (Doc | undefined) = this.calcCurrent(region!); //if the scrubber is on top of the keyframe
-
- //console.log(currentkf);
- // console.log(leftkf);
- // console.log(rightkf);
if (currentkf){
this.applyKeys(currentkf.key as Doc);
} else {
@@ -154,7 +149,6 @@ export class Track extends React.Component<IProps> {
}
});
}
- console.log("finished applying keys");
}
@action
@@ -187,7 +181,6 @@ export class Track extends React.Component<IProps> {
let compTime = this.props.currentBarX;
if (ref){
compTime = NumCast(ref.time);
- //console.log(compTime);
}
if (NumCast(kf.time) < compTime && NumCast(kf.time) > NumCast(time)) {
leftKf = kf;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-15 08:58:03 +0000