diff options
Diffstat (limited to 'src')
6 files changed, 569 insertions, 27 deletions
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 93a1a8cda..d6b1aa29d 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; @@ -82,15 +80,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/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<CollectionViewP } return match || found; }, false)) { - drawnPairs.push({ a: possiblePair.a, b: possiblePair.b, l: [connection.l] }) + drawnPairs.push({ a: possiblePair.a, b: possiblePair.b, l: [connection.l] }); } }); return drawnPairs; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 63f24ff53..0fa6ebc1e 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -25,6 +25,9 @@ import "./CollectionFreeFormView.scss"; import { MarqueeView } from "./MarqueeView"; import React = require("react"); import v5 = require("uuid/v5"); +// import { BooleanField } from "../../../../fields/BooleanField"; +import { Timeline } from "../../nodes/Timeline"; +import { Docs } from "../../../documents/Documents"; export const panZoomSchema = createSchema({ panX: "number", @@ -325,7 +328,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { private childViews = () => [ <CollectionFreeFormBackgroundView key="backgroundView" {...this.props} {...this.getDocumentViewProps(this.props.Document)} />, ...this.views - ]; + ] render() { const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`; const easing = () => this.props.Document.panTransformType === "Ease"; @@ -347,6 +350,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/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 855c744e6..5cf3d8607 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -262,7 +262,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen this.props.Document.thumbnail = new ImageField(new URL(url)); } runInAction(() => this._renderAsSvg = true); - }) + }); })) .catch(function (error: any) { console.error('oops, something went wrong!', error); @@ -335,8 +335,9 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen } choosePath(url: URL) { - if (url.protocol === "data" || url.href.indexOf(window.location.origin) === -1) + if (url.protocol === "data" || url.href.indexOf(window.location.origin) === -1) { return url.href; + } let ext = path.extname(url.href); return url.href.replace(ext, this._curSuffix + ext); } @@ -350,8 +351,9 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen } @action onError = () => { let timeout = this._curSuffix === "_s" ? this._smallRetryCount : this._curSuffix === "_m" ? this._mediumRetryCount : this._largeRetryCount; - if (timeout < 10) + if (timeout < 10) { setTimeout(this.retryPath, Math.min(10000, timeout * 5)); + } } _curSuffix = "_m"; diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss new file mode 100644 index 000000000..c352c9519 --- /dev/null +++ b/src/client/views/nodes/Timeline.scss @@ -0,0 +1,42 @@ +.timeline-container { + height: 100px; + width: 500px; + background-color: rgb(160, 226, 243); + position: absolute; + left: 15%; + top: 1%; + font-size: 75%; + + .timeline { + 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/Timeline.tsx b/src/client/views/nodes/Timeline.tsx new file mode 100644 index 000000000..b46bf2e75 --- /dev/null +++ b/src/client/views/nodes/Timeline.tsx @@ -0,0 +1,483 @@ +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 { 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); + + +@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); + } + } + } + + + 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; + } + + @observable private _test: (string) = "undefined"; + + render() { + return ( + <div> + <div className="timeline-container"> + <div className="timeline"> + <div className="inner" ref={this._inner} onPointerDown={this.onInnerPointerDown} onPointerUp={this.onInnerPointerUp} key={this._test}> + {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> + </div> + ); + } +}
\ No newline at end of file |