Better pretty printing. scrolling in the textEditor

src/ast.ts

@@ -207,7 +207,8 @@ export function prettyPrint(ast: AST, indent = 0): string {
             return `(${func} ${args})`
 
         case 'let':
-            return `${ast.name} = ${prettyPrint(ast.value, indent + 1)};\n${i}${prettyPrint(ast.body, indent)}`
+            const sep = indent === 0 ? '\n\n' : '\n';
+            return `${ast.name} = ${prettyPrint(ast.value, indent + 1)};${sep}${i}${prettyPrint(ast.body, indent)}`
 
         case 'list': {
             const elems = ast.elements.map(e => prettyPrint(e, indent + 1))

src/cg/06-textEditor.cg

@@ -138,6 +138,11 @@ textEditor = name \
       },
 
       update = state event \ event
+        | Scrolled delta \ (
+          newY = max 0 (state.scrollY + delta.deltaY);
+          newX = max 0 (state.scrollX + delta.deltaX);
+          { state = state.{ scrollY = newY, scrollX = newX }, emit = [] })
+
         | Key { key = "ArrowDown" } \ downArrow state
         | Key { key = "j" } \ (state.mode
           | Insert \ insertChar "j" state
@@ -200,27 +205,46 @@ textEditor = name \
         | _ \ { state = state, emit = [] },
 
       view = state emit \
-        buffer = map (l \ text l) state.lines;
-
         scale = 2;
         charH = 12;
         charW = 5;
         lineGap = 1;
         charGap = 2;
+        lineH = charH * scale + lineGap;
+
+        cursorY = state.cursorRow * lineH;
+        scrollY = (cursorY < state.scrollY
+          | True \ cursorY
+          | False \ (cursorY + lineH > state.scrollY + ctx.h
+            | True \ cursorY + lineH - ctx.h
+            | False \ state.scrollY));
+
+        cursorX = state.cursorCol * charW * scale + charGap * state.cursorCol;
+        scrollX = (cursorX < state.scrollX
+          | True \ cursorX
+          | False \ (cursorX + charW * scale > state.scrollX + ctx.w
+            | True \ cursorX + charW * scale - ctx.w
+            | False \ state.scrollX));
+
+        buffer = map (l \ text l) state.lines;
 
         cursor = ui.positioned {
-          x = state.cursorCol * charW * scale + charGap * state.cursorCol,
+          x = cursorX,
-          y = state.cursorRow * charH * scale + lineGap * state.cursorRow,
+          y = cursorY,
           child = ui.rect { w = charW * scale, h = charH * scale, color = "rgba(255,255,255,0.5)" }
         };
 
+        maxLineLen = fold (acc line \ max acc (len line)) 0 state.lines;
+        totalWidth = maxLineLen * charW * scale + maxLineLen * charGap;
+        totalHeight = len state.lines * lineH;
+
         scrollable {
           w = ctx.w,
           h = ctx.h,
-          totalWidth = 1000,
+          totalWidth = totalWidth,
-          totalHeight = 1000,
+          totalHeight = totalHeight,
-          scrollX = state.scrollX,
+          scrollX = scrollX,
-          scrollY = state.scrollY,
+          scrollY = scrollY,
           child = ui.stack {
             children = [
               ui.column {

src/cg/06-tree.cg

@@ -65,7 +65,7 @@ treeNode = config \
 
   valueLabel = value \ value
     | NumberValue n \ Some (show n)
-    | StringValue n \ Some ("\"" & n & "\"")
+    | StringValue n \ Some ("\"" & r & "\"")
     | ConstructorValue { tag = tag } \ Some tag
     | FunctionValue _ \ Some "<fn>"
     | _ \ None;
@@ -105,7 +105,7 @@ treeNode = config \
       h = 30,
       onSubmit = onSubmit
     }
-    | False \ simple config.path (config.prefix & "\"" & n & "\"") "#f6a" (Some (_ \ config.onEditLeaf config.path)))
+    | False \ simple config.path (config.prefix & "\"" & (slice n 0 30) & "..\"") "#f6a" (Some (_ \ config.onEditLeaf config.path)))
 
   | ConstructorValue { tag = tag } \ (isEditing
     | True \ textInput {