From 18fae3d1f8e86ec95a0f3156320635d570ab06ba Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 7 Nov 2024 11:56:35 +0100 Subject: [PATCH] use relative imports --- .../image-cropper-field.element.ts | 13 +++--- .../image-cropper-focus-setter.element.ts | 45 +++++++++++-------- .../image-cropper.element.ts | 14 ++++-- 3 files changed, 45 insertions(+), 27 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts index 3ca9812849..5ba36c22b8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts @@ -1,19 +1,20 @@ -import './image-cropper.element.js'; -import './image-cropper-focus-setter.element.js'; -import './image-cropper-preview.element.js'; import type { UmbImageCropperElement } from './image-cropper.element.js'; import type { UmbImageCropperCrop, UmbImageCropperCrops, UmbImageCropperFocalPoint, UmbImageCropperPropertyEditorValue, - UmbFocalPointChangeEvent, - UmbImageCropChangeEvent, -} from './index.js'; +} from './types.js'; +import type { UmbImageCropChangeEvent } from './crop-change.event.js'; +import type { UmbFocalPointChangeEvent } from './focalpoint-change.event.js'; import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import './image-cropper.element.js'; +import './image-cropper-focus-setter.element.js'; +import './image-cropper-preview.element.js'; + @customElement('umb-image-cropper-field') export class UmbInputImageCropperFieldElement extends UmbLitElement { @property({ attribute: false }) 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 0963940875..5951fe8079 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 @@ -1,8 +1,19 @@ -import { type UmbImageCropperFocalPoint, UmbFocalPointChangeEvent } from './index.js'; import type { UmbFocalPointModel } from '../../types.js'; +import type { UmbImageCropperFocalPoint } from './types.js'; +import { UmbFocalPointChangeEvent } from './focalpoint-change.event.js'; import { drag } from '@umbraco-cms/backoffice/external/uui'; import { clamp } from '@umbraco-cms/backoffice/utils'; -import { css, customElement, classMap, ifDefined, html, nothing, state, property, query } from '@umbraco-cms/backoffice/external/lit'; +import { + css, + customElement, + classMap, + ifDefined, + html, + nothing, + state, + property, + query, +} from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit'; @@ -38,7 +49,7 @@ export class UmbImageCropperFocusSetterElement extends UmbLitElement { @property({ type: Boolean }) hideFocalPoint = false; - + @property({ type: Boolean, reflect: true }) disabled = false; @@ -84,7 +95,7 @@ export class UmbImageCropperFocusSetterElement extends UmbLitElement { } this.#resetCoords(); - + this.imageElement.style.aspectRatio = `${imageAspectRatio}`; this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`; }; @@ -97,22 +108,21 @@ export class UmbImageCropperFocusSetterElement extends UmbLitElement { } #coordsToFactor(x: number, y: number) { - const top = (y / 100) / y * 50; - const left = (x / 100) / x * 50; + const top = (y / 100 / y) * 50; + const left = (x / 100 / x) * 50; - return { top, left }; + return { top, left }; } #setFocalPoint(x: number, y: number, width: number, height: number) { - - const left = clamp((x / width), 0, 1); - const top = clamp((y / height), 0, 1); + const left = clamp(x / width, 0, 1); + const top = clamp(y / height, 0, 1); this.#coordsToFactor(x, y); const focalPoint = { left, top } as UmbFocalPointModel; - console.log("setFocalPoint", focalPoint) + console.log('setFocalPoint', focalPoint); this.dispatchEvent(new UmbFocalPointChangeEvent(focalPoint)); } @@ -171,7 +181,7 @@ export class UmbImageCropperFocusSetterElement extends UmbLitElement { #handleGridKeyDown(event: KeyboardEvent) { if (this.disabled || this.hideFocalPoint) return; - + const increment = event.shiftKey ? 1 : 10; const grid = this.wrapperElement; @@ -207,14 +217,13 @@ export class UmbImageCropperFocusSetterElement extends UmbLitElement { override render() { if (!this.src) return nothing; return html` -
+
nothing} src=${this.src} alt="" /> -
- - + +
`; }