glimmer-dsl-libui 0.1.5 → 0.1.9

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.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.1.9
 ## 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)
@@ -115,14 +115,62 @@ window('Area Gallery', 400, 400) {
       }
 
       fill r: 202, g: 102, b: 204, a: 0.5
-      stroke thickness: 2, r: 0, g: 0, b: 0
+      stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
     }
     path { # declarative stable path
       arc(200, 200, 90, 0, 360, false)
 
       fill r: 202, g: 102, b: 204, a: 0.5
-      stroke thickness: 2, r: 0, g: 0, b: 0
+      stroke r: 0, g: 0, b: 0, thickness: 2
     }
+    
+    on_mouse_event do |area_mouse_event|
+      p area_mouse_event
+    end
+    
+    on_mouse_moved do |area_mouse_event|
+      puts 'moved'
+    end
+    
+    on_mouse_down do |area_mouse_event|
+      puts 'mouse down'
+    end
+    
+    on_mouse_up do |area_mouse_event|
+      puts 'mouse up'
+    end
+    
+    on_mouse_drag_started do |area_mouse_event|
+      puts 'drag started'
+    end
+    
+    on_mouse_dragged do |area_mouse_event|
+      puts 'dragged'
+    end
+    
+    on_mouse_dropped do |area_mouse_event|
+      puts 'dropped'
+    end
+    
+    on_mouse_entered do
+      puts 'entered'
+    end
+    
+    on_mouse_exited do
+      puts 'exited'
+    end
+    
+    on_key_event do |area_key_event|
+      p area_key_event
+    end
+    
+    on_key_up do |area_key_event|
+      puts 'key up'
+    end
+    
+    on_key_down do |area_key_event|
+      puts 'key down'
+    end
   }
 }.show
 ```
@@ -143,7 +191,7 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
 
 ## Table of Contents
 
-- [Glimmer DSL for LibUI 0.1.4](#-glimmer-dsl-for-libui-014)
+- [Glimmer DSL for LibUI 0.1.9](#-glimmer-dsl-for-libui-019)
   - [Glimmer GUI DSL Concepts](#glimmer-gui-dsl-concepts)
   - [Usage](#usage)
   - [Girb (Glimmer IRB)](#girb-glimmer-irb)
@@ -249,10 +297,10 @@ require 'glimmer-dsl-libui'
 
 include Glimmer
 
-window('hello world', 300, 200) { |w|
+window('hello world', 300, 200) {
   button('Button') {
     on_clicked do
-      msg_box(w, 'Information', 'You clicked the button')
+      msg_box('Information', 'You clicked the button')
     end
   }
   
@@ -273,7 +321,7 @@ gem install glimmer-dsl-libui
 Or install via Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-libui', '~> 0.1.4'
+gem 'glimmer-dsl-libui', '~> 0.1.9'
 ```
 
 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.
@@ -347,7 +395,7 @@ w.libui # => #<Fiddle::Pointer:0x00007fde53997980 ptr=0x00007fde51352a60 size=0
 Control(Args) | Properties | Listeners
 ------------- | ---------- | ---------
 `about_menu_item` | None | `on_clicked`
-`area` | None | `on_draw`
+`area` | None | `on_draw(area_draw_params)`, `on_mouse_event(area_mouse_event)`, `on_mouse_down(area_mouse_event)`, `on_mouse_up(area_mouse_event)`, `on_mouse_drag_started(area_mouse_event)`, `on_mouse_dragged(area_mouse_event)`, `on_mouse_dropped(area_mouse_event)`, `on_mouse_entered`, `on_mouse_exited`, `on_key_event(area_key_event)`, `on_key_down(area_key_event)`, `on_key_up(area_key_event)`
 `arc(x_center as Numeric, y_center as Numeric, radius as Numeric, start_angle as Numeric, sweep as Numeric, is_negative as Boolean)` | `x_center` (`Numeric`), `y_center` (`Numeric`), `radius` (`Numeric`), `start_angle` (`Numeric`), `sweep` (`Numeric`), `is_negative` (Boolean) | None
 `bezier(c1_x as Numeric, c1_y as Numeric, c2_x as Numeric, c2_y as Numeric, end_x as Numeric, end_y as Numeric)` | `c1_x` (`Numeric`), `c1_y` (`Numeric`), `c2_x` (`Numeric`), `c2_y` (`Numeric`), `end_x` (`Numeric`), `end_y` (`Numeric`) | None
 `button(text as String)` | `text` (`String`) | `on_clicked`
@@ -378,10 +426,10 @@ Control(Args) | Properties | Listeners
 `menu(text as String)` | None | None
 `menu_item(text as String)` | `checked` (Boolean) | `on_clicked`
 `multiline_entry` | `read_only` (Boolean), `text` (`String`) | `on_changed`
-`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
+`msg_box(window = main_window as Glimmer::LibUI::WindowProxy, title as String, description as String)` | None | None
+`msg_box_error(window = main_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
+`path(draw_fill_mode = :winding)` | `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 (`:round`, `:square`, `:flat`), `:join` as (`:miter`, `:round`, `:bevel`), `:thickness` as `Numeric`, `:miter_limit` as `Numeric`, `:dashes` as `Array` of `Numeric` ) | None
 `preferences_menu_item` | None | `on_clicked`
 `progress_bar` | `value` (`Numeric`) | None
 `progress_bar_column(name as String)` | None | None
@@ -395,7 +443,7 @@ Control(Args) | Properties | Listeners
 `tab_item(name as String)` | `index` [read-only] (`Integer`), `margined` (Boolean), `name` [read-only] (`String`) | None
 `table` | `cell_rows` (`Array` (rows) of `Arrays` (row columns) of cell values (e.g. `String` values for `text_column` cells or `Array` of `image`/`String` for `image_text_column`)), `editable` as Boolean | None
 `text_column(name as String)` | `editable` (Boolean) | None
-`time_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`
+`time_picker` | `time` (`Hash` of keys: `sec` as `Integer`, `min` as `Integer`, `hour` as `Integer`) | `on_changed`
 `vertical_box` | `padded` (Boolean) | None
 `window(title as String, width as Integer, height as Integer, has_menubar as Boolean)` | `borderless` (Boolean), `content_size` (width `Numeric`, height `Numeric`), `fullscreen` (Boolean), `margined` (Boolean), `title` (`String`) | `on_closing`, `on_content_size_changed`, `on_destroy`
 
@@ -585,6 +633,8 @@ window('Basic Area', 400, 400) {
 
 Check [examples/dynamic_area.rb](#dynamic-area) for a more detailed semi-declarative example.
 
+`path` can receive a `draw_fill_mode` argument that can accept values `:winding` or `:alternate` and defaults to `:winding`.
+
 Available nested `path` shapes:
 - `rectangle(x as Numeric, y as Numeric, width as Numeric, height as Numeric)`
 - `square(x as Numeric, y as Numeric, length as Numeric)`
@@ -606,6 +656,41 @@ The `area_draw_params` argument for `on_draw` block is a hash consisting of the
 
 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 dynamic paths that need maximum performance and low memory footprint.
 
+`area` supported mouse listeners are:
+- `on_key_event {|area_key_event| ...}`: general catch-all key event (recommend using fine-grained key events below instead)
+- `on_key_down {|area_key_event| ...}`
+- `on_key_up {|area_key_event| ...}`
+- `on_mouse_event {|area_mouse_event| ...}`: general catch-all mouse event (recommend using fine-grained mouse events below instead)
+- `on_mouse_down {|area_mouse_event| ...}`
+- `on_mouse_up {|area_mouse_event| ...}`
+- `on_mouse_drag_started {|area_mouse_event| ...}`
+- `on_mouse_dragged {|area_mouse_event| ...}`
+- `on_mouse_dropped {|area_mouse_event| ...}`
+- `on_mouse_entered {...}`
+- `on_mouse_exited {...}`
+- `on_mouse_crossed {|left| ...}` (NOT RECOMMENDED; it does what `on_mouse_entered` and `on_mouse_exited` do by returning a `left` argument indicating if mouse left `area`)
+- `on_drag_broken {...}` (NOT RECOMMENDED; varies per platforms; use `on_mouse_dropped` instead)
+
+The `area_mouse_event` `Hash` argument for mouse events that receive it (e.g. `on_mouse_up`, `on_mouse_dragged`) consist of the following hash keys:
+- `:x`: mouse x location in relation to area's top-left-corner
+- `:y`: mouse y location in relation to area's top-left-corner
+- `:area_width`: area current width
+- `:area_height`: area current height
+- `:down`: mouse pressed button (e.g. `1` is left button, `3` is right button)
+- `:up`: mouse depressed button (e.g. `1` is left button, `3` is right button)
+- `:count`: count of mouse clicks (e.g. `2` for double-click, `1` for single-click)
+- `:modifers`: `Array` of `Symbol`s from one of the following: `[:command, :shift, :alt, :control]`
+- `:held`: mouse held button during dragging (e.g. `1` is left button, `4` is right button)
+
+The `area_key_event` `Hash` argument for keyboard events that receive it (e.g. `on_key_up`, `on_key_down`) consist of the following hash keys:
+- `:key`: key character (`String`)
+- `:ext_key`: non-character extra key (`Symbol`) such as `:left`, `:right`, `:escape`, `:insert`
+- `:modifier`: modifier key pressed alone (e.g. `:shift` or `:control`)
+- `:modifiers`: modifier keys pressed simultaneously with `:key`, `:ext_key`, or `:modifier`
+- `:up`: indicates if key has been released or not (Boolean)
+
+Note that when nesting an `area` directly underneath `window` (without a layout control like `vertical_box`), it is automatically reparented with `vertical_box` in between the `window` and `area` since it would not show up on Linux otherwise.
+
 To redraw an `area`, you may call the `#queue_redraw_all` method, or simply `#redraw`.
 
 A transform `matrix` can be set on a path by building a `matrix(m11 = nil, m12 = nil, m21 = nil, m22 = nil, m31 = nil, m32 = nil) {operations}` proxy object and then setting via `transform` property, or alternatively by building and setting the matrix in one call to `transform(m11 = nil, m12 = nil, m21 = nil, m22 = nil, m31 = nil, m32 = nil) {operations}` passing it the matrix arguments and/or content operations.
@@ -638,7 +723,7 @@ window('Basic Transform', 350, 350) {
         square(0, 0, 100)
         
         fill r: [255 - n*5, 0].max, g: [n*5, 255].min, b: 0, a: 0.5
-        stroke color: 0, thickness: 2
+        stroke :black, thickness: 2
         transform {
           skew 0.15, 0.15
           translate 50, 50
@@ -673,12 +758,18 @@ transform m1
 
 Note that `area`, `path`, and nested shapes are all truly declarative, meaning they do not care about the ordering of calls to `fill`, `stroke`, and `transform`. Furthermore, any transform that is applied is reversed at the end of the block, so you never have to worry about the ordering of `transform` calls among different paths. You simply set a transform on the `path`s that need it and it is guaranteed to be called before all its content is drawn, and then undone afterwards to avoid affecting later paths. Matrix `transform` can be set on an entire `area` too, applying to all nested `path`s.
 
+`fill` and `stroke` accept [X11](https://en.wikipedia.org/wiki/X11_color_names) color `Symbol`s/`String`s like `:skyblue` and `'sandybrown'` or 6-number hex or 3-number hex-shorthand (as `Integer` or `String` with or without `0x` prefix)
+
+Check [Basic Transform](#basic-transform) example for use of [X11](https://en.wikipedia.org/wiki/X11_color_names) colors.
+
+Check [Histogram](#histogram) example for use of hex colors.
+
 ### Smart Defaults and Conventions
 
 - `horizontal_box`, `vertical_box`, `grid`, and `form` controls have `padded` as `true` upon instantiation to ensure more user-friendly GUI by default
 - `group` controls have `margined` as `true` upon instantiation to ensure more user-friendly GUI by default
 - All controls nested under a `horizontal_box`, `vertical_box`, and `form` have `stretchy` property (fill maximum space) as `true` by default (passed to `box_append`/`form_append` method)
-- `window` instatiation args can be left off, having the following defaults when unspecified: `title` as `''`, `width` as `150`, `height` as `150`, and `has_menubar` as `true`)
+- `window` instatiation args can be left off, having the following defaults when unspecified: `title` as `''`, `width` as `190`, `height` as `150`, and `has_menubar` as `true`)
 - `window` has an `on_closing` listener by default that quits application upon hitting the close button (can be overridden with a manual `on_closing` implementation that returns integer `0` for success)
 - `group` has `title` property default to `''` if not specified in instantiation args, so it can be instantiated without args with `title` property specified in nested block (e.g. `group {title 'Address'; ...}`)
 - `button`, `checkbox`, and `label` have `text` default to `''` if not specified in instantiation args, so they can be instantiated without args with `text` property specified in nested block (e.g. `button {text 'Greet'; on_clicked {puts 'Hello'}}`)
@@ -706,6 +797,9 @@ Note that `area`, `path`, and nested shapes are all truly declarative, meaning t
 - Observe `path` `fill` and `stroke` hashes for changes and automatically redraw containing area accordingly
 - All controls are protected from garbage collection until no longer needed (explicitly destroyed), so there is no need to worry about surprises.
 - All resources are freed automatically once no longer needed or left to garbage collection.
+- When nesting an `area` directly underneath `window` (without a layout control like `vertical_box`), it is automatically reparented with `vertical_box` in between the `window` and `area` since it would not show up on Linux otherwise.
+- Colors may be passed in as a hash of `:r`, `:g`, `:b`, `:a`, or `:red`, `:green`, `:blue`, `:alpha`, or [X11](https://en.wikipedia.org/wiki/X11_color_names) color like `:skyblue`, or 6-number hex or 3-number hex (as `Integer` or `String` with or without `0x` prefix)
+- Color alpha value defaults to `1.0` when not specified.
 
 ### API Gotchas
 
@@ -733,6 +827,8 @@ The following examples include reimplementions of the examples in the [LibUI](ht
 
 To browse all examples, simply launch the [Meta-Example](examples/meta_example.rb), which lists all examples and displays each example's code when selected. It also enables code editing to facilitate experimentation and learning.
 
+(note that for examples that emit output to terminal/command-line via `p` or `puts`, you must run them directly to see output)
+
 [examples/meta_example.rb](examples/meta_example.rb)
 
 Run with this command from the root of the project if you cloned the project:
@@ -783,7 +879,7 @@ class MetaExample
   end
   
   def launch
-    window('Meta-Example', 700, 500) { |w|
+    window('Meta-Example', 700, 500) {
       margined true
       
       horizontal_box {
@@ -805,7 +901,7 @@ class MetaExample
                 meta_example_file = File.join(Dir.home, '.meta_example.rb')
                 File.write(meta_example_file, @nwme.text)
                 result = `ruby -r #{glimmer_dsl_libui_file} #{meta_example_file} 2>&1`
-                msg_box(w, 'Error Running Example', result) if result.include?('error')
+                msg_box('Error Running Example', result) if result.include?('error')
               rescue => e
                 puts 'Unable to write code changes! Running original example...'
                 system "ruby -r #{glimmer_dsl_libui_file} #{file_path_for(@examples[@rbs.selected])}"
@@ -970,10 +1066,10 @@ require 'glimmer-dsl-libui'
 
 include Glimmer
 
-window('hello world', 300, 200) { |w|
+window('hello world', 300, 200) {
   button('Button') {
     on_clicked do
-      msg_box(w, 'Information', 'You clicked the button')
+      msg_box('Information', 'You clicked the button')
     end
   }
   
@@ -1057,7 +1153,7 @@ require 'glimmer-dsl-libui'
 
 include Glimmer
 
-window('Basic Entry', 300, 50) { |w|
+window('Basic Entry', 300, 50) {
   horizontal_box {
     e = entry {
       # stretchy true # Smart default option for appending to horizontal_box
@@ -1073,7 +1169,7 @@ window('Basic Entry', 300, 50) { |w|
       
       on_clicked do
         text = e.text
-        msg_box(w, 'You entered', text)
+        msg_box('You entered', text)
       end
     }
   }
@@ -1177,12 +1273,12 @@ ruby -r glimmer-dsl-libui -e "require 'examples/midi_player'"
 Mac
 
 ![glimmer-dsl-libui-mac-midi-player.png](images/glimmer-dsl-libui-mac-midi-player.png)
-![glimmer-dsl-libui-mac-midi-player-version-msg-box.png](images/glimmer-dsl-libui-mac-midi-player-version-msg-box.png)
+![glimmer-dsl-libui-mac-midi-player-msg-box.png](images/glimmer-dsl-libui-mac-midi-player-msg-box.png)
 
 Linux
 
 ![glimmer-dsl-libui-linux-midi-player.png](images/glimmer-dsl-libui-linux-midi-player.png)
-![glimmer-dsl-libui-linux-midi-player-version-msg-box.png](images/glimmer-dsl-libui-linux-midi-player-version-msg-box.png)
+![glimmer-dsl-libui-linux-midi-player-msg-box.png](images/glimmer-dsl-libui-linux-midi-player-msg-box.png)
 
 [LibUI](https://github.com/kojix2/LibUI) Original Version:
 
@@ -1328,23 +1424,22 @@ class TinyMidiPlayer
     end
   end
 
-  def show_version(main_window)
-    msg_box(main_window,
-               'Tiny Midi Player',
-               "Written in Ruby\n" \
-               "https://github.com/kojix2/libui\n" \
-               "Version #{VERSION}")
+  def show_version
+    msg_box('Tiny Midi Player',
+              "Written in Ruby\n" \
+                "https://github.com/kojix2/libui\n" \
+                "Version #{VERSION}")
   end
 
   def create_gui
     menu('Help') { |m|
       menu_item('Version') {
         on_clicked do
-          show_version(@main_window)
+          show_version
         end
       }
     }
-    @main_window = window('Tiny Midi Player', 200, 50) {
+    window('Tiny Midi Player', 200, 50) {
       horizontal_box {
         vertical_box {
           stretchy false
@@ -1360,7 +1455,7 @@ class TinyMidiPlayer
             end
           }
         }
-        
+
         combobox { |c|
           items @midi_files.map { |path| File.basename(path) }
           
@@ -1370,8 +1465,7 @@ class TinyMidiPlayer
           end
         }
       }
-    }
-    @main_window.show
+    }.show
   end
 end
 
@@ -1607,14 +1701,14 @@ include Glimmer
 menu('File') {
   menu_item('Open') {
     on_clicked do
-      file = open_file(MAIN_WINDOW)
+      file = open_file
       puts file unless file.nil?
     end
   }
 
   menu_item('Save') {
     on_clicked do
-      file = save_file(MAIN_WINDOW)
+      file = save_file
       puts file unless file.nil?
     end
   }
@@ -1657,7 +1751,7 @@ MAIN_WINDOW = window('Control Gallery', 600, 500) {
             stretchy false
 
             on_clicked do
-              msg_box(MAIN_WINDOW, 'Information', 'You clicked the button')
+              msg_box('Information', 'You clicked the button')
             end
           }
 
@@ -1665,7 +1759,7 @@ MAIN_WINDOW = window('Control Gallery', 600, 500) {
             stretchy false
 
             on_toggled do |c|
-              checked = c.checked == 1
+              checked = c.checked?
               MAIN_WINDOW.title = "Checkbox is #{checked}"
               c.text = "I am the checkbox (#{checked})"
             end
@@ -2119,7 +2213,7 @@ require 'glimmer-dsl-libui'
 
 include Glimmer
 
-window('Form') { |w|
+window('Form') {
   margined true
   
   vertical_box {
@@ -2135,7 +2229,7 @@ window('Form') { |w|
     
     button('Display Name') {
       on_clicked do
-        msg_box(w, 'Name', "#{@first_name_entry.text} #{@last_name_entry.text}")
+        msg_box('Name', "#{@first_name_entry.text} #{@last_name_entry.text}")
       end
     }
   }
@@ -3358,14 +3452,62 @@ window('Area Gallery', 400, 400) {
       }
 
       fill r: 202, g: 102, b: 204, a: 0.5
-      stroke thickness: 2, r: 0, g: 0, b: 0
+      stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
     }
     path { # declarative stable path
       arc(200, 200, 90, 0, 360, false)
 
       fill r: 202, g: 102, b: 204, a: 0.5
-      stroke thickness: 2, r: 0, g: 0, b: 0
+      stroke r: 0, g: 0, b: 0, thickness: 2
     }
+    
+    on_mouse_event do |area_mouse_event|
+      p area_mouse_event
+    end
+    
+    on_mouse_moved do |area_mouse_event|
+      puts 'moved'
+    end
+    
+    on_mouse_down do |area_mouse_event|
+      puts 'mouse down'
+    end
+    
+    on_mouse_up do |area_mouse_event|
+      puts 'mouse up'
+    end
+    
+    on_mouse_drag_started do |area_mouse_event|
+      puts 'drag started'
+    end
+    
+    on_mouse_dragged do |area_mouse_event|
+      puts 'dragged'
+    end
+    
+    on_mouse_dropped do |area_mouse_event|
+      puts 'dropped'
+    end
+    
+    on_mouse_entered do
+      puts 'entered'
+    end
+    
+    on_mouse_exited do
+      puts 'exited'
+    end
+    
+    on_key_event do |area_key_event|
+      p area_key_event
+    end
+    
+    on_key_up do |area_key_event|
+      puts 'key up'
+    end
+    
+    on_key_down do |area_key_event|
+      puts 'key down'
+    end
   }
 }.show
 ```
@@ -3467,7 +3609,7 @@ window('Area Gallery', 400, 400) {
       }
 
       fill r: 202, g: 102, b: 204, a: 0.5
-      stroke thickness: 2, r: 0, g: 0, b: 0
+      stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
     }
     path { # declarative stable path
       arc {
@@ -3480,8 +3622,56 @@ window('Area Gallery', 400, 400) {
       }
 
       fill r: 202, g: 102, b: 204, a: 0.5
-      stroke thickness: 2, r: 0, g: 0, b: 0
+      stroke r: 0, g: 0, b: 0, thickness: 2
     }
+    
+    on_mouse_event do |area_mouse_event|
+      p area_mouse_event
+    end
+    
+    on_mouse_moved do |area_mouse_event|
+      puts 'moved'
+    end
+    
+    on_mouse_down do |area_mouse_event|
+      puts 'mouse down'
+    end
+    
+    on_mouse_up do |area_mouse_event|
+      puts 'mouse up'
+    end
+    
+    on_mouse_drag_started do |area_mouse_event|
+      puts 'drag started'
+    end
+    
+    on_mouse_dragged do |area_mouse_event|
+      puts 'dragged'
+    end
+    
+    on_mouse_dropped do |area_mouse_event|
+      puts 'dropped'
+    end
+    
+    on_mouse_entered do
+      puts 'entered'
+    end
+    
+    on_mouse_exited do
+      puts 'exited'
+    end
+    
+    on_key_event do |area_key_event|
+      p area_key_event
+    end
+    
+    on_key_up do |area_key_event|
+      puts 'key up'
+    end
+    
+    on_key_down do |area_key_event|
+      puts 'key down'
+    end
   }
 }.show
 ```
@@ -3530,15 +3720,63 @@ window('Area Gallery', 400, 400) {
         }
 
         fill r: 202, g: 102, b: 204, a: 0.5
-        stroke thickness: 2, r: 0, g: 0, b: 0
+        stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
       }
       path { # a dynamic path is added semi-declaratively inside on_draw block
         arc(200, 200, 90, 0, 360, false)
 
         fill r: 202, g: 102, b: 204, a: 0.5
-        stroke thickness: 2, r: 0, g: 0, b: 0
+        stroke r: 0, g: 0, b: 0, thickness: 2
       }
     end
+        
+    on_mouse_event do |area_mouse_event|
+      p area_mouse_event
+    end
+    
+    on_mouse_moved do |area_mouse_event|
+      puts 'moved'
+    end
+    
+    on_mouse_down do |area_mouse_event|
+      puts 'mouse down'
+    end
+    
+    on_mouse_up do |area_mouse_event|
+      puts 'mouse up'
+    end
+    
+    on_mouse_drag_started do |area_mouse_event|
+      puts 'drag started'
+    end
+    
+    on_mouse_dragged do |area_mouse_event|
+      puts 'dragged'
+    end
+    
+    on_mouse_dropped do |area_mouse_event|
+      puts 'dropped'
+    end
+    
+    on_mouse_entered do
+      puts 'entered'
+    end
+    
+    on_mouse_exited do
+      puts 'exited'
+    end
+    
+    on_key_event do |area_key_event|
+      p area_key_event
+    end
+    
+    on_key_up do |area_key_event|
+      puts 'key up'
+    end
+    
+    on_key_down do |area_key_event|
+      puts 'key down'
+    end
   }
 }.show
 ```
@@ -3641,7 +3879,7 @@ window('Area Gallery', 400, 400) {
         }
 
         fill r: 202, g: 102, b: 204, a: 0.5
-        stroke thickness: 2, r: 0, g: 0, b: 0
+        stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
       }
       path { # a dynamic path is added semi-declaratively inside on_draw block
         arc {
@@ -3654,9 +3892,57 @@ window('Area Gallery', 400, 400) {
         }
 
         fill r: 202, g: 102, b: 204, a: 0.5
-        stroke thickness: 2, r: 0, g: 0, b: 0
+        stroke r: 0, g: 0, b: 0, thickness: 2
       }
     end
+        
+    on_mouse_event do |area_mouse_event|
+      p area_mouse_event
+    end
+    
+    on_mouse_moved do |area_mouse_event|
+      puts 'moved'
+    end
+    
+    on_mouse_down do |area_mouse_event|
+      puts 'mouse down'
+    end
+    
+    on_mouse_up do |area_mouse_event|
+      puts 'mouse up'
+    end
+    
+    on_mouse_drag_started do |area_mouse_event|
+      puts 'drag started'
+    end
+    
+    on_mouse_dragged do |area_mouse_event|
+      puts 'dragged'
+    end
+    
+    on_mouse_dropped do |area_mouse_event|
+      puts 'dropped'
+    end
+    
+    on_mouse_entered do
+      puts 'entered'
+    end
+    
+    on_mouse_exited do
+      puts 'exited'
+    end
+    
+    on_key_event do |area_key_event|
+      p area_key_event
+    end
+    
+    on_key_up do |area_key_event|
+      puts 'key up'
+    end
+    
+    on_key_down do |area_key_event|
+      puts 'key down'
+    end
   }
 }.show
 ```
@@ -3893,31 +4179,29 @@ Y_OFF_TOP    = 20
 X_OFF_RIGHT  = 20
 Y_OFF_BOTTOM = 20
 POINT_RADIUS = 5
-
 COLOR_BLUE   = 0x1E90FF
 
+@datapoints   = 10.times.map {Random.new.rand(90)}
+
 def graph_size(area_width, area_height)
   graph_width = area_width - X_OFF_LEFT - X_OFF_RIGHT
   graph_height = area_height - Y_OFF_TOP - Y_OFF_BOTTOM
   [graph_width, graph_height]
 end
 
-def point_locations(datapoints, width, height)
+def point_locations(width, height)
   xincr = width / 9.0 # 10 - 1 to make the last point be at the end
   yincr = height / 100.0
 
-  data = []
-  datapoints.each_with_index do |dp, i|
-    val = 100 - dp.value
-    data << [xincr * i, yincr * val]
-    i += 1
+  @datapoints.each_with_index.map do |value, i|
+    val = 100 - value
+    [xincr * i, yincr * val]
   end
-
-  data
 end
 
-def graph_path(datapoints, width, height, should_extend, &block)
-  locations = point_locations(datapoints, width, height)
+# method-based custom control representing a graph path
+def graph_path(width, height, should_extend, &block)
+  locations = point_locations(width, height)
   path {
     first_location = locations[0] # x and y
     figure(first_location[0], first_location[1]) {
@@ -3932,7 +4216,7 @@ def graph_path(datapoints, width, height, should_extend, &block)
       end
     }
     
-    # now transform the coordinate space so (0, 0) is the top-left corner of the graph
+    # apply a transform to the coordinate space for this path so (0, 0) is the top-left corner of the graph
     transform {
       translate X_OFF_LEFT, Y_OFF_TOP
     }
@@ -3948,12 +4232,13 @@ window('histogram example', 640, 480) {
     vertical_box {
       stretchy false
       
-      @datapoints = 10.times.map do
-        spinbox(0, 100) { |datapoint|
+      10.times do |i|
+        spinbox(0, 100) { |sb|
           stretchy false
-          value Random.new.rand(90)
+          value @datapoints[i]
           
           on_changed do
+            @datapoints[i] = sb.value
             @area.queue_redraw_all
           end
         }
@@ -3974,7 +4259,7 @@ window('histogram example', 640, 480) {
         path {
           rectangle(0, 0, area_draw_params[:area_width], area_draw_params[:area_height])
           
-          fill color: 0xFFFFFF
+          fill 0xFFFFFF
         }
         
         graph_width, graph_height = *graph_size(area_draw_params[:area_width], area_draw_params[:area_height])
@@ -3985,16 +4270,16 @@ window('histogram example', 640, 480) {
             line(X_OFF_LEFT + graph_width, Y_OFF_TOP + graph_height)
           }
           
-          stroke color: 0x000000, thickness: 2, miter_limit: 10
+          stroke 0x000000, thickness: 2, miter_limit: 10
         }
       
         # now create the fill for the graph below the graph line
-        graph_path(@datapoints, graph_width, graph_height, true) {
+        graph_path(graph_width, graph_height, true) {
           fill @color_button.color.merge(a: 0.5)
         }
         
         # now draw the histogram line
-        graph_path(@datapoints, graph_width, graph_height, false) {
+        graph_path(graph_width, graph_height, false) {
           stroke @color_button.color.merge(thickness: 2, miter_limit: 10)
         }
       end
@@ -4046,7 +4331,7 @@ window('Basic Transform', 350, 350) {
         square(0, 0, 100)
         
         fill r: [255 - n*5, 0].max, g: [n*5, 255].min, b: 0, a: 0.5
-        stroke color: 0, thickness: 2
+        stroke :black, thickness: 2
         transform {
           skew 0.15, 0.15
           translate 50, 50