hokusai-zero 0.1.4 → 0.1.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 83cc0a077934960a9cfec3c52388de538b6816b6b4b9eb606ef449dac6f90608
-  data.tar.gz: 514429bc54c1b49743a425e1f6fb1056dd8f564658b4ff8d46905a595c2a0fd9
+  metadata.gz: 85dc0be97bf2f9c770f53b45a7790bd5b1dbfda261fb0f0da4f71c6c2c9c67eb
+  data.tar.gz: eb62a84b75ba128fbcd6b052e97a95853a0379572be85ea5584c98117af84b61
 SHA512:
-  metadata.gz: 337549e39f52146323156c2c9f9deb4e2efd6ee03dfdce73eb6ccaee7416acc59924a3641d36e48c14425e9e1066c6f3c3c32736cfb20afe557c0927bf1572c2
-  data.tar.gz: d29d8c032605dba3a48e930029a3e8ef588950ae2a4aaae70da6849b00a3243ff9505e5cdfce8edfc8635c2ff4b96d6aeab6d207ae0e81a8a0d70e9931b18e37
+  metadata.gz: 1ac8520911b6ba9b3112c68d1f1f653b179b43678c320489a732c97462ba930b637545f018aadc190418be97a6b9fac725eae62dc133ec576e253e87ac518cc6
+  data.tar.gz: fad9fccafdca8cca5ad855dd69b6e7741bd251c39152fb04bdcf1a9027dc47acb59661b247eeb2dbbc32dae09c7c8c7b1273eb1c55afd35db62301477da4e7c5

data/README.md

@@ -9,13 +9,13 @@ A Ruby library for authoring GUI applications
 
 ## Getting started
 
-The build tooling of this project is [xmake](https://xmake.io/#/).  You will need it to compile dependencies and run demos.
-
-Hokusai contains a tree-sitter grammar to parse templates, and uses `md4c` to parse markdown.
+In your Gemfile
 
-When compiling the C portion of hokusai, tree-sitter will be statically linked.
+```ruby
+gem "hokusai-zero",  "0.1.4"
+```
 
-## In order to run an application, you will also need to install a backend
+## In order to run an application, you will need to install a backend
 
 ### Raylib
 
@@ -23,7 +23,7 @@ When compiling the C portion of hokusai, tree-sitter will be statically linked.
 * Write your app
 * Run app with `RAYLIB_PATH=/libpath/for/libraylib.(so|dylib) ruby <your app>.rb`
 
-### SDL
+### SDL2
 
 * Install the following deps
 
@@ -35,13 +35,6 @@ When compiling the C portion of hokusai, tree-sitter will be statically linked.
 * Write your app
 * Run app with `SDL_PATH=/libpath/for/libsdl.(so|dylib) ruby <your app>.rb`
 
-
-## Gemfile
-
-```ruby
-gem "hokusai-zero"
-```
-
 ## Example counter application
 
 ```ruby
@@ -49,86 +42,35 @@ require "hokusai"
 require "hokusai/backends/raylib"
 
 class Counter < Hokusai::Block
-  style <<~EOF
-  [style]
-  additionStyles {
-    background: rgb(214, 49, 24);
-    rounding: 0.0;
-    outline: outline(1,4,4,1);
-    outline_color: rgb(216, 26, 137);
-  }
-
-  additionLabel {
-    size: 40;
-    color: rgb(255,255,255);
-  }
-
-  subtractStyles {
-    background: rgb(0, 85, 170);
-    rounding: 0.0;
-  }
-
-  subtractLabel {
-    size: 50;
-    color: rgb(255,255,255);
-  }
-
-  scrollbar {
-    width: 25;
-    control_height: 100;
-    control_padding: 5;
-    control_rounding: 5;
-  }
-  EOF
-
   template <<-EOF
   [template]
-    hblock { @keypress="update_keys"}
-      vblock
-        hblock
-          label#count {
-            :content="count"
-            size="130" 
-            :color="count_color"
+    vblock
+      hblock
+        label {
+          :content="count"
+          size="130" 
+          :color="count_color"
+        }
+      hblock
+        vblock
+          label { 
+            content="Add"
+            @click="increment" 
+          }
+        vblock
+          label { 
+            content="Subtract"
+            @click="decrement" 
           }
-        hblock
-          vblock#add { ...additionStyles }
-            label { 
-              content="Add"
-              @click="increment" 
-              ...additionLabel 
-            }
-          vblock#subtract { ...subtractStyles }
-            label { 
-              content="Subtract"
-              @click="decrement" 
-              ...subtractLabel 
-            }
-      [if="count_positive"]
-        scrollbar { ...scrollbar }
   EOF
 
   uses(
     vblock: Hokusai::Blocks::Vblock,
     hblock: Hokusai::Blocks::Hblock,
     label: Hokusai::Blocks::Label,
-    scrollbar: Hokusai::Blocks::Scrollbar,
-    image: Hokusai::Blocks::Image
   )
 
-  attr_accessor :count, :keys
-
-  def count_positive
-    count > 0
-  end
-
-  def modal
-    !keys.empty?
-  end
-
-  def update_keys(event)
-    @keys << event.char
-  end
+  attr_accessor :count
 
   def increment(event)
     self.count += 1
@@ -144,7 +86,7 @@ class Counter < Hokusai::Block
 
   def initialize(**args)
     @count = 0
-    @keys = ""
+
     super(**args)
   end
 end
@@ -158,6 +100,12 @@ end
 
 ## Development
 
+The build tooling of this project is [xmake](https://xmake.io/#/).  You will need it to compile dependencies and run demos.
+
+Hokusai contains a tree-sitter grammar to parse templates, and uses `md4c` to parse markdown.
+
+When compiling the C portion of hokusai, tree-sitter will be statically linked.
+
 Requirements:
 * [xmake](https://xmake.io/#/) to build dependencies
 * Ruby to run applications

data/ast/src/core/text.c

@@ -3,6 +3,26 @@
 
 #include "text.h"
 
+#ifdef _WIN32
+size_t my_strnlen(const char* src, size_t n) {
+  size_t len = 0;
+  while (len < n && src[len]) len++;
+  return len;
+}
+
+char* strndup(const char* s, size_t n) {
+  size_t len = my_strnlen(s, n);
+  char* p = malloc(len + 1);
+  if (p) 
+  {
+    memcpy(p, s, len);
+    p[len] = '\0';
+  }
+
+  return p;
+}
+#endif
+
 int hoku_text_char_init(hoku_char** character, int offset, int width)
 {
   hoku_char* init = malloc(sizeof(hoku_char));

data/ext/extconf.rb

@@ -5,12 +5,14 @@ if MiniPortile.darwin?
   suffix = "dylib"
 elsif MiniPortile.linux?
   suffix = "so"
+elsif MiniPortile.windows?
+  suffix = "dll"
 else
   raise "Currently only supporting darwin and linux"
 end
 
-tree_sitter = MiniPortile.new("libtree-sitter", "0.22.2", make_command: "make all")
-tree_sitter.files = ["https://github.com/tree-sitter/tree-sitter/archive/refs/tags/v0.22.2.zip"]
+tree_sitter = MiniPortile.new("libtree-sitter", "master", make_command: "make")
+tree_sitter.files = ["https://github.com/tree-sitter/tree-sitter/archive/refs/heads/master.zip"]
 tree_sitter.tap do |t|
   if t.source_directory
     t.prepare_build_directory
@@ -23,7 +25,7 @@ tree_sitter.tap do |t|
   def t.install
     return if installed?
 
-    execute('install', %Q(PREFIX=#{File.expand_path(port_path)} #{make_cmd} all install))
+    execute('install', %Q(#{make_cmd} all install CC=gcc AR=ar), { env: { "PREFIX" => File.expand_path(port_path) }})
   end
 
   t.install
@@ -42,9 +44,25 @@ md4c.cook
 md4c.activate
 
 pre = "#{__dir__}/.."
+cwd = "#{__dir__}"
+
+files = %w[ast/src/core/hml.c ast/src/core/ast.c ast/rc/core/style.c ast/src/core/input.c ast/src/core/component.c ast/src/core/util.c ast/src/core/text.c grammar/src/parser.c grammar/src/scanner.c ast/include/hashmap.c]
+objects = %w[hml.o ast.o style.o input.o component.o util.o text.o parser.o scanner.o hashmap.o]
+libraries = ["#{tree_sitter.path}/lib/libtree-sitter.a", "#{md4c.path}/lib/libmd4c.a"]
+
+if MiniPortile.windows?
+  cflags = "-shared -Wall -Wl,--export-all-symbols -Wl,--enable-auto-import"
+  mkdir = "mkdir #{pre}\\vendor\\lib"
+else
+  cflags = "-shared -Wall"
+  mkdir = "mkdir -p #{pre}/vendor/lib"
+end
 
 File.open("Makefile", "w") do |io|
   io << <<~EOF
+  src_files = #{files.map {|file| "#{pre}/#{file}"}.join(" ")}
+  object_files = #{objects.map {|file| "#{cwd}/#{file}"}.join(" ")}
+  libraries = #{libraries.join(" ")}
   src_files = #{tree_sitter.path}/lib/libtree-sitter.a #{md4c.path}/lib/libmd4c.a #{pre}/ast/src/core/hml.c #{pre}/ast/src/core/ast.c #{pre}/ast/src/core/style.c #{pre}/ast/src/core/input.c #{pre}/ast/src/core/component.c #{pre}/ast/src/core/util.c #{pre}/ast/src/core/text.c #{pre}/grammar/src/parser.c #{pre}/grammar/src/scanner.c #{pre}/ast/include/hashmap.c
   includes = -I#{pre}/ast/include -I#{pre}/ast/src -I#{pre}/grammar/src -I#{tree_sitter.path}/include -I#{md4c.path}/include
   all: clean hokusai
@@ -55,8 +73,9 @@ File.open("Makefile", "w") do |io|
   #{"\t"}echo "done"
 
   hokusai:
-  #{"\t"}mkdir -p #{pre}/vendor/lib
-  #{"\t"}gcc -shared -Wall $(includes) -o #{pre}/vendor/lib/libhokusai.#{suffix} $(src_files)
+  #{"\t"}#{mkdir}
+  #{"\t"}gcc -c $(includes) $(src_files) $(libraries)
+  #{"\t"}gcc #{cflags} $(includes) -o #{pre}/vendor/lib/libhokusai.#{suffix} $(object_files) $(libraries)
 
   clean:
   #{"\t"}rm -f vendor/lib/libhokusai.*

data/hokusai.gemspec

@@ -1,6 +1,6 @@
 Gem::Specification.new do |s|
   s.name        = 'hokusai-zero'
-  s.version     = '0.1.4'
+  s.version     = '0.1.5'
   s.licenses    = ['PPL']
   s.summary     = "A Ruby library for writing GUI applications"
   s.authors     = ["skinnyjames"]
@@ -16,6 +16,7 @@ Gem::Specification.new do |s|
   s.metadata    = { "source_code_uri" => "https://codeberg.org/skinnyjames/hokusai" }
   
   s.add_dependency "ffi", "~> 1.16"
+  s.add_dependency "colorize"
   s.add_dependency "concurrent-ruby", "~> 1.3.4"
   s.add_dependency "raylib-bindings", "~> 0.7.9"
   s.add_dependency "sdl2-bindings", "~> 0.2.3"

data/ui/lib/lib_hokusai.rb

@@ -9,6 +9,8 @@ module LibHokusai
     ffi_lib "#{__dir__}/../../vendor/lib/libhokusai.dylib"
   when /linux/
     ffi_lib "#{__dir__}/../../vendor/lib/libhokusai.so"
+  when /mingw32|mswin|msys/
+    ffi_lib "#{__dir__}/../../vendor/lib/libhokusai.dll"
   else
     raise "Unsupported platform!"
   end

data/ui/src/hokusai/assets/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><title>finite-icons</title><path d="M13.60851,6.08611L8.35425,11.339,3.06908,6.05389a0.5,0.5,0,0,1,0-.70711l0.539-.539a0.5,0.5,0,0,1,.70711,0l4.03907,4.039L12.36249,4.8399a0.5,0.5,0,0,1,.70705.00006l0.539,0.539A0.5,0.5,0,0,1,13.60851,6.08611Z" fill="#231f20"/></svg>

data/ui/src/hokusai/backends/raylib.rb

@@ -5,7 +5,18 @@ require 'memory_profiler'
 
 module Hokusai::Backends
   class RaylibBackend
-    RAYLIB_PATH = ENV["RAYLIB_PATH"] || "#{__dir__}/../../../../vendor/lib"
+    
+    RAYLIB_PATH = ENV["RAYLIB_PATH"] || begin
+      path = "#{__dir__}/../../../../vendor/lib"
+      case RbConfig::CONFIG['host_os']
+      when /darwin/
+        "#{path}/libraylib.dylib"
+      when /mswin|msys|mingw/
+        "#{path}/libraylib.dll"
+      when /linux/
+        "#{path}/libraylib.so"
+      end
+    end
 
     attr_reader :config
 
@@ -137,14 +148,7 @@ module Hokusai::Backends
     def run(block)
       self.class.reset
 
-      case RbConfig::CONFIG['host_os']
-      when /darwin/
-        Raylib.load_lib("#{RAYLIB_PATH}/libraylib.dylib")
-      when /mswin|msys|mingw/
-        Raylib.load_lib("#{RAYLIB_PATH}/libraylib.dll")
-      when /linux/
-        Raylib.load_lib("#{RAYLIB_PATH}/libraylib.so")
-      end
+      Raylib.load_lib(RAYLIB_PATH)
 
       resize = false
       initial = true
@@ -329,7 +333,6 @@ module Hokusai::Backends
       end
 
       Hokusai::Commands::SVG.on_draw do |command|
-        command = command.as(Hokusai::Commands::SVG)
         texture = begin
                     if self.class.images[command.source]
                       self.class.images[command.source]

data/ui/src/hokusai/backends/sdl2.rb

@@ -402,6 +402,33 @@ module Hokusai::Backends
         SDL.RenderCopy(renderer, texture, nil, rect)
       end
 
+      Hokusai::Commands::SVG.on_draw do |command|
+        next unless inside_scissor(command.x, command.y, command.height)
+
+        texture = begin
+                    if self.class.images[command.source]
+                      self.class.images[command.source]
+                    else
+                      file = File.read(command.source)
+
+                      rw = SDL.RWFromConstMem(file, file.size)
+                      surface_ptr = SDL.IMG_Load_RW(rw, 1)
+                      if surface_ptr.null?
+                        raise Hokusai::Error.new("Can't load Image: #{SDL.GetError.read_string}")
+                      end
+
+                      texture = SDL.CreateTextureFromSurface(renderer, surface_ptr)
+                      self.class.images[command.source] = texture
+                      SDL.FreeSurface(surface_ptr)
+                      texture
+                    end
+                  end
+
+          SDL.SetTextureColorMod(texture, command.color.r, command.color.g, command.color.b)
+          rect = sdl_rect(command.x, command.y, command.width, command.height)
+          SDL.RenderCopy(renderer, texture, nil, rect)
+      end
+
       Hokusai::Commands::Rect.on_draw do |command|
         next unless inside_scissor(command.x, command.y, command.height)
         # draw background first

data/ui/src/hokusai/block.rb

@@ -179,23 +179,23 @@ module Hokusai
 
     def draw(&block)
       instance_eval(&block)
-      # node.meta.commands.each(&:draw)
-      # node.meta.commands.clear!
     end
 
     def method_missing(name, *args,**kwargs, &block)
-      if Hokusai::Meta.commands.respond_to?(name)
-        return Hokusai::Meta.commands.send(name, *args, **kwargs, &block)
+      if node.meta.commands.respond_to?(name)
+        return node.meta.commands.send(name, *args, **kwargs, &block)
       end
 
       super
     end
 
     def draw_with
-      yield Hokusai::Meta.commands
+      yield node.meta.commands
+    end
 
-      # node.meta.commands.each(&:draw)
-      # node.meta.commands.clear!
+    def execute_draw
+      node.meta.commands.execute
+      node.meta.commands.clear!
     end
 
     def render(canvas)

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

@@ -9,12 +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(src, 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/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,6 +15,7 @@ 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)
@@ -170,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)

data/ui/src/hokusai/commands.rb

@@ -15,7 +15,9 @@ module Hokusai
   class Commands
     attr_reader :queue
 
-    def initialize; end
+    def initialize
+      @queue = []
+    end
 
     # Draw a rectangle
     #
@@ -28,7 +30,8 @@ module Hokusai
 
       yield(command)
 
-      command.draw
+      queue << command
+      # command.draw
     end
 
     # Draw a circle
@@ -41,7 +44,9 @@ module Hokusai
 
       yield(command)
 
-      command.draw
+
+      queue << command
+      # command.draw
     end
 
     # Draws an SVG
@@ -55,23 +60,25 @@ module Hokusai
       command = Commands::SVG.new(source, x, y, w, h)
 
       yield(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
+      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
+      queue << Commands::ScissorBegin.new(x, y, w, h)
     end
 
     # Invokes a scissor stop command
     def scissor_end
-      Commands::ScissorEnd.new.draw
+      queue << Commands::ScissorEnd.new
     end
 
     # Draws text
@@ -83,7 +90,15 @@ module Hokusai
       command = Commands::Text.new(content, x, y)
       yield command
 
-      command.draw
+      queue << command
+    end
+
+    def execute
+      queue.each(&:draw)
+    end
+
+    def clear!
+      queue.clear
     end
   end
 end

data/ui/src/hokusai/meta.rb

@@ -5,7 +5,7 @@ module Hokusai
     attr_reader :focused, :parent, :target, :updater,
                 :props, :publisher
 
-    def self.commands
+    def commands
       @commands ||= Commands.new
     end
 
@@ -126,13 +126,6 @@ module Hokusai
 
       false
     end
-    #
-    # def destroy
-    #   children.each do |child|
-    #     child.before_destroy if child.respond_to?(:before_destroy)
-    #     child.node.destroy
-    #   end
-    # end
 
     def child_delete(index)
       if child = children![index]

data/ui/src/hokusai/painter.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require_relative "./event"
+require "colorize"
 
 module Hokusai
   class PainterEntry
@@ -22,6 +23,9 @@ module Hokusai
     end
   end
 
+  ZTARGET_ROOT = "root"
+  ZTARGET_PARENT = "parent"
+
   class Painter
     attr_reader :root, :input, :before_render, :after_render,
                 :events
@@ -52,17 +56,36 @@ module Hokusai
       @after_render = block
     end
 
+    # def debug(parent, children)
+    #   @i ||= 0
+      
+    #   pp [
+    #     "#{@i}",
+    #     "parent: #{parent.block.class}##{parent.block.node.portal&.ast&.id} (z: #{parent.block.node.meta.get_prop(:z)})",
+    #     "children: #{children.map {|c| "#{c.block.class}##{c.block.node.portal&.ast&.id} (z: #{c.block.node.meta.get_prop(:z)})"} }"
+    #   ]
+    #   @i += 1
+    # end
+
     # @return [Array(Commands::Base)] the command list
     def render(canvas, resize = false, capture: true)
       return if root.children.empty?
 
+      zindexed = {}
+      zindex_counter = 0
+      zroot_x = canvas.x
+      zroot_y = canvas.y
+      zroot_w = canvas.width
+      zroot_h = canvas.height
+
       @root.on_resize(canvas) if resize
 
       before_render&.call([root, nil], canvas, input)
 
       root_children = (canvas.reverse? ? root.children?&.reverse.dup : root.children?&.dup) || []
       groups = []
-      groups << [root, measure(root_children, canvas)]
+      root_entry = PainterEntry.new(root, canvas.x, canvas.y, canvas.width, canvas.height)
+      groups << [root_entry, measure(root_children, canvas)]
 
       mouse_y = input.mouse.pos[:y]
       can_capture = mouse_y >= (canvas.y || 0.0) && mouse_y <= (canvas.y || 0.0) + canvas.height
@@ -71,9 +94,25 @@ module Hokusai
 
       while payload = groups.pop
         group_parent, group_children = payload
+        
+        parent_z = group_parent.block.node.meta.get_prop(:z)&.to_i
+        zindex_counter -= 1 if (parent_z || 0) > 0 && group_children.empty?
 
         while group = group_children.shift
-          canvas.reset(group.x, group.y, group.w, group.h)
+          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
+            when ZTARGET_ROOT
+              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
+            end
+          end
+
+          canvas.reset(entry.x, entry.y, entry.w, entry.h)
 
           before_render&.call([group.block, group.parent], canvas, input.raw)
 
@@ -92,17 +131,36 @@ module Hokusai
 
             unless local_children.nil?
               groups << [group_parent, group_children]
-              groups << [group.block, measure(local_children, local_canvas)]
+              parent = PainterEntry.new(group.block, canvas.x, canvas.y, canvas.width, canvas.height)
+              groups << [parent, measure(local_children, local_canvas)]
+
               breaked = true
             else
               breaked = false
             end
           end
+          
+          if z > 0
+            zindex_counter += 1
+            # puts ["start (#{z}) <#{parent_z}> {#{zindex_counter}} #{group.block.class}".colorize(:blue), z, group.block.node.portal&.ast&.id]
+            zindexed[zindex_counter] ||= []
+            zindexed[zindex_counter] << group.block
+          elsif zindex_counter > 0
+            # puts ["push (#{z}) <#{parent_z}>  {#{zindex_counter}} initial #{group.block.class}".colorize(:red), z, group.block.node.portal&.ast&.id]
+            zindexed[zindex_counter] << group.block
+          else
+            # puts ["draw (#{z}) <#{parent_z}>  {#{zindex_counter}} #{group.block.class}".colorize(:yellow), z, group.block.node.portal&.ast&.id]
+            group.block.execute_draw
+          end
 
           break if breaked
         end
       end
 
+      zindexed.sort.each do |z, blocks|
+        blocks.each(&:execute_draw)
+      end
+
       if capture
         events[:hover].bubble
         events[:wheel].bubble
@@ -132,10 +190,12 @@ module Hokusai
       hsum = 0.0
 
       children.each do |block|
-        # children.each do |block|
+        z = block.node.meta.get_prop?(:z)&.to_i || 0
         h = block.node.meta.get_prop?(:height)&.to_f
         w = block.node.meta.get_prop?(:width)&.to_f
 
+        next if z > 0
+
         if w
           wsum += w
           wcount = wcount.succ
@@ -195,12 +255,11 @@ module Hokusai
         events[:hover].capture(block, canvas)
         events[:click].capture(block, canvas)
         events[:wheel].capture(block, canvas)
-        events[:mousedown].capture(block, canvas)
         events[:mouseup].capture(block, canvas)
+        events[:mousedown].capture(block, canvas)
       else
         events[:mouseout].capture(block, canvas)
       end
-
       events[:mousemove].capture(block, canvas)
 
       if block_is_hovered || block.node.meta.focused

data/ui/src/hokusai.rb

@@ -1,3 +1,5 @@
+ASSETS_FOLDER = "#{__dir__}/hokusai/assets"
+
 require_relative '../lib/lib_hokusai'
 require_relative './hokusai/error'
 require_relative './hokusai/types'
@@ -34,6 +36,8 @@ require_relative './hokusai/blocks/selectable'
 require_relative './hokusai/blocks/input'
 require_relative './hokusai/blocks/variable'
 require_relative './hokusai/blocks/titlebar/osx'
+require_relative './hokusai/blocks/modal'
+require_relative './hokusai/blocks/dropdown'
 
 require "concurrent"
 
@@ -48,6 +52,19 @@ module Hokusai
     fallback_policy: :caller_runs
   )
 
+  SHADER_UNIFORM_FLOAT = 0      # Shader uniform type: float
+  SHADER_UNIFORM_VEC2 = 1       # Shader uniform type: vec2 (2 float)
+  SHADER_UNIFORM_VEC3 = 2       # Shader uniform type: vec3 (3 float)
+  SHADER_UNIFORM_VEC4 = 3       # Shader uniform type: vec4 (4 float)
+  SHADER_UNIFORM_INT = 4        # Shader uniform type: int
+  SHADER_UNIFORM_IVEC2 = 5      # Shader uniform type: ivec2 (2 int)
+  SHADER_UNIFORM_IVEC3 = 6      # Shader uniform type: ivec3 (3 int)
+  SHADER_UNIFORM_IVEC4 = 7      # Shader uniform type: ivec4 (4 int)
+  SHADER_UNIFORM_UINT = 8       # Shader uniform type: unsigned int
+  SHADER_UNIFORM_UIVEC2 = 9     # Shader uniform type: uivec2 (2 unsigned int)
+  SHADER_UNIFORM_UIVEC3 = 10    # Shader uniform type: uivec3 (3 unsigned int)
+  SHADER_UNIFORM_UIVEC4 = 11    # Shader uniform type: uivec4 (4 unsigned int)
+
   # Access the font registry
   #
   # @return [Hokusai::FontRegistry]

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hokusai-zero
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.1.5
 platform: ruby
 authors:
 - skinnyjames
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-11 00:00:00.000000000 Z
+date: 2025-03-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: ffi
@@ -24,6 +24,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '1.16'
+- !ruby/object:Gem::Dependency
+  name: colorize
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: concurrent-ruby
   requirement: !ruby/object:Gem::Requirement
@@ -192,6 +206,9 @@ files:
 - ui/spec/hokusai_spec.rb
 - ui/spec/spec_helper.rb
 - ui/src/hokusai.rb
+- ui/src/hokusai/assets/arrow-drop-down-line.png
+- ui/src/hokusai/assets/chevron-down.svg
+- ui/src/hokusai/assets/close-large-line.png
 - ui/src/hokusai/ast.rb
 - ui/src/hokusai/automation.rb
 - ui/src/hokusai/automation/client.rb
@@ -224,12 +241,14 @@ files:
 - ui/src/hokusai/blocks/circle.rb
 - ui/src/hokusai/blocks/clipped.rb
 - ui/src/hokusai/blocks/cursor.rb
+- ui/src/hokusai/blocks/dropdown.rb
 - ui/src/hokusai/blocks/dynamic.rb
 - ui/src/hokusai/blocks/empty.rb
 - ui/src/hokusai/blocks/hblock.rb
 - ui/src/hokusai/blocks/image.rb
 - ui/src/hokusai/blocks/input.rb
 - ui/src/hokusai/blocks/label.rb
+- ui/src/hokusai/blocks/modal.rb
 - ui/src/hokusai/blocks/panel.rb
 - ui/src/hokusai/blocks/rect.rb
 - ui/src/hokusai/blocks/scissor_begin.rb