@syncfusion/ej2-image-editor 20.4.51 → 21.1.37

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

@@ -2,9 +2,9 @@ import { Component, INotifyPropertyChanged } 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 } from './image-editor-model';
+import { ImageEditorModel, FinetuneSettingsModel, ZoomSettingsModel } from './image-editor-model';
 /**
- * Interface for image finetune values.
+ * This interface is used to specify settings for image finetuning operations, including minimum and maximum values, as well as default values.
  */
 export interface ImageFinetuneValue {
     /**
@@ -27,70 +27,158 @@ export interface ImageFinetuneValue {
     defaultValue: number;
 }
 /**
- * Interface for image finetune values.
+ * 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.
  */
 export declare class FinetuneSettings extends ChildProperty<FinetuneSettings> {
     /**
-     * Specifies the brightness level of image.
+     * Represents a finetune setting for adjusting the brightness of an image.
      *
+     * @type {ImageFinetuneValue}
+     *
+     * @property {number} value - The brightness level of the image, from -100 to 100.
+     * @property {number} min - The minimum brightness value allowed, typically -100.
+     * @property {number} max - The maximum brightness value allowed, typically 100.
      * @default null
      */
     brightness: ImageFinetuneValue;
     /**
-     * Specifies the contrast level image.
+     * Represents a finetune setting for adjusting the contrast of an image.
+     *
+     * @type {ImageFinetuneValue}
      *
+     * @property {number} value - The contrast level of the image, from -100 to 100.
+     * @property {number} min - The minimum contrast value allowed, typically -100.
+     * @property {number} max - The maximum contrast value allowed, typically 100.
      * @default null
      */
     contrast: ImageFinetuneValue;
     /**
-     * Specifies the hue level image.
+     * Represents a finetune setting for adjusting the hue of an image.
      *
+     * @type {ImageFinetuneValue}
+     *
+     * @property {number} value - The hue level of the image, from 0 to 100.
+     * @property {number} min - The minimum hue value allowed, typically 0.
+     * @property {number} max - The maximum hue value allowed, typically 100.
      * @default null
      */
     hue: ImageFinetuneValue;
     /**
-     * Specifies the saturation level image.
+     * Represents a finetune setting for adjusting the saturation of an image.
+     *
+     * @type {ImageFinetuneValue}
      *
+     * @property {number} value - The saturation level of the image, from -100 to 100.
+     * @property {number} min - The minimum saturation value allowed, typically -100.
+     * @property {number} max - The maximum saturation value allowed, typically 100.
      * @default null
      */
     saturation: ImageFinetuneValue;
     /**
-     * Specifies the exposure level image.
+     * Represents a finetune setting for adjusting the exposure of an image.
      *
+     * @type {ImageFinetuneValue}
+     *
+     * @property {number} value - The exposure level of the image, from -100 to 100.
+     * @property {number} min - The minimum exposure value allowed, typically -100.
+     * @property {number} max - The maximum exposure value allowed, typically 100.
      * @default null
      */
     exposure: ImageFinetuneValue;
     /**
-     * Specifies the opacity level image.
+     * Represents a finetune setting for adjusting the opacity of an image.
+     *
+     * @type {ImageFinetuneValue}
      *
+     * @property {number} value - The opacity level of the image, from 0 to 100.
+     * @property {number} min - The minimum opacity value allowed, typically 0.
+     * @property {number} max - The maximum opacity value allowed, typically 100.
      * @default null
      */
     opacity: ImageFinetuneValue;
     /**
-     * Specifies the blur level image.
+     * Represents a finetune setting for adjusting the blur of an image.
      *
+     * @type {ImageFinetuneValue}
+     *
+     * @property {number} value - The blur level of the image, from 0 to 100.
+     * @property {number} min - The minimum blur value allowed, typically 0.
+     * @property {number} max - The maximum blur value allowed, typically 100.
      * @default null
      */
     blur: ImageFinetuneValue;
 }
 /**
- * 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.
+ * An interface used to define the settings such as minimum, maximum, and default zoom factors, and the type of zooming which are available in the image editor control.
+ */
+export declare class ZoomSettings extends ChildProperty<ZoomSettings> {
+    /**
+     * Specifies the available options for zooming in an image editor control.
+     *
+     * @remarks
+     * Use this property to enable or disable specific types of zooming in the image editor. The following zooming options are available:
+     * MouseWheel: Zooming is performed by scrolling the mouse wheel up and down.
+     * Pinch: Zooming is performed using pinch gestures on touch-enabled devices.
+     * Commands: Zooming is performed by clicking the CTRL key and either the plus (+) or minus (-) buttons on the keyboard.
+     * Toolbar: Zooming is performed using toolbar buttons.
+     *
+     * By default, this property is set to `null`, which enables all types of zooming.
+     *
+     * @default null
+     */
+    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.
+     *
+     */
+    minZoomFactor: number;
+    /**
+     * Specifies the maximum zooming level to limit the zooming.
+     * An integer value that specifies the maximum zooming level. And the default value is 10 (1000 percent).
+     *
+     * @remarks
+     * The given value is considered as percentage.
+     *
+     */
+    maxZoomFactor: number;
+    /**
+     * Specifies the default zoom factor to be applied on initial loading of image.
+     * An integer value that specifies the current zooming level. And the default value is 1 (100 percent).
+     *
+     * @remarks
+     * The given value is considered as percentage.
+     *
+     */
+    zoomFactor: number;
+    /**
+     * Specifies the point in which the zooming  has been performed in the image editor.
+     * A point value that specifies the current zooming point.
+     * And the default value is null, and it can be considered as center point of the image editor.
+     *
+     * @remarks
+     * The given value is a point object which has x and y coordinates.
+     *
+     */
+    zoomPoint: Point;
+}
+/**
+ * The Image Editor is a graphical user interface for editing images.
+ *
+ * @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 %}
  *
- ```html
- * <div id='imageeditor'></div>
- * ```
- * ```typescript
- * <script>
- * var imageObj = new ImageEditor({});
- * imageObj.appendTo("#imageeditor");
- * </script>
- * ```
  */
 export declare class ImageEditor extends Component<HTMLDivElement> implements INotifyPropertyChanged {
     /**
      *
-     * ImageEditor Private Properties
+     * Image Editor Private Properties
      */
     private lowerCanvas;
     private lowerContext;
@@ -138,7 +226,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private l10n;
     private themeColl;
     private toolbarFn;
-    private isTimer;
+    private quickAccessToolbarFn;
     private timer;
     private tempObjColl;
     private isFirstMove;
@@ -152,7 +240,6 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private currentFilter;
     private tempFilter;
     private canvasFilter;
-    private tempUndoRedoColl;
     private tempUndoRedoStep;
     private zoomFactor;
     private tempZoomFactor;
@@ -204,12 +291,9 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private isFreehandDrawing;
     private tempFreehandCounter;
     private tempActObj;
-    private lastPan;
     private selectedFreehandColor;
     private isFreehandDrawCustomized;
-    private isShapeInserted;
     private isAllowCropPan;
-    private tempPannedPoint;
     private cropObj;
     private afterCropActions;
     private isCancelAction;
@@ -224,25 +308,40 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private cancelPointColl;
     private rotatedFlipCropSelection;
     private freehandDrawSelectedId;
-    private panStartObj;
     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;
     /**
-     * Defines class/multiple classes separated by a space for customizing Image Editor UI.
+     * Defines one or more CSS classes that can be used to customize the appearance of an Image Editor component.
+     *
+     * @remarks
+     * One or more CSS classes to customize the appearance of the Image Editor component, such as by changing its toolbar appearance, borders, sizes, or other visual aspects.
      *
      * @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.
+     * Defines whether an Image Editor component is enabled or disabled.
+     *
+     * @remarks
+     * A disabled Image Editor component may have a different visual appearance than an enabled one. When set to “true”, the Image Editor component will be disabled, and the user will not be able to interact with it.
      *
      * @default false
      */
@@ -250,13 +349,31 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     /**
      * Specifies the height of the Image Editor.
      *
+     * @remarks
+     * The value of height is specified either as a percentage (e.g. '100%') or as a fixed pixel value (e.g. '100px').
+     *
      * @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'
+     * Specifies the theme of the Image Editor. The appearance of the shape selection in Image Editor is determined by this property.
+     *
+     * @remarks
+     * The `theme` property supports all the built-in themes of Syncfusion, including:
+     * - `Bootstrap5`
+     * - `Fluent`
+     * - `Tailwind`
+     * - `Bootstrap4`
+     * - `Material`
+     * - `Fabric`
+     * - `HighContrast`
+     * - `Bootstrap5Dark`
+     * - `Bootstrap4Dark`
+     * - `MaterialDark`
+     * - `FabricDark`
+     * - `HighContrastDark`
+     *
+     * The default value is set to `Theme.Bootstrap5`.
      *
      * @isenumeration true
      * @default Theme.Bootstrap5
@@ -265,204 +382,289 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      */
     theme: string | Theme;
     /**
-     * Specifies the toolbar items to perform UI interactions. It accepts both string[] and ItemModel[] to configure its toolbar items.
+     * Specifies the toolbar items to perform UI interactions.
+     * It accepts both string[] and ItemModel[] to configure its toolbar items. The default value is null.
+     * If the property is not defined in the control, the default toolbar will be rendered with preconfigured toolbar commands.
      * 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.
-     *
+     * - 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.
+     * - Transform: helps to rotate and flip an image.
+     * - Finetunes: helps to perform adjustments on an image.
+     * - Filters: helps to perform predefined color filters.
+     * - ZoomIn: performs zoom-in an image.
+     * - ZoomOut: performs zoom-out an image.
+     * - Save: save the modified image.
+     * - 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" }
+     * ]
+     *
+     * @remarks
+     * If the toolbarTemplate property is defined in the control, the toolbar will be rendered based on the toolbarTemplate property.
      * @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’.
+     *
+     * {% 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.
+     *
+     * @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
-     ```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>
-     * ```
+     *
+     * {% codeBlock src='image-editor/toolbarTemplate/index.md' %}{% endcodeBlock %}
+     *
      */
     toolbarTemplate: string;
     /**
-     * Specifies the width of the Image Editor.
+     * Specifies the width of an Image Editor.
+     *
+     * @remarks
+     * The value of width is specified either as a percentage (e.g. '100%') or as a fixed pixel value (e.g. '100px').
      *
      * @default '100%'
      */
     width: string;
     /**
-     * Specifies whether to perform undo / redo operation.
+     * Specifies a boolean value whether enable undo/redo operations in the image editor.
+     *
+     * @remarks
+     * If this property is true, the undo redo options will be enabled in toolbar and can also be accessed via keyboard shortcuts.
+     * If set to false, both options will be disabled.
+     * The undo redo history is limited to 16. Once the maximum limit is reached, the oldest history item will be removed to make space for the new item.
+     *
+     * @default true
+     *
+     */
+    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.
      *
      * @default false
      * @private
+     *
+     * @remarks
+     * Set this property to true to show the quick access toolbar, and false to hide it.
      */
-    allowUndoRedo: boolean;
+    showQuickAccessToolbar: boolean;
+    /**
+     * Specifies a custom template content for the quick access toolbar of an Image Editor control.
+     *
+     * @default null
+     * @private
+     *
+     * @remarks
+     * This property only works if the "showQuickAccessToolbar" property is set to true.
+     *
+     * {% codeBlock src='image-editor/quickAccessToolbarTemplate/index.md' %}{% endcodeBlock %}
+     *
+     */
+    quickAccessToolbarTemplate: string;
     /**
-     * Gets or sets whether to prevent the interaction in signature component.
-     * True, if the signature component is read only state where the user interaction is prevented. The default value is false.
+     * 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.
+     *
+     * @remarks
+     * If the property is true, the image editor control becomes read-only, and the user interaction will be prevented.
      *
      * @default false
      * @private
      */
     isReadOnly: boolean;
     /**
-     * Specifies the Signature in RTL mode that displays the content in the right-to-left direction.
+     * Specifies whether to enable RTL mode in image editor control that displays the content in the right-to-left direction.
+     * A boolean that specifies whether to enable RTL mode in image editor control. The default value is false.
      *
      * @default false
      * @private
      */
     enableRtl: boolean;
     /**
-     * Gets or sets whether to persist component's state between page reloads.
-     * True, if the component's state persistence is enabled. The default value is false.
-     * Component's property will be stored in browser local storage to persist component's state when page reloads.
+     * Specifies a bool value whether enable or disable persist component's state between page reloads. The default value is false.
+     *
+     * @remarks
+     * If this property is true, the controls's state persistence will be enabled.
+     * Control's property will be stored in browser local storage to persist control's state when page reloads.
      *
      * @default false
      * @private
      */
     enablePersistence: boolean;
     /**
-     * It can be done using the filter property of the canvas.  The following fine tunes can be supported.
-     * Brightness: The intensity of the primary colors grows with increased brightness, but the color itself does not change. It can be done by changing brightness and opacity property.
-     * Contrast: The contrast of an image refers to the difference between the light pixels and dark pixels. Low contrast images contain either a narrow range of colors while high contrast images have bright highlights and dark shadows. It can be done by changing contrast property.
-     * Hue: Hue distinguishes one color from another and is described using common color names such as green, blue, red, yellow, etc. Value refers to the lightness or darkness of a color. It can be controlled by hue-rotate property.
-     * Saturation: If saturation increases, colors appear sharper or purer. As saturation decreases, colors appear more washed-out or faded. It can be controlled by saturation and brightness property.
-     * Exposure: If exposure increases, intensity of light appears brighter. As exposure decreases, intensity of light decreases. Exposure can be controlled by brightness property.
-     * 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.
+     * Specifies the finetune settings option which can be used to perform color adjustments in the image editor control.
+     *
+     * @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.
+     *
+     * The possible values are:
+     * - Brightness: The intensity of the primary colors grows with increased brightness, but the color itself does not change. It can be done by changing brightness and opacity property.
+     * - Contrast: The contrast of an image refers to the difference between the light pixels and dark pixels. Low contrast images contain either a narrow range of colors while high contrast images have bright highlights and dark shadows. It can be done by changing contrast property.
+     * - Hue: Hue distinguishes one color from another and is described using common color names such as green, blue, red, yellow, etc. Value refers to the lightness or darkness of a color. It can be controlled by hue-rotate property.
+     * - Saturation: If saturation increases, colors appear sharper or purer. As saturation decreases, colors appear more washed-out or faded. It can be controlled by saturation and brightness property.
+     * - Exposure: If exposure increases, intensity of light appears brighter. As exposure decreases, intensity of light decreases. Exposure can be controlled by brightness property.
+     * - 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;
     /**
-     * Triggers before an image is saved.
+     * 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.
+     *
+     * @remarks
+     * If the property is not specified, then the default settings will be applied for all the properties available in zoom settings.
+     *
+     * The following options are available in `zoomSettings`.
+     * - minZoomFactor: Specifies the minimum zoom factor level to control the zoom.
+     * - maxZoomFactor: Specifies the maximum zoom factor level to control the zoom.
+     * - zoomFactor: Specifies the zoom factor to be applied to the image.
+     * - 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;
+    /**
+     * Event callback that is raised before an image is saved.
      *
      * @event beforeSave
      */
     beforeSave: EmitType<BeforeSaveEventArgs>;
     /**
-     * Triggers once the component rendering is completed.
+     * Event callback that is raised after rendering the Image Editor component.
      *
      * @event created
      */
     created: EmitType<Event>;
     /**
-     * Triggers once the component is destroyed with its elements and bound events.
+     * Event callback that is raised once the component is destroyed with its elements and bound events.
      *
      * @event destroyed
      */
     destroyed: EmitType<Event>;
     /**
-     * Triggers while zooming an image.
+     * Event callback that is raised while zooming an image.
      *
      * @event zooming
      */
     zooming: EmitType<ZoomEventArgs>;
     /**
-     * Triggers while panning an image.
+     * Event callback that is raised while panning an image.
      *
      * @event panning
      */
     panning: EmitType<PanEventArgs>;
     /**
-     * Triggers while cropping an image.
+     * Event callback that is raised while cropping an image.
      *
      * @event cropping
      */
     cropping: EmitType<CropEventArgs>;
     /**
-     * Triggers while rotating an image.
+     * Event callback that is raised while rotating an image.
      *
      * @event rotating
      */
     rotating: EmitType<RotateEventArgs>;
     /**
-     * Triggers while flipping an image.
+     * Event callback that is raised while flipping an image.
      *
      * @event flipping
      */
     flipping: EmitType<FlipEventArgs>;
     /**
-     * Triggers while changing shapes in an image.
+     * Event callback that is raised while changing shapes in an Image Editor.
      *
      * @event shapeChanging
      */
     shapeChanging: EmitType<ShapeChangeEventArgs>;
     /**
-     * Triggers once an image is opened.
+     * Event callback that is raised once an image is opened in an Image Editor.
      *
      * @event fileOpened
      */
     fileOpened: EmitType<OpenEventArgs>;
     /**
-     * Triggers once an image is saved.
+     * Event callback that is raised once an image is saved.
      *
      * @event saved
      */
     saved: EmitType<SaveEventArgs>;
     /**
-     * Triggers once the toolbar is created.
+     * Event callback that is raised once the toolbar is created.
      *
      * @event toolbarCreated
      */
     toolbarCreated: EmitType<ToolbarEventArgs>;
     /**
-     * Triggers while updating/refreshing the toolbar
+     * Event callback that is raised while updating/refreshing the toolbar
      *
      * @event toolbarUpdating
+     *
+     * {% codeBlock src='image-editor/toolbarUpdating/index.md' %}{% endcodeBlock %}
+     *
      */
     toolbarUpdating: EmitType<ToolbarEventArgs>;
     /**
-     * Triggers once the toolbar item is clicked.
+     * Event callback that is raised once the toolbar item is clicked.
      *
      * @event toolbarItemClicked
      */
     toolbarItemClicked: EmitType<ClickEventArgs>;
     /**
-     * Triggers when applying filter to an image.
+     * Event callback that is raised when applying filter to an image.
      *
      * @event imageFiltering
      */
     imageFiltering: EmitType<ImageFilterEventArgs>;
     /**
-     * Triggers when applying fine tune to an image.
+     * Event callback that is raised when applying fine tune to an image.
      *
      * @event finetuneValueChanging
      */
     finetuneValueChanging: EmitType<FinetuneEventArgs>;
+    /**
+     * Event callback that is raised while clicking on an image in the Image Editor.
+     *
+     * @event click
+     */
+    click: EmitType<ImageEditorClickEventArgs>;
+    /**
+     * Event callback that is triggered when the quick access toolbar is opening.
+     *
+     * @event quickAccessToolbarOpening
+     * @private
+     *
+     * @remarks
+     * Use this event to customize the toolbar items that appear in the quick access toolbar.
+     * To customize the toolbar items, modify the "toolbarItems" collection property of the event arguments.
+     * The "toolbarItems" 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 ItemModel of custom toolbar items to display.
+     *
+     * {% codeBlock src='image-editor/quickAccessToolbarOpening/index.md' %}{% endcodeBlock %}
+     *
+     */
+    quickAccessToolbarOpening: EmitType<QuickAccessToolbarEventArgs>;
     /**
      *
      * Constructor for creating the widget
@@ -529,11 +731,13 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     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;
@@ -541,6 +745,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private getZoomToolbarItem;
     private processToolbar;
     private processSubToolbar;
+    private wireZoomBtnEvents;
     private isToolbar;
     private initToolbarItem;
     private enableDisableToolbarBtn;
@@ -552,6 +757,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private renderSaveBtn;
     private cropSelect;
     private transformSelect;
+    private resetZoom;
     private performTransformation;
     private updateTransform;
     private getShapesToolbarItem;
@@ -574,6 +780,11 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private refreshUndoRedoColl;
     private applyPreviewFilter;
     private contextualToolbarClicked;
+    private zoomInBtnClickHandler;
+    private zoomOutBtnClickHandler;
+    private zoomInBtnMouseDownHandler;
+    private zoomOutBtnMouseDownHandler;
+    private zoomBtnMouseUpHandler;
     private defToolbarClicked;
     private performCancel;
     private applyShape;
@@ -582,6 +793,9 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private openSlider;
     private setTempFilterProperties;
     private okBtn;
+    private getZeroZoomPointCollValue;
+    private getZeroZoomObjValue;
+    private updateCurrentUndoRedoColl;
     private updateBrightnessFilter;
     private isFreehandDrawIndex;
     private deleteFreehandDraw;
@@ -597,6 +811,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private renderSlider;
     private createSlider;
     private getCurrAdjustmentValue;
+    private getFinetuneOption;
     private setCurrAdjustmentValue;
     private cancelPan;
     private callMainToolbar;
@@ -649,6 +864,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private pointsVerticalFlip;
     private flipFreehandrawColl;
     private rotateFreehandDrawColl;
+    private updateCursorPointsForFreehandDrawing;
     private zoomFreehandDrawColl;
     private zoomX;
     private zoomY;
@@ -698,24 +914,39 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     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;
@@ -725,6 +956,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private setTextBoxPos;
     private setTextBoxPoints;
     private findTextTarget;
+    private renderTextArea;
     private selectedText;
     private setTextBoxHeight;
     private setTextBoxWidth;
@@ -733,7 +965,9 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private setDragHeight;
     private triggerShapeChange;
     private updateActivePoint;
+    private updateArrowDirection;
     private preventDraggingInvertly;
+    private preventTextDraggingInvertly;
     private updateNWPoints;
     private updateNPoints;
     private updateNEPoints;
@@ -752,10 +986,10 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private shapeCircle;
     private drawOuterSelection;
     private drawObject;
-    private rotateShape;
     private updateActiveObject;
     private drawShapeObj;
     private shapeLine;
+    private shapeArrow;
     private shapeText;
     private updateActPoint;
     private drawSquareLines;
@@ -766,6 +1000,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private getCurrentFlipState;
     private rotateDegree;
     private updateCursorStyles;
+    private updateCursorStylesForArrow;
     private drawCropRatio;
     private setDragDirection;
     private updatePoints;
@@ -796,8 +1031,13 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     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;
@@ -839,42 +1079,69 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private performUndoDefaultAction;
     private setAdjustment;
     private updateFilter;
+    private rotateImage;
+    private flipImage;
+    private componentToHex;
+    private rgbToHex;
     /**
-     * Clear a current selection.
+     * Clears the current selection performed in the image editor.
      *
      * @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.
+     * Crops an image based on the selection done in the image editor.
+     *
+     * @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.
+     * Flips an image by horizontally or vertically in the image editor.
+     *
+     * @param { Direction } direction - Specifies the direction to flip the image.
+     * A horizontal direction for horizontal flipping and vertical direction for vertical flipping.
+     *
+     * @remarks
+     * It flips the shapes including rectangle, circle, line, text, and freehand drawings.
      *
-     * @param {Direction } direction - Specifies the direction to flip the image.
      * @returns {void}.
+     *
+     * {% codeBlock src='image-editor/zoom/index.md' %}{% endcodeBlock %}
+     *
      */
     flip(direction: Direction): void;
     /**
-     * Return an image as ImageData.
+     * Returns an image as ImageData to load it in to a canvas.
+     *
+     * @remarks
+     * The data returned from this method is directly drawn in a canvas using 'putImageData' method.
+     * And then the user can get the base64 string from the canvas using toDataURL method.
      *
      * @returns {ImageData}.
      */
     getImageData(): ImageData;
     /**
-     *  Load/opens an image for editing within an image editor.
+     *  Opens an image as URL or ImageData for editing in an image editor.
+     *
+     * @param {string | ImageData } data - Specifies url of the image or image data.
      *
-     * @param {string | ImageData } data - Specifies url of the Image or image data.
+     * @remarks
+     * The supported file types are JPG, JPEG, PNG, and SVG.
      *
      * @returns {void}.
      */
     open(data: string | ImageData): void;
     /**
-     * Reset all the changes and revert to original image.
+     * Reset all the changes done in an image editor and revert to original image.
+     *
+     * @remarks
+     * The undo redo collection also cleared while resetting the image editor.
      *
      * @returns {void}.
      */
@@ -883,9 +1150,15 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * 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.
+     * A positive integer value for clockwise and negative integer value for anti-clockwise rotation.
+     *
+     * @remarks
+     * It rotated the shapes including rectangle, circle, line, text, and freehand drawings.
      *
      * @returns {boolean}.
+     *
+     * {% codeBlock src='image-editor/rotate/index.md' %}{% endcodeBlock %}
+     *
      */
     rotate(degree: number): boolean;
     /**
@@ -894,6 +1167,9 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @param {string} type - Specifies a format of image to be saved.
      * @param {string} fileName – Specifies a file name to be saved
      *
+     * @remarks
+     * The supported file types are JPG, JPEG, PNG, and SVG.
+     *
      * @returns {void}.
      */
     export(type?: string, fileName?: string): void;
@@ -905,26 +1181,20 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @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.
+     *
+     * @remarks
+     * The selection UI is based on the 'theme' property.
+     *
      * @returns {void}.
-     *   ```html
-     * <div id='imageeditor'></div>
-     * ```
-     * ```typescript
-     * <script>
-     * var imageObj = new ImageEditor({
-     *   created : () => {
-     *     imageObj.select('16:9', 10, 10);
-     *  }
-     * });
-     * imageObj.appendTo("#imageeditor");
-     * </script>
-     * ```
+     *
+     * {% codeBlock src='image-editor/select/index.md' %}{% endcodeBlock %}
+     *
      */
     select(type: string, startX?: number, startY?: number, width?: number, height?: number): void;
     /**
-     * Enable or disable a freehand drawing in an Image Editor.
+     * Enable or disable a freehand drawing option in an Image Editor.
      *
-     * @param {boolean} value - Specifies a value whether enable or disable freehand drawing.
+     * @param {boolean} value - Specifies a value whether to enable or disable freehand drawing.
      *
      * @returns {void}.
      * @private
@@ -933,9 +1203,12 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     /**
      * Enable or disable a freehand drawing in an Image Editor.
      *
-     * @param {boolean} value - Specifies a value whether enable or disable freehand drawing.
+     * @param {boolean} value - Specifies a value whether to enable or disable freehand drawing.
      *
-     *  @returns {void}.
+     * @remarks
+     * User can directly drawing on a canvas after enabling this option.
+     *
+     * @returns {void}.
      */
     freehandDraw(value: boolean): void;
     /**
@@ -943,41 +1216,39 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      *
      * @param {boolean} value - Specifies a value whether enable or disable panning.
      *
+     * @remarks
+     * This option will take into effect once the image's visibility is hidden when zooming an image or selection has been performed.
+     *
      * @returns {void}.
      */
     pan(value: boolean): void;
     /**
-     * Increase / Decrease the magnification of an image.
+     * Zoom in or out on a point in the image editor.
+     *
+     * @param {number} zoomFactor - The percentage-based zoom factor to use (e.g. 20 for 2x zoom).
+     * @param {Point} zoomPoint - The point in the image editor to zoom in/out on.
+     *
+     * @remarks
+     * Zooming directly enables the panning option when the image's visibility is hidden.
+     * User can disable it by using 'Pan' method.
+     * @returns {void}
      *
-     * @param {boolean} value - Specifies a value to be zoomed on the image.
-     * @returns {void}.
      */
-    zoom(value: number): void;
+    zoom(zoomFactor: number, zoomPoint?: Point): 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.
+     * @param {number} radiusX - Specifies the radius x point for the ellipse.
+     * @param {number} radiusY - Specifies the radius y point for the ellipse.
+     * @param {number} strokeWidth - Specifies the stroke width of ellipse.
+     * @param {string} strokeColor - Specifies the stroke color of ellipse.
+     * @param {string} fillColor - Specifies the fill color of the ellipse.
      * @returns {boolean}.
      *
-     * ```html
-     * <div id='imageeditor'></div>
-     * ```
-     * ```typescript
-     * <script>
-     * * var imageObj = new ImageEditor({
-     * created: () => {
-     * imageObj.drawEllipse(10, 10, 40, 60);
-     * }
-     * });
-     * imageObj.appendTo("#imageeditor");
-     * </script>
-     * ```
+     * {% codeBlock src='image-editor/ellipse/index.md' %}{% endcodeBlock %}
+     *
      */
     drawEllipse(x?: number, y?: number, radiusX?: number, radiusY?: number, strokeWidth?: number, strokeColor?: string, fillColor?: string): boolean;
     /**
@@ -992,6 +1263,19 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @returns {boolean}.
      */
     drawLine(startX?: number, startY?: number, endX?: number, endY?: number, strokeWidth?: number, strokeColor?: string): boolean;
+    /**
+     * Draw arrow on an image.
+     *
+     * @param {number} startX – Specifies start point x-coordinate of arrow.
+     * @param {number} startY – Specifies start point y-coordinate of arrow.
+     * @param {number} endX - Specifies end point x-coordinates of arrow.
+     * @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.
+     * @returns {boolean}.
+     * @private
+     */
+    drawArrow(startX?: number, startY?: number, endX?: number, endY?: number, strokeWidth?: number, strokeColor?: string): boolean;
     /**
      * Draw a rectangle on an image.
      *
@@ -1001,7 +1285,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @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.
+     * @param {string} fillColor - Specifies the fill color of the rectangle.
      * @returns {boolean}.
      */
     drawRectangle(x?: number, y?: number, width?: number, height?: number, strokeWidth?: number, strokeColor?: string, fillColor?: string): boolean;
@@ -1018,60 +1302,30 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @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>
-     * ```
+     * {% 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;
     /**
-     * Selects a shape based on the given shape id. The id can be got from the public method ‘getShapeSettings’.
+     * Select a shape based on the given shape id.
+     * Use 'getShapeSettings' method to get the shape id which is then passed to perform selection.
      *
      * @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>
-     * ```
+     *
+     * {% codeBlock src='image-editor/selectShape/index.md' %}{% endcodeBlock %}
+     *
      */
     selectShape(id: string): boolean;
     /**
-     * Deletes a shape based on the given shape id. The id can be got from the public method getShapeSettings.
+     * Deletes a shape based on the given shape id.
+     * Use 'getShapeSettings' method to get the shape id which is then passed to perform selection.
      *
      * @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>
-     * ```
+     *
+     * {% codeBlock src='image-editor/deleteShape/index.md' %}{% endcodeBlock %}
+     *
      */
     deleteShape(id: string): void;
     /**
@@ -1079,19 +1333,9 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      *
      * @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>
-     * ```
+     *
+     * {% codeBlock src='image-editor/getShapeSetting/index.md' %}{% endcodeBlock %}
+     *
      */
     getShapeSetting(id: string): ShapeSettings;
     /**
@@ -1107,79 +1351,269 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      */
     update(): void;
     /**
-     * To apply the filters to an image
+     * Finetuning an image with the given type of finetune and its value in the image editor.
      *
-     * @param {ImageFinetuneOptions } finetuneOption - Specifies the finetune options to the image.
+     * @param {ImageFinetuneOption } finetuneOption - Specifies the finetune options to be performed in the image.
      * @param {number } value - Specifies the value for finetuning the image.
+     *
+     * @remarks
+     * The finetuning will not affect the shapes background and border color.
+     *
      * @returns {void}.
      *
      */
-    finetuneImage(finetuneOption: ImageFinetuneOptions, value: number): void;
+    finetuneImage(finetuneOption: ImageFinetuneOption, value: number): void;
     /**
-     * To apply the filters to an image
+     * Filtering an image with the given type of filters.
+     *
+     * @param {ImageFilterOption } filterOption - Specifies the filter options to the image.
      *
-     * @param {ImageFilterOptions } filterOption - Specifies the filter options to the image.
+     * @remarks
+     * The filtering will not affect the shape's background and border color.
      * @returns {void}.
      */
-    applyImageFilter(filterOption: ImageFilterOptions): void;
+    applyImageFilter(filterOption: ImageFilterOption): void;
     /**
-     * Undo the last user action.
+     * Reverse the last action which performed by the user in the Image Editor.
+     *
+     * @remarks
+     * This method will take into effect once the 'allowUndoRedo' property is enabled.
      *
-     * @private
      * @returns {void}.
      */
     undo(): void;
     /**
-     * Redo the last user action.
+     * Redo the last user action that was undone by the user or `undo` method.
      *
-     * @private
+     * @remarks
+     * This method will take into effect once the 'allowUndoRedo' property is enabled.
      * @returns {void}.
      */
     redo(): void;
+    /**
+     * Get the dimension of an image in the image editor such as x, y, width, and height.
+     * The method helps to get dimension after cropped an image.
+     *
+     * @returns {Dimension}.
+     * 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"
 }
 /**
- * Defines the Image Editor file type.
+ * An enumeration representing the direction of an image editor operation.
+ *
+ * @enum {string}
  */
-export declare type FileType = 'Png' | 'Jpeg' | 'Svg';
+export declare enum Direction {
+    /** The horizontal direction. */
+    Horizontal = "Horizontal",
+    /** The vertical direction. */
+    Vertical = "Vertical"
+}
 /**
- * Defines the direction to flip the image on Image Editor.
+ * An enumeration representing the type of shape to be added in the image editor.
+ *
+ * @enum {string}
  */
-export declare type Direction = 'Horizontal' | 'Vertical';
+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"
+}
 /**
- * Defines the Image Editor shape type.
+ * An enumeration representing the different ways to trigger zooming in the image editor.
+ *
+ * @enum {number}
  */
-export declare type ShapeType = 'Rectangle' | 'Ellipse' | 'Line' | 'Text' | 'FreehandDraw';
+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
+}
 /**
- * Defines the theme for Image Editor.
+ * An enum representing the available themes in the image editor.
  */
-export declare type Theme = 'Bootstrap5' | 'Bootstrap5Dark' | 'Tailwind' | 'TailwindDark' | 'Fluent' | 'FluentDark' | 'Bootstrap4' | 'Bootstrap' | 'BootstrapDark' | 'Material' | 'MaterialDark' | 'Fabric' | 'FabricDark' | 'Highcontrast';
+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"
+}
 /**
- * Defines the toolbar items for Image Editor.
+ * An enum representing the available toolbar commands in the 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';
+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"
+}
 /**
- * Defines the image filter options
+ * 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 type ImageFilterOptions = 'Default' | 'Chrome' | 'Cold' | 'Warm' | 'Grayscale' | 'Sepia' | 'Invert';
+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"
+}
 /**
- * Defines the image filter options
+ * 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 type ImageFinetuneOptions = 'Brightness' | 'Contrast' | 'Hue' | 'Saturation' | 'Exposure' | 'Opacity' | 'Blur';
+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"
+}
 /**
- * Interface for zoom transition occur in the imageEditor.
+ * The Interface which contains the properties for zoom transition occur in the Image Editor.
  */
 export interface ZoomEventArgs {
     /**
-     * Returns the (x, y) point to be zoomed.
+     * Returns the point in which the zooming action was performed.
+     *
+     * @remarks
+     * The given value is a point object which has x and y coordinates.
+     *
      */
     zoomPoint: Point;
     /**
-     * Specifies the value of zooming. Zoom in or out can be defined based on the value.
+     * 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.
+     *
      */
-    zoomLevel: number;
+    previousZoomFactor: number;
+    /**
+     * 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.
+     *
+     */
+    currentZoomFactor: number;
+    /**
+     * 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.
+     *
+     * @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;
 }
 /**
- * Interface for pan transition occur in the imageEditor.
+ * The Interface which contains the properties for pan transition occur in the Image Editor.
  */
 export interface PanEventArgs {
     /**
@@ -1190,40 +1624,64 @@ export interface PanEventArgs {
      * Returns the (x, y) point to be panning ended.
      */
     endPoint: Point;
+    /**
+     * Defines whether to cancel the panning action of image editor.
+     */
+    cancel: boolean;
 }
 /**
- * Interface for crop transition occur in the imageEditor.
+ * The Interface which contains the properties for crop transition occur in the Image Editor.
  */
 export interface CropEventArgs {
     /**
      * Returns the start point of the crop region.
+     *
+     * @remarks
+     * The start and end point is used get the cropping region in a image editor.
+     *
      */
     startPoint: Point;
     /**
      * Returns the end point of the crop region.
+     *
+     * @remarks
+     * The start and end point is used get the cropping region in a image editor.
+     *
      */
     endPoint: Point;
+    /**
+     * Defines whether to cancel the cropping action of image editor.
+     */
+    cancel: boolean;
 }
 /**
- * Interface for rotate transition in the imageEditor.
+ * 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;
 }
 /**
- * Interface for flip transition in the imageEditor.
+ * 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;
 }
 /**
- * Interface for shape change in imageEditor.
+ * The Interface which contains the properties for shape change in Image Editor.
  */
 export interface ShapeChangeEventArgs {
     /**
@@ -1240,11 +1698,11 @@ export interface ShapeChangeEventArgs {
     currentShapeSettings?: ShapeSettings;
 }
 /**
- * Interface for Toolbar events.
+ * The Interface which contains the properties for Toolbar events.
  */
 export interface ToolbarEventArgs {
     /**
-     * Defines the cancel option to cancel the toolbar action.
+     * Defines whether the to cancel the toolbar updating/refreshing action in the image editor.
      */
     cancel?: boolean;
     /**
@@ -1257,11 +1715,17 @@ export interface ToolbarEventArgs {
     item?: ItemModel;
     /**
      * Specifies the toolbar item collection to be rendered as contextual toolbar.
+     *
+     * @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)[];
 }
 /**
- * Interface for opening the image.
+ * The Interface which contains the properties for opening the image.
  */
 export interface OpenEventArgs {
     /**
@@ -1274,7 +1738,7 @@ export interface OpenEventArgs {
     fileType: FileType;
 }
 /**
- * Interface for saving the canvas as image.
+ * The Interface which contains the properties for saving the canvas as image.
  */
 export interface SaveEventArgs {
     /**
@@ -1287,11 +1751,11 @@ export interface SaveEventArgs {
     fileType: FileType;
 }
 /**
- * Interface for before saving the canvas as image.
+ * The Interface which contains the properties for before saving the canvas as image.
  */
 export interface BeforeSaveEventArgs {
     /**
-     * Defines the cancel option to cancel the save action.
+     * Defines whether the to cancel the saving action in the image editor.
      */
     cancel: boolean;
     /**
@@ -1304,7 +1768,7 @@ export interface BeforeSaveEventArgs {
     fileType: FileType;
 }
 /**
- * Interface for Point Object in the image editor.
+ * The Interface which contains the properties for Point Object in the image editor.
  *
  */
 export interface Point {
@@ -1329,14 +1793,14 @@ export interface Point {
      */
     ratioY?: number;
     /**
-     * Gets or sets the time.
+     * Specifies the time.
      *
      * @private
      */
     time?: number;
 }
 /**
- * Interface for ShapeSettings in the imageEditor.
+ * Interface for ShapeSettings in the Image Editor.
  */
 export interface ShapeSettings {
     /**
@@ -1380,7 +1844,7 @@ export interface ShapeSettings {
      */
     radius?: number;
     /**
-     * Returns the length of the line shape.
+     * Returns the length of the line or arrow shape.
      */
     length?: number;
     /**
@@ -1411,18 +1875,122 @@ export interface ImageFilterEventArgs {
     /**
      * Specifies the when applying filter to an image.
      */
-    filter: ImageFilterOptions;
+    filter: ImageFilterOption;
+    /**
+     * Defines the cancel option to cancel the filter action.
+     */
+    cancel: boolean;
 }
 /**
- * Interface for filter option for the image.
+ * Interface for fine tunes option for the image.
  */
 export interface FinetuneEventArgs {
     /**
      * Specifies the type of fine tunes.
      */
-    finetune: ImageFinetuneOptions;
+    finetune: ImageFinetuneOption;
     /**
      * Specifies the value of the fine tunes.
      */
     value: number;
+    /**
+     * 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.
+     */
+    point: Point;
+}
+/**
+ * Interface for quick access toolbar for the image.
+ *
+ * @private
+ */
+export interface QuickAccessToolbarEventArgs {
+    /**
+     * 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`.
+     *
+     */
+    cancel: boolean;
+    /**
+     * 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.
+     *
+     */
+    toolbarItems: (string | ItemModel)[];
+    /**
+     * Returns the current toolbar type.
+     */
+    toolbarType?: string;
+}
+/**
+ * Interface for Dimension calculation in the imageEditor.
+ *
+ */
+export interface Dimension {
+    /**
+     * Gets x position from the canvas.
+     */
+    x?: number;
+    /**
+     * Gets y position from the canvas.
+     */
+    y?: number;
+    /**
+     * Gets width of the image.
+     */
+    width: number;
+    /**
+     * Gets height of the image.
+     */
+    height: number;
+}
+/**
+ * Interface for active object in the imageEditor.
+ *
+ * @private
+ */
+export interface ActivePoint {
+    /**
+     * Gets mouse down x-point.
+     */
+    startX: number;
+    /**
+     * Gets mouse down y-point.
+     */
+    startY: number;
+    /**
+     * Gets mouse move x-point.
+     */
+    endX?: number;
+    /**
+     * Gets mouse move y-point.
+     */
+    endY?: number;
+    /**
+     * Gets width of the selection.
+     */
+    width?: number;
+    /**
+     * Gets height of the selection.
+     */
+    height?: number;
+    /**
+     * Gets radius of the circle dot.
+     */
+    radius?: number;
 }