-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Add branch drawing symbols to box characters #7681
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
Conversation
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.
β¦rawing commit graph in vim-flog Ref: kovidgoyal/kitty#7681
addresses ghostty-org#2561 - adds support for most Git branch drawing characters as specified in  except for fading vertical and horizontal lines. Adds git_draw_node function and a new Git node type. Add this range (0xf5d0...0xf60d) for Git branch characters, to tests. adds vline_middle_xy and hline_middle_xy for node connections. add git characters to Face.zig.
Do you mean characters that draw lines "jumping" over perpendicular lines, or something else? If the jumping characters are what you're looking for, it's been discussed. I personally have nothing against it, but I also have no desire to implement it or use it if it is implemented, and no other terminal branch viewer authors showed interest in using them either. The only reason that they were not implemented anyways is that it is a somewhat geometrically complex shape to program, requiring a straight line transitioning smoothly into a circular arc, and is especially difficult to get right on smaller font sizes. |
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:
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:
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:
These symbols represent forking out from an existing branch to the right or left:
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):
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:
A branch "fading out" - used to represent branches that don't have any more parents in the otuput:
Merge commits and non-merge commits; disconnected, connected on one side, and connected on both sides:
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:
Here is the unused range in a Nerd font:
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
draw_hline
anddraw_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).