@syncfusion/ej2-image-editor 21.2.10 → 22.1.36

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

@@ -0,0 +1,189 @@
+/**
+ * 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 path shape. */
+    Path = "Path",
+    /** 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",
+    Path = "Path",
+    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"
+}
+/**
+ * Specifies the type of arrowhead should be drawn.
+ *
+ */
+export declare enum ArrowheadType {
+    /** Indicates no arrowhead should be drawn. */
+    None = "None",
+    /** Indicates a normal triangle-shaped arrowhead should be drawn. */
+    Arrow = "Arrow",
+    /** Indicates a solid triangle-shaped arrowhead should be drawn. */
+    SolidArrow = "SolidArrow",
+    /** Indicates a circular-shaped arrowhead should be drawn. */
+    Circle = "Circle",
+    /** Indicates a solid circular-shaped arrowhead should be drawn. */
+    SolidCircle = "SolidCircle",
+    /** Indicates a square-shaped arrowhead should be drawn. */
+    Square = "Square",
+    /** Indicates a solid square-shaped arrowhead should be drawn. */
+    SolidSquare = "SolidSquare",
+    /** Indicates a bar shaped arrowhead should be drawn. */
+    Bar = "Bar"
+}

package/src/image-editor/base/enum.js

@@ -0,0 +1,198 @@
+/**
+ * An enum representing the file types supported by the image editor.
+ *
+ * @enum {string}
+ */
+export var FileType;
+(function (FileType) {
+    /** The PNG file type. */
+    FileType["Png"] = "Png";
+    /** The JPEG file type. */
+    FileType["Jpeg"] = "Jpeg";
+    /** The SVG file type. */
+    FileType["Svg"] = "Svg";
+})(FileType || (FileType = {}));
+/**
+ * An enumeration representing the direction of an image editor operation.
+ *
+ * @enum {string}
+ */
+export var Direction;
+(function (Direction) {
+    /** The horizontal direction. */
+    Direction["Horizontal"] = "Horizontal";
+    /** The vertical direction. */
+    Direction["Vertical"] = "Vertical";
+})(Direction || (Direction = {}));
+/**
+ * An enumeration representing the type of shape to be added in the image editor.
+ *
+ * @enum {string}
+ */
+export var ShapeType;
+(function (ShapeType) {
+    /** A rectangle shape. */
+    ShapeType["Rectangle"] = "Rectangle";
+    /** An ellipse shape. */
+    ShapeType["Ellipse"] = "Ellipse";
+    /** A line shape. */
+    ShapeType["Line"] = "Line";
+    /** An arrow shape. */
+    ShapeType["Arrow"] = "Arrow";
+    /** A path shape. */
+    ShapeType["Path"] = "Path";
+    /** A text shape. */
+    ShapeType["Text"] = "Text";
+    /** A freehand drawing shape. */
+    ShapeType["FreehandDraw"] = "FreehandDraw";
+})(ShapeType || (ShapeType = {}));
+/**
+ * An enumeration representing the different ways to trigger zooming in the image editor.
+ *
+ * @aspNumberEnum
+ */
+export var ZoomTrigger;
+(function (ZoomTrigger) {
+    /** Zooming triggered by mouse wheel. */
+    ZoomTrigger[ZoomTrigger["MouseWheel"] = 1] = "MouseWheel";
+    /** Zooming triggered by pinch gesture. */
+    ZoomTrigger[ZoomTrigger["Pinch"] = 2] = "Pinch";
+    /** Zooming triggered by command keys. */
+    ZoomTrigger[ZoomTrigger["Commands"] = 4] = "Commands";
+    /** Zooming triggered by toolbar button click. */
+    ZoomTrigger[ZoomTrigger["Toolbar"] = 8] = "Toolbar";
+})(ZoomTrigger || (ZoomTrigger = {}));
+/**
+ * * An enum representing the available themes in the image editor.
+ */
+export var Theme;
+(function (Theme) {
+    /** The Bootstrap 5 theme. */
+    Theme["Bootstrap5"] = "Bootstrap5";
+    /** The dark variant of the Bootstrap 5 theme. */
+    Theme["Bootstrap5Dark"] = "Bootstrap5Dark";
+    /** The Tailwind CSS theme. */
+    Theme["Tailwind"] = "Tailwind";
+    /** The dark variant of the Tailwind CSS theme. */
+    Theme["TailwindDark"] = "TailwindDark";
+    /** The Fluent UI theme. */
+    Theme["Fluent"] = "Fluent";
+    /** The dark variant of the Fluent UI theme. */
+    Theme["FluentDark"] = "FluentDark";
+    /** The Bootstrap 4 theme. */
+    Theme["Bootstrap4"] = "Bootstrap4";
+    /** The Bootstrap theme. */
+    Theme["Bootstrap"] = "Bootstrap";
+    /** The dark variant of the Bootstrap theme. */
+    Theme["BootstrapDark"] = "BootstrapDark";
+    /** The Material Design theme. */
+    Theme["Material"] = "Material";
+    /** The dark variant of the Material Design theme. */
+    Theme["MaterialDark"] = "MaterialDark";
+    /** The Fabric theme. */
+    Theme["Fabric"] = "Fabric";
+    /** The dark variant of the Fabric theme. */
+    Theme["FabricDark"] = "FabricDark";
+    /** The high contrast theme. */
+    Theme["Highcontrast"] = "Highcontrast";
+})(Theme || (Theme = {}));
+/**
+ * An enum representing the available toolbar commands in the image editor.
+ */
+export var ImageEditorCommand;
+(function (ImageEditorCommand) {
+    ImageEditorCommand["Crop"] = "Crop";
+    ImageEditorCommand["Transform"] = "Transform";
+    ImageEditorCommand["Annotate"] = "Annotate";
+    ImageEditorCommand["ZoomIn"] = "ZoomIn";
+    ImageEditorCommand["ZoomOut"] = "ZoomOut";
+    ImageEditorCommand["Open"] = "Open";
+    ImageEditorCommand["Reset"] = "Reset";
+    ImageEditorCommand["Save"] = "Save";
+    ImageEditorCommand["Pan"] = "Pan";
+    ImageEditorCommand["Move"] = "Move";
+    ImageEditorCommand["Pen"] = "Pen";
+    ImageEditorCommand["Line"] = "Line";
+    ImageEditorCommand["Arrow"] = "Arrow";
+    ImageEditorCommand["Path"] = "Path";
+    ImageEditorCommand["Rectangle"] = "Rectangle";
+    ImageEditorCommand["Ellipse"] = "Ellipse";
+    ImageEditorCommand["Text"] = "Text";
+    ImageEditorCommand["CustomSelection"] = "CustomSelection";
+    ImageEditorCommand["CircleSelection"] = "CircleSelection";
+    ImageEditorCommand["SquareSelection"] = "SquareSelection";
+    ImageEditorCommand["RatioSelection"] = "RatioSelection";
+    ImageEditorCommand["RotateLeft"] = "RotateLeft";
+    ImageEditorCommand["RotateRight"] = "RotateRight";
+    ImageEditorCommand["FlipHorizontal"] = "FlipHorizontal";
+    ImageEditorCommand["FlipVertical"] = "FlipVertical";
+})(ImageEditorCommand || (ImageEditorCommand = {}));
+/**
+ * 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 var ImageFilterOption;
+(function (ImageFilterOption) {
+    /** Default filter */
+    ImageFilterOption["Default"] = "Default";
+    /** Chrome filter */
+    ImageFilterOption["Chrome"] = "Chrome";
+    /** Cold filter */
+    ImageFilterOption["Cold"] = "Cold";
+    /** Warm filter */
+    ImageFilterOption["Warm"] = "Warm";
+    /** Grayscale filter */
+    ImageFilterOption["Grayscale"] = "Grayscale";
+    /** Sepia filter */
+    ImageFilterOption["Sepia"] = "Sepia";
+    /** Invert filter */
+    ImageFilterOption["Invert"] = "Invert";
+})(ImageFilterOption || (ImageFilterOption = {}));
+/**
+ * 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 var ImageFinetuneOption;
+(function (ImageFinetuneOption) {
+    /** Adjust the brightness of the image */
+    ImageFinetuneOption["Brightness"] = "Brightness";
+    /** Adjust the contrast of the image */
+    ImageFinetuneOption["Contrast"] = "Contrast";
+    /** Adjust the hue of the image */
+    ImageFinetuneOption["Hue"] = "Hue";
+    /** Adjust the saturation of the image */
+    ImageFinetuneOption["Saturation"] = "Saturation";
+    /** Adjust the exposure of the image */
+    ImageFinetuneOption["Exposure"] = "Exposure";
+    /** Adjust the opacity of the image */
+    ImageFinetuneOption["Opacity"] = "Opacity";
+    /** Adjust the blur of the image */
+    ImageFinetuneOption["Blur"] = "Blur";
+})(ImageFinetuneOption || (ImageFinetuneOption = {}));
+/**
+ * Specifies the type of arrowhead should be drawn.
+ *
+ */
+export var ArrowheadType;
+(function (ArrowheadType) {
+    /** Indicates no arrowhead should be drawn. */
+    ArrowheadType["None"] = "None";
+    /** Indicates a normal triangle-shaped arrowhead should be drawn. */
+    ArrowheadType["Arrow"] = "Arrow";
+    /** Indicates a solid triangle-shaped arrowhead should be drawn. */
+    ArrowheadType["SolidArrow"] = "SolidArrow";
+    /** Indicates a circular-shaped arrowhead should be drawn. */
+    ArrowheadType["Circle"] = "Circle";
+    /** Indicates a solid circular-shaped arrowhead should be drawn. */
+    ArrowheadType["SolidCircle"] = "SolidCircle";
+    /** Indicates a square-shaped arrowhead should be drawn. */
+    ArrowheadType["Square"] = "Square";
+    /** Indicates a solid square-shaped arrowhead should be drawn. */
+    ArrowheadType["SolidSquare"] = "SolidSquare";
+    /** Indicates a bar shaped arrowhead should be drawn. */
+    ArrowheadType["Bar"] = "Bar";
+})(ArrowheadType || (ArrowheadType = {}));

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

@@ -1,5 +1,4 @@
-import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, extend } from '@syncfusion/ej2-base';
-import {ImageFinetuneValue,ZoomTrigger,Point,Theme,ImageEditorCommand,SaveEventArgs,BeforeSaveEventArgs,ZoomEventArgs,PanEventArgs,CropEventArgs,RotateEventArgs,FlipEventArgs,ShapeChangeEventArgs,OpenEventArgs,ToolbarEventArgs,ImageFilterEventArgs,FinetuneEventArgs,ImageEditorClickEventArgs,QuickAccessToolbarEventArgs} from "./image-editor";
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, ModuleDeclaration, extend, isBlazor, BlazorDotnetObject } from '@syncfusion/ej2-base';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -110,8 +109,8 @@ export interface ZoomSettingsModel {
      *
      * By default, this property is set to `null`, which enables all types of zooming.
      *
-     * @aspNumberEnum
      * @default null
+     * @aspNumberEnum
      */
     zoomTrigger?: ZoomTrigger;
 
@@ -119,7 +118,6 @@ export interface ZoomSettingsModel {
      * 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.
      *
@@ -159,6 +157,40 @@ export interface ZoomSettingsModel {
 
 }
 
+/**
+ * Interface for a class SelectionSettings
+ */
+export interface SelectionSettingsModel {
+
+    /**
+     * 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;
+
+}
+
 /**
  * Interface for a class ImageEditor
  */
@@ -229,7 +261,7 @@ export interface ImageEditorModel extends ComponentModel{
      * 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.
@@ -239,20 +271,12 @@ export interface ImageEditorModel extends ComponentModel{
      * - 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)[];
 
@@ -260,15 +284,17 @@ export interface ImageEditorModel extends ComponentModel{
      * 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.
@@ -294,33 +320,54 @@ export interface ImageEditorModel extends ComponentModel{
     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.
@@ -358,6 +405,8 @@ export interface ImageEditorModel extends ComponentModel{
     /**
      * 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.
@@ -371,8 +420,6 @@ export interface ImageEditorModel extends ComponentModel{
      * - 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;
 
@@ -380,6 +427,8 @@ export interface ImageEditorModel extends ComponentModel{
      * 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.
      *
@@ -390,11 +439,24 @@ export interface ImageEditorModel extends ComponentModel{
      * - 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.
      *
@@ -458,6 +520,13 @@ export interface ImageEditorModel extends ComponentModel{
      */
     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.
      *
@@ -481,11 +550,11 @@ export interface ImageEditorModel extends ComponentModel{
 
     /**
      * Event callback that is raised while updating/refreshing the toolbar
+     * 
+     * {% codeBlock src='image-editor/toolbarUpdating/index.md' %}{% endcodeBlock %}
      *
      * @event toolbarUpdating
      *
-     * {% codeBlock src='image-editor/toolbarUpdating/index.md' %}{% endcodeBlock %}
-     *
      */
     toolbarUpdating?: EmitType<ToolbarEventArgs>
 
@@ -518,10 +587,9 @@ export interface ImageEditorModel extends ComponentModel{
     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.
@@ -530,9 +598,29 @@ export interface ImageEditorModel extends ComponentModel{
      * 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>
+     */
+    quickAccessToolbarOpen?: EmitType<QuickAccessToolbarEventArgs>
+
+    /**
+     * Event callback that is raised once the quick access toolbar item is clicked.
+     *
+     * @event quickAccessToolbarItemClick
      *
      */
-    quickAccessToolbarOpening?: EmitType<QuickAccessToolbarEventArgs>
+    quickAccessToolbarItemClick?: EmitType<ClickEventArgs>
 
 }