Background as drawable

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.rb

@@ -110,7 +110,7 @@ def dimensions_length(value)
   end
 
   def drawable_style(props)
-    styles = {}
+    styles = { :isolation => "isolate" }
     if props["hidden"]
       styles[:display] = "none"
     end

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

@@ -0,0 +1,57 @@
+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,
+        '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

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

@@ -33,7 +33,6 @@ def documentroot_element(props, &block)
 
   def slot_style(props)
     styles = drawable_style(props)
-    styles = background_style(props, styles)
     styles = border_style(props, styles)
 
     styles[:width] = dimensions_length(props["width"]) if props["width"]
@@ -88,22 +87,4 @@ def border_style(props, styles)
       "border-radius": "#{opts["curve"] || 0}px",
     ).merge(border_style_hash)
   end
-
-  def background_style(props, styles)
-    bc = props["background_color"]
-    return styles unless bc
-
-    color = case bc
-    when Array
-      "rgba(#{bc.join(", ")})"
-    when Range
-      "linear-gradient(45deg, #{bc.first}, #{bc.last})"
-    when ->(value) { File.exist?(value) }
-      "url(data:image/png;base64,#{encode_file_to_base64(bc)})"
-    else
-      bc
-    end
-
-    styles.merge(background: color)
-  end
 end

test/wv/html_fixtures/Edit_box_Styles.html

@@ -1,8 +1,8 @@
-<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 id="2" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;isolation:isolate;width:100%;height:100%">
   <div style="height:100%;width:100%;position:relative">
-    <p id="3" style="font-size:30px">Anything:</p>
-    <textarea id="4" oninput="scarpeHandler('4-change', this.value)" onmouseover="scarpeHandler('4-hover')" style="width:100%;font:italic normal bold 25px 'Times New Roman',serif;" title="This is a tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</textarea>
-    <p id="5" style="font-size:20px">141 characters</p>
+    <p id="3" style="isolation:isolate;font-size:30px">Anything:</p>
+    <textarea id="4" oninput="scarpeHandler('4-change', this.value)" onmouseover="scarpeHandler('4-hover')" style="isolation:isolate;width:100%;font:italic normal bold 25px 'Times New Roman',serif;" title="This is a tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</textarea>
+    <p id="5" style="isolation:isolate;font-size:20px">141 characters</p>
     <div id="root-fonts"></div>
     <div id="root-alerts"> </div>
   </div>

test/wv/html_fixtures/Kerning.html

@@ -1,7 +1,7 @@
-<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 id="2" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;isolation:isolate;width:100%;height:100%">
   <div style="height:100%;width:100%;position:relative">
-    <p id="3" style="font-size:18px;letter-spacing:10px">This text have kerning applied to it</p>
-    <p id="4" style="font-size:18px">This is normal text for reference</p>
+    <p id="3" style="isolation:isolate;font-size:18px;letter-spacing:10px">This text have kerning applied to it</p>
+    <p id="4" style="isolation:isolate;font-size:18px">This is normal text for reference</p>
     <div id="root-fonts"></div>
     <div id="root-alerts"> </div>
   </div>

test/wv/html_fixtures/animate.html

@@ -1,13 +1,13 @@
-<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 id="2" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;isolation:isolate;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">
+    <div id="3" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;isolation:isolate">
       <div style="height:100%;width:100%;position:relative">
-        <p id="4" style="font-size:12px">10 fps</p>
-        <p id="5" style="font-size:12px">-</p>
-        <p id="7" style="font-size:12px">20 fps</p>
-        <p id="8" style="font-size:12px">-</p>
-        <p id="10" style="font-size:12px">3spf</p>
-        <p id="11" style="font-size:12px">-</p>
+        <p id="4" style="isolation:isolate;font-size:12px">10 fps</p>
+        <p id="5" style="isolation:isolate;font-size:12px">-</p>
+        <p id="7" style="isolation:isolate;font-size:12px">20 fps</p>
+        <p id="8" style="isolation:isolate;font-size:12px">-</p>
+        <p id="10" style="isolation:isolate;font-size:12px">3spf</p>
+        <p id="11" style="isolation:isolate;font-size:12px">-</p>
       </div>
     </div>
     <div id="root-fonts"></div>

test/wv/html_fixtures/arrow.html

@@ -1,9 +1,9 @@
-<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 id="2" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;isolation:isolate;width:100%;height:100%">
   <div style="height:100%;width:100%;position:relative">
-    <div id="3" style="position:absolute;top:100px;left:100px;width:30px"><svg><defs><marker id="head" viewBox="0 0 70 70" markerWidth="7" markerHeight="7" refX="5" refY="5" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="black" /></marker></defs><line x2="100" y2="100" x1="130" y1="100" fill="black" stroke="black" stroke-width="7" marker-end="url(#head)" transform="rotate(, 115, 100)"></line></svg></div>
-    <div id="4" style="position:absolute;top:120px;left:150px;width:40px"><svg><defs><marker id="head" viewBox="0 0 70 70" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="black" /></marker></defs><line x2="150" y2="120" x1="190" y1="120" fill="black" stroke="black" stroke-width="10" marker-end="url(#head)" transform="rotate(, 170, 120)"></line></svg></div>
-    <div id="5" style="position:absolute;top:60px;left:30px;width:40px"><svg><defs><marker id="head" viewBox="0 0 70 70" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="black" /></marker></defs><line x2="30" y2="60" x1="70" y1="60" fill="black" stroke="black" stroke-width="10" marker-end="url(#head)" transform="rotate(, 50, 60)"></line></svg></div>
-    <div id="6" style="position:absolute;top:80px;left:50px;width:40px"><svg><defs><marker id="head" viewBox="0 0 70 70" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="black" /></marker></defs><line x2="50" y2="80" x1="90" y1="80" fill="black" stroke="black" stroke-width="10" marker-end="url(#head)" transform="rotate(, 70, 80)"></line></svg></div>
+    <div id="3" style="isolation:isolate;position:absolute;top:100px;left:100px;width:30px"><svg><defs><marker id="head" viewBox="0 0 70 70" markerWidth="7" markerHeight="7" refX="5" refY="5" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="black" /></marker></defs><line x2="100" y2="100" x1="130" y1="100" fill="black" stroke="black" stroke-width="7" marker-end="url(#head)" transform="rotate(, 115, 100)"></line></svg></div>
+    <div id="4" style="isolation:isolate;position:absolute;top:120px;left:150px;width:40px"><svg><defs><marker id="head" viewBox="0 0 70 70" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="black" /></marker></defs><line x2="150" y2="120" x1="190" y1="120" fill="black" stroke="black" stroke-width="10" marker-end="url(#head)" transform="rotate(, 170, 120)"></line></svg></div>
+    <div id="5" style="isolation:isolate;position:absolute;top:60px;left:30px;width:40px"><svg><defs><marker id="head" viewBox="0 0 70 70" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="black" /></marker></defs><line x2="30" y2="60" x1="70" y1="60" fill="black" stroke="black" stroke-width="10" marker-end="url(#head)" transform="rotate(, 50, 60)"></line></svg></div>
+    <div id="6" style="isolation:isolate;position:absolute;top:80px;left:50px;width:40px"><svg><defs><marker id="head" viewBox="0 0 70 70" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="black" /></marker></defs><line x2="50" y2="80" x1="90" y1="80" fill="black" stroke="black" stroke-width="10" marker-end="url(#head)" transform="rotate(, 70, 80)"></line></svg></div>
     <div id="root-fonts"></div>
     <div id="root-alerts"> </div>
   </div>

test/wv/html_fixtures/background_with_image.html

@@ -1,15 +1,20 @@
-<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 id="2" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;isolation:isolate;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">
+    <div id="3" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;isolation:isolate;width:100px;height:100px">
       <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 id="4" style="isolation:isolate;height:inherit;width:inherit;position:absolute;top:0;left:0;box-sizing:border-box;background:docs/static/avatar.png;border-color:docs/static/avatar.png;border-width:1px;border-radius:px"></div>
+        <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(0, 0, 255, 255)"></div>
       </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, 0, 0, 255)">
-      <div style="height:100%;width:100%;position:relative"></div>
+    <div id="6" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;isolation:isolate;width:100px;height:100px">
+      <div style="height:100%;width:100%;position:relative">
+        <div id="7" style="isolation:isolate;height:inherit;width:inherit;position:absolute;top:0;left:0;box-sizing:border-box;background:rgba(255, 0, 0, 255);border-color:rgba(255, 0, 0, 255);border-width:1px;border-radius:px"></div>
+      </div>
     </div>
-    <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 id="8" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;isolation:isolate;width:100px;height:100px">
+      <div style="height:100%;width:100%;position:relative">
+        <div id="9" style="isolation:isolate;height:inherit;width:inherit;position:absolute;top:0;left:0;box-sizing:border-box;background:rgba(255,200,0,255);border-color:rgba(255,200,0,255);border-width:1px;border-radius:px"></div>
+      </div>
     </div>
     <div id="root-fonts"></div>
     <div id="root-alerts"> </div>

test/wv/html_fixtures/border.html

@@ -1,14 +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 id="2" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;isolation:isolate;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 id="3" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;isolation:isolate;height:50px">
       <div style="height:100%;width:100%;position:relative">
-        <p id="4" style="font-size:12px">Border is on top of text</p>
+        <p id="4" style="isolation:isolate;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 id="6" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;isolation:isolate">
       <div style="height:100%;width:100%;position:relative">
-        <p id="7" style="font-size:12px">This border is also on top of text</p>
+        <p id="7" style="isolation:isolate;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>

test/wv/html_fixtures/btn_tooltip.html

@@ -1,6 +1,6 @@
-<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"><button id="3" onclick="scarpeHandler('3-click')" onmouseover="scarpeHandler('3-hover')" title="i have no idea either">who am i?</button>
-    <p id="4" style="font-size:12px">i am a button</p>
+<div id="2" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;isolation:isolate;width:100%;height:100%">
+  <div style="height:100%;width:100%;position:relative"><button id="3" onclick="scarpeHandler('3-click')" onmouseover="scarpeHandler('3-hover')" style="isolation:isolate" title="i have no idea either">who am i?</button>
+    <p id="4" style="isolation:isolate;font-size:12px">i am a button</p>
     <div id="root-fonts"></div>
     <div id="root-alerts"> </div>
   </div>

test/wv/html_fixtures/button.html

@@ -1,6 +1,6 @@
-<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"><button id="3" onclick="scarpeHandler('3-click')" onmouseover="scarpeHandler('3-hover')">Push me</button>
-    <p id="4" style="font-size:12px">Nothing pushed so far</p>
+<div id="2" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;isolation:isolate;width:100%;height:100%">
+  <div style="height:100%;width:100%;position:relative"><button id="3" onclick="scarpeHandler('3-click')" onmouseover="scarpeHandler('3-hover')" style="isolation:isolate">Push me</button>
+    <p id="4" style="isolation:isolate;font-size:12px">Nothing pushed so far</p>
     <div id="root-fonts"></div>
     <div id="root-alerts"> </div>
   </div>