@syncfusion/ej2-image-editor 23.2.7 → 24.1.43

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 (99) hide show
  1. package/CHANGELOG.md +6 -54
  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 +7227 -4367
  5. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es5.js +7295 -4422
  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 +12 -12
  12. package/src/image-editor/action/crop.d.ts +6 -0
  13. package/src/image-editor/action/crop.js +347 -188
  14. package/src/image-editor/action/draw.d.ts +35 -2
  15. package/src/image-editor/action/draw.js +1691 -890
  16. package/src/image-editor/action/export.js +90 -29
  17. package/src/image-editor/action/filter.d.ts +3 -1
  18. package/src/image-editor/action/filter.js +74 -94
  19. package/src/image-editor/action/freehand-draw.d.ts +4 -0
  20. package/src/image-editor/action/freehand-draw.js +248 -147
  21. package/src/image-editor/action/selection.d.ts +6 -1
  22. package/src/image-editor/action/selection.js +1133 -1091
  23. package/src/image-editor/action/shape.d.ts +7 -0
  24. package/src/image-editor/action/shape.js +923 -550
  25. package/src/image-editor/action/transform.d.ts +2 -0
  26. package/src/image-editor/action/transform.js +518 -346
  27. package/src/image-editor/action/undo-redo.d.ts +2 -0
  28. package/src/image-editor/action/undo-redo.js +137 -36
  29. package/src/image-editor/base/enum.d.ts +2 -1
  30. package/src/image-editor/base/enum.js +1 -0
  31. package/src/image-editor/base/image-editor-model.d.ts +37 -2
  32. package/src/image-editor/base/image-editor.d.ts +124 -3
  33. package/src/image-editor/base/image-editor.js +675 -172
  34. package/src/image-editor/base/interface.d.ts +69 -15
  35. package/src/image-editor/renderer/toolbar.d.ts +10 -0
  36. package/src/image-editor/renderer/toolbar.js +1415 -835
  37. package/styles/bootstrap-dark.css +113 -8
  38. package/styles/bootstrap.css +112 -7
  39. package/styles/bootstrap4.css +113 -8
  40. package/styles/bootstrap5-dark.css +113 -8
  41. package/styles/bootstrap5.css +113 -8
  42. package/styles/fabric-dark.css +114 -9
  43. package/styles/fabric.css +113 -8
  44. package/styles/fluent-dark.css +118 -9
  45. package/styles/fluent.css +118 -9
  46. package/styles/highcontrast-light.css +112 -7
  47. package/styles/highcontrast.css +116 -7
  48. package/styles/image-editor/_bootstrap-dark-definition.scss +3 -0
  49. package/styles/image-editor/_bootstrap-definition.scss +3 -0
  50. package/styles/image-editor/_bootstrap4-definition.scss +3 -0
  51. package/styles/image-editor/_bootstrap5-definition.scss +3 -0
  52. package/styles/image-editor/_fabric-dark-definition.scss +3 -0
  53. package/styles/image-editor/_fabric-definition.scss +3 -0
  54. package/styles/image-editor/_fluent-definition.scss +3 -0
  55. package/styles/image-editor/_fusionnew-definition.scss +3 -0
  56. package/styles/image-editor/_highcontrast-definition.scss +3 -0
  57. package/styles/image-editor/_highcontrast-light-definition.scss +3 -0
  58. package/styles/image-editor/_layout.scss +138 -4
  59. package/styles/image-editor/_material-dark-definition.scss +3 -0
  60. package/styles/image-editor/_material-definition.scss +3 -0
  61. package/styles/image-editor/_material3-definition.scss +3 -0
  62. package/styles/image-editor/_tailwind-definition.scss +3 -0
  63. package/styles/image-editor/_theme.scss +2 -4
  64. package/styles/image-editor/bootstrap-dark.css +113 -8
  65. package/styles/image-editor/bootstrap.css +112 -7
  66. package/styles/image-editor/bootstrap4.css +113 -8
  67. package/styles/image-editor/bootstrap5-dark.css +113 -8
  68. package/styles/image-editor/bootstrap5.css +113 -8
  69. package/styles/image-editor/fabric-dark.css +114 -9
  70. package/styles/image-editor/fabric.css +113 -8
  71. package/styles/image-editor/fluent-dark.css +118 -9
  72. package/styles/image-editor/fluent.css +118 -9
  73. package/styles/image-editor/highcontrast-light.css +112 -7
  74. package/styles/image-editor/highcontrast.css +116 -7
  75. package/styles/image-editor/icons/_bootstrap-dark.scss +60 -0
  76. package/styles/image-editor/icons/_bootstrap.scss +60 -0
  77. package/styles/image-editor/icons/_bootstrap4.scss +60 -0
  78. package/styles/image-editor/icons/_bootstrap5.scss +60 -0
  79. package/styles/image-editor/icons/_fabric-dark.scss +60 -0
  80. package/styles/image-editor/icons/_fabric.scss +60 -0
  81. package/styles/image-editor/icons/_fluent.scss +66 -0
  82. package/styles/image-editor/icons/_highcontrast-light.scss +60 -0
  83. package/styles/image-editor/icons/_highcontrast.scss +60 -0
  84. package/styles/image-editor/icons/_material-dark.scss +60 -0
  85. package/styles/image-editor/icons/_material.scss +60 -0
  86. package/styles/image-editor/icons/_material3.scss +60 -0
  87. package/styles/image-editor/icons/_tailwind.scss +60 -0
  88. package/styles/image-editor/material-dark.css +113 -8
  89. package/styles/image-editor/material.css +113 -8
  90. package/styles/image-editor/material3-dark.css +126 -9
  91. package/styles/image-editor/material3.css +126 -9
  92. package/styles/image-editor/tailwind-dark.css +114 -9
  93. package/styles/image-editor/tailwind.css +114 -9
  94. package/styles/material-dark.css +113 -8
  95. package/styles/material.css +113 -8
  96. package/styles/material3-dark.css +126 -9
  97. package/styles/material3.css +126 -9
  98. package/styles/tailwind-dark.css +114 -9
  99. package/styles/tailwind.css +114 -9
@@ -94,6 +94,21 @@
94
94
  .e-image-editor .e-custom-e::before {
95
95
  content: "\e8af";
96
96
  }
97
+ .e-image-editor .e-custom-f::before {
98
+ content: "\e8dd";
99
+ }
100
+ .e-image-editor .e-custom-g::before {
101
+ content: "\e8de";
102
+ }
103
+ .e-image-editor .e-custom-h::before {
104
+ content: "\e8df";
105
+ }
106
+ .e-image-editor .e-custom-i::before {
107
+ content: "\e8e0";
108
+ }
109
+ .e-image-editor .e-custom-j::before {
110
+ content: "\e8e1";
111
+ }
97
112
  .e-image-editor .e-horizontal-flip::before {
98
113
  content: "\e8a3";
99
114
  }
@@ -155,6 +170,21 @@
155
170
  .e-dropdown-popup.e-image-popup .e-custom-e::before {
156
171
  content: "\e8af";
157
172
  }
173
+ .e-dropdown-popup.e-image-popup .e-custom-f::before {
174
+ content: "\e8dd";
175
+ }
176
+ .e-dropdown-popup.e-image-popup .e-custom-g::before {
177
+ content: "\e8de";
178
+ }
179
+ .e-dropdown-popup.e-image-popup .e-custom-h::before {
180
+ content: "\e8df";
181
+ }
182
+ .e-dropdown-popup.e-image-popup .e-custom-i::before {
183
+ content: "\e8e0";
184
+ }
185
+ .e-dropdown-popup.e-image-popup .e-custom-j::before {
186
+ content: "\e8e1";
187
+ }
158
188
  .e-dropdown-popup.e-image-popup .e-rectangle::before {
159
189
  content: "\e723";
160
190
  }
@@ -204,10 +234,42 @@
204
234
  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
205
235
  }
206
236
  .e-device.e-image-editor .e-slider-container {
207
- margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
237
+ margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
208
238
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
209
239
  }
240
+ .e-device.e-image-editor .e-straighten-slider {
241
+ margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
242
+ }
243
+ .e-device.e-image-editor .e-ie-straighten-value-span {
244
+ margin-left: 15px !important; /* stylelint-disable-line declaration-no-important */
245
+ }
246
+ .e-device.e-image-editor .e-hscroll .e-scroll-nav.e-scroll-right-nav {
247
+ display: none !important; /* stylelint-disable-line declaration-no-important */
248
+ }
249
+ .e-device.e-image-editor .e-hscroll.e-scroll-device {
250
+ padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
251
+ }
252
+ .e-device.e-image-editor .e-scroll-right-overlay {
253
+ display: none !important; /* stylelint-disable-line declaration-no-important */
254
+ }
255
+ .e-device.e-image-editor .e-contextual-toolbar-wrapper {
256
+ border-top: 1px solid #e5e7eb;
257
+ border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
258
+ }
259
+ .e-device.e-image-editor .e-toolbar {
260
+ border-bottom: 1px solid #e5e7eb;
261
+ }
262
+ .e-device.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
263
+ border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
264
+ }
265
+ .e-device.e-image-editor .e-bottom-toolbar .e-toolbar, .e-device.e-image-editor .e-bottom-toolbar-area .e-toolbar {
266
+ border-bottom: none;
267
+ }
210
268
 
269
+ .e-bigger .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle,
270
+ .e-image-editor.e-bigger .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle {
271
+ top: calc(50% - 9px) !important; /* stylelint-disable-line declaration-no-important */
272
+ }
211
273
  .e-bigger .e-image-editor .e-toolbar,
212
274
  .e-image-editor.e-bigger .e-toolbar {
213
275
  height: 48px !important; /* stylelint-disable-line declaration-no-important */
@@ -276,6 +338,11 @@
276
338
  border: 1px solid #e5e7eb;
277
339
  position: relative;
278
340
  display: block;
341
+ /* stylelint-disable property-no-vendor-prefix */
342
+ }
343
+ .e-image-editor .no-spin ::-webkit-inner-spin-button, .e-image-editor .no-spin ::-webkit-outer-spin-button {
344
+ -webkit-appearance: none;
345
+ margin: 0;
279
346
  }
280
347
  .e-image-editor .e-ie-drop-area {
281
348
  height: calc(100% - 18px);
@@ -312,6 +379,7 @@
312
379
  }
313
380
  .e-image-editor .e-toolbar {
314
381
  border: none;
382
+ border-bottom: 1px solid #e5e7eb;
315
383
  height: 38px !important; /* stylelint-disable-line declaration-no-important */
316
384
  min-height: 38px !important; /* stylelint-disable-line declaration-no-important */
317
385
  }
@@ -367,20 +435,19 @@
367
435
  .e-image-editor .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
368
436
  line-height: 1;
369
437
  }
370
- .e-image-editor .e-toolbar-area + .e-canvas-wrapper {
371
- border-top: 1px solid #e5e7eb;
372
- }
373
438
  .e-image-editor .e-toolbar-area + .e-canvas-wrapper .e-textarea {
374
439
  line-height: initial !important; /* stylelint-disable-line declaration-no-important */
375
440
  }
376
- .e-image-editor .e-bottom-toolbar {
441
+ .e-image-editor .e-bottom-toolbar, .e-image-editor .e-bottom-toolbar-area {
377
442
  border-top: 1px solid #e5e7eb;
378
443
  }
379
444
  .e-image-editor .e-contextual-toolbar-wrapper {
445
+ border-bottom: 1px solid #e5e7eb;
380
446
  width: 100%;
381
447
  z-index: 1;
382
448
  }
383
449
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
450
+ border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
384
451
  height: 130px !important; /* stylelint-disable-line declaration-no-important */
385
452
  }
386
453
  .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
@@ -411,6 +478,10 @@
411
478
  margin: 4px;
412
479
  text-align: center;
413
480
  }
481
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-dropdown-btn {
482
+ margin: 0 auto;
483
+ width: max-content;
484
+ }
414
485
  .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
415
486
  display: none;
416
487
  }
@@ -428,14 +499,48 @@
428
499
  margin-left: calc(50% - 137px);
429
500
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
430
501
  }
502
+ .e-ie-straighten-value-span,
503
+ .e-ie-straighten-span {
504
+ font-size: 14px;
505
+ padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
506
+ padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
507
+ }
508
+
509
+ .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
510
+ height: auto;
511
+ }
512
+
513
+ .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
514
+ top: calc(50% - 20px) !important; /* stylelint-disable-line declaration-no-important */
515
+ }
516
+
517
+ .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider-track,
518
+ .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-range {
519
+ top: calc(50% - 2px) !important; /* stylelint-disable-line declaration-no-important */
520
+ }
521
+
522
+ .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
523
+ top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
524
+ }
525
+
526
+ .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
527
+ top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
528
+ }
529
+
530
+ .e-dropdown-popup.e-ie-crop-ddb-popup ul {
531
+ height: 250px;
532
+ overflow-y: scroll;
533
+ }
534
+
535
+ .e-dropdown-popup.e-ie-ddb-popup {
536
+ background: none !important; /* stylelint-disable-line declaration-no-important */
537
+ }
431
538
 
432
539
  .e-image-editor {
433
540
  background: #e5e7eb;
434
541
  }
435
542
  .e-image-editor .e-contextual-toolbar-wrapper {
436
543
  background: #f3f4f6;
437
- border-top: 1px solid #e5e7eb;
438
- border-bottom: 1px solid #e5e7eb;
439
544
  }
440
545
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
441
546
  border-color: #e5e7eb;
@@ -457,9 +562,9 @@
457
562
  display: none !important; /* stylelint-disable-line declaration-no-important */
458
563
  }
459
564
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:hover {
460
- background: #f3f4f6;
565
+ background: #e5e7eb;
461
566
  box-shadow: none;
462
- color: #374151;
567
+ color: #6b7280;
463
568
  }
464
569
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
465
570
  background: #f3f4f6;