jodhman / react-eyedrop

Seamlessly integrate a static typed, fully-tested color-picking React component/hook!
24 stars 11 forks source link

Example not working + errors in my own implementation #28

Closed kevinhaas closed 3 years ago

kevinhaas commented 3 years ago

I opened #21 a while ago, and now that I am back to implementing the component using this library, I'm having issues again. The example always returns black as the color no matter what image I upload, and locally I see weird behavior again on DOM elements.

Uncaught (in promise) DOMException: Index or size is negative or greater than the allowed amount

Uncaught (in promise) DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

The previously working storybook stories I had setup are now just returning these errors. Same thing in the app itself. Is anyone out there successfully using this lib?

kevinhaas commented 3 years ago

So it seems the way pickRadius works has changed. Was this from a dependency update? I previously had 0.3 as the value and it worked in my testing fairly well, but now you get Uncaught (in promise) DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0. if the value is under a certain threshold. If I try other values like .5 and 1 it works, but then it's not accurate at all when clicking.

jodhman commented 3 years ago

Hey, @kevinhaas ! Just wanted to let you know, you haven't gone unnoticed. 😄
I will very soon find time to take a proper look - I'll make sure to get back to you once I have.

jodhman commented 3 years ago

Had some time over today, and managed to reproduce what you described. There's a high chance I'll find time this weekend to resolve it. I'll keep you posted. 🥳

jodhman commented 3 years ago

I've now pinpointed where the issue lies. It was introduced in the following PR(https://github.com/jodhman/react-eyedrop/commit/e85d1d7f0d34fccd4e0e16f624706ad4f69cd4a4) - I carelessly merged it without verifying things myself.

Although what that PR is trying to address is a valid issue, and I intend to deal with it before making a new release. For now, please use the previous version, where things were working correctly; v. 4.1.3.

I'll update & close this issue once a new release has happened. Best of luck in your endeavors! :partying_face:

jodhman commented 3 years ago

Dealt with. Cross origin images will work properly now as well. I'll make a release later tonight - gotta run for a date now lol

jodhman commented 3 years ago

v. 4.2.0 is now released.

kevinhaas commented 3 years ago

Thanks for the update! My original pickRadius value still results in the errors from my OP, though. If I make it a higher value, it then picks colors offset from the cursor position. I don't see any release note saying this functionality changed. Are you sure some other dependency didn't change this behavior as well?

jodhman commented 3 years ago

Thanks for the update! My original pickRadius value still results in the errors from my OP, though. If I make it a higher value, it then picks colors offset from the cursor position. I don't see any release note saying this functionality changed. Are you sure some other dependency didn't change this behavior as well?

Taking a look! :-)

jodhman commented 3 years ago

I'm not able to reproduce what you're describing with the pickRadius. In the example, I had it set to 0.3 & 0, and both worked as intended. Would have to take a look at your code, unless you can create a minimal example in CodePen.