Intrinsic height

[Håvard Fossli]

Hi everyone

Initial prototyping with cassowary has been really awesome! 

As I've said earlier we are looking into implementing our own infrastructure around cassowary for iOS and android.

On a side note: We will do text measurements and drawing asynchronously if necessary. We are also pondering about solving the values asynchronously. 

One of the obvious problems we've come across so far is multiline text and its "intrinsic" height (I borrowed this terminology from the GSS project).

Link to fullsize gif

In the image above I have for the sake of the exercise created 4 different labels for the text (date, title, preamble and body text). I am aware that I could have it all in one attributed string with some tradeoffs. 

Alternative 1

Add a constraint between a labels height and its intrinsic height (its ideal height given its current width)

    solver.add_stays(rhea::variable_set({
        titleLabelIntrinsicHeight 
    }));

 
    solver.add_constraints({
        titleLabelHeight == titleLabelIntrinsicHeight,
    });

Update the `titleLabelIntrinsicHeight` variables value after a normal solve

- (void)recognizerUpdated:(UIPanGestureRecognizer *)recognizer
{ 
    // User drags the "widthAdjuster" to increase/decrease the width of the container/scrollview

    CGPoint translation = [recognizer translationInView:recognizer.view.superview];

    solver.suggest({

        { widthAdjusterLeft, widthAdjusterLeft.value() + translation.x },

    });

    solver.suggest({

        { titleLabelIntrinsicHeight, [titleLabel calculateIntrinsicHeight] },

    });

}

That means the solver first have to solve once with old intrinsichHeight value to then solve once again after the updated intrinsicHeight has been set due to width-changes. 

Alternative 2

Add no constraints for the titleLabelHeight. Instead just add a titleLabelHeight as a stay variable and suggest edits.

 

    titleLabelHeight.set_value([titleLabel calculateIntrinsicHeight]);

    solver.add_stays(rhea::variable_set({
        titleLabelHeight 
    }));

- (void)recognizerUpdated:(UIPanGestureRecognizer *)recognizer
{
    // User drags the "widthAdjuster" to increase/decrease the width of the container/scrollview
    CGPoint translation = [recognizer translationInView:recognizer.view.superview];

    solver.suggest({

        { widthAdjusterLeft, widthAdjusterLeft.value() + translation.x },

    });

    solver.suggest({

        { titleLabelHeight, [titleLabel calculateIntrinsicHeight] },

    });    

}

Alternative 3

Add and remove the constraints for the titleLabelHeight every time the intrinsic height changes.

    titleLabelHeightConstraint = (titleLabelHeight == [titleLabel calculateIntrinsicHeight]);
    
    solver.add_constraints({
        titleLabelHeightConstraint,

    });

- (void)recognizerUpdated:(UIPanGestureRecognizer *)recognizer
{ 
    // User drags the "widthAdjuster" to increase/decrease the width of the container/scrollview
    CGPoint translation = [recognizer translationInView:recognizer.view.superview];

    solver.remove_constraint(titleLabelHeightConstraint);

  
    solver.suggest({
        { widthAdjusterLeft, widthAdjusterLeft.value() + translation.x },
    });

    titleLabelHeightConstraint = (titleLabelHeight == [titleLabel calculateIntrinsicHeight]);
    
    solver.add_constraints({
        titleLabelHeightConstraint,

    });
}

[Håvard Fossli]

Let me know if there are other alternatives I haven't looked at. 

Ken, it would be awesome to hear how you solved this!