atome 0.5.4.1.9 → 0.5.5.6.4

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

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+# new({ particle: :duplicate, store: false }) do |params|
+#   if @duplicate
+#     copy_number = @duplicate.length
+#   else
+#     copy_number = 0
+#   end
+#
+#   new_atome_id = "#{@id}_copy_#{copy_number}"
+#   new_atome = Atome.new({ type: @type, renderers: @renderers, id: new_atome_id })
+#
+#   attached_atomes = []
+#   attached_found = attached.dup
+#   particles_found = instance_variables.dup
+#
+#   particles_found.delete(:@history)
+#   particles_found.delete(:@callback)
+#   particles_found.delete(:@duplicate)
+#   particles_found.delete(:@touch_code)
+#   # touch_code=instance_variable_get('@touch_code')
+#   particles_found.delete(:@html)
+#   particles_found.delete(:@attached)
+#   particles_found.delete(:@id)
+#   params[:id] = new_atome_id
+#   attached_found.each do |child_id_found|
+#     child_found = grab(child_id_found)
+#     if child_found
+#       new_child = child_found.duplicate({})
+#       attached_atomes << new_child.id
+#     end
+#   end
+#   particles_found.each do |particle_found|
+#     particle_name = particle_found.to_s.sub('@', '')
+#     particle_content = self.send(particle_name)
+#     new_atome.set(particle_name => particle_content)
+#     # new_atome.instance_variable_set('@touch_code',touch_code)
+#   end
+#   params[:attached] = attached_atomes
+#
+#   if params.instance_of? Hash
+#     params.each do |k, v|
+#       new_atome.send(k, v)
+#     end
+#   end
+#
+#   @duplicate ||= {}
+#   @duplicate[new_atome_id] = new_atome
+#   new_atome
+# end
+#
+# new({ after: :duplicate }) do |params|
+#   @duplicate[@duplicate.keys[@duplicate.keys.length - 1]]
+# end
+
+b = circle({ id: :the_cirlce })
+b.text(:hello)
+bb = b.duplicate({  width: 33, left: 234, top: 222 })
+bb.color(:red)
+bb2 = b.duplicate({ width: 33, left: 12 })
+bb3 = b.duplicate({ width: 33, left: 444 })
+bb3.color(:green)
+bb2.color(:orange)
+

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

@@ -0,0 +1,21 @@
+#  frozen_string_literal: true
+
+t = text :hello
+t.left(99)
+
+t.edit(true)
+
+b=box
+b.touch(true) do
+  puts t.data
+end
+# # frozen_string_literal: true
+#
+# c = circle({ id: :the_circle, left: 122, color: :orange, drag: { move: true, inertia: true, lock: :start } })
+# col = c.color({ id: :col1, red: 1, blue: 1 })
+# wait 2 do
+#   col.red(0.6)
+#   wait 2 do
+#     col.red(0) # Appel en écriture
+#   end
+# end

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

@@ -0,0 +1,6 @@
+#  frozen_string_literal: true
+
+my_pass = Black_matter.encode('hello')
+puts my_pass
+checker = Black_matter.check_password('hello,', my_pass)
+puts checker

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

@@ -0,0 +1,50 @@
+#  frozen_string_literal: true
+
+# support=box({top: 250, left: 12, width: 300, height: 40, smooth: 9, color:{red: 0.3, green: 0.3, blue: 0.3}, id: :support })
+#
+# support.shadow({
+#                  id: :s3,
+#                  left: 3, top: 3, blur: 9,
+#                  invert: true,
+#                  red: 0, green: 0, blue: 0, alpha: 0.7
+#                })
+def create_file_browser
+  div_element = JS.global[:document].createElement("div")
+
+  # Définir les propriétés CSS de l'élément div
+  div_element[:style][:width] = "33px"        # Taille: largeur de 100 pixels
+  div_element[:style][:height] = "33px"       # Taille: hauteur de 100 pixels
+  div_element[:style][:backgroundColor] = "rgba(255,0,0,0.3)"  # Couleur de fond rouge
+  div_element[:style][:position] = "absolute"  # Positionnement absolu
+  div_element[:style][:top] = "0px"           # Position par rapport au haut de l'écran
+  div_element[:style][:left] = "0px"          # Position par rapport à la gauche de l'écran
+
+  # Définir un ID pour l'élément div
+  div_element[:id] = "monDiv"
+
+  input_element = JS.global[:document].createElement("input")
+  input_element[:type] = "file"
+  input_element[:style][:position] = "absolute"
+  input_element[:style][:display] = "none"
+  input_element[:style][:width] = "0px"
+  input_element[:style][:height] = "0px"
+  input_element.addEventListener("change") do |native_event|
+    event = Native(native_event)
+    file = event[:target][:files][0]
+    if file
+      puts "file requested: #{file[:name]}"
+      # support.controller({ action: :loadProject,  params: { path: file[:name]} })
+    end
+  end
+  div_element.addEventListener("mousedown") do |event|
+    # Déclenchez manuellement un clic sur l'input
+    input_element.click
+  end
+  view_div = JS.global[:document].querySelector("#view")
+
+  view_div.appendChild(input_element)
+  view_div.appendChild(div_element)
+
+end
+
+create_file_browser

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

@@ -0,0 +1,157 @@
+# frozen_string_literal: true
+
+new({ particle: :find }) do |params|
+  puts params
+
+end
+
+b = box
+# alert 'use category top assign class then port hybrid.html to atom'
+16.times do |index|
+  width_found = b.width
+  b.duplicate({ left: b.left + index * (width_found + 45), top: 0, category: :matrix })
+end
+
+def calculate_dynamic_value(particle)
+  500
+end
+
+b.find(
+  condition: [{
+                operator: :and,
+                rules: [
+                  {
+                    property: :left,
+                    comparison: :gt,
+                    value: { type: :dynamic, content:[22] }
+                  },
+                  {
+                    operator: :or,
+                    rules: [
+                      {
+                        property: :width,
+                        comparison: :eq,
+                        value: { type: :static, content: 50 }
+                      },
+                      {
+                        property: :width,
+                        comparison: :eq,
+                        value: { type: :static, content: 100 }
+                      }
+                    ],
+                    pre_validate: true
+                  },
+
+                ]
+              },
+              {
+                operator: :or,
+                rules: [
+                  {
+                    property: :rotate,
+                    comparison: :gt,
+                    value: { type: :static, content: 20 }
+                  }
+                ]
+              }]
+) do
+  alert 'items found'
+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
+
+# List of Comparison Operators
+# :eq (Equal To)
+# Description: Checks if the value is equal to the specified value.
+# Usage: { comparison_operator: :eq, value: 100 } would match if the property's value is exactly 100.
+# :gt (Greater Than)
+# Description: Checks if the value is greater than the specified value.
+# Usage: { comparison_operator: :gt, value: 30 } would match if the property's value is greater than 30.
+# :lt (Less Than)
+# Description: Checks if the value is less than the specified value.
+# Usage: { comparison_operator: :lt, value: 50 } would match if the property's value is less than 50.
+# :gte (Greater Than or Equal To)
+# Description: Checks if the value is greater than or equal to the specified value.
+# Usage: { comparison_operator: :gte, value: 20 } would match if the property's value is 20 or more.
+# :lte (Less Than or Equal To)
+# Description: Checks if the value is less than or equal to the specified value.
+# Usage: { comparison_operator: :lte, value: 60 } would match if the property's value is 60 or less.
+# :neq (Not Equal To)
+# Description: Checks if the value is not equal to the specified value.
+# Usage: { comparison_operator: :neq, value: 45 } would match if the property's value is anything other than 45.
+# :in (In a Set Of)
+# Description: Checks if the value is within a specified set of values.
+# Usage: { comparison_operator: :in, value: [1, 2, 3] } would match if the property's value is either 1, 2, or 3.
+# :nin (Not in a Set Of)
+# Description: Checks if the value is not within a specified set of values.
+# Usage: { comparison_operator: :nin, value: [10, 20, 30] } would match if the property's value is anything other than 10, 20, or 30.
+
+# example :
+
+# b.find(
+#   condition: {
+#     operator: :and,
+#     rules: [
+#       {
+#         property: :left,
+#         comparison: :gt,
+#         value: { type: :dynamic, content: -> { calculate_dynamic_value('left') }, cache: true }
+#       },
+#       {
+#         operator: :or,
+#         rules: [
+#           {
+#             property: :width,
+#             comparison: :eq,
+#             value: { type: :static, content: 50 }
+#           },
+#           {
+#             operator: :and,
+#             rules: [
+#               {
+#                 property: :width,
+#                 comparison: :eq,
+#                 value: { type: :static, content: 100 }
+#               },
+#               # ...
+#             ]
+#           }
+#         ],
+#         pre_validate: true
+#       },
+#       # ...
+#     ]
+#   }
+# )

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+gen = generator({ id: :genesis, build: {top: 66, copies: 1} })
+gen.build({ id: :bundler, copies: 32, color: :red, width: 33, height: 44,  left: 123, smooth: 9, blur: 3, attach: [:view] })
+grab(:bundler_1).color(:blue)
+
+
+
+#   Atome.new(
+#   { renderers:  [:html], id: :atomix, type: :element, tag: { system: true }, attach: [], attached: [] }
+# )
+#
+#
+# {:id=>:eDen, :type=>:element, :renderers=>[], :tag=>{:system=>true}, :attach=>[], :attached=>[]}
+# {:renderers=>[], :id=>:eDen, :type=>:element, :tag=>{:system=>true}, :attach=>[], :attached=>[]}

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

@@ -0,0 +1,16 @@
+#  frozen_string_literal: true
+
+the_text = text({ data: 'hello for al the people in front of their machine jhgj  jg jgh jhg  iuuy res ', center: true, top: 120, width: 77, component: { size: 11 } })
+the_box = box({ left: 12 })
+the_circle = circle({ id: :cc, color: :orange })
+the_circle.image('red_planet')
+the_circle.color('red')
+the_circle.box({ left: 333, id: :the_c })
+
+element({ id: :the_element })
+the_view = grab(:view)
+puts "views_shape's shape are : #{the_view.shape}"
+puts "the_circle color is : #{the_circle.color}"
+puts "the_text data is : #{the_text.data}"
+puts "the_box left is : #{the_box.left}"
+puts "the_circle particles are : #{the_circle.particles}"

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

@@ -0,0 +1,14 @@
+#  frozen_string_literal: true
+
+# the grab method is used to retrieve atome using their ID
+a = box({ id: :my_box })
+
+# to alter or add a particle you can use the variable, here we set the left value
+a.left(33)
+
+# to alter or add a particle you can use the variable
+# it's also possible to alter or add a particle without a variable using grab and the ID of the atome , here we set the top value
+
+wait 1 do
+  grab(:my_box).top(5)
+end

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

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+circ = circle({ drag: true })
+circ.remove({ all: :color })
+col_1 = circ.color(:white)
+col_2 = circ.color({ red: 1, id: :red_col })
+col_4 = circ.color({ blue: 1, id: :red_col2, alpha: 0.3 })
+col_5 = circ.color({ red: 0, green: 1, id: :red_col3, alpha: 0.7 })
+col_3 = circ.color(:yellow)
+wait 0.5 do
+  circ.paint({ gradient: [col_1.id, col_2.id], direction: :left })
+  wait 0.5 do
+    circ.paint({ id: :the_painter, rotate: 69, gradient: [col_1.id, col_2.id] })
+    wait 0.5 do
+      circ.color(:cyan)
+      circ.paint({ gradient: [col_1.id, col_2.id, col_3.id], rotate: 33, diffusion: :conic })
+      wait 0.5 do
+        painter = circ.paint({ id: :the_painter2, gradient: [col_1.id, col_2.id, col_3.id], direction: :left })
+        wait 0.5 do
+          circ.color(:blue)
+          circ.paint({ gradient: [col_4.id, col_5.id], diffusion: :conic })
+        end
+      end
+    end
+  end
+
+end
+
+the_text = text({ data: 'hello for al the people in front of their machine', center: true, top: 222, width: 777, component: { size: 66 } })
+
+the_text.left(333)
+
+  the_text.paint({ gradient:  [col_1.id, col_2.id], direction: :left , id: :painted_love })
+
+# #TODO : gradient on text!

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

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+text({ id: :the_text,data: 'Touch me to group and colorize', center: true, top: 120, width: 77, component: { size: 11 } })
+box({ left: 12, id: :the_first_box })
+the_circle = circle({ id: :cc, color: :yellowgreen, top: 222 })
+the_circle.image({path:  'medias/images/red_planet.png', id: :the__red_planet })
+the_circle.color('red')
+the_circle.box({ left: 333, id: :the_c })
+
+element({ id: :the_element })
+
+the_view = grab(:view)
+
+color({ id: :the_orange, red: 1, green: 0.4 })
+color({ id: :the_lemon, red: 1, green: 1 })
+the_group = group({ collect: the_view.shape })
+
+wait 0.5 do
+  the_group.left(633)
+  wait 0.5 do
+    the_group.rotate(23)
+    wait 0.5 do
+      the_group.apply([:the_orange])
+      the_group.blur(6)
+    end
+  end
+end
+puts the_group.collect
+grab(:the_first_box).smooth(9)
+grab(:the_text).touch(true) do
+bibi=box({left: 555})
+the_group2= group({ collect: [:the_c,:the_first_box, :the_text, :cc , bibi.id] })
+the_group2.top(55)
+# puts we remove the circle(:cc) so it' wont be affected by the color :the_lemon
+the_group2.collect.delete( :cc )
+the_group2.apply([:the_lemon])
+
+end
+
+
+
+# # # FIXME : on touch code above crash but works with wait
+
+

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+#  here is how to setup a hierarchy within atome using a more simple way than attached and attach .simply adding atome inside another atome. here is a example to do to so : b = box({ id: :the_box })
+b=box
+# the line below will create a circle inside the box b
+c = b.circle({ id: :the_circle })
+# we can add any atome inside another atome, below we add a text inside de th box b
+t = b.text({ data: :hello, left: 200, id: :the_cirle })
+# theres no limit in the depht of atome, we can create an image inside the text, exemple:
+t.image({ path: 'medias/images/logos/atome.svg', width: 33 })
+
+# note that creating a hierarchy this way automatically
+
+# Note that when you create a hierarchy in this way, it automatically creates a relationship by populating the 'attach' and 'attached' properties. So, if you enter:
+
+
+puts "b attach : #{b.attach}" # prints [:view] in the console as it is attached to the view atom
+puts "b attached :#{b.attached}" # prints [:the_circle, :the_cirle] in the console
+
+puts "c attach: #{c.attach}" # prints [:the_box] in the console
+puts "c attached: #{c.attached}" # prints [:box_14] in the console as there's no child

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

@@ -0,0 +1,31 @@
+#  frozen_string_literal: true
+
+b = box({ id: :the_box })
+b.data(:canyouwritethis)
+b.rotate(33)
+b.rotate(88)
+b.rotate(99)
+b.rotate(12)
+b.rotate(6)
+b.data
+b.touch(true) do
+  b.data(:super)
+  b.data
+  box_data_write_history=b.history({ operation: :write, id: :the_box, particle: :data })
+  puts "get data write operation :  #{box_data_write_history}"
+  box_data_read_history=b.history({ operation: :read, id: :the_box, particle: :data })
+  puts "get data read operation :  #{box_data_read_history}"
+end
+
+
+
+box_rotate_history=b.history({ operation: :write, id: :the_box, particle: :rotate })
+puts "get all all rotate write operation :  #{box_rotate_history}"
+
+# we check if an operation synced (that means saved on atome's server)
+puts "first rotate operation state  :  #{box_rotate_history[0]}"
+
+box_data_history=b.history({ operation: :write, id: :the_box, particle: :data })
+puts "get data write operation :  #{box_data_history}"
+
+

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

@@ -0,0 +1,113 @@
+#  frozen_string_literal: true
+
+b = box({ id: :the_html, color: :orange, overflow: :auto, width: :auto, height: :auto, left: 100, right: 100, top: 100, bottom: 100 })
+# html_desc=<<STR
+# <!DOCTYPE html>
+# <html>
+#     <head>
+#         <title>Une petite page HTML</title>
+#         <meta charset="utf-8" />
+#     </head>
+#     <body>
+#         <h1 id='title' style='color: yellowgreen'>Un titre de niveau 1</h1>
+#
+#         <p>
+#             Un premier petit paragraphe.
+#         </p>
+#
+#         <h2>Un titre de niveau 2</h2>
+#
+#         <p>
+#             Un autre paragraphe contenant un lien pour aller
+#             sur le site <a href="http://koor.fr">KooR.fr</a>.
+#         </p>
+#     </body>
+# </html>
+# STR
+html_desc = <<STR
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Com 1 Image</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
+        header { display: flex; justify-content: space-between; align-items: center; padding: 20px; }
+        nav { display: none; } 
+        .section { padding: 50px 20px; text-align: center;z-index: 3  }
+        .contact-info { text-align: left; }
+        @media (min-width: 768px) {
+            nav { display: block; }
+        }
+    </style>
+  <style>
+        .ok-info { text-align: left; }
+        @media (min-width: 768px) {
+            nav { display: block; }
+        }
+    </style>
+</head>
+<body>
+
+<header>
+    <button>☰</button> <!-- Icône de menu pour mobile -->
+    <h1>Com 1 Image</h1>
+    <nav>
+        <a href="#accueil">Accueil</a>
+    </nav>
+</header>
+
+<section id='title' class="section my_class" style='left: 333px;color: yellow'>
+    <h2>PRODUCTIONS AUDIOVISUELLES</h2>
+    <!-- Contenu de la section -->
+</section>
+
+<section class="section">
+    <h2>COLLABORATIF</h2>
+    <p>Texte sur le collaboratif...</p>
+</section>
+
+<section class="section">
+    <h2>CORPORATE</h2>
+    <div class="communication">
+        <!-- Images et textes liés à la communication -->
+    </div>
+    <div class="publicite">
+        <!-- Images et textes liés à la publicité -->
+    </div>
+    <!-- ... Autres contenus de la section Corporate -->
+</section>
+
+<section class="section">
+    <h2>ART</h2>
+    <p>Texte sur l'art...</p>
+</section>
+
+<section class="section contact-info">
+    <h2>CONTACT</h2>
+    <p>email@example.com</p>
+    <address>
+        74 bis avenue des Thèmes<br>
+        63400 - Chamalières
+    </address>
+</section>
+
+</body>
+</html>
+
+STR
+b.hypertext(html_desc)
+
+# b.hyperedit(id)  do |html_object|
+# id convert to atome
+# get tage type  convert to markup
+# get tag content convert to data
+# get style and class convert to particle
+# end
+b.hyperedit(:title) do |tag_desc|
+  puts tag_desc
+end
+
+# TODO : create an html to atome converter
+

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

@@ -0,0 +1,5 @@
+#  frozen_string_literal: true
+
+image(:red_planet)
+
+image({path: 'medias/images/logos/atome.svg', width: 33})

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

@@ -0,0 +1,59 @@
+#  frozen_string_literal: true
+
+t = text :hello
+t.left(99)
+
+t.edit(true)
+
+t.keyboard(:press) do |native_event|
+  event = Native(native_event)
+  puts "press : #{event[:key]} :  #{event[:keyCode]}"
+end
+
+t.keyboard(:down) do |native_event|
+  event = Native(native_event)
+  if event[:keyCode].to_s == '13'
+    event.preventDefault()
+    t.color(:red)
+  end
+
+end
+
+t.keyboard(:up) do |native_event|
+  event = Native(native_event)
+  puts "up!!"
+end
+
+t.keyboard(true) do |native_event|
+  event = Native(native_event)
+  puts " true => #{event[:keyCode]}"
+  puts "true => #{event[:key]}"
+
+end
+
+# t.keyboard(:input) do |native_event|
+#   event = Native(native_event)
+#   puts event
+# end
+
+# t.keyboard(:keydown) do |native_event|
+#   event = Native(native_event)
+#   puts "down : #{event[:keyCode]}"
+# end
+
+c = circle({ top: 123, left: 0, width: 55, height: 55 })
+c2 = circle({ top: 123, left: 80, width: 55, height: 55 })
+c3 = circle({ top: 123, left: 150, width: 55, height: 55 })
+
+c.touch(true) do
+  text({ data: 'stop up', top: 150 })
+  t.keyboard({ remove: :up })
+end
+c2.touch(true) do
+  text({ data: 'remove all', top: 150 })
+  t.keyboard(:remove)
+end
+c3.touch(true) do
+  t.edit(false)
+  text({ data: 'stop editing', top: 150 })
+end