From 1c9755d38a78e54d2b84870629a9db9785df4fda Mon Sep 17 00:00:00 2001
From: "Wei (Waley) Zhang" <wzzhangwaley@gmail.com>
Date: Fri, 16 Aug 2019 16:11:43 -0700
Subject: [PATCH] Adds zoom buttons to graph controls (#637)

---
 src/Calculator/Resources/en-US/Resources.resw |  36 +++++
 .../GraphingCalculator.xaml                   | 143 +++++++++++++++++-
 .../GraphingCalculator.xaml.cpp               |  15 ++
 .../GraphingCalculator.xaml.h                 |  10 ++
 src/GraphControl/Control/Grapher.cpp          |  19 +++
 src/GraphControl/Control/Grapher.h            |   2 +
 6 files changed, 223 insertions(+), 2 deletions(-)

diff --git a/src/Calculator/Resources/en-US/Resources.resw b/src/Calculator/Resources/en-US/Resources.resw
index 2502d4a..13476ed 100644
--- a/src/Calculator/Resources/en-US/Resources.resw
+++ b/src/Calculator/Resources/en-US/Resources.resw
@@ -3435,6 +3435,42 @@
     <value>^</value>
     <comment>{Locked}This is the character that should trigger this button. Note that it is a character and not a key, so it does not come from the Windows::System::VirtualKey enum.</comment>
   </data>
+  <data name="zoomResetButton.[using:CalculatorApp.Common]KeyboardShortcutManager.VirtualKeyControlChord" xml:space="preserve">
+    <value>Home</value>
+    <comment>{Locked}This is the shortcut for the zoom reset button.</comment>
+  </data>
+  <data name="zoomResetButton.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
+    <value>Reset View</value>
+    <comment>This is the tool tip automation name for the Calculator zoom reset button.</comment>
+  </data>
+  <data name="zoomResetButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>Reset View</value>
+    <comment>Screen reader prompt for the reset zoom button.</comment>
+  </data>
+  <data name="zoomInButton.[using:CalculatorApp.Common]KeyboardShortcutManager.VirtualKeyControlChord" xml:space="preserve">
+    <value>Add</value>
+    <comment>{Locked}This is the shortcut for the zoom in button.</comment>
+  </data>
+  <data name="zoomInButton.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
+    <value>Zoom In</value>
+    <comment>This is the tool tip automation name for the Calculator zoom in button.</comment>
+  </data>
+  <data name="zoomInButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>Zoom In</value>
+    <comment>Screen reader prompt for the zoom in button.</comment>
+  </data>
+  <data name="zoomOutButton.[using:CalculatorApp.Common]KeyboardShortcutManager.VirtualKeyControlChord" xml:space="preserve">
+    <value>Subtract</value>
+    <comment>{Locked}This is the shortcut for the zoom out button.</comment>
+  </data>
+  <data name="zoomOutButton.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
+    <value>Zoom Out</value>
+    <comment>This is the tool tip automation name for the Calculator zoom out button.</comment>
+  </data>
+  <data name="zoomOutButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>Zoom Out</value>
+    <comment>Screen reader prompt for the zoom out button.</comment>
+  </data>
   <data name="EquationInputButtonPlaceholderText" xml:space="preserve">
     <value>Add Equation</value>
     <comment>Placeholder text for the equation input button</comment>
diff --git a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
index 1c7e9aa..67ce13b 100644
--- a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
+++ b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
@@ -12,6 +12,22 @@
              mc:Ignorable="d">
 
     <UserControl.Resources>
+        <Style x:Key="ZoomRepeatButtonStyle" TargetType="RepeatButton">
+            <Setter Property="Width" Value="36"/>
+            <Setter Property="Height" Value="36"/>
+            <Setter Property="CornerRadius" Value="18"/>
+            <Setter Property="BorderThickness" Value="1"/>
+            <Setter Property="FontSize" Value="12"/>
+            <Setter Property="Delay" Value="500"/>
+            <Setter Property="Interval" Value="40"/>
+        </Style>
+        <Style x:Key="ZoomButtonStyle" TargetType="Button">
+            <Setter Property="Width" Value="36"/>
+            <Setter Property="Height" Value="36"/>
+            <Setter Property="CornerRadius" Value="18"/>
+            <Setter Property="BorderThickness" Value="1"/>
+            <Setter Property="FontSize" Value="12"/>
+        </Style>
         <converters:BooleanToVisibilityConverter x:Name="BooleanToVisibilityConverter"/>
         <converters:BooleanToVisibilityNegationConverter x:Name="BooleanToVisibilityNegationConverter"/>
     </UserControl.Resources>
@@ -30,8 +46,7 @@
         <Grid x:Name="LeftGrid"
               Grid.Row="1"
               Grid.Column="0">
-
-            <graphControl:Grapher Name="GraphingControl" Grid.Row="0"
+            <graphControl:Grapher Name="GraphingControl"
                                   Margin="4,7,4,4"
                                   EquationsSource="{x:Bind ViewModel.Equations, Mode=OneWay}"
                                   ForceProportionalAxes="True"
@@ -215,6 +230,130 @@
                     </Flyout>
                 </Button.Flyout>
             </Button>
+
+            <Grid>
+                <Grid.Resources>
+                    <ResourceDictionary>
+                        <ResourceDictionary.ThemeDictionaries>
+                            <ResourceDictionary x:Key="Default">
+                                <SolidColorBrush x:Key="RepeatButtonBackground" Color="White"/>
+                                <SolidColorBrush x:Key="RepeatButtonBackgroundPointerOver" Color="White"/>
+                                <SolidColorBrush x:Key="RepeatButtonBackgroundPressed" Color="White"/>
+                                <SolidColorBrush x:Key="RepeatButtonBackgroundDisabled" Color="White"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrush"
+                                                 Opacity="0.6"
+                                                 Color="Black"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrushPointerOver"
+                                                 Opacity="0.8"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrushPressed"
+                                                 Opacity="1.0"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrushDisabled"
+                                                 Opacity="0.2"
+                                                 Color="Black"/>
+                                <SolidColorBrush x:Key="RepeatButtonForeground"
+                                                 Opacity="0.6"
+                                                 Color="Black"/>
+                                <SolidColorBrush x:Key="RepeatButtonForegroundPointerOver"
+                                                 Opacity="0.8"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonForegroundPressed"
+                                                 Opacity="1.0"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonForegroundDisabled"
+                                                 Opacity="0.2"
+                                                 Color="Black"/>
+                                <SolidColorBrush x:Key="ButtonBackground" Color="White"/>
+                                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="White"/>
+                                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="White"/>
+                                <SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="White"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrush"
+                                                 Opacity="0.6"
+                                                 Color="Black"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
+                                                 Opacity="0.8"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrushPressed"
+                                                 Opacity="1.0"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrushDisabled"
+                                                 Opacity="0.2"
+                                                 Color="Black"/>
+                                <SolidColorBrush x:Key="ButtonForeground"
+                                                 Opacity="0.6"
+                                                 Color="Black"/>
+                                <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                 Opacity="0.8"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                 Opacity="1.0"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="ButtonForegroundDisabled"
+                                                 Opacity="0.2"
+                                                 Color="Black"/>
+                            </ResourceDictionary>
+                            <ResourceDictionary x:Key="HighContrast">
+                                <SolidColorBrush x:Key="RepeatButtonBackground" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBackgroundPointerOver" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBackgroundPressed" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBackgroundDisabled" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrush" Color="{ThemeResource SystemColorWindowTextColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrushPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrushPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrushDisabled" Color="{ThemeResource SystemColorGrayTextColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonForeground" Color="{ThemeResource SystemColorWindowTextColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonForegroundPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonForegroundPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonForegroundDisabled" Color="{ThemeResource SystemColorGrayTextColor}"/>
+                                <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrush" Color="{ThemeResource SystemColorWindowTextColor}"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrushPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrushDisabled" Color="{ThemeResource SystemColorGrayTextColor}"/>
+                                <SolidColorBrush x:Key="ButtonForeground" Color="{ThemeResource SystemColorWindowTextColor}"/>
+                                <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="ButtonForegroundPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="ButtonForegroundDisabled" Color="{ThemeResource SystemColorGrayTextColor}"/>
+                            </ResourceDictionary>
+                        </ResourceDictionary.ThemeDictionaries>
+                    </ResourceDictionary>
+                </Grid.Resources>
+
+                <RepeatButton x:Uid="zoomInButton"
+                              Margin="0,0,12,108"
+                              HorizontalAlignment="Right"
+                              VerticalAlignment="Bottom"
+                              Style="{ThemeResource ZoomRepeatButtonStyle}"
+                              FontFamily="{StaticResource SymbolThemeFontFamily}"
+                              AutomationProperties.AutomationId="zoomInButton"
+                              Command="{x:Bind ZoomInButtonPressed, Mode=OneTime}"
+                              Content="&#xE710;"/>
+
+                <RepeatButton x:Uid="zoomOutButton"
+                              Margin="0,0,12,60"
+                              HorizontalAlignment="Right"
+                              VerticalAlignment="Bottom"
+                              Style="{ThemeResource ZoomRepeatButtonStyle}"
+                              FontFamily="{StaticResource SymbolThemeFontFamily}"
+                              AutomationProperties.AutomationId="zoomOutButton"
+                              Command="{x:Bind ZoomOutButtonPressed, Mode=OneTime}"
+                              Content="&#xE738;"/>
+
+                <Button x:Uid="zoomResetButton"
+                        Margin="0,0,12,12"
+                        HorizontalAlignment="Right"
+                        VerticalAlignment="Bottom"
+                        Style="{ThemeResource ZoomButtonStyle}"
+                        FontFamily="{StaticResource SymbolThemeFontFamily}"
+                        AutomationProperties.AutomationId="zoomResetButton"
+                        Command="{x:Bind ZoomResetButtonPressed, Mode=OneTime}"
+                        Content="&#xE895;"/>
+            </Grid>
+
         </Grid>
 
         <!-- Right portion of the screen -->
diff --git a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp
index fc87801..ccfb1fe 100644
--- a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp
+++ b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp
@@ -242,3 +242,18 @@ void GraphingCalculator::TextBoxGotFocus(TextBox^ sender, RoutedEventArgs^ e)
 {
     sender->SelectAll();
 }
+
+void GraphingCalculator::OnZoomInCommand(Object ^ /* parameter */)
+{
+    GraphingControl->ZoomFromCenter(zoomInScale);
+}
+
+void GraphingCalculator::OnZoomOutCommand(Object ^ /* parameter */)
+{
+    GraphingControl->ZoomFromCenter(zoomOutScale);
+}
+
+void GraphingCalculator::OnZoomResetCommand(Object ^ /* parameter */)
+{
+    GraphingControl->ResetGrid();
+}
diff --git a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.h b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.h
index 4212ea3..b5d3dfa 100644
--- a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.h
+++ b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.h
@@ -6,12 +6,18 @@
 
 namespace CalculatorApp
 {
+    constexpr double zoomInScale = 1 / 1.0625;
+    constexpr double zoomOutScale = 1.0625;
+
     public ref class GraphingCalculator sealed : public Windows::UI::Xaml::Data::INotifyPropertyChanged
     {
     public:
         GraphingCalculator();
 
         OBSERVABLE_OBJECT();
+        COMMAND_FOR_METHOD(ZoomOutButtonPressed, GraphingCalculator::OnZoomOutCommand);
+        COMMAND_FOR_METHOD(ZoomInButtonPressed, GraphingCalculator::OnZoomInCommand);
+        COMMAND_FOR_METHOD(ZoomResetButtonPressed, GraphingCalculator::OnZoomResetCommand);
 
         property CalculatorApp::ViewModel::GraphingCalculatorViewModel^ ViewModel
         {
@@ -29,6 +35,10 @@ namespace CalculatorApp
         void TextBoxKeyDown(Windows::UI::Xaml::Controls::TextBox^ textbox, Windows::UI::Xaml::Input::KeyRoutedEventArgs^ e);
         void SubmitTextbox(Windows::UI::Xaml::Controls::TextBox^ textbox);
 
+        void OnZoomInCommand(Object ^ parameter);
+        void OnZoomOutCommand(Object ^ parameter);
+        void OnZoomResetCommand(Object ^ parameter);
+
         double validateDouble(Platform::String^ value, double defaultValue);
 
         CalculatorApp::ViewModel::GraphingCalculatorViewModel^ m_viewModel;
diff --git a/src/GraphControl/Control/Grapher.cpp b/src/GraphControl/Control/Grapher.cpp
index 66f2375..3fb3890 100644
--- a/src/GraphControl/Control/Grapher.cpp
+++ b/src/GraphControl/Control/Grapher.cpp
@@ -92,6 +92,11 @@ namespace GraphControl
         }
     }
 
+    void Grapher::ZoomFromCenter(double scale)
+    {
+        ScaleRange(0, 0, scale);
+    }
+
     void Grapher::ScaleRange(double centerX, double centerY, double scale)
     {
         if (m_graph != nullptr && m_renderMain != nullptr)
@@ -106,6 +111,20 @@ namespace GraphControl
         }
     }
 
+    void Grapher::ResetGrid()
+    {
+        if (m_graph != nullptr && m_renderMain != nullptr)
+        {
+            if (auto renderer = m_graph->GetRenderer())
+            {
+                if (SUCCEEDED(renderer->ResetRange()))
+                {
+                    m_renderMain->RunRenderPass();
+                }
+            }
+        }
+    }
+
     void Grapher::OnApplyTemplate()
     {
         auto swapChainPanel = dynamic_cast<SwapChainPanel^>(GetTemplateChild(StringReference(s_templateKey_SwapChainPanel)));
diff --git a/src/GraphControl/Control/Grapher.h b/src/GraphControl/Control/Grapher.h
index 2353e7d..9178ac9 100644
--- a/src/GraphControl/Control/Grapher.h
+++ b/src/GraphControl/Control/Grapher.h
@@ -127,6 +127,8 @@ namespace GraphControl
         event Windows::Foundation::EventHandler<Windows::Foundation::Collections::IMap<Platform::String^, double>^>^ VariablesUpdated;
 
         void SetVariable(Platform::String^ variableName, double newValue);
+        void ZoomFromCenter(double scale);
+        void ResetGrid();
 
     protected:
         #pragma region Control Overrides