disconcision / fructure

a structured interaction engine 🗜️ ⚗️

Fructure: A structured interaction engine in Racket

Updated July 2019 : Installation instructions & mini-guide below

CLICK HERE for a video demo from RacketCon 2019

Fructure at RacketCon 2019.My talk (from the livestream).Slides: Real version. Extended unedited version.

Fructure is a prototype structure editor, which can currently be used to write & edit small programs in a small subset of scheme/racket. This is a personal project where I'm playing with ideas in editing, programming languages, and interaction design.

Note: now that this is getting some traffic I wanted to put up a disclaimer that some of the code is currently in a bit of a state: I've commented out some things and hacked up some others to smoothen the demo. My immediate plans are - after taking a post-racketcon break and aside from general cleanup - to unhackify the way transforms currently work, properly re-instate variadic parameters for binding forms, and do some profiling and address the current sluggishness.

• fig 1: walking the grammar

• fig 2: refactoring by re/destructuring

• fig 3: menu closeup

I wrote a bit about my then-current direction in September 2018, just before beginning my current implementation attempt. I've completed most of what I talk about there, with varying levels of success: Fructure 1 of 2 Fructure 2 of 2. There will soon be some slightly more up-to-date notes via my racketcon slides. For more updates cyberfollow @twitter and @elsewhere. Here's an ongoing dev screenshot dump; check out the chronological overview:

fig 4: family history

Installation Instructions

Basically, you need to install racket, a couple libraries, and a font if you don't want thing to look screwy.

MacOS:

1. brew install racket --cask
2. brew tap homebrew/cask-fonts && brew install font-iosevka --cask
3. raco pkg install memoize
4. raco pkg install rackjure
5. git clone https://github.com/disconcision/fructure.git

Linux, Windows: (under construction)

TO RUN:

1. cd fructure
2. racket src/fructure.rkt

FAQ: Q: Is it suppose to be this slow? A: It's open source.

Fructure Primer

STEP 0: What to do if you're stuck / Speedrun instructions

1. How to win: There are modes, but pressing ESC enough times should always get you to the base mode. From there, press SPACE to enter command mode. From here, PRESS "q" then RIGHT-ARROW to quit.
2. Check the terminal for silent crashes (aka 'bonus' victory conditions)

STEP 1: mini tutorial

Fructure starts in NAV(igation) mode. The selector (red) encloses a hole (yellow).

NAV keybindings

• ENTER toggles TRANSFORM mode

A transform (red) maps the source (the hole) to (->) the target (selection (outlined in red) in menu (also outlined in red))

TRANSFORM keybindings

• UP/DOWN move menu / selector: find and select an "if" expression)
• ENTER performs selected transform, toggles NAV mode: transform the hole to the if

NAV keybindings (continued)

• LEFT/RIGHT move selector in preorder tree traversal: go right thrice and left twice to cycle the selection, settling on the first child

These keys (almost) suffice to build/delete arbitrary syntax, though not terribly conveniently. Build a tiny program this way. I say almost because you can't (yet, owing to a bug) input new identifiers in this way. Doing so (currently) requires being in the menu and pressing RIGHT on a lambda or define (see next step).

STEP 2:

Approximating standard text-entry

NAV keybindings

• UP/DOWN selector to parent/first child

TRANSFORM keybindings

• ESC switch to NAV mode without performing transformation
• RIGHT step into current transform: (essentially) perform selected transform, and then advance the selector/menu to the first created hole. (unless last action was an undo, in which case RIGHT is a redo)
• LEFT undo (back to state at last step, delimited by entering transform mode)
• SPACE in current implementation the same as RIGHT, minus the redo part. eventually, it should be part of alphanumerics
• alphanumerics + ( + ) filter menu by search buffer prefix match
• BACKSPACE erase most recent character in search buffer
• DELETE erase search buffer

STEP 3:

Abstract copy/paste

NAV keybindings

• TAB capture selection
• ESC clear captures

TRANSFORM keybindings

• SHIFT-LEFT/RIGHT un/fold transform display
• SHIFT-UP/DOWN extend/contract displayed menu options

STEP 4:

Simple settings scrubber

NAV keybindings

• SPACE switch to COMMAND mode

TRANSFORM keybindings

• SHIFT-SPACE switch to COMMAND mode

COMMAND keybindings

• UP/DOWN select property
• LEFT/RIGHT scrub property
• alphanumerics/BACKSPACE/DELETE : filter/unfilter property
• ESC return to NAV or TRANSFORM mode

BOITE DIABOLIQUE: housing the 19 forbidden keybindings

EXPERIMENTAL & FICTIONAL keybindings: lies at best, trouble at worst

NAV

• F2 dump current structure to stdin
• CTRL-F9-F12 save structure to disk
• SHIFT-F9-F12 load structure from disk
• SHIFT-LEFT/RIGHT selector to sibling
• DOWN step into capture
• alphanumerics (restrict selector traversal to search buffer hits aka find as you type) TRANSFORM
• F2 dump current structure to stdin
• RCTRL shortcut to select/insert parens

Screenshots

Structured insertion via walking the grammar:

Navigation mode

Copy/Paste via Metavariables

...

fructure's Issues

internal cps for cond aren't selectable in nav mode

captures are colored weird, especially when selected

first, atomic captures. here all abcs except the first are captured.

context:

issue:

proposal: do we want backgrounds for atomics? for visual consistency maybe, but the limited space makes it a bit cramped. maybe that's fine though. if we go without backgrounds, then the text color needs to be more distinct, for all but especially first/blue.

only first/blue looks particularly awful while selected, but all should be improved, probably have their own custom colorings instead of the overlay.

below needs proper horizontal selection coloring before detailed looks. but again we probably need to special-case naked atom text-color on the selection-red background.

--

horizontal form selected behavior; probably nothing else to say other than above

context:

issue:

--

vertical forms: equally fraught. everything about selected captures needs a new stylesheet entry. simplest immediate thought: demand background for atoms, standardise with naked atom color. selection color should not descend at all... it should be rendered purely as an outline.

context:

issue:

context:

issue:

use original two greys for syntax for transform source

search 663832872 in layout for wip.

it looks good in the tests.

maybe also make this a special capture, distinct for the tab-based ones.

one plan:
for menus with non-hole source, make first item the capture of the source.
first transform is source -> source-capture.
is source 'actually captured' (for matches)?
also populate source-capture -> source transformation.
so pressing enter enter would be the same as tab (a 'half' capture?) (enter enter again uncaptures)

0 only transforms to 0

make a 0
try to transform it

one-off rendering error in rounded backdrops

by the cursor.

proposal: in the layout code, i think that right now each row has two {-1,0,1}s indicating whether the above/below rows are shorter/equal/longer. replace this with the actual difference. the code that conditions on it right now should condition on the sign. in the case that the difference is less than the curvature radius, do two things:

1. make the bezier endpoint half way towards above/below neighbor (currently this is radius)
2. make the bezier angle at that point 45 degrees (currently this is horizontal) to meet up smoothly with neighbor.

Command palette

I'd like to see these command palette UIs fully merged with the file menu. When you open one, you can explore groups of related options hierarchially with mouse/arrows, or just begin typing to search within the whole hierarchy, combining speed and explorability.

Saw your tweet and thought of fructure. What do you think?

implement nav mode search

1. decide on a visual presentation for a reasonable number of important cases. see if it can be limited to overlaying letters with only two cases; forms and identifiers/literals

2. figure out how to parse for it

add ability to descend into identifiers

edit: previously: stop default traversal of identifier/literal letters in nav mode

generally unfuck nav, as far as can be gone without spatial data.

proposal: bind 'select first child' to C-down. you normally don't need to use this but you can use it to force things that you normally can't descend into, like the titular things and maybe staged items in melt mode. probably not some other things though like captures.

while we're at it, bind 'select parent' to C-up too.

proposal continued: add a separate flag to specify can't-descend during traversal. abstract whatever i'm doing for captures, but maybe don't change the capture code.

all references in menu respond to search buffers beginning with ref

i know it's annoying but you need to fix this. remember you got yourself into this

address the details of profile curvature

Can't run editor due to Racket error

When starting up, I get:

maple% racket src/fructure.rkt 
shared/slash-patterns/slash-patterns.rkt:77:34: ~@: unbound identifier in module
  in: ~@

I'm not so familiar with Racket so I've no idea what this means.

I am running Ubuntu:

maple% lsb_release -irc
Distributor ID:	Ubuntu
Release:	18.04
Codename:	bionic

Racket version:

maple% racket --version
Welcome to Racket v6.11.

find solution to cursor dizzyness when large forms are selected

basically the form-name needs to look cursor-y in some way

this may be a challenge without loosing the often-cool color-the-whole-form-header-red approach

add deletion/movement-quasimode for selected node in variadic list

the basic case here shouldn't be too bad.

1. make sure holes spawned in variadic forms are flagged at creation as being members of variadic lists, and that this flag properly carries through transformation

2. write some transformations to delete, insert, swap-left, and swap-right.

3. bind to ins, del, C-left, C-right.
   (actually, maybe C-ins/del as well? consistency, makes deletion more purposeful)

insert: new hole before? selection
insert-end: coax the variadic list terminal + into producing an extra terminal hole.

question: make this into a 'proper' quasimode? like, make everything use C-, and do some mode-related color change?

This is great--you're on to something big!

Really liked your demo on YouTube. A few thoughts:

• Is there an online demo, or just downloadable?
• transformation-based editing and dev time term rewriting are very clear ways of naming what I think could be the only way people program in 10 years (though making the dev experience seamless is a loooot of work. Text editors have a many decades head start, although they had to build themselves with relatively primitive tools).
• Instead of the term "holes", I prefer the term "cells". Once you start thinking of programs in 2 dimensions, you start seeing web forms and spreadsheets as editors, and there's a nice symmetry between a spreadsheet "cell" and a "hole" in your and Hazel's terminology.
• I think there's a lot of overlap with what you are doing here and what we are working on with TreeNotation (http://treenotation.org/sandbox/build/) and Ohayo (https://github.com/breck7/ohayo). Not sure what your ultimate goals are with this project, but ours are to drastically improve medical science, and if there are any ways we could help each other please reach out -- [email protected].
• One thing we are working a lot on is training deep learning models to write code. IMO, our early results (eventually to be incorporated into Ohayo) are pretty conclusive--it's the future of coding and autocomplete. I would pay attention to that field (deep learning for program synthesis), as I think it's where the puck is headed and will have ramifications to what you are doing with Fructure.

License?

Fructure is an incredible design exploration. I'd love to peek and poke at the code and maybe even give back (if time allows), but at the moment there's no license file. Would you mind adding a FOSS license?

clarify intentions for variadic lists in transform mode

there's a lot to unpack here:

get if/cond presentable

1. (hack) force cond pairs to be horizontal

2. add else (specific for cond in grammar?)

3. color fixes (think they are all represented in other issues)

backing error on cond-> if transform

only seems to occur in this case; guessing syntax error in transform is causing info loss

failures freeze entire editor

You're giving the talk, so I CLEARLY don't know what I'm doing yet. I was trying to get into the "free" typing mode, not really coding anything. While trying to do a list, I got to the second item and hit right (I think?) and everything froze as such:

This was what was in the terminal:

match-define: no matching clause for '(◇ (p/ #hash((depth . 0) (handle . #t) (in-scope . ()) (sort . expr)) (if (p/ #hash((depth . 1) (handle . #t) (in-scope . ()) (sort . expr)) (ref (p/ #hash((depth . 2) (sort . pat)) (id (p/ #hash((depth . 3) (sort . char)) t) (p/ #hash((depth . 3) (s...
  location...:
   src/mode/transform.rkt:839:2
  context...:
   /MyApplications/dev/lisp/Racket/collects/racket/match/runtime.rkt:24:0: match:error
   /Users/ryan/fructure/src/mode/transform.rkt:829:0: menu-filter-in-stx
   /Users/ryan/fructure/src/mode/transform.rkt:17:0: mode:transform
   /Users/ryan/fructure/src/fructure.rkt:211:0
   .../more-scheme.rkt:261:28
   /MyApplications/dev/lisp/Racket/share/pkgs/gui-lib/mred/private/wx/common/queue.rkt:435:6
   /MyApplications/dev/lisp/Racket/share/pkgs/gui-lib/mred/private/wx/common/queue.rkt:486:32
   /MyApplications/dev/lisp/Racket/share/pkgs/htdp-lib/2htdp/private/last.rkt:18:4: last method in last-mixin
   "/Users/ryan/fructure/src/fructure.rkt": [running body]
   temp37_0
   for-loop
   run-module-instance!125
   perform-require!78

slight color tweaks

this is triage but whatever:

cant select patterns

problem is: if paint handles on patterns, references have double selection problem because they accidentally contain patterns. make them not do that. will require changes in at least transform, syntax, and layout.

also, selections on patterns aren't drawn properly.

draw selection over top; connected to selected captures display issues

sometimes selections are cut off a bit. other times (selected captures) they are barely visible. drawing over top would fix the first case, but might screw up the second if not special-cased? unless we draw just the outline over top: this is sufficient for the first, and probably adequate for the second.

so:

1. fish selection out stx
2. figure out how we're drawing selection outlines
3. copy that code to top-level layout, and make a new popout-layer

internal define bindings are introduced to top level

make it so that doesn't happen

add simple cond <-> if transforms

you eliminated the transform outline entirely in the simple-menu case

that's why you were so confused; you forgot what mode you were in

fix it

macOS compatibility report

current process:

TO INSTALL:
brew cask install racket
brew tap caskroom/fonts && brew cask install font-iosevka
raco pkg install memoize
git clone https://github.com/disconcision/fructure.git

TO RUN:
racket src/fructure.rkt

issues:

1. need to manually create src/saves directory or else crashes (on all OSes?)
2. formatting screwy with default font; find better default?

make shorter hits show up first in menu

example: define f of x
if search buffer is just f, have to scroll through false and first to get to f!
unacceptable!!
insert lemon emoji, when technology makes this feasible

atom colors makes them hard to read when immediately below selection

might be awkward to condition this

if you can try making em black

menu/transform color issues

1. cond/match/let/etc:pick proper secondary color for in-menu items; darker grey

2. yeah: color exposed atom text white in template

decide on behavior when transform resultant has no holes

currently last entered atom (must it necessarily be an atom?) is red-selected

this feels visually iffy. debatably it's good for movement context if you press left/undo, but it's not ideal for this since it will jump from selecting the whole last atom to its second-last char.

proposal: fix via cursor behavior. when there are no holes in the resultant, have the cursor move up to the whole resultant.

horizontal forms are rendered with the wrong background color when selected