diff --git a/content/news/2024-06.md b/content/news/2024-06.md
index bb16a286..d8919190 100644
--- a/content/news/2024-06.md
+++ b/content/news/2024-06.md
@@ -277,12 +277,11 @@ edit_text :: proc(name: []any, text:^string) -> Box_Ops {
}
```
-
+
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)
}
@@ -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:
-
+
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:
-
+
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
@@ -328,7 +327,7 @@ edit_multiline :: proc(...) {
```
And now we only create and calculate the number of boxes that would be visible:
-
+
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:
@@ -351,7 +350,7 @@ edit_multiline :: proc(..., cursor:^Txt_Pt, ...)
}
```
-
+
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:
@@ -369,7 +368,7 @@ edit_multiline :: proc(...cursor:^Txt_Pt, auto_scroll:^bool ...)
cursor.row = clamp(cursor.row, 0, len(lines)-1)
}
```
-
+
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
@@ -386,7 +385,7 @@ edit_multiline :: proc(..., cursor:^Txt_Pt, ...)
}
```
-
+
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:
@@ -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).
-
+
---