atome 0.5.5.8.1 → 0.5.5.8.5

data/lib/renderers/html/html.rb

@@ -4,6 +4,23 @@
 
 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 +55,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 +103,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 +138,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 +311,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 +324,7 @@ class HTML
     JS.global[:document][:body].appendChild(@element)
     add_class('atome')
     self.id(id)
+
     self
   end
 
@@ -351,8 +370,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 +382,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 +438,7 @@ class HTML
         .gsub('&', "\&")
         .gsub('<', "\<")
         .gsub('>', "\>")
-        .gsub('"', "\"")
+        .gsub('"', '"')
         .gsub("'", "\'")
   end
 
@@ -1099,7 +1118,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 +1126,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 +1170,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 +1178,268 @@ 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
 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/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].call(: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].call(: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].call(: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/compute.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+
+c = circle({ height: 400, width: 200, top: 100, left:99, top: 79 })
+b = c.box({ width: 200, height: 100, left: 280, top: 190, id: :my_box })
+i= image(:red_planet)
+c.touch(true) do
+  c.fit({ value: 100, axis: :x })
+end
+
+puts '------'
+puts "b.compute  left return the position on the screen of the item : #{b.compute({reference: c.id, particle: :left, unit: :pixel})}"
+puts "b.compute left : #{b.compute({ particle: :left })[:value]}, c left : #{b.left}"
+puts "b.compute top :#{b.compute({ particle: :top })[:value]}, c top: #{b.top}"
+alert "i.compute width :#{i.compute({ particle: :width })[:value]}, i width: #{i.width}"
+alert "i.compute height :#{i.compute({ particle: :height })[:value]}, i height: #{i.height}"

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+
+c = circle({ height: 400, width: 200, top: 100, left: 0, top: 100 , id: :the_circle})
+b = c.box({ width: 200, height: 100, left: 600, top: 200, id: :my_box })
+c.circle({ width: 200, height: 100, left: 120, top: -80, id: :my_text, data: :hi })
+b.circle({ color: :yellow, width: 55, height: 88, left: 100 })
+b.box
+
+
+atome_founds = c.dig
+puts "dig allow to retrieve all attached atomes recursively,
+it return a table of ID including the ID of the parent (here : :the_circle) :\n#{atome_founds}"

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+c = circle({ height: 400, width: 200, top: 100, left: 0, top: 100 })
+b = c.box({ width: 200, height: 100, left: 600, top: 200, id: :my_box })
+c.circle({ width: 200, height: 100, left: 120, top: -80, id: :my_text, data: :hi })
+b.circle({ color: :yellow, width: 55, height: 88, left: 100 })
+b.box
+i=c.image({path: 'medias/images/red_planet.png', id: :the_pix })
+# b.text(:red_planet)
+
+wait 1 do
+
+  c.fit({ value: 100, axis: :x })
+
+  wait 1 do
+    c.fit({ value: 66, axis: :y })
+    wait 1 do
+      c.fit({ value: 600, axis: :x })
+    end
+  end
+end
+# alert i.width
+# alert i.height
+# i.fit({ value: 66, axis: :x })
+#  i.width(66)
+#  i.height(66)

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

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+
+c = circle({ height: 400, width: 200, top: 100, left: 0, top: 100 })
+
+puts "infos : #{c.infos}"
+puts "width : #{c.infos[:width]}"
+
+
+

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

@@ -12,10 +12,10 @@ shortcut(key: :b,  affect: :all) do |key, object_id|
 end
 text({data: "Key 'b'  on :all", top: 0})
 
-shortcut(key: :t, option: :meta,affect: [:my_circle, :red_box]) do |key, object_id|
+shortcut(key: :e, option: :meta,affect: [:my_circle, :red_box]) do |key, object_id|
   puts "Key #{key}  press on #{object_id}"
 end
-text({data: "Key 't' with Meta  on [:my_circle, :red_box]", top: 30, left: 0, position: :absolute})
+text({data: "Key 'e' with Meta  on [:my_circle, :red_box]", top: 30, left: 0, position: :absolute})
 
 
 shortcut(key: :j, option: :ctrl, affect: :all, exclude: [:my_circle, :my_box]) do |key, object_id|