Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Group doesn't fit inside section column #305

Open
tarasChernysh opened this issue Aug 30, 2022 · 1 comment
Open

Group doesn't fit inside section column #305

tarasChernysh opened this issue Aug 30, 2022 · 1 comment
Labels

Comments

@tarasChernysh
Copy link

tarasChernysh commented Aug 30, 2022

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).
Screenshot 2022-08-30 at 17 11 51
Screenshot 2022-08-30 at 17 12 33

What did you expect to happen?

Group fits to column's width.
I want to create something like here
Screenshot 2022-08-30 at 17 46 43

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]
}

@philprime
Copy link
Member

Thanks for creating this issue (and sorry for the late response).
This definitely seems like a bug, as the purple boxes are aligning with the trailing edge of the text and not with the section divider

@philprime philprime added the bug label Dec 3, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants