From 2665d93e729a75e44383e34d686ec666076c17ea Mon Sep 17 00:00:00 2001 From: loudonclear Date: Tue, 11 Jun 2019 13:30:28 -0400 Subject: changes --- .../CollectionFreeFormLinksView.tsx | 2 +- src/client/views/nodes/Timeline.tsx | 103 ++++++++++++++------- 2 files changed, 73 insertions(+), 32 deletions(-) diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx index c4dd534ed..481202dfc 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx @@ -109,7 +109,7 @@ export class CollectionFreeFormLinksView extends React.Component { 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, 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 (
); } + /** + * 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 (
- {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)} +
- +
); -- cgit v1.2.3-70-g09d2