atome 0.5.3.8.1 → 0.5.4.0.9

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

@@ -0,0 +1,12 @@
+const atomeDrop = {
+    drop: function (options, atome_id, atome) {
+
+        // internal drop cf a div dropped on a div
+        let element = document.getElementById(atome_id)
+        mouse_interaction(element,atome)
+
+        file_drop(atome_id,atome);
+    }
+
+}
+

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

@@ -0,0 +1,166 @@
+
+function mouse_interaction(element, atome){
+    interact(element).dropzone({
+        listeners: {
+            dragenter(event) {
+
+                atome.$enter_action_callback(Opal.hash({id: event.relatedTarget.id}));
+                // console.log(event)
+                // event.relatedTarget.textContent = 'Dropped'
+            },
+            dragleave(event) {
+                atome.$leave_action_callback(Opal.hash({id: event.relatedTarget.id}));
+                // event.relatedTarget.textContent = 'Dropped'
+            },
+            dropactivate: function (event) {
+                // add active dropzone feedback
+                // event.target.classList.add('drop-active')
+            },
+            drop(event) {
+                // console.log(event)
+                atome.$drop_action_callback(Opal.hash({id: event.relatedTarget.id}));
+                // event.relatedTarget.textContent = 'Dropped'
+            },
+            dropdeactivate: function (event) {
+                // remove active dropzone feedback
+                // event.target.classList.remove('drop-active')
+                // event.target.classList.remove('drop-target')
+            }
+            // dropdeactivate: function (event) {
+            //     // remove active dropzone feedback
+            //     // event.target.classList.remove('drop-active')
+            //     // event.target.classList.remove('drop-target')
+            // }
+            // start(event) {
+            //     console.log("satring")
+            //     atome.$drag_action_callback(event.pageX, event.pageY, event.rect.left, event.rect.top);
+            // },
+            // move(event) {
+            //     console.log("0000")
+            //     position.x += event.dx
+            //     position.y += event.dy
+            //     //  we feed the callback method below
+            //     atome.$drag_action_callback(event.pageX, event.pageY, event.rect.left, event.rect.top);
+            //
+            //     if (options === true) {
+            //         event.target.style.transform =
+            //             event.target.style.transform = 'translate(' + position.x + 'px, ' + position.y + 'px)'
+            //     }
+            //
+            // },
+            // end(event) {
+            //     console.log("endinfring")
+            //
+            //     atome.$drag_action_callback(event.pageX, event.pageY, event.rect.left, event.rect.top);
+            //
+            //
+            // },
+        }
+    })
+}
+
+
+function file_drop(atome_id, atome){
+    const dropzone = document.querySelector('#'+atome_id)
+    dropzone.addEventListener('dragover', evt => evt.preventDefault())
+    dropzone.addEventListener('drop', async evt => {
+        evt.preventDefault()
+        const files = await window.getFilesFromDataTransferItems(evt.dataTransfer.items)
+        for (const file of files) {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onloadend = function () {
+                const base64data = reader.result;
+                let  type_found = file.type.split('/')[0]
+                atome.$drop_action_callback(Opal.hash({path: file.filepath,type: type_found,size: file.size,data: base64data}));
+            }
+        }
+    })
+
+
+    async function getFilesFromDataTransferItems (dataTransferItems, options = { raw: false }) {
+        const checkErr = (err) => {
+            if (getFilesFromDataTransferItems.didShowInfo) return
+            if (err.name !== 'EncodingError') return
+            getFilesFromDataTransferItems.didShowInfo = true
+            const infoMsg = `${err.name} occured within datatransfer-files-promise module\n`
+                + `Error message: "${err.message}"\n`
+                + 'Try serving html over http if currently you are running it from the filesystem.'
+            console.warn(infoMsg)
+        }
+
+        const readFile = (entry, path = '') => {
+            return new Promise((resolve, reject) => {
+                entry.file(file => {
+                    if (!options.raw) file.filepath = path + file.name // save full path
+
+                    resolve(file)
+                }, (err) => {
+                    checkErr(err)
+                    reject(err)
+                })
+            })
+        }
+
+        const dirReadEntries = (dirReader, path) => {
+            return new Promise((resolve, reject) => {
+                dirReader.readEntries(async entries => {
+                    let files = []
+                    for (let entry of entries) {
+                        const itemFiles = await getFilesFromEntry(entry, path)
+                        // console.log(itemFiles)
+                        files = files.concat(itemFiles)
+                    }
+                    resolve(files)
+                }, (err) => {
+                    checkErr(err)
+                    reject(err)
+                })
+            })
+        }
+
+        const readDir = async (entry, path) => {
+            const dirReader = entry.createReader()
+            const newPath = path + entry.name + '/'
+            let files = []
+            let newFiles
+            do {
+                newFiles = await dirReadEntries(dirReader, newPath)
+                files = files.concat(newFiles)
+            } while (newFiles.length > 0)
+            return files
+        }
+
+        const getFilesFromEntry = async (entry, path = '') => {
+            if (entry.isFile) {
+                const file = await readFile(entry, path)
+                return [file]
+            }
+            if (entry.isDirectory) {
+                const files = await readDir(entry, path)
+                return files
+            }
+            // throw new Error('Entry not isFile and not isDirectory - unable to get files')
+        }
+
+        let files = []
+        let entries = []
+
+        // Pull out all entries before reading them
+        for (let i = 0, ii = dataTransferItems.length; i < ii; i++) {
+            entries.push(dataTransferItems[i].webkitGetAsEntry())
+        }
+
+        // Recursively read through all entries
+        for (let entry of entries) {
+            const newFiles = await getFilesFromEntry(entry)
+            files = files.concat(newFiles)
+        }
+
+        return files
+    }
+
+    if (this.window && this === this.window) this.getFilesFromDataTransferItems = getFilesFromDataTransferItems
+    else module.exports.getFilesFromDataTransferItems = getFilesFromDataTransferItems
+
+}

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

@@ -1,7 +1,12 @@
 const atomeFile = {
-    reader: function (file, atome, proc) {
+
+
+    reader: function(file, atome, proc) {
         fetch('medias/' + file)
             .then(response => response.text())
             .then(text => atome.$read_callback(text, proc))
     }
+
 }
+
+

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

@@ -0,0 +1,43 @@
+// const atomeOver = {
+//
+//     over_enter: function (atome_id, atome, proc_passed, state) {
+//         let element = document.getElementById(atome_id)
+//         // let dropzone = document.getElementById('dropzone');
+//         element.addEventListener('dragover', handleDragOver);
+//
+//         function handleDragOver(evt) {
+//             evt.preventDefault();
+//             if (state == 'enter') {
+//                 atome.$enter_action_callback(proc_passed);
+//                 state = false
+//             }
+//
+//         }
+//
+//         // mouse_interaction(element, atome)
+//
+//
+//     }
+//     // ,
+//     // over_leave: function (atome_id, atome, proc_passed, state) {
+//     //     let element = document.getElementById(atome_id)
+//     //     // let dropzone = document.getElementById('dropzone');
+//     //     element.addEventListener('dragover', handleDragOver);
+//     //
+//     //     function handleDragOver(evt) {
+//     //         evt.preventDefault();
+//     //         if (state == 'leave') {
+//     //             atome.$leave_action_callback(proc_passed);
+//     //             state = false
+//     //         }
+//     //
+//     //     }
+//     //
+//     //     // mouse_interaction(element, atome)
+//     //
+//     //
+//     // },
+//
+//
+// }
+//

data/vendor/assets/src/medias/images/icons/email.svg

@@ -1,13 +1,13 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-	 viewBox="0 0 493.497 493.497" xml:space="preserve">
-<path d="M444.556,85.218H48.942C21.954,85.218,0,107.171,0,134.16v225.177c0,26.988,21.954,48.942,48.942,48.942h395.613
-	c26.988,0,48.941-21.954,48.941-48.942V134.16C493.497,107.171,471.544,85.218,444.556,85.218z M460.87,134.16v225.177
-	c0,2.574-0.725,4.924-1.793,7.09L343.74,251.081l117.097-117.097C460.837,134.049,460.87,134.096,460.87,134.16z M32.628,359.336
-	V134.16c0-0.064,0.033-0.11,0.033-0.175l117.097,117.097L34.413,366.426C33.353,364.26,32.628,361.911,32.628,359.336z
-	 M251.784,296.902c-2.692,2.691-7.378,2.691-10.07,0L62.667,117.846h368.172L251.784,296.902z M172.827,274.152l45.818,45.819
-	c7.512,7.511,17.493,11.645,28.104,11.645c10.61,0,20.592-4.134,28.104-11.645l45.82-45.819l101.49,101.499H71.327L172.827,274.152z
-	"/>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 493.497 493.497" xml:space="preserve">
+<path d="M444.556,85.218H48.942C21.954,85.218,0,107.171,0,134.16v225.177c0,26.988,21.954,48.942,48.942,48.942h395.613
+	c26.988,0,48.941-21.954,48.941-48.942V134.16C493.497,107.171,471.544,85.218,444.556,85.218z M460.87,134.16v225.177
+	c0,2.574-0.725,4.924-1.793,7.09L343.74,251.081l117.097-117.097C460.837,134.049,460.87,134.096,460.87,134.16z M32.628,359.336
+	V134.16c0-0.064,0.033-0.11,0.033-0.175l117.097,117.097L34.413,366.426C33.353,364.26,32.628,361.911,32.628,359.336z
+	 M251.784,296.902c-2.692,2.691-7.378,2.691-10.07,0L62.667,117.846h368.172L251.784,296.902z M172.827,274.152l45.818,45.819
+	c7.512,7.511,17.493,11.645,28.104,11.645c10.61,0,20.592-4.134,28.104-11.645l45.82-45.819l101.49,101.499H71.327L172.827,274.152z
+	"/>
 </svg>

data/vendor/assets/src/medias/rubies/demos.rb

@@ -0,0 +1,63 @@
+######### demos
+# we create a code container
+element({id: :code_container, data: :empty})
+puts "Attention this method only work with a server due to security restriction "
+demo_container = grab('intuition').box({id: :demo_container,left: 0, overflow: :scroll, height: 567})
+clearer = grab('intuition').circle({top: 3, left: 3, width: 39, height: 39, color: :orange, id: :debugger})
+view_code = grab('intuition').circle({top: 3, left: 99, width: 39, height: 39, color: :red, id: :clearer})
+# view=grab(:view)
+view_code.touch(true) do
+  code=grab(:code_container).data
+  grab(:view).text({ data: code, width: :auto, height: 333, left: :auto, depth: 33, right: 0, overflow: :scroll })
+end
+
+clearer.touch(true) do
+  grab(:view).clear(true)
+  # atomes_found=[]
+  # Universe.atomes.each do |atome_id_found, _atome_content_found|
+  #   atomes_found << atome_id_found
+  # end
+end
+
+
+
+context=grab(:view)
+demo_container.read('rubies/demos_list.rb') do |demos_found|
+  # we eval the demo list
+  eval demos_found
+  demos_list.each_with_index  do |demo, index|
+    current_demo=demo_container.text ({ data: demo, top: 16*index, left: 12, visual: {size: 12} })
+    current_demo.touch(true) do
+      #TODO : create a ruby method for console clear
+      `console.clear()`
+      puts atome_infos
+      puts  "current demo: #{demo}"
+      context.clear(true)
+      # atomes_attached=context.attached
+      users_atomes=[]
+      Universe.atomes.each do |k, _v|
+        users_atomes << k
+      end
+
+      # puts "=> before > atomes attached : #{atomes_attached}"
+      # puts "==-> before > users_atomes : #{users_atomes}"
+
+      # we delete/clear the prev scene
+      # atomes_attached.each do |atome_id_found|
+      #   unless atome_id_found == :view_color
+      #     atome_found=grab(atome_id_found)
+      #     atome_found.delete(true) if atome_found
+      #   end
+      # end
+      # we eval the demo content
+      demo_container.read('rubies/examples/'+demo) do |demo_requested|
+        grab(:view).eval demo_requested
+        grab(:code_container).data(demo_requested)
+      end
+      # puts "=> after >atomes attached : #{atomes_attached}"
+      # puts "==-> after > users_atomes : #{users_atomes}"
+
+
+    end
+  end
+end

data/vendor/assets/src/medias/rubies/examples/add.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 my_video = Atome.new(
-  video: { renderers: [:browser],  id: :video1, type: :video, parents: [:view],
-           path: './medias/videos/avengers.mp4', left: 333, top: 33, width: 777
+  video: { renderers: [:browser],  id: :video1, type: :video, attach: [:view],
+           path: './medias/videos/avengers.mp4', left: 33, top: 33, width: 777
   }
 )
 
@@ -17,9 +17,8 @@ end
 
 jumper=lambda do
   my_video.play(12)
-  my_video.play(12)
 end
 
 my_video.markers({ markers: { begin: 6, code: jumper } })
 
-my_video.add({ markers: { my_stop: { begin: 16, code: stoper } } })
+my_video.add({ markers: { my_stop: { begin: 16, code: stoper } }, left: 33 })

data/vendor/assets/src/medias/rubies/examples/animation.rb

@@ -5,12 +5,12 @@ bb.color(:orange)
 box({ id: :my_box, drag: true })
 c = circle({ id: :the_circle, left: 222, drag: { move: true, inertia: true, lock: :start } })
 c.shadow({ renderers: [:browser], id: :shadow2, type: :shadow,
-           parents: [:the_circle], children: [],
+           attach: [:the_circle],
            left: 3, top: 9, blur: 19,
            red: 0, green: 0, blue: 0, alpha: 1
          })
 
-Atome.new(animation: { renderers: [:browser], id: :the_animation1, type: :animation, children: [] })
+Atome.new(animation: { renderers: [:browser], id: :the_animation1, type: :animation })
 aa = animation({
                  targets: %i[my_box the_circle],
                  begin: {

data/vendor/assets/src/medias/rubies/examples/atome_new.rb

@@ -1,15 +1,27 @@
 # frozen_string_literal: true
 
 Atome.new(
-  shape: { type: :shape, renderers: [:browser], id: :the_shape, parents: [:view], children: [], clones: [],
+  shape: { type: :shape, renderers: [:browser], id: :the_shape, attach: [:view], clones: [],
            left: 99, right: 99, width: 399, height: 99,
-           color: { renderers: [:browser], id: :c315, type: :color, parents: [:the_shape], children: [],
-                    red: 0.3, green: 1, blue: 0.6, alpha: 1 } }
+           # color: { renderers: [:browser], id: :c315, type: :color, attach: [:the_shape],
+           #          red: 0.3, green: 1, blue: 0.6, alpha: 1 }
+  }
 )
 
 Atome.new(
-  shape: { renderers: [:browser], id: :the_shape2, type: :shape, parents: [:view], children: [], clones: [],
+  shape: { type: :color, renderers: [:browser], id: :c315, attach: [:the_shape],
+           red: 0.3, green: 1, blue: 0.6, alpha: 1 }
+
+)
+
+Atome.new(
+  shape: { renderers: [:browser], id: :the_shape2, type: :shape, attach: [:view], clones: [],
            left: 99, right: 99, width: 99, height: 99,
-           color: { renderers: [:browser], id: :c31, type: :color, parents: [:the_shape2], children: [],
-                    red: 1, green: 0.15, blue: 0.15, alpha: 0.6 } }
+
+  }
 )
+
+Atome.new(
+  shape: { renderers: [:browser], id: :c31, type: :color, attach: [:the_shape2],
+           red: 1, green: 0.15, blue: 0.15, alpha: 0.6 }
+)

data/vendor/assets/src/medias/rubies/examples/attach.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+b=box({id: :c315})
+circle({id: :c_12, top: 0,drag: true})
+
+b.attach([:c_12])
+
+circle({ id: :c_123, color: :cyan, left: 233, drag: true })
+box({ id: :b_1, left: 333, drag: true })
+bb=box({top: 99, drag: true})
+grab(:b_1).attach([:c_123])
+circle_123_color= grab(:c_123).color[0]
+grab(circle_123_color).attach([:b_1])
+bb.attach([:b_1])
+grab(:c315).attach([:c_12])

data/vendor/assets/src/medias/rubies/examples/attached.rb

@@ -1,16 +1,15 @@
 # frozen_string_literal: true
+grab(:user_view).color({ red: 1, green: 0.6, blue: 0.6, id: :active_color })
+grab(:user_view).color( { red: 0.3, green:  0.3, blue: 0.3, id: :inactive_color } )
 
-color({ red: 0.8, green: 0.8, blue: 0.8, id: :active_color })
-color( { red: 0.3, green:  0.3, blue: 0.3, id: :inactive_color } )
-
-b=box
+b=box({left: 99})
 wait 1 do
-  b.attached([:inactive_color])
+  b.attached([:active_color])
 
 puts b.attached
 end
 puts b.attached
-c=circle
+c=circle({left: 333})
 c.attached(:inactive_color)
 
 

data/vendor/assets/src/medias/rubies/examples/batch.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+# batch
+b=box({ id: :b1 })
+b.box({ id: :b2, left: 220 })
+b.box({ id: :b3, left: 340 })
+b.batch([:b2, :b3])
+# puts "----- batch ------"
+# puts "=> the batch found is #{a}"
+# p a.batch.value
+b.batch.color(:red).rotate(33)
+b.batch.each do |el|
+  el.height(77).blur(9)
+end
+wait 1 do
+  puts b.batch.top(0)
+end
+

data/vendor/assets/src/medias/rubies/examples/blur.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 
-b = box({ id: :the_box, left: 99, top: 99 })
-b.blur(2)
+b = box({ id: :the_box, left: 199, top: 99 })
+b.blur(7)

data/vendor/assets/src/medias/rubies/examples/box.rb

@@ -8,9 +8,9 @@ a = box({ id: :my_box, left: 333 }) do |p|
 end
 
 b = Atome.new(
-  { shape: { renderers: [:browser], id: :view_test, type: :shape, parents: [:view],children: [],
+  { shape: { renderers: [:browser], id: :view_test, type: :shape, attach: [:view],
              left: 0, width: 90, top: 0, height: 90, overflow: :auto,
-             color: { renderers: [:browser], id: :view_test_color, type: :color, parents: [:view_test],
+             color: { renderers: [:browser], id: :view_test_color, type: :color, attach: [:view_test],
                       red: 1, green: 0.15, blue: 0.15, alpha: 1 } } }
 ) do |p|
   puts "the param pass to the atome is: #{p}"

data/vendor/assets/src/medias/rubies/examples/code.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-a=Atome.new(code: { type: :code, renderers: [:headless], parents: [], children: [] }) do  |params_found|
+a=Atome.new(code: { type: :code, renderers: [:headless], attach: [] }) do  |params_found|
   puts "the param is #{params_found}"
 end
 a.run(:super)

data/vendor/assets/src/medias/rubies/examples/color.rb

@@ -11,47 +11,63 @@ wait 1 do
     { renderers: [:browser], id: :c319, type: :color,
       red: 1, green: 1, blue: 0.15, alpha: 0.6 }
   )
+  puts c
 end
 
 wait 2 do
   # now we overload the color
   c.color({ red: 1 })
+  puts c
+
 end
 
 wait 4 do
   # now the easy way
   c.color(:yellow)
+  puts c
+
   wait 1 do
     c.color({ green: 1, blue: 0.69, alpha: 1 })
+    puts c
+
   end
 end
 
 wait 5 do
   d=c.color(:red)
+  puts c
+
   wait 1 do
     d.blue(0)
+    puts c
+
   end
 
   wait 2 do
     d.red(1)
+    puts c
+
   end
 end
 
 
 wait 10  do
-  Atome.new({ color: { renderers: [:browser], id: :col1, type: :color, parents: [], children: [],
+  d=Atome.new({ color: { renderers: [:browser], id: :col1, type: :color, attach: [],
                        left: 33, top: 66, red: 1, green: 0.15, blue: 0.7, alpha: 1 } })
 
-  col_2 = Atome.new({ color: { renderers: [:browser], id: :col2, type: :color, parents: [], children: [],
+  col_2 = Atome.new({ color: { renderers: [:browser], id: :col2, type: :color, attach: [],
                                left: 33, top: 66, red: 0, green: 0.15, blue: 0.7, alpha: 1 } })
 
-  Atome.new(
-    shape: { type: :shape, renderers: [:browser], id: :shaped, parents: [:view], children: [], attached: [:col1],
+  puts d
+  e=Atome.new(
+    shape: { type: :shape, renderers: [:browser], id: :shaped, attach: [:view],  attached: [:col1],
              left: 199, top: 99,
              width: 66, height: 66
     }
   )
+  puts e
   wait 2 do
     col_2.attach([:shaped])
+    puts e
   end
 end

data/vendor/assets/src/medias/rubies/examples/delete.rb

@@ -9,9 +9,9 @@ wait 4 do
 end
 
 wait 3 do
-  b.children.each do |attached_atome_id|
+  b.shape.each do |attached_atome_id|
     b.delete({id: attached_atome_id})
-    b.shadow({ renderers: [:browser], id: :shadow2, type: :shadow, parents: [], children: [],
+    b.shadow({ renderers: [:browser], id: :shadow2, type: :shadow, attach: [],
                 left: 3, top: 9, blur: 3, direction: '',
                 red: 0, green: 0, blue: 0, alpha: 1
               })
@@ -23,4 +23,20 @@ wait 2 do
   b.delete(:left)
 end
 
+# recursive example
+bb=box
+bb.text('click me!')
+col=color(:red)
+bb.touch(true) do
+  bb.box({attached: col.id})
+  c=bb.circle
+  c.text(:hello)
+
+  wait 2 do
+    bb.physical.each do |attached_atome_id|
+      bb.delete({id: attached_atome_id, recursive: true})
+    end
+  end
+  puts  Universe.atomes.length
+end
 

data/vendor/assets/src/medias/rubies/examples/detached.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
-color({ red: 0.8, green: 0.8, blue: 0.8, id: :active_color })
-color( { red: 0.3, green:  0.3, blue: 0.3, id: :inactive_color } )
+grab(:user_view).color({ red: 0.8, green: 0.8, blue: 0.8, id: :active_color })
+grab(:user_view).color( { red: 0.3, green:  0.3, blue: 0.3, id: :inactive_color } )
 
 b=box
 b.attached(:inactive_color)
@@ -9,5 +9,5 @@ puts b.attached
 b.touch(true) do
   b.detached(:inactive_color)
   b.attached(:active_color)
-  puts b.attached
+  puts "detached objects are : #{b.attached}"
 end