Add border as drawable (#548)

* Add border as drawable

* Add support for gradient and curve

* Regenerate html fixtures

examples/border.rb

@@ -0,0 +1,11 @@
+Shoes.app(width: 300, height: 50) do
+  stack height: 50 do
+    para "Border is on top of text"
+    border yellow, strokewidth: 4
+  end
+
+  stack do
+    para "This border is also on top of text"
+    border blue, strokewidth: 4
+  end
+end

lacci/lib/shoes.rb

@@ -37,7 +37,6 @@ class Shoes::Widget < Shoes::Slot; end
 require_relative "shoes/builtins"
 
 require_relative "shoes/background"
-require_relative "shoes/border"
 
 require_relative "shoes/drawable"
 require_relative "shoes/app"

lacci/lib/shoes/drawables.rb

@@ -29,3 +29,4 @@
 require "shoes/drawables/radio"
 require "shoes/drawables/video"
 require "shoes/drawables/progress"
+require "shoes/drawables/border"

lacci/lib/shoes/drawables/border.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+class Shoes
+  class Border < Shoes::Drawable
+    # Shoes style with verification or value mapping:
+    # shoes_style(:left) { |val| convert_to_integer(val, "left") }
+
+    shoes_styles :stroke, :strokewidth  # Write your shoes styles here
+
+    shoes_style(:strokewidth) { |val| convert_to_integer(val, "strokewidth") }
+    shoes_style(:curve) { |val| convert_to_integer(val, "curve") }
+
+    Shoes::Drawable.drawable_default_styles[Shoes::Border][:stroke] = :black
+    Shoes::Drawable.drawable_default_styles[Shoes::Border][:strokewidth] = 1
+    Shoes::Drawable.drawable_default_styles[Shoes::Border][:curve] = 0
+
+    opt_init_args :stroke, :strokewidth, :curve
+    def initialize(*args, **kwargs)
+      super
+      @draw_context = Shoes::App.instance.current_draw_context
+
+      create_display_drawable
+    end
+
+    private
+
+  end
+end

lacci/lib/shoes/drawables/flow.rb

@@ -3,7 +3,6 @@
 class Shoes
   class Flow < Shoes::Slot
     include Shoes::Background
-    include Shoes::Border
 
     Shoes::Drawable.drawable_default_styles[Shoes::Flow][:width] = "100%"
 

lacci/lib/shoes/drawables/stack.rb

@@ -3,7 +3,6 @@
 class Shoes
   class Stack < Shoes::Slot
     include Shoes::Background
-    include Shoes::Border
 
     shoes_styles :scroll
 

lacci/lib/shoes/drawables/widget.rb

@@ -37,7 +37,6 @@
 
 class Shoes::Widget < Shoes::Slot
   include Shoes::Background
-  include Shoes::Border
 
   shoes_events
 

lib/scarpe/wv.rb

@@ -105,3 +105,4 @@ class Scarpe::Webview::Drawable < Shoes::Linkable
 
 require_relative "wv/scarpe_extensions"
 require_relative "assets"
+require_relative "wv/border"

lib/scarpe/wv/border.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Scarpe::Webview
+  class Border < Drawable
+
+    def initialize(properties)
+      super(properties)
+    end
+
+    # If the drawable is intended to be overridable, add element and style to Calzini instead
+    def element
+      render('border')
+    end
+  end
+end

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

@@ -0,0 +1,38 @@
+module Scarpe::Components::Calzini
+  def border_element(props)
+    HTML.render do |h|
+      h.div(id: html_id, style: style(props))
+    end
+  end
+
+  private
+
+  def style(props)
+    styles = { 
+      height: :inherit,
+      width: :inherit,
+      position: :absolute, 
+      top: 0, 
+      left: 0,
+      'box-sizing': 'border-box'
+    }
+
+    bc = props["stroke"]
+
+    border_style_hash = case bc
+    when Range
+      { "border-image": "linear-gradient(45deg, #{bc.first}, #{bc.last})" }
+    when Array
+      { "border-color": "rgba(#{bc.join(", ")})" }
+    else
+      { "border-color": bc }
+    end
+    styles = styles.merge(
+      "border-style": "solid",
+      "border-width": "#{props["strokewidth"]}px",
+      "border-radius": "#{props["curve"]}px",
+    ).merge(border_style_hash)
+
+    styles.compact
+  end
+end

test/wv/html_fixtures/background_with_image.html

@@ -1,12 +1,14 @@
 <div id="2" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100%;height:100%">
   <div style="height:100%;width:100%;position:relative">
-    <div id="3" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100px;height:100px;background:docs/static/avatar.png;border-style:solid;border-width:4px;border-radius:0px;border-color:rgba(0, 0, 255, 255)">
-      <div style="height:100%;width:100%;position:relative"></div>
+    <div id="3" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100px;height:100px;background:docs/static/avatar.png">
+      <div style="height:100%;width:100%;position:relative">
+        <div id="4" style="height:inherit;width:inherit;position:absolute;top:0;left:0;box-sizing:border-box;border-style:solid;border-width:4px;border-radius:0px;border-color:rgba(0, 0, 255, 255)"></div>
+      </div>
     </div>
-    <div id="4" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100px;height:100px;background:rgba(255, 0, 0, 255)">
+    <div id="5" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100px;height:100px;background:rgba(255, 0, 0, 255)">
       <div style="height:100%;width:100%;position:relative"></div>
     </div>
-    <div id="5" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100px;height:100px;background:rgba(255,200,0,255)">
+    <div id="6" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100px;height:100px;background:rgba(255,200,0,255)">
       <div style="height:100%;width:100%;position:relative"></div>
     </div>
     <div id="root-fonts"></div>

test/wv/html_fixtures/border.html

@@ -0,0 +1,18 @@
+<div id="2" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100%;height:100%">
+  <div style="height:100%;width:100%;position:relative">
+    <div id="3" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;height:50px">
+      <div style="height:100%;width:100%;position:relative">
+        <p id="4" style="font-size:12px">Border is on top of text</p>
+        <div id="5" style="height:inherit;width:inherit;position:absolute;top:0;left:0;box-sizing:border-box;border-style:solid;border-width:4px;border-radius:0px;border-color:rgba(255, 255, 0, 255)"></div>
+      </div>
+    </div>
+    <div id="6" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start">
+      <div style="height:100%;width:100%;position:relative">
+        <p id="7" style="font-size:12px">This border is also on top of text</p>
+        <div id="8" style="height:inherit;width:inherit;position:absolute;top:0;left:0;box-sizing:border-box;border-style:solid;border-width:4px;border-radius:0px;border-color:rgba(0, 0, 255, 255)"></div>
+      </div>
+    </div>
+    <div id="root-fonts"></div>
+    <div id="root-alerts"> </div>
+  </div>
+</div>

test/wv/html_fixtures/simple_slides.html

@@ -1,11 +1,15 @@
 <div id="2" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100%;height:100%">
   <div style="height:100%;width:100%;position:relative">
-    <div id="3" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;border-style:solid;border-width:2px;border-radius:0px;border-color:rgba(0, 0, 0, 255)">
-      <div style="height:100%;width:100%;position:relative"></div>
+    <div id="3" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start">
+      <div style="height:100%;width:100%;position:relative">
+        <div id="4" style="height:inherit;width:inherit;position:absolute;top:0;left:0;box-sizing:border-box;border-style:solid;border-width:2px;border-radius:0px;border-color:rgba(0, 0, 0, 255)"></div>
+        <div id="5" style="height:inherit;width:inherit;position:absolute;top:0;left:0;box-sizing:border-box;border-style:solid;border-width:2px;border-radius:0px;border-color:rgba(0, 0, 0, 255)"></div>
+        <div id="6" style="height:inherit;width:inherit;position:absolute;top:0;left:0;box-sizing:border-box;border-style:solid;border-width:2px;border-radius:0px;border-color:rgba(0, 0, 0, 255)"></div>
+      </div>
     </div>
-    <button id="4" onclick="scarpeHandler('4-click')" onmouseover="scarpeHandler('4-hover')">Previous Slide</button><button id="5" onclick="scarpeHandler('5-click')" onmouseover="scarpeHandler('5-hover')">Next Slide</button>
-    <p id="7" style="margin-bottom:10px;font-size:12px"><strong class="id_6">Slide 1: Welcome to Shoes!</strong></p>
-    <p id="8" style="font-size:12px">Ah, yeah, Shoes!<br>
+    <button id="7" onclick="scarpeHandler('7-click')" onmouseover="scarpeHandler('7-hover')">Previous Slide</button><button id="8" onclick="scarpeHandler('8-click')" onmouseover="scarpeHandler('8-hover')">Next Slide</button>
+    <p id="10" style="margin-bottom:10px;font-size:12px"><strong class="id_9">Slide 1: Welcome to Shoes!</strong></p>
+    <p id="11" style="font-size:12px">Ah, yeah, Shoes!<br>
             Who said nobody knows Shoes? Well, let me introduce you to a feline expert in the art of Ruby Desktop GUI Libs.<br>
       <br>
             Meet Professor Whiskers the renowned programmer cat! Not only does he know Shoes, but he's also a master of all things Ruby and desktop GUI!<br>
@@ -16,7 +20,7 @@
       <br>
             Meow! join the discord server for more meows!<br>
       </p>
-    <img id="9" src="https://img.freepik.com/premium-photo/funny-smart-cat-professor-with-glasses-illustration-generative-ai_845977-709.jpg?w=700&h=300" />
+    <img id="12" src="https://img.freepik.com/premium-photo/funny-smart-cat-professor-with-glasses-illustration-generative-ai_845977-709.jpg?w=700&h=300" />
     <div id="root-fonts"></div>
     <div id="root-alerts"> </div>
   </div>