atome 0.5.7.1.4 → 0.5.7.1.7

data/lib/renderers/html/html.rb

@@ -45,14 +45,14 @@ class HTML
   def add_font_to_css(params)
     font_path = params[:path]
     font_name = params[:name]
-    str_to_eval = <<STRDELIM
-var styleSheet = document.styleSheets[0];
-styleSheet.insertRule(`
-@font-face {
-  font-family: '#{font_name}';
-  src: url('../medias/fonts/#{font_path}/#{font_name}.ttf') format('truetype');
-}`, styleSheet.cssRules.length);
-STRDELIM
+    str_to_eval = <<~STRDELIM
+      var styleSheet = document.styleSheets[0];
+      styleSheet.insertRule(`
+      @font-face {
+        font-family: '#{font_name}';
+        src: url('../medias/fonts/#{font_path}/#{font_name}.ttf') format('truetype');
+      }`, styleSheet.cssRules.length);
+    STRDELIM
     JS.eval(str_to_eval)
   end
 
@@ -1303,37 +1303,30 @@ STRDELIM
     end
   end
 
+
   # animation below
   def animate(animation_properties)
-    command = <<~JS
-          var target_div = document.getElementById('#{@id}');
-          window.currentAnimation = popmotion.animate({
-            from: #{animation_properties[:from]},
-            to: #{animation_properties[:to]},
-            duration: #{animation_properties[:duration]},
-            onUpdate: function(v) {
-      atomeJsToRuby("puts x= "+v)
-      atomeJsToRuby("grab('#{@id}').left("+v+")")
-            },
-            onComplete: function() {
-              window.currentAnimation = null;
-      atomeJsToRuby("puts :complete")
-            }
-          });
+    prop= animation_properties[:particle]
+    command = <<~JS 
+                var target_div = document.getElementById('#{@id}');
+                window.currentAnimation = popmotion.animate({
+                  from: #{animation_properties[ :from]},
+                  to: #{animation_properties[:to]},
+                  duration: #{animation_properties[:duration]},
+                  onUpdate: function(v) {
+      atomeJsToRuby("grab('#{@id}').animation_callback('#{prop}', "+v+")")
+            atomeJsToRuby("grab('#{@id}').#{prop}("+v+")")
+                  },
+                  onComplete: function(v) {
+                    window.currentAnimation = null;
+      atomeJsToRuby("grab('#{@id}').animation_callback('#{prop}_end')")
+                  }
+                });
     JS
     JS.eval(command)
   end
 
-  def play_animation(properties)
-    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'
-    end
-
-    animate(properties)
 
-  end
 
   def stop_animation
     JS.eval('if (window.currentAnimation) window.currentAnimation.stop();')

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

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+b=box
+margin = 12
+b2=box({top: below(b, margin)})
+b3=box({top: below(b2, margin)})
+b4=box({top: below(b3, margin)})
+box({top: below(b4, margin)})
+i=0
+while i< 10 do
+  b2=box({top: below(b, margin)})
+  i+=1
+end
+
+b = circle(left: 66)
+margin = 12
+i = 0
+
+while i < 10 do
+  b = circle({top: below(b, margin), left: 66})
+  i += 1
+end

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

@@ -87,5 +87,33 @@
 
 b=box({id: :the_box})
 
-  b.animate({ to: 90 })
+  b.animate({ to: 333, particle: :width, duration: 3000}) do |val|
+    puts "width +#{val}"
+  end
+
+b.animate({ to: 456, particle: :left, duration: 5000}) do |val|
+  puts "left +#{val}"
+end
+
+b.animate({  end: :left}) do |val|
+  puts "left ended"
+end
+
+b.animate({ to: 69, particle: :smooth, duration: 10000}) do |val|
+  puts "smooth +#{val}"
+end
+
+b.animate({ end: :smooth}) do |val|
+  puts " cool smooth end now!!!"
+end
+
+b.animate({ to: 90, particle: :rotate, duration: 10000}) do |val|
+  puts "rotate +#{val}"
+end
+
+b.animate({ to: 222, particle: :top, duration: 10000}) do |val|
+  puts "top +#{val}"
+end
+
+
 

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

@@ -1,7 +1,7 @@
 #  frozen_string_literal: true
-#
-# # audio tag
-a = audio({ path: 'medias/audios/clap.wav', id: :audioElement })
+
+# audio tag
+a = audio({ path: 'medias/audios/clap.wav', id: :basic_audio })
 b=box({id: :playButton})
 b.text(:audio_tag)
 a.left(333)
@@ -10,26 +10,21 @@ b.touch(:down) do
 end
 
 
-#
-#
+
 ### Web Audio
-# Initialisation des variables globales
+ audio({ path: 'medias/audios/clap.wav', id: :audioElement })
 @audio_context = JS.eval('return new AudioContext()')
 @audio_element = JS.global[:document].getElementById('audioElement')
 @track = @audio_context.createMediaElementSource(@audio_element)
 
-# Ajout d'un nœud de gain (volume)
 @gain_node = @audio_context.createGain()
-@gain_node[:gain][:value] = 0.5  # Réduit le volume à 50%
-#
-# # Connexion de la chaîne
-@track.connect(@gain_node)  # Connecte la source au nœud de gain
-@gain_node.connect(@audio_context[:destination])  # Connecte le nœud de gain à la sortie
+@gain_node[:gain][:value] = 0.5
+
+@track.connect(@gain_node)
+@gain_node.connect(@audio_context[:destination])
 
 def play_audio
-  # Réactive l'AudioContext s'il est suspendu
   @audio_context[:resume].to_s if @audio_context[:state].to_s == 'suspended'
-  # Joue l'audio
   @audio_element.play
 end
 b2=box({left: 166})
@@ -45,7 +40,6 @@ bb.text(:wadjs)
 init_code = "window.snare = new Wad({source : 'medias/audios/clap.wav'});"
 JS.eval(init_code)
 
-# Code JavaScript pour jouer le son et l'arrêter après 300 ms, dans un bloc indépendant
 play_code = <<~STRDEL
   window.snare.play();
   setTimeout(function() {
@@ -53,17 +47,7 @@ play_code = <<~STRDEL
   }, 300);
 STRDEL
 
-# Exécution du bloc indépendant pour jouer et arrêter le son
-# JS.eval(play_code)
-# snare=JS.eval("return new Wad({source : 'medias/audios/clap.wav'})")
-# js_code=<<STRDEL
-#      snare = #{snare};
-#   snare =new Wad({source : 'medias/audios/clap.wav'})
-#   snare.play();
-#   setTimeout(() => {
-#   snare.stop();
-#   }, "300");
-# STRDEL
+
 bb.touch(:down) do
   JS.eval(play_code)
 end

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

@@ -1,158 +1,204 @@
-# # frozen_string_literal: true
+# frozen_string_literal: true
+
+
+########################### Test  check and verification below ############################
+
+new({ tool: :blur }) do |params|
+
+  active_code = lambda {
+    puts :alteration_tool_code_activated
+  }
+
+  inactive_code = lambda { |param|
+    puts :alteration_tool_code_inactivated
+  }
+  pre_code = lambda { |params|
+    puts "pre_creation_code,atome_touched: #{:params}"
+
+  }
+  post_code = lambda { |params|
+    puts "post_creation_code,atome_touched: #{:params}"
+
+  }
+
+  zone_spe = lambda { |current_tool|
+    puts "current tool is : #{:current_tool} now creating specific zone"
+    # b = box({ width: 33, height: 12 })
+    # b.text({ data: :all })
+
+  }
+
+  {
+    activation: active_code,
+    inactivation: inactive_code,
+    alteration: { width: 22, blur: 3 },
+    pre: pre_code,
+    post: post_code,
+    zone: zone_spe,
+    icon: :color,
+    int8: { french: :couleur, english: :color, german: :colorad } }
+
+end
+
+new({ tool: :box }) do |params|
+
+  active_code = lambda {
+    puts :creation_tool_code_activated
+  }
+
+  inactive_code = lambda { |atomes_treated|
+    puts :creation_tool_code_inactivated
+
+  }
+  pre_creation_code = lambda { |params|
+    puts "pre_creation_code : atome_touched : #{:params} "
+
+  }
+
+  post_creation_code = lambda { |params|
+    puts "post_creation_code,atome_touched: #{:params}"
+  }
+
+  { creation: { box: { color: :blue, width: 66, height: 66 } },
+    activation: active_code,
+    inactivation: inactive_code,
+    pre: pre_creation_code,
+    post: post_creation_code,
+    int8: { french: :formes, english: :shape, german: :jesaispas } }
+
+end
+
+
+new({ tool: :project }) do
+  active_code = lambda {
+
+    alert :get_projects_now
+    # if  Atome.selection.instance_of? Array
+    # end
+    # Atome.selection.each do |atome_id_to_treat|
+    #   # #   # reinit first to avoid multiple drag event
+    #   # #   grab(atome_id_to_treat).drag(false)
+    # end
+    # drag_remove
+    # puts :alteration_tool_code_activated
+  }
+  { activation: active_code }
+end
+
+new({tool: :test}) do
+  active_code = lambda {
+    b=grab(:view).box({})
+    b.touch(true) do
+      alert :kool
+    end
+  }
+  # active_code=:tito
+  { activation: active_code }
+end
+
+
+Universe.tools_root= {tools: [:blur, :box, :test],toolbox: { orientation: :ew, left:9 , bottom: 9, spacing: 9} }
+# Universe.tools_root=[:test]
+Atome.init_intuition
+
+wait 1 do
+  grab(:blur_tool_icon).color(:red)
+  wait 1 do
+    grab(:box_tool_icon).color(:red)
+    wait 1 do
+      grab(:test_tool_icon).color(:red)
+    end
+  end
+end
+
+
+# ################### check below
+
+# b = box({ left: 123, top: 66, selected: false, id: :the_box, color: :green })
+# b.touch(:down) do
+#   puts " on touch : #{Universe.allow_localstorage}"
+# end
+# b.resize(true) do
+#   puts :good!
+# end
+# the_circ = circle({ left: 123, top: 120, selected: false, id: :the_circle })
 #
-# # 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: false },
-# #             component: {
-# #               # border: { thickness: 5, color: :blue, pattern: :dotted },
-# #               # overflow: :auto,
-# #               # color: "red",
-# #               shadow: {
-# #                 id: :s4,
-# #                 left: 20, top: 0, blur: 9,
-# #                 option: :natural,
-# #                 red: 0, green: 0, blue: 0, alpha: 1
-# #               },
-# #               height: 5,
-# #               width: 12,
-# #               component: { size: 12, color: :black }
-# #             },
-# #             # data: [
-# #             #   { titi: :toto },
-# #             #   { dfgdf: 1, name: 'Alice', age: 30, no: 'oko', t: 123, r: 654 },
-# #             #   { id: 2, name: 'Bob', age: 22 },
-# #             #   { dfg: 4, name: 'Vincent', age: 33, no: grab(:my_circle) },
-# #             #   { dfgd: 3, name: 'Roger', age: 18, no: image(:red_planet), now: :nothing }
-# #             #
-# #             # ]
-# #           })
-# b=box({top: 120})
-# box({top: 190, id: :the_box})
+# the_circ.touch(:down) do |params|
+#   puts " down : params: #{params}, id: #{the_circ.id}"
+# end
 #
-# b.touch(true) do
-#   a=JS.eval("return performance.now()")
-#   z=Time.now
-#   circle
-#   columns = []
+# the_circ.touch(:up) do
+#   puts "up :kool"
+# end
+# the_circ.drag(true) do
+#   puts "drag : now"
+# end
 #
-#   96.times do
-#     line = {}
-#     128.times do |index|
-#       line[:"vel#{index}"] = nil
+# bb = box({ left: 333, width: 120, selected: false, id: :big_box })
+#
+# b = box({ id: :the_big_boxy })
+
+#################@
+# text({ data: :hello, selected: true, left: 120, id: :texting, blur: 12 })
+# text({data: :hello, left: 120, id: :texting})
+# Universe.tools.each_with_index do |(tool_name, bloc), index|
+#  Atome.instance_exec(&bloc) if bloc.is_a?(Proc)
+#   # alert "#{tool_name} : #{tool_content}"
+#   # alert b.id
+# end
+
+# wait 2 do
+#   # c.preset( {:box=>{:width=>39, :height=>39, :apply=>[:box_color], :left=>0, :top=>0}} )
+#   c.preset( :box )
+# end
+# b=box({left: 333, top: 333})
+# b.touch(true) do
+#   alert Atome.selection
+# end
+# grab(:the_texting).color(:white)
+# grab(:the_texting).left(33)
+# grab(:the_texting).top(133)
+# grab(:the_texting).width(133)
+# grab(:the_texting).top(133)
+# grab(:the_texting).data(:kool)
+# grab(:the_texting).type(:text)
+# grab(:the_texting).rotate(:text)
+
+# b=box
+# b.touch(true) do
+#   puts :ok
+#   # alert b.instance_variable_get('@touch')
+#   # alert b.instance_variable_get('@touch_code')
+#   b.touch(false)
+#   wait 3 do
+#     puts :ready
+#     b.touch(true) do
+#       puts :kool
 #     end
-#     columns << line
+#     # alert b.touch
+#     # alert b.instance_variable_get('@touch')
+#     # alert b.instance_variable_get('@touch_code')
 #   end
-#   columns.each_with_index do |a, index|
-#     b= box({left: index*30, width: 12})
-#     # b.touch(true) do
-#     #   alert b.id
-#     # end
+# end
+
+# A.html.record
+
+# A.html.record
+
+
+
+
+
+
+
+# edition = "M257.7 752c2 0 4-0.2 6-0.5L431.9 722c2-0.4 3.9-1.3 5.3-2.8l423.9-423.9c3.9-3.9 3.9-10.2 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2c-1.9 11.1 1.5 21.9 9.4 29.8 6.6 6.4 14.9 9.9 23.8 9.9z m67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
+#
+# v = vector({left: 99, data: { path: { d: edition, id: :p1, stroke: :black, 'stroke-width' => 37, fill: :red } } })
+# v2 = vector({top: 66,data: { circle: { cx: 300, cy: 300, r: 340, id: :p2, stroke: :blue, 'stroke-width' => 35, fill: :yellow } } } )
+# wait 1 do
+#   v.color(:blue)
+#   wait 1 do
+#     v2.color(:blue)
 #   end
-#   z2=Time.now
-#   x=JS.eval("return performance.now();")
-#   alert "#{x.to_f-a.to_f} : #{(z2-z)*1000}"
-#
 # end
-#
-#
-# # m.data(columns)
-# # # tests
-# # m.color(:orange)
-# # m.border({ thickness: 5, color: :blue, pattern: :dotted })
-# #
-# #   m.get({ cell: [1, 2]}).class
-# # 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
-#
-#
-# # b=box({width: 1200, height: 900, color: {alpha: 0},top: -50})
-# # grab(:black_matter).image({id: :kb,path: 'medias/images/utils/keyboard.svg', width: 66, left: 55})
-# # # grab(:black_matter).image({id: :planet,path: 'medias/images/red_planet.png', width: 66,height: 66,  left: 555, top: 180})
-# # b.fill([atome:  :kb, repeat: {x: 8, y: 1}])
-# # b.drag(true)
-# #
-# #
-# # b2=box({width: 1200, height: 298,  top: -100})
-# # grab(:black_matter).image({id: :notes,path: 'medias/images/utils/notes.svg', width: 166, left: 55})
-# # # grab(:black_matter).image({id: :planet,path: 'medias/images/red_planet.png', width: 66,height: 66,  left: 555, top: 180})
-# # b2.fill([atome:  :notes, repeat: {x: 8, y: 5}])
-# # b2.drag(true)
-#
-#
-# JS.eval("
-# // Fonction pour créer les divs
-# function createDivs() {
-#   // Démarrer le chronomètre
-#   const startTime = performance.now();
-#
-#   const view = document.getElementById('view');
-#   //view.innerHTML = '';  // Nettoyer le contenu précédent de 'view' si nécessaire
-#
-#   // Boucle pour créer 98 divs sur l'axe X
-#   for (let i = 0; i < 98; i++) {
-#     const xDiv = document.createElement('div');
-#     xDiv.style.display = 'flex';
-#     xDiv.style.flexDirection = 'column';
-#     xDiv.style.margin = '2px';  // Marge entre les divs de l'axe X
-#
-#     // Boucle pour créer 128 divs sur l'axe Y
-#     for (let j = 0; j < 128; j++) {
-#       const yDiv = document.createElement('div');
-#       yDiv.style.width = '10px';  // Largeur de chaque div sur l'axe Y
-#       yDiv.style.height = '10px'; // Hauteur de chaque div sur l'axe Y
-#       yDiv.style.border = '1px solid black';  // Bordure pour rendre les divs visibles
-#       yDiv.style.boxSizing = 'border-box';    // Inclure la bordure dans les dimensions
-#       xDiv.appendChild(yDiv);
-#     }
-#
-#     view.appendChild(xDiv);
-#   }
-#
-#   // Arrêter le chronomètre
-#   const endTime = performance.now();
-#   const timeTaken = endTime - startTime;
-#
-#   // Afficher le temps écoulé en console
-#  alert(`Temps écoulé pour créer les divs : ${timeTaken.toFixed(2)} ms`);
-# }
-#
-# // Ajouter un écouteur d'événements au div 'the_box'
-# document.getElementById('the_box').addEventListener('click', createDivs);
-# ``
-#
-# ")
 
-new({particle: :merge})
-a=box
-c=box
-d=a.merge(c)