@syncfusion/ej2-image-editor 25.2.4 → 26.1.38

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

@@ -1,3 +1,40 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+/* eslint-disable no-constant-condition */
+/* eslint-disable radix */
 import { extend, isNullOrUndefined, Browser, getComponent } from '@syncfusion/ej2-base';
 import { Dialog, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 var Draw = /** @class */ (function () {
@@ -31,6 +68,9 @@ var Draw = /** @class */ (function () {
         this.isCropSelect = false;
         this.isDownScale = false;
         this.preventStraightening = false;
+        this.tempObjColl = [];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.tempPointColl = {};
         this.parent = parent;
         this.addEventListener();
     }
@@ -82,7 +122,7 @@ var Draw = /** @class */ (function () {
                 this.updateCanvas();
                 break;
             case 'performCancel':
-                this.performCancel(args.value['isContextualToolbar'], args.value['isUndoRedo']);
+                this.performCancel(args.value['isContextualToolbar'], args.value['isUndoRedo'], args.value['isFinalCancel']);
                 break;
             case 'updateFlipPan':
                 this.updateFlipPan(args.value['tempSelectionObj']);
@@ -188,12 +228,6 @@ var Draw = /** @class */ (function () {
             case 'reset':
                 this.reset();
                 break;
-            case 'dlgBtnClick':
-                this.dlgBtnClick();
-                break;
-            case 'dlgCloseBtnClick':
-                this.dlgCloseBtnClick();
-                break;
             case 'setNewPath':
                 this.isNewPath = args.value['bool'];
                 break;
@@ -290,6 +324,18 @@ var Draw = /** @class */ (function () {
             case 'checkPointPosition':
                 args.value['obj']['position'] = this.checkPointPosition(args.value['obj']['x'], args.value['obj']['y'], args.value['obj']['x1'], args.value['obj']['y1'], args.value['obj']['x2'], args.value['obj']['y2'], args.value['obj']['x3'], args.value['obj']['y3'], args.value['obj']['x4'], args.value['obj']['y4']);
                 break;
+            case 'updateTempObjColl':
+                this.tempObjColl = extend([], this.parent.objColl, [], true);
+                break;
+            case 'resetTempObjColl':
+                this.tempObjColl = null;
+                break;
+            case 'updateTempPointColl':
+                this.tempPointColl = extend({}, this.parent.pointColl, {}, true);
+                break;
+            case 'resetTempPointColl':
+                this.tempPointColl = {};
+                break;
         }
     };
     Draw.prototype.getModuleName = function () {
@@ -335,6 +381,8 @@ var Draw = /** @class */ (function () {
         this.straightenActObj = null;
         this.imgCanvasPoints = [];
         this.straightenInitZoom = null;
+        this.tempObjColl = [];
+        this.tempPointColl = {};
         this.straightenDestPoints = null;
         this.isCropSelect = this.isDownScale = this.preventStraightening = false;
     };
@@ -408,7 +456,7 @@ var Draw = /** @class */ (function () {
         if (obj) {
             parent.activeObj = extend({}, obj, {}, true);
         }
-        if (points) {
+        if (points && points.startX && points.startY && points.endX && points.endY && points.width && points.height) {
             actPoint.startX = points.startX;
             actPoint.startY = points.startY;
             actPoint.endX = points.endX;
@@ -437,7 +485,7 @@ var Draw = /** @class */ (function () {
                 }
             }
             if (isCrop) {
-                if (points) {
+                if (points && points.startX && points.startY && points.endX && points.endY && points.width && points.height) {
                     actPoint.startX = points.startX;
                     actPoint.startY = points.startY;
                     actPoint.endX = points.endX;
@@ -651,6 +699,10 @@ var Draw = /** @class */ (function () {
                 x = 9;
                 y = 16;
                 break;
+            default:
+                x = parseInt(parent.currObjType.shape.toLowerCase().split('crop-')[1].split(':')[0]);
+                y = parseInt(parent.currObjType.shape.toLowerCase().split('crop-')[1].split(':')[1]);
+                break;
         }
         if (x !== undefined && y !== undefined) {
             parent.notify('selection', { prop: 'calcShapeRatio', onPropertyChange: false,
@@ -1642,6 +1694,8 @@ var Draw = /** @class */ (function () {
                 if (start) {
                     this.startCircleIntersectX1 = intersectionX1;
                     this.startCircleIntersectY1 = intersectionY1;
+                    this.endCircleIntersectX1 = endX - this.dx * t2;
+                    this.endCircleIntersectY1 = endY - this.dy * t2;
                     canvasDraw.beginPath();
                     canvasDraw.fill();
                     canvasDraw.beginPath();
@@ -1690,6 +1744,8 @@ var Draw = /** @class */ (function () {
                 if (start) {
                     this.startCircleIntersectX1 = intersectionX1;
                     this.startCircleIntersectY1 = intersectionY1;
+                    this.endCircleIntersectX1 = startX - this.dx * t2;
+                    this.endCircleIntersectY1 = startY - this.dy * t2;
                     if (actObj.start === 'circle' && actObj.end === 'circle') {
                         this.shapeLine(canvasDraw, this.endCircleIntersectX1, this.endCircleIntersectY1, this.startCircleIntersectX1, this.startCircleIntersectY1);
                     }
@@ -2360,7 +2416,6 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.renderImage = function (isMouseWheel, isPreventClearRect, isFrame, isStraighten) {
         var parent = this.parent;
-        var temp = this.lowerContext.filter;
         parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
         if (isNullOrUndefined(isPreventClearRect)) {
             this.upperContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
@@ -2386,13 +2441,12 @@ var Draw = /** @class */ (function () {
             this.isRotateZoom = false;
         }
         if (isFrame) {
-            parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
         }
         else {
-            parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
-            parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
-                value: { context: this.lowerContext, points: null } });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'iterate', pen: 'iterate', isPreventApply: null } });
         }
         this.clearOuterCanvas(this.lowerContext);
         if (parent.isCircleCrop || (parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle')) {
@@ -2407,6 +2461,7 @@ var Draw = /** @class */ (function () {
         var proxy = this;
         parent.baseImg.src = src;
         parent.baseImg.onload = function () {
+            parent.imgSrc = src;
             parent.notify('filter', { prop: 'update-finetunes', onPropertyChange: false });
             proxy.lowerContext.drawImage(parent.baseImg, 0, 0, proxy.parent.lowerCanvas.width, proxy.parent.lowerCanvas.height);
             hideSpinner(parent.element);
@@ -2475,8 +2530,8 @@ var Draw = /** @class */ (function () {
         parent.notify('crop', { prop: 'setCropDestPoints', onPropertyChange: false, value: { point: point } });
         var temp = this.lowerContext.filter;
         this.lowerContext.filter = 'none';
-        parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
-        parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+            value: { ctx: this.lowerContext, shape: 'iterate', pen: 'zoom', isPreventApply: null } });
         this.lowerContext.filter = temp;
         if (parent.img.destWidth > 0 && parent.img.destHeight > 0) {
             parent.isImageLoaded = true;
@@ -2516,8 +2571,11 @@ var Draw = /** @class */ (function () {
             parent.cancelCropSelection = null;
         }
     };
-    Draw.prototype.performCancel = function (isContextualToolbar, isUndoRedo) {
+    Draw.prototype.performCancel = function (isContextualToolbar, isUndoRedo, isFinalCancel) {
         var parent = this.parent;
+        if (isFinalCancel) {
+            parent.noPushUndo = false;
+        }
         var straightenObj = { bool: parent.isStraightening };
         isContextualToolbar = isContextualToolbar ? isContextualToolbar : false;
         var obj = { bool: false };
@@ -2531,7 +2589,7 @@ var Draw = /** @class */ (function () {
         if (obj['bool']) {
             parent.notify('freehand-draw', { prop: 'cancelFhd', onPropertyChange: false });
             parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-            parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'cancel' } });
+            parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
         }
         else if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
             parent.textArea.style.display = 'none';
@@ -2552,6 +2610,9 @@ var Draw = /** @class */ (function () {
             parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: true } });
             parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
             parent.notify('selection', { prop: 'setTempActObj', onPropertyChange: false, value: { obj: parent.activeObj } });
+            if (parent.drawingShape) {
+                parent.enableShapeDrawing(parent.toPascalCase(parent.drawingShape), true);
+            }
         }
         else if (((!Browser.isDevice || (Browser.isDevice && !straightenObj['bool'])) &&
             document.querySelector('#' + parent.element.id + '_sliderWrapper')) || parent.currObjType.isFiltered) {
@@ -2612,6 +2673,12 @@ var Draw = /** @class */ (function () {
         this.isNewPath = false;
         parent.notify('toolbar', { prop: 'refresh-dropdown-btn', value: { isDisabled: false } });
         parent.notify('toolbar', { prop: 'setCurrentToolbar', value: { type: 'main' } });
+        if (isFinalCancel) {
+            parent.noPushUndo = false;
+        }
+        parent.drawingShape = null;
+        parent.notify('draw', { prop: 'resetTempObjColl' });
+        parent.notify('draw', { prop: 'resetTempPointColl' });
     };
     Draw.prototype.cancelItems = function () {
         var parent = this.parent;
@@ -2667,8 +2734,8 @@ var Draw = /** @class */ (function () {
                     parent.pointColl = obj2['prevObj']['pointColl'];
                     parent.freehandCounter = parent.pointColl.length;
                     parent.transform.straighten = 0;
-                    parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-                    parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+                    parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                        value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
                     var currObj = parent.currSelectionPoint ?
                         extend({}, parent.currSelectionPoint, {}, true) : null;
                     parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
@@ -2696,7 +2763,7 @@ var Draw = /** @class */ (function () {
                 this.cancelPen();
                 break;
             case parent.activeObj.shape === 'text':
-                this.cancelText(isCropSelection);
+                this.cancelText();
                 break;
             case shapes.indexOf(parent.activeObj.shape) !== -1:
                 this.cancelShape();
@@ -2735,8 +2802,14 @@ var Draw = /** @class */ (function () {
             value: { strokeSettings: parent.activeObj.strokeSettings, strokeColor: null, fillColor: null, strokeWidth: null } });
         parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'cancel' } });
         parent.notify('selection', { prop: 'setFreehandDrawCustomized', value: { isFreehandDrawCustomized: false } });
+        parent.objColl = extend([], this.tempObjColl, [], true);
+        parent.pointColl = extend([], this.tempPointColl, [], true);
+        parent.freehandCounter = parent.pointColl.length;
+        this.tempPointColl = {};
+        this.renderImage();
+        parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok', isCancel: true } });
     };
-    Draw.prototype.cancelText = function (isCropSelection) {
+    Draw.prototype.cancelText = function () {
         var parent = this.parent;
         parent.notify('shape', { prop: 'setTextSettings', onPropertyChange: false,
             value: { textSettings: this.tempTextSettings, fontFamily: null, fontSize: null } });
@@ -2760,25 +2833,15 @@ var Draw = /** @class */ (function () {
                 parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
                 this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             }
-            if (parent.activeObj.shape && parent.activeObj.keyHistory === 'Enter Text') {
-                parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-                parent.notify('shape', { prop: 'draw-shape-text' });
-                parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'cancel' } });
-                parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: true } });
-            }
-            else if (parent.activeObj.shape) {
-                parent.notify('shape', { prop: 'redraw-text' });
-                parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false, value: { obj: parent.activeObj } });
-                if (!isCropSelection && parent.activeObj.topLeftCircle !== undefined) {
-                    parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: true } });
-                }
-                parent.clearSelection();
-            }
         }
         parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
         this.tempTextSettings = { text: 'Enter Text', fontFamily: parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false,
             italic: false, underline: false };
+        parent.objColl = extend([], this.tempObjColl, [], true);
+        parent.pointColl = extend([], this.tempPointColl, [], true);
+        this.renderImage();
+        this.tempObjColl = [];
+        parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok', isCancel: true } });
     };
     Draw.prototype.cancelShape = function () {
         var parent = this.parent;
@@ -2818,9 +2881,24 @@ var Draw = /** @class */ (function () {
                 parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
                 this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             }
+            var undoRedoObj = { undoRedoStep: null };
+            parent.notify('undo-redo', { prop: 'getUndoRedoStep', value: { obj: undoRedoObj } });
+            if (object['appliedUndoRedoColl'][(undoRedoObj['undoRedoStep'] - 1)]) {
+                parent.objColl =
+                    extend([], object['appliedUndoRedoColl'][(undoRedoObj['undoRedoStep'] - 1)].currentObjColl, [], true);
+            }
+            else {
+                parent.objColl = [];
+            }
+            this.renderImage();
         }
         parent.currObjType.isDragging = false;
         parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+        parent.objColl = extend([], this.tempObjColl, [], true);
+        parent.pointColl = extend([], this.tempPointColl, [], true);
+        this.renderImage();
+        this.tempObjColl = [];
+        parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok', isCancel: true } });
     };
     Draw.prototype.cancelSelection = function () {
         var parent = this.parent;
@@ -2833,6 +2911,7 @@ var Draw = /** @class */ (function () {
             parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: parent.activeObj } });
             parent.notify('crop', { prop: 'resizeWrapper' });
             this.updateCropSelObj();
+            // eslint-disable-next-line max-len
             if (this.tempStraightenDestPoints && JSON.stringify(this.tempStraightenDestPoints) !== JSON.stringify(this.straightenDestPoints)) {
                 this.straightenDestPoints = extend({}, this.tempStraightenDestPoints, {}, true);
             }
@@ -3047,9 +3126,16 @@ var Draw = /** @class */ (function () {
             actPoint.width = width;
             actPoint.height = height;
         }
+        else if (width && height) {
+            var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+            actPoint.width = width;
+            actPoint.height = height;
+            actPoint.startX = destLeft + ((destWidth / 2) - (width / 2));
+            actPoint.startY = destTop + ((destHeight / 2) - (height / 2));
+        }
         else {
             if (isNullOrUndefined(parent.transform.zoomFactor) || parent.transform.zoomFactor === 0) {
-                var _a = parent.img, destLeft_1 = _a.destLeft, destTop_1 = _a.destTop, destWidth_1 = _a.destWidth, destHeight_1 = _a.destHeight;
+                var _b = parent.img, destLeft_1 = _b.destLeft, destTop_1 = _b.destTop, destWidth_1 = _b.destWidth, destHeight_1 = _b.destHeight;
                 var lowerCanvasWidth_1 = parent.lowerCanvas.width;
                 var lowerCanvasHeight_1 = parent.lowerCanvas.height;
                 var activePoint_1 = actPoint;
@@ -3079,7 +3165,7 @@ var Draw = /** @class */ (function () {
                 }
             }
             else {
-                var _b = parent.img, destLeft_2 = _b.destLeft, destTop_2 = _b.destTop, destWidth_2 = _b.destWidth, destHeight_2 = _b.destHeight;
+                var _c = parent.img, destLeft_2 = _c.destLeft, destTop_2 = _c.destTop, destWidth_2 = _c.destWidth, destHeight_2 = _c.destHeight;
                 var lowerCanvasWidth_2 = parent.lowerCanvas.width;
                 var lowerCanvasHeight_2 = parent.lowerCanvas.height;
                 var activePoint_2 = actPoint;
@@ -3090,7 +3176,7 @@ var Draw = /** @class */ (function () {
                 activePoint_2.endY = Math.min(destTop_2 + destHeight_2 + 15 < lowerCanvasHeight_2 ? destTop_2 + destHeight_2 - 15 :
                     lowerCanvasHeight_2 - 15, destTop_2 + destHeight_2);
             }
-            var _c = parent.img, destLeft = _c.destLeft, destTop = _c.destTop, destWidth = _c.destWidth, destHeight = _c.destHeight;
+            var _d = parent.img, destLeft = _d.destLeft, destTop = _d.destTop, destWidth = _d.destWidth, destHeight = _d.destHeight;
             var lowerCanvasWidth = parent.lowerCanvas.clientWidth;
             var lowerCanvasHeight = parent.lowerCanvas.clientHeight;
             var activePoint = actPoint;
@@ -3213,11 +3299,10 @@ var Draw = /** @class */ (function () {
         var tempTogglePen = parent.togglePen;
         parent.togglePen = false;
         this.lowerContext.filter = 'none';
-        parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
+        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+            value: { ctx: this.lowerContext, shape: 'iterate', pen: 'iterate', isPreventApply: null } });
         parent.img.destLeft += parent.panPoint.totalPannedInternalPoint.x;
         parent.img.destTop += parent.panPoint.totalPannedInternalPoint.y;
-        parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
-            value: { context: this.lowerContext, points: null } });
         parent.img.destLeft -= parent.panPoint.totalPannedInternalPoint.x;
         parent.img.destTop -= parent.panPoint.totalPannedInternalPoint.y;
         parent.togglePen = tempTogglePen;
@@ -3386,7 +3471,8 @@ var Draw = /** @class */ (function () {
         parent.afterCropActions = afterCropActions;
         if (!this.isCancelAction && !isAfterCropAction) {
             parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
-            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
             parent.img.destLeft = obj.destPoints.startX;
             parent.img.destTop = obj.destPoints.startY;
         }
@@ -3426,28 +3512,22 @@ var Draw = /** @class */ (function () {
         parent.img.destTop = parent.cropObj.destPoints.startY;
         var activeObj = extend({}, obj.activeObj, {}, true);
         this.lowerContext.filter = 'none';
-        if (this.isCancelAction) {
-            parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
-        }
-        else {
-            parent.img = { destLeft: obj.destPoints.startX, destTop: obj.destPoints.startY, destWidth: obj.destPoints.width,
-                destHeight: obj.destPoints.height, srcLeft: obj.srcPoints.startX, srcTop: obj.srcPoints.startY,
-                srcWidth: obj.srcPoints.width, srcHeight: obj.srcPoints.height };
-            if (obj.activeObj.activePoint.width !== 0 && obj.activeObj.activePoint.height !== 0) {
-                var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
-                    height: parent.img.destHeight };
-                parent.img.destLeft = obj.activeObj.activePoint.startX;
-                parent.img.destTop = obj.activeObj.activePoint.startY;
-                parent.img.destWidth = obj.activeObj.activePoint.width;
-                parent.img.destHeight = obj.activeObj.activePoint.height;
-                parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-                parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
-                parent.img.destLeft = destPoints.startX;
-                parent.img.destTop = destPoints.startY;
-                parent.img.destWidth = destPoints.width;
-                parent.img.destHeight = destPoints.height;
-            }
+        parent.img = { destLeft: obj.destPoints.startX, destTop: obj.destPoints.startY, destWidth: obj.destPoints.width,
+            destHeight: obj.destPoints.height, srcLeft: obj.srcPoints.startX, srcTop: obj.srcPoints.startY,
+            srcWidth: obj.srcPoints.width, srcHeight: obj.srcPoints.height };
+        if (obj.activeObj.activePoint.width !== 0 && obj.activeObj.activePoint.height !== 0) {
+            var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
+                height: parent.img.destHeight };
+            parent.img.destLeft = obj.activeObj.activePoint.startX;
+            parent.img.destTop = obj.activeObj.activePoint.startY;
+            parent.img.destWidth = obj.activeObj.activePoint.width;
+            parent.img.destHeight = obj.activeObj.activePoint.height;
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
+            parent.img.destLeft = destPoints.startX;
+            parent.img.destTop = destPoints.startY;
+            parent.img.destWidth = destPoints.width;
+            parent.img.destHeight = destPoints.height;
         }
         parent.activeObj = activeObj;
         this.lowerContext.filter = temp;
@@ -3511,10 +3591,9 @@ var Draw = /** @class */ (function () {
                 }
                 parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
                     value: { obj: { selPointColl: cropSelPointColl } } });
-                parent.notify('shape', { prop: 'panObjColl', onPropertyChange: false,
-                    value: { xDiff: parent.panPoint.currentPannedPoint.x, yDiff: parent.panPoint.currentPannedPoint.y, panRegion: '' } });
-                parent.notify('freehand-draw', { prop: 'panFHDColl', onPropertyChange: false,
-                    value: { xDiff: parent.panPoint.currentPannedPoint.x, yDiff: parent.panPoint.currentPannedPoint.y, panRegion: '' } });
+                parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                    value: { ctx: this.lowerContext, shape: 'pan', pen: 'pan', x: parent.panPoint.currentPannedPoint.x,
+                        y: parent.panPoint.currentPannedPoint.y, panRegion: '' } });
             }
             this.adjustPanning(activeObj);
             parent.activeObj = activeObj;
@@ -3571,17 +3650,15 @@ var Draw = /** @class */ (function () {
                 parent.freehandCounter = parent.pointColl.length;
                 parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
                     value: { obj: { selPointColl: cropSelPointColl } } });
-                parent.notify('shape', { prop: 'panObjColl', onPropertyChange: false,
-                    value: { xDiff: parent.panPoint.currentPannedPoint.x, yDiff: parent.panPoint.currentPannedPoint.y, panRegion: '' } });
-                parent.notify('freehand-draw', { prop: 'panFHDColl', onPropertyChange: false,
-                    value: { xDiff: parent.panPoint.currentPannedPoint.x, yDiff: parent.panPoint.currentPannedPoint.y, panRegion: '' } });
+                parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                    value: { ctx: this.lowerContext, shape: 'pan', pen: 'pan', x: parent.panPoint.currentPannedPoint.x,
+                        y: parent.panPoint.currentPannedPoint.y, panRegion: '' } });
             }
         }
     };
     Draw.prototype.panToSel = function () {
         var parent = this.parent;
         var activeObj = extend({}, parent.activeObj, {}, true);
-        var img = parent.img;
         var _a = activeObj.activePoint, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
         var straightenObj = { straightenPoint: null };
         parent.notify('freehand-draw', { prop: 'getStraightenPoint', onPropertyChange: false,
@@ -3603,6 +3680,7 @@ var Draw = /** @class */ (function () {
             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: activeObj } });
             var _b = parent.img, destLeft_3 = _b.destLeft, destTop_3 = _b.destTop, destWidth_3 = _b.destWidth, destHeight_3 = _b.destHeight;
             var points = this.imgCanvasPoints;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             points.forEach(function (point) {
                 point.x = (point.ratioX * destWidth_3) + destLeft_3;
                 point.y = (point.ratioY * destHeight_3) + destTop_3;
@@ -3627,8 +3705,8 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.drawZoomPanImage = function (x, y) {
         var parent = this.parent;
-        parent.notify('shape', { prop: 'panObjColl', onPropertyChange: false, value: { xDiff: x, yDiff: y, panRegion: '' } });
-        parent.notify('freehand-draw', { prop: 'panFHDColl', onPropertyChange: false, value: { xDiff: x, yDiff: y, panRegion: '' } });
+        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+            value: { ctx: this.lowerContext, shape: 'pan', pen: 'pan', x: x, y: y, panRegion: '' } });
         this.renderImage(true);
         var obj = { width: 0, height: 0 };
         parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
@@ -3641,6 +3719,7 @@ var Draw = /** @class */ (function () {
         parent.notify('crop', { prop: 'setTempFlipPanPoint', onPropertyChange: false, value: { point: { x: 0, y: 0 } } });
     };
     Draw.prototype.openNewImage = function () {
+        var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
         var inMemoryContext = parent.inMemoryCanvas.getContext('2d');
@@ -3687,6 +3766,13 @@ var Draw = /** @class */ (function () {
                 }
             }
             this.imageOnLoad(this.openURL);
+            if (typeof (this.openURL) !== 'string' || this.openURL.indexOf('localhost') === -1) {
+                this.getImageSizeFromURL(this.openURL.toString(), function (imageSizeMB) {
+                    if (imageSizeMB !== null) {
+                        _this.parent.notify('toolbar', { prop: 'setInitialSize', value: { value: +imageSizeMB } });
+                    }
+                });
+            }
         }
         else {
             this.fileName = 'ImageEditor';
@@ -3704,6 +3790,29 @@ var Draw = /** @class */ (function () {
             parent.baseImg.src = parent.inMemoryCanvas.toDataURL();
         }
     };
+    Draw.prototype.getImageSizeFromURL = function (imageUrl, callback) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response, contentLength, imageSizeMB, ex_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, fetch(imageUrl, { method: 'HEAD' })];
+                    case 1:
+                        response = _a.sent();
+                        contentLength = parseInt(response.headers.get('content-length') || '0', 10);
+                        imageSizeMB = contentLength;
+                        callback(imageSizeMB);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        ex_1 = _a.sent();
+                        console.log(ex_1.message);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
     Draw.prototype.dlgBtnClick = function () {
         this.parent.export();
         this.applyDialogOption();
@@ -3765,7 +3874,10 @@ var Draw = /** @class */ (function () {
         }
     };
     Draw.prototype.open = function (data) {
-        document.getElementById(this.parent.element.id + '_dropArea').style.display = 'none';
+        var dropArea = document.getElementById(this.parent.element.id + '_dropArea');
+        if (dropArea) {
+            dropArea.style.display = 'none';
+        }
         if (!this.parent.disabled) {
             this.openURL = data;
             this.restoreOldImage();
@@ -3786,7 +3898,10 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.fileSelect = function (inputElement, args) {
         var parent = this.parent;
-        document.getElementById(parent.element.id + '_dropArea').style.display = 'none';
+        var dropArea = document.getElementById(parent.element.id + '_dropArea');
+        if (dropArea) {
+            dropArea.style.display = 'none';
+        }
         if (!parent.disabled) {
             var filesData = void 0;
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -3829,6 +3944,7 @@ var Draw = /** @class */ (function () {
             var URL_1 = window.URL;
             var url = URL_1.createObjectURL(filesData);
             this.openURL = url;
+            // eslint-disable-next-line max-len
             if (parent.isImageLoaded && !parent.isChangesSaved && (this.isImageEdited || parent.pointColl.length > 0 || parent.objColl.length > 0)) {
                 this.isFileChanged = true;
                 this.showDialogPopup();
@@ -4293,9 +4409,8 @@ var Draw = /** @class */ (function () {
                             this.isRotateZoom = false;
                             parent.frameObj.type = 'none';
                             ctx.filter = 'none';
-                            parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
-                            parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
-                                value: { context: ctx, points: null } });
+                            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                                value: { ctx: ctx, shape: 'iterate', pen: 'iterate', isPreventApply: null } });
                             parent.frameObj.type = 'bevel';
                             ctx.filter = filter === 'none' ? parent.canvasFilter : filter;
                         }

package/src/image-editor/action/export.d.ts

@@ -2,6 +2,7 @@ import { ImageEditor } from '../index';
 export declare class Export {
     private parent;
     private lowerContext;
+    private imageQuality;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;
@@ -15,6 +16,8 @@ export declare class Export {
     private toBlobFn;
     private exportToCanvas;
     private drawAnnotation;
+    private drawShape;
+    private drawPen;
     private downScaleImgCanvas;
     private updateFrame;
     private downloadImg;