Add buttons for play/pause/stop Animation timeline in editor window

Source/Editor/GUI/Timeline/AnimationTimeline.cs

@@ -1,6 +1,8 @@
 // Copyright (c) 2012-2021 Wojciech Figat. All rights reserved.
 
+using System;
 using FlaxEditor.GUI.Timeline.Tracks;
+using FlaxEditor.Viewport.Previews;
 using FlaxEngine;
 
 namespace FlaxEditor.GUI.Timeline
@@ -20,12 +22,35 @@ namespace FlaxEditor.GUI.Timeline
             }
         }
 
+        private AnimationPreview _preview;
+
+        /// <summary>
+        /// Gets or sets the animated preview used for the animation playback.
+        /// </summary>
+        public AnimationPreview Preview
+        {
+            get => _preview;
+            set
+            {
+                if (_preview == value)
+                    return;
+                _preview = value;
+                UpdatePlaybackState();
+                PreviewChanged?.Invoke();
+            }
+        }
+
+        /// <summary>
+        /// Occurs when the selected animated model preview gets changed.
+        /// </summary>
+        public event Action PreviewChanged;
+
         /// <summary>
         /// Initializes a new instance of the <see cref="AnimationTimeline"/> class.
         /// </summary>
         /// <param name="undo">The undo/redo to use for the history actions recording. Optional, can be null to disable undo support.</param>
         public AnimationTimeline(FlaxEditor.Undo undo)
-        : base(PlaybackButtons.None, undo, false, false)
+        : base(PlaybackButtons.Play | PlaybackButtons.Stop, undo, false, false)
         {
             PlaybackState = PlaybackStates.Seeking;
             ShowPreviewValues = false;
@@ -62,6 +87,60 @@ namespace FlaxEditor.GUI.Timeline
             asset.Reload();
         }
 
+        private void UpdatePlaybackState()
+        {
+            PlaybackStates state;
+            ShowPlaybackButtonsArea = _preview != null;
+            if (_preview != null)
+            {
+                if (_preview.PlayAnimation)
+                {
+                    state = PlaybackStates.Playing;
+                }
+                else
+                {
+                    state = PlaybackStates.Paused;
+                }
+            }
+            else
+            {
+                state = PlaybackStates.Seeking;
+            }
+            PlaybackState = state;
+        }
+
+        /// <inheritdoc />
+        public override void Update(float deltaTime)
+        {
+            base.Update(deltaTime);
+
+            UpdatePlaybackState();
+        }
+
+        /// <inheritdoc />
+        public override void OnPlay()
+        {
+            _preview.Play();
+
+            base.OnPlay();
+        }
+
+        /// <inheritdoc />
+        public override void OnPause()
+        {
+            _preview.Pause();
+
+            base.OnPause();
+        }
+
+        /// <inheritdoc />
+        public override void OnStop()
+        {
+            _preview.Stop();
+
+            base.OnStop();
+        }
+
         /// <inheritdoc />
         public override void OnSeek(int frame)
         {

Source/Editor/GUI/Timeline/SceneAnimationTimeline.cs

@@ -37,9 +37,7 @@ namespace FlaxEditor.GUI.Timeline
             {
                 if (_player == value)
                     return;
-
                 _player = value;
-
                 UpdatePlaybackState();
                 PlayerChanged?.Invoke();
             }

Source/Editor/GUI/Timeline/Timeline.cs

@@ -289,6 +289,7 @@ namespace FlaxEditor.GUI.Timeline
         private Image _playbackStop;
         private Image _playbackPlay;
         private Label _noTracksLabel;
+        private ContainerControl _playbackButtonsArea;
         private PositionHandle _positionHandle;
         private bool _isRightMouseButtonDown;
         private Vector2 _rightMouseButtonDownPos;
@@ -597,6 +598,19 @@ namespace FlaxEditor.GUI.Timeline
             }
         }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether show playback buttons area.
+        /// </summary>
+        public bool ShowPlaybackButtonsArea
+        {
+            get => _playbackButtonsArea?.Visible ?? false;
+            set
+            {
+                if (_playbackButtonsArea != null)
+                    _playbackButtonsArea.Visible = value;
+            }
+        }
+
         /// <summary>
         /// Gets a value indicating whether user is moving position handle (seeking).
         /// </summary>
@@ -723,6 +737,7 @@ namespace FlaxEditor.GUI.Timeline
                     Offsets = new Margin(0, 0, -playbackButtonsSize, playbackButtonsSize),
                     Parent = _splitter.Panel1
                 };
+                _playbackButtonsArea = playbackButtonsArea;
                 var playbackButtonsPanel = new ContainerControl
                 {
                     AutoFocus = false,
@@ -2305,6 +2320,7 @@ namespace FlaxEditor.GUI.Timeline
             _playbackStop = null;
             _playbackPlay = null;
             _noTracksLabel = null;
+            _playbackButtonsArea = null;
             _positionHandle = null;
             DragHandlers.Clear();
 

Source/Editor/Viewport/Previews/AnimatedModelPreview.cs

@@ -1,5 +1,6 @@
 // Copyright (c) 2012-2021 Wojciech Figat. All rights reserved.
 
+using System;
 using FlaxEditor.GUI.ContextMenu;
 using FlaxEngine;
 using FlaxEditor.GUI.Input;
@@ -15,11 +16,11 @@ namespace FlaxEditor.Viewport.Previews
     public class AnimatedModelPreview : AssetPreview
     {
         private ContextMenuButton _showNodesButton, _showBoundsButton, _showFloorButton;
-        private bool _showNodes, _showBounds, _showFloor;
+        private bool _showNodes, _showBounds, _showFloor, _showCurrentLOD;
         private AnimatedModel _previewModel;
         private StaticModel _floorModel;
         private ContextMenuButton _showCurrentLODButton;
-        private bool _showCurrentLOD;
+        private bool _playAnimation;
 
         /// <summary>
         /// Gets or sets the skinned model asset to preview.
@@ -38,7 +39,22 @@ namespace FlaxEditor.Viewport.Previews
         /// <summary>
         /// Gets or sets a value indicating whether play the animation in editor.
         /// </summary>
-        public bool PlayAnimation { get; set; } = false;
+        public bool PlayAnimation
+        {
+            get => _playAnimation;
+            set
+            {
+                if (_playAnimation == value)
+                    return;
+                _playAnimation = value;
+                PlayAnimationChanged?.Invoke();
+            }
+        }
+
+        /// <summary>
+        /// Occurs when animation playback state gets changed.
+        /// </summary>
+        public event Action PlayAnimationChanged;
 
         /// <summary>
         /// Gets or sets a value indicating whether show animated model skeleton nodes debug view.
@@ -173,6 +189,32 @@ namespace FlaxEditor.Viewport.Previews
             Task.ViewFlags |= ViewFlags.Shadows;
         }
 
+        /// <summary>
+        /// Starts the animation playback.
+        /// </summary>
+        public void Play()
+        {
+            PlayAnimation = true;
+        }
+
+        /// <summary>
+        /// Pauses the animation playback.
+        /// </summary>
+        public void Pause()
+        {
+            PlayAnimation = false;
+        }
+
+        /// <summary>
+        /// Stops the animation playback.
+        /// </summary>
+        public void Stop()
+        {
+            PlayAnimation = false;
+            _previewModel.ResetAnimation();
+            _previewModel.UpdateAnimation();
+        }
+
         private void OnBegin(RenderTask task, GPUContext context)
         {
             if (!ScaleToFit)

Source/Editor/Viewport/Previews/AnimationPreview.cs

@@ -23,6 +23,7 @@ namespace FlaxEditor.Viewport.Previews
         : base(useWidgets)
         {
             PlayAnimation = true;
+            PlayAnimationChanged += OnPlayAnimationChanged;
 
             // Playback Speed
             {
@@ -43,11 +44,7 @@ namespace FlaxEditor.Viewport.Previews
                     TooltipText = "Animation playback play (F5) or pause (F6)",
                     Parent = playPauseWidget,
                 };
-                _playPauseButton.Clicked += button =>
+                _playPauseButton.Clicked += button => PlayAnimation = !PlayAnimation;
-                {
-                    PlayAnimation = !PlayAnimation;
-                    button.Icon = PlayAnimation ? Editor.Instance.Icons.Pause64 : Editor.Instance.Icons.Play64;
-                };
                 playPauseWidget.Parent = this;
             }
 
@@ -58,6 +55,11 @@ namespace FlaxEditor.Viewport.Previews
             Task.ViewFlags |= ViewFlags.Shadows;
         }
 
+        private void OnPlayAnimationChanged()
+        {
+            _playPauseButton.Icon = PlayAnimation ? Editor.Instance.Icons.Pause64 : Editor.Instance.Icons.Play64;
+        }
+
         /// <inheritdoc />
         public override void Draw()
         {
@@ -82,13 +84,11 @@ namespace FlaxEditor.Viewport.Previews
             if (inputOptions.Play.Process(this, key))
             {
                 PlayAnimation = true;
-                _playPauseButton.Icon = PlayAnimation ? Editor.Instance.Icons.Pause64 : Editor.Instance.Icons.Play64;
                 return true;
             }
             if (inputOptions.Pause.Process(this, key))
             {
                 PlayAnimation = false;
-                _playPauseButton.Icon = PlayAnimation ? Editor.Instance.Icons.Pause64 : Editor.Instance.Icons.Play64;
                 return true;
             }
             return base.OnKeyDown(key);

Source/Editor/Windows/Assets/AnimationWindow.cs

@@ -101,6 +101,7 @@ namespace FlaxEditor.Windows.Assets
                     }
 
                     Window._preview.SetModel(value);
+                    Window._timeline.Preview = value ? Window._preview : null;
 
                     if (Window._panel2 == null)
                     {
@@ -321,6 +322,7 @@ namespace FlaxEditor.Windows.Assets
         {
             _isWaitingForTimelineLoad = false;
             _properties.OnClean();
+            _timeline.Preview = null;
 
             base.UnlinkItem();
         }