@syncfusion/ej2-image-editor 26.1.38 → 26.1.41

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 (76) hide show
  1. package/dist/ej2-image-editor.umd.min.js +2 -2
  2. package/dist/ej2-image-editor.umd.min.js.map +1 -1
  3. package/dist/es6/ej2-image-editor.es2015.js +134 -29
  4. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  5. package/dist/es6/ej2-image-editor.es5.js +133 -29
  6. package/dist/es6/ej2-image-editor.es5.js.map +1 -1
  7. package/dist/global/ej2-image-editor.min.js +2 -2
  8. package/dist/global/ej2-image-editor.min.js.map +1 -1
  9. package/dist/global/index.d.ts +1 -1
  10. package/package.json +10 -10
  11. package/src/image-editor/action/draw.js +1 -2
  12. package/src/image-editor/action/export.js +11 -7
  13. package/src/image-editor/action/selection.d.ts +1 -0
  14. package/src/image-editor/action/selection.js +47 -2
  15. package/src/image-editor/action/shape.js +11 -1
  16. package/src/image-editor/action/undo-redo.js +4 -0
  17. package/src/image-editor/base/image-editor.d.ts +4 -1
  18. package/src/image-editor/base/image-editor.js +6 -3
  19. package/src/image-editor/base/interface.d.ts +4 -0
  20. package/src/image-editor/renderer/toolbar.d.ts +1 -0
  21. package/src/image-editor/renderer/toolbar.js +53 -14
  22. package/styles/bootstrap-dark.css +7 -0
  23. package/styles/bootstrap.css +7 -0
  24. package/styles/bootstrap4.css +7 -0
  25. package/styles/bootstrap5-dark.css +7 -0
  26. package/styles/bootstrap5.css +7 -0
  27. package/styles/fabric-dark.css +7 -0
  28. package/styles/fabric.css +7 -0
  29. package/styles/fluent-dark.css +7 -0
  30. package/styles/fluent.css +7 -0
  31. package/styles/fluent2.css +12 -5
  32. package/styles/highcontrast-light.css +7 -0
  33. package/styles/highcontrast.css +7 -0
  34. package/styles/image-editor/_bds-definition.scss +1 -0
  35. package/styles/image-editor/_bootstrap-dark-definition.scss +1 -0
  36. package/styles/image-editor/_bootstrap-definition.scss +1 -0
  37. package/styles/image-editor/_bootstrap4-definition.scss +1 -0
  38. package/styles/image-editor/_bootstrap5-definition.scss +1 -0
  39. package/styles/image-editor/_bootstrap5.3-definition.scss +1 -0
  40. package/styles/image-editor/_fabric-dark-definition.scss +1 -0
  41. package/styles/image-editor/_fabric-definition.scss +1 -0
  42. package/styles/image-editor/_fluent-definition.scss +1 -0
  43. package/styles/image-editor/_fluent2-definition.scss +1 -0
  44. package/styles/image-editor/_fusionnew-definition.scss +1 -0
  45. package/styles/image-editor/_highcontrast-definition.scss +1 -0
  46. package/styles/image-editor/_highcontrast-light-definition.scss +1 -0
  47. package/styles/image-editor/_layout.scss +29 -4
  48. package/styles/image-editor/_material-dark-definition.scss +1 -0
  49. package/styles/image-editor/_material-definition.scss +1 -0
  50. package/styles/image-editor/_material3-definition.scss +1 -0
  51. package/styles/image-editor/_tailwind-definition.scss +1 -0
  52. package/styles/image-editor/_theme.scss +7 -0
  53. package/styles/image-editor/bootstrap-dark.css +7 -0
  54. package/styles/image-editor/bootstrap.css +7 -0
  55. package/styles/image-editor/bootstrap4.css +7 -0
  56. package/styles/image-editor/bootstrap5-dark.css +7 -0
  57. package/styles/image-editor/bootstrap5.css +7 -0
  58. package/styles/image-editor/fabric-dark.css +7 -0
  59. package/styles/image-editor/fabric.css +7 -0
  60. package/styles/image-editor/fluent-dark.css +7 -0
  61. package/styles/image-editor/fluent.css +7 -0
  62. package/styles/image-editor/fluent2.css +12 -5
  63. package/styles/image-editor/highcontrast-light.css +7 -0
  64. package/styles/image-editor/highcontrast.css +7 -0
  65. package/styles/image-editor/material-dark.css +7 -0
  66. package/styles/image-editor/material.css +7 -0
  67. package/styles/image-editor/material3-dark.css +20 -3
  68. package/styles/image-editor/material3.css +20 -3
  69. package/styles/image-editor/tailwind-dark.css +7 -0
  70. package/styles/image-editor/tailwind.css +7 -0
  71. package/styles/material-dark.css +7 -0
  72. package/styles/material.css +7 -0
  73. package/styles/material3-dark.css +20 -3
  74. package/styles/material3.css +20 -3
  75. package/styles/tailwind-dark.css +7 -0
  76. package/styles/tailwind.css +7 -0
package/styles/image-editor/material3.css CHANGED
@@ -597,6 +597,11 @@
597
597
  top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
598
598
  width: 16px !important; /* stylelint-disable-line declaration-no-important */
599
599
  }
600
+ .e-image-editor .e-ie-save-dialog .e-slider-container .e-slider .e-handle, .e-image-editor .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
601
+ height: 16px !important; /* stylelint-disable-line declaration-no-important */
602
+ top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
603
+ width: 16px !important; /* stylelint-disable-line declaration-no-important */
604
+ }
600
605
 
601
606
  .e-ie-img-save-dlg .e-btn {
602
607
  background: transparent;
@@ -796,11 +801,12 @@
796
801
  text-transform: capitalize;
797
802
  margin-left: calc(100% - 194px);
798
803
  margin-top: 4px;
799
- margin-left: calc(100% - 185px);
804
+ margin-left: calc(100% - 190px);
800
805
  }
801
806
 
802
807
  .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
803
808
  margin-left: calc(100% - 145px) !important; /* stylelint-disable-line declaration-no-important */
809
+ margin-left: calc(100% - 140px) !important; /* stylelint-disable-line declaration-no-important */
804
810
  }
805
811
 
806
812
  .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
@@ -858,7 +864,7 @@
858
864
  }
859
865
  .e-blr-ie-save-dialog .e-ie-img-size-value-span {
860
866
  vertical-align: middle;
861
- margin-left: calc(50% - 55px);
867
+ margin-left: calc(50% - 52px);
862
868
  }
863
869
  .e-blr-ie-save-dialog .e-btn-group .e-btn {
864
870
  padding: 8px 10.5px;
@@ -877,11 +883,15 @@
877
883
  height: 28px !important; /* stylelint-disable-line declaration-no-important */
878
884
  }
879
885
  .e-blr-ie-save-dialog.e-device .e-ie-img-size-value-span {
880
- margin-left: calc(75% - 100px) !important; /* stylelint-disable-line declaration-no-important */
886
+ margin-left: calc(73% - 100px) !important; /* stylelint-disable-line declaration-no-important */
881
887
  }
882
888
  .e-blr-ie-save-dialog.e-device .e-btn-group .e-btn {
883
889
  padding: 11px 12px;
884
890
  }
891
+ .e-bigger .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
892
+ top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
893
+ }
894
+
885
895
  .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
886
896
  width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
887
897
  }
@@ -961,4 +971,11 @@
961
971
  .e-dropdown-popup .e-selected-btn {
962
972
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.16)), to(rgba(var(--color-sf-primary), 0.16))), rgba(var(--color-sf-surface)) !important;
963
973
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.16), rgba(var(--color-sf-primary), 0.16)), rgba(var(--color-sf-surface)) !important; /* stylelint-disable-line declaration-no-important */
974
+ }
975
+
976
+ .e-ie-filter-canvas:focus,
977
+ .filter-wrapper:focus .e-ie-filter-canvas,
978
+ .filter-wrapper:focus canvas,
979
+ .filter-wrapper canvas:focus {
980
+ border: 1px solid var(--color-sf-on-surface-variant);
964
981
  }
package/styles/image-editor/tailwind-dark.css CHANGED
@@ -809,4 +809,11 @@
809
809
 
810
810
  .e-dropdown-popup .e-selected-btn {
811
811
  background: #4b5563 !important; /* stylelint-disable-line declaration-no-important */
812
+ }
813
+
814
+ .e-ie-filter-canvas:focus,
815
+ .filter-wrapper:focus .e-ie-filter-canvas,
816
+ .filter-wrapper:focus canvas,
817
+ .filter-wrapper canvas:focus {
818
+ border: 1px solid #fff;
812
819
  }
package/styles/image-editor/tailwind.css CHANGED
@@ -809,4 +809,11 @@
809
809
 
810
810
  .e-dropdown-popup .e-selected-btn {
811
811
  background: #e5e7eb !important; /* stylelint-disable-line declaration-no-important */
812
+ }
813
+
814
+ .e-ie-filter-canvas:focus,
815
+ .filter-wrapper:focus .e-ie-filter-canvas,
816
+ .filter-wrapper:focus canvas,
817
+ .filter-wrapper canvas:focus {
818
+ border: 1px solid #374151;
812
819
  }
package/styles/material-dark.css CHANGED
@@ -823,4 +823,11 @@
823
823
 
824
824
  .e-dropdown-popup .e-selected-btn {
825
825
  background: #757575 !important; /* stylelint-disable-line declaration-no-important */
826
+ }
827
+
828
+ .e-ie-filter-canvas:focus,
829
+ .filter-wrapper:focus .e-ie-filter-canvas,
830
+ .filter-wrapper:focus canvas,
831
+ .filter-wrapper canvas:focus {
832
+ border: 1px solid #fff;
826
833
  }
package/styles/material.css CHANGED
@@ -831,4 +831,11 @@
831
831
 
832
832
  .e-dropdown-popup .e-selected-btn {
833
833
  background: #bdbdbd !important; /* stylelint-disable-line declaration-no-important */
834
+ }
835
+
836
+ .e-ie-filter-canvas:focus,
837
+ .filter-wrapper:focus .e-ie-filter-canvas,
838
+ .filter-wrapper:focus canvas,
839
+ .filter-wrapper canvas:focus {
840
+ border: 1px solid #000;
834
841
  }
package/styles/material3-dark.css CHANGED
@@ -541,6 +541,11 @@
541
541
  top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
542
542
  width: 16px !important; /* stylelint-disable-line declaration-no-important */
543
543
  }
544
+ .e-image-editor .e-ie-save-dialog .e-slider-container .e-slider .e-handle, .e-image-editor .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
545
+ height: 16px !important; /* stylelint-disable-line declaration-no-important */
546
+ top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
547
+ width: 16px !important; /* stylelint-disable-line declaration-no-important */
548
+ }
544
549
 
545
550
  .e-ie-img-save-dlg .e-btn {
546
551
  background: transparent;
@@ -740,11 +745,12 @@
740
745
  text-transform: capitalize;
741
746
  margin-left: calc(100% - 194px);
742
747
  margin-top: 4px;
743
- margin-left: calc(100% - 185px);
748
+ margin-left: calc(100% - 190px);
744
749
  }
745
750
 
746
751
  .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
747
752
  margin-left: calc(100% - 145px) !important; /* stylelint-disable-line declaration-no-important */
753
+ margin-left: calc(100% - 140px) !important; /* stylelint-disable-line declaration-no-important */
748
754
  }
749
755
 
750
756
  .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
@@ -802,7 +808,7 @@
802
808
  }
803
809
  .e-blr-ie-save-dialog .e-ie-img-size-value-span {
804
810
  vertical-align: middle;
805
- margin-left: calc(50% - 55px);
811
+ margin-left: calc(50% - 52px);
806
812
  }
807
813
  .e-blr-ie-save-dialog .e-btn-group .e-btn {
808
814
  padding: 8px 10.5px;
@@ -821,11 +827,15 @@
821
827
  height: 28px !important; /* stylelint-disable-line declaration-no-important */
822
828
  }
823
829
  .e-blr-ie-save-dialog.e-device .e-ie-img-size-value-span {
824
- margin-left: calc(75% - 100px) !important; /* stylelint-disable-line declaration-no-important */
830
+ margin-left: calc(73% - 100px) !important; /* stylelint-disable-line declaration-no-important */
825
831
  }
826
832
  .e-blr-ie-save-dialog.e-device .e-btn-group .e-btn {
827
833
  padding: 11px 12px;
828
834
  }
835
+ .e-bigger .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
836
+ top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
837
+ }
838
+
829
839
  .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
830
840
  width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
831
841
  }
@@ -905,4 +915,11 @@
905
915
  .e-dropdown-popup .e-selected-btn {
906
916
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.16)), to(rgba(var(--color-sf-primary), 0.16))), rgba(var(--color-sf-surface)) !important;
907
917
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.16), rgba(var(--color-sf-primary), 0.16)), rgba(var(--color-sf-surface)) !important; /* stylelint-disable-line declaration-no-important */
918
+ }
919
+
920
+ .e-ie-filter-canvas:focus,
921
+ .filter-wrapper:focus .e-ie-filter-canvas,
922
+ .filter-wrapper:focus canvas,
923
+ .filter-wrapper canvas:focus {
924
+ border: 1px solid var(--color-sf-on-surface-variant);
908
925
  }
package/styles/material3.css CHANGED
@@ -597,6 +597,11 @@
597
597
  top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
598
598
  width: 16px !important; /* stylelint-disable-line declaration-no-important */
599
599
  }
600
+ .e-image-editor .e-ie-save-dialog .e-slider-container .e-slider .e-handle, .e-image-editor .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
601
+ height: 16px !important; /* stylelint-disable-line declaration-no-important */
602
+ top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
603
+ width: 16px !important; /* stylelint-disable-line declaration-no-important */
604
+ }
600
605
 
601
606
  .e-ie-img-save-dlg .e-btn {
602
607
  background: transparent;
@@ -796,11 +801,12 @@
796
801
  text-transform: capitalize;
797
802
  margin-left: calc(100% - 194px);
798
803
  margin-top: 4px;
799
- margin-left: calc(100% - 185px);
804
+ margin-left: calc(100% - 190px);
800
805
  }
801
806
 
802
807
  .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
803
808
  margin-left: calc(100% - 145px) !important; /* stylelint-disable-line declaration-no-important */
809
+ margin-left: calc(100% - 140px) !important; /* stylelint-disable-line declaration-no-important */
804
810
  }
805
811
 
806
812
  .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
@@ -858,7 +864,7 @@
858
864
  }
859
865
  .e-blr-ie-save-dialog .e-ie-img-size-value-span {
860
866
  vertical-align: middle;
861
- margin-left: calc(50% - 55px);
867
+ margin-left: calc(50% - 52px);
862
868
  }
863
869
  .e-blr-ie-save-dialog .e-btn-group .e-btn {
864
870
  padding: 8px 10.5px;
@@ -877,11 +883,15 @@
877
883
  height: 28px !important; /* stylelint-disable-line declaration-no-important */
878
884
  }
879
885
  .e-blr-ie-save-dialog.e-device .e-ie-img-size-value-span {
880
- margin-left: calc(75% - 100px) !important; /* stylelint-disable-line declaration-no-important */
886
+ margin-left: calc(73% - 100px) !important; /* stylelint-disable-line declaration-no-important */
881
887
  }
882
888
  .e-blr-ie-save-dialog.e-device .e-btn-group .e-btn {
883
889
  padding: 11px 12px;
884
890
  }
891
+ .e-bigger .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
892
+ top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
893
+ }
894
+
885
895
  .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
886
896
  width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
887
897
  }
@@ -961,4 +971,11 @@
961
971
  .e-dropdown-popup .e-selected-btn {
962
972
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.16)), to(rgba(var(--color-sf-primary), 0.16))), rgba(var(--color-sf-surface)) !important;
963
973
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.16), rgba(var(--color-sf-primary), 0.16)), rgba(var(--color-sf-surface)) !important; /* stylelint-disable-line declaration-no-important */
974
+ }
975
+
976
+ .e-ie-filter-canvas:focus,
977
+ .filter-wrapper:focus .e-ie-filter-canvas,
978
+ .filter-wrapper:focus canvas,
979
+ .filter-wrapper canvas:focus {
980
+ border: 1px solid var(--color-sf-on-surface-variant);
964
981
  }
package/styles/tailwind-dark.css CHANGED
@@ -809,4 +809,11 @@
809
809
 
810
810
  .e-dropdown-popup .e-selected-btn {
811
811
  background: #4b5563 !important; /* stylelint-disable-line declaration-no-important */
812
+ }
813
+
814
+ .e-ie-filter-canvas:focus,
815
+ .filter-wrapper:focus .e-ie-filter-canvas,
816
+ .filter-wrapper:focus canvas,
817
+ .filter-wrapper canvas:focus {
818
+ border: 1px solid #fff;
812
819
  }
package/styles/tailwind.css CHANGED
@@ -809,4 +809,11 @@
809
809
 
810
810
  .e-dropdown-popup .e-selected-btn {
811
811
  background: #e5e7eb !important; /* stylelint-disable-line declaration-no-important */
812
+ }
813
+
814
+ .e-ie-filter-canvas:focus,
815
+ .filter-wrapper:focus .e-ie-filter-canvas,
816
+ .filter-wrapper:focus canvas,
817
+ .filter-wrapper canvas:focus {
818
+ border: 1px solid #374151;
812
819
  }