atome 0.5.7.5.4 → 0.5.7.5.9

data/lib/renderers/html/html.rb

@@ -4,8 +4,6 @@
 
 class HTML
 
-
-
   def self.locate(selector, base_element = JS.global[:document][:body])
     return base_element if selector.empty?
 
@@ -41,8 +39,6 @@ class HTML
     @element
   end
 
-
-
   def hypertext(params)
     current_div = JS.global[:document].getElementById(@id.to_s)
     current_div[:innerHTML] = params
@@ -200,6 +196,26 @@ class HTML
     hash_result
   end
 
+  def markup(new_tag, _usr_bloc)
+    element_id = @id.to_s
+    js_code = <<~JAVASCRIPT
+      let element = document.getElementById('#{element_id}');
+      if (!element) {
+          console.error(`Element with id "${'#{element_id}'}" not found.`);
+          return;
+      }
+      let newElement = document.createElement('#{new_tag}');
+
+      newElement.style.cssText = element.style.cssText;
+      Array.from(element.attributes).forEach(attr => {
+          newElement.setAttribute(attr.name, attr.value);
+      });
+      newElement.innerHTML = element.innerHTML;
+      element.parentNode.replaceChild(newElement, element);
+    JAVASCRIPT
+    JS.eval(js_code)
+  end
+
   def hyperedit(params, usr_bloc)
     html_object = JS.global[:document].getElementById(params.to_s)
     particles_from_style = {}
@@ -264,6 +280,163 @@ class HTML
     @websocket.close
   end
 
+  # map
+  def location(loc_found)
+    if loc_found[:longitude] && loc_found[:latitude]
+      long_f = loc_found[:longitude]
+      lat_f = loc_found[:latitude]
+      js_code = <<~JAVASCRIPT
+                 const locatorElement = document.getElementById('#{@id}');
+        if (!locatorElement._leaflet_map) {
+            const map = L.map('#{@id}').setView([51.505, -0.09], 2); // Centrer initialement sur une position par défaut
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            }).addTo(map);
+            locatorElement._leaflet_map = map;
+
+            if ('#{long_f}' === 'auto' || '#{lat_f}' === 'auto') {
+                function onLocationFound(e) {
+                    const radius = e.accuracy / 2;
+                    const locationMarker = L.marker(e.latlng).addTo(map)
+                        .bindPopup(`You are within ${radius} meters from this point`).openPopup();
+
+                    // Ajouter un ID au marqueur
+                    locationMarker._icon.id = '#{@id}_locator';
+                    
+                    locationMarker.on('click', function() {
+                        alert(`You clicked the location marker at ${e.latlng.toString()}`);
+                    });
+
+                    const locationCircle = L.circle(e.latlng, radius).addTo(map);
+                    map.setView(e.latlng, map.getZoom()); // Centrer la carte sur la position trouvée en conservant le zoom actuel
+                }
+
+                function onLocationError(e) {
+                    console.log(e.message);
+                }
+
+                map.on('locationfound', onLocationFound);
+                map.on('locationerror', onLocationError);
+
+                map.locate({ setView: true }); // Tenter de localiser l'utilisateur sans modifier le zoom
+            } else {
+                const lat = parseFloat('#{lat_f}');
+                const long = parseFloat('#{long_f}');
+                map.setView([lat, long], map.getZoom()); // Centrer la carte sur les coordonnées fournies en conservant le zoom actuel
+
+                const locationMarker = L.marker([lat, long]).addTo(map)
+                    .bindPopup('This is your point').openPopup();
+
+                // Ajouter un ID au marqueur
+                locationMarker._icon.id = '#{@id}_locator';
+                
+                locationMarker.on('click', function() {
+                    alert(`You clicked the location marker at [${lat}, ${long}]`);
+                });
+            }
+
+            // Ecouter l'événement 'load' de la carte pour rafraîchir l'écran et afficher une alerte
+            map.whenReady(function() {
+                map.invalidateSize();
+        // important setimout re-center the view else the view is incorrect (map.invalidateSize() refresh the view)
+        setTimeout(function() {
+                map.invalidateSize();
+        }, 0001);
+            });
+        } else {
+            const map = locatorElement._leaflet_map;
+            if ('#{long_f}' !== 'auto' && '#{lat_f}' !== 'auto') {
+                const lat = parseFloat('#{lat_f}');
+                const long = parseFloat('#{long_f}');
+                map.setView([lat, long], map.getZoom()); // Centrer la carte sur les coordonnées fournies en conservant le zoom actuel
+
+                const locationMarker = L.marker([lat, long]).addTo(map)
+                    .bindPopup('This is your point').openPopup();
+
+                // Ajouter un ID au marqueur
+                locationMarker._icon.id = '#{@id}_locator';
+                
+                locationMarker.on('click', function() {
+                    alert(`You clicked the location marker at [${lat}, ${long}]`);
+                });
+            }
+
+            // Ecouter l'événement 'load' de la carte pour rafraîchir l'écran et afficher une alerte
+            map.whenReady(function() {
+            
+        setTimeout(function() {
+                map.invalidateSize();
+        }, 0001);
+            });
+        }
+
+        // Ecouter l'événement de redimensionnement de la fenêtre pour réinitialiser la taille de la carte et la vue
+        window.addEventListener('resize', () => {
+            const map = locatorElement._leaflet_map;
+        setTimeout(function() {
+                map.invalidateSize();
+        }, 0001);
+        });
+
+
+
+      JAVASCRIPT
+      JS.eval(js_code)
+
+    end
+  end
+
+  def map_zoom(params)
+    js_code = <<~JAVASCRIPT
+      const locatorElement = document.getElementById('#{@id}');
+            const map = locatorElement._leaflet_map;
+                map.setZoom(#{params});
+    JAVASCRIPT
+    JS.eval(js_code)
+  end
+
+  def map_pan(params)
+    left_found = params[:left] || 0
+    top_found = params[:top] || 0
+    js_code = <<~JAVASCRIPT
+      const locatorElement = document.getElementById('#{@id}');
+            const map = locatorElement._leaflet_map;
+                 map.panBy([#{left_found}, #{top_found}], { animate: true });
+    JAVASCRIPT
+    JS.eval(js_code)
+  end
+
+  # meteo
+  def meteo_helper(data)
+    grab(@id).instance_variable_get('@meteo_code')[:meteo].call(data)
+  end
+
+  def meteo(location)
+    js_code = <<~JAVASCRIPT
+      const url = 'https://api.openweathermap.org/data/2.5/weather?q=#{location},fr&appid=c21a75b667d6f7abb81f118dcf8d4611&units=metric';
+      async function fetchWeather() {
+          try {
+              let response = await fetch(url);
+
+              if (!response.ok) {
+                  throw new Error('Erreur HTTP ! statut : ' + response.status);
+              }
+
+              let data = await response.json();
+
+
+      let jsonString = JSON.stringify(data);
+      atomeJsToRuby("grab('#{@id}').html.meteo_helper("+jsonString+")");
+          } catch (error) {
+              console.log('Error getting meteo : ' + error.message);
+          }
+      }
+
+      fetchWeather();
+    JAVASCRIPT
+    JS.eval(js_code)
+  end
+
   def attr(attribute, value)
     @element.setAttribute(attribute.to_s, value.to_s)
     self
@@ -290,6 +463,39 @@ class HTML
     delete(id) unless element_to_delete.inspect == 'null'
   end
 
+  def editor(id)
+    check_double(id)
+    editor_id = "#{id}_editor"
+    check_double(editor_id)
+    markup_found = @original_atome.markup || :textarea
+    @element_type = markup_found.to_s
+    @element = JS.global[:document].createElement(@element_type)
+    JS.global[:document][:body].appendChild(@element)
+    add_class('atome')
+    id(id)
+    self
+  end
+
+  # def editor(id)
+  #   check_double(id)
+  #   editor_id = "#{id}_editor"
+  #   check_double(editor_id)
+  #   markup_found = @original_atome.markup || :div
+  #   @element_type = markup_found.to_s
+  #   @element = JS.global[:document].createElement(@element_type)
+  #  @element.setAttribute('style', 'font-size: 12px;')
+  #
+  #   JS.global[:document][:body].appendChild(@element)
+  #   add_class('atome')
+  #   id(id)
+  #   textarea = JS.global[:document].createElement('textarea')
+  #   textarea.setAttribute('id', editor_id)
+  #   wait 0.1 do
+  #     @element.appendChild(textarea)
+  #   end
+  #   self
+  # end
+
   def shape(id)
     # we remove any element if the id already exist
     check_double(id)
@@ -373,6 +579,49 @@ class HTML
     self
   end
 
+  def vr(id)
+    # we remove any element if the id already exist
+    check_double(id)
+    markup_found = @original_atome.markup || :div
+    @element_type = markup_found.to_s
+    @element = JS.global[:document].createElement(@element_type)
+    JS.global[:document][:body].appendChild(@element)
+    add_class('atome')
+    self.id(id)
+
+    self
+  end
+
+  def vr_path(objet_path)
+    js_code = <<~JAVASCRIPT
+      initWithParam('#{objet_path}', '#{@id}', 'method', 'params');
+    JAVASCRIPT
+
+    JS.eval(js_code)
+    # tags = <<~HTML
+    #   <a-scene embedded>
+    #     <a-sky src="#{objet_path}" rotation="0 -130 0"></a-sky>
+    #     <a-text font="kelsonsans" value="Puy de Sancy, France" width="6" position="-2.5 0.25 -1.5" rotation="0 15 0"></a-text>
+    #     <!-- Hotspot -->
+    #     <a-sphere id="clickable" color="#FF0000" radius="0.1" position="0 1 -2"
+    #               event-set__mouseenter="_event: mouseenter; color: green"
+    #               event-set__mouseleave="_event: mouseleave; color: red"></a-sphere>
+    #     <!-- Camera with cursor to detect clicks -->
+    #   </a-scene>
+    # HTML
+    # @element[:innerHTML] = tags
+    #
+    # # Ajouter un écouteur d'événement pour le hotspot
+    # cursor = JS.global[:document].getElementById('cursor')
+    # cursor.addEventListener('click', -> {
+    #   target = cursor.components.cursor.intersectedEl
+    #   if target && target.id == 'clickable'
+    #     alert :yes
+    #   end
+    # })
+
+  end
+
   def www(id)
     # we remove any element if the id already exist
     check_double(id)
@@ -607,7 +856,9 @@ class HTML
 
   def delete(id_to_delete)
     element_to_delete = JS.global[:document].getElementById(id_to_delete.to_s)
-    element_to_delete.remove if element_to_delete
+    return unless element_to_delete.to_s != 'null'
+    return unless element_to_delete
+    element_to_delete.remove
   end
 
   def append(child_id_found)
@@ -618,7 +869,6 @@ class HTML
 
   # events handlers
   def on(property, _option)
-    bloc = @original_atome.instance_variable_get('@on_code')[:view_resize]
     property = property.to_s
 
     if property.start_with?('media:')
@@ -628,6 +878,7 @@ class HTML
       mql = JS.global[:window].matchMedia(media_query)
 
       event_handler = ->(event) do
+        bloc = @original_atome.instance_variable_get('@on_code')[:view_resize]
         proc_content = bloc.call({ matches: event[:matches] }) if event_validation(bloc)
         if proc_content.instance_of? Hash
           proc_content.each do |k, v|
@@ -640,18 +891,27 @@ class HTML
       mql.addListener(event_handler)
 
     elsif property == 'resize'
-      event_handler = ->(event) do
-        width = JS.global[:window][:innerWidth]
-        height = JS.global[:window][:innerHeight]
-        proc_content = bloc.call({ width: width, height: height }) if event_validation(bloc)
-        if proc_content.instance_of? Hash
-          proc_content.each do |k, v|
-            @original_atome.send(k, v)
+      unless @on_resize_already_set
+        event_handler = ->(event) do
+          width = JS.global[:window][:innerWidth]
+          height = JS.global[:window][:innerHeight]
+          blocs = @original_atome.instance_variable_get('@on_code')[:view_resize]
+          blocs.each do |bloc|
+            proc_content = bloc.call({ width: width, height: height }) if event_validation(bloc)
+            if proc_content.instance_of? Hash
+              proc_content.each do |k, v|
+                @original_atome.send(k, v)
+              end
+            end
           end
         end
-      end
 
-      JS.global[:window].addEventListener('resize', event_handler)
+        JS.global[:window].addEventListener('resize', event_handler)
+      end
+      @on_resize_already_set = true
+    elsif property == 'remove'
+      alert 'ok'
+      @original_atome.instance_variable_get('@on_code')[:view_resize] = []
     else
       event_handler = ->(event) do
         proc_content = bloc.call(event) if event_validation(bloc)
@@ -733,14 +993,13 @@ class HTML
     end
   end
 
-  def drag_code(params=nil)
-    #FIXME : this method is an ugly patch when refreshing an atome twice, else it crash
-    # and lose it's drag
-    drag_move(params)
-  end
+  # def drag_code(params = nil)
+  #   # FIXME : this method is an ugly patch when refreshing an atome twice, else it crash
+  #   # and lose it's drag
+  #   drag_move(params)
+  # end
 
   def event(action, variance, option = nil)
-  #   puts " remove 'if option', if unable ti unbind# : #{action} _ #{variance}"
     send("#{action}_#{variance}", option)
   end
 
@@ -749,210 +1008,260 @@ class HTML
     @original_atome.top(restricted_y)
   end
 
-  def drag_remove(option)
+  def drag_move(_option)
 
-    @draggable = nil
-    interact = JS.eval("return interact('##{@id}')")
+    unless @drag_move_already_set
+      # the condition below prevent drag accumulation
+      interact = JS.eval("return interact('##{@id}')")
+
+      unless @draggable
+        interact.draggable({
+                             drag: true,
+                             inertia: { resistance: 12,
+                                        minSpeed: 200,
+                                        endSpeed: 100 },
+                           })
+        unless @first_drag
+          interact.on('dragmove') do |native_event|
+            drag_moves = @original_atome.instance_variable_get('@drag_code')[:move]
+
+            # the use of Native is only for Opal (look at lib/platform_specific/atome_wasm_extensions.rb for more infos)
+            event = Native(native_event)
+            # we use .call instead of instance_eval because instance_eval bring the current object as context
+            # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
+            # group etc..
+            drag_moves.each do |drag_move|
+              proc_content = drag_move.call(event) if event_validation(drag_move)
+              if proc_content.instance_of? Hash
+                proc_content.each do |k, v|
+                  @original_atome.send(k, v)
+                end
+              end
+            end
 
-    case option
-    when :start
-      @drag_start = ''
-    when :end, :stop
-      @drag_end = ''
-    when :move
-      interact.draggable(false)
-      # interact.unset
-      @drag_move = nil
-
-    when :locked
-      @drag_locked = ''
-    when :restrict
-      @drag_restrict = ''
-    else
-      # to remove all interact event ( touch, drag, scale, ... uncomment below)
-      @drag_start = ''
-      @drag_end = ''
-      @drag_locked = ''
-      @drag_restrict = ''
-      @drag_move = nil
-      interact.draggable(false)
-      # interact.unset
+            Universe.allow_tool_operations = false
+            dx = event[:dx]
+            dy = event[:dy]
+            x = (@original_atome.left || 0) + dx.to_f
+            y = (@original_atome.top || 0) + dy.to_f
+            @original_atome.left(x)
+            @original_atome.top(y)
+          end
+
+        end
+      end
+      @first_drag = true
+      @draggable = true
+    end
+    @drag_move_already_set = true
+
+  end
+
+  def drag_restrict(option)
+
+    unless @drag_restrict_already_set
+      interact = JS.eval("return interact('##{@id}')")
+      interact.draggable({
+                           drag: true,
+                           inertia: { resistance: 12,
+                                      minSpeed: 200,
+                                      endSpeed: 100 },
+                         })
+
+      if option.instance_of? Hash
+        max_left = grab(:view).to_px(:width)
+        max_top = grab(:view).to_px(:height)
+        min_left = 0
+        min_top = 0
+
+        if option[:max]
+          max_left = option[:max][:left] || max_left
+          max_top = option[:max][:top] || max_top
+        else
+          max_left
+          max_top
+        end
+        if option[:min]
+          min_left = option[:min][:left] || min_left
+          min_top = option[:min][:top] || min_top
+        else
+          min_left
+          min_top
+        end
+      else
+        parent_found = grab(option)
+        min_left = parent_found.left
+        min_top = parent_found.top
+        parent_width = parent_found.compute({ particle: :width })[:value]
+        parent_height = parent_found.compute({ particle: :height })[:value]
+        original_width = @original_atome.width
+        original_height = @original_atome.height
+        max_left = min_left + parent_width - original_width
+        max_top = min_top + parent_height - original_height
+      end
+
+      interact.on('dragmove') do |native_event|
+        drag_moves = @original_atome.instance_variable_get('@drag_code')[:restrict]
+
+        # the use of Native is only for Opal (look at lib/platform_specific/atome_wasm_extensions.rb for more infos)
+        event = Native(native_event)
+        # we use .call instead of instance_eval because instance_eval bring the current object as context
+        # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
+        # group etc..
+        drag_moves.each do |drag_move|
+          proc_content = drag_move.call(event) if event_validation(drag_move)
+          if proc_content.instance_of? Hash
+            proc_content.each do |k, v|
+              @original_atome.send(k, v)
+            end
+          end
+        end
+
+        dx = event[:dx]
+        dy = event[:dy]
+        x = (@original_atome.left || 0) + dx.to_f
+        y = (@original_atome.top || 0) + dy.to_f
+        restricted_x = [[x, min_left].max, max_left].min
+        restricted_y = [[y, min_top].max, max_top].min
+        restrict_movement(restricted_x, restricted_y)
+      end
     end
+    @drag_restrict_already_set = true
 
   end
 
   def drag_start(_option)
-    interact = JS.eval("return interact('##{@id}')")
-    @drag_start = @original_atome.instance_variable_get('@drag_code')[:start]
-    interact.on('dragstart') do |native_event|
-      event = Native(native_event)
-      # we use .call instead of instance_eval because instance_eval bring the current object as context
-      # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
-      # group etc..
-      proc_content = @drag_start.call(event) if event_validation(@drag_start)
-      if proc_content.instance_of? Hash
-        proc_content.each do |k, v|
-          @original_atome.send(k, v)
+    unless @drag_start_already_set
+      interact = JS.eval("return interact('##{@id}')")
+      interact.on('dragstart') do |native_event|
+        drag_starts = @original_atome.instance_variable_get('@drag_code')[:start]
+        event = Native(native_event)
+        # we use .call instead of instance_eval because instance_eval bring the current object as context
+        # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
+        # group etc..
+        drag_starts.each do |drag_start|
+          proc_content = drag_start.call(event) if event_validation(drag_start)
+          if proc_content.instance_of? Hash
+            proc_content.each do |k, v|
+              @original_atome.send(k, v)
+            end
+          end
         end
       end
     end
+    @drag_start_already_set = true
   end
 
   def drag_end(_option)
-    interact = JS.eval("return interact('##{@id}')")
-    @drag_end = @original_atome.instance_variable_get('@drag_code')[:end]
-    interact.on('dragend') do |native_event|
-      event = Native(native_event)
-      # we use .call instead of instance_eval because instance_eval bring the current object as context
-      # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
-      # group etc..
-      proc_content = @drag_end.call(event) if event_validation(@drag_end)
-      if proc_content.instance_of? Hash
-        proc_content.each do |k, v|
-          @original_atome.send(k, v)
+
+    unless @drag_end_already_set
+      interact = JS.eval("return interact('##{@id}')")
+      interact.on('dragend') do |native_event|
+        drag_ends = @original_atome.instance_variable_get('@drag_code')[:end]
+        event = Native(native_event)
+        # we use .call instead of instance_eval because instance_eval bring the current object as context
+        # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
+        # group etc..
+        drag_ends.each do |drag_end|
+          proc_content = drag_end.call(event) if event_validation(drag_end)
+          if proc_content.instance_of? Hash
+            proc_content.each do |k, v|
+              @original_atome.send(k, v)
+            end
+          end
         end
+
       end
     end
-  end
+    @drag_end_already_set = true
 
-  def drag_move(_option)
-    # the condition below prevent drag accumulation
-    interact = JS.eval("return interact('##{@id}')")
+  end
 
-    unless @draggable
+  def drag_locked(_option)
+    unless @drag_locked_already_set
+      interact = JS.eval("return interact('##{@id}')")
       interact.draggable({
                            drag: true,
                            inertia: { resistance: 12,
                                       minSpeed: 200,
-                                      endSpeed: 100 },
+                                      endSpeed: 100 }
                          })
-      @drag_move = @original_atome.instance_variable_get('@drag_code')[:move]
-      unless @first_drag
-        interact.on('dragmove') do |native_event|
-          # the use of Native is only for Opal (look at lib/platform_specific/atome_wasm_extensions.rb for more infos)
-          event = Native(native_event)
-          # we use .call instead of instance_eval because instance_eval bring the current object as context
-          # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
-          # group etc..
-          proc_content = @drag_move.call(event) if event_validation(@drag_move)
+
+      interact.on('dragmove') do |native_event|
+        drag_locks = @original_atome.instance_variable_get('@drag_code')[:locked]
+        # the use of Native is only for Opal (look at lib/platform_specific/atome_wasm_extensions.rb for more infos)
+        event = Native(native_event)
+        # we use .call instead of instance_eval because instance_eval bring the current object as context
+        # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
+        # group etc..
+        drag_locks.each do |drag_lock|
+          proc_content = drag_lock.call(event) if event_validation(drag_lock)
           if proc_content.instance_of? Hash
             proc_content.each do |k, v|
               @original_atome.send(k, v)
             end
           end
-          Universe.allow_tool_operations = false
-          dx = event[:dx]
-          dy = event[:dy]
-          x = (@original_atome.left || 0) + dx.to_f
-          y = (@original_atome.top || 0) + dy.to_f
-          @original_atome.left(x)
-          @original_atome.top(y)
         end
-
       end
     end
-    @first_drag = true
-    @draggable = true
+    @drag_locked_already_set = true
+
   end
 
-  def drag_restrict(option)
+  def remove_this_drag(option)
+    @original_atome.instance_variable_get('@drag_code')[option] = [] if @original_atome.instance_variable_get('@drag_code')
+  end
+
+  def drag_remove(_opt)
+
     interact = JS.eval("return interact('##{@id}')")
-    interact.draggable({
-                         drag: true,
-                         inertia: { resistance: 12,
-                                    minSpeed: 200,
-                                    endSpeed: 100 },
-                       })
-
-    @drag_move = @original_atome.instance_variable_get('@drag_code')[:restrict]
-    if option.instance_of? Hash
-      max_left = grab(:view).to_px(:width)
-      max_top = grab(:view).to_px(:height)
-      min_left = 0
-      min_top = 0
-
-      if option[:max]
-        max_left = option[:max][:left] || max_left
-        max_top = option[:max][:top] || max_top
-      else
-        max_left
-        max_top
-      end
-      if option[:min]
-        min_left = option[:min][:left] || min_left
-        min_top = option[:min][:top] || min_top
-      else
-        min_left
-        min_top
-      end
+    if @original_atome.instance_variable_get('@drag_code')
+      options = @original_atome.instance_variable_get('@drag_code')[:remove]
     else
-      parent_found = grab(option)
-      min_left = parent_found.left
-      min_top = parent_found.top
-      parent_width = parent_found.compute({ particle: :width })[:value]
-      parent_height = parent_found.compute({ particle: :height })[:value]
-      original_width = @original_atome.width
-      original_height = @original_atome.height
-      max_left = min_left + parent_width - original_width
-      max_top = min_top + parent_height - original_height
-    end
-
-    interact.on('dragmove') do |native_event|
-      # the use of Native is only for Opal (look at lib/platform_specific/atome_wasm_extensions.rb for more infos)
-      event = Native(native_event)
-      # we use .call instead of instance_eval because instance_eval bring the current object as context
-      # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
-      # group etc..
-      proc_content = @drag_move.call(event) if event_validation(@drag_move)
-      if proc_content.instance_of? Hash
-        proc_content.each do |k, v|
-          @original_atome.send(k, v)
-        end
-      end
-      dx = event[:dx]
-      dy = event[:dy]
-      x = (@original_atome.left || 0) + dx.to_f
-      y = (@original_atome.top || 0) + dy.to_f
-      restricted_x = [[x, min_left].max, max_left].min
-      restricted_y = [[y, min_top].max, max_top].min
-      restrict_movement(restricted_x, restricted_y)
+      options = false
     end
-  end
 
-  def drag_locked(_option)
-    interact = JS.eval("return interact('##{@id}')")
-    interact.draggable({
-                         drag: true,
-                         inertia: { resistance: 12,
-                                    minSpeed: 200,
-                                    endSpeed: 100 }
-                       })
-
-    @drag_lock = @original_atome.instance_variable_get('@drag_code')[:locked]
-    interact.on('dragmove') do |native_event|
-      # the use of Native is only for Opal (look at lib/platform_specific/atome_wasm_extensions.rb for more infos)
-      event = Native(native_event)
-      # we use .call instead of instance_eval because instance_eval bring the current object as context
-      # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
-      # group etc..
-      proc_content = @drag_lock.call(event) if event_validation(@drag_lock)
-      if proc_content.instance_of? Hash
-        proc_content.each do |k, v|
-          @original_atome.send(k, v)
+    options.each do |option|
+      if option.instance_of? Array
+        option.each do |opt|
+          remove_this_drag(opt)
         end
+        return false
+      end
+      @element[:style][:cursor] = 'default'
+
+      @draggable = nil
+      case option
+      when :start
+        remove_this_drag(:start)
+      when :end, :stop
+        remove_this_drag(:end)
+        remove_this_drag(:stop)
+      when :move
+        remove_this_drag(:move)
+      when :locked
+        remove_this_drag(:locked)
+      when :restrict
+        remove_this_drag(:restrict)
+      else
+        interact.draggable(false)
+
       end
     end
+
   end
 
-  def drop_action(native_event, bloc)
+  def drop_common(method, native_event)
     event = Native(native_event)
     draggable_element = event[:relatedTarget][:id].to_s
     dropzone_element = event[:target][:id].to_s
     # we use .call instead of instance_eval because instance_eval bring the current object as context
     # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
     # group etc..
-    proc_content = bloc.call({ source: draggable_element, destination: dropzone_element }) if event_validation(bloc)
-    if proc_content.instance_of? Hash
+    proc_contents = @original_atome.instance_variable_get('@drop_code')[method]
+    proc_contents.each do |proc_content|
+      proc_content = proc_content.call({ source: draggable_element, destination: dropzone_element }) if event_validation(proc_content)
+      return unless proc_content.instance_of? Hash
       proc_content.each do |k, v|
         @original_atome.send(k, v)
       end
@@ -960,97 +1269,108 @@ class HTML
   end
 
   def drop_activate(_option)
-    interact = JS.eval("return interact('##{@id}')")
-    @drop_activate = @original_atome.instance_variable_get('@drop_code')[:activate]
-
-    interact.dropzone({
-                        accept: nil, # Accept any element
-                        overlap: 0.75,
-                        ondropactivate: lambda do |native_event|
-                          drop_action(native_event, @drop_activate) if event_validation(@drop_activate)
-                        end
-                      })
-  end
+    unless @drop_activate_already_set
+      interact = JS.eval("return interact('##{@id}')")
+      interact.dropzone({
+                          accept: nil, # Accept any element
+                          overlap: 0.75,
+                          ondropactivate: lambda do |native_event|
+                            drop_common(:activate, native_event)
+                          end
+                        })
+    end
 
-  def drop_deactivate(_option)
-    interact = JS.eval("return interact('##{@id}')")
-    @drop_deactivate = @original_atome.instance_variable_get('@drop_code')[:deactivate]
-    interact.dropzone({
-                        # accept: nil, # Accept any element
-                        # FIXME : remove because os an opal bug since 1.8 reactivate when opal will be debbuged
-                        ondropdeactivate: lambda do |native_event|
-                          drop_action(native_event, @drop_deactivate) if event_validation(@drop_deactivate)
-                        end
-                      })
+    @drop_activate_already_set = true
   end
 
   def drop_dropped(_option)
-    @drop_dropped = @original_atome.instance_variable_get('@drop_code')[:dropped]
-    interact = JS.eval("return interact('##{@id}')")
-    interact.dropzone({
-                        # accept: nil, # Accept any element
-                        overlap: 0.75,
-                        # FIXME : remove because os an opal bug since 1.8 reactivate when opal will be debbuged
-                        ondrop: lambda do |native_event|
-                          drop_action(native_event, @drop_dropped) if event_validation(@drop_dropped)
-                        end
-                      })
+    unless @drop_dropped_already_set
+      interact = JS.eval("return interact('##{@id}')")
+      interact.dropzone({
+                          overlap: 0.75,
+                          # FIXME : remove because os an opal bug since 1.8 reactivate when opal will be debbuged
+                          ondrop: lambda do |native_event|
+                            drop_common(:dropped, native_event)
+                          end
+                        })
+
+    end
+    @drop_dropped_already_set = true
   end
 
   def drop_enter(_option)
-    interact = JS.eval("return interact('##{@id}')")
+    unless @drop_enter_already_set
+      interact = JS.eval("return interact('##{@id}')")
+      interact.dropzone({
+                          overlap: 0.001,
+                          # FIXME : remove because os an opal bug since 1.8 reactivate when opal will be debbuged
+                          ondragenter: lambda do |native_event|
+                            drop_common(:enter, native_event)
+                          end
+                        })
+    end
+    @drop_enter_already_set = true
+  end
+
+  def drop_leave(_option)
+    unless @drop_leave_already_set
+      interact = JS.eval("return interact('##{@id}')")
+      interact.dropzone({
+                          # FIXME : remove because os an opal bug since 1.8 reactivate when opal will be debbuged
+                          ondragleave: lambda do |native_event|
+                            drop_common(:leave, native_event)
+                          end
+                        })
+    end
 
-    @drop_enter = @original_atome.instance_variable_get('@drop_code')[:enter]
+    @drop_leave_already_set = true
 
-    interact.dropzone({
-                        overlap: 0.001,
-                        # FIXME : remove because os an opal bug since 1.8 reactivate when opal will be debbuged
-                        ondragenter: lambda do |native_event|
-                          drop_action(native_event, @drop_enter) if event_validation(@drop_enter)
-                        end
-                      })
   end
 
-  def drop_leave(_option)
-    interact = JS.eval("return interact('##{@id}')")
-    @drop_leave = @original_atome.instance_variable_get('@drop_code')[:leave]
+  def drop_deactivate(_option)
+    unless @drop_remove_already_set
 
-    interact.dropzone({
-                        # FIXME : remove because os an opal bug since 1.8 reactivate when opal will be debbuged
-                        ondragleave: lambda do |native_event|
-                          drop_action(native_event, @drop_leave) if event_validation(@drop_enter)
-                        end
-                      })
+      interact = JS.eval("return interact('##{@id}')")
+      interact.dropzone({
+                          # accept: nil, # Accept any element
+                          # FIXME : remove because os an opal bug since 1.8 reactivate when opal will be debbuged
+                          ondropdeactivate: lambda do |native_event|
+                            drop_common(:deactivate, native_event)
+                          end
+                        })
 
+    end
+    @drop_remove_already_set = true
   end
 
   def drop_remove(option)
     case option
     when :activate
-      @drop_activate = ''
+      @original_atome.instance_variable_get('@drop_code')[:activate] = []
     when :deactivate
-      @drop_deactivate = ''
+      @original_atome.instance_variable_get('@drop_code')[:deactivate] = []
     when :dropped
-      @drop_dropped = ''
+      @original_atome.instance_variable_get('@drop_code')[:dropped] = []
     when :enter
-      @drop_enter = ''
+      @original_atome.instance_variable_get('@drop_code')[:enter] = []
     when :leave
-      @drop_leave = ''
+      @original_atome.instance_variable_get('@drop_code')[:leave] = []
     else
-      # to remove all interact event ( touch, drag, scale, ... uncomment below)
-      # interact.unset
-      @drop_activate = ''
-      @drop_deactivate = ''
-      @drop_dropped = ''
-      @drop_enter = ''
-      @drop_leave = ''
-
+      drop_remove(:activate)
+      drop_remove(:deactivate)
+      drop_remove(:dropped)
+      drop_remove(:enter)
+      drop_remove(:leave)
     end
 
   end
 
   def resize(params, options)
     interact = JS.eval("return interact('##{@id}')")
+
+    # Désactiver explicitement le déplacement
+    # interact.draggable(false)
+
     if params == :remove
       @resize = ''
       interact.resizable(false)
@@ -1060,6 +1380,7 @@ class HTML
       max_width = options[:max][:width] || 3000
       max_height = options[:max][:height] || 3000
       @resize = @original_atome.instance_variable_get('@resize_code')[:resize]
+
       interact.resizable({
                            edges: { left: true, right: true, top: true, bottom: true },
                            inertia: true,
@@ -1067,12 +1388,8 @@ class HTML
                            listeners: {
                              move: lambda do |native_event|
                                Universe.allow_tool_operations = false
-                               # if @resize.is_a?(Proc)
+
                                event = Native(native_event)
-                               # we use .call instead of instance_eval because instance_eval bring the current object as context
-                               # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
-                               # group etc..
-                               # @resize.call(event) if event_validation(@resize)
                                proc_content = @resize.call(event) if event_validation(@resize)
                                if proc_content.instance_of? Hash
                                  proc_content.each do |k, v|
@@ -1084,18 +1401,19 @@ class HTML
                                y = (@element[:offsetTop].to_i || 0)
                                width = event[:rect][:width]
                                height = event[:rect][:height]
+
                                # Translate when resizing from any corner
                                x += event[:deltaRect][:left].to_f
                                y += event[:deltaRect][:top].to_f
+
                                @original_atome.width width.to_i if width.to_i.between?(min_width, max_width)
                                @original_atome.height height.to_i if height.to_i.between?(min_height, max_height)
                                @original_atome.left(x)
                                @original_atome.top(y)
-                             end
-                             # end
+                             end,
                            },
-
                          })
+
     end
 
   end
@@ -1121,87 +1439,112 @@ class HTML
   end
 
   def over_over(_option)
-    interact = JS.eval("return interact('##{@id}')")
-    @over_over = @original_atome.over_code[:over]
-    interact.on('mouseover') do |native_event|
-      JS.global[:myRubyMouseOverCallback] = Proc.new { @original_atome.over_code[:over].call }
+    return if @over_over_already_set
+    @element.addEventListener('mouseover') do |native_event|
+      over_options = @original_atome.instance_variable_get('@over_code')[:flyover]
       event = Native(native_event)
-      # we use .call instead of instance_eval because instance_eval bring the current object as context
-      # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
-      # group etc..
-
-      proc_content = @over_over.call(event) if event_validation(@over_over)
-      if proc_content.instance_of? Hash
-        proc_content.each do |k, v|
-          @original_atome.send(k, v)
+      over_options.each do |over_option|
+        proc_content = over_option.call(event) if event_validation(over_option)
+        if proc_content.instance_of? Hash
+          proc_content.each do |k, v|
+            @original_atome.send(k, v)
+          end
         end
       end
     end
+    @over_over_already_set = true
+    # unless @over_over_already_set
+    #   interact = JS.eval("return interact('##{@id}')")
+    #   over_overs = @original_atome.instance_variable_get('@over_code')[:flyover]
+    #   # return unless over_overs
+    #   over_overs.each do |over_over|
+    #     interact.on('mouseover') do |native_event|
+    #       over_over_event = Native(native_event)
+    #       # we use .call instead of instance_eval because instance_eval bring the current object as context
+    #       # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
+    #       # group etc..
+    #
+    #       proc_content = over_over.call(over_over_event) if event_validation(over_over)
+    #       if proc_content.instance_of? Hash
+    #         proc_content.each do |k, v|
+    #           @original_atome.send(k, v)
+    #         end
+    #       end
+    #     end
+    #   end
+    # end
+    # @over_over_already_set = true
   end
 
   def over_enter(_option)
-    @over_enter = @original_atome.instance_variable_get('@over_code')[:enter]
-    return unless @over_enter
-
-    @over_enter_callback = lambda do |event|
-      # we use .call instead of instance_eval because instance_eval bring the current object as context
-      # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
-      # group etc..
-      proc_content = @over_enter.call(event) if event_validation(@over_enter)
-      if proc_content.instance_of? Hash
-        proc_content.each do |k, v|
-          @original_atome.send(k, v)
+    return if @over_enter_already_set
+    @element.addEventListener('mouseenter') do |native_event|
+      over_options = @original_atome.instance_variable_get('@over_code')[:enter]
+      event = Native(native_event)
+      over_options.each do |over_option|
+        proc_content = over_option.call(event) if event_validation(over_option)
+        if proc_content.instance_of? Hash
+          proc_content.each do |k, v|
+            @original_atome.send(k, v)
+          end
         end
       end
     end
-    @element.addEventListener('mouseenter', @over_enter_callback)
+    @over_enter_already_set = true
+    # unless @over_enter_already_set
+    #   over_enters = @original_atome.instance_variable_get('@over_code')[:enter]
+    #   # return unless over_enters
+    #
+    #   over_enters.each do |over_enter|
+    #     @over_enter_callback = lambda do |event|
+    #       # we use .call instead of instance_eval because instance_eval bring the current object as context
+    #       # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
+    #       # group etc..
+    #       proc_content = over_enter.call(event) if event_validation(over_enter)
+    #       if proc_content.instance_of? Hash
+    #         proc_content.each do |k, v|
+    #           @original_atome.send(k, v)
+    #         end
+    #       end
+    #     end
+    #     @element.addEventListener('mouseenter', @over_enter_callback)
+    #
+    #   end
+    #
+    # end
+    # @over_enter_already_set = true
 
   end
 
   def over_leave(_option)
-
-    @over_leave = @original_atome.instance_variable_get('@over_code')[:leave]
-    return unless @over_leave
-
-    @over_leave_callback = lambda do |event|
-
-      # we use .call instead of instance_eval because instance_eval bring the current object as context
-      # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
-      # group etc..
-      proc_content = @over_leave.call(event) if event_validation(@over_leave)
-      if proc_content.instance_of? Hash
-        proc_content.each do |k, v|
-          @original_atome.send(k, v)
+    return if @over_leave_already_set
+    @element.addEventListener('mouseleave') do |native_event|
+      over_leaves = @original_atome.instance_variable_get('@over_code')[:leave]
+      event = Native(native_event)
+      over_leaves.each do |over_leave|
+        proc_content = over_leave.call(event) if event_validation(over_leave)
+        if proc_content.instance_of? Hash
+          proc_content.each do |k, v|
+            @original_atome.send(k, v)
+          end
         end
       end
     end
-    @element.addEventListener('mouseleave', @over_leave_callback)
-
+    @over_leave_already_set = true
   end
 
   def over_remove(option)
     case option
     when :enter
-      if @over_enter_callback
-        # Remove the event listener using the same lambda
-        @element.removeEventListener('mouseenter', @over_enter_callback)
-        @over_enter_callback = nil
-        @over_enter = nil
-      end
+      @original_atome.instance_variable_get('@over_code')[:enter] = []
     when :leave
-      @element.removeEventListener('mouseleave', @over_leave_callback)
-      @over_leave_callback = nil
-      @over_leave = nil
+      @original_atome.instance_variable_get('@over_code')[:leave] = []
     when :over
-      @over_over = ''
+      @original_atome.instance_variable_get('@over_code')[:flyover] = []
     else
-      @element.removeEventListener('mouseenter', @over_enter_callback)
-      @over_enter_callback = nil
-      @over_enter = nil
-      @element.removeEventListener('mouseleave', @over_leave_callback)
-      @over_leave_callback = nil
-      @over_leave = nil
-      @over_over = ''
+      over_remove(:enter)
+      over_remove(:leave)
+      over_remove(:over)
     end
   end
 
@@ -1209,155 +1552,119 @@ class HTML
     action_proc.is_a?(Proc) && (!Universe.edit_mode || @original_atome.tag[:system])
   end
 
-  def touch_down(_option)
-    @element[:style][:cursor] = 'pointer'
-    @touch_down = @original_atome.instance_variable_get('@touch_code')[:down]
-    interact = JS.eval("return interact('##{@id}')")
-    # unless @touch_removed[:down]
-    interact.on('down') do |native_event|
-      @touch_down_event = Native(native_event)
-      # we use .call instead of instance_eval because instance_eval bring the current object as context
-      # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
-      # group etc..
-      proc_content = @touch_down.call(@touch_down_event) if event_validation(@touch_down)
-      if proc_content.instance_of? Hash
-        proc_content.each do |k, v|
-          @original_atome.send(k, v)
-        end
-      end
-      # end
-      # end
-    end
-  end
-
-  def touch_tap(_option)
-    @element[:style][:cursor] = 'pointer'
-    interact = JS.eval("return interact('##{@id}')")
-    @touch_tap = @original_atome.instance_variable_get('@touch_code')[:tap]
-    # unless @touch_removed[:tap]
-    interact.on('tap') do |native_event|
-
-      @touch_tap_event = Native(native_event)
-      # we use .call instead of instance_eval because instance_eval bring the current object as context
-      # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
-      # group etc..
-      proc_content = @touch_tap.call(@touch_tap_event) if event_validation(@touch_tap)
-      if proc_content.instance_of? Hash
-        proc_content.each do |k, v|
-          # alert "(#{@original_atome.id}, #{k}, #{v}, #{_option})"
-          @original_atome.send(k, v)
-        end
-      end
-    end
-    # end
-  end
+  def setup_touch_event(event_type, _option)
+    instance_variable = "@touch_#{event_type}_already_set"
+    unless instance_variable_get(instance_variable)
+      @element[:style][:cursor] = 'pointer'
+      interact = JS.eval("return interact('##{@id}')")
+      interact.on(event_type) do |native_event|
+        touch_event = Native(native_event)
+        touch_needed = @original_atome.instance_variable_get('@touch_code')[event_type.to_sym]
 
-  def touch_up(_option)
-    @element[:style][:cursor] = 'pointer'
-    interact = JS.eval("return interact('##{@id}')")
-    @touch_up = @original_atome.instance_variable_get('@touch_code')[:up]
-    # unless @touch_removed[:up]
-    interact.on('up') do |native_event|
-      @touch_up_event = Native(native_event)
-      # we use .call instead of instance_eval because instance_eval bring the current object as context
-      # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
-      # group etc..
-      proc_content = @touch_up.call(@touch_up_event) if event_validation(@touch_up)
-      if proc_content.instance_of? Hash
-        proc_content.each do |k, v|
-          @original_atome.send(k, v)
-        end
-      end
-    end
-  end
-
-  def touch_double(_option)
-    @element[:style][:cursor] = 'pointer'
-    interact = JS.eval("return interact('##{@id}')")
-    @touch_double = @original_atome.instance_variable_get('@touch_code')[:double]
-    # unless @touch_removed[:double]
-    interact.on('doubletap') do |native_event|
-      @touch_double_event = Native(native_event)
-      # we use .call instead of instance_eval because instance_eval bring the current object as context
-      # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
-      # group etc..
-      proc_content = @touch_double.call(@touch_double_event) if event_validation(@touch_double)
-      if proc_content.instance_of? Hash
-        proc_content.each do |k, v|
-          @original_atome.send(k, v)
+        touch_needed.each do |proc_found|
+          proc_content = proc_found.call(touch_event) if event_validation(proc_found)
+          if proc_content.instance_of? Hash
+            proc_content.each do |k, v|
+              @original_atome.send(k, v)
+            end
+          end
         end
       end
     end
-
-  end
-
-  def touch_long(_option)
-    @element[:style][:cursor] = 'pointer'
-    @touch_long = @original_atome.instance_variable_get('@touch_code')[:long]
-    interact = JS.eval("return interact('##{@id}')")
-    # unless @touch_removed[:long]
-    interact.on('hold') do |native_event|
-      @touch_long_event = Native(native_event)
-      # we use .call instead of instance_eval because instance_eval bring the current object as context
-      # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
-      # group etc..
-      proc_content = @touch_long.call(@touch_long_event) if event_validation(@touch_long)
-      if proc_content.instance_of? Hash
-        proc_content.each do |k, v|
-          @original_atome.send(k, v)
-        end
-      end
+    instance_variable_set(instance_variable, true)
+  end
+
+  def touch_down(option)
+    setup_touch_event('down', option)
+  end
+
+  def touch_up(option)
+    setup_touch_event('up', option)
+  end
+
+  def touch_tap(option)
+    setup_touch_event('tap', option)
+  end
+
+  def touch_double(option)
+    setup_touch_event('doubletap', option)
+  end
+
+  def touch_long(option)
+    setup_touch_event('hold', option)
+  end
+
+  # def touch_double(_option)
+  #   @element[:style][:cursor] = 'pointer'
+  #   interact = JS.eval("return interact('##{@id}')")
+  #   @touch_double = @original_atome.instance_variable_get('@touch_code')[:double]
+  #   # unless @touch_removed[:double]
+  #   interact.on('doubletap') do |native_event|
+  #     # we use an instance variable below instead of a local variable to be able to kill the event
+  #     @touch_double_event = Native(native_event)
+  #     # we use .call instead of instance_eval because instance_eval bring the current object as context
+  #     # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
+  #     # group etc..
+  #     proc_content = @touch_double.call(@touch_double_event) if event_validation(@touch_double)
+  #     if proc_content.instance_of? Hash
+  #       proc_content.each do |k, v|
+  #         @original_atome.send(k, v)
+  #       end
+  #     end
+  #   end
+  #
+  # end
+
+  # def touch_long(_option)
+  #   @element[:style][:cursor] = 'pointer'
+  #   @touch_long = @original_atome.instance_variable_get('@touch_code')[:long]
+  #   interact = JS.eval("return interact('##{@id}')")
+  #   # unless @touch_removed[:long]
+  #   interact.on('hold') do |native_event|
+  #     @touch_long_event = Native(native_event)
+  #     # we use .call instead of instance_eval because instance_eval bring the current object as context
+  #     # and it's lead to a problem of context and force the use of grab(:view) when suing atome method such as shape ,
+  #     # group etc..
+  #     proc_content = @touch_long.call(@touch_long_event) if event_validation(@touch_long)
+  #     if proc_content.instance_of? Hash
+  #       proc_content.each do |k, v|
+  #         @original_atome.send(k, v)
+  #       end
+  #     end
+  #   end
+  # end
+  def remove_this_touch(option)
+    @original_atome.instance_variable_get('@touch_code')[option] = [] if @original_atome.instance_variable_get('@touch_code')
+  end
+
+  def touch_remove(_opt)
+    if @original_atome.instance_variable_get('@touch_code')
+      option = @original_atome.instance_variable_get('@touch_code')[:remove]
+    else
+      option = false
     end
-  end
 
-  def touch_remove(option)
     @element[:style][:cursor] = 'default'
     case option
     when :double
-      @touch_double = ''
-      @touch_removed[:double] = true
-      @touch_double_event= nil
+      remove_this_touch(:double)
     when :down
-      @touch_down = ''
-      @touch_removed[:down] = true
-      @touch_down_event= nil
+      remove_this_touch(:down)
     when :long
-      @touch_removed[:long] = true
-      @touch_long = ''
-      @touch_long_event= nil
+      remove_this_touch(:long)
     when :tap
-      @touch_removed[:tap] = true
-      @touch_tap = ''
-      @touch_removed[:touch] = true
-      @touch_touch = ''
-      @touch_tap_event= nil
-
+      remove_this_touch(:tap)
     when :touch
-      @touch_removed[:tap] = true
-      @touch_tap = ''
-      @touch_removed[:touch] = true
-      @touch_touch = ''
-      @touch_tap_event= nil
-
+      remove_this_touch(:touch)
     when :up
-      @touch_removed[:up] = true
-      @touch_up = ''
-      @touch_up_event= nil
+      remove_this_touch(:up)
     else
-      touch_remove(:double)
-      @touch_double_event= nil
-
-      touch_remove(:down)
-      @touch_down_event= nil
-
-      touch_remove(:long)
-      @touch_long_event= nil
-
-      touch_remove(:tap)
-      touch_remove(:touch)
-      @touch_tap_event= nil
-      touch_remove(:up)
-      @touch_up_event= nil
+      remove_this_touch(:double)
+      remove_this_touch(:down)
+      remove_this_touch(:long)
+      remove_this_touch(:touch)
+      remove_this_touch(:double)
+      remove_this_touch(:up)
     end
 
   end
@@ -1740,12 +2047,12 @@ class HTML
 
     apply_centering(@center_options, @parent)
 
-    if @center_options[:dynamic]
-      event_handler = ->(event) do
-        apply_centering(@center_options, @parent)
-      end
-      JS.global[:window].addEventListener('resize', event_handler)
+    return unless @center_options[:dynamic]
+    event_handler = ->(event) do
+      apply_centering(@center_options, @parent)
     end
+    JS.global[:window].addEventListener('resize', event_handler)
+
   end
 
   def record_audio(params)
@@ -1780,10 +2087,10 @@ class HTML
       @original_atome.left(x_position)
     end
 
-    if options[:y]
-      y_position = calculate_position(options[:y], parent.to_px(:height), @original_atome.to_px(:height))
-      @original_atome.top(y_position)
-    end
+    return unless options[:y]
+    y_position = calculate_position(options[:y], parent.to_px(:height), @original_atome.to_px(:height))
+    @original_atome.top(y_position)
+
   end
 
   def calculate_position(option, parent_dimension, self_dimension)