aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/Track.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/Track.tsx')
-rw-r--r--src/client/views/nodes/Track.tsx87
1 files changed, 60 insertions, 27 deletions
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index f3b92f20c..e6d5189af 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -6,8 +6,12 @@ import { Doc, DocListCastAsync, DocListCast } from "../../../new_fields/Doc";
import { Document, listSpec, createSchema, makeInterface, defaultSpec } from "../../../new_fields/Schema";
import { FieldValue, Cast, NumCast, BoolCast } from "../../../new_fields/Types";
import { List } from "../../../new_fields/List";
-import { Keyframe, KeyframeFunc } from "./Keyframe";
+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";
interface IProps {
node: Doc;
@@ -20,7 +24,7 @@ interface IProps {
@observer
export class Track extends React.Component<IProps> {
@observable private _inner = React.createRef<HTMLDivElement>();
- @observable private _keys = ["x", "y", "width", "height", "panX", "panY", "scale"];
+ @observable private _keys = ["x", "y", "width", "height", "panX", "panY", "scale", "opacity"];
private _reactionDisposers: IReactionDisposer[] = [];
private _selectionManagerChanged?: IReactionDisposer;
@@ -32,12 +36,13 @@ export class Track extends React.Component<IProps> {
componentWillMount() {
this.props.node.regions = new List<Doc>();
+ this.props.node.opacity = 1;
}
@action
componentDidMount() {
this.props.node.hidden = true;
- this.props.node.opacity = 0;
+ this.props.node.opacity = 1;
reaction(() => this.props.currentBarX, () => {
let region: (Doc | undefined) = this.findRegion(this.props.currentBarX);
if (region !== undefined) {
@@ -49,15 +54,18 @@ export class Track extends React.Component<IProps> {
});
reaction(() => {
- let keys = Doc.allKeys(this.props.node);
- return keys.map(key => FieldValue(this.props.node[key]));
+ if (!this._onInterpolate){
+ let keys = Doc.allKeys(this.props.node);
+ return keys.map(key => FieldValue(this.props.node[key]));
+ }
}, data => {
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){
- console.log("hoorayy!!!");
+ kf.key = Doc.MakeCopy(this.props.node);
+ console.log("key updated");
}
});
}
@@ -73,36 +81,65 @@ export class Track extends React.Component<IProps> {
}
+ @observable private _onInterpolate:boolean = false;
@action
timeChange = async (time: number) => {
let region = this.findRegion(time);
let leftkf: (Doc | undefined) = this.calcMinLeft(region!);
let rightkf: (Doc | undefined) = this.calcMinRight(region!);
- if (leftkf && rightkf) {
+ let currentkf: (Doc | undefined) = this.calcCurrent(region!);
+ if (currentkf){
+ this._onInterpolate = true;
+ console.log(this.filterKeys(Doc.allKeys(currentkf.key as Doc)));
+ this.filterKeys(Doc.allKeys(currentkf.key as Doc)).forEach(k => {
+ console.log(k);
+ this.props.node[k] = (currentkf!.key as Doc)[k];
+ });
+ this._onInterpolate = false;
+ } else if (leftkf && rightkf) {
this.interpolate(leftkf, rightkf);
} else if (leftkf) {
- console.log("left exists");
- console.log(leftkf.time);
- this._keys.forEach(k => {
- let data = leftkf!.key as Doc;
- this.props.node[k] = data[k];
+ this.filterKeys(Doc.allKeys(leftkf.key as Doc)).forEach(k => {
+ this.props.node[k] = (leftkf!.key as Doc)[k];
});
} else if (rightkf) {
- this._keys.forEach(k => {
- let data = rightkf!.key as Doc;
- this.props.node[k] = data[k];
+ this.filterKeys(Doc.allKeys(rightkf.key as Doc)).forEach(k => {
+ this.props.node[k] = (rightkf!.key as Doc)[k];
});
}
}
+ @action
+ private filterKeys = (keys:string[]):string[] => {
+ return keys.reduce((acc:string[], key:string) => {
+ if ( key !== "regions" && key !== "data" && key !== "creationDate" && key !== "cursors" && key !== "hidden"){
+ acc.push(key);
+ }
+ return acc;
+ }, []) as string[];
+ }
+
+ @action
+ calcCurrent = (region:Doc):(Doc|undefined) => {
+ let currentkf:(Doc|undefined) = undefined;
+ (region.keyframes! as List<Doc>).forEach((kf) => {
+ kf = kf as Doc;
+ if (NumCast(kf.time) === this.props.currentBarX){
+ currentkf = kf;
+ }
+ });
+ return currentkf;
+ }
+
+
@action
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;
- if (NumCast(kf.time) < this.props.currentBarX && NumCast(kf.time) >= NumCast(time)) {
+ if (NumCast(kf.time) < this.props.currentBarX && NumCast(kf.time) > NumCast(time)) {
leftKf = kf;
time = NumCast(kf.time);
}
@@ -117,7 +154,7 @@ export class Track extends React.Component<IProps> {
let time:number = Infinity;
(region.keyframes! as List<Doc>).forEach((kf) => {
kf = kf as Doc;
- if (NumCast(kf.time) > this.props.currentBarX && NumCast(kf.time) <= NumCast(time)) {
+ if (NumCast(kf.time) > this.props.currentBarX && NumCast(kf.time) < NumCast(time)) {
rightKf = kf;
time = NumCast(kf.time);
}
@@ -127,10 +164,10 @@ export class Track extends React.Component<IProps> {
@action
interpolate = async (kf1: Doc, kf2: Doc) => {
+ console.log("interpolation");
let node1 = kf1.key as Doc;
let node2 = kf2.key as Doc;
- console.log(toJS(node1));
- console.log(toJS(node2));
+
const dif_time = NumCast(kf2.time) - NumCast(kf1.time);
const ratio = (this.props.currentBarX - NumCast(kf1.time)) / dif_time; //linear
@@ -158,17 +195,13 @@ export class Track extends React.Component<IProps> {
let inner = this._inner.current!;
let left = inner.getBoundingClientRect().left;
let offsetX = Math.round(e.clientX - left);
- let regiondata: Doc = new Doc(); //creating regiondata
- regiondata.duration = 200;
- regiondata.position = offsetX;
- regiondata.fadeIn = 20;
- regiondata.fadeOut = 20;
- regiondata.keyframes = new List<Doc>();
+ let regiondata = KeyframeFunc.defaultKeyframe();
+ regiondata.position = offsetX;
let leftRegion = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.left, regiondata, this.regions);
let rightRegion = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.right, regiondata, this.regions);
- if ((rightRegion && leftRegion && rightRegion.position - (leftRegion.position + leftRegion.duration) < regiondata.fadeIn + regiondata.fadeOut) || (rightRegion && rightRegion.position - regiondata.position < regiondata.fadeIn + regiondata.fadeOut)){
+ if ((rightRegion && leftRegion && rightRegion.position - (leftRegion.position + leftRegion.duration) < NumCast(regiondata.fadeIn) + NumCast(regiondata.fadeOut)) || (rightRegion && rightRegion.position - regiondata.position < NumCast(regiondata.fadeIn) + NumCast(regiondata.fadeOut))){
return;
- } else if (rightRegion && rightRegion.position - regiondata.position >= regiondata.fadeIn + regiondata.fadeOut){
+ } else if (rightRegion && rightRegion.position - regiondata.position >= NumCast(regiondata.fadeIn) + NumCast(regiondata.fadeOut)){
regiondata.duration = rightRegion.position - regiondata.position;
}
this.regions.push(regiondata);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-16 03:34:27 +0000