/* Press "Run layout" to register the worklet, then copy the CSS here. */

class Masonry {
  static get inputProperties() { return ["--columns"]; }
  async intrinsicSizes() {}
  async layout(children, edges, constraints, styleMap) {
    const columns = Math.max(1, parseInt(styleMap.get("--columns").toString(), 10) || 3);
    const width = constraints.fixedInlineSize;
    const colWidth = (width - edges.inline) / columns;
    const heights = new Array(columns).fill(0);
    const childFragments = [];
    for (const child of children) {
      const frag = await child.layoutNextFragment({ fixedInlineSize: colWidth });
      let col = 0;
      for (let i = 1; i < columns; i++) {
        if (heights[i] < heights[col]) col = i;
      }
      frag.inlineOffset = edges.inlineStart + col * colWidth;
      frag.blockOffset = edges.blockStart + heights[col];
      heights[col] += frag.blockSize;
      childFragments.push(frag);
    }
    return { autoBlockSize: Math.max.apply(null, heights), childFragments };
  }
}
registerLayout("my-layout", Masonry);