Format MathML equations before submission to the GraphControl (#926)

* Format richedit input

* fix spelling error

src/Calculator/Controls/EquationTextBox.cpp

@@ -54,6 +54,7 @@ void EquationTextBox::OnApplyTemplate()
         m_richEditBox->SelectionFlyout = nullptr;
         m_richEditBox->EquationSubmitted +=
             ref new EventHandler<MathRichEditBoxSubmission ^>(this, &EquationTextBox::OnEquationSubmitted);
+        m_richEditBox->FormatRequest += ref new EventHandler<MathRichEditBoxFormatRequest ^>(this, &EquationTextBox::OnEquationFormatRequested);
     }
 
     if (m_equationButton != nullptr)
@@ -381,3 +382,8 @@ void EquationTextBox::OnEquationSubmitted(Platform::Object ^ sender, MathRichEdi
 
     EquationSubmitted(this, args);
 }
+
+void EquationTextBox::OnEquationFormatRequested(Object ^ sender, MathRichEditBoxFormatRequest ^ args)
+{
+    EquationFormatRequested(this, args);
+}

src/Calculator/Controls/EquationTextBox.h

@@ -30,6 +30,7 @@ namespace CalculatorApp
             event Windows::UI::Xaml::RoutedEventHandler ^ RemoveButtonClicked;
             event Windows::UI::Xaml::RoutedEventHandler ^ KeyGraphFeaturesButtonClicked;
             event Windows::Foundation::EventHandler<MathRichEditBoxSubmission ^> ^ EquationSubmitted;
+            event Windows::Foundation::EventHandler<MathRichEditBoxFormatRequest ^> ^ EquationFormatRequested;
             event Windows::UI::Xaml::RoutedEventHandler ^ EquationButtonClicked;
 
             Platform::String ^ GetEquationText();
@@ -79,6 +80,7 @@ namespace CalculatorApp
             bool m_isPointerOver;
             bool m_isColorChooserFlyoutOpen;
             void OnEquationSubmitted(Platform::Object ^ sender, CalculatorApp::Controls::MathRichEditBoxSubmission ^ args);
+            void OnEquationFormatRequested(Platform::Object ^ sender, CalculatorApp::Controls::MathRichEditBoxFormatRequest ^ args);
         };
     }
 }

src/Calculator/Controls/MathRichEditBox.cpp

@@ -190,6 +190,15 @@ void MathRichEditBox::SubmitEquation(EquationSubmissionSource source)
     auto newVal = GetMathTextProperty();
     if (MathText != newVal)
     {
+        // Request the final formatting of the text
+        auto formatRequest = ref new MathRichEditBoxFormatRequest(newVal);
+        FormatRequest(this, formatRequest);
+
+        if (!formatRequest->FormattedText->IsEmpty())
+        {
+            newVal = formatRequest->FormattedText;
+        }
+
         SetValue(MathTextProperty, newVal);
         EquationSubmitted(this, ref new MathRichEditBoxSubmission(true, source));
     }

src/Calculator/Controls/MathRichEditBox.h

@@ -30,6 +30,20 @@ namespace CalculatorApp
             }
         };
 
+    public
+        ref class MathRichEditBoxFormatRequest sealed
+        {
+        public:
+            PROPERTY_R(Platform::String^, OriginalText);
+            PROPERTY_RW(Platform::String ^, FormattedText);
+
+        public:
+            MathRichEditBoxFormatRequest(Platform::String^ originalText)
+            {
+                m_OriginalText = originalText;
+            }
+        };
+
     public
         ref class MathRichEditBox sealed : Windows::UI::Xaml::Controls::RichEditBox
         {
@@ -39,6 +53,7 @@ namespace CalculatorApp
             DEPENDENCY_PROPERTY_OWNER(MathRichEditBox);
             DEPENDENCY_PROPERTY_WITH_DEFAULT_AND_CALLBACK(Platform::String ^, MathText, L"");
 
+            event Windows::Foundation::EventHandler<MathRichEditBoxFormatRequest ^> ^ FormatRequest;
             event Windows::Foundation::EventHandler<MathRichEditBoxSubmission^> ^ EquationSubmitted;
             void OnMathTextPropertyChanged(Platform::String ^ oldValue, Platform::String ^ newValue);
             void InsertText(Platform::String ^ text, int cursorOffSet, int selectionLength);

src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml

@@ -778,6 +778,7 @@
                                                       EquationButtonClicked="EquationTextBox_EquationButtonClicked"
                                                       EquationButtonContentIndex="{x:Bind FunctionLabelIndex, Mode=OneWay}"
                                                       EquationColor="{x:Bind local:EquationInputArea.ToSolidColorBrush(LineColor), Mode=OneWay}"
+                                                      EquationFormatRequested="EquationTextBox_EquationFormatRequested"
                                                       EquationSubmitted="EquationTextBox_Submitted"
                                                       GotFocus="EquationTextBox_GotFocus"
                                                       HasError="{x:Bind GraphEquation.HasGraphError, Mode=OneWay}"

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

@@ -76,7 +76,6 @@ void EquationInputArea::AddNewEquation()
         return;
     }
 
-    
     m_lastLineColorIndex = (m_lastLineColorIndex + 1) % AvailableColors->Size;
 
     int colorIndex;
@@ -376,3 +375,8 @@ double EquationInputArea::validateDouble(String ^ value, double defaultValue)
 {
     return numberOfVariables == 0 ? ::Visibility::Collapsed : ::Visibility::Visible;
 }
+
+void EquationInputArea::EquationTextBox_EquationFormatRequested(Object ^ sender, MathRichEditBoxFormatRequest ^ e)
+{
+    EquationFormatRequested(sender, e);
+}

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

@@ -25,6 +25,7 @@ namespace CalculatorApp
         OBSERVABLE_PROPERTY_RW(Windows::Foundation::Collections::IObservableVector<ViewModel::VariableViewModel ^> ^, Variables);
         OBSERVABLE_PROPERTY_RW(Windows::Foundation::Collections::IObservableVector<Windows::UI::Xaml::Media::SolidColorBrush ^> ^, AvailableColors);
         event Windows::Foundation::EventHandler<ViewModel::EquationViewModel^>^ KeyGraphFeaturesRequested;
+        event Windows::Foundation::EventHandler<CalculatorApp::Controls::MathRichEditBoxFormatRequest^> ^ EquationFormatRequested;
 
     public:
         static Windows::UI::Xaml::Visibility ManageEditVariablesButtonVisibility(unsigned int numberOfVariables);
@@ -63,5 +64,6 @@ namespace CalculatorApp
         int m_lastLineColorIndex;
         int m_lastFunctionLabelIndex;
         ViewModel::EquationViewModel ^ m_equationToFocus;
+        void EquationTextBox_EquationFormatRequested(Platform::Object ^ sender, CalculatorApp::Controls::MathRichEditBoxFormatRequest ^ e);
     };
 }

src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml

@@ -614,6 +614,7 @@
             <!-- This control should be within a grid that limits the hight to keep the sticky footer functionality from breaking -->
             <local:EquationInputArea x:Name="EquationInputAreaControl"
                                      Margin="0,4,0,0"
+                                     EquationFormatRequested="OnEquationFormatRequested"
                                      Equations="{x:Bind ViewModel.Equations}"
                                      KeyGraphFeaturesRequested="OnEquationKeyGraphFeaturesRequested"
                                      Variables="{x:Bind ViewModel.Variables}"

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

@@ -249,8 +249,8 @@ void GraphingCalculator::OnDataRequested(DataTransferManager ^ sender, DataReque
                 equationColorHtml << L"color:rgb(" << color.R.ToString()->Data() << L"," << color.G.ToString()->Data() << L"," << color.B.ToString()->Data()
                                   << L");";
 
-                equationHtml << L"<tr style=\"margin: 0pt 0pt 0pt 0pt; padding: 0pt 0pt 0pt 0pt; \"><td><span style=\"font-size: 22pt; line-height: 0;" << equationColorHtml.str()
+                equationHtml << L"<tr style=\"margin: 0pt 0pt 0pt 0pt; padding: 0pt 0pt 0pt 0pt; \"><td><span style=\"font-size: 22pt; line-height: 0;"
-                             << L"\">&#x25A0;</span></td><td><div style=\"margin: 4pt 0pt 0pt 6pt;\">";
+                             << equationColorHtml.str() << L"\">&#x25A0;</span></td><td><div style=\"margin: 4pt 0pt 0pt 6pt;\">";
                 equationHtml << EscapeHtmlSpecialCharacters(expression)->Data();
                 equationHtml << L"</div></td>";
             }
@@ -543,3 +543,11 @@ void GraphingCalculator::OnSettingsFlyout_Closing(FlyoutBase ^ sender, FlyoutBas
     auto graphingSetting = static_cast<GraphingSettings ^>(flyout->Content);
     args->Cancel = graphingSetting->CanBeClose();
 }
+
+void GraphingCalculator::OnEquationFormatRequested(Object ^ sender, MathRichEditBoxFormatRequest ^ e)
+{
+    if (!e->OriginalText->IsEmpty())
+    {
+        e->FormattedText = GraphingControl->FormatMathML(e->OriginalText);
+    }
+}

src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.h

@@ -84,6 +84,7 @@ public ref class GraphingCalculator sealed : public Windows::UI::Xaml::Data::INo
         CalculatorApp::ViewModel::GraphingCalculatorViewModel ^ m_viewModel;
         void
             OnSettingsFlyout_Closing(Windows::UI::Xaml::Controls::Primitives::FlyoutBase ^ sender, Windows::UI::Xaml::Controls::Primitives::FlyoutBaseClosingEventArgs ^ args);
+        void OnEquationFormatRequested(Platform::Object ^ sender, CalculatorApp::Controls::MathRichEditBoxFormatRequest ^ e);
     };
 
 }

src/GraphControl/Control/Grapher.cpp

@@ -859,6 +859,13 @@ String ^ Grapher::ConvertToLinear(String ^ mmlString)
     return ref new String(linearExpression.c_str());
 }
 
+String ^ Grapher::FormatMathML(String ^ mmlString)
+{
+    auto expression = m_solver->ParseInput(mmlString->Data());
+    auto formattedExpression = m_solver->Serialize(expression.get());
+    return ref new String(formattedExpression.c_str());
+}
+
 void Grapher::OnAxesColorPropertyChanged(Windows::UI::Color /*oldValue*/, Windows::UI::Color newValue)
 {
     if (m_graph)

src/GraphControl/Control/Grapher.h

@@ -104,6 +104,7 @@ public
         event Windows::Foundation::EventHandler<Windows::Foundation::Collections::IMap<Platform::String ^, double> ^> ^ VariablesUpdated;
         void SetVariable(Platform::String ^ variableName, double newValue);
         Platform::String ^ ConvertToLinear(Platform::String ^ mmlString);
+        Platform::String ^ FormatMathML(Platform::String ^ mmlString);
 
         /// <summary>
         /// Draw the graph. Call this method if you add or modify an equation.