mirror of
https://github.com/Insality/druid.git
synced 2025-06-27 18:37:44 +02:00
Compare commits
12 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
616c513fbd | ||
|
61111536a8 | ||
|
b5d2f313cc | ||
|
d0067e5496 | ||
|
58f14d0a64 | ||
|
6572da3b14 | ||
|
d7c26358a0 | ||
|
f007a28ab7 | ||
|
d98c3c2ef1 | ||
|
c87f1331ed | ||
|
efc38672c9 | ||
|
df516a08c6 |
@ -39,7 +39,7 @@ Open your `game.project` file and add the following lines to the dependencies fi
|
||||
**[Druid](https://github.com/Insality/druid/)**
|
||||
|
||||
```
|
||||
https://github.com/Insality/druid/archive/refs/tags/1.1.0.zip
|
||||
https://github.com/Insality/druid/archive/refs/tags/1.1.4.zip
|
||||
```
|
||||
|
||||
**[Defold Event](https://github.com/Insality/defold-event)**
|
||||
|
@ -38,6 +38,7 @@ Create container component with druid: `container = druid:new_container(node, mo
|
||||
- [clear_draggable_corners](#clear_draggable_corners)
|
||||
- [fit_into_node](#fit_into_node)
|
||||
- [set_min_size](#set_min_size)
|
||||
- [set_max_size](#set_max_size)
|
||||
|
||||
## Fields
|
||||
|
||||
@ -54,6 +55,8 @@ Create container component with druid: `container = druid:new_container(node, mo
|
||||
- [fit_size](#fit_size)
|
||||
- [min_size_x](#min_size_x)
|
||||
- [min_size_y](#min_size_y)
|
||||
- [max_size_x](#max_size_x)
|
||||
- [max_size_y](#max_size_y)
|
||||
- [on_size_changed](#on_size_changed)
|
||||
- [node_fill_x](#node_fill_x)
|
||||
- [node_fill_y](#node_fill_y)
|
||||
@ -303,6 +306,21 @@ Set the minimum size of the container
|
||||
- **Returns:**
|
||||
- `self` *(druid.container)*: Current container instance
|
||||
|
||||
### set_max_size
|
||||
|
||||
---
|
||||
```lua
|
||||
container:set_max_size([max_size_x], [max_size_y])
|
||||
```
|
||||
|
||||
Set the maximum size of the container
|
||||
|
||||
- **Parameters:**
|
||||
- `[max_size_x]` *(number|nil)*: The maximum size x
|
||||
- `[max_size_y]` *(number|nil)*: The maximum size y
|
||||
|
||||
- **Returns:**
|
||||
- `self` *(druid.container)*: Current container instance
|
||||
|
||||
## Fields
|
||||
<a name="node"></a>
|
||||
@ -344,6 +362,12 @@ Set the minimum size of the container
|
||||
<a name="min_size_y"></a>
|
||||
- **min_size_y** (_number_): The minimum size y
|
||||
|
||||
<a name="max_size_x"></a>
|
||||
- **max_size_x** (_number_): The maximum size x
|
||||
|
||||
<a name="max_size_y"></a>
|
||||
- **max_size_y** (_number_): The maximum size y
|
||||
|
||||
<a name="on_size_changed"></a>
|
||||
- **on_size_changed** (_event_): fun(self: druid.container, size: vector3) The event triggered when the size changes
|
||||
|
||||
|
@ -177,6 +177,7 @@ container:refresh_origins()
|
||||
container:refresh_scale()
|
||||
container:remove_container_by_node([node])
|
||||
container:set_min_size([min_size_x], [min_size_y])
|
||||
container:set_max_size([max_size_x], [max_size_y])
|
||||
container:set_parent_container([parent_container])
|
||||
container:set_pivot(pivot)
|
||||
container:set_position(pos_x, pos_y)
|
||||
|
@ -117,7 +117,17 @@ function M:set_nodes(nodes)
|
||||
nodes = gui.clone_tree(nodes) --[[@as table<hash, node>]]
|
||||
end
|
||||
|
||||
-- When we use gui.clone_tree in inner template (template inside other template)
|
||||
-- this nodes have no id. We have table: hash(correct_id) : hash("") or hash("_nodeX"
|
||||
-- It's wrong and we use this hack to fix this
|
||||
if nodes then
|
||||
for id, node in pairs(nodes) do
|
||||
gui.set_id(node, id)
|
||||
end
|
||||
end
|
||||
|
||||
self._meta.nodes = nodes
|
||||
|
||||
return self
|
||||
end
|
||||
|
||||
|
29
druid/extended/container.lua
Normal file → Executable file
29
druid/extended/container.lua
Normal file → Executable file
@ -58,6 +58,8 @@ local CORNER_PIVOTS = {
|
||||
---@field fit_size vector3 The fit size
|
||||
---@field min_size_x number|nil The minimum size x
|
||||
---@field min_size_y number|nil The minimum size y
|
||||
---@field max_size_x number|nil The maximum size x
|
||||
---@field max_size_y number|nil The maximum size y
|
||||
---@field on_size_changed event fun(self: druid.container, size: vector3) The event triggered when the size changes
|
||||
---@field _parent_container druid.container The parent container
|
||||
---@field _containers table The containers
|
||||
@ -75,6 +77,8 @@ function M:init(node, mode, callback)
|
||||
|
||||
self.min_size_x = 0
|
||||
self.min_size_y = 0
|
||||
self.max_size_x = nil
|
||||
self.max_size_y = nil
|
||||
self._containers = {}
|
||||
self._draggable_corners = {}
|
||||
self.node_offset = vmath.vector4(0)
|
||||
@ -166,6 +170,12 @@ function M:set_size(width, height, anchor_pivot)
|
||||
if self.min_size_y then
|
||||
height = max(height, self.min_size_y)
|
||||
end
|
||||
if self.max_size_x then
|
||||
width = min(width, self.max_size_x)
|
||||
end
|
||||
if self.max_size_y then
|
||||
height = min(height, self.max_size_y)
|
||||
end
|
||||
|
||||
if (width and width ~= self.size.x) or (height and height ~= self.size.y) then
|
||||
self.center_offset.x = -width * self.pivot_offset.x
|
||||
@ -522,6 +532,12 @@ function M:_on_corner_drag(x, y, corner_offset)
|
||||
if self.min_size_y and size.y + y < self.min_size_y then
|
||||
y = self.min_size_y - size.y
|
||||
end
|
||||
if self.max_size_x and size.x + x > self.max_size_x then
|
||||
x = self.max_size_x - size.x
|
||||
end
|
||||
if self.max_size_y and size.y + y > self.max_size_y then
|
||||
y = self.max_size_y - size.y
|
||||
end
|
||||
|
||||
if corner_offset.x < 0 then
|
||||
self.node_offset.x = self.node_offset.x - x
|
||||
@ -570,4 +586,17 @@ function M:set_min_size(min_size_x, min_size_y)
|
||||
end
|
||||
|
||||
|
||||
---Set the maximum size of the container
|
||||
---@param max_size_x number|nil The maximum size x
|
||||
---@param max_size_y number|nil The maximum size y
|
||||
---@return druid.container self Current container instance
|
||||
function M:set_max_size(max_size_x, max_size_y)
|
||||
self.max_size_x = max_size_x or self.max_size_x
|
||||
self.max_size_y = max_size_y or self.max_size_y
|
||||
self:refresh()
|
||||
|
||||
return self
|
||||
end
|
||||
|
||||
|
||||
return M
|
||||
|
@ -267,10 +267,17 @@ function M:_refresh()
|
||||
local start_index = self.grid:get_index(start_pos)
|
||||
start_index = math.max(1, start_index)
|
||||
|
||||
local pivot = helper.get_pivot_offset(gui.get_pivot(self.scroll.view_node))
|
||||
local offset_x = self.scroll.view_size.x * (0.5 - pivot.x)
|
||||
local offset_y = self.scroll.view_size.y * (0.5 + pivot.y)
|
||||
local offset_x = self.scroll.view_size.x
|
||||
local offset_y = self.scroll.view_size.y
|
||||
local end_pos = vmath.vector3(start_pos.x + offset_x, start_pos.y - offset_y, 0)
|
||||
|
||||
local max_offset_x = (self.grid.in_row - 1) * self.grid.node_size.x
|
||||
end_pos.x = math.min(end_pos.x, start_pos.x + max_offset_x)
|
||||
|
||||
if #self._data <= self.grid.in_row then
|
||||
end_pos.y = start_pos.y
|
||||
end
|
||||
|
||||
local end_index = self.grid:get_index(end_pos)
|
||||
end_index = math.min(#self._data, end_index)
|
||||
|
||||
|
@ -473,6 +473,9 @@ function M.get_text_metrics_from_node(text_node)
|
||||
options.tracking = gui.get_tracking(text_node)
|
||||
options.line_break = gui.get_line_break(text_node)
|
||||
|
||||
options.width = 0
|
||||
options.leading = 0
|
||||
|
||||
-- Gather other options only if it used in node
|
||||
if options.line_break then
|
||||
options.width = gui.get_size(text_node).x
|
||||
|
@ -2863,6 +2863,49 @@ nodes {
|
||||
parent: "data_list_cache_with_component/button_component/root"
|
||||
template_node_child: true
|
||||
}
|
||||
nodes {
|
||||
type: TYPE_TEMPLATE
|
||||
id: "data_list_matrix_basic"
|
||||
parent: "data_list"
|
||||
inherit_alpha: true
|
||||
template: "/example/examples/data_list/basic/data_list_matrix_basic.gui"
|
||||
}
|
||||
nodes {
|
||||
type: TYPE_BOX
|
||||
id: "data_list_matrix_basic/root"
|
||||
parent: "data_list_matrix_basic"
|
||||
template_node_child: true
|
||||
}
|
||||
nodes {
|
||||
type: TYPE_BOX
|
||||
id: "data_list_matrix_basic/view"
|
||||
parent: "data_list_matrix_basic/root"
|
||||
template_node_child: true
|
||||
}
|
||||
nodes {
|
||||
type: TYPE_BOX
|
||||
id: "data_list_matrix_basic/content"
|
||||
parent: "data_list_matrix_basic/view"
|
||||
template_node_child: true
|
||||
}
|
||||
nodes {
|
||||
type: TYPE_BOX
|
||||
id: "data_list_matrix_basic/prefab"
|
||||
parent: "data_list_matrix_basic/content"
|
||||
template_node_child: true
|
||||
}
|
||||
nodes {
|
||||
type: TYPE_BOX
|
||||
id: "data_list_matrix_basic/panel"
|
||||
parent: "data_list_matrix_basic/prefab"
|
||||
template_node_child: true
|
||||
}
|
||||
nodes {
|
||||
type: TYPE_TEXT
|
||||
id: "data_list_matrix_basic/text"
|
||||
parent: "data_list_matrix_basic/prefab"
|
||||
template_node_child: true
|
||||
}
|
||||
nodes {
|
||||
type: TYPE_BOX
|
||||
texture: "druid_example/empty"
|
||||
|
@ -1,4 +1,4 @@
|
||||
---@class widget.container_anchors: druid.widget
|
||||
---@class widget.container_resize: druid.widget
|
||||
local M = {}
|
||||
|
||||
|
||||
|
117
example/examples/data_list/basic/data_list_matrix_basic.gui
Normal file
117
example/examples/data_list/basic/data_list_matrix_basic.gui
Normal file
@ -0,0 +1,117 @@
|
||||
fonts {
|
||||
name: "text_bold"
|
||||
font: "/example/assets/fonts/text_bold.font"
|
||||
}
|
||||
textures {
|
||||
name: "druid_example"
|
||||
texture: "/example/assets/druid_example.atlas"
|
||||
}
|
||||
nodes {
|
||||
type: TYPE_BOX
|
||||
texture: "druid_example/empty"
|
||||
id: "root"
|
||||
inherit_alpha: true
|
||||
size_mode: SIZE_MODE_AUTO
|
||||
visible: false
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
y: 350.0
|
||||
}
|
||||
size {
|
||||
x: 400.0
|
||||
y: 700.0
|
||||
}
|
||||
color {
|
||||
x: 0.173
|
||||
y: 0.184
|
||||
z: 0.204
|
||||
}
|
||||
type: TYPE_BOX
|
||||
texture: "druid_example/pixel"
|
||||
id: "view"
|
||||
pivot: PIVOT_N
|
||||
parent: "root"
|
||||
inherit_alpha: true
|
||||
clipping_mode: CLIPPING_MODE_STENCIL
|
||||
}
|
||||
nodes {
|
||||
size {
|
||||
x: 400.0
|
||||
y: 700.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
texture: "druid_example/empty"
|
||||
id: "content"
|
||||
pivot: PIVOT_N
|
||||
parent: "view"
|
||||
inherit_alpha: true
|
||||
visible: false
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
y: -350.0
|
||||
}
|
||||
size {
|
||||
x: 100.0
|
||||
y: 100.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
id: "prefab"
|
||||
parent: "content"
|
||||
inherit_alpha: true
|
||||
visible: false
|
||||
}
|
||||
nodes {
|
||||
size {
|
||||
x: 90.0
|
||||
y: 90.0
|
||||
}
|
||||
color {
|
||||
x: 0.631
|
||||
y: 0.843
|
||||
z: 0.961
|
||||
}
|
||||
type: TYPE_BOX
|
||||
texture: "druid_example/ui_circle_32"
|
||||
id: "panel"
|
||||
parent: "prefab"
|
||||
inherit_alpha: true
|
||||
slice9 {
|
||||
x: 16.0
|
||||
y: 16.0
|
||||
z: 16.0
|
||||
w: 16.0
|
||||
}
|
||||
}
|
||||
nodes {
|
||||
size {
|
||||
x: 50.0
|
||||
y: 50.0
|
||||
}
|
||||
color {
|
||||
x: 0.31
|
||||
y: 0.318
|
||||
z: 0.322
|
||||
}
|
||||
type: TYPE_TEXT
|
||||
text: "1"
|
||||
font: "text_bold"
|
||||
id: "text"
|
||||
outline {
|
||||
x: 1.0
|
||||
y: 1.0
|
||||
z: 1.0
|
||||
}
|
||||
shadow {
|
||||
x: 1.0
|
||||
y: 1.0
|
||||
z: 1.0
|
||||
}
|
||||
parent: "prefab"
|
||||
inherit_alpha: true
|
||||
outline_alpha: 0.0
|
||||
shadow_alpha: 0.0
|
||||
}
|
||||
material: "/builtins/materials/gui.material"
|
||||
adjust_reference: ADJUST_REFERENCE_PARENT
|
95
example/examples/data_list/basic/data_list_matrix_basic.lua
Normal file
95
example/examples/data_list/basic/data_list_matrix_basic.lua
Normal file
@ -0,0 +1,95 @@
|
||||
local event = require("event.event")
|
||||
|
||||
---@class examples.data_list_matrix_basic: druid.widget
|
||||
---@field prefab node
|
||||
---@field scroll druid.scroll
|
||||
---@field grid druid.grid
|
||||
---@field data_list druid.data_list
|
||||
---@field on_item_click event
|
||||
local M = {}
|
||||
|
||||
|
||||
function M:init()
|
||||
self.prefab = self:get_node("prefab")
|
||||
gui.set_enabled(self.prefab, false)
|
||||
|
||||
self.scroll = self.druid:new_scroll("view", "content")
|
||||
self.grid = self.druid:new_grid("content", self.prefab, 4)
|
||||
self.data_list = self.druid:new_data_list(self.scroll, self.grid, self.create_item_callback) --[[@as druid.data_list]]
|
||||
|
||||
local data = {}
|
||||
for index = 1, 1000 do
|
||||
table.insert(data, {})
|
||||
end
|
||||
self.data_list:set_data(data)
|
||||
|
||||
self.on_item_click = event.create()
|
||||
end
|
||||
|
||||
|
||||
---@param item_data table
|
||||
---@param index number
|
||||
---@return node, druid.component
|
||||
function M:create_item_callback(item_data, index)
|
||||
local nodes = gui.clone_tree(self.prefab)
|
||||
|
||||
local root = nodes[self:get_template() .. "/prefab"]
|
||||
local text = nodes[self:get_template() .. "/text"]
|
||||
gui.set_enabled(root, true)
|
||||
gui.set_text(text, tostring(index))
|
||||
|
||||
local button = self.druid:new_button(root, self.on_button_click, index)
|
||||
return root, button
|
||||
end
|
||||
|
||||
|
||||
function M:on_button_click(index)
|
||||
self.on_item_click:trigger(index)
|
||||
end
|
||||
|
||||
|
||||
---@param output_list output_list
|
||||
function M:on_example_created(output_list)
|
||||
self.on_item_click:subscribe(function(index)
|
||||
output_list:add_log_text("Item clicked: " .. index)
|
||||
end)
|
||||
end
|
||||
|
||||
|
||||
---@param properties_panel properties_panel
|
||||
function M:properties_control(properties_panel)
|
||||
local view_node = self.scroll.view_node
|
||||
local is_stencil = gui.get_clipping_mode(view_node) == gui.CLIPPING_MODE_STENCIL
|
||||
|
||||
properties_panel:add_checkbox("ui_clipping", is_stencil, function(value)
|
||||
gui.set_clipping_mode(view_node, value and gui.CLIPPING_MODE_STENCIL or gui.CLIPPING_MODE_NONE)
|
||||
end)
|
||||
|
||||
properties_panel:add_slider("ui_scroll", 0, function(value)
|
||||
self.scroll:scroll_to_percent(vmath.vector3(0, 1 - value, 0), true)
|
||||
end)
|
||||
end
|
||||
|
||||
|
||||
---@return string
|
||||
function M:get_debug_info()
|
||||
local data_list = self.data_list
|
||||
|
||||
local data = data_list:get_data()
|
||||
local info = ""
|
||||
info = info .. "Data length: " .. #data .. "\n"
|
||||
info = info .. "First Visual Index: " .. data_list.top_index .. "\n"
|
||||
info = info .. "Last Visual Index: " .. data_list.last_index .. "\n"
|
||||
|
||||
local s = self.scroll
|
||||
info = info .. "\n"
|
||||
info = info .. "View Size Y: " .. gui.get(s.view_node, "size.y") .. "\n"
|
||||
info = info .. "Content Size Y: " .. gui.get(s.content_node, "size.y") .. "\n"
|
||||
info = info .. "Content position Y: " .. math.ceil(s.position.y) .. "\n"
|
||||
info = info .. "Content Range Y: " .. s.available_pos.y .. " - " .. s.available_pos.w .. "\n"
|
||||
|
||||
return info
|
||||
end
|
||||
|
||||
|
||||
return M
|
@ -21,6 +21,15 @@ function M.get_examples()
|
||||
widget_class = require("example.examples.data_list.basic.data_list_horizontal_basic"),
|
||||
},
|
||||
|
||||
{
|
||||
name_id = "ui_example_data_list_matrix_basic",
|
||||
information_text_id = "ui_example_data_list_matrix_basic_description",
|
||||
template = "data_list_matrix_basic",
|
||||
root = "data_list_matrix_basic/root",
|
||||
code_url = "example/examples/data_list/basic/data_list_matrix_basic.lua",
|
||||
widget_class = require("example.examples.data_list.basic.data_list_matrix_basic"),
|
||||
},
|
||||
|
||||
{
|
||||
name_id = "ui_example_data_list_add_remove_clear",
|
||||
information_text_id = "ui_example_data_list_add_remove_clear_description",
|
||||
|
@ -147,6 +147,9 @@
|
||||
"ui_example_data_list_horizontal_basic": "Data List Horizontal Basic",
|
||||
"ui_example_data_list_horizontal_basic_description": "How to make a horizontal data list",
|
||||
|
||||
"ui_example_data_list_matrix_basic": "Data List Matrix Basic",
|
||||
"ui_example_data_list_matrix_basic_description": "How to make a matrix data list",
|
||||
|
||||
"ui_example_data_list_add_remove_clear": "Data List Add Remove Clear",
|
||||
"ui_example_data_list_add_remove_clear_description": "How the add, remove and clear functions work in the data list",
|
||||
|
||||
|
@ -14,16 +14,16 @@ update_frequency = 60
|
||||
|
||||
[project]
|
||||
title = Druid
|
||||
version = 1.1.0
|
||||
version = 1.1.4
|
||||
publisher = Insality
|
||||
developer = Maksim Tuprikov
|
||||
custom_resources = /example/locales
|
||||
dependencies#0 = https://github.com/britzl/deftest/archive/refs/tags/2.8.0.zip
|
||||
dependencies#1 = https://github.com/Insality/defold-saver/archive/refs/heads/develop.zip
|
||||
dependencies#1 = https://github.com/Insality/defold-saver/archive/refs/tags/5.zip
|
||||
dependencies#2 = https://github.com/Insality/defold-tweener/archive/refs/tags/3.zip
|
||||
dependencies#3 = https://github.com/Insality/panthera/archive/refs/heads/develop.zip
|
||||
dependencies#3 = https://github.com/Insality/panthera/archive/refs/tags/runtime.4.zip
|
||||
dependencies#4 = https://github.com/Insality/defold-lang/archive/refs/tags/3.zip
|
||||
dependencies#5 = https://github.com/Insality/defold-event/archive/refs/heads/develop.zip
|
||||
dependencies#5 = https://github.com/Insality/defold-event/archive/refs/tags/11.zip
|
||||
dependencies#6 = https://github.com/subsoap/defos/archive/refs/tags/v2.8.0.zip
|
||||
|
||||
[library]
|
||||
|
30
test/tests/test_container.lua
Normal file → Executable file
30
test/tests/test_container.lua
Normal file → Executable file
@ -41,6 +41,8 @@ return function()
|
||||
assert(container.mode == const.LAYOUT_MODE.FIT)
|
||||
assert(container.min_size_x == 0)
|
||||
assert(container.min_size_y == 0)
|
||||
assert(container.max_size_x == nil)
|
||||
assert(container.max_size_y == nil)
|
||||
assert(container._containers ~= nil)
|
||||
assert(#container._containers == 0)
|
||||
|
||||
@ -137,6 +139,34 @@ return function()
|
||||
gui.delete_node(container_node)
|
||||
end)
|
||||
|
||||
it("Should set max size", function()
|
||||
local container_node = gui.new_box_node(vmath.vector3(50, 50, 0), vmath.vector3(100, 100, 0))
|
||||
local container = druid:new_container(container_node)
|
||||
|
||||
assert(container.max_size_x == nil)
|
||||
assert(container.max_size_y == nil)
|
||||
|
||||
container:set_max_size(150, 200)
|
||||
|
||||
assert(container.max_size_x == 150)
|
||||
assert(container.max_size_y == 200)
|
||||
|
||||
-- Should respect max size when setting larger size
|
||||
container:set_size(300, 300)
|
||||
local size = container:get_size()
|
||||
assert(size.x == 150)
|
||||
assert(size.y == 200)
|
||||
|
||||
-- Should allow smaller size
|
||||
container:set_size(100, 100)
|
||||
size = container:get_size()
|
||||
assert(size.x == 100)
|
||||
assert(size.y == 100)
|
||||
|
||||
druid:remove(container)
|
||||
gui.delete_node(container_node)
|
||||
end)
|
||||
|
||||
it("Should fire on_size_changed event", function()
|
||||
local container_node = gui.new_box_node(vmath.vector3(50, 50, 0), vmath.vector3(100, 100, 0))
|
||||
local container = druid:new_container(container_node)
|
||||
|
@ -703,6 +703,15 @@ Please support me if you like this project! It will help me keep engaged to upda
|
||||
[](https://github.com/sponsors/insality) [](https://ko-fi.com/insality) [](https://www.buymeacoffee.com/insality)
|
||||
|
||||
|
||||
### Druid 1.1.X
|
||||
#### Druid 1.1.1
|
||||
- [#309] Added max_size_x and max_size_y to container (by [astrochili](https://github.com/astrochili))
|
||||
|
||||
- {Place for the community changelogs}
|
||||
#### Druid 1.1.2
|
||||
- [#310] Add data list matrix example (Grid 4 in row)
|
||||
- [Data List] Fix for data list element amounts issue
|
||||
|
||||
#### Druid 1.1.3
|
||||
- Fix for node_id of cloned nodes with `gui.clone_tree`
|
||||
|
||||
#### Druid 1.1.4
|
||||
- [#312] Fix for text metrics issue if returned height is 0 sometimes
|
||||
|
Loading…
x
Reference in New Issue
Block a user