Google Code-in

Problem

We can disable image editing using img.editing.disable(), meaning it will be non-interactive until re-enabled again (img.editing.enable()), but the mouse pointer is not updated to differentiate this visually to the user.

Solution

The DistortableImage.Edit.js file holds the handler class that wraps the image overlay and allows us to interact with it. You will find there two methods addHooks and removeHooks, that are called when you enable and disable editing, respectively.

We can use these to add a CSS class to the image, disabled, in the removeHooks and remove that class in the addHooks.

You can find further information on solving from the linked issue

Reference Gif/Screenshot

https://user-images.githubusercontent.com/41092741/64925475-04c11980-d7bf-11e9-8ac9-a63f06d14d5a.gif

Thank You 😊