diff --git a/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts b/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts
index d6c523764c..84fcd88681 100644
--- a/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts
+++ b/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts
@@ -8,7 +8,7 @@ import type {
UmbImageCropperFocalPoint,
UmbImageCropperPropertyEditorValue,
} from './index.js';
-import { css, html, customElement, property, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -151,11 +151,13 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
- ${!this.hideFocalPoint
- ? html`
+ html``
- : nothing}
+ @click=${this.#onResetFocalPoint}>`,
+ )}
`;
}
diff --git a/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts b/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts
index 370172ead7..d9e4b0caab 100644
--- a/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts
+++ b/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts
@@ -34,7 +34,7 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
protected updated(_changedProperties: PropertyValueMap | Map): void {
super.updated(_changedProperties);
- if (!this.hideFocalPoint) return;
+ if (this.hideFocalPoint) return;
if (_changedProperties.has('focalPoint') && this.focalPointElement) {
this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
@@ -142,7 +142,6 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
render() {
if (!this.src) return nothing;
-
return html`
nothing} src=${this.src} alt="" />
@@ -150,6 +149,7 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
`;
}
+
static styles = css`
:host {
display: flex;
diff --git a/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts b/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts
index 0e3b172680..7b4763193b 100644
--- a/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts
+++ b/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts
@@ -100,10 +100,15 @@ export class UmbImageCropperEditorModalElement extends UmbModalBaseElement<
this.#getSrc();
}
- #onChange(e: CustomEvent) {
- const value = (e.target as UmbInputImageCropperFieldElement).value;
+ #onChange(e: CustomEvent & { target: UmbInputImageCropperFieldElement }) {
+ const value = e.target.value;
if (!value) return;
+ if (this._imageCropperValue) {
+ this._imageCropperValue.crops = value.crops;
+ this._imageCropperValue.focalPoint = value.focalPoint;
+ }
+
this.value = { key: this._key, unique: this._unique, crops: value.crops, focalPoint: value.focalPoint };
}
@@ -124,22 +129,24 @@ export class UmbImageCropperEditorModalElement extends UmbModalBaseElement<
}
#renderBody() {
- return html`
-
-
-
-
-
-
-
-
+ return html`
+
-
`;
+ `;
}
static styles = [