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;
 }
@@ -133,7 +137,7 @@ -(void)tintColorDidChange
   [super tintColorDidChange];
   // UIButton documentation states that it tints the image and title of buttons when tintColor is set.
   // | "The tint color to apply to the button title and image."
-  // | From: https://developer.apple.com/documentation/uikit/uibutton/1624025-tintcolor
+  // | From: https://developerx.apple.com/documentation/uikit/uibutton/1624025-tintcolor
   UIColor *tintColor = self.tintColor;
   self.imageNode.tintColor = tintColor;
   self.titleNode.tintColor = tintColor;

Source/ASImageNode.mm

@@ -290,29 +290,6 @@ - (void)setPlaceholderColor:(UIColor *)placeholderColor
   }
 }
 
-- (UIColor *)tintColor
-{
-  ASLockScopeSelf();
-  if (_flags.layerBacked) {
-    return _tintColor;
-  } else {
-    return super.tintColor;
-  }
-}
-
-- (void)setTintColor:(UIColor *)tintColor
-{
-  ASLockScopeSelf();
-  // CALayer does not have a tintColor property but we can support this capability so use the local ivar instead of the bridge
-  if (_flags.layerBacked && ![_tintColor isEqual:tintColor]) {
-    _tintColor = tintColor;
-    [self setNeedsDisplay];
-  } else {
-    // If we are view-backed, rely on the tintColor value from the UIViewBridge
-    [super setTintColor:tintColor];
-  }
-}
-
 #pragma mark - Drawing
 
 - (NSObject *)drawParametersForAsyncLayer:(_ASDisplayLayer *)layer

Source/Private/ASDisplayNode+UIViewBridge.mm

@@ -796,15 +796,41 @@ - (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;
+        [self tintColorDidChange];
+      }
+    } 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

@@ -114,6 +114,41 @@ - (void)testTintColorOnNodePropertyAlwaysTemplateLayerBackedNode
   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));