hokusai-zero 0.2.6.pre.pinephone2 → 0.2.6.pre.pinephone4

data/ui/src/hokusai/blocks/keyboard.rb

@@ -0,0 +1,249 @@
+# frozen_string_literal: true
+
+module Hokusai::Blocks
+  class Key < Hokusai::Block
+    template <<~EOF
+    [template]
+      empty {
+        @mousedown="set_down"
+        @mouseup="set_up"
+        cursor="pointer"
+      }
+    EOF
+
+    uses(empty: Hokusai::Blocks::Empty)
+
+    computed! :value
+    computed :size, default: 24, convert: proc(&:to_i)
+    computed :background, default: Hokusai::Color.new(70, 70, 70), convert: Hokusai::Color
+    computed :color, default: Hokusai::Color.new(244, 244, 244), convert: Hokusai::Color
+    computed :background_down, default: Hokusai::Color.new(33,33,33), convert: Hokusai::Color
+    computed :margin, default: Hokusai::Padding.new(3.0, 2.5, 3.0, 2.5), convert: Hokusai::Padding
+
+    inject :keyboard_icons
+
+    attr_accessor :down, :last_commands, :last_canvas, :last_value
+
+    def initialize(**args)
+      @down = false
+      @last_commands = []
+      @last_canvas = nil
+      @last_value = nil
+
+      super
+    end
+
+    def set_down(event)
+      if !down
+        emit("clicked", value[0], event)
+
+        self.down = true
+      else
+        emit("released", value[0], event)
+      end
+    end
+
+    def set_up(event)
+      self.down = false
+      emit("released", value[0], event)
+    end
+
+    def render(canvas)
+      hpad = (canvas.width  - size) / 2
+      vpad = (canvas.height - margin.height - size) / 2
+
+      draw do
+        if last_canvas != canvas && last_value != value
+          self.last_value = value
+          self.last_canvas = canvas
+
+          if icon = keyboard_icons[value[0]]
+            if icon[:width]
+              node.meta.set_prop(:width, icon[:width])
+            end
+
+            rect(canvas.x + margin.left, canvas.y + margin.top, canvas.width - margin.width, canvas.height - margin.height) do |command|
+              command.color = icon[:background]# down ? background_down : background
+              command.round = 0.2
+
+              last_commands << command
+            end
+
+            svg(icon[:file], canvas.x + icon[:size] / 3, canvas.y + icon[:size] / 3, icon[:size], icon[:size]) do |command|
+              command.color = icon[:color]
+
+              last_commands << command
+            end
+          else
+            rect(canvas.x + margin.left, canvas.y + margin.top, canvas.width - margin.width, canvas.height - margin.height) do |command|
+              command.color = down ? background_down : background
+              command.round = 0.2
+
+              last_commands << command
+            end
+
+            text(value[1].to_s, canvas.x + hpad + margin.width, canvas.y + margin.height) do |command|
+              command.color = color
+              command.size = size
+
+              last_commands << command
+            end
+          end
+        else
+          queue.concat(last_commands)
+        end
+      end
+
+      yield canvas
+    end
+  end
+
+  class KeyboardRow < Hokusai::Block
+    style <<~EOF
+    [style]
+    keyboardStyle {
+      background: rgb(28, 28, 28);
+    }
+    keyStyle {
+      background: rgb(46, 46, 46);
+      color: rgb(208, 205, 218);
+      background_down: rgb(37, 37, 37);
+    }
+    EOF
+
+    template <<~EOF
+    [template]
+      hblock { ...keyboardStyle }
+        [for="number in keys"]
+          key {
+            ...keyStyle
+            :key="index"
+            :value="number"
+            @clicked="emit_key"
+            @released="emit_released"
+          }
+    EOF
+
+    uses(
+      hblock: Hblock,
+      vblock: Vblock,
+      key: Key
+    )
+
+    computed! :keys
+
+    inject :keyboard_icons
+
+    def loop_key(value)
+      @keys ||= {}
+      @keys[value] ||= "key-#{value}".freeze
+    end
+    
+    def emit_key(key, event)
+      emit("key", key, event)
+    end
+
+    def emit_released(key, event)
+      emit("released", key, event)
+    end
+  end
+
+  class Keyboard < Hokusai::Block
+    style <<~EOF
+    [style]
+    kstyle {
+      padding: padding(10.0, 5.0, 10.0, 5.0);
+      background: rgb(28, 28, 28);
+    }
+    EOF
+
+    template <<~EOF
+    [template]
+      vblock { ...kstyle }
+        [for="row in key_rows"]
+          row {
+            :icons="icons"
+            @released="handle_released"
+            @key="handle_keypress"
+            :key="index"
+            :keys="row"
+          }
+    EOF
+
+    uses(
+      vblock: Hokusai::Blocks::Vblock,
+      row: KeyboardRow
+    )
+
+    def icons
+      {
+        :shift => { 
+          file: Hokusai.asset("icons/outline/arrow-big-up.svg"),
+          width: 54.0,
+          size: 30,
+          background: Hokusai::Color.new(50, 109, 70),
+          color: Hokusai::Color.new(172, 224, 189)
+        },
+        :backspace => { 
+          file: Hokusai.asset("icons/outline/backspace.svg"), 
+          width: 54.0, 
+          size: 30,
+          background: Hokusai::Color.new(50, 109, 70),
+          color: Hokusai::Color.new(172, 224, 189)
+         }
+      }
+    end
+
+    computed :row_height, default: 48.0, convert: proc(&:to_f)
+
+    provide :keyboard_icons, :icons
+
+    def on_mounted
+      node.meta.set_prop(:height, row_height * 5.0 + 20)
+    end
+
+    def space_row
+      [[:comma, ","], [:space, ''], [:period, "."]]
+    end
+
+    def key_rows
+      [number_keys, querty_keys, asdf_keys, zxcv_keys, space_row]
+    end
+
+    def handle_released(key, event)
+      event.input.keyboard_override = false
+    end
+
+    def handle_keypress(key, event)
+      event.input.keyboard_override = true
+      LibHokusai.hoku_input_keyboard_start(event.input.raw)
+      LibHokusai.hoku_input_keyboard_set_key(event.input.raw, key.to_sym, true)
+      LibHokusai.hoku_input_keyboard_stop(event.input.raw)
+    end
+
+    def zxcv_keys
+      @zxcv_keys ||= begin
+        keys = %w[z x c v b n m]
+        middle = keys.zip(keys)
+        # middle << [:backspace, :backspace]
+        # middle.unshift([:shift, :shift])
+        middle
+      end
+    end
+
+    def asdf_keys
+      keys = %w[a s d f g h j k l]
+      @asdf_keys ||= keys.zip(keys)
+    end
+
+    def querty_keys
+      keys = %w[q w e r t y u i o p]
+      @querty_keys ||= keys.zip(keys)
+    end
+
+    def number_keys
+      keys = [[:one,1],[:two, 2], [:three,3], [:four,4],[:five, 5], [:six,6], [:seven,7], [:eight,8],[:nine,9], [:zero, 0]]
+      @number_keys ||= keys
+    end
+  end
+end

data/ui/src/hokusai/blocks/slider.rb

@@ -0,0 +1,139 @@
+
+module Hokusai::Blocks
+  class Slider < Hokusai::Block
+    template <<~EOF
+    [template]
+      empty {
+        @click="start_slider"
+        @mousemove="move_slider"
+        @mouseup="stop_slider"
+      }
+    EOF
+
+    uses(empty: Hokusai::Blocks::Empty)
+
+    computed :fill, default: [61,171,211], convert: Hokusai::Color
+    computed :initial, default: 0.0, convert: proc(&:to_f)
+    computed :size, default: 50.0, convert: proc(&:to_f)
+    computed :step, default: 20.0, convert: proc(&:to_f)
+    computed :min, default: 0.0, convert: proc(&:to_f)
+    computed :max, default: 100.0, convert: proc(&:to_f)
+
+    attr_reader :slider_width, :slider_start, :steps_x, :steps_val
+    attr_accessor :sliding, :slider_x, :last_index
+
+    def initialize(**args)
+      @sliding = false
+      @slider_width = 0.0
+      @slider_start = 0.0
+      @slider_x = 0.0
+      @last_index = 0
+      @configured = false
+
+      super
+
+      @last_max = nil
+    end
+
+    def start_slider(event)
+      self.sliding = true
+    end
+
+    def on_resize(canvas)
+      # create our buckets for steps
+      @slider_start = canvas.x
+      @slider_width = canvas.width
+
+      @steps_val = [*(min..max).step(step).to_a, max]
+      steps_val.pop if steps_val[-1] == steps_val[-2]
+
+      step_x = (slider_width) / (steps_val.size - 1)
+      @steps_x = (slider_start..(slider_start + slider_width)).step(step_x).to_a
+
+      (steps_val.size - steps_x.size).times do |i|
+        steps_x << steps_x.last + step_x * i
+      end
+
+      steps_x[-1] = slider_start + slider_width  if slider_start + slider_width != steps_x.last
+    end
+
+    def move_slider(event)
+      if sliding && event.left.down
+        pos = event.pos.x
+        index = steps_x.size - 1
+    
+        (0...steps_x.size - 1).each do |i|
+          next if steps_x[i + 1] && pos - steps_x[i + 1] > step
+
+          if pos - steps_x[i] > pos - steps_x[i + 1]
+            index = i
+            break 
+          else
+            index = i + 1
+            break
+          end
+        end
+
+        self.last_index = index
+
+        emit("updated", steps_val[index])
+      else
+        self.sliding = false
+      end
+    end
+
+    def stop_slider(event)
+      if event.left.up
+        self.sliding = false
+      end
+    end
+
+    def render(canvas)
+      if max != @last_max
+        on_resize(canvas)
+
+        @last_max = max
+      end
+
+      unless @setup || steps_val.nil? || initial.nil?
+        steps_val.each_with_index do |val, index|
+          if val == initial
+            self.last_index = index
+
+            break
+          end
+        end
+
+        @setup = true
+      end
+
+      slider_x = steps_x[last_index]
+      padding = Hokusai::Padding.new(0.0, 0.0, 0.0, 0.0)
+      percent = slider_x * 100.00
+      x = slider_x  + padding.left
+      x = (canvas.x + canvas.width) - (size / 2) - 2 if x > (canvas.x + canvas.width) - (size / 2)
+      x = canvas.x  if x < canvas.x
+      cursor = (x + size / 2)
+
+      draw do
+        # draw background
+        rect(canvas.x + padding.left, canvas.y + padding.top, canvas.width - padding.right - padding.left, size) do |command|
+          command.round = size / 2
+          command.color = Hokusai::Color.new(33, 33, 33)
+          command.padding = Hokusai::Padding.new(5.0, 20.0, 5.0, 20.0)
+        end
+
+        rect(canvas.x + padding.left + 1, canvas.y + padding.top + 1, x + (size / 2) - canvas.x - 2, size - 2) do |command|
+          command.round = size / 2
+          command.color = fill
+        end
+
+        circle(cursor + padding.left, canvas.y + (size / 2) + padding.top, size / 2) do |command|
+          command.color = Hokusai::Color.new(233, 233, 233)
+        end
+      end
+      
+      yield canvas
+    end
+  end
+end

data/ui/src/hokusai/commands/rect.rb

@@ -11,8 +11,8 @@ module Hokusai
       @height = height.to_f
       @outline = Outline.default
       @rounding = 0.0
-      @color = Color.new(0, 0, 0, 0)
-      @outline_color = Color.new(0, 0, 0, 255)
+      @color = Color.new(255, 255, 255, 0)
+      @outline_color = Color.new(0, 0, 0, 0)
       @padding = Padding.new(0.0, 0.0, 0.0, 0.0)
       @gradient = nil
     end

data/ui/src/hokusai/events/touch.rb

@@ -2,9 +2,9 @@ module Hokusai
   class TouchEvent < Event
     extend Forwardable
 
-    def_delegators :@touch, :tapped?, :swiped?, :longtapped?, :touching?,
-                   :duration, :direction, :angle, :position, :last_position,
-                  :touch_len, :touch_count, :timer
+    def_delegators :@touch, :tapped?, :swiped?, :longtapped?, :longtapping?, :touching?,
+                   :duration, :direction, :distance, :angle, :position, :last_position,
+                   :touch_len, :touch_count, :timer
 
     attr_reader :input
 
@@ -32,14 +32,8 @@ module Hokusai
     name "taphold"
 
     def capture(block, canvas)
-      if longtapped? && hovered(canvas)
-        block.node.meta.focus
-        
-        if matches(block)
-          captures << block
-        end
-      elsif touching?
-        block.node.meta.blur
+      if matches(block) && longtapped? && hovered(canvas) 
+        captures << block
       end
     end
   end

data/ui/src/hokusai/mounting/loop_entry.rb

@@ -65,7 +65,7 @@ module Hokusai
 
           portal = Node.new(ast)
           node = child_block_class.compile(ast.type, portal)
-          child_block = child_block_class.new(node: node)
+          child_block = child_block_class.new(node: node, providers: mount_providers)
           child_block.node.add_styles(target.class)
           child_block.node.add_props_from_block(target, context: ctx)
           child_block.node.meta.set_prop(ast.loop.var.to_sym, value)

data/ui/src/hokusai/painter.rb

@@ -110,7 +110,6 @@ module Hokusai
         while group = group_children.shift
           z = group.block.node.meta.get_prop(:z)&.to_i || 0
           ztarget = group.block.node.meta.get_prop(:ztarget)
-          entry = PainterEntry.new(group.block, group.x, group.y, group.w, group.h)
 
           if (zindex_counter > 0 || z > 0)
             case ztarget
@@ -118,9 +117,14 @@ module Hokusai
               entry = PainterEntry.new(group.block, zroot_x || 0.0, zroot_y || 0.0, zroot_w, zroot_h).freeze
             when ZTARGET_PARENT
               entry = PainterEntry.new(group.block, group_parent.x || 0.0, group_parent.y || 0.0, group_parent.w, group_parent.h).freeze
+            else
+              entry = PainterEntry.new(group.block, group.x, group.y, group.w, group.h).freeze
             end
+          else
+            entry = PainterEntry.new(group.block, group.x, group.y, group.w, group.h).freeze
           end
 
+
           canvas.reset(entry.x, entry.y, entry.w, entry.h)
 
           before_render&.call([group.block, group.parent], canvas, input.raw)
@@ -277,7 +281,7 @@ module Hokusai
       end
       events[:mousemove].capture(block, canvas)
 
-      if block_is_hovered || block.node.meta.focused
+      if block_is_hovered || block.node.meta.focused || input.keyboard_override
         events[:keyup].capture(block, canvas)
         events[:keypress].capture(block, canvas)
       end