Umbraco.CMS.Backoffice
Umbraco.CMS.Backoffice copied to clipboard
Make ImageCropper focal point re-use logic from Color Picker handle
Is your feature request related to a problem? Please describe. I noticed the Image Cropper implements it's own logic the handle focal point, which it pretty much the same we already have in Color Picker handle. https://github.com/umbraco/Umbraco.CMS.Backoffice/blob/1876370cceb52c7c5aa9d1748d470b50838e72b0/src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts
Some thought I had in mind when adding the Color Picker to Umbraco UI library was the it should be accessible, e.g. the handle should be possible to move using mouse, keyboard or touch.
Currently the Image Cropper focal point isn't accessible using keyboard.
Describe the solution you'd like I think we should reuse the handle logic from Color Picker which has been tested on touch, via mouse and keyboard. Eventually wrap it in some utility or base component to extend to use in other components.
As a minimum we can import the drag
function from UI library, which handle this:
https://github.com/umbraco/Umbraco.UI/blob/9708ccbac569560b716431080c782c5531c66ea5/packages/uui-base/lib/utils/drag.ts#L14
and returns the x
and y
coordinates in the container:
https://github.com/umbraco/Umbraco.UI/blob/9708ccbac569560b716431080c782c5531c66ea5/packages/uui-color-area/lib/uui-color-area.element.ts#L129
Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.
Additional context Add any other context or screenshots about the feature request here.