@syncfusion/ej2-image-editor 27.1.48 → 27.1.51

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.1.48
+*  version : 27.1.51
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@26.1.40",
+  "_id": "@syncfusion/ej2-image-editor@27.1.50",
   "_inBundle": false,
-  "_integrity": "sha512-/biwoXBVMzjuI+sV5nD9nFQu0We46eZ7RIIijvBfnUFHvz+l1GwA715Rv9WXQAjpE5t79pqun0vlXR5LvJPPiw==",
+  "_integrity": "sha512-jbOqBMJzNwFx5r4c2P3xYh1n3aW2br4yKOwC8alxYLnRfDY6d5OTbWY62XEAdW30IqaQHH635RpdhZUkHVtGhg==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-image-editor/-/ej2-image-editor-26.1.40.tgz",
-  "_shasum": "0b718dd8a14ae25320bc8e0f6a0ae807da223e2b",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-27.1.50.tgz",
+  "_shasum": "f84391b62e7a8c4e10937b6603abaeb16e3a66d1",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
   "author": {
@@ -32,14 +32,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~27.1.48",
-    "@syncfusion/ej2-buttons": "~27.1.48",
-    "@syncfusion/ej2-dropdowns": "~27.1.48",
-    "@syncfusion/ej2-inputs": "~27.1.48",
-    "@syncfusion/ej2-navigations": "~27.1.48",
-    "@syncfusion/ej2-popups": "~27.1.48",
-    "@syncfusion/ej2-splitbuttons": "~27.1.48",
-    "markdown-spellcheck": "^1.3.1"
+    "@syncfusion/ej2-base": "~27.1.50",
+    "@syncfusion/ej2-buttons": "~27.1.51",
+    "@syncfusion/ej2-dropdowns": "~27.1.51",
+    "@syncfusion/ej2-inputs": "~27.1.50",
+    "@syncfusion/ej2-navigations": "~27.1.51",
+    "@syncfusion/ej2-popups": "~27.1.50",
+    "@syncfusion/ej2-splitbuttons": "~27.1.50"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -69,7 +68,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "27.1.48",
+  "version": "27.1.51",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -1094,7 +1094,7 @@ var Draw = /** @class */ (function () {
                 }
                 this.drawArrowHead(canvasDraw, true);
                 this.drawArrowHead(canvasDraw, false);
-                if (actObj.end === 'none') {
+                if (actObj.end === 'none' && actObj.start !== 'circle' && actObj.start !== 'square') {
                     this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
                 }
                 canvasDraw.fillStyle = tempFillStyle;
@@ -1498,9 +1498,10 @@ var Draw = /** @class */ (function () {
         var isStartArrow = actObj.start === 'arrow';
         var isEndArrow = actObj.end === 'arrow';
         var isEndCircleOrSquare = actObj.end === 'circle' || actObj.end === 'square';
+        var isStartCircleOrSquare = actObj.start === 'circle' || actObj.start === 'square';
         if ((start && actObj.triangleDirection === 'left' || actObj.triangleDirection === 'right') &&
-            ((isStartArrow && actObj.end === 'none') || (isStartArrow && !isEndCircleOrSquare)) ||
-            (!start && (isEndArrow && actObj.start === 'none' || !isStartArrow && !isEndCircleOrSquare))) {
+            ((isStartArrow && actObj.end === 'none') || (isStartArrow && !isEndCircleOrSquare && !isStartCircleOrSquare)) ||
+            (!start && (isEndArrow && actObj.start === 'none' || !isStartArrow && !isEndCircleOrSquare && !isStartCircleOrSquare))) {
             this.shapeLine(canvasDraw, startX, startY, endX, endY);
         }
         if ((start && actObj.triangleDirection === 'left') || (!start && actObj.triangleDirection === 'right')) {
@@ -1535,9 +1536,10 @@ var Draw = /** @class */ (function () {
         var angle = Math.atan2(this.dy, this.dx);
         var isStartArrowSolid = actObj.start === 'arrowSolid';
         var isEndArrowSolid = actObj.end === 'arrowSolid';
+        var isStartCircleOrSquare = actObj.start === 'circle' || actObj.start === 'square';
         var isEndCircleOrSquare = actObj.end === 'circle' || actObj.end === 'square';
-        if ((start && (isStartArrowSolid && actObj.end === 'none') || (isStartArrowSolid && !isEndCircleOrSquare)) ||
-            (!start && (isEndArrowSolid && actObj.start === 'none' || !isStartArrowSolid && !isEndCircleOrSquare))) {
+        if ((start && (isStartArrowSolid && actObj.end === 'none') || (isStartArrowSolid && !isEndCircleOrSquare && !isStartCircleOrSquare)) ||
+            (!start && (isEndArrowSolid && actObj.start === 'none' || !isStartArrowSolid && !isEndCircleOrSquare && !isStartCircleOrSquare))) {
             this.shapeLine(canvasDraw, startX, startY, endX, endY);
         }
         if ((start && actObj.triangleDirection === 'left') || (!start && actObj.triangleDirection === 'right')) {
@@ -2540,11 +2542,19 @@ var Draw = /** @class */ (function () {
                 parent.notify('filter', { prop: 'update-finetunes', onPropertyChange: false });
             }
             proxy.lowerContext.drawImage(parent.baseImg, 0, 0, proxy.parent.lowerCanvas.width, proxy.parent.lowerCanvas.height);
+            var isCropped = false;
+            var isSameDimension = false;
+            if (parent.isImageUpdated) {
+                var _a = parent.img, srcWidth = _a.srcWidth, srcHeight = _a.srcHeight;
+                var _b = parent.baseImgCanvas, width = _b.width, height = _b.height;
+                isCropped = srcWidth !== width || srcHeight !== height;
+                isSameDimension = parent.baseImg.width === width && parent.baseImg.height === height;
+            }
             hideSpinner(parent.element);
             parent.element.style.opacity = '1';
             proxy.updateBaseImgCanvas();
             var fileOpened = { fileName: _this.fileName, fileType: _this.fileType, isValidImage: true };
-            proxy.updateCanvas();
+            proxy.updateCanvas(isCropped, isSameDimension);
             if (parent.currObjType.isUndoZoom) {
                 parent.currObjType.isUndoZoom = false;
                 proxy.parent.lowerCanvas.style.display = 'block';
@@ -2586,12 +2596,26 @@ var Draw = /** @class */ (function () {
         parent.baseImgCanvas.height = parent.baseImg.height;
         parent.baseImgCanvas.getContext('2d').drawImage(parent.baseImg, 0, 0);
     };
-    Draw.prototype.updateCanvas = function () {
+    Draw.prototype.updateCanvas = function (isCropped, isSameDimension) {
         var parent = this.parent;
-        if (!parent.isImageUpdated) {
+        if (!parent.isImageUpdated || !isCropped) {
             parent.img.srcWidth = parent.baseImgCanvas.width;
             parent.img.srcHeight = parent.baseImgCanvas.height;
         }
+        else if (!isSameDimension && isCropped) {
+            parent.img.srcLeft = 0;
+            parent.img.srcTop = 0;
+            parent.img.srcWidth = parent.baseImgCanvas.width;
+            parent.img.srcHeight = parent.baseImgCanvas.height;
+            parent.currSelectionPoint = null;
+            parent.cropObj = { cropZoom: 0, defaultZoom: 0, totalPannedPoint: { x: 0, y: 0 }, totalPannedClientPoint: { x: 0, y: 0 },
+                totalPannedInternalPoint: { x: 0, y: 0 }, tempFlipPanPoint: { x: 0, y: 0 }, activeObj: {}, rotateFlipColl: [],
+                degree: 0, currFlipState: '', straighten: 0, destPoints: { startX: 0, startY: 0, width: 0, height: 0 },
+                srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '', isBrightAdjust: false,
+                zoomFactor: 0, previousZoomValue: 0, aspectWidth: null, aspectHeight: null, frame: 'none', straightenZoom: 0,
+                adjustmentLevel: { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0,
+                    exposure: 0, transparency: 100, sharpen: false, bw: false }, currentFilter: '' };
+        }
         var obj = { width: 0, height: 0 };
         parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
             value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj, isImgShape: null } });

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

@@ -49,6 +49,9 @@ export declare class Selection {
     private isPreventShaping;
     private isGrabbing;
     private isTouchDblClick;
+    private isMouseDown;
+    private isMouseUp;
+    private mouseWheel;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;

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

@@ -39,6 +39,9 @@ var Selection = /** @class */ (function () {
         this.isSliderActive = false;
         this.arrowShape = [ArrowheadType.None, ArrowheadType.SolidArrow];
         this.isTouchDblClick = false;
+        this.isMouseDown = false;
+        this.isMouseUp = false;
+        this.mouseWheel = 0;
         this.parent = parent;
         this.addEventListener();
     }
@@ -349,6 +352,7 @@ var Selection = /** @class */ (function () {
         this.isPreventDragging = false;
         this.timer = undefined;
         this.tempObjColl = undefined;
+        this.mouseWheel = 0;
         this.textRow = 1;
         this.mouseDownPoint = { x: 0, y: 0 };
         this.previousPoint = { x: 0, y: 0 };
@@ -369,6 +373,7 @@ var Selection = /** @class */ (function () {
         this.mouseDown = '';
         this.isSliderActive = false;
         this.arrowShape = [ArrowheadType.None, ArrowheadType.SolidArrow];
+        this.isMouseDown = this.isMouseUp = false;
     };
     Selection.prototype.performTabAction = function () {
         var parent = this.parent;
@@ -1368,6 +1373,12 @@ var Selection = /** @class */ (function () {
                 parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false, value: { shapeSettings: shapeResizingArgs.currentShapeSettings, allowShapeOverflow: shapeResizingArgs.allowShapeOverflow } });
             }
             else {
+                if (this.isMouseDown) {
+                    shapeResizingArgs.action = 'resize-start';
+                }
+                else if (this.isMouseUp) {
+                    shapeResizingArgs.action = 'resize-end';
+                }
                 var selectionResizingArgs = { action: shapeResizingArgs.action,
                     previousSelectionSettings: { type: parent.getSelectionType(parent.activeObj.shape),
                         startX: shapeResizingArgs.previousShapeSettings.startX,
@@ -3161,6 +3172,8 @@ var Selection = /** @class */ (function () {
         }
         var imageEditorClickEventArgs = { point: this.setXYPoints(e) };
         parent.trigger('click', imageEditorClickEventArgs);
+        this.isMouseDown = true;
+        this.isMouseUp = false;
         this.clickEvent(imageEditorClickEventArgs, e);
     };
     Selection.prototype.getImagePoints = function (x, y) {
@@ -3522,6 +3535,7 @@ var Selection = /** @class */ (function () {
                         }
                     }
                     if (type !== '') {
+                        parent.isZoomBtnClick = true;
                         parent.notify('draw', { prop: 'performPointZoom', onPropertyChange: false,
                             value: { x: center.x, y: center.y, type: type, isResize: null } });
                     }
@@ -3604,11 +3618,14 @@ var Selection = /** @class */ (function () {
                 this.dragCanvas = parent.togglePan = true;
             }
         }
+        this.isMouseDown = false;
+        this.isMouseUp = false;
     };
     Selection.prototype.mouseUpEventHandler = function (e) {
         var parent = this.parent;
         var id = parent.element.id;
-        parent.isKBDNavigation = false;
+        parent.isKBDNavigation = this.isMouseDown = false;
+        this.isMouseUp = true;
         if (!Browser.isDevice && ((parent.element.querySelector('#' + id + '_contextualToolbar') &&
             !parent.element.querySelector('#' + id + '_contextualToolbar').parentElement.classList.contains('e-hide')) ||
             (parent.element.querySelector('#' + id + '_headWrapper')
@@ -3778,6 +3795,11 @@ var Selection = /** @class */ (function () {
                         parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
                     }
                 }
+                else if (isCropSelection && this.isMouseUp && parent.cursor.indexOf('resize') > -1) {
+                    var previousShapeSettings = this.updatePrevShapeSettings();
+                    var shapeResizingArgs = { cancel: false, action: 'resize-end', previousShapeSettings: previousShapeSettings };
+                    this.triggerShapeChange(shapeResizingArgs, shapeResizingArgs, 'resize');
+                }
                 if (parent.activeObj) {
                     var isCropSelection_1 = false;
                     var splitWords_1;
@@ -3897,6 +3919,7 @@ var Selection = /** @class */ (function () {
             parent.isShapeDrawing = false;
             parent.notify('freehand-draw', { prop: 'resetSelPoints', onPropertyChange: false });
         }
+        this.isMouseUp = false;
     };
     Selection.prototype.adjustActObjForLineArrow = function (obj) {
         var isAdjusted = false;
@@ -4352,6 +4375,7 @@ var Selection = /** @class */ (function () {
             case (e.ctrlKey && '+'):
                 if ((parent.zoomSettings.zoomTrigger & ZoomTrigger.Commands) === ZoomTrigger.Commands) {
                     this.zoomType = 'Commands';
+                    parent.isZoomBtnClick = true;
                     parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                         value: { zoomFactor: .1, zoomPoint: null }, isResize: null });
                     parent.notify('draw', { prop: 'redrawDownScale' });
@@ -4368,6 +4392,7 @@ var Selection = /** @class */ (function () {
             case (e.ctrlKey && '-'):
                 if ((parent.zoomSettings.zoomTrigger & ZoomTrigger.Commands) === ZoomTrigger.Commands) {
                     this.zoomType = 'Commands';
+                    parent.isZoomBtnClick = true;
                     parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                         value: { zoomFactor: -.1, zoomPoint: null }, isResize: null });
                     parent.notify('draw', { prop: 'redrawDownScale' });
@@ -4504,6 +4529,11 @@ var Selection = /** @class */ (function () {
         e.stopImmediatePropagation();
     };
     Selection.prototype.handleScroll = function (e) {
+        this.mouseWheel++;
+        if (this.mouseWheel === 2) {
+            this.mouseWheel = 0;
+            return;
+        }
         var parent = this.parent;
         var x;
         var y;
@@ -4539,6 +4569,7 @@ var Selection = /** @class */ (function () {
                 }
             }
             if (type !== '') {
+                parent.isZoomBtnClick = true;
                 parent.notify('draw', { prop: 'performPointZoom', onPropertyChange: false,
                     value: { x: x, y: y, type: type, isResize: null } });
                 parent.notify('draw', { prop: 'redrawDownScale' });
@@ -4903,6 +4934,12 @@ var Selection = /** @class */ (function () {
                     parent.editCompleteArgs = shapeChangingArgs;
                 }
                 else {
+                    if (this.isMouseDown) {
+                        shapeChangingArgs.action = 'resize-start';
+                    }
+                    else if (this.isMouseUp) {
+                        shapeChangingArgs.action = 'resize-end';
+                    }
                     var selectionChangingArgs = { action: shapeChangingArgs.action,
                         previousSelectionSettings: { type: parent.getSelectionType(parent.activeObj.shape),
                             startX: shapeChangingArgs.previousShapeSettings.startX,

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

@@ -404,6 +404,10 @@ var Shape = /** @class */ (function () {
                     parent.activeObj.opacity = opacity;
                 }
                 strokeSettings.strokeWidth = strokeWidth ? strokeWidth : strokeSettings.strokeWidth;
+                var shape = parent.activeObj.shape;
+                if ((shape === 'rectangle' || shape === 'ellipse') && strokeWidth === 0) {
+                    strokeSettings.strokeWidth = 0;
+                }
                 strokeSettings.strokeColor = strokeColor ? strokeColor : strokeSettings.strokeColor;
                 strokeSettings.fillColor = fillColor ? fillColor : strokeSettings.fillColor;
                 strokeSettings.radius = radius ? radius : strokeSettings.radius;

package/src/image-editor/action/undo-redo.js

@@ -1103,12 +1103,22 @@ var UndoRedo = /** @class */ (function () {
         var parent = this.parent;
         for (var i = 0; i < parent.objColl.length; i++) {
             var obj = parent.objColl[i];
+            var isUpdated = false;
             if (obj.shape === 'line' || obj.shape === 'arrow') {
                 if (obj.activePoint.width < 0) {
                     obj.activePoint.width = Math.abs(obj.activePoint.width);
+                    isUpdated = true;
                 }
                 if (obj.activePoint.height < 0) {
                     obj.activePoint.height = Math.abs(obj.activePoint.height);
+                    isUpdated = true;
+                }
+                if (isUpdated) {
+                    var activeObj = extend({}, parent.activeObj, {}, true);
+                    parent.activeObj = obj;
+                    parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
+                    obj = parent.activeObj;
+                    parent.activeObj = activeObj;
                 }
             }
         }

package/src/image-editor/base/image-editor.js

@@ -736,6 +736,8 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: browseObj } });
         var supportObj = { key: 'SupportText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
+        var andObj = { key: 'And' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: andObj } });
         var dropAreaElement = this.createElement('div', { id: this.element.id + '_dropArea', className: 'e-ie-drop-area', attrs: { style: 'position: relative;' } });
         var dropIconElement = this.createElement('span', { className: 'e-ie-drop-icon e-icons e-image', attrs: { style: 'position: absolute;' } });
         var dropContentElement = this.createElement('span', { className: 'e-ie-drop-content', attrs: { style: 'position: absolute; display: none;' } });
@@ -751,7 +753,7 @@ var ImageEditor = /** @class */ (function (_super) {
         dropAnchorElement.href = '';
         minDropAnchorElem.href = '';
         var dropInfoElement = this.createElement('span', { className: 'e-ie-drop-info', attrs: { position: 'absolute' } });
-        dropInfoElement.textContent = supportObj['value'] + ' SVG, PNG, and JPG';
+        dropInfoElement.textContent = supportObj['value'] + ' SVG, PNG, ' + andObj['value'] + ' JPG';
         var dropUploader = dropAreaElement.appendChild(this.createElement('input', {
             id: this.element.id + '_dropfileUpload', className: 'e-fileUpload e-image-upload'
         }));
@@ -995,7 +997,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('draw', { prop: 'open', value: { data: data } });
         }
         else {
-            this.updateImage(data, imageSettings.backgroundColor);
+            this.updateImage(data, imageSettings ? imageSettings.backgroundColor : null);
         }
     };
     /**
@@ -2221,7 +2223,7 @@ var ImageEditor = /** @class */ (function (_super) {
     };
     ImageEditor.prototype.updateImage = function (data, imageBackgroundColor) {
         var _this = this;
-        if (data || imageBackgroundColor) {
+        if (data || imageBackgroundColor || imageBackgroundColor === '') {
             var prevCropObj_1 = extend({}, this.cropObj, {}, true);
             var object = { currObj: {} };
             this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -2263,7 +2265,7 @@ var ImageEditor = /** @class */ (function (_super) {
                     }
                 }, 100);
             }
-            if (imageBackgroundColor) {
+            if (imageBackgroundColor || imageBackgroundColor === '') {
                 this.notify('draw', { prop: 'imageBackgroundColor', onPropertyChange: false, value: { color: imageBackgroundColor } });
                 this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
                 if (!data) {

package/src/image-editor/renderer/toolbar.js

@@ -201,7 +201,8 @@ var ToolbarModule = /** @class */ (function () {
             BorderRadius: 'Border Radius',
             TextOutlineColor: 'Outline Color',
             TextOutlineWidth: 'Outline Width',
-            PixelSize: 'Pixel Size'
+            PixelSize: 'Pixel Size',
+            And: 'and'
         };
         this.l10n = new L10n('image-editor', this.defaultLocale, this.parent.locale);
     };
@@ -869,13 +870,11 @@ var ToolbarModule = /** @class */ (function () {
             zoomIn.addEventListener('mousedown', this.zoomInBtnMouseDownHandler.bind(this));
             zoomIn.addEventListener('mouseup', this.zoomBtnMouseUpHandler.bind(this));
             zoomIn.addEventListener('click', this.zoomInBtnClickHandler.bind(this));
-            zoomIn.addEventListener('touchstart', this.zoomInBtnClickHandler.bind(this));
         }
         if (zoomOut) {
             zoomOut.addEventListener('mousedown', this.zoomOutBtnMouseDownHandler.bind(this));
             zoomOut.addEventListener('mouseup', this.zoomBtnMouseUpHandler.bind(this));
             zoomOut.addEventListener('click', this.zoomOutBtnClickHandler.bind(this));
-            zoomIn.addEventListener('touchstart', this.zoomInBtnClickHandler.bind(this));
         }
     };
     ToolbarModule.prototype.widthPress = function (e) {
@@ -1391,6 +1390,9 @@ var ToolbarModule = /** @class */ (function () {
                 zOrderElement.classList.remove('e-overlay');
             }
         }
+        if (zOrderElement && (parent.shapeColl.length === 0 || (obj['freehandDrawSelectedId'] && parent.shapeColl.length === 1))) {
+            zOrderElement.classList.add('e-overlay');
+        }
     };
     ToolbarModule.prototype.renderStraightenSlider = function () {
         var parent = this.parent;
@@ -1860,11 +1862,11 @@ var ToolbarModule = /** @class */ (function () {
                 fileSize = Math.floor(blob.size / 1024);
                 if (fileSize > 1000) {
                     var megabytes = fileSize / 1024;
-                    imageNameLabel.innerHTML = 'Image size: ' + megabytes.toFixed(2) + ' MB';
+                    imageNameLabel.innerHTML = this.l10n.getConstant('ImageSize') + ': ' + megabytes.toFixed(2) + ' MB';
                     fileSize = +megabytes.toFixed(2);
                 }
                 else {
-                    imageNameLabel.innerHTML = 'Image size: ' + fileSize.toFixed(2) + ' KB';
+                    imageNameLabel.innerHTML = this.l10n.getConstant('ImageSize') + ': ' + fileSize.toFixed(2) + ' KB';
                     fileSize = +fileSize.toFixed(2);
                 }
                 if (Browser.isDevice) {
@@ -1882,6 +1884,50 @@ var ToolbarModule = /** @class */ (function () {
                 this.fileSize = fileSize;
             }).bind(this), 'image/jpeg', quality);
         }
+        else if (!isNullOrUndefined(fileType) && fileType.toLowerCase() === 'png') {
+            if (Browser.isDevice) {
+                canvas.style.display = 'none';
+            }
+            else {
+                ctx.drawImage(tempCanvas, 0, 0);
+                tempCanvas.toBlob((function (blob) {
+                    fileSize = Math.floor(blob.size / 1024);
+                    if (fileSize > 1000) {
+                        var megabytes = fileSize / 1024;
+                        imageNameLabel.innerHTML = this.l10n.getConstant('ImageSize') + ': ' + megabytes.toFixed(2) + ' MB';
+                        fileSize = +megabytes.toFixed(2);
+                    }
+                    else {
+                        imageNameLabel.innerHTML = this.l10n.getConstant('ImageSize') + ': ' + fileSize.toFixed(2) + ' KB';
+                        fileSize = +fileSize.toFixed(2);
+                    }
+                    this.fileSize = fileSize;
+                }).bind(this), 'image/png', 1);
+            }
+        }
+        else if (!isNullOrUndefined(fileType) && fileType.toLowerCase() === 'svg') {
+            if (Browser.isDevice) {
+                canvas.style.display = 'none';
+            }
+            else {
+                ctx.drawImage(tempCanvas, 0, 0);
+                var svgDataUrl = tempCanvas.toDataURL('image/svg+xml');
+                var base64Data = svgDataUrl.split(',')[1];
+                var binaryStringLength = base64Data.length;
+                var rawByteSize = binaryStringLength;
+                var fileSize_1 = Math.floor(rawByteSize / 1024); // KB
+                if (fileSize_1 > 1000) {
+                    var megabytes = fileSize_1 / 1024; // Convert to MB
+                    imageNameLabel.innerHTML = this.l10n.getConstant('ImageSize') + ': ' + megabytes.toFixed(2) + ' MB';
+                    fileSize_1 = +megabytes.toFixed(2);
+                }
+                else {
+                    imageNameLabel.innerHTML = this.l10n.getConstant('ImageSize') + ': ' + fileSize_1.toFixed(2) + ' KB';
+                    fileSize_1 = +fileSize_1.toFixed(2);
+                }
+            }
+            this.fileSize = fileSize;
+        }
         else {
             if (Browser.isDevice) {
                 canvas.style.display = 'none';
@@ -5427,6 +5473,7 @@ var ToolbarModule = /** @class */ (function () {
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
                     parent.isFrameBtnClick = true;
                     parent.curFrameObjEvent = { previousFrameSetting: parent.tempFrameObj, currentFrameSetting: parent.frameObj };
+                    parent.notify('draw', { prop: 'triggerFrameChange', value: { prevFrameSettings: parent.tempFrameObj, obj: { frameChangeEventArgs: null } } });
                     break;
                 case 'redact':
                     parent.currObjType.isRedact = true;
@@ -5553,6 +5600,7 @@ var ToolbarModule = /** @class */ (function () {
                 parent.img.destTop += (parent.cxtTbarHeight / 2);
             }
             this.callFrameToolbar();
+            parent.notify('draw', { prop: 'triggerFrameChange', value: { prevFrameSettings: parent.frameObj, obj: { frameChangeEventArgs: null } } });
         }
     };
     ToolbarModule.prototype.zoomToFrameRange = function () {