Scroll wheel over image

[mbarkhau]

When the mouse is over the image, how hard would it be to hook up the scroll wheel, so that

1. It switches to the 8x8 block over which the cursor is (same as a click currently)
2. Updates the value of the slider.

[OmarShehata]

oooh, that would be a really nice UX for this! It shouldn't be too hard. The function JpegUtils.getDCTBlockFromClick should work with a mouse over event (it should be rewritten to just take in a mouse position I think to make this easier)

Here's how it's currently used to get the current block that's clicked on:

jpeg-sandbox/src/index.js

Line 52 in a82958a

const { block, x, y } = JpegUtils.getDCTBlockFromClick(event, decodedImage, canvas);

So you'd want to wrap that code snippet up in a function so it can run either on click or on mouse wheel.

It's a similar thing for the slider. Actually, all you'd need to do is update the slider DOM element's value on mouse wheel and it will all "just work". Alternatively you can refactor it so that what the slider oninput event does can be reused on mouse wheel:

jpeg-sandbox/src/index.js

Line 108 in a82958a

const finalIndex = e.target.value;