+
@@ -1008,26 +1021,30 @@ CameraSource.template = /* HTML */ `
muted
autoplay
playsinline
- set="srcObject: video; style.transform: videoTransformCss; @hidden: videoHidden"
- ref="video"
+ style=${styleMap({
+ transform: this._videoTransformCss,
+ })}
+ ?hidden=${this._videoHidden}
+ ${ref(this._videoRef)}
>
-
-
+
@@ -1035,7 +1052,8 @@ CameraSource.template = /* HTML */ `
data-id="video"
type="button"
class="uc-switch uc-mini-btn"
- set="onclick: onClickTab; @hidden: tabVideoHidden"
+ @click=${this._handleClickTab}
+ ?hidden=${this._tabVideoHidden}
>
{}
+const DEFAULT_TABS = serializeCsv([...ALL_TABS]);
-export class CloudImageEditorBlock extends Block {
- override ctxOwner = true;
- static override styleAttrs = ['uc-cloud-image-editor'];
+export class CloudImageEditorBlock extends LitBlock {
+ public declare attributesMeta: ({ uuid: string } | { 'cdn-url': string }) &
+ Partial<{ tabs: string; 'crop-preset': string }> & {
+ 'ctx-name': string;
+ };
- private _debouncedShowLoader = debounce(this._showLoader.bind(this), 300);
+ public override ctxOwner = true;
+ public static override styleAttrs = ['uc-cloud-image-editor'];
- constructor() {
- super();
+ @state()
+ private _statusMessage = '';
- this.init$ = {
- ...this.init$,
- ...initState(this),
- } as CloudImageEditorBlockState;
+ @state()
+ private _imageSrc = TRANSPARENT_PIXEL_SRC;
+
+ @state()
+ private _fileType = '';
+
+ @state()
+ private _showLoader = false;
+
+ @property({ type: String, reflect: true })
+ public uuid: string | null = null;
+
+ @property({ type: String, attribute: 'cdn-url', reflect: true })
+ public cdnUrl: string | null = null;
+
+ @property({ type: String, attribute: 'crop-preset', reflect: true })
+ public cropPreset = '';
+
+ @property({ type: String, reflect: true })
+ public tabs: string | null = DEFAULT_TABS;
+
+ @state()
+ private _hasNetworkProblems = false;
+
+ @state()
+ private _isInitialized = false;
+
+ private _pendingInitUpdate: Promise | null = null;
+
+ private readonly _debouncedShowLoader = debounce((show: boolean) => {
+ this._showLoader = show;
+ }, 300);
+
+ private readonly _imgRef = createRef();
+ private readonly _cropperRef = createRef();
+ private readonly _faderRef = createRef();
+ private readonly _imgContainerRef = createRef();
+
+ private readonly _handleImageLoad = (): void => {
+ this._debouncedShowLoader(false);
+
+ if (this._imageSrc !== TRANSPARENT_PIXEL_SRC) {
+ this.$['*networkProblems'] = false;
+ }
+ };
+
+ private readonly _handleImageError = (): void => {
+ this._debouncedShowLoader(false);
+ this.$['*networkProblems'] = true;
+ };
+
+ private readonly _handleRetryNetwork = (): void => {
+ const retry = this.$['*on.retryNetwork'] as (() => void) | undefined;
+ retry?.();
+ };
+
+ private _scheduleInitialization(): void {
+ if (this._isInitialized || this._pendingInitUpdate) {
+ return;
+ }
+ this._pendingInitUpdate = this.updateComplete.then(() => {
+ this._pendingInitUpdate = null;
+ this._isInitialized = true;
+ });
}
- private _showLoader(show: boolean): void {
- this.$.showLoader = show;
+ public override init$ = {
+ ...this.init$,
+ ...initState(this),
+ } as ReturnType;
+
+ public override initCallback(): void {
+ super.initCallback();
+
+ this._syncTabListFromProp();
+ this._syncCropPresetState();
+ }
+
+ private _assignSharedElements(): void {
+ const faderEl = this._faderRef.value;
+ if (faderEl) {
+ this.$['*faderEl'] = faderEl;
+ }
+
+ const cropperEl = this._cropperRef.value;
+ if (cropperEl) {
+ this.$['*cropperEl'] = cropperEl;
+ }
+
+ const imgContainerEl = this._imgContainerRef.value;
+ if (imgContainerEl) {
+ this.$['*imgContainerEl'] = imgContainerEl;
+ }
+
+ const imgEl = this._imgRef.value;
+ if (imgEl) {
+ this.$['*imgEl'] = imgEl;
+ }
+ }
+
+ private _attachImageListeners(): void {
+ const imgEl = this._imgRef.value;
+ if (!imgEl) {
+ return;
+ }
+ imgEl.addEventListener('load', this._handleImageLoad);
+ imgEl.addEventListener('error', this._handleImageError);
+ }
+
+ private _detachImageListeners(): void {
+ const imgEl = this._imgRef.value;
+ if (!imgEl) {
+ return;
+ }
+ imgEl.removeEventListener('load', this._handleImageLoad);
+ imgEl.removeEventListener('error', this._handleImageError);
+ }
+
+ private get _imageClassName(): string {
+ const tabId = this.$['*tabId'] as TabIdValue;
+ return classNames('uc-image', {
+ 'uc-image_hidden_to_cropper': tabId === TabId.CROP,
+ 'uc-image_hidden_effects': tabId !== TabId.CROP,
+ });
}
/**
@@ -66,24 +191,117 @@ export class CloudImageEditorBlock extends Block {
});
}
- override initCallback(): void {
- super.initCallback();
+ public override firstUpdated(changedProperties: PropertyValues): void {
+ super.firstUpdated(changedProperties);
+ this._assignSharedElements();
+ this._attachImageListeners();
+ void this.initEditor();
- this.$['*faderEl'] = this.ref['fader-el'];
- this.$['*cropperEl'] = this.ref['cropper-el'];
- this.$['*imgContainerEl'] = this.ref['img-container-el'];
+ const hasInitialSource = Boolean(this.uuid || this.cdnUrl);
+ const alreadyRequested = changedProperties.has('uuid') || changedProperties.has('cdnUrl');
+ if (hasInitialSource && !alreadyRequested) {
+ void this.updateImage();
+ }
+ }
- this.initEditor();
+ public override disconnectedCallback(): void {
+ this._detachImageListeners();
+ super.disconnectedCallback();
}
- async updateImage(): Promise {
+ public override render() {
+ const fileType = this._fileType ?? '';
+ const message = this._statusMessage ?? '';
+ const src = this._imageSrc || TRANSPARENT_PIXEL_SRC;
+ const showLoader = this._showLoader;
+ const showNetworkProblems = this._hasNetworkProblems;
+
+ return html`
+ ${unsafeSVG(svgIconsSprite)}
+ ): void {
+ super.updated(changedProperties);
+
+ if (changedProperties.has('uuid') && this.uuid) {
+ void this.updateImage();
+ }
+
+ if (changedProperties.has('cdnUrl') && this.cdnUrl) {
+ void this.updateImage();
+ }
+
+ if (changedProperties.has('tabs')) {
+ this._syncTabListFromProp();
+ }
+
+ if (changedProperties.has('cropPreset') || changedProperties.has('cdnUrl')) {
+ this._syncCropPresetState();
+ }
+ }
+
+ private _syncTabListFromProp(): void {
+ const tabsValue = this.tabs || DEFAULT_TABS;
+ this.$['*tabList'] = parseTabs(tabsValue);
+ }
+
+ private _syncCropPresetState(): void {
+ const list = parseCropPreset(this.cropPreset ?? '') as CropPresetList;
+ let closest: CropPresetList[number] | null = null;
+
+ if (this.cdnUrl) {
+ const operations = extractOperations(this.cdnUrl);
+ const transformations = operationsToTransformations(operations) as Transformations;
+
+ if (Array.isArray(transformations?.crop?.dimensions)) {
+ const [w, h] = transformations.crop.dimensions;
+ closest = getClosestAspectRatio(w, h, list, 0.1);
+ }
+ }
+
+ this.$['*cropPresetList'] = list;
+ this.$['*currentAspectRatio'] = closest ?? list?.[0] ?? null;
+ }
+
+ public async updateImage(): Promise {
if (!this.isConnected) {
return;
}
await this._waitForSize();
- if (this.$.cdnUrl) {
- const cdnUrlValue = this.$.cdnUrl as string;
+ if (this.cdnUrl) {
+ const cdnUrlValue = this.cdnUrl as string;
const uuid = extractUuid(cdnUrlValue);
const originalUrl = createOriginalUrl(cdnUrlValue, uuid);
if (originalUrl === this.$['*originalUrl']) {
@@ -93,8 +311,8 @@ export class CloudImageEditorBlock extends Block {
const operations = extractOperations(cdnUrlValue);
const transformations = operationsToTransformations(operations) as Transformations;
this.$['*editorTransformations'] = transformations;
- } else if (this.$.uuid) {
- const originalUrl = createOriginalUrl(this.cfg.cdnCname, this.$.uuid as string);
+ } else if (this.uuid) {
+ const originalUrl = createOriginalUrl(this.cfg.cdnCname, this.uuid as string);
if (originalUrl === this.$['*originalUrl']) {
return;
}
@@ -129,9 +347,11 @@ export class CloudImageEditorBlock extends Block {
console.error('Failed to load image info', err);
}
}
+
+ this._scheduleInitialization();
}
- async initEditor(): Promise {
+ public async initEditor(): Promise {
try {
await this._waitForSize();
} catch (err) {
@@ -142,43 +362,11 @@ export class CloudImageEditorBlock extends Block {
return;
}
- this.ref['img-el'].addEventListener('load', () => {
- this._debouncedShowLoader(false);
-
- if (this.$.src !== TRANSPARENT_PIXEL_SRC) {
- this.$['*networkProblems'] = false;
- }
- });
-
- this.ref['img-el'].addEventListener('error', () => {
- this._debouncedShowLoader(false);
-
- this.$['*networkProblems'] = true;
- });
-
- this.sub('src', (src) => {
- const el = this.ref['img-el'];
- if (el.src !== src) {
- el.src = src || TRANSPARENT_PIXEL_SRC;
- }
- });
-
- this.sub('tabs', (val: string) => {
- this.$['*tabList'] = parseTabs(val);
- });
-
- this.sub('*tabId', (tabId: TabIdValue) => {
- (this.ref['img-el'] as HTMLImageElement).className = classNames('uc-image', {
- 'uc-image_hidden_to_cropper': tabId === TabId.CROP,
- 'uc-image_hidden_effects': tabId !== TabId.CROP,
- });
- });
-
this.classList.add('uc-editor_ON');
this.sub('*networkProblems', (networkProblems) => {
- this.$['presence.networkProblems'] = networkProblems;
- this.$['presence.modalCaption'] = !networkProblems;
+ const hasIssues = Boolean(networkProblems);
+ this._hasNetworkProblems = hasIssues;
});
this.sub(
@@ -207,34 +395,5 @@ export class CloudImageEditorBlock extends Block {
},
false,
);
-
- this.sub('uuid', (val: string | null) => val && this.updateImage());
- this.sub('cdnUrl', (val: string | null) => val && this.updateImage());
-
- this.sub('cropPreset', (val: string) => {
- const list = parseCropPreset(val) as CropPresetList;
- let closest: CropPresetList[number] | null = null;
-
- if (this.$.cdnUrl) {
- const operations = extractOperations(this.$.cdnUrl as string);
- const transformations = operationsToTransformations(operations) as Transformations;
-
- if (Array.isArray(transformations?.crop?.dimensions)) {
- const [w, h] = transformations.crop.dimensions;
- closest = getClosestAspectRatio(w, h, list, 0.1);
- }
- }
-
- this.$['*cropPresetList'] = list;
- this.$['*currentAspectRatio'] = closest ?? list?.[0] ?? null;
- });
}
}
-
-CloudImageEditorBlock.template = TEMPLATE;
-CloudImageEditorBlock.bindAttributes({
- uuid: 'uuid',
- 'cdn-url': 'cdnUrl',
- 'crop-preset': 'cropPreset',
- tabs: 'tabs',
-});
diff --git a/src/blocks/CloudImageEditor/src/CropFrame.ts b/src/blocks/CloudImageEditor/src/CropFrame.ts
index 7c6b1d333..15aac8788 100644
--- a/src/blocks/CloudImageEditor/src/CropFrame.ts
+++ b/src/blocks/CloudImageEditor/src/CropFrame.ts
@@ -1,5 +1,8 @@
-import { UID } from '@symbiotejs/symbiote';
-import { Block } from '../../../abstract/Block';
+import type { PropertyValues, TemplateResult } from 'lit';
+import { html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { LitBlock } from '../../../lit/LitBlock';
import {
clamp,
constraintRect,
@@ -30,11 +33,7 @@ type FrameThumb = NonNullable;
type Delta = [number, number];
-export class CropFrame extends Block {
- private readonly _handlePointerUp: (e: PointerEvent) => void;
- private readonly _handlePointerMove: (e: PointerEvent) => void;
- private readonly _handleSvgPointerMove: (e: PointerEvent) => void;
- private readonly _backdropMaskId = `backdrop-mask-${UID.generate()}`;
+export class CropFrame extends LitBlock {
private _backdropMask?: SVGMaskElement;
private _backdropMaskInner?: SVGRectElement;
private _frameThumbs?: FrameThumbs;
@@ -45,20 +44,40 @@ export class CropFrame extends Block {
private _dragStartCrop?: Rectangle;
private _frameImage?: SVGImageElement;
private _guidesHidden = false;
+ @state()
+ private _draggingValue = false;
+ private readonly _svgRef = createRef();
+ private _svgReady = false;
+ private _pendingMaskHref: string | null = null;
+
+ private get _svgElement(): SVGSVGElement | null {
+ return this._svgRef.value ?? null;
+ }
- constructor() {
- super();
-
- this.init$ = {
- ...this.init$,
- dragging: false,
- };
-
- this._handlePointerUp = this._handlePointerUp_.bind(this);
+ private get _dragging(): boolean {
+ return this._draggingValue;
+ }
- this._handlePointerMove = this._handlePointerMove_.bind(this);
+ private set _dragging(value: boolean) {
+ if (this._draggingValue === value) {
+ return;
+ }
+ this._draggingValue = value;
+ this._applyGuidesDragState();
+ }
- this._handleSvgPointerMove = this._handleSvgPointerMove_.bind(this);
+ private _applyGuidesDragState(): void {
+ if (!this._frameGuides) {
+ return;
+ }
+ this._frameGuides.setAttribute(
+ 'class',
+ classNames({
+ 'uc-guides--hidden': this._guidesHidden,
+ 'uc-guides--visible': !this._guidesHidden && this._draggingValue,
+ 'uc-guides--semi-hidden': !this._guidesHidden && !this._draggingValue,
+ }),
+ );
}
private _shouldThumbBeDisabled(direction: Direction): boolean {
@@ -82,9 +101,12 @@ export class CropFrame extends Block {
return;
}
const { x, y, width, height } = cropBox;
- const svg = this.ref['svg-el'] as SVGSVGElement;
+ const svg = this._svgElement;
+ if (!svg) {
+ return;
+ }
- const mask = createSvgNode('mask', { id: this._backdropMaskId }) as SVGMaskElement;
+ const mask = createSvgNode('mask', { id: 'backdrop-mask' }) as SVGMaskElement;
const maskRectOuter = createSvgNode('rect', {
x: 0,
y: 0,
@@ -109,7 +131,7 @@ export class CropFrame extends Block {
height: '100%',
fill: 'var(--color-image-background)',
'fill-opacity': 0.85,
- mask: `url(#${this._backdropMaskId})`,
+ mask: 'url(#backdrop-mask)',
});
svg.appendChild(backdropRect);
svg.appendChild(mask);
@@ -305,7 +327,10 @@ export class CropFrame extends Block {
}
private _createFrame(): void {
- const svg = this.ref['svg-el'] as SVGSVGElement;
+ const svg = this._svgElement;
+ if (!svg) {
+ return;
+ }
const fr = document.createDocumentFragment();
const frameGuides = this._createGuides();
@@ -319,6 +344,7 @@ export class CropFrame extends Block {
svg.appendChild(fr);
this._frameThumbs = frameThumbs;
this._frameGuides = frameGuides;
+ this._applyGuidesDragState();
}
private _handlePointerDown(direction: Direction, e: PointerEvent): void {
@@ -332,37 +358,43 @@ export class CropFrame extends Block {
}
const cropBox = this.$['*cropBox'] as Rectangle;
- const svgElement = this.ref['svg-el'] as SVGSVGElement;
+ const svgElement = this._svgElement;
+ if (!svgElement) {
+ return;
+ }
const { x: svgX, y: svgY } = svgElement.getBoundingClientRect();
const x = e.x - svgX;
const y = e.y - svgY;
- this.$.dragging = true;
+ this._dragging = true;
this._draggingThumb = thumb;
this._dragStartPoint = [x, y];
this._dragStartCrop = { ...cropBox };
}
- private _handlePointerUp_(e: PointerEvent): void {
+ private readonly _handlePointerUp = (e: PointerEvent): void => {
this._updateCursor();
- if (!this.$.dragging) {
+ if (!this._dragging) {
return;
}
e.stopPropagation();
e.preventDefault();
- this.$.dragging = false;
- }
+ this._dragging = false;
+ };
- private _handlePointerMove_(e: PointerEvent): void {
- if (!this.$.dragging || !this._dragStartPoint || !this._draggingThumb) {
+ private readonly _handlePointerMove = (e: PointerEvent): void => {
+ if (!this._dragging || !this._dragStartPoint || !this._draggingThumb) {
return;
}
e.stopPropagation();
e.preventDefault();
- const svg = this.ref['svg-el'] as SVGSVGElement;
+ const svg = this._svgElement;
+ if (!svg) {
+ return;
+ }
const { x: svgX, y: svgY } = svg.getBoundingClientRect();
const x = e.x - svgX;
const y = e.y - svgY;
@@ -374,7 +406,7 @@ export class CropFrame extends Block {
if (movedCropBox) {
this.$['*cropBox'] = movedCropBox;
}
- }
+ };
private _calcCropBox(direction: Direction, delta: Delta): Rectangle | undefined {
const [dx, dy] = delta;
@@ -399,7 +431,7 @@ export class CropFrame extends Block {
return constraintRect(roundRect(rect), imageBox);
}
- private _handleSvgPointerMove_(e: PointerEvent): void {
+ private readonly _handleSvgPointerMove = (e: PointerEvent): void => {
if (!this._frameThumbs) return;
const hoverThumb = Object.values(this._frameThumbs).find((thumb) => {
@@ -423,11 +455,14 @@ export class CropFrame extends Block {
this._hoverThumb = hoverThumb as FrameThumb | undefined;
this._updateCursor();
- }
+ };
private _updateCursor(): void {
const hoverThumb = this._hoverThumb;
- const svg = this.ref['svg-el'] as SVGSVGElement;
+ const svg = this._svgElement;
+ if (!svg) {
+ return;
+ }
svg.style.cursor = hoverThumb ? thumbCursor(hoverThumb.direction) : 'initial';
}
@@ -437,7 +472,12 @@ export class CropFrame extends Block {
return;
}
- const svg = this.ref['svg-el'] as SVGSVGElement;
+ const svg = this._svgElement;
+ if (!svg) {
+ this._pendingMaskHref = href;
+ return;
+ }
+ this._pendingMaskHref = null;
const fr = document.createDocumentFragment();
const imageNode = createSvgNode('image', {
@@ -471,12 +511,15 @@ export class CropFrame extends Block {
}
private _render(): void {
+ if (!this._svgReady) {
+ return;
+ }
this._updateBackdrop();
this._updateFrame();
this._updateMask();
}
- toggleThumbs(visible: boolean): void {
+ public toggleThumbs(visible: boolean): void {
if (!this._frameThumbs) return;
for (const thumb of Object.values(this._frameThumbs)) {
if (!thumb) {
@@ -493,14 +536,14 @@ export class CropFrame extends Block {
}
}
- override initCallback() {
+ public override initCallback(): void {
super.initCallback();
- this._createBackdrop();
- this._createFrame();
-
this.sub('*imageBox', () => {
this._resizeBackdrop();
+ if (!this._svgReady) {
+ return;
+ }
window.requestAnimationFrame(() => {
this._render();
});
@@ -511,6 +554,10 @@ export class CropFrame extends Block {
return;
}
this._guidesHidden = cropBox.height <= MIN_CROP_SIZE || cropBox.width <= MIN_CROP_SIZE;
+ this._applyGuidesDragState();
+ if (!this._svgReady) {
+ return;
+ }
window.requestAnimationFrame(() => {
this._render();
});
@@ -522,32 +569,44 @@ export class CropFrame extends Block {
}
});
- this.sub('dragging', (dragging: boolean) => {
- if (!this._frameGuides) return;
- this._frameGuides.setAttribute(
- 'class',
- classNames({
- 'uc-guides--hidden': this._guidesHidden,
- 'uc-guides--visible': !this._guidesHidden && dragging,
- 'uc-guides--semi-hidden': !this._guidesHidden && !dragging,
- }),
- );
- });
-
- const svg = this.ref['svg-el'] as SVGSVGElement;
- svg.addEventListener('pointermove', this._handleSvgPointerMove, true);
document.addEventListener('pointermove', this._handlePointerMove, true);
document.addEventListener('pointerup', this._handlePointerUp, true);
}
- override destroyCallback() {
- super.destroyCallback();
+ protected override firstUpdated(changedProperties: PropertyValues): void {
+ super.firstUpdated(changedProperties);
+ this._initializeSvg();
+ }
- const svg = this.ref['svg-el'] as SVGSVGElement;
- svg.removeEventListener('pointermove', this._handleSvgPointerMove, true);
- document.removeEventListener('pointermove', this._handlePointerMove);
- document.removeEventListener('pointerup', this._handlePointerUp);
+ private _initializeSvg(): void {
+ const svg = this._svgElement;
+ if (!svg || this._svgReady) {
+ return;
+ }
+ this._createBackdrop();
+ this._createFrame();
+ this._svgReady = true;
+ svg.addEventListener('pointermove', this._handleSvgPointerMove, true);
+
+ if (this._pendingMaskHref) {
+ const pendingMask = this._pendingMaskHref;
+ this._pendingMaskHref = null;
+ this._createMask(pendingMask);
+ }
+
+ this._render();
+ }
+
+ public override disconnectedCallback(): void {
+ super.disconnectedCallback();
+
+ const svg = this._svgElement;
+ svg?.removeEventListener('pointermove', this._handleSvgPointerMove, true);
+ document.removeEventListener('pointermove', this._handlePointerMove, true);
+ document.removeEventListener('pointerup', this._handlePointerUp, true);
}
-}
-CropFrame.template = /* HTML */ ` `;
+ public override render(): TemplateResult {
+ return html``;
+ }
+}
diff --git a/src/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.ts b/src/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.ts
index 77830d9e1..ff8045775 100644
--- a/src/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.ts
+++ b/src/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.ts
@@ -1,4 +1,7 @@
-import { createSvgNode } from './crop-utils.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
import { EditorButtonControl } from './EditorButtonControl.js';
import type { CropAspectRatio } from './types';
@@ -22,88 +25,88 @@ const getAdjustResolutions = (value: CropAspectRatio) => {
};
export class EditorFreeformButtonControl extends EditorButtonControl {
- override initCallback(): void {
+ public override initCallback(): void {
super.initCallback();
- this.$.icon = 'arrow-dropdown';
- this.$['on.click'] = this.handleClick.bind(this);
+ this.icon = 'arrow-dropdown';
- this.sub('*currentAspectRatio', (opt: CropAspectRatio) => {
- this.$.title = opt.hasFreeform
- ? this.l10n('freeform-crop')
- : this.l10n('crop-to-shape', { value: `${opt.width}:${opt.height}` });
-
- this.bindL10n('title-prop', () => this.$.title);
+ this.sub('*currentAspectRatio', (opt: CropAspectRatio | null) => {
+ const title = this._computeTitle(opt);
+ this.title = title;
+ this.titleProp = title;
});
}
- handleClick(): void {
+ public override onClick(): void {
this.$['*showListAspectRatio'] = true;
}
-}
-EditorFreeformButtonControl.template = /* html */ `
-
-`;
+ private _computeTitle(aspectRatio: CropAspectRatio | null): string {
+ if (!aspectRatio) {
+ return '';
+ }
+ return aspectRatio.hasFreeform
+ ? this.l10n('freeform-crop')
+ : this.l10n('crop-to-shape', { value: `${aspectRatio.width}:${aspectRatio.height}` });
+ }
-export interface EditorAspectRatioButtonControl {
- get aspectRatio(): CropAspectRatio | undefined;
- set aspectRatio(value: CropAspectRatio | undefined);
+ public override render() {
+ const clickHandler = this.onClick;
+ const title = this.title;
+ return html`
+
+ `;
+ }
}
-
-// biome-ignore lint/suspicious/noUnsafeDeclarationMerging: This is intentional interface merging, used to add configuration setters/getters
export class EditorAspectRatioButtonControl extends EditorButtonControl {
- constructor() {
- super();
+ private _aspectRatio: CropAspectRatio | null = null;
- this.init$ = {
- ...this.init$,
- active: false,
- once: false,
- };
+ @property({ attribute: false })
+ public get aspectRatio(): CropAspectRatio | null {
+ return this._aspectRatio;
}
- override initCallback(): void {
- super.initCallback();
- this.defineAccessor('aspectRatio', (value: CropAspectRatio) => {
- if (!value) return;
-
- const isFreeform = !!value.hasFreeform;
- this.$.title = isFreeform ? this.l10n('custom') : `${value.width}:${value.height}`;
-
- if (!isFreeform) {
- this._renderRectBasedOnAspectRatio(value);
- }
-
- if (isFreeform) {
- this.setAttribute('uc-aspect-ratio-freeform', '');
- }
+ public set aspectRatio(value: CropAspectRatio | null) {
+ if (this._aspectRatio === value) {
+ return;
+ }
+ const previous = this._aspectRatio;
+ this._aspectRatio = value;
+ this.requestUpdate('aspectRatio', previous);
+ if (value) {
+ this._updateAspectRatioPresentation(value);
+ } else {
+ this.removeAttribute('uc-aspect-ratio-freeform');
+ this.title = '';
+ this.titleProp = '';
+ }
+ }
- this._aspectRatio = value;
+ public override initCallback(): void {
+ super.initCallback();
- this.bindL10n('title-prop', () => {
- return this.l10n('a11y-cloud-editor-apply-aspect-ratio', {
- name: isFreeform
- ? this.l10n('custom').toLowerCase()
- : this.l10n('crop-to-shape', { value: `${value.width}:${value.height}` }).toLowerCase(),
- value: '',
- });
- });
- });
+ if (this._aspectRatio) {
+ this._updateAspectRatioPresentation(this._aspectRatio);
+ }
- this.sub('*currentAspectRatio', (opt: CropAspectRatio | undefined) => {
- this.$.active =
+ this.sub('*currentAspectRatio', (opt: CropAspectRatio | null) => {
+ this.active =
(opt && opt.id === this._aspectRatio?.id) ||
(opt?.width === this._aspectRatio?.width && opt?.height === this._aspectRatio?.height);
});
-
- this.$['on.click'] = this.handleClick.bind(this);
}
- handleClick(): void {
+ protected override onClick(): void {
const currentAspectRatio = this.$['*currentAspectRatio'] as CropAspectRatio | undefined;
if (currentAspectRatio?.id === this._aspectRatio?.id) {
return;
@@ -112,28 +115,83 @@ export class EditorAspectRatioButtonControl extends EditorButtonControl {
this.$['*currentAspectRatio'] = this._aspectRatio;
}
- private _renderRectBasedOnAspectRatio(value: CropAspectRatio): void {
- const { width, height } = getAdjustResolutions(value);
-
- const rect = createSvgNode('rect', {
- 'stroke-linejoin': 'round',
- fill: 'none',
- stroke: 'currentColor',
- 'stroke-width': 1.2,
- 'fill-rule': 'evenodd',
- x: (SIZE_SVG_WRAPPER - width) / 2,
- y: (SIZE_SVG_WRAPPER - height) / 2,
- rx: 2,
- width,
- height,
- });
+ private _updateAspectRatioPresentation(value: CropAspectRatio): void {
+ const isFreeform = !!value.hasFreeform;
+ this.toggleAttribute('uc-aspect-ratio-freeform', isFreeform);
+
+ const resolveTitle = () => {
+ const titleText = isFreeform ? this.l10n('custom') : `${value.width}:${value.height}`;
+ this.title = titleText;
+ return titleText;
+ };
+
+ const resolveTitleProp = () => {
+ const label = this.l10n('a11y-cloud-editor-apply-aspect-ratio', {
+ name: isFreeform
+ ? this.l10n('custom').toLowerCase()
+ : this.l10n('crop-to-shape', { value: `${value.width}:${value.height}` }).toLowerCase(),
+ value: '',
+ });
+ this.titleProp = label;
+ return label;
+ };
+
+ resolveTitle();
+ resolveTitleProp();
+
+ if (!isFreeform) {
+ this.requestUpdate();
+ }
+ }
- const svgEl = this.ref['icon-el']?.ref?.svg;
+ private _renderIcon() {
+ const ratio = this._aspectRatio;
+ if (!ratio || ratio.hasFreeform) {
+ return html`
+
+
+ `;
}
- private _aspectRatio?: CropAspectRatio;
+ public override render() {
+ const clickHandler = this.onClick;
+ const title = this.title;
+ return html`
+
+ `;
+ }
}
diff --git a/src/blocks/CloudImageEditor/src/EditorButtonControl.ts b/src/blocks/CloudImageEditor/src/EditorButtonControl.ts
index 3e55d9743..2384e00db 100644
--- a/src/blocks/CloudImageEditor/src/EditorButtonControl.ts
+++ b/src/blocks/CloudImageEditor/src/EditorButtonControl.ts
@@ -1,56 +1,68 @@
-import { Block } from '../../../abstract/Block';
-import { classNames } from './lib/classNames.js';
-
-interface EditorButtonControlInitState {
- active: boolean;
- title: string;
- icon: string;
- 'on.click': ((event: MouseEvent) => unknown) | null;
- 'title-prop': string;
-}
+import type { PropertyValues } from 'lit';
+import { html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LitBlock } from '../../../lit/LitBlock';
+
+export class EditorButtonControl extends LitBlock {
+ // This is public because it's used in the updated lifecycle to assign to the shared state.
+ @state()
+ public active = false;
+
+ // TODO: Rename title since it conflicts with HTMLElement.title
+ @state()
+ public override title = '';
+
+ @state()
+ protected icon = '';
-export class EditorButtonControl extends Block {
- private _titleEl?: HTMLElement;
-
- constructor() {
- super();
- this.init$ = {
- ...this.init$,
- active: false,
- title: '',
- icon: '',
- 'on.click': null,
- 'title-prop': '',
- } as EditorButtonControlInitState;
+ @state()
+ protected titleProp = '';
+
+ protected get buttonClasses(): Record {
+ const isActive = this.active;
+ return {
+ 'uc-active': isActive,
+ 'uc-not_active': !isActive,
+ };
}
- override initCallback(): void {
- super.initCallback();
-
- this._titleEl = this.ref['title-el'] as HTMLElement | undefined;
- this.sub('title', (title: string) => {
- const titleEl = this._titleEl;
- if (titleEl) {
- titleEl.style.display = title ? 'block' : 'none';
- }
- });
-
- this.sub('active', (active: boolean) => {
- this.className = classNames({
- 'uc-active': active,
- 'uc-not_active': !active,
- });
- });
-
- this.sub('on.click', (onClick: ((event: MouseEvent) => unknown) | null) => {
- this.onclick = onClick ?? null;
- });
+ private _updateHostStateClasses(): void {
+ const classes = this.buttonClasses;
+ for (const [className, enabled] of Object.entries(classes)) {
+ this.classList.toggle(className, enabled);
+ }
}
-}
-EditorButtonControl.template = /* HTML */ `
-
-`;
+ protected onClick(_event: MouseEvent): void {}
+
+ public override connectedCallback(): void {
+ super.connectedCallback();
+ this._updateHostStateClasses();
+ }
+
+ protected override updated(changedProperties: PropertyValues): void {
+ super.updated(changedProperties);
+ if (changedProperties.has('active')) {
+ this._updateHostStateClasses();
+ }
+ }
+
+ public override render() {
+ const clickHandler = this.onClick;
+ const title = this.title;
+
+ return html`
+
+ `;
+ }
+}
diff --git a/src/blocks/CloudImageEditor/src/EditorCropButtonControl.ts b/src/blocks/CloudImageEditor/src/EditorCropButtonControl.ts
index c61694242..43cc7f88d 100644
--- a/src/blocks/CloudImageEditor/src/EditorCropButtonControl.ts
+++ b/src/blocks/CloudImageEditor/src/EditorCropButtonControl.ts
@@ -1,3 +1,5 @@
+import type { PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
import { EditorButtonControl } from './EditorButtonControl.js';
import type { EditorImageCropper } from './EditorImageCropper.js';
import type { CropOperation } from './toolbar-constants';
@@ -19,49 +21,39 @@ function nextValue(operation: CropOperation, prev: number | boolean): number | b
throw new Error(`Unsupported operation: ${operation}`);
}
-export interface EditorCropButtonControl {
- get operation(): CropOperation | undefined;
- set operation(value: CropOperation | undefined);
-}
-
-// biome-ignore lint/suspicious/noUnsafeDeclarationMerging: This is intentional interface merging, used to add configuration setters/getters
export class EditorCropButtonControl extends EditorButtonControl {
- private _operation: CropOperation | undefined = undefined;
-
- override initCallback(): void {
- super.initCallback();
+ @property({ type: String })
+ public operation: CropOperation | undefined = undefined;
- this.defineAccessor('operation', (operation?: CropOperation) => {
- if (!operation) {
- return;
- }
+ protected override willUpdate(changedProperties: PropertyValues): void {
+ super.willUpdate(changedProperties);
- this._operation = operation;
- this.$.icon = operation;
-
- this.bindL10n('title-prop', () =>
- this.l10n('a11y-cloud-editor-apply-crop', {
- name: this.l10n(operation).toLowerCase(),
- }),
- );
- });
+ if (this.operation) {
+ this.titleProp = this.l10n('a11y-cloud-editor-apply-crop', {
+ name: this.l10n(this.operation).toLowerCase(),
+ });
+ this.icon = this.operation;
+ } else {
+ this.icon = '';
+ this.titleProp = '';
+ }
+ }
- this.$['on.click'] = (e: MouseEvent) => {
- if (!this._operation) {
- return;
- }
+ protected override onClick(e: MouseEvent) {
+ if (!this.operation) {
+ return;
+ }
- const cropper = this.$['*cropperEl'] as EditorImageCropper;
- const prev = cropper.getValue(this._operation);
- const next = nextValue(this._operation, prev);
+ const cropper = this.$['*cropperEl'] as EditorImageCropper;
+ const prev = cropper.getValue(this.operation);
+ const next = nextValue(this.operation, prev);
- this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
- operation: this._operation,
- next,
- prev,
- });
+ this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
+ operation: this.operation,
+ next,
+ prev,
+ });
- cropper.setValue(this._operation, next);
- };
+ cropper.setValue(this.operation, next);
}
}
diff --git a/src/blocks/CloudImageEditor/src/EditorFilterControl.ts b/src/blocks/CloudImageEditor/src/EditorFilterControl.ts
index c2a1a3b46..973b7b504 100644
--- a/src/blocks/CloudImageEditor/src/EditorFilterControl.ts
+++ b/src/blocks/CloudImageEditor/src/EditorFilterControl.ts
@@ -1,3 +1,8 @@
+import { html, type PropertyValues } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
import { createCdnUrl, createCdnUrlModifiers } from '../../../utils/cdn-utils.js';
import { preloadImage } from '../../../utils/preloadImage.js';
import { EditorButtonControl } from './EditorButtonControl.js';
@@ -12,23 +17,64 @@ export class EditorFilterControl extends EditorButtonControl {
private _originalUrl = '';
private _observer?: IntersectionObserver;
private _cancelPreload?: () => void;
+ private _lastPreviewRequestId = 0;
+ private _previewVisibilityCheckRaf?: number;
+ private _previewVisibilityCheckTimeout?: number;
- constructor() {
- super();
-
- this.init$ = {
- ...this.init$,
- active: false,
- title: '',
- icon: '',
- isOriginal: false,
- iconSize: '20',
- 'on.click': null,
- };
+ @state()
+ private _previewImage: string | null = null;
+
+ @state()
+ private _previewLoaded = false;
+
+ // This is public because it's used in the updated lifecycle to assign to the shared state.
+ @state()
+ public isOriginal = false;
+
+ @state()
+ private _iconSize = 20;
+
+ @property({ type: String })
+ public get filter(): string {
+ return this._filter;
+ }
+
+ public set filter(value: string) {
+ const nextFilter = value ?? '';
+ if (this._filter === nextFilter) {
+ return;
+ }
+ const previousValue = this._filter;
+ this._filter = nextFilter;
+ this._operation = 'filter';
+ this.isOriginal = nextFilter === FAKE_ORIGINAL_FILTER;
+ this.icon = this.isOriginal ? 'original' : 'slider';
+ this._iconSize = this.isOriginal ? 40 : 20;
+ this.requestUpdate('filter', previousValue);
+ this._updateFilterLabels(nextFilter);
+ }
+
+ public override onClick(e: MouseEvent) {
+ if (!this.active) {
+ const slider = this.$['*sliderEl'] as { setOperation: (op: string, filter: string) => void; apply: () => void };
+ slider.setOperation(this._operation, this._filter);
+ slider.apply();
+ } else if (!this.isOriginal) {
+ const slider = this.$['*sliderEl'] as { setOperation: (op: string, filter: string) => void };
+ slider.setOperation(this._operation, this._filter);
+ this.$['*showSlider'] = true;
+ }
+
+ this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
+ operation: parseFilterValue(this.$['*operationTooltip']),
+ });
+
+ this.$['*currentFilter'] = this._filter;
}
private _previewSrc(): string {
- const previewSize = parseInt(window.getComputedStyle(this).getPropertyValue('--l-base-min-width'), 10);
+ const cssSize = parseInt(window.getComputedStyle(this).getPropertyValue('--l-base-min-width'), 10);
+ const previewSize = Number.isFinite(cssSize) && cssSize > 0 ? cssSize : this._iconSize || 32;
const dpr = window.devicePixelRatio;
const size = Math.ceil(dpr * previewSize);
const quality = dpr >= 2 ? 'lightest' : 'normal';
@@ -43,7 +89,6 @@ export class EditorFilterControl extends EditorButtonControl {
amount: filterValue,
}
: undefined;
-
return createCdnUrl(
this._originalUrl,
createCdnUrlModifiers(
@@ -58,119 +103,218 @@ export class EditorFilterControl extends EditorButtonControl {
private async _observerCallback(entries: IntersectionObserverEntry[], observer: IntersectionObserver): Promise {
const intersectionEntry = entries[0];
if (intersectionEntry?.isIntersecting) {
- const src = await this.proxyUrl(this._previewSrc());
- const previewEl = this.ref['preview-el'] as HTMLElement;
- const { promise, cancel } = preloadImage(src);
- this._cancelPreload = cancel;
- promise
- .catch((err) => {
- this.$['*networkProblems'] = true;
- console.error('Failed to load image', { error: err });
- })
- .finally(() => {
- previewEl.style.backgroundImage = `url(${src})`;
- previewEl.setAttribute('loaded', '');
-
- observer.unobserve(this);
- });
+ await this._loadPreview(observer);
} else {
this._cancelPreload?.();
}
}
- override initCallback(): void {
+ public override initCallback(): void {
super.initCallback();
- this.$['on.click'] = (e: MouseEvent) => {
- if (!this.$.active) {
- const slider = this.$['*sliderEl'] as { setOperation: (op: string, filter: string) => void; apply: () => void };
- slider.setOperation(this._operation, this._filter);
- slider.apply();
- } else if (!this.$.isOriginal) {
- const slider = this.$['*sliderEl'] as { setOperation: (op: string, filter: string) => void };
- slider.setOperation(this._operation, this._filter);
- this.$['*showSlider'] = true;
+ if ('IntersectionObserver' in window) {
+ this._observer = new window.IntersectionObserver(this._observerCallback.bind(this), {
+ threshold: [0, 1],
+ });
+ }
+
+ const originalUrl = this.$['*originalUrl'] as string;
+ this._originalUrl = originalUrl ?? '';
+
+ this.sub('*originalUrl', (nextUrl: string | null) => {
+ this._originalUrl = nextUrl ?? '';
+ if (!this.isOriginal && this._originalUrl && this.isConnected && !this._previewImage) {
+ this._observer?.observe(this);
+ this._schedulePreviewVisibilityCheck();
}
+ });
- this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
- operation: parseFilterValue(this.$['*operationTooltip']),
- });
+ if (!this.isOriginal) {
+ this._observer?.observe(this);
+ this._schedulePreviewVisibilityCheck();
+ }
- this.$['*currentFilter'] = this._filter;
- };
+ if (this._filter) {
+ this._updateFilterLabels(this._filter);
+ }
- this.defineAccessor('filter', (filter: string) => {
- this._operation = 'filter';
- this._filter = filter;
- this.$.isOriginal = filter === FAKE_ORIGINAL_FILTER;
- this.$.icon = this.$.isOriginal ? 'original' : 'slider';
-
- this.bindL10n('title-prop', () =>
- this.l10n('a11y-cloud-editor-apply-filter', {
- name: filter.toLowerCase(),
- }),
- );
+ this.sub('*currentFilter', (currentFilter: string) => {
+ this.active = !!(currentFilter && currentFilter === this._filter);
});
- this._observer = new window.IntersectionObserver(this._observerCallback.bind(this), {
- threshold: [0, 1],
+ this.sub('*networkProblems', async (networkProblems: boolean) => {
+ if (networkProblems) {
+ return;
+ }
+ if (this._previewImage) {
+ await this._loadPreview();
+ } else {
+ this._schedulePreviewVisibilityCheck();
+ }
});
+ }
- const originalUrl = this.$['*originalUrl'] as string;
- this._originalUrl = originalUrl;
+ public override disconnectedCallback(): void {
+ super.disconnectedCallback();
+ this._observer?.disconnect();
+ this._cancelPreload?.();
+ this._clearPreviewVisibilityChecks();
+ }
- if (this.$.isOriginal) {
- const iconEl = this.ref['icon-el'] as HTMLElement;
- iconEl.classList.add('uc-original-icon');
- } else {
- this._observer.observe(this);
+ protected override updated(changedProperties: PropertyValues): void {
+ super.updated(changedProperties);
+
+ if (changedProperties.has('isOriginal')) {
+ if (this.isOriginal) {
+ this._observer?.unobserve(this);
+ } else {
+ this._observer?.observe(this);
+ this._schedulePreviewVisibilityCheck();
+ }
}
+ }
- this.sub('*currentFilter', (currentFilter: string) => {
- this.$.active = currentFilter && currentFilter === this._filter;
- });
+ private _updateFilterLabels(filterName: string): void {
+ if (!filterName) {
+ this.titleProp = '';
+ return;
+ }
- this.sub('isOriginal', (isOriginal: boolean) => {
- this.$.iconSize = isOriginal ? 40 : 20;
+ const label = this.l10n('a11y-cloud-editor-apply-filter', {
+ name: filterName.toLowerCase(),
});
+ this.titleProp = label;
+ }
+
+ private async _loadPreview(observer?: IntersectionObserver): Promise {
+ if (!this.isConnected) {
+ observer?.unobserve(this);
+ this._cancelPreload?.();
+ this._cancelPreload = undefined;
+ return;
+ }
- this.sub('active', (active: boolean) => {
- if (this.$.isOriginal) {
+ if (!this._originalUrl) {
+ if (!this._previewVisibilityCheckTimeout && !this._previewVisibilityCheckRaf) {
+ this._schedulePreviewVisibilityCheck();
+ }
+ return;
+ }
+ const requestId = ++this._lastPreviewRequestId;
+ let src = '';
+ try {
+ src = await this.proxyUrl(this._previewSrc());
+ } catch (err) {
+ this.$['*networkProblems'] = true;
+ console.error('Failed to resolve preview URL', { error: err });
+ return;
+ }
+
+ this._previewLoaded = false;
+ this._cancelPreload?.();
+ const { promise, cancel } = preloadImage(src);
+ this._cancelPreload = () => {
+ cancel();
+ if (this._lastPreviewRequestId === requestId) {
+ this._cancelPreload = undefined;
+ }
+ };
+
+ try {
+ await promise;
+ if (this._lastPreviewRequestId !== requestId || !this.isConnected) {
return;
}
- const iconEl = this.ref['icon-el'] as HTMLElement;
- iconEl.style.opacity = active ? '1' : '0';
-
- const previewEl = this.ref['preview-el'] as HTMLElement;
- if (active) {
- previewEl.style.opacity = '0';
- } else if (previewEl.style.backgroundImage) {
- previewEl.style.opacity = '1';
+ this._previewImage = src;
+ this._previewLoaded = true;
+ this._clearPreviewVisibilityChecks();
+ (observer ?? this._observer)?.unobserve(this);
+ } catch (err) {
+ this.$['*networkProblems'] = true;
+ console.error('Failed to load image', { error: err });
+ this._schedulePreviewVisibilityCheck();
+ } finally {
+ if (this._lastPreviewRequestId === requestId) {
+ this._cancelPreload = undefined;
}
- });
+ }
+ }
- this.sub('*networkProblems', async (networkProblems: boolean) => {
- if (!networkProblems) {
- const src = await this.proxyUrl(this._previewSrc());
- const previewEl = this.ref['preview-el'] as HTMLElement;
- if (previewEl.style.backgroundImage) {
- previewEl.style.backgroundImage = 'none';
- previewEl.style.backgroundImage = `url(${src})`;
- }
+ private _schedulePreviewVisibilityCheck(): void {
+ if (!this.isConnected || this._previewImage || this._previewLoaded || this.isOriginal) {
+ this._clearPreviewVisibilityChecks();
+ return;
+ }
+ if (this._previewVisibilityCheckRaf) {
+ cancelAnimationFrame(this._previewVisibilityCheckRaf);
+ }
+ this._previewVisibilityCheckRaf = requestAnimationFrame(() => {
+ this._previewVisibilityCheckRaf = undefined;
+ if (!this.isConnected || this._previewImage || this._previewLoaded || this.isOriginal) {
+ this._clearPreviewVisibilityChecks();
+ return;
+ }
+ const rect = this.getBoundingClientRect();
+ const hasSize = rect.width > 0 && rect.height > 0;
+ const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+ const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+ const isVisible =
+ hasSize && rect.bottom > 0 && rect.right > 0 && rect.top < viewportHeight && rect.left < viewportWidth;
+ if (isVisible) {
+ void this._loadPreview();
+ return;
}
+ this._previewVisibilityCheckTimeout = window.setTimeout(() => {
+ this._previewVisibilityCheckTimeout = undefined;
+ this._schedulePreviewVisibilityCheck();
+ }, 500);
});
}
- override destroyCallback(): void {
- super.destroyCallback();
- this._observer?.disconnect();
- this._cancelPreload?.();
+ private _clearPreviewVisibilityChecks(): void {
+ if (this._previewVisibilityCheckRaf) {
+ cancelAnimationFrame(this._previewVisibilityCheckRaf);
+ this._previewVisibilityCheckRaf = undefined;
+ }
+ if (this._previewVisibilityCheckTimeout) {
+ window.clearTimeout(this._previewVisibilityCheckTimeout);
+ this._previewVisibilityCheckTimeout = undefined;
+ }
}
-}
-EditorFilterControl.template = /* HTML */ `
-
-`;
+ private get _shouldShowPreview(): boolean {
+ return Boolean(this._previewLoaded && !this.active && !this.isOriginal);
+ }
+
+ public override render() {
+ const clickHandler = this.onClick;
+ const previewStyles: Record = {
+ opacity: this._shouldShowPreview ? '1' : '0',
+ };
+ if (this._previewImage) {
+ previewStyles.backgroundImage = `url(${this._previewImage})`;
+ }
+
+ const iconStyles = {
+ opacity: this._shouldShowPreview ? '0' : '1',
+ };
+
+ return html`
+
+ `;
+ }
+}
diff --git a/src/blocks/CloudImageEditor/src/EditorImageCropper.ts b/src/blocks/CloudImageEditor/src/EditorImageCropper.ts
index 6fd709e42..bd600ef6c 100644
--- a/src/blocks/CloudImageEditor/src/EditorImageCropper.ts
+++ b/src/blocks/CloudImageEditor/src/EditorImageCropper.ts
@@ -1,7 +1,12 @@
-import { Block } from '../../../abstract/Block';
+import type { PropertyValues, TemplateResult } from 'lit';
+import { html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { LitBlock } from '../../../lit/LitBlock';
import { debounce } from '../../../utils/debounce.js';
import { preloadImage } from '../../../utils/preloadImage.js';
import { throttle } from '../../../utils/throttle.js';
+import type { CropFrame } from './CropFrame';
import {
clamp,
constraintRect,
@@ -36,8 +41,8 @@ function validateCrop(crop: Transformations['crop']): boolean {
return shouldMatch.every((matcher) => matcher(crop));
}
-export class EditorImageCropper extends Block {
- override ctxOwner = true;
+export class EditorImageCropper extends LitBlock {
+ public override ctxOwner = true;
private _commitDebounced: ReturnType;
private _handleResizeThrottled: ReturnType;
@@ -46,14 +51,17 @@ export class EditorImageCropper extends Block {
private _ctx: CanvasRenderingContext2D | null = null;
private _isActive = false;
private _observer?: ResizeObserver;
+ @state()
+ private _image: HTMLImageElement | null = null;
private _cancelPreload?: () => void;
+ private readonly _canvasRef = createRef();
+ private readonly _frameRef = createRef();
- constructor() {
+ public constructor() {
super();
this.init$ = {
...this.init$,
- image: null,
'*padding': CROP_PADDING,
'*operations': {
rotate: 0,
@@ -76,18 +84,21 @@ export class EditorImageCropper extends Block {
this._commitDebounced = debounce(this._commit.bind(this), 300);
- this._handleResizeThrottled = throttle(this._handleResize.bind(this), 100);
+ this._handleResizeThrottled = throttle(() => {
+ if (!this.isConnected || !this._isActive) {
+ return;
+ }
+ this._initCanvas();
+ this._syncTransformations();
+ this._alignImage();
+ this._alignCrop();
+ this._draw();
+ }, 100);
}
- private _handleResize(): void {
- if (!this.isConnected || !this._isActive) {
- return;
- }
+ protected override firstUpdated(changedProperties: PropertyValues): void {
+ super.firstUpdated(changedProperties);
this._initCanvas();
- this._syncTransformations();
- this._alignImage();
- this._alignCrop();
- this._draw();
}
private _syncTransformations(): void {
@@ -101,7 +112,10 @@ export class EditorImageCropper extends Block {
}
private _initCanvas(): void {
- const canvas = this.ref['canvas-el'] as HTMLCanvasElement;
+ const canvas = this._canvasRef.value;
+ if (!canvas) {
+ return;
+ }
const ctx = canvas.getContext('2d');
const width = this.offsetWidth;
@@ -118,11 +132,11 @@ export class EditorImageCropper extends Block {
}
private _alignImage(): void {
- if (!this._isActive || !this.$.image) {
+ if (!this._isActive || !this._image) {
return;
}
- const image = this.$.image as HTMLImageElement;
+ const image = this._image;
const padding = this.$['*padding'] as number;
const operations = this.$['*operations'] as Operations;
const { rotate } = operations;
@@ -215,7 +229,10 @@ export class EditorImageCropper extends Block {
private _drawImage(): void {
const ctx = this._ctx;
if (!ctx) return;
- const image = this.$.image as HTMLImageElement;
+ const image = this._image;
+ if (!image) {
+ return;
+ }
const imageBox = this.$['*imageBox'] as Rectangle;
const operations = this.$['*operations'] as Operations;
const { mirror, flip, rotate } = operations;
@@ -229,7 +246,7 @@ export class EditorImageCropper extends Block {
}
private _draw(): void {
- if (!this._isActive || !this.$.image || !this._canvas || !this._ctx) {
+ if (!this._isActive || !this._image || !this._canvas || !this._ctx) {
return;
}
const canvas = this._canvas;
@@ -241,8 +258,8 @@ export class EditorImageCropper extends Block {
}
private _animateIn({ fromViewer }: { fromViewer?: boolean }): void {
- if (this.$.image) {
- this.ref['frame-el'].toggleThumbs(true);
+ if (this._image) {
+ this._frameRef.value?.toggleThumbs(true);
this._transitionToImage();
setTimeout(() => {
this.className = classNames({
@@ -324,7 +341,7 @@ export class EditorImageCropper extends Block {
this.$['*editorTransformations'] = transformations;
}
- setValue(operation: K, value: Operations[K]): void {
+ public setValue(operation: K, value: Operations[K]): void {
this.$['*operations'] = {
...this.$['*operations'],
[operation]: value,
@@ -339,23 +356,26 @@ export class EditorImageCropper extends Block {
this._draw();
}
- getValue(operation: K): Operations[K] {
+ public getValue(operation: K): Operations[K] {
return this.$['*operations'][operation];
}
- async activate(imageSize: ImageSize, { fromViewer }: { fromViewer?: boolean } = {}): Promise {
+ public async activate(imageSize: ImageSize, { fromViewer }: { fromViewer?: boolean } = {}): Promise {
if (this._isActive) {
return;
}
this._isActive = true;
+ await this.updateComplete;
+ this._initCanvas();
this._imageSize = imageSize;
this.removeEventListener('transitionend', this._reset);
try {
const originalUrl = this.$['*originalUrl'] as string;
const transformations = this.$['*editorTransformations'] as Transformations;
- this.$.image = await this._waitForImage(originalUrl, transformations);
+ this._image = await this._waitForImage(originalUrl, transformations);
this._syncTransformations();
+ this._handleResizeThrottled();
this._animateIn({ fromViewer });
} catch (err) {
console.error('Failed to activate cropper', { error: err });
@@ -368,13 +388,13 @@ export class EditorImageCropper extends Block {
return;
}
const nonZeroSize = entry.contentRect.width > 0 && entry.contentRect.height > 0;
- if (nonZeroSize && this._isActive && this.$.image) {
+ if (nonZeroSize && this._isActive && this._image) {
this._handleResizeThrottled();
}
});
this._observer.observe(this);
}
- deactivate({ reset = false }: { reset?: boolean } = {}): void {
+ public deactivate({ reset = false }: { reset?: boolean } = {}): void {
if (!this._isActive) {
return;
}
@@ -389,7 +409,7 @@ export class EditorImageCropper extends Block {
'uc-inactive_to_editor': true,
});
- this.ref['frame-el'].toggleThumbs(false);
+ this._frameRef.value?.toggleThumbs(false);
this.addEventListener('transitionend', this._reset, { once: true });
this._observer?.disconnect();
}
@@ -419,10 +439,9 @@ export class EditorImageCropper extends Block {
}
private _reset(): void {
- if (this._isActive) {
- return;
+ if (!this._isActive) {
+ this._image = null;
}
- this.$.image = null;
}
private async _waitForImage(originalUrl: string, transformations: Transformations): Promise {
@@ -475,7 +494,7 @@ export class EditorImageCropper extends Block {
};
}
- override initCallback(): void {
+ public override initCallback(): void {
super.initCallback();
this.sub('*imageBox', () => {
@@ -483,7 +502,7 @@ export class EditorImageCropper extends Block {
});
this.sub('*cropBox', () => {
- if (this.$.image) {
+ if (this._image) {
this._commitDebounced();
}
});
@@ -495,7 +514,7 @@ export class EditorImageCropper extends Block {
setTimeout(() => {
this.sub('*networkProblems', (networkProblems: boolean) => {
if (!networkProblems) {
- if (this._isActive) {
+ if (this._isActive && this._imageSize) {
void this.activate(this._imageSize, { fromViewer: false });
}
}
@@ -503,13 +522,18 @@ export class EditorImageCropper extends Block {
}, 0);
}
- override destroyCallback(): void {
- super.destroyCallback();
+ public override disconnectedCallback(): void {
+ super.disconnectedCallback();
this._observer?.disconnect();
+ if (this._image) {
+ this._image = null;
+ }
}
-}
-EditorImageCropper.template = /* HTML */ `
-
- ) & {
+ cancel: () => void;
+};
+
function isOperationKey(value: unknown): value is OperationKey {
return typeof value === 'string' && value in COLOR_OPERATIONS_CONFIG;
}
@@ -73,7 +84,7 @@ function keypointsRange(operation: OperationKey, value: number): number[] {
);
}
-export class EditorImageFader extends Block {
+export class EditorImageFader extends LitBlock {
private _isActive = false;
private _hidden = true;
private _operation: OperationKey | 'initial' = 'initial';
@@ -81,19 +92,72 @@ export class EditorImageFader extends Block {
private _value?: number;
private _transformations: Transformations = {};
private _keypoints: Keypoint[] = [];
- private _container?: HTMLDivElement;
private _previewImage?: HTMLImageElement;
private _cancelLastImages?: () => void;
private _cancelBatchPreload?: () => void;
private _url?: string;
private _fromViewer?: boolean;
private _raf = 0;
- private _addKeypointDebounced = debounce(this._addKeypoint.bind(this), 600);
+ private _addKeypointDebounced!: DebouncedKeypointHandler;
+ private readonly _previewHostRef = createRef();
+ private readonly _layersHostRef = createRef();
- constructor() {
+ public constructor() {
super();
this.classList.add('uc-inactive_to_cropper');
+ this._addKeypointDebounced = debounce(async (operation, filter, value) => {
+ const shouldSkip = () =>
+ !this._isSame(operation, filter) || this._value !== value || !!this._keypoints.find((kp) => kp.value === value);
+
+ if (shouldSkip()) {
+ return;
+ }
+ const keypoint = await this._constructKeypoint(operation, value);
+ const image = new Image();
+ image.src = keypoint.src;
+ const stop = this._handleImageLoading(keypoint.src);
+ image.addEventListener('load', stop, { once: true });
+ image.addEventListener('error', stop, { once: true });
+ keypoint.image = image;
+ image.classList.add('uc-fader-image');
+
+ image.addEventListener(
+ 'load',
+ () => {
+ if (shouldSkip()) {
+ return;
+ }
+ const keypoints = this._keypoints;
+ let insertIndex = keypoints.findIndex((kp) => kp.value > value);
+ if (insertIndex === -1) {
+ insertIndex = keypoints.length;
+ }
+ const nextKeypoint = keypoints[insertIndex];
+ const insertBeforeNode = nextKeypoint?.image;
+ const container = this._layersHostRef.value;
+ if (!container || (insertBeforeNode && !container.contains(insertBeforeNode))) {
+ return;
+ }
+ keypoints.splice(insertIndex, 0, keypoint);
+ if (insertBeforeNode) {
+ container.insertBefore(image, insertBeforeNode);
+ } else {
+ container.appendChild(image);
+ }
+ this._update(operation, value);
+ },
+ { once: true },
+ );
+
+ image.addEventListener(
+ 'error',
+ () => {
+ this.$['*networkProblems'] = true;
+ },
+ { once: true },
+ );
+ }, 600);
}
private _handleImageLoading(src: string): () => void {
@@ -176,56 +240,7 @@ export class EditorImageFader extends Block {
return this._operation === operation && this._filter === filter;
}
- private async _addKeypoint(operation: OperationKey, filter: string | undefined, value: number): Promise {
- const shouldSkip = () =>
- !this._isSame(operation, filter) || this._value !== value || !!this._keypoints.find((kp) => kp.value === value);
-
- if (shouldSkip()) {
- return;
- }
- const keypoint = await this._constructKeypoint(operation, value);
- const image = new Image();
- image.src = keypoint.src;
- const stop = this._handleImageLoading(keypoint.src);
- image.addEventListener('load', stop, { once: true });
- image.addEventListener('error', stop, { once: true });
- keypoint.image = image;
- image.classList.add('uc-fader-image');
-
- image.addEventListener(
- 'load',
- () => {
- if (shouldSkip()) {
- return;
- }
- const keypoints = this._keypoints;
- let insertIndex = keypoints.findIndex((kp) => kp.value > value);
- if (insertIndex === -1) {
- insertIndex = keypoints.length;
- }
- const nextKeypoint = keypoints[insertIndex];
- const insertBeforeNode = nextKeypoint?.image;
- const container = this._container;
- if (!container || (insertBeforeNode && !container.contains(insertBeforeNode))) {
- return;
- }
- keypoints.splice(insertIndex, 0, keypoint);
- insertBeforeNode && container.insertBefore(image, insertBeforeNode);
- this._update(operation, value);
- },
- { once: true },
- );
-
- image.addEventListener(
- 'error',
- () => {
- this.$['*networkProblems'] = true;
- },
- { once: true },
- );
- }
-
- set(value: string | number): void {
+ public set(value: string | number): void {
const numericValue = typeof value === 'string' ? parseInt(value, 10) : value;
if (!isOperationKey(this._operation) || !Number.isFinite(numericValue)) {
return;
@@ -266,16 +281,12 @@ export class EditorImageFader extends Block {
}
private async _initNodes(): Promise {
- const fr = document.createDocumentFragment();
this._previewImage = this._previewImage || this._createPreviewImage();
const previewImage = this._previewImage;
- if (!this.contains(previewImage)) {
- fr.appendChild(previewImage);
+ if (previewImage) {
+ this._ensurePreviewAttached(previewImage);
}
- const container = document.createElement('div');
- fr.appendChild(container);
-
const srcList = this._keypoints.map((kp) => kp.src);
const { images, promise, cancel } = batchPreloadImages(srcList);
@@ -292,8 +303,11 @@ export class EditorImageFader extends Block {
const filter = this._filter;
await promise;
if (this._isActive && this._isSame(operation, filter)) {
- this._container?.remove();
- this._container = container;
+ const host = this._layersHostRef.value;
+ if (!host) {
+ return;
+ }
+ host.replaceChildren();
this._keypoints.forEach((kp, idx) => {
const kpImage = images[idx];
if (!kpImage) {
@@ -301,14 +315,13 @@ export class EditorImageFader extends Block {
}
kpImage.classList.add('uc-fader-image');
kp.image = kpImage;
- this._container?.appendChild(kpImage);
+ host.appendChild(kpImage);
});
- this.appendChild(fr);
this._flush();
}
}
- async setTransformations(transformations: Transformations): Promise {
+ public async setTransformations(transformations: Transformations): Promise {
this._transformations = transformations;
if (this._previewImage) {
const src = await this._imageSrc();
@@ -328,7 +341,7 @@ export class EditorImageFader extends Block {
}
}
- async preload({
+ public async preload({
url,
filter,
operation,
@@ -353,9 +366,7 @@ export class EditorImageFader extends Block {
private _setOriginalSrc(src: string): void {
const image = this._previewImage || this._createPreviewImage();
- if (!this.contains(image)) {
- this.appendChild(image);
- }
+ this._ensurePreviewAttached(image);
this._previewImage = image;
if (image.src === src) {
@@ -399,7 +410,7 @@ export class EditorImageFader extends Block {
);
}
- async activate({
+ public async activate({
url,
operation,
value,
@@ -414,6 +425,7 @@ export class EditorImageFader extends Block {
}): Promise {
this._isActive = true;
this._hidden = false;
+ await this.updateComplete;
this._url = url;
this._operation = operation ?? 'initial';
this._value = value;
@@ -424,7 +436,7 @@ export class EditorImageFader extends Block {
if (isOriginal) {
const src = await this._imageSrc({ operation, value });
this._setOriginalSrc(src);
- this._container?.remove();
+ this._clearLayersHost();
return;
}
if (!operation || typeof value !== 'number') {
@@ -438,7 +450,7 @@ export class EditorImageFader extends Block {
this._initNodes();
}
- deactivate({ hide = true }: { hide?: boolean } = {}): void {
+ public deactivate({ hide = true }: { hide?: boolean } = {}): void {
this._isActive = false;
this._cancelLastImages?.();
@@ -458,12 +470,33 @@ export class EditorImageFader extends Block {
this.addEventListener(
'transitionend',
() => {
- this._container?.remove();
+ this._clearLayersHost();
},
{ once: true },
);
} else {
- this._container?.remove();
+ this._clearLayersHost();
}
}
+
+ private _ensurePreviewAttached(image: HTMLImageElement): void {
+ const host = this._previewHostRef.value;
+ if (!host) {
+ return;
+ }
+ if (!host.contains(image)) {
+ host.appendChild(image);
+ }
+ }
+
+ private _clearLayersHost(): void {
+ this._layersHostRef.value?.replaceChildren();
+ }
+
+ public override render(): TemplateResult {
+ return html`
+
+
+ `;
+ }
}
diff --git a/src/blocks/CloudImageEditor/src/EditorOperationControl.ts b/src/blocks/CloudImageEditor/src/EditorOperationControl.ts
index 0798f502a..3e0dfddeb 100644
--- a/src/blocks/CloudImageEditor/src/EditorOperationControl.ts
+++ b/src/blocks/CloudImageEditor/src/EditorOperationControl.ts
@@ -1,3 +1,4 @@
+import { property } from 'lit/decorators.js';
import { EditorButtonControl } from './EditorButtonControl.js';
import type { ColorOperation } from './toolbar-constants';
import { COLOR_OPERATIONS_CONFIG } from './toolbar-constants.js';
@@ -7,32 +8,51 @@ import { parseFilterValue } from './utils/parseFilterValue.js';
export class EditorOperationControl extends EditorButtonControl {
private _operation: ColorOperation | '' = '';
- override initCallback(): void {
- super.initCallback();
+ @property({ type: String })
+ public get operation(): ColorOperation | '' {
+ return this._operation;
+ }
+
+ public set operation(value: ColorOperation | '') {
+ const normalizedValue = value ?? '';
+ if (this._operation === normalizedValue) {
+ return;
+ }
+ const previousValue = this._operation;
+ this._operation = normalizedValue;
+ this.requestUpdate('operation', previousValue);
+ if (normalizedValue) {
+ this._updateOperationMetadata(normalizedValue as ColorOperation);
+ }
+ }
- this.$['on.click'] = (e: MouseEvent) => {
- const slider = this.$['*sliderEl'] as { setOperation: (operation: ColorOperation | '') => void };
- slider.setOperation(this._operation);
- this.$['*showSlider'] = true;
- this.$['*currentOperation'] = this._operation;
+ private _updateOperationMetadata(operation: ColorOperation): void {
+ this.icon = operation;
- this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
- operation: parseFilterValue(this.$['*operationTooltip']),
+ const resolveTitleProp = () => {
+ const label = this.l10n('a11y-cloud-editor-apply-tuning', {
+ name: this.l10n(operation).toLowerCase(),
});
+ this.titleProp = label;
+ return label;
};
- this.defineAccessor('operation', (operation: ColorOperation) => {
- if (operation) {
- this._operation = operation;
- this.$.icon = operation;
- this.bindL10n('title-prop', () =>
- this.l10n('a11y-cloud-editor-apply-tuning', {
- name: this.l10n(operation).toLowerCase(),
- }),
- );
- this.bindL10n('title', () => this.l10n(operation));
- }
- });
+ const resolveTitle = () => {
+ const titleText = this.l10n(operation);
+ this.title = titleText;
+ return titleText;
+ };
+
+ resolveTitleProp();
+ resolveTitle();
+ }
+
+ public override initCallback(): void {
+ super.initCallback();
+
+ if (this._operation) {
+ this._updateOperationMetadata(this._operation as ColorOperation);
+ }
this.sub('*editorTransformations', (editorTransformations: Transformations) => {
if (!this._operation) {
@@ -42,7 +62,17 @@ export class EditorOperationControl extends EditorButtonControl {
const { zero } = COLOR_OPERATIONS_CONFIG[this._operation];
const value = editorTransformations[this._operation];
const isActive = typeof value !== 'undefined' ? value !== zero : false;
- this.$.active = isActive;
+ this.active = isActive;
+ });
+ }
+ protected override onClick(e: MouseEvent) {
+ const slider = this.$['*sliderEl'] as { setOperation: (operation: ColorOperation | '') => void } | undefined;
+ slider?.setOperation(this._operation);
+ this.$['*showSlider'] = true;
+ this.$['*currentOperation'] = this._operation;
+
+ this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
+ operation: parseFilterValue(this.$['*operationTooltip']),
});
}
}
diff --git a/src/blocks/CloudImageEditor/src/EditorScroller.ts b/src/blocks/CloudImageEditor/src/EditorScroller.ts
index 613840d27..beb3bda44 100644
--- a/src/blocks/CloudImageEditor/src/EditorScroller.ts
+++ b/src/blocks/CloudImageEditor/src/EditorScroller.ts
@@ -1,33 +1,29 @@
-import { Block } from '../../../abstract/Block';
+import { LitBlock } from '../../../lit/LitBlock';
const X_THRESHOLD = 1;
+const noopScrollListener = () => {};
-export class EditorScroller extends Block {
- override initCallback(): void {
- super.initCallback();
+export class EditorScroller extends LitBlock {
+ private readonly _handleWheel = (event: WheelEvent): void => {
+ event.preventDefault();
+ const { deltaY, deltaX } = event;
+ if (Math.abs(deltaX) > X_THRESHOLD) {
+ this.scrollLeft += deltaX;
+ return;
+ }
+ this.scrollLeft += deltaY;
+ };
- this.addEventListener(
- 'wheel',
- (e: WheelEvent) => {
- e.preventDefault();
-
- const { deltaY, deltaX } = e;
- if (Math.abs(deltaX) > X_THRESHOLD) {
- this.scrollLeft += deltaX;
- } else {
- this.scrollLeft += deltaY;
- }
- },
- {
- passive: false,
- },
- );
+ public override connectedCallback(): void {
+ super.connectedCallback();
+ this.addEventListener('wheel', this._handleWheel, { passive: false });
+ // This fixes a macOS issue where wheel events skip without an attached scroll listener
+ this.addEventListener('scroll', noopScrollListener, { passive: true });
+ }
- // This fixes some strange bug on MacOS - wheel event doesn't fire for physical mouse wheel if no scroll event attached also
- this.addEventListener('scroll', () => {}, {
- passive: true,
- });
+ public override disconnectedCallback(): void {
+ this.removeEventListener('wheel', this._handleWheel);
+ this.removeEventListener('scroll', noopScrollListener);
+ super.disconnectedCallback();
}
}
-
-EditorScroller.template = /* HTML */ ` ): void {
+ super.updated(changedProperties);
- this.sub('value', (value: number) => {
- const tooltip = `${this._filter ?? this._operation} ${value}`;
+ if (changedProperties.has('state')) {
+ const tooltip = `${this.state.filter ?? this.state.operation} ${this.state.value}`;
this.$['*operationTooltip'] = tooltip;
- });
+ }
}
-}
-EditorSlider.template = /* HTML */ `
-
-
-
-
- `;
-}
+export class EditorToolbar extends LitBlock {
+ @state()
+ private _showLoader = false;
-function renderTabContent(id: TabIdValue): string {
- return /* HTML */ `
-
-
-
-
- `;
-}
+ // This is public because it's used in the updated lifecycle to assign to the shared state.
+ @state()
+ public showMainToolbar = true;
-export class EditorToolbar extends Block {
- private _debouncedShowLoader: ReturnType;
- private _cancelPreload?: () => void;
- private _updateInfoTooltip: ReturnType;
-
- constructor() {
- super();
-
- this.init$ = {
- ...this.init$,
- '*sliderEl': null,
- '*listAspectRatioEl': null,
- /** @type {import('./types.js').LoadingOperations} */
- '*loadingOperations': new Map(),
- '*showSlider': false,
- '*showListAspectRatio': false,
- hideSliderOrList: false,
- '*currentFilter': FAKE_ORIGINAL_FILTER,
- '*currentOperation': null,
- showLoader: false,
- filters: ALL_FILTERS,
- colorOperations: ALL_COLOR_OPERATIONS,
- cropOperations: ALL_CROP_OPERATIONS,
- '*operationTooltip': null,
-
- 'presence.mainToolbar': true,
- 'presence.subToolbar': false,
- 'presence.tabToggles': true,
- 'presence.tabContent.crop': false,
- 'presence.tabContent.tuning': false,
- 'presence.tabContent.filters': false,
- 'presence.tabToggle.crop': true,
- 'presence.tabToggle.tuning': true,
- 'presence.tabToggle.filters': true,
- 'presence.subTopToolbarStyles': {
- hidden: 'uc-sub-toolbar--top-hidden',
- visible: 'uc-sub-toolbar--visible',
- },
- 'presence.subBottomToolbarStyles': {
- hidden: 'uc-sub-toolbar--bottom-hidden',
- visible: 'uc-sub-toolbar--visible',
- },
- 'presence.tabContentStyles': {
- hidden: 'uc-tab-content--hidden',
- visible: 'uc-tab-content--visible',
- },
- 'presence.tabToggleStyles': {
- hidden: 'uc-tab-toggle--hidden',
- visible: 'uc-tab-toggle--visible',
- },
- 'presence.tabTogglesStyles': {
- hidden: 'uc-tab-toggles--hidden',
- visible: 'uc-tab-toggles--visible',
- },
- 'on.cancel': (e: MouseEvent) => {
- this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
- action: 'cancel',
- });
-
- this._cancelPreload?.();
- const onCancel = this.$['*on.cancel'] as () => void;
- onCancel();
- },
- 'on.apply': (e: MouseEvent) => {
- this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
- action: 'apply',
- });
- const onApply = this.$['*on.apply'] as (transformations: Transformations) => void;
- onApply(this.$['*editorTransformations'] as Transformations);
- },
- 'on.applySlider': (e: MouseEvent) => {
- this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
- action: 'apply-slider',
- operation: parseFilterValue(this.$['*operationTooltip']),
- });
- const slider = this.ref['slider-el'] as EditorSlider;
- slider.apply();
- this._onSliderClose();
- },
- 'on.cancelSlider': (e: MouseEvent) => {
- this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
- action: 'cancel-slider',
- });
- const slider = this.ref['slider-el'] as EditorSlider;
- slider.cancel();
- this._onSliderClose();
- },
- 'on.clickTab': (e: MouseEvent) => {
- const target = e.currentTarget as HTMLElement | null;
- const id = target?.getAttribute('data-id') as TabIdValue | null;
- if (id) {
- this.telemetryManager.sendEventCloudImageEditor(e, id);
- this._activateTab(id, { fromViewer: false });
- }
- },
- tab_role: 'tab',
- [`tab_${TabId.TUNING}`]: `tab_${TabId.TUNING}`,
- [`tab_${TabId.CROP}`]: `tab_${TabId.CROP}`,
- [`tab_${TabId.FILTERS}`]: `tab_${TabId.FILTERS}`,
- cancel: 'cancel',
- apply: 'apply',
- 'a11y-editor-tab-filters': 'a11y-editor-tab-filters',
- 'a11y-editor-tab-tuning': 'a11y-editor-tab-tuning',
- 'a11y-editor-tab-crop': 'a11y-editor-tab-crop',
- };
-
- this._debouncedShowLoader = debounce(this._showLoader.bind(this), 500);
- this._updateInfoTooltip = debounce(this._updateInfoTooltipHandler.bind(this), 0);
- }
+ // This is public because it's used in the updated lifecycle to assign to the shared state.
+ @state()
+ public showSubToolbar = false;
- private _onSliderClose(): void {
- this.$['*showSlider'] = false;
+ @state()
+ private _showTabToggles = true;
- if (this.$['*tabId'] === TabId.CROP) {
- this.$['*showListAspectRatio'] = false;
- }
-
- if (this.$['*tabId'] === TabId.TUNING) {
- const tooltipEl = this.ref['tooltip-el'] as HTMLElement;
- tooltipEl.classList.toggle('uc-info-tooltip_visible', false);
- }
- }
+ // This is public because it's used in the updated lifecycle to assign to the shared state.
+ @state()
+ public tabList: readonly TabIdValue[] = [...ALL_TABS];
- private _createOperationControl(operation: string): EditorOperationControl {
- const el = new EditorOperationControl();
- (el as unknown as { operation: string }).operation = operation;
- return el;
- }
+ // This is public because it's used in the updated lifecycle to assign to the shared state.
+ @state()
+ public activeTab: TabIdValue = TabId.CROP;
- private _createFilterControl(filter: string): EditorFilterControl {
- const el = new EditorFilterControl();
- (el as unknown as { filter: string }).filter = filter;
- return el;
- }
+ @state()
+ private _useSliderPanel = true;
- private _createToggleControl(operation: CropOperation): EditorCropButtonControl {
- const el = new EditorCropButtonControl();
- el.operation = operation;
- return el;
- }
+ @state()
+ private _tooltipVisible = false;
- private _createAspectRatioControl(config: CropAspectRatio): EditorAspectRatioButtonControl {
- const el = new EditorAspectRatioButtonControl();
- el.aspectRatio = config;
- return el;
- }
+ @state()
+ private _operationTooltip: string | null = null;
- private _createFreeformControl(): EditorFreeformButtonControl {
- return new EditorFreeformButtonControl();
- }
+ private _tabIndicatorOffset = 0;
+ private _tabIndicatorWidth = 0;
- private _clearListAspectRatio(): void {
- const listAspectRatioEl = this.$['*listAspectRatioEl'] as HTMLElement | null;
- if (listAspectRatioEl) {
- listAspectRatioEl.innerHTML = '';
- }
- }
+ private readonly _sliderRef = createRef();
+ private readonly _tabIndicatorRef = createRef();
+ protected readonly tabToggleRefs: Record> = {
+ [TabId.CROP]: createRef(),
+ [TabId.TUNING]: createRef(),
+ [TabId.FILTERS]: createRef(),
+ };
- private _renderControlsList(tabId: TabIdValue): void {
- const listEl = this.ref[`controls-list-${tabId}`] as HTMLElement;
- const fr = document.createDocumentFragment();
+ private readonly _handleWindowResize = () => {
+ this._syncTabIndicator();
+ };
- this._clearListAspectRatio();
+ @state()
+ private _cropPresets: CropAspectRatio[] = [];
- if (tabId === TabId.CROP) {
- const cropPresetList = this.$['*cropPresetList'] as CropAspectRatio[];
- const hasFreeformAspectRatio = cropPresetList.length >= 3;
+ private _cancelPreload?: () => void;
- if (hasFreeformAspectRatio) {
- const el = this._createFreeformControl();
- fr.appendChild(el);
- }
+ private readonly _debouncedShowLoader = debounce((show: boolean) => {
+ this._showLoader = show;
+ }, 500);
- for (const preset of cropPresetList) {
- const el = this._createAspectRatioControl(preset);
- fr.appendChild(el);
+ private readonly _updateInfoTooltip = debounce(() => {
+ const transformations = this.$['*editorTransformations'];
+ const currentOperation = this.$['*currentOperation'] as keyof typeof COLOR_OPERATIONS_CONFIG | null;
+ let text = '';
+ let visible = false;
- if (hasFreeformAspectRatio) {
- const listAspectRatioEl = this.$['*listAspectRatioEl'] as HTMLElement | null;
- listAspectRatioEl?.appendChild(el);
- }
+ if (this.$['*tabId'] === TabId.FILTERS) {
+ visible = true;
+ if (this.$['*currentFilter'] && transformations?.filter?.name === this.$['*currentFilter']) {
+ const value = transformations?.filter?.amount || 100;
+ text = `${this.$['*currentFilter']} ${value}`;
+ } else {
+ text = this.l10n(FAKE_ORIGINAL_FILTER);
}
+ } else if (this.showSubToolbar && this.$['*tabId'] === TabId.TUNING && currentOperation) {
+ visible = true;
+ const value = transformations?.[currentOperation] || COLOR_OPERATIONS_CONFIG[currentOperation].zero;
+ text = `${this.l10n(currentOperation)} ${value}`;
+ }
+ if (visible) {
+ this.$['*operationTooltip'] = text;
+ }
+ this._tooltipVisible = visible;
+ }, 0);
+
+ private readonly _subTopToolbarStyles = {
+ hidden: 'uc-sub-toolbar--top-hidden',
+ visible: 'uc-sub-toolbar--visible',
+ };
+
+ private readonly _subBottomToolbarStyles = {
+ hidden: 'uc-sub-toolbar--bottom-hidden',
+ visible: 'uc-sub-toolbar--visible',
+ };
+
+ private readonly _tabContentStyles = {
+ hidden: 'uc-tab-content--hidden',
+ visible: 'uc-tab-content--visible',
+ };
+
+ private readonly _tabToggleStyles = {
+ hidden: 'uc-tab-toggle--hidden',
+ visible: 'uc-tab-toggle--visible',
+ };
+
+ private readonly _tabTogglesStyles = {
+ hidden: 'uc-tab-toggles--hidden',
+ visible: 'uc-tab-toggles--visible',
+ };
+
+ public override init$: Record = {
+ ...this.init$,
+ '*sliderEl': null,
+ '*showSlider': false,
+ '*showListAspectRatio': false,
+ '*currentFilter': FAKE_ORIGINAL_FILTER,
+ '*currentOperation': null,
+ '*operationTooltip': null,
+ };
- for (const operation of this.$.cropOperations as CropOperation[]) {
- const el = this._createToggleControl(operation);
- fr.appendChild(el);
- }
- } else if (tabId === TabId.FILTERS) {
- const filters = this.$.filters as string[];
- [FAKE_ORIGINAL_FILTER, ...filters].forEach((filterId) => {
- const el = this._createFilterControl(filterId);
- fr.appendChild(el);
- });
- } else if (tabId === TabId.TUNING) {
- for (const operation of this.$.colorOperations as string[]) {
- const el = this._createOperationControl(operation);
- fr.appendChild(el);
- }
+ private _onSliderClose(): void {
+ this.$['*showSlider'] = false;
+
+ if (this.$['*tabId'] === TabId.CROP) {
+ this.$['*showListAspectRatio'] = false;
}
- [...fr.children].forEach((el, idx) => {
- if (idx === fr.childNodes.length - 1) {
- el.classList.add('uc-controls-list_last-item');
- }
- });
+ if (this.$['*tabId'] === TabId.TUNING) {
+ this._tooltipVisible = false;
+ }
+ }
- listEl.innerHTML = '';
- listEl.appendChild(fr);
+ private _activateTab(
+ id: TabIdValue,
+ { fromViewer = false, force = false }: { fromViewer?: boolean; force?: boolean } = {},
+ ): void {
+ if (this.$['*tabId'] !== id) {
+ this.$['*tabId'] = id;
+ }
+ this._applyTabState(id, { fromViewer, force });
}
- private _activateTab(id: TabIdValue, { fromViewer }: { fromViewer?: boolean } = {}): void {
- this.$['*tabId'] = id;
+ private _applyTabState(
+ id: TabIdValue,
+ { fromViewer, force = false }: { fromViewer: boolean; force?: boolean },
+ ): void {
+ if (!force && this.activeTab === id) {
+ this._syncTabIndicator();
+ return;
+ }
+
+ this.activeTab = id;
const faderEl = this.$['*faderEl'] as EditorImageFader | undefined;
const cropperEl = this.$['*cropperEl'] as EditorImageCropper | undefined;
if (id === TabId.CROP) {
faderEl?.deactivate();
- cropperEl?.activate(
- this.$['*imageSize'] as {
- width: number;
- height: number;
- },
- { fromViewer },
- );
+ const imageSize = this.$['*imageSize'] as { width: number; height: number } | undefined;
+ if (imageSize) {
+ cropperEl?.activate(this.$['*imageSize'] as { width: number; height: number }, { fromViewer });
+ }
} else {
faderEl?.activate({
url: this.$['*originalUrl'] as string,
@@ -297,31 +193,113 @@ export class EditorToolbar extends Block {
for (const tabId of ALL_TABS) {
const isCurrentTab = tabId === id;
-
- const tabToggleEl = this.ref[`tab-toggle-${tabId}`] as HTMLElement & { active: boolean };
- tabToggleEl.active = isCurrentTab;
-
+ const toggleRef = this.tabToggleRefs[tabId];
+ const toggleEl = toggleRef?.value as (HTMLElement & { active?: boolean }) | null;
+ if (toggleEl) {
+ toggleEl.active = isCurrentTab;
+ }
if (isCurrentTab) {
- this._renderControlsList(id);
this._syncTabIndicator();
- } else {
- this._unmountTabControls(tabId);
}
- this.$[`presence.tabContent.${tabId}`] = isCurrentTab;
}
}
- private _unmountTabControls(tabId: TabIdValue): void {
- const listEl = this.ref[`controls-list-${tabId}`] as HTMLElement | undefined;
- if (listEl) {
- listEl.innerHTML = '';
+ private _syncTabIndicator(): void {
+ const toggleRef = this.tabToggleRefs[this.activeTab];
+ const toggleEl = toggleRef?.value;
+ const indicatorEl = this._tabIndicatorRef.value;
+ if (!toggleEl || !indicatorEl) {
+ return;
+ }
+ const offset = toggleEl.offsetLeft;
+
+ const width = toggleEl.offsetWidth || Number(getComputedStyle(toggleEl).width.replace('px', ''));
+ if (this._tabIndicatorOffset !== offset || this._tabIndicatorWidth !== width) {
+ this._tabIndicatorOffset = offset;
+ this._tabIndicatorWidth = width;
+ indicatorEl.style.transform = `translateX(${offset}px)`;
+ indicatorEl.style.width = `${width}px`;
}
}
- private _syncTabIndicator(): void {
- const tabToggleEl = this.ref[`tab-toggle-${this.$['*tabId']}`] as HTMLElement;
- const indicatorEl = this.ref['tabs-indicator'] as HTMLElement;
- indicatorEl.style.transform = `translateX(${tabToggleEl.offsetLeft}px)`;
+ private get _hasAspectRatioPicker(): boolean {
+ return this._cropPresets.length >= 3;
+ }
+
+ private _renderControlsByTab(tabId: TabIdValue): TemplateResult[] {
+ switch (tabId) {
+ case TabId.CROP:
+ return this._renderCropTabControls();
+ case TabId.FILTERS:
+ return this._renderFilterTabControls();
+ case TabId.TUNING:
+ return this._renderTuningTabControls();
+ default:
+ return [];
+ }
+ }
+
+ private _renderCropTabControls(): TemplateResult[] {
+ const renderers: Array<() => TemplateResult> = [];
+ if (this._hasAspectRatioPicker) {
+ renderers.push(() => this._renderFreeformControl());
+ } else {
+ for (const preset of this._cropPresets) {
+ renderers.push(() => this._renderAspectRatioControl(preset));
+ }
+ }
+
+ for (const operation of ALL_CROP_OPERATIONS) {
+ renderers.push(() => this._renderCropOperationControl(operation));
+ }
+
+ return this._renderControlGroup(renderers);
+ }
+
+ private _renderFilterTabControls(): TemplateResult[] {
+ const filterIds = [FAKE_ORIGINAL_FILTER, ...ALL_FILTERS];
+ const renderers = filterIds.map((filterId) => () => this._renderFilterControl(filterId));
+ return this._renderControlGroup(renderers);
+ }
+
+ private _renderTuningTabControls(): TemplateResult[] {
+ const renderers = ALL_COLOR_OPERATIONS.map((operation) => () => this._renderOperationControl(operation));
+ return this._renderControlGroup(renderers);
+ }
+
+ private _renderControlGroup(renderers: Array<() => TemplateResult>): TemplateResult[] {
+ const total = renderers.length;
+ if (!total) {
+ return [];
+ }
+ return renderers.map((renderControl) => renderControl());
+ }
+
+ private _renderFreeformControl(): TemplateResult {
+ return html` {
@@ -337,40 +315,14 @@ export class EditorToolbar extends Block {
}
}
- private _showLoader(show: boolean): void {
- this.$.showLoader = show;
- }
-
- private _updateInfoTooltipHandler(): void {
- const transformations = this.$['*editorTransformations'];
- const currentOperation = this.$['*currentOperation'] as keyof typeof COLOR_OPERATIONS_CONFIG | null;
- let text = '';
- let visible = false;
-
- if (this.$['*tabId'] === TabId.FILTERS) {
- visible = true;
- if (this.$['*currentFilter'] && transformations?.filter?.name === this.$['*currentFilter']) {
- const value = transformations?.filter?.amount || 100;
- text = `${this.$['*currentFilter']} ${value}`;
- } else {
- text = this.l10n(FAKE_ORIGINAL_FILTER);
- }
- } else if (this.$['*tabId'] === TabId.TUNING && currentOperation) {
- visible = true;
- const value = transformations?.[currentOperation] || COLOR_OPERATIONS_CONFIG[currentOperation].zero;
- text = `${this.l10n(currentOperation)} ${value}`;
- }
- if (visible) {
- this.$['*operationTooltip'] = text;
- }
- this.ref['tooltip-el'].classList.toggle('uc-info-tooltip_visible', visible);
- }
-
- override initCallback(): void {
+ public override initCallback(): void {
super.initCallback();
- this.$['*sliderEl'] = this.ref['slider-el'];
- this.$['*listAspectRatioEl'] = this.ref['list-el'];
+ const initialCropPresets = (this.$['*cropPresetList'] as CropAspectRatio[]) ?? [];
+ this._cropPresets = [...initialCropPresets];
+ this.sub('*cropPresetList', (cropPresetList: CropAspectRatio[]) => {
+ this._cropPresets = [...(cropPresetList ?? [])];
+ });
this.sub('*imageSize', (imageSize: { width: number; height: number } | null) => {
if (imageSize) {
@@ -383,7 +335,7 @@ export class EditorToolbar extends Block {
this.sub('*editorTransformations', (editorTransformations: Transformations) => {
const appliedFilter = editorTransformations?.filter?.name;
if (this.$['*currentFilter'] !== appliedFilter) {
- this.$['*currentFilter'] = appliedFilter;
+ this.$['*currentFilter'] = appliedFilter ?? '';
}
});
@@ -395,7 +347,8 @@ export class EditorToolbar extends Block {
this._updateInfoTooltip();
});
- this.sub('*tabId', () => {
+ this.sub('*tabId', (tabId: TabIdValue) => {
+ this._applyTabState(tabId, { fromViewer: false, force: true });
this._updateInfoTooltip();
});
@@ -425,85 +378,246 @@ export class EditorToolbar extends Block {
});
this.sub('*showSlider', (showSlider: boolean) => {
- this.$['presence.subToolbar'] = showSlider;
- this.$['presence.mainToolbar'] = !showSlider;
-
- this.$.hideSliderOrList = true;
+ if (showSlider) {
+ this.showSubToolbar = true;
+ this.showMainToolbar = false;
+ this._useSliderPanel = true;
+ } else if (!this.$['*showListAspectRatio']) {
+ this.showSubToolbar = false;
+ this.showMainToolbar = true;
+ }
});
this.sub('*showListAspectRatio', (show: boolean) => {
- this.$['presence.subToolbar'] = show;
- this.$['presence.mainToolbar'] = !show;
- this.$.hideSliderOrList = false;
+ if (show) {
+ this.showSubToolbar = true;
+ this.showMainToolbar = false;
+ this._useSliderPanel = false;
+ } else if (!this.$['*showSlider']) {
+ this.showSubToolbar = false;
+ this.showMainToolbar = true;
+ }
});
- this.sub('*tabList', (tabList: TabIdValue[]) => {
- this.$['presence.tabToggles'] = tabList.length > 1;
- for (const tabId of ALL_TABS) {
- this.$[`presence.tabToggle.${tabId}`] = tabList.includes(tabId);
- const toggleEl = this.ref[`tab-toggle-${tabId}`] as HTMLElement;
- toggleEl.style.gridColumn = `${tabList.indexOf(tabId) + 1}`;
- }
+ this.sub('*tabList', (tabList: readonly TabIdValue[]) => {
+ this.tabList = tabList;
+ this._showTabToggles = tabList.length > 1;
if (!tabList.includes(this.$['*tabId']) && tabList.length > 0) {
const [firstTab] = tabList;
if (firstTab) {
this._activateTab(firstTab, { fromViewer: false });
}
+ return;
}
+
+ this._syncTabIndicator();
+ });
+
+ this.sub('*operationTooltip', (tooltip: string | null) => {
+ this._operationTooltip = tooltip;
});
this._updateInfoTooltip();
}
- override destroyCallback(): void {
+ public override connectedCallback(): void {
+ super.connectedCallback();
+ window.addEventListener('resize', this._handleWindowResize);
+ }
+
+ public override firstUpdated(changedProperties: PropertyValues): void {
+ super.firstUpdated(changedProperties);
+ this._assignSharedElements();
+
+ this._syncTabIndicator();
+ }
+
+ protected override updated(changedProperties: PropertyValues): void {
+ super.updated(changedProperties);
+
+ if (changedProperties.has('activeTab') || changedProperties.has('tabList')) {
+ this.updateComplete.then(() => this._syncTabIndicator());
+ }
+
+ if (changedProperties.has('showSubToolbar') || changedProperties.has('showMainToolbar')) {
+ this._assignSharedElements();
+ }
+ }
+
+ public override disconnectedCallback(): void {
+ window.removeEventListener('resize', this._handleWindowResize);
+ super.disconnectedCallback();
+
this.$['*showSlider'] = false;
this.$['*showListAspectRatio'] = false;
}
-}
-EditorToolbar.template = /* HTML */ `
-
-
`;
+ }
+}
diff --git a/src/blocks/CameraSource/camera-source.css b/src/blocks/CameraSource/camera-source.css
index f70837ea8..a73712f2b 100644
--- a/src/blocks/CameraSource/camera-source.css
+++ b/src/blocks/CameraSource/camera-source.css
@@ -16,10 +16,6 @@
height: 100%;
}
- uc-camera-source:not(.uc-initialized) .uc-controls {
- display: none;
- }
-
uc-camera-source video {
display: block;
width: 100%;
@@ -54,7 +50,7 @@
uc-camera-source .uc-message-box {
display: flex;
flex-direction: column;
- grid-gap: 40px;
+ gap: 40px;
align-items: center;
justify-content: center;
padding: 40px 40px 0;
@@ -108,6 +104,10 @@
min-height: 74px;
}
+ uc-camera-source:not(.uc-initialized) .uc-controls {
+ display: none;
+ }
+
uc-camera-source .uc-switcher {
display: flex;
gap: calc(var(--uc-padding) / 2);
diff --git a/src/blocks/CloudImageEditor/src/CloudImageEditorBlock.ts b/src/blocks/CloudImageEditor/src/CloudImageEditorBlock.ts
index a2fb02baa..ef20383af 100644
--- a/src/blocks/CloudImageEditor/src/CloudImageEditorBlock.ts
+++ b/src/blocks/CloudImageEditor/src/CloudImageEditorBlock.ts
@@ -1,4 +1,9 @@
-import { Block } from '../../../abstract/Block';
+import { html, type PropertyValues } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { when } from 'lit/directives/when.js';
+import { LitBlock } from '../../../lit/LitBlock';
import {
createCdnUrl,
createCdnUrlModifiers,
@@ -6,6 +11,7 @@ import {
extractOperations,
extractUuid,
} from '../../../utils/cdn-utils';
+import { serializeCsv } from '../../../utils/comma-separated';
import { debounce } from '../../../utils/debounce.js';
import { TRANSPARENT_PIXEL_SRC } from '../../../utils/transparentPixelSrc';
import type { EditorImageCropper } from './EditorImageCropper';
@@ -15,31 +21,150 @@ import { getClosestAspectRatio, parseCropPreset } from './lib/parseCropPreset.js
import { parseTabs } from './lib/parseTabs.js';
import { operationsToTransformations, transformationsToOperations } from './lib/transformationUtils.js';
import { initState } from './state.js';
-import { TEMPLATE } from './template.js';
-import { TabId } from './toolbar-constants.js';
+import svgIconsSprite from './svg-sprite';
+import { ALL_TABS, TabId } from './toolbar-constants.js';
import type { ApplyResult, CropPresetList, ImageSize, Transformations } from './types';
type TabIdValue = (typeof TabId)[keyof typeof TabId];
-interface CloudImageEditorBlockState extends ReturnType
+
+
+
+ `;
+ }
+
+ protected override updated(changedProperties: PropertyValues
+
+
+
+
+ Network error
+
+
+
+
+
+ ${fileType}
+
+ 
+ ${when(this._isInitialized, () => html`
+ ${message}
+
-
-
-
-