diff --git a/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts b/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts index 7ca51a65f9..c330b50c43 100644 --- a/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts +++ b/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() diff --git a/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts b/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts index 35f20b490d..a092f0868c 100644 --- a/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts +++ b/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 {
- ${this.label ?? this.crop.alias} + + ${this.crop.label !== undefined ? this.localize.string(this.crop.label) : (this.label ?? this.crop.alias)} + ${this.crop.width} x ${this.crop.height} ${this.crop.coordinates ? html`User defined` diff --git a/src/packages/media/media/components/input-image-cropper/types.ts b/src/packages/media/media/components/input-image-cropper/types.ts index 649368b8a7..1def05fbb3 100644 --- a/src/packages/media/media/components/input-image-cropper/types.ts +++ b/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; + focalPoint: UmbFocalPointModel; src: string; }; diff --git a/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts b/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts index 43d8a51bc7..725d1502f2 100644 --- a/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts +++ b/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) { - this.#preselectedCrops = value; - } - public get preselectedCrops(): Array { - return this.#preselectedCrops; - } - #preselectedCrops: Array = []; + public preselectedCrops?: Array; @property({ type: Boolean }) public set focalPointEnabled(value: boolean) { diff --git a/src/packages/media/media/index.ts b/src/packages/media/media/index.ts index ef56a68fe6..8ee054676a 100644 --- a/src/packages/media/media/index.ts +++ b/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'; diff --git a/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts b/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts index 0641fbe118..846e26822c 100644 --- a/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts +++ b/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 = 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; diff --git a/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts b/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts index e5b4f47c0b..6371e4c56d 100644 --- a/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts +++ b/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 { diff --git a/src/packages/media/media/property-editors/media-picker/index.ts b/src/packages/media/media/property-editors/media-picker/index.ts index b246c984b2..7eddcc7572 100644 --- a/src/packages/media/media/property-editors/media-picker/index.ts +++ b/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; -}; - -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; -} diff --git a/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts b/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts index d80f7f33f7..4a1eff1fc9 100644 --- a/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts +++ b/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'; diff --git a/src/packages/media/media/property-editors/types.ts b/src/packages/media/media/property-editors/types.ts new file mode 100644 index 0000000000..0baa97364e --- /dev/null +++ b/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; +}; + +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; +} diff --git a/src/packages/media/media/types.ts b/src/packages/media/media/types.ts index 65dfefdd6c..a350ead8dd 100644 --- a/src/packages/media/media/types.ts +++ b/src/packages/media/media/types.ts @@ -30,3 +30,5 @@ export interface UmbMediaValueModel { } export interface UmbMediaVariantOptionModel extends UmbVariantOptionModel {} + +export type * from './property-editors/types.js';