glimmer-dsl-libui 0.0.27 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1014e0c2243936dc61a783c96c3f5760faf93692f8d60535667b29f5a0378cf9
-  data.tar.gz: 4176b09e4f89d5cdf2d182f1dceb9ae67aab71b3b28696d1a77e191708b931d8
+  metadata.gz: 588ece65aa562fd337018de00f5e60156926cb6d9ee6144f5f89e2e8dfaa2d74
+  data.tar.gz: f50f57a58f6b7915f5e9fc123eecf9e982be5f18ff93833a8d0603ce3955063d
 SHA512:
-  metadata.gz: 7080a17729c2059e0b7459a6087466d38a7fda9aa91be1964109418ec2bb8c55187d45fa75f6b2c83fa9c30d886c8efb84ca1c1714cf73e5e02b6a6a51741559
-  data.tar.gz: 9f21040ea200f827efcb235541fe28565361819aae0005653778d480b80b6e9d43e6ec7008e5512199abeb2e5832f2776beacda806cf260b73795bf5bfa7e9e5
+  metadata.gz: 6b0d02fde1567c4be008e81b91fc67df319fd2c46bf44466da6e4ff2e8a49f31bd239a78ed69be43f1338fa51dd4fcd648d6c5ecbe2aafe41fb345911df327bf
+  data.tar.gz: cfe32a98fddb52c1cf320e4e8d7651d0b083172ada4dd4b43441f0fdb839cde207841c96e39d9e47c7cffeb536a7d6620aed3abe869c790ce595c4361ac2988c

data/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Change Log
 
+## 0.1.2
+
+- Support re-opening a control by using `#content {...}`
+- Ensure destroying `path`/`rectangle` after drawing if it is declared inside `on_draw`
+- Observe `path` `fill` and `stroke` hashes for changes and automatically redraw area accordingly
+- New examples/dynamic_area2.rb (using stable paths)
+
+## 0.1.1
+
+- Support `area` listener: `on_draw`
+- New examples/basic_area2.rb
+
+## 0.1.0
+
+- Support examples/basic_area.rb
+- Support `area` control
+- Support `path(fill_mode)` control
+- Support `rectangle(x, y, width, height)` figure
+- Support `path` `fill` property
+- Support `path` `stroke` property
+
+## 0.0.28
+
+- Support automatic table row change when updating a row in `cell_rows` (e.g. `data[3] = ['new', 'row', 'cell', 'values']`)
+- Support `editable` property for `checkbox_column` (checkbox editing only works in Windows due to a [libui](https://github.com/andlabs/libui) limitation)
+- Support `editable`, `editable_checkbox`, and `editable_text` properties for `checkbox_text_column` (checkbox editing only works in Windows due to a [libui](https://github.com/andlabs/libui) limitation)
+- Fix examples/basic_table_checkbox_text.rb by removing `editable` property
+
 ## 0.0.27
 
 - New examples/form_table.rb

data/README.md

@@ -1,4 +1,4 @@
-# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for LibUI 0.0.27
+# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for LibUI 0.1.2
 ## Prerequisite-Free Ruby Desktop Development GUI Library
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-libui.svg)](http://badge.fury.io/rb/glimmer-dsl-libui)
 [![Maintainability](https://api.codeclimate.com/v1/badges/ce2853efdbecf6ebdc73/maintainability)](https://codeclimate.com/github/AndyObtiva/glimmer-dsl-libui/maintainability)
@@ -43,7 +43,7 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
 
 ## Table of Contents
 
-- [Glimmer DSL for LibUI 0.0.27](#-glimmer-dsl-for-libui-0027)
+  - [Glimmer DSL for LibUI 0.1.2](#-glimmer-dsl-for-libui-012)
   - [Glimmer GUI DSL Concepts](#glimmer-gui-dsl-concepts)
   - [Usage](#usage)
   - [API](#api)
@@ -52,6 +52,8 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
     - [Common Control Operations](#common-control-operations)
     - [Extra Dialogs](#extra-dialogs)
     - [Extra Operations](#extra-operations)
+    - [Table API](#table-api)
+    - [Area API](#area-api)
     - [Smart Defaults and Conventions](#smart-defaults-and-conventions)
     - [API Gotchas](#api-gotchas)
     - [Original API](#original-api)
@@ -79,6 +81,8 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
     - [Basic Table Checkbox Text](#basic-table-checkbox-text)
     - [Basic Table Progress Bar](#basic-table-progress-bar)
     - [Form Table](#form-table)
+    - [Basic Area](#basic-area)
+    - [Dynamic Area](#dynamic-area)
   - [Contributing to glimmer-dsl-libui](#contributing-to-glimmer-dsl-libui)
   - [Help](#help)
     - [Issues](#issues)
@@ -166,7 +170,7 @@ gem install glimmer-dsl-libui
 Or install via Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-libui', '~> 0.0.27'
+gem 'glimmer-dsl-libui', '~> 0.1.2'
 ```
 
 Add `require 'glimmer-dsl-libui'` at the top, and then `include Glimmer` into the top-level main object for testing or into an actual class for serious usage.
@@ -222,11 +226,12 @@ w.libui # => #<Fiddle::Pointer:0x00007fde53997980 ptr=0x00007fde51352a60 size=0
 Control(Args) | Properties | Listeners
 ------------- | ---------- | ---------
 `about_menu_item` | None | `on_clicked`
+`area` | None | `on_draw`
 `button(text as String)` | `text` (`String`) | `on_clicked`
 `button_column(name as String)` | `enabled` (Boolean) | None
 `checkbox(text as String)` | `checked` (Boolean), `text` (`String`) | `on_toggled`
-`checkbox_column(name as String)` | None | None
-`checkbox_text_column(name as String)` | `editable` (Boolean) | None
+`checkbox_column(name as String)` | `editable` (Boolean) | None
+`checkbox_text_column(name as String)` | `editable` (Boolean), `editable_checkbox` (Boolean), `editable_text` (Boolean) | None
 `combobox` | `items` (`Array` of `String`), `selected` (`Integer`) | `on_selected`
 `color_button` | `color` (Array of `red` as `Float`, `green` as `Float`, `blue` as `Float`, `alpha` as `Float`), `red` as `Float`, `green` as `Float`, `blue` as `Float`, `alpha` as `Float` | `on_changed`
 `date_picker` | `time` (`Hash` of keys: `sec` as `Integer`, `min` as `Integer`, `hour` as `Integer`, `mday` as `Integer`, `mon` as `Integer`, `year` as `Integer`, `wday` as `Integer`, `yday` as `Integer`, `dst` as Boolean) | `on_changed`
@@ -250,11 +255,13 @@ Control(Args) | Properties | Listeners
 `msg_box(window as Glimmer::LibUI::WindowProxy, title as String, description as String)` | None | None
 `msg_box_error(window as Glimmer::LibUI::WindowProxy, title as String, description as String)` | None | None
 `non_wrapping_multiline_entry` | `read_only` (Boolean), `text` (`String`) | `on_changed`
+`path` | `fill` (`Hash` of `:r` as `0`-`255`, `:g` as `0`-`255`, `:b` as `0`-`255`, `:a` as `0.0`-`1.0`), `stroke` (`Hash` of `:r` as `0`-`255`, `:g` as `0`-`255`, `:b` as `0`-`255`, `:a` as `0.0`-`1.0`, `:cap` as `Numeric`, `:join` as `Numeric`, `:thickness` as `Numeric`, `:miter_limit` as `Numeric` ) | None
 `preferences_menu_item` | None | `on_clicked`
 `progress_bar` | `value` (`Numeric`) | None
 `progress_bar_column(name as String)` | None | None
 `quit_menu_item` | None | `on_clicked`
 `radio_buttons` | `selected` (`Integer`) | `on_selected`
+`rectangle(x as Numeric, y as Numeric, width as Numeric, height as Numeric)` | None | None
 `slider(min as Numeric, max as Numeric)` | `value` (`Numeric`) | `on_changed`
 `spinbox(min as Numeric, max as Numeric)` | `value` (`Numeric`) | `on_changed`
 `tab` | `margined` (Boolean), `num_pages` (`Integer`) | None
@@ -301,6 +308,85 @@ Control(Args) | Properties | Listeners
 - `ControlProxy::image_proxies`: returns all instantiated `image` proxies in the application
 - `ControlProxy::main_window_proxy`: returns the first window proxy instantiated in the application
 - `ControlProxy#window_proxy`: returns the window proxy parent for a control
+- `ControlProxy#content {...}`: re-opens control's content to add more nested controls or properties
+
+### Table API
+
+The `table` control must first declare its columns via one of these column keywords (mentioned in [Supported Controls](#supported-controls)):
+  - `button_column`: expects `String` cell values
+  - `checkbox_column`: expects Boolean cell values
+  - `checkbox_text_column`: expects dual-element `Array` of Boolean and `String` cell values
+  - `image_column`: expects `image` cell values (produced by `image` and `image_part` keywords as per [Supported Controls](#supported-controls))
+  - `image_text_column`: expects dual-element `Array` of `image` and `String` cell values
+  - `text_column`: expects `String` cell values
+  - `progress_bar_column`: expects `Integer` cell values
+  
+Afterwards, it must declare its `cell_rows` array (`Array` of `Array`s of column cell values) and whether it is `editable` (Boolean) for all its columns.
+
+Note that the `cell_rows` property declaration results in "implicit data-binding" between the `table` control and `Array` of `Arrays` (a new innovation) to provide convenience automatic support for:
+- Deleting cell rows: Calling `Array#delete`, `Array#delete_at`, `Array#delete_if`, or any filtering/deletion `Array` method automatically deletes rows in actual `table` control
+- Inserting cell rows: Calling `Array#<<`, `Array#push`, `Array#prepend`, or any insertion/addition `Array` method automatically inserts rows in actual `table` control
+- Changing cell rows: Calling `Array#[]=`, `Array#map!`, or any update `Array` method automatically updates rows in actual `table` control
+
+### Area API
+
+The `area` control can be used in one of two ways:
+- Declaratively via stable paths: useful for stable paths that will not change later on. Simply nest `path` and figures like `rectangle` and all drawing logic is generated automatically. Paths proxy objects are preserved across redraws assuming there would be few stable paths (mostly for decorative reasons).
+- Semi-declaratively via on_draw listener dynamic paths: useful for more dynamic paths that will definitely change. Open an `on_draw` listener block and nest `path(area_draw_params)` and figures like `rectangle` and all drawing logic is generated automatically. Path proxy objects are destroyed (thrown-away) at the end of drawing, thus having less memory overhead for drawing thousands of dynamic paths.
+
+Here is an example of a declarative `area` with a stable path (you may copy/paste in [`girb`](#girb-glimmer-irb)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Area', 400, 400) {
+  margined true
+  
+  vertical_box {
+    area {
+      path { # a stable path is added declaratively
+        rectangle(0, 0, 400, 400)
+        
+        fill r: 102, g: 102, b: 204, a: 1.0
+      }
+    }
+  }
+}.show
+```
+
+![glimmer-dsl-libui-mac-basic-area.png](images/glimmer-dsl-libui-mac-basic-area.png)
+
+Here is the same example using a semi-declarative `area` with `on_draw` listener and a dynamic path (you may copy/paste in [`girb`](#girb-glimmer-irb)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Area', 400, 400) {
+  margined true
+  
+  vertical_box {
+    area {
+      on_draw do |area_draw_params|
+        path(area_draw_params) { # a dynamic path is added semi-declaratively inside on_draw block
+          rectangle(0, 0, 400, 400)
+          
+          fill r: 102, g: 102, b: 204, a: 1.0
+        }
+      end
+    }
+  }
+}.show
+```
+
+Check [examples/dynamic_area.rb](#dynamic-area) for a more detailed semi-declarative example.
+
+In general, it is recommended to use declarative stable paths whenever feasible since they require less code and simpler maintenance. But, in more advanced cases, semi-declarative dynamic paths could be used instead, especially if there are thousands of paths.
+
+To redraw an `area`, you may call `#queue_redraw_all` method.
 
 ### Smart Defaults and Conventions
 
@@ -327,13 +413,17 @@ Control(Args) | Properties | Listeners
 - Smart defaults for `grid` child attributes are `left` (`0`), `top` (`0`), `xspan` (`1`), `yspan` (`1`), `hexpand` (`false`), `halign` (`0`), `vexpand` (`false`), and `valign` (`0`)
 - The `table` control automatically constructs required `TableModelHandler`, `TableModel`, and `TableParams`, calculating all their arguments from `cell_rows` and `editable` properties (e.g. `NumRows`) as well as nested columns (e.g. `text_column`)
 - Table model instances are automatically freed from memory after `window` is destroyed.
-- Table `cell_rows` data has implicit data-binding to table cell values for deletion and insertion (done by diffing `cell_rows` value before and after change and auto-informing `table` of deletions [`::LibUI.table_model_row_deleted`] and insertions [`::LibUI.table_model_row_deleted`]). When deleting data rows from `cell_rows` array, then actual rows from the `table` are automatically deleted. When inserting data rows into `cell_rows` array, then actual `table` rows are automatically inserted.
+- Table `cell_rows` data has implicit data-binding to table cell values for deletion, insertion, and change (done by diffing `cell_rows` value before and after change and auto-informing `table` of deletions [`LibUI.table_model_row_deleted`], insertions [`LibUI.table_model_row_deleted`], and changes [`LibUI.table_model_row_changed`]). When deleting data rows from `cell_rows` array, then actual rows from the `table` are automatically deleted. When inserting data rows into `cell_rows` array, then actual `table` rows are automatically inserted. When updating data rows in `cell_rows` array, then actual `table` rows are automatically updated.
 - `image` instances are automatically freed from memory after `window` is destroyed.
 - `image` `width` and `height` can be left off if it has one `image_part` only as they default to the same `width` and `height` of the `image_part`
+- `area` paths are specified declaratively with figures underneath (e.g. `rectangle`) and `area` draw listener is automatically generated
+- Observe figure properties (e.g. `rectangle` `width`) for changes and automatically redraw containing area accordingly
+- Observe `path` `fill` and `stroke` hashes for changes and automatically redraw containing area accordingly
 
 ### API Gotchas
 
-There is no proper way to destroy `grid` children due to [libui](https://github.com/andlabs/libui) not offering any API for deleting them from `grid` (no `grid_delete` similar to `box_delete` for `horizontal_box` and `vertical_box`)
+- There is no proper way to destroy `grid` children due to [libui](https://github.com/andlabs/libui) not offering any API for deleting them from `grid` (no `grid_delete` similar to `box_delete` for `horizontal_box` and `vertical_box`).
+- `table` `checkbox_column` and `checkbox_text_column` checkbox editing only works on Windows and Linux (not Mac) due to a current limitation in [libui](https://github.com/andlabs/ui/issues/357).
 
 ### Original API
 
@@ -2561,6 +2651,360 @@ window('Contacts', 600, 600) { |w|
 }.show
 ```
 
+### Basic Area
+
+[examples/basic_area.rb](examples/basic_area.rb)
+
+Run with this command from the root of the project if you cloned the project:
+
+```
+ruby -r './lib/glimmer-dsl-libui' examples/basic_area.rb
+```
+
+Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
+
+```
+ruby -r glimmer-dsl-libui -e "require 'examples/basic_area'"
+```
+
+Mac
+
+![glimmer-dsl-libui-mac-basic-area.png](images/glimmer-dsl-libui-mac-basic-area.png)
+
+Linux
+
+![glimmer-dsl-libui-linux-basic-area.png](images/glimmer-dsl-libui-linux-basic-area.png)
+
+[LibUI](https://github.com/kojix2/LibUI) Original Version:
+
+```ruby
+require 'libui'
+
+UI = LibUI
+
+UI.init
+
+handler = UI::FFI::AreaHandler.malloc
+area    = UI.new_area(handler)
+brush   = UI::FFI::DrawBrush.malloc
+
+handler_draw_event = Fiddle::Closure::BlockCaller.new(0, [1, 1, 1]) do |_, _, area_draw_params|
+  path = UI.draw_new_path(0)
+  UI.draw_path_add_rectangle(path, 0, 0, 400, 400)
+  UI.draw_path_end(path)
+  brush.Type = 0
+  brush.R = 0.4
+  brush.G = 0.4
+  brush.B = 0.8
+  brush.A = 1.0
+  area_draw_params = UI::FFI::AreaDrawParams.new(area_draw_params)
+  UI.draw_fill(area_draw_params.Context, path, brush.to_ptr)
+  UI.draw_free_path(path)
+end
+
+handler.Draw         = handler_draw_event
+handler.MouseEvent   = Fiddle::Closure::BlockCaller.new(0, [0]) {}
+handler.MouseCrossed = Fiddle::Closure::BlockCaller.new(0, [0]) {}
+handler.DragBroken   = Fiddle::Closure::BlockCaller.new(0, [0]) {}
+handler.KeyEvent     = Fiddle::Closure::BlockCaller.new(0, [0]) {}
+
+box = UI.new_vertical_box
+UI.box_set_padded(box, 1)
+UI.box_append(box, area, 1)
+
+main_window = UI.new_window('Basic Area', 400, 400, 1)
+UI.window_set_margined(main_window, 1)
+UI.window_set_child(main_window, box)
+
+UI.window_on_closing(main_window) do
+  UI.control_destroy(main_window)
+  UI.quit
+  0
+end
+UI.control_show(main_window)
+
+UI.main
+UI.quit
+```
+
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+
+```ruby
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Area', 400, 400) {
+  margined true
+  
+  vertical_box {
+    area {
+      path { # a stable path is added declaratively
+        rectangle(0, 0, 400, 400)
+        
+        fill r: 102, g: 102, b: 204, a: 1.0
+      }
+    }
+  }
+}.show
+```
+
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2:
+
+```ruby
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Area', 400, 400) {
+  margined true
+  
+  vertical_box {
+    area {
+      on_draw do |area_draw_params|
+        path(area_draw_params) { # a dynamic path is added semi-declaratively inside on_draw block
+          rectangle(0, 0, 400, 400)
+          
+          fill r: 102, g: 102, b: 204, a: 1.0
+        }
+      end
+    }
+  }
+}.show
+```
+
+### Dynamic Area
+
+[examples/dynamic_area.rb](examples/dynamic_area.rb)
+
+Run with this command from the root of the project if you cloned the project:
+
+```
+ruby -r './lib/glimmer-dsl-libui' examples/dynamic_area.rb
+```
+
+Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
+
+```
+ruby -r glimmer-dsl-libui -e "require 'examples/dynamic_area'"
+```
+
+Mac
+
+![glimmer-dsl-libui-mac-dynamic-area.png](images/glimmer-dsl-libui-mac-dynamic-area.png)
+![glimmer-dsl-libui-mac-dynamic-area-updated.png](images/glimmer-dsl-libui-mac-dynamic-area-updated.png)
+
+Linux
+
+![glimmer-dsl-libui-linux-dynamic-area.png](images/glimmer-dsl-libui-linux-dynamic-area.png)
+![glimmer-dsl-libui-linux-dynamic-area-updated.png](images/glimmer-dsl-libui-linux-dynamic-area-updated.png)
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+
+```ruby
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Dynamic Area', 240, 500) {
+  margined true
+  
+  vertical_box {
+    label('Rectangle Properties') {
+      stretchy false
+    }
+    
+    form {
+      stretchy false
+      
+      @x_spinbox = spinbox(0, 1000) {
+        label 'x'
+        value 25
+        
+        on_changed do
+          @area.queue_redraw_all
+        end
+      }
+      
+      @y_spinbox = spinbox(0, 1000) {
+        label 'y'
+        value 25
+        
+        on_changed do
+          @area.queue_redraw_all
+        end
+      }
+      
+      @width_spinbox = spinbox(0, 1000) {
+        label 'width'
+        value 150
+        
+        on_changed do
+          @area.queue_redraw_all
+        end
+      }
+      
+      @height_spinbox = spinbox(0, 1000) {
+        label 'height'
+        value 150
+        
+        on_changed do
+          @area.queue_redraw_all
+        end
+      }
+      
+      @red_spinbox = spinbox(0, 255) {
+        label 'red'
+        value 102
+        
+        on_changed do
+          @area.queue_redraw_all
+        end
+      }
+      
+      @green_spinbox = spinbox(0, 255) {
+        label 'green'
+        value 102
+        
+        on_changed do
+          @area.queue_redraw_all
+        end
+      }
+      
+      @blue_spinbox = spinbox(0, 255) {
+        label 'blue'
+        value 204
+        
+        on_changed do
+          @area.queue_redraw_all
+        end
+      }
+      
+      @alpha_spinbox = spinbox(0, 100) {
+        label 'alpha'
+        value 100
+        
+        on_changed do
+          @area.queue_redraw_all
+        end
+      }
+    }
+    
+    @area = area {
+      on_draw do |area_draw_params|
+        path(area_draw_params) { # a dynamic path is added semi-declaratively inside on_draw block
+          rectangle(@x_spinbox.value, @y_spinbox.value, @width_spinbox.value, @height_spinbox.value)
+          
+          fill r: @red_spinbox.value, g: @green_spinbox.value, b: @blue_spinbox.value, a: @alpha_spinbox.value / 100.0
+        }
+      end
+    }
+  }
+}.show
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2:
+
+```ruby
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Dynamic Area', 240, 600) {
+  margined true
+  
+  vertical_box {
+    label('Rectangle Properties') {
+      stretchy false
+    }
+    
+    form {
+      stretchy false
+      
+      @x_spinbox = spinbox(0, 1000) {
+        label 'x'
+        value 25
+        
+        on_changed do
+          @rectangle.x = @x_spinbox.value # updating properties automatically triggers area.queue_redraw_all
+        end
+      }
+      
+      @y_spinbox = spinbox(0, 1000) {
+        label 'y'
+        value 25
+        
+        on_changed do
+          @rectangle.y = @y_spinbox.value # updating properties automatically triggers area.queue_redraw_all
+        end
+      }
+      
+      @width_spinbox = spinbox(0, 1000) {
+        label 'width'
+        value 150
+        
+        on_changed do
+          @rectangle.width = @width_spinbox.value # updating properties automatically triggers area.queue_redraw_all
+        end
+      }
+      
+      @height_spinbox = spinbox(0, 1000) {
+        label 'height'
+        value 150
+        
+        on_changed do
+          @rectangle.height = @height_spinbox.value # updating properties automatically triggers area.queue_redraw_all
+        end
+      }
+      
+      @red_spinbox = spinbox(0, 255) {
+        label 'red'
+        value 102
+        
+        on_changed do
+          @path.fill[:r] = @red_spinbox.value # updating hash properties automatically triggers area.queue_redraw_all
+        end
+      }
+      
+      @green_spinbox = spinbox(0, 255) {
+        label 'green'
+        value 102
+        
+        on_changed do
+          @path.fill[:g] = @green_spinbox.value # updating hash properties automatically triggers area.queue_redraw_all
+        end
+      }
+      
+      @blue_spinbox = spinbox(0, 255) {
+        label 'blue'
+        value 204
+        
+        on_changed do
+          @path.fill[:b] = @blue_spinbox.value # updating hash properties automatically triggers area.queue_redraw_all
+        end
+      }
+      
+      @alpha_spinbox = spinbox(0, 100) {
+        label 'alpha'
+        value 100
+        
+        on_changed do
+          @path.fill[:a] = @alpha_spinbox.value / 100.0 # updating hash properties automatically triggers area.queue_redraw_all
+        end
+      }
+    }
+    
+    area {
+      @path = path { # stable path
+        @rectangle = rectangle(@x_spinbox.value, @y_spinbox.value, @width_spinbox.value, @height_spinbox.value)
+        
+        fill r: @red_spinbox.value, g: @green_spinbox.value, b: @blue_spinbox.value, a: @alpha_spinbox.value / 100.0
+      }
+    }
+  }
+}.show
+```
+
 ## Contributing to glimmer-dsl-libui
 
 -   Check out the latest master to make sure the feature hasn't been

data/VERSION

@@ -1 +1 @@
-0.0.27
+0.1.2

data/examples/basic_area.rb

@@ -0,0 +1,17 @@
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Area', 400, 400) {
+  margined true
+  
+  vertical_box {
+    area {
+      path { # a stable path is added declaratively
+        rectangle(0, 0, 400, 400)
+        
+        fill r: 102, g: 102, b: 204, a: 1.0
+      }
+    }
+  }
+}.show

data/examples/basic_area2.rb

@@ -0,0 +1,19 @@
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Area', 400, 400) {
+  margined true
+  
+  vertical_box {
+    area {
+      on_draw do |area_draw_params|
+        path(area_draw_params) { # a dynamic path is added semi-declaratively inside on_draw block
+          rectangle(0, 0, 400, 400)
+          
+          fill r: 102, g: 102, b: 204, a: 1.0
+        }
+      end
+    }
+  }
+}.show

data/examples/basic_table_checkbox_text.rb

@@ -17,9 +17,7 @@ window('Animal sounds', 400, 200) {
     table {
       text_column('Animal')
       text_column('Sound')
-      checkbox_text_column('Description') {
-        editable true
-      }
+      checkbox_text_column('Description')
 
       cell_rows data
     }