diff options
Diffstat (limited to 'src/client/views/nodes/Track.tsx')
| -rw-r--r-- | src/client/views/nodes/Track.tsx | 424 |
1 files changed, 424 insertions, 0 deletions
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx new file mode 100644 index 000000000..dab73ce06 --- /dev/null +++ b/src/client/views/nodes/Track.tsx @@ -0,0 +1,424 @@ +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, IObservableObject } 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); + + +interface props{ + node: Doc; +} + +@observer +export class Track extends React.Component<props> { + @observable private _inner = React.createRef<HTMLDivElement>(); + @observable private _timeInput = React.createRef<HTMLInputElement>(); + @observable private _playButton = React.createRef<HTMLButtonElement>(); + + @observable private _isRecording: Boolean = false; + 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) => { + + // 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; + }); + } + + + + /** + * 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 + componentDidMount() { + + + // if (!this._keyframes) { + // this.props.Document.keyframes = new List<List<Doc>>(); + // } + + let keys = Doc.allKeys(this.props.node); + + return reaction(() => keys.map(key => FieldValue(this.props.node[key])), data => { + console.log(data); + }); + } + + /** + * 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._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); + //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); + } + } + + @observable private _keyframes: JSX.Element[] = []; + + @action + onInnerDoubleClick = (e: React.MouseEvent) => { + let inner = this._inner.current!; + let left = inner.getBoundingClientRect().left; + let offsetX = Math.round(e.clientX - left); + this._keyframes.push(<Keyframe position={offsetX} />); + } + + render() { + return ( + <div className="track-container"> + <div className="datapane"> + <p>{this.props.node.title}</p> + </div> + <div className="track"> + <div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick}> + {this._keyframes.map((element)=> element)} + </div> + </div> + {/* <button onClick={this.onRecord}>Record</button> + <input placeholder={this._currentBarX.toString()} ref={this._timeInput} onKeyDown={this.onTimeEntered} ></input> + <button onClick={this.onPlay} ref={this._playButton}> Play </button>*/} + </div> + ); + } +}
\ No newline at end of file |