Rings in rings

Radial containers inside a radial container. A container with one child puts it at the center.

12 boxes0 edges0 findings

Edit it

# Rings in rings
galaxy radial nested {
  sun radial nested { planet-1 planet-2 planet-3 planet-4 planet-5 }
  binary radial nested { star-1 star-2 }
  lonely radial nested { moon }
}

12 boxes, 0 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": "galaxy",
    "layout": "radial",
    "mode": "nested",
    "children": [
      {
        "id": "sun",
        "layout": "radial",
        "mode": "nested",
        "children": [
          {
            "id": "planet-1"
          },
          {
            "id": "planet-2"
          },
          {
            "id": "planet-3"
          },
          {
            "id": "planet-4"
          },
          {
            "id": "planet-5"
          }
        ]
      },
      {
        "id": "binary",
        "layout": "radial",
        "mode": "nested",
        "children": [
          {
            "id": "star-1"
          },
          {
            "id": "star-2"
          }
        ]
      },
      {
        "id": "lonely",
        "layout": "radial",
        "mode": "nested",
        "children": [
          {
            "id": "moon"
          }
        ]
      }
    ]
  }
};

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