Add rect as an art widget

examples/rect.rb

@@ -0,0 +1,4 @@
+Shoes.app do
+  para "Behold, the mighty rectangle!"
+  rect 10, 10, 75, 50, 5
+end

lacci/lib/shoes/drawables.rb

@@ -12,6 +12,7 @@
 
 require "shoes/drawables/arc"
 require "shoes/drawables/line"
+require "shoes/drawables/rect"
 require "shoes/drawables/shape"
 require "shoes/drawables/star"
 

lacci/lib/shoes/drawables/rect.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shoes
+  class Rect < Shoes::Drawable
+    shoes_styles :left, :top, :width, :height, :draw_context, :curve
+
+    def initialize(*args)
+      @draw_context = Shoes::App.instance.current_draw_context
+
+      super
+      self.left, self.top, self.width, self.height, self.curve = args
+
+      create_display_drawable
+    end
+  end
+end

lib/scarpe/wv.rb

@@ -67,5 +67,6 @@ class Drawable < Shoes::Linkable
 require_relative "wv/text_drawable"
 require_relative "wv/link"
 require_relative "wv/line"
+require_relative "wv/rect"
 require_relative "wv/video"
 require_relative "wv/check"

lib/scarpe/wv/rect.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Scarpe::Webview
+  class Rect < Drawable
+    def initialize(properties)
+      super(properties)
+    end
+
+    def element(&block)
+      render("rect", &block)
+    end
+  end
+end

scarpe-components/lib/scarpe/components/calzini/art_widgets.rb

@@ -12,6 +12,25 @@ def arc_element(props, &block)
     end
   end
 
+  def rect_element(props)
+    HTML.render do |h|
+      h.div(id: html_id, style: drawable_style(props)) do
+        width = props["width"].to_i
+        height = props["height"].to_i
+        if props["curve"]
+          width += 2 * props["curve"].to_i
+          height += 2 * props["curve"].to_i
+        end
+        h.svg(width:, height:) do
+          attrs = { x: props["left"], y: props["top"], width: props["width"], height: props["height"], style: rect_svg_style(props) }
+          attrs[:rx] = props["curve"] if props["curve"]
+
+          h.rect(**attrs)
+        end
+      end
+    end
+  end
+
   def line_element(props)
     HTML.render do |h|
       h.div(id: html_id, style: line_div_style(props)) do
@@ -78,6 +97,13 @@ def line_svg_style(props)
     }.compact
   end
 
+  def rect_svg_style(props)
+    {
+      stroke: (props["draw_context"] || {})["stroke"],
+      #"stroke-width": "1",
+    }.compact
+  end
+
   def star_style(props)
     drawable_style(props).merge({
       width: dimensions_length(props["width"]),

scarpe-components/lib/scarpe/components/html.rb

@@ -2,7 +2,7 @@
 
 class Scarpe::Components::HTML
   CONTENT_TAGS = [:div, :p, :button, :ul, :li, :textarea, :a, :video, :strong, :style, :em, :code, :u, :line, :span, :svg].freeze
-  VOID_TAGS = [:input, :img, :polygon, :source, :link, :path].freeze
+  VOID_TAGS = [:input, :img, :polygon, :source, :link, :path, :rect].freeze
 
   TAGS = (CONTENT_TAGS + VOID_TAGS).freeze
 

scarpe-components/test/calzini/test_calzini_art_drawables.rb

@@ -56,6 +56,27 @@ def test_line_hidden
       @calzini.render("line", { "top" => "4", "left" => "7", "x1" => "20", "y1" => "17", "x2" => "100", "y2" => "104", "hidden" => true })
   end
 
+  def test_rect_default_stroke
+    assert_equal %{<div id="elt-1" style="display:none">} +
+      %{<svg width="147" height="91"><rect x=\"12\" y=\"9\" width=\"147\" height=\"91\" />} +
+      %{</svg></div>},
+      @calzini.render("rect", { "top" => "9", "left" => "12", "width" => "147", "height" => "91", "draw_context" => { }, "hidden" => true })
+  end
+
+  def test_rect_round_corners
+    assert_equal %{<div id="elt-1" style="display:none">} +
+      %{<svg width="177" height="121"><rect x=\"12\" y=\"9\" width=\"147\" height=\"91\" style="stroke:red" rx=\"15\" />} +
+      %{</svg></div>},
+      @calzini.render("rect", { "top" => "9", "left" => "12", "width" => "147", "height" => "91", "curve" =>"15", "draw_context" => { "stroke" => "red" }, "hidden" => true })
+  end
+
+  def test_rect_hidden
+    assert_equal %{<div id="elt-1" style="display:none">} +
+      %{<svg width="20" height="17"><rect x=\"7\" y=\"4\" width=\"20\" height=\"17\" />} +
+      %{</svg></div>},
+      @calzini.render("rect", { "top" => "4", "left" => "7", "width" => "20", "height" => "17", "hidden" => true })
+  end
+
   def test_star_simple
     start = %{<div id="elt-1"><svg width="2.0" height="2.0" style="fill:black"><polygon points="2.0,1.0,1.4}
     finish = %{" style="stroke:black;stroke-width:2" /></svg></div>}

test/test_drawables.rb

@@ -22,6 +22,7 @@ def test_hide_show
         @drawables << list_box(items: ['A', 'B'])
         @drawables << para("Hello")
         @drawables << radio("ooga")
+        @drawables << rect(0, 0, 50, 100, 5)
         @drawables << shape { line(0, 0, 10, 10) }
         @drawables << stack {}
         @drawables << star(230, 100, 6, 50, 25)