Update

docs_md/components/extended/layout_manual.md

@@ -0,0 +1,98 @@
+# Druid Layout Component
+
+## Description
+
+The Layout component provides automatic positioning and sizing of UI elements based on predefined layout rules. It helps create responsive UIs that adapt to different screen sizes and orientations.
+
+## Features
+
+- Automatic positioning of nodes based on layout rules
+- Support for different layout types (static, dynamic, fixed)
+- Anchoring nodes to different parts of the screen
+- Automatic adjustment when screen size changes
+- Pivot-based positioning
+- Margin and padding support
+
+## Basic Usage
+
+```lua
+local layout = self.druid:new_layout("layout_node")
+```
+
+### Parameters
+
+- **node**: The node or node_id of the layout container
+
+## Layout Types
+
+The Layout component supports several layout types:
+
+- **Static Layout**: Fixed position relative to parent
+- **Dynamic Layout**: Position based on parent size and node anchor
+- **Fixed Layout**: Position based on screen size and node anchor
+
+## Methods
+
+```lua
+-- Set layout type
+layout:set_static_layout() -- Fixed position relative to parent
+layout:set_dynamic_layout() -- Position based on parent size
+layout:set_fixed_layout() -- Position based on screen size
+
+-- Update layout size
+layout:set_size(width, height)
+
+-- Set node anchor (position relative to parent)
+layout:set_anchor(anchor_type)
+-- Available anchor types: ANCHOR.CENTER, ANCHOR.TOP, ANCHOR.BOTTOM, etc.
+
+-- Set node pivot (position relative to node itself)
+layout:set_pivot(pivot_type)
+-- Available pivot types: PIVOT.CENTER, PIVOT.N, PIVOT.S, etc.
+
+-- Set margins (distance from anchor point)
+layout:set_margin(left, top, right, bottom)
+
+-- Set padding (internal spacing)
+layout:set_padding(left, top, right, bottom)
+
+-- Manually update layout
+layout:update()
+
+-- Reset to initial state
+layout:reset()
+```
+
+## Events
+
+```lua
+-- Subscribe to layout changes
+layout.on_layout_change:subscribe(function(self)
+    print("Layout changed")
+end)
+```
+
+## Example
+
+```lua
+-- Create a layout that anchors to the top right of the screen
+local layout = self.druid:new_layout("panel")
+layout:set_fixed_layout()
+layout:set_anchor(druid.const.ANCHOR.TOP_RIGHT)
+layout:set_pivot(druid.const.PIVOT.NE)
+layout:set_margin(0, 50, 50, 0) -- 50px from top, 50px from right
+
+-- Create a dynamic layout that centers in its parent
+local layout = self.druid:new_layout("content")
+layout:set_dynamic_layout()
+layout:set_anchor(druid.const.ANCHOR.CENTER)
+layout:set_pivot(druid.const.PIVOT.CENTER)
+```
+
+## Notes
+
+- The layout component automatically adjusts when the screen size changes
+- You can nest layouts to create complex UI structures
+- The layout component works well with other components like Grid and Scroll
+- For responsive UIs, use fixed layouts for screen-anchored elements and dynamic layouts for elements that should adapt to their parent's size
+- The layout component respects the node's initial position as an offset from the calculated position