yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1838 from umbraco/bugfix/image-cropper-loading

Browse Source 
Bugfix: Image Cropper Overflow
This commit is contained in:
Lone Iversen
2024-05-17 12:05:18 +02:00
committed by GitHub
parent 14baeef9ff b32c2547dd
commit 3d14ffb2ea
3 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts
View File

@@ -5,20 +5,15 @@ import { LitElement, css, html, nothing, customElement, property, query } from '
@customElement('umb-image-cropper-focus-setter')
export class UmbImageCropperFocusSetterElement extends LitElement {
@query('#image') imageElement?: HTMLImageElement;
@query('#image') imageElement!: HTMLImageElement;
@query('#wrapper') wrapperElement?: HTMLImageElement;
@query('#focal-point') focalPointElement?: HTMLImageElement;
@query('#focal-point') focalPointElement!: HTMLImageElement;
@property({ type: String }) src?: string;
@property({ attribute: false }) focalPoint: UmbImageCropperFocalPoint = { left: 0.5, top: 0.5 };
#DOT_RADIUS = 6 as const;
connectedCallback() {
super.connectedCallback();
this.#addEventListeners();
}
disconnectedCallback() {
super.disconnectedCallback();
this.#removeEventListeners();
@@ -33,33 +28,46 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
}
}
protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
super.update(changedProperties);
if (changedProperties.has('src')) {
if (this.src) {
this.#initializeImage();
}
}
}
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
super.firstUpdated(_changedProperties);
this.style.setProperty('--dot-radius', `${this.#DOT_RADIUS}px`);
}
if (this.focalPointElement) {
this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
}
if (this.imageElement) {
this.imageElement.onload = () => {
if (!this.imageElement || !this.wrapperElement) return;
const imageAspectRatio = this.imageElement.naturalWidth / this.imageElement.naturalHeight;
const hostRect = this.getBoundingClientRect();
const image = this.imageElement.getBoundingClientRect();
async #initializeImage() {
await this.updateComplete; // Wait for the @query to be resolved
if (image.width > hostRect.width) {
this.imageElement.style.width = '100%';
}
if (image.height > hostRect.height) {
this.imageElement.style.height = '100%';
}
this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
this.imageElement.style.aspectRatio = `${imageAspectRatio}`;
this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
};
}
this.imageElement.onload = () => {
if (!this.imageElement || !this.wrapperElement) return;
const imageAspectRatio = this.imageElement.naturalWidth / this.imageElement.naturalHeight;
const hostRect = this.getBoundingClientRect();
const image = this.imageElement.getBoundingClientRect();
if (image.width > hostRect.width) {
this.imageElement.style.width = '100%';
}
if (image.height > hostRect.height) {
this.imageElement.style.height = '100%';
}
this.imageElement.style.aspectRatio = `${imageAspectRatio}`;
this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
};
this.#addEventListeners();
}
async #addEventListeners() {
@@ -134,6 +142,7 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
}
/* Wrapper is used to make the focal point position responsive to the image size */
#wrapper {
overflow: hidden;
position: relative;
display: flex;
margin: auto;

6
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts
View File

@@ -33,11 +33,7 @@ export class UmbImageCropperPreviewElement extends LitElement {
if (!this.crop) return;
await this.updateComplete; // Wait for the @query to be resolved
if (!this.imageElement.complete) {
// Wait for the image to load
await new Promise((resolve) => (this.imageElement.onload = () => resolve(this.imageElement)));
}
await new Promise((resolve) => (this.imageElement.onload = () => resolve(this.imageElement)));
const container = this.imageContainerElement.getBoundingClientRect();
const cropAspectRatio = this.crop.width / this.crop.height;

1
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper.element.ts
View File

@@ -376,6 +376,7 @@ export class UmbImageCropperElement extends LitElement {
#image {
display: block;
position: absolute;
user-select: none;
}
#slider {