Play buttons

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 in animation groups in Inspector ([pixelspace](https://github.com/devpixelspace))
+- Added Curve editor to manage entity's animations and edit animation within 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/animationCurveEditorComponent.tsx

@@ -1166,17 +1166,20 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
             if (this.state.isPlaying) {
                 this.props.scene.stopAnimation(target);
                 this.setState({ isPlaying: false })
+                this._isPlaying = false;
                 this.forceUpdate();
             } else {
+                let keys = this.state.selected.getKeys();
+                let firstFrame = keys[0].frame;
+                let LastFrame = keys[keys.length - 1].frame;
                 if (direction === 1){
-                    this.props.scene.beginAnimation(target, this.state.selected.getKeys()[0].frame, this.state.selected.getHighestFrame(), true);
+                    this.props.scene.beginAnimation(target, firstFrame, LastFrame, true);
                 } 
                 if (direction === -1){
-                    this.props.scene.beginAnimation(target, this.state.selected.getHighestFrame(), this.state.selected.getKeys()[0].frame, true);
+                    this.props.scene.beginAnimation(target, LastFrame, firstFrame, true);
                 } 
-                this.props.scene.beginAnimation(target, this.state.selected.getKeys()[0].frame, this.state.selected.getHighestFrame(), true);
-                this._isPlaying = false;
-                this.setState({ isPlaying: true })
+                this._isPlaying = true;
+                this.setState({ isPlaying: true });
                 this.forceUpdate();
             }
         }

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

@@ -121,7 +121,7 @@
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                    width: 8em;
+                    width: 15em;
 
                     .input-frame input {
                         width: 3em;

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

@@ -28,14 +28,20 @@ export class Timeline extends React.Component<ITimelineProps, { selected: IAnima
         this._direction = 0;
     }
 
-    playPauseBackwards(event: React.MouseEvent<HTMLDivElement>) {
+    playBackwards(event: React.MouseEvent<HTMLDivElement>) {
         this.props.playPause(-1);
     }
 
-    playPause(event: React.MouseEvent<HTMLDivElement>){
+    play(event: React.MouseEvent<HTMLDivElement>){
         this.props.playPause(1);
     }
 
+    pause(event: React.MouseEvent<HTMLDivElement>){
+        if (this.props.isPlaying){
+            this.props.playPause(1);
+        }
+    }
+
     handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
         this.props.onCurrentFrameChange(parseInt(event.target.value));
         event.preventDefault();
@@ -70,7 +76,8 @@ export class Timeline extends React.Component<ITimelineProps, { selected: IAnima
     previousKeyframe(event: React.MouseEvent<HTMLDivElement>) {
         event.preventDefault();
         if (this.props.keyframes !== null) {
-            let first = this.props.keyframes.find(kf => kf.frame < this.props.currentFrame);
+            let keyframes = [...this.props.keyframes]
+            let first = keyframes.reverse().find(kf => kf.frame < this.props.currentFrame);
             if (first) {
                 this.props.onCurrentFrameChange(first.frame);
                 this.setState({ selected: first });
@@ -182,13 +189,13 @@ export class Timeline extends React.Component<ITimelineProps, { selected: IAnima
                         <div className="previous-key-frame button" onClick={(e) => this.previousKeyframe(e)}>
                             <FontAwesomeIcon icon={faStepBackward} />
                         </div>
-                        <div className="previous-key-frame button" onClick={(e) => this.playPauseBackwards(e)}>
+                        <div className="previous-key-frame button" onClick={(e) => this.playBackwards(e)}>
                             <FontAwesomeIcon icon={faPlay} style={{transform: 'rotate(180deg)'}} />
                         </div>
-                        <div className="previous-key-frame button" onClick={(e) => this.playPause(e)}>
+                        <div className="previous-key-frame button" onClick={(e) => this.pause(e)}>
                             <FontAwesomeIcon icon={faPause} />
                         </div>
-                        <div className="previous-key-frame button" onClick={(e) => this.playPause(e)}>
+                        <div className="previous-key-frame button" onClick={(e) => this.play(e)}>
                             <FontAwesomeIcon icon={faPlay} />
                         </div>
                         <div className="next-key-frame button" onClick={(e) => this.nextKeyframe(e)}>