glimmer-dsl-opal 0.28.2 → 0.28.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 87981d1ce51eda46029d81945b4a0135e0b08a54d9b935504ab015d789d0b417
-  data.tar.gz: 0db15d4faaff573e66074299725c052814f3d291cff145f8c871ee95f1b5bfc2
+  metadata.gz: 07466f2f1bdce190b47b5150a6eb6dec007cc3053ff33fdcc8e0241ed859a42f
+  data.tar.gz: 84f91160a5c1147119f9f48a1189b9d78d20791450b48a6589dcacd6adf4e4cf
 SHA512:
-  metadata.gz: 441432dc7b68d4163d9a08b0e8df43580692fa84ff1091ee6f6f6e71abf9199a96038a2df17d017d9fed4016457d5254b7667f71d7f4880fc63dd12f23f4918c
-  data.tar.gz: edee0a32bfcc5f41a756a837fe904d63039160c446578c4a843190285bd7edb9d99aec946e69c2b956d8ef3cdfd2ee06221061d217aac789c502a7f37c87fd8f
+  metadata.gz: ba7a681470d023e717b3d545df05a49950d0c4b7139350c4bbe4631a885152be4e9eefbe13496493563fe6272ca95056d5b6dcd154fb98aa052ea37cc4928f23
+  data.tar.gz: e816232d3661aa2dac6e2d9da8e54ac0cc857018ef7a25bb236c3f8802ddd4b82c8cd802f7bb89ddacf3204b25a8fc72f226b694f10d1f8dda56f187191650c4

data/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 0.28.3
+
+- Support Canvas Shape DSL data-binding
+- Use Canvas Shape DSL data-binding with Hello, Canvas! text string attribute
+- Add bevel 3D look to Tetris elaborate sample via Canvas Shape DSL
+- Ensure shell height compensates for providing extra top space to menu_bar when rendered
+
 ## 0.28.2
 
 - Support `image` Canvas Shape DSL keyword

data/README.md

@@ -145,7 +145,7 @@ Hello, Table! Game Booked
 
 NOTE: Glimmer DSL for Opal is an alpha project. Please help make better by contributing, adopting for small or low risk projects, and providing feedback. It is still an early alpha, so the more feedback and issues you report the better.
 
-**Alpha Version** 0.28.2 only supports bare-minimum capabilities for the included [samples](https://github.com/AndyObtiva/glimmer-dsl-opal#samples) (originally written for [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt))
+**Alpha Version** 0.28.3 only supports bare-minimum capabilities for the included [samples](https://github.com/AndyObtiva/glimmer-dsl-opal#samples) (originally written for [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt))
 
 Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
 - [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (JRuby Desktop Development GUI Framework)
@@ -271,7 +271,7 @@ gem 'opal', '1.0.5'
 gem 'opal-rails', '1.1.2'
 gem 'opal-async', '~> 1.4.0'
 gem 'opal-jquery', '~> 0.4.4'
-gem 'glimmer-dsl-opal', '~> 0.28.2'
+gem 'glimmer-dsl-opal', '~> 0.28.3'
 gem 'glimmer-dsl-xml', '~> 1.2.0', require: false
 gem 'glimmer-dsl-css', '~> 1.2.0', require: false
 
@@ -2653,7 +2653,7 @@ Glimmer DSL for Opal Contact Manager Edit Done
 
 #### Tetris
 
-This is a minimal initial version of the [Tetris seen in Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#glimmer-tetris).
+This is a slightly minimal version of the [Tetris seen in Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#glimmer-tetris).
 
 Note that while the Glimmer GUI DSL code is mostly the same, some of the behavioral code around threads is changed
 into async Opal code via the [opal-async](https://github.com/AndyObtiva/opal-async) gem due to the async nature of transpiled JavaScript.
@@ -2743,6 +2743,8 @@ You should see "User Profile"
 
 #### Weather
 
+This sample does everything the desktop sample does except for the Canvas Shape DSL rectangle decoration (until supported).
+
 Code: [lib/glimmer-dsl-opal/samples/elaborate/weather](lib/glimmer-dsl-opal/samples/elaborate/weather.rb)
 
 Add the following require statement to `app/assets/javascripts/application.rb`

data/VERSION

@@ -1 +1 @@
-0.28.2
+0.28.3

data/lib/glimmer/dsl/opal/image_expression.rb

@@ -42,9 +42,6 @@ module Glimmer
               (
                 !parent.is_a?(Glimmer::SWT::Custom::Shape) &&
                 !parent.is_a?(Glimmer::SWT::CanvasProxy)
-              ) or
-              (
-                args.size < 3
               )
             )
           )

data/lib/glimmer/dsl/opal/property_expression.rb

@@ -1,11 +1,10 @@
 require 'glimmer/dsl/expression'
+require 'glimmer/swt/custom/shape'
 
 module Glimmer
   module DSL
     module Opal
       class PropertyExpression < StaticExpression
-        include TopLevelExpression
-
         def can_interpret?(parent, keyword, *args, &block)
           parent and
             (!args.empty?) and

data/lib/glimmer/dsl/opal/shape_expression.rb

@@ -22,6 +22,7 @@
 require 'glimmer/dsl/expression'
 require 'glimmer/dsl/parent_expression'
 require 'glimmer/swt/swt_proxy'
+require 'glimmer/swt/canvas_proxy'
 require 'glimmer/swt/custom/shape'
 
 module Glimmer
@@ -31,9 +32,9 @@ module Glimmer
         include ParentExpression
         
         def can_interpret?(parent, keyword, *args, &block)
-          (parent.is_a?(Glimmer::SWT::WidgetProxy) or parent.is_a?(Glimmer::SWT::Custom::Shape)) and
+          (parent.is_a?(Glimmer::SWT::CanvasProxy) or parent.is_a?(Glimmer::SWT::Custom::Shape)) and
             Glimmer::SWT::Custom::Shape.valid?(parent, keyword, args, &block) and
-            (keyword != 'text' || args.size >= 3)
+            ((keyword != 'text' && keyword != 'image') || args.size >= 3 || (args.empty? && block_given?))
         end
         
         def interpret(parent, keyword, *args, &block)

data/lib/glimmer/swt/custom/shape/arc.rb

@@ -30,6 +30,9 @@ module Glimmer
     module Custom
       class Shape
         class Arc < Shape
+          def parameter_names
+            [:x, :y, :width, :height, :start_angle, :arc_angle]
+          end
         
           def post_add_content
             @performing_post_add_content = true

data/lib/glimmer/swt/custom/shape/image.rb

@@ -31,6 +31,50 @@ module Glimmer
     module Custom
       class Shape
         class Image < Shape
+          def parameter_names
+            if image_whole_parameter_names.size == @args.size
+              @parameter_names = image_whole_parameter_names
+            elsif image_part_parameter_names.size == @args.size
+              @parameter_names = image_part_parameter_names
+            end
+            @parameter_names || image_whole_parameter_names
+          end
+        
+          def possible_parameter_names
+            (image_whole_parameter_names + image_part_parameter_names).uniq
+          end
+          
+          def image_part_parameter_names
+            [:image, :src_x, :src_y, :src_width, :src_height, :dest_x, :dest_y, :dest_width, :dest_height]
+          end
+          
+          def image_whole_parameter_names
+            [:image, :x, :y]
+          end
+          
+          def set_parameter_attribute(attribute_name, *args)
+            if @parameter_names.to_a.map(&:to_s).include?(attribute_name.to_s)
+              super(attribute_name, *args)
+              build_dom
+              reattach(dom_element)
+              return
+            end
+            ####TODO refactor and improve this method through meta-programming (and share across other shapes)
+            if image_whole_parameter_names.map(&:to_s).include?(attribute_name.to_s)
+              @parameter_names = image_whole_parameter_names
+            elsif image_part_parameter_names.map(&:to_s).include?(attribute_name.to_s)
+              @parameter_names = image_part_parameter_names
+            end
+            super(attribute_name, *args)
+          end
+              
+          def reattach(old_element)
+            old_element.attr('href', Element[@dom].attr('href'))
+            old_element.attr('x', Element[@dom].attr('x'))
+            old_element.attr('y', Element[@dom].attr('y'))
+            old_element.attr('width', Element[@dom].attr('width'))
+            old_element.attr('height', Element[@dom].attr('height'))
+          end
         
           def element
             'image'

data/lib/glimmer/swt/custom/shape/line.rb

@@ -30,6 +30,9 @@ module Glimmer
     module Custom
       class Shape
         class Line < Shape
+          def parameter_names
+            [:x1, :y1, :x2, :y2]
+          end
                 
           def element
             'line'

data/lib/glimmer/swt/custom/shape/point.rb

@@ -30,6 +30,9 @@ module Glimmer
     module Custom
       class Shape
         class Point < Shape
+          def parameter_names
+            [:x, :y]
+          end
                 
           def element
             'rect'

data/lib/glimmer/swt/custom/shape/polygon.rb

@@ -30,6 +30,9 @@ module Glimmer
     module Custom
       class Shape
         class Polygon < Shape
+          def parameter_names
+            [:point_array]
+          end
                 
           def element
             'polygon'

data/lib/glimmer/swt/custom/shape/polyline.rb

@@ -30,6 +30,9 @@ module Glimmer
     module Custom
       class Shape
         class Polyline < Shape
+          def parameter_names
+            [:point_array]
+          end
                 
           def element
             'polyline'

data/lib/glimmer/swt/custom/shape/rectangle.rb

@@ -30,6 +30,57 @@ module Glimmer
     module Custom
       class Shape
         class Rectangle < Shape
+        
+          def parameter_names
+            if @parameter_names.nil?
+              if rectangle_parameter_names.size == @args.size
+                @parameter_names = rectangle_parameter_names
+              elsif rectangle_round_parameter_names.size == @args.size
+                @parameter_names = rectangle_round_parameter_names
+              elsif rectangle_gradient_parameter_names.size == @args.size
+                @parameter_names = rectangle_gradient_parameter_names
+              elsif rectangle_rectangle_parameter_names.size == @args.size
+                @parameter_names = rectangle_rectangle_parameter_names
+              end
+            end
+            @parameter_names || rectangle_parameter_names
+          end
+          
+          def possible_parameter_names
+            # TODO refactor and improve this method through meta-programming (and share across other shapes)
+            (rectangle_round_parameter_names + rectangle_parameter_names + rectangle_gradient_parameter_names + rectangle_rectangle_parameter_names).uniq
+          end
+          
+          def rectangle_round_parameter_names
+            [:x, :y, :width, :height, :arc_width, :arc_height]
+          end
+          
+          def rectangle_gradient_parameter_names
+            [:x, :y, :width, :height, :vertical]
+          end
+          
+          def rectangle_parameter_names
+            [:x, :y, :width, :height]
+          end
+          
+          def rectangle_rectangle_parameter_names
+            # this receives a Rectangle object
+            [:rectangle]
+          end
+          
+          def set_parameter_attribute(attribute_name, *args)
+            return super(attribute_name, *args) if @parameter_names.to_a.map(&:to_s).include?(attribute_name.to_s)
+            if rectangle_parameter_names.map(&:to_s).include?(attribute_name.to_s)
+              @parameter_names = rectangle_parameter_names
+            elsif rectangle_round_parameter_names.map(&:to_s).include?(attribute_name.to_s)
+              @parameter_names = rectangle_round_parameter_names
+            elsif rectangle_gradient_parameter_names.map(&:to_s).include?(attribute_name.to_s)
+              @parameter_names = rectangle_gradient_parameter_names
+            elsif rectangle_rectangle_parameter_names.map(&:to_s).include?(attribute_name.to_s)
+              @parameter_names = rectangle_rectangle_parameter_names
+            end
+            super(attribute_name, *args)
+          end
                 
           def element
             'rect'

data/lib/glimmer/swt/custom/shape/text.rb

@@ -30,7 +30,57 @@ module Glimmer
     module Custom
       class Shape
         class Text < Shape
-        
+          def parameter_names
+            if text_parameter_names.size == @args.size
+              @parameter_names = text_parameter_names
+            elsif text_transparent_parameter_names.size == @args.size
+              @parameter_names = text_transparent_parameter_names
+            elsif text_flags_parameter_names.size == @args.size
+              @parameter_names = text_flags_parameter_names
+            end
+            @parameter_names || text_parameter_names
+          end
+          
+          def possible_parameter_names
+            # TODO refactor and improve this method through meta-programming (and share across other shapes)
+            (text_parameter_names + text_transparent_parameter_names + text_flags_parameter_names).uniq
+          end
+          
+          def text_parameter_names
+            [:string, :x, :y]
+          end
+          
+          def text_transparent_parameter_names
+            [:string, :x, :y, :is_transparent]
+          end
+          
+          def text_flags_parameter_names
+            [:string, :x, :y, :flags]
+          end
+          
+          def set_parameter_attribute(attribute_name, *args)
+            if @parameter_names.to_a.map(&:to_s).include?(attribute_name.to_s)
+              super(attribute_name, *args)
+              build_dom
+              reattach(dom_element)
+              return
+            end
+            if text_parameter_names.map(&:to_s).include?(attribute_name.to_s)
+              @parameter_names = text_parameter_names
+            elsif text_transparent_parameter_names.map(&:to_s).include?(attribute_name.to_s)
+              @parameter_names = text_transparent_parameter_names
+            elsif text_flags_parameter_names.map(&:to_s).include?(attribute_name.to_s)
+              @parameter_names = text_flags_parameter_names
+            end
+            super(attribute_name, *args)
+          end
+          
+          def reattach(old_element)
+            old_element.attr('x', Element[@dom].attr('x'))
+            old_element.attr('y', Element[@dom].attr('y'))
+            old_element.text(Element[@dom].html)
+          end
+          
           def background=(value)
             # TODO override background= to fill a rectangle containing text, matching its size
             # For now, disable background when foreground is not set

data/lib/glimmer/swt/custom/shape.rb

@@ -61,18 +61,112 @@ module Glimmer
         end
         
         def background=(value)
-          value = ColorProxy.new(value) if value.is_a?(String)
+          value = ColorProxy.new(value) if value.is_a?(String) || value.is_a?(Symbol)
           @background = value
           dom_element.css('fill', background.to_css) unless background.nil?
         end
         
         def foreground=(value)
-          value = ColorProxy.new(value) if value.is_a?(String)
+          value = ColorProxy.new(value) if value.is_a?(String) || value.is_a?(Symbol)
           @foreground = value
           dom_element.css('stroke', foreground.to_css) unless foreground.nil?
           dom_element.css('fill', 'transparent') if background.nil?
         end
         
+        def post_add_content
+          # TODO avoid rendering unless args changed from initialize args (due to setting of piecemeal attributes)
+          render
+        end
+        
+        def render(custom_parent_dom_element: nil, brand_new: false)
+          super(custom_parent_dom_element: nil, brand_new: false)
+          self.background = background
+          self.foreground = foreground
+          self.font = font
+        end
+        
+        # parameter names for arguments to pass to SWT GC.xyz method for rendering shape (e.g. draw_image(image, x, y) yields :image, :x, :y parameter names)
+        def parameter_names
+          [:x, :y, :width, :height]
+        end
+        
+        # subclasses may override to specify location parameter names if different from x and y (e.g. all polygon points are location parameters)
+        # used in calculating movement changes
+        def location_parameter_names
+          [:x, :y]
+        end
+        
+        def possible_parameter_names
+          parameter_names
+        end
+        
+        def parameter_name?(attribute_name)
+          possible_parameter_names.map(&:to_s).include?(attribute_getter(attribute_name))
+        end
+        
+        def current_parameter_name?(attribute_name)
+          parameter_names.include?(attribute_name.to_s.to_sym)
+        end
+        
+        def parameter_index(attribute_name)
+          parameter_names.index(attribute_name.to_s.to_sym)
+        end
+        
+        def get_parameter_attribute(attribute_name)
+          @args[parameter_index(attribute_getter(attribute_name))]
+        end
+        
+        def set_parameter_attribute(attribute_name, *args)
+          @args[parameter_index(attribute_getter(attribute_name))] = args.size == 1 ? args.first : args
+        end
+        
+        def has_attribute?(attribute_name, *args)
+          parameter_name?(attribute_name) or
+            (respond_to?(attribute_name, super: true) and respond_to?(attribute_setter(attribute_name), super: true))
+        end
+        
+        def set_attribute(attribute_name, *args)
+          attribute_getter_name = attribute_getter(attribute_name)
+          attribute_setter_name = attribute_setter(attribute_name)
+          if parameter_name?(attribute_name)
+            return if attribute_getter_name == (args.size == 1 ? args.first : args)
+            set_parameter_attribute(attribute_getter_name, *args)
+          elsif (respond_to?(attribute_name, super: true) and respond_to?(attribute_setter_name, super: true))
+            return if self.send(attribute_getter_name) == (args.size == 1 ? args.first : args)
+            self.send(attribute_setter_name, *args)
+          end
+        end
+        
+        def get_attribute(attribute_name)
+          if parameter_name?(attribute_name)
+            arg_index = parameter_index(attribute_name)
+            @args[arg_index] if arg_index
+          elsif (respond_to?(attribute_name, super: true) and respond_to?(attribute_setter(attribute_name), super: true))
+            self.send(attribute_name)
+          end
+        end
+        
+        # TODO look why image is not working with the method_missing and respond_to? on shape
+        def method_missing(method_name, *args, &block)
+          if method_name.to_s.end_with?('=')
+            set_attribute(method_name, *args)
+          elsif has_attribute?(method_name) && args.empty?
+            get_attribute(method_name)
+          else # TODO support proxying calls to handle_observation_request for listeners just like WidgetProxy
+            super(method_name, *args, &block)
+          end
+        end
+
+        def respond_to?(method_name, *args, &block)
+          options = args.last if args.last.is_a?(Hash)
+          super_invocation = options && options[:super]
+          if !super_invocation && has_attribute?(method_name)
+            true
+          else
+            super(method_name, *args, &block)
+          end
+        end
+        
         def attach(the_parent_dom_element)
           the_parent_dom_element.html("#{the_parent_dom_element.html()}\n#{@dom}")
         end

data/lib/glimmer/swt/menu_proxy.rb

@@ -198,6 +198,7 @@ module Glimmer
           # delay this till all children rendered (perhaps post_add_content block)
           parent_dom_element.css('position', 'relative')
           parent_dom_element.css('margin-top', '30px')
+          parent_dom_element.css('height', '114%')
           redraw
           `$(#{path}).menu({
             position: { my: "top", at: "bottom" },
@@ -222,7 +223,6 @@ module Glimmer
         @visible = value
         if @visible
           parent.menu_requested = true
-          parent.dom_element.css('position', 'relative')
           render
           dom_element.css('position', 'absolute')
           dom_element.css('left', parent.menu_x - parent.dom_element.offset.left)

data/lib/glimmer/swt/widget_proxy.rb

@@ -295,6 +295,7 @@ module Glimmer
       end
       
       def font=(value)
+        return if value.nil?
         @font = value.is_a?(FontProxy) ? value : FontProxy.new(self, value)
         dom_element.css('font-family', @font.name) unless @font.nil?
         dom_element.css('font-style', 'italic') if @font&.style == :italic || [@font&.style].flatten.compact.include?(:italic)

data/lib/glimmer-dsl-opal/samples/elaborate/tetris/view/block.rb

@@ -25,10 +25,54 @@ class Tetris
       include Glimmer::UI::CustomWidget
   
       options :game_playfield, :block_size, :row, :column
+      
+      attr_accessor :bevel_pixel_size
+      
+      before_body do
+        self.bevel_pixel_size = 0.16*block_size.to_f
+      end
   
       body {
         canvas { |canvas_proxy|
           background <= [game_playfield[row][column], :color]
+          polygon(0, 0, block_size, 0, block_size - bevel_pixel_size, bevel_pixel_size, bevel_pixel_size, bevel_pixel_size) {
+            background <= [game_playfield[row][column], :color, on_read: ->(color_value) {
+              unless color_value.nil?
+                color = color(color_value)
+                rgb(color.red + 4*BEVEL_CONSTANT, color.green + 4*BEVEL_CONSTANT, color.blue + 4*BEVEL_CONSTANT)
+              end
+            }]
+          }
+          polygon(block_size, 0, block_size - bevel_pixel_size, bevel_pixel_size, block_size - bevel_pixel_size, block_size - bevel_pixel_size, block_size, block_size) {
+            background <= [game_playfield[row][column], :color, on_read: ->(color_value) {
+              unless color_value.nil?
+                color = color(color_value)
+                rgb(color.red - BEVEL_CONSTANT, color.green - BEVEL_CONSTANT, color.blue - BEVEL_CONSTANT)
+              end
+            }]
+          }
+          polygon(block_size, block_size, 0, block_size, bevel_pixel_size, block_size - bevel_pixel_size, block_size - bevel_pixel_size, block_size - bevel_pixel_size) {
+            background <= [game_playfield[row][column], :color, on_read: ->(color_value) {
+              unless color_value.nil?
+                color = color(color_value)
+                rgb(color.red - 2*BEVEL_CONSTANT, color.green - 2*BEVEL_CONSTANT, color.blue - 2*BEVEL_CONSTANT)
+              end
+            }]
+          }
+          polygon(0, 0, 0, block_size, bevel_pixel_size, block_size - bevel_pixel_size, bevel_pixel_size, bevel_pixel_size) {
+            background <= [game_playfield[row][column], :color, on_read: ->(color_value) {
+              unless color_value.nil?
+                color = color(color_value)
+                rgb(color.red - BEVEL_CONSTANT, color.green - BEVEL_CONSTANT, color.blue - BEVEL_CONSTANT)
+              end
+            }]
+          }
+          rectangle(0, 0, block_size, block_size) {
+            foreground <= [game_playfield[row][column], :color, on_read: ->(color_value) {
+              color_value == Model::Block::COLOR_CLEAR ? :gray : color_value
+            }]
+          }
+          
         }
       }
     end

data/lib/glimmer-dsl-opal/samples/elaborate/tetris.rb

@@ -29,7 +29,7 @@ require_relative 'tetris/view/tetris_menu_bar'
 class Tetris
   include Glimmer::UI::CustomShell
   
-  BLOCK_SIZE = 7
+  BLOCK_SIZE = 37
   FONT_NAME = 'Menlo'
   FONT_TITLE_HEIGHT = 32
   FONT_TITLE_STYLE = :bold
@@ -143,7 +143,7 @@ class Tetris
   def show_about_dialog
     message_box {
       text 'Glimmer Tetris'
-      message "Glimmer Tetris\n\nGlimmer DSL for SWT Sample\n\nUse arrow keys for movement\nand right/left alt/shift keys for rotation\nAlternatively:\nLeft is A\nRight is D\nDown is S\nUp is W\nRotate Left is Q\nRotate Right is E\n\nCopyright (c) 2007-2021 Andy Maleh"
+      message "Glimmer Tetris\n\nGlimmer DSL for SWT Sample\n\nLeft is A\nRight is D\nDown is S\nUp is W\nRotate Left is Q\nRotate Right is E\nAlternatively:\nUse arrow keys for movement\nand right/left alt/shift keys for rotation\n\nCopyright (c) 2007-2021 Andy Maleh"
     }.open
   end
 end

data/lib/glimmer-dsl-opal/samples/elaborate/weather.rb

@@ -70,9 +70,10 @@ class Weather
             text temp_unit
             background DEFAULT_BACKGROUND
             
-            rectangle(0, 0, [:default, -2], [:default, -2], 15, 15) {
-              foreground DEFAULT_FOREGROUND
-            }
+            # TODO enable once Canvas Shape DSL is supported under any widget (not just canvas)
+#             rectangle(0, 0, [:default, -2], [:default, -2], 15, 15) {
+#               foreground DEFAULT_FOREGROUND
+#             }
       
             %w[temp temp_min temp_max feels_like].each do |field_name|
               temp_field(field_name, temp_unit)

data/lib/glimmer-dsl-opal/samples/hello/hello_canvas.rb

@@ -21,9 +21,21 @@
 
 class HelloCanvas
   include Glimmer::UI::CustomShell
-  
+
+  attr_accessor :artist
+        
   before_body do
     @image_object = image(File.expand_path('./images/scaffold_app.png', __dir__), width: 50)
+    @artist = ''
+  end
+  
+  after_body do
+    Thread.new do
+      'Picasso'.chars.async_each do |character|
+        sleep(0.5)
+        self.artist += character
+      end
+    end
   end
   
   body {
@@ -61,7 +73,10 @@ class HelloCanvas
         arc(210, 210, 100, 100, 30, -77) {
           background :red
         }
-        text('Picasso', 67, 103) {
+        text {
+          string <= [self, :artist]
+          x 67
+          y 103
           foreground :dark_magenta
           font name: 'Courier', height: 30
         }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-opal
 version: !ruby/object:Gem::Version
-  version: 0.28.2
+  version: 0.28.3
 platform: ruby
 authors:
 - AndyMaleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-08-31 00:00:00.000000000 Z
+date: 2021-09-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer