glimmer-dsl-swt 4.24.0.1 → 4.24.0.2

data/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md

@@ -2295,35 +2295,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 +2385,7 @@ class HelloCanvasDataBinding
             horizontal_spacing 0
             vertical_spacing 0
           }
-          text 'line'
+          text 'Line'
           
           label {
             layout_data(:fill, :center, false, false) {
@@ -2348,13 +2399,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 +2414,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 +2429,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 +2444,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 +2465,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 +2480,7 @@ class HelloCanvasDataBinding
             }
             maximum 255
             increment 10
-            selection <=> [self, :foreground_green]
+            selection <=> [@line, :foreground_green]
           }
           spinner {
             layout_data(:fill, :center, false, false) {
@@ -2432,8 +2488,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 +2503,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).
 
@@ -3579,7 +4236,7 @@ Example:
 shell {
   @tree = tree {
     items <= [company, :owner, tree_properties: {children: :coworkers, text: :name}]
-    selection <=> [company, :selected_coworker]    
+    selection <=> [company, :selected_coworker]
   }
 }
 ```