Widgets WIP

druid/extended/layout.lua

@@ -21,6 +21,7 @@ local component = require("druid.component")
 
 ---@class druid.layout: druid.base_component
 ---@field node node
+---@field rows_data druid.layout.rows_data Last calculated rows data
 ---@field is_dirty boolean
 ---@field entities node[]
 ---@field margin {x: number, y: number}
@@ -176,6 +177,14 @@ function M:get_size()
 	return self.size
 end
 
+
+---@return vector3
+function M:get_content_size()
+	local rows_data = self:calculate_rows_data()
+	return vmath.vector3(rows_data.total_width, rows_data.total_height, 0)
+end
+
+
 ---@return druid.layout
 function M:refresh_layout()
 	local layout_node = self.node

druid/widget/properties_panel/properties/property_button.gui

@@ -60,7 +60,23 @@ nodes {
     x: 200.0
   }
   size {
-    x: 226.0
+    x: 200.0
+    y: 40.0
+  }
+  type: TYPE_BOX
+  id: "E_Anchor"
+  pivot: PIVOT_E
+  parent: "root"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+  visible: false
+}
+nodes {
+  position {
+    x: -100.0
+  }
+  size {
+    x: 200.0
     y: 40.0
   }
   color {
@@ -71,8 +87,7 @@ nodes {
   type: TYPE_BOX
   texture: "druid/rect_round2_width2"
   id: "button"
-  pivot: PIVOT_E
+  parent: "E_Anchor"
-  parent: "root"
   inherit_alpha: true
   slice9 {
     x: 5.0
@@ -83,11 +98,10 @@ nodes {
 }
 nodes {
   position {
-    x: -113.0
     y: -20.0
   }
   size {
-    x: 226.0
+    x: 200.0
     y: 4.0
   }
   color {
@@ -104,9 +118,6 @@ nodes {
   inherit_alpha: true
 }
 nodes {
-  position {
-    x: -113.0
-  }
   scale {
     x: 0.65
     y: 0.65

druid/widget/properties_panel/properties/property_button.lua

@@ -22,7 +22,7 @@ function M:init(template, nodes)
 
 	self.container = self.druid:new_container(self.root)
 	self.container:add_container("text_name")
-	self.container:add_container("button")
+	self.container:add_container("E_Anchor")
 end
 
 

druid/widget/properties_panel/properties/property_checkbox.gui

@@ -57,7 +57,23 @@ nodes {
 }
 nodes {
   position {
-    x: -20.0
+    x: 200.0
+  }
+  size {
+    x: 200.0
+    y: 40.0
+  }
+  type: TYPE_BOX
+  id: "E_Anchor"
+  pivot: PIVOT_E
+  parent: "root"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+  visible: false
+}
+nodes {
+  position {
+    x: -180.0
   }
   size {
     x: 40.0
@@ -69,15 +85,15 @@ nodes {
     z: 0.49
   }
   type: TYPE_BOX
-  texture: "druid/rect_round2_width1"
+  texture: "druid/rect_round2_width2"
   id: "button"
-  parent: "root"
+  parent: "E_Anchor"
   inherit_alpha: true
   slice9 {
-    x: 4.0
+    x: 5.0
-    y: 4.0
+    y: 5.0
-    z: 4.0
+    z: 5.0
-    w: 4.0
+    w: 5.0
   }
 }
 nodes {

druid/widget/properties_panel/properties/property_checkbox.lua

@@ -25,7 +25,7 @@ function M:init(template, nodes)
 
 	self.container = self.druid:new_container(self.root)
 	self.container:add_container("text_name")
-	self.container:add_container("button")
+	self.container:add_container("E_Anchor")
 end
 
 

druid/widget/properties_panel/properties/property_slider.gui

@@ -57,10 +57,27 @@ nodes {
 }
 nodes {
   position {
-    x: 40.0
+    x: 200.0
   }
   size {
-    x: 190.0
+    x: 200.0
+    y: 40.0
+  }
+  type: TYPE_BOX
+  id: "E_Anchor"
+  pivot: PIVOT_E
+  adjust_mode: ADJUST_MODE_STRETCH
+  parent: "root"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+  visible: false
+}
+nodes {
+  position {
+    x: -133.0
+  }
+  size {
+    x: 134.0
     y: 40.0
   }
   color {
@@ -71,12 +88,12 @@ nodes {
   type: TYPE_BOX
   texture: "druid/empty"
   id: "slider"
-  parent: "root"
+  parent: "E_Anchor"
   inherit_alpha: true
 }
 nodes {
   size {
-    x: 166.0
+    x: 134.0
     y: 8.0
   }
   color {
@@ -98,7 +115,7 @@ nodes {
 }
 nodes {
   position {
-    x: -83.0
+    x: -55.0
   }
   size {
     x: 24.0
@@ -122,9 +139,6 @@ nodes {
   }
 }
 nodes {
-  position {
-    x: 200.0
-  }
   size {
     x: 60.0
     y: 40.0
@@ -138,7 +152,7 @@ nodes {
   texture: "druid/rect_round2_width1"
   id: "button"
   pivot: PIVOT_E
-  parent: "root"
+  parent: "E_Anchor"
   inherit_alpha: true
   slice9 {
     x: 4.0

druid/widget/properties_panel/properties/property_slider.lua

@@ -20,7 +20,7 @@ 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(183, 0, 0), self._on_slider_change_by_user) --[[@as druid.slider]]
+	self.slider = self.druid:new_slider("slider_pin", vmath.vector3(55, 0, 0), self._on_slider_change_by_user) --[[@as druid.slider]]
 	self.slider:set_input_node("slider")
 
 	self:set_text_function(function(value)
@@ -29,8 +29,7 @@ function M:init(template, nodes)
 
 	self.container = self.druid:new_container(self.root)
 	self.container:add_container("text_name")
-	self.container:add_container("slider")
+	self.container:add_container("E_Anchor")
-	self.container:add_container("button")
 end
 
 

druid/widget/properties_panel/properties_panel.gui

@@ -33,7 +33,7 @@ nodes {
 }
 nodes {
   position {
-    x: -196.0
+    x: -192.0
     y: 116.0
   }
   scale {
@@ -71,11 +71,11 @@ nodes {
 }
 nodes {
   position {
-    x: -196.0
+    x: -200.0
     y: 70.0
   }
   size {
-    x: 392.0
+    x: 400.0
     y: 190.0
   }
   type: TYPE_BOX
@@ -90,8 +90,8 @@ nodes {
 }
 nodes {
   size {
-    x: 392.0
+    x: 400.0
-    y: 186.0
+    y: 190.0
   }
   type: TYPE_BOX
   texture: "druid/pixel"
@@ -101,6 +101,8 @@ nodes {
   parent: "scroll_view"
   inherit_alpha: true
   slice9 {
+    x: 8.0
+    y: 8.0
     w: 6.0
   }
   visible: false
@@ -146,8 +148,7 @@ nodes {
 }
 nodes {
   position {
-    x: -200.0
+    y: 50.0
-    y: 100.0
   }
   type: TYPE_BOX
   texture: "druid/empty"
@@ -178,10 +179,16 @@ nodes {
 }
 nodes {
   type: TYPE_BOX
-  id: "property_slider/slider"
+  id: "property_slider/E_Anchor"
   parent: "property_slider/root"
   template_node_child: true
 }
+nodes {
+  type: TYPE_BOX
+  id: "property_slider/slider"
+  parent: "property_slider/E_Anchor"
+  template_node_child: true
+}
 nodes {
   type: TYPE_BOX
   id: "property_slider/slider_back"
@@ -197,7 +204,7 @@ nodes {
 nodes {
   type: TYPE_BOX
   id: "property_slider/button"
-  parent: "property_slider/root"
+  parent: "property_slider/E_Anchor"
   template_node_child: true
 }
 nodes {
@@ -236,10 +243,16 @@ nodes {
 }
 nodes {
   type: TYPE_BOX
-  id: "property_checkbox/button"
+  id: "property_checkbox/E_Anchor"
   parent: "property_checkbox/root"
   template_node_child: true
 }
+nodes {
+  type: TYPE_BOX
+  id: "property_checkbox/button"
+  parent: "property_checkbox/E_Anchor"
+  template_node_child: true
+}
 nodes {
   type: TYPE_BOX
   id: "property_checkbox/icon"
@@ -276,10 +289,16 @@ nodes {
 }
 nodes {
   type: TYPE_BOX
-  id: "property_button/button"
+  id: "property_button/E_Anchor"
   parent: "property_button/root"
   template_node_child: true
 }
+nodes {
+  type: TYPE_BOX
+  id: "property_button/button"
+  parent: "property_button/E_Anchor"
+  template_node_child: true
+}
 nodes {
   type: TYPE_BOX
   id: "property_button/selected"

druid/widget/properties_panel/properties_panel.lua

@@ -17,7 +17,6 @@ function M:init(template, nodes)
 	--self.root = self.druid:new_container("root")
 	self.root = self:get_node("root")
 	self.text_no_properties = self:get_node("text_no_properties")
-	--self.root:add_container("text_header")
 
 	self.properties = {}
 
@@ -41,6 +40,7 @@ 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")
+	--self.container:create_draggable_corners()
 
 	self.container_scroll_view = self.container:add_container("scroll_view")
 	self.contaienr_scroll_content = self.container_scroll_view:add_container("scroll_content")
@@ -63,7 +63,12 @@ end
 
 
 function M:on_size_changed(new_size)
-	self.container:set_size(new_size.x + 8, new_size.y + 50 + 8, gui.PIVOT_N)
+	self.container:set_size(new_size.x, new_size.y + 50, gui.PIVOT_N)
+
+	local width = self.layout:get_size().x - self.layout.padding.x - self.layout.padding.z
+	for index = 1, #self.properties do
+		self.properties[index].container:set_size(width)
+	end
 end
 
 
@@ -83,7 +88,9 @@ 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)
+
+	local width = self.layout:get_size().x - self.layout.padding.x - self.layout.padding.z
+	instance.container:set_size(width)
 
 	gui.set_enabled(self.text_no_properties, false)
 
@@ -104,7 +111,9 @@ 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)
+
+	local width = self.layout:get_size().x - self.layout.padding.x - self.layout.padding.z
+	instance.container:set_size(width)
 
 	gui.set_enabled(self.text_no_properties, false)
 
@@ -127,7 +136,9 @@ 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)
+
+	local width = self.layout:get_size().x - self.layout.padding.x - self.layout.padding.z
+	instance.container:set_size(width)
 
 	gui.set_enabled(self.text_no_properties, false)