Freewheeling Apps

2024-10-20

21 Oct 2024 00:28:43 PDT

Emacs-style ranges on a text buffer that I can now hang attributes like color, decorations and click handlers on to.

A plain text editor where I can move the cursor around with mouse or keyboard and type and delete text. I select some text, then press a shortcut to turn it into a more permanent border. The border grows and shrinks as I insert and delete text.

Inserting/deleting text before a range moves it.
Inserting/deleting text after a range leaves it unchanged.
Inserting/deleting text within a range grows/shrinks it.
Deleting text at a boundary shrinks the range, and deletes it when it becomes empty.
Inserting text at boundaries can't disambiguate whether I want the text within or outside the boundaries. But I can grab some handles on the range to adjust.

The final complexity cost was 200 lines but it was a non-linear path getting there. I started out with the notion of pivots from my doodle app. There, pivots live inside the data structure for a single line of text. Since ranges now need two pivots that could be on different lines, I had to move them out. I started tracking pivots in a separate data structure, maintaining bidirectional mappings between pivots and their locations, and then tracking ranges as combinations of pivots. This quickly blew up the implementation to 500 lines, and I was juggling 27 manual tests of which half were failing.

The next day I started from scratch and threw out the notion of pivots entirely. Now I just maintain 2 locations directly inside each range, and linearly scan through them all for any book-keeping. The implementation dropped to 200 lines and the tests passed fairly quickly.

Earlier this year I threw out an implementation after suffering with it for 2+ years. It feels like I'm getting the hang of this programming thing that I threw out an implementation now after just 2 days. I'm setting a higher bar for elegance. At the same time, it's interesting that my instinct remains as poor as ever for the right approach in even a slightly new problem. Here I spent a lot of time trying to squeeze my ranges into lines so that deleting a line would transparently delete ranges within it. But I blindly assumed a fully normalized design with a first-class notion of a pivot must be a good idea.

As I linked to in the previous post, this app was inspired by this comment by Alex Kladov about how Emacs maps ranges of text to attributes.

2024-10-18

18 Oct 2024 10:19:02 PDT

I've been thinking about Potluck and the Emacs model of text augmented with attributes for ranges. Potluck describes 3 mechanisms:

extracting data using (regex) patterns
performing computations on that data
showing results of computation as annotations

My notebook app does simple variants of 2 and 3, and replaces 1 with explicit in-document markup.

Now I'm playing with another approach to 1. I already have the idea of pivots from my doodle app. Putting two of those pivots together should yield a range that adjusts in intuitive ways in the presence of edits. An example may be a WYSIWYG UI for adding a hyperlink to some text:

Inserting/deleting text before a range moves it.
Inserting/deleting text after a range leaves it unchanged.
Inserting/deleting text within a range grows/shrinks it.
Deleting text at a boundary shrinks the range, and only deletes the attached attributes if the range becomes empty. This makes ranges more robust to deletion than my doodles which attached to a single pivot.
Inserting text at boundaries can't always do what you want. I imagine it'd be nice to have handles that you can drag to adjust a range.

2024-10-10

10 Oct 2024 08:57:33 PDT

I hadn't tried this until today, but it turns out to work: I can create equations forwards and back in notebook.love, and trigger either selectively based on what blanks I fill in.

Editor shows a sentence describing an equivalence between ___ lbs and ___ kg. Below the sentence are two indented lines of code describing how to convert lbs to kg and the other way. The blanks are empty and highlighted in cyan. Below this is a second sentence, this time converting Celsius to Fahrenheit, followed by the usual formulae for converting either way. Again the blanks are empty and highlighted. I click on the Fahrenheit blank and start typing. As I do, the Celsius blank updates. The Fahrenheit blank loses its highlighting to indicate it contains my typing. The formula for converting to Celsius also shows the result to the right. The other formula for converting to Fahrenheit does not, to indicate it's currently not running. Then I click on the Celsius blank, and type in a result. Nothing happens. Now both sides are not highlighted, and neither formula shows a result. Nothing is running, because the equations are over-constrained. I click back on the Fahrenheit blank and backspace what I'd typed in. The blank highlights but remains blank. The formula shows the result, but not the blank. This is because my cursor is still within the blank. The editor is giving me space to type more in. I click in a few places to get it to run. Still nothing. Then I type a key at a random place outside any blank. Now the Fahrenheit blank gets filled in.

The fine print: to switch directions I have to fill in the right blank, clear the old blank, and then type in something outside the old blank (to indicate I'm not going to type further into the old blank).

Works better if I clear the old query first, but who can remember that?

I've decided to just recompute on every keypress and mouse click. It seemed unnecessary, but now I see that there's some benefit from the inefficiency.

2024-10-07

07 Oct 2024 17:33:44 PDT

A text editor that supports doodling.

Ways I've previously seen text coexist with a canvas:

I'm instead using the game engine idea of a pivot. Any time I toggle into doodle mode I have to first pick a pivot from one of the characters on screen. All my drawings are relative to that pivot, and edits to text maintain pivots alongside.

Video of a text editor. I can switch to a "doodling" mode. When I do that, the cursor disappears and I see little grey squares at the top-left of every character on screen. I can pick one of them which turns that square pink and hides all the others. Now I can start drawing freehand on the screen. When I then exit doodle mode, any text editing or scrolling moves the doodles around, maintaining their position relative to nearby text.

Displacements to the pivot are preserved in font-derived units, so it looks "reasonable" as you resize the font.

There's some text on screen with a pink pivot and an ugly doodle around it. As I increase the font the doodle grows correspondingly in size. It also moves from left to right which is unfortunately jarring.

Deleting a character deletes all drawings pivoted on it. (But there's undo.)

This took 200 lines, so not too much though it was more than I'd initially expected.

Inspired by this thread.

2024-10-06

06 Oct 2024 16:17:35 PDT

Indicating how the notebook fills blanks

Blanks can be filled in either with the results of computation or with what a person typed in. Now we indicate such conflicts in two ways.

Blanks filled in from computations get a distinct look (the cyan background), separate from both hand-written (black on white) and computed, non-editable text (cyan on white)
If I manually edit a blank, its background changes, and any code that was overridden doesn't execute. Here are a couple of examples:

But perhaps the color choice is too strong:

2024-10-04

04 Oct 2024 21:29:52 PDT

A notebook with tabs that live-update as you edit.

A plain text editor with a line along the right margin after which there are some rectangular "tabs" containing chapter titles. I demonstrate that I can click around and edit anything in the editor, and if I modify a line starting with 3 dashes, the tabs on the right autoupdate.

The sort of interaction I live for: someone wished something existed, and it gave me a great deal of pleasure to manifest it.

2024-10-02

02 Oct 2024 09:27:25 PDT

This debug UI has been surprisingly handy over the last few days. I'm able to visualize a parse tree even after it's been flattened, just using color transparency. All I'm doing is painting all the rects that contain the mouse cursor. Since the color is transparent, it doesn't matter what order they're in. (The larger rects actually come later; they're fall-backs if a more fine-grained rect isn't found.)

Hovering the mouse on different parts of the program. At any point there's a growing area of blue rectangles around the mouse pointer, with smaller rectangles in darker shades (more rects layered one on another) and larger surrounding ones in lighter shades (fewer layers).

2024-09-30

30 Sep 2024 21:46:58 PDT

My notebook now synchronizes the results of computation into named blanks in prose.

A text editor with some markup. Sections start with 3 dashes and can adjust foreground/background colors. Blanks surrounded by square brackets can be assigned names after a pipe character; the result displays like a fraction, with the name below a horizontal line in grey. Indented lines are code, and the results of all code lines are constantly updated and shown to the right in cyan. Expressions can be assigned to variables. A blank with the name of a variable always shows the variable's value. Editing a blank updates the variable but not its default definition in code lines. Multiple blanks can refer to the same variable. Editing any of them updates the variable.

Repo

2024-09-29

29 Sep 2024 16:26:41 PDT

A little toy I spent too much time on, just because fractals are always such catnip for me.

Screenshot showing the source code for a Hilbert curve program along with the Hilbert curve drawn in pink in the background. There are a couple of sliders in blue for tweaking the curve. There's a cube in green in the bottom right with one vertex highlighted (corresponding to the program).>>

audio/video; 2 minutes

The LÖVE app with all its source code if anyone wants to play with it.

2024-09-19

19 Sep 2024 22:34:22 PDT

Adding styling to my notebook UI.

Some black text on a white background. Text within square brackets separated by a pipe character is rendered in two lines, with the text after the pipe in the lower line colored a subtle grey. I can click around anywhere, insert text, delete text. After that initial orientation, I surround a word 'heat' in angle brackets, and then add some styling after a pipe character. fg=1,0,0. Now the word 'heat' renders in red, and the styling shows in a line below it colored a subtle grey. All this remains editable at all times. Now I go to the top of the screen, hit enter a couple of times to get to an empty line. Then I type in '---' and then fg=0,0,1. Now all the black text turns blue. I delete the style and try out a new one: bg=0.8,0.6,1. Now the whole screen has an orange background. I move the cursor halfway down the screen, create a new empty line and type in 3 dashes and then 'bg= 0,0.6,1' Now this line and everything below has a green background. 3 dashes denotes a new section, and sections can be styled independently.

It looks like I care about always making the styling very transparent, so it's possible in principle to guess what characters one needs to type to copy the look of something one sees on screen. So the style directives will never be hidden.