[ASLayoutSpec] How enforce maximum width (or height) {answer: ASStaticLayoutSpec}

[garrettmoon]

From @eanagel on February 23, 2016 20:31

Also published in StackOverflow

I'm trying to enforce a maximum height for an element and I can't figure out exactly which LayoutSpec can help me do that. It seems like the sizeRange property is what I would expect to work but that appears to work only with ASStaticLayoutSpec, which seems like more of a last resort option. (This element I need to constrain is contained in an ASInsetLayoutSpec in my case.)

Here's my attempt:

        CGSize max = CGSizeMake(constrainedSize.max.width, [self.class maxSinglePhotoHeight]);
        _singlePhotoNode.sizeRange = ASRelativeSizeRangeMake(ASRelativeSizeMakeWithCGSize(constrainedSize.min), ASRelativeSizeMakeWithCGSize(max));
        ASInsetLayoutSpec *inset = [ASInsetLayoutSpec insetLayoutSpecWithInsets:PHOTO_INSET child:_singlePhotoNode];

Copied from original issue: facebookarchive/AsyncDisplayKit#1264

[garrettmoon]

From @eanagel on February 23, 2016 20:31

@appleguy Any ideas?

[garrettmoon]

From @nguyenhuy on February 24, 2016 5:44

Yes, ASStaticLayoutSpec is what you want in this case. sizeRange is considered/used by static spec only, so you need to wrap your _singlePhotoNode inside one. This code snippet should work:

  ASRelativeDimension fillParent = ASRelativeDimensionMakeWithPercent(1.0f);
  _singlePhotoNode.sizeRange = ASRelativeSizeRangeMake(
    ASRelativeSizeMake(fillParent, fillParent), // Fill whatever min constrained size passed to it
    ASRelativeSizeMake(fillParent, ASRelativeDimensionMakeWithPoints([self.class maxSinglePhotoHeight])) // Fill whatever max width passed to it, but have a different max height
  );
  ASStaticLayoutSpec *staticSpec = [ASStaticLayoutSpec staticLayoutSpecWithChildren:@[_singlePhotoNode]];
  ASInsetLayoutSpec *inset = [ASInsetLayoutSpec insetLayoutSpecWithInsets:PHOTO_INSET child:staticSpec];

[garrettmoon]

From @appleguy on February 24, 2016 6:5

@nguyenhuy thanks for jumping on this! @eanagel give it a try, post further questions any time - feel free to close this one out if it works for you. @RCacheaux, @lappp9 can you make sure the static spec is covered briefly in your tutorial?

[garrettmoon]

From @eanagel on February 24, 2016 7:52

Hmm @nguyenhuy I dropped in your example which makes sense to me but I'm hitting an Assert. A stack trace is below. Looks like when we pass a relative size for `.sizeRange.min' we ultimately end up making the min relative to the constrainedSize, which may likely be +Inf. This might be a bug, however I found passing a minimum of zero worked fine for my needs. Here's the version that ended up working for me:

        ASRelativeDimension fillParent = ASRelativeDimensionMakeWithPercent(1.0f);
        _singlePhotoNode.sizeRange =
            ASRelativeSizeRangeMake(ASRelativeSizeMakeWithCGSize(CGSizeZero),   // no minimum
                                    ASRelativeSizeMake(fillParent, ASRelativeDimensionMakeWithPoints([self.class maxSinglePhotoHeight])) // Fill whatever max width passed to it, but have a different max height
                                    );
        ASStaticLayoutSpec *staticSpec = [ASStaticLayoutSpec staticLayoutSpecWithChildren:@[_singlePhotoNode]];
        ASInsetLayoutSpec *inset = [ASInsetLayoutSpec insetLayoutSpecWithInsets:PHOTO_INSET child:staticSpec];

Stack Trace from original version:

 *** Assertion failure in ASSizeRange ASSizeRangeMake(CGSize, CGSize) ().../Layout/ASDimension.mm:70
(lldb) po min
(width = 295, height = +Inf)
(lldb) bt
* thread #1: tid = 0x14b8e, 0x000000010beb0dbb libobjc.A.dylib`objc_exception_throw, queue = 'com.apple.main-thread', stop reason = breakpoint 1.1
    frame #0: 0x000000010beb0dbb libobjc.A.dylib`objc_exception_throw
    frame #1: 0x000000010c437cca CoreFoundation`+[NSException raise:format:arguments:] + 106
    frame #2: 0x00000001089d15a2 Foundation`-[NSAssertionHandler handleFailureInFunction:file:lineNumber:description:] + 169
  * frame #3: 0x000000010492ba23 Messenger`ASSizeRangeMake(min=(width = 295, height = +Inf), max=(width = 295, height = 471)) + 1027 at ASDimension.mm:70
    frame #4: 0x00000001049aa501 Messenger`ASRelativeSizeRangeResolve(relativeSizeRange=ASRelativeSizeRange @ 0x00007fff5b4fc0c0, parentSize=(width = 295, height = +Inf)) + 321 at ASRelativeSize.mm:81
    frame #5: 0x00000001049bcde3 Messenger`-[ASStaticLayoutSpec measureWithSizeRange:](self=0x00007f86d2fe7050, _cmd="measureWithSizeRange:", constrainedSize=(min = (width = 0, height = 0), max = (width = 295, height = +Inf))) + 1587 at ASStaticLayoutSpec.mm:54
    frame #6: 0x0000000104977c27 Messenger`-[ASInsetLayoutSpec measureWithSizeRange:](self=0x00007f86d2fe7420, _cmd="measureWithSizeRange:", constrainedSize=(min = (width = 80, height = 0), max = (width = 375, height = +Inf))) + 1319 at ASInsetLayoutSpec.mm:91
    frame #7: 0x00000001049588c2 Messenger`-[ASDisplayNode calculateLayoutThatFits:](self=0x00007f86d2de1920, _cmd="calculateLayoutThatFits:", constrainedSize=(min = (width = 80, height = 0), max = (width = 375, height = +Inf))) + 370 at ASDisplayNode.mm:1855
    frame #8: 0x0000000104948412 Messenger`-[ASDisplayNode measureWithSizeRange:completion:](self=0x00007f86d2de1920, _cmd="measureWithSizeRange:completion:", constrainedSize=(min = (width = 80, height = 0), max = (width = 375, height = +Inf)), completion=(Messenger`__38-[ASDisplayNode measureWithSizeRange:]_block_invoke at ASDisplayNode.mm:610)) + 530 at ASDisplayNode.mm:630
    frame #9: 0x00000001049480a3 Messenger`-[ASDisplayNode measureWithSizeRange:](self=0x00007f86d2de1920, _cmd="measureWithSizeRange:", constrainedSize=(min = (width = 80, height = 0), max = (width = 375, height = +Inf))) + 195 at ASDisplayNode.mm:610
    frame #10: 0x0000000104977c27 Messenger`-[ASInsetLayoutSpec measureWithSizeRange:](self=0x00007f86d2fe3f80, _cmd="measureWithSizeRange:", constrainedSize=(min = (width = 0, height = 0), max = (width = 295, height = +Inf))) + 1319 at ASInsetLayoutSpec.mm:91
    frame #11: 0x00000001049b7740 Messenger`crossChildLayout(child=0x00007f86d2fe3f80, style=ASStackLayoutSpecStyle @ 0x00007fff5b4fd5a0, stackMin=0, stackMax=+Inf, crossMin=0, crossMax=295) + 432 at ASStackUnpositionedLayout.mm:33
    frame #12: 0x00000001049b7507 Messenger`layoutChildrenAlongUnconstrainedStackDimension(this=0x00007fff5b4fd8d8, child=0x00007f86d2fe3f80)::$_6::operator()(objc_object<ASLayoutable>) const + 887 at ASStackUnpositionedLayout.mm:312
    frame #13: 0x00000001049b708c Messenger`std::__1::vector<decltype(fp0(std::declval<std::__1::vector<id<ASLayoutable> __strong, std::__1::allocator<id<ASLayoutable> > >::value_type>())), id<ASLayoutable> __strong<std::__1::vector<id<ASLayoutable> __strong, std::__1::allocator<id<ASLayoutable> > >::value_type> > AS::map<std::__1::vector<id<ASLayoutable> __strong, std::__1::allocator<id<ASLayoutable> > >, layoutChildrenAlongUnconstrainedStackDimension(std::__1::allocator<id<ASLayoutable> > const&, ASStackLayoutSpecStyle const&, ASSizeRange const&, CGSize, bool)::$_6>(layoutChildrenAlongUnconstrainedStackDimension(std::__1::allocator<id<ASLayoutable> > const&, ASStackLayoutSpecStyle const&, ASSizeRange const&, CGSize, bool)::$_6 const&, layoutChildrenAlongUnconstrainedStackDimension(std::__1::allocator<id<ASLayoutable> > const&, ASStackLayoutSpecStyle const&, ASSizeRange const&, CGSize, bool)::$_6&&) [inlined] std::__1::__wrap_iter<ASStackUnpositionedItem*> std::__1::transform<std::__1::__wrap_iter<id<ASLayoutable> __strong const*>, std::__1::__wrap_iter<ASStackUnpositionedItem*>, layoutChildrenAlongUnconstrainedStackDimension(__first=__wrap_iter<const __strong id<ASLayoutable> *> @ 0x00007fff5b4fd920, __last=__wrap_iter<const __strong id<ASLayoutable> *> @ 0x00007fff5b4fd918, __result=__wrap_iter<ASStackUnpositionedItem *> @ 0x00007fff5b4fd910, __op=(anonymous class) @ 0x00007fff5b4fd8d8)::$_6>(std::__1::__wrap_iter<id<ASLayoutable> __strong const*>, layoutChildrenAlongUnconstrainedStackDimension(std::__1::vector<objc_object<ASLayoutable> __strong, std::__1::allocator<std::__1::__wrap_iter<ASStackUnpositionedItem*> > > const&, ASStackLayoutSpecStyle const&, ASSizeRange const&, CGSize, bool)::$_6, CGSize, layoutChildrenAlongUnconstrainedStackDimension(std::__1::vector<objc_object<ASLayoutable> __strong, std::__1::allocator<std::__1::__wrap_iter<ASStackUnpositionedItem*> > > const&, ASStackLayoutSpecStyle const&, ASSizeRange const&, CGSize, bool)::$_6) + 166 at algorithm:1960
    frame #14: 0x00000001049b6fe6 Messenger`std::__1::vector<decltype(fp0(std::declval<std::__1::vector<id<ASLayoutable> __strong, std::__1::allocator<id<ASLayoutable> > >::value_type>())), id<ASLayoutable> __strong<std::__1::vector<id<ASLayoutable> __strong, std::__1::allocator<id<ASLayoutable> > >::value_type> > AS::map<std::__1::vector<id<ASLayoutable> __strong, std::__1::allocator<id<ASLayoutable> > >, layoutChildrenAlongUnconstrainedStackDimension(iterable=size=3, func=0x00007fff5b4fd9f8)::$_6>(layoutChildrenAlongUnconstrainedStackDimension(std::__1::allocator<id<ASLayoutable> > const&, ASStackLayoutSpecStyle const&, ASSizeRange const&, CGSize, bool)::$_6 const&, layoutChildrenAlongUnconstrainedStackDimension(std::__1::allocator<id<ASLayoutable> > const&, ASStackLayoutSpecStyle const&, ASSizeRange const&, CGSize, bool)::$_6&&) + 758 at ASLayoutSpecUtilities.h:35
    frame #15: 0x00000001049b539f Messenger`layoutChildrenAlongUnconstrainedStackDimension(children=size=3, style=0x00007fff5b4fde68, sizeRange=0x00007fff5b4fe0c0, size=(width = 295, height = 3.4028234663852886E+38), useOptimizedFlexing=NO) + 223 at ASStackUnpositionedLayout.mm:302
    frame #16: 0x00000001049b4ec6 Messenger`ASStackUnpositionedLayout::compute(children=size=3, style=0x00007fff5b4fde68, sizeRange=0x00007fff5b4fe0c0) + 150 at ASStackUnpositionedLayout.mm:338
    frame #17: 0x00000001049b044d Messenger`-[ASStackLayoutSpec measureWithSizeRange:](self=0x00007f86d2fe4230, _cmd="measureWithSizeRange:", constrainedSize=(min = (width = 0, height = 0), max = (width = 295, height = 3.4028234663852886E+38))) + 1741 at ASStackLayoutSpec.mm:149
    frame #18: 0x0000000104977c27 Messenger`-[ASInsetLayoutSpec measureWithSizeRange:](self=0x00007f86d2fe4420, _cmd="measureWithSizeRange:", constrainedSize=(min = (width = 0, height = 0), max = (width = 375, height = 3.4028234663852886E+38))) + 1319 at ASInsetLayoutSpec.mm:91
    frame #19: 0x00000001048f7686 Messenger`-[ASCenterLayoutSpec measureWithSizeRange:](self=0x00007f86d2fe46d0, _cmd="measureWithSizeRange:", constrainedSize=(min = (width = 0, height = 0), max = (width = 375, height = 3.4028234663852886E+38))) + 454 at ASCenterLayoutSpec.mm:67
    frame #20: 0x00000001048ed156 Messenger`-[ASBackgroundLayoutSpec measureWithSizeRange:](self=0x00007f86d2fe4a60, _cmd="measureWithSizeRange:", constrainedSize=(min = (width = 0, height = 0), max = (width = 375, height = 3.4028234663852886E+38))) + 166 at ASBackgroundLayoutSpec.mm:46
    frame #21: 0x00000001049588c2 Messenger`-[ASDisplayNode calculateLayoutThatFits:](self=0x00007f86d2ddec10, _cmd="calculateLayoutThatFits:", constrainedSize=(min = (width = 0, height = 0), max = (width = 375, height = 3.4028234663852886E+38))) + 370 at ASDisplayNode.mm:1855
    frame #22: 0x0000000104948412 Messenger`-[ASDisplayNode measureWithSizeRange:completion:](self=0x00007f86d2ddec10, _cmd="measureWithSizeRange:completion:", constrainedSize=(min = (width = 0, height = 0), max = (width = 375, height = 3.4028234663852886E+38)), completion=(Messenger`__38-[ASDisplayNode measureWithSizeRange:]_block_invoke at ASDisplayNode.mm:610)) + 530 at ASDisplayNode.mm:630
    frame #23: 0x00000001049480a3 Messenger`-[ASDisplayNode measureWithSizeRange:](self=0x00007f86d2ddec10, _cmd="measureWithSizeRange:", constrainedSize=(min = (width = 0, height = 0), max = (width = 375, height = 3.4028234663852886E+38))) + 195 at ASDisplayNode.mm:610
    frame #24: 0x0000000104947f3e Messenger`-[ASDisplayNode measure:](self=0x00007f86d2ddec10, _cmd="measure:", constrainedSize=(width = 375, height = 3.4028234663852886E+38)) + 174 at ASDisplayNode.mm:605
    frame #25: 0x0000000104816175 Messenger`-[ConversationCellNode calculateSizeThatFits:](self=0x00007f86d2de20d0, _cmd="calculateSizeThatFits:", constrainedSize=(width = 375, height = 3.4028234663852886E+38)) + 181 at ConversationCellNode.mm:107

[garrettmoon]

From @nguyenhuy on February 24, 2016 16:3

Interesting. To be honest, I thought that the min is relative to constrainedSize.min (instead of constrainedSize.max)...

[garrettmoon]

From @eanagel on February 24, 2016 18:25

@nguyenhuy Seems like it should be, but I don't have a deep enough understanding of ASLayout to make that call. Who can make a definitive "it's a bug or a feature" call? @appleguy?

[garrettmoon]

From @NikoSahradyan on September 9, 2016 10:37

I'm trying to do the same with ASNetwrokImageNode. But when I'm setting sizeRange I got an error "layoutSize is invalid and unsafe to provide to Core Animation".