diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/CollectionSubView.tsx | 55 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/Keyframe.scss | 42 | ||||
| -rw-r--r-- | src/client/views/nodes/Keyframe.tsx | 146 | ||||
| -rw-r--r-- | src/client/views/nodes/Timeline.scss | 34 | ||||
| -rw-r--r-- | src/client/views/nodes/Timeline.tsx | 107 | ||||
| -rw-r--r-- | src/client/views/nodes/Track.scss | 26 | ||||
| -rw-r--r-- | src/client/views/nodes/Track.tsx | 424 |
8 files changed, 814 insertions, 22 deletions
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index e55cd9e37..070abb51b 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -1,24 +1,22 @@ -import { action } from "mobx"; -import * as rp from 'request-promise'; -import CursorField from "../../../new_fields/CursorField"; -import { Doc, DocListCast, Opt } from "../../../new_fields/Doc"; -import { List } from "../../../new_fields/List"; -import { listSpec } from "../../../new_fields/Schema"; -import { Cast, PromiseValue } from "../../../new_fields/Types"; -import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; -import { RouteStore } from "../../../server/RouteStore"; -import { DocServer } from "../../DocServer"; -import { Docs, DocumentOptions } from "../../documents/Documents"; -import { DragManager } from "../../util/DragManager"; +import { action, runInAction } from "mobx"; +import React = require("react"); import { undoBatch, UndoManager } from "../../util/UndoManager"; -import { DocComponent } from "../DocComponent"; +import { DragManager } from "../../util/DragManager"; +import { Docs, DocumentOptions } from "../../documents/Documents"; +import { RouteStore } from "../../../server/RouteStore"; +import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; import { FieldViewProps } from "../nodes/FieldView"; +import * as rp from 'request-promise'; +import { CollectionView } from "./CollectionView"; import { CollectionPDFView } from "./CollectionPDFView"; import { CollectionVideoView } from "./CollectionVideoView"; -import { CollectionView } from "./CollectionView"; -import React = require("react"); -import { FormattedTextBox } from "../nodes/FormattedTextBox"; -import { Id } from "../../../new_fields/FieldSymbols"; +import { Doc, Opt, FieldResult, DocListCast } from "../../../new_fields/Doc"; +import { DocComponent } from "../DocComponent"; +import { listSpec } from "../../../new_fields/Schema"; +import { Cast, PromiseValue, FieldValue, ListSpec } from "../../../new_fields/Types"; +import { List } from "../../../new_fields/List"; +import { DocServer } from "../../DocServer"; +import CursorField from "../../../new_fields/CursorField"; export interface CollectionViewProps extends FieldViewProps { addDocument: (document: Doc, allowDuplicates?: boolean) => boolean; @@ -80,15 +78,28 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) { @action protected drop(e: Event, de: DragManager.DropEvent): boolean { if (de.data instanceof DragManager.DocumentDragData) { + if (de.data.dropAction || de.data.userDropAction) { + ["width", "height", "curPage"].map(key => + de.data.draggedDocuments.map((draggedDocument: Doc, i: number) => + PromiseValue(Cast(draggedDocument[key], "number")).then(f => f && (de.data.droppedDocuments[i][key] = f)))); + } let added = false; if (de.data.dropAction || de.data.userDropAction) { - added = de.data.droppedDocuments.reduce((added: boolean, d) => this.props.addDocument(d) || added, false); + added = de.data.droppedDocuments.reduce((added: boolean, d) => { + let moved = this.props.addDocument(d); + return moved || added; + }, false); } else if (de.data.moveDocument) { - let movedDocs = de.data.options === this.props.Document[Id] ? de.data.draggedDocuments : de.data.droppedDocuments; - added = movedDocs.reduce((added: boolean, d) => - de.data.moveDocument(d, this.props.Document, this.props.addDocument) || added, false); + const move = de.data.moveDocument; + added = de.data.droppedDocuments.reduce((added: boolean, d) => { + let moved = move(d, this.props.Document, this.props.addDocument); + return moved || added; + }, false); } else { - added = de.data.droppedDocuments.reduce((added: boolean, d) => this.props.addDocument(d) || added, false); + added = de.data.droppedDocuments.reduce((added: boolean, d) => { + let moved = this.props.addDocument(d); + return moved || added; + }, false); } e.stopPropagation(); return added; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 84841e469..1a99ac383 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -26,6 +26,7 @@ import { MarqueeView } from "./MarqueeView"; import React = require("react"); import v5 = require("uuid/v5"); import PDFMenu from "../../pdf/PDFMenu"; +import { Timeline } from "../../nodes/Timeline"; export const panZoomSchema = createSchema({ panX: "number", @@ -364,6 +365,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { <CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" /> </CollectionFreeFormViewPannableContents> </MarqueeView> + <Timeline {...this.props} /> <CollectionFreeFormOverlayView {...this.props} {...this.getDocumentViewProps(this.props.Document)} /> </div> ); diff --git a/src/client/views/nodes/Keyframe.scss b/src/client/views/nodes/Keyframe.scss new file mode 100644 index 000000000..930384c7f --- /dev/null +++ b/src/client/views/nodes/Keyframe.scss @@ -0,0 +1,42 @@ +@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; + } + } + } + + .leftResize{ + left:-10px; + height:20px; + width:20px; + background-color: black; + top: calc(50% - 10px); + position:absolute; + } + .rightResize{ + right:-10px; + height:20px; + width:20px; + top:calc(50% - 10px); + background-color:black; + position:absolute; + + } + + +}
\ 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..6f7a7ec0b --- /dev/null +++ b/src/client/views/nodes/Keyframe.tsx @@ -0,0 +1,146 @@ +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"; + @observable private _duration:number = 200; + @observable private _bar = React.createRef<HTMLDivElement>(); + + componentDidMount() { + console.log("mounted"); + if (this.props.node){ + + + } + } + + componentWillUnmount() { + + } + + @action + onPointerEnter = (e: React.PointerEvent) => { + e.preventDefault(); + e.stopPropagation(); + //this._display = "block"; + } + + @action + onPointerOut = (e: React.PointerEvent) => { + e.preventDefault(); + e.stopPropagation(); + //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(); + } + + @action + onResizeLeft = (e:React.PointerEvent)=>{ + let bar = this._bar.current!; + bar.addEventListener("pointermove", this.onDragResizeLeft); + } + + @action + onDragResizeLeft = (e:PointerEvent)=>{ + e.preventDefault(); + e.stopPropagation(); + let bar = this._bar.current!; + let barX = bar.getBoundingClientRect().left; + let offset = barX - e.clientX; + bar.style.width = `${bar.getBoundingClientRect().width + offset}px`; + } + + @action + onResizeFinished =(e:React.PointerEvent) => { + e.preventDefault(); + e.stopPropagation(); + let bar = this._bar.current!; + bar.removeEventListener("pointermove", this.onDragResizeLeft); + } + + @action + onResizeRight = (e:React.PointerEvent)=> { + e.preventDefault(); + e.stopPropagation(); + let bar = this._bar.current!; + bar.addEventListener("pointermove", this.onDragResizeRight); + } + + @action + onDragResizeRight = (e:PointerEvent) => { + e.preventDefault(); + e.stopPropagation(); + let bar = this._bar.current!; + let barX = bar.getBoundingClientRect().right; + let offset = e.clientX - barX; + bar.style.width = `${bar.getBoundingClientRect().width + offset}px`; + } + + render() { + return ( + <div> + <div className="bar" ref={this._bar} style={{ transform: `translate(${this.props.position - (this._duration/2)}px)`, width:`${this._duration}px`}} onPointerOver={this.onPointerEnter} onPointerLeave={this.onPointerOut}> + <div className="leftResize" onPointerDown={this.onResizeLeft} ></div> + <div className="rightResize" onPointerDown={this.onResizeRight}></div> + <div className="menubox" style={{display: this._display}}> + {/* <table className="menutable"> + <tr> + <th>Time: </th> + <input placeholder={this.props.position.toString()}></input> + </tr> + <tr> + </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 new file mode 100644 index 000000000..a7b0323ff --- /dev/null +++ b/src/client/views/nodes/Timeline.scss @@ -0,0 +1,34 @@ +@import "./../globalCssVariables.scss"; + +.timeline-container{ + width:100%; + height:200px; + position:absolute; + background-color:$intermediate-color; + .toolbox{ + padding-top:10px; + } + .scrubberbox{ + z-index:10; + background-color: black; + height: 20px; + margin-left:calc(10% + 100px); + width: calc(80% - 100px); + .scrubber{ + z-index:10; + height:300px; + width: 5px; + background-color:green; + } + } + .trackbox{ + height:60%; + width:80%; + border:1px; + overflow:auto; + background-color:white; + margin-Left:10%; + position:absolute; + + } +}
\ No newline at end of file diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx new file mode 100644 index 000000000..c6118da91 --- /dev/null +++ b/src/client/views/nodes/Timeline.tsx @@ -0,0 +1,107 @@ +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 { observer} from "mobx-react"; +import { Track } from "./Track"; +import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS, Reaction } from "mobx"; +import { Cast } from "../../../new_fields/Types"; +import { SelectionManager } from "../../util/SelectionManager"; +import { List } from "../../../new_fields/List"; +import { Self } from "../../../new_fields/FieldSymbols"; +import { Doc, DocListCast } from "../../../new_fields/Doc"; + +@observer +export class Timeline extends CollectionSubView(Document){ + + @observable private _scrubberbox = React.createRef<HTMLDivElement>() + @observable private _currentBarX:number = 0; + @observable private _windSpeed:number = 1; + @observable private _isPlaying:boolean = false; + @observable private _boxLength:number = 0; + @observable private _nodes:List<Doc> = new List<Doc>(); + + + private _reactionDisposers: IReactionDisposer[] = []; + + + @action + componentDidMount(){ + let scrubber = this._scrubberbox.current!; + this._boxLength = scrubber.getBoundingClientRect().width; + let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)); + if (!children) { + return; + } + let childrenList = ((children[Self] as any).__fields) as List<Doc>; + this._nodes = (childrenList) as List<Doc>; + } + + componentWillUnmount(){ + + } + + @action + onPlay = async (e: React.MouseEvent) => { + if (this._isPlaying) { + this._isPlaying = false; + } else { + this._isPlaying = true; + this.changeCurrentX(); + } + } + + @action + changeCurrentX = () => { + if (this._currentBarX >= this._boxLength && this._isPlaying) { + this._currentBarX = 0; + } + if (this._currentBarX <= this._boxLength && this._isPlaying) { + this._currentBarX = this._currentBarX + this._windSpeed; + setTimeout(this.changeCurrentX, 15); + } + } + + @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; + } + } + + @action + onScrubberDown = (e:React.PointerEvent) => { + let scrubberbox = this._scrubberbox.current!; + let left = scrubberbox.getBoundingClientRect().left; + let offsetX = Math.round(e.clientX - left); + this._currentBarX = offsetX; + } + + + render(){ + return ( + <div className="timeline-container"> + <div className="toolbox"> + <button onClick={this.windBackward}> {"<"} </button> + <button onClick={this.onPlay}> Play </button> + <button onClick={this.windForward}> {">"} </button> + </div> + <div className="scrubberbox" onPointerDown={this.onScrubberDown} ref ={this._scrubberbox}> + <div className="scrubber" style={{transform:`translate(${this._currentBarX}px)`}}></div> + </div> + <div className="trackbox"> + {this._nodes.map(doc => {return <Track node={(doc as any).value() as Doc}/>})} + </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..e922aa1df --- /dev/null +++ b/src/client/views/nodes/Track.scss @@ -0,0 +1,26 @@ +@import "./../globalCssVariables.scss"; + +.track-container{ + + .datapane{ + top:0px; + width: 100px; + height: 100px; + background-color: $light-color-secondary; + position:relative; + float:left; + border-style:solid; + } + + .track { + .inner { + top:0px; + float:right; + height: 100px; + width: calc(100% - 100px); + background-color: $light-color; + border-style:solid; + position:relative; + } + } +}
\ 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..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 |