[NUI] Support Shadow and ColorVisual cutout policy
authorEunki, Hong <eunkiki.hong@samsung.com>
Thu, 11 Jul 2024 04:39:10 +0000 (13:39 +0900)
committerdongsug-song <35130733+dongsug-song@users.noreply.github.com>
Wed, 31 Jul 2024 01:55:57 +0000 (10:55 +0900)
Let we support to BoxShadow and ColorVisual, to ignore rendering inside of
View area.

None is default, same as previous logics.
CutoutView is cutout render area as bounding box of view. It is faster than CutoutViewWithCornerRadius.
CutoutWithCornerRadius is cutout render area consider the corner radius of view.

Required dali patch :
https://review.tizen.org/gerrit/c/platform/core/uifw/dali-toolkit/+/314255

Signed-off-by: Eunki, Hong <eunkiki.hong@samsung.com>
src/Tizen.NUI/src/public/ViewProperty/Shadow.cs
src/Tizen.NUI/src/public/Visuals/VisualConstants.cs
src/Tizen.NUI/src/public/Visuals/VisualObject/ColorVisual.cs
test/NUITizenGallery/Examples/ShadowFrameTest/ShadowFrameTest1Page.xaml
test/NUITizenGallery/Examples/ShadowFrameTest/ShadowFrameTest1Page.xaml.cs

index eecbd12df3b435d7898bd66d96e3fc5807292c30..d6401bfb6ed92c233d956ecdb8224d1e6d7dd158 100755 (executable)
@@ -39,6 +39,7 @@ namespace Tizen.NUI
         public Shadow() : base()
         {
             BlurRadius = 0;
+            CutoutPolicy = ColorVisualCutoutPolicyType.None;
             Color = defaultColor;
         }
 
@@ -50,9 +51,23 @@ namespace Tizen.NUI
         /// <param name="offset">Optional. The position offset value (x, y) from the top left corner. See <see cref="ShadowBase.Offset"/>.</param>
         /// <param name="extents">Optional. The shadow will extend its size by specified amount of length. See <see cref="ShadowBase.Extents"/>.</param>
         /// <since_tizen> 9 </since_tizen>
-        public Shadow(float blurRadius, Color color, Vector2 offset = null, Vector2 extents = null) : base(offset, extents)
+        public Shadow(float blurRadius, Color color, Vector2 offset = null, Vector2 extents = null) : this(blurRadius, ColorVisualCutoutPolicyType.None, color, offset, extents)
+        {
+        }
+
+        /// <summary>
+        /// Create a Shadow with custom values.
+        /// </summary>
+        /// <param name="blurRadius">The blur radius value for the shadow. Bigger value, much blurry.</param>
+        /// <param name="cutoutPolicy">The policy of the shadow cutout.</param>
+        /// <param name="color">The color for the shadow.</param>
+        /// <param name="offset">Optional. The position offset value (x, y) from the top left corner. See <see cref="ShadowBase.Offset"/>.</param>
+        /// <param name="extents">Optional. The shadow will extend its size by specified amount of length. See <see cref="ShadowBase.Extents"/>.</param>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public Shadow(float blurRadius, ColorVisualCutoutPolicyType cutoutPolicy, Color color, Vector2 offset = null, Vector2 extents = null) : base(offset, extents)
         {
             BlurRadius = blurRadius;
+            CutoutPolicy = cutoutPolicy;
             Color = color == null ? new Color(defaultColor) : new Color(color);
         }
 
@@ -61,7 +76,7 @@ namespace Tizen.NUI
         /// </summary>
         /// <exception cref="ArgumentNullException"> Thrown when other is null. </exception>
         [EditorBrowsable(EditorBrowsableState.Never)]
-        public Shadow(Shadow other) : this(other == null ? throw new ArgumentNullException(nameof(other)) : other.BlurRadius, other.Color, other.Offset, other.Extents)
+        public Shadow(Shadow other) : this(other == null ? throw new ArgumentNullException(nameof(other)) : other.BlurRadius, other.CutoutPolicy, other.Color, other.Offset, other.Extents)
         {
         }
 
@@ -93,12 +108,24 @@ namespace Tizen.NUI
         /// <summary>
         /// The blur radius value for the shadow. Bigger value, much blurry.
         /// </summary>
-        /// <remark>
+        /// <remarks>
         /// Negative value is ignored. (no blur)
-        /// </remark>
+        /// </remarks>
         /// <since_tizen> 9 </since_tizen>
         public float BlurRadius { get; internal set; }
 
+        /// <summary>
+        /// The Cutout policy for this shadow.
+        /// </summary>
+        /// <remarks>
+        /// ColorVisualCutoutPolicyType.None = Fully render the shadow color (Default)<br/>
+        /// ColorVisualCutoutPolicyType.CutoutView = Do not render inside bounding box of view<br/>
+        /// ColorVisualCutoutPolicyType.CutoutViewWithCornerRadius = Do not render inside view, consider corner radius value<br/>
+        /// We don't support this property for xaml yet.
+        /// </remarks>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public ColorVisualCutoutPolicyType CutoutPolicy { get; internal set;}
+
         /// <inheritdoc/>
         [EditorBrowsable(EditorBrowsableState.Never)]
         public override bool Equals(object other)
@@ -127,6 +154,7 @@ namespace Tizen.NUI
                 int hash = base.GetHashCode();
                 hash = (hash * 7) + (Color == null ? 0 : Color.GetHashCode());
                 hash = (hash * 7) + (BlurRadius.GetHashCode());
+                hash = (hash * 7) + (CutoutPolicy.GetHashCode());
                 return hash;
             }
         }
@@ -152,6 +180,8 @@ namespace Tizen.NUI
 
             map[ColorVisualProperty.BlurRadius] = new PropertyValue(BlurRadius < 0 ? 0 : BlurRadius);
 
+            map[ColorVisualProperty.CutoutPolicy] = new PropertyValue((int)CutoutPolicy);
+
             return map;
         }
     }
index e80aa64f4d6ed5756aa497e337cfa1436f6ec01b..c72f453283b41a0fb132fa4920d128625704faaf 100755 (executable)
@@ -663,16 +663,24 @@ namespace Tizen.NUI
         /// </summary>
         /// <since_tizen> 3 </since_tizen>
         public static readonly int MixColor = NDalic.ColorVisualMixColor;
+
         /// <summary>
         /// Whether to render if the MixColor is transparent.
         /// </summary>
         /// <since_tizen> 5 </since_tizen>
         public static readonly int RenderIfTransparent = NDalic.ColorVisualMixColor + 1;
+
         /// <summary>
-        /// Then radius value for the area to blur.
+        /// The radius value for the area to blur.
         /// </summary>
         [EditorBrowsable(EditorBrowsableState.Never)]
         public static readonly int BlurRadius = NDalic.ColorVisualMixColor + 2;
+
+        /// <summary>
+        /// The policy value for the cutout of the visual.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public static readonly int CutoutPolicy = NDalic.ColorVisualMixColor + 3;
     }
 
     /// <summary>
@@ -1370,4 +1378,33 @@ namespace Tizen.NUI
         /// </summary>
         Multiply
     };
+
+    /// <summary>
+    /// Defines how a colorvisual cutout
+    /// </summary>
+    /// This will be public opened after ACR done. Before ACR, need to be hidden as inhouse API.
+    [EditorBrowsable(EditorBrowsableState.Never)]
+    public enum ColorVisualCutoutPolicyType
+    {
+        /// <summary>
+        /// No cutout. (default)
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        None,
+        /// <summary>
+        /// Cutout as bounding box of view
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        CutoutView,
+        /// <summary>
+        /// Cutout as bounding box of view, include corner radius.
+        /// </summary>
+        /// <remarks>
+        /// The CornerRadius and CornerRadiusPolicy will be used color visual itself's value.
+        /// If you are using this policy at Tizen.NUI.Visuals.ColorVisual, please be careful that CornerRadius value
+        /// is not same as View.CornerRadius.
+        /// </remarks>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        CutoutViewWithCornerRadius,
+    };
 }
index 9d6d8d7c12a0bef51bd33bd990c63b31b5a85fd4..a3b0af8cca84154b5c2a6b82e3c3928ce275206b 100644 (file)
@@ -68,6 +68,25 @@ namespace Tizen.NUI.Visuals
                 return ret;
             }
         }
+
+        /// <summary>
+        /// Cutout policy of color visual
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public ColorVisualCutoutPolicyType CutoutPolicy
+        {
+            set
+            {
+                UpdateVisualProperty((int)Tizen.NUI.ColorVisualProperty.CutoutPolicy, new PropertyValue((int)value));
+            }
+            get
+            {
+                int ret = (int)ColorVisualCutoutPolicyType.None;
+                var propertyValue = GetCachedVisualProperty((int)Tizen.NUI.ColorVisualProperty.CutoutPolicy);
+                propertyValue?.Get(out ret);
+                return (ColorVisualCutoutPolicyType)ret;
+            }
+        }
         #endregion
 
         #region Decorated Visual Properties
index 43190c4aae506179d9c9c5bf58d83be098514f03..a12e5abe4c8a29bff28a6b8c3c2d914c2c39ca37 100644 (file)
                                 <CheckBox x:Name="ShadowToggleButton"
                                   IsSelected="True"
                                 />
+
+                                <TextLabel
+                                  x:Name="ShadowCutoutButtonT"
+                                  PixelSize="20"
+                                  HorizontalAlignment="Begin"
+                                  VerticalAlignment="Center"
+                                  Text="Toggle Cutout View:"
+                                />
+                                <CheckBox x:Name="ShadowCutoutButton"
+                                  IsSelected="False"
+                                />
                             </View>
                         </View>
                     </View>
index 3224153d47f0e080b4f007520cee4d531c2f9ecb..b04d44a7c96a86bdb1ba4374b070d640f6d61849 100644 (file)
@@ -7,11 +7,15 @@ namespace NUITizenGallery
     public partial class ShadowFrameTest1Page : ContentPage
     {
         private bool shadowToggleShow; // true if we show shadow
+
+        private ColorVisualCutoutPolicyType shadowCutoutPolicy; // The policy of cutout shadow as view
+
         private Shadow CreateShadowFromeSliders()
         {
             return new Shadow
             (
                 ShadowBlurRadius.CurrentValue,
+                shadowCutoutPolicy,
                 new Color(
                     ShadowColorRed.CurrentValue / 255.0f,
                     ShadowColorGreen.CurrentValue / 255.0f,
@@ -26,6 +30,7 @@ namespace NUITizenGallery
         {
             InitializeComponent();
             shadowToggleShow = true;
+            shadowCutoutPolicy = ColorVisualCutoutPolicyType.None;
 
             // CornerRadius
             CornerTopLeft.ValueChanged += (o, e) =>
@@ -130,6 +135,21 @@ namespace NUITizenGallery
                     }
                 }
             };
+            // Shadow Cutout Toggle
+            ShadowCutoutButton.Clicked += (o, e) =>
+            {
+                if(ShadowCutoutButton.IsSelected)
+                {
+                    shadowCutoutPolicy = ColorVisualCutoutPolicyType.CutoutViewWithCornerRadius;
+                }
+                else
+                {
+                    shadowCutoutPolicy = ColorVisualCutoutPolicyType.None;
+                }
+
+                target.BoxShadow = CreateShadowFromeSliders();
+            };
+
             // Shadow Offset
             ShadowOffsetX.ValueChanged += (o, e) =>
             {
@@ -141,7 +161,7 @@ namespace NUITizenGallery
                     return;
                 }
                 Vector2 currentOffset = currentShadow.Offset;
-                target.BoxShadow = new Shadow(currentShadow.BlurRadius, currentShadow.Color, new Vector2(ShadowOffsetX.CurrentValue, currentOffset.Y));
+                target.BoxShadow = new Shadow(currentShadow.BlurRadius, shadowCutoutPolicy, currentShadow.Color, new Vector2(ShadowOffsetX.CurrentValue, currentOffset.Y));
             };
             ShadowOffsetY.ValueChanged += (o, e) =>
             {
@@ -153,7 +173,7 @@ namespace NUITizenGallery
                     return;
                 }
                 Vector2 currentOffset = currentShadow.Offset;
-                target.BoxShadow = new Shadow(currentShadow.BlurRadius, currentShadow.Color, new Vector2(currentOffset.X, ShadowOffsetY.CurrentValue));
+                target.BoxShadow = new Shadow(currentShadow.BlurRadius, shadowCutoutPolicy, currentShadow.Color, new Vector2(currentOffset.X, ShadowOffsetY.CurrentValue));
             };
 
             // Shadow Color
@@ -167,7 +187,7 @@ namespace NUITizenGallery
                     return;
                 }
                 Color currentColor = currentShadow.Color;
-                target.BoxShadow = new Shadow(currentShadow.BlurRadius, new Color(ShadowColorRed.CurrentValue / 255.0f, currentColor.G, currentColor.B, currentColor.A), currentShadow.Offset);
+                target.BoxShadow = new Shadow(currentShadow.BlurRadius, shadowCutoutPolicy, new Color(ShadowColorRed.CurrentValue / 255.0f, currentColor.G, currentColor.B, currentColor.A), currentShadow.Offset);
             };
             ShadowColorGreen.ValueChanged += (o, e) =>
             {
@@ -179,7 +199,7 @@ namespace NUITizenGallery
                     return;
                 }
                 Color currentColor = currentShadow.Color;
-                target.BoxShadow = new Shadow(currentShadow.BlurRadius, new Color(currentColor.R, ShadowColorGreen.CurrentValue / 255.0f, currentColor.B, currentColor.A), currentShadow.Offset);
+                target.BoxShadow = new Shadow(currentShadow.BlurRadius, shadowCutoutPolicy, new Color(currentColor.R, ShadowColorGreen.CurrentValue / 255.0f, currentColor.B, currentColor.A), currentShadow.Offset);
             };
             ShadowColorBlue.ValueChanged += (o, e) =>
             {
@@ -191,7 +211,7 @@ namespace NUITizenGallery
                     return;
                 }
                 Color currentColor = currentShadow.Color;
-                target.BoxShadow = new Shadow(currentShadow.BlurRadius, new Color(currentColor.R, currentColor.G, ShadowColorBlue.CurrentValue / 255.0f, currentColor.A), currentShadow.Offset);
+                target.BoxShadow = new Shadow(currentShadow.BlurRadius, shadowCutoutPolicy, new Color(currentColor.R, currentColor.G, ShadowColorBlue.CurrentValue / 255.0f, currentColor.A), currentShadow.Offset);
             };
             ShadowOpacity.ValueChanged += (o, e) =>
             {
@@ -203,7 +223,7 @@ namespace NUITizenGallery
                     return;
                 }
                 Color currentColor = currentShadow.Color;
-                target.BoxShadow = new Shadow(currentShadow.BlurRadius, new Color(currentColor.R, currentColor.G, currentColor.B, ShadowOpacity.CurrentValue / 255.0f), currentShadow.Offset);
+                target.BoxShadow = new Shadow(currentShadow.BlurRadius, shadowCutoutPolicy, new Color(currentColor.R, currentColor.G, currentColor.B, ShadowOpacity.CurrentValue / 255.0f), currentShadow.Offset);
             };
             // Shadow Radius
             ShadowBlurRadius.ValueChanged += (o, e) =>
@@ -216,7 +236,7 @@ namespace NUITizenGallery
                     return;
                 }
                 float currentRadius = ShadowBlurRadius.CurrentValue;
-                target.BoxShadow = new Shadow(currentRadius, currentShadow.Color, currentShadow.Offset);
+                target.BoxShadow = new Shadow(currentRadius, shadowCutoutPolicy, currentShadow.Color, currentShadow.Offset);
             };
         }
     }