atome 0.5.5.6.4 → 0.5.5.6.6

data/lib/renderers/html/utility.rb

@@ -36,3 +36,49 @@ new({renderer: :html, method: :match}) do |params, bloc|
     html.match(params)
   end
 end
+
+
+new({ renderer: :html, method: :import, type: :blob }) do |_params, bloc|
+
+  if Atome::host == 'web-opal'
+    file_for_opal(@id, bloc) do |file_content|
+      bloc.call(file_content)
+    end
+
+  else
+    # Wasm version
+    def create_file_browser(_options = '', &bloc)
+      div_element = JS.global[:document].getElementById(@id.to_s)
+      input_element = JS.global[:document].createElement("input")
+      input_element[:type] = "file"
+      input_element[:style][:position] = "absolute"
+      input_element[:style][:display] = "none"
+      input_element[:style][:width] = "0px"
+      input_element[:style][:height] = "0px"
+
+      input_element.addEventListener("change") do |native_event|
+        event = Native(native_event)
+        file = event[:target][:files][0]
+        if file
+          puts "file requested: #{file[:name]}"
+          file_reader = JS.global[:FileReader].new
+          file_reader.addEventListener("load") do |load_event|
+            file_content = load_event[:target][:result]
+            Atome.file_handler(@id, file_content, bloc)
+          end
+          file_reader.readAsText(file)
+        end
+      end
+
+      div_element.addEventListener("mousedown") do |event|
+        input_element.click
+      end
+      div_element.appendChild(input_element)
+    end
+    create_file_browser(:options) do |file_content|
+      # puts "wasm ===>#{file_content}"
+      bloc.call(file_content)
+    end
+  end
+
+end

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

@@ -57,8 +57,10 @@ b = circle({ id: :the_cirlce })
 b.text(:hello)
 bb = b.duplicate({  width: 33, left: 234, top: 222 })
 bb.color(:red)
+wait 1 do
 bb2 = b.duplicate({ width: 33, left: 12 })
 bb3 = b.duplicate({ width: 33, left: 444 })
 bb3.color(:green)
 bb2.color(:orange)
+end
 

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

@@ -1,50 +1,15 @@
 #  frozen_string_literal: true
 
-# support=box({top: 250, left: 12, width: 300, height: 40, smooth: 9, color:{red: 0.3, green: 0.3, blue: 0.3}, id: :support })
-#
-# support.shadow({
-#                  id: :s3,
-#                  left: 3, top: 3, blur: 9,
-#                  invert: true,
-#                  red: 0, green: 0, blue: 0, alpha: 0.7
-#                })
-def create_file_browser
-  div_element = JS.global[:document].createElement("div")
-
-  # Définir les propriétés CSS de l'élément div
-  div_element[:style][:width] = "33px"        # Taille: largeur de 100 pixels
-  div_element[:style][:height] = "33px"       # Taille: hauteur de 100 pixels
-  div_element[:style][:backgroundColor] = "rgba(255,0,0,0.3)"  # Couleur de fond rouge
-  div_element[:style][:position] = "absolute"  # Positionnement absolu
-  div_element[:style][:top] = "0px"           # Position par rapport au haut de l'écran
-  div_element[:style][:left] = "0px"          # Position par rapport à la gauche de l'écran
-
-  # Définir un ID pour l'élément div
-  div_element[:id] = "monDiv"
-
-  input_element = JS.global[:document].createElement("input")
-  input_element[:type] = "file"
-  input_element[:style][:position] = "absolute"
-  input_element[:style][:display] = "none"
-  input_element[:style][:width] = "0px"
-  input_element[:style][:height] = "0px"
-  input_element.addEventListener("change") do |native_event|
-    event = Native(native_event)
-    file = event[:target][:files][0]
-    if file
-      puts "file requested: #{file[:name]}"
-      # support.controller({ action: :loadProject,  params: { path: file[:name]} })
-    end
-  end
-  div_element.addEventListener("mousedown") do |event|
-    # Déclenchez manuellement un clic sur l'input
-    input_element.click
-  end
-  view_div = JS.global[:document].querySelector("#view")
-
-  view_div.appendChild(input_element)
-  view_div.appendChild(div_element)
-
+b = box({ drag: true })
+b.import(true) do  |content|
+  puts "add code here, content:  #{content}"
 end
 
-create_file_browser
+
+
+
+
+
+
+
+

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

@@ -1,179 +1,7 @@
 # frozen_string_literal: true
 
-# class HTML
-#
-#   def layout_style(option = {})
-#     element_style = {
-#       backgroundColor: 'rebeccapurple',
-#       width: '100%',remove_layout
-#       height: '29px',
-#       borderRadius: '59px',
-#       display: 'flex',
-#       justifyContent: 'center',
-#       alignItems: 'center',
-#       flexDirection: 'column',
-#       marginBottom: '20px',
-#       padding: '0px',
-#       # transform: 'rotate(22deg)',
-#
-#     }
-#
-#     container_style = {
-#       display: :grid,
-#       gridTemplateColumns: 'repeat(4, 1fr)',
-#       overflow: :scroll,
-#       flexDirection: 'column',
-#       gap: '20px',
-#       padding: '0px',
-#
-#     }
-#     element_style = element_style.merge(option[:element]) if option[:element]
-#     container_style = container_style.merge(option[:container]) if option[:container]
-#     @layout_style = { element: element_style, container: container_style }
-#   end
-#
-#   def remove_webview_layout(element, container)
-#     element[:classList].add('atome')
-#     element[:classList].remove('matrix_element')
-#   end
-#
-#   def layout(params)
-#
-#     id_found = params[:id]
-#     mode_found = params[:mode]
-#     width_found = params[:width]
-#     height_found = params[:height]
-#     layout_container = JS.global[:document].getElementById(id_found.to_s)
-#     layout_elements = JS.global[:document].querySelectorAll(".#{id_found}")
-#     if mode_found == :default
-#       # we revert all elements to default state / layout
-#       layout_elements.to_a.each do |element|
-#         element[:classList].remove('matrix_element')
-#         element[:classList].add('atome')
-#       end
-#     else
-#       # we apply new layout to  elements
-#       layout_style({ element: { backgroundColor: :purple } })
-#       layout_container[:classList].remove('atome')
-#       layout_container[:classList].add('matrix')
-#       layout_elements.to_a.each do |element|
-#         # we check if current state is default if yes we store the layout to be able to restore it
-#         element[:style][:borderRadius] = '59px'
-#         element[:classList].remove('atome')
-#         # element[:classList].add('matrix_element')
-#       end
-#     end
-#
-#   end
-# end
-
-class Atome
-  def remove_layout
-    display[:mode] = :default
-    # we get the current parent (the previous layout)
-    parent_found = grab(attach)
-    # we get the parent of the parent
-    grand_parent = parent_found.attach
-    # and attach the item to the grand parent
-    # we remove the parent category and restore atome category
-    remove({ category: attach})
-    category(:atome)
-    attach(grand_parent)
-    #  we delete the parent (the layout) if it no more children attached
-    if parent_found.attached.length == 0
-      parent_found.delete(true)
-    end
-  end
-end
-
-new({ particle: :layout }) do |params|
-  mode_found = params.delete(:mode) || :list
-  elements_style= params.delete(:element) || {}
-  # layout_width = params[:width] ||= 333
-  # layout_height = params[:height] ||= 333
-  # now we get the list of the atome to layout
-  atomes_to_layout = []
-  if type == :group
-    atomes_to_layout = collect
-  end
-  # if params[:list] is specified group collection is override
-  atomes_to_layout = params[:list] if params[:list]
-
-  if mode_found == :default
-    # the user want to revert the layout to the default
-    atomes_to_layout.each do |atome_id_to_layout|
-      atome_to_layout = grab(atome_id_to_layout)
-      unless params[:id]
-        params[:id] = atome_to_layout.display[:layout]
-      end
-      # now we get the default particles and restore it
-      atome_to_layout.display[:default].each do |particle, value|
-        atome_to_layout.send(:delete,particle)
-        atome_to_layout.send(particle,value)
-      end
-
-      atome_to_layout.remove_layout
-    end
-  else
-    if params[:id]
-      container_name = params[:id]
-      container = grab(:view).box({ id: container_name })
-      container_class = container_name
-    else
-      container = grab(:view).box
-      id_found = container.id
-      params[:id] = id_found
-      container_class = id_found
-    end
-    # container.width = layout_width
-    # container.height = layout_height
-    container.remove({ category: :atome})
-    container.category(:matrix)
-    alert ">> #{mode_found}"
-    params.each do |particle, value|
-      container.send(particle, value)
-    end
-    # now we add user wanted particles
-    alert params
-
-    atomes_to_layout.each do |atome_id_to_layout|
-      atome_to_layout = grab(atome_id_to_layout)
-      # we remove previous display mode
-      atome_to_layout.remove_layout
-      atome_to_layout.display[:mode] = mode_found
-      atome_to_layout.display[:layout] = id_found
-      atome_to_layout.attach(container_class)
-      atome_to_layout.remove({ category: :atome})
-      atome_to_layout.category(container_class)
-      #the hash below is used to restore element state
-      original_state={}
-      elements_style.each do |particle, value|
-        # we have to store all elements particle to restore it later
-        original_state[particle]=atome_to_layout.send(particle)
-        atome_to_layout.send(particle, value)
-      end
-      atome_to_layout.display[:default]=original_state
-      # puts "display is : #{atome_to_layout.display}"
-      # atome_to_layout.html.add_class(container_class)
-      # puts container_class
-    end
-  end
-  params
-end
-
-# new({ renderer: :html, method: :layout, type: :hash }) do |params, _user_proc|
-#   html.layout(params)
-# end
-
-new({ particle: :display })
-
-# system
-Atome.new({ renderers: [:html], id: :selector, collect: [], type: :group, tag: { system: true } })
-
-############### tests
-
 b = box({ color: :red, id: :the_box, left: 3 })
-16.times do |index|
+5.times do |index|
   width_found = b.width
   b.duplicate({ left: b.left + index * (width_found + 45), top: 0, category: :custom_category })
 end
@@ -182,7 +10,7 @@ grab(:view).attached.each do |atome_found|
   grab(atome_found).selected(true)
 end
 grab(:the_box_copy_1).text(:hello)
-#################
+
 selected_items = grab(Universe.current_user).selection # we create a group
 # we collect all atomes in the view
 atomes_found = []
@@ -190,38 +18,34 @@ selected_items.each do |atome_found|
   atomes_found << atome_found
 end
 
-random_found = atomes_found.sample(17)
-
+# random_found = atomes_found.sample(17)
+#
 # random_found.each do |atome_id|
 #   atome_found = grab(atome_id)
 #   if atome_found.type == :shape
 #     atome_found.left(rand(700))
-#     atome_found.width(rand(120))
-#     atome_found.height(rand(120))
+#     atome_found.width(rand(200))
+#     atome_found.height(rand(200))
+#     # atome_found.rotate(rand(90))
 #     atome_found.smooth(rand(120))
 #     atome_found.color({ red: rand, green: rand, blue: rand })
 #   end
 # end
+
+selected_items.layout({ mode: :default, width: 500, height: 22 })
+
 wait 1 do
-  selected_items.layout({ mode: :grid, width: 900, height: 500, color: :green,element: {height: 22, rotate: 22} })
-  # alert grab('the_box_copy_4').display
+  selected_items.layout({ mode: :grid, width: 900, height: 500, color: :green, element: { rotate: 22, height: 100, width: 150 } })
   wait 1 do
-    # selected_items.layout({ mode: :grid, width: 800, height: 500 })
+    selected_items.layout({ mode: :grid, width: 1200, height: 500, overflow: :scroll })
     wait 1 do
-      selected_items.layout({ mode: :default, width: 500, height: 500 })
-      # alert grab('the_box_copy_4').display
+      selected_items.layout({ mode: :default, width: 500, height: 22 })
       wait 1 do
-        selected_items.layout({ id: :my_layout, mode: :list, width: 151, height: 800, overflow: :scroll })
+        selected_items.layout({ id: :my_layout, mode: :list, width: 800, height: 800, overflow: :scroll, element: { height: 22, width: 800 } })
         wait 1 do
-          selected_items.layout({ mode: :default, width: 500, height: 500 })
+          selected_items.layout({ mode: :default })
         end
       end
     end
   end
 end
-
-# JS.global[:console].clear()
-
-
-# b=box
-# alert ">> #{b.display}"

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

@@ -2,7 +2,7 @@
 
 
 c=circle({left: 220})
-t=text({left: 550,data: :hello,password: { read: {atome: :my_secret} }})
+t=text({left: 550,data: :hello,password: { read: { atome: :my_secret} }})
 b = box({ id: :the_box, left: 66,smooth: 1.789,
           password: {
             read: {
@@ -18,16 +18,16 @@ b = box({ id: :the_box, left: 66,smooth: 1.789,
 
 
 
-b.authorise({ read: {atome: :the_pass,smooth: :read_pass }, write: {smooth: :write_pass}, destroy: true}  )
+b.authorise({ read: { atome: :the_pass, smooth: :read_pass }, write: { smooth: :write_pass}, destroy: true}  )
 puts b.smooth
 # next will be rejected because destroy: true
 puts b.smooth
 #
-b.authorise({ read: {atome: :wrong_pass,smooth: :no_read_pass }, write: {smooth: :wrong_write_pass}, destroy: false}  )
+b.authorise({ read: { atome: :wrong_pass, smooth: :no_read_pass }, write: { smooth: :wrong_write_pass}, destroy: false}  )
 puts 'will send the wrong password'
 puts b.smooth
 
-b.authorise({ read: {atome: :wrong_pass,smooth: :read_pass }, write: {smooth: :wrong_write_pass}, destroy: false}  )
+b.authorise({ read: { atome: :wrong_pass, smooth: :read_pass }, write: { smooth: :wrong_write_pass}, destroy: false}  )
 puts "'with send the right password it'll works"
 puts b.smooth
 # authorise has two params the first is the password to authorise the second is used to destroy the password or keep for
@@ -41,7 +41,7 @@ wait 1 do
       b.authorise({write: {smooth: :write_pass}, destroy: false} )
       b.smooth(66)
       wait 1 do
-        b.authorise({write: {smooth: :false_pass, atome: :no_apss, destroy: true}} )
+        b.authorise({write: { smooth: :false_pass, atome: :no_apss, destroy: true}} )
         b.smooth(6)
       end
     end

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

@@ -21,7 +21,6 @@ t.touch(true) do
     atome_selected.height=rand(333)
 
   end
-
   b.selected(false)
   puts "3 current_user- #{grab(Universe.current_user).selection}"
   puts "3 - b selected : #{b.selected}"

data/vendor/assets/src/css/style.css

@@ -23,7 +23,7 @@ html, body {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     flex-direction: column;
-    gap: 20px;
+    gap: 12px;
     padding: 3px;
 }
 /*.matrix_element{*/

data/vendor/assets/src/js/atome/atome.js

@@ -63,8 +63,6 @@ async function changeCurrentDirectory(atome_id, newPath) {
 }
 
 
-
-
 // Terminal
 
 async function terminal(atome_id, cmd) {
@@ -152,29 +150,166 @@ function createSvgElement(tagName, attributes) {
     return elem;
 }
 
+//
+// function sanitizeString(str) {
+//     return str.replace(/'/g, "\\'");
+// }
+// function fileread(){
+//     var inputElement = document.createElement("input");
+//     inputElement.type = "file";
+//
+//     inputElement.addEventListener("change", function(event) {
+//         var file = event.target.files[0];
+//         var reader = new FileReader();
+//
+//         reader.onload = function(event) {
+//             var content = event.target.result;
+//             var sanitizedContent = sanitizeString(content);
+//             rubyVMCallback("input_callback('"+sanitizedContent+"')");
+//         };
+//
+//         reader.readAsText(file);
+//     });
+//
+// // Ajout de l'élément input à la div
+//     var viewDiv = document.querySelector("#support");
+//     viewDiv.appendChild(inputElement);
+// }
 
-function sanitizeString(str) {
-    return str.replace(/'/g, "\\'");
-}
-function fileread(){
-    var inputElement = document.createElement("input");
-    inputElement.type = "file";
-
-    inputElement.addEventListener("change", function(event) {
-        var file = event.target.files[0];
-        var reader = new FileReader();
-
-        reader.onload = function(event) {
-            var content = event.target.result;
-            var sanitizedContent = sanitizeString(content);
-            rubyVMCallback("input_callback('"+sanitizedContent+"')");
+
+function fileForOpal(parent, bloc) {
+    let input = document.createElement('input');
+    input.type = 'file';
+    input.style.position = "absolute";
+    input.style.display = "none";
+    input.style.width = "0px";
+    input.style.height = "0px";
+    input.addEventListener('change', function (event) {
+        let file = event.target.files[0];
+        let reader = new FileReader();
+
+        reader.onloadstart = function () {
+            console.log("Load start");
+        };
+
+        reader.onprogress = function (e) {
+            console.log("Loading: " + (e.loaded / e.total * 100) + '%');
+        };
+
+        reader.onload = function (e) {
+            var content = e.target.result;
+            Opal.Atome.$file_handler(parent, content, bloc)
+        };
+
+        reader.onloadend = function () {
+            console.log("Load end");
+        };
+
+        reader.onerror = function () {
+            console.error("Error reading file");
         };
 
         reader.readAsText(file);
     });
+    let div_element = document.getElementById(parent);
+    div_element.appendChild(input);
+    div_element.addEventListener('mousedown', function (event) {
+        input.click()
+    })
 
-// Ajout de l'élément input à la div
-    var viewDiv = document.querySelector("#support");
-    viewDiv.appendChild(inputElement);
 }
 
+function importer(){
+
+    // Gestionnaire pour le drag and drop de fichiers
+    document.body.addEventListener('dragover', function(e) {
+        e.preventDefault(); // Nécessaire pour autoriser le drop
+        // Modifier le style si nécessaire
+    });
+
+    document.body.addEventListener('drop', function(e) {
+        e.preventDefault();
+        let files = e.dataTransfer.files; // Obtention de la liste des fichiers déposés
+
+        if (files.length) {
+            // Parcourir chaque fichier
+            for (let i = 0; i < files.length; i++) {
+                let file = files[i];
+                let reader = new FileReader();
+
+                // Lire le fichier en tant que texte
+                reader.readAsText(file);
+
+                // Événement déclenché une fois la lecture terminée
+                reader.onload = function() {
+                    console.log('Contenu du fichier #' + (i + 1));
+                    console.log('Nom: ' + file.name);
+                    console.log('Type: ' + file.type);
+                    console.log('Taille: ' + file.size + ' octets');
+                    console.log('Contenu: \n' + reader.result); // Affichage du contenu du fichier
+                };
+
+                // Gestion des erreurs de lecture
+                reader.onerror = function() {
+                    console.error('Erreur de lecture du fichier: ' + file.name);
+                };
+            }
+        }
+        // if (e.dataTransfer.files.length) {
+        //     alert (e.dataTransfer.files);
+        //     // Traiter les fichiers déposés
+        // }
+    });
+
+// Gestionnaire pour les éléments div
+    var divs = document.querySelectorAll('.draggable-div');
+    divs.forEach(function(div) {
+        div.addEventListener('dragstart', function(e) {
+            e.dataTransfer.setData('text/plain', 'some-data');
+            e.stopPropagation(); // Empêcher la propagation au body
+        });
+    });
+
+}
+
+importer()
+
+
+function exception_import (){
+    // Sélectionner la div spéciale par son ID
+    var specialDiv = document.getElementById('exept');
+
+// Gestionnaire d'événements pour la 'special-div' pour le drag over
+    specialDiv.addEventListener('dragover', function(e) {
+
+        specialDiv.style.backgroundColor= 'red';
+        e.preventDefault(); // Prévenir le comportement par défaut
+        e.stopPropagation(); // Arrêter la propagation de l'événement
+    });
+    specialDiv.addEventListener('dragleave', function(e) {
+        specialDiv.style.backgroundColor = 'yellow'; // Réinitialiser la couleur de fond lors du drag out
+        e.stopPropagation(); // Arrêter la propagation de l'événement
+    });
+// Gestionnaire d'événements pour la 'special-div' pour le drop
+    specialDiv.addEventListener('drop', function(e) {
+        e.preventDefault(); // Prévenir le comportement par défaut
+        e.stopPropagation(); // Arrêter la propagation de l'événement
+
+        // Traitement spécifique pour les fichiers déposés sur la 'special-div'
+        console.log('Fichier déposé dans la zone spéciale');
+    });
+
+// Gestionnaire d'événements pour le body pour le drop
+//     document.body.addEventListener('drop', function(e) {
+//         e.preventDefault(); // Prévenir le comportement par défaut
+//
+//         // Traitement pour les fichiers déposés en dehors de la 'special-div'
+//         console.log('Fichier déposé hors de la zone spéciale');
+//     });
+
+
+}
+setTimeout(function () {
+    exception_import();
+console.log('ready');
+}, 3000);

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: atome
 version: !ruby/object:Gem::Version
-  version: 0.5.5.6.4
+  version: 0.5.5.6.6
 platform: ruby
 authors:
 - Jean-Eric Godard
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2023-12-14 00:00:00.000000000 Z
+date: 2023-12-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: arduino_firmata
@@ -346,7 +346,6 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
-- app_builder_helpers/Rakefile
 - documentation/atome.md
 - documentation/basic.md
 - documentation/database.JPG