@syncfusion/ej2-image-editor 24.1.43 → 24.1.45

package/dist/es6/ej2-image-editor.es5.js

@@ -1099,7 +1099,7 @@ var Draw = /** @__PURE__ @class */ (function () {
                 this.updateCanvas();
                 break;
             case 'performCancel':
-                this.performCancel(args.value['isContextualToolbar']);
+                this.performCancel(args.value['isContextualToolbar'], args.value['isUndoRedo']);
                 break;
             case 'updateFlipPan':
                 this.updateFlipPan(args.value['tempSelectionObj']);
@@ -1591,13 +1591,11 @@ var Draw = /** @__PURE__ @class */ (function () {
             if (destTop < 0) {
                 height += destTop;
             }
-            if (parent.currObjType.shape.toLowerCase() !== 'crop-square' && parent.currObjType.shape.toLowerCase() !== 'crop-circle') {
-                if (destLeft + destWidth > parent.lowerCanvas.width) {
-                    width -= (destLeft + destWidth - parent.lowerCanvas.width);
-                }
-                if (destTop + destHeight > parent.lowerCanvas.height) {
-                    height -= (destTop + destHeight - parent.lowerCanvas.height);
-                }
+            if (destLeft + destWidth > parent.lowerCanvas.width) {
+                width -= (destLeft + destWidth - parent.lowerCanvas.width);
+            }
+            if (destTop + destHeight > parent.lowerCanvas.height) {
+                height -= (destTop + destHeight - parent.lowerCanvas.height);
             }
         }
         switch (parent.currObjType.shape.toLowerCase()) {
@@ -3219,7 +3217,7 @@ var Draw = /** @__PURE__ @class */ (function () {
                 parent.img.destHeight = maxDimension.width;
             }
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.height) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.width + 1) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.width) / 2;
             parent.img.destWidth = maxDimension.height;
             parent.img.destHeight = maxDimension.width;
         }
@@ -3235,7 +3233,12 @@ var Draw = /** @__PURE__ @class */ (function () {
                 parent.img.destHeight = maxDimension.height;
             }
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
+            if (degree === 0) {
+                parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
+            }
+            else {
+                parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
+            }
             parent.img.destWidth = maxDimension.width;
             parent.img.destHeight = maxDimension.height;
         }
@@ -3550,14 +3553,14 @@ var Draw = /** @__PURE__ @class */ (function () {
             parent.cancelCropSelection = null;
         }
     };
-    Draw.prototype.performCancel = function (isContextualToolbar) {
+    Draw.prototype.performCancel = function (isContextualToolbar, isUndoRedo) {
         var parent = this.parent;
         var straightenObj = { bool: parent.isStraightening };
         isContextualToolbar = isContextualToolbar ? isContextualToolbar : false;
         var obj = { bool: false };
         parent.allowDownScale = true;
         parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
-        if (JSON.stringify(parent.frameObj) !== JSON.stringify(parent.tempFrameObj)) {
+        if (isNullOrUndefined(isUndoRedo) && JSON.stringify(parent.frameObj) !== JSON.stringify(parent.tempFrameObj)) {
             extend(parent.frameObj, parent.tempFrameObj);
             this.renderImage(null, null, true);
         }
@@ -3631,11 +3634,19 @@ var Draw = /** @__PURE__ @class */ (function () {
             if (!isBlazor()) {
                 parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
                 parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
+                if (parent.activeObj.shape && parent.activeObj.shape === 'image') {
+                    parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                }
             }
             else {
                 parent.updateToolbar(parent.element, 'imageLoaded');
+                if (parent.activeObj.shape && parent.activeObj.shape === 'image') {
+                    parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
+                }
             }
             parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'cancel' } });
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         }
         else {
             if (isContextualToolbar && (!Browser.isDevice || (Browser.isDevice && !straightenObj['bool']))) {
@@ -4321,16 +4332,16 @@ var Draw = /** @__PURE__ @class */ (function () {
     Draw.prototype.setClientTransDim = function (isPreventDimension) {
         var parent = this.parent;
         if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
-            parent.img.destLeft = (parent.lowerCanvas.width - parent.img.destHeight) / 2;
-            parent.img.destTop = (parent.lowerCanvas.height - parent.img.destWidth) / 2;
+            parent.img.destLeft = (parent.lowerCanvas.clientWidth - parent.img.destHeight) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destWidth + 1) / 2;
             var temp = parent.img.destWidth;
             parent.img.destWidth = parent.img.destHeight;
             parent.img.destHeight = temp;
         }
         else {
             if (isNullOrUndefined(isPreventDimension)) {
-                parent.img.destLeft = (parent.lowerCanvas.width - parent.img.destWidth) / 2;
-                parent.img.destTop = (parent.lowerCanvas.height - parent.img.destHeight) / 2;
+                parent.img.destLeft = (parent.lowerCanvas.clientWidth - parent.img.destWidth) / 2;
+                parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destHeight + 1) / 2;
             }
         }
     };
@@ -5044,9 +5055,9 @@ var Draw = /** @__PURE__ @class */ (function () {
                         }
                     }
                 }
-                var panX = (parent.lowerCanvas.clientWidth / 2) - Math.floor(currObj.activePoint.startX +
+                var panX = (parent.lowerCanvas.clientWidth / 2) - (currObj.activePoint.startX +
                     (currObj.activePoint.width / 2));
-                var panY = (parent.lowerCanvas.clientHeight / 2) - Math.floor(currObj.activePoint.startY +
+                var panY = ((parent.lowerCanvas.clientHeight + 1) / 2) - (currObj.activePoint.startY +
                     (currObj.activePoint.height / 2));
                 if (isNullOrUndefined(parent.activeObj.shape)) {
                     parent.activeObj = extend({}, activeObj, {}, true);
@@ -12637,7 +12648,15 @@ var Selection = /** @__PURE__ @class */ (function () {
                     this.getCurrentFlipState();
                 }
                 else {
+                    var totalPannedInternalPoint = extend({}, parent.panPoint.totalPannedInternalPoint, {}, true);
+                    var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
+                        height: parent.img.destHeight };
                     parent.notify('draw', { prop: 'callUpdateCurrTransState', onPropertyChange: false });
+                    parent.panPoint.totalPannedInternalPoint = totalPannedInternalPoint;
+                    parent.img.destLeft = destPoints.startX;
+                    parent.img.destTop = destPoints.startY;
+                    parent.img.destWidth = destPoints.width;
+                    parent.img.destHeight = destPoints.height;
                     parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
                         value: { context: this.lowerContext, points: null } });
                 }
@@ -17848,11 +17867,11 @@ var Transform = /** @__PURE__ @class */ (function () {
             if (parent.img.destTop > 0) {
                 parent.img.destTop = 0;
             }
-            if (parent.img.destLeft + maxDimension.width < parent.lowerCanvas.width) {
-                parent.img.destLeft = parent.lowerCanvas.width - parent.img.destWidth;
+            if (parent.img.destLeft + maxDimension.width < parent.lowerCanvas.clientWidth) {
+                parent.img.destLeft = parent.lowerCanvas.clientWidth - parent.img.destWidth;
             }
-            if (parent.img.destTop + maxDimension.height < parent.lowerCanvas.height) {
-                parent.img.destTop = parent.lowerCanvas.height - parent.img.destHeight;
+            if (parent.img.destTop + maxDimension.height < parent.lowerCanvas.clientHeight) {
+                parent.img.destTop = parent.lowerCanvas.clientHeight - parent.img.destHeight;
             }
         }
         return maxDimension;
@@ -19079,9 +19098,7 @@ var Transform = /** @__PURE__ @class */ (function () {
             parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: null } });
         }
         parent.setStraighten(degree, true);
-        if ((isBlazor() && parent.events && parent.events.straightening.hasDelegate === false) || !isBlazor()) {
-            parent.okBtn();
-        }
+        parent.okBtn();
     };
     return Transform;
 }());
@@ -19469,7 +19486,7 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
                         this.tempCurrSelPoint = extend({}, parent.currSelectionPoint, {}, true);
                         parent.currSelectionPoint = null;
                     }
-                    parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
+                    parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null, isUndoRedo: true } });
                     parent.currObjType.isActiveObj = false;
                     if (parent.transform.straighten !== 0) {
                         parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
@@ -20032,6 +20049,16 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
         this.parent.notify('draw', { prop: 'getArrowDimension', onPropertyChange: false, value: { obj: arrowObj } });
         var tempArrowObj = extend({}, arrowObj['arrowDimension'], {}, true);
         if (parent.transform.zoomFactor > 0 && (obj.length > 0 || point.length > 0)) {
+            if (obj.length > 0) {
+                for (var i = 0; i < obj.length; i++) {
+                    if (obj[i].currIndex) {
+                        continue;
+                    }
+                    else {
+                        obj[i].currIndex = 'shape_' + (i + 1);
+                    }
+                }
+            }
             parent.objColl = obj;
             parent.pointColl = point;
             var isUndoRedo = parent.isUndoRedo;
@@ -24355,7 +24382,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             this.createLeftToolbarControls();
             var mToolbar = document.getElementById(id + '_toolbar');
             if (toolbar_1) {
-                this.toolbarHeight = mToolbar.scrollHeight;
+                this.toolbarHeight = mToolbar.clientHeight;
             }
         }
         else {
@@ -24658,10 +24685,10 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
         if (!isBlazor()) {
             if (parent.toolbarTemplate) {
-                this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').offsetHeight;
+                this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
             }
             else if (parent.element.querySelector('#' + parent.element.id + '_toolbar')) {
-                this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').offsetHeight;
+                this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').clientHeight;
             }
             parent.toolbarHeight = this.toolbarHeight;
         }
@@ -24672,7 +24699,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 cHt = cusWrapper.offsetHeight + 2;
             }
             var ht = parent.element.querySelector('#' + id + '_canvasWrapper').offsetHeight;
-            contextualToolbarArea.style.top = this.toolbarHeight + ht - cHt + 'px';
+            contextualToolbarArea.style.top = this.toolbarHeight + 1 + ht - cHt + 'px';
             if (cType === 'straighten') {
                 parent.isStraightening = true;
                 var ctxToolbar = parent.element.querySelector('#' + id + '_contextualToolbarArea');
@@ -24689,7 +24716,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             }
         }
         else {
-            contextualToolbarArea.style.top = this.toolbarHeight + 'px';
+            contextualToolbarArea.style.top = this.toolbarHeight + 1 + 'px';
         }
     };
     ToolbarModule.prototype.processToolbar = function (position) {
@@ -25513,8 +25540,8 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
         var slider = parent.element.querySelector('#' + id + '_straightenSlider');
         if ((isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Straightening') > -1))
-            && slider && slider.parentElement.scrollHeight > this.toolbarHeight) {
-            this.toolbarHeight = parent.toolbarHeight = slider.parentElement.scrollHeight;
+            && slider && slider.parentElement.clientHeight > this.toolbarHeight) {
+            this.toolbarHeight = parent.toolbarHeight = slider.parentElement.clientHeight;
         }
         this.enableDisableTbrBtn();
         parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
@@ -27557,6 +27584,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     qtArea.style.top = point.startY - (height + (height / 1.5)) + 'px';
                 }
             }
+            if (parseFloat(qtArea.style.top) < 0) {
+                qtArea.style.top = '0px';
+            }
         }
     };
     ToolbarModule.prototype.refreshDropDownBtn = function (isDisabled) {
@@ -28407,20 +28437,23 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         if (type === 'transparency') {
             labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
                 id: id + '_labelWrapper',
-                styles: Browser.isDevice ? 'position: absolute; top: 25%; left: calc(50% - 150px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
-                    : 'position: absolute; top: 25%; left: calc(50% - 250px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+                className: 'e-ie-finetune-slider-label',
+                styles: Browser.isDevice ? 'position: absolute; top: 31%; left: calc(50% - 150px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+                    : 'position: absolute; top: 31%; left: calc(50% - 220px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
             }));
         }
         else {
             labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
                 id: id + '_labelWrapper',
-                styles: Browser.isDevice ? ('position: absolute; top: 25%; left: calc(50% - 150px); font-size: 15px; text-transform: capitalize; font-weight: 400;')
+                className: 'e-ie-finetune-slider-label',
+                styles: Browser.isDevice ? ('position: absolute; top: 31%; left: calc(50% - 160px); font-size: 15px; text-transform: capitalize; font-weight: 400;')
                     : 'position: absolute; top: 25%; left: calc(50% - 226px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
             }));
         }
         labelWrapper.textContent = this.l10n.getConstant(parent.toPascalCase(type === 'transparency' ? 'opacity' : type));
         var sliderWrapper = hdrWrapper.appendChild(parent.createElement('div', {
             id: id + '_sliderWrapper',
+            className: 'e-ie-finetune-slider-wrap',
             styles: 'position: absolute'
         }));
         var value = parent.getCurrAdjustmentValue(type);
@@ -28499,8 +28532,8 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         if (type === 'straighten' && Browser.isDevice) {
             var sLabelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
                 id: id + '_sLabelWrapper',
-                className: 'e-ie-straighten-value-span',
-                styles: 'position: absolute; top: 25%; margin-left: 20px; font-size: 15px; text-transform: capitalize; font-weight: 400;'
+                className: 'e-ie-straighten-value-span e-ie-finetune-value-span',
+                styles: 'position: absolute; top: 31%; margin-left: 20px; font-size: 15px; text-transform: capitalize; font-weight: 400;'
             }));
             sLabelWrapper.innerHTML = parent.transform.straighten.toString() + '&#176';
             sliderWrapper.parentElement.classList.add('e-straighten-slider');
@@ -28513,6 +28546,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     'position: absolute; top: 25%; left: calc(50% + 190px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
             }));
             sliderWrapper.parentElement.classList.add('e-finetune-slider');
+            if (type === 'transparency' && Browser.isDevice) {
+                sliderWrapper.parentElement.classList.add('e-ie-device-transparency-slider');
+            }
             this.updateFinetuneSpan(type);
         }
     };