Add context menu to rich edit to allow for keyboard support (#854)

* Add context menu to rich edit to allow for keyboard support

* Update src/Calculator/Controls/EquationTextBox.cpp

Co-Authored-By: Pepe Rivera <joseartrivera@gmail.com>

* Check for focus before triggering submit

src/Calculator/App.xaml

@@ -1890,7 +1890,7 @@
 
                                 <VisualStateManager.VisualStateGroups>
                                     <VisualStateGroup x:Name="CommonStates">
-                                        
+
                                         <VisualState x:Name="Normal">
                                             <Storyboard>
                                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EquationBoxBorder" Storyboard.TargetProperty="BorderBrush">
@@ -2179,7 +2179,27 @@
                                                                   AcceptsReturn="false"
                                                                   InputScope="Text"
                                                                   MaxLength="2048"
-                                                                  TextWrapping="NoWrap"/>
+                                                                  TextWrapping="NoWrap">
+                                            <Controls:MathRichEditBox.ContextFlyout>
+                                                <MenuFlyout x:Name="MathRichEditContextMenu">
+                                                    <MenuFlyoutItem x:Name="FunctionAnalysisMenuItem">
+                                                        <MenuFlyoutItem.Icon>
+                                                            <FontIcon FontFamily="{StaticResource CalculatorFontFamily}" Glyph="&#xE3B5;"/>
+                                                        </MenuFlyoutItem.Icon>
+                                                    </MenuFlyoutItem>
+                                                    <MenuFlyoutItem x:Name="ChangeFunctionStyleMenuItem">
+                                                        <MenuFlyoutItem.Icon>
+                                                            <FontIcon FontFamily="{StaticResource CalculatorFontFamily}" Glyph="&#xE790;"/>
+                                                        </MenuFlyoutItem.Icon>
+                                                    </MenuFlyoutItem>
+                                                    <MenuFlyoutItem x:Name="RemoveFunctionMenuItem">
+                                                        <MenuFlyoutItem.Icon>
+                                                            <FontIcon FontFamily="{StaticResource CalculatorFontFamily}" Glyph="&#xECC9;"/>
+                                                        </MenuFlyoutItem.Icon>
+                                                    </MenuFlyoutItem>
+                                                </MenuFlyout>
+                                            </Controls:MathRichEditBox.ContextFlyout>
+                                        </Controls:MathRichEditBox>
                                         <!-- TODO: Use brush overrides here instead of a new style, use a new style for the EquationButton above once that has more functionality -->
                                         <Button x:Name="DeleteButton"
                                                 Grid.Column="3"
@@ -2197,14 +2217,14 @@
                                                 IsTabStop="False"
                                                 Visibility="Collapsed"/>
                                         <FontIcon x:Name="ErrorIcon"
-                                                Grid.Column="3"
+                                                  Grid.Column="3"
-                                                MinWidth="34"
+                                                  MinWidth="34"
-                                                VerticalAlignment="Stretch"
+                                                  VerticalAlignment="Stretch"
-                                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                                                AutomationProperties.AccessibilityView="Raw"
+                                                  FontSize="16"
-                                                Glyph="&#xE783;"
+                                                  AutomationProperties.AccessibilityView="Raw"
-                                                FontSize="16"
+                                                  Glyph="&#xE783;"
-                                                Visibility="Collapsed"/>
+                                                  Visibility="Collapsed"/>
                                         <Button x:Name="RemoveButton"
                                                 x:Uid="removeButton"
                                                 Grid.Column="3"

src/Calculator/Controls/EquationTextBox.cpp

@@ -36,6 +36,12 @@ void EquationTextBox::OnApplyTemplate()
     m_removeButton = dynamic_cast<Button ^>(GetTemplateChild("RemoveButton"));
     m_functionButton = dynamic_cast<Button ^>(GetTemplateChild("FunctionButton"));
     m_colorChooserButton = dynamic_cast<ToggleButton ^>(GetTemplateChild("ColorChooserButton"));
+    m_richEditContextMenu = dynamic_cast<MenuFlyout ^>(GetTemplateChild("MathRichEditContextMenu"));
+    m_kgfEquationMenuItem = dynamic_cast<MenuFlyoutItem ^>(GetTemplateChild("FunctionAnalysisMenuItem"));
+    m_removeMenuItem = dynamic_cast<MenuFlyoutItem ^>(GetTemplateChild("RemoveFunctionMenuItem"));
+    m_colorChooserMenuItem = dynamic_cast<MenuFlyoutItem ^>(GetTemplateChild("ChangeFunctionStyleMenuItem"));
+
+    auto resProvider = AppResourceProvider::GetInstance();
 
     if (m_richEditBox != nullptr)
     {
@@ -50,13 +56,18 @@ void EquationTextBox::OnApplyTemplate()
         m_equationButton->Click += ref new RoutedEventHandler(this, &EquationTextBox::OnEquationButtonClicked);
 
          auto toolTip = ref new ToolTip();
-         auto resProvider = AppResourceProvider::GetInstance();
          auto equationButtonMessage = m_equationButton->IsChecked->Value ? resProvider->GetResourceString(L"showEquationButtonToolTip") : resProvider->GetResourceString(L"hideEquationButtonToolTip");
          toolTip->Content = equationButtonMessage;
          ToolTipService::SetToolTip(m_equationButton, toolTip);
          AutomationProperties::SetName(m_equationButton, equationButtonMessage);
     }
 
+    if (m_richEditContextMenu != nullptr)
+    {
+        m_richEditContextMenu->Opening +=
+            ref new Windows::Foundation::EventHandler<Platform::Object ^>(this, &EquationTextBox::OnRichEditMenuOpening);
+    }
+
     if (m_kgfEquationButton != nullptr)
     {
         m_kgfEquationButton->Click += ref new RoutedEventHandler(this, &EquationTextBox::OnKGFEquationButtonClicked);
@@ -72,17 +83,35 @@ void EquationTextBox::OnApplyTemplate()
         m_removeButton->Click += ref new RoutedEventHandler(this, &EquationTextBox::OnRemoveButtonClicked);
     }
 
+    if (m_removeMenuItem != nullptr)
+    {
+        m_removeMenuItem->Text = resProvider->GetResourceString(L"removeMenuItem");
+        m_removeMenuItem->Click += ref new RoutedEventHandler(this, &EquationTextBox::OnRemoveButtonClicked);
+    }
+
     if (m_colorChooserButton != nullptr)
     {
         m_colorChooserButton->Click += ref new RoutedEventHandler(this, &EquationTextBox::OnColorChooserButtonClicked);
     }
 
+    if (m_colorChooserMenuItem != nullptr)
+    {
+        m_colorChooserMenuItem->Text = resProvider->GetResourceString(L"colorChooserMenuItem");
+        m_colorChooserMenuItem->Click += ref new RoutedEventHandler(this, &EquationTextBox::OnColorChooserButtonClicked);
+    }
+
     if (m_functionButton != nullptr)
     {
         m_functionButton->Click += ref new RoutedEventHandler(this, &EquationTextBox::OnFunctionButtonClicked);
         m_functionButton->IsEnabled = false;
     }
 
+    if (m_kgfEquationMenuItem != nullptr)
+    {
+        m_kgfEquationMenuItem->Text = resProvider->GetResourceString(L"functionAnalysisMenuItem");
+        m_kgfEquationMenuItem->Click += ref new RoutedEventHandler(this, &EquationTextBox::OnFunctionButtonClicked);
+    }
+
     if (ColorChooserFlyout != nullptr)
     {
         ColorChooserFlyout->Opened += ref new EventHandler<Object ^>(this, &EquationTextBox::OnColorFlyoutOpened);
@@ -244,7 +273,7 @@ void EquationTextBox::UpdateDeleteButtonVisualState()
 {
     String ^ state;
 
-    if (ShouldDeleteButtonBeVisible())
+    if (RichEditHasContent())
     {
         state = "ButtonVisible";
     }
@@ -313,7 +342,7 @@ void EquationTextBox::SetEquationText(Platform::String ^ equationText)
     }
 }
 
-bool EquationTextBox::ShouldDeleteButtonBeVisible()
+bool EquationTextBox::RichEditHasContent()
 {
     String ^ text;
 
@@ -323,3 +352,11 @@ bool EquationTextBox::ShouldDeleteButtonBeVisible()
     }
     return (!text->IsEmpty() && m_HasFocus);
 }
+
+void EquationTextBox::OnRichEditMenuOpening(Object ^ /*sender*/, Object ^ /*args*/)
+{
+    if (m_kgfEquationMenuItem != nullptr)
+    {
+        m_kgfEquationMenuItem->IsEnabled = EquationTextBox::RichEditHasContent();
+    }
+}

src/Calculator/Controls/EquationTextBox.h

@@ -46,7 +46,7 @@ namespace CalculatorApp
         private:
             void UpdateCommonVisualState();
             void UpdateDeleteButtonVisualState();
-            bool ShouldDeleteButtonBeVisible();
+            bool RichEditHasContent();
 
             void OnRichEditBoxGotFocus(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
             void OnRichEditBoxLostFocus(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
@@ -58,6 +58,7 @@ namespace CalculatorApp
             void OnRemoveButtonClicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
             void OnColorChooserButtonClicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
             void OnFunctionButtonClicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
+            void OnRichEditMenuOpening(Platform::Object ^ sender, Platform::Object ^ args);
 
             void OnColorFlyoutOpened(Platform::Object^ sender, Platform::Object^ e);
             void OnColorFlyoutClosed(Platform::Object^ sender, Platform::Object^ e);
@@ -72,6 +73,11 @@ namespace CalculatorApp
             Windows::UI::Xaml::Controls::Button^ m_functionButton;
             Windows::UI::Xaml::Controls::Primitives::ToggleButton^ m_colorChooserButton;
 
+            Windows::UI::Xaml::Controls::MenuFlyout^ m_richEditContextMenu;
+            Windows::UI::Xaml::Controls::MenuFlyoutItem^ m_kgfEquationMenuItem;
+            Windows::UI::Xaml::Controls::MenuFlyoutItem^ m_removeMenuItem;
+            Windows::UI::Xaml::Controls::MenuFlyoutItem^ m_colorChooserMenuItem;
+
             bool m_isPointerOver;
             bool m_isColorChooserFlyoutOpen;
         };

src/Calculator/Resources/en-US/Resources.resw

@@ -4130,6 +4130,10 @@
     <value>Analyze equation</value>
     <comment>This is the automation name for the analyze equation button</comment>
   </data>
+  <data name="functionAnalysisMenuItem" xml:space="preserve">
+    <value>Analyze equation</value>
+    <comment>This is the text for the for the analyze equation context menu command</comment>
+  </data>
   <data name="removeButton.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
     <value>Remove equation</value>
     <comment>This is the tooltip for the graphing calculator remove equation buttons</comment>
@@ -4138,6 +4142,10 @@
     <value>Remove equation</value>
     <comment>This is the automation name for the graphing calculator remove equation buttons</comment>
   </data>
+  <data name="removeMenuItem" xml:space="preserve">
+    <value>Remove equation</value>
+    <comment>This is the text for the for the remove equation context menu command</comment>
+  </data>
   <data name="shareButton.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
     <value>Share</value>
     <comment>This is the automation name for the graphing calculator share button.</comment>
@@ -4154,6 +4162,10 @@
     <value>Change equation style</value>
     <comment>This is the automation name for the graphing calculator equation style button</comment>
   </data>
+  <data name="colorChooserMenuItem" xml:space="preserve">
+    <value>Change equation style</value>
+    <comment>This is the text for the for the equation style context menu command</comment>
+  </data>
   <data name="showEquationButtonToolTip" xml:space="preserve">
     <value>Show</value>
     <comment>This is the tooltip/automation name shown when visibility is set to hidden in the graphing calculator</comment>

src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp

@@ -36,7 +36,7 @@ EquationInputArea::EquationInputArea()
         ref new TypedEventHandler<AccessibilitySettings ^, Object ^>(this, &EquationInputArea::OnHighContrastChanged);
 
     ReloadAvailableColors(m_accessibilitySettings->HighContrast);
-  
+
     InitializeComponent();
 }
 
@@ -88,7 +88,12 @@ void EquationInputArea::InputTextBox_Submitted(Object ^ sender, RoutedEventArgs
 {
     auto tb = static_cast<EquationTextBox ^>(sender);
     auto eq = static_cast<EquationViewModel ^>(tb->DataContext);
-    eq->Expression = tb->GetEquationText();
+
+    // eq can be null if the equation has been removed
+    if (eq != nullptr)
+    {
+        eq->Expression = tb->GetEquationText();
+    }
 
     if (tb->HasFocus)
     {
@@ -115,8 +120,16 @@ void EquationInputArea::EquationTextBox_RemoveButtonClicked(Object ^ sender, Rou
 void EquationInputArea::EquationTextBox_KeyGraphFeaturesButtonClicked(Object ^ sender, RoutedEventArgs ^ e)
 {
     auto tb = static_cast<EquationTextBox ^>(sender);
+
+    // ensure the equation has been submitted before trying to get key graph features out of it
+    if (tb->HasFocus)
+    {
+        EquationInputArea::InputTextBox_Submitted(sender, e);
+    }
+
     auto eq = static_cast<EquationViewModel ^>(tb->DataContext);
     EquationVM = eq;
+
     KeyGraphFeaturesRequested(EquationVM, ref new RoutedEventArgs());
 }