@syncfusion/ej2-image-editor 20.3.47 → 20.3.50

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.
@@ -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;
@@ -2142,12 +2139,21 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
2142
2139
  wrapperWidth = this.element.clientWidth;
2143
2140
  }
2144
2141
  var maxDimension = this.calcMaxDimension(this.baseImg.width, this.baseImg.height);
2142
+ var toolbarHeight = 0;
2143
+ if (!isNullOrUndefined(this.toolbarTemplate) && !isNullOrUndefined(document.querySelector('.e-toolbar'))) {
2144
+ toolbarHeight = document.querySelector('.e-toolbar').clientHeight;
2145
+ maxDimension.width -= toolbarHeight;
2146
+ maxDimension.height -= toolbarHeight;
2147
+ }
2145
2148
  this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
2146
2149
  this.lowerCanvas.width = this.upperCanvas.width = this.inMemoryCanvas.width = this.baseImg.width;
2147
2150
  this.lowerCanvas.height = this.upperCanvas.height = this.inMemoryCanvas.height = this.baseImg.height;
2148
2151
  this.lowerCanvas.style.maxWidth = this.upperCanvas.style.maxWidth = maxDimension.width + 'px';
2149
2152
  this.lowerCanvas.style.maxHeight = this.upperCanvas.style.maxHeight = maxDimension.height + 'px';
2150
2153
  this.lowerCanvas.style.left = this.upperCanvas.style.left = (wrapperWidth - maxDimension.width) / 2 + 1 + 'px';
2154
+ if (!isNullOrUndefined(this.toolbarTemplate)) {
2155
+ this.lowerCanvas.style.left = parseFloat(this.lowerCanvas.style.left) + (toolbarHeight / 2) + 'px';
2156
+ }
2151
2157
  if (canvasWrapper) {
2152
2158
  this.lowerCanvas.style.top = this.upperCanvas.style.top = (parseFloat(canvasWrapper.style.height) - maxDimension.height - 1) / 2 + 'px';
2153
2159
  }
@@ -2551,6 +2557,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
2551
2557
  EventHandler.add(this.upperCanvas, 'touchmove', this.mouseMoveEventHandler, this); // Unbind mousedown to prevent double triggers from touch devices
2552
2558
  };
2553
2559
  ImageEditor.prototype.mouseDownEventHandler = function (e) {
2560
+ if (e.type === 'touchstart' && e.currentTarget === this.lowerCanvas && this.imgDataColl.length === 0) {
2561
+ return;
2562
+ }
2554
2563
  var ratio = this.calcRatio();
2555
2564
  if (this.dragCanvas) {
2556
2565
  this.canvasMouseDownHandler(e);
@@ -2862,6 +2871,17 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
2862
2871
  this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
2863
2872
  this.lowerCanvas.width = this.upperCanvas.width = this.element.offsetWidth;
2864
2873
  this.lowerCanvas.height = this.upperCanvas.height = this.element.offsetHeight;
2874
+ var canvasWrapper = document.querySelector('#' + this.element.id + '_canvasWrapper');
2875
+ if (!isNullOrUndefined(canvasWrapper)) {
2876
+ canvasWrapper.style.width = this.element.offsetWidth + 'px';
2877
+ canvasWrapper.style.height = this.element.offsetHeight + 'px';
2878
+ if (Browser.isDevice) {
2879
+ canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * this.toolbarHeight)) - 3 + 'px';
2880
+ }
2881
+ else {
2882
+ canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - this.toolbarHeight) - 3 + 'px';
2883
+ }
2884
+ }
2865
2885
  this.redrawImg();
2866
2886
  // eslint-disable-next-line @typescript-eslint/tslint/config
2867
2887
  this.lowerCanvas.toBlob(function (blob) {
@@ -2876,7 +2896,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
2876
2896
  ImageEditor.prototype.screenOrientation = function () {
2877
2897
  if (Browser.isDevice) {
2878
2898
  this.isScreenOriented = true;
2879
- this.adjustToScreen();
2899
+ setTimeout(this.adjustToScreen.bind(this), 100);
2880
2900
  }
2881
2901
  };
2882
2902
  ImageEditor.prototype.windowResizeHandler = function () {
@@ -3673,24 +3693,28 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
3673
3693
  this.textBox.value = actObj.keyHistory;
3674
3694
  this.textBox.style.overflow = 'hidden';
3675
3695
  this.textBox.style.height = 'auto';
3676
- this.setTextBoxWidth();
3677
- this.setTextBoxHeight();
3678
3696
  if (degree % 90 === 0 && degree % 180 !== 0 && degree !== 0) {
3679
3697
  if (this.factor === 1) {
3698
+ this.textBox.style.width = (actObj.activePoint.height / ratio.height) + 'px';
3680
3699
  this.textBox.style.height = (actObj.activePoint.width / ratio.width) + 'px';
3681
3700
  }
3682
3701
  else {
3702
+ this.textBox.style.width = actObj.activePoint.height + 'px';
3683
3703
  this.textBox.style.height = actObj.activePoint.width + 'px';
3684
3704
  }
3685
3705
  }
3686
3706
  else {
3687
3707
  if (this.factor === 1) {
3708
+ this.textBox.style.width = (actObj.activePoint.width / ratio.width) + 'px';
3688
3709
  this.textBox.style.height = (actObj.activePoint.height / ratio.height) + 'px';
3689
3710
  }
3690
3711
  else {
3712
+ this.textBox.style.width = actObj.activePoint.width + 'px';
3691
3713
  this.textBox.style.height = actObj.activePoint.height + 'px';
3692
3714
  }
3693
3715
  }
3716
+ this.setTextBoxWidth();
3717
+ this.setTextBoxHeight();
3694
3718
  }
3695
3719
  else {
3696
3720
  this.applyActObj();
@@ -3723,42 +3747,55 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
3723
3747
  }
3724
3748
  if (degree === 0) {
3725
3749
  if (flip.toLowerCase() === 'vertical') {
3726
- this.textBox.style.maxHeight = ((this.lowerCanvas.height - (this.lowerCanvas.height - actObj.activePoint.endY)) / ratio.height) + 'px';
3750
+ this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxHeight) - (parseFloat(this.lowerCanvas.style.maxHeight)
3751
+ - parseFloat(this.textBox.style.top))) + 'px';
3727
3752
  }
3728
3753
  else {
3729
3754
  textBoxTop = parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top);
3730
- this.textBox.style.maxHeight = ((this.lowerCanvas.height / ratio.height) - textBoxTop) + 'px';
3755
+ this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxHeight) - textBoxTop) + 'px';
3731
3756
  }
3732
3757
  }
3733
3758
  else if (degree === 90) {
3734
3759
  if (flip.toLowerCase() === 'horizontal') {
3735
- this.textBox.style.maxHeight = ((this.lowerCanvas.width - actObj.activePoint.startX) / ratio.width) + 'px';
3760
+ this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
3761
+ - parseFloat(this.lowerCanvas.style.left))) + 'px';
3736
3762
  }
3737
3763
  else {
3738
- this.textBox.style.maxHeight = ((this.lowerCanvas.width - (this.lowerCanvas.width - actObj.activePoint.endX)) / ratio.width) + 'px';
3764
+ this.textBox.style.maxHeight = (parseFloat(this.textBox.style.left)
3765
+ - parseFloat(this.lowerCanvas.style.left)) + 'px';
3739
3766
  }
3740
3767
  }
3741
3768
  else if (degree === 180) {
3742
3769
  if (flip.toLowerCase() === 'vertical') {
3743
- this.textBox.style.maxHeight = ((this.lowerCanvas.height - actObj.activePoint.startY) / ratio.height) + 'px';
3770
+ textBoxTop = parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top);
3771
+ this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxHeight) - textBoxTop) + 'px';
3744
3772
  }
3745
3773
  else {
3746
- this.textBox.style.maxHeight = ((this.lowerCanvas.height - (this.lowerCanvas.height - actObj.activePoint.endY)) / ratio.height) + 'px';
3774
+ this.textBox.style.maxHeight = (parseFloat(this.textBox.style.top)
3775
+ - parseFloat(this.lowerCanvas.style.top)) + 'px';
3747
3776
  }
3748
3777
  }
3749
3778
  else if (degree === 270) {
3750
3779
  if (flip.toLowerCase() === 'horizontal') {
3751
- this.textBox.style.maxHeight = ((this.lowerCanvas.width - (this.lowerCanvas.width - actObj.activePoint.endX)) / ratio.width) + 'px';
3780
+ this.textBox.style.maxHeight = (parseFloat(this.textBox.style.left)
3781
+ - parseFloat(this.lowerCanvas.style.left)) + 'px';
3752
3782
  }
3753
3783
  else {
3754
- this.textBox.style.maxHeight = ((this.lowerCanvas.width - actObj.activePoint.startX) / ratio.width) + 'px';
3784
+ this.textBox.style.maxHeight = parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
3785
+ - parseFloat(this.lowerCanvas.style.left)) + 'px';
3755
3786
  }
3756
3787
  }
3757
- this.textBox.style.maxHeight = ((parseFloat(this.textBox.style.maxHeight) - parseFloat(this.textBox.style.fontSize) * 0.5)) * this.factor + 'px';
3788
+ this.textBox.style.maxHeight = ((parseFloat(this.textBox.style.maxHeight) - parseFloat(this.textBox.style.fontSize) * 0.5)) + 'px';
3758
3789
  };
3759
3790
  ImageEditor.prototype.setTextBoxWidth = function (e) {
3760
3791
  var ratio = this.calcRatio();
3761
3792
  var text = this.getMaxText(true);
3793
+ if (this.textBox.style.display === 'block') {
3794
+ this.updateFontStyles(true);
3795
+ }
3796
+ else {
3797
+ this.updateFontStyles();
3798
+ }
3762
3799
  var textBoxWidth = (this.upperContext.measureText(text).width + (parseFloat(this.textBox.style.fontSize) / 2));
3763
3800
  var letterWidth = e ? this.upperContext.measureText(String.fromCharCode(e.which)).width : 0;
3764
3801
  var actObj = extend({}, this.activeObj, {}, true);
@@ -3785,56 +3822,56 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
3785
3822
  if ((!isNullOrUndefined(e) && parseFloat(this.textBox.style.width) < (textBoxWidth + letterWidth)) || isNullOrUndefined(e)) {
3786
3823
  if (degree === 0) {
3787
3824
  if (flip.toLowerCase() === 'horizontal') {
3788
- if (actObj.activePoint.endX - textBoxWidth - letterWidth > 0) {
3789
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
3825
+ if ((parseFloat(this.textBox.style.left) - parseFloat(this.lowerCanvas.style.left)) - textBoxWidth - letterWidth > 0) {
3826
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3790
3827
  }
3791
3828
  }
3792
3829
  else {
3793
- if (textBoxWidth + letterWidth + actObj.activePoint.startX < this.lowerCanvas.width) {
3794
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
3830
+ if ((parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
3831
+ - parseFloat(this.lowerCanvas.style.left))) > (textBoxWidth + letterWidth)) {
3832
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3795
3833
  }
3796
3834
  }
3797
3835
  }
3798
3836
  else if (degree === 90) {
3799
3837
  if (flip.toLowerCase() === 'vertical') {
3800
- if (actObj.activePoint.endY - textBoxWidth - letterWidth > 0) {
3801
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
3838
+ if ((parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top)) - textBoxWidth - letterWidth > 0) {
3839
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3802
3840
  }
3803
3841
  }
3804
3842
  else {
3805
- if (textBoxWidth + letterWidth + actObj.activePoint.startY < this.lowerCanvas.height) {
3806
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
3843
+ if ((parseFloat(this.lowerCanvas.style.maxHeight) - (parseFloat(this.textBox.style.top)
3844
+ - parseFloat(this.lowerCanvas.style.top))) > (textBoxWidth + letterWidth)) {
3845
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3807
3846
  }
3808
3847
  }
3809
3848
  }
3810
3849
  else if (degree === 180) {
3811
3850
  if (flip.toLowerCase() === 'horizontal') {
3812
- if (textBoxWidth + letterWidth + actObj.activePoint.startX < this.lowerCanvas.width) {
3813
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
3851
+ if ((parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
3852
+ - parseFloat(this.lowerCanvas.style.left))) > (textBoxWidth + letterWidth)) {
3853
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3814
3854
  }
3815
3855
  }
3816
3856
  else {
3817
- if (actObj.activePoint.endX - textBoxWidth - letterWidth > 0) {
3818
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
3857
+ if ((parseFloat(this.textBox.style.left) - parseFloat(this.lowerCanvas.style.left)) - textBoxWidth - letterWidth > 0) {
3858
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3819
3859
  }
3820
3860
  }
3821
3861
  }
3822
3862
  else if (degree === 270) {
3823
3863
  if (flip.toLowerCase() === 'vertical') {
3824
- if (textBoxWidth + letterWidth + actObj.activePoint.startY < this.lowerCanvas.height) {
3825
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
3864
+ if ((parseFloat(this.lowerCanvas.style.maxHeight) - (parseFloat(this.textBox.style.top)
3865
+ - parseFloat(this.lowerCanvas.style.top))) > (textBoxWidth + letterWidth)) {
3866
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3826
3867
  }
3827
3868
  }
3828
3869
  else {
3829
- if (actObj.activePoint.endY - textBoxWidth - letterWidth > 0) {
3830
- this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
3870
+ if ((parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top)) - textBoxWidth - letterWidth > 0) {
3871
+ this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
3831
3872
  }
3832
3873
  }
3833
3874
  }
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
3875
  }
3839
3876
  };
3840
3877
  ImageEditor.prototype.setActivePoint = function (startX, startY) {
@@ -5800,7 +5837,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
5800
5837
  this.setActivePoint(width, height);
5801
5838
  }
5802
5839
  };
5803
- ImageEditor.prototype.updateFontStyles = function () {
5840
+ ImageEditor.prototype.updateFontStyles = function (isTextBox) {
5804
5841
  this.upperContext.strokeStyle = this.activeObj.strokeSettings.strokeColor;
5805
5842
  this.upperContext.fillStyle = this.activeObj.strokeSettings.strokeColor;
5806
5843
  var textStyle = '';
@@ -5813,7 +5850,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
5813
5850
  if (this.activeObj.textSettings.bold && this.activeObj.textSettings.italic) {
5814
5851
  textStyle = 'italic bold ';
5815
5852
  }
5816
- var fontSize = this.activeObj.textSettings.fontSize;
5853
+ var fontSize = isTextBox ? parseFloat(this.textBox.style.fontSize) : this.activeObj.textSettings.fontSize;
5817
5854
  var fontFamily = this.textBox.style.display === 'block' ? this.textBox.style.fontFamily : this.activeObj.textSettings.fontFamily;
5818
5855
  this.upperContext.font = textStyle + fontSize + 'px' + ' ' + fontFamily;
5819
5856
  };
@@ -5929,24 +5966,14 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
5929
5966
  this.degree = 0;
5930
5967
  }
5931
5968
  };
5932
- ImageEditor.prototype.redrawSelection = function (isZoomed) {
5969
+ ImageEditor.prototype.redrawSelection = function () {
5933
5970
  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
- }
5971
+ this.activeObj.activePoint.startX = 0;
5972
+ this.activeObj.activePoint.startY = 0;
5973
+ this.activeObj.activePoint.endX = this.lowerCanvas.width;
5974
+ this.activeObj.activePoint.endY = this.lowerCanvas.height;
5975
+ this.activeObj.activePoint.width = this.activeObj.activePoint.endX - this.activeObj.activePoint.startX;
5976
+ this.activeObj.activePoint.height = this.activeObj.activePoint.endY - this.activeObj.activePoint.startY;
5950
5977
  this.updateActiveObject(ratio, this.activeObj.activePoint, this.activeObj);
5951
5978
  this.drawObject('duplicate', this.activeObj);
5952
5979
  };
@@ -6756,7 +6783,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
6756
6783
  (isNullOrUndefined(document.getElementById(this.element.id + '_toolbar')))) {
6757
6784
  this.toolbarHeight = 0;
6758
6785
  }
6759
- this.update();
6786
+ if (isNullOrUndefined(this.toolbarTemplate)) {
6787
+ this.update();
6788
+ }
6760
6789
  var type = typeof (data);
6761
6790
  if (type === 'string') {
6762
6791
  this.imageOnLoad(data);
@@ -7224,7 +7253,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
7224
7253
  }
7225
7254
  this.currObjType.isCustomCrop = false;
7226
7255
  var start = { x: x, y: y };
7227
- this.drawShape('circle', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY);
7256
+ this.drawShape('ellipse', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY);
7228
7257
  }
7229
7258
  return isEllipse;
7230
7259
  };
@@ -7468,6 +7497,125 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
7468
7497
  this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
7469
7498
  this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
7470
7499
  };
7500
+ /**
7501
+ * To check whether the undo collection is empty or not.
7502
+ *
7503
+ * @returns {boolean}.
7504
+ * @private
7505
+ */
7506
+ ImageEditor.prototype.canUndo = function () {
7507
+ return _super.prototype.canUndo.call(this);
7508
+ };
7509
+ /**
7510
+ * To check whether the redo collection is empty or not.
7511
+ *
7512
+ * @returns {boolean}.
7513
+ * @private
7514
+ */
7515
+ ImageEditor.prototype.canRedo = function () {
7516
+ return _super.prototype.canRedo.call(this);
7517
+ };
7518
+ /**
7519
+ * Erases all the signature strokes signed by user.
7520
+ *
7521
+ * @returns {void}.
7522
+ * @private
7523
+ */
7524
+ ImageEditor.prototype.clear = function () {
7525
+ _super.prototype.clear.call(this);
7526
+ };
7527
+ /**
7528
+ * To draw the signature based on the given text, with the font family and font size.
7529
+ *
7530
+ * @param {string} text - specify text to be drawn as signature.
7531
+ * @param {string} fontFamily - specify font family of a signature.
7532
+ * @param {number} fontSize - specify font size of a signature.
7533
+ *
7534
+ * @returns {void}.
7535
+ * @private
7536
+ */
7537
+ ImageEditor.prototype.draw = function (text, fontFamily, fontSize) {
7538
+ _super.prototype.draw.call(this, text, fontFamily, fontSize);
7539
+ };
7540
+ /**
7541
+ * To get the signature as Blob.
7542
+ *
7543
+ * @param {string} url - specify the url/base 64 string to get blob of the signature.
7544
+ * @returns {Blob}.
7545
+ * @private
7546
+ */
7547
+ ImageEditor.prototype.getBlob = function (url) {
7548
+ return _super.prototype.getBlob.call(this, url);
7549
+ };
7550
+ /**
7551
+ * To check whether the signature is empty or not.
7552
+ *
7553
+ * @returns {boolean}.
7554
+ * @private
7555
+ */
7556
+ ImageEditor.prototype.isEmpty = function () {
7557
+ return _super.prototype.isEmpty.call(this);
7558
+ };
7559
+ /**
7560
+ * To load the signature with the given base 64 string, height and width.
7561
+ *
7562
+ * @param {string} signature - specify the url/base 64 string to be drawn as signature.
7563
+ * @param {number} width - specify the width of the loaded signature image.
7564
+ * @param {number} height - specify the height of the loaded signature image.
7565
+ * @returns {void}.
7566
+ * @private
7567
+ */
7568
+ ImageEditor.prototype.load = function (signature, width, height) {
7569
+ _super.prototype.load.call(this, signature, width, height);
7570
+ };
7571
+ /**
7572
+ * Undo the last user action.
7573
+ *
7574
+ * @returns {void}.
7575
+ * @private
7576
+ */
7577
+ ImageEditor.prototype.undo = function () {
7578
+ _super.prototype.undo.call(this);
7579
+ };
7580
+ /**
7581
+ * Redo the last user action.
7582
+ *
7583
+ * @returns {void}.
7584
+ * @private
7585
+ */
7586
+ ImageEditor.prototype.redo = function () {
7587
+ _super.prototype.redo.call(this);
7588
+ };
7589
+ /**
7590
+ * To save the signature with the given file type and file name.
7591
+ *
7592
+ * @param {SignatureFileType} type - specify type of the file to be saved a signature.
7593
+ * @param {string} fileName - specify name of the file to be saved a signature.
7594
+ *
7595
+ * @returns {void}.
7596
+ * @private
7597
+ */
7598
+ ImageEditor.prototype.save = function (type, fileName) {
7599
+ _super.prototype.save.call(this, type, fileName);
7600
+ };
7601
+ /**
7602
+ * To save the signature as Blob.
7603
+ *
7604
+ * @returns {Blob}.
7605
+ * @private
7606
+ */
7607
+ ImageEditor.prototype.saveAsBlob = function () {
7608
+ return _super.prototype.saveAsBlob.call(this);
7609
+ };
7610
+ /**
7611
+ * Returns the persistence data for component.
7612
+ *
7613
+ * @returns any.
7614
+ * @private
7615
+ */
7616
+ ImageEditor.prototype.getLocalData = function () {
7617
+ return _super.prototype.getLocalData.call(this);
7618
+ };
7471
7619
  var ImageEditor_1;
7472
7620
  __decorate([
7473
7621
  Property('')
@@ -7490,6 +7638,36 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
7490
7638
  __decorate([
7491
7639
  Property('100%')
7492
7640
  ], ImageEditor.prototype, "width", void 0);
7641
+ __decorate([
7642
+ Property('')
7643
+ ], ImageEditor.prototype, "backgroundColor", void 0);
7644
+ __decorate([
7645
+ Property('')
7646
+ ], ImageEditor.prototype, "backgroundImage", void 0);
7647
+ __decorate([
7648
+ Property(false)
7649
+ ], ImageEditor.prototype, "isReadOnly", void 0);
7650
+ __decorate([
7651
+ Property(true)
7652
+ ], ImageEditor.prototype, "saveWithBackground", void 0);
7653
+ __decorate([
7654
+ Property('#000000')
7655
+ ], ImageEditor.prototype, "strokeColor", void 0);
7656
+ __decorate([
7657
+ Property(0.5)
7658
+ ], ImageEditor.prototype, "minStrokeWidth", void 0);
7659
+ __decorate([
7660
+ Property(2)
7661
+ ], ImageEditor.prototype, "maxStrokeWidth", void 0);
7662
+ __decorate([
7663
+ Property(0.7)
7664
+ ], ImageEditor.prototype, "velocity", void 0);
7665
+ __decorate([
7666
+ Property(false)
7667
+ ], ImageEditor.prototype, "enableRtl", void 0);
7668
+ __decorate([
7669
+ Property(false)
7670
+ ], ImageEditor.prototype, "enablePersistence", void 0);
7493
7671
  __decorate([
7494
7672
  Event()
7495
7673
  ], ImageEditor.prototype, "beforeSave", void 0);