atome 0.5.7.5.9 → 0.5.7.6.5

data/vendor/assets/src/medias/utils/examples/atomes/paint/example.rb

@@ -0,0 +1,29 @@
+# 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: :my_col1, red: 1 , alpha: 0.5})
+wait 0.5 do
+  c.paint({ gradient: [c1,c2], direction: :left })
+  wait 0.5 do
+    wait 0.5 do
+      c.paint({ gradient: [c1,c2], diffusion: :radial })
+      wait 0.5 do
+        cc= c.paint({ gradient: [c1,c2, c3], diffusion: :conic })
+        wait 0.5 do
+          # cc.delete(true)
+          #   alert c.paint
+          c.remove({all: :paint})
+          # alert c.paint
+          wait 0.6 do
+            c.color(:red)
+          end
+          # c.paint({ gradient: [c3, c3], diffusion: :conic })
+        end
+      end
+    end
+  end
+end

data/vendor/assets/src/medias/utils/examples/atomes/paint/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the paint object.

data/vendor/assets/src/medias/utils/examples/atomes/paint/usage.txt

@@ -0,0 +1 @@
+The paint object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/raw/example.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/src/medias/utils/examples/atomes/raw/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the raw object.

data/vendor/assets/src/medias/utils/examples/atomes/raw/usage.txt

@@ -0,0 +1 @@
+The raw object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/shadow/example.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+c = circle({ id: :the_circle, left: 122, color: :orange, drag: { move: true, inertia: true, lock: :start } })
+c.color({ id: :col1, red: 1, blue: 1 })
+
+ c.shadow({
+              id: :s1,
+              # affect: [:the_circle],
+              left: 9, top: 3, blur: 9,
+              invert: false,
+              red: 0, green: 0, blue: 0, alpha: 1
+            })
+
+shadow({
+           id: :s2,
+           affect: [:the_circle],
+           left: 3, top: 9, blur: 9,
+           invert: true,
+           red: 0, green: 0, blue: 0, alpha: 1
+         })
+
+c.shadow({
+           id: :s4,
+           left: 20, top: 0, blur: 9,
+           option: :natural,
+           red: 0, green: 1, blue: 0, alpha: 1
+         })
+
+wait 2 do
+  c.remove(:s4)
+  wait 2 do
+    c.remove({ all: :shadow })
+  end
+end
+
+
+the_text = text({ data: 'text with shadow!', center: true, top: 222, width: 777, component: { size: 66 }, id: :my_text })
+
+
+the_text.shadow({
+           id: :my_shadow,
+           left: 6, top: 6, blur: 6,
+           option: :natural,
+           red: 0, green: 0, blue: 0, alpha: 1
+         })
+
+the_text.left(255)
+the_text.top(66)
+the_text.color(:red)
+
+wait 1 do
+  text_shadow= grab(:my_shadow)
+  text_shadow.alpha(0.5)
+  text_shadow.left(120)
+  text_shadow.blur({ value: 1 })
+
+  # grab(:my_text).refresh(true)
+
+end
+

data/vendor/assets/src/medias/utils/examples/atomes/shadow/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the shadow object.

data/vendor/assets/src/medias/utils/examples/atomes/shadow/usage.txt

@@ -0,0 +1 @@
+The shadow object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/shape/example.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+shape(
+  { renderers: [:html], id: :my_test_box, type: :shape, apply: [:shape_color],
+    left: 120, top: 0, width: 100, smooth: 15, height: 100, overflow: :visible, fasten: [], center: true
+  })

data/vendor/assets/src/medias/utils/examples/atomes/shape/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the shape object.

data/vendor/assets/src/medias/utils/examples/atomes/shape/usage.txt

@@ -0,0 +1 @@
+The shape object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/table/example.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+
+c = circle({ id: :my_cirle, color: :red, drag: true })
+c.box({ left: 0, width: 22, height: 22, top: 65 })
+c.touch(true) do
+  alert :okk
+end
+m = table({ renderers: [:html], attach: :view, id: :my_test_box, type: :table, apply: [:shape_color],
+             left: 333, top: 0, width: 900, smooth: 15, height: 900, overflow: :scroll, option: { header: true },
+             component: {
+               border: { thickness: 5, color: :blue, pattern: :dotted },
+               overflow: :auto,
+               color: "white",
+               shadow: {
+                 id: :s4,
+                 left: 20, top: 0, blur: 9,
+                 option: :natural,
+                 red: 0, green: 1, blue: 0, alpha: 1
+               },
+               height: 50,
+               width: 50,
+               component: { size: 12, color: :black }
+             },
+             data: [
+               { titi: :toto },
+               { dfgdf: 1, name: 'Alice', age: 30, no: 'oko', t: 123, r: 654, f: 123, g: 654, w: 123, x: 654, c: 123, v: 654 },
+               { id: 2, name: 'Bob', age: 22 },
+               { dfg: 4, name: 'Vincent', age: 33, no: grab(:my_cirle) },
+               { dfgd: 3, name: 'Roger', age: 18, no: image(:red_planet), now: :nothing }
+
+             ]
+           })
+
+# tests
+m.color(:orange)
+m.border({ thickness: 5, color: :blue, pattern: :dotted })
+
+puts m.get({ cell: [1, 2] })
+wait 2 do
+  m.insert({ cell: [2, 2], content: 999 })
+  m.insert({ row: 1 })
+  wait 1 do
+    m.remove({ row: 2 })
+  end
+  wait 2 do
+    m.remove({ column: 1 })
+  end
+  wait 3 do
+    m.insert({ column: 3 })
+  end
+
+  wait 4 do
+    m.sort({ column: 1, method: :alphabetic })
+    puts 1
+    wait 1 do
+      puts 2
+      m.sort({ column: 2, method: :numeric })
+      wait 1 do
+        puts 3
+        m.sort({ column: 3, method: :numeric })
+        wait 1 do
+          puts 4
+          m.sort({ column: 1, method: :numeric })
+        end
+      end
+    end
+  end
+
+end
+
+#  cell.fusion() # to be implemented later
+
+
+
+

data/vendor/assets/src/medias/utils/examples/atomes/table/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the table object.

data/vendor/assets/src/medias/utils/examples/atomes/table/usage.txt

@@ -0,0 +1 @@
+The table object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/text/example.rb

@@ -0,0 +1,18 @@
+#  frozen_string_literal: true
+
+new({particle: :select})
+t = text :hello
+t.left(99)
+
+t.edit(true)
+
+b=box
+b.touch(true) do
+  puts t.data
+  back_color = grab(:back_selection)
+  text_color = grab(:text_selection)
+  back_color.red(1)
+  back_color.alpha(1)
+  text_color.green(1)
+  t.component({ selected: true })
+end

data/vendor/assets/src/medias/utils/examples/atomes/text/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the text object.

data/vendor/assets/src/medias/utils/examples/atomes/text/usage.txt

@@ -0,0 +1 @@
+The text object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/vector/example.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+grab(:black_matter).image({ path: 'medias/images/icons/color.svg', id: :atomic_logo, width: 33, left: 333 })
+img=vector({ width: 333, height: 333, id: :my_placeholder })
+A.fetch_svg({ source: :atomic_logo, target: :my_placeholder })
+wait 2 do
+  img.color(:cyan)
+end
+# grab(:atomic_logo).delete(true)

data/vendor/assets/src/medias/utils/examples/atomes/vector/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the vector object.

data/vendor/assets/src/medias/utils/examples/atomes/vector/usage.txt

@@ -0,0 +1 @@
+The vector object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/video/example.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+if Universe.internet
+  v = video({ path: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" })
+else
+  v = video(:video_missing)
+end
+
+v.touch(true) do
+  v.play(true)
+  wait 3 do
+    v.play(66)
+  end
+end

data/vendor/assets/src/medias/utils/examples/atomes/video/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the video object.

data/vendor/assets/src/medias/utils/examples/atomes/video/usage.txt

@@ -0,0 +1 @@
+The video object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/vr/example.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+vr({width: 700,height: 390,path: 'medias/images/puydesancy.jpg', id: :tutu})

data/vendor/assets/src/medias/utils/examples/atomes/vr/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the vr object.

data/vendor/assets/src/medias/utils/examples/atomes/vr/usage.txt

@@ -0,0 +1 @@
+The vr object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/atomes/www/example.rb

@@ -0,0 +1,10 @@
+#  frozen_string_literal: true
+
+b = box
+
+b.www({ path: "https://www.youtube.com/embed/usQDazZKWAk", left: 333 })
+
+Atome.new(
+  renderers: [:html], id: :youtube1, type: :www, attach: :view, path: "https://www.youtube.com/embed/fjJOyfQCMvc?si=lPTz18xXqIfd_3Ql", left: 33, top: 33, width: 199, height: 199,
+
+)

data/vendor/assets/src/medias/utils/examples/atomes/www/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the www object.

data/vendor/assets/src/medias/utils/examples/atomes/www/usage.txt

@@ -0,0 +1 @@
+The www object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/molecules/application/example.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+a = application({
+                  id: :arp,
+                  margin: 3,
+                  spacing: 6
+                })
+
+page1_code = lambda do |back|
+  alert :kooly
+end
+
+verif = lambda do
+  b = box({ id: :ty, left: 90, top: 90 })
+  b.touch(true) do
+    alert grab(:mod_1).touch
+  end
+end
+
+page1 = {
+  id: :page1,
+  color: :cyan,
+  name: :accueil,
+  footer: { color: :green, height: 22 },
+  header: { color: :yellow },
+  left_side_bar: { color: :yellowgreen },
+  right_side_bar: { color: :blue },
+}
+
+color({ id: :titi, red: 1 })
+page2 = { id: :page2,
+          color: :white,
+          menu: false,
+          run: verif,
+          box: { id: :mod_1, left: 333, top: 123, touch: { down: true, code: page1_code } }
+}
+
+page0 = { id: :page0,
+          color: :purple,
+}
+
+a.page(page0)
+a.page(page1)
+a.page({ id: :page3,
+         color: :red,
+         footer: { color: :green, height: 22 }
+       })
+
+
+
+menu_f=a.menu
+menus_found= menu_f.fasten # replace fasten for entries
+puts a.pages
+puts   "pages => #{a.pages}"
+puts   "menus_found => #{menus_found}"
+
+bloc_to_add= {height: 156, color: :green}
+bloc_to_add2= {height: 99, color: :blue}
+bloc_to_add3= {height: 333, color: :orange, subs:{contact: {width: 1, color: :black}, project: {width: 1}, calendar: {width: 0.5, color: :green}}}
+
+ a.insert({page3: {block1: bloc_to_add , block2: bloc_to_add2, block3: bloc_to_add3}})
+
+
+wait 1 do
+  # how to remove blocks
+   a.extract({page3: :block1})
+end
+
+page_3=a.show(:page3)
+
+wait 1 do
+  page_3.color(:cyan)
+  page_3.box({top: 900})
+end
+
+
+# how access blocks
+# wait 3 do
+#   grab(:block2).color(:black)
+# end
+
+
+puts(grab(:project).inspect)
+

data/vendor/assets/src/medias/utils/examples/molecules/application/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the application object.

data/vendor/assets/src/medias/utils/examples/molecules/application/usage.txt

@@ -0,0 +1 @@
+The application object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/molecules/browser/example.rb

@@ -0,0 +1 @@
+A.browser("../src/medias/utils/examples")

data/vendor/assets/src/medias/utils/examples/molecules/browser/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the browse object.

data/vendor/assets/src/medias/utils/examples/molecules/browser/usage.txt

@@ -0,0 +1 @@
+The browser object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/molecules/buttons/example.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+box({color: :gray, width: 666, height: 666})
+box({ id: :the_box, drag: true, color: { alpha: 2 } })
+
+
+but =buttons({
+          id: "my_menu",
+          depth: 9999,
+          attach: :the_box,
+          inactive: { text: { color: :gray }, width: 66, height: 12, spacing: 3, disposition: :horizontal,
+                      color: :orange, margin: { left: 33, top: 12 } },
+          active: { text: { color: :white, shadow: {} }, color: :blue, shadow: {} },
+        })
+
+c = text({ top: 99, left: 99, data: 'add buttons' })
+
+c.touch(:down) do
+  but.add_button(new_button: {
+    text: :button1,
+    code: lambda { puts :button1_touched }
+  })
+    but.add_button(new_button2: {
+      text: :button2,
+      code: lambda { puts :button1_touched }
+    })
+  but.add_button(new_button3: {
+    text: :button3,
+    code: lambda { puts :button1_touched }
+  })
+
+  wait 0.2 do
+    grab(:my_menu).remove_menu_item(:new_button2)
+  end
+
+  end
+
+
+
+
+
+
+# TODO: remove menu_item ,reset_menu, reorder, delete

data/vendor/assets/src/medias/utils/examples/molecules/buttons/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the buttons object.

data/vendor/assets/src/medias/utils/examples/molecules/buttons/usage.txt

@@ -0,0 +1 @@
+The buttons object is used for specific purposes as indicated in the example.

data/vendor/assets/src/medias/utils/examples/molecules/editor/example.rb

@@ -0,0 +1,139 @@
+# frozen_string_literal: true
+box
+dragger = box({ width: 333, height: 16, top: 0 })
+back = box({ width: 333, height: 222, top: dragger.height })
+body = back.box({ top: 0, width: '100%', height: '100%', component: { size: 12 }, id: :poil })
+code_runner = dragger.circle({ left: 3, top: 3, width: 12, height: 12, color: :red })
+code_closer = dragger.circle({ left: :auto ,right: 3, top: 3, width: 12, height: 12, color: :black })
+
+body.editor({ id: :the_ed, code: "def my_script\n
+  return 100\n
+end", width: 333, height: 192, color: :lightgray, top: 0 })
+
+def create_editor(code_id)
+  js_code = <<~JAVASCRIPT
+    var editor = CodeMirror.fromTextArea(document.getElementById("#{code_id}"), {
+        lineNumbers: true,
+        mode: "ruby",
+        theme: "monokai"
+    });
+    editor.getWrapperElement().id = "atome_editor_#{code_id}";
+    document.getElementById("atome_editor_#{code_id}").CodeMirrorInstance = editor;
+
+  JAVASCRIPT
+  JS.eval(js_code)
+end
+
+def set_code(code_id, content)
+  js_code = <<~JAVASCRIPT
+    var editorWrapper = document.getElementById("atome_editor_#{code_id}");
+                 var editorInstance = editorWrapper.CodeMirrorInstance;
+                 var newContent = "#{content}";
+                 editorInstance.setValue(newContent);
+  JAVASCRIPT
+  JS.eval(js_code)
+end
+
+def get_code(code_id)
+  js_code = <<~JAVASCRIPT
+    var editorWrapper = document.getElementById("atome_editor_#{code_id}");
+
+               var editorInstance = editorWrapper.CodeMirrorInstance;
+               return editorInstance.getValue();
+  JAVASCRIPT
+  JS.eval(js_code)
+end
+
+create_editor("the_ed")
+
+wait 1 do
+  editor_id = "the_ed"
+  set_code(editor_id, "def new_script\\n  puts 'so cool'\\ncircle({top: rand(333), color: :red})\\nend\\nnew_script")
+end
+
+code_closer.touch(true) do
+  back.delete(true)
+  dragger.delete(true)
+end
+
+code_runner.touch(true) do
+  editor_id = "the_ed"
+  data_found = get_code("the_ed").to_s
+  grab(:the_t).code(data_found.to_s)
+  atome_before = Universe.user_atomes
+  eval(data_found)
+  code_editor = grab(editor_id)
+  atome_to_delete = code_editor.data
+  atome_to_delete.each do |atome_id_found|
+    grab(atome_id_found).delete(false)
+  end
+  atome_after = Universe.user_atomes
+  new_atomes = atome_after - atome_before
+  code_editor.data(new_atomes)
+end
+dragger.drag(restrict: :view ) do |event|
+  view = grab(:view)
+  view_width = view.to_px(:width)
+  view_height = view.to_px(:height)
+
+  dx = event[:dx]
+  dy = event[:dy]
+
+  # Calculer les nouvelles positions
+  x = (back.left || 0) + dx.to_f
+  y = (back.top || 0) + dy.to_f
+
+  # Contrainte de `x` entre 0 et `view_width`
+  if x > 0 && x < view_width - back.width
+    back.left(x)
+  else
+    # Contrainte si `x` dépasse les limites
+    x = [0, [x, view_width - back.width].min].max
+    back.left(x)
+  end
+
+  # Contrainte de `y` pour qu'il soit supérieur à une certaine valeur
+  if y > 0 + dragger.height && y < view_height + dragger.height
+    back.top(y)
+  else
+    # Contrainte si `y` dépasse les limites
+    y = [0 + dragger.height, [y, view_height + dragger.height].min].max
+    back.top(y)
+  end
+end
+back.resize({ size: { min: { width: 120, height: 90 }, max: { width: 3000, height: 3000 } } }) do |event|
+  dx = event[:dx]
+  # dy = event[:dy]
+  x = (dragger.width || 0) + dx.to_f
+  # y = (back.top || 0) + dy.to_f
+  dragger.width(x)
+  # back.top(y)
+end
+
+back.shadow({ alpha: 0.6, blur: 16, left: 3, top: 16 })
+
+back.drag(false)
+dragger.touch(:double) do
+  if back.display == :none
+    back.display(:block)
+  else
+    back.display(:none)
+  end
+end
+
+# a_list=[]
+# Universe.atome_list.each  do |k, v|
+#   a_list << k
+# end
+#
+# alert a_list
+#
+# p_list=[]
+#  Universe.particle_list.each  do |k, v|
+#    p_list << k
+#  end
+#
+# alert p_list
+#
+# box(id: :mon_carre, width: 300, height: 300)
+alert "pseudo element and trigger absctrator"

data/vendor/assets/src/medias/utils/examples/molecules/editor/infos.txt

@@ -0,0 +1 @@
+Specific information about how to use the editor object.

data/vendor/assets/src/medias/utils/examples/molecules/editor/usage.txt

@@ -0,0 +1 @@
+The editor object is used for specific purposes as indicated in the example.