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.tsx143
1 files changed, 73 insertions, 70 deletions
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index 6fc40768b..ca7ceb19f 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,16 +54,14 @@ 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 _keyChanged = false;
-
+ @observable private TEMPNUM = 0;
+ @observable private _keyChanged = false;
@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));
@@ -78,11 +75,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;
+ }
+ }
+ }
}
});
};
@@ -92,7 +111,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());
}
@@ -100,10 +119,7 @@ export class Timeline extends CollectionSubView(Document) {
}
-
-
- storeKeyChange = (node:Doc) =>{
- this._keyChanged = true;
+ storeKeyChange = (node: Doc) => {
if (this._inner.current) {
if (!this._barMoved) {
if (this._data.indexOf(node) === -1) {
@@ -120,25 +136,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");
}
}
@@ -146,6 +153,7 @@ export class Timeline extends CollectionSubView(Document) {
}
}
+
setTimeAndPos = (node: Doc) => {
let pos: Position = Position(node);
let timeandpos = new Doc();
@@ -156,20 +164,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) {
@@ -184,14 +185,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 {
-
}
});
}
@@ -200,7 +204,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;
@@ -247,17 +251,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
@@ -329,45 +332,45 @@ export class Timeline extends CollectionSubView(Document) {
@action
displayKeyFrames = async (dv: DocumentView) => {
- if (this._keyChanged){ //this runs when keyframe has been changed, so it should not delete any bars.
+ if (this._keyChanged) { //this runs when keyframe has been changed, so it should not delete any bars.
this._keyChanged = false;
} else {
- this.clearBars();
+ this.clearBars();
}
- let doc:Doc = dv.props.Document;
- let inner:HTMLDivElement = (await this._inner.current)!;
+ let doc: Doc = dv.props.Document;
+ let inner: HTMLDivElement = (await this._inner.current)!;
this._data.forEach((node) => {
- console.log(node);
- console.log(doc);
- if (node === doc){
- console.log("hi");
- const index = this._data.indexOf(node);
- this._keyframes[index].forEach( async (timeandpos) => {
- if (timeandpos !== undefined){
- timeandpos = TimeAndPosition(timeandpos);
- let time = NumCast(await timeandpos.time);
+ console.log(node);
+ console.log(doc);
+ if (node === doc) {
+ console.log("hi");
+ const index = this._data.indexOf(node);
+ this._keyframes[index].forEach(async (timeandpos) => {
+ if (timeandpos !== undefined) {
+ timeandpos = TimeAndPosition(timeandpos);
+ let time = NumCast(await timeandpos.time);
let bar: HTMLDivElement = this.createBar(5, time, "yellow");
inner.appendChild(bar);
}
- });
+ });
}
- });
+ });
}
- @action
+ @action
clearBars = async () => {
- let inner:HTMLDivElement = (await this._inner.current)!;
- console.log(inner.children);
+ let inner: HTMLDivElement = (await this._inner.current)!;
+ console.log(inner.children);
inner.childNodes.forEach((bar) => {
- if (bar !== this._currentBar){
+ if (bar !== this._currentBar) {
inner.removeChild(bar);
}
- });
-
+ });
+
}
-
+
render() {
return (
@@ -378,9 +381,9 @@ export class Timeline extends CollectionSubView(Document) {
{
SelectionManager.SelectedDocuments().map((dv) => {
this.displayKeyFrames(dv);
- })}
+ })}
+
-
</div>
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-24 19:53:26 +0000