Relative positioning when pagebreaks

[Sigill]

Hi everyone,

One of the need I have is to be able to display annotations (text and images) on top of images.

I've been doing that using relative positioning, by essentially vertically shifting my annotation up with the size of the image:

        {
          image: "data:image/png;base64...",
          width: mmToPt(100),
        },
        {
          text: "My annotation",
          relativePosition: {
            x: 0, 
            y: -mmToPt(100) // The image is 100mm tall, shift up by that amount.
          },
        },

It works fine, except when the bottom of the images comes close to the bottom margin of a page, as this cause the annotation to be placed after the pagebreak, and therefore positions to be computed relatively to the position on the next page.

I've only quickly looked at the code that handles relative positioning, and I'm open to any suggestion (I'm willing to contribute).

From what I've seen, I guess that we don't want to touch the relative positioning logic (because someone might expect relative content to be shifted to the next page).
Instead, I want to prototype the introduction of a new relative positioning strategy, where I'll indicate that I want my node to be positioned relatively to the position of the last inserted node (in my case, the top-left corner of my image).
It means that I'll probably need to keep track of the position of the previously inserted node. This would certainly be in DocumentContext, where I'll add this.px/py to store the previous value of this.x/y.
This would allow me to implement a new version of beginDetachedBlock()/endDetachedBlock() to assign/restore this.x/y to this.px/py and this.page to the previous page.

Any comment/suggestion is welcome, let me know if you see something wrong in my proposal (or if I've missed something more obvious).

[Sigill]

Oh, I think I found the trick:

        {
          stack: [
            {
              image: "data:image/png;base64...",,
              width: mmToPt(100),
            },
            {
              columns: [
                {
                  stack: [
                    {
                      text: "My annotation",
                      relativePosition: { x: 0, y: 0 },
                    },
                  ],
                  width: mmToPt(100), // Specify the "page" width for the second stack.
                },
              ],
              relativePosition: {
                y: -mmToPt(100), // Register everything with the top-left corner of the image.
              },
            },
          ],
          unbreakable: true
        },

The first stack allows me to declare unbreakable content, which prevents overflowing content to be pushed to the next page.

The columns is registered to the top left corner of the image. The benefit of using a columns is that I can specify the width of the column, basically allowing me to specify the "page" width (otherwise right-aligned content would be aligned with the right margin of the page).

I can't find any mention of unbreakable: true in the doc, I stumbled upon by chance. Have I missed it?