@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
@@ -4889,6 +4889,9 @@ class Draw {
4889
4889
  if (lastDotIndex !== -1) {
4890
4890
  return url.slice(lastDotIndex + 1).toLowerCase();
4891
4891
  }
4892
+ else if (url.indexOf('base64') !== -1) {
4893
+ return url.slice(url.indexOf('/') + 1, url.indexOf(';')).toLowerCase();
4894
+ }
4892
4895
  return null;
4893
4896
  }
4894
4897
  fileSelect(inputElement, args) {
@@ -11560,13 +11563,13 @@ class Selection {
11560
11563
  if (this.currentDrawingShape === 'text') {
11561
11564
  const prevCropObj = extend({}, parent.cropObj, {}, true);
11562
11565
  parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
11563
- value: { operation: 'shapeTransform', previousObj: this.initialPrevObj, previousObjColl: this.initialPrevObj.objColl,
11566
+ value: { operation: 'shapeInsert', previousObj: this.initialPrevObj, previousObjColl: this.initialPrevObj.objColl,
11564
11567
  previousPointColl: this.initialPrevObj.pointColl, previousSelPointColl: this.initialPrevObj.selPointColl,
11565
11568
  previousCropObj: prevCropObj, previousText: null,
11566
11569
  currentText: null, previousFilter: null, isCircleCrop: null } });
11567
11570
  }
11568
11571
  else {
11569
- parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: this.initialPrevObj.objColl } });
11572
+ parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: this.initialPrevObj.objColl, operation: 'shapeInsert' } });
11570
11573
  }
11571
11574
  this.isShapeInserted = true;
11572
11575
  this.currentDrawingShape = '';
@@ -13725,7 +13728,7 @@ class Shape {
13725
13728
  parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: { bool: true } });
13726
13729
  parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: objColl } });
13727
13730
  if (parent.isPublicMethod) {
13728
- parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });
13731
+ parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
13729
13732
  }
13730
13733
  parent.isPublicMethod = false;
13731
13734
  });
@@ -13751,7 +13754,7 @@ class Shape {
13751
13754
  isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
13752
13755
  parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
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
  }
@@ -13848,7 +13851,7 @@ class Shape {
13848
13851
  parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs, null).then((shapeChangingArgs) => {
13849
13852
  this.drawShapeTextEvent(shapeChangingArgs);
13850
13853
  if (parent.isPublicMethod) {
13851
- parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });
13854
+ parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
13852
13855
  }
13853
13856
  parent.isPublicMethod = false;
13854
13857
  });
@@ -13857,7 +13860,7 @@ class Shape {
13857
13860
  parent.trigger('shapeChanging', shapeChangingArgs);
13858
13861
  this.drawShapeTextEvent(shapeChangingArgs);
13859
13862
  if (parent.isPublicMethod) {
13860
- parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });
13863
+ parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
13861
13864
  }
13862
13865
  parent.isPublicMethod = false;
13863
13866
  }
@@ -13870,7 +13873,7 @@ class Shape {
13870
13873
  parent.objColl.push(parent.activeObj);
13871
13874
  const prevCropObj = extend({}, parent.cropObj, {}, true);
13872
13875
  parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
13873
- value: { operation: 'shapeTransform', previousObj: this.prevObj, previousObjColl: this.prevObj.objColl,
13876
+ value: { operation: 'shapeInsert', previousObj: this.prevObj, previousObjColl: this.prevObj.objColl,
13874
13877
  previousPointColl: this.prevObj.pointColl, previousSelPointColl: this.prevObj.selPointColl, previousCropObj: prevCropObj,
13875
13878
  previousText: null, currentText: null, previousFilter: null, isCircleCrop: null } });
13876
13879
  parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false,
@@ -13901,7 +13904,7 @@ class Shape {
13901
13904
  parent.objColl.push(parent.activeObj);
13902
13905
  const prevCropObj = extend({}, parent.cropObj, {}, true);
13903
13906
  parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
13904
- value: { operation: 'shapeTransform', previousObj: this.prevObj, previousObjColl: this.prevObj.objColl,
13907
+ value: { operation: 'shapeInsert', previousObj: this.prevObj, previousObjColl: this.prevObj.objColl,
13905
13908
  previousPointColl: this.prevObj.pointColl, previousSelPointColl: this.prevObj.selPointColl,
13906
13909
  previousCropObj: prevCropObj, previousText: null, currentText: null, previousFilter: null, isCircleCrop: null } });
13907
13910
  parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false,
@@ -19141,10 +19144,10 @@ class UndoRedo {
19141
19144
  this.redo();
19142
19145
  break;
19143
19146
  case 'updateUrObj':
19144
- this.updateUrObj(args.value['objColl']);
19147
+ this.updateUrObj(args.value['objColl'], args.value['operation']);
19145
19148
  break;
19146
19149
  case 'updateUndoRedo':
19147
- this.updateUndoRedo();
19150
+ this.updateUndoRedo(args.value ? args.value['operation'] : null);
19148
19151
  break;
19149
19152
  case 'getAppliedUndoRedoColl':
19150
19153
  args.value['obj']['appliedUndoRedoColl'] = this.appliedUndoRedoColl;
@@ -19411,6 +19414,7 @@ class UndoRedo {
19411
19414
  case 'invert':
19412
19415
  case 'sharpen':
19413
19416
  case 'imageRotate':
19417
+ case 'shapeInsert':
19414
19418
  this.shapeTransform(obj.previousObjColl);
19415
19419
  break;
19416
19420
  case 'freehanddraw':
@@ -19544,6 +19548,7 @@ class UndoRedo {
19544
19548
  case 'invert':
19545
19549
  case 'sharpen':
19546
19550
  case 'imageRotate':
19551
+ case 'shapeInsert':
19547
19552
  this.shapeTransform(obj.currentObjColl);
19548
19553
  break;
19549
19554
  case 'freehanddraw':
@@ -19881,6 +19886,37 @@ class UndoRedo {
19881
19886
  }
19882
19887
  parent.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.lowerContext.filter } });
19883
19888
  parent.currObjType.isCustomCrop = false;
19889
+ if (isBlazor() && parent.events && parent.events.historyChanged.hasDelegate === true) {
19890
+ let imageAction = this.getImageAction(operation);
19891
+ const args = { length: this.undoRedoColl.length, index: this.undoRedoStep, actionTrigger: isUndo ? 'Undo' : 'Redo', imageAction: imageAction };
19892
+ parent.dotNetRef.invokeMethodAsync('OnHistoryChangedAsync', args);
19893
+ }
19894
+ }
19895
+ getImageAction(operation) {
19896
+ if (['brightness', 'contrast', 'saturation', 'opacity', 'blur', 'hue'].indexOf(operation) !== -1) {
19897
+ return 'FinetuneApplied';
19898
+ }
19899
+ else if (['chrome', 'cold', 'warm', 'grayscale', 'blackandwhite', 'sepia', 'invert'].indexOf(operation) !== -1) {
19900
+ return 'FilterApplied';
19901
+ }
19902
+ else if (operation === 'frame') {
19903
+ return 'FrameApplied';
19904
+ }
19905
+ else if (operation === 'resize') {
19906
+ return 'ImageResized';
19907
+ }
19908
+ else if (['deleteFreehandDrawing', 'deleteObj'].indexOf(operation) !== -1) {
19909
+ return 'ShapeDeleted';
19910
+ }
19911
+ else if (operation === 'crop') {
19912
+ return 'Cropped';
19913
+ }
19914
+ else if (['shapeInsert', 'freehanddraw', 'freehand-draw'].indexOf(operation) !== -1) {
19915
+ return 'ShapeInserted';
19916
+ }
19917
+ else {
19918
+ return 'ShapeCustomized';
19919
+ }
19884
19920
  }
19885
19921
  updateUrc(operation, previousObj, previousObjColl, previousPointColl, previousSelPointColl, previousCropObj, previousText, currentText, previousFilter, isCircleCrop) {
19886
19922
  const parent = this.parent;
@@ -19948,7 +19984,7 @@ class UndoRedo {
19948
19984
  }
19949
19985
  }
19950
19986
  }
19951
- updateUrObj(objColl) {
19987
+ updateUrObj(objColl, operation) {
19952
19988
  const parent = this.parent;
19953
19989
  if (parent.allowUndoRedo) {
19954
19990
  if (parent.currObjType.isUndoAction) {
@@ -19969,7 +20005,8 @@ class UndoRedo {
19969
20005
  parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
19970
20006
  value: { obj: selPointCollObj } });
19971
20007
  obj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
19972
- this.undoRedoColl.push({ operation: 'shapeTransform', previousObj: obj, currentObj: obj,
20008
+ let oper = operation ? operation : 'shapeTransform';
20009
+ this.undoRedoColl.push({ operation: oper, previousObj: obj, currentObj: obj,
19973
20010
  previousObjColl: objColl, currentObjColl: obj.objColl,
19974
20011
  previousPointColl: obj.pointColl, currentPointColl: obj.pointColl,
19975
20012
  previousSelPointColl: obj.selPointColl, currentSelPointColl: obj.selPointColl,
@@ -19978,7 +20015,7 @@ class UndoRedo {
19978
20015
  value: { obj: parent.objColl[parent.objColl.length - 1] } });
19979
20016
  }
19980
20017
  }
19981
- updateUndoRedo() {
20018
+ updateUndoRedo(operation) {
19982
20019
  const parent = this.parent;
19983
20020
  const prevCropObj = extend({}, parent.cropObj, {}, true);
19984
20021
  const object = { currObj: {} };
@@ -19995,7 +20032,8 @@ class UndoRedo {
19995
20032
  parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
19996
20033
  }
19997
20034
  parent.objColl.push(parent.activeObj);
19998
- this.updateUrc('shapeTransform', prevObj, prevObj.objColl, prevObj.pointColl, prevObj.selPointColl, prevCropObj);
20035
+ let oper = operation ? operation : 'shapeTransform';
20036
+ this.updateUrc(oper, prevObj, prevObj.objColl, prevObj.pointColl, prevObj.selPointColl, prevCropObj);
19999
20037
  parent.objColl.pop();
20000
20038
  parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
20001
20039
  parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });