support cover for image element

[isamu]

Thank you for great library.

Based on #1906, I created PR.
It support cover option for image element.
It's a little different from this ticket, but it's used like this.

 {
   image: "coverImage", 
   cover: {width:  300, height: 150, valign: "bottom", align: "center" }  
  }

Unit tests have passed.
Please let us know if you have any other work for merge.

Thanks.

[liborm85]

Please add some example of usage to /examples/images.js.

[isamu]

Thanks for your feedback.
I added cover image example.

[liborm85]

Thanks.

[maganap]

Something seems to be not working properly with this cover feature, but I'm really not sure.

I added an image with a squared size cover configuration inside a single cell table (and the table is actually inside a column).

The table cell takes the aspect ratio of the original image, instead of the squared size, and the image overflows the cell. The container column doesn't adjust properly either (it expands as if it had width: '*', but it doesn't), I guess it's related to the width property for the column that is now part of the cover object.

The green border is a single cell table, and the image is the content of the cell:

It's supposed to look like this:

This latest one I achieved by forcing the single cell width and height to the same size of the squared image, but anyway I guess that's not the expected behaviour.

Does it make sense to be failing? If so, I can try to build a simple example because it's currently part of a very tricky document definition.

Thanks @isamu BTW, you saved me a lot of time with this cover feature.
Also thanks to this library team, way too useful! <3

[isamu]

@maganap
Thank you for your feed back.
I tested below code on playground and found that the table size is incorrect.

var dd = {
  content: [
    {
      columns: [{
        table: {
          widths: ['*', "*", "*"],
          body: [
            [{
              image: 'examples/fonts/sampleImage.jpg',
              cover: {width: 100, height: 100 },
            },
             {
              image: 'examples/fonts/sampleImage.jpg',
              cover: {width: 10, height: 120 },
            },
             {
              image: 'examples/fonts/sampleImage.jpg',
              cover: {width: 20, height: 20 },
            },
            ],

          ]
        },
      }]
    },
    
  ]
}

This issue is fixed with the following patch.

diff --git a/src/DocMeasure.js b/src/DocMeasure.js
index 8789228..f05005c 100644
--- a/src/DocMeasure.js
+++ b/src/DocMeasure.js
@@ -85,6 +85,9 @@ class DocMeasure {
                        let factor = (dimensions.width / dimensions.height > node.fit[0] / node.fit[1]) ? node.fit[0] / dimensions.width : node.fit[1] / dimensions.height;
                        node._width = node._minWidth = node._maxWidth = dimensions.width * factor;
                        node._height = dimensions.height * factor;
+               } else if (node.cover) {
+                       node._width = node._minWidth = node._maxWidth = node.cover.width;
+                       node._height = node._minHeight = node._maxHeight = node.cover.height;
                } else {
                        node._width = node._minWidth = node._maxWidth = node.width || dimensions.width;
                        node._height = node.height || (dimensions.height * node._width / dimensions.width);

If your problem is different from this, please give me a sample code for playgroud.

[isamu]

I created new PR #2669