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.

Sign up for GitHub

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

Jump to bottom

fix: scaling when mask is set #2299

Merged
merged 12 commits into from
Jun 26, 2024
Merged

fix: scaling when mask is set #2299

merged 12 commits into from
Jun 26, 2024

Conversation

jakex7
Copy link
Member

@jakex7 jakex7 commented Jun 12, 2024 •
edited
Loading

Summary

This PR resolves an issue raised in #1451.
Currently, when a mask is used, we render the element as a bitmap (or platform equivalent), but the bitmap's size does not update accordingly with transformations. With these changes, the problem is addressed as follows:

  • Android: We utilize the original canvas layers to render the mask and element with the appropriate blending mode.
  • iOS: We create an offscreen context with the size multiplied by the screen scale and apply the original UIGraphics CTM (current transformation matrix) to the offscreen context. This ensures that the same transformations are applied as on the original context.

Additionally, there is a significant performance improvement on Android as we are not creating three new Bitmaps and three new Canvases.

Test Plan

There are many ways for testing these changes, but the required ones are:

  • TestsExample app -> Test1451.tsx
  • Example app -> Mask section
  • FabricExample app -> Mask section

Compatibility

OS Implemented
Android ✅
iOS ✅

Preview

image image

@jakex7 jakex7 requested a review from WoLewicki June 12, 2024 14:02
WoLewicki
WoLewicki reviewed Jun 13, 2024
View reviewed changes
Copy link
Member

@WoLewicki WoLewicki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please test it on many different examples since it changes the mask drawing logic. I also left some comments, please answer them. Looks good overall 🚀

android/src/main/java/com/horcrux/svg/RenderableView.java Show resolved Hide resolved
apple/RNSVGRenderable.mm Outdated Show resolved Hide resolved
apple/RNSVGRenderable.mm Outdated Show resolved Hide resolved
@jakex7 jakex7 requested a review from WoLewicki June 14, 2024 08:39
@jakex7
Copy link
Member Author

jakex7 commented Jun 14, 2024

Please test it on many different examples since it changes the mask drawing logic. I also left some comments, please answer them. Looks good overall 🚀

I can confirm that all examples from these sites as well as a few random images found on the web are working as expected
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask
https://www.w3schools.com/graphics/svg_clipping_masking.asp

@jakex7 jakex7 requested a review from WoLewicki June 17, 2024 20:44
WoLewicki
WoLewicki approved these changes Jun 18, 2024
View reviewed changes
Copy link
Member

@WoLewicki WoLewicki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added some more comments, looks good overall. If you feel like its ready after answering the comments, you can merge it 🚀

android/src/main/java/com/horcrux/svg/RenderableView.java Outdated Show resolved Hide resolved
android/src/main/java/com/horcrux/svg/RenderableView.java Outdated Show resolved Hide resolved
apple/Filters/LuminanceToAlpha.h Outdated Show resolved Hide resolved
apple/RNSVGRenderable.mm Outdated Show resolved Hide resolved
apple/RNSVGRenderable.mm Show resolved Hide resolved
apple/RNSVGRenderable.mm Outdated Show resolved Hide resolved
apple/RNSVGRenderable.mm Outdated Show resolved Hide resolved
@jakex7 jakex7 requested a review from WoLewicki June 21, 2024 22:48
WoLewicki
WoLewicki approved these changes Jun 25, 2024
View reviewed changes
Copy link
Member

@WoLewicki WoLewicki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hope it works correctly now 🚀

@jakex7 jakex7 merged commit 7b5d4da into main Jun 26, 2024
5 checks passed
@jakex7 jakex7 deleted the @jakex7/fixScaleWithMask branch June 26, 2024 07:25
@jakex7 jakex7 mentioned this pull request Jun 26, 2024
Closed
@jakex7 jakex7 mentioned this pull request Jul 9, 2024
Merged
jakex7 added a commit that referenced this pull request Jul 10, 2024
@jakex7
fix: macos mask (#2337)
171f3ba 
# Summary

Fixed regression introduced in #2299. Now `<Mask>` is rendering properly
on MacOS.

## Test Plan

* `Test1451` in `TestsExample`
* Masking section in `example`


https://github.com/software-mansion/react-native-svg/assets/39670088/dccc937d-125d-4b60-864b-cc3b9a4179fb

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| macOS     |    ✅     |
@tiago002pro tiago002pro mentioned this pull request Aug 5, 2024
Open
github-merge-queue bot referenced this pull request in valora-inc/wallet Aug 5, 2024
@renovate @bakoushin
fix(deps): update dependency react-native-svg to ^15.4.0 (#5666)
70ba5f2 
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
|
[react-native-svg](https://togithub.com/react-native-community/react-native-svg)
| [`^15.3.0` ->
`^15.4.0`](https://renovatebot.com/diffs/npm/react-native-svg/15.3.0/15.4.0)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/react-native-svg/15.4.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/react-native-svg/15.4.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/react-native-svg/15.3.0/15.4.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-native-svg/15.3.0/15.4.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>react-native-community/react-native-svg
(react-native-svg)</summary>

###
[`v15.4.0`](https://togithub.com/software-mansion/react-native-svg/releases/tag/v15.4.0)

[Compare
Source](https://togithub.com/react-native-community/react-native-svg/compare/v15.3.0...v15.4.0)

Introducing the long-awaited filters in react-native-svg! 🎉
This minor release includes the first filter, FeColorMatrix, along with
numerous fixes and other improvements.

#### What's Changed

- fix: error when building paper after fabric by
[@&#8203;maciekstosio](https://togithub.com/maciekstosio) in
[https://github.com/software-mansion/react-native-svg/pull/2281](https://togithub.com/software-mansion/react-native-svg/pull/2281)
- Handle error when pass wrong uri to SvgFromUri component by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2289](https://togithub.com/software-mansion/react-native-svg/pull/2289)
- chore: TestsExample app fix reanimated and metro.config issues by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2291](https://togithub.com/software-mansion/react-native-svg/pull/2291)
- chore: remove macos-build-test.yml by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2292](https://togithub.com/software-mansion/react-native-svg/pull/2292)
- chore: add hire us section to readme by
[@&#8203;kacperkapusciak](https://togithub.com/kacperkapusciak) in
[https://github.com/software-mansion/react-native-svg/pull/2295](https://togithub.com/software-mansion/react-native-svg/pull/2295)
- feat: github action close-when-stale by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2296](https://togithub.com/software-mansion/react-native-svg/pull/2296)
- fixed pars on Android platform prop strokeDasharray by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2294](https://togithub.com/software-mansion/react-native-svg/pull/2294)
- feat: add new bug issue template, and github actions by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2300](https://togithub.com/software-mansion/react-native-svg/pull/2300)
- fix: issue template by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2301](https://togithub.com/software-mansion/react-native-svg/pull/2301)
- fix: example app package.json file and yarn.lock by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2303](https://togithub.com/software-mansion/react-native-svg/pull/2303)
- fix: handle onPress prop on web app by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2302](https://togithub.com/software-mansion/react-native-svg/pull/2302)
- fix: android PathParser crash app if pass some wrong d prop by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2308](https://togithub.com/software-mansion/react-native-svg/pull/2308)
- fix: scaling when mask is set by
[@&#8203;jakex7](https://togithub.com/jakex7) in
[https://github.com/software-mansion/react-native-svg/pull/2299](https://togithub.com/software-mansion/react-native-svg/pull/2299)
- add onLoad prop to Image component by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2293](https://togithub.com/software-mansion/react-native-svg/pull/2293)
- feat: update needs-more-info git workflow by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2314](https://togithub.com/software-mansion/react-native-svg/pull/2314)
- fix: new arch invalidate on mount/unmount by
[@&#8203;jakex7](https://togithub.com/jakex7) in
[https://github.com/software-mansion/react-native-svg/pull/2318](https://togithub.com/software-mansion/react-native-svg/pull/2318)
- Fix: image onLoad props by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2317](https://togithub.com/software-mansion/react-native-svg/pull/2317)
- feat(windows): add support for 74 and bump Example by
[@&#8203;marlenecota](https://togithub.com/marlenecota) in
[https://github.com/software-mansion/react-native-svg/pull/2315](https://togithub.com/software-mansion/react-native-svg/pull/2315)
- feat: add Example Windows build workflow by
[@&#8203;marlenecota](https://togithub.com/marlenecota) in
[https://github.com/software-mansion/react-native-svg/pull/2322](https://togithub.com/software-mansion/react-native-svg/pull/2322)
- fix: add check in RNSVGImage for macos platform by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2324](https://togithub.com/software-mansion/react-native-svg/pull/2324)
- Add correct invalidate calls to SvgView on ios with test by
[@&#8203;Kicu](https://togithub.com/Kicu) in
[https://github.com/software-mansion/react-native-svg/pull/2327](https://togithub.com/software-mansion/react-native-svg/pull/2327)
- fix: extract opacity use percentage values by
[@&#8203;jakex7](https://togithub.com/jakex7) in
[https://github.com/software-mansion/react-native-svg/pull/2325](https://togithub.com/software-mansion/react-native-svg/pull/2325)
- feat: change folders structure by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2319](https://togithub.com/software-mansion/react-native-svg/pull/2319)
- Implement mask-type property by
[@&#8203;SergeyYurkevich](https://togithub.com/SergeyYurkevich) in
[https://github.com/software-mansion/react-native-svg/pull/2152](https://togithub.com/software-mansion/react-native-svg/pull/2152)
- feat: extract web example by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2333](https://togithub.com/software-mansion/react-native-svg/pull/2333)
- fix: macos mask by [@&#8203;jakex7](https://togithub.com/jakex7) in
[https://github.com/software-mansion/react-native-svg/pull/2337](https://togithub.com/software-mansion/react-native-svg/pull/2337)
- fix: fix format-js task to reflect changes made to folder structure by
[@&#8203;CDFN](https://togithub.com/CDFN) in
[https://github.com/software-mansion/react-native-svg/pull/2342](https://togithub.com/software-mansion/react-native-svg/pull/2342)
- Add missing `#include <folly/dynamic.h>` on RN 0.75 by
[@&#8203;tomekzaw](https://togithub.com/tomekzaw) in
[https://github.com/software-mansion/react-native-svg/pull/2344](https://togithub.com/software-mansion/react-native-svg/pull/2344)
- feat: filters support FeColorMatrix and FilterImage by
[@&#8203;jakex7](https://togithub.com/jakex7) in
[https://github.com/software-mansion/react-native-svg/pull/2316](https://togithub.com/software-mansion/react-native-svg/pull/2316)
- fix: mask and filters rendering issues by
[@&#8203;jakex7](https://togithub.com/jakex7) in
[https://github.com/software-mansion/react-native-svg/pull/2345](https://togithub.com/software-mansion/react-native-svg/pull/2345)

#### New Contributors

- [@&#8203;maciekstosio](https://togithub.com/maciekstosio) made their
first contribution in
[https://github.com/software-mansion/react-native-svg/pull/2281](https://togithub.com/software-mansion/react-native-svg/pull/2281)
- [@&#8203;bohdanprog](https://togithub.com/bohdanprog) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2289](https://togithub.com/software-mansion/react-native-svg/pull/2289)
- [@&#8203;Kicu](https://togithub.com/Kicu) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2327](https://togithub.com/software-mansion/react-native-svg/pull/2327)
- [@&#8203;SergeyYurkevich](https://togithub.com/SergeyYurkevich) made
their first contribution in
[https://github.com/software-mansion/react-native-svg/pull/2152](https://togithub.com/software-mansion/react-native-svg/pull/2152)
- [@&#8203;CDFN](https://togithub.com/CDFN) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2342](https://togithub.com/software-mansion/react-native-svg/pull/2342)

**Full Changelog**:
software-mansion/react-native-svg@v15.3.0...v15.4.0

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "after 5pm,every weekend" in timezone
America/Los_Angeles, Automerge - "after 5pm,every weekend" in timezone
America/Los_Angeles.

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR was generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View the
[repository job
log](https://developer.mend.io/github/valora-inc/wallet).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40MzguMCIsInVwZGF0ZWRJblZlciI6IjM3LjQzOC4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6WyJucG0iLCJyZW5vdmF0ZSJdfQ==-->

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: valora-bot <[email protected]>
Co-authored-by: Alex Bakoushin <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@WoLewicki WoLewicki WoLewicki approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@jakex7 @WoLewicki