atome 0.5.4.1.9 → 0.5.5.6.4

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

@@ -0,0 +1,227 @@
+# frozen_string_literal: true
+
+# class HTML
+#
+#   def layout_style(option = {})
+#     element_style = {
+#       backgroundColor: 'rebeccapurple',
+#       width: '100%',remove_layout
+#       height: '29px',
+#       borderRadius: '59px',
+#       display: 'flex',
+#       justifyContent: 'center',
+#       alignItems: 'center',
+#       flexDirection: 'column',
+#       marginBottom: '20px',
+#       padding: '0px',
+#       # transform: 'rotate(22deg)',
+#
+#     }
+#
+#     container_style = {
+#       display: :grid,
+#       gridTemplateColumns: 'repeat(4, 1fr)',
+#       overflow: :scroll,
+#       flexDirection: 'column',
+#       gap: '20px',
+#       padding: '0px',
+#
+#     }
+#     element_style = element_style.merge(option[:element]) if option[:element]
+#     container_style = container_style.merge(option[:container]) if option[:container]
+#     @layout_style = { element: element_style, container: container_style }
+#   end
+#
+#   def remove_webview_layout(element, container)
+#     element[:classList].add('atome')
+#     element[:classList].remove('matrix_element')
+#   end
+#
+#   def layout(params)
+#
+#     id_found = params[:id]
+#     mode_found = params[:mode]
+#     width_found = params[:width]
+#     height_found = params[:height]
+#     layout_container = JS.global[:document].getElementById(id_found.to_s)
+#     layout_elements = JS.global[:document].querySelectorAll(".#{id_found}")
+#     if mode_found == :default
+#       # we revert all elements to default state / layout
+#       layout_elements.to_a.each do |element|
+#         element[:classList].remove('matrix_element')
+#         element[:classList].add('atome')
+#       end
+#     else
+#       # we apply new layout to  elements
+#       layout_style({ element: { backgroundColor: :purple } })
+#       layout_container[:classList].remove('atome')
+#       layout_container[:classList].add('matrix')
+#       layout_elements.to_a.each do |element|
+#         # we check if current state is default if yes we store the layout to be able to restore it
+#         element[:style][:borderRadius] = '59px'
+#         element[:classList].remove('atome')
+#         # element[:classList].add('matrix_element')
+#       end
+#     end
+#
+#   end
+# end
+
+class Atome
+  def remove_layout
+    display[:mode] = :default
+    # we get the current parent (the previous layout)
+    parent_found = grab(attach)
+    # we get the parent of the parent
+    grand_parent = parent_found.attach
+    # and attach the item to the grand parent
+    # we remove the parent category and restore atome category
+    remove({ category: attach})
+    category(:atome)
+    attach(grand_parent)
+    #  we delete the parent (the layout) if it no more children attached
+    if parent_found.attached.length == 0
+      parent_found.delete(true)
+    end
+  end
+end
+
+new({ particle: :layout }) do |params|
+  mode_found = params.delete(:mode) || :list
+  elements_style= params.delete(:element) || {}
+  # layout_width = params[:width] ||= 333
+  # layout_height = params[:height] ||= 333
+  # now we get the list of the atome to layout
+  atomes_to_layout = []
+  if type == :group
+    atomes_to_layout = collect
+  end
+  # if params[:list] is specified group collection is override
+  atomes_to_layout = params[:list] if params[:list]
+
+  if mode_found == :default
+    # the user want to revert the layout to the default
+    atomes_to_layout.each do |atome_id_to_layout|
+      atome_to_layout = grab(atome_id_to_layout)
+      unless params[:id]
+        params[:id] = atome_to_layout.display[:layout]
+      end
+      # now we get the default particles and restore it
+      atome_to_layout.display[:default].each do |particle, value|
+        atome_to_layout.send(:delete,particle)
+        atome_to_layout.send(particle,value)
+      end
+
+      atome_to_layout.remove_layout
+    end
+  else
+    if params[:id]
+      container_name = params[:id]
+      container = grab(:view).box({ id: container_name })
+      container_class = container_name
+    else
+      container = grab(:view).box
+      id_found = container.id
+      params[:id] = id_found
+      container_class = id_found
+    end
+    # container.width = layout_width
+    # container.height = layout_height
+    container.remove({ category: :atome})
+    container.category(:matrix)
+    alert ">> #{mode_found}"
+    params.each do |particle, value|
+      container.send(particle, value)
+    end
+    # now we add user wanted particles
+    alert params
+
+    atomes_to_layout.each do |atome_id_to_layout|
+      atome_to_layout = grab(atome_id_to_layout)
+      # we remove previous display mode
+      atome_to_layout.remove_layout
+      atome_to_layout.display[:mode] = mode_found
+      atome_to_layout.display[:layout] = id_found
+      atome_to_layout.attach(container_class)
+      atome_to_layout.remove({ category: :atome})
+      atome_to_layout.category(container_class)
+      #the hash below is used to restore element state
+      original_state={}
+      elements_style.each do |particle, value|
+        # we have to store all elements particle to restore it later
+        original_state[particle]=atome_to_layout.send(particle)
+        atome_to_layout.send(particle, value)
+      end
+      atome_to_layout.display[:default]=original_state
+      # puts "display is : #{atome_to_layout.display}"
+      # atome_to_layout.html.add_class(container_class)
+      # puts container_class
+    end
+  end
+  params
+end
+
+# new({ renderer: :html, method: :layout, type: :hash }) do |params, _user_proc|
+#   html.layout(params)
+# end
+
+new({ particle: :display })
+
+# system
+Atome.new({ renderers: [:html], id: :selector, collect: [], type: :group, tag: { system: true } })
+
+############### tests
+
+b = box({ color: :red, id: :the_box, left: 3 })
+16.times do |index|
+  width_found = b.width
+  b.duplicate({ left: b.left + index * (width_found + 45), top: 0, category: :custom_category })
+end
+
+grab(:view).attached.each do |atome_found|
+  grab(atome_found).selected(true)
+end
+grab(:the_box_copy_1).text(:hello)
+#################
+selected_items = grab(Universe.current_user).selection # we create a group
+# we collect all atomes in the view
+atomes_found = []
+selected_items.each do |atome_found|
+  atomes_found << atome_found
+end
+
+random_found = atomes_found.sample(17)
+
+# random_found.each do |atome_id|
+#   atome_found = grab(atome_id)
+#   if atome_found.type == :shape
+#     atome_found.left(rand(700))
+#     atome_found.width(rand(120))
+#     atome_found.height(rand(120))
+#     atome_found.smooth(rand(120))
+#     atome_found.color({ red: rand, green: rand, blue: rand })
+#   end
+# end
+wait 1 do
+  selected_items.layout({ mode: :grid, width: 900, height: 500, color: :green,element: {height: 22, rotate: 22} })
+  # alert grab('the_box_copy_4').display
+  wait 1 do
+    # selected_items.layout({ mode: :grid, width: 800, height: 500 })
+    wait 1 do
+      selected_items.layout({ mode: :default, width: 500, height: 500 })
+      # alert grab('the_box_copy_4').display
+      wait 1 do
+        selected_items.layout({ id: :my_layout, mode: :list, width: 151, height: 800, overflow: :scroll })
+        wait 1 do
+          selected_items.layout({ mode: :default, width: 500, height: 500 })
+        end
+      end
+    end
+  end
+end
+
+# JS.global[:console].clear()
+
+
+# b=box
+# alert ">> #{b.display}"

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

@@ -0,0 +1,10 @@
+#  frozen_string_literal: true
+
+puts "current user: #{Universe.current_user}"
+human({ id: :jeezs, login: true })
+
+puts "current user: #{Universe.current_user}"
+wait 2 do
+  human({ id: :toto, login: true })
+  puts "current user: #{Universe.current_user}"
+end

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

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+# For now markup can only be specified at creation time, it will be possible later
+the_one = text({ data: :hello, markup: :h1 })

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

@@ -0,0 +1,115 @@
+#  frozen_string_literal: true
+
+# def add_css_to_atomic_style(css)
+#   style_element = JS.global[:document].getElementById('atomic_style')
+#   text_node = JS.global[:document].createTextNode(css)
+#   style_element.appendChild(text_node)
+# end
+#
+# def convert_to_css(data)
+#   conditions = data[:condition]
+#   apply = data[:alterations]
+#
+#   # Convert the conditions
+#   condition_strings = []
+#
+#   if conditions[:max]
+#     condition_strings << "(max-width: #{conditions[:max][:width]}px)" if conditions[:max][:width]
+#     condition_strings << "(max-height: #{conditions[:max][:height]}px)" if conditions[:max][:height]
+#   end
+#
+#   if conditions[:min]
+#     condition_strings << "(min-width: #{conditions[:min][:width]}px)" if conditions[:min][:width]
+#     condition_strings << "(min-height: #{conditions[:min][:height]}px)" if conditions[:min][:height]
+#   end
+#
+#   operator = conditions[:operator] == :and ? "and" : "or"
+#
+#   # Convert properties to apply
+#   property_strings = []
+#   apply.each do |key, values|
+#     inner_properties = []
+#     values.each do |property, value|
+#       if property == :color
+#         inner_properties << "background-color: #{value} !important;"
+#       else
+#         inner_properties << "#{property}: #{value}px !important;" if value.is_a?(Integer)
+#         inner_properties << "#{property}: #{value} !important;" if value.is_a?(Symbol)
+#       end
+#     end
+#     # Prefix each key with "#"
+#     property_strings << "##{key} {\n#{inner_properties.join("\n")}\n}"
+#   end
+#
+#   # let it build
+#   css = "@media #{condition_strings.join(" #{operator} ")} {\n#{property_strings.join("\n")}\n}"
+#   add_css_to_atomic_style(css)
+#   css
+# end
+#
+# def css_to_data(css)
+#   data = {
+#     :condition => {},
+#     :apply => {}
+#   }
+#   # Extract conditions
+#   media_conditions = css.match(/@media ([^\{]+)/)[1].split(',').map(&:strip)
+#   media_conditions.each do |condition|
+#     type = condition.match(/(max|min)-/)[1].to_sym
+#     property = condition.match(/(width|height)/)[1].to_sym
+#     value = condition.match(/(\d+)/)[1].to_i
+#
+#     data[:condition][type] ||= {}
+#     data[:condition][type][property] = value
+#   end
+#
+#   # Extract properties to be applied
+#   css.scan(/(\w+) \{([^\}]+)\}/).each do |match|
+#     key = match[0].to_sym
+#     properties = match[1].split(';').map(&:strip).reject(&:empty?)
+#
+#     data[:apply][key] ||= {}
+#     properties.each do |property|
+#       prop, value = property.split(':').map(&:strip)
+#       if prop == "background-color"
+#         data[:apply][key][:color] = value.to_sym
+#       elsif value[-2..] == "px"
+#         data[:apply][key][prop.to_sym] = value.to_i
+#       else
+#         data[:apply][key][prop.to_sym] = value.to_sym
+#       end
+#     end
+#   end
+#
+#   data
+# end
+
+
+
+box({ color: :red, width: :auto, left: 120, right: 120, id: :box_1 })
+circle({ left: 33, top: 200, id: :circle_1 })
+circle({ left: 200, top: 200, id: :circle_2 })
+circle({ left: 400, top: 200, id: :circle_3 })
+circle({ left: 600, top: 200, id: :circle_4 })
+text({ data: "resize the window to it's minimum to activate response", id: :my_text })
+
+A.match({condition:{max: {width: 777}, min: {height: 333}, operator: :and }})  do
+{
+  circle_1: { color: :red , width: 23},
+  circle_2: { color: :orange , width: 23, top: 12},
+  box_1: { width: 123, left: 222, color: :blue, rotate: 22}
+}
+end
+
+# match can work without any condition then the particles are always applied
+
+# A.match({}) do
+#   {
+#     circle_1: { color: :red, width: 23 },
+#     circle_2: { color: :orange, width: 23, top: 12 },
+#     box_1: { width: 123, left: 222, color: :blue, rotate: 22 }
+#   }
+# end
+
+
+

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+#
+b = box({ color: :red })
+
+b.touch(true) do
+  b.connection('localhost:9292') do |params|
+    alert " the connection is : #{params}"
+  end
+end
+
+c = box({ color: :yellow, left: 333 })
+
+c.touch(true) do
+  b.message('hi there!!')
+  # c = box({ color: :red, left: 333 })
+end

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

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+puts 'deprecated use clone monitoring'
+# b = box({ id: :the_box })
+# c = circle({ top: 3, id: :the_cirle })
+# A.monitor({ atomes: [:the_box, :the_cirle], particles: [:left] }) do |atome, particle, value|
+#   puts "changes : #{atome.id}, #{particle}, #{value}"
+# end
+#
+# wait 2 do
+#   b.left(3)
+#   wait 2 do
+#     c.left(444)
+#   end
+# end

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

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+# please note that whatever the atome resize will return the size of the view!
+view = grab(:view)
+view.on(:resize) do |event|
+  puts "view size is #{event}"
+end

data/vendor/assets/{src/medias/rubies/examples/get_renderer_list.rb → application/examples/online.rb}

@@ -1,3 +1,3 @@
 # frozen_string_literal: true
 
-puts Universe.renderer_list
+text online?

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

@@ -0,0 +1,29 @@
+#  frozen_string_literal: true
+
+b = box({ left: 666, color: :blue, smooth: 6, id: :the_box2 })
+b.over(true) do
+  b.color(:black)
+  # puts "I'm inside"
+end
+b.over(:enter) do
+  puts "in"
+  puts "enter"
+  b.width= b.width+30
+  # alert :in
+  b.color(:yellow)
+end
+b.over(:leave) do
+  b.height= b.height+10
+  puts "out"
+  puts "leave"
+  # alert :out
+  b.color(:orange)
+end
+
+#
+t=b.text('touch me to stop over leave')
+b.touch(true) do
+  b.over({ remove: :enter })
+  t.data('finished')
+end
+

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+c=circle({drag: true, id: :the_circle})
+
+c1=c.color(:white).id
+c2=c.color(:red).id
+c3=c.color(:yellow).id
+color({id: :toto, red: 1 , alpha: 0.5})
+wait 0.5 do
+  c.paint({ gradient: [c1,c2], direction: :left })
+  wait 0.5 do
+    c.paint({ gradient: [c1,c2, c3], direction: :left })
+    wait 0.5 do
+      c.paint({ gradient: [c1,c2], diffusion: :radial })
+      wait 0.5 do
+        c.paint({ gradient: [c1,c2, c3], diffusion: :conic })
+        wait 0.5 do
+          c.remove({all: :paint})
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+b = box({ left: 777 })
+puts "b ahas the following paticles : #{b.particles}"

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

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+bb=box({width: '90%'})
+puts bb.to_px(:width)

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

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+if Universe.internet
+  # v = video({ path: "medias/videos/avengers.mp4", id: :my_video })
+  v = video({ path: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" })
+else
+  v = video(:video_missing)
+end
+v.left(200)
+v.touch(true) do
+  alert v.play
+end
+
+t=text({id: :my_text, data: "play video"})
+
+t.touch(true) do
+  v.data=0
+  v.play(26) do |event|
+    t.data("event is : #{event}")
+    if event[:frame] ==  900 && v.data <3
+      puts v.data
+      v.data(v.data+1)
+      v.play(26)
+    end
+  end
+end
+
+c=circle({left: 123})
+
+c.touch(true) do
+  v.play(:pause)
+end
+
+cc=circle({left: 0, width: 55, height: 55})
+
+left=0
+cc.drag(:locked) do |event|
+  dx = event[:dx]
+  left += dx.to_f
+  min_left = 0
+  max_left = 600
+  left = [min_left, left].max
+  left = [left, max_left].min
+  v.html.currentTime(left/10)
+  cc.left(left)
+end
+
+
+puts "add lock x and y when drag"
+puts "restrict ro :view doesnt work"

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+
+# here how ti use preset in the atome framework
+# presets available are : render_engines,image,video,animation,element,box,vector,circle,shape,text,drm,shadow,color,www,raw,code,audio,group,human,machine,paint
+
+my_box=box
+# using the code line above a lot of particles will be implicitly created, if we inspect my_box
+puts my_box.inspect # this will print :
+#[Log] #<Atome: @broadcast={}, @callback={}, @tag={}, @attached=[], @unit={}, @collected={}, @id=:box_14, @type=:shape, @html=#<HTML:0x0662a164 @element=[object HTMLDivElement], @id="box_14", @original_atome=#<Atome: @broadcast={}, @callback={}, @tag={}, @attached=[], @unit={}, @collected={}, @id=:box_14, @type=:shape, @html=#<HTML:0x0662a164 ...>, @attach=[:view], @renderers=[:html], @width=99, @height=99, @apply=[:box_color], @left=100, @top=100, @clones=[], @preset={:box=>{:width=>99, :height=>99, :apply=>[:box_color], :left=>100, :top=>100, :clones=>[]}}>, @element_type="div">, @attach=[:view], @renderers=[:html], @width=99, @height=99, @apply=[:box_color], @left=100, @top=100, @clones=[], @preset={:box=>{:width=>99, :height=>99, :apply=>[:box_color], :left=>100, :top=>100, :clones=>[]}}> (browser.script.iife.min.js, line 13)
+
+# please note that an ID is automatically created using a simple strategy  id : atome_type_total_number_of_users_atomes  ex here :  @id="box_14"
+
+my_box.text("touch me")
+puts " my_box preset is : #{my_box.preset}"
+# print in the console : [Log]  my_box preset is : {:box=>{:width=>99, :height=>99, :apply=>[:box_color], :left=>100, :top=>100, :clones=>[]}} (browser.script.iife.min.js, line 13)
+
+
+c=circle
+puts  " c is : #{c.inspect }"
+# this print : [Log]  c is : #<Atome: @type=:shape, @smooth="100%", @width=99, @id=:circle_16, @renderers=[:html], @height=99, @broadcast={}, @callback={}, @tag={}, @attached=[], @unit={}, @collected={}, @html=#<HTML:0x06579be8 @element=[object HTMLDivElement], @id="circle_16", @original_atome=#<Atome: @type=:shape, @smooth="100%", @width=99, @id=:circle_16, @renderers=[:html], @height=99, @broadcast={}, @callback={}, @tag={}, @attached=[], @unit={}, @collected={}, @html=#<HTML:0x06579be8 ...>, @top=100, @attach=[:view], @left=100, @apply=[:circle_color], @clones=[], @preset={:circle=>{:width=>99, :height=>99, :smooth=>"100%", :apply=>[:circle_color], :left=>100, :top=>100, :clones=>[]}}>, @element_type="div">, @top=100, @attach=[:view], @left=100, @apply=[:circle_color], @clones=[], @preset={:circle=>{:width=>99, :height=>99, :smooth=>"100%", :apply=>[:circle_color], :left=>100, :top=>100, :clones=>[]}}> (browser.script.iife.min.js, line 13)
+# it's pôssible to alter basic preset using the particle .preset
+my_box.preset({ circle:  {type: :shape, :width=>99, :height=>99, :smooth=>"100%", color: :red, :left=>100, :top=>100, :clones=>[]}})
+puts " my_box preset is now : #{my_box.preset}"
+# now the preset circle is : [Log]  my_box preset is now : {:circle=>{:type=>:shape, :width=>99, :height=>99, :smooth=>"100%", :color=>:red, :left=>100, :top=>100, :clones=>[]}} (browser.script.iife.min.js, line 13)
+
+my_box.touch(true) do
+  my_box.preset(:circle) # the box now rounded like a circle
+
+  new_circle=circle # as the preset circle has been modified tha circle is now red as specified in the updated preset
+  puts  "new_circle is : #{new_circle.inspect}"
+  # this print : new_circle is : #<Atome: @type=:shape, @smooth="100%", @width=99, @id=:circle_18, @renderers=[:html], @height=99, @broadcast={}, @callback={}, @tag={}, @attached=[], @unit={}, @collected={}, @html=#<HTML:0x0664e99c @element=[object HTMLDivElement], @id="circle_18", @original_atome=#<Atome: @type=:shape, @smooth="100%", @width=99, @id=:circle_18, @renderers=[:html], @height=99, @broadcast={}, @callback={}, @tag={}, @attached=[], @unit={}, @collected={}, @html=#<HTML:0x0664e99c ...>, @top=100, @attach=[:box_14], @left=100, @apply=[:circle_18_color_1_0_0_0_0_0____], @clones=[]>, @element_type="div">, @top=100, @attach=[:box_14], @left=100, @apply=[:circle_18_color_1_0_0_0_0_0____], @clones=[]>
+end

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+b = box
+
+16.times do |index|
+  width_found = b.width
+  b.duplicate({ left: b.left + index * (width_found + 45), top: 0, category: :matrix })
+end
+
+
+Universe.user_atomes.each do |atome_id|
+  atome_found = grab(atome_id)
+  if atome_found.type == :shape
+    atome_found.color(:orange)
+    atome_found.smooth(200)
+    atome_found.top(200)
+  end
+end
+
+random_found =Universe.user_atomes.sample(7)
+random_found.each do |atome_id|
+  atome_found = grab(atome_id)
+  if atome_found.type == :shape
+    atome_found.top(rand(600))
+    atome_found.width(rand(120))
+    atome_found.height(rand(120))
+    atome_found.smooth(rand(120))
+    atome_found.color(:red)
+  end
+end
+
+random_found =Universe.user_atomes.sample(9)
+random_found.each do |atome_id|
+  atome_found = grab(atome_id)
+  if atome_found.type == :shape
+    atome_found.left(rand(700))
+    atome_found.width(rand(120))
+    atome_found.height(rand(120))
+    atome_found.smooth(rand(120))
+    atome_found.color(:blue)
+  end
+end

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

@@ -0,0 +1,48 @@
+#  frozen_string_literal: true
+
+raw_data = <<STR
+<iframe width="560" height="315" src="https://www.youtube.com/embed/8BT4Q3UtO6Q?si=WI8RlryV8HW9Y0nz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+STR
+
+
+raw_data = <<STR
+<svg width="600" height="350" xmlns="http://www.w3.org/2000/svg">
+<!-- Style for the boxes -->
+                         <style>
+.box { fill: white; stroke: black; stroke-width: 2; }
+   .original { fill: lightblue; }
+   .clone { fill: lightgreen; }
+   .arrow { stroke: black; stroke-width: 2; marker-end: url(#arrowhead); }
+                                                          .text { font-family: Arial, sans-serif; font-size: 14px; }
+   </style>
+
+  <!-- Arrowhead definition -->
+  <defs>
+    <marker id="arrowhead" markerWidth="10" markerHeight="7" 
+    refX="0" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="black"/>
+     </marker>
+  </defs>
+
+   <!-- Boxes for original and clones -->
+                                      <rect x="250" y="30" width="100" height="50" class="box original"/>
+   <rect x="100" y="200" width="100" height="50" class="box clone"/>
+   <rect x="250" y="200" width="100" height="50" class="box clone"/>
+   <rect x="400" y="200" width="100" height="50" class="box clone"/>
+
+   <!-- Text for boxes -->
+                       <text x="275" y="55" class="text" text-anchor="middle">Original</text>
+  <text x="150" y="225" class="text" text-anchor="middle">Clone 1</text>
+   <text x="300" y="225" class="text" text-anchor="middle">Clone 2</text>
+  <text x="450" y="225" class="text" text-anchor="middle">Clone 3</text>
+
+   <!-- Arrows -->
+   <line x1="300" y1="80" x2="150" y2="200" class="arrow"/>
+   <line x1="300" y1="80" x2="300" y2="200" class="arrow"/>
+   <line x1="300" y1="80" x2="450" y2="200" class="arrow"/>
+   </svg>
+STR
+
+
+
+raw({ id: :the_raw_stuff, data: raw_data })

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+A.read('Cargo.toml') do |data|
+  text "file content  :\n #{data}"
+end
+
+# if Atome.host == 'tauri'
+#   JS.eval("readFile('atome','Cargo.toml')")
+# else
+#   puts 'nothing here'
+# end