scarpe-wasm 0.1.0

data/lib/scarpe/wasm/image.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require "scarpe/base64"
+
+class Scarpe
+  class WASMImage < WASMWidget
+    include Base64
+    def initialize(properties)
+      super
+
+      @url = valid_url?(@url) ? @url : "data:image/png;base64,#{encode_file_to_base64(@url)}"
+    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
+      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
+    end
+  end
+end

data/lib/scarpe/wasm/line.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class Scarpe
+  class WASMLine < Scarpe::WASMWidget
+    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: @draw_context["stroke"],
+        "stroke-width": "4",
+      }
+    end
+  end
+end

data/lib/scarpe/wasm/link.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Scarpe
+  class WASMLink < WASMWidget
+    def initialize(properties)
+      super
+
+      bind("click") do
+        send_self_event(event_name: "click")
+      end
+    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
+    end
+  end
+end

data/lib/scarpe/wasm/list_box.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+class Scarpe
+  class WASMListBox < Scarpe::WASMWidget
+    attr_reader :selected_item, :items, :height, :width
+
+    def initialize(properties)
+      super(properties)
+
+      # 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")
+      if selected
+        html_element.value = selected
+      end
+      super
+    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
+    end
+  end
+end

data/lib/scarpe/wasm/para.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+class Scarpe
+  class WASMPara < WASMWidget
+    SIZES = {
+      inscription: 10,
+      ins: 10,
+      para: 12,
+      caption: 14,
+      tagline: 18,
+      subtitle: 26,
+      title: 34,
+      banner: 48,
+    }.freeze
+    private_constant :SIZES
+
+    def initialize(properties)
+      super
+    end
+
+    def properties_changed(changes)
+      items = changes.delete("text_items")
+      if items
+        html_element.inner_html = to_html
+        return
+      end
+
+      # Not deleting, so this will re-render
+      if changes["size"] && SIZES[@size.to_sym]
+        @size = @size.to_sym
+      end
+
+      super
+    end
+
+    def items_to_display_children(items)
+      return [] if items.nil?
+
+      items.map do |item|
+        if item.is_a?(String)
+          item
+        else
+          WASMDisplayService.instance.query_display_widget_for(item)
+        end
+      end
+    end
+
+    def element(&block)
+      HTML.render do |h|
+        h.p(**options, &block)
+      end
+    end
+
+    def to_html
+      @children ||= []
+
+      element { child_markup }
+    end
+
+    private
+
+    def child_markup
+      items_to_display_children(@text_items).map do |child|
+        if child.respond_to?(:to_html)
+          child.to_html
+        else
+          child.gsub("\n", "<br>")
+        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/wasm/radio.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+class Scarpe
+  class WASMRadio < Scarpe::WASMWidget
+    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
+      HTML.render do |h|
+        h.input(type: :radio, id: html_id, onclick: handler_js_code("click"), name: group_name, value: "hmm #{text}", checked: @checked)
+      end
+    end
+
+    private
+
+    def group_name
+      @group || @parent
+    end
+  end
+end

data/lib/scarpe/wasm/shape.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+class Scarpe
+  # Should inherit from Slot?
+  class WASMShape < Scarpe::WASMWidget
+    def initialize(properties)
+      super(properties)
+    end
+
+    def to_html
+      @children ||= []
+      child_markup = @children.map(&:to_html).join
+
+      color = @draw_context["fill"] || "black"
+      self_markup = HTML.render do |h|
+        h.div(id: html_id, style: style) do
+          h.svg(width: "400", height: "500") do
+            h.path(d: path_from_shape_commands, style: "fill:#{color};stroke-width:2;")
+          end
+        end
+      end
+
+      # Put child markup first for backward compatibility, but I'm pretty sure this is wrong.
+      child_markup + self_markup
+    end
+
+    def element(&block)
+      color = @draw_context["fill"] || "black"
+      HTML.render do |h|
+        h.div(id: html_id, style: style) do
+          h.svg(width: "400", height: "500") do
+            h.path(d: path_from_shape_commands, style: "fill:#{color};stroke-width:2;")
+          end
+          block.call(h) if block_given?
+        end
+      end
+    end
+
+    private
+
+    # We have a set of Shoes shape commands, but we need SVG objects like paths.
+    def path_from_shape_commands
+      current_path = ""
+
+      @shape_commands.each do |cmd, *args|
+        case cmd
+        when "move_to"
+          x, y = *args
+          current_path += "M #{x} #{y} "
+        when "line_to"
+          x, y = *args
+          current_path += "L #{x} #{y} "
+        else
+          raise "Unknown shape command! #{cmd.inspect}"
+        end
+      end
+
+      current_path
+    end
+
+    def style
+      {
+        width: "400",
+        height: "900",
+      }
+    end
+  end
+end

data/lib/scarpe/wasm/slot.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+class Scarpe
+  class WASMSlot < Scarpe::WASMWidget
+    include Scarpe::WASMBackground
+    include Scarpe::WASMBorder
+    include Scarpe::WASMSpacing
+
+    def initialize(properties)
+      @event_callbacks = {}
+
+      super
+    end
+
+    def element(&block)
+      HTML.render do |h|
+        h.div(attributes.merge(id: html_id, style: style), &block)
+      end
+    end
+
+    def set_event_callback(obj, event_name, js_code)
+      event_name = event_name.to_s
+      @event_callbacks[event_name] ||= {}
+      if @event_callbacks[event_name][obj]
+        raise "Can't have two callbacks on the same event, from the same object, on the same parent!"
+      end
+
+      @event_callbacks[event_name][obj] = js_code
+
+      update_dom_event(event_name)
+    end
+
+    def remove_event_callback(obj, event_name)
+      event_name = event_name.to_s
+      @event_callbacks[event_name] ||= {}
+      @event_callbacks[event_name].delete(obj)
+
+      update_dom_event(event_name)
+    end
+
+    def remove_event_callbacks(obj)
+      changed = []
+
+      @event_callbacks.each do |event_name, items|
+        changed << event_name if items.delete(obj)
+      end
+
+      changed.each { |event_name| update_dom_event(event_name) }
+    end
+
+    protected
+
+    def update_dom_event(event_name)
+      html_element.set_attribute(event_name, @event_callbacks[event_name].values.join(";"))
+    end
+
+    def attributes
+      attr = {}
+
+      @event_callbacks.each do |event_name, handlers|
+        attr[event_name] = handlers.values.join(";")
+      end
+
+      attr
+    end
+
+    def style
+      styles = super
+
+      styles["margin-top"] = @margin_top if @margin_top
+      styles["margin-bottom"] = @margin_bottom if @margin_bottom
+      styles["margin-left"] = @margin_left if @margin_left
+      styles["margin-right"] = @margin_right if @margin_right
+
+      styles[:width] = Dimensions.length(@width) if @width
+      styles[:height] = Dimensions.length(@height) if @height
+
+      styles
+    end
+  end
+end

data/lib/scarpe/wasm/spacing.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+class Scarpe
+  module WASMSpacing
+    SPACING_DIRECTIONS = [:left, :right, :top, :bottom]
+
+    def style
+      styles = defined?(super) ? super : {}
+
+      extract_spacing_styles_for(:margin, styles, @margin)
+      extract_spacing_styles_for(:padding, styles, @padding)
+
+      styles
+    end
+
+    def extract_spacing_styles_for(attribute, styles, values)
+      values ||= spacing_values_from_options(attribute)
+
+      case values
+      when Hash
+        values.each do |direction, value|
+          styles["#{attribute}-#{direction}"] = Dimensions.length(value)
+        end
+      when Array
+        SPACING_DIRECTIONS.zip(values).to_h.compact.each do |direction, value|
+          styles["#{attribute}-#{direction}"] = Dimensions.length(value)
+        end
+      else
+        styles[attribute] = Dimensions.length(values)
+      end
+
+      styles.compact!
+    end
+
+    def spacing_values_from_options(attribute)
+      SPACING_DIRECTIONS.map do |direction|
+        @options.delete("#{attribute}_#{direction}".to_sym)
+      end
+    end
+  end
+end

data/lib/scarpe/wasm/span.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+class Scarpe
+  class WASMSpan < Scarpe::WASMWidget
+    SIZES = {
+      inscription: 10,
+      ins: 10,
+      span: 12,
+      caption: 14,
+      tagline: 18,
+      subtitle: 26,
+      title: 34,
+      banner: 48,
+    }.freeze
+    private_constant :SIZES
+
+    def initialize(properties)
+      super
+    end
+
+    def properties_changed(changes)
+      text = changes.delete("text")
+      if text
+        html_element.inner_html = text
+        return
+      end
+
+      # Not deleting, so this will re-render
+      if changes["size"] && SIZES[@size.to_sym]
+        @size = @size.to_sym
+      end
+
+      super
+    end
+
+    def element(&block)
+      HTML.render do |h|
+        h.span(**options, &block)
+      end
+    end
+
+    def to_html
+      element { @text }
+    end
+
+    private
+
+    def options
+      @html_attributes.merge(id: html_id, style: style)
+    end
+
+    def style
+      {
+        "color" => @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/wasm/stack.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class Scarpe
+  class WASMStack < Scarpe::WASMSlot
+    def get_style
+      style
+    end
+
+    protected
+
+    def style
+      styles = super
+
+      styles[:display] = "flex"
+      styles["flex-direction"] = "column"
+      styles["align-content"] = "flex-start"
+      styles["justify-content"] = "flex-start"
+      styles["align-items"] = "flex-start"
+      styles["overflow"] = "auto" if @scroll
+
+      styles
+    end
+  end
+end

data/lib/scarpe/wasm/star.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+class Scarpe
+  class WASMStar < Scarpe::WASMWidget
+    def initialize(properties)
+      super(properties)
+    end
+
+    def element(&block)
+      fill = @draw_context["fill"]
+      stroke = @draw_context["stroke"]
+      fill = "black" if fill == ""
+      stroke = "black" if stroke == ""
+      HTML.render do |h|
+        h.div(id: html_id, style: style) do
+          h.svg(width: @outer, height: @outer, style: "fill:#{fill};") do
+            h.polygon(points: star_points, style: "stroke:#{stroke};stroke-width:2")
+          end
+          block.call(h) if block_given?
+        end
+      end
+    end
+
+    private
+
+    def style
+      {
+        width: Dimensions.length(@width),
+        height: Dimensions.length(@height),
+      }
+    end
+
+    def star_points
+      get_star_points.join(",")
+    end
+
+    def get_star_points
+      angle = 2 * Math::PI / @points
+      coordinates = []
+
+      @points.times do |i|
+        outer_angle = i * angle
+        inner_angle = outer_angle + angle / 2
+
+        coordinates.concat(get_coordinates(outer_angle, inner_angle))
+      end
+
+      coordinates
+    end
+
+    def get_coordinates(outer_angle, inner_angle)
+      outer_x = @outer / 2 + Math.cos(outer_angle) * @outer / 2
+      outer_y = @outer / 2 + Math.sin(outer_angle) * @outer / 2
+
+      inner_x = @outer / 2 + Math.cos(inner_angle) * @inner / 2
+      inner_y = @outer / 2 + Math.sin(inner_angle) * @inner / 2
+
+      [outer_x, outer_y, inner_x, inner_y]
+    end
+  end
+end

data/lib/scarpe/wasm/subscription_item.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+class Scarpe::WASMSubscriptionItem < Scarpe::WASMWidget
+  def initialize(properties)
+    super
+
+    bind(@shoes_api_name) do |*args|
+      send_self_event(*args, event_name: @shoes_api_name)
+    end
+  end
+
+  def element
+    ""
+  end
+
+  # This will get called once we know the parent, which is useful for events
+  # like hover, where our subscription is likely to depend on what our parent is.
+  def set_parent(new_parent)
+    super
+
+    case @shoes_api_name
+    when "motion"
+      # TODO: what do we do for whole-screen mousemove outside the window?
+      # Those should be set on body, which right now doesn't have a widget.
+      # TODO: figure out how to handle alt and meta keys - does Shoes3 recognise those?
+      new_parent.set_event_callback(
+        self,
+        "onmousemove",
+        handler_js_code(
+          @shoes_api_name,
+          "arguments[0].x",
+          "arguments[0].y",
+          "arguments[0].ctrlKey",
+          "arguments[0].shiftKey",
+        ),
+      )
+    when "hover"
+      new_parent.set_event_callback(self, "onmouseenter", handler_js_code(@shoes_api_name))
+    when "click"
+      new_parent.set_event_callback(self, "onclick", handler_js_code(@shoes_api_name, "arguments[0].button", "arguments[0].x", "arguments[0].y"))
+    else
+      raise "Unknown Shoes event API: #{@shoes_api_name}!"
+    end
+  end
+
+  def destroy_self
+    @parent.remove_event_callbacks(self)
+    super
+  end
+end

data/lib/scarpe/wasm/text_widget.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+class Scarpe
+  class WASMTextWidget < Scarpe::WASMWidget
+  end
+
+  class << self
+    def default_wasm_text_widget_with(element)
+      wasm_class_name = "WASM#{element.capitalize}"
+      wasm_widget_class = Class.new(Scarpe::WASMTextWidget) do
+        def initialize(properties)
+          class_name = self.class.name.split("::")[-1]
+          @html_tag = class_name.delete_prefix("WASM").downcase
+          super
+        end
+
+        def element
+          HTML.render do |h|
+            h.send(@html_tag) { @content.to_s }
+          end
+        end
+      end
+      Scarpe.const_set wasm_class_name, wasm_widget_class
+    end
+  end
+end
+
+Scarpe.default_wasm_text_widget_with(:code)
+Scarpe.default_wasm_text_widget_with(:em)
+Scarpe.default_wasm_text_widget_with(:strong)