From a2fc90d41c98c7c721eee8ec010b3ba5da318c0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Wed, 18 Oct 2023 23:21:54 +1300
Subject: [PATCH] make focalpoint responsive

---
 .../image-cropper-focus-setter.element.ts     | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts
index 04d7fa0a9d..6824788261 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts
@@ -59,7 +59,6 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 	#onSetFocalPoint(event: MouseEvent) {
 		event.preventDefault();
 
-		const viewport = this.getBoundingClientRect();
 		const image = this.imageElement.getBoundingClientRect();
 
 		const x = clamp(event.clientX - image.left, 0, image.width);
@@ -68,8 +67,8 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 		const left = clamp(x / image.width, 0, 1);
 		const top = clamp(y / image.height, 0, 1);
 
-		this.focalPointElement.style.left = `${x + image.left - viewport.left - this.#DOT_RADIUS}px`;
-		this.focalPointElement.style.top = `${y + image.top - viewport.top - this.#DOT_RADIUS}px`;
+		this.focalPointElement.style.left = `calc(${left * 100}% - ${this.#DOT_RADIUS}px)`;
+		this.focalPointElement.style.top = `calc(${top * 100}% - ${this.#DOT_RADIUS}px)`;
 
 		this.dispatchEvent(
 			new CustomEvent('change', {
@@ -84,8 +83,10 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 		if (!this.src) return nothing;
 
 		return html`
-			<img id="image" @click=${this.#onSetFocalPoint} @keydown=${() => nothing} src=${this.src} alt="" />
-			<div id="focal-point"></div>
+			<div id="wrapper">
+				<img id="image" @click=${this.#onSetFocalPoint} @keydown=${() => nothing} src=${this.src} alt="" />
+				<div id="focal-point"></div>
+			</div>
 		`;
 	}
 	static styles = css`
@@ -98,6 +99,14 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 			background-color: white;
 			outline: 1px solid lightgrey;
 		}
+		/* Wrapper is used to make the focal point position responsive to the image size */
+		#wrapper {
+			width: fit-content;
+			height: fit-content;
+			position: relative;
+			display: flex;
+			margin: auto;
+		}
 		#image {
 			max-width: 100%;
 			max-height: 100%;