@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.
- package/CHANGELOG.md +4 -2
- package/dist/ej2-image-editor.umd.min.js +2 -2
- package/dist/ej2-image-editor.umd.min.js.map +1 -1
- package/dist/es6/ej2-image-editor.es2015.js +52 -14
- package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
- package/dist/es6/ej2-image-editor.es5.js +52 -14
- package/dist/es6/ej2-image-editor.es5.js.map +1 -1
- package/dist/global/ej2-image-editor.min.js +2 -2
- package/dist/global/ej2-image-editor.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +11 -11
- package/src/image-editor/action/draw.js +3 -0
- package/src/image-editor/action/selection.js +2 -2
- package/src/image-editor/action/shape.js +6 -6
- package/src/image-editor/action/undo-redo.d.ts +1 -0
- package/src/image-editor/action/undo-redo.js +41 -6
- package/styles/bootstrap-dark.css +12 -0
- package/styles/bootstrap.css +12 -0
- package/styles/bootstrap4.css +12 -0
- package/styles/bootstrap5-dark.css +12 -0
- package/styles/bootstrap5.css +12 -0
- package/styles/fabric-dark.css +12 -0
- package/styles/fabric.css +12 -0
- package/styles/fluent-dark.css +12 -0
- package/styles/fluent.css +12 -0
- package/styles/highcontrast-light.css +12 -0
- package/styles/highcontrast.css +12 -0
- package/styles/image-editor/_bootstrap-dark-definition.scss +1 -0
- package/styles/image-editor/_bootstrap-definition.scss +1 -0
- package/styles/image-editor/_bootstrap4-definition.scss +1 -0
- package/styles/image-editor/_bootstrap5-definition.scss +1 -0
- package/styles/image-editor/_fabric-dark-definition.scss +1 -0
- package/styles/image-editor/_fabric-definition.scss +1 -0
- package/styles/image-editor/_fluent-definition.scss +1 -0
- package/styles/image-editor/_fusionnew-definition.scss +1 -0
- package/styles/image-editor/_highcontrast-definition.scss +1 -0
- package/styles/image-editor/_highcontrast-light-definition.scss +1 -0
- package/styles/image-editor/_layout.scss +32 -2
- package/styles/image-editor/_material-dark-definition.scss +1 -0
- package/styles/image-editor/_material-definition.scss +1 -0
- package/styles/image-editor/_material3-definition.scss +3 -2
- package/styles/image-editor/_tailwind-definition.scss +1 -0
- package/styles/image-editor/bootstrap-dark.css +12 -0
- package/styles/image-editor/bootstrap.css +12 -0
- package/styles/image-editor/bootstrap4.css +12 -0
- package/styles/image-editor/bootstrap5-dark.css +12 -0
- package/styles/image-editor/bootstrap5.css +12 -0
- package/styles/image-editor/fabric-dark.css +12 -0
- package/styles/image-editor/fabric.css +12 -0
- package/styles/image-editor/fluent-dark.css +12 -0
- package/styles/image-editor/fluent.css +12 -0
- package/styles/image-editor/highcontrast-light.css +12 -0
- package/styles/image-editor/highcontrast.css +12 -0
- package/styles/image-editor/material-dark.css +12 -0
- package/styles/image-editor/material.css +12 -0
- package/styles/image-editor/material3-dark.css +25 -4
- package/styles/image-editor/material3.css +25 -4
- package/styles/image-editor/tailwind-dark.css +15 -2
- package/styles/image-editor/tailwind.css +15 -2
- package/styles/material-dark.css +12 -0
- package/styles/material.css +12 -0
- package/styles/material3-dark.css +25 -4
- package/styles/material3.css +25 -4
- package/styles/tailwind-dark.css +15 -2
- 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: '
|
|
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: '
|
|
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: '
|
|
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
|
-
|
|
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
|
-
|
|
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 });
|