Add IsAnimatingDirectionaArrows and DirectionalArrowsAnimationDuration dependency properties to BaseConnection (#135)

miroiu · web-flow · commit efa15e00e859 · 2024-09-12T19:19:17.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,9 +4,14 @@
 
 > - Breaking Changes:
 > - Features:
->	- Added OutlineBrush and OutlineThickness dependency properties to BaseConnection to support increasing the selection area without increasing the stroke thickness
 > - Bugfixes:
 
+#### **Version 6.4.0**
+
+> - Features:
+>	- Added OutlineBrush and OutlineThickness dependency properties to BaseConnection to support increasing the selection area without increasing the stroke thickness
+>	- Added IsAnimatingDirectionalArrows and DirectionalArrowsAnimationDuration dependency properties to BaseConnection to support controlling the animation from XAML
+
 #### **Version 6.3.0**
 
 > - Features:
diff --git a/Examples/Nodify.Playground/Editor/NodifyEditorView.xaml b/Examples/Nodify.Playground/Editor/NodifyEditorView.xaml
@@ -132,6 +132,8 @@
             <Setter Property="TargetOrientation" Value="{Binding Input.Node.Orientation}" />
             <Setter Property="DirectionalArrowsCount" Value="{Binding DirectionalArrowsCount, Source={x:Static local:EditorSettings.Instance}}" />
             <Setter Property="DirectionalArrowsOffset" Value="{Binding DirectionalArrowsOffset, Source={x:Static local:EditorSettings.Instance}}" />
+            <Setter Property="IsAnimatingDirectionalArrows" Value="{Binding IsAnimatingConnections, Source={x:Static local:EditorSettings.Instance}}" />
+            <Setter Property="DirectionalArrowsAnimationDuration" Value="{Binding DirectionalArrowsAnimationDuration, Source={x:Static local:EditorSettings.Instance}}" />
             <Setter Property="Text" Value="{Binding ConnectionText, Source={x:Static local:EditorSettings.Instance}}" />
         </Style>
 
diff --git a/Examples/Nodify.Playground/EditorSettings.cs b/Examples/Nodify.Playground/EditorSettings.cs
@@ -119,6 +119,16 @@ private EditorSettings()
                     val => Instance.DirectionalArrowsOffset = val,
                     "Directional arrows offset: ",
                     "Used to animate the directional arrowheads flowing in the direction of the connection (value is between 0 and 1)."),
+                new ProxySettingViewModel<bool>(
+                    () => Instance.IsAnimatingConnections,
+                    val => Instance.IsAnimatingConnections = val,
+                    "Animate directional arrows: ",
+                    "Used to animate the directional arrowheads by animating the DirectionalArrowsOffset value"),
+                new ProxySettingViewModel<double>(
+                    () => Instance.DirectionalArrowsAnimationDuration,
+                    val => Instance.DirectionalArrowsAnimationDuration = val,
+                    "Arrows animation duration: ",
+                    "The duration in seconds of a directional arrowhead flowing from start to end."),
                 new ProxySettingViewModel<ArrowHeadEnds>(
                     () => Instance.ArrowHeadEnds,
                     val => Instance.ArrowHeadEnds = val,
@@ -439,6 +449,20 @@ public double DirectionalArrowsOffset
             set => SetProperty(ref _directionalArrowsOffset, value);
         }
 
+        private bool _isAnimatingConnections;
+        public bool IsAnimatingConnections
+        {
+            get => _isAnimatingConnections;
+            set => SetProperty(ref _isAnimatingConnections, value);
+        }
+
+        private double _directionalArrowsAnimationDuration = 2.0;
+        public double DirectionalArrowsAnimationDuration
+        {
+            get => _directionalArrowsAnimationDuration;
+            set => SetProperty(ref _directionalArrowsAnimationDuration, value);
+        }
+
         private PointEditor _connectionArrowSize = new Size(8, 8);
         public PointEditor ConnectionArrowSize
         {
diff --git a/Examples/Nodify.Playground/MainWindow.xaml b/Examples/Nodify.Playground/MainWindow.xaml
@@ -14,15 +14,6 @@
     <Window.Resources>
         <shared:DebugConverter x:Key="DebugConverter" />
         <shared:ToStringConverter x:Key="ToStringConverter" />
-
-        <Storyboard RepeatBehavior="Forever"
-                    x:Key="{x:Static local:MainWindow.AnimateDirectionalArrowsStoryboardKey}">
-            <DoubleAnimation Duration="0:0:2"
-                             From="0"
-                             To="1"
-                             Storyboard.Target="{Binding .,RelativeSource={RelativeSource AncestorType=local:MainWindow}}"
-                             Storyboard.TargetProperty="DirectionalArrowsOffset" />
-        </Storyboard>
     </Window.Resources>
 
     <Window.DataContext>
diff --git a/Examples/Nodify.Playground/MainWindow.xaml.cs b/Examples/Nodify.Playground/MainWindow.xaml.cs
@@ -1,7 +1,6 @@
 ﻿using System;
 using System.Windows;
 using System.Windows.Media;
-using System.Windows.Media.Animation;
 
 namespace Nodify.Playground
 {
@@ -49,22 +48,6 @@ private static void OnRendering(object? sender, EventArgs e)
     public partial class MainWindow : Window
     {
         private readonly Random _rand = new Random();
-        private bool _connectionAnimationsPlaying;
-
-        public static string AnimateDirectionalArrowsStoryboardKey = "AnimateDirectionalArrows";
-
-        public static DependencyProperty DirectionalArrowsOffsetProperty = BaseConnection.DirectionalArrowsOffsetProperty.AddOwner(typeof(MainWindow), new FrameworkPropertyMetadata(0d, DirectionalArrowsOffsetChanged));
-
-        private static void DirectionalArrowsOffsetChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
-        {
-            EditorSettings.Instance.DirectionalArrowsOffset = (double)e.NewValue;
-        }
-
-        public double DirectionalArrowsOffset
-        {
-            get => (double)GetValue(DirectionalArrowsOffsetProperty);
-            set => SetValue(DirectionalArrowsOffsetProperty, value);
-        }
 
         public MainWindow()
         {
@@ -95,18 +78,7 @@ private void BringIntoView_Click(object sender, RoutedEventArgs e)
 
         private void AnimateConnections_Click(object sender, RoutedEventArgs e)
         {
-            var storyboard = (Storyboard)FindResource(AnimateDirectionalArrowsStoryboardKey);
-
-            if (_connectionAnimationsPlaying)
-            {
-                storyboard.Stop();
-            }
-            else
-            {
-                storyboard.Begin();
-            }
-
-            _connectionAnimationsPlaying = !_connectionAnimationsPlaying;
+            EditorSettings.Instance.IsAnimatingConnections = !EditorSettings.Instance.IsAnimatingConnections;
         }
     }
 }
diff --git a/Nodify/Connections/BaseConnection.cs b/Nodify/Connections/BaseConnection.cs
@@ -122,6 +122,8 @@ public abstract class BaseConnection : Shape
         public static readonly DependencyProperty DirectionProperty = DependencyProperty.Register(nameof(Direction), typeof(ConnectionDirection), typeof(BaseConnection), new FrameworkPropertyMetadata(default(ConnectionDirection), FrameworkPropertyMetadataOptions.AffectsRender));
         public static readonly DependencyProperty DirectionalArrowsCountProperty = DependencyProperty.Register(nameof(DirectionalArrowsCount), typeof(uint), typeof(BaseConnection), new FrameworkPropertyMetadata(BoxValue.UInt0, FrameworkPropertyMetadataOptions.AffectsRender));
         public static readonly DependencyProperty DirectionalArrowsOffsetProperty = DependencyProperty.Register(nameof(DirectionalArrowsOffset), typeof(double), typeof(BaseConnection), new FrameworkPropertyMetadata(BoxValue.Double0, FrameworkPropertyMetadataOptions.AffectsRender));
+        public static readonly DependencyProperty IsAnimatingDirectionalArrowsProperty = DependencyProperty.Register(nameof(IsAnimatingDirectionalArrows), typeof(bool), typeof(BaseConnection), new FrameworkPropertyMetadata(BoxValue.False, FrameworkPropertyMetadataOptions.AffectsRender, new PropertyChangedCallback(OnIsAnimatingDirectionalArrowsChanged)));
+        public static readonly DependencyProperty DirectionalArrowsAnimationDurationProperty = DependencyProperty.Register(nameof(DirectionalArrowsAnimationDuration), typeof(double), typeof(BaseConnection), new FrameworkPropertyMetadata(BoxValue.Double2, FrameworkPropertyMetadataOptions.AffectsRender, new PropertyChangedCallback(OnDirectionalArrowsAnimationDurationChanged)));
         public static readonly DependencyProperty SpacingProperty = DependencyProperty.Register(nameof(Spacing), typeof(double), typeof(BaseConnection), new FrameworkPropertyMetadata(BoxValue.Double0, FrameworkPropertyMetadataOptions.AffectsRender));
         public static readonly DependencyProperty ArrowSizeProperty = DependencyProperty.Register(nameof(ArrowSize), typeof(Size), typeof(BaseConnection), new FrameworkPropertyMetadata(BoxValue.ArrowSize, FrameworkPropertyMetadataOptions.AffectsRender));
         public static readonly DependencyProperty ArrowEndsProperty = DependencyProperty.Register(nameof(ArrowEnds), typeof(ArrowHeadEnds), typeof(BaseConnection), new FrameworkPropertyMetadata(ArrowHeadEnds.End, FrameworkPropertyMetadataOptions.AffectsRender));
@@ -138,6 +140,28 @@ public abstract class BaseConnection : Shape
         public static readonly DependencyProperty FontStyleProperty = TextElement.FontStyleProperty.AddOwner(typeof(BaseConnection));
         public static readonly DependencyProperty FontStretchProperty = TextElement.FontStretchProperty.AddOwner(typeof(BaseConnection));
 
+        private static void OnIsAnimatingDirectionalArrowsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var con = (BaseConnection)d;
+            if (e.NewValue is true)
+            {
+                con.StartAnimation(con.DirectionalArrowsAnimationDuration);
+            }
+            else
+            {
+                con.StopAnimation();
+            }
+        }
+
+        private static void OnDirectionalArrowsAnimationDurationChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var con = (BaseConnection)d;
+            if (con.IsAnimatingDirectionalArrows)
+            {
+                con.StartAnimation((double)e.NewValue);
+            }
+        }
+
         private static void OnOutlinePenChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             ((BaseConnection)d)._outlinePen = null;
@@ -242,6 +266,24 @@ public double DirectionalArrowsOffset
             set => SetValue(DirectionalArrowsOffsetProperty, value);
         }
 
+        /// <summary>
+        /// Gets or sets whether the directional arrows should be flowing through the connection wire.
+        /// </summary>
+        public bool IsAnimatingDirectionalArrows
+        {
+            get => (bool)GetValue(IsAnimatingDirectionalArrowsProperty);
+            set => SetValue(IsAnimatingDirectionalArrowsProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets the duration in seconds of a directional arrow flowing from <see cref="Source"/> to <see cref="Target"/>.
+        /// </summary>
+        public double DirectionalArrowsAnimationDuration
+        {
+            get => (double)GetValue(DirectionalArrowsAnimationDurationProperty);
+            set => SetValue(DirectionalArrowsAnimationDurationProperty, value);
+        }
+
         /// <summary>
         /// Gets or sets the arrowhead ends.
         /// </summary>
@@ -682,10 +724,8 @@ protected virtual Point GetTextPosition(FormattedText text, Point source, Point
         /// <param name="duration">The duration for moving an arrowhead from <see cref="Source"/> to <see cref="Target"/>.</param>
         public void StartAnimation(double duration = 1.5d)
         {
-            if (DirectionalArrowsCount > 0)
-            {
-                this.StartLoopingAnimation(DirectionalArrowsOffsetProperty, DirectionalArrowsOffset + 1d, duration);
-            }
+            StopAnimation();
+            this.StartLoopingAnimation(DirectionalArrowsOffsetProperty, DirectionalArrowsOffset + 1d, duration);
         }
 
         /// <summary>Stops the animation started by <see cref="StartAnimation(double)"/></summary>
diff --git a/Nodify/Nodify.csproj b/Nodify/Nodify.csproj
@@ -16,14 +16,11 @@
     <PackageIcon>icon.png</PackageIcon>
     <RepositoryUrl>https://github.com/miroiu/nodify</RepositoryUrl>
     <PackageTags>wpf mvvm node-editor controls</PackageTags>
-    <Version>6.3.0</Version>
+    <Version>6.4.0</Version>
     <PackageReleaseNotes>
       > - Features:
-      >	  - Added a CuttingLine control that removes intersecting connections
-      >	  - Added CuttingLineStyle, CuttingStartedCommand, CuttingCompletedCommand, IsCutting, EnableCuttingLinePreview and CuttingConnectionTypes to NodifyEditor
-      >	  - Added EditorGestures.Editor.Cutting and EditorGestures.Editor.CancelAction
-      > - Bugfixes:
-      >	  - Fixed connection styles not inheriting from the BaseConnection style
+      >	  - Added OutlineBrush and OutlineThickness dependency properties to BaseConnection to support increasing the selection area without increasing the stroke thickness
+      >	  - Added IsAnimatingDirectionalArrows and DirectionalArrowsAnimationDuration dependency properties to BaseConnection to support controlling the animation from XAML
     </PackageReleaseNotes>
     <AssemblyOriginatorKeyFile>..\build\Nodify.snk</AssemblyOriginatorKeyFile>
     <PackageReadmeFile>README.md</PackageReadmeFile>
diff --git a/Nodify/NodifyEditor.cs b/Nodify/NodifyEditor.cs
@@ -1322,7 +1322,7 @@ internal void ClearPreviewingSelection()
         /// Inverts the <see cref="ItemContainer"/>s selection in the specified <paramref name="area"/>.
         /// </summary>
         /// <param name="area">The area to look for <see cref="ItemContainer"/>s.</param>
-        /// <param name="fit">True to check if the <paramref name="area"/> contains the <see cref="ItemContainer"/>. <br /> False to check if <paramref name="area"/> intersects the <see cref="ItemContainer"/>.</param>
+        /// <param name="fit">True to check if the <paramref name="area"/> contains the <see cref="ItemContainer"/>. <br />False to check if <paramref name="area"/> intersects the <see cref="ItemContainer"/>.</param>
         public void InvertSelection(Rect area, bool fit = false)
         {
             ItemCollection items = Items;
@@ -1356,7 +1356,7 @@ public void InvertSelection(Rect area, bool fit = false)
         /// </summary>
         /// <param name="area">The area to look for <see cref="ItemContainer"/>s.</param>
         /// <param name="append">If true, it will add to the existing selection.</param>
-        /// <param name="fit">True to check if the <paramref name="area"/> contains the <see cref="ItemContainer"/>. <br /> False to check if <paramref name="area"/> intersects the <see cref="ItemContainer"/>.</param>
+        /// <param name="fit">True to check if the <paramref name="area"/> contains the <see cref="ItemContainer"/>. <br />False to check if <paramref name="area"/> intersects the <see cref="ItemContainer"/>.</param>
         public void SelectArea(Rect area, bool append = false, bool fit = false)
         {
             if (!append)
@@ -1385,7 +1385,7 @@ public void SelectArea(Rect area, bool append = false, bool fit = false)
         /// Unselect the <see cref="ItemContainer"/>s in the specified <paramref name="area"/>.
         /// </summary>
         /// <param name="area">The area to look for <see cref="ItemContainer"/>s.</param>
-        /// <param name="fit">True to check if the <paramref name="area"/> contains the <see cref="ItemContainer"/>. <br /> False to check if <paramref name="area"/> intersects the <see cref="ItemContainer"/>.</param>
+        /// <param name="fit">True to check if the <paramref name="area"/> contains the <see cref="ItemContainer"/>. <br />False to check if <paramref name="area"/> intersects the <see cref="ItemContainer"/>.</param>
         public void UnselectArea(Rect area, bool fit = false)
         {
             IList items = base.SelectedItems;
diff --git a/docs/API-Reference.md b/docs/API-Reference.md
