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

feat!: dynamic row containers 🎉 #205

Merged

Conversation

maharshivpatel
Copy link
Collaborator

@maharshivpatel maharshivpatel commented Mar 27, 2024

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.

Format 1 ( Design ) Format 2 ( Design )
Current Current
Format 1 ( This PR ) Format 2 ( This PR )
Current Future
Format 1 ( Final Design - Separate PR ) Format 2 ( Final Design - Separate PR )
Current Future

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 maharshivpatel changed the title feat!: dynamic containers 🎉 feat!: dynamic row containers 🎉 Apr 1, 2024
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.
maharshivpatel and others added 2 commits April 1, 2024 17:48
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
@maharshivpatel maharshivpatel merged commit 25f883a into frappe:develop Apr 1, 2024
1 check passed
@maharshivpatel
Copy link
Collaborator Author

🎉 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
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant