Keyboard navigation layers

CHANGELOG.md

@@ -4,7 +4,27 @@
 
 > - Breaking Changes:
 >	- Added ProcessHandledEvents to IInputHandler and removed it from InputProcessor
+>	- Renamed EditorGestures.Editor.ResetViewportLocation to EditorGestures.Editor.ResetViewport
 > - Features:
+>	- Introduced a new BringIntoView method overload in NodifyEditor that accepts an offset from the viewport edges
+>	- Added BringIntoViewEdgeOffset to NodifyEditor to control the viewport edge offset when bringing the focused element into view
+>	- Added ResetViewport to NodifyEditor to reset the viewport's location and zoom
+>	- Improved tab and directional navigation, ensuring that focused elements are automatically brought into view
+>	- Added keyboard navigation layers for nodes, connections and decorators; restricting keyboard navigation to the active layer
+>	- Added ActiveNavigationLayer, ActivateNextNavigationLayer, ActivatePreviousNavigationLayer, RegisterNavigationLayer, RemoveNavigationLayer and ActivateNavigationLayer to NodifyEditor for keyboard layers management
+>	- Added KeyboardNavigationLayer property to NodifyEditor that allows navigating through the ItemContainers
+>	- Added AutoRegisterConnectionsLayer, AutoRegisterDecoratorsLayer, AutoFocusFirstElement, AutoPanOnNodeFocus, PanViewportOnKeyboardDrag and MinimumNavigationStepSize to NodifyEditor
+>	- Added EditorGestures.Editor.Keyboard for keyboard navigation gestures
+>	- Added FindNextFocusTarget, OnElementFocused and OnKeyboardNavigationLayerActivated virtual methods to NodifyEditor
+>	- Added new gestures for keyboard navigation available in EditorGestures.Editor.Keyboard
+>	- Added ToggleContentSelection to GroupingNode and its corresponding gesture to toggle the selection of nodes inside the group
+>	- Added ZoomIn, ZoomOut and ResetViewport methods to the Minimap control
+>	- Added ZoomIn, ZoomOut, ResetViewport and Pan gestures to EditorGestures.Minimap
+>	- Added NavigationStepSize static property to Minimap
+>	- Added Unbind to all gestures inside EditorGestures
+>	- Added the KeyComboGesture that requires a trigger key to be held down before pressing a combo key
+>	- Added FocusVisualPen and FocusVisualPadding dependency properties to BaseConnection
+>	- Added default focus visuals for base editor controls that can be included by referencing the FocusVisual.xaml file
 > - Bugfixes:
 
 #### **Version 7.0.4**

Examples/Nodify.Calculator/App.xaml

@@ -1,13 +1,43 @@
 <Application x:Class="Nodify.Calculator.App"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:nodify="https://miroiu.github.io/nodify"
              StartupUri="MainWindow.xaml">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary Source="pack://application:,,,/Nodify;component/Themes/Dark.xaml" />
+                <ResourceDictionary Source="pack://application:,,,/Nodify;component/Themes/FocusVisual.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/Nodify.Shared;component/Themes/Icons.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/Nodify.Shared;component/Themes/Dark.xaml" />
+
+                <ResourceDictionary>
+
+                    <Style x:Key="{x:Static SystemParameters.FocusVisualStyleKey}">
+                        <Setter Property="Control.Template">
+                            <Setter.Value>
+                                <ControlTemplate>
+                                    <Rectangle StrokeThickness="1"
+                                               StrokeDashArray="2"
+                                               Margin="-2"
+                                               RadiusX="3"
+                                               RadiusY="3"
+                                               Stroke="DodgerBlue" />
+                                </ControlTemplate>
+                            </Setter.Value>
+                        </Setter>
+                    </Style>
+
+                    <!--WPF is wonderful-->
+                    <Style x:Key="OriginalNodeInputStyle"
+                           TargetType="{x:Type nodify:NodeInput}"
+                           BasedOn="{StaticResource {x:Type nodify:NodeInput}}" />
+
+                    <Style x:Key="OriginalNodeOutputStyle"
+                           TargetType="{x:Type nodify:NodeOutput}"
+                           BasedOn="{StaticResource {x:Type nodify:NodeOutput}}" />
+
+                </ResourceDictionary>
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Application.Resources>

Examples/Nodify.Calculator/EditorView.xaml

@@ -142,7 +142,7 @@
                              x:Name="Editor">
             <nodify:NodifyEditor.Resources>
                 <Style TargetType="{x:Type nodify:NodeInput}"
-                       BasedOn="{StaticResource {x:Type nodify:NodeInput}}">
+                       BasedOn="{StaticResource OriginalNodeInputStyle}">
                     <Setter Property="Header"
                             Value="{Binding}" />
                     <Setter Property="IsConnected"
@@ -166,7 +166,7 @@
                 </Style>
 
                 <Style TargetType="{x:Type nodify:NodeOutput}"
-                       BasedOn="{StaticResource {x:Type nodify:NodeOutput}}">
+                       BasedOn="{StaticResource OriginalNodeOutputStyle}">
                     <Setter Property="Header"
                             Value="{Binding}" />
                     <Setter Property="IsConnected"
@@ -235,6 +235,11 @@
                                                     Command="{Binding GroupSelectionCommand}" />
                                     </nodify:NodifyEditor.InputBindings>
 
+                                    <nodify:NodifyEditor.CommandBindings>
+                                        <CommandBinding Command="{x:Static ApplicationCommands.ContextMenu}"
+                                                        Executed="OpenContextMenu_Executed" />
+                                    </nodify:NodifyEditor.CommandBindings>
+
                                     <CompositeCollection>
                                         <nodify:DecoratorContainer DataContext="{Binding OperationsMenu}"
                                                                    Location="{Binding Location}">
@@ -251,7 +256,8 @@
                                     <ColumnDefinition Width="Auto" />
                                 </Grid.ColumnDefinitions>
 
-                                <ItemsControl ItemsSource="{Binding Input}">
+                                <ItemsControl ItemsSource="{Binding Input}"
+                                              Focusable="False">
                                     <ItemsControl.ItemTemplate>
                                         <DataTemplate>
                                             <nodify:NodeInput />
@@ -278,9 +284,11 @@
                                 <StackPanel>
                                     <Button Style="{StaticResource IconButton}"
                                             Content="{StaticResource PlusIcon}"
+                                            FocusVisualStyle="{StaticResource {x:Static SystemParameters.FocusVisualStyleKey}}"
                                             Command="{Binding AddInputCommand}" />
                                     <Button Style="{StaticResource IconButton}"
                                             Content="{StaticResource RemoveKeyIcon}"
+                                            FocusVisualStyle="{StaticResource {x:Static SystemParameters.FocusVisualStyleKey}}"
                                             Command="{Binding RemoveInputCommand}" />
                                 </StackPanel>
                             </DataTemplate>
@@ -353,8 +361,13 @@
                 </DataTemplate>
 
                 <DataTemplate DataType="{x:Type local:OperationGroupViewModel}">
-                    <nodify:GroupingNode Header="{Binding Title}"
-                                         ActualSize="{Binding GroupSize, Mode=TwoWay}" />
+                    <nodify:GroupingNode ActualSize="{Binding GroupSize, Mode=TwoWay}">
+                        <nodify:GroupingNode.Header>
+                            <shared:EditableTextBlock Text="{Binding Title}"
+                                                      FontWeight="SemiBold"
+                                                      IsEditing="True" />
+                        </nodify:GroupingNode.Header>
+                    </nodify:GroupingNode>
                 </DataTemplate>
 
                 <DataTemplate DataType="{x:Type local:OperationViewModel}">
@@ -371,6 +384,11 @@
                             Command="{Binding GroupSelectionCommand}" />
             </nodify:NodifyEditor.InputBindings>
 
+            <nodify:NodifyEditor.CommandBindings>
+                <CommandBinding Command="{x:Static ApplicationCommands.ContextMenu}"
+                                Executed="OpenContextMenu_Executed" />
+            </nodify:NodifyEditor.CommandBindings>
+
             <nodify:NodifyEditor.Triggers>
                 <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                     <BeginStoryboard Name="AnimateBorder"
@@ -401,7 +419,8 @@
                                  Opacity="0.7" />
             </Border.Background>
             <ScrollViewer>
-                <ItemsControl ItemsSource="{Binding Calculator.OperationsMenu.AvailableOperations}">
+                <ItemsControl ItemsSource="{Binding Calculator.OperationsMenu.AvailableOperations}"
+                              Focusable="False">
                     <ItemsControl.ItemContainerStyle>
                         <Style>
                             <Setter Property="FrameworkElement.Margin"
@@ -420,7 +439,9 @@
                                          Input="{Binding Input}"
                                          BorderBrush="{StaticResource AnimatedBrush}"
                                          BorderThickness="2"
-                                         MouseMove="OnNodeDrag">
+                                         MouseMove="OnNodeDrag"
+                                         Focusable="True"
+                                         KeyboardNavigation.TabNavigation="None">
                                 <nodify:Node.Output>
                                     <CompositeCollection>
                                         <sys:String>Output</sys:String>

Examples/Nodify.Calculator/EditorView.xaml.cs

@@ -67,5 +67,20 @@ private void OnNodeDrag(object sender, MouseEventArgs e)
                 DragDrop.DoDragDrop(this, data, DragDropEffects.Copy);
             }
         }
+
+        private void OpenContextMenu_Executed(object sender, ExecutedRoutedEventArgs e)
+        {
+            if (e.Source is NodifyEditor editor && editor.DataContext is CalculatorViewModel calculator)
+            {
+                if (calculator.OperationsMenu.IsVisible)
+                {
+                    calculator.OperationsMenu.Close();
+                }
+                else
+                {
+                    calculator.OperationsMenu.OpenAt(editor.ViewportLocation + new Vector(editor.ViewportSize.Width / 3, editor.ViewportSize.Height / 3));
+                }
+            }
+        }
     }
 }

Examples/Nodify.Calculator/MainWindow.xaml.cs

@@ -1,5 +1,6 @@
 using Nodify.Interactivity;
 using System.Windows;
+using System.Windows.Input;
 
 namespace Nodify.Calculator
 {
@@ -10,6 +11,16 @@ public MainWindow()
             InitializeComponent();
 
             EditorGestures.Mappings.Editor.Cutting.Unbind();
+
+            EventManager.RegisterClassHandler(
+                    typeof(UIElement),
+                    Keyboard.PreviewGotKeyboardFocusEvent,
+                    (KeyboardFocusChangedEventHandler)OnPreviewGotKeyboardFocus);
+        }
+
+        private void OnPreviewGotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
+        {
+            Title = e.NewFocus.ToString();
         }
     }
 }

Examples/Nodify.Calculator/OperationsMenuView.xaml

@@ -9,7 +9,8 @@
              MinWidth="250"
              d:DesignHeight="400"
              d:DesignWidth="250"
-             d:DataContext="{d:DesignInstance local:OperationsMenuViewModel}">
+             d:DataContext="{d:DesignInstance local:OperationsMenuViewModel}"
+             Visibility="{Binding IsVisible, Converter={shared:BooleanToVisibilityConverter}}">
     <UserControl.Resources>
         <Style TargetType="{x:Type TextBlock}"
                BasedOn="{StaticResource {x:Type TextBlock}}">
@@ -22,15 +23,17 @@
             CornerRadius="3"
             Background="{DynamicResource Node.BackgroundBrush}"
             BorderBrush="{StaticResource NodifyEditor.SelectionRectangleStrokeBrush}"
-            BorderThickness="2"
-            Visibility="{Binding IsVisible, Converter={shared:BooleanToVisibilityConverter}}">
+            BorderThickness="2">
         <Grid>
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
 
             <ItemsControl Grid.Row="1"
+                          x:Name="OperationsList"
+                          Focusable="True"
+                          KeyboardNavigation.TabNavigation="Cycle"
                           ItemsSource="{Binding AvailableOperations}">
                 <ItemsControl.ItemTemplate>
                     <DataTemplate DataType="{x:Type local:OperationInfoViewModel}">
@@ -46,6 +49,8 @@
                                 HorizontalContentAlignment="Left">
                             <Button.Style>
                                 <Style TargetType="{x:Type Button}">
+                                    <Setter Property="FocusVisualStyle"
+                                            Value="{StaticResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
                                     <Setter Property="Template">
                                         <Setter.Value>
                                             <ControlTemplate TargetType="{x:Type Button}">

Examples/Nodify.Calculator/OperationsMenuView.xaml.cs

@@ -1,12 +1,51 @@
-using System.Windows.Controls;
+using System;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
 
 namespace Nodify.Calculator
 {
     public partial class OperationsMenuView : UserControl
     {
+        private readonly WeakReference<UIElement?> _focusToRestore = new WeakReference<UIElement?>(null!);
+
         public OperationsMenuView()
         {
             InitializeComponent();
+
+            IsVisibleChanged += OperationsMenuView_IsVisibleChanged;
+        }
+
+        private void OperationsMenuView_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
+        {
+            if (!IsLoaded)
+            {
+                return;
+            }
+
+            if (e.NewValue is true)
+            {
+                _focusToRestore.SetTarget(Keyboard.FocusedElement as UIElement);
+                Dispatcher.BeginInvoke(new Action(() => OperationsList.Focus()), System.Windows.Threading.DispatcherPriority.Input);
+            }
+            else if (e.NewValue is false)
+            {
+                if (_focusToRestore.TryGetTarget(out var elementToFocus))
+                {
+                    Dispatcher.BeginInvoke(new Action(() =>
+                    {
+                        elementToFocus!.Focus();
+                    }), System.Windows.Threading.DispatcherPriority.Input);
+                }
+            }
+        }
+
+        protected override void OnKeyDown(KeyEventArgs e)
+        {
+            if (e.Key == Key.Escape)
+            {
+                SetCurrentValue(VisibilityProperty, Visibility.Collapsed);
+            }
         }
     }
 }

Examples/Nodify.Playground/App.xaml

@@ -1,14 +1,35 @@
 <Application x:Class="Nodify.Playground.App"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:nodify="https://miroiu.github.io/nodify"
              StartupUri="MainWindow.xaml">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary>
+                    <Style x:Key="{x:Static SystemParameters.FocusVisualStyleKey}">
+                        <Setter Property="Control.Template">
+                            <Setter.Value>
+                                <ControlTemplate>
+                                    <Rectangle StrokeThickness="1"
+                                               StrokeDashArray="2"
+                                               Margin="-2"
+                                               RadiusX="3"
+                                               RadiusY="3"
+                                               Stroke="DodgerBlue" />
+                                </ControlTemplate>
+                            </Setter.Value>
+                        </Setter>
+                    </Style>
+                </ResourceDictionary>
                 <ResourceDictionary Source="pack://application:,,,/Nodify;component/Themes/Nodify.xaml" />
+                <ResourceDictionary Source="pack://application:,,,/Nodify;component/Themes/FocusVisual.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/Nodify.Shared;component/Themes/Icons.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/Nodify.Shared;component/Themes/Nodify.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/Nodify.Playground;component/Themes/Nodify.xaml" />
+                <ResourceDictionary>
+                    <Color x:Key="NodifyEditor.FocusVisualColor">DodgerBlue</Color>
+                </ResourceDictionary>
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Application.Resources>

Examples/Nodify.Playground/Editor/NodifyEditorView.xaml

@@ -175,6 +175,12 @@
                     Value="{Binding SelectableConnections, Source={x:Static local:EditorSettings.Instance}}" />
             <Setter Property="IsSelected"
                     Value="{Binding IsSelected}" />
+            <Setter Property="StrokeThickness"
+                    Value="{Binding ConnectionStrokeThickness, Source={x:Static local:EditorSettings.Instance}}" />
+            <Setter Property="OutlineThickness"
+                    Value="{Binding ConnectionOutlineThickness, Source={x:Static local:EditorSettings.Instance}}" />
+            <Setter Property="FocusVisualPadding"
+                    Value="{Binding ConnectionFocusVisualPadding, Source={x:Static local:EditorSettings.Instance}}" />
         </Style>
 
         <DataTemplate x:Key="CircuitConnectionTemplate">
@@ -531,7 +537,8 @@
                         </nodify:Node.ContentTemplate>
                         <nodify:Node.HeaderTemplate>
                             <DataTemplate>
-                                <ItemsControl ItemsSource="{Binding}">
+                                <ItemsControl ItemsSource="{Binding}"
+                                              Focusable="False">
                                     <ItemsControl.ItemTemplate>
                                         <DataTemplate DataType="{x:Type local:ConnectorViewModel}">
                                             <nodify:NodeInput Orientation="Vertical" />
@@ -548,7 +555,8 @@
                         </nodify:Node.HeaderTemplate>
                         <nodify:Node.FooterTemplate>
                             <DataTemplate>
-                                <ItemsControl ItemsSource="{Binding}">
+                                <ItemsControl ItemsSource="{Binding}"
+                                              Focusable="False">
                                     <ItemsControl.ItemTemplate>
                                         <DataTemplate DataType="{x:Type local:ConnectorViewModel}">
                                             <nodify:NodeOutput Orientation="Vertical" />