Extension-Druid/docs/modules/StaticGrid.html
2023-07-13 21:39:02 +03:00

971 lines
24 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head>
<title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="product">
<div id="product_logo"></div>
<div id="product_name"><big><b></b></big></div>
<div id="product_description"></div>
</div> <!-- id="product" -->
<div id="main">
<!-- Menu -->
<div id="navigation">
<br/>
<h1>Druid</h1>
<ul>
<li><a href="../index.html">Index</a></li>
</ul>
<h2>Contents</h2>
<ul>
<li><a href="#Functions">Functions</a></li>
<li><a href="#Tables">Tables</a></li>
<li><a href="#Fields">Fields</a></li>
</ul>
<h2>Modules</h2>
<ul class="nowrap">
<li><a href="../modules/BackHandler.html">BackHandler</a></li>
<li><a href="../modules/BaseComponent.html">BaseComponent</a></li>
<li><a href="../modules/Blocker.html">Blocker</a></li>
<li><a href="../modules/Button.html">Button</a></li>
<li><a href="../modules/Checkbox.html">Checkbox</a></li>
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
<li><a href="../modules/Helper.html">Helper</a></li>
<li><a href="../modules/Hotkey.html">Hotkey</a></li>
<li><a href="../modules/Hover.html">Hover</a></li>
<li><a href="../modules/Input.html">Input</a></li>
<li><a href="../modules/LangText.html">LangText</a></li>
<li><a href="../modules/Layout.html">Layout</a></li>
<li><a href="../modules/PinKnob.html">PinKnob</a></li>
<li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li>
<li><strong>StaticGrid</strong></li>
<li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li>
</ul>
</div>
<div id="content">
<h1>Module <code>StaticGrid</code></h1>
<p>Component to handle component's position by row and columns.</p>
<p>
## Overview ##
<p> The Static Grid component allows for positioning components in rows and columns.
It provides a static grid layout with constant node sizes, allowing for pre-calculated
node positions and the option to include gaps between nodes.
<p> ## Notes ##
<p> • In a static grid, the node size remains constant, enabling the calculation of node
positions before placement. Nodes can be placed with gaps between them.
<p> • The static grid can automatically shift elements when nodes are added or removed.
<p> • When a node is added, the grid will set the node's parent to the specified parent_node.
<p> • You can obtain an array of positions for each element, which can be used to set
points of interest in a scroll component.
<p> • The size of all elements can be retrieved for setting up the size in a scroll component.
<p> • The grid can be bound to a scroll component for automatic resizing of the scroll content size.
<p> • The pivot of the parent_node affects the node placement within the grid.
<p> • A prefab node is used to determine the node size and anchor.
<p> • You can specify a position_function for animations using the
_static_grid:set_position_function(node, pos) callback. The default position function is gui.set_position().
<p> <a href="https://insality.github.io/druid/druid/index.html?example=general_grid" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#add">add(self, item[, index[, shift_policy=SHIFT.RIGHT[, is_instant=false]]])</a></td>
<td class="summary">Add new item to the grid</td>
</tr>
<tr>
<td class="name" nowrap><a href="#clear">clear(self)</a></td>
<td class="summary">Clear grid nodes array.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_all_pos">get_all_pos(self)</a></td>
<td class="summary">Return array of all node positions</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_borders">get_borders(self)</a></td>
<td class="summary">Return grid content borders</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_index">get_index(self, pos)</a></td>
<td class="summary">Return index for grid pos</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_index_by_node">get_index_by_node(self, node)</a></td>
<td class="summary">Return grid index by node</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_offset">get_offset(self)</a></td>
<td class="summary">Return StaticGrid offset, where StaticGrid content starts.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_pos">get_pos(self, index)</a></td>
<td class="summary">Return pos for grid node index</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_size">get_size(self)</a></td>
<td class="summary">Return grid content size</td>
</tr>
<tr>
<td class="name" nowrap><a href="#init">init(self, parent, element[, in_row=1])</a></td>
<td class="summary"><a href="../modules/StaticGrid.html#">StaticGrid</a> constructor</td>
</tr>
<tr>
<td class="name" nowrap><a href="#remove">remove(self, index[, shift_policy=SHIFT.RIGHT[, is_instant=false]])</a></td>
<td class="summary">Remove the item from the grid.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_anchor">set_anchor(self, anchor)</a></td>
<td class="summary">Set grid anchor.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_in_row">set_in_row(self, in_row)</a></td>
<td class="summary">Set new in_row elements for grid</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_position_function">set_position_function(self, callback)</a></td>
<td class="summary">Change set position function for grid nodes.</td>
</tr>
</table>
<h2><a href="#Tables">Tables</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#style">style</a></td>
<td class="summary">Component style params.</td>
</tr>
</table>
<h2><a href="#Fields">Fields</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#anchor">anchor</a></td>
<td class="summary">Item anchor [0..1]</td>
</tr>
<tr>
<td class="name" nowrap><a href="#border">border</a></td>
<td class="summary">The size of item content</td>
</tr>
<tr>
<td class="name" nowrap><a href="#first_index">first_index</a></td>
<td class="summary">The first index of node in grid</td>
</tr>
<tr>
<td class="name" nowrap><a href="#last_index">last_index</a></td>
<td class="summary">The last index of node in grid</td>
</tr>
<tr>
<td class="name" nowrap><a href="#node_size">node_size</a></td>
<td class="summary">Item size</td>
</tr>
<tr>
<td class="name" nowrap><a href="#nodes">nodes</a></td>
<td class="summary">List of all grid nodes</td>
</tr>
<tr>
<td class="name" nowrap><a href="#on_add_item">on_add_item</a></td>
<td class="summary">On item add callback(self, node, index)</td>
</tr>
<tr>
<td class="name" nowrap><a href="#on_change_items">on_change_items</a></td>
<td class="summary">On item add, remove or change in_row callback(self, index|nil)</td>
</tr>
<tr>
<td class="name" nowrap><a href="#on_clear">on_clear</a></td>
<td class="summary">On grid clear callback(self)</td>
</tr>
<tr>
<td class="name" nowrap><a href="#on_remove_item">on_remove_item</a></td>
<td class="summary">On item remove callback(self, index)</td>
</tr>
<tr>
<td class="name" nowrap><a href="#on_update_positions">on_update_positions</a></td>
<td class="summary">On update item positions callback(self)</td>
</tr>
<tr>
<td class="name" nowrap><a href="#parent">parent</a></td>
<td class="summary">Parent gui node</td>
</tr>
<tr>
<td class="name" nowrap><a href="#pivot">pivot</a></td>
<td class="summary">Item pivot [-0.5..0.5]</td>
</tr>
</table>
<br/>
<br/>
<h2 class="section-header "><a name="Functions"></a>Functions</h2>
<dl class="function">
<dt>
<a name = "add"></a>
<strong>add(self, item[, index[, shift_policy=SHIFT.RIGHT[, is_instant=false]]])</strong>
</dt>
<dd>
Add new item to the grid
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">StaticGrid</span></span>
<a href="../modules/StaticGrid.html#">StaticGrid</a>
</li>
<li><span class="parameter">item</span>
<span class="types"><span class="type">node</span></span>
Gui node
</li>
<li><span class="parameter">index</span>
<span class="types"><span class="type">number</span></span>
The item position. By default add as last item
(<em>optional</em>)
</li>
<li><span class="parameter">shift_policy</span>
<span class="types"><span class="type">number</span></span>
How shift nodes, if required. See const.SHIFT
(<em>default</em> SHIFT.RIGHT)
</li>
<li><span class="parameter">is_instant</span>
<span class="types"><span class="type">boolean</span></span>
If true, update node positions instantly
(<em>default</em> false)
</li>
</ul>
</dd>
<dt>
<a name = "clear"></a>
<strong>clear(self)</strong>
</dt>
<dd>
Clear grid nodes array. GUI nodes will be not deleted!
If you want to delete GUI nodes, use static_grid.nodes array before grid:clear
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">StaticGrid</span></span>
<a href="../modules/StaticGrid.html#">StaticGrid</a>
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">druid.static_grid</span></span>
Current grid instance
</ol>
</dd>
<dt>
<a name = "get_all_pos"></a>
<strong>get_all_pos(self)</strong>
</dt>
<dd>
Return array of all node positions
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">StaticGrid</span></span>
<a href="../modules/StaticGrid.html#">StaticGrid</a>
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">vector3[]</span></span>
All grid node positions
</ol>
</dd>
<dt>
<a name = "get_borders"></a>
<strong>get_borders(self)</strong>
</dt>
<dd>
Return grid content borders
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">StaticGrid</span></span>
<a href="../modules/StaticGrid.html#">StaticGrid</a>
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">vector3</span></span>
The grid content borders
</ol>
</dd>
<dt>
<a name = "get_index"></a>
<strong>get_index(self, pos)</strong>
</dt>
<dd>
Return index for grid pos
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">StaticGrid</span></span>
<a href="../modules/StaticGrid.html#">StaticGrid</a>
</li>
<li><span class="parameter">pos</span>
<span class="types"><span class="type">vector3</span></span>
The node position in the grid
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">number</span></span>
The node index
</ol>
</dd>
<dt>
<a name = "get_index_by_node"></a>
<strong>get_index_by_node(self, node)</strong>
</dt>
<dd>
Return grid index by node
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">StaticGrid</span></span>
<a href="../modules/StaticGrid.html#">StaticGrid</a>
</li>
<li><span class="parameter">node</span>
<span class="types"><span class="type">node</span></span>
The gui node in the grid
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">number</span></span>
The node index
</ol>
</dd>
<dt>
<a name = "get_offset"></a>
<strong>get_offset(self)</strong>
</dt>
<dd>
Return StaticGrid offset, where StaticGrid content starts.
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">StaticGrid</span></span>
<a href="../modules/StaticGrid.html#">StaticGrid</a> The StaticGrid instance
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">vector3</span></span>
The StaticGrid offset
</ol>
</dd>
<dt>
<a name = "get_pos"></a>
<strong>get_pos(self, index)</strong>
</dt>
<dd>
Return pos for grid node index
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">StaticGrid</span></span>
<a href="../modules/StaticGrid.html#">StaticGrid</a>
</li>
<li><span class="parameter">index</span>
<span class="types"><span class="type">number</span></span>
The grid element index
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">vector3</span></span>
Node position
</ol>
</dd>
<dt>
<a name = "get_size"></a>
<strong>get_size(self)</strong>
</dt>
<dd>
Return grid content size
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">StaticGrid</span></span>
<a href="../modules/StaticGrid.html#">StaticGrid</a>
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">vector3</span></span>
The grid content size
</ol>
</dd>
<dt>
<a name = "init"></a>
<strong>init(self, parent, element[, in_row=1])</strong>
</dt>
<dd>
<a href="../modules/StaticGrid.html#">StaticGrid</a> constructor
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">StaticGrid</span></span>
<a href="../modules/StaticGrid.html#">StaticGrid</a>
</li>
<li><span class="parameter">parent</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a> or <span class="type">Node</span></span>
The GUI Node container, where grid's items will be placed
</li>
<li><span class="parameter">element</span>
<span class="types"><span class="type">node</span></span>
Element prefab. Need to get it size
</li>
<li><span class="parameter">in_row</span>
<span class="types"><span class="type">number</span></span>
How many nodes in row can be placed
(<em>default</em> 1)
</li>
</ul>
</dd>
<dt>
<a name = "remove"></a>
<strong>remove(self, index[, shift_policy=SHIFT.RIGHT[, is_instant=false]])</strong>
</dt>
<dd>
Remove the item from the grid. Note that gui node will be not deleted
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">StaticGrid</span></span>
<a href="../modules/StaticGrid.html#">StaticGrid</a>
</li>
<li><span class="parameter">index</span>
<span class="types"><span class="type">number</span></span>
The grid node index to remove
</li>
<li><span class="parameter">shift_policy</span>
<span class="types"><span class="type">number</span></span>
How shift nodes, if required. See const.SHIFT
(<em>default</em> SHIFT.RIGHT)
</li>
<li><span class="parameter">is_instant</span>
<span class="types"><span class="type">boolean</span></span>
If true, update node positions instantly
(<em>default</em> false)
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">Node</span></span>
The deleted gui node from grid
</ol>
</dd>
<dt>
<a name = "set_anchor"></a>
<strong>set_anchor(self, anchor)</strong>
</dt>
<dd>
Set grid anchor. Default anchor is equal to anchor of grid parent node
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">StaticGrid</span></span>
<a href="../modules/StaticGrid.html#">StaticGrid</a>
</li>
<li><span class="parameter">anchor</span>
<span class="types"><span class="type">vector3</span></span>
Anchor
</li>
</ul>
</dd>
<dt>
<a name = "set_in_row"></a>
<strong>set_in_row(self, in_row)</strong>
</dt>
<dd>
Set new in_row elements for grid
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">StaticGrid</span></span>
<a href="../modules/StaticGrid.html#">StaticGrid</a>
</li>
<li><span class="parameter">in_row</span>
<span class="types"><span class="type">number</span></span>
The new in_row value
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">druid.static_grid</span></span>
Current grid instance
</ol>
</dd>
<dt>
<a name = "set_position_function"></a>
<strong>set_position_function(self, callback)</strong>
</dt>
<dd>
Change set position function for grid nodes. It will call on
update poses on grid elements. Default: gui.set_position
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">StaticGrid</span></span>
<a href="../modules/StaticGrid.html#">StaticGrid</a>
</li>
<li><span class="parameter">callback</span>
<span class="types"><span class="type">function</span></span>
Function on node set position
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">druid.static_grid</span></span>
Current grid instance
</ol>
</dd>
</dl>
<h2 class="section-header "><a name="Tables"></a>Tables</h2>
<dl class="function">
<dt>
<a name = "style"></a>
<strong>style</strong>
</dt>
<dd>
Component style params.
You can override this component styles params in druid styles table
or create your own style
<h3>Fields:</h3>
<ul>
<li><span class="parameter">IS_DYNAMIC_NODE_POSES</span>
<span class="types"><span class="type">bool</span></span>
If true, always center grid content as grid pivot sets
(<em>default</em> false)
</li>
<li><span class="parameter">IS_ALIGN_LAST_ROW</span>
<span class="types"><span class="type">bool</span></span>
If true, always align last row of the grid as grid pivot sets
(<em>default</em> false)
</li>
</ul>
</dd>
</dl>
<h2 class="section-header "><a name="Fields"></a>Fields</h2>
<dl class="function">
<dt>
<a name = "anchor"></a>
<strong>anchor</strong>
</dt>
<dd>
Item anchor [0..1]
<ul>
<li><span class="parameter">anchor</span>
<span class="types"><span class="type">vector3</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "border"></a>
<strong>border</strong>
</dt>
<dd>
The size of item content
<ul>
<li><span class="parameter">border</span>
<span class="types"><span class="type">vector4</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "first_index"></a>
<strong>first_index</strong>
</dt>
<dd>
The first index of node in grid
<ul>
<li><span class="parameter">first_index</span>
<span class="types"><span class="type">number</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "last_index"></a>
<strong>last_index</strong>
</dt>
<dd>
The last index of node in grid
<ul>
<li><span class="parameter">last_index</span>
<span class="types"><span class="type">number</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "node_size"></a>
<strong>node_size</strong>
</dt>
<dd>
Item size
<ul>
<li><span class="parameter">node_size</span>
<span class="types"><span class="type">vector3</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "nodes"></a>
<strong>nodes</strong>
</dt>
<dd>
List of all grid nodes
<ul>
<li><span class="parameter">nodes</span>
<span class="types"><span class="type">node[]</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "on_add_item"></a>
<strong>on_add_item</strong>
</dt>
<dd>
On item add callback(self, node, index)
<ul>
<li><span class="parameter">on_add_item</span>
<span class="types"><span class="type">DruidEvent</span></span>
<a href="../modules/DruidEvent.html#">DruidEvent</a>
</li>
</ul>
</dd>
<dt>
<a name = "on_change_items"></a>
<strong>on_change_items</strong>
</dt>
<dd>
On item add, remove or change in_row callback(self, index|nil)
<ul>
<li><span class="parameter">on_change_items</span>
<span class="types"><span class="type">DruidEvent</span></span>
<a href="../modules/DruidEvent.html#">DruidEvent</a>
</li>
</ul>
</dd>
<dt>
<a name = "on_clear"></a>
<strong>on_clear</strong>
</dt>
<dd>
On grid clear callback(self)
<ul>
<li><span class="parameter">on_clear</span>
<span class="types"><span class="type">DruidEvent</span></span>
<a href="../modules/DruidEvent.html#">DruidEvent</a>
</li>
</ul>
</dd>
<dt>
<a name = "on_remove_item"></a>
<strong>on_remove_item</strong>
</dt>
<dd>
On item remove callback(self, index)
<ul>
<li><span class="parameter">on_remove_item</span>
<span class="types"><span class="type">DruidEvent</span></span>
<a href="../modules/DruidEvent.html#">DruidEvent</a>
</li>
</ul>
</dd>
<dt>
<a name = "on_update_positions"></a>
<strong>on_update_positions</strong>
</dt>
<dd>
On update item positions callback(self)
<ul>
<li><span class="parameter">on_update_positions</span>
<span class="types"><span class="type">DruidEvent</span></span>
<a href="../modules/DruidEvent.html#">DruidEvent</a>
</li>
</ul>
</dd>
<dt>
<a name = "parent"></a>
<strong>parent</strong>
</dt>
<dd>
Parent gui node
<ul>
<li><span class="parameter">parent</span>
<span class="types"><span class="type">node</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "pivot"></a>
<strong>pivot</strong>
</dt>
<dd>
Item pivot [-0.5..0.5]
<ul>
<li><span class="parameter">pivot</span>
<span class="types"><span class="type">vector3</span></span>
</li>
</ul>
</dd>
</dl>
</div> <!-- id="content" -->
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc TESTING</a></i>
<i style="float:right;">Last updated 2015-01-01 12:00:00 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>
</html>