Skip to content

Commit

Permalink
[NUI] Support Shadow and ColorVisual cutout policy
Browse files Browse the repository at this point in the history 
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 <[email protected]>
  • Loading branch information
@hinohie
Eunki, Hong authored and hinohie committed Jul 25, 2024
1 parent a1db665 commit cee50f0
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 12 deletions.
38 changes: 34 additions & 4 deletions src/Tizen.NUI/src/public/ViewProperty/Shadow.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ public class Shadow : ShadowBase, ICloneable
public Shadow() : base()
{
BlurRadius = 0;
CutoutPolicy = ColorVisualCutoutPolicyType.None;
Color = defaultColor;
}

Expand All @@ -50,9 +51,23 @@ public Shadow() : base()
/// <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);
}

Expand All @@ -61,7 +76,7 @@ public Shadow(float blurRadius, Color color, Vector2 offset = null, Vector2 exte
/// </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)
{
}

Expand Down Expand Up @@ -93,12 +108,24 @@ internal Shadow(PropertyMap propertyMap) : base(propertyMap)
/// <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)
Expand Down Expand Up @@ -127,6 +154,7 @@ public override int GetHashCode()
int hash = base.GetHashCode();
hash = (hash * 7) + (Color == null ? 0 : Color.GetHashCode());
hash = (hash * 7) + (BlurRadius.GetHashCode());
hash = (hash * 7) + (CutoutPolicy.GetHashCode());
return hash;
}
}
Expand All @@ -152,6 +180,8 @@ protected override PropertyMap GetPropertyMap()

map[ColorVisualProperty.BlurRadius] = new PropertyValue(BlurRadius < 0 ? 0 : BlurRadius);

map[ColorVisualProperty.CutoutPolicy] = new PropertyValue((int)CutoutPolicy);

return map;
}
}
Expand Down
39 changes: 38 additions & 1 deletion src/Tizen.NUI/src/public/Visuals/VisualConstants.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -663,16 +663,24 @@ public struct ColorVisualProperty
/// </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>
Expand Down Expand Up @@ -1370,4 +1378,33 @@ public enum ColorBlendingMode
/// </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,
};
}
19 changes: 19 additions & 0 deletions src/Tizen.NUI/src/public/Visuals/VisualObject/ColorVisual.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,25 @@ public float BlurRadius
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
Expand Down
11 changes: 11 additions & 0 deletions test/NUITizenGallery/Examples/ShadowFrameTest/ShadowFrameTest1Page.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -327,6 +327,17 @@
<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>
Expand Down
34 changes: 27 additions & 7 deletions test/NUITizenGallery/Examples/ShadowFrameTest/ShadowFrameTest1Page.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -26,6 +30,7 @@ public ShadowFrameTest1Page()
{
InitializeComponent();
shadowToggleShow = true;
shadowCutoutPolicy = ColorVisualCutoutPolicyType.None;

// CornerRadius
CornerTopLeft.ValueChanged += (o, e) =>
Expand Down Expand Up @@ -130,6 +135,21 @@ public ShadowFrameTest1Page()
}
}
};
// 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) =>
{
Expand All @@ -141,7 +161,7 @@ public ShadowFrameTest1Page()
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) =>
{
Expand All @@ -153,7 +173,7 @@ public ShadowFrameTest1Page()
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
Expand All @@ -167,7 +187,7 @@ public ShadowFrameTest1Page()
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) =>
{
Expand All @@ -179,7 +199,7 @@ public ShadowFrameTest1Page()
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) =>
{
Expand All @@ -191,7 +211,7 @@ public ShadowFrameTest1Page()
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) =>
{
Expand All @@ -203,7 +223,7 @@ public ShadowFrameTest1Page()
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) =>
Expand All @@ -216,7 +236,7 @@ public ShadowFrameTest1Page()
return;
}
float currentRadius = ShadowBlurRadius.CurrentValue;
target.BoxShadow = new Shadow(currentRadius, currentShadow.Color, currentShadow.Offset);
target.BoxShadow = new Shadow(currentRadius, shadowCutoutPolicy, currentShadow.Color, currentShadow.Offset);
};
}
}
Expand Down

0 comments on commit cee50f0

Please sign in to comment.