Update widgets

druid/extended/container.lua

@@ -0,0 +1,527 @@
+--- Container component
+-- Container setup in GUI
+-- parent container - container that contains this container. If not, then it's a window default container or parent node
+-- container pivot - the point of the parent container that will be used as a pivot point for positioning
+-- node_offset - position offset from parent container pivot point (vector4 - offset in pixels from each side)
+-- adjust mode FIT - container will keep it's size and will be positioned inside parent container
+-- 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
+
+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 M = 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)|nil Callback on size changed
+function M: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 M: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 M:on_remove()
+	self:clear_draggable_corners()
+end
+
+
+function M:refresh_origins()
+	self.origin_size = gui.get_size(self.node)
+	self.origin_position = gui.get_position(self.node)
+	self:set_pivot(gui.get_pivot(self.node))
+end
+
+
+---@param pivot constant
+function M:set_pivot(pivot)
+	gui.set_pivot(self.node, pivot)
+	self.pivot_offset = helper.get_pivot_offset(pivot)
+	self.center_offset = -vmath.vector3(self.size.x * self.pivot_offset.x, self.size.y * self.pivot_offset.y, 0)
+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 M:on_style_change(style)
+	self.style = {}
+	self.style.DRAGGABLE_CORNER_SIZE = style.DRAGGABLE_CORNER_SIZE or vmath.vector3(24, 24, 0)
+	self.style.DRAGGABLE_CORNER_COLOR = style.DRAGGABLE_CORNER_COLOR or vmath.vector4(10)
+end
+
+
+--- Set new size of layout node
+---@param width number|nil
+---@param height number|nil
+---@return druid.container Container
+function M: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 M: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 M:get_size()
+	return self.size
+end
+
+
+---Get current scale of layout node
+---@return vector3 scale
+function M: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 M: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 M:fit_into_window()
+	return self:fit_into_size(vmath.vector3(gui.get_width(), gui.get_height(), 0))
+end
+
+
+function M:on_window_resized()
+	local x_koef, y_koef = helper.get_screen_aspect_koef()
+	self.x_koef = x_koef
+	self.y_koef = y_koef
+
+	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 M: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(M, 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 M: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 M: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 M: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 M: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 M:update_child_containers()
+	for index = 1, #self._containers do
+		self._containers[index]:refresh()
+	end
+end
+
+
+---@return druid.container Container
+function M: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 M: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 M:_on_corner_drag(x, y, corner_offset)
+	x = corner_offset.x >= 0 and x or -x
+	y = corner_offset.y >= 0 and y or -y
+
+	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 M: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 M:set_min_size(min_size_x, min_size_y)
+	self.min_size_x = min_size_x or self.min_size_x
+	self.min_size_y = min_size_y or self.min_size_y
+	self:refresh()
+
+	return self
+end
+
+
+return M

druid/system/druid_instance.lua

@@ -20,27 +20,6 @@ local helper = require("druid.helper")
 local settings = require("druid.system.settings")
 local base_component = require("druid.component")
 
-local drag = require("druid.base.drag")
-local text = require("druid.base.text")
-local hover = require("druid.base.hover")
-local scroll = require("druid.base.scroll")
-local button = require("druid.base.button")
-local blocker = require("druid.base.blocker")
-local static_grid = require("druid.base.static_grid")
-local back_handler = require("druid.base.back_handler")
-
- local input = require("druid.extended.input")
- local swipe = require("druid.extended.swipe")
- local slider = require("druid.extended.slider")
- local progress = require("druid.extended.progress")
- local data_list = require("druid.extended.data_list")
- local lang_text = require("druid.extended.lang_text")
- local timer_component = require("druid.extended.timer")
- local layout = require("druid.extended.layout")
- local hotkey = require("druid.extended.hotkey")
- local rich_input = require("druid.extended.rich_input")
- local rich_text = require("druid.extended.rich_text")
-
 ---@class druid_instance
 ---@field components_all druid.base_component[] All created components
 ---@field components_interest table<string, druid.base_component[]> All components sorted by interest
@@ -547,6 +526,7 @@ function M:new_widget(widget, template, nodes, ...)
 end
 
 
+local button = require("druid.base.button")
 ---Create Button component
 ---@param node string|node The node_id or gui.get_node(node_id)
 ---@param callback function|nil Button callback
@@ -558,6 +538,7 @@ function M:new_button(node, callback, params, anim_node)
 end
 
 
+local blocker = require("druid.base.blocker")
 ---Create Blocker component
 ---@param node string|node The node_id or gui.get_node(node_id)
 ---@return druid.blocker Blocker component
@@ -566,6 +547,7 @@ function M:new_blocker(node)
 end
 
 
+local back_handler = require("druid.base.back_handler")
 ---Create BackHandler component
 ---@param callback function|nil The callback(self, custom_args) to call on back event
 ---@param params any|nil Callback argument
@@ -575,6 +557,7 @@ function M:new_back_handler(callback, params)
 end
 
 
+local hover = require("druid.base.hover")
 ---Create Hover component
 ---@param node string|node The node_id or gui.get_node(node_id)
 ---@param on_hover_callback function|nil Hover callback
@@ -585,6 +568,7 @@ function M:new_hover(node, on_hover_callback, on_mouse_hover_callback)
 end
 
 
+local text = require("druid.base.text")
 ---Create Text component
 ---@param node string|node The node_id or gui.get_node(node_id)
 ---@param value string|nil Initial text. Default value is node text from GUI scene.
@@ -595,6 +579,7 @@ function M:new_text(node, value, no_adjust)
 end
 
 
+local static_grid = require("druid.base.static_grid")
 ---Create Grid component
 ---@param parent_node string|node The node_id or gui.get_node(node_id). Parent of all Grid items.
 ---@param item string|node Item prefab. Required to get grid's item size. Can be adjusted separately.
@@ -605,6 +590,7 @@ function M:new_grid(parent_node, item, in_row)
 end
 
 
+local scroll = require("druid.base.scroll")
 ---Create Scroll component
 ---@param view_node string|node The node_id or gui.get_node(node_id). Will used as user input node.
 ---@param content_node string|node The node_id or gui.get_node(node_id). Will used as scrollable node inside view_node.
@@ -614,6 +600,7 @@ function M:new_scroll(view_node, content_node)
 end
 
 
+local drag = require("druid.base.drag")
 ---Create Drag component
 ---@param node string|node The node_id or gui.get_node(node_id). Will used as user input node.
 ---@param on_drag_callback function|nil Callback for on_drag_event(self, dx, dy)
@@ -623,6 +610,7 @@ function M:new_drag(node, on_drag_callback)
 end
 
 
+local swipe = require("druid.extended.swipe")
 ---Create Swipe component
 ---@param node string|node The node_id or gui.get_node(node_id). Will used as user input node.
 ---@param on_swipe_callback function|nil Swipe callback for on_swipe_end event
@@ -632,6 +620,7 @@ function M:new_swipe(node, on_swipe_callback)
 end
 
 
+local lang_text = require("druid.extended.lang_text")
 ---Create LangText component
 ---@param node string|node The_node id or gui.get_node(node_id)
 ---@param locale_id string|nil Default locale id or text from node as default
@@ -642,6 +631,7 @@ function M:new_lang_text(node, locale_id, adjust_type)
 end
 
 
+local slider = require("druid.extended.slider")
 ---Create Slider component
 ---@param pin_node string|node The_node id or gui.get_node(node_id).
 ---@param end_pos vector3 The end position of slider
@@ -651,6 +641,8 @@ function M:new_slider(pin_node, end_pos, callback)
 	return self:new(slider, pin_node, end_pos, callback)
 end
 
+
+local input = require("druid.extended.input")
 ---Create Input component
 ---@param click_node string|node Button node to enabled input component
 ---@param text_node string|node|druid.text Text node what will be changed on user input
@@ -661,6 +653,7 @@ function M:new_input(click_node, text_node, keyboard_type)
 end
 
 
+local data_list = require("druid.extended.data_list")
 ---Create DataList component
 ---@param druid_scroll druid.scroll The Scroll instance for Data List component
 ---@param druid_grid druid.grid The StaticGrid} or @{DynamicGrid instance for Data List component
@@ -671,6 +664,7 @@ function M:new_data_list(druid_scroll, druid_grid, create_function)
 end
 
 
+local timer_component = require("druid.extended.timer")
 ---Create Timer component
 ---@param node string|node Gui text node
 ---@param seconds_from number Start timer value in seconds
@@ -682,7 +676,7 @@ function M:new_timer(node, seconds_from, seconds_to, callback)
 end
 
 
-
+local progress = require("druid.extended.progress")
 ---Create Progress component
 ---@param node string|node Progress bar fill node or node name
 ---@param key string Progress bar direction: const.SIDE.X or const.SIDE.Y
@@ -693,6 +687,7 @@ function M:new_progress(node, key, init_value)
 end
 
 
+local layout = require("druid.extended.layout")
 ---Create Layout component
 ---@param node string|node The_node id or gui.get_node(node_id).
 ---@param mode string The layout mode
@@ -702,6 +697,18 @@ function M:new_layout(node, mode)
 end
 
 
+local container = require("druid.extended.container")
+---Create Container component
+---@param node string|node The_node id or gui.get_node(node_id).
+---@param mode string|nil Layout mode
+---@param callback fun(self: druid.container, size: vector3)|nil Callback on size changed
+---@return druid.container Container component
+function M:new_container(node, mode, callback)
+	return self:new(container, node, mode, callback)
+end
+
+
+local hotkey = require("druid.extended.hotkey")
 ---Create Hotkey component
 ---@param keys_array string|string[] Keys for trigger action. Should contains one action key and any amount of modificator keys
 ---@param callback function The callback function
@@ -712,6 +719,7 @@ function M:new_hotkey(keys_array, callback, callback_argument)
 end
 
 
+local rich_text = require("druid.custom.rich_text.rich_text")
 ---Create RichText component.
 ---@param text_node string|node The text node to make Rich Text
 ---@param value string|nil The initial text value. Default will be gui.get_text(text_node)
@@ -721,6 +729,7 @@ function M:new_rich_text(text_node, value)
 end
 
 
+local rich_input = require("druid.custom.rich_input.rich_input")
 ---Create RichInput component.
 -- As a template please check rich_input.gui layout.
 ---@param template string The template string name

druid/widget/properties_panel/properties/property_button.lua

@@ -1,13 +1,10 @@
-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")
+local M = {}
 
 ---@param template string
 ---@param nodes table<hash, node>
@@ -15,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") --[[@as druid.lang_text]]
+	self.text_name = self.druid:new_lang_text("text_name")
 	self.selected = self:get_node("selected")
 	gui.set_alpha(self.selected, 0)
 

druid/widget/properties_panel/properties/property_checkbox.lua

@@ -1,21 +1,17 @@
-local component = require("druid.component")
+---@class property_checkbox: druid.widget
-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")
+local M = {}
 
 
 ---@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 = self.druid:new_container("root")
 
 	self.icon = self:get_node("icon")
 	gui.set_enabled(self.icon, false)
@@ -23,7 +19,7 @@ function M:init(template, nodes)
 	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.text_name = self.druid:new_lang_text("text_name")
 
 	self.button = self.druid:new_button("button", self.on_click)
 end

druid/widget/properties_panel/properties/property_slider.lua

@@ -1,15 +1,10 @@
-local component = require("druid.component")
+---@class property_slider: druid.widget
-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")
+local M = {}
 
 
 ---@param template string
@@ -17,14 +12,14 @@ local M = component.create("property_slider")
 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.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_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 = 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)

druid/widget/properties_panel/properties_panel.gui

@@ -20,7 +20,6 @@ nodes {
   texture: "druid/pixel"
   id: "root"
   adjust_mode: ADJUST_MODE_STRETCH
-  layer: "druid"
   inherit_alpha: true
 }
 nodes {
@@ -57,7 +56,6 @@ nodes {
     z: 1.0
   }
   parent: "root"
-  layer: "text_regular"
   inherit_alpha: true
   outline_alpha: 0.0
   shadow_alpha: 0.0
@@ -78,7 +76,6 @@ nodes {
   pivot: PIVOT_NW
   adjust_mode: ADJUST_MODE_STRETCH
   parent: "root"
-  layer: "druid"
   inherit_alpha: true
   clipping_mode: CLIPPING_MODE_STENCIL
 }
@@ -93,7 +90,6 @@ nodes {
   pivot: PIVOT_NW
   adjust_mode: ADJUST_MODE_STRETCH
   parent: "scroll_view"
-  layer: "druid"
   inherit_alpha: true
   visible: false
 }
@@ -131,7 +127,6 @@ nodes {
     z: 1.0
   }
   parent: "root"
-  layer: "text_regular"
   inherit_alpha: true
   outline_alpha: 0.0
   shadow_alpha: 0.0
@@ -285,11 +280,5 @@ nodes {
   parent: "property_button/button"
   template_node_child: true
 }
-layers {
-  name: "druid"
-}
-layers {
-  name: "text_regular"
-}
 material: "/builtins/materials/gui.material"
 adjust_reference: ADJUST_REFERENCE_PARENT

druid/widget/properties_panel/properties_panel.lua

@@ -1,9 +1,6 @@
-local container = require("example.components.container.container")
+local property_checkbox = require("druid.widget.properties_panel.properties.property_checkbox")
-local lang_text = require("druid.extended.lang_text")
+local property_slider = require("druid.widget.properties_panel.properties.property_slider")
-
+local property_button = require("druid.widget.properties_panel.properties.property_button")
-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.widget
 ---@field root node
@@ -17,21 +14,17 @@ 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.druid:new_container("root")
-	--self.root:add_container("text_header")
-	--self.root:add_container("separator")
 	self.root = self:get_node("root")
+	--self.root:add_container("text_header")
 
 	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.layout = self.druid:new_layout("scroll_content", "item_size")
+	--self.layout = self.druid:new_layout("scroll_content")
 
-	self.grid = self.druid:new_static_grid("scroll_content", "item_size", 1)
+	--self.grid = self.druid:new_grid("scroll_content", "item_size", 1)
-	self.scroll:bind_grid(self.grid)
+	--self.scroll:bind_grid(self.grid)
 
 	self.property_checkbox_prefab = self:get_node("property_checkbox/root")
 	gui.set_enabled(self.property_checkbox_prefab, false)
@@ -50,11 +43,11 @@ function M:clear()
 	end
 	self.properties = {}
 
-	local nodes = self.grid.nodes
+	--local nodes = self.grid.nodes
-	for index = 1, #nodes do
+	--for index = 1, #nodes do
-		gui.delete_node(nodes[index])
+	--	gui.delete_node(nodes[index])
-	end
+	--end
-	self.grid:clear()
+	--self.grid:clear()
 
 	gui.set_enabled(self.text_no_properties.text.node, true)
 end
@@ -74,7 +67,7 @@ function M:add_checkbox(text_id, initial_value, on_change_callback)
 	end)
 
 	gui.set_enabled(instance.root.node, true)
-	self.grid:add(instance.root.node)
+	--self.grid:add(instance.root.node)
 	table.insert(self.properties, instance)
 	gui.set_enabled(self.text_no_properties.text.node, false)
 
@@ -93,7 +86,7 @@ function M:add_slider(text_id, initial_value, on_change_callback)
 	instance:set_value(initial_value, true)
 
 	gui.set_enabled(instance.root.node, true)
-	self.grid:add(instance.root.node)
+	--self.grid:add(instance.root.node)
 	table.insert(self.properties, instance)
 	gui.set_enabled(self.text_no_properties.text.node, false)
 
@@ -113,7 +106,7 @@ function M:add_button(text_id, on_click_callback)
 	instance.text_name:translate(text_id)
 
 	gui.set_enabled(instance.root, true)
-	self.grid:add(instance.root)
+	--self.grid:add(instance.root)
 	table.insert(self.properties, instance)
 	gui.set_enabled(self.text_no_properties.text.node, false)