aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/Timeline.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/Timeline.tsx')
-rw-r--r--src/client/views/nodes/Timeline.tsx118
1 files changed, 62 insertions, 56 deletions
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index 3ffd7b749..9036b9d19 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -3,7 +3,6 @@ import * as ReactDOM from "react-dom";
import { observer } from "mobx-react";
import { observable, reaction, action, IReactionDisposer, observe, IObservableArray } from "mobx";
import "./Timeline.scss";
-import { KeyFrame } from "./KeyFrame";
import { CollectionViewProps } from "../collections/CollectionBaseView";
import { CollectionSubView, SubCollectionViewProps } from "../collections/CollectionSubView";
import { DocumentViewProps, DocumentView } from "./DocumentView";
@@ -55,13 +54,13 @@ export class Timeline extends CollectionSubView(Document) {
@observable private _keys = ["x", "y"];
@observable private _data: Doc[] = []; // 1D list of nodes
@observable private _keyframes: Doc[][] = []; //2D list of infos
+ @observable private TEMPNUM = 0;
- @observable private TEMPNUM = 0;
@action
onRecord = (e: React.MouseEvent) => {
- if (this._isRecording === true){
- this._isRecording = false;
- return;
+ if (this._isRecording === true) {
+ this._isRecording = false;
+ return;
}
this._isRecording = true;
let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc));
@@ -75,11 +74,33 @@ export class Timeline extends CollectionSubView(Document) {
return reaction(() => {
return this._keys.map(key => FieldValue(node[key]));
}, async data => {
- if (this.TEMPNUM === 1){ //very hacky... we want the reaction to run only once
- this.storeKeyChange(node);
- this.TEMPNUM = 0;
- } else {
- this.TEMPNUM = 1;
+ if (this._inner.current) {
+ if (!this._barMoved) {
+ if (this._data.indexOf(node) === -1) {
+ this._data.push(node);
+ let index = this._data.indexOf(node);
+
+ let timeandpos = this.setTimeAndPos(node);
+ let info: Doc[] = new Array(1000); //kinda weird
+ info[this._currentBarX] = timeandpos;
+ this._keyframes[index] = info;
+
+ //graphical yellow bar
+ let bar: HTMLDivElement = this.createBar(5, this._currentBarX, "yellow");
+ this._inner.current.appendChild(bar);
+ } else {
+ let index = this._data.indexOf(node);
+ if (this._keyframes[index][this._currentBarX] !== undefined) { //when node is in data, but doesn't have data for this specific time.
+ let timeandpos = this.setTimeAndPos(node);
+ let bar: HTMLDivElement = this.createBar(5, this._currentBarX, "yellow");
+ this._inner.current.appendChild(bar);
+ this._keyframes[index][this._currentBarX] = timeandpos;
+ } else { //when node is in data, and has data for this specific time
+ let timeandpos = this.setTimeAndPos(node);
+ this._keyframes[index][this._currentBarX] = timeandpos;
+ }
+ }
+ }
}
});
};
@@ -89,7 +110,7 @@ export class Timeline extends CollectionSubView(Document) {
this._reactionDisposers[change.index]();
this._reactionDisposers[change.index] = addReaction(change.newValue);
} else {
-
+
let removed = this._reactionDisposers.splice(change.index, change.removedCount, ...change.added.map(addReaction));
removed.forEach(disp => disp());
}
@@ -97,9 +118,7 @@ export class Timeline extends CollectionSubView(Document) {
}
-
-
- storeKeyChange = (node:Doc) =>{
+ storeKeyChange = (node: Doc) => {
if (this._inner.current) {
if (!this._barMoved) {
if (this._data.indexOf(node) === -1) {
@@ -116,25 +135,16 @@ export class Timeline extends CollectionSubView(Document) {
//graphical yellow bar
let bar: HTMLDivElement = this.createBar(5, this._currentBarX, "yellow");
this._inner.current.appendChild(bar);
- } else {
+ } else {
let index = this._data.indexOf(node);
if (this._keyframes[index][this._currentBarX] === undefined) { //when node is in data, but doesn't have data for this specific time.
- console.log("does not have specific time");
let timeandpos = this.setTimeAndPos(node);
- this._keyframes[index][this._currentBarX] = timeandpos;
+ this._keyframes[index][this._currentBarX] = timeandpos;
let bar: HTMLDivElement = this.createBar(5, this._currentBarX, "yellow");
this._inner.current.appendChild(bar);
- //@ts-ignore
- console.log(timeandpos.position.y + " stored position" );
- console.log(node.y + " actual node");
} else { //when node is in data, and has data for this specific time
- console.log("else");
let timeandpos = this.setTimeAndPos(node);
- //@ts-ignore
- console.log(node.y + " actual node");
this._keyframes[index][this._currentBarX] = timeandpos;
- //@ts-ignore
- console.log(this._keyframes[index][this._currentBarX].position.y + " stored pos");
}
}
@@ -142,6 +152,7 @@ export class Timeline extends CollectionSubView(Document) {
}
}
+
setTimeAndPos = (node: Doc) => {
let pos: Position = Position(node);
let timeandpos = new Doc();
@@ -152,20 +163,13 @@ export class Timeline extends CollectionSubView(Document) {
return timeandpos;
}
-
@action
timeChange = async (time: number) => {
- //const docs = (await DocListCastAsync(this.props.Document[this.props.fieldKey]))!;
- //const kfList:Doc[][] = Cast(this._keyframes, listSpec(Doc), []) as any;
const docs = this._data;
- const kfList: Doc[][] = this._keyframes;
-
- const list = await Promise.all(kfList.map(l => Promise.all(l)));
- let isFrame: boolean = false;
-
docs.forEach(async (oneDoc, i) => {
let leftKf!: TimeAndPosition;
let rightKf!: TimeAndPosition;
+ let singleFrame: Doc | undefined = undefined;
let oneKf = this._keyframes[i];
oneKf.forEach((singleKf) => {
if (singleKf !== undefined) {
@@ -180,14 +184,17 @@ export class Timeline extends CollectionSubView(Document) {
if (rightMin !== Infinity) {
rightKf = TimeAndPosition(this._keyframes[i][rightMin]);
}
+ } else {
+ singleFrame = singleKf;
}
}
});
-
- if (leftKf && rightKf) {
+ if (singleFrame) {
+ if (true || oneKf[i] !== undefined) {
+ this._keys.map(key => FieldValue(oneDoc[key]));
+ }
+ } else if (leftKf && rightKf) {
this.interpolate(oneDoc, leftKf, rightKf, this._currentBarX);
- } else {
-
}
});
}
@@ -196,7 +203,7 @@ export class Timeline extends CollectionSubView(Document) {
let counter: number = Infinity;
let leftMin: number = Infinity;
kfList.forEach((kf) => {
- if (kf !== undefined && NumCast(kf.time) < time) { //ERROR: "cannot read property time of undefined"
+ if (kf !== undefined && NumCast(kf.time) < time) {
let diff: number = Math.abs(NumCast(kf.time) - time);
if (diff < counter) {
counter = diff;
@@ -243,17 +250,16 @@ export class Timeline extends CollectionSubView(Document) {
});
}
-
private _barMoved: boolean = false;
@action
- onInnerPointerUp = (e: React.PointerEvent) => {
+ onInnerPointerUp = (e: React.PointerEvent) => {
if (this._inner.current) {
this._barMoved = false;
this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
}
this._data.forEach((node) => {
- console.log(node.y);
- });
+ console.log(node.y);
+ });
}
@action
@@ -325,35 +331,35 @@ export class Timeline extends CollectionSubView(Document) {
@action
displayKeyFrames = async (dv: DocumentView) => {
- console.log("hi");
- let doc:Doc = dv.props.Document;
- let inner:HTMLDivElement = (await this._inner.current)!;
+ console.log("hi");
+ let doc: Doc = dv.props.Document;
+ let inner: HTMLDivElement = (await this._inner.current)!;
this._data.forEach((node) => {
- if (node === doc){
- this.clearBars();
- const index = this._data.indexOf(node);
+ if (node === doc) {
+ this.clearBars();
+ const index = this._data.indexOf(node);
this._keyframes[index].forEach((time) => {
- if (time !== undefined){
+ if (time !== undefined) {
let timeandpos = TimeAndPosition(time);
let bar: HTMLDivElement = this.createBar(5, this._currentBarX, "yellow");
inner.appendChild(bar);
}
- })
+ });
}
- });
+ });
}
- @action
+ @action
clearBars = async () => {
- let inner:HTMLDivElement = (await this._inner.current)!;
+ let inner: HTMLDivElement = (await this._inner.current)!;
inner.childNodes.forEach((bar) => {
- if (bar !== this._currentBar){
+ if (bar !== this._currentBar) {
inner.removeChild(bar);
}
- });
+ });
}
-
+
render() {
return (
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-24 19:53:31 +0000