recalendar.js icon indicating copy to clipboard operation
recalendar.js copied to clipboard

Add dot grid option to Itinerary elements

Open gmg opened this issue 7 months ago • 2 comments

First iteration of adding dot grid option to Itinerary elements, including:

  • methods to render dot grid lines in Itinerary
  • UI to set dot grid option
  • config settings for dot grid option

Please note- I am not very experienced with React, so there's every possibility that I have not done this in the optimal way.

gmg avatar Nov 06 '23 01:11 gmg

After a bit more testing, it seems that this method does not work well with very large ReCalendar configs (more pages). If you choose a large number of pages with itineraries - months, days, weekly retrospectives - it will run out of memory when trying to render the full document. Smaller setups work, but take noticably longer that the original lines versions. File sizes are larger, but not excessively so.

At this point, I'm going to need to turn this over to smarter people. Rendering the dots as View elements obviously means 20x more visual elements compared to lines, which I'm guessing ends up being too much for the PDF renderer. Is there a more performant way of generating lines of dots?

gmg avatar Nov 06 '23 02:11 gmg

There seem to be a few alternatives for a more performant implementation:

  • https://react-pdf.org/components#canvas — This one might be the easiest to implement: you've already laid the groundwork in your code. Refactor renderGridLines to renderGrid and just draw the bullet points in a <Canvas> with circle() (see also: https://pdfkit.org/docs/vector.html#shape_helpers)
  • https://react-pdf.org/svg#defs — I'm not sure what support there is for SVG in PDF, but if we can define pattern fills we can make more fancy patterns and grids. Probably just a distraction. 😅

Oh! And make sure you rebase on top of master so the PR can be accepted!

mihaibirsan avatar Jan 28 '24 20:01 mihaibirsan