aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/nodes/Keyframe.tsx66
-rw-r--r--src/client/views/nodes/Track.tsx87
2 files changed, 119 insertions, 34 deletions
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index 4bccc6040..2f75a4b03 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -11,6 +11,7 @@ import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../new
import { any } from "bluebird";
import { FlyoutProps } from "./Timeline";
import { number } from "prop-types";
+import { CollectionSchemaView, CollectionSchemaPreview } from "../collections/CollectionSchemaView";
export namespace KeyframeFunc{
export enum Direction{
@@ -38,18 +39,32 @@ export namespace KeyframeFunc{
return rightMost;
}
};
+
+ export const defaultKeyframe = () => {
+ let regiondata = new Doc(); //creating regiondata
+ regiondata.duration = 200;
+ regiondata.position = 0;
+ regiondata.fadeIn = 20;
+ regiondata.fadeOut = 20;
+ regiondata.keyframes = new List<Doc>();
+ return regiondata;
+ };
+
+ export const compareKeyframe = (propsNode: Doc, kf: Doc) => {
+
+ };
}
-const RegionDataSchema = createSchema({
+export const RegionDataSchema = createSchema({
position: defaultSpec("number", 0),
duration: defaultSpec("number", 0),
keyframes: listSpec(Doc),
fadeIn: defaultSpec("number", 0),
fadeOut: defaultSpec("number", 0)
});
-type RegionData = makeInterface<[typeof RegionDataSchema]>;
-const RegionData = makeInterface(RegionDataSchema);
+export type RegionData = makeInterface<[typeof RegionDataSchema]>;
+export const RegionData = makeInterface(RegionDataSchema);
interface IProps {
node: Doc;
@@ -64,7 +79,33 @@ export class Keyframe extends React.Component<IProps> {
@observable private _bar = React.createRef<HTMLDivElement>();
@action
- componentWillMount() {
+ componentDidMount() {
+ let fadeIn = this.makeKeyData(this.regiondata.position + this.regiondata.fadeIn)!;
+ let fadeOut = this.makeKeyData(this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut)!;
+ let fadeInIndex = this.regiondata.keyframes!.indexOf(fadeIn);
+ let fadeOutIndex = this.regiondata.keyframes!.indexOf(fadeOut);
+
+ (fadeIn.key! as Doc).opacity = 1;
+ (fadeOut.key! as Doc).opacity = 1;
+
+ this.regiondata.keyframes![fadeInIndex] =fadeIn;
+ this.regiondata.keyframes![fadeOutIndex] =fadeOut;
+
+
+ let start = this.makeKeyData(this.regiondata.position)!;
+ let finish = this.makeKeyData(this.regiondata.position + this.regiondata.duration)!;
+
+
+ let startIndex = this.regiondata.keyframes!.indexOf(start);
+ let finishIndex = this.regiondata.keyframes!.indexOf(finish);
+
+ (start.key! as Doc).opacity = 0.1;
+ (finish.key! as Doc).opacity = 0.1;
+
+ this.regiondata.keyframes![startIndex] = start;
+ this.regiondata.keyframes![finishIndex] = finish;
+
+
}
componentWillUnmount() {
@@ -98,6 +139,7 @@ export class Keyframe extends React.Component<IProps> {
TK.time = kfpos;
TK.key = Doc.MakeCopy(this.props.node);
this.regiondata.keyframes!.push(TK);
+ return TK;
}
}
@@ -202,6 +244,7 @@ export class Keyframe extends React.Component<IProps> {
let offset = e.clientX - bar.getBoundingClientRect().left;
let position = NumCast(this.regiondata.position);
this.makeKeyData(Math.round(position + offset));
+ this.props.changeCurrentBarX(NumCast(Math.round(position + offset)));
}
@action
@@ -212,6 +255,8 @@ export class Keyframe extends React.Component<IProps> {
}
+
+
render() {
return (
<div>
@@ -219,6 +264,8 @@ export class Keyframe extends React.Component<IProps> {
onPointerDown={this.onBarPointerDown}
onDoubleClick={this.createKeyframe}
onContextMenu={action((e:React.MouseEvent)=>{
+ e.preventDefault();
+ e.stopPropagation();
let offsetLeft = this._bar.current!.getBoundingClientRect().left - this._bar.current!.parentElement!.getBoundingClientRect().left;
let offsetTop = this._bar.current!.getBoundingClientRect().top; //+ this._bar.current!.parentElement!.getBoundingClientRect().top;
console.log(offsetLeft);
@@ -227,13 +274,18 @@ export class Keyframe extends React.Component<IProps> {
})}>
<div className="leftResize" onPointerDown={this.onResizeLeft} ></div>
<div className="rightResize" onPointerDown={this.onResizeRight}></div>
- <div className="fadeLeft" style={{ width: `${this.regiondata.fadeIn}px` }}>{this.createDivider(KeyframeFunc.Direction.left)}</div>
- <div className="fadeRight" style={{ width: `${this.regiondata.fadeOut}px` }}>{this.createDivider(KeyframeFunc.Direction.right)}</div>
+ {/* <div className="fadeLeft" style={{ width: `${this.regiondata.fadeIn}px` }}>{this.createDivider(KeyframeFunc.Direction.left)}</div>
+ <div className="fadeRight" style={{ width: `${this.regiondata.fadeOut}px` }}>{this.createDivider(KeyframeFunc.Direction.right)}</div> */}
+
{this.regiondata.keyframes!.map(kf => {
kf = kf as Doc;
return <div className="keyframe" style={{ left: `${NumCast(kf.time) - this.regiondata.position}px` }}>
{this.createDivider()}
- <div className="keyframeCircle" onPointerDown={(e) => {this.moveKeyframe(e, kf as Doc);}}></div>
+ <div className="keyframeCircle" onPointerDown={(e) => {this.moveKeyframe(e, kf as Doc);} } onContextMenu={(e:React.MouseEvent)=>{
+ e.preventDefault();
+ e.stopPropagation();
+
+ }}></div>
</div>;
})}
{this.createDivider(KeyframeFunc.Direction.left)}
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-15 14:35:26 +0000