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 31a2668763..87c4631a84 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
@@ -8,7 +8,7 @@ import type {
UmbImageCropperFocalPoint,
UmbImageCropperPropertyEditorValue,
} from './index.js';
-import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -34,24 +34,26 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
this.requestUpdate();
}
-
#value?: UmbImageCropperPropertyEditorValue;
+ @state()
+ crops: UmbImageCropperCrops = [];
+
+ @state()
+ currentCrop?: UmbImageCropperCrop;
+
@property({ attribute: false })
file?: File;
@property()
fileDataUrl?: string;
- @state()
- currentCrop?: UmbImageCropperCrop;
-
- @state()
- crops: UmbImageCropperCrops = [];
-
@state()
focalPoint: UmbImageCropperFocalPoint = { left: 0.5, top: 0.5 };
+ @property({ type: Boolean })
+ hideFocalPoint = false;
+
@state()
src = '';
@@ -128,22 +130,32 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
}
#renderMain() {
- return this.currentCrop
- ? html``
- : html`
-
-
-
-
`;
+ .src=${this.source}
+ .value=${this.currentCrop}
+ ?hideFocalPoint=${this.hideFocalPoint}
+ @change=${this.#onCropChange}>
+
+ `;
+ }
+
+ return html`
+
+
+
+
+
+
+ `;
}
#renderSide() {
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 ce4783482f..5f87bc42a9 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,16 +1,28 @@
import type { UmbImageCropperFocalPoint } from './index.js';
import { clamp } from '@umbraco-cms/backoffice/utils';
+import { css, customElement, html, nothing, property, query, LitElement } from '@umbraco-cms/backoffice/external/lit';
import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
-import { LitElement, css, html, nothing, customElement, property, query } from '@umbraco-cms/backoffice/external/lit';
@customElement('umb-image-cropper-focus-setter')
export class UmbImageCropperFocusSetterElement extends LitElement {
- @query('#image') imageElement!: HTMLImageElement;
- @query('#wrapper') wrapperElement?: HTMLImageElement;
- @query('#focal-point') focalPointElement!: HTMLImageElement;
+ @query('#image')
+ imageElement!: HTMLImageElement;
- @property({ type: String }) src?: string;
- @property({ attribute: false }) focalPoint: UmbImageCropperFocalPoint = { left: 0.5, top: 0.5 };
+ @query('#wrapper')
+ wrapperElement?: HTMLImageElement;
+
+ @query('#focal-point')
+ focalPointElement!: HTMLImageElement;
+
+ @property({ attribute: false })
+ focalPoint: UmbImageCropperFocalPoint = { left: 0.5, top: 0.5 };
+
+ // TODO: [LK] Temporary fix; to be reviewed.
+ @property({ type: Boolean })
+ hideFocalPoint = false;
+
+ @property({ type: String })
+ src?: string;
#DOT_RADIUS = 6 as const;
@@ -126,7 +138,7 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
return html`
![]()
nothing} src=${this.src} alt="" />
-
+
`;
}
@@ -165,6 +177,9 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
pointer-events: none;
background-color: white;
}
+ #focal-point.hidden {
+ display: none;
+ }
`;
}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts
index aa7caca0fb..c3cb1fb231 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts
@@ -187,7 +187,7 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement,
return {
data: {
cropOptions: this.preselectedCrops,
- focalPointEnabled: this.focalPointEnabled,
+ hideFocalPoint: !this.focalPointEnabled,
key,
unique: item.mediaKey,
pickableFilter: this.#pickableFilter,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts
index 6ed30e026a..06741e144f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts
@@ -1,8 +1,8 @@
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 { UmbInputImageCropperFieldElement } from '../../components/input-image-cropper/image-cropper-field.element.js';
import type { UmbImageCropperPropertyEditorValue } from '../../components/index.js';
-import { UMB_MEDIA_PICKER_MODAL } from '../media-picker/media-picker-modal.token.js';
import type {
UmbImageCropperEditorModalData,
UmbImageCropperEditorModalValue,
@@ -12,9 +12,9 @@ import {
UMB_MODAL_MANAGER_CONTEXT,
UMB_WORKSPACE_MODAL,
UmbModalBaseElement,
- type UmbModalManagerContext,
UmbModalRouteRegistrationController,
} from '@umbraco-cms/backoffice/modal';
+import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
/** TODO Make some of the components from property editor image cropper reuseable for this modal... */
@@ -35,8 +35,7 @@ export class UmbImageCropperEditorModalElement extends UmbModalBaseElement<
private _unique: string = '';
@state()
- private _focalPointEnabled = false;
- /** TODO allow to enable/disable focalpoint */
+ private _hideFocalPoint = false;
@state()
private _crops: Array = [];
@@ -71,7 +70,7 @@ export class UmbImageCropperEditorModalElement extends UmbModalBaseElement<
this._key = this.data?.key ?? '';
this._unique = this.data?.unique ?? '';
- this._focalPointEnabled = this.data?.focalPointEnabled ?? false;
+ this._hideFocalPoint = this.data?.hideFocalPoint ?? false;
this._crops = this.data?.cropOptions ?? [];
this._pickableFilter = this.data?.pickableFilter;
@@ -130,7 +129,10 @@ export class UmbImageCropperEditorModalElement extends UmbModalBaseElement<
#renderBody() {
return html`
-
+
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts
index e4c7bdb10b..e5b4f47c0b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts
@@ -5,7 +5,7 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
export interface UmbImageCropperEditorModalData {
key: string;
unique: string;
- focalPointEnabled: boolean;
+ hideFocalPoint: boolean;
cropOptions: Array;
pickableFilter?: (item: ItemType) => boolean;
}