|
@@ -61,7 +61,6 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
|
|
private _heightScale: number = 100;
|
|
private _heightScale: number = 100;
|
|
// Canvas Length *Review this functionality
|
|
// Canvas Length *Review this functionality
|
|
readonly _canvasLength: number = 20;
|
|
readonly _canvasLength: number = 20;
|
|
-
|
|
|
|
private _newAnimations: Animation[] = [];
|
|
private _newAnimations: Animation[] = [];
|
|
private _svgKeyframes: IKeyframeSvgPoint[] = [];
|
|
private _svgKeyframes: IKeyframeSvgPoint[] = [];
|
|
private _frames: Vector2[] = [];
|
|
private _frames: Vector2[] = [];
|
|
@@ -69,17 +68,14 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
|
|
private _graphCanvas: React.RefObject<HTMLDivElement>;
|
|
private _graphCanvas: React.RefObject<HTMLDivElement>;
|
|
private _selectedCurve: React.RefObject<SVGPathElement>;
|
|
private _selectedCurve: React.RefObject<SVGPathElement>;
|
|
private _svgCanvas: React.RefObject<SvgDraggableArea>;
|
|
private _svgCanvas: React.RefObject<SvgDraggableArea>;
|
|
-
|
|
|
|
constructor(props: IAnimationCurveEditorComponentProps) {
|
|
constructor(props: IAnimationCurveEditorComponentProps) {
|
|
super(props);
|
|
super(props);
|
|
// Review is we really need this refs
|
|
// Review is we really need this refs
|
|
this._graphCanvas = React.createRef();
|
|
this._graphCanvas = React.createRef();
|
|
this._selectedCurve = React.createRef();
|
|
this._selectedCurve = React.createRef();
|
|
this._svgCanvas = React.createRef();
|
|
this._svgCanvas = React.createRef();
|
|
-
|
|
|
|
// will update this until we have a top scroll/zoom feature
|
|
// will update this until we have a top scroll/zoom feature
|
|
let valueInd = [2, 1.8, 1.6, 1.4, 1.2, 1, 0.8, 0.6, 0.4, 0.2, 0];
|
|
let valueInd = [2, 1.8, 1.6, 1.4, 1.2, 1, 0.8, 0.6, 0.4, 0.2, 0];
|
|
-
|
|
|
|
this.state = {
|
|
this.state = {
|
|
animations: this._newAnimations,
|
|
animations: this._newAnimations,
|
|
selected: this.props.animations[0],
|
|
selected: this.props.animations[0],
|
|
@@ -106,7 +102,6 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
|
|
}
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
componentDidMount() {
|
|
- // Improve this behavior
|
|
|
|
setTimeout(() => this.resetPlayheadOffset(), 500);
|
|
setTimeout(() => this.resetPlayheadOffset(), 500);
|
|
}
|
|
}
|
|
|
|
|
|
@@ -123,7 +118,6 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
|
|
* This section handles zoom and scroll
|
|
* This section handles zoom and scroll
|
|
* of the graph area.
|
|
* of the graph area.
|
|
*/
|
|
*/
|
|
-
|
|
|
|
zoom(e: React.WheelEvent<HTMLDivElement>) {
|
|
zoom(e: React.WheelEvent<HTMLDivElement>) {
|
|
e.nativeEvent.stopImmediatePropagation();
|
|
e.nativeEvent.stopImmediatePropagation();
|
|
console.log(e.deltaY);
|
|
console.log(e.deltaY);
|
|
@@ -180,7 +174,6 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
|
|
* Add New Animation
|
|
* Add New Animation
|
|
* This section handles events from AnimationCreation.
|
|
* This section handles events from AnimationCreation.
|
|
*/
|
|
*/
|
|
-
|
|
|
|
handleNameChange(event: React.ChangeEvent<HTMLInputElement>) {
|
|
handleNameChange(event: React.ChangeEvent<HTMLInputElement>) {
|
|
event.preventDefault();
|
|
event.preventDefault();
|
|
this.setState({ animationName: event.target.value.trim() });
|
|
this.setState({ animationName: event.target.value.trim() });
|
|
@@ -355,7 +348,6 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
|
|
* Keyframe Manipulation
|
|
* Keyframe Manipulation
|
|
* This section handles events from SvgDraggableArea.
|
|
* This section handles events from SvgDraggableArea.
|
|
*/
|
|
*/
|
|
-
|
|
|
|
selectKeyframe(id: string) {
|
|
selectKeyframe(id: string) {
|
|
let updatedKeyframes = this.state.svgKeyframes?.map(kf => {
|
|
let updatedKeyframes = this.state.svgKeyframes?.map(kf => {
|
|
if (kf.id === id) {
|
|
if (kf.id === id) {
|
|
@@ -451,7 +443,6 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
|
|
* Actions
|
|
* Actions
|
|
* This section handles events from GraphActionsBar.
|
|
* This section handles events from GraphActionsBar.
|
|
*/
|
|
*/
|
|
-
|
|
|
|
handleFrameChange(event: React.ChangeEvent<HTMLInputElement>) {
|
|
handleFrameChange(event: React.ChangeEvent<HTMLInputElement>) {
|
|
event.preventDefault();
|
|
event.preventDefault();
|
|
this.changeCurrentFrame(parseInt(event.target.value))
|
|
this.changeCurrentFrame(parseInt(event.target.value))
|
|
@@ -602,7 +593,6 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
|
|
* Curve Rendering Functions
|
|
* Curve Rendering Functions
|
|
* This section handles how to render curves.
|
|
* This section handles how to render curves.
|
|
*/
|
|
*/
|
|
-
|
|
|
|
getAnimationProperties(animation: Animation) {
|
|
getAnimationProperties(animation: Animation) {
|
|
let easingType, easingMode;
|
|
let easingType, easingMode;
|
|
let easingFunction: EasingFunction = animation.getEasingFunction() as EasingFunction;
|
|
let easingFunction: EasingFunction = animation.getEasingFunction() as EasingFunction;
|
|
@@ -638,11 +628,7 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
|
|
|
|
|
|
getPathData(animation: Animation) {
|
|
getPathData(animation: Animation) {
|
|
|
|
|
|
- // Check if Unweighted mode is active (Drag in circle max 90deg - Reflect in opposite point) (selected and opposite tangents move)
|
|
|
|
- // Check if Unweighted mode is active and broken mode is active. (Only one tangent moves)
|
|
|
|
- // Check if Bezier Mode is active and reflection in opposite point // This assumes somekind of weights... maybe for vNext
|
|
|
|
- // Check if Bezier Mode is active and broken active (Full bezier) // This assumes somekind of weights... maybe for vNext
|
|
|
|
-
|
|
|
|
|
|
+ // Check if Tangent mode is active and broken mode is active. (Only one tangent moves)
|
|
let keyframes = animation.getKeys();
|
|
let keyframes = animation.getKeys();
|
|
|
|
|
|
if (keyframes === undefined) {
|
|
if (keyframes === undefined) {
|
|
@@ -701,10 +687,7 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
|
|
let targetPropertyPath = animation.targetPropertyPath;
|
|
let targetPropertyPath = animation.targetPropertyPath;
|
|
let framesPerSecond = animation.framePerSecond;
|
|
let framesPerSecond = animation.framePerSecond;
|
|
let highestFrame = animation.getHighestFrame();
|
|
let highestFrame = animation.getHighestFrame();
|
|
-
|
|
|
|
- // Should we use this for export?
|
|
|
|
let serialized = animation.serialize();
|
|
let serialized = animation.serialize();
|
|
-
|
|
|
|
let usesTangents = animation.getKeys().find(kf => kf.hasOwnProperty('inTangent') || kf.hasOwnProperty('outTangent')) !== undefined ? true : false;
|
|
let usesTangents = animation.getKeys().find(kf => kf.hasOwnProperty('inTangent') || kf.hasOwnProperty('outTangent')) !== undefined ? true : false;
|
|
|
|
|
|
return { loopMode, name, blendingSpeed, targetPropertyPath, targetProperty, framesPerSecond, highestFrame, serialized, usesTangents }
|
|
return { loopMode, name, blendingSpeed, targetPropertyPath, targetProperty, framesPerSecond, highestFrame, serialized, usesTangents }
|
|
@@ -971,7 +954,6 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
|
|
* Core functions
|
|
* Core functions
|
|
* This section handles main Curve Editor Functions.
|
|
* This section handles main Curve Editor Functions.
|
|
*/
|
|
*/
|
|
-
|
|
|
|
selectAnimation(animation: Animation) {
|
|
selectAnimation(animation: Animation) {
|
|
|
|
|
|
this.isAnimationPlaying();
|
|
this.isAnimationPlaying();
|
|
@@ -1003,7 +985,6 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
|
|
* Timeline
|
|
* Timeline
|
|
* This section controls the timeline.
|
|
* This section controls the timeline.
|
|
*/
|
|
*/
|
|
-
|
|
|
|
changeCurrentFrame(frame: number) {
|
|
changeCurrentFrame(frame: number) {
|
|
|
|
|
|
let currentValue;
|
|
let currentValue;
|