Some dock progress

src/PixiEditor.Avalonia/PixiEditor.AvaloniaUI/App.axaml

@@ -1,10 +1,13 @@
 <Application xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:themes="clr-namespace:PixiEditor.UI.Common.Themes;assembly=PixiEditor.UI.Common"
+             xmlns:avaloniaUi="clr-namespace:PixiEditor.AvaloniaUI"
              x:Class="PixiEditor.AvaloniaUI.App"
              RequestedThemeVariant="Dark">
              <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
-
+             <Application.DataTemplates>
+                 <avaloniaUi:ViewLocator />
+             </Application.DataTemplates>
     <Application.Styles>
         <themes:PixiEditorTheme />
         <StyleInclude Source="/Styles/PixiEditor.Controls.axaml"/>

src/PixiEditor.Avalonia/PixiEditor.AvaloniaUI/ViewLocator.cs

@@ -0,0 +1,41 @@
+using System.Collections.Generic;
+using Avalonia.Controls;
+using Avalonia.Controls.Templates;
+using CommunityToolkit.Mvvm.ComponentModel;
+using Dock.Model.Core;
+using PixiEditor.AvaloniaUI.ViewModels.Dock;
+using PixiEditor.AvaloniaUI.Views.Dock;
+
+namespace PixiEditor.AvaloniaUI;
+
+public class ViewLocator : IDataTemplate
+{
+    public static Dictionary<Type, Type> ViewBindingsMap = new Dictionary<Type, Type>()
+    {
+        [typeof(DockDocumentViewModel)] = typeof(DocumentTemplate)
+    };
+
+    public Control Build(object? data)
+    {
+        Type type = data?.GetType() ?? typeof(object);
+        if (ViewBindingsMap.TryGetValue(type, out Type viewType))
+        {
+            var instance = Activator.CreateInstance(viewType);
+            if (instance is { })
+            {
+                return (Control)instance;
+            }
+            else
+            {
+                return new TextBlock { Text = "Create Instance Failed: " + viewType.FullName };
+            }
+        }
+
+        throw new KeyNotFoundException($"View for {type.FullName} not found");
+    }
+
+    public bool Match(object? data)
+    {
+        return data is ObservableObject || data is IDockable;
+    }
+}

src/PixiEditor.Avalonia/PixiEditor.AvaloniaUI/ViewModels/Dock/DockDocumentViewModel.cs

@@ -0,0 +1,10 @@
+using Dock.Model.Avalonia.Controls;
+
+namespace PixiEditor.AvaloniaUI.ViewModels.Dock;
+
+public class DockDocumentViewModel : global::Dock.Model.Avalonia.Controls.Document
+{
+    public DockDocumentViewModel()
+    {
+    }
+}

src/PixiEditor.Avalonia/PixiEditor.AvaloniaUI/ViewModels/Dock/DockFactory.cs

@@ -24,17 +24,20 @@ public class DockFactory : Factory
             {
                 mainLayout,
             },
+            ActiveDockable = mainLayout
         };
-        return base.CreateLayout();
+        return root;
     }
 
     private DockDock BuildMainLayout()
     {
+        var dockables = BuildDockables();
         DockDock dock = new DockDock()
         {
             Name = "MainLayout",
             Id = "MainLayout",
-            VisibleDockables = BuildDockables(),
+            VisibleDockables = dockables,
+            ActiveDockable = dockables[0],
         };
 
         return dock;
@@ -45,6 +48,8 @@ public class DockFactory : Factory
         List<IDockable> dockables = new List<IDockable>();
         dockables.Add(BuildToolDock());
 
+        IDockable documentDock = BuildDocumentDock();
+
         ProportionalDock topPane = new ProportionalDock()
         {
             Id = "TopPane",
@@ -57,21 +62,22 @@ public class DockFactory : Factory
                     Orientation = Orientation.Horizontal,
                     VisibleDockables = new List<IDockable>()
                     {
-                        BuildDocumentDock(),
+                        documentDock,
                         BuildPropertiesDock()
                     },
+                    ActiveDockable = documentDock
                 },
             },
         };
 
-        dockables.Add(BuildDocumentDock());
+        dockables.Add(topPane);
 
         return dockables;
     }
 
     private IDockable BuildDocumentDock()
     {
-        documentDock = new DocumentDock()
+        documentDock = new PixiEditorDocumentDock()
         {
             Id = "DocumentsPane",
             Title = "Document",
@@ -108,6 +114,13 @@ public class DockFactory : Factory
             { "ToolsPane", () => toolDock },
         };
 
+        ContextLocator = new Dictionary<string, Func<object?>>()
+        {
+            { "MainLayout", () => mainLayout },
+            { "DocumentsPane", () => documentDock },
+            { "ToolsPane", () => toolDock },
+        };
+
         HostWindowLocator = new Dictionary<string, Func<IHostWindow?>>()
         {
             { "MainLayout", () => new HostWindow() },

src/PixiEditor.Avalonia/PixiEditor.AvaloniaUI/ViewModels/Dock/PixiEditorDocumentDock.cs

@@ -0,0 +1,26 @@
+using CommunityToolkit.Mvvm.Input;
+using Dock.Model.Avalonia.Controls;
+
+namespace PixiEditor.AvaloniaUI.ViewModels.Dock;
+
+public class PixiEditorDocumentDock : DocumentDock
+{
+    public PixiEditorDocumentDock()
+    {
+        CreateDocument = new RelayCommand(CreateDockDocument);
+    }
+
+    private void CreateDockDocument()
+    {
+        if (!CanCreateDocument)
+        {
+            return;
+        }
+
+        var document = new DockDocumentViewModel() { Title = "hello" };
+
+        Factory?.AddDockable(this, document);
+        Factory?.SetActiveDockable(document);
+        Factory?.SetFocusedDockable(this, document);
+    }
+}

src/PixiEditor.Avalonia/PixiEditor.AvaloniaUI/Views/Dock/DocumentTemplate.axaml

@@ -0,0 +1,104 @@
+<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"
+             xmlns:userControls="clr-namespace:PixiEditor.Views.UserControls"
+             xmlns:viewModels="clr-namespace:PixiEditor.ViewModels"
+             xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
+             xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
+             xmlns:xaml="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.XAML"
+             xmlns:palettes="clr-namespace:PixiEditor.Views.UserControls.Palettes"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="PixiEditor.AvaloniaUI.Views.Dock.DocumentTemplate">
+    <userControls:Viewport
+                                             CenterViewportTrigger="{Binding CenterViewportTrigger}"
+                                            ZoomViewportTrigger="{Binding ZoomViewportTrigger}"
+                                            MouseDownCommand="{Binding ElementName=mainWindow, Path=DataContext.IoSubViewModel.MouseDownCommand}"
+                                            MouseMoveCommand="{Binding ElementName=mainWindow, Path=DataContext.IoSubViewModel.MouseMoveCommand}"
+                                            MouseUpCommand="{Binding ElementName=mainWindow, Path=DataContext.IoSubViewModel.MouseUpCommand}"
+                                            MiddleMouseClickedCommand="{Binding IoSubViewModel.PreviewMouseMiddleButtonCommand, Source={viewModels:MainVM}}"
+                                            Cursor="{Binding ToolsSubViewModel.ToolCursor, Source={viewModels:MainVM}}"
+                                            GridLinesVisible="{Binding ViewportSubViewModel.GridLinesEnabled, Source={viewModels:MainVM}}"
+                                            ZoomMode="{Binding ToolsSubViewModel.ActiveTool, Source={viewModels:MainVM}, Converter={converters:ActiveToolToZoomModeConverter}}"
+                                            ZoomOutOnClick="{Binding ToolsSubViewModel.ZoomTool.ZoomOutOnClick, Source={viewModels:MainVM}}"
+                                            UseTouchGestures="{Binding StylusSubViewModel.UseTouchGestures, Source={viewModels:MainVM}}"
+                                            FlipX="{Binding FlipX, Mode=TwoWay}"
+                                            FlipY="{Binding FlipY, Mode=TwoWay}"
+                                            ContextRequested="Viewport_OnContextMenuOpening"
+                                            Document="{Binding Document}">
+                                            <userControls:Viewport.ContextMenu>
+                                                <ContextMenu DataContext="{Binding PlacementTarget.Document, RelativeSource={RelativeSource Self}}">
+                                                    <ContextMenu.Template>
+                                                        <ControlTemplate>
+                                                            <Border Background="{DynamicResource ThemeAccentBrush}" BorderBrush="Black" BorderThickness="1" CornerRadius="5">
+                                                                <Grid Height="235">
+                                                                    <Grid.ColumnDefinitions>
+                                                                        <ColumnDefinition Width="{Binding Palette, Converter={converters:PaletteItemsToWidthConverter}}"/>
+                                                                        <ColumnDefinition />
+                                                                    </Grid.ColumnDefinitions>
+                                                                    <Border Grid.Column="1" BorderThickness="0 0 1 0" BorderBrush="Black">
+                                                                        <StackPanel Orientation="Vertical" Grid.Column="0">
+                                                                            <MenuItem
+																		ui:Translator.Key="SELECT_ALL"
+																		xaml:Menu.Command="PixiEditor.Selection.SelectAll" />
+                                                                            <MenuItem
+                                                                                ui:Translator.Key="DESELECT"
+                                                                                xaml:Menu.Command="PixiEditor.Selection.Clear" />
+                                                                            <Separator />
+                                                                            <MenuItem
+                                                                                ui:Translator.Key="CUT"
+                                                                                xaml:Menu.Command="PixiEditor.Clipboard.Cut" />
+                                                                            <MenuItem
+                                                                                ui:Translator.Key="COPY"
+                                                                                xaml:Menu.Command="PixiEditor.Clipboard.Copy" />
+                                                                            <MenuItem
+                                                                                ui:Translator.Key="PASTE"
+                                                                                xaml:Menu.Command="PixiEditor.Clipboard.Paste" />
+                                                                            <Separator />
+                                                                            <MenuItem ui:Translator.Key="FLIP_LAYERS_HORIZONTALLY" xaml:Menu.Command="PixiEditor.Document.FlipLayersHorizontal"/>
+                                                                            <MenuItem ui:Translator.Key="FLIP_LAYERS_VERTICALLY" xaml:Menu.Command="PixiEditor.Document.FlipLayersVertical"/>
+                                                                            <Separator />
+                                                                            <MenuItem ui:Translator.Key="ROT_LAYERS_90_D" xaml:Menu.Command="PixiEditor.Document.Rotate90DegLayers"/>
+                                                                            <MenuItem ui:Translator.Key="ROT_LAYERS_180_D" xaml:Menu.Command="PixiEditor.Document.Rotate180DegLayers"/>
+                                                                            <MenuItem ui:Translator.Key="ROT_LAYERS_-90_D" xaml:Menu.Command="PixiEditor.Document.Rotate270DegLayers"/>
+                                                                        </StackPanel>
+                                                                    </Border>
+                                                                    <ScrollViewer Margin="5" Grid.Column="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+                                                                        <ItemsControl ItemsSource="{Binding Palette}">
+                                                                            <ItemsControl.ItemsPanel>
+                                                                                <ItemsPanelTemplate>
+                                                                                    <WrapPanel Orientation="Horizontal"
+                                  HorizontalAlignment="Left" VerticalAlignment="Top"/>
+                                                                                </ItemsPanelTemplate>
+                                                                            </ItemsControl.ItemsPanel>
+                                                                            <ItemsControl.ItemTemplate>
+                                                                                <DataTemplate>
+                                                                                    <palettes:PaletteColorControl Cursor="Hand" CornerRadius="0"
+                                                                                        ui:Translator.TooltipKey="CLICK_SELECT_PRIMARY"
+                                                                                        Width="22" Height="22" Color="{Binding}">
+                                                                                        <Interaction.Behaviors>
+                                                                                            <EventTriggerBehavior EventName="MouseLeftButtonUp">
+                                                                                                <InvokeCommandAction
+                                                                                                    Command="{xaml:Command PixiEditor.Colors.SelectColor, UseProvided=True}"
+                                                                                                    CommandParameter="{Binding}" />
+                                                                                            </EventTriggerBehavior>
+                                                                                            <EventTriggerBehavior EventName="MouseLeftButtonUp">
+                                                                                                <InvokeCommandAction
+                                                                                                    Command="{xaml:Command PixiEditor.CloseContextMenu, UseProvided=True}"
+                                                                                                    CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,
+                                                                                                     AncestorType={x:Type ContextMenu}}}" />
+                                                                                            </EventTriggerBehavior>
+                                                                                        </Interaction.Behaviors>
+                                                                                    </palettes:PaletteColorControl>
+                                                                                </DataTemplate>
+                                                                            </ItemsControl.ItemTemplate>
+                                                                        </ItemsControl>
+                                                                    </ScrollViewer>
+                                                                </Grid>
+                                                            </Border>
+                                                        </ControlTemplate>
+                                                    </ContextMenu.Template>
+                                                </ContextMenu>
+                                            </userControls:Viewport.ContextMenu>
+                                        </userControls:Viewport>
+</UserControl>

src/PixiEditor.Avalonia/PixiEditor.AvaloniaUI/Views/Dock/DocumentTemplate.axaml.cs

@@ -0,0 +1,41 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using PixiEditor.AvaloniaUI.Models.Preferences;
+using PixiEditor.AvaloniaUI.ViewModels;
+using PixiEditor.AvaloniaUI.ViewModels.Tools.Tools;
+
+namespace PixiEditor.AvaloniaUI.Views.Dock;
+
+public partial class DocumentTemplate : UserControl
+{
+    public DocumentTemplate()
+    {
+        InitializeComponent();
+    }
+
+    private void Viewport_OnContextMenuOpening(object? sender, ContextRequestedEventArgs e)
+    {
+        ViewModelMain vm = (ViewModelMain)DataContext;
+        var tools = vm.ToolsSubViewModel;
+
+        var superSpecialBrightnessTool = tools.RightClickMode == RightClickMode.SecondaryColor && tools.ActiveTool is BrightnessToolViewModel;
+        var superSpecialColorPicker = tools.RightClickMode == RightClickMode.Erase && tools.ActiveTool is ColorPickerToolViewModel;
+
+        if (superSpecialBrightnessTool || superSpecialColorPicker)
+        {
+            e.Handled = true;
+            return;
+        }
+
+        var useContextMenu = vm.ToolsSubViewModel.RightClickMode == RightClickMode.ContextMenu;
+        var usesErase = tools.RightClickMode == RightClickMode.Erase && tools.ActiveTool.IsErasable;
+        var usesSecondaryColor = tools.RightClickMode == RightClickMode.SecondaryColor && tools.ActiveTool.UsesColor;
+
+        if (!useContextMenu && (usesErase || usesSecondaryColor))
+        {
+            e.Handled = true;
+        }
+    }
+}
+

src/PixiEditor.Avalonia/PixiEditor.AvaloniaUI/Views/MainView.axaml.cs

@@ -11,28 +11,4 @@ public partial class MainView : UserControl
     {
         InitializeComponent();
     }
-
-    private void Viewport_OnContextMenuOpening(object? sender, ContextRequestedEventArgs e)
-    {
-        ViewModelMain vm = (ViewModelMain)DataContext;
-        var tools = vm.ToolsSubViewModel;
-
-        var superSpecialBrightnessTool = tools.RightClickMode == RightClickMode.SecondaryColor && tools.ActiveTool is BrightnessToolViewModel;
-        var superSpecialColorPicker = tools.RightClickMode == RightClickMode.Erase && tools.ActiveTool is ColorPickerToolViewModel;
-
-        if (superSpecialBrightnessTool || superSpecialColorPicker)
-        {
-            e.Handled = true;
-            return;
-        }
-
-        var useContextMenu = vm.ToolsSubViewModel.RightClickMode == RightClickMode.ContextMenu;
-        var usesErase = tools.RightClickMode == RightClickMode.Erase && tools.ActiveTool.IsErasable;
-        var usesSecondaryColor = tools.RightClickMode == RightClickMode.SecondaryColor && tools.ActiveTool.UsesColor;
-
-        if (!useContextMenu && (usesErase || usesSecondaryColor))
-        {
-            e.Handled = true;
-        }
-    }
 }

src/PixiEditor.Avalonia/PixiEditor.AvaloniaUI/Views/Windows/HelloTherePopup.axaml

@@ -92,7 +92,7 @@
                 <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
                     <Button  Command="{Binding OpenFileCommand}" MinWidth="150" Margin="10"
                             ui:Translator.Key="OPEN_FILE"/>
-                    <Button  Command="{Binding OpenNewFileCommand}" MinWidth="150" Margin="10"
+                    <Button Command="{Binding OpenNewFileCommand}" MinWidth="150" Margin="10"
                             ui:Translator.Key="NEW_FILE"/>
                 </StackPanel>