mirror of
https://github.com/Insality/druid.git
synced 2025-09-27 18:12:19 +02:00
Update example with new brand one
This commit is contained in:
Insality
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
|
||||
Reference in New Issue
Block a user