Initial exploratory stab at the main challenge of the app - visualizing ASLayoutSpecs

This commit is contained in:
Hannah Troisi
2016-03-19 17:05:15 -07:00
parent afdb3f9a8a
commit 8d7871fe9a
12 changed files with 228 additions and 25 deletions

View File

@@ -16,6 +16,8 @@
76466F331C9DFFC4006C4D2D /* ColorNode.m in Sources */ = {isa = PBXBuildFile; fileRef = 76466F2D1C9DFFC4006C4D2D /* ColorNode.m */; };
76466F341C9DFFC4006C4D2D /* PlaygroundNode.m in Sources */ = {isa = PBXBuildFile; fileRef = 76466F2F1C9DFFC4006C4D2D /* PlaygroundNode.m */; };
76466F351C9DFFC4006C4D2D /* ViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = 76466F311C9DFFC4006C4D2D /* ViewController.m */; };
76F58D591C9E114B004512CC /* EditorNode.m in Sources */ = {isa = PBXBuildFile; fileRef = 76F58D581C9E114B004512CC /* EditorNode.m */; };
76F58D5C1C9E15C1004512CC /* PlaygroundContainerNode.m in Sources */ = {isa = PBXBuildFile; fileRef = 76F58D5B1C9E15C1004512CC /* PlaygroundContainerNode.m */; };
/* End PBXBuildFile section */
/* Begin PBXFileReference section */
@@ -35,6 +37,10 @@
76466F2F1C9DFFC4006C4D2D /* PlaygroundNode.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = PlaygroundNode.m; sourceTree = "<group>"; };
76466F301C9DFFC4006C4D2D /* ViewController.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ViewController.h; sourceTree = "<group>"; };
76466F311C9DFFC4006C4D2D /* ViewController.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ViewController.m; sourceTree = "<group>"; };
76F58D571C9E114B004512CC /* EditorNode.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = EditorNode.h; sourceTree = "<group>"; };
76F58D581C9E114B004512CC /* EditorNode.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = EditorNode.m; sourceTree = "<group>"; };
76F58D5A1C9E15C1004512CC /* PlaygroundContainerNode.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = PlaygroundContainerNode.h; sourceTree = "<group>"; };
76F58D5B1C9E15C1004512CC /* PlaygroundContainerNode.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = PlaygroundContainerNode.m; sourceTree = "<group>"; };
C068F1D3F0CC317E895FCDAB /* Pods.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = Pods.debug.xcconfig; path = "Pods/Target Support Files/Pods/Pods.debug.xcconfig"; sourceTree = "<group>"; };
/* End PBXFileReference section */
@@ -78,10 +84,14 @@
76466F2B1C9DFFC4006C4D2D /* AppDelegate.m */,
76466F301C9DFFC4006C4D2D /* ViewController.h */,
76466F311C9DFFC4006C4D2D /* ViewController.m */,
76F58D5A1C9E15C1004512CC /* PlaygroundContainerNode.h */,
76F58D5B1C9E15C1004512CC /* PlaygroundContainerNode.m */,
76466F2E1C9DFFC4006C4D2D /* PlaygroundNode.h */,
76466F2F1C9DFFC4006C4D2D /* PlaygroundNode.m */,
76466F2C1C9DFFC4006C4D2D /* ColorNode.h */,
76466F2D1C9DFFC4006C4D2D /* ColorNode.m */,
76F58D571C9E114B004512CC /* EditorNode.h */,
76F58D581C9E114B004512CC /* EditorNode.m */,
05E2128419D4DB510098F589 /* Supporting Files */,
);
path = Sample;
@@ -237,10 +247,12 @@
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
76F58D591C9E114B004512CC /* EditorNode.m in Sources */,
76466F321C9DFFC4006C4D2D /* AppDelegate.m in Sources */,
05E2128719D4DB510098F589 /* main.m in Sources */,
76466F331C9DFFC4006C4D2D /* ColorNode.m in Sources */,
76466F341C9DFFC4006C4D2D /* PlaygroundNode.m in Sources */,
76F58D5C1C9E15C1004512CC /* PlaygroundContainerNode.m in Sources */,
76466F351C9DFFC4006C4D2D /* ViewController.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;

View File

@@ -25,7 +25,7 @@
self.layer.borderWidth = 2;
self.layer.borderColor = [[UIColor blackColor] CGColor];
self.backgroundColor = [UIColor purpleColor];
self.alignSelf = ASStackLayoutAlignSelfEnd;
}
return self;

View File

@@ -0,0 +1,15 @@
//
// EditorNode.h
// Sample
//
// Created by Hannah Troisi on 3/19/16.
// Copyright © 2016 Facebook. All rights reserved.
//
#import <AsyncDisplayKit/AsyncDisplayKit.h>
@interface EditorNode : ASDisplayNode
@property (nonatomic, strong) id<ASLayoutable> layoutableToEdit;
@end

View File

@@ -0,0 +1,48 @@
//
// EditorNode.m
// Sample
//
// Created by Hannah Troisi on 3/19/16.
// Copyright © 2016 Facebook. All rights reserved.
//
#import "EditorNode.h"
@implementation EditorNode
{
ASTextNode *_textNode;
}
- (void)setLayoutableToEdit:(id<ASLayoutable>)layoutableToEdit
{
if (_layoutableToEdit != layoutableToEdit) {
_layoutableToEdit = layoutableToEdit;
_textNode.attributedString = [self attributedStringFromLayout:_layoutableToEdit];
self.backgroundColor = [UIColor colorWithRed:40/255.0 green:43/255.0 blue:53/255.0 alpha:1.0];
}
}
- (instancetype)init
{
self = [super init];
if (self) {
self.usesImplicitHierarchyManagement = YES;
_textNode = [[ASTextNode alloc] init];
}
return self;
}
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
{
ASLayoutSpec *insetSpec = [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(10, 10, 10, 10) child:_textNode];
return insetSpec;
}
- (NSAttributedString *)attributedStringFromLayout:(id<ASLayoutable>)layoutable
{
NSDictionary *attributes = @{NSForegroundColorAttributeName : [UIColor whiteColor],
NSFontAttributeName : [UIFont fontWithName:@"Menlo-Regular" size:12]};
return [[NSAttributedString alloc] initWithString:[layoutable asciiArtString] attributes:attributes];
}
@end

View File

@@ -0,0 +1,13 @@
//
// PlaygroundContainerNode.h
// Sample
//
// Created by Hannah Troisi on 3/19/16.
// Copyright © 2016 Facebook. All rights reserved.
//
#import <AsyncDisplayKit/AsyncDisplayKit.h>
@interface PlaygroundContainerNode : ASDisplayNode
@end

View File

@@ -0,0 +1,44 @@
//
// PlaygroundContainerNode.m
// Sample
//
// Created by Hannah Troisi on 3/19/16.
// Copyright © 2016 Facebook. All rights reserved.
//
#import "PlaygroundContainerNode.h"
#import "PlaygroundNode.h"
#import "EditorNode.h"
@implementation PlaygroundContainerNode
{
EditorNode *_editorNode;
PlaygroundNode *_playgroundNode;
}
- (instancetype)init
{
self = [super init];
if (self) {
self.usesImplicitHierarchyManagement = YES;
_editorNode = [[EditorNode alloc] init];
_editorNode.flexBasis = ASRelativeDimensionMakeWithPercent(1.0);
_playgroundNode = [[PlaygroundNode alloc] init];
}
return self;
}
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
{
ASStackLayoutSpec *verticalStack = [ASStackLayoutSpec verticalStackLayoutSpec];
verticalStack.children = @[_playgroundNode, _editorNode];
verticalStack.horizontalAlignment = ASAlignmentMiddle;
_editorNode.layoutableToEdit = verticalStack;
return verticalStack;
}
@end

View File

@@ -40,8 +40,14 @@
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
{
NSMutableArray *children = [[NSMutableArray alloc] init];
for (ASDisplayNode *node in _colorNodes) {
UIEdgeInsets insets = UIEdgeInsetsMake(10, 10, 10, 10);
ASInsetLayoutSpec *insetSpec = [ASInsetLayoutSpec insetLayoutSpecWithInsets:insets child:node];
[children addObject:insetSpec];
}
ASStackLayoutSpec *innerStack = [ASStackLayoutSpec verticalStackLayoutSpec];
innerStack.children = _colorNodes;
innerStack.children = children;
ASStackLayoutSpec *outerStack = [ASStackLayoutSpec horizontalStackLayoutSpec];
outerStack.children = @[innerStack, _individualColorNode];

View File

@@ -7,7 +7,8 @@
//
#import "ViewController.h"
#import "PlaygroundNode.h"
#import "PlaygroundContainerNode.h"
#import "ASDisplayNode+Beta.h" // FIXME?
@interface ViewController ()
@@ -21,14 +22,15 @@
- (instancetype)init
{
self = [super initWithNode:[[PlaygroundNode alloc] init]];
self = [super initWithNode:[[PlaygroundContainerNode alloc] init]];
if (self) {
}
return self;
}
- (void)viewDidLoad
{
[super viewDidLoad];
}
@end