Open
Description
What did you do?
I created section with 2 column.
In right column we have group with images. In left - some text description.
I see that group of images does not fit to right column's width (you can see that group on screenshot below with purple background color).
What did you expect to happen?
Group fits to column's width.
I want to create something like here
What happened instead?
Group crosses column border
TPPDF Environment
TPPDF version: 2.3.5
Xcode version: 13.3.1
Swift version: 5
Demo Code / Project
func generateDocument() -> [PDFDocument] {
let textualItem = [
"Hello",
"World",
"Hello worid!"
]
let images = [
Image(named: "Image-2.jpg")!,
Image(named: "Image-2.jpg")!,
Image(named: "Image-2.jpg")!,
Image(named: "Image-2.jpg")!,
Image(named: "Image-2.jpg")!
]
let items = [
RowItem(textItems: textualItem, images: images),
RowItem(textItems: textualItem, images: images),
RowItem(textItems: textualItem, images: images),
RowItem(textItems: textualItem, images: images),
RowItem(textItems: textualItem, images: images),
RowItem(textItems: textualItem, images: images),
RowItem(textItems: textualItem, images: images)
]
let document = PDFDocument(format: .a4)
for item in items {
let leftColomn = PDFSectionColumn(width: 0.4)
let size = CGSize(width: document.layout.bounds.width, height: 200)
let path = PDFBezierPath(ref: CGRect(origin: .zero, size: size))
path.move(to: PDFBezierPathVertex(position: .init(x: size.width, y: 0), anchor: .topRight))
path.addLine(to: PDFBezierPathVertex(position: .init(x: size.width, y: size.height), anchor: .bottomRight))
let shape = PDFDynamicGeometryShape(path: path, fillColor: .white, stroke: .init(type: .full, color: .gray, width: 1, radius: 0))
let groupLeft = PDFGroup(
allowsBreaks: true,
backgroundColor: .white,
backgroundImage: nil,
backgroundShape: shape,
outline: .none,
padding: .init(top: 0, left: 0, bottom: 0, right: 0)
)
for nestedContent in item.textItems {
groupLeft.add(.left, text: nestedContent)
}
groupLeft.add(space: 8)
// setting color to clear allows to fit group to section colomn't width
groupLeft.addLineSeparator(style: .init(type: .full, color: .clear, width: 1, radius: 0))
leftColomn.add(group: groupLeft)
// right colomn
let rightColomn = PDFSectionColumn(width: 0.4)
let imageGroup = PDFGroup(
allowsBreaks: false,
backgroundColor: .purple,
backgroundImage: nil,
backgroundShape: .none,
outline: .none,
padding: EdgeInsets(top: 0, left: 8, bottom: 0, right: 0)
)
var images: [PDFImage] = []
for image in item.images {
let pdfImage = PDFImage(
image: image,
size: .init(width: 51, height: 51),
sizeFit: .widthHeight,
options: [.resize, .compress],
cornerRadius: 0
)
images.append(pdfImage)
}
imageGroup.add(space: 8)
imageGroup.add(.left, imagesInRow: images, spacing: 2)
imageGroup.add(space: 8)
rightColomn.add(group: imageGroup)
let section = PDFSection([leftColomn, rightColomn])
section.columnMargin = 0
document.add(section: section)
document.addLineSeparator(style: .init(type: .full, color: .black, width: 1, radius: 0))
document.add(space: 2)
}
return [document]
}
struct RowItem {
let textItems: [String]
let images: [Image]
}