aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
authorloudonclear <adkim414@gmail.com>2019-06-19 10:33:11 -0400
committerloudonclear <adkim414@gmail.com>2019-06-19 10:33:11 -0400
commit454dfcbcc7cf9ac8b859c3457c6e75efb1a2b12f (patch)
tree00b59e453b467f45c06fea6bf6f22a3c27e19e9f /src/client
parenta659c41447ed5bbef653a34d840c90a0ebd0de6e (diff)
structural change
Diffstat (limited to 'src/client')
-rw-r--r--src/client/views/nodes/Keyframe.scss22
-rw-r--r--src/client/views/nodes/Keyframe.tsx109
-rw-r--r--src/client/views/nodes/Timeline.scss53
-rw-r--r--src/client/views/nodes/Timeline.tsx487
-rw-r--r--src/client/views/nodes/Track.scss42
-rw-r--r--src/client/views/nodes/Track.tsx481
6 files changed, 686 insertions, 508 deletions
diff --git a/src/client/views/nodes/Keyframe.scss b/src/client/views/nodes/Keyframe.scss
new file mode 100644
index 000000000..efd335c89
--- /dev/null
+++ b/src/client/views/nodes/Keyframe.scss
@@ -0,0 +1,22 @@
+@import "./../globalCssVariables.scss";
+
+.bar {
+ height: 100%;
+ width: 5px;
+ background-color: green;
+ position: absolute;
+
+ // pointer-events: none;
+ .menubox {
+ width: 200px;
+ height: 200px;
+ top: 50%;
+ position: absolute;
+ background-color: $light-color;
+ .menutable{
+ tr:nth-child(odd){
+ background-color:$light-color-secondary;
+ }
+ }
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
new file mode 100644
index 000000000..eaa816f2c
--- /dev/null
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -0,0 +1,109 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import "./Keyframe.scss";
+import "./../globalCssVariables.scss";
+import { observer } from "mobx-react";
+import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS } from "mobx";
+import { Doc } from "../../../new_fields/Doc";
+import { auto } from "async";
+import { Cast, FieldValue, StrCast } from "../../../new_fields/Types";
+import { StandardLonghandProperties } from "csstype";
+import { runInThisContext } from "vm";
+import { DateField } from "../../../new_fields/DateField";
+import { DocumentManager } from "../../util/DocumentManager";
+
+
+
+interface IProp {
+ collection?: Doc;
+ node?: Doc;
+ position: number;
+}
+
+@observer
+export class Keyframe extends React.Component<IProp> {
+
+ @observable private _display:string = "none";
+
+ async componentDidMount() {
+ console.log("mounted");
+ if (this.props.node){
+ let field = FieldValue(this.props.node.creationDate)! as DateField;
+ console.log(field.date.toISOString());
+
+
+ }
+ }
+
+ componentWillUnmount() {
+
+ }
+
+ @action
+ onPointerEnter = (e: React.PointerEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ //console.log("in");
+ this._display = "block";
+ }
+
+ @action
+ onPointerOut = (e: React.PointerEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ //console.log("out");
+ this._display = "none";
+ }
+
+ @action
+ onKeyDown = (e: React.KeyboardEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ console.log("pressed");
+ if (e.keyCode === 13){
+ console.log("hellow");
+ }
+ }
+
+ @action
+ onPointerDown = (e:React.PointerEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+
+
+
+
+ render() {
+ return (
+ <div>
+ <div className="bar" style={{ transform: `translate(${this.props.position}px)` }} onPointerOver={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
+ <div className="menubox" style={{display: this._display}}>
+ <table className="menutable">
+ <tr>
+ <th>Time: </th>
+ <input placeholder={this.props.position.toString()}></input>
+ </tr>
+ <tr>
+ <th>Date Created: </th>
+ <th>{(FieldValue(this.props.node!.creationDate)! as DateField).date.toLocaleString()}</th>
+ </tr>
+ <tr>
+ <th onPointerDown={this.onPointerDown}>Title</th>
+ <th>{this.props.node!.title}</th>
+ </tr>
+ <tr>
+ <th>X</th>
+ <th>{this.props.node!.x}</th>
+ </tr>
+ <tr>
+ <th>Y</th>
+ <th>{this.props.node!.y}</th>
+ </tr>
+ </table>
+ </div>
+ </div>
+ </div>
+ );
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss
index c352c9519..102515b6a 100644
--- a/src/client/views/nodes/Timeline.scss
+++ b/src/client/views/nodes/Timeline.scss
@@ -1,42 +1,21 @@
-.timeline-container {
- height: 100px;
- width: 500px;
- background-color: rgb(160, 226, 243);
- position: absolute;
- left: 15%;
- top: 1%;
- font-size: 75%;
+@import "./../globalCssVariables.scss";
- .timeline {
- height: 60px;
- width: 500px;
- bottom: 0px;
- background-color: grey;
- position: absolute;
+.timeline-container{
+ width:100%;
+ height:200px;
+ position:absolute;
+ background-color:$intermediate-color;
+ .toolbox{
+ padding-top:10px;
}
+ .trackbox{
+ height:60%;
+ width:80%;
+ border:1px;
+ overflow:auto;
+ background-color:white;
+ margin-Left:10%;
+ position:absolute;
- .inner {
- height: 44px;
- width: 484px;
- background-color: black;
- //opacity: 0.5;
- position: absolute;
- margin: 8px;
- z-index: 10;
- }
-
- button {
- height: 30px;
- width: 50px;
- font-size: 1em;
- position: relative;
- margin: 5px;
- }
-
- input {
- height: 30px;
- width: 100px;
- font-size: 1em;
- margin: 5px;
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index 463564d76..f18d8f2a0 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -1,481 +1,26 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import { observer } from "mobx-react";
-import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS } from "mobx";
-import "./Timeline.scss";
-import { CollectionViewProps } from "../collections/CollectionBaseView";
-import { CollectionSubView, SubCollectionViewProps } from "../collections/CollectionSubView";
-import { DocumentViewProps, DocumentView } from "./DocumentView";
-import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
-import { Doc, DocListCastAsync, DocListCast } from "../../../new_fields/Doc";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import "./Timeline.scss";
+import { CollectionSubView } from "../collections/CollectionSubView";
import { Document, listSpec, createSchema, makeInterface, defaultSpec } from "../../../new_fields/Schema";
-import { FieldValue, Cast, NumCast, BoolCast } from "../../../new_fields/Types";
-import { emptyStatement, thisExpression, react } from "babel-types";
-import { DocumentManager } from "../../util/DocumentManager";
-import { SelectionManager } from "../../util/SelectionManager";
-import { List } from "../../../new_fields/List";
-import { Self } from "../../../new_fields/FieldSymbols";
-import { list } from "serializr";
-import { arrays, Dictionary } from "typescript-collections";
-import { forEach } from "typescript-collections/dist/lib/arrays";
-import { CompileScript } from "../../util/Scripting";
-import { FieldView } from "./FieldView";
-import { promises } from "fs";
-import { Tapable } from "tapable";
-
-type Data = List<Doc>;
-type Keyframes = List<List<Doc>>;
-
-const PositionSchema = createSchema({
- x: defaultSpec("number", 0),
- y: defaultSpec("number", 0)
-});
-
-type Position = makeInterface<[typeof PositionSchema]>;
-const Position = makeInterface(PositionSchema);
-const TimeAndPositionSchema = createSchema({
- time: defaultSpec("number", 0),
- position: Doc
-});
-
-type TimeAndPosition = makeInterface<[typeof TimeAndPositionSchema]>;
-const TimeAndPosition = makeInterface(TimeAndPositionSchema);
+import { observer } from "mobx-react";
+import { Track } from "./Track";
@observer
-export class Timeline extends CollectionSubView(Document) {
- @observable private _inner = React.createRef<HTMLDivElement>();
- @observable private _timeInput = React.createRef<HTMLInputElement>();
- @observable private _playButton = React.createRef<HTMLButtonElement>();
-
- @observable private _isRecording: Boolean = false;
- @observable private _windSpeed: number = 1;
- private _reactionDisposers: IReactionDisposer[] = [];
- private _selectionManagerChanged?: IReactionDisposer;
-
- @observable private _currentBarX: number = 0;
- @observable private _keys = ["x", "y", "width", "height", "panX", "panY", "scale"];
- @observable private _bars: { x: number, doc: Doc }[] = [];
- @observable private _barMoved: boolean = false;
-
- @computed private get _keyframes() {
- return Cast(this.props.Document.keyframes, listSpec(Doc)) as any as List<List<Doc>>;
- }
-
- @computed private get _data() {
- //return Cast(this.props.Document.dataa, listSpec(Doc)) as List<Doc>;
- return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc))!;
- }
-
- /**
- * when the record button is pressed
- * @param e MouseEvent
- */
- @action
- onRecord = (e: React.MouseEvent) => {
- console.log(this._data.length + " from record");
- console.log(this._keyframes.length + " from record");
- if (this._isRecording === true) {
- this._isRecording = false;
- return;
- }
- this._isRecording = true;
- let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc));
- if (!children) {
- return;
- }
- let childrenList = ((children[Self] as any).__fields);
- const addReaction = (node: Doc) => {
- node = (node as any).value();
- return reaction(() => {
- return this._keys.map(key => FieldValue(node[key]));
- }, async data => {
- console.log(this._data.length + " from here");
- console.log(this._keyframes.length);
- if (!this._barMoved) {
- if (this._data.indexOf(node) !== -1 && this._keyframes.length < this._data.length) {
- let timeandpos = this.setTimeAndPos(node);
- let info: List<Doc> = new List<Doc>(new Array<Doc>(1000)); //kinda weird
- info[this._currentBarX] = timeandpos;
- this._keyframes.push(info);
- this._bars = [];
- this._bars.push({ x: this._currentBarX, doc: node });
- } else {
- let index = this._data.indexOf(node);
- console.log(index);
- 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);
- 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;
- }
- }
- }
- });
- };
-
-
- observe(childrenList as IObservableArray<Doc>, change => {
- console.log(childrenList + " has been printed");
- if (change.type === "update") {
- this._reactionDisposers[change.index]();
- console.log(this._data.length);
- 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());
- }
- }, true);
-
- }
-
- /**
- * sets the time and pos schema doc, given a node
- * @param doc (node)
- */
- @action
- setTimeAndPos = (node: Doc) => {
- let pos: Position = Position(node);
- let timeandpos = new Doc();
- const newPos = new Doc();
- this._keys.forEach(key => newPos[key] = pos[key]);
- timeandpos.position = newPos;
- timeandpos.time = this._currentBarX;
- return timeandpos;
- }
-
- /**
- * given time, finds the closest left and right keyframes, and if found, interpolates to that position.
- */
- @action
- timeChange = async (time: number) => {
- const docs = this._data;
- console.log(docs.length + " from time change");
- docs.forEach(async (oneDoc, i) => {
- let OD: Doc = await oneDoc;
- let leftKf!: TimeAndPosition;
- let rightKf!: TimeAndPosition;
- let singleFrame: Doc | undefined = undefined;
- if (i >= this._keyframes.length) {
- return;
- }
- let oneKf = this._keyframes[i];
- oneKf.forEach((singleKf) => {
- singleKf = singleKf as Doc;
- if (singleKf !== undefined) {
- let leftMin = Infinity;
- let rightMin = Infinity;
- if (singleKf.time !== time) { //choose closest time neighbors
- leftMin = this.calcMinLeft(oneKf, time);
- if (leftMin !== Infinity) {
- console.log("ran here");
- let kf = this._keyframes[i][leftMin] as Doc;
- leftKf = TimeAndPosition(kf);
- }
- rightMin = this.calcMinRight(oneKf, time);
- if (rightMin !== Infinity) {
- console.log("right here");
- let kf = this._keyframes[i][rightMin] as Doc;
- rightKf = TimeAndPosition(kf);
- }
- } else {
- singleFrame = singleKf;
- if (true || oneKf[i] !== undefined) {
- console.log("hey");
- this._keys.map(key => {
- let temp = OD[key];
- FieldValue(OD[key]);
- });
- }
- }
- }
- });
- if (!singleFrame) {
- if (leftKf && rightKf) {
- this.interpolate(OD, leftKf, rightKf, this._currentBarX);
- } else if (leftKf){
- this._keys.map(async key => {
- let pos = (await leftKf.position)!;
- if (pos === undefined){ ///something is probably wrong here
- return;
- }
- OD[key] = pos[key];
- });
- } else if (rightKf){
- this._keys.map(async key => {
- let pos = (await rightKf.position)!;
- if (pos === undefined){ //something is probably wrong here
- return;
- }
- OD[key] = pos[key];
- });
- }
- }
- });
- }
-
- /**
- * calculates the closest left keyframe, if there is one
- * @param kfList: keyframe list
- * @param time
- */
- @action
- calcMinLeft = (kfList: List<Doc>, time: number): number => { //returns the time of the closet keyframe to the left
- let counter: number = Infinity;
- let leftMin: number = Infinity;
- kfList.forEach((kf) => {
- kf = kf as Doc;
- if (kf !== undefined && NumCast(kf.time) < time) {
- let diff: number = Math.abs(NumCast(kf.time) - time);
- if (diff < counter) {
- counter = diff;
- leftMin = NumCast(kf.time);
- }
- }
- });
- return leftMin;
- }
-
- /**
- * calculates the closest right keyframe, if there is one
- * @param kfList: keyframe lsit
- * @param time: time
-
- */
- @action
- calcMinRight = (kfList: List<Doc>, time: number): number => { //returns the time of the closest keyframe to the right
- let counter: number = Infinity;
- let rightMin: number = Infinity;
- kfList.forEach((kf) => {
- kf = kf as Doc;
- if (kf !== undefined && NumCast(kf.time) > time) {
- let diff: number = Math.abs(NumCast(kf.time!) - time);
- if (diff < counter) {
- counter = diff;
- rightMin = NumCast(kf.time);
- }
- }
- });
- return rightMin;
- }
-
-
- /**
- * Linearly interpolates a document from time1 to time2
- * @param Doc that needs to be modified
- * @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) => {
- const keyFrame1 = (await kf1.position)!;
- const keyFrame2 = (await kf2.position)!;
-
- if(keyFrame1 === undefined || keyFrame2 === undefined){
- return;
- }
-
- const dif_time = kf2.time - kf1.time;
- const ratio = (time - kf1.time) / dif_time; //linear
- this._keys.forEach(key => {
- const diff = NumCast(keyFrame2[key]) - NumCast(keyFrame1[key]);
- const adjusted = diff * ratio;
- doc[key] = NumCast(keyFrame1[key]) + adjusted;
- });
- }
-
- /**
- * 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) {
- if (!this._isPlaying) {
- this._barMoved = false;
- }
- this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
- }
- }
-
- /**
- * 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();
- e.stopPropagation();
- if (this._isRecording) {
- if (this._inner.current) {
- this._barMoved = true;
- let mouse = e.nativeEvent;
- let offsetX = Math.round(mouse.offsetX);
- this._currentBarX = offsetX;
- this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
- this._inner.current.addEventListener("pointermove", this.onInnerPointerMove);
- this.timeChange(this._currentBarX);
- }
-
- }
- }
-
- /**
- * 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); //currentbarX is rounded so it is indexable
- this._currentBarX = offsetX;
- this.timeChange(this._currentBarX);
- }
-
- @observable private _isPlaying = false;
-
- @action
- onPlay = async (e: React.MouseEvent) => {
- let playButton: HTMLButtonElement = (await this._playButton.current)!;
- if (this._isPlaying) {
- playButton.innerHTML = "Play";
- this._isPlaying = false;
- this._barMoved = false;
- } else {
- playButton.innerHTML = "Stop";
- this._barMoved = true;
- this._isPlaying = true;
- this.changeCurrentX();
-
- }
-
- }
-
-
- @action
- changeCurrentX = () => {
- if (this._currentBarX >= 484 && this._isPlaying === true) {
- this._currentBarX = 0;
- }
- if (this._currentBarX <= 484 && this._isPlaying === true) { ///////////////////////////////////////////////////////////////////////////// needs to be width
- this._currentBarX = this._currentBarX + this._windSpeed;
- setTimeout(this.changeCurrentX, 15);
- this.timeChange(this._currentBarX);
- }
- }
-
-
- @action
- windForward = (e: React.MouseEvent) => {
- if (this._windSpeed < 64) { //max speed is 32
- this._windSpeed = this._windSpeed * 2;
- }
- }
-
- @action
- windBackward = (e: React.MouseEvent) => {
- if (this._windSpeed > 1 / 16) { // min speed is 1/8
- this._windSpeed = this._windSpeed / 2;
- }
- }
-
- /**
- * 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)`,
- 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);
- }
- }
- }
+export class Timeline extends CollectionSubView(Document){
-
- async componentDidMount() {
- console.log(toJS(this.props.Document.proto) || null);
- if (!this._keyframes) {
- console.log("new data");
- this.props.Document.keyframes = new List<List<Doc>>();
- }
- }
-
- /**
- * 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
- */
- displayKeyFrames = (doc: Doc) => {
- let views: (JSX.Element | null)[] = [];
- DocListCast(this._data).forEach((node, i) => {
- if (node === doc) {
- //set it to views
- views = DocListCast(this._keyframes[i]).map(tp => {
- const timeandpos = TimeAndPosition(tp);
- let time = timeandpos.time;
- let bar = this.createBar(5, time, "yellow");
- return bar;
- });
- }
- });
- return views;
- }
-
- render() {
+ 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.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={this._currentBarX.toString()} ref={this._timeInput} onKeyDown={this.onTimeEntered} ></input>
- <button onClick={this.windBackward}> {"<"}</button>
- <button onClick={this.onPlay} ref={this._playButton}> Play </button>
- <button onClick={this.windForward}>{">"}</button>
- <button onClick={() => {console.log(this._data + " data, "); console.log(this._keyframes.length + " keyframes");}}>data</button>
+ <div className="timeline-container">
+ <div className="toolbox">
+ <button> Play </button>
</div>
+ <div className="trackbox">
+ <Track {...this.props}/>
+ </div>
</div>
- );
+ );
}
+
} \ No newline at end of file
diff --git a/src/client/views/nodes/Track.scss b/src/client/views/nodes/Track.scss
new file mode 100644
index 000000000..9c6ab08f0
--- /dev/null
+++ b/src/client/views/nodes/Track.scss
@@ -0,0 +1,42 @@
+.track-container {
+ height: 100px;
+ width: 500px;
+ background-color: rgb(160, 226, 243);
+ position: absolute;
+ left: 15%;
+ top: 1%;
+ font-size: 75%;
+
+ .track {
+ height: 60px;
+ width: 500px;
+ bottom: 0px;
+ background-color: grey;
+ position: absolute;
+ }
+
+ .inner {
+ height: 44px;
+ width: 484px;
+ background-color: black;
+ //opacity: 0.5;
+ position: absolute;
+ margin: 8px;
+ z-index: 10;
+ }
+
+ button {
+ height: 30px;
+ width: 50px;
+ font-size: 1em;
+ position: relative;
+ margin: 5px;
+ }
+
+ input {
+ height: 30px;
+ width: 100px;
+ font-size: 1em;
+ margin: 5px;
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
new file mode 100644
index 000000000..3f840db78
--- /dev/null
+++ b/src/client/views/nodes/Track.tsx
@@ -0,0 +1,481 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { observer } from "mobx-react";
+import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS } from "mobx";
+import "./Track.scss";
+import { CollectionViewProps } from "../collections/CollectionBaseView";
+import { CollectionSubView, SubCollectionViewProps } from "../collections/CollectionSubView";
+import { DocumentViewProps, DocumentView } from "./DocumentView";
+import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
+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 { emptyStatement, thisExpression, react } from "babel-types";
+import { DocumentManager } from "../../util/DocumentManager";
+import { SelectionManager } from "../../util/SelectionManager";
+import { List } from "../../../new_fields/List";
+import { Self } from "../../../new_fields/FieldSymbols";
+import { list } from "serializr";
+import { arrays, Dictionary } from "typescript-collections";
+import { forEach } from "typescript-collections/dist/lib/arrays";
+import { CompileScript } from "../../util/Scripting";
+import { FieldView } from "./FieldView";
+import { promises } from "fs";
+import { Tapable } from "tapable";
+import { Keyframe } from "./Keyframe";
+import { timingSafeEqual } from "crypto";
+type Data = List<Doc>;
+type Keyframes = List<List<Doc>>;
+
+const PositionSchema = createSchema({
+ x: defaultSpec("number", 0),
+ y: defaultSpec("number", 0)
+});
+
+type Position = makeInterface<[typeof PositionSchema]>;
+const Position = makeInterface(PositionSchema);
+const TimeAndPositionSchema = createSchema({
+ time: defaultSpec("number", 0),
+ position: Doc
+});
+
+type TimeAndPosition = makeInterface<[typeof TimeAndPositionSchema]>;
+const TimeAndPosition = makeInterface(TimeAndPositionSchema);
+
+
+@observer
+export class Track extends CollectionSubView(Document) {
+ @observable private _inner = React.createRef<HTMLDivElement>();
+ @observable private _timeInput = React.createRef<HTMLInputElement>();
+ @observable private _playButton = React.createRef<HTMLButtonElement>();
+
+ @observable private _isRecording: Boolean = false;
+ @observable private _windSpeed: number = 1;
+ private _reactionDisposers: IReactionDisposer[] = [];
+ private _selectionManagerChanged?: IReactionDisposer;
+
+ @observable private _currentBarX: number = 0;
+ @observable private _keys = ["x", "y", "width", "height", "panX", "panY", "scale"];
+ @observable private _bars: { x: number, doc: Doc }[] = [];
+ @observable private _barMoved: boolean = false;
+ @observable private _length:number = 0;
+
+ @computed private get _keyframes() {
+ return Cast(this.props.Document.keyframes, listSpec(Doc)) as any as List<List<Doc>>;
+ }
+
+ @computed private get _data() {
+ //return Cast(this.props.Document.dataa, listSpec(Doc)) as List<Doc>;
+ return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc))!;
+ }
+
+ /**
+ * when the record button is pressed
+ * @param e MouseEvent
+ */
+ @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) {
+ return;
+ }
+ let childrenList = ((children[Self] as any).__fields);
+ const addReaction = (node: Doc) => {
+ node = (node as any).value();
+ return reaction(() => {
+ return this._keys.map(key => FieldValue(node[key]));
+ }, async data => {
+ if (!this._barMoved) {
+ if (this._data.indexOf(node) !== -1 && this._keyframes.length < this._data.length) {
+ let timeandpos = this.setTimeAndPos(node);
+ let info: List<Doc> = new List<Doc>(new Array<Doc>(1000)); //kinda weird
+ info[this._currentBarX] = timeandpos;
+ this._keyframes.push(info);
+ 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);
+ 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;
+ }
+ }
+ }
+ });
+ };
+
+
+ observe(childrenList as IObservableArray<Doc>, change => {
+ if (change.type === "update") {
+ 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());
+ }
+ }, true);
+
+ }
+
+ /**
+ * sets the time and pos schema doc, given a node
+ * @param doc (node)
+ */
+ @action
+ setTimeAndPos = (node: Doc) => {
+ let pos: Position = Position(node);
+ let timeandpos = new Doc();
+ const newPos = new Doc();
+ this._keys.forEach(key => newPos[key] = pos[key]);
+ timeandpos.position = newPos;
+ timeandpos.time = this._currentBarX;
+ return timeandpos;
+ }
+
+ /**
+ * given time, finds the closest left and right keyframes, and if found, interpolates to that position.
+ */
+ @action
+ timeChange = async (time: number) => {
+ const docs = this._data;
+ docs.forEach(async (oneDoc, i) => {
+ let OD: Doc = await oneDoc;
+ let leftKf!: TimeAndPosition;
+ let rightKf!: TimeAndPosition;
+ let singleFrame: Doc | undefined = undefined;
+ if (i >= this._keyframes.length) {
+ return;
+ }
+ let oneKf = this._keyframes[i];
+ oneKf.forEach((singleKf) => {
+ singleKf = singleKf as Doc;
+ if (singleKf !== undefined) {
+ let leftMin = Infinity;
+ let rightMin = Infinity;
+ if (singleKf.time !== time) { //choose closest time neighbors
+ leftMin = this.calcMinLeft(oneKf, time);
+ if (leftMin !== Infinity) {
+ let kf = this._keyframes[i][leftMin] as Doc;
+ leftKf = TimeAndPosition(kf);
+ }
+ rightMin = this.calcMinRight(oneKf, time);
+ if (rightMin !== Infinity) {
+ let kf = this._keyframes[i][rightMin] as Doc;
+ rightKf = TimeAndPosition(kf);
+ }
+ } else {
+ singleFrame = singleKf;
+ if (true || oneKf[i] !== undefined) {
+ this._keys.map(key => {
+ let temp = OD[key];
+ FieldValue(OD[key]);
+ });
+ }
+ }
+ }
+ });
+ if (!singleFrame) {
+ if (leftKf && rightKf) {
+ this.interpolate(OD, leftKf, rightKf, this._currentBarX);
+ } else if (leftKf) {
+ this._keys.map(async key => {
+ let pos = (await leftKf.position)!;
+ if (pos === undefined) { ///something is probably wrong here
+ return;
+ }
+ OD[key] = pos[key];
+ });
+ } else if (rightKf) {
+ this._keys.map(async key => {
+ let pos = (await rightKf.position)!;
+ if (pos === undefined) { //something is probably wrong here
+ return;
+ }
+ OD[key] = pos[key];
+ });
+ }
+ }
+ });
+ }
+
+ /**
+ * calculates the closest left keyframe, if there is one
+ * @param kfList: keyframe list
+ * @param time
+ */
+ @action
+ calcMinLeft = (kfList: List<Doc>, time: number): number => { //returns the time of the closet keyframe to the left
+ let counter: number = Infinity;
+ let leftMin: number = Infinity;
+ kfList.forEach((kf) => {
+ kf = kf as Doc;
+ if (kf !== undefined && NumCast(kf.time) < time) {
+ let diff: number = Math.abs(NumCast(kf.time) - time);
+ if (diff < counter) {
+ counter = diff;
+ leftMin = NumCast(kf.time);
+ }
+ }
+ });
+ return leftMin;
+ }
+
+ /**
+ * calculates the closest right keyframe, if there is one
+ * @param kfList: keyframe lsit
+ * @param time: time
+ */
+ @action
+ calcMinRight = (kfList: List<Doc>, time: number): number => { //returns the time of the closest keyframe to the right
+ let counter: number = Infinity;
+ let rightMin: number = Infinity;
+ kfList.forEach((kf) => {
+ kf = kf as Doc;
+ if (kf !== undefined && NumCast(kf.time) > time) {
+ let diff: number = Math.abs(NumCast(kf.time!) - time);
+ if (diff < counter) {
+ counter = diff;
+ rightMin = NumCast(kf.time);
+ }
+ }
+ });
+ return rightMin;
+ }
+
+
+ /**
+ * Linearly interpolates a document from time1 to time2
+ * @param Doc that needs to be modified
+ * @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) => {
+ const keyFrame1 = (await kf1.position)!;
+ const keyFrame2 = (await kf2.position)!;
+
+ if (keyFrame1 === undefined || keyFrame2 === undefined) {
+ return;
+ }
+
+ const dif_time = kf2.time - kf1.time;
+ const ratio = (time - kf1.time) / dif_time; //linear
+ this._keys.forEach(key => {
+ const diff = NumCast(keyFrame2[key]) - NumCast(keyFrame1[key]);
+ const adjusted = diff * ratio;
+ doc[key] = NumCast(keyFrame1[key]) + adjusted;
+ });
+ }
+
+
+
+ @observable private _isPlaying = false;
+
+ @action
+ onPlay = async (e: React.MouseEvent) => {
+ let playButton: HTMLButtonElement = (await this._playButton.current)!;
+ if (this._isPlaying) {
+ playButton.innerHTML = "Play";
+ this._isPlaying = false;
+ this._barMoved = false;
+ } else {
+ playButton.innerHTML = "Stop";
+ this._barMoved = true;
+ this._isPlaying = true;
+ this.changeCurrentX();
+ }
+
+ }
+
+
+ @action
+ changeCurrentX = () => {
+ if (this._currentBarX >= this._length && this._isPlaying === true) {
+ this._currentBarX = 0;
+ }
+ if (this._currentBarX <= this._length && this._isPlaying === true) { ///////////////////////////////////////////////////////////////////////////// needs to be width
+ this._currentBarX = this._currentBarX + this._windSpeed;
+ setTimeout(this.changeCurrentX, 15);
+ this.timeChange(this._currentBarX);
+ }
+ }
+
+
+ @action
+ windForward = (e: React.MouseEvent) => {
+ if (this._windSpeed < 64) { //max speed is 32
+ this._windSpeed = this._windSpeed * 2;
+ }
+ }
+
+ @action
+ windBackward = (e: React.MouseEvent) => {
+ if (this._windSpeed > 1 / 16) { // min speed is 1/8
+ this._windSpeed = this._windSpeed / 2;
+ }
+ }
+
+ /**
+ * 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);
+ }
+ }
+ }
+
+
+ @action
+ timer = (sec:number) => {
+ if(sec <= 0){
+ return;
+ }
+ setTimeout(() => {
+ this.timer(sec - 1);
+ this._timer = sec;
+ //dconsole.log(this._timer);
+ }, 1000);
+ }
+
+ @observable private _timer:number = 0;
+ async componentDidMount() {
+ this.timer(100);
+ console.log(toJS(this.props.Document.proto) || null);
+ if (this._inner.current){
+ console.log(this._inner.current.getBoundingClientRect().width);
+ }
+ if (!this._keyframes) {
+ this.props.Document.keyframes = new List<List<Doc>>();
+ }
+ }
+
+ /**
+ * 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
+ */
+ displayKeyFrames = (doc: Doc) => {
+ let views: (JSX.Element | null)[] = [];
+ DocListCast(this._data).forEach((node, i) => {
+ if (node === doc) {
+ //set it to views
+ views = DocListCast(this._keyframes[i]).map(tp => {
+ const timeandpos = TimeAndPosition(tp);
+ let time = timeandpos.time;
+ let bar = <Keyframe position={time}></Keyframe>;
+ return bar;
+ });
+ }
+ });
+ return views;
+ }
+
+ /**
+ * 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) => {
+ e.preventDefault();
+ e.stopPropagation();
+ if (this._inner.current) {
+ if (!this._isPlaying) {
+ this._barMoved = false;
+ }
+ this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
+ }
+ }
+
+ /**
+ * 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();
+ e.stopPropagation();
+ console.log("on timeline");
+ if (this._isRecording) {
+ if (this._inner.current) {
+ this._barMoved = true;
+ // let mouse = e.nativeEvent;
+ // let offsetX = Math.round(mouse.offsetX);
+ let left = this._inner.current.getBoundingClientRect().left;
+ let offsetX = Math.round(e.clientX - left);
+ console.log(offsetX);
+ this._currentBarX = offsetX;
+ this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
+ this._inner.current.addEventListener("pointermove", this.onInnerPointerMove);
+ this.timeChange(this._currentBarX);
+ }
+
+ }
+ }
+
+ /**
+ * 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;
+ if (this._inner.current) {
+ let left = this._inner.current.getBoundingClientRect().left;
+ let offsetX = Math.round(e.clientX - left);
+ this._currentBarX = offsetX;
+ this.timeChange(this._currentBarX);
+ }
+ }
+ @action
+ onInnerDoubleClick = (e: React.MouseEvent) => {
+ console.log("double click");
+ }
+
+ render() {
+ return (
+ <div>
+ <div className="track-container">
+ <div className="track">
+ <div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick} onPointerDown={this.onInnerPointerDown} onPointerUp={this.onInnerPointerUp}>
+ {SelectionManager.SelectedDocuments().map(dv => this.displayKeyFrames(dv.props.Document))}
+ {this._bars.map((data) => {
+ return <Keyframe position={data.x} node={data.doc}></Keyframe>;
+ })}
+ <Keyframe position={this._currentBarX} node={this.props.Document}></Keyframe>
+ </div>
+ </div>
+ <button onClick={this.onRecord}>Record</button>
+ <input placeholder={this._currentBarX.toString()} ref={this._timeInput} onKeyDown={this.onTimeEntered} ></input>
+ <button onClick={this.windBackward}> {"<"}</button>
+ <button onClick={this.onPlay} ref={this._playButton}> Play </button>
+ <button onClick={this.windForward}>{">"}</button>
+ <button onClick={() => { console.log(this._data + " data, "); console.log(this._keyframes.length + " keyframes"); }}>data</button>
+ </div>
+ </div>
+ );
+ }
+} \ No newline at end of file