2c:null 2d:["$","title",null,{"children":"Rivulet Editor | Jo Wood | Observable"}] 32:T617,To build a .riv file: - _Keyboard navigation:_ Use the arrow keys to move the active cell. Holding shift with the arrow key will leave a lexeme in the direction of movement. Changing direction will insert a corner lexeme. Reversing direction will insert a half-dash with the gap away from the new direction. The backspace key erases any lexeme in the active cell; the 'S' key will insert a start gylph marker `╵` and the 'E' key an end glyph marker `╷`. - _Pointer navigation:_ Select a lexeme with the pointer ( `╭` `╶` `╵` etc.) and then click/drag in the main grid. The `⌫` can be used to remove lexemes. For column number annotation (useful for some action strands) use the numeric buttons `1` `2` etc. in a similar way. You can move strands that overlap with a rectangular selection by shift-dragging a rectangle to select, then dragging the selected lexemes (highlighted in yellow) to a new location. You can modify the prime line numbers to help navigating the space restarting the line number sequence for vertically arranged glyphs. To do this click `Restart line numbers` and then the row from which the new sequence should start. You can remove line numbers in a similar way using the `Erase line number` button. The grid can be saved or loaded as `.riv` files with the buttons below the editor.33:T3cbc,editor = { // ---------- Re-initialise state trigger; // external reset let { rLabels, rGrid } = mutable editorState; const [rows, cols] = [rGrid.length, rGrid[0].length]; // ---------- For keyboard navigation let activeCell = { r: 0, c: 0 }; let [lastDirection, lastCell] = [null, null]; let shiftChain = false; // ---------- Layout (adapts to large grid by shrinking cell sizes) const geom = { baseW: 14, baseH: 24, baseF: 16, scale: (0.8 * minSize.w) / cols }; geom.w = geom.baseW * geom.scale; geom.h = geom.baseH * geom.scale; geom.f = geom.baseF * geom.scale; const gutterW = geom.w * d3.max(rLabels, (d) => d.length); const pLayout = [ ["╴", "", "╭", "─", "╮", "", "", "1", "2"], ["╵", "╷", "│", "", "", "⌫", "", "3", "5"], ["╶", "", "╰", "", "╯", "", "", "7", "9"] ]; const [pRows, hSpacing, vSpacing] = [pLayout.length, 1.5, 1.2]; const gridTop = pRows * vSpacing * geom.baseH + geom.baseF; const totalHeight = gridTop + rows * geom.h + 4; let aLexeme = "╵"; // Currently active palette lexeme let selected = new Set(); // Strand ids under selection (for interactive movement of strands) let looseSymbols = new Set(); // Other non-strand characters such as numbers or non-strand lexemes let selectionBox = null; // Rectangular SVG for rubber-band selection let curTopology = { cellToStrand: new Map(), strands: new Map() }; // ---------- SVG container const svg = d3 .select(document.createElementNS("http://www.w3.org/2000/svg", "svg")) .attr("class", "riv") .attr("width", gutterW + cols * geom.w + 4) .attr("height", totalHeight); // ---------- Lexeme palette const pItems = svg .append("g") .selectAll("g") .data( pLayout.flatMap((row, r) => row.map((lex, c) => lex && { lex, r, c }).filter(Boolean) ), (d) => d.lex ) .join("g") .attr("class", "palette") .attr( "transform", (d) => `translate(${hSpacing * d.c * geom.baseW + gutterW}, ${d.r * vSpacing * geom.baseH})` ) .on("click", (_, d) => { aLexeme = d.lex; pItems .select("rect") .style("fill", (x) => x.lex === aLexeme ? editorClrs.pItem : "transparent" ); }); pItems .append("rect") .attr("width", geom.baseW) .attr("height", geom.baseH) .style("fill", (d) => d.lex === aLexeme ? editorClrs.pItem : "transparent" ); pItems .append("text") .attr("x", geom.baseW / 2) .attr("y", geom.baseH / 2) .style("dominant-baseline", "central") // Explicit style for browser compatibility. .style("font-size", `${geom.baseF}px`) .text((d) => d.lex); // ---------- Line number editing buttons let [resetMode, eraseMode] = [false, false]; const addButton = (parent, { x, y, text }) => { const g = parent .append("g") .attr("class", "btn") .attr("transform", `translate(${x},${y})`); g.append("rect") .attr("width", 160) .attr("height", geom.baseH * 0.8) .attr("rx", 4) .attr("ry", 4); g.append("text") .attr("x", 80) .attr("y", geom.baseH * 0.4) .style("dominant-baseline", "central") // Explicit style for browser compatibility. .style("font-size", geom.baseF * 0.8); g.select("text").text(text); return g; }; const bLineRestart = addButton(svg, { x: gutterW + cols * geom.w - 165, y: geom.baseH, text: "Restart line numbers" }); const bLineRemove = addButton(svg, { x: gutterW + cols * geom.w - 165, y: geom.baseH * 2, text: "Erase line number" }); // Toggle states of the line editing buttons (mutually exclusive) bLineRemove.on("click", () => { eraseMode = !eraseMode; resetMode = false; bLineRemove .select("rect") .style("fill", eraseMode ? editorClrs.bDown : editorClrs.bUp); bLineRestart.select("rect").style("fill", editorClrs.bUp); }); bLineRestart.on("click", () => { resetMode = !resetMode; eraseMode = false; bLineRestart .select("rect") .style("fill", resetMode ? editorClrs.bDown : editorClrs.bUp); bLineRemove.select("rect").style("fill", editorClrs.bUp); }); // ---------- Line number gutter const gutter = svg .append("g") .attr("class", "gutter") .attr("transform", `translate(0,${gridTop})`); gutter .selectAll("text") .data(rLabels) .join("text") .attr("x", gutterW - 4) .attr("y", (_, i) => (i + 0.5) * geom.h) .style("dominant-baseline", "central") .style("font-size", `${geom.f}px`) .text((d) => d); svg.on("click", (event) => { const [px, py] = d3.pointer(event, svg.node()); const col = Math.floor((px - gutterW) / geom.w); const row = Math.floor((py - gridTop) / geom.h); if (resetMode || eraseMode) { if (row >= 0 && row < rows) { if (resetMode) { overwrite(rLabels, lineNumbers(rows - row), row); resetMode = false; } else if (eraseMode) { rLabels[row] = " "; eraseMode = false; } gutter .selectAll("text") .data(rLabels) .text((d) => d); bLineRemove.select("rect").style("fill", editorClrs.bUp); bLineRestart.select("rect").style("fill", editorClrs.bUp); } return; } // Set active cell if click is inside grid if (row >= 0 && row < rows && col >= 0 && col < cols) { activeCell = { r: row, c: col }; lastDirection = null; render(); } }); // ---------- Background drawing grid svg .append("g") .attr("class", "grid") .attr("transform", `translate(0,${gridTop})`) .selectAll("rect") .data(d3.range(rows * cols)) .join("rect") .attr("width", geom.w) .attr("height", geom.h) .attr("x", (d) => gutterW + (d % cols) * geom.w) .attr("y", (d) => Math.floor(d / cols) * geom.h); // ---------- For active cell indication const activeLayer = svg .append("g") .attr("class", "active-cell") .attr("transform", `translate(0,${gridTop})`); // ---------- Lexeme layer const lexemeLayer = svg .append("g") .attr("class", "lexemes") .attr("transform", `translate(0,${gridTop})`) .attr("pointer-events", "none"); const highlight = () => { lexemeLayer .selectAll("text") .style("stroke", (d) => selected.has(d.strandId) || looseSymbols.has(`${d.r},${d.c}`) ? editorClrs.selected : strandClrs[curTopology.strands.get(d.strandId)?.kind] ) .style("font-weight", (d) => selected.has(d.strandId) || looseSymbols.has(`${d.r},${d.c}`) ? "bold" : null ); }; const render = () => { curTopology = extractStrands(rGrid); const { cellToStrand, strands } = curTopology; mutable editorState.lexIds = cellToStrand; mutable editorState.strands = strands; const data = rGrid.flatMap((row, r) => row.flatMap((ch, c) => ch ? [{ r, c, ch, strandId: cellToStrand.get(`${r},${c}`) }] : [] ) ); const updateActiveCell = () => { const { r, c } = activeCell; activeLayer .selectAll("rect") .data([activeCell]) .join("rect") .attr("x", gutterW + c * geom.w) .attr("y", r * geom.h) .attr("width", geom.w) .attr("height", geom.h) .attr("fill", "none") .attr("stroke", "orange") .attr("stroke-width", 2) .attr("pointer-events", "none"); }; const texts = lexemeLayer .selectAll("text") .data(data, (d) => `${d.r}-${d.c}`); texts.exit().remove(); texts .enter() .append("text") .style("dominant-baseline", "central") .style("font-size", `${geom.f}px`) .merge(texts) .attr("x", (d) => gutterW + (d.c + 0.5) * geom.w) .attr("y", (d) => (d.r + 0.5) * geom.h) .style("stroke", (d) => strandClrs[strands.get(d.strandId)?.kind]) .text((d) => d.ch); highlight(); updateActiveCell(); }; // ---------- Update grid as it is painted with lexemes const paint = (event) => { const [px, py] = d3.pointer(event, svg.node()); const col = Math.floor((px - gutterW) / geom.w); const row = Math.floor((py - gridTop) / geom.h); if (row >= 0 && row < rows && col >= 0 && col < cols) { rGrid[row][col] = aLexeme === "⌫" ? "" : aLexeme; render(); } }; // ---------- Keyboard navigation document.addEventListener("keydown", (e) => { const keyActions = { Backspace: "", // Erase s: "╵", // Start glyph marker S: "╵", e: "╷", // End glyph marker E: "╷" }; if (e.key in keyActions) { e.preventDefault(); const { r, c } = activeCell; if (r >= 0 && r < rows && c >= 0 && c < cols) { rGrid[r][c] = keyActions[e.key]; render(); } return; } const keyDir = { ArrowUp: "up", ArrowRight: "right", ArrowDown: "down", ArrowLeft: "left" }[e.key]; if (!keyDir) { return; } e.preventDefault(); // Stop up and down arrows from scrolling the page const [dr, dc] = direction[keyDir]; const { r, c } = activeCell; if (r < 0 || r >= rows || c < 0 || c >= cols) { return; } const isShift = e.shiftKey; if (isShift) { const isFirst = !shiftChain || !lastCell || rGrid[lastCell.r][lastCell.c] === ""; let lex; if (isFirst) { lex = keyDir === "up" || keyDir === "down" ? "│" : "─"; } else if ( lastDirection && keyDir === direction.opposite[lastDirection] ) { // Reversal: insert half-dash if part of shift-chain lex = { left: "╴", right: "╶", up: "╵", down: "╷" }[lastDirection]; } else if (lastDirection && keyDir !== lastDirection) { lex = getCornerLex(lastDirection, keyDir) ?? (keyDir === "up" || keyDir === "down" ? "│" : "─"); } else { lex = keyDir === "up" || keyDir === "down" ? "│" : "─"; } rGrid[r][c] = lex; } // Update position and direction lastCell = { r, c }; activeCell = { r: Math.max(0, Math.min(r + dr, rows - 1)), c: Math.max(0, Math.min(c + dc, cols - 1)) }; lastDirection = keyDir; shiftChain = isShift; render(); }); // ---------- Selection rubber-band handlers const selectionLayer = svg.append("g").attr("class", "selection"); const boxStart = (event) => { const [x0, y0] = d3.pointer(event, svg.node()); selectionBox = selectionLayer .append("rect") .attr("class", "selBox") .attr("x", x0) .attr("y", y0) .attr("width", 0) .attr("height", 0) .attr("fill", "blue") .attr("fill-opacity", 0.15) .attr("stroke", "blue") .attr("stroke-width", 1) .attr("stroke-dasharray", "4,2"); selectionBox.x0 = x0; selectionBox.y0 = y0; }; const boxDrag = (event) => { if (!selectionBox) { return; } const [x, y] = d3.pointer(event, svg.node()); const { x0, y0 } = selectionBox; selectionBox .attr("x", Math.min(x, x0)) .attr("y", Math.min(y, y0)) .attr("width", Math.abs(x - x0)) .attr("height", Math.abs(y - y0)); }; const boxEnd = () => { if (!selectionBox) { return; } const { x, y, width, height } = selectionBox.node().getBBox(); selectionBox.remove(); selectionBox = null; // Move the strands that intersect with the selection selected.clear(); for (const [id, s] of curTopology.strands) { const sx1 = gutterW + s.bbox.left * geom.w; const sy1 = gridTop + s.bbox.top * geom.h; const sx2 = gutterW + (s.bbox.right + 1) * geom.w; const sy2 = gridTop + (s.bbox.bottom + 1) * geom.h; const intersect = sx1 < x + width && sx2 > x && sy1 < y + height && sy2 > y; if (intersect) { selected.add(id); } } // Move the non-strand non-blank cells looseSymbols.clear(); const [xMax, yMax] = [x + width, y + height]; for (let r = 0; r < rows; ++r) { for (let c = 0; c < cols; ++c) { if (rGrid[r][c] === "") { continue; } const cx = gutterW + (c + 0.5) * geom.w; const cy = gridTop + (r + 0.5) * geom.h; if (cx >= x && cx <= xMax && cy >= y && cy <= yMax) { const id = curTopology.cellToStrand.get(`${r},${c}`); if (!id || !selected.has(id)) { // not already via strand looseSymbols.add(`${r},${c}`); } } } } highlight(); }; // ---------- Selection move handlers const moveStart = (event) => { moveStart.p0 = d3.pointer(event, svg.node()); }; const moveDragging = (event) => { const [x, y] = d3.pointer(event, svg.node()); const [dx, dy] = [x - moveStart.p0[0], y - moveStart.p0[1]]; lexemeLayer .selectAll("text") .filter( (d) => selected.has(d.strandId) || looseSymbols.has(`${d.r},${d.c}`) ) .attr("transform", `translate(${dx},${dy})`); }; const moveEnd = (event) => { const [x, y] = d3.pointer(event, svg.node()); const [dx, dy] = [x - moveStart.p0[0], y - moveStart.p0[1]]; lexemeLayer .selectAll("text") .filter( (d) => selected.has(d.strandId) || looseSymbols.has(`${d.r},${d.c}`) ) .attr("transform", null); const dCol = Math.round(dx / geom.w); const dRow = Math.round(dy / geom.h); if (dCol === 0 && dRow === 0) { // nothing really moved selected.clear(); highlight(); return; } const moved = []; // Move the strands that intersected with the selection for (const id of selected) { for (const cell of curTopology.strands.get(id).path) { rGrid[cell.r][cell.c] = ""; moved.push({ ...cell, r: cell.r + dRow, c: cell.c + dCol }); } } // Move the non-strand, non-blank symbols for (const key of looseSymbols) { const [r0, c0] = key.split(",").map(Number); const ch = rGrid[r0][c0]; rGrid[r0][c0] = ""; const r1 = r0 + dRow, c1 = c0 + dCol; moved.push({ r: r1, c: c1, ch }); } for (const { r, c, ch } of moved) { if (r >= 0 && r < rows && c >= 0 && c < cols) { rGrid[r][c] = ch; } } selected.clear(); looseSymbols.clear(); render(); }; // Process drag actions (could be lexeme selection or painting) const drag = d3 .drag() .on("start", (event) => { if (event.sourceEvent.shiftKey) { drag.mode = "box"; boxStart(event); } else if (selected.size > 0) { drag.mode = "move"; moveStart(event); } else { drag.mode = "paint"; paint(event); } }) .on("drag", (event) => { if (drag.mode === "box") { boxDrag(event); } if (drag.mode === "move") { moveDragging(event); } if (drag.mode === "paint") { paint(event); } }) .on("end", (event) => { if (drag.mode === "box") { boxEnd(event); } if (drag.mode === "move") { moveEnd(event); } drag.mode = null; }); // ---------- Attach behaviour d3.select(svg.node()).call(drag); render(); return svg.node(); }34:T62e,function updateStateFromRiv(rivText) { // Clean input and split into rows const validChrs = "0-9\r\n ╭╮╯╰┌┐└┘╴╵╷╶│─"; const badChrExpr = new RegExp(`[^${validChrs}]`, "g"); const lines = rivText .replace(/\r\n?/g, "\n") .replace(badChrExpr, " ") .split("\n"); // How many leading columns are all spaces or digits? const colIsNumeric = (c) => lines.every((l) => { const ch = l[c] ?? " "; return ch === " " || /\d/.test(ch); }); const maxCols = Math.max(...lines.map((l) => l.length)); const firstBad = d3.range(maxCols).findIndex((c) => !colIsNumeric(c)); let gWidth = firstBad === -1 ? maxCols : firstBad; if (!lines.some((l) => /\d/.test(l.slice(0, gWidth)))) { gWidth = 0; // No digits found } // Pad label width to a minimum of 3 columns but split input at actual label width const labelWidth = Math.max(3, gWidth); const padLabel = (s) => s.padEnd(labelWidth, " "); const rLabels = lines.map((l) => padLabel(l.slice(0, gWidth))); const gridRows = lines.map((l) => l .slice(gWidth) .trimEnd() .split("") .map((ch) => ch.trim()) ); // Ensure grid is at least the minimum size const h = Math.max(minSize.h, gridRows.length); const w = Math.max(minSize.w, maxCols - gWidth); const rGrid = Array.from({ length: h }, (_, r) => Array.from({ length: w }, (_, c) => gridRows[r]?.[c] ?? "") ); while (rLabels.length < h) { rLabels.push(" ".repeat(labelWidth)); } // Update editor state mutable editorState = { rGrid, rLabels }; }35:T90c,function classifyStrand(path, grid) { const n = path.length; const start = path[0]; const end = path.at(-1); const { corners, refMarkers, vLines, hLines } = lex; const halfDash = new Set(["╶", "╴"]); const horizDir = new Set(["left", "right"]); const dir = (a, b) => a.r === b.r ? (a.c < b.c ? "right" : "left") : a.r < b.r ? "down" : "up"; // Is lexeme a hook? (end corner piece with/without a half-dash at open end) const isHook = (cell, neighbour) => corners.has(cell.ch) && (!neighbour || (halfDash.has(neighbour.ch) && horizDir.has(dir(cell, neighbour)))); // Find hook index (or -1 if no hook) const h = isHook(path[0]) ? 0 : isHook(path.at(-1)) ? n - 1 : n > 1 && isHook(path[1], path[0]) ? 1 : n > 1 && isHook(path.at(-2), path.at(-1)) ? n - 2 : -1; // No hook // If no hook, we may have a question strand if (h === -1) { const [iStart, iEnd] = start.ch === "╷" && end.ch !== "╷" ? [0, path.length - 1] : start.ch !== "╷" && end.ch === "╷" ? [path.length - 1, 0] : [null, null]; if (iStart === null) { return "unknown"; } const iSecond = iStart === 0 ? path.map((d) => d.ch).lastIndexOf("╷") : path.map((d) => d.ch).indexOf("╷"); // First part must be at least 3 lexes long if (iSecond < 3) { return "unknown"; } return path[iStart].c < path[iSecond].c ? "questionWhile" : "questionIf"; } // As we have a hook, must be a value, reference or action strand const hook = path[h]; const prev = h > 0 ? path[h - 1] : null; const next = h < n - 1 ? path[h + 1] : null; // Decide which neighbour is on the open arm const openDir = prev && halfDash.has(prev.ch) && horizDir.has(dir(hook, prev)) ? dir(hook, prev) : next && halfDash.has(next.ch) && horizDir.has(dir(hook, next)) ? dir(hook, next) : direction[hook.ch].find( (d) => d !== (prev ? dir(hook, prev) : dir(hook, next)) ); const other = path.at(h === 0 ? -1 : 0); if (openDir === "up" || openDir === "left") { return refMarkers.has(other.ch) ? "ref" : "value"; } return other.ch === "─" ? "actionList" : halfDash.has(other.ch) ? "actionList2List" : "actionCell"; }36:Tf36,function extractStrands(rGrid) { const key = (r, c) => `${r},${c}`; const rows = rGrid.length; const cols = rows ? rGrid[0].length : 0; const visited = new Set(); const [cellToStrand, strands] = [new Map(), new Map()]; let nextId = 0; for (let r = 0; r < rows; r += 1) { for (let c = 0; c < cols; c += 1) { const glyph = rGrid[r][c]; if (!(glyph in direction)) { continue; } if (visited.has(key(r, c))) { continue; } const act = activeDirs(r, c, rGrid); // ---------- Glyph marker (unconnected) const isVerticalTick = lex.glyphMarks.has(glyph); // ╵ or ╷ const hasVertNeighbour = (r > 0 && (direction[rGrid[r - 1][c]] ?? []).some((d) => { const [dr, dc] = direction[d]; return r - 1 + dr === r && c + dc === c; })) || (r < rows - 1 && (direction[rGrid[r + 1][c]] ?? []).some((d) => { const [dr, dc] = direction[d]; return r + 1 + dr === r && c + dc === c; })); if (isVerticalTick && !hasVertNeighbour) { const id = `s${nextId++}`; const cell = { r, c, ch: glyph }; visited.add(key(r, c)); cellToStrand.set(key(r, c), id); strands.set(id, { id, kind: glyph === "╵" ? "glyphStart" : "glyphEnd", path: [cell], bbox: { top: r, left: c, bottom: r, right: c } }); continue; } // ---------- Ignore non-connected non-markers if (act.length === 0) { continue; } // ---------- Follow strand (BFS) const stack = [{ r, c }]; const cells = []; while (stack.length) { const { r: rr, c: cc } = stack.pop(); const k = key(rr, cc); if (visited.has(k)) { continue; } visited.add(k); const dirsHere = activeDirs(rr, cc, rGrid); if (dirsHere.length === 0) { continue; } cells.push({ r: rr, c: cc, ch: rGrid[rr][cc] }); for (const dir of dirsHere) { const [dr, dc] = direction[dir]; stack.push({ r: rr + dr, c: cc + dc }); } } // ---------- Order the strand const cellSet = new Set(cells.map((p) => key(p.r, p.c))); const degree = (cell) => activeDirs(cell.r, cell.c, rGrid).length; const start = cells.find((cell) => degree(cell) === 1) ?? cells.reduce((a, b) => a.r < b.r || (a.r === b.r && a.c < b.c) ? a : b ); const ordered = []; const localVisited = new Set(); let cur = start, prevDir = null; while (cur && !localVisited.has(key(cur.r, cur.c))) { ordered.push(cur); localVisited.add(key(cur.r, cur.c)); const dirsHere = activeDirs(cur.r, cur.c, rGrid); const nextDir = dirsHere.find((dir) => { if (dir === direction.opposite[prevDir]) { return false; } const [dr, dc] = direction[dir]; return cellSet.has(key(cur.r + dr, cur.c + dc)); }); if (!nextDir) { break; } const [dr, dc] = direction[nextDir]; cur = cells.find((p) => p.r === cur.r + dr && p.c === cur.c + dc); prevDir = nextDir; } // ---------- Store lex/strand details. const id = `s${nextId++}`; for (const { r: rr, c: cc } of cells) { cellToStrand.set(key(rr, cc), id); } strands.set(id, { id, kind: classifyStrand(ordered, rGrid), path: ordered, bbox: { top: Math.min(...cells.map((p) => p.r)), left: Math.min(...cells.map((p) => p.c)), bottom: Math.max(...cells.map((p) => p.r)), right: Math.max(...cells.map((p) => p.c)) } }); } } return { cellToStrand, strands }; }37:Tbc9,function toSVG({ rGrid, lexIds, strands, rLabels }, options = {}) { const { width = 640, cellX = 100, cellY = 150, showGrid = true } = options; const boxes = Array.from(strands.values(), ({ bbox }) => bbox); const { minX, minY, maxX, maxY } = boxes.reduce( (a, { left, right, top, bottom }) => ({ minX: Math.min(a.minX, left), minY: Math.min(a.minY, top), maxX: Math.max(a.maxX, right), maxY: Math.max(a.maxY, bottom) }), { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity } ); const aspectRatio = (maxX - minX) / (maxY - minY); const header = ``; const strandText = [` `]; for (const strand of strands.values()) { let side = direction.down; // For single lexeme glyph marker strands // For multiple lexeme strands if (strand.path.length > 1) { const rSide = turn( [ strand.path[0].r - strand.path[1].r, strand.path[0].c - strand.path[1].c ], strand.path[0].ch ); side = rSide.map((d) => -d); } const dText = [ `M ${(strand.path[0].c + 0.5 - 0.5 * side[1]) * cellX} ${ (strand.path[0].r + 0.5 - 0.5 * side[0]) * cellY }` ]; strandToPath(strand.path, dText, side, cellX, cellY); strandText.push(``); } return `${header} ${grid} ${strandText.join("\n")} ${footer}`; }38:T50a,function strandToPath(path, dText, side, cellX, cellY) { const { up, down, left, right, equals } = direction; const gapIn = { "╷": direction.down, "╵": direction.up, "╶": direction.right, "╴": direction.left }; const gapOut = { "╷": direction.up, "╵": direction.down, "╶": direction.left, "╴": direction.right }; const halfLex = (v, cellX, cellY) => `${0.5 * cellX * v[1]} ${0.5 * cellY * v[0]}`; // Some lexemes have gaps in them. Whether gap in first or second half depends on direction for (const { ch } of path) { const nextSide = turn(side, ch); const inOpen = gapIn[ch] && equals(side, gapIn[ch]); const outOpen = gapOut[ch] && equals(nextSide, gapOut[ch]); if (side[0] !== nextSide[0]) { // Corner as quadratic Bézier const ctrlX = 0.5 * cellX * side[1]; const ctrlY = 0.5 * cellY * side[0]; const endX = ctrlX + 0.5 * cellX * nextSide[1]; const endY = ctrlY + 0.5 * cellY * nextSide[0]; dText.push(`q ${ctrlX} ${ctrlY} ${endX} ${endY}`); } else { dText.push( `${inOpen ? "m" : "l"} ${halfLex(side, cellX, cellY)}`, `${outOpen ? "m" : "l"} ${halfLex(nextSide, cellX, cellY)}` ); } side = nextSide; } return dText; }39:[] 30:{"id":"6f93fac6efcb4033","slug":"rivulet-editor","title":"Rivulet Editor","thumbnail":"83ebaf26ed18561eb7168a20475aeb80822d6c42ae6b00e14f291b77f913b5df","access_level":"public","create_time":"$D2025-05-24T07:55:41.832Z","update_time":"$D2025-06-21T11:18:30.313Z","view_time":null,"first_public_time":"$D2025-06-15T06:17:53.165Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":2104,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}],"members":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null,"role":"editor"},{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","role":"viewer"}],"comments":[{"id":"7426eb2f4586b95e","reply_to_id":null,"content":"Have you considered a purely key based input?\n1. move a cursor via the arrow keys\n2. hold shift to draw (or \"undraw\") in the direction of the arrow key instead of moving the cursor\n\nEx.: On an empty field, holding \"Shift\" ... \n1. pressing \"left\" then \"down\" would produce \"┓\"\n2. Pressing \"up\" would produce \"┛\" (automatically clearing the opposite end)\n3. pressing \"left would produce \"╹\" (clearing the left pointing end)\n4. pressing down would produce \"┃\"\n\nThere could be some quality-of-life features like automatic continuation. E.g., if the cursor is on the right of \"━\" and the current field is empty, pressing shift+up would produce \"┛\" instead of \"╹\", while pressing shift+right would produce another \"━\".","create_time":"$D2025-06-15T10:28:18.254Z","update_time":"$D2025-06-15T10:30:05.404Z","resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"4f22f3628aaa1f15","reply_to_id":null,"content":"Unfortunately you've run into a bug where republishing a paused notebook will cause its title to be displayed as \"Untitled\" in listings for everyone else if the last edit was made in the title cell. If you make an edit anywhere else and republish it should display correctly again.\n\n(The same applies to your other recently published notebooks of the series.)","create_time":"$D2025-06-15T10:36:08.912Z","update_time":"$D2025-06-15T10:37:35.710Z","resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"5df16c40c9c404d5","reply_to_id":"4f22f3628aaa1f15","content":"Thanks - I wan't aware of this bug.","create_time":"$D2025-06-15T11:40:36.588Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}},{"id":"c3652d4f052d8c25","reply_to_id":"7426eb2f4586b95e","content":"Some useful suggestions there - thanks. One complication is that when moving in a given direction there is potentially a choice between a full dash, a half dash with a near gap and a half dash with a far gap. Will need to think about how to manage all three, even if full length dashes are the most common.","create_time":"$D2025-06-15T11:42:04.654Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}},{"id":"245a8f2ce70eb2f0","reply_to_id":"7426eb2f4586b95e","content":"That's covered by deleting the near edge afterwards. I.e., for an empty field with only one open adjacent edge, a continuation always implicitly creates the near edge. Pressing the arrow for the near edge then deletes it. Ex: \"━\"\" \" with the cursor on \" \" + -> = \"━\"\"━\", + <- = \"━\"\"╺\"","create_time":"$D2025-06-15T11:58:54.575Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"2fe248bd588ca726","reply_to_id":"7426eb2f4586b95e","content":"Thanks. I've implemented something similar. Hopefully this is sufficiently intuitive to be able to build strands easily. The only minor issue is that I often start strands with the hook (corner lex). If the first point it is not possible to determine the desired direction, so this becomes a two stage process: Start with a straight lex, then retrace the end changing direction to insert the hook.","create_time":"$D2025-06-15T16:17:52.720Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"b719155d9d613f18","slug":"rivulet","title":"Rivulet","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"type":"notebook","body":{"title":"Rivulet Editor","cells":[{"id":0,"value":"# Rivulet Editor","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"_A simple interactive editor for [Rivulet](https://github.com/rottytooth/Rivulet) code._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":649,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1151,"value":"Programs are 'syntax highlighted' as follows: \n- Glyph marker: **start** / **end**\n- Data strand: **value** / **reference**\n- Action strand: **cell** / **cell-to-list** / **list-to-list**\n- Question strand: **if** / **while**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1384,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1325,"value":"viewof thickStrands = Inputs.toggle({ label: \"Thick strands?\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"viewof rivFile = Inputs.file({\n label: \"Load .riv file:\",\n accept: \".riv\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":296,"value":"$${DOM.download(\n () => {\n return new Blob([toRiv(editorState)], {\n type: \"application/txt\"\n });\n },\n `editor.riv`,\n `Save as .riv file`\n)} ${DOM.download(\n () => {\n return new Blob([toHtml(editorState)], {\n type: \"application/txt\"\n });\n },\n `snippet.html`,\n `Save as html snippet`\n)} \n\n${DOM.download(\n () => {\n return new Blob([toSVG(editorState,{width:900})], {\n type: \"application/txt\"\n });\n },\n `editor.svg`,\n `Save as SVG`\n)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"---\n## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":445,"value":"_Some simple array utilities:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":213,"value":"import { overwrite, zip } from \"@jwolondon/aoc-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":447,"value":"_The state of the editor, storing positioned lexemes and line number annotations:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":497,"value":"minSize = ({ w: 80, h: 26 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":256,"value":"mutable editorState = ({\n rLabels: lineNumbers(minSize.h), // 1 + primes by default\n rGrid: Array.from({ length: minSize.h }, () => Array(minSize.w).fill(\"\")),\n lexIds: new Map(),\n strands: new Map()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":486,"value":"mutable trigger = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"{\n // Update rivState in response to a .riv file being successfully loaded.\n if (rivFile === null) {\n return md`No file loaded`; // Leaves the return value displayed on the page as blank.\n }\n\n const fileText = await rivFile.text();\n mutable trigger = true;\n updateStateFromRiv(fileText);\n return md`_Editor updated with contents from_ **\\`${rivFile.name}\\`**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"_Prime number helper functions for generating line numbers:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":30,"value":"function isPrime(n) {\n const m = Math.floor(Math.sqrt(n));\n for (let i = 2; i <= m; i++) {\n if (n % i == 0) {\n return false;\n }\n }\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"function nextPrime(n) {\n let candidate = Math.floor(n) + 1;\n if (candidate < 2) {\n candidate = 2;\n }\n\n while (!isPrime(candidate)) {\n candidate += 1;\n }\n return candidate;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"function lineNumbers(n) {\n if (n <= 0) {\n return [];\n }\n return Array(n - 1)\n .fill(0)\n .reduce((acc, v) => [...acc, nextPrime(acc.at(-1))], [1])\n .map((d) => d.toString());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":449,"value":"_For converting between the editor state and output files:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":301,"value":"function toRiv({ rGrid, rLabels }) {\n const gridText = rGrid\n .map((row) =>\n row\n .map((d) => (d.trim().length === 0 ? \" \" : d))\n .join(\"\")\n .trimEnd()\n )\n .join(\"\\n\")\n .trimEnd();\n\n const gridLines = gridText.split(\"\\n\");\n const maxLen = d3.max(rLabels, (d) => d.trim().length);\n\n return zip(\n rLabels.map((d) => d.padStart(maxLen, \" \")),\n gridLines\n )\n .map((row) => row.join(\" \"))\n .join(\"\\n\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1514,"value":"function toHtml({ rGrid, lexIds, strands, rLabels }) {\n const gridText = rGrid\n .map((row, i) =>\n row\n .map((d, j) => {\n const id = d.trim() && lexIds.get(`${i},${j}`);\n return d.trim().length === 0\n ? \" \"\n : id\n ? `${d}`\n : d;\n })\n .join(\"\")\n .trimEnd()\n )\n .join(\"\\n\")\n .trimEnd();\n\n const gridLines = gridText.split(\"\\n\");\n const maxLen = d3.max(rLabels, (d) => d.trim().length);\n const content = zip(\n rLabels.map((d) => d.padStart(maxLen, \" \")),\n gridLines\n )\n .map((row) => row.join(\" \"))\n .join(\"\\n\");\n return `

\\n${content}\\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1261,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":920,"value":"_For strand identification and traversal:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1045,"value":"lex = ({\n corners: new Set([\"╭\", \"╮\", \"╯\", \"╰\", \"┌\", \"┐\", \"└\", \"┘\"]),\n refMarkers: new Set([\"╴\", \"╵\", \"╷\", \"╶\"]),\n glyphMarks: new Set([\"╵\", \"╷\"]),\n vLines: new Set([\"│\", \"╵\", \"╷\"]),\n hLines: new Set([\"─\", \"╴\", \"╶\"])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":894,"value":"direction = ({\n up: [-1, 0],\n right: [0, 1],\n down: [1, 0],\n left: [0, -1],\n opposite: { up: \"down\", down: \"up\", left: \"right\", right: \"left\" },\n equals: (d1, d2) => d1[0] === d2[0] && d1[1] === d2[1],\n\n \"─\": [\"left\", \"right\"],\n \"│\": [\"up\", \"down\"],\n \"╭\": [\"right\", \"down\"],\n \"┌\": [\"right\", \"down\"],\n \"╮\": [\"left\", \"down\"],\n \"┐\": [\"left\", \"down\"],\n \"╯\": [\"left\", \"up\"],\n \"┘\": [\"left\", \"up\"],\n \"╰\": [\"right\", \"up\"],\n \"└\": [\"right\", \"up\"],\n\n \"╴\": [\"left\", \"right\"],\n \"╶\": [\"left\", \"right\"],\n \"╵\": [\"up\", \"down\"],\n \"╷\": [\"down\", \"up\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1708,"value":"function turn(dir, lex) {\n return lex === \"╭\"\n ? [dir[0] + 1, dir[1] + 1]\n : lex === \"╮\"\n ? [dir[0] + 1, dir[1] - 1]\n : lex === \"╯\"\n ? [dir[0] - 1, dir[1] - 1]\n : lex === \"╰\"\n ? [dir[0] - 1, dir[1] + 1]\n : dir;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1979,"value":"function getCornerLex(from, to) {\n const map = {\n \"up-right\": \"╭\",\n \"right-down\": \"╮\",\n \"down-left\": \"╯\",\n \"left-up\": \"╰\",\n \"up-left\": \"╮\",\n \"left-down\": \"╭\",\n \"down-right\": \"╰\",\n \"right-up\": \"╯\"\n };\n return map[`${from}-${to}`] ?? \"\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":856,"value":"function activeDirs(r, c, grid) {\n const glyph = grid[r][c];\n return (direction[glyph] ?? []).filter(dir => {\n const [dr, dc] = direction[dir];\n const nr = r + dr;\n const nc = c + dc;\n if (nr < 0 || nc < 0 || nr >= grid.length || nc >= grid[0].length) {\n return false;\n }\n const ngh = grid[nr][nc];\n return (direction[ngh] ?? []).includes(direction.opposite[dir]);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":943,"value":"strandClrs = ({\n glyphStart: \"grey\",\n glyphEnd: \"grey\",\n value: \"rgb(161,58,48)\",\n ref: \"rgb(223,144,86)\",\n actionCell: \"rgb(0,80,159)\",\n actionList: \"rgb(112,95,176)\",\n actionList2List: \"rgb(160,77,169)\",\n questionIf: \"rgb(86,149,113)\",\n questionWhile: \"rgb(109,126,48)\",\n unknown: \"lightgrey\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1159,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":808,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1974,"value":"_For SVG conversion:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1567,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1803,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":685,"value":"_Editor style settings:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1450,"value":"editorClrs = ({\n pItem: \"#cce6ff\",\n bDown: \"#cce6ff\",\n bUp: \"#eee\",\n selected: \"rgb(236,203,96)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":683,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 31:"$30:body"