moved baseline alignment to a layout spec.

This commit is contained in:
ricky cancro
2015-08-20 10:38:54 -07:00
committed by rcancro
parent 9036ab8e7d
commit 2d6ddfe32e
7 changed files with 243 additions and 144 deletions

View File

@@ -44,11 +44,7 @@ typedef NS_ENUM(NSUInteger, ASStackLayoutAlignItems) {
/** Center children on cross axis */
ASStackLayoutAlignItemsCenter,
/** Expand children to fill cross axis */
ASStackLayoutAlignItemsStretch,
/** Children align along the first baseline of the stack. Only available for horizontal stack nodes */
ASStackLayoutAlignItemsFirstBaseline,
/** Children align along the last baseline of the stack. Only available for horizontal stack nodes */
ASStackLayoutAlignItemsLastBaseline,
ASStackLayoutAlignItemsStretch
};
/**
@@ -66,6 +62,4 @@ typedef NS_ENUM(NSUInteger, ASStackLayoutAlignSelf) {
ASStackLayoutAlignSelfCenter,
/** Expand to fill cross axis */
ASStackLayoutAlignSelfStretch,
/** Note: All children in a stack must have the same baseline align type */
};

View File

@@ -1,35 +1,48 @@
//
// ASStackTextLayoutSpec.h
// AsyncDisplayKit
//
// Created by ricky cancro on 8/19/15.
// Copyright (c) 2015 Facebook. All rights reserved.
//
/*
* 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.
*
*/
#import <AsyncDisplayKit/ASStackLayoutSpec.h>
/** Orientation of children along cross axis */
typedef NS_ENUM(NSUInteger, ASStackTextLayoutBaselineAlignment) {
ASStackTextLayoutBaselineAlignmentNone,
/** Children align along the first baseline of the stack. Only available for horizontal stack nodes */
ASStackTextLayoutBaselineAlignmentFirst,
/** Children align along the last baseline of the stack. Only available for horizontal stack nodes */
ASStackTextLayoutBaselineAlignmentLast,
/** No baseline alignment. This is only valid for a vertical stack */
ASStackTextLayoutBaselineAlignmentNone,
/** Align all children to the first baseline. This is only valid for a horizontal stack */
ASStackTextLayoutBaselineAlignmentFirst,
/** Align all children to the last baseline. This is useful when a text node wraps and you want to align
to the bottom baseline. This is only valid for a horizontal stack */
ASStackTextLayoutBaselineAlignmentLast,
};
typedef struct {
/** Specifies the direction children are stacked in. */
ASStackLayoutSpecStyle stackLayoutStyle;
ASStackTextLayoutBaselineAlignment baselineAlignment;
/** Describes how the stack will be laid out */
ASStackLayoutSpecStyle stackLayoutStyle;
/** The type of baseline alignment */
ASStackTextLayoutBaselineAlignment baselineAlignment;
} ASStackTextLayoutSpecStyle;
@interface ASStackTextLayoutSpec : ASLayoutSpec
/**
A specialized version of a stack layout that aligns its children on a baseline. This spec only works with
ASStackTextLayoutable children.
If the spec is created with a horizontal direction, the children will be laid on a common baseline.
If the spec is created with a vertical direction, a child's vertical spacing will be measured from its
baseline instead of from the child's bounding box.
*/
@interface ASStackTextLayoutSpec : ASLayoutSpec <ASStackTextLayoutable>
/**
@param style Specifies how children are laid out.
@param children ASLayoutable children to be positioned.
@param children ASTextLayoutable children to be positioned.
*/
+ (instancetype)newWithStyle:(ASStackTextLayoutSpecStyle)style children:(NSArray *)children;

View File

@@ -1,10 +1,12 @@
//
// ASStackTextLayoutSpec.m
// AsyncDisplayKit
//
// Created by ricky cancro on 8/19/15.
// Copyright (c) 2015 Facebook. All rights reserved.
//
/*
* 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.
*
*/
#import "ASStackTextLayoutSpec.h"
#import "ASStackLayoutable.h"
@@ -19,109 +21,61 @@
#import "ASStackLayoutSpecUtilities.h"
#import "ASStackPositionedLayout.h"
#import "ASStackUnpositionedLayout.h"
#import "ASStackTextPositionedLayout.h"
#import "ASThread.h"
static CGFloat baselineForItem(const ASStackTextLayoutSpecStyle &style,
const ASLayout *layout) {
__weak id<ASStackTextLayoutable> textChild = (id<ASStackTextLayoutable>) layout.layoutableObject;
switch (style.baselineAlignment) {
case ASStackTextLayoutBaselineAlignmentNone:
return 0;
case ASStackTextLayoutBaselineAlignmentFirst:
return textChild.ascender;
case ASStackTextLayoutBaselineAlignmentLast:
return textChild.descender;
}
}
static CGFloat baselineOffset(const ASStackTextLayoutSpecStyle &style,
const ASLayout *l,
const CGFloat maxBaseline)
{
switch (style.baselineAlignment) {
case ASStackTextLayoutBaselineAlignmentFirst:
case ASStackTextLayoutBaselineAlignmentLast:
return maxBaseline - baselineForItem(style, l);
case ASStackTextLayoutBaselineAlignmentNone:
return 0;
}
}
@implementation ASStackTextLayoutSpec
{
ASStackTextLayoutSpecStyle _textStyle;
std::vector<id<ASStackTextLayoutable>> _children;
std::vector<id<ASStackLayoutable>> _stackChildren;
ASDN::RecursiveMutex _propertyLock;
ASStackTextLayoutSpecStyle _textStyle;
std::vector<id<ASStackLayoutable>> _stackChildren;
ASDN::RecursiveMutex _propertyLock;
}
@synthesize ascender = _ascender;
@synthesize descender = _descender;
+ (instancetype)newWithStyle:(ASStackTextLayoutSpecStyle)style children:(NSArray *)children
{
ASDisplayNodeAssert(style.stackLayoutStyle.direction == ASStackLayoutDirectionHorizontal && style.baselineAlignment != ASStackTextLayoutBaselineAlignmentNone, @"if you don't need baseline alignment, use ASStackLayoutSpec");
ASStackTextLayoutSpec *spec = [super new];
if (spec) {
spec->_textStyle = style;
spec->_children = std::vector<id<ASStackTextLayoutable>>();
for (id<ASStackTextLayoutable> child in children) {
ASDisplayNodeAssert([child conformsToProtocol:@protocol(ASStackTextLayoutable)], @"child must conform to ASStackLayoutable");
spec->_children.push_back(child);
spec->_stackChildren.push_back(child);
}
ASDisplayNodeAssert((style.stackLayoutStyle.direction == ASStackLayoutDirectionHorizontal && style.baselineAlignment != ASStackTextLayoutBaselineAlignmentNone) || style.stackLayoutStyle.direction == ASStackLayoutDirectionVertical, @"baselineAlignment is set to none. If you don't need baseline alignment please use ASStackLayoutSpec");
ASStackTextLayoutSpec *spec = [super new];
if (spec) {
spec->_textStyle = style;
spec->_stackChildren = std::vector<id<ASStackLayoutable>>();
for (id<ASStackTextLayoutable> child in children) {
ASDisplayNodeAssert([child conformsToProtocol:@protocol(ASStackTextLayoutable)], @"child must conform to ASStackLayoutable");
spec->_stackChildren.push_back(child);
}
return spec;
}
return spec;
}
+ (instancetype)new
{
ASDISPLAYNODE_NOT_DESIGNATED_INITIALIZER();
ASDISPLAYNODE_NOT_DESIGNATED_INITIALIZER();
}
- (ASLayout *)measureWithSizeRange:(ASSizeRange)constrainedSize
{
ASStackLayoutSpecStyle stackStyle = _textStyle.stackLayoutStyle;
const auto unpositionedLayout = ASStackUnpositionedLayout::compute(_stackChildren, stackStyle, constrainedSize);
const auto positionedLayout = ASStackPositionedLayout::compute(unpositionedLayout, stackStyle, constrainedSize);
// Alter the positioned layouts to include baselines
const auto baselineIt = std::max_element(positionedLayout.sublayouts.begin(), positionedLayout.sublayouts.end(), [&](const ASLayout *a, const ASLayout *b){
return baselineForItem(_textStyle, a) < baselineForItem(_textStyle, b);
});
const CGFloat maxBaseline = baselineIt == positionedLayout.sublayouts.end() ? 0 : baselineForItem(_textStyle, *baselineIt);
CGPoint p = CGPointZero;
BOOL first = YES;
auto stackedChildren = AS::map(positionedLayout.sublayouts, [&](ASLayout *l) -> ASLayout *{
__weak id<ASStackTextLayoutable> textChild = (id<ASStackTextLayoutable>) l.layoutableObject;
if (first) {
p = l.position;
}
first = NO;
if (stackStyle.direction == ASStackLayoutDirectionHorizontal) {
l.position = p + CGPointMake(0, baselineOffset(_textStyle, l, maxBaseline));
}
CGFloat spacingAfterBaseline = (stackStyle.direction == ASStackLayoutDirectionVertical) ? textChild.descender : 0;
p = p + directionPoint(stackStyle.direction, stackDimension(stackStyle.direction, l.size) + [(id<ASStackLayoutable>)l.layoutableObject spacingAfter] + spacingAfterBaseline, 0);
return l;
});
const ASStackPositionedLayout alteredPositionedLayouts = {stackedChildren, positionedLayout.crossSize};
const CGSize finalSize = directionSize(stackStyle.direction, unpositionedLayout.stackDimensionSum, alteredPositionedLayouts.crossSize);
NSArray *sublayouts = [NSArray arrayWithObjects:&alteredPositionedLayouts.sublayouts[0] count:alteredPositionedLayouts.sublayouts.size()];
return [ASLayout newWithLayoutableObject:self
size:ASSizeRangeClamp(constrainedSize, finalSize)
sublayouts:sublayouts];
ASStackLayoutSpecStyle stackStyle = _textStyle.stackLayoutStyle;
const auto unpositionedLayout = ASStackUnpositionedLayout::compute(_stackChildren, stackStyle, constrainedSize);
const auto positionedLayout = ASStackPositionedLayout::compute(unpositionedLayout, stackStyle, constrainedSize);
const auto baselinePositionedLayout = ASStackTextPositionedLayout::compute(positionedLayout, _textStyle, constrainedSize);
const CGSize finalSize = directionSize(stackStyle.direction, unpositionedLayout.stackDimensionSum, baselinePositionedLayout.crossSize);
NSArray *sublayouts = [NSArray arrayWithObjects:&baselinePositionedLayout.sublayouts[0] count:baselinePositionedLayout.sublayouts.size()];
ASDN::MutexLocker l(_propertyLock);
_ascender = baselinePositionedLayout.ascender;
_descender = baselinePositionedLayout.descender;
return [ASLayout newWithLayoutableObject:self
size:ASSizeRangeClamp(constrainedSize, finalSize)
sublayouts:sublayouts];
}
@end

View File

@@ -15,21 +15,9 @@
#import "ASStackLayoutSpecUtilities.h"
#import "ASLayoutable.h"
static CGFloat baselineForItem(const ASStackLayoutSpecStyle &style,
const ASStackUnpositionedItem &item) {
const ASStackLayoutAlignItems alignItems = alignment(item.child.alignSelf, style.alignItems);
if (alignItems == ASStackLayoutAlignItemsFirstBaseline) {
return item.child.layoutInsets.top;
} else if (alignItems == ASStackLayoutAlignItemsLastBaseline) {
return item.child.layoutInsets.bottom;
}
return 0;
}
static CGFloat crossOffset(const ASStackLayoutSpecStyle &style,
const ASStackUnpositionedItem &l,
const CGFloat crossSize,
const CGFloat maxBaseline)
const CGFloat crossSize)
{
switch (alignment(l.child.alignSelf, style.alignItems)) {
case ASStackLayoutAlignItemsEnd:
@@ -39,9 +27,8 @@ static CGFloat crossOffset(const ASStackLayoutSpecStyle &style,
case ASStackLayoutAlignItemsStart:
case ASStackLayoutAlignItemsStretch:
return 0;
case ASStackLayoutAlignItemsLastBaseline:
case ASStackLayoutAlignItemsFirstBaseline:
return maxBaseline - baselineForItem(style, l);
default:
return 0;
}
}
@@ -61,12 +48,6 @@ static ASStackPositionedLayout stackedLayout(const ASStackLayoutSpecStyle &style
const auto maxCrossSize = crossDimension(style.direction, constrainedSize.max);
const CGFloat crossSize = MIN(MAX(minCrossSize, largestChildCrossSize), maxCrossSize);
// Find the maximum height for the baseline
const auto baselineIt = std::max_element(unpositionedLayout.items.begin(), unpositionedLayout.items.end(), [&](const ASStackUnpositionedItem &a, const ASStackUnpositionedItem &b){
return baselineForItem(style, a) < baselineForItem(style, b);
});
const CGFloat maxBaseline = baselineIt == unpositionedLayout.items.end() ? 0 : baselineForItem(style, *baselineIt);
CGPoint p = directionPoint(style.direction, offset, 0);
BOOL first = YES;
auto stackedChildren = AS::map(unpositionedLayout.items, [&](const ASStackUnpositionedItem &l) -> ASLayout *{
@@ -75,10 +56,9 @@ static ASStackPositionedLayout stackedLayout(const ASStackLayoutSpecStyle &style
p = p + directionPoint(style.direction, style.spacing, 0);
}
first = NO;
l.layout.position = p + directionPoint(style.direction, 0, crossOffset(style, l, crossSize, maxBaseline));
l.layout.position = p + directionPoint(style.direction, 0, crossOffset(style, l, crossSize));
CGFloat spacingAfterBaseline = (style.direction == ASStackLayoutDirectionVertical && style.baselineRelativeArrangement) ? l.child.layoutInsets.bottom : 0;
p = p + directionPoint(style.direction, stackDimension(style.direction, l.layout.size) + l.child.spacingAfter + spacingAfterBaseline, 0);
p = p + directionPoint(style.direction, stackDimension(style.direction, l.layout.size) + l.child.spacingAfter, 0);
return l.layout;
});
return {stackedChildren, crossSize};

View File

@@ -0,0 +1,26 @@
/*
* 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.
*
*/
#import "ASLayout.h"
#import "ASDimension.h"
#import "ASStackTextLayoutSpec.h"
#import "ASStackPositionedLayout.h"
struct ASStackTextPositionedLayout {
const std::vector<ASLayout *> sublayouts;
const CGFloat crossSize;
const CGFloat ascender;
const CGFloat descender;
/** Given a positioned layout, computes each child position using baseline alignment. */
static ASStackTextPositionedLayout compute(const ASStackPositionedLayout &positionedLayout,
const ASStackTextLayoutSpecStyle &textStyle,
const ASSizeRange &constrainedSize);
};

View File

@@ -0,0 +1,118 @@
/*
* 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.
*
*/
#import "ASStackTextPositionedLayout.h"
#import "ASLayoutSpecUtilities.h"
#import "ASStackLayoutSpecUtilities.h"
static CGFloat baselineForItem(const ASStackTextLayoutSpecStyle &style,
const ASLayout *layout) {
__weak id<ASStackTextLayoutable> textChild = (id<ASStackTextLayoutable>) layout.layoutableObject;
switch (style.baselineAlignment) {
case ASStackTextLayoutBaselineAlignmentNone:
return 0;
case ASStackTextLayoutBaselineAlignmentFirst:
return textChild.ascender;
case ASStackTextLayoutBaselineAlignmentLast:
return layout.size.height + textChild.descender;
}
}
static CGFloat baselineOffset(const ASStackTextLayoutSpecStyle &style,
const ASLayout *l,
const CGFloat maxAscender,
const CGFloat maxBaseline)
{
if (style.stackLayoutStyle.direction == ASStackLayoutDirectionHorizontal) {
__weak id<ASStackTextLayoutable> textChild = (id<ASStackTextLayoutable>)l.layoutableObject;
switch (style.baselineAlignment) {
case ASStackTextLayoutBaselineAlignmentFirst:
return maxAscender - textChild.ascender;
case ASStackTextLayoutBaselineAlignmentLast:
return maxBaseline + textChild.descender - textChild.ascender;
case ASStackTextLayoutBaselineAlignmentNone:
return 0;
}
}
return 0;
}
static CGFloat maxDimensionForLayout(const ASLayout *l,
const ASStackLayoutSpecStyle &style)
{
CGFloat maxDimension = crossDimension(style.direction, l.size);
style.direction == ASStackLayoutDirectionVertical ? maxDimension += l.position.x : maxDimension += l.position.y;
return maxDimension;
}
ASStackTextPositionedLayout ASStackTextPositionedLayout::compute(const ASStackPositionedLayout &positionedLayout,
const ASStackTextLayoutSpecStyle &textStyle,
const ASSizeRange &constrainedSize)
{
ASStackLayoutSpecStyle stackStyle = textStyle.stackLayoutStyle;
// Get the largest distance from the top of the stack to a baseline. This is the baseline we will align to.
const auto baselineIt = std::max_element(positionedLayout.sublayouts.begin(), positionedLayout.sublayouts.end(), [&](const ASLayout *a, const ASLayout *b){
return baselineForItem(textStyle, a) < baselineForItem(textStyle, b);
});
const CGFloat maxBaseline = baselineIt == positionedLayout.sublayouts.end() ? 0 : baselineForItem(textStyle, *baselineIt);
// find the largest ascender for all children. This value will be used in offset computation as well as sent back to the ASStackTextLayoutSpec as its ascender.
const auto ascenderIt = std::max_element(positionedLayout.sublayouts.begin(), positionedLayout.sublayouts.end(), [&](const ASLayout *a, const ASLayout *b){
return ((id<ASStackTextLayoutable>)a.layoutableObject).ascender < ((id<ASStackTextLayoutable>)b.layoutableObject).ascender;
});
const CGFloat maxAscender = baselineIt == positionedLayout.sublayouts.end() ? 0 : ((id<ASStackTextLayoutable>)(*ascenderIt).layoutableObject).ascender;
CGPoint p = CGPointZero;
BOOL first = YES;
auto stackedChildren = AS::map(positionedLayout.sublayouts, [&](ASLayout *l) -> ASLayout *{
__weak id<ASStackTextLayoutable> textChild = (id<ASStackTextLayoutable>) l.layoutableObject;
p = p + directionPoint(stackStyle.direction, textChild.spacingBefore, 0);
if (first) {
// if this is the first item use the previously computed start point
p = l.position;
} else {
// otherwise add the stack spacing
p = p + directionPoint(stackStyle.direction, stackStyle.spacing, 0);
}
first = NO;
// add the baseline offset. baselineOffset is only valid in the horizontal direction, so we always add to y
l.position = p + CGPointMake(0, baselineOffset(textStyle, l, maxAscender, maxBaseline));
// If we are a vertical stack, add the minDescender (it is negative) to the spacing after. This will alter the stack spacing to be on baselines instead of bounding boxes
CGFloat spacingAfterBaseline = (stackStyle.direction == ASStackLayoutDirectionVertical) ? textChild.descender : 0;
p = p + directionPoint(stackStyle.direction, stackDimension(stackStyle.direction, l.size) + textChild.spacingAfter + spacingAfterBaseline, 0);
return l;
});
// The cross dimension is the max of the childrens' cross dimensions (clamped to our constraint below).
const auto it = std::max_element(stackedChildren.begin(), stackedChildren.end(),
[&](ASLayout *a, ASLayout *b) {
return maxDimensionForLayout(a, stackStyle) < maxDimensionForLayout(b, stackStyle);
});
const auto largestChildCrossSize = it == stackedChildren.end() ? 0 : maxDimensionForLayout(*it, stackStyle);
const auto minCrossSize = crossDimension(stackStyle.direction, constrainedSize.min);
const auto maxCrossSize = crossDimension(stackStyle.direction, constrainedSize.max);
const CGFloat crossSize = MIN(MAX(minCrossSize, largestChildCrossSize), maxCrossSize);
// find the child with the largest height. Use that child's descender as the descender to pass back to the ASStackTextLayoutSpec.
const auto descenderIt = std::max_element(stackedChildren.begin(), stackedChildren.end(), [&](const ASLayout *a, const ASLayout *b){
return a.position.y + a.size.height < b.position.y + b.size.height;
});
const CGFloat minDescender = descenderIt == stackedChildren.end() ? 0 : ((id<ASStackTextLayoutable>)(*descenderIt).layoutableObject).descender;
return {stackedChildren, crossSize, maxAscender, minDescender};
}