From b645161b9963f9837472c89be3570f19d065f53d Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 29 May 2024 12:05:46 +0200
Subject: [PATCH] Feature: Hide focalpoint in ImageCropper

---
 .../image-cropper-field.element.ts                 |  8 +++++---
 .../image-cropper-focus-setter.element.ts          | 14 +++++++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts
index 87c4631a84..d6c523764c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts
@@ -151,9 +151,11 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
 			</umb-image-cropper-focus-setter>
 			<div id="actions">
 				<slot name="actions"></slot>
-				<uui-button
-					label=${this.localize.term('content_resetFocalPoint')}
-					@click=${this.#onResetFocalPoint}></uui-button>
+				${!this.hideFocalPoint
+					? html`<uui-button
+							label=${this.localize.term('content_resetFocalPoint')}
+							@click=${this.#onResetFocalPoint}></uui-button>`
+					: nothing}
 			</div>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts
index 5f87bc42a9..370172ead7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts
@@ -34,6 +34,8 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 	protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.updated(_changedProperties);
 
+		if (!this.hideFocalPoint) return;
+
 		if (_changedProperties.has('focalPoint') && this.focalPointElement) {
 			this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
 			this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
@@ -59,8 +61,10 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 	async #initializeImage() {
 		await this.updateComplete; // Wait for the @query to be resolved
 
-		this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
-		this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
+		if (!this.hideFocalPoint) {
+			this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
+			this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
+		}
 
 		this.imageElement.onload = () => {
 			if (!this.imageElement || !this.wrapperElement) return;
@@ -79,7 +83,9 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 			this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
 		};
 
-		this.#addEventListeners();
+		if (!this.hideFocalPoint) {
+			this.#addEventListeners();
+		}
 	}
 
 	async #addEventListeners() {
@@ -110,6 +116,8 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 
 	#onSetFocalPoint(event: MouseEvent) {
 		event.preventDefault();
+		if (this.hideFocalPoint) return;
+
 		if (!this.focalPointElement || !this.imageElement) return;
 
 		const image = this.imageElement.getBoundingClientRect();