From 693e93c0896d7cae443e43381fa0fa6c449bb19b Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 29 May 2024 11:54:34 +0100
Subject: [PATCH] Bugfix: Image Cropper, focal point reset

Fixes the "reset focal point" button functionality/
---
 .../image-cropper-field.element.ts            | 12 +++---
 .../image-cropper-focus-setter.element.ts     |  4 +-
 .../image-cropper-editor-modal.element.ts     | 41 +++++++++++--------
 3 files changed, 33 insertions(+), 24 deletions(-)

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 {
 			</umb-image-cropper-focus-setter>
 			<div id="actions">
 				<slot name="actions"></slot>
-				${!this.hideFocalPoint
-					? html`<uui-button
+				${when(
+					!this.hideFocalPoint,
+					() =>
+						html`<uui-button
 							label=${this.localize.term('content_resetFocalPoint')}
-							@click=${this.#onResetFocalPoint}></uui-button>`
-					: nothing}
+							@click=${this.#onResetFocalPoint}></uui-button>`,
+				)}
 			</div>
 		`;
 	}
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<any> | Map<PropertyKey, unknown>): 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`
 			<div id="wrapper">
 				<img id="image" @click=${this.#onSetFocalPoint} @keydown=${() => nothing} src=${this.src} alt="" />
@@ -150,6 +149,7 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 			</div>
 		`;
 	}
+
 	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`<div id="layout">
-			<umb-image-cropper-field
-				.value=${this._imageCropperValue}
-				?hideFocalPoint=${this._hideFocalPoint}
-				@change=${this.#onChange}></umb-image-cropper-field>
-			<div id="options">
-				<uui-menu-item @click=${this.#openMediaPicker} label=${this.localize.term('mediaPicker_changeMedia')}>
-					<umb-icon slot="icon" name="icon-search"></umb-icon>
-				</uui-menu-item>
-				<uui-menu-item
-					href=${this._editMediaPath + 'edit/' + this._unique}
-					label=${this.localize.term('mediaPicker_openMedia')}>
-					<umb-icon slot="icon" name="icon-out"></umb-icon>
-				</uui-menu-item>
+		return html`
+			<div id="layout">
+				<umb-image-cropper-field
+					.value=${this._imageCropperValue}
+					?hideFocalPoint=${this._hideFocalPoint}
+					@change=${this.#onChange}></umb-image-cropper-field>
+				<div id="options">
+					<uui-menu-item @click=${this.#openMediaPicker} label=${this.localize.term('mediaPicker_changeMedia')}>
+						<umb-icon slot="icon" name="icon-search"></umb-icon>
+					</uui-menu-item>
+					<uui-menu-item
+						href=${this._editMediaPath + 'edit/' + this._unique}
+						label=${this.localize.term('mediaPicker_openMedia')}>
+						<umb-icon slot="icon" name="icon-out"></umb-icon>
+					</uui-menu-item>
+				</div>
 			</div>
-		</div>`;
+		`;
 	}
 
 	static styles = [