Adjust Image Cropper handle (focal point)

src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts

@@ -1,4 +1,5 @@
-import { clamp } from './mathUtils.js';
+//import { clamp } from './mathUtils.js';
+import { drag, clamp } from '@umbraco-cms/backoffice/external/uui';
 import { UmbImageCropperFocalPoint } from './index.js';
 import {
 	LitElement,
@@ -8,19 +9,28 @@
 	nothing,
 	customElement,
 	property,
+	state,
 	query,
 } from '@umbraco-cms/backoffice/external/lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 @customElement('umb-image-cropper-focus-setter')
 export class UmbImageCropperFocusSetterElement extends LitElement {
 	@query('#image') imageElement!: HTMLImageElement;
 	@query('#wrapper') wrapperElement!: HTMLImageElement;
 	@query('#focal-point') focalPointElement!: HTMLImageElement;
 
+	@state() private isDraggingGridHandle = false;
+
+	@state() private coords = { x: 0, y: 0 };
+
 	@property({ type: String }) src?: string;
 	@property({ attribute: false }) focalPoint: UmbImageCropperFocalPoint = { left: 0.5, top: 0.5 };
 
-	#DOT_RADIUS = 6 as const;
+	@property({ type: Boolean, reflect: true }) disabled = false;
+
+	#DOT_RADIUS = 8 as const;
 
 	connectedCallback() {
 		super.connectedCallback();
@@ -59,47 +69,30 @@
 				this.wrapperElement.style.height = '100%';
 			}
 
+			// Init x and y coords from half of rendered image size, which is equavalient to focal point { left: 0.5, top: 0.5 }.
+			this.coords.x = this.imageElement.clientWidth / 2;
+			this.coords.y = this.imageElement.clientHeight / 2;
+
 			this.imageElement.style.aspectRatio = `${imageAspectRatio}`;
 			this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
 		};
 	}
 
 	async #addEventListeners() {
 		await this.updateComplete; // Wait for the @query to be resolved
-		this.imageElement?.addEventListener('mousedown', this.#onStartDrag);
-		window.addEventListener('mouseup', this.#onEndDrag);
 	}
 
 	#removeEventListeners() {
-		this.imageElement?.removeEventListener('mousedown', this.#onStartDrag);
-		window.removeEventListener('mouseup', this.#onEndDrag);
+
 	}
 
-	#onStartDrag = (event: MouseEvent) => {
-		event.preventDefault();
-		window.addEventListener('mousemove', this.#onDrag);
-	};
-
-	#onEndDrag = (event: MouseEvent) => {
-		event.preventDefault();
-		window.removeEventListener('mousemove', this.#onDrag);
-	};
+	#setFocalPoint(x: number, y: number) {
 
-	#onDrag = (event: MouseEvent) => {
-		event.preventDefault();
-		this.#onSetFocalPoint(event);
-	};
-
-	#onSetFocalPoint(event: MouseEvent) {
-		event.preventDefault();
+		const grid = this.wrapperElement;
+		const { width, height } = grid.getBoundingClientRect();
 
-		const image = this.imageElement.getBoundingClientRect();
-
-		const x = clamp(event.clientX - image.left, 0, image.width);
-		const y = clamp(event.clientY - image.top, 0, image.height);
-
-		const left = clamp(x / image.width, 0, 1);
-		const top = clamp(y / image.height, 0, 1);
+		const left = clamp((x / width), 0, 1);
+		const top = clamp((y / height), 0, 1);
 
 		this.focalPointElement.style.left = `calc(${left * 100}% - ${this.#DOT_RADIUS}px)`;
 		this.focalPointElement.style.top = `calc(${top * 100}% - ${this.#DOT_RADIUS}px)`;
@@ -113,13 +106,81 @@
 		);
 	}
 
+	#handleGridDrag(event: PointerEvent) {
+		if (this.disabled) return;
+
+		const grid = this.wrapperElement;
+		const handle = this.focalPointElement;
+
+		handle.focus();
+		event.preventDefault();
+		event.stopPropagation();
+
+		this.isDraggingGridHandle = true;
+
+		drag(grid, {
+		  onMove: (x, y) => {
+			// check if coordinates are not NaN (can happen when dragging outside of the grid)
+			if (isNaN(x) || isNaN(y)) return;
+
+			this.coords.x = x;
+			this.coords.y = y;
+
+			this.#setFocalPoint(x, y);
+		  },
+		  onStop: () => (this.isDraggingGridHandle = false),
+		  initialEvent: event,
+		});
+	  }
+
+	  #handleGridKeyDown(event: KeyboardEvent) {
+		if (this.disabled) return;
+		const increment = event.shiftKey ? 1 : 10;
+
+		const grid = this.wrapperElement;
+		const { width, height } = grid.getBoundingClientRect();
+
+		if (event.key === 'ArrowLeft') {
+		  event.preventDefault();
+		  this.coords.x = clamp(this.coords.x - increment, 0, width);
+		  this.#setFocalPoint(this.coords.x, this.coords.y);
+		}
+
+		if (event.key === 'ArrowRight') {
+		  event.preventDefault();
+		  this.coords.x = clamp(this.coords.x + increment, 0, width);
+		  this.#setFocalPoint(this.coords.x, this.coords.y);
+		}
+
+		if (event.key === 'ArrowUp') {
+		  event.preventDefault();
+		  this.coords.y = clamp(this.coords.y - increment, 0, height);
+		  this.#setFocalPoint(this.coords.x, this.coords.y);
+		}
+
+		if (event.key === 'ArrowDown') {
+		  event.preventDefault();
+		  this.coords.y = clamp(this.coords.y + increment, 0, height);
+		  this.#setFocalPoint(this.coords.x, this.coords.y);
+		}
+	  }
+
 	render() {
 		if (!this.src) return nothing;
 
 		return html`
-			<div id="wrapper">
-				<img id="image" @click=${this.#onSetFocalPoint} @keydown=${() => nothing} src=${this.src} alt="" />
-				<div id="focal-point"></div>
+			<div id="wrapper"
+				@mousedown=${this.#handleGridDrag}
+        		@touchstart=${this.#handleGridDrag}>
+				<img id="image" @keydown=${() => nothing} src=${this.src} alt="" />
+				<span id="focal-point"
+					class=${classMap({
+						'focal-point--dragging': this.isDraggingGridHandle,
+				  	})}
+					tabindex=${ifDefined(this.disabled ? undefined : '0')}
+					aria-label="Focal Point"
+					@keydown=${this.#handleGridKeyDown}>
+				</span>
 			</div>
 		`;
 	}
@@ -140,6 +201,9 @@
 			margin: auto;
 			max-width: 100%;
 			max-height: 100%;
+			box-sizing: border-box;
+        	cursor: crosshair;
+        	forced-color-adjust: none;
 		}
 		#image {
 			margin: auto;
@@ -151,11 +215,18 @@
 			position: absolute;
 			width: calc(2 * var(--dot-radius));
 			height: calc(2 * var(--dot-radius));
-			outline: 3px solid black;
 			top: 0;
+			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+        	border: solid 2px white;
 			border-radius: 50%;
 			pointer-events: none;
-			background-color: white;
+			background-color: var(--uui-palette-spanish-pink-light);
+			transition: 150ms transform;
+        	box-sizing: inherit;
+		}
+		.focal-point--dragging {
+			cursor: none;
+			transform: scale(1.5);
 		}
 	`;
 }