Add support for tinting layer-backed ASDisplayNode

Source/ASButtonNode.mm

@@ -52,7 +52,11 @@ - (ASTextNode *)titleNode
   ASLockScopeSelf();
   if (!_titleNode) {
     _titleNode = [[ASTextNode alloc] init];
-    // Intentionally not layer-backing the image node since tintColor may be applied
+    #if TARGET_OS_IOS
+          // tvOS needs access to the underlying view
+          // of the button node to add a touch handler.
+        [_titleNode setLayerBacked:YES];
+    #endif
     _titleNode.style.flexShrink = 1.0;
     _titleNode.textColorFollowsTintColor = YES;
   }
@@ -66,7 +70,7 @@ - (ASImageNode *)imageNode
   ASLockScopeSelf();
   if (!_imageNode) {
     _imageNode = [[ASImageNode alloc] init];
-    // Intentionally not layer-backing the image node since tintColor may be applied
+    [_imageNode setLayerBacked:YES];
   }
   return _imageNode;
 }

Source/ASImageNode.mm

@@ -143,6 +143,7 @@ @implementation ASImageNode
   UIImage *_image;
   ASWeakMapEntry *_weakCacheEntry;  // Holds a reference that keeps our contents in cache.
   UIColor *_placeholderColor;
+  UIColor *_tintColor; // Used to cache color information for layer backed nodes. View backed will use UIViewBridge
 
   void (^_displayCompletionBlock)(BOOL canceled);
 

Source/Private/ASDisplayNode+UIViewBridge.mm

@@ -796,15 +796,44 @@ - (void)setBackgroundColor:(UIColor *)newBackgroundColor
 - (UIColor *)tintColor
 {
   _bridge_prologue_read;
-  ASDisplayNodeAssert(!_flags.layerBacked, @"Danger: this property is undefined on layer-backed nodes.");
-  return _getFromViewOnly(tintColor);
+  if (_loaded(self)) {
+    if (_flags.layerBacked) {
+        // The first nondefault tint color value in the view’s hierarchy, ascending from and starting with the view itself.
+        return _tintColor ?: self.supernode.tintColor;
+      } else {
+        return _getFromViewOnly(tintColor);
+      }
+  } else {
+    if (_flags.layerBacked) {
+      return _tintColor;
+    } else {
+      return ASDisplayNodeGetPendingState(self).tintColor;
+    }
+  }
 }
 
 - (void)setTintColor:(UIColor *)color
 {
   _bridge_prologue_write;
-  ASDisplayNodeAssert(!_flags.layerBacked, @"Danger: this property is undefined on layer-backed nodes.");
-  _setToViewOnly(tintColor, color);
+  if (_loaded(self)) {
+    if (_flags.layerBacked) {
+      if (![_tintColor isEqual:color]) {
+        _tintColor = color;
+        // Tint color has changed. Unlock here before calling subclasses and exit-early
+        AS::MutexLocker unlock(__instanceLock__);
+        [self tintColorDidChange];
+        return;
+      }
+    } else {
+      _setToViewOnly(tintColor, color);
+    }
+  } else {
+    if (_flags.layerBacked) {
+      _tintColor = color;
+    } else {
+      ASDisplayNodeGetPendingState(self).tintColor = color;
+    }
+  }
 }
 
 - (void)tintColorDidChange

Source/Private/ASDisplayNodeInternal.h

@@ -253,6 +253,9 @@ static constexpr CACornerMask kASCACornerAllCorners =
   // These properties are used on iOS 10 and lower, where safe area is not supported by UIKit.
   UIEdgeInsets _fallbackSafeAreaInsets;
 
+  // Tinting support
+  UIColor *_tintColor;
+
 #pragma mark - ASDisplayNode (Debugging)
   ASLayout *_unflattenedLayout;
 

Tests/ASImageNodeSnapshotTests.mm

@@ -102,6 +102,52 @@ - (void)testTintColorOnNodePropertyAlwaysOriginal
   ASSnapshotVerifyNode(node, nil);
 }
 
+- (void)testTintColorOnNodePropertyAlwaysTemplateLayerBackedNode
+{
+  // Test support for layerBacked image node tinting
+  UIImage *test = [self testImage];
+  ASImageNode *node = [[ASImageNode alloc] init];
+  [node setLayerBacked:YES];
+  node.tintColor = UIColor.redColor;
+  node.image = [test imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+  ASDisplayNodeSizeToFitSize(node, test.size);
+  ASSnapshotVerifyNode(node, nil);
+}
+
+
+- (void)testTintColorInheritsFromSupernodeLayerBacked
+{
+   // Test support for layerBacked image node tinting
+  ASDisplayNode *container = [[ASDisplayNode alloc] init];
+  [container setLayerBacked:YES];
+  container.tintColor = UIColor.redColor;
+  UIImage *test = [self testImage];
+  ASImageNode *node = [[ASImageNode alloc] init];
+  [node setLayerBacked:YES];
+  node.tintColor = UIColor.redColor;
+  node.image = [test imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+  [container addSubnode:node];
+  container.style.preferredSize = test.size;
+  ASDisplayNodeSizeToFitSize(node, test.size);
+  ASSnapshotVerifyNode(node, nil);
+}
+
+- (void)testTintColorInheritsFromSupernodeViewBacked
+{
+  // Test support for layerBacked image node tinting
+  ASDisplayNode *container = [[ASDisplayNode alloc] init];
+  [container setLayerBacked:NO];
+  container.tintColor = UIColor.redColor;
+  UIImage *test = [self testImage];
+  ASImageNode *node = [[ASImageNode alloc] init];
+  [node setLayerBacked:YES];
+  node.image = [test imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+  [container addSubnode:node];
+  container.style.preferredSize = test.size;
+  ASDisplayNodeSizeToFitSize(node, test.size);
+  ASSnapshotVerifyNode(node, nil);
+}
+
 - (void)testRoundedCornerBlock
 {
   UIGraphicsBeginImageContext(CGSizeMake(100, 100));