Open Radar

 
Summary:
Setting an alignment rectangle in the asset catalog does not work correctly in Storyboard.

There's no alignment that occurs with the new alignment rectangle, everything is still based on the image bounds.

Alignment insets do not render in storyboard, and labels centered to the image are not in the correct places.



Steps to Reproduce:
1. Add an image that has a visual flair.
2. Add inset to account for bottom flair (-3.5 points for Tip Callout from a 7 point tall bottom arrow)
3. Add image to the canvas 
4. Try to align content to the image in the Storyboard canvas


Expected Results:
The canvas should shift content using the alignment rectangles set in Asset Catalog


Actual Results:
The preview shows the incorrect placement of the images affected by alignment rectangle adjustments.


Version:
Xcode 10.1

Notes:
This makes Xcode a hard design tool, since the visuals of the canvas do not match the visuals of the run-time app. 

When I try to create a "tip callout" with a bottom arrow, I have to create a visual design that doesn't match the output because alignment rectangles do not render correctly in Storyboard.

Workaround: Don't use alignment rectangles in storyboard, instead shift the content's alignment using offsets added to constraints, which do appear in Storyboard canvas and preview.

Related to: #27904825

https://useyourloaf.com/blog/auto-layout-and-alignment-rectangles/