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];
}
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++) {
let index = n + l;
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);
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++) {
let index = n + l;
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;
ctx.fillText(lines[l][0], x, y);
cell_counter++;
}
}
}
}
}
}