From 19952ef634d93bcca8b0c855ec358e9aeb3b81f4 Mon Sep 17 00:00:00 2001 From: Niels Laute Date: Thu, 13 May 2021 05:44:26 +0200 Subject: [PATCH] [FZ Editor] Keyboard support for canvas editor (#11211) * Canvas zone keyboard accesible * Keyboard interaction * Update * Updated styles * Update src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml * Update src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml Co-authored-by: Niels Laute Co-authored-by: Enrico Giordani --- .../editor/FancyZonesEditor/CanvasZone.xaml | 77 ++++++++--- .../FancyZonesEditor/CanvasZone.xaml.cs | 123 +++++++++++++++++- .../editor/FancyZonesEditor/Themes/Dark.xaml | 1 + .../Themes/HighContrast1.xaml | 1 + .../Themes/HighContrast2.xaml | 1 + .../Themes/HighContrastBlack.xaml | 1 + .../Themes/HighContrastWhite.xaml | 1 + .../editor/FancyZonesEditor/Themes/Light.xaml | 1 + 8 files changed, 179 insertions(+), 27 deletions(-) diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml index 7865cec136..da36e8db46 100644 --- a/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml +++ b/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml @@ -5,10 +5,10 @@ xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:props="clr-namespace:FancyZonesEditor.Properties" xmlns:local="clr-namespace:FancyZonesEditor" - mc:Ignorable="d" + mc:Ignorable="d" + KeyDown="Border_KeyDown" Background="Transparent" d:DesignHeight="450" d:DesignWidth="800"> - - - + + + + @@ -118,9 +150,10 @@ Content="ID" FontWeight="SemiBold" FontSize="64" - Foreground="{DynamicResource PrimaryForegroundBrush}" /> + Foreground="{Binding ElementName=RootBorder, Path=BorderBrush}" /> public partial class CanvasZone : UserControl { + private readonly int moveAmount = 10; + public CanvasZone() { InitializeComponent(); @@ -303,12 +305,6 @@ namespace FancyZonesEditor UpdateFromSnappyHelpers(); } - private void OnClose(object sender, RoutedEventArgs e) - { - ((Panel)Parent).Children.Remove(this); - Model.RemoveZoneAt(ZoneIndex); - } - // Corner dragging private void Caption_DragStarted(object sender, System.Windows.Controls.Primitives.DragStartedEventArgs e) { @@ -368,5 +364,120 @@ namespace FancyZonesEditor snappyX = NewDefaultSnappyHelper(true, ResizeMode.TopEdge); snappyY = null; } + + private void OnClose(object sender, RoutedEventArgs e) + { + RemoveZone(); + } + + private void RemoveZone() + { + ((Panel)Parent).Children.Remove(this); + Model.RemoveZoneAt(ZoneIndex); + } + + private void Border_KeyDown(object sender, KeyEventArgs e) + { + if (e.Key != Key.Tab) + { + e.Handled = true; + if (e.Key == Key.Delete) + { + RemoveZone(); + } + else if (e.Key == Key.Right) + { + if (IsShiftKeyDown()) + { + // Make the zone larger (height) + MoveZoneX(moveAmount / 2, ResizeMode.TopEdge, ResizeMode.BottomEdge); + MoveZoneX(-moveAmount / 2, ResizeMode.BottomEdge, ResizeMode.BottomEdge); + } + else + { + // Move zone right + MoveZoneX(moveAmount, ResizeMode.BothEdges, ResizeMode.BothEdges); + } + } + else if (e.Key == Key.Left) + { + if (IsShiftKeyDown()) + { + // Make the zone smaller (height) + MoveZoneX(-moveAmount / 2, ResizeMode.TopEdge, ResizeMode.BottomEdge); + MoveZoneX(moveAmount / 2, ResizeMode.BottomEdge, ResizeMode.BottomEdge); + } + else + { + // Move zone left + MoveZoneX(-moveAmount, ResizeMode.BothEdges, ResizeMode.BothEdges); + } + } + else if (e.Key == Key.Up) + { + if (IsShiftKeyDown()) + { + // Make the zone larger (height) + MoveZoneY(moveAmount / 2, ResizeMode.TopEdge, ResizeMode.BottomEdge); + MoveZoneY(-moveAmount / 2, ResizeMode.BottomEdge, ResizeMode.BottomEdge); + } + else + { + // Move zone up + MoveZoneY(-moveAmount, ResizeMode.BothEdges, ResizeMode.BothEdges); + } + } + else if (e.Key == Key.Down) + { + if (IsShiftKeyDown()) + { + // Make the zone smaller (height) + MoveZoneY(-moveAmount / 2, ResizeMode.TopEdge, ResizeMode.BottomEdge); + MoveZoneY(moveAmount / 2, ResizeMode.BottomEdge, ResizeMode.BottomEdge); + } + else + { + // Move zone down + MoveZoneY(moveAmount, ResizeMode.BothEdges, ResizeMode.BothEdges); + } + } + } + } + + private void MoveZoneX(int value, ResizeMode top, ResizeMode bottom) + { + snappyX = NewDefaultSnappyHelper(true, top); + snappyY = NewDefaultSnappyHelper(false, bottom); + snappyX.Move(value); + UpdateFromSnappyHelpers(); + } + + private void MoveZoneY(int value, ResizeMode top, ResizeMode bottom) + { + snappyX = NewDefaultSnappyHelper(true, bottom); + snappyY = NewDefaultSnappyHelper(false, top); + snappyY.Move(value); + UpdateFromSnappyHelpers(); + } + + private bool IsShiftKeyDown() + { + if (Keyboard.IsKeyDown(Key.LeftShift) || Keyboard.IsKeyDown(Key.RightShift)) + { + return true; + } + else + { + return false; + } + } + + private void Border_PreviewMouseDown(object sender, MouseButtonEventArgs e) + { + // Set (keyboard)focus on this zone when click + Border selectedBorder = sender as Border; + selectedBorder.Focus(); + Keyboard.Focus(selectedBorder); + } } } diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Dark.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Dark.xaml index 60a75c507e..6f47b0c872 100644 --- a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Dark.xaml +++ b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Dark.xaml @@ -31,5 +31,6 @@ + \ No newline at end of file diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrast1.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrast1.xaml index eec4727e94..87087d1bdd 100644 --- a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrast1.xaml +++ b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrast1.xaml @@ -25,5 +25,6 @@ + \ No newline at end of file diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrast2.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrast2.xaml index 8efc9fca1d..f3ef75dfc4 100644 --- a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrast2.xaml +++ b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrast2.xaml @@ -25,5 +25,6 @@ + \ No newline at end of file diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrastBlack.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrastBlack.xaml index ce9c959d02..590943262e 100644 --- a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrastBlack.xaml +++ b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrastBlack.xaml @@ -25,5 +25,6 @@ + \ No newline at end of file diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrastWhite.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrastWhite.xaml index 94ef28dc47..2e10cf47e4 100644 --- a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrastWhite.xaml +++ b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/HighContrastWhite.xaml @@ -25,5 +25,6 @@ + \ No newline at end of file diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Light.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Light.xaml index 5df2580a2f..ae95aeedda 100644 --- a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Light.xaml +++ b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Light.xaml @@ -31,5 +31,6 @@ + \ No newline at end of file