From 9ed8b6a9205ea0a8b72068e5319784c39a3683a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wies=C5=82aw=20S=CC=8Colte=CC=81s?=
 <wieslaw.soltes@gmail.com>
Date: Fri, 17 Mar 2023 09:50:14 +0100
Subject: [PATCH] Refactor DrawingNode template

---
 .../NodeEditor.Base/Views/ToolboxView.axaml   |  2 +-
 src/NodeEditorAvalonia/Controls/Connectors.cs |  7 ++
 src/NodeEditorAvalonia/Controls/Node.cs       |  2 +-
 src/NodeEditorAvalonia/Controls/Nodes.cs      |  7 ++
 src/NodeEditorAvalonia/Controls/Pins.cs       |  7 ++
 .../Themes/Connectors.axaml                   | 40 +++++++++++
 .../Themes/DrawingNode.axaml                  | 61 +---------------
 src/NodeEditorAvalonia/Themes/Node.axaml      | 53 +-------------
 .../Themes/NodeEditorTheme.axaml              |  7 +-
 src/NodeEditorAvalonia/Themes/Nodes.axaml     | 55 +++++++++++++++
 src/NodeEditorAvalonia/Themes/Pins.axaml      | 70 +++++++++++++++++++
 11 files changed, 197 insertions(+), 114 deletions(-)
 create mode 100644 src/NodeEditorAvalonia/Controls/Connectors.cs
 create mode 100644 src/NodeEditorAvalonia/Controls/Nodes.cs
 create mode 100644 src/NodeEditorAvalonia/Controls/Pins.cs
 create mode 100644 src/NodeEditorAvalonia/Themes/Connectors.axaml
 create mode 100644 src/NodeEditorAvalonia/Themes/Nodes.axaml
 create mode 100644 src/NodeEditorAvalonia/Themes/Pins.axaml

diff --git a/samples/NodeEditor.Base/Views/ToolboxView.axaml b/samples/NodeEditor.Base/Views/ToolboxView.axaml
index c4248e3..17b1196 100644
--- a/samples/NodeEditor.Base/Views/ToolboxView.axaml
+++ b/samples/NodeEditor.Base/Views/ToolboxView.axaml
@@ -41,7 +41,7 @@
           <Viewbox DockPanel.Dock="Left" Width="32" Height="32" DataContext="{Binding Preview}">
             <editor:Node IsHitTestVisible="False">
               <editor:Node.Styles>
-                <Style Selector="editor|Node /template/ ItemsControl#PART_PinsItemsControl">
+                <Style Selector="editor|Pins /template/ ItemsControl#PART_PinsItemsControl">
                   <Setter Property="IsVisible" Value="False" />
                 </Style>
               </editor:Node.Styles>
diff --git a/src/NodeEditorAvalonia/Controls/Connectors.cs b/src/NodeEditorAvalonia/Controls/Connectors.cs
new file mode 100644
index 0000000..d0d6dd8
--- /dev/null
+++ b/src/NodeEditorAvalonia/Controls/Connectors.cs
@@ -0,0 +1,7 @@
+using Avalonia.Controls.Primitives;
+
+namespace NodeEditor.Controls;
+
+public class Connectors : TemplatedControl
+{
+}
diff --git a/src/NodeEditorAvalonia/Controls/Node.cs b/src/NodeEditorAvalonia/Controls/Node.cs
index d65326c..c6d9425 100644
--- a/src/NodeEditorAvalonia/Controls/Node.cs
+++ b/src/NodeEditorAvalonia/Controls/Node.cs
@@ -6,4 +6,4 @@ namespace NodeEditor.Controls;
 [PseudoClasses(":selected")]
 public class Node : TemplatedControl
 {
-}
\ No newline at end of file
+}
diff --git a/src/NodeEditorAvalonia/Controls/Nodes.cs b/src/NodeEditorAvalonia/Controls/Nodes.cs
new file mode 100644
index 0000000..0ae989a
--- /dev/null
+++ b/src/NodeEditorAvalonia/Controls/Nodes.cs
@@ -0,0 +1,7 @@
+using Avalonia.Controls.Primitives;
+
+namespace NodeEditor.Controls;
+
+public class Nodes : TemplatedControl
+{
+}
diff --git a/src/NodeEditorAvalonia/Controls/Pins.cs b/src/NodeEditorAvalonia/Controls/Pins.cs
new file mode 100644
index 0000000..5542044
--- /dev/null
+++ b/src/NodeEditorAvalonia/Controls/Pins.cs
@@ -0,0 +1,7 @@
+using Avalonia.Controls.Primitives;
+
+namespace NodeEditor.Controls;
+
+public class Pins : TemplatedControl
+{
+}
diff --git a/src/NodeEditorAvalonia/Themes/Connectors.axaml b/src/NodeEditorAvalonia/Themes/Connectors.axaml
new file mode 100644
index 0000000..0298392
--- /dev/null
+++ b/src/NodeEditorAvalonia/Themes/Connectors.axaml
@@ -0,0 +1,40 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:m="clr-namespace:NodeEditor.Model;assembly=NodeEditorAvalonia.Model"
+                    xmlns:converters="clr-namespace:NodeEditor.Converters"
+                    xmlns:controls="clr-namespace:NodeEditor.Controls"
+                    x:CompileBindings="True">
+
+  <ControlTheme x:Key="{x:Type controls:Connectors}" TargetType="controls:Connectors">
+
+    <Setter Property="ClipToBounds" Value="False" />
+
+    <Setter Property="Template">
+      <ControlTemplate x:DataType="m:IDrawingNode">
+        <ItemsControl Name="PART_ConnectorsItemsControl"
+                      Items="{Binding Connectors}" 
+                      Width="{Binding Width}" 
+                      Height="{Binding Height}"
+                      Background="Transparent"
+                      IsHitTestVisible="False"
+                      ClipToBounds="False">
+          <ItemsControl.ItemsPanel>
+            <ItemsPanelTemplate>
+              <Canvas />
+            </ItemsPanelTemplate>
+          </ItemsControl.ItemsPanel>
+          <ItemsControl.ItemTemplate>
+            <DataTemplate DataType="m:IConnector">
+              <controls:Connector Name="PART_Connector"
+                                  StartPoint="{Binding Start, Converter={x:Static converters:PinToPointConverter.Instance}}" 
+                                  EndPoint="{Binding End, Converter={x:Static converters:PinToPointConverter.Instance}}"
+                                  Offset="{Binding Offset}"/>
+            </DataTemplate>
+          </ItemsControl.ItemTemplate>
+        </ItemsControl>
+      </ControlTemplate>
+    </Setter>
+
+  </ControlTheme>
+
+</ResourceDictionary>
diff --git a/src/NodeEditorAvalonia/Themes/DrawingNode.axaml b/src/NodeEditorAvalonia/Themes/DrawingNode.axaml
index dde6cd0..4a31e1e 100644
--- a/src/NodeEditorAvalonia/Themes/DrawingNode.axaml
+++ b/src/NodeEditorAvalonia/Themes/DrawingNode.axaml
@@ -1,9 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:m="clr-namespace:NodeEditor.Model;assembly=NodeEditorAvalonia.Model"
-                    xmlns:i="clr-namespace:Avalonia.Xaml.Interactivity;assembly=Avalonia.Xaml.Interactivity"
-                    xmlns:behaviors="clr-namespace:NodeEditor.Behaviors"
-                    xmlns:converters="clr-namespace:NodeEditor.Converters"
                     xmlns:controls="clr-namespace:NodeEditor.Controls"
                     x:CompileBindings="True">
 
@@ -27,64 +24,12 @@
           <controls:GridDecorator EnableGrid="{TemplateBinding EnableGrid}"
                                   GridCellWidth="{TemplateBinding GridCellWidth}"
                                   GridCellHeight="{TemplateBinding GridCellHeight}" />
-          <ItemsControl Name="PART_NodesItemsControl"
-                        Items="{Binding Nodes}" 
-                        Width="{Binding Width}" 
-                        Height="{Binding Height}"
-                        Background="Transparent"
-                        ClipToBounds="False">
-            <i:Interaction.Behaviors>
-              <behaviors:NodesSelectedBehavior />
-              <behaviors:DrawingSelectionBehavior InputSource="{Binding $parent[controls:DrawingNode].InputSource}" 
-                                                  AdornerCanvas="{Binding $parent[controls:DrawingNode].AdornerCanvas}" 
-                                                  EnableSnap="{Binding $parent[controls:DrawingNode].EnableSnap}" 
-                                                  SnapX="{Binding $parent[controls:DrawingNode].SnapX}" 
-                                                  SnapY="{Binding $parent[controls:DrawingNode].SnapY}" 
-                                                  x:CompileBindings="False" />
-              <behaviors:DrawingPressedBehavior />
-              <behaviors:DrawingMovedBehavior />
-            </i:Interaction.Behaviors>
-            <ItemsControl.Styles>
-              <Style Selector="ItemsControl > ContentPresenter" x:DataType="m:INode">
-                <Setter Property="Canvas.Left" Value="{Binding X}" />
-                <Setter Property="Canvas.Top" Value="{Binding Y}" />
-              </Style>
-            </ItemsControl.Styles>
-            <ItemsControl.ItemsPanel>
-              <ItemsPanelTemplate>
-                <Canvas />
-              </ItemsPanelTemplate>
-            </ItemsControl.ItemsPanel>
-            <ItemsControl.ItemTemplate>
-              <DataTemplate DataType="m:INode">
-                <controls:Node Name="PART_Node" />
-              </DataTemplate>
-            </ItemsControl.ItemTemplate>
-          </ItemsControl>
-          <ItemsControl Name="PART_ConnectorsItemsControl"
-                        Items="{Binding Connectors}" 
-                        Width="{Binding Width}" 
-                        Height="{Binding Height}"
-                        Background="Transparent"
-                        IsHitTestVisible="False"
-                        ClipToBounds="False">
-            <ItemsControl.ItemsPanel>
-              <ItemsPanelTemplate>
-                <Canvas />
-              </ItemsPanelTemplate>
-            </ItemsControl.ItemsPanel>
-            <ItemsControl.ItemTemplate>
-              <DataTemplate DataType="m:IConnector">
-                <controls:Connector Name="PART_Connector"
-                                    StartPoint="{Binding Start, Converter={x:Static converters:PinToPointConverter.Instance}}" 
-                                    EndPoint="{Binding End, Converter={x:Static converters:PinToPointConverter.Instance}}"
-                                    Offset="{Binding Offset}"/>
-              </DataTemplate>
-            </ItemsControl.ItemTemplate>
-          </ItemsControl>
+          <controls:Connectors Name="PART_Connectors" />
+          <controls:Nodes Name="PART_Nodes" />
         </Panel>
       </ControlTemplate>
     </Setter>
 
   </ControlTheme>
+
 </ResourceDictionary>
diff --git a/src/NodeEditorAvalonia/Themes/Node.axaml b/src/NodeEditorAvalonia/Themes/Node.axaml
index 8ed4b15..911299e 100644
--- a/src/NodeEditorAvalonia/Themes/Node.axaml
+++ b/src/NodeEditorAvalonia/Themes/Node.axaml
@@ -1,8 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:m="clr-namespace:NodeEditor.Model;assembly=NodeEditorAvalonia.Model"
-                    xmlns:i="clr-namespace:Avalonia.Xaml.Interactivity;assembly=Avalonia.Xaml.Interactivity"
-                    xmlns:behaviors="clr-namespace:NodeEditor.Behaviors"
                     xmlns:controls="clr-namespace:NodeEditor.Controls"
                     x:CompileBindings="True">
 
@@ -18,53 +16,10 @@
                Height="{Binding Height}">
           <ContentPresenter Name="PART_ContentPresenter"
                             Content="{Binding Content}"/>
-          <ItemsControl Name="PART_PinsItemsControl"
-                        Items="{Binding Pins}"
-                        Width="{Binding Width}"
-                        Height="{Binding Height}"
-                        ClipToBounds="False">
-            <ItemsControl.Styles>
-              <Style Selector="ItemsControl > ContentPresenter" x:DataType="m:IPin">
-                <Setter Property="Canvas.Left" Value="{Binding X}" />
-                <Setter Property="Canvas.Top" Value="{Binding Y}" />
-              </Style>
-              <!-- Workaround -->
-              <Style Selector="ItemsControl > :is(ContentPresenter)">
-                <Setter Property="(i:Interaction.Behaviors)">
-                  <i:BehaviorCollectionTemplate>
-                    <i:BehaviorCollection>
-                      <behaviors:PinPressedBehavior />
-                    </i:BehaviorCollection>
-                  </i:BehaviorCollectionTemplate>
-                </Setter>
-              </Style>
-            </ItemsControl.Styles>
-            <ItemsControl.ItemsPanel>
-              <ItemsPanelTemplate>
-                <Canvas />
-              </ItemsPanelTemplate>
-            </ItemsControl.ItemsPanel>
-            <ItemsControl.ItemTemplate>
-              <DataTemplate DataType="m:IPin">
-                <controls:Pin Name="PART_Pin" />
-              </DataTemplate>
-            </ItemsControl.ItemTemplate>
-          </ItemsControl>
+          <controls:Pins Name="PART_Pins" />
         </Panel>
       </ControlTemplate>
     </Setter>
- 
-    <!--
-    <Style Selector="^/template/ ItemsControl#PART_PinsItemsControl > :is(ContentPresenter)">
-      <Setter Property="(i:Interaction.Behaviors)">
-        <i:BehaviorCollectionTemplate>
-          <i:BehaviorCollection>
-            <behaviors:PinPressedBehavior />
-          </i:BehaviorCollection>
-        </i:BehaviorCollectionTemplate>
-      </Setter>
-    </Style>
-    -->
 
     <Style Selector="^/template/ ContentPresenter#PART_ContentPresenter">
       <Setter Property="IsHitTestVisible" Value="{Binding $self.(controls:DrawingNode.IsEditMode), Mode=OneWay, Converter={x:Static BoolConverters.Not}}" 
@@ -72,12 +27,6 @@
               x:CompileBindings="False"/>
     </Style>
 
-    <!--
-    <Style Selector="^/template/ ItemsControl#PART_PinsItemsControl">
-      <Setter Property="IsVisible" Value="False" />
-    </Style>
-    -->
-
   </ControlTheme>
 
 </ResourceDictionary>
diff --git a/src/NodeEditorAvalonia/Themes/NodeEditorTheme.axaml b/src/NodeEditorAvalonia/Themes/NodeEditorTheme.axaml
index b2645cc..d4fa31c 100644
--- a/src/NodeEditorAvalonia/Themes/NodeEditorTheme.axaml
+++ b/src/NodeEditorAvalonia/Themes/NodeEditorTheme.axaml
@@ -16,9 +16,12 @@
         </ResourceDictionary>
       </ResourceDictionary.ThemeDictionaries>
       <ResourceDictionary.MergedDictionaries>
-        <ResourceInclude Source="avares://NodeEditorAvalonia/Themes/Node.axaml" />
-        <ResourceInclude Source="avares://NodeEditorAvalonia/Themes/Connector.axaml" />
         <ResourceInclude Source="avares://NodeEditorAvalonia/Themes/Pin.axaml" />
+        <ResourceInclude Source="avares://NodeEditorAvalonia/Themes/Pins.axaml" />
+        <ResourceInclude Source="avares://NodeEditorAvalonia/Themes/Node.axaml" />
+        <ResourceInclude Source="avares://NodeEditorAvalonia/Themes/Nodes.axaml" />
+        <ResourceInclude Source="avares://NodeEditorAvalonia/Themes/Connector.axaml" />
+        <ResourceInclude Source="avares://NodeEditorAvalonia/Themes/Connectors.axaml" />
         <ResourceInclude Source="avares://NodeEditorAvalonia/Themes/DrawingNode.axaml" />
       </ResourceDictionary.MergedDictionaries>
     </ResourceDictionary>
diff --git a/src/NodeEditorAvalonia/Themes/Nodes.axaml b/src/NodeEditorAvalonia/Themes/Nodes.axaml
new file mode 100644
index 0000000..99c5a34
--- /dev/null
+++ b/src/NodeEditorAvalonia/Themes/Nodes.axaml
@@ -0,0 +1,55 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:m="clr-namespace:NodeEditor.Model;assembly=NodeEditorAvalonia.Model"
+                    xmlns:i="clr-namespace:Avalonia.Xaml.Interactivity;assembly=Avalonia.Xaml.Interactivity"
+                    xmlns:behaviors="clr-namespace:NodeEditor.Behaviors"
+                    xmlns:controls="clr-namespace:NodeEditor.Controls"
+                    x:CompileBindings="True">
+
+  <ControlTheme x:Key="{x:Type controls:Nodes}" TargetType="controls:Nodes">
+
+    <Setter Property="ClipToBounds" Value="False" />
+
+    <Setter Property="Template">
+      <ControlTemplate x:DataType="m:IDrawingNode">
+        <ItemsControl Name="PART_NodesItemsControl"
+                      Items="{Binding Nodes}" 
+                      Width="{Binding Width}" 
+                      Height="{Binding Height}"
+                      Background="Transparent"
+                      ClipToBounds="False">
+          <i:Interaction.Behaviors>
+            <behaviors:NodesSelectedBehavior />
+            <!-- TODO: Fix using $parent[controls:DrawingNode] -->
+            <behaviors:DrawingSelectionBehavior InputSource="{Binding $parent[controls:DrawingNode].InputSource}" 
+                                                AdornerCanvas="{Binding $parent[controls:DrawingNode].AdornerCanvas}" 
+                                                EnableSnap="{Binding $parent[controls:DrawingNode].EnableSnap}" 
+                                                SnapX="{Binding $parent[controls:DrawingNode].SnapX}" 
+                                                SnapY="{Binding $parent[controls:DrawingNode].SnapY}" 
+                                                x:CompileBindings="False" />
+            <behaviors:DrawingPressedBehavior />
+            <behaviors:DrawingMovedBehavior />
+          </i:Interaction.Behaviors>
+          <ItemsControl.Styles>
+            <Style Selector="ItemsControl > ContentPresenter" x:DataType="m:INode">
+              <Setter Property="Canvas.Left" Value="{Binding X}" />
+              <Setter Property="Canvas.Top" Value="{Binding Y}" />
+            </Style>
+          </ItemsControl.Styles>
+          <ItemsControl.ItemsPanel>
+            <ItemsPanelTemplate>
+              <Canvas />
+            </ItemsPanelTemplate>
+          </ItemsControl.ItemsPanel>
+          <ItemsControl.ItemTemplate>
+            <DataTemplate DataType="m:INode">
+              <controls:Node Name="PART_Node" />
+            </DataTemplate>
+          </ItemsControl.ItemTemplate>
+        </ItemsControl>
+      </ControlTemplate>
+    </Setter>
+
+  </ControlTheme>
+
+</ResourceDictionary>
diff --git a/src/NodeEditorAvalonia/Themes/Pins.axaml b/src/NodeEditorAvalonia/Themes/Pins.axaml
new file mode 100644
index 0000000..ce36413
--- /dev/null
+++ b/src/NodeEditorAvalonia/Themes/Pins.axaml
@@ -0,0 +1,70 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:m="clr-namespace:NodeEditor.Model;assembly=NodeEditorAvalonia.Model"
+                    xmlns:i="clr-namespace:Avalonia.Xaml.Interactivity;assembly=Avalonia.Xaml.Interactivity"
+                    xmlns:behaviors="clr-namespace:NodeEditor.Behaviors"
+                    xmlns:controls="clr-namespace:NodeEditor.Controls"
+                    x:CompileBindings="True">
+
+  <ControlTheme x:Key="{x:Type controls:Pins}" TargetType="controls:Pins">
+
+    <Setter Property="ClipToBounds" Value="False" />
+
+    <Setter Property="Template">
+      <ControlTemplate x:DataType="m:INode">
+        <ItemsControl Name="PART_PinsItemsControl"
+                      Items="{Binding Pins}"
+                      Width="{Binding Width}"
+                      Height="{Binding Height}"
+                      ClipToBounds="False">
+          <ItemsControl.Styles>
+            <Style Selector="ItemsControl > ContentPresenter" x:DataType="m:IPin">
+              <Setter Property="Canvas.Left" Value="{Binding X}" />
+              <Setter Property="Canvas.Top" Value="{Binding Y}" />
+            </Style>
+            <!-- TODO: Workaround -->
+            <Style Selector="ItemsControl > :is(ContentPresenter)">
+              <Setter Property="(i:Interaction.Behaviors)">
+                <i:BehaviorCollectionTemplate>
+                  <i:BehaviorCollection>
+                    <behaviors:PinPressedBehavior />
+                  </i:BehaviorCollection>
+                </i:BehaviorCollectionTemplate>
+              </Setter>
+            </Style>
+          </ItemsControl.Styles>
+          <ItemsControl.ItemsPanel>
+            <ItemsPanelTemplate>
+              <Canvas />
+            </ItemsPanelTemplate>
+          </ItemsControl.ItemsPanel>
+          <ItemsControl.ItemTemplate>
+            <DataTemplate DataType="m:IPin">
+              <controls:Pin Name="PART_Pin" />
+            </DataTemplate>
+          </ItemsControl.ItemTemplate>
+        </ItemsControl>
+      </ControlTemplate>
+    </Setter>
+ 
+    <!--
+    <Style Selector="^/template/ ItemsControl#PART_PinsItemsControl > :is(ContentPresenter)">
+      <Setter Property="(i:Interaction.Behaviors)">
+        <i:BehaviorCollectionTemplate>
+          <i:BehaviorCollection>
+            <behaviors:PinPressedBehavior />
+          </i:BehaviorCollection>
+        </i:BehaviorCollectionTemplate>
+      </Setter>
+    </Style>
+    -->
+
+    <!--
+    <Style Selector="^/template/ ItemsControl#PART_PinsItemsControl">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    -->
+
+  </ControlTheme>
+
+</ResourceDictionary>