mirror of
https://github.com/Insality/druid.git
synced 2025-09-27 18:12:19 +02:00
Widgets WIP
This commit is contained in:
@@ -1,16 +0,0 @@
|
||||
textures {
|
||||
name: "druid"
|
||||
texture: "/druid/druid.atlas"
|
||||
}
|
||||
nodes {
|
||||
size {
|
||||
x: 200.0
|
||||
y: 100.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
id: "root"
|
||||
inherit_alpha: true
|
||||
size_mode: SIZE_MODE_AUTO
|
||||
}
|
||||
material: "/builtins/materials/gui.material"
|
||||
adjust_reference: ADJUST_REFERENCE_PARENT
|
@@ -1,4 +1,3 @@
|
||||
script: ""
|
||||
fonts {
|
||||
name: "text_bold"
|
||||
font: "/druid/fonts/text_bold.font"
|
||||
@@ -7,322 +6,135 @@ textures {
|
||||
name: "druid"
|
||||
texture: "/druid/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"
|
||||
texture: "druid/rect_round2_width2"
|
||||
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
|
||||
x: 5.0
|
||||
y: 5.0
|
||||
z: 5.0
|
||||
w: 5.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
|
||||
|
@@ -1,6 +1,6 @@
|
||||
---@class property_button: druid.base_component
|
||||
---@class property_button: druid.widget
|
||||
---@field root node
|
||||
---@field text_name druid.lang_text
|
||||
---@field text_name druid.text
|
||||
---@field button druid.button
|
||||
---@field text_button druid.text
|
||||
---@field druid druid_instance
|
||||
@@ -12,7 +12,7 @@ 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")
|
||||
self.text_name = self.druid:new_text("text_name")
|
||||
self.selected = self:get_node("selected")
|
||||
gui.set_alpha(self.selected, 0)
|
||||
|
||||
|
@@ -1,6 +1,6 @@
|
||||
---@class property_checkbox: druid.widget
|
||||
---@field root node
|
||||
---@field druid druid_instance
|
||||
---@field root druid.container
|
||||
---@field text_name druid.lang_text
|
||||
---@field button druid.button
|
||||
---@field selected node
|
||||
@@ -11,7 +11,7 @@ local M = {}
|
||||
---@param nodes table<hash, node>
|
||||
function M:init(template, nodes)
|
||||
self.druid = self:get_druid(template, nodes)
|
||||
self.root = self.druid:new_container("root")
|
||||
self.root = self:get_node("root")
|
||||
|
||||
self.icon = self:get_node("icon")
|
||||
gui.set_enabled(self.icon, false)
|
||||
|
@@ -1,6 +1,6 @@
|
||||
---@class property_slider: druid.widget
|
||||
---@field root node
|
||||
---@field druid druid_instance
|
||||
---@field root druid.container
|
||||
---@field text_name druid.lang_text
|
||||
---@field text_value druid.text
|
||||
---@field slider druid.slider
|
||||
@@ -12,7 +12,7 @@ local M = {}
|
||||
function M:init(template, nodes)
|
||||
self.druid = self:get_druid(template, nodes)
|
||||
|
||||
self.root = self.druid:new_container("root") --[[@as druid.container]]
|
||||
self.root = self:get_node("root")
|
||||
self.selected = self:get_node("selected")
|
||||
gui.set_alpha(self.selected, 0)
|
||||
self._value = 0
|
||||
|
@@ -2,14 +2,18 @@ fonts {
|
||||
name: "text_regular"
|
||||
font: "/druid/fonts/text_regular.font"
|
||||
}
|
||||
fonts {
|
||||
name: "text_bold"
|
||||
font: "/druid/fonts/text_bold.font"
|
||||
}
|
||||
textures {
|
||||
name: "druid"
|
||||
texture: "/druid/druid.atlas"
|
||||
}
|
||||
nodes {
|
||||
size {
|
||||
x: 440.0
|
||||
y: 350.0
|
||||
x: 400.0
|
||||
y: 240.0
|
||||
}
|
||||
color {
|
||||
x: 0.173
|
||||
@@ -17,19 +21,24 @@ nodes {
|
||||
z: 0.204
|
||||
}
|
||||
type: TYPE_BOX
|
||||
texture: "druid/pixel"
|
||||
texture: "druid/ui_circle_16"
|
||||
id: "root"
|
||||
adjust_mode: ADJUST_MODE_STRETCH
|
||||
inherit_alpha: true
|
||||
slice9 {
|
||||
x: 8.0
|
||||
y: 8.0
|
||||
z: 8.0
|
||||
w: 8.0
|
||||
}
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: -210.0
|
||||
y: 165.0
|
||||
x: -196.0
|
||||
y: 116.0
|
||||
}
|
||||
scale {
|
||||
x: 0.9
|
||||
y: 0.9
|
||||
x: 0.8
|
||||
y: 0.8
|
||||
}
|
||||
size {
|
||||
x: 245.0
|
||||
@@ -62,12 +71,12 @@ nodes {
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: -200.0
|
||||
y: 115.0
|
||||
x: -196.0
|
||||
y: 70.0
|
||||
}
|
||||
size {
|
||||
x: 400.0
|
||||
y: 290.0
|
||||
x: 392.0
|
||||
y: 190.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
texture: "druid/empty"
|
||||
@@ -81,16 +90,19 @@ nodes {
|
||||
}
|
||||
nodes {
|
||||
size {
|
||||
x: 400.0
|
||||
y: 290.0
|
||||
x: 392.0
|
||||
y: 186.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
texture: "druid/empty"
|
||||
texture: "druid/pixel"
|
||||
id: "scroll_content"
|
||||
pivot: PIVOT_NW
|
||||
adjust_mode: ADJUST_MODE_STRETCH
|
||||
parent: "scroll_view"
|
||||
inherit_alpha: true
|
||||
slice9 {
|
||||
w: 6.0
|
||||
}
|
||||
visible: false
|
||||
}
|
||||
nodes {
|
||||
@@ -280,5 +292,23 @@ nodes {
|
||||
parent: "property_button/button"
|
||||
template_node_child: true
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 192.0
|
||||
y: 112.0
|
||||
}
|
||||
color {
|
||||
x: 0.129
|
||||
y: 0.141
|
||||
z: 0.157
|
||||
}
|
||||
type: TYPE_BOX
|
||||
texture: "druid/ui_circle_32"
|
||||
id: "icon_drag"
|
||||
pivot: PIVOT_NE
|
||||
parent: "root"
|
||||
inherit_alpha: true
|
||||
size_mode: SIZE_MODE_AUTO
|
||||
}
|
||||
material: "/builtins/materials/gui.material"
|
||||
adjust_reference: ADJUST_REFERENCE_PARENT
|
||||
|
@@ -4,7 +4,7 @@ local property_button = require("druid.widget.properties_panel.properties.proper
|
||||
|
||||
---@class properties_panel: druid.widget
|
||||
---@field root node
|
||||
---@field text_no_properties druid.lang_text
|
||||
---@field text_no_properties node
|
||||
---@field scroll druid.scroll
|
||||
---@field druid druid_instance
|
||||
local M = {}
|
||||
@@ -16,15 +16,18 @@ function M:init(template, nodes)
|
||||
|
||||
--self.root = self.druid:new_container("root")
|
||||
self.root = self:get_node("root")
|
||||
self.text_no_properties = self:get_node("text_no_properties")
|
||||
--self.root:add_container("text_header")
|
||||
|
||||
self.properties = {}
|
||||
|
||||
self.scroll = self.druid:new_scroll("scroll_view", "scroll_content")
|
||||
--self.layout = self.druid:new_layout("scroll_content")
|
||||
self.layout = self.druid:new_layout("scroll_content", "vertical")
|
||||
:set_hug_content(false, true)
|
||||
|
||||
--self.grid = self.druid:new_grid("scroll_content", "item_size", 1)
|
||||
--self.scroll:bind_grid(self.grid)
|
||||
self.layout.on_size_changed:subscribe(self.on_size_changed, self)
|
||||
|
||||
self.drag_corner = self.druid:new_drag("icon_drag", self.on_drag_corner)
|
||||
|
||||
self.property_checkbox_prefab = self:get_node("property_checkbox/root")
|
||||
gui.set_enabled(self.property_checkbox_prefab, false)
|
||||
@@ -34,6 +37,18 @@ function M:init(template, nodes)
|
||||
|
||||
self.property_button_prefab = self:get_node("property_button/root")
|
||||
gui.set_enabled(self.property_button_prefab, false)
|
||||
|
||||
self.container = self.druid:new_container(self.root)
|
||||
self.container:add_container("text_header")
|
||||
self.container:add_container("icon_drag")
|
||||
local container_scroll_view = self.container:add_container("scroll_view")
|
||||
container_scroll_view:add_container("scroll_content")
|
||||
end
|
||||
|
||||
|
||||
function M:on_drag_corner(dx, dy)
|
||||
local position = self.container:get_position()
|
||||
self.container:set_position(position.x + dx, position.y + dy)
|
||||
end
|
||||
|
||||
|
||||
@@ -42,14 +57,15 @@ function M:clear()
|
||||
self.druid:remove(self.properties[index])
|
||||
end
|
||||
self.properties = {}
|
||||
gui.set_enabled(self.text_no_properties, true)
|
||||
end
|
||||
|
||||
--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)
|
||||
function M:on_size_changed(new_size)
|
||||
new_size.x = new_size.x + 8
|
||||
new_size.y = new_size.y + 50 + 8
|
||||
|
||||
self.container:set_size(new_size.x, new_size.y, gui.PIVOT_N)
|
||||
end
|
||||
|
||||
|
||||
@@ -59,17 +75,17 @@ end
|
||||
---@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)
|
||||
local instance = self.druid:new_widget(property_checkbox, "property_checkbox", nodes)
|
||||
instance.text_name:set_to(text_id)
|
||||
instance:set_value(initial_value, true)
|
||||
instance.button.on_click:subscribe(function()
|
||||
on_change_callback(instance:get_value())
|
||||
end)
|
||||
|
||||
gui.set_enabled(instance.root.node, true)
|
||||
--self.grid:add(instance.root.node)
|
||||
gui.set_enabled(instance.root, true)
|
||||
self.layout:add(instance.root)
|
||||
table.insert(self.properties, instance)
|
||||
gui.set_enabled(self.text_no_properties.text.node, false)
|
||||
gui.set_enabled(self.text_no_properties, false)
|
||||
|
||||
return instance
|
||||
end
|
||||
@@ -81,14 +97,14 @@ end
|
||||
---@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)
|
||||
local instance = self.druid:new_widget(property_slider, "property_slider", nodes)
|
||||
instance.text_name:set_to(text_id)
|
||||
instance:set_value(initial_value, true)
|
||||
|
||||
gui.set_enabled(instance.root.node, true)
|
||||
--self.grid:add(instance.root.node)
|
||||
gui.set_enabled(instance.root, true)
|
||||
self.layout:add(instance.root)
|
||||
table.insert(self.properties, instance)
|
||||
gui.set_enabled(self.text_no_properties.text.node, false)
|
||||
gui.set_enabled(self.text_no_properties, false)
|
||||
|
||||
instance.slider.on_change_value:subscribe(function(_, value)
|
||||
on_change_callback(value)
|
||||
@@ -99,21 +115,41 @@ end
|
||||
|
||||
|
||||
---@param text_id string
|
||||
---@param on_click_callback function
|
||||
function M:add_button(text_id, on_click_callback)
|
||||
---@param on_click_callback function|nil
|
||||
---@param callback_context any|nil
|
||||
function M:add_button(text_id, on_click_callback, callback_context)
|
||||
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)
|
||||
local instance = self.druid:new_widget(property_button, "property_button", nodes)
|
||||
instance.text_name:set_to(text_id)
|
||||
|
||||
gui.set_enabled(instance.root, true)
|
||||
--self.grid:add(instance.root)
|
||||
self.layout:add(instance.root)
|
||||
table.insert(self.properties, instance)
|
||||
gui.set_enabled(self.text_no_properties.text.node, false)
|
||||
gui.set_enabled(self.text_no_properties, false)
|
||||
|
||||
instance.button.on_click:subscribe(on_click_callback)
|
||||
if on_click_callback then
|
||||
instance.button.on_click:subscribe(on_click_callback, callback_context)
|
||||
end
|
||||
|
||||
return instance
|
||||
end
|
||||
|
||||
|
||||
function M:remove(widget)
|
||||
for index = 1, #self.properties do
|
||||
if self.properties[index] == widget then
|
||||
self.druid:remove(widget)
|
||||
self.layout:remove(widget.root)
|
||||
gui.delete_node(widget.root)
|
||||
table.remove(self.properties, index)
|
||||
break
|
||||
end
|
||||
end
|
||||
|
||||
if #self.properties == 0 then
|
||||
gui.set_enabled(self.text_no_properties, true)
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
return M
|
||||
|
Reference in New Issue
Block a user