Adjust Image Cropper handle (focal point)

[bjarnef]

Description

This PR adjust focal point (handle) in Image Cropper to be more consistent with handle in Color Area.
umbraco/Umbraco-CMS#16672

It moves the focal point based on x and y coordinates in the container on mouse click or touch.
Furthermore it moves in the handle / focal point on keyboard arrows, while holding down Shift key allows to fine-tune position.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Motivation and context

To re-use some existing logic and make the UI/UX consistent.

How to test?

Screenshots (if appropriate)

chrome_2tFi6FEudB.mp4

Checklist

• If my change requires a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.

[bjarnef]

There a minor issue when resetting focal point, where it also need to reset the coords like it does on image loaded here:
https://github.com/umbraco/Umbraco.CMS.Backoffice/pull/1021/files#diff-edf1088805f907d36474f517086a2f1a7b8c0f07f1aeaa66d6d1861da99a6d12R72-R74

It am not sure the disabled property is something we need, but I think it would be a nice feature.
In the current backoffice if a property editor is readonly, I think the focal point is just hidden.

If think it may be useful to have a feature to show the focal point, but maybe some editors should allow the move it or in a special context like split view or when not active language variant.

[bjarnef]

@iOvergaard @JesmoDev please have a look 😎

[nielslyngsoe]

Hi @bjarnef looks good.

I also see that you are trying to fix a few other things, like keyboard navigation etc. Thats cool, would it be possible to finish it in near future?

Otherwise, I would recommend splitting your PRs up. Small PRs that are easy to review can sometimes be really good as they are fast to review and we can then get them merged in. In this way, we can keep the list of open PRs to a minimum. (as I was up for merging this, but its not done in its current state, just the change of the focus point look) :-)

[bjarnef]

@nielslyngsoe it should be ready to review, but any feedback are welcome 😉
I am still learning by doing 🤭😅😎

[bjarnef]

Do we have any way to know when reset focal point happens? It seems firstUpdated() happens on init and updated() each time focal point is moved, but we only want to update coords to center when focal point reset is triggered.

[bjarnef]

I found a workaround to update coords if focal point is updated/reset to center using the reset button.
11666ac

[nielslyngsoe]

@bjarnef yes, that is one solution. But the one we mainly use is to append setter and getter methods to the property itself. You should be able to fairly simple find a lot of solutions doing so. A typical one is the value and config property on any Property Editor UI.

[bjarnef]

@nielslyngsoe I tried the following instead. 03bcee2

A bit similar to the UmbInputImageCropperElement here:

Umbraco.CMS.Backoffice/src/packages/core/components/input-image-cropper/input-image-cropper.element.ts

Line 19 in 11efe83

set value(value) {

However to make #resetCoords() working it need to happen after image has loaded and CSS applied here to get the rendered size.
https://github.com/umbraco/Umbraco.CMS.Backoffice/pull/1021/files#diff-edf1088805f907d36474f517086a2f1a7b8c0f07f1aeaa66d6d1861da99a6d12R92

Or call #setFocalPointStyle() but it requires focalPointElement to be found via query which seems to happen after property value setter.

[bjarnef]

@JesmoDev this probably conflicts a bit with changes in #1052

This PR makes the Image Cropper handle works using keyboard navigation and use same logic as color picker handle.

I could use some help with implementation of the property as @nielslyngsoe suggested - see last commit.

[bjarnef]

@iOvergaard do you know how we can solve the last part?
I think it would be great to use same handle as in Color Picker and make it accessible as well.

[bjarnef]

@iOvergaard feel free to make additional commits to this PR :)

I noticed some other behavioural oddities.

• Change media item allow me to select a folder (it wasn't possible in old backoffice)
• Without focal point hidden and dragging image it doesn't seem preview thumbnail updates.
• Changing current selected crop reset zoom position which wasn't the case in old backoffice Zoom level is reset when switching current crop selection Umbraco-CMS#16821
• I can't navigate crops using keyboard Not possible to navigate image cropper crops via keyboard Umbraco-CMS#16820

Another minor issue I noticed is when opening developer console the image isn't re-calculated. Not a big issue, but I think it would similar a virtual keypad open on tablet. Anyway it worked nicer in old backoffice :)

When not in crop mode (at Media "crop" menu item), we probably also need checkered background as before to see a white logo/image?

[iOvergaard]

@bjarnef All good proposals. Would you add them as separate issues, please?

Change media item allow me to select a folder (it wasn't possible in old backoffice)

This one we are aware of, we currently have no way of detecting if a media item is actually a folder - all media items can contain subitems, but obviously does not make sense to select one if it itself doesn't have an umbracoFile. We need more advanced checks for that.

[bjarnef]

@iOvergaard can you have another look at latest changes. I think there are other enhancements, we can fix in other PRs.
I added two new custom events, but I think currently these introduce breaking changes and they need to have event name change? But if developers already implemented this it probably wouldn't work reacting on CustomEvent anyway.

[bjarnef]

@iOvergaard does the events need args?: EventInit in constructor?
It is used 3 places in codebase, which has following properties: bubbles, composed and cancelable.

Does it mean when set it override these?

{ bubbles: true, composed: false, cancelable: false }

e.g.

Umbraco.CMS.Backoffice/src/packages/core/event/selection-change.event.ts

Line 6 in d4fe85d

super(UmbSelectionChangeEvent.TYPE, { bubbles: true, composed: false, cancelable: false, ...args });

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[bjarnef]

@iOvergaard can you review this with the latest changes. It would be great to close this one.

[bjarnef]

@iOvergaard did you see the latest comments/ commits? It would be great to finish this one 😊