Update Kittens sample to use new layout system.

examples/Kittens/Sample.xcodeproj/project.pbxproj

@@ -8,7 +8,7 @@
 
 /* Begin PBXBuildFile section */
 		05561CFA19D4E77700CBA93C /* BlurbNode.m in Sources */ = {isa = PBXBuildFile; fileRef = 05561CF919D4E77700CBA93C /* BlurbNode.m */; };
-		05561CFD19D4F94A00CBA93C /* KittenNode.m in Sources */ = {isa = PBXBuildFile; fileRef = 05561CFC19D4F94A00CBA93C /* KittenNode.m */; };
+		05561CFD19D4F94A00CBA93C /* KittenNode.mm in Sources */ = {isa = PBXBuildFile; fileRef = 05561CFC19D4F94A00CBA93C /* KittenNode.mm */; };
 		0585428019D4DBE100606EA6 /* Default-568h@2x.png in Resources */ = {isa = PBXBuildFile; fileRef = 0585427F19D4DBE100606EA6 /* Default-568h@2x.png */; };
 		05E2128719D4DB510098F589 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 05E2128619D4DB510098F589 /* main.m */; };
 		05E2128A19D4DB510098F589 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 05E2128919D4DB510098F589 /* AppDelegate.m */; };
@@ -22,7 +22,7 @@
 		05561CF819D4E77700CBA93C /* BlurbNode.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = BlurbNode.h; sourceTree = "<group>"; };
 		05561CF919D4E77700CBA93C /* BlurbNode.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = BlurbNode.m; sourceTree = "<group>"; };
 		05561CFB19D4F94A00CBA93C /* KittenNode.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = KittenNode.h; sourceTree = "<group>"; };
-		05561CFC19D4F94A00CBA93C /* KittenNode.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = KittenNode.m; sourceTree = "<group>"; };
+		05561CFC19D4F94A00CBA93C /* KittenNode.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = KittenNode.mm; sourceTree = "<group>"; };
 		0585427F19D4DBE100606EA6 /* Default-568h@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = "Default-568h@2x.png"; path = "../Default-568h@2x.png"; sourceTree = "<group>"; };
 		05E2128119D4DB510098F589 /* Sample.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Sample.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		05E2128519D4DB510098F589 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
@@ -76,7 +76,7 @@
 				05E2128B19D4DB510098F589 /* ViewController.h */,
 				05E2128C19D4DB510098F589 /* ViewController.m */,
 				05561CFB19D4F94A00CBA93C /* KittenNode.h */,
-				05561CFC19D4F94A00CBA93C /* KittenNode.m */,
+				05561CFC19D4F94A00CBA93C /* KittenNode.mm */,
 				05561CF819D4E77700CBA93C /* BlurbNode.h */,
 				05561CF919D4E77700CBA93C /* BlurbNode.m */,
 				05E2128419D4DB510098F589 /* Supporting Files */,
@@ -218,7 +218,7 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				05561CFD19D4F94A00CBA93C /* KittenNode.m in Sources */,
+				05561CFD19D4F94A00CBA93C /* KittenNode.mm in Sources */,
 				05E2128D19D4DB510098F589 /* ViewController.m in Sources */,
 				05E2128A19D4DB510098F589 /* AppDelegate.m in Sources */,
 				05561CFA19D4E77700CBA93C /* BlurbNode.m in Sources */,

examples/Kittens/Sample/BlurbNode.m

@@ -14,6 +14,8 @@
 #import <AsyncDisplayKit/ASDisplayNode+Subclasses.h>
 #import <AsyncDisplayKit/ASHighlightOverlayLayer.h>
 
+#import <AsyncDisplayKit/ASInsetLayoutNode.h>
+#import <AsyncDisplayKit/ASCompositeNode.h>
 
 static CGFloat kTextPadding = 10.0f;
 static NSString *kLinkAttributeName = @"PlaceKittenNodeLinkAttributeName";
@@ -70,22 +72,11 @@ static NSString *kLinkAttributeName = @"PlaceKittenNodeLinkAttributeName";
   [super didLoad];
 }
 
-- (CGSize)calculateSizeThatFits:(CGSize)constrainedSize
+- (ASLayoutNode *)layoutNodeThatFits:(CGSize)constrainedSize
 {
   // called on a background thread.  custom nodes must call -measure: on their subnodes in -calculateSizeThatFits:
-  CGSize measuredSize = [_textNode measure:CGSizeMake(constrainedSize.width - 2 * kTextPadding,
+  UIEdgeInsets insets = UIEdgeInsetsMake(kTextPadding, kTextPadding, kTextPadding, kTextPadding);
-                                                      constrainedSize.height - 2 * kTextPadding)];
+  return [ASInsetLayoutNode newWithInsets:insets node:[ASCompositeNode newWithDisplayNode:_textNode]];
-  return CGSizeMake(constrainedSize.width, measuredSize.height + 2 * kTextPadding);
-}
-
-- (void)layout
-{
-  // called on the main thread.  we'll use the stashed size from above, instead of blocking on text sizing
-  CGSize textNodeSize = _textNode.calculatedSize;
-  _textNode.frame = CGRectMake(roundf((self.calculatedSize.width - textNodeSize.width) / 2.0f),
-                               kTextPadding,
-                               textNodeSize.width,
-                               textNodeSize.height);
 }
 
 #pragma mark -

examples/Kittens/Sample/KittenNode.mm

@@ -13,6 +13,10 @@
 
 #import <AsyncDisplayKit/ASDisplayNode+Subclasses.h>
 
+#import <AsyncDisplayKit/ASStackLayoutNode.h>
+#import <AsyncDisplayKit/ASInsetLayoutNode.h>
+#import <AsyncDisplayKit/ASCompositeNode.h>
+
 static const CGFloat kImageSize = 80.0f;
 static const CGFloat kOuterPadding = 16.0f;
 static const CGFloat kInnerPadding = 10.0f;
@@ -124,26 +128,41 @@ static const CGFloat kInnerPadding = 10.0f;
             NSParagraphStyleAttributeName: style };
 }
 
-- (CGSize)calculateSizeThatFits:(CGSize)constrainedSize
+- (ASLayoutNode *)layoutNodeThatFits:(CGSize)constrainedSize
 {
-  CGSize imageSize = CGSizeMake(kImageSize, kImageSize);
+  return
-  CGSize textSize = [_textNode measure:CGSizeMake(constrainedSize.width - kImageSize - 2 * kOuterPadding - kInnerPadding,
+  [ASInsetLayoutNode
-                                                  constrainedSize.height)];
+   newWithInsets:UIEdgeInsetsMake(kOuterPadding, kOuterPadding, kOuterPadding, kOuterPadding)
-
+   node:
-  // ensure there's room for the text
+   [ASStackLayoutNode
-  CGFloat requiredHeight = MAX(textSize.height, imageSize.height);
+    newWithSize:{
-  return CGSizeMake(constrainedSize.width, requiredHeight + 2 * kOuterPadding);
+      .maxWidth = ASRelativeDimensionMakeWithPoints(constrainedSize.width),
+      .maxHeight = ASRelativeDimensionMakeWithPoints(constrainedSize.height)
+    }
+    style:{
+      .direction = ASStackLayoutDirectionHorizontal,
+      .spacing = kInnerPadding
+    }
+    children:
+    @[
+      [ASStackLayoutNodeChild newWithInitializer:^(ASMutableStackLayoutNodeChild *mutableCopy) {
+        mutableCopy.node = [ASCompositeNode
+                            newWithSize:ASLayoutNodeSizeMake(kImageSize, kImageSize)
+                            displayNode:_imageNode];
+      }],
+      [ASStackLayoutNodeChild newWithInitializer:^(ASMutableStackLayoutNodeChild *mutableCopy) {
+        mutableCopy.node = [ASCompositeNode newWithDisplayNode:_textNode];
+        mutableCopy.flexShrink = true;
+      }]
+    ]]];
 }
 
 - (void)layout
 {
+  [super layout];
+  
   CGFloat pixelHeight = 1.0f / [[UIScreen mainScreen] scale];
   _divider.frame = CGRectMake(0.0f, 0.0f, self.calculatedSize.width, pixelHeight);
-
-  _imageNode.frame = CGRectMake(kOuterPadding, kOuterPadding, kImageSize, kImageSize);
-
-  CGSize textSize = _textNode.calculatedSize;
-  _textNode.frame = CGRectMake(kOuterPadding + kImageSize + kInnerPadding, kOuterPadding, textSize.width, textSize.height);
 }
 
 @end