Children on each side

The grid strategy puts linked children below, above, left or right of their parent.

13 boxes8 edges0 findings

Edit it

# Children on each side
center grid(columns: 2) nested {
  down grid(side: bottom) { d1 d2 }
  up grid(side: top) { u1 u2 }
  right grid(side: right) { r1 r2 }
  left grid(side: left) { l1 l2 }
}

13 boxes, 8 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": "center",
    "mode": "nested",
    "layout": {
      "type": "grid",
      "columns": 2
    },
    "children": [
      {
        "id": "down",
        "layout": {
          "type": "grid",
          "side": "bottom"
        },
        "children": [
          {
            "id": "d1"
          },
          {
            "id": "d2"
          }
        ]
      },
      {
        "id": "up",
        "layout": {
          "type": "grid",
          "side": "top"
        },
        "children": [
          {
            "id": "u1"
          },
          {
            "id": "u2"
          }
        ]
      },
      {
        "id": "right",
        "layout": {
          "type": "grid",
          "side": "right"
        },
        "children": [
          {
            "id": "r1"
          },
          {
            "id": "r2"
          }
        ]
      },
      {
        "id": "left",
        "layout": {
          "type": "grid",
          "side": "left"
        },
        "children": [
          {
            "id": "l1"
          },
          {
            "id": "l2"
          }
        ]
      }
    ]
  }
};

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