Skip to content

Commit

Permalink
fix markersniffen image links and brace
Browse files Browse the repository at this point in the history
  • Loading branch information
Skytrias committed May 27, 2024
1 parent 9f56183 commit f4307a8
Showing 1 changed file with 8 additions and 9 deletions.
17 changes: 8 additions & 9 deletions content/news/2024-06.md
Original file line number Diff line number Diff line change
Expand Up @@ -277,12 +277,11 @@ edit_text :: proc(name: []any, text:^string) -> Box_Ops {
}
```

<video class="ratio ratio-16x9 mb-1 rounded" controls src="images/news/2024-06-codin_edit_text.mp4"></video>
<video class="ratio ratio-16x9 mb-1 rounded" controls src="/images/news/2024-06-codin_edit_text.mp4"></video>

But in codin we need to edit multiple lines of text, so why don't we just put that widget into another one:
```
edit_multiline :: proc(name: []any, lines:^[dynamic]string) -> Box_Ops {
{
for line in lines {
edit_text(name, line)
}
Expand All @@ -291,11 +290,11 @@ edit_multiline :: proc(name: []any, lines:^[dynamic]string) -> Box_Ops {

That, as the name suggests, lets you edit a chunk of text that is composed of multiple lines. But what we have more lines than fill the screen? My library has a `scrollbox()` widget that scales to fit it's children and adds bars you can grab to slide it up and down:

<video class="ratio ratio-16x9 mb-1 rounded" controls src="images/news/2024-06-codin_scrollbox.mp4"></video>
<video class="ratio ratio-16x9 mb-1 rounded" controls src="/images/news/2024-06-codin_scrollbox.mp4"></video>

The problem with this approach is that if you have a large text file, there are potentially hundreds or thousands of lines of text that are offscreen and do not need boxes created for them. That wastes a lot of cycles on invisible content. I adjusted the demo so that you could see the offscreen boxes outlined in blue:

<video class="ratio ratio-16x9 mb-1 rounded" controls src="images/news/2024-06-codin_too-many-boxes.mp4"></video>
<video class="ratio ratio-16x9 mb-1 rounded" controls src="/images/news/2024-06-codin_too-many-boxes.mp4"></video>

My solution to this problem was to only create boxes for visible lines of text. However, this breaks the scrollbox - the scrollbox needs a full set of children to determine the proper height for it's own box. What I needed to do was create a spacer box before the visible boxes to account for the offscreen boxes that are no longer created, and *also* manually calculate the height of the scrollbox, since we don't have the children boxes that appear *after* the last visible line:
- First calculate the number of visible rows
Expand Down Expand Up @@ -328,7 +327,7 @@ edit_multiline :: proc(...) {
```
And now we only create and calculate the number of boxes that would be visible:

<video class="ratio ratio-16x9 mb-1 rounded" controls src="images/news/2024-06-codin_good-boxes.mp4"></video>
<video class="ratio ratio-16x9 mb-1 rounded" controls src="/images/news/2024-06-codin_good-boxes.mp4"></video>

Now that we are drawing the lines, how do we know which line our cursor is on? We get the cursor position as an input, so let's compare that to the box indices, and when they are equal we can draw a border around it:

Expand All @@ -351,7 +350,7 @@ edit_multiline :: proc(..., cursor:^Txt_Pt, ...)
}
```

<video class="ratio ratio-16x9 mb-1 rounded" controls src="images/news/2024-06-codin_line-highlighting.mp4"></video>
<video class="ratio ratio-16x9 mb-1 rounded" controls src="/images/news/2024-06-codin_line-highlighting.mp4"></video>

Now that we highlight the line that cursor is on, let's look at moving it around. We can move the cursor up and down by checking keyboard input events:

Expand All @@ -369,7 +368,7 @@ edit_multiline :: proc(...cursor:^Txt_Pt, auto_scroll:^bool ...)
cursor.row = clamp(cursor.row, 0, len(lines)-1)
}
```
<video class="ratio ratio-16x9 mb-1 rounded" controls src="images/news/2024-06-codin_keyboard-input.mp4"></video>
<video class="ratio ratio-16x9 mb-1 rounded" controls src="/images/news/2024-06-codin_keyboard-input.mp4"></video>

How about auto scrolling when the cursor is not in the visible range?
- first check if the cursor is in the visible range of boxes
Expand All @@ -386,7 +385,7 @@ edit_multiline :: proc(..., cursor:^Txt_Pt, ...)
}
```

<video class="ratio ratio-16x9 mb-1 rounded" controls src="images/news/2024-06-codin_auto-scroll.mp4"></video>
<video class="ratio ratio-16x9 mb-1 rounded" controls src="/images/news/2024-06-codin_auto-scroll.mp4"></video>

One thing I realized was that we don't always want to auto scroll...often I manually scroll around a file and let the cursor go off screen. So I added a `scroll_trigger:^bool` as an input to give us a way to limit the auto scroll:

Expand Down Expand Up @@ -436,7 +435,7 @@ The return values:

What I've described is just a snippet of what goes on beneath the hood of codin. Some parts are built into the UI library (panel splitting, string allocation, text parsing) while and others are specific to the codin (build commands, build error highlighting, searching).

<video class="ratio ratio-16x9 mb-1 rounded" controls src="images/news/2024-06-codin_end.mp4"></video>
<video class="ratio ratio-16x9 mb-1 rounded" controls src="/images/news/2024-06-codin_end.mp4"></video>

---

0 comments on commit f4307a8

Please sign in to comment.