scarpe 0.2.1 → 0.3.0

data/lib/scarpe/wv/drawable.rb

@@ -0,0 +1,273 @@
+# frozen_string_literal: true
+
+module Scarpe::Webview
+  # The Webview::Drawable parent class helps connect a Webview drawable with
+  # its Shoes equivalent, render itself to the Webview DOM, handle
+  # Javascript events and generally keep things working in Webview.
+  class Drawable < Shoes::Linkable
+    # This will pick up the log implementation from wv.rb
+    include Shoes::Log
+
+    class << self
+      # Return the corresponding Webview class for a particular Shoes class name
+      def display_class_for(scarpe_class_name)
+        scarpe_class = Shoes.const_get(scarpe_class_name)
+        unless scarpe_class.ancestors.include?(Shoes::Linkable)
+          raise Scarpe::InvalidClassError, "Scarpe Webview can only get display classes for Shoes " +
+            "linkable drawables, not #{scarpe_class_name.inspect}!"
+        end
+
+        klass = Scarpe::Webview.const_get(scarpe_class_name.split("::")[-1])
+        if klass.nil?
+          raise Scarpe::MissingClassError, "Couldn't find corresponding Scarpe Webview class for #{scarpe_class_name.inspect}!"
+        end
+
+        klass
+      end
+    end
+
+    # The Shoes ID corresponding to the Shoes drawable for this Webview drawable
+    attr_reader :shoes_linkable_id
+
+    # The Webview::Drawable parent of this drawable
+    attr_reader :parent
+
+    # An array of Webview::Drawable children (possibly empty) of this drawable
+    attr_reader :children
+
+    # Set instance variables for the Shoes styles of this drawable. Bind Shoes
+    # events for changes of parent drawable and changes of property values.
+    def initialize(properties)
+      log_init("Webview::Drawable")
+
+      @shoes_style_names = properties.keys.map(&:to_s) - ["shoes_linkable_id"]
+
+      # Call method, which looks up the parent
+      @shoes_linkable_id = properties["shoes_linkable_id"] || properties[:shoes_linkable_id]
+      unless @shoes_linkable_id
+        raise Scarpe::MissingAttributeError, "Could not find property shoes_linkable_id in #{properties.inspect}!"
+      end
+
+      # Set the Shoes styles as instance variables
+      properties.each do |k, v|
+        next if k == "shoes_linkable_id"
+
+        instance_variable_set("@" + k.to_s, v)
+      end
+
+      # Must call this before bind
+      super(linkable_id: @shoes_linkable_id)
+
+      bind_shoes_event(event_name: "parent", target: shoes_linkable_id) do |new_parent_id|
+        display_parent = DisplayService.instance.query_display_drawable_for(new_parent_id)
+        if @parent != display_parent
+          set_parent(display_parent)
+        end
+      end
+
+      # When Shoes drawables change properties, we get a change notification here
+      bind_shoes_event(event_name: "prop_change", target: shoes_linkable_id) do |prop_changes|
+        prop_changes.each do |k, v|
+          instance_variable_set("@" + k, v)
+        end
+        properties_changed(prop_changes)
+      end
+
+      bind_shoes_event(event_name: "destroy", target: shoes_linkable_id) do
+        destroy_self
+      end
+    end
+
+    def shoes_styles
+      p = {}
+      @shoes_style_names.each do |prop_name|
+        p[prop_name] = instance_variable_get("@#{prop_name}")
+      end
+      p
+    end
+
+    # Properties_changed will be called automatically when properties change.
+    # The drawable should delete any changes from the Hash that it knows how
+    # to incrementally handle, and pass the rest to super. If any changes
+    # go entirely un-handled, a full redraw will be scheduled.
+    # This exists to be overridden by children watching for changes.
+    #
+    # @param changes [Hash] a Hash of new values for properties that have changed
+    def properties_changed(changes)
+      # If a drawable does something really nonstandard with its html_id or element, it will
+      # need to override to prevent this from happening. That's easy enough, though.
+      if changes.key?("hidden")
+        hidden = changes.delete("hidden")
+        if hidden
+          html_element.set_style("display", "none")
+        else
+          new_style = style # Get current display CSS property, which may vary by subclass
+          disp = new_style[:display]
+          html_element.set_style("display", disp || "block")
+        end
+      end
+
+      needs_update! unless changes.empty?
+    end
+
+    # Give this drawable a new parent, including managing the appropriate child lists for parent drawables.
+    def set_parent(new_parent)
+      @parent&.remove_child(self)
+      new_parent&.add_child(self)
+      @parent = new_parent
+    end
+
+    # A shorter inspect text for prettier irb output
+    def inspect
+      "#<#{self.class}:#{self.object_id} @shoes_linkable_id=#{@shoes_linkable_id} @children=#{@children.inspect}>"
+    end
+
+    protected
+
+    # Do not call directly, use set_parent
+    def remove_child(child)
+      @children ||= []
+      unless @children.include?(child)
+        @log.error("remove_child: no such child(#{child.inspect}) for"\
+          " parent(#{parent.inspect})!")
+      end
+      @children.delete(child)
+    end
+
+    # Do not call directly, use set_parent
+    def add_child(child)
+      @children ||= []
+      @children << child
+
+      # If we add a child, we should redraw ourselves
+      needs_update!
+    end
+
+    # Convert an [r, g, b, a] array to an HTML hex color code
+    # Arrays support alpha. HTML hex does not. So premultiply.
+    def rgb_to_hex(color)
+      return color if color.nil?
+
+      r, g, b, a = *color
+      if r.is_a?(Float)
+        a ||= 1.0
+        r_float = r * a
+        g_float = g * a
+        b_float = b * a
+      else
+        a ||= 255
+        a_float = (a / 255.0)
+        r_float = (r.to_f / 255.0) * a_float
+        g_float = (g.to_f / 255.0) * a_float
+        b_float = (b.to_f / 255.0) * a_float
+      end
+
+      r_int = (r_float * 255.0).to_i.clamp(0, 255)
+      g_int = (g_float * 255.0).to_i.clamp(0, 255)
+      b_int = (b_float * 255.0).to_i.clamp(0, 255)
+
+      "#%0.2X%0.2X%0.2X" % [r_int, g_int, b_int]
+    end
+
+    # CSS styles
+    def style
+      styles = {}
+      if @hidden
+        styles[:display] = "none"
+      end
+      styles
+    end
+
+    public
+
+    # This gets an accessor for just this element's HTML ID.
+    # It is normally called by the drawable itself to do its DOM management.
+    # Drawables are required to use their html_id for their outermost element,
+    # to make sure that remove(), hidden() etc. affect every part of the drawable.
+    #
+    # @return [Scarpe::WebWrangler::ElementWrangler] a DOM object manager
+    def html_element
+      @elt_wrangler ||= Scarpe::Webview::WebWrangler::ElementWrangler.new(html_id)
+    end
+
+    # Return a promise that guarantees all currently-requested changes have completed
+    #
+    # @return [Scarpe::Promise] a promise that will be fulfilled when all pending changes have finished
+    def promise_update
+      # Doesn't matter what ElementWrangler we use -- they all return an update promise
+      # that includes all pending updates, no matter who they're for.
+      html_element.promise_update
+    end
+
+    # Get the object's HTML ID
+    #
+    # @return [String] the HTML ID
+    def html_id
+      @linkable_id.to_s
+    end
+
+    # to_html is intended to get the HTML DOM rendering of this object and its children.
+    # Calling it should be side-effect-free and NOT update the webview.
+    #
+    # @return [String] the rendered HTML
+    def to_html
+      @children ||= []
+      child_markup = @children.map(&:to_html).join
+      element { child_markup }
+    end
+
+    # This binds a Scarpe JS callback, handled via a single dispatch point in the app
+    #
+    # @param event [String] the Scarpe drawable event name
+    # @yield the block to call when the event occurs
+    def bind(event, &block)
+      raise(Scarpe::MissingAttributeError, "Drawable has no linkable_id! #{inspect}") unless linkable_id
+
+      DisplayService.instance.app.bind("#{linkable_id}-#{event}", &block)
+    end
+
+    # Removes the element from both the Ruby Drawable tree and the HTML DOM.
+    # Unsubscribe from all Shoes events.
+    # Return a promise for when that HTML change will be visible.
+    #
+    # @return [Scarpe::Promise] a promise that is fulfilled when the HTML change is complete
+    def destroy_self
+      @parent&.remove_child(self)
+      unsub_all_shoes_events
+      html_element.remove
+    end
+
+    # Request a full redraw of the entire window, including the entire tree of
+    # drawables and the outer "empty page" frame.
+    #
+    # @return [void]
+    def full_window_redraw!
+      DisplayService.instance.app.request_redraw!
+    end
+
+    # Request a full redraw of this drawable, including all its children.
+    # Can be overridden in drawable subclasses if needed. An override would normally
+    # only be needed if re-rendering the element with the given html_id
+    # wasn't enough (and then remove would also need to be overridden.)
+    #
+    # This occurs by default if a property is changed and the drawable
+    # doesn't remove its change in property_changed.
+    #
+    # @return [void]
+    def needs_update!
+      html_element.outer_html = to_html
+    end
+
+    # Generate JS code to trigger a specific event name on this drawable with the supplies arguments.
+    #
+    # @param handler_function_name [String] the event name - @see #bind
+    # @param args [Array] additional arguments that will be passed to the event in the generated JS
+    # @return [String] the generated JS code
+    def handler_js_code(handler_function_name, *args)
+      raise(Scarpe::MissingAttributeError, "Drawable has no linkable_id! #{inspect}") unless linkable_id
+
+      js_args = ["'#{linkable_id}-#{handler_function_name}'", *args].join(", ")
+      "scarpeHandler(#{js_args})"
+    end
+  end
+end

data/lib/scarpe/wv/edit_box.rb

@@ -1,13 +1,13 @@
 # frozen_string_literal: true
 
-class Scarpe
-  class WebviewEditBox < Scarpe::WebviewWidget
+module Scarpe::Webview
+  class EditBox < Drawable
     attr_reader :text, :height, :width
 
     def initialize(properties)
       super
 
-      # The JS handler sends a "change" event, which we forward to the Shoes widget tree
+      # The JS handler sends a "change" event, which we forward to the Shoes drawable tree
       bind("change") do |new_text|
         send_self_event(new_text, event_name: "change")
       end
@@ -23,22 +23,7 @@ class Scarpe
     end
 
     def element
-      oninput = handler_js_code("change", "this.value")
-
-      HTML.render do |h|
-        h.textarea(id: html_id, oninput: oninput, style: style) { text }
-      end
-    end
-
-    private
-
-    def style
-      styles = {}
-
-      styles[:height] = Dimensions.length(height)
-      styles[:width] = Dimensions.length(width)
-
-      styles.compact
+      render("edit_box")
     end
   end
 end

data/lib/scarpe/wv/edit_line.rb

@@ -1,13 +1,13 @@
 # frozen_string_literal: true
 
-class Scarpe
-  class WebviewEditLine < WebviewWidget
+module Scarpe::Webview
+  class EditLine < Drawable
     attr_reader :text, :width
 
     def initialize(properties)
       super
 
-      # The JS handler sends a "change" event, which we forward to the Shoes widget tree
+      # The JS handler sends a "change" event, which we forward to the Shoes drawable tree
       bind("change") do |new_text|
         send_self_event(new_text, event_name: "change")
       end
@@ -23,21 +23,7 @@ class Scarpe
     end
 
     def element
-      oninput = handler_js_code("change", "this.value")
-
-      HTML.render do |h|
-        h.input(id: html_id, oninput: oninput, value: @text, style: style)
-      end
-    end
-
-    private
-
-    def style
-      styles = {}
-
-      styles[:width] = Dimensions.length(@width) if @width
-
-      styles
+      render("edit_line")
     end
   end
 end

data/lib/scarpe/wv/flow.rb

@@ -1,32 +1,6 @@
 # frozen_string_literal: true
 
-class Scarpe
-  class WebviewFlow < Scarpe::WebviewWidget
-    include Scarpe::WebviewBackground
-    include Scarpe::WebviewBorder
-
-    def initialize(properties)
-      super
-    end
-
-    def element(&block)
-      HTML.render do |h|
-        h.div(id: html_id, style:, &block)
-      end
-    end
-
-    private
-
-    def style
-      styles = super
-
-      styles[:display] = "flex"
-      styles["flex-direction"] = "row"
-      styles["flex-wrap"] = "wrap"
-      styles[:width] = Dimensions.length(@width) if @width
-      styles[:height] = Dimensions.length(@height) if @height
-
-      styles
-    end
+module Scarpe::Webview
+  class Flow < Slot
   end
 end

data/lib/scarpe/wv/image.rb

@@ -1,36 +1,21 @@
 # frozen_string_literal: true
 
-class Scarpe
-  class WebviewImage < WebviewWidget
+require "scarpe/components/base64"
+
+module Scarpe::Webview
+  class Image < Drawable
+    include Scarpe::Components::Base64
+
     def initialize(properties)
       super
-    end
 
-    def element
-      if @click
-        HTML.render do |h|
-          h.a(id: html_id, href: @click) { h.img(id: html_id, src: @url, style:) }
-        end
-      else
-        HTML.render do |h|
-          h.img(id: html_id, src: @url, style:)
-        end
+      unless valid_url?(@url)
+        @url = "data:image/png;base64,#{encode_file_to_base64(@url)}"
       end
     end
 
-    private
-
-    def style
-      styles = {}
-
-      styles[:width] = Dimensions.length(@width) if @width
-      styles[:height] = Dimensions.length(@height) if @height
-
-      styles[:top] = Dimensions.length(@top) if @top
-      styles[:left] = Dimensions.length(@left) if @left
-      styles[:position] = "absolute" if @top || @left
-
-      styles
+    def element
+      render("image")
     end
   end
 end

data/lib/scarpe/wv/line.rb

@@ -1,38 +1,13 @@
 # frozen_string_literal: true
 
-require_relative "shape_helper"
-class Scarpe
-  class WebviewLine < Scarpe::WebviewWidget
-    include ShapeHelper
-
+module Scarpe::Webview
+  class Line < Drawable
     def initialize(properties)
       super(properties)
     end
 
     def element
-      HTML.render do |h|
-        h.div(id: html_id, style: style) do
-          h.svg(width: @x2, height: @y2) do
-            h.line(x1: @left, y1: @top, x2: @x2, y2: @y2, style: line_style)
-          end
-        end
-      end
-    end
-
-    private
-
-    def style
-      {
-        left: "#{@left}px",
-        top: "#{@top}px",
-      }
-    end
-
-    def line_style
-      {
-        stroke: " #{@color}",
-        "stroke-width": "4",
-      }
+      render("line")
     end
   end
 end

data/lib/scarpe/wv/link.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
-class Scarpe
-  class WebviewLink < WebviewWidget
+module Scarpe::Webview
+  class Link < TextDrawable
     def initialize(properties)
       super
 
@@ -11,19 +11,7 @@ class Scarpe
     end
 
     def element
-      HTML.render do |h|
-        h.a(**attributes) do
-          @text
-        end
-      end
-    end
-
-    def attributes
-      {
-        id: html_id,
-        href: @click,
-        onclick: (handler_js_code("click") if @has_block),
-      }.compact
+      render "link"
     end
   end
 end

data/lib/scarpe/wv/list_box.rb

@@ -1,20 +1,19 @@
 # frozen_string_literal: true
 
-class Scarpe
-  class WebviewListBox < Scarpe::WebviewWidget
-    attr_reader :selected_item, :items, :height, :width
+module Scarpe::Webview
+  class ListBox < Drawable
+    attr_reader :items, :height, :width, :chosen
 
     def initialize(properties)
-      super(properties)
+      super
 
-      # The JS handler sends a "change" event, which we forward to the Shoes widget tree
       bind("change") do |new_item|
         send_self_event(new_item, event_name: "change")
       end
     end
 
     def properties_changed(changes)
-      selected = changes.delete("selected_item")
+      selected = changes.delete("chosen")
       if selected
         html_element.value = selected
       end
@@ -22,29 +21,7 @@ class Scarpe
     end
 
     def element
-      onchange = handler_js_code("change", "this.options[this.selectedIndex].value")
-
-      select_attrs = { id: html_id, onchange: onchange, style: style }
-      option_attrs = { value: nil, selected: false }
-
-      HTML.render do |h|
-        h.select(**select_attrs) do
-          items.each do |item|
-            h.option(**option_attrs, value: item, selected: (item == selected_item)) { item }
-          end
-        end
-      end
-    end
-
-    private
-
-    def style
-      styles = {}
-
-      styles[:height] = Dimensions.length(height) if height
-      styles[:width] = Dimensions.length(width) if width
-
-      styles.compact
+      render("list_box")
     end
   end
 end

data/lib/scarpe/wv/para.rb

@@ -1,7 +1,12 @@
 # frozen_string_literal: true
 
-class Scarpe
-  class WebviewPara < WebviewWidget
+module Scarpe::Webview
+  class Para < Drawable
+    # Currently this is duplicated in Calzini. How to refactor?
+    # Similarly, we make some assumptions about when size is a symbol
+    # versus string that may not survive JSON deserialization.
+    # Do we want to hardcode these sizes in Lacci and have it always
+    # pass numbers?
     SIZES = {
       inscription: 10,
       ins: 10,
@@ -14,10 +19,6 @@ class Scarpe
     }.freeze
     private_constant :SIZES
 
-    def initialize(properties)
-      super
-    end
-
     def properties_changed(changes)
       items = changes.delete("text_items")
       if items
@@ -40,17 +41,17 @@ class Scarpe
         if item.is_a?(String)
           item
         else
-          WebviewDisplayService.instance.query_display_widget_for(item)
+          Scarpe::Webview::DisplayService.instance.query_display_drawable_for(item)
         end
       end
     end
 
     def element(&block)
-      HTML.render do |h|
-        h.p(**options, &block)
-      end
+      render("para", &block)
     end
 
+    # Because para's to_html takes a block, and it needs to convert IDs into display
+    # drawables, it needs to also override to_html
     def to_html
       @children ||= []
 
@@ -68,23 +69,5 @@ class Scarpe
         end
       end.join
     end
-
-    def options
-      @html_attributes.merge(id: html_id, style: style)
-    end
-
-    def style
-      {
-        "color" => rgb_to_hex(@stroke),
-        "font-size" => font_size,
-        "font-family" => @font,
-      }.compact
-    end
-
-    def font_size
-      font_size = @size.is_a?(Symbol) ? SIZES[@size] : @size
-
-      Dimensions.length(font_size)
-    end
   end
 end

data/lib/scarpe/wv/progress.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Scarpe::Webview
+  class Progress < Drawable
+    def initialize(properties)
+      super
+    end
+
+    # For now do *not* catch properties_changed and do a small update.
+    # Tiranti updates some additional fields (e.g. aria-valuenow) that
+    # Calzini does not. We'll want Calzini and Tiranti to handle the
+    # updates more for themselves. See issue #419 for updates on how
+    # we'll handle this. But for right now we re-render the whole
+    # drawable every time we change the progress fraction.
+    def element
+      render("progress")
+    end
+  end
+end

data/lib/scarpe/wv/radio.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Scarpe::Webview
+  class Radio < Drawable
+    # TODO: is this needed?
+    attr_reader :text
+
+    def initialize(properties)
+      super
+
+      bind("click") do
+        send_self_event(event_name: "click", target: shoes_linkable_id)
+      end
+    end
+
+    def properties_changed(changes)
+      items = changes.delete("checked")
+      html_element.toggle_input_button(items)
+
+      super
+    end
+
+    def element
+      props = shoes_styles
+
+      # If a group isn't set, default to the linkable ID of the parent slot
+      unless @group
+        props["group"] = @parent ? @parent.shoes_linkable_id : "no_group"
+      end
+      render("radio", props)
+    end
+  end
+end