atome 0.5.1.4 → 0.5.2.5

data/lib/atome/helpers/callbacks.rb

@@ -2,6 +2,14 @@
 
 #  callbacks methods here
 class Atome
+  private
+
+  attr_accessor :drag_start_proc, :drag_move_proc, :drag_end_proc,
+                :play_start_proc, :play_active_proc, :play_end_proc,
+                :animation_start_proc, :animation_active_proc, :animation_stop_proc
+
+  public
+
   def schedule_callback(proc)
     instance_exec(&proc) if proc.is_a?(Proc)
   end
@@ -9,4 +17,72 @@ class Atome
   def read_callback(file, proc)
     instance_exec(file, &proc) if proc.is_a?(Proc)
   end
+
+  def time_callback(current_time)
+    # puts "time_callback = #{current_time.round(1)}\n#{current_time}"
+    @atome[:time] = current_time
+    # the line below is used only to set up a one shot event
+    # return unless @at_time[:time] && (current_time > @at_time[:time] && @at_time[:used].nil?)
+
+    return unless @at_time[:time] && (current_time > @at_time[:time])
+    proc = @at_time[:code]
+    instance_exec(current_time, &proc) if proc.is_a?(Proc)
+    # @at_time[:used] = true
+  end
+
+  def drag_start_callback(page_x, page_y, left_val, top_val)
+    @atome[:left] = left_val
+    @atome[:top] = top_val
+    proc = @drag_start_proc
+    instance_exec({ pageX: page_x, pageY: page_y, left: left_val, top: top_val }, &proc) if proc.is_a?(Proc)
+  end
+
+  def drag_move_callback(page_x, page_y, left_val, top_val)
+    proc = @drag_move_proc
+    @atome[:left] = left_val
+    @atome[:top] = top_val
+    instance_exec({ pageX: page_x, pageY: page_y, left: left_val, top: top_val }, &proc) if proc.is_a?(Proc)
+  end
+
+  def drag_end_callback(page_x, page_y, left_val, top_val)
+    @atome[:left] = left_val
+    @atome[:top] = top_val
+    proc = @drag_end_proc
+    instance_exec({ pageX: page_x, pageY: page_y, left: left_val, top: top_val }, &proc) if proc.is_a?(Proc)
+  end
+
+  # sort callbacks
+  def sort_callback(atome)
+    sort_proc = @sort_proc
+    instance_exec(atome, &sort_proc) if sort_proc.is_a?(Proc)
+  end
+
+  # animation
+  def browser_animate_callback(particle_found, value, animation_hash, original_particle, animation_atome)
+    anim_proc = animation_hash[:code]
+    #  we exec the callback bloc from :animate
+    instance_exec({ original_particle => value }, &anim_proc) if anim_proc.is_a?(Proc)
+    # we exec the callback bloc from :play
+    play_proc = animation_atome.play_active_proc
+    instance_exec({ @atome[particle_found] => value }, &play_proc) if play_proc.is_a?(Proc)
+    # we animate:
+    browser_object.style[particle_found] = value if browser_object
+    # we update the atome property
+    @atome[original_particle] = value
+  end
+
+  def play_start_callback(_particle_found, _start_value, animation_hash, original_particle, atome_found)
+    value = animation_hash[:begin][original_particle]
+    value = atome_found.atome[original_particle] if value == :self
+    start_proc = @animation_start_proc
+    @atome[original_particle] = value
+    instance_exec({ original_particle => value }, &start_proc) if start_proc.is_a?(Proc)
+  end
+
+  def play_stop_callback(_particle_found, _end_value, animation_hash, original_particle, _atome_found)
+    value = animation_hash[:end][original_particle]
+    end_proc = @animation_stop_proc
+    @atome[original_particle] = value
+    instance_exec({ original_particle => value }, &end_proc) if end_proc.is_a?(Proc)
+  end
 end

data/lib/atome/helpers/essentials.rb

@@ -4,15 +4,20 @@
 module Essentials
   @default_params = {
     render_engines: [:browser],
+    animation: { type: :animation },
     element: { type: :element, renderers: [] },
-    box: { renderers: '', id: '', type: :shape, parents: [], children: [], width: 99, height: 99 },
+    box: { renderers: '', id: '', type: :shape, parents: [], children: [], width: 99, height: 99,
+           color: { left: 0, top: 0,  red: 0.1, green: 0.9, blue: 0.9, alpha: 1, diffusion: :linear },
+           left: 100, top: 100 },
     circle: { renderers: '', id: '', type: :shape, parents: [], children: [], width: 99, height: 99,
-              smooth: '100%' },
+              color: { left: 0, top: 0, red: 0.1, green: 0.9, blue: 0.9, alpha: 1, diffusion: :linear },
+              left: 100, top: 100, smooth: '100%' },
     shape: { renderers: '', id: '', width: 100, type: :shape, height: 100, left: 100, top: 100,
-             color: { left: 0, top: 0, z: 0, red: 0.1, green: 0.9, blue: 0.9, alpha: 1, diffusion: :linear },
+             color: { left: 0, top: 0, red: 0.1, green: 0.9, blue: 0.9, alpha: 1, diffusion: :linear },
              generator: :manual },
-    text: { type: :text, parents: [:view], children: [], visual: { size: 25 },
-            data: 'this is a text sample',  width: 199, height: 33 },
+    text: { renderers: '', id: '',type: :text, parents: [:view], children: [], visual: { size: 25 },
+            color: { left: 0, top: 0, red: 0.3, green: 0.3, blue: 0.3, alpha: 1, diffusion: :linear },
+            data: 'this is a text sample', width: 199, height: 33 },
     drm: { type: :drm },
     shadow: {}
   }

data/lib/atome/helpers/utilities.rb

@@ -24,22 +24,66 @@ class Atome
     { date: Time.now, location: geolocation }
   end
 
-  def broadcasting(element, value)
-    return unless @broadcast[:particles]&.include?(element)
-
-    bloc_found = @broadcast[:bloc]
-    instance_exec(self, element, value, &bloc_found) if bloc_found.is_a?(Proc)
-  end
-
   def history(property, value)
     "historize : #{property} #{value}"
   end
 
+  # def broadcasting(modified_particle, value)
+  #   @broadcast.each_value do |particle_monitored|
+  #     if particle_monitored[modified_particle]
+  #       code_found = particle_monitored[modified_particle]
+  #       instance_exec(self, modified_particle, value, &code_found) if code_found.is_a?(Proc)
+  #     end
+  #   end
+  # end
+  #
+  # public
+  #
+  # def monitor(params, &proc_monitoring)
+  #   atome[:monitor] ||= {}
+  #   params[:atomes].each do |atome_id|
+  #     target_broadcaster = grab(atome_id).instance_variable_get('@broadcast')
+  #     monitor_id = params[:id] || "monitor#{target_broadcaster.length}"
+  #     atome[:monitor] [monitor_id]=params.merge({code: proc_monitoring})
+  #     params[:particles].each do |targeted_particle|
+  #       target_broadcaster[monitor_id] = { targeted_particle => proc_monitoring }
+  #     end
+  #   end
+  # end
+
+  def broadcasting(altered_particle, value)
+    @broadcast.each_value do |particle_monitored|
+      if particle_monitored[:particles].include?(altered_particle)
+        code_found=particle_monitored[:code]
+        instance_exec(self, altered_particle, value, &code_found) if code_found.is_a?(Proc)
+      end
+    end
+  end
+
   public
 
   def monitor(params, &proc_monitoring)
+    atome[:monitor] ||= {}
     params[:atomes].each do |atome_id|
-      grab(atome_id).instance_variable_set('@broadcast', { particles: params[:particles], bloc: proc_monitoring })
+      target_broadcaster = grab(atome_id).instance_variable_get('@broadcast')
+      monitor_id = params[:id] || "monitor#{target_broadcaster.length}"
+      atome[:monitor] [monitor_id]=params.merge({code: proc_monitoring})
+      target_broadcaster[monitor_id] = { particles: params[:particles], code:  proc_monitoring }
+    end
+  end
+  def store_code_bloc(element, &user_proc)
+    Object.attr_accessor "#{element}_code"
+
+    instance_variable_set("@#{element}_code", user_proc)
+  end
+
+  def particles(particles_found = nil)
+    if particles_found
+      particles_found.each do |particle_found, value_found|
+        atome[particle_found] = value_found
+      end
+    else
+      atome
     end
   end
 

data/lib/atome/kernel/universe.rb

@@ -58,10 +58,6 @@ class Universe
       # and finally the object is 3 as this the third object created by the main server
     end
 
-    # def change_atome_id(prev_id, new_id)
-    #   @atomes[new_id] = @atomes.delete(prev_id)
-    # end
-
     def delete(id)
       @atomes.delete(id)
     end

data/lib/atome/presets/atome.rb

@@ -8,9 +8,10 @@
 # shaper creation
 class Atome
   def atome_common(atome_type, generated_id, generated_render, generated_parents, params)
-    temp_default = Essentials.default_params[atome_type]
+    temp_default = Essentials.default_params[atome_type] || {}
     temp_default[:id] = generated_id
     temp_default[:parents] = generated_parents
+    temp_default[:clones] = []
     temp_default[:renderers] = generated_render
     temp_default.merge(params)
   end
@@ -22,8 +23,6 @@ class Atome
     generated_id = params[:id] || "#{atome_type}_#{Universe.atomes.length}"
     generated_parents = params[:parents] || [id.value]
     params = atome_common(atome_type, generated_id, generated_render, generated_parents, params)
-    color_generated = sanitize(:color, { parents: [generated_id], red: 0.3, green: 0.3, blue: 0.3 })
-    params[:color] = color_generated
     Atome.new({ atome_type => params }, &bloc)
   end
 
@@ -34,14 +33,11 @@ class Atome
     generated_id = params[:id] || "#{atome_type}_#{Universe.atomes.length}"
     generated_parents = params[:parents] || [id.value]
     params = atome_common(atome_type, generated_id, generated_render, generated_parents, params)
-    color_generated = sanitize(:color, { parents: [generated_id], red: 0.6, green: 0.6, blue: 0.6 })
-    params[:color] = color_generated
     Atome.new({ atome_type => params }, &bloc)
   end
 
   def image(params = {}, &bloc)
     default_renderer = Essentials.default_params[:render_engines]
-
     generated_id = params[:id] || "image_#{Universe.atomes.length}"
     generated_render = params[:renderers] || default_renderer
     generated_parents = params[:parents] || id.value
@@ -59,8 +55,6 @@ class Atome
     generated_id = params[:id] || "#{atome_type}_#{Universe.atomes.length}"
     generated_parents = params[:parents] || [id.value]
     params = atome_common(atome_type, generated_id, generated_render, generated_parents, params)
-    color_generated = sanitize(:color, { parents: [generated_id], red: 0.9, green: 0.9, blue: 0.9 })
-    params[:color] = color_generated
     Atome.new({ atome_type => params }, &bloc)
   end
 
@@ -85,4 +79,14 @@ class Atome
     params = temp_default.merge(params)
     Atome.new({ image: params }, &bloc)
   end
+
+  def animation(params = {}, &bloc)
+    default_renderer = Essentials.default_params[:render_engines]
+    atome_type = :animation
+    generated_render = params[:renderers] || default_renderer
+    generated_id = params[:id] || "#{atome_type}_#{Universe.atomes.length}"
+    generated_parents = params[:parents] || []
+    params = atome_common(atome_type, generated_id, generated_render, generated_parents, params)
+    Atome.new({ atome_type => params }, &bloc)
+  end
 end

data/lib/atome/renderers/browser/atome.rb

@@ -10,18 +10,16 @@ def parents(_val) end
 
 generator = Genesis.generator
 
-generator.build_render_method(:browser_shape) do
+generator.build_render(:browser_shape) do
   @browser_type = :div
   id_found = @atome[:id]
   DOM do
     div(id: id_found).atome
   end.append_to(BrowserHelper.browser_document[:user_view])
   @browser_object = BrowserHelper.browser_document[id_found]
-  # Render particles below
-  # collapse
 end
 
-generator.build_render_method(:browser_color) do |_value|
+generator.build_render(:browser_color) do |_value|
   @browser_type = :style
   id_found = @atome[:id]
   type_found = @atome[:type]
@@ -36,13 +34,9 @@ generator.build_render_method(:browser_color) do |_value|
   #{green_found * 255},#{blue_found * 255},#{alpha_found})}</style>")
   # TODO/ use the code below to modify the style tag
   @browser_object = BrowserHelper.browser_document[id_found]
-  # now we just have to attach the color atome
-  # parents(@atome[:parents])
-  # children(@atome[:children])
-  # collapse
 end
 
-generator.build_render_method(:browser_shadow) do |_value|
+generator.build_render(:browser_shadow) do |_value|
   @browser_type = :style
   id_found = @atome[:id]
   type_found = @atome[:type]
@@ -64,29 +58,25 @@ generator.build_render_method(:browser_shadow) do |_value|
   @browser_object = BrowserHelper.browser_document[id_found]
 end
 
-generator.build_render_method(:browser_image) do |_user_prc|
+generator.build_render(:browser_image) do |_user_prc|
   @browser_type = :div
   id_found = @atome[:id]
   DOM do
     img({ id: id_found }).atome
   end.append_to(BrowserHelper.browser_document[:user_view])
   @browser_object = BrowserHelper.browser_document[id_found]
-  # Render particles below
-  # collapse
 end
 
-generator.build_render_method(:browser_text) do |_value, _user_proc|
+generator.build_render(:browser_text) do |_value, _user_proc|
   id_found = @atome[:id]
   DOM do
     div(id: id_found).atome.text
   end.append_to(BrowserHelper.browser_document[:user_view])
   @browser_object = BrowserHelper.browser_document[id_found]
   @browser_type = :div
-  # Render particles below
-  # collapse
 end
 
-generator.build_render_method(:browser_web) do
+generator.build_render(:browser_web) do
   @browser_type = :web
   id_found = @atome[:id]
   DOM do
@@ -95,14 +85,13 @@ generator.build_render_method(:browser_web) do
   @browser_object = BrowserHelper.browser_document[id_found]
   @browser_object.attributes[:allow] = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
   @browser_object.attributes[:allowfullscreen] = true
-  @html_type = :web
 end
 
-generator.build_render_method(:browser_video) do |_value, _user_proc|
+generator.build_render(:browser_video) do |_value, _user_proc|
   @browser_type = :div
   id_found = @atome[:id]
   DOM do
-    video({ id: id_found, autoplay: false, loop: false, muted: true }).atome
+    video({ id: id_found, autoplay: false, loop: false, muted: false }).atome
   end.append_to(BrowserHelper.browser_document[:user_view])
   @browser_object = BrowserHelper.browser_document[id_found]
 end

data/lib/atome/renderers/browser/browser.rb

@@ -8,218 +8,23 @@ require 'atome/renderers/browser/material'
 require 'atome/renderers/browser/spatial'
 require 'atome/renderers/browser/atome'
 require 'atome/renderers/browser/utility'
+require 'atome/renderers/browser/helpers/browser_helper'
+require 'atome/renderers/browser/helpers/animation_helper'
+require 'atome/renderers/browser/helpers/color_helper'
+require 'atome/renderers/browser/helpers/drag_helper'
+require 'atome/renderers/browser/helpers/effect_helper'
+require 'atome/renderers/browser/helpers/event_helper'
+require 'atome/renderers/browser/helpers/image_helper'
+require 'atome/renderers/browser/helpers/shadow_helper'
+require 'atome/renderers/browser/helpers/shape_helper'
+require 'atome/renderers/browser/helpers/text_helper'
+require 'atome/renderers/browser/helpers/video_helper'
+require 'atome/renderers/browser/helpers/web_helper'
 
 class Atome
-  attr_accessor :browser_object
+  attr_accessor 'browser_object'
 end
 
-# for opal rendering
-module BrowserHelper
-  def self.browser_document
-    # Work because of the patched version of opal-browser(0.39)
-    Browser.window
-  end
-
-  def self.browser_attach_div(parents, html_object, _atome)
-    html_object.append_to(browser_document[parents])
-  end
-
-  def self.browser_attach_web(parents, html_object, _atome)
-    html_object.append_to(browser_document[parents])
-  end
-
-  def self.browser_attach_style(parents, _html_object, atome)
-    browser_document[parents].add_class(atome[:id])
-  end
-
-  def self.browser_blur_style(_browser_object, value, atome)
-    b_left = "#{atome[:left]}px"
-    b_top = "#{atome[:top]}px"
-    b_blur = "#{atome[:blur] = value}px"
-    b_red = atome[:red] * 255
-    b_green = atome[:green] * 255
-    b_blue = (atome[:blue]) * 255
-    b_direction = atome[:direction]
-    b_alpha = atome[:alpha]
-
-    shadow_updated = "#{b_left} #{b_top} #{b_blur} rgba(#{b_red}, #{b_green}, #{b_blue}, #{b_alpha}) #{b_direction}"
-    `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
-  end
-
-  def self.browser_blur_div(browser_object, value, _atome)
-    browser_object.style[:filter] = "blur(#{value}px)"
-  end
-
-  def self.browser_colorize_color(color_updated, atome)
-    `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.backgroundColor = #{color_updated}`
-  end
-
-  def self.browser_colorize_shadow(color_updated, atome)
-    left = atome[:left]
-    top = atome[:top]
-    blur = atome[:blur]
-    direction = atome[:direction]
-    shadow_updated = "#{left}px #{top}px #{blur}px #{color_updated} #{direction}"
-    `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
-  end
-
-  def self.browser_left_shape(value, browser_object, _atome)
-    browser_object.style[:left] = "#{value}px"
-  end
-
-  def self.browser_right_shape(value, browser_object, _atome)
-    browser_object.style[:right] = "#{value}px"
-  end
-
-  def self.browser_top_shape(value, browser_object, _atome)
-    browser_object.style[:top] = "#{value}px"
-  end
-
-  def self.browser_bottom_shape(value, browser_object, _atome)
-    browser_object.style[:bottom] = "#{value}px"
-  end
-
-  # image
-  def self.browser_left_image(value, browser_object, _atome)
-    browser_object.style[:left] = "#{value}px"
-  end
-
-  def self.browser_right_image(value, browser_object, _atome)
-    browser_object.style[:right] = "#{value}px"
-  end
-
-  def self.browser_top_image(value, browser_object, _atome)
-    browser_object.style[:top] = "#{value}px"
-  end
-
-  def self.browser_bottom_image(value, browser_object, _atome)
-    browser_object.style[:bottom] = "#{value}px"
-  end
-
-  def self.browser_path_image(value, browser_object, _atome)
-    browser_object[:src] = value
-  end
-
-  # shadow
-  def self.browser_left_shadow(value, _browser_object, atome)
-    ls_left = "#{atome[:left] = value}px"
-    ls_top = "#{atome[:top]}px"
-    ls_blur = "#{atome[:blur]}px"
-    red = atome[:red] * 255
-    green = atome[:green] * 255
-    blue = (atome[:blue]) * 255
-    direction = atome[:direction]
-    alpha = atome[:alpha]
-
-    shadow_updated = "#{ls_left} #{ls_top} #{ls_blur} rgba(#{red}, #{green}, #{blue}, #{alpha}) #{direction}"
-    `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
-  end
-
-  def self.browser_top_shadow(value, _browser_object, atome)
-    rs_left = "#{atome[:left]}px"
-    rs_top = "#{atome[:top] = value}px"
-    rs_blur = "#{atome[:blur]}px"
-    red = atome[:red] * 255
-    green = atome[:green] * 255
-    blue = (atome[:blue]) * 255
-    direction = atome[:direction]
-    alpha = atome[:alpha]
-
-    shadow_updated = "#{rs_left}px #{rs_top}px #{rs_blur}px rgba(#{red}, #{green}, #{blue}, #{alpha}) #{direction}"
-    `document.getElementById(#{atome[:id]}).sheet.cssRules[0].style.boxShadow = #{shadow_updated}`
-  end
-
-  def self.browser_left_color(_value, _browser_object, _atome)
-    puts 'code to write when implementing gradient'
-  end
-
-  def self.browser_right_color(_value, _browser_object, _atome)
-    puts 'code to write when implementing gradient'
-  end
-
-  def self.browser_top_color(_value, _browser_object, _atome)
-    puts 'code to write when implementing gradient'
-  end
-
-  def self.browser_bottom_color(_value, _browser_object, _atome)
-    puts 'code to write when implementing gradient'
-  end
-
-  # text
-  def self.browser_left_text(value, browser_object, _atome)
-    browser_object.style[:left] = "#{value}px"
-  end
-
-  def self.browser_right_text(value, browser_object, _atome)
-    browser_object.style[:right] = "#{value}px"
-  end
-
-  def self.browser_top_text(value, browser_object, _atome)
-    browser_object.style[:top] = "#{value}px"
-  end
-
-  def self.browser_bottom_text(value, browser_object, _atome)
-    browser_object.style[:bottom] = "#{value}px"
-  end
-
-  def self.browser_data_text(value)
-    browser_object.text = value
-  end
-
-  # web
-  def self.browser_left_web(value, browser_object, _atome)
-    browser_object.style[:left] = "#{value}px"
-  end
-
-  def self.browser_right_web(value, browser_object, _atome)
-    browser_object.style[:right] = "#{value}px"
-  end
-
-  def self.browser_top_web(value, browser_object, _atome)
-    browser_object.style[:top] = "#{value}px"
-  end
-
-  def self.browser_bottom_web(value, browser_object, _atome)
-    browser_object.style[:bottom] = "#{value}px"
-  end
-
-  def self.browser_path_web(value, browser_object, _atome)
-    browser_object[:src] = value
-  end
-
-  # video
-  def self.browser_left_video(value, browser_object, _atome)
-    browser_object.style[:left] = "#{value}px"
-  end
-
-  def self.browser_right_videob(value, browser_object, _atome)
-    browser_object.style[:right] = "#{value}px"
-  end
-
-  def self.browser_top_video(value, browser_object, _atome)
-    browser_object.style[:top] = "#{value}px"
-  end
-
-  def self.browser_bottom_video(value, browser_object, _atome)
-    browser_object.style[:bottom] = "#{value}px"
-  end
-
-  def self.browser_path_video(value, browser_object, _atome)
-    browser_object[:src] = value
-  end
-
-  def self.browser_play_video(_value, browser_object_found, atome_found, atome_object, proc)
-    browser_object_found.play
-    # TODO : change timeupdate for when possible requestVideoFrameCallback
-    # (opal-browser/opal/browser/event.rb line 36)
-    video_callback = atome_found[:code] # this is the video callback not the play callback
-    play_callback = proc # this is the video callback not the play callback
-    browser_object_found.on(:timeupdate) do |e|
-      e.prevent # Prevent the default action (eg. form submission)
-      # You can also use `e.stop` to stop propagating the event to other handlers.
-      current_time = browser_object_found.currentTime
-      atome_object.instance_exec(current_time, &video_callback) if video_callback.is_a?(Proc)
-      atome_object.instance_exec(current_time, &play_callback) if play_callback.is_a?(Proc)
-    end
-  end
+def atome_js
+  `atomeJS`
 end

data/lib/atome/renderers/browser/effect.rb

@@ -2,7 +2,7 @@
 
 generator = Genesis.generator
 
-generator.build_render_method(:browser_smooth) do |value|
+generator.build_render(:browser_smooth) do |value|
   format_params = case value
                   when Array
                     properties = []
@@ -18,6 +18,6 @@ generator.build_render_method(:browser_smooth) do |value|
   @browser_object.style['border-radius'] = format_params
 end
 
-generator.build_render_method(:browser_blur) do |value|
+generator.build_render(:browser_blur) do |value|
   BrowserHelper.send("browser_blur_#{@browser_type}", @browser_object, value, @atome)
 end

data/lib/atome/renderers/browser/event.rb

@@ -2,17 +2,20 @@
 
 generator = Genesis.generator
 
-generator.build_render_method(:browser_touch) do |_value, proc|
-  @browser_object.on :click do |e|
-    instance_exec(e, &proc) if proc.is_a?(Proc)
-  end
+generator.build_render(:browser_touch) do |value, proc|
+  atome_id = @browser_object.attribute(:id)
+  BrowserHelper.send("browser_touch_#{value}", atome_id, proc)
+  # end
 end
 
-generator.build_render_method(:browser_play) do |value, proc|
+generator.build_render(:browser_play) do |value, proc|
+  # first we reinit the 'at' event so the condition will be met again
+  # @at_time[:used] = nil
+  @browser_object.currentTime = value if value != true
   BrowserHelper.send("browser_play_#{@atome[:type]}", value, @browser_object, @atome, self, proc)
 end
 
-generator.build_render_method(:browser_time) do |value = nil, _proc|
+generator.build_render(:browser_time) do |value = nil, _proc|
   if value
     @browser_object.currentTime = value
   else
@@ -20,18 +23,53 @@ generator.build_render_method(:browser_time) do |value = nil, _proc|
   end
 end
 
-generator.build_render_method(:browser_pause) do |_value, proc|
+generator.build_render(:browser_pause) do |_value, proc|
   instance_exec(@browser_object.currentTime, &proc) if proc.is_a?(Proc)
   @browser_object.pause
 end
 
-generator.build_render_method(:on) do |value, proc|
+generator.build_render(:on) do |value, proc|
   @browser_object.on(value) do |e|
     instance_exec(e, &proc) if proc.is_a?(Proc)
   end
 end
 
-generator.build_render_method(:fullscreen) do |value, proc|
-  atome_id=atome[:id]
-  `atome.js_Fullscreen(#{atome_id})`
+generator.build_render(:fullscreen) do |_value, _proc|
+  atome_id = atome[:id]
+  atome_js.JS.fullscreen(atome_id)
+end
+
+generator.build_render(:mute) do |value, _proc|
+  if value
+    browser_object.muted
+  else
+    browser_object.unmuted
+  end
+end
+
+generator.build_render(:browser_at) do |at, proc|
+  # @atime is check at each toick of frame in 'time_callback'
+  @at_time = { code: proc }.merge(at)
 end
+
+generator.build_render(:browser_drag) do |options, proc|
+  options.each do |method, params|
+    atome_id = @atome[:id]
+    BrowserHelper.send("browser_drag_#{method}", params, atome_id, self, proc)
+  end
+end
+
+generator.build_render(:browser_sort) do |options, _proc|
+  atome_js.JS.sort(options, @atome[:id], self)
+end
+
+# TODO: for now unbind remove all touch event we should remove only the targeted one (store proc and restore it)
+generator.build_render(:browser_unbind) do |options, _proc|
+  id_found = self.atome[:id]
+  `
+const el = document.getElementById(#{id_found});
+interact('#'+#{id_found}).unset(#{options});
+`
+end
+
+