Repository navigation
Flutter UI Guides are spaced when custom line height is used #1902
Description
Flutter UI Guides have a gap between lines when I use a custom line height. Not sure if this is a bug or intended behaviour, but I wish it was a continuous line...
My settings:
"dart.previewFlutterUiGuides": true,
"dart.previewFlutterUiGuidesCustomTracking": true,
I'm on VS Code 1.36.1, Dart-Code extension 3.3.0, Ubuntu 18.04 GNOME.
Custom line height (35):
Default line height (0):
Activity
DanTup commentedon Aug 4, 2019
This is unfortunately a known limitation because VS Code doesn't give us a clean way to draw arbitrary lines (so we have to use ascii characters which are the same height as a line).
I've opened microsoft/vscode#73780 to start a discussion about a better API for things like this, but there hasn't been any response to it so far.
a-eid commentedon Dec 26, 2019
having the same issue, had to remove the custom line height from my vscode settings for dart.
robertpiosik commentedon Sep 29, 2021
@DanTup Can't we apply transform scaleY on vertical lines?
DanTup commentedon Sep 30, 2021
@robertpiosik the lines are rendered from Ascii characters, to changing the size will push the lines further out when there are multiple in the same line (I'm also not certain we can change the scale - we have a very limited set of CSS we can set).
Perhaps there are other ascii characters that may work better. They're set here:
Dart-Code/src/extension/decorations/flutter_ui_guides_decorations.ts
Line 7 in d7555d8
I'm open to PRs for small modifications as long as they don't seem to make any cases worse, but generally this feature isn't being developed until there are better APIs as there are many issues that aren't really feasible to solve with the current mechanism.
DanTup commentedon Sep 30, 2021
Oops, I thought this issue was #3585 so my response was thinking about scaling in X (making the lines wider).
Although, generally the response is the same. I don't think we can scale Y using CSS, and if we do make it taller (eg. bigger font size) it would also upset the width of spaces between lines. I am open to PRs if anyone can come up with improvements though - the breaks in lines do very much bug me, but I'd previously spent some time trying various fixes with no luck :-(
robertpiosik commentedon Sep 30, 2021
Such hack does the job with a default line height:
DanTup commentedon Sep 30, 2021
@robertpiosik how are you adding that transform to the extension code? We have limited CSS capabilities, we can't just add arbitrary CSS:
Dart-Code/src/extension/decorations/flutter_ui_guides_decorations.ts
Line 113 in d7555d8
robertpiosik commentedon Sep 30, 2021
@DanTup Didn't know about these limited CSS capabilities :(
DanTup commentedon Sep 30, 2021
Ah - I thought you'd found something I'd missed. Yeah, it kinda sucks.
Please do add 👍 's to microsoft/vscode#73780 if you haven't already. A good API from VS Code would make a huge difference here!