NodeEditor for Avalonia

https://github.com/wieslawsoltes/nodeeditor
Admin
NodeEditor for Avalonia is a customizable node editor control for building interactive graphs with...
Tokens:15,598
Snippets:170
Trust Score:7.2
License:MIT
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install NodeEditorAvalonia NuGet Packages

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/articles/getting-started.md

Installs the core NodeEditorAvalonia library along with optional Model and MVVM support packages via the .NET CLI. These packages provide the necessary controls, themes, and architectural layers for node-based editing.

```bash
dotnet add package NodeEditorAvalonia
dotnet add package NodeEditorAvalonia.Model
dotnet add package NodeEditorAvalonia.Mvvm
```

--------------------------------

### Complete Node Editor Integration Example in C#

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

A full example demonstrating how to integrate the node editor with a custom node factory, serialization mechanisms, and menu commands within a C# application. This example utilizes Avalonia UI components and requires the NodeEditor.Model and NodeEditor.Mvvm namespaces.

```csharp
using Avalonia.Controls;
using NodeEditor.Model;
using NodeEditor.Mvvm;
using System.Collections.ObjectModel;

public class MainViewModel
{
    public EditorViewModel Editor { get; }

    public MainViewModel()
    {
        var factory = new CircuitNodeFactory();
        var serializer = new NodeSerializer(typeof(ObservableCollection<>));

        Editor = new EditorViewModel
        {
            Factory = factory,
            Serializer = serializer,
            Templates = factory.CreateTemplates(),
            Drawing = CreateDemoCircuit(factory)
        };

        if (Editor.Drawing is DrawingNodeViewModel drawingVm)
        {
            drawingVm.SetSerializer(serializer);
            drawingVm.SelectionChanged += OnSelectionChanged;
            drawingVm.ConnectionRejected += OnConnectionRejected;
        }
    }

    private IDrawingNode CreateDemoCircuit(INodeFactory factory)
    {
        var drawing = (DrawingNodeViewModel)factory.CreateDrawing("Demo Circuit");

        drawing.Settings = new DrawingNodeSettingsViewModel
        {
            EnableSnap = true,
            SnapX = 15, SnapY = 15,
            EnableGrid = true,
            GridCellWidth = 15, GridCellHeight = 15,
            EnableGuides = true,
            RequireDirectionalConnections = true,
            DefaultConnectorStyle = ConnectorStyle.Orthogonal,
            EnableConnectorRouting = true
        };

        // Create nodes
        var input1 = CreateNode("Input", 50, 100, drawing);
        var input2 = CreateNode("Input", 50, 200, drawing);
        var gate = CreateNode("AND Gate", 200, 150, drawing);
        var output = CreateNode("Output", 350, 150, drawing);

        // Connect nodes
        Connect(input1.Pins[0], gate.Pins[0], drawing);
        Connect(input2.Pins[0], gate.Pins[1], drawing);
        Connect(gate.Pins[2], output.Pins[0], drawing);

        return drawing;
    }

    private NodeViewModel CreateNode(string type, double x, double y, DrawingNodeViewModel drawing)
    {
        var node = new NodeViewModel
        {
            Name = type,
            X = x, Y = y,
            Width = 100, Height = 50,
            Parent = drawing,
            Pins = new ObservableCollection<IPin>()
        };

        node.AddPin(0, 25, 8, 8, PinAlignment.Left, "in");
        node.AddPin(100, 25, 8, 8, PinAlignment.Right, "out");

        drawing.Nodes.Add(node);
        return node;
    }

    private void Connect(IPin start, IPin end, DrawingNodeViewModel drawing)
    {
        var connector = new ConnectorViewModel
        {
            Start = start,
            End = end,
            Parent = drawing
        };
        drawing.Connectors.Add(connector);
    }

    private void OnSelectionChanged(object? sender, EventArgs e)
    {
        var drawing = Editor.Drawing as DrawingNodeViewModel;
        var count = drawing?.GetSelectedNodes()?.Count ?? 0;
        Console.WriteLine($"Selection: {count} nodes");
    }

    private void OnConnectionRejected(object? sender, ConnectionRejectedEventArgs e)
    {
        Console.WriteLine($"Connection rejected: {e.Start.Name} -> {e.End.Name}");
    }
}
```

--------------------------------

### Evaluate logic graph simulation in C#

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/articles/logiclab-simulation.md

Demonstrates how to execute a logic graph evaluation using the LogicSimulationService. The example checks the stability of the simulation result and inspects diagnostic messages if the graph fails to settle.

```csharp
var result = simulator.Evaluate(drawing);
if (!result.IsStable)
{
    // Inspect result.Messages
}
```

--------------------------------

### Configure Drawing Node Settings - C#

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/articles/drawing-settings.md

Demonstrates how to create and configure a DrawingNodeSettingsViewModel instance with various interaction and routing behaviors enabled. This example showcases settings for snapping, guides, directional connections, bus width matching, and routing algorithms.

```csharp
var settings = new DrawingNodeSettingsViewModel
{
    EnableSnap = true,
    SnapX = 10,
    SnapY = 10,
    EnableGuides = true,
    RequireDirectionalConnections = true,
    RequireMatchingBusWidth = true,
    DefaultConnectorStyle = ConnectorStyle.Orthogonal,
    RoutingAlgorithm = ConnectorRoutingAlgorithm.Octilinear
};
```

--------------------------------

### Implement Undo/Redo and Batching in NodeEditor

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

Demonstrates how to enable undo/redo functionality using IUndoRedoHost and how to group multiple operations into a single atomic undo step. Includes examples for both C# logic and XAML command bindings.

```csharp
var serializer = new NodeSerializer(typeof(ObservableCollection<>));
drawing.SetSerializer(serializer);

bool canUndo = drawing.CanUndo;
bool canRedo = drawing.CanRedo;

drawing.Undo();
drawing.Redo();

if (drawing is IUndoRedoHost host)
{
    host.BeginUndoBatch();
    try
    {
        foreach (var node in nodesToMove)
        {
            node.Move(100, 0);
        }
    }
    finally
    {
        host.EndUndoBatch();
    }
}
```

```xml
<Button Command="{Binding Editor.Drawing.UndoCommand}" Content="Undo" />
<Button Command="{Binding Editor.Drawing.RedoCommand}" Content="Redo" />
```

--------------------------------

### Initialize Node and Add Pins using C#

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/articles/nodes-and-pins.md

Demonstrates how to instantiate a NodeViewModel with specific dimensions and attach input/output pins using the NodeViewModelExtensions helper. This setup defines the basic spatial properties and connection points for a graph node.

```csharp
var node = new NodeViewModel
{
    Name = "Example",
    X = 100,
    Y = 100,
    Width = 180,
    Height = 100
};

node.AddPin(x: 0, y: 30, width: 10, height: 10, alignment: PinAlignment.Left, name: "In");
node.AddPin(x: 180, y: 30, width: 10, height: 10, alignment: PinAlignment.Right, name: "Out");
```

--------------------------------

### Install NodeEditor Package (XML)

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/index.md

XML snippet for adding the NodeEditorAvalonia NuGet package reference in a .csproj file.

```xml
<PackageReference Include="NodeEditorAvalonia" Version="..." />
```

--------------------------------

### Configure NodeEditor Theme in App.axaml

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/articles/getting-started.md

Registers the NodeEditor theme within the Avalonia application styles. This ensures that default control templates are correctly applied throughout the application.

```xml
<Application.Styles>
  <FluentTheme />
  <StyleInclude Source="avares://NodeEditorAvalonia/Themes/NodeEditorTheme.axaml" />
</Application.Styles>
```

--------------------------------

### Configure Drawing Node Settings in C#

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

Sets up various drawing and interaction behaviors for the NodeEditor, including connection rules, snapping, grid, guides, nudging, and auto-routing. It allows customization of connection policies, grid and snap behavior, guide snapping tolerance, keyboard nudge sensitivity, and routing algorithm parameters.

```csharp
using NodeEditor.Model;
using NodeEditor.Mvvm;

var settings = new DrawingNodeSettingsViewModel
{
    // Connection rules
    EnableConnections = true,
    RequireDirectionalConnections = true,    // Enforce Output -> Input
    RequireMatchingBusWidth = true,          // Match bus widths
    EnableMultiplePinConnections = false,    // One connection per pin
    AllowSelfConnections = false,            // No self-loops
    AllowDuplicateConnections = false,       // No duplicate links

    // Snap and grid
    EnableSnap = true,
    SnapX = 10,
    SnapY = 10,
    EnableGrid = true,
    GridCellWidth = 10,
    GridCellHeight = 10,

    // Guides
    EnableGuides = true,
    GuideSnapTolerance = 6.0,

    // Keyboard nudge
    NudgeStep = 1.0,
    NudgeMultiplier = 10.0,

    // Auto routing
    EnableConnectorRouting = true,
    RoutingGridSize = 10.0,
    RoutingObstaclePadding = 8.0,
    RoutingAlgorithm = ConnectorRoutingAlgorithm.Octilinear,
    RoutingBendPenalty = 0.6,
    RoutingDiagonalCost = 1.4,
    RoutingCornerRadius = 10.0,
    RoutingMaxCells = 200,

    // Default style
    DefaultConnectorStyle = ConnectorStyle.Orthogonal
};
```

--------------------------------

### Install NodeEditor Package (Bash)

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/index.md

Command to add the NodeEditorAvalonia NuGet package to your Avalonia project using the .NET CLI.

```bash
dotnet add package NodeEditorAvalonia
```

--------------------------------

### Example: Custom Action with Undo Batching in C#

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/articles/commands-and-undo.md

Demonstrates how to wrap a custom drawing mutation within an undo batch. This ensures that the entire operation is treated as a single undoable step in the history. It requires the drawing object to implement IUndoRedoHost.

```csharp
if (drawing is IUndoRedoHost host)
{
    host.BeginUndoBatch();
    try
    {
        // mutate drawing
    }
    finally
    {
        host.EndUndoBatch();
    }
}
```

--------------------------------

### Implement Editor Control in XAML

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/articles/getting-started.md

Adds the Editor control to a UserControl and binds it to a DrawingSource. The DrawingSource serves as the data context containing the nodes, pins, and links for the editor.

```xml
<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:editor="clr-namespace:NodeEditor.Controls;assembly=NodeEditorAvalonia">
  <editor:Editor DrawingSource="{Binding Editor.Drawing}" />
</UserControl>
```

--------------------------------

### Customize Node Editor Appearance with XAML Theming

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

Override theme resources in your application's XAML styles to customize the node editor's appearance. This includes defining brushes for pins, connectors, resize handles, guide lines, and connection rejection feedback. No external dependencies are required beyond the standard Avalonia framework.

```xml
<Application.Resources>
    <ResourceDictionary>
        <!-- Pin colors -->
        <SolidColorBrush x:Key="PinBackgroundBrush" Color="#FF2196F3" />
        <SolidColorBrush x:Key="PinPointerOverBackgroundBrush" Color="#FF64B5F6" />

        <!-- Connector colors -->
        <SolidColorBrush x:Key="ConnectorBackgroundBrush" Color="#FF424242" />

        <!-- Resize handles -->
        <SolidColorBrush x:Key="NodeResizeHandleFillBrush" Color="White" />
        <SolidColorBrush x:Key="NodeResizeHandleBorderBrush" Color="#FF2196F3" />

        <!-- Guide lines -->
        <SolidColorBrush x:Key="GuideLineBrush" Color="#FFFF5722" />

        <!-- Connection rejection feedback -->
        <SolidColorBrush x:Key="ConnectionRejectedBrush" Color="#FFE53935" />

        <!-- Connector crossings -->
        <SolidColorBrush x:Key="ConnectorCrossingStrokeBrush" Color="White" />
        <x:Double x:Key="ConnectorCrossingStrokeThickness">2</x:Double>
        <x:Double x:Key="ConnectorCrossingArcRadius">6</x:Double>
    </ResourceDictionary>
</Application.Resources>
```

--------------------------------

### Initialize and Manipulate NodeViewModel

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

Demonstrates how to instantiate a NodeViewModel, configure its dimensions and pins, and perform programmatic transformations like moving and resizing. It also shows event subscription for tracking node state changes.

```csharp
using NodeEditor.Model;
using NodeEditor.Mvvm;
using System.Collections.ObjectModel;

var node = new NodeViewModel
{
    Name = "MyNode",
    X = 100,
    Y = 100,
    Width = 180,
    Height = 100,
    Content = new MyNodeContentViewModel { Label = "Process" },
    Pins = new ObservableCollection<IPin>(),
    IsVisible = true,
    IsLocked = false
};

node.AddPin(x: 0, y: 50, width: 10, height: 10,
            alignment: PinAlignment.Left, name: "Input");
node.AddPin(x: 180, y: 50, width: 10, height: 10,
            alignment: PinAlignment.Right, name: "Output");

node.Parent = drawing;
drawing.Nodes.Add(node);
node.OnCreated();

node.Moved += (sender, e) => Console.WriteLine($"Node moved to ({e.X}, {e.Y})");
node.Resized += (sender, e) => Console.WriteLine($"Node resized to {e.Width}x{e.Height}");
node.Selected += (sender, e) => Console.WriteLine("Node selected");

node.Move(deltaX: 50, deltaY: 25);
node.Resize(deltaX: 20, deltaY: 0, NodeResizeDirection.Right);
```

--------------------------------

### Configure PinViewModel

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

Shows how to create input and output pins with specific bus widths and alignments. These pins are attached to nodes to facilitate connections.

```csharp
using NodeEditor.Model;
using NodeEditor.Mvvm;

var inputPin = new PinViewModel
{
    Name = "DataIn",
    Parent = node,
    X = 0,
    Y = 50,
    Width = 10,
    Height = 10,
    Alignment = PinAlignment.Left,
    Direction = PinDirection.Input,
    BusWidth = 1
};

var busPin = new PinViewModel
{
    Name = "DataBus",
    Parent = node,
    X = 180,
    Y = 50,
    Width = 10,
    Height = 10,
    Alignment = PinAlignment.Right,
    Direction = PinDirection.Output,
    BusWidth = 8
};

node.Pins.Add(inputPin);
node.Pins.Add(busPin);

inputPin.Connected += (sender, e) => Console.WriteLine("Pin connected");
inputPin.Disconnected += (sender, e) => Console.WriteLine("Pin disconnected");
```

--------------------------------

### Create and Route ConnectorViewModel

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

Illustrates how to link nodes using different connector styles such as Bezier and Orthogonal. It also demonstrates manual routing using waypoints.

```csharp
using NodeEditor.Model;
using NodeEditor.Mvvm;
using System.Collections.ObjectModel;

var connector = new ConnectorViewModel
{
    Start = sourceNode.Pins[1],
    End = targetNode.Pins[0],
    Style = ConnectorStyle.Bezier,
    Orientation = ConnectorOrientation.Auto,
    RoutingMode = ConnectorRoutingMode.Auto
};

connector.Parent = drawing;
drawing.Connectors.Add(connector);
connector.OnCreated();

var orthogonalConnector = new ConnectorViewModel
{
    Start = node1.Pins[1],
    End = node2.Pins[0],
    Style = ConnectorStyle.Orthogonal,
    StartArrow = ConnectorArrowStyle.None,
    EndArrow = ConnectorArrowStyle.Arrow,
    RoutingMode = ConnectorRoutingMode.Auto
};

var manualConnector = new ConnectorViewModel
{
    Start = node1.Pins[1],
    End = node2.Pins[0],
    Style = ConnectorStyle.Orthogonal,
    RoutingMode = ConnectorRoutingMode.Manual,
    Waypoints = new ObservableCollection<ConnectorPoint>
    {
        new ConnectorPoint { X = 200, Y = 120 },
        new ConnectorPoint { X = 220, Y = 160 },
        new ConnectorPoint { X = 300, Y = 160 }
    }
};
```

--------------------------------

### Initialize EditorViewModel

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

Set up the EditorViewModel with a factory and serializer to manage node templates and drawing state.

```csharp
using NodeEditor.Model;
using NodeEditor.Mvvm;
using System.Collections.ObjectModel;

public class MainViewModel
{
    public EditorViewModel Editor { get; }

    public MainViewModel()
    {
        var factory = new MyNodeFactory();
        var serializer = new NodeSerializer(typeof(ObservableCollection<>));

        Editor = new EditorViewModel
        {
            Factory = factory,
            Serializer = serializer,
            Templates = factory.CreateTemplates(),
            Drawing = factory.CreateDrawing("My Drawing")
        };

        if (Editor.Drawing is DrawingNodeViewModel drawingVm)
        {
            drawingVm.SetSerializer(serializer);
        }
    }
}
```

--------------------------------

### Render visual control to PNG using ExportRenderer

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/articles/export-and-storage.md

Demonstrates how to use the ExportRenderer class to capture a visual control and save it as a PNG file. This requires a valid file stream and specific dimensions for the output.

```csharp
using var stream = File.Create("drawing.png");
ExportRenderer.RenderPng(editorControl, new Size(1280, 720), stream);
```

--------------------------------

### Implement Custom Connection Validation in C#

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

Demonstrates how to implement custom connection validation logic using the `ConnectionValidator` delegate. This allows for domain-specific rules beyond the default settings, such as type-based validation or advanced checks for direction and bus width compatibility.

```csharp
using NodeEditor.Model;

// Simple type-based validation
settings.ConnectionValidator = context =>
{
    // Get pin type from name prefix (e.g., "sig:Input" -> "sig")
    var startType = GetPinType(context.Start.Name);
    var endType = GetPinType(context.End.Name);

    // Only allow connections between same types
    if (startType != null && endType != null)
    {
        return string.Equals(startType, endType, StringComparison.OrdinalIgnoreCase);
    }

    return true;
};

// Advanced validation with bus width checking
settings.ConnectionValidator = context =>
{
    if (context.Start is IConnectablePin start && context.End is IConnectablePin end)
    {
        // Check direction compatibility
        if (start.Direction == PinDirection.Input && end.Direction == PinDirection.Input)
            return false;
        if (start.Direction == PinDirection.Output && end.Direction == PinDirection.Output)
            return false;

        // Check bus width compatibility
        if (start.BusWidth != end.BusWidth && start.BusWidth > 1 && end.BusWidth > 1)
            return false;
    }

    return true;
};

string? GetPinType(string? name)
{
    if (string.IsNullOrWhiteSpace(name)) return null;
    var index = name.IndexOf(':');
    return index > 0 ? name[..index] : null;
}
```

--------------------------------

### Configure DrawingNodeViewModel

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

Create and customize a DrawingNodeViewModel instance, including grid settings and event subscriptions for selection and connection logic.

```csharp
using NodeEditor.Model;
using NodeEditor.Mvvm;
using System.Collections.ObjectModel;

var settings = new DrawingNodeSettingsViewModel
{
    EnableMultiplePinConnections = true,
    EnableSnap = true,
    SnapX = 15.0,
    SnapY = 15.0,
    EnableGrid = true,
    GridCellWidth = 15.0,
    GridCellHeight = 15.0,
    EnableGuides = true,
    RequireDirectionalConnections = true,
    DefaultConnectorStyle = ConnectorStyle.Orthogonal
};

var drawing = new DrawingNodeViewModel
{
    Name = "Circuit Diagram",
    Settings = settings,
    X = 0,
    Y = 0,
    Width = 900,
    Height = 600,
    Nodes = new ObservableCollection<INode>(),
    Connectors = new ObservableCollection<IConnector>()
};

drawing.SelectionChanged += (sender, e) =>
{
    var selectedNodes = drawing.GetSelectedNodes();
    Console.WriteLine($"Selected {selectedNodes?.Count ?? 0} nodes");
};

drawing.ConnectionRejected += (sender, e) =>
{
    Console.WriteLine($"Connection rejected: {e.Start.Name} -> {e.End.Name}");
};
```

--------------------------------

### Implement Connection Validation in C#

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/articles/extensibility.md

Demonstrates how to assign a custom validation delegate to IDrawingNodeSettings.ConnectionValidator. This allows developers to enforce specific business rules when users create or modify connections between nodes.

```csharp
settings.ConnectionValidator = context =>
{
    // Validate context.Start and context.End
    return true;
};
```

--------------------------------

### Implement INodeFactory for Node Templates and Drawings

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

Defines a custom node factory to generate toolbox templates and initialize new drawing documents. It requires implementing INodeFactory and provides methods to construct specific node types with predefined pins and content.

```csharp
using NodeEditor.Model;
using NodeEditor.Mvvm;
using System.Collections.Generic;
using System.Collections.ObjectModel;

public class MyNodeFactory : INodeFactory
{
    public IList<INodeTemplate> CreateTemplates()
    {
        return new ObservableCollection<INodeTemplate>
        {
            new NodeTemplateViewModel
            {
                Title = "Input",
                Template = CreateInputNode(0, 0),
                Preview = CreateInputNode(0, 0)
            },
            new NodeTemplateViewModel
            {
                Title = "Process",
                Template = CreateProcessNode(0, 0),
                Preview = CreateProcessNode(0, 0)
            },
            new NodeTemplateViewModel
            {
                Title = "Output",
                Template = CreateOutputNode(0, 0),
                Preview = CreateOutputNode(0, 0)
            }
        };
    }

    public IDrawingNode CreateDrawing(string? name = null)
    {
        return new DrawingNodeViewModel
        {
            Name = name,
            Settings = new DrawingNodeSettingsViewModel(),
            Width = 800,
            Height = 600,
            Nodes = new ObservableCollection<INode>(),
            Connectors = new ObservableCollection<IConnector>()
        };
    }

    private static NodeViewModel CreateInputNode(double x, double y)
    {
        var node = new NodeViewModel
        {
            Name = "Input",
            X = x, Y = y,
            Width = 120, Height = 40,
            Content = new InputNodeContent { Label = "Input" },
            Pins = new ObservableCollection<IPin>()
        };

        node.AddPin(120, 20, 10, 10, PinAlignment.Right, "out");
        return node;
    }

    private static NodeViewModel CreateProcessNode(double x, double y)
    {
        var node = new NodeViewModel
        {
            Name = "Process",
            X = x, Y = y,
            Width = 150, Height = 80,
            Content = new ProcessNodeContent { Label = "Process" },
            Pins = new ObservableCollection<IPin>()
        };

        node.AddPin(0, 40, 10, 10, PinAlignment.Left, "in");
        node.AddPin(150, 40, 10, 10, PinAlignment.Right, "out");
        return node;
    }

    private static NodeViewModel CreateOutputNode(double x, double y)
    {
        var node = new NodeViewModel
        {
            Name = "Output",
            X = x, Y = y,
            Width = 120, Height = 40,
            Content = new OutputNodeContent { Label = "Output" },
            Pins = new ObservableCollection<IPin>()
        };

        node.AddPin(0, 20, 10, 10, PinAlignment.Left, "in");
        return node;
    }
}
```

--------------------------------

### Basic XAML for Editor Control

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/articles/editor-control.md

Demonstrates the basic XAML structure for integrating the Editor control into an Avalonia application. It shows how to bind the DrawingSource property to a ViewModel's Drawing object.

```xml
<editor:Editor DrawingSource="{Binding Editor.Drawing}" />
```

--------------------------------

### Manage Node Selection, Alignment, and Z-Order

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

API methods for manipulating node layout, including alignment, distribution, Z-order, and visibility states.

```csharp
drawing.SelectAllNodes();
drawing.AlignSelectedNodes(NodeAlignment.Left);
drawing.DistributeSelectedNodes(NodeDistribution.Horizontal);
drawing.OrderSelectedNodes(NodeOrder.BringToFront);
drawing.LockSelection();
```

--------------------------------

### Configure Toolbox and Editor in XAML

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

Integrates the Toolbox and Editor controls into an Avalonia XAML layout. The Toolbox is bound to the template source, enabling drag-and-drop functionality for the editor.

```xml
<Grid ColumnDefinitions="200,*">
    <Border Grid.Column="0" Background="{DynamicResource SystemControlBackgroundAltHighBrush}">
        <editor:Toolbox TemplatesSource="{Binding Editor.Templates}" />
    </Border>

    <editor:Editor Grid.Column="1" DrawingSource="{Binding Editor.Drawing}" />
</Grid>
```

--------------------------------

### Configure Manual Routing for Connectors

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/articles/connectors-and-routing.md

Demonstrates how to set a connector to manual routing mode and define a custom path using a list of ConnectorPoint objects. This allows developers to override automatic routing logic with specific coordinates.

```csharp
connector.RoutingMode = ConnectorRoutingMode.Manual;
connector.Waypoints = new List<ConnectorPoint>
{
    new ConnectorPoint { X = 200, Y = 120 },
    new ConnectorPoint { X = 220, Y = 160 }
};
```

--------------------------------

### Handle Ink Annotations

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

Manages freehand drawing modes, pen configuration, and conversion of ink strokes into nodes.

```csharp
drawing.ToggleInkMode();
drawing.AddPen();
if (drawing.Settings.ActivePen is InkPen pen)
{
    pen.Color = 0xFF1E88E5;
    pen.Thickness = 3.0;
}
drawing.ConvertInkToNodes();
```

```xml
<ToggleButton Command="{Binding Editor.Drawing.DrawInkCommand}" Content="Draw" />
<Button Command="{Binding Editor.Drawing.ConvertInkCommand}" Content="Convert to Nodes" />
```

--------------------------------

### Serialize and Deserialize Drawings with NodeSerializer

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/articles/serialization.md

Demonstrates how to initialize the NodeSerializer with a specific collection type and perform save/load operations on a DrawingNodeViewModel. This process ensures that complex node structures are persisted to and retrieved from JSON files.

```csharp
var serializer = new NodeSerializer(typeof(System.Collections.ObjectModel.ObservableCollection<>));

var drawing = new DrawingNodeViewModel();

drawing.SetSerializer(serializer);

serializer.Save("drawing.json", drawing);

var loaded = serializer.Load<DrawingNodeViewModel>("drawing.json");
```

--------------------------------

### Create NodeTemplateViewModel Instance

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/articles/templates-toolbox.md

A NodeTemplateViewModel is used to define a template's display title, the actual node instance to be inserted, and a lightweight preview node for UI representation.

```csharp
var template = new NodeTemplateViewModel
{
    Title = "My Node",
    Template = CreateNode(),
    Preview = CreatePreviewNode()
};
```

--------------------------------

### Serialize and Deserialize Node Drawings

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

Demonstrates using NodeSerializer to persist drawing models to JSON files. It supports full type preservation and can be attached to a drawing model to enable undo/redo capabilities.

```csharp
using NodeEditor.Mvvm;
using System.Collections.ObjectModel;

var serializer = new NodeSerializer(typeof(ObservableCollection<>));

string json = serializer.Serialize(drawing);

var loadedDrawing = serializer.Deserialize<DrawingNodeViewModel>(json);

serializer.Save("circuit.json", drawing);

var drawing = serializer.Load<DrawingNodeViewModel>("circuit.json");

drawing.SetSerializer(serializer);
```

--------------------------------

### Export Drawing to External Formats

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

Utilizes the ExportRenderer service to save the current editor control content into PNG, SVG, or PDF formats.

```csharp
using var pngStream = File.Create("drawing.png");
ExportRenderer.RenderPng(editorControl, new Size(1920, 1080), pngStream);

using var svgStream = File.Create("drawing.svg");
ExportRenderer.RenderSvg(editorControl, new Size(1920, 1080), svgStream);

using var pdfStream = File.Create("drawing.pdf");
ExportRenderer.RenderPdf(editorControl, new Size(1920, 1080), pdfStream);
```

--------------------------------

### Perform Clipboard Operations on Nodes

Source: https://context7.com/wieslawsoltes/nodeeditor/llms.txt

Provides methods to cut, copy, paste, and duplicate nodes within the drawing context. Includes XAML command bindings for UI integration.

```csharp
drawing.CopyNodes();
drawing.CutNodes();
drawing.PasteNodes();
drawing.DuplicateNodes();
```

```xml
<MenuItem Header="Cut" Command="{Binding Editor.Drawing.CutNodesCommand}" InputGesture="Ctrl+X" />
<MenuItem Header="Copy" Command="{Binding Editor.Drawing.CopyNodesCommand}" InputGesture="Ctrl+C" />
<MenuItem Header="Paste" Command="{Binding Editor.Drawing.PasteNodesCommand}" InputGesture="Ctrl+V" />
<MenuItem Header="Duplicate" Command="{Binding Editor.Drawing.DuplicateNodesCommand}" InputGesture="Ctrl+D" />
```

--------------------------------

### Define INodeFactory Interface

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/articles/templates-toolbox.md

The INodeFactory interface is responsible for generating collections of node templates and creating new drawing node instances. It serves as the primary source for populating the toolbox.

```csharp
public interface INodeFactory
{
    IList<INodeTemplate> CreateTemplates();
    IDrawingNode CreateDrawing(string? name = null);
}
```

--------------------------------

### Bind Toolbox Control in XAML

Source: https://github.com/wieslawsoltes/nodeeditor/blob/main/docfx/articles/templates-toolbox.md

The Toolbox control is integrated into the UI by binding its TemplatesSource property to an IEnumerable collection of INodeTemplate objects, typically provided by the EditorViewModel.

```xml
<editor:Toolbox TemplatesSource="{Binding Editor.Templates}" />
```
Tokens:
Raw