30: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.31: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(); }32: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 }; }33: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"; }34: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 }; }35: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}`; }36: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; }37:[] 2e:{"title":"Rivulet Editor","cells":[{"id":0,"value":"# Rivulet Editor","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"_A simple interactive editor for [Rivulet](https://github.com/rottytooth/Rivulet) code._","pinned":false,"hidden":false,"mode":"md"},{"id":649,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":1384,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1325,"value":"viewof thickStrands = Inputs.toggle({ label: \"Thick strands?\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"viewof rivFile = Inputs.file({\n label: \"Load .riv file:\",\n accept: \".riv\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":7,"value":"---\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":445,"value":"_Some simple array utilities:_","pinned":false,"hidden":false,"mode":"md"},{"id":213,"value":"import { overwrite, zip } from \"@jwolondon/aoc-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"_The state of the editor, storing positioned lexemes and line number annotations:_","pinned":false,"hidden":false,"mode":"md"},{"id":497,"value":"minSize = ({ w: 80, h: 26 })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":486,"value":"mutable trigger = false","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":48,"value":"_Prime number helper functions for generating line numbers:_","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"id":449,"value":"_For converting between the editor state and output files:_","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":1261,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"_For strand identification and traversal:_","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":1159,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1974,"value":"_For SVG conversion:_","pinned":false,"hidden":false,"mode":"md"},{"id":1567,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1803,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"_Editor style settings:_","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":683,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W37","stdlib":"1","titling":"auto"}