@syncfusion/ej2-image-editor 20.3.47

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

@@ -0,0 +1,961 @@
+import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
+import { EmitType } from '@syncfusion/ej2-base';
+import { SignatureBase } from '@syncfusion/ej2-inputs';
+import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
+import { OpenEventArgs } from '@syncfusion/ej2-popups';
+import { ImageEditorModel } from './image-editor-model';
+/**
+ * Image Editor is a graphical user interface that helps to edit an image by performing actions like selection,
+ * cropping, rotating, inserting text and shapes (rectangles, ellipses, lines), and drawing free hand on top of an image.
+ *
+ ```html
+ * <div id='imageeditor'></div>
+ * ```
+ * ```typescript
+ * <script>
+ * var imageObj = new ImageEditor({});
+ * imageObj.appendTo("#imageeditor");
+ * </script>
+ * ```
+ */
+export declare class ImageEditor extends SignatureBase implements INotifyPropertyChanged {
+    /**
+     *
+     * ImageEditor Private Properties
+     */
+    private lowerCanvas;
+    private lowerContext;
+    private upperCanvas;
+    private upperContext;
+    private inMemoryCanvas;
+    private inMemoryContext;
+    private baseImg;
+    private textBox;
+    private degree;
+    private isUndoRedo;
+    private dragCanvas;
+    private dragElement;
+    private keyHistory;
+    private flipState;
+    private mouseDownPoint;
+    private previousPoint;
+    private dragPoint;
+    private diffPoint;
+    private oldPoint;
+    private zoomedImg;
+    private objColl;
+    private undoRedoColl;
+    private imgDataColl;
+    private currImgData;
+    private strokeSettings;
+    private textSettings;
+    private tempStrokeSettings;
+    private penStrokeWidth;
+    private tempTextSettings;
+    private toolbarHeight;
+    private pannStart;
+    private pannEnd;
+    private togglePan;
+    private lastX;
+    private lastY;
+    private dragStart;
+    private dragged;
+    private factor;
+    private currFlipState;
+    private touchEndPoint;
+    private flipMethod;
+    private flipDirection;
+    private prevX;
+    private currX;
+    private prevY;
+    private currY;
+    private togglePen;
+    private rotateMethod;
+    private isBoldbtn;
+    private isItalicbtn;
+    private lastAction;
+    private currentToolbar;
+    private textStartPoints;
+    private fontSizeColl;
+    private tempKeyHistory;
+    private penDrawColl;
+    private allowDrag;
+    private textRow;
+    private activeObj;
+    private currObjType;
+    private defToolbarItems;
+    private defaultLocale;
+    private l10n;
+    private themeColl;
+    private toolbarFn;
+    private baseImgSrc;
+    private isTimer;
+    private timer;
+    private isScreenOriented;
+    /**
+     * Defines class/multiple classes separated by a space for customizing Image Editor UI.
+     * default ''
+     ```html
+     * <div id='imageeditor'></div>
+     * ```
+     * ```typescript
+     * <script>
+     * var imageObj = new ImageEditor({cssClass: 'e-custom-img-editor'});
+     * imageObj.appendTo("#imageeditor");
+     * </script>
+     * ```
+     */
+    cssClass: string;
+    /**
+     * Specifies whether the Image Editor is disabled.
+     * default false
+     */
+    disabled: boolean;
+    /**
+     * Specifies the height of the Image Editor.
+     * default '100%'
+     */
+    height: string;
+    /**
+     * Specifies the theme of the Image Editor. The shape selection appearance will be decided based on this property.
+     * The property supports all the built-in themes of Syncfusion.
+     * default 'Bootstrap5'
+     * @isenumeration true
+     * @default Theme.Bootstrap5
+     * @asptype Theme
+     *
+     */
+    theme: string | Theme;
+    /**
+     * Specifies the toolbar items to perform UI interactions. It accepts both string[] and ItemModel[] to configure its toolbar items.
+     * If the property is defined as empty collection, the toolbar will not be rendered.
+     * Suppose the property is not defined in control, an image editor’s toolbar will be rendered with preconfigured toolbar commands.
+     * 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, text and freehand drawing with resize, drag and drop, and customize its appearance.
+     *  Transform: helps to rotate and flip an image.
+     *  ZoomIn: performs zoom-in an image.
+     *  ZoomOut: performs zoom-out an image.
+     *  Pan: performs panning once zoomed an image.
+     *  Move: disable the pan action and move to perform other actions such as insert a shape, transform, and more.
+     *  Save: save the modified image.
+     *  Open: open an image to perform editing.
+     *  Reset: reset the modification and restore the original image.
+     * default null
+     ```html
+     * <div id='imageeditor'></div>
+     * ```
+     * ```typescript
+     * <script>
+     * var imageObj = new ImageEditor({
+     *     toolbar[Crop, ZoomIn, ZoomOut, Transform, {text: 'Custom'}]
+     * });
+     * imageObj.appendTo("#imageeditor");
+     * </script>
+     * ```
+     */
+    toolbar: (string | ImageEditorCommands | ItemModel)[];
+    /**
+     * Specifies template to the Image Editor Toolbar.
+     * If you want to customize the entire toolbar in own way by using this property.
+     * The property is depending on ‘toolbar’.
+     *
+     * @default null
+     ```html
+     * <div id='imageeditor'></div>
+     * ```
+     * ```typescript
+     * <script>
+     * var imageObj = new ImageEditor({
+     *     toolbarTemplate: '#toolbarTemplate'
+     * });
+     * imageObj.appendTo("#imageeditor");
+     * </script>
+     * <script id="toolbarTemplate" type="text/x-template">
+     *    <div class = 'e-toolbar'>
+     *      <button id= 'dltbtn'></button>
+     *    </div>
+     *  </script>
+     * ```
+     */
+    toolbarTemplate: string;
+    /**
+     * Specifies the width of the Image Editor.
+     * default 100%
+     */
+    width: string;
+    /**
+     * Triggers before an image is saved.
+     *
+     * @event beforeSave
+     */
+    beforeSave: EmitType<BeforeSaveEventArgs>;
+    /**
+     * Triggers once the component rendering is completed.
+     *
+     * @event created
+     */
+    created: EmitType<Event>;
+    /**
+     * Triggers once the component is destroyed with its elements and bound events.
+     *
+     * @event destroyed
+     */
+    destroyed: EmitType<Event>;
+    /**
+     * Triggers while zooming an image.
+     *
+     * @event zooming
+     */
+    zooming: EmitType<ZoomEventArgs>;
+    /**
+     * Triggers while panning an image.
+     *
+     * @event panning
+     */
+    panning: EmitType<PanEventArgs>;
+    /**
+     * Triggers while cropping an image.
+     *
+     * @event cropping
+     */
+    cropping: EmitType<CropEventArgs>;
+    /**
+     * Triggers while rotating an image.
+     *
+     * @event rotating
+     */
+    rotating: EmitType<RotateEventArgs>;
+    /**
+     * Triggers while flipping an image.
+     *
+     * @event flipping
+     */
+    flipping: EmitType<FlipEventArgs>;
+    /**
+     * Triggers while changing shapes in an image.
+     *
+     * @event shapeChanging
+     */
+    shapeChanging: EmitType<ShapeChangeEventArgs>;
+    /**
+     * Triggers once an image is opened.
+     *
+     * @event fileOpened
+     */
+    fileOpened: EmitType<OpenEventArgs>;
+    /**
+     * Triggers once an image is saved.
+     *
+     * @event saved
+     */
+    saved: EmitType<SaveEventArgs>;
+    /**
+     * Triggers once the toolbar is created.
+     *
+     * @event toolbarCreated
+     */
+    toolbarCreated: EmitType<ToolbarEventArgs>;
+    /**
+     * Triggers while updating/refreshing the toolbar
+     *
+     * @event toolbarUpdating
+     */
+    toolbarUpdating: EmitType<ToolbarEventArgs>;
+    /**
+     * Triggers once the toolbar item is clicked.
+     *
+     * @event toolbarItemClicked
+     */
+    toolbarItemClicked: EmitType<ClickEventArgs>;
+    /**
+     *
+     * Constructor for creating the widget
+     *
+     * @param  {ImageEditorModel} options - Specifies the image editor model
+     * @param  {string|HTMLDivElement} element - Specifies the target element
+     */
+    constructor(options?: ImageEditorModel, element?: string | HTMLCanvasElement);
+    protected preRender(): void;
+    /**
+     *
+     * To Initialize the component rendering
+     *
+     * @private
+     * @returns {void}
+     */
+    protected render(): void;
+    /**
+     * To get component name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    getModuleName(): string;
+    /**
+     *
+     * To get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     * @private
+     */
+    getPersistData(): string;
+    /**
+     *
+     * Called internally if any of the property value changed.
+     *
+     * @param  {ImageEditorModel} newProperties - Specifies new properties
+     * @param  {ImageEditorModel} oldProperties - Specifies old properties
+     * @returns {void}
+     * @private
+     */
+    onPropertyChanged(newProperties: ImageEditorModel, oldProperties?: ImageEditorModel): void;
+    destroy(): void;
+    initialize(): void;
+    /**
+     *
+     * This Method will add events to component (element, event, method, current reference)
+     *
+     * @returns {void}.
+     */
+    private wireEvent;
+    /**
+     *
+     * This Method will remove events from component
+     *
+     * @returns {void}.
+     */
+    private unwireEvent;
+    private updateTheme;
+    private toPascalCase;
+    private createCanvas;
+    private createToolbar;
+    private createBottomToolbar;
+    private initBottomToolbar;
+    private toolbarTemplateFn;
+    private templateParser;
+    private getLeftToolbarItem;
+    private getRightToolbarItem;
+    private getMainToolbarItem;
+    private getZoomToolbarItem;
+    private processToolbar;
+    private processSubToolbar;
+    private isToolbar;
+    private initToolbarItem;
+    private createLeftToolbarControls;
+    private renderAnnotationBtn;
+    private renderCropBtn;
+    private renderTransformBtn;
+    private renderSaveBtn;
+    private cropSelect;
+    private transformSelect;
+    private getShapesToolbarItem;
+    private initShapesToolbarItem;
+    private createShapeColor;
+    private createShapeBtn;
+    private getTextToolbarItem;
+    private getFontFamilyItems;
+    private getFontSizeItems;
+    private initTextToolbarItem;
+    private createTextColor;
+    private createTextBtn;
+    private getFontSizes;
+    private getTextAreaWidth;
+    private applyFontStyle;
+    private initZoomToolbarItem;
+    private defToolbarClicked;
+    private cancelPan;
+    private callMainToolbar;
+    private cancelItems;
+    private gradient;
+    private applyPenDraw;
+    private refreshToolbar;
+    private getPenToolbarItem;
+    private initPenToolbarItem;
+    private createPenColor;
+    private createPenBtn;
+    private setPenStroke;
+    private updateCanvas;
+    private imageOnLoad;
+    private refreshActiveObj;
+    private redrawText;
+    private setTextSelection;
+    private updateUndoRedoColl;
+    private fileSelect;
+    private findTextPoint;
+    private getStrokeWidth;
+    private updateToolbarItems;
+    private setTimer;
+    private touchStartHandler;
+    private mouseDownEventHandler;
+    private mouseMoveEventHandler;
+    private mouseUpEventHandler;
+    private keyDownEventHandler;
+    private keyUpEventHandler;
+    private canvasMouseDownHandler;
+    private canvasMouseMoveHandler;
+    private canvasMouseUpHandler;
+    private textKeyDown;
+    private adjustToScreen;
+    private screenOrientation;
+    private windowResizeHandler;
+    private redrawImg;
+    private updateContext;
+    private scaleNonUniform;
+    private zoomImg;
+    private handleScroll;
+    private redraw;
+    private applyCurrActObj;
+    private updateTextFromTextArea;
+    private redrawActObj;
+    private setTextBoxPos;
+    private setTextBoxPoints;
+    private findTextTarget;
+    private setTextBoxHeight;
+    private setTextBoxWidth;
+    private setActivePoint;
+    private updateActivePoint;
+    private updateNWPoints;
+    private updateNPoints;
+    private updateNEPoints;
+    private updateWPoints;
+    private updateEPoints;
+    private updateSWPoints;
+    private updateSPoints;
+    private updateSEPoints;
+    private getScaleRatio;
+    private getMaxText;
+    private setDragLimit;
+    private lineDraw;
+    private shapeCircle;
+    private drawOuterSelection;
+    private getZoomShape;
+    private drawObject;
+    private updateActiveObject;
+    private drawShapeObj;
+    private shapeLine;
+    private shapeText;
+    private updateActPoint;
+    private drawSquareLines;
+    private drawSelection;
+    private drawCenterCircles;
+    private findTarget;
+    private findTargetObj;
+    private updateCursorStyles;
+    private drawCropRatio;
+    private setDragDirection;
+    private calcShapeRatio;
+    private getScale;
+    private calcRatio;
+    private calcMaxDimension;
+    private setMaximumDimension;
+    private setCursor;
+    private setCursorFromObj;
+    private setCursorForZoomState;
+    private downloadImg;
+    private toSVGImg;
+    private toBlobFn;
+    private addLetter;
+    private updateFontStyles;
+    private updateInMemoryCanvas;
+    private drawBaseImg;
+    private calcPrevRatio;
+    private textFlipDegree;
+    private rotateText;
+    private redrawSelection;
+    private redrawObj;
+    private updateCurrentActiveObjPoint;
+    private calcCurrPoints;
+    private redrawShape;
+    private applyActObj;
+    private apply;
+    private setCenterPoints;
+    private drawShape;
+    private drawShapeText;
+    private drawPen;
+    private getObjDetails;
+    private isPointsInRange;
+    /**
+     * Clear a current selection.
+     *
+     * @returns {void}.
+     */
+    clearSelection(): void;
+    /**
+     * Crops an image based on the selection.
+     * The selection can be done through programmatically using the select method or through UI interactions.
+     *
+     * @returns {boolean}.
+     */
+    crop(): boolean;
+    private updateInMemoryContext;
+    /**
+     * Flips an image by horizontally or vertically.
+     *
+     * @param {Direction } direction - Specifies the direction to flip the image.
+     * @returns {void}.
+     */
+    flip(direction: Direction): void;
+    /**
+     * Return an image as ImageData.
+     *
+     * @returns {ImageData}.
+     */
+    getImageData(): ImageData;
+    /**
+     *  Load/opens an image for editing within an image editor.
+     *
+     * @param {string | ImageData } data - Specifies url of the Image or image data.
+     *
+     * @returns {void}.
+     */
+    open(data: string | ImageData): void;
+    /**
+     * Reset all the changes and revert to original image.
+     *
+     * @returns {void}.
+     */
+    reset(): void;
+    /**
+     * Rotate an image to clockwise and anti-clockwise.
+     *
+     * @param {number} degree - Specifies a degree to rotate an image.
+     * positive integer value for clockwise and negative integer value for anti-clockwise rotation.
+     *
+     * @returns {boolean}.
+     */
+    rotate(degree: number): boolean;
+    /**
+     * Export an image using the specified file name and the extension.
+     *
+     * @param {string} type - Specifies a format of image to be saved.
+     * @param {string} fileName – Specifies a file name to be saved
+     *
+     * @returns {void}.
+     */
+    export(type?: string, fileName?: string): void;
+    /**
+     * Perform selection in an image editor. The selection helps to crop an image.
+     *
+     * @param {string} type - Specifies the shape - circle / square / custom selection / pre-defined ratios.
+     * @param {number} startX – Specifies the start x-coordinate point of the selection.
+     * @param {number} startY – Specifies the start y-coordinate point of the selection.
+     * @param {number} width - Specifies the width of the selection area.
+     * @param {number} height - Specifies the height of the selection area.
+     * @returns {void}.
+     *   ```html
+     * <div id='imageeditor'></div>
+     * ```
+     * ```typescript
+     * <script>
+     * var imageObj = new ImageEditor({
+     *   created : () => {
+     *     imageObj.select('16:9', 10, 10);
+     *  }
+     * });
+     * imageObj.appendTo("#imageeditor");
+     * </script>
+     * ```
+     */
+    select(type: string, startX?: number, startY?: number, width?: number, height?: number): void;
+    /**
+     * Enable or disable a freehand drawing in an Image Editor.
+     *
+     * @param {boolean} value - Specifies a value whether enable or disable freehand drawing.
+     *
+     *  @returns {void}.
+     */
+    freeHandDraw(value: boolean): void;
+    /**
+     * Enable or disable a panning on the Image Editor.
+     *
+     * @param {boolean} value - Specifies a value whether enable or disable panning.
+     *
+     * @returns {void}.
+     */
+    pan(value: boolean): void;
+    /**
+     * Increase / Decrease the magnification of an image.
+     *
+     * @param {boolean} value - Specifies a value to be zoomed on the image.
+     * @returns {void}.
+     */
+    zoom(value: number): void;
+    /**
+     * Draw ellipse on an image.
+     *
+     * @param {number} x - Specifies x-coordinate of ellipse.
+     * @param {number} y - Specifies y-coordinate of ellipse.
+     * @param {number} radiusX - the radius x point for the ellipse.
+     * @param {number} radiusY - the radius y point for the ellipse.
+     * @param {number} strokeWidth - the stroke width of ellipse.
+     * @param {string} strokeColor - the stroke color of ellipse.
+     * @param {string} fillColor - the fill color of the ellipse.
+     * @returns {boolean}.
+     *
+     * ```html
+     * <div id='imageeditor'></div>
+     * ```
+     * ```typescript
+     * <script>
+     * * var imageObj = new ImageEditor({
+     * created: () => {
+     * imageObj.drawEllipse(10, 10, 40, 60);
+     * }
+     * });
+     * imageObj.appendTo("#imageeditor");
+     * </script>
+     * ```
+     */
+    drawEllipse(x?: number, y?: number, radiusX?: number, radiusY?: number, strokeWidth?: number, strokeColor?: string, fillColor?: string): boolean;
+    /**
+     * Draw line on an image.
+     *
+     * @param {number} startX – Specifies start point x-coordinate of line.
+     * @param {number} startY – Specifies start point y-coordinate of line.
+     * @param {number} endX - Specifies end point x-coordinates of line.
+     * @param {number} endY - Specifies end point y-coordinates of the line.
+     * @param {number} strokeWidth - Specifies the stroke width of line.
+     * @param {string} strokeColor - Specifies the stroke color of line.
+     * @returns {boolean}.
+     */
+    drawLine(startX?: number, startY?: number, endX?: number, endY?: number, strokeWidth?: number, strokeColor?: string): boolean;
+    /**
+     * Draw a rectangle on an image.
+     *
+     * @param {number} x - Specifies x-coordinate of rectangle.
+     * @param {number} y - Specifies y-coordinate of rectangle.
+     * @param {number} width - Specifies the width of the rectangle.
+     * @param {number} height - Specifies the height of the rectangle.
+     * @param {number} strokeWidth - Specifies the stroke width of rectangle.
+     * @param {string} strokeColor - Specifies the stroke color of rectangle.
+     * @param {string} fillColor - the fill color of the rectangle.
+     * @returns {boolean}.
+     */
+    drawRectangle(x?: number, y?: number, width?: number, height?: number, strokeWidth?: number, strokeColor?: string, fillColor?: string): boolean;
+    /**
+     * Draw a text on an image.
+     *
+     * @param {number} x - Specifies x-coordinate of text.
+     * @param {number} y - Specifies y-coordinate of text.
+     * @param {string} text - Specifies the text to add on an image.
+     * @param {string} fontFamily - Specifies the font family of the text.
+     * @param {number} fontSize - Specifies the font size of the text.
+     * @param {boolean} bold - Specifies whether the text is bold or not.
+     * @param {boolean} italic - Specifies whether the text is italic or not.
+     * @param {string} color - Specifies font color of the text.
+     * @returns {boolean}.
+     *
+     * ```html
+     * <div id='imageeditor'></div>
+     * ```
+     * ```typescript
+     * <script>
+     * var imageObj = new ImageEditor({
+     * created: () => {
+     *  imageObj.drawText(10, 10, 'Syncfusion', 'Arial', 12, true, true, '#000');
+     * }
+     * });
+     * imageObj.appendTo("#imageeditor");
+     *
+     * </script>
+     * ```
+     */
+    drawText(x?: number, y?: number, text?: string, fontFamily?: string, fontSize?: number, bold?: boolean, italic?: boolean, color?: string): boolean;
+    /**
+     * Selects a shape based on the given shape id. The id can be got from the public method ‘getShapeSettings’.
+     *
+     * @param {string} id - Specifies the shape id to select a shape on an image.
+     * @returns {boolean}.
+     * ```html
+     * <div id='imageeditor'></div>
+     * ```
+     * ```typescript
+     * <script>
+     * var imageObj = new ImageEditor({
+     * created: () => {
+     *  imageObj.selectShape('shape_1');
+     * }
+     * });
+     * imageObj.appendTo("#imageeditor");
+     * </script>
+     * ```
+     */
+    selectShape(id: string): boolean;
+    /**
+     * Deletes a shape based on the given shape id. The id can be got from the public method getShapeSettings.
+     *
+     * @param {string} id - Specifies the shape id to delete the shape on an image.
+     * @returns {void}.
+     * ```html
+     * <div id='imageeditor'></div>
+     * ```
+     * ```typescript
+     * <script>
+     * var imageObj = new ImageEditor({
+     * created: () => {
+     *  imageObj.deleteShape('shape_1');
+     * }
+     * });
+     * imageObj.appendTo("#imageeditor");
+     * </script>
+     * ```
+     */
+    deleteShape(id: string): void;
+    /**
+     * Get particular shapes details based on id of the shape which is drawn on an image editor.
+     *
+     * @param {string} id - Specifies the shape id on an image.
+     * @returns {ShapeSettings}.
+     * ```html
+     * <div id='imageeditor'></div>
+     * ```
+     * ```typescript
+     * <script>
+     * var imageObj = new ImageEditor({
+     * created: () => {
+     *  imageObj.getShapeSetting('shape_1');
+     * }
+     * });
+     * imageObj.appendTo("#imageeditor");
+     * </script>
+     * ```
+     */
+    getShapeSetting(id: string): ShapeSettings;
+    /**
+     * Get all the shapes details which is drawn on an image editor.
+     *
+     * @returns {ShapeSettings[]}.
+     */
+    getShapeSettings(): ShapeSettings[];
+    /**
+     * To refresh the Canvas Wrapper.
+     *
+     * @returns {void}.
+     */
+    update(): void;
+}
+/**
+ * Defines the Image Editor file type.
+ */
+export declare type FileType = 'Png' | 'Jpeg' | 'Svg';
+/**
+ * Defines the direction to flip the image on Image Editor.
+ */
+export declare type Direction = 'Horizontal' | 'Vertical';
+/**
+ * Defines the Image Editor shape type.
+ */
+export declare type ShapeType = 'Rectangle' | 'Ellipse' | 'Line' | 'Text';
+/**
+ * Defines the theme for Image Editor.
+ */
+export declare type Theme = 'Bootstrap5' | 'Bootstrap5Dark' | 'Tailwind' | 'TailwindDark' | 'Fluent' | 'FluentDark' | 'Bootstrap4' | 'Bootstrap' | 'BootstrapDark' | 'Material' | 'MaterialDark' | 'Fabric' | 'FabricDark' | 'Highcontrast';
+/**
+ * Defines the toolbar items for Image Editor.
+ */
+export declare type ImageEditorCommands = 'Crop' | 'Transform' | 'Annotate' | 'ZoomIn' | 'ZoomOut' | 'Open' | 'Reset' | 'Save' | 'Pan' | 'Move' | 'Pen' | 'Line' | 'Rectangle' | 'Ellipse' | 'Text' | 'CustomSelection' | 'CircleSelection' | 'SquareSelection' | 'RatioSelection' | 'RotateLeft' | 'RotateRight' | 'FlipHorizontal' | 'FlipVertical';
+/**
+ * Interface for zoom transition occur in the imageEditor.
+ */
+export interface ZoomEventArgs {
+    /**
+     * Returns the (x, y) point to be zoomed.
+     */
+    zoomPoint: Point;
+    /**
+     * Specifies the value of zooming. Zoom in or out can be defined based on the value.
+     */
+    zoomLevel: number;
+}
+/**
+ * Interface for pan transition occur in the imageEditor.
+ */
+export interface PanEventArgs {
+    /**
+     * Returns the (x, y) point of panning started
+     */
+    startPoint: Point;
+    /**
+     * Returns the (x, y) point to be panning ended.
+     */
+    endPoint: Point;
+}
+/**
+ * Interface for crop transition occur in the imageEditor.
+ */
+export interface CropEventArgs {
+    /**
+     * Returns the start point of the crop region.
+     */
+    startPoint: Point;
+    /**
+     * Returns the end point of the crop region.
+     */
+    endPoint: Point;
+}
+/**
+ * Interface for rotate transition in the imageEditor.
+ */
+export interface RotateEventArgs {
+    /**
+     * Returns the degree to be rotated.
+     */
+    degree: number;
+}
+/**
+ * Interface for flip transition in the imageEditor.
+ */
+export interface FlipEventArgs {
+    /**
+     * Returns the direction(Horizontal and vertical) to be flipped.
+     */
+    direction: string;
+}
+/**
+ * Interface for shape change in imageEditor.
+ */
+export interface ShapeChangeEventArgs {
+    /**
+     * Returns the name of the action.
+     */
+    action?: string;
+    /**
+     * Returns the object of shape before moved, resized, or customized the UI.
+     */
+    previousShapeSettings?: Object;
+    /**
+     * Returns `the object of shape which is inserted or moved or deleted or resized or customized the UI.
+     */
+    currentShapeSettings?: Object;
+}
+/**
+ * Interface for Toolbar events.
+ */
+export interface ToolbarEventArgs {
+    /**
+     * Defines the cancel option to cancel the toolbar action.
+     */
+    cancel?: boolean;
+    /**
+     * Returns the current toolbar type.
+     */
+    toolbarType?: string;
+    /**
+     * Returns the current toolbar item.
+     */
+    item?: ItemModel;
+    /**
+     * Specifies the toolbar item collection to be rendered as contextual toolbar.
+     */
+    toolbarItems?: (string | ItemModel)[];
+}
+/**
+ * Interface for saving the canvas as image.
+ */
+export interface SaveEventArgs {
+    /**
+     * Specifies the file name for an image.
+     */
+    fileName: string;
+    /**
+     * Returns the file type for an image.
+     */
+    fileType: FileType;
+}
+/**
+ * Interface for before saving the canvas as image.
+ */
+export interface BeforeSaveEventArgs {
+    /**
+     * Defines the cancel option to cancel the save action.
+     */
+    cancel: boolean;
+    /**
+     * Specifies the file name for an image.
+     */
+    fileName: string;
+    /**
+     * Returns the file type for an image.
+     */
+    fileType: FileType;
+}
+/**
+ * Interface for Point Object in the image editor.
+ *
+ */
+export interface Point {
+    /**
+     * Returns the x position in the canvas.
+     */
+    x: number;
+    /**
+     * Returns y position in the canvas.
+     */
+    y: number;
+}
+/**
+ * Interface for ShapeSettings in the imageEditor.
+ */
+export interface ShapeSettings {
+    /**
+     * Returns the id of the shape.
+     */
+    id: string;
+    /**
+     * Returns the type of the shape.
+     */
+    type: ShapeType;
+    /**
+     * Returns the start x position of the shape.
+     */
+    startX: number;
+    /**
+     * Returns the start y position of the shape.
+     */
+    startY: number;
+    /**
+     * Returns the width of the shape.
+     */
+    width?: number;
+    /**
+     * Returns the height of the shape.
+     */
+    height?: number;
+    /**
+     * Returns the stroke color of the shape.
+     */
+    strokeColor?: string;
+    /**
+     * Returns the fill color of the shape.
+     */
+    fillColor?: string;
+    /**
+     * Returns the stroke width of the shape.
+     */
+    strokeWidth?: number;
+    /**
+     * Returns the radius of the ellipse shape.
+     */
+    radius?: number;
+    /**
+     * Returns the length of the line shape.
+     */
+    length?: number;
+    /**
+     * Returns the text content of the text.
+     */
+    text?: string;
+    /**
+     * Returns the font size of the text.
+     */
+    fontSize?: number;
+    /**
+     * Returns the font style of the text.
+     */
+    fontStyle?: string[];
+    /**
+     * Returns the font color of the text.
+     */
+    color?: string;
+}