@syncfusion/ej2-image-editor 24.1.46 → 24.2.3

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 (65) hide show
  1. package/CHANGELOG.md +4 -2
  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 +52 -14
  5. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es5.js +52 -14
  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 +11 -11
  12. package/src/image-editor/action/draw.js +3 -0
  13. package/src/image-editor/action/selection.js +2 -2
  14. package/src/image-editor/action/shape.js +6 -6
  15. package/src/image-editor/action/undo-redo.d.ts +1 -0
  16. package/src/image-editor/action/undo-redo.js +41 -6
  17. package/styles/bootstrap-dark.css +12 -0
  18. package/styles/bootstrap.css +12 -0
  19. package/styles/bootstrap4.css +12 -0
  20. package/styles/bootstrap5-dark.css +12 -0
  21. package/styles/bootstrap5.css +12 -0
  22. package/styles/fabric-dark.css +12 -0
  23. package/styles/fabric.css +12 -0
  24. package/styles/fluent-dark.css +12 -0
  25. package/styles/fluent.css +12 -0
  26. package/styles/highcontrast-light.css +12 -0
  27. package/styles/highcontrast.css +12 -0
  28. package/styles/image-editor/_bootstrap-dark-definition.scss +1 -0
  29. package/styles/image-editor/_bootstrap-definition.scss +1 -0
  30. package/styles/image-editor/_bootstrap4-definition.scss +1 -0
  31. package/styles/image-editor/_bootstrap5-definition.scss +1 -0
  32. package/styles/image-editor/_fabric-dark-definition.scss +1 -0
  33. package/styles/image-editor/_fabric-definition.scss +1 -0
  34. package/styles/image-editor/_fluent-definition.scss +1 -0
  35. package/styles/image-editor/_fusionnew-definition.scss +1 -0
  36. package/styles/image-editor/_highcontrast-definition.scss +1 -0
  37. package/styles/image-editor/_highcontrast-light-definition.scss +1 -0
  38. package/styles/image-editor/_layout.scss +32 -2
  39. package/styles/image-editor/_material-dark-definition.scss +1 -0
  40. package/styles/image-editor/_material-definition.scss +1 -0
  41. package/styles/image-editor/_material3-definition.scss +3 -2
  42. package/styles/image-editor/_tailwind-definition.scss +1 -0
  43. package/styles/image-editor/bootstrap-dark.css +12 -0
  44. package/styles/image-editor/bootstrap.css +12 -0
  45. package/styles/image-editor/bootstrap4.css +12 -0
  46. package/styles/image-editor/bootstrap5-dark.css +12 -0
  47. package/styles/image-editor/bootstrap5.css +12 -0
  48. package/styles/image-editor/fabric-dark.css +12 -0
  49. package/styles/image-editor/fabric.css +12 -0
  50. package/styles/image-editor/fluent-dark.css +12 -0
  51. package/styles/image-editor/fluent.css +12 -0
  52. package/styles/image-editor/highcontrast-light.css +12 -0
  53. package/styles/image-editor/highcontrast.css +12 -0
  54. package/styles/image-editor/material-dark.css +12 -0
  55. package/styles/image-editor/material.css +12 -0
  56. package/styles/image-editor/material3-dark.css +25 -4
  57. package/styles/image-editor/material3.css +25 -4
  58. package/styles/image-editor/tailwind-dark.css +15 -2
  59. package/styles/image-editor/tailwind.css +15 -2
  60. package/styles/material-dark.css +12 -0
  61. package/styles/material.css +12 -0
  62. package/styles/material3-dark.css +25 -4
  63. package/styles/material3.css +25 -4
  64. package/styles/tailwind-dark.css +15 -2
  65. package/styles/tailwind.css +15 -2
@@ -4894,6 +4894,9 @@ var Draw = /** @__PURE__ @class */ (function () {
4894
4894
  if (lastDotIndex !== -1) {
4895
4895
  return url.slice(lastDotIndex + 1).toLowerCase();
4896
4896
  }
4897
+ else if (url.indexOf('base64') !== -1) {
4898
+ return url.slice(url.indexOf('/') + 1, url.indexOf(';')).toLowerCase();
4899
+ }
4897
4900
  return null;
4898
4901
  };
4899
4902
  Draw.prototype.fileSelect = function (inputElement, args) {
@@ -11582,13 +11585,13 @@ var Selection = /** @__PURE__ @class */ (function () {
11582
11585
  if (this.currentDrawingShape === 'text') {
11583
11586
  var prevCropObj_1 = extend({}, parent.cropObj, {}, true);
11584
11587
  parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
11585
- value: { operation: 'shapeTransform', previousObj: this.initialPrevObj, previousObjColl: this.initialPrevObj.objColl,
11588
+ value: { operation: 'shapeInsert', previousObj: this.initialPrevObj, previousObjColl: this.initialPrevObj.objColl,
11586
11589
  previousPointColl: this.initialPrevObj.pointColl, previousSelPointColl: this.initialPrevObj.selPointColl,
11587
11590
  previousCropObj: prevCropObj_1, previousText: null,
11588
11591
  currentText: null, previousFilter: null, isCircleCrop: null } });
11589
11592
  }
11590
11593
  else {
11591
- parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: this.initialPrevObj.objColl } });
11594
+ parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: this.initialPrevObj.objColl, operation: 'shapeInsert' } });
11592
11595
  }
11593
11596
  this.isShapeInserted = true;
11594
11597
  this.currentDrawingShape = '';
@@ -13751,7 +13754,7 @@ var Shape = /** @__PURE__ @class */ (function () {
13751
13754
  parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: { bool: true } });
13752
13755
  parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: objColl_1 } });
13753
13756
  if (parent.isPublicMethod) {
13754
- parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });
13757
+ parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
13755
13758
  }
13756
13759
  parent.isPublicMethod = false;
13757
13760
  });
@@ -13777,7 +13780,7 @@ var Shape = /** @__PURE__ @class */ (function () {
13777
13780
  isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
13778
13781
  parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
13779
13782
  if (parent.isPublicMethod) {
13780
- parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });
13783
+ parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
13781
13784
  }
13782
13785
  parent.isPublicMethod = false;
13783
13786
  }
@@ -13875,7 +13878,7 @@ var Shape = /** @__PURE__ @class */ (function () {
13875
13878
  parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs, null).then(function (shapeChangingArgs) {
13876
13879
  _this.drawShapeTextEvent(shapeChangingArgs);
13877
13880
  if (parent.isPublicMethod) {
13878
- parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });
13881
+ parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
13879
13882
  }
13880
13883
  parent.isPublicMethod = false;
13881
13884
  });
@@ -13884,7 +13887,7 @@ var Shape = /** @__PURE__ @class */ (function () {
13884
13887
  parent.trigger('shapeChanging', shapeChangingArgs);
13885
13888
  this.drawShapeTextEvent(shapeChangingArgs);
13886
13889
  if (parent.isPublicMethod) {
13887
- parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });
13890
+ parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
13888
13891
  }
13889
13892
  parent.isPublicMethod = false;
13890
13893
  }
@@ -13897,7 +13900,7 @@ var Shape = /** @__PURE__ @class */ (function () {
13897
13900
  parent.objColl.push(parent.activeObj);
13898
13901
  var prevCropObj = extend({}, parent.cropObj, {}, true);
13899
13902
  parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
13900
- value: { operation: 'shapeTransform', previousObj: this.prevObj, previousObjColl: this.prevObj.objColl,
13903
+ value: { operation: 'shapeInsert', previousObj: this.prevObj, previousObjColl: this.prevObj.objColl,
13901
13904
  previousPointColl: this.prevObj.pointColl, previousSelPointColl: this.prevObj.selPointColl, previousCropObj: prevCropObj,
13902
13905
  previousText: null, currentText: null, previousFilter: null, isCircleCrop: null } });
13903
13906
  parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false,
@@ -13928,7 +13931,7 @@ var Shape = /** @__PURE__ @class */ (function () {
13928
13931
  parent.objColl.push(parent.activeObj);
13929
13932
  var prevCropObj = extend({}, parent.cropObj, {}, true);
13930
13933
  parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
13931
- value: { operation: 'shapeTransform', previousObj: this.prevObj, previousObjColl: this.prevObj.objColl,
13934
+ value: { operation: 'shapeInsert', previousObj: this.prevObj, previousObjColl: this.prevObj.objColl,
13932
13935
  previousPointColl: this.prevObj.pointColl, previousSelPointColl: this.prevObj.selPointColl,
13933
13936
  previousCropObj: prevCropObj, previousText: null, currentText: null, previousFilter: null, isCircleCrop: null } });
13934
13937
  parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false,
@@ -19179,10 +19182,10 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
19179
19182
  this.redo();
19180
19183
  break;
19181
19184
  case 'updateUrObj':
19182
- this.updateUrObj(args.value['objColl']);
19185
+ this.updateUrObj(args.value['objColl'], args.value['operation']);
19183
19186
  break;
19184
19187
  case 'updateUndoRedo':
19185
- this.updateUndoRedo();
19188
+ this.updateUndoRedo(args.value ? args.value['operation'] : null);
19186
19189
  break;
19187
19190
  case 'getAppliedUndoRedoColl':
19188
19191
  args.value['obj']['appliedUndoRedoColl'] = this.appliedUndoRedoColl;
@@ -19449,6 +19452,7 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
19449
19452
  case 'invert':
19450
19453
  case 'sharpen':
19451
19454
  case 'imageRotate':
19455
+ case 'shapeInsert':
19452
19456
  this.shapeTransform(obj.previousObjColl);
19453
19457
  break;
19454
19458
  case 'freehanddraw':
@@ -19582,6 +19586,7 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
19582
19586
  case 'invert':
19583
19587
  case 'sharpen':
19584
19588
  case 'imageRotate':
19589
+ case 'shapeInsert':
19585
19590
  this.shapeTransform(obj.currentObjColl);
19586
19591
  break;
19587
19592
  case 'freehanddraw':
@@ -19919,6 +19924,37 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
19919
19924
  }
19920
19925
  parent.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.lowerContext.filter } });
19921
19926
  parent.currObjType.isCustomCrop = false;
19927
+ if (isBlazor() && parent.events && parent.events.historyChanged.hasDelegate === true) {
19928
+ var imageAction = this.getImageAction(operation);
19929
+ var args = { length: this.undoRedoColl.length, index: this.undoRedoStep, actionTrigger: isUndo ? 'Undo' : 'Redo', imageAction: imageAction };
19930
+ parent.dotNetRef.invokeMethodAsync('OnHistoryChangedAsync', args);
19931
+ }
19932
+ };
19933
+ UndoRedo.prototype.getImageAction = function (operation) {
19934
+ if (['brightness', 'contrast', 'saturation', 'opacity', 'blur', 'hue'].indexOf(operation) !== -1) {
19935
+ return 'FinetuneApplied';
19936
+ }
19937
+ else if (['chrome', 'cold', 'warm', 'grayscale', 'blackandwhite', 'sepia', 'invert'].indexOf(operation) !== -1) {
19938
+ return 'FilterApplied';
19939
+ }
19940
+ else if (operation === 'frame') {
19941
+ return 'FrameApplied';
19942
+ }
19943
+ else if (operation === 'resize') {
19944
+ return 'ImageResized';
19945
+ }
19946
+ else if (['deleteFreehandDrawing', 'deleteObj'].indexOf(operation) !== -1) {
19947
+ return 'ShapeDeleted';
19948
+ }
19949
+ else if (operation === 'crop') {
19950
+ return 'Cropped';
19951
+ }
19952
+ else if (['shapeInsert', 'freehanddraw', 'freehand-draw'].indexOf(operation) !== -1) {
19953
+ return 'ShapeInserted';
19954
+ }
19955
+ else {
19956
+ return 'ShapeCustomized';
19957
+ }
19922
19958
  };
19923
19959
  UndoRedo.prototype.updateUrc = function (operation, previousObj, previousObjColl, previousPointColl, previousSelPointColl, previousCropObj, previousText, currentText, previousFilter, isCircleCrop) {
19924
19960
  var parent = this.parent;
@@ -19986,7 +20022,7 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
19986
20022
  }
19987
20023
  }
19988
20024
  };
19989
- UndoRedo.prototype.updateUrObj = function (objColl) {
20025
+ UndoRedo.prototype.updateUrObj = function (objColl, operation) {
19990
20026
  var parent = this.parent;
19991
20027
  if (parent.allowUndoRedo) {
19992
20028
  if (parent.currObjType.isUndoAction) {
@@ -20007,7 +20043,8 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
20007
20043
  parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
20008
20044
  value: { obj: selPointCollObj } });
20009
20045
  obj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
20010
- this.undoRedoColl.push({ operation: 'shapeTransform', previousObj: obj, currentObj: obj,
20046
+ var oper = operation ? operation : 'shapeTransform';
20047
+ this.undoRedoColl.push({ operation: oper, previousObj: obj, currentObj: obj,
20011
20048
  previousObjColl: objColl, currentObjColl: obj.objColl,
20012
20049
  previousPointColl: obj.pointColl, currentPointColl: obj.pointColl,
20013
20050
  previousSelPointColl: obj.selPointColl, currentSelPointColl: obj.selPointColl,
@@ -20016,7 +20053,7 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
20016
20053
  value: { obj: parent.objColl[parent.objColl.length - 1] } });
20017
20054
  }
20018
20055
  };
20019
- UndoRedo.prototype.updateUndoRedo = function () {
20056
+ UndoRedo.prototype.updateUndoRedo = function (operation) {
20020
20057
  var parent = this.parent;
20021
20058
  var prevCropObj = extend({}, parent.cropObj, {}, true);
20022
20059
  var object = { currObj: {} };
@@ -20033,7 +20070,8 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
20033
20070
  parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
20034
20071
  }
20035
20072
  parent.objColl.push(parent.activeObj);
20036
- this.updateUrc('shapeTransform', prevObj, prevObj.objColl, prevObj.pointColl, prevObj.selPointColl, prevCropObj);
20073
+ var oper = operation ? operation : 'shapeTransform';
20074
+ this.updateUrc(oper, prevObj, prevObj.objColl, prevObj.pointColl, prevObj.selPointColl, prevCropObj);
20037
20075
  parent.objColl.pop();
20038
20076
  parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
20039
20077
  parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });