glimmer-dsl-opal 0.25.3 → 0.26.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7730a7073849e1cb3cf05073368a974a7cc493fa44621b3fd58d180e76c25c89
-  data.tar.gz: 7588d6730c8f81b27e8aff908bfe3c7f4daff093c004661abbb0c4fb0a2b4756
+  metadata.gz: dd9df390a04a8efb59afa0dcfe42a88d3a2ebcc89b19f51b5daf325e85495898
+  data.tar.gz: f842142ce4346af198197cacaa1695eddc9f15f684c4b4250ebed41872d9253f
 SHA512:
-  metadata.gz: f50d2e39e990b86392e4fc719737b19337083380c874e426186dbbfe9ad7b60445a76fa93a8f5cf6d5055576f60209423b940e5efce3fee28f5081a99a61c2a3
-  data.tar.gz: 70634d53b24b7a82fcc8ca50b6b502d8b8b4260d204e89682a953e9bdbae81c7688867c8552082f323b1526170cd40a7a85222f637f8d8fb765c2658ce306e29
+  metadata.gz: 1090a9d0bf0cab0bb673e32ce5711e3d034866e4d195995db125b40a43fa798f09f6944ba2e2bfbb38d06731248717bc38fd166d50c543e6271564aa8e80f978
+  data.tar.gz: 57e6aa38f7829508d5a6f0a54814ada1d58c79fda05f56d353a069271960727b9d92c2bb642839215a6942958d267d00e9befc7b5f688755037fe46fcd7b8f53

data/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 0.26.2
+
+- Support key_event.key_location to distinguish between left and right alt/shift/command/ctrl buttons
+- Use right/left alt/shift keys in Tetris for rotate right and rotate left
+
+## 0.26.1
+
+- Support display on_swt_keydown event keyCode/key_code values for arrow keys and alt/shift/ctrl
+- Use arrow keys for movement in Tetris
+- Use alt/shift keys for rotate right in Tetris
+
+## 0.26.0
+
+- Tetris elaborate sample (minimal initial version of the one in Glimmer DSL for SWT)
+- Support `menu_item` `selection` attribute data-binding for `:check` and `:radio` SWT styles
+- Set 'custom_shell' data for custom shell on its body_root
+- Provide parent_proxy on custom widgets as an alternative to parent for compatibility with Glimmer DSL for SWT
+- Have custom widgets derive their parent from body root if not passed in explicitly
+
+## 0.25.4
+
+- Upgrade to opal-async 1.4.0
+- Update Hello, Custom Widget! to utilize `Array#async_cycle` instead of `Array#cycle`
+
 ## 0.25.3
 
 - Fix `c_combo`'s data-binding of selection receiving model changes

data/README.md

@@ -12,6 +12,8 @@ Use in one of two ways:
 
 Glimmer DSL for Opal successfully reuses the entire [Glimmer](https://github.com/AndyObtiva/glimmer) core DSL engine in [Opal Ruby](https://opalrb.com/) inside a web browser, and as such inherits the full range of Glimmer desktop [data-binding](https://github.com/AndyObtiva/glimmer#data-binding) capabilities for the web (including Shine syntax using `<=>` and `<=` for bidirectional [two-way] and unidirectional [one-way] data-binding respectively).
 
+(note that auto-webification of desktop apps that involve multiple threads might involve extra changes to the code to utilize web async calls due to the async nature of transpiled JavaScript code)
+
 #### Hello, Table! Sample
 
 Code: [lib/glimmer-dsl-opal/samples/hello/hello_table.rb](lib/glimmer-dsl-opal/samples/hello/hello_table.rb)
@@ -143,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.25.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))
+**Alpha Version** 0.26.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))
 
 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)
@@ -194,6 +196,7 @@ Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
     - [Elaborate Samples](#elaborate-samples)
       - [Login](#login)
       - [Contact Manager](#contact-manager)
+      - [Tetris](#tetris)
       - [Tic Tac Toe](#tic-tac-toe)
       - [User Profile](#user-profile)
       - [Weather](#weather)
@@ -232,8 +235,8 @@ Alternatively, web developers may directly use [Glimmer DSL for Opal](https://ru
 
 ## Pre-requisites
 
-- Rails 5: [https://github.com/rails/rails/tree/5-2-stable](https://github.com/rails/rails/tree/5-2-stable)
-- Opal 1.0.4: [https://github.com/opal/opal](https://github.com/opal/opal)
+- Rails 5.2: [https://github.com/rails/rails/tree/5-2-stable](https://github.com/rails/rails/tree/5-2-stable)
+- Opal 1.0.5: [https://github.com/opal/opal](https://github.com/opal/opal)
 - Opal-Rails 1.1.2: [https://github.com/opal/opal-rails](https://github.com/opal/opal-rails)
 - jQuery 3: [https://code.jquery.com/](https://code.jquery.com/) (jQuery 3.5.1 is included in the [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem)
 - jQuery-UI 1.12: [https://code.jquery.com/](https://jqueryui.com/) (jQuery-UI 1.12.1 is included in the [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem)
@@ -250,7 +253,7 @@ Please follow the following steps to setup.
 Install a Rails 5 gem:
 
 ```
-gem install rails -v5.2.4.4
+gem install rails -v5.2.6
 ```
 
 Start a new Rails 5 app:
@@ -262,11 +265,11 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'opal', '1.0.4'
+gem 'opal', '1.0.5'
 gem 'opal-rails', '1.1.2'
-gem 'opal-async', '~> 1.3.0'
+gem 'opal-async', '~> 1.4.0'
 gem 'opal-jquery', '~> 0.4.4'
-gem 'glimmer-dsl-opal', '~> 0.25.3'
+gem 'glimmer-dsl-opal', '~> 0.26.2'
 gem 'glimmer-dsl-xml', '~> 1.2.0', require: false
 gem 'glimmer-dsl-css', '~> 1.2.0', require: false
 
@@ -1035,7 +1038,7 @@ Add the following require statement to `app/assets/javascripts/application.rb`
 require 'glimmer-dsl-opal/samples/hello/hello_custom_widget'
 ```
 
-Or add the Glimmer code directly if you prefer to play around with it:
+Or add the Glimmer code directly if you prefer to play around with it (note that the Opal version needs `Array#async_cycle` from the opal-async gem instead of `Array#cycle` due to the async nature of JavaScript):
 
 ```ruby
 # This class declares a `greeting_label` custom widget (by convention)
@@ -1060,7 +1063,7 @@ class GreetingLabel
     return if colors.nil?
     
     Thread.new { # imported from Glimmer DSL for SWT. In Opal, avoid Threads and sleep to avoid blocking GUI.
-      colors.cycle { |color|
+      colors.async_cycle { |color|
         async_exec {
           self.color = color
         }
@@ -2582,6 +2585,40 @@ Glimmer DSL for Opal Contact Manager Edit Done
 
 ![Glimmer DSL for Opal Contact Manager Edit Done](images/glimmer-dsl-opal-contact-manager-edit-done.png)
 
+#### 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).
+
+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.
+
+Still, this sample has done the remarkable feat of reusing all of the Tetris model/view logic from Glimmer DSL for SWT mostly unchanged.
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+require 'glimmer-dsl-opal/samples/elaborate/tetris'
+```
+
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Tetris](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-tetris.png)
+
+Glimmer app on the web (using `glimmer-dsl-opal` gem):
+
+Start the Rails server:
+```
+rails s
+```
+
+Visit `http://localhost:3000`
+
+You should see "Tetris" (a minimal version of the one in Glimmer DSL for SWT)
+
+![Glimmer DSL for Opal Tetris](images/glimmer-dsl-opal-tetris.png)
+
+![Glimmer DSL for Opal Tetris Video](images/glimmer-dsl-opal-tetris.gif)
+
 #### Tic Tac Toe
 
 Add the following require statement to `app/assets/javascripts/application.rb`

data/VERSION

@@ -1 +1 @@
-0.25.3
+0.26.2

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

@@ -37,9 +37,6 @@ module Glimmer
             if parent.is_a?(Glimmer::SWT::WidgetProxy)
               return true
             else
-              puts 'parent'
-              puts parent.class
-              puts parent
               raise Glimmer::Error, "menu may only be nested under a widget (like shell or another menu)!"
             end
           end

data/lib/glimmer/swt/control_editor.rb

@@ -27,8 +27,8 @@ module Glimmer
       ATTRIBUTES = [:grabHorizontal, :grabVertical, :horizontalAlignment, :verticalAlignment, :minimumWidth, :minimumHeight]
       attr_accessor(*ATTRIBUTES)
       ATTRIBUTES.each do |attribute|
-        alias_method attribute.underscore, attribute
-        alias_method "#{attribute.underscore}=", "#{attribute}="
+        alias_method attribute.to_s.underscore, attribute
+        alias_method "#{attribute.to_s.underscore}=", "#{attribute}="
       end
       
       # TODO consider supporting a java_attr_accessor to get around having to generate all the aliases manually

data/lib/glimmer/swt/dialog_proxy.rb

@@ -19,12 +19,13 @@
 # OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-require 'glimmer/swt/widget_proxy'
 require 'glimmer/swt/display_proxy'
+require 'glimmer/swt/widget_proxy'
+require 'glimmer/swt/shell_proxy'
 
 module Glimmer
   module SWT
-    class DialogProxy < CompositeProxy
+    class DialogProxy < ShellProxy
       STYLE = <<~CSS
         .ui-dialog .ui-dialog-content {
           background: rgb(235, 235, 235);
@@ -86,7 +87,7 @@ module Glimmer
         @open
       end
       
-      def open
+      def open(async: true)
         owned_proc = Glimmer::Util::ProcTracker.new(owner: self, invoked_from: :open) {
           shell.open(async: false) unless shell.open?
           unless @init
@@ -113,8 +114,13 @@ module Glimmer
             dom_element.dialog('open')
           end
           @open = true
+          listeners_for('swt_show').each {|listener| listener.call(Event.new(widget: self))}
         }
-        DisplayProxy.instance.async_exec(owned_proc)
+        if async
+          DisplayProxy.instance.async_exec(owned_proc)
+        else
+          owned_proc.call
+        end
       end
       
       def hide
@@ -129,6 +135,7 @@ module Glimmer
         dom_element.remove
         @open = false
         @init = false
+        listeners_for('swt_close').each {|listener| listener.call(Event.new(widget: self))}
         Element['.dialog-overlay'].add_class('hide') unless DisplayProxy.instance.dialogs.any?(&:open?)
         parent.children.delete(self)
         shell.close if shell.children.empty?

data/lib/glimmer/swt/display_proxy.rb

@@ -1,8 +1,25 @@
 require 'glimmer/swt/widget_proxy'
+require 'glimmer/swt/swt_proxy'
 
 module Glimmer
   module SWT
     class DisplayProxy < WidgetProxy
+      JS_KEY_CODE_TO_SWT_KEY_CODE_MAP = {
+        16 => SWTProxy[:shift],
+        17 => SWTProxy[:ctrl],
+        18 => SWTProxy[:alt],
+        37 => SWTProxy[:arrow_left],
+        38 => SWTProxy[:arrow_up],
+        39 => SWTProxy[:arrow_right],
+        40 => SWTProxy[:arrow_down],
+      }
+      
+      JS_LOCATION_TO_SWT_KEY_LOCATION_MAP = {
+        1 => SWTProxy[:left],
+        2 => SWTProxy[:right],
+      }
+      
+    
       class << self
         def instance
           @instance ||= new
@@ -95,7 +112,9 @@ module Glimmer
                   event.singleton_class.define_method(:character) do
                     which || key_code
                   end
-                  event.define_singleton_method(:keyCode) {event.which}
+                  event.define_singleton_method(:keyCode) {
+                    JS_KEY_CODE_TO_SWT_KEY_CODE_MAP[event.which] || event.which
+                  }
                   event.define_singleton_method(:key_code, &event.method(:keyCode))
                   event.define_singleton_method(:character) {event.which.chr}
                   event.define_singleton_method(:stateMask) do
@@ -130,10 +149,19 @@ module Glimmer
               event: 'keydown',
               event_handler: -> (event_listener) {
                 -> (event) {
-                  event.singleton_class.define_method(:character) do
+                  original_event = event
+                  event = ::Event.new(event)
+                  event.define_singleton_method(:keyLocation) do
+                    key_location = `#{original_event}.location`
+                    JS_LOCATION_TO_SWT_KEY_LOCATION_MAP[key_location]
+                  end
+                  event.define_singleton_method(:key_location, &event.method(:keyLocation))
+                  event.define_singleton_method(:character) do
                     which || key_code
                   end
-                  event.define_singleton_method(:keyCode) {event.which}
+                  event.define_singleton_method(:keyCode) {
+                    JS_KEY_CODE_TO_SWT_KEY_CODE_MAP[event.which] || event.which
+                  }
                   event.define_singleton_method(:key_code, &event.method(:keyCode))
                   event.define_singleton_method(:character) {event.which.chr}
                   event.define_singleton_method(:stateMask) do
@@ -150,7 +178,7 @@ module Glimmer
                     doit = value
                   end
                   event.define_singleton_method(:doit) { doit }
-                  event_listener.call(event) if event.key_code != 13 && (event.key_code == 127 || event.key_code <= 31)
+                  event_listener.call(event) if event.which != 13 && (event.which == 127 || event.which <= 40)
                   
                     # TODO Fix doit false, it's not stopping input
                   unless doit
@@ -159,7 +187,6 @@ module Glimmer
                     event.stop_propagation
                     event.stop_immediate_propagation
                   end
-                  
                   doit
                 }
               }

data/lib/glimmer/swt/shell_proxy.rb

@@ -69,6 +69,7 @@ module Glimmer
       HEIGHT_MIN = 0
       
       def initialize(args)
+        # TODO set parent
         @args = args
         @children = []
         render # TODO attach to specific element
@@ -78,7 +79,7 @@ module Glimmer
         self.minimum_size = Point.new(WIDTH_MIN, HEIGHT_MIN)
         DisplayProxy.instance.shells << self
       end
-      
+              
       def post_add_content
         `$( document ).tooltip()`
       end
@@ -128,6 +129,16 @@ module Glimmer
         dom_element.css('min-height', "#{@minimum_size.y}px")
       end
       
+      def handle_observation_request(keyword, original_event_listener)
+        case keyword
+        when 'on_swt_show', 'on_swt_close', 'on_shell_closed'
+          keyword = 'on_swt_close' if keyword == 'on_shell_closed'
+          listeners_for(keyword.sub(/^on_/, '')) << original_event_listener.to_proc
+        else
+          super(keyword, original_event_listener)
+        end
+      end
+      
       def style_dom_css
         <<~CSS
           .hide {
@@ -169,6 +180,7 @@ module Glimmer
             DisplayProxy.instance.shells.select(&:open?).reject {|s| s == self}.map(&:hide)
             dom_element.remove_class('hide')
             @open = true
+            listeners_for('swt_show').each {|listener| listener.call(Event.new(widget: self))}
           end
         end
         if async
@@ -177,6 +189,7 @@ module Glimmer
           work.call
         end
       end
+      alias show open
       
       def hide
         dom_element.add_class('hide')
@@ -187,11 +200,25 @@ module Glimmer
         DisplayProxy.instance.shells.delete(self)
         dom_element.remove
         @open = false
+        listeners_for('swt_close').each {|listener| listener.call(Event.new(widget: self))}
       end
       
       def open?
         @open
       end
+      
+      def visible
+        @open
+      end
+      alias visible? visible
+      
+      def visible=(value)
+        if value
+          show(async: false)
+        else
+          hide
+        end
+      end
     end
   end
 end

data/lib/glimmer/swt/table_item_proxy.rb

@@ -59,26 +59,6 @@ module Glimmer
         @text_array ||= []
       end
 
-      def get_data(key = nil)
-        if key.nil?
-          @data
-        else
-          data_hash[key]
-        end
-      end
-      
-      def set_data(key = nil, data_value)
-        if key.nil?
-          @data = data_value
-        else
-          data_hash[key] = data_value
-        end
-      end
-      
-      def data_hash
-        @data_hash ||= {}
-      end
-      
       def parent_path
         parent.items_path
       end

data/lib/glimmer/swt/table_proxy.rb

@@ -61,6 +61,10 @@ module Glimmer
                   on_focus_lost {
                     table_proxy.finish_edit!
                   }
+                  on_modify_text do |event|
+                    # No Op, just record @text changes on key up
+                    # TODO find a better solution than this in the future
+                  end
                   on_key_pressed { |key_event|
                     if key_event.keyCode == swt(:cr)
                       table_proxy.finish_edit!

data/lib/glimmer/swt/widget_proxy.rb

@@ -31,6 +31,8 @@ module Glimmer
       include Glimmer
       include PropertyOwner
       
+      Event = Struct.new(:widget, keyword_init: true)
+      
       SWT_CURSOR_TO_CSS_CURSOR_MAP = {
         wait: 'wait',
         sizenwse: 'nwse-resize',
@@ -140,7 +142,6 @@ module Glimmer
         # TODO consider changing children to an array (why is it a Set if order matters?)
         @children = Set.new # TODO consider moving to composite
         @enabled = true
-        @data = {}
         DEFAULT_INITIALIZERS[self.class.underscored_widget_name(self).to_s.to_sym]&.call(self)
         @parent.post_initialize_child(self) # TODO rename to post_initialize_child to be closer to glimmer-dsl-swt terminology
       end
@@ -172,18 +173,30 @@ module Glimmer
         end
       end
       
-      def set_data(key=nil, value)
-        @data[key] = value
+      def set_data(key = nil, value)
+        if key.nil?
+          @data = value
+        else
+          swt_data[key] = value
+        end
       end
       alias setData set_data
       alias data= set_data
       
-      def get_data(key=nil)
-        @data[key]
+      def get_data(key = nil)
+        if key.nil?
+          @data
+        else
+          swt_data[key]
+        end
       end
       alias getData get_data
       alias data get_data
       
+      def swt_data
+        @swt_data ||= {}
+      end
+      
       def css_classes
         dom_element.attr('class').to_s.split
       end
@@ -192,9 +205,9 @@ module Glimmer
         remove_all_listeners
         Document.find(path).remove
         parent&.post_dispose_child(self)
-        # TODO fire on_widget_disposed listener
 #         children.each(:dispose) # TODO enable this safely
         @disposed = true
+        listeners_for('widget_disposed').each {|listener| listener.call(Event.new(widget: self))}
       end
       
       def remove_all_listeners
@@ -733,6 +746,14 @@ module Glimmer
         @event_handling_suspended
       end
       
+      def listeners
+        @listeners ||= {}
+      end
+      
+      def listeners_for(listener_event)
+        listeners[listener_event.to_s] ||= []
+      end
+      
       def can_handle_observation_request?(observation_request)
         # TODO sort this out for Opal
         observation_request = observation_request.to_s
@@ -747,6 +768,15 @@ module Glimmer
       end
       
       def handle_observation_request(keyword, original_event_listener)
+        case keyword
+        when 'on_widget_disposed'
+          listeners_for(keyword.sub(/^on_/, '')) << original_event_listener.to_proc
+        else
+          handle_javascript_observation_request(keyword, original_event_listener)
+        end
+      end
+      
+      def handle_javascript_observation_request(keyword, original_event_listener)
         return unless effective_observation_request_to_event_mapping.keys.include?(keyword)
         event = nil
         delegate = nil
@@ -770,7 +800,11 @@ module Glimmer
           end
           the_listener_dom_element = event_element_css_selector ? Element[event_element_css_selector] : listener_dom_element
           unless the_listener_dom_element.empty?
-            the_listener_dom_element.on(event, &async_event_listener)
+            if is_a?(DisplayProxy) && event == 'keydown'
+              `document.addEventListener('keydown', #{async_event_listener})`
+            else
+              the_listener_dom_element.on(event, &async_event_listener)
+            end
             # TODO ensure uniqueness of insertion (perhaps adding equals/hash method to event listener proxy)
             
             event_listener_proxies << EventListenerProxy.new(element_proxy: self, selector: selector, dom_element: the_listener_dom_element, event: event, listener: async_event_listener, original_event_listener: original_event_listener)
@@ -886,6 +920,18 @@ module Glimmer
 #               }
 #             end,
 #           },
+          MenuItemProxy => {
+            :selection => lambda do |observer|
+              on_widget_selected { |selection_event|
+                # TODO look into validity of this and perhaps move toggle logic to MenuItemProxy
+                if check?
+                  observer.call(!selection)
+                else
+                  observer.call(selection)
+                end
+              }
+            end
+          },
           ScaleProxy => {
             :selection => lambda do |observer|
               on_widget_selected { |selection_event|
@@ -1021,7 +1067,6 @@ require 'glimmer/swt/combo_proxy'
 require 'glimmer/swt/c_combo_proxy'
 require 'glimmer/swt/checkbox_proxy'
 require 'glimmer/swt/composite_proxy'
-require 'glimmer/swt/dialog_proxy'
 require 'glimmer/swt/date_time_proxy'
 require 'glimmer/swt/group_proxy'
 require 'glimmer/swt/label_proxy'