atome 0.5.7.5.4 → 0.5.7.5.9

data/lib/renderers/html/identity.rb

@@ -14,6 +14,10 @@ new({ method: :type, type: :string, renderer: :html, specific: :image }) do |_va
   html.image(@id)
 end
 
+new({ method: :type, type: :string, renderer: :html, specific: :editor }) do |_value, _user_proc|
+  html.editor(@id)
+end
+
 new({ method: :type, type: :string, renderer: :html, specific: :video }) do |_value, _user_proc|
   html.video(@id)
 end
@@ -38,6 +42,11 @@ new({ method: :type, type: :string, specific: :text, renderer: :html }) do |_val
   html.add_class(:text)
 end
 
+new({ method: :type, type: :string, specific: :vr, renderer: :html }) do |_value, _user_proc|
+  html.vr(@id)
+
+end
+
 new({ method: :type, type: :string, specific: :paint, renderer: :html }) do
 end
 
@@ -53,21 +62,27 @@ new({ method: :data, type: :string, specific: :text, renderer: :html }) do |para
   #                  end
 
   # alert "#{Universe.translation} /// #{params} /// #{Universe.language}"
-  if  Universe.translation[params]
-    params=  Universe.translation[params][Universe.language]
+  if Universe.translation[params]
+    params = Universe.translation[params][Universe.language]
   end
   js[:innerHTML] = params.to_s
 
 end
+new({ method: :code, type: :string, specific: :editor, renderer: :html }) do |params|
+  if Universe.translation[params]
+    params = Universe.translation[params][Universe.language]
+  end
+  js[:innerHTML] = params.to_s
+end
 
 new({ method: :data, type: :string, specific: :vector, renderer: :html }) do |value|
   unless value.instance_of? Array
-    value=[value]
+    value = [value]
   end
   html.svg_data(value)
 end
 
-new({ method: :component, type: :hash, specific: :text, renderer: :html }) do |params, _user_proc|
+new({ method: :component, type: :hash,  renderer: :html }) do |params, _user_proc|
   params.each do |prop, value|
     # we send component data directly to the text html renderer
     send("html_text_#{prop}", value)
@@ -90,6 +105,12 @@ new({ method: :path, type: :string, renderer: :html, specific: :www }) do |value
   html.path(value)
 end
 
+new({ method: :path, type: :string, renderer: :html, specific: :vr }) do |value, _user_proc|
+  # wait 0.1 do # we have to wait for ruby wasm else it won't work
+    html.vr_path(value)
+  # end
+end
+
 new({ method: :data, type: :string, renderer: :html, specific: :raw }) do |value, _user_proc|
   html.raw_data(value)
 end
@@ -108,7 +129,13 @@ new({ method: :type, type: :hash, specific: :atomized, renderer: :html }) do |va
   html.atomized(alien)
 end
 
-
 new({ renderer: :html, method: :selected, specific: :text }) do |value, &bloc|
   html.select_text(value)
-end
+end
+
+new({ renderer: :html, method: :markup }) do |value, &bloc|
+  html.markup(value, bloc)
+end
+
+
+

data/lib/renderers/html/spatial.rb

@@ -64,3 +64,30 @@ end
 new({ renderer: :html, method: :center }) do |params|
   html.center(params, attach)
 end
+
+
+new({ method: :map, renderer: :html, type: :int }) do |params, _user_proc|
+  #TODO : missing zoom params
+  if params== :auto
+    params={longitude: :auto, latitude: :auto}
+  end
+  latitude_found=@latitude
+  longitude_found=@longitude
+  location_hash={longitude: longitude_found, latitude: latitude_found}.merge(params)
+  html.location(location_hash)
+end
+
+new({ method: :map_zoom, renderer: :html, type: :int }) do |params, _user_proc|
+  html.map_zoom(params)
+end
+
+new({ method: :map_pan, renderer: :html, type: :int }) do |params, _user_proc|
+  html.map_pan(params)
+end
+
+
+
+
+
+
+

data/lib/renderers/html/utility.rb

@@ -4,6 +4,10 @@ new({ renderer: :html, method: :web }) do |params, &user_proc|
   params
 end
 
+new({ renderer: :html, method: :meteo }) do |params, &user_proc|
+  html.meteo(params)
+end
+
 new({ renderer: :html, method: :renderers, type: :string })
 new({ renderer: :html, method: :delete, type: :string }) do |params|
   html.delete(id)

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

@@ -18,7 +18,7 @@ end
 @track = @audio_context.createMediaElementSource(@audio_element)
 
 @gain_node = @audio_context.createGain()
-@gain_node[:gain][:value] = 0.5
+@gain_node[:gain][:value] = 0.6
 
 @track.connect(@gain_node)
 @gain_node.connect(@audio_context[:destination])
@@ -35,20 +35,36 @@ end
 
 
 # ######### wadjs
+
 bb=box({left: 333})
 bb.text(:wadjs)
+
+
+
+# Initialize window.snare
+
 init_code = "window.snare = new Wad({source : 'medias/audios/clap.wav'});"
 JS.eval(init_code)
 
-play_code = <<~STRDEL
-  window.snare.play();
-  setTimeout(function() {
-    window.snare.stop();
-  }, 300);
-STRDEL
+# Define the JavaScript playSnare function
+js_code = <<~JAVASCRIPT
+  window.playSnare = function() {
+    window.snare.play();
+    // setTimeout(function() {
+    //  window.snare.stop();
+    //}, 30);
+  }
+JAVASCRIPT
 
+# Evaluate the JavaScript code once
+JS.eval(js_code)
 
-bb.touch(:down) do
-  JS.eval(play_code)
+# Define the Ruby method to call the JavaScript function
+def play_snare
+  JS.eval('window.playSnare()')
 end
 
+# Attach the method to the touch event
+bb.touch(:down) do
+  play_snare
+end

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

@@ -0,0 +1,186 @@
+# frozen_string_literal: true
+
+new(molecule: :calendar) do |params, &bloc|
+
+  cal = box(params)
+  cal.resize(true)
+  cal_id = cal.id
+
+  ##########################  create calendar ##########################
+  cal_name = cal_id
+  calendar = <<~JAVASCRIPT
+    	 window.#{cal_name} = new tui.Calendar('##{cal_id}', {
+    		defaultView: 'month',
+    		usageStatistics: false,
+    		month: {
+    			startDayOfWeek: 0,
+    		},
+    		week: {
+    			showTimezoneCollapseButton: true,
+    			timezones: [{ timezoneOffset: 0, displayLabel: 'UTC', tooltip: 'UTC' }],
+    		},
+    });
+
+
+    
+     
+  JAVASCRIPT
+
+  JS.eval(calendar)
+
+  ######################### Update view methode ############################
+
+
+
+
+  cal.define_singleton_method(:view) do |view_mode|
+    update_calendar = <<~JAVASCRIPT
+      	 function changeCalendarView(view) {
+      	const validViews = ['day', 'week', 'month'];
+      	if (!validViews.includes(view)) {
+      		console.error(`Vue non valide: ${view}. Les vues valides sont: ${validViews.join(', ')}`);
+      		return;
+      	}
+      	window.#{cal_name}.changeView(view);
+      }
+      	changeCalendarView('#{view_mode}');
+
+      	// changeCalendarView('day');
+    JAVASCRIPT
+    JS.eval(update_calendar)
+  end
+
+  cal.define_singleton_method(:event) do |new_event|
+    add_event = <<~JAVASCRIPT
+      window.#{cal_name}.createEvents([
+      		{
+      			id: '#{new_event[:id]}',
+      			calendarId: '#{new_event[:calendarId]}',
+      			title: '#{new_event[:title]}',
+      			category: '#{new_event[:category]}',
+      			dueDateClass: '#{new_event[:dueDateClass]}',
+      			start: '#{new_event[:start]}',
+      			end: '#{new_event[:end]}',
+      		},
+      	]);
+    JAVASCRIPT
+    JS.eval(add_event)
+
+  end
+
+
+
+  #################
+  cal.define_singleton_method(:update_event) do |event_id, calendar_id, updates|
+    update_event = <<~JAVASCRIPT
+    window.#{cal_name}.updateEvent(
+      '#{event_id}',        // ID de l'événement
+      '#{calendar_id}',     // ID du calendrier
+      {
+        title: '#{updates[:title]}',
+        start: new Date('#{updates[:start]}'),
+        end: new Date('#{updates[:end]}'),
+        category: '#{updates[:category]}',
+        dueDateClass: '#{updates[:dueDateClass]}',
+        isAllDay: #{updates[:isAllDay] ? 'true' : 'false'},
+        location: '#{updates[:location]}',
+        raw: #{updates[:raw] || '{}'},
+        state: '#{updates[:state]}'
+      }
+    );
+  JAVASCRIPT
+    JS.eval(update_event)
+  end
+  #################
+
+  cal.define_singleton_method(:delete_event) do |event_id, calendar_id|
+    delete_event = <<~JAVASCRIPT
+    window.#{cal_name}.deleteEvent('#{event_id}', '#{calendar_id}');
+  JAVASCRIPT
+    JS.eval(delete_event)
+  end
+
+  ####################
+
+  cal.define_singleton_method(:log_event_range) do
+    log_range = <<~JAVASCRIPT
+    var selectedRanges = [];
+
+    window.#{cal_name}.on('selectDateTime', function(info) {
+      var range = { start: new Date(info.start), end: new Date(info.end) };
+      selectedRanges.push(range);
+      console.log('Selected ranges:', selectedRanges);
+
+      // Exemple de traitement de chaque plage
+      selectedRanges.forEach(function(range) {
+        console.log('Processing range:', range.start, 'to', range.end);
+      });
+
+      // Réinitialisation après traitement
+      selectedRanges = [];
+    });
+  JAVASCRIPT
+    JS.eval(log_range)
+  end
+  ######################
+
+  cal.define_singleton_method(:handle_range_clear) do
+    clear_range = <<~JAVASCRIPT
+    window.#{cal_name}.on('selectDateTime', function(info) {
+      // Log the selected range (optional)
+      console.log('Selected range:', new Date(info.start), 'to', new Date(info.end));
+      
+      // Clear the selected range
+      window.#{cal_name}.clearGridSelections();
+      
+      console.log('Range selection cleared');
+    });
+  JAVASCRIPT
+    JS.eval(clear_range)
+  end
+
+  ######################
+  # now we return main atome
+  cal
+end
+cal = calendar({ id: :the_cal, width: 396, height: 396 })
+# below we get range when drag on the calendar
+cal.log_event_range
+# below we remove teh  range newly created to avoid graphical pollution
+cal.handle_range_clear
+wait 1 do
+  cal.event(	{
+                id: '1',
+                calendarId: '1',
+                title: 'nouvel example',
+                category: 'time',
+                dueDateClass: '',
+                start: '2024-08-20T10:12:00+00:00',
+                end: '2024-08-20T12:17:00+00:00',
+              })
+end
+
+wait 2 do
+  grab(:the_cal).view(:day)
+  wait 2 do
+    cal.view(:week)
+    wait 2 do
+      cal.view(:month)
+      wait 1 do
+        wait 1 do
+          cal.update_event('1', '1', {
+            title: 'Événement mis à jour',
+            start: '2024-08-20T11:00:00+00:00',
+            end: '2024-08-20T13:00:00+00:00',
+            category: 'time'
+          })
+        end
+        cal.delete_event('1', '1')
+      end
+    end
+  end
+end
+
+
+
+

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

@@ -27,6 +27,7 @@ dragged.drop(:deactivate) do |event|
   grab(event[:destination]).color(:orange)
 end
 box({ left: 333, color: :blue,top: 222, smooth: 6, id: :the_box, drag: true })
+box({ left: 333, color: :red,top: 180, smooth: 9, id: :the_box2, drag: true })
 
 t=text({data: 'touch me to unbind drop enter'})
 t.touch(true) do

data/vendor/assets/application/examples/editor.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/application/examples/inspector.rb

@@ -0,0 +1,129 @@
+#  frozen_string_literal: true
+
+b = text({ id: :toto, left: 0, data: :inspect, depth: 12 })
+
+c = text({ id: :the_c, left: 190, data: 'stop inspect', depth: 12 })
+box({ left: 120, top: 120, width: 333, height: 333, id: :helper })
+
+class Atome
+
+  def follow_cursor(div_id, item_to_be_monitored, &proc)
+    @inspector_active = true
+    last_collided_element = nil
+
+    JS.global[:document].addEventListener('mousemove', @mousemove_listener = proc do |native_event|
+      next unless @inspector_active
+      event = Native(native_event)
+      element = JS.global[:document].getElementById(div_id)
+      width = element[:offsetWidth].to_i
+      height = element[:offsetHeight].to_i
+
+      left = event[:clientX].to_i - (width / 2)
+      top = event[:clientY].to_i - (height / 2)
+
+      element[:style][:left] = "#{left}px"
+      element[:style][:top] = "#{top}px"
+
+      last_collided_element = check_collision(element, item_to_be_monitored, last_collided_element,&proc)
+    end)
+
+    JS.global[:document].addEventListener('touchmove', @touchmove_listener = proc do |native_event|
+      next unless @inspector_active
+      event = Native(native_event)
+
+      touch = event[:touches][0]
+      element = JS.global[:document].getElementById(div_id)
+      width = element[:offsetWidth].to_i
+      height = element[:offsetHeight].to_i
+
+      left = touch[:clientX].to_i - (width / 2)
+      top = touch[:clientY].to_i - (height / 2)
+
+      element[:style][:left] = "#{left}px"
+      element[:style][:top] = "#{top}px"
+
+      last_collided_element = check_collision(element, item_to_be_monitored, last_collided_element)
+    end)
+  end
+
+  def unbind_inspector(div_id)
+    @inspector_active = false
+    JS.global[:console].log("Inspector disabled for element: #{div_id}")
+  end
+
+  # private
+
+  def check_collision(follow_div, item_to_be_monitored, last_collided_element,&proc)
+    ids_to_check = item_to_be_monitored
+
+    ids_to_check.each do |id|
+      element = JS.global[:document].getElementById(id.to_s)
+
+      if element && is_colliding(follow_div, element)
+        if last_collided_element != element[:id]
+          proc.call(element[:id].to_s.to_sym) unless element[:id] == follow_div[:id]
+          return element[:id] # Return the current collided element
+        else
+          return last_collided_element # Return the same element if it's still the same
+        end
+      end
+    end
+
+    return nil # Return nil if no collision is detected
+  end
+
+  def is_colliding(div1, div2)
+    rect1 = div1.getBoundingClientRect()
+    rect2 = div2.getBoundingClientRect()
+
+    rect1_right = rect1[:right].to_f
+    rect1_left = rect1[:left].to_f
+    rect1_bottom = rect1[:bottom].to_f
+    rect1_top = rect1[:top].to_f
+
+    rect2_right = rect2[:right].to_f
+    rect2_left = rect2[:left].to_f
+    rect2_bottom = rect2[:bottom].to_f
+    rect2_top = rect2[:top].to_f
+
+    !(rect1_right < rect2_left ||
+      rect1_left > rect2_right ||
+      rect1_bottom < rect2_top ||
+      rect1_top > rect2_bottom)
+  end
+
+  def inspection(active)
+    if active
+      circle({ width: 15, height: 15, left: 99,
+               color: {red: 0.7, green: 0.7,blue: 0.7,alpha: 0.3},
+               id: :inspector_satellite,
+               shadow: {alpha: 0.7, blur: 9}})
+      follow_cursor('inspector_satellite', fasten) do |id|
+        puts "collision detected with element: #{id}"
+        current_obj=grab(id)
+        puts current_obj.infos
+      end
+    else
+      unbind_inspector(:inspector_satellite)
+      grab(:inspector_satellite).delete(true)
+    end
+  end
+end
+
+########
+events_list = []
+Universe.particle_list.each do |particle, content|
+  if content[:category] == :event
+    events_list << particle
+  end
+end
+
+b.touch(true) do
+  grab(:view).inspection(true)
+end
+
+c.touch(true) do
+  grab(:view).inspection(false)
+end
+
+##############################

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

@@ -42,18 +42,28 @@ end
 # 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 })
+# 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
+# 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
+
+
+# b33=box({left: 99, top: 99})
+#
+# b33.touch(true) do
+#   t.keyboard({ remove: :up }) do
+#     event = Native(native_event)
+#     puts "heyeeee up!!"
+#   end
+# end