@syncfusion/ej2-image-editor 21.2.10 → 22.1.34

package/src/image-editor/{image-editor.d.ts → base/image-editor.d.ts}

@@ -1,31 +1,15 @@
-import { Component, INotifyPropertyChanged } from '@syncfusion/ej2-base';
+import { Component, INotifyPropertyChanged, ModuleDeclaration, BlazorDotnetObject } from '@syncfusion/ej2-base';
 import { EmitType } from '@syncfusion/ej2-base';
 import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
 import { ChildProperty } from '@syncfusion/ej2-base';
-import { ImageEditorModel, FinetuneSettingsModel, ZoomSettingsModel } from './image-editor-model';
-/**
- * This interface is used to specify settings for image finetuning operations, including minimum and maximum values, as well as default values.
- */
-export interface ImageFinetuneValue {
-    /**
-     * Specifies the minimum value of finetune option.
-     *
-     * @default null
-     */
-    min: number;
-    /**
-     * Specifies the maximum value of finetune option.
-     *
-     * @default null
-     */
-    max: number;
-    /**
-     * Specifies the default value of finetune option.
-     *
-     * @default null
-     */
-    defaultValue: number;
-}
+import { ImageEditorModel, FinetuneSettingsModel, ZoomSettingsModel, SelectionSettingsModel } from './image-editor-model';
+import { SelectionChangeEventArgs, Transition, ArrowheadType } 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 { Direction, ZoomTrigger, Theme, ImageEditorCommand, ImageFilterOption, ImageFinetuneOption } 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.
  */
@@ -124,15 +108,14 @@ export declare class ZoomSettings extends ChildProperty<ZoomSettings> {
      *
      * By default, this property is set to `null`, which enables all types of zooming.
      *
-     * @aspNumberEnum
      * @default null
+     * @aspNumberEnum
      */
     zoomTrigger: ZoomTrigger;
     /**
      * Specifies the minimum zooming level to limit the zooming.
      * An integer value that specifies the minimum zooming level. And the default value is 1 (100%).
      *
-     * @private
      * @remarks
      * The given value is considered as percentage.
      *
@@ -167,167 +150,132 @@ export declare class ZoomSettings extends ChildProperty<ZoomSettings> {
      */
     zoomPoint: Point;
 }
+/**
+ * This interface is used to specify settings for selection operations on images, including visibility, stroke color and fill color.
+ */
+export declare class SelectionSettings extends ChildProperty<SelectionSettings> {
+    /**
+     * Specifies a boolean value whether to show circle on selection in the image editor.
+     *
+     * @type {boolean}
+     *
+     * @default true
+     */
+    showCircle: boolean;
+    /**
+     * Represents stroke color of circle selection in the image editor.
+     *
+     * @type {string}
+     *
+     * @default null
+     */
+    strokeColor: string;
+    /**
+     * Represents fill color of circle selection in the image editor.
+     *
+     * @type {string}
+     *
+     * @default null
+     */
+    fillColor: string;
+}
 /**
  * The Image Editor is a graphical user interface for editing images.
  *
+ * {% codeBlock src='image-editor/default/index.md' %}{% endcodeBlock %}
+ *
  * @remarks
  * The Image Editor component provides various image editing features such as zooming, cropping, rotating, inserting text and shapes (rectangles, ellipses, and lines), drawing freehand on top of an image, undo/redo, and more.
  *
- * {% codeBlock src='image-editor/default/index.md' %}{% endcodeBlock %}
- *
  */
 export declare class ImageEditor extends Component<HTMLDivElement> implements INotifyPropertyChanged {
     /**
      *
      * Image Editor Private Properties
      */
-    private lowerCanvas;
+    /** @hidden */
+    isImageLoaded: boolean;
+    /** @hidden */
+    baseImg: HTMLImageElement;
+    /** @hidden */
+    lowerCanvas: HTMLCanvasElement;
+    /** @hidden */
+    upperCanvas: HTMLCanvasElement;
+    /** @hidden */
+    inMemoryCanvas: HTMLCanvasElement;
+    /** @hidden */
+    textArea: HTMLInputElement;
+    /** @hidden */
+    activeObj: SelectionPoint;
+    /** @hidden */
+    currObjType: Interaction;
+    /** @hidden */
+    objColl: SelectionPoint[];
+    /** @hidden */
+    pointColl: any;
+    /** @hidden */
+    freehandCounter: number;
+    /** @hidden */
+    points: Point[];
+    /** @hidden */
+    togglePen: boolean;
+    /** @hidden */
+    togglePan: boolean;
+    /** @hidden */
+    img: ImageDimension;
+    /** @hidden */
+    themeColl: Object;
+    /** @hidden */
+    rotateFlipColl: any;
+    /** @hidden */
+    cropObj: CurrentObject;
+    /** @hidden */
+    afterCropActions: string[];
+    /** @hidden */
+    currSelectionPoint: SelectionPoint;
+    /** @hidden */
+    transform: TransformValue;
+    /** @hidden */
+    panPoint: PanPoint;
+    /** @hidden */
+    isUndoRedo: boolean;
+    /** @hidden */
+    isCropTab: boolean;
+    /** @hidden */
+    isCircleCrop: boolean;
+    /** @hidden */
+    fontSizeColl: DropDownButtonItemModel[];
+    /** @hidden */
+    initialAdjustmentValue: string;
+    /** @hidden */
+    currentFilter: string;
+    /** @hidden */
+    canvasFilter: string;
+    /** @hidden */
+    dotNetRef: BlazorDotnetObject;
+    /** @hidden */
+    toolbarHeight: number;
+    /** @hidden */
+    events: any;
+    /** @hidden */
+    isPublicMethod: boolean;
+    /** @hidden */
+    cancelCropSelection: Transition;
+    /** @hidden */
+    isCropToolbar: boolean;
+    /** @hidden */
+    prevCurrSelectionPoint: SelectionPoint;
+    /** @hidden */
+    cursor: string;
+    /** @hidden */
+    eventType: string;
+    /** @hidden */
+    panEventArgs: PanEventArgs;
     private lowerContext;
-    private upperCanvas;
     private upperContext;
-    private inMemoryCanvas;
     private inMemoryContext;
-    private baseImg;
-    private textArea;
-    private degree;
-    private isUndoRedo;
-    private dragCanvas;
-    private dragElement;
-    private keyHistory;
-    private tempKeyHistory;
-    private mouseDownPoint;
-    private previousPoint;
-    private dragPoint;
-    private diffPoint;
-    private oldPoint;
-    private objColl;
-    private undoRedoColl;
-    private isImageLoaded;
-    private strokeSettings;
-    private tempStrokeSettings;
-    private textSettings;
-    private tempTextSettings;
-    private penStrokeWidth;
-    private toolbarHeight;
-    private togglePan;
-    private disablePan;
-    private currFlipState;
-    private touchEndPoint;
-    private undoRedoStep;
-    private togglePen;
-    private currentToolbar;
-    private textStartPoints;
-    private fontSizeColl;
-    private textRow;
-    private activeObj;
-    private tempActiveObj;
-    private currObjType;
-    private defToolbarItems;
-    private defaultLocale;
-    private l10n;
-    private themeColl;
     private toolbarFn;
-    private quickAccessToolbarFn;
-    private timer;
-    private tempObjColl;
-    private isFirstMove;
-    private startTouches;
-    private tempTouches;
-    private adjustmentLevel;
-    private tempAdjustmentLevel;
-    private adjustmentValue;
-    private initialAdjustmentValue;
-    private tempAdjustmentValue;
-    private currentFilter;
-    private tempFilter;
-    private canvasFilter;
-    private tempUndoRedoStep;
-    private zoomFactor;
-    private tempZoomFactor;
-    private destLeft;
-    private destTop;
-    private destWidth;
-    private destHeight;
-    private srcLeft;
-    private srcTop;
-    private srcWidth;
-    private srcHeight;
-    private currSelectionPoint;
-    private currDestinationPoint;
-    private cropDestPoints;
-    private panDown;
-    private panMove;
-    private tempPanMove;
-    private flipColl;
-    private isReverseRotate;
-    private isReverseFlip;
-    private isPreventDragging;
-    private isRotateZoom;
-    private rotateFlipColl;
-    private currentPannedPoint;
-    private isCircleCrop;
-    private rotatedDestPoints;
-    private croppedDegree;
-    private freehandDrawHoveredIndex;
-    private freehandDrawSelectedIndex;
-    private isFreehandDrawingPoint;
-    private isFreehandDrawEditing;
-    private tempFreeHandDrawEditingStyles;
-    private totalPannedInternalPoint;
-    private totalPannedClientPoint;
-    private currentSelectionPoint;
-    private totalPannedPoint;
-    private isCropTab;
-    private cropZoomFactor;
-    private defaultZoomFactor;
-    private fileName;
-    private isBrightnessAdjusted;
-    private isInitialLoading;
-    private fileType;
-    private freehandDrawObj;
-    private points;
-    private pointColl;
-    private pointCounter;
-    private freehandCounter;
-    private isFreehandDrawing;
-    private tempFreehandCounter;
-    private tempActObj;
-    private selectedFreehandColor;
-    private isFreehandDrawCustomized;
-    private isAllowCropPan;
-    private cropObj;
-    private afterCropActions;
-    private isCancelAction;
-    private isFreehandPointMoved;
-    private isTouch;
-    private freehandDownPoint;
-    private tempFlipPanPoint;
-    private currentFreehandDrawIndex;
-    private tempCurrentFreehandDrawIndex;
-    private preventZoomBtn;
-    private cancelObjColl;
-    private cancelPointColl;
-    private rotatedFlipCropSelection;
-    private freehandDrawSelectedId;
-    private transformCurrentObj;
-    private currToolbar;
-    private currentMouseMovePoint;
-    private previousCropCurrentObj;
-    private zoomBtnHold;
-    private zoomType;
-    private cursorTargetObjId;
-    private appliedUndoRedoColl;
-    private selPoints;
-    private selPointColl;
-    private prevActObj;
-    private tempCurrSelectionPoint;
-    private previousZoomValue;
-    private initialZoomValue;
-    private isObjSelected;
-    private isShapeInserted;
-    private isInitialTextEdited;
-    private isShapeTextInserted;
-    private isErrorImage;
+    private qatFn;
     /**
      * Defines one or more CSS classes that can be used to customize the appearance of an Image Editor component.
      *
@@ -389,7 +337,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, 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 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.
@@ -399,35 +347,29 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * - Open: open an image to perform editing.
      * - Reset: reset the modification and restore the original image.
      *
-     * @example
-     * // Define toolbar items as an array of strings
-     * var toolbarItems = ["Crop", "Annotate", "Transform", "ZoomIn", "ZoomOut", "Pan", "Move", "Save", "Open", "Reset"];
-     *
-     * // Define toolbar items as an array of ItemModel objects
-     * var toolbarItems = [
-     *   { text: "Crop", tooltipText: "Crop", prefixIcon: "e-icon e-crop-icon" }
-     * ]
+     * {% codeBlock src='image-editor/toolbar/index.md' %}{% endcodeBlock %}
      *
      * @remarks
      * If the toolbarTemplate property is defined in the control, the toolbar will be rendered based on the toolbarTemplate property.
      * @default null
      *
-     * {% codeBlock src='image-editor/toolbar/index.md' %}{% endcodeBlock %}
      */
     toolbar: (string | ImageEditorCommand | ItemModel)[];
     /**
      * Specifies a custom template for the toolbar of an image editor control.
      * A string that specifies a custom template for the toolbar of the image editor. If this property is defined, the 'toolbar' property will not have any effect.
      *
+     * {% codeBlock src='image-editor/toolbarTemplate/index.md' %}{% endcodeBlock %}
+     *
      * @remarks
      * Use this property if you want to customize the entire toolbar in your own way. The template should be a string that contains the HTML markup for the custom toolbar.
      *
      * @default null
+     * @aspType string
      *
-     * {% codeBlock src='image-editor/toolbarTemplate/index.md' %}{% endcodeBlock %}
      *
      */
-    toolbarTemplate: string;
+    toolbarTemplate: string | Function;
     /**
      * Specifies the width of an Image Editor.
      *
@@ -450,32 +392,53 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      */
     allowUndoRedo: boolean;
     /**
-     * Specifies whether to show/hide the Quick Access Toolbar while select the shapes.
-     *
-     * @remarks
-     * The Quick Access Toolbar is a small customizable toolbar that shows commonly used commands while select the shapes.
-     * Set this property to true to show the Quick Access Toolbar, and false to hide it.
+     * Specifies whether to show/hide the quick access toolbar.
      *
-     * @default false
-     * @private
+     * @default true
      *
      * @remarks
      * Set this property to true to show the quick access toolbar, and false to hide it.
+     * ```html
+     * <div id='imageeditor'></div>
+     * ```
+     * ```typescript
+     * <script>
+     * var imageObj = new ImageEditor({
+     *     showQuickAccessToolbar : true
+     * });
+     * imageObj.appendTo("#imageeditor");
+     * </script>
+     * ```
      */
     showQuickAccessToolbar: boolean;
     /**
-     * Specifies a custom template content for the quick access toolbar of an Image Editor control.
+     * Specifies a template for the quick access toolbar.
+     * Use this property to customize the quick access toolbar.
      *
      * @default null
-     * @private
+     * @aspType string
      *
      * @remarks
-     * This property only works if the "showQuickAccessToolbar" property is set to true.
-     *
-     * {% codeBlock src='image-editor/quickAccessToolbarTemplate/index.md' %}{% endcodeBlock %}
-     *
-     */
-    quickAccessToolbarTemplate: string;
+     * This property only works if the "showQuickToolbar" property is set to true.
+     * ```html
+     * <div id='imageeditor'></div>
+     * ```
+     * ```typescript
+     * <script>
+     * var imageObj = new ImageEditor({
+     *     showQuickAccessToolbar : true,
+     *     quickAccessToolbarTemplate: '#toolbarTemplate'
+     * });
+     * imageObj.appendTo("#imageeditor");
+     * </script>
+     * <script id="toolbarTemplate" type="text/x-template">
+     *    <div class = 'e-toolbar'>
+     *      <button id= 'dltbtn'></button>
+     *    </div>
+     *  </script>
+     * ```
+     */
+    quickAccessToolbarTemplate: string | Function;
     /**
      * Specifies whether to prevent user interaction with the image editor control.
      * A boolean that specifies whether to prevent the interaction in image editor control. The default value is false.
@@ -509,6 +472,8 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     /**
      * Specifies the finetune settings option which can be used to perform color adjustments in the image editor control.
      *
+     * {% codeBlock src='image-editor/finetuneSettings/index.md' %}{% endcodeBlock %}
+     *
      * @remarks
      * A 'FinetuneSettingsModel' value that specifies the the finetune options which are enabled in image editor control.
      * If the property is not specified, then the default values will be applied for minimum, maximum, and value properties for all finetune options.
@@ -522,14 +487,14 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * - Opacity: The state or quality of being opaque or transparent, not allowing light to pass through the image. Opacity can be controlled by opacity property.
      * - Blur : Adjusting the blur can make an image unfocused or unclear. Blur can be controlled by blur property.
      *
-     * {% codeBlock src='image-editor/finetuneSettings/index.md' %}{% endcodeBlock %}
-     *
      */
     finetuneSettings: FinetuneSettingsModel;
     /**
      * Specifies the zoom settings to perform zooming action.
      * A 'ZoomSettingsModel' value that specifies the the zoom related options which are enabled in image editor control. The default value is null.
      *
+     * {% codeBlock src='image-editor/zoomSettings/index.md' %}{% endcodeBlock %}
+     *
      * @remarks
      * If the property is not specified, then the default settings will be applied for all the properties available in zoom settings.
      *
@@ -540,10 +505,22 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * - zoomTrigger: Specifies the types of zooming to be supported in the image editor.
      * - zoomPoint: Specifies the x and y coordinates in which the zooming performed on initial load.
      *
-     * {% codeBlock src='image-editor/zoomSettings/index.md' %}{% endcodeBlock %}
-     *
      */
     zoomSettings: ZoomSettingsModel;
+    /**
+     * Specifies the selection settings to customize selection.
+     * A 'SelectionSettingsModel' value that specifies the the customization related options which are enabled in image editor control. The default value is null.
+     *
+     * @remarks
+     * If the property is not specified, then the default settings will be applied for all the properties available in selection settings.
+     *
+     * The following options are available in `selectionSettings`.
+     * - showCircle: Specifies whether to show / hide circles on selection.
+     * - strokeColor: Specifies the stroke color of circle selection.
+     * - fillColor: Specifies the fill color of circle selection.
+     *
+     */
+    selectionSettings: SelectionSettingsModel;
     /**
      * Event callback that is raised before an image is saved.
      *
@@ -598,6 +575,12 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @event shapeChanging
      */
     shapeChanging: EmitType<ShapeChangeEventArgs>;
+    /**
+     * Event callback that is raised while changing selection in an Image Editor.
+     *
+     * @event selectionChanging
+     */
+    selectionChanging: EmitType<SelectionChangeEventArgs>;
     /**
      * Event callback that is raised once an image is opened in an Image Editor.
      *
@@ -619,10 +602,10 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     /**
      * Event callback that is raised while updating/refreshing the toolbar
      *
-     * @event toolbarUpdating
-     *
      * {% codeBlock src='image-editor/toolbarUpdating/index.md' %}{% endcodeBlock %}
      *
+     * @event toolbarUpdating
+     *
      */
     toolbarUpdating: EmitType<ToolbarEventArgs>;
     /**
@@ -650,10 +633,9 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      */
     click: EmitType<ImageEditorClickEventArgs>;
     /**
-     * Event callback that is triggered when the quick access toolbar is opening.
+     * Event callback that is raised when opening the quick access toolbar.
      *
-     * @event quickAccessToolbarOpening
-     * @private
+     * @event quickAccessToolbarOpen
      *
      * @remarks
      * Use this event to customize the toolbar items that appear in the quick access toolbar.
@@ -662,10 +644,29 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * The string values representing the names of the built-in toolbar items to display.
      * The ItemModel values representing the ItemModel of custom toolbar items to display.
      *
-     * {% codeBlock src='image-editor/quickAccessToolbarOpening/index.md' %}{% endcodeBlock %}
+     * ```html
+     * <div id='imageeditor'></div>
+     * ```
+     * ```typescript
+     * <script>
+     * var imageObj = new ImageEditor({
+     *     showQuickAccessToolbar : true,
+     *     quickAccessToolbarOpen: (args: QuickAccessToolbarEventArgs)=> {
+     *         args.toolbarItems = [“Delete”, {text: “custom”}];
+     *     }
      *
+     * });
+     * imageObj.appendTo("#imageeditor");
+     * </script>
      */
-    quickAccessToolbarOpening: EmitType<QuickAccessToolbarEventArgs>;
+    quickAccessToolbarOpen: EmitType<QuickAccessToolbarEventArgs>;
+    /**
+     * Event callback that is raised once the quick access toolbar item is clicked.
+     *
+     * @event quickAccessToolbarItemClick
+     *
+     */
+    quickAccessToolbarItemClick: EmitType<ClickEventArgs>;
     /**
      *
      * Constructor for creating the widget
@@ -674,6 +675,13 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @param  {string|HTMLDivElement} element - Specifies the target element
      */
     constructor(options?: ImageEditorModel, element?: string | HTMLDivElement);
+    /**
+     * To provide the array of modules needed for component rendering.
+     *
+     * @returns {ModuleDeclaration[]} - To provide the array of modules needed for component rendering.
+     * @hidden
+     */
+    requiredModules(): ModuleDeclaration[];
     protected preRender(): void;
     /**
      *
@@ -702,17 +710,14 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      *
      * Called internally if any of the property value changed.
      *
-     * @param  {ImageEditorModel} newProperties - Specifies new properties
-     * @param  {ImageEditorModel} oldProperties - Specifies old properties
+     * @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;
-    private getDefaultFilter;
-    private updateFinetunes;
-    private initializeFilter;
     /**
      *
      * This Method will add events to component (element, event, method, current reference)
@@ -727,363 +732,22 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @returns {void}.
      */
     private unwireEvent;
-    private destroySubComponents;
-    private updateTheme;
-    private toPascalCase;
     private createCanvas;
-    private createToolbar;
-    private createQuickAccessToolbar;
-    private createContextualToolbar;
-    private updateContextualToolbar;
-    private createBottomToolbar;
-    private initBottomToolbar;
-    private toolbarTemplateFn;
-    private quickAccessToolbarTemplateFn;
-    private templateParser;
-    private getLeftToolbarItem;
-    private getRightToolbarItem;
-    private getMainToolbarItem;
-    private getZoomToolbarItem;
-    private processToolbar;
-    private processSubToolbar;
-    private wireZoomBtnEvents;
-    private isToolbar;
-    private initToolbarItem;
-    private enableDisableToolbarBtn;
-    private createLeftToolbarControls;
-    private cropSelectedState;
-    private renderAnnotationBtn;
-    private renderCropBtn;
-    private renderTransformBtn;
-    private renderSaveBtn;
-    private cropSelect;
-    private transformSelect;
-    private resetZoom;
-    private performTransformation;
-    private updateTransform;
-    private getShapesToolbarItem;
-    private initShapesToolbarItem;
-    private createShapeColor;
-    private createShapeBtn;
-    private getTextToolbarItem;
-    private getFontFamilyItems;
-    private getFontSizeItems;
-    private initTextToolbarItem;
-    private createTextColor;
-    private pushActItemIntoObj;
-    private createTextBtn;
-    private getFontSizes;
-    private getTextAreaWidth;
-    private updateUndoRedoObj;
-    private updateObjColl;
-    private applyFontStyle;
-    private initZoomToolbarItem;
-    private refreshUndoRedoColl;
-    private applyPreviewFilter;
-    private contextualToolbarClicked;
-    private zoomInBtnClickHandler;
-    private zoomOutBtnClickHandler;
-    private zoomInBtnMouseDownHandler;
-    private zoomOutBtnMouseDownHandler;
-    private zoomBtnMouseUpHandler;
-    private defToolbarClicked;
-    private performCancel;
-    private applyShape;
-    private applyFreehandDraw;
-    private cancelFreehandDraw;
-    private openSlider;
-    private setTempFilterProperties;
-    private okBtn;
-    private getZeroZoomPointCollValue;
-    private getZeroZoomObjValue;
-    private updateCurrentUndoRedoColl;
-    private updateBrightnessFilter;
-    private isFreehandDrawIndex;
-    private deleteFreehandDraw;
-    private unselectBtn;
-    private callUndo;
-    private callRedo;
-    private refreshSlider;
-    private iterateObjColl;
-    private updateAdjustment;
-    private autoEnablePan;
-    private setTempFilterValue;
-    private getDefaultCurrentFilter;
-    private renderSlider;
-    private createSlider;
-    private getCurrAdjustmentValue;
-    private getFinetuneOption;
-    private setCurrAdjustmentValue;
-    private cancelPan;
-    private callMainToolbar;
-    private setCurrSelectionPoints;
-    private updatePannedRegion;
-    private updateObjAndFreeHandDrawColl;
-    private cancelItems;
-    private freehandDownHandler;
-    private freehandUpHandler;
-    private freehandMoveHandler;
-    private processPoint;
-    private calcCurveControlPoints;
-    private point;
-    private startDraw;
-    private pointVelocity;
-    private distanceTo;
-    private drawCurve;
-    private bezierLength;
-    private bezierPoint;
-    private drawArc;
-    private freehandRedraw;
-    private redrawImgWithObj;
-    private refreshToolbar;
-    private getAdjustmentToolbarItem;
-    private getFilterToolbarItem;
-    private getPenToolbarItem;
-    private initPenToolbarItem;
-    private createPenColor;
-    private createPenBtn;
-    private updateFreehandDrawColorChange;
-    private setPenStroke;
-    private getPenStroke;
-    private initAdjustmentToolbarItem;
-    private initFilterToolbarItem;
-    private getCurrentCanvasData;
-    private createCanvasFilter;
-    private callUpdateCurrentTransformedState;
-    private updateCurrentTransformedState;
-    private reverseTransformedState;
-    private currentTransformedState;
-    private iterateRotateFlipColl;
-    private setTransform;
-    private isObjInsideCropRegion;
-    private panFreehandDrawColl;
-    private panObjColl;
-    private cropObjColl;
-    private cropFreehandDrawColl;
-    private hoverFreehandraw;
-    private pointsHorizontalFlip;
-    private pointsVerticalFlip;
-    private flipFreehandrawColl;
-    private rotateFreehandDrawColl;
-    private updateCursorPointsForFreehandDrawing;
-    private zoomFreehandDrawColl;
-    private zoomX;
-    private zoomY;
-    private zoomObjColl;
-    private calcRatio;
-    private drawCustomSelection;
-    private clearOuterCanvas;
-    private cropCircle;
-    private updateCropObj;
-    private setCurrentObj;
-    private drawCropSelectionImage;
-    private cropImg;
-    private updateImageRatioForActObj;
-    private drawImgToCanvas;
-    private limitPan;
-    private updatePanPoints;
-    private setCurrentPanRegion;
-    private getCurrentPanRegion;
-    private drawPannImage;
-    private drawPannedImage;
-    private updateFlipPan;
-    private updateFlipActiveObj;
-    private resetPanPoints;
-    private flipCrop;
-    private rotateCrop;
-    private getCurrentCropState;
-    private isInitialRotate;
-    private updateRotatePanPoints;
-    private rotatePan;
-    private rotateZoom;
-    private drawZoomImgToCanvas;
-    private cropZoom;
-    private updateCanvas;
-    private imageOnLoad;
-    private refreshActiveObj;
-    private redrawText;
-    private setTextSelection;
-    private getCurrentObj;
-    private updateUndoRedoColl;
-    private fileSelect;
-    private findTextPoint;
-    private getStrokeWidth;
-    private updateToolbarItems;
-    private setTimer;
-    private targetTouches;
-    private calculateScale;
-    private getDistance;
-    private setXYPoints;
     private touchStartHandler;
-    private getCurrentIndex;
-    private isShapeClick;
-    private isShapeTouch;
-    private isFreehandDrawTouch;
-    private selectFreehandDraw;
-    private closeContextualToolbar;
-    private applyObj;
-    private applyCurrShape;
     private mouseDownEventHandler;
     private mouseMoveEventHandler;
     private mouseUpEventHandler;
-    private getSquarePointForFreehandDraw;
-    private getQuickAccessToolbarItem;
-    private renderQuickAccessToolbar;
-    private deleteItem;
     private keyDownEventHandler;
     private keyUpEventHandler;
     private canvasMouseDownHandler;
     private canvasMouseMoveHandler;
     private canvasMouseUpHandler;
     private handleScroll;
-    private performPointZoom;
-    private adjustPanning;
-    private drawZoomPanImage;
-    private textKeyDown;
     private adjustToScreen;
     private screenOrientation;
     private windowResizeHandler;
-    private alignTextAreaIntoCanvas;
-    private refreshMainToolbar;
-    private updatePreviousShapeSettings;
-    private zoomAction;
-    private getCurrentZoomFactor;
-    private disableZoomOutBtn;
-    private setZoomDimension;
-    private applyCurrActObj;
-    private updateTextFromTextArea;
-    private setTextBoxStylesToActObj;
-    private redrawActObj;
-    private setTextBoxPos;
-    private setTextBoxPoints;
-    private findTextTarget;
-    private renderTextArea;
-    private selectedText;
-    private setTextBoxHeight;
-    private setTextBoxWidth;
-    private setActivePoint;
-    private setDragWidth;
-    private setDragHeight;
-    private triggerShapeChange;
-    private updateActivePoint;
-    private updateArrowDirection;
-    private preventDraggingInvertly;
-    private preventTextDraggingInvertly;
-    private updateNWPoints;
-    private updateNPoints;
-    private updateNEPoints;
-    private updateWPoints;
-    private updateEPoints;
-    private updateSWPoints;
-    private updateSPoints;
-    private updateSEPoints;
-    private updateFontRatio;
-    private updateFontSize;
-    private preventInverseResize;
-    private getScaleRatio;
-    private getMaxText;
-    private setDragLimit;
-    private lineDraw;
-    private shapeCircle;
-    private drawOuterSelection;
-    private drawObject;
-    private updateActiveObject;
-    private drawShapeObj;
-    private shapeLine;
-    private shapeArrow;
-    private shapeText;
-    private updateActPoint;
-    private drawSquareLines;
-    private drawSelection;
-    private drawCenterCircles;
-    private findTarget;
-    private findTargetObj;
-    private getCurrentFlipState;
-    private rotateDegree;
-    private updateCursorStyles;
-    private updateCursorStylesForArrow;
-    private drawCropRatio;
-    private setDragDirection;
-    private updatePoints;
-    private calcShapeRatio;
-    private getScale;
-    private calcMaxDimension;
-    private setMaximumDimension;
-    private setCursor;
-    private setCursorForFreehandDrawing;
-    private setCursorFromObj;
-    private isInside;
-    private refreshDropDownBtn;
-    private downloadImg;
-    private toSVGImg;
-    private toBlobFn;
-    private exportChangesToCanvas;
-    private exportTransformedImage;
-    private exportRotate;
-    private exportHorizontalFlip;
-    private exportVerticalFlip;
-    private updateSaveContext;
-    private addLetter;
-    private updateFontStyles;
-    private textFlipDegree;
-    private rotateText;
-    private redrawObj;
-    private updateCurrentActiveObjPoint;
-    private rotateObjColl;
-    private redrawShape;
-    private applyActObj;
-    private destroyQuickAccessToolbar;
-    private apply;
-    private setCenterPoints;
-    private updateTriangleRatio;
-    private updateTrianglePoints;
-    private setDimension;
-    private updateUndoRedo;
-    private drawShape;
-    private drawShapeText;
-    private updateShapeChangeEventArgs;
-    private getObjDetails;
-    private getFreehandDrawDetails;
-    private isPointsInRange;
-    private clearActObj;
-    private applyPenDraw;
-    private drawRotatedImage;
-    private updateCurrSelectionPoint;
-    private setClientTransformedDimension;
-    private popForDefaultTransformedState;
-    private popForDefaultFlipState;
-    private popForDefaultRotateState;
-    private alignRotateFlipColl;
-    private updateFlipColl;
-    private horizontalFlip;
-    private verticalFlip;
-    private updateFlipState;
-    private setDestinationPoints;
-    private rotatedFlip;
-    private getFilterValue;
-    private setFilterValue;
-    private getSaturationFilterValue;
-    private setSaturationFilterValue;
-    private getBlackAndWhiteData;
-    private setBrightness;
-    private setContrast;
-    private setHue;
-    private setSaturation;
-    private setOpacity;
-    private setBlur;
-    private setExposure;
-    private setFilter;
-    private renderImage;
-    private updateTextBox;
-    private drawNewSelection;
-    private setDestPointsForFlipState;
-    private performUndoDefaultAction;
-    private setAdjustment;
-    private updateFilter;
-    private rotateImage;
-    private flipImage;
-    private componentToHex;
-    private rgbToHex;
+    private notifyResetForAllModules;
+    private allowShape;
     /**
      * Clears the current selection performed in the image editor.
      *
@@ -1093,18 +757,20 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     /**
      * Crops an image based on the selection done in the image editor.
      *
+     * {% codeBlock src='image-editor/crop/index.md' %}{% endcodeBlock %}
+     *
      * @remarks
      * The selection can be done through programmatically using the 'select' method or through UI interactions.
      *
      * @returns {boolean}.
      *
-     * {% codeBlock src='image-editor/crop/index.md' %}{% endcodeBlock %}
-     *
      */
     crop(): boolean;
     /**
      * Flips an image by horizontally or vertically in the image editor.
      *
+     * {% codeBlock src='image-editor/zoom/index.md' %}{% endcodeBlock %}
+     *
      * @param { Direction } direction - Specifies the direction to flip the image.
      * A horizontal direction for horizontal flipping and vertical direction for vertical flipping.
      *
@@ -1113,8 +779,6 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      *
      * @returns {void}.
      *
-     * {% codeBlock src='image-editor/zoom/index.md' %}{% endcodeBlock %}
-     *
      */
     flip(direction: Direction): void;
     /**
@@ -1150,6 +814,8 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     /**
      * Rotate an image to clockwise and anti-clockwise.
      *
+     * {% codeBlock src='image-editor/rotate/index.md' %}{% endcodeBlock %}
+     *
      * @param {number} degree - Specifies a degree to rotate an image.
      * A positive integer value for clockwise and negative integer value for anti-clockwise rotation.
      *
@@ -1158,8 +824,6 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      *
      * @returns {boolean}.
      *
-     * {% codeBlock src='image-editor/rotate/index.md' %}{% endcodeBlock %}
-     *
      */
     rotate(degree: number): boolean;
     /**
@@ -1177,6 +841,8 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     /**
      * Perform selection in an image editor. The selection helps to crop an image.
      *
+     * {% codeBlock src='image-editor/select/index.md' %}{% endcodeBlock %}
+     *
      * @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.
@@ -1188,11 +854,8 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      *
      * @returns {void}.
      *
-     * {% codeBlock src='image-editor/select/index.md' %}{% endcodeBlock %}
-     *
      */
     select(type: string, startX?: number, startY?: number, width?: number, height?: number): void;
-    private updateSelectionInsert;
     /**
      * Enable or disable a freehand drawing option in an Image Editor.
      *
@@ -1240,6 +903,8 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     /**
      * Draw ellipse on an image.
      *
+     * {% codeBlock src='image-editor/ellipse/index.md' %}{% endcodeBlock %}
+     *
      * @param {number} x - Specifies x-coordinate of ellipse.
      * @param {number} y - Specifies y-coordinate of ellipse.
      * @param {number} radiusX - Specifies the radius x point for the ellipse.
@@ -1249,8 +914,6 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @param {string} fillColor - Specifies the fill color of the ellipse.
      * @returns {boolean}.
      *
-     * {% codeBlock src='image-editor/ellipse/index.md' %}{% endcodeBlock %}
-     *
      */
     drawEllipse(x?: number, y?: number, radiusX?: number, radiusY?: number, strokeWidth?: number, strokeColor?: string, fillColor?: string): boolean;
     /**
@@ -1274,10 +937,22 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @param {number} endY - Specifies end point y-coordinates of the arrow.
      * @param {number} strokeWidth - Specifies the stroke width of arrow.
      * @param {string} strokeColor - Specifies the stroke color of arrow.
+     * @param {ArrowheadType} arrowStart – Specifies the type of arrowhead for start position. The default value is ‘None’.
+     * @param {ArrowheadType} arrowEnd – Specifies the type of arrowhead for end position. The default value is ‘SolidArrow’.
+
      * @returns {boolean}.
      * @private
      */
-    drawArrow(startX?: number, startY?: number, endX?: number, endY?: number, strokeWidth?: number, strokeColor?: string): boolean;
+    drawArrow(startX?: number, startY?: number, endX?: number, endY?: number, strokeWidth?: number, strokeColor?: string, arrowStart?: ArrowheadType, arrowEnd?: ArrowheadType): boolean;
+    /**
+     * Draw path on an image.
+     *
+     * @param {Point[]} pointColl – Specifies collection of start and end x, y-coordinates of path.
+     * @param {number} strokeWidth - Specifies the stroke width of path.
+     * @param {string} strokeColor - Specifies the stroke color of path.
+     * @returns {boolean}.
+     */
+    drawPath(pointColl: Point[], strokeWidth?: number, strokeColor?: string): boolean;
     /**
      * Draw a rectangle on an image.
      *
@@ -1294,6 +969,8 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     /**
      * Draw a text on an image.
      *
+     * {% codeBlock src='image-editor/text/index.md' %}{% endcodeBlock %}
+     *
      * @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.
@@ -1304,40 +981,38 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @param {string} color - Specifies font color of the text.
      * @returns {boolean}.
      *
-     * {% codeBlock src='image-editor/text/index.md' %}{% endcodeBlock %}
-     *
      */
     drawText(x?: number, y?: number, text?: string, fontFamily?: string, fontSize?: number, bold?: boolean, italic?: boolean, color?: string): 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.
      *
+     * {% codeBlock src='image-editor/selectShape/index.md' %}{% endcodeBlock %}
+     *
      * @param {string} id - Specifies the shape id to select a shape on an image.
      * @returns {boolean}.
      *
-     * {% codeBlock src='image-editor/selectShape/index.md' %}{% endcodeBlock %}
-     *
      */
     selectShape(id: string): boolean;
     /**
      * Deletes a shape based on the given shape id.
      * Use 'getShapeSettings' method to get the shape id which is then passed to perform selection.
      *
+     * {% codeBlock src='image-editor/deleteShape/index.md' %}{% endcodeBlock %}
+     *
      * @param {string} id - Specifies the shape id to delete the shape on an image.
      * @returns {void}.
      *
-     * {% codeBlock src='image-editor/deleteShape/index.md' %}{% endcodeBlock %}
-     *
      */
     deleteShape(id: string): void;
     /**
      * Get particular shapes details based on id of the shape which is drawn on an image editor.
      *
+     * {% codeBlock src='image-editor/getShapeSetting/index.md' %}{% endcodeBlock %}
+     *
      * @param {string} id - Specifies the shape id on an image.
      * @returns {ShapeSettings}.
      *
-     * {% codeBlock src='image-editor/getShapeSetting/index.md' %}{% endcodeBlock %}
-     *
      */
     getShapeSetting(id: string): ShapeSettings;
     /**
@@ -1400,599 +1075,241 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * A Dimension object containing the x, y, width, and height of an image.
      */
     getImageDimension(): Dimension;
-}
-/**
- * An enum representing the file types supported by the image editor.
- *
- * @enum {string}
- */
-export declare enum FileType {
-    /** The PNG file type. */
-    Png = "Png",
-    /** The JPEG file type. */
-    Jpeg = "Jpeg",
-    /** The SVG file type. */
-    Svg = "Svg"
-}
-/**
- * An enumeration representing the direction of an image editor operation.
- *
- * @enum {string}
- */
-export declare enum Direction {
-    /** The horizontal direction. */
-    Horizontal = "Horizontal",
-    /** The vertical direction. */
-    Vertical = "Vertical"
-}
-/**
- * An enumeration representing the type of shape to be added in the image editor.
- *
- * @enum {string}
- */
-export declare enum ShapeType {
-    /** A rectangle shape. */
-    Rectangle = "Rectangle",
-    /** An ellipse shape. */
-    Ellipse = "Ellipse",
-    /** A line shape. */
-    Line = "Line",
-    /** An arrow shape. */
-    Arrow = "Arrow",
-    /** A text shape. */
-    Text = "Text",
-    /** A freehand drawing shape. */
-    FreehandDraw = "FreehandDraw"
-}
-/**
- * An enumeration representing the different ways to trigger zooming in the image editor.
- *
- * @aspNumberEnum
- */
-export declare enum ZoomTrigger {
-    /** Zooming triggered by mouse wheel. */
-    MouseWheel = 1,
-    /** Zooming triggered by pinch gesture. */
-    Pinch = 2,
-    /** Zooming triggered by command keys. */
-    Commands = 4,
-    /** Zooming triggered by toolbar button click. */
-    Toolbar = 8
-}
-/**
- * An enum representing the available themes in the image editor.
- */
-export declare enum Theme {
-    /** The Bootstrap 5 theme. */
-    Bootstrap5 = "Bootstrap5",
-    /** The dark variant of the Bootstrap 5 theme. */
-    Bootstrap5Dark = "Bootstrap5Dark",
-    /** The Tailwind CSS theme. */
-    Tailwind = "Tailwind",
-    /** The dark variant of the Tailwind CSS theme. */
-    TailwindDark = "TailwindDark",
-    /** The Fluent UI theme. */
-    Fluent = "Fluent",
-    /** The dark variant of the Fluent UI theme. */
-    FluentDark = "FluentDark",
-    /** The Bootstrap 4 theme. */
-    Bootstrap4 = "Bootstrap4",
-    /** The Bootstrap theme. */
-    Bootstrap = "Bootstrap",
-    /** The dark variant of the Bootstrap theme. */
-    BootstrapDark = "BootstrapDark",
-    /** The Material Design theme. */
-    Material = "Material",
-    /** The dark variant of the Material Design theme. */
-    MaterialDark = "MaterialDark",
-    /** The Fabric theme. */
-    Fabric = "Fabric",
-    /** The dark variant of the Fabric theme. */
-    FabricDark = "FabricDark",
-    /** The high contrast theme. */
-    Highcontrast = "Highcontrast"
-}
-/**
- * An enum representing the available toolbar commands in the image editor.
- */
-export declare enum ImageEditorCommand {
-    Crop = "Crop",
-    Transform = "Transform",
-    Annotate = "Annotate",
-    ZoomIn = "ZoomIn",
-    ZoomOut = "ZoomOut",
-    Open = "Open",
-    Reset = "Reset",
-    Save = "Save",
-    Pan = "Pan",
-    Move = "Move",
-    Pen = "Pen",
-    Line = "Line",
-    Arrow = "Arrow",
-    Rectangle = "Rectangle",
-    Ellipse = "Ellipse",
-    Text = "Text",
-    CustomSelection = "CustomSelection",
-    CircleSelection = "CircleSelection",
-    SquareSelection = "SquareSelection",
-    RatioSelection = "RatioSelection",
-    RotateLeft = "RotateLeft",
-    RotateRight = "RotateRight",
-    FlipHorizontal = "FlipHorizontal",
-    FlipVertical = "FlipVertical"
-}
-/**
- * An enumeration of available image filter options.
- *
- * @remarks
- * These options can be used with the `applyImageFilter` method of the image editor control to apply filters to an image.
- */
-export declare enum ImageFilterOption {
-    /** Default filter */
-    Default = "Default",
-    /** Chrome filter */
-    Chrome = "Chrome",
-    /** Cold filter */
-    Cold = "Cold",
-    /** Warm filter */
-    Warm = "Warm",
-    /** Grayscale filter */
-    Grayscale = "Grayscale",
-    /** Sepia filter */
-    Sepia = "Sepia",
-    /** Invert filter */
-    Invert = "Invert"
-}
-/**
- * An enumeration of available image finetune options.
- *
- * @remarks
- * These options can be used with the `finetuneImage` method of the image editor control to apply finetuning to an image.
- */
-export declare enum ImageFinetuneOption {
-    /** Adjust the brightness of the image */
-    Brightness = "Brightness",
-    /** Adjust the contrast of the image */
-    Contrast = "Contrast",
-    /** Adjust the hue of the image */
-    Hue = "Hue",
-    /** Adjust the saturation of the image */
-    Saturation = "Saturation",
-    /** Adjust the exposure of the image */
-    Exposure = "Exposure",
-    /** Adjust the opacity of the image */
-    Opacity = "Opacity",
-    /** Adjust the blur of the image */
-    Blur = "Blur"
-}
-/**
- * The Interface which contains the properties for zoom transition occur in the Image Editor.
- */
-export interface ZoomEventArgs {
+    private toolbarTemplateFn;
+    private quickAccessToolbarTemplateFn;
+    private templateParser;
+    private getTextFromId;
+    private getFinetuneOption;
+    private setPenStroke;
+    private updateFreehandDrawColorChange;
+    private setInitialZoomState;
+    private moveToSelectionRange;
+    private isSelectionBiggerThanCanvas;
+    private isSelectionOutsideCanvas;
     /**
-     * Returns the point in which the zooming action was performed.
-     *
-     * @remarks
-     * The given value is a point object which has x and y coordinates.
+     * Set the old item Transform item state.
      *
+     * @hidden
+     * @returns {void}.
      */
-    zoomPoint: Point;
+    updateCropTransformItems(): void;
     /**
-     * Returns the previous zoom factor that already had before this current zooming action.
-     *
-     * @remarks
-     * The previous and current zoom factor is used for finding whether the performed zooming is a zoom in or zoom out.
+     * Get the pascal case.
      *
+     * @param { string } str - Specifies the string to convert to pascal case.
+     * @param { Object } obj - Specifies the string to convert to pascal case.
+     * @hidden
+     * @returns {string}.
+     * A pascal case string.
      */
-    previousZoomFactor: number;
+    toPascalCase(str: string, obj?: Object): string;
     /**
-     * Returns the current zoomed level, in which the loaded image is enlarged in the image editor.
-     *
-     * @remarks
-     * The previous and current zoom factor is used for finding whether the performed zooming is a zoom in or zoom out.
+     * Get the font sizes.
      *
+     * @hidden
+     * @returns {DropDownButtonItemModel[]}.
+     * A font size collections.
      */
-    currentZoomFactor: number;
+    getFontSizes(): DropDownButtonItemModel[];
     /**
-     * Specifies a value that indicates whether the zooming action can be canceled in image editor.
-     */
-    cancel: boolean;
-    /**
-     * Returns the type of zooming performed in the image editor.
+     * Handles the OK button operation
      *
-     * @remarks
-     * This property is used to get the type of zooming performed in the editor.
-     * The possible values of this property are 'MouseWheel', 'Pinch', 'Commands', and 'Toolbar'.
-     * The value of this property will be updated each time a zoom operation is performed.
-     * MouseWheel - It indicates the zooming performed using mouse wheel.
-     * Pinch - It indicates that zooming is performed using pinch gestures on touch-enabled devices.
-     * Commands - It indicates that zooming is performed by clicking the CTRL key and either the plus (+) or minus (-) buttons on the keyboard.
-     * Toolbar - It indicates that zooming is performed using toolbar buttons.
-     * By default, this property is set to 'Toolbar'.
-     *
-     *
-     */
-    zoomTrigger: string;
-}
-/**
- * The Interface which contains the properties for pan transition occur in the Image Editor.
- */
-export interface PanEventArgs {
-    /**
-     * Returns the (x, y) point of panning started
-     */
-    startPoint: Point;
-    /**
-     * Returns the (x, y) point to be panning ended.
-     */
-    endPoint: Point;
-    /**
-     * Defines whether to cancel the panning action of image editor.
+     * @param { boolean } isMouseDown - Specifies whether it is a mouse down.
+     * @hidden
+     * @returns {void}.
      */
-    cancel: boolean;
-}
-/**
- * The Interface which contains the properties for crop transition occur in the Image Editor.
- */
-export interface CropEventArgs {
+    okBtn(isMouseDown?: boolean): void;
     /**
-     * Returns the start point of the crop region.
-     *
-     * @remarks
-     * The start and end point is used get the cropping region in a image editor.
+     * Set the temporary filter properties.
      *
+     * @hidden
+     * @returns {void}.
      */
-    startPoint: Point;
+    setTempFilterProperties(): void;
     /**
-     * Returns the end point of the crop region.
-     *
-     * @remarks
-     * The start and end point is used get the cropping region in a image editor.
+     * To crop the selection.
      *
+     * @hidden
+     * @returns {void}.
      */
-    endPoint: Point;
-    /**
-     * Defines whether to cancel the cropping action of image editor.
-     */
-    cancel: boolean;
-}
-/**
- * The Interface which contains the properties for rotate transition in the Image Editor.
- */
-export interface RotateEventArgs {
-    /**
-     * Returns the degree to be rotated.
-     */
-    degree: number;
-    /**
-     * Defines whether to cancel the rotating action of image editor.
-     */
-    cancel: boolean;
-}
-/**
- * The Interface which contains the properties for flip transition in the Image Editor.
- */
-export interface FlipEventArgs {
-    /**
-     * Returns the direction(Horizontal and vertical) to be flipped.
-     */
-    direction: string;
-    /**
-     * Defines the cancel option to cancel the flip action.
-     */
-    cancel: boolean;
-}
-/**
- * The Interface which contains the properties for shape change in Image Editor.
- */
-export interface ShapeChangeEventArgs {
-    /**
-     * Returns the name of the action.
-     */
-    action?: string;
-    /**
-     * Returns the object of shape before moved, resized, or customized the UI.
-     */
-    previousShapeSettings?: ShapeSettings;
-    /**
-     * Returns `the object of shape which is inserted or moved or deleted or resized or customized the UI.
-     */
-    currentShapeSettings?: ShapeSettings;
-}
-/**
- * The Interface which contains the properties for Toolbar events.
- */
-export interface ToolbarEventArgs {
-    /**
-     * Defines whether the to cancel the toolbar updating/refreshing action in the image editor.
-     */
-    cancel?: boolean;
-    /**
-     * Returns the current toolbar type.
-     */
-    toolbarType?: string;
-    /**
-     * Returns the current toolbar item.
-     */
-    item?: ItemModel;
+    cropSelectedState(): void;
     /**
-     * Specifies the toolbar item collection to be rendered as contextual toolbar.
+     * Get the current canvas data.
      *
-     * @remarks
-     * This property collection contains string and ItemModel values.
-     * The string values representing the names of the built-in toolbar items to be displayed.
-     * The ItemModel values representing the object of custom toolbar items to be displayed.
-     *
-     */
-    toolbarItems?: (string | ItemModel)[];
-}
-/**
- * The Interface which contains the properties for opening the image.
- */
-export interface OpenEventArgs {
-    /**
-     * Returns the file name of an image.
-     */
-    fileName: string;
-    /**
-     * Returns the file type of an image.
-     */
-    fileType: FileType;
-}
-/**
- * The Interface which contains the properties for saving the canvas as image.
- */
-export interface SaveEventArgs {
-    /**
-     * Returns the file name of an image.
-     */
-    fileName: string;
-    /**
-     * Returns the file type of an image.
-     */
-    fileType: FileType;
-}
-/**
- * The Interface which contains the properties for before saving the canvas as image.
- */
-export interface BeforeSaveEventArgs {
-    /**
-     * Defines whether the to cancel the saving action in the image editor.
-     */
-    cancel: boolean;
-    /**
-     * Specifies the file name for an image.
-     */
-    fileName: string;
-    /**
-     * Returns the file type for an image.
-     */
-    fileType: FileType;
-}
-/**
- * The Interface which contains the properties 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.
+     * @hidden
+     * @returns {ImageData}.
+     * An ImageData returns the current canvas image data object.
      */
-    y: number;
+    getCurrentCanvasData(): ImageData;
     /**
-     * Returns the x ratio from in the image.
+     * To set current adjustment value
      *
-     * @private
+     * @param { string } type - Specifies the type of adjustment.
+     * @param { number } value - Specifies the value to adjust.
+     * @hidden
+     * @returns {void}.
      */
-    ratioX?: number;
+    setCurrAdjustmentValue(type: string, value: number): void;
     /**
-     * Returns y ratio from the image.
+     * Get the square point for rotated shape.
      *
-     * @private
+     * @param { SelectionPoint } obj - Specifies the selection point.
+     * @param { Object } object - Specifies the object.
+     * @hidden
+     * @returns {ActivePoint}.
+     * An ActivePoint object which returns the square point.
      */
-    ratioY?: number;
+    getSquarePointForRotatedShape(obj: SelectionPoint, object?: Object): ActivePoint;
     /**
-     * Specifies the time.
+     * Get the square point for path.
      *
-     * @private
+     * @param { SelectionPoint } obj - Specifies the points of path.
+     * @hidden
+     * @returns {ActivePoint}.
+     * An ActivePoint object which returns the square point.
      */
-    time?: number;
-}
-/**
- * Interface for ShapeSettings in the Image Editor.
- */
-export interface ShapeSettings {
+    getSquarePointForPath(obj: SelectionPoint): ActivePoint;
     /**
-     * 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 or arrow 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;
-    /**
-     * Returns the points collection of freehand drawing.
-     */
-    points?: Point[];
-}
-/**
- * Interface for filter option for the image.
- */
-export interface ImageFilterEventArgs {
-    /**
-     * Specifies the when applying filter to an image.
-     */
-    filter: ImageFilterOption;
-    /**
-     * Defines the cancel option to cancel the filter action.
-     */
-    cancel: boolean;
-}
-/**
- * Interface for fine tunes option for the image.
- */
-export interface FinetuneEventArgs {
-    /**
-     * Specifies the type of fine tunes.
+     * Get the SelectionType.
+     *
+     * @param { string } type - Specifies the SelectionType.
+     * @hidden
+     * @returns {string}.
+     * An string which returns the SelectionType.
      */
-    finetune: ImageFinetuneOption;
-    /**
-     * Specifies the value of the fine tunes.
+    getSelectionType(type: string): string;
+    /** Clears the context.
+     *
+     * @param { CanvasRenderingContext2D } ctx - Specifies the canvas context.
+     * @hidden
+     * @returns {void}.
      */
-    value: number;
+    clearContext(ctx: CanvasRenderingContext2D): void;
     /**
-     * Defines the cancel option to cancel the fine tunes action.
-     */
-    cancel: boolean;
-}
-/**
- * Interface that provides information to the click event in the Image Editor.
- */
-export interface ImageEditorClickEventArgs {
-    /**
-     * Returns the x and y coordinates of the mouse or touch action which performed in the Image Editor.
+     * Apply Arrow for start and end.
+     *
+     * @param { string } type - Specifies the start arrow or end arrow.
+     * @param { string } id - Specifies the start arrow or end arrow item id.
+     * @hidden
+     * @returns {void}.
      */
-    point: Point;
-}
-/**
- * Interface for quick access toolbar for the image.
- *
- * @private
- */
-export interface QuickAccessToolbarEventArgs {
+    updateArrow(type: string, id: string): void;
     /**
-     * Specifies whether to cancel the opening action of the quick access toolbar.
-     *
-     * @remarks
-     * Set this property to `true` to cancel the opening action of the quick access toolbar.
-     * By default, this property is set to `false`.
+     * Apply Font style for text.
      *
+     * @param { string } id - Specifies the selected item id.
+     * @hidden
+     * @returns {void}.
      */
-    cancel: boolean;
+    updateFontFamily(id: string): void;
     /**
-     * Specifies the collection of toolbar items to be rendered as a quick access toolbar.
-     *
-     * @remarks
-     * This property collection contains string and ItemModel values.
-     * The string values representing the names of the built-in toolbar items to display.
-     * The ItemModel values representing the object of custom toolbar items to display.
+     * Apply Font size for text.
      *
+     * @param { string } text - Specifies the selected item text.
+     * @hidden
+     * @returns {void}.
      */
-    toolbarItems: (string | ItemModel)[];
+    updateFontSize(text: string): void;
     /**
-     * Returns the current toolbar type.
+     * Apply Font color for text.
+     *
+     * @param { string } value - Specifies the selected color item value.
+     * @hidden
+     * @returns {void}.
      */
-    toolbarType?: string;
-}
-/**
- * Interface for Dimension calculation in the imageEditor.
- *
- */
-export interface Dimension {
+    updateFontColor(value: string): void;
     /**
-     * Gets x position from the canvas.
+     * Apply Pen stroke width.
+     *
+     * @param { string } id - Specifies the selected item id.
+     * @hidden
+     * @returns {void}.
      */
-    x?: number;
+    updatePenStrokeWidth(id: string): void;
     /**
-     * Gets y position from the canvas.
+     * Apply Pen stroke color.
+     *
+     * @param { string } value - Specifies the selected color item value.
+     * @hidden
+     * @returns {void}.
      */
-    y?: number;
+    updatePenStrokeColor(value: string): void;
     /**
-     * Gets width of the image.
+     * Apply Shape stroke width.
+     *
+     * @param { string } id - Specifies the selected item id.
+     * @hidden
+     * @returns {void}.
      */
-    width: number;
+    updateStrokeWidth(id: string): void;
     /**
-     * Gets height of the image.
+     * Apply Shape stroke color.
+     *
+     * @param { string } value - Specifies the selected color item value.
+     * @hidden
+     * @returns {void}.
      */
-    height: number;
-}
-/**
- * Interface for active object in the imageEditor.
- *
- * @private
- */
-export interface ActivePoint {
+    updateStrokeColor(value: string): void;
     /**
-     * Gets mouse down x-point.
+     * Apply Shape fill color.
+     *
+     * @param { string } value - Specifies the selected color item value.
+     * @hidden
+     * @returns {void}.
      */
-    startX: number;
+    updateFillColor(value: string): void;
     /**
-     * Gets mouse down y-point.
+     * Get pascalToSplitWords from string.
+     *
+     * @param { string } str - Specifies the word.
+     * @hidden
+     * @returns {string}.
      */
-    startY: number;
+    pascalToSplitWords(str: string): string;
     /**
-     * Gets mouse move x-point.
+     * Get Slider Value.
+     *
+     * @param { string } type - Finetune type.
+     * @hidden
+     * @returns {number}.
      */
-    endX?: number;
+    getCurrAdjustmentValue(type: string): number;
     /**
-     * Gets mouse move y-point.
+     * Apply transformSelect.
+     *
+     * @param { string } type - Specifies the selected item text.
+     * @hidden
+     * @returns {void}.
      */
-    endY?: number;
+    transformSelect(type: string): void;
     /**
-     * Gets width of the selection.
+     * Returns default filter.
+     *
+     * @hidden
+     * @returns {string}.
      */
-    width?: number;
+    getDefaultFilter(): string;
     /**
-     * Gets height of the selection.
+     * To Initialize the component rendering
+     *
+     * @private
+     * @param {HTMLCanvasElement} element - Specifies the canvas element.
+     * @param {BlazorDotnetObject} dotnetRef - Specifies for blazor client to server communication.
+     * @returns {void}
      */
-    height?: number;
+    initializeImageEditor(element: HTMLDivElement, dotnetRef?: BlazorDotnetObject): void;
+    private prerender;
+    private initializeZoomSettings;
+    private initializeThemeColl;
     /**
-     * Gets radius of the circle dot.
+     * Get the square point for path.
+     *
+     * @param { HTMLDivElement } element - Specifies element.
+     * @param { string } type - Specifies the type.
+     * @param { string } value - Specifies the value.
+     * @hidden
+     * @private
+     * @returns {void}.
      */
-    radius?: number;
+    updateToolbar(element: HTMLDivElement, type: string, value?: string): void;
 }