Use path instead of glyph for active tracing (#910)

* Use path instead of glyph
This commit is contained in:
Eric Wong 2020-01-10 16:42:55 -08:00 committed by GitHub
parent 240792a775
commit c7c9bf0513
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 79 additions and 17 deletions

View File

@ -312,6 +312,11 @@
<Setter Property="Background" Value="{ThemeResource SystemControlAcrylicElementBrush}"/>
</Style>
<SolidColorBrush x:Key="SwitchToggleBackground" Color="#40000000"/>
<Style x:Key="TracePointerPathStyle" TargetType="Path">
<Setter Property="Fill" Value="White"/>
<Setter Property="Stroke" Value="Black"/>
<Setter Property="StrokeThickness" Value="1"/>
</Style>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<Style x:Key="ThemedSwitchModeToggleButtonStyle"
@ -338,6 +343,11 @@
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="Background" Value="{ThemeResource SystemControlAcrylicElementBrush}"/>
</Style>
<Style x:Key="TracePointerPathStyle" TargetType="Path">
<Setter Property="Fill" Value="White"/>
<Setter Property="Stroke" Value="Black"/>
<Setter Property="StrokeThickness" Value="1"/>
</Style>
<SolidColorBrush x:Key="SwitchToggleBackground" Color="#60ffffff"/>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
@ -358,6 +368,11 @@
<Setter Property="Background" Value="{ThemeResource ToolTipBackground}"/>
</Style>
<SolidColorBrush x:Key="SwitchToggleBackground" Color="{ThemeResource SystemColorWindowColor}"/>
<Style x:Key="TracePointerPathStyle" TargetType="Path">
<Setter Property="Fill" Value="{ThemeResource SystemColorHighlightTextColor}"/>
<Setter Property="Stroke" Value="{ThemeResource SystemColorWindowTextColor}"/>
<Setter Property="StrokeThickness" Value="2"/>
</Style>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
@ -413,6 +428,7 @@
<Grid x:Name="LeftGrid"
Grid.Row="1"
Padding="0,4,0,0"
SizeChanged="LeftGrid_SizeChanged"
Visibility="{x:Bind ShouldDisplayPanel(IsSmallState, SwitchModeToggleButton.IsOn, x:True), Mode=OneWay}">
<Grid.Resources>
<ResourceDictionary>
@ -507,18 +523,17 @@
</Button>
</StackPanel>
</Border>
<Border x:Name="TracePointer"
Width="16"
Height="18"
Margin="48,50,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Visibility="Collapsed">
<FontIcon Foreground="Red"
FontFamily="{StaticResource CalculatorFontFamily}"
FontSize="18"
Glyph="&#xE3B3;"/>
</Border>
<Canvas>
<Grid x:Name="TracePointer" Visibility="Collapsed">
<Border x:Name="CursorShadow"/>
<Path x:Name="CursorPath"
Width="18"
Height="18"
Style="{ThemeResource TracePointerPathStyle}"
Data="M0 0 l1371 1371 H538 l-538 538 Z"
Stretch="Uniform"/>
</Grid>
</Canvas>
<Border MinWidth="36"
Margin="0,0,12,12"
HorizontalAlignment="Right"

View File

@ -48,12 +48,14 @@ using namespace Windows::UI::Xaml::Input;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Media::Imaging;
using namespace Windows::UI::Popups;
using namespace Windows::UI::ViewManagement;
constexpr auto sc_ViewModelPropertyName = L"ViewModel";
DEPENDENCY_PROPERTY_INITIALIZATION(GraphingCalculator, IsSmallState);
GraphingCalculator::GraphingCalculator()
: m_accessibilitySettings{ ref new AccessibilitySettings() }
{
InitializeComponent();
@ -82,6 +84,13 @@ GraphingCalculator::GraphingCalculator()
virtualKey->Key = (VirtualKey)187; // OemAdd key
virtualKey->Modifiers = VirtualKeyModifiers::Control;
ZoomInButton->KeyboardAccelerators->Append(virtualKey);
// add shadow to the trace pointer
AddTracePointerShadow();
// hide the shadow in high contrast mode
CursorShadow->Visibility = m_accessibilitySettings->HighContrast ? ::Visibility::Collapsed : ::Visibility::Visible;
m_accessibilitySettings->HighContrastChanged +=
ref new TypedEventHandler<AccessibilitySettings ^, Object ^>(this, &GraphingCalculator::OnHighContrastChanged);
}
void GraphingCalculator::OnShowTracePopupChanged(bool newValue)
@ -185,8 +194,8 @@ void GraphingCalculator::OnTracePointChanged(Point newPoint)
void CalculatorApp::GraphingCalculator::OnPointerPointChanged(Windows::Foundation::Point newPoint)
{
// Move the pointer glyph to where it is supposed to be.
// because the glyph is centered and has some spacing, to get the point to properly line up with the glyph, move the x point over 2 px
TracePointer->Margin = Thickness(newPoint.X - 2, newPoint.Y, 0, 0);
Canvas::SetLeft(TracePointer, newPoint.X);
Canvas::SetTop(TracePointer, newPoint.Y);
}
GraphingCalculatorViewModel ^ GraphingCalculator::ViewModel::get()
@ -537,6 +546,21 @@ void GraphingCalculator::DisplayGraphSettings()
flyoutGraphSettings->ShowAt(GraphSettingsButton);
}
void CalculatorApp::GraphingCalculator::AddTracePointerShadow()
{
auto compositor = ::Hosting::ElementCompositionPreview::GetElementVisual(CursorPath)->Compositor;
auto dropShadow = compositor->CreateDropShadow();
dropShadow->BlurRadius = 6;
dropShadow->Opacity = 0.33f;
dropShadow->Offset = ::Numerics::float3(2, 2, 0);
dropShadow->Mask = CursorPath->GetAlphaMask();
auto shadowSpriteVisual = compositor->CreateSpriteVisual();
shadowSpriteVisual->Size = ::Numerics::float2(static_cast<float>(CursorPath->ActualWidth), static_cast<float>(CursorPath->ActualHeight));
shadowSpriteVisual->Shadow = dropShadow;
::Hosting::ElementCompositionPreview::SetElementChildVisual(CursorShadow, shadowSpriteVisual);
}
void GraphingCalculator::OnSettingsFlyout_Closing(FlyoutBase ^ sender, FlyoutBaseClosingEventArgs ^ args)
{
auto flyout = static_cast<Flyout ^>(sender);
@ -544,6 +568,18 @@ void GraphingCalculator::OnSettingsFlyout_Closing(FlyoutBase ^ sender, FlyoutBas
args->Cancel = graphingSetting->CanBeClose();
}
void GraphingCalculator::LeftGrid_SizeChanged(Object ^ /*sender*/, SizeChangedEventArgs ^ e)
{
// Initialize the pointer to the correct location to match initial value in GraphControl\DirectX\RenderMain.cpp
Canvas::SetLeft(TracePointer, e->NewSize.Width / 2 + 40);
Canvas::SetTop(TracePointer, e->NewSize.Height / 2 - 40);
}
void GraphingCalculator::OnHighContrastChanged(AccessibilitySettings ^ sender, Object ^ /*args*/)
{
CursorShadow->Visibility = sender->HighContrast ? ::Visibility::Collapsed : ::Visibility::Visible;
}
void GraphingCalculator::OnEquationFormatRequested(Object ^ sender, MathRichEditBoxFormatRequest ^ e)
{
if (!e->OriginalText->IsEmpty())

View File

@ -74,6 +74,7 @@ public ref class GraphingCalculator sealed : public Windows::UI::Xaml::Data::INo
void GraphSettingsButton_Click(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
void SwitchModeToggleButton_Toggled(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
void DisplayGraphSettings();
void AddTracePointerShadow();
private:
Windows::Foundation::EventRegistrationToken m_dataRequestedToken;
@ -82,8 +83,11 @@ public ref class GraphingCalculator sealed : public Windows::UI::Xaml::Data::INo
Windows::Foundation::EventRegistrationToken m_activeTracingKeyUpToken;
Windows::Foundation::EventRegistrationToken m_ActiveTracingPointerCaptureLost;
CalculatorApp::ViewModel::GraphingCalculatorViewModel ^ m_viewModel;
Windows::UI::ViewManagement::AccessibilitySettings ^ m_accessibilitySettings;
void
OnSettingsFlyout_Closing(Windows::UI::Xaml::Controls::Primitives::FlyoutBase ^ sender, Windows::UI::Xaml::Controls::Primitives::FlyoutBaseClosingEventArgs ^ args);
void LeftGrid_SizeChanged(Platform::Object ^ sender, Windows::UI::Xaml::SizeChangedEventArgs ^ e);
void OnHighContrastChanged(Windows::UI::ViewManagement::AccessibilitySettings ^ sender, Platform::Object ^ args);
void OnEquationFormatRequested(Platform::Object ^ sender, CalculatorApp::Controls::MathRichEditBoxFormatRequest ^ e);
};

View File

@ -29,6 +29,7 @@
#include <string>
#include <tuple>
#include <iomanip>
#include <WindowsNumerics.h>
// C++\WinRT Headers
#include "winrt/base.h"

View File

@ -287,7 +287,7 @@ namespace GraphControl
if (graphExpression = m_solver->ParseInput(request))
{
initResult = TryInitializeGraph(keepCurrentView, graphExpression.get());
if (initResult != nullopt)
{
UpdateGraphOptions(m_graph->GetOptions(), validEqs);

View File

@ -44,8 +44,6 @@ namespace GraphControl::DX
RegisterEventHandlers();
m_drawActiveTracing = false;
m_activeTracingPointerLocation.X = 50;
m_activeTracingPointerLocation.Y = 50;
}
RenderMain::~RenderMain()
@ -65,6 +63,7 @@ namespace GraphControl::DX
renderer->SetDpi(dpi, dpi);
renderer->SetGraphSize(static_cast<unsigned int>(m_swapChainPanel->ActualWidth), static_cast<unsigned int>(m_swapChainPanel->ActualHeight));
}
}
}
@ -120,6 +119,13 @@ namespace GraphControl::DX
{
// TODO: Replace this with the sizedependent initialization of your app's content.
RunRenderPass();
if (m_swapChainPanel != nullptr)
{
// Initialize the active tracing location to just above and to the right of the center of the graph area
m_activeTracingPointerLocation.X = m_swapChainPanel->ActualWidth / 2 + 40;
m_activeTracingPointerLocation.Y = m_swapChainPanel->ActualHeight / 2 - 40;
}
}
bool RenderMain::RunRenderPass()