Anti-alias the edges of masks and mattes for a smoother result. (#176)

* Anti-alias the edges of masks and mattes for a smoother result.

The default BorderMode for Visuals is Inherit, and if not specified the value Hard (i.e. not anti-aliased) is passed into the root.
The default worked for us previously because the desktop tree sets the BorderMode to Soft and we inherit it so we got Soft behavior everywhere.
However the trees created for masks and mattes are not rooted in the desktop, so they were getting set to Hard and some edges looked aliased.

This change adds the ability to set the BorderMode and sets it to Soft for the trees created for masks and mattes.

* Improve comments.

source/Lottie/Instantiator.cs

@@ -15,7 +15,6 @@ using Mgc = Microsoft.Graphics.Canvas;
 using Mgce = Microsoft.Graphics.Canvas.Effects;
 using Wc = Windows.UI.Composition;
 using Wd = Microsoft.Toolkit.Uwp.UI.Lottie.WinCompData;
-using Wge = Windows.Graphics.Effects;
 using Wm = Windows.UI.Xaml.Media;
 using Wmd = Microsoft.Toolkit.Uwp.UI.Lottie.WinUIXamlMediaData;
 
@@ -173,9 +172,9 @@ namespace Microsoft.Toolkit.Uwp.UI.Lottie
         {
             CacheAndInitializeCompositionObject(source, target);
 
-            if (source.Clip != null)
+            if (source.BorderMode.HasValue)
             {
-                target.Clip = GetCompositionClip(source.Clip);
+                target.BorderMode = BorderMode(source.BorderMode.Value);
             }
 
             if (source.CenterPoint.HasValue)
@@ -183,6 +182,11 @@ namespace Microsoft.Toolkit.Uwp.UI.Lottie
                 target.CenterPoint = source.CenterPoint.Value;
             }
 
+            if (source.Clip != null)
+            {
+                target.Clip = GetCompositionClip(source.Clip);
+            }
+
             if (source.Offset.HasValue)
             {
                 target.Offset = source.Offset.Value;
@@ -1394,6 +1398,17 @@ namespace Microsoft.Toolkit.Uwp.UI.Lottie
             return result;
         }
 
+        static Wc.CompositionBorderMode BorderMode(Wd.CompositionBorderMode value)
+        {
+            switch (value)
+            {
+                case Wd.CompositionBorderMode.Hard: return Wc.CompositionBorderMode.Hard;
+                case Wd.CompositionBorderMode.Inherit: return Wc.CompositionBorderMode.Inherit;
+                case Wd.CompositionBorderMode.Soft: return Wc.CompositionBorderMode.Soft;
+                default: throw new InvalidOperationException();
+            }
+        }
+
         static Wc.CompositionStrokeLineJoin StrokeLineJoin(Wd.CompositionStrokeLineJoin value)
         {
             switch (value)

source/LottieToWinComp/LottieToWinCompTranslator.cs

@@ -670,9 +670,21 @@ namespace Microsoft.Toolkit.Uwp.UI.Lottie.LottieToWinComp
             // the visual we want captured by the visual surface has a parent to use as the
             // origin of its offsets.
             var sourceIntermediateParent = _c.CreateContainerVisual();
+
+            // Because this is the root of a tree, the inherited BorderMode is Hard.
+            // We want it to be Soft in order to enable anti-aliasing.
+            // Note that the border mode for trees that are attached to the desktop do not
+            // need to have their BorderMode set as they inherit Soft from the desktop.
+            sourceIntermediateParent.BorderMode = CompositionBorderMode.Soft;
             sourceIntermediateParent.Children.Add(source);
 
             var destinationIntermediateParent = _c.CreateContainerVisual();
+
+            // Because this is the root of a tree, the inherited BorderMode is Hard.
+            // We want it to be Soft in order to enable anti-aliasing.
+            // Note that the border mode for trees that are attached to the desktop do not
+            // need to have their BorderMode set as they inherit Soft from the desktop.
+            destinationIntermediateParent.BorderMode = CompositionBorderMode.Soft;
             destinationIntermediateParent.Children.Add(destination);
 
             var sourceVisualSurface = _c.CreateVisualSurface();

source/UIData/CodeGen/InstantiatorGeneratorBase.cs

@@ -665,6 +665,8 @@ namespace Microsoft.Toolkit.Uwp.UI.Lottie.UIData.CodeGen
 
             string Vector3(Vector3 value) => _stringifier.Vector3(value);
 
+            string BorderMode(CompositionBorderMode value) => _stringifier.BorderMode(value);
+
             string ColorSpace(CompositionColorSpace value) => _stringifier.ColorSpace(value);
 
             string ExtendMode(CompositionGradientExtendMode value) => _stringifier.ExtendMode(value);
@@ -1264,6 +1266,11 @@ namespace Microsoft.Toolkit.Uwp.UI.Lottie.UIData.CodeGen
             {
                 InitializeCompositionObject(builder, obj, node);
 
+                if (obj.BorderMode.HasValue)
+                {
+                    builder.WriteLine($"result{Deref}BorderMode = {BorderMode(obj.BorderMode.Value)};");
+                }
+
                 if (obj.CenterPoint.HasValue)
                 {
                     builder.WriteLine($"result{Deref}CenterPoint = {Vector3(obj.CenterPoint.Value)};");

source/UIData/CodeGen/Optimizer.cs

@@ -173,11 +173,13 @@ namespace Microsoft.Toolkit.Uwp.UI.Lottie.UIData.CodeGen
             where T : Visual
         {
             CacheAndInitializeCompositionObject(source, target);
+
             if (source.Clip != null)
             {
                 target.Clip = GetCompositionClip(source.Clip);
             }
 
+            target.BorderMode = source.BorderMode;
             target.CenterPoint = source.CenterPoint;
             target.Offset = source.Offset;
             target.Opacity = source.Opacity;

source/UIData/CodeGen/Stringifier.cs

@@ -79,6 +79,18 @@ namespace Microsoft.Toolkit.Uwp.UI.Lottie.UIData.CodeGen
 
         public virtual string ByteArray => "byte[]";
 
+        public string BorderMode(CompositionBorderMode value)
+        {
+            var typeName = nameof(CompositionBorderMode);
+            switch (value)
+            {
+                case CompositionBorderMode.Hard: return $"{typeName}{ScopeResolve}{nameof(CompositionBorderMode.Hard)}";
+                case CompositionBorderMode.Soft: return $"{typeName}{ScopeResolve}{nameof(CompositionBorderMode.Soft)}";
+                case CompositionBorderMode.Inherit: return $"{typeName}{ScopeResolve}{nameof(CompositionBorderMode.Inherit)}";
+                default: throw new InvalidOperationException();
+            }
+        }
+
         public virtual string CanvasFigureLoop(CanvasFigureLoop value)
         {
             var typeName = nameof(CanvasFigureLoop);

source/WinCompData/CompositionBorderMode.cs

@@ -0,0 +1,17 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace Microsoft.Toolkit.Uwp.UI.Lottie.WinCompData
+{
+    [MetaData.UapVersion(2)]
+#if PUBLIC_WinCompData
+    public
+#endif
+    enum CompositionBorderMode
+    {
+        Inherit = 0,
+        Soft = 1,
+        Hard = 2,
+    }
+}

source/WinCompData/Serialization/CompositionObjectXmlSerializer.cs

@@ -572,6 +572,11 @@ namespace Microsoft.Toolkit.Uwp.UI.Lottie.WinCompData.Tools
 
             yield return FromVector2DefaultZero(nameof(obj.Size), obj.Size);
 
+            if (obj.BorderMode.HasValue)
+            {
+                yield return new XAttribute(nameof(obj.BorderMode), obj.BorderMode.Value);
+            }
+
             foreach (var item in FromAnimatableVector3("Offset", obj.Animators, obj.Offset))
             {
                 yield return item;

source/WinCompData/Visual.cs

@@ -16,6 +16,13 @@ namespace Microsoft.Toolkit.Uwp.UI.Lottie.WinCompData
         {
         }
 
+        // Defaults to Inherit.
+        // Note that trees rooted by the desktop have Soft passed into them so
+        // they inherit Soft unless overridden.
+        // Non-rooted trees have Hard passed into them so they inherit Hard unless
+        // overridden.
+        public CompositionBorderMode? BorderMode { get; set; }
+
         public Vector3? CenterPoint { get; set; }
 
         public CompositionClip Clip { get; set; }

source/WinCompData/WinCompData.projitems

@@ -9,6 +9,7 @@
     <Compile Include="$(MSBuildThisFileDirectory)AnimationController.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)ColorKeyFrameAnimation.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)CompositionAnimation.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)CompositionBorderMode.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)CompositionBrush.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)CompositionClip.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)CompositionColorBrush.cs" />