aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/Keyframe.tsx61
-rw-r--r--src/client/views/nodes/Track.tsx147
2 files changed, 101 insertions, 107 deletions
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index 122bcb36e..6580664a6 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -18,7 +18,6 @@ export namespace KeyframeFunc{
export enum KeyframeType{
fade = "fade",
default = "default",
- new = "new"
}
export enum Direction{
left = "left",
@@ -91,23 +90,27 @@ export class Keyframe extends React.Component<IProps> {
componentWillMount(){
+
+
if (!this.regiondata.keyframes){
this.regiondata.keyframes = new List<Doc>();
+
}
}
@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)!;
- (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;
-
+
+ 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)!;
+ (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;
+
observe(this.regiondata, change => {
if (change.type === "update"){
fadeIn.time = this.regiondata.position + this.regiondata.fadeIn;
@@ -129,17 +132,8 @@ export class Keyframe extends React.Component<IProps> {
});
}
-
- componentWillUnmount() {
-
- }
-
- componentWillUpdate(){
-
- }
-
@action
- makeKeyData = (kfpos: number, type:KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.new) => { //Kfpos is mouse offsetX, representing time
+ makeKeyData = (kfpos: number, type:KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time
let hasData = false;
this.regiondata.keyframes!.forEach(TK => { //TK is TimeAndKey
TK = TK as Doc;
@@ -150,13 +144,7 @@ export class Keyframe extends React.Component<IProps> {
if (!hasData) {
let TK: Doc = new Doc();
TK.time = kfpos;
- console.log(kfpos + " from makeKeyDat");
- if (type === KeyframeFunc.KeyframeType.fade){
- TK.key = Doc.MakeAlias(this.props.node);
- } else {
- TK.key = Doc.MakeCopy(this.props.node, true);
- console.log(toJS(TK.key));
- }
+ TK.key = Doc.MakeCopy(this.props.node, true);
TK.type = type;
this.regiondata.keyframes!.push(TK);
return TK;
@@ -180,9 +168,10 @@ export class Keyframe extends React.Component<IProps> {
e.stopPropagation();
let left = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.left, this.regiondata, this.regions)!;
let right = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.right, this.regiondata, this.regions!);
- let bar = this._bar.current!;
- let barX = bar.getBoundingClientRect().left;
- let offset = e.clientX - barX;
+ // let bar = this._bar.current!;
+ // let barX = bar.getBoundingClientRect().left;
+ // let offset = e.clientX - barX;
+ let prevX = this.regiondata.position;
let futureX = this.regiondata.position + e.movementX;
if (futureX <= 0) {
this.regiondata.position = 0;
@@ -193,7 +182,13 @@ export class Keyframe extends React.Component<IProps> {
} else {
this.regiondata.position = futureX;
}
-
+ for (let i = 0; i < this.regiondata.keyframes!.length; i++) {
+ if ((this.regiondata.keyframes![i] as Doc).type !== KeyframeFunc.KeyframeType.fade){
+ let movement = this.regiondata.position - prevX;
+ (this.regiondata.keyframes![i] as Doc).time = NumCast((this.regiondata.keyframes![i] as Doc).time) + movement;
+ }
+ }
+ this.forceUpdate();
}
@action
@@ -246,8 +241,8 @@ export class Keyframe extends React.Component<IProps> {
let barX = bar.getBoundingClientRect().right;
let offset = e.clientX - barX;
if (this.regiondata.duration + offset < this.regiondata.fadeIn + this.regiondata.fadeOut){
- this.regiondata.duration = this.regiondata.fadeIn + this.regiondata.fadeOut;
- } else {
+ this.regiondata.duration = this.regiondata.fadeIn + this.regiondata.fadeOut;
+ }else {
this.regiondata.duration += offset;
}
}
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index b00001e54..d802a704c 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -1,6 +1,6 @@
import * as React from "react";
import { observer } from "mobx-react";
-import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS, IObservableObject } from "mobx";
+import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS, IObservableObject, runInAction } from "mobx";
import "./Track.scss";
import { Doc, DocListCastAsync, DocListCast } from "../../../new_fields/Doc";
import { Document, listSpec, createSchema, makeInterface, defaultSpec } from "../../../new_fields/Schema";
@@ -8,11 +8,6 @@ import { FieldValue, Cast, NumCast, BoolCast } from "../../../new_fields/Types";
import { List } from "../../../new_fields/List";
import { Keyframe, KeyframeFunc, RegionData } from "./Keyframe";
import { FlyoutProps } from "./Timeline";
-import { AddComparisonParameters } from "../../northstar/model/idea/idea";
-import { RichTextField } from "../../../new_fields/RichTextField";
-import { node } from "prop-types";
-import { NorthstarSettings } from "../../northstar/manager/Gateway";
-import { getForkTsCheckerWebpackPluginHooks } from "fork-ts-checker-webpack-plugin/lib/hooks";
interface IProps {
node: Doc;
@@ -21,14 +16,12 @@ interface IProps {
setFlyout: (props:FlyoutProps) => any;
}
-
@observer
export class Track extends React.Component<IProps> {
@observable private _inner = React.createRef<HTMLDivElement>();
- @observable private _onInterpolate:boolean = false;
-
- private _reactionDisposers: IReactionDisposer[] = [];
- private _selectionManagerChanged?: IReactionDisposer;
+ @observable private _reactionDisposers: IReactionDisposer[] = [];
+ @observable private _keyReaction:any; //reaction that is used to dispose when necessary
+ @observable private _currentBarXReaction:any;
@computed
private get regions() {
@@ -39,85 +32,96 @@ export class Track extends React.Component<IProps> {
if (!this.props.node.regions){
this.props.node.regions = new List<Doc>();
}
- this.props.node.opacity = 1;
+ this.props.node.opacity = 1;
+ this.props.node.hidden = true;
}
- @action
componentDidMount() {
- this.props.node.hidden = true;
+ runInAction(() => {
+ this._keyReaction = this.keyReaction();
+ this._currentBarXReaction = this.currentBarXReaction();
+ });
+ }
- this._reactionDisposers.push(reaction(() => this.props.currentBarX, () => {
- let regiondata: (Doc | undefined) = this.findRegion(this.props.currentBarX);
- if (regiondata) {
- this.timeChange(this.props.currentBarX); //first interpolates over to that position;
- (Cast(regiondata.keyframes!, listSpec(Doc)) as List<Doc>).forEach((kf) => {
- kf = kf as Doc;
- if(NumCast(kf.time!) === this.props.currentBarX && kf.type !== KeyframeFunc.KeyframeType.fade){
- kf.key = Doc.MakeCopy(this.props.node, true);
- if (kf.type === KeyframeFunc.KeyframeType.new){
- kf.type = KeyframeFunc.KeyframeType.default;
- }
- }
- });
- this.props.node.hidden = false;
- } else {
- this.props.node.hidden = true;
- }
- }));
- this._reactionDisposers.push(reaction(() => {
+ componentWillUnmount() {
+ runInAction(() => {
+ this._keyReaction();
+ this._currentBarXReaction();
+ });
+ }
+
+ @action
+ keyReaction = () => {
+ return reaction(() => {
+ console.log("keyreaction ran");
let keys = Doc.allKeys(this.props.node);
- return keys.map(key => FieldValue(this.props.node[key]));
-
+ return keys.map(key => FieldValue(this.props.node[key]));
}, data => {
+ console.log("full reaction")
let regiondata = this.findRegion(this.props.currentBarX);
if (regiondata){
- (Cast(regiondata.keyframes!, listSpec(Doc)) as List<Doc>).forEach((kf) => {
- kf = kf as Doc;
- if(NumCast(kf.time!) === this.props.currentBarX && kf.type !== KeyframeFunc.KeyframeType.fade && !this._onInterpolate){
+ DocListCast(regiondata.keyframes!).forEach((kf) => {
+ if(NumCast(kf.time!) === this.props.currentBarX){
kf.key = Doc.MakeCopy(this.props.node, true);
- } else {
- this._onInterpolate = false;
- }
+ }
});
}
- }));
+ });
}
- /**
- * removes reaction when the component is removed from the timeline
- */
- componentWillUnmount() {
- this._reactionDisposers.forEach(disp => disp());
- this._reactionDisposers = [];
+ @action
+ currentBarXReaction = () => {
+ return reaction(() => this.props.currentBarX, () => {
+ console.log("current ran");
+ (this._keyReaction as IReactionDisposer)(); // disposing reaction
+ let regiondata: (Doc | undefined) = this.findRegion(this.props.currentBarX);
+ if (regiondata) {
+ this.timeChange(this.props.currentBarX);
+ this.props.node.hidden = false;
+ } else {
+ this.props.node.hidden = true;
+ }
+ this._keyReaction = this.keyReaction();
+
+ });
}
@action
timeChange = async (time: number) => {
- let region = this.findRegion(Math.round(time));
- let leftkf: (Doc | undefined) = this.calcMinLeft(region!);
- let rightkf: (Doc | undefined) = this.calcMinRight(region!);
- let currentkf: (Doc | undefined) = this.calcCurrent(region!);
- console.log(currentkf);
- if (currentkf && (currentkf.type !== KeyframeFunc.KeyframeType.new)){
- this._onInterpolate = true;
- this.filterKeys(Doc.allKeys(currentkf.key as Doc)).forEach(k => {
- this.props.node[k] = (currentkf!.key as Doc)[k];
- });
+ let region = this.findRegion(Math.round(time)); //finds a region that the scrubber is on
+ 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
+ if (currentkf){
+ this.applyKeys(currentkf.key as Doc);
} else if (leftkf && rightkf) {
this.interpolate(leftkf, rightkf);
} else if (leftkf) {
- console.log(Doc.GetProto(leftkf!.key as Doc));
- this.filterKeys(Doc.allKeys(leftkf.key as Doc)).forEach(k => {
- this.props.node[k] = (leftkf!.key as Doc)[k];
- });
+ this.applyKeys(leftkf);
} else if (rightkf) {
- this.filterKeys(Doc.allKeys(rightkf.key as Doc)).forEach(k => {
- this.props.node[k] = (rightkf!.key as Doc)[k];
- });
+ this.applyKeys(rightkf);
}
}
+ @action
+ private applyKeys = (kf: Doc) => {
+ let kf_length = Doc.allKeys(kf).length;
+ let node_length = Doc.allKeys(this.props.node).length;
+ if (kf_length > node_length) {
+ this.filterKeys(Doc.allKeys(kf)).forEach((k) => {
+ this.props.node[k] = kf[k];
+ });
+ } else {
+ this.filterKeys(Doc.allKeys(this.props.node)).forEach((k) => {
+ if (kf[k] === undefined) {
+ this.props.node[k] = undefined;
+ } else {
+ this.props.node[k] = kf[k];
+ }
+ });
+ }
+ }
@action
private filterKeys = (keys:string[]):string[] => {
@@ -132,8 +136,7 @@ export class Track extends React.Component<IProps> {
@action
calcCurrent = (region:Doc):(Doc|undefined) => {
let currentkf:(Doc|undefined) = undefined;
- (region.keyframes! as List<Doc>).forEach((kf) => {
- kf = kf as Doc;
+ DocListCast(region.keyframes!).forEach((kf) => {
if (NumCast(kf.time) === Math.round(this.props.currentBarX)){
currentkf = kf;
}
@@ -146,8 +149,7 @@ export class Track extends React.Component<IProps> {
calcMinLeft = (region: Doc): (Doc | undefined) => { //returns the time of the closet keyframe to the left
let leftKf:(Doc| undefined) = undefined;
let time:number = 0;
- (region.keyframes! as List<Doc>).forEach((kf) => {
- kf = kf as Doc;
+ DocListCast(region.keyframes!).forEach((kf) => {
if (NumCast(kf.time) < this.props.currentBarX && NumCast(kf.time) > NumCast(time)) {
leftKf = kf;
time = NumCast(kf.time);
@@ -161,8 +163,7 @@ export class Track extends React.Component<IProps> {
calcMinRight = (region: Doc): (Doc | undefined) => { //returns the time of the closest keyframe to the right
let rightKf: (Doc|undefined) = undefined;
let time:number = Infinity;
- (region.keyframes! as List<Doc>).forEach((kf) => {
- kf = kf as Doc;
+ DocListCast(region.keyframes!).forEach((kf) => {
if (NumCast(kf.time) > this.props.currentBarX && NumCast(kf.time) < NumCast(time)) {
rightKf = kf;
time = NumCast(kf.time);
@@ -232,15 +233,13 @@ export class Track extends React.Component<IProps> {
}
-
-
render() {
return (
<div className="track-container">
<div className="track">
<div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick}>
{DocListCast(this.regions).map((region) => {
- return <Keyframe node={this.props.node} RegionData={region as Doc} changeCurrentBarX={this.props.changeCurrentBarX} setFlyout={this.props.setFlyout}/>;
+ return <Keyframe node={this.props.node} RegionData={region} changeCurrentBarX={this.props.changeCurrentBarX} setFlyout={this.props.setFlyout}/>;
})}
</div>
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-15 07:09:35 +0000