@syncfusion/ej2-image-editor 20.3.56 → 20.4.38

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

@@ -3,7 +3,68 @@ import { EmitType } from '@syncfusion/ej2-base';
 import { SignatureBase } from '@syncfusion/ej2-inputs';
 import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
 import { OpenEventArgs } from '@syncfusion/ej2-popups';
-import { ImageEditorModel } from './image-editor-model';
+import { ChildProperty } from '@syncfusion/ej2-base';
+import { ImageEditorModel, FinetuneSettingsModel } from './image-editor-model';
+/**
+ * Interface for image finetune values.
+ */
+export interface ImageFinetuneValue {
+    /**
+    * Specifies the minimum value of finetune option.
+    * @default null
+    */
+    min: number;
+    /**
+     * Specifies the maximum value of finetune option.
+     * @default null
+     */
+    max: number;
+    /**
+     * Specifies the default value of finetune option.
+     * @default null
+     */
+    defaultValue: number;
+}
+/**
+ * Interface for image finetune values.
+ */
+export declare class FinetuneSettings extends ChildProperty<FinetuneSettings> {
+    /**
+     * Specifies the brightness level of image.
+     * @default null
+     */
+    brightness: ImageFinetuneValue;
+    /**
+     * Specifies the contrast level image.
+     * @default null
+     */
+    contrast: ImageFinetuneValue;
+    /**
+     * Specifies the hue level image.
+     * @default null
+     */
+    hue: ImageFinetuneValue;
+    /**
+     * Specifies the saturation level image.
+     * @default null
+     */
+    saturation: ImageFinetuneValue;
+    /**
+      * Specifies the exposure level image.
+      * @default null
+      */
+    exposure: ImageFinetuneValue;
+    /**
+     * Specifies the opacity level image.
+     * @default null
+     */
+    opacity: ImageFinetuneValue;
+    /**
+     * Specifies the blur level image.
+     * @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.
@@ -32,7 +93,6 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     private baseImg;
     private textBox;
     private degree;
-    private isUndoRedo;
     private dragCanvas;
     private dragElement;
     private keyHistory;
@@ -55,24 +115,18 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     private pannStart;
     private pannEnd;
     private togglePan;
+    private disablePan;
     private lastX;
     private lastY;
     private dragStart;
-    private dragged;
     private factor;
     private currFlipState;
     private touchEndPoint;
-    private flipMethod;
-    private flipDirection;
     private prevX;
     private currX;
     private prevY;
     private currY;
     private togglePen;
-    private rotateMethod;
-    private isBoldbtn;
-    private isItalicbtn;
-    private lastAction;
     private currentToolbar;
     private textStartPoints;
     private fontSizeColl;
@@ -91,9 +145,27 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     private isTimer;
     private timer;
     private isScreenOriented;
+    private tempObjColl;
+    private isFirstMove;
+    private startTouches;
+    private tempTouches;
+    private adjustmentLevel;
+    private tempAdjustmentLevel;
+    private adjustmentValue;
+    private initialAdjustmentValue;
+    private tempAdjustmentValue;
+    private currentFilter;
+    private tempFilter;
+    private canvasFilter;
+    private tempImageData;
+    private sharpenedImgData;
+    private tempSharpenFilter;
+    private tempBWFilter;
+    private isBrightnessAdjusted;
+    private isInitialLoading;
     /**
      * Defines class/multiple classes separated by a space for customizing Image Editor UI.
-     * default ''
+     * @default ''
      ```html
      * <div id='imageeditor'></div>
      * ```
@@ -107,18 +179,18 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     cssClass: string;
     /**
      * Specifies whether the Image Editor is disabled.
-     * default false
+     * @default false
      */
     disabled: boolean;
     /**
      * Specifies the height of the Image Editor.
-     * default '100%'
+     * @default '100%'
      */
     height: string;
     /**
      * Specifies the theme of the Image Editor. The shape selection appearance will be decided based on this property.
      * The property supports all the built-in themes of Syncfusion.
-     * default 'Bootstrap5'
+     *
      * @isenumeration true
      * @default Theme.Bootstrap5
      * @asptype Theme
@@ -130,17 +202,16 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
      * If the property is defined as empty collection, the toolbar will not be rendered.
      * Suppose the property is not defined in control, an image editor’s toolbar will be rendered with preconfigured toolbar commands.
      * The preconfigured toolbar commands are
-     *  Crop: helps to crop an image as ellipse, square, various ratio aspects, custom selection with resize, drag and drop.
-     *  Annotate: help to insert a shape on image that supports rectangle, ellipse, line, text and freehand drawing with resize, drag and drop, and customize its appearance.
-     *  Transform: helps to rotate and flip an image.
-     *  ZoomIn: performs zoom-in an image.
-     *  ZoomOut: performs zoom-out an image.
-     *  Pan: performs panning once zoomed an image.
-     *  Move: disable the pan action and move to perform other actions such as insert a shape, transform, and more.
-     *  Save: save the modified image.
-     *  Open: open an image to perform editing.
-     *  Reset: reset the modification and restore the original image.
-     * default null
+     * 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.
      ```html
      * <div id='imageeditor'></div>
      * ```
@@ -180,7 +251,7 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     toolbarTemplate: string;
     /**
      * Specifies the width of the Image Editor.
-     * default 100%
+     * @default '100%'
      */
     width: string;
     /**
@@ -266,6 +337,18 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
      * @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.
+     *
+     */
+    finetuneSettings: FinetuneSettingsModel;
     /**
      * Gets or sets the last signature url to maintain the persist state.
      *
@@ -356,6 +439,18 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
      * @event toolbarItemClicked
      */
     toolbarItemClicked: EmitType<ClickEventArgs>;
+    /**
+     * Triggers when applying filter to an image.
+     *
+     * @event imageFiltering
+     */
+    imageFiltering: EmitType<ImageFilterEventArgs>;
+    /**
+     * Triggers when applying fine tune to an image.
+     *
+     * @event fineTuneValueChanging
+     */
+    fineTuneValueChanging: EmitType<FinetuneEventArgs>;
     /**
      *
      * Constructor for creating the widget
@@ -400,6 +495,7 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     onPropertyChanged(newProperties: ImageEditorModel, oldProperties?: ImageEditorModel): void;
     destroy(): void;
     initialize(): void;
+    private updateFinetunes;
     /**
      *
      * This Method will add events to component (element, event, method, current reference)
@@ -414,11 +510,14 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
      * @returns {void}.
      */
     private unwireEvent;
+    private initializeFilter;
     private destroySubComponents;
     private updateTheme;
     private toPascalCase;
     private createCanvas;
     private createToolbar;
+    private createContextualToolbar;
+    private updateContextualToolbar;
     private createBottomToolbar;
     private initBottomToolbar;
     private toolbarTemplateFn;
@@ -447,34 +546,58 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     private getFontSizeItems;
     private initTextToolbarItem;
     private createTextColor;
+    private pushActItemIntoObj;
     private createTextBtn;
     private getFontSizes;
     private getTextAreaWidth;
+    private updateObjColl;
     private applyFontStyle;
     private initZoomToolbarItem;
+    private contextualToolbarClicked;
     private defToolbarClicked;
+    private okBtn;
+    private unselectBtn;
+    private refreshSlider;
+    private updateAdjustment;
+    private updateBrightnessFilter;
+    private autoEnablePan;
+    private setTempFilterValue;
+    private getDefaultFilter;
+    private setAdjustment;
+    private renderSlider;
+    private getCurrAdjustmentValue;
+    private setCurrAdjustmentValue;
     private cancelPan;
     private callMainToolbar;
     private cancelItems;
     private gradient;
     private applyPenDraw;
+    private redrawImgWithObj;
     private refreshToolbar;
+    private getAdjustmentToolbarItem;
+    private getFilterToolbarItem;
     private getPenToolbarItem;
     private initPenToolbarItem;
     private createPenColor;
     private createPenBtn;
     private setPenStroke;
+    private getPenStroke;
+    private initAdjustmentToolbarItem;
+    private initFilterToolbarItem;
+    private createCanvasFilter;
     private updateCanvas;
     private imageOnLoad;
     private refreshActiveObj;
     private redrawText;
     private setTextSelection;
-    private updateUndoRedoColl;
     private fileSelect;
     private findTextPoint;
     private getStrokeWidth;
     private updateToolbarItems;
     private setTimer;
+    private targetTouches;
+    private calculateScale;
+    private getDistance;
     private touchStartHandler;
     private mouseDownEventHandler;
     private mouseMoveEventHandler;
@@ -484,10 +607,12 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     private canvasMouseDownHandler;
     private canvasMouseMoveHandler;
     private canvasMouseUpHandler;
+    private setPanPoints;
     private textKeyDown;
     private adjustToScreen;
     private screenOrientation;
     private windowResizeHandler;
+    private drawPanImg;
     private redrawImg;
     private updateContext;
     private scaleNonUniform;
@@ -496,6 +621,7 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     private redraw;
     private applyCurrActObj;
     private updateTextFromTextArea;
+    private setTextBoxStylesToActObj;
     private redrawActObj;
     private setTextBoxPos;
     private setTextBoxPoints;
@@ -547,7 +673,6 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     private addLetter;
     private updateFontStyles;
     private updateInMemoryCanvas;
-    private drawBaseImg;
     private calcPrevRatio;
     private textFlipDegree;
     private rotateText;
@@ -564,7 +689,27 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     private drawPen;
     private getObjDetails;
     private isPointsInRange;
+    private updateInMemoryContext;
+    private clearActObj;
     private rotateMultiple;
+    private setBrightness;
+    private setContrast;
+    private setHue;
+    private setSaturation;
+    private setOpacity;
+    private setBlur;
+    private setExposure;
+    private setFilter;
+    private setBlackAndWhiteFilter;
+    private setSharpness;
+    private replaceBWSharpenData;
+    private updateBWSharpness;
+    private getSharpenData;
+    private getFilterValue;
+    private setFilterValue;
+    private getSaturationFilterValue;
+    private setSaturationFilterValue;
+    private getBlackAndWhiteData;
     /**
      * Clear a current selection.
      *
@@ -578,7 +723,6 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
      * @returns {boolean}.
      */
     crop(): boolean;
-    private updateInMemoryContext;
     /**
      * Flips an image by horizontally or vertically.
      *
@@ -662,7 +806,7 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
      *
      * @param {boolean} value - Specifies a value whether enable or disable freehand drawing.
      *
-     * @returns {void}.
+     *  @returns {void}.
      */
     freehandDraw(value: boolean): void;
     /**
@@ -833,6 +977,22 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
      * @returns {void}.
      */
     update(): void;
+    /**
+     * To apply the filters to an image
+     *
+     * @param {ImageFilterOptions } filterOption - Specifies the filter options to the image.
+     * @returns {void}.
+     */
+    applyImageFilter(filterOption: ImageFilterOptions): void;
+    /**
+     * To apply the filters to an image
+     *
+     * @param {ImageFinetuneOptions } finetuneOption - Specifies the finetune options to the image.
+     * @param {number } value - Specifies the value for finetuning the image.
+     * @returns {void}.
+     *
+     */
+    finetuneImage(finetuneOption: ImageFinetuneOptions, value: number): void;
     /**
      * To check whether the undo collection is empty or not.
      *
@@ -907,7 +1067,7 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     /**
      * To save the signature with the given file type and file name.
      *
-     * @param {SignatureFileType} type - specify type of the file to be saved a signature.
+     * @param {FileType} type - specify type of the file to be saved a signature.
      * @param {string} fileName - specify name of the file to be saved a signature.
      *
      * @returns {void}.
@@ -924,7 +1084,7 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     /**
      * Returns the persistence data for component.
      *
-     * @returns any.
+     * @returns {any}.
      * @private
      */
     getLocalData(): any;
@@ -949,6 +1109,14 @@ export declare type Theme = 'Bootstrap5' | 'Bootstrap5Dark' | 'Tailwind' | 'Tail
  * Defines the toolbar items for Image Editor.
  */
 export declare type ImageEditorCommands = 'Crop' | 'Transform' | 'Annotate' | 'ZoomIn' | 'ZoomOut' | 'Open' | 'Reset' | 'Save' | 'Pan' | 'Move' | 'Pen' | 'Line' | 'Rectangle' | 'Ellipse' | 'Text' | 'CustomSelection' | 'CircleSelection' | 'SquareSelection' | 'RatioSelection' | 'RotateLeft' | 'RotateRight' | 'FlipHorizontal' | 'FlipVertical';
+/**
+ * Defines the image filter options
+ */
+export declare type ImageFilterOptions = 'Default' | 'Chrome' | 'Cold' | 'Warm' | 'Gray Scale' | 'Sepia' | 'Invert';
+/**
+ * Defines the image filter options
+ */
+export declare type ImageFinetuneOptions = 'Brightness' | 'Contrast' | 'Hue' | 'Saturation' | 'Exposure' | 'Opacity' | 'Blur';
 /**
  * Interface for zoom transition occur in the imageEditor.
  */
@@ -1153,3 +1321,25 @@ export interface ShapeSettings {
      */
     color?: string;
 }
+/**
+ * Interface for filter option for the image.
+ */
+export interface ImageFilterEventArgs {
+    /**
+     * Specifies the when applying filter to an image.
+     */
+    filter: ImageFilterOptions;
+}
+/**
+ * Interface for filter option for the image.
+ */
+export interface FinetuneEventArgs {
+    /**
+     * Specifies the type of fine tunes.
+     */
+    finetune: ImageFinetuneOptions;
+    /**
+     * Specifies the value of the fine tunes.
+     */
+    value: number;
+}