atome 0.5.4.1.3 → 0.5.4.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5ea8cce9faff92d47920bfeb8bdd678e0c1c19db73d7446b43c8f8053cbb32f9
-  data.tar.gz: cc515d8140cbda0d54b4a9faf1bbe13a03bc8a19ce500965480ab5a66f1cd951
+  metadata.gz: 4feb89bd1af8453078bbe9c826af8f6176c321ee7b155e109c3b8a3f6033e87e
+  data.tar.gz: 7d13f98dde5fbafb74f27eae1ea4fe025ef7de735c939414cc23708205963a6f
 SHA512:
-  metadata.gz: 1b6a8825e9546c41f81fe46018c57824aa2bb46b176a1cf2c4a3d8c1b63ba19f5ba85abddbb3ed790ef9d555968c0e4d90238c3280b6c5d6c799b0d6017bcd1d
-  data.tar.gz: 9c8496f6d15528eef09246d2454847210019fd282a6baca7e505076923e6527fb9ea09f54c9f942985324e0a09264380c4e632fbe748d50e24d00d61caf1df5a
+  metadata.gz: 82eca49b901057c6070c7db3f64496efee49b63833a27b6b0dc2388a32a7cf1e6b37a7531bec2e9272f963f9d39f75ae7884c20d89cbe1482c0abe58dc674b6e
+  data.tar.gz: c1013e2b38c94c2a46fef8aa91fade3361ef952d71be71e7ddbeada26955c43a7ce21e252a5ceadf954fd4a8ea96faf7298f5666be5db9311b1478f6280d834e

data/CHANGELOG.md

@@ -9,4 +9,13 @@
 ## [0.5.4.1.3] - 2023-05-21
 -version updated to  '0.5.4.1.3'
 vector now remove background-color if it exist
-vector now use class instead of a local style
+vector now use class instead of a local style
+
+
+## [0.5.4.1.7] - 2023-05-25
+
+remove "shape :pre" and move the condition when using :definition to atome_common , because of a bug that remove all 
+attached atome  
+
+## [0.5.4.1.8] - 2023-05-25
+Ready to add gradient color now systematically use a variable for each component( Red, green , blue , alpha)  

data/lib/atome/genesis/generators/atome.rb

@@ -32,6 +32,15 @@ new({ sanitizer: :shadow }) do |params|
   new_params
 end
 new({ atome: :shape })
+# new({ pre: :shape }) do |params|
+#   if params[:definition]
+#     # if it is a vector we reorder tha params
+#     attached = params.delete(:attached)
+#     params = params.merge({ attached: attached })
+#   end
+#
+#   params
+# end
 new({ atome: :code })
 new({ atome: :audio })
 new({ atome: :element })

data/lib/atome/genesis/generators/identity.rb

@@ -2,7 +2,7 @@
 
 new({ particle: :attach })
 new({ sanitizer: :attach }) do |parents_ids|
-  puts "=> attach it! : #{parents_ids} <="
+  # puts "=> attach it! : #{parents_ids} <="
 
   # parents_ids = parents_ids if parents_ids.instance_of? Atome
   parents_ids = [parents_ids] unless parents_ids.instance_of?(Array)
@@ -30,7 +30,7 @@ end
 
 new({ particle: :attached })
 new({ sanitizer: :attached }) do |children_ids|
-  puts "=> attached now! : #{children_ids}<="
+  # puts "=> attached now! : #{children_ids}<="
   # children_ids = children_ids if children_ids.instance_of? Atome
   children_ids = [children_ids] unless children_ids.instance_of?(Array)
   children_ids.each do |child_id|
@@ -55,7 +55,6 @@ new({ sanitizer: :attached }) do |children_ids|
 end
 
 new({ particle: :detached, store: false })
-
 new({ sanitizer: :detached }) do |values|
   if values.instance_of? Array
     values.each do |value|
@@ -69,6 +68,9 @@ new({ sanitizer: :detached }) do |values|
   values
 end
 
+
+
+new({ particle: :real })
 new({ particle: :type })
 new({ particle: :id })
 new({ sanitizer: :id }) do |params|

data/lib/atome/genesis/generators/material.rb

@@ -1,21 +1,21 @@
 # frozen_string_literal: true
 
-new({ particle: :red }) do
-  # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
-  self
-end
-new({ particle: :green }) do
-  # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
-  self
-end
-new({ particle: :blue }) do
-  # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
-  self
-end
-new({ particle: :alpha }) do
-  # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
-  self
-end
+# new({ particle: :red }) do
+#   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
+#   self
+# end
+# new({ particle: :green }) do
+#   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
+#   self
+# end
+# new({ particle: :blue }) do
+#   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
+#   self
+# end
+# new({ particle: :alpha }) do
+#   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
+#   self
+# end
 new({ particle: :diffusion }) do
   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
   self

data/lib/atome/helpers/essentials.rb

@@ -2,6 +2,16 @@
 
 # use to sanitize and secure user input
 module Essentials
+  corp = <<~STR
+    <g transform="matrix(0.0267056,0,0,0.0267056,18.6376,20.2376)">
+        <g id="shapePath1" transform="matrix(4.16667,0,0,4.16667,-377.307,105.632)">
+            <path d="M629.175,81.832C740.508,190.188 742.921,368.28 634.565,479.613C526.209,590.945 348.116,593.358 236.784,485.002C125.451,376.646 123.038,198.554 231.394,87.221C339.75,-24.111 517.843,-26.524 629.175,81.832Z" style="fill:rgb(201,12,125);"/>
+        </g>
+        <g id="shapePath2" transform="matrix(4.16667,0,0,4.16667,-377.307,105.632)">
+            <path d="M1679.33,410.731C1503.98,413.882 1402.52,565.418 1402.72,691.803C1402.91,818.107 1486.13,846.234 1498.35,1056.78C1501.76,1313.32 1173.12,1490.47 987.025,1492.89C257.861,1502.39 73.275,904.061 71.639,735.381C70.841,653.675 1.164,647.648 2.788,737.449C12.787,1291.4 456.109,1712.79 989.247,1706.24C1570.67,1699.09 1982.31,1234 1965.76,683.236C1961.3,534.95 1835.31,407.931 1679.33,410.731Z" style="fill:rgb(201,12,125);"/>
+        </g>
+    </g>
+STR
   @default_params = {
     # Warning :  type must be define first
     render_engines: [:browser],
@@ -19,7 +29,7 @@ module Essentials
            left: 100, top: 100, clones: [], preset: :box },
     vector: { type: :shape, width: 99, height: 99,
            attach: [:view],
-           left: 100, top: 100, clones: [], preset: :vector },
+           left: 100, top: 100, clones: [], preset: :vector , definition: corp},
     circle: { type: :shape, width: 99, height: 99, smooth: '100%',
               attached: :circle_color, attach: [:view],
               left: 100, top: 100, clones: [], preset: :circle },

data/lib/atome/presets/atome.rb

@@ -13,29 +13,44 @@ class Atome
     essential_params[:renderers] = essential_params[:renderers] || @atome[:renderers]
     essential_params[:id] = params[:id] || identity_generator(atome_type)
     essential_params[:attach] = params[:attach] || [@atome[:id]] || [:view]
+    if params[:definition]
+      # if it is a vector we reorder tha params
+      attached = params.delete(:attached)
+      params = params.merge({ attached: attached })
+    end
+
+
     essential_params.merge(params)
   end
 
   def box(params = {}, &bloc)
     atome_type = :box
     params = atome_common(atome_type, params)
-    Atome.new({ atome_type => params }, &bloc)
+    # b= send(params[:type],params , &bloc)
+  Atome.new({ atome_type => params }, &bloc)
+
   end
 
-  def vector(params = {}, &bloc)
-    atome_type = :vector
+
+
+  def circle(params = {}, &bloc)
+    atome_type = :circle
     params = atome_common(atome_type, params)
+    # send(params[:type],params , &bloc)
     Atome.new({ atome_type => params }, &bloc)
   end
 
-  def circle(params = {}, &bloc)
-    atome_type = :circle
-    # puts "counter#{Universe.counter}"
 
+  def vector(params = {}, &bloc)
+    atome_type = :vector
     params = atome_common(atome_type, params)
-    # puts "params ==> #{params} : #{Universe.counter}"
-
+    # send(params[:type],params, &bloc )
     Atome.new({ atome_type => params }, &bloc)
+
+
   end
 
 end
+
+
+

data/lib/atome/renderers/browser/atome.rb

@@ -12,42 +12,88 @@ generator.build_render(:browser_shape) do
   # if @definition
   #   alert "why we never pass here??????"
   # else
-    @browser_type = :div
-    id_found = @atome[:id]
-    DOM do
-      div(id: id_found).atome
-    end.append_to(BrowserHelper.browser_document[:user_view])
-    @browser_object = BrowserHelper.browser_document[id_found]
+  @browser_type = :div
+  id_found = @atome[:id]
+  DOM do
+    div(id: id_found).atome
+  end.append_to(BrowserHelper.browser_document[:user_view])
+  @browser_object = BrowserHelper.browser_document[id_found]
   # end
 
 end
 
 generator.build_render(:browser_color) do |_value|
+  puts " @atome[:id] : #{@atome[:id]}"
   @browser_type = :style
   # puts "1 - for the id  : #{id} the browser type is  ::::> #{@browser_type}"
   id_found = @atome[:id]
-  type_found = @atome[:type]
+  # type_found = @atome[:type]
   # we remove previous unused style tag
   BrowserHelper.browser_document[id]&.remove
-  red_found = @atome[:red]
-  blue_found = @atome[:blue]
-  green_found = @atome[:green]
-  alpha_found = @atome[:alpha]
-  BrowserHelper.browser_document.head << Browser.DOM("<style atome='#{type_found}'
-  id='#{id_found}'>.#{id_found}{
-background-color: rgba(#{red_found * 255},#{green_found * 255},#{blue_found * 255},#{alpha_found});
-fill: rgba(#{red_found * 255},#{green_found * 255},#{blue_found * 255},#{alpha_found}),
-stroke: rgba(#{red_found * 255},#{green_found * 255},#{blue_found * 255},#{alpha_found})}</style>")
-  # document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.fill = #{color_updated}
-  #   document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.stroke = #{color_updated}
-  # # TODO:  use the code below to modify the style tag
+  red = @atome[:red]
+  green = @atome[:green]
+  blue = @atome[:blue]
+  alpha = @atome[:alpha]
+  ########################### old code ###########################
+  #   BrowserHelper.browser_document.head << Browser.DOM("<style atome='#{type_found}'
+  #   id='#{id_found}'>.#{id_found}{
+  # poil
+  # //background-color: rgba(#{red_found * 255},#{green_found * 255},#{blue_found * 255},#{alpha_found});
+  # //fill: rgba(#{red_found * 255},#{green_found * 255},#{blue_found * 255},#{alpha_found}),
+  # //stroke: rgba(#{red_found * 255},#{green_found * 255},#{blue_found * 255},#{alpha_found})
+  #
+  # }</style>")
+
+  ########################### new code ###########################
+  atomic_style = BrowserHelper.browser_document['#atomic_style']
+
+  #   class_content = <<STR
+  # .#{id_found} {
+  #   --#{id_found}_r : #{red * 255}
+  #   --#{id_found}_g : #{green * 255}
+  #   --#{id_found}_b : #{blue * 255}
+  #   --#{id_found}_a : #{alpha}
+  #   --#{id_found}_col : rgba(var(--#{id_found}_r ),var(--#{id_found}_g ),var(--#{id_found}_b ),var(--#{id_found}_a ))
+  #
+  #   background-color: rgba(#{red * 255}, #{green * 255}, #{blue * 255}, #{alpha});
+  #   fill: rgba(#{red * 255}, #{green * 255}, #{blue * 255}, #{alpha});
+  #   stroke: rgba(#{red * 255}, #{green * 255}, #{blue * 255}, #{alpha});
+  # }
+  # STR
+
+  class_content = <<STR
+.#{id_found} {
+  --#{id_found}_r : #{red * 255};
+  --#{id_found}_g : #{green * 255};
+  --#{id_found}_b : #{blue * 255};
+  --#{id_found}_a : #{alpha};
+  --#{id_found}_col : rgba(var(--#{id_found}_r ),var(--#{id_found}_g ),var(--#{id_found}_b ),var(--#{id_found}_a ));
+  background-color: var(--#{id_found}_col);
+  fill:  var(--#{id_found}_col);
+  stroke:  var(--#{id_found}_col);
+}
+STR
+
+  if atomic_style
+    if atomic_style.text.include?(".#{id_found}")
+      # if the class exist , update it's content with the new class
+      regex = /(\.#{id_found}\s*{)([\s\S]*?)(})/m
+      atomic_style.text = atomic_style.text.gsub(regex, class_content)
+    else
+      # if the class doesn't exist, add it to the end of the tag <style>
+      atomic_style.text += class_content
+    end
+  end
+  ########################### new code end ###########################
+
+  # TODO:  use the code below to modify the style tag
   @browser_object = BrowserHelper.browser_document[id_found]
 end
 
 generator.build_render(:browser_shadow) do |_value|
   @browser_type = :style
   id_found = @atome[:id]
-  type_found = @atome[:type]
+  # type_found = @atome[:type]
   # we remove previous unused style tag
   BrowserHelper.browser_document[id]&.remove
   red_found = @atome[:red]
@@ -58,12 +104,38 @@ generator.build_render(:browser_shadow) do |_value|
   left = @atome[:left]
   top = @atome[:top]
   inset = @atome[:direction]
+  ############ old code
+  # BrowserHelper.browser_document.head << Browser.DOM("<style atome='#{type_found}'
+  # id='#{id_found}'>.#{id_found}{box-shadow: #{left}px #{top}px #{blur}px #{inset} rgba(#{red_found * 255},
+  # #{green_found * 255},#{blue_found * 255},#{alpha_found})}</style>")
+  # # TODO/ use the code below to modify the style tag
+  # @browser_object = BrowserHelper.browser_document[id_found]
+
+  ########## new code
+  atomic_style = BrowserHelper.browser_document['#atomic_style']
+
+  class_content = <<STR
+.#{id_found} {
+box-shadow: #{left}px #{top}px #{blur}px #{inset} rgba(#{red_found * 255},#{green_found * 255},#{blue_found * 255},
+#{alpha_found});
+filter: drop-shadow(#{left}px #{top}px #{blur}px rgba(#{red_found * 255},#{green_found * 255},#{blue_found * 255},
+#{alpha_found}));
+}
+STR
+
+  if atomic_style
+    if atomic_style.text.include?(".#{id_found}")
+      # if the class exist , update it's content with the new class
+      regex = /(\.#{id_found}\s*{)([\s\S]*?)(})/m
+      atomic_style.text = atomic_style.text.gsub(regex, class_content)
+    else
+      # if the class doesn't exist, add it to the end of the tag <style>
+      atomic_style.text += class_content
+    end
+  end
+  #
+  #   @browser_object = BrowserHelper.browser_document[id_found]
 
-  BrowserHelper.browser_document.head << Browser.DOM("<style atome='#{type_found}'
-  id='#{id_found}'>.#{id_found}{box-shadow: #{left}px #{top}px #{blur}px #{inset} rgba(#{red_found * 255},
-  #{green_found * 255},#{blue_found * 255},#{alpha_found})}</style>")
-  # TODO/ use the code below to modify the style tag
-  @browser_object = BrowserHelper.browser_document[id_found]
 end
 
 generator.build_render(:browser_image) do |_user_prc|

data/lib/atome/renderers/browser/helpers/browser_helper.rb

@@ -15,41 +15,40 @@ module BrowserHelper
     html_object.append_to(browser_document[parents])
   end
 
-  def self.colorize_vector(vector_id, tag_style)
-    # TODO : Create a class instead of modidfying the vector
+  def self.add_class_to_vector(vector_id, color_id)
+    # TODO : Create a class instead of modifying the vector
     # get the content the <style> tag
-    color_class=self.color.last
+    # color_class=self.color.last
+    # alert color_class
     # alert color_class.class
     # content_style = tag_style.inner_html
     # color_value = content_style[/background-color:\s*([^;}]+)/, 1]
     `
             let parser = new DOMParser();
     var divElement = document.querySelector('#'+#{vector_id});
-divElement.style.removeProperty('background-color');
-divElement.style.backgroundColor = 'transparent';
+// divElement.style.removeProperty('background-color');
+//divElement.style.backgroundColor = 'transparent';
     // select the first svg tag inside the div
     let foundSVG  = divElement.querySelector('svg');
      let elements = foundSVG.getElementsByTagName("path");
     Array.from(elements).forEach(el => {
-                el.classList.add(#{color_class});
+                el.classList.add(#{color_id});
             });
     `
   end
 
   def self.browser_attach_style(parents, _html_object, atome)
-    # we test if the atome has a deinition ( it means hold some vectors infomations)
+    # we test if the atome has a definition ( it means hold some vectors information)
     if grab(parents).atome[:definition]
-      tag_style = $document[atome[:id]]
-      # # get the content the <style> tag
-      # content_style = tag_style.inner_html
-      #  extract the color value
-      colorize_vector(parents, tag_style)
-
+      # tag_style = $document[atome[:id]]
+      # # # get the content the <style> tag
+      # # content_style = tag_style.inner_html
+      # #  extract the color value
+      # alert atome[:id]
+      add_class_to_vector(parents, atome[:id])
     else
       browser_document[parents].add_class(atome[:id])
-
     end
-
   end
 
   def self.browser_attached_div(children, _html_object, atome)
@@ -62,10 +61,11 @@ divElement.style.backgroundColor = 'transparent';
 
   def self.browser_attached_style(children, _html_object, atome)
     if atome[:definition]
+      # alert "yes we arrived here :>\n\n=>#{children}, class:\n=>#{children.class} :\n\n=> #{atome} :\n\n=>  #{_html_object}<:"
       children.each do |child|
-        tag_style = $document[child]
-
-        colorize_vector(atome[:id], tag_style)
+        # tag_style = $document[child]
+        # alert "(#{atome[:id]}, #{child})"
+        add_class_to_vector(atome[:id], child)
         # get the content the <style> tag
         #            content_style = tag_style.inner_html
         #            #  extract the color value
@@ -84,11 +84,10 @@ divElement.style.backgroundColor = 'transparent';
       end
 
     else
-      # alert atome.class
-      browser_document[atome[:id]].add_class(children)
+      # alert "class added : #{children}"
+      # browser_document[atome[:id]].add_class(children)
     end
-    # browser_document[atome[:id]].add_class(children)
-
+    browser_document[atome[:id]].add_class(children)
   end
 
   def self.value_parse(value)

data/lib/atome/renderers/browser/helpers/color_helper.rb

@@ -2,21 +2,79 @@
 
 # for browser rendering
 module BrowserHelper
-  def self.browser_colorize_color(color_updated, atome)
-    `
-  document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.backgroundColor = #{color_updated}
-document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.fill = #{color_updated}
-document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.stroke = #{color_updated}
-`
+  def self.browser_colorize_color(red, green, blue, alpha, atome)
+    ########################### new code ###########################
+    id_found=atome[:id]
+    # color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+    new_class_content = <<STR
+.#{id_found} {
+  --#{id_found}_r : #{red * 255};
+  --#{id_found}_g : #{green * 255};
+  --#{id_found}_b : #{blue * 255};
+  --#{id_found}_a : #{alpha};
+  --#{id_found}_col : rgba(var(--#{id_found}_r ),var(--#{id_found}_g ),var(--#{id_found}_b ),var(--#{id_found}_a ));
+  background-color: var(--#{id_found}_col);
+  fill:  var(--#{id_found}_col);
+  stroke:  var(--#{id_found}_col);
+}
+STR
+
+    atomic_style = BrowserHelper.browser_document['#atomic_style']
+    # atomic_style.text = atomic_style.text.gsub(/\.#{id_found}\s*{.*?}/m, new_class_content)
+
+    regex = /(\.#{id_found}\s*{)([\s\S]*?)(})/m
+    atomic_style.text = atomic_style.text.gsub(regex, new_class_content)
+
+
+    ########################### old code ###########################
+#
+#     puts  "the code below may be updated to work with the new class handler :\n\n#{color_updated}\n\n#{atome}"
+#     `
+# document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.backgroundColor = #{color_updated}
+# document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.fill = #{color_updated}
+# document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.stroke = #{color_updated}
+# `
+    ########################### new old end ###########################
+
   end
 
-  def self.browser_colorize_shadow(color_updated, atome)
+  def self.browser_colorize_shadow(red, green, blue, alpha, atome)
+    # "new shadow color is : #{color_updated}"
+    # puts "=====> #{color_updated} : #{atome}"
+    # TODO: check if we need to use variable for the color or let it like it is!
     left = atome[:left]
     top = atome[:top]
     blur = atome[:blur]
     direction = atome[:direction]
-    shadow_updated = "#{left}px #{top}px #{blur}px #{color_updated} #{direction}"
-    `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
+
+
+    # shadow_updated = "#{left}px #{top}px #{blur}px #{color_updated} #{direction}"
+    # `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
+
+    #new code
+    id_found= atome[:id]
+    class_content = <<STR
+.#{id_found} {
+  --#{id_found}_r : #{red * 255};
+  --#{id_found}_g : #{green * 255};
+  --#{id_found}_b : #{blue * 255};
+  --#{id_found}_a : #{alpha};
+  --#{id_found}_col : rgba(var(--#{id_found}_r ),var(--#{id_found}_g ),var(--#{id_found}_b ),var(--#{id_found}_a ));
+
+  box-shadow: #{left}px #{top}px #{blur}px var(--#{id_found}_col) #{direction};
+}
+STR
+
+    atomic_style = BrowserHelper.browser_document['#atomic_style']
+    # atomic_style.text = atomic_style.text.gsub(/\.#{id_found}\s*{.*?}/m, new_class_content)
+    # puts new_class_content
+    regex = /(\.#{id_found}\s*{)([\s\S]*?)(})/m
+    atomic_style.text = atomic_style.text.gsub(regex, class_content)
+
+    # .view_shadow_17 {
+    # box-shadow: 3px 3px 3px  rgba(0,
+    #   0,0,1)
+    # }
   end
 
   def self.browser_left_color(_value, _browser_object, _atome)

data/lib/atome/renderers/browser/helpers/effect_helper.rb

@@ -4,17 +4,17 @@
 module BrowserHelper
 
   def self.browser_blur_style(_browser_object, value, atome)
-    b_left = "#{atome[:left]}px"
-    b_top = "#{atome[:top]}px"
-    b_blur = "#{atome[:blur] = value}px"
-    b_red = atome[:red] * 255
-    b_green = atome[:green] * 255
-    b_blue = (atome[:blue]) * 255
-    b_direction = atome[:direction]
-    b_alpha = atome[:alpha]
+    # b_left = "#{atome[:left]}px"
+    # b_top = "#{atome[:top]}px"
+    # b_blur = "#{atome[:blur] = value}px"
+    # b_red = atome[:red] * 255
+    # b_green = atome[:green] * 255
+    # b_blue = (atome[:blue]) * 255
+    # b_direction = atome[:direction]
+    # b_alpha = atome[:alpha]
 
-    shadow_updated = "#{b_left} #{b_top} #{b_blur} rgba(#{b_red}, #{b_green}, #{b_blue}, #{b_alpha}) #{b_direction}"
-    `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
+    # shadow_updated = "#{b_left} #{b_top} #{b_blur} rgba(#{b_red}, #{b_green}, #{b_blue}, #{b_alpha}) #{b_direction}"
+    # `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
   end
 
   def self.browser_blur_div(browser_object, value, _atome)

data/lib/atome/renderers/browser/helpers/shadow_helper.rb

@@ -12,22 +12,63 @@ module BrowserHelper
     blue = (atome[:blue]) * 255
     direction = atome[:direction]
     alpha = atome[:alpha]
+    id_found = atome[:id]
+    real = atome[:real]
+    # `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
+    if real
+      drop_shadow_updated = "drop-shadow(#{ls_left} #{ls_top} #{ls_blur} rgba(#{red}, #{green}, #{blue}, #{alpha}))"
+      class_content = <<STR
+.#{id_found} {
 
-    shadow_updated = "#{ls_left} #{ls_top} #{ls_blur} rgba(#{red}, #{green}, #{blue}, #{alpha}) #{direction}"
-    `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
+filter: #{drop_shadow_updated};
+}
+STR
+    else
+      shadow_updated = "#{ls_left} #{ls_top} #{ls_blur} rgba(#{red}, #{green}, #{blue}, #{alpha}) #{direction}"
+      class_content = <<STR
+.#{id_found} {
+box-shadow: #{shadow_updated};
+}
+STR
+    end
+
+    atomic_style = BrowserHelper.browser_document['#atomic_style']
+
+    return unless atomic_style
+
+    if atomic_style.text.include?(".#{id_found}")
+      # if the class exist , update it's content with the new class
+      #  alert "before :#{atomic_style.text}"
+      regex = /(\.#{id_found}\s*{)([\s\S]*?)(})/m
+      atomic_style.text = atomic_style.text.gsub(regex, class_content)
+      # alert "after :#{atomic_style.text}"
+    else
+      # if the class doesn't exist, add it to the end of the tag <style>
+      atomic_style.text += class_content
+    end
+
+    # alert atomic_style.text
   end
 
-  def self.browser_top_shadow(value, _browser_object, atome)
-    rs_left = "#{atome[:left]}px"
-    rs_top = "#{atome[:top] = value}px"
-    rs_blur = "#{atome[:blur]}px"
-    red = atome[:red] * 255
-    green = atome[:green] * 255
-    blue = (atome[:blue]) * 255
-    direction = atome[:direction]
-    alpha = atome[:alpha]
+  # .shadow2 {
+  #   box-shadow: 3px 9px 9px rgba(0, 0, 0, 1) inset;
+  # }
+  # .shadow2 {
+  # box-shadow: 3px 9px 9px rgba(0, 0, 0, 1) inset)
+  # }
 
-    shadow_updated = "#{rs_left}px #{rs_top}px #{rs_blur}px rgba(#{red}, #{green}, #{blue}, #{alpha}) #{direction}"
-    `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
+  def self.browser_top_shadow(value, _browser_object, atome)
+    # rs_left = "#{atome[:left]}px"
+    # rs_top = "#{atome[:top] = value}px"
+    # rs_blur = "#{atome[:blur]}px"
+    # red = atome[:red] * 255
+    # green = atome[:green] * 255
+    # blue = (atome[:blue]) * 255
+    # direction = atome[:direction]
+    # alpha = atome[:alpha]
+    #
+    # shadow_updated = "#{rs_left}px #{rs_top}px #{rs_blur}px rgba(#{red}, #{green}, #{blue}, #{alpha}) #{direction}"
+    # `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
+    #
   end
 end

data/lib/atome/renderers/browser/identity.rb

@@ -2,20 +2,19 @@
 
 generator = Genesis.generator
 
-generator.build_render(:browser_id) do |params|
-  if @browser_type == :style
-    prev_content = @browser_object.inner_html
-    new_content = prev_content.sub(@browser_object.id, params)
-    @browser_object.inner_html = new_content
-  end
-  browser_object.id = params if @atome[:id] != params
-end
+# generator.build_render(:browser_id) do |params|
+#   if @browser_type == :style
+#     prev_content = @browser_object.inner_html
+#     new_content = prev_content.sub(@browser_object.id, params)
+#     @browser_object.inner_html = new_content
+#   end
+#   browser_object.id = params if @atome[:id] != params
+# end
 
 generator.build_render(:browser_type) do |params|
   send("browser_#{params}", user_proc)
 end
 
-
 generator.build_render(:browser_attach) do |parents_found|
   # puts "parents_found : #{parents_found}, #{parents_found.class}"
   parents_found.each do |parent_found|
@@ -26,7 +25,8 @@ end
 
 generator.build_render(:browser_attached) do |children_found|
   children_found.each do |child_found|
-    # puts ">>>>> modeled:  browser_type #{@browser_type} parents_found #{children_found} , @browser_object, #{@browser_object}, self : #{self.id}"
+    # puts ">>>>> modeled:  browser_type #{@browser_type} parents_fo
+    # und #{children_found} , @browser_object, #{@browser_object}, self : #{self.id}"
     children_browser_type = grab(child_found).instance_variable_get('@browser_type')
     BrowserHelper.send("browser_attached_#{children_browser_type}", children_found, @browser_object, @atome)
   end
@@ -38,6 +38,21 @@ generator.build_render(:browser_detached) do |values, _user_proc|
     value = value.value if value.instance_of? Atome
     if grab(value).instance_variable_get('@browser_type') == :style
       @browser_object.remove_class(value)
+      if definition
+        `
+            let parser = new DOMParser();
+    var divElement = document.querySelector('#'+#{self.id});
+// divElement.style.removeProperty('background-color');
+//divElement.style.backgroundColor = 'transparent';
+    // select the first svg tag inside the div
+    let foundSVG  = divElement.querySelector('svg');
+     let elements = foundSVG.getElementsByTagName("path");
+    Array.from(elements).forEach(el => {
+                 el.classList.remove(#{value});
+               });
+    `
+      end
+
     else
       BrowserHelper.browser_document[value]&.remove
     end

data/lib/atome/renderers/browser/material.rb

@@ -3,46 +3,46 @@
 generator = Genesis.generator
 
 generator.build_render(:red) do |value|
-  red = ((@atome[:red] = value) * 255)
-  green = @atome[:green] * 255
-  blue = @atome[:blue] * 255
+  red = (@atome[:red] = value)
+  green = @atome[:green]
+  blue = @atome[:blue]
   alpha = @atome[:alpha]
-  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
-  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+  # color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", red, green, blue, alpha, @atome)
   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
   self
 end
 
 generator.build_render(:green) do |value|
   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
-  red = @atome[:red] * 255
-  green = (@atome[:green] = value) * 255
-  blue = @atome[:blue] * 255
+  red = @atome[:red]
+  green = (@atome[:green] = value)
+  blue = @atome[:blue]
   alpha = @atome[:alpha]
-  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
-  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+  # color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", red, green, blue, alpha, @atome)
   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
   self
 end
 
 generator.build_render(:blue) do |value|
-  red = @atome[:red] * 255
-  green = @atome[:green] * 255
-  blue = (@atome[:blue] = value) * 255
+  red = @atome[:red]
+  green = @atome[:green]
+  blue = (@atome[:blue] = value)
   alpha = @atome[:alpha]
-  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
-  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+  # color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", red, green, blue, alpha, @atome)
   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
   self
 end
 
 generator.build_render(:alpha) do |value|
-  red = @atome[:red] * 255
-  green = @atome[:green] * 255
-  blue = @atome[:blue] * 255
+  red = @atome[:red]
+  green = @atome[:green]
+  blue = @atome[:blue]
   alpha = (@atome[:alpha] = value)
-  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
-  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+  # color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", red, green, blue, alpha, @atome)
   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
   self
 end
@@ -89,7 +89,7 @@ new ({ browser: :opacity }) do |value|
 end
 
 new ({ browser: :definition }) do |value|
-  target=id
+  target = id
   `
 
 var divElement =  document.querySelector('#'+#{target});;
@@ -106,6 +106,8 @@ if (svgElement) {
 
   let svg_content='<svg style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">'+#{value}+'</svg>'
        let svgContainer = document.getElementById(#{target});
+        svgContainer.style.removeProperty('background-color');
+        svgContainer.style.backgroundColor = 'transparent';
         let parser = new DOMParser();
         let svgDoc = parser.parseFromString(svg_content, "image/svg+xml");
         let importedSVG = svgDoc.getElementsByTagName("svg")[0];
@@ -116,4 +118,4 @@ if (svgElement) {
         svgContainer.appendChild(importedSVG);
 
 `
-end
+end

data/lib/atome/renderers/browser/opal_add_on.rb

@@ -1,31 +1,32 @@
-def add_new_class(class_name, tag_name, tag_content)
+# def add_new_class(class_name, tag_name, tag_content)
+#
+# `
+#   var styleTag = document.getElementById("atomic_style");
+#   styleTag.innerHTML += "\n."+#{class_name}+'{\n '+#{tag_name}+': '+#{tag_content}+';\n}\n\n\n\n';
+# `
+# end
+#
+# add_new_class('new_class', 'background-color','yellow')
+# add_new_class('other_class', 'color','red')
 
-`
-  var styleTag = document.getElementById("atomic_style");
-  styleTag.innerHTML += "\n    ."+#{class_name}+'{\n        '+#{tag_name}+': '+#{tag_content}+';\n}';
-`
-end
+# def update_css_tag(tag_name, var_name, value)
+#   alert "this code doesn't work with chrome"
+#   `
+#   var rules = null;
+#       var cssRules = document.styleSheets[0].cssRules;
+#       for (var i = 0; i < cssRules.length; i++) {
+#       var rule = cssRules[i];
+#       if (rule.selectorText === '.'+#{tag_name}) {
+#         rules = rule;
+#         break;
+#       }
+#       }
+#
+#       if (rules) {
+#
+#       rules.style.setProperty(#{var_name}, #{value});
+#       }
+# `
+# end
 
-add_new_class('new_class', 'background-color','yellow')
-add_new_class('other_class', 'color','red')
-
-def update_css_tag(tag_name, var_name, value)
-  `
-  var rules = null;
-      var cssRules = document.styleSheets[0].cssRules;
-      for (var i = 0; i < cssRules.length; i++) {
-      var rule = cssRules[i];
-      if (rule.selectorText === '.'+#{tag_name}) {
-        rules = rule;
-        break;
-      }
-      }
-
-      if (rules) {
-
-      rules.style.setProperty(#{var_name}, #{value});
-      }
-`
-end
-
-update_css_tag('other_class', '--end-color', 'blue')
+# update_css_tag('other_class', '--end-color', 'blue')

data/lib/atome/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 class Atome
-  VERSION = '0.5.4.1.3'
+  VERSION = '0.5.4.1.9'
 end

data/vendor/assets/src/js/atome/atome.js

@@ -158,4 +158,3 @@ const Atome_canvas={}
 // });
 
 
-

data/vendor/assets/src/medias/rubies/examples/over.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
-c=circle
+
 b=circle({left: 333, id: :the_c})
 b.touch(true) do
   self.color(:blue)

data/vendor/assets/src/medias/rubies/examples/shadow.rb

@@ -1,37 +1,84 @@
 # frozen_string_literal: true
 
+# TODO : make this work : b.shadow({color: :red})
+
 b = box({ id: :the_box, left: 99, top: 99 })
 
 
 
 
-s = b.shadow({ renderers: [:browser], id: :shadow2, type: :shadow, attach: [],
-               left: 3, top: 9, blur: 3, direction: :inset,
+s = b.shadow({ renderers: [:browser], id: :shadow2, type: :shadow,
+               left: 3, top: 9, blur: 9, direction: :inset,
                red: 0, green: 0, blue: 0, alpha: 1
              })
 
+ s.left(16)
+
+# s.color(:red)
+# wait 1 do
+#   s.attach([:the_box])
+#   # or
+#   # b.children([:shadow2])
+#   wait 1 do
+#     s.blur(9)
+#     wait 1 do
+#       wait 2 do
+#         s.direction('')
+#         s.green(0.007)
+#         s.left(14)
+#         wait 1 do
+#           s.delete(true)
+#         end
+#       end
+#       s.left(44)
+#       s.green(0.7)
+#     end
+#   end
+# end
+#
+# wait 3 do
+#   b.shadow({ blur: 33 })
+#   wait 2  do
+#     b.shadow({ blur: 3 })
+#   end
+# end
+
+wait 2 do
+  s.red(1)
+end
+
+wait 4 do
 
-wait 1 do
-  s.attach([:the_box])
-  # or
-  # b.children([:shadow2])
-  wait 1 do
-    s.blur(9)
-    wait 1 do
-      wait 2 do
-        s.direction('')
-        s.green(0)
-        s.left(14)
-        wait 1 do
-          s.delete(true)
-        end
-      end
-      s.left(44)
-      s.green(0.7)
-    end
-  end
+  puts "-----------> now!!!!!!"
+  b.shadow({ green: 1 })
+  # c2=color(:red)
+  # b.shadow.attach(c2.id)
 end
 
-wait 3 do
-  b.shadow({ blur: 33 })
+
+edition = <<~STR
+  <path id="p1" d="M257.7 752c2 0 4-0.2 6-0.5L431.9 722c2-0.4 3.9-1.3 5.3-2.8l423.9-423.9c3.9-3.9 3.9-10.2 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2c-1.9 11.1 1.5 21.9 9.4 29.8 6.6 6.4 14.9 9.9 23.8 9.9z m67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"/>
+STR
+v=vector({left: 300, width: 300, height: 300, definition: edition})
+# v.color(:red)
+v.shadow({ renderers: [:browser], id: :shadow7, type: :shadow,
+           left: 3, top: 9, blur: 9, direction: :inset,
+           red: 0, green: 0, blue: 0, alpha: 1
+         })
+
+v.shadow({ renderers: [:browser], id: :shadow8, type: :shadow, real: true,
+           left: 3, top: 9, blur: 9, direction: :inset,
+           red: 0, green: 0, blue: 0, alpha: 1
+         })
+b=box({top: 300})
+
+wait 4 do
+  b.attached(:shadow7)
+  v.attached(:shadow7)
+end
+
+
+wait 6 do
+  b.attached(:shadow8)
+  v.attached(:shadow8)
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: atome
 version: !ruby/object:Gem::Version
-  version: 0.5.4.1.3
+  version: 0.5.4.1.9
 platform: ruby
 authors:
 - Jean-Eric Godard
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2023-05-21 00:00:00.000000000 Z
+date: 2023-05-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: arduino_firmata