atome 0.5.4.1.2 → 0.5.4.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a4b330e878ce2169698bf9cf0cb0910503b2600e875abf3d458e87cbd4cb7c8c
-  data.tar.gz: 0be22a13c09c3f280049579fb6c0f4d7010073d4880bb7ae0cb99e79a750da40
+  metadata.gz: 1cd2344c47f76ea286f9a43141167d453be88717f538f71be93cbb43dd37487b
+  data.tar.gz: 26af922e7831e2a363adf36baa7112bde11e1b2cf7cc460a74ed04e348d7d46f
 SHA512:
-  metadata.gz: ee294cb99cf5d7b0d34eed58c43a0a1b4309d16fd9c0c3ccba9efe06fd079858d32a7fa0c3562376ce35d076bbef7e14f045f3bcb55a7a27814d55990409785a
-  data.tar.gz: e6c748de46620aa1eb7b2fd5325bfefe66132992e78a1e2f3ad2a670f34e96e0166fa695ad5aa435fd3d3a1433b48c398582c093c0ed0593e85ba172aa73bead
+  metadata.gz: '0847ca30e88fc3c5cb33fa43dd030022b01fa5646455c13f706681516de240a29e5dabb0b9a25a4f714c37a28b87b9523ddddc70989fb7e2618082054a55a51d'
+  data.tar.gz: 6c8ddbb6432e002be2c4eea459bab8ef5a8e7b620789005889e272851a9912ebe88c785f01fc2d7bbed9923ad81aa90e23fea988ae71b817036937f1021428e4

data/CHANGELOG.md

@@ -4,4 +4,15 @@
 - add vector preset, with support for svg format
 
 ## [0.5.4.1.2] - 2023-05-20
-- added changelog for rubygems
+- added changelog for rubygems
+
+## [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
+
+
+## [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  

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,12 +2,12 @@
 
 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 if parents_ids.instance_of? Atome
   parents_ids = [parents_ids] unless parents_ids.instance_of?(Array)
   parents_ids.each do |parents_id|
-    parents_id = parents_id if parents_id.instance_of? Atome
+    # parents_id = parents_id if parents_id.instance_of? Atome
     parents_found = grab(parents_id)
     # TODO : factorise the code below
     current_type = atome[:type]
@@ -30,11 +30,11 @@ end
 
 new({ particle: :attached })
 new({ sanitizer: :attached }) do |children_ids|
-  puts "=> attached now! : #{children_ids}<="
-  children_ids = children_ids if children_ids.instance_of? Atome
+  # 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|
-    child_id = child_id if child_id.instance_of? Atome
+    # child_id = child_id if child_id.instance_of? Atome
     child_found = grab(child_id)
     parents_found = @atome[:id]
     # TODO : factorise the code below
@@ -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
@@ -50,10 +50,15 @@ new({ particle: :remove_classes }) do |value|
   # Universe.classes.delete(value)
   Universe.classes[value].delete(id)
 end
-new ({particle: :opacity})
-
+new ({ particle: :opacity })
 
 # vector shape
-new({particle: :definition})
+new({ particle: :definition })
+
+new({ browser: :definition, type: :string })
 
-new({ browser: :definition, type: :string })
+new({ sanitizer: :definition }) do |params|
+  # we remove the unwanted svg tags
+  params = params.gsub(/<svg[^>]*>|<\/svg>/, '')
+  params
+end

data/lib/atome/genesis/sparkle.rb

@@ -60,6 +60,11 @@ Atome.new(
              red: 0.5, green: 0.5, blue: 0.5, alpha: 1 } }
 )
 
+Atome.new(
+  { color: { renderers: default_render, id: :invisible_color, type: :color,tag: ({persistent: true}),
+             red: 0, green: 0, blue: 0, alpha: 1 } }
+)
+
 Atome.new(
   { color: { renderers: default_render, id: :text_color, type: :color,tag: ({persistent: true}),
              red: 0.3, green: 0.3, blue: 0.3, alpha: 1 } }

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

@@ -9,41 +9,72 @@ def parents(_val) end
 generator = Genesis.generator
 
 generator.build_render(:browser_shape) do
-  if @definition
-    alert :poil
-  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]
-  end
+  # 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]
+  # 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})}</style>")
-  # # TODO/ use the code below to modify the style tag
+  ########################### 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} {
+  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});
+}
+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]
@@ -54,12 +85,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,30 +15,40 @@ module BrowserHelper
     html_object.append_to(browser_document[parents])
   end
 
+  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
+    # 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';
+    // 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_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
-      color_value = content_style[/background-color:\s*([^;}]+)/, 1]
-      `
-        let parser = new DOMParser();
-var divElement = document.querySelector('#'+#{parents});
-// select the first svg tag inside the div
-let foundSVG  = divElement.querySelector('svg');
- let elements = foundSVG.getElementsByTagName("path");
-Array.from(elements).forEach(el => {
-            el.setAttribute("fill", #{color_value});
-            el.setAttribute("stroke", #{color_value});
-        });
-`
+      # 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)
@@ -50,7 +60,33 @@ Array.from(elements).forEach(el => {
   end
 
   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]
+        # 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
+        #            color_value = content_style[/background-color:\s*([^;}]+)/, 1]
+        #            `
+        #         let parser = new DOMParser();
+        # var divElement = document.querySelector('#'+#{atome[:id]});
+        # // select the first svg tag inside the div
+        # let foundSVG  = divElement.querySelector('svg');
+        #  let elements = foundSVG.getElementsByTagName("path");
+        # Array.from(elements).forEach(el => {
+        #             el.setAttribute("fill", #{color_value});
+        #             el.setAttribute("stroke", #{color_value});
+        #         });
+        # `
+      end
 
+    else
+      # alert "class added : #{children}"
+      # browser_document[atome[:id]].add_class(children)
+    end
     browser_document[atome[:id]].add_class(children)
   end
 

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

@@ -3,16 +3,63 @@
 # for browser rendering
 module BrowserHelper
   def self.browser_colorize_color(color_updated, atome)
-    `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.backgroundColor = #{color_updated}`
+    ########################### new code ###########################
+    id_found=atome[:id]
+    new_class_content = <<STR
+.#{id_found} {
+  background-color: #{color_updated};
+  fill: #{color_updated};
+  stroke: #{color_updated};
+}
+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)
+    "new shadow color is : #{color_updated}"
+    puts "=====> #{color_updated} : #{atome}"
     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} {
+  box-shadow: #{left}px #{top}px #{blur}px #{color_updated} #{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,23 +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_family) do |parents_found|
-#   BrowserHelper.send("browser_attach_#{@browser_type}", parents_found, @browser_object, @atome)
-# end
-
 generator.build_render(:browser_attach) do |parents_found|
   # puts "parents_found : #{parents_found}, #{parents_found.class}"
   parents_found.each do |parent_found|
@@ -29,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
@@ -41,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

@@ -15,7 +15,6 @@ end
 
 generator.build_render(:green) do |value|
   # we return self to allow syntax of the type : a.color(:black).red(1).green(0.3)
-  self
   red = @atome[:red] * 255
   green = (@atome[:green] = value) * 255
   blue = @atome[:blue] * 255
@@ -49,11 +48,6 @@ generator.build_render(:alpha) do |value|
 end
 
 generator.build_render(:visual) do |value|
-  # value = if value[:size].instance_of?(String)
-  #           value[:size]
-  #         else
-  #           "#{value[:size]}px"
-  #         end
   value = BrowserHelper.value_parse(value[:size])
   browser_object.style['font-size'] = value
 end
@@ -99,7 +93,8 @@ new ({ browser: :definition }) do |value|
   `
 
 var divElement =  document.querySelector('#'+#{target});;
-
+divElement.style.removeProperty('background-color');
+divElement.style.backgroundColor = 'transparent';
 // select the first svg tag inside the div
 var svgElement = divElement.querySelector('svg');
 
@@ -111,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];
@@ -121,4 +118,4 @@ if (svgElement) {
         svgContainer.appendChild(importedSVG);
 
 `
-end
+end

data/lib/atome/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 class Atome
-  VERSION = '0.5.4.1.2'
+  VERSION = '0.5.4.1.7'
 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

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

@@ -5,29 +5,35 @@
 #              left: 0, right: 0, top: 0, bottom: 0, width: 30, height: 30, overflow: :hidden, tag: {system: false}
 #   } })
 
-b=vector
-
+b=box({left: 300})
+b.drag(true)
 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
-b.definition(edition)
+v=b.vector({left: 0, top: 0})
+
+v.definition(edition)
 wait 1 do
-  b.color(:yellow)
+  v.color(:yellow)
 end
 copy = <<~STR
+    <svg class="svg-icon" 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">
       <path id="p1" d="M672 832 224 832c-52.928 0-96-43.072-96-96L128 160c0-52.928 43.072-96 96-96l448 0c52.928 0 96 43.072 96 96l0 576C768 788.928 724.928 832 672 832zM224 128C206.368 128 192 142.368 192 160l0 576c0 17.664 14.368 32 32 32l448 0c17.664 0 32-14.336 32-32L704 160c0-17.632-14.336-32-32-32L224 128z"/>
       <path id="p2" d="M800 960 320 960c-17.664 0-32-14.304-32-32s14.336-32 32-32l480 0c17.664 0 32-14.336 32-32L832 256c0-17.664 14.304-32 32-32s32 14.336 32 32l0 608C896 916.928 852.928 960 800 960z"/>
       <path id="p3" d="M544 320 288 320c-17.664 0-32-14.336-32-32s14.336-32 32-32l256 0c17.696 0 32 14.336 32 32S561.696 320 544 320z"/>
       <path id="p4" d="M608 480 288.032 480c-17.664 0-32-14.336-32-32s14.336-32 32-32L608 416c17.696 0 32 14.336 32 32S625.696 480 608 480z"/>
       <path id="p5" d="M608 640 288 640c-17.664 0-32-14.304-32-32s14.336-32 32-32l320 0c17.696 0 32 14.304 32 32S625.696 640 608 640z"/>
+    </svg>
 STR
 
 
 wait 2 do
-  b.definition(copy)
+  v.definition(copy)
 end
 
 wait 3 do
-  b.color(:orange)
-  b.width(33)
+  v.color(:orange)
+  v.width(33)
+  v.height(33)
 end

metadata

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