@syncfusion/ej2-image-editor 24.1.44 → 24.1.46

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 (66) hide show
  1. package/CHANGELOG.md +20 -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 +52 -21
  5. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es5.js +52 -21
  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 +11 -11
  12. package/src/image-editor/action/draw.js +10 -2
  13. package/src/image-editor/action/selection.js +5 -3
  14. package/src/image-editor/action/shape.d.ts +1 -0
  15. package/src/image-editor/action/shape.js +17 -1
  16. package/src/image-editor/action/transform.js +1 -3
  17. package/src/image-editor/base/image-editor.js +1 -0
  18. package/src/image-editor/renderer/toolbar.js +18 -12
  19. package/styles/bootstrap-dark.css +21 -1
  20. package/styles/bootstrap.css +21 -1
  21. package/styles/bootstrap4.css +22 -2
  22. package/styles/bootstrap5-dark.css +21 -1
  23. package/styles/bootstrap5.css +21 -1
  24. package/styles/fabric-dark.css +21 -1
  25. package/styles/fabric.css +21 -1
  26. package/styles/fluent-dark.css +21 -1
  27. package/styles/fluent.css +21 -1
  28. package/styles/highcontrast-light.css +21 -1
  29. package/styles/highcontrast.css +21 -1
  30. package/styles/image-editor/_bootstrap-dark-definition.scss +2 -0
  31. package/styles/image-editor/_bootstrap-definition.scss +2 -0
  32. package/styles/image-editor/_bootstrap4-definition.scss +2 -0
  33. package/styles/image-editor/_bootstrap5-definition.scss +2 -0
  34. package/styles/image-editor/_fabric-dark-definition.scss +2 -0
  35. package/styles/image-editor/_fabric-definition.scss +2 -0
  36. package/styles/image-editor/_fluent-definition.scss +2 -0
  37. package/styles/image-editor/_highcontrast-definition.scss +2 -0
  38. package/styles/image-editor/_highcontrast-light-definition.scss +2 -0
  39. package/styles/image-editor/_layout.scss +29 -1
  40. package/styles/image-editor/_material-dark-definition.scss +3 -1
  41. package/styles/image-editor/_material-definition.scss +3 -1
  42. package/styles/image-editor/_material3-definition.scss +2 -0
  43. package/styles/image-editor/_tailwind-definition.scss +2 -0
  44. package/styles/image-editor/bootstrap-dark.css +21 -1
  45. package/styles/image-editor/bootstrap.css +21 -1
  46. package/styles/image-editor/bootstrap4.css +22 -2
  47. package/styles/image-editor/bootstrap5-dark.css +21 -1
  48. package/styles/image-editor/bootstrap5.css +21 -1
  49. package/styles/image-editor/fabric-dark.css +21 -1
  50. package/styles/image-editor/fabric.css +21 -1
  51. package/styles/image-editor/fluent-dark.css +21 -1
  52. package/styles/image-editor/fluent.css +21 -1
  53. package/styles/image-editor/highcontrast-light.css +21 -1
  54. package/styles/image-editor/highcontrast.css +21 -1
  55. package/styles/image-editor/material-dark.css +22 -2
  56. package/styles/image-editor/material.css +22 -2
  57. package/styles/image-editor/material3-dark.css +21 -1
  58. package/styles/image-editor/material3.css +21 -1
  59. package/styles/image-editor/tailwind-dark.css +21 -1
  60. package/styles/image-editor/tailwind.css +21 -1
  61. package/styles/material-dark.css +22 -2
  62. package/styles/material.css +22 -2
  63. package/styles/material3-dark.css +21 -1
  64. package/styles/material3.css +21 -1
  65. package/styles/tailwind-dark.css +21 -1
  66. package/styles/tailwind.css +21 -1
package/styles/image-editor/material.css CHANGED
@@ -531,11 +531,27 @@
531
531
  }
532
532
 
533
533
  .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
534
- top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
534
+ top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
535
535
  }
536
536
 
537
537
  .e-ie-finetune-value-span {
538
- top: 26% !important; /* stylelint-disable-line declaration-no-important */
538
+ top: 31% !important; /* stylelint-disable-line declaration-no-important */
539
+ }
540
+
541
+ .e-ie-finetune-slider-label {
542
+ top: 31% !important; /* stylelint-disable-line declaration-no-important */
543
+ }
544
+
545
+ .e-ie-finetune-slider-wrap {
546
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
547
+ }
548
+
549
+ .e-transparency-slider-wrap {
550
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
551
+ }
552
+
553
+ .e-ie-slider-wrap {
554
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
539
555
  }
540
556
 
541
557
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -551,6 +567,10 @@
551
567
  background: none !important; /* stylelint-disable-line declaration-no-important */
552
568
  }
553
569
 
570
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
571
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
572
+ }
573
+
554
574
  .e-image-editor {
555
575
  background: #eee;
556
576
  }
package/styles/image-editor/material3-dark.css CHANGED
@@ -596,7 +596,23 @@
596
596
  }
597
597
 
598
598
  .e-ie-finetune-value-span {
599
- top: 26% !important; /* stylelint-disable-line declaration-no-important */
599
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
600
+ }
601
+
602
+ .e-ie-finetune-slider-label {
603
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
604
+ }
605
+
606
+ .e-ie-finetune-slider-wrap {
607
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
608
+ }
609
+
610
+ .e-transparency-slider-wrap {
611
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
612
+ }
613
+
614
+ .e-ie-slider-wrap {
615
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
600
616
  }
601
617
 
602
618
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -614,6 +630,10 @@
614
630
  background: none !important; /* stylelint-disable-line declaration-no-important */
615
631
  }
616
632
 
633
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
634
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
635
+ }
636
+
617
637
  .e-image-editor {
618
638
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
619
639
  }
package/styles/image-editor/material3.css CHANGED
@@ -652,7 +652,23 @@
652
652
  }
653
653
 
654
654
  .e-ie-finetune-value-span {
655
- top: 26% !important; /* stylelint-disable-line declaration-no-important */
655
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
656
+ }
657
+
658
+ .e-ie-finetune-slider-label {
659
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
660
+ }
661
+
662
+ .e-ie-finetune-slider-wrap {
663
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
664
+ }
665
+
666
+ .e-transparency-slider-wrap {
667
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
668
+ }
669
+
670
+ .e-ie-slider-wrap {
671
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
656
672
  }
657
673
 
658
674
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -670,6 +686,10 @@
670
686
  background: none !important; /* stylelint-disable-line declaration-no-important */
671
687
  }
672
688
 
689
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
690
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
691
+ }
692
+
673
693
  .e-image-editor {
674
694
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
675
695
  }
package/styles/image-editor/tailwind-dark.css CHANGED
@@ -527,7 +527,23 @@
527
527
  }
528
528
 
529
529
  .e-ie-finetune-value-span {
530
- top: 26% !important; /* stylelint-disable-line declaration-no-important */
530
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
531
+ }
532
+
533
+ .e-ie-finetune-slider-label {
534
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
535
+ }
536
+
537
+ .e-ie-finetune-slider-wrap {
538
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
539
+ }
540
+
541
+ .e-transparency-slider-wrap {
542
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
543
+ }
544
+
545
+ .e-ie-slider-wrap {
546
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
531
547
  }
532
548
 
533
549
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -543,6 +559,10 @@
543
559
  background: none !important; /* stylelint-disable-line declaration-no-important */
544
560
  }
545
561
 
562
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
563
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
564
+ }
565
+
546
566
  .e-image-editor {
547
567
  background: #4b5563;
548
568
  }
package/styles/image-editor/tailwind.css CHANGED
@@ -527,7 +527,23 @@
527
527
  }
528
528
 
529
529
  .e-ie-finetune-value-span {
530
- top: 26% !important; /* stylelint-disable-line declaration-no-important */
530
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
531
+ }
532
+
533
+ .e-ie-finetune-slider-label {
534
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
535
+ }
536
+
537
+ .e-ie-finetune-slider-wrap {
538
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
539
+ }
540
+
541
+ .e-transparency-slider-wrap {
542
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
543
+ }
544
+
545
+ .e-ie-slider-wrap {
546
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
531
547
  }
532
548
 
533
549
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -543,6 +559,10 @@
543
559
  background: none !important; /* stylelint-disable-line declaration-no-important */
544
560
  }
545
561
 
562
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
563
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
564
+ }
565
+
546
566
  .e-image-editor {
547
567
  background: #e5e7eb;
548
568
  }
package/styles/material-dark.css CHANGED
@@ -526,11 +526,27 @@
526
526
  }
527
527
 
528
528
  .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
529
- top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
529
+ top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
530
530
  }
531
531
 
532
532
  .e-ie-finetune-value-span {
533
- top: 26% !important; /* stylelint-disable-line declaration-no-important */
533
+ top: 31% !important; /* stylelint-disable-line declaration-no-important */
534
+ }
535
+
536
+ .e-ie-finetune-slider-label {
537
+ top: 31% !important; /* stylelint-disable-line declaration-no-important */
538
+ }
539
+
540
+ .e-ie-finetune-slider-wrap {
541
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
542
+ }
543
+
544
+ .e-transparency-slider-wrap {
545
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
546
+ }
547
+
548
+ .e-ie-slider-wrap {
549
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
534
550
  }
535
551
 
536
552
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -546,6 +562,10 @@
546
562
  background: none !important; /* stylelint-disable-line declaration-no-important */
547
563
  }
548
564
 
565
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
566
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
567
+ }
568
+
549
569
  .e-image-editor {
550
570
  background: #292929;
551
571
  }
package/styles/material.css CHANGED
@@ -531,11 +531,27 @@
531
531
  }
532
532
 
533
533
  .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
534
- top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
534
+ top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
535
535
  }
536
536
 
537
537
  .e-ie-finetune-value-span {
538
- top: 26% !important; /* stylelint-disable-line declaration-no-important */
538
+ top: 31% !important; /* stylelint-disable-line declaration-no-important */
539
+ }
540
+
541
+ .e-ie-finetune-slider-label {
542
+ top: 31% !important; /* stylelint-disable-line declaration-no-important */
543
+ }
544
+
545
+ .e-ie-finetune-slider-wrap {
546
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
547
+ }
548
+
549
+ .e-transparency-slider-wrap {
550
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
551
+ }
552
+
553
+ .e-ie-slider-wrap {
554
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
539
555
  }
540
556
 
541
557
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -551,6 +567,10 @@
551
567
  background: none !important; /* stylelint-disable-line declaration-no-important */
552
568
  }
553
569
 
570
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
571
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
572
+ }
573
+
554
574
  .e-image-editor {
555
575
  background: #eee;
556
576
  }
package/styles/material3-dark.css CHANGED
@@ -596,7 +596,23 @@
596
596
  }
597
597
 
598
598
  .e-ie-finetune-value-span {
599
- top: 26% !important; /* stylelint-disable-line declaration-no-important */
599
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
600
+ }
601
+
602
+ .e-ie-finetune-slider-label {
603
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
604
+ }
605
+
606
+ .e-ie-finetune-slider-wrap {
607
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
608
+ }
609
+
610
+ .e-transparency-slider-wrap {
611
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
612
+ }
613
+
614
+ .e-ie-slider-wrap {
615
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
600
616
  }
601
617
 
602
618
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -614,6 +630,10 @@
614
630
  background: none !important; /* stylelint-disable-line declaration-no-important */
615
631
  }
616
632
 
633
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
634
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
635
+ }
636
+
617
637
  .e-image-editor {
618
638
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
619
639
  }
package/styles/material3.css CHANGED
@@ -652,7 +652,23 @@
652
652
  }
653
653
 
654
654
  .e-ie-finetune-value-span {
655
- top: 26% !important; /* stylelint-disable-line declaration-no-important */
655
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
656
+ }
657
+
658
+ .e-ie-finetune-slider-label {
659
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
660
+ }
661
+
662
+ .e-ie-finetune-slider-wrap {
663
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
664
+ }
665
+
666
+ .e-transparency-slider-wrap {
667
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
668
+ }
669
+
670
+ .e-ie-slider-wrap {
671
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
656
672
  }
657
673
 
658
674
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -670,6 +686,10 @@
670
686
  background: none !important; /* stylelint-disable-line declaration-no-important */
671
687
  }
672
688
 
689
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
690
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
691
+ }
692
+
673
693
  .e-image-editor {
674
694
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
675
695
  }
package/styles/tailwind-dark.css CHANGED
@@ -527,7 +527,23 @@
527
527
  }
528
528
 
529
529
  .e-ie-finetune-value-span {
530
- top: 26% !important; /* stylelint-disable-line declaration-no-important */
530
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
531
+ }
532
+
533
+ .e-ie-finetune-slider-label {
534
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
535
+ }
536
+
537
+ .e-ie-finetune-slider-wrap {
538
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
539
+ }
540
+
541
+ .e-transparency-slider-wrap {
542
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
543
+ }
544
+
545
+ .e-ie-slider-wrap {
546
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
531
547
  }
532
548
 
533
549
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -543,6 +559,10 @@
543
559
  background: none !important; /* stylelint-disable-line declaration-no-important */
544
560
  }
545
561
 
562
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
563
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
564
+ }
565
+
546
566
  .e-image-editor {
547
567
  background: #4b5563;
548
568
  }
package/styles/tailwind.css CHANGED
@@ -527,7 +527,23 @@
527
527
  }
528
528
 
529
529
  .e-ie-finetune-value-span {
530
- top: 26% !important; /* stylelint-disable-line declaration-no-important */
530
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
531
+ }
532
+
533
+ .e-ie-finetune-slider-label {
534
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
535
+ }
536
+
537
+ .e-ie-finetune-slider-wrap {
538
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
539
+ }
540
+
541
+ .e-transparency-slider-wrap {
542
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
543
+ }
544
+
545
+ .e-ie-slider-wrap {
546
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
531
547
  }
532
548
 
533
549
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -543,6 +559,10 @@
543
559
  background: none !important; /* stylelint-disable-line declaration-no-important */
544
560
  }
545
561
 
562
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
563
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
564
+ }
565
+
546
566
  .e-image-editor {
547
567
  background: #e5e7eb;
548
568
  }