31:T769,viewof md_content = textarea({ title: "Content (in markdown)", placeholder: "Insert content here", width: "100%", rows: 10, value: `## Darl Jewel and I come up from the field, following the path in single file. Although I am fifteen feet ahead of him, anyone watching us from the cotton-house can see Jewel’s frayed and broken straw hat a full head above my own. The path runs straight as a plumb-line, worn smooth by feet and baked brick-hard by July, between the green rows of laid-by cotton, to the cotton-house in the centre of the field, where it turns and circles the cotton-house at four soft right angles and goes on across the field again, worn so by feet in fading precision. The cotton-house is of rough logs, from between which the chinking has long fallen. Square, with a broken roof set at a single pitch, it leans in empty and shimmering dilapidation in the sunlight, a single broad window in two opposite walls giving on to the approaches of the path. When we reach it I turn and follow the path which circles the house. Jewel, fifteen feet behind me, looking straight ahead, steps in a single stride through the window. Still staring straight ahead, his pale eyes like wood set into his wooden face, he crosses the floor in four strides with the rigid gravity of a cigar-store Indian dressed in patched overalls and endued with life from the hips down, and steps in a single stride through the opposite window and into the path again just as I come around the corner. In single file and five feet apart and Jewel now in front, we go on up the path toward the foot of the bluff. Tull’s wagon stands beside the spring, hitched to the rail, the reins wrapped about the seat stanchion. In the wagon-bed are two chairs. Jewel stops at the spring and takes the gourd from the willow branch and drinks. I pass him and mount the path, beginning to hear Cash’s saw.` })32:T179e,draw = ctx => { ctx.clearRect(0, 0, width, height); let columns = Math.floor(width / column_target); let gutter = lh; let cstep = width / columns; let column_offset = lh / 2; if (show_grid) { ctx.fillStyle = "#ddd"; for (let c = 0; c < columns; c++) { ctx.fillRect(c * cstep + column_offset, 0, cstep - gutter, height); } } let rows = Math.floor(height / lh); let row_offset = (height - rows * lh) / 2; if (show_grid) { ctx.strokeStyle = "black"; ctx.lineWidth = 1; for (let r = 0; r < rows; r++) { let y = r * lh + row_offset; ctx.strokeRect(1, y, width - 2, lh); } } ctx.textBaseline = "middle"; ctx.font = "normal 16px Inter UI"; ctx.fillStyle = "#000"; let cells = []; for (let c = 0; c < columns; c++) { for (let r = 0; r < rows; r++) { cells.push(null); } } function getIndex(column, row) { return column * rows + row; } function getColumnRow(index) { let row = index % rows; let column = Math.floor(index / rows); return [column, row]; } function findEmptyCell(index) { function _checkCell(index) { let cell = cells[index]; if (cell === null) { return index; } else if (index >= cells.length - 1) { return null; } else { return _checkCell(index + 1); } } return _checkCell(index); } // Do meta first let meta_cell_counter = 0; for (let e = 0; e < meta_ast.children.length; e++) { let elem = meta_ast.children[e]; if (elem.type === "paragraph") { ctx.font = `normal ${font_size}px Inter UI`; for (let n = 0; n < elem.children.length; n++) { let node = elem.children[n]; if (node.type === "text") { let lines = wrapText(ctx, node.value, lh, width - gutter, true); for (let l = 0; l < lines.length; l++) { meta_cell_counter = findEmptyCell(meta_cell_counter); if (meta_cell_counter !== null) { let row = meta_cell_counter % rows; let x = column_offset; if (l === 0) { x = x + lh; } let y = row * lh + lh / 2 + row_offset; ctx.fillText(lines[l][0], x, y); for (let c = 0; c < columns; c++) { let index = getIndex(c, row); cells[index] = lines[l][0]; } meta_cell_counter++; } } } } } else if (elem.type === "heading") { for (let n = 0; n < elem.children.length; n++) { let temp_lh = lh; let row_size = 1; if (elem.depth === 1) { ctx.font = `normal ${font_size * 2}px Inter UI`; temp_lh = lh * 2; row_size = 2; } else { ctx.font = `normal ${font_size}px Inter UI`; } let node = elem.children[n]; if (node.type === "text") { let lines = wrapText(ctx, node.value, temp_lh, width - gutter); for (let l = 0; l < lines.length; l++) { meta_cell_counter = findEmptyCell(meta_cell_counter); if (meta_cell_counter !== null) { let row = meta_cell_counter % rows; let x = column_offset; let y = row * temp_lh + temp_lh / 2 + row_offset; if (l === 0) { ctx.beginPath(); ctx.moveTo(x, y - temp_lh / 2); ctx.lineTo(width - column_offset, y - temp_lh / 2); ctx.stroke(); } ctx.fillText(lines[l][0], x, y); for (let c = 0; c < columns; c++) { for (let r = 0; r < row_size; r++) { let index = getIndex(c, r + row); cells[index] = lines[l][0]; } } for (let r = 0; r < row_size; r++) { meta_cell_counter++; } } } } } } } let cell_counter = 0; for (let e = 0; e < ast.children.length; e++) { let elem = ast.children[e]; if (elem.type === "paragraph") { ctx.font = `normal ${font_size}px Inter UI`; for (let n = 0; n < elem.children.length; n++) { let node = elem.children[n]; if (node.type === "text") { let lines = wrapText(ctx, node.value, lh, cstep - gutter, true); for (let l = 0; l < lines.length; l++) { cell_counter = findEmptyCell(cell_counter); if (cell_counter !== null) { let column = Math.floor(cell_counter / rows); let x = column * cstep + column_offset; if (l === 0) { x = x + lh; } let row = cell_counter % rows; let y = row * lh + lh / 2 + row_offset; ctx.fillText(lines[l][0], x, y); cells[cell_counter] = lines[l][0]; cell_counter++; } } } } } else if (elem.type === "heading") { for (let n = 0; n < elem.children.length; n++) { ctx.font = `normal ${font_size}px Inter UI`; let node = elem.children[n]; if (node.type === "text") { let lines = wrapText(ctx, node.value, lh, cstep - gutter); for (let l = 0; l < lines.length; l++) { cell_counter = findEmptyCell(cell_counter); if (cell_counter !== null) { let column = Math.floor(cell_counter / rows); let x = column * cstep + column_offset; let row = cell_counter % rows; let y = row * lh + lh / 2 + row_offset; if (l === 0) { ctx.beginPath(); ctx.moveTo(x, y - lh / 2); ctx.lineTo(x + cstep - gutter, y - lh / 2); ctx.stroke(); } ctx.fillText(lines[l][0], x, y); cells[cell_counter] = lines[l][0]; cell_counter++; } } } } } } console.log(cells); }33:[] 2f:{"title":"Layout Grid: experiment01","cells":[{"id":0,"value":"md`# Layout Grid: experiment01`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`Trying to keep these experiments short. This one features a meta content textarea that spans all the columns. The layout logic gets messy so very quickly if you're not careful (I wasn't careful here).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"canvas = {\n let canvas = document.createElement(\"canvas\");\n let dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = width + \"px\";\n canvas.style.height = height + \"px\";\n let ctx = canvas.getContext(\"2d\");\n ctx.scale(dpr, dpr);\n draw(ctx);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"viewof show_grid = checkbox({\n options: [{ value: \"show\", label: \"Show grid\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"viewof font_size = slider({\n min: 4,\n max: 24,\n step: 1,\n value: 16,\n title: \"Font size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"viewof line_height = slider({\n min: 1,\n max: 2,\n step: 0.1,\n value: 1.4,\n title: \"Line height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"viewof column_target = slider({\n min: 100,\n max: 600,\n step: 10,\n value: 200,\n title: \"Column minimum width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"viewof md_meta_content = textarea({\n title: \"Meta content (in markdown)\",\n placeholder: \"Insert content here\",\n width: \"100%\",\n rows: 6,\n value: `# As I Lay Dying\n\nby William Faulkner`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"function wrapText(ctx, text, lh, width, is_indented) {\n let words = text.split(\" \");\n let lines = [];\n let maxWidth = width;\n let indent_width = width - lh;\n let line = \"\";\n let x = 0;\n let y = 0;\n for (let n = 0; n < words.length; n++) {\n let testLine = n === 0 ? line + words[n] : line + \" \" + words[n];\n let metrics = ctx.measureText(testLine);\n let testWidth = metrics.width;\n let active_width = maxWidth;\n if (is_indented && lines.length === 0) active_width = indent_width;\n if (testWidth > active_width && n > 0) {\n lines.push([line, x, y]);\n line = words[n];\n y += lh;\n } else {\n line = testLine;\n }\n }\n lines.push([line, x, y]);\n return lines;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"meta_ast = remark.parse(md_meta_content)","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"ast = remark.parse(md_content)","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"lh = font_size * line_height","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"css = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"import {checkbox, textarea, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"remark = require(\"https://bundle.run/remark@10.0.1\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}