UI Alignment

lambda-client · Avanatiker · Mar 12, 2025 · Aug 8, 2024 · Aug 10, 2024 · Aug 20, 2024
commit 52483d39be7713762565d3d21ff58abb3a2e5347
diff --git a/common/src/main/kotlin/com/lambda/module/modules/client/NewCGui.kt b/common/src/main/kotlin/com/lambda/module/modules/client/NewCGui.kt
@@ -1,44 +1,26 @@
 package com.lambda.module.modules.client
 
-import com.lambda.Lambda.mc
 import com.lambda.module.Module
 import com.lambda.module.tag.ModuleTag
 import com.lambda.newgui.LambdaScreen.Companion.gui
 import com.lambda.newgui.LambdaScreen.Companion.toScreen
-import com.lambda.newgui.component.HAlign
-import com.lambda.newgui.component.core.TextField.Companion.textField
+import com.lambda.newgui.component.window.Window
 import com.lambda.newgui.component.window.Window.Companion.window
 import com.lambda.util.math.Vec2d
-import java.awt.Color
 
 object NewCGui : Module(
     name = "NewCGui",
     description = "ggs",
     defaultTags = setOf(ModuleTag.CLIENT)
 ) {
     val titleBarHeight by setting("Title Bar Height", 4.0, 0.0..10.0, 0.1)
+    val padding by setting("Padding", 2.0, 0.0..6.0, 0.1)
 
     private val clickGuiLayout =
         gui {
             window(position = Vec2d.ONE * 20.0, title = "Test window") {
-                titleBar.textField.apply {
-                    text = "Overriding the title"
+                content.window(Vec2d.ONE * 5.0, Vec2d.ONE * 60.0) {
 
-                    // Making it align the left corner and have 3px offset from the left side
-                    alignment = HAlign.LEFT
-                    offset = 3.0
-                }
-
-                textField("Text field over the window")
-
-                content.textField("Text field inside of the content region") {
-                    alignment = HAlign.CENTER
-                    scale = 0.5
-
-                    onTick {
-                        // Dynamically updating states
-                        color = if (mc.player?.isDead == true) Color.RED else Color.GREEN
-                    }
                 }
             }
         }

diff --git a/common/src/main/kotlin/com/lambda/newgui/LambdaScreen.kt b/common/src/main/kotlin/com/lambda/newgui/LambdaScreen.kt
@@ -7,6 +7,8 @@ import com.lambda.event.events.TickEvent
 import com.lambda.event.listener.SafeListener.Companion.listener
 import com.lambda.graphics.RenderMain
 import com.lambda.gui.api.GuiEvent
+import com.lambda.newgui.component.layout.Layout
+import com.lambda.newgui.component.core.UIBuilder
 import com.lambda.util.KeyCode
 import com.lambda.util.Mouse
 import com.lambda.util.Nameable
@@ -119,7 +121,7 @@ class LambdaScreen(
             Layout(owner = null, useBatching = false, batchChildren = true).apply {
                 var screenSize = Vec2d.ONE * 10000.0
 
-                rect {
+                rectUpdate {
                     Rect(Vec2d.ZERO, screenSize)
                 }
 

diff --git a/common/src/main/kotlin/com/lambda/newgui/component/core/IListEntry.kt b/common/src/main/kotlin/com/lambda/newgui/component/core/IListEntry.kt
@@ -0,0 +1,5 @@
+package com.lambda.newgui.component.core
+
+interface IListEntry {
+    var heightOffset: Double
+}
diff --git a/common/src/main/kotlin/com/lambda/newgui/component/core/TextField.kt b/common/src/main/kotlin/com/lambda/newgui/component/core/TextField.kt
@@ -1,10 +1,8 @@
 package com.lambda.newgui.component.core
 
-import com.lambda.newgui.Layout
-import com.lambda.newgui.UIBuilder
-import com.lambda.newgui.component.HAlign
+import com.lambda.newgui.component.VAlign
+import com.lambda.newgui.component.layout.Layout
 import com.lambda.util.math.MathUtils.lerp
-import com.lambda.util.math.Rect
 import com.lambda.util.math.Vec2d
 import java.awt.Color
 
@@ -14,34 +12,42 @@ class TextField(
     initialColor: Color = Color.WHITE,
     initialScale: Double = 1.0,
     initialShadow: Boolean = true,
-    initialAlignment: HAlign = HAlign.LEFT,
     initialOffset: Double = 0.0,
 ) : Layout(owner, true, true) {
     var text = initialText
     var color = initialColor
     var scale = initialScale
     var shadow = initialShadow
 
-    var alignment = initialAlignment
     var offset = initialOffset
 
     // Let user interact through the text
     override val interactionPassthrough = true
 
     init {
-        rect {
-            // Completely fill parent component by default
-            Rect(Vec2d.ZERO, owner.rect.size)
-        }
+        verticalAlignment = VAlign.CENTER
+        rectUpdate(owner::rect)
 
         onRender {
+            val w = font.getWidth(text, scale)
+            val h = font.getHeight(scale)
+
             val x = lerp(
                 rect.left,
-                rect.right - font.getWidth(text, scale),
-                alignment.multiplier
-            ) - offset * alignment.offset
+                rect.right - w,
+                horizontalAlignment.multiplier
+            ) - offset * horizontalAlignment.offset
+
+            val y = when {
+                verticalAlignment == VAlign.CENTER || rect.size.y <= h -> rect.center.y
+                else -> lerp(
+                    rect.top + h * 0.5,
+                    rect.bottom - h * 0.5,
+                    verticalAlignment.multiplier
+                )
+            }
 
-            font.build(text, Vec2d(x, rect.center.y), color, scale, shadow)
+            font.build(text, Vec2d(x, y), color, scale, shadow)
         }
     }
 
@@ -52,9 +58,8 @@ class TextField(
             color: Color = Color.WHITE,
             scale: Double = 1.0,
             shadow: Boolean = true,
-            alignment: HAlign = HAlign.LEFT,
             offset: Double = 0.0,
             block: TextField.() -> Unit = {}
-        ) = TextField(this, text, color, scale, shadow, alignment, offset).apply(children::add).apply(block)
+        ) = TextField(this, text, color, scale, shadow, offset).apply(children::add).apply(block)
     }
 }
diff --git a/common/src/main/kotlin/com/lambda/newgui/component/core/UIBuilder.kt b/common/src/main/kotlin/com/lambda/newgui/component/core/UIBuilder.kt
@@ -0,0 +1,4 @@
+package com.lambda.newgui.component.core
+
+@DslMarker
+annotation class UIBuilder
diff --git a/...c/main/kotlin/com/lambda/newgui/Layout.kt → .../lambda/newgui/component/layout/Layout.kt b/...c/main/kotlin/com/lambda/newgui/Layout.kt → .../lambda/newgui/component/layout/Layout.kt
@@ -1,11 +1,16 @@
-package com.lambda.newgui
+package com.lambda.newgui.component.layout
 
+import com.lambda.graphics.RenderMain
 import com.lambda.graphics.animation.AnimationTicker
 import com.lambda.graphics.gl.Scissor.scissor
 import com.lambda.gui.api.GuiEvent
 import com.lambda.gui.api.RenderLayer
+import com.lambda.newgui.component.HAlign
+import com.lambda.newgui.component.VAlign
+import com.lambda.newgui.component.core.UIBuilder
 import com.lambda.util.KeyCode
 import com.lambda.util.Mouse
+import com.lambda.util.math.MathUtils.coerceIn
 import com.lambda.util.math.Rect
 import com.lambda.util.math.Vec2d
 
@@ -30,12 +35,65 @@ import com.lambda.util.math.Vec2d
  * ```
  */
 open class Layout(
-    private val owner: Layout?,
+    val owner: Layout?,
     useBatching: Boolean,
-    private val batchChildren: Boolean
+    private val batchChildren: Boolean,
 ) {
-    // Rectangle of the component
-    open val rect: Rect get() = rectUpdate() + (owner?.rect?.leftTop ?: Vec2d.ZERO)
+    /**
+     * The rectangle of this component
+     */
+    val rect get() = Rect.basedOn(position, size)
+
+    /**
+     * The size of this component
+     */
+    open var size = Vec2d.ZERO
+
+    /**
+     * Horizontal alignment
+     */
+    var horizontalAlignment = HAlign.LEFT; set(to) {
+        val from = field
+        field = to
+
+        val delta = to.multiplier - from.multiplier
+        relativePos += Vec2d.RIGHT * delta * (size.x - ownerRect.size.x)
+    }
+
+    /**
+     * Vertical alignment
+     */
+    var verticalAlignment = VAlign.TOP; set(to) {
+        val from = field
+        field = to
+
+        val delta = to.multiplier - from.multiplier
+        relativePos += Vec2d.BOTTOM * delta * (size.y - ownerRect.size.y)
+    }
+
+    /**
+     * Relative position of the component
+     */
+    var relativePos = Vec2d.ZERO
+
+    /**
+     * Absolute(drawn) position of the component
+     */
+    var position: Vec2d
+        get() = ownerRect.leftTop + relativeToAbs(relativePos).let {
+            if (!clampPosition) it
+            else it.coerceIn(
+                0.0, ownerRect.size.x - size.x,
+                0.0, ownerRect.size.y - size.y
+            )
+        }; set(value) { relativePos = absToRelative(value - ownerRect.leftTop) }
+
+    // Rect-related properties
+    private var screenSize = Vec2d.ZERO
+    private val ownerRect get() = owner?.rect ?: Rect(Vec2d.ZERO, screenSize)
+    private val dockingOffset get() = (ownerRect.size - size) * Vec2d(horizontalAlignment.multiplier, verticalAlignment.multiplier)
+    private fun relativeToAbs(posIn: Vec2d) = posIn + dockingOffset
+    private fun absToRelative(posIn: Vec2d) = posIn - dockingOffset
 
     // Structure
     val children = mutableListOf<Layout>()
@@ -61,7 +119,9 @@ open class Layout(
     }
 
     private var owningRenderer = false
+
     protected open val interactionPassthrough = false
+    protected open val clampPosition = false
 
     // Actions
     private var showActions = mutableListOf<() -> Unit>()
@@ -73,7 +133,7 @@ open class Layout(
     private var mouseClickActions = mutableListOf<(button: Mouse.Button, action: Mouse.Action) -> Unit>()
     private var mouseMoveActions = mutableListOf<(mouse: Vec2d) -> Unit>()
     private var mouseScrollActions = mutableListOf<(delta: Double) -> Unit>()
-    private var rectUpdate = { Rect.ZERO }
+    private var rectUpdate: (() -> Rect)? = null
 
     /**
      * Sets the action to be performed when the element gets shown.
@@ -157,13 +217,22 @@ open class Layout(
     }
 
     /**
-     * Sets the rectangle of this component.
+     * Sets the rect of the element
      */
-    fun rect(block: () -> Rect) {
+    fun rectUpdate(block: () -> Rect) {
         rectUpdate = block
     }
 
     fun onEvent(e: GuiEvent) {
+        if (e is GuiEvent.Render) {
+            screenSize = RenderMain.screenSize
+
+            rectUpdate?.invoke()?.let {
+                position = it.leftTop
+                size = it.size
+            }
+        }
+
         // Select an element that's on foreground
         selectedChild = if (isHovered) children.lastOrNull {
             !it.interactionPassthrough && mousePosition in it.rect
@@ -192,23 +261,31 @@ open class Layout(
             is GuiEvent.KeyPress -> { keyPressActions.forEach { it(e.key) } }
             is GuiEvent.CharTyped -> { charTypedActions.forEach { it((e.char)) } }
             is GuiEvent.MouseMove -> { mousePosition = e.mouse; mouseMoveActions.forEach { it(e.mouse) } }
-            is GuiEvent.MouseScroll -> { mousePosition = e.mouse; mouseScrollActions.forEach { it(e.delta) } }
+            is GuiEvent.MouseScroll -> {
+                mousePosition = e.mouse
+
+                if (isHovered) {
+                    mouseScrollActions.forEach { it(e.delta) }
+                }
+            }
             is GuiEvent.MouseClick -> {
                 mousePosition = e.mouse
                 val action = if (isHovered) e.action else Mouse.Action.Release
                 mouseClickActions.forEach { it(e.button, action) }
             }
-            is GuiEvent.Render -> scissor(rect) {
+            is GuiEvent.Render -> {
                 val (pre, post) = children.partition { !it.owningRenderer }
 
                 pre.forEach { it.onEvent(e) }
                 renderActions.forEach { it(renderer) }
 
                 if (owningRenderer) {
-                    scissor(rect, renderer::render)
+                    renderer.render()
                 }
 
-                post.forEach { it.onEvent(e) }
+                scissor(rect) { // ToDo: merge to ListLayout
+                    post.forEach { it.onEvent(e) }
+                }
             }
         }
     }
@@ -217,21 +294,20 @@ open class Layout(
         /**
          * Creates an empty [Layout]
          *
-         * @param useBatching Increases performance by using parent's renderer instead of creating a new one.
+         * @param useBatching Whether to use parent's renderer
          *
          * @param batchChildren Whether allow children to use the renderer of this layout
          *
+         * @param block Actions to perform within this component
+         *
          * Check [Layout] description for more info about batching
          */
         @UIBuilder
         fun Layout.layout(
             useBatching: Boolean = false,
             batchChildren: Boolean = false,
-            block: Layout.() -> Unit,
+            block: Layout.() -> Unit = {},
         ) = Layout(this, useBatching, batchChildren)
             .apply(children::add).apply(block)
     }
 }
-
-@DslMarker
-annotation class UIBuilder