nandi/jolt-native · paint.rs

⑂ c2d912f670b7a2e5808970d17cecf51c6c87cfbf
paint.rs · 571 lines · 22.8 KBRust    Blame HistoryRaw
Paint the same tree into a terminal, for the machines with no window   1//! Drawing the tree into a grid of cells.
3//! One pass, top to bottom: each node is handed a rect by [`crate::layout`] and
4//! paints itself into it. Two things fall out of the walk and are kept —
5//! the focus ring, in the order the widgets were painted, and every focusable
6//! widget's rect, so a mouse click can be turned back into a node.
8//! Overlays are collected rather than drawn in place: a floating panel belongs
9//! over the whole screen, so it is painted after everything else at the size it
10//! asked for, in the middle.
12use crate::layout::{self, wrap, Align};
Draw a picture in a terminal, over the Kitty graphics protocol   13use crate::graphics;
Paint a reaction, and give an emoji the two columns it takes   14use crate::screen::{self, attr, Color, Rect, Screen, Style};
Paint the same tree into a terminal, for the machines with no window   15use crate::tree::{Props, Tag, Tree};
17const SPINNER: [char; 8] = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧'];
19/// What one frame of painting learned about the tree, for the input half to
20/// use on the next key or click.
21#[derive(Clone, Debug, Default)]
22pub struct Painted {
  /// Focusable nodes in paint order — the order Tab walks.
  pub ring: Vec<u32>,
  /// Where each of them ended up.
  pub hits: Vec<(u32, Rect)>,
  /// How far each scroll node's viewport actually was, after clamping to the
  /// content it had. Written back so a caller cannot scroll past the end.
Let a backlog keep its place, and leave room for what is under it   29    /// Each `:scroll` painted, as (node, the offset it was painted at, the
Scroll the list under the pointer, and from where it actually is   30    /// furthest it could have been, and the area it was painted into). The
  /// second number is what tells a caller whether it is at the bottom, which
  /// is what sticking to it means; the rect is what a wheel is aimed at.
  pub scrolled: Vec<(u32, u16, u16, Rect)>,
Paint the same tree into a terminal, for the machines with no window   34    /// Where the cursor should sit — the focused entry's caret, if any.
  pub cursor: Option<(u16, u16)>,
Draw a picture in a terminal, over the Kitty graphics protocol   36    /// The pictures this frame wants on screen, in the cells they were given.
  /// Nothing was painted for them: the grid has no pixels, and the terminal
  /// is what draws one — see [`crate::graphics`].
  pub images: Vec<graphics::Placement>,
Paint the same tree into a terminal, for the machines with no window   40
42struct Painter<'a> {
  tree: &'a Tree,
  screen: &'a mut Screen,
  focus: u32,
  /// Where the caret sits in the focused entry's text, in characters.
  caret: usize,
  tick: u64,
  out: Painted,
  overlays: Vec<u32>,
53/// Paint the whole tree. `focus` is the node the ring is currently on and
54/// `tick` advances the spinners.
55pub fn frame(tree: &Tree, screen: &mut Screen, focus: u32, caret: usize, tick: u64) -> Painted {
  screen.clear();
  let mut painter = Painter {
      tree,
      screen,
      focus,
      caret,
      tick,
      out: Painted::default(),
      overlays: Vec::new(),
  let area = painter.screen.rect();
  painter.node(tree.root(), area, Style::default(), true);
  // Overlays float above the rest, so they are painted after it — and a
  // click landing on one must beat a click on whatever it covers, which is
  // what putting their hit rects first does.
  let overlays = std::mem::take(&mut painter.overlays);
  let below = std::mem::take(&mut painter.out.hits);
  for id in overlays {
      painter.overlay(id, area);
  painter.out.hits.extend(below);
  painter.out
81impl Painter<'_> {
  fn style_for(&self, props: &Props, inherited: Style, enabled: bool) -> Style {
      let mut style = inherited;
      if let Some(fg) = Color::parse(props.str("color")) {
          style.fg = fg;
      if let Some(bg) = Color::parse(props.str("bg")) {
          style.bg = bg;
      for (key, bit) in [
          ("bold", attr::BOLD),
          ("dim", attr::DIM),
          ("underline", attr::UNDERLINE),
          ("reverse", attr::REVERSE),
          ("blink", attr::BLINK),
          ("italic", attr::ITALIC),
          if props.bool(key, false) {
              style.attrs |= bit;
      if !enabled {
          // `:sensitive false` dims the widget *and its whole subtree*, which
          // is what it means in every other glimmer backend.
          style.attrs |= attr::DIM;
      style
  fn node(&mut self, id: u32, area: Rect, inherited: Style, enabled: bool) {
      if area.is_empty() || !self.tree.exists(id) {
          return;
      let tag = self.tree.tag(id);
      let props = self.tree.props(id);
      let enabled = enabled && props.bool("sensitive", true);
      let style = self.style_for(&props, inherited, enabled);
      if props.has("bg") {
          self.screen.fill(area, style);
      if enabled && tag.focusable() {
          self.out.ring.push(id);
          self.out.hits.push((id, area));
      let pad = layout::inset(&tag, &props);
      let inner = area.shrink(pad);
      match tag {
          Tag::Overlay => self.overlays.push(id),
          Tag::Frame => {
              self.border(area, props.label(), style);
              self.children(id, inner, style, enabled);
          Tag::Scroll => self.scroll(id, inner, style, enabled),
Share a column's rows out at the width it has, not at its own height   135            Tag::Box | Tag::Window => self.children(id, inner, style, enabled),
          // A tag this backend has not learned paints as a vertical box, so
          // whatever is under it still reaches the screen. When there is
          // nothing under it, its own text does instead: an unknown *leaf*
          // is a widget the caller has and this has not — frq's `:status`
          // badge, its `:link` — and painting the box and not the label is
          // the one outcome that loses the text altogether. A link vanishing
          // out of the middle of a message is not a missing widget; it is a
          // missing sentence.
          Tag::Unknown(_) => {
Let a backlog keep its place, and leave room for what is under it   145                if self.tree.child_count(id) == 0 && !props.has("src") && !props.has("feed") {
Share a column's rows out at the width it has, not at its own height   146                    self.wrapped(inner, props.label(), style);
              } else {
                  self.children(id, inner, style, enabled);
Paint the same tree into a terminal, for the machines with no window   151            Tag::Label => self.wrapped(inner, props.label(), style),
          Tag::Title => self.wrapped(inner, props.label(), style.with(attr::BOLD)),
          Tag::DimLabel => self.wrapped(inner, props.label(), style.with(attr::DIM)),
          Tag::Button => self.button(id, inner, &props, style),
          Tag::CheckButton => self.check(id, inner, &props, style),
          Tag::Entry => self.entry(id, inner, &props, style),
          Tag::Separator => self.separator(inner, style),
          Tag::Progress => self.progress(inner, &props, style),
          Tag::Spinner => {
              let ch = SPINNER[(self.tick as usize) % SPINNER.len()];
              self.screen.set(inner.x, inner.y, ch, style);
Draw a picture in a terminal, over the Kitty graphics protocol   163            Tag::Image => self.image(id, inner, &props, style),
Paint a reaction, and give an emoji the two columns it takes   164            Tag::Reaction => self.reaction(id, inner, &props, style),
          // The same glyph with nothing around it: a character in a line,
          // and the line is what says anything about it.
          Tag::Emoji => {
              self.screen
                  .text(inner.x, inner.y, inner.w, props.str("emoji"), style);
Paint the same tree into a terminal, for the machines with no window   171            Tag::Listbox => self.listbox(id, inner, &props, style, enabled),
          // A spacer is the absence of anything; the clear at the top of the
          // frame has already drawn it.
          Tag::Spacer => {}
  fn children(&mut self, id: u32, area: Rect, style: Style, enabled: bool) {
      if area.is_empty() {
          return;
      let rects = layout::children_rects(self.tree, id, area);
      for (child, rect) in self.tree.children(id).into_iter().zip(rects) {
          // Clip to the parent: a child asking for more rows than are left
          // paints what fits rather than over its neighbours.
          let bottom = area.y.saturating_add(area.h);
          let right = area.x.saturating_add(area.w);
          if rect.y >= bottom || rect.x >= right {
              continue;
          let clipped = Rect::new(
              rect.x,
              rect.y,
              rect.w.min(right - rect.x),
              rect.h.min(bottom - rect.y),
          self.node(child, clipped, style, enabled);
  fn wrapped(&mut self, area: Rect, text: &str, style: Style) {
      for (i, line) in wrap(text, area.w).into_iter().enumerate() {
          if i as u16 >= area.h {
              break;
          self.screen
              .text(area.x, area.y + i as u16, area.w, &line, style);
  fn focused(&self, id: u32) -> bool {
      self.focus == id
  fn button(&mut self, id: u32, area: Rect, props: &Props, style: Style) {
      let mut style = match props.str("kind") {
          "primary" => style.with(attr::BOLD),
          "destructive" => style.fg(Color::parse("red").unwrap_or_default()),
          _ => style,
      if self.focused(id) {
          style = style.with(attr::REVERSE);
      let label = format!("[ {} ]", props.label());
      self.screen.text(area.x, area.y, area.w, &label, style);
Draw a picture in a terminal, over the Kitty graphics protocol   228    /// A picture: the cells it was given, and a note of where they are.
  /// Nothing goes in them. The terminal draws the picture over the blank
  /// cells when the frame is flushed, which is the only way pixels reach a
  /// grid; where there is no protocol for that, the cells carry the note
  /// that says a picture is here, and the link above it is the way to it.
  fn image(&mut self, id: u32, area: Rect, props: &Props, style: Style) {
      let path = props.str("src");
      if path.is_empty() || area.is_empty() {
          return;
      if !graphics::supported() {
          self.screen
              .text(area.x, area.y, area.w, layout::PICTURE, style.with(attr::DIM));
          return;
      // The column hands a child its whole width; a picture takes only what
      // its shape asks for out of that, so the placement is the picture and
      // not the room around it.
      let (cols, rows) = layout::image_cells(props, area.w);
      let area = Rect::new(area.x, area.y, cols.min(area.w), rows.min(area.h));
      if area.is_empty() {
          return;
      self.out.images.push(graphics::Placement {
          node: id,
          path: path.to_owned(),
          area,
          crop_top: 0,
          crop_bottom: 0,
      });
Paint a reaction, and give an emoji the two columns it takes   261    /// A reaction pill: the glyph, the tally where there is one, and whether
  /// you are on it.
  /// No border around it. A window draws a lozenge because it has half-cells
  /// to draw one in; here brackets would cost two columns of a row that
  /// already carries three chips, and would say "button" about a thing whose
  /// whole picture is the glyph. Yours is bold, which is the one bit of the
  /// pill a reader actually reads off it.
  fn reaction(&mut self, id: u32, area: Rect, props: &Props, style: Style) {
      let mut style = if props.bool("mine", false) {
          style.with(attr::BOLD)
      } else {
          style
      if self.focused(id) {
          style = style.with(attr::REVERSE);
      self.screen
          .text(area.x, area.y, area.w, &layout::pill_text(props), style);
Paint the same tree into a terminal, for the machines with no window   282    fn check(&mut self, id: u32, area: Rect, props: &Props, style: Style) {
      let style = if self.focused(id) {
          style.with(attr::REVERSE)
      } else {
          style
      let mark = if props.bool("active", false) {
      } else {
      let label = format!("[{mark}] {}", props.label());
      self.screen.text(area.x, area.y, area.w, &label, style);
  fn entry(&mut self, id: u32, area: Rect, props: &Props, style: Style) {
      let focused = self.focused(id);
      let text = props.str("text");
      let showing_placeholder = text.is_empty();
      let shown = layout::entry_text(props);
      let mut style = style.with(attr::UNDERLINE);
      if showing_placeholder {
          style = style.with(attr::DIM);
      if focused {
          style = style.with(attr::REVERSE);
      // The field is its whole rect, not just the text in it: a reader needs
      // to see where it can type before it has typed anything.
      self.screen.fill(area, style);
      let rows = area.h.max(1);
      let lines = if props.cells("rows", 1) > 1 {
          wrap(&shown, area.w)
      } else {
          vec![shown.chars().collect::<String>()]
      let caret = self.caret.min(text.chars().count());
      // A line longer than the field scrolls sideways to keep the caret in
      // view — the end of it is where someone is usually typing, but not
      // always, so it follows the caret rather than the end.
      for (i, line) in lines.iter().take(rows as usize).enumerate() {
          let len = line.chars().count();
          let last = i + 1 == lines.len().min(rows as usize);
          let window = area.w.saturating_sub(1).max(1) as usize;
          let from = if last && !showing_placeholder {
              caret.saturating_sub(window)
          } else {
              len.saturating_sub(window)
          let visible: String = line.chars().skip(from).collect();
          self.screen
              .text(area.x, area.y + i as u16, area.w, &visible, style);
          if focused && last {
Paint a reaction, and give an emoji the two columns it takes   335                // In columns rather than characters: an emoji typed into the
              // line is two cells wide, and a caret counted in characters
              // sits a column left of the text for each one.
Paint the same tree into a terminal, for the machines with no window   338                let col = if showing_placeholder {
              } else {
Paint a reaction, and give an emoji the two columns it takes   341                    let typed: String = visible
                      .chars()
                      .take(caret.saturating_sub(from))
                      .collect();
                  (screen::text_cols(&typed)).min(area.w.saturating_sub(1))
Paint the same tree into a terminal, for the machines with no window   346
Paint a reaction, and give an emoji the two columns it takes   347                self.out.cursor = Some((area.x.saturating_add(col), area.y + i as u16));
Paint the same tree into a terminal, for the machines with no window   348
  fn separator(&mut self, area: Rect, style: Style) {
      for x in area.x..area.x.saturating_add(area.w) {
          self.screen.set(x, area.y, '─', style);
  fn progress(&mut self, area: Rect, props: &Props, style: Style) {
      let value = props.num("value", 0.0).clamp(0.0, 1.0);
      let filled = (value * area.w as f64).round() as u16;
      for x in 0..area.w {
          let ch = if x < filled { '█' } else { '░' };
          self.screen.set(area.x + x, area.y, ch, style);
      let label = props.label();
      if !label.is_empty() {
          let at = area.x + (area.w.saturating_sub(label.chars().count() as u16)) / 2;
          self.screen.text(at, area.y, area.w, label, style);
  fn listbox(&mut self, id: u32, area: Rect, props: &Props, style: Style, enabled: bool) {
      let items = self.tree.children(id);
      // No `:selected` at all means the cursor is on the first row: a list
      // with no cursor cannot be moved with the arrows, and a caller that
      // wants none says so with -1.
      let selected = props.num("selected", 0.0);
      let selected = if selected < 0.0 {
          None
      } else {
          Some(selected as usize)
      // Keep the cursor on screen: scroll only as far as it takes.
      let rows = area.h as usize;
      let first = match selected {
          Some(sel) if rows > 0 && sel >= rows => sel + 1 - rows,
      for (row, item) in items.iter().skip(first).take(rows).enumerate() {
          let y = area.y + row as u16;
          let chosen = selected == Some(first + row);
          let mut row_style = style;
          if chosen {
              row_style = row_style.with(if self.focused(id) {
                  attr::REVERSE
              } else {
                  attr::BOLD
              self.screen.fill(Rect::new(area.x, y, area.w, 1), row_style);
          let marker = if chosen { "› " } else { "  " };
          self.screen.text(area.x, y, area.w, marker, row_style);
          let cell = Rect::new(area.x + 2, y, area.w.saturating_sub(2), 1);
          self.node(*item, cell, row_style, enabled);
  fn scroll(&mut self, id: u32, area: Rect, style: Style, enabled: bool) {
      let props = self.tree.props(id);
      // The content is painted at its full height into a screen of its own,
      // then the visible window of it is copied across. Doing it this way
      // means every widget inside a scroll paints exactly as it would
      // outside one — nothing has to know it is being clipped.
      let content_h = self
          .tree
          .children(id)
          .iter()
          .map(|c| layout::height_for_width(self.tree, *c, area.w))
          .sum::<u16>()
          .max(1);
      let max_offset = content_h.saturating_sub(area.h);
      let offset = props.cells("offset", 0).min(max_offset);
Scroll the list under the pointer, and from where it actually is   423        self.out.scrolled.push((id, offset, max_offset, area));
Paint the same tree into a terminal, for the machines with no window   424
      let mut buffer = Screen::new(area.w, content_h);
      let mut inner = Painter {
          tree: self.tree,
          screen: &mut buffer,
          focus: self.focus,
          caret: self.caret,
          tick: self.tick,
          out: Painted::default(),
          overlays: Vec::new(),
      let full = Rect::new(0, 0, area.w, content_h);
      inner.children(id, full, style, enabled);
      let learned = inner.out;
      for y in 0..area.h {
          for x in 0..area.w {
              if let Some(cell) = buffer.cell(x, y + offset) {
Keep a glyph whole, selector and all, and copy it across whole   442                    self.screen.put(area.x + x, area.y + y, cell.clone());
Paint the same tree into a terminal, for the machines with no window   443
      // Widgets inside keep their place in the focus ring; their rects move
      // by the viewport, and the ones scrolled out of sight take no clicks.
      self.out.ring.extend(learned.ring);
      for (node, rect) in learned.hits {
          if rect.y >= offset && rect.y < offset.saturating_add(area.h) {
              self.out.hits.push((
                  Rect::new(
                      area.x + rect.x,
                      area.y + rect.y - offset,
                      rect.w,
                      rect.h.min(area.h),
Scroll the list under the pointer, and from where it actually is   462        // A scroll inside this one was painted into the buffer, so its area is
      // in the buffer's coordinates: move it the way the hits above moved,
      // and drop the ones the viewport is not showing. A wheel over a nested
      // list has to land on the list under the pointer, and a rect left in
      // the wrong space is a wheel aimed at whatever happens to be there.
Draw a picture in a terminal, over the Kitty graphics protocol   467        // A picture inside a scroll moves with it, and is cut off by the
      // viewport rather than painted over what is above or below: the
      // protocol crops from the source, so a backlog scrolls past a picture
      // a row at a time instead of losing it whole at the edge.
      let bottom = offset.saturating_add(area.h);
      for mut placement in learned.images {
          let top = placement.area.y;
          let foot = top.saturating_add(placement.area.h);
          let seen_top = top.max(offset);
          let seen_foot = foot.min(bottom);
          if seen_foot <= seen_top {
              continue;
          placement.crop_top += seen_top - top;
          placement.crop_bottom += foot - seen_foot;
          placement.area = Rect::new(
              area.x + placement.area.x,
              area.y + seen_top - offset,
              placement.area.w,
              seen_foot - seen_top,
          self.out.images.push(placement);
Scroll the list under the pointer, and from where it actually is   490        for (node, inner_offset, max, rect) in learned.scrolled {
          if rect.y >= offset && rect.y < offset.saturating_add(area.h) {
              self.out.scrolled.push((
                  inner_offset,
                  Rect::new(
                      area.x + rect.x,
                      area.y + rect.y - offset,
                      rect.w,
                      rect.h.min(area.h),
Paint the same tree into a terminal, for the machines with no window   505        if let Some((cx, cy)) = learned.cursor {
          if cy >= offset && cy < offset.saturating_add(area.h) {
              self.out.cursor = Some((area.x + cx, area.y + cy - offset));
  fn overlay(&mut self, id: u32, screen: Rect) {
      let props = self.tree.props(id);
      let w = layout::width(self.tree, id, false).min(screen.w);
      let h = layout::height_for_width(self.tree, id, w).min(screen.h);
      let (x, y) = (
          screen.x + Align::Center.offset_pub(w, screen.w),
          screen.y + Align::Center.offset_pub(h, screen.h),
      let area = Rect::new(x, y, w, h);
      let style = self.style_for(&props, Style::default(), true);
      // Blank what is under it: a floating panel that shows the screen
      // through its gaps is unreadable.
      for row in area.y..area.y + area.h {
          for col in area.x..area.x + area.w {
              self.screen.set(col, row, ' ', style);
      self.border(area, props.label(), style);
      let pad = layout::inset(&Tag::Overlay, &props);
      self.children(id, area.shrink(pad), style, true);
  /// A single-line box, with `label` set into the top edge when there is one.
  fn border(&mut self, area: Rect, label: &str, style: Style) {
      if area.w < 2 || area.h < 2 {
          return;
      let (x1, y1) = (area.x + area.w - 1, area.y + area.h - 1);
      for x in area.x..=x1 {
          self.screen.set(x, area.y, '─', style);
          self.screen.set(x, y1, '─', style);
      for y in area.y..=y1 {
          self.screen.set(area.x, y, '│', style);
          self.screen.set(x1, y, '│', style);
      self.screen.set(area.x, area.y, '┌', style);
      self.screen.set(x1, area.y, '┐', style);
      self.screen.set(area.x, y1, '└', style);
      self.screen.set(x1, y1, '┘', style);
      if !label.is_empty() && area.w > 4 {
          let text = format!(" {label} ");
          self.screen.text(
              area.x + 1,
              area.y,
              area.w - 2,
              &text,
              style.with(attr::BOLD),
565impl Align {
  /// [`Align::offset`] is private to the layout module; overlays are the one
  /// caller outside it that centres something by hand.
  fn offset_pub(self, size: u16, avail: u16) -> u16 {
      layout::place(self, size, avail).0