From 7e488d29c209320228463770ba13ed83e41cbc7d Mon Sep 17 00:00:00 2001
From: rabbitism <dongbin@irihi.tech>
Date: Fri, 2 Feb 2024 00:41:09 +0800
Subject: [PATCH] feat: add CloseOnMaskToClose

---
 demo/Ursa.Demo/Pages/DialogDemo.axaml         | 67 ++++++++++++++-----
 .../ViewModels/DialogDemoViewModel.cs         | 15 ++++-
 src/Ursa/Controls/Dialog/DialogControl.cs     | 12 ++++
 src/Ursa/Controls/Dialog/OverlayDialogHost.cs | 37 +++++++---
 4 files changed, 102 insertions(+), 29 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/DialogDemo.axaml b/demo/Ursa.Demo/Pages/DialogDemo.axaml
index 424de63..ef511f6 100644
--- a/demo/Ursa.Demo/Pages/DialogDemo.axaml
+++ b/demo/Ursa.Demo/Pages/DialogDemo.axaml
@@ -23,58 +23,89 @@
                         OnContent="Window" />
                     <ToggleSwitch
                         Content="Global/Local"
-                        IsVisible="{Binding !#overlay.IsChecked}"
                         IsChecked="{Binding IsGlobal}"
+                        IsVisible="{Binding !#overlay.IsChecked}"
                         OffContent="Local"
                         OnContent="Global" />
                     <ToggleSwitch
                         Content="Modal/Regular"
-                        IsVisible="{Binding !#overlay.IsChecked}"
                         IsChecked="{Binding IsModal}"
+                        IsVisible="{Binding !#overlay.IsChecked}"
                         OffContent="Regular"
                         OnContent="Modal" />
+                    <ToggleSwitch
+                        Content="ClickOnMaskToClose"
+                        IsChecked="{Binding CanCloseMaskToClose}"
+                        OffContent="No"
+                        OnContent="Yes" />
                     <StackPanel Orientation="Horizontal">
                         <TextBlock Text="Buttons" />
                         <ComboBox ItemsSource="{Binding Buttons}" SelectedItem="{Binding SelectedButton}" />
                     </StackPanel>
                     <StackPanel Orientation="Horizontal">
                         <TextBlock Text="Mode" />
-                        <ComboBox ItemsSource="{Binding Modes}" SelectedItem="{Binding SelectedMode}"/>
+                        <ComboBox ItemsSource="{Binding Modes}" SelectedItem="{Binding SelectedMode}" />
                     </StackPanel>
-                    <Button Content="Show Dialog" Command="{Binding ShowDialogCommand}" />
+                    <Button Command="{Binding ShowDialogCommand}" Content="Show Dialog" />
                     <TextBlock>
-                        <Run Text="Default Result: "></Run>
-                        <Run Text="{Binding DefaultResult}"/>
+                        <Run Text="Default Result: " />
+                        <Run Text="{Binding DefaultResult}" />
                     </TextBlock>
                     <TextBlock>
-                        <Run Text="Dialog Date: "></Run>
-                        <Run Text="{Binding Date}"/>
+                        <Run Text="Dialog Date: " />
+                        <Run Text="{Binding Date}" />
                     </TextBlock>
                 </StackPanel>
             </TabItem>
             <TabItem Header="Custom">
                 <StackPanel>
-                    <ToggleSwitch Content="Window/Overlay" OffContent="Overlay" OnContent="Window" IsChecked="{Binding IsWindow}" Name="overlay2" />
-                    <ToggleSwitch Content="Global/Local" IsVisible="{Binding !#overlay2.IsChecked}" OffContent="Local" OnContent="Global" IsChecked="{Binding IsGlobal}" />
-                    <ToggleSwitch Content="Modal/Regular" OffContent="Regular" OnContent="Modal" IsChecked="{Binding IsModal}" />
-                    <Button Content="Show Dialog" Command="{Binding ShowCustomDialogCommand}" />
+                    <ToggleSwitch
+                        Name="overlay2"
+                        Content="Window/Overlay"
+                        IsChecked="{Binding IsWindow}"
+                        OffContent="Overlay"
+                        OnContent="Window" />
+                    <ToggleSwitch
+                        Content="Global/Local"
+                        IsChecked="{Binding IsGlobal}"
+                        IsVisible="{Binding !#overlay2.IsChecked}"
+                        OffContent="Local"
+                        OnContent="Global" />
+                    <ToggleSwitch
+                        Content="Modal/Regular"
+                        IsChecked="{Binding IsModal}"
+                        OffContent="Regular"
+                        OnContent="Modal" />
+                    <ToggleSwitch
+                        Content="ClickOnMaskToClose"
+                        IsChecked="{Binding CanCloseMaskToClose}"
+                        OffContent="No"
+                        OnContent="Yes" />
+                    <Button Command="{Binding ShowCustomDialogCommand}" Content="Show Dialog" />
                     <TextBlock>
-                        <Run Text="Custom Result: "></Run>
-                        <Run Text="{Binding Result}"/>
+                        <Run Text="Custom Result: " />
+                        <Run Text="{Binding Result}" />
                     </TextBlock>
                     <TextBlock>
-                        <Run Text="Dialog Date: "></Run>
-                        <Run Text="{Binding Date}"/>
+                        <Run Text="Dialog Date: " />
+                        <Run Text="{Binding Date}" />
                     </TextBlock>
                 </StackPanel>
             </TabItem>
         </TabControl>
         <Grid Grid.Column="1">
-            <Border ClipToBounds="True" CornerRadius="20" BorderThickness="1" BorderBrush="{DynamicResource SemiGrey1}">
+            <Border
+                BorderBrush="{DynamicResource SemiGrey1}"
+                BorderThickness="1"
+                ClipToBounds="True"
+                CornerRadius="20">
                 <u:OverlayDialogHost HostId="LocalHost">
                     <u:OverlayDialogHost.DialogDataTemplates>
                         <DataTemplate DataType="x:String">
-                            <TextBlock Text="{Binding Path=.}" Foreground="Red" Margin="24 24 48 24"></TextBlock>
+                            <TextBlock
+                                Margin="24,24,48,24"
+                                Foreground="Red"
+                                Text="{Binding Path=.}" />
                         </DataTemplate>
                     </u:OverlayDialogHost.DialogDataTemplates>
                 </u:OverlayDialogHost>
diff --git a/demo/Ursa.Demo/ViewModels/DialogDemoViewModel.cs b/demo/Ursa.Demo/ViewModels/DialogDemoViewModel.cs
index 2b7ec92..e26fb45 100644
--- a/demo/Ursa.Demo/ViewModels/DialogDemoViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/DialogDemoViewModel.cs
@@ -54,6 +54,13 @@ public class DialogDemoViewModel: ObservableObject
         get => _isModal;
         set => SetProperty(ref _isModal, value);
     }
+    
+    private bool _canCloseMaskToClose;
+    public bool CanCloseMaskToClose
+    {
+        get => _canCloseMaskToClose;
+        set => SetProperty(ref _canCloseMaskToClose, value);
+    }
 
     private DialogResult? _defaultResult;
     public DialogResult? DefaultResult
@@ -110,7 +117,8 @@ public class DialogDemoViewModel: ObservableObject
                     {
                         Title = "Please select a date",
                         Mode = SelectedMode,
-                        Buttons = SelectedButton
+                        Buttons = SelectedButton,
+                        CanClickOnMaskToClose = CanCloseMaskToClose,
                     }
                 );
                 Date = vm.Date;
@@ -155,7 +163,10 @@ public class DialogDemoViewModel: ObservableObject
             if (IsModal)
             {
                 Result = await OverlayDialog.ShowCustomModal<DialogWithAction, DialogWithActionViewModel, bool>(
-                    vm, IsGlobal ? null : "LocalHost");
+                    vm, IsGlobal ? null : "LocalHost", options: new OverlayDialogOptions()
+                    {
+                        CanClickOnMaskToClose = CanCloseMaskToClose,
+                    });
                 Date = vm.Date;
             }
             else
diff --git a/src/Ursa/Controls/Dialog/DialogControl.cs b/src/Ursa/Controls/Dialog/DialogControl.cs
index 4186580..4be0f03 100644
--- a/src/Ursa/Controls/Dialog/DialogControl.cs
+++ b/src/Ursa/Controls/Dialog/DialogControl.cs
@@ -135,4 +135,16 @@ public class DialogControl: ContentControl
     {
         PseudoClasses.Set(PC_Modal, modal);
     }
+
+    public void Close()
+    {
+        if (this.DataContext is IDialogContext context)
+        {
+            context.Close();
+        }
+        else
+        {
+            DialogControlClosing?.Invoke(this, DialogResult.None);
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/Ursa/Controls/Dialog/OverlayDialogHost.cs b/src/Ursa/Controls/Dialog/OverlayDialogHost.cs
index 9c3e2c5..c376883 100644
--- a/src/Ursa/Controls/Dialog/OverlayDialogHost.cs
+++ b/src/Ursa/Controls/Dialog/OverlayDialogHost.cs
@@ -32,15 +32,34 @@ public class OverlayDialogHost : Canvas
         set => SetValue(OverlayMaskBrushProperty, value);
     }
 
-    private Border CreateOverlayMask() => new()
+    private Border CreateOverlayMask(bool canCloseOnClick)
     {
-        HorizontalAlignment = HorizontalAlignment.Stretch,
-        VerticalAlignment = VerticalAlignment.Stretch,
-        Width = this.Bounds.Width,
-        Height = this.Bounds.Height,
-        [!BackgroundProperty] = this[!OverlayMaskBrushProperty],
-        IsVisible = true,
-    };
+        Border border = new()
+        {
+            HorizontalAlignment = HorizontalAlignment.Stretch,
+            VerticalAlignment = VerticalAlignment.Stretch,
+            Width = this.Bounds.Width,
+            Height = this.Bounds.Height,
+            [!BackgroundProperty] = this[!OverlayMaskBrushProperty],
+            IsVisible = true,
+        };
+        if (canCloseOnClick)
+        {
+            border.AddHandler(PointerReleasedEvent, ClickBorderToCloseDialog);
+        }
+        return border;
+    }
+
+    private void ClickBorderToCloseDialog(object sender, PointerReleasedEventArgs e)
+    {
+        if (sender is Border border)
+        {
+            int i = _masks.IndexOf(border);
+            DialogControl dialog = _modalDialogs[i];
+            dialog.Close();
+            border.RemoveHandler(PointerReleasedEvent, ClickBorderToCloseDialog);
+        }
+    }
 
     protected sealed override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
     {
@@ -138,7 +157,7 @@ public class OverlayDialogHost : Canvas
     /// <param name="control"></param>
     internal void AddModalDialog(DialogControl control)
     {
-        var mask = CreateOverlayMask();
+        var mask = CreateOverlayMask(control.CanClickOnMaskToClose);
         _masks.Add(mask);
         _modalDialogs.Add(control);
         control.SetAsModal(true);