atome 0.4.7.0 → 0.5.1.4

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

@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+# TODO : remove the DOM const and the parents methods there's just there to satisfy Rubocop
+# start dummy code
+DOM = :nil
+
+def parents(_val) end
+
+# end dummy code
+
+generator = Genesis.generator
+
+generator.build_render_method(: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|
+  @browser_type = :style
+  id_found = @atome[:id]
+  type_found = @atome[:type]
+  # we remove previous unused style tag
+  BrowserHelper.browser_document[id]&.remove
+  red_found = @atome[:red]
+  blue_found = @atome[:blue]
+  green_found = @atome[:green]
+  alpha_found = @atome[:alpha]
+  BrowserHelper.browser_document.head << Browser.DOM("<style atome='#{type_found}'
+  id='#{id_found}'>.#{id_found}{background-color: rgba(#{red_found * 255},
+  #{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|
+  @browser_type = :style
+  id_found = @atome[:id]
+  type_found = @atome[:type]
+  # we remove previous unused style tag
+  BrowserHelper.browser_document[id]&.remove
+  red_found = @atome[:red]
+  blue_found = @atome[:blue]
+  green_found = @atome[:green]
+  alpha_found = @atome[:alpha]
+  blur = @atome[:blur]
+  left = @atome[:left]
+  top = @atome[:top]
+  inset = @atome[:direction]
+
+  BrowserHelper.browser_document.head << Browser.DOM("<style atome='#{type_found}'
+  id='#{id_found}'>.#{id_found}{box-shadow: #{left}px #{top}px #{blur}px #{inset} rgba(#{red_found * 255},
+  #{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]
+end
+
+generator.build_render_method(: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|
+  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
+  @browser_type = :web
+  id_found = @atome[:id]
+  DOM do
+    iframe({ id: id_found }).atome
+  end.append_to(BrowserHelper.browser_document[:user_view])
+  @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
+  end.append_to(BrowserHelper.browser_document[:user_view])
+  @browser_object = BrowserHelper.browser_document[id_found]
+end

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

@@ -0,0 +1,225 @@
+# frozen_string_literal: true
+
+require 'atome/renderers/browser/effect'
+require 'atome/renderers/browser/event'
+require 'atome/renderers/browser/geometry'
+require 'atome/renderers/browser/identity'
+require 'atome/renderers/browser/material'
+require 'atome/renderers/browser/spatial'
+require 'atome/renderers/browser/atome'
+require 'atome/renderers/browser/utility'
+
+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

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:browser_smooth) do |value|
+  format_params = case value
+                  when Array
+                    properties = []
+                    value.each do |param|
+                      properties << "#{param}px"
+                    end
+                    properties.join(' ').to_s
+                  when Integer
+                    "#{value}px"
+                  else
+                    value
+                  end
+  @browser_object.style['border-radius'] = format_params
+end
+
+generator.build_render_method(:browser_blur) do |value|
+  BrowserHelper.send("browser_blur_#{@browser_type}", @browser_object, value, @atome)
+end

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

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+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
+end
+
+generator.build_render_method(:browser_play) do |value, proc|
+  BrowserHelper.send("browser_play_#{@atome[:type]}", value, @browser_object, @atome, self, proc)
+end
+
+generator.build_render_method(:browser_time) do |value = nil, _proc|
+  if value
+    @browser_object.currentTime = value
+  else
+    @browser_object.currentTime
+  end
+end
+
+generator.build_render_method(: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|
+  @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})`
+end

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:browser_width) do |value|
+  @browser_object.style[:width] = "#{value}px"
+end
+
+generator.build_render_method(:browser_height) do |value|
+  @browser_object.style[:height] = "#{value}px"
+end

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:browser_id) do |params|
+  browser_object.id = params if @atome[:id] != params
+end
+
+generator.build_render_method(:browser_type) do |params|
+  send("browser_#{params}", user_proc)
+end
+
+generator.build_render_method(:browser_parents) do |parents_found|
+  parents_found.each do |parent_found|
+    BrowserHelper.send("browser_attach_#{@browser_type}", parent_found, @browser_object, @atome)
+  end
+end
+
+generator.build_option(:pre_render_children) do |children_pass|
+  children_pass.each do |child_found|
+    atome_found = grab(child_found)
+    atome_found.parents([@atome[:id]])
+  end
+end

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

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:red) do |value|
+  red = ((@atome[:red] = value) * 255)
+  green = @atome[:green] * 255
+  blue = @atome[:blue] * 255
+  alpha = @atome[:alpha]
+  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+end
+
+generator.build_render_method(:green) do |value|
+  red = @atome[:red] * 255
+  green = (@atome[:green] = value) * 255
+  blue = @atome[:blue] * 255
+  alpha = @atome[:alpha]
+  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+end
+
+generator.build_render_method(:blue) do |value|
+  red = @atome[:red] * 255
+  green = @atome[:green] * 255
+  blue = (@atome[:blue] = value) * 255
+  alpha = @atome[:alpha]
+  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+end
+
+generator.build_render_method(:alpha) do |value|
+  red = @atome[:red] * 255
+  green = @atome[:green] * 255
+  blue = @atome[:blue] * 255
+  alpha = (@atome[:alpha] = value)
+  color_updated = "rgba(#{red}, #{green}, #{blue}, #{alpha})"
+  BrowserHelper.send("browser_colorize_#{@atome[:type]}", color_updated, @atome)
+end
+
+generator.build_render_method(:visual) do |value|
+  browser_object.style['font-size'] = "#{value[:size]}px"
+end

data/lib/atome/renderers/{opal → browser}/opal_browser.rb

@@ -1,8 +1,6 @@
 # frozen_string_literal: true
 
 # render methods
-require 'opal'
 require 'native'
 require 'promise'
 require 'browser/setup/full'
-@atome_client_ready = true

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:browser_left) do |value, _user_proc|
+  BrowserHelper.send("browser_left_#{@atome[:type]}", value, @browser_object, @atome)
+end
+
+generator.build_render_method(:browser_right) do |value, _user_proc|
+  BrowserHelper.send("browser_right_#{@atome[:type]}", value, @browser_object, @atome)
+end
+
+generator.build_render_method(:browser_top) do |value, _user_proc|
+  BrowserHelper.send("browser_top_#{@atome[:type]}", value, @browser_object, @atome)
+end
+
+generator.build_render_method(:browser_bottom) do |value, _user_proc|
+  BrowserHelper.send("browser_bottom_#{@atome[:type]}", value, @browser_object, @atome)
+end
+
+generator.build_render_method(:browser_rotate) do |value, _user_proc|
+  @browser_object.style[:transform] = "rotate(#{value}deg)" unless @browser_type == :style
+end

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

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+generator.build_render_method(:browser_bloc)
+generator.build_render_method(:browser_render)
+generator.build_render_method(:browser_delete) do
+  browser_object&.remove
+end
+
+generator.build_render_method(:browser_clear) do
+  @atome[:children].each do |child_found|
+    grab(child_found).browser_object&.remove
+  end
+  children([])
+end
+
+generator.build_render_method(:browser_path) do |value|
+  BrowserHelper.send("browser_path_#{@atome[:type]}", value, @browser_object, @atome)
+end
+
+generator.build_render_method(:browser_data) do |data|
+  # according to the type we send the data to different operator
+  type_found = @atome[:type]
+  send("browser_data_#{type_found}", data)
+end
+
+generator.build_render_method(:browser_schedule) do |format_date, proc|
+  years = format_date[0]
+  months = format_date[1]
+  days = format_date[2]
+  hours = format_date[3]
+  minutes = format_date[4]
+  seconds = format_date[5]
+  `atome.jsSchedule(#{years},#{months},#{days},#{hours},#{minutes},#{seconds},#{self},#{proc})`
+end
+
+generator.build_render_method(:browser_reader) do |file, proc|
+  `atome.jsReader(#{file},#{self},#{proc})`
+end

data/lib/atome/renderers/headless/headless.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+# require 'atome/renderers/headless/effect'
+# require 'atome/renderers/headless/event'
+# require 'atome/renderers/headless/geometry'
+# require 'atome/renderers/headless/identity'
+# require 'atome/renderers/headless/material'
+# require 'atome/renderers/headless/spatial'
+# require 'atome/renderers/headless/atome'
+require 'atome/renderers/headless/utility'

data/lib/atome/renderers/headless/utility.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:headless_schedule)
+generator.build_render_method(:headless_reader)

data/lib/atome/renderers/html/atome.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+
+generator = Genesis.generator
+
+generator.build_render_method(:html_shape) do
+  current_atome = @atome
+  id_found = current_atome[:id]
+  @html_object = Html.new
+  @html_object.add_class('atome')
+  @html_object.attr('id', id_found)
+end
+
+generator.build_render_method(:html_color) do |_value|
+  # we remove previous unused style tag
+  opal_document[id]&.remove
+  red_found = @atome[:red]
+  blue_found = @atome[:blue]
+  green_found = @atome[:green]
+  alpha_found = @atome[:alpha]
+  opal_document.head << DOM("<style atome='#{type}'  id='#{id}'>.#{id}{background-color: rgba(#{red_found * 255},
+  #{green_found * 255},#{blue_found * 255},#{alpha_found})}</style>")
+  # TODO/ use the code below to modify the style tag
+  # `document.getElementById(#{id}).sheet.cssRules[0].style.backgroundColor = 'red'`
+end
+
+generator.build_render_method(:html_image) do |_user_prc|
+  # id_found = id
+  # instance_exec(&proc) if proc.is_a?(Proc)
+  # DOM do
+  #   img({ id: id_found }).atome
+  # end.append_to($document[:user_view])
+  # @html_object = $document[id_found]
+  # @html_type = :image
+end
+
+generator.build_render_method(:html_shadow) do
+end
+
+generator.build_render_method(:html_video) do |_value, _user_proc|
+  # id_found = id
+  # # instance_exec(&proc) if proc.is_a?(Proc)
+  # DOM do
+  #   video({ id: id_found, autoplay: true ,loop: false, muted: true }).atome
+  # end.append_to($document[:user_view])
+  # @html_object = $document[id_found]
+end

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:html_smooth) do |value|
+  formated_params = case value
+                    when Array
+                      properties = []
+                      value.each do |param|
+                        properties << "#{param}px"
+                      end
+                      properties.join(' ').to_s
+                    when Integer
+                      "#{value}px"
+                    else
+                      value
+                    end
+  @html_object.style['border-radius'] = formated_params unless @html_type == :style
+end

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

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:html_touch) do |_value, proc|
+  @html_object.on :click do |e|
+    instance_exec(&proc) if proc.is_a?(Proc)
+  end
+end

data/lib/atome/renderers/html/geometry.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+generator = Genesis.generator
+
+generator.build_render_method(:html_width) do |value|
+  @html_object.style[:width] = "#{value}px" unless @html_type == :style
+end
+
+generator.build_render_method(:html_height) do |value|
+  @html_object.style[:height] = "#{value}px" unless @html_type == :style
+end