|
-| **[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=ui_example_basic_text) | 
|
-| **[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=ui_example_basic_scroll) | 
|
-| **[Blocker](https://insality.github.io/druid/modules/Blocker.html)** | Logic over GUI Node. Don't pass any user input below node area size. | [Blocker Example](https://insality.github.io/druid/druid/?example=ui_example_basic_blocker) | 
|
-| **[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 | [Back Handler Example](https://insality.github.io/druid/druid/?example=ui_example_basic_back_handler) | 
|
-| **[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=ui_example_basic_grid) | 
|
-| **[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. | [Hover Example](https://insality.github.io/druid/druid/?example=ui_example_basic_hover) | 
|
-| **[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=ui_example_basic_swipe) | 
|
-| **[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=ui_example_basic_drag) | 
|
-
-
-### Extended components
-
-| Name | Description | Example | 
|
-| **[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=ui_example_basic_input) | 
|
-| **[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` | [Lang Text Example](https://insality.github.io/druid/druid/?example=ui_example_window_language) | 
|
-| **[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=ui_example_basic_progress_bar) | 
|
-| **[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=ui_example_basic_slider) | 
|
-| **[Timer](https://insality.github.io/druid/modules/Timer.html)** | Logic over GUI Text. Handle basic timer functions. | [Timer Example](https://insality.github.io/druid/druid/?example=ui_example_basic_timer) | 
|
-| **[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=ui_example_basic_hotkey) | 
|
-| **[Layout](https://insality.github.io/druid/modules/Layout.html)** | Logic over GUI Node. Arrange nodes inside layout node with margin/paddings settings. | [Layout Example](https://insality.github.io/druid/druid/?example=ui_example_layout_basic) | 
|
-| **[Rich Input](https://insality.github.io/druid/modules/RichInput.html)** | Logic over GUI Node and GUI Text (or Text component). Provides rich text input with different styles and text formatting. | [Rich Input Example](https://insality.github.io/druid/druid/?example=ui_example_basic_rich_input) | 
|
-| **[Rich Text](https://insality.github.io/druid/modules/RichText.html)** | Logic over GUI Text. Provides rich text formatting with different styles and text formatting. | [Rich Text Example](https://insality.github.io/druid/druid/?example=ui_example_basic_rich_text) | 
|
-
-For a complete overview, see: **_[components.md](docs_md/01-components.md)_**.
+| **[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/?example=ui_example_basic_button) | Documentation for Druid Framework
- -Modules
-| BackHandler | -Component with event on back and backspace button. | -
| Blocker | -Component to consume input in special zone defined by GUI node. | -
| Button | -Druid Component for Handling User Click Interactions: Click, Long Click, Double Click, and More. | -
| Drag | -Component to handle drag action on node. | -
| Hover | -Component to handle hover node interaction | -
| Scroll | -Component to handle scroll content. | -
| StaticGrid | -Component to handle component's position by row and columns. | -
| Text | -Component for Wrapping GUI Text Nodes: Druid Text
- ## Overview ## - Druid Text is a component that provides various adjustment modes for text nodes. |
-
| BaseComponent | -Basic class for all Druid components. | -
| RichInput | -Druid Rich Input custom component. | -
| RichText | -Druid Rich Text Custom Component. | -
| Druid | -Druid UI Component Framework. | -
| DruidEvent | -Druid Event Module
- The Event module provides a simple class for handling callbacks. |
-
| DataList | -Component to manage data for huge dataset in scroll. | -
| DynamicGrid | -Component to handle placing components in row | -
| Hotkey | -Druid hotkey component | -
| Input | -Druid input text component. | -
| LangText | -Component to wrap over GUI Text nodes with localization helpers
- # Overview # - • The initialization of druid.set_text_function is required to enable localization - using the localization ID. |
-
| Layout | -Layout management on node | -
| Progress | -Druid component to handle the progress bars. | -
| Slider | -Druid slider component | -
| Swipe | -Component to handle swipe gestures on node. | -
| Timer | -Component to handle GUI timers. | -
| Helper | -Helper module with various usefull GUI functions. | -
| DruidInstance | -Druid Instance which you use for component creation. | -
diff --git a/wiki/basic_usage.md b/wiki/basic_usage.md
new file mode 100644
index 0000000..187dd52
--- /dev/null
+++ b/wiki/basic_usage.md
@@ -0,0 +1,176 @@
+# Basic Usage
+
+This guide will help you get started with **Druid** UI framework. We'll cover the basic setup and usage patterns.
+
+## Initial Setup
+
+To use **Druid**, you need to create a **Druid** instance in your GUI script. This instance will handle all component management and core functionality.
+
+Create a new `*.gui_script` file with the following template:
+
+```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_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
+```
+
+Add this script to your GUI scene. Now you can start creating **Druid** components.
+
+> **Note:** When passing nodes to components, you can use node name strings instead of `gui.get_node()` function.
+
+## Basic Components Example
+
+Here's a simple example showing how to create and use basic **Druid** components:
+
+```lua
+local druid = require("druid.druid")
+
+-- All component callbacks pass "self" as first argument
+-- This "self" is a context data passed in `druid.new(context)`
+local function on_button_callback(self)
+ self.text:set_text("The button clicked!")
+end
+
+function init(self)
+ self.druid = druid.new(self)
+ -- We can use the node_id instead of gui.get_node():
+ self.button = self.druid:new_button("button_node_id", on_button_callback)
+ self.text = self.druid:new_text("text_node_id", "Hello, Druid!")
+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
+```
+
+## Widgets
+
+Widgets are reusable UI components that encapsulate multiple **Druid** components. Read more in the [Widgets](wiki/widgets.md) documentation.
+
+### Creating a Widget
+
+Create a new Lua file for your widget class. This file should be placed near the corresponding GUI file with the same name.
+
+Define `init` function to initialize the widget.
+
+Here's a basic widget example:
+
+```lua
+---@class your_widget_class: druid.widget
+local M = {}
+
+function M:init()
+ self.root = self:get_node("root")
+ self.button = self.druid:new_button("button_node_id", self.on_click)
+ self.text = self.druid:new_text("text_node_id", "Hello, Druid!")
+end
+
+function M:on_click()
+ self.text:set_text("The button clicked!")
+end
+
+return M
+```
+
+### Using Widgets
+
+You can create widgets in your GUI script like this:
+
+```lua
+local druid = require("druid.druid")
+
+function init(self)
+ self.druid = druid.new(self)
+ self.my_widget = self.druid:new_widget(your_widget_class)
+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
+```
+
+## Widget Templates
+
+Widgets can use templates defined in your GUI scene. Templates are collections of nodes that define the widget's structure.
+
+### Using Templates
+
+If you have a GUI template with ID `my_widget_example` containing `button_node_id` and `text_node_id` nodes, you can use it like this:
+
+```lua
+function init(self)
+ self.druid = druid.new(self)
+ self.my_widget = self.druid:new_widget(your_widget_class, "my_widget_example")
+
+ self.my_widget.button.on_click:subscribe(function()
+ print("my custom callback")
+ end)
+ self.my_widget.text:set_text("Hello, Widgets!")
+end
+```
+
+### Dynamic Templates
+
+For dynamically created GUI templates (from prefabs), you can pass nodes directly to the widget:
+
+```lua
+function init(self)
+ self.druid = druid.new(self)
+ self.prefab = gui.get_node("my_widget_prefab/root")
+ local nodes = gui.clone_tree(self.prefab)
+ self.my_widget = self.druid:new_widget(your_widget_class, "my_widget_example", nodes)
+end
+```
+
+You can also use the root node ID or node directly:
+
+```lua
+self.my_widget = self.druid:new_widget(your_widget_class, "my_widget_example", "my_widget_prefab/root")
+-- or
+self.my_widget = self.druid:new_widget(your_widget_class, "my_widget_example", self.prefab)
+```
+
+
+
diff --git a/docs_md/changelog.md b/wiki/changelog.md
similarity index 95%
rename from docs_md/changelog.md
rename to wiki/changelog.md
index a74190b..39ff472 100644
--- a/docs_md/changelog.md
+++ b/wiki/changelog.md
@@ -574,3 +574,43 @@ And all my other supporters! Very appreciated!
Please support me if you like this project! It will help me keep engaged to update **Druid** and make it even better!
[](https://github.com/sponsors/insality) [](https://ko-fi.com/insality) [](https://www.buymeacoffee.com/insality)
+
+
+### Druid 1.1
+
+Hello! Druid 1.1 is here! It's brings a lot of new features and improvements. Let's dive in!
+
+---
+
+**Milestone**:
+
+**Changelog 1.1**
+- Remove external annotations, remove old HTML API page
+- Fully annotated code and new API README page (hope more comfortable to use)
+- Widgets here!
+ - A replacement for `custom_components`. Basically it's the same, but `widgets` contains no boilerplate code and more convinient to use.
+ - Now I can include a kind of `widgets` with Druid and you can use it almost instantly in your project.
+- Removed `druid.register()`. Now all components are available by default and available with `self.druid:new_*` functions
+ - This means the Druid will be bigger in size, but it's much comfortable to use
+ - In case you want to delete components you not using, you can do it in fork in `druid.lua` file
+ - Any additional widgets, color library will be not included until you use it
+- Remove `druid.event`, replaced with `defold-event` library. Now it required to double dependency to use Druid.
+- Add Druid UI kit, contains atlas so now you can use Druid GUI files in your projects.
+ - Contains mostly basic shapes for the UI and can contains several icons. Atlas is a small, only `128x128` size and will be included in build only if you use it.
+- [Text]: Add `trim_left` and `scale_then_trim_left` text adjust modes
+- [Text]: Add `set_text` function instead `set_to` (now it deprecated)
+- Add `druid.color` module to work with colors and palettes
+- Add `container` component to handle more complex adaptive layouts
+- [Shaders] Add repeat, hard image stencil and world gui materials
+- [Widget] Add widget `mini_graph`
+- [Widget] Add widget `memory_panel`
+- [Widget] Add widget `fps_panel`
+- [Widget] Add widget `properties_panel`
+ - Include `property_button` widget
+ - Include `property_checkbox` widget
+ - Include `property_input` widget
+ - Include `property_left_right_selector` widget
+ - Include `property_slider` widget
+ - Include `property_text` widget
+ - Include `property_vector3` widget
+- Removed old `druid.no_stencil_check` and `druid.no_auto_template` flags. Now it's always disabled
diff --git a/wiki/optimize_druid_size.md b/wiki/optimize_druid_size.md
new file mode 100644
index 0000000..675e962
--- /dev/null
+++ b/wiki/optimize_druid_size.md
@@ -0,0 +1,54 @@
+# Optimize Druid Size
+
+From the Druid 1.1 release now all components are included by default. This was done to simplify the usage of Druid and remove the `druid.register` function which raised a lot of questions about using the non-included components.
+
+This also means that the size of the Druid library for the build now is slightly larger than before. While this will be a not issue for most users, for those who want to redure the build size for a kind of ~50kb in case not using a lot of `extended` components, you can strip these components from the build.
+
+## Stripping Components
+
+You need to download and modify the Druid library inside your project. To strip the not used components you need to edit the `druid/system/druid_instance.lua` file.
+
+For example, if you want to strip the `hotkey` component, you need to remove the `new_hotkey` function from the `M` table.
+
+You need to delete these lines:
+
+```lua
+local hotkey = require("druid.extended.hotkey")
+---Create Hotkey component
+---@param keys_array string|string[] Keys for trigger action. Should contains one action key and any amount of modificator keys
+---@param callback function|nil The callback function
+---@param callback_argument any|nil The argument to pass into the callback function
+---@return druid.hotkey component Hotkey component
+function M:new_hotkey(keys_array, callback, callback_argument)
+ return self:new(hotkey, keys_array, callback, callback_argument)
+end
+```
+
+Thats all. Now the Druid library will have no any links to the `hotkey` component and the size of the build will be reduced by size of this component.
+
+## Component Sizes
+
+Here is a table with the size of the components in the Druid library at the state of the Druid 1.1 release. Just for information.
+
+| Component | Size (Desktop) | Size (Mobile) |
+|-----------------|----------------|---------------|
+| `button` | 4.36 kb | 2.42 kb |
+| `text` | 5.31 kb | 2.90 kb |
+| `scroll` | 8.27 kb | 4.73 kb |
+| `grid` | 5.97 kb | 2.87 kb |
+| `blocker` | 0.66 kb | 0.45 kb |
+| `back_handler` | 0.57 kb | 0.42 kb |
+| `hover` | 2.31 kb | 1.34 kb |
+| `drag` | 3.73 kb | 2.17 kb |
+| `progress` | 2.76 kb | 1.64 kb |
+| `slider` | 2.67 kb | 1.66 kb |
+| `swipe` | 2.02 kb | 1.23 kb |
+| `input` | 5.59 kb | 3.38 kb |
+| `timer` | 1.47 kb | 0.94 kb |
+| `layout` | 4.96 kb | 2.83 kb |
+| `lang_text` | 1.10 kb | 0.63 kb |
+| `hotkey` | 2.29 kb | 1.46 kb |
+| `data_list` | 3.24 kb | 1.81 kb |
+| `container` | 6.86 kb | 3.75 kb |
+| `rich_text` | 13.24 kb | 8.27 kb |
+| `rich_input` | 4.16 kb | 2.38 kb |
diff --git a/wiki/widgets.md b/wiki/widgets.md
new file mode 100644
index 0000000..f19a6e3
--- /dev/null
+++ b/wiki/widgets.md
@@ -0,0 +1,113 @@
+# Widgets
+
+Widgets are reusable UI components that simplify the creation and management of user interfaces in your game.
+
+## What is widget
+
+Before widgets, there were "custom components". Widgets replace custom components. Basically, they're the same thing, with the only difference being how they're initialized.
+
+Let's see a basic custom component template:
+
+```lua
+local component = require("druid.component")
+
+---@class my_component: druid.component
+local M = component.create("my_component")
+
+function M:init(template, nodes, output_string)
+ self:set_template(template)
+ self:set_nodes(nodes)
+ self.druid = self:get_druid()
+
+ self.druid:new_button("button_node_name", print, output_string)
+end
+```
+
+Basic components are created with the `druid:new()` function:
+
+```lua
+local template = "my_component" -- The template name on GUI scene, if nil will take nodes directly by gui.get_node()
+local nodes = gui.clone_tree(gui.get_node("my_component/root")) -- We can clone component nodes and init over cloned nodes
+
+local my_component = druid:new("my_component", template, nodes, "Hello world!")
+```
+
+Now, let's see how to do it with widgets:
+
+```lua
+---@type my_widget: druid.widget
+local M = {}
+
+function M:init(output_string)
+ self.druid:new_button("button_node_name", print, output_string)
+end
+
+return M
+```
+
+That's all! The same functionality but without any boilerplate code, just a Lua table. The Druid instance, templates and nodes are already created and available.
+
+And you can create your own widgets like this:
+
+```lua
+local druid = require("druid.druid")
+local my_widget = require("widgets.my_widget.my_widget")
+
+function init(self)
+ self.druid = druid.new(self)
+ self.my_widget = self.druid:new_widget(my_widget, template, nodes, "Hello world!")
+end
+```
+
+So now creating UI components with widgets is much easier and cleaner than using custom components.
+
+## Create a new widget
+
+Let's start from the beginning. Widgets usually consist of 2 parts:
+
+1. GUI scene
+2. Widget Lua module
+
+Make a GUI scene of your widget (user portrait avatar panel, shop window, game panel menu, etc). Design it as you wish, but it's recommended to add one `root` node with the id `root` and make all your other nodes children of this node. This makes working with the widget much easier. Also ofter this root will represent the widget size, so it's recommended to set it's size to the desired size of the widget.
+
+Let's create a new widget by creating a new file next to our GUI scene file:
+
+```lua
+-- my_widget.lua
+local M = {}
+
+function M:init()
+ self.root = self:get_node("root")
+ self.button = self.druid:new_button("button_open", self.open_widget, self)
+end
+
+function M:open_widget()
+ print("Open widget pressed")
+end
+
+return M
+```
+
+That's the basic creation process. Now we have a widget where we access the root node and use the "button_open" node as a button.
+
+Now, let's create a widget inside your game scene.
+
+Place a widget (GUI template) on your main scene. Then import Druid and create a new widget instance using this GUI template placed on the scene:
+
+```lua
+local druid = require("druid.druid")
+local my_widget = require("widgets.my_widget.my_widget")
+
+function init(self)
+ self.druid = druid.new(self)
+ self.my_widget = self.druid:new_widget(my_widget, "my_widget")
+
+ -- In case we want to clone it and use several times we can pass the nodes table
+ local array_of_widgets = {}
+ for index = 1, 10 do
+ -- For widgets now we can use a root node directly instead of manually cloning the nodes
+ local widget = self.druid:new_widget(my_widget, "my_widget", "my_widget/root")
+ table.insert(array_of_widgets, widget)
+ end
+end
+```