Tiling node to component, add way to move examples properties code to example itself

druid/widget/tiling_node/tiling_node.lua

@@ -1,18 +1,21 @@
+local component = require("druid.component")
 local helper = require("druid.helper")
 local defer = require("event.defer")
 
----@class druid.tiling_node: druid.widget
+---@class druid.tiling_node: druid.component
 ---@field animation table
 ---@field node node
 ---@field params vector4
 ---@field time number
-local M = {}
+local M = component.create("tiling_node")
 
 M.PROP_SIZE_X = hash("size.x")
 M.PROP_SIZE_Y = hash("size.y")
 M.PROP_SCALE_X = hash("scale.x")
 M.PROP_SCALE_Y = hash("scale.y")
 
+
+---@param node node|string
 function M:init(node)
 	self.node = self:get_node(node)
 	self.animation = nil

example/components/examples_list_view/examples_list_view.lua

@@ -46,6 +46,9 @@ function M:init(template, nodes)
 	end)
 end
 
+---@class example_instance: druid.widget
+---@field on_create fun(self: example_instance, output_list: output_list)?
+---@field properties_control fun(self: example_instance, properties_panel: properties_panel)?
 
 ---@param examples druid.examples
 ---@param druid_example druid.example @The main GUI component
@@ -95,7 +98,7 @@ function M:add_example(examples, druid_example)
 			elseif example_data.component_class then -- Keep for backward compatibility
 				instance = druid_example.druid:new(example_data.component_class, example_data.template)
 			end
-			---@cast instance druid.component|druid.widget
+			---@cast instance example_instance
 
 			self.selected_example = {
 				data = example_data,
@@ -106,7 +109,9 @@ function M:add_example(examples, druid_example)
 			item:set_selected(true)
 
 			druid_example.output_list:clear()
-			if example_data.on_create then
+			if instance.on_create then
+				instance:on_create(druid_example.output_list)
+			elseif example_data.on_create then
 				example_data.on_create(instance, druid_example.output_list)
 			end
 
@@ -119,7 +124,11 @@ function M:add_example(examples, druid_example)
 			druid_example.example_scene:set_gui_path(example_data.code_url)
 
 			druid_example.properties_panel:clear()
-			if example_data.properties_control then
+
+			-- First we want to chec
+			if instance.properties_control then
+				instance:properties_control(druid_example.properties_panel)
+			elseif example_data.properties_control then
 				example_data.properties_control(instance, druid_example.properties_panel)
 			end
 

example/examples/widgets/examples_list.lua

@@ -185,29 +185,6 @@ function M.get_examples()
 			root = "example_tiling_node/root",
 			code_url = "example/examples/widgets/tiling_node/example_tiling_node.lua",
 			widget_class = require("example.examples.widgets.tiling_node.example_tiling_node"),
-			properties_control = function(instance, properties_panel)
-				---@cast instance examples.example_tiling_node
-				properties_panel:add_slider("Repeat X", 0, function(value)
-					local repeat_x = math.floor(value * 10)
-					instance.tiling_node:refresh(repeat_x, nil)
-				end)
-				properties_panel:add_slider("Repeat Y", 0, function(value)
-					local repeat_y = math.floor(value * 10)
-					instance.tiling_node:refresh(nil, repeat_y)
-				end)
-				properties_panel:add_slider("Offset X", 0, function(value)
-					instance.tiling_node:set_offset(value, nil)
-				end)
-				properties_panel:add_slider("Offset Y", 0, function(value)
-					instance.tiling_node:set_offset(nil, value)
-				end)
-				properties_panel:add_slider("Margin X", 0, function(value)
-					instance.tiling_node:set_margin(value, nil)
-				end)
-				properties_panel:add_slider("Margin Y", 0, function(value)
-					instance.tiling_node:set_margin(nil, value)
-				end)
-			end,
 		}
 	}
 end

example/examples/widgets/tiling_node/example_tiling_node.gui

@@ -15,14 +15,15 @@ nodes {
 }
 nodes {
   size {
-    x: 500.0
-    y: 500.0
+    x: 900.0
+    y: 900.0
   }
   type: TYPE_BOX
   texture: "tiling_texture/pattern_0004"
   id: "tiling_node"
   parent: "root"
   inherit_alpha: true
+  alpha: 0.42
   material: "gui_tiling_node"
 }
 material: "/builtins/materials/gui.material"

example/examples/widgets/tiling_node/example_tiling_node.lua

@@ -5,7 +5,32 @@ local M = {}
 
 
 function M:init()
-	self.tiling_node = self.druid:new_widget(tiling_node, nil, nil, self:get_node("tiling_node"))
+	self.tiling_node = self.druid:new(tiling_node, self:get_node("tiling_node"))
+end
+
+
+---@param properties_panel properties_panel
+function M:properties_control(properties_panel)
+	properties_panel:add_slider("Repeat X", 0, function(value)
+		local repeat_x = math.floor(value * 10)
+		self.tiling_node:set_repeat(repeat_x, nil)
+	end)
+	properties_panel:add_slider("Repeat Y", 0, function(value)
+		local repeat_y = math.floor(value * 10)
+		self.tiling_node:set_repeat(nil, repeat_y)
+	end)
+	properties_panel:add_slider("Offset X", 0, function(value)
+		self.tiling_node:set_offset(value, nil)
+	end)
+	properties_panel:add_slider("Offset Y", 0, function(value)
+		self.tiling_node:set_offset(nil, value)
+	end)
+	properties_panel:add_slider("Margin X", 0, function(value)
+		self.tiling_node:set_margin(value, nil)
+	end)
+	properties_panel:add_slider("Margin Y", 0, function(value)
+		self.tiling_node:set_margin(nil, value)
+	end)
 end
 
 

example/locales/en.json

@@ -196,6 +196,9 @@
 	"ui_example_gamepad_tester": "Gamepad Tester",
 	"ui_example_gamepad_tester_description": "Test your gamepad here to bind buttons and axes",
 
+	"ui_example_widget_tiling_node": "Tiling Node",
+	"ui_example_widget_tiling_node_description": "Here is a example of tiling node usage",
+
 	"ui_example_on_screen_control": "On Screen Control",
 	"ui_example_on_screen_control_description": "Here is a example of on screen control. The on_screen_input here is a joystick with a callback as Druid component",