From 21585e03cfcc47ad283c162e4a2959ea5f8fbd6f Mon Sep 17 00:00:00 2001 From: PgBiel <9021226+PgBiel@users.noreply.github.com> Date: Wed, 17 Jan 2024 12:52:28 -0300 Subject: Table cell `x` and `y` fields [More Flexible Tables Pt.2b] (#3050) --- tests/typ/layout/grid-cell.typ | 22 ++++ tests/typ/layout/grid-positioning.typ | 223 ++++++++++++++++++++++++++++++++++ tests/typ/layout/table-cell.typ | 22 ++++ 3 files changed, 267 insertions(+) create mode 100644 tests/typ/layout/grid-positioning.typ (limited to 'tests/typ') diff --git a/tests/typ/layout/grid-cell.typ b/tests/typ/layout/grid-cell.typ index ced16a97..425d036c 100644 --- a/tests/typ/layout/grid-cell.typ +++ b/tests/typ/layout/grid-cell.typ @@ -105,3 +105,25 @@ [Sweet], [Italics] ) } + +--- +// Style based on position +#{ + show grid.cell: it => { + if it.y == 0 { + strong(it) + } else if it.x == 1 { + emph(it) + } else { + it + } + } + grid( + columns: 3, + gutter: 3pt, + [Name], [Age], [Info], + [John], [52], [Nice], + [Mary], [50], [Cool], + [Jake], [49], [Epic] + ) +} diff --git a/tests/typ/layout/grid-positioning.typ b/tests/typ/layout/grid-positioning.typ new file mode 100644 index 00000000..ca71cb37 --- /dev/null +++ b/tests/typ/layout/grid-positioning.typ @@ -0,0 +1,223 @@ +// Test cell positioning in grids. + +--- +#{ + show grid.cell: it => (it.x, it.y) + grid( + columns: 2, + inset: 5pt, + fill: aqua, + gutter: 3pt, + [Hello], [World], + [Sweet], [Home] + ) +} +#{ + show table.cell: it => pad(rest: it.inset)[#(it.x, it.y)] + table( + columns: 2, + gutter: 3pt, + [Hello], [World], + [Sweet], [Home] + ) +} + +--- +// Positioning cells in a different order than they appear +#grid( + columns: 2, + [A], [B], + grid.cell(x: 1, y: 2)[C], grid.cell(x: 0, y: 2)[D], + grid.cell(x: 1, y: 1)[E], grid.cell(x: 0, y: 1)[F], +) + +--- +// Creating more rows by positioning out of bounds +#grid( + columns: 3, + rows: 1.5em, + inset: 5pt, + fill: (x, y) => if (x, y) == (0, 0) { blue } else if (x, y) == (2, 3) { red } else { green }, + [A], + grid.cell(x: 2, y: 3)[B] +) + +#table( + columns: (3em, 1em, 3em), + rows: 1.5em, + inset: (top: 0pt, bottom: 0pt, rest: 5pt), + fill: (x, y) => if (x, y) == (0, 0) { blue } else if (x, y) == (2, 3) { red } else { green }, + align: (x, y) => (left, center, right).at(x), + [A], + table.cell(x: 2, y: 3)[B] +) + +--- +// Error: 3:3-3:42 attempted to place a second cell at column 0, row 0 +// Hint: 3:3-3:42 try specifying your cells in a different order +#grid( + [A], + grid.cell(x: 0, y: 0)[This shall error] +) + +--- +// Error: 3:3-3:43 attempted to place a second cell at column 0, row 0 +// Hint: 3:3-3:43 try specifying your cells in a different order +#table( + [A], + table.cell(x: 0, y: 0)[This shall error] +) + +--- +// Automatic position cell skips custom position cell +#grid( + grid.cell(x: 0, y: 0)[This shall not error], + [A] +) + +--- +// Error: 4:3-4:36 cell could not be placed at invalid column 2 +#grid( + columns: 2, + [A], + grid.cell(x: 2)[This shall error] +) + +--- +// Partial positioning +#grid( + columns: 3, + rows: 1.5em, + inset: 5pt, + fill: aqua, + [A], grid.cell(y: 1, fill: green)[B], [C], grid.cell(x: auto, y: 1, fill: green)[D], [E], + grid.cell(y: 2, fill: green)[F], grid.cell(x: 0, fill: orange)[G], grid.cell(x: 0, y: auto, fill: orange)[H], + grid.cell(x: 1, fill: orange)[I] +) + +#table( + columns: 3, + rows: 1.5em, + inset: 5pt, + fill: aqua, + [A], table.cell(y: 1, fill: green)[B], [C], table.cell(x: auto, y: 1, fill: green)[D], [E], + table.cell(y: 2, fill: green)[F], table.cell(x: 0, fill: orange)[G], table.cell(x: 0, y: auto, fill: orange)[H], + table.cell(x: 1, fill: orange)[I] +) + +--- +// Error: 4:3-4:21 cell could not be placed in row 0 because it was full +// Hint: 4:3-4:21 try specifying your cells in a different order +#grid( + columns: 2, + [A], [B], + grid.cell(y: 0)[C] +) + +--- +// Error: 4:3-4:22 cell could not be placed in row 0 because it was full +// Hint: 4:3-4:22 try specifying your cells in a different order +#table( + columns: 2, + [A], [B], + table.cell(y: 0)[C] +) + +--- +// Doc example 1 +#set page(width: auto) +#show grid.cell: it => { + if it.y == 0 { + set text(white) + strong(it) + } else { + // For the second row and beyond, we will write the day number for each + // cell. + + // In general, a cell's index is given by cell.x + columns * cell.y. + // Days start in the second grid row, so we subtract 1 row. + // But the first day is day 1, not day 0, so we add 1. + let day = it.x + 7 * (it.y - 1) + 1 + if day <= 31 { + // Place the day's number at the top left of the cell. + // Only if the day is valid for this month (not 32 or higher). + place(top + left, dx: 2pt, dy: 2pt, text(8pt, red.darken(40%))[#day]) + } + it + } +} + +#grid( + fill: (x, y) => if y == 0 { gray.darken(50%) }, + columns: (30pt,) * 7, + rows: (auto, 30pt), + // Events will be written at the bottom of each day square. + align: bottom, + inset: 5pt, + stroke: (thickness: 0.5pt, dash: "densely-dotted"), + + [Sun], [Mon], [Tue], [Wed], [Thu], [Fri], [Sat], + + // This event will occur on the first Friday (sixth column). + grid.cell(x: 5, fill: yellow.darken(10%))[Call], + + // This event will occur every Monday (second column). + // We have to repeat it 5 times so it occurs every week. + ..(grid.cell(x: 1, fill: red.lighten(50%))[Meet],) * 5, + + // This event will occur at day 19. + grid.cell(x: 4, y: 3, fill: orange.lighten(25%))[Talk], + + // These events will occur at the second week, where available. + grid.cell(y: 2, fill: aqua)[Chat], + grid.cell(y: 2, fill: aqua)[Walk], +) + +--- +// Doc example 2 +#set page(width: auto) +#show table.cell: it => { + if it.x == 0 or it.y == 0 { + set text(white) + strong(it) + } else if it.body == [] { + // Replace empty cells with 'N/A' + pad(rest: it.inset)[_N/A_] + } else { + it + } +} + +#table( + fill: (x, y) => if x == 0 or y == 0 { gray.darken(50%) }, + columns: 4, + [], [Exam 1], [Exam 2], [Exam 3], + ..([John], [Mary], [Jake], [Robert]).map(table.cell.with(x: 0)), + + // Mary got grade A on Exam 3. + table.cell(x: 3, y: 2, fill: green)[A], + + // Everyone got grade A on Exam 2. + ..(table.cell(x: 2, fill: green)[A],) * 4, + + // Robert got grade B on other exams. + ..(table.cell(y: 4, fill: aqua)[B],) * 2, +) + +--- +// Error: 5:3-5:39 cell position too large +#grid( + columns: 3, + rows: 2em, + fill: (x, y) => if calc.odd(x + y) { red.lighten(50%) } else { green }, + grid.cell(y: 6148914691236517206)[a], +) + +--- +// Error: 5:3-5:46 cell position too large +#table( + columns: 3, + rows: 2em, + fill: (x, y) => if calc.odd(x + y) { red.lighten(50%) } else { green }, + table.cell(x: 2, y: 6148914691236517206)[a], +) diff --git a/tests/typ/layout/table-cell.typ b/tests/typ/layout/table-cell.typ index a4d3bba4..d79298ae 100644 --- a/tests/typ/layout/table-cell.typ +++ b/tests/typ/layout/table-cell.typ @@ -100,3 +100,25 @@ [John], [Dog] ) } + +--- +// Style based on position +#{ + show table.cell: it => { + if it.y == 0 { + strong(it) + } else if it.x == 1 { + emph(it) + } else { + it + } + } + table( + columns: 3, + gutter: 3pt, + [Name], [Age], [Info], + [John], [52], [Nice], + [Mary], [50], [Cool], + [Jake], [49], [Epic] + ) +} -- cgit v1.2.3