From b4cfcd0e67bfa0faf14635d5b0bf9490c4cfc1ed Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 26 Jul 2024 10:47:44 +0200 Subject: [PATCH 1/5] fix: export and use the correct `UmbCropModel` everywhere along with the rest of the types --- .../components/input-image-cropper/types.ts | 16 +++------- .../input-rich-media.element.ts | 2 +- src/packages/media/media/index.ts | 2 ++ .../image-cropper-editor-modal.element.ts | 2 +- .../image-cropper-editor-modal.token.ts | 2 +- .../property-editors/media-picker/index.ts | 32 ------------------- ...property-editor-ui-media-picker.element.ts | 2 +- .../media/media/property-editors/types.ts | 25 +++++++++++++++ src/packages/media/media/types.ts | 2 ++ 9 files changed, 37 insertions(+), 48 deletions(-) create mode 100644 src/packages/media/media/property-editors/types.ts 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..5a5ae5449f 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'; 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..5e1f921707 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 { 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'; From 91419bd661db34e07b76226bc8e244e42135f011 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 26 Jul 2024 10:48:01 +0200 Subject: [PATCH 2/5] fix: reverse set and get --- .../input-image-cropper/image-cropper-field.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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() From dc85294df4d475c7a4593dad30f24f8974603ede Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 26 Jul 2024 10:48:13 +0200 Subject: [PATCH 3/5] fix: remove unused backing field --- .../input-rich-media/input-rich-media.element.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) 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 5a5ae5449f..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 @@ -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) { From ed5d6b3c947d9fd4668a854bb34abad4d7d02ea7 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 26 Jul 2024 10:48:54 +0200 Subject: [PATCH 4/5] fix: combine crops coming from the property editor with the server so that we ignore any invalid (old) crops it has the added benefit of allowing us to find the `label` of a crop --- .../image-cropper-editor-modal.element.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) 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 5e1f921707..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 @@ -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; From 01966edfbd30c7314a98720d58d62abad31550fe Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 26 Jul 2024 10:49:16 +0200 Subject: [PATCH 5/5] fix: if a crop has a label itself, use that and run it through the `localize` controller --- .../input-image-cropper/image-cropper-preview.element.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) 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`