From 576e4e3cd0fffdc8ebda38a552e388c0c1577080 Mon Sep 17 00:00:00 2001 From: Andrew Kim Date: Sat, 4 May 2019 21:13:45 -0400 Subject: reaction & bar update --- src/client/views/nodes/Timeline.scss | 3 +- src/client/views/nodes/Timeline.tsx | 102 ++++++++++++++++++++++------------- 2 files changed, 68 insertions(+), 37 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss index d16f3b4ee..cf63c987c 100644 --- a/src/client/views/nodes/Timeline.scss +++ b/src/client/views/nodes/Timeline.scss @@ -19,9 +19,10 @@ height: 44px; width: 484px; background-color: black; - opacity: 0.5; + //opacity: 0.5; position: absolute; margin: 8px; + z-index: 10; } button { diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index 6fea51624..f0c401480 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -12,6 +12,7 @@ import { CollectionFreeFormView } from "../collections/collectionFreeForm/Collec import { Doc, Self } from "../../../new_fields/Doc"; import { Document, listSpec } from "../../../new_fields/Schema"; import { FieldValue, Cast } from "../../../new_fields/Types"; +import { emptyStatement } from "babel-types"; @observer export class Timeline extends CollectionSubView(Document) { @@ -31,42 +32,7 @@ export class Timeline extends CollectionSubView(Document) { @action onRecord = (e: React.MouseEvent) => { this._isRecording = true; - } - - @action - onStop = (e: React.MouseEvent) => { - } - - @action - onInnerPointerDown = (e: React.PointerEvent) => { - if (this._isRecording) { - if (this._inner.current) { - let mouse = e.nativeEvent; - this._currentBar.style.transform = `translate(${mouse.offsetX}px)`; - this._currentBarX = mouse.offsetX; - console.log(mouse.offsetX); - } - } - } - createBar = (width: number, pos = 0, color = "green"): HTMLDivElement => { - let bar = document.createElement("div"); - bar.style.height = "100%"; - bar.style.width = `${width}px`; - bar.style.left = "mouse.offsetX"; - bar.style.backgroundColor = color; - bar.style.transform = `translate(${pos}px)`; - bar.style.position = "absolute"; - bar.style.zIndex = "2"; - return bar; - } - componentDidMount() { - if (this._inner.current && this._currentBar === null) { - this._currentBar = this.createBar(5); - this._inner.current.appendChild(this._currentBar); - } - let doc: Doc = this.props.Document; - let test = this.props.Document[this.props.fieldKey]; let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)); // let keyFrame = new KeyFrame(); //should not be done here... // this._keyFrames.push(keyFrame)"; @@ -76,14 +42,18 @@ export class Timeline extends CollectionSubView(Document) { let childrenList = (children[Self] as any).__fields; let keys = ["x", "y"]; const addReaction = (element: Doc) => { + element = (element as any).value(); return reaction(() => { + console.log("react"); return keys.map(key => FieldValue(element[key])); }, data => { if (this._inner.current) { let keyFrame: KeyFrame; if (!this._keyBars[this._currentBarX]) { + let bar = this.createBar(5, this._currentBarX, "orange"); + console.log("created!"); this._inner.current.appendChild(bar); this._keyBars[this._currentBarX] = bar; keyFrame = new KeyFrame(); @@ -108,6 +78,66 @@ export class Timeline extends CollectionSubView(Document) { }, true); } + @action + onStop = (e: React.MouseEvent) => { + } + + + @action + onInnerPointerUp = (e: React.PointerEvent) => { + if (this._inner.current) { + this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove); + } + } + + @action + onInnerPointerDown = (e: React.PointerEvent) => { + e.preventDefault(); + e.stopPropagation(); + if (this._isRecording) { + if (this._inner.current) { + let mouse = e.nativeEvent; + let offsetX = Math.round(mouse.offsetX); + this._currentBarX = offsetX; + this._currentBar.style.transform = `translate(${offsetX}px)`; + this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove); //reset + this._inner.current.addEventListener("pointermove", this.onInnerPointerMove); + } + } + } + + @action + onInnerPointerMove = (e: PointerEvent) => { + e.preventDefault(); + e.stopPropagation(); + let offsetX = Math.round(e.offsetX); + this._currentBarX = offsetX; + this._currentBar.style.transform = `translate(${offsetX}px)`; + console.log(offsetX); + console.log(this._currentBarX); + } + + createBar = (width: number, pos = 0, color = "green"): HTMLDivElement => { + let bar = document.createElement("div"); + bar.style.height = "100%"; + bar.style.width = `${width}px`; + bar.style.backgroundColor = color; + bar.style.transform = `translate(${pos}px)`; + bar.style.position = "absolute"; + bar.style.pointerEvents = "none"; + return bar; + } + componentDidMount() { + if (this._inner.current && this._currentBar === null) { + this._currentBar = this.createBar(5); + this._inner.current.appendChild(this._currentBar); + } + + let doc: Doc = this.props.Document; + let test = this.props.Document[this.props.fieldKey]; + + } + componentWillUnmount() { this._reactionDisposers.forEach(disp => disp()); this._reactionDisposers = []; @@ -118,7 +148,7 @@ export class Timeline extends CollectionSubView(Document) {
-
+
-- cgit v1.2.3-70-g09d2 From f10d71f9970552e76d810976dd8d1a3c3b3e49f7 Mon Sep 17 00:00:00 2001 From: Andrew Kim Date: Sun, 5 May 2019 12:42:42 -0400 Subject: input time and Selection keyframe functionalities --- src/client/views/nodes/Timeline.tsx | 49 +++++++++++++++++++++++++++---------- 1 file changed, 36 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index f0c401480..bc38a0ede 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -6,24 +6,28 @@ import "./Timeline.scss"; import { KeyFrame } from "./KeyFrame"; import { CollectionViewProps } from "../collections/CollectionBaseView"; import { CollectionSubView, SubCollectionViewProps } from "../collections/CollectionSubView"; -import { DocumentViewProps } from "./DocumentView"; +import { DocumentViewProps, DocumentView } from "./DocumentView"; import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; import { Doc, Self } from "../../../new_fields/Doc"; import { Document, listSpec } from "../../../new_fields/Schema"; import { FieldValue, Cast } from "../../../new_fields/Types"; import { emptyStatement } from "babel-types"; +import { DocumentManager } from "../../util/DocumentManager"; +import { SelectionManager } from "../../util/SelectionManager"; + @observer export class Timeline extends CollectionSubView(Document) { @observable private _inner = React.createRef(); + @observable private _timeInput = React.createRef(); + @observable private _isRecording: Boolean = false; @observable private _currentBar: any = null; @observable private _newBar: any = null; private _reactionDisposers: IReactionDisposer[] = []; private _keyFrames: KeyFrame[] = []; private _keyBars: HTMLDivElement[] = []; - private _actualKeyFrame: KeyFrame[] = []; private _currentBarX: number = 0; @observable private _onBar: Boolean = false; @@ -32,8 +36,8 @@ export class Timeline extends CollectionSubView(Document) { @action onRecord = (e: React.MouseEvent) => { this._isRecording = true; - let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)); + // let keyFrame = new KeyFrame(); //should not be done here... // this._keyFrames.push(keyFrame)"; if (!children) { @@ -41,19 +45,16 @@ export class Timeline extends CollectionSubView(Document) { } let childrenList = (children[Self] as any).__fields; let keys = ["x", "y"]; + const addReaction = (element: Doc) => { element = (element as any).value(); return reaction(() => { - console.log("react"); - return keys.map(key => FieldValue(element[key])); }, data => { if (this._inner.current) { let keyFrame: KeyFrame; if (!this._keyBars[this._currentBarX]) { - let bar = this.createBar(5, this._currentBarX, "orange"); - console.log("created!"); this._inner.current.appendChild(bar); this._keyBars[this._currentBarX] = bar; keyFrame = new KeyFrame(); @@ -67,19 +68,26 @@ export class Timeline extends CollectionSubView(Document) { } }); }; + + observe(childrenList as IObservableArray, change => { - if (change.type === "update") { + + 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); + }, true); + } - @action - onStop = (e: React.MouseEvent) => { + @action + displayKeyFrames = (dv: DocumentView) => { + console.log(dv); + dv.props.Document; + } @@ -127,6 +135,17 @@ export class Timeline extends CollectionSubView(Document) { bar.style.pointerEvents = "none"; return bar; } + + onTimeEntered = (e:React.KeyboardEvent) => { + if (this._timeInput.current){ + if (e.keyCode === 13){ + let input = parseInt(this._timeInput.current.value) || 0; + this._currentBar.style.transform = `translate(${input}px)`; + this._currentBarX = input; + } + } + } + componentDidMount() { if (this._inner.current && this._currentBar === null) { this._currentBar = this.createBar(5); @@ -149,11 +168,15 @@ export class Timeline extends CollectionSubView(Document) {
+ { + SelectionManager.SelectedDocuments().map((dv) => { + this.displayKeyFrames(dv); + }) + }
- {/* */} - +
); -- cgit v1.2.3-70-g09d2 From b1a604957267e2889b0334927b87a0e32349a892 Mon Sep 17 00:00:00 2001 From: Andrew Kim Date: Tue, 7 May 2019 19:09:49 -0400 Subject: keyframe stuff --- src/client/views/nodes/KeyFrame.tsx | 7 +++--- src/client/views/nodes/Timeline.tsx | 47 ++++++++++++++++++++++++++----------- 2 files changed, 36 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/KeyFrame.tsx b/src/client/views/nodes/KeyFrame.tsx index 5c1157c9d..fb072f4d6 100644 --- a/src/client/views/nodes/KeyFrame.tsx +++ b/src/client/views/nodes/KeyFrame.tsx @@ -4,14 +4,13 @@ export class KeyFrame { private _document: Doc; constructor() { this._document = new Doc(); - + } - get document() { - console.log(this._document); + get doc():Doc { return this._document; - } + } \ No newline at end of file diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index bc38a0ede..aba1a6065 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -15,6 +15,7 @@ import { FieldValue, Cast } from "../../../new_fields/Types"; import { emptyStatement } from "babel-types"; import { DocumentManager } from "../../util/DocumentManager"; import { SelectionManager } from "../../util/SelectionManager"; +import { List } from "../../../new_fields/List"; @observer @@ -37,9 +38,6 @@ export class Timeline extends CollectionSubView(Document) { onRecord = (e: React.MouseEvent) => { this._isRecording = true; let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)); - - // let keyFrame = new KeyFrame(); //should not be done here... - // this._keyFrames.push(keyFrame)"; if (!children) { return; } @@ -52,18 +50,39 @@ export class Timeline extends CollectionSubView(Document) { return keys.map(key => FieldValue(element[key])); }, data => { if (this._inner.current) { - let keyFrame: KeyFrame; - if (!this._keyBars[this._currentBarX]) { - let bar = this.createBar(5, this._currentBarX, "orange"); - this._inner.current.appendChild(bar); - this._keyBars[this._currentBarX] = bar; - keyFrame = new KeyFrame(); - this._keyFrames[this._currentBarX] = keyFrame; - } else { - keyFrame = this._keyFrames[this._currentBarX]; + let keyFrame: KeyFrame; //keyframe reference + let exists:boolean = false; + let time:number = this._currentBarX; //time that indicates what frame you are in. Whole numbers. + let frames:List; + this._keyFrames.forEach(kf => { //checks if there is a keyframe that is tracking htis document. + if (kf.doc.document === element) { + keyFrame = kf; + frames = Cast(keyFrame.doc.frames, listSpec(Doc))!; + exists = true; + } + }); + + if (!exists){ + keyFrame = new KeyFrame(); + let bar:HTMLDivElement = this.createBar(5, time, "yellow"); + this._inner.current.appendChild(bar); + keyFrame.doc.bar = bar; + keyFrame.doc.frames = new List(); + + this._keyFrames.push(keyFrame); } + keys.forEach((key, index) => { - keyFrame.document[key] = data[index]; + console.log(data[index]); + if (keyFrame.doc.frames !== undefined){ + frames.forEach(frame => { + if (frame.time === this._currentBarX){ + frame.key = data[index]; + } + }); + } + + //keyFrame.document[key] = data[index]; }); } }); @@ -125,7 +144,7 @@ export class Timeline extends CollectionSubView(Document) { console.log(this._currentBarX); } - createBar = (width: number, pos = 0, color = "green"): HTMLDivElement => { + createBar = (width: number, pos:number = 0, color:string = "green"): HTMLDivElement => { let bar = document.createElement("div"); bar.style.height = "100%"; bar.style.width = `${width}px`; -- cgit v1.2.3-70-g09d2