@syncfusion/ej2-image-editor 22.2.11 → 23.1.38

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

@@ -3,11 +3,11 @@ import { EmitType } from '@syncfusion/ej2-base';
 import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
 import { ChildProperty } from '@syncfusion/ej2-base';
 import { ImageEditorModel, FinetuneSettingsModel, ZoomSettingsModel, SelectionSettingsModel } from './image-editor-model';
-import { SelectionChangeEventArgs, Transition, ArrowheadType } from './../index';
+import { SelectionChangeEventArgs, Transition, ArrowheadType, ResizeEventArgs, FrameType, FrameLineStyle, FrameChangeEventArgs } from './../index';
 import { ZoomEventArgs, PanEventArgs, CropEventArgs, RotateEventArgs, FlipEventArgs, ShapeChangeEventArgs } from './../index';
 import { ToolbarEventArgs, OpenEventArgs, SaveEventArgs, BeforeSaveEventArgs, Point, ShapeSettings, ImageFilterEventArgs } from './../index';
 import { FinetuneEventArgs, QuickAccessToolbarEventArgs, CurrentObject, ImageDimension, TransformValue, PanPoint } from './../index';
-import { Interaction, SelectionPoint, ImageFinetuneValue, Dimension, ActivePoint, ImageEditorClickEventArgs } from './../index';
+import { Interaction, SelectionPoint, ImageFinetuneValue, Dimension, ActivePoint, ImageEditorClickEventArgs, FrameValue } from './../index';
 import { Direction, ZoomTrigger, Theme, ImageEditorCommand, ImageFilterOption, ImageFinetuneOption } from './../index';
 import { ItemModel as DropDownButtonItemModel } from '@syncfusion/ej2-splitbuttons';
 /**
@@ -198,6 +198,8 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     /** @hidden */
     baseImg: HTMLImageElement;
     /** @hidden */
+    baseImgCanvas: HTMLCanvasElement;
+    /** @hidden */
     lowerCanvas: HTMLCanvasElement;
     /** @hidden */
     upperCanvas: HTMLCanvasElement;
@@ -271,6 +273,46 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     eventType: string;
     /** @hidden */
     panEventArgs: PanEventArgs;
+    /** @hidden */
+    resizeSrc: ActivePoint;
+    /** @hidden */
+    isResize: boolean;
+    /** @hidden */
+    aspectHeight: number;
+    /** @hidden */
+    aspectWidth: number;
+    /** @hidden */
+    isAspectRatio: boolean;
+    /** @hidden */
+    prevCropObj: CurrentObject;
+    /** @hidden */
+    prevObj: CurrentObject;
+    /** @hidden */
+    frameObj: FrameValue;
+    /** @hidden */
+    tempFrameObj: FrameValue;
+    /** @hidden */
+    allowDownScale: boolean;
+    /** @hidden */
+    frameType: FrameType;
+    /** @hidden */
+    gradientColor: string;
+    /** @hidden */
+    size: number;
+    /** @hidden */
+    inset: number;
+    /** @hidden */
+    offset: number;
+    /** @hidden */
+    borderRadius: number;
+    /** @hidden */
+    lineCount: number;
+    /** @hidden */
+    tempFrameZoomLevel: number;
+    /** @hidden */
+    frameDestPoints: ImageDimension;
+    /** @hidden */
+    cxtTbarHeight: number;
     private lowerContext;
     private upperContext;
     private inMemoryContext;
@@ -337,7 +379,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * 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.
@@ -660,6 +702,12 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * </script>
      */
     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.
      *
@@ -667,6 +715,12 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      *
      */
     quickAccessToolbarItemClick: EmitType<ClickEventArgs>;
+    /**
+     *  Event callback that is raised while applying frames on an image.
+     *
+     * @event frameChange
+     */
+    frameChange: EmitType<FrameChangeEventArgs>;
     /**
      *
      * Constructor for creating the widget
@@ -718,6 +772,9 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     onPropertyChanged(newProperties: ImageEditorModel, oldProperties?: ImageEditorModel): void;
     destroy(): void;
     initialize(): void;
+    private createDropUploader;
+    private dlgCloseBtnClick;
+    private showDialogPopup;
     /**
      *
      * This Method will add events to component (element, event, method, current reference)
@@ -775,7 +832,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * A horizontal direction for horizontal flipping and vertical direction for vertical flipping.
      *
      * @remarks
-     * It flips the shapes including rectangle, circle, line, text, and freehand drawings.
+     * It flips the shapes including rectangle, circle, line, text, image, and freehand drawings.
      *
      * @returns {void}.
      *
@@ -820,7 +877,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * A positive integer value for clockwise and negative integer value for anti-clockwise rotation.
      *
      * @remarks
-     * It rotated the shapes including rectangle, circle, line, text, and freehand drawings.
+     * It rotated the shapes including rectangle, circle, line, text, image, and freehand drawings.
      *
      * @returns {boolean}.
      *
@@ -912,10 +969,11 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @param {number} strokeWidth - Specifies the stroke width of ellipse.
      * @param {string} strokeColor - Specifies the stroke color of ellipse.
      * @param {string} fillColor - Specifies the fill color of the ellipse.
+     * @param {number} degree - Specifies the degree to rotate the ellipse.
      * @returns {boolean}.
      *
      */
-    drawEllipse(x?: number, y?: number, radiusX?: number, radiusY?: number, strokeWidth?: number, strokeColor?: string, fillColor?: string): boolean;
+    drawEllipse(x?: number, y?: number, radiusX?: number, radiusY?: number, strokeWidth?: number, strokeColor?: string, fillColor?: string, degree?: number): boolean;
     /**
      * Draw line on an image.
      *
@@ -961,9 +1019,10 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @param {number} strokeWidth - Specifies the stroke width of rectangle.
      * @param {string} strokeColor - Specifies the stroke color of rectangle.
      * @param {string} fillColor - Specifies the fill color of the rectangle.
+     * @param {number} degree - Specifies the degree to rotate the rectangle.
      * @returns {boolean}.
      */
-    drawRectangle(x?: number, y?: number, width?: number, height?: number, strokeWidth?: number, strokeColor?: string, fillColor?: string): boolean;
+    drawRectangle(x?: number, y?: number, width?: number, height?: number, strokeWidth?: number, strokeColor?: string, fillColor?: string, degree?: number): boolean;
     /**
      * Draw a text on an image.
      *
@@ -981,6 +1040,21 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      *
      */
     drawText(x?: number, y?: number, text?: string, fontFamily?: string, fontSize?: number, bold?: boolean, italic?: boolean, color?: string): boolean;
+    /**
+     * Draw an image as annotation on an image.
+     *
+     *
+     * @param {string | ImageData} data - Specifies url of the image or image data.
+     * @param {number} x - Specifies x-coordinate of a starting point for an image.
+     * @param {number} y - Specifies y-coordinate of a starting point for an image.
+     * @param {number} width - Specifies the width of the image.
+     * @param {number} height - Specifies the height of the image.
+     * @param {boolean} isAspectRatio - Specifies whether to maintain aspect ratio or not.
+     * @param {number} degree - Specifies the degree to rotate the image.
+     * @returns {boolean}.
+     *
+     */
+    drawImage(data: string | ImageData, x?: number, y?: number, width?: number, height?: number, isAspectRatio?: boolean, degree?: number): 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.
@@ -1073,6 +1147,32 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * A Dimension object containing the x, y, width, and height of an image.
      */
     getImageDimension(): Dimension;
+    /**
+     * Resize an image by changing its width and height.
+     *
+     * @param {number} width - Specifies the width of an image.
+     * @param {number} height - Specifies the height of an image.
+     * @param {boolean} isAspectRatio - Specifies whether the scaling option is enabled or not.
+     *
+     * @returns {boolean} - A boolean value indicating the success of the resizing operation.
+     */
+    resize(width: number, height: number, isAspectRatio?: boolean): boolean;
+    /**
+     * Draw a frame on an image.
+     *
+     * @param { FrameType} frameType - Specifies the frame option to be drawn on an image.
+     * @param {string} color - Specifies the color of a frame on an image. The default value is ‘#fff’.
+     * @param {string} gradientColor - Specifies the gradient color of a frame on an image. The default value is ‘’.
+     * @param {number} size - Specifies the size of the frame as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 20 if not specified.
+     * @param {number} inset - Specifies the inset value for line, hook, and inset type frames, as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 0 if not specified.
+     * @param {number} offset - Specifies the offset value for line and inset type frames, as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 0 if not specified.
+     * @param {number} borderRadius - Specifies the border radius for line-type frames, as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 0 if not specified.
+     * @param {FrameLineStyle} frameLineStyle - Specifies the type of line to be drawn for line-type frames. Default to Solid if not specified.
+     * @param {number} lineCount - Specifies the number of lines for line-type frames. Defaults to 0 if not specified.
+     *
+     * @returns {boolean}.
+     */
+    drawFrame(frameType: FrameType, color: string, gradientColor: string, size: number, inset: number, offset: number, borderRadius: number, frameLineStyle: FrameLineStyle, lineCount: number): boolean;
     private toolbarTemplateFn;
     private quickAccessToolbarTemplateFn;
     private templateParser;
@@ -1080,6 +1180,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private getFinetuneOption;
     private setPenStroke;
     private updateFreehandDrawColorChange;
+    private updateImageTransformColl;
     private setInitialZoomState;
     /**
      * Set the old item Transform item state.
@@ -1243,6 +1344,32 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @returns {void}.
      */
     updateFillColor(value: string): void;
+    /**
+     * Apply horizontal flip.
+     *
+     * @param { CanvasRenderingContext2D } ctx - Specifies the canvas context 2D.
+     * @param { boolean } isPreventURC - Specifies to update undo redo collection.
+     * @hidden
+     * @returns {void}.
+     */
+    horizontalFlip(ctx: CanvasRenderingContext2D, isPreventURC?: boolean): void;
+    /**
+     * Apply vertical flip.
+     *
+     * @param { CanvasRenderingContext2D } ctx - Specifies the canvas context 2D.
+     * @param { boolean } isPreventURC - Specifies to update undo redo collection.
+     * @hidden
+     * @returns {void}.
+     */
+    verticalFlip(ctx: CanvasRenderingContext2D, isPreventURC?: boolean): void;
+    /**
+     * Apply rotate image.
+     *
+     * @param { string } rotate - Specifies the direction of rotation.
+     * @hidden
+     * @returns {void}.
+     */
+    rotateImage(rotate: string): void;
     /**
      * Get pascalToSplitWords from string.
      *
@@ -1297,4 +1424,12 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @returns {void}.
      */
     updateToolbar(element: HTMLDivElement, type: string, value?: string): void;
+    /**
+     * Trigger the shapeChanging event for after the shape applied.
+     *
+     * @param { ShapeChangeEventArgs } shapeChangedArgs - Specifies the shapeChaning event args.
+     * @hidden
+     * @returns {void}.
+     */
+    triggerShapeChanged(shapeChangedArgs: ShapeChangeEventArgs): void;
 }