Stop Animation on Curve Edition

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

@@ -14,6 +14,7 @@ require("./curveEditor.scss");
 
 interface IAnimationCurveEditorComponentProps {
     close: (event: any) => void;
+    playOrPause: () => void;
     title: string;
     animations: Animation[];
     entityName: string;
@@ -21,106 +22,107 @@ interface IAnimationCurveEditorComponentProps {
     entity: IAnimatable;
 }
 
-export class AnimationCurveEditorComponent extends React.Component<IAnimationCurveEditorComponentProps, { animations: Animation[], animationName: string, animationTargetProperty:string, isOpen: boolean, selected: Animation, currentPathData: string | undefined, svgKeyframes: IKeyframeSvgPoint[] | undefined }> {
+export class AnimationCurveEditorComponent extends React.Component<IAnimationCurveEditorComponentProps, { animations: Animation[], animationName: string, animationTargetProperty: string, isOpen: boolean, selected: Animation, currentPathData: string | undefined, svgKeyframes: IKeyframeSvgPoint[] | undefined }> {
 
     readonly _heightScale: number = 100;
     private _newAnimations: Animation[] = [];
     private _svgKeyframes: IKeyframeSvgPoint[] = [];
     private _frames: Vector2[] = [];
+    private _isPlaying: boolean = false;
     constructor(props: IAnimationCurveEditorComponentProps) {
         super(props);
-        this.state = { animations: this._newAnimations,selected: this.props.animations[0], isOpen: true, currentPathData: this.getPathData(this.props.animations[0]), svgKeyframes: this._svgKeyframes, animationTargetProperty: 'position.x', animationName: "" }
+        this.state = { animations: this._newAnimations, selected: this.props.animations[0], isOpen: true, currentPathData: this.getPathData(this.props.animations[0]), svgKeyframes: this._svgKeyframes, animationTargetProperty: 'position.x', animationName: "" }
 
     }
 
-    handleNameChange(event: React.ChangeEvent<HTMLInputElement>){
+    handleNameChange(event: React.ChangeEvent<HTMLInputElement>) {
         event.preventDefault();
-        this.setState({animationName: event.target.value});
+        this.setState({ animationName: event.target.value });
     }
 
-    handlePropertyChange(event: React.ChangeEvent<HTMLInputElement>){
+    handlePropertyChange(event: React.ChangeEvent<HTMLInputElement>) {
         event.preventDefault();
-        this.setState({animationTargetProperty: event.target.value});
+        this.setState({ animationTargetProperty: event.target.value });
     }
 
-    addAnimation(event: React.MouseEvent<HTMLDivElement>){
+    addAnimation(event: React.MouseEvent<HTMLDivElement>) {
         event.preventDefault();
-        if (this.state.animationName != "" && this.state.animationTargetProperty != ""){
+        if (this.state.animationName != "" && this.state.animationTargetProperty != "") {
             let animation = new Animation(this.state.animationName, this.state.animationTargetProperty, 30, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE);
 
-            var keys = []; 
-              keys.push({
-                frame: 0,
-                value: 1
-              });
+            var keys = [];
+            keys.push({
+                frame: 0,
+                value: 1
+            });
 
-              keys.push({
-                frame: 100,
-                value: 1
-              });
+            keys.push({
+                frame: 100,
+                value: 1
+            });
 
 
             animation.setKeys(keys);
 
-            var bezierEase = new BezierCurveEase(10,0,10,0);
+            var bezierEase = new BezierCurveEase(10, 0, 10, 0);
             bezierEase.setEasingMode(EasingFunction.EASINGMODE_EASEINOUT);
             animation.setEasingFunction((bezierEase as unknown) as EasingFunction);
 
             // Need to redefine/refactor not to update the prop collection
             (this.props.entity as IAnimatable).animations?.push(animation);
-           
+
         }
     }
 
-    addKeyFrame(event: React.MouseEvent<SVGSVGElement>){
+    addKeyFrame(event: React.MouseEvent<SVGSVGElement>) {
 
         event.preventDefault();
 
-        if (event.button === 2){
+        if (event.button === 2) {
 
-        var svg = event.target as SVGSVGElement;
+            var svg = event.target as SVGSVGElement;
 
-        var pt = svg.createSVGPoint();
+            var pt = svg.createSVGPoint();
 
-        pt.x = event.clientX;
-        pt.y = event.clientY;
+            pt.x = event.clientX;
+            pt.y = event.clientY;
 
-        var inverse = svg.getScreenCTM()?.inverse();
+            var inverse = svg.getScreenCTM()?.inverse();
 
-        var cursorpt =  pt.matrixTransform(inverse);
+            var cursorpt = pt.matrixTransform(inverse);
 
-        var currentAnimation = this.state.selected;
+            var currentAnimation = this.state.selected;
 
-        var keys = currentAnimation.getKeys();
+            var keys = currentAnimation.getKeys();
 
-        var height = 100;
-        var middle = (height / 2);
+            var height = 100;
+            var middle = (height / 2);
 
-        var keyValue;
+            var keyValue;
 
-        if (cursorpt.y < middle){
-            keyValue = 1 + ((100/cursorpt.y) * .1)
-        }
+            if (cursorpt.y < middle) {
+                keyValue = 1 + ((100 / cursorpt.y) * .1)
+            }
 
-        if (cursorpt.y > middle){
-            keyValue = 1 - ((100/cursorpt.y) * .1)
-        }
+            if (cursorpt.y > middle) {
+                keyValue = 1 - ((100 / cursorpt.y) * .1)
+            }
 
-        keys.push({ frame: cursorpt.x, value: keyValue });
+            keys.push({ frame: cursorpt.x, value: keyValue });
 
-        currentAnimation.setKeys(keys);
+            currentAnimation.setKeys(keys);
 
-        this.selectAnimation(currentAnimation);
-     }
+            this.selectAnimation(currentAnimation);
+        }
     }
 
-    updateKeyframe(keyframe: Vector2, index: number){
+    updateKeyframe(keyframe: Vector2, index: number) {
 
         let anim = this.state.selected as Animation;
         var keys: IAnimationKey[] = [];
 
         var svgKeyframes = this.state.svgKeyframes?.map((k, i) => {
-            if (i === index){
+            if (i === index) {
                 k.keyframePoint.x = keyframe.x;
                 k.keyframePoint.y = keyframe.y;
             }
@@ -130,28 +132,28 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
 
             var keyValue;
 
-            if (k.keyframePoint.y < middle){
-                keyValue = 1 + ((100/k.keyframePoint.y) * .1)
+            if (k.keyframePoint.y < middle) {
+                keyValue = 1 + ((100 / k.keyframePoint.y) * .1)
             }
 
-            if (k.keyframePoint.y > middle){
-                keyValue = 1 - ((100/k.keyframePoint.y) * .1)
+            if (k.keyframePoint.y > middle) {
+                keyValue = 1 - ((100 / k.keyframePoint.y) * .1)
             }
 
 
-            keys.push({frame: k.keyframePoint.x, value: keyValue})
+            keys.push({ frame: k.keyframePoint.x, value: keyValue })
             return k;
         });
         anim.setKeys(keys);
 
-        this.setState({ svgKeyframes: svgKeyframes})
+        this.setState({ svgKeyframes: svgKeyframes })
 
     }
 
     getAnimationProperties(animation: Animation) {
         let easingType, easingMode;
         let easingFunction: EasingFunction = animation.getEasingFunction() as EasingFunction;
-        if (easingFunction === undefined){
+        if (easingFunction === undefined) {
             easingType = undefined
             easingMode = undefined;
         } else {
@@ -175,37 +177,37 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
         const startKey = keyframes[0];
 
         // This assumes the startkey is always 0... beed to change this
-        let middle = this._heightScale/2;
+        let middle = this._heightScale / 2;
 
         // START OF LINE/CURVE
         let data: string | undefined = `M${startKey.frame}, ${this._heightScale - (startKey.value * middle)}`;
 
-        if (easingType === undefined && easingMode === undefined){
+        if (easingType === undefined && easingMode === undefined) {
             data = this.linearInterpolation(keyframes, data, middle);
         } else {
             let easingFunction = animation.getEasingFunction();
-            
+
             data = this.curvePath(keyframes, data, middle, easingFunction as EasingFunction)
         }
 
-      
+
 
         return data;
 
     }
 
-    drawAllFrames(initialKey: IAnimationKey,endKey: IAnimationKey, easingFunction: EasingFunction) {
+    drawAllFrames(initialKey: IAnimationKey, endKey: IAnimationKey, easingFunction: EasingFunction) {
 
         let i = initialKey.frame;
-        
-        for (i; i < endKey.frame; i++){
 
-            (i * 100/ endKey.frame)
+        for (i; i < endKey.frame; i++) {
+
+            (i * 100 / endKey.frame)
 
             let dy = easingFunction.easeInCore(i);
-            let value = this._heightScale - (dy * (this._heightScale/2));
-            this. _frames.push(new Vector2(i,value));
-           
+            let value = this._heightScale - (dy * (this._heightScale / 2));
+            this._frames.push(new Vector2(i, value));
+
         }
 
     }
@@ -219,7 +221,7 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
         keyframes.forEach((key, i) => {
 
             // Gets previous initial point of curve segment
-            var pointA =  new Vector2(0, 0);
+            var pointA = new Vector2(0, 0);
             if (i === 0) {
                 pointA.x = key.frame;
                 pointA.y = this._heightScale - (key.value * middle);
@@ -229,7 +231,7 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
             } else {
                 pointA.x = keyframes[i - 1].frame;
                 pointA.y = this._heightScale - (keyframes[i - 1].value * middle)
-            
+
                 // Gets the end point of this curve segment
                 var pointB = new Vector2(key.frame, this._heightScale - (key.value * middle));
 
@@ -256,16 +258,16 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
                 let intermediatePoint25 = new Vector2(((pointB.x - pointA.x) * u) + pointA.x, yInt25);
                 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);
 
-                if (controlPoints === undefined){
+                if (controlPoints === undefined) {
                     console.log("error getting bezier control points");
                 } else {
-    
+
                     this.setKeyframePoint(controlPoints, i, keyframes.length);
-    
+
                     data += ` C${controlPoints[1].x} ${controlPoints[1].y} ${controlPoints[2].x} ${controlPoints[2].y} ${controlPoints[3].x} ${controlPoints[3].y}`
 
                 }
@@ -277,26 +279,25 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
 
     }
 
-    
 
-    renderPoints(updatedSvgKeyFrame: IKeyframeSvgPoint, index: number){
 
+    renderPoints(updatedSvgKeyFrame: IKeyframeSvgPoint, index: number) {
 
         let animation = this.state.selected as Animation;
 
         let keys = [...animation.getKeys()];
 
         let newFrame = 0;
-        if (updatedSvgKeyFrame.keyframePoint.x !== 0){
-            if (updatedSvgKeyFrame.keyframePoint.x > 0 && updatedSvgKeyFrame.keyframePoint.x < 1){
+        if (updatedSvgKeyFrame.keyframePoint.x !== 0) {
+            if (updatedSvgKeyFrame.keyframePoint.x > 0 && updatedSvgKeyFrame.keyframePoint.x < 1) {
                 newFrame = 1;
-            }else {
+            } else {
                 newFrame = Math.round(updatedSvgKeyFrame.keyframePoint.x);
             }
         }
 
         keys[index].frame = newFrame; // This value comes as percentage/frame/time
-        keys[index].value =  ((this._heightScale - updatedSvgKeyFrame.keyframePoint.y)/ this._heightScale)*2; // this value comes inverted svg from 0 = 100 to 100 = 0
+        keys[index].value = ((this._heightScale - updatedSvgKeyFrame.keyframePoint.y) / this._heightScale) * 2; // this value comes inverted svg from 0 = 100 to 100 = 0
 
         animation.setKeys(keys);
 
@@ -304,23 +305,23 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
 
     }
 
-    
+
     linearInterpolation(keyframes: IAnimationKey[], data: string, middle: number): string {
         keyframes.forEach((key, i) => {
 
-            var point =  new Vector2(0, 0);
+            var point = new Vector2(0, 0);
             point.x = key.frame;
             point.y = this._heightScale - (key.value * middle);
             this.setKeyframePointLinear(point, i);
 
-            if (i !== 0) { 
+            if (i !== 0) {
                 data += ` L${point.x} ${point.y}`
             }
         });
         return data;
     }
 
-    setKeyframePointLinear(point: Vector2,index: number){
+    setKeyframePointLinear(point: Vector2, index: number) {
         let svgKeyframe = { keyframePoint: point, rightControlPoint: null, leftControlPoint: null, id: index.toString() }
         this._svgKeyframes.push(svgKeyframe);
     }
@@ -328,34 +329,48 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
     setKeyframePoint(controlPoints: Vector2[], index: number, keyframesCount: number) {
 
         let svgKeyframe;
-        if (index === 0){
+        if (index === 0) {
             svgKeyframe = { keyframePoint: controlPoints[0], rightControlPoint: null, leftControlPoint: null, id: index.toString() }
-        }else {
-            this._svgKeyframes[index-1].rightControlPoint = controlPoints[1];
+        } else {
+            this._svgKeyframes[index - 1].rightControlPoint = controlPoints[1];
             svgKeyframe = { keyframePoint: controlPoints[3], rightControlPoint: null, leftControlPoint: controlPoints[2], id: index.toString() }
         }
 
         this._svgKeyframes.push(svgKeyframe);
     }
 
+    isAnimationPlaying() {
+          this._isPlaying = this.props.scene.getAllAnimatablesByTarget(this.props.entity).length > 0;
+           if (this._isPlaying){
+            this.props.playOrPause();
+           } else {
+               this._isPlaying = false;
+           }
+    }
+
     selectAnimation(animation: Animation) {
+
+        
+        this.isAnimationPlaying();
+
         this._svgKeyframes = [];
 
         const pathData = this.getPathData(animation);
         if (pathData === "") {
             console.log("no keyframes in this animation");
         }
+
         this.setState({ selected: animation, currentPathData: pathData, svgKeyframes: this._svgKeyframes });
 
     }
 
-    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;
-        let d=0.0;
-        let det=0.0;
+        let a = 0.0;
+        let b = 0.0;
+        let c = 0.0;
+        let d = 0.0;
+        let det = 0.0;
         let q1: Vector2 = new Vector2();
         let q2: Vector2 = new Vector2();
         let controlA: Vector2 = p0;
@@ -363,28 +378,28 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
         let controlC: Vector2 = new Vector2();
         let controlD: Vector2 = p3;
 
-        if ( (u<=0.0) || (u>=1.0) || (v<=0.0) || (v>=1.0) || (u>=v) ){
+        if ((u <= 0.0) || (u >= 1.0) || (v <= 0.0) || (v >= 1.0) || (u >= v)) {
             return undefined;
         }
 
-        a = 3*(1-u)*(1-u)*u; b = 3*(1-u)*u*u;
-        c = 3*(1-v)*(1-v)*v; d = 3*(1-v)*v*v;
-        det = a*d - b*c;
+        a = 3 * (1 - u) * (1 - u) * u; b = 3 * (1 - u) * u * u;
+        c = 3 * (1 - v) * (1 - v) * v; d = 3 * (1 - v) * v * v;
+        det = a * d - b * c;
 
         if (det == 0.0) return undefined;
 
-        q1.x = p1.x - ( (1-u)*(1-u)*(1-u)*p0.x + u*u*u*p3.x );
-        q1.y = p1.y - ( (1-u)*(1-u)*(1-u)*p0.y + u*u*u*p3.y );
-        
-        q2.x = p2.x - ( (1-v)*(1-v)*(1-v)*p0.x + v*v*v*p3.x );
-        q2.y = p2.y - ( (1-v)*(1-v)*(1-v)*p0.y + v*v*v*p3.y );
+        q1.x = p1.x - ((1 - u) * (1 - u) * (1 - u) * p0.x + u * u * u * p3.x);
+        q1.y = p1.y - ((1 - u) * (1 - u) * (1 - u) * p0.y + u * u * u * p3.y);
 
+        q2.x = p2.x - ((1 - v) * (1 - v) * (1 - v) * p0.x + v * v * v * p3.x);
+        q2.y = p2.y - ((1 - v) * (1 - v) * (1 - v) * p0.y + v * v * v * p3.y);
 
-        controlB.x = (d*q1.x - b*q2.x)/det;
-        controlB.y = (d*q1.y - b*q2.y)/det;
 
-        controlC.x = ((-c)*q1.x + a*q2.x)/det;
-        controlC.y = ((-c)*q1.y + a*q2.y)/det;
+        controlB.x = (d * q1.x - b * q2.x) / det;
+        controlB.y = (d * q1.y - b * q2.y) / det;
+
+        controlC.x = ((-c) * q1.x + a * q2.x) / det;
+        controlC.y = ((-c) * q1.y + a * q2.y) / det;
 
         return [controlA, controlB, controlC, controlD];
 
@@ -400,22 +415,22 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
                     </div>
                 </div>
                 <div className="content">
-                  
+
                     <div className="animation-list">
-                
-                    <div>
-                        <div>
-                        <label>Animation Name</label>
-                        <input type="text" value={this.state.animationName} onChange={(e) => this.handleNameChange(e)}></input>
-                        </div>
+
                         <div>
-                        <label>Target Property</label>
-                        <input type="text" value={this.state.animationTargetProperty} onChange={(e) => this.handlePropertyChange(e)}></input>
+                            <div>
+                                <label>Animation Name</label>
+                                <input type="text" value={this.state.animationName} onChange={(e) => this.handleNameChange(e)}></input>
+                            </div>
+                            <div>
+                                <label>Target Property</label>
+                                <input type="text" value={this.state.animationTargetProperty} onChange={(e) => this.handlePropertyChange(e)}></input>
+                            </div>
+                            <div className="add" onClick={(e) => this.addAnimation(e)}>
+                                <FontAwesomeIcon icon={faPlusCircle} />
+                            </div>
                         </div>
-                        <div className="add" onClick={(e) => this.addAnimation(e)}>
-                        <FontAwesomeIcon icon={faPlusCircle} />
-                    </div>
-                    </div>
 
                         <h2>{this.props.entityName}</h2>
                         <ul>
@@ -435,9 +450,9 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
                     </div>
                     <div className="graph-chart">
 
-                           { this.state.svgKeyframes && <SvgDraggableArea keyframeSvgPoints={this.state.svgKeyframes} updatePosition={(updatedSvgKeyFrame: IKeyframeSvgPoint,index: number) => this.renderPoints(updatedSvgKeyFrame, index)}>
-                       
-                             {/* Frame Labels  */}
+                        {this.state.svgKeyframes && <SvgDraggableArea keyframeSvgPoints={this.state.svgKeyframes} updatePosition={(updatedSvgKeyFrame: IKeyframeSvgPoint, index: number) => this.renderPoints(updatedSvgKeyFrame, index)}>
+
+                            {/* Frame Labels  */}
                             <text x="10" y="0" dx="-1em" style={{ font: 'italic 0.2em sans-serif' }}>10</text>
                             <text x="20" y="0" dx="-1em" style={{ font: 'italic 0.2em sans-serif' }}>20</text>
                             <text x="30" y="0" dx="-1em" style={{ font: 'italic 0.2em sans-serif' }}>30</text>
@@ -484,16 +499,16 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
                             { /* Single Curve -Modify this for multiple selection and view  */}
                             <path id="curve" d={this.state.currentPathData} style={{ stroke: 'red', fill: 'none', strokeWidth: '0.5' }}></path>
 
-                            { this._frames && this._frames.map(frame => 
-                             <svg x={frame.x} y={frame.y} style={{overflow:'visible'}}>
-                             <circle cx="0" cy="0"  r="2" stroke="black" strokeWidth="1" fill="white"  />
-                             </svg>
+                            {this._frames && this._frames.map(frame =>
+                                <svg x={frame.x} y={frame.y} style={{ overflow: 'visible' }}>
+                                    <circle cx="0" cy="0" r="2" stroke="black" strokeWidth="1" fill="white" />
+                                </svg>
 
                             )}
-                        
+
                         </SvgDraggableArea>
 
-                        } 
+                        }
 
                         Animation name: {this.state.selected.name}
 

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

@@ -160,7 +160,6 @@ export class AnimationGridComponent extends React.Component<IAnimationGridCompon
             }
         }
 
-
         let animations = animatable.animations;
 
         return (
@@ -204,7 +203,14 @@ export class AnimationGridComponent extends React.Component<IAnimationGridCompon
                                     onOpen={(window: Window) => { window.console.log("Window opened!!") }}
                                     onClose={(window: Window) => this.onCloseAnimationCurveEditor(window)}>
 
-                                    <AnimationCurveEditorComponent title="Animations Curve Editor" scene={this.props.scene} entity={animatableAsAny} entityName={animatableAsAny.id} close={(event) => this.onCloseAnimationCurveEditor(event.view)} animations={animations}/>
+                                    <AnimationCurveEditorComponent 
+                                        title="Animations Curve Editor" 
+                                        scene={this.props.scene} 
+                                        entity={animatableAsAny} 
+                                        entityName={animatableAsAny.id} 
+                                        close={(event) => this.onCloseAnimationCurveEditor(event.view)} 
+                                        playOrPause={() => this.playOrPause()}
+                                        animations={animations} />
                                 </PopupComponent>
                             }
                         </LineContainerComponent>
@@ -249,5 +255,4 @@ export class AnimationGridComponent extends React.Component<IAnimationGridCompon
             </div>
         );
     }
-
 }

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

@@ -7,7 +7,7 @@ interface ISvgDraggableAreaProps {
     updatePosition: (updatedKeyframe: IKeyframeSvgPoint, index: number) => void
 }
 
-export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps>{ 
+export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps>{
 
     private _active: boolean;
     private _isCurrentPointControl: string;
@@ -18,115 +18,105 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps>{
         super(props);
         this._currentPointIndex = -1;
         this._isCurrentPointControl = "";
-        this._draggableArea = React.createRef();     
+        this._draggableArea = React.createRef();
     }
 
-   
-    dragStart(e: React.TouchEvent<SVGSVGElement>) : void;
-    dragStart(e: React.MouseEvent<SVGSVGElement, MouseEvent>) : void;
+    dragStart(e: React.TouchEvent<SVGSVGElement>): void;
+    dragStart(e: React.MouseEvent<SVGSVGElement, MouseEvent>): void;
     dragStart(e: any): void {
-        e.preventDefault();  
-        if (e.target.classList.contains("draggable")){
+        e.preventDefault();
+        if (e.target.classList.contains("draggable")) {
             this._active = true;
             this._currentPointIndex = parseInt(e.target.getAttribute('data-id'));
 
-            if (e.target.classList.contains("control-point")){
+            if (e.target.classList.contains("control-point")) {
                 this._isCurrentPointControl = e.target.getAttribute("type");
             }
-        } 
+        }
     }
 
-    drag(e: React.TouchEvent<SVGSVGElement>) : void;
-    drag(e: React.MouseEvent<SVGSVGElement, MouseEvent>) : void;
+    drag(e: React.TouchEvent<SVGSVGElement>): void;
+    drag(e: React.MouseEvent<SVGSVGElement, MouseEvent>): void;
     drag(e: any): void {
         if (this._active) {
-        
-          e.preventDefault();
 
-          var coord = this.getMousePosition(e);
+            e.preventDefault();
 
-          if (coord !== undefined){
-         
-            var newPoints = [...this.props.keyframeSvgPoints];
+            var coord = this.getMousePosition(e);
 
-            if (this._isCurrentPointControl === "left"){
-                newPoints[this._currentPointIndex].leftControlPoint = coord;
-            } else if (this._isCurrentPointControl === "right"){
-                newPoints[this._currentPointIndex].rightControlPoint = coord;
-            } else {
-                newPoints[this._currentPointIndex].keyframePoint = coord;
-            }
+            if (coord !== undefined) {
+
+                var newPoints = [...this.props.keyframeSvgPoints];
 
-            this.props.updatePosition(newPoints[this._currentPointIndex], this._currentPointIndex);
+                if (this._isCurrentPointControl === "left") {
+                    newPoints[this._currentPointIndex].leftControlPoint = coord;
+                } else if (this._isCurrentPointControl === "right") {
+                    newPoints[this._currentPointIndex].rightControlPoint = coord;
+                } else {
+                    newPoints[this._currentPointIndex].keyframePoint = coord;
+                }
 
-          }     
+                this.props.updatePosition(newPoints[this._currentPointIndex], this._currentPointIndex);
 
+            }
         }
     }
 
     dragEnd(e: React.TouchEvent<SVGSVGElement>): void;
     dragEnd(e: React.MouseEvent<SVGSVGElement, MouseEvent>): void;
-    dragEnd(e: any): void  {
-        e.preventDefault(); 
+    dragEnd(e: any): void {
+        e.preventDefault();
         this._active = false;
         this._currentPointIndex = -1;
         this._isCurrentPointControl = "";
     }
 
-
-
-    getMousePosition(e: React.TouchEvent<SVGSVGElement>) : Vector2 | undefined;
-    getMousePosition(e: React.MouseEvent<SVGSVGElement, MouseEvent>) : Vector2 | undefined;
+    getMousePosition(e: React.TouchEvent<SVGSVGElement>): Vector2 | undefined;
+    getMousePosition(e: React.MouseEvent<SVGSVGElement, MouseEvent>): Vector2 | undefined;
     getMousePosition(e: any): Vector2 | undefined {
 
         if (e.touches) { e = e.touches[0]; }
 
-        if (this._draggableArea.current){
+        if (this._draggableArea.current) {
             var svg = this._draggableArea.current as SVGSVGElement;
             var CTM = svg.getScreenCTM();
-            if (CTM){
+            if (CTM) {
                 return new Vector2((e.clientX - CTM.e) / CTM.a, (e.clientY - CTM.f) / CTM.d);
             } else {
                 return undefined;
             }
-
         } else {
             return undefined;
         }
-       
-      }
-
-
+    }
 
     render() {
         return (
-        <>
-            <svg className="linear" style={{border: '1px solid black'}} ref={this._draggableArea} 
-            
-            onMouseMove={(e) => this.drag(e)}  
-            onTouchMove = {(e) => this.drag(e)} 
-            onTouchStart = {(e) => this.dragStart(e)}
-            onTouchEnd  ={(e) => this.dragEnd(e)}
-            
-            onMouseDown ={(e) => this.dragStart(e)}
-            onMouseUp  ={(e) => this.dragEnd(e)}
-            onMouseLeave = {(e) => this.dragEnd(e)}
-            // Add way to add new keyframe
-            
-            viewBox="0 0 100 100" preserveAspectRatio="none">
-
-                {this.props.children}
-                { this.props.keyframeSvgPoints.map((keyframe, i) => 
-                    <KeyframeSvgPoint key={i} id={i.toString()} keyframePoint={keyframe.keyframePoint} leftControlPoint={keyframe.leftControlPoint} rightControlPoint={keyframe.rightControlPoint}/>
-                )}
-            </svg>
-        </>)
+            <>
+                <svg className="linear" style={{ border: '1px solid black' }} ref={this._draggableArea}
+
+                    onMouseMove={(e) => this.drag(e)}
+                    onTouchMove={(e) => this.drag(e)}
+                    onTouchStart={(e) => this.dragStart(e)}
+                    onTouchEnd={(e) => this.dragEnd(e)}
+
+                    onMouseDown={(e) => this.dragStart(e)}
+                    onMouseUp={(e) => this.dragEnd(e)}
+                    onMouseLeave={(e) => this.dragEnd(e)}
+                    // Add way to add new keyframe
+
+                    viewBox="0 0 100 100" preserveAspectRatio="none">
+
+                    {this.props.children}
+                    {this.props.keyframeSvgPoints.map((keyframe, i) =>
+                        <KeyframeSvgPoint key={i} id={i.toString()} keyframePoint={keyframe.keyframePoint} leftControlPoint={keyframe.leftControlPoint} rightControlPoint={keyframe.rightControlPoint} />
+                    )}
+                </svg>
+            </>)
     }
-
-
 }
 
 
 
- 
+