hokusai-zero 0.1.3 → 0.1.5

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

@@ -0,0 +1,205 @@
+class Hokusai::Blocks::DropDownItem < Hokusai::Block
+  style <<~EOF
+  [style]
+  cursorStyle {
+    cursor: "pointer";
+  }
+  EOF
+  
+  template <<~EOF
+  [template]
+    text {
+      @hover="hover_handler"
+      @mouseout="mouseout_handler"
+      ...cursorStyle
+      :content="option"
+      :color="color"
+      :size="size"
+      @click="emit_option" 
+      @height_updated="update_height"
+    }
+  EOF
+
+  uses(text: Hokusai::Blocks::Text)
+
+  computed! :index
+  computed! :option
+  computed! :size
+  computed! :color
+
+  attr_accessor :hovered
+
+  def hover_handler(event)
+    self.hovered = true
+  end
+
+  def mouseout_handler(event)
+    self.hovered = false
+  end
+
+  def update_height(height)
+    node.meta.set_prop(:height, height)
+
+    emit("height", index, height)
+  end
+
+  def emit_option(event)
+    emit("option", index)
+  end
+
+  def render(canvas)
+    if hovered
+      draw do
+        rect(canvas.x, canvas.y, canvas.width, canvas.height) do |command|
+          command.color = Hokusai::Color.new(255, 255, 255, 20)
+        end
+      end
+    end
+
+    yield canvas
+  end
+end
+
+class Hokusai::Blocks::Dropdown < Hokusai::Block
+  style <<~EOF
+  [style]
+  panelStyle {
+    z: 1;
+  }
+  rootStyle {
+    height: 70.0;
+    color: rgb(122, 118, 135);
+  }
+
+  cursorStyle {
+    cursor: "pointer";
+  }
+  EOF
+
+  template <<~EOF
+  [template]
+    vblock {
+      @hover="dropdown_hover"
+      @mouseout="dropdown_mouseout"
+      @click="dropdown_toggle"
+      :background="background"
+      :height="size_with_padding"
+      :outline="outline"
+      :outline_color="outline_color"
+    }
+      hblock
+        label {
+          ...cursorStyle
+          :content="dropdown_option_selected" 
+          :size="size"
+          :color="text_color"
+        }
+        image {
+          padding="5.0,10.0,5.0,5.0"
+          :source="dropdown_icon"
+          :height="size"
+          :width="size"
+        }
+      [if="dropdown_is_toggled"]
+        panel#first { 
+          ...panelStyle
+          :height="panel_height"
+          :background="background"
+        }
+          [for="option in options"]
+            dropdown_item {
+              :color="text_color"
+              :size="size"
+              :height="option_height(index)"
+              :option="option_content(option)"
+              :key="dropdown_key(option, index)" 
+              :index="index" 
+              @option="option_emit_selected" 
+              @height="option_update_height" 
+            }
+  EOF
+
+  uses(
+    vblock: Hokusai::Blocks::Vblock,
+    hblock: Hokusai::Blocks::Hblock,
+    label: Hokusai::Blocks::Text,
+    panel: Hokusai::Blocks::Panel,
+    image: Hokusai::Blocks::Image,
+    dropdown_item: Hokusai::Blocks::DropDownItem
+  )
+
+  computed! :options
+  computed :option_callback, default: ->(option) { option }
+  computed :size, default: 25, convert: proc(&:to_i)
+  computed :padding, default: Hokusai::Padding.new(5.0, 5.0, 5.0, 5.0), convert: Hokusai::Padding
+  computed :background, default: Hokusai::Color.new(67, 64, 92), convert: Hokusai::Color
+  computed :outline, default: Hokusai::Outline.new(0.0, 0.0, 1.0, 0.0), convert: Hokusai::Outline
+  computed :outline_color, default: Hokusai::Color.new(122, 118, 135), convert: Hokusai::Color
+  computed :text_color, default: Hokusai::Color.new(255, 255, 255), convert: Hokusai::Color
+  computed :panel_width, default: 200.0, convert: proc(&:to_f)
+  computed :panel_height, default: 300.0, convert: proc(&:to_f)
+  computed :icon, default: "#{ASSETS_FOLDER}/arrow-drop-down-line.png"
+
+  attr_accessor :selected, :dropdown_is_toggled, :hovered
+  attr_reader :heights
+
+  def dropdown_icon
+    icon
+  end
+
+  def dropdown_hover(event)
+    self.hovered = true
+  end
+
+  def dropdown_mouseout(event)
+    self.hovered = false
+  end
+
+  def size_with_padding
+    size + padding.top + padding.bottom
+  end
+
+  def dropdown_key(option, index)
+    "option-#{option_callback.call(option)}-#{index}"
+  end
+
+  def dropdown_toggle(event)
+    self.dropdown_is_toggled = !dropdown_is_toggled
+  end
+
+  def dropdown_option_selected
+    option_callback.call(selected)
+  end
+
+  def option_height(index)
+    heights[index]
+  end
+
+  def option_update_height(index, height)
+    heights[index] = height
+  end
+
+  def option_content(option)
+    option_callback.call(option)
+  end
+
+  def after_updated
+    node.meta.set_prop(:height, size * 2)
+  end
+
+  def option_emit_selected(index)
+    emit("selected", options[index])
+
+    self.selected = options[index]
+    self.dropdown_is_toggled = false
+  end
+
+  def initialize(**args)
+    super
+
+    @hovered = false
+    @heights = {}
+    @dropdown_is_toggled = false
+    @selected = options.first
+  end
+end

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

@@ -15,12 +15,12 @@ class Hokusai::Blocks::Hblock < Hokusai::Block
     canvas.vertical = false
     canvas.reverse = reverse
 
-    if background.nil?
+    if background.nil? && outline.nil?
       yield canvas
     else
       draw do
         rect(canvas.x, canvas.y, canvas.width, canvas.height) do |command|
-          command.color = background
+          command.color = background if background
           command.outline = outline if outline
           command.outline_color = outline_color if outline_color
           command.round = rounding.to_f if rounding

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

@@ -1,3 +1,5 @@
+require "pathname"
+
 class Hokusai::Blocks::Image < Hokusai::Block
   template <<~EOF
     [template]
@@ -7,10 +9,13 @@ class Hokusai::Blocks::Image < Hokusai::Block
   computed! :source
   computed :width, default: nil
   computed :height, default: nil
+  computed :padding, default: Hokusai::Padding.new(0.0, 0.0, 0.0, 0.0), convert: Hokusai::Padding
 
   def render(canvas)
+    src = Pathname.new(source).absolute? ? source : "#{File.dirname(caller[-1].split(":")[0])}/#{source}"
+
     draw do
-      image(source, canvas.x, canvas.y, width&.to_f || canvas.width, height&.to_f || canvas.height)
+      image(src, canvas.x + padding.left, canvas.y + padding.top, (width&.to_f || canvas.width) - padding.right, (height&.to_f || canvas.height) - padding.bottom)
     end
 
     yield canvas

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

@@ -45,6 +45,19 @@ class Hokusai::Blocks::Input < Hokusai::Block
     @start_time = Process.clock_gettime(Process::CLOCK_MONOTONIC)
     @buffer_offset = 0
     @offset = 0
+    @changed = false
+  end
+
+  def after_updated
+    if @changed && !growable
+      @table = ::Hokusai::Util::PieceTable.new(initial)
+      @buffer = ""
+      @buffer_count = 0
+      @start_time = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+      @buffer_offset = 0
+      @offset = 0
+      @changed = false
+    end
   end
 
   def update_height(value)
@@ -74,6 +87,7 @@ class Hokusai::Blocks::Input < Hokusai::Block
   end
 
   def dynamic_keypress_handle(event)
+    return unless node.meta.focused
     case event
     when proc(&:ctrl), proc(&:super)
       if event.char == "z"
@@ -116,6 +130,7 @@ class Hokusai::Blocks::Input < Hokusai::Block
           flush
           
           emit("change", table.to_s)
+          @changed = true
 
           self.table = ::Hokusai::Util::PieceTable.new("")
           self.buffer_offset = 0
@@ -142,6 +157,8 @@ class Hokusai::Blocks::Input < Hokusai::Block
         self.buffer += event.char
       end
     end
+
+    emit("modified")
   end
     
   def flush

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

@@ -6,6 +6,7 @@ class Hokusai::Blocks::Label < Hokusai::Block
   EOF
 
   computed! :content
+  computed :font, default: nil
   computed :size, default: 12
   computed :color, default: [33,33,33], convert: Hokusai::Color
   computed :padding, default: [5.0, 5.0, 5.0, 5.0], convert: Hokusai::Padding
@@ -21,8 +22,9 @@ class Hokusai::Blocks::Label < Hokusai::Block
 
   def render(canvas)
     if @last_content != content
-      width, _ = Hokusai.fonts.active.measure(content.to_s, size.to_i)
-
+      width, height = Hokusai.fonts.active.measure(content.to_s, size.to_i)
+      node.meta.set_prop(:width, width + padding.right + padding.left)
+      node.meta.set_prop(:height, height + padding.top + padding.bottom)
       emit("width_updated", width + padding.right + padding.left)
 
       @last_content = content
@@ -33,6 +35,7 @@ class Hokusai::Blocks::Label < Hokusai::Block
         command.color = color
         command.size = size
         command.padding = padding
+        command.font = font unless font.nil?
       end
     end
   end

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

@@ -0,0 +1,62 @@
+class Hokusai::Blocks::Modal < Hokusai::Block
+  style <<~EOF
+  [style]
+  closeButtonStyle {
+    width: 40;
+    height: 40;
+    cursor: "pointer";
+    padding: padding(10.0, 10.0, 10.0, 0.0)
+  }
+  EOF
+
+  template <<~EOF
+  [template]
+    hblock
+      empty
+      empty
+      image {
+        :source="close_icon"
+        ...closeButtonStyle
+        @click="emit_close"
+
+      }
+    hblock
+      empty
+      slot
+      empty
+    hblock
+      empty
+  EOF
+
+  uses(
+    vblock: Hokusai::Blocks::Vblock,
+    hblock: Hokusai::Blocks::Hblock,
+    empty: Hokusai::Blocks::Empty,
+    image: Hokusai::Blocks::Image
+  )
+
+  computed :active, default: false
+  computed :background, default: [0, 0, 0, 200], convert: Hokusai::Color
+  computed :close_icon, default: "#{ASSETS_FOLDER}/close-large-line.png"
+
+  def emit_close(event)
+    emit("close")
+  end
+
+  def on_mounted
+    node.meta.set_prop(:z, 1)
+    node.meta.set_prop(:ztarget, "root")
+  end
+
+  def render(canvas)
+    return unless active
+
+    draw do
+      rect(canvas.x, canvas.y, canvas.width, canvas.height) do |command|
+        command.color = background
+      end
+    end
+
+    yield canvas
+  end
+end

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

@@ -62,8 +62,8 @@ class Hokusai::Blocks::Panel < Hokusai::Block
     if y = top
       if new_scroll_y < y
         self.scroll_goto_y = y
-      elsif new_scroll_y > panel_height
-        self.scroll_goto_y = panel_height
+      elsif new_scroll_y - top >= panel_height
+        self.scroll_goto_y = panel_height if scroll_percent != 1.0
       else
         self.scroll_goto_y = new_scroll_y
       end

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

@@ -50,8 +50,6 @@ class Hokusai::Blocks::Scrollbar < Hokusai::Block
     else
       self.scrolling = false
     end
-
-    # event.stop
   end
 
   def scroll_top_height

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

@@ -15,13 +15,15 @@ class Hokusai::Blocks::Text < Hokusai::Block
   uses(empty: Hokusai::Blocks::Empty)
 
   computed! :content
+  computed :cursor, default: nil
+  computed :font, default: nil
   computed :size, default: 16, convert: proc(&:to_i)
   computed :line_height, default: 5, convert: proc(&:to_f)
   computed :color, default: [33,33,33], convert: Hokusai::Color
   computed :selection_color, default: [233,233,233], convert: Hokusai::Color
   computed :padding, default: [5.0, 5.0, 5.0, 5.0], convert: Hokusai::Padding
   computed :cursor_offset, default: nil
-  computed :markdown, default: false
+  computed :markdown, default: false, convert: ->(val) { val == "true" || val == true }
 
   inject :selection
   inject :panel_top
@@ -65,7 +67,6 @@ class Hokusai::Blocks::Text < Hokusai::Block
 
     draw_with do |commands|
       iterator.on_draw do |text, x, y, group|
-
         if selector = selection
           if cursor_offset&.zero? && !selector.started
             selector.cursor = [x, y + offset_y, 0.0, size.to_f]
@@ -86,6 +87,7 @@ class Hokusai::Blocks::Text < Hokusai::Block
         commands.text(text, x, y) do |command|
           command.color = color
           command.size = size
+          command.font = font unless font.nil?
 
           if group.respond_to?(:bold?)
             
@@ -169,7 +171,7 @@ class Hokusai::Blocks::Text < Hokusai::Block
       end
     end
 
-    if link_hovered
+    if link_hovered || cursor == "pointer"
       Hokusai.set_mouse_cursor(:pointer)
     elsif hovered
       Hokusai.set_mouse_cursor(:ibeam)
@@ -186,7 +188,8 @@ class Hokusai::Blocks::Text < Hokusai::Block
 
   def clamp(text, width)
     if markdown
-      Hokusai.fonts.active.clamp_markdown(text, size.to_i, width - size.to_f - padding.right)
+      clamping = Hokusai.fonts.active.clamp_markdown(text, size.to_i, width - size.to_f - padding.right)
+      clamping
     else
       Hokusai.fonts.active.clamp(text, size.to_i, width - size.to_f, padding.right)
     end
@@ -203,10 +206,13 @@ class Hokusai::Blocks::Text < Hokusai::Block
 
       height = internal_render(last_clamping, canvas)
       self.last_content = last_content
-      emit("height_updated", height + padding.bottom) unless last_height == height + padding.bottom
+      
+      new_height = height + padding.bottom + padding.top
+      new_height -= size if markdown
 
-      self.last_height = height + padding.bottom + padding.top
+      emit("height_updated", new_height) unless last_height == new_height
 
+      self.last_height = new_height
 
       yield canvas
     end

data/ui/src/hokusai/blocks/titlebar/osx.rb

@@ -32,12 +32,12 @@ module Hokusai::Blocks::Titlebar
     EOF
 
     computed :rounding, default: 0.0, convert: proc(&:to_f)
-    computed :outline, default: [0.0, 0.0, 0.0, 0.0], convert: Hokusai::Outline
-    computed :outline_color, default: [0,0,0,0], convert: Hokusai::Color
+    computed :outline, default: nil
+    computed :outline_color, default: nil
     computed :unhovered_color, default: DEFAULT, convert: Hokusai::Color
     computed :radius, default: 6.0, convert: proc(&:to_f)
-    computed :background, default: nil, convert: Hokusai::Color
-    computed :background_drag, default: nil, convert: Hokusai::Color
+    computed :background, default: nil
+    computed :background_drag, default: nil
 
 
     uses(

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

@@ -0,0 +1,33 @@
+class Hokusai::Blocks::Variable < Hokusai::Block
+  template <<~EOF
+  [template]
+    empty
+  EOF
+
+  uses(empty: Hokusai::Blocks::Empty)
+
+  computed! :script
+
+  def after_updated
+    if @last_height != children[0].node.meta.get_prop(:height)
+      @last_height = children[0].node.meta.get_prop(:height)
+
+      node.meta.set_prop(:height, @last_height)
+      emit("height_updated", @last_height)
+    end
+  end
+
+  def on_mounted
+    klass = eval(script)
+
+    raise Hokusai::Error.new("Class #{klass} is not a Hokusai::Block") unless klass.ancestors.include?(Hokusai::Block)
+
+    node.meta.set_child(0, klass.mount)
+  end
+
+  def render(canvas)
+    if Hokusai.can_render(canvas)
+      yield canvas
+    end
+  end
+end

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

@@ -15,7 +15,7 @@ class Hokusai::Blocks::Vblock < Hokusai::Block
     canvas.vertical = true
     canvas.reverse = reverse
 
-    if background.nil?
+    if background.nil? && outline.nil?
       yield canvas
     else
       draw do

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

@@ -26,10 +26,10 @@ module Hokusai
     def trim_canvas(canvas)
       x, y, w, h = background_boundary
 
-      canvas.x = x + padding.left
-      canvas.y = y + padding.top
-      canvas.width = w - (padding.left + padding.right)
-      canvas.height = h - (padding.top + padding.bottom)
+      canvas.x = x + padding.left + outline.left
+      canvas.y = y + padding.top + outline.top
+      canvas.width = w - (padding.left + padding.right + outline.left + outline.right)
+      canvas.height = h - (padding.top + padding.bottom + outline.top + outline.bottom)
 
       canvas
     end

data/ui/src/hokusai/commands.rb

@@ -6,82 +6,99 @@ require_relative "./commands/scissor"
 require_relative "./commands/text"
 
 module Hokusai
+  # A proxy class for invoking various UI commands
+  #
+  # Invocations of commands are immediately sent to the backend
+  # for drawing
+  #
+  # Used as part of the drawing api for Hokusai::Block
   class Commands
     attr_reader :queue
 
     def initialize
-      # @queue = []
+      @queue = []
     end
 
-    # def hash
-    #   [self.class, *@queue.map(&:hash)].hash
-    # end
-
+    # Draw a rectangle
+    #
+    # @param [Float] the x coordinate
+    # @param [Float] the y coordinate
+    # @param [Float] the width of the rectangle
+    # @param [Float] height of the rectangle
     def rect(x, y, w, h)
       command = Commands::Rect.new(x, y, w, h)
+
       yield(command)
 
-      command.draw
-      # add(command)
+      queue << command
+      # command.draw
     end
 
+    # Draw a circle
+    #
+    # @param [Float] x coordinate
+    # @param [Float] y coordinate
+    # @param [Float] radius of the circle
     def circle(x, y, radius)
       command = Commands::Circle.new(x, y, radius)
+
       yield(command)
 
-      command.draw
-      # add(command)
+
+      queue << command
+      # command.draw
     end
 
+    # Draws an SVG
+    #
+    # @param [String] location of the svg
+    # @param [Float] x coord
+    # @param [Float] y coord
+    # @param [Float] width of the svg
+    # @param [Float] height of the svg
     def svg(source, x, y, w, h)
       command = Commands::SVG.new(source, x, y, w, h)
+
       yield(command)
 
-      # add(command)
+      queue << command
     end
 
     # Invokes an image command
     # from a filename, at position {x,y} with `w`x`h` dimensions
     def image(source, x, y, w, h)
-      Commands::Image.new(source, x, y, w, h).draw
-      # add(Commands::Image.new(source, x, y, w, h))
+      queue << Commands::Image.new(source, x, y, w, h)
     end
 
     # Invokes a scissor begin command
     # at position {x,y} with `w`x`h` dimensions
     def scissor_begin(x, y, w, h)
-      Commands::ScissorBegin.new(x, y, w, h).draw
-      # add(Commands::ScissorBegin.new(x, y, w, h))
+      queue << Commands::ScissorBegin.new(x, y, w, h)
     end
 
     # Invokes a scissor stop command
     def scissor_end
-      Commands::ScissorEnd.new.draw
-      # add(Commands::ScissorEnd.new)
+      queue << Commands::ScissorEnd.new
     end
 
+    # Draws text
+    #
+    # @param [String] the text content
+    # @param [Float] x coord
+    # @param [Float] y coord
     def text(content, x, y)
       command = Commands::Text.new(content, x, y)
       yield command
 
-      command.draw
-      # add(command)
+      queue << command
     end
 
-    def each
-      queue.each do |cmd|
-        yield(cmd)
-      end
+    def execute
+      queue.each(&:draw)
     end
 
     def clear!
-      # @queue = []
-    end
-
-    def add(command)
-      # @queue << command
-
-      self
+      queue.clear
     end
   end
 end