@uploadcare/file-uploader 1.21.0-alpha.3 → 1.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +8 -2
- package/abstract/ActivityBlock.d.ts +0 -1
- package/abstract/ActivityBlock.d.ts.map +1 -1
- package/abstract/ActivityBlock.js +1 -1
- package/abstract/Block.d.ts +13 -2
- package/abstract/Block.d.ts.map +1 -1
- package/abstract/Block.js +35 -3
- package/abstract/CTX.d.ts +4 -4
- package/abstract/CTX.d.ts.map +1 -1
- package/abstract/CTX.js +2 -2
- package/abstract/SolutionBlock.d.ts +2 -2
- package/abstract/UploaderBlock.d.ts +9 -5
- package/abstract/UploaderBlock.d.ts.map +1 -1
- package/abstract/UploaderBlock.js +50 -13
- package/abstract/UploaderPublicApi.d.ts +2 -2
- package/abstract/UploaderPublicApi.d.ts.map +1 -1
- package/abstract/UploaderPublicApi.js +4 -4
- package/abstract/l10nProcessor.js +1 -1
- package/abstract/{LocaleManager.d.ts → managers/LocaleManager.d.ts} +8 -8
- package/abstract/{LocaleManager.d.ts.map → managers/LocaleManager.d.ts.map} +1 -1
- package/abstract/{LocaleManager.js → managers/LocaleManager.js} +8 -8
- package/abstract/{ModalManager.d.ts → managers/ModalManager.d.ts} +7 -7
- package/abstract/{ModalManager.d.ts.map → managers/ModalManager.d.ts.map} +1 -1
- package/abstract/{ModalManager.js → managers/ModalManager.js} +4 -3
- package/abstract/managers/SecureUploadsManager.d.ts +22 -0
- package/abstract/{SecureUploadsManager.d.ts.map → managers/SecureUploadsManager.d.ts.map} +1 -1
- package/abstract/{SecureUploadsManager.js → managers/SecureUploadsManager.js} +9 -5
- package/abstract/managers/TelemetryManager.d.ts +71 -0
- package/abstract/managers/TelemetryManager.d.ts.map +1 -0
- package/abstract/managers/TelemetryManager.js +218 -0
- package/abstract/{ValidationManager.d.ts → managers/ValidationManager.d.ts} +7 -7
- package/abstract/managers/ValidationManager.d.ts.map +1 -0
- package/abstract/{ValidationManager.js → managers/ValidationManager.js} +16 -14
- package/abstract/{a11y.d.ts → managers/a11y.d.ts} +2 -2
- package/abstract/managers/a11y.d.ts.map +1 -0
- package/abstract/{a11y.js → managers/a11y.js} +1 -1
- package/blocks/CameraSource/CameraSource.d.ts +2 -2
- package/blocks/CameraSource/CameraSource.d.ts.map +1 -1
- package/blocks/CameraSource/CameraSource.js +15 -3
- package/blocks/CloudImageEditor/src/CloudImageEditorBlock.d.ts +2 -1
- package/blocks/CloudImageEditor/src/CloudImageEditorBlock.d.ts.map +1 -1
- package/blocks/CloudImageEditor/src/CloudImageEditorBlock.js +20 -5
- package/blocks/CloudImageEditor/src/CropFrame.js +3 -3
- package/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.d.ts +11 -0
- package/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.d.ts.map +1 -0
- package/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.js +130 -0
- package/blocks/CloudImageEditor/src/EditorButtonControl.js +1 -1
- package/blocks/CloudImageEditor/src/EditorCropButtonControl.d.ts.map +1 -1
- package/blocks/CloudImageEditor/src/EditorCropButtonControl.js +9 -1
- package/blocks/CloudImageEditor/src/EditorFilterControl.d.ts.map +1 -1
- package/blocks/CloudImageEditor/src/EditorFilterControl.js +7 -1
- package/blocks/CloudImageEditor/src/EditorImageCropper.d.ts.map +1 -1
- package/blocks/CloudImageEditor/src/EditorImageCropper.js +3 -3
- package/blocks/CloudImageEditor/src/EditorOperationControl.d.ts +1 -1
- package/blocks/CloudImageEditor/src/EditorOperationControl.d.ts.map +1 -1
- package/blocks/CloudImageEditor/src/EditorOperationControl.js +9 -3
- package/blocks/CloudImageEditor/src/EditorToolbar.d.ts +19 -7
- package/blocks/CloudImageEditor/src/EditorToolbar.d.ts.map +1 -1
- package/blocks/CloudImageEditor/src/EditorToolbar.js +88 -21
- package/blocks/CloudImageEditor/src/css/common.css +39 -7
- package/blocks/CloudImageEditor/src/index.d.ts +1 -0
- package/blocks/CloudImageEditor/src/index.js +1 -0
- package/blocks/CloudImageEditor/src/lib/parseCropPreset.d.ts +2 -1
- package/blocks/CloudImageEditor/src/lib/parseCropPreset.d.ts.map +1 -1
- package/blocks/CloudImageEditor/src/lib/parseCropPreset.js +74 -8
- package/blocks/CloudImageEditor/src/lib/parseCropPreset.test.d.ts +2 -0
- package/blocks/CloudImageEditor/src/lib/parseCropPreset.test.d.ts.map +1 -0
- package/blocks/CloudImageEditor/src/lib/parseCropPreset.test.js +35 -0
- package/blocks/CloudImageEditor/src/state.d.ts +2 -2
- package/blocks/CloudImageEditor/src/state.d.ts.map +1 -1
- package/blocks/CloudImageEditor/src/state.js +2 -2
- package/blocks/CloudImageEditor/src/svg-sprite.d.ts +1 -1
- package/blocks/CloudImageEditor/src/svg-sprite.d.ts.map +1 -1
- package/blocks/CloudImageEditor/src/svg-sprite.js +1 -1
- package/blocks/CloudImageEditor/src/toolbar-constants.d.ts +2 -2
- package/blocks/CloudImageEditor/src/toolbar-constants.d.ts.map +1 -1
- package/blocks/CloudImageEditor/src/toolbar-constants.js +3 -2
- package/blocks/CloudImageEditor/src/types.d.ts +2 -0
- package/blocks/CloudImageEditor/src/types.d.ts.map +1 -1
- package/blocks/CloudImageEditor/src/types.js +9 -1
- package/blocks/CloudImageEditor/src/utils/parseFilterValue.d.ts +11 -0
- package/blocks/CloudImageEditor/src/utils/parseFilterValue.d.ts.map +1 -0
- package/blocks/CloudImageEditor/src/utils/parseFilterValue.js +11 -0
- package/blocks/Config/Config.d.ts.map +1 -1
- package/blocks/Config/Config.js +6 -1
- package/blocks/Config/initialConfig.d.ts +1 -0
- package/blocks/Config/initialConfig.d.ts.map +1 -1
- package/blocks/Config/initialConfig.js +6 -2
- package/blocks/Config/normalizeConfigValue.d.ts.map +1 -1
- package/blocks/Config/normalizeConfigValue.js +3 -0
- package/blocks/Config/side-effects.d.ts +8 -4
- package/blocks/Config/side-effects.d.ts.map +1 -1
- package/blocks/Config/side-effects.js +115 -21
- package/blocks/DropArea/DropArea.d.ts +2 -2
- package/blocks/ExternalSource/ExternalSource.d.ts +2 -2
- package/blocks/ExternalSource/types.d.ts +0 -3
- package/blocks/ExternalSource/types.d.ts.map +1 -1
- package/blocks/ExternalSource/types.js +0 -4
- package/blocks/FileItem/FileItem.d.ts +2 -3
- package/blocks/FileItem/FileItem.d.ts.map +1 -1
- package/blocks/FileItem/FileItem.js +20 -18
- package/blocks/FileItem/FileItemConfig.d.ts +1 -1
- package/blocks/FileItem/FileItemConfig.d.ts.map +1 -1
- package/blocks/FileItem/FileItemConfig.js +3 -3
- package/blocks/Modal/Modal.d.ts +6 -6
- package/blocks/Modal/Modal.d.ts.map +1 -1
- package/blocks/Modal/Modal.js +10 -12
- package/blocks/SimpleBtn/SimpleBtn.d.ts +2 -2
- package/blocks/SourceBtn/SourceBtn.d.ts +2 -2
- package/blocks/SourceBtn/SourceBtn.d.ts.map +1 -1
- package/blocks/SourceBtn/SourceBtn.js +0 -8
- package/blocks/Thumb/Thumb.d.ts +2 -2
- package/blocks/Thumb/Thumb.d.ts.map +1 -1
- package/blocks/Thumb/Thumb.js +2 -0
- package/blocks/UploadCtxProvider/EventEmitter.d.ts +17 -4
- package/blocks/UploadCtxProvider/EventEmitter.d.ts.map +1 -1
- package/blocks/UploadCtxProvider/EventEmitter.js +14 -2
- package/blocks/UploadList/UploadList.d.ts +2 -2
- package/blocks/UrlSource/UrlSource.js +3 -1
- package/blocks/themes/uc-basic/common.css +4 -0
- package/blocks/themes/uc-basic/index.css +0 -1
- package/blocks/themes/uc-basic/svg-sprite.d.ts +1 -1
- package/blocks/themes/uc-basic/svg-sprite.d.ts.map +1 -1
- package/blocks/themes/uc-basic/svg-sprite.js +1 -1
- package/env.d.ts +1 -1
- package/env.js +1 -1
- package/index.d.ts +1 -2
- package/index.js +1 -2
- package/index.ssr.d.ts +19 -69
- package/index.ssr.d.ts.map +1 -1
- package/index.ssr.js +44 -143
- package/locales/file-uploader/ar.d.ts +4 -0
- package/locales/file-uploader/ar.js +5 -0
- package/locales/file-uploader/az.d.ts +4 -0
- package/locales/file-uploader/az.js +5 -0
- package/locales/file-uploader/ca.d.ts +4 -0
- package/locales/file-uploader/ca.js +6 -0
- package/locales/file-uploader/cs.d.ts +4 -0
- package/locales/file-uploader/cs.js +6 -0
- package/locales/file-uploader/da.d.ts +4 -0
- package/locales/file-uploader/da.js +6 -0
- package/locales/file-uploader/de.d.ts +4 -0
- package/locales/file-uploader/de.js +6 -0
- package/locales/file-uploader/el.d.ts +4 -0
- package/locales/file-uploader/el.js +6 -0
- package/locales/file-uploader/en.d.ts +4 -3
- package/locales/file-uploader/en.js +5 -3
- package/locales/file-uploader/es.d.ts +4 -0
- package/locales/file-uploader/es.js +6 -0
- package/locales/file-uploader/et.d.ts +4 -0
- package/locales/file-uploader/et.js +6 -0
- package/locales/file-uploader/fi.d.ts +4 -0
- package/locales/file-uploader/fi.js +6 -0
- package/locales/file-uploader/fr.d.ts +4 -0
- package/locales/file-uploader/fr.js +6 -0
- package/locales/file-uploader/he.d.ts +4 -0
- package/locales/file-uploader/he.js +6 -0
- package/locales/file-uploader/hy.d.ts +4 -0
- package/locales/file-uploader/hy.js +5 -0
- package/locales/file-uploader/is.d.ts +4 -0
- package/locales/file-uploader/is.js +6 -0
- package/locales/file-uploader/it.d.ts +4 -0
- package/locales/file-uploader/it.js +6 -0
- package/locales/file-uploader/ja.d.ts +4 -0
- package/locales/file-uploader/ja.js +6 -0
- package/locales/file-uploader/ka.d.ts +4 -0
- package/locales/file-uploader/ka.js +6 -0
- package/locales/file-uploader/kk.d.ts +4 -0
- package/locales/file-uploader/kk.js +6 -0
- package/locales/file-uploader/ko.d.ts +4 -0
- package/locales/file-uploader/ko.js +6 -0
- package/locales/file-uploader/lv.d.ts +4 -0
- package/locales/file-uploader/lv.js +6 -0
- package/locales/file-uploader/nb.d.ts +4 -0
- package/locales/file-uploader/nb.js +6 -0
- package/locales/file-uploader/nl.d.ts +4 -0
- package/locales/file-uploader/nl.js +6 -0
- package/locales/file-uploader/pl.d.ts +4 -0
- package/locales/file-uploader/pl.js +6 -0
- package/locales/file-uploader/pt.d.ts +4 -0
- package/locales/file-uploader/pt.js +6 -0
- package/locales/file-uploader/ro.d.ts +4 -0
- package/locales/file-uploader/ro.js +6 -0
- package/locales/file-uploader/ru.d.ts +4 -0
- package/locales/file-uploader/ru.js +6 -0
- package/locales/file-uploader/sk.d.ts +4 -0
- package/locales/file-uploader/sk.js +6 -0
- package/locales/file-uploader/sr.d.ts +4 -0
- package/locales/file-uploader/sr.js +6 -0
- package/locales/file-uploader/sv.d.ts +4 -0
- package/locales/file-uploader/sv.js +6 -0
- package/locales/file-uploader/tr.d.ts +4 -0
- package/locales/file-uploader/tr.js +6 -0
- package/locales/file-uploader/uk.d.ts +4 -0
- package/locales/file-uploader/uk.js +6 -0
- package/locales/file-uploader/vi.d.ts +4 -0
- package/locales/file-uploader/vi.js +6 -0
- package/locales/file-uploader/zh-TW.d.ts +4 -0
- package/locales/file-uploader/zh-TW.js +6 -0
- package/locales/file-uploader/zh.d.ts +4 -0
- package/locales/file-uploader/zh.js +6 -0
- package/package.json +8 -8
- package/solutions/cloud-image-editor/CloudImageEditor.d.ts +35 -0
- package/solutions/cloud-image-editor/CloudImageEditor.d.ts.map +1 -1
- package/solutions/cloud-image-editor/CloudImageEditor.js +12 -0
- package/solutions/file-uploader/inline/FileUploaderInline.d.ts +3 -2
- package/solutions/file-uploader/inline/FileUploaderInline.d.ts.map +1 -1
- package/solutions/file-uploader/inline/FileUploaderInline.js +4 -0
- package/solutions/file-uploader/minimal/FileUploaderMinimal.d.ts +11 -10
- package/solutions/file-uploader/minimal/FileUploaderMinimal.d.ts.map +1 -1
- package/solutions/file-uploader/minimal/FileUploaderMinimal.js +9 -9
- package/solutions/file-uploader/regular/FileUploaderRegular.d.ts +3 -2
- package/solutions/file-uploader/regular/FileUploaderRegular.d.ts.map +1 -1
- package/solutions/file-uploader/regular/FileUploaderRegular.js +4 -4
- package/types/events.d.ts +1 -1
- package/types/exported.d.ts +59 -52
- package/types/jsx.d.ts +2 -0
- package/utils/isPromiseLike.d.ts +2 -0
- package/utils/isPromiseLike.d.ts.map +1 -0
- package/utils/isPromiseLike.js +12 -0
- package/utils/isPromiseLike.test.d.ts +2 -0
- package/utils/isPromiseLike.test.d.ts.map +1 -0
- package/utils/isPromiseLike.test.js +20 -0
- package/utils/parseCdnUrl.d.ts.map +1 -1
- package/utils/parseCdnUrl.js +4 -1
- package/utils/parseCdnUrl.test.js +13 -0
- package/utils/validators/collection/validateCollectionUploadError.d.ts +2 -2
- package/utils/validators/collection/validateCollectionUploadError.d.ts.map +1 -1
- package/utils/validators/collection/validateCollectionUploadError.js +1 -1
- package/utils/validators/collection/validateMultiple.d.ts +2 -2
- package/utils/validators/collection/validateMultiple.d.ts.map +1 -1
- package/utils/validators/collection/validateMultiple.js +1 -1
- package/utils/validators/file/validateFileType.d.ts +2 -2
- package/utils/validators/file/validateFileType.d.ts.map +1 -1
- package/utils/validators/file/validateFileType.js +1 -1
- package/utils/validators/file/validateIsImage.d.ts +2 -2
- package/utils/validators/file/validateIsImage.d.ts.map +1 -1
- package/utils/validators/file/validateIsImage.js +1 -1
- package/utils/validators/file/validateMaxSizeLimit.d.ts +2 -2
- package/utils/validators/file/validateMaxSizeLimit.d.ts.map +1 -1
- package/utils/validators/file/validateMaxSizeLimit.js +1 -1
- package/utils/validators/file/validateUploadError.d.ts +2 -2
- package/utils/validators/file/validateUploadError.d.ts.map +1 -1
- package/utils/validators/file/validateUploadError.js +1 -1
- package/web/file-uploader.iife.min.js +5 -5
- package/web/file-uploader.min.js +5 -5
- package/web/uc-basic.min.css +1 -1
- package/web/uc-cloud-image-editor.min.css +1 -1
- package/web/uc-cloud-image-editor.min.js +5 -5
- package/web/uc-file-uploader-inline.min.css +1 -1
- package/web/uc-file-uploader-inline.min.js +5 -5
- package/web/uc-file-uploader-minimal.min.css +1 -1
- package/web/uc-file-uploader-minimal.min.js +5 -5
- package/web/uc-file-uploader-regular.min.css +1 -1
- package/web/uc-file-uploader-regular.min.js +5 -5
- package/web/uc-img.min.js +2 -2
- package/abstract/SecureUploadsManager.d.ts +0 -22
- package/abstract/ValidationManager.d.ts.map +0 -1
- package/abstract/a11y.d.ts.map +0 -1
- package/blocks/AiGenerateSource/AIGenerateSource.d.ts +0 -47
- package/blocks/AiGenerateSource/AIGenerateSource.d.ts.map +0 -1
- package/blocks/AiGenerateSource/AIGenerateSource.js +0 -180
- package/blocks/AiGenerateSource/ai-generate-source.css +0 -58
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CloudImageEditorBlock.d.ts","sourceRoot":"","sources":["CloudImageEditorBlock.js"],"names":[],"mappings":"AAmBA;IAOI
|
|
1
|
+
{"version":3,"file":"CloudImageEditorBlock.d.ts","sourceRoot":"","sources":["CloudImageEditorBlock.js"],"names":[],"mappings":"AAmBA;IAOI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAGC;IAGH,eAAe;IACf,6BAAkE;IAElE;;;OAGG;IACH,oBAEC;IAED;;;;;OAKG;IACH,qBAeC;IAYD,6BAmDC;IAED,4BAwGC;IA5FG,iCAAwB;CA6F7B;;;;sBAzOqB,4BAA4B;yBAezB,eAAe"}
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
import { TRANSPARENT_PIXEL_SRC } from '../../../utils/transparentPixelSrc.js';
|
|
11
11
|
import { debounce } from '../../utils/debounce.js';
|
|
12
12
|
import { classNames } from './lib/classNames.js';
|
|
13
|
-
import { parseCropPreset } from './lib/parseCropPreset.js';
|
|
13
|
+
import { getClosestAspectRatio, parseCropPreset } from './lib/parseCropPreset.js';
|
|
14
14
|
import { parseTabs } from './lib/parseTabs.js';
|
|
15
15
|
import { operationsToTransformations, transformationsToOperations } from './lib/transformationUtils.js';
|
|
16
16
|
import { initState } from './state.js';
|
|
@@ -121,6 +121,7 @@ export class CloudImageEditorBlock extends Block {
|
|
|
121
121
|
}
|
|
122
122
|
} catch (err) {
|
|
123
123
|
if (err) {
|
|
124
|
+
this.telemetryManager.sendEventError(err, 'cloud editor image. Failed to load image info');
|
|
124
125
|
console.error('Failed to load image info', err);
|
|
125
126
|
}
|
|
126
127
|
}
|
|
@@ -161,10 +162,6 @@ export class CloudImageEditorBlock extends Block {
|
|
|
161
162
|
}
|
|
162
163
|
});
|
|
163
164
|
|
|
164
|
-
this.sub('cropPreset', (val) => {
|
|
165
|
-
this.$['*cropPresetList'] = parseCropPreset(val);
|
|
166
|
-
});
|
|
167
|
-
|
|
168
165
|
this.sub(
|
|
169
166
|
'tabs',
|
|
170
167
|
/** @param {string} val */ (val) => {
|
|
@@ -216,6 +213,24 @@ export class CloudImageEditorBlock extends Block {
|
|
|
216
213
|
|
|
217
214
|
this.sub('uuid', (val) => val && this.updateImage());
|
|
218
215
|
this.sub('cdnUrl', (val) => val && this.updateImage());
|
|
216
|
+
|
|
217
|
+
this.sub('cropPreset', (val) => {
|
|
218
|
+
const list = parseCropPreset(val);
|
|
219
|
+
let closest = null;
|
|
220
|
+
|
|
221
|
+
if (this.$.cdnUrl) {
|
|
222
|
+
const operations = extractOperations(this.$.cdnUrl);
|
|
223
|
+
const transformations = operationsToTransformations(operations);
|
|
224
|
+
|
|
225
|
+
if (Array.isArray(transformations?.crop?.dimensions)) {
|
|
226
|
+
const [w, h] = transformations?.crop?.dimensions;
|
|
227
|
+
closest = getClosestAspectRatio(w, h, list, 0.1);
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
this.$['*cropPresetList'] = list;
|
|
232
|
+
this.$['*currentAspectRatio'] = closest ?? list?.[0] ?? null;
|
|
233
|
+
});
|
|
219
234
|
}
|
|
220
235
|
}
|
|
221
236
|
|
|
@@ -394,8 +394,8 @@ export class CropFrame extends Block {
|
|
|
394
394
|
/** @type {import('./types.js').Rectangle} */
|
|
395
395
|
let imageBox = this.$['*imageBox'];
|
|
396
396
|
let rect = /** @type {import('./types.js').Rectangle} */ (this._dragStartCrop) ?? this.$['*cropBox'];
|
|
397
|
-
|
|
398
|
-
const cropPreset = this.$['*
|
|
397
|
+
|
|
398
|
+
const cropPreset = this.$['*currentAspectRatio'];
|
|
399
399
|
const aspectRatio = cropPreset ? cropPreset.width / cropPreset.height : undefined;
|
|
400
400
|
|
|
401
401
|
if (direction === '') {
|
|
@@ -518,7 +518,7 @@ export class CropFrame extends Block {
|
|
|
518
518
|
this._createBackdrop();
|
|
519
519
|
this._createFrame();
|
|
520
520
|
|
|
521
|
-
this.sub('*imageBox', () => {
|
|
521
|
+
this.sub('*imageBox', (value) => {
|
|
522
522
|
this._resizeBackdrop();
|
|
523
523
|
window.requestAnimationFrame(() => {
|
|
524
524
|
this._render();
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export class EditorFreeformButtonControl extends EditorButtonControl {
|
|
2
|
+
handleClick(): void;
|
|
3
|
+
}
|
|
4
|
+
export class EditorAspectRatioButtonControl extends EditorButtonControl {
|
|
5
|
+
_aspectRatio: import("./types.js").CropAspectRatio | undefined;
|
|
6
|
+
handleClick(): void;
|
|
7
|
+
/** @param {import('./types.js').CropAspectRatio} value */
|
|
8
|
+
_renderRectBasedOnAspectRatio(value: import("./types.js").CropAspectRatio): void;
|
|
9
|
+
}
|
|
10
|
+
import { EditorButtonControl } from './EditorButtonControl.js';
|
|
11
|
+
//# sourceMappingURL=EditorAspectRatioButtonControl.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditorAspectRatioButtonControl.d.ts","sourceRoot":"","sources":["EditorAspectRatioButtonControl.js"],"names":[],"mappings":"AAyBA;IAoBE,oBAEC;CACF;AAED;IA4BQ,+DAAyB;IAqB/B,oBAMC;IAED,0DAA0D;IAC1D,qCADY,OAAO,YAAY,EAAE,eAAe,QAqB/C;CACF;oCA9HmC,0BAA0B"}
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
//@ts-check
|
|
2
|
+
|
|
3
|
+
import { createSvgNode } from './crop-utils.js';
|
|
4
|
+
import { EditorButtonControl } from './EditorButtonControl.js';
|
|
5
|
+
|
|
6
|
+
const SIZE_RECT_FIXED = 12;
|
|
7
|
+
const SIZE_SVG_WRAPPER = 16;
|
|
8
|
+
|
|
9
|
+
/** @param {import('./types.js').CropAspectRatio} value */
|
|
10
|
+
const getAdjustResolutions = (value) => {
|
|
11
|
+
let width = 12;
|
|
12
|
+
let height = 12;
|
|
13
|
+
const adjustResolutions = value.width / value.height;
|
|
14
|
+
|
|
15
|
+
if (adjustResolutions >= 1) {
|
|
16
|
+
width = SIZE_RECT_FIXED;
|
|
17
|
+
height = Math.round((SIZE_RECT_FIXED * value.height) / value.width);
|
|
18
|
+
} else {
|
|
19
|
+
height = SIZE_RECT_FIXED;
|
|
20
|
+
width = Math.round((SIZE_RECT_FIXED * value.width) / value.height);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
return { width, height };
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export class EditorFreeformButtonControl extends EditorButtonControl {
|
|
27
|
+
constructor() {
|
|
28
|
+
super();
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
initCallback() {
|
|
32
|
+
super.initCallback();
|
|
33
|
+
|
|
34
|
+
this.$['icon'] = 'freeform';
|
|
35
|
+
this.$['on.click'] = this.handleClick.bind(this);
|
|
36
|
+
this.$.active = !!this.$['*currentAspectRatio'];
|
|
37
|
+
|
|
38
|
+
this.sub('*currentAspectRatio', (opt) => {
|
|
39
|
+
const value = opt.hasFreeform ? this.l10n('custom') : `${opt.width}:${opt.height}`;
|
|
40
|
+
this.$['title'] = this.l10n('crop-to-shape', { value });
|
|
41
|
+
|
|
42
|
+
this.bindL10n('title-prop', () => this.$['title']);
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
handleClick() {
|
|
47
|
+
this.$['*showListAspectRatio'] = true;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export class EditorAspectRatioButtonControl extends EditorButtonControl {
|
|
52
|
+
constructor() {
|
|
53
|
+
super();
|
|
54
|
+
|
|
55
|
+
this.init$ = {
|
|
56
|
+
...this.init$,
|
|
57
|
+
active: false,
|
|
58
|
+
once: false,
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
initCallback() {
|
|
62
|
+
super.initCallback();
|
|
63
|
+
|
|
64
|
+
this.defineAccessor(
|
|
65
|
+
'aspectRatio',
|
|
66
|
+
/** @param {import('./types.js').CropAspectRatio} value */ (value) => {
|
|
67
|
+
if (!value) return;
|
|
68
|
+
|
|
69
|
+
const isFreeform = !!value.hasFreeform;
|
|
70
|
+
const name = this.l10n(isFreeform ? 'custom' : value.type).toLowerCase();
|
|
71
|
+
|
|
72
|
+
this.$['icon'] = isFreeform ? 'freeform' : value.type;
|
|
73
|
+
this.$['title'] = isFreeform ? this.l10n('custom') : `${value.width}:${value.height}`;
|
|
74
|
+
|
|
75
|
+
if (!isFreeform) {
|
|
76
|
+
this._renderRectBasedOnAspectRatio(value);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
this._aspectRatio = value;
|
|
80
|
+
|
|
81
|
+
this.bindL10n('title-prop', () => {
|
|
82
|
+
const val = isFreeform ? '' : `${value.width}:${value.height}`;
|
|
83
|
+
return this.l10n('a11y-cloud-editor-apply-aspect-ratio', {
|
|
84
|
+
name,
|
|
85
|
+
value: val,
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
},
|
|
89
|
+
);
|
|
90
|
+
|
|
91
|
+
this.sub('*currentAspectRatio', (opt) => {
|
|
92
|
+
this.$.active =
|
|
93
|
+
(opt && opt.id === this._aspectRatio?.id) ||
|
|
94
|
+
(opt?.width === this._aspectRatio?.width && opt?.height === this._aspectRatio?.height);
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
this.$['on.click'] = this.handleClick.bind(this);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
handleClick() {
|
|
101
|
+
if (this.$['*currentAspectRatio']?.id === this._aspectRatio?.id) {
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
this.$['*currentAspectRatio'] = this._aspectRatio;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/** @param {import('./types.js').CropAspectRatio} value */
|
|
109
|
+
_renderRectBasedOnAspectRatio(value) {
|
|
110
|
+
const { width, height } = getAdjustResolutions(value);
|
|
111
|
+
|
|
112
|
+
const rect = createSvgNode('rect', {
|
|
113
|
+
'stroke-linejoin': 'round',
|
|
114
|
+
fill: 'none',
|
|
115
|
+
stroke: 'currentColor',
|
|
116
|
+
'stroke-width': 1.2,
|
|
117
|
+
'fill-rule': 'evenodd',
|
|
118
|
+
x: (SIZE_SVG_WRAPPER - width) / 2,
|
|
119
|
+
y: (SIZE_SVG_WRAPPER - height) / 2,
|
|
120
|
+
width,
|
|
121
|
+
height,
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
const svgEl = this.ref['icon-el']?.ref?.svg;
|
|
125
|
+
|
|
126
|
+
if (!svgEl) return;
|
|
127
|
+
svgEl.innerHTML = '';
|
|
128
|
+
svgEl.appendChild(rect);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
@@ -39,7 +39,7 @@ export class EditorButtonControl extends Block {
|
|
|
39
39
|
|
|
40
40
|
EditorButtonControl.template = /* HTML */ `
|
|
41
41
|
<button role="option" type="button" set="@aria-label:title-prop;" l10n="@title:title-prop;">
|
|
42
|
-
<uc-icon set="@name: icon;"></uc-icon>
|
|
42
|
+
<uc-icon ref="icon-el" set="@name: icon;"></uc-icon>
|
|
43
43
|
<div class="uc-title" ref="title-el">{{title}}</div>
|
|
44
44
|
</button>
|
|
45
45
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorCropButtonControl.d.ts","sourceRoot":"","sources":["EditorCropButtonControl.js"],"names":[],"mappings":"AAkBA;IASM,eAAe;IACf,mBAA2B;
|
|
1
|
+
{"version":3,"file":"EditorCropButtonControl.d.ts","sourceRoot":"","sources":["EditorCropButtonControl.js"],"names":[],"mappings":"AAkBA;IASM,eAAe;IACf,mBAA2B;CAuBhC;oCAnDmC,0BAA0B"}
|
|
@@ -28,6 +28,7 @@ export class EditorCropButtonControl extends EditorButtonControl {
|
|
|
28
28
|
/** @private */
|
|
29
29
|
this._operation = operation;
|
|
30
30
|
this.$['icon'] = operation;
|
|
31
|
+
|
|
31
32
|
this.bindL10n('title-prop', () =>
|
|
32
33
|
this.l10n('a11y-cloud-editor-apply-crop', {
|
|
33
34
|
name: this.l10n(operation).toLowerCase(),
|
|
@@ -35,9 +36,16 @@ export class EditorCropButtonControl extends EditorButtonControl {
|
|
|
35
36
|
);
|
|
36
37
|
});
|
|
37
38
|
|
|
38
|
-
this.$['on.click'] = () => {
|
|
39
|
+
this.$['on.click'] = (e) => {
|
|
39
40
|
let prev = this.$['*cropperEl'].getValue(this._operation);
|
|
40
41
|
let next = nextValue(this._operation, prev);
|
|
42
|
+
|
|
43
|
+
this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
|
|
44
|
+
operation: this._operation,
|
|
45
|
+
next,
|
|
46
|
+
prev,
|
|
47
|
+
});
|
|
48
|
+
|
|
41
49
|
this.$['*cropperEl'].setValue(this._operation, next);
|
|
42
50
|
};
|
|
43
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorFilterControl.d.ts","sourceRoot":"","sources":["EditorFilterControl.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"EditorFilterControl.d.ts","sourceRoot":"","sources":["EditorFilterControl.js"],"names":[],"mappings":"AAQA;IAeE,sBA2BC;IAED;;;OAGG;IACH,2BAHW,yBAAyB,EAAE,YAC3B,oBAAoB,iBAuB9B;IAfG,yCAA4B;IAyC1B,+BAA0B;IAC1B,4BAAqB;IAYzB,4CAEE;IAGF,kBAA+B;CAgDlC;;;;oCAvKmC,0BAA0B"}
|
|
@@ -4,6 +4,7 @@ import { EditorButtonControl } from './EditorButtonControl.js';
|
|
|
4
4
|
import { FAKE_ORIGINAL_FILTER } from './EditorSlider.js';
|
|
5
5
|
import { COMMON_OPERATIONS, transformationsToOperations } from './lib/transformationUtils.js';
|
|
6
6
|
import { preloadImage } from '../../utils/preloadImage.js';
|
|
7
|
+
import { parseFilterValue } from './utils/parseFilterValue.js';
|
|
7
8
|
|
|
8
9
|
export class EditorFilterControl extends EditorButtonControl {
|
|
9
10
|
constructor() {
|
|
@@ -79,7 +80,8 @@ export class EditorFilterControl extends EditorButtonControl {
|
|
|
79
80
|
initCallback() {
|
|
80
81
|
super.initCallback();
|
|
81
82
|
|
|
82
|
-
|
|
83
|
+
/** @param {MouseEvent} e */
|
|
84
|
+
this.$['on.click'] = (e) => {
|
|
83
85
|
if (!this.$.active) {
|
|
84
86
|
this.$['*sliderEl'].setOperation(this._operation, this._filter);
|
|
85
87
|
this.$['*sliderEl'].apply();
|
|
@@ -88,6 +90,10 @@ export class EditorFilterControl extends EditorButtonControl {
|
|
|
88
90
|
this.$['*showSlider'] = true;
|
|
89
91
|
}
|
|
90
92
|
|
|
93
|
+
this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
|
|
94
|
+
operation: parseFilterValue(this.$['*operationTooltip']),
|
|
95
|
+
});
|
|
96
|
+
|
|
91
97
|
this.$['*currentFilter'] = this._filter;
|
|
92
98
|
};
|
|
93
99
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorImageCropper.d.ts","sourceRoot":"","sources":["EditorImageCropper.js"],"names":[],"mappings":"AA2CA;IAKI;;;QAIE,yBAAyB;uBAAd,UAAU;QAMrB,6CAA6C;qBAAlC,OAAO,YAAY,EAAE,SAAS;QAOzC,6CAA6C;oBAAlC,OAAO,YAAY,EAAE,SAAS;MAO1C;IAED,eAAe;IACf,yBAA8D;IAE9D,eAAe;IACf,+BAA0E;IAE1E;;;MAAyC;IAG3C,eAAe;IACf,sBASC;IAED,eAAe;IACf,6BAKC;IAED,eAAe;IACf,oBAgBC;IAFC,uCAAqB;IACrB,kDAAe;IAGjB,eAAe;IACf,oBAuCC;IAED,eAAe;IACf,
|
|
1
|
+
{"version":3,"file":"EditorImageCropper.d.ts","sourceRoot":"","sources":["EditorImageCropper.js"],"names":[],"mappings":"AA2CA;IAKI;;;QAIE,yBAAyB;uBAAd,UAAU;QAMrB,6CAA6C;qBAAlC,OAAO,YAAY,EAAE,SAAS;QAOzC,6CAA6C;oBAAlC,OAAO,YAAY,EAAE,SAAS;MAO1C;IAED,eAAe;IACf,yBAA8D;IAE9D,eAAe;IACf,+BAA0E;IAE1E;;;MAAyC;IAG3C,eAAe;IACf,sBASC;IAED,eAAe;IACf,6BAKC;IAED,eAAe;IACf,oBAgBC;IAFC,uCAAqB;IACrB,kDAAe;IAGjB,eAAe;IACf,oBAuCC;IAED,eAAe;IACf,mBAoDC;IAED,eAAe;IACf,mBAcC;IAED,eAAe;IACf,cAUC;IAED;;;OAGG;IACH,mBAYC;IAED;;;OAGG;IACH,2BAkBC;IAED;;;OAGG;IACH,+BA8BC;IAED,eAAe;IACf,gBAkBC;IAED;;;;OAIG;IACH,4CAFa,IAAI,CAehB;IAED;;;OAGG;IACH,oBAHW,MAAM,UAAU,GACd,SAAS,OAAO,CAI5B;IAED;;;OAGG;IACH,oBAHW,OAAO,YAAY,EAAE,SAAS,mBAC9B;QAAE,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,iBA0BlC;IApBC,+BAAqB;IAarB,sCAKE;IAGJ;;aAkBC;IAED,eAAe;IACf,0BAYC;IAED,eAAe;IACf,2BAMC;IAED,eAAe;IACf,eAKC;IAED;;;;;OAKG;IACH,sBAyBC;IATC,yCAA4B;IAW9B;;;;OAIG;IACH,4BAkBC;CAgCF;;;;;UA5gBa,OAAO;YACP,OAAO;;;sBApBC,4BAA4B"}
|
|
@@ -189,8 +189,7 @@ export class EditorImageCropper extends Block {
|
|
|
189
189
|
);
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
-
|
|
193
|
-
const cropPreset = this.$['*cropPresetList']?.[0];
|
|
192
|
+
const cropPreset = this.$['*currentAspectRatio'];
|
|
194
193
|
const cropAspectRatio = cropPreset ? cropPreset.width / cropPreset.height : undefined;
|
|
195
194
|
|
|
196
195
|
if (
|
|
@@ -393,6 +392,7 @@ export class EditorImageCropper extends Block {
|
|
|
393
392
|
this._animateIn({ fromViewer });
|
|
394
393
|
} catch (err) {
|
|
395
394
|
console.error('Failed to activate cropper', { error: err });
|
|
395
|
+
this.telemetryManager.sendEventError(err, 'cloud editor image. Failed to activate cropper');
|
|
396
396
|
}
|
|
397
397
|
|
|
398
398
|
this._observer = new ResizeObserver(([entry]) => {
|
|
@@ -526,7 +526,7 @@ export class EditorImageCropper extends Block {
|
|
|
526
526
|
}
|
|
527
527
|
});
|
|
528
528
|
|
|
529
|
-
this.sub('*
|
|
529
|
+
this.sub('*currentAspectRatio', () => {
|
|
530
530
|
this._alignCrop();
|
|
531
531
|
});
|
|
532
532
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorOperationControl.d.ts","sourceRoot":"","sources":["EditorOperationControl.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"EditorOperationControl.d.ts","sourceRoot":"","sources":["EditorOperationControl.js"],"names":[],"mappings":"AAKA;IACE;;;OAGG;IACH,mBAAgB;CAuCjB;oCAhDmC,0BAA0B"}
|
|
@@ -1,23 +1,29 @@
|
|
|
1
|
+
//@ts-check
|
|
1
2
|
import { EditorButtonControl } from './EditorButtonControl.js';
|
|
2
3
|
import { COLOR_OPERATIONS_CONFIG } from './toolbar-constants.js';
|
|
4
|
+
import { parseFilterValue } from './utils/parseFilterValue.js';
|
|
3
5
|
|
|
4
6
|
export class EditorOperationControl extends EditorButtonControl {
|
|
5
7
|
/**
|
|
6
8
|
* @private
|
|
7
|
-
* @type {
|
|
9
|
+
* @type {import('./toolbar-constants.js').ColorOperation | ''}
|
|
8
10
|
*/
|
|
9
11
|
_operation = '';
|
|
10
12
|
|
|
11
13
|
initCallback() {
|
|
12
14
|
super.initCallback();
|
|
13
15
|
|
|
14
|
-
this.$['on.click'] = (e) => {
|
|
16
|
+
this.$['on.click'] = (/** @type {MouseEvent} */ e) => {
|
|
15
17
|
this.$['*sliderEl'].setOperation(this._operation);
|
|
16
18
|
this.$['*showSlider'] = true;
|
|
17
19
|
this.$['*currentOperation'] = this._operation;
|
|
20
|
+
|
|
21
|
+
this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
|
|
22
|
+
operation: parseFilterValue(this.$['*operationTooltip']),
|
|
23
|
+
});
|
|
18
24
|
};
|
|
19
25
|
|
|
20
|
-
this.defineAccessor('operation', (operation) => {
|
|
26
|
+
this.defineAccessor('operation', (/** @type {import('./toolbar-constants.js').ColorOperation} */ operation) => {
|
|
21
27
|
if (operation) {
|
|
22
28
|
this._operation = operation;
|
|
23
29
|
this.$['icon'] = operation;
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
export class EditorToolbar extends Block {
|
|
2
2
|
init$: {
|
|
3
3
|
'*sliderEl': null;
|
|
4
|
+
'*listAspectRatioEl': null;
|
|
4
5
|
/** @type {import('./types.js').LoadingOperations} */
|
|
5
6
|
'*loadingOperations': import("./types.js").LoadingOperations;
|
|
6
7
|
'*showSlider': boolean;
|
|
8
|
+
'*showListAspectRatio': boolean;
|
|
9
|
+
hideSliderOrList: boolean;
|
|
7
10
|
'*currentFilter': string;
|
|
8
11
|
'*currentOperation': null;
|
|
9
12
|
showLoader: boolean;
|
|
@@ -17,11 +20,9 @@ export class EditorToolbar extends Block {
|
|
|
17
20
|
'presence.tabContent.crop': boolean;
|
|
18
21
|
'presence.tabContent.tuning': boolean;
|
|
19
22
|
'presence.tabContent.filters': boolean;
|
|
20
|
-
'presence.tabContent.ai': boolean;
|
|
21
23
|
'presence.tabToggle.crop': boolean;
|
|
22
24
|
'presence.tabToggle.tuning': boolean;
|
|
23
25
|
'presence.tabToggle.filters': boolean;
|
|
24
|
-
'presence.tabToggle.ai': boolean;
|
|
25
26
|
'presence.subTopToolbarStyles': {
|
|
26
27
|
hidden: string;
|
|
27
28
|
visible: string;
|
|
@@ -42,10 +43,14 @@ export class EditorToolbar extends Block {
|
|
|
42
43
|
hidden: string;
|
|
43
44
|
visible: string;
|
|
44
45
|
};
|
|
45
|
-
|
|
46
|
-
'on.
|
|
47
|
-
|
|
48
|
-
'on.
|
|
46
|
+
/** @param {MouseEvent} e */
|
|
47
|
+
'on.cancel': (e: MouseEvent) => void;
|
|
48
|
+
/** @param {MouseEvent} e */
|
|
49
|
+
'on.apply': (e: MouseEvent) => void;
|
|
50
|
+
/** @param {MouseEvent} e */
|
|
51
|
+
'on.applySlider': (e: MouseEvent) => void;
|
|
52
|
+
/** @param {MouseEvent} e */
|
|
53
|
+
'on.cancelSlider': (e: MouseEvent) => void;
|
|
49
54
|
/** @param {MouseEvent} e */
|
|
50
55
|
'on.clickTab': (e: MouseEvent) => void;
|
|
51
56
|
tab_role: string;
|
|
@@ -74,12 +79,18 @@ export class EditorToolbar extends Block {
|
|
|
74
79
|
* @param {String} operation
|
|
75
80
|
*/
|
|
76
81
|
private _createToggleControl;
|
|
82
|
+
/**
|
|
83
|
+
* @private
|
|
84
|
+
* @param {import('./types.js').CropAspectRatio} config
|
|
85
|
+
*/
|
|
86
|
+
private _createAspectRatioConrol;
|
|
87
|
+
_createFreeformConrol(): EditorFreeformButtonControl;
|
|
88
|
+
_clearListAspectRatio(): void;
|
|
77
89
|
/**
|
|
78
90
|
* @private
|
|
79
91
|
* @param {String} tabId
|
|
80
92
|
*/
|
|
81
93
|
private _renderControlsList;
|
|
82
|
-
redirectToAiGenerate(): void;
|
|
83
94
|
/**
|
|
84
95
|
* @private
|
|
85
96
|
* @param {String} id
|
|
@@ -109,4 +120,5 @@ export namespace EditorToolbar {
|
|
|
109
120
|
let template: string;
|
|
110
121
|
}
|
|
111
122
|
import { Block } from '../../../abstract/Block.js';
|
|
123
|
+
import { EditorFreeformButtonControl } from './EditorAspectRatioButtonControl.js';
|
|
112
124
|
//# sourceMappingURL=EditorToolbar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorToolbar.d.ts","sourceRoot":"","sources":["EditorToolbar.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"EditorToolbar.d.ts","sourceRoot":"","sources":["EditorToolbar.js"],"names":[],"mappings":"AA6DA;IAII;;;QAIE,qDAAqD;8BAA1C,OAAO,YAAY,EAAE,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA0CjD,4BAA4B;yBAAhB,UAAU;QAStB,4BAA4B;wBAAhB,UAAU;QAOtB,4BAA4B;8BAAhB,UAAU;QAStB,4BAA4B;+BAAhB,UAAU;QAQtB,4BAA4B;2BAAhB,UAAU;;;;;;;MAiBvB;IAED,eAAe;IAEf,6BAAsE;IAGxE,eAAe;IACf,uBAUC;IAED;;;OAGG;IACH,gCAKC;IAED;;;OAGG;IACH,6BAKC;IAED;;;OAGG;IACH,6BAKC;IAED;;;OAGG;IACH,iCAKC;IAED,qDAGC;IAED,8BAEC;IAED;;;OAGG;IACH,4BAwDC;IAED;;;;OAIG;IACH,qBAyBC;IAED;;;OAGG;IACH,4BAKC;IAED,eAAe;IACf,0BAIC;IAED,eAAe;IACf,4BAWC;IALG,oBAGC;IAIL;;;OAGG;IACH,oBAEC;IAED;;MAwBM;CA+FP;;;;sBAreqB,4BAA4B;4CAE0B,qCAAqC"}
|