[Feature Request] Content threading through multiple `reflow`s.

[KDr2]

In the image above:

• The red ring is an obstacle.
• The two dotted orange rectangles are containers.
• The two blue-bordered areas(1 and 2(a circle)) are where I want to place/flow my text: first fill area 1 and then area 2.

The problem is that area 3 is part of the first container, so the text goes first into area (1+3), then (2-3).

A solution is putting the areas into two reflows with different obstacles, but doing that will break the text threading. Content is not shared between reflows. Could we find a way to make this possible?

Another solution is putting all the things in one reflow, but with a clear() command, which will clear all the obstacles and containers before it, causing the following layout computing to ignore them:

#meander.reflow.with(debug:true)({
  import meander: *

  placed(...)
  container(...)
  container(...)
  clear() # <--- new command
  
  placed(...)
  placed(...)
  container(...)
  container(...)

  content[
    #set par(justify: true)
    #lorem(570)
  ]
})

This functionality would be incredibly useful for creating complex layouts like magazine articles or graphic-heavy reports where content needs to flow in irregular shapes.

[KDr2]

I just saw this commit(bdfdf49), so with it, I guess we can thread multiple reflows with the overflow handler function:

#meander.reflow(debug: true, overflow: tt => meander.reflow(...), {
  import meander: *
  container()
  content[#lorem(1000)]
})

Is this the intended/valid usage?

[Vanille-N]

So initially bdfdf49 could not handle this because it would by default insert a new colbreak.
I've now made this possible (though not very convenient yet), and then we can see how to improve it.

[Vanille-N]

#import "/src/lib.typ" as meander

#let cutout-offset = 5cm
#let cutout-width = 10cm

#let norm(x,y) = calc.pow(2 * x - 1, 2) + calc.pow(2 * y - 1, 2)

// In charge of the right half of the page
#let handler-right(overflow) = {
  meander.reflow(
    overflow: panic,
    {
      import meander: *
      // Outer circle as obstacle
      placed(
        center, dy: cutout-offset,
        boundary: contour.grid(div: 20, (x,y) => norm(x,y) <= 1),
        box(width: cutout-width, height: cutout-width),
      )
      container(width: 48%, align: right)
      // `overflow.structured` is the correct way to pass the overflow to another `reflow`.
      // The alternatives are
      // - `overflow.styled`, only suitable if you use the overflow directly as content
      // - `overflow.raw`, more low-level
      overflow.structured
    }
  )
}

// In charge of the circular cutout
#let handler-center(overflow) = {
  meander.reflow(
    overflow: handler-right,
    {
      import meander: *
      // Inner circle as obstacle
      placed(
        center, dy: cutout-offset,
        boundary: contour.grid(div: 20, (x,y) => norm(x,y) >= 0.7),
        box(width: cutout-width, height: cutout-width),
      )
      container(align: center, dy: cutout-offset, width: cutout-width, height: cutout-width)
      overflow.structured
    }
  )
}

// In charge of the left half of the page
#meander.reflow(
  debug: false,
  overflow: handler-center,
  {
    import meander: *
    // Outer circle as obstacle
    placed(
      center, dy: cutout-offset,
      boundary: contour.grid(div: 20, (x,y) => norm(x,y) <= 1),
      box(width: cutout-width, height: cutout-width),
    )
    container(width: 48%)
    content[
      #set par(justify: true)
      #lorem(570)
    ]
  }
)

[Vanille-N]

[Vanille-N]

So now that we know this is at least feasible, here are some of my plans to make it more convenient.
Most are already in the roadmap, but I'll know to bump up their priority.

1. Previous containers as obstacles

Currently, containers do not count as obstacles during the tiling phase, but they do during the threading phase, leading to suboptimal page segmentation when there are multiple containers that overflow.

2. Positive contouring

Meander right now only has what I would call negative contouring, where you indirectly define the shape of your paragraph by specifying the spaces where you do not want text to go. I'm considering new ways of specifying containers with shapes defined on the container, not on the obstacles. In the example above, this limitation is visible during the definition of handler-center: what we want is a paragraph in the shape of a circle.
What we actually define is an obstacle in the shape of a square with a circular hole:

3. Ignoring previous obstacles

I don't like the idea of a clear function because I think it encourages putting unrelated layouts in the same invocation,
which is a bad idea for performance. I would replace it with a marker on container that allows it to ignore some labeled obstacle. As in, placed(label: "X", ...) then container(ignore: "X", ...) would make the container not view the placed (and other placed with the same label, as an obstacle.

4. Layers

Currently containers are necessarily filled in the same order that they are defined, and I'd like to change that.
So you could write container(layer: 1, ...) and it would get filled before all containers at the default layer 0, or container(layer: -1, ...) and it would get filled after.

Result

Unfortunately this specific layout is so complex that you probably need all of the above to make it really work.
But I think with all those in place, it could eventually look like:

#import "/src/lib.typ" as meander

#let cutout-offset = 5cm
#let cutout-width = 10cm

#let norm(x,y) = calc.pow(2 * x - 1, 2) + calc.pow(2 * y - 1, 2)

#meander.reflow(
  overflow: panic,
  {
    import meander: *
    container(
      align: center, dy: cutout-offset,
      width: cutout-width, height: cutout-height,
      boundary: contour.grid(div: 25, (x,y) => norm(x,y) <= 0.7)
    )
    container(layer: 1, width: 48%)
    container(align: right, width: 48%)
    content[
      #set par(justify: true)
      #lorem(570)
    ]
  }
)

[Vanille-N]

As of e788e69, the new recommended way of achieving this output is:

#import "/src/lib.typ" as meander

#let cutout-offset = 5cm
#let cutout-width = 10cm

#let norm(x,y) = calc.pow(2 * x - 1, 2) + calc.pow(2 * y - 1, 2)

#meander.reflow({
  import meander: *
  placed(
    center, dy: cutout-offset,
    boundary: contour.grid(div: 20, (x,y) => norm(x,y) <= 1),
    box(width: cutout-width, height: cutout-width),
    tags: (<interior>,),
  )
  placed(
    center, dy: cutout-offset,
    boundary: contour.grid(div: 20, (x,y) => norm(x,y) >= 0.7),
    box(width: cutout-width, height: cutout-width),
    tags: (<exterior>,),
  )
  container(
    width: 50% - 3mm,
    margin: 6mm,
    ignore-labels: (<exterior>,),
  )
  container(
    align: center, dy: cutout-offset,
    width: cutout-width, height: cutout-width,
    ignore-labels: (<interior>,),
  )
  container(
    ignore-labels: (<exterior>,),
  )
  content[
    #set par(justify: true)
    #lorem(570)
  ]
})

Further improvements to come.

[KDr2]

the new recommended way of achieving this

Thanks in advance for your active response! This solution is quite intuitive and straightforward, much better than the overflow callback one. 🥳