Print a 2D grid of nodes.

fixtures.ts

const layout = {
  type: 'grid',
  columns: 24,
  rows: 18,
  children: [
    {
      type: 'row',
      width: 'auto',
      height: 'auto',
      children: [
        { type: 'space', width: 'fill', height: 'fill' },
        {
          type: 'column',
          width: 'auto',
          height: 'auto',
          children: [
            { type: 'space', width: 'fill', height: 'fill' },
            { type: 'node', columns: 1, rows: 1, width: 20, height: 14 },
            { type: 'space', width: 'fill', height: 'fill' },
          ],
        },
        { type: 'space', width: 'fill', height: 'fill' },
      ],
    },
  ],
} as const

const computedLayout = {
  type: 'grid',
  columns: 24,
  rows: 18,
  width: 24,
  height: 18,
  children: [
    {
      type: 'row',
      width: 20,
      height: 18,
      children: [
        {
          type: 'space',
          column: 1,
          row: 1,
          width: 2,
          height: 18,
        },
        {
          type: 'column',
          column: 3,
          row: 1,
          width: 20,
          height: 18,
          children: [
            {
              type: 'space',
              column: 3,
              row: 1,
              width: 20,
              height: 2,
            },
            {
              type: 'node',
              column: 3,
              row: 3,
              width: 20,
              height: 14,
            },
            {
              type: 'space',
              column: 3,
              row: 17,
              width: 20,
              height: 2,
            },
          ],
        },
        {
          type: 'space',
          column: 22,
          row: 1,
          width: 2,
          height: 14,
        },
      ],
    },
  ],
} as const

const flattenedLayout = {
  type: 'grid',
  columns: 24,
  rows: 18,
  width: 24,
  height: 18,
  children: [
    {
      type: 'node',
      column: 3,
      row: 3,
      width: 20,
      height: 14,
    },
  ],
} as const

printLayout.ts

import chalk from 'chalk'
import { math } from 'canvas-sketch-util'
import { color } from 'd3-color'
import { interpolateRgb } from 'd3-interpolate'

type Node = {
  type: 'grid' | 'row' | 'column' | 'space' | 'node'
  parentType: 'grid' | 'row' | 'column'
  columns: number
  rows: number
  column: number
  row: number
  width: number | 'fill' | 'auto'
  height: number | 'fill' | 'auto'
  children: Node[]
}

/** Prints a 2D grid of nodes to the console for debugging purposes. */
export function printLayout({
  layout,
  lowColor = '#a5c5eb',
  highColor = '#ffd800',
}: {
  layout: Node
  lowColor?: string
  highColor?: string
}) {
  const colorStops = math
    .linspace(layout.children.length, true)
    .map((stop) => color(interpolateRgb(lowColor, highColor)(stop))?.rgb())
  const rows = []

  for (let rowIndex = 0; rowIndex < layout.rows; rowIndex++) {
    const columns = []

    for (let columnIndex = 0; columnIndex < layout.columns; columnIndex++) {
      /** Fill grid with a cell */
      columns.push('◼︎')

      /** Color in cell if any nodes are in range */
      layout.children.forEach((node, index) => {
        const inRange = isNodeInRange(node, columnIndex, rowIndex)
        const colorStop = colorStops[index]

        if (colorStop && inRange) {
          columns[columnIndex] = chalk.rgb(
            colorStop.r,
            colorStop.g,
            colorStop.b
          )('◼︎')
        }
      })
    }

    rows.push(columns)
  }

  console.log(rows.map((row) => row.join(' ')).join('\n'))
}

function isNodeInRange(node: any, columnIndex: number, rowIndex: number) {
  const minColumnIndex = node.column - 1
  const maxColumnIndex = minColumnIndex + node.width
  const minRowIndex = node.row - 1
  const maxRowIndex = minRowIndex + node.height
  const inRange =
    minColumnIndex <= columnIndex &&
    columnIndex < maxColumnIndex &&
    minRowIndex <= rowIndex &&
    rowIndex < maxRowIndex

  return inRange
}