@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.
- package/CHANGELOG.md +16 -0
- package/dist/ej2-image-editor.umd.min.js +2 -2
- package/dist/ej2-image-editor.umd.min.js.map +1 -1
- package/dist/es6/ej2-image-editor.es2015.js +234 -56
- package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
- package/dist/es6/ej2-image-editor.es5.js +234 -56
- package/dist/es6/ej2-image-editor.es5.js.map +1 -1
- package/dist/global/ej2-image-editor.min.js +2 -2
- package/dist/global/ej2-image-editor.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +10 -10
- package/src/image-editor/image-editor-model.d.ts +93 -0
- package/src/image-editor/image-editor.d.ts +184 -1
- package/src/image-editor/image-editor.js +234 -56
|
@@ -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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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 = (
|
|
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))
|
|
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 (
|
|
3789
|
-
this.textBox.style.width = (
|
|
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 (
|
|
3794
|
-
this.
|
|
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 (
|
|
3801
|
-
this.textBox.style.width = (
|
|
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 (
|
|
3806
|
-
this.
|
|
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 (
|
|
3813
|
-
this.
|
|
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 (
|
|
3818
|
-
this.textBox.style.width = (
|
|
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 (
|
|
3825
|
-
this.
|
|
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 (
|
|
3830
|
-
this.textBox.style.width = (
|
|
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 (
|
|
5969
|
+
ImageEditor.prototype.redrawSelection = function () {
|
|
5933
5970
|
var ratio = this.calcRatio();
|
|
5934
|
-
|
|
5935
|
-
|
|
5936
|
-
|
|
5937
|
-
|
|
5938
|
-
|
|
5939
|
-
|
|
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.
|
|
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('
|
|
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);
|