update

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

@@ -41,9 +41,7 @@ export class AddAnimation extends React.Component<
             animationName: editingAnimation ? editingAnimation.name : "",
             animationTargetPath: "",
             animationType: editingAnimation ? editingAnimation.dataType : Animation.ANIMATIONTYPE_FLOAT,
-            loopMode: editingAnimation
-                ? editingAnimation.loopMode ?? Animation.ANIMATIONLOOPMODE_CYCLE
-                : Animation.ANIMATIONLOOPMODE_CYCLE,
+            loopMode: editingAnimation ? editingAnimation.loopMode ?? Animation.ANIMATIONLOOPMODE_CYCLE : Animation.ANIMATIONLOOPMODE_CYCLE,
             animationTargetProperty: editingAnimation ? editingAnimation.targetProperty : "",
             isUpdating: editingAnimation ? true : false,
         };
@@ -111,38 +109,28 @@ export class AddAnimation extends React.Component<
                 if (match) {
                     switch (match.constructor.name) {
                         case "Vector2":
-                            animationDataType === Animation.ANIMATIONTYPE_VECTOR2
-                                ? (matched = true)
-                                : (matched = false);
+                            matched = animationDataType === Animation.ANIMATIONTYPE_VECTOR2;
                             break;
                         case "Vector3":
-                            animationDataType === Animation.ANIMATIONTYPE_VECTOR3
-                                ? (matched = true)
-                                : (matched = false);
+                            matched = animationDataType === Animation.ANIMATIONTYPE_VECTOR3;
                             break;
                         case "Quaternion":
-                            animationDataType === Animation.ANIMATIONTYPE_QUATERNION
-                                ? (matched = true)
-                                : (matched = false);
+                            matched = animationDataType === Animation.ANIMATIONTYPE_QUATERNION;
                             break;
                         case "Color3":
-                            animationDataType === Animation.ANIMATIONTYPE_COLOR3 ? (matched = true) : (matched = false);
+                            matched = animationDataType === Animation.ANIMATIONTYPE_COLOR3;
                             break;
                         case "Color4":
-                            animationDataType === Animation.ANIMATIONTYPE_COLOR4 ? (matched = true) : (matched = false);
+                            matched = animationDataType === Animation.ANIMATIONTYPE_COLOR4;
                             break;
                         case "Size":
-                            animationDataType === Animation.ANIMATIONTYPE_SIZE ? (matched = true) : (matched = false);
+                            matched = animationDataType === Animation.ANIMATIONTYPE_SIZE;
                             break;
                     }
                 } else {
-                    this.props.setNotificationMessage(
-                        `The selected entity doesn't have a ${matchTypeTargetProperty[0]} property`
-                    );
+                    this.props.setNotificationMessage(`The selected entity doesn't have a ${matchTypeTargetProperty[0]} property`);
                 }
             } else if (matchTypeTargetProperty.length > 1) {
-                const entity = this.props.entity;
-                console.log(entity);
                 let matchProp = (this.props.entity as any)[matchTypeTargetProperty[0]];
                 if (matchProp) {
                     let match = matchProp[matchTypeTargetProperty[1]];
@@ -153,31 +141,16 @@ export class AddAnimation extends React.Component<
             }
 
             if (matched) {
-                let alreadyAnimatedProperty = (this.props.entity as IAnimatable).animations?.find(
-                    (anim) => anim.targetProperty === this.state.animationTargetProperty,
-                    this
-                );
+                let alreadyAnimatedProperty = (this.props.entity as IAnimatable).animations?.find((anim) => anim.targetProperty === this.state.animationTargetProperty, this);
 
-                let alreadyAnimationName = (this.props.entity as IAnimatable).animations?.find(
-                    (anim) => anim.name === this.state.animationName,
-                    this
-                );
+                let alreadyAnimationName = (this.props.entity as IAnimatable).animations?.find((anim) => anim.name === this.state.animationName, this);
 
                 if (alreadyAnimatedProperty) {
-                    this.props.setNotificationMessage(
-                        `The property "${this.state.animationTargetProperty}" already has an animation`
-                    );
+                    this.props.setNotificationMessage(`The property "${this.state.animationTargetProperty}" already has an animation`);
                 } else if (alreadyAnimationName) {
-                    this.props.setNotificationMessage(
-                        `There is already an animation with the name: "${this.state.animationName}"`
-                    );
+                    this.props.setNotificationMessage(`There is already an animation with the name: "${this.state.animationName}"`);
                 } else {
-                    let animation = new Animation(
-                        this.state.animationName,
-                        this.state.animationTargetProperty,
-                        this.props.fps,
-                        animationDataType
-                    );
+                    let animation = new Animation(this.state.animationName, this.state.animationTargetProperty, this.props.fps, animationDataType);
 
                     // Start with two keyframes
                     var keys: IAnimationKey[] = [];
@@ -201,11 +174,7 @@ export class AddAnimation extends React.Component<
                     }
                 }
             } else {
-                this.props.setNotificationMessage(
-                    `The property "${this.state.animationTargetProperty}" is not a "${this.getTypeAsString(
-                        this.state.animationType
-                    )}" type`
-                );
+                this.props.setNotificationMessage(`The property "${this.state.animationTargetProperty}" is not a "${this.getTypeAsString(this.state.animationType)}" type`);
             }
         } else {
             this.props.setNotificationMessage(`You need to provide a name and target property.`);
@@ -276,11 +245,7 @@ export class AddAnimation extends React.Component<
                     {this.state.isUpdating ? null : (
                         <div className="label-input">
                             <label>Property</label>
-                            <input
-                                type="text"
-                                value={this.state.animationTargetProperty}
-                                onChange={this.handlePropertyChange}
-                            ></input>
+                            <input type="text" value={this.state.animationTargetProperty} onChange={this.handlePropertyChange}></input>
                         </div>
                     )}
                     {this.state.isUpdating ? null : (
@@ -308,9 +273,7 @@ export class AddAnimation extends React.Component<
                     </div>
                     <div className="confirm-buttons">
                         <ButtonLineComponent label={confirmLabel} onClick={confirmHandleOnClick} />
-                        {this.props.entity.animations?.length !== 0 ? (
-                            <ButtonLineComponent label={"Cancel"} onClick={this.props.close} />
-                        ) : null}
+                        {this.props.entity.animations?.length !== 0 ? <ButtonLineComponent label={"Cancel"} onClick={this.props.close} /> : null}
                     </div>
                 </div>
             </div>

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

@@ -136,21 +136,15 @@ export class AnimationCurveEditorComponent extends React.Component<
         if (this.props.entity instanceof TargetedAnimation) {
             this._isTargetedAnimation = true;
             initialSelection = this.props.entity.animation;
-            initialLerpMode = initialSelection !== undefined ? this.analizeAnimationForLerp(initialSelection) : false;
+            initialLerpMode = initialSelection !== undefined ? this.analyzeAnimationForLerp(initialSelection) : false;
             initialPathData = initialSelection !== undefined ? this.getPathData(initialSelection) : undefined;
         } else {
             this._isTargetedAnimation = false;
 
-            let hasAnimations =
-                this.props.entity.animations !== undefined || this.props.entity.animations !== null
-                    ? this.props.entity.animations
-                    : false;
+            let hasAnimations = this.props.entity.animations !== undefined || this.props.entity.animations !== null ? this.props.entity.animations : false;
             initialSelection = hasAnimations !== false ? hasAnimations && hasAnimations[0] : null;
 
-            initialLerpMode =
-                initialSelection !== undefined
-                    ? this.analizeAnimationForLerp(this.props.entity.animations && initialSelection)
-                    : false;
+            initialLerpMode = initialSelection !== undefined ? this.analyzeAnimationForLerp(this.props.entity.animations && initialSelection) : false;
             initialPathData = initialSelection && this.getPathData(initialSelection);
             initialPathData = initialPathData === null || initialPathData === undefined ? undefined : initialPathData;
         }
@@ -167,9 +161,7 @@ export class AnimationCurveEditorComponent extends React.Component<
             isTangentMode: false,
             isBrokenMode: false,
             lerpMode: initialLerpMode,
-            playheadOffset: this._graphCanvas.current
-                ? this._graphCanvas.current.children[0].clientWidth / (_canvasLength * 10)
-                : 0,
+            playheadOffset: this._graphCanvas.current ? this._graphCanvas.current.children[0].clientWidth / (_canvasLength * 10) : 0,
             frameAxisLength: this.setFrameAxis(_canvasLength),
             valueAxisLength: new Array(10).fill(0).map((s, i) => {
                 return { value: i * 10, label: valueInd[i] };
@@ -204,11 +196,7 @@ export class AnimationCurveEditorComponent extends React.Component<
     componentDidMount() {
         this.state.selected && this.selectAnimation(this.state.selected);
 
-        if (
-            this._editor.current &&
-            this._editor.current.ownerDocument &&
-            this._editor.current.ownerDocument.defaultView
-        ) {
+        if (this._editor.current && this._editor.current.ownerDocument && this._editor.current.ownerDocument.defaultView) {
             this._editorWindow = this._editor.current.ownerDocument.defaultView;
             this._editorWindow.addEventListener("resize", this.onWindowResizeWidth.bind(this));
         }
@@ -307,9 +295,7 @@ export class AnimationCurveEditorComponent extends React.Component<
     resetPlayheadOffset() {
         if (this._graphCanvas && this._graphCanvas.current) {
             this.setState({
-                playheadOffset:
-                    this._graphCanvas.current.children[0].clientWidth /
-                    (this.state.canvasLength * 10 * this.state.scale),
+                playheadOffset: this._graphCanvas.current.children[0].clientWidth / (this.state.canvasLength * 10 * this.state.scale),
             });
         }
     }
@@ -477,12 +463,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         });
     };
 
-    updateValuePerCoordinate(
-        dataType: number,
-        value: number | Vector2 | Vector3 | Color3 | Color4 | Size | Quaternion,
-        newValue: number,
-        coordinate?: number
-    ) {
+    updateValuePerCoordinate(dataType: number, value: number | Vector2 | Vector3 | Color3 | Color4 | Size | Quaternion, newValue: number, coordinate?: number) {
         if (dataType === Animation.ANIMATIONTYPE_FLOAT) {
             value = newValue;
         }
@@ -636,15 +617,9 @@ export class AnimationCurveEditorComponent extends React.Component<
             }
         }
 
-        let updatedValue =
-            ((this._heightScale - updatedSvgKeyFrame.keyframePoint.y) / this._heightScale) * this._scaleFactor;
+        let updatedValue = ((this._heightScale - updatedSvgKeyFrame.keyframePoint.y) / this._heightScale) * this._scaleFactor;
 
-        const updatedValueInCoordinate = this.updateValuePerCoordinate(
-            animation.dataType,
-            keys[index].value,
-            updatedValue,
-            coordinate
-        );
+        const updatedValueInCoordinate = this.updateValuePerCoordinate(animation.dataType, keys[index].value, updatedValue, coordinate);
 
         keys[index].value = updatedValueInCoordinate;
 
@@ -664,12 +639,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         this.selectAnimation(animation, coordinate);
     };
 
-    updateLeftControlPoint(
-        updatedSvgKeyFrame: IKeyframeSvgPoint,
-        key: IAnimationKey,
-        dataType: number,
-        coordinate: number
-    ) {
+    updateLeftControlPoint(updatedSvgKeyFrame: IKeyframeSvgPoint, key: IAnimationKey, dataType: number, coordinate: number) {
         if (updatedSvgKeyFrame.isLeftActive) {
             if (updatedSvgKeyFrame.leftControlPoint !== null) {
                 // Rotate Control Points
@@ -678,16 +648,11 @@ export class AnimationCurveEditorComponent extends React.Component<
 
                 let distanceAmplitudeOfX = updatedSvgKeyFrame.leftControlPoint.x - distanceWithPreviousKeyframe;
 
-                let slope =
-                    (updatedSvgKeyFrame.leftControlPoint.y - updatedSvgKeyFrame.keyframePoint.y) /
-                    (updatedSvgKeyFrame.leftControlPoint.x - updatedSvgKeyFrame.keyframePoint.x);
+                let slope = (updatedSvgKeyFrame.leftControlPoint.y - updatedSvgKeyFrame.keyframePoint.y) / (updatedSvgKeyFrame.leftControlPoint.x - updatedSvgKeyFrame.keyframePoint.x);
 
-                let newValueOfY =
-                    (distanceAmplitudeOfX - updatedSvgKeyFrame.leftControlPoint.x) * slope +
-                    updatedSvgKeyFrame.keyframePoint.y;
+                let newValueOfY = (distanceAmplitudeOfX - updatedSvgKeyFrame.leftControlPoint.x) * slope + updatedSvgKeyFrame.keyframePoint.y;
 
-                let updatedValue =
-                    ((newValueOfY - updatedSvgKeyFrame.keyframePoint.y) * this._scaleFactor) / this._heightScale;
+                let updatedValue = ((newValueOfY - updatedSvgKeyFrame.keyframePoint.y) * this._scaleFactor) / this._heightScale;
 
                 if (updatedValue > -100 && updatedValue < 100) {
                     key.inTangent = slope;
@@ -703,12 +668,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         }
     }
 
-    updateRightControlPoint(
-        updatedSvgKeyFrame: IKeyframeSvgPoint,
-        key: IAnimationKey,
-        dataType: number,
-        coordinate: number
-    ) {
+    updateRightControlPoint(updatedSvgKeyFrame: IKeyframeSvgPoint, key: IAnimationKey, dataType: number, coordinate: number) {
         if (updatedSvgKeyFrame.isRightActive) {
             if (updatedSvgKeyFrame.rightControlPoint !== null) {
                 // Get the next svgKeyframe and measure distance between these two points
@@ -716,16 +676,11 @@ export class AnimationCurveEditorComponent extends React.Component<
 
                 let distanceAmplitudeOfX = updatedSvgKeyFrame.rightControlPoint.x + distanceWithNextKeyframe;
 
-                let slope =
-                    (updatedSvgKeyFrame.rightControlPoint.y - updatedSvgKeyFrame.keyframePoint.y) /
-                    (updatedSvgKeyFrame.rightControlPoint.x - updatedSvgKeyFrame.keyframePoint.x);
+                let slope = (updatedSvgKeyFrame.rightControlPoint.y - updatedSvgKeyFrame.keyframePoint.y) / (updatedSvgKeyFrame.rightControlPoint.x - updatedSvgKeyFrame.keyframePoint.x);
 
-                let newValueOfY =
-                    (distanceAmplitudeOfX - updatedSvgKeyFrame.rightControlPoint.x) * slope +
-                    updatedSvgKeyFrame.keyframePoint.y;
+                let newValueOfY = (distanceAmplitudeOfX - updatedSvgKeyFrame.rightControlPoint.x) * slope + updatedSvgKeyFrame.keyframePoint.y;
 
-                let updatedValue =
-                    ((newValueOfY - updatedSvgKeyFrame.keyframePoint.y) * this._scaleFactor) / this._heightScale;
+                let updatedValue = ((newValueOfY - updatedSvgKeyFrame.keyframePoint.y) * this._scaleFactor) / this._heightScale;
 
                 if (updatedValue > -100 && updatedValue < 100) {
                     key.outTangent = slope * -1;
@@ -747,8 +702,7 @@ export class AnimationCurveEditorComponent extends React.Component<
             let indexOfKeyframe = this.state.svgKeyframes.indexOf(updatedSvgKeyFrame);
             let previousKeyframe = this.state.svgKeyframes[indexOfKeyframe - 1];
             if (previousKeyframe?.keyframePoint) {
-                distanceWithPreviousKeyframe =
-                    Vector2.Distance(updatedSvgKeyFrame.keyframePoint, previousKeyframe.keyframePoint) / 2;
+                distanceWithPreviousKeyframe = Vector2.Distance(updatedSvgKeyFrame.keyframePoint, previousKeyframe.keyframePoint) / 2;
             }
         }
 
@@ -757,8 +711,7 @@ export class AnimationCurveEditorComponent extends React.Component<
             let indexOfKeyframe = this.state.svgKeyframes.indexOf(updatedSvgKeyFrame);
             let nextKeyframe = this.state.svgKeyframes[indexOfKeyframe + 1];
             if (nextKeyframe?.keyframePoint) {
-                distanceWithNextKeyframe =
-                    Vector2.Distance(nextKeyframe.keyframePoint, updatedSvgKeyFrame.keyframePoint) / 2;
+                distanceWithNextKeyframe = Vector2.Distance(nextKeyframe.keyframePoint, updatedSvgKeyFrame.keyframePoint) / 2;
             }
         }
 
@@ -827,12 +780,7 @@ export class AnimationCurveEditorComponent extends React.Component<
     };
 
     setKeyframeValue = () => {
-        if (
-            this.state.actionableKeyframe.frame !== "" &&
-            this.state.actionableKeyframe.frame !== undefined &&
-            this.state.actionableKeyframe.value !== "" &&
-            this.state.actionableKeyframe.value !== undefined
-        ) {
+        if (this.state.actionableKeyframe.frame !== "" && this.state.actionableKeyframe.frame !== undefined && this.state.actionableKeyframe.value !== "" && this.state.actionableKeyframe.value !== undefined) {
             if (this.state.selected !== null) {
                 let currentSelected = this.state.svgKeyframes?.find((kf) => kf.selected);
                 if (currentSelected) {
@@ -859,9 +807,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                             frame: this.state.actionableKeyframe.frame as number,
                             value: this.state.actionableKeyframe.value,
                         });
-                        const { prev, next } = this.getPreviousAndNextKeyframe(
-                            this.state.actionableKeyframe.frame as number
-                        );
+                        const { prev, next } = this.getPreviousAndNextKeyframe(this.state.actionableKeyframe.frame as number);
                         this.setState({ maxFrame: next, minFrame: prev });
                     }
                 }
@@ -904,9 +850,7 @@ export class AnimationCurveEditorComponent extends React.Component<
     setBrokenMode = () => {
         if (this.state.selected !== null) {
             let animation = this.state.selected;
-            this.setState({ isBrokenMode: !this.state.isBrokenMode }, () =>
-                this.selectAnimation(animation, this.state.selectedCoordinate)
-            );
+            this.setState({ isBrokenMode: !this.state.isBrokenMode }, () => this.selectAnimation(animation, this.state.selectedCoordinate));
         }
     };
 
@@ -914,9 +858,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         const animation = this.state.selected;
         if (this.state.svgKeyframes && animation) {
             const keys = animation.getKeys();
-            const selectedKeyframe = this.state.svgKeyframes.find(
-                (keyframe: IKeyframeSvgPoint) => keyframe.selected && (keyframe.isLeftActive || keyframe.isRightActive)
-            );
+            const selectedKeyframe = this.state.svgKeyframes.find((keyframe: IKeyframeSvgPoint) => keyframe.selected && (keyframe.isLeftActive || keyframe.isRightActive));
 
             if (selectedKeyframe !== null && selectedKeyframe) {
                 const { order, coordinate } = this.decodeCurveId(selectedKeyframe.id);
@@ -1202,15 +1144,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         if (keyframes === undefined || keyframes.length === 0) {
             return undefined;
         } else {
-            const {
-                easingMode,
-                easingType,
-                usesTangents,
-                valueType,
-                highestFrame,
-                name,
-                targetProperty,
-            } = this.getAnimationData(animation);
+            const { easingMode, easingType, usesTangents, valueType, highestFrame, name, targetProperty } = this.getAnimationData(animation);
 
             const startKey = keyframes[0];
             let middle = this._heightScale / this._scaleFactor; //?
@@ -1223,9 +1157,7 @@ export class AnimationCurveEditorComponent extends React.Component<
 
                 const curveColor = valueType === Animation.ANIMATIONTYPE_FLOAT ? colors[4] : colors[d];
                 // START OF LINE/CURVE
-                let data: string | undefined = `M${startKey.frame * this._pixelFrameUnit}, ${
-                    this._heightScale - startValue[d] * middle
-                }`; //
+                let data: string | undefined = `M${startKey.frame * this._pixelFrameUnit}, ${this._heightScale - startValue[d] * middle}`; //
 
                 if (this.state) {
                     if (usesTangents) {
@@ -1264,11 +1196,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         let targetPropertyPath = animation.targetPropertyPath;
         let framesPerSecond = animation.framePerSecond;
         let highestFrame = animation.getHighestFrame();
-        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;
         let valueType = animation.dataType;
         let easingType, easingMode;
         let easingFunction: EasingFunction = animation.getEasingFunction() as EasingFunction;
@@ -1321,26 +1249,12 @@ export class AnimationCurveEditorComponent extends React.Component<
         return updatedKeyframes;
     }
 
-    curvePathWithoutTangents(
-        keyframes: IAnimationKey[],
-        data: string,
-        middle: number,
-        type: number,
-        coordinate: number,
-        animationName: string
-    ) {
+    curvePathWithoutTangents(keyframes: IAnimationKey[], data: string, middle: number, type: number, coordinate: number, animationName: string) {
         const updatedKeyframes = this.calculateLinearTangents(keyframes);
         return this.curvePathWithTangents(updatedKeyframes, data, middle, type, coordinate, animationName);
     }
 
-    curvePathWithTangents(
-        keyframes: IAnimationKey[],
-        data: string,
-        middle: number,
-        type: number,
-        coordinate: number,
-        animationName: string
-    ) {
+    curvePathWithTangents(keyframes: IAnimationKey[], data: string, middle: number, type: number, coordinate: number, animationName: string) {
         keyframes.forEach((key, i) => {
             // Create a unique id for curve
             const curveId = this.encodeCurveId(animationName, i);
@@ -1392,14 +1306,8 @@ export class AnimationCurveEditorComponent extends React.Component<
                 defaultTangent = null;
             }
 
-            var inT =
-                key.inTangent === null || key.inTangent === undefined
-                    ? defaultTangent
-                    : this.getValueAsArray(type, key.inTangent)[coordinate];
-            var outT =
-                key.outTangent === null || key.outTangent === undefined
-                    ? defaultTangent
-                    : this.getValueAsArray(type, key.outTangent)[coordinate];
+            var inT = key.inTangent === null || key.inTangent === undefined ? defaultTangent : this.getValueAsArray(type, key.inTangent)[coordinate];
+            var outT = key.outTangent === null || key.outTangent === undefined ? defaultTangent : this.getValueAsArray(type, key.outTangent)[coordinate];
 
             defaultWeight = 1 * this._pixelFrameUnit; // update based on control points
 
@@ -1421,10 +1329,7 @@ export class AnimationCurveEditorComponent extends React.Component<
 
             if (i === 0) {
                 svgKeyframe = {
-                    keyframePoint: new Vector2(
-                        key.frame * this._pixelFrameUnit,
-                        this._heightScale - keyframe_valueAsArray * middle
-                    ),
+                    keyframePoint: new Vector2(key.frame * this._pixelFrameUnit, this._heightScale - keyframe_valueAsArray * middle),
                     rightControlPoint: outTangent,
                     leftControlPoint: null,
                     id: curveId,
@@ -1439,10 +1344,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                 }
             } else {
                 svgKeyframe = {
-                    keyframePoint: new Vector2(
-                        key.frame * this._pixelFrameUnit,
-                        this._heightScale - keyframe_valueAsArray * middle
-                    ),
+                    keyframePoint: new Vector2(key.frame * this._pixelFrameUnit, this._heightScale - keyframe_valueAsArray * middle),
                     rightControlPoint: outTangent,
                     leftControlPoint: inTangent,
                     id: curveId,
@@ -1535,14 +1437,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                 let intermediatePoint75 = new Vector2((pointB.x - pointA.x) * v + pointA.x, yInt75);
 
                 // Gets the four control points of bezier curve
-                let controlPoints = this.interpolateControlPoints(
-                    pointA,
-                    intermediatePoint25,
-                    u,
-                    intermediatePoint75,
-                    v,
-                    pointB
-                );
+                let controlPoints = this.interpolateControlPoints(pointA, intermediatePoint25, u, intermediatePoint75, v, pointB);
 
                 if (controlPoints !== undefined) {
                     this.setKeyframePoint(controlPoints, i, keyframes.length);
@@ -1582,14 +1477,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         this._svgKeyframes.push(svgKeyframe);
     }
 
-    interpolateControlPoints(
-        p0: Vector2,
-        p1: Vector2,
-        u: number,
-        p2: Vector2,
-        v: number,
-        p3: Vector2
-    ): Vector2[] | undefined {
+    interpolateControlPoints(p0: Vector2, p1: Vector2, u: number, p2: Vector2, v: number, p3: Vector2): Vector2[] | undefined {
         let a = 0.0;
         let b = 0.0;
         let c = 0.0;
@@ -1728,12 +1616,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                 if (keys.length !== 0) {
                     const firstFrame = keys[0].frame;
                     const LastFrame = this.state.selected.getHighestFrame();
-                    this._mainAnimatable = this.props.scene.beginAnimation(
-                        target,
-                        firstFrame,
-                        LastFrame,
-                        this.state.isLooping
-                    );
+                    this._mainAnimatable = this.props.scene.beginAnimation(target, firstFrame, LastFrame, this.state.isLooping);
                     this._mainAnimatable.stop();
                 }
             }
@@ -1772,7 +1655,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         this.setState({ fps: fps, isPlaying: false }, () => this.stopAnimation());
     };
 
-    analizeAnimationForLerp(animation: Animation | null) {
+    analyzeAnimationForLerp(animation: Animation | null) {
         if (animation !== null) {
             const { easingMode, easingType, usesTangents } = this.getAnimationData(animation);
             if (easingType === undefined && easingMode === undefined && !usesTangents) {
@@ -1795,9 +1678,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         if (animation) {
             const hasKeyframe = animation.getKeys().find((x) => x.frame === frame);
             const currentValue = this.calculateCurrentPointInCurve(frame);
-            const value = hasKeyframe
-                ? this.getValueAsArray(animation.dataType, hasKeyframe.value)[this.state.selectedCoordinate]
-                : currentValue ?? 0;
+            const value = hasKeyframe ? this.getValueAsArray(animation.dataType, hasKeyframe.value)[this.state.selectedCoordinate] : currentValue ?? 0;
             const keyframe: IAnimationKey = { frame, value };
             this.setState(
                 {
@@ -1816,10 +1697,7 @@ export class AnimationCurveEditorComponent extends React.Component<
     };
 
     calculateCurrentPointInCurve = (frame: number): number | undefined => {
-        if (
-            this.state.selectedPathData !== undefined &&
-            this.state.selectedPathData[this.state.selectedCoordinate] !== undefined
-        ) {
+        if (this.state.selectedPathData !== undefined && this.state.selectedPathData[this.state.selectedCoordinate] !== undefined) {
             const selectedCurve = this.state.selectedPathData[this.state.selectedCoordinate].domCurve.current;
             if (selectedCurve !== null) {
                 const curveLength = selectedCurve.getTotalLength();
@@ -1828,10 +1706,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                 const currentPointInCurve = selectedCurve.getPointAtLength(frameValue);
                 const middle = this._heightScale / 2;
 
-                const offset =
-                    (currentPointInCurve?.y * this._heightScale - this._heightScale ** 2 / 2) /
-                    middle /
-                    this._heightScale;
+                const offset = (currentPointInCurve?.y * this._heightScale - this._heightScale ** 2 / 2) / middle / this._heightScale;
 
                 const unit = Math.sign(offset);
                 const currentValue = unit === -1 ? Math.abs(offset + unit) : unit - offset;
@@ -1860,9 +1735,7 @@ export class AnimationCurveEditorComponent extends React.Component<
             if (keyframe.value === null) {
                 value = this.state.panningY;
             } else {
-                value = this.getValueAsArray(this.state.selected.dataType, keyframe.value)[
-                    this.state.selectedCoordinate
-                ];
+                value = this.getValueAsArray(this.state.selected.dataType, keyframe.value)[this.state.selectedCoordinate];
             }
 
             const valueScale = this._heightScale / this._scaleFactor;
@@ -1929,20 +1802,10 @@ export class AnimationCurveEditorComponent extends React.Component<
                     let firstFrame = keys[0].frame;
                     let LastFrame = this.state.selected.getHighestFrame();
                     if (direction === 1) {
-                        this._mainAnimatable = this.props.scene.beginAnimation(
-                            target,
-                            firstFrame,
-                            LastFrame,
-                            this.state.isLooping
-                        );
+                        this._mainAnimatable = this.props.scene.beginAnimation(target, firstFrame, LastFrame, this.state.isLooping);
                     }
                     if (direction === -1) {
-                        this._mainAnimatable = this.props.scene.beginAnimation(
-                            target,
-                            LastFrame,
-                            firstFrame,
-                            this.state.isLooping
-                        );
+                        this._mainAnimatable = this.props.scene.beginAnimation(target, LastFrame, firstFrame, this.state.isLooping);
                     }
                     if (!this.state.isLooping && this._mainAnimatable) {
                         this._mainAnimatable.onAnimationEnd = () => this.playPause(0);
@@ -2046,11 +1909,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                 firstFrame = keysCopy[0].frame;
                 lastFrame = keysCopy[keysCopy.length - 1].frame;
                 // If not selected get all keyframes
-                keysCopy.sort(
-                    (a, b) =>
-                        this.getValueAsArray(animation.dataType, a.value)[coordinate] -
-                        this.getValueAsArray(animation.dataType, b.value)[coordinate]
-                );
+                keysCopy.sort((a, b) => this.getValueAsArray(animation.dataType, a.value)[coordinate] - this.getValueAsArray(animation.dataType, b.value)[coordinate]);
                 lowest = keysCopy[0];
                 highest = keysCopy[keysCopy.length - 1];
                 keysCopy.sort((a, b) => a.frame - b.frame);
@@ -2084,11 +1943,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                 }
 
                 // Sort to get lowest and highest values for scale
-                keysInRange.sort(
-                    (a, b) =>
-                        this.getValueAsArray(animation.dataType, a.value)[coordinate] -
-                        this.getValueAsArray(animation.dataType, b.value)[coordinate]
-                );
+                keysInRange.sort((a, b) => this.getValueAsArray(animation.dataType, a.value)[coordinate] - this.getValueAsArray(animation.dataType, b.value)[coordinate]);
 
                 lowest = keysInRange[0];
                 highest = keysInRange[keysInRange.length - 1];
@@ -2097,9 +1952,7 @@ export class AnimationCurveEditorComponent extends React.Component<
             }
 
             // calculate scale...
-            const scale =
-                this.getValueAsArray(animation.dataType, highest?.value)[coordinate] -
-                this.getValueAsArray(animation.dataType, lowest?.value)[coordinate];
+            const scale = this.getValueAsArray(animation.dataType, highest?.value)[coordinate] - this.getValueAsArray(animation.dataType, lowest?.value)[coordinate];
 
             // Scale Frames to fit width of canvas
             // reposition canvas to middle value of scale
@@ -2184,11 +2037,7 @@ export class AnimationCurveEditorComponent extends React.Component<
     render() {
         return (
             <div ref={this._editor} id="animation-curve-editor">
-                <Notification
-                    message={this.state.notification}
-                    open={this.state.notification !== "" ? true : false}
-                    close={this.clearNotification}
-                />
+                <Notification message={this.state.notification} open={this.state.notification !== "" ? true : false} close={this.clearNotification} />
                 <GraphActionsBar
                     setKeyframeValue={this.setKeyframeValueFromInput}
                     enabled={this.state.selected === null || this.state.selected === undefined ? false : true}
@@ -2265,15 +2114,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                                     })}
 
                                     {this.setValueLines().map((line, i) => {
-                                        return (
-                                            <line
-                                                key={i}
-                                                x1={-((this.state.frameAxisLength.length * 10) / 2)}
-                                                y1={line.value}
-                                                x2={this.state.frameAxisLength.length * 10}
-                                                y2={line.value}
-                                            ></line>
-                                        );
+                                        return <line key={i} x1={-((this.state.frameAxisLength.length * 10) / 2)} y1={line.value} x2={this.state.frameAxisLength.length * 10} y2={line.value}></line>;
                                     })}
 
                                     {/* Multiple Curves  */}
@@ -2308,36 +2149,16 @@ export class AnimationCurveEditorComponent extends React.Component<
                                         />
                                     ))}
 
-                                    <rect
-                                        onClick={(e) => this.moveFrameTo(e)}
-                                        x={-((this.state.frameAxisLength.length * 10) / 2)}
-                                        y={91 + this.state.panningY + "%"}
-                                        width={this.state.frameAxisLength.length * 10}
-                                        height="9%"
-                                        fill="#222"
-                                        style={{ cursor: "pointer" }}
-                                    ></rect>
+                                    <rect onClick={(e) => this.moveFrameTo(e)} x={-((this.state.frameAxisLength.length * 10) / 2)} y={91 + this.state.panningY + "%"} width={this.state.frameAxisLength.length * 10} height="9%" fill="#222" style={{ cursor: "pointer" }}></rect>
 
                                     {this.state.frameAxisLength.map((f, i) => (
                                         <svg key={i} x="0" y={96 + this.state.panningY + "%"} className="frame-contain">
-                                            <text
-                                                x={f.value}
-                                                y="1px"
-                                                dx="2px"
-                                                style={{ fontSize: `${0.2 * this.state.scale}em` }}
-                                            >
+                                            <text x={f.value} y="1px" dx="2px" style={{ fontSize: `${0.2 * this.state.scale}em` }}>
                                                 {Math.round((f.label * 10) / this._pixelFrameUnit)}
                                             </text>
                                             <line x1={f.value} y1="0" x2={f.value} y2="5%"></line>
 
-                                            {f.value % this.state.fps === 0 && f.value !== 0 ? (
-                                                <line
-                                                    x1={f.value * this._pixelFrameUnit}
-                                                    y1="-100%"
-                                                    x2={f.value * this._pixelFrameUnit}
-                                                    y2="5%"
-                                                ></line>
-                                            ) : null}
+                                            {f.value % this.state.fps === 0 && f.value !== 0 ? <line x1={f.value * this._pixelFrameUnit} y1="-100%" x2={f.value * this._pixelFrameUnit} y2="5%"></line> : null}
                                         </svg>
                                     ))}