From 5afa4b069bb0bce470c59f4e139894bd0dd7c8c0 Mon Sep 17 00:00:00 2001 From: Lan Nguyen Thuy Date: Tue, 14 Jan 2025 15:31:58 +0700 Subject: [PATCH 1/2] add temporaryFileId to value when chaning focal point --- .../input-image-cropper/input-image-cropper.element.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts index 16243777db..4140de2baa 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts @@ -121,6 +121,10 @@ export class UmbInputImageCropperElement extends UmbLitElement { return; } + if(this.value && this.value.temporaryFileId){ + value.temporaryFileId = this.value.temporaryFileId + } + this.value = value; this.dispatchEvent(new UmbChangeEvent()); } From 3f57a503e9885fed1e6baec1af17024ea16331c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 20 Jan 2025 11:40:51 +0100 Subject: [PATCH 2/2] fix focal point reset --- .../image-cropper-focus-setter.element.ts | 2 -- .../input-image-cropper.element.ts | 23 +++++++++++-------- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts index 5951fe8079..f1a325fd2e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts @@ -122,8 +122,6 @@ export class UmbImageCropperFocusSetterElement extends UmbLitElement { const focalPoint = { left, top } as UmbFocalPointModel; - console.log('setFocalPoint', focalPoint); - this.dispatchEvent(new UmbFocalPointChangeEvent(focalPoint)); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts index 4140de2baa..beafa144fc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts @@ -13,18 +13,21 @@ import './image-cropper-focus-setter.element.js'; import './image-cropper-preview.element.js'; import './image-cropper-field.element.js'; +const DefaultFocalPoint = { left: 0.5, top: 0.5 }; +const DefaultValue = { + temporaryFileId: null, + src: '', + crops: [], + focalPoint: DefaultFocalPoint, +}; + @customElement('umb-input-image-cropper') export class UmbInputImageCropperElement extends UmbLitElement { @query('#dropzone') private _dropzone?: UUIFileDropzoneElement; @property({ attribute: false }) - value: UmbImageCropperPropertyEditorValue = { - temporaryFileId: null, - src: '', - crops: [], - focalPoint: { left: 0.5, top: 0.5 }, - }; + value: UmbImageCropperPropertyEditorValue = DefaultValue; @property({ attribute: false }) crops: UmbImageCropperPropertyEditorValue['crops'] = []; @@ -68,7 +71,7 @@ export class UmbInputImageCropperElement extends UmbLitElement { } #onRemove = () => { - this.value = assignToFrozenObject(this.value, { src: '', temporaryFileId: null }); + this.value = assignToFrozenObject(this.value, DefaultValue); if (this.fileUnique) { this.#manager?.removeOne(this.fileUnique); } @@ -116,13 +119,13 @@ export class UmbInputImageCropperElement extends UmbLitElement { const value = (e.target as UmbInputImageCropperFieldElement).value; if (!value) { - this.value = { src: '', crops: [], focalPoint: { left: 0.5, top: 0.5 }, temporaryFileId: null }; + this.value = DefaultValue; this.dispatchEvent(new UmbChangeEvent()); return; } - if(this.value && this.value.temporaryFileId){ - value.temporaryFileId = this.value.temporaryFileId + if (this.value && this.value.temporaryFileId) { + value.temporaryFileId = this.value.temporaryFileId; } this.value = value;