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

fix(cloneCSSStyle): rounded values of d attribute fix #358

Merged
merged 1 commit into from
Jan 30, 2023

Conversation

AndrewN93
Copy link
Contributor

@AndrewN93 AndrewN93 commented Jan 5, 2023

There is a difference between values in actual d attribute of path and value that returns from window.getComputedStyles() object For some generated svg shapes at particular place is crutial to have exact values in order them to be displayed at all.

Closes #357

Description

There is a problem appears for path elements with precise values in d attribute on cloneCSSStyle step.
window.getComputedStyles() which is used to get styles to apply them on cloned element returns rounded values
which is wrong for some elements.
For e.g here I'm inspecting cloned element and the elements are actually present but because of rounded values after styles were copied they are invisible with height 0 and width 0:
image

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Enhancement (changes that improvement of current feature or performance)
  • Refactoring (changes that neither fixes a bug nor adds a feature)
  • Test Case (changes that add missing tests or correct existing tests)
  • Code style optimization (changes that do not affect the meaning of the code)
  • Docs (changes that only update documentation)
  • Chore (changes that don't modify src or test files)

Self Check before Merge

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

There is a difference between values in actual d attribute of path
and value that returns from window.getComputedStyles() object
For some generated svg shapes at particular place is crutial to have
exact values in order them to be displayed at all.

Closes bubkoo#357
@biiibooo
Copy link
Contributor

biiibooo bot commented Jan 5, 2023

👋 @AndrewN93

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

  • fix: don't overwrite prevent_default if default wasn't prevented
  • feat: add graph.scale() method
  • docs: graph.getShortestPath is now available

Things that will help get your PR across the finish line:

  • Follow the TypeScript coding style.
  • Run npm run lint locally to catch formatting errors earlier.
  • Document any user-facing changes you've made.
  • Include tests when adding/changing behavior.
  • Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

@codecov
Copy link

codecov bot commented Jan 5, 2023

Codecov Report

Base: 63.24% // Head: 63.24% // No change to project coverage 👍

Coverage data is based on head (6bac4a4) compared to base (1933175).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files
@@           Coverage Diff           @@
##           master     #358   +/-   ##
=======================================
  Coverage   63.24%   63.24%           
=======================================
  Files          10       10           
  Lines         555      555           
  Branches      129      129           
=======================================
  Hits          351      351           
  Misses        146      146           
  Partials       58       58           
Impacted Files Coverage Δ
src/clone-node.ts 75.92% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

@bubkoo bubkoo merged commit 6d28bdb into bubkoo:master Jan 30, 2023
@biiibooo biiibooo bot removed the PR: unreviewed label Jan 30, 2023
@biiibooo
Copy link
Contributor

biiibooo bot commented Jan 30, 2023

👋 @AndrewN93 Congrats on merging your first pull request! 🎉🎉🎉

@biiibooo biiibooo bot added the PR: merged label Jan 30, 2023
github-actions bot pushed a commit that referenced this pull request Jan 30, 2023
## [1.11.5](v1.11.4...v1.11.5) (2023-01-30)

### Bug Fixes

* **cloneCSSStyle:** rounded values of d attr fix ([#358](#358)) ([6d28bdb](6d28bdb)), closes [#357](#357)
* include source in npm package ([#316](#316)) ([b609415](b609415))
* switch lazy loading images to eager ([#359](#359)) ([f7c311b](f7c311b))
@biiibooo
Copy link
Contributor

biiibooo bot commented Jan 30, 2023

🎉 This PR is included in version 1.11.5 🎉

The release is available on:

Your semantic-release bot 📦🚀

@biiibooo biiibooo bot added the released label Jan 30, 2023
istaiti pushed a commit to inscreen/html-to-image that referenced this pull request Feb 7, 2023
There is a difference between values in actual d attribute of path
and value that returns from window.getComputedStyles() object
For some generated svg shapes at particular place is crutial to have
exact values in order them to be displayed at all.

Closes bubkoo#357
istaiti pushed a commit to inscreen/html-to-image that referenced this pull request Feb 7, 2023
## [1.11.5](bubkoo/html-to-image@v1.11.4...v1.11.5) (2023-01-30)

### Bug Fixes

* **cloneCSSStyle:** rounded values of d attr fix ([bubkoo#358](bubkoo#358)) ([6d28bdb](bubkoo@6d28bdb)), closes [bubkoo#357](bubkoo#357)
* include source in npm package ([bubkoo#316](bubkoo#316)) ([b609415](bubkoo@b609415))
* switch lazy loading images to eager ([bubkoo#359](bubkoo#359)) ([f7c311b](bubkoo@f7c311b))
istaiti pushed a commit to inscreen/html-to-image that referenced this pull request Feb 7, 2023
There is a difference between values in actual d attribute of path
and value that returns from window.getComputedStyles() object
For some generated svg shapes at particular place is crutial to have
exact values in order them to be displayed at all.

Closes bubkoo#357
istaiti pushed a commit to inscreen/html-to-image that referenced this pull request Feb 7, 2023
## [1.11.5](bubkoo/html-to-image@v1.11.4...v1.11.5) (2023-01-30)

### Bug Fixes

* **cloneCSSStyle:** rounded values of d attr fix ([bubkoo#358](bubkoo#358)) ([6d28bdb](bubkoo@6d28bdb)), closes [bubkoo#357](bubkoo#357)
* include source in npm package ([bubkoo#316](bubkoo#316)) ([b609415](bubkoo@b609415))
* switch lazy loading images to eager ([bubkoo#359](bubkoo#359)) ([f7c311b](bubkoo@f7c311b))
istaiti pushed a commit to inscreen/html-to-image that referenced this pull request Feb 7, 2023
There is a difference between values in actual d attribute of path
and value that returns from window.getComputedStyles() object
For some generated svg shapes at particular place is crutial to have
exact values in order them to be displayed at all.

Closes bubkoo#357
istaiti pushed a commit to inscreen/html-to-image that referenced this pull request Feb 7, 2023
## [1.11.5](bubkoo/html-to-image@v1.11.4...v1.11.5) (2023-01-30)

### Bug Fixes

* **cloneCSSStyle:** rounded values of d attr fix ([bubkoo#358](bubkoo#358)) ([6d28bdb](bubkoo@6d28bdb)), closes [bubkoo#357](bubkoo#357)
* include source in npm package ([bubkoo#316](bubkoo#316)) ([b609415](bubkoo@b609415))
* switch lazy loading images to eager ([bubkoo#359](bubkoo#359)) ([f7c311b](bubkoo@f7c311b))
istaiti pushed a commit to inscreen/html-to-image that referenced this pull request Feb 7, 2023
There is a difference between values in actual d attribute of path
and value that returns from window.getComputedStyles() object
For some generated svg shapes at particular place is crutial to have
exact values in order them to be displayed at all.

Closes bubkoo#357
istaiti pushed a commit to inscreen/html-to-image that referenced this pull request Feb 7, 2023
## [1.11.5](bubkoo/html-to-image@v1.11.4...v1.11.5) (2023-01-30)

### Bug Fixes

* **cloneCSSStyle:** rounded values of d attr fix ([bubkoo#358](bubkoo#358)) ([6d28bdb](bubkoo@6d28bdb)), closes [bubkoo#357](bubkoo#357)
* include source in npm package ([bubkoo#316](bubkoo#316)) ([b609415](bubkoo@b609415))
* switch lazy loading images to eager ([bubkoo#359](bubkoo#359)) ([f7c311b](bubkoo@f7c311b))
istaiti pushed a commit to inscreen/html-to-image that referenced this pull request Feb 7, 2023
There is a difference between values in actual d attribute of path
and value that returns from window.getComputedStyles() object
For some generated svg shapes at particular place is crutial to have
exact values in order them to be displayed at all.

Closes bubkoo#357
istaiti pushed a commit to inscreen/html-to-image that referenced this pull request Feb 7, 2023
## [1.11.5](bubkoo/html-to-image@v1.11.4...v1.11.5) (2023-01-30)

### Bug Fixes

* **cloneCSSStyle:** rounded values of d attr fix ([bubkoo#358](bubkoo#358)) ([6d28bdb](bubkoo@6d28bdb)), closes [bubkoo#357](bubkoo#357)
* include source in npm package ([bubkoo#316](bubkoo#316)) ([b609415](bubkoo@b609415))
* switch lazy loading images to eager ([bubkoo#359](bubkoo#359)) ([f7c311b](bubkoo@f7c311b))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Some SVG elements are not visible on resulting image
2 participants