Update example app

example/components/container/container.lua

@@ -1,6 +1,6 @@
 --- Container component
 -- Container setup in GUI
--- parent container - container that contains this container. If not, then it's a window default container
+-- 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
@@ -9,7 +9,6 @@
 -- 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")
@@ -34,7 +33,7 @@ local Event = require("druid.event")
 ---@field _parent_container druid.container
 ---@field _containers table
 ---@field _draggable_corners table
-local Container = component.create("container")
+local M = component.create("container")
 
 local abs = math.abs
 local min = math.min
@@ -52,7 +51,7 @@ local CORNER_PIVOTS = {
 ---@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)
+function M:init(node, mode, callback)
 	self.node = self:get_node(node)
 	self.druid = self:get_druid()
 
@@ -91,7 +90,7 @@ function Container:init(node, mode, callback)
 end
 
 
-function Container:on_late_init()
+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()
@@ -99,12 +98,12 @@ function Container:on_late_init()
 end
 
 
-function Container:on_remove()
+function M:on_remove()
 	self:clear_draggable_corners()
 end
 
 
-function Container:refresh_origins()
+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))
@@ -112,7 +111,7 @@ end
 
 
 ---@param pivot constant
-function Container:set_pivot(pivot)
+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)
@@ -125,7 +124,7 @@ end
 -- @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)
+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)
@@ -136,7 +135,7 @@ end
 ---@param width number|nil
 ---@param height number|nil
 ---@return druid.container @{Container}
-function Container:set_size(width, height)
+function M:set_size(width, height)
 	width = width or self.size.x
 	height = height or self.size.y
 
@@ -165,7 +164,7 @@ end
 
 ---@param pos_x number
 ---@param pos_y number
-function Container:set_position(pos_x, pos_y)
+function M:set_position(pos_x, pos_y)
 	if self._position.x == pos_x and self._position.y == pos_y then
 		return
 	end
@@ -178,14 +177,14 @@ end
 
 ---Get current size of layout node
 ---@return vector3 size
-function Container:get_size()
+function M:get_size()
 	return self.size
 end
 
 
 ---Get current scale of layout node
 ---@return vector3 scale
-function Container:get_scale()
+function M:get_scale()
 	return helper.get_scene_scale(self.node, true) --[[@as vector3]]
 end
 
@@ -193,7 +192,7 @@ 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)
+function M:fit_into_size(target_size)
 	self.fit_size = target_size
 	self:refresh()
 	return self
@@ -202,13 +201,13 @@ end
 
 --- Set current size for layout node to fit inside it
 ---@return druid.container @{Container}
-function Container:fit_into_window()
+function M: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()
+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
@@ -223,7 +222,7 @@ end
 ---@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)
+function M:add_container(node_or_container, mode, on_resize_callback)
 	local container = nil
 	local node = node_or_container
 
@@ -237,7 +236,7 @@ function Container:add_container(node_or_container, mode, on_resize_callback)
 	-- Covert node_id to node if needed
 	node = self:get_node(node)
 
-	container = container or self.druid:new(Container, node, mode)
+	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)
@@ -249,7 +248,7 @@ end
 
 
 ---@return druid.container|nil
-function Container:remove_container_by_node(node)
+function M:remove_container_by_node(node)
 	for index = 1, #self._containers do
 		local container = self._containers[index]
 		if container.node == node then
@@ -264,7 +263,7 @@ end
 
 
 ---@param parent_container druid.container|nil
-function Container:set_parent_container(parent_container)
+function M:set_parent_container(parent_container)
 	if not parent_container then
 		self._parent_container = nil
 		gui.set_parent(self.node, nil)
@@ -328,7 +327,7 @@ end
 
 -- Glossary
 -- Center Offset - vector from node position to visual center of node
-function Container:refresh()
+function M:refresh()
 	local x_koef, y_koef = self.x_koef, self.y_koef
 	self:refresh_scale()
 
@@ -400,7 +399,7 @@ function Container:refresh()
 end
 
 
-function Container:refresh_scale()
+function M:refresh_scale()
 	if self._fit_node then
 		local fit_node_size = gui.get_size(self._fit_node)
 
@@ -416,7 +415,7 @@ function Container:refresh_scale()
 end
 
 
-function Container:update_child_containers()
+function M:update_child_containers()
 	for index = 1, #self._containers do
 		self._containers[index]:refresh()
 	end
@@ -424,7 +423,7 @@ end
 
 
 ---@return druid.container @{Container}
-function Container:create_draggable_corners()
+function M:create_draggable_corners()
 	self:clear_draggable_corners()
 
 	for _, corner_pivot in pairs(CORNER_PIVOTS) do
@@ -454,7 +453,7 @@ end
 
 
 ---@return druid.container @{Container}
-function Container:clear_draggable_corners()
+function M:clear_draggable_corners()
 	for index = 1, #self._draggable_corners do
 		local drag_component = self._draggable_corners[index]
 		self.druid:remove(drag_component)
@@ -468,7 +467,7 @@ function Container:clear_draggable_corners()
 end
 
 
-function Container:_on_corner_drag(x, y, corner_offset)
+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
 
@@ -507,7 +506,7 @@ 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)
+function M:fit_into_node(node)
 	self._fit_node = self:get_node(node)
 	self:refresh_scale()
 	return self
@@ -516,7 +515,7 @@ end
 
 ---@param min_size_x number|nil
 ---@param min_size_y number|nil
-function Container:set_min_size(min_size_x, min_size_y)
+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()
@@ -525,4 +524,4 @@ function Container:set_min_size(min_size_x, min_size_y)
 end
 
 
-return Container
+return M

example/components/example_scene/example_scene.gui

@@ -1,105 +1,41 @@
-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
+    x: 800.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"
@@ -107,40 +43,64 @@ nodes {
   "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
+nodes {
-  text_tracking: 0.0
+  position {
-  custom_type: 0
+    x: 530.0
-  enabled: true
+    y: 505.0
-  visible: true
+  }
-  material: ""
+  scale {
+    x: 0.5
+    y: 0.5
+  }
+  size {
+    x: 1400.0
+    y: 100.0
+  }
+  color {
+    x: 0.463
+    y: 0.475
+    z: 0.49
+  }
+  type: TYPE_TEXT
+  text: "GUI: /path/some/file.gui"
+  font: "text_regular"
+  id: "text_gui_path"
+  pivot: PIVOT_NE
+  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
 }
 layers {
   name: "text_regular"
 }
 material: "/builtins/materials/gui.material"
 adjust_reference: ADJUST_REFERENCE_PARENT
-max_nodes: 512

example/components/example_scene/example_scene.lua

@@ -4,6 +4,7 @@ local container = require("example.components.container.container")
 ---@class example_scene: druid.base_component
 ---@field root druid.container
 ---@field text_debug_info druid.text
+---@field text_gui_path druid.text
 ---@field druid druid_instance
 local M = component.create("example_scene")
 
@@ -15,8 +16,10 @@ function M:init(template, nodes)
 
 	self.root = self.druid:new(container, "root") --[[@as druid.container]]
 	self.root:add_container("text_debug_info")
+	self.root:add_container("text_gui_path")
 
 	self.text_debug_info = self.druid:new_text("text_debug_info")
+	self.text_gui_path = self.druid:new_text("text_gui_path", "")
 end
 
 
@@ -26,4 +29,14 @@ function M:set_debug_info(info)
 end
 
 
+---@param path string
+function M:set_gui_path(path)
+	-- Path is a path to lua file
+	-- We need add "/" before path and replace .lua to .gui
+	path = "/" .. path:gsub(".lua", ".gui")
+
+	self.text_gui_path:set_to(path)
+end
+
+
 return M

example/components/examples_list_view/examples_list_view.lua

@@ -111,6 +111,8 @@ function M:add_example(examples, druid_example)
 				self.on_set_information("")
 			end
 
+			druid_example.example_scene:set_gui_path(example_data.code_url)
+
 			druid_example.properties_panel:clear()
 			if example_data.properties_control then
 				example_data.properties_control(instance, druid_example.properties_panel)
@@ -135,11 +137,14 @@ end
 ---@param name_id string
 ---@return boolean @true if example was found and selected
 function M:select_example_by_name_id(name_id)
+	print("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)
+		local target_pos = gui.get_position(example.list_item.root.node)
+		target_pos.y = target_pos.y + self.scroll.view_size.y / 2
+		self.scroll:scroll_to(target_pos, true)
 
 		-- Select the element
 		if example.data.name_id == name_id then

example/components/output_list/output_list.gui

@@ -1,4 +1,3 @@
-script: ""
 fonts {
   name: "text_regular"
   font: "/example/assets/fonts/text_regular.font"
@@ -11,380 +10,232 @@ 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
+    y: 190.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
+    y: 190.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
+nodes {
-  clipping_visible: true
+  position {
-  clipping_inverted: false
+    x: -210.0
-  alpha: 1.0
+    y: -138.0
-  template_node_child: false
+  }
-  size_mode: SIZE_MODE_MANUAL
+  scale {
-  custom_type: 0
+    x: 0.5
-  enabled: true
+    y: 0.5
-  visible: true
+  }
-  material: ""
+  size {
+    x: 245.0
+    y: 50.0
+  }
+  color {
+    x: 0.463
+    y: 0.475
+    z: 0.49
+  }
+  type: TYPE_TEXT
+  text: "Defold 1.9.3"
+  font: "text_regular"
+  id: "text_version_defold"
+  pivot: PIVOT_SW
+  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
+  alpha: 0.5
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
+}
+nodes {
+  position {
+    x: 210.0
+    y: -138.0
+  }
+  scale {
+    x: 0.5
+    y: 0.5
+  }
+  size {
+    x: 245.0
+    y: 50.0
+  }
+  color {
+    x: 0.463
+    y: 0.475
+    z: 0.49
+  }
+  type: TYPE_TEXT
+  text: "Druid 1.0"
+  font: "text_regular"
+  id: "text_version_druid"
+  pivot: PIVOT_SE
+  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
+  alpha: 0.5
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
 }
 layers {
   name: "druid"
@@ -394,4 +245,3 @@ layers {
 }
 material: "/builtins/materials/gui.material"
 adjust_reference: ADJUST_REFERENCE_PARENT
-max_nodes: 512

example/components/output_list/output_list.lua

@@ -28,6 +28,12 @@ function M:init(template, nodes)
 	self.scroll:set_horizontal_scroll(false)
 
 	self.druid:new(lang_text, "text_header", "ui_output")
+
+	local defold_version = sys.get_engine_info().version
+	gui.set_text(self:get_node("text_version_defold"), "Defold v" .. defold_version)
+
+	local druid_version = sys.get_config_string("project.version")
+	gui.set_text(self:get_node("text_version_druid"), "Druid v" .. druid_version)
 end
 
 

example/components/properties_panel/properties/property_checkbox.lua

@@ -25,7 +25,7 @@ function M:init(template, nodes)
 
 	self.text_name = self.druid:new(lang_text, "text_name") --[[@as druid.lang_text]]
 
-	self.button = self.druid:new_button("button")
+	self.button = self.druid:new_button("button", self.on_click)
 end
 
 
@@ -51,4 +51,9 @@ function M:get_value()
 end
 
 
+function M:on_click()
+	self:set_value(not self:get_value())
+end
+
+
 return M

example/components/properties_panel/properties/property_slider.gui

@@ -1,4 +1,3 @@
-script: ""
 fonts {
   name: "text_bold"
   font: "/example/assets/fonts/text_bold.font"
@@ -7,237 +6,89 @@ 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: "Slider"
-  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
@@ -245,243 +96,98 @@ nodes {
     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
@@ -489,58 +195,24 @@ nodes {
     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
@@ -548,17 +220,6 @@ nodes {
     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

example/components/properties_panel/properties_panel.lua

@@ -71,7 +71,6 @@ function M:add_checkbox(text_id, initial_value, on_change_callback)
 	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)
 

example/druid.gui

@@ -613,6 +613,18 @@ nodes {
   parent: "output_list/root"
   template_node_child: true
 }
+nodes {
+  type: TYPE_TEXT
+  id: "output_list/text_version_defold"
+  parent: "output_list/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "output_list/text_version_druid"
+  parent: "output_list/root"
+  template_node_child: true
+}
 nodes {
   position {
     x: -20.0
@@ -651,6 +663,12 @@ nodes {
   parent: "example_scene/root"
   template_node_child: true
 }
+nodes {
+  type: TYPE_TEXT
+  id: "example_scene/text_gui_path"
+  parent: "example_scene/root"
+  template_node_child: true
+}
 nodes {
   size {
     x: 200.0
@@ -941,6 +959,12 @@ nodes {
   parent: "scroll/button_stencil/root"
   template_node_child: true
 }
+nodes {
+  type: TYPE_TEXT
+  id: "scroll/ui_scroll_text_fill"
+  parent: "scroll/scroll_content"
+  template_node_child: true
+}
 nodes {
   type: TYPE_TEMPLATE
   id: "grid"
@@ -2164,33 +2188,239 @@ nodes {
 }
 nodes {
   type: TYPE_TEMPLATE
-  id: "basic_checkbox"
+  id: "checkbox"
   parent: "basic"
   inherit_alpha: true
-  template: "/example/examples/basic/checkbox/basic_checkbox.gui"
+  template: "/example/examples/basic/checkbox/checkbox.gui"
 }
 nodes {
   type: TYPE_BOX
-  id: "basic_checkbox/root"
+  id: "checkbox/root"
-  parent: "basic_checkbox"
+  parent: "checkbox"
   template_node_child: true
 }
 nodes {
   type: TYPE_BOX
-  id: "basic_checkbox/button"
+  id: "checkbox/button"
-  parent: "basic_checkbox/root"
+  parent: "checkbox/root"
   template_node_child: true
 }
 nodes {
   type: TYPE_BOX
-  id: "basic_checkbox/icon"
+  id: "checkbox/icon"
-  parent: "basic_checkbox/button"
+  parent: "checkbox/button"
   template_node_child: true
 }
 nodes {
   type: TYPE_BOX
-  id: "basic_checkbox/selected"
+  id: "checkbox/selected"
-  parent: "basic_checkbox/button"
+  parent: "checkbox/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "radio_group"
+  parent: "basic"
+  inherit_alpha: true
+  template: "/example/examples/basic/radio_group/radio_group.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "radio_group/root"
+  parent: "radio_group"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "radio_group/checkbox_1"
+  parent: "radio_group/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "radio_group/checkbox_1/root"
+  parent: "radio_group/checkbox_1"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "radio_group/checkbox_1/button"
+  parent: "radio_group/checkbox_1/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "radio_group/checkbox_1/icon"
+  parent: "radio_group/checkbox_1/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "radio_group/checkbox_1/selected"
+  parent: "radio_group/checkbox_1/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "radio_group/checkbox_2"
+  parent: "radio_group/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "radio_group/checkbox_2/root"
+  parent: "radio_group/checkbox_2"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "radio_group/checkbox_2/button"
+  parent: "radio_group/checkbox_2/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "radio_group/checkbox_2/icon"
+  parent: "radio_group/checkbox_2/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "radio_group/checkbox_2/selected"
+  parent: "radio_group/checkbox_2/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "radio_group/checkbox_3"
+  parent: "radio_group/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "radio_group/checkbox_3/root"
+  parent: "radio_group/checkbox_3"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "radio_group/checkbox_3/button"
+  parent: "radio_group/checkbox_3/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "radio_group/checkbox_3/icon"
+  parent: "radio_group/checkbox_3/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "radio_group/checkbox_3/selected"
+  parent: "radio_group/checkbox_3/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "checkbox_group"
+  parent: "basic"
+  inherit_alpha: true
+  template: "/example/examples/basic/checkbox_group/checkbox_group.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_group/root"
+  parent: "checkbox_group"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "checkbox_group/checkbox_1"
+  parent: "checkbox_group/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_group/checkbox_1/root"
+  parent: "checkbox_group/checkbox_1"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_group/checkbox_1/button"
+  parent: "checkbox_group/checkbox_1/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_group/checkbox_1/icon"
+  parent: "checkbox_group/checkbox_1/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_group/checkbox_1/selected"
+  parent: "checkbox_group/checkbox_1/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "checkbox_group/checkbox_2"
+  parent: "checkbox_group/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_group/checkbox_2/root"
+  parent: "checkbox_group/checkbox_2"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_group/checkbox_2/button"
+  parent: "checkbox_group/checkbox_2/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_group/checkbox_2/icon"
+  parent: "checkbox_group/checkbox_2/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_group/checkbox_2/selected"
+  parent: "checkbox_group/checkbox_2/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "checkbox_group/checkbox_3"
+  parent: "checkbox_group/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_group/checkbox_3/root"
+  parent: "checkbox_group/checkbox_3"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_group/checkbox_3/button"
+  parent: "checkbox_group/checkbox_3/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_group/checkbox_3/icon"
+  parent: "checkbox_group/checkbox_3/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "checkbox_group/checkbox_3/selected"
+  parent: "checkbox_group/checkbox_3/button"
   template_node_child: true
 }
 nodes {
@@ -3475,6 +3705,220 @@ nodes {
   parent: "basic_layout/layout"
   template_node_child: true
 }
+nodes {
+  type: TYPE_BOX
+  texture: "druid/empty"
+  id: "widgets"
+  parent: "examples"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+  visible: false
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "hover_hint_example"
+  parent: "widgets"
+  inherit_alpha: true
+  template: "/example/examples/widgets/hover_hint/hover_hint_example.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "hover_hint_example/root"
+  parent: "hover_hint_example"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "hover_hint_example/hover_hint"
+  parent: "hover_hint_example/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "hover_hint_example/hover_hint/root"
+  parent: "hover_hint_example/hover_hint"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "hover_hint_example/hover_hint/panel_hint"
+  parent: "hover_hint_example/hover_hint/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "hover_hint_example/hover_hint/text_hint"
+  parent: "hover_hint_example/hover_hint/panel_hint"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "hover_hint_example/node_yellow"
+  parent: "hover_hint_example/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "hover_hint_example/node_red"
+  parent: "hover_hint_example/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "hover_hint_example/node_blue"
+  parent: "hover_hint_example/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "hover_hint_example/node_green"
+  parent: "hover_hint_example/root"
+  template_node_child: true
+}
+nodes {
+  position {
+    x: -200.0
+  }
+  type: TYPE_TEMPLATE
+  id: "property_button"
+  parent: "widgets"
+  inherit_alpha: true
+  template: "/example/components/properties_panel/properties/property_button.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_button/root"
+  parent: "property_button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "property_button/text_name"
+  parent: "property_button/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_button/button"
+  parent: "property_button/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_button/selected"
+  parent: "property_button/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "property_button/text_button"
+  parent: "property_button/button"
+  template_node_child: true
+}
+nodes {
+  position {
+    x: -200.0
+  }
+  type: TYPE_TEMPLATE
+  id: "property_checkbox"
+  parent: "widgets"
+  inherit_alpha: true
+  template: "/example/components/properties_panel/properties/property_checkbox.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_checkbox/root"
+  parent: "property_checkbox"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "property_checkbox/text_name"
+  parent: "property_checkbox/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_checkbox/button"
+  parent: "property_checkbox/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_checkbox/icon"
+  parent: "property_checkbox/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_checkbox/selected"
+  parent: "property_checkbox/button"
+  template_node_child: true
+}
+nodes {
+  position {
+    x: -200.0
+  }
+  type: TYPE_TEMPLATE
+  id: "property_slider"
+  parent: "widgets"
+  inherit_alpha: true
+  template: "/example/components/properties_panel/properties/property_slider.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_slider/root"
+  parent: "property_slider"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "property_slider/text_name"
+  parent: "property_slider/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_slider/E_Anchor"
+  parent: "property_slider/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_slider/button"
+  parent: "property_slider/E_Anchor"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_slider/selected"
+  parent: "property_slider/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "property_slider/text_value"
+  parent: "property_slider/button"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_slider/slider"
+  parent: "property_slider/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_slider/slider_back"
+  parent: "property_slider/slider"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_slider/slider_pin"
+  parent: "property_slider/slider"
+  template_node_child: true
+}
 nodes {
   position {
     x: -20.0

example/druid.gui_script

@@ -118,7 +118,7 @@ local function setup_components(self)
 				return
 			end
 
-			local url_prefix = "https://github.com/Insality/druid/blob/master/"
+			local url_prefix = "https://github.com/Insality/druid/blob/develop/"
 			sys.open_url(url_prefix .. code_url, { target = "_blank" })
 		end)
 	end
@@ -166,6 +166,8 @@ local function setup_examples(self)
 	end
 
 	select_start_example(self)
+
+	print("Loaded examples: " .. #self.examples_list_view.examples)
 end
 
 

example/examples/basic/button/basic_button_hold.gui

@@ -85,7 +85,7 @@ nodes {
     z: 0.322
   }
   type: TYPE_TEXT
-  text: "Confirm"
+  text: "Hold Me"
   font: "text_bold"
   id: "text"
   outline {

example/examples/basic/checkbox/basic_checkbox.gui

@@ -1,77 +0,0 @@
-fonts {
-  name: "text_bold"
-  font: "/example/assets/fonts/text_bold.font"
-}
-textures {
-  name: "druid"
-  texture: "/example/assets/druid.atlas"
-}
-nodes {
-  size {
-    x: 200.0
-    y: 100.0
-  }
-  type: TYPE_BOX
-  id: "root"
-  inherit_alpha: true
-  size_mode: SIZE_MODE_AUTO
-  visible: false
-}
-nodes {
-  size {
-    x: 40.0
-    y: 40.0
-  }
-  color {
-    x: 0.463
-    y: 0.475
-    z: 0.49
-  }
-  type: TYPE_BOX
-  texture: "druid/rect_round2_width1"
-  id: "button"
-  parent: "root"
-  inherit_alpha: true
-  slice9 {
-    x: 4.0
-    y: 4.0
-    z: 4.0
-    w: 4.0
-  }
-}
-nodes {
-  color {
-    x: 0.722
-    y: 0.741
-    z: 0.761
-  }
-  type: TYPE_BOX
-  texture: "druid/icon_check"
-  id: "icon"
-  parent: "button"
-  inherit_alpha: true
-  size_mode: SIZE_MODE_AUTO
-}
-nodes {
-  position {
-    y: -20.0
-  }
-  size {
-    x: 40.0
-    y: 4.0
-  }
-  color {
-    x: 0.894
-    y: 0.506
-    z: 0.333
-  }
-  type: TYPE_BOX
-  texture: "druid/pixel"
-  id: "selected"
-  pivot: PIVOT_S
-  adjust_mode: ADJUST_MODE_STRETCH
-  parent: "button"
-  inherit_alpha: true
-}
-material: "/builtins/materials/gui.material"
-adjust_reference: ADJUST_REFERENCE_PARENT

example/examples/basic/checkbox/basic_checkbox.lua

@@ -1,41 +0,0 @@
-local component = require("druid.component")
-
----@class basic_checkbox: druid.base_component
----@field druid druid_instance
----@field button druid.button
-local M = component.create("basic_checkbox")
-
-
----@param template string
----@param nodes table<hash, node>
-function M:init(template, nodes)
-	self.druid = self:get_druid(template, nodes)
-
-	self.button = self.druid:new_button("button", self.on_checkbox_click) -- Button to handle checkbox
-	self.icon = self:get_node("icon") -- Checkbox icon to hide/show
-	self.selected = self:get_node("selected") -- Selected effect to show when checkbox is changed
-	gui.set_alpha(self.selected, 0)
-
-	self:set_state(false)
-end
-
-
-function M:on_checkbox_click()
-	self:set_state(not self.is_enabled)
-end
-
-
-function M:set_state(is_enabled)
-	if self.is_enabled == is_enabled then
-		return
-	end
-
-	self.is_enabled = is_enabled
-	gui.set_enabled(self.icon, self.is_enabled)
-
-	gui.set_alpha(self.selected, 1)
-	gui.animate(self.selected, "color.w", 0, gui.EASING_INSINE, 0.16)
-end
-
-
-return M

example/examples/basic/examples_list.lua

@@ -144,6 +144,27 @@ function M.get_examples()
 					end
 					instance.text:set_text_adjust(adjust_types[adjust_index], 0.8)
 				end)
+
+				local pivot_index = 1
+				local pivot_list = {
+					gui.PIVOT_CENTER,
+					gui.PIVOT_W,
+					gui.PIVOT_SW,
+					gui.PIVOT_S,
+					gui.PIVOT_SE,
+					gui.PIVOT_E,
+					gui.PIVOT_NE,
+					gui.PIVOT_N,
+					gui.PIVOT_NW,
+				}
+
+				properties_panel:add_button("ui_pivot_next", function()
+					pivot_index = pivot_index + 1
+					if pivot_index > #pivot_list then
+						pivot_index = 1
+					end
+					instance:set_pivot(pivot_list[pivot_index])
+				end)
 			end,
 			get_debug_info = function(instance)
 				---@cast instance multiline_text
@@ -323,6 +344,7 @@ function M.get_examples()
 			end,
 			properties_control = function(instance, properties_panel)
 				---@cast instance scroll
+				local scroll = instance.scroll
 				local is_stretch = instance.scroll.style.EXTRA_STRETCH_SIZE > 0
 				properties_panel:add_checkbox("ui_elastic_scroll", is_stretch, function(value)
 					instance.scroll:set_extra_stretch_size(value and 100 or 0)
@@ -333,6 +355,35 @@ function M.get_examples()
 				properties_panel:add_checkbox("ui_clipping", is_stencil, function(value)
 					gui.set_clipping_mode(view_node, value and gui.CLIPPING_MODE_STENCIL or gui.CLIPPING_MODE_NONE)
 				end)
+
+				local slider_frict = properties_panel:add_slider("ui_slider_friction", 0, function(value)
+					scroll.style.FRICT = 1 - ((1 - value) * 0.1)
+				end)
+				slider_frict:set_text_function(function(value)
+					return string.format("%.2f", 1 - ((1 - value) * 0.1))
+				end)
+				slider_frict:set_value(1 - (1 - scroll.style.FRICT) / 0.1)
+
+				local slider_speed = properties_panel:add_slider("ui_slider_speed", 0, function(value)
+					scroll.style.INERT_SPEED = value * 50
+				end)
+				slider_speed:set_value(scroll.style.INERT_SPEED / 50)
+				slider_speed:set_text_function(function(value)
+					return string.format("%.1f", value * 50)
+				end)
+
+				local slider_wheel_speed = properties_panel:add_slider("ui_slider_wheel_speed", 0, function(value)
+					scroll.style.WHEEL_SCROLL_SPEED = value * 30
+				end)
+				slider_wheel_speed:set_value(scroll.style.WHEEL_SCROLL_SPEED / 30)
+				slider_wheel_speed:set_text_function(function(value)
+					return string.format("%.1f", value * 30)
+				end)
+
+				local wheel_by_inertion = properties_panel:add_checkbox("ui_wheel_by_inertion", scroll.style.WHEEL_SCROLL_BY_INERTION, function(value)
+					scroll.style.WHEEL_SCROLL_BY_INERTION = value
+				end)
+				wheel_by_inertion:set_value(scroll.style.WHEEL_SCROLL_BY_INERTION)
 			end,
 			get_debug_info = function(instance)
 				---@cast instance scroll
@@ -377,10 +428,12 @@ function M.get_examples()
 			properties_control = function(instance, properties_panel)
 				---@cast instance grid
 
+				local grid = instance.grid
+
 				local slider = properties_panel:add_slider("ui_grid_in_row", 0.3, function(value)
 					local in_row_amount = math.ceil(value * 10)
 					in_row_amount = math.max(1, in_row_amount)
-					instance.grid:set_in_row(in_row_amount)
+					grid:set_in_row(in_row_amount)
 				end)
 				slider:set_text_function(function(value)
 					return tostring(math.ceil(value * 10))
@@ -400,7 +453,58 @@ function M.get_examples()
 				properties_panel:add_button("ui_clear_elements", function()
 					instance:clear()
 				end)
+
+				properties_panel:add_checkbox("ui_dynamic_pos", grid.style.IS_DYNAMIC_NODE_POSES, function()
+					grid.style.IS_DYNAMIC_NODE_POSES = not grid.style.IS_DYNAMIC_NODE_POSES
+					grid:refresh()
+				end)
+
+				properties_panel:add_checkbox("ui_align_last_row", grid.style.IS_ALIGN_LAST_ROW, function()
+					grid.style.IS_ALIGN_LAST_ROW = not grid.style.IS_ALIGN_LAST_ROW
+					grid:refresh()
+				end)
+
+				local pivot_index = 1
+				local pivot_list = {
+					gui.PIVOT_CENTER,
+					gui.PIVOT_W,
+					gui.PIVOT_SW,
+					gui.PIVOT_S,
+					gui.PIVOT_SE,
+					gui.PIVOT_E,
+					gui.PIVOT_NE,
+					gui.PIVOT_N,
+					gui.PIVOT_NW,
+				}
+
+				properties_panel:add_button("ui_pivot_next", function()
+					pivot_index = pivot_index + 1
+					if pivot_index > #pivot_list then
+						pivot_index = 1
+					end
+					grid:set_pivot(pivot_list[pivot_index])
+				end)
+
+				local slider_size = properties_panel:add_slider("ui_item_size", 0.5, function(value)
+					local size = 50 + value * 100
+					grid:set_item_size(size, size)
+				end)
+				slider_size:set_text_function(function(value)
+					return tostring(50 + math.ceil(value * 100))
+				end)
+				slider_size:set_value(0.5)
 			end,
+			get_debug_info = function(instance)
+				---@cast instance grid
+				local info = ""
+
+				local grid = instance.grid
+				info = info .. "Grid Items: " .. #grid.nodes .. "\n"
+				info = info .. "Grid Item Size: " .. grid.node_size.x .. " x " .. grid.node_size.y .. "\n"
+				info = info .. "Pivot: " .. tostring(grid.pivot)
+
+				return info
+			end
 		},
 		{
 			name_id = "ui_example_basic_scroll_bind_grid",
@@ -702,19 +806,47 @@ function M.get_examples()
 			end,
 		},
 		{
-			name_id = "ui_example_basic_checkbox",
+			name_id = "ui_example_checkbox",
-			information_text_id = "ui_example_basic_checkbox_description",
+			information_text_id = "ui_example_checkbox_description",
-			template = "basic_checkbox",
+			template = "checkbox",
-			root = "basic_checkbox/root",
+			root = "checkbox/root",
-			code_url = "example/examples/basic/checkbox/basic_checkbox.lua",
+			code_url = "example/examples/basic/checkbox/checkbox.lua",
-			component_class = require("example.examples.basic.checkbox.basic_checkbox"),
+			component_class = require("example.examples.basic.checkbox.checkbox"),
 			on_create = function(instance, output_log)
-				---@cast instance basic_checkbox
+				---@cast instance checkbox
 				instance.button.on_click:subscribe(function()
 					output_log:add_log_text("Checkbox Clicked: " .. tostring(instance.is_enabled))
 				end)
 			end,
 		},
+		{
+			name_id = "ui_example_checkbox_group",
+			information_text_id = "ui_example_checkbox_group_description",
+			template = "checkbox_group",
+			root = "checkbox_group/root",
+			code_url = "example/examples/basic/checkbox_group/checkbox_group.lua",
+			component_class = require("example.examples.basic.checkbox_group.checkbox_group"),
+			on_create = function(instance, output_log)
+				---@cast instance checkbox_group
+				instance.on_state_changed:subscribe(function(state1, state2, state3)
+					output_log:add_log_text("State: " .. tostring(state1) .. " " .. tostring(state2) .. " " .. tostring(state3))
+				end)
+			end,
+		},
+		{
+			name_id = "ui_example_radio_group",
+			information_text_id = "ui_example_radio_group_description",
+			template = "radio_group",
+			root = "radio_group/root",
+			code_url = "example/examples/basic/radio_group/radio_group.lua",
+			component_class = require("example.examples.basic.radio_group.radio_group"),
+			on_create = function(instance, output_log)
+				---@cast instance radio_group
+				instance.on_state_changed:subscribe(function(selected)
+					output_log:add_log_text("Selected: " .. selected)
+				end)
+			end,
+		},
 	}
 end
 

example/examples/basic/rich_text/basic_rich_text.gui

@@ -21,9 +21,6 @@ nodes {
   visible: false
 }
 nodes {
-  position {
-    x: -200.0
-  }
   size {
     x: 400.0
     y: 100.0
@@ -36,7 +33,6 @@ nodes {
   text: "Hello I\'m a Rich Text!"
   font: "text_regular"
   id: "text"
-  pivot: PIVOT_W
   parent: "root"
   inherit_alpha: true
   outline_alpha: 0.0

example/examples/basic/scroll/scroll.gui

@@ -1,4 +1,3 @@
-script: ""
 fonts {
   name: "text_bold"
   font: "/example/assets/fonts/text_bold.font"
@@ -7,111 +6,30 @@ 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: 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: ""
   id: "root"
-  xanchor: XANCHOR_NONE
-  yanchor: YANCHOR_NONE
-  pivot: PIVOT_CENTER
-  adjust_mode: ADJUST_MODE_FIT
-  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: 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: 1000.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/ui_circle_32"
   id: "scroll_view"
-  xanchor: XANCHOR_NONE
-  yanchor: YANCHOR_NONE
-  pivot: PIVOT_CENTER
-  adjust_mode: ADJUST_MODE_FIT
   parent: "root"
-  layer: ""
   inherit_alpha: true
   slice9 {
     x: 16.0
@@ -120,57 +38,25 @@ nodes {
     w: 16.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: 500.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: 1700.0
+    y: 2700.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: "scroll_content"
-  xanchor: XANCHOR_NONE
-  yanchor: YANCHOR_NONE
   pivot: PIVOT_N
-  adjust_mode: ADJUST_MODE_FIT
   parent: "scroll_view"
-  layer: ""
   inherit_alpha: true
   slice9 {
     x: 16.0
@@ -178,219 +64,50 @@ nodes {
     z: 16.0
     w: 16.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: -946.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: "button_tutorial"
   parent: "scroll_content"
-  layer: ""
   inherit_alpha: true
-  alpha: 1.0
   template: "/example/templates/button_text_green.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: 280.0
-    y: 90.0
-    z: 0.0
-    w: 1.0
-  }
-  color {
-    x: 0.557
-    y: 0.835
-    z: 0.62
-    w: 1.0
-  }
   type: TYPE_BOX
-  blend_mode: BLEND_MODE_ALPHA
-  texture: "druid/ui_circle_32"
   id: "button_tutorial/root"
-  xanchor: XANCHOR_NONE
-  yanchor: YANCHOR_NONE
-  pivot: PIVOT_CENTER
-  adjust_mode: ADJUST_MODE_FIT
   parent: "button_tutorial"
-  layer: "druid"
-  inherit_alpha: true
-  slice9 {
-    x: 16.0
-    y: 16.0
-    z: 16.0
-    w: 16.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: 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: 245.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: "I do nothing!"
-  font: "text_bold"
   id: "button_tutorial/text"
-  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_tutorial/root"
-  layer: "text_bold"
-  inherit_alpha: true
-  alpha: 1.0
-  outline_alpha: 0.0
-  shadow_alpha: 0.0
   overridden_fields: 8
   template_node_child: true
-  text_leading: 1.0
-  text_tracking: 0.0
-  custom_type: 0
-  enabled: true
-  visible: true
-  material: ""
 }
 nodes {
   position {
     x: -185.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.75
     y: 0.75
-    z: 1.0
-    w: 1.0
   }
   size {
     x: 500.0
     y: 900.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: "To setup scroll in your scene\n"
   "\n"
   "- Place \"View\" box node\n"
@@ -400,477 +117,280 @@ nodes {
   "- Init scroll with `druid:new_scroll(\"view\", \"content\")"
   font: "text_bold"
   id: "ui_scroll_text_1"
-  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: true
   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: -185.0
     y: -482.0
-    z: 0.0
-    w: 1.0
-  }
-  rotation {
-    x: 0.0
-    y: 0.0
-    z: 0.0
-    w: 1.0
   }
   scale {
     x: 0.75
     y: 0.75
-    z: 1.0
-    w: 1.0
   }
   size {
     x: 500.0
     y: 400.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: "Now your content node can be scrollable in View node borders. In this example the content node contains this tutorial text"
   font: "text_bold"
   id: "ui_scroll_text_2"
-  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: true
   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: -185.0
     y: -713.0
-    z: 0.0
-    w: 1.0
-  }
-  rotation {
-    x: 0.0
-    y: 0.0
-    z: 0.0
-    w: 1.0
   }
   scale {
     x: 0.75
     y: 0.75
-    z: 1.0
-    w: 1.0
   }
   size {
     x: 500.0
     y: 400.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: "All other components are placed as usual.\n"
   "\n"
   "For example, button:"
   font: "text_bold"
   id: "ui_scroll_text_3"
-  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: true
   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: -185.0
     y: -1042.0
-    z: 0.0
-    w: 1.0
-  }
-  rotation {
-    x: 0.0
-    y: 0.0
-    z: 0.0
-    w: 1.0
   }
   scale {
     x: 0.75
     y: 0.75
-    z: 1.0
-    w: 1.0
   }
   size {
     x: 500.0
     y: 400.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: "You probably wish to add \"stencil\" to your view node to clip all content what outside scroll"
   font: "text_bold"
   id: "ui_scroll_text_4"
-  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: true
   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: -185.0
     y: -1257.0
-    z: 0.0
-    w: 1.0
-  }
-  rotation {
-    x: 0.0
-    y: 0.0
-    z: 0.0
-    w: 1.0
   }
   scale {
     x: 0.75
     y: 0.75
-    z: 1.0
-    w: 1.0
   }
   size {
     x: 500.0
     y: 400.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: "Druid automatically checks the stencil nodes to add a \"click zone\" for input elements like buttons to prevent the input if they are outside of stencil nodes"
   font: "text_bold"
   id: "ui_scroll_text_5"
-  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: true
   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: -1605.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: "button_stencil"
   parent: "scroll_content"
-  layer: ""
   inherit_alpha: true
-  alpha: 1.0
   template: "/example/templates/button_text_green.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: 280.0
-    y: 90.0
-    z: 0.0
-    w: 1.0
-  }
-  color {
-    x: 0.557
-    y: 0.835
-    z: 0.62
-    w: 1.0
-  }
   type: TYPE_BOX
-  blend_mode: BLEND_MODE_ALPHA
-  texture: "druid/ui_circle_32"
   id: "button_stencil/root"
-  xanchor: XANCHOR_NONE
-  yanchor: YANCHOR_NONE
-  pivot: PIVOT_CENTER
-  adjust_mode: ADJUST_MODE_FIT
   parent: "button_stencil"
-  layer: "druid"
-  inherit_alpha: true
-  slice9 {
-    x: 16.0
-    y: 16.0
-    z: 16.0
-    w: 16.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: 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
+    x: 0.8
-    y: 1.0
+    y: 0.8
-    z: 1.0
-    w: 1.0
   }
   size {
-    x: 245.0
+    x: 300.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: "Click outside stencil node"
-  text: "Try click me outside"
-  font: "text_bold"
   id: "button_stencil/text"
-  xanchor: XANCHOR_NONE
+  line_break: true
-  yanchor: YANCHOR_NONE
+  parent: "button_stencil/root"
-  pivot: PIVOT_CENTER
+  overridden_fields: 3
+  overridden_fields: 4
+  overridden_fields: 8
+  overridden_fields: 18
+  template_node_child: true
+}
+nodes {
+  position {
+    x: -185.0
+    y: -1751.0
+  }
+  scale {
+    x: 0.75
+    y: 0.75
+  }
+  size {
+    x: 500.0
+    y: 400.0
+  }
+  color {
+    x: 0.722
+    y: 0.741
+    z: 0.761
+  }
+  type: TYPE_TEXT
+  text: "--------\n"
+  "\n"
+  "--------\n"
+  "--------\n"
+  "\n"
+  "--------\n"
+  "--------\n"
+  "\n"
+  "--------\n"
+  "--------\n"
+  "\n"
+  "--------\n"
+  "\n"
+  "--------\n"
+  "\n"
+  "--------\n"
+  "--------\n"
+  "\n"
+  "--------\n"
+  "--------\n"
+  "\n"
+  "--------\n"
+  "--------\n"
+  "\n"
+  "--------\n"
+  ""
+  font: "text_bold"
+  id: "ui_scroll_text_fill"
+  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: true
-  parent: "button_stencil/root"
+  parent: "scroll_content"
-  layer: "text_bold"
   inherit_alpha: true
-  alpha: 1.0
   outline_alpha: 0.0
   shadow_alpha: 0.0
-  overridden_fields: 8
-  overridden_fields: 18
-  template_node_child: true
-  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

example/examples/basic/slider/basic_slider_vertical.gui

@@ -68,7 +68,7 @@ nodes {
 }
 nodes {
   position {
-    y: 160.0
+    y: 170.0
   }
   size {
     x: 150.0

example/examples/basic/text/multiline_text.lua

@@ -1,3 +1,4 @@
+local helper = require("druid.helper")
 local component = require("druid.component")
 local container = require("example.components.container.container")
 
@@ -17,10 +18,25 @@ function M:init(template, nodes)
 	-- This code is for adjustable text area with mouse
 	self.container = self.druid:new(container, "text_area", nil, function(_, size)
 		self.text:set_size(size)
+		self:refresh_text_position()
 	end) --[[@as druid.container]]
 
 	self.container:create_draggable_corners()
 end
 
 
+function M:set_pivot(pivot)
+	self.text:set_pivot(pivot)
+	self:refresh_text_position()
+end
+
+
+function M:refresh_text_position()
+	-- Need to update text position with different pivot
+	local pivot = gui.get_pivot(self.text.node)
+	local pivot_offset = helper.get_pivot_offset(pivot)
+	gui.set_position(self.text.node, vmath.vector3(pivot_offset.x * self.text.start_size.x, pivot_offset.y * self.text.start_size.y, 0))
+end
+
+
 return M

example/examples/data_list/examples_list.lua

@@ -117,15 +117,15 @@ function M.get_examples()
 					instance.scroll:scroll_to_percent(vmath.vector3(0, 1 - value, 0), true)
 				end)
 
-				properties_panel:add_button("ui_add_item", function()
+				properties_panel:add_button("ui_add_element", function()
 					instance:add_item()
 				end)
 
-				properties_panel:add_button("ui_remove_item", function()
+				properties_panel:add_button("ui_remove_element", function()
 					instance:remove_item()
 				end)
 
-				properties_panel:add_button("ui_clear_items", function()
+				properties_panel:add_button("ui_clear_elements", function()
 					instance.data_list:clear()
 				end)
 			end,

example/examples/druid_examples.lua

@@ -4,6 +4,7 @@ local data_list_examples = require("example.examples.data_list.examples_list")
 local layout_examples = require("example.examples.layout.examples_list")
 local gamepad_examples = require("example.examples.gamepad.examples_list")
 local window_examples = require("example.examples.windows.examples_list")
+local widgets_examples = require("example.examples.widgets.examples_list")
 local panthera_examples = require("example.examples.panthera.examples_list")
 
 local M = {}
@@ -42,6 +43,7 @@ function M.get_examples()
 	add_examples(examples, "ui_examples_gamepad", gamepad_examples.get_examples())
 	add_examples(examples, "ui_examples_window", window_examples.get_examples())
 	add_examples(examples, "ui_examples_panthera", panthera_examples.get_examples())
+	add_examples(examples, "ui_examples_widgets", widgets_examples.get_examples())
 
 	return examples
 end

example/examples/windows/examples_list.lua

@@ -6,6 +6,7 @@ function M.get_examples()
 	return {
 		{
 			name_id = "ui_example_window_language",
+			information_text_id = "ui_example_window_language_description",
 			template = "window_language",
 			root = "window_language/root",
 			code_url = "example/examples/windows/window_language/window_language.lua",
@@ -38,9 +39,6 @@ function M.get_examples()
 					output_list:add_log_text("Confirmation Declined")
 				end)
 			end,
-			get_debug_info = function(instance)
-				return "Any info we want"
-			end
 		},
 		{
 			name_id = "ui_example_window_information",

example/locales/en.json

@@ -1,5 +1,5 @@
 {
-	"additional_characters": "\"&! :%1234567890*абвгдеёжзийклмнопрстуфхцчшщъыьэюяАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯÀàÂâÆæÇçÈèÉéÊêËëÎîÏïÔôŒœÙùÛûÜüŸÿ",
+	"additional_characters": " 1234567890!@#$%^&*()_+-=`[]{}|;':\",.<>/?ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzабвгдеёжзийклмнопрстуфхцчшщъыьэюяАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯÀàÂâÆæÇçÈèÉéÊêËëÎîÏïÔôŒœÙùÛûÜüŸÿ",
 	"ui_examples": "Examples",
 	"ui_properties_panel": "Properties",
 	"ui_output": "Output",
@@ -85,8 +85,12 @@
 	"ui_example_basic_hotkey_description": "How to create a hotkey for a callback",
 
 	"ui_example_basic_scroll": "Scroll",
-	"ui_example_basic_scroll_description": "How to make simple scroll",
+	"ui_example_basic_scroll_description": "How to make a simple scroll",
 	"ui_elastic_scroll": "Elastic Scroll",
+	"ui_slider_friction": "Scroll Friction",
+	"ui_slider_speed": "Scroll Speed",
+	"ui_slider_wheel_speed": "Wheel Speed",
+	"ui_wheel_by_inertion": "Wheel By Inertion",
 
 	"ui_example_basic_scroll_slider": "Scroll with Slider",
 	"ui_example_basic_scroll_slider_description": "How to add a slider control to the scroll and use them",
@@ -97,6 +101,8 @@
 	"ui_add_element": "Add Element",
 	"ui_remove_element": "Remove Element",
 	"ui_clear_elements": "Clear Elements",
+	"ui_dynamic_pos": "Dynamic Position",
+	"ui_align_last_row": "Align Last Row",
 
 	"ui_example_basic_scroll_bind_grid": "Scroll Grid",
 	"ui_example_basic_scroll_bind_grid_description": "Scroll works good with grids and predefined sizes, this is an example of scroll bind grid.",
@@ -105,6 +111,7 @@
 	"ui_example_basic_scroll_bind_grid_horizontal_description": "Scroll works good with grids and predefined sizes, this is an example of scroll bind grid horizontal.",
 
 	"ui_example_basic_scroll_bind_grid_points": "Scroll Grid Points",
+	"ui_example_basic_scroll_bind_grid_points_description": "Scrolls with points of interest to snap to",
 
 	"ui_example_basic_input": "Input",
 	"ui_example_basic_input_description": "How to make most simple input in Druid",
@@ -119,19 +126,25 @@
 	"ui_example_basic_rich_text_description": "How to create a rich text in Druid",
 
 	"ui_example_rich_text_tags": "Rich Text Tags",
-	"ui_example_rich_text_tags_description": "Here is a simple example of rich text with tags\n - <color=A1D7F5>color</color>\n - font\n - size\n - br\n - img",
+	"ui_example_rich_text_tags_description": "Here is a example of rich text with tags\n - <color=A1D7F5>color</color>\n - font\n - size\n - br\n - img",
 
 	"ui_example_basic_swipe": "Swipe",
 	"ui_example_basic_swipe_description": "How to add callbacks on swipe events",
 
-	"ui_example_basic_checkbox": "Checkbox",
+	"ui_example_checkbox": "Checkbox",
-	"ui_example_basic_checkbox_description": "How to make a simple checkbox using Druid Button",
+	"ui_example_checkbox_description": "How to make a checkbox using Druid Button",
+
+	"ui_example_checkbox_group": "Checkbox Group",
+	"ui_example_checkbox_group_description": "How to make a checkbox group using Druid Buttons",
+
+	"ui_example_radio_group": "Radio Group",
+	"ui_example_radio_group_description": "How to make a radio group using Druid Buttons",
 
 	"ui_example_data_list_basic": "Data List Basic",
-	"ui_example_data_list_basic_description": "How to make a simple data list",
+	"ui_example_data_list_basic_description": "How to make a data list",
 
 	"ui_example_data_list_horizontal_basic": "Data List Horizontal Basic",
-	"ui_example_data_list_horizontal_basic_description": "How to make a simple horizontal data list",
+	"ui_example_data_list_horizontal_basic_description": "How to make a horizontal data list",
 
 	"ui_example_data_list_add_remove_clear": "Data List Add Remove Clear",
 	"ui_example_data_list_add_remove_clear_description": "How the add, remove and clear functions work in the data list",
@@ -141,7 +154,7 @@
 
 	"ui_language": "Language",
 	"ui_example_window_language": "Window Language",
-	"ui_example_window_language_description": "Here is a simple example of window with language selection.",
+	"ui_example_window_language_description": "Here is a example of window with language selection.",
 
 	"ui_confirmation": "Confirmation",
 	"ui_example_window_confirmation": "Window Confirmation",
@@ -150,22 +163,34 @@
 	"ui_information": "Information",
 	"ui_example_window_information": "Window Information",
 	"ui_example_window_information_text": "You are the best of the best!",
-	"ui_example_window_information_description": "Here is a simple example of window with information message.",
+	"ui_example_window_information_description": "Here is a example of window with information message.",
+
+	"ui_example_widget_hover_hint": "Hint on Hover",
+	"ui_example_widget_hover_hint_description": "Here is a example of show hint on mouse hover",
+
+	"ui_example_widget_property_button": "Property Button",
+	"ui_example_widget_property_button_description": "Here is a widget used in Properties panel",
+
+	"ui_example_widget_property_slider": "Property Slider",
+	"ui_example_widget_property_slider_description": "Here is a widget used in Properties panel",
+
+	"ui_example_widget_property_checkbox": "Property Checkbox",
+	"ui_example_widget_property_checkbox_description": "Here is a widget used in Properties panel",
 
 	"ui_example_gamepad_tester": "Gamepad Tester",
 	"ui_example_gamepad_tester_description": "Test your gamepad here to bind buttons and axes",
 
 	"ui_example_on_screen_control": "On Screen Control",
-	"ui_example_on_screen_control_description": "Here is a simple example of on screen control. The on_screen_input here is a simple joystick with a callback as Druid component",
+	"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",
 
 	"ui_example_layout_basic": "Layout",
 	"ui_example_layout_basic_description": "This layout can be adjusted to be the same as in Figma",
 
 	"ui_example_panthera_basic_animation": "Panthera Basic Animation",
-	"ui_example_panthera_basic_animation_description": "Here is a simple example of Panthera Basic Animation.",
+	"ui_example_panthera_basic_animation_description": "Here is a example of Panthera Basic Animation.",
 
 	"ui_example_panthera_animation_blend": "Panthera Animation Blend",
-	"ui_example_panthera_animation_blend_description": "Here is a simple example of Panthera Animation Blend.",
+	"ui_example_panthera_animation_blend_description": "Here is a example of Panthera Animation Blend.",
 	"ui_example_panthera_animation_blend_hint": "Hover mouse over this area",
 
 	"ui_animation_vertical": "Vertical",