hokusai-zero 0.2.6 → 0.2.7

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

@@ -87,7 +87,7 @@ class Hokusai::Blocks::Input < Hokusai::Block
   end
 
   def dynamic_keypress_handle(event)
-    return unless node.meta.focused
+    return unless node.meta.focused || event.input.keyboard_override
     case event
     when proc(&:ctrl), proc(&:super)
       if event.char == "z"
@@ -154,7 +154,7 @@ class Hokusai::Blocks::Input < Hokusai::Block
           self.buffer_offset = offset
         end
 
-        self.buffer += event.char
+        self.buffer += event.char unless event.char.nil?
       end
     end
 

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/shader_begin.rb

@@ -0,0 +1,22 @@
+class Hokusai::Blocks::ShaderBegin < Hokusai::Block
+  template <<~EOF
+  [template]
+    slot
+  EOF
+
+  computed :fragment_shader, default: nil
+  computed :vertex_shader, default: nil
+  computed :uniforms, default: []
+
+  def render(canvas)
+    draw do
+      shader_begin do |command|
+        command.vertex_shader = vertex_shader
+        command.fragment_shader = fragment_shader
+        command.uniforms = uniforms
+      end
+    end
+
+    yield canvas
+  end
+end

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

@@ -0,0 +1,12 @@
+class Hokusai::Blocks::ShaderEnd < Hokusai::Block
+  template <<~EOF
+  [template]
+    virtual
+  EOF
+
+  def render(canvas)
+    draw do
+      shader_end
+    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/blocks/texture.rb

@@ -0,0 +1,23 @@
+class Hokusai::Blocks::Texture < Hokusai::Block
+  template <<~EOF
+  [template]
+    virtual
+  EOF
+
+  computed :width, default: nil, convert: proc(&:to_i)
+  computed :height, default: nil, convert: proc(&:to_i)
+  computed :x, default: nil
+  computed :y, default: nil
+  computed :rotation, default: nil
+  computed :scale, default: 100.0
+
+
+  def render(canvas)
+    draw do
+      texture(x || canvas.x, y || canvas.y, width || canvas.width, height || canvas.height) do |command|
+        command.rotation = rotation if rotation
+        command.scale = scale
+      end
+    end
+  end
+end

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

@@ -2,7 +2,7 @@ module Hokusai
   class Commands::Rect < Commands::Base
     attr_reader :x, :y, :width, :height,
                 :rounding, :color, :outline,
-                :outline_color, :padding
+                :outline_color, :padding, :gradient
 
     def initialize(x, y, width, height)
       @x = x.to_f
@@ -11,9 +11,10 @@ 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
 
     def hash
@@ -44,6 +45,14 @@ module Hokusai
       height
     end
 
+    def gradient=(colors)
+      unless colors.is_a?(Array) && colors.size == 4 && colors.all? { |color| color.is_a?(Hokusai::Color) }
+        raise Hokusai::Error.new("Gradient must be an array of 4 Hokuai::Color")
+      end
+
+      @gradient = colors
+    end
+
     # Sets padding for the rectangle
     # `value` is an array with padding declarations
     # at [top, right, bottom, left]

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

@@ -0,0 +1,33 @@
+module Hokusai
+  class Commands::ShaderBegin < Commands::Base
+    attr_reader :vertex_shader, :fragment_shader, :uniforms
+
+    def initialize
+      @uniforms = []
+      @vertex_shader =  nil
+      @fragment_shader = nil
+    end
+
+    def vertex_shader=(content)
+      @vertex_shader = content
+    end
+
+    def fragment_shader=(content)
+      @fragment_shader = content
+    end
+
+    def uniforms=(values)
+      @uniforms = values
+    end
+
+    def hash
+      [self.class, vertex_shader, fragment_shader].hash
+    end
+  end
+
+  class Commands::ShaderEnd < Commands::Base;
+    def hash
+      [self.class].hash
+    end
+  end
+end

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

@@ -0,0 +1,26 @@
+module Hokusai
+  class Commands::Texture < Commands::Base
+    attr_reader :x, :y, :width, :height, :rotation, :scale
+
+    def initialize(x, y, width, height)
+      @x = x
+      @y = y
+      @width = width
+      @height = height
+      @rotation = 0.0
+      @scale = 10.0
+    end
+
+    def rotation=(value)
+      @rotation = value
+    end
+
+    def scale=(value)
+      @scale = value
+    end
+
+    def hash
+      [self.class, x, y, width, height].hash
+    end
+  end
+end

data/ui/src/hokusai/commands.rb

@@ -4,6 +4,8 @@ require_relative "./commands/image"
 require_relative "./commands/rect"
 require_relative "./commands/scissor"
 require_relative "./commands/text"
+require_relative "./commands/shader"
+require_relative "./commands/texture"
 
 module Hokusai
   # A proxy class for invoking various UI commands
@@ -81,6 +83,26 @@ module Hokusai
       queue << Commands::ScissorEnd.new
     end
 
+    def shader_begin
+      command = Commands::ShaderBegin.new
+
+      yield command
+
+      queue << command
+    end
+
+    def shader_end
+      queue << Commands::ShaderEnd.new
+    end
+
+    def texture(x, y, w, h)
+      command = Commands::Texture.new(x, y, w, h)
+
+      yield command
+
+      queue << command
+    end
+
     # Draws text
     #
     # @param [String] the text content

data/ui/src/hokusai/event.rb

@@ -65,4 +65,5 @@ module Hokusai
 end
 
 require_relative './events/keyboard'
-require_relative './events/mouse'
+require_relative './events/mouse'
+require_relative './events/touch'

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

@@ -1,10 +1,11 @@
+# frozen_string_literal: true
+
 module Hokusai
   class KeyboardEvent < Event
     extend Forwardable
 
     def_delegators :@keyboard, :shift, :super, :ctrl,
-                   :alt, :pressed, :pressed_len, :released,
-                   :released_len
+                   :alt, :pressed, :released, :char, :code
 
     attr_reader :input
 
@@ -35,48 +36,40 @@ module Hokusai
   class KeyUpEvent < KeyboardEvent
     name "keyup"
 
-    def keyboard_key
-      input.raw[:keyboard][:released]
-    end
-
     def key
-      keyboard_key[:key][:key]
+      released[0]&.[](:symbol)
     end
 
     def code
-      keyboard_key[:char_code]
+      released[0]&.[](:code)
     end
 
     def char
-      code.chr
+      released[0]&.[](:char)
     end
 
     def capture(block, _)
-      captures << block if matches(block) && released_len > 0
+      captures << block if matches(block) && released.size > 0
     end
   end
 
   class KeyPressEvent < KeyboardEvent
     name "keypress"
 
-    def keyboard_key
-      input.raw[:keyboard][:pressed]
-    end
-
     def key
-      keyboard_key[:key][:key]
+      pressed[0]&.[](:symbol)
     end
 
     def code
-      keyboard_key[:char_code]
+      pressed[0]&.[](:code)
     end
 
     def char
-      code.chr
+      pressed[0]&.[](:char)
     end
 
     def capture(block, _)
-      return unless matches(block) && pressed_len > 0
+      return unless matches(block) && pressed.size > 0
 
       captures << block
     end