Added hideFocalPoint property

Temporarily added to "image-cropper-focus-setter.element.ts",
as this requires further work.

src/Umbraco.Web.UI.Client/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 } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
@@ -34,24 +34,26 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
 
 		this.requestUpdate();
 	}
-
 	#value?: UmbImageCropperPropertyEditorValue;
 
+	@state()
+	crops: UmbImageCropperCrops = [];
+
+	@state()
+	currentCrop?: UmbImageCropperCrop;
+
 	@property({ attribute: false })
 	file?: File;
 
 	@property()
 	fileDataUrl?: string;
 
-	@state()
-	currentCrop?: UmbImageCropperCrop;
-
-	@state()
-	crops: UmbImageCropperCrops = [];
-
 	@state()
 	focalPoint: UmbImageCropperFocalPoint = { left: 0.5, top: 0.5 };
 
+	@property({ type: Boolean })
+	hideFocalPoint = false;
+
 	@state()
 	src = '';
 
@@ -128,22 +130,32 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
 	}
 
 	#renderMain() {
-		return this.currentCrop
-			? html`<umb-image-cropper
-					@change=${this.#onCropChange}
-					.src=${this.source}
+		if (this.currentCrop) {
+			return html`
+				<umb-image-cropper
 					.focalPoint=${this.focalPoint}
-					.value=${this.currentCrop}></umb-image-cropper>`
-			: html`<umb-image-cropper-focus-setter
-						@change=${this.#onFocalPointChange}
-						.focalPoint=${this.focalPoint}
-						.src=${this.source}></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>
-					</div> `;
+					.src=${this.source}
+					.value=${this.currentCrop}
+					?hideFocalPoint=${this.hideFocalPoint}
+					@change=${this.#onCropChange}>
+				</umb-image-cropper>
+			`;
+		}
+
+		return html`
+			<umb-image-cropper-focus-setter
+				.focalPoint=${this.focalPoint}
+				.src=${this.source}
+				?hideFocalPoint=${this.hideFocalPoint}
+				@change=${this.#onFocalPointChange}>
+			</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>
+			</div>
+		`;
 	}
 
 	#renderSide() {

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts

@@ -1,16 +1,28 @@
 import type { UmbImageCropperFocalPoint } from './index.js';
 import { clamp } from '@umbraco-cms/backoffice/utils';
+import { css, customElement, html, nothing, property, query, LitElement } from '@umbraco-cms/backoffice/external/lit';
 import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
-import { LitElement, css, html, nothing, customElement, property, query } from '@umbraco-cms/backoffice/external/lit';
 
 @customElement('umb-image-cropper-focus-setter')
 export class UmbImageCropperFocusSetterElement extends LitElement {
-	@query('#image') imageElement!: HTMLImageElement;
-	@query('#wrapper') wrapperElement?: HTMLImageElement;
-	@query('#focal-point') focalPointElement!: HTMLImageElement;
+	@query('#image')
+	imageElement!: HTMLImageElement;
 
-	@property({ type: String }) src?: string;
-	@property({ attribute: false }) focalPoint: UmbImageCropperFocalPoint = { left: 0.5, top: 0.5 };
+	@query('#wrapper')
+	wrapperElement?: HTMLImageElement;
+
+	@query('#focal-point')
+	focalPointElement!: HTMLImageElement;
+
+	@property({ attribute: false })
+	focalPoint: UmbImageCropperFocalPoint = { left: 0.5, top: 0.5 };
+
+	// TODO: [LK] Temporary fix; to be reviewed.
+	@property({ type: Boolean })
+	hideFocalPoint = false;
+
+	@property({ type: String })
+	src?: string;
 
 	#DOT_RADIUS = 6 as const;
 
@@ -126,7 +138,7 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 		return html`
 			<div id="wrapper">
 				<img id="image" @click=${this.#onSetFocalPoint} @keydown=${() => nothing} src=${this.src} alt="" />
-				<div id="focal-point"></div>
+				<div id="focal-point" class=${this.hideFocalPoint ? 'hidden' : ''}></div>
 			</div>
 		`;
 	}
@@ -165,6 +177,9 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 			pointer-events: none;
 			background-color: white;
 		}
+		#focal-point.hidden {
+			display: none;
+		}
 	`;
 }
 

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts

@@ -187,7 +187,7 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement,
 				return {
 					data: {
 						cropOptions: this.preselectedCrops,
-						focalPointEnabled: this.focalPointEnabled,
+						hideFocalPoint: !this.focalPointEnabled,
 						key,
 						unique: item.mediaKey,
 						pickableFilter: this.#pickableFilter,

src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts

@@ -1,8 +1,8 @@
 import { UmbMediaUrlRepository } from '../../repository/index.js';
+import { UMB_MEDIA_PICKER_MODAL } from '../media-picker/media-picker-modal.token.js';
 import type { UmbCropModel } from '../../property-editors/index.js';
 import type { UmbInputImageCropperFieldElement } from '../../components/input-image-cropper/image-cropper-field.element.js';
 import type { UmbImageCropperPropertyEditorValue } from '../../components/index.js';
-import { UMB_MEDIA_PICKER_MODAL } from '../media-picker/media-picker-modal.token.js';
 import type {
 	UmbImageCropperEditorModalData,
 	UmbImageCropperEditorModalValue,
@@ -12,9 +12,9 @@ import {
 	UMB_MODAL_MANAGER_CONTEXT,
 	UMB_WORKSPACE_MODAL,
 	UmbModalBaseElement,
-	type UmbModalManagerContext,
 	UmbModalRouteRegistrationController,
 } from '@umbraco-cms/backoffice/modal';
+import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
 
 /** TODO Make some of the components from property editor image cropper reuseable for this modal... */
 
@@ -35,8 +35,7 @@ export class UmbImageCropperEditorModalElement extends UmbModalBaseElement<
 	private _unique: string = '';
 
 	@state()
-	private _focalPointEnabled = false;
-	/** TODO  allow to enable/disable focalpoint */
+	private _hideFocalPoint = false;
 
 	@state()
 	private _crops: Array<UmbCropModel> = [];
@@ -71,7 +70,7 @@ export class UmbImageCropperEditorModalElement extends UmbModalBaseElement<
 		this._key = this.data?.key ?? '';
 		this._unique = this.data?.unique ?? '';
 
-		this._focalPointEnabled = this.data?.focalPointEnabled ?? false;
+		this._hideFocalPoint = this.data?.hideFocalPoint ?? false;
 		this._crops = this.data?.cropOptions ?? [];
 		this._pickableFilter = this.data?.pickableFilter;
 
@@ -130,7 +129,10 @@ export class UmbImageCropperEditorModalElement extends UmbModalBaseElement<
 
 	#renderBody() {
 		return html`<div id="layout">
-			<umb-image-cropper-field @change=${this.#onChange} .value=${this._imageCropperValue}></umb-image-cropper-field>
+			<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>

src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts

@@ -5,7 +5,7 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 export interface UmbImageCropperEditorModalData<ItemType> {
 	key: string;
 	unique: string;
-	focalPointEnabled: boolean;
+	hideFocalPoint: boolean;
 	cropOptions: Array<UmbCropModel>;
 	pickableFilter?: (item: ItemType) => boolean;
 }