@syncfusion/ej2-image-editor 22.2.10 → 23.1.36

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

@@ -7,6 +7,7 @@ export declare class Shape {
     private strokeSettings;
     private keyHistory;
     private prevObj;
+    private shapeImg;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;
@@ -30,8 +31,10 @@ export declare class Shape {
     private setPointCollForLineAndArrow;
     private prevObjColl;
     private drawShapeText;
+    private drawShapeImageEvent;
     private drawShapeTextEvent;
     private initializeTextShape;
+    private drawImage;
     private redrawActObj;
     private apply;
     private setCenterPoints;
@@ -57,6 +60,11 @@ export declare class Shape {
     private updatePathRatio;
     private stopPathDrawing;
     private findTextTarget;
+    private fileChanged;
+    private onLoadImgShape;
+    private updateImgCanvas;
+    private updateObj;
+    private resizeImage;
     private setTextBoxPos;
     private setTextBoxPoints;
     private selectedText;

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

@@ -24,9 +24,10 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.shape = function (args) {
         this.initShapePvtProps();
+        var uploader;
         switch (args.prop) {
             case 'drawEllipse':
-                this.drawEllipse(args.value['x'], args.value['y'], args.value['radiusX'], args.value['radiusY'], args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor']);
+                this.drawEllipse(args.value['x'], args.value['y'], args.value['radiusX'], args.value['radiusY'], args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor'], args.value['degree']);
                 break;
             case 'drawLine':
                 this.drawLine(args.value['startX'], args.value['startY'], args.value['endX'], args.value['endY'], args.value['strokeWidth'], args.value['strokeColor']);
@@ -38,7 +39,7 @@ var Shape = /** @class */ (function () {
                 this.drawPath(args.value['pointColl'], args.value['strokeWidth'], args.value['strokeColor']);
                 break;
             case 'drawRectangle':
-                this.drawRectangle(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor']);
+                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']);
                 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']);
@@ -121,10 +122,16 @@ var Shape = /** @class */ (function () {
             case 'wireEvent':
                 EventHandler.add(this.parent.upperCanvas, 'dblclick', this.findTextTarget, this);
                 EventHandler.add(this.parent.textArea, 'mousedown', this.findTextTarget, this);
+                uploader = document.getElementById(this.parent.element.id + '_fileUpload');
+                if (uploader) {
+                    EventHandler.add(uploader, 'change', this.fileChanged, this);
+                }
                 break;
             case 'unWireEvent':
                 EventHandler.remove(this.parent.upperCanvas, 'dblclick', this.findTextTarget);
                 EventHandler.remove(this.parent.textArea, 'mousedown', this.findTextTarget);
+                uploader = document.getElementById(this.parent.element.id + '_fileUpload');
+                EventHandler.remove(uploader, 'change', this.fileChanged);
                 break;
             case 'getShapeSetting':
                 this.getShapeSetting(args.value['id'], args.value['obj']);
@@ -200,7 +207,7 @@ var Shape = /** @class */ (function () {
                 this.initializeTextShape(args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['strokeColor']);
                 break;
             case 'stopPathDrawing':
-                this.stopPathDrawing(args.value['e']);
+                this.stopPathDrawing(args.value['e'], args.value['isApply']);
                 break;
             case 'updateArrowRatio':
                 this.updateArrowRatio(args.value['obj']);
@@ -208,9 +215,18 @@ var Shape = /** @class */ (function () {
             case 'getSquarePointForRotatedShape':
                 this.getSquarePointForRotatedShape(args.value['obj'], args.value['object']);
                 break;
+            case 'drawImage':
+                this.drawImage(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['src'], args.value['degree'], args.value['isAspectRatio']);
+                break;
             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;
         }
     };
     Shape.prototype.getModuleName = function () {
@@ -223,6 +239,11 @@ var Shape = /** @class */ (function () {
         if (this.parent.upperCanvas) {
             this.upperContext = this.parent.upperCanvas.getContext('2d');
         }
+        if (isNullOrUndefined(this.shapeImg)) {
+            this.shapeImg = this.parent.createElement('img', {
+                id: this.parent.element.id + '_shapeImg', attrs: { name: 'Image', crossorigin: 'anonymous' }
+            });
+        }
     };
     Shape.prototype.reset = function () {
         this.textSettings =
@@ -481,15 +502,8 @@ var Shape = /** @class */ (function () {
             this.initializeTextShape(text, fontFamily, fontSize, bold, italic, strokeColor);
             parent.currObjType.isText = parent.currObjType.isInitialText = true;
             if (isNullOrUndefined(parent.activeObj.textSettings.fontSize)) {
-                if (parent.img.destWidth > parent.img.destHeight) {
-                    parent.activeObj.textSettings.fontSize = (parent.img.destWidth / 15);
-                }
-                else {
-                    parent.activeObj.textSettings.fontSize = (parent.img.destHeight / 15);
-                }
-                if (parent.activeObj.textSettings.fontSize < 20) {
-                    parent.activeObj.textSettings.fontSize = 20;
-                }
+                parent.getFontSizes();
+                parent.activeObj.textSettings.fontSize = parseInt(parent.fontSizeColl[(parseInt('3', 10) - 1)].text, 10);
             }
             if (parent.img.destWidth < 100) {
                 parent.activeObj.textSettings.fontSize = Math.floor((parent.img.destWidth / 20));
@@ -538,6 +552,36 @@ var Shape = /** @class */ (function () {
             }
         }
     };
+    Shape.prototype.drawShapeImageEvent = function (shapeChangingArgs, isSelect) {
+        var parent = this.parent;
+        this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings);
+        parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
+        parent.objColl.push(parent.activeObj);
+        var prevCropObj = extend({}, parent.cropObj, {}, true);
+        parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+            value: { operation: 'shapeTransform', previousObj: this.prevObj, previousObjColl: this.prevObj.objColl,
+                previousPointColl: this.prevObj.pointColl, previousSelPointColl: this.prevObj.selPointColl,
+                previousCropObj: prevCropObj, previousText: null,
+                currentText: null, previousFilter: null, isCircleCrop: null } });
+        parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false,
+            value: { obj: parent.objColl[parent.objColl.length - 1] } });
+        if (isSelect) {
+            if (!isBlazor()) {
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
+                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
+                parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+            }
+            else {
+                parent.updateToolbar(parent.element, parent.activeObj.shape);
+                parent.updateToolbar(parent.element, 'quickAccessToolbar', parent.activeObj.shape);
+            }
+        }
+        else {
+            parent.okBtn();
+        }
+        parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: { bool: true } });
+    };
     Shape.prototype.drawShapeTextEvent = function (shapeChangingArgs) {
         var parent = this.parent;
         this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings);
@@ -586,6 +630,10 @@ var Shape = /** @class */ (function () {
         parent.activeObj.textSettings.bold = bold || parent.activeObj.textSettings.bold;
         parent.activeObj.textSettings.italic = italic || parent.activeObj.textSettings.italic;
     };
+    Shape.prototype.drawImage = function (x, y, width, height, src, degree, isAspectRatio) {
+        this.initializeShape('image');
+        this.onLoadImgShape(x, y, width, height, src, null, degree, isAspectRatio);
+    };
     Shape.prototype.redrawActObj = function (x, y, isMouseDown) {
         var splitWords;
         var parent = this.parent;
@@ -707,6 +755,7 @@ var Shape = /** @class */ (function () {
         switch (parent.activeObj.shape) {
             case 'ellipse':
                 parent.activeObj.activePoint.width = shapeSettings.radius * 2;
+                parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
                 break;
             case 'line':
             case 'arrow':
@@ -719,6 +768,10 @@ var Shape = /** @class */ (function () {
                 parent.activeObj.textSettings.fontFamily = shapeSettings.fontFamily;
                 break;
             case 'rectangle':
+            case 'image':
+                if (shapeSettings.degree) {
+                    parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
+                }
                 break;
         }
         if (parent.activeObj.shape === 'text' && parent.activeObj.textSettings) {
@@ -835,9 +888,12 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.iterateObjColl = function () {
         var parent = this.parent;
-        for (var i = 0, len = parent.objColl.length; i < len; i++) {
-            this.apply(parent.objColl[i].shape, parent.objColl[i]);
-            this.refreshActiveObj();
+        if (parent.objColl.length > 0) {
+            for (var i = 0, len = parent.objColl.length; i < len; i++) {
+                this.apply(parent.objColl[i].shape, parent.objColl[i]);
+                this.refreshActiveObj();
+            }
+            parent.notify('draw', { prop: 'applyFrame', value: { ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true } });
         }
     };
     Shape.prototype.updImgRatioForActObj = function () {
@@ -903,6 +959,7 @@ var Shape = /** @class */ (function () {
                 this.apply(currObj.shape, currObj);
                 this.refreshActiveObj();
                 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);
@@ -921,6 +978,7 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.redrawObj = function (degree) {
         var parent = this.parent;
+        var isShape = false;
         if (this.parent.objColl.length > 0) {
             if (degree === 'horizontal' || degree === 'vertical' || degree === 'Horizontal' || degree === 'Vertical' ||
                 degree === 'horizontalVertical' || degree === 'verticalHorizontal') {
@@ -935,8 +993,12 @@ var Shape = /** @class */ (function () {
                     var splitWords = parent.objColl[i].shape.split('-');
                     if (splitWords[0] !== 'crop') {
                         this.apply(parent.objColl[i].shape, parent.objColl[i]);
+                        isShape = true;
                     }
                 }
+                if (isShape) {
+                    parent.notify('draw', { prop: 'applyFrame', value: { ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true } });
+                }
                 this.lowerContext.filter = tempFilter;
             }
         }
@@ -1477,7 +1539,7 @@ var Shape = /** @class */ (function () {
             currPoint.ratioY = (currPoint.y - parent.img.destTop) / parent.img.destHeight;
         }
     };
-    Shape.prototype.stopPathDrawing = function (e) {
+    Shape.prototype.stopPathDrawing = function (e, isApply) {
         var parent = this.parent;
         if (parent.activeObj.shape === 'path') {
             var obj = { shape: null };
@@ -1496,7 +1558,7 @@ var Shape = /** @class */ (function () {
                 prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
                 parent.notify('selection', { prop: 'setCurrentDrawingShape', value: { value: '' } });
                 parent.currObjType.isDragging = false;
-                if (e.type !== 'touchstart') {
+                if (e && e.type !== 'touchstart' && isNullOrUndefined(isApply)) {
                     parent.activeObj.pointColl.pop();
                 }
                 this.updatePathRatio(parent.activeObj);
@@ -1507,7 +1569,9 @@ var Shape = /** @class */ (function () {
                         previousCropObj: prevCropObj, previousText: null,
                         currentText: null, previousFilter: null, isCircleCrop: null } });
                 parent.objColl.pop();
-                parent.notify('selection', { prop: 'mouseUpEventHandler', value: { e: e } });
+                if (e) {
+                    parent.notify('selection', { prop: 'mouseUpEventHandler', value: { e: e } });
+                }
                 parent.notify('draw', { prop: 'setNewPath', value: { bool: true } });
                 if (parent.objColl[parent.objColl.length - 1]) {
                     parent.selectShape(parent.objColl[parent.objColl.length - 1].currIndex);
@@ -1524,7 +1588,7 @@ var Shape = /** @class */ (function () {
     Shape.prototype.findTextTarget = function (e) {
         var parent = this.parent;
         if (parent.activeObj.shape !== 'text') {
-            this.stopPathDrawing(e);
+            this.stopPathDrawing(e, null);
             return;
         }
         var x;
@@ -1539,11 +1603,16 @@ var Shape = /** @class */ (function () {
             parent.notify('selection', { prop: 'setTouchEndPoint', onPropertyChange: false,
                 value: { x: e.touches[0].clientX, y: e.touches[0].clientY } });
         }
-        parent.notify('toolbar', { prop: 'setPreventZoomBtn', onPropertyChange: false, value: { isPrevent: true } });
-        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
-                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-        parent.notify('toolbar', { prop: 'setPreventZoomBtn', onPropertyChange: false, value: { isPrevent: false } });
-        parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
+        if (!isBlazor()) {
+            parent.notify('toolbar', { prop: 'setPreventZoomBtn', onPropertyChange: false, value: { isPrevent: true } });
+            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
+                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+            parent.notify('toolbar', { prop: 'setPreventZoomBtn', onPropertyChange: false, value: { isPrevent: false } });
+            parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
+        }
+        else {
+            parent.updateToolbar(parent.element, 'enableDisableToolbarBtn', 'textAreaClicked');
+        }
         if (!isNullOrUndefined(x) && !isNullOrUndefined(y)) {
             var bbox = this.parent.lowerCanvas.getBoundingClientRect();
             x -= bbox.left;
@@ -1581,6 +1650,8 @@ var Shape = /** @class */ (function () {
                 this.upperContext.clearRect(0, 0, this.parent.upperCanvas.width, this.parent.upperCanvas.height);
                 this.lowerContext.clearRect(0, 0, this.parent.upperCanvas.width, this.parent.upperCanvas.height);
                 parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
+                this.parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
+                this.parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
                 if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
                     parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                         value: { context: this.lowerContext, isSave: null, isFlip: null } });
@@ -1631,6 +1702,127 @@ var Shape = /** @class */ (function () {
             parent.textArea.style.display = 'block';
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Shape.prototype.fileChanged = function (e) {
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var filesData = e.target.files[0];
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var fileData = filesData;
+        var fileExtension = fileData.name && fileData.name.split('.')[1].toLowerCase();
+        if (fileExtension && ['jpg', 'jpeg', 'png', 'svg'].indexOf(fileExtension) === -1) {
+            this.refreshActiveObj();
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/tslint/config, @typescript-eslint/no-explicit-any
+        var URL = window.URL;
+        var url = URL.createObjectURL(e.target.files[0]);
+        this.onLoadImgShape(null, null, null, null, url.toString(), true);
+        if (!isBlazor()) {
+            document.getElementById(this.parent.element.id + '_fileUpload').value = '';
+        }
+    };
+    Shape.prototype.onLoadImgShape = function (x, y, width, height, url, isSelect, degree, isAspectRatio) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        var proxy = this;
+        if (typeof (url) === 'string') {
+            this.shapeImg.src = url;
+        }
+        else {
+            this.parent.inMemoryCanvas.width = url.width;
+            this.parent.inMemoryCanvas.height = url.height;
+            this.parent.inMemoryCanvas.getContext('2d').putImageData(url, 0, 0);
+            this.shapeImg.src = this.parent.inMemoryCanvas.toDataURL();
+        }
+        this.prevObjColl();
+        this.parent.activeObj.shape = 'image';
+        this.initShapeProps();
+        this.shapeImg.onload = function () {
+            proxy.upperContext.drawImage(proxy.shapeImg, 0, 0, proxy.shapeImg.width, proxy.shapeImg.height);
+            proxy.updateImgCanvas(isSelect, x, y, width, height, degree, isAspectRatio);
+        };
+    };
+    Shape.prototype.updateImgCanvas = function (isSelect, x, y, width, height, degree, isAspectRatio) {
+        var _this = this;
+        var parent = this.parent;
+        parent.activeObj.imageElement = this.shapeImg;
+        parent.activeObj.imageCanvas = parent.createElement('canvas');
+        var dimObj = { width: 0, height: 0 };
+        parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+            value: { width: this.shapeImg.width, height: this.shapeImg.height, obj: dimObj, isImgShape: null } });
+        if (width && height) {
+            if (isAspectRatio) {
+                var obj_1 = { ratio: null };
+                parent.notify('selection', { prop: 'findImageRatio', onPropertyChange: false,
+                    value: { width: this.shapeImg.width, height: this.shapeImg.height, obj: obj_1 } });
+                dimObj = this.resizeImage(width, obj_1['ratio']);
+            }
+            else {
+                dimObj = { width: width, height: height };
+            }
+        }
+        this.updateObj(dimObj, x, y);
+        parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
+            value: { ctx: parent.activeObj.imageCanvas.getContext('2d'), isImgAnnotation: true, isHFlip: null, isVFlip: null } });
+        parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+            value: { width: this.shapeImg.width, height: this.shapeImg.height, obj: dimObj, isImgShape: true } });
+        if (width && height) {
+            if (isAspectRatio) {
+                var obj_2 = { ratio: null };
+                parent.notify('selection', { prop: 'findImageRatio', onPropertyChange: false,
+                    value: { width: this.shapeImg.width, height: this.shapeImg.height, obj: obj_2 } });
+                dimObj = this.resizeImage(width, obj_2['ratio']);
+            }
+            else {
+                dimObj = { width: width, height: height };
+            }
+        }
+        this.updateObj(dimObj, x, y);
+        parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
+        this.shapeImg = null;
+        if (degree) {
+            parent.activeObj.rotatedAngle = degree * (Math.PI / 180);
+            parent.notify('selection', { prop: 'updPtCollForShpRot', onPropertyChange: false, value: { obj: parent.activeObj } });
+        }
+        var obj = { shapeSettingsObj: {} };
+        parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
+        var shapeSettings = obj['shapeSettingsObj'];
+        var shapeChangingArgs = { action: 'insert', previousShapeSettings: shapeSettings,
+            currentShapeSettings: shapeSettings };
+        if (isBlazor() && parent.events && parent.events.shapeChanging.hasDelegate === true) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs).then(function (shapeChangingArgs) {
+                _this.drawShapeImageEvent(shapeChangingArgs, isSelect);
+                if (parent.isPublicMethod) {
+                    parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });
+                }
+                parent.isPublicMethod = false;
+            });
+        }
+        else {
+            parent.trigger('shapeChanging', shapeChangingArgs);
+            this.drawShapeImageEvent(shapeChangingArgs, isSelect);
+            if (parent.isPublicMethod) {
+                parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });
+            }
+            parent.isPublicMethod = false;
+        }
+    };
+    Shape.prototype.updateObj = function (dimObj, x, y) {
+        var parent = this.parent;
+        parent.activeObj.activePoint.width = dimObj['width'];
+        parent.activeObj.activePoint.height = dimObj['height'];
+        parent.activeObj.activePoint.startX = x ? x : (parent.lowerCanvas.width / 2) - (dimObj['width'] / 2);
+        parent.activeObj.activePoint.startY = y ? y : (parent.lowerCanvas.height / 2) - (dimObj['height'] / 2);
+        parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + dimObj['width'];
+        parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + dimObj['height'];
+    };
+    Shape.prototype.resizeImage = function (newWidth, aspectRatio) {
+        var aspectRatioArray = aspectRatio.split(':');
+        var aspectRatioWidth = parseInt(aspectRatioArray[0], 10);
+        var aspectRatioHeight = parseInt(aspectRatioArray[1], 10);
+        var newHeight = Math.round((newWidth * aspectRatioHeight) / aspectRatioWidth);
+        return { width: newWidth, height: newHeight };
+    };
     Shape.prototype.setTextBoxPos = function (actObj, degree, flip, x, y) {
         var point = { x: x, y: y };
         switch (degree) {
@@ -1794,73 +1986,76 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.panObjColl = function (xDiff, yDiff, panRegion) {
         var parent = this.parent;
-        for (var i = 0, len = parent.objColl.length; i < len; i++) {
-            var currObj = parent.objColl[i];
-            if (panRegion === '' || panRegion === 'vertical') {
-                currObj.activePoint.startX += xDiff;
-                currObj.activePoint.endX += xDiff;
-                if (currObj.rotationCirclePointColl) {
-                    currObj.rotationCirclePointColl.x += xDiff;
-                }
-                if (currObj.shape === 'path') {
-                    for (var l = 0, len_3 = currObj.pointColl.length; l < len_3; l++) {
-                        currObj.pointColl[l].x += xDiff;
+        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') {
+                    currObj.activePoint.startX += xDiff;
+                    currObj.activePoint.endX += xDiff;
+                    if (currObj.rotationCirclePointColl) {
+                        currObj.rotationCirclePointColl.x += xDiff;
+                    }
+                    if (currObj.shape === 'path') {
+                        for (var l = 0, len_3 = currObj.pointColl.length; l < len_3; l++) {
+                            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;
+                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) {
-                    currObj.rotationCirclePointColl.y += yDiff;
-                }
-                if (currObj.shape === 'path') {
-                    for (var l = 0; l < currObj.pointColl.length; l++) {
-                        currObj.pointColl[l].y += yDiff;
+                if (panRegion === '' || panRegion === 'horizontal') {
+                    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;
+                        }
                     }
                 }
-            }
-            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;
+                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++) {
-                    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;
+                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++) {
+                        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.apply(currObj.shape, currObj);
-            this.lowerContext.filter = temp;
-            this.refreshActiveObj();
+            parent.notify('draw', { prop: 'applyFrame', value: { ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true } });
         }
     };
     Shape.prototype.updateFontStyles = function (isTextBox) {
@@ -2269,14 +2464,14 @@ var Shape = /** @class */ (function () {
         if (!parent.disabled && parent.isImageLoaded) {
             this.applyActObj();
             if (id.split('_')[0] === 'shape') {
-                var obj_1;
+                var obj_3;
                 for (var i = 0, len = parent.objColl.length; i < len; i++) {
                     if (parent.objColl[i].currIndex === id) {
-                        obj_1 = extend({}, parent.objColl[i], {}, true);
+                        obj_3 = extend({}, parent.objColl[i], {}, true);
                         break;
                     }
                 }
-                shapeDetails = this.getObjDetails(obj_1);
+                shapeDetails = this.getObjDetails(obj_3);
             }
             else if (id.split('_')[0] === 'pen') {
                 shapeDetails = this.getFreehandDrawDetails(parseInt(id.split('_')[1], 10) - 1);
@@ -2428,19 +2623,19 @@ var Shape = /** @class */ (function () {
         if (!parent.disabled && parent.isImageLoaded) {
             this.applyActObj();
             if (id.split('_')[0] === 'shape') {
-                var obj_2;
+                var obj_4;
                 for (var i = 0, len = parent.objColl.length; i < len; i++) {
                     if (parent.objColl[i].currIndex === id) {
-                        obj_2 = extend({}, parent.objColl[i], {}, true);
+                        obj_4 = extend({}, parent.objColl[i], {}, true);
                         break;
                     }
                 }
-                if (isNullOrUndefined(obj_2)) {
+                if (isNullOrUndefined(obj_4)) {
                     isSelected = false;
                 }
                 else {
                     isSelected = true;
-                    parent.activeObj = obj_2;
+                    parent.activeObj = obj_4;
                     var object = { canvasFilter: null };
                     parent.notify('toolbar', { prop: 'getCanvasFilter', onPropertyChange: false, value: { obj: object } });
                     this.lowerContext.filter = object['canvasFilter'];
@@ -2479,9 +2674,9 @@ var Shape = /** @class */ (function () {
                 if (object['bool']) {
                     parent.okBtn();
                 }
-                var obj_3 = { isIndex: false };
-                parent.notify('freehand-draw', { prop: 'isFHDIdx', value: { index: parseInt(id.split('_')[1], 10) - 1, obj: obj_3 } });
-                if (obj_3['isIndex']) {
+                var obj_5 = { isIndex: false };
+                parent.notify('freehand-draw', { prop: 'isFHDIdx', value: { index: parseInt(id.split('_')[1], 10) - 1, obj: obj_5 } });
+                if (obj_5['isIndex']) {
                     isSelected = true;
                     parent.notify('freehand-draw', { prop: 'selectFhd', value: { id: id } });
                     if (!isBlazor()) {

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

@@ -17,6 +17,9 @@ export declare class Transform {
     private isShape;
     private cropDimension;
     private isPreventSelect;
+    private prevResizeCurrObj;
+    private preventDownScale;
+    private resizedImgAngle;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;
@@ -64,4 +67,10 @@ export declare class Transform {
     private update;
     private calcMaxDimension;
     private updatePanPoints;
+    private resizeImage;
+    private resizeCrop;
+    private resizeImg;
+    private updateResize;
+    private resize;
+    private resizeEventHandler;
 }