diff --git a/src/packages/media/media/components/input-image-cropper/crop-change.event.ts b/src/packages/media/media/components/input-image-cropper/crop-change.event.ts new file mode 100644 index 0000000000..0c9b076fba --- /dev/null +++ b/src/packages/media/media/components/input-image-cropper/crop-change.event.ts @@ -0,0 +1,8 @@ +export class UmbImageCropChangeEvent extends Event { + public static readonly TYPE = 'imagecrop-change'; + + public constructor(args?: EventInit) { + // mimics the native change event + super(UmbImageCropChangeEvent.TYPE, { bubbles: false, composed: false, cancelable: false, ...args }); + } +} \ No newline at end of file diff --git a/src/packages/media/media/components/input-image-cropper/focalpoint-change.event.ts b/src/packages/media/media/components/input-image-cropper/focalpoint-change.event.ts new file mode 100644 index 0000000000..ba38c5e87f --- /dev/null +++ b/src/packages/media/media/components/input-image-cropper/focalpoint-change.event.ts @@ -0,0 +1,13 @@ +import type { UmbFocalPointModel } from '../../types.js'; + +export class UmbFocalPointChangeEvent extends Event { + public static readonly TYPE = 'focalpoint-change'; + + public focalPoint: UmbFocalPointModel; + + public constructor(focalPoint: UmbFocalPointModel, args?: EventInit) { + // mimics the native change event + super(UmbFocalPointChangeEvent.TYPE, { bubbles: false, composed: false, cancelable: false, ...args }); + this.focalPoint = focalPoint; + } +} \ No newline at end of file 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 c330b50c43..3ca9812849 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 @@ -7,6 +7,8 @@ import type { UmbImageCropperCrops, UmbImageCropperFocalPoint, UmbImageCropperPropertyEditorValue, + UmbFocalPointChangeEvent, + UmbImageCropChangeEvent, } from './index.js'; import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; @@ -87,7 +89,7 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement { this.currentCrop = { ...this.crops[index] }; } - #onCropChange = (event: CustomEvent) => { + #onCropChange = (event: UmbImageCropChangeEvent) => { const target = event.target as UmbImageCropperElement; const value = target.value; @@ -102,8 +104,8 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement { this.#updateValue(); }; - #onFocalPointChange = (event: CustomEvent) => { - this.focalPoint = event.detail; + #onFocalPointChange = (event: UmbFocalPointChangeEvent) => { + this.focalPoint = { top: event.focalPoint.top, left: event.focalPoint.left }; this.#updateValue(); }; @@ -137,7 +139,7 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement { .src=${this.source} .value=${this.currentCrop} ?hideFocalPoint=${this.hideFocalPoint} - @change=${this.#onCropChange}> + @imagecrop-change=${this.#onCropChange}> `; } @@ -147,7 +149,7 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement { .focalPoint=${this.focalPoint} .src=${this.source} ?hideFocalPoint=${this.hideFocalPoint} - @change=${this.#onFocalPointChange}> + @focalpoint-change=${this.#onFocalPointChange}>