Partydeck/Druid-Extension
3
0
Fork 0
mirror of https://github.com/Insality/druid synced 2025-09-27 18:12:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update example app

Browse Source
This commit is contained in:
Insality
2024-10-19 10:57:55 +03:00
parent c787ed860e
commit ad339508cf
25 changed files with 903 additions and 1388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
example/assets/fonts/text_bold.font
View File

File diff suppressed because one or more lines are too long

2
example/assets/fonts/text_regular.font
View File

File diff suppressed because one or more lines are too long

57
example/components/container/container.lua
View File

@@ -1,6 +1,6 @@
--- Container component
-- Container setup in GUI
-- parent container - container that contains this container. If not, then it's a window default container
-- parent container - container that contains this container. If not, then it's a window default container or parent node
-- container pivot - the point of the parent container that will be used as a pivot point for positioning
-- node_offset - position offset from parent container pivot point (vector4 - offset in pixels from each side)
-- adjust mode FIT - container will keep it's size and will be positioned inside parent container
@@ -9,7 +9,6 @@
-- adjust mode STRETCH_Y - container will have percentage of parent container size (only y side)
-- Adjust Stretch and x_anchor == None: container will be positioned by pivot point with one side fixed margin, stretched to pivot side by percentage
-- Adjust stretch and x_anchor ~= None: container will be positioned by pivot point, stretched to pivot side by percentage, but with fixed margins
-- Inner container should be inside other container
local const = require("druid.const")
local helper = require("druid.helper")
@@ -34,7 +33,7 @@ local Event = require("druid.event")
---@field _parent_container druid.container
---@field _containers table
---@field _draggable_corners table
local Container = component.create("container")
local M = component.create("container")
local abs = math.abs
local min = math.min
@@ -52,7 +51,7 @@ local CORNER_PIVOTS = {
---@param node node Gui node
---@param mode string Layout mode
---@param callback fun(self: druid.container, size: vector3) Callback on size changed
function Container:init(node, mode, callback)
function M:init(node, mode, callback)
self.node = self:get_node(node)
self.druid = self:get_druid()
@@ -91,7 +90,7 @@ function Container:init(node, mode, callback)
end
function Container:on_late_init()
function M:on_late_init()
if not gui.get_parent(self.node) then
-- TODO: Scale issue here, in fit into window!
self:fit_into_window()
@@ -99,12 +98,12 @@ function Container:on_late_init()
end
function Container:on_remove()
function M:on_remove()
self:clear_draggable_corners()
end
function Container:refresh_origins()
function M:refresh_origins()
self.origin_size = gui.get_size(self.node)
self.origin_position = gui.get_position(self.node)
self:set_pivot(gui.get_pivot(self.node))
@@ -112,7 +111,7 @@ end
---@param pivot constant
function Container:set_pivot(pivot)
function M:set_pivot(pivot)
gui.set_pivot(self.node, pivot)
self.pivot_offset = helper.get_pivot_offset(pivot)
self.center_offset = -vmath.vector3(self.size.x * self.pivot_offset.x, self.size.y * self.pivot_offset.y, 0)
@@ -125,7 +124,7 @@ end
-- @table style
-- @tfield[opt=vector3(24, 24, 0)] vector3 DRAGGABLE_CORNER_SIZE Size of box node for debug draggable corners
-- @tfield[opt=vector4(1)] vector4 DRAGGABLE_CORNER_COLOR Color of debug draggable corners
function Container:on_style_change(style)
function M:on_style_change(style)
self.style = {}
self.style.DRAGGABLE_CORNER_SIZE = style.DRAGGABLE_CORNER_SIZE or vmath.vector3(24, 24, 0)
self.style.DRAGGABLE_CORNER_COLOR = style.DRAGGABLE_CORNER_COLOR or vmath.vector4(10)
@@ -136,7 +135,7 @@ end
---@param width number|nil
---@param height number|nil
---@return druid.container @{Container}
function Container:set_size(width, height)
function M:set_size(width, height)
width = width or self.size.x
height = height or self.size.y
@@ -165,7 +164,7 @@ end
---@param pos_x number
---@param pos_y number
function Container:set_position(pos_x, pos_y)
function M:set_position(pos_x, pos_y)
if self._position.x == pos_x and self._position.y == pos_y then
return
end
@@ -178,14 +177,14 @@ end
---Get current size of layout node
---@return vector3 size
function Container:get_size()
function M:get_size()
return self.size
end
---Get current scale of layout node
---@return vector3 scale
function Container:get_scale()
function M:get_scale()
return helper.get_scene_scale(self.node, true) --[[@as vector3]]
end
@@ -193,7 +192,7 @@ end
--- Set size for layout node to fit inside it
---@param target_size vector3
---@return druid.container @{Container}
function Container:fit_into_size(target_size)
function M:fit_into_size(target_size)
self.fit_size = target_size
self:refresh()
return self
@@ -202,13 +201,13 @@ end
--- Set current size for layout node to fit inside it
---@return druid.container @{Container}
function Container:fit_into_window()
function M:fit_into_window()
return self:fit_into_size(vmath.vector3(gui.get_width(), gui.get_height(), 0))
end
---@param self druid.container
function Container:on_window_resized()
function M:on_window_resized()
local x_koef, y_koef = helper.get_screen_aspect_koef()
self.x_koef = x_koef
self.y_koef = y_koef
@@ -223,7 +222,7 @@ end
---@param mode string|nil stretch, fit, stretch_x, stretch_y. Default: Pick from node, "fit" or "stretch"
---@param on_resize_callback fun(self: userdata, size: vector3)|nil
---@return druid.container @{Container} New created layout instance
function Container:add_container(node_or_container, mode, on_resize_callback)
function M:add_container(node_or_container, mode, on_resize_callback)
local container = nil
local node = node_or_container
@@ -237,7 +236,7 @@ function Container:add_container(node_or_container, mode, on_resize_callback)
-- Covert node_id to node if needed
node = self:get_node(node)
container = container or self.druid:new(Container, node, mode)
container = container or self.druid:new(M, node, mode)
container:set_parent_container(self)
if on_resize_callback then
container.on_size_changed:subscribe(on_resize_callback)
@@ -249,7 +248,7 @@ end
---@return druid.container|nil
function Container:remove_container_by_node(node)
function M:remove_container_by_node(node)
for index = 1, #self._containers do
local container = self._containers[index]
if container.node == node then
@@ -264,7 +263,7 @@ end
---@param parent_container druid.container|nil
function Container:set_parent_container(parent_container)
function M:set_parent_container(parent_container)
if not parent_container then
self._parent_container = nil
gui.set_parent(self.node, nil)
@@ -328,7 +327,7 @@ end
-- Glossary
-- Center Offset - vector from node position to visual center of node
function Container:refresh()
function M:refresh()
local x_koef, y_koef = self.x_koef, self.y_koef
self:refresh_scale()
@@ -400,7 +399,7 @@ function Container:refresh()
end
function Container:refresh_scale()
function M:refresh_scale()
if self._fit_node then
local fit_node_size = gui.get_size(self._fit_node)
@@ -416,7 +415,7 @@ function Container:refresh_scale()
end
function Container:update_child_containers()
function M:update_child_containers()
for index = 1, #self._containers do
self._containers[index]:refresh()
end
@@ -424,7 +423,7 @@ end
---@return druid.container @{Container}
function Container:create_draggable_corners()
function M:create_draggable_corners()
self:clear_draggable_corners()
for _, corner_pivot in pairs(CORNER_PIVOTS) do
@@ -454,7 +453,7 @@ end
---@return druid.container @{Container}
function Container:clear_draggable_corners()
function M:clear_draggable_corners()
for index = 1, #self._draggable_corners do
local drag_component = self._draggable_corners[index]
self.druid:remove(drag_component)
@@ -468,7 +467,7 @@ function Container:clear_draggable_corners()
end
function Container:_on_corner_drag(x, y, corner_offset)
function M:_on_corner_drag(x, y, corner_offset)
x = corner_offset.x >= 0 and x or -x
y = corner_offset.y >= 0 and y or -y
@@ -507,7 +506,7 @@ end
--- Set node for layout node to fit inside it. Pass nil to reset
---@param node string|node The node_id or gui.get_node(node_id)
---@return druid.container @{Layout}
function Container:fit_into_node(node)
function M:fit_into_node(node)
self._fit_node = self:get_node(node)
self:refresh_scale()
return self
@@ -516,7 +515,7 @@ end
---@param min_size_x number|nil
---@param min_size_y number|nil
function Container:set_min_size(min_size_x, min_size_y)
function M:set_min_size(min_size_x, min_size_y)
self.min_size_x = min_size_x or self.min_size_x
self.min_size_y = min_size_y or self.min_size_y
self:refresh()
@@ -525,4 +524,4 @@ function Container:set_min_size(min_size_x, min_size_y)
end
return Container
return M

120
example/components/example_scene/example_scene.gui
View File

@@ -1,105 +1,41 @@
script: ""
fonts {
name: "text_regular"
font: "/example/assets/fonts/text_regular.font"
}
background_color {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
nodes {
position {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 1080.0
y: 1030.0
z: 0.0
w: 1.0
}
color {
x: 0.129
y: 0.141
z: 0.157
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: ""
id: "root"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_STRETCH
layer: ""
inherit_alpha: true
slice9 {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: -530.0
y: 505.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 0.5
y: 0.5
z: 1.0
w: 1.0
}
size {
x: 1080.0
x: 800.0
y: 520.0
z: 0.0
w: 1.0
}
color {
x: 0.463
y: 0.475
z: 0.49
w: 1.0
}
type: TYPE_TEXT
blend_mode: BLEND_MODE_ALPHA
text: "Entities: 8\n"
"Top Index: 1\n"
"Bottom Index: 10\n"
@@ -107,40 +43,64 @@ nodes {
"Grid Size: 400x800"
font: "text_regular"
id: "text_debug_info"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_NW
outline {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
adjust_mode: ADJUST_MODE_FIT
line_break: false
parent: "root"
layer: "text_regular"
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.0
template_node_child: false
text_leading: 1.0
text_tracking: 0.0
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: 530.0
y: 505.0
}
scale {
x: 0.5
y: 0.5
}
size {
x: 1400.0
y: 100.0
}
color {
x: 0.463
y: 0.475
z: 0.49
}
type: TYPE_TEXT
text: "GUI: /path/some/file.gui"
font: "text_regular"
id: "text_gui_path"
pivot: PIVOT_NE
outline {
x: 1.0
y: 1.0
z: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
}
parent: "root"
layer: "text_regular"
inherit_alpha: true
outline_alpha: 0.0
shadow_alpha: 0.0
}
layers {
name: "text_regular"
}
material: "/builtins/materials/gui.material"
adjust_reference: ADJUST_REFERENCE_PARENT
max_nodes: 512

13
example/components/example_scene/example_scene.lua
View File

@@ -4,6 +4,7 @@ local container = require("example.components.container.container")
---@class example_scene: druid.base_component
---@field root druid.container
---@field text_debug_info druid.text
---@field text_gui_path druid.text
---@field druid druid_instance
local M = component.create("example_scene")
@@ -15,8 +16,10 @@ function M:init(template, nodes)
self.root = self.druid:new(container, "root") --[[@as druid.container]]
self.root:add_container("text_debug_info")
self.root:add_container("text_gui_path")
self.text_debug_info = self.druid:new_text("text_debug_info")
self.text_gui_path = self.druid:new_text("text_gui_path", "")
end
@@ -26,4 +29,14 @@ function M:set_debug_info(info)
end
---@param path string
function M:set_gui_path(path)
-- Path is a path to lua file
-- We need add "/" before path and replace .lua to .gui
path = "/" .. path:gsub(".lua", ".gui")
self.text_gui_path:set_to(path)
end
return M

7
example/components/examples_list_view/examples_list_view.lua
View File

@@ -111,6 +111,8 @@ function M:add_example(examples, druid_example)
self.on_set_information("")
end
druid_example.example_scene:set_gui_path(example_data.code_url)
druid_example.properties_panel:clear()
if example_data.properties_control then
example_data.properties_control(instance, druid_example.properties_panel)
@@ -135,11 +137,14 @@ end
---@param name_id string
---@return boolean @true if example was found and selected
function M:select_example_by_name_id(name_id)
print("Select example by name_id", name_id)
for index = 1, #self.examples do
local example = self.examples[index]
-- Scroll to the element
self.scroll:scroll_to(gui.get_position(example.list_item.root.node), true)
local target_pos = gui.get_position(example.list_item.root.node)
target_pos.y = target_pos.y + self.scroll.view_size.y / 2
self.scroll:scroll_to(target_pos, true)
-- Select the element
if example.data.name_id == name_id then

312
example/components/output_list/output_list.gui
View File

@@ -1,4 +1,3 @@
script: ""
fonts {
name: "text_regular"
font: "/example/assets/fonts/text_regular.font"
@@ -11,380 +10,232 @@ textures {
name: "druid"
texture: "/example/assets/druid.atlas"
}
background_color {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
nodes {
position {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 440.0
y: 280.0
z: 0.0
w: 1.0
}
color {
x: 0.173
y: 0.184
z: 0.204
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "druid/pixel"
id: "root"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_STRETCH
layer: "druid"
inherit_alpha: true
slice9 {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: -210.0
y: 130.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 0.9
y: 0.9
z: 1.0
w: 1.0
}
size {
x: 245.0
y: 50.0
z: 0.0
w: 1.0
}
color {
x: 0.463
y: 0.475
z: 0.49
w: 1.0
}
type: TYPE_TEXT
blend_mode: BLEND_MODE_ALPHA
text: "Output"
font: "text_regular"
id: "text_header"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_NW
outline {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
adjust_mode: ADJUST_MODE_FIT
line_break: false
parent: "root"
layer: "text_regular"
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.0
template_node_child: false
text_leading: 1.0
text_tracking: 0.0
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: -200.0
y: 80.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 400.0
y: 220.0
z: 0.0
w: 1.0
}
color {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
y: 190.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "druid/empty"
id: "scroll_view"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_NW
adjust_mode: ADJUST_MODE_STRETCH
parent: "root"
layer: "druid"
inherit_alpha: true
slice9 {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
clipping_mode: CLIPPING_MODE_STENCIL
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 400.0
y: 220.0
z: 0.0
w: 1.0
}
color {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
y: 190.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "druid/empty"
id: "scroll_content"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_NW
adjust_mode: ADJUST_MODE_STRETCH
parent: "scroll_view"
layer: "druid"
inherit_alpha: true
slice9 {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: false
material: ""
}
nodes {
position {
x: 0.0
y: -20.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 0.7
y: 0.7
z: 1.0
w: 1.0
}
size {
x: 571.4286
y: 40.0
z: 0.0
w: 1.0
}
color {
x: 0.941
y: 0.984
z: 1.0
w: 1.0
}
type: TYPE_TEXT
blend_mode: BLEND_MODE_ALPHA
text: "Log text"
font: "text_bold"
id: "text"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_W
outline {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
adjust_mode: ADJUST_MODE_FIT
line_break: false
parent: "scroll_content"
layer: ""
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.0
template_node_child: false
text_leading: 1.0
text_tracking: 0.0
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: 0.0
y: 140.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 440.0
y: 4.0
z: 0.0
w: 1.0
}
color {
x: 0.129
y: 0.141
z: 0.157
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "druid/pixel"
id: "separator"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_N
adjust_mode: ADJUST_MODE_FIT
parent: "root"
layer: "druid"
inherit_alpha: true
slice9 {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
nodes {
position {
x: -210.0
y: -138.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: true
material: ""
scale {
x: 0.5
y: 0.5
}
size {
x: 245.0
y: 50.0
}
color {
x: 0.463
y: 0.475
z: 0.49
}
type: TYPE_TEXT
text: "Defold 1.9.3"
font: "text_regular"
id: "text_version_defold"
pivot: PIVOT_SW
outline {
x: 1.0
y: 1.0
z: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
}
parent: "root"
layer: "text_regular"
inherit_alpha: true
alpha: 0.5
outline_alpha: 0.0
shadow_alpha: 0.0
}
nodes {
position {
x: 210.0
y: -138.0
}
scale {
x: 0.5
y: 0.5
}
size {
x: 245.0
y: 50.0
}
color {
x: 0.463
y: 0.475
z: 0.49
}
type: TYPE_TEXT
text: "Druid 1.0"
font: "text_regular"
id: "text_version_druid"
pivot: PIVOT_SE
outline {
x: 1.0
y: 1.0
z: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
}
parent: "root"
layer: "text_regular"
inherit_alpha: true
alpha: 0.5
outline_alpha: 0.0
shadow_alpha: 0.0
}
layers {
name: "druid"
@@ -394,4 +245,3 @@ layers {
}
material: "/builtins/materials/gui.material"
adjust_reference: ADJUST_REFERENCE_PARENT
max_nodes: 512

6
example/components/output_list/output_list.lua
View File

@@ -28,6 +28,12 @@ function M:init(template, nodes)
self.scroll:set_horizontal_scroll(false)
self.druid:new(lang_text, "text_header", "ui_output")
local defold_version = sys.get_engine_info().version
gui.set_text(self:get_node("text_version_defold"), "Defold v" .. defold_version)
local druid_version = sys.get_config_string("project.version")
gui.set_text(self:get_node("text_version_druid"), "Druid v" .. druid_version)
end

7
example/components/properties_panel/properties/property_checkbox.lua
View File

@@ -25,7 +25,7 @@ function M:init(template, nodes)
self.text_name = self.druid:new(lang_text, "text_name") --[[@as druid.lang_text]]
self.button = self.druid:new_button("button")
self.button = self.druid:new_button("button", self.on_click)
end
@@ -51,4 +51,9 @@ function M:get_value()
end
function M:on_click()
self:set_value(not self:get_value())
end
return M

341
example/components/properties_panel/properties/property_slider.gui
View File

@@ -1,4 +1,3 @@
script: ""
fonts {
name: "text_bold"
font: "/example/assets/fonts/text_bold.font"
@@ -7,237 +6,89 @@ textures {
name: "druid"
texture: "/example/assets/druid.atlas"
}
background_color {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
nodes {
position {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 400.0
y: 40.0
z: 0.0
w: 1.0
}
color {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "druid/empty"
id: "root"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_NW
adjust_mode: ADJUST_MODE_STRETCH
layer: ""
inherit_alpha: true
slice9 {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: false
material: ""
}
nodes {
position {
x: 0.0
y: -20.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 0.65
y: 0.65
z: 1.0
w: 1.0
}
size {
x: 200.0
y: 40.0
z: 0.0
w: 1.0
}
color {
x: 0.463
y: 0.475
z: 0.49
w: 1.0
}
type: TYPE_TEXT
blend_mode: BLEND_MODE_ALPHA
text: "Checkbox"
text: "Slider"
font: "text_bold"
id: "text_name"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_W
outline {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
adjust_mode: ADJUST_MODE_FIT
line_break: false
parent: "root"
layer: ""
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.0
template_node_child: false
text_leading: 1.0
text_tracking: 0.0
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: 400.0
y: -20.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 200.0
y: 100.0
z: 0.0
w: 1.0
}
color {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "druid/empty"
id: "E_Anchor"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_E
adjust_mode: ADJUST_MODE_STRETCH
parent: "root"
layer: ""
inherit_alpha: true
slice9 {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_AUTO
custom_type: 0
enabled: true
visible: false
material: ""
}
nodes {
position {
x: -20.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 60.0
y: 40.0
z: 0.0
w: 1.0
}
color {
x: 0.463
y: 0.475
z: 0.49
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "druid/rect_round2_width1"
id: "button"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_E
adjust_mode: ADJUST_MODE_FIT
parent: "E_Anchor"
layer: ""
inherit_alpha: true
slice9 {
x: 4.0
@@ -245,243 +96,98 @@ nodes {
z: 4.0
w: 4.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: 0.0
y: -20.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 60.0
y: 4.0
z: 0.0
w: 1.0
}
color {
x: 0.894
y: 0.506
z: 0.333
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "druid/pixel"
id: "selected"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_SE
adjust_mode: ADJUST_MODE_STRETCH
parent: "button"
layer: ""
inherit_alpha: true
slice9 {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: -30.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 0.55
y: 0.55
z: 1.0
w: 1.0
}
size {
x: 100.0
y: 40.0
z: 0.0
w: 1.0
}
color {
x: 0.722
y: 0.741
z: 0.761
w: 1.0
}
type: TYPE_TEXT
blend_mode: BLEND_MODE_ALPHA
text: "25 %"
font: "text_bold"
id: "text_value"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
outline {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
adjust_mode: ADJUST_MODE_FIT
line_break: false
parent: "button"
layer: ""
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.0
template_node_child: false
text_leading: 1.0
text_tracking: 0.0
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: 234.0
y: -20.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 160.0
y: 40.0
z: 0.0
w: 1.0
}
color {
x: 0.129
y: 0.141
z: 0.157
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "druid/empty"
id: "slider"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "root"
layer: ""
inherit_alpha: true
slice9 {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 160.0
y: 8.0
z: 0.0
w: 1.0
}
color {
x: 0.129
y: 0.141
z: 0.157
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "druid/ui_circle_8"
id: "slider_back"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "slider"
layer: ""
inherit_alpha: true
slice9 {
x: 4.0
@@ -489,58 +195,24 @@ nodes {
z: 4.0
w: 4.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: -68.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 24.0
y: 24.0
z: 0.0
w: 1.0
}
color {
x: 0.722
y: 0.741
z: 0.761
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "druid/ui_circle_8"
id: "slider_pin"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "slider"
layer: ""
inherit_alpha: true
slice9 {
x: 4.0
@@ -548,17 +220,6 @@ nodes {
z: 4.0
w: 4.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: true
material: ""
}
material: "/builtins/materials/gui.material"
adjust_reference: ADJUST_REFERENCE_PARENT
max_nodes: 512

1
example/components/properties_panel/properties_panel.lua
View File

@@ -71,7 +71,6 @@ function M:add_checkbox(text_id, initial_value, on_change_callback)
instance.text_name:translate(text_id)
instance:set_value(initial_value, true)
instance.button.on_click:subscribe(function()
instance:set_value(not instance:get_value())
on_change_callback(instance:get_value())
end)

464
example/druid.gui
View File

@@ -613,6 +613,18 @@ nodes {
parent: "output_list/root"
template_node_child: true
}
nodes {
type: TYPE_TEXT
id: "output_list/text_version_defold"
parent: "output_list/root"
template_node_child: true
}
nodes {
type: TYPE_TEXT
id: "output_list/text_version_druid"
parent: "output_list/root"
template_node_child: true
}
nodes {
position {
x: -20.0
@@ -651,6 +663,12 @@ nodes {
parent: "example_scene/root"
template_node_child: true
}
nodes {
type: TYPE_TEXT
id: "example_scene/text_gui_path"
parent: "example_scene/root"
template_node_child: true
}
nodes {
size {
x: 200.0
@@ -941,6 +959,12 @@ nodes {
parent: "scroll/button_stencil/root"
template_node_child: true
}
nodes {
type: TYPE_TEXT
id: "scroll/ui_scroll_text_fill"
parent: "scroll/scroll_content"
template_node_child: true
}
nodes {
type: TYPE_TEMPLATE
id: "grid"
@@ -2164,33 +2188,239 @@ nodes {
}
nodes {
type: TYPE_TEMPLATE
id: "basic_checkbox"
id: "checkbox"
parent: "basic"
inherit_alpha: true
template: "/example/examples/basic/checkbox/basic_checkbox.gui"
template: "/example/examples/basic/checkbox/checkbox.gui"
}
nodes {
type: TYPE_BOX
id: "basic_checkbox/root"
parent: "basic_checkbox"
id: "checkbox/root"
parent: "checkbox"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "basic_checkbox/button"
parent: "basic_checkbox/root"
id: "checkbox/button"
parent: "checkbox/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "basic_checkbox/icon"
parent: "basic_checkbox/button"
id: "checkbox/icon"
parent: "checkbox/button"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "basic_checkbox/selected"
parent: "basic_checkbox/button"
id: "checkbox/selected"
parent: "checkbox/button"
template_node_child: true
}
nodes {
type: TYPE_TEMPLATE
id: "radio_group"
parent: "basic"
inherit_alpha: true
template: "/example/examples/basic/radio_group/radio_group.gui"
}
nodes {
type: TYPE_BOX
id: "radio_group/root"
parent: "radio_group"
template_node_child: true
}
nodes {
type: TYPE_TEMPLATE
id: "radio_group/checkbox_1"
parent: "radio_group/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "radio_group/checkbox_1/root"
parent: "radio_group/checkbox_1"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "radio_group/checkbox_1/button"
parent: "radio_group/checkbox_1/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "radio_group/checkbox_1/icon"
parent: "radio_group/checkbox_1/button"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "radio_group/checkbox_1/selected"
parent: "radio_group/checkbox_1/button"
template_node_child: true
}
nodes {
type: TYPE_TEMPLATE
id: "radio_group/checkbox_2"
parent: "radio_group/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "radio_group/checkbox_2/root"
parent: "radio_group/checkbox_2"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "radio_group/checkbox_2/button"
parent: "radio_group/checkbox_2/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "radio_group/checkbox_2/icon"
parent: "radio_group/checkbox_2/button"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "radio_group/checkbox_2/selected"
parent: "radio_group/checkbox_2/button"
template_node_child: true
}
nodes {
type: TYPE_TEMPLATE
id: "radio_group/checkbox_3"
parent: "radio_group/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "radio_group/checkbox_3/root"
parent: "radio_group/checkbox_3"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "radio_group/checkbox_3/button"
parent: "radio_group/checkbox_3/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "radio_group/checkbox_3/icon"
parent: "radio_group/checkbox_3/button"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "radio_group/checkbox_3/selected"
parent: "radio_group/checkbox_3/button"
template_node_child: true
}
nodes {
type: TYPE_TEMPLATE
id: "checkbox_group"
parent: "basic"
inherit_alpha: true
template: "/example/examples/basic/checkbox_group/checkbox_group.gui"
}
nodes {
type: TYPE_BOX
id: "checkbox_group/root"
parent: "checkbox_group"
template_node_child: true
}
nodes {
type: TYPE_TEMPLATE
id: "checkbox_group/checkbox_1"
parent: "checkbox_group/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "checkbox_group/checkbox_1/root"
parent: "checkbox_group/checkbox_1"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "checkbox_group/checkbox_1/button"
parent: "checkbox_group/checkbox_1/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "checkbox_group/checkbox_1/icon"
parent: "checkbox_group/checkbox_1/button"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "checkbox_group/checkbox_1/selected"
parent: "checkbox_group/checkbox_1/button"
template_node_child: true
}
nodes {
type: TYPE_TEMPLATE
id: "checkbox_group/checkbox_2"
parent: "checkbox_group/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "checkbox_group/checkbox_2/root"
parent: "checkbox_group/checkbox_2"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "checkbox_group/checkbox_2/button"
parent: "checkbox_group/checkbox_2/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "checkbox_group/checkbox_2/icon"
parent: "checkbox_group/checkbox_2/button"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "checkbox_group/checkbox_2/selected"
parent: "checkbox_group/checkbox_2/button"
template_node_child: true
}
nodes {
type: TYPE_TEMPLATE
id: "checkbox_group/checkbox_3"
parent: "checkbox_group/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "checkbox_group/checkbox_3/root"
parent: "checkbox_group/checkbox_3"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "checkbox_group/checkbox_3/button"
parent: "checkbox_group/checkbox_3/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "checkbox_group/checkbox_3/icon"
parent: "checkbox_group/checkbox_3/button"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "checkbox_group/checkbox_3/selected"
parent: "checkbox_group/checkbox_3/button"
template_node_child: true
}
nodes {
@@ -3475,6 +3705,220 @@ nodes {
parent: "basic_layout/layout"
template_node_child: true
}
nodes {
type: TYPE_BOX
texture: "druid/empty"
id: "widgets"
parent: "examples"
inherit_alpha: true
size_mode: SIZE_MODE_AUTO
visible: false
}
nodes {
type: TYPE_TEMPLATE
id: "hover_hint_example"
parent: "widgets"
inherit_alpha: true
template: "/example/examples/widgets/hover_hint/hover_hint_example.gui"
}
nodes {
type: TYPE_BOX
id: "hover_hint_example/root"
parent: "hover_hint_example"
template_node_child: true
}
nodes {
type: TYPE_TEMPLATE
id: "hover_hint_example/hover_hint"
parent: "hover_hint_example/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "hover_hint_example/hover_hint/root"
parent: "hover_hint_example/hover_hint"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "hover_hint_example/hover_hint/panel_hint"
parent: "hover_hint_example/hover_hint/root"
template_node_child: true
}
nodes {
type: TYPE_TEXT
id: "hover_hint_example/hover_hint/text_hint"
parent: "hover_hint_example/hover_hint/panel_hint"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "hover_hint_example/node_yellow"
parent: "hover_hint_example/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "hover_hint_example/node_red"
parent: "hover_hint_example/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "hover_hint_example/node_blue"
parent: "hover_hint_example/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "hover_hint_example/node_green"
parent: "hover_hint_example/root"
template_node_child: true
}
nodes {
position {
x: -200.0
}
type: TYPE_TEMPLATE
id: "property_button"
parent: "widgets"
inherit_alpha: true
template: "/example/components/properties_panel/properties/property_button.gui"
}
nodes {
type: TYPE_BOX
id: "property_button/root"
parent: "property_button"
template_node_child: true
}
nodes {
type: TYPE_TEXT
id: "property_button/text_name"
parent: "property_button/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "property_button/button"
parent: "property_button/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "property_button/selected"
parent: "property_button/button"
template_node_child: true
}
nodes {
type: TYPE_TEXT
id: "property_button/text_button"
parent: "property_button/button"
template_node_child: true
}
nodes {
position {
x: -200.0
}
type: TYPE_TEMPLATE
id: "property_checkbox"
parent: "widgets"
inherit_alpha: true
template: "/example/components/properties_panel/properties/property_checkbox.gui"
}
nodes {
type: TYPE_BOX
id: "property_checkbox/root"
parent: "property_checkbox"
template_node_child: true
}
nodes {
type: TYPE_TEXT
id: "property_checkbox/text_name"
parent: "property_checkbox/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "property_checkbox/button"
parent: "property_checkbox/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "property_checkbox/icon"
parent: "property_checkbox/button"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "property_checkbox/selected"
parent: "property_checkbox/button"
template_node_child: true
}
nodes {
position {
x: -200.0
}
type: TYPE_TEMPLATE
id: "property_slider"
parent: "widgets"
inherit_alpha: true
template: "/example/components/properties_panel/properties/property_slider.gui"
}
nodes {
type: TYPE_BOX
id: "property_slider/root"
parent: "property_slider"
template_node_child: true
}
nodes {
type: TYPE_TEXT
id: "property_slider/text_name"
parent: "property_slider/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "property_slider/E_Anchor"
parent: "property_slider/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "property_slider/button"
parent: "property_slider/E_Anchor"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "property_slider/selected"
parent: "property_slider/button"
template_node_child: true
}
nodes {
type: TYPE_TEXT
id: "property_slider/text_value"
parent: "property_slider/button"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "property_slider/slider"
parent: "property_slider/root"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "property_slider/slider_back"
parent: "property_slider/slider"
template_node_child: true
}
nodes {
type: TYPE_BOX
id: "property_slider/slider_pin"
parent: "property_slider/slider"
template_node_child: true
}
nodes {
position {
x: -20.0

4
example/druid.gui_script
View File

@@ -118,7 +118,7 @@ local function setup_components(self)
return
end
local url_prefix = "https://github.com/Insality/druid/blob/master/"
local url_prefix = "https://github.com/Insality/druid/blob/develop/"
sys.open_url(url_prefix .. code_url, { target = "_blank" })
end)
end
@@ -166,6 +166,8 @@ local function setup_examples(self)
end
select_start_example(self)
print("Loaded examples: " .. #self.examples_list_view.examples)
end

2
example/examples/basic/button/basic_button_hold.gui
View File

@@ -85,7 +85,7 @@ nodes {
z: 0.322
}
type: TYPE_TEXT
text: "Confirm"
text: "Hold Me"
font: "text_bold"
id: "text"
outline {

77
example/examples/basic/checkbox/basic_checkbox.gui
View File

@@ -1,77 +0,0 @@
fonts {
name: "text_bold"
font: "/example/assets/fonts/text_bold.font"
}
textures {
name: "druid"
texture: "/example/assets/druid.atlas"
}
nodes {
size {
x: 200.0
y: 100.0
}
type: TYPE_BOX
id: "root"
inherit_alpha: true
size_mode: SIZE_MODE_AUTO
visible: false
}
nodes {
size {
x: 40.0
y: 40.0
}
color {
x: 0.463
y: 0.475
z: 0.49
}
type: TYPE_BOX
texture: "druid/rect_round2_width1"
id: "button"
parent: "root"
inherit_alpha: true
slice9 {
x: 4.0
y: 4.0
z: 4.0
w: 4.0
}
}
nodes {
color {
x: 0.722
y: 0.741
z: 0.761
}
type: TYPE_BOX
texture: "druid/icon_check"
id: "icon"
parent: "button"
inherit_alpha: true
size_mode: SIZE_MODE_AUTO
}
nodes {
position {
y: -20.0
}
size {
x: 40.0
y: 4.0
}
color {
x: 0.894
y: 0.506
z: 0.333
}
type: TYPE_BOX
texture: "druid/pixel"
id: "selected"
pivot: PIVOT_S
adjust_mode: ADJUST_MODE_STRETCH
parent: "button"
inherit_alpha: true
}
material: "/builtins/materials/gui.material"
adjust_reference: ADJUST_REFERENCE_PARENT

41
example/examples/basic/checkbox/basic_checkbox.lua
View File

@@ -1,41 +0,0 @@
local component = require("druid.component")
---@class basic_checkbox: druid.base_component
---@field druid druid_instance
---@field button druid.button
local M = component.create("basic_checkbox")
---@param template string
---@param nodes table<hash, node>
function M:init(template, nodes)
self.druid = self:get_druid(template, nodes)
self.button = self.druid:new_button("button", self.on_checkbox_click) -- Button to handle checkbox
self.icon = self:get_node("icon") -- Checkbox icon to hide/show
self.selected = self:get_node("selected") -- Selected effect to show when checkbox is changed
gui.set_alpha(self.selected, 0)
self:set_state(false)
end
function M:on_checkbox_click()
self:set_state(not self.is_enabled)
end
function M:set_state(is_enabled)
if self.is_enabled == is_enabled then
return
end
self.is_enabled = is_enabled
gui.set_enabled(self.icon, self.is_enabled)
gui.set_alpha(self.selected, 1)
gui.animate(self.selected, "color.w", 0, gui.EASING_INSINE, 0.16)
end
return M

148
example/examples/basic/examples_list.lua
View File

@@ -144,6 +144,27 @@ function M.get_examples()
end
instance.text:set_text_adjust(adjust_types[adjust_index], 0.8)
end)
local pivot_index = 1
local pivot_list = {
gui.PIVOT_CENTER,
gui.PIVOT_W,
gui.PIVOT_SW,
gui.PIVOT_S,
gui.PIVOT_SE,
gui.PIVOT_E,
gui.PIVOT_NE,
gui.PIVOT_N,
gui.PIVOT_NW,
}
properties_panel:add_button("ui_pivot_next", function()
pivot_index = pivot_index + 1
if pivot_index > #pivot_list then
pivot_index = 1
end
instance:set_pivot(pivot_list[pivot_index])
end)
end,
get_debug_info = function(instance)
---@cast instance multiline_text
@@ -323,6 +344,7 @@ function M.get_examples()
end,
properties_control = function(instance, properties_panel)
---@cast instance scroll
local scroll = instance.scroll
local is_stretch = instance.scroll.style.EXTRA_STRETCH_SIZE > 0
properties_panel:add_checkbox("ui_elastic_scroll", is_stretch, function(value)
instance.scroll:set_extra_stretch_size(value and 100 or 0)
@@ -333,6 +355,35 @@ function M.get_examples()
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)
local slider_frict = properties_panel:add_slider("ui_slider_friction", 0, function(value)
scroll.style.FRICT = 1 - ((1 - value) * 0.1)
end)
slider_frict:set_text_function(function(value)
return string.format("%.2f", 1 - ((1 - value) * 0.1))
end)
slider_frict:set_value(1 - (1 - scroll.style.FRICT) / 0.1)
local slider_speed = properties_panel:add_slider("ui_slider_speed", 0, function(value)
scroll.style.INERT_SPEED = value * 50
end)
slider_speed:set_value(scroll.style.INERT_SPEED / 50)
slider_speed:set_text_function(function(value)
return string.format("%.1f", value * 50)
end)
local slider_wheel_speed = properties_panel:add_slider("ui_slider_wheel_speed", 0, function(value)
scroll.style.WHEEL_SCROLL_SPEED = value * 30
end)
slider_wheel_speed:set_value(scroll.style.WHEEL_SCROLL_SPEED / 30)
slider_wheel_speed:set_text_function(function(value)
return string.format("%.1f", value * 30)
end)
local wheel_by_inertion = properties_panel:add_checkbox("ui_wheel_by_inertion", scroll.style.WHEEL_SCROLL_BY_INERTION, function(value)
scroll.style.WHEEL_SCROLL_BY_INERTION = value
end)
wheel_by_inertion:set_value(scroll.style.WHEEL_SCROLL_BY_INERTION)
end,
get_debug_info = function(instance)
---@cast instance scroll
@@ -377,10 +428,12 @@ function M.get_examples()
properties_control = function(instance, properties_panel)
---@cast instance grid
local grid = instance.grid
local slider = properties_panel:add_slider("ui_grid_in_row", 0.3, function(value)
local in_row_amount = math.ceil(value * 10)
in_row_amount = math.max(1, in_row_amount)
instance.grid:set_in_row(in_row_amount)
grid:set_in_row(in_row_amount)
end)
slider:set_text_function(function(value)
return tostring(math.ceil(value * 10))
@@ -400,7 +453,58 @@ function M.get_examples()
properties_panel:add_button("ui_clear_elements", function()
instance:clear()
end)
properties_panel:add_checkbox("ui_dynamic_pos", grid.style.IS_DYNAMIC_NODE_POSES, function()
grid.style.IS_DYNAMIC_NODE_POSES = not grid.style.IS_DYNAMIC_NODE_POSES
grid:refresh()
end)
properties_panel:add_checkbox("ui_align_last_row", grid.style.IS_ALIGN_LAST_ROW, function()
grid.style.IS_ALIGN_LAST_ROW = not grid.style.IS_ALIGN_LAST_ROW
grid:refresh()
end)
local pivot_index = 1
local pivot_list = {
gui.PIVOT_CENTER,
gui.PIVOT_W,
gui.PIVOT_SW,
gui.PIVOT_S,
gui.PIVOT_SE,
gui.PIVOT_E,
gui.PIVOT_NE,
gui.PIVOT_N,
gui.PIVOT_NW,
}
properties_panel:add_button("ui_pivot_next", function()
pivot_index = pivot_index + 1
if pivot_index > #pivot_list then
pivot_index = 1
end
grid:set_pivot(pivot_list[pivot_index])
end)
local slider_size = properties_panel:add_slider("ui_item_size", 0.5, function(value)
local size = 50 + value * 100
grid:set_item_size(size, size)
end)
slider_size:set_text_function(function(value)
return tostring(50 + math.ceil(value * 100))
end)
slider_size:set_value(0.5)
end,
get_debug_info = function(instance)
---@cast instance grid
local info = ""
local grid = instance.grid
info = info .. "Grid Items: " .. #grid.nodes .. "\n"
info = info .. "Grid Item Size: " .. grid.node_size.x .. " x " .. grid.node_size.y .. "\n"
info = info .. "Pivot: " .. tostring(grid.pivot)
return info
end
},
{
name_id = "ui_example_basic_scroll_bind_grid",
@@ -702,19 +806,47 @@ function M.get_examples()
end,
},
{
name_id = "ui_example_basic_checkbox",
information_text_id = "ui_example_basic_checkbox_description",
template = "basic_checkbox",
root = "basic_checkbox/root",
code_url = "example/examples/basic/checkbox/basic_checkbox.lua",
component_class = require("example.examples.basic.checkbox.basic_checkbox"),
name_id = "ui_example_checkbox",
information_text_id = "ui_example_checkbox_description",
template = "checkbox",
root = "checkbox/root",
code_url = "example/examples/basic/checkbox/checkbox.lua",
component_class = require("example.examples.basic.checkbox.checkbox"),
on_create = function(instance, output_log)
---@cast instance basic_checkbox
---@cast instance checkbox
instance.button.on_click:subscribe(function()
output_log:add_log_text("Checkbox Clicked: " .. tostring(instance.is_enabled))
end)
end,
},
{
name_id = "ui_example_checkbox_group",
information_text_id = "ui_example_checkbox_group_description",
template = "checkbox_group",
root = "checkbox_group/root",
code_url = "example/examples/basic/checkbox_group/checkbox_group.lua",
component_class = require("example.examples.basic.checkbox_group.checkbox_group"),
on_create = function(instance, output_log)
---@cast instance checkbox_group
instance.on_state_changed:subscribe(function(state1, state2, state3)
output_log:add_log_text("State: " .. tostring(state1) .. " " .. tostring(state2) .. " " .. tostring(state3))
end)
end,
},
{
name_id = "ui_example_radio_group",
information_text_id = "ui_example_radio_group_description",
template = "radio_group",
root = "radio_group/root",
code_url = "example/examples/basic/radio_group/radio_group.lua",
component_class = require("example.examples.basic.radio_group.radio_group"),
on_create = function(instance, output_log)
---@cast instance radio_group
instance.on_state_changed:subscribe(function(selected)
output_log:add_log_text("Selected: " .. selected)
end)
end,
},
}
end

4
example/examples/basic/rich_text/basic_rich_text.gui
View File

@@ -21,9 +21,6 @@ nodes {
visible: false
}
nodes {
position {
x: -200.0
}
size {
x: 400.0
y: 100.0
@@ -36,7 +33,6 @@ nodes {
text: "Hello I\'m a Rich Text!"
font: "text_regular"
id: "text"
pivot: PIVOT_W
parent: "root"
inherit_alpha: true
outline_alpha: 0.0

604
example/examples/basic/scroll/scroll.gui
View File

@@ -1,4 +1,3 @@
script: ""
fonts {
name: "text_bold"
font: "/example/assets/fonts/text_bold.font"
@@ -7,111 +6,30 @@ textures {
name: "druid"
texture: "/example/assets/druid.atlas"
}
background_color {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
nodes {
position {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 200.0
y: 100.0
z: 0.0
w: 1.0
}
color {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: ""
id: "root"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
layer: ""
inherit_alpha: true
slice9 {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: false
material: ""
}
nodes {
position {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 400.0
y: 1000.0
z: 0.0
w: 1.0
}
color {
x: 0.173
y: 0.184
z: 0.204
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "druid/ui_circle_32"
id: "scroll_view"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "root"
layer: ""
inherit_alpha: true
slice9 {
x: 16.0
@@ -120,57 +38,25 @@ nodes {
w: 16.0
}
clipping_mode: CLIPPING_MODE_STENCIL
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: 0.0
y: 500.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 400.0
y: 1700.0
z: 0.0
w: 1.0
y: 2700.0
}
color {
x: 0.173
y: 0.184
z: 0.204
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "druid/empty"
id: "scroll_content"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_N
adjust_mode: ADJUST_MODE_FIT
parent: "scroll_view"
layer: ""
inherit_alpha: true
slice9 {
x: 16.0
@@ -178,219 +64,50 @@ nodes {
z: 16.0
w: 16.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: false
material: ""
}
nodes {
position {
x: 0.0
y: -946.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 200.0
y: 100.0
z: 0.0
w: 1.0
}
color {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
type: TYPE_TEMPLATE
id: "button_tutorial"
parent: "scroll_content"
layer: ""
inherit_alpha: true
alpha: 1.0
template: "/example/templates/button_text_green.gui"
template_node_child: false
custom_type: 0
enabled: true
}
nodes {
position {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 280.0
y: 90.0
z: 0.0
w: 1.0
}
color {
x: 0.557
y: 0.835
z: 0.62
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "druid/ui_circle_32"
id: "button_tutorial/root"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "button_tutorial"
layer: "druid"
inherit_alpha: true
slice9 {
x: 16.0
y: 16.0
z: 16.0
w: 16.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: true
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 245.0
y: 50.0
z: 0.0
w: 1.0
}
color {
x: 0.31
y: 0.318
z: 0.322
w: 1.0
}
type: TYPE_TEXT
blend_mode: BLEND_MODE_ALPHA
text: "I do nothing!"
font: "text_bold"
id: "button_tutorial/text"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
outline {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
adjust_mode: ADJUST_MODE_FIT
line_break: false
parent: "button_tutorial/root"
layer: "text_bold"
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.0
overridden_fields: 8
template_node_child: true
text_leading: 1.0
text_tracking: 0.0
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: -185.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 0.75
y: 0.75
z: 1.0
w: 1.0
}
size {
x: 500.0
y: 900.0
z: 0.0
w: 1.0
}
color {
x: 0.722
y: 0.741
z: 0.761
w: 1.0
}
type: TYPE_TEXT
blend_mode: BLEND_MODE_ALPHA
text: "To setup scroll in your scene\n"
"\n"
"- Place \"View\" box node\n"
@@ -400,477 +117,280 @@ nodes {
"- Init scroll with `druid:new_scroll(\"view\", \"content\")"
font: "text_bold"
id: "ui_scroll_text_1"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_NW
outline {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
adjust_mode: ADJUST_MODE_FIT
line_break: true
parent: "scroll_content"
layer: ""
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.0
template_node_child: false
text_leading: 1.0
text_tracking: 0.0
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: -185.0
y: -482.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 0.75
y: 0.75
z: 1.0
w: 1.0
}
size {
x: 500.0
y: 400.0
z: 0.0
w: 1.0
}
color {
x: 0.722
y: 0.741
z: 0.761
w: 1.0
}
type: TYPE_TEXT
blend_mode: BLEND_MODE_ALPHA
text: "Now your content node can be scrollable in View node borders. In this example the content node contains this tutorial text"
font: "text_bold"
id: "ui_scroll_text_2"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_NW
outline {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
adjust_mode: ADJUST_MODE_FIT
line_break: true
parent: "scroll_content"
layer: ""
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.0
template_node_child: false
text_leading: 1.0
text_tracking: 0.0
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: -185.0
y: -713.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 0.75
y: 0.75
z: 1.0
w: 1.0
}
size {
x: 500.0
y: 400.0
z: 0.0
w: 1.0
}
color {
x: 0.722
y: 0.741
z: 0.761
w: 1.0
}
type: TYPE_TEXT
blend_mode: BLEND_MODE_ALPHA
text: "All other components are placed as usual.\n"
"\n"
"For example, button:"
font: "text_bold"
id: "ui_scroll_text_3"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_NW
outline {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
adjust_mode: ADJUST_MODE_FIT
line_break: true
parent: "scroll_content"
layer: ""
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.0
template_node_child: false
text_leading: 1.0
text_tracking: 0.0
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: -185.0
y: -1042.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 0.75
y: 0.75
z: 1.0
w: 1.0
}
size {
x: 500.0
y: 400.0
z: 0.0
w: 1.0
}
color {
x: 0.722
y: 0.741
z: 0.761
w: 1.0
}
type: TYPE_TEXT
blend_mode: BLEND_MODE_ALPHA
text: "You probably wish to add \"stencil\" to your view node to clip all content what outside scroll"
font: "text_bold"
id: "ui_scroll_text_4"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_NW
outline {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
adjust_mode: ADJUST_MODE_FIT
line_break: true
parent: "scroll_content"
layer: ""
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.0
template_node_child: false
text_leading: 1.0
text_tracking: 0.0
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: -185.0
y: -1257.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 0.75
y: 0.75
z: 1.0
w: 1.0
}
size {
x: 500.0
y: 400.0
z: 0.0
w: 1.0
}
color {
x: 0.722
y: 0.741
z: 0.761
w: 1.0
}
type: TYPE_TEXT
blend_mode: BLEND_MODE_ALPHA
text: "Druid automatically checks the stencil nodes to add a \"click zone\" for input elements like buttons to prevent the input if they are outside of stencil nodes"
font: "text_bold"
id: "ui_scroll_text_5"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_NW
outline {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
adjust_mode: ADJUST_MODE_FIT
line_break: true
parent: "scroll_content"
layer: ""
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.0
template_node_child: false
text_leading: 1.0
text_tracking: 0.0
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: 0.0
y: -1605.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 200.0
y: 100.0
z: 0.0
w: 1.0
}
color {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
type: TYPE_TEMPLATE
id: "button_stencil"
parent: "scroll_content"
layer: ""
inherit_alpha: true
alpha: 1.0
template: "/example/templates/button_text_green.gui"
template_node_child: false
custom_type: 0
enabled: true
}
nodes {
position {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 280.0
y: 90.0
z: 0.0
w: 1.0
}
color {
x: 0.557
y: 0.835
z: 0.62
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "druid/ui_circle_32"
id: "button_stencil/root"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "button_stencil"
layer: "druid"
inherit_alpha: true
slice9 {
x: 16.0
y: 16.0
z: 16.0
w: 16.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: true
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: true
material: ""
}
nodes {
position {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
x: 0.8
y: 0.8
}
size {
x: 245.0
x: 300.0
y: 50.0
z: 0.0
w: 1.0
}
color {
x: 0.31
y: 0.318
z: 0.322
w: 1.0
}
type: TYPE_TEXT
blend_mode: BLEND_MODE_ALPHA
text: "Try click me outside"
font: "text_bold"
text: "Click outside stencil node"
id: "button_stencil/text"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
line_break: true
parent: "button_stencil/root"
overridden_fields: 3
overridden_fields: 4
overridden_fields: 8
overridden_fields: 18
template_node_child: true
}
nodes {
position {
x: -185.0
y: -1751.0
}
scale {
x: 0.75
y: 0.75
}
size {
x: 500.0
y: 400.0
}
color {
x: 0.722
y: 0.741
z: 0.761
}
type: TYPE_TEXT
text: "--------\n"
"\n"
"--------\n"
"--------\n"
"\n"
"--------\n"
"--------\n"
"\n"
"--------\n"
"--------\n"
"\n"
"--------\n"
"\n"
"--------\n"
"\n"
"--------\n"
"--------\n"
"\n"
"--------\n"
"--------\n"
"\n"
"--------\n"
"--------\n"
"\n"
"--------\n"
""
font: "text_bold"
id: "ui_scroll_text_fill"
pivot: PIVOT_NW
outline {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
adjust_mode: ADJUST_MODE_FIT
line_break: true
parent: "button_stencil/root"
layer: "text_bold"
parent: "scroll_content"
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.0
overridden_fields: 8
overridden_fields: 18
template_node_child: true
text_leading: 1.0
text_tracking: 0.0
custom_type: 0
enabled: true
visible: true
material: ""
}
material: "/builtins/materials/gui.material"
adjust_reference: ADJUST_REFERENCE_PARENT
max_nodes: 512

2
example/examples/basic/slider/basic_slider_vertical.gui
View File

@@ -68,7 +68,7 @@ nodes {
}
nodes {
position {
y: 160.0
y: 170.0
}
size {
x: 150.0

16
example/examples/basic/text/multiline_text.lua
View File

@@ -1,3 +1,4 @@
local helper = require("druid.helper")
local component = require("druid.component")
local container = require("example.components.container.container")
@@ -17,10 +18,25 @@ function M:init(template, nodes)
-- This code is for adjustable text area with mouse
self.container = self.druid:new(container, "text_area", nil, function(_, size)
self.text:set_size(size)
self:refresh_text_position()
end) --[[@as druid.container]]
self.container:create_draggable_corners()
end
function M:set_pivot(pivot)
self.text:set_pivot(pivot)
self:refresh_text_position()
end
function M:refresh_text_position()
-- Need to update text position with different pivot
local pivot = gui.get_pivot(self.text.node)
local pivot_offset = helper.get_pivot_offset(pivot)
gui.set_position(self.text.node, vmath.vector3(pivot_offset.x * self.text.start_size.x, pivot_offset.y * self.text.start_size.y, 0))
end
return M

6
example/examples/data_list/examples_list.lua
View File

@@ -117,15 +117,15 @@ function M.get_examples()
instance.scroll:scroll_to_percent(vmath.vector3(0, 1 - value, 0), true)
end)
properties_panel:add_button("ui_add_item", function()
properties_panel:add_button("ui_add_element", function()
instance:add_item()
end)
properties_panel:add_button("ui_remove_item", function()
properties_panel:add_button("ui_remove_element", function()
instance:remove_item()
end)
properties_panel:add_button("ui_clear_items", function()
properties_panel:add_button("ui_clear_elements", function()
instance.data_list:clear()
end)
end,

2
example/examples/druid_examples.lua
View File

@@ -4,6 +4,7 @@ local data_list_examples = require("example.examples.data_list.examples_list")
local layout_examples = require("example.examples.layout.examples_list")
local gamepad_examples = require("example.examples.gamepad.examples_list")
local window_examples = require("example.examples.windows.examples_list")
local widgets_examples = require("example.examples.widgets.examples_list")
local panthera_examples = require("example.examples.panthera.examples_list")
local M = {}
@@ -42,6 +43,7 @@ function M.get_examples()
add_examples(examples, "ui_examples_gamepad", gamepad_examples.get_examples())
add_examples(examples, "ui_examples_window", window_examples.get_examples())
add_examples(examples, "ui_examples_panthera", panthera_examples.get_examples())
add_examples(examples, "ui_examples_widgets", widgets_examples.get_examples())
return examples
end

4
example/examples/windows/examples_list.lua
View File

@@ -6,6 +6,7 @@ function M.get_examples()
return {
{
name_id = "ui_example_window_language",
information_text_id = "ui_example_window_language_description",
template = "window_language",
root = "window_language/root",
code_url = "example/examples/windows/window_language/window_language.lua",
@@ -38,9 +39,6 @@ function M.get_examples()
output_list:add_log_text("Confirmation Declined")
end)
end,
get_debug_info = function(instance)
return "Any info we want"
end
},
{
name_id = "ui_example_window_information",

49
example/locales/en.json
View File

@@ -1,5 +1,5 @@
{
"additional_characters": "\"&! :%1234567890*абвгдеёжзийклмнопрстуфхцчшщъыьэюяАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯÀàÂâÆæÇçÈèÉéÊêËëÎîÏïÔôŒœÙùÛûÜüŸÿ",
"additional_characters": " 1234567890!@#$%^&*()_+-=`[]{}|;':\",.<>/?ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzабвгдеёжзийклмнопрстуфхцчшщъыьэюяАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯÀàÂâÆæÇçÈèÉéÊêËëÎîÏïÔôŒœÙùÛûÜüŸÿ",
"ui_examples": "Examples",
"ui_properties_panel": "Properties",
"ui_output": "Output",
@@ -85,8 +85,12 @@
"ui_example_basic_hotkey_description": "How to create a hotkey for a callback",
"ui_example_basic_scroll": "Scroll",
"ui_example_basic_scroll_description": "How to make simple scroll",
"ui_example_basic_scroll_description": "How to make a simple scroll",
"ui_elastic_scroll": "Elastic Scroll",
"ui_slider_friction": "Scroll Friction",
"ui_slider_speed": "Scroll Speed",
"ui_slider_wheel_speed": "Wheel Speed",
"ui_wheel_by_inertion": "Wheel By Inertion",
"ui_example_basic_scroll_slider": "Scroll with Slider",
"ui_example_basic_scroll_slider_description": "How to add a slider control to the scroll and use them",
@@ -97,6 +101,8 @@
"ui_add_element": "Add Element",
"ui_remove_element": "Remove Element",
"ui_clear_elements": "Clear Elements",
"ui_dynamic_pos": "Dynamic Position",
"ui_align_last_row": "Align Last Row",
"ui_example_basic_scroll_bind_grid": "Scroll Grid",
"ui_example_basic_scroll_bind_grid_description": "Scroll works good with grids and predefined sizes, this is an example of scroll bind grid.",
@@ -105,6 +111,7 @@
"ui_example_basic_scroll_bind_grid_horizontal_description": "Scroll works good with grids and predefined sizes, this is an example of scroll bind grid horizontal.",
"ui_example_basic_scroll_bind_grid_points": "Scroll Grid Points",
"ui_example_basic_scroll_bind_grid_points_description": "Scrolls with points of interest to snap to",
"ui_example_basic_input": "Input",
"ui_example_basic_input_description": "How to make most simple input in Druid",
@@ -119,19 +126,25 @@
"ui_example_basic_rich_text_description": "How to create a rich text in Druid",
"ui_example_rich_text_tags": "Rich Text Tags",
"ui_example_rich_text_tags_description": "Here is a simple example of rich text with tags\n - <color=A1D7F5>color</color>\n - font\n - size\n - br\n - img",
"ui_example_rich_text_tags_description": "Here is a example of rich text with tags\n - <color=A1D7F5>color</color>\n - font\n - size\n - br\n - img",
"ui_example_basic_swipe": "Swipe",
"ui_example_basic_swipe_description": "How to add callbacks on swipe events",
"ui_example_basic_checkbox": "Checkbox",
"ui_example_basic_checkbox_description": "How to make a simple checkbox using Druid Button",
"ui_example_checkbox": "Checkbox",
"ui_example_checkbox_description": "How to make a checkbox using Druid Button",
"ui_example_checkbox_group": "Checkbox Group",
"ui_example_checkbox_group_description": "How to make a checkbox group using Druid Buttons",
"ui_example_radio_group": "Radio Group",
"ui_example_radio_group_description": "How to make a radio group using Druid Buttons",
"ui_example_data_list_basic": "Data List Basic",
"ui_example_data_list_basic_description": "How to make a simple data list",
"ui_example_data_list_basic_description": "How to make a data list",
"ui_example_data_list_horizontal_basic": "Data List Horizontal Basic",
"ui_example_data_list_horizontal_basic_description": "How to make a simple horizontal data list",
"ui_example_data_list_horizontal_basic_description": "How to make a horizontal 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",
@@ -141,7 +154,7 @@
"ui_language": "Language",
"ui_example_window_language": "Window Language",
"ui_example_window_language_description": "Here is a simple example of window with language selection.",
"ui_example_window_language_description": "Here is a example of window with language selection.",
"ui_confirmation": "Confirmation",
"ui_example_window_confirmation": "Window Confirmation",
@@ -150,22 +163,34 @@
"ui_information": "Information",
"ui_example_window_information": "Window Information",
"ui_example_window_information_text": "You are the best of the best!",
"ui_example_window_information_description": "Here is a simple example of window with information message.",
"ui_example_window_information_description": "Here is a example of window with information message.",
"ui_example_widget_hover_hint": "Hint on Hover",
"ui_example_widget_hover_hint_description": "Here is a example of show hint on mouse hover",
"ui_example_widget_property_button": "Property Button",
"ui_example_widget_property_button_description": "Here is a widget used in Properties panel",
"ui_example_widget_property_slider": "Property Slider",
"ui_example_widget_property_slider_description": "Here is a widget used in Properties panel",
"ui_example_widget_property_checkbox": "Property Checkbox",
"ui_example_widget_property_checkbox_description": "Here is a widget used in Properties panel",
"ui_example_gamepad_tester": "Gamepad Tester",
"ui_example_gamepad_tester_description": "Test your gamepad here to bind buttons and axes",
"ui_example_on_screen_control": "On Screen Control",
"ui_example_on_screen_control_description": "Here is a simple example of on screen control. The on_screen_input here is a simple joystick with a callback as Druid component",
"ui_example_on_screen_control_description": "Here is a example of on screen control. The on_screen_input here is a joystick with a callback as Druid component",
"ui_example_layout_basic": "Layout",
"ui_example_layout_basic_description": "This layout can be adjusted to be the same as in Figma",
"ui_example_panthera_basic_animation": "Panthera Basic Animation",
"ui_example_panthera_basic_animation_description": "Here is a simple example of Panthera Basic Animation.",
"ui_example_panthera_basic_animation_description": "Here is a example of Panthera Basic Animation.",
"ui_example_panthera_animation_blend": "Panthera Animation Blend",
"ui_example_panthera_animation_blend_description": "Here is a simple example of Panthera Animation Blend.",
"ui_example_panthera_animation_blend_description": "Here is a example of Panthera Animation Blend.",
"ui_example_panthera_animation_blend_hint": "Hover mouse over this area",
"ui_animation_vertical": "Vertical",