atome 0.5.5.8.1 → 0.5.5.8.7

data/lib/renderers/html/html.rb

@@ -4,6 +4,22 @@
 
 class HTML
 
+  def self.locate(selector, base_element = JS.global[:document][:body])
+    return base_element if selector.empty?
+
+    if selector.has_key?(:id)
+      base_element.querySelector("##{selector[:id]}")
+    elsif selector.has_key?(:parent)
+      parent = base_element.querySelector("##{selector[:parent]}")
+      return nil if parent.nil?
+      parent.querySelectorAll("*").to_a
+    elsif selector.has_key?(:html)
+      html_element = selector[:html]
+      return nil if html_element.nil?
+      html_element.querySelectorAll("*").to_a
+    end
+  end
+
   def initialize(id_found, current_atome)
     @element ||= JS.global[:document].getElementById(id_found.to_s)
     @id = id_found
@@ -38,7 +54,7 @@ class HTML
       condition_strings << "(min-height: #{conditions[:min][:height]}px)" if conditions[:min][:height]
     end
 
-    operator = conditions[:operator] == :and ? "and" : "or"
+    operator = conditions[:operator] == :and ? 'and' : 'or'
 
     # Convert properties to apply
     property_strings = []
@@ -86,9 +102,9 @@ class HTML
       data[:apply][key] ||= {}
       properties.each do |property|
         prop, value = property.split(':').map(&:strip)
-        if prop == "background-color"
+        if prop == 'background-color'
           data[:apply][key][:color] = value.to_sym
-        elsif value[-2..] == "px"
+        elsif value[-2..] == 'px'
           data[:apply][key][prop.to_sym] = value.to_i
         else
           data[:apply][key][prop.to_sym] = value.to_sym
@@ -121,30 +137,30 @@ class HTML
 
     style_tags.each do |line|
       line = line.strip
-      next if line.empty? || line.start_with?("/*")
+      next if line.empty? || line.start_with?('/*')
 
       if inside_media
-        if line == "}"
-          hash_result["@media"] << media_hash
+        if line == '}'
+          hash_result['@media'] << media_hash
           inside_media = false
           next
         end
 
         selector, properties = line.split('{').map(&:strip)
-        next unless properties&.end_with?("}")
+        next unless properties&.end_with?('}')
 
         properties = properties[0...-1].strip
         media_hash[selector] = extract_properties(properties)
-      elsif line.start_with?("@media")
+      elsif line.start_with?('@media')
         media_content = line.match(/@media\s*\(([^)]+)\)\s*{/)
         next unless media_content
 
         media_query = media_content[1]
-        hash_result["@media"] = [media_query]
+        hash_result['@media'] = [media_query]
         inside_media = true
       else
         selector, properties = line.split('{').map(&:strip)
-        next unless properties&.end_with?("}")
+        next unless properties&.end_with?('}')
 
         properties = properties[0...-1].strip
         hash_result[selector] = extract_properties(properties)
@@ -294,6 +310,7 @@ class HTML
     style[:innerHTML] = "::selection { background-color: #{back_color_rgba}; color: #{text_color_rgba}; }"
     JS.global[:document][:head].appendChild(style)
     return unless @element[:innerText].to_s.length == 1
+
     @element[:innerHTML] = '&#8203;'
   end
 
@@ -306,6 +323,7 @@ class HTML
     JS.global[:document][:body].appendChild(@element)
     add_class('atome')
     self.id(id)
+
     self
   end
 
@@ -351,8 +369,8 @@ class HTML
     check_double(id)
     markup_found = @original_atome.markup || 'svg'
     @element_type = markup_found.to_s
-    svg_ns = "http://www.w3.org/2000/svg"
-    @element = JS.global[:document].createElementNS(svg_ns, "svg")
+    svg_ns = 'http://www.w3.org/2000/svg'
+    @element = JS.global[:document].createElementNS(svg_ns, 'svg')
     JS.global[:document][:body].appendChild(@element)
     @element.setAttribute('viewBox', '0 0 1024 1024')
     @element.setAttribute('version', '1.1')
@@ -363,7 +381,7 @@ class HTML
 
   def svg_data(data)
     data.each do |type_passed, datas|
-      svg_ns = "http://www.w3.org/2000/svg"
+      svg_ns = 'http://www.w3.org/2000/svg'
       new_path = JS.global[:document].createElementNS(svg_ns.to_s, type_passed.to_s)
       JS.global[:document][:body].appendChild(new_path)
       datas.each do |property, value|
@@ -419,7 +437,7 @@ class HTML
         .gsub('&', "\&")
         .gsub('<', "\<")
         .gsub('>', "\>")
-        .gsub('"', "\"")
+        .gsub('"', '"')
         .gsub("'", "\'")
   end
 
@@ -1099,7 +1117,7 @@ class HTML
     if Atome.host == 'tauri'
       JS.eval("readFile('#{id}','#{file}')")
     else
-      puts " work in progress"
+      puts ' work in progress'
     end
   end
 
@@ -1107,12 +1125,12 @@ class HTML
     if Atome.host == 'tauri'
       JS.eval("browseFile('#{id}','#{file}')")
     else
-      puts "work in progress"
+      puts 'work in progress'
     end
   end
 
   def handle_input
-    @original_atome.instance_variable_set("@data", @element[:innerText].to_s)
+    @original_atome.instance_variable_set('@data', @element[:innerText].to_s)
   end
 
   # this method update the data content of the atome
@@ -1151,7 +1169,7 @@ class HTML
     puts 'change for standard method : action'
     required_keys = [:from, :to, :duration]
     unless properties.is_a?(Hash) && (required_keys - properties.keys).empty?
-      raise ArgumentError, "Properties must be a hash with :from, :to, and :duration keys"
+      raise ArgumentError, 'Properties must be a hash with :from, :to, and :duration keys'
     end
 
     animate(properties)
@@ -1159,7 +1177,344 @@ class HTML
   end
 
   def stop_animation
-    JS.eval("if (window.currentAnimation) window.currentAnimation.stop();")
+    JS.eval('if (window.currentAnimation) window.currentAnimation.stop();')
+  end
+
+  # Table manipulation
+
+  def table(data)
+    table_html = JS.global[:document].createElement('table')
+    thead = JS.global[:document].createElement('thead')
+
+    max_length = data.max_by { |row| row.keys.length }.keys.length
+
+    if @original_atome.option[:header]
+      header_row = JS.global[:document].createElement('tr')
+
+      max_length.times do |i|
+        th = JS.global[:document].createElement('th')
+        th[:textContent] = data.map { |row| row.keys[i].to_s }.compact.first || ''
+        header_row.appendChild(th)
+      end
+
+      thead.appendChild(header_row)
+    end
+
+    table_html.appendChild(thead)
+    tbody = JS.global[:document].createElement('tbody')
+
+    data.each_with_index do |row, row_index|
+      tr = JS.global[:document].createElement('tr')
+
+      max_length.times do |cell_index|
+        td = JS.global[:document].createElement('td')
+        cell_size = set_td_style(td)
+        cell_height = cell_size[:cell_height]
+
+        cell_value = row.values[cell_index]
+        if cell_value.instance_of? Atome
+          cell_value.fit(cell_height)
+          html_element = JS.global[:document].getElementById(cell_value.id.to_s)
+          td.appendChild(html_element)
+          html_element[:style][:transformOrigin] = 'top left'
+          html_element[:style][:position] = 'relative'
+          cell_value.top(0)
+          cell_value.left(0)
+        else
+          td[:textContent] = cell_value.to_s
+        end
+        tr.appendChild(td)
+      end
+
+      tbody.appendChild(tr)
+    end
+    table_html.appendChild(tbody)
+    JS.global[:document].querySelector("##{@id}").appendChild(table_html)
+  end
+
+  def refresh_table(_params)
+    # first we need to extact all atome from the table or they will be deleted by the table refres
+    data = @original_atome.data
+    data.each do |row|
+      row.each do |k, v|
+        v.attach(:view) if v.instance_of? Atome
+      end
+    end
+    table_element = JS.global[:document].querySelector("##{@id} table")
+    if table_element.nil?
+      puts 'Table not found'
+      return
+    end
+    (table_element[:rows].to_a.length - 1).downto(1) do |i|
+      table_element.deleteRow(i)
+    end
+
+    max_cells = data.map { |row| row.keys.length }.max
+
+    data.each do |row|
+      new_row = table_element.insertRow(-1)
+      max_cells.times do |i|
+        key = row.keys[i]
+        value = row[key]
+        cell = new_row.insertCell(-1)
+        if value.instance_of? Atome
+          html_element = JS.global[:document].getElementById(value.id.to_s)
+          cell.appendChild(html_element)
+        else
+          cell[:textContent] = value.to_s
+        end
+        set_td_style(cell)
+      end
+    end
+  end
+
+  def set_td_style(td)
+    cell_height = 50
+    td[:style][:border] = '1px solid black'
+    td[:style][:backgroundColor] = 'white'
+    td[:style][:boxShadow] = '10px 10px 5px #888888'
+    td[:style][:width] = "#{cell_height}px"
+    td[:style]['min-width'] = "#{cell_height}px"
+    td[:style]['max-width'] = "#{cell_height}px"
+    td[:style]['min-height'] = "#{cell_height}px"
+    td[:style]['max-height'] = "#{cell_height}px"
+    td[:style][:height] = "#{cell_height}px"
+    td[:style][:overflow] = 'hidden'
+    { cell_height: cell_height, cell_width: cell_height }
+  end
+
+  def insert_cell(params)
+    row_index, cell_index = params[:cell]
+    new_content = params[:content]
+    container = JS.global[:document].getElementById(@id.to_s)
+
+    table = container.querySelector('table')
+    if table.nil?
+      puts 'No table found in the container'
+      return
+    end
+
+    row = table.querySelectorAll('tr')[row_index]
+    if row.nil?
+      puts "Row at index #{row_index} not found"
+      return
+    end
+
+    cell = row.querySelectorAll('td')[cell_index]
+    if cell.nil?
+      puts "Cell at index #{cell_index} in row #{row_index} not found"
+      return
+    end
+
+    if new_content.instance_of? Atome
+      cell.innerHTML = ''
+      html_element = JS.global[:document].getElementById(new_content.id.to_s)
+      cell.appendChild(html_element)
+    else
+      cell[:textContent] = new_content.to_s
+    end
+  end
+
+  def insert_row(params)
+    insert_at_index = params[:row]
+    table_element = JS.global[:document].querySelector("##{@id} table")
+
+    if table_element.nil?
+      puts 'Tableau non trouvé'
+      return
+    end
+
+    tbody = table_element.querySelector('tbody')
+
+    header_row = table_element.querySelector('thead tr')
+    column_count = header_row ? header_row.querySelectorAll('th').to_a.length : 0
+
+    new_row = JS.global[:document].createElement('tr')
+    column_count.times do |cell_index|
+      td = JS.global[:document].createElement('td')
+      set_td_style(td)
+      new_row.appendChild(td)
+    end
+
+    if insert_at_index.zero?
+      tbody.insertBefore(new_row, tbody.firstChild)
+    else
+      reference_row = tbody.querySelectorAll('tr').to_a[insert_at_index]
+      tbody.insertBefore(new_row, reference_row)
+    end
+
+  end
+
+  def insert_column(params)
+    insert_at_index = params[:column]
+    table_element = JS.global[:document].querySelector("##{@id} table")
+    if table_element.nil?
+      puts 'Table not found'
+      return
+    end
+    rows = table_element.querySelectorAll('tr').to_a
+    rows.each_with_index do |row, index|
+      if index == 0
+        # case1
+      else
+        new_cell = JS.global[:document].createElement('td')
+        new_cell[:innerText] = ''
+        set_td_style(new_cell)
+        if insert_at_index.zero?
+          row.insertBefore(new_cell, row.firstChild)
+        else
+          child_nodes = row.querySelectorAll('td').to_a
+
+          if insert_at_index < child_nodes.length
+            reference_cell = child_nodes[insert_at_index]
+            row.insertBefore(new_cell, reference_cell)
+          else
+            row.appendChild(new_cell)
+          end
+        end
+      end
+
+    end
+
+  end
+
+  def table_insert(params)
+    if params[:cell]
+      insert_cell(params)
+    elsif params[:row]
+      insert_row(params)
+    elsif params[:column]
+      insert_column(params)
+    end
+
+  end
+
+  def table_remove(params)
+    if params[:row]
+      row_index = params[:row]
+      table_element = JS.global[:document].querySelector("##{@id} table")
+
+      if table_element.nil?
+        puts 'Table not found'
+        return
+      end
+
+      rows = table_element.querySelectorAll('tbody tr').to_a
+
+      if row_index >= rows.length
+        puts "row not found : #{row_index}"
+        return
+      end
+      row_to_remove = rows[row_index]
+
+      row_to_remove[:parentNode].removeChild(row_to_remove)
+
+      rows.each_with_index do |row, i|
+        next if i <= row_index
+      end
+    elsif params[:column]
+      column_index = params[:column]
+      table_element = JS.global[:document].querySelector("##{@id} table")
+
+      if table_element.nil?
+        puts 'Table not found'
+        return
+      end
+
+      rows = table_element.querySelectorAll('tbody tr').to_a
+      rows.each do |row|
+        cells = row.querySelectorAll('td').to_a
+        if column_index < cells.length
+          cell_to_remove = cells[column_index]
+          cell_to_remove[:parentNode].removeChild(cell_to_remove)
+        end
+      end
+
+    end
+  end
+
+  # atomisation!
+  def atomized(html_object)
+    html_object = html_object[0] if html_object.instance_of? Array
+    @element = html_object
+  end
+
+
+  # def center(options, attach)
+  #   parent = grab(attach)
+  #
+  #   # Centre sur l'axe X
+  #   if options[:x]
+  #     x_position = calculate_position(options[:x], parent.to_px(:width), @original_atome.to_px(:width))
+  #     @original_atome.left(x_position)
+  #   end
+  #
+  #   # Centre sur l'axe Y
+  #   if options[:y]
+  #     y_position = calculate_position(options[:y], parent.to_px(:height), @original_atome.to_px(:height))
+  #     @original_atome.top(y_position)
+  #   end
+  # end
+  #
+  # # Méthode auxiliaire pour calculer la position
+  # def calculate_position(option, parent_dimension, self_dimension)
+  #   if option.is_a?(String) && option.end_with?('%')
+  #     percent = option.chop.to_f / 100.0
+  #     (parent_dimension - self_dimension) * percent
+  #   elsif option == 0
+  #     # Cas spécial pour centrer l'objet
+  #     (parent_dimension - self_dimension) / 2.0
+  #   else
+  #     option
+  #   end
+  # end
+
+  def center(options, attach)
+    @center_options = options
+    @parent = grab(attach)
+
+    # Appliquer le centrage initial
+    apply_centering(@center_options, @parent)
+
+    # Si l'option dynamique est activée, ajouter un écouteur d'événements
+    if @center_options[:dynamic]
+      event_handler = ->(event) do
+        apply_centering(@center_options, @parent)
+      end
+      JS.global[:window].addEventListener('resize', event_handler)
+    end
+  end
+
+  private
+
+  # Méthode auxiliaire pour appliquer le centrage
+  def apply_centering(options, parent)
+    # Centre sur l'axe X
+    if options[:x]
+      x_position = calculate_position(options[:x], parent.to_px(:width), @original_atome.to_px(:width))
+      @original_atome.left(x_position)
+    end
+
+    # Centre sur l'axe Y
+    if options[:y]
+      y_position = calculate_position(options[:y], parent.to_px(:height), @original_atome.to_px(:height))
+      @original_atome.top(y_position)
+    end
+  end
+
+  # Méthode auxiliaire pour calculer la position
+  def calculate_position(option, parent_dimension, self_dimension)
+    if option.is_a?(String) && option.end_with?('%')
+      percent = option.chop.to_f / 100.0
+      (parent_dimension - self_dimension) * percent
+    elsif option == 0
+      # Cas spécial pour centrer l'objet
+      (parent_dimension - self_dimension) / 2.0
+    else
+      option
+    end
   end
 
 end
+
+

data/lib/renderers/html/identity.rb

@@ -82,3 +82,11 @@ new({ renderer: :html, method: :category, type: :symbol }) do |category_names|
     html.add_class(category_name)
   end
 end
+
+new({ method: :data, type: :string, specific: :matrix, renderer: :html }) do |value, _user_proc|
+  html.table(value)
+end
+
+new({ method: :type, type: :hash, specific: :atomized, renderer: :html }) do |value, _user_proc|
+  html.atomized(alien)
+end

data/lib/renderers/html/material.rb

@@ -51,3 +51,17 @@ new({ method: :remove, renderer: :html, type: :string }) do |object_id_to_remove
     end
   end
 end
+
+
+new({ method: :border, type: :hash, renderer: :html }) do |value, _user_proc|
+  thickness = value[:thickness] || 5
+  type = value[:pattern] || :solid
+  color = if value[:color]
+            color_found = value[:color]
+            "#{color_found.red * 255},#{color_found.green * 255},#{color_found.blue * 255},#{color_found.alpha} "
+          else
+            "0,0,0,1"
+          end
+
+  html.style(:border, "#{type} #{thickness}px rgba(#{color})")
+end

data/lib/renderers/html/property.rb

@@ -35,4 +35,25 @@ new({ method: :border, type: :hash, renderer: :html }) do |value, _user_proc|
           end
 
   html.style(:border, "#{type} #{thickness}px rgba(#{color})")
+end
+
+new({ method: :clean, renderer: :html, type: :hash }) do |params|
+  html.table_clean(params)
+end
+
+new({ method: :insert, renderer: :html, type: :hash }) do |params|
+  html.table_insert(params)
+end
+
+
+
+new({ method: :remove, renderer: :html, type: :hash }) do |params|
+  html.table_remove(params)
+end
+
+
+
+
+new({ method: :sort, renderer: :html, type: :hash }) do |params|
+  html.refresh_table(params)
 end

data/lib/renderers/html/spatial.rb

@@ -64,4 +64,8 @@ end
 
 new({ method: :display, renderer: :html }) do |params|
   html.style(:display, params)
-end
+end
+
+new({renderer: :html, method: :center}) do |params|
+  html.center(params, attach)
+end

data/lib/renderers/html/utility.rb

@@ -84,7 +84,31 @@ new({ renderer: :html, method: :import, type: :blob }) do |_params, bloc|
 end
 
 
-new({ renderer: :html, method: :selected, specific: :text  }) do |value, &bloc|
+new({ renderer: :html, method: :selected, specific: :text }) do |value, &bloc|
   html.select_text(value)
 end
 
+new({ method: :compute, type: :hash, renderer: :html }) do |params|
+  element = JS.global[:document].getElementById(@id.to_s)
+  bounding_box = element.getBoundingClientRect()
+
+  top = bounding_box[:top]
+  left = bounding_box[:left]
+  width = bounding_box[:width]
+  height = bounding_box[:height]
+  value_found = case params[:particle]
+                when :left
+                  left.to_f
+                when :top
+                  top.to_f
+                when :width
+                  width.to_f
+                when :height
+                  height.to_f
+                else
+                  nil
+                end
+  @compute[:value] = value_found
+end
+
+

data/vendor/assets/application/examples/atomizer.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+# dummies html objects :
+
+#object 1
+div_rouge = JS.global[:document].createElement( "div")
+
+div_rouge[:style][:backgroundColor] = "red"
+div_rouge[:style][:width] = "100px"
+div_rouge[:style][:height] = "100px"
+div_rouge.setAttribute('id', "my_div")
+div_view = JS.global[:document].getElementById('view')
+div_view.appendChild(div_rouge)
+
+
+#object 2
+span_bleu =  JS.global[:document].createElement( "span")
+span_bleu[:style][:backgroundColor] = "blue"
+span_bleu[:innerHTML] = "blue"
+span_bleu[:style][:width] = "10px"
+span_bleu[:style][:height] = "8px"
+div_rouge.appendChild(span_bleu)
+
+
+#object 2
+span_white =  JS.global[:document].createElement( "h1")
+span_white[:style][:color] = "white"
+span_white[:innerHTML] = "Hello"
+span_white[:style][:width] = "10px"
+span_white[:style][:height] = "80px"
+span_white[:style][:top] = "80px"
+span_bleu.appendChild(span_white)
+
+
+#   usage example
+#   div_result =  HTML.locate(id: 'my_div') # Recherche par ID
+#   alert "id found : #{div_result[:id]}" if div_result
+
+# first_result =  HTML.locate(parent: :view)[1]
+# result_found =  HTML.locate(html: first_result)
+# alert result_found[0][:tagName]
+
+# if span_result
+#   span_result.to_a.each do |child|
+#     alert "child found: #{child[:tagName]}"
+#   end
+#   enfants = span_result.to_a.map do |child|
+#     "tag: #{child[:tagName]}, ID: #{child[:id] || 'non défini'}"
+#   end
+#   alert "children found : #{enfants.join(', ')}"
+# end
+
+
+wait 1 do
+  div_result =  HTML.locate(parent: :view)[0]
+  atomized_el= atomizer({ target: div_result, id: :my_html_obj })
+  atomized_el.color(:pink)
+  atomized_el.position(:absolute)
+  atomized_el.left(66)
+  atomized_el.top(99)
+end
+
+
+wait 2 do
+  div_result = HTML.locate(id: 'my_div') # find by ID
+
+  atomized_el= atomizer({ target: div_result, id: :my_second_html_obj })
+  atomized_el.rotate(55)
+  atomized_el.color(:purple)
+  # atomized_el.display(:block)
+  atomized_el.position(:absolute)
+  atomized_el.left(255)
+  atomized_el.top(255)
+end
+
+
+wait 3 do
+  first_result =  HTML.locate(parent: :view)[1]
+  result_found =  HTML.locate(html: first_result) # Attention  HTML.locate always return an array you have to chose
+  new_atomized_el= atomizer({ target: result_found, id: :my_third_html_obj })
+  new_atomized_el.display(:block)
+  new_atomized_el.position(:absolute)
+  new_atomized_el.rotate(12)
+end
+
+

data/vendor/assets/application/examples/center.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+b= box()
+
+
+# b.center({ x: '10%', y: '20%' })
+b.center({ x: 0, y: 0, dynamic: true })
+# b.center({ x: true, y: true })