pdfme / pdfme

Open-source PDF generation library built with TypeScript and React. Features a WYSIWYG template designer, PDF viewer, and powerful generation capabilities. Create custom PDFs effortlessly in both browser and Node.js environments.
http://pdfme.com/
MIT License
2.66k stars 241 forks source link

Allow rotated elements to fit closer to the edge #284

Open peteward opened 1 year ago

peteward commented 1 year ago

Is your feature request related to a problem? Please describe.

When you have a rotated element, you may not be able to place it close to the edge. In the screenshot below you can see that the text box cannot be placed any further to the 'left' because it has an x value of 0:

Screenshot 2023-10-23 at 15 04 48

Describe the solution you'd like

Ideally, we would be able to arrange elements up to the edge of the canvas regardless of orientation.

We might possibly want to allow any schema to overlap off the canvas regardless of orientation, as long as some part of the schema is still on the canvas, but I'm not sure. There are cases where some fonts have a gap at the top even without rotation and you might want to drag the text box slightly off canvas to get the text right at the edge, so it is not just for rotation.

However, negative values might cause other issues in both UI and rendering so this needs to be carefully considered.

Describe alternatives you've considered

-

Additional context

No response

bdthurber commented 1 year ago

@peteward If you need a quick solution, there are a couple of current alternatives to "overflow" the pdf and get around the x !< 0 restriction as of the new V3.0.1 These WILL NOT work for versions earlier than V3

  1. Make the box wider and vertical align top to get to the side you want to
  2. Type in a negative value for x (you can't use the drag feature to do this)
peteward commented 1 year ago

thanks @bdthurber !

I'm mainly thinking about it from an end-user perspective, but good to know there's a workaround :)

lamhungypl commented 3 months ago

Maybe validate the snapped position (x,y) after rotation will resolve this problem