Bjarne Fyrstenborg c53cb49496 Adjust Image Cropper handle (focal point) (#1021)
* Adjust Image Cropper focal point to be consistent with Color Area handle

* Make focus point focusable via keyboard

* Update import of utils from uui

* Make focal point accessible via keyboard

* Move logic to function

* Reset coords

* Remove reset coords

* Reset coords if focal point is updated to center

* Format document

* Set focal point property instead

* Formatting

* Fix warnings

* Width and height

* Remove added outline so we can see when focal point has focus via keyboard

* Reset coords

* Cleanup

* Update import

* Cleanup

* Use UmbChangeEvent

* Adjust elements

* Import drag for uui

* Cleanup styling

* Cleanup

* Remove unnecessary events

* Container is HTMLElement

* Check focal point updated

* Fix conflicts after merge

* Null check

* Update correct element types

* Revert to custom event

* Cleanup console

* Don't hide overflow, so focal point is not cut off on edges on image

* Add margin top at actions so focal point doesn't overlap buttons

* Top margin at actions

* Crosshair cursor when focal point is not hidden

* Cancel update focal point

* Add move cursor to viewport image

* Use crop label

* Add missing label

* Disable draggable of image as in old backoffice

* Fix previous merge conflicts

* Update src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

* Update src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

* Update src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

* Update src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

* Remove disconnectedCallback

* Ignore in the debug element

* Add custom event for focal point change

* Import type

* Replace with UmbImageCropChangeEvent

* Use UmbFocalPointModel

* Move set focal pont style to setter

* Update custom event name

* Localize focal point label

* Fix import of UmbFocalPointModel type

* Localize buttons

* Update labels

* Combine imports

---------

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
2024-10-16 14:13:57 +02:00
Description
Umbraco is a free and open source .NET content management system helping you deliver delightful digital experiences.
448 MiB
Languages
C# 59.5%
TypeScript 39.9%
JavaScript 0.3%
HTML 0.2%