@syncfusion/ej2-image-editor 26.2.10 → 27.1.48

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

@@ -3,12 +3,12 @@ import { EmitType } from '@syncfusion/ej2-base';
 import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
 import { ChildProperty } from '@syncfusion/ej2-base';
 import { ImageEditorModel, FinetuneSettingsModel, ZoomSettingsModel, SelectionSettingsModel, FontFamilyModel } from './image-editor-model';
-import { SelectionChangeEventArgs, Transition, ArrowheadType, ResizeEventArgs, FrameType, FrameLineStyle, FrameChangeEventArgs, ShapeType } from './../index';
+import { SelectionChangeEventArgs, Transition, ArrowheadType, ResizeEventArgs, FrameType, FrameLineStyle, FrameChangeEventArgs, ShapeType, ImageSettings, RedactType } from './../index';
 import { ZoomEventArgs, PanEventArgs, CropEventArgs, RotateEventArgs, FlipEventArgs, ShapeChangeEventArgs } from './../index';
-import { ToolbarEventArgs, OpenEventArgs, SaveEventArgs, BeforeSaveEventArgs, Point, ShapeSettings, ImageFilterEventArgs } from './../index';
+import { ToolbarEventArgs, OpenEventArgs, SaveEventArgs, BeforeSaveEventArgs, Point, ShapeSettings, ImageFilterEventArgs, RedactSettings } from './../index';
 import { FinetuneEventArgs, QuickAccessToolbarEventArgs, CurrentObject, ImageDimension, TransformValue, PanPoint } from './../index';
 import { Interaction, SelectionPoint, ImageFinetuneValue, Dimension, ActivePoint, ImageEditorClickEventArgs, FrameValue } from './../index';
-import { Direction, ZoomTrigger, Theme, ImageEditorCommand, ImageFilterOption, ImageFinetuneOption } from './../index';
+import { Direction, ZoomTrigger, Theme, ImageEditorCommand, ImageFilterOption, ImageFinetuneOption, EditCompleteEventArgs } from './../index';
 import { ItemModel as DropDownButtonItemModel } from '@syncfusion/ej2-splitbuttons';
 /**
  * This interface is used to specify settings for finetuning operations on images, including brightness, contrast, hue, saturation, exposure, opacity, and blur. It includes properties for setting minimum and maximum values for each of these options, as well as a default value.
@@ -221,6 +221,8 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     /** @hidden */
     upperCanvas: HTMLCanvasElement;
     /** @hidden */
+    maskCanvas: HTMLCanvasElement;
+    /** @hidden */
     inMemoryCanvas: HTMLCanvasElement;
     /** @hidden */
     textArea: HTMLInputElement;
@@ -376,11 +378,33 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     imgSrc: string;
     /** @hidden */
     isKBDNavigation: boolean;
+    /** @hidden */
+    isMaskImage: boolean;
+    /** @hidden */
+    tempObjColl: SelectionPoint[];
+    /** @hidden */
+    tempPointColl: Point[];
+    /** @hidden */
+    tempShapeColl: any;
+    /** @hidden */
+    isImageUpdated: boolean;
+    /** @hidden */
+    noRedact: boolean;
+    /** @hidden */
+    tempRedactBlur: number;
+    /** @hidden */
+    tempRedactPixel: number;
+    /** @hidden */
+    isSafari: boolean;
+    /** @hidden */
+    editCompleteArgs: object | RotateEventArgs | FlipEventArgs | CropEventArgs | FinetuneEventArgs | FrameChangeEventArgs | ImageFilterEventArgs | PanEventArgs | ResizeEventArgs | ShapeChangeEventArgs | ZoomEventArgs;
     private lowerContext;
     private upperContext;
     private inMemoryContext;
     private toolbarFn;
     private qatFn;
+    private tempToolbarHeight;
+    private tempToolbar;
     /**
      * Defines one or more CSS classes that can be used to customize the appearance of an Image Editor component.
      *
@@ -803,6 +827,17 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @event frameChange
      */
     frameChange: EmitType<FrameChangeEventArgs>;
+    /**
+     * Event callback that is triggered after the completion of an editing action in the image editor.
+     *
+     * This event occurs after the image editor canvas has been updated through following actions such as cropping, drawing annotations, applying filters, fine-tuning, or other customizations.
+     *
+     * It provides an opportunity to perform additional tasks, such as comparing the current image data with previous states or triggering further processing based on the changes.
+     *
+     * @event editComplete
+     *
+     */
+    editComplete: EmitType<EditCompleteEventArgs>;
     /**
      *
      * Constructor for creating the widget
@@ -932,24 +967,28 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     /**
      * Returns an image as ImageData to load it in to a canvas.
      *
+     * @param {boolean} [includeAnnotations=true] - Optional. Specifies whether the returned image data should include annotations. The default value is true, meaning annotations are included.
+     *
      * @remarks
      * The data returned from this method is directly drawn in a canvas using 'putImageData' method.
      * And then the user can get the base64 string from the canvas using toDataURL method.
      *
      * @returns {ImageData}.
      */
-    getImageData(): ImageData;
+    getImageData(includeAnnotations?: boolean): ImageData;
     /**
      *  Opens an image as URL or ImageData for editing in an image editor.
      *
      * @param {string | ImageData } data - Specifies url of the image or image data.
+     * @param {boolean} [resetChanges=true] - Optional. Determines whether to reset existing changes when opening the image. The default value is true, which resets all existing changes.
+     * @param {ImageSettings} imageSettings - Optional. Specifies the image setting that contains background color to apply when opening a transparent image. The default value of background color is an empty string (''), meaning no background color is applied by default when a transparent image is opened.
      *
      * @remarks
      * The supported file types are JPG, JPEG, PNG, and SVG.
      *
      * @returns {void}.
      */
-    open(data: string | ImageData): void;
+    open(data: string | ImageData, resetChanges?: boolean, imageSettings?: ImageSettings): void;
     /**
      * Reset all the changes done in an image editor and revert to original image.
      *
@@ -1119,9 +1158,10 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @param {string} fillColor - Specifies the fill color of the rectangle.
      * @param {number} degree - Specifies the degree to rotate the rectangle.
      * @param {boolean} isSelected - Specifies to show the rectangle in the selected state.
+     * @param {number} borderRadius - Specifies the radius to apply border radius to rectangle.
      * @returns {boolean}.
      */
-    drawRectangle(x?: number, y?: number, width?: number, height?: number, strokeWidth?: number, strokeColor?: string, fillColor?: string, degree?: number, isSelected?: boolean): boolean;
+    drawRectangle(x?: number, y?: number, width?: number, height?: number, strokeWidth?: number, strokeColor?: string, fillColor?: string, degree?: number, isSelected?: boolean, borderRadius?: number): boolean;
     /**
      * Draw a text on an image.
      *
@@ -1137,10 +1177,13 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @param {string} color - Specifies font color of the text.
      * @param {boolean} isSelected - Specifies to show the text in the selected state.
      * @param {number} degree - Specifies the degree to rotate the text.
+     * @param {fillColor} fillColor - Specifies the background Color of the text.
+     * @param {string} strokeColor - Specifies the outline color of the text annotation.
+     * @param {number} strokeWidth - Specifies the outline stroke width of the text annotation.
      * @returns {boolean}.
      *
      */
-    drawText(x?: number, y?: number, text?: string, fontFamily?: string, fontSize?: number, bold?: boolean, italic?: boolean, color?: string, isSelected?: boolean, degree?: number): boolean;
+    drawText(x?: number, y?: number, text?: string, fontFamily?: string, fontSize?: number, bold?: boolean, italic?: boolean, color?: string, isSelected?: boolean, degree?: number, fillColor?: string, strokeColor?: string, strokeWidth?: number): boolean;
     /**
      * Draw an image as annotation on an image.
      *
@@ -1158,6 +1201,17 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      *
      */
     drawImage(data: string | ImageData, x?: number, y?: number, width?: number, height?: number, isAspectRatio?: boolean, degree?: number, opacity?: number, isSelected?: boolean): boolean;
+    /**
+     * This method is used to update the existing shapes by changing its height, width, color, and font styles in the component.
+     * Use 'getShapeSettings' method to get the shape which is then passed to change the options of a shape.
+     * {% codeBlock src='image-editor/updateShape/index.md' %}{% endcodeBlock %}
+     *
+     * @param {ShapeSettings} setting - Specifies the shape settings to be updated for the shape on an image.
+     * @param {boolean} isSelected - Specifies to show the shape in the selected state.
+     * @returns {boolean}.
+     *
+     */
+    updateShape(setting: ShapeSettings, isSelected?: boolean): boolean;
     /**
      * Select a shape based on the given shape id.
      * Use 'getShapeSettings' method to get the shape id which is then passed to perform selection.
@@ -1196,6 +1250,42 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @returns {ShapeSettings[]}.
      */
     getShapeSettings(): ShapeSettings[];
+    /**
+     * Get all the shapes details which is drawn on an image editor.
+     *
+     * @returns {RedactSettings[]}.
+     */
+    getRedacts(): RedactSettings[];
+    /**
+     * Select a redaction based on the given redaction id.
+     * Use 'getRedacts' method to get the shape id which is then passed to perform selection.
+     *
+     *
+     * @param {string} id - Specifies the shape id to select a redact on an image.
+     * @returns {boolean}.
+     *
+     */
+    selectRedact(id: string): boolean;
+    /**
+     * Deletes a redaction based on the given shape id.
+     * Use 'getRedacts' method to get the redaaction id which is then passed to perform deletion.
+     *
+     *
+     * @param {string} id - Specifies the redaction id to delete the redaction on an image.
+     * @returns {void}.
+     *
+     */
+    deleteRedact(id: string): void;
+    /**
+     * This method is used to update the existing redacts by changing its height, width, blur, and pixel size in the component.
+     * Use 'getRedacts' method to get the redacts which is then passed to change the options of a redacts.
+     *
+     * @param {RedactSettings} setting - Specifies the redact settings to be updated for the shape on an image.
+     * @param {boolean} isSelected - Specifies to show the redacts in the selected state.
+     * @returns {boolean}.
+     *
+     */
+    updateRedact(setting: RedactSettings, isSelected?: boolean): boolean;
     /**
      * To refresh the Canvas Wrapper.
      *
@@ -1288,17 +1378,6 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @returns {boolean} - A boolean value indicating the success of the straightening operation.
      */
     straightenImage(degree: number): boolean;
-    /**
-     * This method is used to update the existing shapes by changing its height, width, color, and font styles in the component.
-     * Use 'getShapeSettings' method to get the shape which is then passed to change the options of a shape.
-     * {% codeBlock src='image-editor/updateShape/index.md' %}{% endcodeBlock %}
-     *
-     * @param {ShapeSettings} setting - Specifies the shape settings to be updated for the shape on an image.
-     * @param {boolean} isSelected - Specifies to show the shape in the selected state.
-     * @returns {boolean}.
-     *
-     */
-    updateShape(setting: ShapeSettings, isSelected?: boolean): boolean;
     /**
      * Duplicates a shape based on the given shape ID in the ImageEditor.
      * Use 'getShapeSettings' method to get the shape and then pass a shapeId from the returned shape to clone a shape.
@@ -1409,6 +1488,25 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * This method clears the loaded image and updates the component's user interface to its initial state (the initial user interface without a loaded image).
      */
     clearImage(): void;
+    /**
+     * Enables overlay drawing to erase objects in an image editor. The eraser tool assists in selecting the mask image.
+     *
+     * @remarks
+     * The selection UI is based on the 'theme' property.
+     *
+     * @param {number} strokeWidth - Specifies the stroke width of the drawing.
+     * @param {string} color - Specifies the color of the drawing.
+     * @hidden
+     * @returns {void}.
+     *
+     */
+    selectMaskImage(strokeWidth?: number, color?: string): void;
+    private enableDisableToolbar;
+    private updateImage;
+    private editCompleted;
+    private updateColl;
+    private resetToolbar;
+    private getData;
     private applyShapes;
     private closeOverlayTbar;
     private toolbarTemplateFn;
@@ -1455,6 +1553,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @returns {void}.
      */
     okBtn(isMouseDown?: boolean, isFinalApply?: boolean): void;
+    triggerEditCompleteEvent(args: EditCompleteEventArgs): void;
     /**
      * Handles the OK button operation
      *
@@ -1544,6 +1643,15 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @returns {void}.
      */
     updateFontSize(text: string): void;
+    /**
+     * Apply Font color for text.
+     *
+     * @param { string } value - Specifies the selected color item value.
+     * @param { string } color - Specifies the selected color type value.
+     * @hidden
+     * @returns {void}.
+     */
+    updateFontColor(value: string, color: string): void;
     /**
      * Apply Font color for text.
      *
@@ -1551,7 +1659,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @hidden
      * @returns {void}.
      */
-    updateFontColor(value: string): void;
+    updateStrokeTextColor(value: string): void;
     /**
      * Apply Pen stroke width.
      *
@@ -1572,10 +1680,12 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * Apply Shape stroke width.
      *
      * @param { string } id - Specifies the selected item id.
+     * @param { string } type - Specifies the type of selected item.
+     * @param { string } shapeType - Specifies the shape type of selected item.
      * @hidden
      * @returns {void}.
      */
-    updateStrokeWidth(id: string): void;
+    updateStrokeWidth(id: string, type: string, shapeType?: string): void;
     /**
      * Apply Shape stroke color.
      *
@@ -1688,4 +1798,16 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private getStraightenFlipState;
     private initializeZoomSettings;
     private initializeThemeColl;
+    /**
+     * Draw a redaction on an image.
+     *
+     * @param {RedactType} type – Optional. Specifies the type of redaction to be drawn on the image such as blur or pixelate. If not specified, the redaction drawing is initiated with the default blur value.
+     * @param {number} x – Optional. Specifies x-coordinate of redaction. If not specified, the redaction drawing is initiated with the first parameter.
+     * @param {number} y – Optional. Specifies y-coordinate of redaction. If not specified it draws redaction from the center point of the image.
+     * @param {number} width – Optional. Specifies the width of the redaction. The default value is 100.
+     * @param {number} height – Optional. Specifies the height of the redaction. The default value is 50.
+     * @param {number} value – Optional. Specifies the blur value for blur-type redaction or the pixel size for pixelate-type redaction. Defaults to 20 since the default redaction is blur.
+     * @returns {boolean}.
+     */
+    drawRedact(type?: RedactType, x?: number, y?: number, width?: number, height?: number, value?: number): boolean;
 }