"wraps" property on TextLayer doesn't work properly if text is changed after size is set

[nefaurk]

Reproduce with the following code on an iPhone 5s and you'll notice that the text doesn't wrap:

let textLayer = new TextLayer() textLayer.wraps = true textLayer.fontName = "Avenir" textLayer.fontSize = 24 textLayer.textColor = Color.black textLayer.origin = new Point({x: 0, y: 0}) textLayer.width = Layer.root.width textLayer.text = "How viruses can affect DNA and other things" textLayer.backgroundColor = Color.yellow

Result:

[andymatuschak]

:( :( But whyyyy

On Jun 15, 2015, at 1:33 PM, Nefaur Khandker notifications@github.com wrote:

Reproduce with the following code on an iPhone 5s and you'll notice that the text doesn't wrap:

let textLayer = new TextLayer() textLayer.wraps = true textLayer.fontName = "Avenir" textLayer.fontSize = 24 textLayer.textColor = Color.black textLayer.origin = new Point({x: 0, y: 0}) textLayer.width = Layer.root.width textLayer.text = "How viruses can affect DNA and other things" textLayer.backgroundColor = Color.yellow

Result: https://cloud.githubusercontent.com/assets/68014/8170086/2f0a8f52-137c-11e5-8597-9d563ad55f6b.png — Reply to this email directly or view it on GitHub https://github.com/Khan/Prototope/issues/93.

[saniul]

In this particular case, setting the text makes the layer grow rightwards in its width...

But there’s a larger issue with prototope’s handling of text layers, which I suspect stems from us relying on UIKit’s sizeToFit to do the heavy lifting. If you want to start crying, try this:

1. Just paste the snippet and see what it does
2. See what happens when A is uncommented (B stays commented)
3. See what happens when B is uncommented

let textLayer = new TextLayer()
textLayer.text = "blah"
textLayer.wraps = true
textLayer.fontName = "Avenir"
textLayer.fontSize = 24
textLayer.textColor = Color.black
//A:
//textLayer.width = Layer.root.width
//textLayer.origin = new Point({x: 0, y: 0})
textLayer.text = "How viruses can affect DNA and other things"
//B:
//textLayer.width = Layer.root.width
//textLayer.origin = new Point({x: 0, y: 0})
textLayer.backgroundColor = Color.yellow

• notice how just having the text be set to “blah” initially changes the behaviour of the damn thing 😿

[saniul]

@nefaurk for now, my advice would be – make sure you fix up the width and then the origin of the text layer after setting the text:

let textLayer = new TextLayer()
textLayer.wraps = true
textLayer.fontName = "Avenir"
textLayer.fontSize = 24
textLayer.textColor = Color.black
textLayer.text = "How viruses can affect DNA and other things"
textLayer.width = Layer.root.width
textLayer.origin = new Point({x: 0, y: 0})
textLayer.backgroundColor = Color.yellow

[nefaurk]

Thanks for the analysis, @saniul!

[andymatuschak]

Blech.