Styling 2

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

@@ -87,13 +87,18 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
         if (this.props.entity instanceof TargetedAnimation) {
             this._isTargetedAnimation = true;
             initialSelection = this.props.entity.animation;
-            initialLerpMode = this.analizeAnimation(this.props.entity.animation);
-            initialPathData = this.getPathData(this.props.entity.animation);
+            initialLerpMode = initialSelection !== undefined ? this.analizeAnimation(initialSelection) : false;
+            initialPathData = initialSelection !== undefined ? this.getPathData(initialSelection) : "";
         } else {
             this._isTargetedAnimation = false;
-            initialLerpMode = this.analizeAnimation(this.props.entity.animations && this.props.entity.animations[0]);
-            initialSelection = this.props.entity.animations !== null ? this.props.entity.animations[0] : null;
-            initialPathData = this.props.entity.animations !== null ? this.getPathData(this.props.entity.animations[0]) : "";
+
+            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.analizeAnimation(this.props.entity.animations && initialSelection) : false;
+            initialPathData = initialSelection && this.getPathData(initialSelection);
+            initialPathData = initialPathData === null || initialPathData === undefined ? "" : initialPathData;
         }
 
         // will update this until we have a top scroll/zoom feature
@@ -780,7 +785,11 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
         this._svgKeyframes.push(svgKeyframe);
     }
 
-    getPathData(animation: Animation) {
+    getPathData(animation: Animation | null) {
+
+        if (animation === null){
+            return "";
+        }
 
         // Check if Tangent mode is active and broken mode is active. (Only one tangent moves)
         let keyframes = animation.getKeys();
@@ -847,7 +856,7 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
         }
 
         return data;
-
+        
     }
 
     getAnimationData(animation: Animation) {

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

@@ -199,7 +199,7 @@ export class AnimationGridComponent extends React.Component<IAnimationGridCompon
                                 this._isCurveEditorOpen && <PopupComponent
                                     id="curve-editor"
                                     title="Curve Animation Editor"
-                                    size={{ width: 950, height: 540 }}
+                                    size={{ width: 1024, height: 512 }}
                                     onOpen={(window: Window) => { window.console.log("Window opened!!") }}
                                     onClose={(window: Window) => this.onCloseAnimationCurveEditor(window)}>
 

inspector/src/components/actionTabs/tabs/propertyGrids/animations/curveEditor.scss

@@ -1,6 +1,8 @@
 
 #animation-curve-editor {
 
+    font-family: acumin-pro-condensed;
+
     .notification-area{
         position: absolute;
         width: auto;
@@ -32,7 +34,7 @@
     .header{
         display: flex;
         padding: 9px;
-        background: black;
+        background: #333333;
         color: white;
         height: 1.3em;
         justify-content: space-between;
@@ -56,16 +58,20 @@
         justify-content: flex-end;
         align-items: flex-end;
         padding: 6px;
+        background: #333333;
 
         .action-input{
             display: flex;
             justify-content: center;
             flex-direction: row;
             align-items: center;
-            label { margin-right: 0.5em }
+            label { margin-right: 0.5em; color: white; }
             input {
                 width: 4em;
                 height: 2em;
+                color: white;
+                font-size: 12pt;
+                background-color: black;
             }
         }
     }
@@ -137,7 +143,7 @@
 
         .animation-list{
             padding: 1.5rem;
-            background: rgb(87, 86, 86);
+            background: #333333;
             color: white;
             ul {
                 list-style:none;

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

@@ -93,7 +93,7 @@ export class TargetedAnimationGridComponent extends React.Component<ITargetedAni
                         this._isCurveEditorOpen && <PopupComponent
                             id="curve-editor"
                             title="Curve Animation Editor"
-                            size={{ width: 950, height: 540 }}
+                            size={{ width: 1024, height: 512 }}
                             onOpen={(window: Window) => { window.console.log("Window opened!!") }}
                             onClose={(window: Window) => this.onCloseAnimationCurveEditor(window)}>