First ground work for animation control in inspector

inspector/src/components/actionTabs/actionTabs.scss

@@ -152,6 +152,12 @@ $line-padding-left: 2px;
                 -ms-user-select: none;    
                 user-select: none;     
 
+                .animation-info {                    
+                    border-left: greenyellow 3px solid;
+                    margin-left: 5px;
+                    padding-left: 5px !important;
+                }
+
                 .underline {
                     border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
                 }

inspector/src/components/actionTabs/lines/textLineComponent.tsx

@@ -7,7 +7,8 @@ interface ITextLineComponentProps {
     underline?: boolean;
     onLink?: () => void;
     url?: string;
-    ignoreValue?: boolean
+    ignoreValue?: boolean;
+    additionalClass?: string;
 }
 
 export class TextLineComponent extends React.Component<ITextLineComponentProps> {
@@ -48,7 +49,7 @@ export class TextLineComponent extends React.Component<ITextLineComponentProps>
 
     render() {
         return (
-            <div className={this.props.underline ? "textLine underline" : "textLine"}>
+            <div className={this.props.underline ? "textLine underline" : "textLine" + (this.props.additionalClass ? " " + this.props.additionalClass : "")}>
                 <div className="label">
                     {this.props.label}
                 </div>

inspector/src/components/actionTabs/tabs/propertyGridTabComponent.tsx

@@ -50,7 +50,7 @@ import { Grid } from "babylonjs-gui/2D/controls/grid";
 import { StackPanel } from "babylonjs-gui/2D/controls/stackPanel";
 
 import { ColorPickerPropertyGridComponent } from "./propertyGrids/gui/colorPickerPropertyGridComponent";
-import { AnimationGroupGridComponent } from "./propertyGrids/animationGroupPropertyGridComponent";
+import { AnimationGroupGridComponent } from "./propertyGrids/animations/animationGroupPropertyGridComponent";
 import { LockObject } from "./propertyGrids/lockObject";
 import { ImagePropertyGridComponent } from "./propertyGrids/gui/imagePropertyGridComponent";
 import { SliderPropertyGridComponent } from "./propertyGrids/gui/sliderPropertyGridComponent";

inspector/src/components/actionTabs/tabs/propertyGrids/animationGroupPropertyGridComponent.tsx

@@ -5,13 +5,13 @@ import { Observable, Observer } from "babylonjs/Misc/observable";
 import { AnimationGroup } from "babylonjs/Animations/animationGroup";
 import { Scene } from "babylonjs/scene";
 
-import { PropertyChangedEvent } from "../../../propertyChangedEvent";
-import { ButtonLineComponent } from "../../lines/buttonLineComponent";
-import { LineContainerComponent } from "../../lineContainerComponent";
-import { TextLineComponent } from "../../lines/textLineComponent";
-import { SliderLineComponent } from "../../lines/sliderLineComponent";
-import { LockObject } from "./lockObject";
-import { GlobalState } from '../../../globalState';
+import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
+import { ButtonLineComponent } from "../../../lines/buttonLineComponent";
+import { LineContainerComponent } from "../../../lineContainerComponent";
+import { TextLineComponent } from "../../../lines/textLineComponent";
+import { SliderLineComponent } from "../../../lines/sliderLineComponent";
+import { LockObject } from "../lockObject";
+import { GlobalState } from '../../../../globalState';
 
 interface IAnimationGroupGridComponentProps {
     globalState: GlobalState;

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

@@ -3,20 +3,20 @@ import * as React from "react";
 import { Observable, Observer } from "babylonjs/Misc/observable";
 import { Scene } from "babylonjs/scene";
 
-import { PropertyChangedEvent } from "../../../propertyChangedEvent";
-import { ButtonLineComponent } from "../../lines/buttonLineComponent";
-import { LineContainerComponent } from "../../lineContainerComponent";
-import { SliderLineComponent } from "../../lines/sliderLineComponent";
-import { LockObject } from "./lockObject";
-import { GlobalState } from '../../../globalState';
+import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
+import { ButtonLineComponent } from "../../../lines/buttonLineComponent";
+import { LineContainerComponent } from "../../../lineContainerComponent";
+import { SliderLineComponent } from "../../../lines/sliderLineComponent";
+import { LockObject } from "../lockObject";
+import { GlobalState } from '../../../../globalState';
 import { Animation } from 'babylonjs/Animations/animation';
 import { Animatable } from 'babylonjs/Animations/animatable';
 import { AnimationPropertiesOverride } from 'babylonjs/Animations/animationPropertiesOverride';
 import { AnimationRange } from 'babylonjs/Animations/animationRange';
-import { CheckBoxLineComponent } from '../../lines/checkBoxLineComponent';
+import { CheckBoxLineComponent } from '../../../lines/checkBoxLineComponent';
 import { Nullable } from 'babylonjs/types';
-import { FloatLineComponent } from '../../lines/floatLineComponent';
-import { TextLineComponent } from '../../lines/textLineComponent';
+import { FloatLineComponent } from '../../../lines/floatLineComponent';
+import { TextLineComponent } from '../../../lines/textLineComponent';
 import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
 
 interface IAnimationGridComponentProps {
@@ -30,16 +30,15 @@ interface IAnimationGridComponentProps {
 export class AnimationGridComponent extends React.Component<IAnimationGridComponentProps, { currentFrame: number }> {
     private _animations: Nullable<Animation[]> = null;
     private _ranges: AnimationRange[];
+    private _runningAnimatable: Nullable<Animatable>;
+    private _onBeforeRenderObserver: Nullable<Observer<Scene>>;
+    private _isPlaying = false;
+    private timelineRef: React.RefObject<SliderLineComponent>;
     private _animationControl = {
         from: 0,
         to: 0,
         loop: false
     }
-    private _runningAnimatable: Nullable<Animatable>;
-    private _onBeforeRenderObserver: Nullable<Observer<Scene>>;
-    private _isPlaying = false;
-    private timelineRef: React.RefObject<SliderLineComponent>;
-
 
     constructor(props: IAnimationGridComponentProps) {
         super(props);
@@ -59,6 +58,10 @@ export class AnimationGridComponent extends React.Component<IAnimationGridCompon
                 }
             });
 
+            if (animatableAsAny.animations) {                
+                this._animations!.push(...animatableAsAny.animations);
+            }
+
             // Extract from and to
             if (this._animations && this._animations.length) {
                 this._animations.forEach(animation => {
@@ -135,9 +138,57 @@ export class AnimationGridComponent extends React.Component<IAnimationGridCompon
             this._animationControl.loop = this._runningAnimatable.loopAnimation;
         }
 
+        let animations = animatable.animations;
+
         return (
             <div>
                 {
+                    this._ranges.length > 0 &&
+                    <LineContainerComponent globalState={this.props.globalState} title="ANIMATION RANGES">
+                        {
+                            this._ranges.map(range => {
+                                return (
+                                    <ButtonLineComponent key={range.name} label={range.name}
+                                        onClick={() => {
+                                            this._runningAnimatable = null;
+                                            this.props.scene.beginAnimation(animatable, range.from, range.to, true)
+                                        }} />
+                                );
+                            })
+                        }
+                    </LineContainerComponent>
+                }
+                {
+                    animations && animations.length > 0 &&
+                    <>
+                        <LineContainerComponent globalState={this.props.globalState} title="ANIMATIONS">
+                            <TextLineComponent label="Count" value={animations.length.toString()} />
+                            {
+                                animations.map((anim, i) => {
+                                    return (
+                                        <>
+                                            <TextLineComponent label={"#" + i + " >"} value={anim.targetProperty} />
+                                        </>           
+                                    )
+                                })
+                            }
+                        </LineContainerComponent>
+                        <LineContainerComponent globalState={this.props.globalState} title="ANIMATION GENERAL CONTROL">
+                            <FloatLineComponent lockObject={this.props.lockObject} label="From" target={this._animationControl} propertyName="from" />
+                            <FloatLineComponent lockObject={this.props.lockObject} label="To" target={this._animationControl} propertyName="to" />
+                            <CheckBoxLineComponent label="Loop" onSelect={value => this._animationControl.loop = value} isSelected={() => this._animationControl.loop} />
+                            {
+                                this._isPlaying &&
+                                <SliderLineComponent ref={this.timelineRef} label="Current frame" minimum={this._animationControl.from} maximum={this._animationControl.to}
+                                    step={(this._animationControl.to - this._animationControl.from) / 1000.0} directValue={this.state.currentFrame}
+                                    onInput={value => this.onCurrentFrameChange(value)}
+                                />
+                            }                         
+                            <ButtonLineComponent label={this._isPlaying ? "Stop" : "Play"} onClick={() => this.playOrPause()} />                        
+                        </LineContainerComponent>    
+                    </>
+                }
+                {
                     (this._ranges.length > 0 || this._animations && this._animations.length > 0) &&
                     <LineContainerComponent globalState={this.props.globalState} title="ANIMATION OVERRIDE">
                         <CheckBoxLineComponent label="Enable override" onSelect={value => {
@@ -160,39 +211,6 @@ export class AnimationGridComponent extends React.Component<IAnimationGridCompon
                         }
                     </LineContainerComponent>
                 }
-                {
-                    this._ranges.length > 0 &&
-                    <LineContainerComponent globalState={this.props.globalState} title="ANIMATION RANGES">
-                        {
-                            this._ranges.map(range => {
-                                return (
-                                    <ButtonLineComponent key={range.name} label={range.name}
-                                        onClick={() => {
-                                            this._runningAnimatable = null;
-                                            this.props.scene.beginAnimation(animatable, range.from, range.to, true)
-                                        }} />
-                                );
-                            })
-                        }
-                    </LineContainerComponent>
-                }
-                {
-                    this._animations && this._animations.length > 0 &&
-                    <LineContainerComponent globalState={this.props.globalState} title="ANIMATIONS">
-                        <TextLineComponent label="Count" value={this._animations.length.toString()} />
-                        <FloatLineComponent lockObject={this.props.lockObject} label="From" target={this._animationControl} propertyName="from" />
-                        <FloatLineComponent lockObject={this.props.lockObject} label="To" target={this._animationControl} propertyName="to" />
-                        <CheckBoxLineComponent label="Loop" onSelect={value => this._animationControl.loop = value} isSelected={() => this._animationControl.loop} />
-                        <ButtonLineComponent label={this._isPlaying ? "Stop" : "Play"} onClick={() => this.playOrPause()} />
-                        {
-                            this._isPlaying &&
-                            <SliderLineComponent ref={this.timelineRef} label="Current frame" minimum={this._animationControl.from} maximum={this._animationControl.to}
-                                step={(this._animationControl.to - this._animationControl.from) / 1000.0} directValue={this.state.currentFrame}
-                                onInput={value => this.onCurrentFrameChange(value)}
-                            />
-                        }
-                    </LineContainerComponent>
-                }
             </div>
         );
     }

inspector/src/components/actionTabs/tabs/propertyGrids/cameras/commonCameraPropertyGridComponent.tsx

@@ -12,6 +12,7 @@ import { GlobalState } from '../../../../globalState';
 import { CustomPropertyGridComponent } from '../customPropertyGridComponent';
 import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
 import { TextInputLineComponent } from '../../../lines/textInputLineComponent';
+import { AnimationGridComponent } from '../animations/animationPropertyGridComponent';
 
 interface ICommonCameraPropertyGridComponentProps {
     globalState: GlobalState;
@@ -74,6 +75,7 @@ export class CommonCameraPropertyGridComponent extends React.Component<ICommonCa
                         this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
                     }} />                       
                 </LineContainerComponent>
+                <AnimationGridComponent globalState={this.props.globalState} animatable={camera} scene={camera.getScene()} lockObject={this.props.lockObject} />
             </div>
         );
     }

inspector/src/components/actionTabs/tabs/propertyGrids/lights/commonLightPropertyGridComponent.tsx

@@ -10,6 +10,7 @@ import { GlobalState } from '../../../../globalState';
 import { CustomPropertyGridComponent } from '../customPropertyGridComponent';
 import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
 import { TextInputLineComponent } from '../../../lines/textInputLineComponent';
+import { AnimationGridComponent } from '../animations/animationPropertyGridComponent';
 
 interface ICommonLightPropertyGridComponentProps {
     globalState: GlobalState,
@@ -42,6 +43,7 @@ export class CommonLightPropertyGridComponent extends React.Component<ICommonLig
                         this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
                     }} />                       
                 </LineContainerComponent>
+                <AnimationGridComponent globalState={this.props.globalState} animatable={light} scene={light.getScene()} lockObject={this.props.lockObject} />
             </div>
         );
     }

inspector/src/components/actionTabs/tabs/propertyGrids/materials/commonMaterialPropertyGridComponent.tsx

@@ -17,6 +17,7 @@ import { GlobalState } from '../../../../globalState';
 import { CustomPropertyGridComponent } from '../customPropertyGridComponent';
 import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
 import { TextInputLineComponent } from '../../../lines/textInputLineComponent';
+import { AnimationGridComponent } from '../animations/animationPropertyGridComponent';
 
 interface ICommonMaterialPropertyGridComponentProps {
     globalState: GlobalState;
@@ -120,6 +121,7 @@ export class CommonMaterialPropertyGridComponent extends React.Component<ICommon
                     }
                     <CheckBoxLineComponent label="Separate culling pass" target={material} propertyName="separateCullingPass" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>
+                <AnimationGridComponent globalState={this.props.globalState} animatable={material} scene={material.getScene()} lockObject={this.props.lockObject} />
             </div>
         );
     }

inspector/src/components/actionTabs/tabs/propertyGrids/materials/texturePropertyGridComponent.tsx

@@ -25,6 +25,7 @@ import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture"
 import { CustomPropertyGridComponent } from '../customPropertyGridComponent';
 import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
 import { TextInputLineComponent } from '../../../lines/textInputLineComponent';
+import { AnimationGridComponent } from '../animations/animationPropertyGridComponent';
 
 interface ITexturePropertyGridComponentProps {
     texture: BaseTexture,
@@ -192,6 +193,10 @@ export class TexturePropertyGridComponent extends React.Component<ITextureProper
                     }
                 </LineContainerComponent>
                 {
+                    texture.getScene() &&
+                    <AnimationGridComponent globalState={this.props.globalState} animatable={texture} scene={texture.getScene()!} lockObject={this.props.lockObject} />
+                }
+                {
                     (texture as any).rootContainer &&
                     <LineContainerComponent globalState={this.props.globalState} title="ADVANCED TEXTURE PROPERTIES">
                         <ValueLineComponent label="Last layout time" value={this._adtInstrumentation!.renderTimeCounter.current} units="ms" />

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/meshPropertyGridComponent.tsx

@@ -28,6 +28,7 @@ import { OptionsLineComponent } from '../../../lines/optionsLineComponent';
 import { AbstractMesh } from 'babylonjs/Meshes/abstractMesh';
 import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
 import { TextInputLineComponent } from '../../../lines/textInputLineComponent';
+import { AnimationGridComponent } from '../animations/animationPropertyGridComponent';
 
 interface IMeshPropertyGridComponentProps {
     globalState: GlobalState;
@@ -402,6 +403,7 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
                     </LineContainerComponent>
 
                 }
+                <AnimationGridComponent globalState={this.props.globalState} animatable={mesh} scene={mesh.getScene()} lockObject={this.props.lockObject} />
                 <LineContainerComponent globalState={this.props.globalState} title="ADVANCED" closed={true}>
                     {
                         mesh.useBones &&

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/skeletonPropertyGridComponent.tsx

@@ -9,7 +9,7 @@ import { TextLineComponent } from "../../../lines/textLineComponent";
 import { LockObject } from "../lockObject";
 import { GlobalState } from '../../../../globalState';
 import { Skeleton } from 'babylonjs/Bones/skeleton';
-import { AnimationGridComponent } from '../animationPropertyGridComponent';
+import { AnimationGridComponent } from '../animations/animationPropertyGridComponent';
 import { SkeletonViewer } from 'babylonjs/Debug/skeletonViewer';
 import { CustomPropertyGridComponent } from '../customPropertyGridComponent';
 

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/transformNodePropertyGridComponent.tsx

@@ -14,6 +14,7 @@ import { GlobalState } from '../../../../globalState';
 import { CustomPropertyGridComponent } from '../customPropertyGridComponent';
 import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
 import { TextInputLineComponent } from '../../../lines/textInputLineComponent';
+import { AnimationGridComponent } from '../animations/animationPropertyGridComponent';
 
 interface ITransformNodePropertyGridComponentProps {
     globalState: GlobalState;
@@ -62,6 +63,7 @@ export class TransformNodePropertyGridComponent extends React.Component<ITransfo
                     }
                     <Vector3LineComponent label="Scaling" target={transformNode} propertyName="scaling" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>
+                <AnimationGridComponent globalState={this.props.globalState} animatable={transformNode} scene={transformNode.getScene()} lockObject={this.props.lockObject} />
             </div>
         );
     }