recalendar.js
recalendar.js copied to clipboard
Add dot grid option to Itinerary elements
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.
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?
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
torenderGrid
and just draw the bullet points in a<Canvas>
withcircle()
(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!