Updated documentation to 0.4.0

This commit is contained in:
Insality 2020-05-09 16:07:38 +03:00
parent 194fe6794f
commit db2ae32a19
37 changed files with 458 additions and 162 deletions

View File

@ -22,11 +22,12 @@ Or point to the ZIP file of a [specific release](https://github.com/Insality/dr
For **Druid** to work requires next input bindings: For **Druid** to work requires next input bindings:
- Mouse trigger - `Button 1` -> `touch` _For basic input components_ - Mouse trigger - `Button 1` -> `touch` _For basic input components_
- Key trigger - `Backspace` -> `key_backspace` _For back_handler component, input component_ - Key trigger - `Backspace` -> `key_backspace` _For back_handler component, input component_
- Key trigger - `Back` -> `key_back` _For back_handler component, Android back button, input component_ - Key trigger - `Back` -> `key_back` _For back_handler component, Android back button, input component_
- Key trigger - `Enter` -> `key_enter` _For input component, optional_ - Key trigger - `Enter` -> `key_enter` _For input component, optional_
- Key trigger - `Esc` -> `key_esc` _For input component, optional_ - Key trigger - `Esc` -> `key_esc` _For input component, optional_
- Touch triggers - `Touch multi` -> `multitouch` _For scroll component_
![](media/input_binding_2.png) ![](media/input_binding_2.png)
![](media/input_binding_1.png) ![](media/input_binding_1.png)
@ -61,7 +62,7 @@ druid.set_default_style(your_style)
-- Call this function on language changing in the game, -- Call this function on language changing in the game,
-- to retranslate all lang_text components: -- to retranslate all lang_text components:
druid.on_languge_change() druid.on_language_change()
-- Call this function on layout changing in the game, -- Call this function on layout changing in the game,
-- to reapply layouts -- to reapply layouts
@ -109,6 +110,8 @@ druid.on_window_callback(event)
- **[Swipe](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#swipe)** - System Druid component, handle swipe gestures on node - **[Swipe](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#swipe)** - System Druid component, handle swipe gestures on node
- **[Drag](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#drag)** - System Druid component, handle drag input on node
Full info see on _[components.md](https://github.com/Insality/druid/blob/master/docs_md/01-components.md)_ Full info see on _[components.md](https://github.com/Insality/druid/blob/master/docs_md/01-components.md)_
@ -183,7 +186,7 @@ end
- *on_input* used for almost all basic druid components - *on_input* used for almost all basic druid components
- *update* used for progress bar, scroll and timer base components - *update* used for progress bar, scroll and timer base components
- *on_message* used for specific druid events, like language change or layout change (TODO: in future) - *on_message* used for specific druid events, like language change or layout change
- *final* used for custom components, what have to do several action before destroy - *final* used for custom components, what have to do several action before destroy
Recommended is fully integrate al druid lifecycles functions Recommended is fully integrate al druid lifecycles functions
@ -223,13 +226,11 @@ _Will fill later_
## License ## License
Original created by [AGulev](https://github.com/AGulev) - Original created by [AGulev](https://github.com/AGulev)
- Developed and supporting by [Insality](https://github.com/Insality)
- Assets from [Kenney](http://www.kenney.nl/)
Developed and supporting by [Insality](https://github.com/Insality) **MIT** License
Assets from [Kenney](http://www.kenney.nl/)
MIT License
## Issues and suggestions ## Issues and suggestions

View File

@ -200,7 +200,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -83,13 +83,9 @@
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>
<table class="function_list"> <table class="function_list">
<tr>
<td class="name" nowrap><a href="#get_style">get_style()</a></td>
<td class="summary">Get current component style table</td>
</tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_style">set_style(style)</a></td> <td class="name" nowrap><a href="#set_style">set_style(style)</a></td>
<td class="summary">Set current component style table</td> <td class="summary">Set current component style table.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#get_template">get_template()</a></td> <td class="name" nowrap><a href="#get_template">get_template()</a></td>
@ -136,11 +132,19 @@
<td class="summary">Return druid with context of calling component.</td> <td class="summary">Return druid with context of calling component.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#setup_component">setup_component(table, table)</a></td> <td class="name" nowrap><a href="#is_child_of">is_child_of()</a></td>
<td class="summary">Return true, if current component is child of another component</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_name">get_name()</a></td>
<td class="summary">Return component name</td>
</tr>
<tr>
<td class="name" nowrap><a href="#setup_component">setup_component(table, table, table)</a></td>
<td class="summary">Setup component context and his style table</td> <td class="summary">Setup component context and his style table</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#Component.create">Component.create(name, interest)</a></td> <td class="name" nowrap><a href="#Component.create">Component.create(name[, interest={}])</a></td>
<td class="summary">Create new component.</td> <td class="summary">Create new component.</td>
</tr> </tr>
</table> </table>
@ -152,32 +156,14 @@
<h2 class="section-header "><a name="Functions"></a>Functions</h2> <h2 class="section-header "><a name="Functions"></a>Functions</h2>
<dl class="function"> <dl class="function">
<dt>
<a name = "get_style"></a>
<strong>get_style()</strong>
</dt>
<dd>
Get current component style table
<h3>Returns:</h3>
<ol>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.6">table</a></span>
Component style table
</ol>
</dd>
<dt> <dt>
<a name = "set_style"></a> <a name = "set_style"></a>
<strong>set_style(style)</strong> <strong>set_style(style)</strong>
</dt> </dt>
<dd> <dd>
Set current component style table Set current component style table.
Invoke <code>on_style_change</code> on component, if exist. Component should handle
their style changing and store all style params
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -414,10 +400,50 @@
</dd>
<dt>
<a name = "is_child_of"></a>
<strong>is_child_of()</strong>
</dt>
<dd>
Return true, if current component is child of another component
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">bool</span></span>
True, if current component is child of another
</ol>
</dd>
<dt>
<a name = "get_name"></a>
<strong>get_name()</strong>
</dt>
<dd>
Return component name
<h3>Returns:</h3>
<ol>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
The component name
</ol>
</dd> </dd>
<dt> <dt>
<a name = "setup_component"></a> <a name = "setup_component"></a>
<strong>setup_component(table, table)</strong> <strong>setup_component(table, table, table)</strong>
</dt> </dt>
<dd> <dd>
Setup component context and his style table Setup component context and his style table
@ -433,6 +459,10 @@
<span class="types"><span class="type">style</span></span> <span class="types"><span class="type">style</span></span>
Druid style module Druid style module
</li> </li>
<li><span class="parameter">table</span>
<span class="types"><span class="type">style</span></span>
Druid style module
</li>
</ul> </ul>
<h3>Returns:</h3> <h3>Returns:</h3>
@ -448,7 +478,7 @@
</dd> </dd>
<dt> <dt>
<a name = "Component.create"></a> <a name = "Component.create"></a>
<strong>Component.create(name, interest)</strong> <strong>Component.create(name[, interest={}])</strong>
</dt> </dt>
<dd> <dd>
Create new component. It will inheritance from basic Create new component. It will inheritance from basic
@ -464,6 +494,7 @@
<li><span class="parameter">interest</span> <li><span class="parameter">interest</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.6">table</a></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.6">table</a></span>
List of component's interest List of component's interest
(<em>default</em> {})
</li> </li>
</ul> </ul>
@ -479,7 +510,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -218,7 +218,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -237,7 +237,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -123,7 +123,7 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#Style">Style</a></td> <td class="name" nowrap><a href="#Style">Style</a></td>
<td class="summary">Component style params</td> <td class="summary">Component style params.</td>
</tr> </tr>
</table> </table>
@ -382,11 +382,28 @@
<strong>Style</strong> <strong>Style</strong>
</dt> </dt>
<dd> <dd>
Component style params Component style params.
You can override this component styles params in druid styles table
or create your own style
<h3>Fields:</h3> <h3>Fields:</h3>
<ul> <ul>
<li><span class="parameter">LONGTAP_TIME</span>
<span class="types"><span class="type">number</span></span>
Minimum time to trigger on<em>hold</em>callback
(<em>default</em> 0.4)
</li>
<li><span class="parameter">AUTOHOLD_TRIGGER</span>
<span class="types"><span class="type">number</span></span>
Maximum hold time to trigger button release while holding
(<em>default</em> 0.8)
</li>
<li><span class="parameter">DOUBLETAP_TIME</span>
<span class="types"><span class="type">number</span></span>
Time between double taps
(<em>default</em> 0.4)
</li>
<li><span class="parameter">on_click</span> <li><span class="parameter">on_click</span>
<span class="types"><span class="type">function</span></span> <span class="types"><span class="type">function</span></span>
(self, node) (self, node)
@ -399,6 +416,10 @@
<span class="types"><span class="type">function</span></span> <span class="types"><span class="type">function</span></span>
(self, node, hover_state) (self, node, hover_state)
</li> </li>
<li><span class="parameter">on_mouse_hover</span>
<span class="types"><span class="type">function</span></span>
(self, node, hover_state)
</li>
<li><span class="parameter">on_set_enabled</span> <li><span class="parameter">on_set_enabled</span>
<span class="types"><span class="type">function</span></span> <span class="types"><span class="type">function</span></span>
(self, node, enabled_state) (self, node, enabled_state)
@ -417,7 +438,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -111,7 +111,7 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#Style">Style</a></td> <td class="name" nowrap><a href="#Style">Style</a></td>
<td class="summary">Component style params</td> <td class="summary">Component style params.</td>
</tr> </tr>
</table> </table>
@ -257,7 +257,9 @@
<strong>Style</strong> <strong>Style</strong>
</dt> </dt>
<dd> <dd>
Component style params Component style params.
You can override this component styles params in druid styles table
or create your own style
<h3>Fields:</h3> <h3>Fields:</h3>
@ -280,7 +282,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -242,7 +242,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -107,7 +107,7 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#Style">Style</a></td> <td class="name" nowrap><a href="#Style">Style</a></td>
<td class="summary">Component style params</td> <td class="summary">Component style params.</td>
</tr> </tr>
</table> </table>
@ -256,7 +256,9 @@
<strong>Style</strong> <strong>Style</strong>
</dt> </dt>
<dd> <dd>
Component style params Component style params.
You can override this component styles params in druid styles table
or create your own style
<h3>Fields:</h3> <h3>Fields:</h3>
@ -264,6 +266,7 @@
<li><span class="parameter">DRAG_DEADZONE</span> <li><span class="parameter">DRAG_DEADZONE</span>
<span class="types"><span class="type">number</span></span> <span class="types"><span class="type">number</span></span>
Distance in pixels to start dragging Distance in pixels to start dragging
(<em>default</em> 10)
</li> </li>
</ul> </ul>
@ -279,7 +282,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -110,7 +110,7 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#clear">clear()</a></td> <td class="name" nowrap><a href="#clear">clear()</a></td>
<td class="summary">Clear all items from the grid</td> <td class="summary">Clear grid nodes array.</td>
</tr> </tr>
</table> </table>
<h2><a href="#Tables">Tables</a></h2> <h2><a href="#Tables">Tables</a></h2>
@ -275,7 +275,8 @@
<strong>clear()</strong> <strong>clear()</strong>
</dt> </dt>
<dd> <dd>
Clear all items from the grid Clear grid nodes array. GUI nodes will be not deleted!
If you want to delete GUI nodes, use grid.nodes array before grid:clear
@ -373,7 +374,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -298,7 +298,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -95,6 +95,10 @@
<td class="summary">Set hover state</td> <td class="summary">Set hover state</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_mouse_hover">set_mouse_hover(state)</a></td>
<td class="summary">Set mouse hover state</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_click_zone">set_click_zone(zone)</a></td> <td class="name" nowrap><a href="#set_click_zone">set_click_zone(zone)</a></td>
<td class="summary">Strict hover click area.</td> <td class="summary">Strict hover click area.</td>
</tr> </tr>
@ -159,6 +163,27 @@
</dd>
<dt>
<a name = "set_mouse_hover"></a>
<strong>set_mouse_hover(state)</strong>
</dt>
<dd>
Set mouse hover state
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">state</span>
<span class="types"><span class="type">bool</span></span>
The mouse hover state
</li>
</ul>
</dd> </dd>
<dt> <dt>
<a name = "set_click_zone"></a> <a name = "set_click_zone"></a>
@ -198,7 +223,11 @@
<ul> <ul>
<li><span class="parameter">on_hover</span> <li><span class="parameter">on_hover</span>
<span class="types"><span class="type">druid_event</span></span> <span class="types"><span class="type">druid_event</span></span>
On hover callback On hover callback (Touch pressed)
</li>
<li><span class="parameter">on_mouse_hover</span>
<span class="types"><span class="type">druid_event</span></span>
On mouse hover callback (Touch over without action_id)
</li> </li>
</ul> </ul>
@ -214,7 +243,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -329,7 +329,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -121,7 +121,7 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#Style">Style</a></td> <td class="name" nowrap><a href="#Style">Style</a></td>
<td class="summary">Component style params</td> <td class="summary">Component style params.</td>
</tr> </tr>
</table> </table>
@ -341,7 +341,9 @@
<strong>Style</strong> <strong>Style</strong>
</dt> </dt>
<dd> <dd>
Component style params Component style params.
You can override this component styles params in druid styles table
or create your own style
<h3>Fields:</h3> <h3>Fields:</h3>
@ -349,14 +351,12 @@
<li><span class="parameter">IS_LONGTAP_ERASE</span> <li><span class="parameter">IS_LONGTAP_ERASE</span>
<span class="types"><span class="type">bool</span></span> <span class="types"><span class="type">bool</span></span>
Is long tap will erase current input data Is long tap will erase current input data
</li> (<em>default</em> false)
<li><span class="parameter">BUTTON_SELECT_INCREASE</span>
<span class="types"><span class="type">number</span></span>
Button scale multiplier on selecting input field
</li> </li>
<li><span class="parameter">MASK_DEFAULT_CHAR</span> <li><span class="parameter">MASK_DEFAULT_CHAR</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
Default character mask for password input Default character mask for password input
(<em>default</em> *)
</li> </li>
<li><span class="parameter">on_select</span> <li><span class="parameter">on_select</span>
<span class="types"><span class="type">function</span></span> <span class="types"><span class="type">function</span></span>
@ -370,7 +370,7 @@
<span class="types"><span class="type">function</span></span> <span class="types"><span class="type">function</span></span>
(self, button_node) Callback on wrong user input (self, button_node) Callback on wrong user input
</li> </li>
<li><span class="parameter">button</span> <li><span class="parameter">button_style</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.6">table</a></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.6">table</a></span>
Custom button style for input node Custom button style for input node
</li> </li>
@ -388,7 +388,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -243,7 +243,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -125,7 +125,7 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#Style">Style</a></td> <td class="name" nowrap><a href="#Style">Style</a></td>
<td class="summary">Component style params</td> <td class="summary">Component style params.</td>
</tr> </tr>
</table> </table>
@ -355,7 +355,9 @@
<strong>Style</strong> <strong>Style</strong>
</dt> </dt>
<dd> <dd>
Component style params Component style params.
You can override this component styles params in druid styles table
or create your own style
<h3>Fields:</h3> <h3>Fields:</h3>
@ -363,10 +365,12 @@
<li><span class="parameter">SPEED</span> <li><span class="parameter">SPEED</span>
<span class="types"><span class="type">number</span></span> <span class="types"><span class="type">number</span></span>
Progress bas fill rate. More -> faster Progress bas fill rate. More -> faster
(<em>default</em> 5)
</li> </li>
<li><span class="parameter">MIN_DELTA</span> <li><span class="parameter">MIN_DELTA</span>
<span class="types"><span class="type">number</span></span> <span class="types"><span class="type">number</span></span>
Minimum step to fill progress bar Minimum step to fill progress bar
(<em>default</em> 0.005)
</li> </li>
</ul> </ul>
@ -382,7 +386,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -242,7 +242,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -122,7 +122,7 @@
<td class="summary">Return if scroll have inertion.</td> <td class="summary">Return if scroll have inertion.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_extra_strech_size">set_extra_strech_size(stretch_size)</a></td> <td class="name" nowrap><a href="#set_extra_strech_size">set_extra_strech_size([stretch_size=0])</a></td>
<td class="summary">Set extra size for scroll stretching.</td> <td class="summary">Set extra size for scroll stretching.</td>
</tr> </tr>
<tr> <tr>
@ -146,7 +146,7 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#Style">Style</a></td> <td class="name" nowrap><a href="#Style">Style</a></td>
<td class="summary">Component style params</td> <td class="summary">Component style params.</td>
</tr> </tr>
</table> </table>
@ -369,7 +369,7 @@
</dd> </dd>
<dt> <dt>
<a name = "set_extra_strech_size"></a> <a name = "set_extra_strech_size"></a>
<strong>set_extra_strech_size(stretch_size)</strong> <strong>set_extra_strech_size([stretch_size=0])</strong>
</dt> </dt>
<dd> <dd>
Set extra size for scroll stretching. Set extra size for scroll stretching.
@ -381,6 +381,7 @@
<li><span class="parameter">stretch_size</span> <li><span class="parameter">stretch_size</span>
<span class="types"><span class="type">number</span></span> <span class="types"><span class="type">number</span></span>
Size in pixels of additional scroll area Size in pixels of additional scroll area
(<em>default</em> 0)
</li> </li>
</ul> </ul>
@ -543,46 +544,57 @@
<strong>Style</strong> <strong>Style</strong>
</dt> </dt>
<dd> <dd>
Component style params Component style params.
You can override this component styles params in druid styles table
or create your own style
<h3>Fields:</h3> <h3>Fields:</h3>
<ul> <ul>
<li><span class="parameter">FRICT_HOLD</span>
<span class="types"><span class="type">number</span></span>
Multiplier for inertion, while touching
</li>
<li><span class="parameter">FRICT</span> <li><span class="parameter">FRICT</span>
<span class="types"><span class="type">number</span></span> <span class="types"><span class="type">number</span></span>
Multiplier for free inertion 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>
<li><span class="parameter">INERT_THRESHOLD</span> <li><span class="parameter">INERT_THRESHOLD</span>
<span class="types"><span class="type">number</span></span> <span class="types"><span class="type">number</span></span>
Scroll speed to stop inertion Scroll speed to stop inertion
(<em>default</em> 3)
</li> </li>
<li><span class="parameter">INERT_SPEED</span> <li><span class="parameter">INERT_SPEED</span>
<span class="types"><span class="type">number</span></span> <span class="types"><span class="type">number</span></span>
Multiplier for inertion speed Multiplier for inertion speed
(<em>default</em> 30)
</li> </li>
<li><span class="parameter">POINTS_DEADZONE</span> <li><span class="parameter">POINTS_DEADZONE</span>
<span class="types"><span class="type">number</span></span> <span class="types"><span class="type">number</span></span>
Speed to check points of interests in no_inertion mode Speed to check points of interests in no_inertion mode
(<em>default</em> 20)
</li> </li>
<li><span class="parameter">BACK_SPEED</span> <li><span class="parameter">BACK_SPEED</span>
<span class="types"><span class="type">number</span></span> <span class="types"><span class="type">number</span></span>
Scroll back returning lerp speed Scroll back returning lerp speed
(<em>default</em> 0.35)
</li> </li>
<li><span class="parameter">ANIM_SPEED</span> <li><span class="parameter">ANIM_SPEED</span>
<span class="types"><span class="type">number</span></span> <span class="types"><span class="type">number</span></span>
Scroll gui.animation speed for scroll_to function Scroll gui.animation speed for scroll_to function
(<em>default</em> 0.2)
</li> </li>
<li><span class="parameter">EXTRA_STRECH_SIZE</span> <li><span class="parameter">EXTRA_STRECH_SIZE</span>
<span class="types"><span class="type">number</span></span> <span class="types"><span class="type">number</span></span>
extra size in pixels outside of scroll (stretch effect) extra size in pixels outside of scroll (stretch effect)
(<em>default</em> 0)
</li> </li>
<li><span class="parameter">SMALL_CONTENT_SCROLL</span> <li><span class="parameter">SMALL_CONTENT_SCROLL</span>
<span class="types"><span class="type">bool</span></span> <span class="types"><span class="type">bool</span></span>
If true, content node with size less than view node size can be scrolled If true, content node with size less than view node size can be scrolled
(<em>default</em> false)
</li> </li>
</ul> </ul>
@ -598,7 +610,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -281,7 +281,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -106,7 +106,7 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#Style">Style</a></td> <td class="name" nowrap><a href="#Style">Style</a></td>
<td class="summary">Component style params</td> <td class="summary">Component style params.</td>
</tr> </tr>
</table> </table>
@ -220,7 +220,9 @@
<strong>Style</strong> <strong>Style</strong>
</dt> </dt>
<dd> <dd>
Component style params Component style params.
You can override this component styles params in druid styles table
or create your own style
<h3>Fields:</h3> <h3>Fields:</h3>
@ -228,14 +230,17 @@
<li><span class="parameter">SWIPE_TIME</span> <li><span class="parameter">SWIPE_TIME</span>
<span class="types"><span class="type">number</span></span> <span class="types"><span class="type">number</span></span>
Maximum time for swipe trigger Maximum time for swipe trigger
(<em>default</em> 0.4)
</li> </li>
<li><span class="parameter">SWIPE_THRESHOLD</span> <li><span class="parameter">SWIPE_THRESHOLD</span>
<span class="types"><span class="type">number</span></span> <span class="types"><span class="type">number</span></span>
Minimum distance for swipe trigger Minimum distance for swipe trigger
(<em>default</em> 50)
</li> </li>
<li><span class="parameter">SWIPE_TRIGGER_ON_MOVE</span> <li><span class="parameter">SWIPE_TRIGGER_ON_MOVE</span>
<span class="types"><span class="type">bool</span></span> <span class="types"><span class="type">bool</span></span>
If true, trigger on swipe moving, not only release action If true, trigger on swipe moving, not only release action
(<em>default</em> false)
</li> </li>
</ul> </ul>
@ -251,7 +256,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -407,7 +407,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -296,7 +296,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -242,7 +242,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -211,6 +211,10 @@
<td class="name" nowrap><a href="#druid:new_swipe">druid:new_swipe(...)</a></td> <td class="name" nowrap><a href="#druid:new_swipe">druid:new_swipe(...)</a></td>
<td class="summary">Create swipe basic component</td> <td class="summary">Create swipe basic component</td>
</tr> </tr>
<tr>
<td class="name" nowrap><a href="#druid:new_drag">druid:new_drag(...)</a></td>
<td class="summary">Create drag basic component</td>
</tr>
</table> </table>
<br/> <br/>
@ -874,6 +878,33 @@
</dd>
<dt>
<a name = "druid:new_drag"></a>
<strong>druid:new_drag(...)</strong>
</dt>
<dd>
Create drag basic component
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">...</span>
<span class="types"><span class="type">args</span></span>
drag init args
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">Componetn</span></span>
drag component
</ol>
</dd> </dd>
</dl> </dl>
@ -882,7 +913,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -48,6 +48,7 @@
<li><a href="#Grid">Grid </a></li> <li><a href="#Grid">Grid </a></li>
<li><a href="#Hover">Hover </a></li> <li><a href="#Hover">Hover </a></li>
<li><a href="#Swipe">Swipe </a></li> <li><a href="#Swipe">Swipe </a></li>
<li><a href="#Drag">Drag </a></li>
</ul> </ul>
@ -158,7 +159,7 @@ Where node name is name of node from GUI scene. You can use <code>node_name</cod
<p><a name="Blocker"></a></p> <p><a name="Blocker"></a></p>
<h2>Blocker</h2> <h2>Blocker</h2>
<p><a href="https://insality.github.io/druid/modules/druid.button.html">Blocker API here</a></p> <p><a href="https://insality.github.io/druid/modules/druid.blocker.html">Blocker API here</a></p>
<h3>Overview</h3> <h3>Overview</h3>
<p>Druid component for block input. Use it to block input in special zone.</p> <p>Druid component for block input. Use it to block input in special zone.</p>
@ -211,32 +212,35 @@ Where node name is name of node from GUI scene. You can use <code>node_name</cod
<p>Basic Druid scroll component. Handle all scrolling stuff in druid GUI</p> <p>Basic Druid scroll component. Handle all scrolling stuff in druid GUI</p>
<h3>Setup</h3> <h3>Setup</h3>
<p>Create scroll component with druid: <code>scroll = druid:new_scroll(scroll_parent, scroll_input)</code>.</p> <p>Create scroll component with druid: <code>scroll = druid:new_scroll(view_node, content_node)</code>.</p>
<p><em>Scroll parent</em> - is dynamic part. This node will change position by scroll system</p> <p><em>View</em>node_ - is static part. It capturing user input and recognize scrolling touches</p>
<p><em>Scroll input</em> - is static part. It capturing user input and recognize scrolling touches</p> <p><em>Content</em>node_ - is dynamic part. This node will change position by scroll system</p>
<p>Initial scroll size will be equal to <em>scroll parent</em> node size. The initial view box will be equal to <em>scroll input</em> node size</p> <p>Initial scroll size will be equal to <em>content</em>node_ node size. The initial view box will be equal to <em>view</em>node_ node size</p>
<p>Usually, Place static input zone part, and as children add scroll parent part: <p>Usually, Place <em>view</em>node_ and as children add <em>content</em>node_:
<img src="../media/scroll_scheme.png" alt=""/> <img src="../media/scroll_scheme.png" alt=""/>
<img src="../media/scroll_outline.png" alt=""/></p> <img src="../media/scroll_outline.png" alt=""/></p>
<p>*Here scroll<em>content</em>zone below input zone, in game content zone be able to scroll left until end*</p> <p>*Here content<em>node below view</em>node, in game content_node be able to scroll left until end*</p>
<h3>Notes</h3> <h3>Notes</h3>
<p>- Scroll by default style have inertion and "back moving". It can be adjust via scroll <a href="https://insality.github.io/druid/modules/druid.scroll.html#Style">style settings</a> <p>- Scroll by default style have inertion and extra size for strecthing effect. It can be adjust via scroll <a href="https://insality.github.io/druid/modules/druid.scroll.html#Style">style settings</a>
- You can setup "points of interest". Scroll always will be centered on closes point of interest. It is able to create slider without inertion and points of interest on each scroll element. - You can setup "points of interest". Scroll always will be centered on closes point of interest. It is able to create slider without inertion and points of interest on each scroll element.
- Scroll have next events:</p> - Scroll have next events:</p>
<pre> <pre>
- *on_scroll* On scroll move callback - *on_scroll* (self, position) On scroll move callback
- *on_scroll_to* On scroll_to <span class="keyword">function</span> callback - *on_scroll_to* (self, position, is_instant) On scroll_to <span class="keyword">function</span> callback
- *on_point_scroll* On scroll_to_index <span class="keyword">function</span> callback - *on_point_scroll* (self, item_index, position) On scroll_to_index <span class="keyword">function</span> callback
</pre> </pre>
<p>- You can adjust scroll content size by <code>scroll:set_border(node_size)</code>. It will setup new size to content node.</p> <p>- You can adjust scroll content size by <code>scroll:set_size(node_size)</code>. It will setup new size to <em>content node</em>
- You can enabled or disable inertion mode via <code>scroll:set_intert(state)</code>
- You can adjust extra stretch size via <code>scroll:set_extra_stretch_size</code>
- Multitouch is required for scroll. Scroll is correctly handling touch_id swap while dragging scroll</p>
<p><a name="Progress"></a></p> <p><a name="Progress"></a></p>
@ -361,7 +365,7 @@ Key is value from druid const: const.SIDE.X (or just "x") or const.SIDE.Y (or ju
<p>Component for manage node positions. Very simple implementation for nodes with equal size</p> <p>Component for manage node positions. Very simple implementation for nodes with equal size</p>
<h3>Setup</h3> <h3>Setup</h3>
<p>Create grid component with druid: <code>grid = druid:new_grid(parent_node, prefab_node, max_in_row_elements)</code></p> <p>Create component with druid: <code>grid = druid:new_grid(parent_node, prefab_node, max_in_row_elements)</code></p>
<h3>Notes</h3> <h3>Notes</h3>
<p>- Grid on <em>adding elements</em> will setup parent to <em>parent</em>node_ <p>- Grid on <em>adding elements</em> will setup parent to <em>parent</em>node_
@ -381,6 +385,8 @@ Key is value from druid const: const.SIDE.X (or just "x") or const.SIDE.Y (or ju
<p>Create hover component with druid: <code>hover = druid:new_hover(node, callback)</code></p> <p>Create hover component with druid: <code>hover = druid:new_hover(node, callback)</code></p>
<h3>Notes</h3> <h3>Notes</h3>
<p>- By default, hover handles <em>hover event</em> with pressed touch action_id. So it's mean, what mouse or touch have to be pressed
- On desktop platforms there is <em>on</em>mouse<em>hover</em> event. It's event on mouse hover without any action id</p>
<p><a name="Swipe"></a></p> <p><a name="Swipe"></a></p>
@ -391,7 +397,7 @@ Key is value from druid const: const.SIDE.X (or just "x") or const.SIDE.Y (or ju
<p>System Druid component, handle swipe actions on node</p> <p>System Druid component, handle swipe actions on node</p>
<h3>Setup</h3> <h3>Setup</h3>
<p>Create hover component with druid: <code>hover = druid:new_swipe(node, swipe_callback)</code></p> <p>Create swipe component with druid: <code>hover = druid:new_swipe(node, swipe_callback)</code></p>
<h3>Notes</h3> <h3>Notes</h3>
<p>- Swipe callback have next params: (self, swipe_side, distance, time)</p> <p>- Swipe callback have next params: (self, swipe_side, distance, time)</p>
@ -404,16 +410,60 @@ Key is value from druid const: const.SIDE.X (or just "x") or const.SIDE.Y (or ju
</pre> </pre>
<p>- Swipe trigger only, if all input actions was on swipe node. If action will be outside of node, swipe status will be reseted <p>- Swipe trigger only, if all input actions was on swipe node. If action will be outside of node, swipe status will be reseted
- In swipe style table you can adjust minimal distance and maximum time to trigger swipe - In swipe style table you can adjust minimal distance and maximum time to trigg- Hover state trigger only with touch on mobile devices or button mouse holding. Just mouse over swipe
- In swipe style table you can toggle type of swipe triggering. if SWIPE<em>TRIGGER</em>ON_MOVE setup to true - swipe will trigger as swipe can be triggered. If setup to false - swipe will trigger only on released action - In swipe style table you can toggle type of swipe triggering. if SWIPE<em>TRIGGER</em>ON_MOVE setup to true - swipe will trigger as swipe can be triggered. If setup to false - swipe will trigger only on released action
- If you have stencil on swipe node and you don't want trigger it outside of stencil node, you can use <a href="../modules/druid.swipe.html#set_click_zone">swipe:set_click_zone</a> to restrict swipe zone</p> - If you have stencil on swipe node and you don't want trigger it outside of stencil node, you can use <a href="../modules/druid.swipe.html#set_click_zone">swipe:set_click_zone</a> to restrict swipe zonethout buttons is now not allowed.</p>
<p><a name="Drag"></a></p>
<h2>Drag</h2>
<p><a href="https://insality.github.io/druid/modules/druid.drag.html">Drag API here</a></p>
<h3>Overview</h3>
<p>System Druid component, handle drag actions on node</p>
<h3>Setup</h3>
<p>Create drag component with druid: <code>hover = druid:new_drag(node, drag_callback)</code></p>
<h3>Notes</h3>
<p>- Drag callback have next params: (self, swipe_side, distance, time)</p>
<pre>
- **self**: Druid self context
- **dx**: *number* - delta x position
- **dy**: *number* - delta y position
</pre>
<p>- In styles, you can point the drag start deadzone. Default value is 10 pixels
- Drag correctly process multitouch. You can switch touch_id, while dragging on node with correct <em>dx</em> and <em>dy</em> values (made for correct scrolling)
- You can restrict horizontal or vertical dragging by setting <code>drag.can_x</code> or <code>drag.can_y</code> to <em>false</em> value
- You can get info about current drag state:</p>
<pre>
- _is_touch_ - Is currently node touching
- _is_drag_ - Is currently node is dragging
- _x_ <span class="keyword">and</span> _y_ - Current touch position
- _touch_start_pos_ - Touch stat positions
</pre>
<p>- Drag have next events:</p>
<pre>
- _on_touch_start_ (self) - Event on touch start
- _on_touch_end_ (self) - Event on touch <span class="keyword">end</span>
- _on_drag_start_ (self) - Event on drag start
- _on_drag_ (self, dx, dy) - Event on drag process
- _on_drag_end_ (self) - Event on drag <span class="keyword">end</span>
</pre>
<p>- Drag node zone can be restricted via <code>drag:set_click_zone(node)</code></p>
</div> <!-- id="content" --> </div> <!-- id="content" -->
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -113,6 +113,10 @@
</span><span class="keyword">function</span> M.on_input(self, action_id, action) </span><span class="keyword">function</span> M.on_input(self, action_id, action)
<span class="keyword">end</span> <span class="keyword">end</span>
<span class="comment">-- Call on component creation and on component:set_style() function
</span><span class="keyword">function</span> M.on_style_change(self, style)
<span class="keyword">end</span>
<span class="comment">-- Call only if exist interest: const.ON_MESSAGE <span class="comment">-- Call only if exist interest: const.ON_MESSAGE
</span><span class="keyword">function</span> M.on_message(self, message_id, message, sender) </span><span class="keyword">function</span> M.on_message(self, message_id, message, sender)
<span class="keyword">end</span> <span class="keyword">end</span>
@ -226,10 +230,6 @@ There is next interests in druid:
<span class="comment">-- Button self on callback is self of _this_ component <span class="comment">-- Button self on callback is self of _this_ component
</span> <span class="keyword">local</span> button = druid:new_button(...) </span> <span class="keyword">local</span> button = druid:new_button(...)
<span class="comment">-- helper can return you the component style for current component
</span> <span class="comment">-- It return by component name from
</span> <span class="keyword">local</span> my_style = self:get_style()
<span class="keyword">end</span> <span class="keyword">end</span>
</pre> </pre>
@ -245,7 +245,7 @@ There is next interests in druid:
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -34,6 +34,7 @@
<ul> <ul>
<li><a href="#Overview">Overview </a></li> <li><a href="#Overview">Overview </a></li>
<li><a href="#Usage">Usage </a></li> <li><a href="#Usage">Usage </a></li>
<li><a href="#Create_your_own_styles">Create your own styles </a></li>
</ul> </ul>
@ -90,7 +91,8 @@
<p><a name="Usage"></a></p> <p><a name="Usage"></a></p>
<h2>Usage</h2> <h2>Usage</h2>
<p>Setup default druid style for all druid instances via <a href="../modules/druid.html#set_default_style">druid.set_default_style</a></p> <p>Setup default druid style for all druid instances via <a href="../modules/druid.html#set_default_style">druid.set_default_style</a>
You can pass <em>nil</em> or <em>empty</em>table_ to use default values for all components (no styles)</p>
<pre> <pre>
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>) <span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
@ -131,11 +133,29 @@
<p><a name="Create_your_own_styles"></a></p>
<h2>Create your own styles</h2>
<p>The most components have their styles. You can explore it on <a href="https://insality.github.io/druid/">Druid API</a> in table style section (<a href="https://insality.github.io/druid/modules/druid.button.html#Style">button example</a>). Or you can see, what fields component uses in code in function <code>on_style_change</code></p>
<p>To create you style, create lua module, what return &lt;<em>component</em>name_, <em>component</em>style_> table</p>
<p>Example: <a href="https://github.com/Insality/druid/blob/develop/druid/styles/default/style.lua">default druid style</a></p>
<p>Override all fields you want and set your style with one of next ways:</p>
<ul>
<li>Set your style as global via <a href="../modules/druid.html#set_default_style">druid.set_default_style</a></li>
<li>Set style for concrete druid instance via <code>druid = druid.new(self, style)</code></li>
<li>Set style for concrete instance via <code>component:set_style(style)</code></li>
</ul>
</div> <!-- id="content" --> </div> <!-- id="content" -->
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -92,7 +92,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -90,7 +90,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -116,6 +116,7 @@
<li>Key trigger - <code>Back</code> -> <code>key_back</code> <em>For back</em>handler component, Android back button, input component_</li> <li>Key trigger - <code>Back</code> -> <code>key_back</code> <em>For back</em>handler component, Android back button, input component_</li>
<li>Key trigger - <code>Enter</code> -> <code>key_enter</code> <em>For input component, optional</em></li> <li>Key trigger - <code>Enter</code> -> <code>key_enter</code> <em>For input component, optional</em></li>
<li>Key trigger - <code>Esc</code> -> <code>key_esc</code> <em>For input component, optional</em></li> <li>Key trigger - <code>Esc</code> -> <code>key_esc</code> <em>For input component, optional</em></li>
<li>Touch triggers - <code>Touch multi</code> -> <code>multitouch</code> <em>For scroll component</em></li>
</ul> </ul>
<p><img src="media/input_binding_2.png" alt=""/> <p><img src="media/input_binding_2.png" alt=""/>
@ -152,7 +153,7 @@
<span class="comment">-- Call this function on language changing in the game, <span class="comment">-- Call this function on language changing in the game,
</span><span class="comment">-- to retranslate all lang_text components: </span><span class="comment">-- to retranslate all lang_text components:
</span>druid.on_languge_change() </span>druid.on_language_change()
<span class="comment">-- Call this function on layout changing in the game, <span class="comment">-- Call this function on layout changing in the game,
</span><span class="comment">-- to reapply layouts </span><span class="comment">-- to reapply layouts
@ -187,6 +188,7 @@
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#grid">Grid</a></strong> - Component for manage node positions </p></li> <li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#grid">Grid</a></strong> - Component for manage node positions </p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#hover">Hover</a></strong> - System Druid component, handle hover node state</p></li> <li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#hover">Hover</a></strong> - System Druid component, handle hover node state</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#swipe">Swipe</a></strong> - System Druid component, handle swipe gestures on node</p></li> <li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#swipe">Swipe</a></strong> - System Druid component, handle swipe gestures on node</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#drag">Drag</a></strong> - System Druid component, handle drag input on node </p></li>
</ul> </ul>
<p>Full info see on <em><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md">components.md</a></em></p> <p>Full info see on <em><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md">components.md</a></em></p>
@ -271,7 +273,7 @@
<ul> <ul>
<li>*on_input* used for almost all basic druid components</li> <li>*on_input* used for almost all basic druid components</li>
<li><em>update</em> used for progress bar, scroll and timer base components</li> <li><em>update</em> used for progress bar, scroll and timer base components</li>
<li>*on_message* used for specific druid events, like language change or layout change (TODO: in future)</li> <li>*on_message* used for specific druid events, like language change or layout change</li>
<li><em>final</em> used for custom components, what have to do several action before destroy</li> <li><em>final</em> used for custom components, what have to do several action before destroy</li>
</ul> </ul>
@ -319,13 +321,13 @@ https://insality.github.io/druid/</p>
<p><a name="License"></a></p> <p><a name="License"></a></p>
<h2>License</h2> <h2>License</h2>
<p>Original created by <a href="https://github.com/AGulev">AGulev</a></p> <ul>
<li>Original created by <a href="https://github.com/AGulev">AGulev</a></li>
<li>Developed and supporting by <a href="https://github.com/Insality">Insality</a></li>
<li>Assets from <a href="http://www.kenney.nl/">Kenney</a></li>
</ul>
<p>Developed and supporting by <a href="https://github.com/Insality">Insality</a></p> <p><strong>MIT</strong> License</p>
<p>Assets from <a href="http://www.kenney.nl/">Kenney</a></p>
<p>MIT License</p>
<p><a name="Issues_and_suggestions"></a></p> <p><a name="Issues_and_suggestions"></a></p>
@ -337,7 +339,7 @@ https://insality.github.io/druid/</p>
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -140,21 +140,52 @@
<li><p>Druid <em>Scroll</em> component fully reworked. Input logic moved to <em>Drag</em> component</p> <li><p>Druid <em>Scroll</em> component fully reworked. Input logic moved to <em>Drag</em> component</p>
<pre> <pre>
- Updated scroll documentation - Update scroll documentation
- Changed constructor order params - Change constructor order params
- Change _scroll:set_border_ to _scroll:set_size_
- Scroll now contains from view <span class="keyword">and</span> content node - Scroll now contains from view <span class="keyword">and</span> content node
- _View node_ - static node, which size determine the <span class="string">"camera"</span> zone - _View node_ - static node, which size determine the <span class="string">"camera"</span> zone
- _Content node_ - dynamic node, moving by _Scroll_ component - _Content node_ - dynamic node, moving by _Scroll_ component
- Scroll will be disabled only <span class="keyword">if</span> content size equals to view size (by width <span class="keyword">or</span> height separatly) - Scroll will be disabled only <span class="keyword">if</span> content size equals to view size (by width <span class="keyword">or</span> height separatly)
- You can adjust scroll size via _.gui_ scene. Just setup correct node size - You can adjust start scroll size via _.gui_ scene. Just setup correct node size
- Different anchoring is supported (<span class="keyword">for</span> easier layout) - Different anchoring is supported (<span class="keyword">for</span> easier layouting)
- Function _scroll_to_ now accept position relative to _content node_. It's more easier <span class="keyword">for</span> handling. _Example:_ <span class="keyword">if</span> you have children node of _content_node_, you can pass this node position to scroll to this. - Function _scroll_to_ now accept position relative to _content node_. It's more easier <span class="keyword">for</span> handling. _Example:_ <span class="keyword">if</span> you have children node of _content_node_, you can pass this node position to scroll to this.
- **Resolve #<span class="number">52</span>**: _Content node size_ now can be less than _view node size_. In this case, content will be scrolled only inside _view size_ - **Resolve #<span class="number">52</span>**: _Content node size_ now can be less than _view node size_. In this case, content will be scrolled only inside _view size_ (can be disabled via style field: _SMALL_CONTENT_SCROLL_)
- **Fix #<span class="number">50</span>**: If style:SOFT_ZONE_SIZE equals to [<span class="number">0.</span>.<span class="number">1</span>], scroll can be disappeared - **Fix #<span class="number">50</span>**: If style:SOFT_ZONE_SIZE equals to [<span class="number">0.</span>.<span class="number">1</span>], scroll can be disappeared
</pre> </pre>
</li> </li>
<li><p><em>Grid</em> anchor by default equals to node pivot (so, more gui settings in <em>.gui</em> settings)</p></li> <li><p>Druid <em>Grid</em> Update</p>
<pre>
- Anchor by default equals to node pivot (so, more component settings <span class="keyword">in</span> _.gui_ settings) (#<span class="number">51</span>)
- Function <span class="backtick"><a href="../modules/druid.grid.html#clear">grid:clear</a></span> now don't delete any GUI nodes. Druid will <span class="keyword">not</span> care about <span class="backtick"><code>gui.delete_node</code></span> logic anymore (#<span class="number">56</span>)
</pre>
</li>
<li><p>Druid <em>Hover</em> component now have two <em>hover</em> events (#49):</p>
<pre>
- _on_hover_ is usual hover event. Trigger only <span class="keyword">if</span> touch <span class="keyword">or</span> mouse action_id pressed on node
- _on_mouse_hover_ action on node without action_id (desktop mouse over). Works only on desktop platform
</pre>
</li>
<li><p>Styles update:</p>
<pre>
- Styles <span class="global">table</span> now can be empty, every component have their default style values
- Remove <span class="backtick"><code>component:get_style</code></span> <span class="keyword">function</span>. Now style can be only set
- To get style values <span class="keyword">in</span> component, add <span class="backtick"><code>component:on_style_change</code></span> <span class="keyword">function</span>. It's invoked on <span class="backtick"><a href="../modules/component.html#set_style">component:set_style</a></span> <span class="keyword">function</span>
- You can look up default values inside <span class="backtick"><code>component:on_style_change</code></span> <span class="keyword">function</span> <span class="keyword">or</span> style component API on Druid API
</pre>
</li>
<li><p>Druid update:</p>
<pre>
- Now <span class="keyword">function</span> <span class="backtick"><code>druid:remove</code></span> remove instance <span class="keyword">and</span> all instance children components. No more manual deleting child components (#<span class="number">41</span>)
</pre>
</li>
<li><p><strong>Fix:</strong> Blocker component bug (blocker had very high priority, so it's block even button components, created after bloker)</p></li> <li><p><strong>Fix:</strong> Blocker component bug (blocker had very high priority, so it's block even button components, created after bloker)</p></li>
<li><p><strong>Fix #58:</strong> Bug, when druid instance should be always named <a href="../modules/druid.html#">druid</a> (ex: <code>self.druid = druid.new(self)</code>)</p></li>
<li><p><strong>Fix #53:</strong> Bug with final <em>Druid instance</em> without any components</p></li>
</ul> </ul>
@ -162,7 +193,7 @@
</div> <!-- id="main" --> </div> <!-- id="main" -->
<div id="about"> <div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i> <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-05-04 00:51:46 </i> <i style="float:right;">Last updated 2020-05-09 16:07:15 </i>
</div> <!-- id="about" --> </div> <!-- id="about" -->
</div> <!-- id="container" --> </div> <!-- id="container" -->
</body> </body>

View File

@ -51,7 +51,7 @@ Create text node with druid: `text = druid:new_text(node_name, [initial_value],
## Blocker ## Blocker
[Blocker API here](https://insality.github.io/druid/modules/druid.button.html) [Blocker API here](https://insality.github.io/druid/modules/druid.blocker.html)
### Overview ### Overview
Druid component for block input. Use it to block input in special zone. Druid component for block input. Use it to block input in special zone.
@ -101,28 +101,31 @@ Create lang text component with druid `text = druid:new_lang_text(node_name, loc
Basic Druid scroll component. Handle all scrolling stuff in druid GUI Basic Druid scroll component. Handle all scrolling stuff in druid GUI
### Setup ### Setup
Create scroll component with druid: `scroll = druid:new_scroll(scroll_parent, scroll_input)`. Create scroll component with druid: `scroll = druid:new_scroll(view_node, content_node)`.
_Scroll parent_ - is dynamic part. This node will change position by scroll system _View_node_ - is static part. It capturing user input and recognize scrolling touches
_Scroll input_ - is static part. It capturing user input and recognize scrolling touches _Content_node_ - is dynamic part. This node will change position by scroll system
Initial scroll size will be equal to _scroll parent_ node size. The initial view box will be equal to _scroll input_ node size Initial scroll size will be equal to _content_node_ node size. The initial view box will be equal to _view_node_ node size
Usually, Place static input zone part, and as children add scroll parent part: Usually, Place _view_node_ and as children add _content_node_:
![](../media/scroll_scheme.png) ![](../media/scroll_scheme.png)
![](../media/scroll_outline.png) ![](../media/scroll_outline.png)
*Here scroll_content_zone below input zone, in game content zone be able to scroll left until end* *Here content_node below view_node, in game content_node be able to scroll left until end*
### Notes ### Notes
- Scroll by default style have inertion and "back moving". It can be adjust via scroll [style settings](https://insality.github.io/druid/modules/druid.scroll.html#Style) - Scroll by default style have inertion and extra size for strecthing effect. It can be adjust via scroll [style settings](https://insality.github.io/druid/modules/druid.scroll.html#Style)
- You can setup "points of interest". Scroll always will be centered on closes point of interest. It is able to create slider without inertion and points of interest on each scroll element. - You can setup "points of interest". Scroll always will be centered on closes point of interest. It is able to create slider without inertion and points of interest on each scroll element.
- Scroll have next events: - Scroll have next events:
- *on_scroll* On scroll move callback - *on_scroll* (self, position) On scroll move callback
- *on_scroll_to* On scroll_to function callback - *on_scroll_to* (self, position, is_instant) On scroll_to function callback
- *on_point_scroll* On scroll_to_index function callback - *on_point_scroll* (self, item_index, position) On scroll_to_index function callback
- You can adjust scroll content size by `scroll:set_border(node_size)`. It will setup new size to content node. - You can adjust scroll content size by `scroll:set_size(node_size)`. It will setup new size to _content node_
- You can enabled or disable inertion mode via `scroll:set_intert(state)`
- You can adjust extra stretch size via `scroll:set_extra_stretch_size`
- Multitouch is required for scroll. Scroll is correctly handling touch_id swap while dragging scroll
## Progress ## Progress
@ -239,7 +242,7 @@ Create timer component with druid: `timer = druid:new_timer(text_node, from_seco
Component for manage node positions. Very simple implementation for nodes with equal size Component for manage node positions. Very simple implementation for nodes with equal size
### Setup ### Setup
Create grid component with druid: `grid = druid:new_grid(parent_node, prefab_node, max_in_row_elements)` Create component with druid: `grid = druid:new_grid(parent_node, prefab_node, max_in_row_elements)`
### Notes ### Notes
- Grid on _adding elements_ will setup parent to _parent_node_ - Grid on _adding elements_ will setup parent to _parent_node_
@ -258,6 +261,8 @@ System Druid component, handle hover node state.
Create hover component with druid: `hover = druid:new_hover(node, callback)` Create hover component with druid: `hover = druid:new_hover(node, callback)`
### Notes ### Notes
- By default, hover handles _hover event_ with pressed touch action_id. So it's mean, what mouse or touch have to be pressed
- On desktop platforms there is _on_mouse_hover_ event. It's event on mouse hover without any action id
## Swipe ## Swipe
@ -267,7 +272,7 @@ Create hover component with druid: `hover = druid:new_hover(node, callback)`
System Druid component, handle swipe actions on node System Druid component, handle swipe actions on node
### Setup ### Setup
Create hover component with druid: `hover = druid:new_swipe(node, swipe_callback)` Create swipe component with druid: `hover = druid:new_swipe(node, swipe_callback)`
### Notes ### Notes
- Swipe callback have next params: (self, swipe_side, distance, time) - Swipe callback have next params: (self, swipe_side, distance, time)
@ -276,6 +281,37 @@ Create hover component with druid: `hover = druid:new_swipe(node, swipe_callback
- **distance**: *number* - in pixels, distance of swipe - **distance**: *number* - in pixels, distance of swipe
- **time**: *number* - in seconds, time of swiping - **time**: *number* - in seconds, time of swiping
- Swipe trigger only, if all input actions was on swipe node. If action will be outside of node, swipe status will be reseted - Swipe trigger only, if all input actions was on swipe node. If action will be outside of node, swipe status will be reseted
- In swipe style table you can adjust minimal distance and maximum time to trigger swipe - In swipe style table you can adjust minimal distance and maximum time to trigg- Hover state trigger only with touch on mobile devices or button mouse holding. Just mouse over swipe
- In swipe style table you can toggle type of swipe triggering. if SWIPE_TRIGGER_ON_MOVE setup to true - swipe will trigger as swipe can be triggered. If setup to false - swipe will trigger only on released action - In swipe style table you can toggle type of swipe triggering. if SWIPE_TRIGGER_ON_MOVE setup to true - swipe will trigger as swipe can be triggered. If setup to false - swipe will trigger only on released action
- If you have stencil on swipe node and you don't want trigger it outside of stencil node, you can use `swipe:set_click_zone` to restrict swipe zone - If you have stencil on swipe node and you don't want trigger it outside of stencil node, you can use `swipe:set_click_zone` to restrict swipe zonethout buttons is now not allowed.
## Drag
[Drag API here](https://insality.github.io/druid/modules/druid.drag.html)
### Overview
System Druid component, handle drag actions on node
### Setup
Create drag component with druid: `hover = druid:new_drag(node, drag_callback)`
### Notes
- Drag callback have next params: (self, swipe_side, distance, time)
- **self**: Druid self context
- **dx**: *number* - delta x position
- **dy**: *number* - delta y position
- In styles, you can point the drag start deadzone. Default value is 10 pixels
- Drag correctly process multitouch. You can switch touch_id, while dragging on node with correct _dx_ and _dy_ values (made for correct scrolling)
- You can restrict horizontal or vertical dragging by setting `drag.can_x` or `drag.can_y` to _false_ value
- You can get info about current drag state:
- _is_touch_ - Is currently node touching
- _is_drag_ - Is currently node is dragging
- _x_ and _y_ - Current touch position
- _touch_start_pos_ - Touch stat positions
- Drag have next events:
- _on_touch_start_ (self) - Event on touch start
- _on_touch_end_ (self) - Event on touch end
- _on_drag_start_ (self) - Event on drag start
- _on_drag_ (self, dx, dy) - Event on drag process
- _on_drag_end_ (self) - Event on drag end
- Drag node zone can be restricted via `drag:set_click_zone(node)`

View File

@ -28,6 +28,10 @@ end
function M.on_input(self, action_id, action) function M.on_input(self, action_id, action)
end end
-- Call on component creation and on component:set_style() function
function M.on_style_change(self, style)
end
-- Call only if exist interest: const.ON_MESSAGE -- Call only if exist interest: const.ON_MESSAGE
function M.on_message(self, message_id, message, sender) function M.on_message(self, message_id, message, sender)
end end
@ -138,10 +142,6 @@ function M.init(self, template_name, node_table)
-- Button self on callback is self of _this_ component -- Button self on callback is self of _this_ component
local button = druid:new_button(...) local button = druid:new_button(...)
-- helper can return you the component style for current component
-- It return by component name from
local my_style = self:get_style()
end end
``` ```

View File

@ -9,6 +9,7 @@ In component API documentation, you can find the style API for this component. O
## Usage ## Usage
Setup default druid style for all druid instances via `druid.set_default_style` Setup default druid style for all druid instances via `druid.set_default_style`
You can pass _nil_ or _empty_table_ to use default values for all components (no styles)
```lua ```lua
local druid = require("druid.druid") local druid = require("druid.druid")
local my_style = require("my.amazing.style") local my_style = require("my.amazing.style")
@ -41,3 +42,18 @@ local function init(self)
self.button:set_style(my_style) self.button:set_style(my_style)
end end
``` ```
## Create your own styles
The most components have their styles. You can explore it on [Druid API](https://insality.github.io/druid/) in table style section ([button example](https://insality.github.io/druid/modules/druid.button.html#Style)). Or you can see, what fields component uses in code in function `on_style_change`
To create you style, create lua module, what return <_component_name_, _component_style_> table
Example: [default druid style](https://github.com/Insality/druid/blob/develop/druid/styles/default/style.lua)
Override all fields you want and set your style with one of next ways:
- Set your style as global via `druid.set_default_style`
- Set style for concrete druid instance via `druid = druid.new(self, style)`
- Set style for concrete instance via `component:set_style(style)`

View File

@ -58,16 +58,17 @@ Druid 0.4.0:
- You can setup drag deadzone to detect, when dragging is started (by default 10 pixels) - You can setup drag deadzone to detect, when dragging is started (by default 10 pixels)
- Druid _Scroll_ component fully reworked. Input logic moved to _Drag_ component - Druid _Scroll_ component fully reworked. Input logic moved to _Drag_ component
- Updated scroll documentation - Update scroll documentation
- Changed constructor order params - Change constructor order params
- Change _scroll:set_border_ to _scroll:set_size_
- Scroll now contains from view and content node - Scroll now contains from view and content node
- _View node_ - static node, which size determine the "camera" zone - _View node_ - static node, which size determine the "camera" zone
- _Content node_ - dynamic node, moving by _Scroll_ component - _Content node_ - dynamic node, moving by _Scroll_ component
- Scroll will be disabled only if content size equals to view size (by width or height separatly) - Scroll will be disabled only if content size equals to view size (by width or height separatly)
- You can adjust scroll size via _.gui_ scene. Just setup correct node size - You can adjust start scroll size via _.gui_ scene. Just setup correct node size
- Different anchoring is supported (for easier layout) - Different anchoring is supported (for easier layouting)
- Function _scroll_to_ now accept position relative to _content node_. It's more easier for handling. _Example:_ if you have children node of _content_node_, you can pass this node position to scroll to this. - Function _scroll_to_ now accept position relative to _content node_. It's more easier for handling. _Example:_ if you have children node of _content_node_, you can pass this node position to scroll to this.
- **Resolve #52**: _Content node size_ now can be less than _view node size_. In this case, content will be scrolled only inside _view size_ - **Resolve #52**: _Content node size_ now can be less than _view node size_. In this case, content will be scrolled only inside _view size_ (can be disabled via style field: _SMALL_CONTENT_SCROLL_)
- **Fix #50**: If style:SOFT_ZONE_SIZE equals to [0..1], scroll can be disappeared - **Fix #50**: If style:SOFT_ZONE_SIZE equals to [0..1], scroll can be disappeared
- Druid _Grid_ Update - Druid _Grid_ Update
@ -75,7 +76,7 @@ Druid 0.4.0:
- Function `grid:clear` now don't delete any GUI nodes. Druid will not care about `gui.delete_node` logic anymore (#56) - Function `grid:clear` now don't delete any GUI nodes. Druid will not care about `gui.delete_node` logic anymore (#56)
- Druid _Hover_ component now have two _hover_ events (#49): - Druid _Hover_ component now have two _hover_ events (#49):
- _on_hover_ is old hover event. Trigger only if touch pressed on node - _on_hover_ is usual hover event. Trigger only if touch or mouse action_id pressed on node
- _on_mouse_hover_ action on node without action_id (desktop mouse over). Works only on desktop platform - _on_mouse_hover_ action on node without action_id (desktop mouse over). Works only on desktop platform
- Styles update: - Styles update:
@ -89,4 +90,4 @@ Druid 0.4.0:
- **Fix:** Blocker component bug (blocker had very high priority, so it's block even button components, created after bloker) - **Fix:** Blocker component bug (blocker had very high priority, so it's block even button components, created after bloker)
- **Fix #58:** Bug, when druid instance should be always named `druid` (ex: `self.druid = druid.new(self)`) - **Fix #58:** Bug, when druid instance should be always named `druid` (ex: `self.druid = druid.new(self)`)
- **Fix #53:** Bug with final _Druid instance_ without any components - **Fix #53:** Bug with final _Druid instance_ without any components

View File

@ -10,7 +10,7 @@ height = 900
[project] [project]
title = druid title = druid
version = 0.3.0 version = 0.4.0
[library] [library]
include_dirs = druid include_dirs = druid

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 24 KiB