Fix formatting and unused functions

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

@@ -147,11 +147,11 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
         this.setState({ currentValue: parseFloat(event.target.value) }, () => {
             let animation = this.state.selected;
             let keys = animation.getKeys();
-            
+
             let isKeyframe = keys.find(k => k.frame === this.state.currentFrame);
-            if (isKeyframe){
+            if (isKeyframe) {
                 let updatedKeys = keys.map(k => {
-                    if (k.frame === this.state.currentFrame){
+                    if (k.frame === this.state.currentFrame) {
                         k.value = this.state.currentValue;
                     }
                     return k;
@@ -159,7 +159,7 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
                 this.state.selected.setKeys(updatedKeys);
                 this.selectAnimation(animation);
             }
-        });        
+        });
     }
 
     handleFrameChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -187,28 +187,28 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
             if (matchTypeTargetProperty.length === 1) {
                 let match = (this.props.entity as any)[matchTypeTargetProperty[0]];
 
-                if (match){
-                switch (match.constructor.name) {
-                    case "Vector2":
-                        animationDataType === Animation.ANIMATIONTYPE_VECTOR2 ? matched = true : matched = false;
-                        break;
-                    case "Vector3":
-                        animationDataType === Animation.ANIMATIONTYPE_VECTOR3 ? matched = true : matched = false;
-                        break;
-                    case "Quaternion":
-                        animationDataType === Animation.ANIMATIONTYPE_QUATERNION ? matched = true : matched = false;
-                        break;
-                    case "Color3":
-                        animationDataType === Animation.ANIMATIONTYPE_COLOR3 ? matched = true : matched = false;
-                        break;
-                    case "Color4":
-                        animationDataType === Animation.ANIMATIONTYPE_COLOR4 ? matched = true : matched = false;
-                        break;
-                    case "Size":
-                        animationDataType === Animation.ANIMATIONTYPE_SIZE ? matched = true : matched = false;
-                        break;
-                    default: console.log("not recognized");
-                        break;
+                if (match) {
+                    switch (match.constructor.name) {
+                        case "Vector2":
+                            animationDataType === Animation.ANIMATIONTYPE_VECTOR2 ? matched = true : matched = false;
+                            break;
+                        case "Vector3":
+                            animationDataType === Animation.ANIMATIONTYPE_VECTOR3 ? matched = true : matched = false;
+                            break;
+                        case "Quaternion":
+                            animationDataType === Animation.ANIMATIONTYPE_QUATERNION ? matched = true : matched = false;
+                            break;
+                        case "Color3":
+                            animationDataType === Animation.ANIMATIONTYPE_COLOR3 ? matched = true : matched = false;
+                            break;
+                        case "Color4":
+                            animationDataType === Animation.ANIMATIONTYPE_COLOR4 ? matched = true : matched = false;
+                            break;
+                        case "Size":
+                            animationDataType === Animation.ANIMATIONTYPE_SIZE ? matched = true : matched = false;
+                            break;
+                        default: console.log("not recognized");
+                            break;
                     }
                 } else {
                     this.setState({ notification: `The selected entity doesn't have a ${matchTypeTargetProperty[0]} property` });
@@ -235,38 +235,38 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
                         inTangent = 0;
                         break;
                     case Animation.ANIMATIONTYPE_VECTOR2:
-                        startValue = new Vector2(1,1);
-                        endValue = new Vector2(1,1);
+                        startValue = new Vector2(1, 1);
+                        endValue = new Vector2(1, 1);
                         outTangent = Vector2.Zero();
                         inTangent = Vector2.Zero();
                         break;
                     case Animation.ANIMATIONTYPE_VECTOR3:
-                        startValue = new Vector3(1,1,1);
-                        endValue = new Vector3(1,1,1);
+                        startValue = new Vector3(1, 1, 1);
+                        endValue = new Vector3(1, 1, 1);
                         outTangent = Vector3.Zero();
                         inTangent = Vector3.Zero();
                         break;
                     case Animation.ANIMATIONTYPE_QUATERNION:
-                        startValue = new Quaternion(1,1,1,1);
-                        endValue = new Quaternion(1,1,1,1);
+                        startValue = new Quaternion(1, 1, 1, 1);
+                        endValue = new Quaternion(1, 1, 1, 1);
                         outTangent = Quaternion.Zero();
                         inTangent = Quaternion.Zero();
                         break;
                     case Animation.ANIMATIONTYPE_COLOR3:
-                        startValue = new Color3(1,1,1);
-                        endValue = new Color3(1,1,1);
-                        outTangent = new Color3(0,0,0);
-                        inTangent = new Color3(0,0,0);
+                        startValue = new Color3(1, 1, 1);
+                        endValue = new Color3(1, 1, 1);
+                        outTangent = new Color3(0, 0, 0);
+                        inTangent = new Color3(0, 0, 0);
                         break;
                     case Animation.ANIMATIONTYPE_COLOR4:
-                        startValue = new Color4(1,1,1,1);
-                        endValue = new Color4(1,1,1,1);
-                        outTangent = new Color4(0,0,0,0);
-                        inTangent = new Color4(0,0,0,0);
+                        startValue = new Color4(1, 1, 1, 1);
+                        endValue = new Color4(1, 1, 1, 1);
+                        outTangent = new Color4(0, 0, 0, 0);
+                        inTangent = new Color4(0, 0, 0, 0);
                         break;
                     case Animation.ANIMATIONTYPE_SIZE:
-                        startValue = new Size(1,1);
-                        endValue = new Size(1,1);
+                        startValue = new Size(1, 1);
+                        endValue = new Size(1, 1);
                         outTangent = Size.Zero();
                         inTangent = Size.Zero();
                         break;
@@ -306,32 +306,32 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
         this.setState({ notification: "" });
     }
 
-    selectKeyframe(id: string){
+    selectKeyframe(id: string) {
         let updatedKeyframes = this.state.svgKeyframes?.map(kf => {
-           if (kf.id === id){
-               kf.selected = !kf.selected
-           } 
-           return kf;
+            if (kf.id === id) {
+                kf.selected = !kf.selected
+            }
+            return kf;
         });
         this.setState({ svgKeyframes: updatedKeyframes });
-        
+
     }
 
     selectedControlPoint(type: string, id: string) {
         let updatedKeyframes = this.state.svgKeyframes?.map(kf => {
-            if (kf.id === id){
-               if (type === "left"){
-                    kf.isLeftActive =  !kf.isLeftActive;
+            if (kf.id === id) {
+                if (type === "left") {
+                    kf.isLeftActive = !kf.isLeftActive;
                     kf.isRightActive = false;
-               }
-               if (type === "right"){
-                    kf.isRightActive =  !kf.isRightActive;
-                    kf.isLeftActive =  false;
-               }
-            } 
+                }
+                if (type === "right") {
+                    kf.isRightActive = !kf.isRightActive;
+                    kf.isLeftActive = false;
+                }
+            }
             return kf;
-         });
-         this.setState({ svgKeyframes: updatedKeyframes });
+        });
+        this.setState({ svgKeyframes: updatedKeyframes });
     }
 
     addKeyframeClick() {
@@ -457,7 +457,7 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
 
     getPathData(animation: Animation) {
 
-         // Check if Flat Tangent is active (tangents are set to zero)
+        // Check if Flat Tangent is active (tangents are set to zero)
         // Check if Unweighted mode is active (Drag in circle max 90deg - Reflect in opposite point) (selected and opposite tangents move)
         // Check if Unweighted mode is active and broken mode is active. (Only one tangent moves)
         // Check if Bezier Mode is active and reflection in opposite point // This assumes somekind of weights... maybe for vNext
@@ -534,13 +534,13 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
 
                     let nextKeyframe = keyframes[i + 1];
                     let prevKeyframe = keyframes[i - 1];
-                    if (nextKeyframe !== undefined){
-                        let distance = keyframes[i+1].frame - key.frame;
+                    if (nextKeyframe !== undefined) {
+                        let distance = keyframes[i + 1].frame - key.frame;
                         defaultWeight = distance * .33;
-                    } 
-                    
+                    }
+
                     if (prevKeyframe !== undefined) {
-                        let distance = key.frame - keyframes[i-1].frame;
+                        let distance = key.frame - keyframes[i - 1].frame;
                         defaultWeight = distance * .33;
                     }
 
@@ -564,16 +564,6 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
 
     curvePathWithTangents(keyframes: IAnimationKey[], data: string, middle: number, type: number) {
 
-        switch (type) {
-            case Animation.ANIMATIONTYPE_FLOAT:
-                // value float
-                break;
-            case Animation.ANIMATIONTYPE_VECTOR3:
-                // value float
-                break;
-        }
-
-
         keyframes.forEach((key, i) => {
 
             let svgKeyframe;
@@ -583,52 +573,41 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
 
             var inT = key.inTangent === undefined ? null : key.inTangent;
             var outT = key.outTangent === undefined ? null : key.outTangent;
-            
+
             let y = this._heightScale - (key.value * middle);
 
             let nextKeyframe = keyframes[i + 1];
             let prevKeyframe = keyframes[i - 1];
-            if (nextKeyframe !== undefined){
-                let distance = keyframes[i+1].frame - key.frame;
+            if (nextKeyframe !== undefined) {
+                let distance = keyframes[i + 1].frame - key.frame;
                 defaultWeight = distance * .33;
-            } 
-            
+            }
+
             if (prevKeyframe !== undefined) {
-                let distance = key.frame - keyframes[i-1].frame;
+                let distance = key.frame - keyframes[i - 1].frame;
                 defaultWeight = distance * .33;
             }
-           
 
-            if (inT !== null){
+            if (inT !== null) {
                 let valueIn = (y * inT) + y;
                 inTangent = new Vector2(key.frame - defaultWeight, valueIn)
             } else {
                 inTangent = null;
             }
-            
-            if (outT !== null){
-            let valueOut = (y * outT) + y;
+
+            if (outT !== null) {
+                let valueOut = (y * outT) + y;
                 outTangent = new Vector2(key.frame + defaultWeight, valueOut);
             } else {
                 outTangent = null;
             }
 
-         
-
-            
-
             if (i === 0) {
-
- 
-
                 svgKeyframe = { keyframePoint: new Vector2(key.frame, this._heightScale - (key.value * middle)), rightControlPoint: outTangent, leftControlPoint: null, id: i.toString(), selected: false, isLeftActive: false, isRightActive: false }
-                if (outTangent !== null){
+                if (outTangent !== null) {
                     data += ` C${outTangent.x} ${outTangent.y} `;
                 }
 
-       
-               
-
             } else {
 
                 svgKeyframe = { keyframePoint: new Vector2(key.frame, this._heightScale - (key.value * middle)), rightControlPoint: outTangent, leftControlPoint: inTangent, id: i.toString(), selected: false, isLeftActive: false, isRightActive: false }
@@ -641,21 +620,14 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
 
             }
 
-            if (this.state){
+            if (this.state) {
                 let prev = this.state.svgKeyframes?.find(kf => kf.id === i.toString());
-                if (prev){
-                svgKeyframe.isLeftActive = prev?.isLeftActive;
-                svgKeyframe.isRightActive = prev?.isRightActive;
-                svgKeyframe.selected = prev?.selected
+                if (prev) {
+                    svgKeyframe.isLeftActive = prev?.isLeftActive;
+                    svgKeyframe.isRightActive = prev?.isRightActive;
+                    svgKeyframe.selected = prev?.selected
                 }
-
-
             }
-                
-
-           
-           
-            
 
             this._svgKeyframes.push(svgKeyframe);
 
@@ -752,45 +724,43 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
         keys[index].value = ((this._heightScale - updatedSvgKeyFrame.keyframePoint.y) / this._heightScale) * 2; // this value comes inverted svg from 0 = 100 to 100 = 0
 
 
-        if (!this.state.isBrokenMode){
-            if (updatedSvgKeyFrame.isLeftActive){
+        if (!this.state.isBrokenMode) {
+            if (updatedSvgKeyFrame.isLeftActive) {
 
                 if (updatedSvgKeyFrame.leftControlPoint !== null) {
-                // Rotate 
-                let updatedValue = ((this._heightScale - updatedSvgKeyFrame.leftControlPoint.y) / this._heightScale) * 2;
+                    // Rotate 
+                    let updatedValue = ((this._heightScale - updatedSvgKeyFrame.leftControlPoint.y) / this._heightScale) * 2;
 
-                let keyframeValue = ((this._heightScale - updatedSvgKeyFrame.keyframePoint.y) / this._heightScale) * 2;
+                    let keyframeValue = ((this._heightScale - updatedSvgKeyFrame.keyframePoint.y) / this._heightScale) * 2;
 
-                keys[index].inTangent = keyframeValue - updatedValue;
+                    keys[index].inTangent = keyframeValue - updatedValue;
 
                     // Right control point if exists
-                    if (updatedSvgKeyFrame.rightControlPoint !== null)
-                    {
+                    if (updatedSvgKeyFrame.rightControlPoint !== null) {
                         // Sets opposite value
-                        keys[index].outTangent =  keys[index].inTangent * -1
+                        keys[index].outTangent = keys[index].inTangent * -1
                     }
 
                 }
-                
+
             }
 
-            if (updatedSvgKeyFrame.isRightActive){
+            if (updatedSvgKeyFrame.isRightActive) {
 
                 if (updatedSvgKeyFrame.rightControlPoint !== null) {
-                // Rotate 
-                let updatedValue = ((this._heightScale - updatedSvgKeyFrame.rightControlPoint.y) / this._heightScale) * 2;
+                    // Rotate 
+                    let updatedValue = ((this._heightScale - updatedSvgKeyFrame.rightControlPoint.y) / this._heightScale) * 2;
 
-                let keyframeValue = ((this._heightScale - updatedSvgKeyFrame.keyframePoint.y) / this._heightScale) * 2;
+                    let keyframeValue = ((this._heightScale - updatedSvgKeyFrame.keyframePoint.y) / this._heightScale) * 2;
 
-                keys[index].outTangent = keyframeValue - updatedValue;
+                    keys[index].outTangent = keyframeValue - updatedValue;
 
-                    if (updatedSvgKeyFrame.leftControlPoint !== null)
-                    {   // Sets opposite value
-                        keys[index].inTangent =  keys[index].outTangent * -1
+                    if (updatedSvgKeyFrame.leftControlPoint !== null) {   // Sets opposite value
+                        keys[index].inTangent = keys[index].outTangent * -1
                     }
 
                 }
-                
+
             }
         }
 
@@ -801,11 +771,6 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
 
     }
 
-    rotateTangent(direction: number, updatedKeyframe: IKeyframeSvgPoint){
-
-    }
-
-
     linearInterpolation(keyframes: IAnimationKey[], data: string, middle: number): string {
         keyframes.forEach((key, i) => {
 
@@ -822,7 +787,7 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
     }
 
     setKeyframePointLinear(point: Vector2, index: number) {
-        let svgKeyframe = { keyframePoint: point, rightControlPoint: null, leftControlPoint: null, id: index.toString(),selected: false, isLeftActive: false, isRightActive: false }
+        let svgKeyframe = { keyframePoint: point, rightControlPoint: null, leftControlPoint: null, id: index.toString(), selected: false, isLeftActive: false, isRightActive: false }
         this._svgKeyframes.push(svgKeyframe);
     }
 
@@ -830,10 +795,10 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
 
         let svgKeyframe;
         if (index === 0) {
-            svgKeyframe = { keyframePoint: controlPoints[0], rightControlPoint: null, leftControlPoint: null, id: index.toString(),selected: false, isLeftActive: false, isRightActive: false }
+            svgKeyframe = { keyframePoint: controlPoints[0], rightControlPoint: null, leftControlPoint: null, id: index.toString(), selected: false, isLeftActive: false, isRightActive: false }
         } else {
             this._svgKeyframes[index - 1].rightControlPoint = controlPoints[1];
-            svgKeyframe = { keyframePoint: controlPoints[3], rightControlPoint: null, leftControlPoint: controlPoints[2], id: index.toString(),selected: false, isLeftActive: false, isRightActive: false }
+            svgKeyframe = { keyframePoint: controlPoints[3], rightControlPoint: null, leftControlPoint: controlPoints[2], id: index.toString(), selected: false, isLeftActive: false, isRightActive: false }
         }
 
         this._svgKeyframes.push(svgKeyframe);
@@ -853,11 +818,11 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
     }
 
     // Use this for Bezier curve mode
-    setTangentMode(){
+    setTangentMode() {
         this.setState({ isTangentMode: !this.state.isTangentMode }, () => this.selectAnimation(this.state.selected));
     }
 
-    setBrokenMode(){
+    setBrokenMode() {
         this.setState({ isBrokenMode: !this.state.isBrokenMode }, () => this.selectAnimation(this.state.selected));
     }
 
@@ -1016,15 +981,15 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
                         <FontAwesomeIcon icon={faTimes} />
                     </div>
                 </div>
-                <GraphActionsBar currentValue={this.state.currentValue} 
-                currentFrame={this.state.currentFrame} 
-                handleFrameChange={(e) => this.handleFrameChange(e)} 
-                handleValueChange={(e) => this.handleValueChange(e)} 
-                addKeyframe={() => this.addKeyframeClick()} 
-                removeKeyframe={() => this.removeKeyframeClick()}
-                brokenMode={this.state.isBrokenMode}
-                brokeTangents={() => this.setBrokenMode()}
-                flatTangent={() => this.setFlatTangent()} />
+                <GraphActionsBar currentValue={this.state.currentValue}
+                    currentFrame={this.state.currentFrame}
+                    handleFrameChange={(e) => this.handleFrameChange(e)}
+                    handleValueChange={(e) => this.handleValueChange(e)}
+                    addKeyframe={() => this.addKeyframeClick()}
+                    removeKeyframe={() => this.removeKeyframeClick()}
+                    brokenMode={this.state.isBrokenMode}
+                    brokeTangents={() => this.setBrokenMode()}
+                    flatTangent={() => this.setFlatTangent()} />
                 <div className="content">
 
                     <div className="row">
@@ -1061,74 +1026,74 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
 
                                         let element;
 
-                                        switch(animation.dataType){
+                                        switch (animation.dataType) {
                                             case Animation.ANIMATIONTYPE_FLOAT:
                                                 element = <li className={this.state.selected.name === animation.name ? 'active' : ''} key={i} onClick={() => this.selectAnimation(animation)}>
                                                     <p>{animation.name}&nbsp;
                                                     <span>{animation.targetProperty}</span></p>
-                                                    </li>
+                                                </li>
                                                 break;
                                             case Animation.ANIMATIONTYPE_VECTOR2:
                                                 element = <li className="property" key={i}><p>{animation.targetProperty}</p>
-                                                            <ul>
-                                                                <li key={`${i}_x`}>Property <strong>X</strong></li>
-                                                                <li key={`${i}_y`}>Property <strong>Y</strong></li>
-                                                             </ul>
-                                                        </li>
+                                                    <ul>
+                                                        <li key={`${i}_x`}>Property <strong>X</strong></li>
+                                                        <li key={`${i}_y`}>Property <strong>Y</strong></li>
+                                                    </ul>
+                                                </li>
                                                 break;
                                             case Animation.ANIMATIONTYPE_VECTOR3:
                                                 element = <li className="property" key={i}><p>{animation.targetProperty}</p>
-                                                            <ul>
-                                                                <li key={`${i}_x`}>Property <strong>X</strong></li>
-                                                                <li key={`${i}_y`}>Property <strong>Y</strong></li>
-                                                                <li key={`${i}_z`}>Property <strong>Z</strong></li>
-                                                             </ul>
-                                                        </li>
+                                                    <ul>
+                                                        <li key={`${i}_x`}>Property <strong>X</strong></li>
+                                                        <li key={`${i}_y`}>Property <strong>Y</strong></li>
+                                                        <li key={`${i}_z`}>Property <strong>Z</strong></li>
+                                                    </ul>
+                                                </li>
                                                 break;
                                             case Animation.ANIMATIONTYPE_QUATERNION:
                                                 element = <li className="property" key={i}><p>{animation.targetProperty}</p>
-                                                <ul>
-                                                    <li key={`${i}_x`}>Property <strong>X</strong></li>
-                                                    <li key={`${i}_y`}>Property <strong>Y</strong></li>
-                                                    <li key={`${i}_z`}>Property <strong>Z</strong></li>
-                                                    <li key={`${i}_w`}>Property <strong>W</strong></li>
-                                                 </ul>
+                                                    <ul>
+                                                        <li key={`${i}_x`}>Property <strong>X</strong></li>
+                                                        <li key={`${i}_y`}>Property <strong>Y</strong></li>
+                                                        <li key={`${i}_z`}>Property <strong>Z</strong></li>
+                                                        <li key={`${i}_w`}>Property <strong>W</strong></li>
+                                                    </ul>
                                                 </li>
                                                 break;
                                             case Animation.ANIMATIONTYPE_COLOR3:
                                                 element = <li className="property" key={i}><p>{animation.targetProperty}</p>
-                                                            <ul>
-                                                                <li key={`${i}_r`}>Property <strong>R</strong></li>
-                                                                <li key={`${i}_g`}>Property <strong>G</strong></li>
-                                                                <li key={`${i}_b`}>Property <strong>B</strong></li>
-                                                             </ul>
-                                                        </li>
+                                                    <ul>
+                                                        <li key={`${i}_r`}>Property <strong>R</strong></li>
+                                                        <li key={`${i}_g`}>Property <strong>G</strong></li>
+                                                        <li key={`${i}_b`}>Property <strong>B</strong></li>
+                                                    </ul>
+                                                </li>
                                                 break;
                                             case Animation.ANIMATIONTYPE_COLOR4:
                                                 element = <li className="property" key={i}><p>{animation.targetProperty}</p>
-                                                <ul>
-                                                    <li key={`${i}_r`}>Property <strong>R</strong></li>
-                                                    <li key={`${i}_g`}>Property <strong>G</strong></li>
-                                                    <li key={`${i}_b`}>Property <strong>B</strong></li>
-                                                    <li key={`${i}_a`}>Property <strong>A</strong></li>
-                                                 </ul>
+                                                    <ul>
+                                                        <li key={`${i}_r`}>Property <strong>R</strong></li>
+                                                        <li key={`${i}_g`}>Property <strong>G</strong></li>
+                                                        <li key={`${i}_b`}>Property <strong>B</strong></li>
+                                                        <li key={`${i}_a`}>Property <strong>A</strong></li>
+                                                    </ul>
                                                 </li>
                                                 break;
                                             case Animation.ANIMATIONTYPE_SIZE:
-                                                element =  <li className="property" key={i}><p>{animation.targetProperty}</p>
-                                                            <ul>
-                                                                <li key={`${i}_width`}>Property <strong>Width</strong></li>
-                                                                <li key={`${i}_height`}>Property <strong>Height</strong></li>
-                                                             </ul>
-                                                        </li>
+                                                element = <li className="property" key={i}><p>{animation.targetProperty}</p>
+                                                    <ul>
+                                                        <li key={`${i}_width`}>Property <strong>Width</strong></li>
+                                                        <li key={`${i}_height`}>Property <strong>Height</strong></li>
+                                                    </ul>
+                                                </li>
                                                 break;
                                             default: console.log("not recognized");
-                                                element =  null;
+                                                element = null;
                                                 break;
                                         }
 
                                         return element;
-                                        
+
                                     })}
 
                                 </ul>
@@ -1138,12 +1103,12 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
 
                             <Playhead frame={this.state.currentFrame} offset={this.state.playheadOffset} />
 
-                            {this.state.svgKeyframes && <SvgDraggableArea ref={this._svgCanvas} 
-                            selectKeyframe={(id: string) => this.selectKeyframe(id)} 
-                            viewBoxScale={this.state.frameAxisLength.length} scale={this.state.scale} 
-                            keyframeSvgPoints={this.state.svgKeyframes} 
-                            selectedControlPoint={(type: string, id: string) => this.selectedControlPoint(type, id)}
-                            updatePosition={(updatedSvgKeyFrame: IKeyframeSvgPoint, index: number) => this.renderPoints(updatedSvgKeyFrame, index)}>
+                            {this.state.svgKeyframes && <SvgDraggableArea ref={this._svgCanvas}
+                                selectKeyframe={(id: string) => this.selectKeyframe(id)}
+                                viewBoxScale={this.state.frameAxisLength.length} scale={this.state.scale}
+                                keyframeSvgPoints={this.state.svgKeyframes}
+                                selectedControlPoint={(type: string, id: string) => this.selectedControlPoint(type, id)}
+                                updatePosition={(updatedSvgKeyFrame: IKeyframeSvgPoint, index: number) => this.renderPoints(updatedSvgKeyFrame, index)}>
 
                                 {/* Frame Labels  */}
                                 { /* Vertical Grid  */}