Merge pull request #8664 from toledoal/playhead-connection

Playhead Connection to Scene

dist/preview release/what's new.md

@@ -9,7 +9,7 @@
 - Reflection probes can now be used to give accurate shading with PBR ([CraigFeldpsar](https://github.com/craigfeldspar) and ([Sebavan](https://github.com/sebavan/)))
 - Added SubSurfaceScattering on PBR materials ([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 selected entity's animations and edit animation groups in Inspector ([pixelspace](https://github.com/devpixelspace))
+- Added Curve editor to manage 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/animationCurveEditorComponent.tsx

@@ -182,6 +182,19 @@ export class AnimationCurveEditorComponent extends React.Component<
         this.state.selected && this.selectAnimation(this.state.selected);
     }
 
+    componentDidUpdate(prevProps: IAnimationCurveEditorComponentProps, prevState: any) {
+        if (prevState.currentFrame !== this.state.currentFrame) {
+            this.onCurrentFrameChangeChangeScene(this.state.currentFrame);
+        }
+    }
+
+    onCurrentFrameChangeChangeScene(value: number) {
+        if (!this._mainAnimatable) {
+            return;
+        }
+        this._mainAnimatable.goToFrame(value);
+    }
+
     /**
      * Notifications
      * To add notification we set the state and clear to make the notification bar hide.
@@ -1291,13 +1304,35 @@ export class AnimationCurveEditorComponent extends React.Component<
         }
 
         // check for empty svgKeyframes, lastframe, selected
-        this.setState({
-            selected: animation,
-            svgKeyframes: coordinate !== undefined ? filteredSvgKeys : this._svgKeyframes,
-            selectedPathData: updatedPath,
-            selectedCoordinate: selectedCurve,
-            fps: animation.framePerSecond,
-        });
+        this.setState(
+            {
+                selected: animation,
+                svgKeyframes: coordinate !== undefined ? filteredSvgKeys : this._svgKeyframes,
+                selectedPathData: updatedPath,
+                selectedCoordinate: selectedCurve,
+                fps: animation.framePerSecond,
+            },
+            () => this.setMainAnimatable()
+        );
+    }
+
+    setMainAnimatable() {
+        if (this.state.selected) {
+            let target = this.props.entity;
+            if (this.props.entity instanceof TargetedAnimation) {
+                target = this.props.entity.target;
+            }
+
+            this.props.scene.stopAllAnimations();
+
+            if (this._mainAnimatable?.target !== target) {
+                const keys = this.state.selected.getKeys();
+                const firstFrame = keys[0].frame;
+                const LastFrame = this.state.selected.getHighestFrame();
+                this._mainAnimatable = this.props.scene.beginAnimation(target, firstFrame, LastFrame, this.state.isLooping);
+                this._mainAnimatable.pause();
+            }
+        }
     }
 
     isAnimationPlaying() {
@@ -1582,7 +1617,7 @@ export class AnimationCurveEditorComponent extends React.Component<
 
                                             {f.value % this.state.fps === 0 && f.value !== 0 ? <line x1={f.value} y1="-100%" x2={f.value} y2="5%"></line> : null}
 
-                                            {this.isCurrentFrame(f.label) ? (
+                                            {this.state.selected && this.isCurrentFrame(f.label) ? (
                                                 <svg>
                                                     <line
                                                         x1={f.value}