Merge branch 'develop'

Renamed class functions

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Alexey Gulev
+Copyright (c) 2020 Maxim Tuprikov
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,101 +1,210 @@
 [![](media/druid_logo.png)](https://insality.github.io/druid/)
 
-**Druid** - powerful defold component UI library. Use basic druid components or make your own game-specific components to make amazing GUI in your games.
+[![GitHub release (latest by date)](https://img.shields.io/github/v/release/insality/druid)](https://github.com/Insality/druid/releases)
+
+**Druid** - powerful Defold component UI library. Use basic and extended **Druid** components or make your own game-specific components to make amazing GUI in your games.
 
 
 ## Setup
 
 ### Dependency
 
-You can use the druid extension in your own project by adding this project as a  [Defold library dependency](https://www.defold.com/manuals/libraries/). Open your game.project file and in the dependencies field under project add:
+You can use the **Druid** extension in your own project by adding this project as a [Defold library dependency](https://www.defold.com/manuals/libraries/). Open your game.project file and in the dependencies field under project add:
 
 > [https://github.com/Insality/druid/archive/master.zip](https://github.com/Insality/druid/archive/master.zip)
 
 Or point to the ZIP file of a  [specific release](https://github.com/Insality/druid/releases).
 
+### Input bindings
 
-### Code
+For **Druid** to work requires next input bindings:
 
-Adjust druid settings, if needed:
+- Mouse trigger - `Button 1` -> `touch` _For basic input components_
+- 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_
+- Touch triggers - `Touch multi` -> `multitouch` _For scroll component_
+
+![](media/input_binding_2.png)
+![](media/input_binding_1.png)
+
+
+### Input capturing [optional]
+
+By default, **Druid** will auto-capture input focus, if any input component will be created. So you don't need to call `msg.post(".", "acquire_input_focus")`
+
+If you not need this behaviour, you can disable it by settings `druid.no_auto_input` field in _game.project_:
+```
+[druid]
+no_auto_input = 1
+```
+
+### Code [optional]
+
+Adjust **Druid** settings, if needed:
 ```lua
 local druid = require("druid.druid")
 
 -- Used for button component and custom components
+-- Callback should play sound by name
 druid.set_sound_function(callback)
 
 -- Used for lang_text component
+-- Callback should return localized string by locale id
 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_language_change()
+
+-- Call this function inside window.set_listener
+-- to catch game focus lost/gained callbacks:
+druid.on_window_callback(event)
 ```
 
 
 ## Components
 
-Druid provides next basic components:
-- **Button** - Basic game button
+**Druid** provides next *basic* components:
 
-- **Text** - Wrap on text node with text size adjusting
+- **[Button](master/docs_md/01-components.md#button)** - Basic Druid button input component. Handles all types of interaction (tap, long-tap, hold-tap, double-tap, simple key triggers, etc)
 
-- **Blocker** - Block input in node zone
+- **[Text](master/docs_md/01-components.md#text)** - Basic Druid text component. Wrap on gui text node, handle text size adjusting.
 
-- **Back Handler** - Handle back button (Android, backspace)
+- **[Scroll](master/docs_md/01-components.md#scroll)** - Basic Druid scroll component
 
-- **Lang text** - Text component with handle localization system
+- **[Blocker](master/docs_md/01-components.md#blocker)** - Block input in node zone component
 
-- **Timer** - Run timer on text node
+- **[Back Handler](master/docs_md/01-components.md#back-handler)** - Handle back button (Android back button, backspace key)
 
-- **Progress** - Basic progress bar
+- **[Static Grid](master/docs_md/01-components.md#static-grid)** - Component for manage node positions with equal sizes
 
-- **Scroll** - Basic scroll component
+- **[Hover](master/docs_md/01-components.md#hover)** - System Druid component, handle hover node state
 
-- **Grid** - Component for manage node positions
+- **[Swipe](master/docs_md/01-components.md#swipe)** - System Druid component, handle swipe gestures on node
 
-- **Slider** - Basic slider component
+- **[Drag](master/docs_md/01-components.md#drag)** - System Druid component, handle drag input on node 
 
-- **Checkbox** - Basic checkbox component
+**Druid** also provides next *extended* components:
 
-- **Checkbox group** - Several checkboxes in one group
+***Note**: In future, to use extended components, you should register them first. It's required for make **Druid** modular - to exclude unused components from build*
 
-- **Radio group** - Several checkboxes in one group with single choice
+- **[Checkbox](master/docs_md/01-components.md#checkbox)** - Checkbox component
 
-- **Hover** - Trigger component for check node hover state
+- **[Checkbox group](master/docs_md/01-components.md#checkbox-group)** - Several checkboxes in one group
 
-- **Input** - Component to process user text input
+- **[Dynamic Grid](master/docs_md/01-components.md#dynamic-grid)** - Component for manage node positions with different sizes. Only in one row or column
 
-Full info see on _components.md_
+- **[Input](master/docs_md/01-components.md#input)** - User text input component
+
+- **[Lang text](master/docs_md/01-components.md#lang-text)** - Wrap on Text component to handle localization
+
+- **[Progress](master/docs_md/01-components.md#progress)** - Progress bar component
+
+- **[Radio group](master/docs_md/01-components.md#radio-group)** - Several checkboxes in one group with single choice
+
+- **[Slider](master/docs_md/01-components.md#slider)** - Slider component
+
+- **[Timer](master/docs_md/01-components.md#timer)** - Handle timer work on gui text node
+
+Full info see on _[components.md](master/docs_md/01-components.md)_
 
 
-## Creating components
+## Basic usage
+
+For using **Druid**, first you should create Druid instance to spawn components. Pass to new Druid instance main engine functions: *update*, *on_message* and *on_input*
+
+All **Druid** components as arguments can apply node name string, you can don't do `gui.get_node()` before
+
+All **Druid** and component methods calling with `:` like `self.druid:new_button()`
 
-Any components creating via druid:
 ```lua
 local druid = require("druid.druid")
 
-local function init(self)
-	self.druid = druid.new(self)
-	local button = self.druid:new_button(node_name, callback)
-	local text = self.druid:new_text(node_text_name)
+local function button_callback(self)
+    print("Button was clicked!")
 end
 
-function update(self, dt)
-	self.druid:update(dt)
+function init(self)
+    self.druid = druid.new(self)
+    self.druid:new_button("button_node_name", button_callback)
 end
 
-function on_message(self, message_id, message, sender)
-	self.druid:on_message(message_id, message, sender)
+function final(self)
+    self.druid:final()
 end
 
 function on_input(self, action_id, action)
-	self.druid:on_input(action_id, action)
+    return self.druid:on_input(action_id, action)
 end
 ```
 
+Learn **Druid** instance [functions here](https://insality.github.io/druid/modules/druid_instance.html))
+
+## Druid Events
+
+Any **Druid** components as callbacks uses [Druid Events](https://insality.github.io/druid/modules/druid_event.html). In component API ([button example](https://insality.github.io/druid/modules/druid.button.html#Events)) pointed list of component events. You can manually subscribe on this events by next API:
+
+- **event:subscribe**(callback)
+
+- **event:unsubscribe**(callback)
+
+- **event:clear**()
+
+You can subscribe several callbacks on single event.
+
+## Druid Lifecycle
+
+Here is full Druid lifecycle setup in your ***.gui_script** file:
+```lua
+local druid = require("druid.druid")
+
+function init(self)
+    self.druid = druid.new(self)
+end
+
+function final(self)
+    self.druid:final()
+end
+
+function update(self, dt)
+    self.druid:update(dt)
+end
+
+function on_input(self, action_id, action)
+    return self.druid:on_input(action_id, action)
+end
+
+function on_message(self, message_id, message, sender)
+    self.druid:on_message(message_id, message, sender)
+end
+```
+
+- *final* **required** function for correct Druid lifecycle
+- *on_input* used for almost all Druid components
+- *update* used for progress bar, scroll and timer base components
+- *on_message* used for specific Druid events, like language change or layout change
+
+Recommended is fully integrate all **Druid** lifecycles functions
+
+
+## Details
+
+- Druid input goes as stack. Last created button will checked first. So create your GUI from back
+- Don't forget about `return` in `on_input`: `return self.druid:on_input()`. It need, if you have more than 1 acquire inputs (several Druid, other input system, etc)
+- Druid by default do _acquire_input_focus_. So you don't need do it manually. Buy only if you have components, which requires _on_input_ 
+- If you want to delete node with declared Druid component, don't forget to remove them via `druid:remove(component)`
+
+See full [See FAQ here](master/docs_md/FAQ.md)
+
 
 ## Examples
 
-See the [example folder](https://github.com/insality/druid/tree/develop/example/kenney) for examples of how to use Druid
+See the [example folder](https://github.com/Insality/druid/tree/develop/example) for examples of how to use **Druid**
 
 See the [druid-assets repository](https://github.com/insality/druid-assets) for examples of how to create custom components and styles
 
@@ -104,41 +213,29 @@ Try the [HTML5 version](https://insality.github.io/druid/druid/) of the example
 
 ## Documentation
 
-To learn druid better, read next documentation:
-- Druid components
-- Create custom components
-- Druid asset store
-- Druid Styles
+To learn **Druid** better, read next documentation:
+- [Druid components](master/docs_md/01-components.md)
+- [Create custom components](master/docs_md/02-creating_custom_components.md)
+- [See FAQ article](master/docs_md/FAQ.md)
+- [Druid styles](master/docs_md/03-styles.md)
+- [Druid asset store](master/docs_md/04-druid_assets.md)
 
-Full druid documentation you can find here:
+Full **Druid** documentation you can find here:
 https://insality.github.io/druid/
 
 
 ## Games powered by Druid
 
-_Will fill later_
-
-
-## Future plans
-
-- Basic input component
-
-- Add on_layout_change support (to keep gui data between layout change)
-
-- Add on_change_language support (call single function to update all druid instance)
-
-- Better documentation and examples
-
-- Add more comfortable gamepad support for GUI (ability to select button with DPAD and other stuff)
+_You published your game and you using Druid? Note me!_
 
 
 ## License
 
-Original created by [AGulev](https://github.com/AGulev)
+- Developed and supporting by [Insality](https://github.com/Insality)
+- Original idea by [AGulev](https://github.com/AGulev)
+- Assets from [Kenney](http://www.kenney.nl/)
 
-Developed and supporting by [Insality](https://github.com/Insality)
-
-MIT License
+**MIT** License
 
 
 ## Issues and suggestions

alpha_todo.txt

@@ -1,38 +0,0 @@
-Simple to-do for Druid Alpha 0.2.0
-
-
--- High
-+ remove button event and match_event from druid
-+ add hover component
-+ add druid events/triggers? better callback system
-+ better name for locale component? lang? lang_text?
-+ better name for slider component? Slider is ok
-+ Druid store assets - separate repository with rich components (progress_rich migrate)
-+ refactor on_swipe. To on_scroll? Add input priority
-+ separate custom data and predefined fields in components? Every component have their fields and events
-+ How to set custom sprites for button states?
-+ add druid settings (add auto_focus input and other stuff) (to game.project)
-
-+ button add key trigger
-+ button and hover click restriction zone?
-+ button polish, actions
-+ better scroll size management, check different cases. So implicit now
-+ better callbacks for every components
-
-- unify component api (get/set/to and other general stuff)
-- better grid + scroll management
-- better default style, add template for custom style
-- compare with gooey
-- add docs for all components
-- add docs folder for every component with gifs? Solutions
-- remove component autoremove all children component
-
-
--- Low
-- add input_text component for alpha release
-- add code template and example for user components
-- custom input settings (name of touch, text, etc)
-- add good examples with template and/or nodes (basic component no use any of them)
-- try use final druid in real project (FI uses custom druid) (use in 4321?)
-- ability to relocalize all locale text nodes
-- ability to control buttons via controller. Select it by cursor (d-pad)

docs/druid/archive/archive_files.json

@@ -1 +1 @@
-{"content":[{"name":"game.projectc","size":2584,"pieces":[{"name":"game.projectc0","offset":0}]},{"name":"game.arci","size":4608,"pieces":[{"name":"game.arci0","offset":0}]},{"name":"game.arcd","size":274093,"pieces":[{"name":"game.arcd0","offset":0}]},{"name":"game.dmanifest","size":9895,"pieces":[{"name":"game.dmanifest0","offset":0}]},{"name":"game.public.der","size":162,"pieces":[{"name":"game.public.der0","offset":0}]}]}
+{"content":[{"name":"game.projectc","size":3140,"pieces":[{"name":"game.projectc0","offset":0}]},{"name":"game.arci","size":5168,"pieces":[{"name":"game.arci0","offset":0}]},{"name":"game.arcd","size":287011,"pieces":[{"name":"game.arcd0","offset":0}]},{"name":"game.dmanifest","size":11332,"pieces":[{"name":"game.dmanifest0","offset":0}]},{"name":"game.public.der","size":162,"pieces":[{"name":"game.public.der0","offset":0}]}]}

docs/druid/archive/game.projectc0

@@ -1,6 +1,6 @@
 [project]
 title = druid
-version = 1.0
+version = 0.5.0
 write_log = 0
 compress_archive = 1
 
@@ -14,7 +14,12 @@ update_frequency = 0
 vsync = 1
 display_profiles = /builtins/render/default.display_profilesc
 dynamic_orientation = 0
-clear_color = 0
+
+[render]
+clear_color_red = 0
+clear_color_green = 0
+clear_color_blue = 0
+clear_color_alpha = 0
 
 [physics]
 type = 2D
@@ -25,6 +30,7 @@ world_count = 4
 gravity_x = 0
 gravity_z = 0
 scale = 1
+allow_dynamic_transforms = 0
 debug_scale = 30
 max_collisions = 64
 max_contacts = 128
@@ -43,7 +49,11 @@ default_texture_mag_filter = linear
 max_draw_calls = 1024
 max_characters = 8192
 max_debug_vertices = 10000
-texture_profiles = /builtins/graphics/default.texture_profiles
+texture_profiles = /example/custom.texture_profiles
+verify_graphics_calls = 1
+
+[shader]
+output_spirv = 0
 
 [sound]
 gain = 1
@@ -51,6 +61,7 @@ max_sound_data = 128
 max_sound_buffers = 32
 max_sound_sources = 16
 max_sound_instances = 256
+max_component_count = 32
 
 [resource]
 http_cache = 0
@@ -61,7 +72,7 @@ repeat_delay = 0.5
 repeat_interval = 0.2
 gamepads = /builtins/input/default.gamepadsc
 game_binding = /input/game.input_bindingc
-use_accelerometer = 1
+use_accelerometer = 0
 
 [sprite]
 max_count = 128
@@ -80,6 +91,7 @@ max_particle_count = 1024
 
 [collection]
 max_instances = 1024
+max_input_stack_entries = 16
 
 [collection_proxy]
 max_count = 8
@@ -91,36 +103,44 @@ max_count = 128
 max_count = 128
 
 [ios]
+launch_screen = /builtins/manifests/ios/LaunchScreen.storyboardc
 pre_renderered_icons = 0
 bundle_identifier = example.unnamed
 infoplist = /builtins/manifests/ios/Info.plist
+default_language = en
+localizations = en
 
 [android]
 version_code = 1
 minimum_sdk_version = 16
-target_sdk_version = 28
-package = com.example.todo
+target_sdk_version = 29
+package = com.insality.druid
 manifest = /builtins/manifests/android/AndroidManifest.xml
 iap_provider = GooglePlay
-input_method = KeyEvent
+input_method = HiddenInputField
 immersive_mode = 0
+display_cutout = 1
 debuggable = 0
 
 [osx]
 infoplist = /builtins/manifests/osx/Info.plist
 bundle_identifier = example.unnamed
+default_language = en
+localizations = en
 
 [windows]
 
 [html5]
 custom_heap_size = 0
-heap_size = 256
+heap_size = 64
 htmlfile = /builtins/manifests/web/engine_template.html
 cssfile = /builtins/manifests/web/light_theme.css
 archive_location_prefix = archive
-show_fullscreen_button = 1
-show_made_with_defold = 1
-scale_mode = downscale_fit
+show_fullscreen_button = 0
+show_made_with_defold = 0
+scale_mode = fit
+engine_arguments = --verify-graphics-calls=false
+splash_image = /media/druid_logo.png
 
 [particle_fx]
 max_count = 64
@@ -152,6 +172,12 @@ settings = /liveupdate.settings
 max_count = 16
 max_tile_count = 2048
 
-[druid]
-autofocus = 1
+[engine]
+run_while_iconified = 0
+
+[druid]
+no_auto_input = 0
+
+[native_extension]
+app_manifest = /example/game.appmanifest
 

docs/druid/dmloader.js

@@ -23,6 +23,7 @@ var Combine = {
     _onAllTargetsBuilt:[],      // signature: void
     _onDownloadProgress: [],    // signature: downloaded, total
 
+    _currentDownloadBytes: 0,
     _totalDownloadBytes: 0,
 
     _retry_time: 0,             // pause before retry file loading after error
@@ -31,7 +32,7 @@ var Combine = {
 
     _archiveLocationFilter: function(path) { return "split" + path; },
 
-    can_not_download_file: function(file) { 
+    can_not_download_file: function(file) {
         if (typeof Combine._can_not_download_file_callback === 'function') {
             Combine._can_not_download_file_callback(file);
         }
@@ -91,6 +92,7 @@ var Combine = {
         this._onAllTargetsBuilt = [];
         this._onDownloadProgress = [];
 
+        this._currentDownloadBytes = 0;
         this._totalDownloadBytes = 0;
     },
 
@@ -98,6 +100,7 @@ var Combine = {
         var json = JSON.parse(xhr.responseText);
         this._targets = json.content;
         this._totalDownloadBytes = 0;
+        this._currentDownloadBytes = 0;
 
         var targets = this._targets;
         for(var i=0; i<targets.length; ++i) {
@@ -129,38 +132,42 @@ var Combine = {
             throw "Request out of order";
         }
 
-        target.lastRequestedPiece = index;
-        target.progress = {};
-
         var item = target.pieces[index];
+        target.lastRequestedPiece = index;
+
+        var total = 0;
+        var downloaded = 0;
         var xhr = new XMLHttpRequest();
-        xhr.open('GET', this._archiveLocationFilter('/' + item.name), true);
+        var url = this._archiveLocationFilter('/' + item.name);
+        xhr.open('GET', url, true);
         xhr.responseType = 'arraybuffer';
+        // called periodically with information about the transaction
         xhr.onprogress = function(evt) {
-           target.progress[item.name] = {total: 0, downloaded: 0};
             if (evt.total && evt.lengthComputable) {
-                target.progress[item.name].total = evt.total;
+                total = evt.total;
             }
             if (evt.loaded && evt.lengthComputable) {
-                target.progress[item.name].downloaded = evt.loaded;
+                var delta = evt.loaded - downloaded;
+                downloaded = evt.loaded;
+                Combine._currentDownloadBytes += delta;
                 Combine.updateProgress(target);
             }
         };
+        // called when the transaction completes successfully
         xhr.onload = function(evt) {
             item.data = new Uint8Array(xhr.response);
             item.dataLength = item.data.length;
-            target.progress[item.name].total = item.dataLength;
-            target.progress[item.name].downloaded = item.dataLength;
+            total = item.dataLength;
+            downloaded = item.dataLength;
             Combine.copyData(target, item);
             Combine.onPieceLoaded(target, item);
             Combine.updateProgress(target);
             item.data = undefined;
         };
+        // called when the transaction fails
         xhr.onerror = function(evt) {
-            if (target.progress[item.name]) {
-                target.progress[item.name].downloaded = 0;
-                Combine.updateProgress(target);
-            }
+            downloaded = 0;
+            Combine.updateProgress(target);
             attempt_count += 1;
             if (attempt_count < Combine._max_retry_count) {
                 console.warn("Can't download file '" + item.name + "' . Next try in " + Combine._retry_time + " sec.");
@@ -168,19 +175,15 @@ var Combine = {
                     Combine.requestPiece(target, index, attempt_count);
                 }, Combine._retry_time * 1000);
             } else {
-                    Combine.can_not_download_file(item.name);
+                Combine.can_not_download_file(item.name);
             }
         };
         xhr.send(null);
     },
 
     updateProgress: function(target) {
-        var total_downloaded = 0;
-        for (var p in target.progress) {
-            total_downloaded += target.progress[p].downloaded;
-        }
         for(i = 0; i<this._onDownloadProgress.length; ++i) {
-            this._onDownloadProgress[i](total_downloaded, this._totalDownloadBytes);
+            this._onDownloadProgress[i](this._currentDownloadBytes, this._totalDownloadBytes);
         }
     },
 
@@ -477,7 +480,7 @@ var Module = {
             persistent_storage: true,
             custom_heap_size: undefined,
             disable_context_menu: true,
-            retry_time: 1, 
+            retry_time: 1,
             retry_count: 10,
             can_not_download_file_callback: undefined,
         };
@@ -697,5 +700,3 @@ window.onerror = function(err, url, line, column, errObj) {
         if (text) Module.printErr('[post-exception status] ' + text);
     };
 };
-
-

docs/druid/index.html

@@ -7,7 +7,7 @@
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 
-	<title>druid 1.0</title>
+	<title>druid 0.5.0</title>
 	<style type='text/css'>
 	/* Disable user selection to avoid strange bug in Chrome on Windows:
 	* Selecting a text outside the canvas, then clicking+draging would
@@ -76,29 +76,6 @@
 		text-align: center;
 		line-height: 20px;
 	}
-	
-	.button {
-		background-image: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' baseProfile='full' width='16' height='16' viewBox='0 0 16 16' version='1.1' xml:space='preserve'%3E%3Ctitle%3Eic-16-fullscreen%3C/title%3E%3Cg id='ic-16-fullscreen' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M3,11.5 C3,11.776 3.224,12 3.5,12 L12.5,12 C12.776,12 13,11.776 13,11.5 L13,4.5 C13,4.224 12.776,4 12.5,4 L3.5,4 C3.224,4 3,4.224 3,4.5 L3,11.5 Z M14,11 L14,13 L12,13 C11.724,13 11.5,13.224 11.5,13.5 C11.5,13.776 11.724,14 12,14 L14.5,14 C14.776,14 15,13.776 15,13.5 L15,11 C15,10.724 14.776,10.5 14.5,10.5 C14.224,10.5 14,10.724 14,11 Z M12,2 C11.724,2 11.5,2.224 11.5,2.5 C11.5,2.776 11.724,3 12,3 L14,3 L14,5 C14,5.276 14.224,5.5 14.5,5.5 C14.776,5.5 15,5.276 15,5 L15,2.5 C15,2.224 14.776,2 14.5,2 L12,2 Z M2,13 L2,11 C2,10.724 1.776,10.5 1.5,10.5 C1.224,10.5 1,10.724 1,11 L1,13.5 C1,13.776 1.224,14 1.5,14 L4,14 C4.276,14 4.5,13.776 4.5,13.5 C4.5,13.224 4.276,13 4,13 L2,13 Z M1,2.5 C1,2.224 1.224,2 1.5,2 L4,2 C4.276,2 4.5,2.224 4.5,2.5 C4.5,2.776 4.276,3 4,3 L2,3 L2,5 C2,5.276 1.776,5.5 1.5,5.5 C1.224,5.5 1,5.276 1,5 L1,2.5 Z ' id='fill_1' fill='%23006fff'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
-		background-repeat: no-repeat;
-		border-color: transparent;
-		float: left;
-		color: #006fff;
-		padding-left: 50%;
-		padding: 0px 0px 0px 20px;
-		cursor:pointer;
-		background-position: left bottom;
-		margin-left: 2px;
-	}
-	.link {
-		text-align: right;
-		color: #4e5258;
-		margin-right: 2px;
-	}
-	a {
-		font-weight: 600;
-		color: #006fff;
-		text-decoration: none;
-	}
 	.link, .button {
 		font-family: sans-serif;
 		font-size: 14px;
@@ -134,8 +111,7 @@
 	.canvas-app-canvas {
 		background-repeat:no-repeat;
 		background-position: center center;
-		background-size: 70%;
-		background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='300px' height='64px' viewBox='-2467.5 2469 300 64' style='enable-background:new -2467.5 2469 300 64;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%2315244A;%7D .st1%7Bfill:url(%23SVGID_1_);%7D .st2%7Bfill:url(%23SVGID_2_);%7D%0A%3C/style%3E%3Ctitle%3Edefold-logo-html5-splash%3C/title%3E%3Cpolygon class='st0' points='-2177,2482.9 -2175.5,2482.9 -2175.5,2486.7 -2174.4,2486.7 -2174.4,2482.9 -2173.2,2482.9 -2173.2,2481.9 -2177,2481.9 '/%3E%3Cpolygon class='st0' points='-2169.8,2484.1 -2171,2482.1 -2172.1,2482.1 -2172.1,2486.7 -2171,2486.7 -2171,2483.5 -2169.7,2485.6 -2169.7,2485.6 -2168.5,2483.5 -2168.5,2486.7 -2167.5,2486.7 -2167.5,2482.1 -2168.6,2482.1 '/%3E%3Cpath class='st0' d='M-2376,2482h-13.8v38h13.6c6.6,0,12.2-1.9,16.1-5.5c3.8-3.5,5.8-8.5,5.7-13.7v-0.1 C-2354.5,2489.3-2362.9,2482-2376,2482z M-2364,2501.2c0,6.7-4.5,10.9-11.8,10.9h-4.7v-22h4.7c7.3,0,11.8,4.2,11.8,10.9 L-2364,2501.2z'/%3E%3Cpolygon class='st0' points='-2340.9,2505 -2325.1,2505 -2325.1,2497.4 -2340.9,2497.4 -2340.9,2489.6 -2322.4,2489.6 -2322.4,2481.9 -2350.1,2481.9 -2350.1,2520 -2322.2,2520 -2322.2,2512.4 -2340.9,2512.4 '/%3E%3Cpolygon class='st0' points='-2317.1,2481.9 -2317.1,2520 -2307.9,2520 -2307.9,2505.9 -2293,2505.9 -2293,2498.4 -2307.9,2498.4 -2307.9,2489.9 -2289.6,2489.9 -2289.6,2481.9 '/%3E%3Cpolygon class='st0' points='-2233,2482.1 -2242.2,2482.1 -2242.2,2520 -2216.3,2520 -2216.3,2512.2 -2233,2512.2 '/%3E%3Cpath class='st0' d='M-2197.1,2482h-13.7v38h13.5c6.7,0,12.2-1.9,16.1-5.5c3.8-3.5,5.8-8.5,5.7-13.7v-0.1 C-2175.5,2489.3-2184,2482-2197.1,2482z M-2185.1,2501.2c0,6.7-4.5,10.9-11.8,10.9h-4.7v-22h4.7c7.3,0,11.8,4.2,11.8,10.9V2501.2z' /%3E%3Cpath class='st0' d='M-2267.5,2481.7c-10.8,0-19.6,8.8-19.6,19.7c0,10.8,8.8,19.6,19.7,19.6c10.8,0,19.6-8.8,19.6-19.6l0,0 C-2247.8,2490.5-2256.6,2481.7-2267.5,2481.7C-2267.5,2481.7-2267.5,2481.7-2267.5,2481.7z M-2258,2507.9l-8.8,5.1 c-0.5,0.3-1.2,0.3-1.8,0l-8.8-5.1c-0.5-0.3-0.9-0.9-0.9-1.5v-10.2c0-0.6,0.3-1.2,0.9-1.5l8.8-5.1c0.5-0.3,1.2-0.3,1.8,0l8.8,5.1 c0.5,0.3,0.9,0.9,0.9,1.5v10.2C-2257.1,2507-2257.4,2507.6-2258,2507.9z'/%3E%3Cpath class='st0' d='M-2423.2,2494.6l-11.1,6.4l-11.1-6.4l11.1-6.4L-2423.2,2494.6z M-2412.1,2501v12.8l11.1-6.4L-2412.1,2501z M-2467.5,2507.4l11.1,6.4V2501L-2467.5,2507.4z M-2434.3,2526.6l11.1,6.4l11.1-6.4l-11.1-6.4l11.1-6.4l-11.1-6.4l-11.1,6.4 l-11.1-6.4l-11.1,6.4l11.1,6.4l-11.1,6.4l11.1,6.4L-2434.3,2526.6z'/%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='-2451.2178' y1='2525.4604' x2='-2406.2178' y2='2499.6304' gradientTransform='matrix(1 0 0 -1 0 5004)'%3E%3Cstop offset='0' style='stop-color:%231C68EC'/%3E%3Cstop offset='1' style='stop-color:%2300E9DF'/%3E%3C/linearGradient%3E%3Cpath class='st1' d='M-2412.1,2513.8v12.8l-11.1-6.4L-2412.1,2513.8z M-2434.3,2513.8V2501l-11.1-6.4v12.8L-2434.3,2513.8z M-2445.4,2469v12.8l11.1-6.4L-2445.4,2469z M-2412.1,2488.2L-2412.1,2488.2 M-2423.2,2507.4l11.1,6.4V2501l11.1,6.4v-12.8 l-11.1-6.4v-12.8l0,0l-11.1-6.4v12.8l-11.1-6.4v12.8l11.1,6.4V2507.4z'/%3E%3ClinearGradient id='SVGID_2_' gradientUnits='userSpaceOnUse' x1='-2465.9385' y1='2521.2493' x2='-2423.5085' y2='2496.7893' gradientTransform='matrix(1 0 0 -1 0 5004)'%3E%3Cstop offset='0' style='stop-color:%23FF3C2A'/%3E%3Cstop offset='1' style='stop-color:%23FFD215'/%3E%3C/linearGradient%3E%3Cpath class='st2' d='M-2434.3,2513.8V2501l11.1-6.4v12.8L-2434.3,2513.8z M-2434.3,2475.4l11.1,6.4V2469L-2434.3,2475.4z M-2456.5,2488.2L-2456.5,2488.2 M-2445.4,2494.6l11.1-6.4v-12.8l-11.1,6.4V2469l-11.1,6.4l0,0v12.8l-11.1,6.4v12.8l11.1-6.4v12.8 l11.1-6.4V2494.6z M-2456.5,2513.8v12.8l11.1-6.4L-2456.5,2513.8z'/%3E%3C/svg%3E%0A");
+		background-image: url("druid_logo.png");
 	}
 	</style>
 </head>
@@ -144,8 +120,6 @@
 	<div id="app-container" class="canvas-app-container">
 		<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="600" height="900"></canvas>
 		<div class="buttons-background">
-			<div class="button" onclick="Module.toggleFullscreen();">Fullscreen</div>
-			<div class="link">Made with <a href="https://defold.com/" target="_blank">Defold</a></div>
 		</div>
 	</div>
 	<!-- -->
@@ -156,8 +130,8 @@
 		archive_location_filter: function( path ) {
 			return ("archive" + path + "");
 		},
-		engine_arguments: [],
-		custom_heap_size: 268435456,
+		engine_arguments: ["--verify-graphics-calls=false",],
+		custom_heap_size: 67108864,
 		disable_context_menu: true
 	}
 
@@ -177,8 +151,6 @@
 
 	var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 	var buttonHeight = 0;
-	buttonHeight = 42;
-	buttonHeight = 42;
 	// Resize on init, screen resize and orientation change
 	function resize_game_canvas() {
 		// Hack for iOS when exit from Fullscreen mode
@@ -195,29 +167,23 @@
 		var targetRatio = width / height;
 		var actualRatio = innerWidth / innerHeight;
 	
-		//Downscale fit
-		if (innerWidth < width || innerHeight < height) {
-			if (actualRatio > targetRatio) {
-				width = innerHeight * targetRatio;
-				height = innerHeight;
-				app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
-				app_container.style.marginTop = "0px";
-			}
-			else {
-				width = innerWidth;
-				height = innerWidth / targetRatio;
-				app_container.style.marginLeft = "0px";
-				app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
-			}
+	
+	
+		//Fit
+		if (actualRatio > targetRatio) {
+			width = innerHeight * targetRatio;
+			height = innerHeight;
+			app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
+			app_container.style.marginTop = "0px";
 		}
 		else {
-			app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
+			width = innerWidth;
+			height = innerWidth / targetRatio;
+			app_container.style.marginLeft = "0px";
 			app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
 		}
 	
 	
-	
-	
 		app_container.style.width = width + "px";
 		app_container.style.height = height + buttonHeight + "px";
 		game_canvas.width = width;

docs/index.html

@@ -34,31 +34,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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.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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="topics/01-components.md.html">Druid components</a></li>
+  <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><a href="topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="topics/faq.md.html">faq</a></li>
   <li><a href="topics/README.md.html">README</a></li>
 </ul>
 
@@ -83,6 +88,42 @@
 		<td class="name"  nowrap><a href="modules/druid.button.html">druid.button</a></td>
 		<td class="summary">Component to handle basic GUI button</td>
 	</tr>
+	<tr>
+		<td class="name"  nowrap><a href="modules/druid.drag.html">druid.drag</a></td>
+		<td class="summary">Component to handle drag action on node.</td>
+	</tr>
+	<tr>
+		<td class="name"  nowrap><a href="modules/druid.hover.html">druid.hover</a></td>
+		<td class="summary">Component to handle hover node interaction</td>
+	</tr>
+	<tr>
+		<td class="name"  nowrap><a href="modules/druid.scroll.html">druid.scroll</a></td>
+		<td class="summary">Component to handle scroll content.</td>
+	</tr>
+	<tr>
+		<td class="name"  nowrap><a href="modules/druid.static_grid.html">druid.static_grid</a></td>
+		<td class="summary">Component to handle placing components by row and columns.</td>
+	</tr>
+	<tr>
+		<td class="name"  nowrap><a href="modules/druid.swipe.html">druid.swipe</a></td>
+		<td class="summary">Component to handle swipe gestures on node.</td>
+	</tr>
+	<tr>
+		<td class="name"  nowrap><a href="modules/druid.text.html">druid.text</a></td>
+		<td class="summary">Component to handle all GUI texts.</td>
+	</tr>
+	<tr>
+		<td class="name"  nowrap><a href="modules/component.html">component</a></td>
+		<td class="summary">Basic class for all Druid components.</td>
+	</tr>
+	<tr>
+		<td class="name"  nowrap><a href="modules/druid.html">druid</a></td>
+		<td class="summary">Druid UI Library.</td>
+	</tr>
+	<tr>
+		<td class="name"  nowrap><a href="modules/druid_event.html">druid_event</a></td>
+		<td class="summary">Lua event small library</td>
+	</tr>
 	<tr>
 		<td class="name"  nowrap><a href="modules/druid.checkbox.html">druid.checkbox</a></td>
 		<td class="summary">Druid checkbox component</td>
@@ -92,12 +133,8 @@
 		<td class="summary">Checkbox group module</td>
 	</tr>
 	<tr>
-		<td class="name"  nowrap><a href="modules/druid.grid.html">druid.grid</a></td>
-		<td class="summary">Component to handle placing components by row and columns.</td>
-	</tr>
-	<tr>
-		<td class="name"  nowrap><a href="modules/druid.hover.html">druid.hover</a></td>
-		<td class="summary">Component to handle hover node interaction</td>
+		<td class="name"  nowrap><a href="modules/druid.dynamic_grid.html">druid.dynamic_grid</a></td>
+		<td class="summary">Component to handle placing components in row</td>
 	</tr>
 	<tr>
 		<td class="name"  nowrap><a href="modules/druid.input.html">druid.input</a></td>
@@ -116,41 +153,21 @@
 		<td class="name"  nowrap><a href="modules/druid.radio_group.html">druid.radio_group</a></td>
 		<td class="summary">Radio group module</td>
 	</tr>
-	<tr>
-		<td class="name"  nowrap><a href="modules/druid.scroll.html">druid.scroll</a></td>
-		<td class="summary">Component to handle scroll content.</td>
-	</tr>
 	<tr>
 		<td class="name"  nowrap><a href="modules/druid.slider.html">druid.slider</a></td>
 		<td class="summary">Druid slider component</td>
 	</tr>
-	<tr>
-		<td class="name"  nowrap><a href="modules/druid.text.html">druid.text</a></td>
-		<td class="summary">Component to handle all GUI texts.</td>
-	</tr>
 	<tr>
 		<td class="name"  nowrap><a href="modules/druid.timer.html">druid.timer</a></td>
 		<td class="summary">Component to handle GUI timers.</td>
 	</tr>
-	<tr>
-		<td class="name"  nowrap><a href="modules/component.html">component</a></td>
-		<td class="summary">Basic class for all Druid components.</td>
-	</tr>
-	<tr>
-		<td class="name"  nowrap><a href="modules/druid.html">druid</a></td>
-		<td class="summary">Druid UI Library.</td>
-	</tr>
-	<tr>
-		<td class="name"  nowrap><a href="modules/druid_event.html">druid_event</a></td>
-		<td class="summary">Lua event small library</td>
-	</tr>
 	<tr>
 		<td class="name"  nowrap><a href="modules/druid.helper.html">druid.helper</a></td>
 		<td class="summary">Text node or icon node can be nil</td>
 	</tr>
 	<tr>
 		<td class="name"  nowrap><a href="modules/druid_instance.html">druid_instance</a></td>
-		<td class="summary">Druid main class.</td>
+		<td class="summary">Instance of Druid.</td>
 	</tr>
 </table>
 <h2>Topics</h2>
@@ -175,6 +192,14 @@
 		<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/faq.md.html">faq.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>
@@ -185,7 +210,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/component.html

@@ -41,31 +41,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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><strong>component</strong></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.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.dynamic_grid.html">druid.dynamic_grid</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.text.html">druid.text</a></li>
   <li><a href="../modules/druid.timer.html">druid.timer</a></li>
-  <li><strong>component</strong></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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -80,27 +85,15 @@
 
 <h2><a href="#Functions">Functions</a></h2>
 <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>
 	<td class="name" nowrap><a href="#set_style">set_style(style)</a></td>
-	<td class="summary">Set current component style table</td>
-	</tr>
-	<tr>
-	<td class="name" nowrap><a href="#get_template">get_template()</a></td>
-	<td class="summary">Get current component template name</td>
+	<td class="summary">Set current component style table.</td>
 	</tr>
 	<tr>
 	<td class="name" nowrap><a href="#set_template">set_template(template)</a></td>
 	<td class="summary">Set current component template name</td>
 	</tr>
 	<tr>
-	<td class="name" nowrap><a href="#get_nodes">get_nodes()</a></td>
-	<td class="summary">Get current component nodes</td>
-	</tr>
-	<tr>
 	<td class="name" nowrap><a href="#set_nodes">set_nodes(nodes)</a></td>
 	<td class="summary">Set current component nodes</td>
 	</tr>
@@ -109,23 +102,63 @@
 	<td class="summary">Get current component context</td>
 	</tr>
 	<tr>
-	<td class="name" nowrap><a href="#set_context">set_context(context)</a></td>
-	<td class="summary">Set current component context</td>
+	<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="#get_interests">get_interests()</a></td>
-	<td class="summary">Get current component interests</td>
+	<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>
 	<tr>
 	<td class="name" nowrap><a href="#get_druid">get_druid()</a></td>
 	<td class="summary">Return druid with context of calling component.</td>
 	</tr>
 	<tr>
-	<td class="name" nowrap><a href="#setup_component">setup_component(table, table)</a></td>
+	<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="#set_input_enabled">set_input_enabled(state)</a></td>
+	<td class="summary">Set component input state.</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#get_parent_component">get_parent_component()</a></td>
+	<td class="summary">Return the parent for current component</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>
 	</tr>
 	<tr>
-	<td class="name" nowrap><a href="#Component.create">Component.create(name, interest)</a></td>
+	<td class="name" nowrap><a href="#__set_context">__set_context(context)</a></td>
+	<td class="summary">Set current component context</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#__get_interests">__get_interests()</a></td>
+	<td class="summary">Get current component interests</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#__get_template">__get_template()</a></td>
+	<td class="summary">Get current component template name</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#__get_nodes">__get_nodes()</a></td>
+	<td class="summary">Get current component nodes</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#__add_children">__add_children(children)</a></td>
+	<td class="summary">Add child to component children list</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#__remove_children">__remove_children(children)</a></td>
+	<td class="summary">Remove child from component children list</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#Component.create">Component.create(name[, interest={}])</a></td>
 	<td class="summary">Create new component.</td>
 	</tr>
 </table>
@@ -137,32 +170,14 @@
     <h2 class="section-header "><a name="Functions"></a>Functions</h2>
 
     <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>
     <a name = "set_style"></a>
     <strong>set_style(style)</strong>
     </dt>
     <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>
@@ -177,26 +192,6 @@
 
 
 
-</dd>
-    <dt>
-    <a name = "get_template"></a>
-    <strong>get_template()</strong>
-    </dt>
-    <dd>
-    Get current component template 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>
-        Component template name
-    </ol>
-
-
-
-
 </dd>
     <dt>
     <a name = "set_template"></a>
@@ -218,26 +213,6 @@
 
 
 
-</dd>
-    <dt>
-    <a name = "get_nodes"></a>
-    <strong>get_nodes()</strong>
-    </dt>
-    <dd>
-    Get current component nodes
-
-
-
-    <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 nodes table
-    </ol>
-
-
-
-
 </dd>
     <dt>
     <a name = "set_nodes"></a>
@@ -281,20 +256,13 @@
 
 </dd>
     <dt>
-    <a name = "set_context"></a>
-    <strong>set_context(context)</strong>
+    <a name = "increase_input_priority"></a>
+    <strong>increase_input_priority()</strong>
     </dt>
     <dd>
-    Set current component context
+    Increase input priority in current input stack
 
 
-    <h3>Parameters:</h3>
-    <ul>
-        <li><span class="parameter">context</span>
-            <span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.6">table</a></span>
-         Druid context. Usually it is self of script
-        </li>
-    </ul>
 
 
 
@@ -302,19 +270,43 @@
 
 </dd>
     <dt>
-    <a name = "get_interests"></a>
-    <strong>get_interests()</strong>
+    <a name = "reset_input_priority"></a>
+    <strong>reset_input_priority()</strong>
     </dt>
     <dd>
-    Get current component interests
+    Reset input priority in current input stack
 
 
 
+
+
+
+
+</dd>
+    <dt>
+    <a name = "get_node"></a>
+    <strong>get_node(node_or_name)</strong>
+    </dt>
+    <dd>
+    Get node for component by name.
+ If component has nodes, node<em>or</em>name should be string
+ It auto pick node by template name or from nodes by clone<em>tree
+ if they was setup via component:set</em>nodes, component:set_template
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">node_or_name</span>
+            <span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a> or <span class="type">node</span></span>
+         Node name or node itself
+        </li>
+    </ul>
+
     <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>
-        List of component interests
+           <span class="types"><span class="type">node</span></span>
+        Gui node
     </ol>
 
 
@@ -343,22 +335,39 @@
 
 </dd>
     <dt>
-    <a name = "setup_component"></a>
-    <strong>setup_component(table, table)</strong>
+    <a name = "get_name"></a>
+    <strong>get_name()</strong>
     </dt>
     <dd>
-    Setup component context and his style table
+    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>
+    <dt>
+    <a name = "set_input_enabled"></a>
+    <strong>set_input_enabled(state)</strong>
+    </dt>
+    <dd>
+    Set component input state.  By default it enabled
+ You can disable any input of component by this function
 
 
     <h3>Parameters:</h3>
     <ul>
-        <li><span class="parameter">table</span>
-            <span class="types"><span class="type">style</span></span>
-         Druid style module
-        </li>
-        <li><span class="parameter">table</span>
-            <span class="types"><span class="type">style</span></span>
-         Druid style module
+        <li><span class="parameter">state</span>
+            <span class="types"><span class="type">bool</span></span>
+         The component input state
         </li>
     </ul>
 
@@ -372,10 +381,188 @@
 
 
 
+</dd>
+    <dt>
+    <a name = "get_parent_component"></a>
+    <strong>get_parent_component()</strong>
+    </dt>
+    <dd>
+    Return the parent for current component
+
+
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">Component</span> or <span class="type">nil</span></span>
+        The druid component instance or nil
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "setup_component"></a>
+    <strong>setup_component(table, table, table)</strong>
+    </dt>
+    <dd>
+    Setup component context and his style table
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">table</span>
+            <span class="types"><span class="type">style</span></span>
+         Druid style module
+        </li>
+        <li><span class="parameter">table</span>
+            <span class="types"><span class="type">style</span></span>
+         Druid style module
+        </li>
+        <li><span class="parameter">table</span>
+            <span class="types"><span class="type">style</span></span>
+         Druid style module
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">component</span></span>
+        Component itself
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "__set_context"></a>
+    <strong>__set_context(context)</strong>
+    </dt>
+    <dd>
+    Set current component context
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">context</span>
+            <span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.6">table</a></span>
+         Druid context. Usually it is self of script
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "__get_interests"></a>
+    <strong>__get_interests()</strong>
+    </dt>
+    <dd>
+    Get current component interests
+
+
+
+    <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>
+        List of component interests
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "__get_template"></a>
+    <strong>__get_template()</strong>
+    </dt>
+    <dd>
+    Get current component template 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>
+        Component template name
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "__get_nodes"></a>
+    <strong>__get_nodes()</strong>
+    </dt>
+    <dd>
+    Get current component nodes
+
+
+
+    <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 nodes table
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "__add_children"></a>
+    <strong>__add_children(children)</strong>
+    </dt>
+    <dd>
+    Add child to component children list
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">children</span>
+            <span class="types"><span class="type">component</span></span>
+         The druid component instance
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "__remove_children"></a>
+    <strong>__remove_children(children)</strong>
+    </dt>
+    <dd>
+    Remove child from component children list
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">children</span>
+            <span class="types"><span class="type">component</span></span>
+         The druid component instance
+        </li>
+    </ul>
+
+
+
+
+
 </dd>
     <dt>
     <a name = "Component.create"></a>
-    <strong>Component.create(name, interest)</strong>
+    <strong>Component.create(name[, interest={}])</strong>
     </dt>
     <dd>
     Create new component.  It will inheritance from basic
@@ -391,6 +578,7 @@
         <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>
          List of component's interest
+         (<em>default</em> {})
         </li>
     </ul>
 
@@ -406,7 +594,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.back_handler.html

@@ -42,31 +42,36 @@
   <li><strong>druid.back_handler</strong></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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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.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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -215,7 +220,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.blocker.html

@@ -42,31 +42,36 @@
   <li><a href="../modules/druid.back_handler.html">druid.back_handler</a></li>
   <li><strong>druid.blocker</strong></li>
   <li><a href="../modules/druid.button.html">druid.button</a></li>
+  <li><a href="../modules/druid.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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.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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -234,7 +239,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.button.html

@@ -42,31 +42,36 @@
   <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><strong>druid.button</strong></li>
+  <li><a href="../modules/druid.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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.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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -84,7 +89,7 @@
 <h2><a href="#Functions">Functions</a></h2>
 <table class="function_list">
 	<tr>
-	<td class="name" nowrap><a href="#init">init(node, callback[, params[, anim_node[, event]]])</a></td>
+	<td class="name" nowrap><a href="#init">init(node, callback[, params[, anim_node]])</a></td>
 	<td class="summary">Component init function</td>
 	</tr>
 	<tr>
@@ -120,7 +125,7 @@
 	</tr>
 	<tr>
 	<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>
 </table>
 
@@ -133,7 +138,7 @@
     <dl class="function">
     <dt>
     <a name = "init"></a>
-    <strong>init(node, callback[, params[, anim_node[, event]]])</strong>
+    <strong>init(node, callback[, params[, anim_node]])</strong>
     </dt>
     <dd>
     Component init function
@@ -159,11 +164,6 @@
          Button anim node (node, if not provided)
          (<em>optional</em>)
         </li>
-        <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>
-         Button react event, const.ACTION_TOUCH by default
-         (<em>optional</em>)
-        </li>
     </ul>
 
 
@@ -187,6 +187,12 @@
         </li>
     </ul>
 
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.button</span></span>
+        Current button instance
+    </ol>
 
 
 
@@ -229,6 +235,12 @@
         </li>
     </ul>
 
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.button</span></span>
+        Current button instance
+    </ol>
 
 
 
@@ -250,6 +262,12 @@
         </li>
     </ul>
 
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.button</span></span>
+        Current button instance
+    </ol>
 
 
 
@@ -291,19 +309,27 @@
     <ul>
         <li><span class="parameter">on_click</span>
             <span class="types"><span class="type">druid_event</span></span>
-         On release button callback
+         (self, params, button_instance) On release button callback
         </li>
         <li><span class="parameter">on_repeated_click</span>
             <span class="types"><span class="type">druid_event</span></span>
-         On repeated action button callback
+         (self, params, button<em>instance, click</em>amount) On repeated action button callback
         </li>
         <li><span class="parameter">on_long_click</span>
             <span class="types"><span class="type">druid_event</span></span>
-         On long tap button callback
+         (self, params, button_instance, time) On long tap button callback
         </li>
         <li><span class="parameter">on_double_click</span>
             <span class="types"><span class="type">druid_event</span></span>
-         On double tap button callback
+         (self, params, button<em>instance, click</em>amount) On double tap button callback
+        </li>
+        <li><span class="parameter">on_hold_callback</span>
+            <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>
 
@@ -331,10 +357,14 @@
          Animation node
          (<em>default</em> node)
         </li>
-        <li><span class="parameter">scale_from</span>
+        <li><span class="parameter">start_scale</span>
             <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
@@ -364,11 +394,28 @@
     <strong>Style</strong>
     </dt>
     <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>
     <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>
             <span class="types"><span class="type">function</span></span>
          (self, node)
@@ -381,15 +428,13 @@
             <span class="types"><span class="type">function</span></span>
          (self, node, hover_state)
         </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>
             <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 +450,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.checkbox.html

@@ -42,31 +42,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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><strong>druid.checkbox</strong></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.dynamic_grid.html">druid.dynamic_grid</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.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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -108,7 +113,7 @@
 	</tr>
 	<tr>
 	<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>
 </table>
 
@@ -254,7 +259,9 @@
     <strong>Style</strong>
     </dt>
     <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>
@@ -277,7 +284,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.checkbox_group.html

@@ -42,31 +42,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.checkbox.html">druid.checkbox</a></li>
   <li><strong>druid.checkbox_group</strong></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.dynamic_grid.html">druid.dynamic_grid</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.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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -88,7 +93,7 @@
 	<td class="summary">Component init function</td>
 	</tr>
 	<tr>
-	<td class="name" nowrap><a href="#set_state">set_state(state)</a></td>
+	<td class="name" nowrap><a href="#set_state">set_state(indexes)</a></td>
 	<td class="summary">Set checkbox group state</td>
 	</tr>
 	<tr>
@@ -147,7 +152,7 @@
 </dd>
     <dt>
     <a name = "set_state"></a>
-    <strong>set_state(state)</strong>
+    <strong>set_state(indexes)</strong>
     </dt>
     <dd>
     Set checkbox group state
@@ -155,7 +160,7 @@
 
     <h3>Parameters:</h3>
     <ul>
-        <li><span class="parameter">state</span>
+        <li><span class="parameter">indexes</span>
             <span class="types"><span class="type">bool[]</span></span>
          Array of checkbox state
         </li>
@@ -239,7 +244,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.drag.html

@@ -0,0 +1,291 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+<head>
+    <title>Defold Druid UI Library</title>
+    <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
+</head>
+<body>
+
+<div id="container">
+
+<div id="product">
+	<div id="product_logo"></div>
+	<div id="product_name"><big><b></b></big></div>
+	<div id="product_description"></div>
+</div> <!-- id="product" -->
+
+
+<div id="main">
+
+
+<!-- Menu -->
+
+<div id="navigation">
+<br/>
+<h1>Druid</h1>
+
+<ul>
+  <li><a href="../index.html">Index</a></li>
+</ul>
+
+<h2>Contents</h2>
+<ul>
+<li><a href="#Functions">Functions</a></li>
+<li><a href="#Tables">Tables</a></li>
+</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><strong>druid.drag</strong></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.checkbox.html">druid.checkbox</a></li>
+  <li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
+  <li><a href="../modules/druid.dynamic_grid.html">druid.dynamic_grid</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.slider.html">druid.slider</a></li>
+  <li><a href="../modules/druid.timer.html">druid.timer</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>
+<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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
+  <li><a href="../topics/README.md.html">README</a></li>
+</ul>
+
+</div>
+
+<div id="content">
+
+<h1>Module <code>druid.drag</code></h1>
+<p>Component to handle drag action on node.</p>
+<p> Drag have correct handling for multitouch and swap
+ touched while dragging. Drag will be processed even
+ the cursor is outside of node, if drag is already started</p>
+
+
+<h2><a href="#Functions">Functions</a></h2>
+<table class="function_list">
+	<tr>
+	<td class="name" nowrap><a href="#init">init(node, on_drag_callback)</a></td>
+	<td class="summary">Drag component constructor</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#set_click_zone">set_click_zone(zone)</a></td>
+	<td class="summary">Strict drag click area.</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">Components 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 = "init"></a>
+    <strong>init(node, on_drag_callback)</strong>
+    </dt>
+    <dd>
+    Drag component constructor
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">node</span>
+            <span class="types"><span class="type">node</span></span>
+         GUI node to detect dragging
+        </li>
+        <li><span class="parameter">on_drag_callback</span>
+            <span class="types"><span class="type">function</span></span>
+         Callback for on<em>drag</em>event(self, dx, dy)
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "set_click_zone"></a>
+    <strong>set_click_zone(zone)</strong>
+    </dt>
+    <dd>
+    Strict drag click area.  Useful for
+ restrict events outside stencil node
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">zone</span>
+            <span class="types"><span class="type">node</span></span>
+         Gui node
+        </li>
+    </ul>
+
+
+
+
+
+</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_touch_start</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         (self) Event on touch start
+        </li>
+        <li><span class="parameter">on_touch_end</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         (self) Event on touch end
+        </li>
+        <li><span class="parameter">on_drag_start</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         (self) Event on drag start
+        </li>
+        <li><span class="parameter">on_drag</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         (self, dx, dy) Event on drag progress
+        </li>
+        <li><span class="parameter">on_drag_end</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         (self) Event on drag end
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "Fields"></a>
+    <strong>Fields</strong>
+    </dt>
+    <dd>
+    Components fields
+
+
+    <h3>Fields:</h3>
+    <ul>
+        <li><span class="parameter">is_touch</span>
+            <span class="types"><span class="type">bool</span></span>
+         Is component now touching
+        </li>
+        <li><span class="parameter">is_drag</span>
+            <span class="types"><span class="type">bool</span></span>
+         Is component now dragging
+        </li>
+        <li><span class="parameter">can_x</span>
+            <span class="types"><span class="type">bool</span></span>
+         Is drag component process vertical dragging. Default - true
+        </li>
+        <li><span class="parameter">can_y</span>
+            <span class="types"><span class="type">bool</span></span>
+         Is drag component process horizontal. Default - true
+        </li>
+        <li><span class="parameter">x</span>
+            <span class="types"><span class="type">number</span></span>
+         Current touch x position
+        </li>
+        <li><span class="parameter">y</span>
+            <span class="types"><span class="type">number</span></span>
+         Current touch y position
+        </li>
+        <li><span class="parameter">touch_start_pos</span>
+            <span class="types"><span class="type">vector3</span></span>
+         Touch start position
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "Style"></a>
+    <strong>Style</strong>
+    </dt>
+    <dd>
+    Component style params.
+ You can override this component styles params in druid styles table
+ or create your own style
+
+
+    <h3>Fields:</h3>
+    <ul>
+        <li><span class="parameter">DRAG_DEADZONE</span>
+            <span class="types"><span class="type">number</span></span>
+         Distance in pixels to start dragging
+         (<em>default</em> 10)
+        </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-09-29 23:46:16 </i>
+</div> <!-- id="about" -->
+</div> <!-- id="container" -->
+</body>
+</html>

docs/modules/druid.dynamic_grid.html

@@ -0,0 +1,496 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+<head>
+    <title>Defold Druid UI Library</title>
+    <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
+</head>
+<body>
+
+<div id="container">
+
+<div id="product">
+	<div id="product_logo"></div>
+	<div id="product_name"><big><b></b></big></div>
+	<div id="product_description"></div>
+</div> <!-- id="product" -->
+
+
+<div id="main">
+
+
+<!-- Menu -->
+
+<div id="navigation">
+<br/>
+<h1>Druid</h1>
+
+<ul>
+  <li><a href="../index.html">Index</a></li>
+</ul>
+
+<h2>Contents</h2>
+<ul>
+<li><a href="#Functions">Functions</a></li>
+<li><a href="#Tables">Tables</a></li>
+</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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.checkbox.html">druid.checkbox</a></li>
+  <li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
+  <li><strong>druid.dynamic_grid</strong></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.slider.html">druid.slider</a></li>
+  <li><a href="../modules/druid.timer.html">druid.timer</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>
+<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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
+  <li><a href="../topics/README.md.html">README</a></li>
+</ul>
+
+</div>
+
+<div id="content">
+
+<h1>Module <code>druid.dynamic_grid</code></h1>
+<p>Component to handle placing components in row</p>
+<p>
+
+</p>
+
+
+<h2><a href="#Functions">Functions</a></h2>
+<table class="function_list">
+	<tr>
+	<td class="name" nowrap><a href="#init">init(parent)</a></td>
+	<td class="summary">Component init function</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#get_pos">get_pos(index, node)</a></td>
+	<td class="summary">Return pos for grid node index</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#add">add(node[, index[, is_shift_left=false]])</a></td>
+	<td class="summary">Add new node to the grid</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#remove">remove(index[, is_shift_left=false])</a></td>
+	<td class="summary">Remove the item from the grid.</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#get_size">get_size()</a></td>
+	<td class="summary">Return grid content size</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#get_index_by_node">get_index_by_node(node)</a></td>
+	<td class="summary">Return grid index by node</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#get_all_pos">get_all_pos()</a></td>
+	<td class="summary">Return array of all node positions</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#set_position_function">set_position_function(callback)</a></td>
+	<td class="summary">Change set position function for grid nodes.</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#clear">clear()</a></td>
+	<td class="summary">Clear grid nodes array.</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#DynamicGrid:_get_side_vector">DynamicGrid:_get_side_vector(side, is_forward)</a></td>
+	<td class="summary">Return side vector to correct node shifting</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>
+</table>
+
+<br/>
+<br/>
+
+
+    <h2 class="section-header "><a name="Functions"></a>Functions</h2>
+
+    <dl class="function">
+    <dt>
+    <a name = "init"></a>
+    <strong>init(parent)</strong>
+    </dt>
+    <dd>
+    Component init function
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">parent</span>
+            <span class="types"><span class="type">node</span></span>
+         The gui node parent, where items will be placed
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "get_pos"></a>
+    <strong>get_pos(index, node)</strong>
+    </dt>
+    <dd>
+    Return pos for grid node index
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">index</span>
+            <span class="types"><span class="type">number</span></span>
+         The grid element index
+        </li>
+        <li><span class="parameter">node</span>
+            <span class="types"><span class="type">node</span></span>
+         The node to be placed
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">vector3</span></span>
+        Node position
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "add"></a>
+    <strong>add(node[, index[, is_shift_left=false]])</strong>
+    </dt>
+    <dd>
+    Add new node to the grid
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">node</span>
+            <span class="types"><span class="type">node</span></span>
+         Gui node
+        </li>
+        <li><span class="parameter">index</span>
+            <span class="types"><span class="type">number</span></span>
+         The node position. By default add as last node
+         (<em>optional</em>)
+        </li>
+        <li><span class="parameter">is_shift_left</span>
+            <span class="types"><span class="type">bool</span></span>
+         If true, shift all nodes to the left, otherwise shift nodes to the right
+         (<em>default</em> false)
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "remove"></a>
+    <strong>remove(index[, is_shift_left=false])</strong>
+    </dt>
+    <dd>
+    Remove the item from the grid.  Note that gui node will be not deleted
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">index</span>
+            <span class="types"><span class="type">number</span></span>
+         The grid node index to remove
+        </li>
+        <li><span class="parameter">is_shift_left</span>
+            <span class="types"><span class="type">bool</span></span>
+         If true, shift all nodes to the left, otherwise shift nodes to the right
+         (<em>default</em> false)
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "get_size"></a>
+    <strong>get_size()</strong>
+    </dt>
+    <dd>
+    Return grid content size
+
+
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">vector3</span></span>
+        The grid content size
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "get_index_by_node"></a>
+    <strong>get_index_by_node(node)</strong>
+    </dt>
+    <dd>
+    Return grid index by node
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">node</span>
+            <span class="types"><span class="type">node</span></span>
+         The gui node in the grid
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">number</span></span>
+        The node index
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "get_all_pos"></a>
+    <strong>get_all_pos()</strong>
+    </dt>
+    <dd>
+    Return array of all node positions
+
+
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">vector3[]</span></span>
+        All grid node positions
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "set_position_function"></a>
+    <strong>set_position_function(callback)</strong>
+    </dt>
+    <dd>
+    Change set position function for grid nodes.  It will call on
+ update poses on grid elements. Default: gui.set_position
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">callback</span>
+            <span class="types"><span class="type">function</span></span>
+         Function on node set position
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.dynamic_grid</span></span>
+        Current grid instance
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "clear"></a>
+    <strong>clear()</strong>
+    </dt>
+    <dd>
+    Clear grid nodes array.  GUI nodes will be not deleted!
+ If you want to delete GUI nodes, use dynamic_grid.nodes array before grid:clear
+
+
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.dynamic_grid</span></span>
+        Current grid instance
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "DynamicGrid:_get_side_vector"></a>
+    <strong>DynamicGrid:_get_side_vector(side, is_forward)</strong>
+    </dt>
+    <dd>
+    Return side vector to correct node shifting
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">side</span>
+
+
+
+        </li>
+        <li><span class="parameter">is_forward</span>
+
+
+
+        </li>
+    </ul>
+
+
+
+
+
+</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_add_item</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         On item add callback
+        </li>
+        <li><span class="parameter">on_remove_item</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         On item remove callback
+        </li>
+        <li><span class="parameter">on_change_items</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         On item add or remove callback
+        </li>
+        <li><span class="parameter">on_clear</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         On grid clear callback
+        </li>
+        <li><span class="parameter">on_update_positions</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         On update item positions callback
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "Fields"></a>
+    <strong>Fields</strong>
+    </dt>
+    <dd>
+    Component fields
+
+
+    <h3>Fields:</h3>
+    <ul>
+        <li><span class="parameter">parent</span>
+            <span class="types"><span class="type">node</span></span>
+         Parent gui node
+        </li>
+        <li><span class="parameter">nodes</span>
+            <span class="types"><span class="type">node[]</span></span>
+         List of all grid nodes
+        </li>
+        <li><span class="parameter">first_index</span>
+            <span class="types"><span class="type">number</span></span>
+         The first index of node in grid
+        </li>
+        <li><span class="parameter">last_index</span>
+            <span class="types"><span class="type">number</span></span>
+         The last index of node in grid
+        </li>
+        <li><span class="parameter">node_size</span>
+            <span class="types"><span class="type">vector3</span></span>
+         Item size
+        </li>
+        <li><span class="parameter">border</span>
+            <span class="types"><span class="type">vector4</span></span>
+         The size of item content
+        </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-09-29 23:46:16 </i>
+</div> <!-- id="about" -->
+</div> <!-- id="container" -->
+</body>
+</html>

docs/modules/druid.grid.html

@@ -44,6 +44,7 @@
   <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.drag.html">druid.drag</a></li>
   <li><strong>druid.grid</strong></li>
   <li><a href="../modules/druid.hover.html">druid.hover</a></li>
   <li><a href="../modules/druid.input.html">druid.input</a></li>
@@ -52,6 +53,7 @@
   <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>
@@ -62,11 +64,12 @@
 </ul>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">changelog</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -107,7 +110,7 @@
 	</tr>
 	<tr>
 	<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>
 </table>
 <h2><a href="#Tables">Tables</a></h2>
@@ -272,7 +275,8 @@
     <strong>clear()</strong>
     </dt>
     <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
 
 
 
@@ -370,7 +374,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-06-14 20:13:02 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.helper.html

@@ -41,31 +41,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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.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><strong>druid.helper</strong></li>
   <li><a href="../modules/druid_instance.html">druid_instance</a></li>
 </ul>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -98,6 +103,22 @@
 	<td class="name" nowrap><a href="#get_pivot_offset">get_pivot_offset(pivot)</a></td>
 	<td class="summary">Get node offset for given gui pivot</td>
 	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#helper..is_mobile">helper..is_mobile()</a></td>
+	<td class="summary">Check if device is mobile (Android or iOS)</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#is_web">is_web()</a></td>
+	<td class="summary">Check if device is HTML5</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#get_border">get_border()</a></td>
+	<td class="summary">Distance from node to size border</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#deprecated">deprecated(message)</a></td>
+	<td class="summary">Show deprecated message.</td>
+	</tr>
 </table>
 
 <br/>
@@ -228,6 +249,74 @@
 
 
 
+</dd>
+    <dt>
+    <a name = "helper..is_mobile"></a>
+    <strong>helper..is_mobile()</strong>
+    </dt>
+    <dd>
+    Check if device is mobile (Android or iOS)
+
+
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "is_web"></a>
+    <strong>is_web()</strong>
+    </dt>
+    <dd>
+    Check if device is HTML5
+
+
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "get_border"></a>
+    <strong>get_border()</strong>
+    </dt>
+    <dd>
+    Distance from node to size border
+
+
+
+    <h3>Returns:</h3>
+    <ol>
+
+        vector4 (left, top, right, down)
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "deprecated"></a>
+    <strong>deprecated(message)</strong>
+    </dt>
+    <dd>
+    Show deprecated message.  Once time per message
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">message</span>
+            <span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
+         The deprecated message
+        </li>
+    </ul>
+
+
+
+
+
 </dd>
 </dl>
 
@@ -236,7 +325,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.hover.html

@@ -42,31 +42,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><strong>druid.hover</strong></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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><strong>druid.hover</strong></li>
+  <li><a href="../modules/druid.dynamic_grid.html">druid.dynamic_grid</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.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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -92,8 +97,20 @@
 	<td class="summary">Set hover state</td>
 	</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="summary">Strict button click area.</td>
+	<td class="summary">Strict hover click area.</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#set_enabled">set_enabled(state)</a></td>
+	<td class="summary">Set enable state of hover component.</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#is_enabled">is_enabled()</a></td>
+	<td class="summary">Return current hover enabled state</td>
 	</tr>
 </table>
 <h2><a href="#Tables">Tables</a></h2>
@@ -156,13 +173,34 @@
 
 
 
+</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>
     <dt>
     <a name = "set_click_zone"></a>
     <strong>set_click_zone(zone)</strong>
     </dt>
     <dd>
-    Strict button click area.  Useful for
+    Strict hover click area.  Useful for
  no click events outside stencil node
 
 
@@ -178,6 +216,49 @@
 
 
 
+</dd>
+    <dt>
+    <a name = "set_enabled"></a>
+    <strong>set_enabled(state)</strong>
+    </dt>
+    <dd>
+    Set enable state of hover component.
+ If hover is not enabled, it will not generate
+ any hover events
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">state</span>
+            <span class="types"><span class="type">bool</span></span>
+         The hover enabled state
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "is_enabled"></a>
+    <strong>is_enabled()</strong>
+    </dt>
+    <dd>
+    Return current hover enabled state
+
+
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">bool</span></span>
+        The hover enabled state
+    </ol>
+
+
+
+
 </dd>
 </dl>
     <h2 class="section-header "><a name="Tables"></a>Tables</h2>
@@ -195,7 +276,11 @@
     <ul>
         <li><span class="parameter">on_hover</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>
     </ul>
 
@@ -211,7 +296,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.html

@@ -41,31 +41,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/component.html">component</a></li>
+  <li><strong>druid</strong></li>
+  <li><a href="../modules/druid_event.html">druid_event</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.dynamic_grid.html">druid.dynamic_grid</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.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><strong>druid</strong></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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -106,6 +111,32 @@
 	<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
+ Druid locale component will call this function
+ to get translated text.</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/>
@@ -173,6 +204,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>
 
@@ -181,7 +331,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.input.html

@@ -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>
@@ -37,31 +42,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</a></li>
   <li><strong>druid.input</strong></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.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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -71,22 +81,316 @@
 
 <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)</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)</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)</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>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.input</span></span>
+        Current input instance
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "set_allowerd_characters"></a>
+    <strong>set_allowerd_characters(characters)</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>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.input</span></span>
+        Current input instance
+    </ol>
+
+
+
+
+</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.
+ You can override this component styles params in druid styles table
+ or create your own style
+
+
+    <h3>Fields:</h3>
+    <ul>
+        <li><span class="parameter">IS_LONGTAP_ERASE</span>
+            <span class="types"><span class="type">bool</span></span>
+         Is long tap will erase current input data
+         (<em>default</em> false)
+        </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
+         (<em>default</em> *)
+        </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_style</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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.lang_text.html

@@ -42,31 +42,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</a></li>
   <li><a href="../modules/druid.input.html">druid.input</a></li>
   <li><strong>druid.lang_text</strong></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.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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -240,7 +245,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.progress.html

@@ -42,31 +42,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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><strong>druid.progress</strong></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.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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -82,7 +87,7 @@
 <h2><a href="#Functions">Functions</a></h2>
 <table class="function_list">
 	<tr>
-	<td class="name" nowrap><a href="#init">init(node, key, init_value)</a></td>
+	<td class="name" nowrap><a href="#init">init(node, key[, init_value=1])</a></td>
 	<td class="summary">Component init function</td>
 	</tr>
 	<tr>
@@ -122,7 +127,7 @@
 	</tr>
 	<tr>
 	<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>
 </table>
 
@@ -135,7 +140,7 @@
     <dl class="function">
     <dt>
     <a name = "init"></a>
-    <strong>init(node, key, init_value)</strong>
+    <strong>init(node, key[, init_value=1])</strong>
     </dt>
     <dd>
     Component init function
@@ -154,6 +159,7 @@
         <li><span class="parameter">init_value</span>
             <span class="types"><span class="type">number</span></span>
          Initial value of progress bar
+         (<em>default</em> 1)
         </li>
     </ul>
 
@@ -351,7 +357,9 @@
     <strong>Style</strong>
     </dt>
     <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>
@@ -359,10 +367,12 @@
         <li><span class="parameter">SPEED</span>
             <span class="types"><span class="type">number</span></span>
          Progress bas fill rate. More -> faster
+         (<em>default</em> 5)
         </li>
         <li><span class="parameter">MIN_DELTA</span>
             <span class="types"><span class="type">number</span></span>
          Minimum step to fill progress bar
+         (<em>default</em> 0.005)
         </li>
     </ul>
 
@@ -378,7 +388,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.radio_group.html

@@ -42,31 +42,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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><strong>druid.radio_group</strong></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.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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -88,7 +93,7 @@
 	<td class="summary">Component init function</td>
 	</tr>
 	<tr>
-	<td class="name" nowrap><a href="#set_state">set_state(state)</a></td>
+	<td class="name" nowrap><a href="#set_state">set_state(index)</a></td>
 	<td class="summary">Set radio group state</td>
 	</tr>
 	<tr>
@@ -147,7 +152,7 @@
 </dd>
     <dt>
     <a name = "set_state"></a>
-    <strong>set_state(state)</strong>
+    <strong>set_state(index)</strong>
     </dt>
     <dd>
     Set radio group state
@@ -155,9 +160,9 @@
 
     <h3>Parameters:</h3>
     <ul>
-        <li><span class="parameter">state</span>
-            <span class="types"><span class="type">bool[]</span></span>
-         Array of checkbox state
+        <li><span class="parameter">index</span>
+            <span class="types"><span class="type">number</span></span>
+         Index in radio group
         </li>
     </ul>
 
@@ -178,8 +183,8 @@
     <h3>Returns:</h3>
     <ol>
 
-           <span class="types"><span class="type">bool[]</span></span>
-        Array if checkboxes state
+           <span class="types"><span class="type">number</span></span>
+        Index in radio group
     </ol>
 
 
@@ -239,7 +244,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.scroll.html

@@ -42,31 +42,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><strong>druid.scroll</strong></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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><strong>druid.scroll</strong></li>
   <li><a href="../modules/druid.slider.html">druid.slider</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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -87,40 +92,65 @@
 <h2><a href="#Functions">Functions</a></h2>
 <table class="function_list">
 	<tr>
-	<td class="name" nowrap><a href="#init">init(scroll_parent, input_zone)</a></td>
-	<td class="summary">Component init function</td>
+	<td class="name" nowrap><a href="#init">init(view_node, content_node)</a></td>
+	<td class="summary">Scroll constructor.</td>
 	</tr>
 	<tr>
 	<td class="name" nowrap><a href="#scroll_to">scroll_to(vector3[, is_instant])</a></td>
-	<td class="summary">Start scroll to target point</td>
+	<td class="summary">Start scroll to target point.</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#scroll_to_index">scroll_to_index(index[, skip_cb])</a></td>
+	<td class="summary">Scroll to item in scroll by point index.</td>
 	</tr>
 	<tr>
 	<td class="name" nowrap><a href="#scroll_to_percent">scroll_to_percent(vector3[, is_instant])</a></td>
 	<td class="summary">Start scroll to target scroll percent</td>
 	</tr>
 	<tr>
-	<td class="name" nowrap><a href="#init">init(index[, skip_cb])</a></td>
-	<td class="summary">Scroll to item in scroll by point index</td>
+	<td class="name" nowrap><a href="#get_percent">get_percent()</a></td>
+	<td class="summary">Return current scroll progress status.</td>
 	</tr>
 	<tr>
-	<td class="name" nowrap><a href="#set_points">set_points(points)</a></td>
-	<td class="summary">Set points of interest.</td>
+	<td class="name" nowrap><a href="#set_size">set_size(size)</a></td>
+	<td class="summary">Set scroll content size.</td>
 	</tr>
 	<tr>
 	<td class="name" nowrap><a href="#set_inert">set_inert(state)</a></td>
 	<td class="summary">Enable or disable scroll inert.</td>
 	</tr>
 	<tr>
-	<td class="name" nowrap><a href="#on_point_move">on_point_move(callback)</a></td>
-	<td class="summary">Set the callback on scrolling to point (if exist)</td>
+	<td class="name" nowrap><a href="#is_inert">is_inert()</a></td>
+	<td class="summary">Return if scroll have inertion.</td>
 	</tr>
 	<tr>
-	<td class="name" nowrap><a href="#set_border">set_border(border)</a></td>
-	<td class="summary">Set the scroll possibly area</td>
+	<td class="name" nowrap><a href="#set_extra_stretch_size">set_extra_stretch_size([stretch_size=0])</a></td>
+	<td class="summary">Set extra size for scroll stretching.</td>
 	</tr>
 	<tr>
-	<td class="name" nowrap><a href="#get_scroll_percent">get_scroll_percent()</a></td>
-	<td class="summary">Return current scroll progress</td>
+	<td class="name" nowrap><a href="#get_scroll_size">get_scroll_size()</a></td>
+	<td class="summary">Return vector of scroll size with width and height.</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#set_points">set_points(points)</a></td>
+	<td class="summary">Set points of interest.</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#set_horizontal_scroll">set_horizontal_scroll(state)</a></td>
+	<td class="summary">Lock or unlock horizontal scroll</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#set_vertical_scroll">set_vertical_scroll(state)</a></td>
+	<td class="summary">Lock or unlock vertical scroll</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#bind_grid">bind_grid(Druid)</a></td>
+	<td class="summary">Bind the grid component (Static or Dynamic) to recalculate
+ scroll size on grid changes</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#Scroll:_cancel_animate">Scroll:_cancel_animate()</a></td>
+	<td class="summary">Cancel animation on other animation or input touch</td>
 	</tr>
 </table>
 <h2><a href="#Tables">Tables</a></h2>
@@ -135,7 +165,7 @@
 	</tr>
 	<tr>
 	<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>
 </table>
 
@@ -148,21 +178,21 @@
     <dl class="function">
     <dt>
     <a name = "init"></a>
-    <strong>init(scroll_parent, input_zone)</strong>
+    <strong>init(view_node, content_node)</strong>
     </dt>
     <dd>
-    Component init function
+    Scroll constructor.
 
 
     <h3>Parameters:</h3>
     <ul>
-        <li><span class="parameter">scroll_parent</span>
+        <li><span class="parameter">view_node</span>
             <span class="types"><span class="type">node</span></span>
-         Gui node where placed scroll content. This node will change position
+         GUI view scroll node
         </li>
-        <li><span class="parameter">input_zone</span>
+        <li><span class="parameter">content_node</span>
             <span class="types"><span class="type">node</span></span>
-         Gui node where input is catched
+         GUI content scroll node
         </li>
     </ul>
 
@@ -176,18 +206,18 @@
     <strong>scroll_to(vector3[, is_instant])</strong>
     </dt>
     <dd>
-    Start scroll to target point
+    Start scroll to target point.
 
 
     <h3>Parameters:</h3>
     <ul>
         <li><span class="parameter">vector3</span>
             <span class="types"><span class="type">point</span></span>
-         target point
+         Target point
         </li>
         <li><span class="parameter">is_instant</span>
             <span class="types"><span class="type">bool</span></span>
-         instant scroll flag
+         Instant scroll flag
          (<em>optional</em>)
         </li>
     </ul>
@@ -201,6 +231,32 @@
         <li><pre class="example">scroll:scroll_to(vmath.vector3(<span class="number">0</span>), <span class="keyword">true</span>)</pre></li>
     </ul>
 
+</dd>
+    <dt>
+    <a name = "scroll_to_index"></a>
+    <strong>scroll_to_index(index[, skip_cb])</strong>
+    </dt>
+    <dd>
+    Scroll to item in scroll by point index.
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">index</span>
+            <span class="types"><span class="type">number</span></span>
+         Point index
+        </li>
+        <li><span class="parameter">skip_cb</span>
+            <span class="types"><span class="type">bool</span></span>
+         If true, skip the point callback
+         (<em>optional</em>)
+        </li>
+    </ul>
+
+
+
+
+
 </dd>
     <dt>
     <a name = "scroll_to_percent"></a>
@@ -233,48 +289,49 @@
 
 </dd>
     <dt>
-    <a name = "init"></a>
-    <strong>init(index[, skip_cb])</strong>
+    <a name = "get_percent"></a>
+    <strong>get_percent()</strong>
     </dt>
     <dd>
-    Scroll to item in scroll by point index
+    Return current scroll progress status.
+ Values will be in [0..1] interval
 
 
-    <h3>Parameters:</h3>
-    <ul>
-        <li><span class="parameter">index</span>
-            <span class="types"><span class="type">number</span></span>
-         Point index
-        </li>
-        <li><span class="parameter">skip_cb</span>
-            <span class="types"><span class="type">bool</span></span>
-         If true, skip the point callback
-         (<em>optional</em>)
-        </li>
-    </ul>
 
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">vector3</span></span>
+        New vector with scroll progress values
+    </ol>
 
 
 
 
 </dd>
     <dt>
-    <a name = "set_points"></a>
-    <strong>set_points(points)</strong>
+    <a name = "set_size"></a>
+    <strong>set_size(size)</strong>
     </dt>
     <dd>
-    Set points of interest.
- Scroll will always centered on closer points
+    Set scroll content size.
+ It will change content gui node size
 
 
     <h3>Parameters:</h3>
     <ul>
-        <li><span class="parameter">points</span>
-            <span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.6">table</a></span>
-         Array of vector3 points
+        <li><span class="parameter">size</span>
+            <span class="types"><span class="type">vector3</span></span>
+         The new size for content node
         </li>
     </ul>
 
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.scroll</span></span>
+        Current scroll instance
+    </ol>
 
 
 
@@ -298,59 +355,72 @@
         </li>
     </ul>
 
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.scroll</span></span>
+        Current scroll instance
+    </ol>
 
 
 
 
 </dd>
     <dt>
-    <a name = "on_point_move"></a>
-    <strong>on_point_move(callback)</strong>
+    <a name = "is_inert"></a>
+    <strong>is_inert()</strong>
     </dt>
     <dd>
-    Set the callback on scrolling to point (if exist)
+    Return if scroll have inertion.
+
+
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">bool</span></span>
+        If scroll have inertion
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "set_extra_stretch_size"></a>
+    <strong>set_extra_stretch_size([stretch_size=0])</strong>
+    </dt>
+    <dd>
+    Set extra size for scroll stretching.
+ Set 0 to disable stretching effect
 
 
     <h3>Parameters:</h3>
     <ul>
-        <li><span class="parameter">callback</span>
-            <span class="types"><span class="type">function</span></span>
-         Callback on scroll to point of interest
+        <li><span class="parameter">stretch_size</span>
+            <span class="types"><span class="type">number</span></span>
+         Size in pixels of additional scroll area
+         (<em>default</em> 0)
         </li>
     </ul>
 
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.scroll</span></span>
+        Current scroll instance
+    </ol>
 
 
 
 
 </dd>
     <dt>
-    <a name = "set_border"></a>
-    <strong>set_border(border)</strong>
+    <a name = "get_scroll_size"></a>
+    <strong>get_scroll_size()</strong>
     </dt>
     <dd>
-    Set the scroll possibly area
-
-
-    <h3>Parameters:</h3>
-    <ul>
-        <li><span class="parameter">border</span>
-            <span class="types"><span class="type">vector3</span></span>
-         Size of scrolling area
-        </li>
-    </ul>
-
-
-
-
-
-</dd>
-    <dt>
-    <a name = "get_scroll_percent"></a>
-    <strong>get_scroll_percent()</strong>
-    </dt>
-    <dd>
-    Return current scroll progress
+    Return vector of scroll size with width and height.
 
 
 
@@ -358,12 +428,136 @@
     <ol>
 
            <span class="types"><span class="type">vector3</span></span>
-        Scroll progress
+        Available scroll size
     </ol>
 
 
 
 
+</dd>
+    <dt>
+    <a name = "set_points"></a>
+    <strong>set_points(points)</strong>
+    </dt>
+    <dd>
+    Set points of interest.
+ Scroll will always centered on closer points
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">points</span>
+            <span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.6">table</a></span>
+         Array of vector3 points
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.scroll</span></span>
+        Current scroll instance
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "set_horizontal_scroll"></a>
+    <strong>set_horizontal_scroll(state)</strong>
+    </dt>
+    <dd>
+    Lock or unlock horizontal scroll
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">state</span>
+            <span class="types"><span class="type">bool</span></span>
+         True, if horizontal scroll is enabled
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.scroll</span></span>
+        Current scroll instance
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "set_vertical_scroll"></a>
+    <strong>set_vertical_scroll(state)</strong>
+    </dt>
+    <dd>
+    Lock or unlock vertical scroll
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">state</span>
+            <span class="types"><span class="type">bool</span></span>
+         True, if vertical scroll is enabled
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.scroll</span></span>
+        Current scroll instance
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "bind_grid"></a>
+    <strong>bind_grid(Druid)</strong>
+    </dt>
+    <dd>
+    Bind the grid component (Static or Dynamic) to recalculate
+ scroll size on grid changes
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">Druid</span>
+            <span class="types"><span class="type">druid.static_grid</span> or <span class="type">druid.dynamic_grid</span></span>
+         grid component
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.scroll</span></span>
+        Current scroll instance
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "Scroll:_cancel_animate"></a>
+    <strong>Scroll:_cancel_animate()</strong>
+    </dt>
+    <dd>
+    Cancel animation on other animation or input touch
+
+
+
+
+
+
+
 </dd>
 </dl>
     <h2 class="section-header "><a name="Tables"></a>Tables</h2>
@@ -389,7 +583,7 @@
         </li>
         <li><span class="parameter">on_point_scroll</span>
             <span class="types"><span class="type">druid_event</span></span>
-         On scroll<em>to</em>index function callbck
+         On scroll<em>to</em>index function callback
         </li>
     </ul>
 
@@ -408,42 +602,51 @@
 
     <h3>Fields:</h3>
     <ul>
-        <li><span class="parameter">node</span>
+        <li><span class="parameter">view_node</span>
             <span class="types"><span class="type">node</span></span>
-         Scroll parent node
+         Scroll view node
         </li>
-        <li><span class="parameter">input_zone</span>
+        <li><span class="parameter">content_node</span>
             <span class="types"><span class="type">node</span></span>
-         Scroll input node
-        </li>
-        <li><span class="parameter">zone_size</span>
-            <span class="types"><span class="type">vector3</span></span>
-         Current scroll content size
-        </li>
-        <li><span class="parameter">soft_size</span>
-            <span class="types"><span class="type">number</span></span>
-         Soft zone size from style table
-        </li>
-        <li><span class="parameter">center_offset</span>
-            <span class="types"><span class="type">vector3</span></span>
-         Distance from node to node's center
+         Scroll content node
         </li>
         <li><span class="parameter">is_inert</span>
             <span class="types"><span class="type">bool</span></span>
          Flag, if scroll now moving by inertion
         </li>
-        <li><span class="parameter">inert</span>
+        <li><span class="parameter">inertion</span>
             <span class="types"><span class="type">vector3</span></span>
          Current inert speed
         </li>
-        <li><span class="parameter">pos</span>
+        <li><span class="parameter">position</span>
             <span class="types"><span class="type">vector3</span></span>
          Current scroll posisition
         </li>
-        <li><span class="parameter">target</span>
+        <li><span class="parameter">target_position</span>
             <span class="types"><span class="type">vector3</span></span>
          Current scroll target position
         </li>
+        <li><span class="parameter">available_pos</span>
+            <span class="types"><span class="type">vector4</span></span>
+         Available position for content node: (min<em>x, max</em>y, max<em>x, min</em>y)
+        </li>
+        <li><span class="parameter">available_size</span>
+            <span class="types"><span class="type">vector3</span></span>
+         Size of available positions: (width, height, 0)
+        </li>
+        <li><span class="parameter">drag</span>
+            <span class="types"><span class="type">druid.drag</span></span>
+         Drag component
+        </li>
+        <li><span class="parameter">Current</span>
+            <span class="types"><span class="type">selected</span></span>
+         index of points of interests
+         (<em>optional</em>)
+        </li>
+        <li><span class="parameter">is_animate</span>
+            <span class="types"><span class="type">bool</span></span>
+         Flag, if scroll now animating by gui.animate
+        </li>
     </ul>
 
 
@@ -456,42 +659,57 @@
     <strong>Style</strong>
     </dt>
     <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>
     <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>
             <span class="types"><span class="type">number</span></span>
          Multiplier for free inertion
+         (<em>default</em> 0)
+        </li>
+        <li><span class="parameter">FRICT_HOLD</span>
+            <span class="types"><span class="type">number</span></span>
+         Multiplier for inertion, while touching
+         (<em>default</em> 0)
         </li>
         <li><span class="parameter">INERT_THRESHOLD</span>
             <span class="types"><span class="type">number</span></span>
          Scroll speed to stop inertion
+         (<em>default</em> 3)
         </li>
         <li><span class="parameter">INERT_SPEED</span>
             <span class="types"><span class="type">number</span></span>
          Multiplier for inertion speed
+         (<em>default</em> 30)
         </li>
-        <li><span class="parameter">DEADZONE</span>
+        <li><span class="parameter">POINTS_DEADZONE</span>
             <span class="types"><span class="type">number</span></span>
-         Deadzone for start scrol in pixels
-        </li>
-        <li><span class="parameter">SOFT_ZONE_SIZE</span>
-            <span class="types"><span class="type">number</span></span>
-         Size of outside zone in pixels (for scroll back moving)
+         Speed to check points of interests in no_inertion mode
+         (<em>default</em> 20)
         </li>
         <li><span class="parameter">BACK_SPEED</span>
             <span class="types"><span class="type">number</span></span>
          Scroll back returning lerp speed
+         (<em>default</em> 0.35)
         </li>
         <li><span class="parameter">ANIM_SPEED</span>
             <span class="types"><span class="type">number</span></span>
          Scroll gui.animation speed for scroll_to function
+         (<em>default</em> 0.2)
+        </li>
+        <li><span class="parameter">EXTRA_STRETCH_SIZE</span>
+            <span class="types"><span class="type">number</span></span>
+         extra size in pixels outside of scroll (stretch effect)
+         (<em>default</em> 0)
+        </li>
+        <li><span class="parameter">SMALL_CONTENT_SCROLL</span>
+            <span class="types"><span class="type">bool</span></span>
+         If true, content node with size less than view node size can be scrolled
+         (<em>default</em> false)
         </li>
     </ul>
 
@@ -507,7 +725,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.slider.html

@@ -42,31 +42,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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><strong>druid.slider</strong></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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -91,6 +96,10 @@
 	<td class="name" nowrap><a href="#set">set(value[, is_silent])</a></td>
 	<td class="summary">Set value for slider</td>
 	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#set_steps">set_steps(steps)</a></td>
+	<td class="summary">Set slider steps.</td>
+	</tr>
 </table>
 <h2><a href="#Tables">Tables</a></h2>
 <table class="function_list">
@@ -166,6 +175,32 @@
 
 
 
+</dd>
+    <dt>
+    <a name = "set_steps"></a>
+    <strong>set_steps(steps)</strong>
+    </dt>
+    <dd>
+    Set slider steps.  Pin node will
+ apply closest step position
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">steps</span>
+            <span class="types"><span class="type">number[]</span></span>
+         Array of steps
+        </li>
+    </ul>
+
+
+
+
+    <h3>Usage:</h3>
+    <ul>
+        <pre class="example">slider:set_steps({<span class="number">0</span>, <span class="number">0.2</span>, <span class="number">0.6</span>, <span class="number">1</span>})</pre>
+    </ul>
+
 </dd>
 </dl>
     <h2 class="section-header "><a name="Tables"></a>Tables</h2>
@@ -248,7 +283,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.static_grid.html

@@ -0,0 +1,522 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+<head>
+    <title>Defold Druid UI Library</title>
+    <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
+</head>
+<body>
+
+<div id="container">
+
+<div id="product">
+	<div id="product_logo"></div>
+	<div id="product_name"><big><b></b></big></div>
+	<div id="product_description"></div>
+</div> <!-- id="product" -->
+
+
+<div id="main">
+
+
+<!-- Menu -->
+
+<div id="navigation">
+<br/>
+<h1>Druid</h1>
+
+<ul>
+  <li><a href="../index.html">Index</a></li>
+</ul>
+
+<h2>Contents</h2>
+<ul>
+<li><a href="#Functions">Functions</a></li>
+<li><a href="#Tables">Tables</a></li>
+</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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><strong>druid.static_grid</strong></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/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.checkbox.html">druid.checkbox</a></li>
+  <li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
+  <li><a href="../modules/druid.dynamic_grid.html">druid.dynamic_grid</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.slider.html">druid.slider</a></li>
+  <li><a href="../modules/druid.timer.html">druid.timer</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>
+<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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
+  <li><a href="../topics/README.md.html">README</a></li>
+</ul>
+
+</div>
+
+<div id="content">
+
+<h1>Module <code>druid.static_grid</code></h1>
+<p>Component to handle placing components by row and columns.</p>
+<p> Grid can anchor your elements, get content size and other</p>
+
+
+<h2><a href="#Functions">Functions</a></h2>
+<table class="function_list">
+	<tr>
+	<td class="name" nowrap><a href="#init">init(parent, element[, in_row=1])</a></td>
+	<td class="summary">Component init function</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#get_pos">get_pos(index)</a></td>
+	<td class="summary">Return pos for grid node index</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#get_index">get_index(pos)</a></td>
+	<td class="summary">Return index for grid pos</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#get_index_by_node">get_index_by_node(node)</a></td>
+	<td class="summary">Return grid index by node</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#set_anchor">set_anchor(anchor)</a></td>
+	<td class="summary">Set grid anchor.</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#add">add(item[, index])</a></td>
+	<td class="summary">Add new item to the grid</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#remove">remove(index, is_shift_nodes)</a></td>
+	<td class="summary">Remove the item from the grid.</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#get_size">get_size()</a></td>
+	<td class="summary">Return grid content size</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#get_all_pos">get_all_pos()</a></td>
+	<td class="summary">Return array of all node positions</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#set_position_function">set_position_function(callback)</a></td>
+	<td class="summary">Change set position function for grid nodes.</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#clear">clear()</a></td>
+	<td class="summary">Clear grid nodes array.</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>
+</table>
+
+<br/>
+<br/>
+
+
+    <h2 class="section-header "><a name="Functions"></a>Functions</h2>
+
+    <dl class="function">
+    <dt>
+    <a name = "init"></a>
+    <strong>init(parent, element[, in_row=1])</strong>
+    </dt>
+    <dd>
+    Component init function
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">parent</span>
+            <span class="types"><span class="type">node</span></span>
+         The gui node parent, where items will be placed
+        </li>
+        <li><span class="parameter">element</span>
+            <span class="types"><span class="type">node</span></span>
+         Element prefab. Need to get it size
+        </li>
+        <li><span class="parameter">in_row</span>
+            <span class="types"><span class="type">number</span></span>
+         How many nodes in row can be placed
+         (<em>default</em> 1)
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "get_pos"></a>
+    <strong>get_pos(index)</strong>
+    </dt>
+    <dd>
+    Return pos for grid node index
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">index</span>
+            <span class="types"><span class="type">number</span></span>
+         The grid element index
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">vector3</span></span>
+        Node position
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "get_index"></a>
+    <strong>get_index(pos)</strong>
+    </dt>
+    <dd>
+    Return index for grid pos
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">pos</span>
+            <span class="types"><span class="type">vector3</span></span>
+         The node position in the grid
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">number</span></span>
+        The node index
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "get_index_by_node"></a>
+    <strong>get_index_by_node(node)</strong>
+    </dt>
+    <dd>
+    Return grid index by node
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">node</span>
+            <span class="types"><span class="type">node</span></span>
+         The gui node in the grid
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">number</span></span>
+        The node index
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "set_anchor"></a>
+    <strong>set_anchor(anchor)</strong>
+    </dt>
+    <dd>
+    Set grid anchor.  Default anchor is equal to anchor of grid parent node
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">anchor</span>
+            <span class="types"><span class="type">vector3</span></span>
+         Anchor
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "add"></a>
+    <strong>add(item[, index])</strong>
+    </dt>
+    <dd>
+    Add new item to the grid
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">item</span>
+            <span class="types"><span class="type">node</span></span>
+         Gui node
+        </li>
+        <li><span class="parameter">index</span>
+            <span class="types"><span class="type">number</span></span>
+         The item position. By default add as last item
+         (<em>optional</em>)
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "remove"></a>
+    <strong>remove(index, is_shift_nodes)</strong>
+    </dt>
+    <dd>
+    Remove the item from the grid.  Note that gui node will be not deleted
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">index</span>
+            <span class="types"><span class="type">number</span></span>
+         The grid node index to remove
+        </li>
+        <li><span class="parameter">is_shift_nodes</span>
+            <span class="types"><span class="type">bool</span></span>
+         If true, will shift nodes left after index
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "get_size"></a>
+    <strong>get_size()</strong>
+    </dt>
+    <dd>
+    Return grid content size
+
+
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">vector3</span></span>
+        The grid content size
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "get_all_pos"></a>
+    <strong>get_all_pos()</strong>
+    </dt>
+    <dd>
+    Return array of all node positions
+
+
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">vector3[]</span></span>
+        All grid node positions
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "set_position_function"></a>
+    <strong>set_position_function(callback)</strong>
+    </dt>
+    <dd>
+    Change set position function for grid nodes.  It will call on
+ update poses on grid elements. Default: gui.set_position
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">callback</span>
+            <span class="types"><span class="type">function</span></span>
+         Function on node set position
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.static_grid</span></span>
+        Current grid instance
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "clear"></a>
+    <strong>clear()</strong>
+    </dt>
+    <dd>
+    Clear grid nodes array.  GUI nodes will be not deleted!
+ If you want to delete GUI nodes, use static_grid.nodes array before grid:clear
+
+
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.static_grid</span></span>
+        Current grid instance
+    </ol>
+
+
+
+
+</dd>
+</dl>
+    <h2 class="section-header "><a name="Tables"></a>Tables</h2>
+
+    <dl class="function">
+    <dt>
+    <a name = "Events"></a>
+    <strong>Events</strong>
+    </dt>
+    <dd>
+    Component events
+
+
+    <h3>Fields:</h3>
+    <ul>
+        <li><span class="parameter">on_add_item</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         On item add callback
+        </li>
+        <li><span class="parameter">on_remove_item</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         On item remove callback
+        </li>
+        <li><span class="parameter">on_change_items</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         On item add or remove callback
+        </li>
+        <li><span class="parameter">on_clear</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         On grid clear callback
+        </li>
+        <li><span class="parameter">on_update_positions</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         On update item positions callback
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "Fields"></a>
+    <strong>Fields</strong>
+    </dt>
+    <dd>
+    Component fields
+
+
+    <h3>Fields:</h3>
+    <ul>
+        <li><span class="parameter">parent</span>
+            <span class="types"><span class="type">node</span></span>
+         Parent gui node
+        </li>
+        <li><span class="parameter">nodes</span>
+            <span class="types"><span class="type">node[]</span></span>
+         List of all grid nodes
+        </li>
+        <li><span class="parameter">first_index</span>
+            <span class="types"><span class="type">number</span></span>
+         The first index of node in grid
+        </li>
+        <li><span class="parameter">last_index</span>
+            <span class="types"><span class="type">number</span></span>
+         The last index of node in grid
+        </li>
+        <li><span class="parameter">anchor</span>
+            <span class="types"><span class="type">vector3</span></span>
+         Item anchor
+        </li>
+        <li><span class="parameter">node_size</span>
+            <span class="types"><span class="type">vector3</span></span>
+         Item size
+        </li>
+        <li><span class="parameter">border</span>
+            <span class="types"><span class="type">vector4</span></span>
+         The size of item content
+        </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-09-29 23:46:16 </i>
+</div> <!-- id="about" -->
+</div> <!-- id="container" -->
+</body>
+</html>

docs/modules/druid.swipe.html

@@ -0,0 +1,265 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+<head>
+    <title>Defold Druid UI Library</title>
+    <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
+</head>
+<body>
+
+<div id="container">
+
+<div id="product">
+	<div id="product_logo"></div>
+	<div id="product_name"><big><b></b></big></div>
+	<div id="product_description"></div>
+</div> <!-- id="product" -->
+
+
+<div id="main">
+
+
+<!-- Menu -->
+
+<div id="navigation">
+<br/>
+<h1>Druid</h1>
+
+<ul>
+  <li><a href="../index.html">Index</a></li>
+</ul>
+
+<h2>Contents</h2>
+<ul>
+<li><a href="#Functions">Functions</a></li>
+<li><a href="#Tables">Tables</a></li>
+</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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</a></li>
+  <li><strong>druid.swipe</strong></li>
+  <li><a href="../modules/druid.text.html">druid.text</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.checkbox.html">druid.checkbox</a></li>
+  <li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
+  <li><a href="../modules/druid.dynamic_grid.html">druid.dynamic_grid</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.slider.html">druid.slider</a></li>
+  <li><a href="../modules/druid.timer.html">druid.timer</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>
+<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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
+  <li><a href="../topics/README.md.html">README</a></li>
+</ul>
+
+</div>
+
+<div id="content">
+
+<h1>Module <code>druid.swipe</code></h1>
+<p>Component to handle swipe gestures on node.</p>
+<p> Swipe will be triggered, if swipe was started and
+ ended on one node</p>
+
+
+<h2><a href="#Functions">Functions</a></h2>
+<table class="function_list">
+	<tr>
+	<td class="name" nowrap><a href="#init">init(node, on_swipe_callback)</a></td>
+	<td class="summary">Component init function</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#set_click_zone">set_click_zone(zone)</a></td>
+	<td class="summary">Strict swipe click area.</td>
+	</tr>
+</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>
+	</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 = "init"></a>
+    <strong>init(node, on_swipe_callback)</strong>
+    </dt>
+    <dd>
+    Component init function
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">node</span>
+            <span class="types"><span class="type">node</span></span>
+         Gui node
+        </li>
+        <li><span class="parameter">on_swipe_callback</span>
+            <span class="types"><span class="type">function</span></span>
+         Swipe callback for on<em>swipe</em>end event
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "set_click_zone"></a>
+    <strong>set_click_zone(zone)</strong>
+    </dt>
+    <dd>
+    Strict swipe click area.  Useful for
+ restrict events outside stencil node
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">zone</span>
+            <span class="types"><span class="type">node</span></span>
+         Gui node
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+</dl>
+    <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>
+    </dt>
+    <dd>
+    Component events
+
+
+    <h3>Fields:</h3>
+    <ul>
+        <li><span class="parameter">on_swipe</span>
+            <span class="types"><span class="type">druid_event</span></span>
+         Trigger on swipe event
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "Style"></a>
+    <strong>Style</strong>
+    </dt>
+    <dd>
+    Component style params.
+ You can override this component styles params in druid styles table
+ or create your own style
+
+
+    <h3>Fields:</h3>
+    <ul>
+        <li><span class="parameter">SWIPE_TIME</span>
+            <span class="types"><span class="type">number</span></span>
+         Maximum time for swipe trigger
+         (<em>default</em> 0.4)
+        </li>
+        <li><span class="parameter">SWIPE_THRESHOLD</span>
+            <span class="types"><span class="type">number</span></span>
+         Minimum distance for swipe trigger
+         (<em>default</em> 50)
+        </li>
+        <li><span class="parameter">SWIPE_TRIGGER_ON_MOVE</span>
+            <span class="types"><span class="type">bool</span></span>
+         If true, trigger on swipe moving, not only release action
+         (<em>default</em> false)
+        </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-09-29 23:46:16 </i>
+</div> <!-- id="about" -->
+</div> <!-- id="container" -->
+</body>
+</html>

docs/modules/druid.text.html

@@ -42,31 +42,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</a></li>
+  <li><a href="../modules/druid.swipe.html">druid.swipe</a></li>
+  <li><strong>druid.text</strong></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.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.dynamic_grid.html">druid.dynamic_grid</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><strong>druid.text</strong></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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -87,6 +92,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>
@@ -106,6 +115,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">
@@ -142,7 +155,7 @@
         </li>
         <li><span class="parameter">value</span>
             <span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
-         Initial text
+         Initial text. Default value is node text from GUI scene.
          (<em>optional</em>)
         </li>
         <li><span class="parameter">no_adjust</span>
@@ -156,6 +169,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>
@@ -262,6 +299,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">bool</span></span>
+        Is text node with line break
+    </ol>
+
+
+
+
 </dd>
 </dl>
     <h2 class="section-header "><a name="Tables"></a>Tables</h2>
@@ -352,7 +409,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid.timer.html

@@ -42,31 +42,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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.text.html">druid.text</a></li>
   <li><strong>druid.timer</strong></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>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -267,31 +272,17 @@
             <span class="types"><span class="type">node</span></span>
          Trigger node
         </li>
-        <li><span class="parameter">anim_node</span>
-            <span class="types"><span class="type">node</span></span>
-         Animation node
-         (<em>default</em> node)
+        <li><span class="parameter">from</span>
+            <span class="types"><span class="type">number</span></span>
+         Initial timer value
         </li>
-        <li><span class="parameter">scale_from</span>
-            <span class="types"><span class="type">vector3</span></span>
-         Initial scale of anim_node
+        <li><span class="parameter">target</span>
+            <span class="types"><span class="type">number</span></span>
+         Target timer value
         </li>
-        <li><span class="parameter">pos</span>
-            <span class="types"><span class="type">vector3</span></span>
-         Initial pos of anim_node
-        </li>
-        <li><span class="parameter">params</span>
-            <span class="types"><span class="type">any</span></span>
-         Params to click callbacks
-        </li>
-        <li><span class="parameter">hover</span>
-            <span class="types"><span class="type">druid.hover</span></span>
-         Druid hover logic component
-        </li>
-        <li><span class="parameter">click_zone</span>
-            <span class="types"><span class="type">node</span></span>
-         Restriction zone
-         (<em>optional</em>)
+        <li><span class="parameter">value</span>
+            <span class="types"><span class="type">number</span></span>
+         Current timer value
         </li>
     </ul>
 
@@ -307,7 +298,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid_event.html

@@ -41,31 +41,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/component.html">component</a></li>
+  <li><a href="../modules/druid.html">druid</a></li>
+  <li><strong>druid_event</strong></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.dynamic_grid.html">druid.dynamic_grid</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.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><strong>druid_event</strong></li>
   <li><a href="../modules/druid.helper.html">druid.helper</a></li>
   <li><a href="../modules/druid_instance.html">druid_instance</a></li>
 </ul>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -239,7 +244,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/modules/druid_instance.html

@@ -41,31 +41,36 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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.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><strong>druid_instance</strong></li>
 </ul>
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 
@@ -74,9 +79,19 @@
 <div id="content">
 
 <h1>Module <code>druid_instance</code></h1>
-<p>Druid main class.</p>
-<p> Create instance of this
- to start creating components</p>
+<p>Instance of Druid.</p>
+<p> Make one instance per gui_script with next code:</p>
+
+
+<pre>
+<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
+<span class="keyword">function</span> init(self)
+    self.druid = druid.new(self)
+    <span class="keyword">local</span> button = self.druid:new_button(...)
+<span class="keyword">end</span>
+</pre>
+
+<p> Learn Druid instance function here</p>
     <h3>See also:</h3>
     <ul>
          <li><a href="../modules/druid.button.html#">druid.button</a></li>
@@ -87,12 +102,15 @@
          <li><a href="../modules/druid.lang_text.html#">druid.lang_text</a></li>
          <li><a href="../modules/druid.timer.html#">druid.timer</a></li>
          <li><a href="../modules/druid.progress.html#">druid.progress</a></li>
-         <li><a href="../modules/druid.grid.html#">druid.grid</a></li>
+         <li><a href="../modules/druid.static_grid.html#">druid.static_grid</a></li>
+         <li><a href="../modules/druid.dynamic_grid.html#">druid.dynamic_grid</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.checkbox.html#">druid.checkbox</a></li>
          <li><a href="../modules/druid.checkbox_group.html#">druid.checkbox_group</a></li>
          <li><a href="../modules/druid.radio_group.html#">druid.radio_group</a></li>
+         <li><a href="../modules/druid.swipe.html#">druid.swipe</a></li>
+         <li><a href="../modules/druid.drag.html#">druid.drag</a></li>
     </ul>
 
 
@@ -107,6 +125,10 @@
 	<td class="summary">Create new druid component</td>
 	</tr>
 	<tr>
+	<td class="name" nowrap><a href="#druid:final">druid:final()</a></td>
+	<td class="summary">Call on final function on gui_script.</td>
+	</tr>
+	<tr>
 	<td class="name" nowrap><a href="#druid:remove">druid:remove(component)</a></td>
 	<td class="summary">Remove component from druid instance.</td>
 	</tr>
@@ -123,6 +145,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>
@@ -143,44 +181,61 @@
 	<td class="summary">Create text basic component</td>
 	</tr>
 	<tr>
-	<td class="name" nowrap><a href="#druid:new_lang_text">druid:new_lang_text(...)</a></td>
-	<td class="summary">Create lang_text basic component</td>
-	</tr>
-	<tr>
-	<td class="name" nowrap><a href="#druid:new_timer">druid:new_timer(...)</a></td>
-	<td class="summary">Create timer basic component</td>
-	</tr>
-	<tr>
-	<td class="name" nowrap><a href="#druid:new_progress">druid:new_progress(...)</a></td>
-	<td class="summary">Create progress basic component</td>
-	</tr>
-	<tr>
 	<td class="name" nowrap><a href="#druid:new_grid">druid:new_grid(...)</a></td>
-	<td class="summary">Create grid basic component</td>
+	<td class="summary">Create grid basic component
+ Deprecated</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#druid:new_static_grid">druid:new_static_grid(...)</a></td>
+	<td class="summary">Create static grid basic component</td>
 	</tr>
 	<tr>
 	<td class="name" nowrap><a href="#druid:new_scroll">druid:new_scroll(...)</a></td>
 	<td class="summary">Create scroll basic component</td>
 	</tr>
 	<tr>
+	<td class="name" nowrap><a href="#druid:new_swipe">druid:new_swipe(...)</a></td>
+	<td class="summary">Create swipe basic component</td>
+	</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>
+	<tr>
+	<td class="name" nowrap><a href="#druid:new_dynamic_grid">druid:new_dynamic_grid(...)</a></td>
+	<td class="summary">Create dynamic grid component</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#druid:new_lang_text">druid:new_lang_text(...)</a></td>
+	<td class="summary">Create lang_text component</td>
+	</tr>
+	<tr>
 	<td class="name" nowrap><a href="#druid:new_slider">druid:new_slider(...)</a></td>
-	<td class="summary">Create slider basic component</td>
+	<td class="summary">Create slider component</td>
 	</tr>
 	<tr>
 	<td class="name" nowrap><a href="#druid:new_checkbox">druid:new_checkbox(...)</a></td>
-	<td class="summary">Create checkbox basic component</td>
+	<td class="summary">Create checkbox component</td>
 	</tr>
 	<tr>
 	<td class="name" nowrap><a href="#druid:new_input">druid:new_input(...)</a></td>
-	<td class="summary">Create input basic component</td>
+	<td class="summary">Create input component</td>
 	</tr>
 	<tr>
 	<td class="name" nowrap><a href="#druid:new_checkbox_group">druid:new_checkbox_group(...)</a></td>
-	<td class="summary">Create checkbox_group basic component</td>
+	<td class="summary">Create checkbox_group component</td>
 	</tr>
 	<tr>
 	<td class="name" nowrap><a href="#druid:new_radio_group">druid:new_radio_group(...)</a></td>
-	<td class="summary">Create radio_group basic component</td>
+	<td class="summary">Create radio_group component</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#druid:new_timer">druid:new_timer(...)</a></td>
+	<td class="summary">Create timer component</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#druid:new_progress">druid:new_progress(...)</a></td>
+	<td class="summary">Create progress component</td>
 	</tr>
 </table>
 
@@ -240,6 +295,21 @@
 
 
 
+</dd>
+    <dt>
+    <a name = "druid:final"></a>
+    <strong>druid:final()</strong>
+    </dt>
+    <dd>
+    Call on final function on gui<em>script.  It will call on</em>remove
+ on all druid components
+
+
+
+
+
+
+
 </dd>
     <dt>
     <a name = "druid:remove"></a>
@@ -337,6 +407,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>
@@ -472,87 +603,6 @@
 
 
 
-</dd>
-    <dt>
-    <a name = "druid:new_lang_text"></a>
-    <strong>druid:new_lang_text(...)</strong>
-    </dt>
-    <dd>
-    Create lang_text basic component
-
-
-    <h3>Parameters:</h3>
-    <ul>
-        <li><span class="parameter">...</span>
-            <span class="types"><span class="type">args</span></span>
-         lang_text init args
-        </li>
-    </ul>
-
-    <h3>Returns:</h3>
-    <ol>
-
-           <span class="types"><span class="type">Component</span></span>
-        lang_text component
-    </ol>
-
-
-
-
-</dd>
-    <dt>
-    <a name = "druid:new_timer"></a>
-    <strong>druid:new_timer(...)</strong>
-    </dt>
-    <dd>
-    Create timer basic component
-
-
-    <h3>Parameters:</h3>
-    <ul>
-        <li><span class="parameter">...</span>
-            <span class="types"><span class="type">args</span></span>
-         timer init args
-        </li>
-    </ul>
-
-    <h3>Returns:</h3>
-    <ol>
-
-           <span class="types"><span class="type">Component</span></span>
-        timer component
-    </ol>
-
-
-
-
-</dd>
-    <dt>
-    <a name = "druid:new_progress"></a>
-    <strong>druid:new_progress(...)</strong>
-    </dt>
-    <dd>
-    Create progress basic component
-
-
-    <h3>Parameters:</h3>
-    <ul>
-        <li><span class="parameter">...</span>
-            <span class="types"><span class="type">args</span></span>
-         progress init args
-        </li>
-    </ul>
-
-    <h3>Returns:</h3>
-    <ol>
-
-           <span class="types"><span class="type">Component</span></span>
-        progress component
-    </ol>
-
-
-
-
 </dd>
     <dt>
     <a name = "druid:new_grid"></a>
@@ -560,6 +610,34 @@
     </dt>
     <dd>
     Create grid basic component
+ Deprecated
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">...</span>
+            <span class="types"><span class="type">args</span></span>
+         grid init args
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">Component</span></span>
+        grid component
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "druid:new_static_grid"></a>
+    <strong>druid:new_static_grid(...)</strong>
+    </dt>
+    <dd>
+    Create static grid basic component
 
 
     <h3>Parameters:</h3>
@@ -607,13 +685,121 @@
 
 
 
+</dd>
+    <dt>
+    <a name = "druid:new_swipe"></a>
+    <strong>druid:new_swipe(...)</strong>
+    </dt>
+    <dd>
+    Create swipe basic component
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">...</span>
+            <span class="types"><span class="type">args</span></span>
+         swipe init args
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">Component</span></span>
+        swipe component
+    </ol>
+
+
+
+
+</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>
+    <dt>
+    <a name = "druid:new_dynamic_grid"></a>
+    <strong>druid:new_dynamic_grid(...)</strong>
+    </dt>
+    <dd>
+    Create dynamic grid component
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">...</span>
+            <span class="types"><span class="type">args</span></span>
+         grid init args
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">Component</span></span>
+        grid component
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "druid:new_lang_text"></a>
+    <strong>druid:new_lang_text(...)</strong>
+    </dt>
+    <dd>
+    Create lang_text component
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">...</span>
+            <span class="types"><span class="type">args</span></span>
+         lang_text init args
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">Component</span></span>
+        lang_text component
+    </ol>
+
+
+
+
 </dd>
     <dt>
     <a name = "druid:new_slider"></a>
     <strong>druid:new_slider(...)</strong>
     </dt>
     <dd>
-    Create slider basic component
+    Create slider component
 
 
     <h3>Parameters:</h3>
@@ -640,7 +826,7 @@
     <strong>druid:new_checkbox(...)</strong>
     </dt>
     <dd>
-    Create checkbox basic component
+    Create checkbox component
 
 
     <h3>Parameters:</h3>
@@ -667,7 +853,7 @@
     <strong>druid:new_input(...)</strong>
     </dt>
     <dd>
-    Create input basic component
+    Create input component
 
 
     <h3>Parameters:</h3>
@@ -694,7 +880,7 @@
     <strong>druid:new_checkbox_group(...)</strong>
     </dt>
     <dd>
-    Create checkbox_group basic component
+    Create checkbox_group component
 
 
     <h3>Parameters:</h3>
@@ -721,7 +907,7 @@
     <strong>druid:new_radio_group(...)</strong>
     </dt>
     <dd>
-    Create radio_group basic component
+    Create radio_group component
 
 
     <h3>Parameters:</h3>
@@ -742,6 +928,60 @@
 
 
 
+</dd>
+    <dt>
+    <a name = "druid:new_timer"></a>
+    <strong>druid:new_timer(...)</strong>
+    </dt>
+    <dd>
+    Create timer component
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">...</span>
+            <span class="types"><span class="type">args</span></span>
+         timer init args
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">Component</span></span>
+        timer component
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "druid:new_progress"></a>
+    <strong>druid:new_progress(...)</strong>
+    </dt>
+    <dd>
+    Create progress component
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">...</span>
+            <span class="types"><span class="type">args</span></span>
+         progress init args
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">Component</span></span>
+        progress component
+    </ol>
+
+
+
+
 </dd>
 </dl>
 
@@ -750,7 +990,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/topics/01-components.md.html

@@ -36,27 +36,32 @@
 <li><a href="#Text">Text </a></li>
 <li><a href="#Blocker">Blocker </a></li>
 <li><a href="#Back_Handler">Back Handler </a></li>
-<li><a href="#Locale">Locale </a></li>
-<li><a href="#Timer">Timer </a></li>
-<li><a href="#Progress">Progress </a></li>
+<li><a href="#Lang_text">Lang text </a></li>
 <li><a href="#Scroll">Scroll </a></li>
-<li><a href="#Grid">Grid </a></li>
+<li><a href="#Progress">Progress </a></li>
 <li><a href="#Slider">Slider </a></li>
+<li><a href="#Input">Input </a></li>
 <li><a href="#Checkbox">Checkbox </a></li>
 <li><a href="#Checkbox_group">Checkbox group </a></li>
 <li><a href="#Radio_group">Radio group </a></li>
+<li><a href="#Timer">Timer </a></li>
+<li><a href="#Static_Grid">Static Grid </a></li>
+<li><a href="#Dynamic_Grid">Dynamic Grid </a></li>
 <li><a href="#Hover">Hover </a></li>
-<li><a href="#Input">Input </a></li>
+<li><a href="#Swipe">Swipe </a></li>
+<li><a href="#Drag">Drag </a></li>
 </ul>
 
 
 <h2>Topics</h2>
 <ul class="">
-  <li><strong>Druid components</strong></li>
+  <li><strong>01-components</strong></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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 <h2>Modules</h2>
@@ -64,21 +69,24 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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.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>
@@ -88,74 +96,417 @@
 <div id="content">
 
 
+
+
 <h1>Druid components</h1>
 
+
 <p><a name="Button"></a></p>
 <h2>Button</h2>
-<p>Basic game button</p>
+<p><a href="https://insality.github.io/druid/modules/druid.button.html">Button API here</a></p>
+
+<h3>Overview</h3>
+<p>Basic Druid input component. Handle input on node and provide different callbacks on touch events.</p>
+
+<h3>Setup</h3>
+<p>Create button with druid: <code>button = druid:new_button(node_name, callback, [params], [animation_node])</code>
+Where node name is name of node from GUI scene. You can use <code>node_name</code> as input trigger zone and point another node for animation via <code>animation_node</code></p>
+
+<h3>Usecase</h3>
+<p><em>fill example usecases</em></p>
+
+<h3>Notes</h3>
+<p>- Button callback have next params: (self, params, button_instance)</p>
+
+<pre>
+- **self** - Druid self context
+- **params** - Additional params, specified on button creating
+- **button_instance** - button itself
+</pre>
+
+<p>- You can set <em>params</em> on button callback on button creating: <code>druid:new_button(&quot;node_name&quot;, callback, params)</code>. This <em>params</em> will pass in callback as second argument
+- Button have next events:</p>
+
+<pre>
+- **on_click** - basic button callback
+- **on_repeated_click** - repeated click callback, <span class="keyword">while</span> holding the button, don<span class="string">'t trigger if callback is empty
+- **on_long_click** - callback on long button tap, don'</span>t trigger <span class="keyword">if</span> callback is empty
+- **on_hold_click** - hold callback, before long_click trigger, don<span class="string">'t trigger if callback is empty
+- **on_double_click** - different callback, if tap button 2+ in row, don'</span>t trigger <span class="keyword">if</span> callback is empty
+</pre>
+
+<p>- Click event will not trigger, if between pressed and released state cursor was outside of node zone
+- If button have double click event and it is triggered, usual callback will be not invoked
+- If you have stencil on buttons and you don't want trigger them outside of stencil node, you can use <a href="../modules/druid.button.html#set_click_zone">button:set_click_zone</a> to restrict button click zone
+- Button can have key trigger to use then by key: <a href="../modules/druid.button.html#set_key_trigger">button:set_key_trigger</a>
+- Animation node can be used for example to animate small icon on big panel. Node name of trigger zone will be <code>big panel</code> and animation node will be <code>small icon</code></p>
+
 
 <p><a name="Text"></a></p>
 <h2>Text</h2>
-<p>Wrap on text node with text size adjusting</p>
+<p><a href="https://insality.github.io/druid/modules/druid.text.html">Text API here</a></p>
+
+<h3>Overview</h3>
+<p>Basic Druid text component. Text components by default have the text size adjusting.</p>
+
+<h3>Setup</h3>
+<p>Create text node with druid: <code>text = druid:new_text(node_name, [initial_value], [is_disable_size_adjust])</code></p>
+
+<h3>Notes</h3>
+<p>- Text component by default have auto adjust text sizing. Text never will be bigger, than text node size, which you can setup in GUI scene. It can be disabled on component creating by settings argument <code>is_no_adjust</code> to <em>true</em></p>
+
+<p><img src="../media/text_autosize.png" alt=""/></p>
+
+<ul>
+    <li>Text pivot can be changed with <a href="../modules/druid.text.html#set_pivot">text:set_pivot</a>, and text will save their position inside their text size box:</li>
+</ul>
+
+<p><img src="../media/text_anchor.gif" alt=""/></p>
+
 
 <p><a name="Blocker"></a></p>
 <h2>Blocker</h2>
-<p>Block input in node zone</p>
+<p><a href="https://insality.github.io/druid/modules/druid.blocker.html">Blocker API here</a></p>
+
+<h3>Overview</h3>
+<p>Druid component for block input. Use it to block input in special zone.</p>
+
+<h3>Setup</h3>
+<p>Create blocker component with druid: <code>druid:new_blocker(node_name)</code></p>
+
+<h3>Notes</h3>
+<p>Explanation:
+<img src="../media/blocker_scheme.png" alt=""/></p>
+
+<p>Blue zone is <strong>button</strong> with close_window callback</p>
+
+<p>Yellow zone is blocker with window content</p>
+
+<p>So you can do the safe zones, when you have the big buttons</p>
+
 
 <p><a name="Back_Handler"></a></p>
 <h2>Back Handler</h2>
-<p>Handle back button (Android, backspace)</p>
+<p><a href="https://insality.github.io/druid/modules/druid.back_handler.html">Back handler API here</a></p>
 
-<p><a name="Locale"></a></p>
-<h2>Locale</h2>
-<p>Text component with handle localization system</p>
+<h3>Overview</h3>
+<p>Component to handle back button. It handle Android back button and Backspace key. Key triggers in <code>input.binding</code> should be setup for correct working.</p>
 
-<p><a name="Timer"></a></p>
-<h2>Timer</h2>
-<p>Run timer on text node</p>
+<h3>Setup</h3>
+<p>Setup callback with <code>druid:new_back_handler(callback)</code></p>
+
+<h3>Notes</h3>
+
+
+<p><a name="Lang_text"></a></p>
+<h2>Lang text</h2>
+<p><a href="https://insality.github.io/druid/modules/druid.lang_text.html">Lang text API here</a></p>
+
+<h3>Overview</h3>
+<p>Wrap on Text component to handle localization. It uses druid get<em>text</em>function to set text by it's id</p>
+
+<h3>Setup</h3>
+<p>Create lang text component with druid <code>text = druid:new_lang_text(node_name, locale_id)</code></p>
+
+<h3>Notes</h3>
 
-<p><a name="Progress"></a></p>
-<h2>Progress</h2>
-<p>Basic progress bar</p>
 
 <p><a name="Scroll"></a></p>
 <h2>Scroll</h2>
-<p>Basic scroll component</p>
+<p><a href="https://insality.github.io/druid/modules/druid.scroll.html">Scroll API here</a></p>
+
+<h3>Overview</h3>
+<p>Basic Druid scroll component. Handle all scrolling stuff in druid GUI</p>
+
+<h3>Setup</h3>
+<p>Create scroll component with druid: <code>scroll = druid:new_scroll(view_node, content_node)</code>.</p>
+
+<p><em>View</em>node_ - 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>content</em>node_ node size. The initial view box will be equal to <em>view</em>node_ node size</p>
+
+<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_outline.png" alt=""/></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>
+<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.
+- Scroll have next events:</p>
+
+<pre>
+- *on_scroll* (self, position) On scroll move callback
+- *on_scroll_to* (self, position, is_instant) On scroll_to <span class="keyword">function</span> callback
+- *on_point_scroll* (self, item_index, position) On scroll_to_index <span class="keyword">function</span> callback
+</pre>
+
+<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 <a href="../modules/druid.scroll.html#set_extra_stretch_size">scroll:set_extra_stretch_size</a>
+- Multitouch is required for scroll. Scroll is correctly handling touch_id swap while dragging scroll</p>
+
+
+<p><a name="Progress"></a></p>
+<h2>Progress</h2>
+<p><a href="https://insality.github.io/druid/modules/druid.progress.html">Progress API here</a></p>
+
+<h3>Overview</h3>
+<p>Basic Druid progress bar component</p>
+
+<h3>Setup</h3>
+<p>Create progress bar component with druid: <code>progress = druid:new_progress(node_name, key, init_value)</code></p>
+
+<p>Node name should have maximum node size, so in GUI scene, node_name should be fully filled.
+Key is value from druid const: const.SIDE.X (or just "x") or const.SIDE.Y (or just "y")</p>
+
+<h3>Notes</h3>
+<p>- Progress correct working with 9slice nodes, it trying to set size by <em>set</em>size_ first, if it is not possible, it set up sizing via <em>set</em>scale_
+- Progress bar can fill only by vertical or horizontal size. If you want make diagonal progress bar, just rotate node in GUI scene
+- If you have glitchy or dark texture bug with progress bar, try to disable mipmaps in your texture profiles</p>
 
-<p><a name="Grid"></a></p>
-<h2>Grid</h2>
-<p>Component for manage node positions</p>
 
 <p><a name="Slider"></a></p>
 <h2>Slider</h2>
-<p>Basic slider component</p>
+<p><a href="https://insality.github.io/druid/modules/druid.slider.html">Slider API here</a></p>
 
-<p><a name="Checkbox"></a></p>
-<h2>Checkbox</h2>
-<p>Basic checkbox component</p>
+<h3>Overview</h3>
+<p>Basic Druid slider component</p>
 
-<p><a name="Checkbox_group"></a></p>
-<h2>Checkbox group</h2>
-<p>Several checkboxes in one group</p>
+<h3>Setup</h3>
+<p>Create slider component  with druid: <code>slider = druid:new_slider(node_name, end_pos, callback)</code></p>
 
-<p><a name="Radio_group"></a></p>
-<h2>Radio group</h2>
-<p>Several checkboxes in one group with single choice</p>
+<p>Pin node (node_name in params) should be placed in zero position (initial). It will be available to mode Pin node between start pos and end pos. </p>
+
+<h3>Notes</h3>
+<p>- You can setup points of interests on slider via <a href="../modules/druid.slider.html#set_steps">slider:set_steps</a>. If steps are exist, slider values will be only from this steps (notched slider)
+- For now, start pos and end pos should be on vertical or horizontal line (their x or y value should be equal)</p>
 
-<p><a name="Hover"></a></p>
-<h2>Hover</h2>
-<p>Trigger component for check node hover state</p>
 
 <p><a name="Input"></a></p>
 <h2>Input</h2>
-<p>Component to process user text input</p>
+<p><a href="https://insality.github.io/druid/modules/druid.input.html">Input API here</a></p>
+
+<h3>Overview</h3>
+<p>Basic Druid text input component</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>
+<h2>Checkbox</h2>
+<p><a href="https://insality.github.io/druid/modules/druid.checkbox.html">Checkbox API here</a></p>
+
+<h3>Overview</h3>
+<p>Basic Druid checkbox component.</p>
+
+<h3>Setup</h3>
+<p>Create checkbox component with druid: <code>checkbox = druid:new_checkbox(node, callback)</code></p>
+
+<h3>Notes</h3>
+<p>- Checkbox uses button to handle click
+- You can setup another node to handle input with click_node arg in component init: <code>druid:new_checkbox(node, callback, [click_node])</code></p>
+
+
+<p><a name="Checkbox_group"></a></p>
+<h2>Checkbox group</h2>
+<p><a href="https://insality.github.io/druid/modules/druid.checkbox_group.html">Checkbox group API here</a></p>
+
+<h3>Overview</h3>
+<p>Several checkboxes in one group</p>
+
+<h3>Setup</h3>
+<p>Create checkbox_group component with druid: <code>group = druid:new_checkbox_group(nodes[], callback)</code></p>
+
+<h3>Notes</h3>
+<p>- Callback arguments: <code>function(self, checkbox_index)</code>. Index is equals in <em>nodes[]</em> array in component constructor
+- You can get/set checkbox_group state with <code>group:set_state()</code> and <code>group:get_state()</code></p>
+
+
+<p><a name="Radio_group"></a></p>
+<h2>Radio group</h2>
+<p><a href="https://insality.github.io/druid/modules/druid.radio_group.html">Radio group API here</a></p>
+
+<h3>Overview</h3>
+<p>Several checkboxes in one group with single choice</p>
+
+<h3>Setup</h3>
+<p>Create radio_group component with druid: <code>group = druid:new_radio_group(nodes[], callback)</code></p>
+
+<h3>Notes</h3>
+<p>- Callback arguments: <code>function(self, checkbox_index)</code>. Index is equals in <em>nodes[]</em> array in component constructor
+- You can get/set radio_group state with <code>group:set_state()</code> and <code>group:get_state()</code>
+- Only different from checkbox_group: on click another checkboxes in this group will be unchecked</p>
+
+
+<p><a name="Timer"></a></p>
+<h2>Timer</h2>
+<p><a href="https://insality.github.io/druid/modules/druid.timer.html">Timer API here</a></p>
+
+<h3>Overview</h3>
+<p>Handle timer work on gui text node</p>
+
+<h3>Setup</h3>
+<p>Create timer component with druid: <code>timer = druid:new_timer(text_node, from_seconds, to_seconds, callback)</code></p>
+
+<h3>Notes</h3>
+<p>- Timer fires callback, when timer value equals to <em>to</em>seconds_
+- Timer will setup text node with current timer value
+- Timer uses update function to handle time</p>
+
+
+<p><a name="Static_Grid"></a></p>
+<h2>Static Grid</h2>
+<p><a href="https://insality.github.io/druid/modules/druid.static_grid.html">Static Grid API here</a></p>
+
+<h3>Overview</h3>
+<p>Component for manage node positions.
+Static grid have constant node size, so it possible to calculate node positions before placement. Nodes can be placed with gaps.
+Static grid can shift elements on add/remove functions.</p>
+
+<h3>Setup</h3>
+<p>Create  component with druid: <code>grid = druid:new_static_grid(parent_node, prefab_node, max_in_row_elements)</code></p>
+
+<h3>Notes</h3>
+<p>- On <em>add node</em> grid will set node parent to <em>parent</em>node_
+- You can get array of position of every element for setup points of interest in scroll component
+- You can get size of all elements for setup size in scroll component
+- You can also bind the grid to the scroll component for auto resize scroll content size
+- Pivot of parent_node matter for node placement
+- <em>Prefab node</em> used to get node size and anchor
+- You can point *position_function* for animations with <em>static</em>grid:set<em>position</em>function(node, pos)_ callback. Default - *gui.set_position()*</p>
+
+
+<p><a name="Dynamic_Grid"></a></p>
+<h2>Dynamic Grid</h2>
+<p><a href="https://insality.github.io/druid/modules/druid.dynamic_grid.html">Dynamic Grid API here</a></p>
+
+<h3>Overview</h3>
+<p>Component for manage node positions with different node sizes.
+Unlike Static Grid, Dynamic Grid can place nodes only in one row or in one column.
+Dynamic Grid can't have gaps between elements - you will get error, if try spawn element far away from others.
+Dynamic Grid should have <strong>West</strong>, <strong>East</strong>, <strong>South</strong> or <strong>North</strong> pivot (vertical or horizontal element placement)</p>
+
+<h3>Setup</h3>
+<p>Create  component with druid: <code>grid = druid:new_dynamic_grid(parent_node)</code></p>
+
+<p>Check the <em>parent</em>node_ have correct pivot point. You will get the error otherwise.</p>
+
+<h3>Notes</h3>
+<p>- On <em>add node</em> grid will set node parent to <em>parent</em>node_
+- You can get array of position of every element for setup points of interest in scroll component
+- You can get size of all elements for setup size in scroll component
+- You can also bind the grid to the scroll component for auto resize scroll content size
+- Pivot of parent<em>node matter for node placement
+- You can point *position</em>function* for animations with <em>static</em>grid:set<em>position</em>function(node, pos)_ callback. Default - *gui.set_position()*
+- First node placed at Grid pivot point. Other nodes placed nearby of other nodes.
+- On <em>add/remove</em> nodes always shifted. You can point the shift side in this functions (*is<em>shift</em>left* boolean argument)</p>
+
+<p><a name="Hover"></a></p>
+<h2>Hover</h2>
+<p><a href="https://insality.github.io/druid/modules/druid.hover.html">Hover API here</a></p>
+
+<h3>Overview</h3>
+<p>System Druid component, handle hover node state.</p>
+
+<h3>Setup</h3>
+<p>Create hover component with druid: <code>hover = druid:new_hover(node, callback)</code></p>
+
+<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
+- By default, assume what node is on not hovered state (both <em>hover</em> and <em>mouse</em>hover_)</p>
+
+
+<p><a name="Swipe"></a></p>
+<h2>Swipe</h2>
+<p><a href="https://insality.github.io/druid/modules/druid.swipe.html">Swipe API here</a></p>
+
+<h3>Overview</h3>
+<p>System Druid component, handle swipe actions on node</p>
+
+<h3>Setup</h3>
+<p>Create swipe component with druid: <code>hover = druid:new_swipe(node, swipe_callback)</code></p>
+
+<h3>Notes</h3>
+<p>- Swipe callback have next params: (self, swipe_side, distance, time)</p>
+
+<pre>
+- **self** - Druid self context
+- **swipe_side**: *<span class="global">string</span>* - values from [<span class="string">"up"</span>, <span class="string">"down"</span>, <span class="string">"left"</span>, <span class="string">"right"</span>]
+- **distance**: *number* - <span class="keyword">in</span> pixels, distance of swipe
+- **time**: *number* - <span class="keyword">in</span> seconds, time of swiping
+</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
+- 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
+- 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="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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/topics/02-creating_custom_components.md.html

@@ -35,16 +35,19 @@
 <li><a href="#Overview">Overview </a></li>
 <li><a href="#Custom_components">Custom components </a></li>
 <li><a href="#Best_practice_on_custom_components">Best practice on custom components </a></li>
+<li><a href="#Power_of_using_templates">Power of using templates </a></li>
 </ul>
 
 
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <li><a href="../topics/01-components.md.html">01-components</a></li>
   <li><strong>Creating custom components</strong></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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 <h2>Modules</h2>
@@ -52,21 +55,24 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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.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>
@@ -80,18 +86,22 @@
 
 <p><a name="Overview"></a></p>
 <h2>Overview</h2>
-<p>Druid allows you to create your custom components from druid basic components or other custom components</p>
+
+<p>Druid allows you to create your custom components from druid basic components or other custom components.</p>
+
+<p>Every component is the children of Basic Druid component. Read the [basic component API here].(https://insality.github.io/druid/modules/component.html), Methods of basic components you can call via self:{method_name}</p>
 
 
 <p><a name="Custom_components"></a></p>
 <h2>Custom components</h2>
+
 <p>Basic custom component template looks like this:</p>
 
 <pre>
 <span class="keyword">local</span> const = <span class="global">require</span>(<span class="string">"druid.const"</span>)
 <span class="keyword">local</span> component = <span class="global">require</span>(<span class="string">"druid.component"</span>)
 
-<span class="keyword">local</span> M = component.create(<span class="string">"your_component"</span>)
+<span class="keyword">local</span> M = component.create(<span class="string">"my_component"</span>)
 
 <span class="comment">-- Component constructor
 </span><span class="keyword">function</span> M.init(self, ...)
@@ -105,18 +115,39 @@
 </span><span class="keyword">function</span> M.on_input(self, action_id, action)
 <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><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_ANGUAGECHANinterest
+</span><span class="keyword">function</span> M.on_anguagechanself)
 <span class="keyword">end</span>
 
 <span class="comment">-- Call only if component with ON_LAYOUT_CHANGE interest
 </span><span class="keyword">function</span> M.on_layout_change(self)
 <span class="keyword">end</span>
 
+<span class="comment">-- Call, if input was capturing before this component
+</span><span class="comment">-- Example: scroll is start scrolling, so you need unhover button
+</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>
+
 <span class="keyword">return</span> M
 </pre>
 
@@ -128,12 +159,32 @@
 <span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
 <span class="keyword">local</span> my_component = <span class="global">require</span>(<span class="string">"my.amazing.component"</span>)
 
-<span class="keyword">local</span> <span class="keyword">function</span> init(self)
+<span class="keyword">function</span> init(self)
     druid.register(<span class="string">"my_component"</span>, my_component)
 <span class="keyword">end</span>
 </pre>
 
 
+<p>Registering make new function with "new<em>{component</em>name}". In our example it will be: <code>druid:new_my_component()</code>.</p>
+
+<p>Or you can create component without registering with <code>druid:create(my_component_module)</code></p>
+
+<p>As component registered, you can create your component with next code:</p>
+
+<pre>
+<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
+<span class="keyword">local</span> my_component = <span class="global">require</span>(<span class="string">"my.amazing.component"</span>)
+
+<span class="keyword">function</span> init(self)
+    self.druid = druid.new(self)
+
+    <span class="keyword">local</span> my_component = self.druid:new_my_component(...)
+    <span class="comment">-- or --
+</span> <span class="keyword">local</span> my_component = self.druid:create(my_component, ...)
+<span class="keyword">end</span>
+</pre>
+
+
 <h3>Interest</h3>
 <p>Interest - is a way to indicate what events your component will respond to.
 There is next interests in druid:
@@ -143,14 +194,15 @@ 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 recomended describe component scheme in next way:</p>
+<p>On each component recommended describe component scheme in next way:</p>
 
 
 <pre>
@@ -160,9 +212,9 @@ There is next interests in druid:
 <span class="keyword">local</span> M = component.create(<span class="string">"your_component"</span>)
 
 <span class="keyword">local</span> SCHEME = {
-    ROOT = <span class="string">"/root"</span>,
-    ITEM = <span class="string">"/item"</span>,
-    TITLE = <span class="string">"/title"</span>
+    ROOT = <span class="string">"root"</span>,
+    ITEM = <span class="string">"item"</span>,
+    TITLE = <span class="string">"title"</span>
 }
 
 <span class="keyword">function</span> M.init(self, template_name, node_table)
@@ -180,20 +232,22 @@ There is next interests in druid:
 
     <span class="comment">-- Button self on callback is self of _this_ component
 </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>
 </pre>
 
 
 
+<p><a name="Power_of_using_templates"></a></p>
+<h2>Power of using templates</h2>
+
+<p>You can use one component, but creating and customizing templates for them. Templates only requires to match the component scheme.</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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/topics/03-styles.md.html

@@ -34,17 +34,19 @@
 <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>
+<li><a href="#Create_your_own_styles">Create your own styles </a></li>
 </ul>
 
 
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><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">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 <h2>Modules</h2>
@@ -52,21 +54,24 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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.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>
@@ -88,7 +93,8 @@
 
 <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>
+You can pass <em>nil</em> or <em>empty</em>table_ to use default values for all components (no styles)</p>
 
 <pre>
 <span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
@@ -128,17 +134,30 @@
 </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>
+
+<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="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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/topics/04-druid_assets.md.html

@@ -38,11 +38,13 @@
 
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><strong>Druid assets</strong></li>
   <li><a href="../topics/05-examples.md.html">Examples</a></li>
+  <li><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 <h2>Modules</h2>
@@ -50,21 +52,24 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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.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>
@@ -80,7 +85,7 @@
 <h2>Overview</h2>
 <p>I've created <a href="https://github.com/Insality/druid-assets">druid-assets repository</a> to make a <em>marketplace</em> with  custom styles and components.</p>
 
-<p>Any of druid users can push their own components and styles to share it with the other users</p>
+<p>Any of Druid users can push their own components and styles to share it with the other users</p>
 
 <p>Also, this marketplace is great example to how you can create your custom components</p>
 
@@ -89,7 +94,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/topics/05-examples.md.html

@@ -38,11 +38,13 @@
 
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><strong>Examples</strong></li>
+  <li><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><a href="../topics/README.md.html">README</a></li>
 </ul>
 <h2>Modules</h2>
@@ -50,21 +52,24 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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.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>
@@ -80,14 +85,14 @@
 <h2>Overview</h2>
 <p>See the <a href="https://github.com/Insality/druid/tree/develop/example/kenney">example folder</a> for examples of how to use Druid</p>
 
-<p>Try the HTML5 version of the example app</p>
+<p>Try the <a href="https://insality.github.io/druid/druid/">HTML5 version</a> of the example app</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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/topics/README.md.html

@@ -34,11 +34,13 @@
 <ul>
 <li><a href="#Setup">Setup </a></li>
 <li><a href="#Components">Components </a></li>
-<li><a href="#Creating_components">Creating components </a></li>
+<li><a href="#Basic_usage">Basic usage </a></li>
+<li><a href="#Druid_Events">Druid Events </a></li>
+<li><a href="#Druid_Lifecycle">Druid Lifecycle </a></li>
+<li><a href="#Details">Details </a></li>
 <li><a href="#Examples">Examples </a></li>
 <li><a href="#Documentation">Documentation </a></li>
 <li><a href="#Games_powered_by_Druid">Games powered by Druid </a></li>
-<li><a href="#Future_plans">Future plans </a></li>
 <li><a href="#License">License </a></li>
 <li><a href="#Issues_and_suggestions">Issues and suggestions </a></li>
 </ul>
@@ -46,11 +48,13 @@
 
 <h2>Topics</h2>
 <ul class="">
-  <li><a href="../topics/01-components.md.html">Druid components</a></li>
+  <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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><a href="../topics/faq.md.html">faq</a></li>
   <li><strong>README</strong></li>
 </ul>
 <h2>Modules</h2>
@@ -58,21 +62,24 @@
   <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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.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.dynamic_grid.html">druid.dynamic_grid</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.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>
@@ -83,7 +90,9 @@
 
     <a href="https://insality.github.io/druid/"><img src="media/druid_logo.png" alt=""/></a></p>
 
-<p><strong>Druid</strong> - powerful defold component UI library. Use basic druid components or make your own game-specific components to make amazing GUI in your games.</p>
+<p><a href="https://github.com/Insality/druid/releases"><img src="https://img.shields.io/github/v/release/insality/druid" alt="GitHub release (latest by date)"/></a></p>
+
+<p><strong>Druid</strong> - powerful Defold component UI library. Use basic and extended <strong>Druid</strong> components or make your own game-specific components to make amazing GUI in your games.</p>
 
 
 <p><a name="Setup"></a></p>
@@ -91,7 +100,7 @@
 
 <h3>Dependency</h3>
 
-<p>You can use the druid extension in your own project by adding this project as a  <a href="https://www.defold.com/manuals/libraries/">Defold library dependency</a>. Open your game.project file and in the dependencies field under project add:</p>
+<p>You can use the <strong>Druid</strong> extension in your own project by adding this project as a <a href="https://www.defold.com/manuals/libraries/">Defold library dependency</a>. Open your game.project file and in the dependencies field under project add:</p>
 
 <blockquote>
     <p><a href="https://github.com/Insality/druid/archive/master.zip">https://github.com/Insality/druid/archive/master.zip</a></p>
@@ -99,22 +108,58 @@
 
 <p>Or point to the ZIP file of a  <a href="https://github.com/Insality/druid/releases">specific release</a>.</p>
 
+<h3>Input bindings</h3>
 
-<h3>Code</h3>
+<p>For <strong>Druid</strong> to work requires next input bindings:</p>
 
-<p>Adjust druid settings, if needed:</p>
+<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>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>
+    <li>Touch triggers - <code>Touch multi</code> -> <code>multitouch</code> <em>For scroll component</em></li>
+</ul>
+
+<p><img src="media/input_binding_2.png" alt=""/>
+<img src="media/input_binding_1.png" alt=""/></p>
+
+
+<h3>Input capturing [optional]</h3>
+
+<p>By default, <strong>Druid</strong> will auto-capture input focus, if any input component will be created. So you don't need to call <code>msg.post(&quot;.&quot;, &quot;acquire_input_focus&quot;)</code></p>
+
+<p>If you not need this behaviour, you can disable it by settings <code>druid.no_auto_input</code> field in <em>game.project</em>:</p>
+<pre><code> [druid]
+ no_auto_input = 1
+</code></pre>
+
+
+<h3>Code [optional]</h3>
+
+<p>Adjust <strong>Druid</strong> settings, if needed:</p>
 
 <pre>
 <span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
 
 <span class="comment">-- Used for button component and custom components
+</span><span class="comment">-- Callback should play sound by name
 </span>druid.set_sound_function(callback)
 
 <span class="comment">-- Used for lang_text component
+</span><span class="comment">-- Callback should return localized string by locale id
 </span>druid.set_text_function(callback)
 
 <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_language_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>
 
 
@@ -122,107 +167,179 @@
 <p><a name="Components"></a></p>
 <h2>Components</h2>
 
-<p>Druid provides next basic components:
-- <strong>Button</strong> - Basic game button</p>
+<p><strong>Druid</strong> provides next <em>basic</em> components:</p>
 
 <ul>
-    <li><p><strong>Text</strong> - Wrap on text node with text size adjusting</p></li>
-    <li><p><strong>Blocker</strong> - Block input in node zone</p></li>
-    <li><p><strong>Back Handler</strong> - Handle back button (Android, backspace)</p></li>
-    <li><p><strong>Lang text</strong> - Text component with handle localization system</p></li>
-    <li><p><strong>Timer</strong> - Run timer on text node</p></li>
-    <li><p><strong>Progress</strong> - Basic progress bar</p></li>
-    <li><p><strong>Scroll</strong> - Basic scroll component</p></li>
-    <li><p><strong>Grid</strong> - Component for manage node positions</p></li>
-    <li><p><strong>Slider</strong> - Basic slider component</p></li>
-    <li><p><strong>Checkbox</strong> - Basic checkbox component</p></li>
-    <li><p><strong>Checkbox group</strong> - Several checkboxes in one group</p></li>
-    <li><p><strong>Radio group</strong> - Several checkboxes in one group with single choice</p></li>
-    <li><p><strong>Hover</strong> - Trigger component for check node hover state</p></li>
-    <li><p><strong>Input</strong> - Component to process user text input</p></li>
+    <li><p><strong><a href="master/docs_md/01-components.md#button">Button</a></strong> - Basic Druid button input component. Handles all types of interaction (tap, long-tap, hold-tap, double-tap, simple key triggers, etc)</p></li>
+    <li><p><strong><a href="master/docs_md/01-components.md#text">Text</a></strong> - Basic Druid text component. Wrap on gui text node, handle text size adjusting.</p></li>
+    <li><p><strong><a href="master/docs_md/01-components.md#scroll">Scroll</a></strong> - Basic Druid scroll component</p></li>
+    <li><p><strong><a href="master/docs_md/01-components.md#blocker">Blocker</a></strong> - Block input in node zone component</p></li>
+    <li><p><strong><a href="master/docs_md/01-components.md#back-handler">Back Handler</a></strong> - Handle back button (Android back button, backspace key)</p></li>
+    <li><p><strong><a href="master/docs_md/01-components.md#static-grid">Static Grid</a></strong> - Component for manage node positions with equal sizes</p></li>
+    <li><p><strong><a href="master/docs_md/01-components.md#hover">Hover</a></strong> - System Druid component, handle hover node state</p></li>
+    <li><p><strong><a href="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="master/docs_md/01-components.md#drag">Drag</a></strong> - System Druid component, handle drag input on node </p></li>
 </ul>
 
-<p>Full info see on <em>components.md</em></p>
+<p><strong>Druid</strong> also provides next <em>extended</em> components:</p>
+
+<p><strong>*Note</strong>: In future, to use extended components, you should register them first. It's required for make <strong>Druid</strong> modular - to exclude unused components from build*</p>
+
+<ul>
+    <li><p><strong><a href="master/docs_md/01-components.md#checkbox">Checkbox</a></strong> - Checkbox component</p></li>
+    <li><p><strong><a href="master/docs_md/01-components.md#checkbox-group">Checkbox group</a></strong> - Several checkboxes in one group</p></li>
+    <li><p><strong><a href="master/docs_md/01-components.md#dynamic-grid">Dynamic Grid</a></strong> - Component for manage node positions with different sizes. Only in one row or column</p></li>
+    <li><p><strong><a href="master/docs_md/01-components.md#input">Input</a></strong> - User text input component</p></li>
+    <li><p><strong><a href="master/docs_md/01-components.md#lang-text">Lang text</a></strong> - Wrap on Text component to handle localization</p></li>
+    <li><p><strong><a href="master/docs_md/01-components.md#progress">Progress</a></strong> - Progress bar component</p></li>
+    <li><p><strong><a href="master/docs_md/01-components.md#radio-group">Radio group</a></strong> - Several checkboxes in one group with single choice</p></li>
+    <li><p><strong><a href="master/docs_md/01-components.md#slider">Slider</a></strong> - Slider component</p></li>
+    <li><p><strong><a href="master/docs_md/01-components.md#timer">Timer</a></strong> - Handle timer work on gui text node</p></li>
+</ul>
+
+<p>Full info see on <em><a href="master/docs_md/01-components.md">components.md</a></em></p>
 
 
-<p><a name="Creating_components"></a></p>
-<h2>Creating components</h2>
+<p><a name="Basic_usage"></a></p>
+<h2>Basic usage</h2>
+
+<p>For using <strong>Druid</strong>, first you should create Druid instance to spawn components. Pass to new Druid instance main engine functions: <em>update</em>, *on<em>message* and *on</em>input*</p>
+
+<p>All <strong>Druid</strong> components as arguments can apply node name string, you can don't do <code>gui.get_node()</code> before</p>
+
+<p>All <strong>Druid</strong> and component methods calling with <code>:</code> like <code>self.druid:new_button()</code></p>
 
-<p>Any components creating via druid:</p>
 
 <pre>
 <span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
 
-<span class="keyword">local</span> <span class="keyword">function</span> init(self)
+<span class="keyword">local</span> <span class="keyword">function</span> button_callback(self)
+    <span class="global">print</span>(<span class="string">"Button was clicked!"</span>)
+<span class="keyword">end</span>
+
+<span class="keyword">function</span> init(self)
     self.druid = druid.new(self)
-    <span class="keyword">local</span> button = self.druid:new_button(node_name, callback)
-    <span class="keyword">local</span> text = self.druid:new_text(node_text_name)
+    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>
+</pre>
+
+
+<p>Learn <strong>Druid</strong> instance <a href="https://insality.github.io/druid/modules/druid_instance.html">functions here</a>)</p>
+
+<p><a name="Druid_Events"></a></p>
+<h2>Druid Events</h2>
+
+<p>Any <strong>Druid</strong> components as callbacks uses <a href="https://insality.github.io/druid/modules/druid_event.html">Druid Events</a>. In component API (<a href="https://insality.github.io/druid/modules/druid.button.html#Events">button example</a>) pointed list of component events. You can manually subscribe on this events by next API:</p>
+
+<ul>
+    <li><p><strong>event:subscribe</strong>(callback)</p></li>
+    <li><p><strong>event:unsubscribe</strong>(callback)</p></li>
+    <li><p><strong>event:clear</strong>()</p></li>
+</ul>
+
+<p>You can subscribe several callbacks on single event.</p>
+
+<p><a name="Druid_Lifecycle"></a></p>
+<h2>Druid Lifecycle</h2>
+
+<p>Here is full Druid lifecycle setup in your <strong>*.gui_script</strong> file:</p>
+
+<pre>
+<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
+
+<span class="keyword">function</span> init(self)
+    self.druid = druid.new(self)
+<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> update(self, dt)
     self.druid:update(dt)
 <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>
+
 <span class="keyword">function</span> on_message(self, message_id, message, sender)
     self.druid:on_message(message_id, message, sender)
 <span class="keyword">end</span>
-
-<span class="keyword">function</span> on_input(self, action_id, action)
-    self.druid:on_input(action_id, action)
-<span class="keyword">end</span>
 </pre>
 
 
+<ul>
+    <li><em>final</em> <strong>required</strong> function for correct Druid lifecycle</li>
+    <li>*on_input* used for almost all Druid 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</li>
+</ul>
+
+<p>Recommended is fully integrate all <strong>Druid</strong> lifecycles functions</p>
+
+
+<p><a name="Details"></a></p>
+<h2>Details</h2>
+
+<ul>
+    <li>Druid input goes as stack. Last created button will checked first. So create your GUI from back</li>
+    <li>Don't forget about <code>return</code> in <code>on_input</code>: <code>return self.druid:on_input()</code>. It need, if you have more than 1 acquire inputs (several Druid, other input system, etc)</li>
+    <li>Druid by default do <em>acquire</em>input<em>focus</em>. So you don't need do it manually. Buy only if you have components, which requires <em>on</em>input_ </li>
+    <li>If you want to delete node with declared Druid component, don't forget to remove them via <code>druid:remove(component)</code></li>
+</ul>
+
+<p>See full <a href="master/docs_md/FAQ.md">See FAQ here</a></p>
+
 
 <p><a name="Examples"></a></p>
 <h2>Examples</h2>
 
-<p>See the <a href="https://github.com/insality/druid/tree/develop/example/kenney">example folder</a> for examples of how to use Druid</p>
+<p>See the <a href="https://github.com/Insality/druid/tree/develop/example">example folder</a> for examples of how to use <strong>Druid</strong></p>
 
 <p>See the <a href="https://github.com/insality/druid-assets">druid-assets repository</a> for examples of how to create custom components and styles</p>
 
-<p>Try the HTML5 version of the example app</p>
+<p>Try the <a href="https://insality.github.io/druid/druid/">HTML5 version</a> of the example app</p>
 
 
 <p><a name="Documentation"></a></p>
 <h2>Documentation</h2>
 
-<p>To learn druid better, read next documentation:
-- Druid components
-- Create custom components
-- Druid asset store
-- Druid Styles</p>
+<p>To learn <strong>Druid</strong> better, read next documentation:
+- <a href="master/docs_md/01-components.md">Druid components</a>
+- <a href="master/docs_md/02-creating_custom_components.md">Create custom components</a>
+- <a href="master/docs_md/FAQ.md">See FAQ article</a>
+- <a href="master/docs_md/03-styles.md">Druid styles</a>
+- <a href="master/docs_md/04-druid_assets.md">Druid asset store</a></p>
 
-<p>Full druid documentation you can find here:
+<p>Full <strong>Druid</strong> documentation you can find here:
 https://insality.github.io/druid/</p>
 
 
 <p><a name="Games_powered_by_Druid"></a></p>
 <h2>Games powered by Druid</h2>
 
-<p><em>Will fill later</em></p>
-
-
-<p><a name="Future_plans"></a></p>
-<h2>Future plans</h2>
-
-<ul>
-    <li><p>Basic input component</p></li>
-    <li><p>Add on<em>layout</em>change support (to keep gui data between layout change)</p></li>
-    <li><p>Add on<em>change</em>language support (call single function to update all druid instance)</p></li>
-    <li><p>Better documentation and examples</p></li>
-    <li><p>Add more comfortable gamepad support for GUI (ability to select button with DPAD and other stuff)</p></li>
-</ul>
+<p><em>You published your game and you using Druid? Note me!</em></p>
 
 
 <p><a name="License"></a></p>
 <h2>License</h2>
 
-<p>Original idea by <a href="https://github.com/AGulev">AGulev</a></p>
+<ul>
+    <li>Developed and supporting by <a href="https://github.com/Insality">Insality</a></li>
+    <li>Original idea by <a href="https://github.com/AGulev">AGulev</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>MIT License</p>
+<p><strong>MIT</strong> License</p>
 
 
 <p><a name="Issues_and_suggestions"></a></p>
@@ -234,7 +351,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-03-21 23:23:01 </i>
+<i style="float:right;">Last updated 2020-09-29 23:46:16 </i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
 </body>

docs/topics/changelog.md.html

@@ -0,0 +1,252 @@
+<!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>Druid 0.3.0:</strong></li>
+  <li><a href="../topics/faq.md.html">faq</a></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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.checkbox.html">druid.checkbox</a></li>
+  <li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
+  <li><a href="../modules/druid.dynamic_grid.html">druid.dynamic_grid</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.slider.html">druid.slider</a></li>
+  <li><a href="../modules/druid.timer.html">druid.timer</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">
+
+
+<h3>Druid 0.3.0:</h3>
+
+<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 HiddenInputField (https://defold.com/manuals/project-settings/#input-method)
+</pre>
+</li>
+    <li><p>Add two functions to basic component: <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 now: 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 button <code>on_click_outside</code> 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 <em>start</em>pos_ field to button component</p></li>
+    <li><p>Changed input binding settings. Add esc, enter, text and marked_text. Backspace now is different from android back button event. Check the README setup section</p></li>
+    <li><p>Renamed <em>on</em>change<em>language</em> -> <em>on</em>language<em>change</em> component interest</p></li>
+    <li><p>Add several examples to druid-assets respository (see live example here): https://insality.github.io/druid-assets/)</p></li>
+    <li><p>Known issues:</p>
+
+<pre>
+- Adjusting text size by height works wrong. Adjusting single line texting works fine
+- Space is <span class="keyword">not</span> working <span class="keyword">in</span> HTML5
+</pre>
+
+<h3>Druid 0.4.0:</h3></li>
+    <li><p>Add <em>Drag</em> basic component</p>
+
+<pre>
+- Drag component allow you detect dragging on GUI node
+- Drag will be processed even the cursor is outside of node, <span class="keyword">if</span> drag is already started
+- Drag provides correct handle of several touches. Drag can switch between them (no more scroll gliches with position)
+- Drag have <span class="global">next</span> events:
+    - on_touch_start (self)
+    - on_touch_end (self)
+    - on_drag_start (self)
+    - on_drag (self, dx, dy)
+    - on_drag_end (self)
+- You can restriction side of dragging by changing _drag.can_x_ <span class="keyword">and</span> _drag.can_y_ fields
+- You can setup drag deadzone to detect, when dragging is started (_by default <span class="number">10</span> pixels_)
+</pre>
+</li>
+    <li><p>[Breaking changes] Druid <em>Scroll</em> component fully reworked. Input logic moved to <em>Drag</em> component</p>
+
+<pre>
+- Update scroll documentation
+- Change constructor order params
+- Change _scroll:set_border_ to _scroll:set_size_
+- 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
+    - _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)
+- You can adjust start scroll size via _.gui_ scene. Just setup correct node size
+- 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.
+- **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
+</pre>
+</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"><code>grid:clear</code></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 you can only set styles
+- 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](https://insality.github.<span class="global">io</span>/druid/index.html)
+</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 blocker)</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>
+
+
+<h3>Druid 0.5.0:</h3>
+
+<p>Besides a lot of fixes (thanks for feedback!) two components was add: <em>StaticGrid</em> and <em>DynamicGrid</em> instead of usual <em>Grid</em> component (it is deprecated now).
+Add <em>component:set</em>input<em>enabled</em> for basic component class. So you can enable/disable user input for any component.
+Finaly implemented <em>on</em>layout<em>changed</em> support. Druid components now will try keep their data between layout changing! You also can use this callback in your custom components.
+Also check <em>component.template.lua</em> what you can use for your own custom components!</p>
+
+<ul>
+    <li><strong>#77</strong> Grid update:
+
+<pre>
+- The _grid_ component now is __deprecated__. Use _static_grid_ instead. Druid will show you deprecated message, <span class="keyword">if</span> you still using _grid_ component
+- __[BREAKING]__ Remove the _grid:set_offset_ grid functions. To adjust the distance between nodes inside grid - setup correct node sizes
+- Add _static_grid_ component
+    - The behaviour like previous _grid_ component
+    - Have constant element size, so have ability to precalculate positions, indexes <span class="keyword">and</span> size of content
+    - By default, <span class="keyword">not</span> shifting elements on removing element. Add _is_shift_ flag to _static_grid:remove_ <span class="keyword">function</span>
+    - This grid can spawn elements with several rows <span class="keyword">and</span> columns
+- Add _dynamic_grid_ component
+    - Can have different element size. So have no ability to precalculate stuff like _static_grid_
+    - This grid can't have gaps between elements. You will get the <span class="global">error</span>, <span class="keyword">if</span> spawn element far away from other elements
+    - The grid can spawn elements only <span class="keyword">in</span> row <span class="keyword">or</span> <span class="keyword">in</span> column
+    - The grid node should have __West__, __East__, __South__ <span class="keyword">or</span> __North__ pivot (vertical <span class="keyword">or</span> horizontal element placement)
+    - Able to shift nodes left <span class="keyword">or</span> right on _grid:add_ / _grid:remove_ functions
+</pre>
+</li>
+    <li>Scroll update:
+
+<pre>
+- Add _scroll:set_vertical_scroll_ <span class="keyword">and</span> _scroll:set_horizontal_scroll_ <span class="keyword">for</span> disable scroll sides
+- Add _scroll:bind_grid_ <span class="keyword">function</span>. Now is possible to bind Druid Grid component (Static <span class="keyword">or</span> Dynamic) to the scroll <span class="keyword">for</span> auto refresh the scroll size on grid nodes changing
+</pre>
+</li>
+    <li><strong>#37</strong> Add <em>on</em>layout<em>change</em> support. Druid will keep and restore GUI component data between changing game layout. Override function <em>on</em>layout<em>change</em> in your custom components to do stuff you need.</li>
+    <li><strong>#85</strong> Move several components from <code>base</code> folder to <code>extended</code>. In future to use them, you have to register them manually. This is done for decrease build size by excluding unused components</li>
+    <li><strong>Fix #61:</strong> Button component: fix button animation node creation</li>
+    <li><strong>Fix #64:</strong> Hover component: wrong mouse_hover default state</li>
+    <li><strong>Fix #71:</strong> Blocker: blocker now correct block mouse hover event</li>
+    <li><strong>Fix #72:</strong> Fix <code>return nil</code> in some <code>on_input</code> functions</li>
+    <li><strong>Fix #74:</strong> <strong>[BREAKING]</strong> Fix typo: strech -> stretch. Scroll function <code>set_extra_stretch_size</code> renamed</li>
+    <li><strong>Fix #76:</strong> Add params for lang text localization component</li>
+    <li><strong>Fix #79:</strong> Fix <em>druid:remove</em> inside on_input callback</li>
+    <li><strong>Fix #80:</strong> Fix <em>hover:set</em>enable_ typo function call</li>
+    <li><strong>Fix #88:</strong> Add <em>component:set</em>input<em>enabled</em> function to enable/disable input for druid component. Now you can disable input of any druid component, even complex (with other components inside)</li>
+    <li>Add <code>component.template.lua</code> as template for Druid custom component</li>
+    <li>Update the example app</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-09-29 23:46:16 </i>
+</div> <!-- id="about" -->
+</div> <!-- id="container" -->
+</body>
+</html>

docs/topics/faq.md.html

@@ -0,0 +1,161 @@
+<!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><a href="../topics/changelog.md.html">Druid 0.3.0:</a></li>
+  <li><strong>faq</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.drag.html">druid.drag</a></li>
+  <li><a href="../modules/druid.hover.html">druid.hover</a></li>
+  <li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
+  <li><a href="../modules/druid.static_grid.html">druid.static_grid</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/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.checkbox.html">druid.checkbox</a></li>
+  <li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
+  <li><a href="../modules/druid.dynamic_grid.html">druid.dynamic_grid</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.slider.html">druid.slider</a></li>
+  <li><a href="../modules/druid.timer.html">druid.timer</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">
+
+
+
+<h1>Druid FAQ</h1>
+
+<blockquote>
+    <p><em>Have questions about Druid? Ask me!</em>
+    <em>Here is questions you might have</em></p>
+</blockquote>
+
+<h3>Q: Why I want use Druid?</h3>
+<p><strong>A:</strong> ---</p>
+
+
+<h3>Q: How to remove the Druid component instance?</h3>
+<p><strong>A:</strong> Any created <strong>Druid</strong> component can be removed with <em>druid:remove</em>. <a href="https://insality.github.io/druid/modules/druid_instance.html#druid:remove">API reference link</a>.</p>
+
+
+<h3>Q: How to make scroll work?</h3>
+<p><strong>A:</strong> ---</p>
+
+
+<h3>Q: How the input is processing?</h3>
+<p><strong>A:</strong>
+<em>SImply</em>: the <strong>Druid</strong> has a LIFO queue to check input. Last added buttons have more priority than first. Placing your buttons from behind to the front is correct in most cases.</p>
+
+
+<h3>Q: For what purpose Blocker component is exist?</h3>
+<p><strong>A:</strong> Component explanation <a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#notes-2">here</a>.
+With Blocker you can block input in some zone. It is useful for make unclickable zone in buttons or kind of buttons panel on other big button (ex. close windows on window background click)</p>
+
+
+<h3>Q: Which stuff can I do with custom components?</h3>
+<p><strong>A:</strong> Any of you can imagine! There is a lot of examples, but in general: custom components allow you place component and some game logic separately from other stuff. It will be reusable, easier for testing and developing.</p>
+
+<p>For example it can be element in scroll with buttons, your custom GUI widget or even component with your game logic. Usually custom components going with templates. You can do several templates for single component module (for different visuals!)</p>
+
+<p>Some examples of custom components you can find <a href="https://github.com/Insality/druid-assets">here</a>.</p>
+
+
+<h3>Q: How *self:get_node()* is working?</h3>
+<p><strong>A:</strong> The node can be placed in gui directly or can be cloned via *gui.clone_tree()*. Also nodes can be placed as templates, so full node id will be composed from template name and node name (in cloned nodes too).</p>
+
+<p><strong>Druid</strong> component *self:get<em>node()* trying to search in all of this places. Use *self:set</em>template()* and *self:set<em>component</em>nodes()* for correct setup component nodes before any call of *self:get_node()*.</p>
+
+<p>Remember, usually you should pass <em><strong>string name</strong> of the node</em>, not gui node itself. It's better and more druid-way. </p>
+
+
+<h3>Q: My button in scroll is clickable outside the stencil node</h3>
+<p><strong>A:</strong> Since <strong>Druid</strong> checking click node with <em>gui.pick</em>node_, stencil is not prevent this. You can setup additional click zone on your buttons with <em>button:set</em>click<em>zone</em>.</p>
+
+<p>The usual Druid way after add button to the scroll do:</p>
+
+<pre>
+<span class="comment">-- Scroll view node usually is stencil node
+</span>button:set_click_zone(scroll.view_node)
+</pre>
+
+
+
+<h3>Q: How to use EmmyLua annotations? <em>(from Druid 0.6.0)</em></h3>
+<p><strong>A:</strong> Since the dependencies can't be processed by external editors, for use generated EmmyLua annotations you should copy the <em>annotations.lua</em> to your project. For EmmyLua it will be enough. Remember you can <em>restart emmylua server</em> for refresh the changes, if something goes wrong.
+After the annotations is processed, you should point the type of druid in requires:</p>
+
+<pre>
+<span class="comment">---@type druid
+</span><span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
+
+<span class="comment">-- Now the autocomplete is working</span>
+</pre>
+
+
+
+<h3>Q: When I should use *on<em>layout</em>change*?</h3>
+<p><strong>A:</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-09-29 23:46:16 </i>
+</div> <!-- id="about" -->
+</div> <!-- id="container" -->
+</body>
+</html>

docs_md/01-components.md

@@ -1,46 +1,356 @@
+
+
 # Druid components
 
+
 ## Button
-Basic game button
+[Button API here](https://insality.github.io/druid/modules/druid.button.html)
+
+### Overview
+Basic Druid input component. Handle input on node and provide different callbacks on touch events.
+
+### Setup
+Create button with druid: `button = druid:new_button(node_name, callback, [params], [animation_node])`
+Where node name is name of node from GUI scene. You can use `node_name` as input trigger zone and point another node for animation via `animation_node`
+
+### Usecase
+_fill example usecases_
+
+### Notes
+- Button callback have next params: (self, params, button_instance)
+	- **self** - Druid self context
+	- **params** - Additional params, specified on button creating
+	- **button_instance** - button itself
+- You can set _params_ on button callback on button creating: `druid:new_button("node_name", callback, params)`. This _params_ will pass in callback as second argument
+- Button have next events:
+	- **on_click** - basic button callback
+	- **on_repeated_click** - repeated click callback, while holding the button, don't trigger if callback is empty
+	- **on_long_click** - callback on long button tap, don't trigger if callback is empty
+	- **on_hold_click** - hold callback, before long_click trigger, don't trigger if callback is empty
+	- **on_double_click** - different callback, if tap button 2+ in row, don't trigger if callback is empty
+- Click event will not trigger, if between pressed and released state cursor was outside of node zone
+- If button have double click event and it is triggered, usual callback will be not invoked
+- If you have stencil on buttons and you don't want trigger them outside of stencil node, you can use `button:set_click_zone` to restrict button click zone
+- Button can have key trigger to use then by key: `button:set_key_trigger`
+- Animation node can be used for example to animate small icon on big panel. Node name of trigger zone will be `big panel` and animation node will be `small icon`
+
 
 ## Text
-Wrap on text node with text size adjusting
+[Text API here](https://insality.github.io/druid/modules/druid.text.html)
+
+### Overview
+Basic Druid text component. Text components by default have the text size adjusting.
+
+### Setup
+Create text node with druid: `text = druid:new_text(node_name, [initial_value], [is_disable_size_adjust])`
+
+### Notes
+- Text component by default have auto adjust text sizing. Text never will be bigger, than text node size, which you can setup in GUI scene. It can be disabled on component creating by settings argument `is_no_adjust` to _true_
+
+![](../media/text_autosize.png)
+
+- Text pivot can be changed with `text:set_pivot`, and text will save their position inside their text size box:
+
+![](../media/text_anchor.gif)
+
 
 ## Blocker
-Block input in node zone
+[Blocker API here](https://insality.github.io/druid/modules/druid.blocker.html)
+
+### Overview
+Druid component for block input. Use it to block input in special zone.
+
+### Setup
+Create blocker component with druid: `druid:new_blocker(node_name)`
+
+### Notes
+Explanation:
+![](../media/blocker_scheme.png)
+
+Blue zone is **button** with close_window callback
+
+Yellow zone is blocker with window content
+
+So you can do the safe zones, when you have the big buttons
+
 
 ## Back Handler
-Handle back button (Android, backspace)
+[Back handler API here](https://insality.github.io/druid/modules/druid.back_handler.html)
 
-## Locale
-Text component with handle localization system
+### Overview
+Component to handle back button. It handle Android back button and Backspace key. Key triggers in `input.binding` should be setup for correct working.
 
-## Timer
-Run timer on text node
+### Setup
+Setup callback with `druid:new_back_handler(callback)`
+
+### Notes
+
+
+## Lang text
+[Lang text API here](https://insality.github.io/druid/modules/druid.lang_text.html)
+
+### Overview
+Wrap on Text component to handle localization. It uses druid get_text_function to set text by it's id
+
+### Setup
+Create lang text component with druid `text = druid:new_lang_text(node_name, locale_id)`
+
+### Notes
 
-## Progress
-Basic progress bar
 
 ## Scroll
-Basic scroll component
+[Scroll API here](https://insality.github.io/druid/modules/druid.scroll.html)
+
+### Overview
+Basic Druid scroll component. Handle all scrolling stuff in druid GUI
+
+### Setup
+Create scroll component with druid: `scroll = druid:new_scroll(view_node, content_node)`.
+
+_View_node_ - 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 _content_node_ node size. The initial view box will be equal to _view_node_ node size
+
+Usually, Place _view_node_ and as children add _content_node_:
+![](../media/scroll_scheme.png)
+![](../media/scroll_outline.png)
+
+*Here content_node below view_node, in game content_node be able to scroll left until end*
+
+### Notes
+- 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.
+- Scroll have next events:
+	- *on_scroll* (self, position) On scroll move callback
+	- *on_scroll_to* (self, position, is_instant) On scroll_to function callback
+	- *on_point_scroll* (self, item_index, position) On scroll_to_index function callback
+- 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 API here](https://insality.github.io/druid/modules/druid.progress.html)
+
+### Overview
+Basic Druid progress bar component
+
+### Setup
+Create progress bar component with druid: `progress = druid:new_progress(node_name, key, init_value)`
+
+Node name should have maximum node size, so in GUI scene, node_name should be fully filled. 
+Key is value from druid const: const.SIDE.X (or just "x") or const.SIDE.Y (or just "y")
+
+### Notes
+- Progress correct working with 9slice nodes, it trying to set size by _set_size_ first, if it is not possible, it set up sizing via _set_scale_
+- Progress bar can fill only by vertical or horizontal size. If you want make diagonal progress bar, just rotate node in GUI scene
+- If you have glitchy or dark texture bug with progress bar, try to disable mipmaps in your texture profiles
 
-## Grid
-Component for manage node positions
 
 ## Slider
-Basic slider component
+[Slider API here](https://insality.github.io/druid/modules/druid.slider.html)
 
-## Checkbox
-Basic checkbox component
+### Overview
+Basic Druid slider component
 
-## Checkbox group
-Several checkboxes in one group
+### Setup
+Create slider component  with druid: `slider = druid:new_slider(node_name, end_pos, callback)`
 
-## Radio group
-Several checkboxes in one group with single choice
+Pin node (node_name in params) should be placed in zero position (initial). It will be available to mode Pin node between start pos and end pos. 
+
+### Notes
+- You can setup points of interests on slider via `slider:set_steps`. If steps are exist, slider values will be only from this steps (notched slider)
+- For now, start pos and end pos should be on vertical or horizontal line (their x or y value should be equal)
 
-## Hover
-Trigger component for check node hover state
 
 ## Input
-Component to process user text input
+[Input API here](https://insality.github.io/druid/modules/druid.input.html)
+
+### Overview
+Basic Druid text input component
+
+### 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
+[Checkbox API here](https://insality.github.io/druid/modules/druid.checkbox.html)
+
+### Overview
+Basic Druid checkbox component.
+
+### Setup
+Create checkbox component with druid: `checkbox = druid:new_checkbox(node, callback)`
+
+### Notes
+- Checkbox uses button to handle click
+- You can setup another node to handle input with click_node arg in component init: `druid:new_checkbox(node, callback, [click_node])`
+
+
+## Checkbox group
+[Checkbox group API here](https://insality.github.io/druid/modules/druid.checkbox_group.html)
+
+### Overview
+Several checkboxes in one group
+
+### Setup
+Create checkbox_group component with druid: `group = druid:new_checkbox_group(nodes[], callback)`
+
+### Notes
+- Callback arguments: `function(self, checkbox_index)`. Index is equals in _nodes[]_ array in component constructor
+- You can get/set checkbox_group state with `group:set_state()` and `group:get_state()`
+
+
+## Radio group
+[Radio group API here](https://insality.github.io/druid/modules/druid.radio_group.html)
+
+### Overview
+Several checkboxes in one group with single choice
+
+### Setup
+Create radio_group component with druid: `group = druid:new_radio_group(nodes[], callback)`
+
+### Notes
+- Callback arguments: `function(self, checkbox_index)`. Index is equals in _nodes[]_ array in component constructor
+- You can get/set radio_group state with `group:set_state()` and `group:get_state()`
+- Only different from checkbox_group: on click another checkboxes in this group will be unchecked
+
+
+## Timer
+[Timer API here](https://insality.github.io/druid/modules/druid.timer.html)
+
+### Overview
+Handle timer work on gui text node
+
+### Setup
+Create timer component with druid: `timer = druid:new_timer(text_node, from_seconds, to_seconds, callback)`
+
+### Notes
+- Timer fires callback, when timer value equals to _to_seconds_
+- Timer will setup text node with current timer value
+- Timer uses update function to handle time
+
+
+## Static Grid
+[Static Grid API here](https://insality.github.io/druid/modules/druid.static_grid.html)
+
+### Overview
+Component for manage node positions.
+Static grid have constant node size, so it possible to calculate node positions before placement. Nodes can be placed with gaps.
+Static grid can shift elements on add/remove functions.
+
+### Setup
+Create  component with druid: `grid = druid:new_static_grid(parent_node, prefab_node, max_in_row_elements)`
+
+### Notes
+- On _add node_ grid will set node parent to _parent_node_
+- You can get array of position of every element for setup points of interest in scroll component
+- You can get size of all elements for setup size in scroll component
+- You can also bind the grid to the scroll component for auto resize scroll content size
+- Pivot of parent_node matter for node placement
+- _Prefab node_ used to get node size and anchor
+- You can point *position_function* for animations with _static_grid:set_position_function(node, pos)_ callback. Default - *gui.set_position()*
+
+
+## Dynamic Grid
+[Dynamic Grid API here](https://insality.github.io/druid/modules/druid.dynamic_grid.html)
+
+### Overview
+Component for manage node positions with different node sizes.
+Unlike Static Grid, Dynamic Grid can place nodes only in one row or in one column.
+Dynamic Grid can't have gaps between elements - you will get error, if try spawn element far away from others.
+Dynamic Grid should have __West__, __East__, __South__ or __North__ pivot (vertical or horizontal element placement)
+
+### Setup
+Create  component with druid: `grid = druid:new_dynamic_grid(parent_node)`
+
+Check the _parent_node_ have correct pivot point. You will get the error otherwise.
+
+### Notes
+- On _add node_ grid will set node parent to _parent_node_
+- You can get array of position of every element for setup points of interest in scroll component
+- You can get size of all elements for setup size in scroll component
+- You can also bind the grid to the scroll component for auto resize scroll content size
+- Pivot of parent_node matter for node placement
+- You can point *position_function* for animations with _static_grid:set_position_function(node, pos)_ callback. Default - *gui.set_position()*
+- First node placed at Grid pivot point. Other nodes placed nearby of other nodes.
+- On *add/remove* nodes always shifted. You can point the shift side in this functions (*is_shift_left* boolean argument)
+
+## Hover
+[Hover API here](https://insality.github.io/druid/modules/druid.hover.html)
+
+### Overview
+System Druid component, handle hover node state.
+
+### Setup
+Create hover component with druid: `hover = druid:new_hover(node, callback)`
+
+### 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
+- By default, assume what node is on not hovered state (both _hover_ and _mouse_hover_)
+
+
+## Swipe
+[Swipe API here](https://insality.github.io/druid/modules/druid.swipe.html)
+
+### Overview
+System Druid component, handle swipe actions on node
+
+### Setup
+Create swipe component with druid: `hover = druid:new_swipe(node, swipe_callback)`
+
+### Notes
+- Swipe callback have next params: (self, swipe_side, distance, time)
+	- **self** - Druid self context
+	- **swipe_side**: *string* - values from ["up", "down", "left", "right"]
+	- **distance**: *number* - in pixels, distance of swipe
+	- **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
+- 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
+- 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)`

docs_md/02-creating_custom_components.md

@@ -1,16 +1,20 @@
 # Creating custom components
 
 ## Overview
-Druid allows you to create your custom components from druid basic components or other custom components
+
+Druid allows you to create your custom components from druid basic components or other custom components.
+
+Every component is the children of Basic Druid component. Read the [basic component API here].(https://insality.github.io/druid/modules/component.html), Methods of basic components you can call via self:{method_name}
 
 
 ## Custom components
+
 Basic custom component template looks like this:
 ```lua
 local const = require("druid.const")
 local component = require("druid.component")
 
-local M = component.create("your_component")
+local M = component.create("my_component")
 
 -- Component constructor
 function M.init(self, ...)
@@ -24,18 +28,39 @@ end
 function M.on_input(self, action_id, action)
 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
 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_ANGUAGECHANinterest
+function M.on_anguagechanself)
 end
 
 -- Call only if component with ON_LAYOUT_CHANGE interest
 function M.on_layout_change(self)
 end
 
+-- Call, if input was capturing before this component
+-- Example: scroll is start scrolling, so you need unhover button
+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
+
 return M
 ```
 
@@ -45,11 +70,29 @@ Add your custom component to druid via `druid.register`
 local druid = require("druid.druid")
 local my_component = require("my.amazing.component")
 
-local function init(self)
+function init(self)
 	druid.register("my_component", my_component)
 end
 ```
 
+Registering make new function with "new_{component_name}". In our example it will be: `druid:new_my_component()`.
+
+Or you can create component without registering with `druid:create(my_component_module)`
+
+As component registered, you can create your component with next code:
+```lua
+local druid = require("druid.druid")
+local my_component = require("my.amazing.component")
+
+function init(self)
+	self.druid = druid.new(self)
+
+	local my_component = self.druid:new_my_component(...)
+	-- or --
+	local my_component = self.druid:create(my_component, ...)
+end
+```
+
 ### Interest
 Interest - is a way to indicate what events your component will respond to.
 There is next interests in druid:
@@ -61,13 +104,16 @@ 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 recomended describe component scheme in next way:
+On each component recommended describe component scheme in next way:
 
 ```lua
 -- Component module
@@ -76,9 +122,9 @@ local component = require("druid.component")
 local M = component.create("your_component")
 
 local SCHEME = {
-	ROOT = "/root",
-	ITEM = "/item",
-	TITLE = "/title"
+	ROOT = "root",
+	ITEM = "item",
+	TITLE = "title"
 }
 
 function M.init(self, template_name, node_table)
@@ -96,10 +142,11 @@ function M.init(self, template_name, node_table)
 
 	-- Button self on callback is self of _this_ component
 	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
 
-```
+```
+
+
+## Power of using templates
+
+You can use one component, but creating and customizing templates for them. Templates only requires to match the component scheme.

docs_md/03-styles.md

@@ -9,6 +9,7 @@ In component API documentation, you can find the style API for this component. O
 
 ## Usage
 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
 local druid = require("druid.druid")
 local my_style = require("my.amazing.style")
@@ -42,6 +43,17 @@ local function init(self)
 end
 ```
 
-## Create custom components
-Styles is just lua table, so it can be described in just one single file
-__TODO__
+
+## 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)`

docs_md/04-druid_assets.md

@@ -3,6 +3,6 @@
 ## Overview
 I've created [druid-assets repository](https://github.com/Insality/druid-assets) to make a _marketplace_ with  custom styles and components.
 
-Any of druid users can push their own components and styles to share it with the other users
+Any of Druid users can push their own components and styles to share it with the other users
 
 Also, this marketplace is great example to how you can create your custom components

docs_md/changelog.md

@@ -0,0 +1,133 @@
+### 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 HiddenInputField (https://defold.com/manuals/project-settings/#input-method)
+
+- Add two functions to basic component: `increase_input_priority` and `reset_input_priority`. It used to process component input first in current input stack (there is two input stacks now: 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 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_ field to button component
+
+- Changed input binding settings. Add esc, enter, text and marked_text. Backspace now is different from android back button event. Check the README setup section
+
+- Renamed _on_change_language_ -> _on_language_change_ component interest
+
+- Add several examples to druid-assets respository (see live example here): https://insality.github.io/druid-assets/)
+
+- Known issues:
+	- Adjusting text size by height works wrong. Adjusting single line texting works fine
+	- Space is not working in HTML5
+
+
+
+### Druid 0.4.0:
+
+- Add _Drag_ basic component
+	- Drag component allow you detect dragging on GUI node
+	- Drag will be processed even the cursor is outside of node, if drag is already started
+	- Drag provides correct handle of several touches. Drag can switch between them (no more scroll gliches with position)
+	- Drag have next events:
+		- on_touch_start (self)
+		- on_touch_end (self)
+		- on_drag_start (self)
+		- on_drag (self, dx, dy)
+		- on_drag_end (self)
+	- You can restriction side of dragging by changing _drag.can_x_ and _drag.can_y_ fields
+	- You can setup drag deadzone to detect, when dragging is started (_by default 10 pixels_)
+
+- [Breaking changes] Druid _Scroll_ component fully reworked. Input logic moved to _Drag_ component
+	- Update scroll documentation
+	- Change constructor order params
+	- Change _scroll:set_border_ to _scroll:set_size_
+	- Scroll now contains from view and content node
+		- _View node_ - static node, which size determine the "camera" zone
+		- _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)
+	- You can adjust start scroll size via _.gui_ scene. Just setup correct node size
+	- 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.
+	- **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
+
+- Druid _Grid_ Update
+	- Anchor by default equals to node pivot (so, more component settings in _.gui_ settings) (#51)
+	- 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):
+	- _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
+
+- Styles update:
+	- Styles table now can be empty, every component have their default style values
+	- Remove `component:get_style` function. Now you can only set styles
+	- To get style values in component, add `component:on_style_change` function. It's invoked on `component:set_style` function
+	- You can look up default values inside `component:on_style_change` function or style component API on [Druid API](https://insality.github.io/druid/index.html)
+
+- Druid update:
+	- Now function `druid:remove` remove instance and all instance children components. No more manual deleting child components (#41)
+
+- **Fix:** Blocker component bug (blocker had very high priority, so it's block even button components, created after blocker)
+- **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
+
+
+### Druid 0.5.0:
+
+Besides a lot of fixes (thanks for feedback!) two components was add: _StaticGrid_ and _DynamicGrid_ instead of usual _Grid_ component (it is deprecated now).
+Add _component:set_input_enabled_ for basic component class. So you can enable/disable user input for any component.
+Finaly implemented _on_layout_changed_ support. Druid components now will try keep their data between layout changing! You also can use this callback in your custom components.
+Also check _component.template.lua_ what you can use for your own custom components!
+
+- **#77** Grid update:
+	- The _grid_ component now is __deprecated__. Use _static_grid_ instead. Druid will show you deprecated message, if you still using _grid_ component
+	- __[BREAKING]__ Remove the _grid:set_offset_ grid functions. To adjust the distance between nodes inside grid - setup correct node sizes
+	- Add _static_grid_ component
+		- The behaviour like previous _grid_ component
+		- Have constant element size, so have ability to precalculate positions, indexes and size of content
+		- By default, not shifting elements on removing element. Add _is_shift_ flag to _static_grid:remove_ function
+		- This grid can spawn elements with several rows and columns
+	- Add _dynamic_grid_ component
+		- Can have different element size. So have no ability to precalculate stuff like _static_grid_
+		- This grid can't have gaps between elements. You will get the error, if spawn element far away from other elements
+		- The grid can spawn elements only in row or in column
+		- The grid node should have __West__, __East__, __South__ or __North__ pivot (vertical or horizontal element placement)
+		- Able to shift nodes left or right on _grid:add_ / _grid:remove_ functions
+- Scroll update:
+	- Add _scroll:set_vertical_scroll_ and _scroll:set_horizontal_scroll_ for disable scroll sides
+	- Add _scroll:bind_grid_ function. Now is possible to bind Druid Grid component (Static or Dynamic) to the scroll for auto refresh the scroll size on grid nodes changing
+- **#37** Add _on_layout_change_ support. Druid will keep and restore GUI component data between changing game layout. Override function _on_layout_change_ in your custom components to do stuff you need.
+- **#85** Move several components from `base` folder to `extended`. In future to use them, you have to register them manually. This is done for decrease build size by excluding unused components
+- **Fix #61:** Button component: fix button animation node creation
+- **Fix #64:** Hover component: wrong mouse_hover default state
+- **Fix #71:** Blocker: blocker now correct block mouse hover event
+- **Fix #72:** Fix `return nil` in some `on_input` functions
+- **Fix #74:** __[BREAKING]__ Fix typo: strech -> stretch. Scroll function `set_extra_stretch_size` renamed
+- **Fix #76:** Add params for lang text localization component
+- **Fix #79:** Fix _druid:remove_ inside on_input callback
+- **Fix #80:** Fix _hover:set_enable_ typo function call
+- **Fix #88:** Add _component:set_input_enabled_ function to enable/disable input for druid component. Now you can disable input of any druid component, even complex (with other components inside)
+- Add `component.template.lua` as template for Druid custom component
+- Update the example app
+

docs_md/faq.md

@@ -0,0 +1,67 @@
+
+# Druid FAQ
+
+>_Have questions about Druid? Ask me!_
+> _Here is questions you might have_
+
+### Q: Why I want use Druid?
+**A:** ---
+
+
+### Q: How to remove the Druid component instance?
+**A:** Any created **Druid** component can be removed with _druid:remove_. [API reference link](https://insality.github.io/druid/modules/druid_instance.html#druid:remove).
+
+
+### Q: How to make scroll work?
+**A:** ---
+
+
+### Q: How the input is processing?
+**A:**
+*SImply*: the **Druid** has a LIFO queue to check input. Last added buttons have more priority than first. Placing your buttons from behind to the front is correct in most cases.
+
+
+### Q: For what purpose Blocker component is exist?
+**A:** Component explanation [here](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#notes-2). 
+With Blocker you can block input in some zone. It is useful for make unclickable zone in buttons or kind of buttons panel on other big button (ex. close windows on window background click)
+
+
+### Q: Which stuff can I do with custom components?
+**A:** Any of you can imagine! There is a lot of examples, but in general: custom components allow you place component and some game logic separately from other stuff. It will be reusable, easier for testing and developing.
+
+For example it can be element in scroll with buttons, your custom GUI widget or even component with your game logic. Usually custom components going with templates. You can do several templates for single component module (for different visuals!)
+
+Some examples of custom components you can find [here](https://github.com/Insality/druid-assets).
+
+
+### Q: How *self:get_node()* is working?
+**A:** The node can be placed in gui directly or can be cloned via *gui.clone_tree()*. Also nodes can be placed as templates, so full node id will be composed from template name and node name (in cloned nodes too).
+
+**Druid** component *self:get_node()* trying to search in all of this places. Use *self:set_template()* and *self:set_component_nodes()* for correct setup component nodes before any call of *self:get_node()*.
+
+Remember, usually you should pass *__string name__ of the node*, not gui node itself. It's better and more druid-way. 
+
+
+### Q: My button in scroll is clickable outside the stencil node
+**A:** Since **Druid** checking click node with _gui.pick_node_, stencil is not prevent this. You can setup additional click zone on your buttons with _button:set_click_zone_.
+
+The usual Druid way after add button to the scroll do:
+```lua
+-- Scroll view node usually is stencil node
+button:set_click_zone(scroll.view_node)
+```
+
+
+### Q: How to use EmmyLua annotations? _(from Druid 0.6.0)_
+**A:** Since the dependencies can't be processed by external editors, for use generated EmmyLua annotations you should copy the _annotations.lua_ to your project. For EmmyLua it will be enough. Remember you can _restart emmylua server_ for refresh the changes, if something goes wrong.
+After the annotations is processed, you should point the type of druid in requires:
+```lua
+---@type druid
+local druid = require("druid.druid")
+
+-- Now the autocomplete is working
+```
+
+
+### Q: When I should use *on_layout_change*?
+**A:** ---

druid/base/back_handler.lua

@@ -13,14 +13,14 @@ local Event = require("druid.event")
 local const = require("druid.const")
 local component = require("druid.component")
 
-local M = component.create("back_handler", { const.ON_INPUT })
+local BackHandler = component.create("back_handler", { const.ON_INPUT })
 
 
 --- Component init function
 -- @function back_handler:init
 -- @tparam callback callback On back button
 -- @tparam[opt] params Callback argument
-function M.init(self, callback, params)
+function BackHandler:init(callback, params)
 	self.params = params
 
 	self.on_back = Event(callback)
@@ -31,8 +31,12 @@ end
 -- @function back_handler:on_input
 -- @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
+function BackHandler:on_input(action_id, action)
+	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 BackHandler

druid/base/blocker.lua

@@ -14,13 +14,13 @@ local Event = require("druid.event")
 local const = require("druid.const")
 local component = require("druid.component")
 
-local M = component.create("blocker", { const.ON_INPUT_HIGH })
+local Blocker = component.create("blocker", { const.ON_INPUT })
 
 
 --- Component init function
 -- @function blocker:init
 -- @tparam node node Gui node
-function M.init(self, node)
+function Blocker:init(node)
 	self.node = self:get_node(node)
 
 	self.on_click = Event()
@@ -28,8 +28,10 @@ function M.init(self, node)
 end
 
 
-function M.on_input(self, action_id, action)
-	if action_id ~= const.ACTION_TOUCH then
+function Blocker:on_input(action_id, action)
+	if action_id ~= const.ACTION_TOUCH and
+		action_id ~= const.ACTION_MULTITOUCH and
+		action_id ~= nil then
 		return false
 	end
 
@@ -48,7 +50,7 @@ end
 --- Set enabled blocker component state
 -- @function blocker:set_enabled
 -- @tparam bool state Enabled state
-function M.set_enabled(self, state)
+function Blocker:set_enabled(state)
 	gui.set_enabled(self.node, state)
 end
 
@@ -56,9 +58,9 @@ end
 --- Return blocked enabled state
 -- @function blocker:is_enabled
 -- @treturn bool True, if blocker is enabled
-function M.is_enabled(self, state)
+function Blocker:is_enabled(state)
 	return gui.is_enabled(self.node)
 end
 
 
-return M
+return Blocker

druid/base/button.lua

@@ -3,35 +3,30 @@
 
 --- Component events
 -- @table Events
--- @tfield druid_event on_click On release button callback
--- @tfield druid_event on_repeated_click On repeated action button callback
--- @tfield druid_event on_long_click On long tap button callback
--- @tfield druid_event on_double_click On double tap button callback
+-- @tfield druid_event on_click (self, params, button_instance) On release button callback
+-- @tfield druid_event on_repeated_click (self, params, button_instance, click_amount) On repeated action button callback
+-- @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 scale_from Initial scale of anim_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
 -- @tfield[opt] node click_zone Restriction zone
 
---- Component style params
--- @table Style
--- @tfield function on_click (self, node)
--- @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")
 local helper = require("druid.helper")
 local component = require("druid.component")
 
-local M = component.create("button", { const.ON_INPUT })
+local Button = component.create("button", { const.ON_INPUT })
 
 
 local function is_input_match(self, action_id)
@@ -48,18 +43,18 @@ end
 
 
 local function on_button_hover(self, hover_state)
-	if not self._style.on_hover then
-		return
-	end
+	self.style.on_hover(self, self.anim_node, hover_state)
+end
 
-	self._style.on_hover(self, self.anim_node, hover_state)
+
+local function on_button_mouse_hover(self, hover_state)
+	self.style.on_mouse_hover(self, self.anim_node, hover_state)
 end
 
 
 local function on_button_click(self)
-	if self._style.on_click then
-		self._style.on_click(self, self.anim_node)
-	end
+	self.style.on_click(self, self.anim_node)
+
 	self.click_in_row = 1
 	self.on_click:trigger(self:get_context(), self.params, self)
 end
@@ -71,18 +66,16 @@ local function on_button_repeated_click(self)
 		self.is_repeated_started = true
 	end
 
-	if self._style.on_click then
-		self._style.on_click(self, self.anim_node)
-	end
+	self.style.on_click(self, self.anim_node)
+
 	self.click_in_row = self.click_in_row + 1
 	self.on_repeated_click:trigger(self:get_context(), self.params, self, self.click_in_row)
 end
 
 
 local function on_button_long_click(self)
-	if self._style.on_click then
-		self._style.on_click(self, self.anim_node)
-	end
+	self.style.on_click(self, self.anim_node)
+
 	self.click_in_row = 1
 	local time = socket.gettime() - self.last_pressed_time
 	self.on_long_click:trigger(self:get_context(), self.params, self, time)
@@ -90,9 +83,8 @@ end
 
 
 local function on_button_double_click(self)
-	if self._style.on_click then
-		self._style.on_click(self, self.anim_node)
-	end
+	self.style.on_click(self, self.anim_node)
+
 	self.click_in_row = self.click_in_row + 1
 	self.on_double_click:trigger(self:get_context(), self.params, self, self.click_in_row)
 end
@@ -113,10 +105,10 @@ local function on_button_release(self)
 			self.can_action = false
 
 			local time = socket.gettime()
-			local is_long_click = (time - self.last_pressed_time) > self._style.LONGTAP_TIME
+			local is_long_click = (time - self.last_pressed_time) > self.style.LONGTAP_TIME
 			is_long_click = is_long_click and self.on_long_click:is_exist()
 
-			local is_double_click = (time - self.last_released_time) < self._style.DOUBLETAP_TIME
+			local is_double_click = (time - self.last_released_time) < self.style.DOUBLETAP_TIME
 			is_double_click = is_double_click and self.on_double_click:is_exist()
 
 			if is_long_click then
@@ -131,30 +123,54 @@ local function on_button_release(self)
 		end
 		return true
 	else
-		if self._style.on_click_disabled then
-			self._style.on_click_disabled(self, self.anim_node)
-		end
+		self.style.on_click_disabled(self, self.anim_node)
 		return false
 	end
 end
 
 
+--- Component style params.
+-- You can override this component styles params in druid styles table
+-- or create your own style
+-- @table Style
+-- @tfield[opt=0.4] number LONGTAP_TIME Minimum time to trigger on_hold_callback
+-- @tfield[opt=0.8] number AUTOHOLD_TRIGGER Maximum hold time to trigger button release while holding
+-- @tfield[opt=0.4] number DOUBLETAP_TIME Time between double taps
+-- @tfield function on_click (self, node)
+-- @tfield function on_click_disabled (self, node)
+-- @tfield function on_hover (self, node, hover_state)
+-- @tfield function on_mouse_hover (self, node, hover_state)
+-- @tfield function on_set_enabled (self, node, enabled_state)
+function Button:on_style_change(style)
+	self.style = {}
+	self.style.LONGTAP_TIME = style.LONGTAP_TIME or 0.4
+	self.style.AUTOHOLD_TRIGGER = style.AUTOHOLD_TRIGGER or 0.8
+	self.style.DOUBLETAP_TIME = style.DOUBLETAP_TIME or 0.4
+
+	self.style.on_click = style.on_click or function(_, node) end
+	self.style.on_click_disabled = style.on_click_disabled or function(_, node) end
+	self.style.on_mouse_hover = style.on_mouse_hover or function(_, node, state) end
+	self.style.on_hover = style.on_hover or function(_, node, state) end
+	self.style.on_set_enabled = style.on_set_enabled or function(_, node, state) end
+end
+
+
 --- Component init function
 -- @function button:init
 -- @tparam node node Gui node
 -- @tparam function callback Button callback
 -- @tparam[opt] table params Button callback params
 -- @tparam[opt] node anim_node Button anim node (node, if not provided)
--- @tparam[opt] string event Button react event, const.ACTION_TOUCH by default
-function M.init(self, node, callback, params, anim_node, event)
+function Button:init(node, callback, params, anim_node)
 	self.druid = self:get_druid()
 	self.node = self:get_node(node)
 
-	self.anim_node = anim_node and helper:get_node(anim_node) or self.node
-	-- TODO: rename to start_scale
-	self.scale_from = gui.get_scale(self.anim_node)
+	self.anim_node = anim_node and self: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.hover.on_mouse_hover:subscribe(on_button_mouse_hover)
 	self.click_zone = nil
 	self.is_repeated_started = false
 	self.last_pressed_time = 0
@@ -168,10 +184,11 @@ function M.init(self, node, callback, params, anim_node, event)
 	self.on_long_click = Event()
 	self.on_double_click = Event()
 	self.on_hold_callback = Event()
+	self.on_click_outside = Event()
 end
 
 
-function M.on_input(self, action_id, action)
+function Button:on_input(action_id, action)
 	if not is_input_match(self, action_id) then
 		return false
 	end
@@ -192,6 +209,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
 
@@ -222,12 +242,12 @@ function M.on_input(self, action_id, action)
 	if not self.disabled and self.can_action and self.on_long_click:is_exist() then
 		local press_time = socket.gettime() - self.last_pressed_time
 
-		if self._style.AUTOHOLD_TRIGGER and self._style.AUTOHOLD_TRIGGER <= press_time then
+		if self.style.AUTOHOLD_TRIGGER <= press_time then
 			on_button_release(self)
 			return true
 		end
 
-		if press_time >= self._style.LONGTAP_TIME then
+		if press_time >= self.style.LONGTAP_TIME then
 			on_button_hold(self, press_time)
 			return true
 		end
@@ -237,7 +257,7 @@ function M.on_input(self, action_id, action)
 end
 
 
-function M.on_input_interrupt(self)
+function Button:on_input_interrupt()
 	self.can_action = false
 end
 
@@ -245,18 +265,20 @@ end
 --- Set enabled button component state
 -- @function button:set_enabled
 -- @tparam bool state Enabled state
-function M.set_enabled(self, state)
+-- @treturn druid.button Current button instance
+function Button:set_enabled(state)
 	self.disabled = not state
-	if self._style.on_set_enabled then
-		self._style.on_set_enabled(self, self.node, state)
-	end
+	self.hover:set_enabled(state)
+	self.style.on_set_enabled(self, self.node, state)
+
+	return self
 end
 
 
 --- Return button enabled state
 -- @function button:is_enabled
 -- @treturn bool True, if button is enabled
-function M.is_enabled(self)
+function Button:is_enabled()
 	return not self.disabled
 end
 
@@ -265,26 +287,32 @@ end
 -- no click events outside stencil node
 -- @function button:set_click_zone
 -- @tparam node zone Gui node
-function M.set_click_zone(self, zone)
+-- @treturn druid.button Current button instance
+function Button:set_click_zone(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
-function M.set_key_trigger(self, key)
+-- @treturn druid.button Current button instance
+function Button:set_key_trigger(key)
 	self.key_trigger = hash(key)
+
+	return self
 end
 
 
 --- Get key-code to trigger this button
 -- @function button:get_key_trigger
 -- @treturn hash The action_id of the key
-function M.get_key_trigger(self)
+function Button:get_key_trigger()
 	return self.key_trigger
 end
 
 
-return M
+return Button

druid/base/drag.lua

@@ -0,0 +1,251 @@
+--- Component to handle drag action on node.
+-- Drag have correct handling for multitouch and swap
+-- touched while dragging. Drag will be processed even
+-- the cursor is outside of node, if drag is already started
+-- @module druid.drag
+
+--- Component events
+-- @table Events
+-- @tfield druid_event on_touch_start (self) Event on touch start
+-- @tfield druid_event on_touch_end (self) Event on touch end
+-- @tfield druid_event on_drag_start (self) Event on drag start
+-- @tfield druid_event on_drag (self, dx, dy) Event on drag progress
+-- @tfield druid_event on_drag_end (self) Event on drag end
+
+--- Components fields
+-- @table Fields
+-- @tfield bool is_touch Is component now touching
+-- @tfield bool is_drag Is component now dragging
+-- @tfield bool can_x Is drag component process vertical dragging. Default - true
+-- @tfield bool can_y Is drag component process horizontal. Default - true
+-- @tfield number x Current touch x position
+-- @tfield number y Current touch y position
+-- @tfield vector3 touch_start_pos Touch start position
+
+local Event = require("druid.event")
+local const = require("druid.const")
+local helper = require("druid.helper")
+local component = require("druid.component")
+
+local Drag = component.create("drag", { const.ON_INPUT_HIGH })
+
+
+local function start_touch(self, touch)
+	self.is_touch = true
+	self.is_drag = false
+
+	self.touch_start_pos.x = touch.x
+	self.touch_start_pos.y = touch.y
+
+	self.x = touch.x
+	self.y = touch.y
+
+	self.on_touch_start:trigger(self:get_context())
+end
+
+
+local function end_touch(self)
+	if self.is_drag then
+		self.on_drag_end:trigger(self:get_context())
+	end
+
+	self.is_drag = false
+	self.is_touch = false
+	self.on_touch_end:trigger(self:get_context())
+	self:reset_input_priority()
+	self.touch_id = 0
+end
+
+
+local function process_touch(self, touch)
+	if not self.can_x then
+		self.touch_start_pos.x = touch.x
+	end
+
+	if not self.can_y then
+		self.touch_start_pos.y = touch.y
+	end
+
+	local distance = helper.distance(touch.x, touch.y, self.touch_start_pos.x, self.touch_start_pos.y)
+	if not self.is_drag and distance >= self.style.DRAG_DEADZONE then
+		self.is_drag = true
+		self.on_drag_start:trigger(self:get_context())
+		self:increase_input_priority()
+	end
+end
+
+
+--- Return current touch action from action input data
+-- If touch_id stored - return exact this touch action
+local function find_touch(action_id, action, touch_id)
+	local act = helper.is_mobile() and const.ACTION_MULTITOUCH or const.ACTION_TOUCH
+
+	if action_id ~= act then
+		return
+	end
+
+	if action.touch then
+		local touch = action.touch
+		for i = 1, #touch do
+			if touch[i].id == touch_id then
+				return touch[i]
+			end
+		end
+		return touch[1]
+	else
+		return action
+	end
+end
+
+
+--- Process on touch release. We should to find, if any other
+-- touches exists to switch to another touch.
+local function on_touch_release(self, action_id, action)
+	if #action.touch >= 2 then
+		-- Find next unpressed touch
+		local next_touch
+		for i = 1, #action.touch do
+			if not action.touch[i].released then
+				next_touch = action.touch[i]
+				break
+			end
+		end
+
+		if next_touch then
+			self.x = next_touch.x
+			self.y = next_touch.y
+			self.touch_id = next_touch.id
+		else
+			end_touch(self)
+		end
+	elseif #action.touch == 1 then
+		end_touch(self)
+	end
+end
+
+
+--- Component style params.
+-- You can override this component styles params in druid styles table
+-- or create your own style
+-- @table Style
+-- @tfield[opt=10] number DRAG_DEADZONE Distance in pixels to start dragging
+function Drag:on_style_change(style)
+	self.style = {}
+	self.style.DRAG_DEADZONE = style.DRAG_DEADZONE or 10
+end
+
+
+--- Drag component constructor
+-- @tparam node node GUI node to detect dragging
+-- @tparam function on_drag_callback Callback for on_drag_event(self, dx, dy)
+-- @function drag:init
+function Drag:init(node, on_drag_callback)
+	self.node = self:get_node(node)
+
+	self.dx = 0
+	self.dy = 0
+	self.touch_id = 0
+	self.x = 0
+	self.y = 0
+	self.is_touch = false
+	self.is_drag = false
+	self.touch_start_pos = vmath.vector3(0)
+
+	self.can_x = true
+	self.can_y = true
+
+	self.click_zone = nil
+	self.on_touch_start = Event()
+	self.on_touch_end = Event()
+	self.on_drag_start = Event()
+	self.on_drag = Event(on_drag_callback)
+	self.on_drag_end = Event()
+end
+
+
+function Drag:on_input_interrupt()
+	if self.is_drag or self.is_touch then
+		end_touch(self)
+	end
+end
+
+
+function Drag:on_input(action_id, action)
+	if action_id ~= const.ACTION_TOUCH and action_id ~= const.ACTION_MULTITOUCH then
+		return false
+	end
+
+	if not helper.is_enabled(self.node) then
+		return false
+	end
+
+	local is_pick = gui.pick_node(self.node, action.x, action.y)
+	if self.click_zone then
+		is_pick = is_pick and gui.pick_node(self.click_zone, action.x, action.y)
+	end
+
+	if not is_pick and not self.is_drag then
+		end_touch(self)
+		return false
+	end
+
+
+	local touch = find_touch(action_id, action, self.touch_id)
+	if not touch then
+		return false
+	end
+
+	if touch.id then
+		self.touch_id = touch.id
+	end
+
+	self.dx = 0
+	self.dy = 0
+
+	if touch.pressed and not self.is_touch then
+		start_touch(self, touch)
+	end
+
+	if touch.released and self.is_touch then
+		if action.touch then
+			-- Mobile
+			on_touch_release(self, action_id, action)
+		else
+			-- PC
+			end_touch(self)
+		end
+	end
+
+	if self.is_touch then
+		process_touch(self, touch)
+	end
+
+	local touch_modified = find_touch(action_id, action, self.touch_id)
+	if touch_modified and self.is_drag then
+		self.dx = touch_modified.x - self.x
+		self.dy = touch_modified.y - self.y
+	end
+
+	if touch_modified then
+		self.x = touch_modified.x
+		self.y = touch_modified.y
+	end
+
+	if self.is_drag then
+		self.on_drag:trigger(self:get_context(), self.dx, self.dy)
+	end
+
+	return self.is_drag
+end
+
+
+--- Strict drag click area. Useful for
+-- restrict events outside stencil node
+-- @function drag:set_click_zone
+-- @tparam node zone Gui node
+function Drag:set_click_zone(zone)
+	self.click_zone = self:get_node(zone)
+end
+
+
+return Drag

druid/base/grid.lua

@@ -1,166 +0,0 @@
---- Component to handle placing components by row and columns.
--- Grid can anchor your elements, get content size and other
--- @module druid.grid
-
---- Component events
--- @table Events
--- @tfield druid_event on_add_item On item add callback
--- @tfield druid_event on_remove_item On item remove callback
--- @tfield druid_event on_clear On grid clear callback
--- @tfield druid_event on_update_positions On update item positions callback
-
---- Component fields
--- @table Fields
--- @tfield node parent Parent gui node
--- @tfield node[] nodes List of all grid nodes
--- @tfield vector3 offset Item distance between each other items
--- @tfield vector3 anchor Item anchor
--- @tfield vector3 node_size Item size
--- @tfield vector4 border The size of item content
--- @tfield vector3 border_offer The border offset for correct anchor calculations
-
-local Event = require("druid.event")
-local component = require("druid.component")
-
-local M = component.create("grid")
-
-
---- Component init function
--- @function grid:init
--- @tparam node parent The gui node parent, where items will be placed
--- @tparam node element Element prefab. Need to get it size
--- @tparam[opt=1] number in_row How many nodes in row can be placed
-function M.init(self, parent, element, in_row)
-	self.parent = self:get_node(parent)
-	self.nodes = {}
-
-	self.offset = vmath.vector3(0)
-	self.anchor = vmath.vector3(0.5, 0, 0)
-	self.in_row = in_row or 1
-	self.node_size = gui.get_size(self:get_node(element))
-	self.border = vmath.vector4(0)
-	self.border_offset = vmath.vector3(0)
-
-	self.on_add_item = Event()
-	self.on_remove_item = Event()
-	self.on_clear = Event()
-	self.on_update_positions = Event()
-end
-
-
-local function check_border(self, pos)
-	local border = self.border
-	local size = self.node_size
-
-	local W = pos.x - size.x/2 + self.border_offset.x
-	local E = pos.x + size.x/2 + self.border_offset.x
-	local N = pos.y + size.y/2 + self.border_offset.y
-	local S = pos.y - size.y/2 + self.border_offset.y
-
-	border.x = math.min(border.x, W)
-	border.y = math.max(border.y, N)
-	border.z = math.max(border.z, E)
-	border.w = math.min(border.w, S)
-
-	self.border_offset = vmath.vector3(
-		(border.x + (border.z - border.x) * self.anchor.x),
-		(border.y + (border.w - border.y) * self.anchor.y),
-		0
-	)
-end
-
-
-local temp_pos = vmath.vector3(0)
-local function get_pos(self, index)
-	local row = math.ceil(index / self.in_row) - 1
-	local col = (index - row * self.in_row) - 1
-
-	temp_pos.x = col * (self.node_size.x + self.offset.x) - self.border_offset.x
-	temp_pos.y = -row * (self.node_size.y + self.offset.y) - self.border_offset.y
-	temp_pos.z = 0
-
-	return temp_pos
-end
-
-
-local function update_pos(self)
-	for i = 1, #self.nodes do
-		local node = self.nodes[i]
-		gui.set_position(node, get_pos(self, i))
-	end
-
-	self.on_update_positions:trigger(self:get_context())
-end
-
-
-
---- Set grid items offset, the distance between items
--- @function grid:set_offset
--- @tparam vector3 offset Offset
-function M.set_offset(self, offset)
-	self.offset = offset
-	update_pos(self)
-end
-
-
---- Set grid anchor
--- @function grid:set_anchor
--- @tparam vector3 acnhor Anchor
-function M.set_anchor(self, anchor)
-	self.anchor = anchor
-	update_pos(self)
-end
-
-
---- Add new item to the grid
--- @function grid:add
---	@tparam node item Gui node
--- @tparam[opt] number index The item position. By default add as last item
-function M.add(self, item, index)
-	index = index or (#self.nodes + 1)
-	table.insert(self.nodes, index, item)
-	gui.set_parent(item, self.parent)
-
-	local pos = get_pos(self, index)
-	check_border(self, pos)
-	update_pos(self)
-
-	self.on_add_item:trigger(self:get_context(), item, index)
-end
-
-
---- Return grid content size
--- @function grid:get_size
--- @treturn vector3 The grid content size
-function M.get_size(self)
-	return vmath.vector3(
-		self.border.z - self.border.x,
-		self.border.y - self.border.w,
-		0)
-end
-
-
---- Return array of all node positions
--- @function grid:get_all_pos
--- @treturn vector3[] All grid node positions
-function M.get_all_pos(self)
-	local result = {}
-	for i = 1, #self.nodes do
-		table.insert(result,	gui.get_position(self.nodes[i]))
-	end
-
-	return result
-end
-
-
---- Clear all items from the grid
--- @function grid:clear
-function M.clear(self)
-	for i = 1, #self.nodes do
-		gui.delete_node(self.nodes[i])
-	end
-	self.nodes = {}
-end
-
-
-return M

druid/base/hover.lua

@@ -3,36 +3,44 @@
 
 --- Component events
 -- @table Events
--- @tfield druid_event on_hover On hover callback
+-- @tfield druid_event on_hover On hover callback (Touch pressed)
+-- @tfield druid_event on_mouse_hover On mouse hover callback (Touch over without action_id)
 
 local Event = require("druid.event")
 local const = require("druid.const")
 local helper = require("druid.helper")
 local component = require("druid.component")
 
-local M = component.create("hover", { const.ON_INPUT })
+local Hover = component.create("hover", { const.ON_INPUT })
 
 
 --- Component init function
 -- @function hover:init
 -- @tparam node node Gui node
 -- @tparam function on_hover_callback Hover callback
-function M.init(self, node, on_hover_callback)
-	self.style = self:get_style()
+function Hover:init(node, on_hover_callback)
 	self.node = self:get_node(node)
 
 	self._is_hovered = false
+	self._is_mouse_hovered = false
+
+	self._is_enabled = true
 
 	self.on_hover = Event(on_hover_callback)
+	self.on_mouse_hover = Event()
 end
 
 
-function M.on_input(self, action_id, action)
-	if action_id ~= const.ACTION_TOUCH then
-		return
+function Hover:on_input(action_id, action)
+	if action_id ~= const.ACTION_TOUCH and action_id ~= nil then
+		return false
 	end
 
-	if not helper.is_enabled(self.node) then
+	if not action_id and helper.is_mobile() then
+		return false
+	end
+
+	if not helper.is_enabled(self.node) or not self._is_enabled then
 		return false
 	end
 
@@ -41,42 +49,81 @@ function M.on_input(self, action_id, action)
 		is_pick = is_pick and gui.pick_node(self.click_zone, action.x, action.y)
 	end
 
+	local hover_function = action_id and self.set_hover or self.set_mouse_hover
+
 	if not is_pick then
-		M.set_hover(self, false)
+		hover_function(self, false)
 		return false
 	end
 
 	if action.released then
-		M.set_hover(self, false)
+		hover_function(self, false)
 	else
-		M.set_hover(self, true)
+		hover_function(self, true)
 	end
 end
 
 
-function M.on_input_interrupt(self)
-	M.set_hover(self, false)
+function Hover:on_input_interrupt()
+	self:set_hover(false)
 end
 
 
 --- Set hover state
 -- @function hover:set_hover
 -- @tparam bool state The hover state
-function M.set_hover(self, state)
+function Hover:set_hover(state)
 	if self._is_hovered ~= state then
 		self._is_hovered = state
 		self.on_hover:trigger(self:get_context(), state)
 	end
 end
 
+--- Set mouse hover state
+-- @function hover:set_mouse_hover
+-- @tparam bool state The mouse hover state
+function Hover:set_mouse_hover(state)
+	if self._is_mouse_hovered ~= state then
+		self._is_mouse_hovered = state
+		self.on_mouse_hover:trigger(self:get_context(), state)
+	end
+end
 
---- Strict button click area. Useful for
+
+--- Strict hover click area. Useful for
 -- no click events outside stencil node
 -- @function hover:set_click_zone
 -- @tparam node zone Gui node
-function M.set_click_zone(self, zone)
+function Hover:set_click_zone(zone)
 	self.click_zone = self:get_node(zone)
 end
 
 
-return M
+--- Set enable state of hover component.
+-- If hover is not enabled, it will not generate
+-- any hover events
+-- @function hover:set_enabled
+-- @tparam bool state The hover enabled state
+function Hover:set_enabled(state)
+	self._is_enabled = state
+
+	if not state then
+		if self._is_hovered then
+			self:set_hover(false)
+		end
+		if self._is_mouse_hovered then
+			self:set_mouse_hover(false)
+		end
+	end
+end
+
+
+--- Return current hover enabled state
+-- @function hover:is_enabled
+-- @treturn bool The hover enabled state
+function Hover:is_enabled()
+	return self._is_enabled
+end
+
+
+return Hover

druid/base/input.lua

@@ -1,16 +0,0 @@
---- Druid input text component.
--- Carry on user text input
--- UNIMPLEMENTED
--- @module druid.input
-
-local component = require("druid.component")
-
-local M = component.create("input")
-
-
-function M.init(self, node, callback, click_node)
-	self.style = self:get_style()
-end
-
-
-return M

druid/base/scroll.lua

@@ -11,137 +11,438 @@
 -- @table Events
 -- @tfield druid_event on_scroll On scroll move callback
 -- @tfield druid_event on_scroll_to On scroll_to function callback
--- @tfield druid_event on_point_scroll On scroll_to_index function callbck
+-- @tfield druid_event on_point_scroll On scroll_to_index function callback
 
 --- Component fields
 -- @table Fields
--- @tfield node node Scroll parent node
--- @tfield node input_zone Scroll input node
--- @tfield vector3 zone_size Current scroll content size
--- @tfield number soft_size Soft zone size from style table
--- @tfield vector3 center_offset Distance from node to node's center
+-- @tfield node view_node Scroll view node
+-- @tfield node content_node Scroll content node
 -- @tfield bool is_inert Flag, if scroll now moving by inertion
--- @tfield vector3 inert Current inert speed
--- @tfield vector3 pos Current scroll posisition
--- @tfield vector3 target Current scroll target position
-
---- Component style params
--- @table Style
--- @tfield number FRICT_HOLD Multiplier for inertion, while touching
--- @tfield number FRICT Multiplier for free inertion
--- @tfield number INERT_THRESHOLD Scroll speed to stop inertion
--- @tfield number INERT_SPEED Multiplier for inertion speed
--- @tfield number DEADZONE Deadzone for start scrol in pixels
--- @tfield number SOFT_ZONE_SIZE Size of outside zone in pixels (for scroll back moving)
--- @tfield number BACK_SPEED Scroll back returning lerp speed
--- @tfield number ANIM_SPEED Scroll gui.animation speed for scroll_to function
+-- @tfield vector3 inertion Current inert speed
+-- @tfield vector3 position Current scroll posisition
+-- @tfield vector3 target_position Current scroll target position
+-- @tfield vector4 available_pos Available position for content node: (min_x, max_y, max_x, min_y)
+-- @tfield vector3 available_size Size of available positions: (width, height, 0)
+-- @tfield druid.drag drag Drag component
+-- @tfield[opt] selected Current index of points of interests
+-- @tfield bool is_animate Flag, if scroll now animating by gui.animate
 
 local Event = require("druid.event")
-local helper = require("druid.helper")
 local const = require("druid.const")
+local helper = require("druid.helper")
 local component = require("druid.component")
 
-local M = component.create("scroll", { const.ON_UPDATE, const.ON_INPUT_HIGH })
+local Scroll = component.create("scroll", { const.ON_UPDATE, const.ON_LAYOUT_CHANGE })
 
 
--- Global on all scrolls
--- TODO: remove it
-M.current_scroll = nil
+local function inverse_lerp(min, max, current)
+	return helper.clamp((current - min) / (max - min), 0, 1)
+end
 
 
-local function get_border(node)
-	local pivot = gui.get_pivot(node)
-	local pivot_offset = helper.get_pivot_offset(pivot)
-	local size = vmath.mul_per_elem(gui.get_size(node), gui.get_scale(node))
-	return vmath.vector4(
-		-size.x*(0.5 + pivot_offset.x),
-		size.y*(0.5 + pivot_offset.y),
-		size.x*(0.5 - pivot_offset.x),
-		-size.y*(0.5 - pivot_offset.y)
+--- Update vector with next conditions:
+-- Field x have to <= field z
+-- Field y have to <= field w
+local function get_border_vector(vector)
+	if vector.x > vector.z then
+		vector.x, vector.z = vector.z, vector.x
+	end
+	if vector.y > vector.w then
+		vector.y, vector.w = vector.w, vector.y
+	end
+
+	return vector
+end
+
+
+--- Return size from scroll border vector4
+local function get_size_vector(vector)
+	return vmath.vector3(vector.z - vector.x, vector.w - vector.y, 0)
+end
+
+
+--- Component style params.
+-- You can override this component styles params in druid styles table
+-- or create your own style
+-- @table Style
+-- @tfield[opt=0] number FRICT Multiplier for free inertion
+-- @tfield[opt=0] number FRICT_HOLD Multiplier for inertion, while touching
+-- @tfield[opt=3] number INERT_THRESHOLD Scroll speed to stop inertion
+-- @tfield[opt=30] number INERT_SPEED Multiplier for inertion speed
+-- @tfield[opt=20] number POINTS_DEADZONE Speed to check points of interests in no_inertion mode
+-- @tfield[opt=0.35] number BACK_SPEED Scroll back returning lerp speed
+-- @tfield[opt=0.2] number ANIM_SPEED Scroll gui.animation speed for scroll_to function
+-- @tfield[opt=0] number EXTRA_STRETCH_SIZE extra size in pixels outside of scroll (stretch effect)
+-- @tfield[opt=false] bool SMALL_CONTENT_SCROLL If true, content node with size less than view node size can be scrolled
+function Scroll:on_style_change(style)
+	self.style = {}
+	self.style.EXTRA_STRETCH_SIZE = style.EXTRA_STRETCH_SIZE or 0
+	self.style.ANIM_SPEED = style.ANIM_SPEED or 0.2
+	self.style.BACK_SPEED = style.BACK_SPEED or 0.35
+
+	self.style.FRICT = style.FRICT or 0
+	self.style.FRICT_HOLD = style.FRICT_HOLD or 0
+
+	self.style.INERT_THRESHOLD = style.INERT_THRESHOLD or 3
+	self.style.INERT_SPEED = style.INERT_SPEED or 30
+	self.style.POINTS_DEADZONE = style.POINTS_DEADZONE or 20
+	self.style.SMALL_CONTENT_SCROLL = style.SMALL_CONTENT_SCROLL or false
+
+	self._is_inert = not (self.style.FRICT == 0 or
+		self.style.FRICT_HOLD == 0 or
+		self.style.INERT_SPEED == 0)
+end
+
+
+--- Scroll constructor.
+-- @function scroll:init
+-- @tparam node view_node GUI view scroll node
+-- @tparam node content_node GUI content scroll node
+function Scroll:init(view_node, content_node)
+	self.druid = self:get_druid()
+
+	self.view_node = self:get_node(view_node)
+	self.content_node = self:get_node(content_node)
+
+	self.position = gui.get_position(self.content_node)
+	self.target_position = vmath.vector3(self.position)
+	self.inertion = vmath.vector3(0)
+
+	self.drag = self.druid:new_drag(view_node, self._on_scroll_drag)
+	self.drag.on_touch_start:subscribe(self._on_touch_start)
+	self.drag.on_touch_end:subscribe(self._on_touch_end)
+
+	self.on_scroll = Event()
+	self.on_scroll_to = Event()
+	self.on_point_scroll = Event()
+
+	self.selected = nil
+	self.is_animate = false
+
+	self._is_horizontal_scroll = true
+	self._is_vertical_scroll = true
+	self._grid_on_change = nil
+	self._grid_on_change_callback = nil
+
+	self:_update_size()
+end
+
+
+function Scroll:on_layout_change()
+	gui.set_position(self.content_node, self.position)
+end
+
+
+function Scroll:update(dt)
+	if self.drag.is_drag then
+		self:_update_hand_scroll(dt)
+	else
+		self:_update_free_scroll(dt)
+	end
+end
+
+
+function Scroll:on_remove()
+	self:bind_grid(nil)
+end
+
+
+--- Start scroll to target point.
+-- @function scroll:scroll_to
+-- @tparam point vector3 Target point
+-- @tparam[opt] bool is_instant Instant scroll flag
+-- @usage scroll:scroll_to(vmath.vector3(0, 50, 0))
+-- @usage scroll:scroll_to(vmath.vector3(0), true)
+function Scroll:scroll_to(point, is_instant)
+	local b = self.available_pos
+	local target = vmath.vector3(-point.x, -point.y, 0)
+	target.x = helper.clamp(target.x, b.x, b.z)
+	target.y = helper.clamp(target.y, b.y, b.w)
+
+	self:_cancel_animate()
+
+	self.is_animate = not is_instant
+
+	if is_instant then
+		self.target_position = target
+		self:_set_scroll_position(target)
+	else
+		gui.animate(self.content_node, gui.PROP_POSITION, target, gui.EASING_OUTSINE, self.style.ANIM_SPEED, 0, function()
+			self.is_animate = false
+			self.target_position = target
+			self:_set_scroll_position(target)
+		end)
+	end
+
+	self.on_scroll_to:trigger(self:get_context(), target, is_instant)
+end
+
+
+--- Scroll to item in scroll by point index.
+-- @function scroll:scroll_to_index
+-- @tparam number index Point index
+-- @tparam[opt] bool skip_cb If true, skip the point callback
+function Scroll:scroll_to_index(index, skip_cb)
+	if not self.points then
+		return
+	end
+
+	index = helper.clamp(index, 1, #self.points)
+
+	if self.selected ~= index then
+		self.selected = index
+
+		if not skip_cb then
+			self.on_point_scroll:trigger(self:get_context(), index, self.points[index])
+		end
+	end
+
+	self:scroll_to(self.points[index])
+end
+
+
+--- Start scroll to target scroll percent
+-- @function scroll:scroll_to_percent
+-- @tparam point vector3 target percent
+-- @tparam[opt] bool is_instant instant scroll flag
+-- @usage scroll:scroll_to_percent(vmath.vector3(0.5, 0, 0))
+function Scroll:scroll_to_percent(percent, is_instant)
+	local border = self.available_pos
+
+	local pos = vmath.vector3(
+		-helper.lerp(border.x, border.z, 1 - percent.x),
+		-helper.lerp(border.w, border.y, 1 - percent.y),
+		0
 	)
+
+	self:scroll_to(pos, is_instant)
 end
 
 
-local function update_border(self)
-	local input_border = get_border(self.input_zone)
-	local content_border = get_border(self.node)
+--- Return current scroll progress status.
+-- Values will be in [0..1] interval
+-- @function scroll:get_percent
+-- @treturn vector3 New vector with scroll progress values
+function Scroll:get_percent()
+	local x_perc = 1 - inverse_lerp(self.available_pos.x, self.available_pos.z, self.position.x)
+	local y_perc = inverse_lerp(self.available_pos.w, self.available_pos.y, self.position.y)
 
-	-- border.x - min content.x node pos
-	-- border.y - min content.y node pos
-	-- border.z - max content.x node pos
-	-- border.w - max content.y node pos
-	self.border = vmath.vector4(
-		input_border.x - content_border.x,
-		-input_border.w + content_border.w,
-		input_border.z - content_border.z,
-		-input_border.y + content_border.y
-	)
-	self.can_x = (self.border.x ~= self.border.z)
-	self.can_y = (self.border.y ~= self.border.w)
+	return vmath.vector3(x_perc, y_perc, 0)
+end
+
+
+--- Set scroll content size.
+-- It will change content gui node size
+-- @function scroll:set_size
+-- @tparam vector3 size The new size for content node
+-- @treturn druid.scroll Current scroll instance
+function Scroll:set_size(size)
+	gui.set_size(self.content_node, size)
+	self:_update_size()
+
+	return self
+end
+
+
+--- Enable or disable scroll inert.
+-- If disabled, scroll through points (if exist)
+-- If no points, just simple drag without inertion
+-- @function scroll:set_inert
+-- @tparam bool state Inert scroll state
+-- @treturn druid.scroll Current scroll instance
+function Scroll:set_inert(state)
+	self._is_inert = state
+
+	return self
+end
+
+
+--- Return if scroll have inertion.
+-- @function scroll:is_inert
+-- @treturn bool If scroll have inertion
+function Scroll:is_inert()
+	return self._is_inert
+end
+
+
+--- Set extra size for scroll stretching.
+-- Set 0 to disable stretching effect
+-- @function scroll:set_extra_stretch_size
+-- @tparam[opt=0] number stretch_size Size in pixels of additional scroll area
+-- @treturn druid.scroll Current scroll instance
+function Scroll:set_extra_stretch_size(stretch_size)
+	self.style.EXTRA_STRETCH_SIZE = stretch_size or 0
+	self:_update_size()
+
+	return self
+end
+
+
+--- Return vector of scroll size with width and height.
+-- @function scroll:get_scroll_size
+-- @treturn vector3 Available scroll size
+function Scroll:get_scroll_size()
+	return self.available_size
+end
+
+
+--- Set points of interest.
+-- Scroll will always centered on closer points
+-- @function scroll:set_points
+-- @tparam table points Array of vector3 points
+-- @treturn druid.scroll Current scroll instance
+function Scroll:set_points(points)
+	self.points = points
+
+	table.sort(self.points, function(a, b)
+		return a.x > b.x or a.y < b.y
+	end)
+
+	self:_check_threshold()
+
+	return self
+end
+
+
+--- Lock or unlock horizontal scroll
+-- @function scroll:set_horizontal_scroll
+-- @tparam bool state True, if horizontal scroll is enabled
+-- @treturn druid.scroll Current scroll instance
+function Scroll:set_horizontal_scroll(state)
+	self._is_horizontal_scroll = state
+	self.drag.can_x = self.available_size.x > 0 and state
+	return self
+end
+
+
+--- Lock or unlock vertical scroll
+-- @function scroll:set_vertical_scroll
+-- @tparam bool state True, if vertical scroll is enabled
+-- @treturn druid.scroll Current scroll instance
+function Scroll:set_vertical_scroll(state)
+	self._is_vertical_scroll = state
+	self.drag.can_y = self.available_size.y > 0 and state
+	return self
 end
 
 
 
-local function set_pos(self, pos)
-	if self.pos.x ~= pos.x or self.pos.y ~= pos.y then
-		self.pos.x = pos.x
-		self.pos.y = pos.y
-		gui.set_position(self.node, self.pos)
+--- Bind the grid component (Static or Dynamic) to recalculate
+-- scroll size on grid changes
+-- @function scroll:bind_grid
+-- @tparam druid.static_grid|druid.dynamic_grid Druid grid component
+-- @treturn druid.scroll Current scroll instance
+function Scroll:bind_grid(grid)
+	if self._grid_on_change then
+		self._grid_on_change:unsubscribe(self._grid_on_change_callback)
 
-		self.on_scroll:trigger(self:get_context(), self.pos)
+		self._grid_on_change = nil
+		self._grid_on_change_callback = nil
+	end
+
+	if not grid then
+		return
+	end
+
+	self._grid_on_change = grid.on_change_items
+	self._grid_on_change_callback = self._grid_on_change:subscribe(function()
+		self:set_size(grid:get_size())
+	end)
+	self:set_size(grid:get_size())
+
+	return self
+end
+
+
+function Scroll:_on_scroll_drag(dx, dy)
+	local t = self.target_position
+	local b = self.available_pos
+	local eb = self.available_pos_extra
+
+	-- Handle soft zones
+	-- Percent - multiplier for delta. Less if outside of scroll zone
+	local x_perc = 1
+	local y_perc = 1
+
+	-- Right border (minimum x)
+	if t.x < b.x and dx < 0 then
+		x_perc = inverse_lerp(eb.x, b.x, t.x)
+	end
+	-- Left border (maximum x)
+	if t.x > b.z and dx > 0 then
+		x_perc = inverse_lerp(eb.z, b.z, t.x)
+	end
+	-- Disable x scroll
+	if not self.drag.can_x then
+		x_perc = 0
+	end
+
+	-- Top border (minimum y)
+	if t.y < b.y and dy < 0 then
+		y_perc = inverse_lerp(eb.y, b.y, t.y)
+	end
+	-- Bot border (maximum y)
+	if t.y > b.w and dy > 0 then
+		y_perc = inverse_lerp(eb.w, b.w, t.y)
+	end
+	-- Disable y scroll
+	if not self.drag.can_y then
+		y_perc = 0
+	end
+
+	t.x = t.x + dx * x_perc
+	t.y = t.y + dy * y_perc
+end
+
+
+function Scroll:_check_soft_zone()
+	local target = self.target_position
+	local border = self.available_pos
+	local speed = self.style.BACK_SPEED
+
+	-- Right border (minimum x)
+	if target.x < border.x then
+		target.x = helper.step(target.x, border.x, math.abs(target.x - border.x) * speed)
+	end
+	-- Left border (maximum x)
+	if target.x > border.z then
+		target.x = helper.step(target.x, border.z, math.abs(target.x - border.z) * speed)
+	end
+	-- Top border (maximum y)
+	if target.y < border.y then
+		target.y = helper.step(target.y, border.y, math.abs(target.y - border.y) * speed)
+	end
+	-- Bot border (minimum y)
+	if target.y > border.w then
+		target.y = helper.step(target.y, border.w, math.abs(target.y - border.w) * speed)
 	end
 end
 
 
---- Return scroll, if it outside of scroll area
--- Using the lerp with BACK_SPEED koef
-local function check_soft_target(self)
-	local t = self.target
-	local b = self.border
-
-	if t.y < b.y then
-		t.y = helper.step(t.y, b.y, math.abs(t.y - b.y) * self.style.BACK_SPEED)
-	end
-	if t.x > b.x then
-		t.x = helper.step(t.x, b.x, math.abs(t.x - b.x) * self.style.BACK_SPEED)
-	end
-	if t.y > b.w then
-		t.y = helper.step(t.y, b.w, math.abs(t.y - b.w) * self.style.BACK_SPEED)
-	end
-	if t.x < b.z then
-		t.x = helper.step(t.x, b.z, math.abs(t.x - b.z) * self.style.BACK_SPEED)
+--- Cancel animation on other animation or input touch
+function Scroll:_cancel_animate()
+	if self.is_animate then
+		self.target_position = gui.get_position(self.content_node)
+		self.position.x = self.target_position.x
+		self.position.y = self.target_position.y
+		gui.cancel_animation(self.content_node, gui.PROP_POSITION)
+		self.is_animate = false
 	end
 end
 
 
---- Free inert update function
-local function update_hand_scroll(self, dt)
-	local inert = self.inert
-	local delta_x = self.target.x - self.pos.x
-	local delta_y = self.target.y - self.pos.y
+function Scroll:_set_scroll_position(position)
+	local available_extra = self.available_pos_extra
+	position.x = helper.clamp(position.x, available_extra.x, available_extra.z)
+	position.y = helper.clamp(position.y, available_extra.w, available_extra.y)
 
-	if helper.sign(delta_x) ~= helper.sign(inert.x) then
-		inert.x = 0
+	if self.position.x ~= position.x or self.position.y ~= position.y then
+		self.position.x = position.x
+		self.position.y = position.y
+		gui.set_position(self.content_node, position)
+
+		self.on_scroll:trigger(self:get_context(), self.position)
 	end
-	if helper.sign(delta_y) ~= helper.sign(inert.y) then
-		inert.y = 0
-	end
-
-	inert.x = inert.x + delta_x
-	inert.y = inert.y + delta_y
-
-	inert.x = math.abs(inert.x) * helper.sign(delta_x)
-	inert.y = math.abs(inert.y) * helper.sign(delta_y)
-
-	inert.x = inert.x * self.style.FRICT_HOLD
-	inert.y = inert.y * self.style.FRICT_HOLD
-
-	set_pos(self, self.target)
-end
-
-
-local function get_zone_center(self)
-	return self.pos + self.center_offset
 end
 
 
@@ -149,18 +450,18 @@ end
 -- if no inert, scroll to next point by scroll direction
 -- if inert, find next point by scroll director
 -- @local
-local function check_points(self)
+function Scroll:_check_points()
 	if not self.points then
 		return
 	end
 
-	local inert = self.inert
-	if not self.is_inert then
-		if math.abs(inert.x) > self.style.DEADZONE then
+	local inert = self.inertion
+	if not self._is_inert then
+		if math.abs(inert.x) > self.style.POINTS_DEADZONE then
 			self:scroll_to_index(self.selected - helper.sign(inert.x))
 			return
 		end
-		if math.abs(inert.y) > self.style.DEADZONE then
+		if math.abs(inert.y) > self.style.POINTS_DEADZONE then
 			self:scroll_to_index(self.selected + helper.sign(inert.y))
 			return
 		end
@@ -168,20 +469,22 @@ local function check_points(self)
 
 	-- Find closest point and point by scroll direction
 	-- Scroll to one of them (by scroll direction in priority)
+
 	local temp_dist = math.huge
 	local temp_dist_on_inert = math.huge
 	local index = false
 	local index_on_inert = false
-	local pos = get_zone_center(self)
+	local pos = self.position
+
 	for i = 1, #self.points do
 		local p = self.points[i]
-		local dist = helper.distance(pos.x, pos.y, p.x, p.y)
+		local dist = helper.distance(pos.x, pos.y, -p.x, -p.y)
 		local on_inert = true
 		-- If inert ~= 0, scroll only by move direction
-		if inert.x ~= 0 and helper.sign(inert.x) ~= helper.sign(p.x - pos.x) then
+		if inert.x ~= 0 and helper.sign(inert.x) ~= helper.sign(-p.x - pos.x) then
 			on_inert = false
 		end
-		if inert.y ~= 0 and helper.sign(inert.y) ~= helper.sign(p.y - pos.y) then
+		if inert.y ~= 0 and helper.sign(inert.y) ~= helper.sign(-p.y - pos.y) then
 			on_inert = false
 		end
 
@@ -199,340 +502,108 @@ local function check_points(self)
 end
 
 
-local function check_threshold(self)
-	local inert = self.inert
-	if not self.is_inert or vmath.length(inert) < self.style.INERT_THRESHOLD then
-		check_points(self)
-		inert.x = 0
-		inert.y = 0
+function Scroll:_check_threshold()
+	local is_stopped = false
+
+	if self.inertion.x ~= 0 and math.abs(self.inertion.x) < self.style.INERT_THRESHOLD then
+		is_stopped = true
+		self.inertion.x = 0
+	end
+	if self.inertion.y ~= 0 and math.abs(self.inertion.y) < self.style.INERT_THRESHOLD then
+		is_stopped = true
+		self.inertion.y = 0
+	end
+
+	if is_stopped or not self._is_inert then
+		self:_check_points()
 	end
 end
 
 
-local function update_free_inert(self, dt)
-	local inert = self.inert
-	if inert.x ~= 0 or inert.y ~= 0 then
-		self.target.x = self.pos.x + (inert.x * dt * self.style.INERT_SPEED)
-		self.target.y = self.pos.y + (inert.y * dt * self.style.INERT_SPEED)
+function Scroll:_update_free_scroll(dt)
+	local target = self.target_position
 
-		inert.x = inert.x * self.style.FRICT
-		inert.y = inert.y * self.style.FRICT
+	if self._is_inert and (self.inertion.x ~= 0 or self.inertion.y ~= 0) then
+		-- Inertion apply
+		target.x = self.position.x + self.inertion.x * self.style.INERT_SPEED * dt
+		target.y = self.position.y + self.inertion.y * self.style.INERT_SPEED * dt
 
-		-- Stop, when low inert speed and go to points
-		check_threshold(self)
+		self:_check_threshold()
 	end
 
-	check_soft_target(self)
-	set_pos(self, self.target)
-end
+	-- Inertion friction
+	self.inertion = self.inertion * self.style.FRICT
 
-
---- Cancel animation on other animation or input touch
-local function cancel_animate(self)
-	if self.animate then
-		self.target = gui.get_position(self.node)
-		self.pos.x = self.target.x
-		self.pos.y = self.target.y
-		gui.cancel_animation(self.node, gui.PROP_POSITION)
-		self.animate = false
+	self:_check_soft_zone()
+	if self.position.x ~= target.x or self.position.y ~= target.y then
+		self:_set_scroll_position(target)
 	end
 end
 
 
-local function add_delta(self, dx, dy)
-	local t = self.target
-	local b = self.border
-	local soft = self.soft_size
+function Scroll:_update_hand_scroll(dt)
+	local dx = self.target_position.x - self.position.x
+	local dy = self.target_position.y - self.position.y
 
-	-- TODO: Can we calc it more easier?
-	-- A lot of calculations for every side of border
+	self.inertion.x = (self.inertion.x + dx) * self.style.FRICT_HOLD
+	self.inertion.y = (self.inertion.y + dy) * self.style.FRICT_HOLD
 
-	-- Handle soft zones
-	-- Percent - multiplier for delta. Less if outside of scroll zone
-	local x_perc = 1
-	local y_perc = 1
-
-	if t.x > b.x and dx < 0 then
-		x_perc = (soft - (b.x - t.x)) / soft
-	end
-	if t.x < b.z and dx > 0 then
-		x_perc = (soft - (t.x - b.z)) / soft
-	end
-	-- If disabled scroll by x
-	if not self.can_x then
-		x_perc = 0
-	end
-
-	if t.y < b.y and dy < 0 then
-		y_perc = (soft - (b.y - t.y)) / soft
-	end
-	if t.y > b.w and dy > 0 then
-		y_perc = (soft - (t.y - b.w)) / soft
-	end
-	-- If disabled scroll by y
-	if not self.can_y then
-		y_perc = 0
-	end
-
-	-- Reset inert if outside of scroll zone
-	if x_perc ~= 1 then
-		self.inert.x = 0
-	end
-	if y_perc ~= 1 then
-		self.inert.y = 0
-	end
-
-	t.x = t.x + dx * x_perc
-	t.y = t.y + dy * y_perc
+	self:_set_scroll_position(self.target_position)
 end
 
 
---- Component init function
--- @function scroll:init
--- @tparam node scroll_parent Gui node where placed scroll content. This node will change position
--- @tparam node input_zone Gui node where input is catched
-function M.init(self, scroll_parent, input_zone)
-	self.style = self:get_style()
-	self.node = self:get_node(scroll_parent)
-	self.input_zone = self:get_node(input_zone)
-
-	self.zone_size = gui.get_size(self.input_zone)
-	self.soft_size = self.style.SOFT_ZONE_SIZE
-
-	-- Distance from node to node's center
-	local offset = helper.get_pivot_offset(gui.get_pivot(self.input_zone))
-	self.center_offset = vmath.vector3(self.zone_size)
-	self.center_offset.x = self.center_offset.x * offset.x
-	self.center_offset.y = self.center_offset.y * offset.y
-
-	self.is_inert = true
-	self.inert = vmath.vector3(0)
-	self.pos = gui.get_position(self.node)
-	self.target = vmath.vector3(self.pos)
-
-	self.input = {
-		touch = false,
-		start_x = 0,
-		start_y = 0,
-		side = false,
-	}
-
-	update_border(self)
-
-	self.on_scroll = Event()
-	self.on_scroll_to = Event()
-	self.on_point_scroll = Event()
+function Scroll:_on_touch_start()
+	self.inertion.x = 0
+	self.inertion.y = 0
+	self.target_position.x = self.position.x
+	self.target_position.y = self.position.y
 end
 
 
-function M.update(self, dt)
-	if self.input.touch then
-		if M.current_scroll == self then
-			update_hand_scroll(self, dt)
-		end
-	else
-		update_free_inert(self, dt)
-	end
+function Scroll:_on_touch_end()
+	self:_check_threshold()
 end
 
 
-function M.on_input(self, action_id, action)
-	if action_id ~= const.ACTION_TOUCH then
-		return false
-	end
-	local inp = self.input
-	local inert = self.inert
-	local result = false
+function Scroll:_update_size()
+	local view_border = helper.get_border(self.view_node)
+	local view_size = vmath.mul_per_elem(gui.get_size(self.view_node), gui.get_scale(self.view_node))
 
-	if gui.pick_node(self.input_zone, action.x, action.y) then
-		if action.pressed then
-			inp.touch = true
-			inp.start_x = action.x
-			inp.start_y = action.y
-			inert.x = 0
-			inert.y = 0
-			self.target.x = self.pos.x
-			self.target.y = self.pos.y
-		else
-			local dist = helper.distance(action.x, action.y, inp.start_x, inp.start_y)
-			if not M.current_scroll and dist >= self.style.DEADZONE then
-				local dx = math.abs(inp.start_x - action.x)
-				local dy = math.abs(inp.start_y - action.y)
-				inp.side = (dx > dy) and const.SIDE.X or const.SIDE.Y
+	local content_border = helper.get_border(self.content_node)
+	local content_size = vmath.mul_per_elem(gui.get_size(self.content_node), gui.get_scale(self.content_node))
 
-				-- Check scroll side if we can scroll
-				if (self.can_x and inp.side == const.SIDE.X or
-					self.can_y and inp.side == const.SIDE.Y) then
-						M.current_scroll = self
-				end
-			end
-		end
+	self.available_pos = get_border_vector(view_border - content_border)
+	self.available_size = get_size_vector(self.available_pos)
+
+	self.drag.can_x = self.available_size.x > 0 and self._is_horizontal_scroll
+	self.drag.can_y = self.available_size.y > 0 and self._is_vertical_scroll
+
+	-- Extra content size calculation
+	-- We add extra size only if scroll is available
+	-- Even the content zone size less than view zone size
+	local content_border_extra = helper.get_border(self.content_node)
+	local stretch_size = self.style.EXTRA_STRETCH_SIZE
+
+	if self.drag.can_x then
+		local sign = content_size.x > view_size.x and 1 or -1
+		content_border_extra.x = content_border_extra.x - stretch_size * sign
+		content_border_extra.z = content_border_extra.z + stretch_size * sign
 	end
 
-	if inp.touch and not action.pressed then
-		if M.current_scroll == self then
-			add_delta(self, action.dx, action.dy)
-			result = true
-		end
+	if self.drag.can_y then
+		local sign = content_size.y > view_size.y and 1 or -1
+		content_border_extra.y = content_border_extra.y + stretch_size * sign
+		content_border_extra.w = content_border_extra.w - stretch_size * sign
 	end
 
-	if action.released then
-		inp.touch = false
-		inp.side = false
-		if M.current_scroll == self then
-			M.current_scroll = nil
-			result = true
-		end
-
-		check_threshold(self)
+	if not self.style.SMALL_CONTENT_SCROLL then
+		self.drag.can_x = content_size.x > view_size.x
+		self.drag.can_y = content_size.y > view_size.y
 	end
 
-	return result
+	self.available_pos_extra = get_border_vector(view_border - content_border_extra)
+	self.available_size_extra = get_size_vector(self.available_pos_extra)
 end
 
 
---- Start scroll to target point
--- @function scroll:scroll_to
--- @tparam point vector3 target point
--- @tparam[opt] bool is_instant instant scroll flag
--- @usage scroll:scroll_to(vmath.vector3(0, 50, 0))
--- @usage scroll:scroll_to(vmath.vector3(0), true)
-function M.scroll_to(self, point, is_instant)
-	local b = self.border
-	local target = vmath.vector3(point)
-	target.x = helper.clamp(point.x - self.center_offset.x, b.x, b.z)
-	target.y = helper.clamp(point.y - self.center_offset.y, b.y, b.w)
-
-	cancel_animate(self)
-
-	self.animate = not is_instant
-
-	if is_instant then
-		self.target = target
-		set_pos(self, target)
-	else
-		gui.animate(self.node, gui.PROP_POSITION, target, gui.EASING_OUTSINE, self.style.ANIM_SPEED, 0, function()
-			self.animate = false
-			self.target = target
-			set_pos(self, target)
-		end)
-	end
-
-	self.on_scroll_to:trigger(self:get_context(), target, is_instant)
-end
-
-
---- Start scroll to target scroll percent
--- @function scroll:scroll_to_percent
--- @tparam point vector3 target percent
--- @tparam[opt] bool is_instant instant scroll flag
--- @usage scroll:scroll_to_percent(vmath.vector3(0.5, 0, 0))
-function M.scroll_to_percent(self, percent, is_instant)
-	local border = self.border
-
-	local size_x = math.abs(border.z - border.x)
-	if size_x == 0 then
-		size_x = 1
-	end
-	local size_y = math.abs(border.w - border.y)
-	if size_y == 0 then
-		size_y = 1
-	end
-
-	local pos = vmath.vector3(
-		-size_x * percent.x + border.x,
-		-size_y * percent.y + border.y,
-		0)
-	M.scroll_to(self, pos, is_instant)
-end
-
-
---- Scroll to item in scroll by point index
--- @function scroll:init
--- @tparam number index Point index
--- @tparam[opt] bool skip_cb If true, skip the point callback
-function M.scroll_to_index(self, index, skip_cb)
-	index = helper.clamp(index, 1, #self.points)
-
-	if self.selected ~= index then
-		self.selected = index
-
-		if not skip_cb then
-			self.on_point_scroll:trigger(self:get_context(), index, self.points[index])
-		end
-	end
-
-	self:scroll_to(self.points[index])
-end
-
-
---- Set points of interest.
--- Scroll will always centered on closer points
--- @function scroll:set_points
--- @tparam table points Array of vector3 points
-function M.set_points(self, points)
-	self.points = points
-	-- cause of parent move in other side by y
-	for i = 1, #self.points do
-		self.points[i].y = -self.points[i].y
-	end
-
-	table.sort(self.points, function(a, b)
-		return a.x > b.x or a.y < b.y
-	end)
-	check_threshold(self)
-end
-
-
---- Enable or disable scroll inert.
--- If disabled, scroll through points (if exist)
--- If no points, just simple drag without inertion
--- @function scroll:set_inert
--- @tparam bool state Inert scroll state
-function M.set_inert(self, state)
-	self.is_inert = state
-end
-
-
---- Set the callback on scrolling to point (if exist)
--- @function scroll:on_point_move
--- @tparam function callback Callback on scroll to point of interest
-function M.on_point_move(self, callback)
-	self.on_point_scroll:subscribe(callback)
-end
-
-
---- Set the scroll possibly area
--- @function scroll:set_border
--- @tparam vector3 border Size of scrolling area
-function M.set_border(self, content_size)
-	gui.set_size(self.node, content_size)
-	update_border(self)
-end
-
-
---- Return current scroll progress
--- @function scroll:get_scroll_percent
--- @treturn vector3 Scroll progress
-function M.get_scroll_percent(self)
-	local border = self.border
-	local size_x = math.abs(border.z - border.x)
-	if size_x == 0 then
-		size_x = 1
-	end
-
-	local size_y = math.abs(border.w - border.y)
-	if size_y == 0 then
-		size_y = 1
-	end
-	local pos = self.pos
-
-	return vmath.vector3(
-		(border.x - pos.x) / size_x,
-		(border.y - pos.y) / size_y,
-		0
-	)
-end
-
-
-return M
+return Scroll

druid/base/static_grid.lua

@@ -0,0 +1,323 @@
+--- Component to handle placing components by row and columns.
+-- Grid can anchor your elements, get content size and other
+-- @module druid.static_grid
+
+--- Component events
+-- @table Events
+-- @tfield druid_event on_add_item On item add callback
+-- @tfield druid_event on_remove_item On item remove callback
+-- @tfield druid_event on_change_items On item add or remove callback
+-- @tfield druid_event on_clear On grid clear callback
+-- @tfield druid_event on_update_positions On update item positions callback
+
+--- Component fields
+-- @table Fields
+-- @tfield node parent Parent gui node
+-- @tfield node[] nodes List of all grid nodes
+-- @tfield number first_index The first index of node in grid
+-- @tfield number last_index The last index of node in grid
+-- @tfield vector3 anchor Item anchor
+-- @tfield vector3 node_size Item size
+-- @tfield vector4 border The size of item content
+
+local const = require("druid.const")
+local Event = require("druid.event")
+local helper = require("druid.helper")
+local component = require("druid.component")
+
+local StaticGrid = component.create("static_grid", { const.ON_LAYOUT_CHANGE })
+
+
+--- Component init function
+-- @function static_grid:init
+-- @tparam node parent The gui node parent, where items will be placed
+-- @tparam node element Element prefab. Need to get it size
+-- @tparam[opt=1] number in_row How many nodes in row can be placed
+function StaticGrid:init(parent, element, in_row)
+	self.parent = self:get_node(parent)
+	self.nodes = {}
+
+	self.pivot = helper.get_pivot_offset(gui.get_pivot(self.parent))
+	self.anchor = vmath.vector3(0.5 + self.pivot.x, 0.5 - self.pivot.y, 0)
+
+	self.in_row = in_row or 1
+
+	self._prefab = self:get_node(element)
+	self.node_size = gui.get_size(self._prefab)
+	self.node_pivot = const.PIVOTS[gui.get_pivot(self._prefab)]
+
+	self.border = vmath.vector4(0) -- Current grid content size
+
+	self.on_add_item = Event()
+	self.on_remove_item = Event()
+	self.on_change_items = Event()
+	self.on_clear = Event()
+	self.on_update_positions = Event()
+
+	self._set_position_function = gui.set_position
+end
+
+
+local _temp_pos = vmath.vector3(0)
+--- Return pos for grid node index
+-- @function static_grid:get_pos
+-- @tparam number index The grid element index
+-- @treturn vector3 Node position
+function StaticGrid:get_pos(index)
+	local row = math.ceil(index / self.in_row) - 1
+	local col = (index - row * self.in_row) - 1
+
+	_temp_pos.x = col * self.node_size.x
+	_temp_pos.y = -row * self.node_size.y
+	_temp_pos.z = 0
+
+	return _temp_pos
+end
+
+
+--- Return index for grid pos
+-- @function static_grid:get_index
+-- @tparam vector3 pos The node position in the grid
+-- @treturn number The node index
+function StaticGrid:get_index(pos)
+	local col = pos.x / self.node_size.x + 1
+	local row = -pos.y / self.node_size.y
+
+	col = helper.round(col)
+	row = helper.round(row)
+
+	local index = col + (row * self.in_row)
+	return math.ceil(index)
+end
+
+
+--- Return grid index by node
+-- @function static_grid:get_index_by_node
+-- @tparam node node The gui node in the grid
+-- @treturn number The node index
+function StaticGrid:get_index_by_node(node)
+	for index, grid_node in pairs(self.nodes) do
+		if node == grid_node then
+			return index
+		end
+	end
+
+	return nil
+end
+
+
+function StaticGrid:on_layout_change()
+	self:_update(true)
+end
+
+
+--- Set grid anchor. Default anchor is equal to anchor of grid parent node
+-- @function static_grid:set_anchor
+-- @tparam vector3 anchor Anchor
+function StaticGrid:set_anchor(anchor)
+	self.anchor = anchor
+	self:_update()
+end
+
+
+--- Add new item to the grid
+-- @function static_grid:add
+--	@tparam node item Gui node
+-- @tparam[opt] number index The item position. By default add as last item
+function StaticGrid:add(item, index)
+	index = index or ((self.last_index or 0) + 1)
+
+	if self.nodes[index] then
+		-- Move nodes to right
+		for i = self.last_index, index, -1 do
+			self.nodes[i + 1] = self.nodes[i]
+		end
+	end
+
+	self.nodes[index] = item
+
+	gui.set_parent(item, self.parent)
+
+	-- Add new item instantly in new pos. Break update function for correct positioning
+	self:_update_indexes()
+	self:_update_borders()
+
+	gui.set_position(item, self:get_pos(index) + self:_get_zero_offset())
+
+	self:_update_pos()
+
+	self.on_add_item:trigger(self:get_context(), item, index)
+	self.on_change_items:trigger(self:get_context(), index)
+end
+
+
+--- Remove the item from the grid. Note that gui node will be not deleted
+-- @function static_grid:remove
+-- @tparam number index The grid node index to remove
+-- @tparam bool is_shift_nodes If true, will shift nodes left after index
+function StaticGrid:remove(index, is_shift_nodes)
+	assert(self.nodes[index], "No grid item at given index " .. index)
+
+	self.nodes[index] = nil
+
+	if is_shift_nodes then
+		for i = index, self.last_index do
+			self.nodes[i] = self.nodes[i + 1]
+		end
+	end
+
+	self:_update()
+
+	self.on_add_item:trigger(self:get_context(), index)
+	self.on_change_items:trigger(self:get_context(), index)
+end
+
+
+--- Return grid content size
+-- @function static_grid:get_size
+-- @treturn vector3 The grid content size
+function StaticGrid:get_size()
+	return vmath.vector3(
+		self.border.z - self.border.x,
+		self.border.y - self.border.w,
+		0)
+end
+
+
+--- Return array of all node positions
+-- @function static_grid:get_all_pos
+-- @treturn vector3[] All grid node positions
+function StaticGrid:get_all_pos()
+	local result = {}
+	for i, node in pairs(self.nodes) do
+		table.insert(result, gui.get_position(node))
+	end
+
+	return result
+end
+
+
+--- Change set position function for grid nodes. It will call on
+-- update poses on grid elements. Default: gui.set_position
+-- @function static_grid:set_position_function
+-- @tparam function callback Function on node set position
+-- @treturn druid.static_grid Current grid instance
+function StaticGrid:set_position_function(callback)
+	self._set_position_function = callback or gui.set_position
+
+	return self
+end
+
+
+--- Clear grid nodes array. GUI nodes will be not deleted!
+-- If you want to delete GUI nodes, use static_grid.nodes array before grid:clear
+-- @function static_grid:clear
+-- @treturn druid.static_grid Current grid instance
+function StaticGrid:clear()
+	self.border.x = 0
+	self.border.y = 0
+	self.border.w = 0
+	self.border.z = 0
+
+	self.nodes = {}
+	self:_update()
+
+	return self
+end
+
+
+--- Return elements offset for correct posing nodes. Correct posing at
+-- parent pivot node (0:0) with adjusting of node sizes and anchoring
+-- @function static_grid:_get_zero_offset
+-- @treturn vector3 The offset vector
+-- @local
+function StaticGrid:_get_zero_offset()
+	-- zero offset: center pos - border size * anchor
+	return vmath.vector3(
+		-((self.border.x + self.border.z)/2 + (self.border.z - self.border.x) * self.pivot.x),
+		-((self.border.y + self.border.w)/2 + (self.border.y - self.border.w) * self.pivot.y),
+		0
+	)
+end
+
+
+--- Update grid inner state
+-- @function static_grid:_update
+-- @tparam bool is_instant If true, node position update instantly, otherwise with set_position_function callback
+-- @local
+function StaticGrid:_update(is_instant)
+	self:_update_indexes()
+	self:_update_borders()
+	self:_update_pos(is_instant)
+end
+
+
+--- Update first and last indexes of grid nodes
+-- @function static_grid:_update_indexes
+-- @local
+function StaticGrid:_update_indexes()
+	self.first_index = nil
+	self.last_index = nil
+	for index in pairs(self.nodes) do
+		self.first_index = self.first_index or index
+		self.last_index = self.last_index or index
+
+		self.first_index = math.min(self.first_index, index)
+		self.last_index = math.max(self.last_index, index)
+	end
+end
+
+
+--- Update grid content borders, recalculate min and max values
+-- @function static_grid:_update_borders
+-- @local
+function StaticGrid:_update_borders()
+	if not self.first_index then
+		self.border = vmath.vector4(0)
+		return
+	end
+
+	self.border = vmath.vector4(math.huge, -math.huge, -math.huge, math.huge)
+
+	local size = self.node_size
+	local pivot = self.node_pivot
+	for index, node in pairs(self.nodes) do
+		local pos = self:get_pos(index)
+
+		local left = pos.x - size.x/2 - (size.x * pivot.x)
+		local right = pos.x + size.x/2 - (size.x * pivot.x)
+		local top = pos.y + size.y/2 - (size.y * pivot.y)
+		local bottom = pos.y - size.y/2 - (size.y * pivot.y)
+
+		self.border.x = math.min(self.border.x, left)
+		self.border.y = math.max(self.border.y, top)
+		self.border.z = math.max(self.border.z, right)
+		self.border.w = math.min(self.border.w, bottom)
+	end
+end
+
+
+--- Update grid nodes position
+-- @function static_grid:_update_indexes
+-- @tparam bool is_instant If true, node position update instantly, otherwise with set_position_function callback
+-- @local
+function StaticGrid:_update_pos(is_instant)
+	local zero_offset = self:_get_zero_offset()
+
+	for i, node in pairs(self.nodes) do
+		local pos = self:get_pos(i)
+		pos.x = pos.x + zero_offset.x
+		pos.y = pos.y + zero_offset.y
+
+		if is_instant then
+			gui.set_position(node, pos)
+		else
+			self._set_position_function(node, pos)
+		end
+	end
+
+	self.on_update_positions:trigger(self:get_context())
+end
+
+
+return StaticGrid

druid/base/swipe.lua

@@ -0,0 +1,143 @@
+--- Component to handle swipe gestures on node.
+-- Swipe will be triggered, if swipe was started and
+-- ended on one node
+-- @module druid.swipe
+
+--- Components fields
+-- @table Fields
+-- @tparam node node Swipe node
+-- @tparam[opt] node click_zone Restriction zone
+
+--- Component events
+-- @table Events
+-- @tfield druid_event on_swipe Trigger on swipe event
+
+local Event = require("druid.event")
+local const = require("druid.const")
+local helper = require("druid.helper")
+local component = require("druid.component")
+
+local Swipe = component.create("swipe", { const.ON_INPUT })
+
+
+local function start_swipe(self, action)
+	self._swipe_start_time = socket.gettime()
+	self._start_pos.x = action.x
+	self._start_pos.y = action.y
+end
+
+
+local function reset_swipe(self, action)
+	self._swipe_start_time = false
+end
+
+
+local function check_swipe(self, action)
+	local dx = action.x - self._start_pos.x
+	local dy = action.y - self._start_pos.y
+	local dist = helper.distance(self._start_pos.x, self._start_pos.y, action.x, action.y)
+	local delta_time = socket.gettime() - self._swipe_start_time
+	local is_swipe = self.style.SWIPE_THRESHOLD <= dist and delta_time <= self.style.SWIPE_TIME
+
+	if is_swipe then
+		local is_x_swipe = math.abs(dx) >= math.abs(dy)
+		local swipe_side = false
+
+		if is_x_swipe and dx > 0 then
+			swipe_side = const.SWIPE.RIGHT
+		end
+		if is_x_swipe and dx < 0 then
+			swipe_side = const.SWIPE.LEFT
+		end
+		if not is_x_swipe and dy > 0 then
+			swipe_side = const.SWIPE.UP
+		end
+		if not is_x_swipe and dy < 0 then
+			swipe_side = const.SWIPE.DOWN
+		end
+
+		self.on_swipe:trigger(self:get_context(), swipe_side, dist, delta_time)
+		reset_swipe(self)
+	end
+end
+
+
+--- Component style params.
+-- You can override this component styles params in druid styles table
+-- or create your own style
+-- @table Style
+-- @tfield[opt=0.4] number SWIPE_TIME Maximum time for swipe trigger
+-- @tfield[opt=50] number SWIPE_THRESHOLD Minimum distance for swipe trigger
+-- @tfield[opt=false] bool SWIPE_TRIGGER_ON_MOVE If true, trigger on swipe moving, not only release action
+function Swipe:on_style_change(style)
+	self.style = {}
+	self.style.SWIPE_TIME = style.SWIPE_TIME or 0.4
+	self.style.SWIPE_THRESHOLD = style.SWIPE_THRESHOLD or 50
+	self.style.SWIPE_TRIGGER_ON_MOVE = style.SWIPE_TRIGGER_ON_MOVE or false
+end
+
+
+--- Component init function
+-- @function swipe:init
+-- @tparam node node Gui node
+-- @tparam function on_swipe_callback Swipe callback for on_swipe_end event
+function Swipe:init(node, on_swipe_callback)
+	self._trigger_on_move = self.style.SWIPE_TRIGGER_ON_MOVE
+	self.node = self:get_node(node)
+
+	self._swipe_start_time = false
+	self._start_pos = vmath.vector3(0)
+
+	self.click_zone = nil
+	self.on_swipe = Event(on_swipe_callback)
+end
+
+
+function Swipe:on_input(action_id, action)
+	if action_id ~= const.ACTION_TOUCH then
+		return false
+	end
+
+	if not helper.is_enabled(self.node) then
+		return false
+	end
+
+	local is_pick = gui.pick_node(self.node, action.x, action.y)
+	if self.click_zone then
+		is_pick = is_pick and gui.pick_node(self.click_zone, action.x, action.y)
+	end
+
+	if not is_pick then
+		reset_swipe(self, action)
+		return false
+	end
+
+	if self._swipe_start_time and (self._trigger_on_move or action.released) then
+		check_swipe(self, action)
+	end
+
+	if action.pressed then
+		start_swipe(self, action)
+	end
+
+	if action.released then
+		reset_swipe(self, action)
+	end
+end
+
+
+function Swipe:on_input_interrupt()
+	reset_swipe(self)
+end
+
+
+--- Strict swipe click area. Useful for
+-- restrict events outside stencil node
+-- @function swipe:set_click_zone
+-- @tparam node zone Gui node
+function Swipe:set_click_zone(zone)
+	self.click_zone = self:get_node(zone)
+end
+
+
+return Swipe

druid/base/text.lua

@@ -24,7 +24,7 @@ local Event = require("druid.event")
 local const = require("druid.const")
 local component = require("druid.component")
 
-local M = component.create("text")
+local Text = component.create("text", { const.ON_LAYOUT_CHANGE })
 
 
 local function update_text_size(self)
@@ -64,12 +64,24 @@ 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
--- @tparam[opt] string value Initial text
+-- @tparam[opt] string value Initial text. Default value is node text from GUI scene.
 -- @tparam[opt] bool no_adjust If true, text will be not auto-adjust size
-function M.init(self, node, value, no_adjust)
+function Text:init(node, value, no_adjust)
 	self.node = self:get_node(node)
 	self.pos = gui.get_position(self.node)
 
@@ -85,18 +97,46 @@ function M.init(self, node, value, no_adjust)
 	self.color = gui.get_color(self.node)
 
 	self.on_set_text = Event()
-	self.on_update_text_scale = Event()
 	self.on_set_pivot = Event()
+	self.on_update_text_scale = Event()
 
-	self:set_to(value or 0)
+	self._space_width = {}
+
+	self:set_to(value or gui.get_text(self.node))
 	return self
 end
 
 
+function Text:on_layout_change()
+	self:set_to(self.last_value)
+end
+
+
+--- Calculate text width with font with respect to trailing space
+-- @function text:get_text_width
+-- @tparam[opt] string text
+function Text:get_text_width(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
-function M.set_to(self, set_to)
+function Text:set_to(set_to)
 	self.last_value = set_to
 	gui.set_text(self.node, set_to)
 
@@ -111,7 +151,7 @@ end
 --- Set color
 -- @function text:set_color
 -- @tparam vector4 color Color for node
-function M.set_color(self, color)
+function Text:set_color(color)
 	self.color = color
 	gui.set_color(self.node, color)
 end
@@ -120,7 +160,7 @@ end
 --- Set alpha
 -- @function text:set_alpha
 -- @tparam number alpha Alpha for node
-function M.set_alpha(self, alpha)
+function Text:set_alpha(alpha)
 	self.color.w = alpha
 	gui.set_color(self.node, self.color)
 end
@@ -129,7 +169,7 @@ end
 --- Set scale
 -- @function text:set_scale
 -- @tparam vector3 scale Scale for node
-function M.set_scale(self, scale)
+function Text:set_scale(scale)
 	self.last_scale = scale
 	gui.set_scale(self.node, scale)
 end
@@ -139,7 +179,7 @@ end
 -- his text area
 -- @function text:set_pivot
 -- @tparam gui.pivot pivot Gui pivot constant
-function M.set_pivot(self, pivot)
+function Text:set_pivot(pivot)
 	local prev_pivot = gui.get_pivot(self.node)
 	local prev_offset = const.PIVOTS[prev_pivot]
 
@@ -159,4 +199,12 @@ function M.set_pivot(self, pivot)
 end
 
 
-return M
+--- Return true, if text with line break
+-- @function text:is_multiline
+-- @treturn bool Is text node with line break
+function Text:is_multiline()
+	return gui.get_line_break(self.node)
+end
+
+
+return Text

druid/component.lua

@@ -9,55 +9,33 @@ local class = require("druid.system.middleclass")
 local Component = class("druid.component")
 
 
---- Get current component style table
--- @function component:get_style
--- @treturn table Component style table
-function Component.get_style(self)
-	if not self._meta.style then
-		return const.EMPTY_TABLE
-	end
-
-	return self._meta.style[self._component.name] or const.EMPTY_TABLE
-end
-
-
---- Set current component style table
+--- Set current component style table.
+-- Invoke `on_style_change` on component, if exist. Component should handle
+-- their style changing and store all style params
 -- @function component:set_style
 -- @tparam table style Druid style module
-function Component.set_style(self, druid_style)
-	self._meta.style = druid_style
-	self._style = self:get_style()
-end
+function Component:set_style(druid_style)
+	self._meta.style = druid_style or const.EMPTY_TABLE
+	local component_style = self._meta.style[self._component.name] or const.EMPTY_TABLE
 
-
---- Get current component template name
--- @function component:get_template
--- @treturn string Component template name
-function Component.get_template(self)
-	return self._meta.template
+	if self.on_style_change then
+		self:on_style_change(component_style)
+	end
 end
 
 
 --- Set current component template name
 -- @function component:set_template
 -- @tparam string template Component template name
-function Component.set_template(self, template)
+function Component:set_template(template)
 	self._meta.template = template
 end
 
 
---- Get current component nodes
--- @function component:get_nodes
--- @treturn table Component nodes table
-function Component.get_nodes(self)
-	return self._meta.nodes
-end
-
-
 --- Set current component nodes
 -- @function component:set_nodes
 -- @tparam table nodes Component nodes table
-function Component.set_nodes(self, nodes)
+function Component:set_nodes(nodes)
 	self._meta.nodes = nodes
 end
 
@@ -65,42 +43,49 @@ end
 --- Get current component context
 -- @function component:get_context
 -- @treturn table Component context
-function Component.get_context(self, context)
+function Component:get_context(context)
 	return self._meta.context
 end
 
 
---- Set current component context
--- @function component:set_context
--- @tparam table context Druid context. Usually it is self of script
-function Component.set_context(self, context)
-	self._meta.context = context
+--- Increase input priority in current input stack
+-- @function component:increase_input_priority
+function Component:increase_input_priority()
+	self._meta.increased_input_priority = true
 end
 
 
---- Get current component interests
--- @function component:get_interests
--- @treturn table List of component interests
-function Component.get_interests(self)
-	return self._component.interest
+--- Reset input priority in current input stack
+-- @function component:reset_input_priority
+function Component:reset_input_priority()
+	self._meta.increased_input_priority = false
 end
 
 
--- TODO: Определиться с get_node и node
--- get_node - берет ноду по ноде или строке
--- node - может брать ноду у компонента по схеме (если есть
--- template или таблица нод после gui.clone_tree)
-function Component.get_node(self, node_or_name)
-	local template_name = self:get_template() or const.EMPTY_STRING
-	local nodes = self:get_nodes()
+--- 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
+-- if they was setup via component:set_nodes, component:set_template
+-- @function component:get_node
+-- @tparam string|node node_or_name Node name or node itself
+-- @treturn node Gui node
+function Component:get_node(node_or_name)
+	local template_name = self:__get_template() or const.EMPTY_STRING
+	local nodes = self:__get_nodes()
 
+	if template_name ~= const.EMPTY_STRING then
+		template_name = template_name .. "/"
+	end
+
+	local node_type = type(node_or_name)
 	if nodes then
-		assert(type(node_or_name) == "strings", "You should pass node name instead of node")
+		assert(node_type == const.STRING, "You should pass node name instead of node")
 		return nodes[template_name .. node_or_name]
 	else
-		if type(node_or_name) == const.STRING then
+		if node_type == const.STRING then
 			return gui.get_node(template_name .. node_or_name)
 		else
+			-- Assume it's already node from gui.get_node
 			return node_or_name
 		end
 	end
@@ -111,28 +96,76 @@ end
 -- Use it to create component inside of other components.
 -- @function component:get_druid
 -- @treturn Druid Druid instance with component context
-function Component.get_druid(self)
+function Component:get_druid()
 	local context = { _context = self }
-	return setmetatable(context, { __index = self:get_context().druid })
+	return setmetatable(context, { __index = self._meta.druid })
+end
+
+
+--- Return component name
+-- @function component:get_name
+-- @treturn string The component name
+function Component:get_name()
+	return self._component.name
+end
+
+
+--- Set component input state. By default it enabled
+-- You can disable any input of component by this function
+-- @function component:set_input_enabled
+-- @tparam bool state The component input state
+--	@treturn Component Component itself
+function Component:set_input_enabled(state)
+	self._meta.input_enabled = state
+
+	for index = 1, #self._meta.children do
+		self._meta.children[index]:set_input_enabled(state)
+	end
+
+	return self
+end
+
+
+--- Return the parent for current component
+-- @function component:get_parent_component
+-- @treturn Component|nil The druid component instance or nil
+function Component:get_parent_component()
+	local context = self:get_context()
+
+	if context.isInstanceOf and context:isInstanceOf(Component) then
+		return context
+	end
+
+	return nil
 end
 
 
 --- Setup component context and his style table
 -- @function component:setup_component
+-- @tparam druid_instance table The parent druid instance
 -- @tparam context table Druid context. Usually it is self of script
 -- @tparam style table Druid style module
--- @treturn Component Component itself
-function Component.setup_component(self, context, style)
+-- @treturn component Component itself
+function Component:setup_component(druid_instance, context, style)
 	self._meta = {
 		template = nil,
 		context = nil,
 		nodes = nil,
 		style = nil,
+		druid = druid_instance,
+		increased_input_priority = false,
+		input_enabled = true,
+		children = {}
 	}
 
-	self:set_context(context)
+	self:__set_context(context)
 	self:set_style(style)
 
+	local parent = self:get_parent_component()
+	if parent then
+		parent:__add_children(self)
+	end
+
 	return self
 end
 
@@ -141,9 +174,11 @@ end
 -- by `Component.static.create`
 -- @function component:initialize
 -- @tparam string name Component name
--- @tparam table interest List of component's interest
+-- @tparam[opt={}] table interest List of component's interest
 -- @local
-function Component.initialize(self, name, interest)
+function Component:initialize(name, interest)
+	interest = interest or {}
+
 	self._component = {
 		name = name,
 		interest = interest
@@ -151,11 +186,68 @@ function Component.initialize(self, name, interest)
 end
 
 
+function Component:__tostring()
+	return self._component.name
+end
+
+
+--- Set current component context
+-- @function component:__set_context
+-- @tparam table context Druid context. Usually it is self of script
+function Component:__set_context(context)
+	self._meta.context = context
+end
+
+
+--- Get current component interests
+-- @function component:__get_interests
+-- @treturn table List of component interests
+function Component:__get_interests()
+	return self._component.interest
+end
+
+
+--- Get current component template name
+-- @function component:__get_template
+-- @treturn string Component template name
+function Component:__get_template()
+	return self._meta.template
+end
+
+
+--- Get current component nodes
+-- @function component:__get_nodes
+-- @treturn table Component nodes table
+function Component:__get_nodes()
+	return self._meta.nodes
+end
+
+
+--- Add child to component children list
+-- @function component:__add_children
+-- @tparam component children The druid component instance
+function Component:__add_children(children)
+	table.insert(self._meta.children, children)
+end
+
+
+--- Remove child from component children list
+-- @function component:__remove_children
+-- @tparam component children The druid component instance
+function Component:__remove_children(children)
+	for i = #self._meta.children, 1, -1 do
+		if self._meta.children[i] == children then
+			table.remove(self._meta.children, i)
+		end
+	end
+end
+
+
 --- Create new component. It will inheritance from basic
 -- druid component.
 -- @function Component.create
 -- @tparam string name Component name
--- @tparam table interest List of component's interest
+-- @tparam[opt={}] table interest List of component's interest
 function Component.static.create(name, interest)
 	-- Yea, inheritance here
 	local new_class = class(name, Component)

druid/const.lua

@@ -4,11 +4,18 @@
 
 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_MULTITOUCH = hash("multitouch")
+M.ACTION_SCROLL_DOWN = hash("scroll_down")
 
 
 M.RELEASED = "released"
@@ -20,12 +27,27 @@ 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("layout_changed")
+M.ON_LANGUAGE_CHANGE = hash("on_language_change")
+
+
+M.ALL_INTERESTS = {
+	M.ALL,
+	M.ON_INPUT,
+	M.ON_UPDATE,
+	M.ON_MESSAGE,
+	M.ON_FOCUS_LOST,
+	M.ON_INPUT_HIGH,
+	M.ON_FOCUS_GAINED,
+	M.ON_LAYOUT_CHANGE,
+	M.ON_LANGUAGE_CHANGE,
+}
 
 
 M.PIVOTS = {
@@ -41,9 +63,12 @@ M.PIVOTS = {
 }
 
 
+-- Value is method name of component
 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",
 }
 
 
@@ -53,15 +78,39 @@ M.UI_INPUT = {
 }
 
 
+M.OS = {
+	ANDROID = "Android",
+	IOS = "iPhone OS",
+	MAC = "Darwin",
+	LINUX = "Linux",
+	WINDOWS = "Windows",
+	BROWSER = "HTML5",
+}
+
+
 M.SIDE = {
 	X = "x",
 	Y = "y"
 }
 
 
+M.SWIPE = {
+	UP = "up",
+	DOWN = "down",
+	LEFT = "left",
+	RIGHT = "right",
+}
+
+
+M.ERRORS = {
+	GRID_DYNAMIC_ANCHOR = "The pivot of dynamic grid node should be West, East, South or North"
+}
+
+
 M.EMPTY_FUNCTION = function() end
 M.EMPTY_STRING = ""
+M.SPACE_STRING = " "
 M.EMPTY_TABLE = {}
 
 
-return M
+return M

druid/druid.lua

@@ -18,8 +18,21 @@ local const = require("druid.const")
 local druid_instance = require("druid.system.druid_instance")
 local settings = require("druid.system.settings")
 
+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
@@ -29,13 +42,10 @@ local M = {}
 -- @tparam table module lua table with component
 function M.register(name, module)
 	-- TODO: Find better solution to creating elements?
-	-- Possibly: druid.new(druid.BUTTON, etc?)
 	-- Current way is very implicit
 	druid_instance["new_" .. name] = function(self, ...)
 		return druid_instance.create(self, module, ...)
 	end
-
-	-- print("Register component", name)
 end
 
 
@@ -45,23 +55,29 @@ end
 -- @tparam[opt] table style Druid style module
 -- @treturn druid_instance Druid instance
 function M.new(context, style)
-	return druid_instance(context, style)
+	if settings.default_style == nil then
+		M.set_default_style(default_style)
+	end
+
+	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)
-	settings.default_style = style
+	settings.default_style = style or {}
 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
--- @function druid.set_text_function(callback)
+-- @function druid.set_text_function
 -- @tparam function callback Get localized text function
 function M.set_text_function(callback)
 	settings.get_text = callback or const.EMPTY_FUNCTION
@@ -70,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
@@ -80,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

druid/event.lua

@@ -4,13 +4,13 @@
 local class = require("druid.system.middleclass")
 
 -- @class DruidEvent
-local M = class("druid.event")
+local Event = class("druid.event")
 
 
 --- Event constructur
 -- @function Event
 -- @tparam function initial_callback Subscribe the callback on new event, if callback exist
-function M.initialize(self, initial_callback)
+function Event:initialize(initial_callback)
 	self._callbacks = {}
 
 	if initial_callback then
@@ -22,18 +22,20 @@ end
 --- Subscribe callback on event
 -- @function event:subscribe
 -- @tparam function callback Callback itself
-function M.subscribe(self, callback)
+function Event:subscribe(callback)
 	assert(type(self) == "table", "You should subscribe to event with : syntax")
 	assert(type(callback) == "function", "Callback should be function")
 
 	table.insert(self._callbacks, callback)
+
+	return callback
 end
 
 
 --- Unsubscribe callback on event
 -- @function event:unsubscribe
 -- @tparam function callback Callback itself
-function M.unsubscribe(self, callback)
+function Event:unsubscribe(callback)
 	for i = 1, #self._callbacks do
 		if self._callbacks[i] == callback then
 			table.remove(self._callbacks, i)
@@ -46,14 +48,14 @@ end
 --- Return true, if event have at lease one handler
 -- @function event:is_exist
 -- @treturn bool True if event have handlers
-function M.is_exist(self)
+function Event:is_exist()
 	return #self._callbacks > 0
 end
 
 
 --- Clear the all event handlers
 -- @function event:clear
-function M.clear(self)
+function Event:clear()
 	self._callbacks = {}
 end
 
@@ -61,11 +63,11 @@ end
 --- Trigger the event and call all subscribed callbacks
 -- @function event:trigger
 -- @param ... All event params
-function M.trigger(self, ...)
+function Event:trigger(...)
 	for i = 1, #self._callbacks do
 		self._callbacks[i](...)
 	end
 end
 
 
-return M
+return Event

druid/extended/checkbox.lua

@@ -11,18 +11,29 @@
 -- @tfield[opt=node] node click_node Button trigger node
 -- @tfield druid.button button Button component from click_node
 
---- Component style params
--- @table Style
--- @tfield function on_change_state (self, node, state)
-
+local const = require("druid.const")
 local Event = require("druid.event")
 local component = require("druid.component")
 
-local M = component.create("checkbox")
+local Checkbox = component.create("checkbox", { const.ON_LAYOUT_CHANGE })
 
 
 local function on_click(self)
-	M.set_state(self, not self.state)
+	self:set_state(not self.state)
+end
+
+
+--- Component style params.
+-- You can override this component styles params in druid styles table
+-- or create your own style
+-- @table Style
+-- @tfield function on_change_state (self, node, state)
+function Checkbox:on_style_change(style)
+	self.style = {}
+
+	self.style.on_change_state = style.on_change_state or function(_, node, state)
+		gui.set_enabled(node, state)
+	end
 end
 
 
@@ -31,32 +42,30 @@ end
 -- @tparam node node Gui node
 -- @tparam function callback Checkbox callback
 -- @tparam[opt=node] node click node Trigger node, by default equals to node
-function M.init(self, node, callback, click_node)
-	self.style = self:get_style()
+function Checkbox:init(node, callback, click_node)
 	self.druid = self:get_druid()
 	self.node = self:get_node(node)
 	self.click_node = self:get_node(click_node)
 
 	self.button = self.druid:new_button(self.click_node or self.node, on_click)
-	M.set_state(self, false, true)
+	self:set_state(false, true)
 
 	self.on_change_state = Event(callback)
 end
 
 
+function Checkbox:on_layout_change()
+	self:set_state(self.state, true)
+end
+
+
 --- Set checkbox state
 -- @function checkbox:set_state
 -- @tparam bool state Checkbox state
 -- @tparam bool is_silent Don't trigger on_change_state if true
-function M.set_state(self, state, is_silent)
-	if self.state == state then
-		return
-	end
-
+function Checkbox:set_state(state, is_silent)
 	self.state = state
-	if self.style.on_change_state then
-		self.style.on_change_state(self, self.node, state)
-	end
+	self.style.on_change_state(self, self.node, state)
 
 	if not is_silent then
 		self.on_change_state:trigger(self:get_context(), state)
@@ -67,9 +76,9 @@ end
 --- Return checkbox state
 -- @function checkbox:get_state
 -- @treturn bool Checkbox state
-function M.get_state(self)
+function Checkbox:get_state()
 	return self.state
 end
 
 
-return M
+return Checkbox

druid/extended/checkbox_group.lua

@@ -12,7 +12,7 @@
 local Event = require("druid.event")
 local component = require("druid.component")
 
-local M = component.create("checkbox_group")
+local CheckboxGroup = component.create("checkbox_group")
 
 
 --- Component init function
@@ -20,7 +20,7 @@ local M = component.create("checkbox_group")
 -- @tparam node[] node Array of gui node
 -- @tparam function callback Checkbox callback
 -- @tparam[opt=node] node[] click node Array of trigger nodes, by default equals to nodes
-function M.init(self, nodes, callback, click_nodes)
+function CheckboxGroup:init(nodes, callback, click_nodes)
 	self.druid = self:get_druid()
 	self.checkboxes = {}
 
@@ -39,8 +39,8 @@ end
 
 --- Set checkbox group state
 -- @function checkbox_group:set_state
--- @tparam bool[] state Array of checkbox state
-function M.set_state(self, indexes)
+-- @tparam bool[] indexes Array of checkbox state
+function CheckboxGroup:set_state(indexes)
 	for i = 1, #indexes do
 		if self.checkboxes[i] then
 			self.checkboxes[i]:set_state(indexes[i], true)
@@ -52,7 +52,7 @@ end
 --- Return checkbox group state
 -- @function checkbox_group:get_state
 -- @treturn bool[] Array if checkboxes state
-function M.get_state(self)
+function CheckboxGroup:get_state()
 	local result = {}
 
 	for i = 1, #self.checkboxes do
@@ -63,4 +63,4 @@ function M.get_state(self)
 end
 
 
-return M
+return CheckboxGroup

druid/extended/component.template.lua

@@ -0,0 +1,67 @@
+--- Druid component template
+-- @module druid.component
+-- @local
+local const = require("druid.const")
+local component = require("druid.component")
+
+local Component = component.create("my_component_name", { const.ON_UPDATE })
+
+
+-- Component constructor
+function Component:init(...)
+end
+
+
+-- Call only if exist interest: const.ON_UPDATE
+function Component:update(dt)
+end
+
+
+-- Call only if exist interest: const.ON_INPUT or const.ON_INPUT_HIGH
+function Component:on_input(action_id, action)
+	return false
+end
+
+
+-- Call on component creation and on component:set_style() function
+function Component:on_style_change(style)
+end
+
+
+-- Call only if exist interest: const.ON_MESSAGE
+function Component:on_message(message_id, message, sender)
+end
+
+
+-- Call only if component with ON_LANGUAGE_CHANGE interest
+function Component:on_language_change()
+end
+
+
+-- Call only if component with ON_LAYOUT_CHANGE interest
+function Component:on_layout_change()
+end
+
+
+-- Call, if input was capturing before this component
+-- Example: scroll is start scrolling, so you need unhover button
+function Component:on_input_interrupt()
+end
+
+
+-- Call, if game lost focus. Need ON_FOCUS_LOST intereset
+function Component:on_focus_lost()
+end
+
+
+-- Call, if game gained focus. Need ON_FOCUS_GAINED intereset
+function Component:on_focus_gained()
+end
+
+
+-- Call on component remove or on druid:final
+function Component:on_remove()
+end
+
+
+return Component

druid/extended/dynamic_grid.lua

@@ -0,0 +1,387 @@
+--- Component to handle placing components in row
+-- @module druid.dynamic_grid
+
+--- Component events
+-- @table Events
+-- @tfield druid_event on_add_item On item add callback
+-- @tfield druid_event on_remove_item On item remove callback
+-- @tfield druid_event on_change_items On item add or remove callback
+-- @tfield druid_event on_clear On grid clear callback
+-- @tfield druid_event on_update_positions On update item positions callback
+
+--- Component fields
+-- @table Fields
+-- @tfield node parent Parent gui node
+-- @tfield node[] nodes List of all grid nodes
+-- @tfield number first_index The first index of node in grid
+-- @tfield number last_index The last index of node in grid
+-- @tfield vector3 node_size Item size
+-- @tfield vector4 border The size of item content
+
+local const = require("druid.const")
+local Event = require("druid.event")
+local helper = require("druid.helper")
+local component = require("druid.component")
+
+local DynamicGrid = component.create("dynamic_grid", { const.ON_LAYOUT_CHANGE })
+
+
+local SIDE_VECTORS = {
+	LEFT = vmath.vector3(-1, 0, 0),
+	RIGHT = vmath.vector3(1, 0, 0),
+	TOP = vmath.vector3(0, -1, 0),
+	BOT = vmath.vector3(0, 1, 0),
+}
+
+local AVAILABLE_PIVOTS = {
+	gui.PIVOT_N,
+	gui.PIVOT_S,
+	gui.PIVOT_W,
+	gui.PIVOT_E,
+}
+
+
+--- Component init function
+-- @function dynamic_grid:init
+-- @tparam node parent The gui node parent, where items will be placed
+function DynamicGrid:init(parent)
+	self.parent = self:get_node(parent)
+
+	local parent_pivot = gui.get_pivot(self.parent)
+	self.pivot = helper.get_pivot_offset(parent_pivot)
+
+	assert(helper.contains(AVAILABLE_PIVOTS, parent_pivot), const.ERRORS.GRID_DYNAMIC_ANCHOR)
+	self.side = ((parent_pivot == gui.PIVOT_W or parent_pivot == gui.PIVOT_E)
+			and const.SIDE.X or const.SIDE.Y)
+
+	self.nodes = {}
+	self.border = vmath.vector4(0) -- Current grid content size
+
+	self.on_add_item = Event()
+	self.on_remove_item = Event()
+	self.on_change_items = Event()
+	self.on_clear = Event()
+	self.on_update_positions = Event()
+
+	self._set_position_function = gui.set_position
+end
+
+
+function DynamicGrid:on_layout_change()
+	self:_update(true)
+end
+
+
+--- Return pos for grid node index
+-- @function dynamic_grid:get_pos
+-- @tparam number index The grid element index
+-- @tparam node node The node to be placed
+-- @treturn vector3 Node position
+function DynamicGrid:get_pos(index, node, origin_index)
+	local origin_node = self.nodes[origin_index]
+
+	-- If anchor node is not exist, check around nodes
+	if not origin_node then
+		if self.nodes[index + 1] then
+			origin_index = index + 1
+		end
+		if self.nodes[index - 1] then
+			origin_index = index - 1
+		end
+		origin_node = self.nodes[origin_index]
+	end
+
+	if not origin_node then
+		assert(not self.first_index, "Dynamic Grid can't have gaps between nodes. Error on grid:add")
+
+		-- If not origin node, so it should be first element in the grid
+		local size = self:_get_node_size(node)
+		local pivot = const.PIVOTS[gui.get_pivot(node)]
+		return vmath.vector3(
+			size.x * pivot.x - size.x * self.pivot.x,
+			size.y * pivot.y - size.y * self.pivot.y,
+			0)
+	end
+
+	if origin_node then
+		-- Other nodes spawn from other side of the origin node
+		local is_forward = origin_index < index
+		local delta = is_forward and 1 or -1
+		return self:_get_next_node_pos(index - delta, node, self:_get_side_vector(self.side, is_forward))
+	end
+end
+
+
+--- Add new node to the grid
+-- @function dynamic_grid:add
+--	@tparam node node Gui node
+-- @tparam[opt] number index The node position. By default add as last node
+-- @tparam[opt=false] bool is_shift_left If true, shift all nodes to the left, otherwise shift nodes to the right
+function DynamicGrid:add(node, index, is_shift_left)
+	local delta = is_shift_left and -1 or 1
+
+	-- By default add node at end
+	index = index or ((self.last_index or 0) + 1)
+
+	-- If node exist at index place, shifting them
+	local is_shift = self.nodes[index]
+	if is_shift then
+		-- We need to iterate from index to start or end grid, depends of shift side
+		local start_index = is_shift_left and self.first_index or self.last_index
+		for i = start_index, index, -delta do
+			self.nodes[i + delta] = self.nodes[i]
+		end
+	end
+
+	self:_add_node(node, index, index - delta)
+
+	-- After shifting we should recalc node poses
+	if is_shift then
+		-- We need to iterate from placed node to start or end grid, depends of shift side
+		local target_index = is_shift_left and self.first_index or self.last_index
+		for i = index + delta, target_index + delta, delta do
+			local move_node = self.nodes[i]
+			move_node.pos = self:get_pos(i, move_node.node, i - delta)
+		end
+	end
+
+
+	-- Sync grid data
+	self:_update()
+
+	self.on_add_item:trigger(self:get_context(), node, index)
+	self.on_change_items:trigger(self:get_context(), index)
+end
+
+
+--- Remove the item from the grid. Note that gui node will be not deleted
+-- @function dynamic_grid:remove
+-- @tparam number index The grid node index to remove
+-- @tparam[opt=false] bool is_shift_left If true, shift all nodes to the left, otherwise shift nodes to the right
+function DynamicGrid:remove(index, is_shift_left)
+	local delta = is_shift_left and -1 or 1
+
+	assert(self.nodes[index], "No grid item at given index " .. index)
+
+	-- Just set nil for delete node data
+	self.nodes[index] = nil
+
+	-- After delete node, we should shift nodes and recalc their poses, depends from is_shift_left
+	local target_index = is_shift_left and self.first_index or self.last_index
+	for i = index, target_index, delta do
+		self.nodes[i] = self.nodes[i + delta]
+		if self.nodes[i] then
+			self.nodes[i].pos = self:get_pos(i, self.nodes[i].node, i - delta)
+		end
+	end
+
+	-- Sync grid data
+	self:_update()
+
+	self.on_add_item:trigger(self:get_context(), index)
+	self.on_change_items:trigger(self:get_context(), index)
+end
+
+
+--- Return grid content size
+-- @function dynamic_grid:get_size
+-- @treturn vector3 The grid content size
+function DynamicGrid:get_size(border)
+	border = border or self.border
+	return vmath.vector3(
+		border.z - border.x,
+		border.y - border.w,
+		0)
+end
+
+
+--- Return grid index by node
+-- @function dynamic_grid:get_index_by_node
+-- @tparam node node The gui node in the grid
+-- @treturn number The node index
+function DynamicGrid:get_index_by_node(node)
+	for index, node_info in pairs(self.nodes) do
+		if node == node_info.node then
+			return index
+		end
+	end
+
+	return nil
+end
+
+
+--- Return array of all node positions
+-- @function dynamic_grid:get_all_pos
+-- @treturn vector3[] All grid node positions
+function DynamicGrid:get_all_pos()
+	local result = {}
+	for i, node in pairs(self.nodes) do
+		table.insert(result, gui.get_position(node))
+	end
+
+	return result
+end
+
+
+--- Change set position function for grid nodes. It will call on
+-- update poses on grid elements. Default: gui.set_position
+-- @function dynamic_grid:set_position_function
+-- @tparam function callback Function on node set position
+-- @treturn druid.dynamic_grid Current grid instance
+function DynamicGrid:set_position_function(callback)
+	self._set_position_function = callback or gui.set_position
+	return self
+end
+
+
+--- Clear grid nodes array. GUI nodes will be not deleted!
+-- If you want to delete GUI nodes, use dynamic_grid.nodes array before grid:clear
+-- @function dynamic_grid:clear
+-- @treturn druid.dynamic_grid Current grid instance
+function DynamicGrid:clear()
+	self.nodes = {}
+	self:_update()
+	return self
+end
+
+
+function DynamicGrid:_add_node(node, index, origin_index)
+	self.nodes[index] = {
+		node = node,
+		pos = self:get_pos(index, node, origin_index),
+		size = self:_get_node_size(node),
+		pivot = const.PIVOTS[gui.get_pivot(node)]
+	}
+
+	-- Add new item instantly in new pos
+	gui.set_parent(node, self.parent)
+	gui.set_position(node, self.nodes[index].pos + self:_get_zero_offset())
+end
+
+
+--- Update grid inner state
+-- @function dynamic_grid:_update
+-- @tparam bool is_instant If true, node position update instantly, otherwise with set_position_function callback
+-- @local
+function DynamicGrid:_update(is_instant)
+	self:_update_indexes()
+	self:_update_borders()
+	self:_update_pos(is_instant)
+end
+
+
+--- Update first and last indexes of grid nodes
+-- @function dynamic_grid:_update_indexes
+-- @local
+function DynamicGrid:_update_indexes()
+	self.first_index = nil
+	self.last_index = nil
+	for index in pairs(self.nodes) do
+		self.first_index = self.first_index or index
+		self.last_index = self.last_index or index
+
+		self.first_index = math.min(self.first_index, index)
+		self.last_index = math.max(self.last_index, index)
+	end
+end
+
+
+--- Update grid content borders, recalculate min and max values
+-- @function dynamic_grid:_update_borders
+-- @local
+function DynamicGrid:_update_borders()
+	if not self.first_index then
+		self.border = vmath.vector4(0)
+		return
+	end
+
+	self.border = vmath.vector4(math.huge, -math.huge, -math.huge, math.huge)
+
+	for index, node in pairs(self.nodes) do
+		local pos = node.pos
+		local size = node.size
+		local pivot = node.pivot
+
+		local left = pos.x - size.x/2 - (size.x * pivot.x)
+		local right = pos.x + size.x/2 - (size.x * pivot.x)
+		local top = pos.y + size.y/2 - (size.y * pivot.y)
+		local bottom = pos.y - size.y/2 - (size.y * pivot.y)
+
+		self.border.x = math.min(self.border.x, left)
+		self.border.y = math.max(self.border.y, top)
+		self.border.z = math.max(self.border.z, right)
+		self.border.w = math.min(self.border.w, bottom)
+	end
+end
+
+
+--- Update grid nodes position
+-- @function dynamic_grid:_update_indexes
+-- @tparam bool is_instant If true, node position update instantly, otherwise with set_position_function callback
+-- @local
+function DynamicGrid:_update_pos(is_instant)
+	local offset = self:_get_zero_offset()
+
+	for index, node in pairs(self.nodes) do
+		if is_instant then
+			gui.set_position(node.node, node.pos + offset)
+		else
+			self._set_position_function(node.node, node.pos + offset)
+		end
+	end
+
+	self.on_update_positions:trigger(self:get_context())
+end
+
+
+function DynamicGrid:_get_next_node_pos(origin_node_index, new_node, place_side)
+	local node = self.nodes[origin_node_index]
+
+	local new_node_size = self:_get_node_size(new_node)
+	local new_pivot = const.PIVOTS[gui.get_pivot(new_node)]
+
+	local dist_x = (node.size.x/2 + new_node_size.x/2) * place_side.x
+	local dist_y = (node.size.y/2 + new_node_size.y/2) * place_side.y
+	local node_center_x = node.pos.x - node.size.x * node.pivot.x
+	local node_center_y = node.pos.y - node.size.y * node.pivot.y
+
+	return vmath.vector3(
+		node_center_x + dist_x + new_node_size.x * new_pivot.x,
+		node_center_y - dist_y + new_node_size.y * new_pivot.y,
+		0
+	)
+end
+
+
+function DynamicGrid:_get_node_size(node)
+	return vmath.mul_per_elem(gui.get_size(node), gui.get_scale(node))
+end
+
+
+--- Return elements offset for correct posing nodes. Correct posing at
+-- parent pivot node (0:0) with adjusting of node sizes and anchoring
+-- @function dynamic_grid:_get_zero_offset
+-- @treturn vector3 The offset vector
+-- @local
+function DynamicGrid:_get_zero_offset()
+	-- zero offset: center pos - border size * anchor
+	return vmath.vector3(
+		-((self.border.x + self.border.z)/2 + (self.border.z - self.border.x) * self.pivot.x),
+		-((self.border.y + self.border.w)/2 + (self.border.y - self.border.w) * self.pivot.y),
+		0)
+end
+
+
+--- Return side vector to correct node shifting
+function DynamicGrid:_get_side_vector(side, is_forward)
+	if side == const.SIDE.X then
+		return is_forward and SIDE_VECTORS.RIGHT or SIDE_VECTORS.LEFT
+	end
+
+	if side == const.SIDE.Y then
+		return is_forward and SIDE_VECTORS.BOT or SIDE_VECTORS.TOP
+	end
+end
+
+
+return DynamicGrid

druid/extended/input.lua

@@ -0,0 +1,312 @@
+--- Druid input text component.
+-- Carry on user text input
+-- @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
+
+local Event = require("druid.event")
+local const = require("druid.const")
+local component = require("druid.component")
+local utf8 = require("druid.system.utf8")
+
+local Input = component.create("input", { const.ON_INPUT, const.ON_FOCUS_LOST })
+
+
+--- 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())
+
+		self.style.on_select(self, self.button.node)
+	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())
+
+		self.style.on_unselect(self, self.button.node)
+	end
+end
+
+
+local function clear_and_select(self)
+	if self.style.IS_LONGTAP_ERASE then
+		self:set_text("")
+	end
+
+	select(self)
+end
+
+
+--- Component style params.
+-- You can override this component styles params in druid styles table
+-- or create your own style
+-- @table Style
+-- @tfield[opt=false] bool IS_LONGTAP_ERASE Is long tap will erase current input data
+-- @tfield[opt=*] 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_style Custom button style for input node
+function Input:on_style_change(style)
+	self.style = {}
+
+	self.style.IS_LONGTAP_ERASE = style.IS_LONGTAP_ERASE or false
+	self.style.MASK_DEFAULT_CHAR = style.MASK_DEFAULT_CHAR or "*"
+
+	self.style.on_select = style.on_select or function(_, button_node) end
+	self.style.on_unselect = style.on_unselect or function(_, button_node) end
+	self.style.on_input_wrong = style.on_input_wrong or function(_, button_node) end
+
+	self.style.button_style = style.button_style or {
+		LONGTAP_TIME = 0.4,
+		AUTOHOLD_TRIGGER = 0.8,
+		DOUBLETAP_TIME = 0.4
+	}
+end
+
+
+function Input:init(click_node, text_node, keyboard_type)
+	self.druid = self:get_druid(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.button_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 Input:on_input(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)
+					self.style.on_input_wrong(self, self.button.node)
+				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 Input:on_focus_lost()
+	unselect(self)
+end
+
+
+function Input:on_input_interrupt()
+	-- unselect(self)
+end
+
+
+--- Set text for input field
+-- @function input:set_text
+-- @tparam string input_text The string to apply for input field
+function Input:set_text(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 Input:get_text()
+	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
+-- @treturn druid.input Current input instance
+function Input:set_max_length(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
+-- @treturn druid.input Current input instance
+function Input:set_allowed_characters(characters)
+	self.allowed_characters = characters
+	return self
+end
+
+
+--- Reset current input selection and return previous value
+-- @function input:reset_changes
+function Input:reset_changes()
+	self:set_text(self.previous_value)
+	unselect(self)
+end
+
+
+return Input

druid/extended/lang_text.lua

@@ -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 LangText = component.create("lang_text", { const.ON_LANGUAGE_CHANGE })
 
 
 --- Component init function
@@ -23,9 +23,10 @@ local M = component.create("lang_text", { const.ON_CHANGE_LANGUAGE })
 -- @tparam node node The text node
 -- @tparam string locale_id Default locale id
 -- @tparam bool no_adjust If true, will not correct text size
-function M.init(self, node, locale_id, no_adjust)
+function LangText:init(node, locale_id, no_adjust)
 	self.druid = self:get_druid()
 	self.text = self.druid:new_text(node, locale_id, no_adjust)
+	self.last_locale_args = {}
 
 	self.on_change = Event()
 
@@ -35,9 +36,9 @@ function M.init(self, node, locale_id, no_adjust)
 end
 
 
-function M.on_change_language(self)
+function LangText:on_language_change()
 	if self.last_locale then
-		M.translate(self)
+		self:translate(self.last_locale, unpack(self.last_locale_args))
 	end
 end
 
@@ -45,7 +46,7 @@ end
 --- Setup raw text to lang_text component
 -- @function lang_text:set_to
 -- @tparam string text Text for text node
-function M.set_to(self, text)
+function LangText:set_to(text)
 	self.last_locale = false
 	self.text:set_to(text)
 	self.on_change:trigger()
@@ -55,10 +56,11 @@ end
 --- Translate the text by locale_id
 -- @function lang_text:translate
 -- @tparam string locale_id Locale id
-function M.translate(self, locale_id)
+function LangText:translate(locale_id, ...)
+	self.last_locale_args = {...}
 	self.last_locale = locale_id or self.last_locale
-	self.text:set_to(settings.get_text(self.last_locale))
+	self.text:set_to(settings.get_text(self.last_locale, ...))
 end
 
 
-return M
+return LangText

druid/extended/progress.lua

@@ -15,17 +15,12 @@
 -- @tfield number max_size Maximum size of progress bar
 -- @tfield vector4 slice Progress bar slice9 settings
 
---- Component style params
--- @table Style
--- @tfield number SPEED Progress bas fill rate. More -> faster
--- @tfield number MIN_DELTA Minimum step to fill progress bar
-
 local Event = require("druid.event")
 local const = require("druid.const")
 local helper = require("druid.helper")
 local component = require("druid.component")
 
-local M = component.create("progress", { const.ON_UPDATE })
+local Progress = component.create("progress", { const.ON_UPDATE, const.ON_LAYOUT_CHANGE })
 
 
 local function check_steps(self, from, to, exactly)
@@ -70,18 +65,30 @@ local function set_bar_to(self, set_to, is_silent)
 end
 
 
+--- Component style params.
+-- You can override this component styles params in druid styles table
+-- or create your own style
+-- @table Style
+-- @tfield[opt=5] number SPEED Progress bas fill rate. More -> faster
+-- @tfield[opt=0.005] number MIN_DELTA Minimum step to fill progress bar
+function Progress:on_style_change(style)
+	self.style = {}
+	self.style.SPEED = style.SPEED or 5
+	self.style.MIN_DELTA = style.MIN_DELTA or 0.005
+end
+
+
 --- Component init function
 -- @function progress:init
 -- @tparam string|node node Progress bar fill node or node name
 -- @tparam string key Progress bar direction: const.SIDE.X or const.SIDE.Y
--- @tparam number init_value Initial value of progress bar
-function M.init(self, node, key, init_value)
+-- @tparam[opt=1] number init_value Initial value of progress bar
+function Progress:init(node, key, init_value)
 	assert(key == const.SIDE.X or const.SIDE.Y, "Progress bar key should be 'x' or 'y'")
 
 	self.prop = hash("scale."..key)
 	self.key = key
 
-	self.style = self:get_style()
 	self.node = self:get_node(node)
 	self.scale = gui.get_scale(self.node)
 	self.size = gui.get_size(self.node)
@@ -99,7 +106,12 @@ function M.init(self, node, key, init_value)
 end
 
 
-function M.update(self, dt)
+function Progress:on_layout_change()
+	self:set_to(self.last_value)
+end
+
+
+function Progress:update(dt)
 	if self.target then
 		local prev_value = self.last_value
 		local step = math.abs(self.last_value - self.target) * (self.style.SPEED*dt)
@@ -121,14 +133,14 @@ end
 
 --- Fill a progress bar and stop progress animation
 -- @function progress:fill
-function M.fill(self)
+function Progress:fill()
 	set_bar_to(self, 1, true)
 end
 
 
 --- Empty a progress bar
 -- @function progress:empty
-function M.empty(self)
+function Progress:empty()
 	set_bar_to(self, 0, true)
 end
 
@@ -136,14 +148,14 @@ end
 --- Instant fill progress bar to value
 -- @function progress:set_to
 -- @tparam number to Progress bar value, from 0 to 1
-function M.set_to(self, to)
+function Progress:set_to(to)
 	set_bar_to(self, to)
 end
 
 
 --- Return current progress bar value
 -- @function progress:get
-function M.get(self)
+function Progress:get()
 	return self.last_value
 end
 
@@ -153,7 +165,7 @@ end
 -- @tparam number[] steps Array of progress bar values
 -- @tparam function callback Callback on intersect step value
 -- @usage progress:set_steps({0, 0.3, 0.6, 1}, function(self, step) end)
-function M.set_steps(self, steps, callback)
+function Progress:set_steps(steps, callback)
 	self.steps = steps
 	self.step_callback = callback
 end
@@ -163,7 +175,7 @@ end
 -- @function progress:to
 -- @tparam number to value between 0..1
 -- @tparam[opt] function callback Callback on animation ends
-function M.to(self, to, callback)
+function Progress:to(to, callback)
 	to = helper.clamp(to, 0, 1)
 	-- cause of float error
 	local value = helper.round(to, 5)
@@ -178,4 +190,4 @@ function M.to(self, to, callback)
 end
 
 
-return M
+return Progress

druid/extended/radio_group.lua

@@ -12,7 +12,7 @@
 local Event = require("druid.event")
 local component = require("druid.component")
 
-local M = component.create("radio_group")
+local RadioGroup = component.create("radio_group")
 
 
 local function on_checkbox_click(self, index)
@@ -29,7 +29,7 @@ end
 -- @tparam node[] node Array of gui node
 -- @tparam function callback Radio callback
 -- @tparam[opt=node] node[] click node Array of trigger nodes, by default equals to nodes
-function M.init(self, nodes, callback, click_nodes)
+function RadioGroup:init(nodes, callback, click_nodes)
 	self.druid = self:get_druid()
 	self.checkboxes = {}
 
@@ -48,16 +48,16 @@ end
 
 --- Set radio group state
 -- @function radio_group:set_state
--- @tparam bool[] state Array of checkbox state
-function M.set_state(self, index)
+-- @tparam number index Index in radio group
+function RadioGroup:set_state(index)
 	on_checkbox_click(self, index)
 end
 
 
 --- Return radio group state
 -- @function radio_group:get_state
--- @treturn bool[] Array if checkboxes state
-function M.get_state(self)
+-- @treturn number Index in radio group
+function RadioGroup:get_state()
 	local result = -1
 
 	for i = 1, #self.checkboxes do
@@ -71,4 +71,4 @@ function M.get_state(self)
 end
 
 
-return M
+return RadioGroup

druid/extended/slider.lua

@@ -22,7 +22,7 @@ local helper = require("druid.helper")
 local const = require("druid.const")
 local component = require("druid.component")
 
-local M = component.create("slider", { const.ON_INPUT_HIGH })
+local Slider = component.create("slider", { const.ON_INPUT_HIGH, const.ON_LAYOUT_CHANGE })
 
 
 local function on_change_value(self)
@@ -30,12 +30,18 @@ local function on_change_value(self)
 end
 
 
+local function set_position(self, value)
+	value = helper.clamp(value, 0, 1)
+	gui.set_position(self.node, self.start_pos + self.dist * value)
+end
+
+
 --- Component init function
 -- @function slider:init
 -- @tparam node node Gui pin node
 -- @tparam vector3 end_pos The end position of slider
 -- @tparam[opt] function callback On slider change callback
-function M.init(self, node, end_pos, callback)
+function Slider:init(node, end_pos, callback)
 	self.node = self:get_node(node)
 
 	self.start_pos = gui.get_position(self.node)
@@ -53,7 +59,12 @@ function M.init(self, node, end_pos, callback)
 end
 
 
-function M.on_input(self, action_id, action)
+function Slider:on_layout_change()
+	self:set(self.value, true)
+end
+
+
+function Slider:on_input(action_id, action)
 	if action_id ~= const.ACTION_TOUCH then
 		return false
 	end
@@ -76,9 +87,8 @@ function M.on_input(self, action_id, action)
 		self.target_pos.x = helper.clamp(self.pos.x, self.start_pos.x, self.end_pos.x)
 		self.target_pos.y = helper.clamp(self.pos.y, self.start_pos.y, self.end_pos.y)
 
-		gui.set_position(self.node, self.target_pos)
-
 		if prev_x ~= self.target_pos.x or prev_y ~= self.target_pos.y then
+			local prev_value = self.value
 
 			if self.dist.x > 0 then
 				self.value = (self.target_pos.x - self.start_pos.x) / self.dist.x
@@ -88,8 +98,27 @@ function M.on_input(self, action_id, action)
 				self.value = (self.target_pos.y - self.start_pos.y) / self.dist.y
 			end
 
-			on_change_value(self)
+			if self.steps then
+				local closest_dist = 1000
+				local closest = nil
+				for i = 1, #self.steps do
+					local dist = math.abs(self.value - self.steps[i])
+					if dist < closest_dist then
+						closest = self.steps[i]
+						closest_dist = dist
+					end
+				end
+				if closest then
+					self.value = closest
+				end
+			end
+
+			if prev_value ~= self.value then
+				on_change_value(self)
+			end
 		end
+
+		set_position(self, self.value)
 	end
 
 	if action.released then
@@ -104,10 +133,9 @@ end
 -- @function slider:set
 -- @tparam number value Value from 0 to 1
 -- @tparam[opt] bool is_silent Don't trigger event if true
-function M.set(self, value, is_silent)
+function Slider:set(value, is_silent)
 	value = helper.clamp(value, 0, 1)
-
-	gui.set_position(self.node, self.start_pos + self.dist * value)
+	set_position(self, value)
 	self.value = value
 	if not is_silent then
 		on_change_value(self)
@@ -115,4 +143,14 @@ function M.set(self, value, is_silent)
 end
 
 
-return M
+--- Set slider steps. Pin node will
+-- apply closest step position
+-- @function slider:set_steps
+-- @tparam number[] steps Array of steps
+-- @usage slider:set_steps({0, 0.2, 0.6, 1})
+function Slider:set_steps(steps)
+	self.steps = steps
+end
+
+
+return Slider

druid/extended/timer.lua

@@ -12,12 +12,9 @@
 --- Component fields
 -- @table Fields
 -- @tfield node node Trigger node
--- @tfield[opt=node] node anim_node Animation node
--- @tfield vector3 scale_from Initial scale 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
--- @tfield[opt] node click_zone Restriction zone
+-- @tfield number from Initial timer value
+-- @tfield number target Target timer value
+-- @tfield number value Current timer value
 
 local Event = require("druid.event")
 local const = require("druid.const")
@@ -25,7 +22,7 @@ local formats = require("druid.helper.formats")
 local helper = require("druid.helper")
 local component = require("druid.component")
 
-local M = component.create("timer", { const.ON_UPDATE })
+local Timer = component.create("timer", { const.ON_UPDATE })
 
 
 --- Component init function
@@ -34,7 +31,7 @@ local M = component.create("timer", { const.ON_UPDATE })
 -- @tparam number seconds_from Start timer value in seconds
 -- @tparam[opt=0] number seconds_to End timer value in seconds
 -- @tparam[opt] function callback Function on timer end
-function M.init(self, node, seconds_from, seconds_to, callback)
+function Timer:init(node, seconds_from, seconds_to, callback)
 	self.node = self:get_node(node)
 	seconds_from = math.max(seconds_from, 0)
 	seconds_to = math.max(seconds_to or 0, 0)
@@ -55,7 +52,7 @@ function M.init(self, node, seconds_from, seconds_to, callback)
 end
 
 
-function M.update(self, dt)
+function Timer:update(dt)
 	if not self.is_on then
 		return
 	end
@@ -66,7 +63,7 @@ function M.update(self, dt)
 	if self.temp > dist then
 		self.temp = self.temp - dist
 		self.value = helper.step(self.value, self.target, 1)
-		M.set_to(self, self.value)
+		self:set_to(self.value)
 
 		self.on_tick:trigger(self:get_context(), self.value)
 
@@ -80,7 +77,7 @@ end
 --- Set text to text field
 -- @function timer:set_to
 -- @tparam number set_to Value in seconds
-function M.set_to(self, set_to)
+function Timer:set_to(set_to)
 	self.last_value = set_to
 	gui.set_text(self.node, formats.second_string_min(set_to))
 end
@@ -89,7 +86,7 @@ end
 --- Called when update
 -- @function timer:set_state
 -- @tparam bool is_on Timer enable state
-function M.set_state(self, is_on)
+function Timer:set_state(is_on)
 	self.is_on = is_on
 
 	self.on_set_enabled:trigger(self:get_context(), is_on)
@@ -100,14 +97,14 @@ end
 -- @function timer:set_interval
 -- @tparam number from Start time in seconds
 -- @tparam number to Target time in seconds
-function M.set_interval(self, from, to)
+function Timer:set_interval(from, to)
 	self.from = from
 	self.value = from
 	self.temp = 0
 	self.target = to
-	M.set_state(self, true)
-	M.set_to(self, from)
+	self:set_state(true)
+	self:set_to(from)
 end
 
 
-return M
+return Timer

druid/helper.lua

@@ -126,6 +126,21 @@ function M.round(num, numDecimalPlaces)
 end
 
 
+function M.lerp(a, b, t)
+	return a + (b - a) * t
+end
+
+
+function M.contains(t, value)
+	for i = 1, #t do
+		if t[i] == value then
+			return i
+		end
+	end
+	return false
+end
+
+
 --- Check if node is enabled in gui hierarchy.
 -- Return false, if node or any his parent is disabled
 -- @function helper.is_enabled
@@ -152,4 +167,59 @@ function M.get_pivot_offset(pivot)
 end
 
 
+--- Check if device is mobile (Android or iOS)
+-- @function helper..is_mobile
+function M.is_mobile()
+	local system_name = sys.get_sys_info().system_name
+	return system_name == const.OS.IOS or system_name == const.OS.ANDROID
+end
+
+
+--- Check if device is HTML5
+-- @function helper.is_web
+function M.is_web()
+	local system_name = sys.get_sys_info().system_name
+	return system_name == const.OS.BROWSER
+end
+
+
+--- Distance from node to size border
+-- @function helper.get_border
+-- @return vector4 (left, top, right, down)
+function M.get_border(node)
+	local pivot = gui.get_pivot(node)
+	local pivot_offset = M.get_pivot_offset(pivot)
+	local size = vmath.mul_per_elem(gui.get_size(node), gui.get_scale(node))
+	return vmath.vector4(
+		-size.x*(0.5 + pivot_offset.x),
+		size.y*(0.5 - pivot_offset.y),
+		size.x*(0.5 - pivot_offset.x),
+		-size.y*(0.5 + pivot_offset.y)
+	)
+end
+
+
+--- Show deprecated message. Once time per message
+-- @function helper.deprecated
+-- @tparam string message The deprecated message
+local _deprecated_messages = {}
+function M.deprecated(message)
+	if _deprecated_messages[message] then
+		return
+	end
+
+	print("[Druid]: " .. message)
+	_deprecated_messages[message] = true
+end
+
+
+-- Show message to require extended component
+function M.extended_component(component_name)
+	print(string.format("[Druid]: The component %s is extended component. You have to register it via druid.register to use it", component_name))
+	print("[Druid]: Use next code:")
+	print(string.format('local %s = require("druid.extended.%s")', component_name, component_name))
+	print(string.format('druid.register("%s", %s)', component_name, component_name))
+end
+
+
 return M

druid/styles/default/anims.lua

@@ -5,7 +5,7 @@ local function scale_to(self, node, to, callback, time, delay, easing)
 	easing = easing or gui.EASING_INSINE
 	time = time or M.SCALE_ANIMATION_TIME
 	delay = delay or 0
-	time = time or 0.25
+	time = time or 0.10
 	gui.animate(node, gui.PROP_SCALE, to, easing, time, delay,
 		function()
 			if callback then
@@ -24,7 +24,7 @@ end
 function M.tap_scale_animation(self, node, target_scale)
 	scale_to(self, node, target_scale,
 		function()
-			M.back_scale_animation(self, node, self.scale_from)
+			M.back_scale_animation(self, node, self.start_scale)
 		end
 	)
 end

druid/styles/default/style.lua

@@ -5,9 +5,10 @@ local M = {}
 
 
 M["button"] = {
-	HOVER_SCALE = vmath.vector3(-0.025, -0.025, 1),
-	HOVER_TIME = 0.05,
-	SCALE_CHANGE = vmath.vector3(-0.05, -0.05, 1),
+	HOVER_SCALE = vmath.vector3(0.02, 0.02, 1),
+	HOVER_MOUSE_SCALE = vmath.vector3(0.01, 0.01, 1),
+	HOVER_TIME = 0.04,
+	SCALE_CHANGE = vmath.vector3(0.035, 0.035, 1),
 	BTN_SOUND = "click",
 	BTN_SOUND_DISABLED = "click",
 	DISABLED_COLOR = vmath.vector4(0, 0, 0, 1),
@@ -15,17 +16,23 @@ 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.scale_from + M.button.HOVER_SCALE
+		local scale_to = self.start_scale + M.button.HOVER_SCALE
 
-		local target_scale = state and scale_to or self.scale_from
+		local target_scale = state and scale_to or self.start_scale
+		anims.hover_scale(self, target_scale, M.button.HOVER_TIME)
+	end,
+
+	on_mouse_hover = function(self, node, state)
+		local scale_to = self.start_scale + M.button.HOVER_MOUSE_SCALE
+
+		local target_scale = state and scale_to or self.start_scale
 		anims.hover_scale(self, target_scale, M.button.HOVER_TIME)
 	end,
 
 	on_click = function(self, node)
-		local scale_to = self.scale_from + M.button.SCALE_CHANGE
+		local scale_to = self.start_scale + M.button.SCALE_CHANGE
 		anims.tap_scale_animation(self, node, scale_to)
 		settings.play_sound(M.button.BTN_SOUND)
 	end,
@@ -44,15 +51,24 @@ M["button"] = {
 }
 
 
+M["drag"] = {
+	DRAG_DEADZONE = 10, -- Size in pixels of drag deadzone
+}
+
+
 M["scroll"] = {
-	FRICT_HOLD = 0.8, -- mult. for inert, while touching
+	ANIM_SPEED = 0.2, -- gui.animation speed to point
+	BACK_SPEED = 0.35, -- Lerp speed of return to soft position
 	FRICT = 0.93, -- mult for free inert
-	INERT_THRESHOLD = 2, -- speed to stop inertion
-	INERT_SPEED = 25, -- koef. of inert speed
-	DEADZONE = 6, -- in px
-	SOFT_ZONE_SIZE = 160, -- size of outside zone (back move)
-	BACK_SPEED = 0.2, -- lerp speed
-	ANIM_SPEED = 0.3, -- gui.animation speed to point
+	FRICT_HOLD = 0.79, -- mult. for inert, while touching
+	INERT_THRESHOLD = 2.5, -- speed to stop inertion
+	INERT_SPEED = 30, -- koef. of inert speed
+	EXTRA_STRETCH_SIZE = 100, -- extra size in pixels outside of scroll (stretch effect)
+	POINTS_DEADZONE = 20, -- Speed to check points of interests in no_inertion mode
+
+	SCROLL_WHEEL_SPEED = 20,
+
+	SMALL_CONTENT_SCROLL = true, -- If true, content node with size less than view node size can be scrolled
 }
 
 
@@ -62,11 +78,6 @@ M["progress"] = {
 }
 
 
-M["progress_rich"] = {
-	DELAY = 1, -- delay in seconds before main fill
-}
-
-
 M["checkbox"] = {
 	on_change_state = function(self, node, state)
 		local target = state and 1 or 0
@@ -75,4 +86,43 @@ M["checkbox"] = {
 }
 
 
+M["swipe"] = {
+	SWIPE_THRESHOLD = 50,
+	SWIPE_TIME = 0.4,
+	SWIPE_TRIGGER_ON_MOVE = true
+}
+
+
+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 = {
+		LONGTAP_TIME = 0.4,
+		AUTOHOLD_TRIGGER = 0.8,
+		DOUBLETAP_TIME = 0.4,
+	}
+}
+
+
 return M

druid/styles/empty/style.lua

@@ -1,45 +1 @@
-local M = {}
-
-
-M["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,
-	DOUBLETAP_TIME = 0.4,
-	IS_HOVER = false,
-}
-
-
-M["scroll"] = {
-	FRICT_HOLD = 0, -- mult. for inert, while touching
-	FRICT = 0, -- mult for free inert
-	INERT_THRESHOLD = 2, -- speed to stop inertion
-	INERT_SPEED = 0, -- koef. of inert speed
-	DEADZONE = 6, -- in px
-	SOFT_ZONE_SIZE = 20, -- size of outside zone (back move)
-	BACK_SPEED = 0, -- lerp speed
-	ANIM_SPEED = 0, -- gui.animation speed to point
-}
-
-
-M["progress"] = {
-	SPEED = 5, -- progress bar fill rate, more faster
-	MIN_DELTA = 1
-}
-
-
-M["progress_rich"] = {
-	DELAY = 0, -- delay in seconds before main fill
-}
-
-
-M["checkbox"] = {
-	on_change_state = function(self, node, state)
-		gui.set_enabled(node, state)
-	end
-}
-
-
-return M
+return {}

druid/styles/sprites/style.lua

@@ -2,51 +2,23 @@ local M = {}
 
 
 M["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,
 	DOUBLETAP_TIME = 0.4,
-	HOVER_IMAGE = "button_yellow",
+
+	HOVER_MOUSE_IMAGE = "button_yellow",
 	DEFAULT_IMAGE = "button_blue",
-	CLICK_IMAGE = "button_red",
+	HOVER_IMAGE = "button_red",
 
 	on_hover = function(self, node, state)
 		local anim = state and M.button.HOVER_IMAGE or M.button.DEFAULT_IMAGE
 		gui.play_flipbook(node, anim)
+	end,
+
+	on_mouse_hover = function(self, node, state)
+		local anim = state and M.button.HOVER_MOUSE_IMAGE or M.button.DEFAULT_IMAGE
+		gui.play_flipbook(node, anim)
 	end
 }
 
 
-M["scroll"] = {
-	FRICT_HOLD = 0, -- mult. for inert, while touching
-	FRICT = 0, -- mult for free inert
-	INERT_THRESHOLD = 2, -- speed to stop inertion
-	INERT_SPEED = 0, -- koef. of inert speed
-	DEADZONE = 6, -- in px
-	SOFT_ZONE_SIZE = 20, -- size of outside zone (back move)
-	BACK_SPEED = 0, -- lerp speed
-	ANIM_SPEED = 0, -- gui.animation speed to point
-}
-
-
-M["progress"] = {
-	SPEED = 5, -- progress bar fill rate, more faster
-	MIN_DELTA = 1
-}
-
-
-M["progress_rich"] = {
-	DELAY = 0, -- delay in seconds before main fill
-}
-
-
-M["checkbox"] = {
-	on_change_state = function(self, node, state)
-		gui.set_enabled(node, state)
-	end
-}
-
-
 return M

druid/system/druid_instance.lua

@@ -1,5 +1,12 @@
---- Druid main class. Create instance of this
--- to start creating components
+--- Instance of Druid. Make one instance per gui_script with next code:
+--
+--    local druid = require("druid.druid")
+--    function init(self)
+--        self.druid = druid.new(self)
+--        local button = self.druid:new_button(...)
+--    end
+--
+-- Learn Druid instance function here
 -- @module druid_instance
 -- @see druid.button
 -- @see druid.blocker
@@ -9,41 +16,48 @@
 -- @see druid.lang_text
 -- @see druid.timer
 -- @see druid.progress
--- @see druid.grid
+-- @see druid.static_grid
+-- @see druid.dynamic_grid
 -- @see druid.scroll
 -- @see druid.slider
 -- @see druid.checkbox
 -- @see druid.checkbox_group
 -- @see druid.radio_group
+-- @see druid.swipe
+-- @see druid.drag
 
 local const = require("druid.const")
+local helper = require("druid.helper")
 local druid_input = require("druid.helper.druid_input")
 local settings = require("druid.system.settings")
 local class = require("druid.system.middleclass")
 
-local button = require("druid.base.button")
-local blocker = require("druid.base.blocker")
 local back_handler = require("druid.base.back_handler")
+local blocker = require("druid.base.blocker")
+local button = require("druid.base.button")
+local drag = require("druid.base.drag")
 local hover = require("druid.base.hover")
-local text = require("druid.base.text")
-local lang_text = require("druid.base.lang_text")
-local timer = require("druid.base.timer")
-local progress = require("druid.base.progress")
-local grid = require("druid.base.grid")
 local scroll = require("druid.base.scroll")
-local slider = require("druid.base.slider")
-local checkbox = require("druid.base.checkbox")
-local checkbox_group = require("druid.base.checkbox_group")
-local radio_group = require("druid.base.radio_group")
-local input = require("druid.base.input")
--- local infinity_scroll = require("druid.base.infinity_scroll")
+local static_grid = require("druid.base.static_grid")
+local swipe = require("druid.base.swipe")
+local text = require("druid.base.text")
+
+local checkbox = require("druid.extended.checkbox")
+local checkbox_group = require("druid.extended.checkbox_group")
+local dynamic_grid = require("druid.extended.dynamic_grid")
+local input = require("druid.extended.input")
+local lang_text = require("druid.extended.lang_text")
+local progress = require("druid.extended.progress")
+local radio_group = require("druid.extended.radio_group")
+local slider = require("druid.extended.slider")
+local timer = require("druid.extended.timer")
 
 -- @classmod Druid
 local Druid = class("druid.druid_instance")
 
 
 local function input_init(self)
-	if not sys.get_config("druid.auto_focus") == "1" then
+	if sys.get_config("druid.no_auto_input") == "1" then
 		return
 	end
 
@@ -54,26 +68,32 @@ local function input_init(self)
 end
 
 
+local function input_release(self)
+	if sys.get_config("druid.no_auto_input") == "1" then
+		return
+	end
+
+	if self.input_inited then
+		self.input_inited = false
+		druid_input.remove()
+	end
+end
+
+
 -- Create the component itself
 local function create(self, instance_class)
 	local instance = instance_class()
-	instance:setup_component(self._context, self._style)
+	instance:setup_component(self, self._context, self._style)
 
-	self.components[const.ALL] = self.components[const.ALL] or {}
 	table.insert(self.components[const.ALL], instance)
 
-	local register_to = instance:get_interests()
-	if register_to then
-		for i = 1, #register_to do
-			local interest = register_to[i]
-			if not self.components[interest] then
-				self.components[interest] = {}
-			end
-			table.insert(self.components[interest], instance)
+	local register_to = instance:__get_interests()
+	for i = 1, #register_to do
+		local interest = register_to[i]
+		table.insert(self.components[interest], instance)
 
-			if const.UI_INPUT[interest] then
-				input_init(self)
-			end
+		if const.UI_INPUT[interest] then
+			input_init(self)
 		end
 	end
 
@@ -82,18 +102,36 @@ end
 
 
 local function process_input(action_id, action, components, is_input_consumed)
-	if not components then
+	if #components == 0 then
 		return is_input_consumed
 	end
 
 	for i = #components, 1, -1 do
 		local component = components[i]
+		-- Process increased input priority first
+		local meta = component._meta
+		if meta.input_enabled and 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]
+		-- Process usual input priority next
+		local meta = component._meta
+		if meta.input_enabled and not 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
@@ -106,10 +144,18 @@ end
 -- @function druid:initialize
 -- @tparam context table Druid context. Usually it is self of script
 -- @tparam style table Druid style module
-function Druid.initialize(self, context, style)
+function Druid:initialize(context, style)
 	self._context = context
 	self._style = style or settings.default_style
+	self._deleted = false
+	self._is_input_processing = false
+	self._late_remove = {}
+	self.url = msg.url()
+
 	self.components = {}
+	for i = 1, #const.ALL_INTERESTS do
+		self.components[const.ALL_INTERESTS[i]] = {}
+	end
 end
 
 
@@ -117,7 +163,7 @@ end
 -- @function druid:create
 -- @tparam Component component Component module
 -- @tparam args ... Other component params to pass it to component:init function
-function Druid.create(self, component, ...)
+function Druid:create(component, ...)
 	local instance = create(self, component)
 
 	if instance.init then
@@ -128,30 +174,62 @@ function Druid.create(self, component, ...)
 end
 
 
+--- Call on final function on gui_script. It will call on_remove
+-- on all druid components
+-- @function druid:final
+function Druid:final()
+	local components = self.components[const.ALL]
+
+	for i = #components, 1, -1 do
+		if components[i].on_remove then
+			components[i]:on_remove()
+		end
+	end
+
+	self._deleted = true
+
+	input_release(self)
+end
+
+
 --- Remove component from druid instance.
 -- Component `on_remove` function will be invoked, if exist.
 -- @function druid:remove
 -- @tparam Component component Component instance
-function Druid.remove(self, component)
+function Druid:remove(component)
+	if self._is_input_processing then
+		table.insert(self._late_remove, component)
+		return
+	end
+
+	-- Recursive remove all children of component
+	local children = component._meta.children
+	for i = 1, #children do
+		self:remove(children[i])
+		local parent = children[i]:get_parent_component()
+		if parent then
+			parent:__remove_children(children[i])
+		end
+	end
+	component._meta.children = {}
+
 	local all_components = self.components[const.ALL]
 	for i = #all_components, 1, -1 do
 		if all_components[i] == component then
 			if component.on_remove then
 				component:on_remove()
 			end
-			table.remove(self, i)
+			table.remove(all_components, i)
 		end
 	end
 
-	local interests = component:get_interests()
-	if interests then
-		for i = 1, #interests do
-			local interest = interests[i]
-			local components = self.components[interest]
-			for j = #components, 1, -1 do
-				if components[j] == component then
-					table.remove(components, j)
-				end
+	local interests = component:__get_interests()
+	for i = 1, #interests do
+		local interest = interests[i]
+		local components = self.components[interest]
+		for j = #components, 1, -1 do
+			if components[j] == component then
+				table.remove(components, j)
 			end
 		end
 	end
@@ -161,12 +239,10 @@ end
 --- Druid update function
 -- @function druid:update
 -- @tparam number dt Delta time
-function Druid.update(self, dt)
+function Druid:update(dt)
 	local components = self.components[const.ON_UPDATE]
-	if components then
-		for i = 1, #components do
-			components[i]:update(dt)
-		end
+	for i = 1, #components do
+		components[i]:update(dt)
 	end
 end
 
@@ -175,7 +251,9 @@ end
 -- @function druid:on_input
 -- @tparam hash action_id Action_id from on_input
 -- @tparam table action Action from on_input
-function Druid.on_input(self, action_id, action)
+function Druid:on_input(action_id, action)
+	self._is_input_processing = true
+
 	local is_input_consumed = false
 
 	is_input_consumed = process_input(action_id, action,
@@ -184,6 +262,15 @@ function Druid.on_input(self, action_id, action)
 	is_input_consumed = process_input(action_id, action,
 		self.components[const.ON_INPUT], is_input_consumed)
 
+	self._is_input_processing = false
+
+	if #self._late_remove > 0 then
+		for i = 1, #self._late_remove do
+			self:remove(self._late_remove[i])
+		end
+		self._late_remove = {}
+	end
+
 	return is_input_consumed
 end
 
@@ -193,8 +280,9 @@ end
 -- @tparam hash message_id Message_id from on_message
 -- @tparam table message Message from on_message
 -- @tparam hash sender Sender from on_message
-function Druid.on_message(self, message_id, message, sender)
+function Druid:on_message(message_id, message, sender)
 	local specific_ui_message = const.SPECIFIC_UI_MESSAGES[message_id]
+
 	if specific_ui_message then
 		local components = self.components[message_id]
 		if components then
@@ -204,7 +292,7 @@ function Druid.on_message(self, message_id, message, sender)
 			end
 		end
 	else
-		local components = self.components[const.ON_MESSAGE] or const.EMPTY_TABLE
+		local components = self.components[const.ON_MESSAGE]
 		for i = 1, #components do
 			components[i]:on_message(message_id, message, sender)
 		end
@@ -212,11 +300,56 @@ 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()
+	local components = self.components[const.ON_FOCUS_LOST]
+	for i = 1, #components do
+		components[i]:on_focus_lost()
+	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()
+	local components = self.components[const.ON_FOCUS_GAINED]
+	for i = 1, #components do
+		components[i]:on_focus_gained()
+	end
+end
+
+
+--- Druid on layout change function.
+-- Called on update gui layout
+-- @function druid:on_layout_change
+function Druid:on_layout_change()
+	local components = self.components[const.ON_LAYOUT_CHANGE]
+	for i = 1, #components do
+		components[i]:on_layout_change()
+	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()
+	local components = self.components[const.ON_LANGUAGE_CHANGE]
+	for i = 1, #components do
+		components[i]:on_language_change()
+	end
+end
+
+
 --- Create button basic component
 -- @function druid:new_button
 -- @tparam args ... button init args
 -- @treturn Component button component
-function Druid.new_button(self, ...)
+function Druid:new_button(...)
 	return Druid.create(self, button, ...)
 end
 
@@ -225,7 +358,7 @@ end
 -- @function druid:new_blocker
 -- @tparam args ... blocker init args
 -- @treturn Component blocker component
-function Druid.new_blocker(self, ...)
+function Druid:new_blocker(...)
 	return Druid.create(self, blocker, ...)
 end
 
@@ -234,7 +367,7 @@ end
 -- @function druid:new_back_handler
 -- @tparam args ... back_handler init args
 -- @treturn Component back_handler component
-function Druid.new_back_handler(self, ...)
+function Druid:new_back_handler(...)
 	return Druid.create(self, back_handler, ...)
 end
 
@@ -243,7 +376,7 @@ end
 -- @function druid:new_hover
 -- @tparam args ... hover init args
 -- @treturn Component hover component
-function Druid.new_hover(self, ...)
+function Druid:new_hover(...)
 	return Druid.create(self, hover, ...)
 end
 
@@ -252,44 +385,28 @@ end
 -- @function druid:new_text
 -- @tparam args ... text init args
 -- @treturn Component text component
-function Druid.new_text(self, ...)
+function Druid:new_text(...)
 	return Druid.create(self, text, ...)
 end
 
 
---- Create lang_text basic component
--- @function druid:new_lang_text
--- @tparam args ... lang_text init args
--- @treturn Component lang_text component
-function Druid.new_lang_text(self, ...)
-	return Druid.create(self, lang_text, ...)
-end
-
-
---- Create timer basic component
--- @function druid:new_timer
--- @tparam args ... timer init args
--- @treturn Component timer component
-function Druid.new_timer(self, ...)
-	return Druid.create(self, timer, ...)
-end
-
-
---- Create progress basic component
--- @function druid:new_progress
--- @tparam args ... progress init args
--- @treturn Component progress component
-function Druid.new_progress(self, ...)
-	return Druid.create(self, progress, ...)
-end
-
-
 --- Create grid basic component
+-- Deprecated
 -- @function druid:new_grid
 -- @tparam args ... grid init args
 -- @treturn Component grid component
-function Druid.new_grid(self, ...)
-	return Druid.create(self, grid, ...)
+function Druid:new_grid(...)
+	helper.deprecated("The druid:new_grid is deprecated. Please use druid:new_static_grid instead")
+	return Druid.create(self, static_grid, ...)
+end
+
+
+--- Create static grid basic component
+-- @function druid:new_static_grid
+-- @tparam args ... grid init args
+-- @treturn Component grid component
+function Druid:new_static_grid(...)
+	return Druid.create(self, static_grid, ...)
 end
 
 
@@ -297,54 +414,117 @@ end
 -- @function druid:new_scroll
 -- @tparam args ... scroll init args
 -- @treturn Component scroll component
-function Druid.new_scroll(self, ...)
+function Druid:new_scroll(...)
 	return Druid.create(self, scroll, ...)
 end
 
 
---- Create slider basic component
+--- Create swipe basic component
+-- @function druid:new_swipe
+-- @tparam args ... swipe init args
+-- @treturn Component swipe component
+function Druid:new_swipe(...)
+	return Druid.create(self, swipe, ...)
+end
+
+
+--- Create drag basic component
+-- @function druid:new_drag
+-- @tparam args ... drag init args
+-- @treturn Componetn drag component
+function Druid:new_drag(...)
+	return Druid.create(self, drag, ...)
+end
+
+
+--- Create dynamic grid component
+-- @function druid:new_dynamic_grid
+-- @tparam args ... grid init args
+-- @treturn Component grid component
+function Druid:new_dynamic_grid(...)
+	-- return helper.extended_component("dynamic_grid")
+	return Druid.create(self, dynamic_grid, ...)
+end
+
+
+--- Create lang_text component
+-- @function druid:new_lang_text
+-- @tparam args ... lang_text init args
+-- @treturn Component lang_text component
+function Druid:new_lang_text(...)
+		-- return helper.extended_component("lang_text")
+	return Druid.create(self, lang_text, ...)
+end
+
+
+--- Create slider component
 -- @function druid:new_slider
 -- @tparam args ... slider init args
 -- @treturn Component slider component
-function Druid.new_slider(self, ...)
+function Druid:new_slider(...)
+	-- return helper.extended_component("slider")
 	return Druid.create(self, slider, ...)
 end
 
 
---- Create checkbox basic component
+--- Create checkbox component
 -- @function druid:new_checkbox
 -- @tparam args ... checkbox init args
 -- @treturn Component checkbox component
-function Druid.new_checkbox(self, ...)
+function Druid:new_checkbox(...)
+	-- return helper.extended_component("checkbox")
 	return Druid.create(self, checkbox, ...)
 end
 
 
---- Create input basic component
+--- Create input component
 -- @function druid:new_input
 -- @tparam args ... input init args
 -- @treturn Component input component
-function Druid.new_input(self, ...)
+function Druid:new_input(...)
+	-- return helper.extended_component("input")
 	return Druid.create(self, input, ...)
 end
 
 
---- Create checkbox_group basic component
+--- Create checkbox_group component
 -- @function druid:new_checkbox_group
 -- @tparam args ... checkbox_group init args
 -- @treturn Component checkbox_group component
-function Druid.new_checkbox_group(self, ...)
+function Druid:new_checkbox_group(...)
+	-- return helper.extended_component("checkbox_group")
 	return Druid.create(self, checkbox_group, ...)
 end
 
 
---- Create radio_group basic component
+--- Create radio_group component
 -- @function druid:new_radio_group
 -- @tparam args ... radio_group init args
 -- @treturn Component radio_group component
-function Druid.new_radio_group(self, ...)
+function Druid:new_radio_group(...)
+	-- return helper.extended_component("radio_group")
 	return Druid.create(self, radio_group, ...)
 end
 
 
+--- Create timer component
+-- @function druid:new_timer
+-- @tparam args ... timer init args
+-- @treturn Component timer component
+function Druid:new_timer(...)
+	-- return helper.extended_component("timer")
+	return Druid.create(self, timer, ...)
+end
+
+
+--- Create progress component
+-- @function druid:new_progress
+-- @tparam args ... progress init args
+-- @treturn Component progress component
+function Druid:new_progress(...)
+	-- return helper.extended_component("progress")
+	return Druid.create(self, progress, ...)
+end
+
+
 return Druid

druid/system/settings.lua

@@ -6,7 +6,8 @@ local M = {}
 
 M.default_style = nil
 
-function M.get_text(name)
+
+function M.get_text(name, ...)
 	return "[Druid]: locales not inited"
 end
 

editor_scripts/gui_scheme.editor_script

@@ -0,0 +1,76 @@
+--- @license MIT, Insality 2020
+--- @source https://github.com/Insality/druid
+
+local M = {}
+
+
+local function ends_with(str, ending)
+	return ending == "" or str:sub(-#ending) == ending
+end
+
+
+function M.get_commands()
+	return {
+		{
+			label = "Print gui scheme",
+
+			locations = { "Outline" },
+
+			query = {
+				selection = {type = "outline", cardinality = "many"}
+			},
+
+			active = function(opts)
+				return true
+			end,
+
+			run = function(opts)
+				print("local SCHEME = {")
+
+				for i = 1, #opts.selection do
+					local file = opts.selection[i]
+					if editor.can_get(file, "id") then
+						local id = editor.get(file, "id")
+						print("\t" .. string.upper(id) .. " = \"" .. id .. "\",")
+					end
+				end
+
+				print("}")
+				print("")
+			end
+		},
+
+		{
+			label = "Assign layers",
+
+			locations = {"Edit"},
+
+			query = {
+				selection = {type = "resource", cardinality = "one"}
+			},
+
+			active = function(opts)
+				local path = editor.get(opts.selection, "path")
+				return ends_with(path, ".gui")
+			end,
+
+			run = function(opts)
+				local file = opts.selection
+				print("Run script for", editor.get(file, "path"))
+				return {
+					{
+						action = "shell",
+						command = {
+							"bash",
+							"./editor_scripts/setup_layers.sh",
+							"." .. editor.get(file, "path")
+						}
+					}
+				}
+			end
+		}
+	}
+end
+
+
+return M

editor_scripts/setup_layers.py

@@ -0,0 +1,44 @@
+# @license MIT, Insality 2020
+# @source https://github.com/Insality/druid
+
+import sys
+import deftree
+
+def main():
+	filename = sys.argv[1]
+	print("Auto setup layers for file", filename)
+	tree = deftree.parse(filename)
+	root = tree.get_root()
+
+	layers = []
+	for texture in root.iter_elements("textures"):
+		layers.append(texture.get_attribute("name").value)
+
+	for fonts in root.iter_elements("fonts"):
+		layers.append(fonts.get_attribute("name").value)
+
+	to_remove_layers = []
+	for layer in root.iter_elements("layers"):
+		to_remove_layers.append(layer)
+	for layer in to_remove_layers:
+		root.remove(layer)
+
+	for layer in layers:
+		new_layer = root.add_element("layers")
+		new_layer.add_attribute("name", layer)
+
+	for node in root.iter_elements("nodes"):
+		texture = node.get_attribute("texture")
+		font = node.get_attribute("font")
+
+		if texture:
+			layer = texture.value.split("/")[0]
+			node.set_attribute("layer", layer)
+
+		if font:
+			layer = font.value
+			node.set_attribute("layer", layer)
+
+	tree.write()
+
+main()

editor_scripts/setup_layers.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+# @license MIT, Insality 2020
+# @source https://github.com/Insality/druid
+
+echo "Run bash for $1"
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+
+/usr/local/bin/python3.7 $DIR/setup_layers.py $@

example/gui/main/main.gui_script

@@ -3,26 +3,28 @@ local druid = require("druid.druid")
 local empty_style = require("druid.styles.empty.style")
 local default_style = require("druid.styles.default.style")
 
-local main_page = require("example.page.main")
-local text_page = require("example.page.texts")
-local button_page = require("example.page.button")
-local scroll_page = require("example.page.scroll")
+local main_page = require("example.page.main_page")
+local text_page = require("example.page.texts_page")
+local button_page = require("example.page.button_page")
+local scroll_page = require("example.page.scroll_page")
+local slider_page = require("example.page.slider_page")
+local input_page = require("example.page.input_page")
+local grid_page = require("example.page.grid_page")
 
 local pages = {
 	"main_page",
 	"texts_page",
 	"button_page",
 	"scroll_page",
+	"slider_page",
+	"input_page",
+	"grid_page",
 }
 
 local function on_control_button(self, delta)
 	self.page = self.page + delta
-	if self.page < 1 then
-		self.page = #pages
-	end
-	if self.page > #pages then
-		self.page = 1
-	end
+	self.page = math.max(1, self.page)
+	self.page = math.min(self.page, #pages)
 
 	self.header:translate(pages[self.page])
 	local node = gui.get_node("C_Anchor")
@@ -31,22 +33,48 @@ end
 
 
 local function init_top_panel(self)
+	self.druid:new_blocker("panel_top")
 	self.druid:new_button("button_left/button", on_control_button, -1)
 	self.druid:new_button("button_right/button", on_control_button, 1)
 	self.header = self.druid:new_lang_text("text_header", "main_page")
 end
 
 
+local function init_swipe_control(self)
+	self.druid:new_swipe("root", function(_, side)
+		if side == "left" then
+			on_control_button(self, 1)
+		end
+		if side == "right" then
+			on_control_button(self, -1)
+		end
+	end)
+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)
 
-	init_top_panel(self)
+	window.set_listener(on_window_callback)
+
+	init_swipe_control(self)
+
 	self.page = 1
 	main_page.setup_page(self)
 	text_page.setup_page(self)
 	button_page.setup_page(self)
 	scroll_page.setup_page(self)
+	slider_page.setup_page(self)
+	input_page.setup_page(self)
+	grid_page.setup_page(self)
+
+	init_top_panel(self)
 
 	-- Refresh state
 	on_control_button(self, 0)

example/init.script

@@ -1,5 +1,4 @@
 local druid = require("druid.druid")
-local const = require("druid.const")
 local lang = require("example.lang")
 
 
@@ -8,13 +7,11 @@ local function setup_druid()
 		sound.play("kenney:/sound#" .. name)
 	end)
 
-	druid.set_text_function(function(lang_id)
-		return lang.get_locale(lang_id)
+	druid.set_text_function(function(lang_id, ...)
+		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
 
 

example/lang.lua

@@ -1,4 +1,4 @@
-local const = require("druid.const")
+local druid = require("druid.druid")
 
 local M = {}
 
@@ -7,6 +7,9 @@ local en = {
 	texts_page = "Text page",
 	button_page = "Button page",
 	scroll_page = "Scroll page",
+	slider_page = "Slider page",
+	input_page = "Input page",
+	grid_page = "Grid page",
 	ui_section_button = "Button",
 	ui_section_text = "Text",
 	ui_section_timer = "Timer",
@@ -23,6 +26,9 @@ local ru = {
 	texts_page = "Текст",
 	button_page = "Кнопки",
 	scroll_page = "Скролл",
+	slider_page = "Слайдеры",
+	input_page = "Текст. ввод",
+	grid_page = "Сетка",
 	ui_section_button = "Кнопка",
 	ui_section_text = "Текст",
 	ui_section_timer = "Таймер",
@@ -38,14 +44,20 @@ local ru = {
 local data = en
 
 
-function M.get_locale(lang_id)
-	return data[lang_id] or lang_id
+function M.get_locale(lang_id, ...)
+	local localized_text = data[lang_id] or lang_id
+
+	if #{...} > 0 then
+		localized_text = string.format(localized_text, ...)
+	end
+
+	return localized_text
 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
+return M

example/page/button_page.lua

@@ -42,6 +42,9 @@ local function setup_buttons(self)
 	button_space:set_key_trigger("key_space")
 	button_space.on_long_click:subscribe(long_tap_callback)
 	button_space.on_double_click:subscribe(double_tap_callback)
+
+	-- Button with another node for animating
+	self.druid:new_button("button_anim/button", usual_callback, nil, "anim_node_icon")
 end
 
 

example/page/grid_page.lua

@@ -0,0 +1,176 @@
+local M = {}
+
+
+local function simple_animate(node, pos)
+	gui.animate(node, "position", pos, gui.EASING_OUTSINE, 0.2)
+end
+
+
+local function remove_node(self, button, is_shift)
+	gui.delete_node(button.node)
+
+	self.druid:remove(button)
+	local index = self.grid_static_grid:get_index_by_node(button.node)
+	self.grid_static_grid:remove(index, is_shift)
+	for i = 1, #self.grid_node_buttons do
+		if self.grid_node_buttons[i] == button then
+			table.remove(self.grid_node_buttons, i)
+			break
+		end
+	end
+end
+
+
+local function add_node(self, index)
+	local prefab = gui.get_node("grid_nodes_prefab")
+	local cloned = gui.clone_tree(prefab)
+	gui.set_enabled(cloned["grid_nodes_prefab"], true)
+
+	local button = self.druid:new_button(cloned["grid_nodes_prefab"], function(_, params, button)
+		remove_node(self, button, true)
+	end)
+	button.on_long_click:subscribe(function()
+		remove_node(self, button)
+	end)
+	button:set_click_zone(self.grid_static_scroll.view_node)
+
+	table.insert(self.grid_node_buttons, button)
+
+	self.grid_static_grid:add(cloned["grid_nodes_prefab"], index)
+end
+
+
+local function clear_nodes(self)
+	local nodes = self.grid_static_grid.nodes
+	for i, node in pairs(nodes) do
+		gui.delete_node(node)
+	end
+
+	for i = 1, #self.grid_node_buttons do
+		self.druid:remove(self.grid_node_buttons[i])
+	end
+	self.grid_node_buttons = {}
+
+	self.grid_static_grid:clear()
+end
+
+
+local function init_static_grid(self)
+	self.grid_node_buttons = {}
+	gui.set_enabled(gui.get_node("grid_nodes_prefab"), false)
+
+	for i = 1, 15 do
+		add_node(self, i)
+	end
+
+	self.druid:new_button("button_add/button", function()
+		add_node(self)
+	end)
+	self.druid:new_button("button_clear/button", function()
+		clear_nodes(self)
+	end)
+end
+
+
+local function remove_dynamic_node(self, button, is_shift_left)
+	gui.delete_node(button.node)
+
+	self.druid:remove(button)
+	local index = self.grid_dynamic_grid:get_index_by_node(button.node)
+	self.grid_dynamic_grid:remove(index, is_shift_left)
+	for i = 1, #self.dynamic_node_buttons do
+		if self.dynamic_node_buttons[i] == button then
+			table.remove(self.dynamic_node_buttons, i)
+			break
+		end
+	end
+end
+
+
+local function add_node_dynamic(self, index, is_shift_left)
+	local node = gui.clone(self.prefab_dynamic)
+	gui.set_enabled(node, true)
+	gui.set_size(node, vmath.vector3(250, math.random(60, 150), 0))
+	self.grid_dynamic_grid:add(node, index, is_shift_left)
+
+	local button = self.druid:new_button(node, function(_, params, button)
+		remove_dynamic_node(self, button)
+	end)
+	button.on_long_click:subscribe(function()
+		remove_dynamic_node(self, button, true)
+	end)
+	button:set_click_zone(self.grid_dynamic_scroll.view_node)
+	table.insert(self.dynamic_node_buttons, button)
+end
+
+
+local function add_node_dynamic_hor(self, index)
+	local node = gui.clone(self.prefab_hor_dynamic)
+	gui.set_enabled(node, true)
+	gui.set_size(node, vmath.vector3(80 + math.random(0, 80), 80, 0))
+	self.grid_dynamic_hor_grid:add(node, index)
+end
+
+
+local function init_dynamic_grid(self)
+	-- Vertical horizontal grid
+	self.dynamic_node_buttons = {}
+
+	self.prefab_dynamic = gui.get_node("grid_dynamic_prefab")
+	gui.set_enabled(self.prefab_dynamic, false)
+
+	for i = 1, 10 do
+		add_node_dynamic(self, i)
+	end
+	self.druid:new_button("button_add_start_dynamic/button", function()
+		local start_index = (self.grid_dynamic_grid.first_index or 2) - 1
+		add_node_dynamic(self, start_index)
+	end)
+	self.druid:new_button("button_add_end_dynamic/button", function()
+		add_node_dynamic(self)
+	end)
+
+	-- Horizontal dynamic grid
+	self.prefab_hor_dynamic = gui.get_node("grid_dynamic_hor_prefab")
+	gui.set_enabled(self.prefab_hor_dynamic, false)
+
+	for i = 1, 10 do
+		add_node_dynamic_hor(self, i)
+	end
+
+	self.druid:new_button("button_add_start_dynamic_hor/button", function()
+		add_node_dynamic_hor(self, 1)
+	end)
+	self.druid:new_button("button_add_end_dynamic_hor/button", function()
+		add_node_dynamic_hor(self)
+	end)
+end
+
+
+function M.setup_page(self)
+	self.grid_page_scroll = self.druid:new_scroll("grid_page", "grid_page_content")
+
+	self.grid_static_grid = self.druid:new_static_grid("grid_nodes", "grid_nodes_prefab", 5)
+		:set_position_function(simple_animate)
+	self.grid_static_scroll = self.druid:new_scroll("grid_nodes_view", "grid_nodes")
+		:set_horizontal_scroll(false)
+		:bind_grid(self.grid_static_grid)
+
+	self.grid_dynamic_grid = self.druid:new_dynamic_grid("grid_dynamic_nodes")
+		:set_position_function(simple_animate)
+	self.grid_dynamic_scroll = self.druid:new_scroll("grid_dynamic_view", "grid_dynamic_nodes")
+		:set_horizontal_scroll(false)
+		:bind_grid(self.grid_dynamic_grid)
+
+	self.grid_dynamic_hor_grid = self.druid:new_dynamic_grid("grid_dynamic_hor_nodes")
+		:set_position_function(simple_animate)
+	self.grid_dynamic_hor_scroll = self.druid:new_scroll("grid_dynamic_hor_view", "grid_dynamic_hor_nodes")
+		:set_vertical_scroll(false)
+		:bind_grid(self.grid_dynamic_hor_grid)
+
+	init_static_grid(self)
+	init_dynamic_grid(self)
+end
+
+
+return M

example/page/input_page.lua

@@ -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

example/page/main_page.lua

@@ -50,22 +50,6 @@ local function setup_progress(self)
 end
 
 
-local function setup_grid(self)
-	local grid = self.druid:new_grid("grid", "button_template/button", 3)
-
-	for i = 1, 12 do
-		local nodes = gui.clone_tree(gui.get_node("button_template/button"))
-
-		local root = nodes["button_template/button"]
-		self.druid:new_button(root, function(context, param)
-			grid:set_offset(vmath.vector3(param))
-		end, i)
-		self.druid:new_text(nodes["button_template/text"], "Grid"..i)
-		grid:add(root)
-	end
-end
-
-
 local function setup_slider(self)
 	local slider = self.druid:new_slider("slider_pin", vmath.vector3(95, 0, 0), function(_, value)
 		gui.set_text(gui.get_node("text_progress_slider"), math.ceil(value * 100) .. "%")
@@ -96,28 +80,27 @@ local function setup_timer(self)
 end
 
 
-local function setup_scroll(self)
-	self.scroll = self.druid:new_scroll("scroll_content", "main_page")
-end
-
-
 local function setup_back_handler(self)
 	self.druid:new_back_handler(empty_callback, "back button")
 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)
 
 	setup_button(self)
 	setup_progress(self)
-	setup_grid(self)
 	setup_timer(self)
 	setup_checkbox(self)
-	setup_scroll(self)
 	setup_slider(self)
 	setup_back_handler(self)
+	setup_input(self)
 end
 
 

example/page/scroll.lua

@@ -1,46 +0,0 @@
-local M = {}
-
-
-local function init_grid(self)
-	local prefab = gui.get_node("grid_prefab")
-
-	local grid_scroll = self.druid:new_scroll("grid_content", "scroll_with_grid_size")
-	local grid = self.druid:new_grid("grid_content", "grid_prefab", 20)
-	grid:set_anchor(vmath.vector3(0, 0.5, 0))
-
-	for i = 1, 40 do
-		local clone_prefab = gui.clone_tree(prefab)
-
-		grid:add(clone_prefab["grid_prefab"])
-		gui.set_text(clone_prefab["grid_prefab_text"], "Node " .. i)
-
-		local button = self.druid:new_button(clone_prefab["grid_button"], function()
-			local position = gui.get_position(clone_prefab["grid_prefab"])
-			position.x = -position.x
-			grid_scroll:scroll_to(position)
-		end)
-		button:set_click_zone(gui.get_node("scroll_with_grid_size"))
-	end
-
-	gui.set_enabled(prefab, false)
-
-	grid_scroll:set_border(grid:get_size())
-
-	local scroll_slider = self.druid:new_slider("grid_scroll_pin", vmath.vector3(300, 0, 0), function(_, value)
-		grid_scroll:scroll_to_percent(vmath.vector3(value, 0, 0), true)
-	end)
-
-	grid_scroll.on_scroll:subscribe(function(_, point)
-		scroll_slider:set(grid_scroll:get_scroll_percent().x, true)
-	end)
-end
-
-
-function M.setup_page(self)
-	self.druid:new_scroll("scroll_page_content", "scroll_page")
-	self.druid:new_scroll("simple_scroll_content", "simple_scroll_input")
-	init_grid(self)
-end
-
-
-return M

example/page/scroll_page.lua

@@ -0,0 +1,71 @@
+local M = {}
+
+
+local function init_scroll_with_grid(self)
+	local prefab = gui.get_node("grid_prefab")
+
+	local grid_scroll = self.druid:new_scroll("scroll_with_grid_size", "grid_content")
+	local grid = self.druid:new_static_grid("grid_content", "grid_prefab", 20)
+
+	for i = 1, 40 do
+		local clone_prefab = gui.clone_tree(prefab)
+
+		grid:add(clone_prefab["grid_prefab"])
+		gui.set_text(clone_prefab["grid_prefab_text"], "Node " .. i)
+
+		local button = self.druid:new_button(clone_prefab["grid_button"], function()
+			local position = gui.get_position(clone_prefab["grid_prefab"])
+			grid_scroll:scroll_to(position)
+		end)
+		button:set_click_zone(gui.get_node("scroll_with_grid_size"))
+	end
+
+	gui.set_enabled(prefab, false)
+
+	grid_scroll:set_size(grid:get_size())
+
+	local scroll_slider = self.druid:new_slider("grid_scroll_pin", vmath.vector3(287, 0, 0), function(_, value)
+		grid_scroll:scroll_to_percent(vmath.vector3(value, 0, 0), true)
+	end)
+
+	grid_scroll.on_scroll:subscribe(function(_, point)
+		scroll_slider:set(grid_scroll:get_percent().x, true)
+	end)
+end
+
+
+function M.setup_page(self)
+	-- Usual scroll for whole page
+	self.druid:new_scroll("scroll_page", "scroll_page_content")
+
+	-- Simple scroll with no adjust
+	self.druid:new_scroll("simple_scroll_input", "simple_scroll_content")
+
+	-- Scroll with grid example
+	init_scroll_with_grid(self)
+
+	-- Scroll contain children scrolls:
+	-- Parent scroll
+	self.druid:new_scroll("children_scroll", "children_scroll_content")
+	-- Childre scrolls
+	self.druid:new_scroll("children_scroll_1", "children_scroll_content_1")
+	self.druid:new_scroll("children_scroll_2", "children_scroll_content_2")
+	self.druid:new_scroll("children_scroll_3", "children_scroll_content_3")
+
+	-- Content with less size than view
+	self.druid:new_scroll("scroll_smaller_view", "scroll_smaller_content")
+		:set_extra_stretch_size(0)
+		:set_inert(false)
+
+	-- Scroll with points of interests
+	self.druid:new_scroll("scroll_with_points", "scroll_with_points_content")
+		:set_points({
+			vmath.vector3(300, 0, 0),
+			vmath.vector3(900, 0, 0),
+			vmath.vector3(1500, 0, 0),
+			vmath.vector3(2100, 0, 0),
+		})
+end
+
+
+return M

example/page/slider_page.lua

@@ -0,0 +1,20 @@
+local M = {}
+
+
+function M.setup_page(self)
+	local slider = self.druid:new_slider("slider_simple_pin", vmath.vector3(95, 0, 0), function(_, value)
+		gui.set_text(gui.get_node("slider_simple_text"), math.ceil(value * 100) .. "%")
+	end)
+
+	slider:set(0.2)
+
+	local slider_notched = self.druid:new_slider("slider_notched_pin", vmath.vector3(95, 0, 0), function(_, value)
+		gui.set_text(gui.get_node("slider_notched_text"), math.ceil(value * 100) .. "%")
+	end)
+
+	slider_notched:set_steps({0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1})
+	slider_notched:set(0.2)
+end
+
+
+return M