@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.es5.js CHANGED
@@ -59,7 +59,6 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
59
59
  _this.dragPoint = { startX: 0, startY: 0, endX: 0, endY: 0 }; // updates drag start and end points in mousedown and mousemove
60
60
  _this.diffPoint = { x: 0, y: 0 }; // updates resize points
61
61
  _this.oldPoint = {};
62
- _this.zoomedImg = { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 }; // calculates zoomed image's points
63
62
  _this.objColl = []; // shapes, text obj collection
64
63
  _this.undoRedoColl = [];
65
64
  _this.imgDataColl = []; // collection of Image Data mainly used for reset state
@@ -2129,8 +2128,6 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
2129
2128
  }
2130
2129
  };
2131
2130
  ImageEditor.prototype.updateCanvas = function () {
2132
- this.zoomedImg.width = this.baseImg.width;
2133
- this.zoomedImg.height = this.baseImg.height;
2134
2131
  this.lastX = this.baseImg.width / 2;
2135
2132
  this.lastY = this.baseImg.height / 2;
2136
2133
  var wrapperWidth;
@@ -2551,6 +2548,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
2551
2548
  EventHandler.add(this.upperCanvas, 'touchmove', this.mouseMoveEventHandler, this); // Unbind mousedown to prevent double triggers from touch devices
2552
2549
  };
2553
2550
  ImageEditor.prototype.mouseDownEventHandler = function (e) {
2551
+ if (e.type === 'touchstart' && e.currentTarget === this.lowerCanvas && this.imgDataColl.length === 0) {
2552
+ return;
2553
+ }
2554
2554
  var ratio = this.calcRatio();
2555
2555
  if (this.dragCanvas) {
2556
2556
  this.canvasMouseDownHandler(e);
@@ -2862,6 +2862,17 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
2862
2862
  this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
2863
2863
  this.lowerCanvas.width = this.upperCanvas.width = this.element.offsetWidth;
2864
2864
  this.lowerCanvas.height = this.upperCanvas.height = this.element.offsetHeight;
2865
+ var canvasWrapper = document.querySelector('#' + this.element.id + '_canvasWrapper');
2866
+ if (!isNullOrUndefined(canvasWrapper)) {
2867
+ canvasWrapper.style.width = this.element.offsetWidth + 'px';
2868
+ canvasWrapper.style.height = this.element.offsetHeight + 'px';
2869
+ if (Browser.isDevice) {
2870
+ canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * this.toolbarHeight)) - 3 + 'px';
2871
+ }
2872
+ else {
2873
+ canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - this.toolbarHeight) - 3 + 'px';
2874
+ }
2875
+ }
2865
2876
  this.redrawImg();
2866
2877
  // eslint-disable-next-line @typescript-eslint/tslint/config
2867
2878
  this.lowerCanvas.toBlob(function (blob) {
@@ -2876,7 +2887,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
2876
2887
  ImageEditor.prototype.screenOrientation = function () {
2877
2888
  if (Browser.isDevice) {
2878
2889
  this.isScreenOriented = true;
2879
- this.adjustToScreen();
2890
+ setTimeout(this.adjustToScreen.bind(this), 100);
2880
2891
  }
2881
2892
  };
2882
2893
  ImageEditor.prototype.windowResizeHandler = function () {
@@ -3673,24 +3684,28 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
3673
3684
  this.textBox.value = actObj.keyHistory;
3674
3685
  this.textBox.style.overflow = 'hidden';
3675
3686
  this.textBox.style.height = 'auto';
3676
- this.setTextBoxWidth();
3677
- this.setTextBoxHeight();
3678
3687
  if (degree % 90 === 0 && degree % 180 !== 0 && degree !== 0) {
3679
3688
  if (this.factor === 1) {
3689
+ this.textBox.style.width = (actObj.activePoint.height / ratio.height) + 'px';
3680
3690
  this.textBox.style.height = (actObj.activePoint.width / ratio.width) + 'px';
3681
3691
  }
3682
3692
  else {
3693
+ this.textBox.style.width = actObj.activePoint.height + 'px';
3683
3694
  this.textBox.style.height = actObj.activePoint.width + 'px';
3684
3695
  }
3685
3696
  }
3686
3697
  else {
3687
3698
  if (this.factor === 1) {
3699
+ this.textBox.style.width = (actObj.activePoint.width / ratio.width) + 'px';
3688
3700
  this.textBox.style.height = (actObj.activePoint.height / ratio.height) + 'px';
3689
3701
  }
3690
3702
  else {
3703
+ this.textBox.style.width = actObj.activePoint.width + 'px';
3691
3704
  this.textBox.style.height = actObj.activePoint.height + 'px';
3692
3705
  }
3693
3706
  }
3707
+ this.setTextBoxWidth();
3708
+ this.setTextBoxHeight();
3694
3709
  }
3695
3710
  else {
3696
3711
  this.applyActObj();
@@ -3723,42 +3738,55 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
3723
3738
  }
3724
3739
  if (degree === 0) {
3725
3740
  if (flip.toLowerCase() === 'vertical') {
3726
- this.textBox.style.maxHeight = ((this.lowerCanvas.height - (this.lowerCanvas.height - actObj.activePoint.endY)) / ratio.height) + 'px';
3741
+ this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxHeight) - (parseFloat(this.lowerCanvas.style.maxHeight)
3742
+ - parseFloat(this.textBox.style.top))) + 'px';
3727
3743
  }
3728
3744
  else {
3729
3745
  textBoxTop = parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top);
3730
- this.textBox.style.maxHeight = ((this.lowerCanvas.height / ratio.height) - textBoxTop) + 'px';
3746
+ this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxHeight) - textBoxTop) + 'px';
3731
3747
  }
3732
3748
  }
3733
3749
  else if (degree === 90) {
3734
3750
  if (flip.toLowerCase() === 'horizontal') {
3735
- this.textBox.style.maxHeight = ((this.lowerCanvas.width - actObj.activePoint.startX) / ratio.width) + 'px';
3751
+ this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
3752
+ - parseFloat(this.lowerCanvas.style.left))) + 'px';
3736
3753
  }
3737
3754
  else {
3738
- this.textBox.style.maxHeight = ((this.lowerCanvas.width - (this.lowerCanvas.width - actObj.activePoint.endX)) / ratio.width) + 'px';
3755
+ this.textBox.style.maxHeight = (parseFloat(this.textBox.style.left)
3756
+ - parseFloat(this.lowerCanvas.style.left)) + 'px';
3739
3757
  }
3740
3758
  }
3741
3759
  else if (degree === 180) {
3742
3760
  if (flip.toLowerCase() === 'vertical') {
3743
- this.textBox.style.maxHeight = ((this.lowerCanvas.height - actObj.activePoint.startY) / ratio.height) + 'px';
3761
+ textBoxTop = parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top);
3762
+ this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxHeight) - textBoxTop) + 'px';
3744
3763
  }
3745
3764
  else {
3746
- this.textBox.style.maxHeight = ((this.lowerCanvas.height - (this.lowerCanvas.height - actObj.activePoint.endY)) / ratio.height) + 'px';
3765
+ this.textBox.style.maxHeight = (parseFloat(this.textBox.style.top)
3766
+ - parseFloat(this.lowerCanvas.style.top)) + 'px';
3747
3767
  }
3748
3768
  }
3749
3769
  else if (degree === 270) {
3750
3770
  if (flip.toLowerCase() === 'horizontal') {
3751
- this.textBox.style.maxHeight = ((this.lowerCanvas.width - (this.lowerCanvas.width - actObj.activePoint.endX)) / ratio.width) + 'px';
3771
+ this.textBox.style.maxHeight = (parseFloat(this.textBox.style.left)
3772
+ - parseFloat(this.lowerCanvas.style.left)) + 'px';
3752
3773
  }
3753
3774
  else {
3754
- this.textBox.style.maxHeight = ((this.lowerCanvas.width - actObj.activePoint.startX) / ratio.width) + 'px';
3775
+ this.textBox.style.maxHeight = parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
3776
+ - parseFloat(this.lowerCanvas.style.left)) + 'px';
3755
3777
  }
3756
3778
  }
3757
- this.textBox.style.maxHeight = ((parseFloat(this.textBox.style.maxHeight) - parseFloat(this.textBox.style.fontSize) * 0.5)) * this.factor + 'px';
3779
+ this.textBox.style.maxHeight = ((parseFloat(this.textBox.style.maxHeight) - parseFloat(this.textBox.style.fontSize) * 0.5)) + 'px';
3758
3780
  };
3759
3781
  ImageEditor.prototype.setTextBoxWidth = function (e) {
3760
3782
  var ratio = this.calcRatio();
3761
3783
  var text = this.getMaxText(true);
3784
+ if (this.textBox.style.display === 'block') {
3785
+ this.updateFontStyles(true);
3786
+ }
3787
+ else {
3788
+ this.updateFontStyles();
3789
+ }
3762
3790
  var textBoxWidth = (this.upperContext.measureText(text).width + (parseFloat(this.textBox.style.fontSize) / 2));
3763
3791
  var letterWidth = e ? this.upperContext.measureText(String.fromCharCode(e.which)).width : 0;
3764
3792
  var actObj = extend({}, this.activeObj, {}, true);
@@ -3785,56 +3813,56 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
3785
3813
  if ((!isNullOrUndefined(e) && parseFloat(this.textBox.style.width) < (textBoxWidth + letterWidth)) || isNullOrUndefined(e)) {
3786
3814
  if (degree === 0) {
3787
3815
  if (flip.toLowerCase() === 'horizontal') {
3788
- if (actObj.activePoint.endX - textBoxWidth - letterWidth > 0) {
3789
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
3816
+ if ((parseFloat(this.textBox.style.left) - parseFloat(this.lowerCanvas.style.left)) - textBoxWidth - letterWidth > 0) {
3817
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3790
3818
  }
3791
3819
  }
3792
3820
  else {
3793
- if (textBoxWidth + letterWidth + actObj.activePoint.startX < this.lowerCanvas.width) {
3794
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
3821
+ if ((parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
3822
+ - parseFloat(this.lowerCanvas.style.left))) > (textBoxWidth + letterWidth)) {
3823
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3795
3824
  }
3796
3825
  }
3797
3826
  }
3798
3827
  else if (degree === 90) {
3799
3828
  if (flip.toLowerCase() === 'vertical') {
3800
- if (actObj.activePoint.endY - textBoxWidth - letterWidth > 0) {
3801
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
3829
+ if ((parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top)) - textBoxWidth - letterWidth > 0) {
3830
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3802
3831
  }
3803
3832
  }
3804
3833
  else {
3805
- if (textBoxWidth + letterWidth + actObj.activePoint.startY < this.lowerCanvas.height) {
3806
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
3834
+ if ((parseFloat(this.lowerCanvas.style.maxHeight) - (parseFloat(this.textBox.style.top)
3835
+ - parseFloat(this.lowerCanvas.style.top))) > (textBoxWidth + letterWidth)) {
3836
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3807
3837
  }
3808
3838
  }
3809
3839
  }
3810
3840
  else if (degree === 180) {
3811
3841
  if (flip.toLowerCase() === 'horizontal') {
3812
- if (textBoxWidth + letterWidth + actObj.activePoint.startX < this.lowerCanvas.width) {
3813
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
3842
+ if ((parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
3843
+ - parseFloat(this.lowerCanvas.style.left))) > (textBoxWidth + letterWidth)) {
3844
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3814
3845
  }
3815
3846
  }
3816
3847
  else {
3817
- if (actObj.activePoint.endX - textBoxWidth - letterWidth > 0) {
3818
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
3848
+ if ((parseFloat(this.textBox.style.left) - parseFloat(this.lowerCanvas.style.left)) - textBoxWidth - letterWidth > 0) {
3849
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3819
3850
  }
3820
3851
  }
3821
3852
  }
3822
3853
  else if (degree === 270) {
3823
3854
  if (flip.toLowerCase() === 'vertical') {
3824
- if (textBoxWidth + letterWidth + actObj.activePoint.startY < this.lowerCanvas.height) {
3825
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
3855
+ if ((parseFloat(this.lowerCanvas.style.maxHeight) - (parseFloat(this.textBox.style.top)
3856
+ - parseFloat(this.lowerCanvas.style.top))) > (textBoxWidth + letterWidth)) {
3857
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3826
3858
  }
3827
3859
  }
3828
3860
  else {
3829
- if (actObj.activePoint.endY - textBoxWidth - letterWidth > 0) {
3830
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
3861
+ if ((parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top)) - textBoxWidth - letterWidth > 0) {
3862
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3831
3863
  }
3832
3864
  }
3833
3865
  }
3834
- this.textBox.style.width = parseFloat(this.textBox.style.width) * this.factor + 'px';
3835
- if (isNullOrUndefined(e)) {
3836
- this.textBox.style.width = parseFloat(this.textBox.style.width) + parseFloat(this.textBox.style.fontSize) + 'px';
3837
- }
3838
3866
  }
3839
3867
  };
3840
3868
  ImageEditor.prototype.setActivePoint = function (startX, startY) {
@@ -5800,7 +5828,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
5800
5828
  this.setActivePoint(width, height);
5801
5829
  }
5802
5830
  };
5803
- ImageEditor.prototype.updateFontStyles = function () {
5831
+ ImageEditor.prototype.updateFontStyles = function (isTextBox) {
5804
5832
  this.upperContext.strokeStyle = this.activeObj.strokeSettings.strokeColor;
5805
5833
  this.upperContext.fillStyle = this.activeObj.strokeSettings.strokeColor;
5806
5834
  var textStyle = '';
@@ -5813,7 +5841,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
5813
5841
  if (this.activeObj.textSettings.bold && this.activeObj.textSettings.italic) {
5814
5842
  textStyle = 'italic bold ';
5815
5843
  }
5816
- var fontSize = this.activeObj.textSettings.fontSize;
5844
+ var fontSize = isTextBox ? parseFloat(this.textBox.style.fontSize) : this.activeObj.textSettings.fontSize;
5817
5845
  var fontFamily = this.textBox.style.display === 'block' ? this.textBox.style.fontFamily : this.activeObj.textSettings.fontFamily;
5818
5846
  this.upperContext.font = textStyle + fontSize + 'px' + ' ' + fontFamily;
5819
5847
  };
@@ -5929,24 +5957,14 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
5929
5957
  this.degree = 0;
5930
5958
  }
5931
5959
  };
5932
- ImageEditor.prototype.redrawSelection = function (isZoomed) {
5960
+ ImageEditor.prototype.redrawSelection = function () {
5933
5961
  var ratio = this.calcRatio();
5934
- if (isZoomed) {
5935
- this.activeObj.activePoint.startX = (this.lowerCanvas.width - this.zoomedImg.width) / 2;
5936
- this.activeObj.activePoint.startY = (this.lowerCanvas.height - this.zoomedImg.height) / 2;
5937
- this.activeObj.activePoint.endX = this.activeObj.activePoint.startX + this.zoomedImg.width;
5938
- this.activeObj.activePoint.endY = this.activeObj.activePoint.startY + this.zoomedImg.height;
5939
- this.activeObj.activePoint.width = this.zoomedImg.width;
5940
- this.activeObj.activePoint.height = this.zoomedImg.height;
5941
- }
5942
- else {
5943
- this.activeObj.activePoint.startX = 0;
5944
- this.activeObj.activePoint.startY = 0;
5945
- this.activeObj.activePoint.endX = this.lowerCanvas.width;
5946
- this.activeObj.activePoint.endY = this.lowerCanvas.height;
5947
- this.activeObj.activePoint.width = this.activeObj.activePoint.endX - this.activeObj.activePoint.startX;
5948
- this.activeObj.activePoint.height = this.activeObj.activePoint.endY - this.activeObj.activePoint.startY;
5949
- }
5962
+ this.activeObj.activePoint.startX = 0;
5963
+ this.activeObj.activePoint.startY = 0;
5964
+ this.activeObj.activePoint.endX = this.lowerCanvas.width;
5965
+ this.activeObj.activePoint.endY = this.lowerCanvas.height;
5966
+ this.activeObj.activePoint.width = this.activeObj.activePoint.endX - this.activeObj.activePoint.startX;
5967
+ this.activeObj.activePoint.height = this.activeObj.activePoint.endY - this.activeObj.activePoint.startY;
5950
5968
  this.updateActiveObject(ratio, this.activeObj.activePoint, this.activeObj);
5951
5969
  this.drawObject('duplicate', this.activeObj);
5952
5970
  };