From c8cb602f06f1b6c325ce467eea8dfa405b673810 Mon Sep 17 00:00:00 2001 From: andrewdkim Date: Fri, 9 Aug 2019 17:10:49 -0400 Subject: some changes --- src/client/views/animationtimeline/Keyframe.tsx | 20 +---- src/client/views/animationtimeline/Timeline.tsx | 114 ------------------------ src/client/views/animationtimeline/Track.tsx | 9 +- src/client/views/graph/Graph.tsx | 5 +- 4 files changed, 9 insertions(+), 139 deletions(-) (limited to 'src') diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx index 3c0d17796..dbc26e3d4 100644 --- a/src/client/views/animationtimeline/Keyframe.tsx +++ b/src/client/views/animationtimeline/Keyframe.tsx @@ -11,7 +11,6 @@ import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../new import { FlyoutProps } from "./Timeline"; import { Transform } from "../../util/Transform"; import { InkField, StrokeData } from "../../../new_fields/InkField"; -import { number } from "prop-types"; import { TimelineMenu } from "./TimelineMenu"; import { Docs } from "../../documents/Documents"; import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; @@ -509,22 +508,6 @@ export class Keyframe extends React.Component { document.removeEventListener("pointerup", this.onReactionListen); } } - - - - /** - * - * - * TEMPORARY - * let items = [ - TimelineMenu.Instance.addItem("button", "Show Data", () => {console.log(toJS(this.props.node));}), - TimelineMenu.Instance.addItem("button", "Delete", () => {}), - TimelineMenu.Instance.addItem("input", "Move", (val) => {console.log(val);}) - ]; - TimelineMenu.Instance.addMenu("Keyframe", items); - TimelineMenu.Instance.openMenu(e.clientX, e.clientY); - * - */ render() { return (
@@ -537,13 +520,14 @@ export class Keyframe extends React.Component { return this.createKeyframeJSX(kf as Doc, (kf! as Doc).type as KeyframeFunc.KeyframeType); })} {this.keyframes.map( kf => { - if(this.keyframes.indexOf(kf) !== this.keyframes.length - 1) { + if(this.keyframes.indexOf(kf ) !== this.keyframes.length - 1) { let left = this.keyframes[this.keyframes.indexOf(kf) + 1]; let bodyRef = React.createRef(); return (
{ this.onContainerOver(e, bodyRef); }} onPointerOut={(e) => { this.onContainerOut(e, bodyRef); }} + onPointerDown={(e) => { this.props.changeCurrentBarX(NumCast(kf.time) + (e.clientX - bodyRef.current!.getBoundingClientRect().left) * this.props.transform.Scale);}} onContextMenu={(e) => { let items = [ TimelineMenu.Instance.addItem("button", "Add Ease", () => {this.onContainerDown(kf, "interpolate");}), diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index 7a6d9fa52..052e6e925 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -350,7 +350,6 @@ export class Timeline extends CollectionSubView(Document) {
-
@@ -383,12 +382,6 @@ export class Timeline extends CollectionSubView(Document) { } -interface TimelineFlyoutProps { - flyoutInfo: FlyoutProps; - tickSpacing: number; - -} - interface TimelineOverviewProps { currentBarX: number; } @@ -412,116 +405,9 @@ class TimelineOverview extends React.Component{ } } -class TimelineFlyout extends React.Component{ - - @observable private _timeInput = React.createRef(); - @observable private _durationInput = React.createRef(); - @observable private _fadeInInput = React.createRef(); - @observable private _fadeOutInput = React.createRef(); - @observable private _data: FlyoutProps = { x: 0, y: 0, display: "none", regiondata: new Doc(), regions: new List() }; - - private block = false; - - componentDidMount() { - - document.addEventListener("pointerdown", this.closeFlyout); - } - - - componentWillUnmount() { - document.removeEventListener("pointerdown", this.closeFlyout); - } - - - @action - changeTime = (e: React.KeyboardEvent) => { - let time = this._timeInput.current!; - if (e.keyCode === 13) { - if (!Number.isNaN(Number(time.value))) { - this.props.flyoutInfo.regiondata!.position = Number(time.value) / 1000 * this.props.tickSpacing; - time.placeholder = time.value + "ms"; - time.value = ""; - } - } - } - @action - onFlyoutDown = (e: React.PointerEvent) => { - this._data.display = "block"; - this.block = true; - } - - @action - closeFlyout = (e: PointerEvent) => { - if (this.block) { - this.block = false; - return; - } - this._data.display = "none"; - } - - @action - changeDuration = (e: React.KeyboardEvent) => { - let duration = this._durationInput.current!; - if (e.keyCode === 13) { - if (!Number.isNaN(Number(duration.value))) { - this.props.flyoutInfo.regiondata!.duration = Number(duration.value) / 1000 * this.props.tickSpacing; - duration.placeholder = duration.value + "ms"; - duration.value = ""; - } - } - } - - @action - changeFadeIn = (e: React.KeyboardEvent) => { - let fadeIn = this._fadeInInput.current!; - if (e.keyCode === 13) { - if (!Number.isNaN(Number(fadeIn.value))) { - this.props.flyoutInfo.regiondata!.fadeIn = Number(fadeIn.value); - fadeIn.placeholder = fadeIn.value + "ms"; - fadeIn.value = ""; - } - } - } - - @action - changeFadeOut = (e: React.KeyboardEvent) => { - let fadeOut = this._fadeOutInput.current!; - if (e.keyCode === 13) { - if (!Number.isNaN(Number(fadeOut.value))) { - this.props.flyoutInfo.regiondata!.fadeOut = Number(fadeOut.value); - fadeOut.placeholder = fadeOut.value + "ms"; - fadeOut.value = ""; - } - } - } - - render() { - return ( -
-
- -
-

Time:

-

Duration:

-

Fade-in

-

Fade-out

-
-
- - - - -
- -
-
- ); - } -} class TimelineZoom extends React.Component { componentDidMount() { - } render() { return ( diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx index 363ab4074..64e94f0f1 100644 --- a/src/client/views/animationtimeline/Track.tsx +++ b/src/client/views/animationtimeline/Track.tsx @@ -61,8 +61,7 @@ export class Track extends React.Component { let keyframes:List = (Cast(regiondata.keyframes, listSpec(Doc)) as List); let kfIndex:number = keyframes.indexOf(ref); let kf = keyframes[kfIndex] as Doc; - if (kf.type === KeyframeFunc.KeyframeType.default) { // only save for fades - console.log("full keychange triggered"); + if (kf.type === KeyframeFunc.KeyframeType.default) { // only save for non-fades kf.key = Doc.MakeCopy(this.props.node, true); let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, this.props.currentBarX, kf); // lef keyframe, if it exists let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, this.props.currentBarX, kf); //right keyframe, if it exists @@ -104,7 +103,6 @@ export class Track extends React.Component { @action timeChange = async (time: number) => { if (this._isOnKeyframe && this._onKeyframe && this._onRegionData) { - console.log("saving"); await this.saveKeyframe(this._onKeyframe, this._onRegionData); } let regiondata = await this.findRegion(Math.round(time)); //finds a region that the scrubber is on @@ -169,9 +167,9 @@ export class Track extends React.Component { return currentkf; } + @action interpolate = async (left: Doc, right: Doc, regiondata:Doc) => { - console.log("interpolating"); let leftNode = left.key as Doc; let rightNode = right.key as Doc; const dif_time = NumCast(right.time) - NumCast(left.time); @@ -226,8 +224,7 @@ export class Track extends React.Component { if (nodeData !== currentNodeData) { this.props.node[key] = new RichTextField(nodeData); } - } - + } } else if (key === "creationDate") { } else { diff --git a/src/client/views/graph/Graph.tsx b/src/client/views/graph/Graph.tsx index 326f33358..d925cc32c 100644 --- a/src/client/views/graph/Graph.tsx +++ b/src/client/views/graph/Graph.tsx @@ -20,8 +20,11 @@ export class Graph extends CollectionSubView(Document) { render() { + let collection = ; + return ( - +
+
); } -- cgit v1.2.3-70-g09d2