Spilt the scene tree and property views

GLTFViewer/.idea/.idea.GLTFViewer/.idea/avalonia.xml

@@ -4,6 +4,9 @@
     <option name="projectPerEditor">
       <map>
         <entry key="GLTFViewer/BaseOpenTKControl.axaml" value="GLTFViewer/GLTFViewer.csproj" />
+        <entry key="GLTFViewer/Engine/Ui/Controls/BasePropertyViewerControl.axaml" value="GLTFViewer/GLTFViewer.csproj" />
+        <entry key="GLTFViewer/Engine/Ui/Controls/BaseSceneTreeControl.axaml" value="GLTFViewer/GLTFViewer.csproj" />
+        <entry key="GLTFViewer/Engine/Ui/Controls/MainUI.axaml" value="GLTFViewer/GLTFViewer.csproj" />
         <entry key="GLTFViewer/MainUI.axaml" value="GLTFViewer/GLTFViewer.csproj" />
         <entry key="GLTFViewer/MainWindow.axaml" value="GLTFViewer/GLTFViewer.csproj" />
       </map>

GLTFViewer/GLTFViewer/Engine/Ui/Controls/BasePropertyViewerControl.axaml

@@ -0,0 +1,22 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="GLTFViewer.Engine.Ui.Controls.BasePropertyViewerControl">
+    
+    <Grid Background="DimGray">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        
+        <Border Grid.Row="0" BorderThickness="2" BorderBrush="Black" Padding="0 10">
+            <TextBlock Text="Inspector" TextAlignment="Center"/>
+        </Border>
+        
+        <ScrollViewer Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+            <TreeView x:Name="PropertyTreeView"></TreeView>
+        </ScrollViewer>
+    </Grid>
+</UserControl>

GLTFViewer/GLTFViewer/Engine/Ui/Controls/BasePropertyViewerControl.axaml.cs

@@ -0,0 +1,39 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Templates;
+using Avalonia.Markup.Xaml;
+
+namespace GLTFViewer.Engine.Ui.Controls;
+
+public partial class BasePropertyViewerControl : UserControl
+{
+    private TreeView _propertyTreeView;
+    private TreeView _sceneTreeView;
+    
+    public BasePropertyViewerControl()
+    {
+        InitializeComponent();
+
+        _propertyTreeView = PropertyTreeView;
+    }
+
+    public void Init(TreeView sceneTreeView)
+    {
+        _sceneTreeView = sceneTreeView;
+        
+        _sceneTreeView.SelectionChanged += (_, _) => UpdateProperties();
+    }
+    
+    public void UpdateProperties()
+    {
+        _propertyTreeView.ItemsSource = _sceneTreeView.SelectedItem is Node node ? node.Properties : null;
+        _propertyTreeView.ItemTemplate = new FuncTreeDataTemplate<NodeProperty>(
+            (property, _) =>
+            {
+                var textBlock = new TextBlock { Text = property.Name };
+                return textBlock;
+            },
+            property => null
+        );
+    }
+}

GLTFViewer/GLTFViewer/Engine/Ui/Controls/BaseSceneTreeControl.axaml

@@ -0,0 +1,22 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="GLTFViewer.Engine.Ui.Controls.BaseSceneTreeControl">
+    
+    <Grid Background="DimGray">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        
+        <Border Grid.Row="0" BorderThickness="2" BorderBrush="Black" Padding="0 10">
+            <TextBlock Text="Tree" TextAlignment="Center"/>
+        </Border>
+        
+        <ScrollViewer Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
+            <TreeView x:Name="SceneTreeView"></TreeView>
+        </ScrollViewer>
+    </Grid>
+</UserControl>

GLTFViewer/GLTFViewer/Engine/Ui/Controls/BaseSceneTreeControl.axaml.cs

@@ -0,0 +1,20 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace GLTFViewer.Engine.Ui.Controls;
+
+public partial class BaseSceneTreeControl : UserControl
+{
+    private SceneTree _sceneTree;
+    
+    public BaseSceneTreeControl()
+    {
+        InitializeComponent();
+    }
+    
+    public void Init(SceneTree sceneTree)
+    {
+        _sceneTree = sceneTree;
+    }
+}

GLTFViewer/GLTFViewer/GLTFViewer.csproj

@@ -20,4 +20,11 @@
         </PackageReference>
         <PackageReference Include="OpenTK" Version="5.0.0-pre.13" />
     </ItemGroup>
+
+    <ItemGroup>
+      <Compile Update="Engine\Ui\Controls\BaseOpenTKControl.axaml.cs">
+        <DependentUpon>BaseOpenTKControl.axaml</DependentUpon>
+        <SubType>Code</SubType>
+      </Compile>
+    </ItemGroup>
 </Project>

GLTFViewer/GLTFViewer/MainUI.axaml

@@ -1,55 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="GLTFViewer.MainUI">
-    
-    <!-- <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="DimGray"> -->
-    <!--     <StackPanel HorizontalAlignment="Stretch" Height="200"> -->
-    <!--         <Border BorderThickness="2" BorderBrush="Black" Padding="0 10"> -->
-    <!--             <TextBlock Text="Inspector" TextAlignment="Center"/> -->
-    <!--         </Border> -->
-    <!--          -->
-    <!--         <ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> -->
-    <!--             <TreeView x:Name="PropertyTreeView"></TreeView> -->
-    <!--         </ScrollViewer> -->
-    <!--     </StackPanel> -->
-    <!--      -->
-    <!--     <StackPanel> -->
-    <!--         <Border BorderThickness="2" BorderBrush="Black" Padding="0 10"> -->
-    <!--             <TextBlock Text="Tree" TextAlignment="Center"/> -->
-    <!--         </Border> -->
-    <!--          -->
-    <!--         <ScrollViewer Height="100" HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"> -->
-    <!--             <TreeView x:Name="SceneTreeView"></TreeView> -->
-    <!--         </ScrollViewer> -->
-    <!--     </StackPanel> -->
-    <!-- </StackPanel> -->
-    
-    <Grid Background="DimGray">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
-        
-        <Border Grid.Row="0" BorderThickness="2" BorderBrush="Black" Padding="0 10">
-            <TextBlock Text="Inspector" TextAlignment="Center"/>
-        </Border>
-        
-        <ScrollViewer Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
-            <TreeView x:Name="PropertyTreeView"></TreeView>
-        </ScrollViewer>
-        
-        <Border Grid.Row="2" BorderThickness="2" BorderBrush="Black" Padding="0 10">
-            <TextBlock Text="Tree" TextAlignment="Center"/>
-        </Border>
-        
-        <ScrollViewer Grid.Row="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
-            <TreeView x:Name="SceneTreeView"></TreeView>
-        </ScrollViewer>
-    </Grid>
-    
-</UserControl>

GLTFViewer/GLTFViewer/MainUI.axaml.cs

@@ -1,65 +0,0 @@
-using System;
-using System.Collections.ObjectModel;
-using System.Linq;
-using Avalonia;
-using Avalonia.Controls;
-using Avalonia.Controls.Templates;
-using Avalonia.Data;
-using Avalonia.Markup.Xaml;
-using GLTFViewer.Engine;
-using GLTFViewer.Engine.Ui;
-
-namespace GLTFViewer;
-
-public partial class MainUI : UserControl
-{
-
-    private SceneTree _sceneTree; 
-    
-    private TreeView _sceneTreeView;
-    private TreeView _propertyTreeView;
-    
-
-    
-    
-    public MainUI()
-    {
-        InitializeComponent();
-        
-        _sceneTreeView = SceneTreeView;
-        _propertyTreeView = PropertyTreeView;
-        _sceneTree = new SceneTree(_sceneTreeView);
-        
-        _sceneTreeView.SelectionChanged += PropertyTreeViewOnSelectionChanged;
-        
-        var random = new Random();
-        Node previousNode = _sceneTree.Root;
-
-        for (int i = 0; i < 20; i++)
-        {
-            var newNode = new Node($"child{i}");
-            if (random.Next(2) == 0)
-            {
-                previousNode.AddChild(newNode);
-            }
-            else
-            {
-                _sceneTree.Root.AddChild(newNode);
-            }
-            previousNode = newNode;
-        }
-    }
-
-    private void PropertyTreeViewOnSelectionChanged(object? sender, SelectionChangedEventArgs e)
-    {
-        _propertyTreeView.ItemsSource = _sceneTreeView.SelectedItem is Node node ? node.Properties : null;
-        _propertyTreeView.ItemTemplate = new FuncTreeDataTemplate<NodeProperty>(
-            (property, _) =>
-            {
-                var textBlock = new TextBlock { Text = property.Name };
-                return textBlock;
-            },
-            property => null
-        );
-    }
-}

GLTFViewer/GLTFViewer/MainWindow.axaml

@@ -3,17 +3,20 @@
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:gltfViewer="clr-namespace:GLTFViewer"
+        xmlns:controls="clr-namespace:GLTFViewer.Engine.Ui.Controls"
         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
         x:Class="GLTFViewer.MainWindow"
         Title="GLTFViewer">
         
         <Grid>
                 <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="300"/>
+                        <ColumnDefinition Width="200"/>
                         <ColumnDefinition Width="*"/>
+                        <ColumnDefinition Width="200"/>
                 </Grid.ColumnDefinitions>
                 
-                <gltfViewer:MainUI x:Name="MainUiControl" Grid.Column="0"/>
+                <controls:BaseSceneTreeControl x:Name="SceneTreeControl" Grid.Column="0" />
                 <gltfViewer:BaseOpenTKControl x:Name="OpenTkControl" Grid.Column="1" />
+                <controls:BasePropertyViewerControl x:Name="PropertyViewerControl" Grid.Column="2" />
         </Grid>
 </Window>

GLTFViewer/GLTFViewer/MainWindow.axaml.cs

@@ -1,6 +1,8 @@
 using Avalonia.Controls;
 using Avalonia.Layout;
 using Avalonia.Media;
+using GLTFViewer.Engine.Ui;
+using GLTFViewer.Engine.Ui.Controls;
 using GLTFViewer.Rendering;
 
 namespace GLTFViewer;
@@ -9,17 +11,25 @@ public partial class MainWindow : Window
 {
 
     private Renderer _renderer;
+    private SceneTree _sceneTree;
+    
+    private BaseSceneTreeControl _sceneTreeControl;
     private BaseOpenTKControl _openTkControl;
-    private MainUI _mainUI;
+    private BasePropertyViewerControl _propertyViewerControl;
     
     public MainWindow()
     {
         InitializeComponent();
         
-        _renderer = new Renderer();
+        _sceneTreeControl = SceneTreeControl;
-
-        _mainUI = MainUiControl;
         _openTkControl = OpenTkControl;
+        _propertyViewerControl = PropertyViewerControl;
+        
+        _renderer = new Renderer();
+        _sceneTree = new SceneTree(_sceneTreeControl.SceneTreeView);
+        
+        _sceneTreeControl.Init(_sceneTree);
+        _propertyViewerControl.Init(_sceneTreeControl.SceneTreeView);
         
         _openTkControl.OnInit += _renderer.Initialize;
         _openTkControl.OnRender += _renderer.Render;