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

make focalpoint responsive

Browse Source
This commit is contained in:
Jesper Møller Jensen
2023-10-18 23:21:54 +13:00
parent 2b073c0640
commit a2fc90d41c
1 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,7 +59,6 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
#onSetFocalPoint(event: MouseEvent) {
event.preventDefault();
const viewport = this.getBoundingClientRect();
const image = this.imageElement.getBoundingClientRect();
const x = clamp(event.clientX - image.left, 0, image.width);
@@ -68,8 +67,8 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
const left = clamp(x / image.width, 0, 1);
const top = clamp(y / image.height, 0, 1);
this.focalPointElement.style.left = `${x + image.left - viewport.left - this.#DOT_RADIUS}px`;
this.focalPointElement.style.top = `${y + image.top - viewport.top - this.#DOT_RADIUS}px`;
this.focalPointElement.style.left = `calc(${left * 100}% - ${this.#DOT_RADIUS}px)`;
this.focalPointElement.style.top = `calc(${top * 100}% - ${this.#DOT_RADIUS}px)`;
this.dispatchEvent(
new CustomEvent('change', {
@@ -84,8 +83,10 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
if (!this.src) return nothing;
return html`
<img id="image" @click=${this.#onSetFocalPoint} @keydown=${() => nothing} src=${this.src} alt="" />
<div id="focal-point"></div>
<div id="wrapper">
<img id="image" @click=${this.#onSetFocalPoint} @keydown=${() => nothing} src=${this.src} alt="" />
<div id="focal-point"></div>
</div>
`;
}
static styles = css`
@@ -98,6 +99,14 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
background-color: white;
outline: 1px solid lightgrey;
}
/* Wrapper is used to make the focal point position responsive to the image size */
#wrapper {
width: fit-content;
height: fit-content;
position: relative;
display: flex;
margin: auto;
}
#image {
max-width: 100%;
max-height: 100%;