diff options
| -rw-r--r-- | src/client/views/Main.tsx | 22 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 50 | ||||
| -rw-r--r-- | src/client/views/nodes/KeyFrame.tsx | 15 | ||||
| -rw-r--r-- | src/client/views/nodes/Timeline.scss | 40 | ||||
| -rw-r--r-- | src/client/views/nodes/Timeline.tsx | 92 |
5 files changed, 219 insertions, 0 deletions
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 09ef30f6b..175ef3c6d 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -274,6 +274,8 @@ export class Main extends React.Component { ]; } +<<<<<<< HEAD +======= @computed get workspaceMenu() { let areWorkspacesShown = () => this._workspacesShown; @@ -284,6 +286,7 @@ export class Main extends React.Component { new={this.createNewWorkspace} allWorkspaces={workspaces.Data} isShown={areWorkspacesShown} toggle={toggleWorkspaces} />; } +>>>>>>> e47656cdc18aa1fd801a3853fa0f819140a68646 render() { return ( @@ -330,9 +333,28 @@ export class Main extends React.Component { } } async initializeNorthstar(): Promise<void> { +<<<<<<< HEAD + let envPath = "/assets/env.json"; + const response = await fetch(envPath, { + redirect: "follow", + method: "GET", + credentials: "include" + }); + const env = await response.json(); + Settings.Instance.Update(env); + let cat = Gateway.Instance.ClearCatalog(); + cat.then(async () => { + this.AddToNorthstarCatalog(await Gateway.Instance.GetCatalog()); + if (!CurrentUserUtils.GetNorthstarSchema("Book1")){ + this.AddToNorthstarCatalog(await Gateway.Instance.GetSchema("http://www.cs.brown.edu/~bcz/Book1.csv")); + } + }); + +======= const getEnvironment = await fetch("/assets/env.json", { redirect: "follow", method: "GET", credentials: "include" }); NorthstarSettings.Instance.UpdateEnvironment(await getEnvironment.json()); Gateway.Instance.ClearCatalog().then(async () => this.SetNorthstarCatalog(await Gateway.Instance.GetCatalog())); +>>>>>>> e47656cdc18aa1fd801a3853fa0f819140a68646 } } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 945c01059..ed33a6eb9 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -21,7 +21,18 @@ import "./CollectionFreeFormView.scss"; import { MarqueeView } from "./MarqueeView"; import React = require("react"); import v5 = require("uuid/v5"); +<<<<<<< HEAD +import { CollectionFreeFormRemoteCursors } from "./CollectionFreeFormRemoteCursors"; +import { PreviewCursor } from "./PreviewCursor"; +import { Timeline } from "../../nodes/Timeline"; +import { DocumentManager } from "../../../util/DocumentManager"; +import { SelectionManager } from "../../../util/SelectionManager"; +import { NumberField } from "../../../../fields/NumberField"; +import { Main } from "../../Main"; +import Measure from "react-measure"; +======= import { BooleanField } from "../../../../fields/BooleanField"; +>>>>>>> e47656cdc18aa1fd801a3853fa0f819140a68646 @observer export class CollectionFreeFormView extends CollectionSubView { @@ -269,10 +280,14 @@ export class CollectionFreeFormView extends CollectionSubView { } return prev; }, [] as JSX.Element[]); +<<<<<<< HEAD + +======= setTimeout(() => this._selectOnLoaded = "", 600);// bcz: surely there must be a better way .... return docviews; +>>>>>>> e47656cdc18aa1fd801a3853fa0f819140a68646 } @action @@ -339,6 +354,40 @@ interface CollectionFreeFormViewPannableContentsProps { zoomScaling: () => number; } +<<<<<<< HEAD + return ( + <Measure onResize={(r: any) => runInAction(() => { this._pwidth = r.entry.width; this._pheight = r.entry.height; })}> + {({ measureRef }) => ( + <div className={`collectionfreeformview-measure`} ref={measureRef}> + <div className={`collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`} + onPointerDown={this.onPointerDown} onPointerMove={(e) => super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY))} + onDrop={this.onDrop.bind(this)} onDragOver={this.onDragOver} onWheel={this.onPointerWheel} + style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} ref={this.createDropTarget}> + <MarqueeView container={this} activeDocuments={this.getActiveDocuments} selectDocuments={this.selectDocuments} + addDocument={this.addDocument} removeDocument={this.props.removeDocument} + getContainerTransform={this.getContainerTransform} getTransform={this.getTransform}> + <PreviewCursor container={this} addLiveTextDocument={this.addLiveTextBox} + getContainerTransform={this.getContainerTransform} getTransform={this.getTransform} > + <div className="collectionfreeformview" ref={this._canvasRef} + style={{ transform: `translate(${dx}px, ${dy}px) scale(${this.zoomScaling}, ${this.zoomScaling}) translate(${panx}px, ${pany}px)` }}> + {this.backgroundView} + <CollectionFreeFormLinksView {...this.props}> + <InkingCanvas getScreenTransform={this.getTransform} Document={this.props.Document} > + {this.childViews} + </InkingCanvas> + </CollectionFreeFormLinksView> + <CollectionFreeFormRemoteCursors {...this.props} /> + </div> + {this.overlayView} + </PreviewCursor> + + <Timeline {...this.getDocumentViewProps(this.props.Document)} /> + </MarqueeView> + </div> + </div>)} + </Measure> + ); +======= @observer class CollectionFreeFormViewPannableContents extends React.Component<CollectionFreeFormViewPannableContentsProps>{ render() { @@ -350,5 +399,6 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF return <div className="collectionfreeformview" style={{ transform: `translate(${cenx}px, ${ceny}px) scale(${zoom}, ${zoom}) translate(${panx}px, ${pany}px)` }}> {this.props.children} </div>; +>>>>>>> e47656cdc18aa1fd801a3853fa0f819140a68646 } }
\ 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..223e8f962 --- /dev/null +++ b/src/client/views/nodes/KeyFrame.tsx @@ -0,0 +1,15 @@ +export class KeyFrame{ + private _document:any; + constructor(){ + this._document = new Document(); + + + } + + get document(){ + console.log(this._document); + return this._document; + + } + +}
\ 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..d2055c946 --- /dev/null +++ b/src/client/views/nodes/Timeline.scss @@ -0,0 +1,40 @@ +.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; + position: absolute; + margin: 8px; + } + + button { + height: 30px; + width: 100px; + 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..42e434413 --- /dev/null +++ b/src/client/views/nodes/Timeline.tsx @@ -0,0 +1,92 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { observer } from "mobx-react"; +import { observable, reaction, action } from "mobx"; +import "./Timeline.scss"; +import { KeyStore } from "../../../fields/KeyStore"; +import { Document } from "../../../fields/Document"; +import { KeyFrame } from "./KeyFrame"; +import { CollectionViewProps } from "../collections/CollectionBaseView"; +import { CollectionSubView } from "../collections/CollectionSubView"; +import { DocumentViewProps } from "./DocumentView"; + + +@observer +export class Timeline extends React.Component<DocumentViewProps> { + @observable private _inner = React.createRef<HTMLDivElement>(); + @observable private _isRecording: Boolean = false; + @observable private _currentBar: any = null; + @observable private _newBar: any = null; + + @action + onRecord = (e: React.MouseEvent) => { + this._isRecording = true; + } + + @action + onStop = (e: React.MouseEvent) => { + this._isRecording = false; + if (this._inner.current) { + + } + } + + @action + onInnerPointerDown = (e: React.PointerEvent) => { + if (this._isRecording) { + if (this._inner.current) { + let mouse = e.nativeEvent; + this._currentBar.style.transform = `translate(${mouse.offsetX}px)`; + } + } + } + + + private _keyFrames: KeyFrame[] = []; + + createBar = (width: number) => { + if (this._inner.current) { + this._currentBar = document.createElement("div"); + this._currentBar.style.height = "100%"; + this._currentBar.style.width = `${width}px`; + this._currentBar.style.left = "mouse.offsetX"; + this._currentBar.style.backgroundColor = "green"; + this._currentBar.style.transform = `translate(${0}px)`; + this._inner.current.appendChild(this._currentBar); + } + + } + componentDidMount() { + this.createBar(5); + let doc: Document = this.props.Document; + console.log(doc.Get(KeyStore.BackgroundColor)); + let keyFrame = new KeyFrame(); + this._keyFrames.push(keyFrame); + let keys = [KeyStore.X, KeyStore.Y]; + reaction(() => { + return keys.map(key => doc.GetNumber(key, 0)); + }, data => { + keys.forEach((key, index) => { + keyFrame.document().SetNumber(key, data[index]); + }); + }); + + console.log(keyFrame.document + "Document"); + } + + render() { + return ( + <div> + <div className="timeline-container"> + <div className="timeline"> + <div className="inner" ref={this._inner} onPointerDown={this.onInnerPointerDown}> + </div> + </div> + <button onClick={this.onRecord}>Record</button> + <button onClick={this.onStop}>Stop</button> + <input placeholder="Time"></input> + </div> + </div> + ); + } +}
\ No newline at end of file |