@syncfusion/ej2-image-editor 24.2.8 → 25.1.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/CHANGELOG.md +3 -51
  2. package/dist/ej2-image-editor.umd.min.js +2 -2
  3. package/dist/ej2-image-editor.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-image-editor.es2015.js +942 -1874
  5. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es5.js +974 -1923
  7. package/dist/es6/ej2-image-editor.es5.js.map +1 -1
  8. package/dist/global/ej2-image-editor.min.js +2 -2
  9. package/dist/global/ej2-image-editor.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +12 -12
  12. package/src/image-editor/action/crop.js +9 -45
  13. package/src/image-editor/action/draw.js +52 -207
  14. package/src/image-editor/action/export.js +6 -35
  15. package/src/image-editor/action/freehand-draw.js +26 -80
  16. package/src/image-editor/action/selection.js +122 -326
  17. package/src/image-editor/action/shape.js +130 -242
  18. package/src/image-editor/action/transform.d.ts +0 -1
  19. package/src/image-editor/action/transform.js +77 -289
  20. package/src/image-editor/action/undo-redo.js +32 -101
  21. package/src/image-editor/base/image-editor-model.d.ts +1 -1
  22. package/src/image-editor/base/image-editor.d.ts +51 -42
  23. package/src/image-editor/base/image-editor.js +302 -423
  24. package/src/image-editor/renderer/toolbar.d.ts +1 -0
  25. package/src/image-editor/renderer/toolbar.js +228 -185
  26. package/styles/bootstrap-dark.css +0 -12
  27. package/styles/bootstrap.css +0 -12
  28. package/styles/bootstrap4.css +0 -12
  29. package/styles/bootstrap5-dark.css +0 -12
  30. package/styles/bootstrap5.css +0 -12
  31. package/styles/fabric-dark.css +0 -12
  32. package/styles/fabric.css +0 -12
  33. package/styles/fluent-dark.css +0 -12
  34. package/styles/fluent.css +0 -12
  35. package/styles/highcontrast-light.css +0 -12
  36. package/styles/highcontrast.css +0 -12
  37. package/styles/image-editor/_bds-definition.scss +21 -0
  38. package/styles/image-editor/_bootstrap-dark-definition.scss +0 -1
  39. package/styles/image-editor/_bootstrap-definition.scss +0 -1
  40. package/styles/image-editor/_bootstrap4-definition.scss +0 -1
  41. package/styles/image-editor/_bootstrap5-definition.scss +0 -1
  42. package/styles/image-editor/_fabric-dark-definition.scss +0 -1
  43. package/styles/image-editor/_fabric-definition.scss +0 -1
  44. package/styles/image-editor/_fluent-definition.scss +0 -1
  45. package/styles/image-editor/_fusionnew-definition.scss +0 -1
  46. package/styles/image-editor/_highcontrast-definition.scss +0 -1
  47. package/styles/image-editor/_highcontrast-light-definition.scss +0 -1
  48. package/styles/image-editor/_layout.scss +2 -32
  49. package/styles/image-editor/_material-dark-definition.scss +0 -1
  50. package/styles/image-editor/_material-definition.scss +0 -1
  51. package/styles/image-editor/_material3-definition.scss +2 -3
  52. package/styles/image-editor/_tailwind-definition.scss +0 -1
  53. package/styles/image-editor/bootstrap-dark.css +0 -12
  54. package/styles/image-editor/bootstrap.css +0 -12
  55. package/styles/image-editor/bootstrap4.css +0 -12
  56. package/styles/image-editor/bootstrap5-dark.css +0 -12
  57. package/styles/image-editor/bootstrap5.css +0 -12
  58. package/styles/image-editor/fabric-dark.css +0 -12
  59. package/styles/image-editor/fabric.css +0 -12
  60. package/styles/image-editor/fluent-dark.css +0 -12
  61. package/styles/image-editor/fluent.css +0 -12
  62. package/styles/image-editor/highcontrast-light.css +0 -12
  63. package/styles/image-editor/highcontrast.css +0 -12
  64. package/styles/image-editor/icons/_bds.scss +411 -0
  65. package/styles/image-editor/material-dark.css +0 -12
  66. package/styles/image-editor/material.css +0 -12
  67. package/styles/image-editor/material3-dark.css +4 -25
  68. package/styles/image-editor/material3.css +4 -25
  69. package/styles/image-editor/tailwind-dark.css +2 -15
  70. package/styles/image-editor/tailwind.css +2 -15
  71. package/styles/material-dark.css +0 -12
  72. package/styles/material.css +0 -12
  73. package/styles/material3-dark.css +4 -25
  74. package/styles/material3.css +4 -25
  75. package/styles/tailwind-dark.css +2 -15
  76. package/styles/tailwind.css +2 -15
@@ -1,4 +1,4 @@
1
- import { isNullOrUndefined, extend, isBlazor } from '@syncfusion/ej2-base';
1
+ import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';
2
2
  var UndoRedo = /** @class */ (function () {
3
3
  function UndoRedo(parent) {
4
4
  this.undoRedoStep = 0;
@@ -99,33 +99,22 @@ var UndoRedo = /** @class */ (function () {
99
99
  var parent = this.parent;
100
100
  refreshToolbar = refreshToolbar ? refreshToolbar : false;
101
101
  if (refreshToolbar) {
102
- if (!isBlazor()) {
103
- parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: true } });
104
- }
102
+ parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: true } });
105
103
  this.tempUndoRedoColl = extend([], this.appliedUndoRedoColl, [], true);
106
104
  this.tempUndoRedoStep = this.undoRedoStep;
107
105
  }
108
- else if (!isBlazor()) {
109
- parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
110
- }
106
+ parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
111
107
  this.undoRedoColl = this.undoRedoColl.slice(0, this.undoRedoStep);
112
108
  this.appliedUndoRedoColl = this.appliedUndoRedoColl.slice(0, this.undoRedoStep);
113
109
  parent.isUndoRedo = parent.currObjType.isUndoAction = false;
114
- if (!isBlazor()) {
115
- parent.notify('toolbar', { prop: 'enable-disable-btns' });
116
- }
117
- else {
118
- parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
119
- }
110
+ parent.notify('toolbar', { prop: 'enable-disable-btns' });
120
111
  };
121
112
  UndoRedo.prototype.updateCurrUrc = function (type) {
122
113
  var parent = this.parent;
123
114
  if (parent.isResize || this.isPreventing) {
124
115
  return;
125
116
  }
126
- if (!isBlazor()) {
127
- parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
128
- }
117
+ parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
129
118
  if (type === 'ok') {
130
119
  parent.notify('draw', { prop: 'setShapeTextInsert', onPropertyChange: false, value: { bool: false } });
131
120
  var collection = this.tempUndoRedoColl.length > 0 ?
@@ -185,12 +174,7 @@ var UndoRedo = /** @class */ (function () {
185
174
  this.undoRedoColl = extend([], this.appliedUndoRedoColl, [], true);
186
175
  if (type === 'ok') {
187
176
  this.undoRedoStep = this.undoRedoColl.length;
188
- if (!isBlazor()) {
189
- parent.notify('toolbar', { prop: 'enable-disable-btns' });
190
- }
191
- else {
192
- parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
193
- }
177
+ parent.notify('toolbar', { prop: 'enable-disable-btns' });
194
178
  }
195
179
  if (parent.transform.zoomFactor > 0) {
196
180
  parent.togglePan = true;
@@ -216,25 +200,18 @@ var UndoRedo = /** @class */ (function () {
216
200
  this.undoRedoStep = this.tempUndoRedoStep;
217
201
  this.tempUndoRedoColl = [];
218
202
  this.tempUndoRedoStep = 0;
219
- if (!isBlazor()) {
220
- parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
221
- }
203
+ parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
222
204
  }
223
205
  };
224
206
  UndoRedo.prototype.refreshToolbarActions = function () {
225
207
  var parent = this.parent;
226
- if (!isBlazor()) {
227
- if (parent.activeObj.shape) {
228
- parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
229
- isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
230
- parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
231
- }
232
- else {
233
- parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
234
- }
208
+ if (parent.activeObj.shape) {
209
+ parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
210
+ isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
211
+ parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
235
212
  }
236
- else if (isNullOrUndefined(parent.activeObj.shape)) {
237
- parent.updateToolbar(parent.element, 'imageLoaded');
213
+ else {
214
+ parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
238
215
  }
239
216
  };
240
217
  UndoRedo.prototype.applyCurrentChanges = function () {
@@ -244,7 +221,7 @@ var UndoRedo = /** @class */ (function () {
244
221
  parent.togglePan = false;
245
222
  parent.notify('selection', { prop: 'setDragCanvas', value: { bool: false } });
246
223
  }
247
- if (parent.element.querySelector('.e-contextual-toolbar-wrapper') && !isBlazor()) {
224
+ if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
248
225
  parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
249
226
  }
250
227
  if (parent.togglePen) {
@@ -276,14 +253,9 @@ var UndoRedo = /** @class */ (function () {
276
253
  }
277
254
  parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
278
255
  this.undoRedoStep--;
279
- if (!isBlazor()) {
280
- parent.notify('toolbar', { prop: 'enable-disable-btns' });
281
- if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
282
- parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
283
- }
284
- }
285
- else {
286
- parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
256
+ parent.notify('toolbar', { prop: 'enable-disable-btns' });
257
+ if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
258
+ parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
287
259
  }
288
260
  parent.isUndoRedo = true;
289
261
  var obj = this.undoRedoColl[this.undoRedoStep];
@@ -411,12 +383,7 @@ var UndoRedo = /** @class */ (function () {
411
383
  if (this.undoRedoStep < this.appliedUndoRedoColl.length) {
412
384
  this.refreshToolbarActions();
413
385
  this.undoRedoStep++;
414
- if (!isBlazor()) {
415
- parent.notify('toolbar', { prop: 'enable-disable-btns' });
416
- }
417
- else {
418
- parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
419
- }
386
+ parent.notify('toolbar', { prop: 'enable-disable-btns' });
420
387
  parent.isUndoRedo = true;
421
388
  var obj = this.undoRedoColl[this.undoRedoStep - 1];
422
389
  if (this.undoRedoColl.length === this.undoRedoStep) {
@@ -433,7 +400,7 @@ var UndoRedo = /** @class */ (function () {
433
400
  parent.cropObj = extend({}, obj.currentCropObj, {}, true);
434
401
  parent.afterCropActions = obj.currentObj.afterCropActions;
435
402
  this.lowerContext.filter = obj.currentObj.filter;
436
- if (!isBlazor() && parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
403
+ if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
437
404
  parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
438
405
  }
439
406
  parent.notify('filter', { prop: 'setAdjustmentLevel', onPropertyChange: false, value: { adjustmentLevel: obj.currentObj.adjustmentLevel } });
@@ -705,12 +672,7 @@ var UndoRedo = /** @class */ (function () {
705
672
  this.upperContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
706
673
  this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
707
674
  parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
708
- if (!isBlazor()) {
709
- parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
710
- }
711
- else {
712
- parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
713
- }
675
+ parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
714
676
  var textArea = parent.textArea;
715
677
  textArea.style.display = 'block';
716
678
  textArea.style.fontFamily = obj.textSettings.fontFamily;
@@ -772,40 +734,24 @@ var UndoRedo = /** @class */ (function () {
772
734
  parent.notify('selection', { prop: 'setDragCanvas', value: { bool: true } });
773
735
  }
774
736
  parent.notify('draw', { prop: 'setCancelAction', onPropertyChange: false, value: { bool: false } });
775
- if (!isBlazor()) {
776
- if (parent.activeObj.shape && parent.activeObj.shape.split('-')[0] === 'crop') {
777
- parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
778
- isApplyBtn: true, isCropping: true, isZooming: null, cType: null } });
779
- }
780
- else {
781
- parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
782
- }
783
- parent.notify('toolbar', { prop: 'enable-disable-btns' });
737
+ if (parent.activeObj.shape && parent.activeObj.shape.split('-')[0] === 'crop') {
738
+ parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
739
+ isApplyBtn: true, isCropping: true, isZooming: null, cType: null } });
784
740
  }
785
- else if (isNullOrUndefined(parent.activeObj.shape) || parent.activeObj.shape.split('-')[0] !== 'crop') {
786
- parent.updateToolbar(parent.element, 'imageLoaded');
787
- parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
741
+ else {
742
+ parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
788
743
  }
744
+ parent.notify('toolbar', { prop: 'enable-disable-btns' });
789
745
  if (document.getElementById(parent.element.id + '_quickAccessToolbarArea')) {
790
746
  document.getElementById(parent.element.id + '_quickAccessToolbarArea').style.display = 'none';
791
747
  }
792
- if (!isBlazor()) {
793
- parent.notify('toolbar', { prop: 'enable-disable-btns' });
794
- }
795
- else {
796
- parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
797
- }
748
+ parent.notify('toolbar', { prop: 'enable-disable-btns' });
798
749
  if (parent.transform.degree !== 0) {
799
750
  parent.notify('transform', { prop: 'drawPannedImage', onPropertyChange: false,
800
751
  value: { xDiff: 0, yDiff: 0 } });
801
752
  }
802
753
  parent.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.lowerContext.filter } });
803
754
  parent.currObjType.isCustomCrop = false;
804
- if (isBlazor() && parent.events && parent.events.historyChanged.hasDelegate === true) {
805
- var imageAction = this.getImageAction(operation);
806
- var args = { length: this.undoRedoColl.length, index: this.undoRedoStep, actionTrigger: isUndo ? 'Undo' : 'Redo', imageAction: imageAction };
807
- parent.dotNetRef.invokeMethodAsync('OnHistoryChangedAsync', args);
808
- }
809
755
  };
810
756
  UndoRedo.prototype.getImageAction = function (operation) {
811
757
  if (['brightness', 'contrast', 'saturation', 'opacity', 'blur', 'hue'].indexOf(operation) !== -1) {
@@ -886,17 +832,7 @@ var UndoRedo = /** @class */ (function () {
886
832
  previousSelPointColl: previousSelPointColl, currentSelPointColl: currentObj.selPointColl,
887
833
  previousCropObj: previousCropObj, currentCropObj: extend({}, parent.cropObj, {}, true),
888
834
  previousText: previousText, currentText: currentText, filter: previousFilter, isCircleCrop: isCircleCrop });
889
- if (!isBlazor()) {
890
- parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
891
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
892
- }
893
- else if (parent.currentToolbar !== 'pen-toolbar') {
894
- var toolbarValue = null;
895
- if (parent.currentToolbar === 'text-toolbar' && operation === 'textAreaCustomization') {
896
- toolbarValue = 'textAreaClicked';
897
- }
898
- parent.updateToolbar(parent.element, 'enableDisableToolbarBtn', toolbarValue);
899
- }
835
+ parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
900
836
  }
901
837
  };
902
838
  UndoRedo.prototype.updateUrObj = function (objColl, operation) {
@@ -952,15 +888,10 @@ var UndoRedo = /** @class */ (function () {
952
888
  parent.objColl.pop();
953
889
  parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
954
890
  parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
955
- if (!isBlazor()) {
956
- parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
957
- isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
958
- parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
959
- isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
960
- }
961
- else {
962
- parent.updateToolbar(parent.element, 'imageLoaded');
963
- }
891
+ parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
892
+ isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
893
+ parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
894
+ isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
964
895
  };
965
896
  UndoRedo.prototype.getZeroZoomObjPointValue = function (obj, point) {
966
897
  var parent = this.parent;
@@ -1,4 +1,4 @@
1
- import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, ModuleDeclaration, extend, isBlazor, BlazorDotnetObject } from '@syncfusion/ej2-base';
1
+ import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, ModuleDeclaration, extend } from '@syncfusion/ej2-base';
2
2
  import {ComponentModel} from '@syncfusion/ej2-base';
3
3
 
4
4
  /**
@@ -1,4 +1,4 @@
1
- import { Component, INotifyPropertyChanged, ModuleDeclaration, BlazorDotnetObject } from '@syncfusion/ej2-base';
1
+ import { Component, INotifyPropertyChanged, ModuleDeclaration } from '@syncfusion/ej2-base';
2
2
  import { EmitType } from '@syncfusion/ej2-base';
3
3
  import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
4
4
  import { ChildProperty } from '@syncfusion/ej2-base';
@@ -271,8 +271,6 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
271
271
  /** @hidden */
272
272
  canvasFilter: string;
273
273
  /** @hidden */
274
- dotNetRef: BlazorDotnetObject;
275
- /** @hidden */
276
274
  toolbarHeight: number;
277
275
  /** @hidden */
278
276
  events: any;
@@ -878,9 +876,11 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
878
876
  /**
879
877
  * Clears the current selection performed in the image editor.
880
878
  *
879
+ * @param { boolean } resetCrop - Specifies to reset last cropped image.
880
+ *
881
881
  * @returns {void}.
882
882
  */
883
- clearSelection(): void;
883
+ clearSelection(resetCrop?: boolean): void;
884
884
  /**
885
885
  * Crops an image based on the selection done in the image editor.
886
886
  *
@@ -1040,10 +1040,11 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
1040
1040
  * @param {string} strokeColor - Specifies the stroke color of ellipse.
1041
1041
  * @param {string} fillColor - Specifies the fill color of the ellipse.
1042
1042
  * @param {number} degree - Specifies the degree to rotate the ellipse.
1043
+ * @param {boolean} isSelected - Specifies to show the ellipse in the selected state.
1043
1044
  * @returns {boolean}.
1044
1045
  *
1045
1046
  */
1046
- drawEllipse(x?: number, y?: number, radiusX?: number, radiusY?: number, strokeWidth?: number, strokeColor?: string, fillColor?: string, degree?: number): boolean;
1047
+ drawEllipse(x?: number, y?: number, radiusX?: number, radiusY?: number, strokeWidth?: number, strokeColor?: string, fillColor?: string, degree?: number, isSelected?: boolean): boolean;
1047
1048
  /**
1048
1049
  * Draw line on an image.
1049
1050
  *
@@ -1053,9 +1054,10 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
1053
1054
  * @param {number} endY - Specifies end point y-coordinates of the line.
1054
1055
  * @param {number} strokeWidth - Specifies the stroke width of line.
1055
1056
  * @param {string} strokeColor - Specifies the stroke color of line.
1057
+ * @param {boolean} isSelected - Specifies to show the line in the selected state.
1056
1058
  * @returns {boolean}.
1057
1059
  */
1058
- drawLine(startX?: number, startY?: number, endX?: number, endY?: number, strokeWidth?: number, strokeColor?: string): boolean;
1060
+ drawLine(startX?: number, startY?: number, endX?: number, endY?: number, strokeWidth?: number, strokeColor?: string, isSelected?: boolean): boolean;
1059
1061
  /**
1060
1062
  * Draw arrow on an image.
1061
1063
  *
@@ -1067,18 +1069,20 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
1067
1069
  * @param {string} strokeColor - Specifies the stroke color of arrow.
1068
1070
  * @param {ArrowheadType} arrowStart – Specifies the type of arrowhead for start position. The default value is ‘None’.
1069
1071
  * @param {ArrowheadType} arrowEnd – Specifies the type of arrowhead for end position. The default value is ‘SolidArrow’.
1072
+ * @param {boolean} isSelected - Specifies to show the arrow in the selected state.
1070
1073
  * @returns {boolean}.
1071
1074
  */
1072
- drawArrow(startX?: number, startY?: number, endX?: number, endY?: number, strokeWidth?: number, strokeColor?: string, arrowStart?: ArrowheadType, arrowEnd?: ArrowheadType): boolean;
1075
+ drawArrow(startX?: number, startY?: number, endX?: number, endY?: number, strokeWidth?: number, strokeColor?: string, arrowStart?: ArrowheadType, arrowEnd?: ArrowheadType, isSelected?: boolean): boolean;
1073
1076
  /**
1074
1077
  * Draw path on an image.
1075
1078
  *
1076
1079
  * @param {Point[]} pointColl – Specifies collection of start and end x, y-coordinates of path.
1077
1080
  * @param {number} strokeWidth - Specifies the stroke width of path.
1078
1081
  * @param {string} strokeColor - Specifies the stroke color of path.
1082
+ * @param {boolean} isSelected - Specifies to show the path in the selected state.
1079
1083
  * @returns {boolean}.
1080
1084
  */
1081
- drawPath(pointColl: Point[], strokeWidth?: number, strokeColor?: string, opacity?: number): boolean;
1085
+ drawPath(pointColl: Point[], strokeWidth?: number, strokeColor?: string, isSelected?: boolean): boolean;
1082
1086
  /**
1083
1087
  * Draw a rectangle on an image.
1084
1088
  *
@@ -1090,9 +1094,10 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
1090
1094
  * @param {string} strokeColor - Specifies the stroke color of rectangle.
1091
1095
  * @param {string} fillColor - Specifies the fill color of the rectangle.
1092
1096
  * @param {number} degree - Specifies the degree to rotate the rectangle.
1097
+ * @param {boolean} isSelected - Specifies to show the rectangle in the selected state.
1093
1098
  * @returns {boolean}.
1094
1099
  */
1095
- drawRectangle(x?: number, y?: number, width?: number, height?: number, strokeWidth?: number, strokeColor?: string, fillColor?: string, degree?: number): boolean;
1100
+ drawRectangle(x?: number, y?: number, width?: number, height?: number, strokeWidth?: number, strokeColor?: string, fillColor?: string, degree?: number, isSelected?: boolean): boolean;
1096
1101
  /**
1097
1102
  * Draw a text on an image.
1098
1103
  *
@@ -1106,10 +1111,11 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
1106
1111
  * @param {boolean} bold - Specifies whether the text is bold or not.
1107
1112
  * @param {boolean} italic - Specifies whether the text is italic or not.
1108
1113
  * @param {string} color - Specifies font color of the text.
1114
+ * @param {boolean} isSelected - Specifies to show the text in the selected state.
1109
1115
  * @returns {boolean}.
1110
1116
  *
1111
1117
  */
1112
- drawText(x?: number, y?: number, text?: string, fontFamily?: string, fontSize?: number, bold?: boolean, italic?: boolean, color?: string): boolean;
1118
+ drawText(x?: number, y?: number, text?: string, fontFamily?: string, fontSize?: number, bold?: boolean, italic?: boolean, color?: string, isSelected?: boolean): boolean;
1113
1119
  /**
1114
1120
  * Draw an image as annotation on an image.
1115
1121
  *
@@ -1122,10 +1128,11 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
1122
1128
  * @param {boolean} isAspectRatio - Specifies whether to maintain aspect ratio or not.
1123
1129
  * @param {number} degree - Specifies the degree to rotate the image.
1124
1130
  * @param {number} opacity - Specifies the value for the image.
1131
+ * @param {boolean} isSelected - Specifies to show the image in the selected state.
1125
1132
  * @returns {boolean}.
1126
1133
  *
1127
1134
  */
1128
- drawImage(data: string | ImageData, x?: number, y?: number, width?: number, height?: number, isAspectRatio?: boolean, degree?: number, opacity?: number): boolean;
1135
+ drawImage(data: string | ImageData, x?: number, y?: number, width?: number, height?: number, isAspectRatio?: boolean, degree?: number, opacity?: number, isSelected?: boolean): boolean;
1129
1136
  /**
1130
1137
  * Select a shape based on the given shape id.
1131
1138
  * Use 'getShapeSettings' method to get the shape id which is then passed to perform selection.
@@ -1262,10 +1269,11 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
1262
1269
  * {% codeBlock src='image-editor/updateShape/index.md' %}{% endcodeBlock %}
1263
1270
  *
1264
1271
  * @param {ShapeSettings} setting - Specifies the shape settings to be updated for the shape on an image.
1272
+ * @param {boolean} isSelected - Specifies to show the shape in the selected state.
1265
1273
  * @returns {boolean}.
1266
1274
  *
1267
1275
  */
1268
- updateShape(setting: ShapeSettings): boolean;
1276
+ updateShape(setting: ShapeSettings, isSelected?: boolean): boolean;
1269
1277
  /**
1270
1278
  * Duplicates a shape based on the given shape ID in the ImageEditor.
1271
1279
  * Use 'getShapeSettings' method to get the shape and then pass a shapeId from the returned shape to clone a shape.
@@ -1275,6 +1283,36 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
1275
1283
  *
1276
1284
  */
1277
1285
  cloneShape(shapeId: string): boolean;
1286
+ /**
1287
+ * Update filter to the canvas in the ImageEditor.
1288
+ *
1289
+ * @param {ImageFilterOption } filterOption - Specifies the filter options to the image.
1290
+ *
1291
+ * @returns {string}.
1292
+ *
1293
+ */
1294
+ getImageFilter(filterOption: ImageFilterOption): string;
1295
+ /**
1296
+ * Enable text area editing in the ImageEditor.
1297
+ *
1298
+ * @returns {void}.
1299
+ *
1300
+ */
1301
+ enableTextEditing(): void;
1302
+ /**
1303
+ * Specifies if it's possible to undo the last recent action made in an Image Editor.
1304
+ *
1305
+ * @returns {boolean}.
1306
+ *
1307
+ */
1308
+ canUndo(): boolean;
1309
+ /**
1310
+ * Specifies if it's possible to redo the last recent action made in an Image Editor.
1311
+ *
1312
+ * @returns {boolean}.
1313
+ *
1314
+ */
1315
+ canRedo(): boolean;
1278
1316
  private toolbarTemplateFn;
1279
1317
  private quickAccessToolbarTemplateFn;
1280
1318
  private templateParser;
@@ -1282,6 +1320,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
1282
1320
  private getFinetuneOption;
1283
1321
  private setPenStroke;
1284
1322
  private updateFreehandDrawColorChange;
1323
+ private getUndoRedoColl;
1285
1324
  private updateImageTransformColl;
1286
1325
  private setInitialZoomState;
1287
1326
  /**
@@ -1528,36 +1567,6 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
1528
1567
  */
1529
1568
  getRotatedCanvasDim(width: number, height: number, angle: number): Dimension;
1530
1569
  private getStraightenFlipState;
1531
- /**
1532
- * To Initialize the component rendering
1533
- *
1534
- * @private
1535
- * @param {HTMLCanvasElement} element - Specifies the canvas element.
1536
- * @param {BlazorDotnetObject} dotnetRef - Specifies for blazor client to server communication.
1537
- * @returns {void}
1538
- */
1539
- initializeImageEditor(element: HTMLDivElement, dotnetRef?: BlazorDotnetObject): void;
1540
- private prerender;
1541
1570
  private initializeZoomSettings;
1542
1571
  private initializeThemeColl;
1543
- /**
1544
- * Get the square point for path.
1545
- *
1546
- * @param { HTMLDivElement } element - Specifies element.
1547
- * @param { string } type - Specifies the type.
1548
- * @param { string } value - Specifies the value.
1549
- * @hidden
1550
- * @private
1551
- * @returns {void}.
1552
- */
1553
- updateToolbar(element: HTMLDivElement, type: string, value?: string): void;
1554
- /**
1555
- * Trigger the shapeChanging event for after the shape applied.
1556
- *
1557
- * @param { ShapeChangeEventArgs } shapeChangedArgs - Specifies the shapeChaning event args.
1558
- * @hidden
1559
- * @returns {void}.
1560
- */
1561
- triggerShapeChanged(shapeChangedArgs: ShapeChangeEventArgs): void;
1562
- private triggerActionComplete;
1563
1572
  }