docs, excludeUpdating, debugDraw

This commit is contained in:
Fox 2016-01-25 13:46:21 -08:00
parent ab26c62e85
commit 7406a1ee34
12 changed files with 132 additions and 23 deletions

1
.gitignore vendored
View File

@ -1 +0,0 @@
busted/

View File

@ -1,3 +1,7 @@
function love.conf(t) function love.conf(t)
t.title = "Pop.Box Demo / Tests"
t.console = true t.console = true
t.window.width = 960
t.window.height = 540
end end

View File

@ -2,6 +2,9 @@
Pop.Box supports three [Drawables][1]: Canvas, Image, Video Pop.Box supports three [Drawables][1]: Canvas, Image, Video
**Note**: Video support is theoretical, as I have not tested it. (Well,
everything is theoretical, but I'm writing tests now.)
Additionally, you can use in the place of any Drawable `false` to stop rendering Additionally, you can use in the place of any Drawable `false` to stop rendering
of whatever is using a Drawable, or a table of color values. of whatever is using a Drawable, or a table of color values.

View File

@ -54,7 +54,7 @@ Additional methods:
- `getColor()` - Returns background color, or errors if the background is not a - `getColor()` - Returns background color, or errors if the background is not a
color. color.
TODO Make it possible to just specify skin? TODO Make it possible to just specify background?
## Text Element ## Text Element
@ -64,10 +64,13 @@ Text is used to draw text.
If `parent` not specified, uses `pop.window` (the top level element). If `parent` not specified, uses `pop.window` (the top level element).
If `color` is not specified, uses white. If `color` is not specified, uses white.
Additional methods: Overwritten methods:
- `setSize()` - Does not allow you to set the size, instead, it fixes the size - `setSize()` - Does not allow you to set the size, instead, it fixes the size
if it is incorrect (mostly for internal use). if it is incorrect (mostly for internal use).
Additional methods:
- `setText(text)` - Sets text and modifies size to fit. - `setText(text)` - Sets text and modifies size to fit.
- `getText()` - Returns text. - `getText()` - Returns text.
- `setFont()` - Sets [Font][2] and modifies size to fit. Note: Empty text will - `setFont()` - Sets [Font][2] and modifies size to fit. Note: Empty text will
@ -77,7 +80,7 @@ Additional methods:
- `setColor(r, g, b, a)` - Sets text color (`a` is alpha, and optional). - `setColor(r, g, b, a)` - Sets text color (`a` is alpha, and optional).
- `getColor()` - Returns text color. - `getColor()` - Returns text color.
TODO Make it possible to just specify text, or just text and skin? TODO Make it possible to just specify text, or just text and color?
TODO Make it possible to use setting size on text to actually calculate what TODO Make it possible to use setting size on text to actually calculate what
font size will make that work? font size will make that work?
@ -89,6 +92,9 @@ not be moved unless its own movement methods are used.
If you set `excludeRendering` to `true` on any element, it and its children will If you set `excludeRendering` to `true` on any element, it and its children will
not be rendered. not be rendered.
If you set `excludeUpdating` to `true` on any element, it and its children will
not be rendered.
[1]: ./Skins.md [1]: ./Skins.md
[2]: https://love2d.org/wiki/Font [2]: https://love2d.org/wiki/Font
[3]: ./Drawables.md [3]: ./Drawables.md

View File

@ -31,6 +31,8 @@ elements at once.
- `pop.update(dt)` is used so that any element can have a frame-by-frame update - `pop.update(dt)` is used so that any element can have a frame-by-frame update
attached to it. attached to it.
- `pop.draw()` is used to draw everything. - `pop.draw()` is used to draw everything.
- `pop.debugDraw()` can be used to draw everything in existence, to try to help
figure out exactly what's going on.
- `pop.textinput(text)` is used to grab text input for any focused element that - `pop.textinput(text)` is used to grab text input for any focused element that
can accept it. can accept it.
- `pop.mousepressed(button, x, y)` is used to detect and handle when an element - `pop.mousepressed(button, x, y)` is used to detect and handle when an element

View File

@ -1,18 +1,15 @@
local pop = require "pop" local pop = require "pop"
local lg = love.graphics
local visualTestsShown = false
local testsRun = false
local debugDrawEnabled = false
function love.load() function love.load()
local align = pop.box():align("center", "center"):setSize(200, 200) pop.text(nil, "Press \"s\" to show objects for visual testing/demo.\nPress \"t\" to run tests.\nPress \"d\" to toggle debug draw."):move(2, 2)
pop.box(align):align("left", "top"):setSize(75, 10):setColor(255, 0, 255, 255) --TODO correct the fact that the size is wrong here! (height doesn't take into account \n)
pop.box(align):align("center", "top"):setColor(100, 100, 100) --NOTE width? Is width calculated correctly when \n's exist? TEST THIS (also test tabs)
pop.box(align, {0, 255, 0, 255}):setSize(20, 5):align("right", "top")
pop.box(align):align("left", "center"):setColor(0, 0, 255)
pop.box(align):align("center", "center"):setSize(90, 90):setColor(255, 255, 255)
pop.box(align):align("right", "center"):setColor(255, 0, 0)
pop.box(align):align("left", "bottom"):setColor(0, 255, 0)
pop.box(align):align("center", "bottom"):setColor(255, 255, 0)
pop.box(align):align("right", "bottom"):setColor(0, 255, 255)
pop.box(nil, {255, 0, 0, 255}):align("left", "top"):setSize(50, 50)
pop.text(nil, "Hello World!"):align("center"):setText("Hey, I've been modified!")
end end
function love.update(dt) function love.update(dt)
@ -21,6 +18,10 @@ end
function love.draw() function love.draw()
pop.draw() pop.draw()
if debugDrawEnabled then
pop.debugDraw()
end
end end
function love.textinput(text) function love.textinput(text)
@ -39,6 +40,29 @@ function love.keypressed(key)
if key == "escape" then if key == "escape" then
love.event.quit() love.event.quit()
else else
if (key == "s") and (not visualTestsShown) then
-- old visual tests
local align = pop.box():align("center", "center"):setSize(200, 200)
pop.box(align):align("left", "top"):setSize(75, 10):setColor(255, 0, 255, 255)
pop.box(align):align("center", "top"):setColor(100, 100, 100)
pop.box(align, {0, 255, 0, 255}):setSize(20, 5):align("right", "top")
pop.box(align):align("left", "center"):setColor(0, 0, 255)
pop.box(align):align("center", "center"):setSize(90, 90):setColor(255, 255, 255)
pop.box(align):align("right", "center"):setColor(255, 0, 0)
pop.box(align):align("left", "bottom"):setColor(0, 255, 0):setSize(nil, 40)
pop.box(align):align("center", "bottom"):setColor(255, 255, 0)
pop.box(align):align("right", "bottom"):setColor(0, 255, 255):setSize(40, 40)
--pop.box(nil, {255, 0, 0, 255}):align("left", "top"):setSize(50, 50) --TODO adjust z-height of elements
pop.text(nil, "Hello World!"):align("center"):setText("Hey, I've been modified!")--:move(0, 18)
pop.text(nil, "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*()-=_+[]{}\\:;\"',./<>?`~"):align("center", "bottom")
visualTestsShown = true
elseif (key == "t") and (not testsRun) then
require "test"
elseif key == "d" then
debugDrawEnabled = not debugDrawEnabled
end
pop.keypressed(key) pop.keypressed(key)
end end
end end

View File

@ -30,6 +30,16 @@ function box:draw() --NOTE these ifs are probably wrong
return self return self
end end
function box:debugDraw()
lg.setLineWidth(1)
lg.setColor(0, 0, 0, 100)
lg.rectangle("fill", self.x, self.y, self.w, self.h)
lg.setColor(0, 0, 200, 200)
lg.rectangle("line", self.x, self.y, self.w, self.h)
lg.setColor(200, 200, 255, 255)
lg.print("b", self.x, self.y)
end
function box:setBackground(background) function box:setBackground(background)
self.background = background self.background = background

View File

@ -1,3 +1,5 @@
local lg = love.graphics
local path = string.sub(..., 1, string.len(...) - string.len("/elements/element")) local path = string.sub(..., 1, string.len(...) - string.len("/elements/element"))
local class = require(path .. "/lib/middleclass") local class = require(path .. "/lib/middleclass")
@ -16,6 +18,16 @@ function element:initialize(pop, parent)
self.vertical = "top" self.vertical = "top"
end end
function element:debugDraw()
lg.setLineWidth(1)
lg.setColor(0, 0, 0, 100)
lg.rectangle("fill", self.x, self.y, self.w, self.h)
lg.setColor(0, 200, 0, 200)
lg.rectangle("line", self.x, self.y, self.w, self.h)
lg.setColor(200, 255, 200, 255)
lg.print("e", self.x, self.y)
end
function element:move(x, y) function element:move(x, y)
self.x = self.x + x self.x = self.x + x
self.y = self.y + y self.y = self.y + y

View File

@ -22,6 +22,16 @@ function text:draw()
return self return self
end end
function text:debugDraw()
lg.setLineWidth(1)
lg.setColor(0, 0, 0, 100)
lg.rectangle("fill", self.x, self.y, self.w, self.h)
lg.setColor(200, 0, 0, 200)
lg.rectangle("line", self.x, self.y, self.w, self.h)
lg.setColor(255, 200, 200, 255)
lg.print("t", self.x, self.y)
end
function text:setSize() function text:setSize()
local w = self.font:getWidth(self.text) local w = self.font:getWidth(self.text)
local h = self.font:getHeight() local h = self.font:getHeight()

View File

@ -45,15 +45,16 @@ function pop.update(dt, element)
element = pop.window element = pop.window
end end
if not element.excludeUpdating then
if element.update then if element.update then
element:update(dt) element:update(dt)
end end
--NOTE add excludeUpdating for performance if needed
for i=1,#element.child do for i=1,#element.child do
pop.update(dt, element.child[i]) pop.update(dt, element.child[i])
end end
end end
end
function pop.draw(element) function pop.draw(element)
if not element then if not element then
@ -87,6 +88,10 @@ function pop.keyreleased(key)
--TODO no idea what to do with this --TODO no idea what to do with this
end end
function pop.textinput(text)
--TODO something useful will happen here
end
function pop.skin(element, skin, stop) function pop.skin(element, skin, stop)
if element.background then if element.background then
element.background = skin.background element.background = skin.background
@ -105,6 +110,28 @@ function pop.skin(element, skin, stop)
end end
end end
function pop.debugDraw(element)
if not element then
element = pop.window
end
if element.debugDraw then
element:debugDraw()
else
lg.setLineWidth(1)
lg.setColor(0, 0, 0, 100)
lg.rectangle("fill", self.x, self.y, self.w, self.h)
lg.setColor(150, 150, 150, 150)
lg.rectangle("line", self.x, self.y, self.w, self.h)
lg.setColor(200, 200, 200, 255)
lg.print(".", self.x, self.y)
end
for i=1,#element.child do
pop.debugDraw(element.child[i])
end
end
pop.load() pop.load()
return pop return pop

View File

@ -2,6 +2,6 @@ local skin = {}
skin.color = {255, 255, 255, 255} skin.color = {255, 255, 255, 255}
skin.background = false skin.background = false
skin.font = love.graphics.newFont(14) skin.font = love.graphics.newFont(13)
return skin return skin

12
test.lua Normal file
View File

@ -0,0 +1,12 @@
local pop = require "pop"
--[[ TODO
Test using different Drawables: Canvas, Image, Video
- Test without scaling, test with scaling up, test with scaling down.
- Test wtih scaling unevenly (more x / more y, one test for each!).
- Look at what can be done to them, and test doing other things.
- Test using various color tables.
- Test using false.
]]