rect docs

Author: mrDIMAS

src/SUMMARY.md

@@ -126,7 +126,7 @@
         - [Popup](./ui/popup.md)
         - [Progress bar](./ui/progress_bar.md)
         - [Range (WIP)](./ui/range.md)
-        - [Rect (WIP)](./ui/rect.md)
+        - [Rect](./ui/rect.md)
         - [Scroll bar](./ui/scroll_bar.md)
         - [Scroll panel](./ui/scroll_panel.md)
         - [Scroll viewer](./ui/scroll_viewer.md)

src/code/snippets/src/ui/mod.rs

@@ -31,6 +31,7 @@ pub mod vector_image;
 pub mod window;
 pub mod wrap_panel;
 mod selector;
+mod rect;
 
 use fyrox::asset::manager::ResourceManager;
 use fyrox::core::reflect::Reflect;

src/code/snippets/src/ui/rect.rs

@@ -0,0 +1,36 @@
+use fyrox::gui::{
+    core::{math::Rect, pool::Handle},
+    message::{MessageDirection, UiMessage},
+    rect::{RectEditor, RectEditorBuilder, RectEditorMessage},
+    widget::WidgetBuilder,
+    BuildContext, UiNode, UserInterface,
+};
+
+// ANCHOR: create_rect_editor
+fn create_rect_editor(ctx: &mut BuildContext) -> Handle<RectEditor<u32>> {
+    RectEditorBuilder::new(WidgetBuilder::new())
+        .with_value(Rect::new(0, 0, 10, 20))
+        .build(ctx)
+}
+// ANCHOR_END: create_rect_editor
+
+// ANCHOR: change_value
+fn change_value(rect_editor: Handle<UiNode>, ui: &UserInterface) {
+    ui.send(
+        rect_editor,
+        RectEditorMessage::Value(Rect::new(20, 20, 60, 80)),
+    );
+}
+// ANCHOR_END: change_value
+
+// ANCHOR: fetch_value
+fn fetch_value(rect_editor: Handle<UiNode>, message: &UiMessage) {
+    if let Some(RectEditorMessage::Value(value)) = message.data::<RectEditorMessage<u32>>() {
+        if message.destination() == rect_editor
+            && message.direction() == MessageDirection::FromWidget
+        {
+            println!("The new value is: {:?}", value)
+        }
+    }
+}
+// ANCHOR_END: fetch_value

src/ui/rect.md

@@ -1,3 +1,28 @@
-# Rect editor (WIP)
+# Rect editor
 
-![rect](rect.gif)
+![rect](rect.gif)
+
+Rect editor widget is used to show and edit `Rect` values. It shows four numeric fields: two for the top left corner
+of a rect, two for its size.
+
+## Example
+
+Rect editor can be created using `RectEditorBuilder`, like so:
+
+```rust
+{{#include ../code/snippets/src/ui/rect.rs:create_rect_editor}}
+```
+
+## Value
+
+To change the value of a rect editor, use `RectEditorMessage::Value` message:
+
+```rust
+{{#include ../code/snippets/src/ui/rect.rs:change_value}}
+```
+
+To "catch" the moment when the value of a rect editor has changed, listen to the same message, but check its direction:
+
+```rust
+{{#include ../code/snippets/src/ui/rect.rs:fetch_value}}
+```