@syncfusion/ej2-image-editor 24.2.8 → 25.1.37

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 (77) hide show
  1. package/CHANGELOG.md +5 -45
  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 +958 -1922
  5. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es5.js +993 -1974
  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 +133 -242
  18. package/src/image-editor/action/transform.d.ts +0 -1
  19. package/src/image-editor/action/transform.js +80 -291
  20. package/src/image-editor/action/undo-redo.d.ts +0 -1
  21. package/src/image-editor/action/undo-redo.js +32 -127
  22. package/src/image-editor/base/image-editor-model.d.ts +1 -1
  23. package/src/image-editor/base/image-editor.d.ts +51 -42
  24. package/src/image-editor/base/image-editor.js +316 -425
  25. package/src/image-editor/renderer/toolbar.d.ts +1 -0
  26. package/src/image-editor/renderer/toolbar.js +228 -207
  27. package/styles/bootstrap-dark.css +0 -12
  28. package/styles/bootstrap.css +0 -12
  29. package/styles/bootstrap4.css +0 -12
  30. package/styles/bootstrap5-dark.css +0 -12
  31. package/styles/bootstrap5.css +0 -12
  32. package/styles/fabric-dark.css +0 -12
  33. package/styles/fabric.css +0 -12
  34. package/styles/fluent-dark.css +0 -12
  35. package/styles/fluent.css +0 -12
  36. package/styles/highcontrast-light.css +0 -12
  37. package/styles/highcontrast.css +0 -12
  38. package/styles/image-editor/_bds-definition.scss +21 -0
  39. package/styles/image-editor/_bootstrap-dark-definition.scss +0 -1
  40. package/styles/image-editor/_bootstrap-definition.scss +0 -1
  41. package/styles/image-editor/_bootstrap4-definition.scss +0 -1
  42. package/styles/image-editor/_bootstrap5-definition.scss +0 -1
  43. package/styles/image-editor/_fabric-dark-definition.scss +0 -1
  44. package/styles/image-editor/_fabric-definition.scss +0 -1
  45. package/styles/image-editor/_fluent-definition.scss +0 -1
  46. package/styles/image-editor/_fusionnew-definition.scss +0 -1
  47. package/styles/image-editor/_highcontrast-definition.scss +0 -1
  48. package/styles/image-editor/_highcontrast-light-definition.scss +0 -1
  49. package/styles/image-editor/_layout.scss +5 -32
  50. package/styles/image-editor/_material-dark-definition.scss +0 -1
  51. package/styles/image-editor/_material-definition.scss +0 -1
  52. package/styles/image-editor/_material3-definition.scss +2 -3
  53. package/styles/image-editor/_tailwind-definition.scss +0 -1
  54. package/styles/image-editor/bootstrap-dark.css +0 -12
  55. package/styles/image-editor/bootstrap.css +0 -12
  56. package/styles/image-editor/bootstrap4.css +0 -12
  57. package/styles/image-editor/bootstrap5-dark.css +0 -12
  58. package/styles/image-editor/bootstrap5.css +0 -12
  59. package/styles/image-editor/fabric-dark.css +0 -12
  60. package/styles/image-editor/fabric.css +0 -12
  61. package/styles/image-editor/fluent-dark.css +0 -12
  62. package/styles/image-editor/fluent.css +0 -12
  63. package/styles/image-editor/highcontrast-light.css +0 -12
  64. package/styles/image-editor/highcontrast.css +0 -12
  65. package/styles/image-editor/icons/_bds.scss +411 -0
  66. package/styles/image-editor/material-dark.css +0 -12
  67. package/styles/image-editor/material.css +0 -12
  68. package/styles/image-editor/material3-dark.css +5 -25
  69. package/styles/image-editor/material3.css +5 -25
  70. package/styles/image-editor/tailwind-dark.css +2 -14
  71. package/styles/image-editor/tailwind.css +2 -14
  72. package/styles/material-dark.css +0 -12
  73. package/styles/material.css +0 -12
  74. package/styles/material3-dark.css +5 -25
  75. package/styles/material3.css +5 -25
  76. package/styles/tailwind-dark.css +2 -14
  77. package/styles/tailwind.css +2 -14
@@ -1,4 +1,4 @@
1
- import { extend, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
1
+ import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';
2
2
  import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
3
3
  var Export = /** @class */ (function () {
4
4
  function Export(parent) {
@@ -20,17 +20,7 @@ var Export = /** @class */ (function () {
20
20
  this.parent.off('destroyed', this.destroy);
21
21
  };
22
22
  Export.prototype.export = function (args) {
23
- if (isBlazor()) {
24
- var obj = { shape: '' };
25
- this.parent.notify('selection', { prop: 'getCurrentDrawingShape', onPropertyChange: false, value: { obj: obj } });
26
- if (obj['shape'] !== '') {
27
- this.parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: '' } });
28
- this.parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
29
- }
30
- }
31
- else {
32
- this.parent.notify('toolbar', { prop: 'refreshShapeDrawing', onPropertyChange: false });
33
- }
23
+ this.parent.notify('toolbar', { prop: 'refreshShapeDrawing', onPropertyChange: false });
34
24
  this.updatePvtVar();
35
25
  switch (args.prop) {
36
26
  case 'export':
@@ -57,7 +47,6 @@ var Export = /** @class */ (function () {
57
47
  }
58
48
  };
59
49
  Export.prototype.exportImg = function (type, fileName) {
60
- var _this = this;
61
50
  var parent = this.parent;
62
51
  var obj = { fileName: '' };
63
52
  parent.notify('draw', { prop: 'getFileName', onPropertyChange: false, value: { obj: obj } });
@@ -84,16 +73,8 @@ var Export = /** @class */ (function () {
84
73
  value: { x: null, y: null, isMouseDown: null } });
85
74
  var beforeSave = { cancel: false, fileName: fileName ? fileName : imageName,
86
75
  fileType: type };
87
- if (isBlazor() && parent.events && parent.events.saving.hasDelegate === true) {
88
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
89
- parent.dotNetRef.invokeMethodAsync('BeforeSaveEventAsync', 'BeforeSave', beforeSave).then(function (beforeSave) {
90
- _this.beforeSaveEvent(beforeSave, type, fileName, imageName);
91
- });
92
- }
93
- else {
94
- parent.trigger('beforeSave', beforeSave);
95
- this.beforeSaveEvent(beforeSave, type, fileName, imageName);
96
- }
76
+ parent.trigger('beforeSave', beforeSave);
77
+ this.beforeSaveEvent(beforeSave, type, fileName, imageName);
97
78
  }
98
79
  };
99
80
  Export.prototype.beforeSaveEvent = function (observableSaveArgs, type, fileName, imageName) {
@@ -111,9 +92,7 @@ var Export = /** @class */ (function () {
111
92
  }
112
93
  var saved = { fileName: fileName ? fileName : imageName, fileType: type };
113
94
  parent.trigger('saved', saved);
114
- if (!isBlazor()) {
115
- parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
116
- }
95
+ parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
117
96
  parent.lowerCanvas.style.left = parent.upperCanvas.style.left = '';
118
97
  parent.lowerCanvas.style.top = parent.upperCanvas.style.top = '';
119
98
  parent.lowerCanvas.style.maxWidth = parent.upperCanvas.style.maxWidth = '';
@@ -183,15 +162,7 @@ var Export = /** @class */ (function () {
183
162
  value: { obj: selPointCollObj } });
184
163
  if (this.parent.aspectWidth) {
185
164
  parent.notify('undo-redo', { prop: 'setPreventUR', value: { bool: true } });
186
- if (!isBlazor()) {
187
- parent.notify('toolbar', { prop: 'resizeClick', value: { bool: false } });
188
- }
189
- else {
190
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
191
- parent.performResizeClick();
192
- }
193
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
194
- parent.currentToolbar = 'resize-toolbar';
165
+ parent.notify('toolbar', { prop: 'resizeClick', value: { bool: false } });
195
166
  parent.okBtn();
196
167
  if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
197
168
  width = this.parent.aspectHeight;
@@ -1,4 +1,4 @@
1
- import { EventHandler, extend, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
1
+ import { EventHandler, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
2
2
  import { ShapeType } from '../index';
3
3
  var FreehandDrawing = /** @class */ (function () {
4
4
  function FreehandDrawing(parent) {
@@ -627,15 +627,11 @@ var FreehandDrawing = /** @class */ (function () {
627
627
  if (selectedPoint.strokeColor === '#42a5f5') {
628
628
  selectedPoint.strokeColor = this.tempFHDStyles.strokeColor;
629
629
  }
630
- if (!isBlazor()) {
631
- parent.notify('toolbar', { prop: 'setSelectedFreehandColor', value: { color: '#42a5f5' } });
632
- }
630
+ parent.notify('toolbar', { prop: 'setSelectedFreehandColor', value: { color: '#42a5f5' } });
633
631
  this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
634
632
  this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
635
633
  parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
636
- if (!isBlazor()) {
637
- parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
638
- }
634
+ parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
639
635
  if (selectedPoint) {
640
636
  selectedPoint.isSelected = false;
641
637
  }
@@ -646,9 +642,7 @@ var FreehandDrawing = /** @class */ (function () {
646
642
  var parent = this.parent;
647
643
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
648
644
  var selectedPoint = parent.pointColl[this.fhdSelIdx];
649
- if (!isBlazor()) {
650
- parent.notify('toolbar', { prop: 'setSelectedFreehandColor', value: { color: '#42a5f5' } });
651
- }
645
+ parent.notify('toolbar', { prop: 'setSelectedFreehandColor', value: { color: '#42a5f5' } });
652
646
  this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
653
647
  this.lowerContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
654
648
  this.pointCounter = 0;
@@ -663,12 +657,7 @@ var FreehandDrawing = /** @class */ (function () {
663
657
  parent.activeObj.strokeSettings.strokeWidth = this.penStrokeWidth = this.tempFHDStyles.strokeWidth;
664
658
  this.tempFHDStyles = { strokeColor: null, strokeWidth: null, fillColor: null };
665
659
  parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
666
- if (!isBlazor()) {
667
- parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
668
- }
669
- else {
670
- parent.updateToolbar(parent.element, 'imageLoaded');
671
- }
660
+ parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
672
661
  };
673
662
  FreehandDrawing.prototype.selectFhd = function (index) {
674
663
  var parent = this.parent;
@@ -706,10 +695,6 @@ var FreehandDrawing = /** @class */ (function () {
706
695
  else {
707
696
  parent.okBtn();
708
697
  }
709
- if (isBlazor()) {
710
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
711
- parent.getShapeValue('pen');
712
- }
713
698
  };
714
699
  FreehandDrawing.prototype.deleteFhd = function (index, isId) {
715
700
  var parent = this.parent;
@@ -744,9 +729,7 @@ var FreehandDrawing = /** @class */ (function () {
744
729
  this.fhdHovIdx = this.fhdSelIdx = null;
745
730
  parent.notify('selection', { prop: 'resetFreehandDrawVariables' });
746
731
  parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
747
- if (!isBlazor()) {
748
- parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
749
- }
732
+ parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
750
733
  }
751
734
  };
752
735
  FreehandDrawing.prototype.zoomX = function (x) {
@@ -1086,24 +1069,14 @@ var FreehandDrawing = /** @class */ (function () {
1086
1069
  if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
1087
1070
  parent.activeObj.strokeSettings.strokeWidth = 2;
1088
1071
  }
1089
- if (!isBlazor()) {
1090
- parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
1091
- isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
1092
- }
1093
- else {
1094
- parent.updateToolbar(parent.element, 'pen');
1095
- }
1072
+ parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
1073
+ isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
1096
1074
  }
1097
1075
  else {
1098
1076
  parent.upperCanvas.style.cursor = parent.cursor = 'default';
1099
1077
  parent.notify('shape', { prop: 'apply', onPropertyChange: false, value: { shape: null, obj: null, canvas: null } });
1100
- if (!isBlazor()) {
1101
- parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
1102
- parent.notify('toolbar', { prop: 'setCurrentToolbar', value: { type: 'main' } });
1103
- }
1104
- else {
1105
- parent.updateToolbar(parent.element, 'imageLoaded');
1106
- }
1078
+ parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
1079
+ parent.notify('toolbar', { prop: 'setCurrentToolbar', value: { type: 'main' } });
1107
1080
  parent.notify('selection', { prop: 'setFreehandDrawCustomized', value: { isFreehandDrawCustomized: false } });
1108
1081
  }
1109
1082
  };
@@ -1139,52 +1112,25 @@ var FreehandDrawing = /** @class */ (function () {
1139
1112
  }
1140
1113
  };
1141
1114
  FreehandDrawing.prototype.triggerShapeChanging = function (shapeChangingArgs) {
1142
- var _this = this;
1143
1115
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
1144
1116
  var parent = this.parent;
1145
1117
  var point = parent.pointColl[this.fhdSelIdx];
1146
- if (isBlazor() && parent.events && parent.events.shapeChanging.hasDelegate === true) {
1147
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
1148
- parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs, null).then(function (shapeChangingArgs) {
1149
- _this.penStrokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
1150
- if (parent.activeObj.strokeSettings.strokeColor !== shapeChangingArgs.currentShapeSettings.strokeColor) {
1151
- parent.activeObj.strokeSettings.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
1152
- var penColorElement = parent.element.querySelector('.e-ie-toolbar-e-pen-color .e-dropdownbtn-preview');
1153
- if (penColorElement) {
1154
- penColorElement.style.background = shapeChangingArgs.currentShapeSettings.strokeColor;
1155
- }
1156
- }
1157
- if (_this.fhdSelID) {
1158
- point.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
1159
- point.strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
1160
- point.points = shapeChangingArgs.currentShapeSettings.points;
1161
- point.opacity = shapeChangingArgs.currentShapeSettings.opacity;
1162
- }
1163
- if (shapeChangingArgs.action === 'select') {
1164
- _this.freehandRedraw(_this.upperContext);
1165
- parent.updateToolbar(parent.element, 'imageLoaded');
1166
- parent.updateToolbar(parent.element, 'pen');
1167
- }
1168
- });
1169
- }
1170
- else {
1171
- parent.trigger('shapeChanging', shapeChangingArgs);
1172
- this.penStrokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
1173
- if (parent.activeObj.strokeSettings.strokeColor !== shapeChangingArgs.currentShapeSettings.strokeColor) {
1174
- parent.activeObj.strokeSettings.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
1175
- parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
1176
- }
1177
- if (this.fhdSelID) {
1178
- point.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
1179
- point.strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
1180
- point.points = shapeChangingArgs.currentShapeSettings.points;
1181
- point.opacity = shapeChangingArgs.currentShapeSettings.opacity;
1182
- }
1183
- if (shapeChangingArgs.action === 'select') {
1184
- this.freehandRedraw(this.upperContext);
1185
- parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
1186
- isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
1187
- }
1118
+ parent.trigger('shapeChanging', shapeChangingArgs);
1119
+ this.penStrokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
1120
+ if (parent.activeObj.strokeSettings.strokeColor !== shapeChangingArgs.currentShapeSettings.strokeColor) {
1121
+ parent.activeObj.strokeSettings.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
1122
+ parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
1123
+ }
1124
+ if (this.fhdSelID && point && shapeChangingArgs.currentShapeSettings) {
1125
+ point.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
1126
+ point.strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
1127
+ point.points = shapeChangingArgs.currentShapeSettings.points;
1128
+ point.opacity = shapeChangingArgs.currentShapeSettings.opacity;
1129
+ }
1130
+ if (shapeChangingArgs.action === 'select') {
1131
+ this.freehandRedraw(this.upperContext);
1132
+ parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
1133
+ isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
1188
1134
  }
1189
1135
  };
1190
1136
  FreehandDrawing.prototype.setCenterSelPoints = function () {