@syncfusion/ej2-image-editor 24.1.44 → 24.1.45

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

@@ -3630,11 +3630,19 @@ class Draw {
             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']))) {
@@ -5042,9 +5050,9 @@ class Draw {
                         }
                     }
                 }
-                const panX = (parent.lowerCanvas.clientWidth / 2) - Math.floor(currObj.activePoint.startX +
+                const panX = (parent.lowerCanvas.clientWidth / 2) - (currObj.activePoint.startX +
                     (currObj.activePoint.width / 2));
-                const panY = (parent.lowerCanvas.clientHeight / 2) - Math.floor(currObj.activePoint.startY +
+                const panY = ((parent.lowerCanvas.clientHeight + 1) / 2) - (currObj.activePoint.startY +
                     (currObj.activePoint.height / 2));
                 if (isNullOrUndefined(parent.activeObj.shape)) {
                     parent.activeObj = extend({}, activeObj, {}, true);
@@ -19053,9 +19061,7 @@ class Transform {
             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();
     }
 }
 
@@ -24295,7 +24301,7 @@ class ToolbarModule {
             this.createLeftToolbarControls();
             const mToolbar = document.getElementById(id + '_toolbar');
             if (toolbar) {
-                this.toolbarHeight = mToolbar.scrollHeight;
+                this.toolbarHeight = mToolbar.clientHeight;
             }
         }
         else {
@@ -24596,10 +24602,10 @@ class ToolbarModule {
         }
         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;
         }
@@ -24610,7 +24616,7 @@ class ToolbarModule {
                 cHt = cusWrapper.offsetHeight + 2;
             }
             const 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;
                 const ctxToolbar = parent.element.querySelector('#' + id + '_contextualToolbarArea');
@@ -24627,7 +24633,7 @@ class ToolbarModule {
             }
         }
         else {
-            contextualToolbarArea.style.top = this.toolbarHeight + 'px';
+            contextualToolbarArea.style.top = this.toolbarHeight + 1 + 'px';
         }
     }
     processToolbar(position) {
@@ -25447,8 +25453,8 @@ class ToolbarModule {
         }
         const 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 } });
@@ -28335,20 +28341,23 @@ class ToolbarModule {
         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));
         const sliderWrapper = hdrWrapper.appendChild(parent.createElement('div', {
             id: id + '_sliderWrapper',
+            className: 'e-ie-finetune-slider-wrap',
             styles: 'position: absolute'
         }));
         let value = parent.getCurrAdjustmentValue(type);
@@ -28427,8 +28436,8 @@ class ToolbarModule {
         if (type === 'straighten' && Browser.isDevice) {
             const 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');
@@ -28441,6 +28450,9 @@ class ToolbarModule {
                     '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);
         }
     }