Widgets WIP

druid/extended/layout.lua

@@ -41,6 +41,7 @@ function M:init(node_or_node_id, layout_type)
 
 	self.is_dirty = true
 	self.entities = {}
+	self.size = gui.get_size(self.node)
 
 	self.padding = gui.get_slice9(self.node)
 	self.margin = { x = self.padding.z, y = self.padding.w }
@@ -52,7 +53,7 @@ function M:init(node_or_node_id, layout_type)
 	self.is_resize_height = false
 	self.is_justify = false
 
-	self.on_size_changed = event.create()
+	self.on_size_changed = event.create() --[[@as druid.event.on_size_changed]]
 end
 
 
@@ -152,6 +153,9 @@ function M:add(node_or_node_id)
 end
 
 
+---Remove node from layout
+---@param node_or_node_id node|string node_or_node_id
+---@return druid.layout self for chaining
 function M:remove(node_or_node_id)
 	local node = type(node_or_node_id) == "table" and node_or_node_id.node or self:get_node(node_or_node_id)
 
@@ -167,6 +171,11 @@ function M:remove(node_or_node_id)
 end
 
 
+---@return vector3
+function M:get_size()
+	return self.size
+end
+
 ---@return druid.layout
 function M:refresh_layout()
 	local layout_node = self.node
@@ -295,6 +304,7 @@ function M:refresh_layout()
 			size.y = rows_data.total_height + padding.y + padding.w
 		end
 		gui.set_size(layout_node, size)
+		self.size = size
 
 		self.on_size_changed(size)
 	end

druid/widget/properties_panel/properties/property_button.gui

@@ -14,14 +14,13 @@ nodes {
   type: TYPE_BOX
   texture: "druid/empty"
   id: "root"
-  pivot: PIVOT_NW
   adjust_mode: ADJUST_MODE_STRETCH
   inherit_alpha: true
   visible: false
 }
 nodes {
   position {
-    y: -20.0
+    x: -200.0
   }
   scale {
     x: 0.65
@@ -58,8 +57,7 @@ nodes {
 }
 nodes {
   position {
-    x: 267.0
-    y: -20.0
+    x: 200.0
   }
   size {
     x: 226.0
@@ -73,6 +71,7 @@ nodes {
   type: TYPE_BOX
   texture: "druid/rect_round2_width2"
   id: "button"
+  pivot: PIVOT_E
   parent: "root"
   inherit_alpha: true
   slice9 {
@@ -84,6 +83,7 @@ nodes {
 }
 nodes {
   position {
+    x: -113.0
     y: -20.0
   }
   size {
@@ -104,6 +104,9 @@ nodes {
   inherit_alpha: true
 }
 nodes {
+  position {
+    x: -113.0
+  }
   scale {
     x: 0.65
     y: 0.65

druid/widget/properties_panel/properties/property_button.lua

@@ -1,5 +1,6 @@
 ---@class property_button: druid.widget
 ---@field root node
+---@field container druid.container
 ---@field text_name druid.text
 ---@field button druid.button
 ---@field text_button druid.text
@@ -18,6 +19,10 @@ function M:init(template, nodes)
 
 	self.button = self.druid:new_button("button", self.on_click)
 	self.text_button = self.druid:new_text("text_button")
+
+	self.container = self.druid:new_container(self.root)
+	self.container:add_container("text_name")
+	self.container:add_container("button")
 end
 
 

druid/widget/properties_panel/properties/property_checkbox.gui

@@ -14,14 +14,13 @@ nodes {
   type: TYPE_BOX
   texture: "druid/empty"
   id: "root"
-  pivot: PIVOT_NW
   adjust_mode: ADJUST_MODE_STRETCH
   inherit_alpha: true
   visible: false
 }
 nodes {
   position {
-    y: -20.0
+    x: -200.0
   }
   scale {
     x: 0.65
@@ -58,8 +57,7 @@ nodes {
 }
 nodes {
   position {
-    x: 174.0
-    y: -20.0
+    x: -20.0
   }
   size {
     x: 40.0

druid/widget/properties_panel/properties/property_checkbox.lua

@@ -22,6 +22,10 @@ function M:init(template, nodes)
 	self.text_name = self.druid:new_lang_text("text_name")
 
 	self.button = self.druid:new_button("button", self.on_click)
+
+	self.container = self.druid:new_container(self.root)
+	self.container:add_container("text_name")
+	self.container:add_container("button")
 end
 
 

druid/widget/properties_panel/properties/property_slider.gui

@@ -14,14 +14,13 @@ nodes {
   type: TYPE_BOX
   texture: "druid/empty"
   id: "root"
-  pivot: PIVOT_NW
   adjust_mode: ADJUST_MODE_STRETCH
   inherit_alpha: true
   visible: false
 }
 nodes {
   position {
-    y: -20.0
+    x: -200.0
   }
   scale {
     x: 0.65
@@ -58,11 +57,10 @@ nodes {
 }
 nodes {
   position {
-    x: 234.0
-    y: -20.0
+    x: 40.0
   }
   size {
-    x: 160.0
+    x: 190.0
     y: 40.0
   }
   color {
@@ -78,7 +76,7 @@ nodes {
 }
 nodes {
   size {
-    x: 160.0
+    x: 166.0
     y: 8.0
   }
   color {
@@ -100,7 +98,7 @@ nodes {
 }
 nodes {
   position {
-    x: -68.0
+    x: -83.0
   }
   size {
     x: 24.0
@@ -125,8 +123,7 @@ nodes {
 }
 nodes {
   position {
-    x: 380.0
-    y: -20.0
+    x: 200.0
   }
   size {
     x: 60.0

druid/widget/properties_panel/properties/property_slider.lua

@@ -1,5 +1,6 @@
 ---@class property_slider: druid.widget
 ---@field root node
+---@field container druid.container
 ---@field druid druid_instance
 ---@field text_name druid.lang_text
 ---@field text_value druid.text
@@ -19,12 +20,17 @@ function M:init(template, nodes)
 
 	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(183, 0, 0), self._on_slider_change_by_user) --[[@as druid.slider]]
 	self.slider:set_input_node("slider")
 
 	self:set_text_function(function(value)
 		return math.floor(value * 100) .. "%"
 	end)
+
+	self.container = self.druid:new_container(self.root)
+	self.container:add_container("text_name")
+	self.container:add_container("slider")
+	self.container:add_container("button")
 end
 
 

druid/widget/properties_panel/properties_panel.lua

@@ -41,8 +41,9 @@ function M:init(template, nodes)
 	self.container = self.druid:new_container(self.root)
 	self.container:add_container("text_header")
 	self.container:add_container("icon_drag")
-	local container_scroll_view = self.container:add_container("scroll_view")
-	container_scroll_view:add_container("scroll_content")
+
+	self.container_scroll_view = self.container:add_container("scroll_view")
+	self.contaienr_scroll_content = self.container_scroll_view:add_container("scroll_content")
 end
 
 
@@ -62,10 +63,7 @@ end
 
 
 function M:on_size_changed(new_size)
-	new_size.x = new_size.x + 8
-	new_size.y = new_size.y + 50 + 8
-
-	self.container:set_size(new_size.x, new_size.y, gui.PIVOT_N)
+	self.container:set_size(new_size.x + 8, new_size.y + 50 + 8, gui.PIVOT_N)
 end
 
 
@@ -85,6 +83,8 @@ function M:add_checkbox(text_id, initial_value, on_change_callback)
 	gui.set_enabled(instance.root, true)
 	self.layout:add(instance.root)
 	table.insert(self.properties, instance)
+	instance.container:set_size(self.layout:get_size().x)
+
 	gui.set_enabled(self.text_no_properties, false)
 
 	return instance
@@ -104,6 +104,8 @@ function M:add_slider(text_id, initial_value, on_change_callback)
 	gui.set_enabled(instance.root, true)
 	self.layout:add(instance.root)
 	table.insert(self.properties, instance)
+	instance.container:set_size(self.layout:get_size().x)
+
 	gui.set_enabled(self.text_no_properties, false)
 
 	instance.slider.on_change_value:subscribe(function(_, value)
@@ -125,6 +127,8 @@ function M:add_button(text_id, on_click_callback, callback_context)
 	gui.set_enabled(instance.root, true)
 	self.layout:add(instance.root)
 	table.insert(self.properties, instance)
+	instance.container:set_size(self.layout:get_size().x)
+
 	gui.set_enabled(self.text_no_properties, false)
 
 	if on_click_callback then