@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.
- package/CHANGELOG.md +5 -45
- 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 +958 -1922
- package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
- package/dist/es6/ej2-image-editor.es5.js +993 -1974
- 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 +12 -12
- package/src/image-editor/action/crop.js +9 -45
- package/src/image-editor/action/draw.js +52 -207
- package/src/image-editor/action/export.js +6 -35
- package/src/image-editor/action/freehand-draw.js +26 -80
- package/src/image-editor/action/selection.js +122 -326
- package/src/image-editor/action/shape.js +133 -242
- package/src/image-editor/action/transform.d.ts +0 -1
- package/src/image-editor/action/transform.js +80 -291
- package/src/image-editor/action/undo-redo.d.ts +0 -1
- package/src/image-editor/action/undo-redo.js +32 -127
- package/src/image-editor/base/image-editor-model.d.ts +1 -1
- package/src/image-editor/base/image-editor.d.ts +51 -42
- package/src/image-editor/base/image-editor.js +316 -425
- package/src/image-editor/renderer/toolbar.d.ts +1 -0
- package/src/image-editor/renderer/toolbar.js +228 -207
- package/styles/bootstrap-dark.css +0 -12
- package/styles/bootstrap.css +0 -12
- package/styles/bootstrap4.css +0 -12
- package/styles/bootstrap5-dark.css +0 -12
- package/styles/bootstrap5.css +0 -12
- package/styles/fabric-dark.css +0 -12
- package/styles/fabric.css +0 -12
- package/styles/fluent-dark.css +0 -12
- package/styles/fluent.css +0 -12
- package/styles/highcontrast-light.css +0 -12
- package/styles/highcontrast.css +0 -12
- package/styles/image-editor/_bds-definition.scss +21 -0
- package/styles/image-editor/_bootstrap-dark-definition.scss +0 -1
- package/styles/image-editor/_bootstrap-definition.scss +0 -1
- package/styles/image-editor/_bootstrap4-definition.scss +0 -1
- package/styles/image-editor/_bootstrap5-definition.scss +0 -1
- package/styles/image-editor/_fabric-dark-definition.scss +0 -1
- package/styles/image-editor/_fabric-definition.scss +0 -1
- package/styles/image-editor/_fluent-definition.scss +0 -1
- package/styles/image-editor/_fusionnew-definition.scss +0 -1
- package/styles/image-editor/_highcontrast-definition.scss +0 -1
- package/styles/image-editor/_highcontrast-light-definition.scss +0 -1
- package/styles/image-editor/_layout.scss +5 -32
- package/styles/image-editor/_material-dark-definition.scss +0 -1
- package/styles/image-editor/_material-definition.scss +0 -1
- package/styles/image-editor/_material3-definition.scss +2 -3
- package/styles/image-editor/_tailwind-definition.scss +0 -1
- package/styles/image-editor/bootstrap-dark.css +0 -12
- package/styles/image-editor/bootstrap.css +0 -12
- package/styles/image-editor/bootstrap4.css +0 -12
- package/styles/image-editor/bootstrap5-dark.css +0 -12
- package/styles/image-editor/bootstrap5.css +0 -12
- package/styles/image-editor/fabric-dark.css +0 -12
- package/styles/image-editor/fabric.css +0 -12
- package/styles/image-editor/fluent-dark.css +0 -12
- package/styles/image-editor/fluent.css +0 -12
- package/styles/image-editor/highcontrast-light.css +0 -12
- package/styles/image-editor/highcontrast.css +0 -12
- package/styles/image-editor/icons/_bds.scss +411 -0
- package/styles/image-editor/material-dark.css +0 -12
- package/styles/image-editor/material.css +0 -12
- package/styles/image-editor/material3-dark.css +5 -25
- package/styles/image-editor/material3.css +5 -25
- package/styles/image-editor/tailwind-dark.css +2 -14
- package/styles/image-editor/tailwind.css +2 -14
- package/styles/material-dark.css +0 -12
- package/styles/material.css +0 -12
- package/styles/material3-dark.css +5 -25
- package/styles/material3.css +5 -25
- package/styles/tailwind-dark.css +2 -14
- package/styles/tailwind.css +2 -14
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Browser, extend, getComponent,
|
|
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
|
|
211
|
-
|
|
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
|
|
401
|
-
|
|
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
|
-
|
|
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 &&
|
|
701
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
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
|
|
850
|
-
|
|
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
|
-
|
|
877
|
-
|
|
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 (
|
|
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
|
-
|
|
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
|
-
|
|
925
|
-
|
|
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
|
-
|
|
935
|
-
|
|
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
|
-
|
|
953
|
-
|
|
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
|
-
|
|
963
|
-
|
|
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
|
-
|
|
1208
|
-
|
|
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
|
-
|
|
1680
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1728
|
-
|
|
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:
|
|
1766
|
-
|
|
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
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
(
|
|
2116
|
+
(isAspectRatio ? Math.ceil(parseFloat(aspectHeight)) : Math.ceil(parent.img.destHeight)),
|
|
2287
2117
|
isAspectRatio: isAspectRatio ? isAspectRatio : false };
|
|
2288
|
-
|
|
2289
|
-
|
|
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
|
-
|
|
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
|
-
|
|
2387
|
-
|
|
2388
|
-
}
|
|
2389
|
-
|
|
2390
|
-
|
|
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
|
-
|
|
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
|
};
|