zaniah 0.2.0 → 0.3.0

data/lib/zaniah/devtools/hot_reload.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require_relative "../platform/file_event"
+
+module Zaniah
+  module DevTools
+    class HotReload
+      attr_reader :error
+
+      def initialize(app, paths, watcher: nil, loader: nil, &on_reload)
+        @app, @watcher = app, watcher || Platform.watch(paths)
+        @loader, @on_reload, @closed = loader || ->(path) { load path }, on_reload, false
+      end
+
+      def poll
+        return [] if @closed
+        paths = @watcher.poll(timeout: 0).filter_map do |event|
+          event.path if %i[created modified renamed].include?(event.kind) && event.path&.end_with?(".rb")
+        end.uniq
+        paths.each { |path| @loader.call(path) }
+        unless paths.empty?
+          @error = nil
+          @on_reload&.call(paths.freeze)
+          @app.windows.each(&:request_frame)
+        end
+        paths
+      rescue StandardError => exception
+        @error = exception
+        @app.windows.each(&:request_frame)
+        []
+      end
+
+      def close
+        return if @closed
+        @closed = true
+        @watcher.close
+      end
+    end
+  end
+end

data/lib/zaniah/devtools/inspector.rb

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+module Zaniah
+  module DevTools
+    Entry = Data.define(:object, :name, :key, :test_id, :bounds, :style, :children)
+
+    class Inspector
+      attr_reader :window, :snapshot, :selected
+
+      def initialize(window, visible: false, stats: true)
+        @window, @visible, @snapshot = window, !!visible, nil
+        @stats = StatsOverlay.new if stats
+        previous = window.instance_variable_get(:@on_frame)
+        window.on_frame do |element, clear|
+          previous&.call(element, clear)
+          frame(element)
+        end
+        window.devtools = self
+      end
+
+      def visible? = @visible
+
+      def toggle
+        @visible = !@visible
+        window.request_frame
+        self
+      end
+
+      def handle_input(event)
+        return false unless event.is_a?(Input::KeyDown) && Input::Keystroke.normalize(event.keystroke) == "f12"
+        toggle
+        true
+      end
+
+      def frame(element)
+        @snapshot = collect(element)
+        return unless visible?
+        @selected = hovered
+        paint_highlight(@selected.bounds) if @selected&.bounds
+        paint_panel
+      end
+
+      private
+
+      def collect(object, seen = {})
+        return if !object || seen[object.object_id]
+        seen[object.object_id] = true
+        node = object.respond_to?(:layout_node) ? object.layout_node : nil
+        style = if object.respond_to?(:resolved_style) && object.resolved_style
+          object.resolved_style.to_h
+        elsif object.respond_to?(:root) && object.root&.respond_to?(:resolved_style) && object.root.resolved_style
+          object.root.resolved_style.to_h
+        else {}
+        end
+        children = object.respond_to?(:children) ? object.children.filter_map { |child| collect(child, seen) } : []
+        Entry.new(object: object, name: object.class.name.sub("Zaniah::", ""),
+          key: object.respond_to?(:identity_key) ? object.identity_key : nil,
+          test_id: object.respond_to?(:test_id) ? object.test_id : nil,
+          bounds: node&.bounds, style: style.freeze, children: children.freeze)
+      end
+
+      def hovered
+        owner = window.dispatcher.hits.reverse.find { |hit| window.pointer_position && hit.bounds.contains?(window.pointer_position) }&.owner
+        find_entry(@snapshot, owner) || @snapshot
+      end
+
+      def find_entry(entry, object)
+        return unless entry && object
+        return entry if entry.object.equal?(object)
+        entry.children.each { |child| return found if (found = find_entry(child, object)) }
+        nil
+      end
+
+      def paint_highlight(bounds)
+        window.scene.layer(Scene::LAYER_DEBUG) do
+          window.scene.quad(bounds.x, bounds.y, bounds.width, bounds.height,
+            color: "#38bdf833", border_width: 1, border_color: "#38bdf8")
+        end
+      end
+
+      def paint_panel
+        scene = window.scene
+        width, line_height = [window.content_size.width * 0.42, 360].min, 17
+        x = window.content_size.width - width
+        lines = flatten(@snapshot).first(((window.content_size.height - 70) / line_height).floor)
+        scene.layer(Scene::LAYER_DEBUG) do
+          scene.quad(x, 0, width, window.content_size.height, color: "#111827ee", border_width: 1, border_color: "#38bdf8")
+          lines.each_with_index { |(entry, depth), index| text("#{"  " * depth}#{entry.name}#{entry.key ? " [#{entry.key}]" : ""}", x + 8, 8 + index * line_height) }
+          if @selected
+            text("bounds: #{@selected.bounds&.to_h || "none"}", x + 8, window.content_size.height - 48)
+            text("style: #{@selected.style.reject { |_key, value| value.nil? }.first(3).to_h}", x + 8, window.content_size.height - 31)
+          end
+          @stats&.paint(window, x: x + 8, y: window.content_size.height - 68)
+        end
+      end
+
+      def flatten(entry, depth = 0, result = [])
+        return result unless entry
+        result << [entry, depth]
+        entry.children.each { |child| flatten(child, depth + 1, result) }
+        result
+      end
+
+      def text(value, x, y)
+        return unless window.text_system
+        line = window.text_system.layout_line(value.to_s, size: 11)
+        window.text_system.paint_line(window.scene, line, x: x, y: y + line.ascent, color: "#e5e7eb")
+      end
+    end
+  end
+end

data/lib/zaniah/devtools/stats_overlay.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Zaniah
+  module DevTools
+    class StatsOverlay
+      def paint(window, x:, y:)
+        stats = window.frame_stats
+        value = format("%.0f fps  %.2f ms  layout %.2f  paint %.2f  %d commands",
+          stats[:fps], stats[:frame_ms], stats[:layout_ms], stats[:paint_ms], stats[:command_count])
+        return unless window.text_system
+        line = window.text_system.layout_line(value, size: 11)
+        window.text_system.paint_line(window.scene, line, x: x, y: y + line.ascent, color: "#67e8f9")
+      end
+    end
+  end
+end

data/lib/zaniah/devtools.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require_relative "devtools/inspector"
+require_relative "devtools/stats_overlay"
+require_relative "devtools/hot_reload"
+
+module Zaniah
+  module DevTools
+    module_function
+
+    def attach(window, **options) = Inspector.new(window, **options)
+  end
+end

data/lib/zaniah/element.rb

@@ -4,15 +4,18 @@ module Zaniah
   class Element
     include LengthUnits
 
-    attr_reader :layout_node
+    attr_reader :layout_node, :parent, :resolved_style
 
     def initialize
       @style, @children, @handlers = Layout::Style.new, [], {}
-      @background, @border_color, @radius = "#0000", "#0000", 0
+      @style_set, @static_flags = StyleSet.new(@style), Set.new
     end
 
     def child(element)
-      @children << element if element
+      if element
+        element.send(:parent=, self) if element.respond_to?(:parent=, true)
+        @children << element
+      end
       self
     end
 
@@ -24,16 +27,39 @@ module Zaniah
 
     def style(**properties)
       @style = @style.merge(**properties)
+      @style_set.merge(**properties)
       self
     end
 
     def key(value) = (@key = value; self)
+    def identity_key = @key
+    def paint_style(**properties)
+      @paint_opacity = properties.delete(:opacity) if properties.key?(:opacity)
+      @paint_style = (@paint_style || {}).merge(properties)
+      self
+    end
+    def transition(*properties, duration:, easing: :ease_in_out)
+      raise ArgumentError, "transition needs at least one property" if properties.empty?
+      @transition = Transition.new(properties.map(&:to_sym).freeze, Float(duration), easing)
+      self
+    end
     def test_id(value = (getter = true)) = getter ? @test_id : (@test_id = value.to_s.freeze; self)
     def handlers = @handlers.keys.freeze
     def with_state(&initial) = (@state_initializer = initial; self)
-    def bg(color) = (@background = color; self)
-    def border_color(color) = (@border_color = color; self)
-    def rounded(radius) = (@radius = radius; self)
+    def bg(color) = style(background: color)
+    def border_color(color) = style(border_color: color)
+    def rounded(radius) = style(corner_radii: radius)
+    def opacity(value) = style(opacity: value)
+    def ring(width, color = nil, offset = 0) = style(ring: Ring.new(width, color, offset))
+    def cursor(value) = style(cursor: value)
+    def focusable(tab_index: 0, context: {}, &on_action)
+      @focus_handle ||= Input::FocusHandle.new(owner: self)
+      @focus_handle.tab_index, @focus_handle.focusable = Integer(tab_index), true
+      @focus_handle.context.merge!(context)
+      @focus_handle.on_action = on_action if on_action
+      self
+    end
+    def focus_handle = @focus_handle
     def tooltip(text) = (@tooltip = text.to_s; self)
     def context_menu(items) = (@context_menu = items; self)
     def flex = style(display: :flex)
@@ -46,6 +72,21 @@ module Zaniah
     def flex_1 = style(flex_grow: 1, flex_basis: 0)
     def overflow_hidden = style(overflow: :hidden)
 
+    %i[hover active focus focus_visible].each do |state|
+      define_method(state) { |**properties, &block| state_style(state, properties, &block) }
+    end
+
+    %i[disabled selected].each do |state|
+      define_method(state) do |value = true, **properties, &block|
+        if block || !properties.empty?
+          state_style(state, properties, &block)
+        else
+          value ? @static_flags.add(state) : @static_flags.delete(state)
+          self
+        end
+      end
+    end
+
     {w: :width, h: :height, min_w: :min_width, min_h: :min_height,
      max_w: :max_width, max_h: :max_height, p: :padding, m: :margin,
      gap: :gap, border: :border, border_b: :border_bottom}.each do |method, property|
@@ -63,13 +104,57 @@ module Zaniah
     end
 
     def prepaint(bounds, _state, cx)
-      unless @handlers.empty? && !@tooltip && !@context_menu
+      transform = @style[:transform] || Transform.identity
+      return prepaint_contents(bounds, cx) if transform == Transform.identity
+      cx.dispatcher.push_transform(transform) { prepaint_contents(bounds, cx) }
+    end
+
+    def paint(bounds, _state, _prepaint, cx)
+      flags = cx.interactivity.for(self, @static_flags)
+      @resolved_style = transition_style(@style_set.resolve(flags), cx)
+      @resolved_style = @resolved_style.merge(**@paint_style) if @paint_style && !@paint_style.empty?
+      cx.window.set_cursor(@resolved_style[:cursor]) if flags.include?(:hover) && @resolved_style[:cursor]
+      border = @resolved_style[:border_widths] || @resolved_style[:border]
+      border = 0 unless border.is_a?(Numeric) || border.is_a?(Edges)
+      background = @resolved_style[:background] || "#0000"
+      transform = @resolved_style[:transform] || Transform.identity
+      z_index = Float(@resolved_style[:z_index])
+      operation = lambda do
+        if z_index.zero?
+          paint_transformed(bounds, border, background, transform, cx)
+        else
+          cx.scene.layer(Scene::LAYER_CONTENT + z_index) do
+            paint_transformed(bounds, border, background, transform, cx)
+          end
+        end
+      end
+      @paint_opacity ? cx.scene.push_opacity(@paint_opacity, &operation) : operation.call
+      paint_ring(bounds, cx) if @resolved_style[:ring]
+    ensure
+      @paint_style = nil
+      @paint_opacity = nil
+    end
+
+    protected
+
+    attr_writer :parent
+
+    private
+
+    def prepaint_contents(bounds, cx)
+      if @focus_handle
+        @focus_handle.bounds = bounds
+        @focus_handle.focusable = !@static_flags.include?(:disabled)
+        cx.dispatcher.register_focus(@focus_handle)
+      end
+      unless @handlers.empty? && !@tooltip && !@context_menu && !@style_set.interactive? && !@focus_handle
         cx.dispatcher.hit(bounds, owner: self) do |event|
           if event.is_a?(Input::MouseDown) && event.button == :right && @context_menu
             cx.window.context_menu(@context_menu, position: event.position)
             next true
           end
           cx.window.offer_tooltip(@tooltip, position: event.position) if @tooltip && event.is_a?(Input::MouseMove)
+          cx.dispatcher.focus(@focus_handle, origin: :pointer) if @focus_handle && event.is_a?(Input::MouseDown)
           kind = case event
           when Input::MouseDown then @handlers.key?(:mouse_down) ? :mouse_down : :click
           when Input::MouseMove then @dragging && @handlers.key?(:drag) ? :drag : :hover
@@ -80,19 +165,129 @@ module Zaniah
           @dragging = true if event.is_a?(Input::MouseDown) && @handlers[:drag]
           @dragging = false if event.is_a?(Input::MouseUp)
           handler&.call(event, cx)
-          @dragging && event.is_a?(Input::MouseDown) ? :capture : !!handler || !!(@tooltip && event.is_a?(Input::MouseMove))
+          @dragging && event.is_a?(Input::MouseDown) ? :capture : !!handler || !!(@focus_handle && event.is_a?(Input::MouseDown)) || !!(@tooltip && event.is_a?(Input::MouseMove))
         end
       end
-      visit = -> { @children.each { |child| child.prepaint(child.layout_node.bounds, nil, cx) } }
-      @style[:overflow] == :visible ? visit.call : cx.dispatcher.clip(bounds, &visit)
+      operation = -> { @children.each { |child| child.prepaint(child.layout_node.bounds, nil, cx) } }
+      @style[:overflow] == :visible ? operation.call : cx.dispatcher.clip(bounds, &operation)
+      prepare_child_animations(cx)
     end
 
-    def paint(bounds, _state, _prepaint, cx)
-      border = @style[:border].is_a?(Numeric) ? @style[:border] : 0
+    def paint_transformed(bounds, border, background, transform, cx)
+      return paint_contents(bounds, border, background, cx) if transform == Transform.identity
+      cx.scene.push_transform(transform) { paint_contents(bounds, border, background, cx) }
+    end
+
+    def paint_contents(bounds, border, background, cx)
+      shadows = @resolved_style[:shadows]
+      shadows = [shadows] if shadows && !shadows.is_a?(Array)
+      shadows&.each do |shadow|
+        next unless shadow.is_a?(Shadow)
+        cx.scene.shadow(bounds.x + shadow.x, bounds.y + shadow.y, bounds.width, bounds.height,
+          color: shadow.color, blur: shadow.blur, spread: shadow.spread,
+          radius: @resolved_style[:corner_radii] || 0, inset: shadow.inset)
+      end
       cx.scene.quad(bounds.x, bounds.y, bounds.width, bounds.height,
-        color: @background, radius: @radius, border_width: border, border_color: @border_color)
-      paint_children = -> { @children.each { |child| child.paint(child.layout_node.bounds, nil, nil, cx) unless child.layout_node.style[:display] == :none } }
-      @style[:overflow] == :visible ? paint_children.call : cx.scene.clip(bounds, &paint_children)
+        color: background, opacity: @resolved_style[:opacity],
+        radius: @resolved_style[:corner_radii] || 0, border_width: border,
+        border_color: @resolved_style[:border_color] || "#0000",
+        border_style: @resolved_style[:border_style])
+      operation = lambda do
+        @children.each { |child| child.paint(child.layout_node.bounds, nil, nil, cx) unless child.layout_node.style[:display] == :none }
+        @departing_children&.each { |child, old_bounds, opacity| child.paint_style(opacity: opacity).paint(old_bounds, nil, nil, cx) }
+      end
+      @style[:overflow] == :visible ? operation.call : cx.scene.clip(bounds, &operation)
+    end
+
+    def paint_ring(bounds, cx)
+      ring = @resolved_style[:ring]
+      extent = ring.width + ring.offset
+      radius = @resolved_style[:corner_radii] || 0
+      radius += extent if radius.is_a?(Numeric)
+      cx.scene.layer(Scene::LAYER_FOCUS_RING) do
+        paint = -> { cx.scene.quad(bounds.x - extent, bounds.y - extent, bounds.width + extent * 2, bounds.height + extent * 2,
+          color: "#0000", radius: radius, border_width: ring.width, border_color: ring.color || cx.theme.colors.ring) }
+        transform = @resolved_style[:transform] || Transform.identity
+        transform == Transform.identity ? paint.call : cx.scene.push_transform(transform, &paint)
+      end
+    end
+
+    def state_style(state, properties)
+      builder = StyleBuilder.new(properties)
+      yield(builder) if block_given?
+      @style_set.on(state, **builder.properties)
+      self
+    end
+
+    def transition_style(target, cx)
+      return target unless @transition && @key
+      state = cx.state([:transition, @key]) { {targets: {}} }
+      values = {}
+      @transition.properties.each do |property|
+        value = target[property]
+        unless state[:targets].key?(property)
+          state[:targets][property] = value
+          next
+        end
+        previous = state[:targets][property]
+        animation_key = [:transition, @key, property]
+        if previous != value
+          from = cx.animator.value(animation_key, previous)
+          if Animation.interpolatable?(from, value)
+            cx.animator.animate(animation_key, from: from, to: value,
+              duration: @transition.duration, easing: @transition.easing)
+          else
+            cx.animator.cancel(animation_key)
+          end
+          state[:targets][property] = value
+        end
+        values[property] = cx.animator.value(animation_key, value)
+      end
+      values.empty? ? target : target.merge(**values)
+    end
+
+    def prepare_child_animations(cx)
+      keyed = @children.filter_map { |child| [child.identity_key, child] if child.respond_to?(:identity_key) && child.identity_key }
+      return if keyed.empty? && !@key && !@child_animation_state
+      identity = @key || object_id
+      state = cx.state([:children, identity]) { {previous: {}, departing: {}, initialized: false} }
+      @child_animation_state = state
+      current = keyed.to_h
+      duration = cx.theme.motion.duration_base
+      keyed.each do |key, child|
+        enter_key, move_key = [:enter, identity, key], [:move, identity, key]
+        if (departure = state[:departing].delete(key))
+          cx.animator.cancel([:exit, identity, key])
+          state[:previous][key] = departure.values_at(:child, :bounds)
+        end
+        previous = state[:previous][key]
+        if previous
+          old_bounds, new_bounds = previous.last, child.layout_node.bounds
+          if old_bounds.x != new_bounds.x || old_bounds.y != new_bounds.y
+            cx.animator.animate(move_key, from: 0.0, to: 1.0, duration: duration, easing: :ease_out)
+          end
+          progress = cx.animator.value(move_key, 1.0)
+          if progress < 1
+            child.paint_style(transform: Transform.translate((old_bounds.x - new_bounds.x) * (1 - progress), (old_bounds.y - new_bounds.y) * (1 - progress)))
+          end
+        elsif state[:initialized]
+          cx.animator.animate(enter_key, from: 0.0, to: 1.0, duration: duration, easing: :ease_out)
+          child.paint_style(opacity: cx.animator.value(enter_key, 1.0))
+        end
+      end
+      (state[:previous].keys - current.keys).each do |key|
+        child, old_bounds = state[:previous][key]
+        exit_key = [:exit, identity, key]
+        state[:departing][key] = {child: child, bounds: old_bounds}
+        cx.animator.animate(exit_key, from: 1.0, to: 0.0, duration: duration, easing: :ease_in) do
+          state[:departing].delete(key)
+        end
+      end
+      state[:previous] = keyed.to_h { |key, child| [key, [child, child.layout_node.bounds]] }
+      state[:initialized] = true
+      @departing_children = state[:departing].map do |key, departure|
+        [departure[:child], departure[:bounds], cx.animator.value([:exit, identity, key], 0.0)]
+      end
     end
   end
 end

data/lib/zaniah/frame_context.rb

@@ -2,13 +2,16 @@
 
 module Zaniah
   class FrameContext
-    attr_reader :window, :scene, :dispatcher, :text_system
+    attr_reader :window, :scene, :dispatcher, :text_system, :interactivity
 
     def initialize(window)
       @window, @scene = window, window.scene
       @dispatcher, @text_system = window.dispatcher, window.text_system
+      @interactivity = Interactivity.new
     end
 
     def state(key, &initial) = @window.element_state(key, &initial)
+    def theme = @window.app&.global(:theme) || Theme.dark
+    def animator = @window.animator
   end
 end

data/lib/zaniah/gpu/frame_encoder.rb

@@ -21,7 +21,16 @@ module Zaniah
             raise ArgumentError, "instance buffer too small" if values.length < instance_count * Scene::QUAD_STRIDE
             instance_count.times do |index|
               quad = values.slice(index * Scene::QUAD_STRIDE, Scene::QUAD_STRIDE)
-              @scene.quad(*quad.first(4), color: quad[4, 4], radius: quad[8, 4], border_width: quad[12], border_color: quad[13, 4])
+              color = if quad[24].zero?
+                quad[4, 4]
+              elsif quad[24] == 1
+                Gradient.linear(angle: quad[27], stops: [[quad[25], quad[4, 4]], [quad[26], quad[8, 4]]])
+              else
+                Gradient.radial(center: quad[28, 2], radius: quad[30], stops: [[quad[25], quad[4, 4]], [quad[26], quad[8, 4]]])
+              end
+              @scene.quad(*quad.first(4), color: color, radius: quad[12, 4],
+                border_width: Edges.new(*quad[20, 4]), border_color: quad[16, 4],
+                transform: Transform.new(*quad[32, 6]), border_style: quad[39] == 1 ? :dashed : :solid)
             end
           elsif [:mono_sprite, :poly_sprite].include?(@pipeline.shader)
             raise ArgumentError, "instance buffer too small" if values.length < instance_count * 12

data/lib/zaniah/gpu/instance_packing.rb

@@ -4,8 +4,11 @@ module Zaniah
   module GPU
     # Consecutive commands only are batched, preserving alpha and layer order.
     module InstancePacking
-      STRIDE = 24
+      STRIDE = 40
       def self.pack(scene)
+        packed = pack_quads(scene)
+        return packed if packed
+
         data, batches, bytes = [], [], "".b
         scene.each_command do |kind, offset, clip|
           texture = nil
@@ -15,14 +18,19 @@ module Zaniah
           when :quad
             q, i = scene.quads, offset
             data.push(q[i], q[i+1], q[i+2], q[i+3], q[i+4], q[i+5], q[i+6], q[i+7],
-              q[i+8], q[i+9], q[i+10], q[i+11], q[i+13], q[i+14], q[i+15], q[i+16], q[i+12], 0, 0, 0, 0, 0, 0, 0)
+              q[i+8], q[i+9], q[i+10], q[i+11], q[i+12], q[i+13], q[i+14], q[i+15],
+              q[i+16], q[i+17], q[i+18], q[i+19], q[i+20], q[i+21], q[i+22], q[i+23],
+              q[i+24], q[i+25], q[i+26], q[i+27], q[i+28], q[i+29], q[i+30], q[i+31],
+              q[i+32], q[i+33], q[i+34], q[i+35], q[i+36], q[i+37], q[i+38], q[i+39])
           when :sprite
             s, i = scene.sprite_data, offset
             texture = scene.textures.fetch(s[i+8])
             data.push(s[i], s[i+1], s[i+2], s[i+3], s[i+4], s[i+5], s[i+6], s[i+7],
-              0, 0, 0, 0, 0, 0, 0, 0, 0, texture.format == :r8 ? 1 : 2, 0, 0,
+              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
               s[i+9].to_f / texture.width, s[i+10].to_f / texture.height,
-              s[i+11].to_f / texture.width, s[i+12].to_f / texture.height)
+              s[i+11].to_f / texture.width, s[i+12].to_f / texture.height,
+              0, 0, 0, 0, 0, 0, 0, texture.format == :r8 ? 1 : 2,
+              *scene.sprite_transform(i).to_a, 0, 0)
           when :sprite_batch
             unless data.empty?
               bytes << data.pack("f*")
@@ -35,7 +43,9 @@ module Zaniah
           when :triangle
             p, i = scene.paths, offset
             data.push(p[i], p[i+1], p[i+2], p[i+3], p[i+6], p[i+7], p[i+8], p[i+9],
-              p[i+4], p[i+5], 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0)
+              0, 0, 0, 0, p[i+4], p[i+5], 0, 0, 0, 0, 0, 0,
+              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3,
+              p[i+10], p[i+11], p[i+12], p[i+13], p[i+14], p[i+15], 0, 0)
           else raise ArgumentError, "unsupported primitive #{kind}"
           end
           previous = batches.last&.first
@@ -48,6 +58,24 @@ module Zaniah
         bytes << data.pack("f*") unless data.empty?
         [bytes, batches]
       end
+
+      def self.pack_quads(scene)
+        batches = []
+        expected = 0
+        scene.each_command do |kind, offset, clip|
+          return unless kind == :quad && offset == expected
+          if batches.empty? || batches.last[0][2] != clip
+            batches << [[:quad, nil, clip], expected / STRIDE, 1]
+          else
+            batches.last[2] += 1
+          end
+          expected += STRIDE
+        end
+        bytes = scene.__send__(:packed_quad_bytes)
+        return unless bytes && expected * 4 == bytes.bytesize
+        [bytes, batches]
+      end
+      private_class_method :pack_quads
     end
   end
 end

data/lib/zaniah/gpu/metal.rb

@@ -19,35 +19,51 @@ module Zaniah
         #include <metal_stdlib>
         using namespace metal;
         struct Vertex { float4 position [[position]]; float2 local; float2 size;
-          float4 color; float4 radii; float4 border; float4 info; float2 uv; };
+          float4 color; float4 secondary; float4 radii; float4 border; float4 widths;
+          float4 gradient; float4 center_kind; float2 uv; float dash; };
         vertex Vertex zaniah_vertex(uint v [[vertex_id]], uint instance [[instance_id]],
             const device float *data [[buffer(0)]], constant float2 &viewport [[buffer(1)]]) {
-          const device float *p = data + instance * 24;
+          const device float *p = data + instance * 40;
           float2 corners[4] = {float2(0,0),float2(1,0),float2(0,1),float2(1,1)};
           float2 corner = corners[v], size = float2(p[2],p[3]);
           float2 position = float2(p[0],p[1]) + corner * size;
-          if (p[17] == 3) position = v == 0 ? float2(p[0],p[1]) : v == 1 ? float2(p[2],p[3]) : float2(p[8],p[9]);
+          if (p[31] == 3) position = v == 0 ? float2(p[0],p[1]) : v == 1 ? float2(p[2],p[3]) : float2(p[12],p[13]);
+          position = float2(p[32] * position.x + p[34] * position.y + p[36],
+                            p[33] * position.x + p[35] * position.y + p[37]);
           Vertex out;
           out.position = float4(position.x / viewport.x * 2 - 1, 1 - position.y / viewport.y * 2, 0, 1);
           out.local = corner * size; out.size = size;
-          out.color = float4(p[4],p[5],p[6],p[7]); out.radii = float4(p[8],p[9],p[10],p[11]);
-          out.border = float4(p[12],p[13],p[14],p[15]); out.info = float4(p[16],p[17],p[18],p[19]);
-          out.uv = float2(p[20],p[21]) + corner * float2(p[22],p[23]); return out;
+          out.color = float4(p[4],p[5],p[6],p[7]); out.secondary = float4(p[8],p[9],p[10],p[11]);
+          out.radii = float4(p[12],p[13],p[14],p[15]); out.border = float4(p[16],p[17],p[18],p[19]);
+          out.widths = float4(p[20],p[21],p[22],p[23]); out.gradient = float4(p[24],p[25],p[26],p[27]);
+          out.center_kind = float4(p[28],p[29],p[30],p[31]);
+          out.uv = float2(p[20],p[21]) + corner * float2(p[22],p[23]); out.dash = p[39]; return out;
         }
         fragment float4 zaniah_fragment(Vertex in [[stage_in]], texture2d<float> atlas [[texture(0)]]) {
           float4 color = in.color;
-          if (in.info.y == 0) {
+          if (in.center_kind.w == 0) {
+            if (in.gradient.x > 0) {
+              float2 normalized = in.local / in.size;
+              float raw = in.gradient.x == 1
+                ? dot(normalized - 0.5f, float2(cos(in.gradient.w * 0.01745329252f), sin(in.gradient.w * 0.01745329252f))) + 0.5f
+                : length(normalized - in.center_kind.xy) / in.center_kind.z;
+              color = mix(in.color, in.secondary, clamp((raw - in.gradient.y) / max(in.gradient.z - in.gradient.y, 0.000001f), 0.0f, 1.0f));
+            }
             float radius = in.local.y < in.size.y/2 ? (in.local.x < in.size.x/2 ? in.radii.x : in.radii.y) : (in.local.x < in.size.x/2 ? in.radii.w : in.radii.z);
             radius = clamp(radius, 0.0f, min(in.size.x,in.size.y)/2);
             float2 q = abs(in.local - in.size/2) - in.size/2 + radius;
             float distance = length(max(q,0.0f)) + min(max(q.x,q.y),0.0f) - radius;
             float coverage = clamp(0.5f - distance, 0.0f, 1.0f);
-            if (in.info.x > 0 && distance >= -in.info.x) color = in.border;
+            float4 edge_distance = float4(in.local.y, in.size.x-in.local.x, in.size.y-in.local.y, in.local.x);
+            float edge = min(min(edge_distance.x,edge_distance.y),min(edge_distance.z,edge_distance.w));
+            float border_width = edge == edge_distance.x ? in.widths.x : edge == edge_distance.y ? in.widths.y : edge == edge_distance.z ? in.widths.z : in.widths.w;
+            float coordinate = edge == edge_distance.x || edge == edge_distance.z ? in.local.x : in.local.y;
+            if (border_width > 0 && distance >= -border_width && !(in.dash == 1 && fmod(coordinate,6.0f) >= 3.0f)) color = in.border;
             color.a *= coverage;
-          } else if (in.info.y == 1 || in.info.y == 2) {
+          } else if (in.center_kind.w == 1 || in.center_kind.w == 2) {
             constexpr sampler texture_sampler(coord::normalized, address::clamp_to_edge, filter::nearest);
             float4 sample = atlas.sample(texture_sampler,in.uv);
-            if (in.info.y == 1) color.a *= sample.r; else color *= sample;
+            if (in.center_kind.w == 1) color.a *= sample.r; else color *= sample;
           }
           return float4(color.rgb * color.a, color.a);
         }