Merge pull request #46 from Insality/feature/15-input-component

Feature/15 input component
This commit is contained in:
Maxim Tuprikov 2020-04-18 14:42:23 +03:00 committed by GitHub
commit cb5c035a3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
57 changed files with 3890 additions and 108 deletions

View File

@ -23,10 +23,13 @@ Or point to the ZIP file of a [specific release](https://github.com/Insality/dr
For **Druid** to work requires next input bindings:
- Mouse trigger - `Button 1` -> `touch` _For basic input components_
- Key trigger - `Backspace` -> `back` _For back_handler component_
- Key trigger - `Back` -> `back` _For back_handler component, Android back button_
- 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 - `Enter` -> `key_enter` _For input component, optional_
- Key trigger - `Esc` -> `key_esc` _For input component, optional_
![](media/input_binding.png)
![](media/input_binding_2.png)
![](media/input_binding_1.png)
### Input capturing [optional]
@ -55,6 +58,18 @@ druid.set_text_function(callback)
-- Used for change default druid style
druid.set_default_style(your_style)
-- Call this function on language changing in the game,
-- to retranslate all lang_text components:
druid.on_languge_change()
-- Call this function on layout changing in the game,
-- to reapply layouts
druid.on_layout_change()
-- Call this function inside window.set_listener
-- to catch game focus lost/gained callbacks:
druid.on_window_callback(event)
```
@ -112,11 +127,15 @@ local function button_callback(self)
print("Button was clicked!")
end
local function init(self)
function init(self)
self.druid = druid.new(self)
self.druid:new_button("button_node_name", button_callback)
end
function final(self)
self.druid:final()
end
function on_input(self, action_id, action)
return self.druid:on_input(action_id, action)
end

View File

@ -60,6 +60,7 @@
<li><a href="topics/03-styles.md.html">Styles</a></li>
<li><a href="topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="topics/05-examples.md.html">Examples</a></li>
<li><a href="topics/changelog.md.html">changelog</a></li>
<li><a href="topics/README.md.html">README</a></li>
</ul>
@ -180,6 +181,10 @@
<td class="name" nowrap><a href="topics/05-examples.md.html">05-examples.md</a></td>
<td class="summary"></td>
</tr>
<tr>
<td class="name" nowrap><a href="topics/changelog.md.html">changelog.md</a></td>
<td class="summary"></td>
</tr>
<tr>
<td class="name" nowrap><a href="topics/README.md.html">README.md</a></td>
<td class="summary"></td>
@ -190,7 +195,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -67,6 +67,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -118,6 +119,14 @@
<td class="summary">Get current component interests</td>
</tr>
<tr>
<td class="name" nowrap><a href="#increase_input_priority">increase_input_priority()</a></td>
<td class="summary">Increase input priority in current input stack</td>
</tr>
<tr>
<td class="name" nowrap><a href="#reset_input_priority">reset_input_priority()</a></td>
<td class="summary">Reset input priority in current input stack</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_node">get_node(node_or_name)</a></td>
<td class="summary">Get node for component by name.</td>
</tr>
@ -325,6 +334,34 @@
</dd>
<dt>
<a name = "increase_input_priority"></a>
<strong>increase_input_priority()</strong>
</dt>
<dd>
Increase input priority in current input stack
</dd>
<dt>
<a name = "reset_input_priority"></a>
<strong>reset_input_priority()</strong>
</dt>
<dd>
Reset input priority in current input stack
</dd>
<dt>
<a name = "get_node"></a>
@ -441,7 +478,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -68,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -216,7 +217,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -68,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -235,7 +236,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -68,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -97,11 +98,11 @@
<td class="summary">Return button enabled 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, Self)</a></td>
<td class="summary">Strict button click area.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_key_trigger">set_key_trigger(key)</a></td>
<td class="name" nowrap><a href="#set_key_trigger">set_key_trigger(key, Self)</a></td>
<td class="summary">Set key-code to trigger this button</td>
</tr>
<tr>
@ -210,7 +211,7 @@
</dd>
<dt>
<a name = "set_click_zone"></a>
<strong>set_click_zone(zone)</strong>
<strong>set_click_zone(zone, Self)</strong>
</dt>
<dd>
Strict button click area. Useful for
@ -223,6 +224,10 @@
<span class="types"><span class="type">node</span></span>
Gui node
</li>
<li><span class="parameter">Self</span>
<span class="types"><span class="type">druid.button</span></span>
instance to make chain calls
</li>
</ul>
@ -232,7 +237,7 @@
</dd>
<dt>
<a name = "set_key_trigger"></a>
<strong>set_key_trigger(key)</strong>
<strong>set_key_trigger(key, Self)</strong>
</dt>
<dd>
Set key-code to trigger this button
@ -244,6 +249,10 @@
<span class="types"><span class="type">hash</span></span>
The action_id of the key
</li>
<li><span class="parameter">Self</span>
<span class="types"><span class="type">druid.button</span></span>
instance to make chain calls
</li>
</ul>
@ -305,6 +314,10 @@
<span class="types"><span class="type">druid_event</span></span>
(self, params, button<em>instance, time) On button hold before long</em>click callback
</li>
<li><span class="parameter">on_click_outside</span>
<span class="types"><span class="type">druid_event</span></span>
(self, params, button_instance) On click outside of button
</li>
</ul>
@ -335,6 +348,10 @@
<span class="types"><span class="type">vector3</span></span>
Initial scale of anim_node
</li>
<li><span class="parameter">start_pos</span>
<span class="types"><span class="type">vector3</span></span>
Initial pos of anim_node
</li>
<li><span class="parameter">pos</span>
<span class="types"><span class="type">vector3</span></span>
Initial pos of anim_node
@ -384,12 +401,6 @@
<li><span class="parameter">on_set_enabled</span>
<span class="types"><span class="type">function</span></span>
(self, node, enabled_state)
</li>
<li><span class="parameter">IS_HOVER</span>
<span class="types"><span class="type">bool</span></span>
</li>
</ul>
@ -405,7 +416,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -68,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -278,7 +279,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -68,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -240,7 +241,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -68,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -371,7 +372,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -67,6 +67,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -237,7 +238,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -68,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -212,7 +213,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -67,6 +67,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -107,6 +108,30 @@
<td class="name" nowrap><a href="#new">new(context[, style])</a></td>
<td class="summary">Create Druid instance.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_default_style">set_default_style(style)</a></td>
<td class="summary">Set new default style.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_text_function">set_text_function(callback)</a></td>
<td class="summary">Set text function.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_sound_function">set_sound_function(callback)</a></td>
<td class="summary">Set sound function.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#on_window_callback">on_window_callback(event)</a></td>
<td class="summary">Callback on global window event.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#on_layout_change">on_layout_change()</a></td>
<td class="summary">Callback on global layout change event.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#on_language_change">on_language_change()</a></td>
<td class="summary">Callback on global language change event.</td>
</tr>
</table>
<br/>
@ -174,6 +199,125 @@
</dd>
<dt>
<a name = "set_default_style"></a>
<strong>set_default_style(style)</strong>
</dt>
<dd>
Set new default style.
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">style</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.6">table</a></span>
Druid style module
</li>
</ul>
</dd>
<dt>
<a name = "set_text_function"></a>
<strong>set_text_function(callback)</strong>
</dt>
<dd>
Set text function.
Druid locale component will call this function
to get translated text. After set<em>text</em>funtion
all existing locale component will be updated
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">callback</span>
<span class="types"><span class="type">function</span></span>
Get localized text function
</li>
</ul>
</dd>
<dt>
<a name = "set_sound_function"></a>
<strong>set_sound_function(callback)</strong>
</dt>
<dd>
Set sound function.
Component will call this function to
play sound by sound_id
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">callback</span>
<span class="types"><span class="type">function</span></span>
Sound play callback
</li>
</ul>
</dd>
<dt>
<a name = "on_window_callback"></a>
<strong>on_window_callback(event)</strong>
</dt>
<dd>
Callback on global window event.
Used to trigger on<em>focus</em>lost and on<em>focus</em>gain
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">event</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
Event param from window listener
</li>
</ul>
</dd>
<dt>
<a name = "on_layout_change"></a>
<strong>on_layout_change()</strong>
</dt>
<dd>
Callback on global layout change event.
</dd>
<dt>
<a name = "on_language_change"></a>
<strong>on_language_change()</strong>
</dt>
<dd>
Callback on global language change event.
Use to update all lang texts
</dd>
</dl>
@ -182,7 +326,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -30,6 +30,11 @@
<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>
</ul>
<h2>Modules</h2>
@ -63,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -72,22 +78,312 @@
<h1>Module <code>druid.input</code></h1>
<p>Druid input text component.</p>
<p> Carry on user text input
UNIMPLEMENTED</p>
<p> Carry on user text input</p>
<h3>Info:</h3>
<ul>
<li><strong>Author</strong>: Part of code from Britzl gooey input component</li>
</ul>
<h2><a href="#Functions">Functions</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#set_text">set_text(input_text)</a></td>
<td class="summary">Set text for input field</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_text">get_text()</a></td>
<td class="summary">Return current input field text</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_max_length">set_max_length(max_length, Self)</a></td>
<td class="summary">Set maximum length for input field.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_allowerd_characters">set_allowerd_characters(characters, Self)</a></td>
<td class="summary">Set allowed charaters for input field.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#reset_changes">reset_changes()</a></td>
<td class="summary">Reset current input selection and return previous value</td>
</tr>
</table>
<h2><a href="#Tables">Tables</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#Events">Events</a></td>
<td class="summary">Component events</td>
</tr>
<tr>
<td class="name" nowrap><a href="#Fields">Fields</a></td>
<td class="summary">Component fields</td>
</tr>
<tr>
<td class="name" nowrap><a href="#Style">Style</a></td>
<td class="summary">Component style params</td>
</tr>
</table>
<br/>
<br/>
<h2 class="section-header "><a name="Functions"></a>Functions</h2>
<dl class="function">
<dt>
<a name = "set_text"></a>
<strong>set_text(input_text)</strong>
</dt>
<dd>
Set text for input field
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">input_text</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
The string to apply for input field
</li>
</ul>
</dd>
<dt>
<a name = "get_text"></a>
<strong>get_text()</strong>
</dt>
<dd>
Return current input field text
<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 current input field text
</ol>
</dd>
<dt>
<a name = "set_max_length"></a>
<strong>set_max_length(max_length, Self)</strong>
</dt>
<dd>
Set maximum length for input field.
Pass nil to make input field unliminted (by default)
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">max_length</span>
<span class="types"><span class="type">number</span></span>
Maximum length for input text field
</li>
<li><span class="parameter">Self</span>
<span class="types"><span class="type">druid.input</span></span>
instance to make chain calls
</li>
</ul>
</dd>
<dt>
<a name = "set_allowerd_characters"></a>
<strong>set_allowerd_characters(characters, Self)</strong>
</dt>
<dd>
Set allowed charaters for input field.
See: https://defold.com/ref/stable/string/
ex: [%a%d] for alpha and numeric
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">characters</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
Regulax exp. for validate user input
</li>
<li><span class="parameter">Self</span>
<span class="types"><span class="type">druid.input</span></span>
instance to make chain calls
</li>
</ul>
</dd>
<dt>
<a name = "reset_changes"></a>
<strong>reset_changes()</strong>
</dt>
<dd>
Reset current input selection and return previous value
</dd>
</dl>
<h2 class="section-header "><a name="Tables"></a>Tables</h2>
<dl class="function">
<dt>
<a name = "Events"></a>
<strong>Events</strong>
</dt>
<dd>
Component events
<h3>Fields:</h3>
<ul>
<li><span class="parameter">on_input_select</span>
<span class="types"><span class="type">druid_event</span></span>
(self, button_node) On input field select callback
</li>
<li><span class="parameter">on_input_unselect</span>
<span class="types"><span class="type">druid_event</span></span>
(self, button_node) On input field unselect callback
</li>
<li><span class="parameter">on_input_text</span>
<span class="types"><span class="type">druid_event</span></span>
(self, input_text) On input field text change callback
</li>
<li><span class="parameter">on_input_empty</span>
<span class="types"><span class="type">druid_event</span></span>
(self, input_text) On input field text change to empty string callback
</li>
<li><span class="parameter">on_input_full</span>
<span class="types"><span class="type">druid_event</span></span>
(self, input_text) On input field text change to max length string callback
</li>
<li><span class="parameter">on_input_wrong</span>
<span class="types"><span class="type">druid_event</span></span>
(self, params, button_instance) On trying user input with not allowed character callback
</li>
</ul>
</dd>
<dt>
<a name = "Fields"></a>
<strong>Fields</strong>
</dt>
<dd>
Component fields
<h3>Fields:</h3>
<ul>
<li><span class="parameter">text</span>
<span class="types"><span class="type">druid.text</span></span>
Text component
</li>
<li><span class="parameter">button</span>
<span class="types"><span class="type">druid.button</span></span>
Button component
</li>
<li><span class="parameter">is_selected</span>
<span class="types"><span class="type">bool</span></span>
Is current input selected now
</li>
<li><span class="parameter">is_empty</span>
<span class="types"><span class="type">bool</span></span>
Is current input is empty now
</li>
<li><span class="parameter">max_length</span>
<span class="types"><span class="type">number</span></span>
Max length for input text
(<em>optional</em>)
</li>
<li><span class="parameter">allowerd_characters</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
Pattern matching for user input
(<em>optional</em>)
</li>
<li><span class="parameter">keyboard_type</span>
<span class="types"><span class="type">number</span></span>
Gui keyboard type for input field
</li>
</ul>
</dd>
<dt>
<a name = "Style"></a>
<strong>Style</strong>
</dt>
<dd>
Component style params
<h3>Fields:</h3>
<ul>
<li><span class="parameter">IS_LONGTAP_ERASE</span>
<span class="types"><span class="type">bool</span></span>
Is long tap will erase current input data
</li>
<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><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>
Default character mask for password input
</li>
<li><span class="parameter">on_select</span>
<span class="types"><span class="type">function</span></span>
(self, button_node) Callback on input field selecting
</li>
<li><span class="parameter">on_unselect</span>
<span class="types"><span class="type">function</span></span>
(self, button_node) Callback on input field unselecting
</li>
<li><span class="parameter">on_input_wrong</span>
<span class="types"><span class="type">function</span></span>
(self, button_node) Callback on wrong user input
</li>
<li><span class="parameter">button</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
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -68,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -241,7 +242,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -68,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -380,7 +381,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -68,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -240,7 +241,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -68,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -508,7 +509,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -68,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -279,7 +280,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -68,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -94,6 +95,10 @@
</table>
<h2><a href="#Tables">Tables</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#Fields">Fields</a></td>
<td class="summary">Components fields</td>
</tr>
<tr>
<td class="name" nowrap><a href="#Events">Events</a></td>
<td class="summary">Component events</td>
@ -162,6 +167,32 @@
<h2 class="section-header "><a name="Tables"></a>Tables</h2>
<dl class="function">
<dt>
<a name = "Fields"></a>
<strong>Fields</strong>
</dt>
<dd>
Components fields
<h3>Fields:</h3>
<ul>
<li><span class="parameter">node</span>
<span class="types"><span class="type">node</span></span>
Swipe node
</li>
<li><span class="parameter">click_zone</span>
<span class="types"><span class="type">node</span></span>
Restriction zone
(<em>optional</em>)
</li>
</ul>
</dd>
<dt>
<a name = "Events"></a>
<strong>Events</strong>
@ -219,7 +250,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -68,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -88,6 +89,10 @@
<td class="summary">Component init function</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_text_width">get_text_width([text])</a></td>
<td class="summary">Calculate text width with font with respect to trailing space</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_to">set_to(set_to)</a></td>
<td class="summary">Set text to text field</td>
</tr>
@ -107,6 +112,10 @@
<td class="name" nowrap><a href="#set_pivot">set_pivot(pivot)</a></td>
<td class="summary">Set text pivot.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#is_multiline">is_multiline()</a></td>
<td class="summary">Return true, if text with line break</td>
</tr>
</table>
<h2><a href="#Tables">Tables</a></h2>
<table class="function_list">
@ -157,6 +166,30 @@
</dd>
<dt>
<a name = "get_text_width"></a>
<strong>get_text_width([text])</strong>
</dt>
<dd>
Calculate text width with font with respect to trailing space
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">text</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
(<em>optional</em>)
</li>
</ul>
</dd>
<dt>
<a name = "set_to"></a>
@ -263,6 +296,26 @@
</dd>
<dt>
<a name = "is_multiline"></a>
<strong>is_multiline()</strong>
</dt>
<dd>
Return true, if text with line break
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">boolean</span></span>
Is text node with line break
</ol>
</dd>
</dl>
<h2 class="section-header "><a name="Tables"></a>Tables</h2>
@ -353,7 +406,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -68,6 +68,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -294,7 +295,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -67,6 +67,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -240,7 +241,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -67,6 +67,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@ -129,6 +130,22 @@
<td class="summary">Druid on_message function</td>
</tr>
<tr>
<td class="name" nowrap><a href="#druid:on_focus_lost">druid:on_focus_lost()</a></td>
<td class="summary">Druid on focus lost interest function.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#druid:on_focus_gained">druid:on_focus_gained()</a></td>
<td class="summary">Druid on focus gained interest function.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#druid:on_layout_change">druid:on_layout_change()</a></td>
<td class="summary">Druid on layout change function.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#druid.on_language_change">druid.on_language_change()</a></td>
<td class="summary">Druid on language change.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#druid:new_button">druid:new_button(...)</a></td>
<td class="summary">Create button basic component</td>
</tr>
@ -362,6 +379,67 @@
</dd>
<dt>
<a name = "druid:on_focus_lost"></a>
<strong>druid:on_focus_lost()</strong>
</dt>
<dd>
Druid on focus lost interest function.
This one called by on<em>window</em>callback by global window listener
</dd>
<dt>
<a name = "druid:on_focus_gained"></a>
<strong>druid:on_focus_gained()</strong>
</dt>
<dd>
Druid on focus gained interest function.
This one called by on<em>window</em>callback by global window listener
</dd>
<dt>
<a name = "druid:on_layout_change"></a>
<strong>druid:on_layout_change()</strong>
</dt>
<dd>
Druid on layout change function.
Called on update gui layout
</dd>
<dt>
<a name = "druid.on_language_change"></a>
<strong>druid.on_language_change()</strong>
</dt>
<dd>
Druid on language change.
This one called by global gruid.on<em>language</em>change, but can be
call manualy to update all translations
</dd>
<dt>
<a name = "druid:new_button"></a>
@ -802,7 +880,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -58,6 +58,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
@ -279,8 +280,17 @@ Key is value from druid const: const.SIDE.X (or just "x") or const.SIDE.Y (or ju
<p>Basic Druid text input component (unimplemented)</p>
<h3>Setup</h3>
<p>Create input component with druid: <code>input = druid:new_input(button_node_name, text_node_name, keyboard_type)</code></p>
<h3>Notes</h3>
<p>- Input component handle user text input. Input contains from button and text components. Button needed for selecting/unselecting input field
- Long click on input field for clear and select input field (clearing can be disable via styles)
- Click outside of button to unselect input field
- On focus lost (game minimized) input field will be unselected
- You can setup max length of the text
- You can setup allowed characters. On add not allowed characters <code>on_input_wrong</code> will be called. By default it cause simple shake animation
- The keyboard for input will not show on mobile HTML5. So input field in mobile HTML5 is not working now
- To make work different keyboard type, make sure value in game.project Android:InputMethod set to HidderInputField (https://defold.com/manuals/project-settings/#input-method)</p>
<p><a name="Checkbox"></a></p>
@ -402,7 +412,7 @@ Key is value from druid const: const.SIDE.X (or just "x") or const.SIDE.Y (or ju
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -46,6 +46,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
@ -115,8 +116,8 @@
</span><span class="keyword">function</span> M.on_message(self, message_id, message, sender)
<span class="keyword">end</span>
<span class="comment">-- Call only if component with ON_CHANGE_LANGUAGE interest
</span><span class="keyword">function</span> M.on_change_language(self)
<span class="comment">-- Call only if component with ON_LANGUAGE_CHANGE interest
</span><span class="keyword">function</span> M.on_language_change(self)
<span class="keyword">end</span>
<span class="comment">-- Call only if component with ON_LAYOUT_CHANGE interest
@ -128,6 +129,14 @@
</span><span class="keyword">function</span> M.on_input_interrupt(self)
<span class="keyword">end</span>
<span class="comment">-- Call, if game lost focus. Need ON_FOCUS_LOST intereset
</span><span class="keyword">function</span> M.on_focus_lost(self)
<span class="keyword">end</span>
<span class="comment">-- Call, if game gained focus. Need ON_FOCUS_GAINED intereset
</span><span class="keyword">function</span> M.on_focus_gained(self)
<span class="keyword">end</span>
<span class="comment">-- Call on component remove or on druid:final
</span><span class="keyword">function</span> M.on_remove(self)
<span class="keyword">end</span>
@ -178,11 +187,12 @@ There is next interests in druid:
<li><p><strong>ON_UPDATE</strong> - component will be updated from update</p></li>
<li><p><strong>ON<em>INPUT</em>HIGH</strong> - component will receive input from on<em>input, before other components with ON</em>INPUT</p></li>
<li><p><strong>ON_INPUT</strong> - component will receive input from on<em>input, after other components with ON</em>INPUT_HIGH</p></li>
<li><p><strong>ON<em>CHANGE</em>LANGUAGE</strong> - will call <em>on</em>change<em>language</em> function on language change trigger</p></li>
<li><p><strong>ON<em>LAYOUT</em>CHANGED</strong> will call <em>on</em>layout<em>change</em> function on layout change trigger</p></li>
<li><p><strong>ON<em>LANGUAGE</em>CHANGE</strong> - will call <em>on</em>language<em>change</em> function on language change trigger</p></li>
<li><p><strong>ON<em>LAYOUT</em>CHANGE</strong> will call <em>on</em>layout<em>change</em> function on layout change trigger</p></li>
<li><p><strong>ON<em>FOCUS</em>LOST</strong> will call <em>on</em>focust<em>lost</em> function in on focus lost event. You need to pass window_callback to global <a href="../modules/druid.html#on_window_callback">druid:on_window_callback</a></p></li>
<li><p><strong>ON<em>FOCUS</em>GAINED</strong> will call <em>on</em>focust<em>gained</em> function in on focus gained event. You need to pass window_callback to global <a href="../modules/druid.html#on_window_callback">druid:on_window_callback</a></p></li>
</ul>
<p><a name="Best_practice_on_custom_components"></a></p>
<h2>Best practice on custom components</h2>
<p>On each component recommended describe component scheme in next way:</p>
@ -234,7 +244,7 @@ There is next interests in druid:
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -34,7 +34,6 @@
<ul>
<li><a href="#Overview">Overview </a></li>
<li><a href="#Usage">Usage </a></li>
<li><a href="#Create_custom_components">Create custom components </a></li>
</ul>
@ -45,6 +44,7 @@
<li><strong>Styles</strong></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
@ -89,7 +89,7 @@
<p><a name="Usage"></a></p>
<h2>Usage</h2>
<p>Setup default druid style for all druid instances via <code>druid.set_default_style</code></p>
<p>Setup default druid style for all druid instances via <a href="../modules/druid.html#set_default_style">druid.set_default_style</a></p>
<pre>
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
@ -129,17 +129,12 @@
</pre>
<p><a name="Create_custom_components"></a></p>
<h2>Create custom components</h2>
<p>Styles is just lua table, so it can be described in just one single file
<strong>TODO</strong></p>
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -43,6 +43,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><strong>Druid assets</strong></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
@ -90,7 +91,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -43,6 +43,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><strong>Examples</strong></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
@ -88,7 +89,7 @@
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -53,6 +53,7 @@
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><strong>README</strong></li>
</ul>
<h2>Modules</h2>
@ -110,11 +111,14 @@
<ul>
<li>Mouse trigger - <code>Button 1</code> -> <code>touch</code> <em>For basic input components</em></li>
<li>Key trigger - <code>Backspace</code> -> <code>back</code> <em>For back</em>handler component_</li>
<li>Key trigger - <code>Back</code> -> <code>back</code> <em>For back</em>handler component, Android back button_</li>
<li>Key trigger - <code>Backspace</code> -> <code>key_backspace</code> <em>For back</em>handler component, 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>Esc</code> -> <code>key_esc</code> <em>For input component, optional</em></li>
</ul>
<p><img src="media/input_binding.png" alt=""/></p>
<p><img src="media/input_binding_2.png" alt=""/>
<img src="media/input_binding_1.png" alt=""/></p>
<h3>Input capturing [optional]</h3>
@ -144,6 +148,18 @@
<span class="comment">-- Used for change default druid style
</span>druid.set_default_style(your_style)
<span class="comment">-- Call this function on language changing in the game,
</span><span class="comment">-- to retranslate all lang_text components:
</span>druid.on_languge_change()
<span class="comment">-- Call this function on layout changing in the game,
</span><span class="comment">-- to reapply layouts
</span>druid.on_layout_change()
<span class="comment">-- Call this function inside window.set_listener
</span><span class="comment">-- to catch game focus lost/gained callbacks:
</span>druid.on_window_callback(event)
</pre>
@ -192,11 +208,15 @@
<span class="global">print</span>(<span class="string">"Button was clicked!"</span>)
<span class="keyword">end</span>
<span class="keyword">local</span> <span class="keyword">function</span> init(self)
<span class="keyword">function</span> init(self)
self.druid = druid.new(self)
self.druid:new_button(<span class="string">"button_node_name"</span>, button_callback)
<span class="keyword">end</span>
<span class="keyword">function</span> final(self)
self.druid:final()
<span class="keyword">end</span>
<span class="keyword">function</span> on_input(self, action_id, action)
<span class="keyword">return</span> self.druid:on_input(action_id, action)
<span class="keyword">end</span>
@ -316,7 +336,7 @@ https://insality.github.io/druid/</p>
</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-04-17 20:13:54 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@ -0,0 +1,132 @@
<!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>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><strong>changelog</strong></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
<ul class="nowrap">
<li><a href="../modules/druid.back_handler.html">druid.back_handler</a></li>
<li><a href="../modules/druid.blocker.html">druid.blocker</a></li>
<li><a href="../modules/druid.button.html">druid.button</a></li>
<li><a href="../modules/druid.checkbox.html">druid.checkbox</a></li>
<li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
<li><a href="../modules/druid.grid.html">druid.grid</a></li>
<li><a href="../modules/druid.hover.html">druid.hover</a></li>
<li><a href="../modules/druid.input.html">druid.input</a></li>
<li><a href="../modules/druid.lang_text.html">druid.lang_text</a></li>
<li><a href="../modules/druid.progress.html">druid.progress</a></li>
<li><a href="../modules/druid.radio_group.html">druid.radio_group</a></li>
<li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
<li><a href="../modules/druid.slider.html">druid.slider</a></li>
<li><a href="../modules/druid.swipe.html">druid.swipe</a></li>
<li><a href="../modules/druid.text.html">druid.text</a></li>
<li><a href="../modules/druid.timer.html">druid.timer</a></li>
<li><a href="../modules/component.html">component</a></li>
<li><a href="../modules/druid.html">druid</a></li>
<li><a href="../modules/druid_event.html">druid_event</a></li>
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
</div>
<div id="content">
<p>Druid 0.3.0:</p>
<ul>
<li><p><code>Druid:final</code> now is important function for correct working</p></li>
<li><p>Add <em>swipe</em> basic component</p>
<pre>
- Swipe component handle simple swipe gestures on node. It has single callback with direction on swipe. You can adjust a several parameters of swipe <span class="keyword">in</span> druid style.
- Swipe can be triggered on action.released <span class="keyword">or</span> <span class="keyword">while</span> user is make swiping (<span class="keyword">in</span> process)
- Add swipe example at main Druid example. Try swipe left/right to switch example pages.
</pre>
</li>
<li><p>Add <em>input</em> basic component</p>
<pre>
- Input component handle user text input. Input contains from button <span class="keyword">and</span> text components. Button needed <span class="keyword">for</span> selecting/unselecting input field
- Long click on input field <span class="keyword">for</span> clear <span class="keyword">and</span> <span class="global">select</span> input field (clearing can be disable via styles)
- Click outside of button to unselect input field
- On focus lost (game minimized) input field will be unselected
- You can setup max length of the text
- You can setup allowed characters. On add <span class="keyword">not</span> allowed characters <span class="backtick"><code>on_input_wrong</code></span> will be called. By default it cause simple shake animation
- The keyboard <span class="keyword">for</span> input will <span class="keyword">not</span> show on mobile HTML5. So input field <span class="keyword">in</span> mobile HTML5 is <span class="keyword">not</span> working now
- To make work different keyboard <span class="global">type</span>, make sure value <span class="keyword">in</span> game.project Android:InputMethod set to HidderInputField (https://defold.com/manuals/project-settings/#input-method)
</pre>
</li>
<li><p>Add button on<em>click</em>outside event. You can subscribe on this event in button. Was needed for Input component (click outside to deselect input field).</p></li>
<li><p>Add start_pos to button component</p></li>
<li><p>Changed input binding settings. Add backspace, enter, text and marked_text. Backspace now is different from android back button.</p></li>
<li><p>Renamed on<em>change</em>language -> on<em>language</em>change component interest</p></li>
<li><p>Add basic component two functions: <code>increase_input_priority</code> and <code>reset_input_priority</code>. It used to process component input first in current input stack (there is two input stacks: INPUT and INPUT_HIGH). Example: on selecting input field, it increase input self priority until it be unselected</p></li>
<li><p>Add two new component interests: <code>on_focus_gain</code> and <code>on_focus_lost</code></p></li>
<li><p>Add global druid events:</p>
<pre>
- on_window_callback: call <span class="backtick"><code>druid.on_window_callback(event)</code></span> <span class="keyword">for</span> on_focus_gain/lost correct work
- on_language_change: call <span class="backtick"><code>druid.on_language_change()</code></span> (#<span class="number">38</span>) <span class="keyword">for</span> update all druid instances lang components
- on_layout_change: call <span class="backtick"><code>druid.on_layout_change()</code></span> (#<span class="number">37</span>) <span class="keyword">for</span> update all gui layouts (unimplemented now)
</pre>
</li>
<li><p>Add several examples to druid-assets respository</p></li>
<li><p>Known issues:</p>
<pre>
- Adjusting text size by height works wrong. Adjusting single line texting works fine
</pre>
</li>
</ul>
</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-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>
</html>

View File

@ -164,8 +164,17 @@ Pin node (node_name in params) should be placed in zero position (initial). It w
Basic Druid text input component (unimplemented)
### Setup
Create input component with druid: `input = druid:new_input(button_node_name, text_node_name, keyboard_type)`
### Notes
- Input component handle user text input. Input contains from button and text components. Button needed for selecting/unselecting input field
- Long click on input field for clear and select input field (clearing can be disable via styles)
- Click outside of button to unselect input field
- On focus lost (game minimized) input field will be unselected
- You can setup max length of the text
- You can setup allowed characters. On add not allowed characters `on_input_wrong` will be called. By default it cause simple shake animation
- The keyboard for input will not show on mobile HTML5. So input field in mobile HTML5 is not working now
- To make work different keyboard type, make sure value in game.project Android:InputMethod set to HidderInputField (https://defold.com/manuals/project-settings/#input-method)
## Checkbox

View File

@ -32,8 +32,8 @@ end
function M.on_message(self, message_id, message, sender)
end
-- Call only if component with ON_CHANGE_LANGUAGE interest
function M.on_change_language(self)
-- Call only if component with ON_LANGUAGE_CHANGE interest
function M.on_language_change(self)
end
-- Call only if component with ON_LAYOUT_CHANGE interest
@ -45,6 +45,14 @@ end
function M.on_input_interrupt(self)
end
-- Call, if game lost focus. Need ON_FOCUS_LOST intereset
function M.on_focus_lost(self)
end
-- Call, if game gained focus. Need ON_FOCUS_GAINED intereset
function M.on_focus_gained(self)
end
-- Call on component remove or on druid:final
function M.on_remove(self)
end
@ -92,10 +100,13 @@ There is next interests in druid:
- **ON_INPUT** - component will receive input from on_input, after other components with ON_INPUT_HIGH
- **ON_CHANGE_LANGUAGE** - will call _on_change_language_ function on language change trigger
- **ON_LANGUAGE_CHANGE** - will call _on_language_change_ function on language change trigger
- **ON_LAYOUT_CHANGED** will call _on_layout_change_ function on layout change trigger
- **ON_LAYOUT_CHANGE** will call _on_layout_change_ function on layout change trigger
- **ON_FOCUS_LOST** will call _on_focust_lost_ function in on focus lost event. You need to pass window_callback to global `druid:on_window_callback`
- **ON_FOCUS_GAINED** will call _on_focust_gained_ function in on focus gained event. You need to pass window_callback to global `druid:on_window_callback`
## Best practice on custom components
On each component recommended describe component scheme in next way:

View File

@ -41,7 +41,3 @@ local function init(self)
self.button:set_style(my_style)
end
```
## Create custom components
Styles is just lua table, so it can be described in just one single file
__TODO__

40
docs_md/changelog.md Normal file
View File

@ -0,0 +1,40 @@
Druid 0.3.0:
- `Druid:final` now is important function for correct working
- Add _swipe_ basic component
- Swipe component handle simple swipe gestures on node. It has single callback with direction on swipe. You can adjust a several parameters of swipe in druid style.
- Swipe can be triggered on action.released or while user is make swiping (in process)
- Add swipe example at main Druid example. Try swipe left/right to switch example pages.
- Add _input_ basic component
- Input component handle user text input. Input contains from button and text components. Button needed for selecting/unselecting input field
- Long click on input field for clear and select input field (clearing can be disable via styles)
- Click outside of button to unselect input field
- On focus lost (game minimized) input field will be unselected
- You can setup max length of the text
- You can setup allowed characters. On add not allowed characters `on_input_wrong` will be called. By default it cause simple shake animation
- The keyboard for input will not show on mobile HTML5. So input field in mobile HTML5 is not working now
- To make work different keyboard type, make sure value in game.project Android:InputMethod set to HidderInputField (https://defold.com/manuals/project-settings/#input-method)
- Add button on_click_outside event. You can subscribe on this event in button. Was needed for Input component (click outside to deselect input field).
- Add start_pos to button component
- Changed input binding settings. Add backspace, enter, text and marked_text. Backspace now is different from android back button.
- Renamed on_change_language -> on_language_change component interest
- Add basic component two functions: `increase_input_priority` and `reset_input_priority`. It used to process component input first in current input stack (there is two input stacks: INPUT and INPUT_HIGH). Example: on selecting input field, it increase input self priority until it be unselected
- Add two new component interests: `on_focus_gain` and `on_focus_lost`
- Add global druid events:
- on_window_callback: call `druid.on_window_callback(event)` for on_focus_gain/lost correct work
- on_language_change: call `druid.on_language_change()` (#38) for update all druid instances lang components
- on_layout_change: call `druid.on_layout_change()` (#37) for update all gui layouts (unimplemented now)
- Add several examples to druid-assets respository
- Known issues:
- Adjusting text size by height works wrong. Adjusting single line texting works fine

View File

@ -32,7 +32,11 @@ end
-- @tparam string action_id on_input action id
-- @tparam table action on_input action
function M.on_input(self, action_id, action)
if action_id == const.ACTION_BACK and action[const.RELEASED] then
if not action[const.RELEASED] then
return false
end
if action_id == const.ACTION_BACK or action_id == const.ACTION_BACKSPACE then
self.on_back:trigger(self:get_context(), self.params)
return true
end
@ -41,4 +45,4 @@ function M.on_input(self, action_id, action)
end
return M
return M

View File

@ -8,12 +8,14 @@
-- @tfield druid_event on_long_click (self, params, button_instance, time) On long tap button callback
-- @tfield druid_event on_double_click (self, params, button_instance, click_amount) On double tap button callback
-- @tfield druid_event on_hold_callback (self, params, button_instance, time) On button hold before long_click callback
-- @tfield druid_event on_click_outside (self, params, button_instance) On click outside of button
--- Component fields
-- @table Fields
-- @tfield node node Trigger node
-- @tfield[opt=node] node anim_node Animation node
-- @tfield vector3 start_scale Initial scale of anim_node
-- @tfield vector3 start_pos Initial pos of anim_node
-- @tfield vector3 pos Initial pos of anim_node
-- @tfield any params Params to click callbacks
-- @tfield druid.hover hover Druid hover logic component
@ -25,7 +27,6 @@
-- @tfield function on_click_disabled (self, node)
-- @tfield function on_hover (self, node, hover_state)
-- @tfield function on_set_enabled (self, node, enabled_state)
-- @tfield bool IS_HOVER
local Event = require("druid.event")
local const = require("druid.const")
@ -152,6 +153,7 @@ function M.init(self, node, callback, params, anim_node)
self.anim_node = anim_node and helper:get_node(anim_node) or self.node
self.start_scale = gui.get_scale(self.anim_node)
self.start_pos = gui.get_position(self.anim_node)
self.params = params
self.hover = self.druid:new_hover(node, on_button_hover)
self.click_zone = nil
@ -167,6 +169,7 @@ function M.init(self, node, callback, params, anim_node)
self.on_long_click = Event()
self.on_double_click = Event()
self.on_hold_callback = Event()
self.on_click_outside = Event()
end
@ -191,6 +194,9 @@ function M.on_input(self, action_id, action)
if not is_pick then
-- Can't interact, if touch outside of button
self.can_action = false
if action.released then
self.on_click_outside:trigger(self:get_context(), self.params, self)
end
return false
end
@ -264,17 +270,21 @@ end
-- no click events outside stencil node
-- @function button:set_click_zone
-- @tparam node zone Gui node
-- @tparam druid.button Self instance to make chain calls
function M.set_click_zone(self, zone)
self.click_zone = self:get_node(zone)
self.hover:set_click_zone(zone)
return self
end
--- Set key-code to trigger this button
-- @function button:set_key_trigger
-- @tparam hash key The action_id of the key
-- @tparam druid.button Self instance to make chain calls
function M.set_key_trigger(self, key)
self.key_trigger = hash(key)
return self
end

View File

@ -1,15 +1,300 @@
--- Druid input text component.
-- Carry on user text input
-- UNIMPLEMENTED
-- @author Part of code from Britzl gooey input component
-- @module druid.input
--- Component events
-- @table Events
-- @tfield druid_event on_input_select (self, button_node) On input field select callback
-- @tfield druid_event on_input_unselect (self, button_node) On input field unselect callback
-- @tfield druid_event on_input_text (self, input_text) On input field text change callback
-- @tfield druid_event on_input_empty (self, input_text) On input field text change to empty string callback
-- @tfield druid_event on_input_full (self, input_text) On input field text change to max length string callback
-- @tfield druid_event on_input_wrong (self, params, button_instance) On trying user input with not allowed character callback
--- Component fields
-- @table Fields
-- @tfield druid.text text Text component
-- @tfield druid.button button Button component
-- @tfield bool is_selected Is current input selected now
-- @tfield bool is_empty Is current input is empty now
-- @tfield[opt] number max_length Max length for input text
-- @tfield[opt] string allowerd_characters Pattern matching for user input
-- @tfield number keyboard_type Gui keyboard type for input field
--- Component style params
-- @table Style
-- @tfield bool IS_LONGTAP_ERASE Is long tap will erase current input data
-- @tfield number BUTTON_SELECT_INCREASE Button scale multiplier on selecting input field
-- @tfield string MASK_DEFAULT_CHAR Default character mask for password input
-- @tfield function on_select (self, button_node) Callback on input field selecting
-- @tfield function on_unselect (self, button_node) Callback on input field unselecting
-- @tfield function on_input_wrong (self, button_node) Callback on wrong user input
-- @tfield table button Custom button style for input node
local Event = require("druid.event")
local const = require("druid.const")
local component = require("druid.component")
local utf8 = require("druid.system.utf8")
local M = component.create("input")
local M = component.create("input", { const.ON_INPUT, const.ON_FOCUS_LOST })
function M.init(self, node, callback, click_node)
self.style = self:get_style()
--- Mask text by replacing every character with a mask character
-- @tparam string text
-- @tparam string mask
-- @treturn string Masked text
local function mask_text(text, mask)
mask = mask or "*"
local masked_text = ""
for uchar in utf8.gmatch(text, ".") do
masked_text = masked_text .. mask
end
return masked_text
end
local function select(self)
gui.reset_keyboard()
self.marked_value = ""
if not self.selected then
self:increase_input_priority()
self.button:increase_input_priority()
self.previous_value = self.value
self.selected = true
gui.show_keyboard(self.keyboard_type, false)
self.on_input_select:trigger(self:get_context())
if self.style.on_select then
self.style.on_select(self, self.button.node)
end
end
end
local function unselect(self)
gui.reset_keyboard()
self.marked_value = ""
if self.selected then
self:reset_input_priority()
self.button:reset_input_priority()
self.selected = false
gui.hide_keyboard()
self.on_input_unselect:trigger(self:get_context())
if self.style.on_unselect then
self.style.on_unselect(self, self.button.node)
end
end
end
local function clear_and_select(self)
if self.style.IS_LONGTAP_ERASE then
self:set_text("")
end
select(self)
end
function M.init(self, click_node, text_node, keyboard_type)
self.druid = self:get_druid(self)
self.style = self:get_style(self)
self.text = self.druid:new_text(text_node)
self.selected = false
self.value = self.text.last_value
self.previous_value = self.text.last_value
self.current_value = self.text.last_value
self.marked_value = ""
self.is_empty = true
self.text_width = 0
self.market_text_width = 0
self.total_width = 0
self.max_length = nil
self.allowed_characters = nil
self.keyboard_type = keyboard_type or gui.KEYBOARD_TYPE_DEFAULT
self.button = self.druid:new_button(click_node, select)
self.button:set_style(self.style)
self.button.on_click_outside:subscribe(unselect)
self.button.on_long_click:subscribe(clear_and_select)
self.on_input_select = Event()
self.on_input_unselect = Event()
self.on_input_text = Event()
self.on_input_empty = Event()
self.on_input_full = Event()
self.on_input_wrong = Event()
end
function M.on_input(self, action_id, action)
if self.selected then
local input_text = nil
if action_id == const.ACTION_TEXT then
-- ignore return key
if action.text == "\n" or action.text == "\r" then
return true
end
local hex = string.gsub(action.text,"(.)", function (c)
return string.format("%02X%s",string.byte(c), "")
end)
-- ignore arrow keys
if not string.match(hex, "EF9C8[0-3]") then
if not self.allowed_characters or action.text:match(self.allowed_characters) then
input_text = self.value .. action.text
if self.max_length then
input_text = utf8.sub(input_text, 1, self.max_length)
end
else
self.on_input_wrong:trigger(self:get_context(), action.text)
if self.style.on_input_wrong then
self.style.on_input_wrong(self, self.button.node)
end
end
self.marked_value = ""
end
end
if action_id == const.ACTION_MARKED_TEXT then
self.marked_value = action.text or ""
if self.max_length then
self.marked_value = utf8.sub(self.marked_value, 1, self.max_length)
end
end
if action_id == const.ACTION_BACKSPACE and (action.pressed or action.repeated) then
input_text = utf8.sub(self.value, 1, -2)
end
if action_id == const.ACTION_ENTER and action.released then
unselect(self)
return true
end
if action_id == const.ACTION_BACK and action.released then
unselect(self)
return true
end
if action_id == const.ACTION_ESC and action.released then
unselect(self)
return true
end
if input_text or #self.marked_value > 0 then
self:set_text(input_text)
return true
end
end
return self.selected
end
function M.on_focus_lost(self)
unselect(self)
end
function M.on_input_interrupt(self)
-- unselect(self)
end
--- Set text for input field
-- @function input:set_text
-- @tparam string input_text The string to apply for input field
function M.set_text(self, input_text)
-- Case when update with marked text
if input_text then
self.value = input_text
end
-- Only update the text if it has changed
local current_value = self.value .. self.marked_value
if current_value ~= self.current_value then
self.current_value = current_value
-- mask text if password field
local masked_value, masked_marked_value
if self.keyboard_type == gui.KEYBOARD_TYPE_PASSWORD then
local mask_char = self.style.MASK_DEFAULT_CHAR or "*"
masked_value = mask_text(self.value, mask_char)
masked_marked_value = mask_text(self.marked_value, mask_char)
end
-- text + marked text
local value = masked_value or self.value
local marked_value = masked_marked_value or self.marked_value
self.is_empty = #value == 0 and #marked_value == 0
local final_text = value .. marked_value
self.text:set_to(final_text)
-- measure it
self.text_width = self.text:get_text_width(value)
self.marked_text_width = self.text:get_text_width(marked_value)
self.total_width = self.text_width + self.marked_text_width
self.on_input_text:trigger(self:get_context(), final_text)
if #final_text == 0 then
self.on_input_empty:trigger(self:get_context(), final_text)
end
if self.max_length and #final_text == self.max_length then
self.on_input_full:trigger(self:get_context(), final_text)
end
end
end
--- Return current input field text
-- @function input:get_text
-- @treturn string The current input field text
function M.get_text(self)
return self.value .. self.marked_value
end
--- Set maximum length for input field.
-- Pass nil to make input field unliminted (by default)
-- @function input:set_max_length
-- @tparam number max_length Maximum length for input text field
-- @tparam druid.input Self instance to make chain calls
function M.set_max_length(self, max_length)
self.max_length = max_length
return self
end
--- Set allowed charaters for input field.
-- See: https://defold.com/ref/stable/string/
-- ex: [%a%d] for alpha and numeric
-- @function input:set_allowerd_characters
-- @tparam string characters Regulax exp. for validate user input
-- @tparam druid.input Self instance to make chain calls
function M.set_allowed_characters(self, characters)
self.allowed_characters = characters
return self
end
--- Reset current input selection and return previous value
-- @function input:reset_changes
function M.reset_changes(self)
self:set_text(self.previous_value)
unselect(self)
end

View File

@ -15,7 +15,7 @@ local const = require("druid.const")
local settings = require("druid.system.settings")
local component = require("druid.component")
local M = component.create("lang_text", { const.ON_CHANGE_LANGUAGE })
local M = component.create("lang_text", { const.ON_LANGUAGE_CHANGE })
--- Component init function
@ -35,7 +35,7 @@ function M.init(self, node, locale_id, no_adjust)
end
function M.on_change_language(self)
function M.on_language_change(self)
if self.last_locale then
M.translate(self)
end

View File

@ -64,6 +64,18 @@ local function update_text_area_size(self)
end
-- calculate space width with font
local function get_space_width(self, font)
if not self._space_width[font] then
local no_space = gui.get_text_metrics(font, "1", 0, false, 0, 0).width
local with_space = gui.get_text_metrics(font, " 1", 0, false, 0, 0).width
self._space_width[font] = with_space - no_space
end
return self._space_width[font]
end
--- Component init function
-- @function text:init
-- @tparam node node Gui text node
@ -88,11 +100,34 @@ function M.init(self, node, value, no_adjust)
self.on_set_pivot = Event()
self.on_update_text_scale = Event()
self._space_width = {}
self:set_to(value or gui.get_text(self.node))
return self
end
--- Calculate text width with font with respect to trailing space
-- @function text:get_text_width
-- @tparam[opt] string text
function M.get_text_width(self, text)
text = text or self.last_value
local font = gui.get_font(self.node)
local scale = gui.get_scale(self.node)
local result = gui.get_text_metrics(font, text, 0, false, 0, 0).width
for i = #text, 1, -1 do
local c = string.sub(text, i, i)
if c ~= ' ' then
break
end
result = result + get_space_width(self, font)
end
return result * scale.x
end
--- Set text to text field
-- @function text:set_to
-- @tparam string set_to Text for node
@ -159,4 +194,12 @@ function M.set_pivot(self, pivot)
end
--- Return true, if text with line break
-- @function text:is_multiline
-- @treturn boolean Is text node with line break
function M.is_multiline(self)
return gui.get_line_break(self.node)
end
return M

View File

@ -86,6 +86,19 @@ function Component.get_interests(self)
end
--- Increase input priority in current input stack
-- @function component:increase_input_priority
function Component.increase_input_priority(self)
self._meta.increased_input_priority = true
end
--- Reset input priority in current input stack
-- @function component:reset_input_priority
function Component.reset_input_priority(self)
self._meta.increased_input_priority = false
end
--- Get node for component by name.
-- If component has nodes, node_or_name should be string
-- It auto pick node by template name or from nodes by clone_tree
@ -135,6 +148,7 @@ function Component.setup_component(self, context, style)
context = nil,
nodes = nil,
style = nil,
increased_input_priority = false
}
self:set_context(context)

View File

@ -4,11 +4,17 @@
local M = {}
M.ACTION_TOUCH = hash("touch")
M.ACTION_TEXT = hash("text")
M.ACTION_BACKSPACE = hash("backspace")
M.ACTION_ENTER = hash("enter")
M.ACTION_BACK = hash("back")
M.ACTION_MARKED_TEXT = hash("marked_text")
M.ACTION_BACKSPACE = hash("key_backspace")
M.ACTION_ENTER = hash("key_enter")
M.ACTION_BACK = hash("key_back")
M.ACTION_ESC = hash("key_esc")
M.ACTION_TOUCH = hash("touch")
M.ACTION_SCROLL_UP = hash("scroll_up")
M.ACTION_SCROLL_DOWN = hash("scroll_down")
M.RELEASED = "released"
@ -20,12 +26,14 @@ M.ALL = "all"
--- Component Interests
M.ON_MESSAGE = hash("on_message")
M.ON_UPDATE = hash("on_update")
M.ON_INPUT_HIGH = hash("on_input_high")
M.ON_INPUT = hash("on_input")
M.ON_CHANGE_LANGUAGE = hash("on_change_language")
M.ON_LAYOUT_CHANGED = hash("on_layout_changed")
M.ON_UPDATE = hash("on_update")
M.ON_MESSAGE = hash("on_message")
M.ON_INPUT_HIGH = hash("on_input_high")
M.ON_FOCUS_LOST = hash("on_focus_lost")
M.ON_FOCUS_GAINED = hash("on_focus_gained")
M.ON_LAYOUT_CHANGE = hash("on_layout_change")
M.ON_LANGUAGE_CHANGE = hash("on_language_change")
M.PIVOTS = {
@ -42,8 +50,10 @@ M.PIVOTS = {
M.SPECIFIC_UI_MESSAGES = {
[M.ON_CHANGE_LANGUAGE] = "on_change_language",
[M.ON_LAYOUT_CHANGED] = "on_layout_changed"
[M.ON_FOCUS_LOST] = "on_focus_lost",
[M.ON_FOCUS_GAINED] = "on_focus_gained",
[M.ON_LAYOUT_CHANGE] = "on_layout_change",
[M.ON_LANGUAGE_CHANGE] = "on_language_change",
}
@ -68,6 +78,7 @@ M.SWIPE = {
M.EMPTY_FUNCTION = function() end
M.EMPTY_STRING = ""
M.SPACE_STRING = " "
M.EMPTY_TABLE = {}

View File

@ -22,6 +22,17 @@ local default_style = require("druid.styles.default.style")
local M = {}
local _instances = {}
local function get_druid_instances()
for i = #_instances, 1, -1 do
if _instances[i]._deleted then
table.remove(_instances, i)
end
end
return _instances
end
--- Register external druid component.
-- After register you can create the component with
@ -47,11 +58,14 @@ function M.new(context, style)
if settings.default_style == nil then
M.set_default_style(default_style)
end
return druid_instance(context, style)
local new_instance = druid_instance(context, style)
table.insert(_instances, new_instance)
return new_instance
end
-- Set new default style.
--- Set new default style.
-- @function druid.set_default_style
-- @tparam table style Druid style module
function M.set_default_style(style)
@ -59,7 +73,7 @@ function M.set_default_style(style)
end
-- Set text function.
--- Set text function.
-- Druid locale component will call this function
-- to get translated text. After set_text_funtion
-- all existing locale component will be updated
@ -72,7 +86,7 @@ function M.set_text_function(callback)
end
-- Set sound function.
--- Set sound function.
-- Component will call this function to
-- play sound by sound_id
-- @function druid.set_sound_function
@ -82,4 +96,48 @@ function M.set_sound_function(callback)
end
--- Callback on global window event.
-- Used to trigger on_focus_lost and on_focus_gain
-- @function druid.on_window_callback
-- @tparam string event Event param from window listener
function M.on_window_callback(event)
local instances = get_druid_instances()
if event == window.WINDOW_EVENT_FOCUS_LOST then
for i = 1, #instances do
msg.post(instances[i].url, const.ON_FOCUS_LOST)
end
end
if event == window.WINDOW_EVENT_FOCUS_GAINED then
for i = 1, #instances do
msg.post(instances[i].url, const.ON_FOCUS_GAINED)
end
end
end
--- Callback on global layout change event.
-- @function druid.on_layout_change
function M.on_layout_change()
local instances = get_druid_instances()
for i = 1, #instances do
msg.post(instances[i].url, const.ON_LAYOUT_CHANGE)
end
end
--- Callback on global language change event.
-- Use to update all lang texts
-- @function druid.on_language_change
function M.on_language_change()
local instances = get_druid_instances()
for i = 1, #instances do
msg.post(instances[i].url, const.ON_LANGUAGE_CHANGE)
end
end
return M

View File

@ -15,7 +15,6 @@ M["button"] = {
LONGTAP_TIME = 0.4,
AUTOHOLD_TRIGGER = 0.8,
DOUBLETAP_TIME = 0.4,
IS_HOVER = true,
on_hover = function(self, node, state)
local scale_to = self.start_scale + M.button.HOVER_SCALE
@ -51,6 +50,7 @@ M["scroll"] = {
INERT_SPEED = 25, -- koef. of inert speed
DEADZONE = 6, -- in px
SOFT_ZONE_SIZE = 160, -- size of outside zone (back move)
SCROLL_WHEEL_SPEED = 10,
BACK_SPEED = 0.2, -- lerp speed
ANIM_SPEED = 0.3, -- gui.animation speed to point
}
@ -82,4 +82,40 @@ M["swipe"] = {
}
M["input"] = {
IS_LONGTAP_ERASE = true,
BUTTON_SELECT_INCREASE = 1.1,
MASK_DEFAULT_CHAR = "*",
on_select = function(self, button_node)
local target_scale = self.button.start_scale
gui.animate(button_node, "scale", target_scale * M.input.BUTTON_SELECT_INCREASE, gui.EASING_OUTSINE, 0.15)
end,
on_unselect = function(self, button_node)
local start_scale = self.button.start_scale
gui.animate(button_node, "scale", start_scale, gui.EASING_OUTSINE, 0.15)
end,
on_input_wrong = function(self, button_node)
local start_pos = self.button.start_pos
gui.animate(button_node, "position.x", start_pos.x - 3, gui.EASING_OUTSINE, 0.05, 0, function()
gui.animate(button_node, "position.x", start_pos.x + 3, gui.EASING_OUTSINE, 0.1, 0, function()
gui.animate(button_node, "position.x", start_pos.x, gui.EASING_OUTSINE, 0.05)
end)
end)
end,
button = {
BTN_SOUND = "click",
BTN_SOUND_DISABLED = "click",
DISABLED_COLOR = vmath.vector4(0, 0, 0, 1),
ENABLED_COLOR = vmath.vector4(1),
LONGTAP_TIME = 0.4,
AUTOHOLD_TRIGGER = 0.8,
DOUBLETAP_TIME = 0.4,
}
}
return M

View File

@ -8,7 +8,6 @@ M["button"] = {
ENABLED_COLOR = vmath.vector4(1),
LONGTAP_TIME = 0.4,
DOUBLETAP_TIME = 0.4,
IS_HOVER = false,
}

View File

@ -90,12 +90,27 @@ local function process_input(action_id, action, components, is_input_consumed)
for i = #components, 1, -1 do
local component = components[i]
-- Process increased input priority first
if component._meta.increased_input_priority then
if not is_input_consumed then
is_input_consumed = component:on_input(action_id, action)
else
if component.on_input_interrupt then
component:on_input_interrupt()
end
end
end
end
if not is_input_consumed then
is_input_consumed = component:on_input(action_id, action)
else
if component.on_input_interrupt then
component:on_input_interrupt()
for i = #components, 1, -1 do
local component = components[i]
if not component._meta.increased_input_priority then
if not is_input_consumed then
is_input_consumed = component:on_input(action_id, action)
else
if component.on_input_interrupt then
component:on_input_interrupt()
end
end
end
end
@ -111,6 +126,8 @@ end
function Druid.initialize(self, context, style)
self._context = context
self._style = style or settings.default_style
self._deleted = false
self.url = msg.url()
self.components = {}
end
@ -141,6 +158,8 @@ function Druid.final(self)
components[i]:on_remove()
end
end
self._deleted = true
end
@ -231,6 +250,59 @@ function Druid.on_message(self, message_id, message, sender)
end
--- Druid on focus lost interest function.
-- This one called by on_window_callback by global window listener
-- @function druid:on_focus_lost
function Druid.on_focus_lost(self)
local components = self.components[const.ON_FOCUS_LOST]
if components then
for i = 1, #components do
components[i]:on_focus_lost()
end
end
end
--- Druid on focus gained interest function.
-- This one called by on_window_callback by global window listener
-- @function druid:on_focus_gained
function Druid.on_focus_gained(self)
local components = self.components[const.ON_FOCUS_GAINED]
if components then
for i = 1, #components do
components[i]:on_focus_gained()
end
end
end
--- Druid on layout change function.
-- Called on update gui layout
-- @function druid:on_layout_change
function Druid.on_layout_change(self)
local components = self.components[const.ON_LAYOUT_CHANGE]
if components then
for i = 1, #components do
components[i]:on_layout_change()
end
end
end
--- Druid on language change.
-- This one called by global gruid.on_language_change, but can be
-- call manualy to update all translations
-- @function druid.on_language_change
function Druid.on_language_change(self)
local components = self.components[const.ON_LANGUAGE_CHANGE]
if components then
for i = 1, #components do
components[i]:on_language_change()
end
end
end
--- Create button basic component
-- @function druid:new_button
-- @tparam args ... button init args

1045
druid/system/utf8.lua Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -8,6 +8,7 @@ local text_page = require("example.page.texts")
local button_page = require("example.page.button")
local scroll_page = require("example.page.scroll")
local slider_page = require("example.page.slider")
local input_page = require("example.page.input")
local pages = {
"main_page",
@ -15,6 +16,7 @@ local pages = {
"button_page",
"scroll_page",
"slider_page",
"input_page",
}
local function on_control_button(self, delta)
@ -51,10 +53,17 @@ local function init_swipe_control(self)
end
local function on_window_callback(self, event, data)
druid.on_window_callback(event, data)
end
function init(self)
druid.set_default_style(default_style)
self.druid = druid.new(self)
window.set_listener(on_window_callback)
init_top_panel(self)
init_swipe_control(self)
self.page = 1
@ -63,6 +72,7 @@ function init(self)
button_page.setup_page(self)
scroll_page.setup_page(self)
slider_page.setup_page(self)
input_page.setup_page(self)
-- Refresh state
on_control_button(self, 0)

View File

@ -1,5 +1,4 @@
local druid = require("druid.druid")
local const = require("druid.const")
local lang = require("example.lang")
@ -12,9 +11,7 @@ local function setup_druid()
return lang.get_locale(lang_id)
end)
-- TODO: Call druid.finish_setup?
-- Need to update all gui, in case, when gui init was befure this init
msg.post("/gui#main", const.ON_CHANGE_LANGUAGE)
druid.on_language_change()
end

View File

@ -1,4 +1,4 @@
local const = require("druid.const")
local druid = require("druid.druid")
local M = {}
@ -8,6 +8,7 @@ local en = {
button_page = "Button page",
scroll_page = "Scroll page",
slider_page = "Slider page",
input_page = "Input page",
ui_section_button = "Button",
ui_section_text = "Text",
ui_section_timer = "Timer",
@ -25,6 +26,7 @@ local ru = {
button_page = "Кнопки",
scroll_page = "Скролл",
slider_page = "Слайдеры",
input_page = "Текст. ввод",
ui_section_button = "Кнопка",
ui_section_text = "Текст",
ui_section_timer = "Таймер",
@ -47,7 +49,7 @@ end
function M.toggle_locale()
data = data == en and ru or en
msg.post("/gui#main", const.ON_CHANGE_LANGUAGE)
druid.on_language_change()
end
return M

13
example/page/input.lua Normal file
View File

@ -0,0 +1,13 @@
local M = {}
function M.setup_page(self)
self.druid:new_input("input_box_usual", "input_text_usual")
self.druid:new_input("input_box_password", "input_text_password", gui.KEYBOARD_TYPE_PASSWORD)
self.druid:new_input("input_box_email", "input_text_email", gui.KEYBOARD_TYPE_EMAIL)
self.druid:new_input("input_box_numpad", "input_text_numpad", gui.KEYBOARD_TYPE_NUMBER_PAD)
:set_allowed_characters("[%d,.]")
end
return M

View File

@ -106,6 +106,12 @@ local function setup_back_handler(self)
end
local function setup_input(self)
local input = self.druid:new_input("input_box", "input_text")
input:set_text("hello!")
end
function M.setup_page(self)
setup_texts(self)
@ -117,6 +123,7 @@ function M.setup_page(self)
setup_scroll(self)
setup_slider(self)
setup_back_handler(self)
setup_input(self)
end

View File

@ -36,3 +36,7 @@ app_manifest = /example/game.appmanifest
[graphics]
texture_profiles = /example/custom.texture_profiles
[android]
package = com.insality.druid
input_method = HiddenInputField

View File

@ -1,16 +1,40 @@
key_trigger {
input: KEY_BACKSPACE
action: "back"
action: "key_backspace"
}
key_trigger {
input: KEY_BACK
action: "back"
action: "key_back"
}
key_trigger {
input: KEY_SPACE
action: "key_space"
}
key_trigger {
input: KEY_ENTER
action: "key_enter"
}
key_trigger {
input: KEY_ESC
action: "key_esc"
}
mouse_trigger {
input: MOUSE_BUTTON_1
action: "touch"
}
mouse_trigger {
input: MOUSE_WHEEL_UP
action: "scroll_up"
}
mouse_trigger {
input: MOUSE_WHEEL_DOWN
action: "scroll_down"
}
text_trigger {
input: TEXT
action: "text"
}
text_trigger {
input: MARKED_TEXT
action: "marked_text"
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
media/input_binding_1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
media/input_binding_2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB