@syncfusion/ej2-image-editor 24.2.3 → 24.2.5

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

@@ -4761,7 +4761,8 @@ var Draw = /** @__PURE__ @class */ (function () {
         if (!isBlazor()) {
             parent.notify('toolbar', { prop: 'getDefToolbarItems', value: { obj: obj } });
             if (obj['defToolbarItems'].length === 0 &&
-                (isNullOrUndefined(document.getElementById(id + '_toolbar')))) {
+                (isNullOrUndefined(document.getElementById(id + '_toolbar'))) &&
+                parent.element.querySelector('#' + id + '_toolbarArea')) {
                 var height = parent.element.querySelector('#' + id + '_toolbarArea').clientHeight;
                 parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: height } });
             }
@@ -8321,6 +8322,8 @@ var Selection = /** @__PURE__ @class */ (function () {
         this.isImageClarity = true;
         this.isPinching = false;
         this.isSliding = false;
+        this.mouseDown = '';
+        this.isSliderActive = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -8563,6 +8566,12 @@ var Selection = /** @__PURE__ @class */ (function () {
             case 'setSliding':
                 this.isSliding = args.value['bool'];
                 break;
+            case 'setSliderActive':
+                this.isSliderActive = args.value['bool'];
+                break;
+            case 'getArrowType':
+                args.value['obj']['type'] = this.getArrowType(args.value['type']);
+                break;
         }
     };
     Selection.prototype.getModuleName = function () {
@@ -8609,6 +8618,8 @@ var Selection = /** @__PURE__ @class */ (function () {
         this.currentDrawingShape = '';
         this.initialPrevObj = {};
         this.resizedElement = '';
+        this.mouseDown = '';
+        this.isSliderActive = false;
     };
     Selection.prototype.performTabAction = function () {
         var parent = this.parent;
@@ -11027,6 +11038,8 @@ var Selection = /** @__PURE__ @class */ (function () {
     Selection.prototype.mouseDownEventHandler = function (e) {
         var _this = this;
         var parent = this.parent;
+        this.mouseDown = e.currentTarget === parent.lowerCanvas || e.currentTarget === parent.upperCanvas ?
+            'canvas' : '';
         if (e.type === 'touchstart') {
             this.isTouch = true;
         }
@@ -11464,267 +11477,273 @@ var Selection = /** @__PURE__ @class */ (function () {
                 && !parent.element.querySelector('#' + id + '_headWrapper').parentElement.classList.contains('e-hide')))) {
             return;
         }
-        if (e.type === 'touchstart') {
-            this.isTouch = false;
-        }
-        else if (e.type === 'touchend') {
-            e.stopImmediatePropagation();
-        }
-        e.preventDefault();
-        if (parent.togglePan) {
-            this.canvasMouseUpHandler(e);
-        }
-        var x;
-        var y;
-        if (e.type === 'mouseup') {
-            x = e.clientX;
-            y = e.clientY;
-        }
-        else {
-            x = this.touchEndPoint.x;
-            y = this.touchEndPoint.y;
-        }
-        var bbox = parent.lowerCanvas.getBoundingClientRect();
-        x -= bbox.left;
-        y -= bbox.top;
-        if (e.type === 'touchend') {
-            this.startTouches = this.tempTouches = [];
-            this.isFirstMove = false;
-            if (parent.textArea.style.display === 'none') {
-                this.timer = 0;
+        if (this.mouseDown === 'canvas' || this.isSliderActive ||
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            e.target.closest('.e-image-editor') || e.target.closest('.e-ie-ddb-popup')) {
+            if (e.type === 'touchstart') {
+                this.isTouch = false;
             }
-            if (this.isPinching) {
-                this.isPinching = false;
-                parent.notify('draw', { prop: 'redrawDownScale' });
-                if (parent.isCropTab || parent.activeObj.shape) {
-                    parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
-                    parent.notify('freehand-draw', { prop: 'resetStraightenPoint' });
-                }
-                if (parent.isStraightening) {
-                    parent.notify('draw', { prop: 'resetStraightenDestPoints' });
-                    parent.notify('draw', { prop: 'setDestForStraighten' });
-                }
-                return;
+            else if (e.type === 'touchend') {
+                e.stopImmediatePropagation();
             }
-        }
-        var isCropSelection = false;
-        var splitWords;
-        if (parent.activeObj.shape !== undefined) {
-            splitWords = parent.activeObj.shape.split('-');
-        }
-        if (splitWords !== undefined && splitWords[0] === 'crop') {
-            isCropSelection = true;
-        }
-        if (isBlazor() && parent.eventType) {
-            if (parent.eventType === 'pan') {
-                if (parent.events && parent.events.onPanEnd.hasDelegate === true) {
-                    parent.dotNetRef.invokeMethodAsync('PanEventAsync', 'OnPanEnd', parent.panEventArgs);
-                }
+            e.preventDefault();
+            if (parent.togglePan) {
+                this.canvasMouseUpHandler(e);
             }
-            else if (parent.eventType === 'resize') {
-                if (!this.isCropSelection && parent.events && parent.events.onShapeResizeEnd.hasDelegate === true) {
-                    this.shapeResizingArgs.currentShapeSettings = this.updatePrevShapeSettings();
-                    this.shapeResizingArgs.action = this.currentDrawingShape !== '' ? 'drawing' : 'resize-end';
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeResizeEnd', this.shapeResizingArgs, null).then(function (shapeResizingArgs) {
-                        parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                            value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
-                    });
-                }
-                else if (this.shapeResizingArgs && this.selectionResizingArgs && parent.events &&
-                    parent.events.onSelectionResizeEnd.hasDelegate === true) {
-                    var currentSelectionSettings = { type: parent.activeObj.shape,
-                        startX: this.shapeResizingArgs.currentShapeSettings.startX,
-                        startY: this.shapeResizingArgs.currentShapeSettings.startY,
-                        width: this.shapeResizingArgs.currentShapeSettings.width,
-                        height: this.shapeResizingArgs.currentShapeSettings.height };
-                    this.selectionResizingArgs.currentSelectionSettings = currentSelectionSettings;
-                    this.selectionResizingArgs.action = 'resize-end';
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    parent.dotNetRef.invokeMethodAsync('SelectionEventAsync', 'OnSelectionResizeEnd', this.selectionResizingArgs).then(function (selectionResizingArgs) {
-                        parent.notify('shape', { prop: 'updateSelectionChangeEventArgs', onPropertyChange: false,
-                            value: { selectionSettings: selectionResizingArgs.currentSelectionSettings } });
-                    });
-                }
+            var x = void 0;
+            var y = void 0;
+            if (e.type === 'mouseup') {
+                x = e.clientX;
+                y = e.clientY;
             }
             else {
-                if (this.shapeMovingArgs && parent.events && parent.events.onShapeDragEnd.hasDelegate === true) {
-                    this.shapeMovingArgs.currentShapeSettings = this.updatePrevShapeSettings();
-                    this.shapeMovingArgs.action = 'drag-end';
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeDragEnd', this.shapeMovingArgs, null).then(function (shapeMovingArgs) {
-                        parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                            value: { shapeSettings: shapeMovingArgs.currentShapeSettings } });
-                    });
+                x = this.touchEndPoint.x;
+                y = this.touchEndPoint.y;
+            }
+            var bbox = parent.lowerCanvas.getBoundingClientRect();
+            x -= bbox.left;
+            y -= bbox.top;
+            if (e.type === 'touchend') {
+                this.startTouches = this.tempTouches = [];
+                this.isFirstMove = false;
+                if (parent.textArea.style.display === 'none') {
+                    this.timer = 0;
+                }
+                if (this.isPinching) {
+                    this.isPinching = false;
+                    parent.notify('draw', { prop: 'redrawDownScale' });
+                    if (parent.isCropTab || parent.activeObj.shape) {
+                        parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
+                        parent.notify('freehand-draw', { prop: 'resetStraightenPoint' });
+                    }
+                    if (parent.isStraightening) {
+                        parent.notify('draw', { prop: 'resetStraightenDestPoints' });
+                        parent.notify('draw', { prop: 'setDestForStraighten' });
+                    }
+                    return;
                 }
             }
-            this.shapeResizingArgs = null;
-            this.shapeMovingArgs = null;
-            parent.panEventArgs = null;
-            parent.eventType = null;
-        }
-        if (this.currentDrawingShape === 'path') {
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            var elem = e.srcElement;
-            var elemId = elem.parentElement.id;
-            var id_1 = parent.element.id;
-            if (e.currentTarget !== parent.upperCanvas && e.currentTarget !== parent.lowerCanvas && parent.activeObj.pointColl.length > 0 &&
-                (elem.classList.contains('e-upload-icon') || elemId === id_1 + '_zoomIn' ||
-                    elemId === id_1 + '_zoomOut' || elemId === id_1 + '_annotationBtn' ||
-                    elemId === id_1 + '_borderColorBtn' || elemId === id_1 + '_borderWidthBtn' || elemId === id_1 + '_saveBtn')) {
-                parent.notify('shape', { prop: 'stopPathDrawing', onPropertyChange: false, value: { e: e, isApply: true } });
-                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-                parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj, isCropRatio: null,
-                        points: null, isPreventDrag: true, saveContext: null, isPreventSelection: true } });
+            var isCropSelection = false;
+            var splitWords = void 0;
+            if (parent.activeObj.shape !== undefined) {
+                splitWords = parent.activeObj.shape.split('-');
             }
-            return;
-        }
-        if (e.currentTarget === parent.upperCanvas && !parent.isResize) {
-            this.pathAdjustedIndex = null;
-            if (this.currentDrawingShape !== '') {
-                if (this.currentDrawingShape === 'text') {
-                    var prevCropObj_1 = extend({}, parent.cropObj, {}, true);
-                    parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-                        value: { operation: 'shapeInsert', previousObj: this.initialPrevObj, previousObjColl: this.initialPrevObj.objColl,
-                            previousPointColl: this.initialPrevObj.pointColl, previousSelPointColl: this.initialPrevObj.selPointColl,
-                            previousCropObj: prevCropObj_1, previousText: null,
-                            currentText: null, previousFilter: null, isCircleCrop: null } });
+            if (splitWords !== undefined && splitWords[0] === 'crop') {
+                isCropSelection = true;
+            }
+            if (isBlazor() && parent.eventType) {
+                if (parent.eventType === 'pan') {
+                    if (parent.events && parent.events.onPanEnd.hasDelegate === true) {
+                        parent.dotNetRef.invokeMethodAsync('PanEventAsync', 'OnPanEnd', parent.panEventArgs);
+                    }
                 }
-                else {
-                    parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: this.initialPrevObj.objColl, operation: 'shapeInsert' } });
-                }
-                this.isShapeInserted = true;
-                this.currentDrawingShape = '';
-                if (parent.activeObj.activePoint.width === 0 && parent.activeObj.activePoint.height === 0) {
-                    parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
-                }
-                var previousShapeSettings = this.updatePrevShapeSettings();
-                var shapeResizingArgs = { cancel: false, action: 'draw-end', previousShapeSettings: previousShapeSettings };
-                var shapeMovingArgs = { cancel: false, action: 'move', previousShapeSettings: previousShapeSettings };
-                this.shapeResizingArgs = shapeResizingArgs;
-                this.shapeMovingArgs = shapeMovingArgs;
-                this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-up');
-            }
-            this.adjustActObjForLineArrow();
-            this.updPtCollForShpRot();
-            parent.currObjType.shape = parent.currObjType.shape.toLowerCase();
-            var prevCropObj = extend({}, parent.cropObj, {}, true);
-            var object = { currObj: {} };
-            parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
-            var prevObj = object['currObj'];
-            prevObj.objColl = extend([], parent.objColl, [], true);
-            prevObj.pointColl = extend([], parent.pointColl, [], true);
-            prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
-            var selPointCollObj = { selPointColl: null };
-            parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
-                value: { obj: selPointCollObj } });
-            prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-            if (!parent.togglePen && !isCropSelection) {
-                if (this.tempObjColl && parent.activeObj.activePoint.width !== 0) {
-                    parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
-                    parent.objColl.push(parent.activeObj);
-                    if (JSON.stringify(parent.activeObj.activePoint) !== JSON.stringify(this.tempActiveObj.activePoint)) {
-                        parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-                            value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: this.tempObjColl,
-                                previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
-                                previousCropObj: prevCropObj, previousText: null,
-                                currentText: null, previousFilter: null, isCircleCrop: null } });
+                else if (parent.eventType === 'resize') {
+                    if (!this.isCropSelection && parent.events && parent.events.onShapeResizeEnd.hasDelegate === true) {
+                        this.shapeResizingArgs.currentShapeSettings = this.updatePrevShapeSettings();
+                        this.shapeResizingArgs.action = this.currentDrawingShape !== '' ? 'drawing' : 'resize-end';
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeResizeEnd', this.shapeResizingArgs, null).then(function (shapeResizingArgs) {
+                            parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
+                                value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
+                        });
+                    }
+                    else if (this.shapeResizingArgs && this.selectionResizingArgs && parent.events &&
+                        parent.events.onSelectionResizeEnd.hasDelegate === true) {
+                        var currentSelectionSettings = { type: parent.activeObj.shape,
+                            startX: this.shapeResizingArgs.currentShapeSettings.startX,
+                            startY: this.shapeResizingArgs.currentShapeSettings.startY,
+                            width: this.shapeResizingArgs.currentShapeSettings.width,
+                            height: this.shapeResizingArgs.currentShapeSettings.height };
+                        this.selectionResizingArgs.currentSelectionSettings = currentSelectionSettings;
+                        this.selectionResizingArgs.action = 'resize-end';
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        parent.dotNetRef.invokeMethodAsync('SelectionEventAsync', 'OnSelectionResizeEnd', this.selectionResizingArgs).then(function (selectionResizingArgs) {
+                            parent.notify('shape', { prop: 'updateSelectionChangeEventArgs', onPropertyChange: false,
+                                value: { selectionSettings: selectionResizingArgs.currentSelectionSettings } });
+                        });
                     }
-                    this.redrawShape(parent.objColl[parent.objColl.length - 1], true);
-                    this.tempObjColl = undefined;
                 }
-                if (!this.isFhdEditing) {
-                    this.applyCurrActObj(x, y);
-                    parent.currObjType.isResize = false;
-                    if (!isBlazor()) {
-                        parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                else {
+                    if (this.shapeMovingArgs && parent.events && parent.events.onShapeDragEnd.hasDelegate === true) {
+                        this.shapeMovingArgs.currentShapeSettings = this.updatePrevShapeSettings();
+                        this.shapeMovingArgs.action = 'drag-end';
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeDragEnd', this.shapeMovingArgs, null).then(function (shapeMovingArgs) {
+                            parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
+                                value: { shapeSettings: shapeMovingArgs.currentShapeSettings } });
+                        });
                     }
                 }
+                this.shapeResizingArgs = null;
+                this.shapeMovingArgs = null;
+                parent.panEventArgs = null;
+                parent.eventType = null;
             }
-            if (parent.activeObj) {
-                var isCropSelection_1 = false;
-                var splitWords_1;
-                if (parent.activeObj.shape !== undefined) {
-                    splitWords_1 = parent.activeObj.shape.split('-');
-                }
-                if (splitWords_1 === undefined && (parent.currObjType.isCustomCrop || parent.togglePen)) {
-                    isCropSelection_1 = true;
+            if (this.currentDrawingShape === 'path') {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                var elem = e.srcElement;
+                var elemId = elem.parentElement.id;
+                var id_1 = parent.element.id;
+                if (e.currentTarget !== parent.upperCanvas && e.currentTarget !== parent.lowerCanvas && parent.activeObj.pointColl.length > 0 &&
+                    (elem.classList.contains('e-upload-icon') || elemId === id_1 + '_zoomIn' ||
+                        elemId === id_1 + '_zoomOut' || elemId === id_1 + '_annotationBtn' ||
+                        elemId === id_1 + '_borderColorBtn' || elemId === id_1 + '_borderWidthBtn' || elemId === id_1 + '_saveBtn')) {
+                    parent.notify('shape', { prop: 'stopPathDrawing', onPropertyChange: false, value: { e: e, isApply: true } });
+                    this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                    parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj, isCropRatio: null,
+                            points: null, isPreventDrag: true, saveContext: null, isPreventSelection: true } });
                 }
-                else if (splitWords_1 !== undefined && splitWords_1[0] === 'crop') {
-                    isCropSelection_1 = true;
+                return;
+            }
+            if (e.currentTarget === parent.upperCanvas && !parent.isResize) {
+                this.pathAdjustedIndex = null;
+                if (this.currentDrawingShape !== '') {
+                    if (this.currentDrawingShape === 'text') {
+                        var prevCropObj_1 = extend({}, parent.cropObj, {}, true);
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                            value: { operation: 'shapeInsert', previousObj: this.initialPrevObj, previousObjColl: this.initialPrevObj.objColl,
+                                previousPointColl: this.initialPrevObj.pointColl, previousSelPointColl: this.initialPrevObj.selPointColl,
+                                previousCropObj: prevCropObj_1, previousText: null,
+                                currentText: null, previousFilter: null, isCircleCrop: null } });
+                    }
+                    else {
+                        parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: this.initialPrevObj.objColl, operation: 'shapeInsert' } });
+                    }
+                    this.isShapeInserted = true;
+                    this.currentDrawingShape = '';
+                    if (parent.activeObj.activePoint.width === 0 && parent.activeObj.activePoint.height === 0) {
+                        parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
+                    }
+                    var previousShapeSettings = this.updatePrevShapeSettings();
+                    var shapeResizingArgs = { cancel: false, action: 'draw-end', previousShapeSettings: previousShapeSettings };
+                    var shapeMovingArgs = { cancel: false, action: 'move', previousShapeSettings: previousShapeSettings };
+                    this.shapeResizingArgs = shapeResizingArgs;
+                    this.shapeMovingArgs = shapeMovingArgs;
+                    this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-up');
+                }
+                this.adjustActObjForLineArrow();
+                this.updPtCollForShpRot();
+                parent.currObjType.shape = parent.currObjType.shape.toLowerCase();
+                var prevCropObj = extend({}, parent.cropObj, {}, true);
+                var object = { currObj: {} };
+                parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+                var prevObj = object['currObj'];
+                prevObj.objColl = extend([], parent.objColl, [], true);
+                prevObj.pointColl = extend([], parent.pointColl, [], true);
+                prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
+                var selPointCollObj = { selPointColl: null };
+                parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+                    value: { obj: selPointCollObj } });
+                prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
+                if (!parent.togglePen && !isCropSelection) {
+                    if (this.tempObjColl && parent.activeObj.activePoint.width !== 0) {
+                        parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
+                        parent.objColl.push(parent.activeObj);
+                        if (JSON.stringify(parent.activeObj.activePoint) !== JSON.stringify(this.tempActiveObj.activePoint)) {
+                            parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                                value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: this.tempObjColl,
+                                    previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                                    previousCropObj: prevCropObj, previousText: null,
+                                    currentText: null, previousFilter: null, isCircleCrop: null } });
+                        }
+                        this.redrawShape(parent.objColl[parent.objColl.length - 1], true);
+                        this.tempObjColl = undefined;
+                    }
+                    if (!this.isFhdEditing) {
+                        this.applyCurrActObj(x, y);
+                        parent.currObjType.isResize = false;
+                        if (!isBlazor()) {
+                            parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                        }
+                    }
                 }
-                var shape = parent.activeObj.shape;
-                if (!isBlazor()) {
-                    var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path'];
-                    if (shapeColl.indexOf(shape) > -1) {
-                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
-                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                if (parent.activeObj) {
+                    var isCropSelection_1 = false;
+                    var splitWords_1;
+                    if (parent.activeObj.shape !== undefined) {
+                        splitWords_1 = parent.activeObj.shape.split('-');
                     }
-                    else if (shape === 'text') {
-                        if (parent.textArea.style.display === 'none') {
-                            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
+                    if (splitWords_1 === undefined && (parent.currObjType.isCustomCrop || parent.togglePen)) {
+                        isCropSelection_1 = true;
+                    }
+                    else if (splitWords_1 !== undefined && splitWords_1[0] === 'crop') {
+                        isCropSelection_1 = true;
+                    }
+                    var shape = parent.activeObj.shape;
+                    if (!isBlazor()) {
+                        var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path'];
+                        if (shapeColl.indexOf(shape) > -1) {
+                            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
                                     isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                         }
+                        else if (shape === 'text') {
+                            if (parent.textArea.style.display === 'none') {
+                                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
+                                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                            }
+                        }
+                        else if (this.isFhdEditing) {
+                            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
+                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        }
+                        else if (!isCropSelection_1) {
+                            var eventargs = { type: 'main', isApplyBtn: null, isCropping: false, isZooming: null };
+                            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
+                        }
+                        parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
                     }
-                    else if (this.isFhdEditing) {
-                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
-                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    else {
+                        var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'image'];
+                        if (shapeColl.indexOf(shape) > -1) {
+                            parent.updateToolbar(parent.element, parent.activeObj.shape);
+                        }
+                        else if (parent.activeObj.shape === 'text' && parent.textArea.style.display === 'none') {
+                            parent.updateToolbar(parent.element, 'text');
+                        }
                     }
-                    else if (!isCropSelection_1) {
-                        var eventargs = { type: 'main', isApplyBtn: null, isCropping: false, isZooming: null };
-                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
+                }
+            }
+            if (parent.activeObj.shape !== undefined) {
+                splitWords = parent.activeObj.shape.split('-');
+            }
+            if (splitWords !== undefined && splitWords[0] === 'crop') {
+                isCropSelection = true;
+            }
+            if (parent.activeObj.shape && !isCropSelection && e.currentTarget === parent.upperCanvas &&
+                parent.textArea.style.display === 'none') {
+                if (parent.activeObj.shape === 'text') {
+                    if (!isBlazor()) {
+                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                     }
-                    parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
                 }
                 else {
-                    var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'image'];
-                    if (shapeColl.indexOf(shape) > -1) {
-                        parent.updateToolbar(parent.element, parent.activeObj.shape);
-                    }
-                    else if (parent.activeObj.shape === 'text' && parent.textArea.style.display === 'none') {
-                        parent.updateToolbar(parent.element, 'text');
+                    if (!isBlazor()) {
+                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                     }
                 }
-            }
-        }
-        if (parent.activeObj.shape !== undefined) {
-            splitWords = parent.activeObj.shape.split('-');
-        }
-        if (splitWords !== undefined && splitWords[0] === 'crop') {
-            isCropSelection = true;
-        }
-        if (parent.activeObj.shape && !isCropSelection && e.currentTarget === parent.upperCanvas &&
-            parent.textArea.style.display === 'none') {
-            if (parent.activeObj.shape === 'text') {
                 if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
-                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
+                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
                 }
-            }
-            else {
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
-                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                else {
+                    parent.updateToolbar(parent.element, 'quickAccessToolbar', parent.activeObj.shape);
                 }
             }
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-                parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+            if (parent.togglePen && e.currentTarget === parent.upperCanvas) {
+                parent.notify('freehand-draw', { prop: 'freehandUpHandler', onPropertyChange: false,
+                    value: { e: e, canvas: parent.upperCanvas, context: this.upperContext } });
             }
             else {
-                parent.updateToolbar(parent.element, 'quickAccessToolbar', parent.activeObj.shape);
+                parent.currObjType.shape = '';
             }
+            this.dragElement = '';
+            this.mouseDown = '';
+            this.isSliderActive = false;
+            parent.currObjType.isInitialLine = parent.currObjType.isDragging = false;
+            this.selMouseUpEvent();
         }
-        if (parent.togglePen && e.currentTarget === parent.upperCanvas) {
-            parent.notify('freehand-draw', { prop: 'freehandUpHandler', onPropertyChange: false,
-                value: { e: e, canvas: parent.upperCanvas, context: this.upperContext } });
-        }
-        else {
-            parent.currObjType.shape = '';
-        }
-        this.dragElement = '';
-        parent.currObjType.isInitialLine = parent.currObjType.isDragging = false;
-        this.selMouseUpEvent();
     };
     Selection.prototype.adjustActObjForLineArrow = function (obj) {
         var isAdjusted = false;
@@ -13147,7 +13166,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                 fontStyle.push('underline');
             }
         }
-        var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
+        var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY, width = _a.width, height = _a.height;
         var _b = parent.activeObj, keyHistory = _b.keyHistory, currIndex = _b.currIndex, shape = _b.shape, textSettings = _b.textSettings, strokeSettings = _b.strokeSettings, rotatedAngle = _b.rotatedAngle, imageElement = _b.imageElement, opacity = _b.opacity;
         var shapeSettingsObj = {
             id: !isNullOrUndefined(currIndex) ? currIndex : null,
@@ -13163,15 +13182,27 @@ var Selection = /** @__PURE__ @class */ (function () {
             fontFamily: shape === 'text' ? (textSettings ? textSettings.fontFamily : null) : null,
             fontStyle: shape === 'text' ? fontStyle : null,
             color: shape === 'text' ? (strokeSettings ? strokeSettings.strokeColor : null) : null,
-            degree: shape === 'ellipse' || shape === 'rectangle' || shape === 'image' ? rotatedAngle * (180 / Math.PI) : null,
+            degree: shape === 'ellipse' || shape === 'rectangle' || shape === 'image' || shape === 'text' ? rotatedAngle * (180 / Math.PI) : null,
             imageData: shape === 'image' ? imageElement.src : null,
-            opacity: shape === 'image' ? opacity : null
+            opacity: shape === 'image' ? opacity : null,
+            radiusX: shape === 'ellipse' ? width / 2 : null,
+            radiusY: shape === 'ellipse' ? height / 2 : null,
+            endX: shape === 'line' || shape === 'arrow' ? endX : null,
+            endY: shape === 'line' || shape === 'arrow' ? endY : null,
+            arrowHead: shape === 'arrow' ? this.getArrowType(parent.activeObj.start) : null,
+            arrowTail: shape === 'arrow' ? this.getArrowType(parent.activeObj.end) : null,
+            points: shape === 'path' ? parent.activeObj.pointColl : null
         };
         if (obj) {
             obj['shapeSettingsObj'] = shapeSettingsObj;
         }
         return shapeSettingsObj;
     };
+    Selection.prototype.getArrowType = function (type) {
+        var typeToArrowType = { 'none': 'None', 'arrow': 'Arrow', 'arrowSolid': 'SolidArrow',
+            'circle': 'Circle', 'circleSolid': 'SolidCircle', 'square': 'Square', 'squareSolid': 'SolidSquare', 'bar': 'Bar' };
+        return typeToArrowType["" + type];
+    };
     Selection.prototype.getRectanglePoints = function (rectX, rectY, rectWidth, rectHeight, rectAngle, pointX, pointY) {
         var centerX = rectX + rectWidth / 2;
         var centerY = rectY + rectHeight / 2;
@@ -14096,13 +14127,22 @@ var Shape = /** @__PURE__ @class */ (function () {
             }
             parent.activeObj.strokeSettings.strokeColor = shapeSettings.strokeColor;
             parent.activeObj.strokeSettings.fillColor = shapeSettings.fillColor;
+            parent.activeObj.strokeSettings.strokeWidth = shapeSettings.strokeWidth;
             parent.activeObj.opacity = shapeSettings.opacity;
             if (isNullOrUndefined(shapeSettings.degree)) {
                 shapeSettings.degree = 0;
             }
             switch (parent.activeObj.shape) {
                 case 'ellipse':
-                    parent.activeObj.activePoint.width = shapeSettings.radius * 2;
+                    if (isBlazor()) {
+                        parent.activeObj.activePoint.width = shapeSettings.radius;
+                    }
+                    else {
+                        parent.activeObj.activePoint.width = shapeSettings.radiusX * 2;
+                        parent.activeObj.activePoint.height = shapeSettings.radiusY * 2;
+                        parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
+                        parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
+                    }
                     if (shapeSettings.degree) {
                         parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
                     }
@@ -14110,18 +14150,35 @@ var Shape = /** @__PURE__ @class */ (function () {
                 case 'line':
                 case 'arrow':
                     parent.activeObj.activePoint.width = shapeSettings.length;
+                    if (!isBlazor()) {
+                        parent.activeObj.activePoint.endX = shapeSettings.endX;
+                        parent.activeObj.activePoint.endY = shapeSettings.endY;
+                        parent.activeObj.activePoint.width = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
+                        parent.activeObj.activePoint.height = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
+                        if (parent.activeObj.shape === 'arrow') {
+                            parent.activeObj.start = this.getArrowType(shapeSettings.arrowHead);
+                            parent.activeObj.end = this.getArrowType(shapeSettings.arrowTail);
+                        }
+                    }
                     break;
                 case 'text':
                     parent.activeObj.keyHistory = parent.activeObj.textSettings.text = shapeSettings.text;
                     parent.activeObj.textSettings.fontSize = shapeSettings.fontSize;
                     parent.activeObj.strokeSettings.strokeColor = shapeSettings.color;
                     parent.activeObj.textSettings.fontFamily = shapeSettings.fontFamily;
+                    if (shapeSettings.degree) {
+                        parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
+                    }
                     break;
                 case 'rectangle':
                 case 'image':
                     if (shapeSettings.degree) {
                         parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
                     }
+                    // Prevented setting image src as it cannot be set in canvas
+                    break;
+                case 'path':
+                    parent.activeObj.pointColl = shapeSettings.points;
                     break;
             }
             if (parent.activeObj.shape === 'text' && parent.activeObj.textSettings) {
@@ -16156,18 +16213,31 @@ var Shape = /** @__PURE__ @class */ (function () {
                 shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
                 shapeDetails.fillColor = obj.strokeSettings.fillColor;
                 shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+                shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
                 break;
             case 'ellipse':
                 shapeDetails.radius = obj.activePoint.width / 2;
                 shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
                 shapeDetails.fillColor = obj.strokeSettings.fillColor;
                 shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+                shapeDetails.radiusX = obj.activePoint.width / 2;
+                shapeDetails.radiusY = obj.activePoint.height / 2;
+                shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
                 break;
             case 'line':
             case 'arrow':
                 shapeDetails.length = obj.activePoint.width;
                 shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
                 shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+                shapeDetails.endX = obj.activePoint.endX;
+                shapeDetails.endY = obj.activePoint.endY;
+                if (obj.shape === 'arrow') {
+                    var arrowObj = { type: null };
+                    parent.notify('selection', { prop: 'getArrowType', onPropertyChange: false, value: { type: obj.start, obj: arrowObj } });
+                    shapeDetails.arrowHead = arrowObj['type'];
+                    parent.notify('selection', { prop: 'getArrowType', onPropertyChange: false, value: { type: obj.end, obj: arrowObj } });
+                    shapeDetails.arrowTail = arrowObj['type'];
+                }
                 break;
             case 'text':
                 shapeDetails.text = obj.keyHistory;
@@ -16181,10 +16251,26 @@ var Shape = /** @__PURE__ @class */ (function () {
                 if (obj.textSettings.italic) {
                     shapeDetails.fontStyle.push('italic');
                 }
+                shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
                 break;
             case 'path':
                 shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
                 shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+                shapeDetails.points = obj.pointColl;
+                break;
+            case 'image':
+                shapeDetails.imageData = obj.imageCanvas.toDataURL();
+                shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
+                shapeDetails.width = obj.activePoint.width;
+                shapeDetails.height = obj.activePoint.height;
+                shapeDetails.opacity = obj.opacity;
+                break;
+            case 'image':
+                shapeDetails.imageData = obj.imageCanvas.toDataURL();
+                shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
+                shapeDetails.width = obj.activePoint.width;
+                shapeDetails.height = obj.activePoint.height;
+                shapeDetails.opacity = obj.opacity;
                 break;
         }
         return shapeDetails;
@@ -19392,6 +19478,7 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
     UndoRedo.prototype.undo = function () {
         var parent = this.parent;
         this.cancelCropSelection();
+        parent.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false, value: { isOk: false } });
         if (!parent.disabled && parent.isImageLoaded) {
             if (this.undoRedoStep > 0) {
                 this.refreshToolbarActions();
@@ -19530,6 +19617,7 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
     UndoRedo.prototype.redo = function () {
         var parent = this.parent;
         this.cancelCropSelection();
+        parent.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false, value: { isOk: false } });
         if (!parent.disabled && parent.isImageLoaded) {
             if (this.undoRedoStep < this.appliedUndoRedoColl.length) {
                 this.refreshToolbarActions();
@@ -20886,7 +20974,6 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         EventHandler.add(this.lowerCanvas, 'mousedown', this.canvasMouseDownHandler, this);
         EventHandler.add(this.lowerCanvas, 'mousemove', this.canvasMouseMoveHandler, this);
         EventHandler.add(this.lowerCanvas, 'mouseup', this.canvasMouseUpHandler, this);
-        EventHandler.add(document, 'mouseup', this.canvasMouseUpHandler, this);
         EventHandler.add(this.upperCanvas, 'touchstart', this.touchStartHandler, this);
         EventHandler.add(this.lowerCanvas, 'touchstart', this.touchStartHandler, this);
         EventHandler.add(this.lowerCanvas, 'mousewheel DOMMouseScroll', this.handleScroll, this);
@@ -20913,7 +21000,6 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         EventHandler.remove(this.lowerCanvas, 'mousedown', this.canvasMouseDownHandler);
         EventHandler.remove(this.lowerCanvas, 'mousemove', this.canvasMouseMoveHandler);
         EventHandler.remove(this.lowerCanvas, 'mouseup', this.canvasMouseUpHandler);
-        EventHandler.remove(document, 'mouseup', this.canvasMouseUpHandler);
         EventHandler.remove(this.upperCanvas, 'touchstart', this.touchStartHandler);
         EventHandler.remove(this.lowerCanvas, 'touchstart', this.touchStartHandler);
         EventHandler.remove(this.lowerCanvas, 'mousewheel DOMMouseScroll', this.handleScroll);
@@ -20926,7 +21012,6 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.notify('selection', { prop: 'unWireEvent', onPropertyChange: false });
     };
     ImageEditor.prototype.createCanvas = function () {
-        var _this = this;
         this.element.style.boxSizing = 'border-box';
         var obj = { toolbarHeight: 0 };
         this.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj } });
@@ -21012,10 +21097,16 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.upperCanvas.style.cursor = this.cursor = 'default';
         this.upperCanvas.style.display = 'block';
         this.upperContext = this.upperCanvas.getContext('2d');
-        document.getElementById(this.element.id + '_dropBrowse').onclick = function () {
-            _this.element.querySelector('#' + _this.element.id + '_dropfileUpload').click();
+        dropAnchorElement.addEventListener('click', function (e) {
+            e.preventDefault();
+            dropUploader.click();
             return false;
-        };
+        });
+        minDropAnchorElem.addEventListener('click', function (e) {
+            e.preventDefault();
+            dropUploader.click();
+            return false;
+        });
     };
     ImageEditor.prototype.touchStartHandler = function (e) {
         this.notify('selection', { prop: 'touchStartHandler', onPropertyChange: false, value: { e: e } });
@@ -25662,7 +25753,13 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var args = { toolbarType: parent.activeObj.shape ? parent.activeObj.shape : 'shapes',
             toolbarItems: this.defToolbarItems };
         parent.trigger('toolbarUpdating', args);
-        this.defToolbarItems = args.toolbarItems;
+        if (this.isToolbarString(args.toolbarItems)) {
+            items = args.toolbarItems;
+            this.excludeItems(args.toolbarItems);
+        }
+        else {
+            this.defToolbarItems = args.toolbarItems;
+        }
         var toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -25672,8 +25769,12 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 _this.createShapeColor(items);
                 _this.createShapeBtn(items);
                 if (parent.activeObj.shape === 'arrow') {
-                    _this.createStartBtn();
-                    _this.createEndBtn();
+                    if (items.some(function (item) { return item.toLowerCase().indexOf('start') > -1; })) {
+                        _this.createStartBtn();
+                    }
+                    if (items.some(function (item) { return item.toLowerCase().indexOf('end') > -1; })) {
+                        _this.createEndBtn();
+                    }
                 }
                 _this.wireZoomBtnEvents();
                 if (!Browser.isDevice) {
@@ -25837,24 +25938,24 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     ToolbarModule.prototype.createShapeBtn = function (items) {
         var parent = this.parent;
         var id = parent.element.id;
-        var strokeWidthItems = [
-            { id: '1', text: this.l10n.getConstant('XSmall') },
-            { id: '2', text: this.l10n.getConstant('Small') },
-            { id: '3', text: this.l10n.getConstant('Medium') },
-            { id: '4', text: this.l10n.getConstant('Large') },
-            { id: '5', text: this.l10n.getConstant('XLarge') }
-        ];
-        if (parent.activeObj.shape && (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse')) {
-            strokeWidthItems = [
-                { id: '1', text: this.l10n.getConstant('NoOutline') },
-                { id: '2', text: this.l10n.getConstant('XSmall') },
-                { id: '3', text: this.l10n.getConstant('Small') },
-                { id: '4', text: this.l10n.getConstant('Medium') },
-                { id: '5', text: this.l10n.getConstant('Large') },
-                { id: '6', text: this.l10n.getConstant('XLarge') }
-            ];
-        }
         if (items.indexOf('strokeWidth') > -1) {
+            var strokeWidthItems = [
+                { id: '1', text: this.l10n.getConstant('XSmall') },
+                { id: '2', text: this.l10n.getConstant('Small') },
+                { id: '3', text: this.l10n.getConstant('Medium') },
+                { id: '4', text: this.l10n.getConstant('Large') },
+                { id: '5', text: this.l10n.getConstant('XLarge') }
+            ];
+            if (parent.activeObj.shape && (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse')) {
+                strokeWidthItems = [
+                    { id: '1', text: this.l10n.getConstant('NoOutline') },
+                    { id: '2', text: this.l10n.getConstant('XSmall') },
+                    { id: '3', text: this.l10n.getConstant('Small') },
+                    { id: '4', text: this.l10n.getConstant('Medium') },
+                    { id: '5', text: this.l10n.getConstant('Large') },
+                    { id: '6', text: this.l10n.getConstant('XLarge') }
+                ];
+            }
             var strokeWidthBtn = document.getElementById(id + '_borderWidthBtn');
             var spanElem_1 = document.createElement('span');
             spanElem_1.innerHTML = this.l10n.getConstant('XSmall');
@@ -26071,7 +26172,13 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
         var args = { toolbarType: 'text', toolbarItems: this.defToolbarItems };
         parent.trigger('toolbarUpdating', args);
-        this.defToolbarItems = args.toolbarItems;
+        if (this.isToolbarString(args.toolbarItems)) {
+            items = args.toolbarItems;
+            this.excludeItems(args.toolbarItems);
+        }
+        else {
+            this.defToolbarItems = args.toolbarItems;
+        }
         var toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -26557,7 +26664,8 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 template: '<button id="' + id + '_penColorBtn"></button>' });
         }
         if (items.indexOf('strokeWidth') > -1) {
-            toolbarItems.push({ prefixIcon: 'e-icons e-copy', cssClass: 'top-icon e-size',
+            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: id + '_pen_strokewidth',
+                cssClass: 'top-icon e-size',
                 tooltipText: this.l10n.getConstant('StrokeWidth'),
                 align: 'Center', type: 'Input', template: '<button id="' + id + '_penStrokeWidth"></button>' });
         }
@@ -26594,7 +26702,13 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
         var args = { toolbarType: 'pen', toolbarItems: this.defToolbarItems };
         parent.trigger('toolbarUpdating', args);
-        this.defToolbarItems = args.toolbarItems;
+        if (this.isToolbarString(args.toolbarItems)) {
+            items = args.toolbarItems;
+            this.excludeItems(args.toolbarItems);
+        }
+        else {
+            this.defToolbarItems = args.toolbarItems;
+        }
         var toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -27736,6 +27850,8 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             var ctx = void 0;
             parent.notify('draw', { prop: 'getNewPath', value: { obj: pathObject } });
             var type = args.item.id.replace(id + '_', '').toLowerCase();
+            var left = void 0;
+            var right = void 0;
             switch (type) {
                 case 'duplicate':
                     if (!parent.element.querySelector('#' + id + '_duplicate').classList.contains('e-disabled')) {
@@ -27785,8 +27901,10 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     break;
                 case 'rotleft':
                 case 'rotright':
-                    if (!parent.element.querySelector('#' + id + '_rotLeft').classList.contains('e-disabled') ||
-                        !parent.element.querySelector('#' + id + '_rotRight').classList.contains('e-disabled')) {
+                    left = parent.element.querySelector('#' + id + '_rotLeft');
+                    right = parent.element.querySelector('#' + id + '_rotRight');
+                    if ((left && !left.classList.contains('e-disabled')) ||
+                        (right && !right.classList.contains('e-disabled'))) {
                         parent.rotateImage(args.item.id.replace(id + '_', '').toLowerCase());
                     }
                     break;
@@ -28618,6 +28736,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             step: step, width: Browser.isDevice ? '180px' : (type === 'straighten' ? '200px' : '300px'),
             cssClass: 'e-slider',
             change: function (args) {
+                parent.notify('selection', { prop: 'setSliderActive', onPropertyChange: false, value: { bool: true } });
                 if (type === 'transparency') {
                     if (parent.activeObj.shape) {
                         var prevCropObj = void 0;
@@ -28670,6 +28789,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     parent.notify('selection', { prop: 'setSliding', value: { bool: false } });
                     parent.notify('draw', { prop: 'redrawDownScale' });
                 }
+                parent.notify('selection', { prop: 'setSliderActive', onPropertyChange: false, value: { bool: false } });
             }
         });
     };
@@ -28916,6 +29036,80 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         parent.activeObj.textFlip = parent.transform.currFlipState;
         parent.activeObj.flipObjColl = [];
     };
+    ToolbarModule.prototype.isToolbarString = function (items) {
+        var isString = false;
+        for (var i = 0; i < items.length; i++) {
+            if (typeof (items[i]) === 'string') {
+                isString = true;
+                break;
+            }
+        }
+        return isString;
+    };
+    ToolbarModule.prototype.excludeItems = function (items) {
+        var indexArr = [];
+        for (var i = 0; i < items.length; i++) {
+            var index = this.getIndex(items[i]);
+            if (index !== -1) {
+                indexArr.push(index);
+            }
+        }
+        var negativeIndexArr = [];
+        for (var i = 0; i < this.defToolbarItems.length; i++) {
+            if (this.defToolbarItems[i].align === 'Center' && !this.isSameIndex(indexArr, i) &&
+                this.defToolbarItems[i].id !== this.parent.element.id + '_' + 'annotation') {
+                negativeIndexArr.push(i);
+            }
+        }
+        for (var i = negativeIndexArr.length - 1; i >= 0; i--) {
+            this.defToolbarItems.splice(negativeIndexArr[i], 1);
+        }
+    };
+    ToolbarModule.prototype.isSameIndex = function (indexArr, index) {
+        for (var i = 0; i < indexArr.length; i++) {
+            if (indexArr[i] === index) {
+                return true;
+            }
+        }
+        return false;
+    };
+    ToolbarModule.prototype.getIndex = function (item) {
+        var index = -1;
+        var isFontColor = false;
+        if (item === 'rotateLeft') {
+            item = 'rotLeft';
+        }
+        if (item === 'rotateRight') {
+            item = 'rotRight';
+        }
+        if (item === 'horizontalFlip') {
+            item = 'hflip';
+        }
+        if (item === 'verticalFlip') {
+            item = 'vflip';
+        }
+        if (item === 'arrowStart') {
+            item = 'start';
+        }
+        if (item === 'arrowEnd') {
+            item = 'end';
+        }
+        if (item === 'fontColor') {
+            item = 'strokeColor';
+            isFontColor = true;
+        }
+        for (var i = 0; i < this.defToolbarItems.length; i++) {
+            var id = this.defToolbarItems[i].id;
+            if (id && id.toLowerCase().indexOf(item.toLowerCase()) !== -1) {
+                index = i;
+                break;
+            }
+        }
+        if (isFontColor) {
+            item = 'fontColor';
+        }
+        return index;
+    };
     ToolbarModule.prototype.getModuleName = function () {
         return 'toolbar-module';
     };