@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
@@ -42,7 +42,6 @@ export declare class Transform {
42
42
  private updateFlipColl;
43
43
  private setDestPointsForFlipState;
44
44
  private zoomAction;
45
- private getZoomTriggerType;
46
45
  private zoomEvent;
47
46
  private disableZoomOutBtn;
48
47
  private drawZoomImgToCanvas;
@@ -1,4 +1,4 @@
1
- import { Browser, extend, getComponent, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
1
+ import { Browser, extend, getComponent, isNullOrUndefined } from '@syncfusion/ej2-base';
2
2
  import { Direction } from '../index';
3
3
  import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
4
4
  var Transform = /** @class */ (function () {
@@ -203,22 +203,13 @@ var Transform = /** @class */ (function () {
203
203
  this.isPreventSelect = this.preventDownScale = false;
204
204
  };
205
205
  Transform.prototype.rotateImage = function (degree) {
206
- var _this = this;
207
206
  var parent = this.parent;
208
207
  var transitionArgs = { cancel: false, previousDegree: parent.transform.degree,
209
208
  currentDegree: Math.abs(parent.transform.degree + degree) === 360 ? 0 : parent.transform.degree + degree };
210
- if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.rotating.hasDelegate === true) {
211
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
212
- parent.dotNetRef.invokeMethodAsync('RotateEventAsync', 'OnRotate', transitionArgs, null).then(function (args) {
213
- _this.rotateEvent(args, degree);
214
- });
215
- }
216
- else {
217
- if (!this.isPreventSelect) {
218
- parent.trigger('rotating', transitionArgs);
219
- }
220
- this.rotateEvent(transitionArgs, degree);
209
+ if (!this.isPreventSelect) {
210
+ parent.trigger('rotating', transitionArgs);
221
211
  }
212
+ this.rotateEvent(transitionArgs, degree);
222
213
  };
223
214
  Transform.prototype.rotateEvent = function (transitionArgs, degree) {
224
215
  var parent = this.parent;
@@ -280,16 +271,6 @@ var Transform = /** @class */ (function () {
280
271
  parent.setProperties({ zoomSettings: { zoomFactor: 1 } }, true);
281
272
  this.prevZoomValue = parent.zoomSettings.zoomFactor;
282
273
  }
283
- transitionArgs = { previousDegree: transitionArgs.previousDegree, currentDegree: transitionArgs.currentDegree };
284
- if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.rotated.hasDelegate === true) {
285
- var rotatedArgs = { degree: transitionArgs.currentDegree };
286
- parent.dotNetRef.invokeMethodAsync('RotateEventAsync', 'Rotated', null, rotatedArgs);
287
- }
288
- else if (!this.isPreventSelect) { }
289
- if (isBlazor() && parent.events && parent.events.rotating.hasDelegate === true) {
290
- parent.notify('draw', { prop: 'resetStraightenDestPoints' });
291
- parent.notify('draw', { prop: 'setDestForStraighten' });
292
- }
293
274
  }
294
275
  else {
295
276
  parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: parent.prevEventObjPoint } });
@@ -393,22 +374,13 @@ var Transform = /** @class */ (function () {
393
374
  }
394
375
  };
395
376
  Transform.prototype.flipImage = function (direction) {
396
- var _this = this;
397
377
  var parent = this.parent;
398
378
  var transitionArgs = { direction: direction, cancel: false,
399
379
  previousDirection: parent.toPascalCase(parent.transform.currFlipState || direction) };
400
- if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.flipping.hasDelegate === true) {
401
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
402
- parent.dotNetRef.invokeMethodAsync('FlipEventAsync', 'OnFlip', transitionArgs, null).then(function (args) {
403
- _this.flipEvent(args, direction);
404
- });
405
- }
406
- else {
407
- if (!this.isPreventSelect) {
408
- parent.trigger('flipping', transitionArgs);
409
- }
410
- this.flipEvent(transitionArgs, direction);
380
+ if (!this.isPreventSelect) {
381
+ parent.trigger('flipping', transitionArgs);
411
382
  }
383
+ this.flipEvent(transitionArgs, direction);
412
384
  };
413
385
  Transform.prototype.flipEvent = function (transitionArgs, direction) {
414
386
  var parent = this.parent;
@@ -554,12 +526,6 @@ var Transform = /** @class */ (function () {
554
526
  parent.setProperties({ zoomSettings: { zoomFactor: 1 } }, true);
555
527
  this.prevZoomValue = parent.zoomSettings.zoomFactor;
556
528
  }
557
- transitionArgs = { previousDirection: transitionArgs.previousDirection, direction: transitionArgs.direction };
558
- if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.flipped.hasDelegate === true) {
559
- var flipped = { direction: transitionArgs.direction };
560
- parent.dotNetRef.invokeMethodAsync('FlipEventAsync', 'Flipped', null, flipped);
561
- }
562
- else { }
563
529
  };
564
530
  Transform.prototype.updateFlipState = function (direction) {
565
531
  var degree = this.parent.transform.degree;
@@ -633,15 +599,12 @@ var Transform = /** @class */ (function () {
633
599
  }
634
600
  };
635
601
  Transform.prototype.zoomAction = function (zoomFactor, zoomPoint, isResize, isPreventApply) {
636
- var _this = this;
637
602
  var parent = this.parent;
638
603
  if (!parent.disabled && parent.isImageLoaded) {
639
604
  if (isNullOrUndefined(isResize) && (parent.zoomSettings.zoomFactor >= parent.zoomSettings.maxZoomFactor && zoomFactor > 0 ||
640
605
  (parent.zoomSettings.zoomFactor > parent.zoomSettings.minZoomFactor && zoomFactor < 0 && this.disableZoomOutBtn(true)) ||
641
606
  (parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor && zoomFactor < 0))) {
642
- if (!isBlazor()) {
643
- parent.notify('toolbar', { prop: 'zoom-up-handler', onPropertyChange: false });
644
- }
607
+ parent.notify('toolbar', { prop: 'zoom-up-handler', onPropertyChange: false });
645
608
  return;
646
609
  }
647
610
  parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
@@ -697,31 +660,10 @@ var Transform = /** @class */ (function () {
697
660
  var previousZoomFactor = parent.zoomSettings.zoomFactor - (zoomFactor * 10);
698
661
  var zoomEventArgs = { zoomPoint: zoomPoint, cancel: false, previousZoomFactor: previousZoomFactor,
699
662
  currentZoomFactor: parent.zoomSettings.zoomFactor, zoomTrigger: obj['zoomType'] };
700
- if (!parent.isCropToolbar && isBlazor() && parent.isZoomBtnClick && parent.events && parent.events.zooming.hasDelegate === true) {
701
- zoomEventArgs.zoomTrigger = parseInt(this.getZoomTriggerType(zoomEventArgs.zoomTrigger));
702
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
703
- parent.dotNetRef.invokeMethodAsync('ZoomEventAsync', 'OnZoom', zoomEventArgs, null).then(function (args) {
704
- _this.zoomEvent(args, zoomFactor, isPreventApply);
705
- });
663
+ if (!parent.isCropToolbar && parent.isZoomBtnClick) {
664
+ parent.trigger('zooming', zoomEventArgs);
706
665
  }
707
- else {
708
- if (!parent.isCropToolbar && parent.isZoomBtnClick) {
709
- parent.trigger('zooming', zoomEventArgs);
710
- }
711
- this.zoomEvent(zoomEventArgs, zoomFactor, isPreventApply);
712
- }
713
- }
714
- };
715
- Transform.prototype.getZoomTriggerType = function (type) {
716
- switch (type) {
717
- case 'MouseWheel':
718
- return '1';
719
- case 'Pinch':
720
- return '2';
721
- case 'Commands':
722
- return '4';
723
- default:
724
- return '8';
666
+ this.zoomEvent(zoomEventArgs, zoomFactor, isPreventApply);
725
667
  }
726
668
  };
727
669
  Transform.prototype.zoomEvent = function (zoomEventArgs, zoomFact, isPreventApply) {
@@ -731,13 +673,7 @@ var Transform = /** @class */ (function () {
731
673
  parent.isZoomBtnClick = false;
732
674
  return;
733
675
  }
734
- if (!isBlazor()) {
735
- parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
736
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
737
- }
738
- else if ((parent.currentToolbar !== 'resize-toolbar' && parent.currentToolbar !== 'crop-toolbar') && parent.element.querySelector('.e-contextual-toolbar-wrapper') && !parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.contains('e-hidden')) {
739
- parent.updateToolbar(parent.element, 'closeContextualToolbar');
740
- }
676
+ parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
741
677
  parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
742
678
  value: { x: null, y: null, isMouseDown: true } });
743
679
  parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
@@ -834,25 +770,14 @@ var Transform = /** @class */ (function () {
834
770
  }
835
771
  parent.isUndoRedo = false;
836
772
  var zoomOut;
837
- if (!isBlazor()) {
838
- zoomOut = document.querySelector('#' + parent.element.id + '_zoomOut');
839
- if (zoomOut && zoomFactor <= minZoomFactor) {
840
- zoomOut.classList.add('e-disabled');
841
- zoomOut.parentElement.classList.add('e-overlay');
842
- }
843
- else if (zoomOut) {
844
- zoomOut.classList.remove('e-disabled');
845
- zoomOut.parentElement.classList.remove('e-overlay');
846
- }
773
+ zoomOut = document.querySelector('#' + parent.element.id + '_zoomOut');
774
+ if (zoomOut && zoomFactor <= minZoomFactor) {
775
+ zoomOut.classList.add('e-disabled');
776
+ zoomOut.parentElement.classList.add('e-overlay');
847
777
  }
848
- else {
849
- zoomOut = parent.element.querySelector('#zoomout');
850
- if (zoomOut && zoomFactor <= minZoomFactor) {
851
- zoomOut.classList.add('e-overlay');
852
- }
853
- else if (zoomOut) {
854
- zoomOut.classList.remove('e-overlay');
855
- }
778
+ else if (zoomOut) {
779
+ zoomOut.classList.remove('e-disabled');
780
+ zoomOut.parentElement.classList.remove('e-overlay');
856
781
  }
857
782
  this.autoEnablePan();
858
783
  if (this.tempActiveObj) {
@@ -873,26 +798,13 @@ var Transform = /** @class */ (function () {
873
798
  parent.objColl.pop();
874
799
  parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj, isCropRatio: null,
875
800
  points: null, isPreventDrag: true, saveContext: null, isPreventSelection: null } });
876
- if (!isBlazor()) {
877
- parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
878
- parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
879
- }
880
- }
881
- if (!isBlazor()) {
882
- parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
883
- }
884
- else {
885
- parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
801
+ parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
802
+ parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
886
803
  }
804
+ parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
887
805
  parent.notify('selection', { prop: 'setZoomType', onPropertyChange: false, value: { zoomType: 'Toolbar' } });
888
806
  zoomEventArgs = { zoomPoint: zoomEventArgs.zoomPoint, previousZoomFactor: zoomEventArgs.previousZoomFactor, currentZoomFactor: zoomEventArgs.currentZoomFactor, zoomTrigger: zoomEventArgs.zoomTrigger };
889
- if (isBlazor() && !parent.isCropToolbar && parent.isZoomBtnClick && parent.events && parent.events.zoomed.hasDelegate === true) {
890
- zoomEventArgs.zoomTrigger = typeof zoomEventArgs.zoomTrigger !== 'number' ? parseInt(this.getZoomTriggerType(zoomEventArgs.zoomTrigger)) : zoomEventArgs.zoomTrigger;
891
- var zoomedArgs = { zoomPoint: zoomEventArgs.zoomPoint, zoomFactor: zoomEventArgs.currentZoomFactor, zoomTrigger: zoomEventArgs.zoomTrigger };
892
- parent.dotNetRef.invokeMethodAsync('ZoomEventAsync', 'Zoomed', null, zoomedArgs);
893
- parent.isZoomBtnClick = false;
894
- }
895
- else if (!parent.isCropToolbar && parent.isZoomBtnClick) {
807
+ if (!parent.isCropToolbar && parent.isZoomBtnClick) {
896
808
  parent.isZoomBtnClick = false;
897
809
  }
898
810
  };
@@ -904,12 +816,7 @@ var Transform = /** @class */ (function () {
904
816
  if (!isNullOrUndefined(isZoomOut)) {
905
817
  parent.transform.zoomFactor -= 0.1;
906
818
  }
907
- if (isBlazor()) {
908
- zoomOut = parent.element.querySelector('#zoomout');
909
- }
910
- else {
911
- zoomOut = parent.element.querySelector('#' + parent.element.id + '_zoomOut');
912
- }
819
+ zoomOut = parent.element.querySelector('#' + parent.element.id + '_zoomOut');
913
820
  var destPoints = { destLeft: parent.img.destLeft, destTop: parent.img.destTop,
914
821
  destWidth: parent.img.destWidth, destHeight: parent.img.destHeight };
915
822
  if (parent.activeObj.shape) {
@@ -921,23 +828,13 @@ var Transform = /** @class */ (function () {
921
828
  actPoint.startY || parent.img.destLeft + parent.img.destWidth <
922
829
  actPoint.endX || parent.img.destTop + parent.img.destHeight < actPoint.endY
923
830
  || zoomFactor === minZoomFactor) {
924
- if (!isBlazor()) {
925
- zoomOut.classList.add('e-disabled');
926
- zoomOut.parentElement.classList.add('e-overlay');
927
- }
928
- else {
929
- zoomOut.classList.add('e-overlay');
930
- }
831
+ zoomOut.classList.add('e-disabled');
832
+ zoomOut.parentElement.classList.add('e-overlay');
931
833
  isDisabled = true;
932
834
  }
933
835
  else {
934
- if (!isBlazor()) {
935
- zoomOut.classList.remove('e-disabled');
936
- zoomOut.parentElement.classList.remove('e-overlay');
937
- }
938
- else {
939
- zoomOut.classList.remove('e-overlay');
940
- }
836
+ zoomOut.classList.remove('e-disabled');
837
+ zoomOut.parentElement.classList.remove('e-overlay');
941
838
  isDisabled = false;
942
839
  }
943
840
  }
@@ -949,23 +846,13 @@ var Transform = /** @class */ (function () {
949
846
  parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: obj } });
950
847
  if (obj['isIntersect'] ||
951
848
  zoomFactor === minZoomFactor) {
952
- if (!isBlazor()) {
953
- zoomOut.classList.add('e-disabled');
954
- zoomOut.parentElement.classList.add('e-overlay');
955
- }
956
- else {
957
- zoomOut.classList.add('e-overlay');
958
- }
849
+ zoomOut.classList.add('e-disabled');
850
+ zoomOut.parentElement.classList.add('e-overlay');
959
851
  isDisabled = true;
960
852
  }
961
853
  else {
962
- if (!isBlazor()) {
963
- zoomOut.classList.remove('e-disabled');
964
- zoomOut.parentElement.classList.remove('e-overlay');
965
- }
966
- else {
967
- zoomOut.classList.remove('e-overlay');
968
- }
854
+ zoomOut.classList.remove('e-disabled');
855
+ zoomOut.parentElement.classList.remove('e-overlay');
969
856
  isDisabled = false;
970
857
  }
971
858
  }
@@ -1199,23 +1086,12 @@ var Transform = /** @class */ (function () {
1199
1086
  return maxDimension;
1200
1087
  };
1201
1088
  Transform.prototype.drawPannedImage = function (xDiff, yDiff) {
1202
- var _this = this;
1203
1089
  var parent = this.parent;
1204
1090
  var obj = { panDown: null };
1205
1091
  parent.notify('selection', { prop: 'getPanDown', onPropertyChange: false, value: { obj: obj } });
1206
1092
  var panEventArgs = { startPoint: obj['panDown'], endPoint: this.panMove, cancel: false };
1207
- if (isBlazor() && isNullOrUndefined(parent.eventType) && parent.events && parent.events.onPanStart.hasDelegate === true) {
1208
- parent.eventType = 'pan';
1209
- parent.panEventArgs = panEventArgs;
1210
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
1211
- parent.dotNetRef.invokeMethodAsync('PanEventAsync', 'OnPanStart', panEventArgs).then(function (args) {
1212
- _this.panEvent(args, xDiff, yDiff);
1213
- });
1214
- }
1215
- else {
1216
- parent.trigger('panning', panEventArgs);
1217
- this.panEvent(panEventArgs, xDiff, yDiff);
1218
- }
1093
+ parent.trigger('panning', panEventArgs);
1094
+ this.panEvent(panEventArgs, xDiff, yDiff);
1219
1095
  };
1220
1096
  Transform.prototype.panEvent = function (panEventArgs, xDiff, yDiff) {
1221
1097
  if (panEventArgs.cancel) {
@@ -1666,44 +1542,25 @@ var Transform = /** @class */ (function () {
1666
1542
  }
1667
1543
  var frameObj = { bool: null };
1668
1544
  parent.notify('toolbar', { prop: 'getFrameToolbar', onPropertyChange: false, value: { obj: frameObj } });
1669
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
1670
- if (frameObj['bool'] || (isBlazor() && parent.currentToolbar === 'frame-toolbar')) {
1671
- isFrameToolbar = true;
1672
- }
1673
1545
  if (!straightenObj['bool'] && ((ctToolbar && !ctToolbar.parentElement.classList.contains('e-hide')) ||
1674
1546
  (hdWrapper && !hdWrapper.parentElement.classList.contains('e-hide')))) {
1675
1547
  ctWrapper.classList.add('e-hide');
1676
1548
  if (!isCropSelection) {
1677
1549
  parent.okBtn();
1678
1550
  }
1679
- if (!isBlazor()) {
1680
- parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
1681
- parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
1682
- }
1683
- else {
1684
- parent.updateToolbar(parent.element, 'imageLoaded');
1685
- }
1551
+ parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
1552
+ parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
1686
1553
  }
1687
1554
  parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: freehandObj } });
1688
1555
  if (freehandObj['bool']) {
1689
- if (!isBlazor()) {
1690
- parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
1691
- }
1692
- else {
1693
- parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
1694
- }
1556
+ parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
1695
1557
  }
1696
1558
  if (parent.activeObj.shape !== undefined) {
1697
1559
  isActiveObj = true;
1698
1560
  if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
1699
1561
  parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
1700
1562
  value: { x: null, y: null, isMouseDown: null } });
1701
- if (isBlazor()) {
1702
- parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
1703
- }
1704
- else {
1705
- parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
1706
- }
1563
+ parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
1707
1564
  }
1708
1565
  else {
1709
1566
  parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
@@ -1723,9 +1580,15 @@ var Transform = /** @class */ (function () {
1723
1580
  }
1724
1581
  else if (parent.element.querySelector('#' + parent.element.id + '_toolbar')) {
1725
1582
  toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').clientHeight;
1583
+ if (toolbarHeight === 0 && parent.toolbar && parent.toolbar.length > 0 && parent.toolbar.indexOf('Open') === -1) {
1584
+ var obj = { toolbarHeight: 0 };
1585
+ parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj } });
1586
+ toolbarHeight = obj['toolbarHeight'];
1587
+ }
1726
1588
  }
1727
- if (Browser.isDevice && straightenObj['bool']) {
1728
- cxtTbarHeight = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea').clientHeight;
1589
+ var ctxTbarArea = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea');
1590
+ if (Browser.isDevice && straightenObj['bool'] && ctxTbarArea) {
1591
+ cxtTbarHeight = ctxTbarArea.clientHeight;
1729
1592
  }
1730
1593
  parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: toolbarHeight } });
1731
1594
  if (Browser.isDevice) {
@@ -1762,10 +1625,8 @@ var Transform = /** @class */ (function () {
1762
1625
  if (canvasWrapper) {
1763
1626
  canvasWrapper.style.width = parent.element.offsetWidth - 2 + 'px';
1764
1627
  canvasWrapper.style.height = parent.element.offsetHeight + 'px';
1765
- var obj_1 = { toolbarHeight: !isBlazor() ? 0 : parent.toolbarHeight };
1766
- if (!isBlazor()) {
1767
- parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj_1 } });
1768
- }
1628
+ var obj_1 = { toolbarHeight: 0 };
1629
+ parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj_1 } });
1769
1630
  if (Browser.isDevice) {
1770
1631
  canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * obj_1['toolbarHeight']) - cxtTbarHeight) - 4 + 'px';
1771
1632
  }
@@ -1817,15 +1678,13 @@ var Transform = /** @class */ (function () {
1817
1678
  hideSpinner(parent.element);
1818
1679
  parent.element.style.opacity = '1';
1819
1680
  var obj1 = { defToolbarItems: null };
1820
- if (!isBlazor()) {
1821
- parent.notify('toolbar', { prop: 'getDefToolbarItems', value: { obj: obj1 } });
1822
- if (obj1['defToolbarItems'] && obj1['defToolbarItems'].length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
1823
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
1824
- var toolbar_1 = getComponent(parent.element.id + '_toolbar', 'toolbar');
1825
- toolbar_1.refreshOverflow();
1826
- if (ctWrapper && !straightenObj['bool']) {
1827
- ctWrapper.classList.add('e-hide');
1828
- }
1681
+ parent.notify('toolbar', { prop: 'getDefToolbarItems', value: { obj: obj1 } });
1682
+ if (obj1['defToolbarItems'] && obj1['defToolbarItems'].length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
1683
+ /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
1684
+ var toolbar_1 = getComponent(parent.element.id + '_toolbar', 'toolbar');
1685
+ toolbar_1.refreshOverflow();
1686
+ if (ctWrapper && !straightenObj['bool']) {
1687
+ ctWrapper.classList.add('e-hide');
1829
1688
  }
1830
1689
  }
1831
1690
  parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
@@ -1850,43 +1709,23 @@ var Transform = /** @class */ (function () {
1850
1709
  if (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse' || parent.activeObj.shape === 'text' ||
1851
1710
  parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path' ||
1852
1711
  parent.activeObj.shape === 'image') {
1853
- if (!isBlazor()) {
1854
- parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
1855
- }
1856
- else {
1857
- parent.updateToolbar(parent.element, 'quickAccessToolbar', parent.activeObj.shape);
1858
- }
1712
+ parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
1859
1713
  }
1860
1714
  }
1861
1715
  }
1862
1716
  if (freehandObj['bool']) {
1863
- if (isBlazor()) {
1864
- parent.updateToolbar(parent.element, 'quickAccessToolbar', 'pen');
1865
- }
1866
- else {
1867
- parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
1868
- }
1717
+ parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
1869
1718
  }
1870
1719
  if (isFrameToolbar) {
1871
- if (isBlazor()) {
1872
- parent.updateToolbar(parent.element, 'frame');
1873
- }
1874
- else {
1875
- parent.notify('toolbar', { prop: 'callFrameToolbar', onPropertyChange: false });
1876
- }
1720
+ parent.notify('toolbar', { prop: 'callFrameToolbar', onPropertyChange: false });
1877
1721
  }
1878
1722
  else if (parent.isResize) {
1879
1723
  parent.aspectWidth = Math.ceil(parent.img.destWidth);
1880
1724
  parent.aspectHeight = Math.ceil(parent.img.destHeight);
1881
- if (isBlazor()) {
1882
- parent.updateToolbar(parent.element, 'resize');
1883
- }
1884
- else {
1885
- parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
1886
- isApplyBtn: false, isCropping: false } });
1887
- parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
1888
- isApplyBtn: false, isCropping: false } });
1889
- }
1725
+ parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
1726
+ isApplyBtn: false, isCropping: false } });
1727
+ parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
1728
+ isApplyBtn: false, isCropping: false } });
1890
1729
  }
1891
1730
  if ((parent.transform.degree !== 0 || parent.transform.currFlipState !== '') && parent.transform.defaultZoomFactor > 0) {
1892
1731
  var totalPannedPoint = extend({}, parent.panPoint.totalPannedPoint, null, true);
@@ -1912,24 +1751,14 @@ var Transform = /** @class */ (function () {
1912
1751
  else if (parent.transform.degree !== 0 && parent.transform.cropZoomFactor > 0) {
1913
1752
  parent.transform.zoomFactor = 0;
1914
1753
  parent.transform.cropZoomFactor = null;
1915
- if (isBlazor()) {
1916
- parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
1917
- }
1918
- else {
1919
- parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
1920
- }
1754
+ parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
1921
1755
  }
1922
1756
  }
1923
1757
  };
1924
1758
  Transform.prototype.calcMaxDimension = function (width, height, obj, isImgShape) {
1925
1759
  var object = { toolbarHeight: 0 };
1926
1760
  var parent = this.parent;
1927
- if (!isBlazor()) {
1928
- parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: object } });
1929
- }
1930
- else {
1931
- object['toolbarHeight'] = parent.toolbarHeight;
1932
- }
1761
+ parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: object } });
1933
1762
  var canvasMaxWidth = isImgShape ? parent.element.clientWidth / 3 :
1934
1763
  parent.element.clientWidth;
1935
1764
  var canvasMaxHeight = isImgShape ? (parent.element.clientHeight - object['toolbarHeight']) / 3 :
@@ -2267,7 +2096,6 @@ var Transform = /** @class */ (function () {
2267
2096
  height: parent.img.srcHeight };
2268
2097
  };
2269
2098
  Transform.prototype.resize = function (width, height, isAspectRatio) {
2270
- var _this = this;
2271
2099
  var parent = this.parent;
2272
2100
  parent.isResize = true;
2273
2101
  if (isNullOrUndefined(parent.prevCropObj) && isNullOrUndefined(parent.prevObj)) {
@@ -2281,36 +2109,20 @@ var Transform = /** @class */ (function () {
2281
2109
  parent.notify('toolbar', { prop: 'init-main-toolbar', value: { isApplyBtn: false, isDevice: true, isOkBtn: true, isResize: true } });
2282
2110
  }
2283
2111
  }
2112
+ var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
2113
+ var aspectHeight = aspectRatioHeight.value === '' ? aspectRatioHeight.placeholder : aspectRatioHeight.value;
2284
2114
  var resizeEventArgs = { cancel: false, previousWidth: Math.ceil(parent.img.destWidth),
2285
2115
  previousHeight: Math.ceil(parent.img.destHeight), width: Math.ceil(width), height: height && height !== 0 ? Math.ceil(height) :
2286
- (parent.aspectHeight ? parent.aspectHeight : Math.ceil(parent.img.destHeight)),
2116
+ (isAspectRatio ? Math.ceil(parseFloat(aspectHeight)) : Math.ceil(parent.img.destHeight)),
2287
2117
  isAspectRatio: isAspectRatio ? isAspectRatio : false };
2288
- if (!isBlazor()) {
2289
- parent.trigger('resizing', resizeEventArgs);
2290
- if (!resizeEventArgs.cancel) {
2291
- this.resizeEventHandler(resizeEventArgs);
2292
- }
2293
- else if (parent.aspectHeight && parent.aspectWidth) {
2294
- parent.aspectHeight = resizeEventArgs.previousHeight;
2295
- parent.aspectWidth = resizeEventArgs.previousWidth;
2296
- }
2297
- }
2298
- else if (isBlazor() && parent.events && parent.events.imageResizing.hasDelegate === true && !parent.isResizeOkBtn) {
2299
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
2300
- parent.dotNetRef.invokeMethodAsync('OnImageResizingAsync', 'ImageResizing', resizeEventArgs, null).then(function (args) {
2301
- _this.resizeEventCancel = args.cancel;
2302
- if (!args.cancel) {
2303
- _this.resizeEventHandler(args);
2304
- }
2305
- else if (parent.aspectHeight && parent.aspectWidth) {
2306
- parent.aspectHeight = resizeEventArgs.previousHeight;
2307
- parent.aspectWidth = resizeEventArgs.previousWidth;
2308
- }
2309
- });
2310
- }
2311
- else if (!this.resizeEventCancel) {
2118
+ parent.trigger('resizing', resizeEventArgs);
2119
+ if (!resizeEventArgs.cancel) {
2312
2120
  this.resizeEventHandler(resizeEventArgs);
2313
2121
  }
2122
+ else if (parent.aspectHeight && parent.aspectWidth) {
2123
+ parent.aspectHeight = resizeEventArgs.previousHeight;
2124
+ parent.aspectWidth = resizeEventArgs.previousWidth;
2125
+ }
2314
2126
  };
2315
2127
  Transform.prototype.resizeEventHandler = function (args) {
2316
2128
  var parent = this.parent;
@@ -2329,13 +2141,7 @@ var Transform = /** @class */ (function () {
2329
2141
  var originalWidth = parent.img.destWidth;
2330
2142
  var originalHeight = parent.img.destHeight;
2331
2143
  var aspectRatioWidthValue = void 0;
2332
- if (!isBlazor()) {
2333
- aspectRatioWidthValue = parseFloat(aspectRatioWidth.value === '' ? aspectRatioWidth.placeholder :
2334
- aspectRatioWidth.value);
2335
- }
2336
- else {
2337
- aspectRatioWidthValue = parseFloat(widthElem.value === '' ? widthElem.placeholder : widthElem.value);
2338
- }
2144
+ aspectRatioWidthValue = parseFloat(aspectRatioWidth.value === '' ? aspectRatioWidth.placeholder : aspectRatioWidth.value);
2339
2145
  if (aspectRatioHeight) {
2340
2146
  var value = aspectRatioWidthValue / (originalWidth / originalHeight);
2341
2147
  var height = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
@@ -2383,28 +2189,17 @@ var Transform = /** @class */ (function () {
2383
2189
  parent.notify('undo-redo', { prop: 'setPreventUR', value: { bool: false } });
2384
2190
  parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
2385
2191
  height: parent.img.srcHeight };
2386
- if (isBlazor()) {
2387
- parent.updateToolbar(parent.element, 'resize');
2388
- }
2389
- else {
2390
- parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
2391
- isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
2392
- parent.notify('transform', { prop: 'setPreventDownScale', value: { bool: false } });
2393
- parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
2394
- isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
2395
- }
2192
+ parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
2193
+ isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
2194
+ parent.notify('transform', { prop: 'setPreventDownScale', value: { bool: false } });
2195
+ parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
2196
+ isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
2396
2197
  }
2397
2198
  else {
2398
2199
  parent.notify('transform', { prop: 'resizeCrop', value: { width: args.width, height: args.height } });
2399
2200
  }
2400
2201
  }
2401
2202
  this.resizedImgAngle = parent.transform.degree;
2402
- args = { previousHeight: args.previousHeight, previousWidth: args.previousWidth, width: args.width, height: args.height, isAspectRatio: args.isAspectRatio };
2403
- if (isBlazor() && parent.isResizeOkBtn && parent.events && parent.events.imageResized.hasDelegate === true) {
2404
- var resizeArgs = { width: args.width, height: args.height, isAspectRatio: args.isAspectRatio };
2405
- parent.dotNetRef.invokeMethodAsync('OnImageResizingAsync', 'ImageResized', null, resizeArgs);
2406
- }
2407
- else { }
2408
2203
  };
2409
2204
  Transform.prototype.straightenImage = function (degree) {
2410
2205
  var parent = this.parent;
@@ -2412,13 +2207,7 @@ var Transform = /** @class */ (function () {
2412
2207
  parent.notify('draw', { prop: 'select', onPropertyChange: false,
2413
2208
  value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
2414
2209
  }
2415
- if (isBlazor()) {
2416
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
2417
- parent.performCropClick();
2418
- }
2419
- else {
2420
- parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: null } });
2421
- }
2210
+ parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: null } });
2422
2211
  parent.setStraighten(degree, true);
2423
2212
  parent.okBtn();
2424
2213
  };
@@ -38,7 +38,6 @@ export declare class UndoRedo {
38
38
  private updateTextBox;
39
39
  private undoDefault;
40
40
  private endUndoRedo;
41
- private getImageAction;
42
41
  private updateUrc;
43
42
  private updateUrObj;
44
43
  private updateUndoRedo;