atome 0.5.4.1.9 → 0.5.5.6.5

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

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+b = box({ color: :red, id: :the_box, left: 3 })
+5.times do |index|
+  width_found = b.width
+  b.duplicate({ left: b.left + index * (width_found + 45), top: 0, category: :custom_category })
+end
+
+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 = []
+selected_items.each do |atome_found|
+  atomes_found << atome_found
+end
+
+# 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(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: { rotate: 22, height: 100, width: 150 } })
+  wait 1 do
+    selected_items.layout({ mode: :grid, width: 1200, height: 500, overflow: :scroll })
+    wait 1 do
+      selected_items.layout({ mode: :default, width: 500, height: 22 })
+      wait 1 do
+        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 })
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+#  frozen_string_literal: true
+
+puts "current user: #{Universe.current_user}"
+human({ id: :jeezs, login: true })
+
+puts "current user: #{Universe.current_user}"
+wait 2 do
+  human({ id: :toto, login: true })
+  puts "current user: #{Universe.current_user}"
+end

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

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+# For now markup can only be specified at creation time, it will be possible later
+the_one = text({ data: :hello, markup: :h1 })

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

@@ -0,0 +1,115 @@
+#  frozen_string_literal: true
+
+# def add_css_to_atomic_style(css)
+#   style_element = JS.global[:document].getElementById('atomic_style')
+#   text_node = JS.global[:document].createTextNode(css)
+#   style_element.appendChild(text_node)
+# end
+#
+# def convert_to_css(data)
+#   conditions = data[:condition]
+#   apply = data[:alterations]
+#
+#   # Convert the conditions
+#   condition_strings = []
+#
+#   if conditions[:max]
+#     condition_strings << "(max-width: #{conditions[:max][:width]}px)" if conditions[:max][:width]
+#     condition_strings << "(max-height: #{conditions[:max][:height]}px)" if conditions[:max][:height]
+#   end
+#
+#   if conditions[:min]
+#     condition_strings << "(min-width: #{conditions[:min][:width]}px)" if conditions[:min][:width]
+#     condition_strings << "(min-height: #{conditions[:min][:height]}px)" if conditions[:min][:height]
+#   end
+#
+#   operator = conditions[:operator] == :and ? "and" : "or"
+#
+#   # Convert properties to apply
+#   property_strings = []
+#   apply.each do |key, values|
+#     inner_properties = []
+#     values.each do |property, value|
+#       if property == :color
+#         inner_properties << "background-color: #{value} !important;"
+#       else
+#         inner_properties << "#{property}: #{value}px !important;" if value.is_a?(Integer)
+#         inner_properties << "#{property}: #{value} !important;" if value.is_a?(Symbol)
+#       end
+#     end
+#     # Prefix each key with "#"
+#     property_strings << "##{key} {\n#{inner_properties.join("\n")}\n}"
+#   end
+#
+#   # let it build
+#   css = "@media #{condition_strings.join(" #{operator} ")} {\n#{property_strings.join("\n")}\n}"
+#   add_css_to_atomic_style(css)
+#   css
+# end
+#
+# def css_to_data(css)
+#   data = {
+#     :condition => {},
+#     :apply => {}
+#   }
+#   # Extract conditions
+#   media_conditions = css.match(/@media ([^\{]+)/)[1].split(',').map(&:strip)
+#   media_conditions.each do |condition|
+#     type = condition.match(/(max|min)-/)[1].to_sym
+#     property = condition.match(/(width|height)/)[1].to_sym
+#     value = condition.match(/(\d+)/)[1].to_i
+#
+#     data[:condition][type] ||= {}
+#     data[:condition][type][property] = value
+#   end
+#
+#   # Extract properties to be applied
+#   css.scan(/(\w+) \{([^\}]+)\}/).each do |match|
+#     key = match[0].to_sym
+#     properties = match[1].split(';').map(&:strip).reject(&:empty?)
+#
+#     data[:apply][key] ||= {}
+#     properties.each do |property|
+#       prop, value = property.split(':').map(&:strip)
+#       if prop == "background-color"
+#         data[:apply][key][:color] = value.to_sym
+#       elsif value[-2..] == "px"
+#         data[:apply][key][prop.to_sym] = value.to_i
+#       else
+#         data[:apply][key][prop.to_sym] = value.to_sym
+#       end
+#     end
+#   end
+#
+#   data
+# end
+
+
+
+box({ color: :red, width: :auto, left: 120, right: 120, id: :box_1 })
+circle({ left: 33, top: 200, id: :circle_1 })
+circle({ left: 200, top: 200, id: :circle_2 })
+circle({ left: 400, top: 200, id: :circle_3 })
+circle({ left: 600, top: 200, id: :circle_4 })
+text({ data: "resize the window to it's minimum to activate response", id: :my_text })
+
+A.match({condition:{max: {width: 777}, min: {height: 333}, operator: :and }})  do
+{
+  circle_1: { color: :red , width: 23},
+  circle_2: { color: :orange , width: 23, top: 12},
+  box_1: { width: 123, left: 222, color: :blue, rotate: 22}
+}
+end
+
+# match can work without any condition then the particles are always applied
+
+# A.match({}) do
+#   {
+#     circle_1: { color: :red, width: 23 },
+#     circle_2: { color: :orange, width: 23, top: 12 },
+#     box_1: { width: 123, left: 222, color: :blue, rotate: 22 }
+#   }
+# end
+
+
+

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+#
+b = box({ color: :red })
+
+b.touch(true) do
+  b.connection('localhost:9292') do |params|
+    alert " the connection is : #{params}"
+  end
+end
+
+c = box({ color: :yellow, left: 333 })
+
+c.touch(true) do
+  b.message('hi there!!')
+  # c = box({ color: :red, left: 333 })
+end

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

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+puts 'deprecated use clone monitoring'
+# b = box({ id: :the_box })
+# c = circle({ top: 3, id: :the_cirle })
+# A.monitor({ atomes: [:the_box, :the_cirle], particles: [:left] }) do |atome, particle, value|
+#   puts "changes : #{atome.id}, #{particle}, #{value}"
+# end
+#
+# wait 2 do
+#   b.left(3)
+#   wait 2 do
+#     c.left(444)
+#   end
+# end

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

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+# please note that whatever the atome resize will return the size of the view!
+view = grab(:view)
+view.on(:resize) do |event|
+  puts "view size is #{event}"
+end

data/vendor/assets/{src/medias/rubies/examples/get_renderer_list.rb → application/examples/online.rb}

@@ -1,3 +1,3 @@
 # frozen_string_literal: true
 
-puts Universe.renderer_list
+text online?

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

@@ -0,0 +1,29 @@
+#  frozen_string_literal: true
+
+b = box({ left: 666, color: :blue, smooth: 6, id: :the_box2 })
+b.over(true) do
+  b.color(:black)
+  # puts "I'm inside"
+end
+b.over(:enter) do
+  puts "in"
+  puts "enter"
+  b.width= b.width+30
+  # alert :in
+  b.color(:yellow)
+end
+b.over(:leave) do
+  b.height= b.height+10
+  puts "out"
+  puts "leave"
+  # alert :out
+  b.color(:orange)
+end
+
+#
+t=b.text('touch me to stop over leave')
+b.touch(true) do
+  b.over({ remove: :enter })
+  t.data('finished')
+end
+

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+c=circle({drag: true, id: :the_circle})
+
+c1=c.color(:white).id
+c2=c.color(:red).id
+c3=c.color(:yellow).id
+color({id: :toto, red: 1 , alpha: 0.5})
+wait 0.5 do
+  c.paint({ gradient: [c1,c2], direction: :left })
+  wait 0.5 do
+    c.paint({ gradient: [c1,c2, c3], direction: :left })
+    wait 0.5 do
+      c.paint({ gradient: [c1,c2], diffusion: :radial })
+      wait 0.5 do
+        c.paint({ gradient: [c1,c2, c3], diffusion: :conic })
+        wait 0.5 do
+          c.remove({all: :paint})
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+b = box({ left: 777 })
+puts "b ahas the following paticles : #{b.particles}"

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

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+bb=box({width: '90%'})
+puts bb.to_px(:width)

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

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+if Universe.internet
+  # v = video({ path: "medias/videos/avengers.mp4", id: :my_video })
+  v = video({ path: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" })
+else
+  v = video(:video_missing)
+end
+v.left(200)
+v.touch(true) do
+  alert v.play
+end
+
+t=text({id: :my_text, data: "play video"})
+
+t.touch(true) do
+  v.data=0
+  v.play(26) do |event|
+    t.data("event is : #{event}")
+    if event[:frame] ==  900 && v.data <3
+      puts v.data
+      v.data(v.data+1)
+      v.play(26)
+    end
+  end
+end
+
+c=circle({left: 123})
+
+c.touch(true) do
+  v.play(:pause)
+end
+
+cc=circle({left: 0, width: 55, height: 55})
+
+left=0
+cc.drag(:locked) do |event|
+  dx = event[:dx]
+  left += dx.to_f
+  min_left = 0
+  max_left = 600
+  left = [min_left, left].max
+  left = [left, max_left].min
+  v.html.currentTime(left/10)
+  cc.left(left)
+end
+
+
+puts "add lock x and y when drag"
+puts "restrict ro :view doesnt work"

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+
+# here how ti use preset in the atome framework
+# presets available are : render_engines,image,video,animation,element,box,vector,circle,shape,text,drm,shadow,color,www,raw,code,audio,group,human,machine,paint
+
+my_box=box
+# using the code line above a lot of particles will be implicitly created, if we inspect my_box
+puts my_box.inspect # this will print :
+#[Log] #<Atome: @broadcast={}, @callback={}, @tag={}, @attached=[], @unit={}, @collected={}, @id=:box_14, @type=:shape, @html=#<HTML:0x0662a164 @element=[object HTMLDivElement], @id="box_14", @original_atome=#<Atome: @broadcast={}, @callback={}, @tag={}, @attached=[], @unit={}, @collected={}, @id=:box_14, @type=:shape, @html=#<HTML:0x0662a164 ...>, @attach=[:view], @renderers=[:html], @width=99, @height=99, @apply=[:box_color], @left=100, @top=100, @clones=[], @preset={:box=>{:width=>99, :height=>99, :apply=>[:box_color], :left=>100, :top=>100, :clones=>[]}}>, @element_type="div">, @attach=[:view], @renderers=[:html], @width=99, @height=99, @apply=[:box_color], @left=100, @top=100, @clones=[], @preset={:box=>{:width=>99, :height=>99, :apply=>[:box_color], :left=>100, :top=>100, :clones=>[]}}> (browser.script.iife.min.js, line 13)
+
+# please note that an ID is automatically created using a simple strategy  id : atome_type_total_number_of_users_atomes  ex here :  @id="box_14"
+
+my_box.text("touch me")
+puts " my_box preset is : #{my_box.preset}"
+# print in the console : [Log]  my_box preset is : {:box=>{:width=>99, :height=>99, :apply=>[:box_color], :left=>100, :top=>100, :clones=>[]}} (browser.script.iife.min.js, line 13)
+
+
+c=circle
+puts  " c is : #{c.inspect }"
+# this print : [Log]  c is : #<Atome: @type=:shape, @smooth="100%", @width=99, @id=:circle_16, @renderers=[:html], @height=99, @broadcast={}, @callback={}, @tag={}, @attached=[], @unit={}, @collected={}, @html=#<HTML:0x06579be8 @element=[object HTMLDivElement], @id="circle_16", @original_atome=#<Atome: @type=:shape, @smooth="100%", @width=99, @id=:circle_16, @renderers=[:html], @height=99, @broadcast={}, @callback={}, @tag={}, @attached=[], @unit={}, @collected={}, @html=#<HTML:0x06579be8 ...>, @top=100, @attach=[:view], @left=100, @apply=[:circle_color], @clones=[], @preset={:circle=>{:width=>99, :height=>99, :smooth=>"100%", :apply=>[:circle_color], :left=>100, :top=>100, :clones=>[]}}>, @element_type="div">, @top=100, @attach=[:view], @left=100, @apply=[:circle_color], @clones=[], @preset={:circle=>{:width=>99, :height=>99, :smooth=>"100%", :apply=>[:circle_color], :left=>100, :top=>100, :clones=>[]}}> (browser.script.iife.min.js, line 13)
+# it's pôssible to alter basic preset using the particle .preset
+my_box.preset({ circle:  {type: :shape, :width=>99, :height=>99, :smooth=>"100%", color: :red, :left=>100, :top=>100, :clones=>[]}})
+puts " my_box preset is now : #{my_box.preset}"
+# now the preset circle is : [Log]  my_box preset is now : {:circle=>{:type=>:shape, :width=>99, :height=>99, :smooth=>"100%", :color=>:red, :left=>100, :top=>100, :clones=>[]}} (browser.script.iife.min.js, line 13)
+
+my_box.touch(true) do
+  my_box.preset(:circle) # the box now rounded like a circle
+
+  new_circle=circle # as the preset circle has been modified tha circle is now red as specified in the updated preset
+  puts  "new_circle is : #{new_circle.inspect}"
+  # this print : new_circle is : #<Atome: @type=:shape, @smooth="100%", @width=99, @id=:circle_18, @renderers=[:html], @height=99, @broadcast={}, @callback={}, @tag={}, @attached=[], @unit={}, @collected={}, @html=#<HTML:0x0664e99c @element=[object HTMLDivElement], @id="circle_18", @original_atome=#<Atome: @type=:shape, @smooth="100%", @width=99, @id=:circle_18, @renderers=[:html], @height=99, @broadcast={}, @callback={}, @tag={}, @attached=[], @unit={}, @collected={}, @html=#<HTML:0x0664e99c ...>, @top=100, @attach=[:box_14], @left=100, @apply=[:circle_18_color_1_0_0_0_0_0____], @clones=[]>, @element_type="div">, @top=100, @attach=[:box_14], @left=100, @apply=[:circle_18_color_1_0_0_0_0_0____], @clones=[]>
+end

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+b = box
+
+16.times do |index|
+  width_found = b.width
+  b.duplicate({ left: b.left + index * (width_found + 45), top: 0, category: :matrix })
+end
+
+
+Universe.user_atomes.each do |atome_id|
+  atome_found = grab(atome_id)
+  if atome_found.type == :shape
+    atome_found.color(:orange)
+    atome_found.smooth(200)
+    atome_found.top(200)
+  end
+end
+
+random_found =Universe.user_atomes.sample(7)
+random_found.each do |atome_id|
+  atome_found = grab(atome_id)
+  if atome_found.type == :shape
+    atome_found.top(rand(600))
+    atome_found.width(rand(120))
+    atome_found.height(rand(120))
+    atome_found.smooth(rand(120))
+    atome_found.color(:red)
+  end
+end
+
+random_found =Universe.user_atomes.sample(9)
+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.smooth(rand(120))
+    atome_found.color(:blue)
+  end
+end

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

@@ -0,0 +1,48 @@
+#  frozen_string_literal: true
+
+raw_data = <<STR
+<iframe width="560" height="315" src="https://www.youtube.com/embed/8BT4Q3UtO6Q?si=WI8RlryV8HW9Y0nz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+STR
+
+
+raw_data = <<STR
+<svg width="600" height="350" xmlns="http://www.w3.org/2000/svg">
+<!-- Style for the boxes -->
+                         <style>
+.box { fill: white; stroke: black; stroke-width: 2; }
+   .original { fill: lightblue; }
+   .clone { fill: lightgreen; }
+   .arrow { stroke: black; stroke-width: 2; marker-end: url(#arrowhead); }
+                                                          .text { font-family: Arial, sans-serif; font-size: 14px; }
+   </style>
+
+  <!-- Arrowhead definition -->
+  <defs>
+    <marker id="arrowhead" markerWidth="10" markerHeight="7" 
+    refX="0" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="black"/>
+     </marker>
+  </defs>
+
+   <!-- Boxes for original and clones -->
+                                      <rect x="250" y="30" width="100" height="50" class="box original"/>
+   <rect x="100" y="200" width="100" height="50" class="box clone"/>
+   <rect x="250" y="200" width="100" height="50" class="box clone"/>
+   <rect x="400" y="200" width="100" height="50" class="box clone"/>
+
+   <!-- Text for boxes -->
+                       <text x="275" y="55" class="text" text-anchor="middle">Original</text>
+  <text x="150" y="225" class="text" text-anchor="middle">Clone 1</text>
+   <text x="300" y="225" class="text" text-anchor="middle">Clone 2</text>
+  <text x="450" y="225" class="text" text-anchor="middle">Clone 3</text>
+
+   <!-- Arrows -->
+   <line x1="300" y1="80" x2="150" y2="200" class="arrow"/>
+   <line x1="300" y1="80" x2="300" y2="200" class="arrow"/>
+   <line x1="300" y1="80" x2="450" y2="200" class="arrow"/>
+   </svg>
+STR
+
+
+
+raw({ id: :the_raw_stuff, data: raw_data })

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+A.read('Cargo.toml') do |data|
+  text "file content  :\n #{data}"
+end
+
+# if Atome.host == 'tauri'
+#   JS.eval("readFile('atome','Cargo.toml')")
+# else
+#   puts 'nothing here'
+# end

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

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+b = box({ top: 166, data: :hello })
+c=color({ id: :col1, red: 1, blue: 1})
+
+b.instance_variable_set("@top", 30)
+b.instance_variable_set("@apply", [c.id])
+b.instance_variable_set("@path", './medias/images/red_planet.png' )
+
+b.instance_variable_set("@smooth", 30)
+wait 1 do
+  b.refresh
+  b.instance_variable_set("@left", 300)
+  wait 1 do
+    b.refresh
+    b.instance_variable_set("@type", :text)
+    wait 1 do
+      b.refresh
+      b.instance_variable_set("@type", :image)
+      wait 1 do
+        b.refresh
+      end
+    end
+  end
+end
+# i=image(:green_planet)
+# alert i.path
+# i.instance_variable_set("@path", './medias/images/red_planet.png')
+# wait 2 do
+#   i.refresh
+#   # i.path'./medias/images/red_planet.png'
+# end
+
+
+#
+# b.instance_variable_set("@left", 300)
+# b.instance_variable_set("@top", 400)
+# # b.instance_variable_set("@width", 150)
+#
+# # b.instance_variable_set("@smooth", 9)
+# # new({particle: :tototo})
+#
+# wait 1 do
+#   b.refresh
+#   # b.instance_variable_set("@type", :text)
+#   b.instance_variable_set("@smooth", 9)
+#   b.instance_variable_set("@apply", [c.id])
+#   wait 1 do
+#     b.refresh
+#     # b.instance_variable_set("@type", :image)
+#     # wait 1 do
+#     #   alert b.type
+#     #   # b.refresh
+#     # end
+#   end
+# end
+#
+# t=text(:test)
+# t.touch(true) do
+#   b.smooth(9)
+#   b.refresh
+# end

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

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+b = box({ top: 166 , id: :the_box, left: 333})
+b.color({id: :new_col, red: 1})
+b.color({id: :other_col,  green: 1})
+# b.paint({gradient: [:other_col, :new_col]})
+color({id: :last_col,  green: 0.3, blue: 0.5})
+color({id: :last_col2,  red: 1, blue: 0.5})
+
+b.shadow({
+           id: :s1,
+           # affect: [:the_circle],
+           left: 9, top: 3, blur: 9,
+           invert: false,
+           red: 0, green: 0, blue: 0, alpha: 1
+         })
+wait 1 do
+  b.remove(:other_col)
+  wait 1 do
+    b.remove(:new_col)
+    wait 1 do
+      b.remove(:box_color)
+      wait 1 do
+        b.apply(:last_col)
+        wait 1 do
+          b.apply(:last_col2)
+        end
+      end
+    end
+  end
+end
+b.touch(true) do
+  puts "before => #{b.apply}"
+  b.remove({all: :color})
+  puts "after => #{b.apply}"
+  wait 1 do
+    b.paint({id: :the_gradient_1,gradient: [:box_color, :circle_color]})
+    b.paint({id: :the_gradient,gradient: [:other_col, :new_col]})
+    wait 1 do
+      b.remove(:the_gradient)
+      wait 1 do
+        b.remove(all: :shadow)
+      end
+    end
+  end
+end
+

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

@@ -0,0 +1,26 @@
+#  frozen_string_literal: true
+
+
+c=circle({width: 66, height: 66})
+t1=c.text({id: :first, data: 0, left: 28})
+cc=circle({width: 66, height: 66, left: 0 })
+t2=cc.text({id: :second, data: 0, left: 28})
+first_repeater=repeat(1, repeat = 99) do |counter|
+  t1.data(counter)
+end
+
+my_repeater=repeat(3, repeat = 9) do |counter|
+  t2.data(counter)
+end
+
+c.touch(true) do
+  stop({ repeat: first_repeater })
+  t1.data(:stopped)
+end
+
+cc.touch(true) do
+  stop({ repeat: my_repeater })
+  t2.data(:stopped)
+end
+
+# use Float::INFINITY to infinite repeat

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+m = shape({ id: :the_shape, width: 333, left: 130, top: 30, right: 100, height: 399, smooth: 8, color: :yellowgreen, })
+m.drag(true)
+m.on(:resize) do |event|
+  puts event[:dx]
+end
+
+m.resize({ size: { min: { width: 90, height: 190 }, max: { width: 300, height: 600 } } }) do |event|
+  puts "width is  is #{event[:rect][:width]}"
+end
+
+t=text({data: ' click me to unbind resize'})
+t.touch(true) do
+  t.data('resize unbinded')
+  m.resize(:remove)
+end

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+b = box({ id: :the_container, width: 300, height: 300 })
+b.box({top: 500, color: :red})
+cc=b.circle({ top: 160, id: :the_circle })
+
+initial_height=cc.height
+b.overflow(:scroll) do |event|
+  new_height = initial_height + event[:top]
+  cc.height(new_height)
+end