glimmer-dsl-swt 4.24.0.0 → 4.24.1.0

data/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md

@@ -1077,7 +1077,7 @@ You may check out a more full-fledged example in [Hello, Sash Form!](/docs/refer
 
 ![Hello Browser](/images/glimmer-hello-browser.png)
 
-Glimmer supports the [SWT Browser widget](https://help.eclipse.org/2020-12/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/browser/Browser.html), which can load URLs or render HTML. It can even be instrumented with JavaScript when needed (though highly discouraged since it defeats the purpose of using Ruby except in very rare cases like leveraging a pre-existing web codebase in a desktop app).
+Glimmer DSL for SWT includes a basic [SWT Browser widget](https://help.eclipse.org/2020-12/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/browser/Browser.html), which can load URLs or render HTML. It supports WebKit, IE, and Edge browsers out of the box. Its JavaScript engine can even be instrumented with Ruby code if needed.
 
 Example loading a URL (you may copy/paste in [`girb`](GLIMMER_GIRB.md)):
 
@@ -1114,7 +1114,11 @@ shell {
 
 This relies on Glimmer's [Multi-DSL Support](#multi-dsl-support) for building the HTML text using [Glimmer XML DSL](https://github.com/AndyObtiva/glimmer-dsl-xml).
 
-Learn more at the [SWT Browser widget](https://help.eclipse.org/2020-12/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/browser/Browser.html) API.
+Learn more at: 
+- [SWT Browser API](https://help.eclipse.org/2020-12/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/browser/Browser.html)
+- [SWT Browser FAQ](https://www.eclipse.org/swt/faq.php#whatisbrowser).
+
+The built-in basic SWT `browser` widget might not satisfy all your needs. If so, consider the advanced 3rd-party browser widget [JxBrowser](https://www.teamdev.com/jxbrowser), which utilizes Google Chromium.
 
 ### Widget Styles
 
@@ -2295,35 +2299,86 @@ Example of canvas shape parameter data-binding (you may copy/paste in [`girb`](G
 require 'glimmer-dsl-swt'
 
 class HelloCanvasDataBinding
-  include Glimmer::GUI::CustomWindow # alias for Glimmer::UI::CustomShell
-  
-  CANVAS_WIDTH  = 300
-  CANVAS_HEIGHT = 300
+  class PathShape
+    attr_accessor :foreground_red, :foreground_green, :foreground_blue, :line_width_value, :line_style_value
+    
+    def foreground_value
+      [foreground_red, foreground_green, foreground_blue]
+    end
+    
+    def line_style_value_options
+      [:solid, :dash, :dot, :dashdot, :dashdotdot]
+    end
+  end
   
-  attr_accessor :x1_value, :y1_value, :x2_value, :y2_value, :foreground_red, :foreground_green, :foreground_blue, :line_width_value, :line_style_value
+  class LinePathShape < PathShape
+    attr_accessor :x1_value, :y1_value, :x2_value, :y2_value
+  end
   
-  def foreground_value
-    rgb(foreground_red, foreground_green, foreground_blue)
+  class QuadPathShape < PathShape
+    attr_accessor :x1_value, :y1_value, :cx_value, :cy_value, :x2_value, :y2_value
+    
+    def point_array
+      [x1_value, y1_value, cx_value, cy_value, x2_value, y2_value]
+    end
   end
   
-  def line_style_value_options
-    [:solid, :dash, :dot, :dashdot, :dashdotdot]
+  class CubicPathShape < PathShape
+    attr_accessor :x1_value, :y1_value, :cx1_value, :cy1_value, :cx2_value, :cy2_value, :x2_value, :y2_value
+    
+    def point_array
+      [x1_value, y1_value, cx1_value, cy1_value, cx2_value, cy2_value, x2_value, y2_value]
+    end
   end
   
+  include Glimmer::GUI::Application # alias for Glimmer::UI::CustomShell / Glimmer::UI::CustomWindow
+  
+  CANVAS_WIDTH  = 300
+  CANVAS_HEIGHT = 300
+  
   before_body do
-    self.x1_value = 0
-    self.y1_value = 0
-    self.x2_value = CANVAS_WIDTH
-    self.y2_value = CANVAS_HEIGHT
-    self.foreground_red = 28
-    self.foreground_green = 128
-    self.foreground_blue = 228
-    self.line_width_value = 3
-    self.line_style_value = :dot
+    @line = LinePathShape.new
+    @line.x1_value = 5
+    @line.y1_value = 5
+    @line.x2_value = CANVAS_WIDTH - 5
+    @line.y2_value = CANVAS_HEIGHT - 5
+    @line.foreground_red = 28
+    @line.foreground_green = 128
+    @line.foreground_blue = 228
+    @line.line_width_value = 3
+    @line.line_style_value = :dash
+    
+    @quad = QuadPathShape.new
+    @quad.x1_value = 5
+    @quad.y1_value = CANVAS_HEIGHT - 5
+    @quad.cx_value = (CANVAS_WIDTH - 10)/2.0
+    @quad.cy_value = 5
+    @quad.x2_value = CANVAS_WIDTH - 5
+    @quad.y2_value = CANVAS_HEIGHT - 5
+    @quad.foreground_red = 28
+    @quad.foreground_green = 128
+    @quad.foreground_blue = 228
+    @quad.line_width_value = 3
+    @quad.line_style_value = :dot
+    
+    @cubic = CubicPathShape.new
+    @cubic.x1_value = 5
+    @cubic.y1_value = (CANVAS_WIDTH - 10)/2.0
+    @cubic.cx1_value = (CANVAS_WIDTH - 10)*0.25
+    @cubic.cy1_value = (CANVAS_WIDTH - 10)*0.25
+    @cubic.cx2_value = (CANVAS_WIDTH - 10)*0.75
+    @cubic.cy2_value = (CANVAS_WIDTH - 10)*0.75
+    @cubic.x2_value = CANVAS_WIDTH - 5
+    @cubic.y2_value = (CANVAS_WIDTH - 10)/2.0
+    @cubic.foreground_red = 28
+    @cubic.foreground_green = 128
+    @cubic.foreground_blue = 228
+    @cubic.line_width_value = 3
+    @cubic.line_style_value = :dashdot
   end
   
   body {
-    shell {
+    shell(:no_resize) {
       text 'Hello, Canvas Data-Binding!'
       
       tab_folder {
@@ -2334,7 +2389,7 @@ class HelloCanvasDataBinding
             horizontal_spacing 0
             vertical_spacing 0
           }
-          text 'line'
+          text 'Line'
           
           label {
             layout_data(:fill, :center, false, false) {
@@ -2348,13 +2403,14 @@ class HelloCanvasDataBinding
             }
             text 'y1'
           }
+          
           spinner {
             layout_data(:fill, :center, false, false) {
               horizontal_span 3
             }
             maximum CANVAS_WIDTH
             increment 3
-            selection <=> [self, :x1_value]
+            selection <=> [@line, :x1_value]
           }
           spinner {
             layout_data(:fill, :center, false, false) {
@@ -2362,8 +2418,9 @@ class HelloCanvasDataBinding
             }
             maximum CANVAS_HEIGHT
             increment 3
-            selection <=> [self, :y1_value]
+            selection <=> [@line, :y1_value]
           }
+          
           label {
             layout_data(:fill, :center, false, false) {
               horizontal_span 3
@@ -2376,13 +2433,14 @@ class HelloCanvasDataBinding
             }
             text 'y2'
           }
+          
           spinner {
             layout_data(:fill, :center, false, false) {
               horizontal_span 3
             }
             maximum CANVAS_WIDTH
             increment 3
-            selection <=> [self, :x2_value]
+            selection <=> [@line, :x2_value]
           }
           spinner {
             layout_data(:fill, :center, false, false) {
@@ -2390,8 +2448,9 @@ class HelloCanvasDataBinding
             }
             maximum CANVAS_HEIGHT
             increment 3
-            selection <=> [self, :y2_value]
+            selection <=> [@line, :y2_value]
           }
+          
           label {
             layout_data(:fill, :center, false, false) {
               horizontal_span 2
@@ -2410,13 +2469,14 @@ class HelloCanvasDataBinding
             }
             text 'foreground blue'
           }
+          
           spinner {
             layout_data(:fill, :center, false, false) {
               horizontal_span 2
             }
             maximum 255
             increment 10
-            selection <=> [self, :foreground_red]
+            selection <=> [@line, :foreground_red]
           }
           spinner {
             layout_data(:fill, :center, false, false) {
@@ -2424,7 +2484,7 @@ class HelloCanvasDataBinding
             }
             maximum 255
             increment 10
-            selection <=> [self, :foreground_green]
+            selection <=> [@line, :foreground_green]
           }
           spinner {
             layout_data(:fill, :center, false, false) {
@@ -2432,8 +2492,9 @@ class HelloCanvasDataBinding
             }
             maximum 255
             increment 10
-            selection <=> [self, :foreground_blue]
+            selection <=> [@line, :foreground_blue]
           }
+          
           label {
             layout_data(:fill, :center, false, false) {
               horizontal_span 3
@@ -2446,48 +2507,648 @@ class HelloCanvasDataBinding
             }
             text 'line style'
           }
+          
           spinner {
             layout_data(:fill, :center, false, false) {
               horizontal_span 3
             }
             maximum 255
-            selection <=> [self, :line_width_value]
+            selection <=> [@line, :line_width_value]
           }
           combo(:read_only) {
             layout_data(:fill, :center, false, false) {
               horizontal_span 3
             }
-            selection <=> [self, :line_style_value]
+            selection <=> [@line, :line_style_value]
           }
-          canvas {
+          
+          @line_canvas = canvas {
             layout_data(:center, :center, false, false) {
               horizontal_span 6
               width_hint CANVAS_WIDTH
               height_hint CANVAS_WIDTH
             }
+            
             background :white
             
             line {
-              x1 <= [self, :x1_value]
-              y1 <= [self, :y1_value]
-              x2 <= [self, :x2_value]
-              y2 <= [self, :y2_value]
-              foreground <= [self, :foreground_value, computed_by: [:foreground_red, :foreground_green, :foreground_blue]]
-              line_width <= [self, :line_width_value]
-              line_style <= [self, :line_style_value]
+              x1         <= [@line, :x1_value]
+              y1         <= [@line, :y1_value]
+              x2         <= [@line, :x2_value]
+              y2         <= [@line, :y2_value]
+              foreground <= [@line, :foreground_value, computed_by: [:foreground_red, :foreground_green, :foreground_blue]]
+              line_width <= [@line, :line_width_value]
+              line_style <= [@line, :line_style_value]
+            }
+            
+            @line_oval1 = oval {
+              x          <= [@line, :x1_value, on_read: ->(val) {val - 5}]
+              y          <= [@line, :y1_value, on_read: ->(val) {val - 5}]
+              width 10
+              height 10
+              background :black
+            }
+            
+            @line_oval2 = oval {
+              x          <= [@line, :x2_value, on_read: ->(val) {val - 5}]
+              y          <= [@line, :y2_value, on_read: ->(val) {val - 5}]
+              width 10
+              height 10
+              background :black
+            }
+            
+            on_mouse_down do |mouse_event|
+              @selected_shape = @line_canvas.shape_at_location(mouse_event.x, mouse_event.y)
+              @selected_shape = nil unless @selected_shape.is_a?(Glimmer::SWT::Custom::Shape::Oval)
+              @line_canvas.cursor = :hand if @selected_shape
+            end
+            
+            on_drag_detected do |drag_detect_event|
+              @drag_detected = true
+              @drag_current_x = drag_detect_event.x
+              @drag_current_y = drag_detect_event.y
+            end
+            
+            on_mouse_move do |mouse_event|
+              if @drag_detected && @selected_shape
+                delta_x = mouse_event.x - @drag_current_x
+                delta_y = mouse_event.y - @drag_current_y
+                case @selected_shape
+                when @line_oval1
+                  @line.x1_value += delta_x
+                  @line.y1_value += delta_y
+                when @line_oval2
+                  @line.x2_value += delta_x
+                  @line.y2_value += delta_y
+                end
+                @drag_current_x = mouse_event.x
+                @drag_current_y = mouse_event.y
+              end
+            end
+            
+            on_mouse_up do |mouse_event|
+              @line_canvas.cursor = :arrow
+              @drag_detected = false
+              @selected_shape = nil
+            end
+          }
+        }
+        
+        tab_item {
+          grid_layout(6, true) {
+            margin_width 0
+            margin_height 0
+            horizontal_spacing 0
+            vertical_spacing 0
+          }
+          text 'Quad'
+          
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'x1'
+          }
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'y1'
+          }
+          
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum CANVAS_WIDTH
+            increment 3
+            selection <=> [@quad, :x1_value]
+          }
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum CANVAS_HEIGHT
+            increment 3
+            selection <=> [@quad, :y1_value]
+          }
+          
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'control x'
+          }
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'control y'
+          }
+          
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum CANVAS_WIDTH
+            increment 3
+            selection <=> [@quad, :cx_value]
+          }
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum CANVAS_HEIGHT
+            increment 3
+            selection <=> [@quad, :cy_value]
+          }
+          
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'x2'
+          }
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'y2'
+          }
+          
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum CANVAS_WIDTH
+            increment 3
+            selection <=> [@quad, :x2_value]
+          }
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum CANVAS_HEIGHT
+            increment 3
+            selection <=> [@quad, :y2_value]
+          }
+          
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 2
+            }
+            text 'foreground red'
+          }
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 2
+            }
+            text 'foreground green'
+          }
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 2
+            }
+            text 'foreground blue'
+          }
+          
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 2
+            }
+            maximum 255
+            increment 10
+            selection <=> [@quad, :foreground_red]
+          }
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 2
+            }
+            maximum 255
+            increment 10
+            selection <=> [@quad, :foreground_green]
+          }
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 2
+            }
+            maximum 255
+            increment 10
+            selection <=> [@quad, :foreground_blue]
+          }
+          
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'line width'
+          }
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'line style'
+          }
+          
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum 255
+            selection <=> [@quad, :line_width_value]
+          }
+          combo(:read_only) {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            selection <=> [@quad, :line_style_value]
+          }
+          
+          @quad_canvas = canvas {
+            layout_data(:center, :center, false, false) {
+              horizontal_span 6
+              width_hint CANVAS_WIDTH
+              height_hint CANVAS_WIDTH
+            }
+            
+            background :white
+            
+            path {
+              foreground  <= [@quad, :foreground_value, computed_by: [:foreground_red, :foreground_green, :foreground_blue]]
+              line_width  <= [@quad, :line_width_value]
+              line_style  <= [@quad, :line_style_value]
+              
+              quad {
+                point_array <= [@quad, :point_array, computed_by: [:x1_value, :y1_value, :cx_value, :cy_value, :x2_value, :y2_value]]
+              }
+            }
+            
+            @quad_oval1 = oval {
+              x          <= [@quad, :x1_value, on_read: ->(val) {val - 5}]
+              y          <= [@quad, :y1_value, on_read: ->(val) {val - 5}]
+              width 10
+              height 10
+              background :black
+            }
+            
+            @quad_oval2 = oval {
+              x          <= [@quad, :cx_value, on_read: ->(val) {val - 5}]
+              y          <= [@quad, :cy_value, on_read: ->(val) {val - 5}]
+              width 10
+              height 10
+              background :dark_gray
+            }
+            
+            @quad_oval3 = oval {
+              x          <= [@quad, :x2_value, on_read: ->(val) {val - 5}]
+              y          <= [@quad, :y2_value, on_read: ->(val) {val - 5}]
+              width 10
+              height 10
+              background :black
+            }
+            
+            on_mouse_down do |mouse_event|
+              @selected_shape = @quad_canvas.shape_at_location(mouse_event.x, mouse_event.y)
+              @selected_shape = nil unless @selected_shape.is_a?(Glimmer::SWT::Custom::Shape::Oval)
+              @quad_canvas.cursor = :hand if @selected_shape
+            end
+            
+            on_drag_detected do |drag_detect_event|
+              @drag_detected = true
+              @drag_current_x = drag_detect_event.x
+              @drag_current_y = drag_detect_event.y
+            end
+            
+            on_mouse_move do |mouse_event|
+              if @drag_detected && @selected_shape
+                delta_x = mouse_event.x - @drag_current_x
+                delta_y = mouse_event.y - @drag_current_y
+                case @selected_shape
+                when @quad_oval1
+                  @quad.x1_value += delta_x
+                  @quad.y1_value += delta_y
+                when @quad_oval2
+                  @quad.cx_value += delta_x
+                  @quad.cy_value += delta_y
+                when @quad_oval3
+                  @quad.x2_value += delta_x
+                  @quad.y2_value += delta_y
+                end
+                @drag_current_x = mouse_event.x
+                @drag_current_y = mouse_event.y
+              end
+            end
+            
+            on_mouse_up do |mouse_event|
+              @quad_canvas.cursor = :arrow
+              @drag_detected = false
+              @selected_shape = nil
+            end
+          }
+        }
+        
+        tab_item {
+          grid_layout(6, true) {
+            margin_width 0
+            margin_height 0
+            horizontal_spacing 0
+            vertical_spacing 0
+          }
+          text 'Cubic'
+          
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'x1'
+          }
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'y1'
+          }
+          
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum CANVAS_WIDTH
+            increment 3
+            selection <=> [@cubic, :x1_value]
+          }
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum CANVAS_HEIGHT
+            increment 3
+            selection <=> [@cubic, :y1_value]
+          }
+          
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'control 1 x'
+          }
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
             }
+            text 'control 1 y'
+          }
+          
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum CANVAS_WIDTH
+            increment 3
+            selection <=> [@cubic, :cx1_value]
+          }
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum CANVAS_HEIGHT
+            increment 3
+            selection <=> [@cubic, :cy1_value]
+          }
+          
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'control 2 x'
+          }
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'control 2 y'
+          }
+          
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum CANVAS_WIDTH
+            increment 3
+            selection <=> [@cubic, :cx2_value]
+          }
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum CANVAS_HEIGHT
+            increment 3
+            selection <=> [@cubic, :cy2_value]
+          }
+          
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'x2'
+          }
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'y2'
+          }
+          
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum CANVAS_WIDTH
+            increment 3
+            selection <=> [@cubic, :x2_value]
+          }
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum CANVAS_HEIGHT
+            increment 3
+            selection <=> [@cubic, :y2_value]
+          }
+          
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 2
+            }
+            text 'foreground red'
+          }
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 2
+            }
+            text 'foreground green'
+          }
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 2
+            }
+            text 'foreground blue'
+          }
+          
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 2
+            }
+            maximum 255
+            increment 10
+            selection <=> [@cubic, :foreground_red]
+          }
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 2
+            }
+            maximum 255
+            increment 10
+            selection <=> [@cubic, :foreground_green]
+          }
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 2
+            }
+            maximum 255
+            increment 10
+            selection <=> [@cubic, :foreground_blue]
+          }
+          
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'line width'
+          }
+          label {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            text 'line style'
+          }
+          
+          spinner {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            maximum 255
+            selection <=> [@cubic, :line_width_value]
+          }
+          combo(:read_only) {
+            layout_data(:fill, :center, false, false) {
+              horizontal_span 3
+            }
+            selection <=> [@cubic, :line_style_value]
+          }
+          
+          @cubic_canvas = canvas {
+            layout_data(:center, :center, false, false) {
+              horizontal_span 6
+              width_hint CANVAS_WIDTH
+              height_hint CANVAS_WIDTH
+            }
+            
+            background :white
+            
+            path {
+              foreground  <= [@cubic, :foreground_value, computed_by: [:foreground_red, :foreground_green, :foreground_blue]]
+              line_width  <= [@cubic, :line_width_value]
+              line_style  <= [@cubic, :line_style_value]
+              
+              cubic {
+                point_array <= [@cubic, :point_array, computed_by: [:x1_value, :y1_value, :cx1_value, :cy1_value, :cx2_value, :cy2_value, :x2_value, :y2_value]]
+              }
+            }
+            
+            @cubic_oval1 = oval {
+              x          <= [@cubic, :x1_value, on_read: ->(val) {val - 5}]
+              y          <= [@cubic, :y1_value, on_read: ->(val) {val - 5}]
+              width 10
+              height 10
+              background :black
+            }
+            
+            @cubic_oval2 = oval {
+              x          <= [@cubic, :cx1_value, on_read: ->(val) {val - 5}]
+              y          <= [@cubic, :cy1_value, on_read: ->(val) {val - 5}]
+              width 10
+              height 10
+              background :dark_gray
+            }
+            
+            @cubic_oval3 = oval {
+              x          <= [@cubic, :cx2_value, on_read: ->(val) {val - 5}]
+              y          <= [@cubic, :cy2_value, on_read: ->(val) {val - 5}]
+              width 10
+              height 10
+              background :dark_gray
+            }
+            
+            @cubic_oval4 = oval {
+              x          <= [@cubic, :x2_value, on_read: ->(val) {val - 5}]
+              y          <= [@cubic, :y2_value, on_read: ->(val) {val - 5}]
+              width 10
+              height 10
+              background :black
+            }
+            
+            on_mouse_down do |mouse_event|
+              @selected_shape = @cubic_canvas.shape_at_location(mouse_event.x, mouse_event.y)
+              @selected_shape = nil unless @selected_shape.is_a?(Glimmer::SWT::Custom::Shape::Oval)
+              @cubic_canvas.cursor = :hand if @selected_shape
+            end
+            
+            on_drag_detected do |drag_detect_event|
+              @drag_detected = true
+              @drag_current_x = drag_detect_event.x
+              @drag_current_y = drag_detect_event.y
+            end
+            
+            on_mouse_move do |mouse_event|
+              if @drag_detected && @selected_shape
+                delta_x = mouse_event.x - @drag_current_x
+                delta_y = mouse_event.y - @drag_current_y
+                case @selected_shape
+                when @cubic_oval1
+                  @cubic.x1_value += delta_x
+                  @cubic.y1_value += delta_y
+                when @cubic_oval2
+                  @cubic.cx1_value += delta_x
+                  @cubic.cy1_value += delta_y
+                when @cubic_oval3
+                  @cubic.cx2_value += delta_x
+                  @cubic.cy2_value += delta_y
+                when @cubic_oval4
+                  @cubic.x2_value += delta_x
+                  @cubic.y2_value += delta_y
+                end
+                @drag_current_x = mouse_event.x
+                @drag_current_y = mouse_event.y
+              end
+            end
+            
+            on_mouse_up do |mouse_event|
+              @cubic_canvas.cursor = :arrow
+              @drag_detected = false
+              @selected_shape = nil
+            end
           }
         }
       }
     }
   }
-  
 end
 
 HelloCanvasDataBinding.launch
 ```
 
-![Glimmer Example Canvas Data-Binding Line Changed](/images/glimmer-hello-canvas-data-binding-line-changed.png)
+![Glimmer Example Canvas Data-Binding](/images/glimmer-hello-canvas-data-binding.gif)
 
 If you ever have special needs for optimization, you could always default to direct SWT painting via [org.eclipse.swt.graphics.GC](https://help.eclipse.org/2020-12/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/graphics/GC.html) instead. Learn more at the [SWT Graphics Guide](https://www.eclipse.org/articles/Article-SWT-graphics/SWT_graphics.html) and [SWT Image Guide](https://www.eclipse.org/articles/Article-SWT-images/graphics-resources.html#Saving%20Images).
 
@@ -2905,7 +3566,7 @@ As they say, there are many ways to skin a cat! This is in line with the Ruby wa
 
 ### Canvas Path DSL
 
-Unlike common imperative GUI graphing toolkits, Glimmer enables declarative rendering of paths with the new Canvas Path DSL (Early Alpha) via the new `path { }` keyword and by nesting one of the following path segment keywords underneath:
+Unlike common imperative GUI graphing toolkits, Glimmer enables declarative rendering of paths with the Canvas Path DSL via the new `path { }` keyword and by nesting one of the following path segment keywords underneath:
 - `point(x1, y1)`: renders a Point (Dot) as part of a path.
 - `line(x1, y1, x2=nil, y2=nil)`: renders a Line as part of a path. If you drop x2, y2, it joins to the previous point automatically. You may repeat for a series of lines forming a curve.
 - `quad(x1, y1, x2, y2, x3=nil, y3=nil)`: renders a Quadratic Bezier Curve. If you drop x3 and y3, it joins to the previous point automatically.
@@ -3579,7 +4240,7 @@ Example:
 shell {
   @tree = tree {
     items <= [company, :owner, tree_properties: {children: :coworkers, text: :name}]
-    selection <=> [company, :selected_coworker]    
+    selection <=> [company, :selected_coworker]
   }
 }
 ```