@syncfusion/ej2-image-editor 23.2.5 → 23.2.6
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/CHANGELOG.md +9 -0
- package/dist/ej2-image-editor.umd.min.js +2 -2
- package/dist/ej2-image-editor.umd.min.js.map +1 -1
- package/dist/es6/ej2-image-editor.es2015.js +45 -12
- package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
- package/dist/es6/ej2-image-editor.es5.js +45 -12
- package/dist/es6/ej2-image-editor.es5.js.map +1 -1
- package/dist/global/ej2-image-editor.min.js +2 -2
- package/dist/global/ej2-image-editor.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +6 -6
- package/src/image-editor/action/selection.d.ts +1 -0
- package/src/image-editor/action/selection.js +35 -8
- package/src/image-editor/action/transform.js +2 -1
- package/src/image-editor/base/image-editor.js +1 -0
- package/src/image-editor/renderer/toolbar.js +6 -2
|
@@ -11065,6 +11065,10 @@ class Selection {
|
|
|
11065
11065
|
performEnterAction(e) {
|
|
11066
11066
|
const parent = this.parent;
|
|
11067
11067
|
if (parent.isResize) {
|
|
11068
|
+
const isValue = this.isValueUpdated();
|
|
11069
|
+
if (!isValue) {
|
|
11070
|
+
return;
|
|
11071
|
+
}
|
|
11068
11072
|
const point = this.getNumTextValue();
|
|
11069
11073
|
const aspectRatioElement = this.parent.element.querySelector('#' + this.parent.element.id + '_aspectratio');
|
|
11070
11074
|
const blrAspRatElem = this.parent.element.querySelector('.e-ie-toolbar-aspect-ratio-btn');
|
|
@@ -11094,15 +11098,19 @@ class Selection {
|
|
|
11094
11098
|
const aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
|
|
11095
11099
|
const aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
|
|
11096
11100
|
if (isNullOrUndefined(aspectRatioElement)) {
|
|
11097
|
-
|
|
11098
|
-
|
|
11099
|
-
|
|
11100
|
-
|
|
11101
|
-
|
|
11102
|
-
|
|
11103
|
-
|
|
11104
|
-
|
|
11105
|
-
|
|
11101
|
+
if (aspectRatioHeight) {
|
|
11102
|
+
const elem = getComponent(aspectRatioHeight, 'numerictextbox');
|
|
11103
|
+
if (aspectRatioHeight && isNullOrUndefined(elem.value)) {
|
|
11104
|
+
elem.value = parseFloat(elem.placeholder);
|
|
11105
|
+
aspectRatioHeight.value = Math.floor(parent.img.destHeight).toString() + ' px';
|
|
11106
|
+
}
|
|
11107
|
+
}
|
|
11108
|
+
if (aspectRatioWidth) {
|
|
11109
|
+
const elem = getComponent(aspectRatioWidth, 'numerictextbox');
|
|
11110
|
+
if (aspectRatioWidth && isNullOrUndefined(elem.value)) {
|
|
11111
|
+
elem.value = parseFloat(elem.placeholder);
|
|
11112
|
+
aspectRatioWidth.value = Math.floor(parent.img.destWidth).toString() + ' px';
|
|
11113
|
+
}
|
|
11106
11114
|
}
|
|
11107
11115
|
}
|
|
11108
11116
|
}
|
|
@@ -12078,6 +12086,25 @@ class Selection {
|
|
|
12078
12086
|
}
|
|
12079
12087
|
return { x: width, y: height };
|
|
12080
12088
|
}
|
|
12089
|
+
isValueUpdated() {
|
|
12090
|
+
let isValue = true;
|
|
12091
|
+
let widthElement;
|
|
12092
|
+
let heightElement;
|
|
12093
|
+
if (!isBlazor()) {
|
|
12094
|
+
widthElement = this.parent.element.querySelector('#' + this.parent.element.id + '_resizeWidth');
|
|
12095
|
+
heightElement = this.parent.element.querySelector('#' + this.parent.element.id + '_resizeHeight');
|
|
12096
|
+
}
|
|
12097
|
+
else {
|
|
12098
|
+
widthElement = this.parent.element.querySelector('.e-ie-toolbar-e-resize-width-input .e-numerictextbox');
|
|
12099
|
+
heightElement = this.parent.element.querySelector('.e-ie-toolbar-e-resize-height-input .e-numerictextbox');
|
|
12100
|
+
}
|
|
12101
|
+
if (widthElement && heightElement) {
|
|
12102
|
+
if (heightElement.value.replace(/,/g, '') === '' && widthElement.value.replace(/,/g, '') === '') {
|
|
12103
|
+
isValue = false;
|
|
12104
|
+
}
|
|
12105
|
+
}
|
|
12106
|
+
return isValue;
|
|
12107
|
+
}
|
|
12081
12108
|
}
|
|
12082
12109
|
|
|
12083
12110
|
class Shape {
|
|
@@ -16605,7 +16632,8 @@ class Transform {
|
|
|
16605
16632
|
}
|
|
16606
16633
|
}
|
|
16607
16634
|
getCurrentZoomFactor(zoomFactor) {
|
|
16608
|
-
return (zoomFactor - this.prevZoomValue) * 0.1
|
|
16635
|
+
return zoomFactor >= 1 ? (this.prevZoomValue < 1 ? (zoomFactor - this.prevZoomValue) : (zoomFactor - this.prevZoomValue) * 0.1) :
|
|
16636
|
+
(zoomFactor - this.prevZoomValue);
|
|
16609
16637
|
}
|
|
16610
16638
|
setCurrPanRegion(region, type, obj) {
|
|
16611
16639
|
let panRegion = region;
|
|
@@ -19215,6 +19243,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
|
|
|
19215
19243
|
this.currentFilter = '';
|
|
19216
19244
|
this.tempFrameZoomLevel = null;
|
|
19217
19245
|
this.cxtTbarHeight = null;
|
|
19246
|
+
this.aspectWidth = this.aspectHeight = null;
|
|
19218
19247
|
const obj = { initialZoomValue: false };
|
|
19219
19248
|
this.notify('draw', { prop: 'getInitialZoomValue', onPropertyChange: false, value: { obj: obj } });
|
|
19220
19249
|
if (obj['initialZoomValue']) {
|
|
@@ -22342,13 +22371,17 @@ class ToolbarModule {
|
|
|
22342
22371
|
getResizeToolbarItem() {
|
|
22343
22372
|
const toolbarItems = [];
|
|
22344
22373
|
const isResize = this.parent.aspectWidth && this.parent.aspectHeight ? true : false;
|
|
22374
|
+
const width = this.parent.transform.degree % 90 === 0 && this.parent.transform.degree % 180 !== 0 ?
|
|
22375
|
+
Math.ceil(this.parent.img.srcHeight).toString() : Math.ceil(this.parent.img.srcWidth).toString();
|
|
22376
|
+
const height = this.parent.transform.degree % 90 === 0 && this.parent.transform.degree % 180 !== 0 ?
|
|
22377
|
+
Math.ceil(this.parent.img.srcWidth).toString() : Math.ceil(this.parent.img.srcHeight).toString();
|
|
22345
22378
|
const spanWidth = document.createElement('span');
|
|
22346
22379
|
spanWidth.innerHTML = this.l10n.getConstant('W');
|
|
22347
22380
|
toolbarItems.push({ id: this.parent.element.id + '_width', cssClass: 'e-ie-resize-width', template: spanWidth, align: 'Center' });
|
|
22348
22381
|
toolbarItems.push({ id: this.parent.element.id + '_resizeWidth', prefixIcon: 'e-icons e-anti-clock-wise',
|
|
22349
22382
|
tooltipText: this.l10n.getConstant('Width'), align: 'Center', type: 'Input', template: new NumericTextBox({ width: 75, htmlAttributes: { maxLength: "4" },
|
|
22350
22383
|
showSpinButton: false, value: isResize ? this.parent.aspectWidth : null,
|
|
22351
|
-
placeholder: isResize ? null :
|
|
22384
|
+
placeholder: isResize ? null : width, format: '###.## px' })
|
|
22352
22385
|
});
|
|
22353
22386
|
const spanHeight = document.createElement('span');
|
|
22354
22387
|
spanHeight.innerHTML = this.l10n.getConstant('H');
|
|
@@ -22356,7 +22389,7 @@ class ToolbarModule {
|
|
|
22356
22389
|
toolbarItems.push({ id: this.parent.element.id + '_resizeHeight', prefixIcon: 'e-icons e-clock-wise',
|
|
22357
22390
|
tooltipText: this.l10n.getConstant('Height'), align: 'Center', type: 'Input', template: new NumericTextBox({ width: 75, htmlAttributes: { maxLength: "4" },
|
|
22358
22391
|
showSpinButton: false, value: isResize ? this.parent.aspectHeight : null,
|
|
22359
|
-
placeholder: isResize ? null :
|
|
22392
|
+
placeholder: isResize ? null : height, format: '###.## px' })
|
|
22360
22393
|
});
|
|
22361
22394
|
if (!this.isAspectRatio) {
|
|
22362
22395
|
toolbarItems.push({ id: this.parent.element.id + '_aspectratio', prefixIcon: 'e-icons e-lock', align: 'Center', tooltipText: this.l10n.getConstant('AspectRatio'), type: 'Button' });
|