Update with container examples

druid/extended/container.lua

@@ -93,8 +93,8 @@ function M:init(node, mode, callback)
 	self.position = gui.get_position(self.node)
 	self.origin_position = gui.get_position(self.node)
 
-	local adjust_mode = gui.get_adjust_mode(self.node)
-	self.mode = mode or (adjust_mode == gui.ADJUST_FIT) and const.LAYOUT_MODE.FIT or const.LAYOUT_MODE.STRETCH
+	self._initial_adjust_mode = gui.get_adjust_mode(self.node)
+	self.mode = mode or (self._initial_adjust_mode == gui.ADJUST_FIT) and const.LAYOUT_MODE.FIT or const.LAYOUT_MODE.STRETCH
 
 	gui.set_size_mode(self.node, gui.SIZE_MODE_MANUAL)
 	gui.set_adjust_mode(self.node, gui.ADJUST_FIT)
@@ -119,6 +119,7 @@ end
 ---@private
 function M:on_remove()
 	self:clear_draggable_corners()
+	gui.set_adjust_mode(self.node, self._initial_adjust_mode)
 end
 
 

druid/helper.lua

@@ -154,9 +154,8 @@ function M.get_screen_aspect_koef()
 end
 
 
----Get current GUI scale for each side
----@return number scale_x
----@return number scale_y
+---Get current GUI scale
+---@return number scale
 function M.get_gui_scale()
 	local window_x, window_y = window.get_size()
 	return math.min(window_x / gui.get_width(), window_y / gui.get_height())

example/components/examples_list_view/examples_list_view.lua

@@ -90,54 +90,17 @@ function M:add_example(examples, druid_example)
 				self.selected_example = nil
 			end
 
-			local root = gui.get_node(example_data.root)
-			gui.set_enabled(root, true)
+			-- This one helps only to help with a select the same example
+			-- Cause the nodes can't be returned to initial state SO fast, need a little brake here
+			timer.delay(0, false, function()
+				self:on_example_click(druid_example, example_data, item)
 
-			local instance
-			if example_data.widget_class then
-				instance = druid_example.druid:new_widget(example_data.widget_class, example_data.template)
-			elseif example_data.component_class then -- Keep for backward compatibility
-				instance = druid_example.druid:new(example_data.component_class, example_data.template)
-			end
-			---@cast instance example_instance
-
-			self.selected_example = {
-				data = example_data,
-				list_item = item,
-				instance = instance,
-				root = root
-			}
-			item:set_selected(true)
-
-			druid_example.output_list:clear()
-			if instance.on_example_created then
-				instance:on_example_created(druid_example.output_list)
-			elseif example_data.on_create then
-				example_data.on_create(instance, druid_example.output_list)
-			end
-
-			if example_data.information_text_id then
-				self.on_set_information(example_data.information_text_id)
-			else
-				self.on_set_information("")
-			end
-
-			druid_example.example_scene:set_gui_path(example_data.code_url)
-
-			druid_example.properties_panel:clear()
-
-			-- First we want to chec
-			if instance.properties_control then
-				instance:properties_control(druid_example.properties_panel)
-			elseif example_data.properties_control then
-				example_data.properties_control(instance, druid_example.properties_panel)
-			end
-
-			storage.set("last_selected_example", example_data.name_id)
-			if html5 then
-				local command = string.format('window.history.replaceState(null, null, "?example=%s")', example_data.name_id)
-				html5.run(command)
-			end
+				storage.set("last_selected_example", example_data.name_id)
+				if html5 then
+					local command = string.format('window.history.replaceState(null, null, "?example=%s")', example_data.name_id)
+					html5.run(command)
+				end
+			end)
 		end)
 
 		self.grid:add(item.root.node)
@@ -149,6 +112,55 @@ function M:add_example(examples, druid_example)
 end
 
 
+---@param druid_example druid.example
+---@param example_data druid.example.data
+---@param item examples_list_view_item
+function M:on_example_click(druid_example, example_data, item)
+	local root = gui.get_node(example_data.root)
+	gui.set_enabled(root, true)
+
+	local instance
+	if example_data.widget_class then
+		instance = druid_example.druid:new_widget(example_data.widget_class, example_data.template)
+	elseif example_data.component_class then -- Keep for backward compatibility
+		instance = druid_example.druid:new(example_data.component_class, example_data.template)
+	end
+	---@cast instance example_instance
+
+	self.selected_example = {
+		data = example_data,
+		list_item = item,
+		instance = instance,
+		root = root
+	}
+	item:set_selected(true)
+
+	druid_example.output_list:clear()
+	if instance.on_example_created then
+		instance:on_example_created(druid_example.output_list)
+	elseif example_data.on_create then
+		example_data.on_create(instance, druid_example.output_list)
+	end
+
+	if example_data.information_text_id then
+		self.on_set_information(example_data.information_text_id)
+	else
+		self.on_set_information("")
+	end
+
+	druid_example.example_scene:set_gui_path(example_data.code_url)
+
+	druid_example.properties_panel:clear()
+
+	-- First we want to chec
+	if instance.properties_control then
+		instance:properties_control(druid_example.properties_panel)
+	elseif example_data.properties_control then
+		example_data.properties_control(instance, druid_example.properties_panel)
+	end
+end
+
+
 ---@param name_id string
 ---@return boolean @true if example was found and selected
 function M:select_example_by_name_id(name_id)

example/druid.gui

@@ -4804,6 +4804,200 @@ nodes {
   parent: "example_tiling_node/root"
   template_node_child: true
 }
+nodes {
+  size {
+    x: 200.0
+    y: 100.0
+  }
+  type: TYPE_BOX
+  id: "container"
+  parent: "examples"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+  visible: false
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "container_anchors"
+  parent: "container"
+  inherit_alpha: true
+  template: "/example/examples/container/container_anchors/container_anchors.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_anchors/root"
+  parent: "container_anchors"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "container_anchors/text"
+  parent: "container_anchors/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_anchors/parent_container"
+  parent: "container_anchors/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_anchors/anchor_ne"
+  parent: "container_anchors/parent_container"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_anchors/anchor_e"
+  parent: "container_anchors/parent_container"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_anchors/anchor_n"
+  parent: "container_anchors/parent_container"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_anchors/anchor_se"
+  parent: "container_anchors/parent_container"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_anchors/anchor_s"
+  parent: "container_anchors/parent_container"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_anchors/anchor_sw"
+  parent: "container_anchors/parent_container"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_anchors/anchor_w"
+  parent: "container_anchors/parent_container"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_anchors/anchor_nw"
+  parent: "container_anchors/parent_container"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_anchors/anchor_center"
+  parent: "container_anchors/parent_container"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "container_resize"
+  parent: "container"
+  inherit_alpha: true
+  template: "/example/examples/container/container_resize/container_resize.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_resize/root"
+  parent: "container_resize"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "container_resize/text"
+  parent: "container_resize/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_resize/parent_container"
+  parent: "container_resize/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_resize/panel_left"
+  parent: "container_resize/parent_container"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_resize/panel_right"
+  parent: "container_resize/parent_container"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_resize/panel_bot"
+  parent: "container_resize/parent_container"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_resize/panel_content"
+  parent: "container_resize/parent_container"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_resize/anchor_ne"
+  parent: "container_resize/panel_content"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_resize/anchor_s"
+  parent: "container_resize/panel_content"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_resize/anchor_sw"
+  parent: "container_resize/panel_content"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_resize/anchor_center"
+  parent: "container_resize/panel_content"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_resize/anchor_n"
+  parent: "container_resize/panel_content"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_resize/anchor_e"
+  parent: "container_resize/panel_content"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_resize/anchor_nw"
+  parent: "container_resize/panel_content"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_resize/anchor_w"
+  parent: "container_resize/panel_content"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "container_resize/anchor_se"
+  parent: "container_resize/panel_content"
+  template_node_child: true
+}
 nodes {
   position {
     x: -20.0

example/examples/container/container_anchors/container_anchors.gui

@@ -0,0 +1,308 @@
+fonts {
+  name: "text_bold"
+  font: "/example/assets/fonts/text_bold.font"
+}
+fonts {
+  name: "text_regular"
+  font: "/example/assets/fonts/text_regular.font"
+}
+textures {
+  name: "druid_example"
+  texture: "/example/assets/druid_example.atlas"
+}
+nodes {
+  size {
+    x: 1000.0
+    y: 1000.0
+  }
+  color {
+    x: 0.173
+    y: 0.184
+    z: 0.204
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_64"
+  id: "root"
+  inherit_alpha: true
+  slice9 {
+    x: 32.0
+    y: 32.0
+    z: 32.0
+    w: 32.0
+  }
+}
+nodes {
+  position {
+    y: 455.0
+  }
+  size {
+    x: 900.0
+    y: 100.0
+  }
+  type: TYPE_TEXT
+  text: "Can be used as relative anchors"
+  font: "text_bold"
+  id: "text"
+  parent: "root"
+  inherit_alpha: true
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
+}
+nodes {
+  size {
+    x: 840.0
+    y: 840.0
+  }
+  color {
+    x: 0.129
+    y: 0.141
+    z: 0.157
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "parent_container"
+  parent: "root"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    x: 400.0
+    y: 400.0
+  }
+  size {
+    x: 96.0
+    y: 96.0
+  }
+  color {
+    x: 0.902
+    y: 0.875
+    z: 0.624
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_ne"
+  pivot: PIVOT_NE
+  parent: "parent_container"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    x: 400.0
+  }
+  size {
+    x: 96.0
+    y: 96.0
+  }
+  color {
+    x: 0.902
+    y: 0.875
+    z: 0.624
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_e"
+  pivot: PIVOT_E
+  parent: "parent_container"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    y: 400.0
+  }
+  size {
+    x: 96.0
+    y: 96.0
+  }
+  color {
+    x: 0.902
+    y: 0.875
+    z: 0.624
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_n"
+  pivot: PIVOT_N
+  parent: "parent_container"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    x: 400.0
+    y: -400.0
+  }
+  size {
+    x: 96.0
+    y: 96.0
+  }
+  color {
+    x: 0.902
+    y: 0.875
+    z: 0.624
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_se"
+  pivot: PIVOT_SE
+  parent: "parent_container"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    y: -400.0
+  }
+  size {
+    x: 96.0
+    y: 96.0
+  }
+  color {
+    x: 0.902
+    y: 0.875
+    z: 0.624
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_s"
+  pivot: PIVOT_S
+  parent: "parent_container"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    x: -400.0
+    y: -400.0
+  }
+  size {
+    x: 96.0
+    y: 96.0
+  }
+  color {
+    x: 0.902
+    y: 0.875
+    z: 0.624
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_sw"
+  pivot: PIVOT_SW
+  parent: "parent_container"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    x: -400.0
+  }
+  size {
+    x: 96.0
+    y: 96.0
+  }
+  color {
+    x: 0.902
+    y: 0.875
+    z: 0.624
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_w"
+  pivot: PIVOT_W
+  parent: "parent_container"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    x: -400.0
+    y: 400.0
+  }
+  size {
+    x: 96.0
+    y: 96.0
+  }
+  color {
+    x: 0.902
+    y: 0.875
+    z: 0.624
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_nw"
+  pivot: PIVOT_NW
+  parent: "parent_container"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  size {
+    x: 96.0
+    y: 96.0
+  }
+  color {
+    x: 0.902
+    y: 0.875
+    z: 0.624
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_center"
+  parent: "parent_container"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT

example/examples/container/container_anchors/container_anchors.lua

@@ -0,0 +1,21 @@
+---@class widget.container_anchors: druid.widget
+local M = {}
+
+
+function M:init()
+	self.parent_container = self.druid:new_container("parent_container")
+	self.parent_container:create_draggable_corners()
+
+	self.parent_container:add_container("anchor_ne")
+	self.parent_container:add_container("anchor_nw")
+	self.parent_container:add_container("anchor_se")
+	self.parent_container:add_container("anchor_sw")
+	self.parent_container:add_container("anchor_n")
+	self.parent_container:add_container("anchor_s")
+	self.parent_container:add_container("anchor_e")
+	self.parent_container:add_container("anchor_w")
+	self.parent_container:add_container("anchor_center")
+end
+
+
+return M

example/examples/container/container_resize/container_resize.gui

@@ -0,0 +1,416 @@
+fonts {
+  name: "text_bold"
+  font: "/example/assets/fonts/text_bold.font"
+}
+fonts {
+  name: "text_regular"
+  font: "/example/assets/fonts/text_regular.font"
+}
+textures {
+  name: "druid_example"
+  texture: "/example/assets/druid_example.atlas"
+}
+nodes {
+  size {
+    x: 1000.0
+    y: 1000.0
+  }
+  color {
+    x: 0.173
+    y: 0.184
+    z: 0.204
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_64"
+  id: "root"
+  inherit_alpha: true
+  slice9 {
+    x: 32.0
+    y: 32.0
+    z: 32.0
+    w: 32.0
+  }
+}
+nodes {
+  position {
+    y: 455.0
+  }
+  size {
+    x: 900.0
+    y: 100.0
+  }
+  type: TYPE_TEXT
+  text: "Can be used as relative anchors"
+  font: "text_bold"
+  id: "text"
+  parent: "root"
+  inherit_alpha: true
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
+}
+nodes {
+  size {
+    x: 800.0
+    y: 800.0
+  }
+  color {
+    x: 0.129
+    y: 0.141
+    z: 0.157
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "parent_container"
+  parent: "root"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    x: -400.0
+  }
+  size {
+    x: 200.0
+    y: 800.0
+  }
+  color {
+    x: 0.902
+    y: 0.875
+    z: 0.624
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "panel_left"
+  pivot: PIVOT_W
+  parent: "parent_container"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    x: 400.0
+  }
+  size {
+    x: 200.0
+    y: 800.0
+  }
+  color {
+    x: 0.957
+    y: 0.608
+    z: 0.608
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "panel_right"
+  pivot: PIVOT_E
+  parent: "parent_container"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    y: -400.0
+  }
+  size {
+    x: 400.0
+    y: 200.0
+  }
+  color {
+    x: 0.631
+    y: 0.843
+    z: 0.961
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "panel_bot"
+  xanchor: XANCHOR_LEFT
+  pivot: PIVOT_S
+  adjust_mode: ADJUST_MODE_STRETCH
+  parent: "parent_container"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    y: 100.0
+  }
+  size {
+    x: 400.0
+    y: 600.0
+  }
+  color {
+    x: 0.557
+    y: 0.835
+    z: 0.62
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "panel_content"
+  xanchor: XANCHOR_LEFT
+  yanchor: YANCHOR_BOTTOM
+  adjust_mode: ADJUST_MODE_STRETCH
+  parent: "parent_container"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    x: 200.0
+    y: 300.0
+  }
+  size {
+    x: 32.0
+    y: 32.0
+  }
+  color {
+    x: 0.129
+    y: 0.141
+    z: 0.157
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_ne"
+  pivot: PIVOT_NE
+  parent: "panel_content"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    y: -300.0
+  }
+  size {
+    x: 32.0
+    y: 32.0
+  }
+  color {
+    x: 0.129
+    y: 0.141
+    z: 0.157
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_s"
+  pivot: PIVOT_S
+  parent: "panel_content"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    x: -200.0
+    y: -300.0
+  }
+  size {
+    x: 32.0
+    y: 32.0
+  }
+  color {
+    x: 0.129
+    y: 0.141
+    z: 0.157
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_sw"
+  pivot: PIVOT_SW
+  parent: "panel_content"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  size {
+    x: 32.0
+    y: 32.0
+  }
+  color {
+    x: 0.129
+    y: 0.141
+    z: 0.157
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_center"
+  parent: "panel_content"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    y: 300.0
+  }
+  size {
+    x: 32.0
+    y: 32.0
+  }
+  color {
+    x: 0.129
+    y: 0.141
+    z: 0.157
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_n"
+  pivot: PIVOT_N
+  parent: "panel_content"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    x: 200.0
+  }
+  size {
+    x: 32.0
+    y: 32.0
+  }
+  color {
+    x: 0.129
+    y: 0.141
+    z: 0.157
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_e"
+  pivot: PIVOT_E
+  parent: "panel_content"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    x: -200.0
+    y: 300.0
+  }
+  size {
+    x: 32.0
+    y: 32.0
+  }
+  color {
+    x: 0.129
+    y: 0.141
+    z: 0.157
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_nw"
+  pivot: PIVOT_NW
+  parent: "panel_content"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    x: -200.0
+  }
+  size {
+    x: 32.0
+    y: 32.0
+  }
+  color {
+    x: 0.129
+    y: 0.141
+    z: 0.157
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_w"
+  pivot: PIVOT_W
+  parent: "panel_content"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  position {
+    x: 200.0
+    y: -300.0
+  }
+  size {
+    x: 32.0
+    y: 32.0
+  }
+  color {
+    x: 0.129
+    y: 0.141
+    z: 0.157
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "anchor_se"
+  pivot: PIVOT_SE
+  parent: "panel_content"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT

example/examples/container/container_resize/container_resize.lua

@@ -0,0 +1,26 @@
+---@class widget.container_anchors: druid.widget
+local M = {}
+
+
+function M:init()
+	self.parent_container = self.druid:new_container("parent_container")
+	self.parent_container:create_draggable_corners()
+
+	self.parent_container:add_container("panel_left", "stretch_y")
+	self.parent_container:add_container("panel_right", "stretch_y")
+	self.parent_container:add_container("panel_bot", "stretch_x")
+
+	self.container_content = self.parent_container:add_container("panel_content")
+	self.container_content:add_container("anchor_ne")
+	self.container_content:add_container("anchor_nw")
+	self.container_content:add_container("anchor_se")
+	self.container_content:add_container("anchor_sw")
+	self.container_content:add_container("anchor_n")
+	self.container_content:add_container("anchor_s")
+	self.container_content:add_container("anchor_e")
+	self.container_content:add_container("anchor_w")
+	self.container_content:add_container("anchor_center")
+end
+
+
+return M

example/examples/container/examples_list.lua

@@ -0,0 +1,25 @@
+local M = {}
+
+function M.get_examples()
+	---@type druid.example.data[]
+	return {
+		{
+			name_id = "ui_example_container_anchors",
+			information_text_id = "ui_example_container_anchors_description",
+			template = "container_anchors",
+			root = "container_anchors/root",
+			code_url = "example/examples/container/container_anchors/container_anchors.lua",
+			widget_class = require("example.examples.container.container_anchors.container_anchors"),
+		},
+		{
+			name_id = "ui_example_container_resize",
+			information_text_id = "ui_example_container_resize_description",
+			template = "container_resize",
+			root = "container_resize/root",
+			code_url = "example/examples/container/container_resize/container_resize.lua",
+			widget_class = require("example.examples.container.container_resize.container_resize"),
+		},
+	}
+end
+
+return M

example/examples/druid_examples.lua

@@ -6,6 +6,7 @@ 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 container_examples = require("example.examples.container.examples_list")
 
 local M = {}
 
@@ -45,7 +46,7 @@ function M.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())
-
+	add_examples(examples, "ui_examples_container", container_examples.get_examples())
 	return examples
 end
 

example/examples/panthera/animation_blend/animation_blend.lua

@@ -38,13 +38,13 @@ end
 function M:on_input(action_id, action)
 	if action_id == nil and gui.pick_node(self.root, action.x, action.y) then
 		local root_screen_pos = gui.get_screen_position(self.root)
-		local gui_scale = helper.get_gui_scale()
+		local koef_x, koef_y = helper.get_screen_aspect_koef()
 
-		local dx = (action.screen_x - root_screen_pos.x) / gui_scale -- -root_size.x / 2 .. root_size.x / 2
+		local dx = (action.screen_x - root_screen_pos.x) * koef_x -- -root_size.x / 2 .. root_size.x / 2
 		local animation_progress_x = (dx + self.root_size.x / 2) / self.root_size.x -- 0 .. 1
 		panthera.set_time(self.animation_horizontal, "horizontal", animation_progress_x)
 
-		local dy = (action.screen_y - root_screen_pos.y) / gui_scale -- -root_size.y / 2 .. root_size.y / 2
+		local dy = (action.screen_y - root_screen_pos.y) * koef_y -- -root_size.y / 2 .. root_size.y / 2
 		local animation_progress_y = (dy + self.root_size.y / 2) / self.root_size.y -- 0 .. 1
 		panthera.set_time(self.animation_vertical, "vertical", animation_progress_y)
 	end

templates/default.gui

@@ -0,0 +1,52 @@
+fonts {
+  name: "text_bold"
+  font: "/example/assets/fonts/text_bold.font"
+}
+fonts {
+  name: "text_regular"
+  font: "/example/assets/fonts/text_regular.font"
+}
+textures {
+  name: "druid_example"
+  texture: "/example/assets/druid_example.atlas"
+}
+nodes {
+  size {
+    x: 1000.0
+    y: 1000.0
+  }
+  color {
+    x: 0.173
+    y: 0.184
+    z: 0.204
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_64"
+  id: "root"
+  inherit_alpha: true
+  slice9 {
+    x: 32.0
+    y: 32.0
+    z: 32.0
+    w: 32.0
+  }
+}
+nodes {
+  position {
+    y: 453.0
+  }
+  size {
+    x: 600.0
+    y: 100.0
+  }
+  type: TYPE_TEXT
+  text: "Hello, New GUI File!"
+  font: "text_bold"
+  id: "text"
+  parent: "root"
+  inherit_alpha: true
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT