[WIP] Basic UI in Lönn using OlympUI

.gitmodules

@@ -2,3 +2,6 @@
 	path = src/selene
 	url = https://github.com/Vexatos/Selene.git
 	branch = lua5.1
+[submodule "src/ui"]
+	path = src/ui
+	url = https://github.com/EverestAPI/OlympUI.git

src/conf.lua

@@ -7,5 +7,5 @@ function love.conf(t)
 
 	t.window.icon = "assets/logo-256.png"
 
-	t.window.vsync = true
+	t.window.vsync = false
 end

src/scenes/editor.lua

@@ -12,6 +12,202 @@ function editorScene:firstEnter()
     local inputDevice = require("input_device")
     local standardHotkeys = require("standard_hotkeys")
 
+    local filesystem = require("filesystem")
+    local loadedState = require("loaded_state")
+    local fileLocations = require("file_locations")
+
+    local ui = require("ui")
+    local uie = require("ui.elements")
+    local uiu = require("ui.utils")
+
+    --[[
+    uiu.hook(uie.__label.__default, {
+        calcWidth = (orig, ... -> orig(...) * 3),
+        calcHeight = (orig, ... -> orig(...) * 3),
+
+        draw = function(orig, self, ...)
+            love.graphics.setColor(self.style.color)
+            love.graphics.draw(self._text, self.screenX, self.screenY, 0, 3, 3)
+        end,
+    })
+    --]]
+    uie.__label.__default.style.font = love.graphics.newFont(16)
+
+    local root = uie.column({
+        uie.topbar({
+            { "File", {
+                { "New" },
+                { },
+                { "Open", (-> filesystem.openDialog(fileLocations.getCelesteDir(), nil, loadedState.loadFile)) },
+                { "Recent", {
+                    { "Totally" },
+                    { "Not A Dummy" },
+                    { "Nested Submenu" }
+                } },
+                { },
+                { "Save", (-> loadedState.filename and loadedState.saveFile(loadedState.filename)) },
+                { "Save As...", (-> loadedState.side and filesystem.saveDialog(loadedState.filename, nil, loadedState.saveFile)) },
+                { },
+                { "Settings" },
+                { },
+                { "Quit", (-> love.event.quit()) }
+            }},
+
+            { "Edit", {
+                { "Undo" },
+                { "Redo" }
+            }},
+
+            { "Map", {
+                { "Stylegrounds" },
+                { "Metadata" },
+                { "Save Map Image" }
+            }},
+
+            { "Room", {
+                { "Add" },
+                { "Configure" }
+            }},
+
+            { "Help", {
+                { "Update" },
+                { "About" }
+            }},
+
+            { "Debug", {
+                { "Uhh" }
+            }},
+        }),
+
+        uie.group({
+            uie.scrollbox(
+                uie.list(
+                    uiu.map(uiu.listRange(200, 1, -1), function(i)
+                        return { text = string.format("%i%s", i, i % 7 == 0 and " (something)" or ""), data = i }
+                    end)
+                )
+            ):with({
+                calcWidth = (el -> el.inner.width)
+            }):with(uiu.fillHeight),
+
+            uie.column({
+                uie.listH({
+                    { "A" },
+                    { "B" },
+                    { "C" },
+                    { "D" },
+                    { "E" }
+                }):with(uiu.hook{
+                    layoutLateLazy = function(orig, el)
+                        local parentWidth = el.parent.innerWidth
+                        if el.width < parentWidth then
+                            el.width = parentWidth
+                            el.innerWidth = parentWidth - el.style.padding * 2
+                        end
+                        orig(el)
+                    end
+                }),
+
+                uie.field("<TODO: TEXT INPUT>"),
+
+                uie.scrollbox(
+                    uie.list(
+                        uiu.map(uiu.listRange(200, 1, -1), function(i)
+                            return { text = string.format("%i%s", i, i % 7 == 0 and " (something)" or ""), data = i }
+                        end)
+                    ):with(uiu.hook{
+                        layoutLateLazy = function(orig, el)
+                            local parentWidth = el.parent.innerWidth
+                            if el.width < parentWidth then
+                                el.width = parentWidth
+                                el.innerWidth = parentWidth - el.style.padding * 2
+                            end
+                            orig(el)
+                        end
+                    })
+                ):with(uiu.fillHeight(true))
+                :with(uiu.hook{
+                    calcWidth = (orig, el -> el.inner.width),
+                    layoutLateLazy = function(orig, el)
+                        local parentWidth = el.parent.innerWidth
+                        if el.width < parentWidth then
+                            el.width = parentWidth
+                            el.innerWidth = parentWidth - el.style.padding * 2
+                        end
+                        orig(el)
+                    end
+                })
+            }):with(uiu.fillHeight):with(uiu.rightbound):with({
+                style = {
+                    padding = 0
+                }
+            }),
+
+            uie.window("Windowception",
+                uie.scrollbox(
+                    uie.group({
+                        uie.window("Child 1", uie.column({ uie.label("Oh no") })):with({ x = 10, y = 10}),
+                        uie.window("Child 2", uie.column({ uie.label("Oh no two") })):with({ x = 30, y = 30})
+                    }):with({ width = 200, height = 400 })
+                ):with({ width = 200, height = 200 })
+            ):with({ x = 50, y = 100 }),
+
+            uie.window("Hello, World!",
+                uie.column({
+                    uie.label("This is a one-line label."),
+
+                    -- Labels use Löve2D Text objects under the hood.
+                    uie.label({ { 1, 1, 1 }, "This is a ", { 1, 0, 0 }, "colored", { 0, 1, 1 }, " label."}),
+
+                    -- Multi-line labels aren't subjected to the parent element's spacing property.
+                    uie.label("This is a two-line label.\nThe following label is updated dynamically."),
+
+                    -- Dynamically updated label.
+                    uie.label():with({
+                        update = function(el)
+                            el.text = "FPS: " .. love.timer.getFPS()
+                        end
+                    }),
+
+                    uie.button("This is a button.", function(btn)
+                        if btn.counter == nil then
+                            btn.counter = 0
+                        end
+                        btn.counter = btn.counter + 1
+                        btn.text = "Pressed " .. tostring(btn.counter) .. " time" .. (btn.counter == 1 and "" or "s")
+                    end),
+
+                    uie.button("Disabled"):with({ enabled = false }),
+
+                    uie.button("Useless"),
+
+                    uie.label("Select an item from the list below."):as("selected"),
+                    uie.list(uiu.map(uiu.listRange(1, 3), function(i)
+                        return { text = string.format("Item %i!", i), data = i }
+                    end), function(list, item)
+                        list.parent._selected.text = "Selected " .. tostring(item)
+                    end)
+
+                })
+            ):with({ x = 200, y = 50 }):as("test"),
+
+        }):with(uiu.fillWidth):with(uiu.fillHeight(true)),
+    }):with({
+        style = {
+            bg = { bg = {} },
+            padding = 0,
+            spacing = 0,
+            radius = 0
+        },
+        clip = false,
+        cacheable = false
+    })
+
+    ui.init(root, false)
+    inputDevice.newInputDevice(self.inputDevices, ui)
+
+    self.ui = ui
+
     local viewportHandler = require("viewport_handler")
     local hotkeyHandler = require("hotkey_handler")
     local mapLoaderDevice = require("input_devices.map_loader")

src/structs/smart_drawing_batch.lua

@@ -259,8 +259,10 @@ end
 local function clearCanvasArea(batch, x, y)
     local sectionX, sectionY, cellWidth, cellHeight = getSectionStart(batch, x, y)
 
+    local previousScissorX, previousScissorY, previousScissorW, previousScissorH = love.graphics.getScissor()
     love.graphics.setScissor(sectionX, sectionY, cellWidth, cellHeight)
     love.graphics.clear(0.0, 0.0, 0.0, 0.0)
+    love.graphics.setScissor(previousScissorX, previousScissorY, previousScissorW, previousScissorH)
 end
 
 -- Assumes Canvas is set for performance reasons
@@ -279,8 +281,10 @@ local function redrawCanvasArea(batch, x, y, meta, quad, drawX, drawX, drawY, ro
     local offsetX = ox or ((jx or 0.0) * meta.realWidth + meta.offsetX)
     local offsetY = oy or ((jy or 0.0) * meta.realHeight + meta.offsetY)
 
+    local previousScissorX, previousScissorY, previousScissorW, previousScissorH = love.graphics.getScissor()
     love.graphics.setScissor(sectionX, sectionY, cellWidth, cellHeight)
     love.graphics.clear(0.0, 0.0, 0.0, 0.0)
+    love.graphics.setScissor(previousScissorX, previousScissorY, previousScissorW, previousScissorH)
 
     love.graphics.draw(meta.image, quad, sectionX, sectionY, rot or 0, sx or 1, sy or 1, offsetX, offsetY)
 end

src/tools/brush.lua

@@ -83,9 +83,11 @@ function tool.draw()
         local px, py = viewportHandler.getRoomCoordindates(room)
         local tx, ty = viewportHandler.pixelToTileCoordinates(px, py)
 
+        --[[
         local hudText = string.format("Cursor: %s, %s (%s, %s)", tx + 1, ty + 1, px, py)
 
         love.graphics.printf(hudText, 20, 120, viewportHandler.viewport.width, "left", 0, fonts.fontScale, fonts.fontScale)
+        ]]--
 
         viewportHandler.drawRelativeTo(room.x, room.y, function()
             drawing.callKeepOriginalColor(function()