Update docs

README.md

@@ -9,6 +9,7 @@
 
 **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
 
@@ -88,9 +89,9 @@ Start reading the API documentation [here](https://insality.github.io/druid/modu
 
 [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 generated EmmyLua annotations, you should copy the _druid/annotations.lua_ file to your project.
+Since dependencies cannot be processed by external editors, to use the EmmyLua annotations, you should copy the _druid/annotations.lua_ file to your project.
 
-For EmmyLua, this will be sufficient. Remember that you can restart the EmmyLua server to refresh the changes if something goes wrong.
+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:
 
@@ -146,9 +147,9 @@ Here is full **Druid** components list.
 | **[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]() | <img src="media/preview/slider.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_hokey) | <img src="media/preview/hotkey.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)_**.
@@ -192,16 +193,17 @@ Refer to the [**example folder**](https://github.com/Insality/druid/tree/develop
 ## 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)
 - [Create custom components](docs_md/02-creating_custom_components.md)
 - [See FAQ article](docs_md/FAQ.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/
+https://insality.github.io/druid/modules/Druid.html
 
 
-## License
+## Licenses
 
 - Developed and supported by [Insality](https://github.com/Insality)
 - Original idea by [AGulev](https://github.com/AGulev)

docs_md/components/manual_rich_text.md

@@ -1,59 +0,0 @@
-# Druid Rich Text
-
-## Links
-[Rich Text API here](https://insality.github.io/druid/modules/RichText.html)
-
-## Overview
-
-
-## Setup
-
-Rich Text requires the next GUI Node scheme:
-```bash
- root
- ├── text_prefab
- └── node_prefab
-```
-or make the copy of `/druid/custom/rich_text/rich_text.gui` and adjust your default settings
-
-Create Rich Text:
-```lua
-local RichText = require("druid.custom.rich_text.rich_text")
-
-function init(self)
-	self.druid = druid.new(self)
-	self.rich_text = self.druid:new(RichText, "template_name")
-	self.rich_text:set_text("Insert your text here")
-end
-```
-
-## Usage
-
-| Tag     | Description                                    | Example                                     |
-|---------|------------------------------------------------|---------------------------------------------|
-| a       | Create a "hyperlink" that generates a message  | `<a=message_id>Foobar</a>`                  |
-|         | when clicked (see `richtext.on_click`)         |                                             |
-| br      | Insert a line break (see notes on linebreak)   | `<br/>`                                     |
-| 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>`            |
-| img     | Display image                                  | `<img=texture:image/>`                      |
-|         | Display image in fixed square                  | `<img=texture:image,size/>`                 |
-|         | Display image in fixed rectangle               | `<img=texture:image,width,height/>`         |
-| nobr    | Prevent the text from breaking                 | `Words <nobr>inside tag</nobr> won't break` |
-| size    | Change text size, relative to default size     | `<size=2>Twice as large</size>`             |
-
-
-## Usecases
-
-## Notes

druid/base/button.lua

@@ -19,6 +19,8 @@
 --
 -- • 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)

druid/base/drag.lua

@@ -4,6 +4,8 @@
 -- Drag have correct handling for multitouch and swap
 -- touched while dragging. Drag will be processed even
 -- the cursor is outside of node, if drag is already started
+--
+-- <a href="https://insality.github.io/druid/druid/index.html?example=general_drag" target="_blank"><b>Example Link</b></a>
 -- @module Drag
 -- @within BaseComponent
 -- @alias druid.drag

druid/base/scroll.lua

@@ -31,6 +31,8 @@
 --
 -- • 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
 -- @within BaseComponent
 -- @alias druid.scroll

druid/base/static_grid.lua

@@ -29,6 +29,8 @@
 --
 -- • 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
 -- @within BaseComponent
 -- @alias druid.static_grid

druid/base/text.lua

@@ -29,6 +29,8 @@
 -- 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
 -- @within BaseComponent
 -- @alias druid.text

druid/custom/rich_text/module/rt.lua

@@ -449,9 +449,9 @@ function M.set_text_scale(words, settings, scale)
 end
 
 
----@param words rich_text.word[]
+---@param words druid.rich_text.word[]
----@param settings rich_text.settings
+---@param settings druid.rich_text.settings
----@param lines_metrics rich_text.lines_metrics
+---@param lines_metrics druid.rich_text.lines_metrics
 function M.adjust_to_area(words, settings, lines_metrics)
 	local last_line_metrics = lines_metrics
 

druid/custom/rich_text/rich_text.lua

@@ -1,15 +1,16 @@
 -- Copyright (c) 2022 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
 
---- Druid Rich Text custom component.
+--- Druid Rich Text Custom Component.
 -- <b># Overview #</b>
 --
--- Heavily inspired by <a href="https://github.com/britzl/defold-richtext" target="_blank">https://github.com/britzl/defold-richtext</a>.
+-- 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.
 --
--- Uses the same syntax for tags, but currently have less tags support.
+-- All parameters for the Rich Text component are adjusted in the GUI scene.
 --
--- All Rich Text params are adjusted in GUI scene
+-- This component uses GUI component template. (/druid/custom/rich_text/rich_text.gui).
 --
--- The Rich Text template should have next scheme:
+-- You able to customize it or make your own with the next node scructure:
 --
 -- root
 --
@@ -18,23 +19,71 @@
 --   - icon_prefab
 --
 -- <b># Rich Text Setup #</b>
--- • Root node size - maximum width and height of the text
+--
--- • Root anchor - Aligment of the Rich Text inside root node size area
+-- • Root node size: Set the maximum width and height of the text.
--- • Text prefab - all text params for the text node
+--
--- • Text prefab anchor - Anchor for each text node (you should adjust this only if animate text)
+-- • Root anchor: Define the alignment of the Rich Text inside the root node size area.
--- • Icon prefab - all node params for the icon node
+--
--- • Icon prefab anchor - Anchor for each icon node (you should adjust this only if animate icon)
+-- • 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,
+--   anchor: number,
+--   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
@@ -79,8 +128,8 @@ end
 --- Set text for Rich Text
 -- @tparam RichText self @{RichText}
 -- @tparam string text The text to set
--- @treturn table words
+-- @treturn druid.rich_text.word[] words
--- @treturn table line_metrics
+-- @treturn druid.rich_text.lines_metrics line_metrics
 -- @usage
 -- • color: Change text color
 --

druid/extended/checkbox.lua

@@ -1,6 +1,8 @@
 -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
 
 --- 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
 -- @within BaseComponent
 -- @alias druid.checkbox

druid/extended/checkbox_group.lua

@@ -1,6 +1,8 @@
 -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
 
 --- 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
 -- @within BaseComponent
 -- @alias druid.checkbox_group

druid/extended/data_list.lua

@@ -2,6 +2,8 @@
 
 --- Component to manage data for huge dataset in scroll.
 -- 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
 -- @within BaseComponent
 -- @alias druid.data_list

druid/extended/dynamic_grid.lua

@@ -1,6 +1,8 @@
 -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
 
 --- 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
 -- @within BaseComponent
 -- @alias druid.dynamic_grid

druid/extended/hotkey.lua

@@ -1,6 +1,8 @@
 -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
 
 --- 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
 -- @within BaseComponent
 -- @alias druid.hotkey

druid/extended/input.lua

@@ -2,6 +2,8 @@
 
 --- Druid input text component.
 -- 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
 -- @module Input
 -- @within BaseComponent

druid/extended/lang_text.lua

@@ -12,6 +12,7 @@
 --
 -- <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
 -- @within BaseComponent
 -- @alias druid.lang_text

druid/extended/layout.lua

@@ -1,6 +1,8 @@
 -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
 
 --- 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
 -- @within BaseComponent
 -- @alias druid.layout

druid/extended/progress.lua

@@ -13,6 +13,8 @@
 --
 -- • 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
 -- @within BaseComponent
 -- @alias druid.progress

druid/extended/radio_group.lua

@@ -1,6 +1,8 @@
 -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
 
 --- 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
 -- @within BaseComponent
 -- @alias druid.radio_group

druid/extended/slider.lua

@@ -1,6 +1,8 @@
 -- Copyright (c) 2021 Maksim Tuprikov <insality@gmail.com>. This code is licensed under MIT license
 
 --- 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
 -- @within BaseComponent
 -- @alias druid.slider

druid/extended/swipe.lua

@@ -3,6 +3,8 @@
 --- Component to handle swipe gestures on node.
 -- Swipe will be triggered, if swipe was started and
 -- 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
 -- @within BaseComponent
 -- @alias druid.swipe

druid/helper.lua

@@ -10,6 +10,7 @@
 local const = require("druid.const")
 
 local M = {}
+M._some = { pepepe = true }
 
 
 local function get_text_width(text_node)
@@ -393,7 +394,14 @@ end
 --- Get text metric from GUI node.
 -- @function helper.get_text_metrics_from_node
 -- @tparam Node text_node
--- @treturn GUITextMetrics Fields: width, height, max_ascent, max_descent
+-- @treturn pepepe
+-- @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 = {

druid/system/druid_instance.lua

@@ -43,27 +43,29 @@
 --
 -- @module DruidInstance
 -- @alias druid_instance
--- @see Button
--- @see Blocker
 -- @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 CheckboxGroup
--- @see RadioGroup
--- @see Swipe
--- @see Drag
 -- @see DataList
--- @see Hover
+-- @see Drag
--- @see Layout
+-- @see DynamicGrid
 -- @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 class = require("druid.system.middleclass")

example/example.gui_script

@@ -85,7 +85,7 @@ local function init_top_panel(self)
 	gui.set_enabled(self.button_menu.node, false)
 
 	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)
 
 	self.button_code = self.druid:new_button("button_code/button", function()