Merge pull request #2145 from umbraco/v14/bugfix/crops-with-label-and-valid

Bugfix: Crops do not show their label and invalid crops are rendered

Author: iOvergaard

src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts

@@ -15,9 +15,6 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 @customElement('umb-image-cropper-field')
 export class UmbInputImageCropperFieldElement extends UmbLitElement {
 	@property({ attribute: false })
-	get value() {
-		return this.#value;
-	}
 	set value(value) {
 		if (!value) {
 			this.crops = [];
@@ -34,6 +31,9 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
 
 		this.requestUpdate();
 	}
+	get value() {
+		return this.#value;
+	}
 	#value?: UmbImageCropperPropertyEditorValue;
 
 	@state()

src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts

@@ -1,9 +1,10 @@
 import type { UmbImageCropperCrop, UmbImageCropperFocalPoint } from './index.js';
 import { calculateExtrapolatedValue, clamp } from '@umbraco-cms/backoffice/utils';
-import { LitElement, css, html, nothing, customElement, property, query } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, nothing, customElement, property, query } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-image-cropper-preview')
-export class UmbImageCropperPreviewElement extends LitElement {
+export class UmbImageCropperPreviewElement extends UmbLitElement {
 	@query('#image') imageElement!: HTMLImageElement;
 	@query('#container') imageContainerElement!: HTMLImageElement;
 
@@ -150,7 +151,9 @@ export class UmbImageCropperPreviewElement extends LitElement {
 			<div id="container">
 				<img id="image" src=${this.src} alt="" />
 			</div>
-			<span id="alias">${this.label ?? this.crop.alias}</span>
+			<span id="alias">
+				${this.crop.label !== undefined ? this.localize.string(this.crop.label) : (this.label ?? this.crop.alias)}
+			</span>
 			<span id="dimensions">${this.crop.width} x ${this.crop.height}</span>
 			${this.crop.coordinates
 				? html`<span id="user-defined"><umb-localize key="imagecropper_customCrop">User defined</umb-localize></span>`

src/packages/media/media/components/input-image-cropper/types.ts

@@ -1,17 +1,9 @@
+import type { UmbCropModel, UmbFocalPointModel } from '../../types.js';
+
 export type UmbImageCropperPropertyEditorValue = {
 	temporaryFileId?: string | null;
-	crops: Array<{
-		alias: string;
-		coordinates?: {
-			x1: number;
-			x2: number;
-			y1: number;
-			y2: number;
-		};
-		height: number;
-		width: number;
-	}>;
-	focalPoint: { left: number; top: number };
+	crops: Array<UmbCropModel>;
+	focalPoint: UmbFocalPointModel;
 	src: string;
 };
 

src/packages/media/media/components/input-rich-media/input-rich-media.element.ts

@@ -1,7 +1,7 @@
 import { UmbInputMediaElement } from '../input-media/index.js';
 import { UmbMediaItemRepository } from '../../repository/index.js';
 import { UMB_IMAGE_CROPPER_EDITOR_MODAL, UMB_MEDIA_PICKER_MODAL } from '../../modals/index.js';
-import type { UmbCropModel, UmbMediaPickerPropertyValue } from '../../property-editors/index.js';
+import type { UmbCropModel, UmbMediaPickerPropertyValue } from '../../types.js';
 import type { UmbMediaItemModel } from '../../repository/index.js';
 import type { UmbUploadableFileModel } from '../../dropzone/index.js';
 import { customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
@@ -122,13 +122,7 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement,
 	}
 
 	@property({ type: Array })
-	public set preselectedCrops(value: Array<UmbCropModel>) {
-		this.#preselectedCrops = value;
-	}
-	public get preselectedCrops(): Array<UmbCropModel> {
-		return this.#preselectedCrops;
-	}
-	#preselectedCrops: Array<UmbCropModel> = [];
+	public preselectedCrops?: Array<UmbCropModel>;
 
 	@property({ type: Boolean })
 	public set focalPointEnabled(value: boolean) {

src/packages/media/media/index.ts

@@ -14,3 +14,5 @@ export { UMB_MEDIA_PICKER_MODAL } from './modals/media-picker/index.js';
 
 export type { UmbMediaTreeItemModel } from './tree/index.js';
 export { UmbMediaAuditLogRepository } from './audit-log/index.js';
+
+export type * from './types.js';

src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts

@@ -1,6 +1,6 @@
 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 { UmbCropModel } from '../../types.js';
 import type { UmbInputImageCropperFieldElement } from '../../components/input-image-cropper/image-cropper-field.element.js';
 import type { UmbImageCropperPropertyEditorValue } from '../../components/index.js';
 import type {
@@ -79,10 +79,21 @@ export class UmbImageCropperEditorModalElement extends UmbModalBaseElement<
 		const item = data?.[0];
 
 		if (!item?.url) return;
+
+		/**
+		 * Combine the crops from the property editor with the stored crops and ignore any invalid crops
+		 * (e.g. crops that have been removed from the property editor)
+		 * @remark If a crop is removed from the property editor, it will be ignored and not saved
+		 */
+		const crops: Array<UmbCropModel> = this._crops.map((crop) => {
+			const existingCrop = this.value.crops?.find((c) => c.alias === crop.alias);
+			return existingCrop ? { ...crop, ...existingCrop } : crop;
+		});
+
 		const value: UmbImageCropperPropertyEditorValue = {
 			...this.value,
 			src: item.url,
-			crops: this.value.crops?.length ? this.value.crops : this._crops,
+			crops,
 			focalPoint: this.value.focalPoint ?? { left: 0.5, top: 0.5 },
 		};
 		this._imageCropperValue = value;

src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts

@@ -1,5 +1,5 @@
 import type { UmbImageCropperCrop } from '../../components/index.js';
-import type { UmbCropModel } from '../../property-editors/index.js';
+import type { UmbCropModel } from '../../property-editors/types.js';
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export interface UmbImageCropperEditorModalData<ItemType> {

src/packages/media/media/property-editors/media-picker/index.ts

@@ -1,33 +1 @@
 export * from './property-editor-ui-media-picker.element.js';
-
-export type UmbMediaPickerPropertyValue = {
-	key: string;
-	mediaKey: string;
-	mediaTypeAlias: string;
-	focalPoint: UmbFocalPointModel | null;
-	crops: Array<UmbCropModel>;
-};
-
-export type UmbCropModel = {
-	alias: string;
-	height: number;
-	width: number;
-	coordinates?: {
-		x1: number;
-		x2: number;
-		y1: number;
-		y2: number;
-	};
-};
-
-export interface UmbConfiguredCropModel {
-	label: string;
-	alias: string;
-	width: number;
-	height: number;
-}
-
-export interface UmbFocalPointModel {
-	left: number;
-	top: number;
-}

src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts

@@ -1,5 +1,5 @@
 import type { UmbInputRichMediaElement } from '../../components/input-rich-media/input-rich-media.element.js';
-import type { UmbCropModel, UmbMediaPickerPropertyValue } from './index.js';
+import type { UmbCropModel, UmbMediaPickerPropertyValue } from '../types.js';
 import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';

src/packages/media/media/property-editors/types.ts

@@ -0,0 +1,25 @@
+export type UmbMediaPickerPropertyValue = {
+	key: string;
+	mediaKey: string;
+	mediaTypeAlias: string;
+	focalPoint: UmbFocalPointModel | null;
+	crops: Array<UmbCropModel>;
+};
+
+export type UmbCropModel = {
+	label?: string;
+	alias: string;
+	height: number;
+	width: number;
+	coordinates?: {
+		x1: number;
+		x2: number;
+		y1: number;
+		y2: number;
+	};
+};
+
+export interface UmbFocalPointModel {
+	left: number;
+	top: number;
+}