scarpe-components 0.2.2 → 0.4.0

data/lib/scarpe/components/calzini/art_drawables.rb

@@ -0,0 +1,227 @@
+# frozen_string_literal: true
+
+module Scarpe::Components::Calzini
+  def arc_element(props, &block)
+    dc = props["draw_context"] || {}
+    rotate = dc["rotate"]
+    HTML.render do |h|
+      h.div(id: html_id, style: arc_style(props)) do
+        h.svg(width: props["width"], height: props["height"]) do
+          h.path(d: arc_path(props), transform: "rotate(#{rotate}, #{props["width"] / 2}, #{props["height"] / 2})")
+        end
+        block.call(h) if block_given?
+      end
+    end
+  end
+
+  def rect_element(props)
+    dc = props["draw_context"] || {}
+    rotate = dc["rotate"]
+    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, transform: "rotate(#{rotate} #{width / 2} #{height / 2})")
+        end
+      end
+    end
+  end
+
+  def line_element(props)
+    HTML.render do |h|
+      h.div(id: html_id, style: line_div_style(props)) do
+        h.svg(width: props["x2"], height: props["y2"]) do
+          h.line(x1: props["left"], y1: props["top"], x2: props["x2"], y2: props["y2"], style: line_svg_style(props))
+        end
+      end
+    end
+  end
+
+  def star_element(props, &block)
+    dc = props["draw_context"] || {}
+    fill = first_color_of(props["fill"], dc["fill"], "black")
+    stroke = first_color_of(props["stroke"], dc["stroke"], "black")
+    HTML.render do |h|
+      h.div(id: html_id, style: star_style(props)) do
+        h.svg(width: props["outer"], height: props["outer"], style: "fill:#{fill}") do
+          h.polygon(points: star_points(props), style: "stroke:#{stroke};stroke-width:2")
+        end
+        block.call(h) if block_given?
+      end
+    end
+  end
+
+  def oval_element(props, &block)
+    dc = props["draw_context"] || {}
+    fill = first_color_of(props["fill"], dc["fill"], "black")
+    stroke = first_color_of(props["stroke"], dc["stroke"], "black")
+    strokewidth = props["strokewidth"] || dc["strokewidth"] || "2"
+    radius = props["radius"]
+    width = radius * 2
+    height = props["height"] || radius * 2 # If there's a height, it's an oval, if not, circle
+    center = props["center"] || false
+    HTML.render do |h|
+      h.div(id: html_id, style: oval_style(props)) do
+        h.svg(width: width, height: height, style: "fill:#{fill};") do
+          h.ellipse(
+            cx: center ? radius : 0,
+            cy: center ? height / 2 : 0,
+            rx: width ? width / 2 : radius,
+            ry: height ? height / 2 : radius,
+            style: "stroke:#{stroke};stroke-width:#{strokewidth};",
+          )
+        end
+        block.call(h) if block_given?
+      end
+    end
+  end
+
+  private
+
+  def arc_style(props)
+    drawable_style(props).merge({
+      left: "#{props["left"]}px",
+      top: "#{props["top"]}px",
+      width: "#{props["width"]}px",
+      height: "#{props["height"]}px",
+    })
+  end
+
+  def arc_path(props)
+    center_x = props["width"] / 2
+    center_y = props["height"] / 2
+    radius_x = props["width"] / 2
+    radius_y = props["height"] / 2
+    start_angle_degrees = radians_to_degrees(props["angle1"]) % 360
+    end_angle_degrees = radians_to_degrees(props["angle2"]) % 360
+    large_arc_flag = (end_angle_degrees - start_angle_degrees) % 360 > 180 ? 1 : 0
+
+    "M#{center_x} #{center_y} L#{props["width"]} #{center_y} " \
+      "A#{radius_x} #{radius_y} 0 #{large_arc_flag} 0 " \
+      "#{center_x + radius_x * Math.cos(degrees_to_radians(end_angle_degrees))} " \
+      "#{center_y + radius_y * Math.sin(degrees_to_radians(end_angle_degrees))} Z"
+  end
+
+  def line_div_style(props)
+    drawable_style(props).merge({
+      left: "#{props["left"]}px",
+      top: "#{props["top"]}px",
+    })
+  end
+
+  def line_svg_style(props)
+    {
+
+      "stroke": first_color_of(props["stroke"], (props["draw_context"] || {})["stroke"], "black"),
+      "stroke-width": "4",
+    }.compact
+  end
+
+  def rect_svg_style(props)
+    {
+      stroke: first_color_of(props["stroke"], (props["draw_context"] || {})["stroke"]),
+      #"stroke-width": "1",
+      fill: first_color_of(props["fill"], (props["draw_context"] || {})["fill"]),
+    }.compact
+  end
+
+  def star_style(props)
+    drawable_style(props).merge({
+      width: dimensions_length(props["width"]),
+      height: dimensions_length(props["height"]),
+    }).compact
+  end
+
+  def oval_style(props)
+    drawable_style(props).merge({
+      width: dimensions_length(props["width"]),
+      height: dimensions_length(props["height"]),
+    })
+  end
+
+  def star_points(props)
+    angle = 2 * Math::PI / props["points"]
+    coordinates = []
+
+    props["points"].times do |i|
+      outer_angle = i * angle
+      inner_angle = outer_angle + angle / 2
+
+      coordinates.concat(star_get_coordinates(outer_angle, inner_angle, props))
+    end
+
+    coordinates.join(",")
+  end
+
+  def star_get_coordinates(outer_angle, inner_angle, props)
+    outer_x = props["outer"] / 2 + Math.cos(outer_angle) * props["outer"] / 2
+    outer_y = props["outer"] / 2 + Math.sin(outer_angle) * props["outer"] / 2
+
+    inner_x = props["outer"] / 2 + Math.cos(inner_angle) * props["inner"] / 2
+    inner_y = props["outer"] / 2 + Math.sin(inner_angle) * props["inner"] / 2
+
+    [outer_x, outer_y, inner_x, inner_y]
+  end
+
+  def arrow_element(props)
+    left = props["left"]
+    top = props["top"]
+    width = props["width"]
+    end_x = left + width
+    end_y = top
+    stroke_width = width / 2
+    dc = props["draw_context"] || {}
+    fill = first_color_of(props["fill"], dc["fill"], "black")
+    stroke = first_color_of(props["stroke"], dc["stroke"], "black")
+    rotate = dc["rotate"]
+
+    stroke_width = width / 4
+
+    HTML.render do |h|
+      h.div(id: html_id, style: arrow_div_style(props)) do
+        h.svg do
+          h.defs do
+            h.marker(
+              id: "head",
+              viewBox: "0 0 70 70",
+              markerWidth: stroke_width.to_s,
+              markerHeight: stroke_width.to_s,
+              refX: "5",
+              refY: "5",
+              orient: "auto-start-reverse",
+            ) do
+              h.path(d: "M 0 0 L 10 5 L 0 10 z", fill: fill)
+            end
+          end
+
+          h.line(
+            x2: left.to_s,
+            y2: top.to_s,
+            x1: end_x.to_s,
+            y1: end_y.to_s,
+            fill: fill,
+            stroke: stroke,
+            "stroke-width" => stroke_width.to_s,
+            "marker-end" => "url(#head)",
+            transform: "rotate(#{rotate}, #{left + width / 2}, #{top})",
+          )
+        end
+      end
+    end
+  end
+  def arrow_div_style(props)
+    drawable_style(props).merge({
+      position: "absolute",
+      left: "#{props["left"]}px",
+      top: "#{props["top"]}px",
+    })
+  end
+end

data/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

data/lib/scarpe/components/calzini/button.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Scarpe::Components::Calzini
+  def button_element(props)
+    HTML.render do |h|
+      button_props = {
+        id: html_id,
+        onclick: handler_js_code("click"),
+        onmouseover: handler_js_code("hover"),
+        style: button_style(props),
+        class: props["html_class"],
+        title: props["tooltip"],
+      }.compact
+      h.button(**button_props) do
+        props["text"]
+      end
+    end
+  end
+
+  private
+
+  def button_style(props)
+    styles = drawable_style(props)
+
+    styles[:"background-color"] = props["color"] if props["color"]
+    styles[:"padding-top"] = props["padding_top"] if props["padding_top"]
+    styles[:"padding-bottom"] = props["padding_bottom"] if props["padding_bottom"]
+    styles[:color] = props["text_color"] if props["text_color"]
+
+    styles[:"font-size"] = props["font_size"] if props["font_size"]
+    styles[:"font-size"] = dimensions_length(text_size(props["size"])) if props["size"]
+
+    styles[:"font-family"] = props["font"] if props["font"]
+
+    styles
+  end
+end

data/lib/scarpe/components/calzini/misc.rb

@@ -0,0 +1,136 @@
+# frozen_string_literal: true
+
+module Scarpe::Components::Calzini
+  def check_element(props)
+    HTML.render do |h|
+      h.input type: :checkbox,
+        id: html_id,
+        onclick: handler_js_code("click"),
+        value: props["text"],
+        checked: props["checked"],
+        style: drawable_style(props)
+    end
+  end
+
+  def edit_box_element(props)
+    oninput = handler_js_code("change", "this.value")
+
+    HTML.render do |h|
+      h.textarea(id: html_id, oninput: oninput,onmouseover: handler_js_code("hover"), style: edit_box_style(props),title: props["tooltip"]) { props["text"] }
+    end
+  end
+
+  def edit_line_element(props)
+    oninput = handler_js_code("change", "this.value")
+    
+    HTML.render do |h|
+      h.input(id: html_id, oninput: oninput, onmouseover: handler_js_code("hover"), value: props["text"], style: edit_line_style(props),title: props["tooltip"])
+    end
+  end
+
+  def image_element(props)
+    style = drawable_style(props)
+
+    if props["click"]
+      HTML.render do |h|
+        h.a(id: html_id, href: props["click"]) { h.img(id: html_id, src: props["url"], style:) }
+      end
+    else
+      HTML.render do |h|
+        h.img(id: html_id, src: props["url"], style:)
+      end
+    end
+  end
+
+  def list_box_element(props)
+    onchange = handler_js_code("change", "this.options[this.selectedIndex].value")
+
+    # Is this useful at all? Is it overridden below completely?
+    option_attrs = { value: nil, selected: false }
+
+    HTML.render do |h|
+      h.select(id: html_id, onchange:, style: list_box_style(props)) do
+        (props["items"] || []).each do |item|
+          option_attrs = {
+            value: item,
+          }
+          if item == props["choose"]
+            option_attrs[:selected] = "true"
+          end
+          h.option(**option_attrs) do
+            item
+          end
+        end
+      end
+    end
+  end
+
+  def radio_element(props)
+    # This is wrong - need to default to the parent slot -- maybe its linkable ID?
+    group_name = props["group"] || "no_group"
+
+    HTML.render do |h|
+      h.input(
+        type: :radio,
+        id: html_id,
+        onclick: handler_js_code("click"),
+        name: group_name,
+        value: props["text"],
+        checked: props["checked"],
+        style: drawable_style(props),
+      )
+    end
+  end
+
+  def video_element(props)
+    HTML.render do |h|
+      h.video(id: html_id, style: drawable_style(props), controls: true) do
+        h.source(src: @url, type: props["format"])
+      end
+    end
+  end
+
+  def progress_element(props)
+    HTML.render do |h|
+      h.progress(
+        id: html_id,
+        style: drawable_style(props),
+        role: "progressbar",
+        "aria-valuenow": props["fraction"],
+        "aria-valuemin": 0.0,
+        "aria-valuemax": 1.0,
+        max: 1,
+        value: props["fraction"],
+      )
+    end
+  end
+
+  private
+
+  def edit_box_style(props)
+    drawable_style(props).merge({
+      height: dimensions_length(props["height"]),
+      width: dimensions_length(props["width"]),
+      font: props["font"]? parse_font(props) : nil
+    }.compact)
+  end
+
+  def edit_line_style(props)
+    styles = drawable_style(props)
+
+    styles[:font] = props["font"]? parse_font(props) : nil
+    styles[:width] = dimensions_length(props["width"]) if props["width"]
+    styles[:color] =  rgb_to_hex(props["stroke"])
+
+    styles
+  end
+
+  def list_box_style(props)
+    styles = drawable_style(props)
+
+    styles[:height] = dimensions_length(props["height"]) if props["height"]
+    styles[:width] = dimensions_length(props["width"]) if props["width"]
+
+    styles
+  end
+end

data/lib/scarpe/components/calzini/para.rb

@@ -0,0 +1,237 @@
+# frozen_string_literal: true
+
+module Scarpe::Components::Calzini
+  def para_element(props, &block)
+    # Align requires an extra wrapping div.
+
+    # Stacking strikethrough with underline requires multiple elements.
+    # We handle this by making strikethrough part of the main element,
+    # but using an extra wrapping element for underline.
+
+    tag = props["tag"] || "p"
+
+    para_styles, extra_styles = para_style(props)
+
+    HTML.render do |h|
+      if extra_styles.empty?
+        h.send(tag, id: html_id, style: para_styles, &block)
+      else
+        h.div(id: html_id, style: extra_styles.merge(width: "100%")) do
+          h.send(tag, style: para_styles, &block)
+        end
+      end
+    end
+  end
+
+  private
+
+  def para_style(props)
+  
+    ds = drawable_style(props)
+    s1, s2 = text_specific_styles(props)
+    [ds.merge(s1), s2]
+  end
+
+  def text_specific_styles(props)
+    # Shoes3 allows align: right on TextDrawables like em(), but it does
+    # nothing. We can ignore it or (maybe in future?) warn if we see it.
+
+    strikethrough = props["strikethrough"]
+    strikethrough = nil if strikethrough == "" || strikethrough == "none"
+    s1 = {
+      "font-variant": props["font_variant"],
+      "color": rgb_to_hex(props["stroke"]),
+      "background-color": rgb_to_hex(props["fill"]),
+      "font-size": para_font_size(props),
+      "font-family": props["family"],
+      "text-decoration-line": strikethrough ? "line-through" : nil,
+      "text-decoration-color": props["strikecolor"] ? rgb_to_hex(props["strikecolor"]) : nil,
+      "font-weight": props["font_weight"]? props["font_weight"] : nil,
+      :'font-style' => case props["emphasis"]
+            when "normal"
+                "normal"
+            when "oblique"
+                "oblique"
+            when "italic"
+                "italic"
+            else
+                nil
+            end,
+      :'letter-spacing' => props["kerning"] ? "#{props["kerning"]}px" : nil,
+      :'vertical-align' => props["rise"] ? "#{props["rise"]}px" : nil
+    }.compact
+
+    s2 = {}
+    if props["align"] && props["align"] != ""
+      s2[:"text-align"] = props["align"]
+    end
+
+    unless [nil, "none"].include?(props["underline"])
+      undercolor = rgb_to_hex props["undercolor"]
+      s2["text-decoration-color"] = undercolor if undercolor
+    end
+
+    # [nil, "none", "single", "double", "low", "error"]
+    case props["underline"]
+    when nil, "none"
+      # Do nothing
+    when "single"
+      s2["text-decoration-line"] = "underline"
+    when "double"
+      s2["text-decoration-line"] = "underline"
+      s2["text-decoration-style"] = "double"
+    when "error"
+      s2["text-decoration-line"] = "underline"
+      s2["text-decoration-style"] = "wavy"
+    when "low"
+      s2["text-decoration-line"] = "underline"
+      s2["text-underline-offset"] = "0.3rem"
+    else
+      # This should normally be unreachable
+      raise Shoes::Errors::InvalidAttributeValueError, "Unexpected underline type #{props["underline"].inspect}!"
+    end
+
+    [s1, s2]
+  end
+
+
+  def parse_font(props)
+
+    def contains_number?(str)
+      !!(str =~ /\d/)
+    end
+    def contains_only_numbers?(string)
+      /^\d+\z/ =~ string
+    end
+  
+
+    input = props["font"]
+    regex = /\s+(?=(?:[^']*'[^']*')*[^']*$)(?![^']*,[^']*')/
+    result = input.split(regex)
+   
+    fs = "normal"
+    fv = "normal"
+    fw = "normal"
+    fss = "medium"
+    ff = "Arial"
+    
+    fos = ["italic", "oblique"]
+    fov = ["small-caps", "initial", "inherit"]
+    fow = ["bold", "bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900"]
+    foss = ["xx-small", "x-small", "small","large", "x-large", "xx-large", "smaller", "larger"]
+    
+    result.each do |i|
+      if fos.include?(i)
+        fs = i
+        next
+      elsif fov.include?(i)
+        fv = i
+        next
+      elsif fow.include?(i)
+        fw = i
+        next
+      elsif foss.include?(i)
+        fss = i
+        next
+      else
+        if contains_number?(i)
+
+          if contains_only_numbers?(i)
+              fss = i + "px"
+          else
+              fss = i
+          end
+
+        elsif i != "normal" && i != "medium" && i.strip != ""
+
+          if ff == "Arial"
+
+            ff = i
+
+          else
+            
+            ff = ff+ i
+
+          end
+        end
+      end
+      
+    end
+    
+
+    "#{fs} #{fv} #{fw} #{fss} #{ff}"
+    
+  end
+
+  def para_font_size(props)
+    return nil unless props["size"]
+
+    sz = props["size"].to_s
+    font_size = SIZES[sz.to_sym] || sz.to_i
+
+    dimensions_length(font_size)
+  end
+
+  public
+
+  # The text element is used to render the equivalent of Shoes cText,
+  # which includes em, strong, span, link and so on. We use a
+  # "content" tag for it which alternates plaintext with a hash of
+  # properties.
+  def text_drawable_element(prop_array)
+    out = String.new # Need unfrozen string
+
+    # Each item should be a String or a property Hash
+    # :items, :html_id, :tag, :props
+    prop_array.each do |item|
+      if item.is_a?(String)
+        out << item.gsub("\n", "<br/>")
+      else
+        s, extra = text_drawable_style(item[:props])
+        out << HTML.render do |h|
+          if extra.empty?
+            h.send(
+              item[:tag] || "span",
+              class: "id_#{item[:html_id]}",
+              style: s,
+              **text_drawable_attrs(item[:props])
+            ) do
+              text_drawable_element(item[:items])
+            end
+          else
+            h.span(class: "id_#{item[:html_id]}", style: extra) do
+              h.send(
+                item[:tag] || "span",
+                class: "id_#{item[:html_id]}",
+                style: s,
+                **text_drawable_attrs(item[:props])
+              ) do
+                text_drawable_element(item[:items])
+              end
+            end
+          end
+        end
+      end
+    end
+
+    out
+  end
+
+  private
+
+  def text_drawable_attrs(props)
+    {
+      # These properties will normally only be set by link()
+      href: props["click"],
+      onclick: props["has_block"] ? handler_js_code("click") : nil,
+    }.compact
+  end
+
+  def text_drawable_style(props)
+    s, extra_s = text_specific_styles(props)
+
+    # Add hover styles, perhaps with CSS pseudo-class
+
+    [drawable_style(props).merge(s), extra_s]
+  end
+end