[ASCornerLayoutSpec] New layout spec class for declarative corner element layout. (#657)

* Add new layout spec class with snapshot testing. Update examples and CHANGELOG.md

* Code review updates.

* Open curly bracket in a new line.

examples/LayoutSpecExamples/Sample.xcodeproj/project.pbxproj

@@ -220,13 +220,16 @@
 			files = (
 			);
 			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
 			);
 			name = "[CP] Check Pods Manifest.lock";
 			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-Sample-checkManifestLockResult.txt",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "diff \"${PODS_ROOT}/../Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [[ $? != 0 ]] ; then\n    cat << EOM\nerror: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\nEOM\n    exit 1\nfi\n";
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
 /* End PBXShellScriptBuildPhase section */

examples/LayoutSpecExamples/Sample.xcworkspace/contents.xcworkspacedata

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Workspace
+   version = "1.0">
+   <FileRef
+      location = "group:Sample.xcodeproj">
+   </FileRef>
+   <FileRef
+      location = "group:Pods/Pods.xcodeproj">
+   </FileRef>
+</Workspace>

examples/LayoutSpecExamples/Sample/LayoutExampleNodes.h

@@ -33,3 +33,9 @@
 
 @interface FlexibleSeparatorSurroundingContent : LayoutExampleNode
 @end
+
+@interface CornerLayoutExample : PhotoWithOutsetIconOverlay
+@end
+
+@interface UserProfileSample : LayoutExampleNode
+@end

examples/LayoutSpecExamples/Sample/LayoutExampleNodes.m

@@ -260,6 +260,188 @@
 
 @end
 
+@interface CornerLayoutExample ()
+@property (nonatomic, strong) ASImageNode *dotNode;
+@property (nonatomic, strong) ASImageNode *photoNode1;
+@property (nonatomic, strong) ASTextNode *badgeTextNode;
+@property (nonatomic, strong) ASImageNode *badgeImageNode;
+@property (nonatomic, strong) ASImageNode *photoNode2;
+@end
+
+@implementation CornerLayoutExample
+
+static CGFloat const kSampleAvatarSize = 100;
+static CGFloat const kSampleIconSize = 26;
+static CGFloat const kSampleBadgeCornerRadius = 12;
+
++ (NSString *)title
+{
+    return @"Declarative way for Corner image Layout";
+}
+
++ (NSString *)descriptionTitle
+{
+    return nil;
+}
+
+- (instancetype)init
+{
+    self = [super init];
+    if (self) {
+        UIImage *avatarImage = [self avatarImageWithSize:CGSizeMake(kSampleAvatarSize, kSampleAvatarSize)];
+        UIImage *cornerImage = [self cornerImageWithSize:CGSizeMake(kSampleIconSize, kSampleIconSize)];
+        
+        NSAttributedString *numberText = [NSAttributedString attributedStringWithString:@" 999+ " fontSize:20 color:UIColor.whiteColor];
+        
+        _dotNode = [ASImageNode new];
+        _dotNode.image = cornerImage;
+        
+        _photoNode1 = [ASImageNode new];
+        _photoNode1.image = avatarImage;
+        
+        _badgeTextNode = [ASTextNode new];
+        _badgeTextNode.attributedText = numberText;
+        
+        _badgeImageNode = [ASImageNode new];
+        _badgeImageNode.image = [UIImage as_resizableRoundedImageWithCornerRadius:kSampleBadgeCornerRadius
+                                                                      cornerColor:UIColor.clearColor
+                                                                        fillColor:UIColor.redColor];
+        
+        _photoNode2 = [ASImageNode new];
+        _photoNode2.image = avatarImage;
+    }
+    return self;
+}
+
+- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
+{
+    
+    ASBackgroundLayoutSpec *badgeSpec = [ASBackgroundLayoutSpec backgroundLayoutSpecWithChild:_badgeTextNode
+                                                                                   background:_badgeImageNode];
+    
+    ASCornerLayoutSpec *cornerSpec1 = [ASCornerLayoutSpec cornerLayoutSpecWithChild:_photoNode1 corner:_dotNode location:ASCornerLayoutLocationTopRight];
+    cornerSpec1.offset = CGPointMake(-3, 3);
+    
+    ASCornerLayoutSpec *cornerSpec2 = [ASCornerLayoutSpec cornerLayoutSpecWithChild:_photoNode2 corner:badgeSpec location:ASCornerLayoutLocationTopRight];
+    
+    self.photoNode.style.preferredSize = CGSizeMake(kSampleAvatarSize, kSampleAvatarSize);
+    self.iconNode.style.preferredSize = CGSizeMake(kSampleIconSize, kSampleIconSize);
+    
+    ASCornerLayoutSpec *cornerSpec3 = [ASCornerLayoutSpec cornerLayoutSpecWithChild:self.photoNode corner:self.iconNode location:ASCornerLayoutLocationTopRight];
+    
+    ASStackLayoutSpec *stackSpec = [ASStackLayoutSpec verticalStackLayoutSpec];
+    stackSpec.spacing = 40;
+    stackSpec.children = @[cornerSpec1, cornerSpec2, cornerSpec3];
+    
+    return stackSpec;
+}
+
+- (UIImage *)avatarImageWithSize:(CGSize)size
+{
+    return [UIImage imageWithSize:size fillColor:UIColor.lightGrayColor shapeBlock:^UIBezierPath *{
+        CGRect rect = (CGRect){ CGPointZero, size };
+        return [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:MIN(size.width, size.height) / 20];
+    }];
+}
+
+- (UIImage *)cornerImageWithSize:(CGSize)size
+{
+    return [UIImage imageWithSize:size fillColor:UIColor.redColor shapeBlock:^UIBezierPath *{
+        return [UIBezierPath bezierPathWithOvalInRect:(CGRect){ CGPointZero, size }];
+    }];
+}
+
+@end
+
+
+@interface UserProfileSample ()
+@property (nonatomic, strong) ASImageNode *badgeNode;
+@property (nonatomic, strong) ASImageNode *avatarNode;
+@property (nonatomic, strong) ASTextNode *usernameNode;
+@property (nonatomic, strong) ASTextNode *subtitleNode;
+@property (nonatomic, assign) CGFloat photoSizeValue;
+@property (nonatomic, assign) CGFloat iconSizeValue;
+@end
+
+@implementation UserProfileSample
+
++ (NSString *)title
+{
+    return @"Common user profile layout.";
+}
+
++ (NSString *)descriptionTitle
+{
+    return @"For corner image layout and text truncation.";
+}
+
+- (instancetype)init
+{
+    self = [super init];
+    if (self) {
+        _photoSizeValue = 44;
+        _iconSizeValue = 15;
+        
+        CGSize iconSize = CGSizeMake(_iconSizeValue, _iconSizeValue);
+        CGSize photoSize = CGSizeMake(_photoSizeValue, _photoSizeValue);
+        
+        _badgeNode = [ASImageNode new];
+        _badgeNode.style.preferredSize = iconSize;
+        _badgeNode.image = [UIImage imageWithSize:iconSize fillColor:UIColor.redColor shapeBlock:^UIBezierPath *{
+            return [UIBezierPath bezierPathWithOvalInRect:(CGRect){ CGPointZero, iconSize }];
+        }];
+        
+        _avatarNode = [ASImageNode new];
+        _avatarNode.style.preferredSize = photoSize;
+        _avatarNode.image = [UIImage imageWithSize:photoSize fillColor:UIColor.lightGrayColor shapeBlock:^UIBezierPath *{
+            return [UIBezierPath bezierPathWithOvalInRect:(CGRect){ CGPointZero, photoSize }];
+        }];
+        
+        _usernameNode = [ASTextNode new];
+        _usernameNode.attributedText = [NSAttributedString attributedStringWithString:@"Hello World" fontSize:17 color:UIColor.blackColor];
+        _usernameNode.maximumNumberOfLines = 1;
+        
+        _subtitleNode = [ASTextNode new];
+        _subtitleNode.attributedText = [NSAttributedString attributedStringWithString:@"This is a long long subtitle, with a long long appended string." fontSize:14 color:UIColor.lightGrayColor];
+        _subtitleNode.maximumNumberOfLines = 1;
+    }
+    return self;
+}
+
+- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
+{
+    // Apply avatar with badge
+    // Normally, avatar's box size is the only photo size and it will not include the badge size.
+    // Otherwise, use includeCornerForSizeCalculation property to increase the box's size if needed.
+    ASCornerLayoutSpec *avatarBox = [ASCornerLayoutSpec new];
+    avatarBox.child = _avatarNode;
+    avatarBox.corner = _badgeNode;
+    avatarBox.cornerLocation = ASCornerLayoutLocationBottomRight;
+    avatarBox.offset = CGPointMake(-6, -6);
+    
+    ASStackLayoutSpec *textBox = [ASStackLayoutSpec verticalStackLayoutSpec];
+    textBox.justifyContent = ASStackLayoutJustifyContentSpaceAround;
+    textBox.children = @[_usernameNode, _subtitleNode];
+    
+    ASStackLayoutSpec *profileBox = [ASStackLayoutSpec horizontalStackLayoutSpec];
+    profileBox.spacing = 10;
+    profileBox.children = @[avatarBox, textBox];
+    
+    // Apply text truncation.
+    NSArray *elems = @[_usernameNode, _subtitleNode, textBox, profileBox];
+    for (id <ASLayoutElement> elem in elems) {
+        elem.style.flexShrink = 1;
+    }
+    
+    ASInsetLayoutSpec *profileInsetBox = [ASInsetLayoutSpec new];
+    profileInsetBox.insets = UIEdgeInsetsMake(120, 20, INFINITY, 20);
+    profileInsetBox.child = profileBox;
+    
+    return profileInsetBox;
+}
+
+@end
+
 @implementation LayoutExampleNode
 
 + (NSString *)title

examples/LayoutSpecExamples/Sample/OverviewViewController.m

@@ -1,11 +1,18 @@
 //
 //  OverviewViewController.m
-//  Sample
+//  Texture
 //
 //  Copyright (c) 2014-present, Facebook, Inc.  All rights reserved.
 //  This source code is licensed under the BSD-style license found in the
-//  LICENSE file in the root directory of this source tree. An additional grant
-//  of patent rights can be found in the PATENTS file in the same directory.
+//  LICENSE file in the /ASDK-Licenses directory of this source tree. An additional
+//  grant of patent rights can be found in the PATENTS file in the same directory.
+//
+//  Modifications to this file made after 4/13/2017 are: Copyright (c) 2017-present,
+//  Pinterest, Inc.  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
 //
 
 #import "OverviewViewController.h"
@@ -37,7 +44,10 @@
     _layoutExamples = @[[HeaderWithRightAndLeftItems class],
                         [PhotoWithInsetTextOverlay class],
                         [PhotoWithOutsetIconOverlay class],
-                        [FlexibleSeparatorSurroundingContent class]];
+                        [FlexibleSeparatorSurroundingContent class],
+                        [CornerLayoutExample class],
+                        [UserProfileSample class]
+                        ];
   }
   
   return self;

examples/LayoutSpecExamples/Sample/Utilities.h

@@ -1,11 +1,18 @@
 //
 //  Utilities.h
-//  Sample
+//  Texture
 //
 //  Copyright (c) 2014-present, Facebook, Inc.  All rights reserved.
 //  This source code is licensed under the BSD-style license found in the
-//  LICENSE file in the root directory of this source tree. An additional grant
-//  of patent rights can be found in the PATENTS file in the same directory.
+//  LICENSE file in the /ASDK-Licenses directory of this source tree. An additional
+//  grant of patent rights can be found in the PATENTS file in the same directory.
+//
+//  Modifications to this file made after 4/13/2017 are: Copyright (c) 2017-present,
+//  Pinterest, Inc.  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
 //
 
 #import <Foundation/Foundation.h>
@@ -18,6 +25,7 @@
 
 @interface UIImage (Additions)
 - (UIImage *)makeCircularImageWithSize:(CGSize)size withBorderWidth:(CGFloat)width;
++ (UIImage *)imageWithSize:(CGSize)size fillColor:(UIColor *)fillColor shapeBlock:(UIBezierPath *(^)(void))shapeBlock;
 @end
 
 @interface NSAttributedString (Additions)

examples/LayoutSpecExamples/Sample/Utilities.m

@@ -1,11 +1,18 @@
 //
 //  Utilities.m
-//  Sample
+//  Texture
 //
 //  Copyright (c) 2014-present, Facebook, Inc.  All rights reserved.
 //  This source code is licensed under the BSD-style license found in the
-//  LICENSE file in the root directory of this source tree. An additional grant
-//  of patent rights can be found in the PATENTS file in the same directory.
+//  LICENSE file in the /ASDK-Licenses directory of this source tree. An additional
+//  grant of patent rights can be found in the PATENTS file in the same directory.
+//
+//  Modifications to this file made after 4/13/2017 are: Copyright (c) 2017-present,
+//  Pinterest, Inc.  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
 //
 
 #import "Utilities.h"
@@ -64,6 +71,21 @@
   return roundedImage;
 }
 
++ (UIImage *)imageWithSize:(CGSize)size fillColor:(UIColor *)fillColor shapeBlock:(UIBezierPath *(^)(void))shapeBlock
+{
+    UIGraphicsBeginImageContext(size);
+    [fillColor setFill];
+    
+    UIBezierPath *path = shapeBlock();
+    [path addClip];
+    [path fill];
+    
+    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
+    UIGraphicsEndImageContext();
+    
+    return image;
+}
+
 @end
 
 @implementation NSAttributedString (Additions)