atome 0.5.6.8.7 → 0.5.7.0.3

data/lib/renderers/html/html.rb

@@ -37,6 +37,20 @@ class HTML
     current_div[:innerHTML] = params
   end
 
+  def add_font_to_css(params)
+    font_path = params[:path]
+    font_name = params[:name]
+    str_to_eval = <<STRDELIM
+var styleSheet = document.styleSheets[0];
+styleSheet.insertRule(`
+@font-face {
+  font-family: '#{font_name}';
+  src: url('../medias/fonts/#{font_path}/#{font_name}.ttf') format('truetype');
+}`, styleSheet.cssRules.length);
+STRDELIM
+    JS.eval(str_to_eval)
+  end
+
   def add_css_to_atomic_style(css)
     style_element = JS.global[:document].getElementById('atomic_style')
     text_node = JS.global[:document].createTextNode(css)
@@ -302,10 +316,7 @@ class HTML
     # editable_pres_array = Array.new(editable_pres[:length].to_i) { |i| editable_pres.call(:item, i) }
     # editable_pres_array.each do |pre|
     #   pre.addEventListener('click') do
-    #     # Focus sur l'élément pour activer le curseur
     #     pre.focus()
-    #     alert :ok
-    #     # Optionnel : Ajoutez du style pour rendre le curseur plus visible
     #     pre[:style][:caretColor] = 'blue' # Changez la couleur du curseur en bleu
     #   end
     # end
@@ -400,15 +411,20 @@ class HTML
     self
   end
 
-  def svg_data(data)
-    data.each do |type_passed, datas|
-      svg_ns = 'http://www.w3.org/2000/svg'
-      new_path = JS.global[:document].createElementNS(svg_ns.to_s, type_passed.to_s)
-      JS.global[:document][:body].appendChild(new_path)
-      datas.each do |property, value|
-        new_path.setAttribute(property.to_s, value.to_s)
+  def svg_data(all_datas)
+    # we remove previous datas
+    # @element.innerHTML = ''
+    all_datas.each do |full_data|
+      full_data.each do |type_passed, datas|
+
+        svg_ns = 'http://www.w3.org/2000/svg'
+        new_path = JS.global[:document].createElementNS(svg_ns.to_s, type_passed.to_s)
+        JS.global[:document][:body].appendChild(new_path)
+        datas.each do |property, value|
+          new_path.setAttribute(property.to_s, value.to_s)
+        end
+        @element.appendChild(new_path)
       end
-      @element.appendChild(new_path)
     end
   end
 
@@ -704,11 +720,18 @@ class HTML
   end
 
   def drag_remove(option)
+
+    interact = JS.eval("return interact('##{@id}')")
+
     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
@@ -719,6 +742,9 @@ class HTML
       @drag_end = ''
       @drag_locked = ''
       @drag_restrict = ''
+      @drag_move = nil
+      interact.draggable(false)
+      interact.unset
     end
 
   end
@@ -748,7 +774,10 @@ class HTML
   end
 
   def drag_move(_option)
+
     interact = JS.eval("return interact('##{@id}')")
+    # interact.draggable(false)
+
     interact.draggable({
                          drag: true,
                          inertia: { resistance: 12,
@@ -764,7 +793,7 @@ class HTML
       # 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_move.call(event) if @drag_move.is_a?(Proc)
-
+      Universe.allow_tool_operations = false
       dx = event[:dx]
       dy = event[:dy]
       x = (@original_atome.left || 0) + dx.to_f
@@ -946,8 +975,8 @@ class HTML
       @drop_leave = ''
     else
       # to remove all interact event ( touch, drag, scale, ... uncomment below)
-      # interact = JS.eval("return interact('##{@id}')")
-      # interact.unset
+      interact = JS.eval("return interact('##{@id}')")
+      interact.unset
       @drop_activate = ''
       @drop_deactivate = ''
       @drop_dropped = ''
@@ -975,25 +1004,26 @@ class HTML
                            modifiers: [],
                            listeners: {
                              move: lambda do |native_event|
-                               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 @resize.is_a?(Proc)
-                                 x = (@element[:offsetLeft].to_i || 0)
-                                 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
+                               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 @resize.is_a?(Proc)
+                               x = (@element[:offsetLeft].to_i || 0)
+                               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
                            },
 
                          })
@@ -1082,82 +1112,103 @@ class HTML
     end
   end
 
-  def touch_tap(_option)
+  def event_validation(action_proc)
+    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}')")
-    @touch_tap = @original_atome.instance_variable_get('@touch_code')[:tap]
-    unless @touch_removed[:tap]
-      interact.on('tap') do |native_event|
+    unless @touch_removed[:down]
+      interact.on('down') 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..
-        @touch_tap.call(event) if @touch_tap.is_a?(Proc)
+        # unless Universe.edit_mode == true
+        # @touch_down.call(event) if @touch_down.is_a?(Proc)  && (!Universe.edit_mode || @original_atome.tag[:system])
+        @touch_down.call(event) if event_validation(@touch_down)
+        # end
       end
     end
-
   end
 
-  def touch_double(_option)
+  def touch_tap(_option)
+    # alert :touch_tap
+    @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|
-        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..
-        @touch_double.call(event) if @touch_double.is_a?(Proc)
-      end
+    touch_tap = @original_atome.instance_variable_get('@touch_code')[:tap]
+    # unless @touch_removed[:tap]
+    interact.on('tap') do |native_event|
+      # alert 'touchy'
+      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 using atome method such as shape ,
+      # group etc..
+      # @touch_tap.call(event) if @touch_tap.is_a?(Proc) && !Universe.edit_mode || !@original_atome.tag[:system]
+      touch_tap.call(event) if event_validation(touch_tap)
     end
+    # end
 
   end
 
-  def touch_long(_option)
-    @touch_long = @original_atome.instance_variable_get('@touch_code')[:long]
+  def touch_up(_option)
+    @element[:style][:cursor] = 'pointer'
     interact = JS.eval("return interact('##{@id}')")
-    unless @touch_removed[:long]
-      interact.on('hold') do |native_event|
+    @touch_up = @original_atome.instance_variable_get('@touch_code')[:up]
+    unless @touch_removed[:up]
+      interact.on('up') 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..
-        @touch_long.call(event) if @touch_long.is_a?(Proc)
+        # @touch_up.call(event) if @touch_up.is_a?(Proc) && (!Universe.edit_mode || @original_atome.tag[:system])
+        @touch_up.call(event) if event_validation(@touch_up)
       end
-    end
 
+    end
   end
 
-  def touch_down(_option)
-    @touch_down = @original_atome.instance_variable_get('@touch_code')[:down]
+  def touch_double(_option)
+    @element[:style][:cursor] = 'pointer'
     interact = JS.eval("return interact('##{@id}')")
-    unless @touch_removed[:down]
-      interact.on('down') do |native_event|
+    @touch_double = @original_atome.instance_variable_get('@touch_code')[:double]
+    unless @touch_removed[:double]
+      interact.on('doubletap') 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..
-        @touch_down.call(event) if @touch_down.is_a?(Proc)
-      end
+        # @touch_double.call(event) if @touch_double.is_a?(Proc) && (!Universe.edit_mode || @original_atome.tag[:system])
+        @touch_double.call(event) if event_validation(@touch_double)
 
+      end
     end
+
   end
 
-  def touch_up(_option)
+  def touch_long(_option)
+    @element[:style][:cursor] = 'pointer'
+    @touch_long = @original_atome.instance_variable_get('@touch_code')[:long]
     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|
+    unless @touch_removed[:long]
+      interact.on('hold') 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..
-        @touch_up.call(event) if @touch_up.is_a?(Proc)
-      end
+        @touch_long.call(event) if event_validation(@touch_long)
+        # @touch_long.call(event) if @touch_long.is_a?(Proc) && (!Universe.edit_mode || @original_atome.tag[:system])
+        # @touch_double.call(event) if event_validation(@touch_double)
 
+      end
     end
   end
 
   def touch_remove(option)
+    @element[:style][:cursor] = 'default'
     case option
     when :double
       @touch_double = ''
@@ -1175,16 +1226,20 @@ class HTML
       @touch_removed[:up] = true
       @touch_up = ''
     else
-      @touch_removed[:double] = true
-      @touch_removed[:down] = true
-      @touch_removed[:long] = true
-      @touch_removed[:tap] = true
-      @touch_removed[:up] = true
-      @touch_double = ''
-      @touch_down = ''
-      @touch_long = ''
-      @touch_tap = ''
-      @touch_up = ''
+      interact = JS.eval("return interact('##{@id}')")
+      interact.unset
+      # @original_atome.instance_variable_set('@touch_code')
+      @original_atome.instance_variable_set('@touch_code', nil)
+      # @touch_removed[:double] = true
+      # @touch_removed[:down] = true
+      # @touch_removed[:long] = true
+      # @touch_removed[:tap] = true
+      # @touch_removed[:up] = true
+      # @touch_double = ''
+      # @touch_down = ''
+      # @touch_long = ''
+      # @touch_tap = ''
+      # @touch_up = ''
       # to remove all interact event ( touch, drag, scale, ... uncomment below)
       # interact = JS.eval("return interact('##{@id}')")
       # interact.unset
@@ -1244,12 +1299,12 @@ class HTML
             to: #{animation_properties[:to]},
             duration: #{animation_properties[:duration]},
             onUpdate: function(v) {
-      rubyVMCallback("puts x= "+v)
-      rubyVMCallback("grab('#{@id}').left("+v+")")
+      atomeJsToRuby("puts x= "+v)
+      atomeJsToRuby("grab('#{@id}').left("+v+")")
             },
             onComplete: function() {
               window.currentAnimation = null;
-      rubyVMCallback("puts :complete")
+      atomeJsToRuby("puts :complete")
             }
           });
     JS
@@ -1549,63 +1604,14 @@ class HTML
       style("filter", 'none')
       @original_atome.apply(@original_atome.apply)
     end
-    # alert "remove : #{params} , type: #{@original_atome.type}"
-    # reset_background
-    # style(:background, '')
-    # style(:background, 'black')
-    # @original_atome.color(:red)
-    # @original_atome.apply(@original_atome.color[0])
+
   end
 
   def table_remove(params)
     if params[:row]
-      # row_index = params[:row]
-      # table_element = JS.global[:document].querySelector("##{@id} table")
-      #
-      # if table_element.nil?
-      #   puts 'Table not found'
-      #   return
-      # end
-      #
-      # rows = table_element.querySelectorAll('tbody tr').to_a
-      #
-      # if row_index >= rows.length
-      #   puts "row not found : #{row_index}"
-      #   return
-      # end
-      # row_to_remove = rows[row_index]
-      #
-      # row_to_remove[:parentNode].removeChild(row_to_remove)
-      #
-      # rows.each_with_index do |row, i|
-      #   next if i <= row_index
-      # end
     elsif params[:column]
-      # column_index = params[:column]
-      # table_element = JS.global[:document].querySelector("##{@id} table")
-      #
-      # if table_element.nil?
-      #   puts 'Table not found'
-      #   return
-      # end
-      #
-      # rows = table_element.querySelectorAll('tbody tr').to_a
-      # rows.each do |row|
-      #   cells = row.querySelectorAll('td').to_a
-      #   if column_index < cells.length
-      #     cell_to_remove = cells[column_index]
-      #     cell_to_remove[:parentNode].removeChild(cell_to_remove)
-      #   end
-      # end
-
-    end
-  end
-
-  # def reset_background
-  #   style(:background, 'black')
-  #   style('box-shadow', 'none')
-  #   style('text-shadow', 'none')
-  # end
+    end
+  end
 
   # atomisation!
   def atomized(html_object)
@@ -1613,35 +1619,6 @@ class HTML
     @element = html_object
   end
 
-  # def center(options, attach)
-  #   parent = grab(attach)
-  #
-  #   # Centre sur l'axe X
-  #   if options[:x]
-  #     x_position = calculate_position(options[:x], parent.to_px(:width), @original_atome.to_px(:width))
-  #     @original_atome.left(x_position)
-  #   end
-  #
-  #   # Centre sur l'axe Y
-  #   if options[:y]
-  #     y_position = calculate_position(options[:y], parent.to_px(:height), @original_atome.to_px(:height))
-  #     @original_atome.top(y_position)
-  #   end
-  # end
-  #
-  # # Méthode auxiliaire pour calculer la position
-  # def calculate_position(option, parent_dimension, self_dimension)
-  #   if option.is_a?(String) && option.end_with?('%')
-  #     percent = option.chop.to_f / 100.0
-  #     (parent_dimension - self_dimension) * percent
-  #   elsif option == 0
-  #     # Cas spécial pour centrer l'objet
-  #     (parent_dimension - self_dimension) / 2.0
-  #   else
-  #     option
-  #   end
-  # end
-
   def center(options, attach)
     @center_options = options
 
@@ -1657,10 +1634,33 @@ class HTML
     end
   end
 
+  def record_audio(params)
+    duration = params[:duration] * 1000
+    name = params[:name]
+    JS.eval("recordAudio(#{duration},'#{@id}', '#{name}')")
+  end
+
+  def record_video(params)
+    duration = params[:duration] * 1000
+    name = params[:name]
+    JS.eval("recordVideo(#{duration},'#{@id}', '#{name}')")
+  end
+
+  def stop_video_preview(id)
+    JS.eval("stopPreview('#{id}')")
+  end
+
+  def video_preview(id, video, audio)
+    JS.eval("create_preview('#{id}','#{video}','#{audio}')")
+  end
+
+  def stop_media_recorder(id)
+    JS.eval("writeatomestore('#{id}', 'record', 'stop')")
+  end
+
   private
 
   def apply_centering(options, parent)
-    # Centre sur l'axe X
     if options[:x]
       x_position = calculate_position(options[:x], parent.to_px(:width), @original_atome.to_px(:width))
       @original_atome.left(x_position)

data/lib/renderers/html/identity.rb

@@ -51,6 +51,9 @@ new({ method: :data, type: :string, specific: :text, renderer: :html }) do |para
 end
 
 new({ method: :data, type: :string, specific: :vector, renderer: :html }) do |value|
+  unless value.instance_of? Array
+    value=[value]
+  end
   html.svg_data(value)
 end
 
@@ -87,10 +90,15 @@ new({ renderer: :html, method: :category, type: :symbol }) do |category_names|
   end
 end
 
-new({ method: :data, type: :string, specific: :matrix, renderer: :html }) do |value, _user_proc|
+new({ method: :data, type: :string, specific: :table, renderer: :html }) do |value, _user_proc|
   html.table(value)
 end
 
 new({ method: :type, type: :hash, specific: :atomized, renderer: :html }) do |value, _user_proc|
-  html.atomized(alien)
+  html.atomized(value)
+end
+
+
+new({ renderer: :html, method: :selected, specific: :text }) do |value, &bloc|
+  html.select_text(value)
 end

data/lib/renderers/html/material.rb

@@ -81,4 +81,8 @@ end
 new({ method: :opacity, type: :integer, renderer: :html}) do |value|
   # html.opacity(value)
   html.style('opacity',value)
+end
+
+new({ method: :visual, type: :string, renderer: :html, specific: :text }) do |value, _user_proc|
+    html.style('fontFamily', value)
 end

data/lib/renderers/html/utility.rb

@@ -26,8 +26,7 @@ new({ renderer: :html, method: :terminal, type: :string }) do |value, &bloc|
   html.terminal(id, value)
 end
 
-
-new({renderer: :html, method: :match}) do |params, bloc|
+new({ renderer: :html, method: :match }) do |params, bloc|
   case id
   when :atome || :view
     result = bloc.call
@@ -37,7 +36,6 @@ new({renderer: :html, method: :match}) do |params, bloc|
   end
 end
 
-
 new({ renderer: :html, method: :import, type: :blob }) do |_params, bloc|
 
   if Atome::host == 'web-opal'
@@ -75,6 +73,7 @@ new({ renderer: :html, method: :import, type: :blob }) do |_params, bloc|
       end
       div_element.appendChild(input_element)
     end
+
     create_file_browser(:options) do |file_content|
       # puts "wasm ===>#{file_content}"
       bloc.call(file_content)
@@ -83,11 +82,6 @@ new({ renderer: :html, method: :import, type: :blob }) do |_params, bloc|
 
 end
 
-
-new({ renderer: :html, method: :selected, specific: :text }) do |value, &bloc|
-  html.select_text(value)
-end
-
 new({ method: :compute, type: :hash, renderer: :html }) do |params|
   element = JS.global[:document].getElementById(@id.to_s)
   bounding_box = element.getBoundingClientRect()
@@ -111,4 +105,66 @@ new({ method: :compute, type: :hash, renderer: :html }) do |params|
   @compute[:value] = value_found
 end
 
+new({ renderer: :html, method: :preview }) do |params, user_proc|
+  if params[:id]
+    id_f = params[:id]
+  else
+    id_f = identity_generator
+  end
+  if params[:stop]
+    html.stop_video_preview(id_f)
+  else
+
+    if params[:media] == :video
+      html.video_preview(id_f, true, false)
+    elsif params[:media] == :audio
+      html.video_preview(id_f, false, true)
+    elsif params[:media] == :all
+      html.video_preview(id_f, true, true)
+    else
+      html.video_preview(id_f, true, true)
+    end
+  end
+
+end
+new({ renderer: :html, method: :record }) do |params, user_proc|
+  duration = params[:duration] ||= 1000000
+  media = params[:media] ||= :video
+  mode = params[:mode] ||= :web # web or native
+  name = params[:name] ||= :record
+  path = params[:path] ||= './'
+  data = params[:data] ||= {}
+  stop = params[:stop]
+  if stop
+    if @video_recorder_type == :web || @audio_recorder_type == :web
+      html.stop_media_recorder(id)
+    elsif @video_recorder_type == :native || @audio_recorder_type == :native
+      A.message({ action: :stop_recording, data: params })
+    end
+
+  elsif media == :video
+    type = params[:type] ||= :mp4
+    if mode == :native
+      @video_recorder_type = :native
+      A.message({ action: :record, data: { type: type, duration: duration, name: name, path: path, media: media, data: data } }) do |result|
+        user_proc.call(result)
+      end
+    else
+      @video_recorder_type = :web
+      html.record_video(params)
+    end
+
+  elsif media == :audio
+    type = params[:type] ||= :wav
+    if mode == :native
+      @audio_recorder_type = :native
+      A.message({ action: :record, data: { type: type, duration: duration, name: name, path: path, media: media, data: data } }) do |result|
+        user_proc.call(result)
+      end
+    else
+      @audio_recorder_type = :web
+      html.record_audio(params)
+    end
+  end
 
+end

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

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+image({ id: :logo })
+def_2 = "M 536.75,-0.25 C 536.75,-0.25 536.75,-0.08 536.75,0.25 536.75,25.82 536.75,1023.75 536.75,1023.75 536.75,1024.08 536.75,1024.25 536.75,1024.25 L 486.75,1024.25 C 486.75,1024.25 486.75,1024.08 486.75,1023.75 486.75,998.18 486.75,0.25 486.75,0.25 486.75,0.24 486.75,-0.2 486.75,-0.2 L 536.75,-0.25 536.75,-0.25 Z M 536.75,-0.25"
+vector({ id: :my_svg, top: 33, left: 99, data: { path: { d: def_2, id: :p2, stroke: :red, 'stroke-width' => 3, fill: :green } } })
+
+wait 1 do
+  grab(:view).b64_to_tag({ id: 'my_svg', target: :logo })
+end

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

@@ -1,13 +1,13 @@
 #  frozen_string_literal: true
 a=box({width: 666, height: 777, color: :orange})
-b = box({ left: 666, color: :blue, smooth: 6, id: :the_box2, depth: 1 })
+b = box({ left: 666, color: :blue, smooth: 6, id: :the_box2, depth: 1 , top: 66})
 cc=circle({color: :red, left: 0, top: 0})
 clone = ""
 b.drag(:start) do
   b.color(:black)
   b.height(123)
   # beware you must use grab(:view) else it'll be attached to the context, that means to 'b' in this case
-  clone = grab(:view).circle({ id: "#{b.id}_cloned",color: :white, left: b.left, top: b.top, depth: 3 })
+  clone = grab(:view).circle({ color: :white, left: b.left, top: b.top, depth: 3 })
 end
 
 b.drag(:stop) do
@@ -44,4 +44,11 @@ t.touch(true) do
   b.drag({remove: :stop})
 end
 
+tt= text({data: "remove drag on circles", top: 99})
+
+tt.touch(true) do
+  cc.drag(false)
+  c.drag(false)
+end
+