Associated with #8236

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"thinEngineOnly":115966,"engineOnly":152369,"sceneOnly":505311,"minGridMaterial":647903,"minStandardMaterial":792016}
+{"thinEngineOnly":115966,"engineOnly":152369,"sceneOnly":505311,"minGridMaterial":647903,"minStandardMaterial":791097}

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

@@ -3,7 +3,7 @@ import { PaneComponent, IPaneComponentProps } from "../paneComponent";
 
 import { ArcRotateCamera } from "babylonjs/Cameras/arcRotateCamera";
 import { FreeCamera } from "babylonjs/Cameras/freeCamera";
-import { AnimationGroup } from "babylonjs/Animations/animationGroup";
+import { AnimationGroup, TargetedAnimation } from "babylonjs/Animations/animationGroup";
 import { Material } from "babylonjs/Materials/material";
 import { BackgroundMaterial } from "babylonjs/Materials/Background/backgroundMaterial";
 import { StandardMaterial } from "babylonjs/Materials/standardMaterial";
@@ -95,6 +95,7 @@ import { SpriteManagerPropertyGridComponent } from './propertyGrids/sprites/spri
 import { SpriteManager } from 'babylonjs/Sprites/spriteManager';
 import { SpritePropertyGridComponent } from './propertyGrids/sprites/spritePropertyGridComponent';
 import { Sprite } from 'babylonjs/Sprites/sprite';
+import { TargetedAnimationGridComponent } from './propertyGrids/animations/targetedAnimationPropertyGridComponent';
 
 export class PropertyGridTabComponent extends PaneComponent {
     private _timerIntervalId: number;
@@ -320,6 +321,16 @@ export class PropertyGridTabComponent extends PaneComponent {
                     onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
             }
 
+            if (className === "TargetedAnimation") {
+                const targetedAnimation = entity as TargetedAnimation;
+                return (<TargetedAnimationGridComponent
+                    globalState={this.props.globalState}
+                    targetedAnimation={targetedAnimation}
+                    scene={this.props.scene}
+                    lockObject={this._lockObject}
+                    onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
+            }            
+
             if (className.indexOf("Material") !== -1) {
                 const material = entity as Material;
                 return (<MaterialPropertyGridComponent material={material}

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

@@ -12,6 +12,7 @@ import { TextLineComponent } from "../../../lines/textLineComponent";
 import { SliderLineComponent } from "../../../lines/sliderLineComponent";
 import { LockObject } from "../lockObject";
 import { GlobalState } from '../../../../globalState';
+import { TextInputLineComponent } from '../../../lines/textInputLineComponent';
 
 interface IAnimationGroupGridComponentProps {
     globalState: GlobalState;
@@ -129,7 +130,11 @@ export class AnimationGroupGridComponent extends React.Component<IAnimationGroup
         const playButtonText = animationGroup.isPlaying ? "Pause" : "Play"
 
         return (
-            <div className="pane">
+            <div className="pane">                
+                <LineContainerComponent globalState={this.props.globalState} title="GENERAL">
+                    <TextLineComponent label="Class" value={animationGroup.getClassName()} />
+                    <TextInputLineComponent lockObject={this.props.lockObject} label="Name" target={animationGroup} propertyName="name" onPropertyChangedObservable={this.props.onPropertyChangedObservable}/>
+                </LineContainerComponent>
                 <LineContainerComponent globalState={this.props.globalState} title="CONTROLS">
                     <ButtonLineComponent label={playButtonText} onClick={() => this.playOrPause()} />
                     <SliderLineComponent label="Speed ratio" minimum={0} maximum={10} step={0.1} target={animationGroup} propertyName="speedRatio" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />

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

@@ -0,0 +1,50 @@
+import * as React from "react";
+
+import { Observable } from "babylonjs/Misc/observable";
+import { TargetedAnimation } 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 { LockObject } from "../lockObject";
+import { GlobalState } from '../../../../globalState';
+import { TextInputLineComponent } from '../../../lines/textInputLineComponent';
+
+interface ITargetedAnimationGridComponentProps {
+    globalState: GlobalState;
+    targetedAnimation: TargetedAnimation,
+    scene: Scene,
+    lockObject: LockObject,
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+}
+
+export class TargetedAnimationGridComponent extends React.Component<ITargetedAnimationGridComponentProps> {
+
+    constructor(props: ITargetedAnimationGridComponentProps) {
+        super(props);
+    }
+
+    onOpenAnimationCurveEditor() {
+        // Need to connect with Animation curve editor
+    }
+
+    render() {
+        const targetedAnimation = this.props.targetedAnimation;
+
+        return (
+            <div className="pane">
+                <LineContainerComponent globalState={this.props.globalState} title="GENERAL">
+                    <TextLineComponent label="Class" value={targetedAnimation.getClassName()} />
+                    <TextInputLineComponent lockObject={this.props.lockObject} label="Name" target={targetedAnimation.animation} propertyName="name" onPropertyChangedObservable={this.props.onPropertyChangedObservable}/>
+                    {
+                        targetedAnimation.target.name &&
+                        <TextLineComponent label="Target" value={targetedAnimation.target.name} onLink={() => this.props.globalState.onSelectionChangedObservable.notifyObservers(targetedAnimation)}/>
+                    }
+                    <ButtonLineComponent label="Edit animation" onClick={() => this.onOpenAnimationCurveEditor()} />
+                </LineContainerComponent>
+            </div>
+        );
+    }
+}

inspector/src/components/sceneExplorer/entities/animationGroupTreeItemComponent.tsx

@@ -1,7 +1,7 @@
 import { AnimationGroup } from "babylonjs/Animations/animationGroup";
 import { IExplorerExtensibilityGroup } from "babylonjs/Debug/debugLayer";
 
-import { faFilm } from '@fortawesome/free-solid-svg-icons';
+import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
 import { TreeItemLabelComponent } from "../treeItemLabelComponent";
 import { ExtensionsComponent } from "../extensionsComponent";
 import * as React from "react";
@@ -22,7 +22,7 @@ export class AnimationGroupItemComponent extends React.Component<IAnimationGroup
         const animationGroup = this.props.animationGroup;
         return (
             <div className="animationGroupTools">
-                <TreeItemLabelComponent label={animationGroup.name} onClick={() => this.props.onClick()} icon={faFilm} color="cornflowerblue" />
+                <TreeItemLabelComponent label={animationGroup.name} onClick={() => this.props.onClick()} icon={faLayerGroup} color="cornflowerblue" />
                 {
                     <ExtensionsComponent target={animationGroup} extensibilityGroups={this.props.extensibilityGroups} />
                 }

inspector/src/components/sceneExplorer/entities/targetedAnimationTreeItemComponent.tsx

@@ -0,0 +1,32 @@
+import { TargetedAnimation } from "babylonjs/Animations/animationGroup";
+import { IExplorerExtensibilityGroup } from "babylonjs/Debug/debugLayer";
+
+import { faFilm } from '@fortawesome/free-solid-svg-icons';
+import { TreeItemLabelComponent } from "../treeItemLabelComponent";
+import { ExtensionsComponent } from "../extensionsComponent";
+import * as React from "react";
+
+interface ITargetedAnimationItemComponentProps {
+    targetedAnimation: TargetedAnimation,
+    extensibilityGroups?: IExplorerExtensibilityGroup[],
+    onClick: () => void
+}
+
+export class TargetedAnimationItemComponent extends React.Component<ITargetedAnimationItemComponentProps> {
+    constructor(props: ITargetedAnimationItemComponentProps) {
+        super(props);
+    }
+
+
+    render() {
+        const targetedAnimation = this.props.targetedAnimation;
+        return (
+            <div className="targetedAnimationTools">
+                <TreeItemLabelComponent label={targetedAnimation.animation.name} onClick={() => this.props.onClick()} icon={faFilm} color="cornflowerblue" />
+                {
+                    <ExtensionsComponent target={targetedAnimation} extensibilityGroups={this.props.extensibilityGroups} />
+                }
+            </div>
+        )
+    }
+}

inspector/src/components/sceneExplorer/sceneExplorer.scss

@@ -343,6 +343,20 @@
                 grid-column: 9;
             }
         }
+        
+        .targetedAnimationTools {
+            grid-column: 2;
+            width: 100%;
+            display: grid;
+            grid-template-columns: 1fr auto 5px;
+            align-items: center;
+            min-width: 0;
+           
+            .extensions {
+                width: 20px;
+                grid-column: 2;
+            }
+        }
 
         .animationGroupTools {
             grid-column: 2;

inspector/src/components/sceneExplorer/treeItemSelectableComponent.tsx

@@ -92,10 +92,11 @@ export class TreeItemSelectableComponent extends React.Component<ITreeItemSelect
 
         const children = Tools.SortAndFilter(entity, entity.getChildren ? entity.getChildren() : entity.children);
         return (
-            children.map(item => {
+            children.map((item, i) => {
 
                 return (
-                    <TreeItemSelectableComponent globalState={this.props.globalState} mustExpand={this.props.mustExpand} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.props.selectedEntity} key={item.uniqueId} offset={this.props.offset + 2} entity={item} filter={this.props.filter} />
+                    <TreeItemSelectableComponent globalState={this.props.globalState} mustExpand={this.props.mustExpand} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.props.selectedEntity} 
+                    key={i} offset={this.props.offset + 2} entity={item} filter={this.props.filter} />
                 );
             })
         )

inspector/src/components/sceneExplorer/treeItemSpecializedComponent.tsx

@@ -1,6 +1,6 @@
 import { Camera } from "babylonjs/Cameras/camera";
 import { IExplorerExtensibilityGroup } from "babylonjs/Debug/debugLayer";
-import { AnimationGroup } from "babylonjs/Animations/animationGroup";
+import { AnimationGroup, TargetedAnimation } from "babylonjs/Animations/animationGroup";
 import { Material } from "babylonjs/Materials/material";
 import { Texture } from "babylonjs/Materials/Textures/texture";
 import { TransformNode } from "babylonjs/Meshes/transformNode";
@@ -36,6 +36,7 @@ import { SpriteManagerTreeItemComponent } from './entities/spriteManagerTreeItem
 import { SpriteManager } from 'babylonjs/Sprites/spriteManager';
 import { SpriteTreeItemComponent } from './entities/spriteTreeItemComponent';
 import { Sprite } from 'babylonjs/Sprites/sprite';
+import { TargetedAnimationItemComponent } from './entities/targetedAnimationTreeItemComponent';
 
 
 interface ITreeItemSpecializedComponentProps {
@@ -118,6 +119,10 @@ export class TreeItemSpecializedComponent extends React.Component<ITreeItemSpeci
                 return (<AnimationGroupItemComponent extensibilityGroups={this.props.extensibilityGroups} animationGroup={entity as AnimationGroup} onClick={() => this.onClick()} />);
             }
 
+            if (className === "TargetedAnimation") {
+                return (<TargetedAnimationItemComponent extensibilityGroups={this.props.extensibilityGroups} targetedAnimation={entity as TargetedAnimation} onClick={() => this.onClick()} />);
+            }
+
             if (className.indexOf("Texture") !== -1) {
                 return (<TextureTreeItemComponent extensibilityGroups={this.props.extensibilityGroups} texture={entity as Texture} onClick={() => this.onClick()} />);
             }

src/Animations/animationGroup.ts

@@ -23,6 +23,14 @@ export class TargetedAnimation {
     public target: any;
 
     /**
+     * Returns the string "TargetedAnimation"
+     * @returns "TargetedAnimation"
+     */
+    public getClassName(): string {
+        return "TargetedAnimation";
+    }
+
+    /**
      * Serialize the object
      * @returns the JSON object representing the current entity
      */
@@ -192,6 +200,13 @@ export class AnimationGroup implements IDisposable {
     }
 
     /**
+     * Gets the list of target animations
+     */
+    public get children() {
+        return this._targetedAnimations;
+    }
+
+    /**
      * Instantiates a new Animation Group.
      * This helps managing several animations at once.
      * @see http://doc.babylonjs.com/how_to/group