mirror of
https://github.com/Insality/druid
synced 2025-09-27 10:02:19 +02:00
Update example with new brand one
This commit is contained in:
Insality
528
example/components/container/container.lua
Normal file
528
example/components/container/container.lua
Normal file
@@ -0,0 +1,528 @@
|
||||
--- Container component
|
||||
-- Container setup in GUI
|
||||
-- parent container - container that contains this container. If not, then it's a window default container
|
||||
-- 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
|
||||
-- adjust mode STRETCH - container will have percentage of parent container size
|
||||
-- adjust mode STRETCH_X - container will have percentage of parent container size (only x side)
|
||||
-- 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")
|
||||
local component = require("druid.component")
|
||||
local Event = require("druid.event")
|
||||
|
||||
---@class druid.container: druid.base_component
|
||||
---@field node node
|
||||
---@field druid druid_instance
|
||||
---@field node_offset vector4
|
||||
---@field origin_size vector3
|
||||
---@field size vector3
|
||||
---@field origin_position vector3
|
||||
---@field position vector3
|
||||
---@field pivot_offset vector3
|
||||
---@field center_offset vector3
|
||||
---@field mode string
|
||||
---@field fit_size vector3
|
||||
---@field min_size_x number|nil
|
||||
---@field min_size_y number|nil
|
||||
---@field on_size_changed druid.event @function on_size_changed(size)
|
||||
---@field _parent_container druid.container
|
||||
---@field _containers table
|
||||
---@field _draggable_corners table
|
||||
local Container = component.create("container")
|
||||
|
||||
local abs = math.abs
|
||||
local min = math.min
|
||||
local max = math.max
|
||||
|
||||
local CORNER_PIVOTS = {
|
||||
gui.PIVOT_NE,
|
||||
gui.PIVOT_NW,
|
||||
gui.PIVOT_SE,
|
||||
gui.PIVOT_SW,
|
||||
}
|
||||
|
||||
|
||||
--- The Container init
|
||||
---@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)
|
||||
self.node = self:get_node(node)
|
||||
self.druid = self:get_druid()
|
||||
|
||||
self.min_size_x = 0
|
||||
self.min_size_y = 0
|
||||
self._containers = {}
|
||||
self._draggable_corners = {}
|
||||
self.node_offset = vmath.vector4(0)
|
||||
self.node_fill_x = nil
|
||||
self.node_fill_y = nil
|
||||
self._position = gui.get_position(self.node)
|
||||
local x_koef, y_koef = helper.get_screen_aspect_koef()
|
||||
self.x_koef = x_koef
|
||||
self.y_koef = y_koef
|
||||
|
||||
self.x_anchor = gui.get_xanchor(self.node)
|
||||
self.y_anchor = gui.get_yanchor(self.node)
|
||||
|
||||
-- Can be changed
|
||||
self.origin_size = gui.get_size(self.node)
|
||||
self.size = gui.get_size(self.node)
|
||||
self.position = gui.get_position(self.node)
|
||||
self.origin_position = gui.get_position(self.node)
|
||||
|
||||
local adjust_mode = gui.get_adjust_mode(self.node)
|
||||
self.mode = mode or (adjust_mode == gui.ADJUST_FIT) and const.LAYOUT_MODE.FIT or const.LAYOUT_MODE.STRETCH
|
||||
|
||||
gui.set_size_mode(self.node, gui.SIZE_MODE_MANUAL)
|
||||
gui.set_adjust_mode(self.node, gui.ADJUST_FIT)
|
||||
|
||||
self.on_size_changed = Event(callback)
|
||||
|
||||
self.pivot_offset = helper.get_pivot_offset(gui.get_pivot(self.node))
|
||||
self.center_offset = -vmath.vector3(self.size.x * self.pivot_offset.x, self.size.y * self.pivot_offset.y, 0)
|
||||
self:set_size(self.size.x, self.size.y)
|
||||
end
|
||||
|
||||
|
||||
function Container:on_late_init()
|
||||
if not gui.get_parent(self.node) then
|
||||
-- TODO: Scale issue here, in fit into window!
|
||||
self:fit_into_window()
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
function Container:on_remove()
|
||||
self:clear_draggable_corners()
|
||||
end
|
||||
|
||||
|
||||
function Container: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))
|
||||
end
|
||||
|
||||
|
||||
---@param pivot constant
|
||||
function Container: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)
|
||||
end
|
||||
|
||||
|
||||
--- Component style params.
|
||||
-- You can override this component styles params in Druid styles table
|
||||
-- or create your own style
|
||||
-- @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)
|
||||
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)
|
||||
end
|
||||
|
||||
|
||||
--- Set new size of layout node
|
||||
---@param width number|nil
|
||||
---@param height number|nil
|
||||
---@return druid.container @{Container}
|
||||
function Container:set_size(width, height)
|
||||
width = width or self.size.x
|
||||
height = height or self.size.y
|
||||
|
||||
if self.min_size_x then
|
||||
width = max(width, self.min_size_x)
|
||||
end
|
||||
if self.min_size_y then
|
||||
height = max(height, self.min_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
|
||||
self.center_offset.y = -height * self.pivot_offset.y
|
||||
self.size.x = width
|
||||
self.size.y = height
|
||||
self.size.z = 0
|
||||
gui.set_size(self.node, self.size)
|
||||
|
||||
self:update_child_containers()
|
||||
self.on_size_changed:trigger(self:get_context(), self.size)
|
||||
end
|
||||
|
||||
return self
|
||||
end
|
||||
|
||||
|
||||
---@param pos_x number
|
||||
---@param pos_y number
|
||||
function Container:set_position(pos_x, pos_y)
|
||||
if self._position.x == pos_x and self._position.y == pos_y then
|
||||
return
|
||||
end
|
||||
|
||||
self._position.x = pos_x
|
||||
self._position.y = pos_y
|
||||
gui.set_position(self.node, self._position)
|
||||
end
|
||||
|
||||
|
||||
---Get current size of layout node
|
||||
---@return vector3 size
|
||||
function Container:get_size()
|
||||
return self.size
|
||||
end
|
||||
|
||||
|
||||
---Get current scale of layout node
|
||||
---@return vector3 scale
|
||||
function Container:get_scale()
|
||||
return helper.get_scene_scale(self.node, true) --[[@as vector3]]
|
||||
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)
|
||||
self.fit_size = target_size
|
||||
self:refresh()
|
||||
return self
|
||||
end
|
||||
|
||||
|
||||
--- Set current size for layout node to fit inside it
|
||||
---@return druid.container @{Container}
|
||||
function Container: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()
|
||||
local x_koef, y_koef = helper.get_screen_aspect_koef()
|
||||
self.x_koef = x_koef
|
||||
self.y_koef = y_koef
|
||||
|
||||
if not self._parent_container then
|
||||
self:refresh()
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
---@param node_or_container node|string|druid.container|table
|
||||
---@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)
|
||||
local container = nil
|
||||
local node = node_or_container
|
||||
|
||||
-- Check it's a container components instead of node
|
||||
if type(node_or_container) == "table" and node_or_container._component then
|
||||
node = node_or_container.node
|
||||
container = node_or_container
|
||||
mode = mode or container.mode
|
||||
end
|
||||
|
||||
-- Covert node_id to node if needed
|
||||
node = self:get_node(node)
|
||||
|
||||
container = container or self.druid:new(Container, node, mode)
|
||||
container:set_parent_container(self)
|
||||
if on_resize_callback then
|
||||
container.on_size_changed:subscribe(on_resize_callback)
|
||||
end
|
||||
table.insert(self._containers, container)
|
||||
|
||||
return container
|
||||
end
|
||||
|
||||
|
||||
---@return druid.container|nil
|
||||
function Container:remove_container_by_node(node)
|
||||
for index = 1, #self._containers do
|
||||
local container = self._containers[index]
|
||||
if container.node == node then
|
||||
table.remove(self._containers, index)
|
||||
self.druid:remove(container)
|
||||
return container
|
||||
end
|
||||
end
|
||||
|
||||
return nil
|
||||
end
|
||||
|
||||
|
||||
---@param parent_container druid.container|nil
|
||||
function Container:set_parent_container(parent_container)
|
||||
if not parent_container then
|
||||
self._parent_container = nil
|
||||
gui.set_parent(self.node, nil)
|
||||
self:refresh()
|
||||
return
|
||||
end
|
||||
|
||||
-- TODO: Just check it's already parent
|
||||
gui.set_parent(self.node, parent_container.node, true)
|
||||
|
||||
-- Node offset - fixed distance from parent side to the child side
|
||||
local parent_left = parent_container.center_offset.x - parent_container.origin_size.x * 0.5
|
||||
local parent_right = parent_container.center_offset.x + parent_container.origin_size.x * 0.5
|
||||
local parent_top = parent_container.center_offset.y + parent_container.origin_size.y * 0.5
|
||||
local parent_bottom = parent_container.center_offset.y - parent_container.origin_size.y * 0.5
|
||||
|
||||
local node_left = self.origin_position.x + self.center_offset.x - self.origin_size.x * 0.5
|
||||
local node_right = self.origin_position.x + self.center_offset.x + self.origin_size.x * 0.5
|
||||
local node_top = self.origin_position.y + self.center_offset.y + self.origin_size.y * 0.5
|
||||
local node_bottom = self.origin_position.y + self.center_offset.y - self.origin_size.y * 0.5
|
||||
|
||||
self.node_offset.x = node_left - parent_left
|
||||
self.node_offset.y = node_top - parent_top
|
||||
self.node_offset.z = node_right - parent_right
|
||||
self.node_offset.w = node_bottom - parent_bottom
|
||||
self._parent_container = parent_container
|
||||
|
||||
local offset_x = (self.node_offset.x + self.node_offset.z)/2
|
||||
local offset_y = (self.node_offset.y + self.node_offset.w)/2
|
||||
|
||||
if self.pivot_offset.x < 0 then
|
||||
offset_x = self.node_offset.x
|
||||
end
|
||||
if self.pivot_offset.x > 0 then
|
||||
offset_x = self.node_offset.z
|
||||
end
|
||||
if self.pivot_offset.y < 0 then
|
||||
offset_y = self.node_offset.w
|
||||
end
|
||||
if self.pivot_offset.y > 0 then
|
||||
offset_y = self.node_offset.y
|
||||
end
|
||||
|
||||
local koef_x = (parent_container.origin_size.x - abs(offset_x))
|
||||
self.node_fill_x = koef_x ~= 0 and self.origin_size.x / koef_x or 1
|
||||
local x_anchor = gui.get_xanchor(self.node)
|
||||
if x_anchor ~= gui.ANCHOR_NONE then
|
||||
self.node_fill_x = 1
|
||||
end
|
||||
|
||||
local koef_y = (parent_container.origin_size.y - abs(offset_y))
|
||||
self.node_fill_y = koef_y ~= 0 and self.origin_size.y / koef_y or 1
|
||||
local y_anchor = gui.get_yanchor(self.node)
|
||||
if y_anchor ~= gui.ANCHOR_NONE then
|
||||
self.node_fill_y = 1
|
||||
end
|
||||
|
||||
self:refresh()
|
||||
end
|
||||
|
||||
|
||||
-- Glossary
|
||||
-- Center Offset - vector from node position to visual center of node
|
||||
function Container:refresh()
|
||||
local x_koef, y_koef = self.x_koef, self.y_koef
|
||||
self:refresh_scale()
|
||||
|
||||
if self._parent_container then
|
||||
local parent = self._parent_container
|
||||
local offset_x = (self.node_offset.x + self.node_offset.z) / 2
|
||||
local offset_y = (self.node_offset.y + self.node_offset.w) / 2
|
||||
|
||||
if self.pivot_offset.x < 0 then
|
||||
offset_x = self.node_offset.x
|
||||
end
|
||||
if self.pivot_offset.x > 0 then
|
||||
offset_x = self.node_offset.z
|
||||
end
|
||||
if self.pivot_offset.y < 0 then
|
||||
offset_y = self.node_offset.w
|
||||
end
|
||||
if self.pivot_offset.y > 0 then
|
||||
offset_y = self.node_offset.y
|
||||
end
|
||||
|
||||
local stretch_side_x = parent.size.x - abs(offset_x)
|
||||
local stretch_side_y = parent.size.y - abs(offset_y)
|
||||
|
||||
do
|
||||
local parent_pivot_x = parent.center_offset.x + (parent.size.x * self.pivot_offset.x)
|
||||
local parent_pivot_y = parent.center_offset.y + (parent.size.y * self.pivot_offset.y)
|
||||
local pos_x = parent_pivot_x + offset_x
|
||||
local pos_y = parent_pivot_y + offset_y
|
||||
self:set_position(pos_x, pos_y)
|
||||
end
|
||||
|
||||
do
|
||||
if self.x_anchor ~= gui.ANCHOR_NONE then
|
||||
stretch_side_x = parent.size.x - (abs(self.node_offset.x) + abs(self.node_offset.z))
|
||||
end
|
||||
|
||||
if self.y_anchor ~= gui.ANCHOR_NONE then
|
||||
stretch_side_y = parent.size.y - (abs(self.node_offset.y) + abs(self.node_offset.w))
|
||||
end
|
||||
|
||||
---- Size Update (for stretch)
|
||||
if self.mode == const.LAYOUT_MODE.STRETCH then
|
||||
self:set_size(
|
||||
abs(stretch_side_x * self.node_fill_x),
|
||||
abs(stretch_side_y * self.node_fill_y))
|
||||
end
|
||||
|
||||
if self.mode == const.LAYOUT_MODE.STRETCH_X then
|
||||
self:set_size(abs(stretch_side_x * self.node_fill_x), nil)
|
||||
end
|
||||
|
||||
if self.mode == const.LAYOUT_MODE.STRETCH_Y then
|
||||
self:set_size(nil, abs(stretch_side_y * self.node_fill_y))
|
||||
end
|
||||
end
|
||||
else
|
||||
if self.fit_size then
|
||||
x_koef = self.fit_size.x / self.origin_size.x * x_koef
|
||||
y_koef = self.fit_size.y / self.origin_size.y * y_koef
|
||||
|
||||
if self.mode == const.LAYOUT_MODE.STRETCH then
|
||||
self:set_size(self.origin_size.x * x_koef, self.origin_size.y * y_koef)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
self:update_child_containers()
|
||||
end
|
||||
|
||||
|
||||
function Container:refresh_scale()
|
||||
if self._fit_node then
|
||||
local fit_node_size = gui.get_size(self._fit_node)
|
||||
|
||||
local scale = vmath.vector3(1)
|
||||
scale.x = min(fit_node_size.x / self.size.x, 1)
|
||||
scale.y = min(fit_node_size.y / self.size.y, 1)
|
||||
|
||||
scale.x = min(scale.x, scale.y)
|
||||
scale.y = min(scale.x, scale.y)
|
||||
|
||||
gui.set_scale(self.node, scale)
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
function Container:update_child_containers()
|
||||
for index = 1, #self._containers do
|
||||
self._containers[index]:refresh()
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
---@return druid.container @{Container}
|
||||
function Container:create_draggable_corners()
|
||||
self:clear_draggable_corners()
|
||||
|
||||
for _, corner_pivot in pairs(CORNER_PIVOTS) do
|
||||
local corner_offset = helper.get_pivot_offset(corner_pivot)
|
||||
local anchor_position = vmath.vector3(
|
||||
self.center_offset.x + (self.size.x) * corner_offset.x,
|
||||
self.center_offset.y + (self.size.y) * corner_offset.y,
|
||||
0)
|
||||
|
||||
local new_draggable_node = gui.new_box_node(anchor_position, self.style.DRAGGABLE_CORNER_SIZE)
|
||||
gui.set_color(new_draggable_node, self.style.DRAGGABLE_CORNER_COLOR)
|
||||
gui.set_pivot(new_draggable_node, corner_pivot)
|
||||
gui.set_parent(new_draggable_node, self.node)
|
||||
self:add_container(new_draggable_node)
|
||||
|
||||
---@type druid.drag
|
||||
local drag = self.druid:new_drag(new_draggable_node, function(_, x, y)
|
||||
self:_on_corner_drag(x, y, corner_offset)
|
||||
end)
|
||||
table.insert(self._draggable_corners, drag)
|
||||
|
||||
drag.style.DRAG_DEADZONE = 0
|
||||
end
|
||||
|
||||
return self
|
||||
end
|
||||
|
||||
|
||||
---@return druid.container @{Container}
|
||||
function Container:clear_draggable_corners()
|
||||
for index = 1, #self._draggable_corners do
|
||||
local drag_component = self._draggable_corners[index]
|
||||
self.druid:remove(drag_component)
|
||||
self:remove_container_by_node(drag_component.node)
|
||||
gui.delete_node(drag_component.node)
|
||||
end
|
||||
|
||||
self._draggable_corners = {}
|
||||
|
||||
return self
|
||||
end
|
||||
|
||||
|
||||
function Container:_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
|
||||
|
||||
local size = self:get_size()
|
||||
if self.min_size_x and size.x + x < self.min_size_x then
|
||||
x = self.min_size_x - size.x
|
||||
end
|
||||
if self.min_size_y and size.y + y < self.min_size_y then
|
||||
y = self.min_size_y - size.y
|
||||
end
|
||||
|
||||
if corner_offset.x < 0 then
|
||||
self.node_offset.x = self.node_offset.x - x
|
||||
end
|
||||
if corner_offset.x > 0 then
|
||||
self.node_offset.z = self.node_offset.z - x
|
||||
end
|
||||
if corner_offset.y < 0 then
|
||||
self.node_offset.w = self.node_offset.w - y
|
||||
end
|
||||
if corner_offset.y > 0 then
|
||||
self.node_offset.y = self.node_offset.y - y
|
||||
end
|
||||
|
||||
local pivot = gui.get_pivot(self.node)
|
||||
local pivot_offset = helper.get_pivot_offset(pivot)
|
||||
|
||||
local center_pos_x = self._position.x + (x * (pivot_offset.x + corner_offset.x))
|
||||
local center_pos_y = self._position.y + (y * (pivot_offset.y + corner_offset.y))
|
||||
|
||||
self:set_position(center_pos_x, center_pos_y)
|
||||
self:set_size(size.x + x, size.y + y)
|
||||
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)
|
||||
self._fit_node = self:get_node(node)
|
||||
self:refresh_scale()
|
||||
return self
|
||||
end
|
||||
|
||||
|
||||
---@param min_size_x number|nil
|
||||
---@param min_size_y number|nil
|
||||
function Container: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()
|
||||
|
||||
return self
|
||||
end
|
||||
|
||||
|
||||
return Container
|
||||
451
example/components/druid_logo/druid_logo.gui
Normal file
451
example/components/druid_logo/druid_logo.gui
Normal file
@@ -0,0 +1,451 @@
|
||||
script: ""
|
||||
fonts {
|
||||
name: "text_regular"
|
||||
font: "/example/assets/fonts/text_regular.font"
|
||||
}
|
||||
textures {
|
||||
name: "druid_logo"
|
||||
texture: "/example/assets/druid_logo.atlas"
|
||||
}
|
||||
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: 170.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: "root"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_CENTER
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
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: 200.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: 16.0
|
||||
y: 16.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: "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_MANUAL
|
||||
custom_type: 0
|
||||
enabled: true
|
||||
visible: false
|
||||
material: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 10.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: "druid_logo/icon_druid"
|
||||
id: "icon_druid_right"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_CENTER
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "E_Anchor"
|
||||
layer: "druid_logo"
|
||||
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: 0.5
|
||||
template_node_child: false
|
||||
size_mode: SIZE_MODE_AUTO
|
||||
custom_type: 0
|
||||
enabled: true
|
||||
visible: true
|
||||
material: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: -200.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: 16.0
|
||||
y: 16.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: "W_Anchor"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_W
|
||||
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_MANUAL
|
||||
custom_type: 0
|
||||
enabled: true
|
||||
visible: false
|
||||
material: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: -10.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: "druid_logo/icon_druid"
|
||||
id: "icon_druid_left"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_CENTER
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "W_Anchor"
|
||||
layer: "druid_logo"
|
||||
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: 0.5
|
||||
template_node_child: false
|
||||
size_mode: SIZE_MODE_AUTO
|
||||
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: 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_logo/logo_druid"
|
||||
id: "icon_logo"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_CENTER
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "root"
|
||||
layer: "druid_logo"
|
||||
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: true
|
||||
material: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 0.0
|
||||
y: -50.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
rotation {
|
||||
x: 0.0
|
||||
y: 0.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
scale {
|
||||
x: 0.6
|
||||
y: 0.6
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 400.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: "Defold UI Framework"
|
||||
font: "text_regular"
|
||||
id: "text_description"
|
||||
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: "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: ""
|
||||
}
|
||||
layers {
|
||||
name: "druid"
|
||||
}
|
||||
layers {
|
||||
name: "druid_logo"
|
||||
}
|
||||
layers {
|
||||
name: "text_regular"
|
||||
}
|
||||
material: "/builtins/materials/gui.material"
|
||||
adjust_reference: ADJUST_REFERENCE_PARENT
|
||||
max_nodes: 512
|
||||
48
example/components/druid_logo/druid_logo.lua
Normal file
48
example/components/druid_logo/druid_logo.lua
Normal file
@@ -0,0 +1,48 @@
|
||||
local panthera = require("panthera.panthera")
|
||||
local component = require("druid.component")
|
||||
|
||||
local druid_logo_panthera = require("example.components.druid_logo.druid_logo_panthera")
|
||||
local container = require("example.components.container.container")
|
||||
|
||||
---@class druid_logo: druid.base_component
|
||||
---@field root druid.container
|
||||
---@field text_description druid.text
|
||||
---@field druid druid_instance
|
||||
local DruidLogo = component.create("druid_logo")
|
||||
|
||||
|
||||
---@param template string
|
||||
---@param nodes table<hash, node>
|
||||
function DruidLogo:init(template, nodes)
|
||||
self.druid = self:get_druid(template, nodes)
|
||||
|
||||
self.root = self.druid:new(container, "root") --[[@as druid.container]]
|
||||
self.root:add_container("E_Anchor")
|
||||
self.root:add_container("W_Anchor")
|
||||
|
||||
self.druid:new_button("root", self.on_click):set_style(nil)
|
||||
|
||||
self.animation = panthera.create_gui(druid_logo_panthera, self:get_template(), nodes)
|
||||
panthera.play(self.animation, "idle", { is_loop = true })
|
||||
|
||||
self.animation_hover = panthera.clone_state(self.animation)
|
||||
self.hover = self.druid:new_hover("root")
|
||||
self.hover.on_mouse_hover:subscribe(self.on_mouse_hover)
|
||||
end
|
||||
|
||||
|
||||
function DruidLogo:on_click()
|
||||
sys.open_url("https://github.com/Insality/druid", { target = "_blank" })
|
||||
end
|
||||
|
||||
|
||||
function DruidLogo:on_mouse_hover(is_hover)
|
||||
if is_hover then
|
||||
panthera.play(self.animation_hover, "on_hover_in")
|
||||
else
|
||||
panthera.play(self.animation_hover, "on_hover_out", { is_skip_init = true })
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
return DruidLogo
|
||||
268
example/components/druid_logo/druid_logo_panthera.lua
Normal file
268
example/components/druid_logo/druid_logo_panthera.lua
Normal file
@@ -0,0 +1,268 @@
|
||||
return {
|
||||
version = 1,
|
||||
format = "json",
|
||||
data = {
|
||||
animations = {
|
||||
{
|
||||
duration = 12,
|
||||
animation_id = "idle",
|
||||
animation_keys = {
|
||||
{
|
||||
node_id = "icon_druid_left",
|
||||
duration = 3,
|
||||
end_value = -5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
node_id = "icon_druid_right",
|
||||
duration = 3,
|
||||
end_value = -5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
node_id = "icon_logo",
|
||||
duration = 4,
|
||||
end_value = 5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
start_time = 3,
|
||||
duration = 3,
|
||||
start_value = -5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
node_id = "icon_druid_left",
|
||||
end_value = 5,
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
start_time = 3,
|
||||
duration = 3,
|
||||
start_value = -5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
node_id = "icon_druid_right",
|
||||
end_value = 5,
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
start_time = 4,
|
||||
duration = 8,
|
||||
start_value = 5,
|
||||
easing = "insine",
|
||||
key_type = "tween",
|
||||
node_id = "icon_logo",
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
start_time = 6,
|
||||
duration = 6,
|
||||
start_value = 5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
node_id = "icon_druid_left",
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
start_time = 6,
|
||||
duration = 6,
|
||||
start_value = 5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
node_id = "icon_druid_right",
|
||||
property_id = "position_y",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
duration = 0.6,
|
||||
animation_id = "on_hover_in",
|
||||
animation_keys = {
|
||||
{
|
||||
node_id = "W_Anchor",
|
||||
duration = 0.6,
|
||||
end_value = -220,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = -200,
|
||||
property_id = "position_x",
|
||||
},
|
||||
{
|
||||
node_id = "text_description",
|
||||
duration = 0.6,
|
||||
end_value = -60,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = -50,
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
node_id = "icon_druid_left",
|
||||
duration = 0.6,
|
||||
end_value = 0.7,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 0.5,
|
||||
property_id = "color_a",
|
||||
},
|
||||
{
|
||||
node_id = "icon_druid_right",
|
||||
duration = 0.6,
|
||||
end_value = 0.7,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 0.5,
|
||||
property_id = "color_a",
|
||||
},
|
||||
{
|
||||
node_id = "icon_logo",
|
||||
duration = 0.6,
|
||||
end_value = 1.1,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 1,
|
||||
property_id = "scale_x",
|
||||
},
|
||||
{
|
||||
node_id = "icon_logo",
|
||||
duration = 0.6,
|
||||
end_value = 1.1,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 1,
|
||||
property_id = "scale_y",
|
||||
},
|
||||
{
|
||||
node_id = "icon_logo",
|
||||
duration = 0.6,
|
||||
end_value = 1.7,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 1,
|
||||
property_id = "color_a",
|
||||
},
|
||||
{
|
||||
node_id = "E_Anchor",
|
||||
duration = 0.6,
|
||||
end_value = 220,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 200,
|
||||
property_id = "position_x",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
duration = 0.3,
|
||||
animation_id = "on_hover_out",
|
||||
animation_keys = {
|
||||
{
|
||||
node_id = "W_Anchor",
|
||||
duration = 0.3,
|
||||
end_value = -200,
|
||||
easing = "outback",
|
||||
key_type = "tween",
|
||||
start_value = -200,
|
||||
property_id = "position_x",
|
||||
},
|
||||
{
|
||||
node_id = "text_description",
|
||||
duration = 0.3,
|
||||
end_value = -50,
|
||||
easing = "outback",
|
||||
key_type = "tween",
|
||||
start_value = -50,
|
||||
property_id = "position_y",
|
||||
},
|
||||
{
|
||||
node_id = "icon_druid_left",
|
||||
duration = 0.3,
|
||||
end_value = 0.5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 0.5,
|
||||
property_id = "color_a",
|
||||
},
|
||||
{
|
||||
node_id = "icon_druid_right",
|
||||
duration = 0.3,
|
||||
end_value = 0.5,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 0.5,
|
||||
property_id = "color_a",
|
||||
},
|
||||
{
|
||||
node_id = "icon_logo",
|
||||
duration = 0.3,
|
||||
end_value = 1,
|
||||
easing = "outsine",
|
||||
key_type = "tween",
|
||||
start_value = 1,
|
||||
property_id = "color_a",
|
||||
},
|
||||
{
|
||||
node_id = "icon_logo",
|
||||
duration = 0.3,
|
||||
end_value = 1,
|
||||
easing = "outback",
|
||||
key_type = "tween",
|
||||
start_value = 1,
|
||||
property_id = "scale_x",
|
||||
},
|
||||
{
|
||||
node_id = "icon_logo",
|
||||
duration = 0.3,
|
||||
end_value = 1,
|
||||
easing = "outback",
|
||||
key_type = "tween",
|
||||
start_value = 1,
|
||||
property_id = "scale_y",
|
||||
},
|
||||
{
|
||||
node_id = "E_Anchor",
|
||||
duration = 0.3,
|
||||
end_value = 200,
|
||||
easing = "outback",
|
||||
key_type = "tween",
|
||||
start_value = 200,
|
||||
property_id = "position_x",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
metadata = {
|
||||
gui_path = "/example/components/druid_logo/druid_logo.gui",
|
||||
settings = {
|
||||
font_size = 40,
|
||||
},
|
||||
gizmo_steps = {
|
||||
time = 0.1,
|
||||
},
|
||||
layers = {
|
||||
{
|
||||
name = "druid",
|
||||
color = "73E84C",
|
||||
},
|
||||
{
|
||||
name = "druid_logo",
|
||||
color = "90D2F6",
|
||||
},
|
||||
{
|
||||
name = "text_regular",
|
||||
color = "C379F0",
|
||||
},
|
||||
},
|
||||
fps = 60,
|
||||
},
|
||||
nodes = {
|
||||
},
|
||||
},
|
||||
type = "animation_editor",
|
||||
}
|
||||
146
example/components/example_scene/example_scene.gui
Normal file
146
example/components/example_scene/example_scene.gui
Normal file
@@ -0,0 +1,146 @@
|
||||
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
|
||||
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"
|
||||
"Scroll Size: 200x400\n"
|
||||
"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: ""
|
||||
}
|
||||
layers {
|
||||
name: "text_regular"
|
||||
}
|
||||
material: "/builtins/materials/gui.material"
|
||||
adjust_reference: ADJUST_REFERENCE_PARENT
|
||||
max_nodes: 512
|
||||
29
example/components/example_scene/example_scene.lua
Normal file
29
example/components/example_scene/example_scene.lua
Normal file
@@ -0,0 +1,29 @@
|
||||
local component = require("druid.component")
|
||||
local container = require("example.components.container.container")
|
||||
|
||||
---@class example_scene: druid.base_component
|
||||
---@field root druid.container
|
||||
---@field text_debug_info druid.text
|
||||
---@field druid druid_instance
|
||||
local M = component.create("example_scene")
|
||||
|
||||
|
||||
---@param template string
|
||||
---@param nodes table<hash, node>
|
||||
function M:init(template, nodes)
|
||||
self.druid = self:get_druid(template, nodes)
|
||||
|
||||
self.root = self.druid:new(container, "root") --[[@as druid.container]]
|
||||
self.root:add_container("text_debug_info")
|
||||
|
||||
self.text_debug_info = self.druid:new_text("text_debug_info")
|
||||
end
|
||||
|
||||
|
||||
---@param info string
|
||||
function M:set_debug_info(info)
|
||||
self.text_debug_info:set_to(info)
|
||||
end
|
||||
|
||||
|
||||
return M
|
||||
612
example/components/examples_list_view/examples_list_view.gui
Normal file
612
example/components/examples_list_view/examples_list_view.gui
Normal file
@@ -0,0 +1,612 @@
|
||||
script: ""
|
||||
fonts {
|
||||
name: "text_regular"
|
||||
font: "/example/assets/fonts/text_regular.font"
|
||||
}
|
||||
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: 910.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: -190.0
|
||||
y: 445.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: 250.0
|
||||
y: 60.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: "Examples"
|
||||
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: 395.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: 850.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: "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: 850.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: "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: -52.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: "examples_list_view_item"
|
||||
parent: "scroll_content"
|
||||
layer: ""
|
||||
inherit_alpha: true
|
||||
alpha: 1.0
|
||||
template: "/example/components/examples_list_view/examples_list_view_item.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: 400.0
|
||||
y: 50.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/empty"
|
||||
id: "examples_list_view_item/root"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_W
|
||||
adjust_mode: ADJUST_MODE_STRETCH
|
||||
parent: "examples_list_view_item"
|
||||
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: true
|
||||
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: 50.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 0.31
|
||||
y: 0.318
|
||||
z: 0.322
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
texture: "druid/pixel"
|
||||
id: "examples_list_view_item/panel_highlight"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_W
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "examples_list_view_item/root"
|
||||
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: 0.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: 4.0
|
||||
y: 50.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: "examples_list_view_item/panel_selected"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_W
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "examples_list_view_item/root"
|
||||
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: true
|
||||
size_mode: SIZE_MODE_MANUAL
|
||||
custom_type: 0
|
||||
enabled: false
|
||||
visible: true
|
||||
material: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 18.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.6
|
||||
y: 0.6
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 200.0
|
||||
y: 100.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 0.851
|
||||
y: 0.851
|
||||
z: 0.851
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
texture: "druid/icon_arrow"
|
||||
id: "examples_list_view_item/icon"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_CENTER
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "examples_list_view_item/root"
|
||||
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: true
|
||||
size_mode: SIZE_MODE_AUTO
|
||||
custom_type: 0
|
||||
enabled: false
|
||||
visible: true
|
||||
material: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 36.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.7
|
||||
y: 0.7
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 500.0
|
||||
y: 60.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: "Basic"
|
||||
font: "text_bold"
|
||||
id: "examples_list_view_item/text"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_W
|
||||
outline {
|
||||
x: 0.941
|
||||
y: 0.984
|
||||
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: "examples_list_view_item/root"
|
||||
layer: "text_bold"
|
||||
inherit_alpha: true
|
||||
alpha: 1.0
|
||||
outline_alpha: 0.0
|
||||
shadow_alpha: 0.0
|
||||
template_node_child: true
|
||||
text_leading: 1.0
|
||||
text_tracking: 0.0
|
||||
custom_type: 0
|
||||
enabled: true
|
||||
visible: true
|
||||
material: ""
|
||||
}
|
||||
layers {
|
||||
name: "druid"
|
||||
}
|
||||
layers {
|
||||
name: "text_regular"
|
||||
}
|
||||
material: "/builtins/materials/gui.material"
|
||||
adjust_reference: ADJUST_REFERENCE_PARENT
|
||||
max_nodes: 512
|
||||
172
example/components/examples_list_view/examples_list_view.lua
Normal file
172
example/components/examples_list_view/examples_list_view.lua
Normal file
@@ -0,0 +1,172 @@
|
||||
local event = require("druid.event")
|
||||
local component = require("druid.component")
|
||||
local container = require("example.components.container.container")
|
||||
local lang_text = require("druid.extended.lang_text")
|
||||
local storage = require("saver.storage")
|
||||
|
||||
local examples_list_view_item = require("example.components.examples_list_view.examples_list_view_item")
|
||||
|
||||
---@class examples_list_view: druid.base_component
|
||||
---@field root druid.container
|
||||
---@field druid druid_instance
|
||||
---@field scroll druid.scroll
|
||||
---@field grid druid.static_grid
|
||||
local M = component.create("examples_list_view")
|
||||
|
||||
|
||||
---@param template string
|
||||
---@param nodes table<hash, node>
|
||||
function M:init(template, nodes)
|
||||
self.druid = self:get_druid(template, nodes)
|
||||
|
||||
self.root = self.druid:new(container, "root") --[[@as druid.container]]
|
||||
self.root:add_container("text_header")
|
||||
|
||||
self.druid:new(lang_text, "text_header", "ui_examples")
|
||||
self.druid:new(examples_list_view_item, "examples_list_view_item")
|
||||
|
||||
self.prefab = self:get_node("examples_list_view_item/root")
|
||||
gui.set_enabled(self.prefab, false)
|
||||
|
||||
self.scroll = self.druid:new_scroll("scroll_view", "scroll_content")
|
||||
self.grid = self.druid:new_static_grid("scroll_content", self.prefab, 1)
|
||||
self.scroll:bind_grid(self.grid)
|
||||
|
||||
self.root:add_container("scroll_view", nil, function(_, size)
|
||||
self.scroll:set_view_size(size)
|
||||
self.scroll:set_size(self.grid:get_size())
|
||||
end)
|
||||
|
||||
self.selected_example = nil
|
||||
self.examples = {}
|
||||
self.on_debug_info = event()
|
||||
self.on_set_information = event()
|
||||
self.add_log_text = event()
|
||||
|
||||
timer.delay(0.1, true, function()
|
||||
self:update_debug_info()
|
||||
end)
|
||||
end
|
||||
|
||||
|
||||
---@param examples druid.examples
|
||||
---@param druid_example druid.example @The main GUI component
|
||||
function M:add_example(examples, druid_example)
|
||||
local example_name_id = examples.example_name_id
|
||||
local examples_list = examples.examples_list
|
||||
|
||||
if false then
|
||||
do -- Add section name
|
||||
local nodes = gui.clone_tree(self.prefab)
|
||||
local item = self.druid:new(examples_list_view_item, "examples_list_view_item", nodes) --[[@as examples_list_view_item]]
|
||||
gui.set_enabled(item.root.node, true)
|
||||
item.text:translate(example_name_id)
|
||||
item:set_fold_icon_enabled(true)
|
||||
|
||||
item.on_click:subscribe(function()
|
||||
item:set_fold_status(not item:is_folded())
|
||||
end)
|
||||
|
||||
self.grid:add(item.root.node)
|
||||
end
|
||||
end
|
||||
|
||||
for index = 1, #examples_list do
|
||||
local example_data = examples_list[index]
|
||||
local nodes = gui.clone_tree(self.prefab)
|
||||
local item = self.druid:new(examples_list_view_item, "examples_list_view_item", nodes) --[[@as examples_list_view_item]]
|
||||
gui.set_enabled(item.root.node, true)
|
||||
item.text:translate(example_data.name_id)
|
||||
item:set_fold_icon_enabled(false)
|
||||
|
||||
item.on_click:subscribe(function()
|
||||
if self.selected_example then
|
||||
self.selected_example.list_item:set_selected(false)
|
||||
druid_example.druid:remove(self.selected_example.instance)
|
||||
gui.set_enabled(self.selected_example.root, false)
|
||||
|
||||
self.selected_example = nil
|
||||
end
|
||||
|
||||
local root = gui.get_node(example_data.root)
|
||||
gui.set_enabled(root, true)
|
||||
local instance = druid_example.druid:new(example_data.component_class, example_data.template)
|
||||
|
||||
self.selected_example = {
|
||||
data = example_data,
|
||||
list_item = item,
|
||||
instance = instance,
|
||||
root = root
|
||||
}
|
||||
item:set_selected(true)
|
||||
|
||||
druid_example.output_list:clear()
|
||||
if example_data.on_create then
|
||||
example_data.on_create(instance, druid_example.output_list)
|
||||
end
|
||||
|
||||
if example_data.information_text_id then
|
||||
self.on_set_information(example_data.information_text_id)
|
||||
else
|
||||
self.on_set_information("")
|
||||
end
|
||||
|
||||
druid_example.properties_panel:clear()
|
||||
if example_data.properties_control then
|
||||
example_data.properties_control(instance, druid_example.properties_panel)
|
||||
end
|
||||
|
||||
storage.set("last_selected_example", example_data.name_id)
|
||||
if html5 then
|
||||
local command = string.format('window.history.replaceState(null, null, "?example=%s")', example_data.name_id)
|
||||
html5.run(command)
|
||||
end
|
||||
end)
|
||||
|
||||
self.grid:add(item.root.node)
|
||||
table.insert(self.examples, {
|
||||
data = example_data,
|
||||
list_item = item
|
||||
})
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
---@param name_id string
|
||||
---@return boolean @true if example was found and selected
|
||||
function M: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)
|
||||
|
||||
-- Select the element
|
||||
if example.data.name_id == name_id then
|
||||
example.list_item.on_click:trigger()
|
||||
return true
|
||||
end
|
||||
end
|
||||
|
||||
return false
|
||||
end
|
||||
|
||||
|
||||
function M:update_debug_info()
|
||||
if not self.selected_example then
|
||||
self.on_debug_info:trigger("")
|
||||
return
|
||||
end
|
||||
|
||||
local data = self.selected_example.data
|
||||
if data.get_debug_info then
|
||||
local info = data.get_debug_info(self.selected_example.instance)
|
||||
self.on_debug_info:trigger(info)
|
||||
return
|
||||
end
|
||||
|
||||
self.on_debug_info:trigger("")
|
||||
end
|
||||
|
||||
|
||||
return M
|
||||
@@ -0,0 +1,326 @@
|
||||
script: ""
|
||||
fonts {
|
||||
name: "text_bold"
|
||||
font: "/example/assets/fonts/text_bold.font"
|
||||
}
|
||||
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: 50.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/empty"
|
||||
id: "root"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_W
|
||||
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: 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: 50.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 0.31
|
||||
y: 0.318
|
||||
z: 0.322
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
texture: "druid/pixel"
|
||||
id: "panel_highlight"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_W
|
||||
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
|
||||
}
|
||||
clipping_mode: CLIPPING_MODE_NONE
|
||||
clipping_visible: true
|
||||
clipping_inverted: false
|
||||
alpha: 0.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: 4.0
|
||||
y: 50.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: "panel_selected"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_W
|
||||
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
|
||||
}
|
||||
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: false
|
||||
visible: true
|
||||
material: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 18.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.6
|
||||
y: 0.6
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 200.0
|
||||
y: 100.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 0.851
|
||||
y: 0.851
|
||||
z: 0.851
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
texture: "druid/icon_arrow"
|
||||
id: "icon"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_CENTER
|
||||
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
|
||||
}
|
||||
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: false
|
||||
visible: true
|
||||
material: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 36.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.7
|
||||
y: 0.7
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 500.0
|
||||
y: 60.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: "Basic"
|
||||
font: "text_bold"
|
||||
id: "text"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_W
|
||||
outline {
|
||||
x: 0.941
|
||||
y: 0.984
|
||||
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_bold"
|
||||
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: ""
|
||||
}
|
||||
layers {
|
||||
name: "druid"
|
||||
}
|
||||
layers {
|
||||
name: "text_bold"
|
||||
}
|
||||
material: "/builtins/materials/gui.material"
|
||||
adjust_reference: ADJUST_REFERENCE_PARENT
|
||||
max_nodes: 512
|
||||
@@ -0,0 +1,74 @@
|
||||
local component = require("druid.component")
|
||||
local container = require("example.components.container.container")
|
||||
local lang_text = require("druid.extended.lang_text")
|
||||
|
||||
---@class examples_list_view_item: druid.base_component
|
||||
---@field root druid.container
|
||||
---@field text druid.lang_text
|
||||
---@field druid druid_instance
|
||||
---@field on_click druid.event
|
||||
local M = component.create("examples_list_view_item")
|
||||
|
||||
---@param template string
|
||||
---@param nodes table<hash, node>
|
||||
function M:init(template, nodes)
|
||||
self.druid = self:get_druid(template, nodes)
|
||||
|
||||
self.root = self.druid:new(container, "root") --[[@as druid.container]]
|
||||
self.text = self.druid:new(lang_text, "text") --[[ @as druid.lang_text]]
|
||||
self.icon = self:get_node("icon")
|
||||
self.selected = self:get_node("panel_selected")
|
||||
self.highlight = self:get_node("panel_highlight")
|
||||
|
||||
self.color_not_selected = gui.get_color(self.text.node)
|
||||
self.color_selected = gui.get_outline(self.text.node)
|
||||
self.color_selected.w = 1
|
||||
self._is_folded = true
|
||||
|
||||
self.button = self.druid:new_button("root")
|
||||
self.button:set_style(nil)
|
||||
|
||||
local hover = self.druid:new_hover("root")
|
||||
hover.on_mouse_hover:subscribe(self.on_hover)
|
||||
|
||||
-- External Events
|
||||
self.on_click = self.button.on_click
|
||||
end
|
||||
|
||||
|
||||
---@param is_enabled boolean
|
||||
function M:set_fold_icon_enabled(is_enabled)
|
||||
gui.set_enabled(self.icon, is_enabled)
|
||||
end
|
||||
|
||||
|
||||
---@param is_folded boolean
|
||||
function M:set_fold_status(is_folded)
|
||||
self._is_folded = is_folded
|
||||
gui.animate(self.icon, "euler.z", is_folded and 0 or -90, gui.EASING_OUTQUAD, 0.2)
|
||||
end
|
||||
|
||||
|
||||
function M:is_folded()
|
||||
return self._is_folded
|
||||
end
|
||||
|
||||
|
||||
function M:set_selected(is_selected)
|
||||
gui.set_enabled(self.selected, is_selected)
|
||||
|
||||
local color = is_selected and self.color_selected or self.color_not_selected
|
||||
gui.set_color(self.text.node, color)
|
||||
end
|
||||
|
||||
|
||||
function M:on_hover(is_hover)
|
||||
if is_hover then
|
||||
gui.animate(self.highlight, "color.w", 1, gui.EASING_OUTQUAD, 0.2)
|
||||
else
|
||||
gui.animate(self.highlight, "color.w", 0, gui.EASING_OUTQUAD, 0.1)
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
return M
|
||||
397
example/components/output_list/output_list.gui
Normal file
397
example/components/output_list/output_list.gui
Normal file
@@ -0,0 +1,397 @@
|
||||
script: ""
|
||||
fonts {
|
||||
name: "text_regular"
|
||||
font: "/example/assets/fonts/text_regular.font"
|
||||
}
|
||||
fonts {
|
||||
name: "text_bold"
|
||||
font: "/example/assets/fonts/text_bold.font"
|
||||
}
|
||||
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
|
||||
}
|
||||
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
|
||||
}
|
||||
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
|
||||
}
|
||||
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: ""
|
||||
}
|
||||
layers {
|
||||
name: "druid"
|
||||
}
|
||||
layers {
|
||||
name: "text_regular"
|
||||
}
|
||||
material: "/builtins/materials/gui.material"
|
||||
adjust_reference: ADJUST_REFERENCE_PARENT
|
||||
max_nodes: 512
|
||||
68
example/components/output_list/output_list.lua
Normal file
68
example/components/output_list/output_list.lua
Normal file
@@ -0,0 +1,68 @@
|
||||
local component = require("druid.component")
|
||||
local container = require("example.components.container.container")
|
||||
local lang_text = require("druid.extended.lang_text")
|
||||
|
||||
---@class output_list: druid.base_component
|
||||
---@field root druid.container
|
||||
---@field text_header druid.text
|
||||
---@field scroll druid.scroll
|
||||
---@field druid druid_instance
|
||||
local M = component.create("output_list")
|
||||
|
||||
---@param template string
|
||||
---@param nodes table<hash, node>
|
||||
function M:init(template, nodes)
|
||||
self.druid = self:get_druid(template, nodes)
|
||||
|
||||
self.root = self.druid:new(container, "root") --[[@as druid.container]]
|
||||
self.root:add_container("text_header")
|
||||
self.root:add_container("separator")
|
||||
|
||||
self.created_texts = {}
|
||||
self.prefab = self:get_node("text")
|
||||
gui.set_enabled(self.prefab, false)
|
||||
|
||||
self.grid = self.druid:new_static_grid("scroll_content", "text", 1)
|
||||
self.scroll = self.druid:new_scroll("scroll_view", "scroll_content")
|
||||
self.scroll:bind_grid(self.grid)
|
||||
self.scroll:set_horizontal_scroll(false)
|
||||
|
||||
self.druid:new(lang_text, "text_header", "ui_output")
|
||||
end
|
||||
|
||||
|
||||
---@param text string
|
||||
function M:add_log_text(text)
|
||||
local text_node = gui.clone(self.prefab)
|
||||
gui.set_enabled(text_node, true)
|
||||
|
||||
local text_instance = self.druid:new_text(text_node, text)
|
||||
self.grid:add(text_instance.node)
|
||||
table.insert(self.created_texts, text_instance)
|
||||
|
||||
self.scroll:scroll_to_percent(vmath.vector3(0, 0, 0))
|
||||
|
||||
if #self.created_texts > 64 then
|
||||
self.grid:remove(1)
|
||||
self.druid:remove(self.created_texts[1])
|
||||
gui.delete_node(self.created_texts[1].node)
|
||||
table.remove(self.created_texts, 1)
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
function M:clear()
|
||||
for index = 1, #self.created_texts do
|
||||
self.druid:remove(self.created_texts[index])
|
||||
end
|
||||
|
||||
local nodes = self.grid.nodes
|
||||
for index = 1, #nodes do
|
||||
gui.delete_node(nodes[index])
|
||||
end
|
||||
self.created_texts = {}
|
||||
self.grid:clear()
|
||||
end
|
||||
|
||||
|
||||
return M
|
||||
988
example/components/panel_druid_profiler/panel_druid_profiler.gui
Normal file
988
example/components/panel_druid_profiler/panel_druid_profiler.gui
Normal file
@@ -0,0 +1,988 @@
|
||||
script: ""
|
||||
fonts {
|
||||
name: "text_bold"
|
||||
font: "/example/assets/fonts/text_bold.font"
|
||||
}
|
||||
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: 1080.0
|
||||
y: 50.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: 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: 16.0
|
||||
y: 50.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: "group_memory"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_W
|
||||
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: false
|
||||
material: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 89.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.8
|
||||
y: 0.8
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 200.0
|
||||
y: 50.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 0.306
|
||||
y: 0.31
|
||||
z: 0.314
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_TEXT
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
text: "Memory"
|
||||
font: "text_bold"
|
||||
id: "text_memory"
|
||||
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: "group_memory"
|
||||
layer: "text_bold"
|
||||
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: 199.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.8
|
||||
y: 0.8
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 200.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: "2048"
|
||||
font: "text_bold"
|
||||
id: "text_memory_amount"
|
||||
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: "group_memory"
|
||||
layer: "text_bold"
|
||||
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: 273.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.8
|
||||
y: 0.8
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 200.0
|
||||
y: 50.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 0.306
|
||||
y: 0.31
|
||||
z: 0.314
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_TEXT
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
text: "KB"
|
||||
font: "text_bold"
|
||||
id: "text_memory_kb"
|
||||
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: "group_memory"
|
||||
layer: "text_bold"
|
||||
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: -130.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: 16.0
|
||||
y: 50.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: "group_fps"
|
||||
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: false
|
||||
material: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: -50.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.8
|
||||
y: 0.8
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 120.0
|
||||
y: 50.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 0.306
|
||||
y: 0.31
|
||||
z: 0.314
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_TEXT
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
text: "FPS"
|
||||
font: "text_bold"
|
||||
id: "text_fps"
|
||||
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: "group_fps"
|
||||
layer: "text_bold"
|
||||
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: 17.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.8
|
||||
y: 0.8
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 200.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: "60"
|
||||
font: "text_bold"
|
||||
id: "text_fps_amount"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_S
|
||||
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: "group_fps"
|
||||
layer: "text_bold"
|
||||
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: 65.0
|
||||
y: -17.5
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
rotation {
|
||||
x: 0.0
|
||||
y: 0.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
scale {
|
||||
x: 0.6
|
||||
y: 0.6
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 100.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: "/60"
|
||||
font: "text_bold"
|
||||
id: "text_fps_min"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_S
|
||||
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: "group_fps"
|
||||
layer: "text_bold"
|
||||
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: 130.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: 16.0
|
||||
y: 50.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: "group_components"
|
||||
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: false
|
||||
material: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: -50.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.8
|
||||
y: 0.8
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 350.0
|
||||
y: 50.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 0.306
|
||||
y: 0.31
|
||||
z: 0.314
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_TEXT
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
text: "Components"
|
||||
font: "text_bold"
|
||||
id: "text_components"
|
||||
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: "group_components"
|
||||
layer: "text_bold"
|
||||
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: 90.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.8
|
||||
y: 0.8
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 200.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: "2004"
|
||||
font: "text_bold"
|
||||
id: "text_components_amount"
|
||||
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: "group_components"
|
||||
layer: "text_bold"
|
||||
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: 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: 16.0
|
||||
y: 50.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: "group_events"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_E
|
||||
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: false
|
||||
material: ""
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: -163.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.8
|
||||
y: 0.8
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 200.0
|
||||
y: 50.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 0.306
|
||||
y: 0.31
|
||||
z: 0.314
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_TEXT
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
text: "Events"
|
||||
font: "text_bold"
|
||||
id: "text_events"
|
||||
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: "group_events"
|
||||
layer: "text_bold"
|
||||
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: -59.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.8
|
||||
y: 0.8
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 200.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: "6000"
|
||||
font: "text_bold"
|
||||
id: "text_events_amount"
|
||||
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: "group_events"
|
||||
layer: "text_bold"
|
||||
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: ""
|
||||
}
|
||||
layers {
|
||||
name: "druid"
|
||||
}
|
||||
layers {
|
||||
name: "text_bold"
|
||||
}
|
||||
material: "/builtins/materials/gui.material"
|
||||
adjust_reference: ADJUST_REFERENCE_PARENT
|
||||
max_nodes: 512
|
||||
180
example/components/panel_druid_profiler/panel_druid_profiler.lua
Normal file
180
example/components/panel_druid_profiler/panel_druid_profiler.lua
Normal file
@@ -0,0 +1,180 @@
|
||||
local event = require("druid.event")
|
||||
local helper = require("druid.helper")
|
||||
local component = require("druid.component")
|
||||
local container = require("example.components.container.container")
|
||||
local lang_text = require("druid.extended.lang_text")
|
||||
|
||||
|
||||
---@class panel_druid_profiler: druid.base_component
|
||||
---@field root druid.container
|
||||
---@field druid druid_instance
|
||||
local M = component.create("panel_druid_profiler")
|
||||
local FPS_SAMPLES = 60
|
||||
|
||||
---@param template string
|
||||
---@param nodes table<hash, node>
|
||||
function M:init(template, nodes)
|
||||
self.druid = self:get_druid(template, nodes)
|
||||
|
||||
self.root = self.druid:new(container, "root") --[[@as druid.container]]
|
||||
self.group_memory = self.root:add_container("group_memory")
|
||||
self.group_fps = self.root:add_container("group_fps")
|
||||
self.group_components = self.root:add_container("group_components")
|
||||
self.group_events = self.root:add_container("group_events")
|
||||
|
||||
self.druid:new_button("group_memory", self.run_collectgarbage)
|
||||
|
||||
self.group_memory:set_min_size(270, nil)
|
||||
self.group_fps:set_min_size(270, nil)
|
||||
self.group_components:set_min_size(270, nil)
|
||||
self.group_events:set_min_size(270, nil)
|
||||
|
||||
self.text_memory_amount = self.druid:new_text("text_memory_amount")
|
||||
self.text_fps_amount = self.druid:new_text("text_fps_amount")
|
||||
self.text_fps_min = self.druid:new_text("text_fps_min")
|
||||
self.text_components_amount = self.druid:new_text("text_components_amount")
|
||||
self.text_events_amount = self.druid:new_text("text_events_amount")
|
||||
|
||||
self.druid:new(lang_text, "text_memory", "ui_profiler_memory")
|
||||
self.druid:new(lang_text, "text_fps", "ui_profiler_fps")
|
||||
self.druid:new(lang_text, "text_components", "ui_profiler_components")
|
||||
self.druid:new(lang_text, "text_events", "ui_profiler_events")
|
||||
|
||||
self.previous_time = nil
|
||||
self.fps_samples = {}
|
||||
|
||||
self.nodes_memory = {
|
||||
self:get_node("text_memory"),
|
||||
self:get_node("text_memory_amount"),
|
||||
self:get_node("text_memory_kb"),
|
||||
}
|
||||
self.nodes_fps = {
|
||||
self:get_node("text_fps"),
|
||||
self:get_node("text_fps_amount"),
|
||||
self:get_node("text_fps_min"),
|
||||
}
|
||||
self.nodes_components = {
|
||||
self:get_node("text_components"),
|
||||
self:get_node("text_components_amount"),
|
||||
}
|
||||
self.nodes_events = {
|
||||
self:get_node("text_events"),
|
||||
self:get_node("text_events_amount"),
|
||||
}
|
||||
|
||||
timer.delay(0.16, true, function()
|
||||
self:update_memory()
|
||||
self:update_fps()
|
||||
self:update_components()
|
||||
self:update_events()
|
||||
self:align_fps_components()
|
||||
end)
|
||||
end
|
||||
|
||||
|
||||
function M:on_language_change()
|
||||
self:update_memory()
|
||||
self:update_fps()
|
||||
self:update_components()
|
||||
self:update_events()
|
||||
self:align_fps_components()
|
||||
end
|
||||
|
||||
|
||||
function M:update_memory()
|
||||
local memory = collectgarbage("count")
|
||||
self.text_memory_amount:set_to(tostring(math.ceil(memory)))
|
||||
|
||||
local width = helper.centrate_nodes(2, unpack(self.nodes_memory))
|
||||
for index = 1, #self.nodes_memory do
|
||||
local node = self.nodes_memory[index]
|
||||
local position_x = gui.get(node, "position.x")
|
||||
gui.set(node, "position.x", position_x + width/2)
|
||||
end
|
||||
self.group_memory:set_size(width, nil)
|
||||
end
|
||||
|
||||
|
||||
function M:update_fps()
|
||||
local average_frame_time = 0
|
||||
local max_frame_time = 0
|
||||
for index = 1, #self.fps_samples do
|
||||
average_frame_time = average_frame_time + self.fps_samples[index]
|
||||
max_frame_time = math.max(max_frame_time, self.fps_samples[index])
|
||||
end
|
||||
average_frame_time = average_frame_time / #self.fps_samples
|
||||
|
||||
self.text_fps_amount:set_to(tostring(math.ceil(1 / average_frame_time)))
|
||||
self.text_fps_min:set_to("/ " .. tostring(math.ceil(1 / max_frame_time)))
|
||||
|
||||
local width = helper.centrate_nodes(2, unpack(self.nodes_fps))
|
||||
self.group_fps:set_size(width, nil)
|
||||
end
|
||||
|
||||
|
||||
function M:update_components()
|
||||
---@diagnostic disable-next-line: undefined-field
|
||||
local components = #self.druid.components_all
|
||||
|
||||
self.text_components_amount:set_to(tostring(components))
|
||||
local width = helper.centrate_nodes(2, unpack(self.nodes_components))
|
||||
self.group_components:set_size(width, nil)
|
||||
end
|
||||
|
||||
|
||||
function M:update_events()
|
||||
self.text_events_amount:set_to(tostring(event.COUNTER))
|
||||
|
||||
local width = helper.centrate_nodes(2, unpack(self.nodes_events))
|
||||
for index = 1, #self.nodes_events do
|
||||
local node = self.nodes_events[index]
|
||||
local position_x = gui.get(node, "position.x")
|
||||
gui.set(node, "position.x", position_x - width/2)
|
||||
end
|
||||
self.group_events:set_size(width, nil)
|
||||
end
|
||||
|
||||
|
||||
function M:align_fps_components()
|
||||
local pos_x_memory = gui.get(self.group_memory.node, "position.x") + gui.get(self.group_memory.node, "size.x")
|
||||
local pos_x_events = gui.get(self.group_events.node, "position.x") - gui.get(self.group_events.node, "size.x")
|
||||
local width = pos_x_events - pos_x_memory
|
||||
|
||||
-- Align FPS and Components
|
||||
local fps_size = gui.get(self.group_fps.node, "size.x")
|
||||
local components_size = gui.get(self.group_components.node, "size.x")
|
||||
|
||||
local free_width = width - fps_size - components_size
|
||||
gui.set(self.group_fps.node, "position.x", pos_x_memory + fps_size/2 + free_width/3)
|
||||
gui.set(self.group_components.node, "position.x", pos_x_events - components_size/2 - free_width/3)
|
||||
end
|
||||
|
||||
|
||||
function M:update()
|
||||
self:sample_fps()
|
||||
end
|
||||
|
||||
|
||||
function M:sample_fps()
|
||||
if not self.previous_time then
|
||||
self.previous_time = socket.gettime()
|
||||
return
|
||||
end
|
||||
|
||||
local current_time = socket.gettime()
|
||||
local delta_time = current_time - self.previous_time
|
||||
self.previous_time = current_time
|
||||
|
||||
table.insert(self.fps_samples, delta_time)
|
||||
if #self.fps_samples > FPS_SAMPLES then
|
||||
table.remove(self.fps_samples, 1)
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
function M:run_collectgarbage()
|
||||
collectgarbage("collect")
|
||||
end
|
||||
|
||||
|
||||
return M
|
||||
259
example/components/panel_information/panel_information.gui
Normal file
259
example/components/panel_information/panel_information.gui
Normal file
@@ -0,0 +1,259 @@
|
||||
fonts {
|
||||
name: "text_bold"
|
||||
font: "/example/assets/fonts/text_bold.font"
|
||||
}
|
||||
fonts {
|
||||
name: "text_regular"
|
||||
font: "/example/assets/fonts/text_regular.font"
|
||||
}
|
||||
textures {
|
||||
name: "druid"
|
||||
texture: "/example/assets/druid.atlas"
|
||||
}
|
||||
nodes {
|
||||
size {
|
||||
x: 440.0
|
||||
y: 450.0
|
||||
}
|
||||
color {
|
||||
x: 0.173
|
||||
y: 0.184
|
||||
z: 0.204
|
||||
}
|
||||
type: TYPE_BOX
|
||||
texture: "druid/pixel"
|
||||
id: "root"
|
||||
adjust_mode: ADJUST_MODE_STRETCH
|
||||
layer: "druid"
|
||||
inherit_alpha: true
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: -210.0
|
||||
y: 215.0
|
||||
}
|
||||
scale {
|
||||
x: 0.9
|
||||
y: 0.9
|
||||
}
|
||||
size {
|
||||
x: 245.0
|
||||
y: 50.0
|
||||
}
|
||||
color {
|
||||
x: 0.463
|
||||
y: 0.475
|
||||
z: 0.49
|
||||
}
|
||||
type: TYPE_TEXT
|
||||
text: "Information"
|
||||
font: "text_regular"
|
||||
id: "text_header"
|
||||
pivot: PIVOT_NW
|
||||
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
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
y: -225.0
|
||||
}
|
||||
size {
|
||||
x: 16.0
|
||||
y: 16.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
id: "S_Anchor"
|
||||
pivot: PIVOT_S
|
||||
parent: "root"
|
||||
inherit_alpha: true
|
||||
visible: false
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
y: 60.0
|
||||
}
|
||||
type: TYPE_TEMPLATE
|
||||
id: "button_view_code"
|
||||
parent: "S_Anchor"
|
||||
inherit_alpha: true
|
||||
template: "/example/templates/button_text_blue.gui"
|
||||
}
|
||||
nodes {
|
||||
size {
|
||||
x: 240.0
|
||||
y: 80.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
id: "button_view_code/root"
|
||||
parent: "button_view_code"
|
||||
overridden_fields: 4
|
||||
template_node_child: true
|
||||
}
|
||||
nodes {
|
||||
scale {
|
||||
x: 0.75
|
||||
y: 0.75
|
||||
}
|
||||
type: TYPE_TEXT
|
||||
text: "View code"
|
||||
id: "button_view_code/text"
|
||||
parent: "button_view_code/root"
|
||||
overridden_fields: 3
|
||||
overridden_fields: 8
|
||||
template_node_child: true
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 220.0
|
||||
y: 225.0
|
||||
}
|
||||
size {
|
||||
x: 16.0
|
||||
y: 16.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
id: "NE_Anchor"
|
||||
pivot: PIVOT_NE
|
||||
parent: "root"
|
||||
inherit_alpha: true
|
||||
visible: false
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: -85.0
|
||||
y: -32.5
|
||||
}
|
||||
type: TYPE_TEMPLATE
|
||||
id: "button_profiler"
|
||||
parent: "NE_Anchor"
|
||||
inherit_alpha: true
|
||||
template: "/example/templates/button_text_yellow.gui"
|
||||
}
|
||||
nodes {
|
||||
size {
|
||||
x: 130.0
|
||||
y: 35.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
texture: "druid/ui_circle_8"
|
||||
id: "button_profiler/root"
|
||||
parent: "button_profiler"
|
||||
slice9 {
|
||||
x: 4.0
|
||||
y: 4.0
|
||||
z: 4.0
|
||||
w: 4.0
|
||||
}
|
||||
overridden_fields: 4
|
||||
overridden_fields: 9
|
||||
overridden_fields: 22
|
||||
template_node_child: true
|
||||
}
|
||||
nodes {
|
||||
scale {
|
||||
x: 0.6
|
||||
y: 0.6
|
||||
}
|
||||
size {
|
||||
x: 190.0
|
||||
y: 50.0
|
||||
}
|
||||
type: TYPE_TEXT
|
||||
text: "Profiler"
|
||||
id: "button_profiler/text"
|
||||
parent: "button_profiler/root"
|
||||
overridden_fields: 3
|
||||
overridden_fields: 4
|
||||
overridden_fields: 8
|
||||
template_node_child: true
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: -200.0
|
||||
y: 150.0
|
||||
}
|
||||
size {
|
||||
x: 400.0
|
||||
y: 250.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
texture: "druid/empty"
|
||||
id: "scroll_view"
|
||||
pivot: PIVOT_NW
|
||||
parent: "root"
|
||||
inherit_alpha: true
|
||||
visible: false
|
||||
}
|
||||
nodes {
|
||||
size {
|
||||
x: 400.0
|
||||
y: 250.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
texture: "druid/empty"
|
||||
id: "scroll_content"
|
||||
pivot: PIVOT_NW
|
||||
parent: "scroll_view"
|
||||
inherit_alpha: true
|
||||
visible: false
|
||||
}
|
||||
nodes {
|
||||
scale {
|
||||
x: 0.75
|
||||
y: 0.75
|
||||
}
|
||||
size {
|
||||
x: 535.0
|
||||
y: 270.0
|
||||
}
|
||||
color {
|
||||
x: 0.463
|
||||
y: 0.475
|
||||
z: 0.49
|
||||
}
|
||||
type: TYPE_TEXT
|
||||
text: "The default example how to use the button and bind the callbacks on them"
|
||||
font: "text_regular"
|
||||
id: "text_description"
|
||||
pivot: PIVOT_NW
|
||||
outline {
|
||||
x: 1.0
|
||||
y: 1.0
|
||||
z: 1.0
|
||||
}
|
||||
shadow {
|
||||
x: 1.0
|
||||
y: 1.0
|
||||
z: 1.0
|
||||
}
|
||||
line_break: true
|
||||
parent: "scroll_content"
|
||||
layer: "text_bold"
|
||||
inherit_alpha: true
|
||||
outline_alpha: 0.0
|
||||
shadow_alpha: 0.0
|
||||
}
|
||||
layers {
|
||||
name: "druid"
|
||||
}
|
||||
layers {
|
||||
name: "text_bold"
|
||||
}
|
||||
layers {
|
||||
name: "text_regular"
|
||||
}
|
||||
material: "/builtins/materials/gui.material"
|
||||
adjust_reference: ADJUST_REFERENCE_PARENT
|
||||
62
example/components/panel_information/panel_information.lua
Normal file
62
example/components/panel_information/panel_information.lua
Normal file
@@ -0,0 +1,62 @@
|
||||
local lang = require("lang.lang")
|
||||
local component = require("druid.component")
|
||||
|
||||
local container = require("example.components.container.container")
|
||||
local lang_text = require("druid.extended.lang_text")
|
||||
local rich_text = require("druid.custom.rich_text.rich_text")
|
||||
|
||||
---@class panel_information: druid.base_component
|
||||
---@field root druid.container
|
||||
---@field text_header druid.lang_text
|
||||
---@field rich_text druid.rich_text
|
||||
---@field druid druid_instance
|
||||
local PanelInformation = component.create("panel_information")
|
||||
|
||||
---@param template string
|
||||
---@param nodes table<hash, node>
|
||||
function PanelInformation:init(template, nodes)
|
||||
self.druid = self:get_druid(template, nodes)
|
||||
|
||||
self.root = self.druid:new(container, "root") --[[@as druid.container]]
|
||||
self.root:add_container("text_header")
|
||||
self.root:add_container("scroll_view")
|
||||
self.root:add_container("S_Anchor")
|
||||
self.root:add_container("NE_Anchor")
|
||||
|
||||
self.druid:new(lang_text, "text_header", "ui_information")
|
||||
self.druid:new(lang_text, "button_profiler/text", "ui_profiler")
|
||||
|
||||
--self.text_description = self.druid:new(lang_text, "text_description", "") --[[@as druid.lang_text]]
|
||||
self.rich_text = self.druid:new(rich_text, "text_description")
|
||||
self.button_profiler = self.druid:new_button("button_profiler/root", self.on_profiler_click)
|
||||
self.button_profiler:set_key_trigger("key_p")
|
||||
self.button_view_code = self.druid:new_button("button_view_code/root")
|
||||
|
||||
-- Disable profiler button for HTML5
|
||||
gui.set_enabled(self.button_profiler.node, not html5)
|
||||
end
|
||||
|
||||
|
||||
function PanelInformation:set_text(text_id)
|
||||
local text = lang.txt(text_id)
|
||||
self.rich_text:set_text(text)
|
||||
end
|
||||
|
||||
|
||||
function PanelInformation:on_profiler_click()
|
||||
if self._profiler_mode == nil then
|
||||
self._profiler_mode = profiler.VIEW_MODE_MINIMIZED
|
||||
profiler.enable_ui(true)
|
||||
profiler.set_ui_view_mode(self._profiler_mode)
|
||||
elseif self._profiler_mode == profiler.VIEW_MODE_MINIMIZED then
|
||||
self._profiler_mode = profiler.VIEW_MODE_FULL
|
||||
profiler.enable_ui(true)
|
||||
profiler.set_ui_view_mode(self._profiler_mode)
|
||||
else
|
||||
self._profiler_mode = nil
|
||||
profiler.enable_ui(false)
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
return PanelInformation
|
||||
@@ -0,0 +1,328 @@
|
||||
script: ""
|
||||
fonts {
|
||||
name: "text_bold"
|
||||
font: "/example/assets/fonts/text_bold.font"
|
||||
}
|
||||
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: "Button"
|
||||
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: 267.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: 226.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_CENTER
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "root"
|
||||
layer: ""
|
||||
inherit_alpha: true
|
||||
slice9 {
|
||||
x: 4.0
|
||||
y: 4.0
|
||||
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: 226.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_S
|
||||
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: 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: 0.65
|
||||
y: 0.65
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 250.0
|
||||
y: 30.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: "Button"
|
||||
font: "text_bold"
|
||||
id: "text_button"
|
||||
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: ""
|
||||
}
|
||||
material: "/builtins/materials/gui.material"
|
||||
adjust_reference: ADJUST_REFERENCE_PARENT
|
||||
max_nodes: 512
|
||||
@@ -0,0 +1,33 @@
|
||||
local component = require("druid.component")
|
||||
local lang_text = require("druid.extended.lang_text")
|
||||
|
||||
---@class property_button: druid.base_component
|
||||
---@field root node
|
||||
---@field text_name druid.lang_text
|
||||
---@field button druid.button
|
||||
---@field text_button druid.text
|
||||
---@field druid druid_instance
|
||||
local M = component.create("property_button")
|
||||
|
||||
---@param template string
|
||||
---@param nodes table<hash, node>
|
||||
function M:init(template, nodes)
|
||||
self.druid = self:get_druid(template, nodes)
|
||||
|
||||
self.root = self:get_node("root")
|
||||
self.text_name = self.druid:new(lang_text, "text_name") --[[@as druid.lang_text]]
|
||||
self.selected = self:get_node("selected")
|
||||
gui.set_alpha(self.selected, 0)
|
||||
|
||||
self.button = self.druid:new_button("button", self.on_click)
|
||||
self.text_button = self.druid:new_text("text_button")
|
||||
end
|
||||
|
||||
|
||||
function M:on_click()
|
||||
gui.set_alpha(self.selected, 1)
|
||||
gui.animate(self.selected, "color.w", 0, gui.EASING_INSINE, 0.16)
|
||||
end
|
||||
|
||||
|
||||
return M
|
||||
@@ -0,0 +1,320 @@
|
||||
script: ""
|
||||
fonts {
|
||||
name: "text_bold"
|
||||
font: "/example/assets/fonts/text_bold.font"
|
||||
}
|
||||
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"
|
||||
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: 174.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: 40.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_CENTER
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "root"
|
||||
layer: ""
|
||||
inherit_alpha: true
|
||||
slice9 {
|
||||
x: 4.0
|
||||
y: 4.0
|
||||
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: 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: 0.722
|
||||
y: 0.741
|
||||
z: 0.761
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
texture: "druid/icon_check"
|
||||
id: "icon"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_CENTER
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
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_AUTO
|
||||
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: 40.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_S
|
||||
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: ""
|
||||
}
|
||||
material: "/builtins/materials/gui.material"
|
||||
adjust_reference: ADJUST_REFERENCE_PARENT
|
||||
max_nodes: 512
|
||||
@@ -0,0 +1,54 @@
|
||||
local component = require("druid.component")
|
||||
local container = require("example.components.container.container")
|
||||
local lang_text = require("druid.extended.lang_text")
|
||||
|
||||
---@class property_checkbox: druid.base_component
|
||||
---@field druid druid_instance
|
||||
---@field root druid.container
|
||||
---@field text_name druid.lang_text
|
||||
---@field button druid.button
|
||||
---@field selected node
|
||||
local M = component.create("property_checkbox")
|
||||
|
||||
|
||||
---@param template string
|
||||
---@param nodes table<hash, node>
|
||||
function M:init(template, nodes)
|
||||
self.druid = self:get_druid(template, nodes)
|
||||
self.root = self.druid:new(container, "root") --[[@as druid.container]]
|
||||
|
||||
self.icon = self:get_node("icon")
|
||||
gui.set_enabled(self.icon, false)
|
||||
|
||||
self.selected = self:get_node("selected")
|
||||
gui.set_alpha(self.selected, 0)
|
||||
|
||||
self.text_name = self.druid:new(lang_text, "text_name") --[[@as druid.lang_text]]
|
||||
|
||||
self.button = self.druid:new_button("button")
|
||||
end
|
||||
|
||||
|
||||
---@param value boolean
|
||||
function M:set_value(value, is_instant)
|
||||
if self._value == value then
|
||||
return
|
||||
end
|
||||
|
||||
self._value = value
|
||||
gui.set_enabled(self.icon, value)
|
||||
|
||||
if not is_instant then
|
||||
gui.set_alpha(self.selected, 1)
|
||||
gui.animate(self.selected, "color.w", 0, gui.EASING_INSINE, 0.16)
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
---@return boolean
|
||||
function M:get_value()
|
||||
return self._value
|
||||
end
|
||||
|
||||
|
||||
return M
|
||||
@@ -0,0 +1,564 @@
|
||||
script: ""
|
||||
fonts {
|
||||
name: "text_bold"
|
||||
font: "/example/assets/fonts/text_bold.font"
|
||||
}
|
||||
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"
|
||||
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
|
||||
y: 4.0
|
||||
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
|
||||
y: 4.0
|
||||
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
|
||||
y: 4.0
|
||||
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
|
||||
@@ -0,0 +1,75 @@
|
||||
local component = require("druid.component")
|
||||
local container = require("example.components.container.container")
|
||||
local lang_text = require("druid.extended.lang_text")
|
||||
local slider = require("druid.extended.slider")
|
||||
|
||||
---@class property_slider: druid.base_component
|
||||
---@field druid druid_instance
|
||||
---@field root druid.container
|
||||
---@field text_name druid.lang_text
|
||||
---@field text_value druid.text
|
||||
---@field slider druid.slider
|
||||
local M = component.create("property_slider")
|
||||
|
||||
|
||||
---@param template string
|
||||
---@param nodes table<hash, node>
|
||||
function M:init(template, nodes)
|
||||
self.druid = self:get_druid(template, nodes)
|
||||
|
||||
self.root = self.druid:new(container, "root") --[[@as druid.container]]
|
||||
self.selected = self:get_node("selected")
|
||||
gui.set_alpha(self.selected, 0)
|
||||
self._value = 0
|
||||
|
||||
self.text_name = self.druid:new(lang_text, "text_name") --[[@as druid.lang_text]]
|
||||
self.text_value = self.druid:new_text("text_value")
|
||||
self.slider = self.druid:new(slider, "slider_pin", vmath.vector3(68, 0, 0), self._on_slider_change_by_user) --[[@as druid.slider]]
|
||||
self.slider:set_input_node("slider")
|
||||
|
||||
self:set_text_function(function(value)
|
||||
return math.floor(value * 100) .. "%"
|
||||
end)
|
||||
end
|
||||
|
||||
|
||||
---@param callback fun(value:number):string
|
||||
function M:set_text_function(callback)
|
||||
self._text_function = callback
|
||||
self.text_value:set_to(self._text_function(self._value))
|
||||
end
|
||||
|
||||
|
||||
---@param value number
|
||||
function M:set_value(value, is_instant)
|
||||
if self._value == value then
|
||||
return
|
||||
end
|
||||
|
||||
self._value = value
|
||||
self.slider:set(value, true)
|
||||
self.text_value:set_to(self._text_function(value))
|
||||
|
||||
if not is_instant then
|
||||
gui.set_alpha(self.selected, 1)
|
||||
gui.animate(self.selected, "color.w", 0, gui.EASING_INSINE, 0.16)
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
---@return number
|
||||
function M:get_value()
|
||||
return self._value
|
||||
end
|
||||
|
||||
|
||||
function M:_on_slider_change_by_user(value)
|
||||
self._value = value
|
||||
self.text_value:set_to(self._text_function(value))
|
||||
|
||||
gui.set_alpha(self.selected, 1)
|
||||
gui.animate(self.selected, "color.w", 0, gui.EASING_INSINE, 0.16)
|
||||
end
|
||||
|
||||
|
||||
return M
|
||||
1798
example/components/properties_panel/properties_panel.gui
Normal file
1798
example/components/properties_panel/properties_panel.gui
Normal file
File diff suppressed because it is too large
Load Diff
128
example/components/properties_panel/properties_panel.lua
Normal file
128
example/components/properties_panel/properties_panel.lua
Normal file
@@ -0,0 +1,128 @@
|
||||
local component = require("druid.component")
|
||||
local container = require("example.components.container.container")
|
||||
local lang_text = require("druid.extended.lang_text")
|
||||
|
||||
local property_checkbox = require("example.components.properties_panel.properties.property_checkbox")
|
||||
local property_slider = require("example.components.properties_panel.properties.property_slider")
|
||||
local property_button = require("example.components.properties_panel.properties.property_button")
|
||||
|
||||
---@class properties_panel: druid.base_component
|
||||
---@field root druid.container
|
||||
---@field text_no_properties druid.lang_text
|
||||
---@field scroll druid.scroll
|
||||
---@field druid druid_instance
|
||||
local M = component.create("properties_panel")
|
||||
|
||||
---@param template string
|
||||
---@param nodes table<hash, node>
|
||||
function M:init(template, nodes)
|
||||
self.druid = self:get_druid(template, nodes)
|
||||
|
||||
self.root = self.druid:new(container, "root") --[[@as druid.container]]
|
||||
self.root:add_container("text_header")
|
||||
self.root:add_container("separator")
|
||||
--self.root:add_container("scroll_view", nil, function()
|
||||
-- self.scroll:update_view_size()
|
||||
--end)
|
||||
|
||||
self.properties = {}
|
||||
|
||||
self.druid:new(lang_text, "text_header", "ui_properties_panel")
|
||||
self.text_no_properties = self.druid:new(lang_text, "text_no_properties", "ui_no_properties") --[[@as druid.lang_text]]
|
||||
|
||||
self.scroll = self.druid:new_scroll("scroll_view", "scroll_content")
|
||||
self.grid = self.druid:new_static_grid("scroll_content", "item_size", 1)
|
||||
self.scroll:bind_grid(self.grid)
|
||||
|
||||
self.property_checkbox_prefab = self:get_node("property_checkbox/root")
|
||||
gui.set_enabled(self.property_checkbox_prefab, false)
|
||||
|
||||
self.property_slider_prefab = self:get_node("property_slider/root")
|
||||
gui.set_enabled(self.property_slider_prefab, false)
|
||||
|
||||
self.property_button_prefab = self:get_node("property_button/root")
|
||||
gui.set_enabled(self.property_button_prefab, false)
|
||||
end
|
||||
|
||||
|
||||
function M:clear()
|
||||
for index = 1, #self.properties do
|
||||
self.druid:remove(self.properties[index])
|
||||
end
|
||||
self.properties = {}
|
||||
|
||||
local nodes = self.grid.nodes
|
||||
for index = 1, #nodes do
|
||||
gui.delete_node(nodes[index])
|
||||
end
|
||||
self.grid:clear()
|
||||
|
||||
gui.set_enabled(self.text_no_properties.text.node, true)
|
||||
end
|
||||
|
||||
|
||||
---@param text_id string
|
||||
---@param initial_value boolean
|
||||
---@param on_change_callback function
|
||||
---@return property_checkbox
|
||||
function M:add_checkbox(text_id, initial_value, on_change_callback)
|
||||
local nodes = gui.clone_tree(self.property_checkbox_prefab)
|
||||
local instance = self.druid:new(property_checkbox, "property_checkbox", nodes) --[[@as property_checkbox]]
|
||||
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)
|
||||
|
||||
gui.set_enabled(instance.root.node, true)
|
||||
self.grid:add(instance.root.node)
|
||||
table.insert(self.properties, instance)
|
||||
gui.set_enabled(self.text_no_properties.text.node, false)
|
||||
|
||||
return instance
|
||||
end
|
||||
|
||||
|
||||
---@param text_id string
|
||||
---@param initial_value number
|
||||
---@param on_change_callback function
|
||||
---@return property_slider
|
||||
function M:add_slider(text_id, initial_value, on_change_callback)
|
||||
local nodes = gui.clone_tree(self.property_slider_prefab)
|
||||
local instance = self.druid:new(property_slider, "property_slider", nodes) --[[@as property_slider]]
|
||||
instance.text_name:translate(text_id)
|
||||
instance:set_value(initial_value, true)
|
||||
|
||||
gui.set_enabled(instance.root.node, true)
|
||||
self.grid:add(instance.root.node)
|
||||
table.insert(self.properties, instance)
|
||||
gui.set_enabled(self.text_no_properties.text.node, false)
|
||||
|
||||
instance.slider.on_change_value:subscribe(function(_, value)
|
||||
on_change_callback(value)
|
||||
end)
|
||||
|
||||
return instance
|
||||
end
|
||||
|
||||
|
||||
---@param text_id string
|
||||
---@param on_click_callback function
|
||||
function M:add_button(text_id, on_click_callback)
|
||||
local nodes = gui.clone_tree(self.property_button_prefab)
|
||||
local instance = self.druid:new(property_button, "property_button", nodes) --[[@as property_button]]
|
||||
instance.text_name:translate(text_id)
|
||||
|
||||
gui.set_enabled(instance.root, true)
|
||||
self.grid:add(instance.root)
|
||||
table.insert(self.properties, instance)
|
||||
gui.set_enabled(self.text_no_properties.text.node, false)
|
||||
|
||||
instance.button.on_click:subscribe(on_click_callback)
|
||||
|
||||
return instance
|
||||
end
|
||||
|
||||
|
||||
return M
|
||||
Reference in New Issue
Block a user