atome 0.5.1.4 → 0.5.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 64c8921a4ed715c0ed422e430ca3e9b6ead122f06e81032d0e8843b9fa2e0e4c
-  data.tar.gz: 7920b914b719630b1a930d1f27616d31161e8befe33fd409098a55a90cf30ced
+  metadata.gz: 108def7ca1abaccd885638fdea127766d1f97c4ac2559faee3eec445b52bdbac
+  data.tar.gz: bf00b2ccb9e339a08c16221964b11cd6c2440cc415f6886bef2e4c18ac1967f1
 SHA512:
-  metadata.gz: 2d1fe5f8e8967e1869da808953904dbcd41327676bf644cf19b260cc56f0febdf38a3d3673056ab51406ca0b6743708dcf2c5b1d8fb6e20cd7f8f8b94d425ebd
-  data.tar.gz: 314bec01e683e3bcf0e57abfe1bc273bf38a91650da89f277449226b8f23dc7626c1d3d76e0d8408bdc7e82f5c337e8beb2fae3e73b23cd827102374d8b62c24
+  metadata.gz: 3ecf2a30c425a8b46f88f08cd5b436d6298dd36b8db8984a50190a15a360639c6ac161725c3c5a7b327c740927032315a46a988fbdf5790fe830e31a5d22d4a4
+  data.tar.gz: 5585b8e500d715c86799172790bcc7be0bbc67cfbc438a6fedf03be8aecfea287df999588d4771d4c50f6a62dbad35fa2002f387b425fc602de776c9ff310ca0

data/Rakefile

@@ -19,6 +19,10 @@ task :test_browser do
   `cd test/test_app;atome update;atome run guard`
 end
 
+task :run_browser do
+  `cd test/test_app;atome run guard`
+end
+
 task :test_server do
   FileUtils.copy_entry('vendor/assets/build/js/', 'test/test_app/build/js/')
   FileUtils.copy_entry('vendor/assets/build/css/', 'test/test_app/build/css/')

data/lib/atome/atome.rb

@@ -15,6 +15,7 @@ class Atome
     atomes.each_value do |elements|
       # the instance variable below contain the id all any atomes that need to be informed when changes occurs
       @broadcast = {}
+      @at_time = {}
       # now we store the proc in a an atome's property called :bloc
       elements[:code] = atomes_proc if atomes_proc
       @atome = elements
@@ -63,9 +64,9 @@ class Atome
     end
   end
 
-  def run_optional_proc(proc_name, atome = self, value = '')
+  def run_optional_proc(proc_name, atome = self, value = '', &user_proc)
     option_found = Universe.get_optional_method(proc_name)
-    atome.instance_exec(value, &option_found) if option_found.is_a?(Proc)
+    atome.instance_exec(value,user_proc, &option_found) if option_found.is_a?(Proc)
   end
 
   def inject_value(element, value)
@@ -82,7 +83,7 @@ class Atome
 
   # the line below is used for ephemera atomes
   attr_accessor :property, :value, :real_atome, :user_proc
-  attr_reader :atome, :structure
+  attr_reader :atome, :structure, :at_time
 
   def set(value)
     @real_atome[@property] = value
@@ -91,9 +92,9 @@ class Atome
   def create_particle(element, value, &user_proc)
     return false unless security_pass(element, value)
 
-    run_optional_proc("pre_render_#{element}".to_sym, self, value)
+    run_optional_proc("pre_render_#{element}".to_sym, self, value, &user_proc)
     rendering(element, value, &user_proc)
-    run_optional_proc("post_render_#{element}".to_sym, self, value)
+    run_optional_proc("post_render_#{element}".to_sym, self, value, &user_proc)
     store_value(element, value)
     self
   end
@@ -108,7 +109,7 @@ class Atome
     virtual_atome.real_atome = @atome
     virtual_atome.property = element
     virtual_atome.user_proc = user_proc
-    run_optional_proc("pre_get_#{element}".to_sym, virtual_atome)
+    run_optional_proc("pre_get_#{element}".to_sym, virtual_atome, &user_proc)
     virtual_atome
   end
 

data/lib/atome/genesis/generators/event.rb

@@ -8,3 +8,14 @@ generator.build_particle(:time)
 generator.build_particle(:pause)
 generator.build_particle(:on)
 generator.build_particle(:fullscreen)
+generator.build_particle(:mute)
+# TODO : add the at event to ny particle : (width, left, ...) maybe use monitor particle
+generator.build_particle(:at)
+generator.build_particle(:drag)
+generator.build_sanitizer(:drag) do |params|
+  params = { move: true } if params == true
+  params
+end
+generator.build_particle(:sort) do |_value, sort_proc|
+  @sort_proc = sort_proc
+end

data/lib/atome/genesis/generators/identity.rb

@@ -10,7 +10,6 @@ generator.build_particle(:link) do |child_id|
   child_found.atome[:parents] << @atome[:id]
   child_found.refresh
 end
-
 generator.build_particle(:id)
 generator.build_sanitizer(:id) do |params|
   if @atome[:id] != params
@@ -20,7 +19,6 @@ generator.build_sanitizer(:id) do |params|
   end
   params
 end
-
 generator.build_option(:pre_render_parents) do |parents_id_found|
   parents_id_found.each do |parents_id|
     parents_found = grab(parents_id)

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,64 @@ class Atome
   def read_callback(file, proc)
     instance_exec(file, &proc) if proc.is_a?(Proc)
   end
+
+  def time_callback(current_time)
+    @atome[:time] = current_time
+    return unless @at_time[:time] && (current_time.round(1) > @at_time[:time] && @at_time[:used].nil?)
+
+    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
+
+  # def play_start_callback(particle_found, value)
+  #   @atome[particle_found] = value
+  #   play_proc = play_start_proc
+  #   anim_proc = animation_start_proc
+  #   instance_exec({ @atome[particle_found] => value }, &play_proc) if play_proc.is_a?(Proc)
+  #   instance_exec({ @atome[particle_found] => value }, &anim_proc) if anim_proc.is_a?(Proc)
+  # end
+  #
+  # def play_active_callback(particle_found, value)
+  #   @atome[particle_found] = value
+  #   play_proc = play_active_proc
+  #   anim_proc = animation_active_proc
+  #   instance_exec({ @atome[particle_found] => value }, &play_proc) if play_proc.is_a?(Proc)
+  #   instance_exec({ @atome[particle_found] => value }, &anim_proc) if anim_proc.is_a?(Proc)
+  # end
+  #
+  # def play_stop_callback(particle_found, value)
+  #   @atome[particle_found] = value
+  #   play_proc = play_end_proc
+  #   anim_proc = animation_end_proc
+  #   instance_exec({ @atome[particle_found] => value }, &play_proc) if play_proc.is_a?(Proc)
+  #   instance_exec({ @atome[particle_found] => value }, &anim_proc) if anim_proc.is_a?(Proc)
+  # end
 end

data/lib/atome/helpers/essentials.rb

@@ -4,15 +4,17 @@
 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,
+           left: 100, top: 100 },
     circle: { renderers: '', id: '', type: :shape, parents: [], children: [], width: 99, height: 99,
-              smooth: '100%' },
+              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 },
              generator: :manual },
     text: { type: :text, parents: [:view], children: [], visual: { size: 25 },
-            data: 'this is a text sample',  width: 199, height: 33 },
+            data: 'this is a text sample', width: 199, height: 33 },
     drm: { type: :drm },
     shadow: {}
   }

data/lib/atome/presets/atome.rb

@@ -8,7 +8,7 @@
 # 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[:renderers] = generated_render

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

@@ -17,8 +17,6 @@ generator.build_render_method(:browser_shape) 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|
@@ -36,10 +34,6 @@ 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|
@@ -71,8 +65,6 @@ generator.build_render_method(:browser_image) do |_user_prc|
     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|
@@ -82,8 +74,6 @@ generator.build_render_method(:browser_text) do |_value, _user_proc|
   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
@@ -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|
   @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,20 @@ 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/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
 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
-end
+AtomeJS=`atomeJS`

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

@@ -9,6 +9,9 @@ generator.build_render_method(:browser_touch) do |_value, proc|
 end
 
 generator.build_render_method(: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
 
@@ -31,7 +34,31 @@ generator.build_render_method(:on) do |value, proc|
   end
 end
 
-generator.build_render_method(:fullscreen) do |value, proc|
-  atome_id=atome[:id]
-  `atome.js_Fullscreen(#{atome_id})`
+generator.build_render_method(:fullscreen) do |_value, _proc|
+  atome_id = atome[:id]
+  AtomeJS.JS.fullscreen(atome_id)
 end
+
+generator.build_render_method(:mute) do |value, _proc|
+  if value
+    browser_object.muted
+  else
+    browser_object.unmuted
+  end
+end
+
+generator.build_render_method(:browser_at) do |at, proc|
+  @at_time = { code: proc }.merge(at)
+end
+
+generator.build_render_method(: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_method(:browser_sort) do |options, _proc|
+  AtomeJS.JS.sort(options, @atome[:id], self)
+end
+

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+# for browser 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_style(parents, _html_object, atome)
+    browser_document[parents].add_class(atome[:id])
+  end
+  
+end

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

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+# for browser rendering
+module BrowserHelper
+
+  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_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
+
+end

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

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# for browser rendering
+
+module BrowserHelper
+  def self.browser_drag_move(params, atome_id, atome, proc)
+    atome.drag_move_proc = proc
+    AtomeJS.JS.drag(params, atome_id, atome)
+  end
+
+  def self.browser_drag_lock(params, atome_id, atome, _proc)
+    AtomeJS.JS.lock(params, atome_id, atome)
+  end
+
+  def self.browser_drag_remove(params, atome_id, atome, _proc)
+    params = params != true
+    AtomeJS.JS.remove(params, atome_id, atome)
+  end
+
+  def self.browser_drag_snap(params, atome_id, atome, _proc)
+    AtomeJS.JS.snap(params.to_n, atome_id, atome)
+  end
+
+  def self.browser_drag_inertia(params, atome_id, atome, _proc)
+    AtomeJS.JS.inertia(params, atome_id, atome)
+  end
+
+  def self.browser_drag_constraint(params, atome_id, atome, _proc)
+    AtomeJS.JS.constraint(params.to_n, atome_id, atome)
+  end
+
+  def self.browser_drag_start(_params, _atome_id, atome, proc)
+    atome.drag_start_proc = proc
+  end
+
+  def self.browser_drag_end(_params, _atome_id, atome, proc)
+    atome.drag_end_proc = proc
+  end
+end

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

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# for browser rendering
+module BrowserHelper
+  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
+end