Mixed strategies

Each container selects its own strategy and mode: a radial container of grids, with a linked tree inside one cell.

18 boxes4 edges0 findings

Edit it

# Mixed strategies
hub radial nested {
  grid-a nested { a1 a2 a3 a4 }
  'tree' {
    t1 { t1-1 t1-2 }
    t2
  }
  grid-b grid(columns: 3) nested { b1 b2 b3 b4 b5 b6 }
}

18 boxes, 4 edges. The audit finds no defect.

The input

The same layout in TypeScript. The input is plain data, so it can come from JSON.

import { layout } from "ireko";

const input = {
  "root": {
    "id": "hub",
    "layout": "radial",
    "mode": "nested",
    "children": [
      {
        "id": "grid-a",
        "mode": "nested",
        "children": [
          {
            "id": "a1"
          },
          {
            "id": "a2"
          },
          {
            "id": "a3"
          },
          {
            "id": "a4"
          }
        ]
      },
      {
        "id": "tree",
        "children": [
          {
            "id": "t1",
            "children": [
              {
                "id": "t1-1"
              },
              {
                "id": "t1-2"
              }
            ]
          },
          {
            "id": "t2"
          }
        ]
      },
      {
        "id": "grid-b",
        "mode": "nested",
        "layout": {
          "type": "grid",
          "columns": 3
        },
        "children": [
          {
            "id": "b1"
          },
          {
            "id": "b2"
          },
          {
            "id": "b3"
          },
          {
            "id": "b4"
          },
          {
            "id": "b5"
          },
          {
            "id": "b6"
          }
        ]
      }
    ]
  }
};

const result = layout(input, {"nodeSize":{"width":64,"height":32},"spacing":14});