@syncfusion/ej2-image-editor 20.3.47 → 20.3.48

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 (13) hide show
  1. package/CHANGELOG.md +8 -0
  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 +72 -54
  5. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es5.js +72 -54
  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 +9 -9
  12. package/src/image-editor/image-editor.d.ts +0 -1
  13. package/src/image-editor/image-editor.js +72 -54
package/dist/es6/ej2-image-editor.es2015.js CHANGED
@@ -46,7 +46,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
46
46
  this.dragPoint = { startX: 0, startY: 0, endX: 0, endY: 0 }; // updates drag start and end points in mousedown and mousemove
47
47
  this.diffPoint = { x: 0, y: 0 }; // updates resize points
48
48
  this.oldPoint = {};
49
- this.zoomedImg = { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 }; // calculates zoomed image's points
50
49
  this.objColl = []; // shapes, text obj collection
51
50
  this.undoRedoColl = [];
52
51
  this.imgDataColl = []; // collection of Image Data mainly used for reset state
@@ -2096,8 +2095,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
2096
2095
  }
2097
2096
  }
2098
2097
  updateCanvas() {
2099
- this.zoomedImg.width = this.baseImg.width;
2100
- this.zoomedImg.height = this.baseImg.height;
2101
2098
  this.lastX = this.baseImg.width / 2;
2102
2099
  this.lastY = this.baseImg.height / 2;
2103
2100
  let wrapperWidth;
@@ -2517,6 +2514,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
2517
2514
  EventHandler.add(this.upperCanvas, 'touchmove', this.mouseMoveEventHandler, this); // Unbind mousedown to prevent double triggers from touch devices
2518
2515
  }
2519
2516
  mouseDownEventHandler(e) {
2517
+ if (e.type === 'touchstart' && e.currentTarget === this.lowerCanvas && this.imgDataColl.length === 0) {
2518
+ return;
2519
+ }
2520
2520
  const ratio = this.calcRatio();
2521
2521
  if (this.dragCanvas) {
2522
2522
  this.canvasMouseDownHandler(e);
@@ -2827,6 +2827,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
2827
2827
  this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
2828
2828
  this.lowerCanvas.width = this.upperCanvas.width = this.element.offsetWidth;
2829
2829
  this.lowerCanvas.height = this.upperCanvas.height = this.element.offsetHeight;
2830
+ const canvasWrapper = document.querySelector('#' + this.element.id + '_canvasWrapper');
2831
+ if (!isNullOrUndefined(canvasWrapper)) {
2832
+ canvasWrapper.style.width = this.element.offsetWidth + 'px';
2833
+ canvasWrapper.style.height = this.element.offsetHeight + 'px';
2834
+ if (Browser.isDevice) {
2835
+ canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * this.toolbarHeight)) - 3 + 'px';
2836
+ }
2837
+ else {
2838
+ canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - this.toolbarHeight) - 3 + 'px';
2839
+ }
2840
+ }
2830
2841
  this.redrawImg();
2831
2842
  // eslint-disable-next-line @typescript-eslint/tslint/config
2832
2843
  this.lowerCanvas.toBlob(function (blob) {
@@ -2841,7 +2852,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
2841
2852
  screenOrientation() {
2842
2853
  if (Browser.isDevice) {
2843
2854
  this.isScreenOriented = true;
2844
- this.adjustToScreen();
2855
+ setTimeout(this.adjustToScreen.bind(this), 100);
2845
2856
  }
2846
2857
  }
2847
2858
  windowResizeHandler() {
@@ -3637,24 +3648,28 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
3637
3648
  this.textBox.value = actObj.keyHistory;
3638
3649
  this.textBox.style.overflow = 'hidden';
3639
3650
  this.textBox.style.height = 'auto';
3640
- this.setTextBoxWidth();
3641
- this.setTextBoxHeight();
3642
3651
  if (degree % 90 === 0 && degree % 180 !== 0 && degree !== 0) {
3643
3652
  if (this.factor === 1) {
3653
+ this.textBox.style.width = (actObj.activePoint.height / ratio.height) + 'px';
3644
3654
  this.textBox.style.height = (actObj.activePoint.width / ratio.width) + 'px';
3645
3655
  }
3646
3656
  else {
3657
+ this.textBox.style.width = actObj.activePoint.height + 'px';
3647
3658
  this.textBox.style.height = actObj.activePoint.width + 'px';
3648
3659
  }
3649
3660
  }
3650
3661
  else {
3651
3662
  if (this.factor === 1) {
3663
+ this.textBox.style.width = (actObj.activePoint.width / ratio.width) + 'px';
3652
3664
  this.textBox.style.height = (actObj.activePoint.height / ratio.height) + 'px';
3653
3665
  }
3654
3666
  else {
3667
+ this.textBox.style.width = actObj.activePoint.width + 'px';
3655
3668
  this.textBox.style.height = actObj.activePoint.height + 'px';
3656
3669
  }
3657
3670
  }
3671
+ this.setTextBoxWidth();
3672
+ this.setTextBoxHeight();
3658
3673
  }
3659
3674
  else {
3660
3675
  this.applyActObj();
@@ -3687,42 +3702,55 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
3687
3702
  }
3688
3703
  if (degree === 0) {
3689
3704
  if (flip.toLowerCase() === 'vertical') {
3690
- this.textBox.style.maxHeight = ((this.lowerCanvas.height - (this.lowerCanvas.height - actObj.activePoint.endY)) / ratio.height) + 'px';
3705
+ this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxHeight) - (parseFloat(this.lowerCanvas.style.maxHeight)
3706
+ - parseFloat(this.textBox.style.top))) + 'px';
3691
3707
  }
3692
3708
  else {
3693
3709
  textBoxTop = parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top);
3694
- this.textBox.style.maxHeight = ((this.lowerCanvas.height / ratio.height) - textBoxTop) + 'px';
3710
+ this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxHeight) - textBoxTop) + 'px';
3695
3711
  }
3696
3712
  }
3697
3713
  else if (degree === 90) {
3698
3714
  if (flip.toLowerCase() === 'horizontal') {
3699
- this.textBox.style.maxHeight = ((this.lowerCanvas.width - actObj.activePoint.startX) / ratio.width) + 'px';
3715
+ this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
3716
+ - parseFloat(this.lowerCanvas.style.left))) + 'px';
3700
3717
  }
3701
3718
  else {
3702
- this.textBox.style.maxHeight = ((this.lowerCanvas.width - (this.lowerCanvas.width - actObj.activePoint.endX)) / ratio.width) + 'px';
3719
+ this.textBox.style.maxHeight = (parseFloat(this.textBox.style.left)
3720
+ - parseFloat(this.lowerCanvas.style.left)) + 'px';
3703
3721
  }
3704
3722
  }
3705
3723
  else if (degree === 180) {
3706
3724
  if (flip.toLowerCase() === 'vertical') {
3707
- this.textBox.style.maxHeight = ((this.lowerCanvas.height - actObj.activePoint.startY) / ratio.height) + 'px';
3725
+ textBoxTop = parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top);
3726
+ this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxHeight) - textBoxTop) + 'px';
3708
3727
  }
3709
3728
  else {
3710
- this.textBox.style.maxHeight = ((this.lowerCanvas.height - (this.lowerCanvas.height - actObj.activePoint.endY)) / ratio.height) + 'px';
3729
+ this.textBox.style.maxHeight = (parseFloat(this.textBox.style.top)
3730
+ - parseFloat(this.lowerCanvas.style.top)) + 'px';
3711
3731
  }
3712
3732
  }
3713
3733
  else if (degree === 270) {
3714
3734
  if (flip.toLowerCase() === 'horizontal') {
3715
- this.textBox.style.maxHeight = ((this.lowerCanvas.width - (this.lowerCanvas.width - actObj.activePoint.endX)) / ratio.width) + 'px';
3735
+ this.textBox.style.maxHeight = (parseFloat(this.textBox.style.left)
3736
+ - parseFloat(this.lowerCanvas.style.left)) + 'px';
3716
3737
  }
3717
3738
  else {
3718
- this.textBox.style.maxHeight = ((this.lowerCanvas.width - actObj.activePoint.startX) / ratio.width) + 'px';
3739
+ this.textBox.style.maxHeight = parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
3740
+ - parseFloat(this.lowerCanvas.style.left)) + 'px';
3719
3741
  }
3720
3742
  }
3721
- this.textBox.style.maxHeight = ((parseFloat(this.textBox.style.maxHeight) - parseFloat(this.textBox.style.fontSize) * 0.5)) * this.factor + 'px';
3743
+ this.textBox.style.maxHeight = ((parseFloat(this.textBox.style.maxHeight) - parseFloat(this.textBox.style.fontSize) * 0.5)) + 'px';
3722
3744
  }
3723
3745
  setTextBoxWidth(e) {
3724
3746
  const ratio = this.calcRatio();
3725
3747
  const text = this.getMaxText(true);
3748
+ if (this.textBox.style.display === 'block') {
3749
+ this.updateFontStyles(true);
3750
+ }
3751
+ else {
3752
+ this.updateFontStyles();
3753
+ }
3726
3754
  let textBoxWidth = (this.upperContext.measureText(text).width + (parseFloat(this.textBox.style.fontSize) / 2));
3727
3755
  let letterWidth = e ? this.upperContext.measureText(String.fromCharCode(e.which)).width : 0;
3728
3756
  let actObj = extend({}, this.activeObj, {}, true);
@@ -3749,56 +3777,56 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
3749
3777
  if ((!isNullOrUndefined(e) && parseFloat(this.textBox.style.width) < (textBoxWidth + letterWidth)) || isNullOrUndefined(e)) {
3750
3778
  if (degree === 0) {
3751
3779
  if (flip.toLowerCase() === 'horizontal') {
3752
- if (actObj.activePoint.endX - textBoxWidth - letterWidth > 0) {
3753
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
3780
+ if ((parseFloat(this.textBox.style.left) - parseFloat(this.lowerCanvas.style.left)) - textBoxWidth - letterWidth > 0) {
3781
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3754
3782
  }
3755
3783
  }
3756
3784
  else {
3757
- if (textBoxWidth + letterWidth + actObj.activePoint.startX < this.lowerCanvas.width) {
3758
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
3785
+ if ((parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
3786
+ - parseFloat(this.lowerCanvas.style.left))) > (textBoxWidth + letterWidth)) {
3787
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3759
3788
  }
3760
3789
  }
3761
3790
  }
3762
3791
  else if (degree === 90) {
3763
3792
  if (flip.toLowerCase() === 'vertical') {
3764
- if (actObj.activePoint.endY - textBoxWidth - letterWidth > 0) {
3765
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
3793
+ if ((parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top)) - textBoxWidth - letterWidth > 0) {
3794
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3766
3795
  }
3767
3796
  }
3768
3797
  else {
3769
- if (textBoxWidth + letterWidth + actObj.activePoint.startY < this.lowerCanvas.height) {
3770
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
3798
+ if ((parseFloat(this.lowerCanvas.style.maxHeight) - (parseFloat(this.textBox.style.top)
3799
+ - parseFloat(this.lowerCanvas.style.top))) > (textBoxWidth + letterWidth)) {
3800
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3771
3801
  }
3772
3802
  }
3773
3803
  }
3774
3804
  else if (degree === 180) {
3775
3805
  if (flip.toLowerCase() === 'horizontal') {
3776
- if (textBoxWidth + letterWidth + actObj.activePoint.startX < this.lowerCanvas.width) {
3777
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
3806
+ if ((parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
3807
+ - parseFloat(this.lowerCanvas.style.left))) > (textBoxWidth + letterWidth)) {
3808
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3778
3809
  }
3779
3810
  }
3780
3811
  else {
3781
- if (actObj.activePoint.endX - textBoxWidth - letterWidth > 0) {
3782
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
3812
+ if ((parseFloat(this.textBox.style.left) - parseFloat(this.lowerCanvas.style.left)) - textBoxWidth - letterWidth > 0) {
3813
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3783
3814
  }
3784
3815
  }
3785
3816
  }
3786
3817
  else if (degree === 270) {
3787
3818
  if (flip.toLowerCase() === 'vertical') {
3788
- if (textBoxWidth + letterWidth + actObj.activePoint.startY < this.lowerCanvas.height) {
3789
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
3819
+ if ((parseFloat(this.lowerCanvas.style.maxHeight) - (parseFloat(this.textBox.style.top)
3820
+ - parseFloat(this.lowerCanvas.style.top))) > (textBoxWidth + letterWidth)) {
3821
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3790
3822
  }
3791
3823
  }
3792
3824
  else {
3793
- if (actObj.activePoint.endY - textBoxWidth - letterWidth > 0) {
3794
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
3825
+ if ((parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top)) - textBoxWidth - letterWidth > 0) {
3826
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3795
3827
  }
3796
3828
  }
3797
3829
  }
3798
- this.textBox.style.width = parseFloat(this.textBox.style.width) * this.factor + 'px';
3799
- if (isNullOrUndefined(e)) {
3800
- this.textBox.style.width = parseFloat(this.textBox.style.width) + parseFloat(this.textBox.style.fontSize) + 'px';
3801
- }
3802
3830
  }
3803
3831
  }
3804
3832
  setActivePoint(startX, startY) {
@@ -5764,7 +5792,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
5764
5792
  this.setActivePoint(width, height);
5765
5793
  }
5766
5794
  }
5767
- updateFontStyles() {
5795
+ updateFontStyles(isTextBox) {
5768
5796
  this.upperContext.strokeStyle = this.activeObj.strokeSettings.strokeColor;
5769
5797
  this.upperContext.fillStyle = this.activeObj.strokeSettings.strokeColor;
5770
5798
  let textStyle = '';
@@ -5777,7 +5805,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
5777
5805
  if (this.activeObj.textSettings.bold && this.activeObj.textSettings.italic) {
5778
5806
  textStyle = 'italic bold ';
5779
5807
  }
5780
- const fontSize = this.activeObj.textSettings.fontSize;
5808
+ const fontSize = isTextBox ? parseFloat(this.textBox.style.fontSize) : this.activeObj.textSettings.fontSize;
5781
5809
  const fontFamily = this.textBox.style.display === 'block' ? this.textBox.style.fontFamily : this.activeObj.textSettings.fontFamily;
5782
5810
  this.upperContext.font = textStyle + fontSize + 'px' + ' ' + fontFamily;
5783
5811
  }
@@ -5893,24 +5921,14 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
5893
5921
  this.degree = 0;
5894
5922
  }
5895
5923
  }
5896
- redrawSelection(isZoomed) {
5924
+ redrawSelection() {
5897
5925
  const ratio = this.calcRatio();
5898
- if (isZoomed) {
5899
- this.activeObj.activePoint.startX = (this.lowerCanvas.width - this.zoomedImg.width) / 2;
5900
- this.activeObj.activePoint.startY = (this.lowerCanvas.height - this.zoomedImg.height) / 2;
5901
- this.activeObj.activePoint.endX = this.activeObj.activePoint.startX + this.zoomedImg.width;
5902
- this.activeObj.activePoint.endY = this.activeObj.activePoint.startY + this.zoomedImg.height;
5903
- this.activeObj.activePoint.width = this.zoomedImg.width;
5904
- this.activeObj.activePoint.height = this.zoomedImg.height;
5905
- }
5906
- else {
5907
- this.activeObj.activePoint.startX = 0;
5908
- this.activeObj.activePoint.startY = 0;
5909
- this.activeObj.activePoint.endX = this.lowerCanvas.width;
5910
- this.activeObj.activePoint.endY = this.lowerCanvas.height;
5911
- this.activeObj.activePoint.width = this.activeObj.activePoint.endX - this.activeObj.activePoint.startX;
5912
- this.activeObj.activePoint.height = this.activeObj.activePoint.endY - this.activeObj.activePoint.startY;
5913
- }
5926
+ this.activeObj.activePoint.startX = 0;
5927
+ this.activeObj.activePoint.startY = 0;
5928
+ this.activeObj.activePoint.endX = this.lowerCanvas.width;
5929
+ this.activeObj.activePoint.endY = this.lowerCanvas.height;
5930
+ this.activeObj.activePoint.width = this.activeObj.activePoint.endX - this.activeObj.activePoint.startX;
5931
+ this.activeObj.activePoint.height = this.activeObj.activePoint.endY - this.activeObj.activePoint.startY;
5914
5932
  this.updateActiveObject(ratio, this.activeObj.activePoint, this.activeObj);
5915
5933
  this.drawObject('duplicate', this.activeObj);
5916
5934
  }