XD 34 API Updates

XD 34 is out today, you can read about the new features here.

Here are the API changes:

XD 34 adds Auto Height Text which dynamically adjusts its height based on the context of the text layer while its width remains fixed. To support Auto Height Text we have added a new text.layoutBox API that will replace text.areaBox.

text.layoutBox {type:string, ?width:number, ?height:number} details

The text type and any applicable width and height value for the text. Text type will be one of:

  • Text.POINT (for point text also referred as auto width)
  • Text.FIXED_HEIGHT (for area text also referred as fixed size)
  • Text.AUTO_HEIGHT (for the new auto height text)

Width is a number between 0-999999 and is ignored/omitted for text.Point.

Height is a number between 0-999999 and is ignored/omitted for text.Point and text.AUTO-HEIGHT

Changing POINT text to FIXED_HEIGHT or AUTO_HEIGHT text or vice versa will change the origin / anchor point of the text, thus changing its localBounds, but it will also automatically change the node’s transform so its globalBounds and boundsInParent origins remain unchanged.

Changing FIXED_HEIGHT or AUTO_HEIGHT text to POINT text will automatically insert hard line break ("\n") into the text to match the previous line wrapping’s appearance exactly.

Changing from FIXED_HEIGHT to AUTO_HEIGHT text will automatically change the height of the bounds to match the height of the total text (can be a no-op).

Changing from AUTO_HEIGHT to FIXED_HEIGHT text will not change the bounds, transform or origin (no-op).

How Auto Height Text affects Text.areaBox and text.clippedByArea APIs

Text.areaBox and text.clippedByArea will return the same values for Auto Height Text as they do for Point Text.

  • Text.areaBox returns null as it does for point text
  • Text.clippedByArea returns false as it does for point text
2 Likes