aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/animationtimeline/Keyframe.tsx103
-rw-r--r--src/client/views/animationtimeline/Timeline.tsx2
-rw-r--r--src/client/views/animationtimeline/Track.tsx50
3 files changed, 28 insertions, 127 deletions
diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 5e4676f56..2f2639c76 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -9,7 +9,6 @@ import { Cast, NumCast } from "../../../new_fields/Types";
import { List } from "../../../new_fields/List";
import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../new_fields/Schema";
import { Transform } from "../../util/Transform";
-import { InkField, StrokeData } from "../../../new_fields/InkField";
import { TimelineMenu } from "./TimelineMenu";
import { Docs } from "../../documents/Documents";
import { CollectionDockingView } from "../collections/CollectionDockingView";
@@ -172,7 +171,6 @@ interface IProps {
check: string;
changeCurrentBarX: (x: number) => void;
transform: Transform;
- checkCallBack: (visible: boolean) => void;
}
@@ -214,17 +212,7 @@ export class Keyframe extends React.Component<IProps> {
@computed private get pixelDuration() { return KeyframeFunc.convertPixelTime(this.regiondata.duration, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); }
@computed private get pixelFadeIn() { return KeyframeFunc.convertPixelTime(this.regiondata.fadeIn, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); }
@computed private get pixelFadeOut() { return KeyframeFunc.convertPixelTime(this.regiondata.fadeOut, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); }
- @computed
- private get inks() {
- if (this.props.collection.data_ext) {
- let data_ext = Cast(this.props.collection.data_ext, Doc) as Doc;
- let ink = Cast(data_ext.ink, InkField) as InkField;
- if (ink) {
- return ink.inkData;
- }
- }
- }
-
+
componentWillMount() {
runInAction(async () => {
if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>();
@@ -418,12 +406,6 @@ export class Keyframe extends React.Component<IProps> {
*/
@action
makeRegionMenu = (kf: Doc, e: MouseEvent) => {
- TimelineMenu.Instance.addItem("button", "Add Ease", () => {
- this.onContainerDown(kf, "interpolate");
- }),
- TimelineMenu.Instance.addItem("button", "Add Path", () => {
- this.onContainerDown(kf, "path");
- }),
TimelineMenu.Instance.addItem("button", "Remove Region", () => {
runInAction(() => {
this.regions.splice(this.regions.indexOf(this.props.RegionData), 1);
@@ -525,88 +507,7 @@ export class Keyframe extends React.Component<IProps> {
div.style.opacity = "0";
Doc.UnBrushDoc(this.props.node);
}
-
-
- private _reac: (undefined | IReactionDisposer) = undefined;
- private _plotList: ([string, StrokeData] | undefined) = undefined;
- private _interpolationKeyframe: (Doc | undefined) = undefined;
- private _type: string = "";
-
-
- /**
- * Need to fix this. skip
- */
- @action
- onContainerDown = (kf: Doc, type: string) => {
- let listenerCreated = false;
- this.props.checkCallBack(true);
- this._type = type;
- this.props.collection.backgroundColor = "rgb(0,0,0)";
- this._reac = reaction(() => {
- return this.inks;
- }, data => {
- if (!listenerCreated) {
- this._plotList = Array.from(data!)[data!.size - 1]!;
- this._interpolationKeyframe = kf;
- listenerCreated = true;
- const reac = reaction(() => {
- return this.props.check;
- }, () => {
- if (this.props.check === "yes") this.onReactionListen();
- reac();
- this.props.checkCallBack(false);
- });
- }
- });
- }
-
- /**
- * for custom draw interpolation. Need to be refactored
- */
- @action
- onReactionListen = () => {
- if (this._reac && this._plotList && this._interpolationKeyframe) {
- this.props.collection.backgroundColor = "#FFF";
- this._reac();
- let xPlots = new List<number>();
- let yPlots = new List<number>();
- let maxY = 0;
- let minY = Infinity;
- let pathData = this._plotList![1].pathData;
- for (let i = 0; i < pathData.length - 1;) {
- let val = pathData[i];
- if (val.y > maxY) {
- maxY = val.y;
- }
- if (val.y < minY) {
- minY = val.y;
- }
- xPlots.push(val.x);
- yPlots.push(val.y);
- let increment = Math.floor(pathData.length / this._gain);
- if (pathData.length > this._gain) {
- if (i + increment < pathData.length) {
- i = i + increment;
- } else {
- i = pathData.length - 1;
- }
- } else {
- i++;
- }
- }
- let index = this.keyframes.indexOf(this._interpolationKeyframe!);
- if (this._type === "interpolate") {
- (Cast(this.regiondata.functions![index], Doc) as Doc).interpolationX = xPlots;
- (Cast(this.regiondata.functions![index], Doc) as Doc).interpolationY = yPlots;
- } else if (this._type === "path") {
- (Cast(this.regiondata.functions![index], Doc) as Doc).pathX = xPlots;
- (Cast(this.regiondata.functions![index], Doc) as Doc).pathY = yPlots;
- }
- this._reac = undefined;
- this._interpolationKeyframe = undefined;
- this._plotList = undefined;
- }
- }
+
///////////////////////UI STUFF /////////////////////////
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index df25f709a..fedffe8c1 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -508,7 +508,7 @@ export class Timeline extends React.Component<FieldViewProps> {
<div key="timeline_scrubberhead" className="scrubberhead" onPointerDown={this.onScrubberDown} ></div>
</div>
<div key="timeline_trackbox" className="trackbox" ref={this._trackbox} onPointerDown={this.onPanDown} style={{ width: `${this._totalLength}px` }}>
- {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} transform={this.props.ScreenToLocalTransform()} time={this._time} tickSpacing={this._tickSpacing} tickIncrement={this._tickIncrement} collection={this.props.Document} timelineVisible={this._timelineVisible} check={this._check} checkCallBack={this.checkCallBack} />)}
+ {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} transform={this.props.ScreenToLocalTransform()} time={this._time} tickSpacing={this._tickSpacing} tickIncrement={this._tickIncrement} collection={this.props.Document} timelineVisible={this._timelineVisible} check={this._check} />)}
</div>
</div>
<div key="timeline_title" className="title-container" ref={this._titleContainer}>
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index c27a24ecf..fc8d0852f 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -1,6 +1,6 @@
import * as React from "react";
import { observer } from "mobx-react";
-import { observable, reaction, action, IReactionDisposer, computed, runInAction, autorun , toJS} from "mobx";
+import { observable, reaction, action, IReactionDisposer, computed, runInAction, autorun , toJS, isObservableArray, IObservableArray} from "mobx";
import "./Track.scss";
import { Doc, DocListCastAsync, DocListCast, Field } from "../../../new_fields/Doc";
import { listSpec } from "../../../new_fields/Schema";
@@ -22,8 +22,6 @@ interface IProps {
timelineVisible: boolean;
check: string;
changeCurrentBarX: (x: number) => void;
- checkCallBack: (visible: boolean) => void;
-
}
@observer
@@ -58,18 +56,6 @@ export class Track extends React.Component<IProps> {
"zIndex"
];
- private whiteList = [
- "data",
- "height",
- "opacity",
- "width",
- "x",
- "y"
- ]
-
- @observable private whitelist = [
-
- ];
private readonly MAX_TITLE_HEIGHT = 75;
private _trackHeight = 0;
@@ -143,24 +129,38 @@ export class Track extends React.Component<IProps> {
this._isOnKeyframe = false;
}
+
+ private whitelist = [
+ "x",
+ "y",
+ "width",
+ "height",
+ "data"
+ ]
/**
* autocreates keyframe
*/
@action
- autoCreateKeyframe = async () => {
- return reaction(() => [this.props.node.data, this.props.node.height, this.props.node.width, this.props.node.x, this.props.node.y, this.props.node.opacity], async changed => {
- console.log("RAN!");
+ autoCreateKeyframe = async () => {
+ return reaction(async () => {
+ return this.whitelist.map(key => this.props.node[key]);
+ }, (changed, reaction) => {
//convert scrubber pos(pixel) to time
let time = KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
//check for region
- let region:(Doc | undefined) = await this.findRegion(time);
- if (region !== undefined){ //if region at scrub time exist
- if (DocListCast(region!.keyframes).find(kf => {return kf.time === time}) === undefined ){
- console.log("change has occured");
- }
- }
+ //let region:(Doc | undefined) = await this.findRegion(time);
+ console.log(this.props.node.x);
+ console.log(this.props.node.y);
+ console.log(changed);
+ // if (region !== undefined){ //if region at scrub time exist
+ // if (DocListCast(region!.keyframes).find(kf => {return kf.time === time}) === undefined ){
+ // console.log("change has occured");
+ // }
+ // }
+ //reaction.dispose();
});
+
}
/**
@@ -185,7 +185,7 @@ export class Track extends React.Component<IProps> {
let regiondata: (Doc | undefined) = await this.findRegion(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
if (regiondata) {
this.props.node.hidden = false;
- await this.timeChange(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
+ //await this.timeChange(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
} else {
this.props.node.hidden = true;
this.props.node.opacity = 0;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 21:37:40 +0000