[ui] make line spacing in label component configurable

gradle.properties

@@ -7,7 +7,7 @@ minecraft_version=1.20.3
 yarn_mappings=1.20.3+build.1
 loader_version=0.15.0
 # Mod Properties
-mod_version=0.12.3
+mod_version=0.12.4
 maven_group=io.wispforest
 archives_base_name=owo-lib
 # Dependencies

owo-ui.xsd

@@ -468,6 +468,7 @@
                     <xs:element type="owo-ui-text" name="text" minOccurs="0"/>
                     <xs:element type="xs:unsignedInt" name="max-width" minOccurs="0"/>
                     <xs:element type="xs:unsignedInt" name="line-height" minOccurs="0"/>
+                    <xs:element type="xs:unsignedInt" name="line-spacing" minOccurs="0"/>
                     <xs:element type="owo-ui-color" name="color" minOccurs="0"/>
                     <xs:element type="xs:boolean" name="shadow" minOccurs="0"/>
                     <xs:element type="owo-ui-vertical-alignment" name="vertical-text-alignment" minOccurs="0"/>

src/main/java/io/wispforest/owo/ui/component/LabelComponent.java

@@ -29,6 +29,7 @@ public class LabelComponent extends BaseComponent {
 
     protected final AnimatableProperty<Color> color = AnimatableProperty.of(Color.WHITE);
     protected final Observable<Integer> lineHeight = Observable.of(this.textRenderer.fontHeight);
+    protected final Observable<Integer> lineSpacing = Observable.of(2);
     protected boolean shadow;
     protected int maxWidth;
 
@@ -41,7 +42,7 @@ protected LabelComponent(Text text) {
         this.shadow = false;
         this.maxWidth = Integer.MAX_VALUE;
 
-        this.lineHeight.observe($ -> this.notifyParentIfMounted());
+        Observable.observeAll(this::notifyParentIfMounted, this.lineHeight, this.lineSpacing);
     }
 
     public LabelComponent text(Text text) {
@@ -109,6 +110,15 @@ public int lineHeight() {
         return this.lineHeight.get();
     }
 
+    public LabelComponent lineSpacing(int lineSpacing) {
+        this.lineSpacing.set(lineSpacing);
+        return this;
+    }
+
+    public int lineSpacing() {
+        return this.lineSpacing.get();
+    }
+
     public LabelComponent textClickHandler(Function<Style, Boolean> textClickHandler) {
         this.textClickHandler = textClickHandler;
         return this;
@@ -137,7 +147,7 @@ protected int determineHorizontalContentSize(Sizing sizing) {
     @Override
     protected int determineVerticalContentSize(Sizing sizing) {
         this.wrapLines();
-        return (this.wrappedText.size() * (this.lineHeight() + 2)) - 2;
+        return this.textHeight();
     }
 
     @Override
@@ -150,6 +160,10 @@ private void wrapLines() {
         this.wrappedText = this.textRenderer.wrapLines(this.text, this.horizontalSizing.get().isContent() ? this.maxWidth : this.width);
     }
 
+    protected int textHeight() {
+        return (this.wrappedText.size() * (this.lineHeight() + this.lineSpacing())) - this.lineSpacing();
+    }
+
     @Override
     public void update(float delta, int mouseX, int mouseY) {
         super.update(delta, mouseX, mouseY);
@@ -174,8 +188,8 @@ public void draw(OwoUIDrawContext context, int mouseX, int mouseY, float partial
         }
 
         switch (this.verticalTextAlignment) {
-            case CENTER -> y += (this.height - ((this.wrappedText.size() * (this.lineHeight() + 2)) - 2)) / 2;
-            case BOTTOM -> y += this.height - ((this.wrappedText.size() * (this.lineHeight() + 2)) - 2);
+            case CENTER -> y += (this.height - (this.textHeight())) / 2;
+            case BOTTOM -> y += this.height - (this.textHeight());
         }
 
         final int lambdaX = x;
@@ -191,7 +205,7 @@ public void draw(OwoUIDrawContext context, int mouseX, int mouseY, float partial
                     case RIGHT -> renderX += this.width - this.textRenderer.getWidth(renderText);
                 }
 
-                int renderY = lambdaY + i * (this.lineHeight() + 2);
+                int renderY = lambdaY + i * (this.lineHeight() + this.lineSpacing());
                 renderY += this.lineHeight() - this.textRenderer.fontHeight;
 
                 context.drawText(this.textRenderer, renderText, renderX, renderY, this.color.get().argb(), this.shadow);
@@ -219,7 +233,7 @@ public boolean onMouseDown(double mouseX, double mouseY, int button) {
     }
 
     protected Style styleAt(int mouseX, int mouseY) {
-        return this.textRenderer.getTextHandler().getStyleAt(this.wrappedText.get(Math.min(mouseY / (this.lineHeight() + 2), this.wrappedText.size() - 1)), mouseX);
+        return this.textRenderer.getTextHandler().getStyleAt(this.wrappedText.get(Math.min(mouseY / (this.lineHeight() + this.lineSpacing()), this.wrappedText.size() - 1)), mouseX);
     }
 
     @Override
@@ -230,6 +244,7 @@ public void parseProperties(UIModel model, Element element, Map<String, Element>
         UIParsing.apply(children, "color", Color::parse, this::color);
         UIParsing.apply(children, "shadow", UIParsing::parseBool, this::shadow);
         UIParsing.apply(children, "line-height", UIParsing::parseUnsignedInt, this::lineHeight);
+        UIParsing.apply(children, "line-spacing", UIParsing::parseUnsignedInt, this::lineSpacing);
 
         UIParsing.apply(children, "vertical-text-alignment", VerticalAlignment::parse, this::verticalTextAlignment);
         UIParsing.apply(children, "horizontal-text-alignment", HorizontalAlignment::parse, this::horizontalTextAlignment);

src/testmod/java/io/wispforest/uwu/client/ComponentTestScreen.java

@@ -118,21 +118,22 @@ protected void init() {
         );
 
         rootComponent.child(Containers.verticalFlow(Sizing.content(), Sizing.content())
-                .child(Components.label(Text.literal("A profound vertical Flow Layout, as well as a really long text to demonstrate wrapping").styled(style -> style.withFont(MinecraftClient.UNICODE_FONT_ID))
+                .child(Components.label(Text.literal("A profound vertical Flow Layout, as well as a leally long text to demonstrate wrapping").styled(style -> style.withFont(MinecraftClient.UNICODE_FONT_ID))
                                 .styled(style -> {
                                     return style.withClickEvent(new ClickEvent(ClickEvent.Action.COPY_TO_CLIPBOARD, "yes"))
                                             .withHoverEvent(new HoverEvent(HoverEvent.Action.SHOW_ITEM, new HoverEvent.ItemStackContent(Items.SCULK_SHRIEKER.getDefaultStack())));
                                 }))
                         .shadow(true)
                         .lineHeight(7)
+                        .lineSpacing(0)
                         .maxWidth(100)
                         .margins(Insets.horizontal(15)))
         );
 
         final var buttonPanel = Containers.horizontalFlow(Sizing.content(), Sizing.content())
-                .child(Components.label(Text.literal("A horizontal Flow").append(Text.literal("Layout")
+                .child(Components.label(Text.literal("AAAAAAAAAAAAAAAAAAA").append(Text.literal("Layout")
                                 .styled(style -> style.withHoverEvent(new HoverEvent(HoverEvent.Action.SHOW_ITEM, new HoverEvent.ItemStackContent(Items.SCULK_SHRIEKER.getDefaultStack())))))
-                        .append(Text.literal("\nthat's a tooltip?"))).margins(Insets.of(5)))
+                        .append(Text.literal("\nAAAAAAAAAAAAAAA"))).margins(Insets.of(5)))
                 .child(Components.button(Text.of("⇄"), button -> this.clearAndInit()).sizing(Sizing.fixed(20)))
                 .child(Components.button(Text.of("X"), button -> this.close()).sizing(Sizing.fixed(20)))
                 .positioning(Positioning.relative(100, 0))