Fixes and Adding Easings

inspector/src/components/actionTabs/tabs/propertyGrids/animations/anchorPoint.tsx

@@ -1,19 +1,15 @@
 
 import * as React from "react";
+import { Vector2 } from 'babylonjs';
 
-interface Point {
-    x: number;
-    y: number;
-}
-
-interface IAnchorPointProps {
-   point: Point;
-   anchor: Point;
+interface IAnchorSvgPointProps {
+   point: Vector2;
+   anchor: Vector2;
 }
 
 
-export class AnchorPoint extends React.Component<IAnchorPointProps>{ 
-    constructor(props: IAnchorPointProps) {
+export class AnchorSvgPoint extends React.Component<IAnchorSvgPointProps>{ 
+    constructor(props: IAnchorSvgPointProps) {
         super(props);
     }
     render() {

inspector/src/components/actionTabs/tabs/propertyGrids/animations/animationCurveEditorComponent.tsx

@@ -2,9 +2,9 @@ import * as React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { Animation } from 'babylonjs/Animations/animation';
-import { EasingFunction, BezierCurveEase } from 'babylonjs';
-import { AnchorPoint } from './anchorPoint';
-import { KeyframePoint } from './keyframePoint';
+import { EasingFunction, Vector4, Vector2, IAnimationKey, IEasingFunction} from 'babylonjs';
+import { AnchorSvgPoint } from './anchorSvgPoint';
+import { KeyframeSvgPoint } from './keyframeSvgPoint';
 
 require("./curveEditor.scss");
 
@@ -15,28 +15,10 @@ interface IAnimationCurveEditorComponentProps {
     entityName: string;
 }
 
-interface KeyFrame {
-    frame: number;
-    value: number;
-    inTangent?: BABYLON.Vector2 | BABYLON.Vector3 | BABYLON.Quaternion;
-    outTangent?: BABYLON.Vector2 | BABYLON.Vector3 | BABYLON.Quaternion;
-}
-
-interface Point {
-    x: number;
-    y: number;
-}
+export class AnimationCurveEditorComponent extends React.Component<IAnimationCurveEditorComponentProps, { isOpen: boolean, selected: Animation, currentPathData: string | undefined, anchorPoints: { point: Vector2, anchor: Vector2 }[] | null, keyframes: Vector2[] | null }> {
 
-
-enum EASEMODE {
-    EASEIN, EASEOUT, EASEINOUT
-}
-
-
-export class AnimationCurveEditorComponent extends React.Component<IAnimationCurveEditorComponentProps, { isOpen: boolean, selected: Animation, currentPathData: string, anchorPoints: { point: Point, anchor: Point }[] | null, keyframes: Point[] | null }> {
-
-    private _anchorPoints: { point: Point, anchor: Point }[] = [];
-    private _keyframes: Point[] = [];
+    private _anchorPoints: { point: Vector2, anchor: Vector2 }[] = [];
+    private _keyframes: Vector2[] = [];
     constructor(props: IAnimationCurveEditorComponentProps) {
         super(props);
         this.state = { selected: this.props.animations[0], isOpen: true, currentPathData: this.getPathData(this.props.animations[0]), anchorPoints: this._anchorPoints, keyframes: this._keyframes }
@@ -73,38 +55,20 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
         let middle = (startKey.value / 2) * heightScale;
 
         // START OF LINE/CURVE
-        let data = `M0, ${middle}`;
-
-        // This will change setting other types 
-        if (easingType === "BezierCurveEase") {
-
-            var bezier = easingFunction as BezierCurveEase
-            data = this.bezierEasePath(keyframes, data, heightScale, middle, [bezier.x1, bezier.y1], [bezier.x2, bezier.y2]);
+        let data: string | undefined = `M0, ${middle}`;
 
+        if (easingType === undefined){
+            data = this.linearInterpolation(keyframes, data, heightScale, middle);
         } else {
-
-            switch (easingMode) {
-                case EASEMODE.EASEIN:
-                    data = this.easeIn(keyframes, data, heightScale, middle);
-                    break;
-                case EASEMODE.EASEOUT:
-                    data = this.easeOut(keyframes, data, heightScale, middle);
-                    break;
-                case EASEMODE.EASEINOUT:
-                    data = this.easeInOut(keyframes, data, heightScale, middle);
-                    break;
-                default: undefined
-                    data = this.linearInterpolation(keyframes, data, heightScale, middle);
-                    break;
-            }
-
+            var bezier = this.getEasingBezierValues(easingMode, easingType, easingFunction);
+            data = bezier && this.bezierEasePath(keyframes, data, heightScale, middle, [bezier.x, bezier.y], [bezier.z, bezier.w], easingMode);
         }
 
         return data;
 
     }
 
-    linearInterpolation(keyframes: KeyFrame[], data: string, heightScale: number, middle: number): string {
+    linearInterpolation(keyframes: IAnimationKey[], data: string, heightScale: number, middle: number): string {
         keyframes.forEach((key, i) => {
             if (i !== 0) {
                 data += ` L${key.frame} ${heightScale - (key.value * middle)}`
@@ -114,166 +78,244 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
         return data;
     }
 
-    easeIn(keyframes: KeyFrame[], data: string, heightScale: number, middle: number): string {
-
-        // Will refactor 
-        keyframes.forEach((key, i) => {
-            if (i !== 0) {
-
-                var pointA = [0, 0];
-                if (i === 0) {
-                    pointA = [0, middle];
-                } else {
-                    pointA = [keyframes[i - 1].frame, heightScale - (keyframes[i - 1].value * middle)];
-                }
-
-                var pointB = [key.frame, heightScale - (key.value * middle)];
-
-                var anchorA = [((pointB[0] - pointA[0]) / 4) + pointA[0], pointA[1]]
-
-                var anchorB = pointB;
-
-                this.setAnchorPoint({ x: pointA[0], y: pointA[1] }, { x: anchorA[0], y: anchorA[1] });
-                this.setAnchorPoint({ x: pointB[0], y: pointB[1] }, { x: anchorB[0], y: anchorB[1] });
+    getEasingBezierValues(easingMode: number, easingType: string, easingFunction: IEasingFunction): Vector4 | undefined {
 
-                this.setKeyframePoint({ x: pointA[0], y: pointA[1] });
-                this.setKeyframePoint({ x: pointB[0], y: pointB[1] });
-
-                data += ` C${anchorA[0]}, ${anchorA[1]} ${anchorB[0]}, ${anchorB[1]} ${pointB[0]}, ${pointB[1]}`
+        // X, Y, W, Z
+        let easingFunctionMode = `${easingType}_${easingMode}`;
+        let bezierValues:Vector4 | undefined;
 
+        if (easingType === 'BezierCurveEase'){
+            let easeF = easingFunction as BABYLON.BezierCurveEase;   
+            bezierValues = new Vector4(easeF.x1, easeF.y1, easeF.x2, easeF.y2);
+        } else {
+               
+        switch (easingFunctionMode){
+            case 'CircleEase_0':
+                bezierValues = new Vector4(0.55,0,1,0.45);//cubic-bezier(0.55, 0, 1, 0.45);
+                break;
+            case 'CircleEase_1':
+                bezierValues = new Vector4(0,0.55,0.45,1);//cubic-bezier(0, 0.55, 0.45, 1);
+                break;
+            case 'CircleEase_2':
+                bezierValues = new Vector4(0.85, 0, 0.15, 1) //cubic-bezier(0.85, 0, 0.15, 1);
+                 break;
+            case 'CubicEase_0':
+                bezierValues = new Vector4(0.32, 0, 0.67, 0); //cubic-bezier(0.32, 0, 0.67, 0);
+                break;
+            case 'CubicEase_1':
+                bezierValues = new Vector4(0.33, 1, 0.68, 1); //cubic-bezier(0.33, 1, 0.68, 1);
+                break;
+            case 'CubicEase_2':
+                bezierValues = new Vector4(0.65, 0, 0.35, 1); //cubic-bezier(0.65, 0, 0.35, 1);
+                break;
+            case 'QuadraticEase_0':
+                bezierValues = new Vector4(0.11, 0, 0.5, 0); //cubic-bezier(0.11, 0, 0.5, 0);
+                break;
+            case 'QuadraticEase_1':
+                bezierValues = new Vector4(0.5, 1, 0.89, 1); //cubic-bezier(0.5, 1, 0.89, 1);
+                break;
+            case 'QuadraticEase_2':
+                bezierValues = new Vector4(0.45, 0, 0.55, 1); //cubic-bezier(0.45, 0, 0.55, 1);
+                break;
+            case 'QuarticEase_0':
+                bezierValues = new Vector4(0.5, 0, 0.75, 0); //cubic-bezier(0.5, 0, 0.75, 0);
+                break;
+            case 'QuarticEase_1':
+                bezierValues = new Vector4(0.25, 1, 0.5, 1); //cubic-bezier(0.25, 1, 0.5, 1);
+                break;
+            case 'QuarticEase_2':
+                bezierValues = new Vector4(0.76, 0, 0.24, 1); //cubic-bezier(0.76, 0, 0.24, 1);
+                break;
+            case 'QuinticEase_0':
+                bezierValues = new Vector4(0.64, 0, 0.78, 0); //cubic-bezier(0.64, 0, 0.78, 0);
+                break;
+            case 'QuinticEase_1':
+                bezierValues = new Vector4(0.22, 1, 0.36, 1); //cubic-bezier(0.22, 1, 0.36, 1);
+                break;
+            case 'QuinticEase_2':
+                bezierValues = new Vector4(0.83, 0, 0.17, 1); //cubic-bezier(0.83, 0, 0.17, 1);
+                break;
+            case 'SineEase_0':
+                bezierValues = new Vector4(0.12, 0, 0.39, 0); //cubic-bezier(0.12, 0, 0.39, 0);
+                break;
+            case 'SineEase_1':
+                bezierValues = new Vector4(0.61, 1, 0.88, 1); //cubic-bezier(0.61, 1, 0.88, 1);
+                break;
+            case 'SineEase_2':
+                bezierValues = new Vector4(0.37, 0, 0.63, 1); //cubic-bezier(0.37, 0, 0.63, 1);
+                break;
+            case 'BackEase_0':
+                bezierValues = new Vector4(0.36, 0, 0.66, -0.56); //cubic-bezier(0.36, 0, 0.66, -0.56);
+                break;
+            case 'BackEase_1':
+                bezierValues = new Vector4(0.34, 1.56, 0.64, 1); //cubic-bezier(0.34, 1.56, 0.64, 1);
+                break;
+            case 'BackEase_2':
+                bezierValues = new Vector4(0.68, -0.6, 0.32, 1.6); //cubic-bezier(0.68, -0.6, 0.32, 1.6);
+                break;
+            case 'BounceEase_0':
+                bezierValues = new Vector4(1, 1, 1, 1); //Create Function for number of bounces and bounciness inverse to BounceEase_1;
+                break;
+            case 'BounceEase_1':
+                bezierValues = new Vector4(1, 1, 1, 1); //Create Function for number of bounces and bounciness
+                break;
+            case 'BounceEase_2':
+                bezierValues = new Vector4(1, 1, 1, 1); //Create Function for number of bounces and bounciness inverse to BounceEase_1
+                break;
+            case 'ElasticEase_0':
+                bezierValues = new Vector4(1, 1, 1, 1); //Create Function for number of oscillations and springiness;
+                break;
+            case 'ElasticEase_1':
+                bezierValues = new Vector4(1, 1, 1, 1); //Create Function for number of oscillations and springiness;
+                break;
+            case 'ElasticEase_2':
+                bezierValues = new Vector4(1, 1, 1, 1); //Create Function for number of oscillations and springiness;
+                break;
+            case 'ExponentialEase_0':
+                bezierValues = new Vector4(0.7, 0, 0.84, 0); //cubic-bezier(0.7, 0, 0.84, 0); // Implement Exponential in Path
+                break;
+            case 'ExponentialEase_1':
+                bezierValues = new Vector4(0.16, 1, 0.3, 1); //cubic-bezier(0.16, 1, 0.3, 1); // Implement Exponential in Path
+                break;
+            case 'ExponentialEase_2':
+                bezierValues = new Vector4(0.87, 0, 0.13, 1); //cubic-bezier(0.87, 0, 0.13, 1); // Implement Exponential in Path
+                break;
+            case 'PowerEase_0':
+                bezierValues = new Vector4(0.11, 0, 0.5, 0); //cubic-bezier(0.11, 0, 0.5, 0); // Implement Power in Path
+                break;
+            case 'PowerEase_1':
+                bezierValues = new Vector4(0.5, 1, 0.89, 1); //cubic-bezier(0.5, 1, 0.89, 1); // Implement Power in Path
+                break;
+            case 'PowerEase_2':
+                bezierValues = new Vector4(0.45, 0, 0.55, 1); //cubic-bezier(0.45, 0, 0.55, 1); // Implement Power in Path
+                break;
+            default: undefined
+                bezierValues = undefined
+                break;
             }
+        }
+        return bezierValues;
 
-        });
-
-        return data;
     }
 
-    easeOut(keyframes: KeyFrame[], data: string, heightScale: number, middle: number): string {
+    bezierEasePath(keyframes: BABYLON.IAnimationKey[], data: string, heightScale: number, middle: number, bezierA: [number, number], bezierB: [number, number], mode: number) {
 
-        // Will refactor 
-        keyframes.forEach((key, i) => {
-            if (i !== 0) {
+        if (mode === 0 || mode === 1){
 
-                var pointA = [0, 0];
-                if (i === 0) {
-                    pointA = [0, middle];
-                } else {
-                    pointA = [keyframes[i - 1].frame, heightScale - (keyframes[i - 1].value * middle)];
-                }
+            console.log("value of mode = 0");
+            keyframes.forEach((key, i) => {
+                if (i !== 0) {
 
-                var pointB = [key.frame, heightScale - (key.value * middle)];
+                    var pointA =  new Vector2(0, 0);
+                    if (i === 0) {
+                        pointA.x = 0
+                        pointA.y = middle;
+                    } else {
+                        pointA.x = keyframes[i - 1].frame;
+                        pointA.y = heightScale - (keyframes[i - 1].value * middle)
+                    }
 
-                var anchorA = pointA;
+                    var pointB = new Vector2(key.frame, heightScale - (key.value * middle));
 
-                var anchorB = [((pointB[0] - pointA[0]) / 4) + pointA[0], pointB[1]]
+                    let anchorA_Y;
+                    let anchorB_X;
+                    let anchorA_X;
+                    let anchorB_Y;
 
-                this.setAnchorPoint({ x: pointA[0], y: pointA[1] }, { x: anchorA[0], y: anchorA[1] });
-                this.setAnchorPoint({ x: pointB[0], y: pointB[1] }, { x: anchorB[0], y: anchorB[1] });
+                    if (mode === 0){
+                        anchorA_Y = pointA.y;
+                        anchorB_X = pointB.x;
+                        anchorA_X = bezierA[0] * (pointB.x - pointA.x);
+                        anchorB_Y = (bezierB[1] * (pointA.y - pointB.y)) + pointB.y;
+                    }
+        
+                    if (mode === 1){
+                        anchorA_X = pointA.x;
+                        anchorB_Y = pointB.y;
+                        anchorB_X = bezierB[0] * (pointB.x - pointA.x);
+                        anchorA_Y = (bezierA[1] * (pointA.y - pointB.y)) + pointB.y;
+                    }
 
-                this.setKeyframePoint({ x: pointA[0], y: pointA[1] });
-                this.setKeyframePoint({ x: pointB[0], y: pointB[1] });
 
-                data += ` C${anchorA[0]}, ${anchorA[1]} ${anchorB[0]}, ${anchorB[1]} ${pointB[0]}, ${pointB[1]}`
+                    var anchorA = new Vector2(anchorA_X, anchorA_Y);
+                    var anchorB = new Vector2(anchorB_X, anchorB_Y);
 
-            }
+                    this.setAnchorPoint(pointA, anchorA);
+                    this.setAnchorPoint(pointB, anchorB);
 
-        });
+                    this.setKeyframePoint(pointA);
+                    this.setKeyframePoint(pointB);
 
-        return data;
-    }
-
-    easeInOut(keyframes: KeyFrame[], data: string, heightScale: number, middle: number): string {
-
-        // Will refactor 
-        keyframes.forEach((key, i) => {
-            if (i !== 0) {
+                    data += ` C${anchorA.x}, ${anchorA.y} ${anchorB.x}, ${anchorB.y} ${pointB.x}, ${pointB.y}`
 
-                var pointA = [0, 0];
-                if (i === 0) {
-                    pointA = [0, middle];
-                } else {
-                    pointA = [keyframes[i - 1].frame, heightScale - (keyframes[i - 1].value * middle)];
                 }
 
-                var pointB = [key.frame, heightScale - (key.value * middle)];
+            });
 
-                var anchorA = [((pointB[0] - pointA[0]) * .40) + pointA[0], pointA[1]]
+        } else if (mode === 2){
 
-                var anchorB = [((pointB[0] - pointA[0]) * .60) + pointA[0], pointB[1]]
+            //mode easeInOut
+            console.log("value of mode = 2");
+            keyframes.forEach((key, i) => {
+                if (i !== 0) {
 
-                this.setAnchorPoint({ x: pointA[0], y: pointA[1] }, { x: anchorA[0], y: anchorA[1] });
-                this.setAnchorPoint({ x: pointB[0], y: pointB[1] }, { x: anchorB[0], y: anchorB[1] });
+                    var pointA =  new Vector2(0, 0);
+                    if (i === 0) {
+                        pointA.x = 0
+                        pointA.y = middle;
+                    } else {
+                        pointA.x = keyframes[i - 1].frame;
+                        pointA.y = heightScale - (keyframes[i - 1].value * middle)
+                    }
 
-                this.setKeyframePoint({ x: pointA[0], y: pointA[1] });
-                this.setKeyframePoint({ x: pointB[0], y: pointB[1] });
+                    var pointB = new Vector2(key.frame, heightScale - (key.value * middle));
 
-                // In redesign check c vs C for dinamic paths
-                data += ` C${anchorA[0]}, ${anchorA[1]} ${anchorB[0]}, ${anchorB[1]} ${pointB[0]}, ${pointB[1]}`
+                    var anchorA_Y = bezierA[1] === 0 ? pointA.y : pointA.y * bezierA[1];
+                    var anchorB_Y = bezierB[1] === 0 ? pointB.y : (pointB.y * bezierB[1]);
 
-            }
+                    var anchorA_X = bezierA[0] === 0 ? (pointB.x - pointA.x) + pointA.x : ((pointB.x - pointA.x) * bezierA[0]) + pointA.x;
+                    var anchorB_X = bezierB[0] === 0 ? (pointB.x - pointA.x) + pointA.x : ((pointB.x - pointA.x) * bezierB[0]) + pointA.x;
 
-        });
+                    var anchorA = new Vector2(anchorA_X, anchorA_Y);
+                    var anchorB = new Vector2(anchorB_X, anchorB_Y);
 
-        return data;
-    }
+                    
+                    this.setAnchorPoint(pointA, anchorA);
+                    this.setAnchorPoint(pointB, anchorB);
 
+                    this.setKeyframePoint(pointA);
+                    this.setKeyframePoint(pointB);
 
+                    data += ` C${anchorA.x}, ${anchorA.y} ${anchorB.x}, ${anchorB.y} ${pointB.x}, ${pointB.y}`
 
-
-    bezierEasePath(keyframes: KeyFrame[], data: string, heightScale: number, middle: number, bezierA: [number, number], bezierB: [number, number]) {
-
-        //BezierCurveEase(bezierA.x: Percent, bezierA: Value up/down, bezierB.x: Percent, bezierB.y: Value up/down);
-        keyframes.forEach((key, i) => {
-            if (i !== 0) {
-
-                var pointA = [0, 0];
-                if (i === 0) {
-                    pointA = [0, middle];
-                } else {
-                    pointA = [keyframes[i - 1].frame, heightScale - (keyframes[i - 1].value * middle)];
                 }
 
-                var pointB = [key.frame, heightScale - (key.value * middle)];
-
-                var anchorA = [((pointB[0] - pointA[0]) * bezierA[0]) + pointA[0], pointA[1] * bezierA[1]];
-                var anchorB = [((pointB[0] - pointA[0]) * bezierB[0]) + pointA[0], pointB[1] * bezierB[1]];
-
-                this.setAnchorPoint({ x: pointA[0], y: pointA[1] }, { x: anchorA[0], y: anchorA[1] });
-                this.setAnchorPoint({ x: pointB[0], y: pointB[1] }, { x: anchorB[0], y: anchorB[1] });
-
-                this.setKeyframePoint({ x: pointA[0], y: pointA[1] });
-                this.setKeyframePoint({ x: pointB[0], y: pointB[1] });
-
-                data += ` C${anchorA[0]}, ${anchorA[1]} ${anchorB[0]}, ${anchorB[1]} ${pointB[0]}, ${pointB[1]}`
-
-            }
-
-        });
+            });
 
+        }
 
         return data;
 
-
-
-
     }
 
-    setAnchorPoint(point: Point, anchor: Point) {
+    setAnchorPoint(point: Vector2, anchor: Vector2) {
         this._anchorPoints.push({ point, anchor });
     }
 
-    setKeyframePoint(point: Point) {
+    setKeyframePoint(point: Vector2) {
         this._keyframes.push(point);
     }
 
     selectAnimation(animation: Animation) {
+        this._anchorPoints = [];
+        this._keyframes = [];
+
         const pathData = this.getPathData(animation);
         if (pathData === "") {
             console.log("no keyframes in this animation");
         }
         this.setState({ selected: animation, currentPathData: pathData, anchorPoints: this._anchorPoints, keyframes: this._keyframes });
-        this._anchorPoints = [];
-        this._keyframes = [];
+
     }
 
     render() {
@@ -344,11 +386,11 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
                             <path id="curve" d={this.state.currentPathData} style={{ stroke: 'red', fill: 'none', strokeWidth: '0.5' }}></path>
 
                             {this.state.anchorPoints?.map((anchorPoint, i) =>
-                                <AnchorPoint key={i} point={anchorPoint.point} anchor={anchorPoint.anchor} />
+                                <AnchorSvgPoint key={i} point={anchorPoint.point} anchor={anchorPoint.anchor} />
                             )}
 
                             {this.state.keyframes?.map((keyframe, i) =>
-                                <KeyframePoint key={i} point={keyframe} />
+                                <KeyframeSvgPoint key={i} point={keyframe} />
                             )}
 
                         </svg>
@@ -362,59 +404,3 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
     }
 }
 
-
-/// NOTES >>>>>
-
-// UPPER LIMIT
-// BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE
-// BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
-// BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
-
-// TYPE OF CHANGE
-//     Animation.ANIMATIONTYPE_FLOAT,
-//     Animation.ANIMATIONTYPE_VECTOR2,
-//     Animation.ANIMATIONTYPE_VECTOR3,
-//     Animation.ANIMATIONTYPE_QUATERNION,
-//     Animation.ANIMATIONTYPE_MATRIX,
-//     Animation.ANIMATIONTYPE_COLOR3,
-
-// TYPES OF CHANGE THAT ALLOW SPLINES INTERPOLATIONS
-// BABYLON.Animation.ANIMATIONTYPE_VECTOR2
-// BABYLON.Animation.ANIMATIONTYPE_VECTOR3
-// BABYLON.Animation.ANIMATIONTYPE_QUATERNION
-// <i className="e"></i>
-// {
-//     frame: 0,
-//     value: BABYLON.Vector3.Zero(),
-//     outTangent: new BABYLON.Vector3(1, 0, 0)
-//   }
-// keys.push({
-//     frame: 20,
-//     inTangent: new BABYLON.Vector3(1, 0, 0),
-//     value: new BABYLON.Vector3(1, 1, 1),
-//     outTangent: new BABYLON.Vector3(-1, 0, 0)
-//  })
-
-
-// BABYLON.Animation.prototype.floatInterpolateFunction = function (startValue, endValue, gradient) {
-//     return startValue + (endValue - startValue) * gradient;
-//   };
-
-//   BABYLON.Animation.prototype.quaternionInterpolateFunction = function (startValue, endValue, gradient) {
-//     return BABYLON.Quaternion.Slerp(startValue, endValue, gradient);
-//   };
-
-//   BABYLON.Animation.prototype.vector3InterpolateFunction = function (startValue, endValue, gradient) {
-//     return BABYLON.Vector3.Lerp(startValue, endValue, gradient);
-//   };
-
-// floatInterpolateFunction
-// quaternionInterpolateFunction
-// quaternionInterpolateFunctionWithTangents
-// vector3InterpolateFunction
-// vector3InterpolateFunctionWithTangents
-// vector2InterpolateFunction
-// vector2InterpolateFunctionWithTangents
-// sizeInterpolateFunction
-// color3InterpolateFunction
-// matrixInterpolateFunction

inspector/src/components/actionTabs/tabs/propertyGrids/animations/keyframePoint.tsx

@@ -1,17 +1,12 @@
 import * as React from "react";
+import { Vector2 } from 'babylonjs';
 
-interface Point {
-    x: number;
-    y: number;
+interface IKeyframeSvgPointProps {
+    point: Vector2;
 }
 
-
-interface IKeyframeProps {
-    point: Point;
-}
-
-export class KeyframePoint extends React.Component<IKeyframeProps>{ 
-    constructor(props: IKeyframeProps) {
+export class KeyframeSvgPoint extends React.Component<IKeyframeSvgPointProps>{ 
+    constructor(props: IKeyframeSvgPointProps) {
         super(props);
     }
     render() {