@syncfusion/ej2-image-editor 22.2.11 → 23.1.36

package/src/image-editor/action/undo-redo.d.ts

@@ -27,6 +27,7 @@ export declare class UndoRedo {
     private callRedo;
     private undo;
     private redo;
+    private imageFlip;
     private shapeTransform;
     private updateFreehandDraw;
     private updateFreehandDrawCustomized;

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

@@ -115,6 +115,9 @@ var UndoRedo = /** @class */ (function () {
     };
     UndoRedo.prototype.updateCurrUrc = function (type) {
         var parent = this.parent;
+        if (parent.isResize) {
+            return;
+        }
         if (!isBlazor()) {
             parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
         }
@@ -133,7 +136,7 @@ var UndoRedo = /** @class */ (function () {
                     prevObj.previousText = collection[0].previousText;
                 }
             }
-            else {
+            else if (prevObj.operation !== 'imageHFlip' && prevObj.operation !== 'imageVFlip') {
                 prevObj.previousCropObj = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1].currentCropObj;
                 prevObj.previousObj = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1].currentObj;
                 prevObj.previousObjColl = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1].currentObjColl;
@@ -141,9 +144,11 @@ var UndoRedo = /** @class */ (function () {
                 prevObj.previousText = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1].currentText;
             }
             if (prevObj) {
-                var obj = this.getZeroZoomObjPointValue(prevObj.currentObjColl, prevObj.currentPointColl);
-                prevObj.currentObjColl = obj['obj'];
-                prevObj.currentPointColl = obj['point'];
+                if (prevObj.operation !== 'imageHFlip' && prevObj.operation !== 'imageVFlip') {
+                    var obj = this.getZeroZoomObjPointValue(prevObj.currentObjColl, prevObj.currentPointColl);
+                    prevObj.currentObjColl = obj['obj'];
+                    prevObj.currentPointColl = obj['point'];
+                }
                 this.appliedUndoRedoColl.push(prevObj);
             }
             this.tempUndoRedoColl = [];
@@ -280,11 +285,27 @@ var UndoRedo = /** @class */ (function () {
                 parent.canvasFilter = this.lowerContext.filter;
                 switch (obj.operation) {
                     case 'shapeTransform':
+                    case 'brightness':
+                    case 'contrast':
+                    case 'hue':
+                    case 'saturation':
+                    case 'opacity':
+                    case 'blur':
+                    case 'exposure':
+                    case 'default':
+                    case 'chrome':
+                    case 'cold':
+                    case 'warm':
+                    case 'grayscale':
+                    case 'blackandwhite':
+                    case 'sepia':
+                    case 'invert':
+                    case 'sharpen':
                         this.shapeTransform(obj.previousObjColl);
                         break;
                     case 'freehanddraw':
                     case 'freehand-draw':
-                        this.updateFreehandDraw(obj.previousPointColl);
+                        this.updateFreehandDraw(obj.previousPointColl, obj.previousSelPointColl);
                         break;
                     case 'freehanddrawCustomized':
                         this.updateFreehandDrawCustomized(obj.previousPointColl);
@@ -299,6 +320,20 @@ var UndoRedo = /** @class */ (function () {
                     case 'text':
                         this.updateText(obj.previousObjColl, true);
                         break;
+                    case 'frame':
+                        parent.transform.zoomFactor = parent.transform.defaultZoomFactor = obj.previousObj.defaultZoom;
+                        parent.setProperties({ zoomSettings: { zoomFactor: obj.previousObj.zoomFactor } }, true);
+                        parent.notify('transform', { prop: 'setPreviousZoomValue', onPropertyChange: false,
+                            value: { previousZoomValue: parent.zoomSettings.zoomFactor } });
+                        extend(parent.frameObj, obj.previousObj.frameObj);
+                        parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: true, isPreventClearRect: null, isFrame: true } });
+                        break;
+                    case 'imageHFlip':
+                        this.imageFlip('horizontal', obj.previousObjColl);
+                        break;
+                    case 'imageVFlip':
+                        this.imageFlip('vertical', obj.previousObjColl);
+                        break;
                     default:
                         this.undoDefault(obj);
                         parent.notify('filter', { prop: 'set-adjustment', value: { operation: obj.operation } });
@@ -320,6 +355,7 @@ var UndoRedo = /** @class */ (function () {
                         parent.currSelectionPoint = null;
                     }
                     parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
+                    parent.currObjType.isActiveObj = false;
                 }
                 if ((this.undoRedoColl[this.undoRedoStep - 1]
                     && this.undoRedoColl[this.undoRedoStep - 1].isCircleCrop)) {
@@ -366,11 +402,27 @@ var UndoRedo = /** @class */ (function () {
                 var activeObj = void 0;
                 switch (obj.operation) {
                     case 'shapeTransform':
+                    case 'brightness':
+                    case 'contrast':
+                    case 'hue':
+                    case 'saturation':
+                    case 'opacity':
+                    case 'blur':
+                    case 'exposure':
+                    case 'default':
+                    case 'chrome':
+                    case 'cold':
+                    case 'warm':
+                    case 'grayscale':
+                    case 'blackandwhite':
+                    case 'sepia':
+                    case 'invert':
+                    case 'sharpen':
                         this.shapeTransform(obj.currentObjColl);
                         break;
                     case 'freehanddraw':
                     case 'freehand-draw':
-                        this.updateFreehandDraw(obj.currentPointColl);
+                        this.updateFreehandDraw(obj.currentPointColl, obj.currentSelPointColl);
                         break;
                     case 'freehanddrawCustomized':
                         this.updateFreehandDrawCustomized(obj.currentPointColl);
@@ -385,6 +437,16 @@ var UndoRedo = /** @class */ (function () {
                     case 'text':
                         this.updateText(obj.currentObjColl, false);
                         break;
+                    case 'frame':
+                        extend(parent.frameObj, obj.currentObj.frameObj);
+                        parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: true, isPreventClearRect: null, isFrame: true } });
+                        break;
+                    case 'imageHFlip':
+                        this.imageFlip('horizontal', obj.currentObjColl);
+                        break;
+                    case 'imageVFlip':
+                        this.imageFlip('vertical', obj.currentObjColl);
+                        break;
                     default:
                         parent.objColl = [];
                         parent.pointColl = [];
@@ -431,6 +493,50 @@ var UndoRedo = /** @class */ (function () {
             }
         }
     };
+    UndoRedo.prototype.imageFlip = function (type, objColl) {
+        var parent = this.parent;
+        parent.objColl = extend([], objColl, [], true);
+        parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
+        parent.objColl.pop();
+        if (parent.activeObj.shape && parent.activeObj.shape === 'image') {
+            if (type === 'horizontal') {
+                if (isNullOrUndefined(parent.activeObj.isHorImageFlip) && parent.activeObj.isVerImageFlip) {
+                    parent.activeObj.isHorImageFlip = true;
+                    parent.activeObj.isVerImageFlip = null;
+                    parent.horizontalFlip(this.upperContext, true);
+                }
+                else {
+                    if (isNullOrUndefined(parent.activeObj.isHorImageFlip) || !parent.activeObj.isHorImageFlip) {
+                        parent.activeObj.isHorImageFlip = true;
+                    }
+                    else {
+                        parent.activeObj.isHorImageFlip = null;
+                    }
+                    parent.horizontalFlip(this.upperContext, true);
+                }
+            }
+            else if (type === 'vertical') {
+                if (isNullOrUndefined(parent.activeObj.isVerImageFlip) && parent.activeObj.isHorImageFlip) {
+                    parent.activeObj.isVerImageFlip = true;
+                    parent.activeObj.isHorImageFlip = null;
+                    parent.verticalFlip(this.upperContext, true);
+                }
+                else {
+                    if (isNullOrUndefined(parent.activeObj.isVerImageFlip) || !parent.activeObj.isVerImageFlip) {
+                        parent.activeObj.isVerImageFlip = true;
+                    }
+                    else {
+                        parent.activeObj.isVerImageFlip = null;
+                    }
+                    parent.verticalFlip(this.upperContext, true);
+                }
+            }
+            parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: true } });
+        }
+        else {
+            parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: true } });
+        }
+    };
     UndoRedo.prototype.shapeTransform = function (objColl) {
         var parent = this.parent;
         parent.objColl = extend([], objColl, [], true);
@@ -441,9 +547,11 @@ var UndoRedo = /** @class */ (function () {
         parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
         parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
     };
-    UndoRedo.prototype.updateFreehandDraw = function (pointColl) {
+    UndoRedo.prototype.updateFreehandDraw = function (pointColl, selPointColl) {
         var parent = this.parent;
         parent.pointColl = pointColl;
+        parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
+            value: { obj: { selPointColl: selPointColl } } });
         parent.freehandCounter = parent.pointColl.length;
         parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
         this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
@@ -591,6 +699,11 @@ var UndoRedo = /** @class */ (function () {
     };
     UndoRedo.prototype.endUndoRedo = function (operation, isUndo) {
         var parent = this.parent;
+        var frameObj = { type: 'none', color: '#fff', size: 20, inset: 20, offset: 20, radius: 0, amount: 1, border: 'solid', gradientColor: '' };
+        if (((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) &&
+            JSON.stringify(parent.frameObj) !== JSON.stringify(frameObj)) {
+            parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: true } });
+        }
         parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
         if (parent.isCircleCrop && ((isUndo && operation !== 'crop') || !isUndo)) {
             parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
@@ -632,6 +745,9 @@ var UndoRedo = /** @class */ (function () {
     };
     UndoRedo.prototype.updateUrc = function (operation, previousObj, previousObjColl, previousPointColl, previousSelPointColl, previousCropObj, previousText, currentText, previousFilter, isCircleCrop) {
         var parent = this.parent;
+        if (parent.isResize) {
+            return;
+        }
         var obj = { isInitialLoaded: false };
         if (parent.currObjType.isUndoAction) {
             this.refreshUrc(true);
@@ -651,6 +767,12 @@ var UndoRedo = /** @class */ (function () {
             if (operation === 'crop') {
                 currentObj.currSelectionPoint = extend({}, parent.currSelectionPoint, {}, true);
             }
+            else if (operation === 'frame') {
+                previousObj.destPoints = { startX: parent.frameDestPoints.destLeft, startY: parent.frameDestPoints.destTop,
+                    width: parent.frameDestPoints.destWidth, height: parent.frameDestPoints.destHeight };
+                currentObj.destPoints = { startX: parent.frameDestPoints.destLeft, startY: parent.frameDestPoints.destTop,
+                    width: parent.frameDestPoints.destWidth, height: parent.frameDestPoints.destHeight };
+            }
             this.undoRedoColl.push({ operation: operation, previousObj: previousObj, currentObj: currentObj,
                 previousObjColl: previousObjColl, currentObjColl: currentObj.objColl,
                 previousPointColl: previousPointColl, currentPointColl: currentObj.pointColl,
@@ -659,8 +781,9 @@ var UndoRedo = /** @class */ (function () {
                 previousText: previousText, currentText: currentText, filter: previousFilter, isCircleCrop: isCircleCrop });
             if (!isBlazor()) {
                 parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             }
-            else {
+            else if (parent.currentToolbar !== 'pen-toolbar') {
                 parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
             }
         }
@@ -749,11 +872,11 @@ var UndoRedo = /** @class */ (function () {
                 var zoomSettings = extend({}, parent.zoomSettings, null, true);
                 if (parent.transform.zoomFactor > 0) {
                     parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                        value: { zoomFactor: -parent.transform.zoomFactor, zoomPoint: null } });
+                        value: { zoomFactor: -parent.transform.zoomFactor, zoomPoint: null, isResize: null } });
                 }
                 else {
                     parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                        value: { zoomFactor: Math.abs(parent.transform.zoomFactor), zoomPoint: null } });
+                        value: { zoomFactor: Math.abs(parent.transform.zoomFactor), zoomPoint: null, isResize: null } });
                 }
                 parent.zoomSettings = zoomSettings;
                 parent.isCropTab = false;
@@ -793,6 +916,11 @@ var UndoRedo = /** @class */ (function () {
                     parent.notify('transform', { prop: 'drawPannedImage', onPropertyChange: false,
                         value: { xDiff: 0, yDiff: 0 } });
                 }
+                parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
+                if (parent.isCircleCrop || (parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle')) {
+                    parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                        value: { context: this.lowerContext, isSave: null, isFlip: null } });
+                }
             }
         }
         return { obj: getZeroZoomObjColl, point: getZeroZoomPointColl };

package/src/image-editor/base/enum.d.ts

@@ -41,7 +41,9 @@ export declare enum ShapeType {
     /** A text shape. */
     Text = "Text",
     /** A freehand drawing shape. */
-    FreehandDraw = "FreehandDraw"
+    FreehandDraw = "FreehandDraw",
+    /** An Image shape. */
+    Image = "Image"
 }
 /**
  * An enumeration representing the different ways to trigger zooming in the image editor.
@@ -110,6 +112,7 @@ export declare enum ImageEditorCommand {
     Arrow = "Arrow",
     Path = "Path",
     Rectangle = "Rectangle",
+    Image = "Image",
     Ellipse = "Ellipse",
     Text = "Text",
     CustomSelection = "CustomSelection",
@@ -187,3 +190,37 @@ export declare enum ArrowheadType {
     /** Indicates a bar shaped arrowhead should be drawn. */
     Bar = "Bar"
 }
+/**
+ * An enumeration of available frame options.
+ *
+ * @remarks
+ * These options can be used with the `drawFrame` method of the image editor control to draw frames on an image.
+ */
+export declare enum FrameType {
+    /** Represents a no frame. */
+    None = "None",
+    /** Represents a mat frame. */
+    Mat = "Mat",
+    /** Represents a bevel frame. */
+    Bevel = "Bevel",
+    /** Represents a line frame. */
+    Line = "Line",
+    /** Represents an inset frame. */
+    Inset = "Inset",
+    /** Represents a hook frame. */
+    Hook = "Hook"
+}
+/**
+ * An enumeration of available line options.
+ *
+ * @remarks
+ * These options can be used with the `drawFrame` method of the image editor control to draw frames on an image.
+ */
+export declare enum FrameLineStyle {
+    /** Represents a solid line. */
+    Solid = "Solid",
+    /** Represents a dashed line. */
+    Dashed = "Dashed",
+    /** Represents a dotted line. */
+    Dotted = "Dotted"
+}

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

@@ -45,6 +45,8 @@ export var ShapeType;
     ShapeType["Text"] = "Text";
     /** A freehand drawing shape. */
     ShapeType["FreehandDraw"] = "FreehandDraw";
+    /** An Image shape. */
+    ShapeType["Image"] = "Image";
 })(ShapeType || (ShapeType = {}));
 /**
  * An enumeration representing the different ways to trigger zooming in the image editor.
@@ -116,6 +118,7 @@ export var ImageEditorCommand;
     ImageEditorCommand["Arrow"] = "Arrow";
     ImageEditorCommand["Path"] = "Path";
     ImageEditorCommand["Rectangle"] = "Rectangle";
+    ImageEditorCommand["Image"] = "Image";
     ImageEditorCommand["Ellipse"] = "Ellipse";
     ImageEditorCommand["Text"] = "Text";
     ImageEditorCommand["CustomSelection"] = "CustomSelection";
@@ -196,3 +199,39 @@ export var ArrowheadType;
     /** Indicates a bar shaped arrowhead should be drawn. */
     ArrowheadType["Bar"] = "Bar";
 })(ArrowheadType || (ArrowheadType = {}));
+/**
+ * An enumeration of available frame options.
+ *
+ * @remarks
+ * These options can be used with the `drawFrame` method of the image editor control to draw frames on an image.
+ */
+export var FrameType;
+(function (FrameType) {
+    /** Represents a no frame. */
+    FrameType["None"] = "None";
+    /** Represents a mat frame. */
+    FrameType["Mat"] = "Mat";
+    /** Represents a bevel frame. */
+    FrameType["Bevel"] = "Bevel";
+    /** Represents a line frame. */
+    FrameType["Line"] = "Line";
+    /** Represents an inset frame. */
+    FrameType["Inset"] = "Inset";
+    /** Represents a hook frame. */
+    FrameType["Hook"] = "Hook";
+})(FrameType || (FrameType = {}));
+/**
+ * An enumeration of available line options.
+ *
+ * @remarks
+ * These options can be used with the `drawFrame` method of the image editor control to draw frames on an image.
+ */
+export var FrameLineStyle;
+(function (FrameLineStyle) {
+    /** Represents a solid line. */
+    FrameLineStyle["Solid"] = "Solid";
+    /** Represents a dashed line. */
+    FrameLineStyle["Dashed"] = "Dashed";
+    /** Represents a dotted line. */
+    FrameLineStyle["Dotted"] = "Dotted";
+})(FrameLineStyle || (FrameLineStyle = {}));

package/src/image-editor/base/image-editor-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, ModuleDeclaration, extend, isBlazor, BlazorDotnetObject } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, ModuleDeclaration, extend, isBlazor, BlazorDotnetObject } from '@syncfusion/ej2-base';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -261,7 +261,7 @@ export interface ImageEditorModel extends ComponentModel{
      * If the property is defined as empty collection, the toolbar will not be rendered.
      * The preconfigured toolbar commands are
      * - Crop: helps to crop an image as ellipse, square, various ratio aspects, custom selection with resize, drag and drop.
-     * - Annotate: help to insert a shape on image that supports rectangle, ellipse, line, arrow, path, text and freehand drawing with resize, drag and drop, and customize its appearance.
+     * - Annotate: help to insert a shape on image that supports rectangle, ellipse, line, arrow, path, text, image and freehand drawing with resize, drag and drop, and customize its appearance.
      * - Transform: helps to rotate and flip an image.
      * - Finetunes: helps to perform adjustments on an image.
      * - Filters: helps to perform predefined color filters.
@@ -615,6 +615,13 @@ export interface ImageEditorModel extends ComponentModel{
      */
     quickAccessToolbarOpen?: EmitType<QuickAccessToolbarEventArgs>
 
+    /**
+     * Event callback that is raised while resizing an image. 
+     *
+     * @event resizing 
+     */ 
+    resizing?: EmitType<ResizeEventArgs>
+
     /**
      * Event callback that is raised once the quick access toolbar item is clicked.
      *
@@ -623,4 +630,11 @@ export interface ImageEditorModel extends ComponentModel{
      */
     quickAccessToolbarItemClick?: EmitType<ClickEventArgs>
 
+    /**
+     *  Event callback that is raised while applying frames on an image. 
+     *
+     * @event frameChange
+     */ 
+    frameChange?: EmitType<FrameChangeEventArgs>
+
 }