@syncfusion/ej2-image-editor 24.2.3 → 24.2.5

package/src/image-editor/action/selection.js

@@ -34,6 +34,8 @@ var Selection = /** @class */ (function () {
         this.isImageClarity = true;
         this.isPinching = false;
         this.isSliding = false;
+        this.mouseDown = '';
+        this.isSliderActive = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -276,6 +278,12 @@ var Selection = /** @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 () {
@@ -322,6 +330,8 @@ var Selection = /** @class */ (function () {
         this.currentDrawingShape = '';
         this.initialPrevObj = {};
         this.resizedElement = '';
+        this.mouseDown = '';
+        this.isSliderActive = false;
     };
     Selection.prototype.performTabAction = function () {
         var parent = this.parent;
@@ -2740,6 +2750,8 @@ var Selection = /** @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;
         }
@@ -3177,267 +3189,273 @@ var Selection = /** @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;
@@ -4860,7 +4878,7 @@ var Selection = /** @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,
@@ -4876,15 +4894,27 @@ var Selection = /** @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;