@syncfusion/ej2-image-editor 25.2.4 → 26.1.38

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-constant-condition */
 import { EventHandler, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { ShapeType } from '../index';
 var Shape = /** @class */ (function () {
@@ -5,6 +6,7 @@ var Shape = /** @class */ (function () {
         this.textSettings = { text: 'Enter Text', fontFamily: '', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
         this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
         this.keyHistory = ''; // text history
+        this.preventFrameAnnotation = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -43,7 +45,7 @@ var Shape = /** @class */ (function () {
                 this.drawRectangle(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor'], args.value['degree'], args.value['isSelected']);
                 break;
             case 'drawText':
-                this.drawText(args.value['x'], args.value['y'], args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['color'], args.value['isSelected']);
+                this.drawText(args.value['x'], args.value['y'], args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['color'], args.value['isSelected'], args.value['degree']);
                 break;
             case 'redrawActObj':
                 this.redrawActObj(args.value['x'], args.value['y'], args.value['isMouseDown']);
@@ -63,18 +65,9 @@ var Shape = /** @class */ (function () {
             case 'updImgRatioForActObj':
                 this.updImgRatioForActObj();
                 break;
-            case 'zoomObjColl':
-                this.zoomObjColl(args.value['isPreventApply']);
-                break;
             case 'redrawObj':
                 this.redrawObj(args.value['degree']);
                 break;
-            case 'rotateObjColl':
-                this.rotateObjColl();
-                break;
-            case 'draw-shape-text':
-                this.drawShapeText();
-                break;
             case 'redraw-text':
                 this.redrawText();
                 break;
@@ -90,9 +83,6 @@ var Shape = /** @class */ (function () {
             case 'findTextTarget':
                 this.findTextTarget(args.value['e']);
                 break;
-            case 'panObjColl':
-                this.panObjColl(args.value['xDiff'], args.value['yDiff'], args.value['panRegion']);
-                break;
             case 'updateFontStyles':
                 this.updateFontStyles(args.value['isTextBox']);
                 break;
@@ -105,9 +95,6 @@ var Shape = /** @class */ (function () {
             case 'updateFontSize':
                 this.updateFontSize(args.value['obj']);
                 break;
-            case 'updateObjColl':
-                this.updateObjColl(args.value['item'], args.value['objColl']);
-                break;
             case 'pushActItemIntoObj':
                 this.pushActItemIntoObj();
                 break;
@@ -132,7 +119,9 @@ var Shape = /** @class */ (function () {
                 EventHandler.remove(parent.upperCanvas, 'dblclick', this.findTextTarget);
                 EventHandler.remove(parent.textArea, 'mousedown', this.findTextTarget);
                 uploader = document.getElementById(parent.element.id + '_fileUpload');
-                EventHandler.remove(uploader, 'change', this.fileChanged);
+                if (uploader) {
+                    EventHandler.remove(uploader, 'change', this.fileChanged);
+                }
                 break;
             case 'getShapeSetting':
                 this.getShapeSetting(args.value['id'], args.value['obj']);
@@ -222,9 +211,6 @@ var Shape = /** @class */ (function () {
             case 'reset':
                 this.reset();
                 break;
-            case 'fileChanged':
-                this.fileChanged(args.value['e']);
-                break;
             case 'updateObj':
                 this.updateObj(args.value['dimObj'], args.value['x'], args.value['y']);
                 break;
@@ -243,15 +229,36 @@ var Shape = /** @class */ (function () {
             case 'getTextBoxPosition':
                 this.getTextBoxPosition(args.value['obj'], args.value['object']);
                 break;
-            case 'updateSelectionChangeEventArgs':
-                this.updateSelectionChangeEventArgs(args.value['selectionSettings']);
-                break;
             case 'setFlipState':
                 this.setFlipState(args.value['x'], args.value['y'], args.value['obj'], args.value['object']);
                 break;
             case 'getNewShapeId':
                 args.value['obj']['id'] = this.getNewShapeId();
                 break;
+            case 'z-order':
+                this.updateZOrder(args.value['obj'], args.value['value']);
+                break;
+            case 'getSmallestIndex':
+                args.value['obj']['index'] = this.getSmallestIndex();
+                break;
+            case 'isIndexInObjColl':
+                args.value['obj']['bool'] = this.isIndexInObjColl(args.value['index']);
+                break;
+            case 'drawAnnotations':
+                this.drawAnnotations(args.value['ctx'], args.value['shape'], args.value['pen'], args.value['isPreventApply'], args.value['x'], args.value['y'], args.value['panRegion']);
+                break;
+            case 'updateShapeColl':
+                this.updateShapeColl();
+                break;
+            case 'getNewOrder':
+                args.value['obj']['order'] = this.getNewOrder();
+                break;
+            case 'getHighestOrder':
+                args.value['obj']['order'] = this.getHighestOrder();
+                break;
+            case 'getLowestOrder':
+                args.value['obj']['order'] = this.getLowestOrder();
+                break;
         }
     };
     Shape.prototype.getModuleName = function () {
@@ -278,6 +285,7 @@ var Shape = /** @class */ (function () {
         this.textSettings =
             { text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
         this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
+        this.preventFrameAnnotation = false;
     };
     Shape.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree, isSelected) {
         this.initializeShape('ellipse');
@@ -319,8 +327,8 @@ var Shape = /** @class */ (function () {
         var start = x && y ? { x: x, y: y } : null;
         this.drawShape('rectangle', strokeWidth, strokeColor, fillColor, start, width, height, null, null, null, degree, null, isSelected);
     };
-    Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected) {
-        this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y, isSelected);
+    Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree) {
+        this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y, isSelected, degree);
     };
     Shape.prototype.initializeShape = function (type) {
         var parent = this.parent;
@@ -462,6 +470,7 @@ var Shape = /** @class */ (function () {
         parent.activeObj.shapeFlip = parent.transform.currFlipState;
         parent.activeObj.textFlip = parent.transform.currFlipState;
         parent.activeObj.flipObjColl = [];
+        parent.activeObj.order = this.getNewOrder();
     };
     Shape.prototype.setPointCollForLineAndArrow = function () {
         var parent = this.parent;
@@ -492,7 +501,7 @@ var Shape = /** @class */ (function () {
             value: { obj: selPointCollObj } });
         this.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
     };
-    Shape.prototype.drawShapeText = function (text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected) {
+    Shape.prototype.drawShapeText = function (text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected, degree) {
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             if (parent.currObjType.shape === 'freehanddraw') {
@@ -523,6 +532,7 @@ var Shape = /** @class */ (function () {
             parent.activeObj.shapeFlip = parent.transform.currFlipState;
             parent.activeObj.flipObjColl = [];
             this.updateFontStyles();
+            parent.activeObj.order = this.getNewOrder();
             var width = this.upperContext.measureText(parent.activeObj.textSettings.text).width +
                 parent.activeObj.textSettings.fontSize * 0.5;
             var height = parent.activeObj.textSettings.fontSize + parent.activeObj.textSettings.fontSize * 0.25;
@@ -542,6 +552,15 @@ var Shape = /** @class */ (function () {
                 currentShapeSettings: shapeSettings };
             parent.trigger('shapeChanging', shapeChangingArgs);
             this.drawShapeTextEvent(shapeChangingArgs);
+            if (degree) {
+                parent.activeObj.rotatedAngle = degree * (Math.PI / 180);
+                parent.notify('selection', { prop: 'updPtCollForShpRot', onPropertyChange: false, value: { obj: parent.activeObj } });
+                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: null } });
+                parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+            }
             if (parent.isPublicMethod && !isSelected) {
                 parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
             }
@@ -567,7 +586,7 @@ var Shape = /** @class */ (function () {
             parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
         }
         else {
-            parent.okBtn();
+            parent.okBtn(null, true);
         }
         parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: { bool: true } });
     };
@@ -717,15 +736,24 @@ var Shape = /** @class */ (function () {
     Shape.prototype.updateShapeChangeEventArgs = function (shapeSettings) {
         var parent = this.parent;
         var shapeId;
+        if (shapeSettings.id && shapeSettings.id.indexOf('shape_') === -1 &&
+            shapeSettings.id.indexOf('pen_') === -1) {
+            if (parent.activeObj.currIndex) {
+                parent.activeObj.currIndex = 'shape_' + shapeSettings.id;
+            }
+            else {
+                parent.pointColl[shapeId].id = 'pen_' + shapeSettings.id;
+            }
+        }
         if (shapeSettings.id && shapeSettings.id.split('_')[0] && shapeSettings.id.split('_')[0] === 'pen') {
             shapeId = parseInt(shapeSettings.id.split('_')[1], 10) - 1;
             parent.pointColl[shapeId].points = shapeSettings.points;
             parent.pointColl[shapeId].strokeColor = shapeSettings.strokeColor;
             parent.pointColl[shapeId].strokeWidth = shapeSettings.strokeWidth;
             parent.pointColl[shapeId].opacity = shapeSettings.opacity;
+            parent.pointColl[shapeId].order = shapeSettings.index;
         }
         else {
-            parent.activeObj.currIndex = shapeSettings.id;
             parent.activeObj.activePoint.startX = shapeSettings.startX;
             parent.activeObj.activePoint.startY = shapeSettings.startY;
             if (shapeSettings.width && shapeSettings.height) {
@@ -738,6 +766,7 @@ var Shape = /** @class */ (function () {
             parent.activeObj.strokeSettings.fillColor = shapeSettings.fillColor;
             parent.activeObj.strokeSettings.strokeWidth = shapeSettings.strokeWidth;
             parent.activeObj.opacity = shapeSettings.opacity;
+            parent.activeObj.order = shapeSettings.index;
             if (isNullOrUndefined(shapeSettings.degree)) {
                 shapeSettings.degree = 0;
             }
@@ -804,17 +833,6 @@ var Shape = /** @class */ (function () {
             }
         }
     };
-    Shape.prototype.updateSelectionChangeEventArgs = function (selectionSettings) {
-        var parent = this.parent;
-        parent.activeObj.activePoint.startX = selectionSettings.startX;
-        parent.activeObj.activePoint.startY = selectionSettings.startY;
-        if (selectionSettings.width && selectionSettings.height) {
-            parent.activeObj.activePoint.width = selectionSettings.width;
-            parent.activeObj.activePoint.height = selectionSettings.height;
-            parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
-            parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
-        }
-    };
     Shape.prototype.addLetter = function (letter) {
         var parent = this.parent;
         if (parent.textArea.style.display === 'none' && (parent.currObjType.isText || parent.activeObj.shape === 'text')) {
@@ -937,15 +955,61 @@ var Shape = /** @class */ (function () {
     Shape.prototype.iterateObjColl = function () {
         var parent = this.parent;
         if (parent.objColl.length > 0) {
-            for (var i = 0, len = parent.objColl.length; i < len; i++) {
-                var temp = this.lowerContext.filter;
-                this.lowerContext.filter = 'none';
-                this.apply(parent.objColl[i].shape, parent.objColl[i]);
-                this.lowerContext.filter = temp;
-                this.refreshActiveObj();
+            var index = this.getSmallestIndex();
+            var objColl = extend([], parent.objColl, [], true);
+            while (objColl.length > 0) {
+                var found = false;
+                for (var i = 0; i < objColl.length; i++) {
+                    var currentObj = objColl[i];
+                    if (isNullOrUndefined(currentObj.order)) {
+                        objColl.splice(i, 1);
+                        i--;
+                        continue;
+                    }
+                    if (currentObj.order === index) {
+                        this.apply(currentObj.shape, currentObj);
+                        this.refreshActiveObj();
+                        index++;
+                        if (!this.isIndexInObjColl(index)) {
+                            index++;
+                        }
+                        objColl.splice(i, 1);
+                        found = true;
+                        break; // Exit the loop to start from the beginning
+                    }
+                }
+                if (!found) {
+                    break; // If no matching order was found, exit the loop
+                }
+            }
+        }
+    };
+    Shape.prototype.getSmallestIndex = function () {
+        var parent = this.parent;
+        var smallestIndex;
+        for (var i = 0, len = parent.objColl.length; i < len; i++) {
+            var currentObj = parent.objColl[i];
+            if (isNullOrUndefined(currentObj.order)) {
+                continue;
+            }
+            if (isNullOrUndefined(smallestIndex) || currentObj.order < smallestIndex) {
+                smallestIndex = currentObj.order;
+            }
+        }
+        return smallestIndex;
+    };
+    Shape.prototype.isIndexInObjColl = function (index) {
+        var parent = this.parent;
+        for (var i = 0, len = parent.objColl.length; i < len; i++) {
+            var currentObj = parent.objColl[i];
+            if (isNullOrUndefined(currentObj.order)) {
+                continue;
+            }
+            if (currentObj.order === index) {
+                return true;
             }
-            parent.notify('draw', { prop: 'applyFrame', value: { ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true } });
         }
+        return false;
     };
     Shape.prototype.updImgRatioForActObj = function () {
         var parent = this.parent;
@@ -981,60 +1045,67 @@ var Shape = /** @class */ (function () {
         var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop,
             width: parent.img.destWidth, height: parent.img.destHeight };
         this.straightenShapes();
-        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
-        for (var i = 0, len = parent.objColl.length; i < len; i++) {
-            var currObj = parent.objColl[i];
-            currObj.activePoint.startX = (currObj.imageRatio.startX * destWidth) + destLeft;
-            currObj.activePoint.startY = (currObj.imageRatio.startY * destHeight) + destTop;
-            currObj.activePoint.endX = (currObj.imageRatio.endX * destWidth) + destLeft;
-            currObj.activePoint.endY = (currObj.imageRatio.endY * destHeight) + destTop;
-            currObj = this.updateWidthHeight(currObj);
-            if (currObj.shape === 'text') {
-                this.updateFontSize(currObj);
-            }
-            else if (currObj.shape === 'line' || currObj.shape === 'arrow') {
-                currObj.pointColl = this.getLinePoints(currObj.activePoint.startX, currObj.activePoint.startY, currObj.activePoint.endX, currObj.activePoint.endY);
-                for (var n = 0, len_1 = currObj.pointColl.length; n < len_1; n++) {
-                    currObj.pointColl[n].ratioX =
-                        (currObj.pointColl[n].x - destLeft) / destWidth;
-                    currObj.pointColl[n].ratioY =
-                        (currObj.pointColl[n].y - destTop) / destHeight;
-                }
-                if (currObj.shape === 'arrow') {
-                    this.updateArrowSize(currObj);
+        if (parent.objColl.length > 0) {
+            for (var i = 0, len = parent.objColl.length; i < len; i++) {
+                var currObj = parent.objColl[i];
+                if (currObj.imageRatio) {
+                    currObj.activePoint.startX = (currObj.imageRatio.startX * parent.img.destWidth) + parent.img.destLeft;
+                    currObj.activePoint.startY = (currObj.imageRatio.startY * parent.img.destHeight) + parent.img.destTop;
+                    currObj.activePoint.endX = (currObj.imageRatio.endX * parent.img.destWidth) + parent.img.destLeft;
+                    currObj.activePoint.endY = (currObj.imageRatio.endY * parent.img.destHeight) + parent.img.destTop;
                 }
-                if (parent.transform.straighten !== 0 && (currObj.shape === 'line' || currObj.shape === 'arrow')) {
-                    this.straightenShapePoints(currObj);
+                currObj = this.updateWidthHeight(currObj);
+                if (currObj.shape === 'text') {
+                    this.updateFontSize(currObj);
                 }
-            }
-            else if (currObj.shape === 'path') {
-                for (var l = 0, len_2 = currObj.pointColl.length; l < len_2; l++) {
-                    currObj.pointColl[l].x = (currObj.pointColl[l].ratioX * destWidth) +
-                        destLeft;
-                    currObj.pointColl[l].y = (currObj.pointColl[l].ratioY * destHeight) +
-                        destTop;
+                else if (currObj.shape === 'line' || currObj.shape === 'arrow') {
+                    currObj.pointColl = this.getLinePoints(currObj.activePoint.startX, currObj.activePoint.startY, currObj.activePoint.endX, currObj.activePoint.endY);
+                    for (var n = 0, len_1 = currObj.pointColl.length; n < len_1; n++) {
+                        currObj.pointColl[n].ratioX =
+                            (currObj.pointColl[n].x - parent.img.destLeft) / parent.img.destWidth;
+                        currObj.pointColl[n].ratioY =
+                            (currObj.pointColl[n].y - parent.img.destTop) / parent.img.destHeight;
+                    }
+                    if (currObj.shape === 'arrow') {
+                        this.updateArrowSize(currObj);
+                    }
+                    if (parent.transform.straighten !== 0 && (currObj.shape === 'line' || currObj.shape === 'arrow')) {
+                        this.straightenShapePoints(currObj);
+                    }
+                }
+                else if (currObj.shape === 'path') {
+                    for (var l = 0, len_2 = currObj.pointColl.length; l < len_2; l++) {
+                        currObj.pointColl[l].x = (currObj.pointColl[l].ratioX * parent.img.destWidth) +
+                            parent.img.destLeft;
+                        currObj.pointColl[l].y = (currObj.pointColl[l].ratioY * parent.img.destHeight) +
+                            parent.img.destTop;
+                    }
+                    this.updatePathRatio(currObj);
+                    if (parent.transform.straighten !== 0) {
+                        this.straightenPath(currObj);
+                    }
                 }
-                this.updatePathRatio(currObj);
-                if (parent.transform.straighten !== 0) {
-                    this.straightenPath(currObj);
+                parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: currObj.activePoint,
+                        obj: currObj } });
+                if (currObj.shape !== 'line' && currObj.shape !== 'arrow' && currObj.shape !== 'path' && currObj.rotatedAngle !== 0) {
+                    this.setPointCollForShapeRotation(currObj);
+                    currObj.rotationCirclePoint.x =
+                        (currObj.rotationCirclePoint.ratioX * parent.img.destWidth) + parent.img.destLeft;
+                    currObj.rotationCirclePoint.y =
+                        (currObj.rotationCirclePoint.ratioY * parent.img.destHeight) + parent.img.destTop;
+                    if (currObj.rotationCirclePointColl) {
+                        currObj.rotationCirclePointColl.x =
+                            (currObj.rotationCirclePointColl.ratioX * parent.img.destWidth) + parent.img.destLeft;
+                        currObj.rotationCirclePointColl.y =
+                            (currObj.rotationCirclePointColl.ratioY * parent.img.destHeight) + parent.img.destTop;
+                    }
                 }
             }
-            parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: currObj.activePoint,
-                    obj: currObj } });
             if (isNullOrUndefined(preventApply)) {
                 var temp = this.lowerContext.filter;
                 this.lowerContext.filter = 'none';
-                this.apply(currObj.shape, currObj);
-                this.refreshActiveObj();
+                this.iterateObjColl();
                 this.lowerContext.filter = temp;
-                parent.notify('draw', { prop: 'applyFrame', value: { ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true } });
-            }
-            if (currObj.shape !== 'line' && currObj.shape !== 'arrow' && currObj.shape !== 'path' && currObj.rotatedAngle !== 0) {
-                this.setPointCollForShapeRotation(currObj);
-                currObj.rotationCirclePoint.x = (currObj.rotationCirclePoint.ratioX * destWidth) + destLeft;
-                currObj.rotationCirclePoint.y = (currObj.rotationCirclePoint.ratioY * destHeight) + destTop;
-                currObj.rotationCirclePointColl.x = (currObj.rotationCirclePointColl.ratioX * destWidth) + destLeft;
-                currObj.rotationCirclePointColl.y = (currObj.rotationCirclePointColl.ratioY * destHeight) + destTop;
             }
         }
         parent.img.destLeft = destPoints.startX;
@@ -1507,9 +1578,13 @@ var Shape = /** @class */ (function () {
         var degree = this.getRotDegOfShape(parent.activeObj);
         this.transformTextArea();
         parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+        var zOrderElem = parent.element.querySelector('#' + parent.element.id + '_zOrderBtn');
         var dupElem = parent.element.querySelector('#' + parent.element.id + '_duplicate');
         var removeElem = parent.element.querySelector('#' + parent.element.id + '_remove');
         var editTextElem = parent.element.querySelector('#' + parent.element.id + '_editText');
+        if (zOrderElem) {
+            zOrderElem.classList.add('e-disabled');
+        }
         if (dupElem) {
             dupElem.classList.add('e-disabled');
         }
@@ -1600,7 +1675,9 @@ var Shape = /** @class */ (function () {
             var p1 = { x: cosAngle * (left - center.x) - sinAngle * (top_1 - center.y) + center.x,
                 y: sinAngle * (left - center.x) + cosAngle * (top_1 - center.y) + center.y };
             if (p1.x > parent.img.destLeft && p1.x < parent.img.destLeft + parent.img.destWidth &&
+                // eslint-disable-next-line max-len
                 p1.y > parent.img.destTop && p1.y + parseFloat(parent.textArea.style.fontSize) < parent.img.destTop + parent.img.destHeight) {
+                // eslint-disable-next-line no-self-assign
                 parent.textArea.style.width = parent.textArea.style.width;
             }
             else {
@@ -1614,6 +1691,7 @@ var Shape = /** @class */ (function () {
                     p1 = { x: cosAngle * (left - center.x) - sinAngle * (top_1 - center.y) + center.x,
                         y: sinAngle * (left - center.x) + cosAngle * (top_1 - center.y) + center.y };
                     if ((p1.x > parent.img.destLeft && p1.x < parent.img.destLeft + parent.img.destWidth &&
+                        // eslint-disable-next-line max-len
                         p1.y > parent.img.destTop && p1.y + parseFloat(parent.textArea.style.fontSize) < parent.img.destTop + parent.img.destHeight) ||
                         count === width2) {
                         parent.textArea.style.width = width1 + 'px';
@@ -1817,7 +1895,11 @@ var Shape = /** @class */ (function () {
                 }
                 parent.notify('draw', { prop: 'setNewPath', value: { bool: true } });
                 if (parent.objColl[parent.objColl.length - 1]) {
+                    var shape = parent.drawingShape;
+                    parent.notify('selection', { prop: 'setCurrentDrawingShape', value: { value: '' } });
                     parent.selectShape(parent.objColl[parent.objColl.length - 1].currIndex);
+                    parent.notify('selection', { prop: 'setCurrentDrawingShape', value: { value: 'path' } });
+                    parent.drawingShape = shape;
                 }
                 parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
                 var obj_1 = { shapeSettingsObj: {} };
@@ -1827,6 +1909,7 @@ var Shape = /** @class */ (function () {
                 var shapeMovingArgs = { cancel: false, action: 'move', previousShapeSettings: shapeSettings };
                 parent.notify('selection', { prop: 'triggerShapeChange', onPropertyChange: false,
                     value: { shapeResizingArgs: shapeResizingArgs, shapeMovingArgs: shapeMovingArgs, type: 'mouse-up' } });
+                parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
             }
         }
     };
@@ -2137,6 +2220,9 @@ var Shape = /** @class */ (function () {
         if (parent.isPublicMethod && !isSelected) {
             parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });
         }
+        else if (!parent.isPublicMethod) {
+            parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+        }
         parent.isPublicMethod = false;
     };
     Shape.prototype.updateObj = function (dimObj, x, y) {
@@ -2326,7 +2412,7 @@ var Shape = /** @class */ (function () {
         if (parent.objColl.length > 0) {
             for (var i = 0, len = parent.objColl.length; i < len; i++) {
                 var currObj = parent.objColl[i];
-                if (panRegion === '' || panRegion === 'vertical') {
+                if (panRegion === '') {
                     currObj.activePoint.startX += xDiff;
                     currObj.activePoint.endX += xDiff;
                     if (currObj.rotationCirclePointColl) {
@@ -2337,20 +2423,6 @@ var Shape = /** @class */ (function () {
                             currObj.pointColl[l].x += xDiff;
                         }
                     }
-                }
-                else {
-                    currObj.activePoint.startX -= xDiff;
-                    currObj.activePoint.endX -= xDiff;
-                    if (currObj.rotationCirclePointColl) {
-                        currObj.rotationCirclePointColl.x -= xDiff;
-                    }
-                    if (currObj.shape === 'path') {
-                        for (var l = 0, len_4 = currObj.pointColl.length; l < len_4; l++) {
-                            currObj.pointColl[l].x -= xDiff;
-                        }
-                    }
-                }
-                if (panRegion === '' || panRegion === 'horizontal') {
                     currObj.activePoint.startY += yDiff;
                     currObj.activePoint.endY += yDiff;
                     if (currObj.rotationCirclePointColl) {
@@ -2362,36 +2434,25 @@ var Shape = /** @class */ (function () {
                         }
                     }
                 }
-                else {
-                    currObj.activePoint.startY -= yDiff;
-                    currObj.activePoint.endY -= yDiff;
-                    if (currObj.rotationCirclePointColl) {
-                        currObj.rotationCirclePointColl.y -= yDiff;
-                    }
-                    if (currObj.shape === 'path') {
-                        for (var l = 0; l < currObj.pointColl.length; l++) {
-                            currObj.pointColl[l].y -= yDiff;
-                        }
-                    }
-                }
                 currObj = this.updateWidthHeight(currObj);
                 parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: currObj.activePoint,
                         obj: currObj } });
                 if (currObj.shape === 'line' || currObj.shape === 'arrow') {
                     currObj.pointColl = this.getLinePoints(currObj.activePoint.startX, currObj.activePoint.startY, currObj.activePoint.endX, currObj.activePoint.endY);
-                    for (var j = 0, len_5 = currObj.pointColl.length; j < len_5; j++) {
+                    for (var j = 0, len_4 = currObj.pointColl.length; j < len_4; j++) {
                         currObj.pointColl[j].ratioX =
                             (currObj.pointColl[j].x - parent.img.destLeft) / parent.img.destWidth;
                         currObj.pointColl[j].ratioY =
                             (currObj.pointColl[j].y - parent.img.destTop) / parent.img.destHeight;
                     }
                 }
-                var temp = this.lowerContext.filter;
-                this.lowerContext.filter = 'none';
-                this.apply(currObj.shape, currObj);
-                this.lowerContext.filter = temp;
                 this.refreshActiveObj();
             }
+            var temp = this.lowerContext.filter;
+            this.lowerContext.filter = 'none';
+            this.iterateObjColl();
+            this.lowerContext.filter = temp;
+            this.refreshActiveObj();
             parent.notify('draw', { prop: 'applyFrame', value: { ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true } });
         }
     };
@@ -2472,7 +2533,9 @@ var Shape = /** @class */ (function () {
         else {
             this.textSettings.bold = parent.activeObj.textSettings.bold = fontWeight === 'normal' ? false : true;
             this.textSettings.italic = parent.activeObj.textSettings.italic = fontStyle === 'normal' ? false : true;
-            this.redrawText();
+            if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
+                this.redrawText();
+            }
             parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: objColl } });
         }
     };
@@ -2615,6 +2678,7 @@ var Shape = /** @class */ (function () {
         parent.activeObj.activePoint = { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 };
         parent.activeObj.triangle = [];
         parent.activeObj.triangleRatio = [];
+        parent.activeObj.order = null;
         parent.activeObj.flipObjColl = [];
         parent.activeObj.strokeSettings = this.strokeSettings;
         parent.activeObj.textSettings = this.textSettings;
@@ -2651,6 +2715,9 @@ var Shape = /** @class */ (function () {
                     if (isNullOrUndefined(parent.activeObj.currIndex)) {
                         parent.activeObj.currIndex = this.getNewShapeId();
                     }
+                    if (isNullOrUndefined(parent.activeObj.order)) {
+                        parent.activeObj.order = this.getNewOrder();
+                    }
                     this.updImgRatioForActObj();
                     var splitWords_1 = parent.activeObj.currIndex.split('_');
                     var tempObjColl = parent.objColl.splice(0, parseInt(splitWords_1[1], 10) - 1);
@@ -2691,6 +2758,40 @@ var Shape = /** @class */ (function () {
         }
         return 'shape_' + value;
     };
+    Shape.prototype.getNewOrder = function () {
+        var parent = this.parent;
+        this.updateShapeColl();
+        var value = parent.shapeColl.length + 1;
+        for (var i = 0; i < parent.shapeColl.length; i++) {
+            if (parent.shapeColl[i].order === value) {
+                value++;
+                i = -1;
+            }
+        }
+        return value;
+    };
+    Shape.prototype.getHighestOrder = function () {
+        var parent = this.parent;
+        this.updateShapeColl();
+        var value = 0;
+        for (var i = 0; i < parent.shapeColl.length; i++) {
+            if (parent.shapeColl[i].order > value) {
+                value = parent.shapeColl[i].order;
+            }
+        }
+        return value;
+    };
+    Shape.prototype.getLowestOrder = function () {
+        var parent = this.parent;
+        this.updateShapeColl();
+        var value = 1;
+        for (var i = 0; i < parent.shapeColl.length; i++) {
+            if (parent.shapeColl[i].order < value) {
+                value = parent.shapeColl[i].order;
+            }
+        }
+        return value;
+    };
     Shape.prototype.alignTextAreaIntoCanvas = function () {
         var parent = this.parent;
         var letters = parent.textArea.value;
@@ -2778,6 +2879,7 @@ var Shape = /** @class */ (function () {
         shapeDetails.type = parent.toPascalCase(obj.shape);
         shapeDetails.startX = obj.activePoint.startX;
         shapeDetails.startY = obj.activePoint.startY;
+        shapeDetails.index = obj.order;
         switch (obj.shape) {
             case 'rectangle':
                 shapeDetails.width = obj.activePoint.width;
@@ -2848,6 +2950,7 @@ var Shape = /** @class */ (function () {
         shapeDetails.points = extend([], parent.pointColl[index].points);
         shapeDetails.strokeColor = parent.pointColl[index].strokeColor;
         shapeDetails.strokeWidth = parent.pointColl[index].strokeWidth;
+        shapeDetails.index = parent.pointColl[index].order;
         return shapeDetails;
     };
     Shape.prototype.getShapeSetting = function (id, obj) {
@@ -2855,7 +2958,7 @@ var Shape = /** @class */ (function () {
         var shapeDetails;
         if (!parent.disabled && parent.isImageLoaded) {
             if (parent.textArea.style.display !== 'none') {
-                parent.okBtn();
+                parent.okBtn(null, true);
             }
             else {
                 this.applyActObj(true);
@@ -2881,7 +2984,7 @@ var Shape = /** @class */ (function () {
         var shapeDetailsColl = [];
         if (!parent.disabled && parent.isImageLoaded) {
             if (parent.textArea.style.display !== 'none') {
-                parent.okBtn();
+                parent.okBtn(null, true);
             }
             else {
                 this.applyActObj(true);
@@ -3055,7 +3158,7 @@ var Shape = /** @class */ (function () {
                 var object = { bool: false };
                 parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: object } });
                 if (object['bool']) {
-                    parent.okBtn();
+                    parent.okBtn(null, true);
                 }
                 var obj_6 = { isIndex: false };
                 parent.notify('freehand-draw', { prop: 'isFHDIdx', value: { index: parseInt(id.split('_')[1], 10) - 1, obj: obj_6 } });
@@ -3341,6 +3444,296 @@ var Shape = /** @class */ (function () {
         }
         return point;
     };
+    Shape.prototype.updateZOrder = function (obj, value) {
+        var parent = this.parent;
+        value = value.toLowerCase();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var object = obj;
+        if (isNullOrUndefined(object.order)) {
+            return;
+        }
+        var index;
+        var prevIndex;
+        var highestOrder = this.getHighestOrder();
+        this.updateShapeColl();
+        if (parent.shapeColl.length === 0) {
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var coll;
+        for (var i = 0; i < parent.shapeColl.length; i++) {
+            coll = parent.shapeColl[i];
+            if (object.id && object.id.indexOf('pen') > -1) {
+                if (coll.id && coll.id === object.id) {
+                    parent.shapeColl.splice(i, 1);
+                }
+            }
+            else if (coll.shape && coll.shape.indexOf('crop-') > -1) {
+                parent.shapeColl.splice(i, 1);
+            }
+        }
+        switch (value) {
+            case 'sendtoback':
+                prevIndex = object.order;
+                index = object.order;
+                object.order = 1;
+                break;
+            case 'sendbackward':
+                object.order -= 1;
+                index = object.order;
+                break;
+            case 'bringtofront':
+                prevIndex = object.order;
+                index = highestOrder;
+                object.order = index;
+                break;
+            case 'bringforward':
+                object.order += 1;
+                index = object.order;
+                break;
+        }
+        this.reArrangeObjColl(index, value, prevIndex);
+        if (object.id && object.id.indexOf('pen') > -1) {
+            this.reUpdateShapeColl(object);
+        }
+    };
+    Shape.prototype.reArrangeObjColl = function (index, value, prevIndex) {
+        var parent = this.parent;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var obj;
+        switch (value) {
+            case 'sendtoback':
+                for (var i = 0, len = parent.shapeColl.length; i < len; i++) {
+                    obj = parent.shapeColl[i];
+                    if (obj.order < prevIndex && obj.order <= index) {
+                        obj.order += 1;
+                        this.reUpdateShapeColl(obj);
+                    }
+                }
+                break;
+            case 'sendbackward':
+                for (var i = 0, len = parent.shapeColl.length; i < len; i++) {
+                    obj = parent.shapeColl[i];
+                    if (obj.order === index) {
+                        obj.order += 1;
+                        this.reUpdateShapeColl(obj);
+                        break;
+                    }
+                }
+                break;
+            case 'bringtofront':
+                for (var i = 0, len = parent.shapeColl.length; i < len; i++) {
+                    obj = parent.shapeColl[i];
+                    if (obj.order > prevIndex && obj.order <= index) {
+                        obj.order -= 1;
+                        this.reUpdateShapeColl(obj);
+                    }
+                }
+                break;
+            case 'bringforward':
+                for (var i = 0, len = parent.shapeColl.length; i < len; i++) {
+                    obj = parent.shapeColl[i];
+                    if (obj.order === index) {
+                        obj.order -= 1;
+                        this.reUpdateShapeColl(obj);
+                        break;
+                    }
+                }
+                break;
+        }
+    };
+    Shape.prototype.updateShapeColl = function () {
+        var parent = this.parent;
+        var isOrdered = false;
+        var tempOrder = 1;
+        var tempObjColl = extend([], parent.objColl, [], true);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var tempPointColl = extend([], parent.pointColl, [], true);
+        if (parent.shapeColl.length > 0 &&
+            parent.shapeColl.length === parent.objColl.length + parent.pointColl.length) {
+            for (var i = 0; i < parent.shapeColl.length; i++) {
+                if (parent.shapeColl[i].order === tempOrder) {
+                    isOrdered = true;
+                    tempOrder++;
+                }
+                else {
+                    isOrdered = false;
+                    break;
+                }
+            }
+            if (isOrdered) {
+                for (var i = 0; i < parent.shapeColl.length; i++) {
+                    if (parent.shapeColl[i].currIndex &&
+                        parent.shapeColl[i].currIndex.indexOf('shape') > -1) {
+                        for (var j = 0; j < tempObjColl.length; j++) {
+                            if (parent.shapeColl[i].currIndex === tempObjColl[j].currIndex) {
+                                parent.shapeColl[i] = extend({}, tempObjColl[j], {}, true);
+                                tempObjColl.splice(j, 1);
+                                break;
+                            }
+                        }
+                    }
+                    else if (parent.shapeColl[i].id && parent.shapeColl[i].id.indexOf('pen') > -1) {
+                        for (var j = 0; j < tempPointColl.length; j++) {
+                            if (parent.shapeColl[i].id === tempPointColl[j].id) {
+                                parent.shapeColl[i] = extend([], tempPointColl[j], [], true);
+                                tempPointColl.splice(j, 1);
+                                break;
+                            }
+                        }
+                    }
+                }
+                return;
+            }
+        }
+        tempObjColl = extend([], parent.objColl, [], true);
+        tempPointColl = extend([], parent.pointColl, [], true);
+        parent.shapeColl = [];
+        var order = 1;
+        var isBreak;
+        var isCrop = false;
+        while (tempObjColl.length !== 0 || tempPointColl.length !== 0) {
+            isBreak = isCrop = false;
+            for (var i = 0; i < tempObjColl.length; i++) {
+                if (tempObjColl[i].order === order ||
+                    (!tempObjColl[i].order && tempObjColl[i].shape &&
+                        tempObjColl[i].shape.indexOf('crop-') > -1)) {
+                    parent.shapeColl.push(extend({}, tempObjColl[i], {}, true));
+                    if (tempObjColl[i].shape && tempObjColl[i].shape.indexOf('crop-') > -1) {
+                        isCrop = true;
+                    }
+                    tempObjColl.splice(i, 1);
+                    isBreak = true;
+                    break;
+                }
+            }
+            if (!isBreak) {
+                for (var i = 0; i < tempPointColl.length; i++) {
+                    if (tempPointColl[i].order === order) {
+                        parent.shapeColl.push(extend([], tempPointColl[i], [], true));
+                        tempPointColl.splice(i, 1);
+                        isBreak = true;
+                        break;
+                    }
+                }
+            }
+            if (!isCrop) {
+                order++;
+            }
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Shape.prototype.reUpdateShapeColl = function (obj) {
+        var parent = this.parent;
+        if (obj.id && obj.id.indexOf('pen') > -1) {
+            if (parent.freehandCounter > 0) {
+                for (var i = 0; i < parent.freehandCounter; i++) {
+                    if (parent.pointColl[i].id === obj.id) {
+                        parent.pointColl[i].order = obj.order;
+                    }
+                }
+            }
+        }
+        else if (obj.currIndex && obj.currIndex.indexOf('shape') > -1) {
+            for (var i = 0; i < parent.objColl.length; i++) {
+                if (parent.objColl[i].currIndex === obj.currIndex) {
+                    parent.objColl[i].order = obj.order;
+                }
+            }
+        }
+    };
+    Shape.prototype.drawAnnotations = function (ctx, shape, pen, isPreventApply, x, y, panRegion) {
+        var parent = this.parent;
+        var activeObj = extend({}, parent.activeObj, {}, true);
+        var tempObjColl = extend([], parent.objColl, [], true);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var tempPointColl = extend([], parent.pointColl, [], true);
+        this.updateShapeColl();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var tempShapeColl = extend([], parent.shapeColl, [], true);
+        var isPrevented = false;
+        if (!this.preventFrameAnnotation) {
+            this.preventFrameAnnotation = isPrevented = true;
+        }
+        for (var i = 0; i < tempShapeColl.length; i++) {
+            var isPenId = tempShapeColl[i].id;
+            if ((tempShapeColl[i].order) ||
+                (!tempShapeColl[i].order && tempShapeColl[i].shape && tempShapeColl[i].shape.indexOf('crop-') > -1) ||
+                (!tempShapeColl[i].order && tempShapeColl[i].shape === 'path' && parent.drawingShape === 'path')) {
+                if (tempShapeColl[i].currIndex && tempShapeColl[i].currIndex.indexOf('shape') > -1) {
+                    parent.objColl = [];
+                    parent.objColl.push(extend({}, tempShapeColl[i], {}, true));
+                    if (shape === 'iterate') {
+                        var temp = this.lowerContext.filter;
+                        this.lowerContext.filter = 'none';
+                        this.iterateObjColl();
+                        this.lowerContext.filter = temp;
+                    }
+                    else if (shape === 'zoom' || shape === 'pan') {
+                        var tempObjCollIndex = -1;
+                        for (var i_3 = 0; i_3 < tempObjColl.length; i_3++) {
+                            if (JSON.stringify(tempObjColl[i_3]) === JSON.stringify(parent.objColl[0])) {
+                                tempObjCollIndex = i_3;
+                                break;
+                            }
+                        }
+                        if (shape === 'zoom') {
+                            this.zoomObjColl(isPreventApply);
+                        }
+                        else {
+                            this.panObjColl(x, y, panRegion);
+                        }
+                        if (tempObjCollIndex > -1) {
+                            tempObjColl[tempObjCollIndex] = extend({}, parent.objColl[0], {}, true);
+                        }
+                    }
+                }
+                else if (tempShapeColl[i].id && tempShapeColl[i].id.indexOf('pen') > -1) {
+                    parent.pointColl = [];
+                    parent.freehandCounter = 0;
+                    parent.pointColl.push(extend({}, tempShapeColl[i], {}, true));
+                    parent.freehandCounter = parent.pointColl.length;
+                    if (pen === 'iterate') {
+                        parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
+                            value: { context: ctx, points: null } });
+                    }
+                    else if (pen === 'zoom' || pen === 'pan') {
+                        if (pen === 'zoom') {
+                            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false,
+                                value: { isPreventApply: isPreventApply } });
+                        }
+                        else {
+                            parent.notify('freehand-draw', { prop: 'panFHDColl', onPropertyChange: false,
+                                value: { xDiff: x, yDiff: y, panRegion: panRegion } });
+                        }
+                        for (var i_4 = 0; i_4 < tempPointColl.length; i_4++) {
+                            if (tempPointColl[i_4].id === parent.pointColl[0].id) {
+                                tempPointColl[i_4] = extend({}, parent.pointColl[0], {}, true);
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+            else if ((!tempShapeColl[i].shape && !isPenId) ||
+                (!tempShapeColl[i].currIndex && !isPenId)) {
+                tempShapeColl.splice(i, 1);
+            }
+        }
+        if (pen && pen === 'zoom') {
+            parent.pointColl = [];
+            parent.freehandCounter = 0;
+            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: isPreventApply } });
+        }
+        parent.objColl = tempObjColl;
+        parent.pointColl = tempPointColl;
+        parent.freehandCounter = parent.pointColl.length;
+        if (isPrevented && this.preventFrameAnnotation) {
+            parent.notify('draw', { prop: 'applyFrame', value: { ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true } });
+            this.preventFrameAnnotation = false;
+        }
+        parent.activeObj = activeObj;
+    };
     return Shape;
 }());
 export { Shape };