@syncfusion/ej2-image-editor 21.2.6 → 22.1.34

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.
@@ -238,21 +270,13 @@ export interface ImageEditorModel extends ComponentModel{
      * - 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" }
-     * ]
+     * 
+     * {% 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>
 
 }