Convert background as style to background as drawable

Author: sapienfrom2000s

examples/stack/background.rb

@@ -1,10 +1,10 @@
 Shoes.app do
   stack width: 0.33 do
-    background "purple"
+    background "purple", :curve => 15
     button "a button"
   end
-  stack width: 0.33 do
-    background "red".."green"
+  stack width: 0.33, :height => 20 do
+    background "red".."green", :curve => 20, :margin => 20
     para "Red to green gradient"
   end
   stack width: 0.33 do

lacci/lib/shoes/background.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
-class Shoes
-  module Background
-    def self.included(includer)
-      includer.shoes_style(:background_color)
-    end
+# class Shoes
+#   module Background
+#     def self.included(includer)
+#       includer.shoes_style(:background_color)
+#     end
 
-    # NOTE: this needs to be passed through in order for the styling to work
-    def background(color, options = {})
-      self.background_color = color
-    end
-  end
-end
+#     # NOTE: this needs to be passed through in order for the styling to work
+#     def background(color, options = {})
+#       self.background_color = color
+#     end
+#   end
+# end

lacci/lib/shoes/drawables.rb

@@ -30,3 +30,4 @@
 require "shoes/drawables/video"
 require "shoes/drawables/progress"
 require "shoes/drawables/border"
+require "shoes/drawables/background"

lacci/lib/shoes/drawables/background.rb

@@ -0,0 +1,24 @@
+# class_template.erb
+# frozen_string_literal: true
+
+class Shoes
+  class Background < Shoes::Drawable
+
+    shoes_styles :fill
+
+    shoes_style(:curve) { |val| convert_to_integer(val, "curve") }
+
+    Shoes::Drawable.drawable_default_styles[Shoes::Border][:curve] = 0
+
+    init_args :fill
+    opt_init_args :curve
+    def initialize(*args, **kwargs)
+      
+      super
+      @draw_context = Shoes::App.instance.current_draw_context
+
+      create_display_drawable
+    end
+
+  end
+end

lacci/lib/shoes/drawables/flow.rb

@@ -2,8 +2,6 @@
 
 class Shoes
   class Flow < Shoes::Slot
-    include Shoes::Background
-
     Shoes::Drawable.drawable_default_styles[Shoes::Flow][:width] = "100%"
 
     shoes_events

lacci/lib/shoes/drawables/stack.rb

@@ -2,8 +2,6 @@
 
 class Shoes
   class Stack < Shoes::Slot
-    include Shoes::Background
-
     shoes_styles :scroll
 
     shoes_events # No Stack-specific events

lacci/lib/shoes/drawables/widget.rb

@@ -36,8 +36,6 @@
 # widget propertly, sets the linkable_id, etc.
 
 class Shoes::Widget < Shoes::Slot
-  include Shoes::Background
-
   shoes_events
 
   def self.inherited(subclass)

lib/scarpe/wv.rb

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

lib/scarpe/wv/background.rb

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

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

@@ -0,0 +1,58 @@
+module Scarpe::Components::Calzini
+    def background_element(props)
+      HTML.render do |h|
+        h.div(id: html_id, style: background_style(props))
+      end
+    end
+  
+    private
+  
+    def background_style(props)
+      styles = { 
+        height: :inherit,
+        width: :inherit,
+        position: :absolute,
+        top: 0,
+        left: 0,
+        'z-index': -99,
+        'box-sizing': 'border-box',
+      }
+
+      styles = drawable_style(props).merge(styles)
+
+      bc = props["fill"]
+      return styles unless bc
+
+      variable_styles = case bc
+      when Array
+        {
+          background: "rgba(#{bc.join(", ")})",
+          'border-color': "rgba(#{bc.join(", ")})",
+          'border-width': '1px',
+          'border-radius': "#{props['curve']}px",
+        }
+      when Range
+        {
+          background: "linear-gradient(45deg, #{bc.first}, #{bc.last})",
+          'border-color': "linear-gradient(45deg, #{bc.first}, #{bc.last})",
+          'border-width': '1px',
+          'border-radius': "#{props['curve']}px",
+        }
+      when ->(value) { File.exist?(value) }
+        {
+          background: "url(data:image/png;base64,#{encode_file_to_base64(bc)})"
+        }
+      else
+        {
+          background: bc,
+          'border-color': bc,
+          'border-width': '1px',
+          'border-radius': "#{props['curve']}px",
+        }
+      end
+
+      # binding.irb
+
+      styles.merge(variable_styles)
+    end
+  end