Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add branch drawing symbols to box characters #7681

Merged
merged 1 commit into from
Jul 31, 2024

Conversation

rbong
Copy link
Contributor

@rbong rbong commented Jul 31, 2024

This symbols are for drawing git-like directed acyclic graphs in the terminal. Similar to box drawing characters, it is difficult to align these symbols perfectly when they're implemented only as font glyphs.

These codes are not based on any existing standard. I have implemented them using my experience creating the terminal-based branch viewer and vim plugin vim-flog. I plan to use these symbols in flog.

Here is what the symbols look like in kitty, in order:

kitty-syms

Symbol order

The order is similar to the original box-drawing characters. Particularly, where there are symbols with a mix of light lines and heavy lines, I replace the heavy lines with curves. Otherwise, I try to follow a similar order.

Symbol purposes

Some symbols effectively already exist, these ones in particular:

existing-syms

Providing these symbols and not relying on the existing box symbols allows customizing line thickness and style only for branch viewers and not anything else that uses box drawing characters. This is not really required if we consider this unicode range only for a terminal that draws box drawing characters, but as a general standard symbol range I think it's good to have.

These symbols represent merging up into an existing branch from the right or left:

merge up

These symbols represent forking out from an existing branch to the right or left:

fork-out

These symbols are for merges; merging into an ongoing merge line from the right or left; merging up from the right and left into a new branch above; merging up from the right and left into an existing branch (note the vertical alignment here is not as shown, see the first screenshot of all symbols for the actual alignment):

octopus

A very particular, somewhat confusing situation, but possible while trying to preserve horizontal space; merge from the left while reordering the parent to the right under the branch:

merge-and-rearrange

A branch "fading out" - used to represent branches that don't have any more parents in the otuput:

fade

Merge commits and non-merge commits; disconnected, connected on one side, and connected on both sides:

commts

You might notice that the commit is not perfectly centered on the line. It does not look like this on every font size. This is because the line is aligned with non-supersampled lines, but the circles themselves are supersampled.

The symbols I detailed above are all the symbols you need to represent the typical left-aligned, top-to bottom git commit graph visualization. However, since this is meant to be a general standard, I have included symbols for aligning the graph in any other direction.

Range selection

I selected a range (0xf5d0 - 0xf5fb) in a Unicode Private Use Area that is a reasonable distance from the previous icon set in Nerd icons.

This range is not in use by Fira Code or Nerd Fonts or any other icon/symbol set I could find.

Here is the unused range in Fira Code as visualized in FontForge:

fira-code

Here is the unused range in a Nerd font:

nerd

New Code

  • Added functions to draw branches fading out. I tried to apply the existing "hole" functions for this purpose, or at least implement similar functions, but it was much easier to draw only the solid part of these symbols rather than cutting out the holes. This is because they look best when they are symmetrical with their mirror images, not touching the side that they are fading out towards, and touching the side that they are fading out from. The existing hole functions were not ideal for expressing any of these properties, at least in a way I could find, even though you can fairly easily achieve similar spacing.

  • Added a function for drawing circles. I could not find a great way to use any of the existing circular functions to create filled in circles; and at very small font sizes, these generate what look like rounded squares, not circles. In addition, it was easier to cut out the center of the center of non-merge commits than to draw tiny lines in the correct position in a way that works in every font size, and it looks more visually consistent than drawing arcs as well, so the circle function is used to both fill in and cut out circles.

Code Changes

  • Added the ability to account for supersample_factor in draw_hline and draw_vline. This is because of the number of lines I needed to draw in supersampled functions that had to line up with non-supersampled lines (namely commits and fading branches).

This symbols are for drawing git-like directed acyclic graphs in the
terminal. Similar to box drawing characters, it is difficult to align
these symbols perfectly as font glyphs.
@kovidgoyal kovidgoyal merged commit 5166915 into kovidgoyal:master Jul 31, 2024
8 of 9 checks passed
rockyzhang24 added a commit to rockyzhang24/dotfiles that referenced this pull request Aug 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants