@syncfusion/ej2-image-editor 31.2.12 → 32.1.19

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

@@ -5000,7 +5000,7 @@ class Draw {
             this.errorLoading();
             parent.showDialogPopup('unsupported', fileTypeError);
             if (dropArea && !parent.isImageLoaded) {
-                dropArea.style.display = 'block';
+                dropArea.style.display = 'flex';
             }
         }
         else {
@@ -6379,12 +6379,8 @@ class Export {
             type = type ? type : 'Png';
             parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                 value: { x: null, y: null, isMouseDown: null } });
-            const imageQualityObj = { currentImageQuality: 1 };
-            if (type.toLowerCase() === 'jpeg') {
-                parent.notify('toolbar', { prop: 'getcurrentImageQuality', onPropertyChange: false, value: { obj: imageQualityObj } });
-            }
             const beforeSave = { cancel: false, fileName: fileName ? fileName : imageName,
-                fileType: type, imageQuality: imgQuality || imageQualityObj['currentImageQuality'] };
+                fileType: type, imageQuality: imgQuality };
             parent.trigger('beforeSave', beforeSave);
             this.beforeSaveEvent(beforeSave, type, fileName, imageName, imgQuality);
         }
@@ -8886,11 +8882,6 @@ class FreehandDrawing {
         const parent = this.parent;
         const point = parent.pointColl[this.fhdSelIdx];
         parent.trigger('shapeChanging', shapeChangingArgs);
-        if (shapeChangingArgs.cancel) {
-            parent.editCompleteArgs = shapeChangingArgs;
-            this.cancelFhd();
-            return;
-        }
         if (parent.element.getAttribute('data-value') === 'mask-drawing' && !this.isMasking) {
             this.isMasking = true;
             parent.upperCanvas.style.cursor = 'crosshair';
@@ -12158,6 +12149,10 @@ class Selection {
     }
     mouseDownEventHandler(e) {
         const parent = this.parent;
+        if (parent.isSafari && e.buttons === 0 && (this.parent.isShapeDrawing || this.parent.togglePen) && this.parent.drawingShape !== 'path') {
+            e.stopImmediatePropagation();
+            return;
+        }
         parent.isKBDNavigation = false;
         this.mouseDown = e.currentTarget === parent.lowerCanvas || e.currentTarget === parent.upperCanvas ?
             'canvas' : '';
@@ -12435,9 +12430,6 @@ class Selection {
                 const objColl = extend([], parent.objColl, [], true);
                 if (!isNullOrUndefined(obj['index']) && obj['index'] > -1) {
                     parent.notify('freehand-draw', { prop: 'selectFhd', value: { type: 'ok' } });
-                    if (!this.isFhdPoint) {
-                        return;
-                    }
                     parent.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
                         value: { strokeColor: null, strokeWidth: null } });
                     parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
@@ -12982,9 +12974,7 @@ class Selection {
                 this.currentDrawingShape = parent.drawingShape.toLowerCase();
                 if (dummyClick) {
                     parent.enableShapeDrawing(parent.toPascalCase(parent.drawingShape), true);
-                    if (parent.cursor !== 'move') {
-                        parent.upperCanvas.style.cursor = 'crosshair';
-                    }
+                    parent.upperCanvas.style.cursor = 'crosshair';
                 }
             }
             parent.isShapeDrawing = false;
@@ -14006,14 +13996,7 @@ class Selection {
                 }
                 if (!this.isCropSelection && parent.activeObj.shape !== 'redact') {
                     parent.trigger('shapeChanging', shapeChangingArgs);
-                    if (shapeChangingArgs.cancel) {
-                        parent.objColl.splice(i, 0, temp);
-                        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-                        parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
-                    }
-                    else {
-                        this.shapeEvent(shapeChangingArgs);
-                    }
+                    this.shapeEvent(shapeChangingArgs);
                     parent.editCompleteArgs = shapeChangingArgs;
                 }
                 else {
@@ -14682,7 +14665,6 @@ class Shape {
         this.keyHistory = ''; // text history
         this.preventFrameAnnotation = false;
         this.redactType = 'blur';
-        this.isPublicUpdateShape = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -14956,9 +14938,6 @@ class Shape {
             case 'setRedactType':
                 this.redactType = args.value['redactType'];
                 break;
-            case 'setPublicUpdateShape':
-                this.isPublicUpdateShape = args.value['isPublicUpdateShape'];
-                break;
         }
     }
     getModuleName() {
@@ -14985,7 +14964,7 @@ class Shape {
         this.textSettings =
             { text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false, strikethrough: false };
         this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, radius: null, outlineColor: '', outlineWidth: null };
-        this.preventFrameAnnotation = this.isPublicUpdateShape = false;
+        this.preventFrameAnnotation = false;
     }
     drawEllipse(x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree, isSelected) {
         this.initializeShape('ellipse');
@@ -15698,7 +15677,7 @@ class Shape {
         }
         parent.notify('selection', { prop: 'setTextSelection', onPropertyChange: false,
             value: { width: width, height: height } });
-        if (parent.activeObj.rotatedAngle !== 0 && !this.isPublicUpdateShape) {
+        if (parent.activeObj.rotatedAngle !== 0) {
             const width = parent.activeObj.activePoint.width - tempActiveObj.activePoint.width;
             const height = parent.activeObj.activePoint.height - tempActiveObj.activePoint.height;
             let value = '';
@@ -15717,20 +15696,6 @@ class Shape {
             parent.notify('shape', { prop: 'updateFontSize', onPropertyChange: false,
                 value: { obj: parent.activeObj } });
         }
-        else if (this.isPublicUpdateShape) {
-            const width = parent.activeObj.activePoint.width - tempActiveObj.activePoint.width;
-            const height = parent.activeObj.activePoint.height - tempActiveObj.activePoint.height;
-            let value = '';
-            if (parent.transform.degree === 0 || parent.transform.degree === 180) {
-                value = 'width';
-            }
-            else if (parent.transform.degree === 90 || parent.transform.degree === 270) {
-                value = 'height';
-            }
-            parent.activeObj.activePoint = extend({}, tempActiveObj.activePoint, {}, true);
-            parent.notify('selection', { prop: 'adjustRotationPoints', onPropertyChange: false, value: { rectangle: parent.activeObj.activePoint,
-                    x: width, y: height, angle: parent.activeObj.rotatedAngle, type: 'text', elem: value } });
-        }
         parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: parent.activeObj.activePoint, obj: parent.activeObj,
                 isMouseMove: null, x: null, y: null } });
         this.updImgRatioForActObj();
@@ -23275,12 +23240,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const dropAreaElement = this.createElement('div', { id: this.element.id + '_dropArea', className: 'e-ie-drop-area' });
         dropAreaElement.style.position = 'relative';
         const dropIconElement = this.createElement('span', { className: 'e-ie-drop-icon e-icons e-image' });
-        dropIconElement.style.position = 'absolute';
         const dropContentElement = this.createElement('span', { className: 'e-ie-drop-content' });
-        dropContentElement.style.cssText = 'position: absolute; display: none;';
+        dropContentElement.style.cssText = 'display: none;';
         dropContentElement.textContent = dragObj['value'] + ' ';
         const minDropContentElem = this.createElement('span', { className: 'e-ie-min-drop-content' });
-        minDropContentElem.style.position = 'absolute';
         minDropContentElem.textContent = dropObj['value'] + ' ';
         const dropAnchorElement = this.createElement('a', { id: this.element.id + '_dropBrowse', className: 'e-ie-drop-browse' });
         dropAnchorElement.textContent = browseObj['value'];
@@ -23290,7 +23253,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         minDropContentElem.appendChild(minDropAnchorElem);
         dropAnchorElement.href = '';
         minDropAnchorElem.href = '';
-        const dropInfoElement = this.createElement('span', { className: 'e-ie-drop-info', attrs: { position: 'absolute' } });
+        const dropInfoElement = this.createElement('span', { className: 'e-ie-drop-info' });
         this.updateDropInfoContent(dropInfoElement);
         const dropUploader = dropAreaElement.appendChild(this.createElement('input', {
             id: this.element.id + '_dropfileUpload', className: 'e-fileUpload e-image-upload'
@@ -24154,9 +24117,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      *
      */
     updateShape(setting, isSelected) {
-        if (setting.type.toLowerCase() === 'text') {
-            this.notify('shape', { prop: 'setPublicUpdateShape', onPropertyChange: false, value: { isPublicUpdateShape: true } });
-        }
         const obj = { isSelected: false };
         let isTextArea = false;
         const freehandObj = { bool: false };
@@ -24228,9 +24188,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 }
             }
         }
-        if (setting.type.toLowerCase() === 'text') {
-            this.notify('shape', { prop: 'setPublicUpdateShape', onPropertyChange: false, value: { isPublicUpdateShape: false } });
-        }
         return obj['isSelected'];
     }
     /**
@@ -24861,7 +24818,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('toolbar', { prop: 'create-contextual-toolbar', onPropertyChange: false });
         const dropArea = document.getElementById(this.element.id + '_dropArea');
         if (dropArea) {
-            dropArea.style.display = 'block';
+            dropArea.style.display = 'flex';
         }
     }
     // AI related codes
@@ -27925,9 +27882,6 @@ class ToolbarModule {
             case 'getToolbarHeight':
                 args.value['obj']['toolbarHeight'] = this.toolbarHeight;
                 break;
-            case 'getcurrentImageQuality':
-                args.value['obj']['currentImageQuality'] = this.currentQuality;
-                break;
             case 'setToolbarHeight':
                 if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0 && parent.toolbar.indexOf('Open') > -1)) {
                     this.toolbarHeight = args.value['height'];
@@ -28842,17 +28796,17 @@ class ToolbarModule {
         }
         const frame = document.querySelector('#' + id + '_frame');
         if (frame && ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop)) {
-            frame.classList.add('e-overlay');
+            frame.parentElement.classList.add('e-overlay');
         }
         else if (frame) {
-            frame.classList.remove('e-overlay');
+            frame.parentElement.classList.remove('e-overlay');
         }
         const ratio = document.querySelector('#' + id + '_aspectratio');
         if (ratio && ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop)) {
-            ratio.classList.add('e-overlay');
+            ratio.parentElement.classList.add('e-overlay');
         }
         else if (ratio) {
-            ratio.classList.remove('e-overlay');
+            ratio.parentElement.classList.remove('e-overlay');
         }
     }
     createLeftToolbarControls() {
@@ -29085,34 +29039,34 @@ class ToolbarModule {
                 && parent.activeObj.pointColl.length === 0)) &&
             isNullOrUndefined(obj['freehandDrawSelectedId'])) {
             if (duplicateElement) {
-                duplicateElement.classList.add('e-overlay');
+                duplicateElement.parentElement.classList.add('e-overlay');
             }
             if (removeElement) {
-                removeElement.classList.add('e-overlay');
+                removeElement.parentElement.classList.add('e-overlay');
             }
             if (editTextElement) {
-                editTextElement.classList.add('e-overlay');
+                editTextElement.parentElement.classList.add('e-overlay');
             }
             if (zOrderElement) {
-                zOrderElement.classList.add('e-overlay');
+                zOrderElement.parentElement.classList.add('e-overlay');
             }
         }
         else {
             if (duplicateElement) {
-                duplicateElement.classList.remove('e-overlay');
+                duplicateElement.parentElement.classList.remove('e-overlay');
             }
             if (removeElement) {
-                removeElement.classList.remove('e-overlay');
+                removeElement.parentElement.classList.remove('e-overlay');
             }
             if (editTextElement) {
-                editTextElement.classList.remove('e-overlay');
+                editTextElement.parentElement.classList.remove('e-overlay');
             }
             if (zOrderElement) {
-                zOrderElement.classList.remove('e-overlay');
+                zOrderElement.parentElement.classList.remove('e-overlay');
             }
         }
         if (zOrderElement && (parent.shapeColl.length === 0 || (obj['freehandDrawSelectedId'] && parent.shapeColl.length === 1))) {
-            zOrderElement.classList.add('e-overlay');
+            zOrderElement.parentElement.classList.add('e-overlay');
         }
     }
     renderStraightenSlider() {
@@ -30981,7 +30935,7 @@ class ToolbarModule {
                     const drawingObject = { shape: '' };
                     parent.notify('selection', { prop: 'getCurrentDrawingShape', onPropertyChange: false, value: { obj: drawingObject } });
                     if (drawingObject['shape'] === 'path' && okBtn) {
-                        okBtn.classList.add('e-overlay');
+                        okBtn.parentElement.classList.add('e-overlay');
                     }
                 }
                 if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'path') {
@@ -32461,11 +32415,11 @@ class ToolbarModule {
                 const orderObj = { order: null };
                 parent.notify('shape', { prop: 'getHighestOrder', onPropertyChange: false, value: { obj: orderObj } });
                 if (parent.activeObj.order > orderObj['order'] && document.getElementById(parent.element.id + '_bringToFront')) {
-                    document.getElementById(parent.element.id + '_bringToFront').classList.add('e-overlay');
+                    document.getElementById(parent.element.id + '_bringToFront').parentElement.classList.add('e-overlay');
                 }
                 else {
                     if (document.getElementById(parent.element.id + '_bringToFront')) {
-                        document.getElementById(parent.element.id + '_bringToFront').classList.remove('e-overlay');
+                        document.getElementById(parent.element.id + '_bringToFront').parentElement.classList.remove('e-overlay');
                     }
                 }
                 qtArea.style.width = 'auto';
@@ -32519,11 +32473,11 @@ class ToolbarModule {
                 parent.notify('shape', { prop: 'getHighestOrder', onPropertyChange: false, value: { obj: orderObj } });
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if (parent.getObjFromId(parent.pointColl[indexObj['freehandSelectedIndex']].id).order >= orderObj['order'] && document.getElementById(parent.element.id + '_bringToFront')) {
-                    document.getElementById(parent.element.id + '_bringToFront').classList.add('e-overlay');
+                    document.getElementById(parent.element.id + '_bringToFront').parentElement.classList.add('e-overlay');
                 }
                 else {
                     if (document.getElementById(parent.element.id + '_bringToFront')) {
-                        document.getElementById(parent.element.id + '_bringToFront').classList.remove('e-overlay');
+                        document.getElementById(parent.element.id + '_bringToFront').parentElement.classList.remove('e-overlay');
                     }
                 }
                 const obj = { activePoint: null };
@@ -32689,32 +32643,30 @@ class ToolbarModule {
                     parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                     break;
                 case 'bringtofront':
-                    if (!parent.element.querySelector('#' + id + '_bringToFront').classList.contains('e-overlay')) {
-                        parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
-                        shapeId = indexObj['freehandSelectedIndex'] !== null ? parent.pointColl[indexObj['freehandSelectedIndex']].id :
-                            parent.activeObj.currIndex;
-                        parent.updateShapeOrder(shapeId, type);
-                        isDisabled = false;
-                        parent.notify('shape', { prop: 'getHighestOrder', onPropertyChange: false, value: { obj: orderObj } });
-                        if (shapeId.indexOf('pen') > -1) {
-                            parent.notify('shape', { prop: 'updateShapeColl', onPropertyChange: false });
-                            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            const order = parent.getObjFromId(shapeId).order;
-                            isDisabled = order >= orderObj['order'] ? true : false;
-                        }
-                        else {
-                            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            const order = parent.getObjFromId(shapeId).order;
-                            isDisabled = order > orderObj['order'] ? true : false;
-                        }
-                        if (isDisabled) {
-                            document.getElementById(parent.element.id + '_bringToFront').classList.add('e-overlay');
-                        }
-                        else {
-                            document.getElementById(parent.element.id + '_bringToFront').classList.remove('e-overlay');
-                        }
-                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                    parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
+                    shapeId = indexObj['freehandSelectedIndex'] !== null ? parent.pointColl[indexObj['freehandSelectedIndex']].id :
+                        parent.activeObj.currIndex;
+                    parent.updateShapeOrder(shapeId, type);
+                    isDisabled = false;
+                    parent.notify('shape', { prop: 'getHighestOrder', onPropertyChange: false, value: { obj: orderObj } });
+                    if (shapeId.indexOf('pen') > -1) {
+                        parent.notify('shape', { prop: 'updateShapeColl', onPropertyChange: false });
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        const order = parent.getObjFromId(shapeId).order;
+                        isDisabled = order >= orderObj['order'] ? true : false;
+                    }
+                    else {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        const order = parent.getObjFromId(shapeId).order;
+                        isDisabled = order > orderObj['order'] ? true : false;
+                    }
+                    if (isDisabled) {
+                        document.getElementById(parent.element.id + '_bringToFront').parentElement.classList.add('e-overlay');
                     }
+                    else {
+                        document.getElementById(parent.element.id + '_bringToFront').parentElement.classList.remove('e-overlay');
+                    }
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                     break;
             }
             if (type === 'duplicate' || type === 'remove') {
@@ -33659,29 +33611,25 @@ class ToolbarModule {
         }
         hdrWrapper = canvasWrapper.appendChild(parent.createElement('div', {
             id: id + '_headWrapper',
+            className: 'e-ie-head-wrapper',
             styles: 'position: relative'
         }));
         if (type === 'transparency') {
             labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
                 id: id + '_labelWrapper',
-                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;'
+                className: 'e-ie-finetune-slider-label'
             }));
         }
         else {
             labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
                 id: id + '_labelWrapper',
-                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;'
+                className: 'e-ie-finetune-slider-label'
             }));
         }
         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'
+            className: 'e-ie-finetune-slider-wrap'
         }));
         let value = parent.getCurrAdjustmentValue(type);
         if (isSelect && type === 'straighten' && Browser.isDevice) {
@@ -33759,8 +33707,7 @@ class ToolbarModule {
         if (type === 'straighten' && Browser.isDevice) {
             const sLabelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
                 id: id + '_sLabelWrapper',
-                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;'
+                className: 'e-ie-straighten-value-span e-ie-finetune-value-span'
             }));
             sLabelWrapper.innerHTML = parent.transform.straighten.toString() + '&#176';
             sliderWrapper.parentElement.classList.add('e-straighten-slider');
@@ -33768,9 +33715,7 @@ class ToolbarModule {
         if (type !== 'straighten') {
             hdrWrapper.appendChild(parent.createElement('label', {
                 id: id + '_finetuneSpan',
-                className: 'e-ie-finetune-value-span',
-                styles: Browser.isDevice ? ('position: absolute; top: 25%; margin-left: 20px; font-size: 15px; text-transform: capitalize; font-weight: 400;') :
-                    'position: absolute; top: 25%; left: calc(50% + 190px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+                className: 'e-ie-finetune-value-span'
             }));
             sliderWrapper.parentElement.classList.add('e-finetune-slider');
             if (type === 'transparency' && Browser.isDevice) {
@@ -34284,26 +34229,22 @@ class ToolbarModule {
         }
         hdrWrapper = canvasWrapper.appendChild(parent.createElement('div', {
             id: id + '_headWrapper',
+            className: 'e-ie-head-wrapper',
             styles: 'position: relative'
         }));
         labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
             id: id + '_labelWrapper',
-            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;'
+            className: 'e-ie-finetune-slider-label'
         }));
         const text = type === 'blur' ? this.l10n.getConstant('Blur') : this.l10n.getConstant('PixelSize');
         labelWrapper.textContent = text;
         const sliderWrapper = hdrWrapper.appendChild(parent.createElement('div', {
             id: id + '_sliderWrapper',
-            className: 'e-ie-finetune-slider-wrap',
-            styles: 'position: absolute'
+            className: 'e-ie-finetune-slider-wrap'
         }));
         hdrWrapper.appendChild(parent.createElement('label', {
             id: id + '_redactSpan',
-            className: 'e-ie-redact-value-span',
-            styles: Browser.isDevice ? ('position: absolute; top: 30%; margin-left: 20px; font-size: 15px; text-transform: capitalize; font-weight: 400;') :
-                'position: absolute; top: 30%; left: calc(50% + 190px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+            className: 'e-ie-redact-value-span'
         }));
         sliderWrapper.parentElement.classList.add('e-finetune-slider');
         const value = parent.activeObj.redactType === 'blur' ? parent.activeObj.redactBlur :
@@ -34343,6 +34284,9 @@ class ToolbarModule {
             const ht = parent.element.querySelector('#' + id + '_canvasWrapper').offsetHeight;
             contextualToolbarArea.style.top = this.toolbarHeight + 1 + ht - cHt + 'px';
         }
+        else {
+            contextualToolbarArea.style.top = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight + 'px';
+        }
     }
 }