chore: AutoLayout(未完)

Author: YCode

YCode.Designer.Demo/Demo/AutoLayout/AutoLayout.xaml

@@ -30,6 +30,21 @@
                     CornerRadius="3" />
         </DataTemplate>
 
+        <DataTemplate x:Key="ToolDataTemplate">
+            <Grid>
+                <Border Background="White"
+                        CornerRadius="5"
+                        Opacity="0.5" />
+                <StackPanel Margin="16"
+                            Orientation="Horizontal">
+                    <Button Height="24"
+                            Content="AutoLayout"
+                            Background="Transparent"
+                            Click="OnAutoLayoutClick" />
+                </StackPanel>
+            </Grid>
+        </DataTemplate>
+
         <local:NodeTemplateSelector x:Key="NodeTemplateSelector"
                                     NormalTemplate="{StaticResource NormalNodeTemplate}"
                                     EmptyTemplate="{StaticResource EmptyNodeTemplate}" />
@@ -43,10 +58,11 @@
 
     <Grid Background="#1E1E1E">
         <ycode:FluxoDesigner x:Name="Designer"
+                             GridType="Dot"
+                             EnableMove="False"
                              Source="{Binding Source}"
+                             ToolTemplate="{StaticResource ToolDataTemplate}"
                              ItemTemplateSelector="{StaticResource NodeTemplateSelector}"
-                             ItemContainerStyle="{StaticResource FluxoNodeStyle}"
-                             EnableMove="False"
-                             GridType="Dot" />
+                             ItemContainerStyle="{StaticResource FluxoNodeStyle}" />
     </Grid>
 </UserControl>

YCode.Designer.Demo/Demo/AutoLayout/AutoLayout.xaml.cs

@@ -1,4 +1,5 @@
 using System.Diagnostics;
+using System.Windows;
 using System.Windows.Controls;
 using YCode.Designer.Fluxo;
 
@@ -10,4 +11,9 @@ public AutoLayout()
     {
         InitializeComponent();
     }
+
+    private void OnAutoLayoutClick(object sender, RoutedEventArgs e)
+    {
+        Designer.AutoLayout();
+    }
 }

YCode.Designer.Demo/ViewModels/AutoLayoutViewModel.cs

@@ -14,7 +14,7 @@ public AutoLayoutViewModel()
         {
             Id = "Root",
             Name = "Root",
-            Location = new Point(122, 240),
+            // Location = new Point(122, 240),
             Context = new NodeContext()
             {
                 Type = NodeType.Normal
@@ -25,7 +25,7 @@ public AutoLayoutViewModel()
         {
             Id = "If1",
             Name = "Branch",
-            Location = new(399, 240),
+            // Location = new(399, 240),
             Context = new NodeContext()
             {
                 Type = NodeType.Normal
@@ -36,7 +36,7 @@ public AutoLayoutViewModel()
         {
             Id = "Process1",
             Name = "Process",
-            Location = new(799, 177),
+            // Location = new(799, 177),
             Context = new NodeContext()
             {
                 Type = NodeType.Normal
@@ -47,7 +47,7 @@ public AutoLayoutViewModel()
         {
             Id = "Process2",
             Name = "Process",
-            Location = new(799, 296.5),
+            // Location = new Point(799, 296.5),
             Context = new NodeContext()
             {
                 Type = NodeType.Normal
@@ -57,7 +57,7 @@ public AutoLayoutViewModel()
         this.Source.Nodes.Add(new FluxoNodeViewModel()
         {
             Id = "IfEnd1",
-            Location = new(1729, 303),
+            // Location = new(1729, 303),
             Context = new NodeContext()
             {
                 Type = NodeType.Empty
@@ -68,7 +68,7 @@ public AutoLayoutViewModel()
         {
             Id = "If2",
             Name = "Branch",
-            Location = new(1029, 177),
+            // Location = new(1029, 177),
             Context = new NodeContext()
             {
                 Type = NodeType.Normal
@@ -79,7 +79,7 @@ public AutoLayoutViewModel()
         {
             Id = "Process3",
             Name = "Process",
-            Location = new(1306, 228.5),
+            // Location = new(1306, 228.5),
             Context = new NodeContext()
             {
                 Type = NodeType.Normal
@@ -90,7 +90,7 @@ public AutoLayoutViewModel()
         {
             Id = "Process4",
             Name = "Process",
-            Location = new(1306, 142),
+            // Location = new(1306, 142),
             Context = new NodeContext()
             {
                 Type = NodeType.Normal
@@ -100,7 +100,7 @@ public AutoLayoutViewModel()
         this.Source.Nodes.Add(new FluxoNodeViewModel()
         {
             Id = "IfEnd2",
-            Location = new(1618, 207),
+            // Location = new(1618, 207),
             Context = new NodeContext()
             {
                 Type = NodeType.Empty
@@ -111,7 +111,7 @@ public AutoLayoutViewModel()
         {
             Id = "End",
             Name = "End",
-            Location = new(1917, 290),
+            // Location = new(1917, 290),
             Context = new NodeContext()
             {
                 Type = NodeType.Normal

YCode.Designer.Fluxo/FluxoDesigner.cs

@@ -571,6 +571,83 @@ private void OnRenderGrid(DrawingContext dc)
         }
     }
 
+    public void AutoLayout()
+    {
+        //TODO: AutoLayout
+
+        var nodes = this.ItemsHost.Children.OfType<FluxoNode>();
+
+        var pos = new Point(this.ViewportLocation.X + 160d, this.ViewportLocation.Y + 100d);
+
+        Sorting();
+
+        void Sorting()
+        {
+            var span = 100d;
+
+            var root = nodes.FirstOrDefault(x => x.Lines.All(y => x.NodeId.Equals(y.SourceId)));
+
+            if (root != null)
+            {
+                var tree = BuildTree(root, 0);
+
+                Hierarchy(tree, pos);
+            }
+
+            void Hierarchy(FluxoLayoutTree root, Point position)
+            {
+                if (root.Nexts.Count == 0)
+                {
+                    return;
+                }
+
+                var start = root.Node.Location.Y - (root.Nexts.Count - 1) * span / 2;
+
+                for (var i = 0; i < root.Nexts.Count; i++)
+                {
+                    var location = new Point(root.Node.Location.X + root.Node.ActualWidth + span, start + i * span);
+
+                    Translate(root.Nexts[i], location);
+
+                    Hierarchy(root.Nexts[i], location);
+                }
+            }
+
+            void Translate(FluxoLayoutTree node, Point location)
+            {
+                var dy = location.Y - node.Node.Location.Y;
+
+                node.Node.Location = location;
+
+                foreach (var child in node.Nexts)
+                {
+                    Translate(child,
+                        new Point(node.Node.Location.X + node.Node.ActualWidth + span, child.Node.Location.Y + dy));
+                }
+            }
+        }
+
+        FluxoLayoutTree BuildTree(FluxoNode root, int depth)
+        {
+            var tree = new FluxoLayoutTree(root)
+            {
+                Depth = depth
+            };
+
+            var nexts = root.Lines.Where(x => root.NodeId.Equals(x.SourceId)).Select(x => x.Target);
+
+            foreach (var next in nexts)
+            {
+                if (next != null)
+                {
+                    tree.AddNext(BuildTree(next, depth + 1));
+                }
+            }
+
+            return tree;
+        }
+    }
+
     private static void OnCanAutoPanningChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
     {
         if (d is FluxoDesigner designer && e.NewValue is bool canAutoPanning)

YCode.Designer.Fluxo/Models/FluxoLayoutTree.cs

@@ -0,0 +1,19 @@
+namespace YCode.Designer.Fluxo;
+
+internal class FluxoLayoutTree(FluxoNode node)
+{
+    public FluxoNode Node { get; set; } = node;
+
+    public FluxoLayoutTree? Parent { get; set; }
+
+    public int Depth { get; set; }
+
+    public List<FluxoLayoutTree> Nexts { get; } = [];
+
+    public void AddNext(FluxoLayoutTree tree)
+    {
+        tree.Parent = this;
+
+        this.Nexts.Add(tree);
+    }
+}