aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/Keyframe.tsx29
-rw-r--r--src/client/views/nodes/Track.tsx186
2 files changed, 98 insertions, 117 deletions
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index dee226c64..e90c6e436 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -8,11 +8,7 @@ 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";
-import { any } from "bluebird";
import { FlyoutProps } from "./Timeline";
-import { number } from "prop-types";
-import { CollectionSchemaView, CollectionSchemaPreview } from "../collections/CollectionSchemaView";
-import { faDiceOne, faFirstAid } from "@fortawesome/free-solid-svg-icons";
import { Transform } from "../../util/Transform";
export namespace KeyframeFunc {
@@ -125,11 +121,14 @@ export class Keyframe extends React.Component<IProps> {
@action
- 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)!;
+ componentDidMount() {
+
+ console.log(toJS(this.props.node));
+ console.log("hi");
+ 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;
@@ -158,8 +157,8 @@ export class Keyframe extends React.Component<IProps> {
@action
- makeKeyData = async (kfpos: number, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time
- let doclist = await DocListCastAsync(this.regiondata.keyframes!);
+ makeKeyData = (kfpos: number, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time
+ let doclist = DocListCast(this.regiondata.keyframes!);
let existingkf: (Doc | undefined) = undefined;
if (doclist) {
doclist.forEach(TK => { //TK is TimeAndKey
@@ -244,8 +243,7 @@ export class Keyframe extends React.Component<IProps> {
e.preventDefault();
e.stopPropagation();
let bar = this._bar.current!;
- let barX = bar.getBoundingClientRect().left;
- let offset = e.clientX - barX;
+ let offset = Math.round((e.clientX - bar.getBoundingClientRect().left) * this.props.transform.Scale);
let leftRegion = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.left, this.regiondata, this.regions);
let firstkf: (Doc | undefined) = this.firstKeyframe;
if (firstkf && this.regiondata.position + this.regiondata.fadeIn + offset >= NumCast(firstkf!.time)) {
@@ -272,8 +270,7 @@ export class Keyframe extends React.Component<IProps> {
e.preventDefault();
e.stopPropagation();
let bar = this._bar.current!;
- let barX = bar.getBoundingClientRect().right;
- let offset = e.clientX - barX;
+ let offset = Math.round((e.clientX - bar.getBoundingClientRect().right) * this.props.transform.Scale);
let rightRegion = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.right, this.regiondata, this.regions);
if (this.lastKeyframe! && this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut + offset <= NumCast((this.lastKeyframe! as Doc).time)) {
let dif = this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut - NumCast((this.lastKeyframe! as Doc).time);
@@ -306,9 +303,11 @@ export class Keyframe extends React.Component<IProps> {
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));
+ console.log(this.regiondata.keyframes!.length);
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
moveKeyframe = (e: React.MouseEvent, kf: Doc) => {
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index 2fcb4f0e4..ee8bee56f 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -4,12 +4,12 @@ import { observable, reaction, action, IReactionDisposer, observe, IObservableAr
import "./Track.scss";
import { Doc, DocListCastAsync, DocListCast } from "../../../new_fields/Doc";
import {listSpec} from "../../../new_fields/Schema";
-import { FieldValue, Cast, NumCast, BoolCast } from "../../../new_fields/Types";
+import { FieldValue, Cast, NumCast, BoolCast, StrCast } from "../../../new_fields/Types";
import { List } from "../../../new_fields/List";
import { Keyframe, KeyframeFunc, RegionData } from "./Keyframe";
import { FlyoutProps } from "./Timeline";
-import { CollectionView } from "../collections/CollectionView";
import { Transform } from "../../util/Transform";
+import { AddComparisonParameters } from "../../northstar/model/idea/idea";
interface IProps {
node: Doc;
@@ -36,20 +36,20 @@ export class Track extends React.Component<IProps> {
this.props.node.regions = new List<Doc>();
}
this.props.node.opacity = 1;
- this.props.node.hidden = true;
}
componentDidMount() {
runInAction(() => {
- this._keyReaction = this.keyReaction();
+ this.createRegion(this.props.currentBarX);
+ this.props.node.hidden = false;
this._currentBarXReaction = this.currentBarXReaction();
});
}
componentWillUnmount() {
runInAction(() => {
- this._keyReaction();
- this._currentBarXReaction();
+ if (this._keyReaction) this._keyReaction();
+ if (this._currentBarXReaction) this._currentBarXReaction();
});
}
@@ -63,25 +63,23 @@ export class Track extends React.Component<IProps> {
let regiondata = this.findRegion(this.props.currentBarX);
if (regiondata){
DocListCast(regiondata.keyframes!).forEach((kf) => {
- if(NumCast(kf.time!) === this.props.currentBarX){
- if (kf.type === KeyframeFunc.KeyframeType.default){
- kf.key = Doc.MakeCopy(this.props.node, true);
- let leftkf: (Doc | undefined) = this.calcMinLeft(regiondata!, kf); // lef keyframe, if it exists
- let rightkf: (Doc | undefined) = this.calcMinRight(regiondata!, kf); //right keyframe, if it exists
- if (leftkf!.type === KeyframeFunc.KeyframeType.fade){
- let edge = this.calcMinLeft(regiondata!, leftkf!);
- edge!.key = Doc.MakeCopy(kf.key as Doc, true);
- leftkf!.key = Doc.MakeCopy(kf.key as Doc, true) ;
- (Cast(edge!.key, Doc)! as Doc).opacity = 0.1;
- (Cast(leftkf!.key, Doc)! as Doc).opacity = 1;
- }
- if (rightkf!.type === KeyframeFunc.KeyframeType.fade){
- let edge = this.calcMinRight(regiondata!, rightkf!);
- edge!.key = Doc.MakeCopy(kf.key as Doc, true);
- rightkf!.key = Doc.MakeCopy(kf.key as Doc, true);
- (Cast(edge!.key, Doc)! as Doc).opacity = 0.1;
- (Cast(rightkf!.key, Doc)! as Doc).opacity = 1;
- }
+ if (kf.type === KeyframeFunc.KeyframeType.default){
+ kf.key = Doc.MakeCopy(this.props.node, true);
+ let leftkf: (Doc | undefined) = this.calcMinLeft(regiondata!, kf); // lef keyframe, if it exists
+ let rightkf: (Doc | undefined) = this.calcMinRight(regiondata!, kf); //right keyframe, if it exists
+ if (leftkf!.type === KeyframeFunc.KeyframeType.fade){ //replicating this keyframe to fades
+ let edge = this.calcMinLeft(regiondata!, leftkf!);
+ edge!.key = Doc.MakeCopy(kf.key as Doc, true);
+ leftkf!.key = Doc.MakeCopy(kf.key as Doc, true) ;
+ (Cast(edge!.key, Doc)! as Doc).opacity = 0.1;
+ (Cast(leftkf!.key, Doc)! as Doc).opacity = 1;
+ }
+ if (rightkf!.type === KeyframeFunc.KeyframeType.fade){
+ let edge = this.calcMinRight(regiondata!, rightkf!);
+ edge!.key = Doc.MakeCopy(kf.key as Doc, true);
+ rightkf!.key = Doc.MakeCopy(kf.key as Doc, true);
+ (Cast(edge!.key, Doc)! as Doc).opacity = 0.1;
+ (Cast(rightkf!.key, Doc)! as Doc).opacity = 1;
}
}
});
@@ -91,18 +89,19 @@ export class Track extends React.Component<IProps> {
@action
currentBarXReaction = () => {
- return reaction(() => this.props.currentBarX, () => {
+ return reaction(() => this.props.currentBarX, () => {
+ console.log("currentbar changed");
+ if (this._keyReaction) this._keyReaction(); //dispose previous reaction first
let regiondata: (Doc | undefined) = this.findRegion(this.props.currentBarX);
- this._keyReaction();
if (regiondata) {
- this.props.node.hidden = false;
+ this.props.node.hidden = false;
+ this.timeChange(this.props.currentBarX);
DocListCast(regiondata.keyframes).forEach((kf) => {
- if (kf.time === this.props.currentBarX){
- this._keyReaction = this.keyReaction();
+ if (kf.time === this.props.currentBarX && kf.type === KeyframeFunc.KeyframeType.default){
+ console.log("HI!");
+ this._keyReaction = this.keyReaction(); //reactivates reaction.
}
});
- this.timeChange(this.props.currentBarX);
-
} else {
this.props.node.hidden = true;
}
@@ -111,55 +110,37 @@ export class Track extends React.Component<IProps> {
@action
- timeChange = async (time: number) => {
- 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 {
- this.interpolate(leftkf!, rightkf!);
- }
+ timeChange = (time: number) => {
+ let regiondata = this.findRegion(Math.round(time)); //finds a region that the scrubber is on
+ if (regiondata) {
+ let leftkf: (Doc | undefined) = this.calcMinLeft(regiondata!); // lef keyframe, if it exists
+ let rightkf: (Doc | undefined) = this.calcMinRight(regiondata!); //right keyframe, if it exists
+ if(leftkf && rightkf) {
+ this.interpolate(leftkf, rightkf);
+ }
+ let currentkf: (Doc | undefined) = this.calcCurrent(regiondata!); //if the scrubber is on top of the keyframe
+
+ if (currentkf){
+ console.log(toJS(currentkf));
+ this.applyKeys(Cast(currentkf.key, Doc) as Doc);
+ }
+ }
+
}
@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((key) => {
- if (key === "title") {
- console.log("TITLE APPLIED");
- Doc.SetOnPrototype(this.props.node, "title", kf[key] as string);
- } else if (key === "documentText"){
- Doc.SetOnPrototype(this.props.node, "documentText", kf[key] as string);
- } else {
- this.props.node[key] = kf[key];
- }
- });
- } else {
- this.filterKeys(Doc.allKeys(this.props.node)).forEach((key) => {
- if (kf[key] === undefined) {
- this.props.node[key] = undefined;
- } else if (key === "title") {
- console.log("TITLE APPLIED");
- Doc.SetOnPrototype(this.props.node, "title", kf[key] as string);
- } else if (key === "documentText"){
- Doc.SetOnPrototype(this.props.node, "documentText", kf[key] as string);
- } else {
- this.props.node[key] = kf[key];
- }
- });
- }
+ this.filterKeys(Doc.allKeys(kf)).forEach(key => {
+ if (key === "title" || key === "documentText") Doc.SetOnPrototype(this.props.node, key, StrCast(kf[key]));
+ this.props.node[key] = kf[key];
+ });
}
+
@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);
- }
+ if ( key !== "regions" && key !== "data" && key !== "creationDate" && key !== "cursors" && key !== "hidden") acc.push(key);
return acc;
}, []) as string[];
}
@@ -168,9 +149,7 @@ export class Track extends React.Component<IProps> {
calcCurrent = (region:Doc):(Doc|undefined) => {
let currentkf:(Doc|undefined) = undefined;
DocListCast(region.keyframes!).forEach((kf) => {
- if (NumCast(kf.time) === Math.round(this.props.currentBarX)){
- currentkf = kf;
- }
+ if (NumCast(kf.time) === Math.round(this.props.currentBarX)) currentkf = kf;
});
return currentkf;
}
@@ -185,7 +164,7 @@ export class Track extends React.Component<IProps> {
if (ref){
compTime = NumCast(ref.time);
}
- if (NumCast(kf.time) < compTime && NumCast(kf.time) > NumCast(time)) {
+ if (NumCast(kf.time) < compTime && NumCast(kf.time) >= time) {
leftKf = kf;
time = NumCast(kf.time);
}
@@ -203,7 +182,7 @@ export class Track extends React.Component<IProps> {
if (ref){
compTime = NumCast(ref.time);
}
- if (NumCast(kf.time) > compTime && NumCast(kf.time) < NumCast(time)) {
+ if (NumCast(kf.time) > compTime && NumCast(kf.time) <= NumCast(time)) {
rightKf = kf;
time = NumCast(kf.time);
}
@@ -212,33 +191,31 @@ export class Track extends React.Component<IProps> {
}
@action
- interpolate = async (kf1: Doc, kf2: Doc) => {
- let node1 = kf1.key as Doc;
- let node2 = kf2.key as Doc;
- let mainNode = new Doc();
- const dif_time = NumCast(kf2.time) - NumCast(kf1.time);
- const ratio = (this.props.currentBarX - NumCast(kf1.time)) / dif_time; //linear
- let keys = [];
- if (this.filterKeys(Doc.allKeys(node1)).length === Math.max(this.filterKeys(Doc.allKeys(node1)).length, this.filterKeys(Doc.allKeys(node2)).length )){
- keys = this.filterKeys(Doc.allKeys(node1));
- mainNode = node1;
- } else {
- keys = this.filterKeys(Doc.allKeys(node2));
- mainNode = node2;
- }
-
- keys.forEach(key => {
- if (node1[key] && node2[key] && typeof(node1[key]) === "number" && typeof(node2[key]) === "number"){
- const diff = NumCast(node2[key]) - NumCast(node1[key]);
+ interpolate = (left: Doc, right: Doc) => {
+ console.log("interpolating");
+ let leftNode = left.key as Doc;
+ let rightNode = right.key as Doc;
+
+ console.log(toJS(leftNode));
+ console.log(toJS(rightNode));
+
+ const dif_time = NumCast(right.time) - NumCast(left.time);
+ const ratio = (this.props.currentBarX - NumCast(left.time)) / dif_time; //linear
+
+
+ this.filterKeys(Doc.allKeys(leftNode)).forEach(key => {
+ console.log(key);
+ if (leftNode[key] && rightNode[key] && typeof(leftNode[key]) === "number" && typeof(rightNode[key]) === "number"){ //if it is number, interpolate
+ const diff = NumCast(rightNode[key]) - NumCast(leftNode[key]);
const adjusted = diff * ratio;
- this.props.node[key] = NumCast(node1[key]) + adjusted;
- }
- else if (key === "title") {
- Doc.SetOnPrototype(this.props.node, "title", mainNode[key] as string);
- } else if (key === "documentText"){
- Doc.SetOnPrototype(this.props.node, "documentText", mainNode[key] as string);
+ this.props.node[key] = NumCast(leftNode[key]) + adjusted;
+ } else if (key === "title" || key === "documentText") {
+ Doc.SetOnPrototype(this.props.node, key, StrCast(leftNode[key]));
+ this.props.node[key] = leftNode[key];
}
+ console.log(this.props.node[key]);
});
+ console.log("done");
}
@action
@@ -257,8 +234,12 @@ export class Track extends React.Component<IProps> {
onInnerDoubleClick = (e: React.MouseEvent) => {
let inner = this._inner.current!;
let offsetX = Math.round((e.clientX - inner.getBoundingClientRect().left) * this.props.transform.Scale);
+ this.createRegion(offsetX);
+ }
+
+ createRegion = (position: number) => {
let regiondata = KeyframeFunc.defaultKeyframe();
- regiondata.position = offsetX;
+ regiondata.position = position;
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) < NumCast(regiondata.fadeIn) + NumCast(regiondata.fadeOut)) || (rightRegion && rightRegion.position - regiondata.position < NumCast(regiondata.fadeIn) + NumCast(regiondata.fadeOut))){
@@ -267,6 +248,7 @@ export class Track extends React.Component<IProps> {
regiondata.duration = rightRegion.position - regiondata.position;
}
this.regions.push(regiondata);
+ return regiondata;
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-13 06:14:40 +0000