From dbb18937db953fa8ff38854fa5d38bc94cfc0539 Mon Sep 17 00:00:00 2001
From: haven1433 <haven1433@gmail.com>
Date: Fri, 4 Nov 2022 10:17:11 -0500
Subject: [PATCH] animation improvements

---
 .../ViewModels/Map/MapTutorialsViewModel.cs   |  8 +--
 src/HexManiac.WPF/Controls/MapTab.xaml        | 50 +++++++++++--------
 src/HexManiac.WPF/Controls/MapTab.xaml.cs     | 17 +++++++
 .../Controls/TutorialControl.xaml             |  2 +-
 .../Controls/TutorialControl.xaml.cs          | 11 +++-
 src/HexManiac.WPF/Windows/MainWindow.xaml.cs  | 12 ++---
 6 files changed, 66 insertions(+), 34 deletions(-)

diff --git a/src/HexManiac.Core/ViewModels/Map/MapTutorialsViewModel.cs b/src/HexManiac.Core/ViewModels/Map/MapTutorialsViewModel.cs
index aaf25837..744fea75 100644
--- a/src/HexManiac.Core/ViewModels/Map/MapTutorialsViewModel.cs
+++ b/src/HexManiac.Core/ViewModels/Map/MapTutorialsViewModel.cs
@@ -77,14 +77,14 @@ namespace HavenSoft.HexManiac.Core.ViewModels.Map {
             Tutorials.Add(new("UndoArrow", "Undo", "Use the Undo button in the toolbar to undo any mistakes."));
             Tutorials.Add(new("FillBucket", "Paint Blocks", "Double-Click over the map to paint with the selected block."));
             Tutorials.Add(new("EscapeKey", "Unselect Block", "Press the escape key to unselect a block."));
-            Tutorials.Add(new(LeftClick, "Select Blocks", "Left-Click and drag on the block panel to select multiple blocks. When multiple blocks are selected, you can draw, but not paint."));
+            Tutorials.Add(new(LeftClick, "Select Blocks", "Left-Click and drag on the Blocks panel to select multiple blocks. When multiple blocks are selected, you can draw, but not paint."));
          }
 
          // editing blocks
          {
-            Tutorials.Add(new("RightAngleArrow", "Edit Block", "Blocks are made of Tiles in a 2x2 grid, with foreground and background layers. Select a block, then click 'Edit Block' in the block panel to show the tile panel."));
-            Tutorials.Add(new(LeftClick, "Select Tile", "Click a tile in the Tile panel to select it."));
-            Tutorials.Add(new(LeftClick, "Draw Tile", "Click on a block's foreground or background tile at the top of the block panel to replace it with your selected tile/palette."));
+            Tutorials.Add(new("RightAngleArrow", "Edit Block", "Blocks are made of Tiles in a 2x2 grid, with foreground and background layers. Select a block, then click 'Edit Block' in the Blocks panel to show the Tiles panel."));
+            Tutorials.Add(new(LeftClick, "Select Tile", "Click a tile in the Tiles panel to select it."));
+            Tutorials.Add(new(LeftClick, "Draw Tile", "Click on a block's foreground or background tile at the top of the Blocks panel to replace it with your selected tile/palette."));
             Tutorials.Add(new("ArrowsLeftRight", "Flip Tile", "Click the arrows next to the selected block's foreground/background tile to flip that tile vertically or horizontally."));
          }
 
diff --git a/src/HexManiac.WPF/Controls/MapTab.xaml b/src/HexManiac.WPF/Controls/MapTab.xaml
index 0a30fa16..f90f5cdd 100644
--- a/src/HexManiac.WPF/Controls/MapTab.xaml
+++ b/src/HexManiac.WPF/Controls/MapTab.xaml
@@ -35,6 +35,9 @@
          <RowDefinition Height="*" />
       </Grid.RowDefinitions>
 
+      <Decorator IsHitTestVisible="False" Width="30" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,-60,0,0" Name="BackButtonWidget" />
+      <Decorator IsHitTestVisible="False" Width="30" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="96,-60,0,0" Name="UndoButtonWidget" />
+
       <!-- Block Panel -->
       <DockPanel Grid.Column="0" Grid.RowSpan="2" Panel.ZIndex="1" Name="BlockPanel" Background="{DynamicResource Background}">
          <local:AngleBorder DockPanel.Dock="Top" Content="Blocks" Direction="Out" Width="100" HorizontalContentAlignment="Center" Margin="0,0,0,4" />
@@ -61,7 +64,7 @@
                   ItemsSource="{Binding CollisionOptions}" SelectedIndex="{Binding CollisionIndex}" />
             </StackPanel>
             <Decorator Grid.Row="1" Height="20" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,30,55" Visibility="{Binding BlockEditorVisible, Converter={StaticResource BoolToVisibility}}">
-               <local:AngleButton DataContext="{Binding PrimaryMap.BlockEditor}" Content="Edit Block"
+               <local:AngleButton DataContext="{Binding PrimaryMap.BlockEditor}" Content="Edit Block" x:Name="EditBlockButton"
                    Direction="Right" Padding="2,0" Command="{res:MethodCommand ToggleShowTiles}" />
             </Decorator>
             <Grid Grid.Row="1" Height="20" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="0,0,0,55">
@@ -157,7 +160,7 @@
                <local:PixelImage DataContext="{Binding MultiTileDrawRender}" />
             </Decorator>
             <Decorator Visibility="{Binding BlockEditorVisible, Converter={StaticResource BoolToVisibility}}" Margin="0,0,10,0">
-               <local:SelectedBlockEditor DataContext="{Binding PrimaryMap.BlockEditor}"/>
+               <local:SelectedBlockEditor x:Name="BlockEditor" DataContext="{Binding PrimaryMap.BlockEditor}"/>
             </Decorator>
          </Grid>
          <ScrollViewer Name="BlockViewer">
@@ -920,7 +923,7 @@
       </Border>
 
       <!-- Tutorials Panel -->
-      <local:TutorialControl x:Name="TutorialsControl" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" DataContext="{Binding Tutorials}" />
+      <local:TutorialControl x:Name="TutorialsControl" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" DataContext="{Binding Tutorials}" EnterTutorial="OnEnterTutorial" />
 
       <!-- Toolbar -->
       <StackPanel Grid.Column="1" Orientation="Horizontal" Background="{DynamicResource Background}" Margin="1,0,1,5" Panel.ZIndex="2">
@@ -932,8 +935,8 @@
                <Path Stretch="Uniform" Fill="{DynamicResource Secondary}" Data="{res:Icon ThinMinus}" />
             </Button>
          </StackPanel>
-         <local:AngleButton Direction="Left" Content="Edit Map Header" Command="{res:MethodCommand ToggleHeaderPanel}" Margin="5,0,0,0" />
-         <local:AngleButton Direction="Out" Command="{Binding PrimaryMap.GotoWildData}" Width="110">
+         <local:AngleButton Direction="Left" Content="Edit Map Header" Command="{res:MethodCommand ToggleHeaderPanel}" Margin="5,0,0,0" x:Name="MapHeaderButton" />
+         <local:AngleButton Direction="Out" Command="{Binding PrimaryMap.GotoWildData}" Width="110" x:Name="WildButton">
             <local:AngleButton.Style>
                <Style TargetType="local:AngleButton" BasedOn="{StaticResource {x:Type local:AngleButton}}">
                   <Style.Triggers>
@@ -962,8 +965,9 @@
                </TextBlock.Style>
             </TextBlock>
          </local:AngleButton>
-         <local:AngleButton Direction="Right" Content="Edit Border Block" DataContext="{Binding PrimaryMap.BorderEditor}" Command="{res:MethodCommand ToggleBorderEditor}" Margin="0,0,5,0" />
-         <Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Secondary}" MouseLeftButtonDown="EventTemplateDown" Margin="5,0,0,0" Tag="{x:Static map:EventCreationType.Object}" ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Object">
+         <local:AngleButton Direction="Right" Content="Edit Border Block" DataContext="{Binding PrimaryMap.BorderEditor}" Command="{res:MethodCommand ToggleBorderEditor}" Margin="0,0,5,0" x:Name="EditBorderButton" />
+         <Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Secondary}" Name="ObjectEventTemplate"
+                 MouseLeftButtonDown="EventTemplateDown" Margin="5,0,0,0" Tag="{x:Static map:EventCreationType.Object}" ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Object">
             <local:PixelImage DataContext="{Binding Templates.ObjectTemplateImage}" VerticalAlignment="Center" HorizontalAlignment="Center" TransparentBrush="{DynamicResource Secondary}"/>
          </Border>
          <ToggleButton Padding="0" Width="12" Height="12" VerticalAlignment="Top" Name="ShowTemplateSettingsButton" IsChecked="{Binding ShowTemplateSettings}">
@@ -1098,21 +1102,23 @@
                </Grid>
             </Border>
          </Popup>
-         <Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Accent}"
-                 MouseLeftButtonDown="EventTemplateDown" Margin="5,0" Tag="{x:Static map:EventCreationType.Warp}"
-                 ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Warp">
-            <TextBlock Text="W" HorizontalAlignment="Center" VerticalAlignment="Center" FontStyle="Italic" />
-         </Border>
-         <Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Stream2}"
-                 MouseLeftButtonDown="EventTemplateDown" Margin="5,0" Tag="{x:Static map:EventCreationType.Script}"
-                 ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Script">
-            <TextBlock Text="Sc" HorizontalAlignment="Center" VerticalAlignment="Center" FontStyle="Italic" />
-         </Border>
-         <Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Error}"
-                 MouseLeftButtonDown="EventTemplateDown" Margin="5,0" Tag="{x:Static map:EventCreationType.Signpost}"
-                 ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Signpost">
-            <TextBlock Text="Sp" HorizontalAlignment="Center" VerticalAlignment="Center" FontStyle="Italic" />
-         </Border>
+         <StackPanel Name="OtherEventTemplates" Orientation="Horizontal">
+            <Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Accent}"
+                    MouseLeftButtonDown="EventTemplateDown" Margin="5,0" Tag="{x:Static map:EventCreationType.Warp}"
+                    ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Warp">
+               <TextBlock Text="W" HorizontalAlignment="Center" VerticalAlignment="Center" FontStyle="Italic" />
+            </Border>
+            <Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Stream2}"
+                    MouseLeftButtonDown="EventTemplateDown" Margin="5,0" Tag="{x:Static map:EventCreationType.Script}"
+                    ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Script">
+               <TextBlock Text="Sc" HorizontalAlignment="Center" VerticalAlignment="Center" FontStyle="Italic" />
+            </Border>
+            <Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Error}"
+                    MouseLeftButtonDown="EventTemplateDown" Margin="5,0" Tag="{x:Static map:EventCreationType.Signpost}"
+                    ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Signpost">
+               <TextBlock Text="Sp" HorizontalAlignment="Center" VerticalAlignment="Center" FontStyle="Italic" />
+            </Border>
+         </StackPanel>
          <Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Text1}"
                  Visibility="{Binding PrimaryMap.CanCreateFlyEvent, Converter={StaticResource BoolToVisibility}}"
                  MouseLeftButtonDown="EventTemplateDown" Margin="5,0" Tag="{x:Static map:EventCreationType.Fly}"
diff --git a/src/HexManiac.WPF/Controls/MapTab.xaml.cs b/src/HexManiac.WPF/Controls/MapTab.xaml.cs
index fdd56270..d67e3844 100644
--- a/src/HexManiac.WPF/Controls/MapTab.xaml.cs
+++ b/src/HexManiac.WPF/Controls/MapTab.xaml.cs
@@ -81,6 +81,23 @@ namespace HavenSoft.HexManiac.WPF.Controls {
          }
       }
 
+      private void OnEnterTutorial(object sender, MapTutorialViewModel tutorial) {
+         var index = (Tutorial)(tutorial.Index - 1);
+         if (index == Tutorial.LeftClickBlock_SelectBlock) FocusElement.Raise(BlockViewer);
+         if (index == Tutorial.BlockButton_EditBlocks) FocusElement.Raise(EditBlockButton);
+         if (index == Tutorial.ToolbarButton_GotoWildData) FocusElement.Raise(WildButton);
+         if (index == Tutorial.ToolbarButton_EditMapHeader) FocusElement.Raise(MapHeaderButton);
+         if (index == Tutorial.ClickBlock_DrawTile) FocusElement.Raise(BlockEditor);
+         if (index == Tutorial.BackButton_GoBack) FocusElement.Raise(BackButtonWidget);
+         if (index == Tutorial.ToolbarUndo_Undo) FocusElement.Raise(UndoButtonWidget);
+         if (index == Tutorial.ToolbarButton_EditBorderBlock) FocusElement.Raise(EditBorderButton);
+         if (index == Tutorial.ToolbarTemplate_ConfigureObject) FocusElement.Raise(ShowTemplateSettingsButton);
+         if (index == Tutorial.ToolbarTemplate_CreateObject) FocusElement.Raise(ObjectEventTemplate);
+         if (index == Tutorial.ToolbarTemplate_CreateEvent) FocusElement.Raise(OtherEventTemplates);
+
+         // TODO cycle events needs focus too
+      }
+
       #region Map Interaction
 
       private MouseButton withinMapInteraction = MouseButton.XButton1; // track which button is being used. Set to XButton1 when not in use.
diff --git a/src/HexManiac.WPF/Controls/TutorialControl.xaml b/src/HexManiac.WPF/Controls/TutorialControl.xaml
index 5135e764..a2760dcb 100644
--- a/src/HexManiac.WPF/Controls/TutorialControl.xaml
+++ b/src/HexManiac.WPF/Controls/TutorialControl.xaml
@@ -15,7 +15,7 @@
          <ItemsControl.ItemTemplate>
             <!-- Each card is 400x90, with 100x90 on the left for the icon/title and 300x90 for the description. -->
             <DataTemplate>
-               <Border BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Backlight}">
+               <Border BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Backlight}" MouseEnter="OnEnterTutorial">
                   <Canvas Width="398" Height="88">
                      <Decorator Width="98" Height="78">
                         <Path Data="{Binding Icon, Converter={StaticResource IconConverter}}" Stretch="Uniform" Margin="5,20,5,5" Fill="{DynamicResource Secondary}" />
diff --git a/src/HexManiac.WPF/Controls/TutorialControl.xaml.cs b/src/HexManiac.WPF/Controls/TutorialControl.xaml.cs
index 90e2c70b..c128fb73 100644
--- a/src/HexManiac.WPF/Controls/TutorialControl.xaml.cs
+++ b/src/HexManiac.WPF/Controls/TutorialControl.xaml.cs
@@ -1,4 +1,5 @@
-using HavenSoft.HexManiac.Core.ViewModels.Map;
+using HavenSoft.HexManiac.Core;
+using HavenSoft.HexManiac.Core.ViewModels.Map;
 using System;
 using System.Windows;
 using System.Windows.Controls;
@@ -13,6 +14,8 @@ namespace HavenSoft.HexManiac.WPF.Controls {
 
       private const double ElementHeight = 90;
 
+      public event EventHandler<MapTutorialViewModel> EnterTutorial;
+
       public MapTutorialsViewModel ViewModel => DataContext as MapTutorialsViewModel;
 
       #region Constructor
@@ -49,6 +52,12 @@ namespace HavenSoft.HexManiac.WPF.Controls {
          Tutorials.BeginAnimation(Canvas.LeftProperty, exitControlAnimaiton);
       }
 
+      private void OnEnterTutorial(object sender, EventArgs e) {
+         var element = (FrameworkElement)sender;
+         if (element.DataContext is not MapTutorialViewModel tutorial) return;
+         EnterTutorial.Raise(this, tutorial);
+      }
+
       private void HandleTutorialChanged(object sender, EventArgs e) {
          var tut = (MapTutorialViewModel)sender;
          var ui = (FrameworkElement)Tutorials.ItemContainerGenerator.ContainerFromItem(tut);
diff --git a/src/HexManiac.WPF/Windows/MainWindow.xaml.cs b/src/HexManiac.WPF/Windows/MainWindow.xaml.cs
index b1dec0dd..de9c04f2 100644
--- a/src/HexManiac.WPF/Windows/MainWindow.xaml.cs
+++ b/src/HexManiac.WPF/Windows/MainWindow.xaml.cs
@@ -484,10 +484,10 @@ namespace HavenSoft.HexManiac.WPF.Windows {
       private void ExecuteAnimation(object sender, ExecutedRoutedEventArgs e) {
          if (!IsActive) return;
          var element = (FrameworkElement)e.Parameter;
-         Dispatcher.BeginInvoke((Action<FrameworkElement>)DispatchAnimation, DispatcherPriority.ApplicationIdle, element);
+         Dispatcher.BeginInvoke(DispatchAnimation, DispatcherPriority.ApplicationIdle, element);
       }
 
-      private static readonly Duration fastTime = TimeSpan.FromSeconds(.3);
+      private static readonly Duration fastTime = TimeSpan.FromSeconds(.5);
       private void DispatchAnimation(FrameworkElement element) {
          if (element == GotoBox && !ViewModel.GotoViewModel.ShowAll) return;
          var point = element.TranslatePoint(new System.Windows.Point(), ContentPanel);
@@ -495,10 +495,10 @@ namespace HavenSoft.HexManiac.WPF.Windows {
          FocusAnimationElement.Visibility = Visibility.Visible;
          FocusAnimationElement.RenderTransform = new TranslateTransform();
 
-         var xAnimation = new DoubleAnimation(-ContentPanel.ActualWidth + point.X + element.ActualWidth, fastTime);
-         var yAnimation = new DoubleAnimation(point.Y, fastTime);
-         var widthAnimation = new DoubleAnimation(ContentPanel.ActualWidth, element.ActualWidth, fastTime);
-         var heightAnimation = new DoubleAnimation(ContentPanel.ActualHeight, element.ActualHeight, fastTime);
+         var xAnimation = new DoubleAnimation((-ContentPanel.ActualWidth + point.X + element.ActualWidth) / 2, -ContentPanel.ActualWidth + point.X + element.ActualWidth, fastTime) { DecelerationRatio = 1 };
+         var yAnimation = new DoubleAnimation(point.Y / 2, point.Y, fastTime) { DecelerationRatio = 1 };
+         var widthAnimation = new DoubleAnimation(ContentPanel.ActualWidth / 2, element.ActualWidth, fastTime) { DecelerationRatio = 1 };
+         var heightAnimation = new DoubleAnimation(ContentPanel.ActualHeight / 2, element.ActualHeight, fastTime) { DecelerationRatio = 1 };
          heightAnimation.Completed += (sender1, e1) => {
             FocusAnimationElement.Visibility = Visibility.Collapsed;
             FocusAnimationElement.RenderTransform = null;