@syncfusion/ej2-image-editor 24.1.43 → 24.1.44

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 (52) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +1 -1
  3. package/dist/ej2-image-editor.umd.min.js +2 -2
  4. package/dist/ej2-image-editor.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-image-editor.es2015.js +45 -21
  6. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  7. package/dist/es6/ej2-image-editor.es5.js +45 -21
  8. package/dist/es6/ej2-image-editor.es5.js.map +1 -1
  9. package/dist/global/ej2-image-editor.min.js +2 -2
  10. package/dist/global/ej2-image-editor.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +7 -7
  13. package/src/image-editor/action/draw.js +19 -16
  14. package/src/image-editor/action/selection.js +8 -0
  15. package/src/image-editor/action/transform.js +4 -4
  16. package/src/image-editor/action/undo-redo.js +11 -1
  17. package/src/image-editor/renderer/toolbar.js +3 -0
  18. package/styles/bootstrap-dark.css +9 -2
  19. package/styles/bootstrap.css +9 -2
  20. package/styles/bootstrap4.css +9 -2
  21. package/styles/bootstrap5-dark.css +9 -2
  22. package/styles/bootstrap5.css +9 -2
  23. package/styles/fabric-dark.css +9 -2
  24. package/styles/fabric.css +9 -2
  25. package/styles/fluent-dark.css +9 -2
  26. package/styles/fluent.css +9 -2
  27. package/styles/highcontrast-light.css +9 -2
  28. package/styles/highcontrast.css +9 -2
  29. package/styles/image-editor/_layout.scss +9 -6
  30. package/styles/image-editor/bootstrap-dark.css +9 -2
  31. package/styles/image-editor/bootstrap.css +9 -2
  32. package/styles/image-editor/bootstrap4.css +9 -2
  33. package/styles/image-editor/bootstrap5-dark.css +9 -2
  34. package/styles/image-editor/bootstrap5.css +9 -2
  35. package/styles/image-editor/fabric-dark.css +9 -2
  36. package/styles/image-editor/fabric.css +9 -2
  37. package/styles/image-editor/fluent-dark.css +9 -2
  38. package/styles/image-editor/fluent.css +9 -2
  39. package/styles/image-editor/highcontrast-light.css +9 -2
  40. package/styles/image-editor/highcontrast.css +9 -2
  41. package/styles/image-editor/material-dark.css +9 -2
  42. package/styles/image-editor/material.css +9 -2
  43. package/styles/image-editor/material3-dark.css +7 -2
  44. package/styles/image-editor/material3.css +7 -2
  45. package/styles/image-editor/tailwind-dark.css +9 -2
  46. package/styles/image-editor/tailwind.css +9 -2
  47. package/styles/material-dark.css +9 -2
  48. package/styles/material.css +9 -2
  49. package/styles/material3-dark.css +7 -2
  50. package/styles/material3.css +7 -2
  51. package/styles/tailwind-dark.css +9 -2
  52. package/styles/tailwind.css +9 -2
@@ -1099,7 +1099,7 @@ var Draw = /** @__PURE__ @class */ (function () {
1099
1099
  this.updateCanvas();
1100
1100
  break;
1101
1101
  case 'performCancel':
1102
- this.performCancel(args.value['isContextualToolbar']);
1102
+ this.performCancel(args.value['isContextualToolbar'], args.value['isUndoRedo']);
1103
1103
  break;
1104
1104
  case 'updateFlipPan':
1105
1105
  this.updateFlipPan(args.value['tempSelectionObj']);
@@ -1591,13 +1591,11 @@ var Draw = /** @__PURE__ @class */ (function () {
1591
1591
  if (destTop < 0) {
1592
1592
  height += destTop;
1593
1593
  }
1594
- if (parent.currObjType.shape.toLowerCase() !== 'crop-square' && parent.currObjType.shape.toLowerCase() !== 'crop-circle') {
1595
- if (destLeft + destWidth > parent.lowerCanvas.width) {
1596
- width -= (destLeft + destWidth - parent.lowerCanvas.width);
1597
- }
1598
- if (destTop + destHeight > parent.lowerCanvas.height) {
1599
- height -= (destTop + destHeight - parent.lowerCanvas.height);
1600
- }
1594
+ if (destLeft + destWidth > parent.lowerCanvas.width) {
1595
+ width -= (destLeft + destWidth - parent.lowerCanvas.width);
1596
+ }
1597
+ if (destTop + destHeight > parent.lowerCanvas.height) {
1598
+ height -= (destTop + destHeight - parent.lowerCanvas.height);
1601
1599
  }
1602
1600
  }
1603
1601
  switch (parent.currObjType.shape.toLowerCase()) {
@@ -3219,7 +3217,7 @@ var Draw = /** @__PURE__ @class */ (function () {
3219
3217
  parent.img.destHeight = maxDimension.width;
3220
3218
  }
3221
3219
  parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.height) / 2;
3222
- parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.width + 1) / 2;
3220
+ parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.width) / 2;
3223
3221
  parent.img.destWidth = maxDimension.height;
3224
3222
  parent.img.destHeight = maxDimension.width;
3225
3223
  }
@@ -3235,7 +3233,12 @@ var Draw = /** @__PURE__ @class */ (function () {
3235
3233
  parent.img.destHeight = maxDimension.height;
3236
3234
  }
3237
3235
  parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
3238
- parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
3236
+ if (degree === 0) {
3237
+ parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
3238
+ }
3239
+ else {
3240
+ parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
3241
+ }
3239
3242
  parent.img.destWidth = maxDimension.width;
3240
3243
  parent.img.destHeight = maxDimension.height;
3241
3244
  }
@@ -3550,14 +3553,14 @@ var Draw = /** @__PURE__ @class */ (function () {
3550
3553
  parent.cancelCropSelection = null;
3551
3554
  }
3552
3555
  };
3553
- Draw.prototype.performCancel = function (isContextualToolbar) {
3556
+ Draw.prototype.performCancel = function (isContextualToolbar, isUndoRedo) {
3554
3557
  var parent = this.parent;
3555
3558
  var straightenObj = { bool: parent.isStraightening };
3556
3559
  isContextualToolbar = isContextualToolbar ? isContextualToolbar : false;
3557
3560
  var obj = { bool: false };
3558
3561
  parent.allowDownScale = true;
3559
3562
  parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
3560
- if (JSON.stringify(parent.frameObj) !== JSON.stringify(parent.tempFrameObj)) {
3563
+ if (isNullOrUndefined(isUndoRedo) && JSON.stringify(parent.frameObj) !== JSON.stringify(parent.tempFrameObj)) {
3561
3564
  extend(parent.frameObj, parent.tempFrameObj);
3562
3565
  this.renderImage(null, null, true);
3563
3566
  }
@@ -4321,16 +4324,16 @@ var Draw = /** @__PURE__ @class */ (function () {
4321
4324
  Draw.prototype.setClientTransDim = function (isPreventDimension) {
4322
4325
  var parent = this.parent;
4323
4326
  if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
4324
- parent.img.destLeft = (parent.lowerCanvas.width - parent.img.destHeight) / 2;
4325
- parent.img.destTop = (parent.lowerCanvas.height - parent.img.destWidth) / 2;
4327
+ parent.img.destLeft = (parent.lowerCanvas.clientWidth - parent.img.destHeight) / 2;
4328
+ parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destWidth + 1) / 2;
4326
4329
  var temp = parent.img.destWidth;
4327
4330
  parent.img.destWidth = parent.img.destHeight;
4328
4331
  parent.img.destHeight = temp;
4329
4332
  }
4330
4333
  else {
4331
4334
  if (isNullOrUndefined(isPreventDimension)) {
4332
- parent.img.destLeft = (parent.lowerCanvas.width - parent.img.destWidth) / 2;
4333
- parent.img.destTop = (parent.lowerCanvas.height - parent.img.destHeight) / 2;
4335
+ parent.img.destLeft = (parent.lowerCanvas.clientWidth - parent.img.destWidth) / 2;
4336
+ parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destHeight + 1) / 2;
4334
4337
  }
4335
4338
  }
4336
4339
  };
@@ -12637,7 +12640,15 @@ var Selection = /** @__PURE__ @class */ (function () {
12637
12640
  this.getCurrentFlipState();
12638
12641
  }
12639
12642
  else {
12643
+ var totalPannedInternalPoint = extend({}, parent.panPoint.totalPannedInternalPoint, {}, true);
12644
+ var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
12645
+ height: parent.img.destHeight };
12640
12646
  parent.notify('draw', { prop: 'callUpdateCurrTransState', onPropertyChange: false });
12647
+ parent.panPoint.totalPannedInternalPoint = totalPannedInternalPoint;
12648
+ parent.img.destLeft = destPoints.startX;
12649
+ parent.img.destTop = destPoints.startY;
12650
+ parent.img.destWidth = destPoints.width;
12651
+ parent.img.destHeight = destPoints.height;
12641
12652
  parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
12642
12653
  value: { context: this.lowerContext, points: null } });
12643
12654
  }
@@ -17848,11 +17859,11 @@ var Transform = /** @__PURE__ @class */ (function () {
17848
17859
  if (parent.img.destTop > 0) {
17849
17860
  parent.img.destTop = 0;
17850
17861
  }
17851
- if (parent.img.destLeft + maxDimension.width < parent.lowerCanvas.width) {
17852
- parent.img.destLeft = parent.lowerCanvas.width - parent.img.destWidth;
17862
+ if (parent.img.destLeft + maxDimension.width < parent.lowerCanvas.clientWidth) {
17863
+ parent.img.destLeft = parent.lowerCanvas.clientWidth - parent.img.destWidth;
17853
17864
  }
17854
- if (parent.img.destTop + maxDimension.height < parent.lowerCanvas.height) {
17855
- parent.img.destTop = parent.lowerCanvas.height - parent.img.destHeight;
17865
+ if (parent.img.destTop + maxDimension.height < parent.lowerCanvas.clientHeight) {
17866
+ parent.img.destTop = parent.lowerCanvas.clientHeight - parent.img.destHeight;
17856
17867
  }
17857
17868
  }
17858
17869
  return maxDimension;
@@ -19469,7 +19480,7 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
19469
19480
  this.tempCurrSelPoint = extend({}, parent.currSelectionPoint, {}, true);
19470
19481
  parent.currSelectionPoint = null;
19471
19482
  }
19472
- parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
19483
+ parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null, isUndoRedo: true } });
19473
19484
  parent.currObjType.isActiveObj = false;
19474
19485
  if (parent.transform.straighten !== 0) {
19475
19486
  parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
@@ -20032,6 +20043,16 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
20032
20043
  this.parent.notify('draw', { prop: 'getArrowDimension', onPropertyChange: false, value: { obj: arrowObj } });
20033
20044
  var tempArrowObj = extend({}, arrowObj['arrowDimension'], {}, true);
20034
20045
  if (parent.transform.zoomFactor > 0 && (obj.length > 0 || point.length > 0)) {
20046
+ if (obj.length > 0) {
20047
+ for (var i = 0; i < obj.length; i++) {
20048
+ if (obj[i].currIndex) {
20049
+ continue;
20050
+ }
20051
+ else {
20052
+ obj[i].currIndex = 'shape_' + (i + 1);
20053
+ }
20054
+ }
20055
+ }
20035
20056
  parent.objColl = obj;
20036
20057
  parent.pointColl = point;
20037
20058
  var isUndoRedo = parent.isUndoRedo;
@@ -27557,6 +27578,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
27557
27578
  qtArea.style.top = point.startY - (height + (height / 1.5)) + 'px';
27558
27579
  }
27559
27580
  }
27581
+ if (parseFloat(qtArea.style.top) < 0) {
27582
+ qtArea.style.top = '0px';
27583
+ }
27560
27584
  }
27561
27585
  };
27562
27586
  ToolbarModule.prototype.refreshDropDownBtn = function (isDisabled) {