Merge pull request #257 from miroiu/feature/230-connection-text-background

Draw background rectangle for connection labels

Author: miroiu

CHANGELOG.md

@@ -2,9 +2,14 @@
 
 #### **In development**
 
-> - Breaking Changes:
 > - Features:
+>	- Added ConnectionTemplateSelector, DecoratorTemplateSelector and PendingConnectionTemplateSelector to NodifyEditor to allow selecting the data template based on custom rules
+>	- Added TextBackground, TextPadding and TextCornerRadius dependency properties to BaseConnection to allow styling the background of the connection text
+>	- Added DrawTextBackground to BaseConnection to allow customizing the drawing of the text background
 > - Bugfixes:
+>	- Fixed focus navigation exception when the editor is collapsed
+>	- Fixed connection focus outline drawing inner overlapping lines
+>	- Fixed connection focus outline not updating on directional arrow animation
 
 #### **Version 7.1.0**
 

Examples/Nodify.Playground/Editor/NodifyEditorView.xaml

@@ -77,6 +77,8 @@
                             Value="{StaticResource SquareConnectorColor}" />
                     <Setter Property="OutlineBrush"
                             Value="{StaticResource SquareConnectorOutline}" />
+                    <Setter Property="TextBackground"
+                            Value="{StaticResource SquareConnectorColor}" />
                 </DataTrigger>
                 <DataTrigger Binding="{Binding Input.Shape}"
                              Value="{x:Static local:ConnectorShape.Triangle}">
@@ -86,6 +88,8 @@
                             Value="{StaticResource TriangleConnectorColor}" />
                     <Setter Property="OutlineBrush"
                             Value="{StaticResource TriangleConnectorOutline}" />
+                    <Setter Property="TextBackground"
+                            Value="{StaticResource TriangleConnectorColor}" />
                 </DataTrigger>
                 <Trigger Property="IsMouseDirectlyOver"
                          Value="True">
@@ -129,6 +133,12 @@
                                      Opacity="0.15" />
                 </Setter.Value>
             </Setter>
+            <Setter Property="TextBackground"
+                    Value="{StaticResource Connection.StrokeBrush}" />
+            <Setter Property="TextPadding"
+                    Value="4 2" />
+            <Setter Property="TextCornerRadius"
+                    Value="3" />
             <Setter Property="ToolTip"
                     Value="Double click to split" />
             <Setter Property="Source"

Nodify/Connections/BaseConnection.cs

@@ -138,6 +138,9 @@ public abstract class BaseConnection : Shape, IKeyboardFocusTarget<FrameworkElem
         public static readonly DependencyProperty FocusVisualPaddingProperty = DependencyProperty.Register(nameof(FocusVisualPadding), typeof(double), typeof(BaseConnection), new FrameworkPropertyMetadata(BoxValue.Double1, FrameworkPropertyMetadataOptions.AffectsRender));
         public static readonly DependencyProperty ForegroundProperty = TextBlock.ForegroundProperty.AddOwner(typeof(BaseConnection));
         public static readonly DependencyProperty TextProperty = TextBlock.TextProperty.AddOwner(typeof(BaseConnection), new FrameworkPropertyMetadata(string.Empty, FrameworkPropertyMetadataOptions.AffectsRender));
+        public static readonly DependencyProperty TextBackgroundProperty = DependencyProperty.Register(nameof(TextBackground), typeof(Brush), typeof(BaseConnection), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender));
+        public static readonly DependencyProperty TextPaddingProperty = DependencyProperty.Register(nameof(TextPadding), typeof(Thickness), typeof(BaseConnection), new FrameworkPropertyMetadata(BoxValue.Thickness2, FrameworkPropertyMetadataOptions.AffectsRender));
+        public static readonly DependencyProperty TextCornerRadiusProperty = DependencyProperty.Register(nameof(TextCornerRadius), typeof(double), typeof(BaseConnection), new FrameworkPropertyMetadata(BoxValue.Double0, FrameworkPropertyMetadataOptions.AffectsRender));
         public static readonly DependencyProperty FontSizeProperty = TextElement.FontSizeProperty.AddOwner(typeof(BaseConnection));
         public static readonly DependencyProperty FontFamilyProperty = TextElement.FontFamilyProperty.AddOwner(typeof(BaseConnection));
         public static readonly DependencyProperty FontWeightProperty = TextElement.FontWeightProperty.AddOwner(typeof(BaseConnection));
@@ -423,6 +426,36 @@ public string? Text
             set => SetValue(TextProperty, value);
         }
 
+        /// <summary>
+        /// Gets or sets the padding around the text of the connection. Only applied if <see cref="TextBackground"/> is not null.
+        /// </summary>
+        public Thickness TextPadding
+        {
+            get => (Thickness)GetValue(TextPaddingProperty);
+            set => SetValue(TextPaddingProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets the corner radius of the text background. Only applied if <see cref="TextBackground"/> is not null.
+        /// </summary>
+        public double TextCornerRadius
+        {
+            get => (double)GetValue(TextCornerRadiusProperty);
+            set => SetValue(TextCornerRadiusProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets the background brush of the text. If null, no background is drawn.
+        /// </summary>
+        /// <remarks>
+        /// Customize the appearance of the text background by setting the <see cref="TextPadding"/> and <see cref="TextCornerRadius"/> properties.
+        /// </remarks>
+        public Brush? TextBackground
+        {
+            get => (Brush?)GetValue(TextBackgroundProperty);
+            set => SetValue(TextBackgroundProperty, value);
+        }
+
         /// <inheritdoc cref="TextElement.FontSize" />
         [TypeConverter(typeof(FontSizeConverter))]
         public double FontSize
@@ -980,7 +1013,16 @@ protected override void OnRender(DrawingContext drawingContext)
                 var text = new FormattedText(Text, CultureInfo.CurrentUICulture, FlowDirection, typeface, FontSize, Foreground ?? Stroke, dpi);
 
                 (Vector sourceOffset, Vector targetOffset) = GetOffset();
-                drawingContext.DrawText(text, GetTextPosition(text, Source + sourceOffset, Target + targetOffset));
+
+                var textPosition = GetTextPosition(text, Source + sourceOffset, Target + targetOffset);
+
+                if (TextBackground != null)
+                {
+                    var textSize = new Size(text.Width, text.Height);
+                    DrawTextBackground(drawingContext, new Rect(textPosition, textSize));
+                }
+
+                drawingContext.DrawText(text, textPosition);
             }
 
             if (AdornerLayer != null && Container is { IsKeyboardFocused: true })
@@ -989,6 +1031,24 @@ protected override void OnRender(DrawingContext drawingContext)
             }
         }
 
+        protected virtual void DrawTextBackground(DrawingContext drawingContext, Rect bounds)
+        {
+            var padding = TextPadding;
+            double radius = TextCornerRadius;
+
+            var rectSize = new Size(bounds.Width + padding.Left + padding.Right, bounds.Height + padding.Bottom + padding.Top);
+            var rect = new Rect(bounds.Location - new Vector(padding.Left, padding.Top), rectSize);
+
+            if (OutlineBrush != null)
+            {
+                var outlineRect = rect;
+                outlineRect.Inflate(OutlineThickness, OutlineThickness);
+                drawingContext.DrawRoundedRectangle(OutlineBrush, null, outlineRect, radius, radius);
+            }
+
+            drawingContext.DrawRoundedRectangle(Stroke, null, rect, radius, radius);
+        }
+
         internal void UpdateFocusVisual()
         {
             if (AdornerLayer != null)

docs/api/Nodify_BaseConnection.md

@@ -453,6 +453,42 @@ public string Text { get; set; }
 
 [String](https://docs.microsoft.com/en-us/dotnet/api/System.String)  
 
+### TextBackground  
+  
+Gets or sets the background brush of the text. If null, no background is drawn.  
+  
+```csharp  
+public Brush TextBackground { get; set; }  
+```  
+  
+**Property Value**  
+  
+[Brush](https://docs.microsoft.com/en-us/dotnet/api/System.Windows.Media.Brush)  
+  
+### TextCornerRadius  
+  
+Gets or sets the corner radius of the text background. Only applied if [BaseConnection.TextBackground](Nodify_BaseConnection#textbackground) is not null.  
+  
+```csharp  
+public double TextCornerRadius { get; set; }  
+```  
+  
+**Property Value**  
+  
+[Double](https://docs.microsoft.com/en-us/dotnet/api/System.Double)  
+  
+### TextPadding  
+  
+Gets or sets the padding around the text of the connection. Only applied if [BaseConnection.TextBackground](Nodify_BaseConnection#textbackground) is not null.  
+  
+```csharp  
+public Thickness TextPadding { get; set; }  
+```  
+  
+**Property Value**  
+  
+[Thickness](https://docs.microsoft.com/en-us/dotnet/api/System.Windows.Thickness)  
+  
 ## Methods  
 
 ### DrawArrowGeometry(StreamGeometryContext, Point, Point, ConnectionDirection, ArrowHeadShape, Orientation)  
@@ -575,6 +611,18 @@ protected virtual void DrawRectangleArrowhead(StreamGeometryContext context, Poi
 
 `orientation` [Orientation](https://docs.microsoft.com/en-us/dotnet/api/System.Windows.Controls.Orientation)  
 
+### DrawTextBackground(DrawingContext, Rect)  
+  
+```csharp  
+protected virtual void DrawTextBackground(DrawingContext drawingContext, Rect bounds);  
+```  
+  
+**Parameters**  
+  
+`drawingContext` [DrawingContext](https://docs.microsoft.com/en-us/dotnet/api/System.Windows.Media.DrawingContext)  
+  
+`bounds` [Rect](https://docs.microsoft.com/en-us/dotnet/api/System.Windows.Rect)  
+  
 ### GetIsSelectable(UIElement)  
 
 ```csharp  

docs/api/Nodify_NodifyEditor.md

@@ -462,6 +462,18 @@ public DataTemplate ConnectionTemplate { get; set; }
 
 [DataTemplate](https://docs.microsoft.com/en-us/dotnet/api/System.Windows.DataTemplate)  
 
+### ConnectionTemplateSelector  
+  
+Gets or sets the custom logic for choosing a template for [BaseConnection](Nodify_BaseConnection).  
+  
+```csharp  
+public DataTemplateSelector ConnectionTemplateSelector { get; set; }  
+```  
+  
+**Property Value**  
+  
+[DataTemplateSelector](https://docs.microsoft.com/en-us/dotnet/api/System.Windows.Controls.DataTemplateSelector)  
+  
 ### CuttingCompletedCommand  
 
 Invoked when a cutting operation is completed.  
@@ -570,6 +582,18 @@ public DataTemplate DecoratorTemplate { get; set; }
 
 [DataTemplate](https://docs.microsoft.com/en-us/dotnet/api/System.Windows.DataTemplate)  
 
+### DecoratorTemplateSelector  
+  
+Gets or sets the custom logic for choosing a template for [DecoratorContainer](Nodify_DecoratorContainer).  
+  
+```csharp  
+public DataTemplateSelector DecoratorTemplateSelector { get; set; }  
+```  
+  
+**Property Value**  
+  
+[DataTemplateSelector](https://docs.microsoft.com/en-us/dotnet/api/System.Windows.Controls.DataTemplateSelector)  
+  
 ### DisableAutoPanning  
 
 Gets or sets whether to disable the auto panning when selecting or dragging near the edge of the editor configured by [NodifyEditor.AutoPanEdgeDistance](Nodify_NodifyEditor#autopanedgedistance).  
@@ -1016,6 +1040,18 @@ public DataTemplate PendingConnectionTemplate { get; set; }
 
 [DataTemplate](https://docs.microsoft.com/en-us/dotnet/api/System.Windows.DataTemplate)  
 
+### PendingConnectionTemplateSelector  
+  
+Gets or sets the custom logic for choosing a template for [NodifyEditor.PendingConnection](Nodify_NodifyEditor#pendingconnection).  
+  
+```csharp  
+public DataTemplateSelector PendingConnectionTemplateSelector { get; set; }  
+```  
+  
+**Property Value**  
+  
+[DataTemplateSelector](https://docs.microsoft.com/en-us/dotnet/api/System.Windows.Controls.DataTemplateSelector)  
+  
 ### PushedArea  
 
 Gets the currently pushed area while [NodifyEditor.IsPushingItems](Nodify_NodifyEditor#ispushingitems) is true.