feat!: dynamic row containers 🎉 #205
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This property is how user can configure if some element should have fixed height or should be dynamically adjusted. This will not ensure that it will have dynamically calculated height as it will depend on several factors This is just to give them control to choose between static and dynamic height.
childernSave, childernLoad & handleDynamicContent can be used at other places so converted them to actions.
now, when we save Print Format, data that jinja template uses will be saved in print_designer_print_format field. misc - updated default for isDynamicHeight to False.
display: inline-flex is not supported by wkhtmltopdf. It was added in hope that we will make it work somehow in the future. This commit removes the globalStyles rectangle style as it was conflicting with relative containers.
Added function in JS and Python to check if schema version in format is older than current schema version. This is useful for checking if a schema update is needed or handle different logic based on version. misc: bumped version to 1.1.0
- added isElementOverlapping function takes elements
and checks if any other element is overlapping with it or not.
- created checkUpdateElementOverlapping util function when called
it will loop over all the parent level elements and
check and update any element's isElementOverlapping property if it is changed.
- updated isDynamicHeight in propertiesPanel to show only when
element is table or dynamicText and isElementOverlapping is false.
- Subscribed to ElementStore in onMounted of canvas to call checkUpdateElementOverlapping
when any new elements are added.
- when any element is deleted, dragged or resized using mouse or keyboard shortcuts
run checkUpdateElementOverlapping
- added .error class which basically makes text red
if dynamic text includes "page_info" and is in body container.
- computeLayout function loops over this.Elements
divides them into possible rows ( dynamic containers ) based on their start and end locations.
returns three arrays, header, body ( can have multiple containers ) and footer.
- separated logic into smaller functions and changed structure for save a bit for dynamic containers.
- checkIfAnyTableIsEmpty
- handleHeaderFooterOverlapping
- autoCalculateHeaderFooter
- cleanUpElementsForSave
- checkIfPrintFormatIsEmpty
- childrensSave
- calculate dimensions of the container based on the childerns dimensions
- create wrapper element for the container that will have position relative
height will be decided based on it's childerns condition
- save this data in print_designer_print_format that will be used by new jinja template.
- removed auto generated table element
- moved settings load logic to a separate function
to avoid race condition and simplify the code
- refactored jinja template and separated it to smaller files for maintainability
- added concept of relative containers that are rendered on main/parent array loop.
- added logic to decide if a container has dynamicHeight or not
- If main/parent container's isDynamicHeight = true
if children's type is dynamic-text or table, it will not set height property and set margin-top instead of top property
( top property's space is not calculated as part of parent's DOM height, so it will not work as expected )
- If main/parent container's isDynamicHeight = false
logic will be same as before. it will be inside a dynamic container.
- new template is not compatible with old schema ( formats created/updated for this PR ).
- if print_formats schema version is less then 1.1.0, it will use old template.
- misc: removed duplicate code and called get_print_format_template.
- update page header/footer height with margin before computing layout - update startY of header elements with margin - update footer conditional to account for margin
for a long time, print designer formats only looked correct in pdf, not in print-view. this commit fixes print-view to look similar to print designer designs of-course repeating header/footer won't work in print-view, but that's a different issue fixes frappe#191
use css comments syntax :D
reason to do this is scroll affects getBoundingClientRect values. we also have the values already saved so no need to calculate again. side effect: Its faster than the old implementation, in real world no noticeable difference. If someday someone creates 1000 page elements, this will be faster 10 ms XD. old: 83.455810546875 ms new: 73.48681640625 ms
As in framework we recently started using cssparser to parse css files, previous css style fix was broken and PDF options parsing wasn't working. changed the approach so it will work in both pdf and print-view.
maharshivpatel
changed the title
maharshivpatel
added a commit
to maharshivpatel/print_designer
that referenced
this pull request
Apr 1, 2024
This is continuation of the frappe#205 PR. There are some issue with PDF generated by table component and I am working on it. I will update the PR once I fix the issue.
on save of older schema show dialog and make copy of print format it will keep making copy with incremented version number ( Copy 1 ), ( Copy 2 ), ( Copy 3 ) etc. misc: added try catch block in removing deleteRule
This was referenced Apr 1, 2024
|
🎉 This PR is included in version 1.1.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
fixes #102
This PR will automatically calculate possible dynamic container layout for the user.
please look at images below.
black lines represents rows and columns.
This PR only handles splitting formats into rows.
columns implementation is also almost done to handle more use case.
- there is some wkhtmltopdf issue so it will be merged in separate PR
each black box with only 1 element can have dynamic height.