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.tsx103
1 files changed, 72 insertions, 31 deletions
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index 6d041b03a..fd3707a50 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -9,8 +9,8 @@ import { DocumentViewProps, DocumentView } from "./DocumentView";
import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
import { Doc, DocListCastAsync } from "../../../new_fields/Doc";
import { Document, listSpec, createSchema, makeInterface, defaultSpec } from "../../../new_fields/Schema";
-import { FieldValue, Cast, NumCast } from "../../../new_fields/Types";
-import { emptyStatement } from "babel-types";
+import { FieldValue, Cast, NumCast, BoolCast } from "../../../new_fields/Types";
+import { emptyStatement, thisExpression } from "babel-types";
import { DocumentManager } from "../../util/DocumentManager";
import { SelectionManager } from "../../util/SelectionManager";
import { List } from "../../../new_fields/List";
@@ -47,20 +47,22 @@ export class Timeline extends CollectionSubView(Document) {
@observable private _isRecording: Boolean = false;
private _reactionDisposers: IReactionDisposer[] = [];
+ private _selectionManagerChanged?: IReactionDisposer;
@observable private _currentBarX: number = 0;
@observable private _keys = ["x", "y"];
@observable private _data: Doc[] = []; // 1D list of nodes
@observable private _keyframes: Doc[][] = []; //2D list of infos
- @observable private _keyChanged = false;
- @observable private _bars: HTMLDivElement[] = Array(1000); //////////////////////////////////////////////////////////////////////////change
+ @observable private _bars: { x: number, doc: Doc }[] = [];
+ @observable private _barMoved: boolean = false;
+
@action
onRecord = (e: React.MouseEvent) => {
if (this._isRecording === true) {
this._isRecording = false;
return;
- }
+ }
this._isRecording = true;
let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc));
if (!children) {
@@ -75,7 +77,6 @@ export class Timeline extends CollectionSubView(Document) {
}, async data => {
if (this._inner.current) {
if (!this._barMoved) {
- let bar;
if (this._data.indexOf(node) === -1) {
this._data.push(node);
let index = this._data.indexOf(node);
@@ -84,15 +85,15 @@ export class Timeline extends CollectionSubView(Document) {
let info: Doc[] = new Array(1000); //kinda weird
info[this._currentBarX] = timeandpos;
this._keyframes[index] = info;
-
- //graphical yellow bar
- bar = this.createBar(5, this._currentBarX, "yellow");
+ this._bars = [];
+
+ this._bars.push({ x: this._currentBarX, doc: node });
} 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);
- bar = this.createBar(5, this._currentBarX, "yellow");
this._keyframes[index][this._currentBarX] = timeandpos;
+ this._bars.push({ x: this._currentBarX, doc: node });
} else { //when node is in data, and has data for this specific time
let timeandpos = this.setTimeAndPos(node);
this._keyframes[index][this._currentBarX] = timeandpos;
@@ -103,6 +104,8 @@ export class Timeline extends CollectionSubView(Document) {
});
};
+
+
observe(childrenList as IObservableArray<Doc>, change => {
if (change.type === "update") {
this._reactionDisposers[change.index]();
@@ -116,6 +119,7 @@ export class Timeline extends CollectionSubView(Document) {
}
+ @action
setTimeAndPos = (node: Doc) => {
let pos: Position = Position(node);
let timeandpos = new Doc();
@@ -162,6 +166,7 @@ export class Timeline extends CollectionSubView(Document) {
});
}
+ @action
calcMinLeft = (kfList: Doc[], time: number): number => { //returns the time of the closet keyframe to the left
let counter: number = Infinity;
let leftMin: number = Infinity;
@@ -177,6 +182,10 @@ export class Timeline extends CollectionSubView(Document) {
return leftMin;
}
+ /**
+ * calculates the
+ */
+ @action
calcMinRight = (kfList: Doc[], time: number): number => { //returns the time of the closest keyframe to the right
let counter: number = Infinity;
let rightMin: number = Infinity;
@@ -196,7 +205,9 @@ export class Timeline extends CollectionSubView(Document) {
/**
* Linearly interpolates a document from time1 to time2
* @param Doc that needs to be modified
- * @param
+ * @param kf1 timeandposition of the first yellow bar
+ * @param kf2 timeandposition of the second yellow bar
+ * @param time time that you want to interpolate
*/
@action
interpolate = async (doc: Doc, kf1: TimeAndPosition, kf2: TimeAndPosition, time: number) => {
@@ -213,18 +224,22 @@ export class Timeline extends CollectionSubView(Document) {
});
}
- private _barMoved: boolean = false;
+ /**
+ * when user lifts the pointer. Removes pointer move event and no longer tracks green bar moving
+ * @param e react pointer event
+ */
@action
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);
- });
}
+ /**
+ * called when user clicks on a certain part of the inner. This will move the green bar to that position.
+ * @param e react pointer event
+ */
@action
onInnerPointerDown = (e: React.PointerEvent) => {
e.preventDefault();
@@ -235,7 +250,7 @@ export class Timeline extends CollectionSubView(Document) {
let mouse = e.nativeEvent;
let offsetX = Math.round(mouse.offsetX);
this._currentBarX = offsetX;
- this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove); //reset
+ this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
this._inner.current.addEventListener("pointermove", this.onInnerPointerMove);
this.timeChange(this._currentBarX);
}
@@ -243,54 +258,71 @@ export class Timeline extends CollectionSubView(Document) {
}
}
+ /**
+ * Called when you drag the green bar across the inner div.
+ * @param e pointer event
+ */
@action
onInnerPointerMove = (e: PointerEvent) => {
e.preventDefault();
e.stopPropagation();
this._barMoved = true;
- let offsetX = Math.round(e.offsetX);
+ let offsetX = Math.round(e.offsetX); //currentbarX is rounded so it is indexable
this._currentBarX = offsetX;
this.timeChange(this._currentBarX);
}
- createBar = (width: number, pos: number = 0, color: string = "green"):JSX.Element => {
+ /**
+ * creates JSX bar element.
+ * @param width required: the thickness of the bar
+ * @param pos optional: the position of the bar
+ * @param color option: default is green, but you can choose other colors
+ */
+ @action
+ createBar = (width: number, pos: number = 0, color: string = "green"): JSX.Element => {
return (
<div style={{
height: "100%",
width: `${width}px`,
- backgroundColor: color,
- transform: `translate(${pos}px)`,
+ backgroundColor: color,
+ transform: `translate(${pos}px)`,
position: "absolute",
pointerEvents: "none"
}}></div>
);
}
+ /**
+ * called when you input a certain time on the input bar and press enter. The green bar will move to that location.
+ * @param e keyboard event
+ */
+ @action
onTimeEntered = (e: React.KeyboardEvent) => {
if (this._timeInput.current) {
if (e.keyCode === 13) {
let input = parseInt(this._timeInput.current.value) || 0;
this._currentBarX = input;
+ this.timeChange(input);
}
}
}
- componentDidMount() {
-
- let doc: Doc = this.props.Document;
- let test = this.props.Document[this.props.fieldKey];
-
- }
-
+ /**
+ * removes reaction when the component is removed from the timeline
+ */
componentWillUnmount() {
this._reactionDisposers.forEach(disp => disp());
this._reactionDisposers = [];
}
+
+ /**
+ * Displays yellow bars per node when selected
+ */
@action
- displayKeyFrames = (dv: DocumentView) => {
- let doc: Doc = dv.props.Document;
+ displayKeyFrames = (doc: Doc) => {
let views: (JSX.Element | null)[] = [];
+ //this._bar = undefined;
this._data.forEach((node, i) => {
if (node === doc) {
views = this._keyframes[i].map(tp => {
@@ -307,18 +339,27 @@ export class Timeline extends CollectionSubView(Document) {
return views;
}
+ // @action
+ // currentKeyFrames = (doc?:Doc) => {
+ // this.displayKeyFrames(doc!);
+ // }
+
render() {
return (
<div>
<div className="timeline-container">
<div className="timeline">
<div className="inner" ref={this._inner} onPointerDown={this.onInnerPointerDown} onPointerUp={this.onInnerPointerUp}>
- {SelectionManager.SelectedDocuments().map((dv) => this.displayKeyFrames(dv))}
+ {SelectionManager.SelectedDocuments().map(dv => this.displayKeyFrames(dv.props.Document))}
+ {this._bars.map((data) => {
+ return this.createBar(5, data.x, "yellow");
+ })}
{this.createBar(5, this._currentBarX)}
+
</div>
</div>
<button onClick={this.onRecord}>Record</button>
- <input placeholder="Time" ref={this._timeInput} onKeyDown={this.onTimeEntered}></input>
+ <input placeholder={this._currentBarX.toString()} ref={this._timeInput} onKeyDown={this.onTimeEntered} ></input>
</div>
</div>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-24 14:55:14 +0000