Fix KnotShow

NodifyM.Avalonia.Example/App.axaml.cs

@@ -19,5 +19,6 @@ public override void OnFrameworkInitializationCompleted()
         }
 
         base.OnFrameworkInitializationCompleted();
+
     }
 }

NodifyM.Avalonia.Example/MainWindow.axaml

@@ -11,16 +11,38 @@
         x:DataType="example:MainWindowViewModel"
         Title="Nodify.Avalonia.Example">
     <Grid>
-        
+
 
         <controls:NodifyEditor
             Background="Transparent"
             ItemsSource="{Binding Nodes }"
             Connections="{Binding Connections}"
             PendingConnection="{Binding PendingConnection}"
             DisconnectConnectorCommand="{Binding DisconnectConnectorCommand}">
+            <controls:NodifyEditor.DataTemplates>
+                <DataTemplate DataType="viewModelBase:KnotNodeViewModel">
+                    <controls:KnotNode  Content="{Binding Connector}">
+                        <controls:KnotNode.ContentTemplate>
+                            <DataTemplate DataType="viewModelBase:ConnectorViewModelBase">
+                                <controls:Connector
+                                    VerticalAlignment="Center"
+                                    IsConnected="{Binding IsConnected}"
+                                    Anchor="{Binding Anchor, Mode=OneWayToSource}">
+                                    <controls:Connector.BorderBrush>
+                                        <SolidColorBrush
+                                            Color="CornflowerBlue"
+                                            Opacity="0.5" />
+                                    </controls:Connector.BorderBrush>
+                                </controls:Connector>
+                            </DataTemplate>
+                        </controls:KnotNode.ContentTemplate>
+                    </controls:KnotNode>
+                </DataTemplate>
+
+            </controls:NodifyEditor.DataTemplates>
             <controls:NodifyEditor.Resources>
                 <converters:FlowToDirectionConverter x:Key="FlowToDirectionConverter" />
+
             </controls:NodifyEditor.Resources>
             <controls:NodifyEditor.GridLineTemplate>
                 <DataTemplate>
@@ -32,21 +54,21 @@
                                             Spacing="30"
                                             Thickness="0.5"
                                             Brush="LightGray"
-                                            ZIndex="-2"/>
+                                            ZIndex="-2" />
                 </DataTemplate>
             </controls:NodifyEditor.GridLineTemplate>
             <controls:NodifyEditor.ConnectionTemplate>
                 <DataTemplate DataType="{x:Type viewModelBase:ConnectionViewModelBase}">
                     <Grid>
-                        <controls:CircuitConnection
-                            Direction="{Binding Source.Flow,Converter={StaticResource FlowToDirectionConverter}}"
+                        <controls:Connection
+                            Direction="{Binding .,Converter={StaticResource FlowToDirectionConverter}}"
                             Source="{Binding Source.Anchor}" Focusable="True"
                             Target="{Binding Target.Anchor}">
-                            <controls:CircuitConnection.Stroke>
+                            <controls:Connection.Stroke>
                                 <SolidColorBrush Color="Red"
                                                  Opacity="0.5" />
-                            </controls:CircuitConnection.Stroke>
-                        </controls:CircuitConnection>
+                            </controls:Connection.Stroke>
+                        </controls:Connection>
                     </Grid>
 
                 </DataTemplate>
@@ -138,6 +160,7 @@
                         </controls:Node.OutputConnectorTemplate>
                     </controls:Node>
                 </DataTemplate>
+
             </controls:NodifyEditor.ItemTemplate>
 
         </controls:NodifyEditor>

NodifyM.Avalonia.Example/MainWindowViewModel.cs

@@ -8,6 +8,10 @@ namespace NodifyM.Avalonia.Example;
 public partial class MainWindowViewModel : NodifyEditorViewModelBase{
     public MainWindowViewModel()
     {
+        var knot1 = new KnotNodeViewModel()
+        {
+            Location = new Point(300,100)
+        };
         var input1 = new ConnectorViewModelBase()
         {
             Title = "AS 1",
@@ -18,11 +22,12 @@ public MainWindowViewModel()
             Title = "B 1",
             Flow = ConnectorViewModelBase.ConnectorFlow.Output
         };
-        Connections.Add(new ConnectionViewModelBase(output1,input1));
+        Connections.Add(new ConnectionViewModelBase(output1,knot1.Connector));
+        Connections.Add(new ConnectionViewModelBase(knot1.Connector,input1));
         Nodes  =new(){
                 new NodeViewModelBase()
                 {
-                    Location = new Point(100, 100),
+                    Location = new Point(400, 100),
                     Title = "Node 1",
                     Input = new ObservableCollection<ConnectorViewModelBase>
                     {
@@ -71,6 +76,8 @@ public MainWindowViewModel()
                     }
                 }
             };
+        Nodes.Add(knot1);
+        knot1.Connector.IsConnected = true;
         output1.IsConnected = true;
         input1.IsConnected = true;
     }

NodifyM.Avalonia/Controls/BaseNode.axaml

@@ -0,0 +1,16 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:controls="using:NodifyM.Avalonia.Controls">
+    <Design.PreviewWith>
+        <controls:BaseNode />
+    </Design.PreviewWith>
+
+    <Style Selector="controls|BaseNode">
+        <!-- Set Defaults -->
+        <Setter Property="Template">
+            <ControlTemplate>
+                <TextBlock Text="Templated Control" />
+            </ControlTemplate>
+        </Setter>
+    </Style>
+</Styles>

NodifyM.Avalonia/Controls/BaseNode.axaml.cs

@@ -0,0 +1,103 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Input;
+using Avalonia.Interactivity;
+using Avalonia.LogicalTree;
+using Avalonia.VisualTree;
+using NodifyM.Avalonia.Helpers;
+using NodifyM.Avalonia.ViewModelBase;
+
+namespace NodifyM.Avalonia.Controls;
+
+public class BaseNode : ContentControl
+{
+    public static readonly AvaloniaProperty<Point> LocationProperty =
+        AvaloniaProperty.Register<Node, Point>(nameof(Location));
+    public static readonly RoutedEvent LocationChangedEvent = RoutedEvent.Register<RoutedEventArgs>(nameof(LocationChanged), RoutingStrategies.Bubble, typeof(Node));
+    public event EventHandler<RoutedEventArgs> LocationChanged
+    {
+        add => AddHandler(LocationChangedEvent, value);
+        remove => RemoveHandler(LocationChangedEvent, value);
+    }
+    public Point Location
+    {
+        get => (Point)GetValue(LocationProperty);
+        set => SetValue(LocationProperty, value);
+    }
+
+    public BaseNode()
+    {
+        PointerPressed += OnPointerPressed;
+        PointerMoved += OnPointerMoved;
+        PointerReleased += OnPointerReleased;
+    }
+    /// <summary>
+    /// 记录上一次鼠标位置
+    /// </summary>
+    private Point lastMousePosition;
+
+    /// <summary>
+    /// 标记是否先启动了拖动
+    /// </summary>
+    private bool isDragging = false;
+
+
+    private double _startOffsetX;
+    private double _startOffsetY;
+
+    private void OnPointerPressed(object sender, PointerPressedEventArgs e)
+    {
+
+        var visualParent = this.GetVisualParent();
+        var parent = visualParent.GetVisualParent().GetVisualChildren();
+        foreach (var visual in parent)
+        {
+            visual.ZIndex = 0;
+
+        }
+        visualParent.ZIndex = 1;
+        if (!e.GetCurrentPoint(this).Properties.IsLeftButtonPressed) return;
+        // 启动拖动
+        isDragging = true;
+        // 记录当前坐标
+        var relativeTo = ((Visual)this.GetLogicalParent()).GetVisualParent();
+        lastMousePosition = e.GetPosition((Visual)relativeTo);
+
+        // Debug.WriteLine($"记录当前坐标X:{lastMousePosition.X} Y:{lastMousePosition.Y}");
+        _startOffsetX = ((BaseNodeViewModel)DataContext).Location.X;
+        _startOffsetY = ((BaseNodeViewModel)DataContext).Location.Y;
+        e.Handled = true;
+    }
+
+    private void OnPointerReleased(object sender, PointerReleasedEventArgs e)
+    {
+
+
+        if (!isDragging) return;
+        // 停止拖动
+        isDragging = false;
+        e.Handled = true;
+        // 停止计时器
+
+
+        // var currentPoint = e.GetCurrentPoint(this);
+        //  Debug.WriteLine($"停止拖动坐标X:{OffsetX} Y:{OffsetY}");
+    }
+
+    private void OnPointerMoved(object sender, PointerEventArgs e)
+    {
+        if (!e.GetCurrentPoint(((Visual)this.GetLogicalParent()).GetVisualParent()).Properties
+                .IsLeftButtonPressed) return;
+
+        // 如果没有启动拖动，则不执行
+        if (!isDragging) return;
+
+        var currentMousePosition = e.GetPosition(((Visual)this.GetLogicalParent()).GetVisualParent());
+        var offset = currentMousePosition - lastMousePosition;
+
+
+        ((BaseNodeViewModel)DataContext).Location = new Point((offset.X + _startOffsetX), offset.Y + _startOffsetY);
+        RaiseEvent(new RoutedEventArgs(LocationChangedEvent,this));
+    }
+}

NodifyM.Avalonia/Controls/Connector.axaml

@@ -25,8 +25,8 @@
         <Setter Property="IsConnected" Value="{Binding IsConnected,Mode=TwoWay}"></Setter>
         <Setter Property="Template">
             <Setter.Value>
-                <ControlTemplate TargetType="{x:Type controls:Connector}">
-                    <Ellipse x:Name="Connector" 
+                <ControlTemplate  TargetType="{x:Type controls:Connector}">
+                    <Ellipse x:Name="PART_Connector"
                              Width="{TemplateBinding Width}"
                              Height="{TemplateBinding Height}"
                              Stroke="{TemplateBinding BorderBrush}"
@@ -36,5 +36,8 @@
             </Setter.Value>
         </Setter>
     </Style>
+    <Style Selector="controls|Connector[IsConnected=True] /template/ Ellipse#PART_Connector">
+        <Setter Property="Fill" Value="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" />
+    </Style>
 
 </Styles>

NodifyM.Avalonia/Controls/Connector.axaml.cs

@@ -106,7 +106,7 @@ public ICommand? DisconnectCommand
     #endregion
     protected internal NodifyEditor? Editor { get; private set; }
     protected Control? Thumb { get; private set; }
-    protected Node? Container { get; private set; }
+    protected BaseNode? Container { get; private set; }
     public static bool AllowPendingConnectionCancellation { get; set; } = true;
 
     /// <summary>
@@ -165,11 +165,6 @@ public void UpdateAnchor()
 
     protected void UpdateAnchor(Point location)
     {
-        if (Application.Current.ApplicationLifetime is IClassicDesktopStyleApplicationLifetime applicationLifetime)
-        {
-            var mainWindowDataContext = applicationLifetime.MainWindow.DataContext;
-
-        }
         _lastUpdatedContainerPosition = location;
         if ( Container != null)
         {
@@ -183,9 +178,14 @@ protected void UpdateAnchor(Point location)
   protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
-        Container = this.GetParentOfType<Node>();
+        Container = this.GetParentOfType<BaseNode>();
+
         Editor =  this.GetParentOfType<NodifyEditor>();
         Thumb = this.GetChildOfType<Control>("PART_Connector");
+        if (Thumb is null)
+        {
+
+        }
         Loaded += OnConnectorLoaded;
         Unloaded += OnConnectorUnloaded;
     }

NodifyM.Avalonia/Controls/KnotNode.axaml

@@ -1,6 +1,7 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:controls="using:NodifyM.Avalonia.Controls">
+        xmlns:controls="using:NodifyM.Avalonia.Controls"
+        xmlns:viewModelBase="clr-namespace:NodifyM.Avalonia.ViewModelBase">
     <Design.PreviewWith>
         <controls:KnotNode />
     </Design.PreviewWith>
@@ -22,6 +23,8 @@
                 Value="15 5" />
         <Setter Property="Cursor"
                 Value="SizeAll" />
+        <Setter Property="Location" x:DataType="viewModelBase:KnotNodeViewModel"
+                Value="{Binding Location}" />
         <Setter Property="ContentTemplate"
                 Value="{StaticResource DefaultConnectorTemplate}" />
         <Setter Property="Template">
@@ -32,7 +35,8 @@
                             BorderThickness="{TemplateBinding BorderThickness}"
                             Padding="{TemplateBinding Padding}"
                             CornerRadius="3">
-                        <ContentPresenter />
+                        <ContentPresenter x:Name="PART_Connector" x:DataType="viewModelBase:KnotNodeViewModel" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" 
+                                          DataContext="{ReflectionBinding Path=Connector}"/>
                     </Border>
                 </ControlTemplate>
             </Setter.Value>

NodifyM.Avalonia/Controls/KnotNode.axaml.cs

@@ -1,9 +1,16 @@
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
+using Avalonia.Input;
+using Avalonia.Interactivity;
+using Avalonia.LogicalTree;
+using Avalonia.VisualTree;
+using NodifyM.Avalonia.Helpers;
+using NodifyM.Avalonia.ViewModelBase;
 
 namespace NodifyM.Avalonia.Controls;
 
-public class KnotNode : ContentControl
+public class KnotNode : BaseNode
 {
+
 }