Adding Vector3 Animation list

dist/preview release/what's new.md

@@ -8,7 +8,7 @@
 - Added HDR texture filtering tools to the sandbox ([Sebavan](https://github.com/sebavan/))
 - Reflection probes can now be used to give accurate shading with PBR ([CraigFeldpsar](https://github.com/craigfeldspar) and ([Sebavan](https://github.com/sebavan/)))
 - Added editing of PBR materials, Post processes and Particle fragment shaders in the node material editor ([Popov72](https://github.com/Popov72))
-- Added Curve editor to manage entity's animations and edit animation groups in Inspector ([pixelspace](https://github.com/devpixelspace))
+- Added Curve editor to manage selected entity's animations and edit animation groups in Inspector ([pixelspace](https://github.com/devpixelspace))
 - Added support in `ShadowGenerator` for fast fake soft transparent shadows ([Popov72](https://github.com/Popov72))
 - Added support for **thin instances** for faster mesh instances. [Doc](https://doc.babylonjs.com/how_to/how_to_use_thininstances) ([Popov72](https://github.com/Popov72))
 

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

@@ -190,6 +190,8 @@ export class AddAnimation extends React.Component<IAddAnimationProps, {animation
                         this.props.entity.animations = updatedCollection;
                         this.props.changed();
                         this.props.close();
+                        //Cleaning form fields
+                        this.setState({ animationName: "", animationTargetPath: "", animationType: "Float", loopMode: Animation.ANIMATIONLOOPMODE_CYCLE, animationTargetProperty: ""});
                     }   
                 }
             } else {

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

@@ -847,22 +847,25 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
     * Core functions
     * This section handles main Curve Editor Functions.
     */
-    selectAnimation(animation: Animation) {
+    selectAnimation(animation: Animation, axis?: string) {
 
-        this.playStopAnimation();
+        if (!axis){
+            this.playStopAnimation();
 
-        this._svgKeyframes = [];
+            this._svgKeyframes = [];
 
-        const pathData = this.getPathData(animation);
+            const pathData = this.getPathData(animation);
 
-        let lastFrame = animation.getHighestFrame();
+            let lastFrame = animation.getHighestFrame();
 
-        if (pathData === "") {
-            console.log("no keyframes in this animation");
-        }
-
-        this.setState({ selected: animation, currentPathData: pathData, svgKeyframes: this._svgKeyframes, lastFrame: lastFrame });
+            if (pathData === "") {
+                console.log("no keyframes in this animation");
+            }
 
+            this.setState({ selected: animation, currentPathData: pathData, svgKeyframes: this._svgKeyframes, lastFrame: lastFrame });
+        } else {
+            console.log(axis); // This will handle animations that are not Float type
+        }
     }
 
     isAnimationPlaying() {
@@ -996,7 +999,7 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
                     
                 <div className="content">
                     <div className="row">
-                        <EditorControls selectAnimation={(animation: Animation) => this.selectAnimation(animation)} 
+                        <EditorControls selectAnimation={(animation: Animation, axis?: string) => this.selectAnimation(animation, axis)} 
                         isTargetedAnimation={this._isTargetedAnimation} 
                         entity={this.props.entity} 
                         selected={this.state.selected} 

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

@@ -13,7 +13,7 @@ interface IAnimationListTreeProps {
     entity: IAnimatable | TargetedAnimation;
     selected: Animation | null
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    selectAnimation: (selected: Animation) => void;
+    selectAnimation: (selected: Animation, axis?: string) => void;
     empty: () => void;
 }
 
@@ -89,15 +89,15 @@ export class AnimationListTree extends React.Component<IAnimationListTreeProps,
                 </li>
                 break;
             case Animation.ANIMATIONTYPE_VECTOR3:
-                element = <li className={this.props.selected && this.props.selected.name === animation.name ? 'property sub active' : 'property sub'} key={i} onClick={() => this.props.selectAnimation(animation)}>
+                element = <li className={this.props.selected && this.props.selected.name === animation.name ? 'property sub active' : 'property sub'} key={i} onClick={() => this.props.selectAnimation(animation, 'Vector3')}>
                     <div className={`animation-arrow ${this.state.list[i].open ? '' : 'flip'}`} onClick={() => this.toggleProperty(i)}></div>
                     <p>{animation.targetProperty}</p>
                     <IconButtonLineComponent tooltip="Options" icon="small animation-options" onClick={() => this.editAnimation()} />
                     {!(this.props.entity instanceof TargetedAnimation) ? this.props.selected && this.props.selected.name === animation.name ? <IconButtonLineComponent tooltip="Remove" icon="small animation-delete" onClick={() => this.deleteAnimation()} /> : <div className="spacer"></div> : null}
                     <ul className={`sub-list ${this.state.list[i].open ? '' : 'hidden'}`}>
-                        <li key={`${i}_x`} className="property" style={{color: '#db3e3e'}}><div className={`handle-indicator ${''}`}></div>{animation.targetProperty} X</li>
-                        <li key={`${i}_y`} className="property" style={{color: '#51e22d'}}><div className={`handle-indicator ${''}`}></div>{animation.targetProperty} Y</li>
-                        <li key={`${i}_z`} className="property" style={{color: '#00a3ff'}}><div className={`handle-indicator ${''}`}></div>{animation.targetProperty} Z</li>
+                        <li key={`${i}_x`} className="property" style={{color: '#db3e3e'}} onClick={() => this.props.selectAnimation(animation, 'x')}><div className={`handle-indicator ${''}`}></div>{animation.targetProperty} X</li>
+                        <li key={`${i}_y`} className="property" style={{color: '#51e22d'}} onClick={() => this.props.selectAnimation(animation, 'y')}><div className={`handle-indicator ${''}`}></div>{animation.targetProperty} Y</li>
+                        <li key={`${i}_z`} className="property" style={{color: '#00a3ff'}} onClick={() => this.props.selectAnimation(animation, 'z')}><div className={`handle-indicator ${''}`}></div>{animation.targetProperty} Z</li>
                     </ul>
                 </li>
                 break;

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

@@ -567,6 +567,7 @@
                                 margin: 5px;
                                 font-size: 10px;
                                 font-family: acumin-pro-condensed;
+                                border: none;
                             }
                         }
                     }
@@ -600,10 +601,6 @@
                             cursor: pointer;
                         }
 
-                        div.icon {
-                            //flex: 1;
-                        }
-
                         .spacer{
                             width: 20px;
                             height: 20px;
@@ -649,6 +646,10 @@
                             flex-grow: 1;
                             flex-shrink: 1;
                             flex-basis: 100%;
+
+                            .property{
+                                cursor: pointer;
+                            }
                         }
                     }
                 }

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

@@ -17,7 +17,7 @@ interface IEditorControlsProps {
    selected: Animation | null
    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
    setNotificationMessage: (message: string) => void;
-   selectAnimation: (selected: Animation) => void;
+   selectAnimation: (selected: Animation, axis?: string) => void;
 }
 
 export class EditorControls extends React.Component<IEditorControlsProps, {isAnimationTabOpen: boolean, isEditTabOpen: boolean, isLoadTabOpen: boolean, isSaveTabOpen: boolean, isLoopActive: boolean, animationsCount: number; framesPerSecond: number}>{ 
@@ -28,9 +28,12 @@ export class EditorControls extends React.Component<IEditorControlsProps, {isAni
         this.state = { isAnimationTabOpen: count === 0 ? true : false, isEditTabOpen: count === 0 ? false : true, isSaveTabOpen: false, isLoadTabOpen: false, isLoopActive: false, animationsCount: count, framesPerSecond: 60 }
     }
 
-    animationsChanged(){
-        let recount = (this.props.entity as IAnimatable).animations?.length ?? 0;
-        this.setState( { animationsCount: recount } );
+    animationAdded(){
+        this.setState( { animationsCount: this.recountAnimations(), isEditTabOpen: true, isAnimationTabOpen: false } );
+    }
+
+    recountAnimations() {
+        return (this.props.entity as IAnimatable).animations?.length ?? 0;
     }
 
     handleTabs(tab: number){
@@ -59,9 +62,8 @@ export class EditorControls extends React.Component<IEditorControlsProps, {isAni
         this.setState({framesPerSecond: fps});
     }
 
-    emptyList(){
-        this.animationsChanged()
-        this.setState({isEditTabOpen: false, isAnimationTabOpen: true}); 
+    emptiedList(){
+        this.setState( { animationsCount: this.recountAnimations(), isEditTabOpen: false, isAnimationTabOpen: true } );
     }
 
     render() { 
@@ -90,7 +92,7 @@ export class EditorControls extends React.Component<IEditorControlsProps, {isAni
                     close={() => { this.setState({isAnimationTabOpen: false})}} 
                     entity={(this.props.entity as IAnimatable)} 
                     setNotificationMessage={(message: string) => { this.props.setNotificationMessage(message) }}
-                    changed={() => this.animationsChanged() }
+                    changed={() => this.animationAdded() }
                     onPropertyChangedObservable={this.props.onPropertyChangedObservable}/>
             }
 
@@ -103,7 +105,7 @@ export class EditorControls extends React.Component<IEditorControlsProps, {isAni
                 entity={this.props.entity} 
                 selected={this.props.selected} 
                 onPropertyChangedObservable={this.props.onPropertyChangedObservable} 
-                empty={() => this.emptyList() }
+                empty={() => this.emptiedList() }
                 selectAnimation={this.props.selectAnimation}/>
             : null }
         </div>