@syncfusion/ej2-image-editor 24.2.4 → 24.2.5

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

@@ -4756,7 +4756,8 @@ class Draw {
         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')) {
                 const height = parent.element.querySelector('#' + id + '_toolbarArea').clientHeight;
                 parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: height } });
             }
@@ -8303,6 +8304,7 @@ class Selection {
         this.isPinching = false;
         this.isSliding = false;
         this.mouseDown = '';
+        this.isSliderActive = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -8545,6 +8547,12 @@ class Selection {
             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;
         }
     }
     getModuleName() {
@@ -8592,6 +8600,7 @@ class Selection {
         this.initialPrevObj = {};
         this.resizedElement = '';
         this.mouseDown = '';
+        this.isSliderActive = false;
     }
     performTabAction() {
         const parent = this.parent;
@@ -11446,272 +11455,273 @@ class Selection {
                 && !parent.element.querySelector('#' + id + '_headWrapper').parentElement.classList.contains('e-hide')))) {
             return;
         }
-        else if (e.currentTarget === document && this.mouseDown === '') {
-            e.stopImmediatePropagation();
-            return;
-        }
-        if (e.type === 'touchstart') {
-            this.isTouch = false;
-        }
-        else if (e.type === 'touchend') {
-            e.stopImmediatePropagation();
-        }
-        e.preventDefault();
-        if (parent.togglePan) {
-            this.canvasMouseUpHandler(e);
-        }
-        let x;
-        let y;
-        if (e.type === 'mouseup') {
-            x = e.clientX;
-            y = e.clientY;
-        }
-        else {
-            x = this.touchEndPoint.x;
-            y = this.touchEndPoint.y;
-        }
-        const 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();
             }
-        }
-        let isCropSelection = false;
-        let 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((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) {
-                    const 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((selectionResizingArgs) => {
-                        parent.notify('shape', { prop: 'updateSelectionChangeEventArgs', onPropertyChange: false,
-                            value: { selectionSettings: selectionResizingArgs.currentSelectionSettings } });
-                    });
-                }
+            let x;
+            let y;
+            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((shapeMovingArgs) => {
-                        parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                            value: { shapeSettings: shapeMovingArgs.currentShapeSettings } });
-                    });
+                x = this.touchEndPoint.x;
+                y = this.touchEndPoint.y;
+            }
+            const 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 */
-            const elem = e.srcElement;
-            const elemId = elem.parentElement.id;
-            const id = 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 + '_zoomIn' ||
-                    elemId === id + '_zoomOut' || elemId === id + '_annotationBtn' ||
-                    elemId === id + '_borderColorBtn' || elemId === id + '_borderWidthBtn' || elemId === id + '_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 } });
+            let isCropSelection = false;
+            let splitWords;
+            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') {
-                    const prevCropObj = 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, 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 } });
-                }
-                const previousShapeSettings = this.updatePrevShapeSettings();
-                const shapeResizingArgs = { cancel: false, action: 'draw-end', previousShapeSettings: previousShapeSettings };
-                const 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();
-            const prevCropObj = extend({}, parent.cropObj, {}, true);
-            const object = { currObj: {} };
-            parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
-            const prevObj = object['currObj'];
-            prevObj.objColl = extend([], parent.objColl, [], true);
-            prevObj.pointColl = extend([], parent.pointColl, [], true);
-            prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
-            const 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((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) {
+                        const 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((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((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) {
-                let isCropSelection = false;
-                let splitWords;
-                if (parent.activeObj.shape !== undefined) {
-                    splitWords = parent.activeObj.shape.split('-');
-                }
-                if (splitWords === undefined && (parent.currObjType.isCustomCrop || parent.togglePen)) {
-                    isCropSelection = true;
+            if (this.currentDrawingShape === 'path') {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                const elem = e.srcElement;
+                const elemId = elem.parentElement.id;
+                const id = 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 + '_zoomIn' ||
+                        elemId === id + '_zoomOut' || elemId === id + '_annotationBtn' ||
+                        elemId === id + '_borderColorBtn' || elemId === id + '_borderWidthBtn' || elemId === id + '_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 !== undefined && splitWords[0] === 'crop') {
-                    isCropSelection = true;
+                return;
+            }
+            if (e.currentTarget === parent.upperCanvas && !parent.isResize) {
+                this.pathAdjustedIndex = null;
+                if (this.currentDrawingShape !== '') {
+                    if (this.currentDrawingShape === 'text') {
+                        const prevCropObj = 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, 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 } });
+                    }
+                    const previousShapeSettings = this.updatePrevShapeSettings();
+                    const shapeResizingArgs = { cancel: false, action: 'draw-end', previousShapeSettings: previousShapeSettings };
+                    const 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();
+                const prevCropObj = extend({}, parent.cropObj, {}, true);
+                const object = { currObj: {} };
+                parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+                const prevObj = object['currObj'];
+                prevObj.objColl = extend([], parent.objColl, [], true);
+                prevObj.pointColl = extend([], parent.pointColl, [], true);
+                prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
+                const 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 });
+                        }
+                    }
                 }
-                const shape = parent.activeObj.shape;
-                if (!isBlazor()) {
-                    const 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) {
+                    let isCropSelection = false;
+                    let splitWords;
+                    if (parent.activeObj.shape !== undefined) {
+                        splitWords = 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 === undefined && (parent.currObjType.isCustomCrop || parent.togglePen)) {
+                        isCropSelection = true;
+                    }
+                    else if (splitWords !== undefined && splitWords[0] === 'crop') {
+                        isCropSelection = true;
+                    }
+                    const shape = parent.activeObj.shape;
+                    if (!isBlazor()) {
+                        const 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) {
+                            const 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 {
+                        const 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) {
-                        const 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 {
-                    const 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 = '';
-        this.mouseDown = '';
-        parent.currObjType.isInitialLine = parent.currObjType.isDragging = false;
-        this.selMouseUpEvent();
     }
     adjustActObjForLineArrow(obj) {
         let isAdjusted = false;
@@ -13132,7 +13142,7 @@ class Selection {
                 fontStyle.push('underline');
             }
         }
-        const { startX, startY, width, height } = parent.activeObj.activePoint;
+        const { startX, startY, endX, endY, width, height } = parent.activeObj.activePoint;
         const { keyHistory, currIndex, shape, textSettings, strokeSettings, rotatedAngle, imageElement, opacity } = parent.activeObj;
         const shapeSettingsObj = {
             id: !isNullOrUndefined(currIndex) ? currIndex : null,
@@ -13148,15 +13158,27 @@ class Selection {
             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;
     }
+    getArrowType(type) {
+        const typeToArrowType = { 'none': 'None', 'arrow': 'Arrow', 'arrowSolid': 'SolidArrow',
+            'circle': 'Circle', 'circleSolid': 'SolidCircle', 'square': 'Square', 'squareSolid': 'SolidSquare', 'bar': 'Bar' };
+        return typeToArrowType[`${type}`];
+    }
     getRectanglePoints(rectX, rectY, rectWidth, rectHeight, rectAngle, pointX, pointY) {
         const centerX = rectX + rectWidth / 2;
         const centerY = rectY + rectHeight / 2;
@@ -14078,13 +14100,22 @@ class Shape {
             }
             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);
                     }
@@ -14092,18 +14123,35 @@ class Shape {
                 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) {
@@ -16135,18 +16183,31 @@ class Shape {
                 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') {
+                    const 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;
@@ -16160,10 +16221,26 @@ class Shape {
                 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;
@@ -20821,7 +20898,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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);
@@ -20848,7 +20924,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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);
@@ -20946,10 +21021,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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 = () => {
-            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;
+        });
     }
     touchStartHandler(e) {
         this.notify('selection', { prop: 'touchStartHandler', onPropertyChange: false, value: { e: e } });
@@ -28559,6 +28640,7 @@ class ToolbarModule {
             step: step, width: Browser.isDevice ? '180px' : (type === 'straighten' ? '200px' : '300px'),
             cssClass: 'e-slider',
             change: (args) => {
+                parent.notify('selection', { prop: 'setSliderActive', onPropertyChange: false, value: { bool: true } });
                 if (type === 'transparency') {
                     if (parent.activeObj.shape) {
                         let prevCropObj;
@@ -28611,6 +28693,7 @@ class ToolbarModule {
                     parent.notify('selection', { prop: 'setSliding', value: { bool: false } });
                     parent.notify('draw', { prop: 'redrawDownScale' });
                 }
+                parent.notify('selection', { prop: 'setSliderActive', onPropertyChange: false, value: { bool: false } });
             }
         });
     }