Add Hotspot property editor

[bjarnef]

Prerequisites

• I have added steps to test this contribution in the description below

Description

Adding a simple Hotspot property editor using the existing functionality in Image Cropper regarding focal point, but allows to select a source image to use and select a hotspot on the specific image.

For example it can be useful on location nodes to select the location on an (SVG) Image map of a country, on a product node (in Umbraco Commerce) with multiple products on same image, etc.

Also discussed in #15242

[github-actions]

Hi there @bjarnef, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• 💡 The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[JasonElkin]

Hey @bjarnef, this is a nice idea, before you do any more let me check with HQ on this as I'd be surprised if HQ are happy supporting a new property editor just for >v13/<v14.

Given that property editors are nice and easy to package, have you considered packaging it for the marketplace instead? Would also likely get more use as it could be available for v10+ then.

[nul800sebastiaan]

Hi @bjarnef, as we talked about a few weeks ago, I'll close this one while we focus on getting Bellissima in good shape.

I'll add the generic comment for people who are reading along with this:

As you may or may not know, we're working on a rewrite of the Umbraco backoffice, codenamed Bellissima (https://umbraco.com/blog/bellissima-preview-releases-of-the-new-backoffice/) and we're trying to make sure that it has feature parity with the current AngularJS-based backoffice.

We're at a point in the development phase where we want to start wrapping up a beta version to ship some time "soon" and we're going to have to implement a feature freeze on the current backoffice so that we don't keep increasing the scope of Bellissima. Unfortunately that means we're going to have to stop accepting PRs like this one that create significant changes to the current backoffice.

As a general rule from now on, we're still happy for features in C# code but anything that gets introduced or refactored in AngularJS probably won't make it. Bugfixes are still great of course!

Thanks for the efforts here and we hope to see you back as a contributor soon! 👍

[bjarnef]

@nul800sebastiaan do we want this in Umbraco 14? Basically Image Cropper without crops - just the focal point.

[nul800sebastiaan]

I would also go the package route, I doubt there is much demand for this, especially since this is the first time I've heard of this feature.

In any case, all new features should start with a discussion so we don't waste anybody's time building features that need to be rejected - https://github.com/umbraco/Umbraco-CMS/discussions

As Jason also already indicated, seems like a good idea for a package, if that package gets significant traction then it could be good to port it to the CMS eventually.

[bjarnef]

It is pretty much what @greystate does in this package https://marketplace.umbraco.com/package/vokseverk.imagehotspot

@mattbrailsford also has this POC package years ago based on element types (document type at that time when element type wasn't a thing yet):
https://github.com/mattbrailsford/umbraco-photon

and yes there's already a discussion :)
#15242

Although both of these packages are great, the suggestion in the PR basically just re-use what already exists, just wrapped in a separate property editor allowing to use hotspot on it's own.

During the years I have seen different approaches on this - mainly two properties storing X / Y coordinates (hardcoded) or a custom property editor.
Alternatively it could also be a configuration of Image Cropper allowing it use hotspot on its own and without crops (the current backoffice store the data for focal point, but I am not sure it is is returned by PVC).