search

matt-curtis / Fluid-for-Sketch

[Sketch Plugin] Sketch-flavored Auto Layout-like Constraints
2.38k stars 73 forks source link

Auto-sizing text layers is disabled #111

Closed matt-curtis closed 7 years ago

matt-curtis commented 7 years ago

The more recent versions of Sketch have changed the backing implementation of text layers (MSTextLayer), making it impossible/more difficult to get the bounding size of text within a text layer. This feature has been disabled until an alternative can be found.

andrejilderda commented 7 years ago

Hi Matt,

I'm not sure if I understand the problem correctly, but is layer.adjustFrameToFit(); in the Sketch Javascript API of any help? If I trigger that function on the textlayers that were resized by Fluid the bounding boxes get resized properly.

matt-curtis commented 7 years ago

@ajilderda That's great - looks like it solves the problem! Putting this into place.

andrejilderda commented 7 years ago

Nice! :tada: Looking forward to the new release. Thanks Matt!

matt-curtis commented 7 years ago

@ajilderda Trying to get this to work now on a fixed text layer and it doesn't seem to have any affect. Any idea what I'm doing wrong?

andrejilderda commented 7 years ago

No idea. I assume you loop through the layers and use adjustFrameToFit(); on them? That's how I tested it. I can provide you an example if you need one. I also see there's adjustToFit() which does exactly the same, but it requires you to import the Sketch api.

matt-curtis commented 7 years ago

Weird. I have a document where I've created a fixed-width text layer and am running this in the console with no affect. I guess it doesn't work any more?

const textLayer = context.selection[0];

textLayer.adjustFrameToFit();
andrejilderda commented 7 years ago

The code you provided works here. Here's how to reproduce it:

  1. Open a new document and create an artboard
  2. Create a textlayer with multiple lines of lorem ipsum text over the full width of the artboard.
  3. Set constraints to left 200 and right 200 relative to the canvas.
  4. Update layout. The bounding box is smaller than the actual text.
  5. While having the textbox selected go to Plugins › Custom plugin and run the script you provided: 
    
const textLayer = context.selection[0];

textLayer.adjustFrameToFit();


6. You'll see that the bounding box is adjusted to the height of the text.

Does that help?
matt-curtis commented 7 years ago

Thank you for taking the time to write that up. Oddly enough, even following your instructions exactly it's not working for me. What version of Sketch are you running?

andrejilderda commented 7 years ago

No problem! That's indeed odd. I'm using Sketch 43.2 with fluid 1.7.4.

matt-curtis commented 7 years ago

Fixed using macOS TextKit APIs.