Partydeck/Druid-Extension
3
0
Fork 0
mirror of https://github.com/Insality/druid synced 2025-06-27 10:27:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #233 from Insality/develop

Browse Source 
Merge Druid 0.11 to Master
This commit is contained in:
Maksim Tuprikov 2023-08-05 19:44:01 +03:00 committed by GitHub
commit 03ffd943df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
144 changed files with 19163 additions and 2583 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.github/FUNDING.yml vendored Normal file
View File

@ -0,0 +1,5 @@
# These are supported funding model platforms
github: insality # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
ko_fi: insality # Replace with a single Ko-fi username
custom: ['https://www.buymeacoffee.com/insality']

6
.luacheckrc
View File

@ -2,7 +2,7 @@ std = "max"
files['.luacheckrc'].global = false files['.luacheckrc'].global = false
unused_args = false unused_args = false
max_code_line_length = 90 max_code_line_length = 120
max_comment_line_length = false max_comment_line_length = false
globals = { globals = {
@ -49,4 +49,8 @@ globals = {
"resource", "resource",
"defos", "defos",
"html5", "html5",
"describe",
"before",
"after",
"it",
} }

300
README.md
View File

@ -4,192 +4,150 @@
[![Github-sponsors](https://img.shields.io/badge/sponsor-30363D?style=for-the-badge&logo=GitHub-Sponsors&logoColor=#EA4AAA)](https://github.com/sponsors/insality) [![Ko-Fi](https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge&logo=ko-fi&logoColor=white)](https://ko-fi.com/insality) [![BuyMeACoffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/insality) [![Github-sponsors](https://img.shields.io/badge/sponsor-30363D?style=for-the-badge&logo=GitHub-Sponsors&logoColor=#EA4AAA)](https://github.com/sponsors/insality) [![Ko-Fi](https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge&logo=ko-fi&logoColor=white)](https://ko-fi.com/insality) [![BuyMeACoffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/insality)
[![GitHub release (latest by date)](https://img.shields.io/github/v/release/insality/druid)](https://github.com/Insality/druid/releases) [![GitHub release (latest by date)](https://img.shields.io/github/v/release/insality/druid)](https://github.com/Insality/druid/releases)
[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/insality/druid/Run%20tests)](https://github.com/Insality/druid/actions) [![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/insality/druid/ci-workflow.yml?branch=master)](https://github.com/Insality/druid/actions)
[![codecov](https://codecov.io/gh/Insality/druid/branch/master/graph/badge.svg)](https://codecov.io/gh/Insality/druid) [![codecov](https://codecov.io/gh/Insality/druid/branch/master/graph/badge.svg)](https://codecov.io/gh/Insality/druid)
**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. **Druid** - powerful **Defold** component UI framework that empowers developers to create stunning and customizable GUIs by leveraging a wide range of embedded components or effortlessly designing their own game-specific components.
Try the [**HTML5 version**](https://insality.github.io/druid/druid/) of the **Druid** example app.
## Setup ## Setup
### Dependency ### 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: To integrate the **Druid** extension into your own project, add this project as a [dependency](https://www.defold.com/manuals/libraries/) in your **Defold** game. Open your `game.project` file and add the following line to the dependencies field under the project section:
> [https://github.com/Insality/druid/archive/master.zip](https://github.com/Insality/druid/archive/master.zip) **Druid v0.11.0**
Or point to the ZIP file of a [specific release](https://github.com/Insality/druid/releases). > [https://github.com/Insality/druid/archive/refs/tags/0.11.0.zip](https://github.com/Insality/druid/archive/refs/tags/0.11.0.zip)
### Input bindings Here is a list of [all releases](https://github.com/Insality/druid/releases).
**Druid** requires the following input bindings: Size: **67.16 KB**
- Mouse trigger - `Button 1` -> `touch` _For basic input components_ > The size metrics exlcude the extended components, which are including only on demand.
- Mouse trigger - `Wheel up` -> `scroll_up` _For scroll component_
- Mouse trigger - `Wheel down` -> `scroll_down` _For scroll component_
- Key trigger - `Backspace` -> `key_backspace` _For back_handler component, input component_
- Key trigger - `Back` -> `key_back` _For back_handler component, Android back button, input component_
- Key trigger - `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) ### Input Bindings
![](media/input_binding_1.png) **Druid** utilizes the `/builtins/input/all.input_binding` input bindings. For custom input bindings, refer to the Input Binding section in the **_[Advanced Setup](docs_md/advanced-setup.md#input-bindings)_**.
### Change key bindings [optional] ## Usage
If you have to use your own key bindings (and key name), you can change it in your *game.project* file.
Here is current default values for key bindings: ### Basic usage
```
[druid]
input_text = text
input_touch = touch
input_marked_text = marked_text
input_key_esc = key_esc
input_key_back = key_back
input_key_enter = key_enter
input_key_backspace = key_backspace
input_multitouch = multitouch
input_scroll_up = scroll_up
input_scroll_down = scroll_down
```
To utilize **Druid**, begin by creating a **Druid** instance to instantiate components and include the main functions of **Druid**: *update*, *final*, *on_message*, and *on_input*.
### Input capturing [optional] When using **Druid** components, provide a node name string as an argument. If you don't have the node name available in some cases, you can pass `gui.get_node()` instead.
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")` All **Druid** and component methods are invoked using the `:` operator, such as `self.druid:new_button()`.
If you don't need this behaviour, you can disable it by setting `druid.no_auto_input` field in _game.project_:
```
[druid]
no_auto_input = 1
```
### Template name check [optional]
By default, **Druid** will auto check the parent component template name to build the full template name for component.
If for some reason you want to pass the full template name by yourself, you can disable it by setting `druid.no_auto_template` field in _game.project_:
```
[druid]
no_auto_template = 1
```
### Stencil check [optional]
When creating input components inside stencil nodes, **Druid** automatically setup `component:set_click_zone()` on _late_init_ component step to restrict input clicks outside this stencil zone.
To disable this feature add next field in your _game.project_ file
```
[druid]
no_stencil_check = 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
Here is full **Druid** components list:
| Name | Description | API page | Example Link | Is Basic component[^1] | Preview |
|------|-------------|----------|------------|-------------|---------|
| **[Button](docs_md/01-components.md#button)** | Basic input component. Handles all types of interactions: click, long click, hold click, double click, etc | [Button API](https://insality.github.io/druid/modules/Button.html) | [Button Example](https://insality.github.io/druid/druid/?example=general_buttons) | ✅ | <img src="media/preview/button.gif" width="200" height="100"> |
| **[Text](docs_md/01-components.md#text)** | Wrap on GUI text node, handle different text size adjusting, providing additional text API | [Text API](https://insality.github.io/druid/modules/Button.html) | [Text Example](https://insality.github.io/druid/druid/?example=texts_general) | ✅ | <img src="media/preview/text.gif" width="200" height="100"> |
| **[Scroll](docs_md/01-components.md#scroll)** | Scroll component | [Scroll API](https://insality.github.io/druid/modules/Scroll.html) | [Scroll Example](https://insality.github.io/druid/druid/?example=general_scroll) | ✅ | <img src="media/preview/scroll.gif" width="200" height="100"> |
| **[Blocker](docs_md/01-components.md#blocker)** | Block user input in node zone area | [Blocker API](https://insality.github.io/druid/modules/Blocker.html) | ❌ | ✅ | |
| **[Back Handler](docs_md/01-components.md#back-handler)** | Handle back button (Android back button, backspace key) | [Back Handler API](https://insality.github.io/druid/modules/BackHandler.html) | ❌ | ✅ | |
| **[Static Grid](docs_md/01-components.md#static-grid)** | Component to manage node positions with equal sizes | [Static Grid API](https://insality.github.io/druid/modules/StaticGrid.html) | [Static Gid Example](https://insality.github.io/druid/druid/?example=general_grid) | ✅ | <img src="media/preview/static_grid.gif" width="200" height="100"> |
| **[Hover](docs_md/01-components.md#hover)** | Handle hover node state on node | [Hover API](https://insality.github.io/druid/modules/Hover.html) | ❌ | ✅ | <img src="media/preview/hover.gif" width="200" height="100"> |
| **[Swipe](docs_md/01-components.md#swipe)** | Handle swipe gestures on node | [Swipe API](https://insality.github.io/druid/modules/Swipe.html) | [Swipe Example](https://insality.github.io/druid/druid/?example=general_swipe) | ✅ | <img src="media/preview/swipe.gif" width="200" height="100"> |
| **[Drag](docs_md/01-components.md#drag)** | Handle drag input on node | [Drag API](https://insality.github.io/druid/modules/Drag.html) | [Drag Example](https://insality.github.io/druid/druid/?example=general_drag) | ✅ | <img src="media/preview/drag.gif" width="200" height="100"> |
| **[Checkbox](docs_md/01-components.md#checkbox)** | Checkbox component | [Checkbox API](https://insality.github.io/druid/modules/Checkbox.html) | [Checkbox Example](https://insality.github.io/druid/druid/?example=general_checkboxes) | ❌ | <img src="media/preview/checkbox.gif" width="200" height="100"> |
| **[Checkbox group](docs_md/01-components.md#checkbox-group)** | Several checkboxes in one group | [Checkbox group API](https://insality.github.io/druid/modules/CheckboxGroup.html) | [Checkbox group Example](https://insality.github.io/druid/druid/?example=general_checkboxes) | ❌ | <img src="media/preview/checkbox_group.gif" width="200" height="100"> |
| **[Radio group](docs_md/01-components.md#radio-group)** | Several checkboxes in one group with a single choice | [Radio group API](https://insality.github.io/druid/modules/RadioGroup.html) | [Radio Group Example](https://insality.github.io/druid/druid/?example=general_checkboxes) | ❌ | <img src="media/preview/radio_group.gif" width="200" height="100"> |
| **[Dynamic Grid](docs_md/01-components.md#dynamic-grid)** | Component to manage node positions with different sizes. Only in one row or column | [Dynamic Grid API](https://insality.github.io/druid/modules/DynamicGrid.html) | [Dynamic Grid Example](https://insality.github.io/druid/druid/?example=general_grid) | ❌ | <img src="media/preview/dynamic_grid.gif" width="200" height="100"> |
| **[Data List](docs_md/01-components.md#data-list)** | Component to manage data for huge datasets in scroll | [Data List API](https://insality.github.io/druid/modules/DataList.html) | [Data List Example](https://insality.github.io/druid/druid/?example=general_data_list) | ❌ | <img src="media/preview/data_list.gif" width="200" height="100"> |
| **[Input](docs_md/01-components.md#input)** | User text input component | [Input API](https://insality.github.io/druid/modules/Input.html) | [Input Example](https://insality.github.io/druid/druid/?example=general_input) | ❌ | <img src="media/preview/input.gif" width="200" height="100"> |
| **[Lang text](docs_md/01-components.md#lang-text)** | Wrap on Text component to handle localization | [Lang Text API](https://insality.github.io/druid/modules/LangText.html) | ❌ | ❌ | <img src="media/preview/lang_text.gif" width="200" height="100"> |
| **[Progress](docs_md/01-components.md#progress)** | Progress bar component | [Progress API](https://insality.github.io/druid/modules/Progress.html) | [Progress Example](https://insality.github.io/druid/druid/?example=general_progress_bar) | ❌ | <img src="media/preview/progress.gif" width="200" height="100"> |
| **[Slider](docs_md/01-components.md#slider)** | Slider component | [Slider API](https://insality.github.io/druid/modules/Slider.html) | [Slider Example](https://insality.github.io/druid/druid/?example=general_sliders) | ❌ | <img src="media/preview/slider.gif" width="200" height="100"> |
| **[Timer](docs_md/01-components.md#timer)** | Handle timers on GUI text node | [Timer API](https://insality.github.io/druid/modules/Timer.html) | ❌ | ❌ | <img src="media/preview/timer.gif" width="200" height="100"> |
| **[Hotkey](docs_md/01-components.md#hotkey)** | Handle keyboard hotkeys with key modificators | [Hotkey API](https://insality.github.io/druid/modules/Hotkey.html) | [Hotkey Example](https://insality.github.io/druid/druid/?example=general_hokey) | ❌ | <img src="media/preview/hotkey.gif" width="200" height="100"> |
| **[Layout](docs_md/01-components.md#layout)** | Handle node size depends on layout mode and screen aspect ratio | [Layout API](https://insality.github.io/druid/modules/Layout.html) | [Layout Example](https://insality.github.io/druid/druid/?example=general_layout) | ❌ | <img src="media/preview/layout.gif" width="200" height="100"> |
For a complete overview, see: **_[components.md](docs_md/01-components.md)_**.
[^1]: Non basic components before use should be registered first to be included in build
## Basic usage
To use **Druid**, first you should create a Druid instance to spawn components and add Druids main engine functions: *update*, *final*, *on_message* and *on_input*.
All **Druid** components take node name string as arguments, don't do `gui.get_node()` before.
All **Druid** and component methods are called with `:` like `self.druid:new_button()`.
```lua ```lua
local druid = require("druid.druid") local druid = require("druid.druid")
local function button_callback(self) -- All component callbacks pass "self" as first argument
print("Button was clicked!") -- This "self" is a context data passed in `druid.new(context)`
local function on_button_callback(self)
print("The button clicked!")
end end
function init(self) function init(self)
self.druid = druid.new(self) self.druid = druid.new(self)
self.druid:new_button("button_node_name", button_callback) self.button = self.druid:new_button("button_node_name", on_button_callback)
end end
-- "final" is a required function for the correct Druid workflow
function final(self) function final(self)
self.druid:final() self.druid:final()
end end
-- "update" is used in progress bar, scroll, and timer basic components
function update(self, dt)
self.druid:update(dt)
end
-- "on_message" is used for specific Druid events, like language change or layout change
function on_message(self, message_id, message, sender) function on_message(self, message_id, message, sender)
self.druid:on_message(message_id, message, sender) self.druid:on_message(message_id, message, sender)
end end
-- "on_input" is used in almost all Druid components
-- The return value from `druid:on_input` is required!
function on_input(self, action_id, action) function on_input(self, action_id, action)
return self.druid:on_input(action_id, action) return self.druid:on_input(action_id, action)
end end
``` ```
For all **Druid** instance functions, [see here](https://insality.github.io/druid/modules/druid_instance.html). For all **Druid** instance functions, [see here](https://insality.github.io/druid/modules/DruidInstance.html).
### API Documentation
**Druid** offers a wide range of components and functions. To facilitate usage, **Druid** provides comprehensive API documentation with examples and annotations.
Start reading the API documentation [here](https://insality.github.io/druid/modules/Druid.html).
**Druid** provide the *EmmyLua* annotations to add autocomplete inside your IDE. Check [EmmyLua Setup here](docs_md/advanced-setup.md#emmylua-annotations).
### Create custom components
If you want to create your own components, refer to the [Create Custom Components](docs_md/02-creating_custom_components.md) section in the documentation.
Custom components are one of the most powerful features of **Druid**. They allow you to create your own components effortlessly and utilize them in your game.
## Druid Components
Here is full **Druid** components list.
### Basic Components
> Basic components always included in the build and available for use.
| Name | Description | Example | <div style="width:200px">Preview</div> |
|------|-------------|---------|---------|
| **[Button](https://insality.github.io/druid/modules/Button.html)** | Logic over GUI Node. Handle the user click interactions: click, long click, double click, etc. | [Button Example](https://insality.github.io/druid/druid/?example=general_buttons) | <img src="media/preview/button.gif" width="200" height="100"> |
| **[Text](https://insality.github.io/druid/modules/Text.html)** | Logic over GUI Text. By default Text component fit the text inside text node size area with different adjust modes. | [Text Example](https://insality.github.io/druid/druid/?example=texts_general) | <img src="media/preview/text.gif" width="200" height="100"> |
| **[Scroll](https://insality.github.io/druid/modules/Scroll.html)** | Logic over two GUI Nodes: input and content. Provides basic behaviour for scrollable content. | [Scroll Example](https://insality.github.io/druid/druid/?example=general_scroll) | <img src="media/preview/scroll.gif" width="200" height="100"> |
| **[Blocker](https://insality.github.io/druid/modules/Blocker.html)** | Logic over GUI Node. Don't pass any user input below node area size. | ❌ | |
| **[Back Handler](https://insality.github.io/druid/modules/BackHandler.html)** | Call callback on user "Back" action. It's a Android back button or keyboard backspace key | ❌ | |
| **[Static Grid](https://insality.github.io/druid/modules/StaticGrid.html)** | Logic over GUI Node. Component to manage node positions with all equal node sizes. | [Static Gid Example](https://insality.github.io/druid/druid/?example=general_grid) | <img src="media/preview/static_grid.gif" width="200" height="100"> |
| **[Hover](https://insality.github.io/druid/modules/Hover.html)** | Logic over GUI Node. Handle hover action over node. For both: mobile touch and mouse cursor. | ❌ | <img src="media/preview/hover.gif" width="200" height="100"> |
| **[Swipe](https://insality.github.io/druid/modules/Swipe.html)** | Logic over GUI Node. Handle swipe gestures over node. | [Swipe Example](https://insality.github.io/druid/druid/?example=general_swipe) | <img src="media/preview/swipe.gif" width="200" height="100"> |
| **[Drag](https://insality.github.io/druid/modules/Drag.html)** | Logic over GUI Node. Handle drag input actions. Can be useful to make on screen controlls. | [Drag Example](https://insality.github.io/druid/druid/?example=general_drag) | <img src="media/preview/drag.gif" width="200" height="100"> |
### Extended components
> Extended components before usage should be registered in **Druid** with [`druid.register()`](https://insality.github.io/druid/modules/Druid.html#druid.register) function.
> On usage of unregistered **Druid** component the next log will be shown in the console.
```
local data_list = require("druid.extended.data_list")
druid.register("data_list", data_list)
```
| Name | Description | Example | <div style="width:200px">Preview</div> |
|------|-------------|---------|---------|
| **[Checkbox](https://insality.github.io/druid/modules/Checkbox.html)** | Switch node state on click event. | [Checkbox Example](https://insality.github.io/druid/druid/?example=general_checkboxes) | <img src="media/preview/checkbox.gif" width="200" height="100"> |
| **[Checkbox group](https://insality.github.io/druid/modules/CheckboxGroup.html)** | Group of checkbox components. | [Checkbox group Example](https://insality.github.io/druid/druid/?example=general_checkboxes) | <img src="media/preview/checkbox_group.gif" width="200" height="100"> |
| **[Radio group](https://insality.github.io/druid/modules/RadioGroup.html)** | Like checkbox group but with single choise only. | [Radio Group Example](https://insality.github.io/druid/druid/?example=general_checkboxes) | <img src="media/preview/radio_group.gif" width="200" height="100"> |
| **[Dynamic Grid](https://insality.github.io/druid/modules/DynamicGrid.html)** | Logic over GUI Node. Component to manage node positions with all different node sizes. Only one direction: horizontal or vertical. | [Dynamic Grid Example](https://insality.github.io/druid/druid/?example=general_grid) | <img src="media/preview/dynamic_grid.gif" width="200" height="100"> |
| **[Data List](https://insality.github.io/druid/modules/DataList.html)** | Logic over Scroll and Grid components. Create only visible GUI nodes or components to make "infinity" scroll befaviour | [Data List Example](https://insality.github.io/druid/druid/?example=general_data_list) | <img src="media/preview/data_list.gif" width="200" height="100"> |
| **[Input](https://insality.github.io/druid/modules/Input.html)** | Logic over GUI Node and GUI Text (or Text component). Provides basic user text input. | [Input Example](https://insality.github.io/druid/druid/?example=general_input) | <img src="media/preview/input.gif" width="200" height="100"> |
| **[Lang text](https://insality.github.io/druid/modules/LangText.html)** | Logic over Text component to handle localization. Can be translated in real-time with `druid.on_language_change` | ❌ | <img src="media/preview/lang_text.gif" width="200" height="100"> |
| **[Progress](https://insality.github.io/druid/modules/Progress.html)** | Logic over GUI Node. Handle node size and scale to handle progress node size. | [Progress Example](https://insality.github.io/druid/druid/?example=general_progress_bar) | <img src="media/preview/progress.gif" width="200" height="100"> |
| **[Slider](https://insality.github.io/druid/modules/Slider.html)** | Logic over GUI Node. Handle draggable node with position restrictions. | [Slider Example](https://insality.github.io/druid/druid/?example=general_sliders) | <img src="media/preview/slider.gif" width="200" height="100"> |
| **[Timer](https://insality.github.io/druid/modules/Timer.html)** | Logic over GUI Text. Handle basic timer functions. | ❌ | <img src="media/preview/timer.gif" width="200" height="100"> |
| **[Hotkey](https://insality.github.io/druid/modules/Hotkey.html)** | Allow to set callbacks for keyboard hotkeys with key modificators. | [Hotkey Example](https://insality.github.io/druid/druid/?example=general_hotkey) | <img src="media/preview/hotkey.gif" width="200" height="100"> |
| **[Layout](https://insality.github.io/druid/modules/Layout.html)** | Logic over GUI Node. Handle node size depends on layout mode and screen aspect ratio. Contains helpers to build more complex UI layout. | [Layout Example](https://insality.github.io/druid/druid/?example=general_layout) | <img src="media/preview/layout.gif" width="200" height="100"> |
For a complete overview, see: **_[components.md](docs_md/01-components.md)_**.
## Druid Events ## Druid Events
Any **Druid** components as callbacks use [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 to those events with the following API: Any **Druid** components as callbacks use [Druid Events](https://insality.github.io/druid/modules/DruidEvent.html). In component API ([button example](https://insality.github.io/druid/modules/Button.html#on_click)) pointed list of component events. You can manually subscribe to these events with the following API:
- **event:subscribe**(callback) - **event:subscribe**(callback)
@ -199,71 +157,37 @@ Any **Druid** components as callbacks use [Druid Events](https://insality.github
You can subscribe several callbacks to a single event. You can subscribe several callbacks to a single event.
## Druid Lifecycle
Here is full Druid lifecycle setup for 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* is a **required** function for a correct Druid lifecycle
- *on_input* is used in almost all Druid components
- *update* in used in progress bar, scroll and timer base components
- *on_message* is used for specific Druid events, like language change or layout change
It is recommended to fully integrate all **Druid** lifecycles functions.
## Details ## Details
- Druid input goes as stack. Last created button will checked first. So create your GUI from back - **Druid** processes input in a stack-based manner. The most recently created button will be checked first. Create your input GUI components from back to front.
- Don't forget about `return` in `on_input`: `return self.druid:on_input()`. It is needed if you have more than 1 acquire inputs (several Druid, other input system, etc) - Remember to include `return` in the `on_input` function: `return self.druid:on_input()`. This is necessary if you have multiple input sources (multiple Druid instances, other input systems, etc.).
- By default, Druid will automatically _acquire_input_focus_. So you don't need do it manually. But only if you have components which require _on_input_ - Druid automatically calls `acquire_input_focus` if you have input components. Therefore, manual calling of `acquire_input_focus` is not required.
- If you want to delete a node which has a Druid component, don't forget to remove it via `druid:remove(component)` - When deleting a **Druid** component node, make sure to remove it using `druid:remove(component)`.
[See full FAQ here](docs_md/FAQ.md)
## Examples ## Examples
See the [**example folder**](https://github.com/Insality/druid/tree/develop/example) for examples of how to use **Druid** Try the [**HTML5 version**](https://insality.github.io/druid/druid/) of the **Druid** example app.
Try the [**HTML5 version**](https://insality.github.io/druid/druid/) of the **Druid** example app Each example page provides a direct link to the corresponding example code, making it easier for you to understand how to use **Druid**.
Or refer directly to the [**example folder**](https://github.com/Insality/druid/tree/develop/example) for code examples demonstrating how to use **Druid**.
If you want to see examples of GUIs created with Druid, please refer to the [game_examples.md](docs_md/game_examples.md) file.
## Documentation ## Documentation
To better understand **Druid**, read the following documentation: To better understand **Druid**, read the following documentation:
- [How To GUI in Defold](https://forum.defold.com/t/how-to-gui-in-defold/73256)
- [Druid components](docs_md/01-components.md) - [Druid components](docs_md/01-components.md)
- [Create custom components](docs_md/02-creating_custom_components.md) - [Create custom components](docs_md/02-creating_custom_components.md)
- [See FAQ article](docs_md/FAQ.md) - [See FAQ article](docs_md/FAQ.md)
- [Druid styles](docs_md/03-styles.md) - [Druid styles](docs_md/03-styles.md)
You can fund the full **Druid** documentation here: You can find the full **Druid** [documentation here](https://insality.github.io/druid/modules/Druid.html).
https://insality.github.io/druid/
## License ## Licenses
- Developed and supported by [Insality](https://github.com/Insality) - Developed and supported by [Insality](https://github.com/Insality)
- Original idea by [AGulev](https://github.com/AGulev) - Original idea by [AGulev](https://github.com/AGulev)
@ -275,8 +199,12 @@ https://insality.github.io/druid/
If you have any issues, questions or suggestions please [create an issue](https://github.com/Insality/druid/issues) or contact me: [insality@gmail.com](mailto:insality@gmail.com) If you have any issues, questions or suggestions please [create an issue](https://github.com/Insality/druid/issues) or contact me: [insality@gmail.com](mailto:insality@gmail.com)
## History
For a complete history of the development of **Druid**, please check the [changelog](docs_md/changelog.md).
## ❤️ Support project ❤️ ## ❤️ Support project ❤️
Please support me if you like this project! It will help me keep engaged to update **Druid** and make it even better! Your donation helps me stay engaged in creating valuable projects for **Defold**. If you appreciate what I'm doing, please consider supporting me!
[![Github-sponsors](https://img.shields.io/badge/sponsor-30363D?style=for-the-badge&logo=GitHub-Sponsors&logoColor=#EA4AAA)](https://github.com/sponsors/insality) [![Ko-Fi](https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge&logo=ko-fi&logoColor=white)](https://ko-fi.com/insality) [![BuyMeACoffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/insality) [![Github-sponsors](https://img.shields.io/badge/sponsor-30363D?style=for-the-badge&logo=GitHub-Sponsors&logoColor=#EA4AAA)](https://github.com/sponsors/insality) [![Ko-Fi](https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge&logo=ko-fi&logoColor=white)](https://ko-fi.com/insality) [![BuyMeACoffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/insality)

5
config.ld
View File

@ -1,12 +1,13 @@
project='Druid' project='Druid'
title='Defold Druid UI Library' title='Defold Druid UI Framework'
description='Documentation for Druid Library' description='Documentation for Druid Framework'
file={"./druid", file={"./druid",
exclude = { exclude = {
"./druid/styles/", "./druid/styles/",
"./druid/system/middleclass.lua", "./druid/system/middleclass.lua",
"./druid/templates/", "./druid/templates/",
"./druid/annotations.lua", "./druid/annotations.lua",
"./druid/custom/rich_text/module",
} }
} }
package='druid' package='druid'

7
deployer_build_stats.csv
View File

@ -9,3 +9,10 @@ date,sha,version,build_size,build_time,platform,mode,is_cache_using,commits_coun
2022-08-29T18:46:47Z,13003e472169cbd261e703eca7b133adf64a24f7,0.9.592,2316,40,js-web,release,true,592 2022-08-29T18:46:47Z,13003e472169cbd261e703eca7b133adf64a24f7,0.9.592,2316,40,js-web,release,true,592
2022-09-09T17:55:42Z,072507cc9e715541bdee7636d2e5eeeb3c22a57d,0.10.603,2340,43,js-web,release,true,603 2022-09-09T17:55:42Z,072507cc9e715541bdee7636d2e5eeeb3c22a57d,0.10.603,2340,43,js-web,release,true,603
2022-09-09T18:00:07Z,072507cc9e715541bdee7636d2e5eeeb3c22a57d,0.10.603,2340,5,js-web,release,true,603 2022-09-09T18:00:07Z,072507cc9e715541bdee7636d2e5eeeb3c22a57d,0.10.603,2340,5,js-web,release,true,603
2023-07-05T20:19:22Z,d0062c2a78e618871ebb4c8ee66b1509b763f069,0.10.671,3292,12,x86_64-linux,headless,true,671
2023-07-13T18:37:07Z,1cbe57376397a8352bbafcc67de0b6f95ae37b35,0.10.682,2496,53,js-web,release,true,682
2023-07-13T19:31:47Z,ea185622702e6691275187741b1e2ee0c7f079ec,0.11.686,2452,51,js-web,release,true,686
2023-07-15T12:56:18Z,556e1a9bae620e2df290b10287fa8d0f64d47293,0.11.690,2468,51,js-web,release,true,690
2023-08-05T16:02:55Z,628723386eb3875f7190d079a2e7c510d044a311,0.11.692,2456,40,js-web,release,true,692
2023-08-05T16:31:19Z,37fff52aa59feb20f761ef4d340d9f677743d54b,0.11.693,2456,43,js-web,release,true,693
2023-08-05T16:41:25Z,d7dd4a86b81d73d345ad7e136de9c2c488bc4d8b,0.11.694,2452,43,js-web,release,true,694

1 date sha version build_size build_time platform mode is_cache_using commits_count
9 2022-08-29T18:46:47Z 13003e472169cbd261e703eca7b133adf64a24f7 0.9.592 2316 40 js-web release true 592
10 2022-09-09T17:55:42Z 072507cc9e715541bdee7636d2e5eeeb3c22a57d 0.10.603 2340 43 js-web release true 603
11 2022-09-09T18:00:07Z 072507cc9e715541bdee7636d2e5eeeb3c22a57d 0.10.603 2340 5 js-web release true 603
12 2023-07-05T20:19:22Z d0062c2a78e618871ebb4c8ee66b1509b763f069 0.10.671 3292 12 x86_64-linux headless true 671
13 2023-07-13T18:37:07Z 1cbe57376397a8352bbafcc67de0b6f95ae37b35 0.10.682 2496 53 js-web release true 682
14 2023-07-13T19:31:47Z ea185622702e6691275187741b1e2ee0c7f079ec 0.11.686 2452 51 js-web release true 686
15 2023-07-15T12:56:18Z 556e1a9bae620e2df290b10287fa8d0f64d47293 0.11.690 2468 51 js-web release true 690
16 2023-08-05T16:02:55Z 628723386eb3875f7190d079a2e7c510d044a311 0.11.692 2456 40 js-web release true 692
17 2023-08-05T16:31:19Z 37fff52aa59feb20f761ef4d340d9f677743d54b 0.11.693 2456 43 js-web release true 693
18 2023-08-05T16:41:25Z d7dd4a86b81d73d345ad7e136de9c2c488bc4d8b 0.11.694 2452 43 js-web release true 694

2
docs/druid/archive/archive_files.json
View File

@ -1 +1 @@
{"content":[{"name":"game.projectc","size":3797,"pieces":[{"name":"game.projectc0","offset":0}]},{"name":"game.arci","size":19808,"pieces":[{"name":"game.arci0","offset":0}]},{"name":"game.arcd","size":449757,"pieces":[{"name":"game.arcd0","offset":0}]},{"name":"game.dmanifest","size":20704,"pieces":[{"name":"game.dmanifest0","offset":0}]},{"name":"game.public.der","size":162,"pieces":[{"name":"game.public.der0","offset":0}]}]} {"content":[{"name":"game.projectc","size":4114,"pieces":[{"name":"game.projectc0","offset":0}]},{"name":"game.arci","size":23008,"pieces":[{"name":"game.arci0","offset":0}]},{"name":"game.arcd","size":607568,"pieces":[{"name":"game.arcd0","offset":0}]},{"name":"game.dmanifest","size":24253,"pieces":[{"name":"game.dmanifest0","offset":0}]},{"name":"game.public.der","size":162,"pieces":[{"name":"game.public.der0","offset":0}]}]}

BIN
docs/druid/archive/game.arcd0
View File

Binary file not shown.

BIN
docs/druid/archive/game.arci0
View File

Binary file not shown.

BIN
docs/druid/archive/game.dmanifest0
View File

Binary file not shown.

68
docs/druid/archive/game.projectc0
View File

@ -1,21 +1,22 @@
[project] [project]
title = druid title = druid
version = 0.10.603 version = 0.11.694
write_log = 0 write_log = 0
compress_archive = 1 compress_archive = 1
publisher = Insality publisher = Insality
developer = Insality developer = Insality
commit_sha = 072507cc9e715541bdee7636d2e5eeeb3c22a57d commit_sha = d7dd4a86b81d73d345ad7e136de9c2c488bc4d8b
build_date = 2022-09-09T18:00:07Z build_date = 2023-08-05T16:41:25Z
title_as_file_name = druid title_as_file_name = druid
[display] [display]
width = 600 width = 600
height = 900 height = 900
high_dpi = 0 high_dpi = 1
samples = 0 samples = 0
fullscreen = 0 fullscreen = 0
update_frequency = 0 update_frequency = 0
swap_interval = 1
vsync = 1 vsync = 1
display_profiles = /example/custom.display_profilesc display_profiles = /example/custom.display_profilesc
dynamic_orientation = 1 dynamic_orientation = 1
@ -29,6 +30,8 @@ clear_color_alpha = 0
[physics] [physics]
type = 2D type = 2D
max_collision_object_count = 128
use_fixed_timestep = 0
gravity_y = -10 gravity_y = -10
debug = 0 debug = 0
debug_alpha = 0.9 debug_alpha = 0.9
@ -45,6 +48,7 @@ ray_cast_limit_2d = 64
ray_cast_limit_3d = 128 ray_cast_limit_3d = 128
trigger_overlap_capacity = 16 trigger_overlap_capacity = 16
velocity_threshold = 1 velocity_threshold = 1
max_fixed_timesteps = 2
[bootstrap] [bootstrap]
main_collection = /example/example.collectionc main_collection = /example/example.collectionc
@ -53,11 +57,11 @@ render = /builtins/render/default.renderc
[graphics] [graphics]
default_texture_min_filter = linear default_texture_min_filter = linear
default_texture_mag_filter = linear default_texture_mag_filter = linear
max_draw_calls = 1024 max_draw_calls = 128
max_characters = 8192 max_characters = 8192
max_debug_vertices = 10000 max_debug_vertices = 10000
texture_profiles = /example/custom.texture_profiles texture_profiles = /example/custom.texture_profiles
verify_graphics_calls = 1 verify_graphics_calls = 0
memory_size = 512 memory_size = 512
[shader] [shader]
@ -84,14 +88,15 @@ game_binding = /input/game.input_bindingc
use_accelerometer = 0 use_accelerometer = 0
[sprite] [sprite]
max_count = 128 max_count = 16
subpixels = 1 subpixels = 1
[model] [model]
max_count = 128 max_count = 0
split_meshes = 0
[mesh] [mesh]
max_count = 128 max_count = 0
[gui] [gui]
max_count = 64 max_count = 64
@ -99,70 +104,79 @@ max_particlefx_count = 64
max_particle_count = 1024 max_particle_count = 1024
[collection] [collection]
max_instances = 1024 max_instances = 128
max_input_stack_entries = 16 max_input_stack_entries = 16
[collection_proxy] [collection_proxy]
max_count = 8 max_count = 8
[collectionfactory] [collectionfactory]
max_count = 128 max_count = 64
[factory] [factory]
max_count = 128 max_count = 16
[ios] [ios]
launch_screen = /builtins/manifests/ios/LaunchScreen.storyboardc launch_screen = /builtins/manifests/ios/LaunchScreen.storyboardc
pre_renderered_icons = 0 pre_renderered_icons = 0
bundle_identifier = example.unnamed bundle_identifier = example.unnamed
bundle_name =
infoplist = /builtins/manifests/ios/Info.plist infoplist = /builtins/manifests/ios/Info.plist
default_language = en default_language = en
localizations = en localizations = en
[android] [android]
version_code = 603 version_code = 694
minimum_sdk_version = 16 minimum_sdk_version = 19
target_sdk_version = 30 target_sdk_version = 33
package = com.insality.druid package = com.insality.druid
gcm_sender_id =
manifest = /builtins/manifests/android/AndroidManifest.xml manifest = /builtins/manifests/android/AndroidManifest.xml
iap_provider = GooglePlay iap_provider = GooglePlay
input_method = HiddenInputField input_method = HiddenInputField
immersive_mode = 0 immersive_mode = 0
display_cutout = 1 display_cutout = 1
debuggable = 0 debuggable = 0
proguard =
[osx] [osx]
app_icon =
infoplist = /builtins/manifests/osx/Info.plist infoplist = /builtins/manifests/osx/Info.plist
bundle_identifier = example.unnamed bundle_identifier = example.unnamed
bundle_name =
bundle_version = 1 bundle_version = 1
default_language = en default_language = en
localizations = en localizations = en
[windows] [windows]
app_icon =
[html5] [html5]
custom_heap_size = 0 custom_heap_size = 0
heap_size = 64 heap_size = 64
htmlfile = /builtins/manifests/web/engine_template.html htmlfile = /builtins/manifests/web/engine_template.html
cssfile = /example/light_theme.css cssfile = /example/light_theme.css
splash_image = /media/druid_logo.png
archive_location_prefix = archive archive_location_prefix = archive
archive_location_suffix =
engine_arguments = --verify-graphics-calls=false
wasm_streaming = 0
show_fullscreen_button = 0 show_fullscreen_button = 0
show_made_with_defold = 0 show_made_with_defold = 0
show_console_banner = 1 show_console_banner = 1
scale_mode = fit scale_mode = fit
engine_arguments = --verify-graphics-calls=false
splash_image = /media/druid_logo.png
[particle_fx] [particle_fx]
max_count = 64 max_count = 0
max_emitter_count = 64 max_emitter_count = 0
max_particle_count = 1024 max_particle_count = 0
[iap] [iap]
auto_finish_transactions = 1 auto_finish_transactions = 1
[network] [network]
http_timeout = 0 http_timeout = 0
ssl_certificates =
http_thread_count = 4 http_thread_count = 4
http_cache_enabled = 1 http_cache_enabled = 1
@ -173,22 +187,24 @@ include_dirs = druid
shared_state = 1 shared_state = 1
[label] [label]
max_count = 64 max_count = 0
subpixels = 1 subpixels = 1
[profiler] [profiler]
track_cpu = 0 track_cpu = 0
sleep_between_server_updates = 0
[liveupdate] [liveupdate]
settings = /liveupdate.settings settings = /liveupdate.settings
enabled = 1 enabled = 1
[tilemap] [tilemap]
max_count = 16 max_count = 0
max_tile_count = 2048 max_tile_count = 0
[engine] [engine]
run_while_iconified = 0 run_while_iconified = 0
fixed_update_frequency = 60
[druid] [druid]
no_auto_input = 0 no_auto_input = 0
@ -201,9 +217,9 @@ input_key_esc = key_esc
input_key_back = key_back input_key_back = key_back
input_key_enter = key_enter input_key_enter = key_enter
input_key_backspace = key_backspace input_key_backspace = key_backspace
input_multitouch = multitouch input_multitouch = touch_multi
input_scroll_up = scroll_up input_scroll_up = mouse_wheel_up
input_scroll_down = scroll_down input_scroll_down = mouse_wheel_down
[native_extension] [native_extension]
app_manifest = /example/game.appmanifest app_manifest = /example/game.appmanifest

112
docs/druid/dmloader.js
View File

@ -102,18 +102,10 @@ var FileLoader = {
var EngineLoader = { var EngineLoader = {
wasm_size: 2000000, wasm_size: 2000000,
wasm_from: 0,
wasm_to: 40,
wasmjs_size: 250000, wasmjs_size: 250000,
wasmjs_from: 40,
wasmjs_to: 50,
asmjs_size: 4000000, asmjs_size: 4000000,
asmjs_from: 0,
asmjs_to: 50,
stream_wasm: true, stream_wasm: false,
loadAndInstantiateWasmAsync: function(src, fromProgress, toProgress, callback) { loadAndInstantiateWasmAsync: function(src, fromProgress, toProgress, callback) {
FileLoader.load(src, "arraybuffer", EngineLoader.wasm_size, FileLoader.load(src, "arraybuffer", EngineLoader.wasm_size,
@ -133,9 +125,32 @@ var EngineLoader = {
}); });
}, },
streamAndInstantiateWasmAsync: function(src, fromProgress, toProgress, callback) { setupWasmStreamAsync: async function(src, fromProgress, toProgress) {
// https://stackoverflow.com/a/69179454
var fetchFn = fetch;
if (typeof TransformStream === "function" && ReadableStream.prototype.pipeThrough) {
async function fetchWithProgress(path) {
const response = await fetch(path);
// May be incorrect if compressed
const contentLength = response.headers.get("Content-Length");
const total = parseInt(contentLength, 10);
let bytesLoaded = 0;
const ts = new TransformStream({
transform (chunk, controller) {
bytesLoaded += chunk.byteLength;
Progress.calculateProgress(fromProgress, toProgress, bytesLoaded, total);
controller.enqueue(chunk)
}
});
return new Response(response.body.pipeThrough(ts), response);
}
fetchFn = fetchWithProgress;
}
Module.instantiateWasm = function(imports, successCallback) { Module.instantiateWasm = function(imports, successCallback) {
WebAssembly.instantiateStreaming(fetch(src), imports).then(function(output) { WebAssembly.instantiateStreaming(fetchFn(src), imports).then(function(output) {
Progress.calculateProgress(fromProgress, toProgress, 1, 1); Progress.calculateProgress(fromProgress, toProgress, 1, 1);
successCallback(output.instance); successCallback(output.instance);
}).catch(function(e) { }).catch(function(e) {
@ -144,43 +159,45 @@ var EngineLoader = {
}); });
return {}; // Compiling asynchronously, no exports. return {}; // Compiling asynchronously, no exports.
} }
callback();
}, },
// instantiate the .wasm file either by streaming it or first loading and then instantiate it // instantiate the .wasm file either by streaming it or first loading and then instantiate it
// https://github.com/emscripten-core/emscripten/blob/master/tests/manual_wasm_instantiate.html#L170 // https://github.com/emscripten-core/emscripten/blob/master/tests/manual_wasm_instantiate.html#L170
loadWasmAsync: function(src, fromProgress, toProgress, callback) { loadWasmAsync: function(exeName) {
if (EngineLoader.stream_wasm && (typeof WebAssembly.instantiateStreaming === "function")) { if (EngineLoader.stream_wasm && (typeof WebAssembly.instantiateStreaming === "function")) {
EngineLoader.streamAndInstantiateWasmAsync(src, fromProgress, toProgress, callback); EngineLoader.setupWasmStreamAsync(exeName + ".wasm", 10, 50);
EngineLoader.loadAndRunScriptAsync(exeName + '_wasm.js', EngineLoader.wasmjs_size, 0, 10);
} }
else { else {
EngineLoader.loadAndInstantiateWasmAsync(src, fromProgress, toProgress, callback); EngineLoader.loadAndInstantiateWasmAsync(exeName + ".wasm", 0, 40, function() {
EngineLoader.loadAndRunScriptAsync(exeName + '_wasm.js', EngineLoader.wasmjs_size, 40, 50);
});
} }
}, },
loadAsmJsAsync: function(exeName) {
EngineLoader.loadAndRunScriptAsync(exeName + '_asmjs.js', EngineLoader.asmjs_size, 0, 50);
},
// load and start engine script (asm.js or wasm.js) // load and start engine script (asm.js or wasm.js)
loadScriptAsync: function(src, estimatedSize, fromProgress, toProgress) { loadAndRunScriptAsync: function(src, estimatedSize, fromProgress, toProgress) {
FileLoader.load(src, "text", estimatedSize, FileLoader.load(src, "text", estimatedSize,
function(loaded, total) { Progress.calculateProgress(fromProgress, toProgress, loaded, total); }, function(loaded, total) { Progress.calculateProgress(fromProgress, toProgress, loaded, total); },
function(error) { throw error; }, function(error) { throw error; },
function(response) { function(response) {
var tag = document.createElement("script"); var tag = document.createElement("script");
tag.text = response; tag.text = response;
document.head.appendChild(tag); document.body.appendChild(tag);
}); });
}, },
// load engine (asm.js or wasm.js + wasm) // load engine (asm.js or wasm.js + wasm)
// engine load progress goes from 1-50% for ams.js
// engine load progress goes from 0-40% for .wasm and 40-50% for wasm.js
load: function(appCanvasId, exeName) { load: function(appCanvasId, exeName) {
Progress.addProgress(Module.setupCanvas(appCanvasId)); Progress.addProgress(Module.setupCanvas(appCanvasId));
if (Module['isWASMSupported']) { if (Module['isWASMSupported']) {
EngineLoader.loadWasmAsync(exeName + ".wasm", EngineLoader.wasm_from, EngineLoader.wasm_to, function(wasm) { EngineLoader.loadWasmAsync(exeName);
EngineLoader.loadScriptAsync(exeName + '_wasm.js', EngineLoader.wasmjs_size, EngineLoader.wasmjs_from, EngineLoader.wasmjs_to);
});
} else { } else {
EngineLoader.loadScriptAsync(exeName + '_asmjs.js', EngineLoader.asmjs_size, EngineLoader.asmjs_from, EngineLoader.asmjs_to); EngineLoader.loadAsmJsAsync(exeName);
} }
} }
} }
@ -699,9 +716,14 @@ var Module = {
}, },
preSync: function(done) { preSync: function(done) {
if (Module.persistentStorage != true) {
Module._syncInitial = true;
done();
return;
}
// Initial persistent sync before main is called // Initial persistent sync before main is called
FS.syncfs(true, function(err) { FS.syncfs(true, function(err) {
if(err) { if (err) {
Module._syncTries += 1; Module._syncTries += 1;
console.error("FS syncfs error: " + err); console.error("FS syncfs error: " + err);
if (Module._syncMaxTries > Module._syncTries) { if (Module._syncMaxTries > Module._syncTries) {
@ -734,6 +756,9 @@ var Module = {
// It will flag that another one is needed if there is already one sync running. // It will flag that another one is needed if there is already one sync running.
persistentSync: function() { persistentSync: function() {
if (Module.persistentStorage != true) {
return;
}
// Need to wait for the initial sync to finish since it // Need to wait for the initial sync to finish since it
// will call close on all its file streams which will trigger // will call close on all its file streams which will trigger
// new persistentSync for each. // new persistentSync for each.
@ -747,27 +772,40 @@ var Module = {
}, },
preInit: [function() { preInit: [function() {
/* Mount filesystem on preinit */ // Mount filesystem on preinit
var dir = DMSYS.GetUserPersistentDataRoot(); var dir = DMSYS.GetUserPersistentDataRoot();
FS.mkdir(dir); try {
FS.mkdir(dir);
}
catch (error) {
Module.persistentStorage = false;
Module._preloadAndCallMain();
return;
}
// If IndexedDB is supported we mount the persistent data root as IDBFS, // If IndexedDB is supported we mount the persistent data root as IDBFS,
// then try to do a IDB->MEM sync before we start the engine to get // then try to do a IDB->MEM sync before we start the engine to get
// previously saved data before boot. // previously saved data before boot.
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; try {
if (Module.persistentStorage && window.indexedDB) {
FS.mount(IDBFS, {}, dir); FS.mount(IDBFS, {}, dir);
// Patch FS.close so it will try to sync MEM->IDB // Patch FS.close so it will try to sync MEM->IDB
var _close = FS.close; FS.close = function(stream) { var r = _close(stream); Module.persistentSync(); return r; } var _close = FS.close;
FS.close = function(stream) {
// Sync IDB->MEM before calling main() var r = _close(stream);
Module.preSync(function() { Module.persistentSync();
Module._preloadAndCallMain(); return r;
}); }
} else {
Module._preloadAndCallMain();
} }
catch (error) {
Module.persistentStorage = false;
Module._preloadAndCallMain();
return;
}
// Sync IDB->MEM before calling main()
Module.preSync(function() {
Module._preloadAndCallMain();
});
}], }],
preRun: [function() { preRun: [function() {

BIN
docs/druid/druid.wasm
View File

Binary file not shown.

44
docs/druid/druid_asmjs.js
View File

File diff suppressed because one or more lines are too long

2
docs/druid/druid_wasm.js
View File

File diff suppressed because one or more lines are too long

17
docs/druid/index.html
View File

@ -7,7 +7,7 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <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 --> <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>druid 0.10.603</title> <title>druid 0.11.694</title>
<style type='text/css'> <style type='text/css'>
/* Disable user selection to avoid strange bug in Chrome on Windows: /* Disable user selection to avoid strange bug in Chrome on Windows:
* Selecting a text outside the canvas, then clicking+draging would * Selecting a text outside the canvas, then clicking+draging would
@ -123,6 +123,11 @@
</head> </head>
<body> <body>
<div id="running-from-file-warning" style="display: none; margin: 3em;">
<h1>Running from local file ⚠️</h1>
<p>It seems like you have opened this file by double-clicking on it. In order to test your build in a browser <b>you need to load this file from a web server</b>. You can either upload this file and the rest of the files from a Defold HTML5 bundle to a web hosting service OR host them using a local web server on your home network.</p>
<p><a href="https://defold.com/manuals/html5/#testing-html5-build" target="_blank">Learn more about running a local web server in the Defold HTML5 manual</a>.</p>
</div>
<div id="app-container" class="canvas-app-container"> <div id="app-container" class="canvas-app-container">
<div id="canvas-container" class="canvas-app-canvas-container"> <div id="canvas-container" class="canvas-app-canvas-container">
<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="600" height="900"></canvas> <canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="600" height="900"></canvas>
@ -214,7 +219,15 @@
</script> </script>
<script id='engine-start' type='text/javascript'> <script id='engine-start' type='text/javascript'>
EngineLoader.load("canvas", "druid"); var runningFromFileWarning = document.getElementById("running-from-file-warning");
if (window.location.href.startsWith("file://")) {
runningFromFileWarning.style.display = "block";
}
else {
EngineLoader.stream_wasm = "false" === "true";
EngineLoader.load("canvas", "druid");
runningFromFileWarning.parentNode.removeChild(runningFromFileWarning);
}
</script> </script>
</body> </body>
</html> </html>

52
docs/index.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -38,12 +38,12 @@
<li><a href="modules/Hover.html">Hover</a></li> <li><a href="modules/Hover.html">Hover</a></li>
<li><a href="modules/Scroll.html">Scroll</a></li> <li><a href="modules/Scroll.html">Scroll</a></li>
<li><a href="modules/StaticGrid.html">StaticGrid</a></li> <li><a href="modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="modules/Swipe.html">Swipe</a></li>
<li><a href="modules/Text.html">Text</a></li> <li><a href="modules/Text.html">Text</a></li>
<li><a href="modules/BaseComponent.html">BaseComponent</a></li> <li><a href="modules/BaseComponent.html">BaseComponent</a></li>
<li><a href="modules/PinKnob.html">PinKnob</a></li> <li><a href="modules/PinKnob.html">PinKnob</a></li>
<li><a href="modules/RichInput.html">RichInput</a></li> <li><a href="modules/RichInput.html">RichInput</a></li>
<li><a href="modules/druid.html">druid</a></li> <li><a href="modules/RichText.html">RichText</a></li>
<li><a href="modules/Druid.html">Druid</a></li>
<li><a href="modules/DruidEvent.html">DruidEvent</a></li> <li><a href="modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="modules/Checkbox.html">Checkbox</a></li> <li><a href="modules/Checkbox.html">Checkbox</a></li>
<li><a href="modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="modules/CheckboxGroup.html">CheckboxGroup</a></li>
@ -56,6 +56,7 @@
<li><a href="modules/Progress.html">Progress</a></li> <li><a href="modules/Progress.html">Progress</a></li>
<li><a href="modules/RadioGroup.html">RadioGroup</a></li> <li><a href="modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="modules/Slider.html">Slider</a></li> <li><a href="modules/Slider.html">Slider</a></li>
<li><a href="modules/Swipe.html">Swipe</a></li>
<li><a href="modules/Timer.html">Timer</a></li> <li><a href="modules/Timer.html">Timer</a></li>
<li><a href="modules/Helper.html">Helper</a></li> <li><a href="modules/Helper.html">Helper</a></li>
<li><a href="modules/DruidInstance.html">DruidInstance</a></li> <li><a href="modules/DruidInstance.html">DruidInstance</a></li>
@ -66,21 +67,21 @@
<div id="content"> <div id="content">
<h2>Documentation for Druid Library</h2> <h2>Documentation for Druid Framework</h2>
<h2>Modules</h2> <h2>Modules</h2>
<table class="module_list"> <table class="module_list">
<tr> <tr>
<td class="name" nowrap><a href="modules/BackHandler.html">BackHandler</a></td> <td class="name" nowrap><a href="modules/BackHandler.html">BackHandler</a></td>
<td class="summary">Component to handle back key (android, backspace)</td> <td class="summary">Component with event on back and backspace button.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/Blocker.html">Blocker</a></td> <td class="name" nowrap><a href="modules/Blocker.html">Blocker</a></td>
<td class="summary">Component to block input on specify zone by node</td> <td class="summary">Component to consume input in special zone defined by GUI node.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/Button.html">Button</a></td> <td class="name" nowrap><a href="modules/Button.html">Button</a></td>
<td class="summary">Component to handle basic GUI button</td> <td class="summary">Druid Component for Handling User Click Interactions: Click, Long Click, Double Click, and More.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/Drag.html">Drag</a></td> <td class="name" nowrap><a href="modules/Drag.html">Drag</a></td>
@ -96,15 +97,13 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/StaticGrid.html">StaticGrid</a></td> <td class="name" nowrap><a href="modules/StaticGrid.html">StaticGrid</a></td>
<td class="summary">Component to handle placing components by row and columns.</td> <td class="summary">Component to handle component's position by row and columns.</td>
</tr>
<tr>
<td class="name" nowrap><a href="modules/Swipe.html">Swipe</a></td>
<td class="summary">Component to handle swipe gestures on node.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/Text.html">Text</a></td> <td class="name" nowrap><a href="modules/Text.html">Text</a></td>
<td class="summary">Component to handle all GUI texts.</td> <td class="summary">Component for Wrapping GUI Text Nodes: Druid Text
<p> ## Overview ##
<p> Druid Text is a component that provides various adjustment modes for text nodes.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/BaseComponent.html">BaseComponent</a></td> <td class="name" nowrap><a href="modules/BaseComponent.html">BaseComponent</a></td>
@ -119,12 +118,17 @@
<td class="summary">Druid Rich Input custom component.</td> <td class="summary">Druid Rich Input custom component.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/druid.html">druid</a></td> <td class="name" nowrap><a href="modules/RichText.html">RichText</a></td>
<td class="summary">Druid UI Library.</td> <td class="summary">Druid Rich Text Custom Component.</td>
</tr>
<tr>
<td class="name" nowrap><a href="modules/Druid.html">Druid</a></td>
<td class="summary">Druid UI Component Framework.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/DruidEvent.html">DruidEvent</a></td> <td class="name" nowrap><a href="modules/DruidEvent.html">DruidEvent</a></td>
<td class="summary">Druid lua event library</td> <td class="summary">Druid Event Module
<p> The Event module provides a simple class for handling callbacks.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/Checkbox.html">Checkbox</a></td> <td class="name" nowrap><a href="modules/Checkbox.html">Checkbox</a></td>
@ -152,8 +156,10 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/LangText.html">LangText</a></td> <td class="name" nowrap><a href="modules/LangText.html">LangText</a></td>
<td class="summary">Component to handle all GUI texts <td class="summary">Component to wrap over GUI Text nodes with localization helpers
Good working with localization system</td> <p> <b># Overview #</b>
<p> • The initialization of druid.set_text_function is required to enable localization
using the localization ID.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/Layout.html">Layout</a></td> <td class="name" nowrap><a href="modules/Layout.html">Layout</a></td>
@ -161,7 +167,7 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/Progress.html">Progress</a></td> <td class="name" nowrap><a href="modules/Progress.html">Progress</a></td>
<td class="summary">Basic progress bar component.</td> <td class="summary">Druid component to handle the progress bars.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/RadioGroup.html">RadioGroup</a></td> <td class="name" nowrap><a href="modules/RadioGroup.html">RadioGroup</a></td>
@ -171,17 +177,21 @@
<td class="name" nowrap><a href="modules/Slider.html">Slider</a></td> <td class="name" nowrap><a href="modules/Slider.html">Slider</a></td>
<td class="summary">Druid slider component</td> <td class="summary">Druid slider component</td>
</tr> </tr>
<tr>
<td class="name" nowrap><a href="modules/Swipe.html">Swipe</a></td>
<td class="summary">Component to handle swipe gestures on node.</td>
</tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/Timer.html">Timer</a></td> <td class="name" nowrap><a href="modules/Timer.html">Timer</a></td>
<td class="summary">Component to handle GUI timers.</td> <td class="summary">Component to handle GUI timers.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/Helper.html">Helper</a></td> <td class="name" nowrap><a href="modules/Helper.html">Helper</a></td>
<td class="summary">Druid helper module for gui layouts</td> <td class="summary">Helper module with various usefull GUI functions.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="modules/DruidInstance.html">DruidInstance</a></td> <td class="name" nowrap><a href="modules/DruidInstance.html">DruidInstance</a></td>
<td class="summary">Instance of Druid.</td> <td class="summary">Druid Instance which you use for component creation.</td>
</tr> </tr>
</table> </table>

2
docs/ldoc_fixed.css
View File

@ -195,7 +195,7 @@ table.index td { text-align: left; vertical-align: top; }
margin-left: 14em; margin-left: 14em;
padding: 1em; padding: 1em;
padding-left: 2em; padding-left: 2em;
width: 700px; width: 900px;
border-left: 2px solid #cccccc; border-left: 2px solid #cccccc;
// border-right: 2px solid #cccccc; // border-right: 2px solid #cccccc;
background-color: #ffffff; background-color: #ffffff;

118
docs/modules/BackHandler.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -32,7 +32,6 @@
<h2>Contents</h2> <h2>Contents</h2>
<ul> <ul>
<li><a href="#Functions">Functions</a></li>
<li><a href="#Fields">Fields</a></li> <li><a href="#Fields">Fields</a></li>
</ul> </ul>
@ -47,6 +46,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -60,13 +60,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -74,30 +74,33 @@
<div id="content"> <div id="content">
<h1>Module <code>BackHandler</code></h1> <h1>Module <code>BackHandler</code></h1>
<p>Component to handle back key (android, backspace)</p> <p>Component with event on back and backspace button.</p>
<p></p> <p>
<b># Overview #</b>
<p> Back Handler is recommended to put in every game window to close it
or in main screen to call settings window.
<p> <b># Notes #</b>
<p> • Back Handler inheritance <a href="../modules/BaseComponent.html#">BaseComponent</a>, you can use all of its methods in addition to those described here.
<p> • Back Handler react on release action ACTION_BACK or ACTION_BACKSPACE</p>
<h3>Usage:</h3>
<ul>
<pre class="example">local callback = function(self, params) ... end
local params = {}
local back_handler = self.druid:new_back_handler(callback, [params])
</pre>
</ul>
<h2><a href="#Functions">Functions</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#init">init(self, callback[, params])</a></td>
<td class="summary">Component init function</td>
</tr>
<tr>
<td class="name" nowrap><a href="#on_input">on_input(self, action_id, action)</a></td>
<td class="summary">Input handler for component</td>
</tr>
</table>
<h2><a href="#Fields">Fields</a></h2> <h2><a href="#Fields">Fields</a></h2>
<table class="function_list"> <table class="function_list">
<tr> <tr>
<td class="name" nowrap><a href="#on_back">on_back</a></td> <td class="name" nowrap><a href="#on_back">on_back</a></td>
<td class="summary">On back handler callback(self, params)</td> <td class="summary">The <a href="../modules/DruidEvent.html#">DruidEvent</a> Event on back handler action.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#params">params</a></td> <td class="name" nowrap><a href="#params">params</a></td>
<td class="summary">Params to back callback</td> <td class="summary">Custom args to pass in the callback</td>
</tr> </tr>
</table> </table>
@ -105,69 +108,6 @@
<br/> <br/>
<h2 class="section-header "><a name="Functions"></a>Functions</h2>
<dl class="function">
<dt>
<a name = "init"></a>
<strong>init(self, callback[, params])</strong>
</dt>
<dd>
Component init function
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">BackHandler</span></span>
<a href="../modules/BackHandler.html#">BackHandler</a>
</li>
<li><span class="parameter">callback</span>
<span class="types"><span class="type">callback</span></span>
On back button
</li>
<li><span class="parameter">params</span>
<span class="types"><span class="type">any</span></span>
Callback argument
(<em>optional</em>)
</li>
</ul>
</dd>
<dt>
<a name = "on_input"></a>
<strong>on_input(self, action_id, action)</strong>
</dt>
<dd>
Input handler for component
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">BackHandler</span></span>
<a href="../modules/BackHandler.html#">BackHandler</a>
</li>
<li><span class="parameter">action_id</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span>
on_input action id
</li>
<li><span class="parameter">action</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
on_input action
</li>
</ul>
</dd>
</dl>
<h2 class="section-header "><a name="Fields"></a>Fields</h2> <h2 class="section-header "><a name="Fields"></a>Fields</h2>
<dl class="function"> <dl class="function">
@ -176,7 +116,8 @@
<strong>on_back</strong> <strong>on_back</strong>
</dt> </dt>
<dd> <dd>
On back handler callback(self, params) The <a href="../modules/DruidEvent.html#">DruidEvent</a> Event on back handler action.
<p> Trigger on input action ACTION_BACK or ACTION_BACKSPACE
<ul> <ul>
@ -189,6 +130,11 @@
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="comment">-- Subscribe additional callbacks:
</span>back_handler.on_back:subscribe(callback)</pre>
</ul>
</dd> </dd>
<dt> <dt>
@ -196,19 +142,25 @@
<strong>params</strong> <strong>params</strong>
</dt> </dt>
<dd> <dd>
Params to back callback Custom args to pass in the callback
<ul> <ul>
<li><span class="parameter">params</span> <li><span class="parameter">params</span>
<span class="types"><span class="type">any</span></span> <span class="types"><span class="type">any</span></span>
(<em>optional</em>)
</li> </li>
</ul> </ul>
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="comment">-- Replace params on runtime:
</span>back_handler.params = { ... }</pre>
</ul>
</dd> </dd>
</dl> </dl>

277
docs/modules/BaseComponent.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -33,7 +33,6 @@
<h2>Contents</h2> <h2>Contents</h2>
<ul> <ul>
<li><a href="#Functions">Functions</a></li> <li><a href="#Functions">Functions</a></li>
<li><a href="#Fields">Fields</a></li>
</ul> </ul>
@ -47,6 +46,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -60,13 +60,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -76,90 +76,90 @@
<h1>Module <code>BaseComponent</code></h1> <h1>Module <code>BaseComponent</code></h1>
<p>Basic class for all Druid components.</p> <p>Basic class for all Druid components.</p>
<p> <p>
To create you component, use `component.create`</p> To create you custom component, use static function `component.create`</p>
<h3>Usage:</h3>
<ul>
<pre class="example">-- Create your component:
local component = require(&quot;druid.component&quot;)
local AwesomeComponent = component.create(&quot;awesome_component&quot;)
function AwesomeComponent:init(template, nodes)
self:set_template(template)
self:set_nodes(nodes)
self.druid = self:get_druid()
end
return AwesomeComponent
</pre>
</ul>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>
<table class="function_list"> <table class="function_list">
<tr> <tr>
<td class="name" nowrap><a href="#get_childrens">get_childrens(self)</a></td> <td class="name" nowrap><a href="#component:get_childrens">component:get_childrens(self)</a></td>
<td class="summary">Return all children components, recursive (protected)</td> <td class="summary">Return all children components, recursive</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#get_context">get_context(self)</a></td> <td class="name" nowrap><a href="#component:get_context">component:get_context(self)</a></td>
<td class="summary">Get current component context (protected)</td> <td class="summary">Context used as first arg in all Druid events</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#get_druid">get_druid(self)</a></td> <td class="name" nowrap><a href="#component:get_druid">component:get_druid(self)</a></td>
<td class="summary">Return druid with context of calling component (protected).</td> <td class="summary">Get Druid instance for inner component creation.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#get_input_priority">get_input_priority(self)</a></td> <td class="name" nowrap><a href="#component:get_input_priority">component:get_input_priority(self)</a></td>
<td class="summary">Return component input priority</td> <td class="summary">Return component input priority</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#get_name">get_name(self)</a></td> <td class="name" nowrap><a href="#component:get_name">component:get_name(self)</a></td>
<td class="summary">Return component name</td> <td class="summary">Return component name</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#get_node">get_node(self, node_or_name)</a></td> <td class="name" nowrap><a href="#component:get_node">component:get_node(self, node_or_name)</a></td>
<td class="summary">Get node for component by name.</td> <td class="summary">Get component node by name.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#get_parent_component">get_parent_component(self)</a></td> <td class="name" nowrap><a href="#component:get_parent_component">component:get_parent_component(self)</a></td>
<td class="summary">Return the parent for current component (protected)</td> <td class="summary">Return the parent component if exist</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#get_parent_name">get_parent_name(self)</a></td> <td class="name" nowrap><a href="#component:get_parent_name">component:get_parent_name(self)</a></td>
<td class="summary">Return parent component name</td> <td class="summary">Return parent component name</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#get_template">get_template(self)</a></td> <td class="name" nowrap><a href="#component:get_template">component:get_template(self)</a></td>
<td class="summary">Get current component template name (protected)</td> <td class="summary">Get current component template name.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#get_uid">get_uid(self)</a></td> <td class="name" nowrap><a href="#component:get_uid">component:get_uid(self)</a></td>
<td class="summary">Return component uid (protected).</td> <td class="summary">Return component UID.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#log_message">log_message(self, message, context)</a></td> <td class="name" nowrap><a href="#component:reset_input_priority">component:reset_input_priority(self)</a></td>
<td class="summary">Print log information if debug mode is enabled (protected)</td>
</tr>
<tr>
<td class="name" nowrap><a href="#reset_input_priority">reset_input_priority(self)</a></td>
<td class="summary">Reset component input priority to default value</td> <td class="summary">Reset component input priority to default value</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_debug">set_debug(self, is_debug)</a></td> <td class="name" nowrap><a href="#component:set_input_enabled">component:set_input_enabled(self, state)</a></td>
<td class="summary">Set debug logs for component enabled or disabled</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_input_enabled">set_input_enabled(self, state)</a></td>
<td class="summary">Set component input state.</td> <td class="summary">Set component input state.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_input_priority">set_input_priority(self, value, is_temporary)</a></td> <td class="name" nowrap><a href="#component:set_input_priority">component:set_input_priority(self, value, is_temporary)</a></td>
<td class="summary">Set component input priority</td> <td class="summary">Set component input priority</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_nodes">set_nodes(self, nodes)</a></td> <td class="name" nowrap><a href="#component:set_nodes">component:set_nodes(self, nodes)</a></td>
<td class="summary">Set current component nodes (protected)</td> <td class="summary">Set current component nodes.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_style">set_style(self, druid_style)</a></td> <td class="name" nowrap><a href="#component:set_style">component:set_style(self, druid_style)</a></td>
<td class="summary">Set current component style table (protected).</td> <td class="summary">Set current component style table.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_template">set_template(self, template)</a></td> <td class="name" nowrap><a href="#component:set_template">component:set_template(self, template)</a></td>
<td class="summary">Set current component template name (protected) <td class="summary">Set component template name.</td>
It will check parent template name to build full template name</td>
</tr>
</table>
<h2><a href="#Fields">Fields</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#ON_INPUT">ON_INPUT</a></td>
<td class="summary">Component Interests</td>
</tr> </tr>
</table> </table>
@ -171,11 +171,11 @@
<dl class="function"> <dl class="function">
<dt> <dt>
<a name = "get_childrens"></a> <a name = "component:get_childrens"></a>
<strong>get_childrens(self)</strong> <strong>component:get_childrens(self)</strong>
</dt> </dt>
<dd> <dd>
Return all children components, recursive (protected) Return all children components, recursive
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -198,11 +198,11 @@
</dd> </dd>
<dt> <dt>
<a name = "get_context"></a> <a name = "component:get_context"></a>
<strong>get_context(self)</strong> <strong>component:get_context(self)</strong>
</dt> </dt>
<dd> <dd>
Get current component context (protected) Context used as first arg in all Druid events Context is usually self of gui_script.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -225,12 +225,11 @@
</dd> </dd>
<dt> <dt>
<a name = "get_druid"></a> <a name = "component:get_druid"></a>
<strong>get_druid(self)</strong> <strong>component:get_druid(self)</strong>
</dt> </dt>
<dd> <dd>
Return druid with context of calling component (protected). Get Druid instance for inner component creation.
Use it to create component inside of other components.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -253,8 +252,8 @@
</dd> </dd>
<dt> <dt>
<a name = "get_input_priority"></a> <a name = "component:get_input_priority"></a>
<strong>get_input_priority(self)</strong> <strong>component:get_input_priority(self)</strong>
</dt> </dt>
<dd> <dd>
Return component input priority Return component input priority
@ -280,8 +279,8 @@
</dd> </dd>
<dt> <dt>
<a name = "get_name"></a> <a name = "component:get_name"></a>
<strong>get_name(self)</strong> <strong>component:get_name(self)</strong>
</dt> </dt>
<dd> <dd>
Return component name Return component name
@ -307,13 +306,13 @@
</dd> </dd>
<dt> <dt>
<a name = "get_node"></a> <a name = "component:get_node"></a>
<strong>get_node(self, node_or_name)</strong> <strong>component:get_node(self, node_or_name)</strong>
</dt> </dt>
<dd> <dd>
Get node for component by name. Get component node by name.
If component has nodes, node_or_name should be string <p> If component has nodes, node_or_name should be string
It auto pick node by template name or from nodes by clone_tree It autopick node by template name or from nodes by gui.clone_tree
if they was setup via component:set_nodes, component:set_template. if they was setup via component:set_nodes, component:set_template.
If node is not found, the exception will fired If node is not found, the exception will fired
@ -342,11 +341,11 @@
</dd> </dd>
<dt> <dt>
<a name = "get_parent_component"></a> <a name = "component:get_parent_component"></a>
<strong>get_parent_component(self)</strong> <strong>component:get_parent_component(self)</strong>
</dt> </dt>
<dd> <dd>
Return the parent for current component (protected) Return the parent component if exist
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -369,8 +368,8 @@
</dd> </dd>
<dt> <dt>
<a name = "get_parent_name"></a> <a name = "component:get_parent_name"></a>
<strong>get_parent_name(self)</strong> <strong>component:get_parent_name(self)</strong>
</dt> </dt>
<dd> <dd>
Return parent component name Return parent component name
@ -396,11 +395,11 @@
</dd> </dd>
<dt> <dt>
<a name = "get_template"></a> <a name = "component:get_template"></a>
<strong>get_template(self)</strong> <strong>component:get_template(self)</strong>
</dt> </dt>
<dd> <dd>
Get current component template name (protected) Get current component template name.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -423,12 +422,12 @@
</dd> </dd>
<dt> <dt>
<a name = "get_uid"></a> <a name = "component:get_uid"></a>
<strong>get_uid(self)</strong> <strong>component:get_uid(self)</strong>
</dt> </dt>
<dd> <dd>
Return component uid (protected). Return component UID.
UID generated in component creation order <p> UID generated in component creation order.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -451,37 +450,8 @@
</dd> </dd>
<dt> <dt>
<a name = "log_message"></a> <a name = "component:reset_input_priority"></a>
<strong>log_message(self, message, context)</strong> <strong>component:reset_input_priority(self)</strong>
</dt>
<dd>
Print log information if debug mode is enabled (protected)
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">BaseComponent</span></span>
<a href="../modules/BaseComponent.html#">BaseComponent</a>
</li>
<li><span class="parameter">message</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span>
</li>
<li><span class="parameter">context</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
</li>
</ul>
</dd>
<dt>
<a name = "reset_input_priority"></a>
<strong>reset_input_priority(self)</strong>
</dt> </dt>
<dd> <dd>
Reset component input priority to default value Reset component input priority to default value
@ -507,37 +477,12 @@
</dd> </dd>
<dt> <dt>
<a name = "set_debug"></a> <a name = "component:set_input_enabled"></a>
<strong>set_debug(self, is_debug)</strong> <strong>component:set_input_enabled(self, state)</strong>
</dt>
<dd>
Set debug logs for component enabled or disabled
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">BaseComponent</span></span>
<a href="../modules/BaseComponent.html#">BaseComponent</a>
</li>
<li><span class="parameter">is_debug</span>
<span class="types"><span class="type">bool</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "set_input_enabled"></a>
<strong>set_input_enabled(self, state)</strong>
</dt> </dt>
<dd> <dd>
Set component input state. By default it enabled Set component input state. By default it enabled
You can disable any input of component by this function <p> If input is disabled, the component will not receive input events
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -564,11 +509,11 @@
</dd> </dd>
<dt> <dt>
<a name = "set_input_priority"></a> <a name = "component:set_input_priority"></a>
<strong>set_input_priority(self, value, is_temporary)</strong> <strong>component:set_input_priority(self, value, is_temporary)</strong>
</dt> </dt>
<dd> <dd>
Set component input priority Set component input priority Default value: 10
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -599,11 +544,12 @@
</dd> </dd>
<dt> <dt>
<a name = "set_nodes"></a> <a name = "component:set_nodes"></a>
<strong>set_nodes(self, nodes)</strong> <strong>component:set_nodes(self, nodes)</strong>
</dt> </dt>
<dd> <dd>
Set current component nodes (protected) Set current component nodes.
Use if your component nodes was cloned with `gui.clone_tree` and you got the node tree.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -627,15 +573,21 @@
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="keyword">local</span> nodes = gui.clone_tree(self.prefab)
... In your component:
self:set_nodes(nodes)</pre>
</ul>
</dd> </dd>
<dt> <dt>
<a name = "set_style"></a> <a name = "component:set_style"></a>
<strong>set_style(self, druid_style)</strong> <strong>component:set_style(self, druid_style)</strong>
</dt> </dt>
<dd> <dd>
Set current component style table (protected). Set current component style table.
Invoke `on_style_change` on component, if exist. BaseComponent should handle <p> Invoke `on_style_change` on component, if exist. Component should handle
their style changing and store all style params their style changing and store all style params
@ -651,18 +603,25 @@
</li> </li>
</ul> </ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">BaseComponent</span></span>
<a href="../modules/BaseComponent.html#">BaseComponent</a>
</ol>
</dd> </dd>
<dt> <dt>
<a name = "set_template"></a> <a name = "component:set_template"></a>
<strong>set_template(self, template)</strong> <strong>component:set_template(self, template)</strong>
</dt> </dt>
<dd> <dd>
Set current component template name (protected) Set component template name.
It will check parent template name to build full template name <p> Use on all your custom components with GUI layouts used as templates.
It will check parent template name to build full template name in self:get_node()
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -687,24 +646,6 @@
</dd>
</dl>
<h2 class="section-header "><a name="Fields"></a>Fields</h2>
<dl class="function">
<dt>
<a name = "ON_INPUT"></a>
<strong>ON_INPUT</strong>
</dt>
<dd>
Component Interests
</dd> </dd>
</dl> </dl>

38
docs/modules/Blocker.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -47,6 +47,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -60,13 +61,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -74,30 +75,42 @@
<div id="content"> <div id="content">
<h1>Module <code>Blocker</code></h1> <h1>Module <code>Blocker</code></h1>
<p>Component to block input on specify zone by node</p> <p>Component to consume input in special zone defined by GUI node.</p>
<p></p> <p>
<b># Overview #</b>
<p> <b># Notes #</b>
<p> Blocker consume input if `gui.pick_node` works on it.
<p> • Blocker inheritance <a href="../modules/BaseComponent.html#">BaseComponent</a>, you can use all of its methods in addition to those described here.
<p> • Blocker initial enabled state is `gui.is_enabled(node, true)`
<p> • The Blocker node should be enabled to capture the input</p>
<h3>Usage:</h3>
<ul>
<pre class="example">local node = gui.get_node(&quot;blocker_node&quot;)
local blocker = self.druid:new_blocker(node)
</pre>
</ul>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>
<table class="function_list"> <table class="function_list">
<tr> <tr>
<td class="name" nowrap><a href="#init">init(self, node)</a></td> <td class="name" nowrap><a href="#init">init(self, node)</a></td>
<td class="summary">Component init function</td> <td class="summary"><a href="../modules/Blocker.html#">Blocker</a> constructor</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#is_enabled">is_enabled(self)</a></td> <td class="name" nowrap><a href="#is_enabled">is_enabled(self)</a></td>
<td class="summary">Return blocked enabled state</td> <td class="summary">Return blocker enabled state</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_enabled">set_enabled(self, state)</a></td> <td class="name" nowrap><a href="#set_enabled">set_enabled(self, state)</a></td>
<td class="summary">Set enabled blocker component state</td> <td class="summary">Set enabled blocker component state.</td>
</tr> </tr>
</table> </table>
<h2><a href="#Fields">Fields</a></h2> <h2><a href="#Fields">Fields</a></h2>
<table class="function_list"> <table class="function_list">
<tr> <tr>
<td class="name" nowrap><a href="#node">node</a></td> <td class="name" nowrap><a href="#node">node</a></td>
<td class="summary">Trigger node</td> <td class="summary">Blocker node</td>
</tr> </tr>
</table> </table>
@ -113,7 +126,7 @@
<strong>init(self, node)</strong> <strong>init(self, node)</strong>
</dt> </dt>
<dd> <dd>
Component init function <a href="../modules/Blocker.html#">Blocker</a> constructor
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -138,7 +151,7 @@
<strong>is_enabled(self)</strong> <strong>is_enabled(self)</strong>
</dt> </dt>
<dd> <dd>
Return blocked enabled state Return blocker enabled state
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -165,7 +178,8 @@
<strong>set_enabled(self, state)</strong> <strong>set_enabled(self, state)</strong>
</dt> </dt>
<dd> <dd>
Set enabled blocker component state Set enabled blocker component state.
<p> Don't change node enabled state itself.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -194,7 +208,7 @@
<strong>node</strong> <strong>node</strong>
</dt> </dt>
<dd> <dd>
Trigger node Blocker node
<ul> <ul>

410
docs/modules/Button.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -48,6 +48,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -61,13 +62,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -75,23 +76,46 @@
<div id="content"> <div id="content">
<h1>Module <code>Button</code></h1> <h1>Module <code>Button</code></h1>
<p>Component to handle basic GUI button</p> <p>Druid Component for Handling User Click Interactions: Click, Long Click, Double Click, and More.</p>
<p></p> <p>
<p> <b># Overview #</b>
<p> This component provides a versatile solution for handling user click interactions.
It allows you to make any GUI node clickable and define various callbacks for different types of clicks.
<p> <b># Notes #</b>
<p> • The click callback will not trigger if the cursor moves outside the node's
area between the pressed and released states.
<p> • If a button has a double click event subscriber and the double click event is triggered,
the regular click callback will not be triggered.
<p> • Buttons can be triggered using a keyboard key by calling the button:set_key_trigger method.
<p> • To animate a small icon on a big button panel, you can use an animation node.
The trigger node name should be set as "big panel," and the animation node should be set as "small icon."
<p> <a href="https://insality.github.io/druid/druid/index.html?example=general_buttons" target="_blank"><b>Example Link</b></a></p>
<h3>Usage:</h3>
<ul>
<pre class="example">local function on_button_click(self, args, button)
print(&quot;Button has clicked with params: &quot; .. args)
print(&quot;Also the button component is passed in callback params&quot;)
end
local custom_args = &quot;Any variable to pass inside callback&quot;
local button = self.druid:new_button(&quot;button_name&quot;, on_button_click, custom_args)
</pre>
</ul>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>
<table class="function_list"> <table class="function_list">
<tr> <tr>
<td class="name" nowrap><a href="#get_key_trigger">get_key_trigger(self)</a></td> <td class="name" nowrap><a href="#get_key_trigger">get_key_trigger(self)</a></td>
<td class="summary">Get key-code to trigger this button</td> <td class="summary">Get current key name to trigger this button.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#init">init(self, node, callback[, params[, anim_node]])</a></td> <td class="name" nowrap><a href="#init">init(self, node, callback[, custom_args[, anim_node]])</a></td>
<td class="summary">Component init function</td> <td class="summary">The <a href="../modules/Button.html#">Button</a> constructor</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#is_enabled">is_enabled(self)</a></td> <td class="name" nowrap><a href="#is_enabled">is_enabled(self)</a></td>
<td class="summary">Return button enabled state</td> <td class="summary">Get button enabled state.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_check_function">set_check_function(self[, check_function[, failure_callback]])</a></td> <td class="name" nowrap><a href="#set_check_function">set_check_function(self[, check_function[, failure_callback]])</a></td>
@ -99,15 +123,19 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_click_zone">set_click_zone(self, zone)</a></td> <td class="name" nowrap><a href="#set_click_zone">set_click_zone(self, zone)</a></td>
<td class="summary">Strict button click area.</td> <td class="summary">Set additional button click area.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_enabled">set_enabled(self, state)</a></td> <td class="name" nowrap><a href="#set_enabled">set_enabled(self, state)</a></td>
<td class="summary">Set enabled button component state</td> <td class="summary">Set button enabled state.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_key_trigger">set_key_trigger(self, key)</a></td> <td class="name" nowrap><a href="#set_key_trigger">set_key_trigger(self, key)</a></td>
<td class="summary">Set key-code to trigger this button</td> <td class="summary">Set key name to trigger this button by keyboard.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_web_user_interaction">set_web_user_interaction(self[, is_web_mode])</a></td>
<td class="summary">Set Button mode to work inside user HTML5 interaction event.</td>
</tr> </tr>
</table> </table>
<h2><a href="#Tables">Tables</a></h2> <h2><a href="#Tables">Tables</a></h2>
@ -121,63 +149,55 @@
<table class="function_list"> <table class="function_list">
<tr> <tr>
<td class="name" nowrap><a href="#anim_node">anim_node</a></td> <td class="name" nowrap><a href="#anim_node">anim_node</a></td>
<td class="summary">Animation node</td> <td class="summary">Button animation node.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#click_zone">click_zone</a></td> <td class="name" nowrap><a href="#click_zone">click_zone</a></td>
<td class="summary">Restriction zone</td> <td class="summary">Additional button click area, defined by another GUI Node</td>
</tr>
<tr>
<td class="name" nowrap><a href="#hash">hash</a></td>
<td class="summary">The hash of trigger node</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#hover">hover</a></td> <td class="name" nowrap><a href="#hover">hover</a></td>
<td class="summary">Druid hover logic component</td> <td class="summary">The <a href="../modules/Hover.html#">Hover</a>: Button Hover component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#node">node</a></td> <td class="name" nowrap><a href="#node">node</a></td>
<td class="summary">Trigger node</td> <td class="summary">Button trigger node</td>
</tr>
<tr>
<td class="name" nowrap><a href="#node_id">node_id</a></td>
<td class="summary">The GUI node id from button node</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#on_click">on_click</a></td> <td class="name" nowrap><a href="#on_click">on_click</a></td>
<td class="summary">On release button callback(self, params, button_instance)</td> <td class="summary">The <a href="../modules/DruidEvent.html#">DruidEvent</a>: Event on successful release action over button.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#on_click_outside">on_click_outside</a></td> <td class="name" nowrap><a href="#on_click_outside">on_click_outside</a></td>
<td class="summary">On click outside of button(self, params, button_instance)</td> <td class="summary">The <a href="../modules/DruidEvent.html#">DruidEvent</a>: Event calls if click event was outside of button.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#on_double_click">on_double_click</a></td> <td class="name" nowrap><a href="#on_double_click">on_double_click</a></td>
<td class="summary">On double tap button callback(self, params, button_instance, click_amount)</td> <td class="summary">The <a href="../modules/DruidEvent.html#">DruidEvent</a>: Event on double tap action over button.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#on_hold_callback">on_hold_callback</a></td> <td class="name" nowrap><a href="#on_hold_callback">on_hold_callback</a></td>
<td class="summary">On button hold before long_click callback(self, params, button_instance, time)</td> <td class="summary">The <a href="../modules/DruidEvent.html#">DruidEvent</a>: Event calls every frame before on_long_click event.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#on_long_click">on_long_click</a></td> <td class="name" nowrap><a href="#on_long_click">on_long_click</a></td>
<td class="summary">On long tap button callback(self, params, button_instance, time)</td> <td class="summary">The <a href="../modules/DruidEvent.html#">DruidEvent</a>: Event on long tap action over button.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#on_pressed">on_pressed</a></td>
<td class="summary">The <a href="../modules/DruidEvent.html#">DruidEvent</a>: Event triggered if button was pressed by user.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#on_repeated_click">on_repeated_click</a></td> <td class="name" nowrap><a href="#on_repeated_click">on_repeated_click</a></td>
<td class="summary">On repeated action button callback(self, params, button_instance, click_amount)</td> <td class="summary">The <a href="../modules/DruidEvent.html#">DruidEvent</a>: Event on repeated action over button.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#params">params</a></td> <td class="name" nowrap><a href="#params">params</a></td>
<td class="summary">Params to click callbacks</td> <td class="summary">Custom args for any Button event.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#pos">pos</a></td>
<td class="summary">Initial pos of anim_node</td>
</tr>
<tr>
<td class="name" nowrap><a href="#start_pos">start_pos</a></td>
<td class="summary">Initial pos of anim_node</td>
</tr>
<tr>
<td class="name" nowrap><a href="#start_scale">start_scale</a></td>
<td class="summary">Initial scale of anim_node</td>
</tr> </tr>
</table> </table>
@ -193,7 +213,7 @@
<strong>get_key_trigger(self)</strong> <strong>get_key_trigger(self)</strong>
</dt> </dt>
<dd> <dd>
Get key-code to trigger this button Get current key name to trigger this button.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -207,20 +227,24 @@
<h3>Returns:</h3> <h3>Returns:</h3>
<ol> <ol>
<span class="types"><a class="type" href="../modules/Button.html#hash">hash</a></span> <span class="types"><span class="type">hash</span></span>
The action_id of the key The action_id of the input key
</ol> </ol>
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="keyword">local</span> key_hash = button:get_key_trigger()</pre>
</ul>
</dd> </dd>
<dt> <dt>
<a name = "init"></a> <a name = "init"></a>
<strong>init(self, node, callback[, params[, anim_node]])</strong> <strong>init(self, node, callback[, custom_args[, anim_node]])</strong>
</dt> </dt>
<dd> <dd>
Component init function The <a href="../modules/Button.html#">Button</a> constructor
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -230,21 +254,21 @@
<a href="../modules/Button.html#">Button</a> <a href="../modules/Button.html#">Button</a>
</li> </li>
<li><span class="parameter">node</span> <li><span class="parameter">node</span>
<span class="types"><a class="type" href="../modules/Button.html#node">node</a></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a> or <span class="type">Node</span></span>
Gui node Node name or GUI Node itself
</li> </li>
<li><span class="parameter">callback</span> <li><span class="parameter">callback</span>
<span class="types"><span class="type">function</span></span> <span class="types"><span class="type">function</span></span>
Button callback On click button callback
</li> </li>
<li><span class="parameter">params</span> <li><span class="parameter">custom_args</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span> <span class="types"><span class="type">any</span></span>
Button callback params Button events custom arguments
(<em>optional</em>) (<em>optional</em>)
</li> </li>
<li><span class="parameter">anim_node</span> <li><span class="parameter">anim_node</span>
<span class="types"><a class="type" href="../modules/Button.html#node">node</a></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a> or <span class="type">Node</span></span>
Button anim node (node, if not provided) Node to animate instead of trigger node.
(<em>optional</em>) (<em>optional</em>)
</li> </li>
</ul> </ul>
@ -259,7 +283,8 @@
<strong>is_enabled(self)</strong> <strong>is_enabled(self)</strong>
</dt> </dt>
<dd> <dd>
Return button enabled state Get button enabled state.
<p> By default all Buttons is enabled on creating.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -274,11 +299,15 @@
<ol> <ol>
<span class="types"><span class="type">bool</span></span> <span class="types"><span class="type">bool</span></span>
True, if button is enabled True, if button is enabled now, False overwise
</ol> </ol>
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="keyword">local</span> is_enabled = button:is_enabled()</pre>
</ul>
</dd> </dd>
<dt> <dt>
@ -302,7 +331,7 @@
</li> </li>
<li><span class="parameter">failure_callback</span> <li><span class="parameter">failure_callback</span>
<span class="types"><span class="type">function</span></span> <span class="types"><span class="type">function</span></span>
Function what will be called on button click, if check function return false Function will be called on button click, if check function return false
(<em>optional</em>) (<em>optional</em>)
</li> </li>
</ul> </ul>
@ -323,8 +352,9 @@
<strong>set_click_zone(self, zone)</strong> <strong>set_click_zone(self, zone)</strong>
</dt> </dt>
<dd> <dd>
Strict button click area. Useful for Set additional button click area.
no click events outside stencil node Useful to restrict click outside out stencil node or scrollable content.
<p> This functions calls automatically if you don't disable it in game.project: druid.no_stencil_check
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -348,6 +378,10 @@
<h3>Usage:</h3>
<ul>
<pre class="example">button:set_click_zone(<span class="string">"stencil_node"</span>)</pre>
</ul>
</dd> </dd>
<dt> <dt>
@ -355,7 +389,9 @@
<strong>set_enabled(self, state)</strong> <strong>set_enabled(self, state)</strong>
</dt> </dt>
<dd> <dd>
Set enabled button component state Set button enabled state.
The style.on_set_enabled will be triggered.
Disabled button is not clickable.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -379,6 +415,11 @@
<h3>Usage:</h3>
<ul>
<pre class="example">button:set_enabled(<span class="keyword">false</span>)
button:set_enabled(<span class="keyword">true</span>)</pre>
</ul>
</dd> </dd>
<dt> <dt>
@ -386,7 +427,7 @@
<strong>set_key_trigger(self, key)</strong> <strong>set_key_trigger(self, key)</strong>
</dt> </dt>
<dd> <dd>
Set key-code to trigger this button Set key name to trigger this button by keyboard.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -396,8 +437,8 @@
<a href="../modules/Button.html#">Button</a> <a href="../modules/Button.html#">Button</a>
</li> </li>
<li><span class="parameter">key</span> <li><span class="parameter">key</span>
<span class="types"><a class="type" href="../modules/Button.html#hash">hash</a></span> <span class="types"><span class="type">hash</span></span>
The action_id of the key The action_id of the input key
</li> </li>
</ul> </ul>
@ -410,6 +451,49 @@
<h3>Usage:</h3>
<ul>
<pre class="example">button:set_key_trigger(<span class="string">"key_space"</span>)</pre>
</ul>
</dd>
<dt>
<a name = "set_web_user_interaction"></a>
<strong>set_web_user_interaction(self[, is_web_mode])</strong>
</dt>
<dd>
Set Button mode to work inside user HTML5 interaction event.
<p> It's required to make protected things like copy & paste text, show mobile keyboard, etc
The HTML5 button's doesn't call any events except on_click event.
<p> If the game is not HTML, html mode will be not enabled
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Button</span></span>
</li>
<li><span class="parameter">is_web_mode</span>
<span class="types"><span class="type">boolean</span></span>
If true - button will be called inside html5 callback
(<em>optional</em>)
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">Button</span></span>
Current button instance
</ol>
<h3>Usage:</h3>
<ul>
<pre class="example">button:set_web_user_interaction(<span class="keyword">true</span>)</pre>
</ul>
</dd> </dd>
</dl> </dl>
@ -422,7 +506,7 @@
</dt> </dt>
<dd> <dd>
Component style params. Component style params.
You can override this component styles params in druid styles table You can override this component styles params in Druid styles table
or create your own style or create your own style
@ -479,7 +563,9 @@
<strong>anim_node</strong> <strong>anim_node</strong>
</dt> </dt>
<dd> <dd>
Animation node Button animation node.
In default case equals to clickable node.
<p> Usecase: You have the big clickable panel, but want to animate only one small icon on it.
<ul> <ul>
@ -500,7 +586,7 @@
<strong>click_zone</strong> <strong>click_zone</strong>
</dt> </dt>
<dd> <dd>
Restriction zone Additional button click area, defined by another GUI Node
<ul> <ul>
@ -515,33 +601,13 @@
</dd>
<dt>
<a name = "hash"></a>
<strong>hash</strong>
</dt>
<dd>
The hash of trigger node
<ul>
<li><span class="parameter">hash</span>
<span class="types"><a class="type" href="../modules/Button.html#node">node_id</a></span>
</li>
</ul>
</dd> </dd>
<dt> <dt>
<a name = "hover"></a> <a name = "hover"></a>
<strong>hover</strong> <strong>hover</strong>
</dt> </dt>
<dd> <dd>
Druid hover logic component The <a href="../modules/Hover.html#">Hover</a>: Button Hover component
<ul> <ul>
@ -561,12 +627,32 @@
<strong>node</strong> <strong>node</strong>
</dt> </dt>
<dd> <dd>
Trigger node Button trigger node
<ul> <ul>
<li><span class="parameter">node</span> <li><span class="parameter">node</span>
<span class="types"><a class="type" href="../modules/Button.html#node">node</a></span> <span class="types"><span class="type">Node</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "node_id"></a>
<strong>node_id</strong>
</dt>
<dd>
The GUI node id from button node
<ul>
<li><span class="parameter">node_id</span>
<span class="types"><span class="type">hash</span></span>
</li> </li>
</ul> </ul>
@ -581,7 +667,7 @@
<strong>on_click</strong> <strong>on_click</strong>
</dt> </dt>
<dd> <dd>
On release button callback(self, params, button_instance) The <a href="../modules/DruidEvent.html#">DruidEvent</a>: Event on successful release action over button.
<ul> <ul>
@ -594,6 +680,13 @@
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="comment">-- Custom args passed in Button constructor
</span>button.on_click:subscribe(<span class="keyword">function</span>(self, custom_args, button_instance)
<span class="global">print</span>(<span class="string">"On button click!"</span>)
<span class="keyword">end</span>)</pre>
</ul>
</dd> </dd>
<dt> <dt>
@ -601,7 +694,9 @@
<strong>on_click_outside</strong> <strong>on_click_outside</strong>
</dt> </dt>
<dd> <dd>
On click outside of button(self, params, button_instance) The <a href="../modules/DruidEvent.html#">DruidEvent</a>: Event calls if click event was outside of button.
<p> This event will be triggered for each button what was not clicked on user click action
<p> Usecase: Hide the popup when click outside
<ul> <ul>
@ -614,6 +709,13 @@
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="comment">-- Custom args passed in Button constructor
</span>button.on_click_outside:subscribe(<span class="keyword">function</span>(self, custom_args, button_instance)
<span class="global">print</span>(<span class="string">"On click Button outside!"</span>)
<span class="keyword">end</span>)</pre>
</ul>
</dd> </dd>
<dt> <dt>
@ -621,7 +723,9 @@
<strong>on_double_click</strong> <strong>on_double_click</strong>
</dt> </dt>
<dd> <dd>
On double tap button callback(self, params, button_instance, click_amount) The <a href="../modules/DruidEvent.html#">DruidEvent</a>: Event on double tap action over button.
<p> If secondary click was too fast after previous one, the double
click will be called instead usual click (if on_double_click subscriber exists)
<ul> <ul>
@ -634,6 +738,13 @@
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="comment">-- Custom args passed in Button constructor
</span>button.on_double_click:subscribe(<span class="keyword">function</span>(self, custom_args, button_instance, click_amount)
<span class="global">print</span>(<span class="string">"On double Button click!"</span>)
<span class="keyword">end</span>)</pre>
</ul>
</dd> </dd>
<dt> <dt>
@ -641,7 +752,9 @@
<strong>on_hold_callback</strong> <strong>on_hold_callback</strong>
</dt> </dt>
<dd> <dd>
On button hold before long_click callback(self, params, button_instance, time) The <a href="../modules/DruidEvent.html#">DruidEvent</a>: Event calls every frame before on_long_click event.
<p> If long_click subscriber exists, the on_hold_callback will be called before long_click trigger.
<p> Usecase: Animate button progress of long tap
<ul> <ul>
@ -654,6 +767,13 @@
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="comment">-- Custom args passed in Button constructor
</span>button.on_double_click:subscribe(<span class="keyword">function</span>(self, custom_args, button_instance, time)
<span class="global">print</span>(<span class="string">"On hold Button callback!"</span>)
<span class="keyword">end</span>)</pre>
</ul>
</dd> </dd>
<dt> <dt>
@ -661,7 +781,9 @@
<strong>on_long_click</strong> <strong>on_long_click</strong>
</dt> </dt>
<dd> <dd>
On long tap button callback(self, params, button_instance, time) The <a href="../modules/DruidEvent.html#">DruidEvent</a>: Event on long tap action over button.
<p> This callback will be triggered if user pressed the button and hold the some amount of time.
The amount of time picked from button style param: LONGTAP_TIME
<ul> <ul>
@ -674,6 +796,40 @@
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="comment">-- Custom args passed in Button constructor
</span>button.on_long_click:subscribe(<span class="keyword">function</span>(self, custom_args, button_instance, hold_time)
<span class="global">print</span>(<span class="string">"On long Button click!"</span>)
<span class="keyword">end</span>)</pre>
</ul>
</dd>
<dt>
<a name = "on_pressed"></a>
<strong>on_pressed</strong>
</dt>
<dd>
The <a href="../modules/DruidEvent.html#">DruidEvent</a>: Event triggered if button was pressed by user.
<ul>
<li><span class="parameter">on_pressed</span>
<span class="types"><span class="type">DruidEvent</span></span>
<a href="../modules/DruidEvent.html#">DruidEvent</a>
</li>
</ul>
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="comment">-- Custom args passed in Button constructor
</span>button.on_pressed:subscribe(<span class="keyword">function</span>(self, custom_args, button_instance)
<span class="global">print</span>(<span class="string">"On Button pressed!"</span>)
<span class="keyword">end</span>)</pre>
</ul>
</dd> </dd>
<dt> <dt>
@ -681,7 +837,8 @@
<strong>on_repeated_click</strong> <strong>on_repeated_click</strong>
</dt> </dt>
<dd> <dd>
On repeated action button callback(self, params, button_instance, click_amount) The <a href="../modules/DruidEvent.html#">DruidEvent</a>: Event on repeated action over button.
<p> This callback will be triggered if user hold the button. The repeat rate pick from `input.repeat_interval` in game.project
<ul> <ul>
@ -694,6 +851,13 @@
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="comment">-- Custom args passed in Button constructor
</span>button.on_repeated_click:subscribe(<span class="keyword">function</span>(self, custom_args, button_instance, click_count)
<span class="global">print</span>(<span class="string">"On repeated Button click!"</span>)
<span class="keyword">end</span>)</pre>
</ul>
</dd> </dd>
<dt> <dt>
@ -701,7 +865,7 @@
<strong>params</strong> <strong>params</strong>
</dt> </dt>
<dd> <dd>
Params to click callbacks Custom args for any Button event. Setup in Button constructor
<ul> <ul>
@ -715,66 +879,6 @@
</dd>
<dt>
<a name = "pos"></a>
<strong>pos</strong>
</dt>
<dd>
Initial pos of anim_node
<ul>
<li><span class="parameter">pos</span>
<span class="types"><span class="type">vector3</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "start_pos"></a>
<strong>start_pos</strong>
</dt>
<dd>
Initial pos of anim_node
<ul>
<li><span class="parameter">start_pos</span>
<span class="types"><span class="type">vector3</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "start_scale"></a>
<strong>start_scale</strong>
</dt>
<dd>
Initial scale of anim_node
<ul>
<li><span class="parameter">start_scale</span>
<span class="types"><span class="type">vector3</span></span>
</li>
</ul>
</dd> </dd>
</dl> </dl>

7
docs/modules/Checkbox.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -48,6 +48,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -61,13 +62,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -76,7 +77,7 @@
<h1>Module <code>Checkbox</code></h1> <h1>Module <code>Checkbox</code></h1>
<p>Druid checkbox component</p> <p>Druid checkbox component</p>
<p></p> <p> <a href="https://insality.github.io/druid/druid/index.html?example=general_checkboxes" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>

7
docs/modules/CheckboxGroup.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -47,6 +47,7 @@
<li><strong>CheckboxGroup</strong></li> <li><strong>CheckboxGroup</strong></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -60,13 +61,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -75,7 +76,7 @@
<h1>Module <code>CheckboxGroup</code></h1> <h1>Module <code>CheckboxGroup</code></h1>
<p>Checkbox group module</p> <p>Checkbox group module</p>
<p></p> <p> <a href="https://insality.github.io/druid/druid/index.html?example=general_checkboxes" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>

8
docs/modules/DataList.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -47,6 +47,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><strong>DataList</strong></li> <li><strong>DataList</strong></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -60,13 +61,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -76,7 +77,8 @@
<h1>Module <code>DataList</code></h1> <h1>Module <code>DataList</code></h1>
<p>Component to manage data for huge dataset in scroll.</p> <p>Component to manage data for huge dataset in scroll.</p>
<p> <p>
It requires Druid Scroll and Druid Grid (Static or Dynamic) components</p> It requires Druid Scroll and Druid Grid (Static or Dynamic) components
<p> <a href="https://insality.github.io/druid/druid/index.html?example=general_data_list" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>

13
docs/modules/Drag.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -48,6 +48,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><strong>Drag</strong></li> <li><strong>Drag</strong></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -61,13 +62,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -79,7 +80,8 @@
<p> <p>
Drag have correct handling for multitouch and swap Drag have correct handling for multitouch and swap
touched while dragging. Drag will be processed even touched while dragging. Drag will be processed even
the cursor is outside of node, if drag is already started</p> the cursor is outside of node, if drag is already started
<p> <a href="https://insality.github.io/druid/druid/index.html?example=general_drag" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>
@ -295,6 +297,11 @@
Distance in pixels to start dragging Distance in pixels to start dragging
(<em>default</em> 10) (<em>default</em> 10)
</li> </li>
<li><span class="parameter">NO_USE_SCREEN_KOEF</span>
<span class="types"><span class="type">boolean</span></span>
If screen aspect ratio affects on drag values
(<em>default</em> false)
</li>
</ul> </ul>

76
docs/modules/DruidEvent.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -46,6 +46,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><strong>DruidEvent</strong></li> <li><strong>DruidEvent</strong></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -59,13 +60,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -73,8 +74,10 @@
<div id="content"> <div id="content">
<h1>Module <code>DruidEvent</code></h1> <h1>Module <code>DruidEvent</code></h1>
<p>Druid lua event library</p> <p>Druid Event Module
<p></p> <p> The Event module provides a simple class for handling callbacks.</p>
<p> It is used in many Druid components.
<p> You can subscribe to an event using the `:subscribe` method and unsubscribe using the `:unsubscribe` method.</p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>
@ -84,15 +87,15 @@
<td class="summary">Clear the all event handlers</td> <td class="summary">Clear the all event handlers</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#initialize">initialize(self, initial_callback)</a></td> <td class="name" nowrap><a href="#initialize">initialize(self[, initial_callback])</a></td>
<td class="summary">Event constructur</td> <td class="summary">DruidEvent constructor</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#is_exist">is_exist(self)</a></td> <td class="name" nowrap><a href="#is_exist">is_exist(self)</a></td>
<td class="summary">Return true, if event have at lease one handler</td> <td class="summary">Return true, if event have at lease one handler</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#subscribe">subscribe(self, callback, context)</a></td> <td class="name" nowrap><a href="#subscribe">subscribe(self, callback[, context])</a></td>
<td class="summary">Subscribe callback on event</td> <td class="summary">Subscribe callback on event</td>
</tr> </tr>
<tr> <tr>
@ -100,7 +103,7 @@
<td class="summary">Trigger the event and call all subscribed callbacks</td> <td class="summary">Trigger the event and call all subscribed callbacks</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#unsubscribe">unsubscribe(self, callback, context)</a></td> <td class="name" nowrap><a href="#unsubscribe">unsubscribe(self, callback[, context])</a></td>
<td class="summary">Unsubscribe callback on event</td> <td class="summary">Unsubscribe callback on event</td>
</tr> </tr>
</table> </table>
@ -131,14 +134,18 @@
<h3>Usage:</h3>
<ul>
<pre class="example">button.on_long_click:clear()</pre>
</ul>
</dd> </dd>
<dt> <dt>
<a name = "initialize"></a> <a name = "initialize"></a>
<strong>initialize(self, initial_callback)</strong> <strong>initialize(self[, initial_callback])</strong>
</dt> </dt>
<dd> <dd>
Event constructur DruidEvent constructor
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -150,12 +157,19 @@
<li><span class="parameter">initial_callback</span> <li><span class="parameter">initial_callback</span>
<span class="types"><span class="type">function</span></span> <span class="types"><span class="type">function</span></span>
Subscribe the callback on new event, if callback exist Subscribe the callback on new event, if callback exist
(<em>optional</em>)
</li> </li>
</ul> </ul>
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="keyword">local</span> Event = <span class="global">require</span>(<span class="string">"druid.event"</span>)
...
<span class="keyword">local</span> event = Event(initial_callback)</pre>
</ul>
</dd> </dd>
<dt> <dt>
@ -183,11 +197,15 @@
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="keyword">local</span> is_long_click_handler_exists = button.on_long_click:is_exist()</pre>
</ul>
</dd> </dd>
<dt> <dt>
<a name = "subscribe"></a> <a name = "subscribe"></a>
<strong>subscribe(self, callback, context)</strong> <strong>subscribe(self, callback[, context])</strong>
</dt> </dt>
<dd> <dd>
Subscribe callback on event Subscribe callback on event
@ -204,14 +222,24 @@
Callback itself Callback itself
</li> </li>
<li><span class="parameter">context</span> <li><span class="parameter">context</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span> <span class="types"><span class="type">Any</span></span>
Additional context as first param to callback call Additional context as first param to callback call, usually it's self
(<em>optional</em>)
</li> </li>
</ul> </ul>
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="keyword">local</span> <span class="keyword">function</span> on_long_callback(self)
<span class="global">print</span>(<span class="string">"Long click!"</span>)
<span class="keyword">end</span>
...
<span class="keyword">local</span> button = self.druid:new_button(<span class="string">"button"</span>, callback)
button.on_long_click:subscribe(on_long_callback, self)</pre>
</ul>
</dd> </dd>
<dt> <dt>
@ -229,7 +257,7 @@
<a href="../modules/DruidEvent.html#">DruidEvent</a> <a href="../modules/DruidEvent.html#">DruidEvent</a>
</li> </li>
<li><span class="parameter">...</span> <li><span class="parameter">...</span>
<span class="types"><span class="type">any</span></span> <span class="types"><span class="type">Any</span></span>
All event params All event params
</li> </li>
</ul> </ul>
@ -237,11 +265,18 @@
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="keyword">local</span> Event = <span class="global">require</span>(<span class="string">"druid.event"</span>)
...
<span class="keyword">local</span> event = Event()
event:trigger(<span class="string">"Param1"</span>, <span class="string">"Param2"</span>)</pre>
</ul>
</dd> </dd>
<dt> <dt>
<a name = "unsubscribe"></a> <a name = "unsubscribe"></a>
<strong>unsubscribe(self, callback, context)</strong> <strong>unsubscribe(self, callback[, context])</strong>
</dt> </dt>
<dd> <dd>
Unsubscribe callback on event Unsubscribe callback on event
@ -258,14 +293,23 @@
Callback itself Callback itself
</li> </li>
<li><span class="parameter">context</span> <li><span class="parameter">context</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span> <span class="types"><span class="type">Any</span></span>
Additional context as first param to callback call Additional context as first param to callback call
(<em>optional</em>)
</li> </li>
</ul> </ul>
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="keyword">local</span> <span class="keyword">function</span> on_long_callback(self)
<span class="global">print</span>(<span class="string">"Long click!"</span>)
<span class="keyword">end</span>
...
button.on_long_click:unsubscribe(on_long_callback, self)</pre>
</ul>
</dd> </dd>
</dl> </dl>

426
docs/modules/DruidInstance.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -46,6 +46,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><strong>DruidInstance</strong></li> <li><strong>DruidInstance</strong></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -59,13 +60,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -73,37 +74,64 @@
<div id="content"> <div id="content">
<h1>Module <code>DruidInstance</code></h1> <h1>Module <code>DruidInstance</code></h1>
<p>Instance of Druid.</p> <p>Druid Instance which you use for component creation.</p>
<p> Make one instance per gui_script with next code: <p>
<p> local druid = require("druid.druid") <p> # Component List #
function init(self) <p> For a list of all available components, please refer to the "See Also" section.
self.druid = druid.new(self) <p> <b># Notes #</b>
local button = self.druid:new_button(...) <p> Please review the following API pages:
end <p> <a href="../modules/Helper.html#">Helper</a> - A useful set of functions for working with GUI nodes, such as centering nodes, get GUI scale ratio, etc
<p> Learn Druid instance function here</p> <p> <a href="../modules/DruidEvent.html#">DruidEvent</a> - The core event system in Druid. Learn how to subscribe to any event in every Druid component.
<p> <a href="../modules/BaseComponent.html#">BaseComponent</a> - The parent class of all Druid components. You can find all default component methods there.
<p> # Tech Info #
<p> • To use Druid, you need to create a Druid instance first. This instance is used to spawn components.
<p> • When using Druid components, provide the node name as a string argument directly. Avoid calling gui.get_node() before passing it to the component. Because Druid can get nodes from template and cloned gui nodes.
<p> • All Druid and component methods are called using the colon operator (e.g., self.druid:new_button()).</p>
<h3>See also:</h3> <h3>See also:</h3>
<ul> <ul>
<li><a href="../modules/Button.html#">Button</a></li>
<li><a href="../modules/Blocker.html#">Blocker</a></li>
<li><a href="../modules/BackHandler.html#">BackHandler</a></li> <li><a href="../modules/BackHandler.html#">BackHandler</a></li>
<li><a href="../modules/Input.html#">Input</a></li> <li><a href="../modules/Blocker.html#">Blocker</a></li>
<li><a href="../modules/Text.html#">Text</a></li> <li><a href="../modules/Button.html#">Button</a></li>
<li><a href="../modules/LangText.html#">LangText</a></li>
<li><a href="../modules/Timer.html#">Timer</a></li>
<li><a href="../modules/Progress.html#">Progress</a></li>
<li><a href="../modules/StaticGrid.html#">StaticGrid</a></li>
<li><a href="../modules/DynamicGrid.html#">DynamicGrid</a></li>
<li><a href="../modules/Scroll.html#">Scroll</a></li>
<li><a href="../modules/Slider.html#">Slider</a></li>
<li><a href="../modules/Checkbox.html#">Checkbox</a></li> <li><a href="../modules/Checkbox.html#">Checkbox</a></li>
<li><a href="../modules/CheckboxGroup.html#">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html#">CheckboxGroup</a></li>
<li><a href="../modules/RadioGroup.html#">RadioGroup</a></li>
<li><a href="../modules/Swipe.html#">Swipe</a></li>
<li><a href="../modules/Drag.html#">Drag</a></li>
<li><a href="../modules/DataList.html#">DataList</a></li> <li><a href="../modules/DataList.html#">DataList</a></li>
<li><a href="../modules/Hover.html#">Hover</a></li> <li><a href="../modules/Drag.html#">Drag</a></li>
<li><a href="../modules/Layout.html#">Layout</a></li> <li><a href="../modules/DynamicGrid.html#">DynamicGrid</a></li>
<li><a href="../modules/Hotkey.html#">Hotkey</a></li> <li><a href="../modules/Hotkey.html#">Hotkey</a></li>
<li><a href="../modules/Hover.html#">Hover</a></li>
<li><a href="../modules/Input.html#">Input</a></li>
<li><a href="../modules/LangText.html#">LangText</a></li>
<li><a href="../modules/Layout.html#">Layout</a></li>
<li><a href="../modules/Progress.html#">Progress</a></li>
<li><a href="../modules/RadioGroup.html#">RadioGroup</a></li>
<li><a href="../modules/RichInput.html#">RichInput</a></li>
<li><a href="../modules/RichText.html#">RichText</a></li>
<li><a href="../modules/Scroll.html#">Scroll</a></li>
<li><a href="../modules/Slider.html#">Slider</a></li>
<li><a href="../modules/StaticGrid.html#">StaticGrid</a></li>
<li><a href="../modules/Swipe.html#">Swipe</a></li>
<li><a href="../modules/Text.html#">Text</a></li>
<li><a href="../modules/Timer.html#">Timer</a></li>
</ul>
<h3>Usage:</h3>
<ul>
<pre class="example">local druid = require(&quot;druid.druid&quot;)
local function close_window(self)
print(&quot;Yeah! You closed the game!&quot;)
end
function init(self)
self.druid = druid.new(self)
-- Call all druid instance function with &quot;:&quot; syntax:
local text = self.druid:new_text(&quot;text_header&quot;, &quot;Hello Druid!&quot;)
local button = self.druid:new_button(&quot;button_close&quot;, close_window)
-- You not need to save component reference if not need it
self.druid:new_back_handler(close_window)
end
</pre>
</ul> </ul>
@ -111,136 +139,123 @@
<table class="function_list"> <table class="function_list">
<tr> <tr>
<td class="name" nowrap><a href="#final">final(self)</a></td> <td class="name" nowrap><a href="#final">final(self)</a></td>
<td class="summary">Call on final function on gui_script.</td> <td class="summary">Call this in gui_script final function.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#late_init">late_init(self)</a></td>
<td class="summary">Druid late update function call after init and before udpate step</td>
</tr>
<tr>
<td class="name" nowrap><a href="#log_message">log_message(self, message[, context])</a></td>
<td class="summary">Log message, if is_debug mode is enabled</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new">new(self, component, ...)</a></td> <td class="name" nowrap><a href="#new">new(self, component, ...)</a></td>
<td class="summary">Create new druid component</td> <td class="summary">Create new component.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_back_handler">new_back_handler(self, callback[, params])</a></td> <td class="name" nowrap><a href="#new_back_handler">new_back_handler(self, callback[, params])</a></td>
<td class="summary">Create back_handler basic component</td> <td class="summary">Create <a href="../modules/BackHandler.html#">BackHandler</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_blocker">new_blocker(self, node)</a></td> <td class="name" nowrap><a href="#new_blocker">new_blocker(self, node)</a></td>
<td class="summary">Create blocker basic component</td> <td class="summary">Create <a href="../modules/Blocker.html#">Blocker</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_button">new_button(self, node, callback[, params[, anim_node]])</a></td> <td class="name" nowrap><a href="#new_button">new_button(self, node, callback[, params[, anim_node]])</a></td>
<td class="summary">Create button basic component</td> <td class="summary">Create <a href="../modules/Button.html#">Button</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_checkbox">new_checkbox(self, node, callback[, click_node=node[, initial_state=false]])</a></td> <td class="name" nowrap><a href="#new_checkbox">new_checkbox(self, node, callback[, click_node=node[, initial_state=false]])</a></td>
<td class="summary">Create checkbox component</td> <td class="summary">Create <a href="../modules/Checkbox.html#">Checkbox</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_checkbox_group">new_checkbox_group(self, nodes, callback[, click_nodes=node])</a></td> <td class="name" nowrap><a href="#new_checkbox_group">new_checkbox_group(self, nodes, callback[, click_nodes=node])</a></td>
<td class="summary">Create checkbox_group component</td> <td class="summary">Create <a href="../modules/CheckboxGroup.html#">CheckboxGroup</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_data_list">new_data_list(self, druid_scroll, druid_grid, create_function)</a></td> <td class="name" nowrap><a href="#new_data_list">new_data_list(self, druid_scroll, druid_grid, create_function)</a></td>
<td class="summary">Create data list basic component</td> <td class="summary">Create <a href="../modules/DataList.html#">DataList</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_drag">new_drag(self, node, on_drag_callback)</a></td> <td class="name" nowrap><a href="#new_drag">new_drag(self, node, on_drag_callback)</a></td>
<td class="summary">Create drag basic component</td> <td class="summary">Create <a href="../modules/Drag.html#">Drag</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_dynamic_grid">new_dynamic_grid(self, parent)</a></td> <td class="name" nowrap><a href="#new_dynamic_grid">new_dynamic_grid(self, parent)</a></td>
<td class="summary">Create dynamic grid component</td> <td class="summary">Create <a href="../modules/DynamicGrid.html#">DynamicGrid</a> component</td>
</tr>
<tr>
<td class="name" nowrap><a href="#new_grid">new_grid(self, parent, element[, in_row=1])</a></td>
<td class="summary">Create grid basic component
Deprecated</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_hotkey">new_hotkey(self, keys_array, callback[, params])</a></td> <td class="name" nowrap><a href="#new_hotkey">new_hotkey(self, keys_array, callback[, params])</a></td>
<td class="summary">Create hotkey component</td> <td class="summary">Create <a href="../modules/Hotkey.html#">Hotkey</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_hover">new_hover(self, node, on_hover_callback)</a></td> <td class="name" nowrap><a href="#new_hover">new_hover(self, node, on_hover_callback)</a></td>
<td class="summary">Create hover basic component</td> <td class="summary">Create <a href="../modules/Hover.html#">Hover</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_input">new_input(self, click_node, text_node[, keyboard_type])</a></td> <td class="name" nowrap><a href="#new_input">new_input(self, click_node, text_node[, keyboard_type])</a></td>
<td class="summary">Create input component</td> <td class="summary">Create <a href="../modules/Input.html#">Input</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_lang_text">new_lang_text(self, node, locale_id, no_adjust)</a></td> <td class="name" nowrap><a href="#new_lang_text">new_lang_text(self, node, locale_id, no_adjust)</a></td>
<td class="summary">Create lang_text component</td> <td class="summary">Create <a href="../modules/LangText.html#">LangText</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_layout">new_layout(self, node, mode)</a></td> <td class="name" nowrap><a href="#new_layout">new_layout(self, node, mode)</a></td>
<td class="summary">Create layout component</td> <td class="summary">Create <a href="../modules/Layout.html#">Layout</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_progress">new_progress(self, node, key[, init_value=1])</a></td> <td class="name" nowrap><a href="#new_progress">new_progress(self, node, key[, init_value=1])</a></td>
<td class="summary">Create progress component</td> <td class="summary">Create <a href="../modules/Progress.html#">Progress</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_radio_group">new_radio_group(self, nodes, callback[, click_nodes=node])</a></td> <td class="name" nowrap><a href="#new_radio_group">new_radio_group(self, nodes, callback[, click_nodes=node])</a></td>
<td class="summary">Create radio_group component</td> <td class="summary">Create <a href="../modules/RadioGroup.html#">RadioGroup</a> component</td>
</tr>
<tr>
<td class="name" nowrap><a href="#new_rich_text">new_rich_text(self[, template[, nodes]])</a></td>
<td class="summary">Create <a href="../modules/RichText.html#">RichText</a> component.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_scroll">new_scroll(self, view_node, content_node)</a></td> <td class="name" nowrap><a href="#new_scroll">new_scroll(self, view_node, content_node)</a></td>
<td class="summary">Create scroll basic component</td> <td class="summary">Create <a href="../modules/Scroll.html#">Scroll</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_slider">new_slider(self, node, end_pos[, callback])</a></td> <td class="name" nowrap><a href="#new_slider">new_slider(self, node, end_pos[, callback])</a></td>
<td class="summary">Create slider component</td> <td class="summary">Create <a href="../modules/Slider.html#">Slider</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_static_grid">new_static_grid(self, parent, element[, in_row=1])</a></td> <td class="name" nowrap><a href="#new_static_grid">new_static_grid(self, parent, element[, in_row=1])</a></td>
<td class="summary">Create static grid basic component</td> <td class="summary">Create <a href="../modules/StaticGrid.html#">StaticGrid</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_swipe">new_swipe(self, node, on_swipe_callback)</a></td> <td class="name" nowrap><a href="#new_swipe">new_swipe(self, node, on_swipe_callback)</a></td>
<td class="summary">Create swipe basic component</td> <td class="summary">Create <a href="../modules/Swipe.html#">Swipe</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_text">new_text(self, node[, value[, no_adjust]])</a></td> <td class="name" nowrap><a href="#new_text">new_text(self, node[, value[, no_adjust]])</a></td>
<td class="summary">Create text basic component</td> <td class="summary">Create <a href="../modules/Text.html#">Text</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#new_timer">new_timer(self, node, seconds_from[, seconds_to=0[, callback]])</a></td> <td class="name" nowrap><a href="#new_timer">new_timer(self, node, seconds_from[, seconds_to=0[, callback]])</a></td>
<td class="summary">Create timer component</td> <td class="summary">Create <a href="../modules/Timer.html#">Timer</a> component</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#on_input">on_input(self, action_id, action)</a></td> <td class="name" nowrap><a href="#on_input">on_input(self, action_id, action)</a></td>
<td class="summary">Druid on_input function</td> <td class="summary">Call this in gui_script on_input function.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#on_message">on_message(self, message_id, message, sender)</a></td> <td class="name" nowrap><a href="#on_message">on_message(self, message_id, message, sender)</a></td>
<td class="summary">Druid on_message function</td> <td class="summary">Call this in gui_script on_message function.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#remove">remove(self, component)</a></td> <td class="name" nowrap><a href="#remove">remove(self, component)</a></td>
<td class="summary">Remove component from druid instance.</td> <td class="summary">Remove created component from Druid instance.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_blacklist">set_blacklist(self[, blacklist_components=nil])</a></td> <td class="name" nowrap><a href="#set_blacklist">set_blacklist(self[, blacklist_components=nil])</a></td>
<td class="summary">Set blacklist components for input processing.</td> <td class="summary">Set blacklist components for input processing.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_debug">set_debug(self, is_debug)</a></td>
<td class="summary">Set debug mode for current Druid instance.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_whitelist">set_whitelist(self[, whitelist_components=nil])</a></td> <td class="name" nowrap><a href="#set_whitelist">set_whitelist(self[, whitelist_components=nil])</a></td>
<td class="summary">Set whitelist components for input processing.</td> <td class="summary">Set whitelist components for input processing.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#update">update(self, dt)</a></td> <td class="name" nowrap><a href="#update">update(self, dt)</a></td>
<td class="summary">Druid update function</td> <td class="summary">Call this in gui_script update function.</td>
</tr> </tr>
</table> </table>
@ -256,8 +271,7 @@
<strong>final(self)</strong> <strong>final(self)</strong>
</dt> </dt>
<dd> <dd>
Call on final function on gui_script. It will call on_remove Call this in gui_script final function.
on all druid components
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -272,64 +286,13 @@
</dd>
<dt>
<a name = "late_init"></a>
<strong>late_init(self)</strong>
</dt>
<dd>
Druid late update function call after init and before udpate step
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">DruidInstance</span></span>
</li>
</ul>
</dd>
<dt>
<a name = "log_message"></a>
<strong>log_message(self, message[, context])</strong>
</dt>
<dd>
Log message, if is_debug mode is enabled
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">DruidInstance</span></span>
<a href="../modules/DruidInstance.html#">DruidInstance</a>
</li>
<li><span class="parameter">message</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span>
</li>
<li><span class="parameter">context</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
(<em>optional</em>)
</li>
</ul>
</dd> </dd>
<dt> <dt>
<a name = "new"></a> <a name = "new"></a>
<strong>new(self, component, ...)</strong> <strong>new(self, component, ...)</strong>
</dt> </dt>
<dd> <dd>
Create new druid component Create new component.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -358,7 +321,7 @@
<strong>new_back_handler(self, callback[, params])</strong> <strong>new_back_handler(self, callback[, params])</strong>
</dt> </dt>
<dd> <dd>
Create back_handler basic component Create <a href="../modules/BackHandler.html#">BackHandler</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -382,7 +345,7 @@
<ol> <ol>
<span class="types"><span class="type">BackHandler</span></span> <span class="types"><span class="type">BackHandler</span></span>
back_handler component <a href="../modules/BackHandler.html#">BackHandler</a> component
</ol> </ol>
@ -394,7 +357,7 @@
<strong>new_blocker(self, node)</strong> <strong>new_blocker(self, node)</strong>
</dt> </dt>
<dd> <dd>
Create blocker basic component Create <a href="../modules/Blocker.html#">Blocker</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -413,7 +376,7 @@
<ol> <ol>
<span class="types"><span class="type">Blocker</span></span> <span class="types"><span class="type">Blocker</span></span>
blocker component <a href="../modules/Blocker.html#">Blocker</a> component
</ol> </ol>
@ -425,7 +388,7 @@
<strong>new_button(self, node, callback[, params[, anim_node]])</strong> <strong>new_button(self, node, callback[, params[, anim_node]])</strong>
</dt> </dt>
<dd> <dd>
Create button basic component Create <a href="../modules/Button.html#">Button</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -436,7 +399,7 @@
</li> </li>
<li><span class="parameter">node</span> <li><span class="parameter">node</span>
<span class="types"><span class="type">node</span></span> <span class="types"><span class="type">node</span></span>
Gui node GUI node
</li> </li>
<li><span class="parameter">callback</span> <li><span class="parameter">callback</span>
<span class="types"><span class="type">function</span></span> <span class="types"><span class="type">function</span></span>
@ -458,7 +421,7 @@
<ol> <ol>
<span class="types"><span class="type">Button</span></span> <span class="types"><span class="type">Button</span></span>
button component <a href="../modules/Button.html#">Button</a> component
</ol> </ol>
@ -470,7 +433,7 @@
<strong>new_checkbox(self, node, callback[, click_node=node[, initial_state=false]])</strong> <strong>new_checkbox(self, node, callback[, click_node=node[, initial_state=false]])</strong>
</dt> </dt>
<dd> <dd>
Create checkbox component Create <a href="../modules/Checkbox.html#">Checkbox</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -503,7 +466,7 @@
<ol> <ol>
<span class="types"><span class="type">Checkbox</span></span> <span class="types"><span class="type">Checkbox</span></span>
checkbox component <a href="../modules/Checkbox.html#">Checkbox</a> component
</ol> </ol>
@ -515,7 +478,7 @@
<strong>new_checkbox_group(self, nodes, callback[, click_nodes=node])</strong> <strong>new_checkbox_group(self, nodes, callback[, click_nodes=node])</strong>
</dt> </dt>
<dd> <dd>
Create checkbox_group component Create <a href="../modules/CheckboxGroup.html#">CheckboxGroup</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -543,7 +506,7 @@
<ol> <ol>
<span class="types"><span class="type">CheckboxGroup</span></span> <span class="types"><span class="type">CheckboxGroup</span></span>
checkbox_group component <a href="../modules/CheckboxGroup.html#">CheckboxGroup</a> component
</ol> </ol>
@ -555,7 +518,7 @@
<strong>new_data_list(self, druid_scroll, druid_grid, create_function)</strong> <strong>new_data_list(self, druid_scroll, druid_grid, create_function)</strong>
</dt> </dt>
<dd> <dd>
Create data list basic component Create <a href="../modules/DataList.html#">DataList</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -582,7 +545,7 @@
<ol> <ol>
<span class="types"><span class="type">DataList</span></span> <span class="types"><span class="type">DataList</span></span>
data_list component <a href="../modules/DataList.html#">DataList</a> component
</ol> </ol>
@ -594,7 +557,7 @@
<strong>new_drag(self, node, on_drag_callback)</strong> <strong>new_drag(self, node, on_drag_callback)</strong>
</dt> </dt>
<dd> <dd>
Create drag basic component Create <a href="../modules/Drag.html#">Drag</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -617,7 +580,7 @@
<ol> <ol>
<span class="types"><span class="type">Drag</span></span> <span class="types"><span class="type">Drag</span></span>
drag component <a href="../modules/Drag.html#">Drag</a> component
</ol> </ol>
@ -629,7 +592,7 @@
<strong>new_dynamic_grid(self, parent)</strong> <strong>new_dynamic_grid(self, parent)</strong>
</dt> </dt>
<dd> <dd>
Create dynamic grid component Create <a href="../modules/DynamicGrid.html#">DynamicGrid</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -648,48 +611,7 @@
<ol> <ol>
<span class="types"><span class="type">DynamicGrid</span></span> <span class="types"><span class="type">DynamicGrid</span></span>
grid component <a href="../modules/DynamicGrid.html#">DynamicGrid</a> component
</ol>
</dd>
<dt>
<a name = "new_grid"></a>
<strong>new_grid(self, parent, element[, in_row=1])</strong>
</dt>
<dd>
Create grid basic component
Deprecated
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">DruidInstance</span></span>
</li>
<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>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">StaticGrid</span></span>
grid component
</ol> </ol>
@ -701,7 +623,7 @@
<strong>new_hotkey(self, keys_array, callback[, params])</strong> <strong>new_hotkey(self, keys_array, callback[, params])</strong>
</dt> </dt>
<dd> <dd>
Create hotkey component Create <a href="../modules/Hotkey.html#">Hotkey</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -729,7 +651,7 @@
<ol> <ol>
<span class="types"><span class="type">Hotkey</span></span> <span class="types"><span class="type">Hotkey</span></span>
hotkey component <a href="../modules/Hotkey.html#">Hotkey</a> component
</ol> </ol>
@ -741,7 +663,7 @@
<strong>new_hover(self, node, on_hover_callback)</strong> <strong>new_hover(self, node, on_hover_callback)</strong>
</dt> </dt>
<dd> <dd>
Create hover basic component Create <a href="../modules/Hover.html#">Hover</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -764,7 +686,7 @@
<ol> <ol>
<span class="types"><span class="type">Hover</span></span> <span class="types"><span class="type">Hover</span></span>
hover component <a href="../modules/Hover.html#">Hover</a> component
</ol> </ol>
@ -776,7 +698,7 @@
<strong>new_input(self, click_node, text_node[, keyboard_type])</strong> <strong>new_input(self, click_node, text_node[, keyboard_type])</strong>
</dt> </dt>
<dd> <dd>
Create input component Create <a href="../modules/Input.html#">Input</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -804,7 +726,7 @@
<ol> <ol>
<span class="types"><span class="type">Input</span></span> <span class="types"><span class="type">Input</span></span>
input component <a href="../modules/Input.html#">Input</a> component
</ol> </ol>
@ -816,7 +738,7 @@
<strong>new_lang_text(self, node, locale_id, no_adjust)</strong> <strong>new_lang_text(self, node, locale_id, no_adjust)</strong>
</dt> </dt>
<dd> <dd>
Create lang_text component Create <a href="../modules/LangText.html#">LangText</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -843,7 +765,7 @@
<ol> <ol>
<span class="types"><span class="type">LangText</span></span> <span class="types"><span class="type">LangText</span></span>
lang_text component <a href="../modules/LangText.html#">LangText</a> component
</ol> </ol>
@ -855,7 +777,7 @@
<strong>new_layout(self, node, mode)</strong> <strong>new_layout(self, node, mode)</strong>
</dt> </dt>
<dd> <dd>
Create layout component Create <a href="../modules/Layout.html#">Layout</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -878,7 +800,7 @@
<ol> <ol>
<span class="types"><span class="type">Layout</span></span> <span class="types"><span class="type">Layout</span></span>
layout component <a href="../modules/Layout.html#">Layout</a> component
</ol> </ol>
@ -890,7 +812,7 @@
<strong>new_progress(self, node, key[, init_value=1])</strong> <strong>new_progress(self, node, key[, init_value=1])</strong>
</dt> </dt>
<dd> <dd>
Create progress component Create <a href="../modules/Progress.html#">Progress</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -918,7 +840,7 @@
<ol> <ol>
<span class="types"><span class="type">Progress</span></span> <span class="types"><span class="type">Progress</span></span>
progress component <a href="../modules/Progress.html#">Progress</a> component
</ol> </ol>
@ -930,7 +852,7 @@
<strong>new_radio_group(self, nodes, callback[, click_nodes=node])</strong> <strong>new_radio_group(self, nodes, callback[, click_nodes=node])</strong>
</dt> </dt>
<dd> <dd>
Create radio_group component Create <a href="../modules/RadioGroup.html#">RadioGroup</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -958,7 +880,45 @@
<ol> <ol>
<span class="types"><span class="type">RadioGroup</span></span> <span class="types"><span class="type">RadioGroup</span></span>
radio_group component <a href="../modules/RadioGroup.html#">RadioGroup</a> component
</ol>
</dd>
<dt>
<a name = "new_rich_text"></a>
<strong>new_rich_text(self[, template[, nodes]])</strong>
</dt>
<dd>
Create <a href="../modules/RichText.html#">RichText</a> component.
As a template please check rich_text.gui layout.
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">DruidInstance</span></span>
</li>
<li><span class="parameter">template</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span>
Template name if used
(<em>optional</em>)
</li>
<li><span class="parameter">nodes</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
Nodes table from gui.clone_tree
(<em>optional</em>)
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">RichText</span></span>
<a href="../modules/RichText.html#">RichText</a> component
</ol> </ol>
@ -970,7 +930,7 @@
<strong>new_scroll(self, view_node, content_node)</strong> <strong>new_scroll(self, view_node, content_node)</strong>
</dt> </dt>
<dd> <dd>
Create scroll basic component Create <a href="../modules/Scroll.html#">Scroll</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -993,7 +953,7 @@
<ol> <ol>
<span class="types"><span class="type">Scroll</span></span> <span class="types"><span class="type">Scroll</span></span>
scroll component <a href="../modules/Scroll.html#">Scroll</a> component
</ol> </ol>
@ -1005,7 +965,7 @@
<strong>new_slider(self, node, end_pos[, callback])</strong> <strong>new_slider(self, node, end_pos[, callback])</strong>
</dt> </dt>
<dd> <dd>
Create slider component Create <a href="../modules/Slider.html#">Slider</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -1033,7 +993,7 @@
<ol> <ol>
<span class="types"><span class="type">Slider</span></span> <span class="types"><span class="type">Slider</span></span>
slider component <a href="../modules/Slider.html#">Slider</a> component
</ol> </ol>
@ -1045,7 +1005,7 @@
<strong>new_static_grid(self, parent, element[, in_row=1])</strong> <strong>new_static_grid(self, parent, element[, in_row=1])</strong>
</dt> </dt>
<dd> <dd>
Create static grid basic component Create <a href="../modules/StaticGrid.html#">StaticGrid</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -1073,7 +1033,7 @@
<ol> <ol>
<span class="types"><span class="type">StaticGrid</span></span> <span class="types"><span class="type">StaticGrid</span></span>
grid component <a href="../modules/StaticGrid.html#">StaticGrid</a> component
</ol> </ol>
@ -1085,7 +1045,7 @@
<strong>new_swipe(self, node, on_swipe_callback)</strong> <strong>new_swipe(self, node, on_swipe_callback)</strong>
</dt> </dt>
<dd> <dd>
Create swipe basic component Create <a href="../modules/Swipe.html#">Swipe</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -1108,7 +1068,7 @@
<ol> <ol>
<span class="types"><span class="type">Swipe</span></span> <span class="types"><span class="type">Swipe</span></span>
swipe component <a href="../modules/Swipe.html#">Swipe</a> component
</ol> </ol>
@ -1120,7 +1080,7 @@
<strong>new_text(self, node[, value[, no_adjust]])</strong> <strong>new_text(self, node[, value[, no_adjust]])</strong>
</dt> </dt>
<dd> <dd>
Create text basic component Create <a href="../modules/Text.html#">Text</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -1148,8 +1108,8 @@
<h3>Returns:</h3> <h3>Returns:</h3>
<ol> <ol>
<span class="types"><span class="type">Tet</span></span> <span class="types"><span class="type">Text</span></span>
text component <a href="../modules/Text.html#">Text</a> component
</ol> </ol>
@ -1161,7 +1121,7 @@
<strong>new_timer(self, node, seconds_from[, seconds_to=0[, callback]])</strong> <strong>new_timer(self, node, seconds_from[, seconds_to=0[, callback]])</strong>
</dt> </dt>
<dd> <dd>
Create timer component Create <a href="../modules/Timer.html#">Timer</a> component
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -1194,7 +1154,7 @@
<ol> <ol>
<span class="types"><span class="type">Timer</span></span> <span class="types"><span class="type">Timer</span></span>
timer component <a href="../modules/Timer.html#">Timer</a> component
</ol> </ol>
@ -1206,7 +1166,8 @@
<strong>on_input(self, action_id, action)</strong> <strong>on_input(self, action_id, action)</strong>
</dt> </dt>
<dd> <dd>
Druid on_input function Call this in gui_script on_input function.
<p> Used for almost all components
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -1241,7 +1202,8 @@
<strong>on_message(self, message_id, message, sender)</strong> <strong>on_message(self, message_id, message, sender)</strong>
</dt> </dt>
<dd> <dd>
Druid on_message function Call this in gui_script on_message function.
<p> Used for special actions. See SPECIFIC_UI_MESSAGES table
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -1274,8 +1236,8 @@
<strong>remove(self, component)</strong> <strong>remove(self, component)</strong>
</dt> </dt>
<dd> <dd>
Remove component from druid instance. Remove created component from Druid instance.
Component `on_remove` function will be invoked, if exist. <p> Component `on_remove` function will be invoked, if exist.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -1301,7 +1263,7 @@
</dt> </dt>
<dd> <dd>
Set blacklist components for input processing. Set blacklist components for input processing.
If blacklist is not empty and component contains in this list, <p> If blacklist is not empty and component contains in this list,
component will be not processed on input step component will be not processed on input step
@ -1318,31 +1280,6 @@
</li> </li>
</ul> </ul>
</dd>
<dt>
<a name = "set_debug"></a>
<strong>set_debug(self, is_debug)</strong>
</dt>
<dd>
Set debug mode for current Druid instance. It's enable debug log messages
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">DruidInstance</span></span>
<a href="../modules/DruidInstance.html#">DruidInstance</a>
</li>
<li><span class="parameter">is_debug</span>
<span class="types"><span class="type">bool</span></span>
</li>
</ul>
<h3>Returns:</h3> <h3>Returns:</h3>
<ol> <ol>
@ -1360,7 +1297,7 @@
</dt> </dt>
<dd> <dd>
Set whitelist components for input processing. Set whitelist components for input processing.
If whitelist is not empty and component not contains in this list, <p> If whitelist is not empty and component not contains in this list,
component will be not processed on input step component will be not processed on input step
@ -1377,6 +1314,12 @@
</li> </li>
</ul> </ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">self</span></span>
<a href="../modules/DruidInstance.html#">DruidInstance</a>
</ol>
@ -1387,7 +1330,8 @@
<strong>update(self, dt)</strong> <strong>update(self, dt)</strong>
</dt> </dt>
<dd> <dd>
Druid update function Call this in gui_script update function.
<p> Used for: scroll, progress, timer components
<h3>Parameters:</h3> <h3>Parameters:</h3>

7
docs/modules/DynamicGrid.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -47,6 +47,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><strong>DynamicGrid</strong></li> <li><strong>DynamicGrid</strong></li>
@ -60,13 +61,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -75,7 +76,7 @@
<h1>Module <code>DynamicGrid</code></h1> <h1>Module <code>DynamicGrid</code></h1>
<p>Component to handle placing components in row</p> <p>Component to handle placing components in row</p>
<p></p> <p> <a href="https://insality.github.io/druid/druid/index.html?example=general_grid" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>

630
docs/modules/Helper.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -46,6 +46,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -59,13 +60,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -73,55 +74,109 @@
<div id="content"> <div id="content">
<h1>Module <code>Helper</code></h1> <h1>Module <code>Helper</code></h1>
<p>Druid helper module for gui layouts</p> <p>Helper module with various usefull GUI functions.</p>
<p></p> <p></p>
<h3>Usage:</h3>
<ul>
<pre class="example">local helper = require(&quot;druid.helper&quot;)
helper.centrate_nodes(0, node_1, node_2)
</pre>
</ul>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>
<table class="function_list"> <table class="function_list">
<tr> <tr>
<td class="name" nowrap><a href="#helper.centrate_icon_with_text">helper.centrate_icon_with_text([icon_node[, text_node[, margin=0]]])</a></td> <td class="name" nowrap><a href="#helper.add_array">helper.add_array(target[, source])</a></td>
<td class="summary">Center two nodes.</td> <td class="summary">Add all elements from source array to the target array</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#helper.centrate_nodes">helper.centrate_nodes([margin=0[, ...]])</a></td> <td class="name" nowrap><a href="#helper.centrate_nodes">helper.centrate_nodes([margin=0], ...)</a></td>
<td class="summary">Center several nodes nodes.</td> <td class="summary">Centerate nodes by x position with margin.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#helper.centrate_text_with_icon">helper.centrate_text_with_icon([text_node][, icon_node], margin)</a></td> <td class="name" nowrap><a href="#helper.clamp">helper.clamp(a, min, max)</a></td>
<td class="summary">Center two nodes.</td> <td class="summary">Clamp value between min and max</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#helper.deprecated">helper.deprecated(message)</a></td> <td class="name" nowrap><a href="#helper.contains">helper.contains(t, value)</a></td>
<td class="summary">Show deprecated message.</td> <td class="summary">Check if value is in array and return index of it</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#helper.get_border">helper.get_border(node, offset)</a></td> <td class="name" nowrap><a href="#helper.deepcopy">helper.deepcopy(orig_table)</a></td>
<td class="summary">Make a copy table with all nested tables</td>
</tr>
<tr>
<td class="name" nowrap><a href="#helper.distance">helper.distance(x1, y1, x2, y2)</a></td>
<td class="summary">Calculate distance between two points</td>
</tr>
<tr>
<td class="name" nowrap><a href="#helper.get_border">helper.get_border(node[, offset])</a></td>
<td class="summary">Distance from node position to his borders</td> <td class="summary">Distance from node position to his borders</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#helper.get_closest_stencil_node">helper.get_closest_stencil_node(node)</a></td> <td class="name" nowrap><a href="#helper.get_closest_stencil_node">helper.get_closest_stencil_node(node)</a></td>
<td class="summary">Return closest non inverted clipping parent node for node</td> <td class="summary">Return closest non inverted clipping parent node for given node</td>
</tr>
<tr>
<td class="name" nowrap><a href="#helper.get_gui_scale">helper.get_gui_scale()</a></td>
<td class="summary">Get current GUI scale for each side</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#helper.get_pivot_offset">helper.get_pivot_offset(pivot)</a></td> <td class="name" nowrap><a href="#helper.get_pivot_offset">helper.get_pivot_offset(pivot)</a></td>
<td class="summary">Get node offset for given gui pivot</td> <td class="summary">Get node offset for given GUI pivot.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#helper.is_enabled">helper.is_enabled(node)</a></td> <td class="name" nowrap><a href="#helper.get_scaled_size">helper.get_scaled_size(node)</a></td>
<td class="summary">Check if node is enabled in gui hierarchy.</td> <td class="summary">Get node size adjusted by scale</td>
</tr>
<tr>
<td class="name" nowrap><a href="#helper.get_scene_scale">helper.get_scene_scale(node, include_passed_node_scale)</a></td>
<td class="summary">Get cumulative parent's node scale</td>
</tr>
<tr>
<td class="name" nowrap><a href="#helper.get_screen_aspect_koef">helper.get_screen_aspect_koef()</a></td>
<td class="summary">Get current screen stretch multiplier for each side</td>
</tr>
<tr>
<td class="name" nowrap><a href="#helper.get_text_metrics_from_node">helper.get_text_metrics_from_node(text_node)</a></td>
<td class="summary">Get text metric from GUI node.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#helper.insert_with_shift">helper.insert_with_shift(array, item[, index[, shift_policy]])</a></td>
<td class="summary">Add value to array with shift policy</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#helper.is_mobile">helper.is_mobile()</a></td> <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> <td class="summary">Check if device is native mobile (Android or iOS)</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#helper.is_web">helper.is_web()</a></td> <td class="name" nowrap><a href="#helper.is_web">helper.is_web()</a></td>
<td class="summary">Check if device is HTML5</td> <td class="summary">Check if device is HTML5</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#table_to_string">table_to_string(t)</a></td> <td class="name" nowrap><a href="#helper.lerp">helper.lerp(a, b, t)</a></td>
<td class="summary">Transform table to oneline string</td> <td class="summary">Lerp between two values</td>
</tr>
<tr>
<td class="name" nowrap><a href="#helper.remove_with_shift">helper.remove_with_shift(array[, index[, shift_policy]])</a></td>
<td class="summary">Remove value from array with shift policy</td>
</tr>
<tr>
<td class="name" nowrap><a href="#helper.round">helper.round(num[, num_decimal_places=0])</a></td>
<td class="summary">Round number to specified decimal places</td>
</tr>
<tr>
<td class="name" nowrap><a href="#helper.sign">helper.sign(val)</a></td>
<td class="summary">Return sign of value (-1, 0, 1)</td>
</tr>
<tr>
<td class="name" nowrap><a href="#helper.step">helper.step(current, target, step)</a></td>
<td class="summary">Move value from current to target value with step amount</td>
</tr>
<tr>
<td class="name" nowrap><a href="#helper.table_to_string">helper.table_to_string(t)</a></td>
<td class="summary">Simple table to one-line string converter</td>
</tr> </tr>
</table> </table>
@ -133,34 +188,32 @@
<dl class="function"> <dl class="function">
<dt> <dt>
<a name = "helper.centrate_icon_with_text"></a> <a name = "helper.add_array"></a>
<strong>helper.centrate_icon_with_text([icon_node[, text_node[, margin=0]]])</strong> <strong>helper.add_array(target[, source])</strong>
</dt> </dt>
<dd> <dd>
Center two nodes. Add all elements from source array to the target array
Nodes will be center around 0 x position
icon_node will be first (at left side)
<h3>Parameters:</h3> <h3>Parameters:</h3>
<ul> <ul>
<li><span class="parameter">icon_node</span> <li><span class="parameter">target</span>
<span class="types"><span class="type">box</span></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
Gui box node Array to put elements from source
(<em>optional</em>)
</li> </li>
<li><span class="parameter">text_node</span> <li><span class="parameter">source</span>
<span class="types"><span class="type">text</span></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
Gui text node The source array to get elements from
(<em>optional</em>) (<em>optional</em>)
</li> </li>
<li><span class="parameter">margin</span>
<span class="types"><span class="type">number</span></span>
Offset between nodes
(<em>default</em> 0)
</li>
</ul> </ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">array</span></span>
The target array
</ol>
@ -168,11 +221,12 @@
</dd> </dd>
<dt> <dt>
<a name = "helper.centrate_nodes"></a> <a name = "helper.centrate_nodes"></a>
<strong>helper.centrate_nodes([margin=0[, ...]])</strong> <strong>helper.centrate_nodes([margin=0], ...)</strong>
</dt> </dt>
<dd> <dd>
Center several nodes nodes. Centerate nodes by x position with margin.
Nodes will be center around 0 x position <p> This functions calculate total width of nodes and set position for each node.
The centrate will be around 0 x position.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -183,9 +237,7 @@
(<em>default</em> 0) (<em>default</em> 0)
</li> </li>
<li><span class="parameter">...</span> <li><span class="parameter">...</span>
<span class="types"><span class="type">Node</span></span> Gui nodes
Any count of gui Node
(<em>optional</em>)
</li> </li>
</ul> </ul>
@ -195,54 +247,131 @@
</dd> </dd>
<dt> <dt>
<a name = "helper.centrate_text_with_icon"></a> <a name = "helper.clamp"></a>
<strong>helper.centrate_text_with_icon([text_node][, icon_node], margin)</strong> <strong>helper.clamp(a, min, max)</strong>
</dt> </dt>
<dd> <dd>
Center two nodes. Clamp value between min and max
Nodes will be center around 0 x position
text_node will be first (at left side)
<h3>Parameters:</h3> <h3>Parameters:</h3>
<ul> <ul>
<li><span class="parameter">text_node</span> <li><span class="parameter">a</span>
<span class="types"><span class="type">text</span></span>
Gui text node
(<em>optional</em>)
</li>
<li><span class="parameter">icon_node</span>
<span class="types"><span class="type">box</span></span>
Gui box node
(<em>optional</em>)
</li>
<li><span class="parameter">margin</span>
<span class="types"><span class="type">number</span></span> <span class="types"><span class="type">number</span></span>
Offset between nodes Value
</li>
<li><span class="parameter">min</span>
<span class="types"><span class="type">number</span></span>
Min value
</li>
<li><span class="parameter">max</span>
<span class="types"><span class="type">number</span></span>
Max value
</li> </li>
</ul> </ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">number</span></span>
Clamped value
</ol>
</dd> </dd>
<dt> <dt>
<a name = "helper.deprecated"></a> <a name = "helper.contains"></a>
<strong>helper.deprecated(message)</strong> <strong>helper.contains(t, value)</strong>
</dt> </dt>
<dd> <dd>
Show deprecated message. Once time per message Check if value is in array and return index of it
<h3>Parameters:</h3> <h3>Parameters:</h3>
<ul> <ul>
<li><span class="parameter">message</span> <li><span class="parameter">t</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
The deprecated message Array
</li>
<li><span class="parameter">value</span>
Value
</li> </li>
</ul> </ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">number</span> or <span class="type">nil</span></span>
Index of value or nil
</ol>
</dd>
<dt>
<a name = "helper.deepcopy"></a>
<strong>helper.deepcopy(orig_table)</strong>
</dt>
<dd>
Make a copy table with all nested tables
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">orig_table</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
Original table
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
Copy of original table
</ol>
</dd>
<dt>
<a name = "helper.distance"></a>
<strong>helper.distance(x1, y1, x2, y2)</strong>
</dt>
<dd>
Calculate distance between two points
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">x1</span>
<span class="types"><span class="type">number</span></span>
First point x
</li>
<li><span class="parameter">y1</span>
<span class="types"><span class="type">number</span></span>
First point y
</li>
<li><span class="parameter">x2</span>
<span class="types"><span class="type">number</span></span>
Second point x
</li>
<li><span class="parameter">y2</span>
<span class="types"><span class="type">number</span></span>
Second point y
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">number</span></span>
Distance
</ol>
@ -250,7 +379,7 @@
</dd> </dd>
<dt> <dt>
<a name = "helper.get_border"></a> <a name = "helper.get_border"></a>
<strong>helper.get_border(node, offset)</strong> <strong>helper.get_border(node[, offset])</strong>
</dt> </dt>
<dd> <dd>
Distance from node position to his borders Distance from node position to his borders
@ -260,18 +389,20 @@
<ul> <ul>
<li><span class="parameter">node</span> <li><span class="parameter">node</span>
<span class="types"><span class="type">node</span></span> <span class="types"><span class="type">node</span></span>
The gui node to check GUI node
</li> </li>
<li><span class="parameter">offset</span> <li><span class="parameter">offset</span>
<span class="types"><span class="type">vector3</span></span> <span class="types"><span class="type">vector3</span></span>
The offset to add to result Offset from node position. Pass current node position to get non relative border values
(<em>optional</em>)
</li> </li>
</ul> </ul>
<h3>Returns:</h3> <h3>Returns:</h3>
<ol> <ol>
vector4 Vector with distance to node border: (left, top, right, down) <span class="types"><span class="type">vector4</span></span>
Vector4 with border values (left, top, right, down)
</ol> </ol>
@ -283,14 +414,14 @@
<strong>helper.get_closest_stencil_node(node)</strong> <strong>helper.get_closest_stencil_node(node)</strong>
</dt> </dt>
<dd> <dd>
Return closest non inverted clipping parent node for node Return closest non inverted clipping parent node for given node
<h3>Parameters:</h3> <h3>Parameters:</h3>
<ul> <ul>
<li><span class="parameter">node</span> <li><span class="parameter">node</span>
<span class="types"><span class="type">node</span></span> <span class="types"><span class="type">node</span></span>
Gui node GUI node
</li> </li>
</ul> </ul>
@ -298,7 +429,30 @@
<ol> <ol>
<span class="types"><span class="type">node</span> or <span class="type">nil</span></span> <span class="types"><span class="type">node</span> or <span class="type">nil</span></span>
The clipping node The closest stencil node or nil
</ol>
</dd>
<dt>
<a name = "helper.get_gui_scale"></a>
<strong>helper.get_gui_scale()</strong>
</dt>
<dd>
Get current GUI scale for each side
<h3>Returns:</h3>
<ol>
<li>
<span class="types"><span class="type">number</span></span>
scale_x</li>
<li>
<span class="types"><span class="type">number</span></span>
scale_y</li>
</ol> </ol>
@ -310,7 +464,8 @@
<strong>helper.get_pivot_offset(pivot)</strong> <strong>helper.get_pivot_offset(pivot)</strong>
</dt> </dt>
<dd> <dd>
Get node offset for given gui pivot Get node offset for given GUI pivot.
<p> Offset shown in [-0.5 .. 0.5] range, where -0.5 is left or bottom, 0.5 is right or top.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -325,7 +480,7 @@
<ol> <ol>
<span class="types"><span class="type">vector3</span></span> <span class="types"><span class="type">vector3</span></span>
Vector offset with [-1..1] values Vector offset with [-0.5..0.5] values
</ol> </ol>
@ -333,12 +488,38 @@
</dd> </dd>
<dt> <dt>
<a name = "helper.is_enabled"></a> <a name = "helper.get_scaled_size"></a>
<strong>helper.is_enabled(node)</strong> <strong>helper.get_scaled_size(node)</strong>
</dt> </dt>
<dd> <dd>
Check if node is enabled in gui hierarchy. Get node size adjusted by scale
Return false, if node or any his parent is disabled
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">node</span>
<span class="types"><span class="type">node</span></span>
GUI node
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">vector3</span></span>
Scaled size
</ol>
</dd>
<dt>
<a name = "helper.get_scene_scale"></a>
<strong>helper.get_scene_scale(node, include_passed_node_scale)</strong>
</dt>
<dd>
Get cumulative parent's node scale
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -347,13 +528,116 @@
<span class="types"><span class="type">node</span></span> <span class="types"><span class="type">node</span></span>
Gui node Gui node
</li> </li>
<li><span class="parameter">include_passed_node_scale</span>
<span class="types"><span class="type">bool</span></span>
True if add current node scale to result
</li>
</ul> </ul>
<h3>Returns:</h3> <h3>Returns:</h3>
<ol> <ol>
<span class="types"><span class="type">bool</span></span> <span class="types"><span class="type">vector3</span></span>
Is enabled in hierarchy The scene node scale
</ol>
</dd>
<dt>
<a name = "helper.get_screen_aspect_koef"></a>
<strong>helper.get_screen_aspect_koef()</strong>
</dt>
<dd>
Get current screen stretch multiplier for each side
<h3>Returns:</h3>
<ol>
<li>
<span class="types"><span class="type">number</span></span>
stretch_x</li>
<li>
<span class="types"><span class="type">number</span></span>
stretch_y</li>
</ol>
</dd>
<dt>
<a name = "helper.get_text_metrics_from_node"></a>
<strong>helper.get_text_metrics_from_node(text_node)</strong>
</dt>
<dd>
Get text metric from GUI node.
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">text_node</span>
<span class="types"><span class="type">Node</span></span>
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">GUITextMetrics</span></span>
</ol>
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="global">type</span> GUITextMetrics = {
width: number,
height: number,
max_ascent: number,
max_descent: number
}</pre>
</ul>
</dd>
<dt>
<a name = "helper.insert_with_shift"></a>
<strong>helper.insert_with_shift(array, item[, index[, shift_policy]])</strong>
</dt>
<dd>
Add value to array with shift policy Shift policy can be: left, right, no_shift
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">array</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
Array
</li>
<li><span class="parameter">item</span>
Item to insert
</li>
<li><span class="parameter">index</span>
<span class="types"><span class="type">number</span></span>
Index to insert. If nil, item will be inserted at the end of array
(<em>optional</em>)
</li>
<li><span class="parameter">shift_policy</span>
<span class="types"><span class="type">const.SHIFT</span></span>
Shift policy
(<em>optional</em>)
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">item</span></span>
Inserted item
</ol> </ol>
@ -365,10 +649,16 @@
<strong>helper.is_mobile()</strong> <strong>helper.is_mobile()</strong>
</dt> </dt>
<dd> <dd>
Check if device is mobile (Android or iOS) Check if device is native mobile (Android or iOS)
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">bool</span></span>
Is mobile
</ol>
@ -383,17 +673,189 @@
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">bool</span></span>
Is web
</ol>
</dd> </dd>
<dt> <dt>
<a name = "table_to_string"></a> <a name = "helper.lerp"></a>
<strong>table_to_string(t)</strong> <strong>helper.lerp(a, b, t)</strong>
</dt> </dt>
<dd> <dd>
Transform table to oneline string Lerp between two values
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">a</span>
<span class="types"><span class="type">number</span></span>
First value
</li>
<li><span class="parameter">b</span>
<span class="types"><span class="type">number</span></span>
Second value
</li>
<li><span class="parameter">t</span>
<span class="types"><span class="type">number</span></span>
Lerp amount
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">number</span></span>
Lerped value
</ol>
</dd>
<dt>
<a name = "helper.remove_with_shift"></a>
<strong>helper.remove_with_shift(array[, index[, shift_policy]])</strong>
</dt>
<dd>
Remove value from array with shift policy Shift policy can be: left, right, no_shift
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">array</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
Array
</li>
<li><span class="parameter">index</span>
<span class="types"><span class="type">number</span></span>
Index to remove. If nil, item will be removed from the end of array
(<em>optional</em>)
</li>
<li><span class="parameter">shift_policy</span>
<span class="types"><span class="type">const.SHIFT</span></span>
Shift policy
(<em>optional</em>)
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">item</span></span>
Removed item
</ol>
</dd>
<dt>
<a name = "helper.round"></a>
<strong>helper.round(num[, num_decimal_places=0])</strong>
</dt>
<dd>
Round number to specified decimal places
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">num</span>
<span class="types"><span class="type">number</span></span>
Number
</li>
<li><span class="parameter">num_decimal_places</span>
<span class="types"><span class="type">number</span></span>
Decimal places
(<em>default</em> 0)
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">number</span></span>
Rounded number
</ol>
</dd>
<dt>
<a name = "helper.sign"></a>
<strong>helper.sign(val)</strong>
</dt>
<dd>
Return sign of value (-1, 0, 1)
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">val</span>
<span class="types"><span class="type">number</span></span>
Value
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">number</span></span>
Sign
</ol>
</dd>
<dt>
<a name = "helper.step"></a>
<strong>helper.step(current, target, step)</strong>
</dt>
<dd>
Move value from current to target value with step amount
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">current</span>
<span class="types"><span class="type">number</span></span>
Current value
</li>
<li><span class="parameter">target</span>
<span class="types"><span class="type">number</span></span>
Target value
</li>
<li><span class="parameter">step</span>
<span class="types"><span class="type">number</span></span>
Step amount
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">number</span></span>
New value
</ol>
</dd>
<dt>
<a name = "helper.table_to_string"></a>
<strong>helper.table_to_string(t)</strong>
</dt>
<dd>
Simple table to one-line string converter
<h3>Parameters:</h3> <h3>Parameters:</h3>

7
docs/modules/Hotkey.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -48,6 +48,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -61,13 +62,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -76,7 +77,7 @@
<h1>Module <code>Hotkey</code></h1> <h1>Module <code>Hotkey</code></h1>
<p>Druid hotkey component</p> <p>Druid hotkey component</p>
<p></p> <p> <a href="https://insality.github.io/druid/druid/index.html?example=general_hotkey" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>

75
docs/modules/Hover.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -47,6 +47,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -60,13 +61,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -89,6 +90,14 @@
<td class="summary">Return current hover enabled state</td> <td class="summary">Return current hover enabled state</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#is_hovered">is_hovered(self)</a></td>
<td class="summary">Return current hover state.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#is_mouse_hovered">is_mouse_hovered(self)</a></td>
<td class="summary">Return current hover state.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_click_zone">set_click_zone(self, zone)</a></td> <td class="name" nowrap><a href="#set_click_zone">set_click_zone(self, zone)</a></td>
<td class="summary">Strict hover click area.</td> <td class="summary">Strict hover click area.</td>
</tr> </tr>
@ -109,11 +118,11 @@
<table class="function_list"> <table class="function_list">
<tr> <tr>
<td class="name" nowrap><a href="#on_hover">on_hover</a></td> <td class="name" nowrap><a href="#on_hover">on_hover</a></td>
<td class="summary">On hover callback(self, state)</td> <td class="summary">On hover callback(self, state, hover_instance)</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#on_mouse_hover">on_mouse_hover</a></td> <td class="name" nowrap><a href="#on_mouse_hover">on_mouse_hover</a></td>
<td class="summary">On mouse hover callback(self, state)</td> <td class="summary">On mouse hover callback(self, state, hover_instance)</td>
</tr> </tr>
</table> </table>
@ -179,6 +188,60 @@
</dd>
<dt>
<a name = "is_hovered"></a>
<strong>is_hovered(self)</strong>
</dt>
<dd>
Return current hover state. True if touch action was on the node at current time
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Hover</span></span>
<a href="../modules/Hover.html#">Hover</a>
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">bool</span></span>
The current hovered state
</ol>
</dd>
<dt>
<a name = "is_mouse_hovered"></a>
<strong>is_mouse_hovered(self)</strong>
</dt>
<dd>
Return current hover state. True if nil action_id (usually desktop mouse) was on the node at current time
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Hover</span></span>
<a href="../modules/Hover.html#">Hover</a>
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">bool</span></span>
The current hovered state
</ol>
</dd> </dd>
<dt> <dt>
<a name = "set_click_zone"></a> <a name = "set_click_zone"></a>
@ -292,7 +355,7 @@
<strong>on_hover</strong> <strong>on_hover</strong>
</dt> </dt>
<dd> <dd>
On hover callback(self, state) On hover callback(self, state, hover_instance)
<ul> <ul>
@ -312,7 +375,7 @@
<strong>on_mouse_hover</strong> <strong>on_mouse_hover</strong>
</dt> </dt>
<dd> <dd>
On mouse hover callback(self, state) On mouse hover callback(self, state, hover_instance)
<ul> <ul>

15
docs/modules/Input.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -48,6 +48,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -61,13 +62,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -77,7 +78,8 @@
<h1>Module <code>Input</code></h1> <h1>Module <code>Input</code></h1>
<p>Druid input text component.</p> <p>Druid input text component.</p>
<p> <p>
Carry on user text input</p> Carry on user text input
<p> <a href="https://insality.github.io/druid/druid/index.html?example=general_input" target="_blank"><b>Example Link</b></a></p>
<h3>Info:</h3> <h3>Info:</h3>
<ul> <ul>
<li><strong>Author</strong>: Part of code from Britzl gooey input component</li> <li><strong>Author</strong>: Part of code from Britzl gooey input component</li>
@ -232,7 +234,7 @@
</li> </li>
<li><span class="parameter">click_node</span> <li><span class="parameter">click_node</span>
<span class="types"><span class="type">node</span></span> <span class="types"><span class="type">node</span></span>
Button node to enabled input component Node to enabled input component
</li> </li>
<li><span class="parameter">text_node</span> <li><span class="parameter">text_node</span>
<span class="types"><span class="type">node</span> or <span class="type">Text</span></span> <span class="types"><span class="type">node</span> or <span class="type">Text</span></span>
@ -434,6 +436,11 @@
If true, call unselect on select selected input If true, call unselect on select selected input
(<em>default</em> false) (<em>default</em> false)
</li> </li>
<li><span class="parameter">NO_CONSUME_INPUT_WHILE_SELECTED</span>
<span class="types"><span class="type">bool</span></span>
If true, will not consume input while input is selected. It's allow to interact with other components while input is selected (text input still captured)
(<em>default</em> false)
</li>
<li><span class="parameter">on_select</span> <li><span class="parameter">on_select</span>
<span class="types"><span class="type">function</span></span> <span class="types"><span class="type">function</span></span>
(self, button_node) Callback on input field selecting (self, button_node) Callback on input field selecting

36
docs/modules/LangText.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -47,6 +47,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -60,13 +61,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -74,9 +75,15 @@
<div id="content"> <div id="content">
<h1>Module <code>LangText</code></h1> <h1>Module <code>LangText</code></h1>
<p>Component to handle all GUI texts <p>Component to wrap over GUI Text nodes with localization helpers
Good working with localization system</p> <p> <b># Overview #</b>
<p></p> <p> • The initialization of druid.set_text_function is required to enable localization
using the localization ID.</p>
<p>
<p> • The LangText component supports up to 7 string format parameters.
This limitation exists due to certain issues with using ... arguments.
<p> <b># Notes #</b>
<p> <a href="https://insality.github.io/druid/druid/index.html?example=texts_lang_text" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>
@ -86,8 +93,8 @@
<td class="summary">Format string with new text params on localized text</td> <td class="summary">Format string with new text params on localized text</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#init">init(self, node, locale_id, no_adjust)</a></td> <td class="name" nowrap><a href="#init">init(self, node, locale_id[, adjust_type=downscale])</a></td>
<td class="summary">Component init function</td> <td class="summary">The <a href="../modules/LangText.html#">LangText</a> constructor</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_to">set_to(self, text)</a></td> <td class="name" nowrap><a href="#set_to">set_to(self, text)</a></td>
@ -181,10 +188,10 @@
</dd> </dd>
<dt> <dt>
<a name = "init"></a> <a name = "init"></a>
<strong>init(self, node, locale_id, no_adjust)</strong> <strong>init(self, node, locale_id[, adjust_type=downscale])</strong>
</dt> </dt>
<dd> <dd>
Component init function The <a href="../modules/LangText.html#">LangText</a> constructor
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -194,16 +201,17 @@
<a href="../modules/LangText.html#">LangText</a> <a href="../modules/LangText.html#">LangText</a>
</li> </li>
<li><span class="parameter">node</span> <li><span class="parameter">node</span>
<span class="types"><span class="type">node</span></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a> or <span class="type">node</span></span>
The text node Node name or GUI Text Node itself
</li> </li>
<li><span class="parameter">locale_id</span> <li><span class="parameter">locale_id</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span>
Default locale id or text from node as default Default locale id or text from node as default
</li> </li>
<li><span class="parameter">no_adjust</span> <li><span class="parameter">adjust_type</span>
<span class="types"><span class="type">bool</span></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span>
If true, will not correct text size Adjust type for text. By default is DOWNSCALE. Look const.TEXT_ADJUST for reference
(<em>default</em> downscale)
</li> </li>
</ul> </ul>

42
docs/modules/Layout.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -47,6 +47,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -60,13 +61,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -75,7 +76,7 @@
<h1>Module <code>Layout</code></h1> <h1>Module <code>Layout</code></h1>
<p>Layout management on node</p> <p>Layout management on node</p>
<p></p> <p> <a href="https://insality.github.io/druid/druid/index.html?example=general_layout" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>
@ -97,6 +98,10 @@
<td class="summary">Component init function</td> <td class="summary">Component init function</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_max_gui_upscale">set_max_gui_upscale(self, max_gui_upscale)</a></td>
<td class="summary">Set max gui upscale for FIT adjust mode (or side).</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_max_size">set_max_size(self, max_size)</a></td> <td class="name" nowrap><a href="#set_max_size">set_max_size(self, max_size)</a></td>
<td class="summary">Set maximum size of layout node</td> <td class="summary">Set maximum size of layout node</td>
</tr> </tr>
@ -259,6 +264,37 @@
</dd>
<dt>
<a name = "set_max_gui_upscale"></a>
<strong>set_max_gui_upscale(self, max_gui_upscale)</strong>
</dt>
<dd>
Set max gui upscale for FIT adjust mode (or side). It happens on bigger render gui screen
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">Layout</span></span>
<a href="../modules/Layout.html#">Layout</a>
</li>
<li><span class="parameter">max_gui_upscale</span>
<span class="types"><span class="type">number</span></span>
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">Layout</span></span>
<a href="../modules/Layout.html#">Layout</a>
</ol>
</dd> </dd>
<dt> <dt>
<a name = "set_max_size"></a> <a name = "set_max_size"></a>

5
docs/modules/PinKnob.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -47,6 +47,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -60,13 +61,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>

27
docs/modules/Progress.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -48,6 +48,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -61,13 +62,13 @@
<li><strong>Progress</strong></li> <li><strong>Progress</strong></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -75,9 +76,16 @@
<div id="content"> <div id="content">
<h1>Module <code>Progress</code></h1> <h1>Module <code>Progress</code></h1>
<p>Basic progress bar component.</p> <p>Druid component to handle the progress bars.</p>
<p> <p>
For correct progress bar init it should be in max size from gui</p> <b># Overview #</b>
<p> <b># Notes #</b>
<p> • Progress Node should be fully filled in your GUI scene node. It will be the progress maximum size
<p> • Progress correct working with Slice9 nodes, it trying to set size by _set_size_ first, if it is not possible, it set up sizing via _set_scale_
<p> • Progress bar can fill only by vertical or horizontal size. If you want make diagonal progress bar, just rotate node in GUI scene
<p> • If you have glitchy or dark texture bug with progress bar, try to disable mipmaps in your texture profiles
<p>
<a href="https://insality.github.io/druid/druid/index.html?example=general_progress_bar" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>
@ -96,7 +104,7 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#init">init(self, node, key[, init_value=1])</a></td> <td class="name" nowrap><a href="#init">init(self, node, key[, init_value=1])</a></td>
<td class="summary">Component init function</td> <td class="summary"><a href="../modules/Progress.html#">Progress</a> constructor</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_max_size">set_max_size(self, max_size)</a></td> <td class="name" nowrap><a href="#set_max_size">set_max_size(self, max_size)</a></td>
@ -126,7 +134,7 @@
<table class="function_list"> <table class="function_list">
<tr> <tr>
<td class="name" nowrap><a href="#key">key</a></td> <td class="name" nowrap><a href="#key">key</a></td>
<td class="summary">The progress bar direction</td> <td class="summary">The progress bar direction.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#max_size">max_size</a></td> <td class="name" nowrap><a href="#max_size">max_size</a></td>
@ -229,7 +237,7 @@
<strong>init(self, node, key[, init_value=1])</strong> <strong>init(self, node, key[, init_value=1])</strong>
</dt> </dt>
<dd> <dd>
Component init function <a href="../modules/Progress.html#">Progress</a> constructor
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -240,7 +248,7 @@
</li> </li>
<li><span class="parameter">node</span> <li><span class="parameter">node</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a> or <a class="type" href="../modules/Progress.html#node">node</a></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a> or <a class="type" href="../modules/Progress.html#node">node</a></span>
Progress bar fill node or node name Node name or GUI Node itself.
</li> </li>
<li><span class="parameter">key</span> <li><span class="parameter">key</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span>
@ -419,7 +427,8 @@
<strong>key</strong> <strong>key</strong>
</dt> </dt>
<dd> <dd>
The progress bar direction The progress bar direction.
<p> The values are: "x" or "y". (const.SIDE.X or const.SIDE.Y)
<ul> <ul>

7
docs/modules/RadioGroup.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -47,6 +47,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -60,13 +61,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><strong>RadioGroup</strong></li> <li><strong>RadioGroup</strong></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -75,7 +76,7 @@
<h1>Module <code>RadioGroup</code></h1> <h1>Module <code>RadioGroup</code></h1>
<p>Radio group module</p> <p>Radio group module</p>
<p></p> <p> <a href="https://insality.github.io/druid/druid/index.html?example=general_checkboxes" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>

5
docs/modules/RichInput.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -47,6 +47,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -60,13 +61,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><strong>RichInput</strong></li> <li><strong>RichInput</strong></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>

430
docs/modules/RichText.html Normal file
View File

@ -0,0 +1,430 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head>
<title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="product">
<div id="product_logo"></div>
<div id="product_name"><big><b></b></big></div>
<div id="product_description"></div>
</div> <!-- id="product" -->
<div id="main">
<!-- Menu -->
<div id="navigation">
<br/>
<h1>Druid</h1>
<ul>
<li><a href="../index.html">Index</a></li>
</ul>
<h2>Contents</h2>
<ul>
<li><a href="#Functions">Functions</a></li>
<li><a href="#Tables">Tables</a></li>
</ul>
<h2>Modules</h2>
<ul class="nowrap">
<li><a href="../modules/BackHandler.html">BackHandler</a></li>
<li><a href="../modules/BaseComponent.html">BaseComponent</a></li>
<li><a href="../modules/Blocker.html">Blocker</a></li>
<li><a href="../modules/Button.html">Button</a></li>
<li><a href="../modules/Checkbox.html">Checkbox</a></li>
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
<li><a href="../modules/Helper.html">Helper</a></li>
<li><a href="../modules/Hotkey.html">Hotkey</a></li>
<li><a href="../modules/Hover.html">Hover</a></li>
<li><a href="../modules/Input.html">Input</a></li>
<li><a href="../modules/LangText.html">LangText</a></li>
<li><a href="../modules/Layout.html">Layout</a></li>
<li><a href="../modules/PinKnob.html">PinKnob</a></li>
<li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li>
<li><strong>RichText</strong></li>
<li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li>
</ul>
</div>
<div id="content">
<h1>Module <code>RichText</code></h1>
<p>Druid Rich Text Custom Component.</p>
<p>
<b># Overview #</b>
<p> This custom component is inspired by <a href="https://github.com/britzl/defold-richtext" target="_blank">defold-richtext</a> by britzl.
It uses a similar syntax for tags but currently supports fewer tags.
<p> All parameters for the Rich Text component are adjusted in the GUI scene.
<p> This component uses GUI component template. (/druid/custom/rich_text/rich_text.gui).
<p> You able to customize it or make your own with the next node scructure:
<p> root
<p> - text_prefab
<p> - icon_prefab
<p> <b># Rich Text Setup #</b>
<p> • Root node size: Set the maximum width and height of the text.
<p> • Root anchor: Define the alignment of the Rich Text inside the root node size area.
<p> • Text prefab: Configure all default text parameters for the text node.
<p> • Text prefab anchor: Set the anchor for each text node (adjust this only if animating text).
<p> • Icon prefab: Configure all default node parameters for the icon node.
<p> • Icon prefab anchor: Set the anchor for each icon node (adjust this only if animating the icon).
<p> <b># Notes #</b>
<p> • Nested tags are supported
<p> <a href="https://insality.github.io/druid/druid/index.html?example=custom_rich_text" target="_blank"><b>Example Link</b></a></p>
<h3>Usage:</h3>
<ul>
<li><pre class="example">local RichText = require(&quot;druid.custom.rich_text.rich_text&quot;)
...
self.rich_text = self.druid:new(RichText, &quot;rich_text&quot;)
self.rich_text:set_text(&quot;Hello, Druid Rich Text!&quot;)
</pre></li>
<li><pre class="example">type druid.rich_text.word = {
node: Node,
relative_scale: number,
color: vector4,
position: vector3,
offset: vector3,
scale: vector3,
size: vector3,
metrics: druid.rich_text.metrics,
pivot: Pivot,
text: string,
shadow: vector4,
outline: vector4,
font: string,
image: druid.rich_text.image,
default_animation: string,
br: boolean,
nobr: boolean,
}
type druid.rich_text.word.image = {
texture: string,
anim: string,
width: number,
height: number,
}
type druid.rich_text.lines_metrics = {
text_width: number,
text_height: number,
lines: table&lt;number, druid.rich_text.metrics&gt;,
}
type druid.rich_text.metrics = {
width: number,
height: number,
offset_x: number|nil,
offset_y: number|nil,
node_size: vector3|nil @For images only,
}
</pre></li>
</ul>
<h2><a href="#Functions">Functions</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#clear">clear()</a></td>
<td class="summary">Clear all created words.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_line_metric">get_line_metric()</a></td>
<td class="summary">Get current line metrics</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_words">get_words()</a></td>
<td class="summary">Get all current words.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#init">init(self, template, nodes)</a></td>
<td class="summary">Rich Text component constructor</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_text">set_text(self, text)</a></td>
<td class="summary">Set text for Rich Text</td>
</tr>
<tr>
<td class="name" nowrap><a href="#tagged">tagged(tag)</a></td>
<td class="summary">Get all words, which has a passed tag.</td>
</tr>
</table>
<h2><a href="#Tables">Tables</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#style">style</a></td>
<td class="summary">Component style params.</td>
</tr>
</table>
<br/>
<br/>
<h2 class="section-header "><a name="Functions"></a>Functions</h2>
<dl class="function">
<dt>
<a name = "clear"></a>
<strong>clear()</strong>
</dt>
<dd>
Clear all created words.
</dd>
<dt>
<a name = "get_line_metric"></a>
<strong>get_line_metric()</strong>
</dt>
<dd>
Get current line metrics
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">druid.rich_text.lines_metrics</span></span>
</ol>
</dd>
<dt>
<a name = "get_words"></a>
<strong>get_words()</strong>
</dt>
<dd>
Get all current words.
<h3>Returns:</h3>
<ol>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
druid.rich_text.word[]
</ol>
</dd>
<dt>
<a name = "init"></a>
<strong>init(self, template, nodes)</strong>
</dt>
<dd>
Rich Text component constructor
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">RichText</span></span>
<a href="../modules/RichText.html#">RichText</a>
</li>
<li><span class="parameter">template</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span>
The Rich Text template name
</li>
<li><span class="parameter">nodes</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
The node table, if prefab was copied by gui.clone_tree()
</li>
</ul>
</dd>
<dt>
<a name = "set_text"></a>
<strong>set_text(self, text)</strong>
</dt>
<dd>
Set text for Rich Text
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">self</span>
<span class="types"><span class="type">RichText</span></span>
<a href="../modules/RichText.html#">RichText</a>
</li>
<li><span class="parameter">text</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span>
The text to set
</li>
</ul>
<h3>Returns:</h3>
<ol>
<li>
<span class="types"><span class="type">druid.rich_text.word[]</span></span>
words</li>
<li>
<span class="types"><span class="type">druid.rich_text.lines_metrics</span></span>
line_metrics</li>
</ol>
<h3>Usage:</h3>
<ul>
<pre class="example">• color: Change text color
&lt;color=red&gt;Foobar&lt;/color&gt;
&lt;color=<span class="number">1.0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">1.0</span>&gt;Foobar&lt;/color&gt;
&lt;color=#ff0000&gt;Foobar&lt;/color&gt;
&lt;color=#ff0000ff&gt;Foobar&lt;/color&gt;
• shadow: Change text shadow
&lt;shadow=red&gt;Foobar&lt;/shadow&gt;
&lt;shadow=<span class="number">1.0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">1.0</span>&gt;Foobar&lt;/shadow&gt;
&lt;shadow=#ff0000&gt;Foobar&lt;/shadow&gt;
&lt;shadow=#ff0000ff&gt;Foobar&lt;/shadow&gt;
• outline: Change text shadow
&lt;outline=red&gt;Foobar&lt;/outline&gt;
&lt;outline=<span class="number">1.0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">1.0</span>&gt;Foobar&lt;/outline&gt;
&lt;outline=#ff0000&gt;Foobar&lt;/outline&gt;
&lt;outline=#ff0000ff&gt;Foobar&lt;/outline&gt;
• font: Change font
&lt;font=MyCoolFont&gt;Foobar&lt;/font&gt;
• size: Change text size, relative to default size
&lt;size=<span class="number">2</span>&gt;Twice as large&lt;/size&gt;
• br: Insert a line <span class="keyword">break</span>
&lt;br/&gt;
• nobr: Prevent the text from breaking
Words &lt;nobr&gt;inside tag&lt;/nobr&gt; won't <span class="keyword">break</span>
• img: Display image
&lt;img=texture:image/&gt;
&lt;img=texture:image,size/&gt;
&lt;img=texture:image,width,height/&gt;</pre>
</ul>
</dd>
<dt>
<a name = "tagged"></a>
<strong>tagged(tag)</strong>
</dt>
<dd>
Get all words, which has a passed tag.
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">tag</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span>
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">druid.rich_text.word[]</span></span>
words
</ol>
</dd>
</dl>
<h2 class="section-header "><a name="Tables"></a>Tables</h2>
<dl class="function">
<dt>
<a name = "style"></a>
<strong>style</strong>
</dt>
<dd>
Component style params.
You can override this component styles params in Druid styles table
or create your own style
<h3>Fields:</h3>
<ul>
<li><span class="parameter">COLORS</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
Rich Text color aliases
(<em>default</em> {})
</li>
<li><span class="parameter">ADJUST_STEPS</span>
<span class="types"><span class="type">number</span></span>
Amount steps of attemps text adjust by height
(<em>default</em> 20)
</li>
<li><span class="parameter">ADJUST_SCALE_DELTA</span>
<span class="types"><span class="type">number</span></span>
Scale step on each height adjust step
(<em>default</em> 0.02)
</li>
</ul>
</dd>
</dl>
</div> <!-- id="content" -->
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc TESTING</a></i>
<i style="float:right;">Last updated 2015-01-01 12:00:00 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>
</html>

39
docs/modules/Scroll.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -48,6 +48,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -61,13 +62,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><strong>Scroll</strong></li> <li><strong>Scroll</strong></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -77,12 +78,26 @@
<h1>Module <code>Scroll</code></h1> <h1>Module <code>Scroll</code></h1>
<p>Component to handle scroll content.</p> <p>Component to handle scroll content.</p>
<p> <p>
Scroll consist from two nodes: scroll parent and scroll input <b># Overview #</b>
Scroll input the user input zone, it's static <p> The Scroll component is designed to handle scrollable content and consists of two nodes: the scroll parent and the scroll input.
Scroll parent the scroll moving part, it will change position. <p> The scroll input represents the user input zone and remains static.
Setup initial scroll size by changing scroll parent size. If scroll parent <p> The scroll parent is the movable part of the scroll and changes its position.
size will be less than scroll_input size, no scroll is available. For scroll <p> The initial scroll size can be set by adjusting the size of the scroll parent.
parent size should be more than input size</p> If the size of the scroll parent is smaller than the scroll input size, scrolling is not available.
<p> <b># Notes #</b>
<p> • By default, the scroll style includes inertia and extra size for a stretching effect.
These settings can be adjusted using the scroll style settings.
For more details, refer to the scroll style settings.
<p> • "Points of interest" can be set up for the scroll.
The scroll will always be centered on the closest point of interest.
This feature allows creating a slider without inertia and with points of interest on each scroll element.
<p> • The scroll content size can be adjusted using the scroll:set_size(node_size) method.
This method sets a new size for the _content node.
<p> • Inertial scrolling mode can be enabled or disabled using the scroll:set_inert(state) method.
<p> • The extra stretch size can be adjusted using the scroll:set_extra_stretch_size method.
<p> • Multitouch is required for scrolling. The scroll component correctly handles
touch ID swaps while dragging the scroll.
<p> <a href="https://insality.github.io/druid/druid/index.html?example=general_scroll" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>
@ -102,7 +117,7 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#init">init(self, view_node, content_node)</a></td> <td class="name" nowrap><a href="#init">init(self, view_node, content_node)</a></td>
<td class="summary">Scroll constructor</td> <td class="summary"><a href="../modules/Scroll.html#">Scroll</a> constructor</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#is_inert">is_inert(self)</a></td> <td class="name" nowrap><a href="#is_inert">is_inert(self)</a></td>
@ -319,7 +334,7 @@
<strong>init(self, view_node, content_node)</strong> <strong>init(self, view_node, content_node)</strong>
</dt> </dt>
<dd> <dd>
Scroll constructor <a href="../modules/Scroll.html#">Scroll</a> constructor
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -329,11 +344,11 @@
<a href="../modules/Scroll.html#">Scroll</a> <a href="../modules/Scroll.html#">Scroll</a>
</li> </li>
<li><span class="parameter">view_node</span> <li><span class="parameter">view_node</span>
<span class="types"><span class="type">node</span></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a> or <span class="type">node</span></span>
GUI view scroll node GUI view scroll node
</li> </li>
<li><span class="parameter">content_node</span> <li><span class="parameter">content_node</span>
<span class="types"><span class="type">node</span></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a> or <span class="type">node</span></span>
GUI content scroll node GUI content scroll node
</li> </li>
</ul> </ul>

7
docs/modules/Slider.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -47,6 +47,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -60,13 +61,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><strong>Slider</strong></li> <li><strong>Slider</strong></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -75,7 +76,7 @@
<h1>Module <code>Slider</code></h1> <h1>Module <code>Slider</code></h1>
<p>Druid slider component</p> <p>Druid slider component</p>
<p></p> <p> <a href="https://insality.github.io/druid/druid/index.html?example=general_sliders" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>

35
docs/modules/StaticGrid.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -48,6 +48,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -61,13 +62,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><strong>StaticGrid</strong></li> <li><strong>StaticGrid</strong></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -75,9 +76,27 @@
<div id="content"> <div id="content">
<h1>Module <code>StaticGrid</code></h1> <h1>Module <code>StaticGrid</code></h1>
<p>Component to handle placing components by row and columns.</p> <p>Component to handle component's position by row and columns.</p>
<p> <p>
Grid can anchor your elements, get content size and other</p> <b># Overview #</b>
<p> The Static Grid component allows for positioning components in rows and columns.
It provides a static grid layout with constant node sizes, allowing for pre-calculated
node positions and the option to include gaps between nodes.
<p> <b># Notes #</b>
<p> • In a static grid, the node size remains constant, enabling the calculation of node
positions before placement. If you want add gaps between nodes, increase the root prefab size,
including the padding and margin.
<p> • The static grid can automatically shift elements when nodes are added or removed.
<p> • When a node is added, the grid will set the node's parent to the specified parent_node.
<p> • You can obtain an array of positions for each element, which can be used to set
points of interest in a scroll component.
<p> • The size of all elements can be retrieved for setting up the size in a scroll component.
<p> • The grid can be bound to a scroll component for automatic resizing of the scroll content size.
<p> • The pivot of the parent_node affects the node placement within the grid.
<p> • A prefab node is used to determine the node size and anchor.
<p> • You can specify a position_function for animations using the
_static_grid:set_position_function(node, pos) callback. The default position function is gui.set_position().
<p> <a href="https://insality.github.io/druid/druid/index.html?example=general_grid" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>
@ -120,7 +139,7 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#init">init(self, parent, element[, in_row=1])</a></td> <td class="name" nowrap><a href="#init">init(self, parent, element[, in_row=1])</a></td>
<td class="summary">Component init function</td> <td class="summary">The <a href="../modules/StaticGrid.html#">StaticGrid</a> constructor</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#remove">remove(self, index[, shift_policy=SHIFT.RIGHT[, is_instant=false]])</a></td> <td class="name" nowrap><a href="#remove">remove(self, index[, shift_policy=SHIFT.RIGHT[, is_instant=false]])</a></td>
@ -483,7 +502,7 @@
<strong>init(self, parent, element[, in_row=1])</strong> <strong>init(self, parent, element[, in_row=1])</strong>
</dt> </dt>
<dd> <dd>
Component init function The <a href="../modules/StaticGrid.html#">StaticGrid</a> constructor
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -493,8 +512,8 @@
<a href="../modules/StaticGrid.html#">StaticGrid</a> <a href="../modules/StaticGrid.html#">StaticGrid</a>
</li> </li>
<li><span class="parameter">parent</span> <li><span class="parameter">parent</span>
<span class="types"><span class="type">node</span></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a> or <span class="type">Node</span></span>
The gui node parent, where items will be placed The GUI Node container, where grid's items will be placed
</li> </li>
<li><span class="parameter">element</span> <li><span class="parameter">element</span>
<span class="types"><span class="type">node</span></span> <span class="types"><span class="type">node</span></span>

8
docs/modules/Swipe.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -48,6 +48,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -61,13 +62,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><strong>Swipe</strong></li> <li><strong>Swipe</strong></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -78,7 +79,8 @@
<p>Component to handle swipe gestures on node.</p> <p>Component to handle swipe gestures on node.</p>
<p> <p>
Swipe will be triggered, if swipe was started and Swipe will be triggered, if swipe was started and
ended on one node</p> ended on one node
<p> <a href="https://insality.github.io/druid/druid/index.html?example=general_swipe" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>

49
docs/modules/Text.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -48,6 +48,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -61,13 +62,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><strong>Text</strong></li> <li><strong>Text</strong></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>
@ -75,10 +76,26 @@
<div id="content"> <div id="content">
<h1>Module <code>Text</code></h1> <h1>Module <code>Text</code></h1>
<p>Component to handle all GUI texts.</p> <p>Component for Wrapping GUI Text Nodes: Druid Text
<p> <p> ## Overview ##
Druid text can adjust itself for text node size <p> Druid Text is a component that provides various adjustment modes for text nodes.</p>
Text will never will be outside of his text size (even multiline)</p> <p> It allows text to be scaled down to fit within the size of the text node.
<p> ## Notes ##
<p> • The text pivot can be changed using the text:set_pivot method.
The anchoring will be inside the text node's area size.
<p> • There are several text adjustment types available. The default is DOWNSCALE.
You can change the default adjustment type in the Text style. Refer to the example below to see all available adjustment types:
<p> - const.TEXT_ADJUST.DOWNSCALE: Changes the text's scale to fit within the text node's size.
<p> - const.TEXT_ADJUST.TRIM: Trims the text with a postfix (default: "...", can be overridden in styles)
to fit within the text node's size.
<p> - const.TEXT_ADJUST.NO_ADJUST: No adjustment is applied, similar
to the default Defold Text Node behavior.
<p> - const.TEXT_ADJUST.DOWNSCALE_LIMITED: Changes the text's scale
with a limited downscale. You can set the minimum scale using the text:set_minimal_scale() function.
<p> - const.TEXT_ADJUST.SCROLL: Changes the text's pivot to imitate scrolling within the text box.
For better effect, use with a stencil node.
<p> - const.TEXT_ADJUST.SCALE_THEN_SCROLL: Combines two modes: limited downscale first, then scroll.
<p> <a href="https://insality.github.io/druid/druid/index.html?example=texts_general" target="_blank"><b>Example Link</b></a></p>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>
@ -92,8 +109,8 @@
<td class="summary">Calculate text width with font with respect to trailing space</td> <td class="summary">Calculate text width with font with respect to trailing space</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#init">init(self, node[, value[, adjust_type=0]])</a></td> <td class="name" nowrap><a href="#init">init(self, node[, value[, adjust_type=downscale]])</a></td>
<td class="summary">Component init function</td> <td class="summary"><a href="../modules/Text.html#">Text</a> constructor</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#is_multiline">is_multiline(self)</a></td> <td class="name" nowrap><a href="#is_multiline">is_multiline(self)</a></td>
@ -163,7 +180,7 @@
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#on_update_text_scale">on_update_text_scale</a></td> <td class="name" nowrap><a href="#on_update_text_scale">on_update_text_scale</a></td>
<td class="summary">On adjust text size callback(self, new_scale)</td> <td class="summary">On adjust text size callback(self, new_scale, text_metrics)</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#pos">pos</a></td> <td class="name" nowrap><a href="#pos">pos</a></td>
@ -260,10 +277,10 @@
</dd> </dd>
<dt> <dt>
<a name = "init"></a> <a name = "init"></a>
<strong>init(self, node[, value[, adjust_type=0]])</strong> <strong>init(self, node[, value[, adjust_type=downscale]])</strong>
</dt> </dt>
<dd> <dd>
Component init function <a href="../modules/Text.html#">Text</a> constructor
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -273,8 +290,8 @@
<a href="../modules/Text.html#">Text</a> <a href="../modules/Text.html#">Text</a>
</li> </li>
<li><span class="parameter">node</span> <li><span class="parameter">node</span>
<span class="types"><a class="type" href="../modules/Text.html#node">node</a></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a> or <a class="type" href="../modules/Text.html#node">node</a></span>
Gui text node Node name or GUI Text Node itself
</li> </li>
<li><span class="parameter">value</span> <li><span class="parameter">value</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span>
@ -282,9 +299,9 @@
(<em>optional</em>) (<em>optional</em>)
</li> </li>
<li><span class="parameter">adjust_type</span> <li><span class="parameter">adjust_type</span>
<span class="types"><span class="type">int</span></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.4">string</a></span>
Adjust type for text. By default is DOWNSCALE. Look const.TEXT_ADJUST for reference Adjust type for text. By default is DOWNSCALE. Look const.TEXT_ADJUST for reference
(<em>default</em> 0) (<em>default</em> downscale)
</li> </li>
</ul> </ul>
@ -705,7 +722,7 @@
<strong>on_update_text_scale</strong> <strong>on_update_text_scale</strong>
</dt> </dt>
<dd> <dd>
On adjust text size callback(self, new_scale) On adjust text size callback(self, new_scale, text_metrics)
<ul> <ul>

5
docs/modules/Timer.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -47,6 +47,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><a href="../modules/Druid.html">Druid</a></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -60,13 +61,13 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><strong>Timer</strong></li> <li><strong>Timer</strong></li>
<li><a href="../modules/druid.html">druid</a></li>
</ul> </ul>
</div> </div>

198
docs/modules/druid.html
View File

@ -3,7 +3,7 @@
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head> <head>
<title>Defold Druid UI Library</title> <title>Defold Druid UI Framework</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" /> <link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head> </head>
<body> <body>
@ -46,6 +46,7 @@
<li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li> <li><a href="../modules/CheckboxGroup.html">CheckboxGroup</a></li>
<li><a href="../modules/DataList.html">DataList</a></li> <li><a href="../modules/DataList.html">DataList</a></li>
<li><a href="../modules/Drag.html">Drag</a></li> <li><a href="../modules/Drag.html">Drag</a></li>
<li><strong>Druid</strong></li>
<li><a href="../modules/DruidEvent.html">DruidEvent</a></li> <li><a href="../modules/DruidEvent.html">DruidEvent</a></li>
<li><a href="../modules/DruidInstance.html">DruidInstance</a></li> <li><a href="../modules/DruidInstance.html">DruidInstance</a></li>
<li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li> <li><a href="../modules/DynamicGrid.html">DynamicGrid</a></li>
@ -59,66 +60,92 @@
<li><a href="../modules/Progress.html">Progress</a></li> <li><a href="../modules/Progress.html">Progress</a></li>
<li><a href="../modules/RadioGroup.html">RadioGroup</a></li> <li><a href="../modules/RadioGroup.html">RadioGroup</a></li>
<li><a href="../modules/RichInput.html">RichInput</a></li> <li><a href="../modules/RichInput.html">RichInput</a></li>
<li><a href="../modules/RichText.html">RichText</a></li>
<li><a href="../modules/Scroll.html">Scroll</a></li> <li><a href="../modules/Scroll.html">Scroll</a></li>
<li><a href="../modules/Slider.html">Slider</a></li> <li><a href="../modules/Slider.html">Slider</a></li>
<li><a href="../modules/StaticGrid.html">StaticGrid</a></li> <li><a href="../modules/StaticGrid.html">StaticGrid</a></li>
<li><a href="../modules/Swipe.html">Swipe</a></li> <li><a href="../modules/Swipe.html">Swipe</a></li>
<li><a href="../modules/Text.html">Text</a></li> <li><a href="../modules/Text.html">Text</a></li>
<li><a href="../modules/Timer.html">Timer</a></li> <li><a href="../modules/Timer.html">Timer</a></li>
<li><strong>druid</strong></li>
</ul> </ul>
</div> </div>
<div id="content"> <div id="content">
<h1>Module <code>druid</code></h1> <h1>Module <code>Druid</code></h1>
<p>Druid UI Library.</p> <p>Druid UI Component Framework.</p>
<p> <p>
Powerful Defold component based UI library. Use standart <b># Overview #</b>
components or make your own game-specific components to <p> Druid - powerful Defold component UI library. Use basic and extended
make amazing GUI in your games. Druid components or make your own game-specific components to make
<p> Contains the several basic components and examples amazing GUI in your games.
to how to do your custom complex components to <p> To start using Druid, please refer to the Usage section below.
separate UI game logic to small files <p> <b># Notes #</b>
<p> require("druid.druid") <p> • Each Druid instance maintains the self context from the constructor and passes it to each Druid callback.
function init(self) <p> See next: <a href="../modules/DruidInstance.html#">DruidInstance</a>
self.druid = druid.new(self)
end
</p> </p>
<h3>Usage:</h3>
<ul>
<pre class="example">local druid = require(&quot;druid.druid&quot;)
local function on_play(self)
print(&quot;Gonna play!&quot;)
end
function init(self)
self.druid = druid.new(self)
self.druid:new_button(&quot;button_play&quot;, on_play)
end
function final(self)
self.druid:final()
end
function update(self, dt)
self.druid:update(dt)
end
function on_message(self, message_id, message, sender)
self.druid:on_message(message_id, message, sender)
end
function on_input(self, action_id, action)
return self.druid:on_input(action_id, action)
end
</pre>
</ul>
<h2><a href="#Functions">Functions</a></h2> <h2><a href="#Functions">Functions</a></h2>
<table class="function_list"> <table class="function_list">
<tr> <tr>
<td class="name" nowrap><a href="#new">new(context[, style])</a></td> <td class="name" nowrap><a href="#druid.new">druid.new(context[, style])</a></td>
<td class="summary">Create Druid instance.</td> <td class="summary">Create a new Druid instance for creating GUI components.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#on_language_change">on_language_change()</a></td> <td class="name" nowrap><a href="#druid.on_language_change">druid.on_language_change()</a></td>
<td class="summary">Callback on global language change event.</td> <td class="summary">Call this function when the game language changes.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#on_window_callback">on_window_callback(event)</a></td> <td class="name" nowrap><a href="#druid.on_window_callback">druid.on_window_callback(event)</a></td>
<td class="summary">Callback on global window event.</td> <td class="summary">Set the window callback to enable on_focus_gain and on_focus_lost functions.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#register">register(name, module)</a></td> <td class="name" nowrap><a href="#druid.register">druid.register(name, module)</a></td>
<td class="summary">Register external druid component.</td> <td class="summary">Register a new external Druid component.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_default_style">set_default_style(style)</a></td> <td class="name" nowrap><a href="#druid.set_default_style">druid.set_default_style(style)</a></td>
<td class="summary">Set new default style.</td> <td class="summary">Set your own default style for all Druid instances.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_sound_function">set_sound_function(callback)</a></td> <td class="name" nowrap><a href="#druid.set_sound_function">druid.set_sound_function(callback)</a></td>
<td class="summary">Set sound function.</td> <td class="summary">Set the Druid sound function to play UI sounds if used.</td>
</tr> </tr>
<tr> <tr>
<td class="name" nowrap><a href="#set_text_function">set_text_function(callback)</a></td> <td class="name" nowrap><a href="#druid.set_text_function">druid.set_text_function(callback)</a></td>
<td class="summary">Set text function <td class="summary">Set the text function for the LangText component.</td>
Druid locale component will call this function
to get translated text.</td>
</tr> </tr>
</table> </table>
@ -130,22 +157,22 @@
<dl class="function"> <dl class="function">
<dt> <dt>
<a name = "new"></a> <a name = "druid.new"></a>
<strong>new(context[, style])</strong> <strong>druid.new(context[, style])</strong>
</dt> </dt>
<dd> <dd>
Create Druid instance. Create a new Druid instance for creating GUI components.
<h3>Parameters:</h3> <h3>Parameters:</h3>
<ul> <ul>
<li><span class="parameter">context</span> <li><span class="parameter">context</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
Druid context. Usually it is self of script The Druid context. Usually, this is the self of the gui_script. It is passed into all Druid callbacks.
</li> </li>
<li><span class="parameter">style</span> <li><span class="parameter">style</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span> <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
Druid style module The Druid style table to override style parameters for this Druid instance.
(<em>optional</em>) (<em>optional</em>)
</li> </li>
</ul> </ul>
@ -154,35 +181,47 @@
<ol> <ol>
<span class="types"><span class="type">druid_instance</span></span> <span class="types"><span class="type">druid_instance</span></span>
Druid instance The Druid instance <a href="../modules/DruidInstance.html#">DruidInstance</a>.
</ol> </ol>
<h3>Usage:</h3>
<ul>
<pre class="example"><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></pre>
</ul>
</dd> </dd>
<dt> <dt>
<a name = "on_language_change"></a> <a name = "druid.on_language_change"></a>
<strong>on_language_change()</strong> <strong>druid.on_language_change()</strong>
</dt> </dt>
<dd> <dd>
Callback on global language change event. Call this function when the game language changes.
Use to update all lang texts <p> This function will translate all current LangText components.
<h3>Usage:</h3>
<ul>
<pre class="example">druid.on_language_change()</pre>
</ul>
</dd> </dd>
<dt> <dt>
<a name = "on_window_callback"></a> <a name = "druid.on_window_callback"></a>
<strong>on_window_callback(event)</strong> <strong>druid.on_window_callback(event)</strong>
</dt> </dt>
<dd> <dd>
Callback on global window event. Set the window callback to enable on_focus_gain and on_focus_lost functions.
Used to trigger on_focus_lost and on_focus_gain <p> This is used to trigger the on_focus_lost and on_focus_gain functions in Druid components.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -196,16 +235,23 @@
<h3>Usage:</h3>
<ul>
<pre class="example">window.set_listener(<span class="keyword">function</span>(_, event)
druid.on_window_callback(event)
<span class="keyword">end</span>)</pre>
</ul>
</dd> </dd>
<dt> <dt>
<a name = "register"></a> <a name = "druid.register"></a>
<strong>register(name, module)</strong> <strong>druid.register(name, module)</strong>
</dt> </dt>
<dd> <dd>
Register external druid component. Register a new external Druid component.
After register you can create the component with <p> You can register your own components to make new alias: the druid:new_{name} function.
druid_instance:new_{name}. For example `druid:new_button(...)` For example, if you want to register a component called "my_component", you can create it using druid:new_my_component(...).
This can be useful if you have your own "basic" components that you don't want to re-create each time.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -223,14 +269,24 @@
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="keyword">local</span> my_component = <span class="global">require</span>(<span class="string">"path.to.my.component"</span>)
druid.register(<span class="string">"my_component"</span>, my_component)
...
<span class="keyword">local</span> druid = druid.new(self)
<span class="keyword">local</span> component_instance = self.druid:new_my_component(...)</pre>
</ul>
</dd> </dd>
<dt> <dt>
<a name = "set_default_style"></a> <a name = "druid.set_default_style"></a>
<strong>set_default_style(style)</strong> <strong>druid.set_default_style(style)</strong>
</dt> </dt>
<dd> <dd>
Set new default style. Set your own default style for all Druid instances.
<p> To create your own style file, copy the default style file and make changes to it.
Register the new style before creating your Druid instances.
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -244,16 +300,21 @@
<h3>Usage:</h3>
<ul>
<pre class="example"><span class="keyword">local</span> my_style = <span class="global">require</span>(<span class="string">"path.to.my.style"</span>)
druid.set_default_style(my_style)</pre>
</ul>
</dd> </dd>
<dt> <dt>
<a name = "set_sound_function"></a> <a name = "druid.set_sound_function"></a>
<strong>set_sound_function(callback)</strong> <strong>druid.set_sound_function(callback)</strong>
</dt> </dt>
<dd> <dd>
Set sound function. Set the Druid sound function to play UI sounds if used.
Component will call this function to <p> Set a function to play a sound given a sound_id. This function is used for button clicks to play the "click" sound.
play sound by sound_id It can also be used to play sounds in your custom components (see the default Druid style file for an example).
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -267,17 +328,22 @@
<h3>Usage:</h3>
<ul>
<pre class="example">druid.set_sound_function(<span class="keyword">function</span>(sound_id)
sound.play(sound_id) <span class="comment">-- Replace with your real function
</span><span class="keyword">end</span>)</pre>
</ul>
</dd> </dd>
<dt> <dt>
<a name = "set_text_function"></a> <a name = "druid.set_text_function"></a>
<strong>set_text_function(callback)</strong> <strong>druid.set_text_function(callback)</strong>
</dt> </dt>
<dd> <dd>
Set text function Set the text function for the LangText component.
Druid locale component will call this function <p> The Druid locale component will call this function to get translated text.
to get translated text. After set_text_funtion After setting the text function, all existing locale components will be updated.
all existing locale component will be updated
<h3>Parameters:</h3> <h3>Parameters:</h3>
@ -291,6 +357,12 @@
<h3>Usage:</h3>
<ul>
<pre class="example">druid.set_text_function(<span class="keyword">function</span>(text_id)
<span class="keyword">return</span> lang_data[text_id] <span class="comment">-- Replace with your real function
</span><span class="keyword">end</span>)</pre>
</ul>
</dd> </dd>
</dl> </dl>

2
docs_md/01-components.md
View File

@ -133,7 +133,7 @@ Usually, Place _view_node_ and as children add _content_node_:
- *on_scroll_to* (self, position, is_instant) On scroll_to function 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 - *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 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 enabled or disable inertion mode via `scroll:set_inert(state)`
- You can adjust extra stretch size via `scroll:set_extra_stretch_size` - 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 - Multitouch is required for scroll. Scroll is correctly handling touch_id swap while dragging scroll

170
docs_md/02-creating_custom_components.md
View File

@ -1,18 +1,16 @@
# Creating custom components # Creating Custom Components
## Overview ## Overview
Druid allows you to create your custom components which contains your custom logic, other Druid basic components or other custom components. Druid offers the flexibility to create custom components that contain your own logic, as well as other Druid basic components or custom components. While Druid provides a set of predefined components like buttons and scrolls, it goes beyond that and provides a way to handle all your GUI elements in a more abstract manner. Custom components are a powerful way to separate logic and create higher levels of abstraction in your code.
I wanna make a point that Druid is not only set of defined components to place buttons, scroll, etc. But mostly it's a way how to handle all your GUI elements in general. Custom components is most powerful way to separate logic and make higher abstraction in your code. Every component is a child of the Basic Druid component. You can call methods of basic components using `self:{method_name}`.
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 Component Template
A basic custom component template looks like this (you can copy it from `/druid/templates/component.template.lua`):
## Custom components
### Basic component template
Basic custom component template looks like this. It's good start to create your own component! (you can copy it from `/druid/templates/component.template.lua`)
```lua ```lua
local component = require("druid.component") local component = require("druid.component")
@ -24,7 +22,6 @@ local SCHEME = {
BUTTON = "button", BUTTON = "button",
} }
-- Component constructor. Template name and nodes are optional. Pass it if you use it in your component
function Component:init(template, nodes) function Component:init(template, nodes)
self:set_template(template) self:set_template(template)
self:set_nodes(nodes) self:set_nodes(nodes)
@ -34,161 +31,127 @@ function Component:init(template, nodes)
self.button = self.druid:new_button(SCHEME.BUTTON, function() end) self.button = self.druid:new_button(SCHEME.BUTTON, function() end)
end end
-- [OPTIONAL] Call on component remove or on druid:final
function Component:on_remove() end function Component:on_remove() end
return Component return Component
``` ```
### Full component template ### Full Component Template
A full custom component template looks like this (you can copy it from `/druid/templates/component_full.template.lua`):
Full custom component template looks like this (you can copy it from `/druid/templates/component_full.template.lua`:
```lua ```lua
local component = require("druid.component") local component = require("druid.component")
---@class component_name : druid.base_component ---@class component_name : druid.base_component
local Component = component.create("component_name") local Component = component.create("component_name")
-- Scheme of component gui nodes
local SCHEME = { local SCHEME = {
ROOT = "root", ROOT = "root",
BUTTON = "button", BUTTON = "button",
} }
-- Component constructor. Template name and nodes are optional. Pass it if you use it in your component
function Component:init(template, nodes) function Component:init(template, nodes)
-- If your component is gui template, pass the template name and set it self:set_template(template)
self:set_template(template) self:set_nodes(nodes)
-- If your component is cloned my gui.clone_tree, pass nodes to component and set it self.root = self:get_node(SCHEME.ROOT)
self:set_nodes(nodes) self.druid = self:get_druid()
-- self:get_node will auto process component template and nodes
self.root = self:get_node(SCHEME.ROOT)
-- Use inner druid instance to create components inside this component
self.druid = self:get_druid()
end end
-- [OPTIONAL] Call every update step
function Component:update(dt) end function Component:update(dt) end
-- [OPTIONAL] Call default on_input from gui script
function Component:on_input(action_id, action) return false end function Component:on_input(action_id, action) return false end
-- [OPTIONAL] Call on component creation and on component:set_style() function
function Component:on_style_change(style) end function Component:on_style_change(style) end
-- [OPTIONAL] Call default on_message from gui script
function Component:on_message(message_id, message, sender) end function Component:on_message(message_id, message, sender) end
-- [OPTIONAL] Call if druid has triggered on_language_change
function Component:on_language_change() end function Component:on_language_change() end
-- [OPTIONAL] Call if game layout has changed and need to restore values in component
function Component:on_layout_change() end function Component:on_layout_change() end
-- [OPTIONAL] Call if game window size is changed
function Component:on_window_resized() end function Component:on_window_resized() end
-- [OPTIONAL] Call, if input was capturing before this component
-- Example: scroll is start scrolling, so you need unhover button
function Component:on_input_interrupt() end function Component:on_input_interrupt() end
-- [OPTIONAL] Call, if game lost focus
function Component:on_focus_lost() end function Component:on_focus_lost() end
-- [OPTIONAL] Call, if game gained focus
function Component:on_focus_gained() end function Component:on_focus_gained() end
-- [OPTIONAL] Call on component remove or on druid:final
function Component:on_remove() end function Component:on_remove() end
return Component return Component
``` ```
### Spawning a Custom Component
### Spawn custom component After creating your custom component, you can spawn it in your code. For example, if you have a component named `my_component`, you can create it like this:
After the creating your custom component, you now able to create it.
For example we made the component `my_component`. Now we able create it like this:
```lua
local druid = require("druid.druid")
local my_component = require("my.amazing.component")
function init(self)
self.druid = druid.new(self)
self.druid:new(my_component, "template_name", nodes)
end
```
The template name - is the name of GUI template file if you use it in your custom component.
The nodes - is table from `gui.clone_tree(node)`. If you spawn multiply nodes for component, pass it to component constructor.
Inside component you have to set template and nodes via
`self:set_template(template)` and `self:set_nodes(nodes)`
### Register custom component
You can register your custom component for use it without require component module in every file. Registering components is comfortable for very basic components in your game.
Add your custom component to druid via `druid.register
```lua ```lua
local druid = require("druid.druid") local druid = require("druid.druid")
local my_component = require("my.amazing.component") local my_component = require("my.amazing.component")
function init(self) function init(self)
druid.register("my_component", my_component) self.druid = druid.new(self)
self.druid:new(my_component, "template_name", nodes)
end end
``` ```
Registering make new function with "new_{component_name}". In our example it will be: `druid:new_my_component()`. In the code above, `template_name` refers to the name of the GUI template file if you're using it in your custom component. `nodes` is a table obtained from `gui.clone_tree(node)`. If you're spawning multiple nodes for the component, pass the table to the component constructor. Inside the component, you need to set the template and nodes using `self:set_template(template)` and `self:set_nodes(nodes)`.
### Registering a Custom Component
You can register your custom component to use it without requiring the component module in every file. Registering components is convenient for very basic components in your game. Here's how you can register a custom component in Druid:
As component registered, you can create your component with next code:
```lua ```lua
local druid = require("druid.druid") local druid = require("druid.druid")
local my_component = require("my.amazing.component") local my_component = require("my.amazing.component")
function init(self) function init(self)
self.druid = druid.new(self) druid.register("my_component", my_component)
self.my_component = self.druid:new_my_component(template, nodes)
end end
``` ```
Once the component is registered, a new function will be available with the name "new_{component_name}". In our example, it will be `druid:new_my_component()`. With the component registered, you can create an instance of it using the following code:
## Create Druid Component editor script ```lua
local druid = require("druid.druid")
local my_component = require("my.amazing.component")
The Druid has editor script to help you with creating lua file for your GUI scene. function init(self)
The commands is available on *.gui scenes in menu `Edit -> Create Druid Component` self.druid = druid.new(self)
self.my_component = self.druid:new_my_component(template, nodes)
end
```
The script will check current GUI scene and generate lua file with all Druid component stubs. The output file will be named as current GUI scene and placed nearby. The *.lua file should be not exists, the script will not override any file. If you want to re-generate file, delete previous one first. ## Create Druid Component Editor Script
The script required `python3` with `deftree` installed. If `deftree` is not installed the instructions will be prompt in console. Druid provides an editor script to assist you in creating Lua files for your GUI scenes. You can find the commands under the menu `Edit -> Create Druid Component` when working with *.gui scenes.
The script analyzes the current GUI scene and generates a Lua file with stubs for all Druid components found. The output file is named after the current GUI scene and placed in the same directory. Note that the script does not override any existing *.lua files. If you want to regenerate a file, delete the previous version first.
### Auto layout components The script requires `python3` with `deftree` installed. If `deftree` is not installed, the instructions will be displayed in the console.
The generator script also check current GUI scene for Druid components to make stubs for them. The script will check the node names and if it starts with special keyword it will make component stubs in generated lua file. It will generate component declaring, callback functions stubs and annotations. ### Auto-Layout Components
Start your node names with one of next keyword to say parser make component stubs for your. For example for nodes `button` and `button_exit` will be generated two Druid Button components with callback stubs. The generator script also checks the current GUI scene for Druid components and creates stubs for them. If a node name starts with a specific keyword, the script generates component stubs in the Lua file. For example, nodes named `button` and `button_exit` will result in the generation of two Druid Button components with callback stubs.
Available keywords: Available keywords:
- `button` - add [Druid Button](docs_md/01-components.md#button) and generate callback stub - `button`: Adds a [Druid Button](01-components.md#button) component and generates the callback stub.
- `text` - add [Druid Text](docs_md/01-components.md#text) - `text`: Adds a [Druid Text](01-components.md#text) component.
- `lang_text` - add Druid [Druid Lang Text](docs_md/01-components.md#lang-text) - `lang_text`: Adds a [Druid Lang Text](01-components.md#lang-text) component.
- `grid` or `static_grid` - add Druid [Druid Static Grid](docs_md/01-components.md#static-grid). You should to setup Grid prefab for this component after file generation - `grid` or `static_grid`: Adds a [Druid Static Grid](01-components.md#static-grid) component. You should set up the Grid prefab for this component after generating the file.
- `dynamic_grid` - add Druid [Druid Dynamic Grid](docs_md/01-components.md#dynamic-grid) - `dynamic_grid`: Adds a [Druid Dynamic Grid](01-components.md#dynamic-grid) component.
- `scroll_view` - add [Druid Scroll](docs_md/01-components.md#scroll). It will add `scroll_content` node with the same postfix too. Check that is will correct node - `scroll_view`: Adds a [Druid Scroll](01-components.md#scroll) component. It also adds a `scroll_content` node with the same postfix. Ensure that it's the correct node.
- `blocker` - add [Druid Blocker](docs_md/01-components.md#blocker) - `blocker`: Adds a [Druid Blocker](01-components.md#blocker) component.
- `slider` - add [Druid Slider](docs_md/01-components.md#slider). You should to adjust end position of Slider after file generation - `slider`: Adds a [Druid Slider](01-components.md#slider) component. You should adjust the end position of the Slider after generating the file.
- `progress` - add [Druid Progress](docs_md/01-components.md#progress) - `progress`: Adds a [Druid Progress](01-components.md#progress) component.
- `timer` - add [Druid Timer](docs_md/01-components.md#timer) - `timer`: Adds a [Dr
uid Timer](01-components.md#timer) component.
## Best Practices for Custom Components
## Best practice on custom components When working with each component, it's recommended to describe the component scheme in the following way:
On each component recommended describe component scheme in next way:
To get this structure, Druid has editor script to help you with it. Select your GUI nodes in editor outline, right click and press "Print GUI Scheme". And copy the result from the output console.
```lua ```lua
-- Component module -- Component module
@ -197,27 +160,22 @@ local component = require("druid.component")
local M = component.create("your_component") local M = component.create("your_component")
local SCHEME = { local SCHEME = {
ROOT = "root", ROOT = "root",
ITEM = "item", ITEM = "item",
TITLE = "title" TITLE = "title"
} }
function M.init(self, template_name, node_table) function M.init(self, template_name, node_table)
self:set_template(template_name) self:set_template(template_name)
self:set_nodes(node_table) self:set_nodes(node_table)
-- helper can get node from gui/template/table local root = self:get_node(SCHEME.ROOT)
local root = self:get_node(SCHEME.ROOT) local druid = self:get_druid()
-- This component can spawn another druid components:
local druid = self:get_druid() -- Create components inside this component using the inner druid instance
-- Button self on callback is self of _this_ component
local button = druid:new_button(...)
end end
``` ```
## Power of using templates ## The Power of Using Templates
You can use one component, but creating and customizing templates for them. Templates only requires to match the component scheme. With Druid, you can use a single component but create and customize templates for it. Templates only need to match the component scheme. For example, you can have a component named `player_panel` and two GUI templates named `player_panel` and `enemy_panel` with different layouts. The same component script can be used for both templates.
For example you have component `player_panel` and two GUI templates: `player_panel` and `enemy_panel` with different layout. But the same component script can be used for both of them.

67
docs_md/FAQ.md
View File

@ -1,67 +1,36 @@
# Druid FAQ # Druid FAQ
>_Have questions about Druid? Ask me!_ Welcome to the Druid FAQ! Here are answers to some common questions you may have:
> _Here is questions you might have_
### Q: Why I want use Druid? ### Q: How do I remove a Druid component instance?
**A:** --- **A:** To remove a created Druid component, use the `druid:remove` function. You can find more information in the [API reference](https://insality.github.io/druid/modules/druid_instance.html#druid:remove).
### Q: How does Druid process input?
**A:** Input processing in Druid follows a Last-In-First-Out (LIFO) queue. Buttons added later have higher priority than those added earlier. To ensure correct button behavior, place your buttons from back to front in most cases.
### Q: How to remove the Druid component instance? ### Q: What is the purpose of the Blocker component?
**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). **A:** The Blocker component is used to block input in a specific zone. It is useful for creating unclickable zones within buttons or for creating a panel of buttons on top of another button (e.g., closing windows by clicking on the window background). You can find more information about the Blocker component [here](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#notes-2).
### Q: What can I do with custom components?
**A:** With custom components in Druid, the possibilities are endless! Custom components allow you to separate component placement and game logic from other elements, making them reusable and easier to test and develop. Custom components can be used for scroll elements with buttons, custom GUI widgets, or even components with custom game logic. Templates often accompany custom components, allowing you to create multiple visual variations for a single component module. You can find some examples of custom components [here](https://github.com/Insality/druid-assets).
### Q: How to make scroll work? ### Q: How does `self:get_node()` work?
**A:** --- **A:** The `self:get_node()` function in a Druid component searches for nodes in the GUI directly or in cloned nodes created using `gui.clone_tree()`. It also considers nodes placed as templates, with the full node ID composed of the template name and node name (including cloned nodes). To ensure correct usage of `self:get_node()`, set up the component nodes using `self:set_template()` and `self:set_component_nodes()` before calling `self:get_node()`. It's best to pass the string name of the node, rather than the GUI node itself.
### Q: My button in a scroll is clickable outside the stencil node. How can I fix this?
### Q: How the input is processing? **A:** When using Druid, the stencil node does not prevent buttons from being clickable outside its bounds. To address this, you can set up an additional click zone on your buttons using the `button:set_click_zone()` function. After adding a button to the scroll, you can use the following code:
**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 ```lua
-- Scroll view node usually is stencil node -- Assuming the scroll view node is the stencil node
button:set_click_zone(scroll.view_node) button:set_click_zone(scroll.view_node)
``` ```
### Q: How do I use EmmyLua annotations? (from Druid 0.6.0)
### Q: How to use EmmyLua annotations? _(from Druid 0.6.0)_ **A:** EmmyLua annotations are used for better autocompletion and type inference in editors. To use the generated EmmyLua annotations, copy the `druid/annotations.lua` file to your project. After copying, you may need to restart the EmmyLua server to ensure the changes take effect. Once the annotations are processed, you can specify the type of Druid in your code:
**A:** Since the dependencies can't be processed by external editors, for use generated EmmyLua annotations you should copy the _druid/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 ```lua
---@type druid ---@type druid
local druid = require("druid.druid") local druid = require("druid.druid")
-- Now the autocomplete is working -- Autocomplete and type information should now work
``` ```
Feel free to ask any additional questions you have about Druid!
### Q: When I should use *on_layout_change*?
**A:** ---

131
docs_md/advanced-setup.md Normal file
View File

@ -0,0 +1,131 @@
# Advanced Druid Setup
## Input Bindings
By default, **Druid** utilizes the `/builtins/input/all.input_binding` for input bindings.
**Druid** requires the following input bindings:
- Mouse trigger: `Button 1` -> `touch` (for basic input components)
- Mouse trigger: `Wheel up` -> `mouse_wheel_up` (for Scroll component)
- Mouse trigger: `Wheel down` -> `mouse_wheel_down` (for Scroll component)
- Key trigger: `Backspace` -> `key_backspace` (for BackHandler component, input component)
- Key trigger: `Back` -> `key_back` (for BackHandler 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` -> `touch_multi` (for Scroll component)
![](../media/input_binding_2.png)
![](../media/input_binding_1.png)
## Changing Key Bindings
If you need to use your own key bindings or key names, you can modify them in your *game.project* file.
Here are the default values for key bindings:
```
[druid]
input_text = text
input_touch = touch
input_marked_text = marked_text
input_key_esc = key_esc
input_key_back = key_back
input_key_enter = key_enter
input_key_backspace = key_backspace
input_multitouch = touch_multi
input_scroll_up = mouse_wheel_up
input_scroll_down = mouse_wheel_down
```
## Input Capturing
By default, **Druid** automatically captures input focus if any input component is created. Therefore, you do not need to call `msg.post(".", "acquire_input_focus")`.
If you do not require this behavior, you can disable it by setting the `druid.no_auto_input` field in the _game.project_ file:
```
[druid]
no_auto_input = 1
```
## Template Name Check
By default, **Druid** automatically checks the parent component's template name to construct the full template name for the component. It's used in user custom components.
If, for some reason, you want to pass the full template name manually, you can disable this feature by setting the `druid.no_auto_template` field in the _game.project_ file:
```
[druid]
no_auto_template = 1
```
## Stencil Check
When creating input components inside stencil nodes, **Druid** automatically sets up `component:set_click_zone()` during the _late_init_ component step to restrict input clicks outside of the stencil zone. This is particularly useful for buttons inside scroll stencil nodes.
To disable this feature, add the following field to your _game.project_ file:
```
[druid]
no_stencil_check = 1
```
## Code Bindings
Adjust **Druid** settings as needed:
```lua
local druid = require("druid.druid")
-- Used for button component and custom components
-- The callback should play the sound by name: function(sound_id) ... end
druid.set_sound_function(function(sound_id)
-- sound_system.play(sound_id)
end)
-- Used for lang_text component
-- The callback should return the localized string by locale ID: function(locale_id) ... end
druid.set_text_function(function(locale_id)
-- return lang.get(locale_id)
end)
-- Used to change the default Druid style
druid.set_default_style(your_style)
-- Call this function when the language changes in the game,
-- to retranslate all lang_text components:
local function on_language_change()
druid.on_language_change()
end
-- Call this function inside window.set_listener
-- to capture game focus lost/gained callbacks:
-- window.set_listener(function(self, event, data) druid.on_window_callback(event, data) end))
local function on_window_callback(self, event, data)
druid.on_window_callback(event)
end
window.set_listener(on_window_callback)
```
## EmmyLua Annotations
[EmmyLua](https://emmylua.github.io/annotation.html) is a Lua annotation library. It is a useful tool for enabling Lua code autocompletion in editors such as [VSCode](https://github.com/EmmyLua/VSCode-EmmyLua) and [IntelliJ IDEA](https://github.com/EmmyLua/IntelliJ-EmmyLua).
Since dependencies cannot be processed by external editors, to use the EmmyLua annotations, you should copy the _druid/annotations.lua_ file to your project.
Remember that you can restart the EmmyLua server to refresh the changes if something goes wrong.
After the annotations are processed, you should specify the type of "Druid" in the "require" statement:
```lua
---@type druid
local druid = require("druid.druid")
-- Now the autocomplete is working
```
<img src="../media/emmy_lua_preview.png" width="700">

56
docs_md/changelog.md
View File

@ -445,4 +445,58 @@ And yeah, the new **Druid** logo is here!
- **#189** [System] Add optional flag to `component:set_input_priority` to mark it as temporary. It will reset to default input priority after the `component:reset_input_priority` - **#189** [System] Add optional flag to `component:set_input_priority` to mark it as temporary. It will reset to default input priority after the `component:reset_input_priority`
- **#204** [System] Fix: wrong code example link, if open example from direct URL - **#204** [System] Fix: wrong code example link, if open example from direct URL
- **#202** [System] Enabled stencil check to true by default. To disable this, use `druid.no_stencil_check` in game.project settings - **#202** [System] Enabled stencil check to true by default. To disable this, use `druid.no_stencil_check` in game.project settings
- [Examples] Add layout, layout fit, progres bar, data list + component examples - [Examples] Add layout, layout fit, progress bar, data list + component examples
### Druid 0.11.0
Hello! What a wonderful day for the new **Druid** update!
Alright, let's get straight to the point. Look at what I have for you!
**Druid Rich Text** has finally been released. The main difference from the existing **Bjorn's** Rich Text is that all visual parameters are customizable directly in the GUI. This allows you to integrate **Rich Text** more accurately and quickly. Additionally, this **Rich Text** aligns pixel perfect (well, [almost](https://github.com/defold/defold/issues/7197)) with regular GUI text node.
This version is the most basic one. Honestly, just wanna to publish current version for your and polish it later. Read [RichText API here](https://insality.github.io/druid/modules/RichText.html)
Another addition is the ability to enable the "HTML mode" for the Button component. In this mode, the button's action occurs in the context of `user action`, allowing operations like "copy and paste text" "show the keyboard" and more. However, in this mode, the button only responds to regular clicks due to the technical implementation of it (so no double clicks or long taps for this button).
The huge work was done on documentation. Now it's more clear and have more examples. All documentation now moved to the API section. The separate `componentd.md` manual will be deleted soon as all documentation will be moved to the API section.
The API section now filled with overview and usage examples. I've started with the basic modules, in future I will add more examples for all modules.
Also, I've added the **Unit Tests**. It's not cover all **Druid** code, but it's a good start! 🎉
Have a good day!
**Changelog 0.11.0**
---
- **#191**: [RichText] Finally add **Druid [Rich Text](https://insality.github.io/druid/modules/RichText.html)** custom component. Component is used to make formatted text in your's GUI. This Rich Text mostly adjusted visually in GUI and have almost pixel-perfect match with similar GUI text node
- **#39**: [System] Finally add **Unit Tests**. Yeah, it cover not all **Druid** code, but it's a good start! 🎉
- **#219**: [System] UTF-8 performance optimization. Now Druid will try to use *utf8* native extension over lua utf8 library if exists. If you wanna use native utf8, just [add the extension](https://github.com/d954mas/defold-utf8) in your `game.project` dependency.
- **#156**: [Button] Now button can work in HTML5 with `html5.set_interaction_listener`.
- The API is `button:set_web_user_interaction(true)`. In HTML5 mode button have several restrictions. Basically, only the single tap event will work.
- **#227**: Update current URL in HTML5 example
- Now if you will open the example from direct URL, it will be updated to the current URL in your browser. So now it's much easier to share the example link with each other.
- **#183**: Documentation about [GUI in World Space](https://forum.defold.com/t/how-to-gui-in-defold/73256#gui-in-world-coordinates-49)
- Also not only the GUI in World Space, but overall How to GUI in Defold article.
- **#234**: [BREAKING][Blocker] Now `blocker:set_enabled` and `blocker:is_enabled` affects only inner state of component. To consume input, the blocker component should be enabled and the node itself should be enabled.
- **#235**: [Drag] Fix Drag coordinates on streched screen.
- **#236**: [Hover] Fix nil return in `hover:on_input`.
- **#237**: [Layout] Add `layout:set_max_gui_upscale` function.
- This functions will scale down element, if current GUI scale is bigger than `max_gui_upscale` value. It can be useful for adapt mobile device to desktop screen.
- **#238**: [System] Add Helper documentation.
- [System] Now the documentation contains the **Druid** size. The current size as dependency is around **67KB**. It counted without extended components, which is not included by default in the build.
❤️ Support ❤️
Please support me if you like this project! It will help me keep engaged to update **Druid** and make it even better!
[![Github-sponsors](https://img.shields.io/badge/sponsor-30363D?style=for-the-badge&logo=GitHub-Sponsors&logoColor=#EA4AAA)](https://github.com/sponsors/insality) [![Ko-Fi](https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge&logo=ko-fi&logoColor=white)](https://ko-fi.com/insality) [![BuyMeACoffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/insality)
Thanks for my the supporters:
- [Defold Foundation](https://defold.com)
- [Ragetto](https://forum.defold.com/u/ragetto)

8
docs_md/game_examples.md Normal file
View File

@ -0,0 +1,8 @@
# Game Examples
## Family Island
## Sea Battle: Universe
## Monkey Mart

1
druid.code-workspace
View File

@ -22,6 +22,7 @@
"input": true, "input": true,
"media": true, "media": true,
"build": true, "build": true,
"docs": true,
".github": true, ".github": true,
".deployer_cache": true, ".deployer_cache": true,
"dist": true "dist": true

702
druid/annotations.lua
View File

File diff suppressed because it is too large Load Diff

47
druid/base/back_handler.lua
View File

@ -1,15 +1,38 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2023 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Component to handle back key (android, backspace) --- Component with event on back and backspace button.
-- <b># Overview #</b>
--
-- Back Handler is recommended to put in every game window to close it
-- or in main screen to call settings window.
--
-- <b># Notes #</b>
--
-- • Back Handler inheritance @{BaseComponent}, you can use all of its methods in addition to those described here.
--
-- • Back Handler react on release action ACTION_BACK or ACTION_BACKSPACE
-- @usage
-- local callback = function(self, params) ... end
--
-- local params = {}
-- local back_handler = self.druid:new_back_handler(callback, [params])
-- @module BackHandler -- @module BackHandler
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.back_handler -- @alias druid.back_handler
--- On back handler callback(self, params) --- The @{DruidEvent} Event on back handler action.
--
-- Trigger on input action ACTION_BACK or ACTION_BACKSPACE
-- @usage
-- -- Subscribe additional callbacks:
-- back_handler.on_back:subscribe(callback)
-- @tfield DruidEvent on_back @{DruidEvent} -- @tfield DruidEvent on_back @{DruidEvent}
--- Params to back callback --- Custom args to pass in the callback
-- @tfield any params -- @usage
-- -- Replace params on runtime:
-- back_handler.params = { ... }
-- @tfield[opt] any params
--- ---
@ -20,22 +43,24 @@ local component = require("druid.component")
local BackHandler = component.create("back_handler") local BackHandler = component.create("back_handler")
--- Component init function --- The @{BackHandler} constructor
-- @tparam BackHandler self @{BackHandler} -- @tparam BackHandler self @{BackHandler}
-- @tparam callback callback On back button -- @tparam callback callback On back button
-- @tparam[opt] any params Callback argument -- @tparam[opt] any custom_args Button events custom arguments
function BackHandler.init(self, callback, params) -- @local
self.params = params function BackHandler.init(self, callback, custom_args)
self.params = custom_args
self.on_back = Event(callback) self.on_back = Event(callback)
end end
--- Input handler for component --- Component input handler
-- @tparam BackHandler self @{BackHandler} -- @tparam BackHandler self @{BackHandler}
-- @tparam string action_id on_input action id -- @tparam string action_id on_input action id
-- @tparam table action on_input action -- @tparam table action on_input action
-- @local
function BackHandler.on_input(self, action_id, action) function BackHandler.on_input(self, action_id, action)
if not action[const.RELEASED] then if not action.released then
return false return false
end end

42
druid/base/blocker.lua
View File

@ -1,11 +1,25 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2023 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Component to block input on specify zone by node --- Component to consume input in special zone defined by GUI node.
-- <b># Overview #</b>
--
-- <b># Notes #</b>
--
-- Blocker consume input if `gui.pick_node` works on it.
--
-- • Blocker inheritance @{BaseComponent}, you can use all of its methods in addition to those described here.
--
-- • Blocker initial enabled state is `gui.is_enabled(node, true)`
--
-- • The Blocker node should be enabled to capture the input
-- @usage
-- local node = gui.get_node("blocker_node")
-- local blocker = self.druid:new_blocker(node)
-- @module Blocker -- @module Blocker
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.blocker -- @alias druid.blocker
---Trigger node ---Blocker node
-- @tfield node node -- @tfield node node
--- ---
@ -16,14 +30,20 @@ local component = require("druid.component")
local Blocker = component.create("blocker") local Blocker = component.create("blocker")
--- Component init function --- @{Blocker} constructor
-- @tparam Blocker self @{Blocker} -- @tparam Blocker self @{Blocker}
-- @tparam node node Gui node -- @tparam node node Gui node
function Blocker.init(self, node) function Blocker.init(self, node)
self.node = self:get_node(node) self.node = self:get_node(node)
self._is_enabled = gui.is_enabled(self.node, true)
end end
--- Component input handler
-- @tparam Blocker self @{Blocker}
-- @tparam string action_id on_input action id
-- @tparam table action on_input action
-- @local
function Blocker.on_input(self, action_id, action) function Blocker.on_input(self, action_id, action)
if action_id ~= const.ACTION_TOUCH and if action_id ~= const.ACTION_TOUCH and
action_id ~= const.ACTION_MULTITOUCH and action_id ~= const.ACTION_MULTITOUCH and
@ -35,6 +55,10 @@ function Blocker.on_input(self, action_id, action)
return false return false
end end
if not gui.is_enabled(self.node, true) then
return false
end
if gui.pick_node(self.node, action.x, action.y) then if gui.pick_node(self.node, action.x, action.y) then
return true return true
end end
@ -43,19 +67,21 @@ function Blocker.on_input(self, action_id, action)
end end
--- Set enabled blocker component state --- Set enabled blocker component state.
--
-- Don't change node enabled state itself.
-- @tparam Blocker self @{Blocker} -- @tparam Blocker self @{Blocker}
-- @tparam bool state Enabled state -- @tparam bool state Enabled state
function Blocker.set_enabled(self, state) function Blocker.set_enabled(self, state)
gui.set_enabled(self.node, state) self._is_enabled = state
end end
--- Return blocked enabled state --- Return blocker enabled state
-- @tparam Blocker self @{Blocker} -- @tparam Blocker self @{Blocker}
-- @treturn bool True, if blocker is enabled -- @treturn bool True, if blocker is enabled
function Blocker.is_enabled(self) function Blocker.is_enabled(self)
return gui.is_enabled(self.node) return self._is_enabled
end end

247
druid/base/button.lua
View File

@ -1,53 +1,137 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Component to handle basic GUI button --- Druid Component for Handling User Click Interactions: Click, Long Click, Double Click, and More.
--
-- <b># Overview #</b>
--
-- This component provides a versatile solution for handling user click interactions.
-- It allows you to make any GUI node clickable and define various callbacks for different types of clicks.
--
-- <b># Notes #</b>
--
-- • The click callback will not trigger if the cursor moves outside the node's
-- area between the pressed and released states.
--
-- • If a button has a double click event subscriber and the double click event is triggered,
-- the regular click callback will not be triggered.
--
-- • Buttons can be triggered using a keyboard key by calling the button:set_key_trigger method.
--
-- • To animate a small icon on a big button panel, you can use an animation node.
-- The trigger node name should be set as "big panel," and the animation node should be set as "small icon."
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=general_buttons" target="_blank"><b>Example Link</b></a>
-- @usage
-- local function on_button_click(self, args, button)
-- print("Button has clicked with params: " .. args)
-- print("Also the button component is passed in callback params")
-- end
--
-- local custom_args = "Any variable to pass inside callback"
-- local button = self.druid:new_button("button_name", on_button_click, custom_args)
--
-- @module Button -- @module Button
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.button -- @alias druid.button
--- On release button callback(self, params, button_instance)
--- The @{DruidEvent}: Event on successful release action over button.
-- @usage
-- -- Custom args passed in Button constructor
-- button.on_click:subscribe(function(self, custom_args, button_instance)
-- print("On button click!")
-- end)
-- @tfield DruidEvent on_click @{DruidEvent} -- @tfield DruidEvent on_click @{DruidEvent}
--- On repeated action button callback(self, params, button_instance, click_amount)
--- The @{DruidEvent}: Event on repeated action over button.
--
-- This callback will be triggered if user hold the button. The repeat rate pick from `input.repeat_interval` in game.project
-- @usage
-- -- Custom args passed in Button constructor
-- button.on_repeated_click:subscribe(function(self, custom_args, button_instance, click_count)
-- print("On repeated Button click!")
-- end)
-- @tfield DruidEvent on_repeated_click @{DruidEvent} -- @tfield DruidEvent on_repeated_click @{DruidEvent}
---On long tap button callback(self, params, button_instance, time)
--- The @{DruidEvent}: Event on long tap action over button.
--
-- This callback will be triggered if user pressed the button and hold the some amount of time.
-- The amount of time picked from button style param: LONGTAP_TIME
-- @usage
-- -- Custom args passed in Button constructor
-- button.on_long_click:subscribe(function(self, custom_args, button_instance, hold_time)
-- print("On long Button click!")
-- end)
-- @tfield DruidEvent on_long_click @{DruidEvent} -- @tfield DruidEvent on_long_click @{DruidEvent}
---On double tap button callback(self, params, button_instance, click_amount)
--- The @{DruidEvent}: Event on double tap action over button.
--
-- If secondary click was too fast after previous one, the double
-- click will be called instead usual click (if on_double_click subscriber exists)
-- @usage
-- -- Custom args passed in Button constructor
-- button.on_double_click:subscribe(function(self, custom_args, button_instance, click_amount)
-- print("On double Button click!")
-- end)
-- @tfield DruidEvent on_double_click @{DruidEvent} -- @tfield DruidEvent on_double_click @{DruidEvent}
---On button hold before long_click callback(self, params, button_instance, time)
--- The @{DruidEvent}: Event calls every frame before on_long_click event.
--
-- If long_click subscriber exists, the on_hold_callback will be called before long_click trigger.
--
-- Usecase: Animate button progress of long tap
-- @usage
-- -- Custom args passed in Button constructor
-- button.on_double_click:subscribe(function(self, custom_args, button_instance, time)
-- print("On hold Button callback!")
-- end)
-- @tfield DruidEvent on_hold_callback @{DruidEvent} -- @tfield DruidEvent on_hold_callback @{DruidEvent}
---On click outside of button(self, params, button_instance)
--- The @{DruidEvent}: Event calls if click event was outside of button.
--
-- This event will be triggered for each button what was not clicked on user click action
--
-- Usecase: Hide the popup when click outside
-- @usage
-- -- Custom args passed in Button constructor
-- button.on_click_outside:subscribe(function(self, custom_args, button_instance)
-- print("On click Button outside!")
-- end)
-- @tfield DruidEvent on_click_outside @{DruidEvent} -- @tfield DruidEvent on_click_outside @{DruidEvent}
---Trigger node
-- @tfield node node
---The hash of trigger node --- The @{DruidEvent}: Event triggered if button was pressed by user.
-- @tfield node_id hash -- @usage
-- -- Custom args passed in Button constructor
-- button.on_pressed:subscribe(function(self, custom_args, button_instance)
-- print("On Button pressed!")
-- end)
-- @tfield DruidEvent on_pressed @{DruidEvent}
---Animation node --- Button trigger node
-- @tfield Node node
---The GUI node id from button node
-- @tfield hash node_id
--- Button animation node.
-- In default case equals to clickable node.
--
-- Usecase: You have the big clickable panel, but want to animate only one small icon on it.
-- @tfield[opt=node] node anim_node -- @tfield[opt=node] node anim_node
---Initial scale of anim_node ---Custom args for any Button event. Setup in Button constructor
-- @tfield vector3 start_scale
---Initial pos of anim_node
-- @tfield vector3 start_pos
---Initial pos of anim_node
-- @tfield vector3 pos
---Params to click callbacks
-- @tfield any params -- @tfield any params
---Druid hover logic component --- The @{Hover}: Button Hover component
-- @tfield Hover hover @{Hover} -- @tfield Hover hover @{Hover}
---Restriction zone --- Additional button click area, defined by another GUI Node
-- @tfield[opt] node click_zone -- @tfield[opt] node click_zone
--- ---
@ -61,7 +145,7 @@ local Button = component.create("button")
local function is_input_match(self, action_id) local function is_input_match(self, action_id)
if action_id == const.ACTION_TOUCH then if action_id == const.ACTION_TOUCH or action_id == const.ACTION_MULTITOUCH then
return true return true
end end
@ -84,6 +168,10 @@ end
local function on_button_click(self) local function on_button_click(self)
if self._is_html5_mode then
self._is_html5_listener_set = false
html5.set_interaction_listener(nil)
end
self.click_in_row = 1 self.click_in_row = 1
self.on_click:trigger(self:get_context(), self.params, self) self.on_click:trigger(self:get_context(), self.params, self)
self.style.on_click(self, self.anim_node) self.style.on_click(self, self.anim_node)
@ -141,11 +229,11 @@ local function on_button_release(self)
end end
return true return true
else else
if self.can_action then if self.can_action and not self._is_html5_mode then
self.can_action = false self.can_action = false
local time = socket.gettime() 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() 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
@ -167,7 +255,7 @@ end
--- Component style params. --- Component style params.
-- You can override this component styles params in druid styles table -- You can override this component styles params in Druid styles table
-- or create your own style -- or create your own style
-- @table style -- @table style
-- @tfield[opt=0.4] number LONGTAP_TIME Minimum time to trigger on_hold_callback -- @tfield[opt=0.4] number LONGTAP_TIME Minimum time to trigger on_hold_callback
@ -192,13 +280,13 @@ function Button.on_style_change(self, style)
end end
--- Component init function --- The @{Button} constructor
-- @tparam Button self @{Button} -- @tparam Button self @{Button}
-- @tparam node node Gui node -- @tparam string|Node node Node name or GUI Node itself
-- @tparam function callback Button callback -- @tparam function callback On click button callback
-- @tparam[opt] table params Button callback params -- @tparam[opt] any custom_args Button events custom arguments
-- @tparam[opt] node anim_node Button anim node (node, if not provided) -- @tparam[opt] string|Node anim_node Node to animate instead of trigger node.
function Button.init(self, node, callback, params, anim_node) function Button.init(self, node, callback, custom_args, anim_node)
self.druid = self:get_druid() self.druid = self:get_druid()
self.node = self:get_node(node) self.node = self:get_node(node)
self.node_id = gui.get_id(self.node) self.node_id = gui.get_id(self.node)
@ -206,7 +294,7 @@ function Button.init(self, node, callback, params, anim_node)
self.anim_node = anim_node and self:get_node(anim_node) or self.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_scale = gui.get_scale(self.anim_node)
self.start_pos = gui.get_position(self.anim_node) self.start_pos = gui.get_position(self.anim_node)
self.params = params self.params = custom_args
self.hover = self.druid:new_hover(node, on_button_hover) self.hover = self.druid:new_hover(node, on_button_hover)
self.hover.on_mouse_hover:subscribe(on_button_mouse_hover) self.hover.on_mouse_hover:subscribe(on_button_mouse_hover)
self.click_zone = nil self.click_zone = nil
@ -218,9 +306,12 @@ function Button.init(self, node, callback, params, anim_node)
self._check_function = nil self._check_function = nil
self._failure_callback = nil self._failure_callback = nil
self._is_html5_mode = false
self._is_html5_listener_set = false
-- Event stubs -- Events
self.on_click = Event(callback) self.on_click = Event(callback)
self.on_pressed = Event()
self.on_repeated_click = Event() self.on_repeated_click = Event()
self.on_long_click = Event() self.on_long_click = Event()
self.on_double_click = Event() self.on_double_click = Event()
@ -244,17 +335,18 @@ function Button.on_input(self, action_id, action)
return false return false
end end
if not helper.is_enabled(self.node) then if not gui.is_enabled(self.node, true) then
return false
end
if not self:is_enabled() then
return false return false
end end
local is_pick = true local is_pick = true
local is_key_trigger = (action_id == self.key_trigger) local is_key_trigger = (action_id == self.key_trigger)
if not is_key_trigger then if not is_key_trigger then
is_pick = gui.pick_node(self.node, action.x, action.y) is_pick = helper.pick_node(self.node, action.x, action.y, self.click_zone)
if self.click_zone then
is_pick = is_pick and gui.pick_node(self.click_zone, action.x, action.y)
end
end end
if not is_pick then if not is_pick then
@ -263,6 +355,11 @@ function Button.on_input(self, action_id, action)
if action.released then if action.released then
self.on_click_outside:trigger(self:get_context(), self.params, self) self.on_click_outside:trigger(self:get_context(), self.params, self)
end end
if self._is_html5_mode and self._is_html5_listener_set then
self._is_html5_listener_set = false
html5.set_interaction_listener(nil)
end
return false return false
end end
@ -275,12 +372,20 @@ function Button.on_input(self, action_id, action)
self.can_action = true self.can_action = true
self.is_repeated_started = false self.is_repeated_started = false
self.last_pressed_time = socket.gettime() self.last_pressed_time = socket.gettime()
self.on_pressed:trigger(self:get_context(), self.params, self)
if self._is_html5_mode then
self._is_html5_listener_set = true
html5.set_interaction_listener(function()
on_button_click(self)
end)
end
return true return true
end end
-- While hold button, repeat rate pick from input.repeat_interval -- While hold button, repeat rate pick from input.repeat_interval
if action.repeated then if action.repeated then
if not self.disabled and self.on_repeated_click:is_exist() and self.can_action then if self.on_repeated_click:is_exist() and self.can_action then
on_button_repeated_click(self) on_button_repeated_click(self)
return true return true
end end
@ -290,7 +395,7 @@ function Button.on_input(self, action_id, action)
return on_button_release(self) return on_button_release(self)
end end
if not self.disabled and self.can_action and self.on_long_click:is_exist() then if self.can_action and self.on_long_click:is_exist() then
local press_time = socket.gettime() - self.last_pressed_time local press_time = socket.gettime() - self.last_pressed_time
if self.style.AUTOHOLD_TRIGGER <= press_time then if self.style.AUTOHOLD_TRIGGER <= press_time then
@ -314,7 +419,7 @@ end
function Button.on_message_input(self, node_id, message) function Button.on_message_input(self, node_id, message)
if node_id ~= self.node_id or self.disabled or not helper.is_enabled(self.node) then if node_id ~= self.node_id or self.disabled or not gui.is_enabled(self.node) then
return false return false
end end
@ -338,10 +443,15 @@ function Button.on_message_input(self, node_id, message)
end end
--- Set enabled button component state --- Set button enabled state.
-- The style.on_set_enabled will be triggered.
-- Disabled button is not clickable.
-- @tparam Button self @{Button} -- @tparam Button self @{Button}
-- @tparam bool state Enabled state -- @tparam bool state Enabled state
-- @treturn Button Current button instance -- @treturn Button Current button instance
-- @usage
-- button:set_enabled(false)
-- button:set_enabled(true)
function Button.set_enabled(self, state) function Button.set_enabled(self, state)
self.disabled = not state self.disabled = not state
self.hover:set_enabled(state) self.hover:set_enabled(state)
@ -351,19 +461,27 @@ function Button.set_enabled(self, state)
end end
--- Return button enabled state --- Get button enabled state.
--
-- By default all Buttons is enabled on creating.
-- @tparam Button self @{Button} -- @tparam Button self @{Button}
-- @treturn bool True, if button is enabled -- @treturn bool True, if button is enabled now, False overwise
-- @usage
-- local is_enabled = button:is_enabled()
function Button.is_enabled(self) function Button.is_enabled(self)
return not self.disabled return not self.disabled
end end
--- Strict button click area. Useful for --- Set additional button click area.
-- no click events outside stencil node -- Useful to restrict click outside out stencil node or scrollable content.
--
-- This functions calls automatically if you don't disable it in game.project: druid.no_stencil_check
-- @tparam Button self @{Button} -- @tparam Button self @{Button}
-- @tparam node zone Gui node -- @tparam node zone Gui node
-- @treturn Button Current button instance -- @treturn Button Current button instance
-- @usage
-- button:set_click_zone("stencil_node")
function Button.set_click_zone(self, zone) function Button.set_click_zone(self, zone)
self.click_zone = self:get_node(zone) self.click_zone = self:get_node(zone)
self.hover:set_click_zone(zone) self.hover:set_click_zone(zone)
@ -372,10 +490,12 @@ function Button.set_click_zone(self, zone)
end end
--- Set key-code to trigger this button --- Set key name to trigger this button by keyboard.
-- @tparam Button self @{Button} -- @tparam Button self @{Button}
-- @tparam hash key The action_id of the key -- @tparam hash key The action_id of the input key
-- @treturn Button Current button instance -- @treturn Button Current button instance
-- @usage
-- button:set_key_trigger("key_space")
function Button.set_key_trigger(self, key) function Button.set_key_trigger(self, key)
self.key_trigger = hash(key) self.key_trigger = hash(key)
@ -383,9 +503,11 @@ function Button.set_key_trigger(self, key)
end end
--- Get key-code to trigger this button --- Get current key name to trigger this button.
-- @tparam Button self -- @tparam Button self
-- @treturn hash The action_id of the key -- @treturn hash The action_id of the input key
-- @usage
-- local key_hash = button:get_key_trigger()
function Button.get_key_trigger(self) function Button.get_key_trigger(self)
return self.key_trigger return self.key_trigger
end end
@ -394,7 +516,7 @@ end
--- Set function for additional check for button click availability --- Set function for additional check for button click availability
-- @tparam Button self -- @tparam Button self
-- @tparam[opt] function check_function Should return true or false. If true - button can be pressed. -- @tparam[opt] function check_function Should return true or false. If true - button can be pressed.
-- @tparam[opt] function failure_callback Function what will be called on button click, if check function return false -- @tparam[opt] function failure_callback Function will be called on button click, if check function return false
-- @treturn Button Current button instance -- @treturn Button Current button instance
function Button.set_check_function(self, check_function, failure_callback) function Button.set_check_function(self, check_function, failure_callback)
self._check_function = check_function self._check_function = check_function
@ -402,4 +524,21 @@ function Button.set_check_function(self, check_function, failure_callback)
end end
--- Set Button mode to work inside user HTML5 interaction event.
--
-- It's required to make protected things like copy & paste text, show mobile keyboard, etc
-- The HTML5 button's doesn't call any events except on_click event.
--
-- If the game is not HTML, html mode will be not enabled
-- @tparam Button self
-- @tparam[opt] boolean is_web_mode If true - button will be called inside html5 callback
-- @treturn Button Current button instance
-- @usage
-- button:set_web_user_interaction(true)
function Button.set_web_user_interaction(self, is_web_mode)
self._is_html5_mode = not not (is_web_mode and html5)
return self
end
return Button return Button

41
druid/base/drag.lua
View File

@ -4,6 +4,8 @@
-- Drag have correct handling for multitouch and swap -- Drag have correct handling for multitouch and swap
-- touched while dragging. Drag will be processed even -- touched while dragging. Drag will be processed even
-- the cursor is outside of node, if drag is already started -- the cursor is outside of node, if drag is already started
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=general_drag" target="_blank"><b>Example Link</b></a>
-- @module Drag -- @module Drag
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.drag -- @alias druid.drag
@ -63,6 +65,7 @@ local function start_touch(self, touch)
self.x = touch.x self.x = touch.x
self.y = touch.y self.y = touch.y
self._scene_scale = helper.get_scene_scale(self.node)
self.on_touch_start:trigger(self:get_context()) self.on_touch_start:trigger(self:get_context())
end end
@ -70,7 +73,11 @@ end
local function end_touch(self) local function end_touch(self)
if self.is_drag then if self.is_drag then
self.on_drag_end:trigger(self:get_context(), self.x - self.touch_start_pos.x, self.y - self.touch_start_pos.y) self.on_drag_end:trigger(
self:get_context(),
self.x - self.touch_start_pos.x,
self.y - self.touch_start_pos.y
)
end end
self.is_drag = false self.is_drag = false
@ -155,9 +162,11 @@ end
-- or create your own style -- or create your own style
-- @table style -- @table style
-- @tfield[opt=10] number DRAG_DEADZONE Distance in pixels to start dragging -- @tfield[opt=10] number DRAG_DEADZONE Distance in pixels to start dragging
-- @tfield[opt=false] boolean NO_USE_SCREEN_KOEF If screen aspect ratio affects on drag values
function Drag.on_style_change(self, style) function Drag.on_style_change(self, style)
self.style = {} self.style = {}
self.style.DRAG_DEADZONE = style.DRAG_DEADZONE or 10 self.style.DRAG_DEADZONE = style.DRAG_DEADZONE or 10
self.style.NO_USE_SCREEN_KOEF = style.NO_USE_SCREEN_KOEF or false
end end
@ -176,11 +185,13 @@ function Drag.init(self, node, on_drag_callback)
self.is_touch = false self.is_touch = false
self.is_drag = false self.is_drag = false
self.touch_start_pos = vmath.vector3(0) self.touch_start_pos = vmath.vector3(0)
self._is_disabled = false self._is_enabled = true
self.can_x = true self.can_x = true
self.can_y = true self.can_y = true
self._scene_scale = helper.get_scene_scale(self.node)
self.click_zone = nil self.click_zone = nil
self.on_touch_start = Event() self.on_touch_start = Event()
self.on_touch_end = Event() self.on_touch_end = Event()
@ -206,6 +217,7 @@ function Drag.on_window_resized(self)
local x_koef, y_koef = helper.get_screen_aspect_koef() local x_koef, y_koef = helper.get_screen_aspect_koef()
self._x_koef = x_koef self._x_koef = x_koef
self._y_koef = y_koef self._y_koef = y_koef
self._scene_scale = helper.get_scene_scale(self.node)
end end
@ -221,15 +233,11 @@ function Drag.on_input(self, action_id, action)
return false return false
end end
if not helper.is_enabled(self.node) or self._is_disabled then if not self._is_enabled or not gui.is_enabled(self.node, true) then
return false return false
end end
local is_pick = gui.pick_node(self.node, action.x, action.y) local is_pick = helper.pick_node(self.node, action.x, action.y, self.click_zone)
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 if not is_pick and not self.is_drag then
end_touch(self) end_touch(self)
return false return false
@ -278,11 +286,16 @@ function Drag.on_input(self, action_id, action)
end end
if self.is_drag then if self.is_drag then
local x_koef, y_koef = self._x_koef, self._y_koef
if self.style.NO_USE_SCREEN_KOEF then
x_koef, y_koef = 1, 1
end
self.on_drag:trigger(self:get_context(), self.on_drag:trigger(self:get_context(),
self.dx * self._x_koef, self.dx * x_koef / self._scene_scale.x,
self.dy * self._y_koef, self.dy * y_koef / self._scene_scale.y,
(self.x - self.touch_start_pos.x) * self._x_koef, (self.x - self.touch_start_pos.x) * x_koef / self._scene_scale.x,
(self.y - self.touch_start_pos.y) * self._y_koef) (self.y - self.touch_start_pos.y) * y_koef / self._scene_scale.y)
end end
return self.is_drag return self.is_drag
@ -302,7 +315,7 @@ end
-- @tparam Drag self @{Drag} -- @tparam Drag self @{Drag}
-- @tparam bool is_enabled -- @tparam bool is_enabled
function Drag.set_enabled(self, is_enabled) function Drag.set_enabled(self, is_enabled)
self._is_disabled = not is_enabled self._is_enabled = is_enabled
end end
@ -310,7 +323,7 @@ end
-- @tparam Drag self @{Drag} -- @tparam Drag self @{Drag}
-- @treturn bool -- @treturn bool
function Drag.is_enabled(self) function Drag.is_enabled(self)
return not self._is_disabled return self._is_enabled
end end

35
druid/base/hover.lua
View File

@ -5,10 +5,10 @@
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.hover -- @alias druid.hover
--- On hover callback(self, state) --- On hover callback(self, state, hover_instance)
-- @tfield DruidEvent on_hover @{DruidEvent} -- @tfield DruidEvent on_hover @{DruidEvent}
--- On mouse hover callback(self, state) --- On mouse hover callback(self, state, hover_instance)
-- @tfield DruidEvent on_mouse_hover @{DruidEvent} -- @tfield DruidEvent on_mouse_hover @{DruidEvent}
--- ---
@ -58,17 +58,13 @@ function Hover.on_input(self, action_id, action)
return false return false
end end
if not helper.is_enabled(self.node) or not self._is_enabled then if not gui.is_enabled(self.node, true) or not self._is_enabled then
self:set_hover(false) self:set_hover(false)
self:set_mouse_hover(false) self:set_mouse_hover(false)
return false return false
end end
local is_pick = gui.pick_node(self.node, action.x, action.y) local is_pick = helper.pick_node(self.node, action.x, action.y, self.click_zone)
if self.click_zone then
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 local hover_function = action_id and self.set_hover or self.set_mouse_hover
if not is_pick then if not is_pick then
@ -81,6 +77,8 @@ function Hover.on_input(self, action_id, action)
else else
hover_function(self, true) hover_function(self, true)
end end
return false
end end
@ -95,21 +93,38 @@ end
function Hover.set_hover(self, state) function Hover.set_hover(self, state)
if self._is_hovered ~= state then if self._is_hovered ~= state then
self._is_hovered = state self._is_hovered = state
self.on_hover:trigger(self:get_context(), state) self.on_hover:trigger(self:get_context(), state, self)
end end
end end
--- Return current hover state. True if touch action was on the node at current time
-- @tparam Hover self @{Hover}
-- @treturn bool The current hovered state
function Hover.is_hovered(self)
return self._is_hovered
end
--- Set mouse hover state --- Set mouse hover state
-- @tparam Hover self @{Hover} -- @tparam Hover self @{Hover}
-- @tparam bool state The mouse hover state -- @tparam bool state The mouse hover state
function Hover.set_mouse_hover(self, state) function Hover.set_mouse_hover(self, state)
if self._is_mouse_hovered ~= state then if self._is_mouse_hovered ~= state then
self._is_mouse_hovered = state self._is_mouse_hovered = state
self.on_mouse_hover:trigger(self:get_context(), state) self.on_mouse_hover:trigger(self:get_context(), state, self)
end end
end end
--- Return current hover state. True if nil action_id (usually desktop mouse) was on the node at current time
-- @tparam Hover self @{Hover}
-- @treturn bool The current hovered state
function Hover.is_mouse_hovered(self)
return self._is_mouse_hovered
end
--- Strict hover click area. Useful for --- Strict hover click area. Useful for
-- no click events outside stencil node -- no click events outside stencil node
-- @tparam Hover self @{Hover} -- @tparam Hover self @{Hover}

49
druid/base/scroll.lua
View File

@ -1,12 +1,38 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Component to handle scroll content. --- Component to handle scroll content.
-- Scroll consist from two nodes: scroll parent and scroll input -- <b># Overview #</b>
-- Scroll input the user input zone, it's static --
-- Scroll parent the scroll moving part, it will change position. -- The Scroll component is designed to handle scrollable content and consists of two nodes: the scroll parent and the scroll input.
-- Setup initial scroll size by changing scroll parent size. If scroll parent --
-- size will be less than scroll_input size, no scroll is available. For scroll -- The scroll input represents the user input zone and remains static.
-- parent size should be more than input size --
-- The scroll parent is the movable part of the scroll and changes its position.
--
-- The initial scroll size can be set by adjusting the size of the scroll parent.
-- If the size of the scroll parent is smaller than the scroll input size, scrolling is not available.
--
-- <b># Notes #</b>
--
-- • By default, the scroll style includes inertia and extra size for a stretching effect.
-- These settings can be adjusted using the scroll style settings.
-- For more details, refer to the scroll style settings.
--
-- • "Points of interest" can be set up for the scroll.
-- The scroll will always be centered on the closest point of interest.
-- This feature allows creating a slider without inertia and with points of interest on each scroll element.
--
-- • The scroll content size can be adjusted using the scroll:set_size(node_size) method.
-- This method sets a new size for the _content node.
--
-- • Inertial scrolling mode can be enabled or disabled using the scroll:set_inert(state) method.
--
-- • The extra stretch size can be adjusted using the scroll:set_extra_stretch_size method.
--
-- • Multitouch is required for scrolling. The scroll component correctly handles
-- touch ID swaps while dragging the scroll.
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=general_scroll" target="_blank"><b>Example Link</b></a>
-- @module Scroll -- @module Scroll
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.scroll -- @alias druid.scroll
@ -132,10 +158,10 @@ function Scroll.on_style_change(self, style)
end end
--- Scroll constructor --- @{Scroll} constructor
-- @tparam Scroll self @{Scroll} -- @tparam Scroll self @{Scroll}
-- @tparam node view_node GUI view scroll node -- @tparam string|node view_node GUI view scroll node
-- @tparam node content_node GUI content scroll node -- @tparam string|node content_node GUI content scroll node
function Scroll.init(self, view_node, content_node) function Scroll.init(self, view_node, content_node)
self.druid = self:get_druid() self.druid = self:get_druid()
@ -143,7 +169,7 @@ function Scroll.init(self, view_node, content_node)
self.view_border = helper.get_border(self.view_node) self.view_border = helper.get_border(self.view_node)
self.content_node = self:get_node(content_node) self.content_node = self:get_node(content_node)
self.view_size = vmath.mul_per_elem(gui.get_size(self.view_node), gui.get_scale(self.view_node)) self.view_size = helper.get_scaled_size(self.view_node)
self.position = gui.get_position(self.content_node) self.position = gui.get_position(self.content_node)
self.target_position = vmath.vector3(self.position) self.target_position = vmath.vector3(self.position)
@ -457,7 +483,6 @@ function Scroll.bind_grid(self, grid)
local size = grid:get_size() local size = grid:get_size()
local offset = grid:get_offset() local offset = grid:get_offset()
self:set_size(size, offset) self:set_size(size, offset)
self:log_message("Change size from grid", { size = size, offset = offset })
end) end)
self:set_size(grid:get_size(), grid:get_offset()) self:set_size(grid:get_size(), grid:get_offset())
@ -694,7 +719,7 @@ end
function Scroll._update_size(self) function Scroll._update_size(self)
local content_border = helper.get_border(self.content_node) 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)) local content_size = helper.get_scaled_size(self.content_node)
self.available_pos = get_border_vector(self.view_border - content_border, self._offset) self.available_pos = get_border_vector(self.view_border - content_border, self._offset)
self.available_size = get_size_vector(self.available_pos) self.available_size = get_size_vector(self.available_pos)

68
druid/base/static_grid.lua
View File

@ -1,7 +1,37 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Component to handle placing components by row and columns. --- Component to handle component's position by row and columns.
-- Grid can anchor your elements, get content size and other -- <b># Overview #</b>
--
-- The Static Grid component allows for positioning components in rows and columns.
-- It provides a static grid layout with constant node sizes, allowing for pre-calculated
-- node positions and the option to include gaps between nodes.
--
-- <b># Notes #</b>
--
-- • In a static grid, the node size remains constant, enabling the calculation of node
-- positions before placement. If you want add gaps between nodes, increase the root prefab size,
-- including the padding and margin.
--
-- • The static grid can automatically shift elements when nodes are added or removed.
--
-- • When a node is added, the grid will set the node's parent to the specified parent_node.
--
-- • You can obtain an array of positions for each element, which can be used to set
-- points of interest in a scroll component.
--
-- • The size of all elements can be retrieved for setting up the size in a scroll component.
--
-- • The grid can be bound to a scroll component for automatic resizing of the scroll content size.
--
-- • The pivot of the parent_node affects the node placement within the grid.
--
-- • A prefab node is used to determine the node size and anchor.
--
-- • You can specify a position_function for animations using the
-- _static_grid:set_position_function(node, pos) callback. The default position function is gui.set_position().
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=general_grid" target="_blank"><b>Example Link</b></a>
-- @module StaticGrid -- @module StaticGrid
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.static_grid -- @alias druid.static_grid
@ -81,9 +111,9 @@ function StaticGrid.on_style_change(self, style)
end end
--- Component init function --- The @{StaticGrid} constructor
-- @tparam StaticGrid self @{StaticGrid} -- @tparam StaticGrid self @{StaticGrid}
-- @tparam node parent The gui node parent, where items will be placed -- @tparam string|Node parent The GUI Node container, where grid's items will be placed
-- @tparam node element Element prefab. Need to get it size -- @tparam node element Element prefab. Need to get it size
-- @tparam[opt=1] number in_row How many nodes in row can be placed -- @tparam[opt=1] number in_row How many nodes in row can be placed
function StaticGrid.init(self, parent, element, in_row) function StaticGrid.init(self, parent, element, in_row)
@ -188,23 +218,9 @@ end
-- @tparam[opt=SHIFT.RIGHT] number shift_policy How shift nodes, if required. See const.SHIFT -- @tparam[opt=SHIFT.RIGHT] number shift_policy How shift nodes, if required. See const.SHIFT
-- @tparam[opt=false] boolean is_instant If true, update node positions instantly -- @tparam[opt=false] boolean is_instant If true, update node positions instantly
function StaticGrid.add(self, item, index, shift_policy, is_instant) function StaticGrid.add(self, item, index, shift_policy, is_instant)
shift_policy = shift_policy or const.SHIFT.RIGHT
index = index or ((self.last_index or 0) + 1) index = index or ((self.last_index or 0) + 1)
if self.nodes[index] then helper.insert_with_shift(self.nodes, item, index, shift_policy)
if shift_policy == const.SHIFT.RIGHT then
for i = self.last_index, index, -1 do
self.nodes[i + 1] = self.nodes[i]
end
end
if shift_policy == const.SHIFT.LEFT then
for i = self.first_index, index do
self.nodes[i - 1] = self.nodes[i]
end
end
end
self.nodes[index] = item
gui.set_parent(item, self.parent) gui.set_parent(item, self.parent)
-- Add new item instantly in new pos. Break update function for correct positioning -- Add new item instantly in new pos. Break update function for correct positioning
@ -227,22 +243,10 @@ end
-- @tparam[opt=false] boolean is_instant If true, update node positions instantly -- @tparam[opt=false] boolean is_instant If true, update node positions instantly
-- @treturn Node The deleted gui node from grid -- @treturn Node The deleted gui node from grid
function StaticGrid.remove(self, index, shift_policy, is_instant) function StaticGrid.remove(self, index, shift_policy, is_instant)
shift_policy = shift_policy or const.SHIFT.RIGHT
assert(self.nodes[index], "No grid item at given index " .. index) assert(self.nodes[index], "No grid item at given index " .. index)
local remove_node = self.nodes[index] local remove_node = self.nodes[index]
self.nodes[index] = nil helper.remove_with_shift(self.nodes, index, shift_policy)
if shift_policy == const.SHIFT.RIGHT then
for i = index, self.last_index do
self.nodes[i] = self.nodes[i + 1]
end
end
if shift_policy == const.SHIFT.LEFT then
for i = index, self.first_index, -1 do
self.nodes[i] = self.nodes[i - 1]
end
end
self:_update(is_instant) self:_update(is_instant)

64
druid/base/text.lua
View File

@ -1,8 +1,36 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Component to handle all GUI texts. --- Component for Wrapping GUI Text Nodes: Druid Text
-- Druid text can adjust itself for text node size --
-- Text will never will be outside of his text size (even multiline) -- ## Overview ##
--
-- Druid Text is a component that provides various adjustment modes for text nodes. It allows text to be scaled down to fit within the size of the text node.
--
-- ## Notes ##
--
-- • The text pivot can be changed using the text:set_pivot method.
-- The anchoring will be inside the text node's area size.
--
-- • There are several text adjustment types available. The default is DOWNSCALE.
-- You can change the default adjustment type in the Text style. Refer to the example below to see all available adjustment types:
--
-- - const.TEXT_ADJUST.DOWNSCALE: Changes the text's scale to fit within the text node's size.
--
-- - const.TEXT_ADJUST.TRIM: Trims the text with a postfix (default: "...", can be overridden in styles)
-- to fit within the text node's size.
--
-- - const.TEXT_ADJUST.NO_ADJUST: No adjustment is applied, similar
-- to the default Defold Text Node behavior.
--
-- - const.TEXT_ADJUST.DOWNSCALE_LIMITED: Changes the text's scale
-- with a limited downscale. You can set the minimum scale using the text:set_minimal_scale() function.
--
-- - const.TEXT_ADJUST.SCROLL: Changes the text's pivot to imitate scrolling within the text box.
-- For better effect, use with a stencil node.
--
-- - const.TEXT_ADJUST.SCALE_THEN_SCROLL: Combines two modes: limited downscale first, then scroll.
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=texts_general" target="_blank"><b>Example Link</b></a>
-- @module Text -- @module Text
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.text -- @alias druid.text
@ -10,7 +38,7 @@
--- On set text callback(self, text) --- On set text callback(self, text)
-- @tfield DruidEvent on_set_text @{DruidEvent} -- @tfield DruidEvent on_set_text @{DruidEvent}
--- On adjust text size callback(self, new_scale) --- On adjust text size callback(self, new_scale, text_metrics)
-- @tfield DruidEvent on_update_text_scale @{DruidEvent} -- @tfield DruidEvent on_update_text_scale @{DruidEvent}
--- On change pivot callback(self, pivot) --- On change pivot callback(self, pivot)
@ -47,8 +75,10 @@
local Event = require("druid.event") local Event = require("druid.event")
local const = require("druid.const") local const = require("druid.const")
local utf8 = require("druid.system.utf8") local helper = require("druid.helper")
local utf8_lua = require("druid.system.utf8")
local component = require("druid.component") local component = require("druid.component")
local utf8 = utf8 or utf8_lua
local Text = component.create("text") local Text = component.create("text")
@ -77,16 +107,18 @@ local function update_text_area_size(self)
local max_width = self.text_area.x local max_width = self.text_area.x
local max_height = self.text_area.y local max_height = self.text_area.y
local metrics = gui.get_text_metrics_from_node(self.node) local metrics = helper.get_text_metrics_from_node(self.node)
local scale_modifier = max_width / metrics.width local scale_modifier = max_width / metrics.width
scale_modifier = math.min(scale_modifier, self.start_scale.x) scale_modifier = math.min(scale_modifier, self.start_scale.x)
if self:is_multiline() then if self:is_multiline() then
local max_text_area_square = max_width * max_height local scale_modifier_by_height = math.sqrt(max_height / metrics.height)
local cur_text_area_square = metrics.height * metrics.width * self.start_scale.x scale_modifier = math.min(self.start_scale.y, scale_modifier_by_height)
scale_modifier = self.start_scale.x * math.sqrt(max_text_area_square / cur_text_area_square)
scale_modifier = math.min(scale_modifier, self.start_scale.x) if metrics.width * scale_modifier > max_width then
scale_modifier = math.min(max_width / metrics.width, self.start_scale.x)
end
end end
if self._minimal_scale then if self._minimal_scale then
@ -99,7 +131,7 @@ local function update_text_area_size(self)
update_text_size(self) update_text_size(self)
self.on_update_text_scale:trigger(self:get_context(), new_scale) self.on_update_text_scale:trigger(self:get_context(), new_scale, metrics)
end end
@ -133,8 +165,8 @@ end
-- calculate space width with font -- calculate space width with font
local function get_space_width(self, font) local function get_space_width(self, font)
if not self._space_width[font] then if not self._space_width[font] then
local no_space = gui.get_text_metrics(font, "1", 0, false, 0, 0).width local no_space = resource.get_text_metrics(font, "1").width
local with_space = gui.get_text_metrics(font, " 1", 0, false, 0, 0).width local with_space = resource.get_text_metrics(font, " 1").width
self._space_width[font] = with_space - no_space self._space_width[font] = with_space - no_space
end end
@ -184,11 +216,11 @@ function Text.on_style_change(self, style)
end end
--- Component init function --- @{Text} constructor
-- @tparam Text self @{Text} -- @tparam Text self @{Text}
-- @tparam node node Gui text node -- @tparam string|node node Node name or GUI Text Node itself
-- @tparam[opt] string value Initial text. Default value is node text from GUI scene. -- @tparam[opt] string value Initial text. Default value is node text from GUI scene.
-- @tparam[opt=0] int adjust_type Adjust type for text. By default is DOWNSCALE. Look const.TEXT_ADJUST for reference -- @tparam[opt=downscale] string adjust_type Adjust type for text. By default is DOWNSCALE. Look const.TEXT_ADJUST for reference
function Text.init(self, node, value, adjust_type) function Text.init(self, node, value, adjust_type)
self.node = self:get_node(node) self.node = self:get_node(node)
self.pos = gui.get_position(self.node) self.pos = gui.get_position(self.node)

168
druid/component.lua
View File

@ -1,7 +1,20 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Basic class for all Druid components. --- Basic class for all Druid components.
-- To create you component, use `component.create` -- To create you custom component, use static function `component.create`
-- @usage
-- -- Create your component:
-- local component = require("druid.component")
--
-- local AwesomeComponent = component.create("awesome_component")
--
-- function AwesomeComponent:init(template, nodes)
-- self:set_template(template)
-- self:set_nodes(nodes)
-- self.druid = self:get_druid()
-- end
--
-- return AwesomeComponent
-- @module BaseComponent -- @module BaseComponent
-- @alias druid.base_component -- @alias druid.base_component
@ -9,14 +22,12 @@ local const = require("druid.const")
local class = require("druid.system.middleclass") local class = require("druid.system.middleclass")
local helper = require("druid.helper") local helper = require("druid.helper")
local BaseComponent = class("druid.component") local BaseComponent = class("druid.component")
local INTERESTS = {} -- Cache interests by component class in runtime local INTERESTS = {} -- Cache interests per component class in runtime
local IS_AUTO_TEMPLATE = not (sys.get_config("druid.no_auto_template") == "1") local IS_AUTO_TEMPLATE = not (sys.get_config("druid.no_auto_template") == "1")
-- Component Interests
--- Component Interests
BaseComponent.ON_INPUT = const.ON_INPUT BaseComponent.ON_INPUT = const.ON_INPUT
BaseComponent.ON_UPDATE = const.ON_UPDATE BaseComponent.ON_UPDATE = const.ON_UPDATE
BaseComponent.ON_MESSAGE = const.ON_MESSAGE BaseComponent.ON_MESSAGE = const.ON_MESSAGE
@ -28,7 +39,6 @@ BaseComponent.ON_MESSAGE_INPUT = const.ON_MESSAGE_INPUT
BaseComponent.ON_WINDOW_RESIZED = const.ON_WINDOW_RESIZED BaseComponent.ON_WINDOW_RESIZED = const.ON_WINDOW_RESIZED
BaseComponent.ON_LANGUAGE_CHANGE = const.ON_LANGUAGE_CHANGE BaseComponent.ON_LANGUAGE_CHANGE = const.ON_LANGUAGE_CHANGE
BaseComponent.ALL_INTERESTS = { BaseComponent.ALL_INTERESTS = {
BaseComponent.ON_INPUT, BaseComponent.ON_INPUT,
BaseComponent.ON_UPDATE, BaseComponent.ON_UPDATE,
@ -42,7 +52,6 @@ BaseComponent.ALL_INTERESTS = {
BaseComponent.ON_LANGUAGE_CHANGE, BaseComponent.ON_LANGUAGE_CHANGE,
} }
-- Mapping from on_message method to specific method name -- Mapping from on_message method to specific method name
BaseComponent.SPECIFIC_UI_MESSAGES = { BaseComponent.SPECIFIC_UI_MESSAGES = {
[hash("layout_changed")] = BaseComponent.ON_LAYOUT_CHANGE, -- The message_id from Defold [hash("layout_changed")] = BaseComponent.ON_LAYOUT_CHANGE, -- The message_id from Defold
@ -55,34 +64,42 @@ BaseComponent.SPECIFIC_UI_MESSAGES = {
local uid = 0 local uid = 0
function BaseComponent.static.get_uid() function BaseComponent.create_uid()
uid = uid + 1 uid = uid + 1
return uid return uid
end end
--- Set current component style table (protected). --- Set current component style table.
-- Invoke `on_style_change` on component, if exist. BaseComponent should handle --
-- Invoke `on_style_change` on component, if exist. Component should handle
-- their style changing and store all style params -- their style changing and store all style params
-- @function component:set_style
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @tparam table druid_style Druid style module -- @tparam table druid_style Druid style module
-- @treturn BaseComponent @{BaseComponent}
function BaseComponent.set_style(self, druid_style) function BaseComponent.set_style(self, druid_style)
self._meta.style = druid_style or const.EMPTY_TABLE self._meta.style = druid_style or {}
local component_style = self._meta.style[self._component.name] or const.EMPTY_TABLE local component_style = self._meta.style[self._component.name] or {}
if self.on_style_change then if self.on_style_change then
self:on_style_change(component_style) self:on_style_change(component_style)
end end
return self
end end
--- Set current component template name (protected) --- Set component template name.
-- It will check parent template name to build full template name --
-- Use on all your custom components with GUI layouts used as templates.
-- It will check parent template name to build full template name in self:get_node()
-- @function component:set_template
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @tparam string template BaseComponent template name -- @tparam string template BaseComponent template name
-- @treturn BaseComponent @{BaseComponent} -- @treturn BaseComponent @{BaseComponent}
function BaseComponent.set_template(self, template) function BaseComponent.set_template(self, template)
template = template or const.EMPTY_STRING template = template or ""
local parent = self:get_parent_component() local parent = self:get_parent_component()
if parent and IS_AUTO_TEMPLATE then if parent and IS_AUTO_TEMPLATE then
@ -100,7 +117,8 @@ function BaseComponent.set_template(self, template)
end end
--- Get current component template name (protected) --- Get current component template name.
-- @function component:get_template
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @treturn string Component full template name -- @treturn string Component full template name
function BaseComponent.get_template(self) function BaseComponent.get_template(self)
@ -108,10 +126,16 @@ function BaseComponent.get_template(self)
end end
--- Set current component nodes (protected) --- Set current component nodes.
-- Use if your component nodes was cloned with `gui.clone_tree` and you got the node tree.
-- @function component:set_nodes
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @tparam table nodes BaseComponent nodes table -- @tparam table nodes BaseComponent nodes table
-- @treturn BaseComponent @{BaseComponent} -- @treturn BaseComponent @{BaseComponent}
-- @usage
-- local nodes = gui.clone_tree(self.prefab)
-- ... In your component:
-- self:set_nodes(nodes)
function BaseComponent.set_nodes(self, nodes) function BaseComponent.set_nodes(self, nodes)
self._meta.nodes = nodes self._meta.nodes = nodes
@ -128,7 +152,10 @@ function BaseComponent.set_nodes(self, nodes)
end end
--- Get current component context (protected) --- Context used as first arg in all Druid events
--
-- Context is usually self of gui_script.
-- @function component:get_context
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @treturn table BaseComponent context -- @treturn table BaseComponent context
function BaseComponent.get_context(self) function BaseComponent.get_context(self)
@ -136,7 +163,8 @@ function BaseComponent.get_context(self)
end end
--- Increase input priority in current input stack --- Increase input priority in input stack
-- @function component:increase_input_priority
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @local -- @local
function BaseComponent.increase_input_priority(self) function BaseComponent.increase_input_priority(self)
@ -144,15 +172,22 @@ function BaseComponent.increase_input_priority(self)
end end
--- Get node for component by name. --- Get component node by name.
--
-- If component has nodes, node_or_name should be string -- If component has nodes, node_or_name should be string
-- It auto pick node by template name or from nodes by clone_tree -- It autopick node by template name or from nodes by gui.clone_tree
-- if they was setup via component:set_nodes, component:set_template. -- if they was setup via component:set_nodes, component:set_template.
-- If node is not found, the exception will fired -- If node is not found, the exception will fired
-- @function component:get_node
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @tparam string|node node_or_name Node name or node itself -- @tparam string|node node_or_name Node name or node itself
-- @treturn node Gui node -- @treturn node Gui node
function BaseComponent.get_node(self, node_or_name) function BaseComponent.get_node(self, node_or_name)
if type(node_or_name) ~= "string" then
-- Assume it's already node from gui.get_node
return node_or_name
end
local template_name = self:get_template() local template_name = self:get_template()
local nodes = self:__get_nodes() local nodes = self:__get_nodes()
@ -161,15 +196,10 @@ function BaseComponent.get_node(self, node_or_name)
end end
local node local node
if type(node_or_name) == const.STRING then if nodes then
if nodes then node = nodes[template_name .. node_or_name]
node = nodes[template_name .. node_or_name]
else
node = gui.get_node(template_name .. node_or_name)
end
else else
-- Assume it's already node from gui.get_node node = gui.get_node(template_name .. node_or_name)
node = node_or_name
end end
if not node then if not node then
@ -180,8 +210,8 @@ function BaseComponent.get_node(self, node_or_name)
end end
--- Return druid with context of calling component (protected). --- Get Druid instance for inner component creation.
-- Use it to create component inside of other components. -- @function component:get_druid
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @treturn Druid Druid instance with component context -- @treturn Druid Druid instance with component context
function BaseComponent.get_druid(self) function BaseComponent.get_druid(self)
@ -191,14 +221,16 @@ end
--- Return component name --- Return component name
-- @function component:get_name
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @treturn string The component name -- @treturn string The component name
function BaseComponent.get_name(self) function BaseComponent.get_name(self)
return self._component.name .. self:get_uid() return self._component.name .. BaseComponent.create_uid()
end end
--- Return parent component name --- Return parent component name
-- @function component:get_parent_name
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @treturn string|nil The parent component name if exist or bil -- @treturn string|nil The parent component name if exist or bil
function BaseComponent.get_parent_name(self) function BaseComponent.get_parent_name(self)
@ -208,6 +240,7 @@ end
--- Return component input priority --- Return component input priority
-- @function component:get_input_priority
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @treturn number The component input priority -- @treturn number The component input priority
function BaseComponent.get_input_priority(self) function BaseComponent.get_input_priority(self)
@ -216,6 +249,9 @@ end
--- Set component input priority --- Set component input priority
--
-- Default value: 10
-- @function component:set_input_priority
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @tparam number value The new input priority value -- @tparam number value The new input priority value
-- @tparam boolean is_temporary If true, the reset input priority will return to previous value -- @tparam boolean is_temporary If true, the reset input priority will return to previous value
@ -223,18 +259,20 @@ end
function BaseComponent.set_input_priority(self, value, is_temporary) function BaseComponent.set_input_priority(self, value, is_temporary)
assert(value) assert(value)
if self._component.input_priority ~= value then if self._component.input_priority == value then
self._component.input_priority = value return self
self._component._is_input_priority_changed = true end
if not is_temporary then self._component.input_priority = value
self._component.default_input_priority = value self._component._is_input_priority_changed = true
end
local children = self:get_childrens() if not is_temporary then
for i = 1, #children do self._component.default_input_priority = value
children[i]:set_input_priority(value, is_temporary) end
end
local children = self:get_childrens()
for i = 1, #children do
children[i]:set_input_priority(value, is_temporary)
end end
return self return self
@ -242,6 +280,7 @@ end
--- Reset component input priority to default value --- Reset component input priority to default value
-- @function component:reset_input_priority
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @treturn number The component input priority -- @treturn number The component input priority
function BaseComponent.reset_input_priority(self) function BaseComponent.reset_input_priority(self)
@ -250,8 +289,10 @@ function BaseComponent.reset_input_priority(self)
end end
--- Return component uid (protected). --- Return component UID.
--- UID generated in component creation order --
-- UID generated in component creation order.
-- @function component:get_uid
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @treturn number The component uid -- @treturn number The component uid
function BaseComponent.get_uid(self) function BaseComponent.get_uid(self)
@ -260,7 +301,9 @@ end
--- Set component input state. By default it enabled --- Set component input state. By default it enabled
-- You can disable any input of component by this function --
-- If input is disabled, the component will not receive input events
-- @function component:set_input_enabled
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @tparam bool state The component input state -- @tparam bool state The component input state
-- @treturn BaseComponent BaseComponent itself -- @treturn BaseComponent BaseComponent itself
@ -275,7 +318,8 @@ function BaseComponent.set_input_enabled(self, state)
end end
--- Return the parent for current component (protected) --- Return the parent component if exist
-- @function component:get_parent_component
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @treturn BaseComponent|nil The druid component instance or nil -- @treturn BaseComponent|nil The druid component instance or nil
function BaseComponent.get_parent_component(self) function BaseComponent.get_parent_component(self)
@ -284,6 +328,7 @@ end
--- Setup component context and his style table --- Setup component context and his style table
-- @function component:setup_component
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @tparam table druid_instance The parent druid instance -- @tparam table druid_instance The parent druid instance
-- @tparam table context Druid context. Usually it is self of script -- @tparam table context Druid context. Usually it is self of script
@ -316,7 +361,8 @@ end
--- Basic constructor of component. It will call automaticaly --- Basic constructor of component. It will call automaticaly
-- by `BaseComponent.static.create` -- by `BaseComponent.create`
-- @function component:initialize
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @tparam string name BaseComponent name -- @tparam string name BaseComponent name
-- @tparam[opt=DEFAULT] number input_priority The input priority. The bigger number processed first -- @tparam[opt=DEFAULT] number input_priority The input priority. The bigger number processed first
@ -328,15 +374,17 @@ function BaseComponent.initialize(self, name, input_priority)
default_input_priority = input_priority or const.PRIORITY_INPUT, default_input_priority = input_priority or const.PRIORITY_INPUT,
is_debug = false, is_debug = false,
_is_input_priority_changed = true, -- Default true for sort once time after GUI init _is_input_priority_changed = true, -- Default true for sort once time after GUI init
_uid = BaseComponent.get_uid() _uid = BaseComponent.create_uid()
} }
end end
--- Print log information if debug mode is enabled (protected) --- Print log information if debug mode is enabled
-- @function component:log_message
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @tparam string message -- @tparam string message
-- @tparam table context -- @tparam table context
-- @local
function BaseComponent.log_message(self, message, context) function BaseComponent.log_message(self, message, context)
if not self._component.is_debug then if not self._component.is_debug then
return return
@ -346,14 +394,17 @@ end
--- Set debug logs for component enabled or disabled --- Set debug logs for component enabled or disabled
-- @function component:set_debug
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @tparam bool is_debug -- @tparam bool is_debug
-- @local
function BaseComponent.set_debug(self, is_debug) function BaseComponent.set_debug(self, is_debug)
self._component.is_debug = is_debug self._component.is_debug = is_debug
end end
--- Return true, if input priority was changed --- Return true, if input priority was changed
-- @function component:_is_input_priority_changed
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @local -- @local
function BaseComponent._is_input_priority_changed(self) function BaseComponent._is_input_priority_changed(self)
@ -362,6 +413,7 @@ end
--- Reset is_input_priority_changed field --- Reset is_input_priority_changed field
-- @function component:_reset_input_priority_changed
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @local -- @local
function BaseComponent._reset_input_priority_changed(self) function BaseComponent._reset_input_priority_changed(self)
@ -375,6 +427,7 @@ end
--- Get current component interests --- Get current component interests
-- @function component:__get_interests
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @treturn table List of component interests -- @treturn table List of component interests
-- @local -- @local
@ -398,6 +451,7 @@ end
--- Get current component nodes --- Get current component nodes
-- @function component:__get_nodes
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @treturn table BaseComponent nodes table -- @treturn table BaseComponent nodes table
-- @local -- @local
@ -412,6 +466,7 @@ end
--- Add child to component children list --- Add child to component children list
-- @function component:__add_children
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @tparam component children The druid component instance -- @tparam component children The druid component instance
-- @local -- @local
@ -421,6 +476,7 @@ end
--- Remove child from component children list --- Remove child from component children list
-- @function component:__remove_children
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @tparam component children The druid component instance -- @tparam component children The druid component instance
-- @local -- @local
@ -433,7 +489,8 @@ function BaseComponent.__remove_children(self, children)
end end
--- Return all children components, recursive (protected) --- Return all children components, recursive
-- @function component:get_childrens
-- @tparam BaseComponent self @{BaseComponent} -- @tparam BaseComponent self @{BaseComponent}
-- @treturn table Array of childrens if the Druid component instance -- @treturn table Array of childrens if the Druid component instance
function BaseComponent.get_childrens(self) function BaseComponent.get_childrens(self)
@ -443,22 +500,19 @@ function BaseComponent.get_childrens(self)
local children = self._meta.children[i] local children = self._meta.children[i]
table.insert(childrens, children) table.insert(childrens, children)
local recursive_childrens = children:get_childrens() helper.add_array(childrens, children:get_childrens())
for j = 1, #recursive_childrens do
table.insert(childrens, recursive_childrens[j])
end
end end
return childrens return childrens
end end
--- Create new component. It will inheritance from basic --- Create new component. It will inheritance from basic Druid component.
-- druid component. -- @function BaseComponent.create
-- @tparam string name BaseComponent name -- @tparam string name BaseComponent name
-- @tparam[opt=DEFAULT] number input_priority The input priority. The bigger number processed first -- @tparam[opt=DEFAULT] number input_priority The input priority. The bigger number processed first
-- @local -- @local
function BaseComponent.static.create(name, input_priority) function BaseComponent.create(name, input_priority)
-- Yea, inheritance here -- Yea, inheritance here
local new_class = class(name, BaseComponent) local new_class = class(name, BaseComponent)

35
druid/const.lua
View File

@ -10,27 +10,16 @@ local M = {}
M.ACTION_TEXT = hash(sys.get_config("druid.input_text", "text")) M.ACTION_TEXT = hash(sys.get_config("druid.input_text", "text"))
M.ACTION_TOUCH = hash(sys.get_config("druid.input_touch", "touch")) M.ACTION_TOUCH = hash(sys.get_config("druid.input_touch", "touch"))
M.ACTION_MARKED_TEXT = hash(sys.get_config("druid.input_marked_text", "marked_text")) M.ACTION_MARKED_TEXT = hash(sys.get_config("druid.input_marked_text", "marked_text"))
M.ACTION_ESC = hash(sys.get_config("druid.input_key_esc", "key_esc")) M.ACTION_ESC = hash(sys.get_config("druid.input_key_esc", "key_esc"))
M.ACTION_BACK = hash(sys.get_config("druid.input_key_back", "key_back")) M.ACTION_BACK = hash(sys.get_config("druid.input_key_back", "key_back"))
M.ACTION_ENTER = hash(sys.get_config("druid.input_key_enter", "key_enter")) M.ACTION_ENTER = hash(sys.get_config("druid.input_key_enter", "key_enter"))
M.ACTION_MULTITOUCH = hash(sys.get_config("druid.input_multitouch", "multitouch")) M.ACTION_MULTITOUCH = hash(sys.get_config("druid.input_multitouch", "touch_multi"))
M.ACTION_BACKSPACE = hash(sys.get_config("druid.input_key_backspace", "key_backspace")) M.ACTION_BACKSPACE = hash(sys.get_config("druid.input_key_backspace", "key_backspace"))
M.ACTION_SCROLL_UP = hash(sys.get_config("druid.input_scroll_up", "mouse_wheel_up"))
M.ACTION_SCROLL_UP = hash(sys.get_config("druid.input_scroll_up", "scroll_up")) M.ACTION_SCROLL_DOWN = hash(sys.get_config("druid.input_scroll_down", "mouse_wheel_down"))
M.ACTION_SCROLL_DOWN = hash(sys.get_config("druid.input_scroll_down", "scroll_down"))
M.IS_STENCIL_CHECK = not (sys.get_config("druid.no_stencil_check") == "1") M.IS_STENCIL_CHECK = not (sys.get_config("druid.no_stencil_check") == "1")
M.RELEASED = "released"
M.PRESSED = "pressed"
M.STRING = "string"
M.TABLE = "table"
M.ZERO = "0"
--- Component Interests --- Component Interests
M.ON_INPUT = "on_input" M.ON_INPUT = "on_input"
M.ON_UPDATE = "update" M.ON_UPDATE = "update"
@ -43,22 +32,19 @@ M.ON_MESSAGE_INPUT = "on_message_input"
M.ON_WINDOW_RESIZED = "on_window_resized" M.ON_WINDOW_RESIZED = "on_window_resized"
M.ON_LANGUAGE_CHANGE = "on_language_change" M.ON_LANGUAGE_CHANGE = "on_language_change"
-- Components with higher priority value processed first
M.PRIORITY_INPUT = 10 M.PRIORITY_INPUT = 10
M.PRIORITY_INPUT_HIGH = 20 M.PRIORITY_INPUT_HIGH = 20
M.PRIORITY_INPUT_MAX = 100 M.PRIORITY_INPUT_MAX = 100
M.MESSAGE_INPUT = { M.MESSAGE_INPUT = {
BUTTON_CLICK = "button_click", BUTTON_CLICK = "button_click",
BUTTON_LONG_CLICK = "button_long_click", BUTTON_LONG_CLICK = "button_long_click",
BUTTON_DOUBLE_CLICK = "button_double_click", BUTTON_DOUBLE_CLICK = "button_double_click",
BUTTON_REPEATED_CLICK = "button_repeated_click", BUTTON_REPEATED_CLICK = "button_repeated_click",
-- (value)
TEXT_SET = "text_set", TEXT_SET = "text_set",
} }
M.PIVOTS = { M.PIVOTS = {
[gui.PIVOT_CENTER] = vmath.vector3(0), [gui.PIVOT_CENTER] = vmath.vector3(0),
[gui.PIVOT_N] = vmath.vector3(0, 0.5, 0), [gui.PIVOT_N] = vmath.vector3(0, 0.5, 0),
@ -83,7 +69,6 @@ M.REVERSE_PIVOTS = {
[gui.PIVOT_NW] = gui.PIVOT_SE, [gui.PIVOT_NW] = gui.PIVOT_SE,
} }
M.LAYOUT_MODE = { M.LAYOUT_MODE = {
STRETCH_X = "stretch_x", STRETCH_X = "stretch_x",
STRETCH_Y = "stretch_y", STRETCH_Y = "stretch_y",
@ -94,11 +79,9 @@ M.LAYOUT_MODE = {
} }
M.VECTOR_ZERO = vmath.vector3(0) M.VECTOR_ZERO = vmath.vector3(0)
M.VECTOR_ONE = vmath.vector3(1)
M.SYS_INFO = sys.get_sys_info() M.SYS_INFO = sys.get_sys_info()
M.CURRENT_SYSTEM_NAME = M.SYS_INFO.system_name M.CURRENT_SYSTEM_NAME = M.SYS_INFO.system_name
M.OS = { M.OS = {
ANDROID = "Android", ANDROID = "Android",
IOS = "iPhone OS", IOS = "iPhone OS",
@ -108,14 +91,12 @@ M.OS = {
BROWSER = "HTML5", BROWSER = "HTML5",
} }
M.SHIFT = { M.SHIFT = {
NO_SHIFT = 0, NO_SHIFT = 0,
LEFT = -1, LEFT = -1,
RIGHT = 1, RIGHT = 1,
} }
M.TEXT_ADJUST = { M.TEXT_ADJUST = {
DOWNSCALE = "downscale", DOWNSCALE = "downscale",
TRIM = "trim", TRIM = "trim",
@ -125,13 +106,11 @@ M.TEXT_ADJUST = {
SCALE_THEN_SCROLL = "scale_then_scroll", SCALE_THEN_SCROLL = "scale_then_scroll",
} }
M.SIDE = { M.SIDE = {
X = "x", X = "x",
Y = "y" Y = "y"
} }
M.SWIPE = { M.SWIPE = {
UP = "up", UP = "up",
DOWN = "down", DOWN = "down",
@ -139,16 +118,10 @@ M.SWIPE = {
RIGHT = "right", RIGHT = "right",
} }
M.ERRORS = { M.ERRORS = {
GRID_DYNAMIC_ANCHOR = "The pivot of dynamic grid node should be West, East, South or North" GRID_DYNAMIC_ANCHOR = "The pivot of dynamic grid node should be West, East, South or North"
} }
M.EMPTY_FUNCTION = function() end M.EMPTY_FUNCTION = function() end
M.EMPTY_STRING = ""
M.SPACE_STRING = " "
M.EMPTY_TABLE = {}
return M return M

543
druid/custom/rich_text/module/rt.lua Executable file
View File

@ -0,0 +1,543 @@
-- Source: https://github.com/britzl/defold-richtext version 5.19.0
-- Author: Britzl
-- Modified by: Insality
--- RT
-- @module rich_text.rt
-- @local
local helper = require("druid.helper")
local parser = require("druid.custom.rich_text.module.rt_parse")
local utf8_lua = require("druid.system.utf8")
local utf8 = utf8 or utf8_lua
local M = {}
-- Trim spaces on string start
local function ltrim(text)
return text:match('^%s*(.*)')
end
-- compare two words and check that they have the same size, color, font and tags
local function compare_words(one, two)
if one == nil
or two == nil
or one.size ~= two.size
or one.color ~= two.color
or one.shadow ~= two.shadow
or one.outline ~= two.outline
or one.font ~= two.font then
return false
end
local one_tags, two_tags = one.tags, two.tags
if one_tags == two_tags then
return true
end
if one_tags == nil or two_tags == nil then
return false
end
for k, v in pairs(one_tags) do
if two_tags[k] ~= v then
return false
end
end
for k, v in pairs(two_tags) do
if one_tags[k] ~= v then
return false
end
end
return true
end
--- Get the length of a text ignoring any tags except image tags
-- which are treated as having a length of 1
-- @param text String with text or a list of words (from richtext.create)
-- @return Length of text
function M.length(text)
assert(text)
if type(text) == "string" then
return parser.length(text)
else
local count = 0
for i = 1, #text do
local word = text[i]
local is_text_node = not word.image
count = count + (is_text_node and utf8.len(word.text) or 1)
end
return count
end
end
---@param word rich_text.word
---@param previous_word rich_text.word|nil
---@param settings rich_text.settings
---@return rich_text.metrics
local function get_text_metrics(word, previous_word, settings)
local text = word.text
local font_resource = gui.get_font_resource(word.font)
---@type druid.rich_text.metrics
local metrics
local word_scale_x = word.relative_scale * settings.text_scale.x * settings.adjust_scale
local word_scale_y = word.relative_scale * settings.text_scale.y * settings.adjust_scale
if utf8.len(text) == 0 then
metrics = resource.get_text_metrics(font_resource, "|")
metrics.width = 0
metrics.height = metrics.height * word_scale_y
else
metrics = resource.get_text_metrics(font_resource, text)
metrics.width = metrics.width * word_scale_x
metrics.height = metrics.height * word_scale_y
if previous_word and not previous_word.image then
local previous_word_metrics = resource.get_text_metrics(font_resource, previous_word.text)
local union_metrics = resource.get_text_metrics(font_resource, previous_word.text .. text)
local without_previous_width = metrics.width
metrics.width = (union_metrics.width - previous_word_metrics.width) * word_scale_x
-- Since the several characters can be ajusted to fit the space between the previous word and this word
-- For example: chars: [.,?!]
metrics.offset_x = metrics.width - without_previous_width
end
end
metrics.offset_x = metrics.offset_x or 0
metrics.offset_y = metrics.offset_y or 0
return metrics
end
---@param word druid.rich_text.word
---@param settings druid.rich_text.settings
---@return druid.rich_text.metrics
local function get_image_metrics(word, settings)
local node_prefab = settings.node_prefab
gui.play_flipbook(node_prefab, word.image.anim)
local node_size = gui.get_size(node_prefab)
local aspect = node_size.x / node_size.y
node_size.x = word.image.width or node_size.x
node_size.y = word.image.height or (node_size.x / aspect)
return {
width = node_size.x * word.relative_scale * settings.node_scale.x * settings.adjust_scale,
height = node_size.y * word.relative_scale * settings.node_scale.y * settings.adjust_scale,
node_size = node_size,
}
end
---@param word druid.rich_text.word
---@param settings druid.rich_text.settings
---@param previous_word druid.rich_text.word|nil
---@return druid.rich_text.metrics
local function measure_node(word, settings, previous_word)
local metrics = word.image and get_image_metrics(word, settings) or get_text_metrics(word, previous_word, settings)
return metrics
end
-- Create rich text gui nodes from text
--- @param text string The text to create rich text nodes from
--- @param settings table Optional settings table (refer to documentation for details)
--- @param style druid.rich_text.style
--- @return words
--- @return metrics
function M.create(text, settings, style)
assert(text, "You must provide a text")
-- default settings for a word
-- will be assigned to each word unless tags override the values
local font = gui.get_font(settings.text_prefab)
local word_params = {
node = nil, -- Autofill on node creation
relative_scale = 1,
color = nil,
position = nil, -- Autofill later
scale = nil, -- Autofill later
size = nil, -- Autofill later
pivot = nil, -- Autofill later
offset = nil, -- Autofill later
metrics = {},
-- text params
source_text = nil,
text = nil, -- Autofill later in parse.lua
text_color = gui.get_color(settings.text_prefab),
shadow = settings.shadow,
outline = settings.outline,
font = font,
-- Image params
---@type rich_text.word.image
image = nil,
image_color = gui.get_color(settings.node_prefab),
default_animation = nil,
-- Tags
br = nil,
nobr = nil,
}
local parsed_words = parser.parse(text, word_params, style)
local lines = M._split_on_lines(parsed_words, settings)
local lines_metrics = M._position_lines(lines, settings)
M._update_nodes(lines, settings)
local words = {}
for index = 1, #lines do
helper.add_array(words, lines[index])
end
return words, settings, lines_metrics
end
---@param word druid.rich_text.word
---@param metrics druid.rich_text.metrics
---@param settings druid.rich_text.settings
function M._fill_properties(word, metrics, settings)
word.metrics = metrics
word.position = vmath.vector3(0)
if word.image then
-- Image properties
word.scale = gui.get_scale(settings.node_prefab) * word.relative_scale * settings.adjust_scale
word.pivot = gui.get_pivot(settings.node_prefab)
word.size = metrics.node_size
word.offset = vmath.vector3(0, 0, 0)
if word.image.width then
word.size.y = word.image.height or (word.size.y * word.image.width / word.size.x)
word.size.x = word.image.width
end
else
-- Text properties
word.scale = gui.get_scale(settings.text_prefab) * word.relative_scale * settings.adjust_scale
word.pivot = gui.get_pivot(settings.text_prefab)
word.size = vmath.vector3(metrics.width, metrics.height, 0)
word.offset = vmath.vector3(metrics.offset_x, metrics.offset_y, 0)
end
end
---@param words druid.rich_text.word[]
---@param settings druid.rich_text.settings
---@return druid.rich_text.word[][]
function M._split_on_lines(words, settings)
local i = 1
local lines = {}
local current_line = {}
local word_count = #words
local current_line_width = 0
local current_line_height = 0
repeat
local word = words[i]
if word.image then
word.default_animation = settings.default_animation
end
-- Reset texts to start measure again
word.text = word.source_text
-- get the previous word, so we can combine
local previous_word = current_line[#current_line]
if settings.combine_words then
if not compare_words(previous_word, word) then
previous_word = nil
end
end
local word_metrics = measure_node(word, settings)
local next_words_width = word_metrics.width
-- Collect width of nobr words from current to next words with nobr
if word.nobr then
for index = i + 1, word_count do
if words[index].nobr then
local next_word_measure = measure_node(words[index], settings, words[index-1])
next_words_width = next_words_width + next_word_measure.width
else
break
end
end
end
local overflow = (current_line_width + next_words_width) > settings.width
local is_new_line = (overflow or word.br) and settings.is_multiline and not word.nobr
-- We recalculate metrics with previous_word if it follow for word on current line
if not is_new_line and previous_word then
word_metrics = measure_node(word, settings, previous_word)
end
-- Trim first word of the line
if is_new_line or not previous_word then
word.text = ltrim(word.text)
word_metrics = measure_node(word, settings, nil)
end
M._fill_properties(word, word_metrics, settings)
-- check if the line overflows due to this word
if not is_new_line then
-- the word fits on the line, add it and update text metrics
current_line_width = current_line_width + word.metrics.width
current_line_height = math.max(current_line_height, word.metrics.height)
current_line[#current_line + 1] = word
else
-- overflow, position the words that fit on the line
lines[#lines + 1] = current_line
word.text = ltrim(word.text)
current_line = { word }
current_line_height = word.metrics.height
current_line_width = word.metrics.width
end
i = i + 1
until i > word_count
if #current_line > 0 then
lines[#lines + 1] = current_line
end
return lines
end
---@param lines rich_text.word[][]
---@param settings rich_text.settings
---@return rich_text.lines_metrics
function M._position_lines(lines, settings)
local lines_metrics = M._get_lines_metrics(lines, settings)
-- current x-y is left top point of text spawn
local parent_size = gui.get_size(settings.parent)
local pivot = helper.get_pivot_offset(gui.get_pivot(settings.parent))
local offset_y = (parent_size.y - lines_metrics.text_height) * (pivot.y - 0.5) - (parent_size.y * (pivot.y - 0.5))
local current_y = offset_y
for line_index = 1, #lines do
local line = lines[line_index]
local line_metrics = lines_metrics.lines[line_index]
local current_x = (parent_size.x - line_metrics.width) * (pivot.x + 0.5) - (parent_size.x * (pivot.x + 0.5))
local max_height = 0
for word_index = 1, #line do
local word = line[word_index]
local pivot_offset = helper.get_pivot_offset(word.pivot)
local word_width = word.metrics.width
word.position.x = current_x + word_width * (pivot_offset.x + 0.5) + word.offset.x
word.position.y = current_y + word.metrics.height * (pivot_offset.y - 0.5) + word.offset.y
-- Align item on text line depends on anchor
word.position.y = word.position.y - (word.metrics.height - line_metrics.height) * (pivot_offset.y - 0.5)
current_x = current_x + word_width
-- TODO: check if we need to calculate images
if not word.image then
max_height = math.max(max_height, word.metrics.height)
end
if settings.image_pixel_grid_snap and word.image then
word.position.x = helper.round(word.position.x)
word.position.y = helper.round(word.position.y)
end
end
current_y = current_y - line_metrics.height
end
return lines_metrics
end
---@param lines rich_text.word[][]
---@param settings rich_text.settings
---@return rich_text.lines_metrics
function M._get_lines_metrics(lines, settings)
local metrics = {}
local text_width = 0
local text_height = 0
for line_index = 1, #lines do
local line = lines[line_index]
local width = 0
local height = 0
for word_index = 1, #line do
local word = line[word_index]
local word_width = word.metrics.width
width = width + word_width
-- TODO: Here too
if not word.image then
height = math.max(height, word.metrics.height)
end
end
if line_index > 1 then
height = height * settings.text_leading
end
text_width = math.max(text_width, width)
text_height = text_height + height
metrics[#metrics + 1] = {
width = width,
height = height,
}
end
---@type rich_text.lines_metrics
local lines_metrics = {
text_width = text_width,
text_height = text_height,
lines = metrics,
}
return lines_metrics
end
---@param lines rich_text.word[][]
---@param settings rich_text.settings
function M._update_nodes(lines, settings)
for line_index = 1, #lines do
local line = lines[line_index]
for word_index = 1, #line do
local word = line[word_index]
local node
if word.image then
node = word.node or gui.clone(settings.node_prefab)
gui.set_size_mode(node, gui.SIZE_MODE_MANUAL)
gui.play_flipbook(node, hash(word.image.anim or word.default_animation))
gui.set_color(node, word.color or word.image_color)
else
node = word.node or gui.clone(settings.text_prefab)
gui.set_outline(node, word.outline)
gui.set_shadow(node, word.shadow)
gui.set_text(node, word.text)
gui.set_color(node, word.color or word.text_color)
gui.set_font(node, word.font or settings.font)
end
word.node = node
gui.set_enabled(node, true)
gui.set_parent(node, settings.parent)
gui.set_size(node, word.size)
gui.set_scale(node, word.scale)
gui.set_position(node, word.position)
end
end
end
---@param words rich_text.word[]
---@param settings rich_text.settings
---@param scale number
---@return rich_text.lines_metrics
function M.set_text_scale(words, settings, scale)
settings.adjust_scale = scale
local lines = M._split_on_lines(words, settings)
local line_metrics = M._position_lines(lines, settings)
M._update_nodes(lines, settings)
return line_metrics
end
---@param words druid.rich_text.word[]
---@param settings druid.rich_text.settings
---@param lines_metrics druid.rich_text.lines_metrics
---@param style druid.rich_text.style
function M.adjust_to_area(words, settings, lines_metrics, style)
local last_line_metrics = lines_metrics
if not settings.is_multiline then
if lines_metrics.text_width > settings.width then
last_line_metrics = M.set_text_scale(words, settings, settings.width / lines_metrics.text_width)
end
else
-- Multiline adjusting is very tricky stuff...
-- It's doing a lot of calculations, beware!
if lines_metrics.text_width > settings.width or lines_metrics.text_height > settings.height then
local scale_koef = math.sqrt(settings.height / lines_metrics.text_height)
if lines_metrics.text_width * scale_koef > settings.width then
scale_koef = math.sqrt(settings.width / lines_metrics.text_width)
end
local adjust_scale = math.min(scale_koef, 1)
local lines = M.apply_scale_without_update(words, settings, adjust_scale)
local is_fit = M.is_fit_info_area(lines, settings)
local step = is_fit and style.ADJUST_SCALE_DELTA or -style.ADJUST_SCALE_DELTA
for i = 1, style.ADJUST_STEPS do
-- Grow down to check if we fit
if step < 0 and is_fit then
last_line_metrics = M.set_text_scale(words, settings, adjust_scale)
break
end
-- Grow up to check if we still fit
if step > 0 and not is_fit then
last_line_metrics = M.set_text_scale(words, settings, adjust_scale - step)
break
end
adjust_scale = adjust_scale + step
lines = M.apply_scale_without_update(words, settings, adjust_scale)
is_fit = M.is_fit_info_area(lines, settings)
if i == style.ADJUST_STEPS then
last_line_metrics = M.set_text_scale(words, settings, adjust_scale)
end
end
end
end
return last_line_metrics
end
---@return boolean @If we fit into area size
function M.apply_scale_without_update(words, settings, scale)
settings.adjust_scale = scale
return M._split_on_lines(words, settings)
end
---@param lines rich_text.word[][]
---@param settings rich_text.settings
function M.is_fit_info_area(lines, settings)
local lines_metrics = M._get_lines_metrics(lines, settings)
local area_size = gui.get_size(settings.parent)
return lines_metrics.text_width <= area_size.x and lines_metrics.text_height <= area_size.y
end
--- Get all words with a specific tag
-- @param words The words to search (as received from richtext.create)
-- @param tag The tag to search for. Nil to search for words without a tag
-- @return Words matching the tag
function M.tagged(words, tag)
local tagged = {}
for i = 1, #words do
local word = words[i]
if not tag and not word.tags then
tagged[#tagged + 1] = word
elseif word.tags and word.tags[tag] then
tagged[#tagged + 1] = word
end
end
return tagged
end
---Removes the gui nodes created by rich text
function M.remove(words)
assert(words)
for i = 1, #words do
gui.delete_node(words[i].node)
end
end
return M

50
druid/custom/rich_text/module/rt_color.lua Normal file
View File

@ -0,0 +1,50 @@
-- Source: https://github.com/britzl/defold-richtext version 5.19.0
-- Author: Britzl
-- Modified by: Insality
local M = {}
local cache = {}
function M.parse_hex(hex)
if cache[hex] then
return cache[hex]
end
local r,g,b,a = hex:match("#?(%x%x)(%x%x)(%x%x)(%x?%x?)")
if a == "" then a = "ff" end
if r and g and b and a then
local color = vmath.vector4(
tonumber(r, 16) / 255,
tonumber(g, 16) / 255,
tonumber(b, 16) / 255,
tonumber(a, 16) / 255
)
cache[hex] = color
return color
end
return nil
end
function M.parse_decimal(dec)
if cache[dec] then
return cache[dec]
end
local r,g,b,a = dec:match("(%d*%.?%d*),(%d*%.?%d*),(%d*%.?%d*),(%d*%.?%d*)")
if r and g and b and a then
local color = vmath.vector4(tonumber(r), tonumber(g), tonumber(b), tonumber(a))
cache[dec] = color
return color
end
return nil
end
function M.parse(c)
return M.parse_hex(c) or M.parse_decimal(c)
end
return M

189
druid/custom/rich_text/module/rt_parse.lua Executable file
View File

@ -0,0 +1,189 @@
-- Source: https://github.com/britzl/defold-richtext version 5.19.0
-- Author: Britzl
-- Modified by: Insality
local tags = require("druid.custom.rich_text.module.rt_tags")
local utf8_lua = require("druid.system.utf8")
local utf8 = utf8 or utf8_lua
local M = {}
local function parse_tag(tag, params, style)
local settings = { tags = { [tag] = params }, tag = tag }
if not tags.apply(tag, params, settings, style) then
settings[tag] = params
end
return settings
end
-- add a single word to the list of words
local function add_word(text, settings, words)
-- handle HTML entities
text = text:gsub("&lt;", "<"):gsub("&gt;", ">"):gsub("&nbsp;", " ")
local data = { text = text, source_text = text }
for k,v in pairs(settings) do
data[k] = v
end
words[#words + 1] = data
end
-- split a line into words
local function split_line(line, settings, words)
assert(line)
assert(settings)
assert(words)
local ws_start, trimmed_text, ws_end = line:match("^(%s*)(.-)(%s*)$")
if trimmed_text == "" then
add_word(ws_start .. ws_end, settings, words)
else
local wi = #words
for word in trimmed_text:gmatch("%S+") do
add_word(word .. " ", settings, words)
end
local first = words[wi + 1]
first.text = ws_start .. first.text
first.source_text = first.text
local last = words[#words]
last.text = utf8.sub(last.text, 1, utf8.len(last.text) - 1) .. ws_end
last.source_text = last.text
end
end
-- split text
-- split by lines first
local function split_text(text, settings, words)
assert(text)
assert(settings)
assert(words)
-- special treatment of empty text with a linebreak <br/>
if text == "" and settings.linebreak then
add_word(text, settings, words)
return
end
-- we don't want to deal with \r\n, remove all \r
text = text:gsub("\r", "")
-- the Lua pattern expects the text to have a linebreak at the end
local added_linebreak = false
if text:sub(-1)~="\n" then
added_linebreak = true
text = text .. "\n"
end
-- split into lines
for line in text:gmatch("(.-)\n") do
split_line(line, settings, words)
-- flag last word of a line as having a linebreak
local last = words[#words]
last.linebreak = true
end
-- remove the last linebreak if we manually added it above
if added_linebreak then
local last = words[#words]
last.linebreak = false
end
end
-- Merge one tag into another
local function merge_tags(dst, src)
for k, v in pairs(src) do
if k ~= "tags" then
dst[k] = v
end
end
for tag, params in pairs(src.tags or {}) do
dst.tags[tag] = (params == "") and true or params
end
end
--- Parse the text into individual words
-- @param text The text to parse
-- @param default_settings Default settings for each word
-- @param color_aliases Color aliases table
-- @return List of all words
function M.parse(text, default_settings, style)
assert(text)
assert(default_settings)
text = text:gsub("&zwsp;", "<zwsp>\226\128\139</zwsp>")
local all_words = {}
local open_tags = {}
while true do
-- merge list of word settings from defaults and all open tags
local word_settings = { tags = {} }
merge_tags(word_settings, default_settings)
for _, open_tag in ipairs(open_tags) do
merge_tags(word_settings, open_tag)
end
-- find next tag, with the text before and after the tag
local before_tag, tag, after_tag = text:match("(.-)(</?%S->)(.*)")
-- no more tags, split and add rest of the text
if not before_tag or not tag or not after_tag then
if text ~= "" then
split_text(text, word_settings, all_words)
end
break
end
-- split and add text before the encountered tag
if before_tag ~= "" then
split_text(before_tag, word_settings, all_words)
end
-- parse the tag, split into name and optional parameters
local endtag, name, params, empty = tag:match("<(/?)(%a+)=?(%S-)(/?)>")
local is_endtag = endtag == "/"
local is_empty = empty == "/"
if is_empty then
-- empty tag, ie tag without content
-- example <br/> and <img=texture:image/>
local empty_tag_settings = parse_tag(name, params, style)
merge_tags(empty_tag_settings, word_settings)
add_word("", empty_tag_settings, all_words)
elseif not is_endtag then
-- open tag - parse and add it
local tag_settings = parse_tag(name, params, style)
open_tags[#open_tags + 1] = tag_settings
else
-- end tag - remove it from the list of open tags
local found = false
for i=#open_tags,1,-1 do
if open_tags[i].tag == name then
table.remove(open_tags, i)
found = true
break
end
end
if not found then print(("Found end tag '%s' without matching start tag"):format(name)) end
end
-- parse text after the tag on the next iteration
text = after_tag
end
return all_words
end
--- Get the length of a text, excluding any tags (except image and spine tags)
function M.length(text)
return utf8.len(text:gsub("<img.-/>", " "):gsub("<.->", ""))
end
return M

113
druid/custom/rich_text/module/rt_tags.lua Normal file
View File

@ -0,0 +1,113 @@
-- Source: https://github.com/britzl/defold-richtext version 5.19.0
-- Author: Britzl
-- Modified by: Insality
local color = require("druid.custom.rich_text.module.rt_color")
local M = {}
local tags = {}
function M.apply(tag, params, settings, style)
local fn = tags[tag]
if not fn then
return false
end
fn(params, settings, style)
return true
end
function M.register(tag, fn)
assert(tag, "You must provide a tag")
assert(fn, "You must provide a tag function")
tags[tag] = fn
end
-- Split string at first occurrence of token
-- If the token doesn't exist the whole string is returned
-- @param s The string to split
-- @param token The token to split string on
-- @return before The string before the token or the whole string if token doesn't exist
-- @return after The string after the token or nul
local function split(s, token)
if not s then return nil, nil end
local before, after = s:match("(.-)" .. token .. "(.*)")
before = before or s
return before, after
end
-- Format: <color=[#]{HEX_VALUE}>{Text}</color>
-- Format: <color={COLOR_NAME}>{Text}</color>
-- Example: <color=FF0000>Rich Text</color>
M.register("color", function(params, settings, style)
params = style.COLORS[params] or params
settings.color = color.parse(params)
end)
M.register("shadow", function(params, settings, style)
params = style.COLORS[params] or params
settings.shadow = color.parse(params)
end)
M.register("outline", function(params, settings, style)
params = style.COLORS[params] or params
settings.outline = color.parse(params)
end)
M.register("font", function(params, settings)
settings.font = params
end)
M.register("size", function(params, settings)
settings.relative_scale = tonumber(params)
end)
-- Example: </br>
M.register("br", function(params, settings)
settings.br = true
end)
-- Example: <nobr></nobr>
M.register("nobr", function(params, settings)
settings.nobr = true
end)
-- Format: <img={animation_id},[width],[height]/>
-- Example: <img=logo/>
-- Example: <img=logo,48/>
-- Example: <img=logo,48,48/>
M.register("img", function(params, settings)
local texture_and_anim, params = split(params, ",")
local width, height
width, params = split(params, ",")
height = split(params, ",")
local texture, anim = split(texture_and_anim, ":")
if not anim then
anim = texture
texture = nil
end
width = width and tonumber(width)
height = height and tonumber(height)
settings.image = {
texture = texture,
anim = anim,
width = width,
height = height
}
end)
return M

199
druid/custom/rich_text/rich_text.gui Normal file
View File

@ -0,0 +1,199 @@
script: ""
fonts {
name: "game"
font: "/example/assets/fonts/game.font"
}
textures {
name: "items"
texture: "/example/assets/images/kenney.atlas"
}
background_color {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
nodes {
position {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 400.0
y: 100.0
z: 0.0
w: 1.0
}
color {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: ""
id: "root"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
layer: ""
inherit_alpha: true
slice9 {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
enabled: true
visible: false
}
nodes {
position {
x: -200.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 400.0
y: 100.0
z: 0.0
w: 1.0
}
color {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
type: TYPE_TEXT
blend_mode: BLEND_MODE_ALPHA
text: "Rich text"
font: "game"
id: "text_prefab"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_W
outline {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
shadow {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
adjust_mode: ADJUST_MODE_FIT
line_break: false
parent: "root"
layer: ""
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.0
template_node_child: false
text_leading: 1.0
text_tracking: 0.0
custom_type: 0
enabled: true
visible: true
}
nodes {
position {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 21.0
y: 20.0
z: 0.0
w: 1.0
}
color {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: "items/checkmark"
id: "icon_prefab"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "root"
layer: ""
inherit_alpha: true
slice9 {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_AUTO
custom_type: 0
enabled: true
visible: true
}
material: "/builtins/materials/gui.material"
adjust_reference: ADJUST_REFERENCE_PARENT
max_nodes: 512

272
druid/custom/rich_text/rich_text.lua Normal file
View File

@ -0,0 +1,272 @@
-- Copyright (c) 2022 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Druid Rich Text Custom Component.
-- <b># Overview #</b>
--
-- This custom component is inspired by <a href="https://github.com/britzl/defold-richtext" target="_blank">defold-richtext</a> by britzl.
-- It uses a similar syntax for tags but currently supports fewer tags.
--
-- All parameters for the Rich Text component are adjusted in the GUI scene.
--
-- This component uses GUI component template. (/druid/custom/rich_text/rich_text.gui).
--
-- You able to customize it or make your own with the next node scructure:
--
-- root
--
-- - text_prefab
--
-- - icon_prefab
--
-- <b># Rich Text Setup #</b>
--
-- • Root node size: Set the maximum width and height of the text.
--
-- • Root anchor: Define the alignment of the Rich Text inside the root node size area.
--
-- • Text prefab: Configure all default text parameters for the text node.
--
-- • Text prefab anchor: Set the anchor for each text node (adjust this only if animating text).
--
-- • Icon prefab: Configure all default node parameters for the icon node.
--
-- • Icon prefab anchor: Set the anchor for each icon node (adjust this only if animating the icon).
--
-- <b># Notes #</b>
--
-- • Nested tags are supported
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=custom_rich_text" target="_blank"><b>Example Link</b></a>
-- @usage
-- local RichText = require("druid.custom.rich_text.rich_text")
-- ...
-- self.rich_text = self.druid:new(RichText, "rich_text")
-- self.rich_text:set_text("Hello, Druid Rich Text!")
-- @usage
-- type druid.rich_text.word = {
-- node: Node,
-- relative_scale: number,
-- color: vector4,
-- position: vector3,
-- offset: vector3,
-- scale: vector3,
-- size: vector3,
-- metrics: druid.rich_text.metrics,
-- pivot: Pivot,
-- text: string,
-- shadow: vector4,
-- outline: vector4,
-- font: string,
-- image: druid.rich_text.image,
-- default_animation: string,
-- br: boolean,
-- nobr: boolean,
-- }
--
-- type druid.rich_text.word.image = {
-- texture: string,
-- anim: string,
-- width: number,
-- height: number,
-- }
--
-- type druid.rich_text.lines_metrics = {
-- text_width: number,
-- text_height: number,
-- lines: table<number, druid.rich_text.metrics>,
-- }
--
-- type druid.rich_text.metrics = {
-- width: number,
-- height: number,
-- offset_x: number|nil,
-- offset_y: number|nil,
-- node_size: vector3|nil @For images only,
-- }
-- @module RichText
-- @within BaseComponent
-- @alias druid.rich_text
--- The component druid instance
-- @tfield DruidInstance druid @{DruidInstance}
local component = require("druid.component")
local rich_text = require("druid.custom.rich_text.module.rt")
local RichText = component.create("rich_text")
local SCHEME = {
ROOT = "root",
TEXT_PREFAB = "text_prefab",
ICON_PREFAB = "icon_prefab"
}
--- Rich Text component constructor
-- @tparam RichText self @{RichText}
-- @tparam string template The Rich Text template name
-- @tparam table nodes The node table, if prefab was copied by gui.clone_tree()
function RichText.init(self, template, nodes)
self:set_template(template)
self:set_nodes(nodes)
self.root = self:get_node(SCHEME.ROOT)
self.druid = self:get_druid()
self.text_prefab = self:get_node(SCHEME.TEXT_PREFAB)
self.icon_prefab = self:get_node(SCHEME.ICON_PREFAB)
gui.set_enabled(self.text_prefab, false)
gui.set_enabled(self.icon_prefab, false)
self._settings = self:_create_settings()
end
--- Component style params.
-- You can override this component styles params in Druid styles table
-- or create your own style
-- @table style
-- @tfield[opt={}] table COLORS Rich Text color aliases
-- @tfield[opt=20] number ADJUST_STEPS Amount steps of attemps text adjust by height
-- @tfield[opt=0.02] number ADJUST_SCALE_DELTA Scale step on each height adjust step
function RichText.on_style_change(self, style)
self.style = {}
self.style.COLORS = style.COLORS or {}
self.style.ADJUST_STEPS = style.ADJUST_STEPS or 20
self.style.ADJUST_SCALE_DELTA = style.ADJUST_SCALE_DELTA or 0.02
end
--- Set text for Rich Text
-- @tparam RichText self @{RichText}
-- @tparam string text The text to set
-- @treturn druid.rich_text.word[] words
-- @treturn druid.rich_text.lines_metrics line_metrics
-- @usage
-- • color: Change text color
--
-- <color=red>Foobar</color>
-- <color=1.0,0,0,1.0>Foobar</color>
-- <color=#ff0000>Foobar</color>
-- <color=#ff0000ff>Foobar</color>
--
-- • shadow: Change text shadow
--
-- <shadow=red>Foobar</shadow>
-- <shadow=1.0,0,0,1.0>Foobar</shadow>
-- <shadow=#ff0000>Foobar</shadow>
-- <shadow=#ff0000ff>Foobar</shadow>
--
-- • outline: Change text shadow
--
-- <outline=red>Foobar</outline>
-- <outline=1.0,0,0,1.0>Foobar</outline>
-- <outline=#ff0000>Foobar</outline>
-- <outline=#ff0000ff>Foobar</outline>
--
-- • font: Change font
--
-- <font=MyCoolFont>Foobar</font>
--
-- • size: Change text size, relative to default size
--
-- <size=2>Twice as large</size>
--
-- • br: Insert a line break
--
-- <br/>
--
-- • nobr: Prevent the text from breaking
--
-- Words <nobr>inside tag</nobr> won't break
--
-- • img: Display image
--
-- <img=texture:image/>
-- <img=texture:image,size/>
-- <img=texture:image,width,height/>
function RichText.set_text(self, text)
self:clear()
local words, settings, line_metrics = rich_text.create(text, self._settings, self.style)
line_metrics = rich_text.adjust_to_area(words, settings, line_metrics, self.style)
self._words = words
self._line_metrics = line_metrics
return words, line_metrics
end
function RichText:on_remove()
self:clear()
end
--- Clear all created words.
function RichText:clear()
if self._words then
rich_text.remove(self._words)
self._words = nil
end
end
--- Get all words, which has a passed tag.
-- @tparam string tag
-- @treturn druid.rich_text.word[] words
function RichText:tagged(tag)
if not self._words then
return
end
return rich_text.tagged(self._words, tag)
end
--- Get all current words.
-- @treturn table druid.rich_text.word[]
function RichText:get_words()
return self._words
end
--- Get current line metrics
--- @treturn druid.rich_text.lines_metrics
function RichText:get_line_metric()
return self._line_metrics
end
function RichText:_create_settings()
local root_size = gui.get_size(self.root)
return {
-- General settings
-- Adjust scale using to fit the text to the root node area
adjust_scale = 1,
parent = self.root,
width = root_size.x,
height = root_size.y,
combine_words = false, -- disabled now
text_prefab = self.text_prefab,
node_prefab = self.icon_prefab,
-- Text Settings
shadow = gui.get_shadow(self.text_prefab),
outline = gui.get_outline(self.text_prefab),
text_scale = gui.get_scale(self.text_prefab),
text_leading = gui.get_leading(self.text_prefab),
is_multiline = gui.get_line_break(self.text_prefab),
-- Image settings
image_pixel_grid_snap = false, -- disabled now
node_scale = gui.get_scale(self.icon_prefab),
image_scale = gui.get_scale(self.icon_prefab),
default_animation = gui.get_flipbook(self.icon_prefab),
}
end
return RichText

141
druid/druid.lua
View File

@ -1,20 +1,49 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Druid UI Library. --- Druid UI Component Framework.
-- Powerful Defold component based UI library. Use standart -- <b># Overview #</b>
-- components or make your own game-specific components to
-- make amazing GUI in your games.
-- --
-- Contains the several basic components and examples -- Druid - powerful Defold component UI library. Use basic and extended
-- to how to do your custom complex components to -- Druid components or make your own game-specific components to make
-- separate UI game logic to small files -- amazing GUI in your games.
-- --
-- require("druid.druid") -- To start using Druid, please refer to the Usage section below.
-- function init(self)
-- self.druid = druid.new(self)
-- end
-- --
-- @module druid -- <b># Notes #</b>
--
-- • Each Druid instance maintains the self context from the constructor and passes it to each Druid callback.
--
-- See next: @{DruidInstance}
--
-- @usage
-- local druid = require("druid.druid")
--
-- local function on_play(self)
-- print("Gonna play!")
-- end
--
-- function init(self)
-- self.druid = druid.new(self)
-- self.druid:new_button("button_play", on_play)
-- end
--
-- function final(self)
-- self.druid:final()
-- end
--
-- function update(self, dt)
-- self.druid:update(dt)
-- end
--
-- function on_message(self, message_id, message, sender)
-- self.druid:on_message(message_id, message, sender)
-- end
--
-- function on_input(self, action_id, action)
-- return self.druid:on_input(action_id, action)
-- end
--
-- @module Druid
local const = require("druid.const") local const = require("druid.const")
local base_component = require("druid.component") local base_component = require("druid.component")
@ -38,26 +67,39 @@ local function get_druid_instances()
end end
--- Register external druid component. --- Register a new external Druid component.
-- After register you can create the component with --
-- druid_instance:new_{name}. For example `druid:new_button(...)` -- You can register your own components to make new alias: the druid:new_{name} function.
-- @function druid:register -- For example, if you want to register a component called "my_component", you can create it using druid:new_my_component(...).
-- This can be useful if you have your own "basic" components that you don't want to re-create each time.
-- @function druid.register
-- @tparam string name module name -- @tparam string name module name
-- @tparam table module lua table with component -- @tparam table module lua table with component
-- @usage
-- local my_component = require("path.to.my.component")
-- druid.register("my_component", my_component)
-- ...
-- local druid = druid.new(self)
-- local component_instance = self.druid:new_my_component(...)
function M.register(name, module) function M.register(name, module)
-- TODO: Find better solution to creating elements?
-- Current way is very implicit
druid_instance["new_" .. name] = function(self, ...) druid_instance["new_" .. name] = function(self, ...)
return druid_instance.new(self, module, ...) return druid_instance.new(self, module, ...)
end end
end end
--- Create Druid instance. --- Create a new Druid instance for creating GUI components.
--
-- @function druid.new -- @function druid.new
-- @tparam table context Druid context. Usually it is self of script -- @tparam table context The Druid context. Usually, this is the self of the gui_script. It is passed into all Druid callbacks.
-- @tparam[opt] table style Druid style module -- @tparam[opt] table style The Druid style table to override style parameters for this Druid instance.
-- @treturn druid_instance Druid instance -- @treturn druid_instance The Druid instance @{DruidInstance}.
-- @usage
-- local druid = require("druid.druid")
--
-- function init(self)
-- self.druid = druid.new(self)
-- end
function M.new(context, style) function M.new(context, style)
if settings.default_style == nil then if settings.default_style == nil then
M.set_default_style(default_style) M.set_default_style(default_style)
@ -69,40 +111,60 @@ function M.new(context, style)
end end
--- Set new default style. --- Set your own default style for all Druid instances.
--
-- To create your own style file, copy the default style file and make changes to it.
-- Register the new style before creating your Druid instances.
-- @function druid.set_default_style -- @function druid.set_default_style
-- @tparam table style Druid style module -- @tparam table style Druid style module
-- @usage
-- local my_style = require("path.to.my.style")
-- druid.set_default_style(my_style)
function M.set_default_style(style) function M.set_default_style(style)
settings.default_style = style or {} settings.default_style = style or {}
end end
--- Set text function --- Set the text function for the LangText component.
-- Druid locale component will call this function --
-- to get translated text. After set_text_funtion -- The Druid locale component will call this function to get translated text.
-- all existing locale component will be updated -- After setting the text function, all existing locale components will be updated.
-- @function druid.set_text_function -- @function druid.set_text_function
-- @tparam function callback Get localized text function -- @tparam function callback Get localized text function
-- @usage
-- druid.set_text_function(function(text_id)
-- return lang_data[text_id] -- Replace with your real function
-- end)
function M.set_text_function(callback) function M.set_text_function(callback)
settings.get_text = callback or const.EMPTY_FUNCTION settings.get_text = callback or const.EMPTY_FUNCTION
M.on_language_change() M.on_language_change()
end end
--- Set sound function. --- Set the Druid sound function to play UI sounds if used.
-- Component will call this function to --
-- play sound by sound_id -- Set a function to play a sound given a sound_id. This function is used for button clicks to play the "click" sound.
-- It can also be used to play sounds in your custom components (see the default Druid style file for an example).
-- @function druid.set_sound_function -- @function druid.set_sound_function
-- @tparam function callback Sound play callback -- @tparam function callback Sound play callback
-- @usage
-- druid.set_sound_function(function(sound_id)
-- sound.play(sound_id) -- Replace with your real function
-- end)
function M.set_sound_function(callback) function M.set_sound_function(callback)
settings.play_sound = callback or const.EMPTY_FUNCTION settings.play_sound = callback or const.EMPTY_FUNCTION
end end
--- Callback on global window event. --- Set the window callback to enable on_focus_gain and on_focus_lost functions.
-- Used to trigger on_focus_lost and on_focus_gain --
-- This is used to trigger the on_focus_lost and on_focus_gain functions in Druid components.
-- @function druid.on_window_callback -- @function druid.on_window_callback
-- @tparam string event Event param from window listener -- @tparam string event Event param from window listener
-- @usage
-- window.set_listener(function(_, event)
-- druid.on_window_callback(event)
-- end)
function M.on_window_callback(event) function M.on_window_callback(event)
local instances = get_druid_instances() local instances = get_druid_instances()
@ -110,15 +172,11 @@ function M.on_window_callback(event)
for i = 1, #instances do for i = 1, #instances do
msg.post(instances[i].url, base_component.ON_FOCUS_LOST) msg.post(instances[i].url, base_component.ON_FOCUS_LOST)
end end
end elseif event == window.WINDOW_EVENT_FOCUS_GAINED then
if event == window.WINDOW_EVENT_FOCUS_GAINED then
for i = 1, #instances do for i = 1, #instances do
msg.post(instances[i].url, base_component.ON_FOCUS_GAINED) msg.post(instances[i].url, base_component.ON_FOCUS_GAINED)
end end
end elseif event == window.WINDOW_EVENT_RESIZED then
if event == window.WINDOW_EVENT_RESIZED then
for i = 1, #instances do for i = 1, #instances do
msg.post(instances[i].url, base_component.ON_WINDOW_RESIZED) msg.post(instances[i].url, base_component.ON_WINDOW_RESIZED)
end end
@ -126,9 +184,12 @@ function M.on_window_callback(event)
end end
--- Callback on global language change event. --- Call this function when the game language changes.
-- Use to update all lang texts --
-- This function will translate all current LangText components.
-- @function druid.on_language_change -- @function druid.on_language_change
-- @usage
-- druid.on_language_change()
function M.on_language_change() function M.on_language_change()
local instances = get_druid_instances() local instances = get_druid_instances()

44
druid/event.lua
View File

@ -1,6 +1,10 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Druid lua event library --- Druid Event Module
--
-- The Event module provides a simple class for handling callbacks. It is used in many Druid components.
--
-- You can subscribe to an event using the `:subscribe` method and unsubscribe using the `:unsubscribe` method.
-- @module DruidEvent -- @module DruidEvent
-- @alias druid.event -- @alias druid.event
@ -9,9 +13,13 @@ local class = require("druid.system.middleclass")
local DruidEvent = class("druid.event") local DruidEvent = class("druid.event")
--- Event constructur --- DruidEvent constructor
-- @tparam DruidEvent self @{DruidEvent} -- @tparam DruidEvent self @{DruidEvent}
-- @tparam function initial_callback Subscribe the callback on new event, if callback exist -- @tparam[opt] function initial_callback Subscribe the callback on new event, if callback exist
-- @usage
-- local Event = require("druid.event")
-- ...
-- local event = Event(initial_callback)
function DruidEvent.initialize(self, initial_callback) function DruidEvent.initialize(self, initial_callback)
self._callbacks = nil -- initialize later self._callbacks = nil -- initialize later
@ -24,7 +32,14 @@ end
--- Subscribe callback on event --- Subscribe callback on event
-- @tparam DruidEvent self @{DruidEvent} -- @tparam DruidEvent self @{DruidEvent}
-- @tparam function callback Callback itself -- @tparam function callback Callback itself
-- @tparam table context Additional context as first param to callback call -- @tparam[opt] Any context Additional context as first param to callback call, usually it's self
-- @usage
-- local function on_long_callback(self)
-- print("Long click!")
-- end
-- ...
-- local button = self.druid:new_button("button", callback)
-- button.on_long_click:subscribe(on_long_callback, self)
function DruidEvent.subscribe(self, callback, context) function DruidEvent.subscribe(self, callback, context)
assert(type(self) == "table", "You should subscribe to event with : syntax") assert(type(self) == "table", "You should subscribe to event with : syntax")
assert(type(callback) == "function", "Callback should be function") assert(type(callback) == "function", "Callback should be function")
@ -42,7 +57,13 @@ end
--- Unsubscribe callback on event --- Unsubscribe callback on event
-- @tparam DruidEvent self @{DruidEvent} -- @tparam DruidEvent self @{DruidEvent}
-- @tparam function callback Callback itself -- @tparam function callback Callback itself
-- @tparam table context Additional context as first param to callback call -- @tparam[opt] Any context Additional context as first param to callback call
-- @usage
-- local function on_long_callback(self)
-- print("Long click!")
-- end
-- ...
-- button.on_long_click:unsubscribe(on_long_callback, self)
function DruidEvent.unsubscribe(self, callback, context) function DruidEvent.unsubscribe(self, callback, context)
if not self._callbacks then if not self._callbacks then
return return
@ -60,6 +81,8 @@ end
--- Return true, if event have at lease one handler --- Return true, if event have at lease one handler
-- @tparam DruidEvent self @{DruidEvent} -- @tparam DruidEvent self @{DruidEvent}
-- @treturn bool True if event have handlers -- @treturn bool True if event have handlers
-- @usage
-- local is_long_click_handler_exists = button.on_long_click:is_exist()
function DruidEvent.is_exist(self) function DruidEvent.is_exist(self)
if not self._callbacks then if not self._callbacks then
return false return false
@ -70,6 +93,8 @@ end
--- Clear the all event handlers --- Clear the all event handlers
-- @tparam DruidEvent self @{DruidEvent} -- @tparam DruidEvent self @{DruidEvent}
-- @usage
-- button.on_long_click:clear()
function DruidEvent.clear(self) function DruidEvent.clear(self)
self._callbacks = nil self._callbacks = nil
end end
@ -77,13 +102,18 @@ end
--- Trigger the event and call all subscribed callbacks --- Trigger the event and call all subscribed callbacks
-- @tparam DruidEvent self @{DruidEvent} -- @tparam DruidEvent self @{DruidEvent}
-- @tparam any ... All event params -- @tparam Any ... All event params
-- @usage
-- local Event = require("druid.event")
-- ...
-- local event = Event()
-- event:trigger("Param1", "Param2")
function DruidEvent.trigger(self, ...) function DruidEvent.trigger(self, ...)
if not self._callbacks then if not self._callbacks then
return false return false
end end
for index, callback_info in ipairs(self._callbacks) do for _, callback_info in ipairs(self._callbacks) do
if callback_info.context then if callback_info.context then
callback_info.callback(callback_info.context, ...) callback_info.callback(callback_info.context, ...)
else else

2
druid/extended/checkbox.lua
View File

@ -1,6 +1,8 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Druid checkbox component --- Druid checkbox component
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=general_checkboxes" target="_blank"><b>Example Link</b></a>
-- @module Checkbox -- @module Checkbox
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.checkbox -- @alias druid.checkbox

2
druid/extended/checkbox_group.lua
View File

@ -1,6 +1,8 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Checkbox group module --- Checkbox group module
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=general_checkboxes" target="_blank"><b>Example Link</b></a>
-- @module CheckboxGroup -- @module CheckboxGroup
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.checkbox_group -- @alias druid.checkbox_group

38
druid/extended/data_list.lua
View File

@ -2,6 +2,8 @@
--- Component to manage data for huge dataset in scroll. --- Component to manage data for huge dataset in scroll.
-- It requires Druid Scroll and Druid Grid (Static or Dynamic) components -- It requires Druid Scroll and Druid Grid (Static or Dynamic) components
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=general_data_list" target="_blank"><b>Example Link</b></a>
-- @module DataList -- @module DataList
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.data_list -- @alias druid.data_list
@ -115,23 +117,9 @@ function DataList.add(self, data, index, shift_policy)
index = index or self._data_last_index + 1 index = index or self._data_last_index + 1
shift_policy = shift_policy or const.SHIFT.RIGHT shift_policy = shift_policy or const.SHIFT.RIGHT
if self._data[index] then helper.insert_with_shift(self._data, data, index, shift_policy)
if shift_policy == const.SHIFT.RIGHT then
for i = self._data_last_index, index, -1 do
self._data[i + 1] = self._data[i]
end
end
if shift_policy == const.SHIFT.LEFT then
for i = self._data_first_index, index do
self._data[i - 1] = self._data[i]
end
end
end
self._data[index] = data
self:_update_data_info() self:_update_data_info()
self:_check_elements() self:_check_elements()
self:log_message("Add element", { index = index })
end end
@ -141,10 +129,10 @@ end
-- @tparam number shift_policy The constant from const.SHIFT.* -- @tparam number shift_policy The constant from const.SHIFT.*
-- @local -- @local
function DataList.remove(self, index, shift_policy) function DataList.remove(self, index, shift_policy)
table.remove(self._data, index) --self:_refresh()
self:_refresh()
self:log_message("Remove element", { index = index }) helper.remove_with_shift(self._data, index, shift_policy)
self:_update_data_info()
end end
@ -156,7 +144,8 @@ end
function DataList.remove_by_data(self, data, shift_policy) function DataList.remove_by_data(self, data, shift_policy)
local index = helper.contains(self._data, data) local index = helper.contains(self._data, data)
if index then if index then
table.remove(self._data, index) helper.remove_with_shift(self._data, index, shift_policy)
self:_update_data_info()
self:_refresh() self:_refresh()
end end
end end
@ -166,6 +155,7 @@ end
-- @tparam DataList self @{DataList} -- @tparam DataList self @{DataList}
function DataList.clear(self) function DataList.clear(self)
self._data = {} self._data = {}
self:_update_data_info()
self:_refresh() self:_refresh()
end end
@ -263,7 +253,6 @@ function DataList._add_at(self, index)
component = instance component = instance
} }
self:log_message("Add element at", { index = index })
self.on_element_add:trigger(self:get_context(), index, node, instance) self.on_element_add:trigger(self:get_context(), index, node, instance)
end end
@ -284,12 +273,11 @@ function DataList._remove_at(self, index)
end end
self._data_visual[index] = nil self._data_visual[index] = nil
self:log_message("Remove element at", { index = index })
self.on_element_remove:trigger(self:get_context(), index) self.on_element_remove:trigger(self:get_context(), index)
end end
--- Fully refresh all DataList elements --- Refresh all elements in DataList
-- @tparam DataList self @{DataList} -- @tparam DataList self @{DataList}
-- @local -- @local
function DataList._refresh(self) function DataList._refresh(self)
@ -330,8 +318,6 @@ function DataList._check_elements(self)
progress = 0 progress = 0
end end
self:log_message("Check elements", { top_index = self.top_index, last_index = self.last_index, progress = progress })
if self.scroll_progress ~= progress then if self.scroll_progress ~= progress then
self.scroll_progress = progress self.scroll_progress = progress
self.on_scroll_progress_change:trigger(self:get_context(), progress) self.on_scroll_progress_change:trigger(self:get_context(), progress)
@ -389,8 +375,8 @@ function DataList._update_data_info(self)
end end
if self._data_length == 0 then if self._data_length == 0 then
self._data_first_index = 1 self._data_first_index = 0
self._data_last_index = 1 self._data_last_index = 0
end end
end end

13
druid/extended/dynamic_grid.lua
View File

@ -1,6 +1,8 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Component to handle placing components in row --- Component to handle placing components in row
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=general_grid" target="_blank"><b>Example Link</b></a>
-- @module DynamicGrid -- @module DynamicGrid
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.dynamic_grid -- @alias druid.dynamic_grid
@ -118,7 +120,7 @@ function DynamicGrid.get_pos(self, index, node, origin_index)
assert(not self.first_index, "Dynamic Grid can't have gaps between nodes. Error on grid:add") 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 -- If not origin node, so it should be first element in the grid
local size = self:_get_node_size(node) local size = helper.get_scaled_size(node)
local pivot = const.PIVOTS[gui.get_pivot(node)] local pivot = const.PIVOTS[gui.get_pivot(node)]
return vmath.vector3( return vmath.vector3(
size.x * pivot.x - size.x * self.pivot.x, size.x * pivot.x - size.x * self.pivot.x,
@ -308,7 +310,7 @@ function DynamicGrid._add_node(self, node, index, origin_index)
self.nodes[index] = { self.nodes[index] = {
node = node, node = node,
pos = self:get_pos(index, node, origin_index), pos = self:get_pos(index, node, origin_index),
size = self:_get_node_size(node), size = helper.get_scaled_size(node),
pivot = const.PIVOTS[gui.get_pivot(node)] pivot = const.PIVOTS[gui.get_pivot(node)]
} }
@ -394,7 +396,7 @@ end
function DynamicGrid._get_next_node_pos(self, origin_node_index, new_node, place_side) function DynamicGrid._get_next_node_pos(self, origin_node_index, new_node, place_side)
local node = self.nodes[origin_node_index] local node = self.nodes[origin_node_index]
local new_node_size = self:_get_node_size(new_node) local new_node_size = helper.get_scaled_size(new_node)
local new_pivot = const.PIVOTS[gui.get_pivot(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_x = (node.size.x/2 + new_node_size.x/2) * place_side.x
@ -410,11 +412,6 @@ function DynamicGrid._get_next_node_pos(self, origin_node_index, new_node, place
end end
function DynamicGrid._get_node_size(self, node)
return vmath.mul_per_elem(gui.get_size(node), gui.get_scale(node))
end
--- Return side vector to correct node shifting --- Return side vector to correct node shifting
function DynamicGrid._get_side_vector(self, side, is_forward) function DynamicGrid._get_side_vector(self, side, is_forward)
if side == const.SIDE.X then if side == const.SIDE.X then

2
druid/extended/hotkey.lua
View File

@ -1,6 +1,8 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Druid hotkey component --- Druid hotkey component
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=general_hotkey" target="_blank"><b>Example Link</b></a>
-- @module Hotkey -- @module Hotkey
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.hotkey -- @alias druid.hotkey

18
druid/extended/input.lua
View File

@ -2,6 +2,8 @@
--- Druid input text component. --- Druid input text component.
-- Carry on user text input -- Carry on user text input
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=general_input" target="_blank"><b>Example Link</b></a>
-- @author Part of code from Britzl gooey input component -- @author Part of code from Britzl gooey input component
-- @module Input -- @module Input
-- @within BaseComponent -- @within BaseComponent
@ -51,7 +53,8 @@
local Event = require("druid.event") local Event = require("druid.event")
local const = require("druid.const") local const = require("druid.const")
local component = require("druid.component") local component = require("druid.component")
local utf8 = require("druid.system.utf8") local utf8_lua = require("druid.system.utf8")
local utf8 = utf8 or utf8_lua
local Input = component.create("input") local Input = component.create("input")
@ -87,6 +90,7 @@ end
-- @tfield[opt=false] bool IS_LONGTAP_ERASE Is long tap will erase current input data -- @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[opt=*] string MASK_DEFAULT_CHAR Default character mask for password input
-- @tfield[opt=false] bool IS_UNSELECT_ON_RESELECT If true, call unselect on select selected input -- @tfield[opt=false] bool IS_UNSELECT_ON_RESELECT If true, call unselect on select selected input
-- @tfield[opt=false] bool NO_CONSUME_INPUT_WHILE_SELECTED If true, will not consume input while input is selected. It's allow to interact with other components while input is selected (text input still captured)
-- @tfield function on_select (self, button_node) Callback on input field selecting -- @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_unselect (self, button_node) Callback on input field unselecting
-- @tfield function on_input_wrong (self, button_node) Callback on wrong user input -- @tfield function on_input_wrong (self, button_node) Callback on wrong user input
@ -97,6 +101,7 @@ function Input.on_style_change(self, style)
self.style.IS_LONGTAP_ERASE = style.IS_LONGTAP_ERASE or false self.style.IS_LONGTAP_ERASE = style.IS_LONGTAP_ERASE or false
self.style.MASK_DEFAULT_CHAR = style.MASK_DEFAULT_CHAR or "*" self.style.MASK_DEFAULT_CHAR = style.MASK_DEFAULT_CHAR or "*"
self.style.IS_UNSELECT_ON_RESELECT = style.IS_UNSELECT_ON_RESELECT or false self.style.IS_UNSELECT_ON_RESELECT = style.IS_UNSELECT_ON_RESELECT or false
self.style.NO_CONSUME_INPUT_WHILE_SELECTED = style.NO_CONSUME_INPUT_WHILE_SELECTED or false
self.style.on_select = style.on_select or function(_, button_node) end 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_unselect = style.on_unselect or function(_, button_node) end
@ -112,13 +117,13 @@ end
--- Component init function --- Component init function
-- @tparam Input self @{Input} -- @tparam Input self @{Input}
-- @tparam node click_node Button node to enabled input component -- @tparam node click_node Node to enabled input component
-- @tparam node|Text text_node Text node what will be changed on user input. You can pass text component instead of text node name @{Text} -- @tparam node|Text text_node Text node what will be changed on user input. You can pass text component instead of text node name @{Text}
-- @tparam[opt] number keyboard_type Gui keyboard type for input field -- @tparam[opt] number keyboard_type Gui keyboard type for input field
function Input.init(self, click_node, text_node, keyboard_type) function Input.init(self, click_node, text_node, keyboard_type)
self.druid = self:get_druid(self) self.druid = self:get_druid(self)
if type(text_node) == const.TABLE then if type(text_node) == "table" then
self.text = text_node self.text = text_node
else else
self.text = self.druid:new_text(text_node) self.text = self.druid:new_text(text_node)
@ -145,6 +150,10 @@ function Input.init(self, click_node, text_node, keyboard_type)
self.button.on_click_outside:subscribe(self.unselect) self.button.on_click_outside:subscribe(self.unselect)
self.button.on_long_click:subscribe(clear_and_select) self.button.on_long_click:subscribe(clear_and_select)
if html5 then
self.button:set_web_user_interaction(true)
end
self.on_input_select = Event() self.on_input_select = Event()
self.on_input_unselect = Event() self.on_input_unselect = Event()
self.on_input_text = Event() self.on_input_text = Event()
@ -214,7 +223,8 @@ function Input.on_input(self, action_id, action)
end end
end end
return self.is_selected local is_consume_input = not self.style.NO_CONSUME_INPUT_WHILE_SELECTED and self.is_selected
return is_consume_input
end end

26
druid/extended/lang_text.lua
View File

@ -1,7 +1,18 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Component to handle all GUI texts --- Component to wrap over GUI Text nodes with localization helpers
-- Good working with localization system --
-- <b># Overview #</b>
--
-- • The initialization of druid.set_text_function is required to enable localization
-- using the localization ID.
--
-- • The LangText component supports up to 7 string format parameters.
-- This limitation exists due to certain issues with using ... arguments.
--
-- <b># Notes #</b>
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=texts_lang_text" target="_blank"><b>Example Link</b></a>
-- @module LangText -- @module LangText
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.lang_text -- @alias druid.lang_text
@ -14,7 +25,6 @@
--- ---
local const = require("druid.const")
local Event = require("druid.event") local Event = require("druid.event")
local settings = require("druid.system.settings") local settings = require("druid.system.settings")
local component = require("druid.component") local component = require("druid.component")
@ -22,14 +32,14 @@ local component = require("druid.component")
local LangText = component.create("lang_text") local LangText = component.create("lang_text")
--- Component init function --- The @{LangText} constructor
-- @tparam LangText self @{LangText} -- @tparam LangText self @{LangText}
-- @tparam node node The text node -- @tparam string|node node Node name or GUI Text Node itself
-- @tparam string locale_id Default locale id or text from node as default -- @tparam string locale_id Default locale id or text from node as default
-- @tparam bool no_adjust If true, will not correct text size -- @tparam[opt=downscale] string adjust_type Adjust type for text. By default is DOWNSCALE. Look const.TEXT_ADJUST for reference
function LangText.init(self, node, locale_id, no_adjust) function LangText.init(self, node, locale_id, adjust_type)
self.druid = self:get_druid() self.druid = self:get_druid()
self.text = self.druid:new_text(node, locale_id, no_adjust) self.text = self.druid:new_text(node, locale_id, adjust_type)
self.node = self.text.node self.node = self.text.node
self.last_locale_args = {} self.last_locale_args = {}

39
druid/extended/layout.lua
View File

@ -1,6 +1,8 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Layout management on node --- Layout management on node
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=general_layout" target="_blank"><b>Example Link</b></a>
-- @module Layout -- @module Layout
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.layout -- @alias druid.layout
@ -36,10 +38,13 @@ function Layout.init(self, node, mode, on_size_changed_callback)
self._min_size = nil self._min_size = nil
self._max_size = nil self._max_size = nil
self._current_size = vmath.vector3(0)
self._inited = false self._inited = false
self._max_gui_upscale = nil
self._fit_node = nil self._fit_node = nil
self._anchors = {}
self.mode = mode or const.LAYOUT_MODE.FIT self.mode = mode or const.LAYOUT_MODE.FIT
self.on_size_changed = Event(on_size_changed_callback) self.on_size_changed = Event(on_size_changed_callback)
@ -66,6 +71,13 @@ function Layout.on_window_resized(self)
local x_koef, y_koef = helper.get_screen_aspect_koef() local x_koef, y_koef = helper.get_screen_aspect_koef()
local revert_scale = 1
if self._max_gui_upscale then
revert_scale = self._max_gui_upscale / helper.get_gui_scale()
revert_scale = math.min(revert_scale, 1)
end
gui.set_scale(self.node, vmath.vector3(revert_scale))
if self._fit_node then if self._fit_node then
self.fit_size = gui.get_size(self._fit_node) self.fit_size = gui.get_size(self._fit_node)
self.fit_size.x = self.fit_size.x / x_koef self.fit_size.x = self.fit_size.x / x_koef
@ -77,11 +89,17 @@ function Layout.on_window_resized(self)
local new_size = vmath.vector3(self.origin_size) local new_size = vmath.vector3(self.origin_size)
if self.mode == const.LAYOUT_MODE.STRETCH_X or self.mode == const.LAYOUT_MODE.STRETCH then if self.mode == const.LAYOUT_MODE.STRETCH then
new_size.x = new_size.x * x_koef new_size.x = new_size.x * x_koef / revert_scale
new_size.y = new_size.y * y_koef / revert_scale
end end
if self.mode == const.LAYOUT_MODE.STRETCH_Y or self.mode == const.LAYOUT_MODE.STRETCH then
new_size.y = new_size.y * y_koef if self.mode == const.LAYOUT_MODE.STRETCH_X then
new_size.x = new_size.x * x_koef / revert_scale
end
if self.mode == const.LAYOUT_MODE.STRETCH_Y then
new_size.y = new_size.y * y_koef / revert_scale
end end
-- Fit to the stretched container (node size or other defined) -- Fit to the stretched container (node size or other defined)
@ -100,6 +118,7 @@ function Layout.on_window_resized(self)
new_size.x = math.min(new_size.x, self._max_size.x) new_size.x = math.min(new_size.x, self._max_size.x)
new_size.y = math.min(new_size.y, self._max_size.y) new_size.y = math.min(new_size.y, self._max_size.y)
end end
self._current_size = new_size
gui.set_size(self.node, new_size) gui.set_size(self.node, new_size)
self.position.x = self.origin_position.x + self.origin_position.x * (x_koef - 1) self.position.x = self.origin_position.x + self.origin_position.x * (x_koef - 1)
@ -152,6 +171,16 @@ function Layout.set_origin_size(self, new_origin_size)
end end
--- Set max gui upscale for FIT adjust mode (or side). It happens on bigger render gui screen
-- @tparam Layout self @{Layout}
-- @tparam number max_gui_upscale
-- @treturn Layout @{Layout}
function Layout.set_max_gui_upscale(self, max_gui_upscale)
self._max_gui_upscale = max_gui_upscale
self:on_window_resized()
end
--- Set size for layout node to fit inside it --- Set size for layout node to fit inside it
-- @tparam Layout self @{Layout} -- @tparam Layout self @{Layout}
-- @tparam vector3 target_size -- @tparam vector3 target_size

35
druid/extended/progress.lua
View File

@ -1,7 +1,20 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Basic progress bar component. --- Druid component to handle the progress bars.
-- For correct progress bar init it should be in max size from gui -- <b># Overview #</b>
--
-- <b># Notes #</b>
--
-- • Progress Node should be fully filled in your GUI scene node. It will be the progress maximum size
--
-- • Progress correct working with Slice9 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
--
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=general_progress_bar" target="_blank"><b>Example Link</b></a>
-- @module Progress -- @module Progress
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.progress -- @alias druid.progress
@ -12,7 +25,9 @@
--- Progress bar fill node --- Progress bar fill node
-- @tfield node node -- @tfield node node
--- The progress bar direction --- The progress bar direction.
--
-- The values are: "x" or "y". (const.SIDE.X or const.SIDE.Y)
-- @tfield string key -- @tfield string key
--- Current progress bar scale --- Current progress bar scale
@ -95,16 +110,16 @@ function Progress.on_style_change(self, style)
end end
--- Component init function --- @{Progress} constructor
-- @tparam Progress self @{Progress} -- @tparam Progress self @{Progress}
-- @tparam string|node node Progress bar fill node or node name -- @tparam string|node node Node name or GUI Node itself.
-- @tparam string key Progress bar direction: const.SIDE.X or const.SIDE.Y -- @tparam string key Progress bar direction: const.SIDE.X or const.SIDE.Y
-- @tparam[opt=1] number init_value Initial value of progress bar -- @tparam[opt=1] number init_value Initial value of progress bar
function Progress.init(self, node, key, init_value) function Progress.init(self, node, key, init_value)
assert(key == const.SIDE.X or const.SIDE.Y, "Progress bar key should be 'x' or 'y'") 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.key = key
self.prop = hash("scale." .. self.key)
self._init_value = init_value or 1 self._init_value = init_value or 1
self.node = self:get_node(node) self.node = self:get_node(node)
@ -114,19 +129,15 @@ function Progress.init(self, node, key, init_value)
self.slice = gui.get_slice9(self.node) self.slice = gui.get_slice9(self.node)
self.last_value = self._init_value self.last_value = self._init_value
if key == const.SIDE.X then if self.key == const.SIDE.X then
self.slice_size = self.slice.x + self.slice.z self.slice_size = self.slice.x + self.slice.z
else else
self.slice_size = self.slice.y + self.slice.w self.slice_size = self.slice.y + self.slice.w
end end
self.on_change = Event() self.on_change = Event()
end
self:set_to(self.last_value)
-- @tparam Progress self @{Progress}
function Progress.on_late_init(self)
self:set_to(self._init_value)
end end

2
druid/extended/radio_group.lua
View File

@ -1,6 +1,8 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Radio group module --- Radio group module
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=general_checkboxes" target="_blank"><b>Example Link</b></a>
-- @module RadioGroup -- @module RadioGroup
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.radio_group -- @alias druid.radio_group

23
druid/extended/slider.lua
View File

@ -1,6 +1,8 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Druid slider component --- Druid slider component
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=general_sliders" target="_blank"><b>Example Link</b></a>
-- @module Slider -- @module Slider
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.slider -- @alias druid.slider
@ -64,7 +66,7 @@ function Slider.init(self, node, end_pos, callback)
self.start_pos = gui.get_position(self.node) self.start_pos = gui.get_position(self.node)
self.pos = gui.get_position(self.node) self.pos = gui.get_position(self.node)
self.target_pos = self.pos self.target_pos = vmath.vector3(self.pos)
self.end_pos = end_pos self.end_pos = end_pos
self.dist = self.end_pos - self.start_pos self.dist = self.end_pos - self.start_pos
@ -72,6 +74,7 @@ function Slider.init(self, node, end_pos, callback)
self.value = 0 self.value = 0
self.on_change_value = Event(callback) self.on_change_value = Event(callback)
self:on_window_resized()
assert(self.dist.x == 0 or self.dist.y == 0, "Slider for now can be only vertical or horizontal") assert(self.dist.x == 0 or self.dist.y == 0, "Slider for now can be only vertical or horizontal")
end end
@ -82,6 +85,14 @@ function Slider.on_layout_change(self)
end end
function Slider.on_window_resized(self)
local x_koef, y_koef = helper.get_screen_aspect_koef()
self._x_koef = x_koef
self._y_koef = y_koef
self._scene_scale = helper.get_scene_scale(self.node)
end
function Slider.on_input(self, action_id, action) function Slider.on_input(self, action_id, action)
if action_id ~= const.ACTION_TOUCH then if action_id ~= const.ACTION_TOUCH then
return false return false
@ -90,15 +101,17 @@ function Slider.on_input(self, action_id, action)
if gui.pick_node(self.node, action.x, action.y) then if gui.pick_node(self.node, action.x, action.y) then
if action.pressed then if action.pressed then
self.pos = gui.get_position(self.node) self.pos = gui.get_position(self.node)
self._scene_scale = helper.get_scene_scale(self.node)
self.is_drag = true self.is_drag = true
end end
end end
if not self.is_drag and self._input_node and gui.pick_node(self._input_node, action.x, action.y) then if not self.is_drag and self._input_node and gui.pick_node(self._input_node, action.x, action.y) then
if action.pressed and gui.screen_to_local then if action.pressed and gui.screen_to_local then
self._scene_scale = helper.get_scene_scale(self.node)
self.pos = gui.screen_to_local(self.node, vmath.vector3(action.screen_x, action.screen_y, 0)) self.pos = gui.screen_to_local(self.node, vmath.vector3(action.screen_x, action.screen_y, 0))
self.pos.x = helper.clamp(self.pos.x, self.start_pos.x, self.end_pos.x) self.pos.x = helper.clamp(self.pos.x / self._scene_scale.x, self.start_pos.x, self.end_pos.x)
self.pos.y = helper.clamp(self.pos.y, self.start_pos.y, self.end_pos.y) self.pos.y = helper.clamp(self.pos.y / self._scene_scale.y, self.start_pos.y, self.end_pos.y)
gui.set_position(self.node, self.pos) gui.set_position(self.node, self.pos)
self.is_drag = true self.is_drag = true
@ -107,8 +120,8 @@ function Slider.on_input(self, action_id, action)
if self.is_drag and not action.pressed then if self.is_drag and not action.pressed then
-- move -- move
self.pos.x = self.pos.x + action.dx self.pos.x = self.pos.x + action.dx * self._x_koef / self._scene_scale.x
self.pos.y = self.pos.y + action.dy self.pos.y = self.pos.y + action.dy * self._y_koef / self._scene_scale.y
local prev_x = self.target_pos.x local prev_x = self.target_pos.x
local prev_y = self.target_pos.y local prev_y = self.target_pos.y

10
druid/base/swipe.lua → druid/extended/swipe.lua
View File

@ -3,6 +3,8 @@
--- Component to handle swipe gestures on node. --- Component to handle swipe gestures on node.
-- Swipe will be triggered, if swipe was started and -- Swipe will be triggered, if swipe was started and
-- ended on one node -- ended on one node
--
-- <a href="https://insality.github.io/druid/druid/index.html?example=general_swipe" target="_blank"><b>Example Link</b></a>
-- @module Swipe -- @module Swipe
-- @within BaseComponent -- @within BaseComponent
-- @alias druid.swipe -- @alias druid.swipe
@ -114,15 +116,11 @@ function Swipe.on_input(self, action_id, action)
return false return false
end end
if not helper.is_enabled(self.node) then if not gui.is_enabled(self.node, true) then
return false return false
end end
local is_pick = gui.pick_node(self.node, action.x, action.y) local is_pick = helper.pick_node(self.node, action.x, action.y, self.click_zone)
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 if not is_pick then
reset_swipe(self, action) reset_swipe(self, action)
return false return false

10
druid/extended/timer.lua
View File

@ -31,13 +31,19 @@
--- ---
local Event = require("druid.event") local Event = require("druid.event")
local formats = require("druid.helper.formats")
local helper = require("druid.helper") local helper = require("druid.helper")
local component = require("druid.component") local component = require("druid.component")
local Timer = component.create("timer") local Timer = component.create("timer")
local function second_string_min(sec)
local mins = math.floor(sec / 60)
local seconds = math.floor(sec - mins * 60)
return string.format("%.2d:%.2d", mins, seconds)
end
--- Component init function --- Component init function
-- @tparam Timer self @{Timer} -- @tparam Timer self @{Timer}
-- @tparam node node Gui text node -- @tparam node node Gui text node
@ -98,7 +104,7 @@ end
-- @tparam number set_to Value in seconds -- @tparam number set_to Value in seconds
function Timer.set_to(self, set_to) function Timer.set_to(self, set_to)
self.last_value = set_to self.last_value = set_to
gui.set_text(self.node, formats.second_string_min(set_to)) gui.set_text(self.node, second_string_min(set_to))
end end

302
druid/helper.lua
View File

@ -1,6 +1,9 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Druid helper module for gui layouts --- Helper module with various usefull GUI functions.
-- @usage
-- local helper = require("druid.helper")
-- helper.centrate_nodes(0, node_1, node_2)
-- @module Helper -- @module Helper
-- @alias druid.helper -- @alias druid.helper
@ -9,10 +12,9 @@ local const = require("druid.const")
local M = {} local M = {}
--- Text node or icon node can be nil
local function get_text_width(text_node) local function get_text_width(text_node)
if text_node then if text_node then
local text_metrics = gui.get_text_metrics_from_node(text_node) local text_metrics = M.get_text_metrics_from_node(text_node)
local text_scale = gui.get_scale(text_node).x local text_scale = gui.get_scale(text_node).x
return text_metrics.width * text_scale return text_metrics.width * text_scale
end end
@ -31,8 +33,14 @@ local function get_icon_width(icon_node)
end end
local function is_text_node(node)
return gui.get_text(node) ~= nil
end
--- Text node or icon node can be nil
local function get_width(node) local function get_width(node)
return gui.get_text(node) and get_text_width(node) or get_icon_width(node) return is_text_node(node) and get_text_width(node) or get_icon_width(node)
end end
@ -43,6 +51,7 @@ end
-- @tparam[opt] text text_node Gui text node -- @tparam[opt] text text_node Gui text node
-- @tparam[opt] box icon_node Gui box node -- @tparam[opt] box icon_node Gui box node
-- @tparam number margin Offset between nodes -- @tparam number margin Offset between nodes
-- @local
function M.centrate_text_with_icon(text_node, icon_node, margin) function M.centrate_text_with_icon(text_node, icon_node, margin)
M.centrate_nodes(margin, text_node, icon_node) M.centrate_nodes(margin, text_node, icon_node)
end end
@ -55,16 +64,19 @@ end
-- @tparam[opt] box icon_node Gui box node -- @tparam[opt] box icon_node Gui box node
-- @tparam[opt] text text_node Gui text node -- @tparam[opt] text text_node Gui text node
-- @tparam[opt=0] number margin Offset between nodes -- @tparam[opt=0] number margin Offset between nodes
-- @local
function M.centrate_icon_with_text(icon_node, text_node, margin) function M.centrate_icon_with_text(icon_node, text_node, margin)
M.centrate_nodes(margin, icon_node, text_node) M.centrate_nodes(margin, icon_node, text_node)
end end
--- Center several nodes nodes. --- Centerate nodes by x position with margin.
-- Nodes will be center around 0 x position --
-- This functions calculate total width of nodes and set position for each node.
-- The centrate will be around 0 x position.
-- @function helper.centrate_nodes -- @function helper.centrate_nodes
-- @tparam[opt=0] number margin Offset between nodes -- @tparam[opt=0] number margin Offset between nodes
-- @tparam[opt] Node ... Any count of gui Node -- @param ... Gui nodes
function M.centrate_nodes(margin, ...) function M.centrate_nodes(margin, ...)
margin = margin or 0 margin = margin or 0
@ -98,6 +110,10 @@ function M.centrate_nodes(margin, ...)
end end
--- Get current screen stretch multiplier for each side
-- @function helper.get_screen_aspect_koef
-- @treturn number stretch_x
-- @treturn number stretch_y
function M.get_screen_aspect_koef() function M.get_screen_aspect_koef()
local window_x, window_y = window.get_size() local window_x, window_y = window.get_size()
local stretch_x = window_x / gui.get_width() local stretch_x = window_x / gui.get_width()
@ -107,6 +123,23 @@ function M.get_screen_aspect_koef()
end end
--- Get current GUI scale for each side
-- @function helper.get_gui_scale
-- @treturn number scale_x
-- @treturn number scale_y
function M.get_gui_scale()
local window_x, window_y = window.get_size()
return math.min(window_x / gui.get_width(),
window_y / gui.get_height())
end
--- Move value from current to target value with step amount
-- @function helper.step
-- @tparam number current Current value
-- @tparam number target Target value
-- @tparam number step Step amount
-- @treturn number New value
function M.step(current, target, step) function M.step(current, target, step)
if current < target then if current < target then
return math.min(current + step, target) return math.min(current + step, target)
@ -116,6 +149,12 @@ function M.step(current, target, step)
end end
--- Clamp value between min and max
-- @function helper.clamp
-- @tparam number a Value
-- @tparam number min Min value
-- @tparam number max Max value
-- @treturn number Clamped value
function M.clamp(a, min, max) function M.clamp(a, min, max)
if min > max then if min > max then
min, max = max, min min, max = max, min
@ -131,11 +170,22 @@ function M.clamp(a, min, max)
end end
--- Calculate distance between two points
-- @function helper.distance
-- @tparam number x1 First point x
-- @tparam number y1 First point y
-- @tparam number x2 Second point x
-- @tparam number y2 Second point y
-- @treturn number Distance
function M.distance(x1, y1, x2, y2) function M.distance(x1, y1, x2, y2)
return math.sqrt((x2 - x1) ^ 2 + (y2 - y1) ^ 2) return math.sqrt((x2 - x1) ^ 2 + (y2 - y1) ^ 2)
end end
--- Return sign of value (-1, 0, 1)
-- @function helper.sign
-- @tparam number val Value
-- @treturn number Sign
function M.sign(val) function M.sign(val)
if val == 0 then if val == 0 then
return 0 return 0
@ -145,48 +195,129 @@ function M.sign(val)
end end
function M.round(num, numDecimalPlaces) --- Round number to specified decimal places
local mult = 10^(numDecimalPlaces or 0) -- @function helper.round
-- @tparam number num Number
-- @tparam[opt=0] number num_decimal_places Decimal places
-- @treturn number Rounded number
function M.round(num, num_decimal_places)
local mult = 10^(num_decimal_places or 0)
return math.floor(num * mult + 0.5) / mult return math.floor(num * mult + 0.5) / mult
end end
--- Lerp between two values
-- @function helper.lerp
-- @tparam number a First value
-- @tparam number b Second value
-- @tparam number t Lerp amount
-- @treturn number Lerped value
function M.lerp(a, b, t) function M.lerp(a, b, t)
return a + (b - a) * t return a + (b - a) * t
end end
--- Check if value is in array and return index of it
-- @function helper.contains
-- @tparam table t Array
-- @param value Value
-- @treturn number|nil Index of value or nil
function M.contains(t, value) function M.contains(t, value)
for i = 1, #t do for i = 1, #t do
if t[i] == value then if t[i] == value then
return i return i
end end
end end
return false return nil
end end
--- Check if node is enabled in gui hierarchy. --- Make a copy table with all nested tables
-- Return false, if node or any his parent is disabled -- @function helper.deepcopy
-- @function helper.is_enabled -- @tparam table orig_table Original table
-- @treturn table Copy of original table
function M.deepcopy(orig_table)
local orig_type = type(orig_table)
local copy
if orig_type == 'table' then
copy = {}
for orig_key, orig_value in next, orig_table, nil do
copy[M.deepcopy(orig_key)] = M.deepcopy(orig_value)
end
else -- number, string, boolean, etc
copy = orig_table
end
return copy
end
--- Add all elements from source array to the target array
-- @function helper.add_array
-- @tparam table target Array to put elements from source
-- @tparam[opt] table source The source array to get elements from
-- @treturn array The target array
function M.add_array(target, source)
assert(target)
if not source then
return target
end
for index = 1, #source do
table.insert(target, source[index])
end
return target
end
--- Make a check with gui.pick_node, but with additional node_click_area check.
-- @function helper.pick_node
-- @tparam Node node
-- @tparam number x
-- @tparam number y
-- @tparam[opt] Node node_click_area
-- @local
function M.pick_node(node, x, y, node_click_area)
local is_pick = gui.pick_node(node, x, y)
if node_click_area then
is_pick = is_pick and gui.pick_node(node_click_area, x, y)
end
return is_pick
end
--- Get node size adjusted by scale
-- @function helper.get_scaled_size
-- @tparam node node GUI node
-- @treturn vector3 Scaled size
function M.get_scaled_size(node)
return vmath.mul_per_elem(gui.get_size(node), gui.get_scale(node))
end
--- Get cumulative parent's node scale
-- @function helper.get_scene_scale
-- @tparam node node Gui node -- @tparam node node Gui node
-- @treturn bool Is enabled in hierarchy -- @tparam bool include_passed_node_scale True if add current node scale to result
function M.is_enabled(node) -- @treturn vector3 The scene node scale
local is_enabled = gui.is_enabled(node) function M.get_scene_scale(node, include_passed_node_scale)
local scale = include_passed_node_scale and gui.get_scale(node) or vmath.vector3(1)
local parent = gui.get_parent(node) local parent = gui.get_parent(node)
while parent and is_enabled do while parent do
is_enabled = is_enabled and gui.is_enabled(parent) scale = vmath.mul_per_elem(scale, gui.get_scale(parent))
parent = gui.get_parent(parent) parent = gui.get_parent(parent)
end end
return is_enabled return scale
end end
--- Return closest non inverted clipping parent node for node --- Return closest non inverted clipping parent node for given node
-- @function helper.get_closest_stencil_node -- @function helper.get_closest_stencil_node
-- @tparam node node Gui node -- @tparam node node GUI node
-- @treturn node|nil The clipping node -- @treturn node|nil The closest stencil node or nil
function M.get_closest_stencil_node(node) function M.get_closest_stencil_node(node)
if not node then if not node then
return nil return nil
@ -208,17 +339,20 @@ function M.get_closest_stencil_node(node)
end end
--- Get node offset for given gui pivot --- Get node offset for given GUI pivot.
--
-- Offset shown in [-0.5 .. 0.5] range, where -0.5 is left or bottom, 0.5 is right or top.
-- @function helper.get_pivot_offset -- @function helper.get_pivot_offset
-- @tparam gui.pivot pivot The node pivot -- @tparam gui.pivot pivot The node pivot
-- @treturn vector3 Vector offset with [-1..1] values -- @treturn vector3 Vector offset with [-0.5..0.5] values
function M.get_pivot_offset(pivot) function M.get_pivot_offset(pivot)
return const.PIVOTS[pivot] return const.PIVOTS[pivot]
end end
--- Check if device is mobile (Android or iOS) --- Check if device is native mobile (Android or iOS)
-- @function helper.is_mobile -- @function helper.is_mobile
-- @treturn bool Is mobile
function M.is_mobile() function M.is_mobile()
return const.CURRENT_SYSTEM_NAME == const.OS.IOS or return const.CURRENT_SYSTEM_NAME == const.OS.IOS or
const.CURRENT_SYSTEM_NAME == const.OS.ANDROID const.CURRENT_SYSTEM_NAME == const.OS.ANDROID
@ -227,17 +361,19 @@ end
--- Check if device is HTML5 --- Check if device is HTML5
-- @function helper.is_web -- @function helper.is_web
-- @treturn bool Is web
function M.is_web() function M.is_web()
return const.CURRENT_SYSTEM_NAME == const.OS.BROWSER return const.CURRENT_SYSTEM_NAME == const.OS.BROWSER
end end
--- Transform table to oneline string --- Simple table to one-line string converter
-- @function helper.table_to_string
-- @tparam table t -- @tparam table t
-- @treturn string -- @treturn string
function M.table_to_string(t) function M.table_to_string(t)
if not t then if not t then
return const.EMPTY_STRING return ""
end end
local result = "{" local result = "{"
@ -255,13 +391,13 @@ end
--- Distance from node position to his borders --- Distance from node position to his borders
-- @function helper.get_border -- @function helper.get_border
-- @tparam node node The gui node to check -- @tparam node node GUI node
-- @tparam vector3 offset The offset to add to result -- @tparam[opt] vector3 offset Offset from node position. Pass current node position to get non relative border values
-- @return vector4 Vector with distance to node border: (left, top, right, down) -- @treturn vector4 Vector4 with border values (left, top, right, down)
function M.get_border(node, offset) function M.get_border(node, offset)
local pivot = gui.get_pivot(node) local pivot = gui.get_pivot(node)
local pivot_offset = M.get_pivot_offset(pivot) local pivot_offset = M.get_pivot_offset(pivot)
local size = vmath.mul_per_elem(gui.get_size(node), gui.get_scale(node)) local size = M.get_scaled_size(node)
local border = vmath.vector4( local border = vmath.vector4(
-size.x*(0.5 + pivot_offset.x), -size.x*(0.5 + pivot_offset.x),
size.y*(0.5 - pivot_offset.y), size.y*(0.5 - pivot_offset.y),
@ -280,9 +416,102 @@ function M.get_border(node, offset)
end end
--- Get text metric from GUI node.
-- @function helper.get_text_metrics_from_node
-- @tparam Node text_node
-- @treturn GUITextMetrics
-- @usage
-- type GUITextMetrics = {
-- width: number,
-- height: number,
-- max_ascent: number,
-- max_descent: number
-- }
function M.get_text_metrics_from_node(text_node)
local font_resource = gui.get_font_resource(gui.get_font(text_node))
local options = {
tracking = gui.get_tracking(text_node),
line_break = gui.get_line_break(text_node),
}
-- Gather other options only if it used in node
if options.line_break then
options.width = gui.get_size(text_node).x
options.leading = gui.get_leading(text_node)
end
return resource.get_text_metrics(font_resource, gui.get_text(text_node), options)
end
--- Add value to array with shift policy
--
-- Shift policy can be: left, right, no_shift
-- @function helper.insert_with_shift
-- @tparam table array Array
-- @param item Item to insert
-- @tparam[opt] number index Index to insert. If nil, item will be inserted at the end of array
-- @tparam[opt] const.SHIFT shift_policy Shift policy
-- @treturn item Inserted item
function M.insert_with_shift(array, item, index, shift_policy)
shift_policy = shift_policy or const.SHIFT.RIGHT
local len = #array
index = index or len + 1
if array[index] and shift_policy ~= const.SHIFT.NO_SHIFT then
local check_index = index
local next_element = array[check_index]
while next_element or (check_index >= 1 and check_index <= len) do
check_index = check_index + shift_policy
local check_element = array[check_index]
array[check_index] = next_element
next_element = check_element
end
end
array[index] = item
return item
end
--- Remove value from array with shift policy
--
-- Shift policy can be: left, right, no_shift
-- @function helper.remove_with_shift
-- @tparam table array Array
-- @tparam[opt] number index Index to remove. If nil, item will be removed from the end of array
-- @tparam[opt] const.SHIFT shift_policy Shift policy
-- @treturn item Removed item
function M.remove_with_shift(array, index, shift_policy)
shift_policy = shift_policy or const.SHIFT.RIGHT
local len = #array
index = index or len
local item = array[index]
array[index] = nil
if shift_policy ~= const.SHIFT.NO_SHIFT then
local check_index = index + shift_policy
local next_element = array[check_index]
while next_element or (check_index >= 0 and check_index <= len + 1) do
array[check_index - shift_policy] = next_element
array[check_index] = nil
check_index = check_index + shift_policy
next_element = array[check_index]
end
end
return item
end
--- Show deprecated message. Once time per message --- Show deprecated message. Once time per message
-- @function helper.deprecated -- @function helper.deprecated
-- @tparam string message The deprecated message -- @tparam string message The deprecated message
-- @local
local _deprecated_messages = {} local _deprecated_messages = {}
function M.deprecated(message) function M.deprecated(message)
if _deprecated_messages[message] then if _deprecated_messages[message] then
@ -294,11 +523,14 @@ function M.deprecated(message)
end end
-- Show message to require extended component --- Show message to require component
function M.extended_component(component_name) -- @local
print(string.format("[Druid]: The component %s is extended component. You have to register it via druid.register to use it", component_name)) function M.require_component_message(component_name, component_type)
component_type = component_type or "extended"
print(string.format("[Druid]: The component %s is %s component. You have to register it via druid.register to use it", component_name, component_type))
print("[Druid]: Use next code:") print("[Druid]: Use next code:")
print(string.format('local %s = require("druid.extended.%s")', component_name, component_name)) print(string.format('local %s = require("druid.%s.%s")', component_name, component_type, component_name))
print(string.format('druid.register("%s", %s)', component_name, component_name)) print(string.format('druid.register("%s", %s)', component_name, component_name))
end end

24
druid/helper/druid_input.lua
View File

@ -1,24 +0,0 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Druid inner module to acquire/release input
-- @module helper.input
-- @local
local M = {}
local ADD_FOCUS = hash("acquire_input_focus")
local REMOVE_FOCUS = hash("release_input_focus")
local PATH_OBJ = "."
function M.focus()
msg.post(PATH_OBJ, ADD_FOCUS)
end
function M.remove()
msg.post(PATH_OBJ, REMOVE_FOCUS)
end
return M

47
druid/helper/formats.lua
View File

@ -1,47 +0,0 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Druid module with utils on string formats
-- @local
-- @module helper.formats
local const = require("druid.const")
local M = {}
--- Return number with zero number prefix
-- @function formats.add_prefix_zeros
-- @tparam number num Number for conversion
-- @tparam number count Count of numerals
-- @return string with need count of zero (1,3) -> 001
function M.add_prefix_zeros(num, count)
local result = tostring(num)
for i = string.len(result), count - 1 do
result = const.ZERO .. result
end
return result
end
--- Convert seconds to string minutes:seconds
-- @function formats.second_string_min
-- @tparam number sec Seconds
-- @return string minutes:seconds
function M.second_string_min(sec)
local mins = math.floor(sec / 60)
local seconds = math.floor(sec - mins * 60)
return string.format("%.2d:%.2d", mins, seconds)
end
--- Interpolate string with named Parameters in Table
-- @function formats.second_string_min
-- @tparam string s Target string
-- @tparam table tab Table with parameters
-- @return string with replaced parameters
function M.interpolate_string(s, tab)
return (s:gsub('($%b{})', function(w) return tab[w:sub(3, -2)] or w end))
end
return M

40
druid/styles/default/anims.lua
View File

@ -1,40 +0,0 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
local M = {}
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.10
gui.animate(node, gui.PROP_SCALE, to, easing, time, delay,
function()
if callback then
callback(self, node)
end
end
)
end
function M.back_scale_animation(self, node, target_scale)
scale_to(self, node, target_scale)
end
function M.tap_scale_animation(self, node, target_scale)
scale_to(self, node, target_scale,
function()
M.back_scale_animation(self, node, self.start_scale)
end
)
end
function M.hover_scale(self, target, time)
gui.animate(self.anim_node, "scale", target, gui.EASING_OUTSINE, time)
end
return M

39
druid/styles/default/style.lua
View File

@ -2,11 +2,20 @@
local const = require("druid.const") local const = require("druid.const")
local settings = require("druid.system.settings") local settings = require("druid.system.settings")
local anims = require("druid.styles.default.anims")
local M = {} local M = {}
local function button_hover_scale(node, target, time)
gui.animate(node, "scale", target, gui.EASING_OUTSINE, time)
end
local function button_tap_anim(node, tap_scale, start_scale)
gui.animate(node, gui.PROP_SCALE, tap_scale, gui.EASING_INSINE, 0.1, 0, function()
gui.animate(node, gui.PROP_SCALE, start_scale, gui.EASING_INSINE, 0.1)
end)
end
M["button"] = { M["button"] = {
HOVER_SCALE = vmath.vector3(0.02, 0.02, 1), HOVER_SCALE = vmath.vector3(0.02, 0.02, 1),
HOVER_MOUSE_SCALE = vmath.vector3(0.01, 0.01, 1), HOVER_MOUSE_SCALE = vmath.vector3(0.01, 0.01, 1),
@ -24,19 +33,19 @@ M["button"] = {
local scale_to = self.start_scale + M.button.HOVER_SCALE local scale_to = self.start_scale + M.button.HOVER_SCALE
local target_scale = state and scale_to or self.start_scale local target_scale = state and scale_to or self.start_scale
anims.hover_scale(self, target_scale, M.button.HOVER_TIME) button_hover_scale(node, target_scale, M.button.HOVER_TIME)
end, end,
on_mouse_hover = function(self, node, state) on_mouse_hover = function(self, node, state)
local scale_to = self.start_scale + M.button.HOVER_MOUSE_SCALE local scale_to = self.start_scale + M.button.HOVER_MOUSE_SCALE
local target_scale = state and scale_to or self.start_scale local target_scale = state and scale_to or self.start_scale
anims.hover_scale(self, target_scale, M.button.HOVER_TIME) button_hover_scale(node, target_scale, M.button.HOVER_TIME)
end, end,
on_click = function(self, node) on_click = function(self, node)
local scale_to = self.start_scale + M.button.SCALE_CHANGE local scale_to = self.start_scale + M.button.SCALE_CHANGE
anims.tap_scale_animation(self, node, scale_to) button_tap_anim(node, scale_to, self.start_scale)
settings.play_sound(M.button.BTN_SOUND) settings.play_sound(M.button.BTN_SOUND)
end, end,
@ -56,6 +65,7 @@ M["button"] = {
M["drag"] = { M["drag"] = {
DRAG_DEADZONE = 10, -- Size in pixels of drag deadzone DRAG_DEADZONE = 10, -- Size in pixels of drag deadzone
NO_USE_SCREEN_KOEF = false,
} }
@ -113,6 +123,7 @@ M["input"] = {
BUTTON_SELECT_INCREASE = 1.06, BUTTON_SELECT_INCREASE = 1.06,
MASK_DEFAULT_CHAR = "*", MASK_DEFAULT_CHAR = "*",
IS_UNSELECT_ON_RESELECT = false, IS_UNSELECT_ON_RESELECT = false,
NO_CONSUME_INPUT_WHILE_SELECTED = false,
on_select = function(self, button_node) on_select = function(self, button_node)
local target_scale = self.button.start_scale local target_scale = self.button.start_scale
@ -148,7 +159,25 @@ M["text"] = {
M["hotkey"] = { M["hotkey"] = {
MODIFICATORS = { "key_lshift", "key_rshift", "key_lctrl", "key_rctrl", "key_lalt", "key_ralt", "key_lsuper", "key_rsuper" }, -- Add key ids to mark it as modificator keys -- Add key ids to mark it as modificator keys
MODIFICATORS = {
"key_lshift",
"key_rshift",
"key_lctrl",
"key_rctrl",
"key_lalt",
"key_ralt",
"key_lsuper",
"key_rsuper"
}
}
M["rich_text"] = {
COLORS = {
white = "#FFFFFF",
black = "#000000"
}
} }

3
druid/styles/empty/style.lua
View File

@ -1,3 +0,0 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
return {}

459
druid/system/druid_instance.lua
View File

@ -1,91 +1,131 @@
-- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
--- Instance of Druid. Make one instance per gui_script with next code: --- Druid Instance which you use for component creation.
-- --
-- local druid = require("druid.druid") -- # Component List #
-- function init(self) --
-- self.druid = druid.new(self) -- For a list of all available components, please refer to the "See Also" section.
-- local button = self.druid:new_button(...) --
-- end -- <b># Notes #</b>
--
-- Please review the following API pages:
--
-- @{Helper} - A useful set of functions for working with GUI nodes, such as centering nodes, get GUI scale ratio, etc
--
-- @{DruidEvent} - The core event system in Druid. Learn how to subscribe to any event in every Druid component.
--
-- @{BaseComponent} - The parent class of all Druid components. You can find all default component methods there.
--
-- # Tech Info #
--
-- • To use Druid, you need to create a Druid instance first. This instance is used to spawn components.
--
-- • When using Druid components, provide the node name as a string argument directly. Avoid calling gui.get_node() before passing it to the component. Because Druid can get nodes from template and cloned gui nodes.
--
-- • All Druid and component methods are called using the colon operator (e.g., self.druid:new_button()).
-- @usage
-- local druid = require("druid.druid")
--
-- local function close_window(self)
-- print("Yeah! You closed the game!")
-- end
--
-- function init(self)
-- self.druid = druid.new(self)
--
-- -- Call all druid instance function with ":" syntax:
-- local text = self.druid:new_text("text_header", "Hello Druid!")
-- local button = self.druid:new_button("button_close", close_window)
--
-- -- You not need to save component reference if not need it
-- self.druid:new_back_handler(close_window)
-- end
-- --
-- Learn Druid instance function here
-- @module DruidInstance -- @module DruidInstance
-- @alias druid_instance -- @alias druid_instance
-- @see Button
-- @see Blocker
-- @see BackHandler -- @see BackHandler
-- @see Input -- @see Blocker
-- @see Text -- @see Button
-- @see LangText
-- @see Timer
-- @see Progress
-- @see StaticGrid
-- @see DynamicGrid
-- @see Scroll
-- @see Slider
-- @see Checkbox -- @see Checkbox
-- @see CheckboxGroup -- @see CheckboxGroup
-- @see RadioGroup
-- @see Swipe
-- @see Drag
-- @see DataList -- @see DataList
-- @see Hover -- @see Drag
-- @see Layout -- @see DynamicGrid
-- @see Hotkey -- @see Hotkey
-- @see Hover
-- @see Input
-- @see LangText
-- @see Layout
-- @see Progress
-- @see RadioGroup
-- @see RichInput
-- @see RichText
-- @see Scroll
-- @see Slider
-- @see StaticGrid
-- @see Swipe
-- @see Text
-- @see Timer
local helper = require("druid.helper") local helper = require("druid.helper")
local class = require("druid.system.middleclass") local class = require("druid.system.middleclass")
local settings = require("druid.system.settings") local settings = require("druid.system.settings")
local base_component = require("druid.component") local base_component = require("druid.component")
local druid_input = require("druid.helper.druid_input")
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 drag = require("druid.base.drag")
local text = require("druid.base.text")
local hover = require("druid.base.hover") local hover = require("druid.base.hover")
local scroll = require("druid.base.scroll") local scroll = require("druid.base.scroll")
local button = require("druid.base.button")
local blocker = require("druid.base.blocker")
local static_grid = require("druid.base.static_grid") local static_grid = require("druid.base.static_grid")
local swipe = require("druid.base.swipe") local back_handler = require("druid.base.back_handler")
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_component = require("druid.extended.timer")
local data_list = require("druid.extended.data_list")
-- To use this components, you should register them first
-- local input = require("druid.extended.input")
-- local swipe = require("druid.extended.swipe")
-- local slider = require("druid.extended.slider")
-- local checkbox = require("druid.extended.checkbox")
-- local progress = require("druid.extended.progress")
-- local data_list = require("druid.extended.data_list")
-- local lang_text = require("druid.extended.lang_text")
-- local timer_component = require("druid.extended.timer")
-- local radio_group = require("druid.extended.radio_group")
-- local dynamic_grid = require("druid.extended.dynamic_grid")
-- local checkbox_group = require("druid.extended.checkbox_group")
local DruidInstance = class("druid.druid_instance") local DruidInstance = class("druid.druid_instance")
local IS_NO_AUTO_INPUT = sys.get_config("druid.no_auto_input") == "1" local PATH_OBJ = "."
local MSG_ADD_FOCUS = hash("acquire_input_focus")
local MSG_REMOVE_FOCUS = hash("release_input_focus")
local IS_NO_AUTO_INPUT = sys.get_config_int("druid.no_auto_input", 0) == 1
local function input_init(self) local function set_input_state(self, is_input_inited)
if IS_NO_AUTO_INPUT then if IS_NO_AUTO_INPUT or (self.input_inited == is_input_inited) then
return return
end end
if not self.input_inited then self.input_inited = is_input_inited
self.input_inited = true if is_input_inited then
druid_input.focus() msg.post(PATH_OBJ, MSG_ADD_FOCUS)
else
msg.post(PATH_OBJ, MSG_REMOVE_FOCUS)
end end
end end
local function input_release(self) -- The a and b - two Druid components
if IS_NO_AUTO_INPUT then -- @local
return local function sort_input_comparator(a, b)
local a_priority = a:get_input_priority()
local b_priority = b:get_input_priority()
if a_priority ~= b_priority then
return a_priority < b_priority
end end
if self.input_inited then return a:get_uid() < b:get_uid()
self.input_inited = false
druid_input.remove()
end
end end
@ -95,17 +135,11 @@ local function sort_input_stack(self)
return return
end end
table.sort(input_components, function(a, b) table.sort(input_components, sort_input_comparator)
if a:get_input_priority() ~= b:get_input_priority() then
return a:get_input_priority() < b:get_input_priority()
end
return a:get_uid() < b:get_uid()
end)
end end
-- Create the component itself -- Create the Druid component instance
local function create(self, instance_class) local function create(self, instance_class)
local instance = instance_class() local instance = instance_class()
instance:setup_component(self, self._context, self._style, instance_class) instance:setup_component(self, self._context, self._style, instance_class)
@ -122,6 +156,7 @@ local function create(self, instance_class)
end end
-- Before processing any input check if we need to update input stack
local function check_sort_input_stack(self, components) local function check_sort_input_stack(self, components)
if not components or #components == 0 then if not components or #components == 0 then
return return
@ -149,19 +184,11 @@ local function can_use_input_component(self, component)
local can_by_blacklist = true local can_by_blacklist = true
if self._input_whitelist and #self._input_whitelist > 0 then if self._input_whitelist and #self._input_whitelist > 0 then
if helper.contains(self._input_whitelist, component) then can_by_whitelist = not not helper.contains(self._input_whitelist, component)
can_by_whitelist = true
else
can_by_whitelist = false
end
end end
if self._input_blacklist and #self._input_blacklist > 0 then if self._input_blacklist and #self._input_blacklist > 0 then
if helper.contains(self._input_blacklist, component) then can_by_blacklist = not helper.contains(self._input_blacklist, component)
can_by_blacklist = false
else
can_by_blacklist = true
end
end end
return can_by_blacklist and can_by_whitelist return can_by_blacklist and can_by_whitelist
@ -172,7 +199,7 @@ local function process_input(self, action_id, action, components)
local is_input_consumed = false local is_input_consumed = false
if #components == 0 then if #components == 0 then
return is_input_consumed return false
end end
for i = #components, 1, -1 do for i = #components, 1, -1 do
@ -193,10 +220,22 @@ local function process_input(self, action_id, action, components)
end end
local function schedule_late_init(self)
if self._late_init_timer_id then
return
end
self._late_init_timer_id = timer.delay(0, false, function()
self._late_init_timer_id = nil
self:late_init()
end)
end
--- Druid class constructor --- Druid class constructor
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam table context Druid context. Usually it is self of script -- @tparam table context Druid context. Usually it is self of gui script
-- @tparam table style Druid style module -- @tparam table style Druid style table
-- @local -- @local
function DruidInstance.initialize(self, context, style) function DruidInstance.initialize(self, context, style)
self._context = context self._context = context
@ -210,31 +249,15 @@ function DruidInstance.initialize(self, context, style)
self._input_blacklist = nil self._input_blacklist = nil
self._input_whitelist = nil self._input_whitelist = nil
self.components_interest = {}
self.components_all = {} self.components_all = {}
self.components_interest = {}
for i = 1, #base_component.ALL_INTERESTS do for i = 1, #base_component.ALL_INTERESTS do
self.components_interest[base_component.ALL_INTERESTS[i]] = {} self.components_interest[base_component.ALL_INTERESTS[i]] = {}
end end
timer.delay(0, false, function()
self:late_init()
end)
end end
--- Create new druid component --- Create new component.
-- @tparam DruidInstance self
-- @tparam Component component Component module
-- @tparam args ... Other component params to pass it to component:init function
-- @local
function DruidInstance.create(self, component, ...)
helper.deprecated("The druid:create is deprecated. Please use druid:new instead")
return DruidInstance.new(self, component, ...)
end
--- Create new druid component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam Component component Component module -- @tparam Component component Component module
-- @tparam args ... Other component params to pass it to component:init function -- @tparam args ... Other component params to pass it to component:init function
@ -244,13 +267,15 @@ function DruidInstance.new(self, component, ...)
if instance.init then if instance.init then
instance:init(...) instance:init(...)
end end
if instance.on_late_init or (not self.input_inited and instance.on_input) then
schedule_late_init(self)
end
return instance return instance
end end
--- Call on final function on gui_script. It will call on_remove --- Call this in gui_script final function.
-- on all druid components
-- @tparam DruidInstance self -- @tparam DruidInstance self
function DruidInstance.final(self) function DruidInstance.final(self)
local components = self.components_all local components = self.components_all
@ -263,13 +288,12 @@ function DruidInstance.final(self)
self._deleted = true self._deleted = true
input_release(self) set_input_state(self, false)
self:log_message("Druid final")
end end
--- Remove component from druid instance. --- Remove created component from Druid instance.
--
-- Component `on_remove` function will be invoked, if exist. -- Component `on_remove` function will be invoked, if exist.
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam Component component Component instance -- @tparam Component component Component instance
@ -287,8 +311,8 @@ function DruidInstance.remove(self, component)
if parent then if parent then
parent:__remove_children(children[i]) parent:__remove_children(children[i])
end end
children[i] = nil
end end
component._meta.children = {}
local all_components = self.components_all local all_components = self.components_all
for i = #all_components, 1, -1 do for i = #all_components, 1, -1 do
@ -310,13 +334,14 @@ function DruidInstance.remove(self, component)
end end
end end
end end
self:log_message("Remove", { name = component:get_name(), parent = component:get_parent_name() })
end end
--- Druid late update function call after init and before udpate step --- Druid late update function called after initialization and before the regular update step
-- This function is used to check the GUI state and perform actions after all components and nodes have been created.
-- An example use case is performing an auto stencil check in the GUI hierarchy for input components.
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @local
function DruidInstance.late_init(self) function DruidInstance.late_init(self)
local late_init_components = self.components_interest[base_component.ON_LATE_INIT] local late_init_components = self.components_interest[base_component.ON_LATE_INIT]
while late_init_components[1] do while late_init_components[1] do
@ -326,27 +351,32 @@ function DruidInstance.late_init(self)
if not self.input_inited and #self.components_interest[base_component.ON_INPUT] > 0 then if not self.input_inited and #self.components_interest[base_component.ON_INPUT] > 0 then
-- Input init on late init step, to be sure it goes after user go acquire input -- Input init on late init step, to be sure it goes after user go acquire input
input_init(self) set_input_state(self, true)
end end
end end
--- Druid update function --- Call this in gui_script update function.
--
-- Used for: scroll, progress, timer components
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam number dt Delta time -- @tparam number dt Delta time
function DruidInstance.update(self, dt) function DruidInstance.update(self, dt)
self._is_late_remove_enabled = true self._is_late_remove_enabled = true
local components = self.components_interest[base_component.ON_UPDATE] local components = self.components_interest[base_component.ON_UPDATE]
for i = 1, #components do for i = 1, #components do
components[i]:update(dt) components[i]:update(dt)
end end
self._is_late_remove_enabled = false
self._is_late_remove_enabled = false
self:_clear_late_remove() self:_clear_late_remove()
end end
--- Druid on_input function --- Call this in gui_script on_input function.
--
-- Used for almost all components
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam hash action_id Action_id from on_input -- @tparam hash action_id Action_id from on_input
-- @tparam table action Action from on_input -- @tparam table action Action from on_input
@ -359,23 +389,24 @@ function DruidInstance.on_input(self, action_id, action)
local is_input_consumed = process_input(self, action_id, action, components) local is_input_consumed = process_input(self, action_id, action, components)
self._is_late_remove_enabled = false self._is_late_remove_enabled = false
self:_clear_late_remove() self:_clear_late_remove()
return is_input_consumed return is_input_consumed
end end
--- Druid on_message function --- Call this in gui_script on_message function.
--
-- Used for special actions. See SPECIFIC_UI_MESSAGES table
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam hash message_id Message_id from on_message -- @tparam hash message_id Message_id from on_message
-- @tparam table message Message from on_message -- @tparam table message Message from on_message
-- @tparam hash sender Sender from on_message -- @tparam hash sender Sender from on_message
function DruidInstance.on_message(self, message_id, message, sender) function DruidInstance.on_message(self, message_id, message, sender)
-- TODO: refactor for more juicy code
local specific_ui_message = base_component.SPECIFIC_UI_MESSAGES[message_id] local specific_ui_message = base_component.SPECIFIC_UI_MESSAGES[message_id]
local on_message_input_message = base_component.ON_MESSAGE_INPUT
if specific_ui_message == on_message_input_message then if specific_ui_message == base_component.ON_MESSAGE_INPUT then
-- ON_MESSAGE_INPUT is special message, need to perform additional logic
local components = self.components_interest[base_component.ON_MESSAGE_INPUT] local components = self.components_interest[base_component.ON_MESSAGE_INPUT]
if components then if components then
for i = 1, #components do for i = 1, #components do
@ -386,6 +417,7 @@ function DruidInstance.on_message(self, message_id, message, sender)
end end
end end
elseif specific_ui_message then elseif specific_ui_message then
-- Resend special message to all components with the related interest
local components = self.components_interest[specific_ui_message] local components = self.components_interest[specific_ui_message]
if components then if components then
for i = 1, #components do for i = 1, #components do
@ -394,6 +426,7 @@ function DruidInstance.on_message(self, message_id, message, sender)
end end
end end
else else
-- Resend message to all components with on_message interest
local components = self.components_interest[base_component.ON_MESSAGE] local components = self.components_interest[base_component.ON_MESSAGE]
for i = 1, #components do for i = 1, #components do
components[i]:on_message(message_id, message, sender) components[i]:on_message(message_id, message, sender)
@ -402,7 +435,7 @@ function DruidInstance.on_message(self, message_id, message, sender)
end end
--- Druid on focus lost interest function. --- Calls the on_focus_lost function in all related components
-- This one called by on_window_callback by global window listener -- This one called by on_window_callback by global window listener
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @local -- @local
@ -411,12 +444,10 @@ function DruidInstance.on_focus_lost(self)
for i = 1, #components do for i = 1, #components do
components[i]:on_focus_lost() components[i]:on_focus_lost()
end end
self:log_message("On focus lost")
end end
--- Druid on focus gained interest function. --- Calls the on_focus_gained function in all related components
-- This one called by on_window_callback by global window listener -- This one called by on_window_callback by global window listener
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @local -- @local
@ -425,12 +456,10 @@ function DruidInstance.on_focus_gained(self)
for i = 1, #components do for i = 1, #components do
components[i]:on_focus_gained() components[i]:on_focus_gained()
end end
self:log_message("On focus gained")
end end
--- Druid on language change. --- Calls the on_language_change function in all related components
-- This one called by global druid.on_language_change, but can be -- This one called by global druid.on_language_change, but can be
-- call manualy to update all translations -- call manualy to update all translations
-- @tparam DruidInstance self -- @tparam DruidInstance self
@ -440,52 +469,50 @@ function DruidInstance.on_language_change(self)
for i = 1, #components do for i = 1, #components do
components[i]:on_language_change() components[i]:on_language_change()
end end
self:log_message("On language change")
end end
--- Set whitelist components for input processing. --- Set whitelist components for input processing.
--
-- If whitelist is not empty and component not contains in this list, -- If whitelist is not empty and component not contains in this list,
-- component will be not processed on input step -- component will be not processed on input step
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam[opt=nil] table|Component whitelist_components The array of component to whitelist -- @tparam[opt=nil] table|Component whitelist_components The array of component to whitelist
-- @treturn self @{DruidInstance}
function DruidInstance.set_whitelist(self, whitelist_components) function DruidInstance.set_whitelist(self, whitelist_components)
if whitelist_components and whitelist_components.isInstanceOf then if whitelist_components and whitelist_components.isInstanceOf then
whitelist_components = { whitelist_components } whitelist_components = { whitelist_components }
end end
for i = 1, #whitelist_components do for i = 1, #whitelist_components do
local component = whitelist_components[i] helper.add_array(whitelist_components, whitelist_components[i]:get_childrens())
local childrens = component:get_childrens()
for j = 1, #childrens do
table.insert(whitelist_components, childrens[j])
end
end end
self._input_whitelist = whitelist_components self._input_whitelist = whitelist_components
return self
end end
--- Set blacklist components for input processing. --- Set blacklist components for input processing.
--
-- If blacklist is not empty and component contains in this list, -- If blacklist is not empty and component contains in this list,
-- component will be not processed on input step -- component will be not processed on input step
-- @tparam DruidInstance self @{DruidInstance} -- @tparam DruidInstance self @{DruidInstance}
-- @tparam[opt=nil] table|Component blacklist_components The array of component to blacklist -- @tparam[opt=nil] table|Component blacklist_components The array of component to blacklist
-- @treturn self @{DruidInstance}
function DruidInstance.set_blacklist(self, blacklist_components) function DruidInstance.set_blacklist(self, blacklist_components)
if blacklist_components and blacklist_components.isInstanceOf then if blacklist_components and blacklist_components.isInstanceOf then
blacklist_components = { blacklist_components } blacklist_components = { blacklist_components }
end end
for i = 1, #blacklist_components do for i = 1, #blacklist_components do
local component = blacklist_components[i] helper.add_array(blacklist_components, blacklist_components[i]:get_childrens())
local childrens = component:get_childrens()
for j = 1, #childrens do
table.insert(blacklist_components, childrens[j])
end
end end
self._input_blacklist = blacklist_components self._input_blacklist = blacklist_components
return self
end end
@ -493,6 +520,7 @@ end
-- @tparam DruidInstance self @{DruidInstance} -- @tparam DruidInstance self @{DruidInstance}
-- @tparam bool is_debug -- @tparam bool is_debug
-- @treturn self @{DruidInstance} -- @treturn self @{DruidInstance}
-- @local
function DruidInstance.set_debug(self, is_debug) function DruidInstance.set_debug(self, is_debug)
self._is_debug = is_debug self._is_debug = is_debug
return self return self
@ -503,10 +531,12 @@ end
-- @tparam DruidInstance self @{DruidInstance} -- @tparam DruidInstance self @{DruidInstance}
-- @tparam string message -- @tparam string message
-- @tparam[opt] table context -- @tparam[opt] table context
-- @local
function DruidInstance.log_message(self, message, context) function DruidInstance.log_message(self, message, context)
if not self._is_debug then if not self._is_debug then
return return
end end
print("[Druid]:", message, helper.table_to_string(context)) print("[Druid]:", message, helper.table_to_string(context))
end end
@ -515,258 +545,263 @@ end
-- @tparam DruidInstance self @{DruidInstance} -- @tparam DruidInstance self @{DruidInstance}
-- @local -- @local
function DruidInstance._clear_late_remove(self) function DruidInstance._clear_late_remove(self)
if #self._late_remove > 0 then if #self._late_remove == 0 then
for i = 1, #self._late_remove do return
self:remove(self._late_remove[i])
end
self._late_remove = {}
end end
for i = 1, #self._late_remove do
self:remove(self._late_remove[i])
end
self._late_remove = {}
end end
--- Create button basic component
--- Create @{Button} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node node Gui node -- @tparam node node GUI node
-- @tparam function callback Button callback -- @tparam function callback Button callback
-- @tparam[opt] table params Button callback params -- @tparam[opt] table params Button callback params
-- @tparam[opt] node anim_node Button anim node (node, if not provided) -- @tparam[opt] node anim_node Button anim node (node, if not provided)
-- @treturn Button button component -- @treturn Button @{Button} component
function DruidInstance.new_button(self, node, callback, params, anim_node) function DruidInstance.new_button(self, node, callback, params, anim_node)
return DruidInstance.new(self, button, node, callback, params, anim_node) return DruidInstance.new(self, button, node, callback, params, anim_node)
end end
--- Create blocker basic component --- Create @{Blocker} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node node Gui node -- @tparam node node Gui node
-- @treturn Blocker blocker component -- @treturn Blocker @{Blocker} component
function DruidInstance.new_blocker(self, node) function DruidInstance.new_blocker(self, node)
return DruidInstance.new(self, blocker, node) return DruidInstance.new(self, blocker, node)
end end
--- Create back_handler basic component --- Create @{BackHandler} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam callback callback On back button -- @tparam callback callback On back button
-- @tparam[opt] any params Callback argument -- @tparam[opt] any params Callback argument
-- @treturn BackHandler back_handler component -- @treturn BackHandler @{BackHandler} component
function DruidInstance.new_back_handler(self, callback, params) function DruidInstance.new_back_handler(self, callback, params)
return DruidInstance.new(self, back_handler, callback, params) return DruidInstance.new(self, back_handler, callback, params)
end end
--- Create hover basic component --- Create @{Hover} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node node Gui node -- @tparam node node Gui node
-- @tparam function on_hover_callback Hover callback -- @tparam function on_hover_callback Hover callback
-- @treturn Hover hover component -- @treturn Hover @{Hover} component
function DruidInstance.new_hover(self, node, on_hover_callback) function DruidInstance.new_hover(self, node, on_hover_callback)
return DruidInstance.new(self, hover, node, on_hover_callback) return DruidInstance.new(self, hover, node, on_hover_callback)
end end
--- Create text basic component --- Create @{Text} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node node Gui text node -- @tparam node node Gui text node
-- @tparam[opt] string value Initial text. Default value is node text from GUI scene. -- @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 -- @tparam[opt] bool no_adjust If true, text will be not auto-adjust size
-- @treturn Tet text component -- @treturn Text @{Text} component
function DruidInstance.new_text(self, node, value, no_adjust) function DruidInstance.new_text(self, node, value, no_adjust)
return DruidInstance.new(self, text, node, value, no_adjust) return DruidInstance.new(self, text, node, value, no_adjust)
end end
--- Create grid basic component --- Create @{StaticGrid} component
-- Deprecated -- Deprecated
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node parent The gui node parent, where items will be placed -- @tparam node parent The gui node parent, where items will be placed
-- @tparam node element Element prefab. Need to get it size -- @tparam node element Element prefab. Need to get it size
-- @tparam[opt=1] number in_row How many nodes in row can be placed -- @tparam[opt=1] number in_row How many nodes in row can be placed
-- @treturn StaticGrid grid component -- @treturn StaticGrid @{StaticGrid} component
-- @local
function DruidInstance.new_grid(self, parent, element, in_row) function DruidInstance.new_grid(self, parent, element, in_row)
helper.deprecated("The druid:new_grid is deprecated. Please use druid:new_static_grid instead") helper.deprecated("The druid:new_grid is deprecated. Please use druid:new_static_grid instead")
return DruidInstance.new(self, static_grid, parent, element, in_row) return DruidInstance.new(self, static_grid, parent, element, in_row)
end end
--- Create static grid basic component --- Create @{StaticGrid} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node parent The gui node parent, where items will be placed -- @tparam node parent The gui node parent, where items will be placed
-- @tparam node element Element prefab. Need to get it size -- @tparam node element Element prefab. Need to get it size
-- @tparam[opt=1] number in_row How many nodes in row can be placed -- @tparam[opt=1] number in_row How many nodes in row can be placed
-- @treturn StaticGrid grid component -- @treturn StaticGrid @{StaticGrid} component
function DruidInstance.new_static_grid(self, parent, element, in_row) function DruidInstance.new_static_grid(self, parent, element, in_row)
return DruidInstance.new(self, static_grid, parent, element, in_row) return DruidInstance.new(self, static_grid, parent, element, in_row)
end end
--- Create scroll basic component --- Create @{Scroll} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node view_node GUI view scroll node -- @tparam node view_node GUI view scroll node
-- @tparam node content_node GUI content scroll node -- @tparam node content_node GUI content scroll node
-- @treturn Scroll scroll component -- @treturn Scroll @{Scroll} component
function DruidInstance.new_scroll(self, view_node, content_node) function DruidInstance.new_scroll(self, view_node, content_node)
return DruidInstance.new(self, scroll, view_node, content_node) return DruidInstance.new(self, scroll, view_node, content_node)
end end
--- Create swipe basic component --- Create @{Drag} component
-- @tparam DruidInstance self
-- @tparam node node Gui node
-- @tparam function on_swipe_callback Swipe callback for on_swipe_end event
-- @treturn Swipe swipe component
function DruidInstance.new_swipe(self, node, on_swipe_callback)
return DruidInstance.new(self, swipe, node, on_swipe_callback)
end
--- Create drag basic component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node node GUI node to detect dragging -- @tparam node node GUI node to detect dragging
-- @tparam function on_drag_callback Callback for on_drag_event(self, dx, dy) -- @tparam function on_drag_callback Callback for on_drag_event(self, dx, dy)
-- @treturn Drag drag component -- @treturn Drag @{Drag} component
function DruidInstance.new_drag(self, node, on_drag_callback) function DruidInstance.new_drag(self, node, on_drag_callback)
return DruidInstance.new(self, drag, node, on_drag_callback) return DruidInstance.new(self, drag, node, on_drag_callback)
end end
--- Create dynamic grid component --- Create @{Swipe} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node parent The gui node parent, where items will be placed -- @tparam node node Gui node
-- @treturn DynamicGrid grid component -- @tparam function on_swipe_callback Swipe callback for on_swipe_end event
function DruidInstance.new_dynamic_grid(self, parent) -- @treturn Swipe @{Swipe} component
-- return helper.extended_component("dynamic_grid") function DruidInstance.new_swipe(self, node, on_swipe_callback)
return DruidInstance.new(self, dynamic_grid, parent) return helper.require_component_message("swipe")
end end
--- Create lang_text component --- Create @{DynamicGrid} component
-- @tparam DruidInstance self
-- @tparam node parent The gui node parent, where items will be placed
-- @treturn DynamicGrid @{DynamicGrid} component
function DruidInstance.new_dynamic_grid(self, parent)
return helper.require_component_message("dynamic_grid")
end
--- Create @{LangText} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node node The text node -- @tparam node node The text node
-- @tparam string locale_id Default locale id -- @tparam string locale_id Default locale id
-- @tparam bool no_adjust If true, will not correct text size -- @tparam bool no_adjust If true, will not correct text size
-- @treturn LangText lang_text component -- @treturn LangText @{LangText} component
function DruidInstance.new_lang_text(self, node, locale_id, no_adjust) function DruidInstance.new_lang_text(self, node, locale_id, no_adjust)
-- return helper.extended_component("lang_text") return helper.require_component_message("lang_text")
return DruidInstance.new(self, lang_text, node, locale_id, no_adjust)
end end
--- Create slider component --- Create @{Slider} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node node Gui pin node -- @tparam node node Gui pin node
-- @tparam vector3 end_pos The end position of slider -- @tparam vector3 end_pos The end position of slider
-- @tparam[opt] function callback On slider change callback -- @tparam[opt] function callback On slider change callback
-- @treturn Slider slider component -- @treturn Slider @{Slider} component
function DruidInstance.new_slider(self, node, end_pos, callback) function DruidInstance.new_slider(self, node, end_pos, callback)
-- return helper.extended_component("slider") return helper.require_component_message("slider")
return DruidInstance.new(self, slider, node, end_pos, callback)
end end
--- Create checkbox component --- Create @{Checkbox} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node node Gui node -- @tparam node node Gui node
-- @tparam function callback Checkbox callback -- @tparam function callback Checkbox callback
-- @tparam[opt=node] node click_node Trigger node, by default equals to node -- @tparam[opt=node] node click_node Trigger node, by default equals to node
-- @tparam[opt=false] boolean initial_state The initial state of checkbox, default - false -- @tparam[opt=false] boolean initial_state The initial state of checkbox, default - false
-- @treturn Checkbox checkbox component -- @treturn Checkbox @{Checkbox} component
function DruidInstance.new_checkbox(self, node, callback, click_node, initial_state) function DruidInstance.new_checkbox(self, node, callback, click_node, initial_state)
-- return helper.extended_component("checkbox") return helper.require_component_message("checkbox")
return DruidInstance.new(self, checkbox, node, callback, click_node, initial_state)
end end
--- Create input component --- Create @{Input} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node click_node Button node to enabled input component -- @tparam node click_node Button node to enabled input component
-- @tparam node text_node Text node what will be changed on user input -- @tparam node text_node Text node what will be changed on user input
-- @tparam[opt] number keyboard_type Gui keyboard type for input field -- @tparam[opt] number keyboard_type Gui keyboard type for input field
-- @treturn Input input component -- @treturn Input @{Input} component
function DruidInstance.new_input(self, click_node, text_node, keyboard_type) function DruidInstance.new_input(self, click_node, text_node, keyboard_type)
-- return helper.extended_component("input") return helper.require_component_message("input")
return DruidInstance.new(self, input, click_node, text_node, keyboard_type)
end end
--- Create checkbox_group component --- Create @{CheckboxGroup} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node[] nodes Array of gui node -- @tparam node[] nodes Array of gui node
-- @tparam function callback Checkbox callback -- @tparam function callback Checkbox callback
-- @tparam[opt=node] node[] click_nodes Array of trigger nodes, by default equals to nodes -- @tparam[opt=node] node[] click_nodes Array of trigger nodes, by default equals to nodes
-- @treturn CheckboxGroup checkbox_group component -- @treturn CheckboxGroup @{CheckboxGroup} component
function DruidInstance.new_checkbox_group(self, nodes, callback, click_nodes) function DruidInstance.new_checkbox_group(self, nodes, callback, click_nodes)
-- return helper.extended_component("checkbox_group") return helper.require_component_message("checkbox_group")
return DruidInstance.new(self, checkbox_group, nodes, callback, click_nodes)
end end
--- Create data list basic component --- Create @{DataList} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam Scroll druid_scroll The Scroll instance for Data List component -- @tparam Scroll druid_scroll The Scroll instance for Data List component
-- @tparam Grid druid_grid The Grid instance for Data List component -- @tparam Grid druid_grid The Grid instance for Data List component
-- @tparam function create_function The create function callback(self, data, index, data_list). Function should return (node, [component]) -- @tparam function create_function The create function callback(self, data, index, data_list). Function should return (node, [component])
-- @treturn DataList data_list component -- @treturn DataList @{DataList} component
function DruidInstance.new_data_list(self, druid_scroll, druid_grid, create_function) function DruidInstance.new_data_list(self, druid_scroll, druid_grid, create_function)
-- return helper.extended_component("data_list") return helper.require_component_message("data_list")
return DruidInstance.new(self, data_list, druid_scroll, druid_grid, create_function)
end end
--- Create radio_group component --- Create @{RadioGroup} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node[] nodes Array of gui node -- @tparam node[] nodes Array of gui node
-- @tparam function callback Radio callback -- @tparam function callback Radio callback
-- @tparam[opt=node] node[] click_nodes Array of trigger nodes, by default equals to nodes -- @tparam[opt=node] node[] click_nodes Array of trigger nodes, by default equals to nodes
-- @treturn RadioGroup radio_group component -- @treturn RadioGroup @{RadioGroup} component
function DruidInstance.new_radio_group(self, nodes, callback, click_nodes) function DruidInstance.new_radio_group(self, nodes, callback, click_nodes)
-- return helper.extended_component("radio_group") return helper.require_component_message("radio_group")
return DruidInstance.new(self, radio_group, nodes, callback, click_nodes)
end end
--- Create timer component --- Create @{Timer} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam node node Gui text node -- @tparam node node Gui text node
-- @tparam number seconds_from Start timer value in seconds -- @tparam number seconds_from Start timer value in seconds
-- @tparam[opt=0] number seconds_to End timer value in seconds -- @tparam[opt=0] number seconds_to End timer value in seconds
-- @tparam[opt] function callback Function on timer end -- @tparam[opt] function callback Function on timer end
-- @treturn Timer timer component -- @treturn Timer @{Timer} component
function DruidInstance.new_timer(self, node, seconds_from, seconds_to, callback) function DruidInstance.new_timer(self, node, seconds_from, seconds_to, callback)
-- return helper.extended_component("timer") return helper.require_component_message("timer")
return DruidInstance.new(self, timer_component, node, seconds_from, seconds_to, callback)
end end
--- Create progress component --- Create @{Progress} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam string|node node Progress bar fill node or node name -- @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 string key Progress bar direction: const.SIDE.X or const.SIDE.Y
-- @tparam[opt=1] number init_value Initial value of progress bar -- @tparam[opt=1] number init_value Initial value of progress bar
-- @treturn Progress progress component -- @treturn Progress @{Progress} component
function DruidInstance.new_progress(self, node, key, init_value) function DruidInstance.new_progress(self, node, key, init_value)
-- return helper.extended_component("progress") return helper.require_component_message("progress")
return DruidInstance.new(self, progress, node, key, init_value)
end end
--- Create layout component --- Create @{Layout} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam string|node node Layout node -- @tparam string|node node Layout node
-- @tparam string mode The layout mode -- @tparam string mode The layout mode
-- @treturn Layout layout component -- @treturn Layout @{Layout} component
function DruidInstance.new_layout(self, node, mode) function DruidInstance.new_layout(self, node, mode)
return helper.extended_component("layout") return helper.require_component_message("layout")
end end
--- Create hotkey component --- Create @{Hotkey} component
-- @tparam DruidInstance self -- @tparam DruidInstance self
-- @tparam string|string[] keys_array Keys for trigger action. Should contains one action key and any amount of modificator keys -- @tparam string|string[] keys_array Keys for trigger action. Should contains one action key and any amount of modificator keys
-- @tparam function callback Button callback -- @tparam function callback Button callback
-- @tparam[opt] value params Button callback params -- @tparam[opt] value params Button callback params
-- @treturn Hotkey hotkey component -- @treturn Hotkey @{Hotkey} component
function DruidInstance.new_hotkey(self, keys_array, callback, params) function DruidInstance.new_hotkey(self, keys_array, callback, params)
return helper.extended_component("hotkey") return helper.require_component_message("hotkey")
end
--- Create @{RichText} component.
-- As a template please check rich_text.gui layout.
-- @tparam DruidInstance self
-- @tparam[opt] string template Template name if used
-- @tparam[opt] table nodes Nodes table from gui.clone_tree
-- @treturn RichText @{RichText} component
function DruidInstance.new_rich_text(self, template, nodes)
return helper.require_component_message("rich_text", "custom")
end end

31
druid/system/middleclass.lua
View File

@ -1,32 +1,5 @@
local middleclass = { -- Source: https://github.com/kikito/middleclass
_VERSION = 'middleclass v4.1.1', local middleclass = {}
_DESCRIPTION = 'Object Orientation for Lua',
_URL = 'https://github.com/kikito/middleclass',
_LICENSE = [[
MIT LICENSE
Copyright (c) 2011 Enrique García Cota
Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
]]
}
local function _createIndexWrapper(aClass, f) local function _createIndexWrapper(aClass, f)
if f == nil then if f == nil then

BIN
example/assets/fonts/Exo2-LightItalic.ttf Normal file
View File

Binary file not shown.

BIN
example/assets/fonts/Exo2-Regular.ttf Normal file
View File

Binary file not shown.

17
example/assets/fonts/game_thin.font Normal file
View File

@ -0,0 +1,17 @@
font: "/example/assets/fonts/Exo2-Regular.ttf"
material: "/builtins/fonts/font-df.material"
size: 40
antialias: 1
alpha: 1.0
outline_alpha: 0.0
outline_width: 0.0
shadow_alpha: 0.0
shadow_blur: 0
shadow_x: 0.0
shadow_y: 0.0
extra_characters: ""
output_format: TYPE_DISTANCE_FIELD
all_chars: false
cache_width: 0
cache_height: 0
render_mode: MODE_MULTI_LAYER

17
example/assets/fonts/game_thin_italic.font Normal file
View File

@ -0,0 +1,17 @@
font: "/example/assets/fonts/Exo2-LightItalic.ttf"
material: "/builtins/fonts/font-df.material"
size: 40
antialias: 1
alpha: 1.0
outline_alpha: 0.0
outline_width: 0.0
shadow_alpha: 0.0
shadow_blur: 0
shadow_x: 0.0
shadow_y: 0.0
extra_characters: ""
output_format: TYPE_DISTANCE_FIELD
all_chars: false
cache_width: 0
cache_height: 0
render_mode: MODE_MULTI_LAYER

550
example/example.collection
View File

@ -16,6 +16,8 @@ embedded_instances {
" z: 0.0\n" " z: 0.0\n"
" w: 1.0\n" " w: 1.0\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"" ""
position { position {
@ -51,6 +53,8 @@ embedded_instances {
" z: 0.0\n" " z: 0.0\n"
" w: 1.0\n" " w: 1.0\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"" ""
position { position {
@ -139,12 +143,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/general/overview/overview.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/general/overview/overview.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -202,12 +209,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/general/buttons/buttons.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/general/buttons/buttons.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -265,12 +275,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/texts/texts_general/texts_general.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/texts/texts_general/texts_general.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -328,12 +341,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/general/sliders/sliders.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/general/sliders/sliders.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -391,12 +407,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/general/grid/grid.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/general/grid/grid.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -454,12 +473,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/general/input/input.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/general/input/input.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -517,12 +539,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/general/scroll/scroll.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/general/scroll/scroll.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -580,12 +605,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/general/data_list/data_list.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/general/data_list/data_list.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -643,12 +671,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/data_list/static_grid/static_grid.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/data_list/static_grid/static_grid.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -706,12 +737,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/data_list/dynamic_grid/dynamic_grid.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/data_list/dynamic_grid/dynamic_grid.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -769,12 +803,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/data_list/navigate/navigate.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/data_list/navigate/navigate.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -832,12 +869,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/data_list/add_remove_nodes/add_remove_nodes.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/data_list/add_remove_nodes/add_remove_nodes.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -895,12 +935,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/grid/static_grid/static_grid.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/grid/static_grid/static_grid.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -958,12 +1001,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/grid/grid_animations/grid_animations.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/grid/grid_animations/grid_animations.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1021,12 +1067,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/grid/static_grid_dynamic_pos/static_grid_dynamic_pos.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/grid/static_grid_dynamic_pos/static_grid_dynamic_pos.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1084,12 +1133,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/system/whitelist_blacklist/whitelist_blacklist.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/system/whitelist_blacklist/whitelist_blacklist.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1147,12 +1199,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/texts/texts_adjust/texts_adjust.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/texts/texts_adjust/texts_adjust.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1210,12 +1265,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/system/message_input/message_input.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/system/message_input/message_input.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1273,12 +1331,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/custom/rich_input/rich_input.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/custom/rich_input/rich_input.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1336,12 +1397,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/custom/pin_knob/pin_knob.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/custom/pin_knob/pin_knob.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1399,12 +1463,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/system/inner_templates/inner_templates.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/system/inner_templates/inner_templates.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1462,12 +1529,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/general/swipe/swipe.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/general/swipe/swipe.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1525,12 +1595,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/general/drag/drag.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/general/drag/drag.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1588,12 +1661,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/general/checkboxes/checkboxes.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/general/checkboxes/checkboxes.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1651,12 +1727,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/data_list/reinit_data/reinit_data.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/data_list/reinit_data/reinit_data.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1714,12 +1793,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/general/layout/layout.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/general/layout/layout.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1777,12 +1859,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/general/hotkey/hotkey.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/general/hotkey/hotkey.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1840,12 +1925,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/data_list/with_component/with_component.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/data_list/with_component/with_component.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1903,12 +1991,15 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/layout/layout_fit/layout_fit.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/layout/layout_fit/layout_fit.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"
@ -1966,12 +2057,411 @@ embedded_instances {
" value: \"true\"\n" " value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n" " type: PROPERTY_TYPE_BOOLEAN\n"
" }\n" " }\n"
" property_decls {\n"
" }\n"
"}\n" "}\n"
"embedded_components {\n" "embedded_components {\n"
" id: \"collectionfactory\"\n" " id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n" " type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/general/progress_bar/progress_bar.collection\\\"\\n" " data: \"prototype: \\\"/example/examples/general/progress_bar/progress_bar.collection\\\"\\n"
"load_dynamically: false\\n" "load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n"
" position {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" }\n"
" rotation {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" w: 1.0\n"
" }\n"
"}\n"
""
position {
x: 0.0
y: 0.0
z: 0.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale3 {
x: 1.0
y: 1.0
z: 1.0
}
}
embedded_instances {
id: "system_late_init_check"
data: "components {\n"
" id: \"screen_factory\"\n"
" component: \"/monarch/screen_factory.script\"\n"
" position {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" }\n"
" rotation {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" w: 1.0\n"
" }\n"
" properties {\n"
" id: \"screen_id\"\n"
" value: \"system_late_init_check\"\n"
" type: PROPERTY_TYPE_HASH\n"
" }\n"
" properties {\n"
" id: \"popup\"\n"
" value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n"
" }\n"
" property_decls {\n"
" }\n"
"}\n"
"embedded_components {\n"
" id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/system/late_init_check/late_init_check.collection\\\"\\n"
"load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n"
" position {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" }\n"
" rotation {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" w: 1.0\n"
" }\n"
"}\n"
""
position {
x: 0.0
y: 0.0
z: 0.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale3 {
x: 1.0
y: 1.0
z: 1.0
}
}
embedded_instances {
id: "general_hover"
data: "components {\n"
" id: \"screen_factory\"\n"
" component: \"/monarch/screen_factory.script\"\n"
" position {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" }\n"
" rotation {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" w: 1.0\n"
" }\n"
" properties {\n"
" id: \"screen_id\"\n"
" value: \"general_hover\"\n"
" type: PROPERTY_TYPE_HASH\n"
" }\n"
" properties {\n"
" id: \"popup\"\n"
" value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n"
" }\n"
" property_decls {\n"
" }\n"
"}\n"
"embedded_components {\n"
" id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/general/hover/hover.collection\\\"\\n"
"load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n"
" position {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" }\n"
" rotation {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" w: 1.0\n"
" }\n"
"}\n"
""
position {
x: 0.0
y: 0.0
z: 0.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale3 {
x: 1.0
y: 1.0
z: 1.0
}
}
embedded_instances {
id: "texts_lang_text"
data: "components {\n"
" id: \"screen_factory\"\n"
" component: \"/monarch/screen_factory.script\"\n"
" position {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" }\n"
" rotation {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" w: 1.0\n"
" }\n"
" properties {\n"
" id: \"screen_id\"\n"
" value: \"texts_lang_text\"\n"
" type: PROPERTY_TYPE_HASH\n"
" }\n"
" properties {\n"
" id: \"popup\"\n"
" value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n"
" }\n"
" property_decls {\n"
" }\n"
"}\n"
"embedded_components {\n"
" id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/texts/lang_text/lang_text.collection\\\"\\n"
"load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n"
" position {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" }\n"
" rotation {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" w: 1.0\n"
" }\n"
"}\n"
""
position {
x: 0.0
y: 0.0
z: 0.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale3 {
x: 1.0
y: 1.0
z: 1.0
}
}
embedded_instances {
id: "custom_rich_text"
data: "components {\n"
" id: \"screen_factory\"\n"
" component: \"/monarch/screen_factory.script\"\n"
" position {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" }\n"
" rotation {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" w: 1.0\n"
" }\n"
" properties {\n"
" id: \"screen_id\"\n"
" value: \"custom_rich_text\"\n"
" type: PROPERTY_TYPE_HASH\n"
" }\n"
" properties {\n"
" id: \"popup\"\n"
" value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n"
" }\n"
" property_decls {\n"
" }\n"
"}\n"
"embedded_components {\n"
" id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/custom/rich_text/rich_text.collection\\\"\\n"
"load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n"
" position {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" }\n"
" rotation {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" w: 1.0\n"
" }\n"
"}\n"
""
position {
x: 0.0
y: 0.0
z: 0.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale3 {
x: 1.0
y: 1.0
z: 1.0
}
}
embedded_instances {
id: "data_list_manage_data"
data: "components {\n"
" id: \"screen_factory\"\n"
" component: \"/monarch/screen_factory.script\"\n"
" position {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" }\n"
" rotation {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" w: 1.0\n"
" }\n"
" properties {\n"
" id: \"screen_id\"\n"
" value: \"data_list_manage_data\"\n"
" type: PROPERTY_TYPE_HASH\n"
" }\n"
" properties {\n"
" id: \"popup\"\n"
" value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n"
" }\n"
" property_decls {\n"
" }\n"
"}\n"
"embedded_components {\n"
" id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/data_list/manage_data/manage_data.collection\\\"\\n"
"load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n"
" position {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" }\n"
" rotation {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" w: 1.0\n"
" }\n"
"}\n"
""
position {
x: 0.0
y: 0.0
z: 0.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale3 {
x: 1.0
y: 1.0
z: 1.0
}
}
embedded_instances {
id: "rich_text_texts"
data: "components {\n"
" id: \"screen_factory\"\n"
" component: \"/monarch/screen_factory.script\"\n"
" position {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" }\n"
" rotation {\n"
" x: 0.0\n"
" y: 0.0\n"
" z: 0.0\n"
" w: 1.0\n"
" }\n"
" properties {\n"
" id: \"screen_id\"\n"
" value: \"rich_text_texts\"\n"
" type: PROPERTY_TYPE_HASH\n"
" }\n"
" properties {\n"
" id: \"popup\"\n"
" value: \"true\"\n"
" type: PROPERTY_TYPE_BOOLEAN\n"
" }\n"
" property_decls {\n"
" }\n"
"}\n"
"embedded_components {\n"
" id: \"collectionfactory\"\n"
" type: \"collectionfactory\"\n"
" data: \"prototype: \\\"/example/examples/rich_text/rich_text_texts/rich_text_texts.collection\\\"\\n"
"load_dynamically: true\\n"
"dynamic_prototype: false\\n"
"\"\n" "\"\n"
" position {\n" " position {\n"
" x: 0.0\n" " x: 0.0\n"

65
example/example.gui
View File

@ -67,6 +67,8 @@ nodes {
template_node_child: false template_node_child: false
size_mode: SIZE_MODE_MANUAL size_mode: SIZE_MODE_MANUAL
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -88,8 +90,8 @@ nodes {
w: 1.0 w: 1.0
} }
size { size {
x: 1.0 x: 200.0
y: 1.0 y: 100.0
z: 0.0 z: 0.0
w: 1.0 w: 1.0
} }
@ -123,6 +125,8 @@ nodes {
template_node_child: false template_node_child: false
size_mode: SIZE_MODE_AUTO size_mode: SIZE_MODE_AUTO
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -144,8 +148,8 @@ nodes {
w: 1.0 w: 1.0
} }
size { size {
x: 1.0 x: 200.0
y: 1.0 y: 100.0
z: 0.0 z: 0.0
w: 1.0 w: 1.0
} }
@ -179,6 +183,8 @@ nodes {
template_node_child: false template_node_child: false
size_mode: SIZE_MODE_AUTO size_mode: SIZE_MODE_AUTO
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -235,6 +241,8 @@ nodes {
template_node_child: false template_node_child: false
size_mode: SIZE_MODE_MANUAL size_mode: SIZE_MODE_MANUAL
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -291,6 +299,8 @@ nodes {
template_node_child: false template_node_child: false
size_mode: SIZE_MODE_MANUAL size_mode: SIZE_MODE_MANUAL
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -312,8 +322,8 @@ nodes {
w: 1.0 w: 1.0
} }
size { size {
x: 1.0 x: 200.0
y: 1.0 y: 100.0
z: 0.0 z: 0.0
w: 1.0 w: 1.0
} }
@ -347,6 +357,8 @@ nodes {
template_node_child: false template_node_child: false
size_mode: SIZE_MODE_AUTO size_mode: SIZE_MODE_AUTO
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -403,11 +415,13 @@ nodes {
template_node_child: false template_node_child: false
size_mode: SIZE_MODE_MANUAL size_mode: SIZE_MODE_MANUAL
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
x: 0.0 x: 0.0
y: 0.0 y: -13.0
z: 0.0 z: 0.0
w: 1.0 w: 1.0
} }
@ -461,12 +475,14 @@ nodes {
layer: "" layer: ""
inherit_alpha: true inherit_alpha: true
alpha: 1.0 alpha: 1.0
outline_alpha: 1.0 outline_alpha: 0.75
shadow_alpha: 0.0 shadow_alpha: 0.0
template_node_child: false template_node_child: false
text_leading: 1.0 text_leading: 1.0
text_tracking: 0.0 text_tracking: 0.0
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -523,6 +539,8 @@ nodes {
template_node_child: false template_node_child: false
size_mode: SIZE_MODE_MANUAL size_mode: SIZE_MODE_MANUAL
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -579,6 +597,8 @@ nodes {
template_node_child: false template_node_child: false
size_mode: SIZE_MODE_MANUAL size_mode: SIZE_MODE_MANUAL
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -637,12 +657,14 @@ nodes {
layer: "" layer: ""
inherit_alpha: true inherit_alpha: true
alpha: 1.0 alpha: 1.0
outline_alpha: 1.0 outline_alpha: 0.75
shadow_alpha: 0.0 shadow_alpha: 0.0
template_node_child: false template_node_child: false
text_leading: 1.0 text_leading: 1.0
text_tracking: 0.0 text_tracking: 0.0
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -664,8 +686,8 @@ nodes {
w: 1.0 w: 1.0
} }
size { size {
x: 1.0 x: 200.0
y: 1.0 y: 100.0
z: 0.0 z: 0.0
w: 1.0 w: 1.0
} }
@ -699,6 +721,8 @@ nodes {
template_node_child: false template_node_child: false
size_mode: SIZE_MODE_AUTO size_mode: SIZE_MODE_AUTO
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -755,6 +779,8 @@ nodes {
template_node_child: false template_node_child: false
size_mode: SIZE_MODE_MANUAL size_mode: SIZE_MODE_MANUAL
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -796,6 +822,7 @@ nodes {
template: "/example/templates/button.gui" template: "/example/templates/button.gui"
template_node_child: false template_node_child: false
custom_type: 0 custom_type: 0
enabled: true
} }
nodes { nodes {
position { position {
@ -854,6 +881,8 @@ nodes {
template_node_child: true template_node_child: true
size_mode: SIZE_MODE_MANUAL size_mode: SIZE_MODE_MANUAL
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -923,6 +952,8 @@ nodes {
text_leading: 1.0 text_leading: 1.0
text_tracking: 0.0 text_tracking: 0.0
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -964,6 +995,7 @@ nodes {
template: "/example/templates/button.gui" template: "/example/templates/button.gui"
template_node_child: false template_node_child: false
custom_type: 0 custom_type: 0
enabled: true
} }
nodes { nodes {
position { position {
@ -1022,6 +1054,8 @@ nodes {
template_node_child: true template_node_child: true
size_mode: SIZE_MODE_MANUAL size_mode: SIZE_MODE_MANUAL
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -1091,6 +1125,8 @@ nodes {
text_leading: 1.0 text_leading: 1.0
text_tracking: 0.0 text_tracking: 0.0
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -1132,6 +1168,7 @@ nodes {
template: "/example/templates/button.gui" template: "/example/templates/button.gui"
template_node_child: false template_node_child: false
custom_type: 0 custom_type: 0
enabled: true
} }
nodes { nodes {
position { position {
@ -1190,6 +1227,8 @@ nodes {
template_node_child: true template_node_child: true
size_mode: SIZE_MODE_MANUAL size_mode: SIZE_MODE_MANUAL
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -1259,6 +1298,8 @@ nodes {
text_leading: 1.0 text_leading: 1.0
text_tracking: 0.0 text_tracking: 0.0
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
nodes { nodes {
position { position {
@ -1323,6 +1364,8 @@ nodes {
text_leading: 1.0 text_leading: 1.0
text_tracking: 0.0 text_tracking: 0.0
custom_type: 0 custom_type: 0
enabled: true
visible: true
} }
layers { layers {
name: "image" name: "image"

66
example/example.gui_script
View File

@ -3,6 +3,17 @@ local druid = require("druid.druid")
local monarch = require("monarch.monarch") local monarch = require("monarch.monarch")
local default_style = require("druid.styles.default.style") local default_style = require("druid.styles.default.style")
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_component = require("druid.extended.timer")
local data_list = require("druid.extended.data_list")
local cache_path = sys.get_save_file("druid", "cache") local cache_path = sys.get_save_file("druid", "cache")
@ -11,6 +22,24 @@ local function save_cache(self)
end end
-- Change current browser URL to share the examples
---@param self userdata
---@param scene_name string
local function set_scene_url(self, scene_name)
if not html5 then
return
end
local command
if scene_name then
command = string.format('window.history.replaceState(null, null, "?example=%s")', scene_name)
else
command = 'window.history.replaceState(null, null, "index.html")'
end
html5.run(command)
end
local function back_to_lobby(self) local function back_to_lobby(self)
if gui.set_enabled(self.button_menu.node) then if gui.set_enabled(self.button_menu.node) then
return return
@ -26,6 +55,7 @@ local function back_to_lobby(self)
self.cache.last_scene = nil self.cache.last_scene = nil
save_cache(self) save_cache(self)
set_scene_url(self, nil)
end end
@ -43,6 +73,7 @@ local function show_scene(self, scene_name, text_header)
self.cache.last_scene = scene_name self.cache.last_scene = scene_name
save_cache(self) save_cache(self)
set_scene_url(self, scene_name)
end end
@ -54,7 +85,7 @@ local function init_top_panel(self)
gui.set_enabled(self.button_menu.node, false) gui.set_enabled(self.button_menu.node, false)
self.button_api = self.druid:new_button("button_api/button", function() self.button_api = self.druid:new_button("button_api/button", function()
sys.open_url("https://insality.github.io/druid/") sys.open_url("https://insality.github.io/druid/modules/Druid.html")
end) end)
self.button_code = self.druid:new_button("button_code/button", function() self.button_code = self.druid:new_button("button_code/button", function()
@ -121,6 +152,7 @@ local function init_lobby(self)
self.lobby_scroll = self.druid:new_scroll("lobby_view", "lobby_content") self.lobby_scroll = self.druid:new_scroll("lobby_view", "lobby_content")
self.lobby_grid = self.druid:new_dynamic_grid("lobby_content") self.lobby_grid = self.druid:new_dynamic_grid("lobby_content")
self.lobby_scroll:bind_grid(self.lobby_grid) self.lobby_scroll:bind_grid(self.lobby_grid)
self.lobby_scroll.style.WHEEL_SCROLL_SPEED = 20
self.lobby_grid:add(get_title(self, "General examples")) self.lobby_grid:add(get_title(self, "General examples"))
self.lobby_grid:add(get_button(self, "Overview", "general_overview", "/general/overview/overview.gui_script")) self.lobby_grid:add(get_button(self, "Overview", "general_overview", "/general/overview/overview.gui_script"))
@ -133,6 +165,7 @@ local function init_lobby(self)
self.lobby_grid:add(get_button(self, "Checkboxes", "general_checkboxes", "/general/checkboxes/checkboxes.gui_script")) self.lobby_grid:add(get_button(self, "Checkboxes", "general_checkboxes", "/general/checkboxes/checkboxes.gui_script"))
self.lobby_grid:add(get_button(self, "Input text", "general_input", "/general/input/input.gui_script")) self.lobby_grid:add(get_button(self, "Input text", "general_input", "/general/input/input.gui_script"))
self.lobby_grid:add(get_button(self, "Layout", "general_layout", "/general/layout/layout.gui_script")) self.lobby_grid:add(get_button(self, "Layout", "general_layout", "/general/layout/layout.gui_script"))
self.lobby_grid:add(get_button(self, "Hover", "general_hover", "/general/hover/hover.gui_script"))
self.lobby_grid:add(get_button(self, "Swipe", "general_swipe", "/general/swipe/swipe.gui_script")) self.lobby_grid:add(get_button(self, "Swipe", "general_swipe", "/general/swipe/swipe.gui_script"))
self.lobby_grid:add(get_button(self, "Drag", "general_drag", "/general/drag/drag.gui_script")) self.lobby_grid:add(get_button(self, "Drag", "general_drag", "/general/drag/drag.gui_script"))
self.lobby_grid:add(get_button(self, "Hotkey", "general_hotkey", "/general/hotkey/hotkey.gui_script")) self.lobby_grid:add(get_button(self, "Hotkey", "general_hotkey", "/general/hotkey/hotkey.gui_script"))
@ -140,7 +173,7 @@ local function init_lobby(self)
self.lobby_grid:add(get_title(self, "Texts")) self.lobby_grid:add(get_title(self, "Texts"))
self.lobby_grid:add(get_button(self, "Texts", "texts_general", "/texts/texts_general/texts_general.gui_script")) self.lobby_grid:add(get_button(self, "Texts", "texts_general", "/texts/texts_general/texts_general.gui_script"))
self.lobby_grid:add(get_button(self, "Adjust types", "texts_adjust", "/texts/texts_adjust/texts_adjust.gui_script")) self.lobby_grid:add(get_button(self, "Adjust types", "texts_adjust", "/texts/texts_adjust/texts_adjust.gui_script"))
self.lobby_grid:add(get_button_disabled(self, "Lang Text", "texts_lang_text")) self.lobby_grid:add(get_button(self, "Lang Text", "texts_lang_text", "/texts/texts_adjust/texts_lang_text.gui_script"))
self.lobby_grid:add(get_title(self, "Scrolls")) self.lobby_grid:add(get_title(self, "Scrolls"))
self.lobby_grid:add(get_button_disabled(self, "Nested scrolls", "scroll_scene")) self.lobby_grid:add(get_button_disabled(self, "Nested scrolls", "scroll_scene"))
@ -154,12 +187,12 @@ local function init_lobby(self)
self.lobby_grid:add(get_button_disabled(self, "Scroll binding", "scroll_scene")) self.lobby_grid:add(get_button_disabled(self, "Scroll binding", "scroll_scene"))
self.lobby_grid:add(get_button(self, "Add/Remove animations", "grid_animations", "/grid/grid_animations/grid_animations.gui_script")) self.lobby_grid:add(get_button(self, "Add/Remove animations", "grid_animations", "/grid/grid_animations/grid_animations.gui_script"))
self.lobby_grid:add(get_title(self, "Data list / Infinity scroll")) self.lobby_grid:add(get_title(self, "Data list | Infinity scroll"))
self.lobby_grid:add(get_button(self, "With static grid", "data_list_static_grid", "/data_list/static_grid/static_grid.gui_script")) self.lobby_grid:add(get_button(self, "With static grid", "data_list_static_grid", "/data_list/static_grid/static_grid.gui_script"))
self.lobby_grid:add(get_button(self, "With dynamic grid", "data_list_dynamic_grid", "/data_list/dynamic_grid/dynamic_grid.gui_script")) self.lobby_grid:add(get_button(self, "With dynamic grid", "data_list_dynamic_grid", "/data_list/dynamic_grid/dynamic_grid.gui_script"))
self.lobby_grid:add(get_button_disabled(self, "Add/remove elements", "data_list_add_remove_nodes"))
self.lobby_grid:add(get_button(self, "Navigate over elements", "data_list_navigate", "/data_list/navigate/navigate.gui_script")) self.lobby_grid:add(get_button(self, "Navigate over elements", "data_list_navigate", "/data_list/navigate/navigate.gui_script"))
self.lobby_grid:add(get_button(self, "Reinit data", "data_list_reinit_data", "/data_list/reinit_data/reinit_data.gui_script")) self.lobby_grid:add(get_button(self, "Reinit data", "data_list_reinit_data", "/data_list/reinit_data/reinit_data.gui_script"))
self.lobby_grid:add(get_button_disabled(self, "Add / remove data", "data_list_manage_data", "/data_list/manage_data/manage_data.gui_script"))
self.lobby_grid:add(get_button(self, "With component", "data_list_with_component", "/data_list/with_component/with_component.gui_script")) self.lobby_grid:add(get_button(self, "With component", "data_list_with_component", "/data_list/with_component/with_component.gui_script"))
self.lobby_grid:add(get_title(self, "Layouts")) self.lobby_grid:add(get_title(self, "Layouts"))
@ -168,6 +201,12 @@ local function init_lobby(self)
self.lobby_grid:add(get_title(self, "Custom components")) self.lobby_grid:add(get_title(self, "Custom components"))
self.lobby_grid:add(get_button(self, "Rich Input", "custom_rich_input", "/custom/rich_input/rich_input.gui_script")) self.lobby_grid:add(get_button(self, "Rich Input", "custom_rich_input", "/custom/rich_input/rich_input.gui_script"))
self.lobby_grid:add(get_button(self, "Pin Knob", "custom_pin_knob", "/custom/pin_knob/pin_knob.gui_script")) self.lobby_grid:add(get_button(self, "Pin Knob", "custom_pin_knob", "/custom/pin_knob/pin_knob.gui_script"))
self.lobby_grid:add(get_button(self, "Rich Text", "custom_rich_text", "/custom/rich_text/rich_text.gui_script"))
self.lobby_grid:add(get_title(self, "Rich Texts"))
self.lobby_grid:add(get_button(self, "Rich Text Texts", "rich_text_texts", "/custom/rich_text_texts/rich_text_texts.gui_script"))
self.lobby_grid:add(get_button_disabled(self, "Rich Text Images"))--, "rich_text_images", "/custom/rich_text_texts/rich_text_texts.gui_script"))
self.lobby_grid:add(get_button_disabled(self, "Rich Text Tags"))--, "rich_text_images", "/custom/rich_text_texts/rich_text_texts.gui_script"))
self.lobby_grid:add(get_title(self, "System")) self.lobby_grid:add(get_title(self, "System"))
self.lobby_grid:add(get_button_disabled(self, "Styles")) self.lobby_grid:add(get_button_disabled(self, "Styles"))
@ -177,6 +216,7 @@ local function init_lobby(self)
self.lobby_grid:add(get_button(self, "Message input", "system_message_input", "/system/message_input/message_input.gui_script")) self.lobby_grid:add(get_button(self, "Message input", "system_message_input", "/system/message_input/message_input.gui_script"))
self.lobby_grid:add(get_button_disabled(self, "Input priority")) self.lobby_grid:add(get_button_disabled(self, "Input priority"))
self.lobby_grid:add(get_button(self, "Inner templates", "system_inner_templates", "/system/inner_templates/inner_templates.gui_script")) self.lobby_grid:add(get_button(self, "Inner templates", "system_inner_templates", "/system/inner_templates/inner_templates.gui_script"))
self.lobby_grid:add(get_button(self, "Late init check", "system_late_init_check", "/system/late_init_check/late_init_check.gui_script"))
end end
@ -219,12 +259,28 @@ local function check_loading(self)
end end
local function register_druid_extended_components(self)
druid.register("checkbox", checkbox)
druid.register("checkbox_group", checkbox_group)
druid.register("dynamic_grid", dynamic_grid)
druid.register("input", input)
druid.register("lang_text", lang_text)
druid.register("progress", progress)
druid.register("radio_group", radio_group)
druid.register("slider", slider)
druid.register("timer", timer_component)
druid.register("data_list", data_list)
end
function init(self) function init(self)
-- Main lobby have more render priority (top panel) -- Main lobby have more render priority (top panel)
gui.set_render_order(10) gui.set_render_order(10)
window.set_listener(on_window_callback) window.set_listener(on_window_callback)
druid.set_default_style(default_style) druid.set_default_style(default_style)
register_druid_extended_components(self)
self.druid = druid.new(self) self.druid = druid.new(self)
self.cache = sys.load(cache_path) or {} self.cache = sys.load(cache_path) or {}
@ -255,5 +311,5 @@ end
function on_input(self, action_id, action) function on_input(self, action_id, action)
self.druid:on_input(action_id, action) return self.druid:on_input(action_id, action)
end end

Some files were not shown because too many files have changed in this diff Show More