kumiki 0.1.1

data/lib/kumiki/widgets/tabs.rb

@@ -0,0 +1,175 @@
+module Kumiki
+  # Tabs widget - tabbed container with header buttons
+
+  class Tabs < Layout
+    def initialize(labels, contents)
+      super()
+      @tab_labels = labels
+      @tab_contents = contents
+      @selected = 0
+      @tab_height = 36.0
+      @font_size_val = 13.0
+      @width_policy = EXPANDING
+      @height_policy = EXPANDING
+      @tab_widths = []
+      # Add initial content
+      if @tab_contents.length > 0
+        add(@tab_contents[0])
+      end
+    end
+
+    def select_tab(index)
+      if index >= 0
+        if index < @tab_contents.length
+          if index != @selected
+            # Hide native overlay widgets (e.g. WebView) in the outgoing tab
+            _walk_native_widgets(@tab_contents[@selected]) { |w| w.on_tab_hide }
+            @selected = index
+            clear_children
+            add(@tab_contents[@selected])
+            # Show native overlay widgets in the incoming tab
+            _walk_native_widgets(@tab_contents[@selected]) { |w| w.on_tab_show }
+            mark_dirty
+            mark_layout_dirty
+            update
+          end
+        end
+      end
+      self
+    end
+
+    def relocate_children(painter)
+      # Content area starts below tab header
+      content_y = @y + @tab_height
+      content_h = @height - @tab_height
+      if content_h < 0.0
+        content_h = 0.0
+      end
+      if @children.length > 0
+        c = @children[0]
+        c.move_xy(@x, content_y)
+        c.resize_wh(@width, content_h)
+      end
+    end
+
+    def measure(painter)
+      Size.new(@width, @height)
+    end
+
+    def redraw(painter, completely)
+      # 1) Layout + draw children first (redraw_children may clear the entire area)
+      relocate_children(painter)
+      redraw_children(painter, completely)
+
+      # 2) Draw tab bar ON TOP so it is not overwritten by background clear
+      draw_tab_bar(painter)
+    end
+
+    def draw_tab_bar(painter)
+      tab_bg = Kumiki.theme.bg_canvas
+      tab_active_bg = Kumiki.theme.bg_primary
+      tab_text_c = Kumiki.theme.text_secondary
+      tab_active_text = Kumiki.theme.text_primary
+      tab_border_c = Kumiki.theme.border
+      tab_indicator_c = Kumiki.theme.accent
+
+      # Tab bar background
+      painter.fill_rect(0.0, 0.0, @width, @tab_height, tab_bg)
+
+      # Calculate tab widths based on labels
+      @tab_widths = []
+      pad_h = 16.0
+      i = 0
+      while i < @tab_labels.length
+        tw = painter.measure_text_width(@tab_labels[i], Kumiki.theme.font_family, @font_size_val)
+        @tab_widths.push(tw + pad_h * 2.0)
+        i = i + 1
+      end
+
+      # Draw each tab header
+      ascent = painter.get_text_ascent(Kumiki.theme.font_family, @font_size_val)
+      draw_tab_headers(painter, ascent, tab_active_bg, tab_active_text, tab_text_c, tab_indicator_c)
+
+      # Border line below tabs
+      painter.draw_line(0.0, @tab_height, @width, @tab_height, tab_border_c, 1.0)
+    end
+
+    def draw_tab_headers(painter, ascent, active_bg, active_tc, inactive_tc, indicator_c)
+      tab_x = 0.0
+      i = 0
+      while i < @tab_labels.length
+        tw = @tab_widths[i]
+        draw_one_tab(painter, i, tab_x, tw, ascent, active_bg, active_tc, inactive_tc, indicator_c)
+        tab_x = tab_x + tw
+        i = i + 1
+      end
+    end
+
+    def draw_one_tab(painter, i, tab_x, tw, ascent, active_bg, active_tc, inactive_tc, indicator_c)
+      is_selected = (i == @selected)
+
+      # Tab background
+      if is_selected
+        painter.fill_rect(tab_x, 0.0, tw, @tab_height, active_bg)
+      end
+
+      # Tab label
+      if is_selected
+        tc = active_tc
+      else
+        tc = inactive_tc
+      end
+      label_w = painter.measure_text_width(@tab_labels[i], Kumiki.theme.font_family, @font_size_val)
+      text_x = tab_x + (tw - label_w) / 2.0
+      text_y = (@tab_height - painter.measure_text_height(Kumiki.theme.font_family, @font_size_val)) / 2.0 + ascent
+      painter.draw_text(@tab_labels[i], text_x, text_y, Kumiki.theme.font_family, @font_size_val, tc)
+
+      # Active indicator line at bottom
+      if is_selected
+        painter.fill_rect(tab_x, @tab_height - 2.0, tw, 2.0, indicator_c)
+      end
+    end
+
+    def mouse_down(ev)
+      # Check if click is in the tab header area
+      click_y = ev.pos.y
+      if click_y < @tab_height
+        find_clicked_tab(ev.pos.x)
+      end
+    end
+
+    def find_clicked_tab(click_x)
+      tab_x = 0.0
+      i = 0
+      while i < @tab_widths.length
+        tw = @tab_widths[i]
+        if click_x >= tab_x
+          if click_x < tab_x + tw
+            select_tab(i)
+            return
+          end
+        end
+        tab_x = tab_x + tw
+        i = i + 1
+      end
+    end
+
+    private
+
+    # Recursively walk a widget subtree, yielding widgets that respond to on_tab_hide/show.
+    def _walk_native_widgets(widget, &block)
+      return unless widget
+      block.call(widget) if widget.respond_to?(:on_tab_hide)
+      children = widget.instance_variable_get(:@children)
+      if children.is_a?(Array)
+        children.each { |c| _walk_native_widgets(c, &block) }
+      end
+    end
+  end
+
+  # Top-level helper
+  def Tabs(labels, contents)
+    Tabs.new(labels, contents)
+  end
+
+end

data/lib/kumiki/widgets/text.rb

@@ -0,0 +1,120 @@
+module Kumiki
+  # Text widget - displays text
+
+  # Text alignment constants
+  TEXT_ALIGN_LEFT = 0
+  TEXT_ALIGN_CENTER = 1
+  TEXT_ALIGN_RIGHT = 2
+
+  class Text < Widget
+    def initialize(text)
+      super()
+      @text = text
+      @font_family_val = nil
+      @font_size_val = 14.0
+      @color_val = 0xFFC0CAF5
+      @custom_color = false
+      @kind_val = 0
+      @text_align = TEXT_ALIGN_LEFT
+      @font_weight = 0
+      @font_slant = 0
+    end
+
+    def font_size(s)
+      @font_size_val = s
+      self
+    end
+
+    def font_family(f)
+      @font_family_val = f
+      self
+    end
+
+    def resolved_font_family
+      if @font_family_val != nil
+        @font_family_val
+      else
+        Kumiki.theme.font_family
+      end
+    end
+
+    def bold
+      @font_weight = 1
+      self
+    end
+
+    def italic
+      @font_slant = 1
+      self
+    end
+
+    def color(c)
+      @color_val = c
+      @custom_color = true
+      self
+    end
+
+    def kind(k)
+      @kind_val = k
+      self
+    end
+
+    def align(a)
+      @text_align = a
+      self
+    end
+
+    def set_text(t)
+      @text = t
+      mark_dirty
+    end
+
+    def get_text
+      @text
+    end
+
+    def measure(painter)
+      ff = resolved_font_family
+      w = painter.measure_text_width(@text, ff, @font_size_val)
+      h = painter.measure_text_height(ff, @font_size_val)
+      Size.new(w, h)
+    end
+
+    def redraw(painter, completely)
+      ff = resolved_font_family
+      ascent = painter.get_text_ascent(ff, @font_size_val)
+      th = painter.measure_text_height(ff, @font_size_val)
+
+      # Vertical centering when widget is taller than text
+      if @height > th
+        y_offset = (@height - th) / 2.0 + ascent
+      else
+        y_offset = ascent
+      end
+
+      # Horizontal alignment
+      x_offset = 0.0
+      if @text_align == TEXT_ALIGN_CENTER
+        text_w = painter.measure_text_width(@text, ff, @font_size_val)
+        x_offset = (@width - text_w) / 2.0
+        if x_offset < 0.0
+          x_offset = 0.0
+        end
+      elsif @text_align == TEXT_ALIGN_RIGHT
+        text_w = painter.measure_text_width(@text, ff, @font_size_val)
+        x_offset = @width - text_w
+        if x_offset < 0.0
+          x_offset = 0.0
+        end
+      end
+      c = @custom_color ? @color_val : Kumiki.theme.text_color_for_kind(@kind_val)
+      painter.draw_text(@text, x_offset, y_offset, ff, @font_size_val, c, @font_weight, @font_slant)
+    end
+  end
+
+  # Top-level helper
+  def Text(text)
+    Text.new(text)
+  end
+
+end

data/lib/kumiki/widgets/tree.rb

@@ -0,0 +1,434 @@
+module Kumiki
+  # Tree - expandable tree view widget with virtual scroll
+  # Features: expand/collapse, selection, hover highlight, icons,
+  #           virtual scroll (only visible rows rendered)
+
+  TREE_ROW_HEIGHT = 26.0
+  TREE_INDENT = 20.0
+  TREE_ICON_SIZE = 16.0
+  TREE_TOGGLE_SIZE = 16.0
+  TREE_SCROLLBAR_WIDTH = 8.0
+
+  # TreeNode - data model for tree items
+  class TreeNode
+    def initialize(id, label)
+      @id = id
+      @label = label
+      @children = []
+      @icon = nil
+      @data = nil
+    end
+
+    def id
+      @id
+    end
+
+    def label
+      @label
+    end
+
+    def children
+      @children
+    end
+
+    def icon
+      @icon
+    end
+
+    def data
+      @data
+    end
+
+    def set_icon(i)
+      @icon = i
+      self
+    end
+
+    def set_data(d)
+      @data = d
+      self
+    end
+
+    def add_child(child)
+      @children << child
+      self
+    end
+
+    def has_children
+      @children.length > 0
+    end
+  end
+
+  # TreeState - reactive state for tree
+  class TreeState < ObservableBase
+    def initialize(nodes)
+      super()
+      @nodes = nodes               # Array of TreeNode (root nodes)
+      @expanded_ids = []            # Array of expanded node IDs
+      @selected_id = "none"
+    end
+
+    def nodes
+      @nodes
+    end
+
+    def selected_id
+      @selected_id
+    end
+
+    def is_expanded(id)
+      i = 0
+      while i < @expanded_ids.length
+        if @expanded_ids[i] == id
+          return true
+        end
+        i = i + 1
+      end
+      false
+    end
+
+    def toggle_expanded(id)
+      if is_expanded(id)
+        collapse(id)
+      else
+        expand(id)
+      end
+    end
+
+    def expand(id)
+      if is_expanded(id)
+        return
+      end
+      @expanded_ids << id
+      notify_observers
+    end
+
+    def collapse(id)
+      new_ids = []
+      i = 0
+      while i < @expanded_ids.length
+        if @expanded_ids[i] != id
+          new_ids << @expanded_ids[i]
+        end
+        i = i + 1
+      end
+      @expanded_ids = new_ids
+      notify_observers
+    end
+
+    def expand_all
+      collect_all_ids(@nodes)
+      notify_observers
+    end
+
+    def collapse_all
+      @expanded_ids = []
+      notify_observers
+    end
+
+    def select(id)
+      @selected_id = id
+      notify_observers
+    end
+
+    def set_nodes(n)
+      @nodes = n
+      @expanded_ids = []
+      @selected_id = "none"
+      notify_observers
+    end
+
+    private
+
+    def collect_all_ids(nodes)
+      i = 0
+      while i < nodes.length
+        node = nodes[i]
+        if node.has_children
+          @expanded_ids << node.id
+          collect_all_ids(node.children)
+        end
+        i = i + 1
+      end
+    end
+  end
+
+  # Tree widget - custom drawing with virtual scroll
+  class Tree < Widget
+    def initialize(state)
+      super()
+      @state = state
+      @scroll_y = 0.0
+      @max_scroll = 0.0
+      @scrollable_flag = true
+      @hover_row = -1
+      @visible_nodes = []     # Flat list of [node, depth] pairs for rendering
+      @width_policy = EXPANDING
+      @height_policy = EXPANDING
+      @state.attach(self)
+    end
+
+    def on_attach(observable)
+    end
+
+    def on_detach(observable)
+    end
+
+    def on_notify
+      rebuild_visible
+      mark_dirty
+      update
+    end
+
+    def measure(painter)
+      rebuild_visible
+      h = @visible_nodes.length * 1.0 * TREE_ROW_HEIGHT
+      Size.new(@width, h)
+    end
+
+    def get_scrollable
+      @scrollable_flag
+    end
+
+    def rebuild_visible
+      @visible_nodes = []
+      collect_visible(@state.nodes, 0)
+    end
+
+    def collect_visible(nodes, depth)
+      i = 0
+      while i < nodes.length
+        node = nodes[i]
+        @visible_nodes << [node, depth]
+        if node.has_children
+          if @state.is_expanded(node.id)
+            collect_visible(node.children, depth + 1)
+          end
+        end
+        i = i + 1
+      end
+    end
+
+    def redraw(painter, completely)
+      rebuild_visible
+      visible_h = @height
+      compute_tree_scroll(visible_h)
+
+      # Background
+      painter.fill_rect(0.0, 0.0, @width, @height, Kumiki.theme.bg_primary)
+
+      # Clip and draw visible rows
+      painter.save
+      painter.clip_rect(0.0, 0.0, @width, @height)
+
+      first_row = tree_float_to_row(@scroll_y / TREE_ROW_HEIGHT)
+      if first_row < 0
+        first_row = 0
+      end
+      last_row = tree_float_to_row((@scroll_y + visible_h) / TREE_ROW_HEIGHT) + 1
+      if last_row > @visible_nodes.length
+        last_row = @visible_nodes.length
+      end
+
+      ri = first_row
+      while ri < last_row
+        draw_tree_row(painter, ri)
+        ri = ri + 1
+      end
+
+      painter.restore
+
+      # Scrollbar
+      draw_tree_scrollbar(painter, visible_h)
+    end
+
+    def draw_tree_row(painter, ri)
+      entry = @visible_nodes[ri]
+      node = entry[0]
+      depth = entry[1]
+      ri_f = ri * 1.0
+      row_y = ri_f * TREE_ROW_HEIGHT - @scroll_y
+
+      # Background: selection > hover > alternating
+      bg = compute_tree_row_bg(painter, ri, node)
+      painter.fill_rect(0.0, row_y, @width, TREE_ROW_HEIGHT, bg)
+
+      # Indent
+      indent = depth * 1.0 * TREE_INDENT + 8.0
+
+      # Toggle icon (expand/collapse arrow)
+      if node.has_children
+        draw_toggle(painter, indent, row_y, node)
+      end
+
+      # Label
+      label_x = indent + TREE_TOGGLE_SIZE + 4.0
+      ascent = painter.get_text_ascent(Kumiki.theme.font_family, 13.0)
+      mh = painter.measure_text_height(Kumiki.theme.font_family, 13.0)
+      label_y = row_y + (TREE_ROW_HEIGHT - mh) / 2.0 + ascent
+      tc = Kumiki.theme.text_primary
+      painter.draw_text(node.label, label_x, label_y, Kumiki.theme.font_family, 13.0, tc)
+
+      # Bottom border
+      bc = painter.with_alpha(Kumiki.theme.border, 30)
+      painter.draw_line(0.0, row_y + TREE_ROW_HEIGHT, @width, row_y + TREE_ROW_HEIGHT, bc, 1.0)
+    end
+
+    def draw_toggle(painter, indent, row_y, node)
+      # Draw a small triangle: > for collapsed, v for expanded
+      tx = indent + TREE_TOGGLE_SIZE / 2.0
+      ty = row_y + TREE_ROW_HEIGHT / 2.0
+      tc = Kumiki.theme.text_secondary
+      s = 5.0
+      if @state.is_expanded(node.id)
+        # Down arrow (v)
+        painter.fill_triangle(tx - s, ty - s / 2.0,
+                              tx + s, ty - s / 2.0,
+                              tx, ty + s / 2.0, tc)
+      else
+        # Right arrow (>)
+        painter.fill_triangle(tx - s / 2.0, ty - s,
+                              tx + s / 2.0, ty,
+                              tx - s / 2.0, ty + s, tc)
+      end
+    end
+
+    def compute_tree_row_bg(painter, ri, node)
+      bg = Kumiki.theme.bg_primary
+      if node.id == @state.selected_id
+        ac = Kumiki.theme.accent
+        bg = painter.with_alpha(ac, 50)
+      elsif ri == @hover_row
+        bg = painter.lighten_color(bg, 0.08)
+      end
+      bg
+    end
+
+    def draw_tree_scrollbar(painter, visible_h)
+      if @max_scroll <= 0.0
+        return
+      end
+      vn_len = @visible_nodes.length * 1.0
+      content_h = vn_len * TREE_ROW_HEIGHT
+      sb_x = @width - TREE_SCROLLBAR_WIDTH
+      sb_ratio = visible_h / content_h
+      sb_h = visible_h * sb_ratio
+      if sb_h < 20.0
+        sb_h = 20.0
+      end
+      sb_travel = visible_h - sb_h
+      sb_pos = 0.0
+      if @max_scroll > 0.0
+        sb_pos = (@scroll_y / @max_scroll) * sb_travel
+      end
+      painter.fill_rect(sb_x, 0.0, TREE_SCROLLBAR_WIDTH, visible_h, Kumiki.theme.scrollbar_bg)
+      painter.fill_round_rect(sb_x + 1.0, sb_pos, TREE_SCROLLBAR_WIDTH - 2.0, sb_h, 3.0, Kumiki.theme.scrollbar_fg)
+    end
+
+    # --- Event Handlers ---
+
+    def mouse_up(ev)
+      mx = ev.pos.x
+      my = ev.pos.y
+      row_idx = tree_row_at_y(my)
+      if row_idx < 0
+        return
+      end
+      if row_idx >= @visible_nodes.length
+        return
+      end
+      entry = @visible_nodes[row_idx]
+      node = entry[0]
+      depth = entry[1]
+      indent = depth * 1.0 * TREE_INDENT + 8.0
+      toggle_end = indent + TREE_TOGGLE_SIZE
+      if mx < toggle_end
+        if node.has_children
+          @state.toggle_expanded(node.id)
+          return
+        end
+      end
+      @state.select(node.id)
+    end
+
+    def cursor_pos(ev)
+      my = ev.pos.y
+      old_hr = @hover_row
+      @hover_row = tree_row_at_y(my)
+      if @hover_row != old_hr
+        mark_dirty
+        update
+      end
+    end
+
+    def mouse_out
+      if @hover_row != -1
+        @hover_row = -1
+        mark_dirty
+        update
+      end
+    end
+
+    def dispatch_to_scrollable(p, is_direction_x)
+      if contain(p)
+        [self, p]
+      else
+        [nil, nil]
+      end
+    end
+
+    def mouse_wheel(ev)
+      @scroll_y = @scroll_y - ev.delta_y * 30.0
+      if @scroll_y < 0.0
+        @scroll_y = 0.0
+      end
+      if @scroll_y > @max_scroll
+        @scroll_y = @max_scroll
+      end
+      mark_dirty
+      update
+    end
+
+    private
+
+    def compute_tree_scroll(visible_h)
+      vn_len = @visible_nodes.length * 1.0
+      content_h = vn_len * TREE_ROW_HEIGHT
+      @max_scroll = content_h - visible_h
+      if @max_scroll < 0.0
+        @max_scroll = 0.0
+      end
+      if @scroll_y > @max_scroll
+        @scroll_y = @max_scroll
+      end
+      if @scroll_y < 0.0
+        @scroll_y = 0.0
+      end
+    end
+
+    def tree_row_at_y(y)
+      row = tree_float_to_row((y + @scroll_y) / TREE_ROW_HEIGHT)
+      if row < 0
+        row = -1
+      end
+      if row >= @visible_nodes.length
+        row = -1
+      end
+      row
+    end
+
+    def tree_float_to_row(f)
+      r = 0
+      while r * 1.0 + 1.0 <= f
+        r = r + 1
+      end
+      r
+    end
+  end
+
+  # Top-level helper
+  def Tree(state)
+    Tree.new(state)
+  end
+
+end