@syncfusion/ej2-image-editor 27.2.5 → 28.1.39

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 (95) hide show
  1. package/README.md +2 -2
  2. package/dist/ej2-image-editor.umd.min.js +3 -3
  3. package/dist/ej2-image-editor.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-image-editor.es2015.js +380 -52
  5. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es5.js +388 -52
  7. package/dist/es6/ej2-image-editor.es5.js.map +1 -1
  8. package/dist/global/ej2-image-editor.min.js +3 -3
  9. package/dist/global/ej2-image-editor.min.js.map +1 -1
  10. package/dist/global/index.d.ts +2 -2
  11. package/package.json +13 -13
  12. package/src/image-editor/action/draw.d.ts +4 -0
  13. package/src/image-editor/action/draw.js +97 -11
  14. package/src/image-editor/action/export.js +1 -1
  15. package/src/image-editor/action/shape.d.ts +1 -1
  16. package/src/image-editor/action/shape.js +22 -15
  17. package/src/image-editor/action/transform.js +1 -0
  18. package/src/image-editor/base/enum.d.ts +8 -2
  19. package/src/image-editor/base/enum.js +6 -0
  20. package/src/image-editor/base/image-editor-model.d.ts +51 -0
  21. package/src/image-editor/base/image-editor.d.ts +79 -2
  22. package/src/image-editor/base/image-editor.js +223 -12
  23. package/src/image-editor/renderer/toolbar.js +38 -12
  24. package/styles/bds-lite.css +867 -0
  25. package/styles/bds-lite.scss +13 -0
  26. package/styles/bds.css +973 -0
  27. package/styles/bds.scss +14 -0
  28. package/styles/bootstrap-dark-lite.css +9 -3
  29. package/styles/bootstrap-dark.css +9 -3
  30. package/styles/bootstrap-lite.css +9 -3
  31. package/styles/bootstrap.css +9 -3
  32. package/styles/bootstrap4-lite.css +9 -3
  33. package/styles/bootstrap4.css +9 -3
  34. package/styles/bootstrap5-dark-lite.css +9 -3
  35. package/styles/bootstrap5-dark.css +9 -3
  36. package/styles/bootstrap5-lite.css +9 -3
  37. package/styles/bootstrap5.3-lite.css +9 -3
  38. package/styles/bootstrap5.3.css +9 -3
  39. package/styles/bootstrap5.css +9 -3
  40. package/styles/fabric-dark-lite.css +9 -3
  41. package/styles/fabric-dark.css +9 -3
  42. package/styles/fabric-lite.css +9 -3
  43. package/styles/fabric.css +9 -3
  44. package/styles/fluent-dark-lite.css +9 -3
  45. package/styles/fluent-dark.css +9 -3
  46. package/styles/fluent-lite.css +9 -3
  47. package/styles/fluent.css +9 -3
  48. package/styles/fluent2-lite.css +9 -3
  49. package/styles/fluent2.css +9 -3
  50. package/styles/highcontrast-light-lite.css +9 -3
  51. package/styles/highcontrast-light.css +9 -3
  52. package/styles/highcontrast-lite.css +9 -3
  53. package/styles/highcontrast.css +9 -3
  54. package/styles/image-editor/_layout.scss +18 -4
  55. package/styles/image-editor/_tailwind3-definition.scss +29 -0
  56. package/styles/image-editor/bds.css +973 -0
  57. package/styles/image-editor/bds.scss +14 -0
  58. package/styles/image-editor/bootstrap-dark.css +9 -3
  59. package/styles/image-editor/bootstrap.css +9 -3
  60. package/styles/image-editor/bootstrap4.css +9 -3
  61. package/styles/image-editor/bootstrap5-dark.css +9 -3
  62. package/styles/image-editor/bootstrap5.3.css +9 -3
  63. package/styles/image-editor/bootstrap5.css +9 -3
  64. package/styles/image-editor/fabric-dark.css +9 -3
  65. package/styles/image-editor/fabric.css +9 -3
  66. package/styles/image-editor/fluent-dark.css +9 -3
  67. package/styles/image-editor/fluent.css +9 -3
  68. package/styles/image-editor/fluent2.css +9 -3
  69. package/styles/image-editor/highcontrast-light.css +9 -3
  70. package/styles/image-editor/highcontrast.css +9 -3
  71. package/styles/image-editor/icons/_tailwind3.scss +259 -0
  72. package/styles/image-editor/material-dark.css +9 -3
  73. package/styles/image-editor/material.css +9 -3
  74. package/styles/image-editor/material3-dark.css +9 -3
  75. package/styles/image-editor/material3.css +9 -3
  76. package/styles/image-editor/tailwind-dark.css +9 -3
  77. package/styles/image-editor/tailwind.css +9 -3
  78. package/styles/image-editor/tailwind3.css +864 -0
  79. package/styles/image-editor/tailwind3.scss +14 -0
  80. package/styles/material-dark-lite.css +9 -3
  81. package/styles/material-dark.css +9 -3
  82. package/styles/material-lite.css +9 -3
  83. package/styles/material.css +9 -3
  84. package/styles/material3-dark-lite.css +9 -3
  85. package/styles/material3-dark.css +9 -3
  86. package/styles/material3-lite.css +9 -3
  87. package/styles/material3.css +9 -3
  88. package/styles/tailwind-dark-lite.css +9 -3
  89. package/styles/tailwind-dark.css +9 -3
  90. package/styles/tailwind-lite.css +9 -3
  91. package/styles/tailwind.css +9 -3
  92. package/styles/tailwind3-lite.css +759 -0
  93. package/styles/tailwind3-lite.scss +13 -0
  94. package/styles/tailwind3.css +864 -0
  95. package/styles/tailwind3.scss +14 -0
package/styles/image-editor/tailwind3.scss ADDED
@@ -0,0 +1,14 @@
1
+ @import 'ej2-base/styles/definition/tailwind3.scss';
2
+ @import 'ej2-buttons/styles/button/tailwind3-definition.scss';
3
+ @import 'ej2-splitbuttons/styles/drop-down-button/tailwind3-definition.scss';
4
+ @import 'ej2-inputs/styles/numerictextbox/tailwind3-definition.scss';
5
+ @import 'ej2-inputs/styles/textbox/tailwind3-definition.scss';
6
+ @import 'ej2-inputs/styles/uploader/tailwind3-definition.scss';
7
+ @import 'ej2-popups/styles/tooltip/tailwind3-definition.scss';
8
+ @import 'ej2-inputs/styles/color-picker/tailwind3-definition.scss';
9
+ @import 'ej2-navigations/styles/toolbar/tailwind3-definition.scss';
10
+ @import 'ej2-popups/styles/spinner/tailwind3-definition.scss';
11
+ @import 'tailwind3-definition.scss';
12
+ @import 'icons/tailwind3.scss';
13
+ @import 'all.scss';
14
+ @import 'bigger.scss';
package/styles/material-dark-lite.css CHANGED
@@ -295,7 +295,9 @@
295
295
  }
296
296
  .e-image-editor .e-ie-drop-area .e-ie-drop-info {
297
297
  top: calc(50% + 40px);
298
- left: calc(50% - 100px);
298
+ left: 50%;
299
+ -webkit-transform: translate(-50%, -50%);
300
+ transform: translate(-50%, -50%);
299
301
  position: absolute;
300
302
  font-size: 14px;
301
303
  }
@@ -552,12 +554,12 @@
552
554
  .e-ie-img-save-name {
553
555
  display: inline-block;
554
556
  margin-right: 10px;
555
- width: calc(71% - 13px);
557
+ width: calc(69% - 13px);
556
558
  }
557
559
 
558
560
  .e-ie-img-save-dlg {
559
561
  display: inline-block;
560
- width: 90px;
562
+ width: 92px;
561
563
  }
562
564
 
563
565
  .e-ie-img-save-dlg .e-btn {
@@ -692,6 +694,10 @@
692
694
  margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
693
695
  }
694
696
 
697
+ .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
698
+ top: calc(50% + 60px);
699
+ }
700
+
695
701
  .e-image-editor {
696
702
  background: #292929;
697
703
  }
package/styles/material-dark.css CHANGED
@@ -295,7 +295,9 @@
295
295
  }
296
296
  .e-image-editor .e-ie-drop-area .e-ie-drop-info {
297
297
  top: calc(50% + 40px);
298
- left: calc(50% - 100px);
298
+ left: 50%;
299
+ -webkit-transform: translate(-50%, -50%);
300
+ transform: translate(-50%, -50%);
299
301
  position: absolute;
300
302
  font-size: 14px;
301
303
  }
@@ -552,12 +554,12 @@
552
554
  .e-ie-img-save-name {
553
555
  display: inline-block;
554
556
  margin-right: 10px;
555
- width: calc(71% - 13px);
557
+ width: calc(69% - 13px);
556
558
  }
557
559
 
558
560
  .e-ie-img-save-dlg {
559
561
  display: inline-block;
560
- width: 90px;
562
+ width: 92px;
561
563
  }
562
564
 
563
565
  .e-ie-img-save-dlg .e-btn {
@@ -692,6 +694,10 @@
692
694
  margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
693
695
  }
694
696
 
697
+ .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
698
+ top: calc(50% + 60px);
699
+ }
700
+
695
701
  .e-image-editor {
696
702
  background: #292929;
697
703
  }
package/styles/material-lite.css CHANGED
@@ -295,7 +295,9 @@
295
295
  }
296
296
  .e-image-editor .e-ie-drop-area .e-ie-drop-info {
297
297
  top: calc(50% + 40px);
298
- left: calc(50% - 100px);
298
+ left: 50%;
299
+ -webkit-transform: translate(-50%, -50%);
300
+ transform: translate(-50%, -50%);
299
301
  position: absolute;
300
302
  font-size: 14px;
301
303
  }
@@ -552,12 +554,12 @@
552
554
  .e-ie-img-save-name {
553
555
  display: inline-block;
554
556
  margin-right: 10px;
555
- width: calc(71% - 13px);
557
+ width: calc(69% - 13px);
556
558
  }
557
559
 
558
560
  .e-ie-img-save-dlg {
559
561
  display: inline-block;
560
- width: 90px;
562
+ width: 92px;
561
563
  }
562
564
 
563
565
  .e-ie-img-save-dlg .e-btn {
@@ -694,6 +696,10 @@
694
696
  margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
695
697
  }
696
698
 
699
+ .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
700
+ top: calc(50% + 60px);
701
+ }
702
+
697
703
  .e-image-editor {
698
704
  background: #eee;
699
705
  }
package/styles/material.css CHANGED
@@ -295,7 +295,9 @@
295
295
  }
296
296
  .e-image-editor .e-ie-drop-area .e-ie-drop-info {
297
297
  top: calc(50% + 40px);
298
- left: calc(50% - 100px);
298
+ left: 50%;
299
+ -webkit-transform: translate(-50%, -50%);
300
+ transform: translate(-50%, -50%);
299
301
  position: absolute;
300
302
  font-size: 14px;
301
303
  }
@@ -552,12 +554,12 @@
552
554
  .e-ie-img-save-name {
553
555
  display: inline-block;
554
556
  margin-right: 10px;
555
- width: calc(71% - 13px);
557
+ width: calc(69% - 13px);
556
558
  }
557
559
 
558
560
  .e-ie-img-save-dlg {
559
561
  display: inline-block;
560
- width: 90px;
562
+ width: 92px;
561
563
  }
562
564
 
563
565
  .e-ie-img-save-dlg .e-btn {
@@ -694,6 +696,10 @@
694
696
  margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
695
697
  }
696
698
 
699
+ .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
700
+ top: calc(50% + 60px);
701
+ }
702
+
697
703
  .e-image-editor {
698
704
  background: #eee;
699
705
  }
package/styles/material3-dark-lite.css CHANGED
@@ -282,7 +282,9 @@
282
282
  }
283
283
  .e-image-editor .e-ie-drop-area .e-ie-drop-info {
284
284
  top: calc(50% + 40px);
285
- left: calc(50% - 100px);
285
+ left: 50%;
286
+ -webkit-transform: translate(-50%, -50%);
287
+ transform: translate(-50%, -50%);
286
288
  position: absolute;
287
289
  font-size: 14px;
288
290
  }
@@ -564,12 +566,12 @@
564
566
  .e-ie-img-save-name {
565
567
  display: inline-block;
566
568
  margin-right: 10px;
567
- width: calc(71% - 13px);
569
+ width: calc(69% - 13px);
568
570
  }
569
571
 
570
572
  .e-ie-img-save-dlg {
571
573
  display: inline-block;
572
- width: 90px;
574
+ width: 92px;
573
575
  }
574
576
 
575
577
  .e-ie-img-save-dlg .e-btn {
@@ -714,6 +716,10 @@
714
716
  margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
715
717
  }
716
718
 
719
+ .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
720
+ top: calc(50% + 60px);
721
+ }
722
+
717
723
  .e-image-editor {
718
724
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14))), rgba(var(--color-sf-surface));
719
725
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
package/styles/material3-dark.css CHANGED
@@ -282,7 +282,9 @@
282
282
  }
283
283
  .e-image-editor .e-ie-drop-area .e-ie-drop-info {
284
284
  top: calc(50% + 40px);
285
- left: calc(50% - 100px);
285
+ left: 50%;
286
+ -webkit-transform: translate(-50%, -50%);
287
+ transform: translate(-50%, -50%);
286
288
  position: absolute;
287
289
  font-size: 14px;
288
290
  }
@@ -564,12 +566,12 @@
564
566
  .e-ie-img-save-name {
565
567
  display: inline-block;
566
568
  margin-right: 10px;
567
- width: calc(71% - 13px);
569
+ width: calc(69% - 13px);
568
570
  }
569
571
 
570
572
  .e-ie-img-save-dlg {
571
573
  display: inline-block;
572
- width: 90px;
574
+ width: 92px;
573
575
  }
574
576
 
575
577
  .e-ie-img-save-dlg .e-btn {
@@ -714,6 +716,10 @@
714
716
  margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
715
717
  }
716
718
 
719
+ .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
720
+ top: calc(50% + 60px);
721
+ }
722
+
717
723
  .e-image-editor {
718
724
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14))), rgba(var(--color-sf-surface));
719
725
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
package/styles/material3-lite.css CHANGED
@@ -284,7 +284,9 @@
284
284
  }
285
285
  .e-image-editor .e-ie-drop-area .e-ie-drop-info {
286
286
  top: calc(50% + 40px);
287
- left: calc(50% - 100px);
287
+ left: 50%;
288
+ -webkit-transform: translate(-50%, -50%);
289
+ transform: translate(-50%, -50%);
288
290
  position: absolute;
289
291
  font-size: 14px;
290
292
  }
@@ -566,12 +568,12 @@
566
568
  .e-ie-img-save-name {
567
569
  display: inline-block;
568
570
  margin-right: 10px;
569
- width: calc(71% - 13px);
571
+ width: calc(69% - 13px);
570
572
  }
571
573
 
572
574
  .e-ie-img-save-dlg {
573
575
  display: inline-block;
574
- width: 90px;
576
+ width: 92px;
575
577
  }
576
578
 
577
579
  .e-ie-img-save-dlg .e-btn {
@@ -716,6 +718,10 @@
716
718
  margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
717
719
  }
718
720
 
721
+ .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
722
+ top: calc(50% + 60px);
723
+ }
724
+
719
725
  .e-image-editor {
720
726
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14))), rgba(var(--color-sf-surface));
721
727
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
package/styles/material3.css CHANGED
@@ -284,7 +284,9 @@
284
284
  }
285
285
  .e-image-editor .e-ie-drop-area .e-ie-drop-info {
286
286
  top: calc(50% + 40px);
287
- left: calc(50% - 100px);
287
+ left: 50%;
288
+ -webkit-transform: translate(-50%, -50%);
289
+ transform: translate(-50%, -50%);
288
290
  position: absolute;
289
291
  font-size: 14px;
290
292
  }
@@ -566,12 +568,12 @@
566
568
  .e-ie-img-save-name {
567
569
  display: inline-block;
568
570
  margin-right: 10px;
569
- width: calc(71% - 13px);
571
+ width: calc(69% - 13px);
570
572
  }
571
573
 
572
574
  .e-ie-img-save-dlg {
573
575
  display: inline-block;
574
- width: 90px;
576
+ width: 92px;
575
577
  }
576
578
 
577
579
  .e-ie-img-save-dlg .e-btn {
@@ -716,6 +718,10 @@
716
718
  margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
717
719
  }
718
720
 
721
+ .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
722
+ top: calc(50% + 60px);
723
+ }
724
+
719
725
  .e-image-editor {
720
726
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14))), rgba(var(--color-sf-surface));
721
727
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
package/styles/tailwind-dark-lite.css CHANGED
@@ -273,7 +273,9 @@
273
273
  }
274
274
  .e-image-editor .e-ie-drop-area .e-ie-drop-info {
275
275
  top: calc(50% + 40px);
276
- left: calc(50% - 100px);
276
+ left: 50%;
277
+ -webkit-transform: translate(-50%, -50%);
278
+ transform: translate(-50%, -50%);
277
279
  position: absolute;
278
280
  font-size: 14px;
279
281
  }
@@ -530,12 +532,12 @@
530
532
  .e-ie-img-save-name {
531
533
  display: inline-block;
532
534
  margin-right: 10px;
533
- width: calc(71% - 13px);
535
+ width: calc(69% - 13px);
534
536
  }
535
537
 
536
538
  .e-ie-img-save-dlg {
537
539
  display: inline-block;
538
- width: 90px;
540
+ width: 92px;
539
541
  }
540
542
 
541
543
  .e-ie-img-save-dlg .e-btn {
@@ -674,6 +676,10 @@
674
676
  margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
675
677
  }
676
678
 
679
+ .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
680
+ top: calc(50% + 60px);
681
+ }
682
+
677
683
  .e-image-editor {
678
684
  background: #4b5563;
679
685
  }
package/styles/tailwind-dark.css CHANGED
@@ -273,7 +273,9 @@
273
273
  }
274
274
  .e-image-editor .e-ie-drop-area .e-ie-drop-info {
275
275
  top: calc(50% + 40px);
276
- left: calc(50% - 100px);
276
+ left: 50%;
277
+ -webkit-transform: translate(-50%, -50%);
278
+ transform: translate(-50%, -50%);
277
279
  position: absolute;
278
280
  font-size: 14px;
279
281
  }
@@ -530,12 +532,12 @@
530
532
  .e-ie-img-save-name {
531
533
  display: inline-block;
532
534
  margin-right: 10px;
533
- width: calc(71% - 13px);
535
+ width: calc(69% - 13px);
534
536
  }
535
537
 
536
538
  .e-ie-img-save-dlg {
537
539
  display: inline-block;
538
- width: 90px;
540
+ width: 92px;
539
541
  }
540
542
 
541
543
  .e-ie-img-save-dlg .e-btn {
@@ -674,6 +676,10 @@
674
676
  margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
675
677
  }
676
678
 
679
+ .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
680
+ top: calc(50% + 60px);
681
+ }
682
+
677
683
  .e-image-editor {
678
684
  background: #4b5563;
679
685
  }
package/styles/tailwind-lite.css CHANGED
@@ -273,7 +273,9 @@
273
273
  }
274
274
  .e-image-editor .e-ie-drop-area .e-ie-drop-info {
275
275
  top: calc(50% + 40px);
276
- left: calc(50% - 100px);
276
+ left: 50%;
277
+ -webkit-transform: translate(-50%, -50%);
278
+ transform: translate(-50%, -50%);
277
279
  position: absolute;
278
280
  font-size: 14px;
279
281
  }
@@ -530,12 +532,12 @@
530
532
  .e-ie-img-save-name {
531
533
  display: inline-block;
532
534
  margin-right: 10px;
533
- width: calc(71% - 13px);
535
+ width: calc(69% - 13px);
534
536
  }
535
537
 
536
538
  .e-ie-img-save-dlg {
537
539
  display: inline-block;
538
- width: 90px;
540
+ width: 92px;
539
541
  }
540
542
 
541
543
  .e-ie-img-save-dlg .e-btn {
@@ -674,6 +676,10 @@
674
676
  margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
675
677
  }
676
678
 
679
+ .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
680
+ top: calc(50% + 60px);
681
+ }
682
+
677
683
  .e-image-editor {
678
684
  background: #e5e7eb;
679
685
  }
package/styles/tailwind.css CHANGED
@@ -273,7 +273,9 @@
273
273
  }
274
274
  .e-image-editor .e-ie-drop-area .e-ie-drop-info {
275
275
  top: calc(50% + 40px);
276
- left: calc(50% - 100px);
276
+ left: 50%;
277
+ -webkit-transform: translate(-50%, -50%);
278
+ transform: translate(-50%, -50%);
277
279
  position: absolute;
278
280
  font-size: 14px;
279
281
  }
@@ -530,12 +532,12 @@
530
532
  .e-ie-img-save-name {
531
533
  display: inline-block;
532
534
  margin-right: 10px;
533
- width: calc(71% - 13px);
535
+ width: calc(69% - 13px);
534
536
  }
535
537
 
536
538
  .e-ie-img-save-dlg {
537
539
  display: inline-block;
538
- width: 90px;
540
+ width: 92px;
539
541
  }
540
542
 
541
543
  .e-ie-img-save-dlg .e-btn {
@@ -674,6 +676,10 @@
674
676
  margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
675
677
  }
676
678
 
679
+ .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
680
+ top: calc(50% + 60px);
681
+ }
682
+
677
683
  .e-image-editor {
678
684
  background: #e5e7eb;
679
685
  }