Partydeck/Extension-Druid
3
0
Fork 0
mirror of https://github.com/Insality/druid.git synced 2025-06-27 10:27:47 +02:00
Code Issues Packages Projects Releases Wiki Activity
Extension-Druid/docs/modules/Scroll.html
Insality cebba9a1a3 Update documentation
2020-10-12 00:30:03 +03:00

1016 lines
24 KiB
HTML
Raw Blame History

<!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 Library</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/Blocker.html">Blocker</a></li>
<li><a href="../modules/Button.html">Button</a></li>
<li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Hover.html">Hover</a></li>
<li><strong>Scroll</strong></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/BaseComponent.html">BaseComponent</a></li>
<li><a href="../modules/druid.html">druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/Checkbox.html">Checkbox</a></li>
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
<li><a href="../modules/Input.html">Input</a></li>
<li><a href="../modules/LangText.html">LangText</a></li>
<li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
</ul>
</div>
<div id="content">
<h1>Module <code>Scroll</code></h1>
<p>Component to handle scroll content.</p>
<p>
Scroll consist from two nodes: scroll parent and scroll input
Scroll input the user input zone, it's static
Scroll parent the scroll moving part, it will change position.
Setup initial scroll size by changing scroll parent size. If scroll parent
size will be less than scroll_input size, no scroll is available. For scroll
parent size should be more than input size</p>
<h2><a href="#Functions">Functions</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#init">init(self, view_node, content_node)</a></td>
<td class="summary">Scroll constructor</td>
</tr>
<tr>
<td class="name" nowrap><a href="#scroll_to">scroll_to(self, point[, is_instant])</a></td>
<td class="summary">Start scroll to target point.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#scroll_to_index">scroll_to_index(self, index[, skip_cb])</a></td>
<td class="summary">Scroll to item in scroll by point index.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#scroll_to_percent">scroll_to_percent(self, percent[, is_instant])</a></td>
<td class="summary">Start scroll to target scroll percent</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_percent">get_percent(self)</a></td>
<td class="summary">Return current scroll progress status.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_size">set_size(self, size)</a></td>
<td class="summary">Set scroll content size.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_inert">set_inert(self, state)</a></td>
<td class="summary">Enable or disable scroll inert.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#is_inert">is_inert(self)</a></td>
<td class="summary">Return if scroll have inertion.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_extra_stretch_size">set_extra_stretch_size(self[, stretch_size=0])</a></td>
<td class="summary">Set extra size for scroll stretching.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_scroll_size">get_scroll_size(self)</a></td>
<td class="summary">Return vector of scroll size with width and height.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_points">set_points(self, points)</a></td>
<td class="summary">Set points of interest.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_horizontal_scroll">set_horizontal_scroll(self, state)</a></td>
<td class="summary">Lock or unlock horizontal scroll</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_vertical_scroll">set_vertical_scroll(self, state)</a></td>
<td class="summary">Lock or unlock vertical scroll</td>
</tr>
<tr>
<td class="name" nowrap><a href="#bind_grid">bind_grid(self, grid)</a></td>
<td class="summary">Bind the grid component (Static or Dynamic) to recalculate
scroll size on grid changes</td>
</tr>
<tr>
<td class="name" nowrap><a href="#_cancel_animate">_cancel_animate(self)</a></td>
<td class="summary">Cancel animation on other animation or input touch</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="#on_scroll">on_scroll</a></td>
<td class="summary">On scroll move callback(self, position)</td>
</tr>
<tr>
<td class="name" nowrap><a href="#on_scroll_to">on_scroll_to</a></td>
<td class="summary">On scroll_to function callback(self, target, is_instant)</td>
</tr>
<tr>
<td class="name" nowrap><a href="#on_point_scroll">on_point_scroll</a></td>
<td class="summary">On scroll_to_index function callback(self, index, point)</td>
</tr>
<tr>
<td class="name" nowrap><a href="#view_node">view_node</a></td>
<td class="summary">Scroll view node</td>
</tr>
<tr>
<td class="name" nowrap><a href="#content_node">content_node</a></td>
<td class="summary">Scroll content node</td>
</tr>
<tr>
<td class="name" nowrap><a href="#is_inert">is_inert</a></td>
<td class="summary">Flag, if scroll now moving by inertion</td>
</tr>
<tr>
<td class="name" nowrap><a href="#inertion">inertion</a></td>
<td class="summary">Current inert speed</td>
</tr>
<tr>
<td class="name" nowrap><a href="#position">position</a></td>
<td class="summary">Current scroll posisition</td>
</tr>
<tr>
<td class="name" nowrap><a href="#target_position">target_position</a></td>
<td class="summary">Current scroll target position</td>
</tr>
<tr>
<td class="name" nowrap><a href="#available_pos">available_pos</a></td>
<td class="summary">Available position for content node: (min_x, max_y, max_x, min_y)</td>
</tr>
<tr>
<td class="name" nowrap><a href="#available_size">available_size</a></td>
<td class="summary">Size of available positions: (width, height, 0)</td>
</tr>
<tr>
<td class="name" nowrap><a href="#drag">drag</a></td>
<td class="summary">Drag Druid component</td>
</tr>
<tr>
<td class="name" nowrap><a href="#selected">selected</a></td>
<td class="summary">Current index of points of interests</td>
</tr>
</table>
<br/>
<br/>
<h2 class="section-header "><a name="Functions"></a>Functions</h2>
<dl class="function">
<dt>
<a name = "init"></a>
<strong>init(self, view_node, content_node)</strong>
</dt>
<dd>
Scroll constructor
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Scroll</span></span>
</li>
<li><span class="parameter">view_node</span>
<span class="types"><span class="type">node</span></span>
GUI view scroll node
</li>
<li><span class="parameter">content_node</span>
<span class="types"><span class="type">node</span></span>
GUI content scroll node
</li>
</ul>
</dd>
<dt>
<a name = "scroll_to"></a>
<strong>scroll_to(self, point[, is_instant])</strong>
</dt>
<dd>
Start scroll to target point.
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Scroll</span></span>
</li>
<li><span class="parameter">point</span>
<span class="types"><span class="type">vector3</span></span>
Target point
</li>
<li><span class="parameter">is_instant</span>
<span class="types"><span class="type">bool</span></span>
Instant scroll flag
(<em>optional</em>)
</li>
</ul>
<h3>Usage:</h3>
<ul>
<li><pre class="example">scroll:scroll_to(vmath.vector3(<span class="number">0</span>, <span class="number">50</span>, <span class="number">0</span>))</pre></li>
<li><pre class="example">scroll:scroll_to(vmath.vector3(<span class="number">0</span>), <span class="keyword">true</span>)</pre></li>
</ul>
</dd>
<dt>
<a name = "scroll_to_index"></a>
<strong>scroll_to_index(self, index[, skip_cb])</strong>
</dt>
<dd>
Scroll to item in scroll by point index.
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Scroll</span></span>
</li>
<li><span class="parameter">index</span>
<span class="types"><span class="type">number</span></span>
Point index
</li>
<li><span class="parameter">skip_cb</span>
<span class="types"><span class="type">bool</span></span>
If true, skip the point callback
(<em>optional</em>)
</li>
</ul>
</dd>
<dt>
<a name = "scroll_to_percent"></a>
<strong>scroll_to_percent(self, percent[, is_instant])</strong>
</dt>
<dd>
Start scroll to target scroll percent
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Scroll</span></span>
</li>
<li><span class="parameter">percent</span>
<span class="types"><span class="type">vector3</span></span>
target percent
</li>
<li><span class="parameter">is_instant</span>
<span class="types"><span class="type">bool</span></span>
instant scroll flag
(<em>optional</em>)
</li>
</ul>
<h3>Usage:</h3>
<ul>
<pre class="example">scroll:scroll_to_percent(vmath.vector3(<span class="number">0.5</span>, <span class="number">0</span>, <span class="number">0</span>))</pre>
</ul>
</dd>
<dt>
<a name = "get_percent"></a>
<strong>get_percent(self)</strong>
</dt>
<dd>
Return current scroll progress status.
Values will be in [0..1] interval
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Scroll</span></span>
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">vector3</span></span>
New vector with scroll progress values
</ol>
</dd>
<dt>
<a name = "set_size"></a>
<strong>set_size(self, size)</strong>
</dt>
<dd>
Set scroll content size.
It will change content gui node size
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Scroll</span></span>
</li>
<li><span class="parameter">size</span>
<span class="types"><span class="type">vector3</span></span>
The new size for content node
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">druid.scroll</span></span>
Current scroll instance
</ol>
</dd>
<dt>
<a name = "set_inert"></a>
<strong>set_inert(self, state)</strong>
</dt>
<dd>
Enable or disable scroll inert.
If disabled, scroll through points (if exist)
If no points, just simple drag without inertion
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Scroll</span></span>
</li>
<li><span class="parameter">state</span>
<span class="types"><span class="type">bool</span></span>
Inert scroll state
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">druid.scroll</span></span>
Current scroll instance
</ol>
</dd>
<dt>
<a name = "is_inert"></a>
<strong>is_inert(self)</strong>
</dt>
<dd>
Return if scroll have inertion.
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Scroll</span></span>
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">bool</span></span>
If scroll have inertion
</ol>
</dd>
<dt>
<a name = "set_extra_stretch_size"></a>
<strong>set_extra_stretch_size(self[, stretch_size=0])</strong>
</dt>
<dd>
Set extra size for scroll stretching.
Set 0 to disable stretching effect
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Scroll</span></span>
</li>
<li><span class="parameter">stretch_size</span>
<span class="types"><span class="type">number</span></span>
Size in pixels of additional scroll area
(<em>default</em> 0)
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">druid.scroll</span></span>
Current scroll instance
</ol>
</dd>
<dt>
<a name = "get_scroll_size"></a>
<strong>get_scroll_size(self)</strong>
</dt>
<dd>
Return vector of scroll size with width and height.
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Scroll</span></span>
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">vector3</span></span>
Available scroll size
</ol>
</dd>
<dt>
<a name = "set_points"></a>
<strong>set_points(self, points)</strong>
</dt>
<dd>
Set points of interest.
Scroll will always centered on closer points
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Scroll</span></span>
</li>
<li><span class="parameter">points</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.6">table</a></span>
Array of vector3 points
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">druid.scroll</span></span>
Current scroll instance
</ol>
</dd>
<dt>
<a name = "set_horizontal_scroll"></a>
<strong>set_horizontal_scroll(self, state)</strong>
</dt>
<dd>
Lock or unlock horizontal scroll
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Scroll</span></span>
</li>
<li><span class="parameter">state</span>
<span class="types"><span class="type">bool</span></span>
True, if horizontal scroll is enabled
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">druid.scroll</span></span>
Current scroll instance
</ol>
</dd>
<dt>
<a name = "set_vertical_scroll"></a>
<strong>set_vertical_scroll(self, state)</strong>
</dt>
<dd>
Lock or unlock vertical scroll
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Scroll</span></span>
</li>
<li><span class="parameter">state</span>
<span class="types"><span class="type">bool</span></span>
True, if vertical scroll is enabled
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">druid.scroll</span></span>
Current scroll instance
</ol>
</dd>
<dt>
<a name = "bind_grid"></a>
<strong>bind_grid(self, grid)</strong>
</dt>
<dd>
Bind the grid component (Static or Dynamic) to recalculate
scroll size on grid changes
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Scroll</span></span>
</li>
<li><span class="parameter">grid</span>
<span class="types"><span class="type">StaticGrid</span> or <span class="type">DynamicGrid</span></span>
Druid grid component
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">druid.scroll</span></span>
Current scroll instance
</ol>
</dd>
<dt>
<a name = "_cancel_animate"></a>
<strong>_cancel_animate(self)</strong>
</dt>
<dd>
Cancel animation on other animation or input touch
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
</li>
</ul>
</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">FRICT</span>
<span class="types"><span class="type">number</span></span>
Multiplier for free inertion
(<em>default</em> 0)
</li>
<li><span class="parameter">FRICT_HOLD</span>
<span class="types"><span class="type">number</span></span>
Multiplier for inertion, while touching
(<em>default</em> 0)
</li>
<li><span class="parameter">INERT_THRESHOLD</span>
<span class="types"><span class="type">number</span></span>
Scroll speed to stop inertion
(<em>default</em> 3)
</li>
<li><span class="parameter">INERT_SPEED</span>
<span class="types"><span class="type">number</span></span>
Multiplier for inertion speed
(<em>default</em> 30)
</li>
<li><span class="parameter">POINTS_DEADZONE</span>
<span class="types"><span class="type">number</span></span>
Speed to check points of interests in no_inertion mode
(<em>default</em> 20)
</li>
<li><span class="parameter">BACK_SPEED</span>
<span class="types"><span class="type">number</span></span>
Scroll back returning lerp speed
(<em>default</em> 0.35)
</li>
<li><span class="parameter">ANIM_SPEED</span>
<span class="types"><span class="type">number</span></span>
Scroll gui.animation speed for scroll_to function
(<em>default</em> 0.2)
</li>
<li><span class="parameter">EXTRA_STRETCH_SIZE</span>
<span class="types"><span class="type">number</span></span>
extra size in pixels outside of scroll (stretch effect)
(<em>default</em> 0)
</li>
<li><span class="parameter">SMALL_CONTENT_SCROLL</span>
<span class="types"><span class="type">bool</span></span>
If true, content node with size less than view node size can be scrolled
(<em>default</em> false)
</li>
</ul>
</dd>
</dl>
<h2 class="section-header "><a name="Fields"></a>Fields</h2>
<dl class="function">
<dt>
<a name = "on_scroll"></a>
<strong>on_scroll</strong>
</dt>
<dd>
On scroll move callback(self, position)
<ul>
<li><span class="parameter">on_scroll</span>
<span class="types"><span class="type">druid_event</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "on_scroll_to"></a>
<strong>on_scroll_to</strong>
</dt>
<dd>
On scroll_to function callback(self, target, is_instant)
<ul>
<li><span class="parameter">on_scroll_to</span>
<span class="types"><span class="type">druid_event</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "on_point_scroll"></a>
<strong>on_point_scroll</strong>
</dt>
<dd>
On scroll_to_index function callback(self, index, point)
<ul>
<li><span class="parameter">on_point_scroll</span>
<span class="types"><span class="type">druid_event</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "view_node"></a>
<strong>view_node</strong>
</dt>
<dd>
Scroll view node
<ul>
<li><span class="parameter">view_node</span>
<span class="types"><span class="type">node</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "content_node"></a>
<strong>content_node</strong>
</dt>
<dd>
Scroll content node
<ul>
<li><span class="parameter">content_node</span>
<span class="types"><span class="type">node</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "is_inert"></a>
<strong>is_inert</strong>
</dt>
<dd>
Flag, if scroll now moving by inertion
<ul>
<li><span class="parameter">is_inert</span>
<span class="types"><span class="type">bool</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "inertion"></a>
<strong>inertion</strong>
</dt>
<dd>
Current inert speed
<ul>
<li><span class="parameter">inertion</span>
<span class="types"><span class="type">vector3</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "position"></a>
<strong>position</strong>
</dt>
<dd>
Current scroll posisition
<ul>
<li><span class="parameter">position</span>
<span class="types"><span class="type">vector3</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "target_position"></a>
<strong>target_position</strong>
</dt>
<dd>
Current scroll target position
<ul>
<li><span class="parameter">target_position</span>
<span class="types"><span class="type">vector3</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "available_pos"></a>
<strong>available_pos</strong>
</dt>
<dd>
Available position for content node: (min_x, max_y, max_x, min_y)
<ul>
<li><span class="parameter">available_pos</span>
<span class="types"><span class="type">vector4</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "available_size"></a>
<strong>available_size</strong>
</dt>
<dd>
Size of available positions: (width, height, 0)
<ul>
<li><span class="parameter">available_size</span>
<span class="types"><span class="type">vector3</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "drag"></a>
<strong>drag</strong>
</dt>
<dd>
Drag Druid component
<ul>
<li><span class="parameter">drag</span>
<span class="types"><span class="type">Drag</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "selected"></a>
<strong>selected</strong>
</dt>
<dd>
Current index of points of interests
<ul>
<li><span class="parameter">selected</span>
<span class="types"><span class="type">number</span></span>
(<em>optional</em>)
</li>
</ul>
</dd>
</dl>
</div> <!-- id="content" -->
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-10-12 00:29:49 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink