@syncfusion/ej2-image-editor 22.2.10 → 23.1.36

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 (118) hide show
  1. package/CHANGELOG.md +18 -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 +4272 -687
  5. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es5.js +4234 -640
  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.js +47 -30
  13. package/src/image-editor/action/draw.d.ts +16 -0
  14. package/src/image-editor/action/draw.js +827 -81
  15. package/src/image-editor/action/export.d.ts +3 -0
  16. package/src/image-editor/action/export.js +84 -20
  17. package/src/image-editor/action/filter.d.ts +0 -1
  18. package/src/image-editor/action/filter.js +28 -41
  19. package/src/image-editor/action/freehand-draw.js +45 -32
  20. package/src/image-editor/action/selection.d.ts +6 -0
  21. package/src/image-editor/action/selection.js +380 -66
  22. package/src/image-editor/action/shape.d.ts +8 -0
  23. package/src/image-editor/action/shape.js +286 -91
  24. package/src/image-editor/action/transform.d.ts +9 -0
  25. package/src/image-editor/action/transform.js +402 -52
  26. package/src/image-editor/action/undo-redo.d.ts +1 -0
  27. package/src/image-editor/action/undo-redo.js +138 -10
  28. package/src/image-editor/base/enum.d.ts +38 -1
  29. package/src/image-editor/base/enum.js +39 -0
  30. package/src/image-editor/base/image-editor-model.d.ts +16 -2
  31. package/src/image-editor/base/image-editor.d.ts +134 -7
  32. package/src/image-editor/base/image-editor.js +611 -69
  33. package/src/image-editor/base/interface.d.ts +233 -2
  34. package/src/image-editor/renderer/toolbar.d.ts +25 -0
  35. package/src/image-editor/renderer/toolbar.js +1273 -72
  36. package/styles/bootstrap-dark.css +68 -1
  37. package/styles/bootstrap.css +68 -1
  38. package/styles/bootstrap4.css +68 -1
  39. package/styles/bootstrap5-dark.css +68 -1
  40. package/styles/bootstrap5.css +68 -1
  41. package/styles/fabric-dark.css +68 -1
  42. package/styles/fabric.css +68 -1
  43. package/styles/fluent-dark.css +68 -1
  44. package/styles/fluent.css +68 -1
  45. package/styles/highcontrast-light.css +70 -3
  46. package/styles/highcontrast.css +69 -7
  47. package/styles/image-editor/_bootstrap-dark-definition.scss +1 -0
  48. package/styles/image-editor/_bootstrap-definition.scss +1 -0
  49. package/styles/image-editor/_bootstrap4-definition.scss +1 -0
  50. package/styles/image-editor/_bootstrap5-definition.scss +1 -0
  51. package/styles/image-editor/_fabric-dark-definition.scss +1 -0
  52. package/styles/image-editor/_fabric-definition.scss +1 -0
  53. package/styles/image-editor/_fluent-definition.scss +1 -0
  54. package/styles/image-editor/_fusionnew-definition.scss +1 -0
  55. package/styles/image-editor/_highcontrast-definition.scss +2 -1
  56. package/styles/image-editor/_highcontrast-light-definition.scss +2 -1
  57. package/styles/image-editor/_layout.scss +92 -0
  58. package/styles/image-editor/_material-dark-definition.scss +1 -0
  59. package/styles/image-editor/_material-definition.scss +1 -0
  60. package/styles/image-editor/_material3-definition.scss +2 -1
  61. package/styles/image-editor/_tailwind-definition.scss +1 -0
  62. package/styles/image-editor/_theme.scss +4 -2
  63. package/styles/image-editor/bootstrap-dark.css +68 -1
  64. package/styles/image-editor/bootstrap-dark.scss +1 -1
  65. package/styles/image-editor/bootstrap.css +68 -1
  66. package/styles/image-editor/bootstrap.scss +1 -1
  67. package/styles/image-editor/bootstrap4.css +68 -1
  68. package/styles/image-editor/bootstrap4.scss +1 -1
  69. package/styles/image-editor/bootstrap5-dark.css +68 -1
  70. package/styles/image-editor/bootstrap5-dark.scss +1 -1
  71. package/styles/image-editor/bootstrap5.css +68 -1
  72. package/styles/image-editor/bootstrap5.scss +1 -1
  73. package/styles/image-editor/fabric-dark.css +68 -1
  74. package/styles/image-editor/fabric-dark.scss +1 -1
  75. package/styles/image-editor/fabric.css +68 -1
  76. package/styles/image-editor/fabric.scss +1 -1
  77. package/styles/image-editor/fluent-dark.css +68 -1
  78. package/styles/image-editor/fluent-dark.scss +1 -1
  79. package/styles/image-editor/fluent.css +68 -1
  80. package/styles/image-editor/fluent.scss +1 -1
  81. package/styles/image-editor/highcontrast-light.css +70 -3
  82. package/styles/image-editor/highcontrast-light.scss +1 -1
  83. package/styles/image-editor/highcontrast.css +69 -7
  84. package/styles/image-editor/highcontrast.scss +1 -1
  85. package/styles/image-editor/icons/_bootstrap-dark.scss +1 -0
  86. package/styles/image-editor/icons/_bootstrap.scss +1 -0
  87. package/styles/image-editor/icons/_bootstrap4.scss +1 -0
  88. package/styles/image-editor/icons/_bootstrap5.scss +1 -0
  89. package/styles/image-editor/icons/_fabric-dark.scss +1 -0
  90. package/styles/image-editor/icons/_fabric.scss +1 -0
  91. package/styles/image-editor/icons/_fluent.scss +1 -0
  92. package/styles/image-editor/icons/_fusionnew.scss +1 -0
  93. package/styles/image-editor/icons/_highcontrast-light.scss +1 -0
  94. package/styles/image-editor/icons/_highcontrast.scss +1 -0
  95. package/styles/image-editor/icons/_material-dark.scss +1 -0
  96. package/styles/image-editor/icons/_material.scss +1 -0
  97. package/styles/image-editor/icons/_material3.scss +1 -0
  98. package/styles/image-editor/icons/_tailwind.scss +1 -0
  99. package/styles/image-editor/material-dark.css +68 -2
  100. package/styles/image-editor/material-dark.scss +1 -1
  101. package/styles/image-editor/material.css +68 -2
  102. package/styles/image-editor/material.scss +1 -1
  103. package/styles/image-editor/material3-dark.css +73 -4
  104. package/styles/image-editor/material3-dark.scss +1 -1
  105. package/styles/image-editor/material3.css +73 -4
  106. package/styles/image-editor/material3.scss +1 -1
  107. package/styles/image-editor/tailwind-dark.css +68 -2
  108. package/styles/image-editor/tailwind-dark.scss +1 -1
  109. package/styles/image-editor/tailwind.css +68 -2
  110. package/styles/image-editor/tailwind.scss +1 -1
  111. package/styles/material-dark.css +68 -2
  112. package/styles/material.css +68 -2
  113. package/styles/material3-dark.css +73 -4
  114. package/styles/material3-dark.scss +1 -1
  115. package/styles/material3.css +73 -4
  116. package/styles/material3.scss +1 -1
  117. package/styles/tailwind-dark.css +68 -2
  118. package/styles/tailwind.css +68 -2
package/styles/image-editor/bootstrap5.css CHANGED
@@ -69,7 +69,7 @@
69
69
  .e-image-editor .e-text-font-color.e-template .e-caret::before {
70
70
  content: "\e76f";
71
71
  }
72
- .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
72
+ .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-frame-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
73
73
  content: "\e739";
74
74
  }
75
75
  .e-image-editor .e-fill.e-template .e-caret::before {
@@ -218,6 +218,14 @@
218
218
  height: 46px !important; /* stylelint-disable-line declaration-no-important */
219
219
  min-height: 46px !important; /* stylelint-disable-line declaration-no-important */
220
220
  }
221
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span,
222
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span {
223
+ font-size: 16px;
224
+ }
225
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
226
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span {
227
+ font-size: 16px;
228
+ }
221
229
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
222
230
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
223
231
  font-size: 20px;
@@ -270,11 +278,46 @@
270
278
  position: relative;
271
279
  display: block;
272
280
  }
281
+ .e-image-editor .e-ie-drop-area {
282
+ height: calc(100% - 18px);
283
+ width: calc(100% - 20px);
284
+ border: 2px dashed #6c757d;
285
+ border-radius: 10px;
286
+ margin: 10px;
287
+ }
288
+ .e-image-editor .e-ie-drop-area .e-upload {
289
+ display: none;
290
+ }
291
+ .e-image-editor .e-ie-drop-area .e-image::before {
292
+ font-size: 50px;
293
+ }
294
+ .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
295
+ top: calc(50% - 60px);
296
+ left: calc(50% - 25px);
297
+ }
298
+ .e-image-editor .e-ie-drop-area .e-ie-drop-content {
299
+ top: 50%;
300
+ left: calc(50% - 160px);
301
+ font-size: 14px;
302
+ }
303
+ .e-image-editor .e-ie-drop-area .e-ie-drop-info {
304
+ top: calc(50% + 40px);
305
+ left: calc(50% - 100px);
306
+ position: absolute;
307
+ font-size: 14px;
308
+ }
273
309
  .e-image-editor .e-toolbar {
274
310
  border: none;
275
311
  height: 40px !important; /* stylelint-disable-line declaration-no-important */
276
312
  min-height: 40px !important; /* stylelint-disable-line declaration-no-important */
277
313
  }
314
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
315
+ margin-left: 20px;
316
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
317
+ }
318
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
319
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
320
+ }
278
321
  .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
279
322
  font-size: 18px;
280
323
  }
@@ -340,6 +383,30 @@
340
383
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
341
384
  height: 130px !important; /* stylelint-disable-line declaration-no-important */
342
385
  }
386
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
387
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
388
+ }
389
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item {
390
+ display: -ms-inline-grid;
391
+ display: inline-grid;
392
+ }
393
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item > span {
394
+ font-weight: 500;
395
+ margin: 4px;
396
+ text-align: center;
397
+ }
398
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
399
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
400
+ }
401
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item:not(.e-hidden) {
402
+ display: -ms-inline-grid;
403
+ display: inline-grid;
404
+ }
405
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item > span {
406
+ font-weight: 500;
407
+ margin: 4px;
408
+ text-align: center;
409
+ }
343
410
  .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
344
411
  display: none;
345
412
  }
package/styles/image-editor/bootstrap5.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap5-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap5.scss';
2
2
  @import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
3
3
  @import 'ej2-splitbuttons/styles/drop-down-button/bootstrap5-definition.scss';
4
4
  @import 'ej2-inputs/styles/numerictextbox/bootstrap5-definition.scss';
package/styles/image-editor/fabric-dark.css CHANGED
@@ -61,7 +61,7 @@
61
61
  .e-image-editor .e-text-font-color.e-template .e-caret::before {
62
62
  content: "\e35f";
63
63
  }
64
- .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
64
+ .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-frame-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
65
65
  content: "\eb6e";
66
66
  }
67
67
  .e-image-editor .e-fill.e-template .e-caret::before {
@@ -207,6 +207,14 @@
207
207
  height: 50px !important; /* stylelint-disable-line declaration-no-important */
208
208
  min-height: 50px !important; /* stylelint-disable-line declaration-no-important */
209
209
  }
210
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span,
211
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span {
212
+ font-size: 16px;
213
+ }
214
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
215
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span {
216
+ font-size: 16px;
217
+ }
210
218
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
211
219
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
212
220
  padding: 0;
@@ -258,11 +266,46 @@
258
266
  position: relative;
259
267
  display: block;
260
268
  }
269
+ .e-image-editor .e-ie-drop-area {
270
+ height: calc(100% - 18px);
271
+ width: calc(100% - 20px);
272
+ border: 2px dashed #dadada;
273
+ border-radius: 10px;
274
+ margin: 10px;
275
+ }
276
+ .e-image-editor .e-ie-drop-area .e-upload {
277
+ display: none;
278
+ }
279
+ .e-image-editor .e-ie-drop-area .e-image::before {
280
+ font-size: 50px;
281
+ }
282
+ .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
283
+ top: calc(50% - 60px);
284
+ left: calc(50% - 25px);
285
+ }
286
+ .e-image-editor .e-ie-drop-area .e-ie-drop-content {
287
+ top: 50%;
288
+ left: calc(50% - 160px);
289
+ font-size: 14px;
290
+ }
291
+ .e-image-editor .e-ie-drop-area .e-ie-drop-info {
292
+ top: calc(50% + 40px);
293
+ left: calc(50% - 100px);
294
+ position: absolute;
295
+ font-size: 14px;
296
+ }
261
297
  .e-image-editor .e-toolbar {
262
298
  border: none;
263
299
  height: 40px !important; /* stylelint-disable-line declaration-no-important */
264
300
  min-height: 40px !important; /* stylelint-disable-line declaration-no-important */
265
301
  }
302
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
303
+ margin-left: 20px;
304
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
305
+ }
306
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
307
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
308
+ }
266
309
  .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
267
310
  padding: 0;
268
311
  font-size: 16px;
@@ -324,6 +367,30 @@
324
367
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
325
368
  height: 130px !important; /* stylelint-disable-line declaration-no-important */
326
369
  }
370
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
371
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
372
+ }
373
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item {
374
+ display: -ms-inline-grid;
375
+ display: inline-grid;
376
+ }
377
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item > span {
378
+ font-weight: 500;
379
+ margin: 4px;
380
+ text-align: center;
381
+ }
382
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
383
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
384
+ }
385
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item:not(.e-hidden) {
386
+ display: -ms-inline-grid;
387
+ display: inline-grid;
388
+ }
389
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item > span {
390
+ font-weight: 500;
391
+ margin: 4px;
392
+ text-align: center;
393
+ }
327
394
  .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
328
395
  display: none;
329
396
  }
package/styles/image-editor/fabric-dark.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fabric-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/fabric-dark.scss';
2
2
  @import 'ej2-buttons/styles/button/fabric-dark-definition.scss';
3
3
  @import 'ej2-splitbuttons/styles/drop-down-button/fabric-dark-definition.scss';
4
4
  @import 'ej2-inputs/styles/numerictextbox/fabric-dark-definition.scss';
package/styles/image-editor/fabric.css CHANGED
@@ -61,7 +61,7 @@
61
61
  .e-image-editor .e-text-font-color.e-template .e-caret::before {
62
62
  content: "\e35f";
63
63
  }
64
- .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
64
+ .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-frame-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
65
65
  content: "\eb6e";
66
66
  }
67
67
  .e-image-editor .e-fill.e-template .e-caret::before {
@@ -207,6 +207,14 @@
207
207
  height: 50px !important; /* stylelint-disable-line declaration-no-important */
208
208
  min-height: 50px !important; /* stylelint-disable-line declaration-no-important */
209
209
  }
210
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span,
211
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span {
212
+ font-size: 16px;
213
+ }
214
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
215
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span {
216
+ font-size: 16px;
217
+ }
210
218
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
211
219
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
212
220
  padding: 0;
@@ -258,11 +266,46 @@
258
266
  position: relative;
259
267
  display: block;
260
268
  }
269
+ .e-image-editor .e-ie-drop-area {
270
+ height: calc(100% - 18px);
271
+ width: calc(100% - 20px);
272
+ border: 2px dashed #333;
273
+ border-radius: 10px;
274
+ margin: 10px;
275
+ }
276
+ .e-image-editor .e-ie-drop-area .e-upload {
277
+ display: none;
278
+ }
279
+ .e-image-editor .e-ie-drop-area .e-image::before {
280
+ font-size: 50px;
281
+ }
282
+ .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
283
+ top: calc(50% - 60px);
284
+ left: calc(50% - 25px);
285
+ }
286
+ .e-image-editor .e-ie-drop-area .e-ie-drop-content {
287
+ top: 50%;
288
+ left: calc(50% - 160px);
289
+ font-size: 14px;
290
+ }
291
+ .e-image-editor .e-ie-drop-area .e-ie-drop-info {
292
+ top: calc(50% + 40px);
293
+ left: calc(50% - 100px);
294
+ position: absolute;
295
+ font-size: 14px;
296
+ }
261
297
  .e-image-editor .e-toolbar {
262
298
  border: none;
263
299
  height: 40px !important; /* stylelint-disable-line declaration-no-important */
264
300
  min-height: 40px !important; /* stylelint-disable-line declaration-no-important */
265
301
  }
302
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
303
+ margin-left: 20px;
304
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
305
+ }
306
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
307
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
308
+ }
266
309
  .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
267
310
  padding: 0;
268
311
  font-size: 16px;
@@ -324,6 +367,30 @@
324
367
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
325
368
  height: 130px !important; /* stylelint-disable-line declaration-no-important */
326
369
  }
370
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
371
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
372
+ }
373
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item {
374
+ display: -ms-inline-grid;
375
+ display: inline-grid;
376
+ }
377
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item > span {
378
+ font-weight: 500;
379
+ margin: 4px;
380
+ text-align: center;
381
+ }
382
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
383
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
384
+ }
385
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item:not(.e-hidden) {
386
+ display: -ms-inline-grid;
387
+ display: inline-grid;
388
+ }
389
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item > span {
390
+ font-weight: 500;
391
+ margin: 4px;
392
+ text-align: center;
393
+ }
327
394
  .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
328
395
  display: none;
329
396
  }
package/styles/image-editor/fabric.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fabric-definition.scss';
1
+ @import 'ej2-base/styles/definition/fabric.scss';
2
2
  @import 'ej2-buttons/styles/button/fabric-definition.scss';
3
3
  @import 'ej2-splitbuttons/styles/drop-down-button/fabric-definition.scss';
4
4
  @import 'ej2-inputs/styles/numerictextbox/fabric-definition.scss';
package/styles/image-editor/fluent-dark.css CHANGED
@@ -67,7 +67,7 @@
67
67
  .e-image-editor .e-text-font-color.e-template .e-caret::before {
68
68
  content: "\e76f";
69
69
  }
70
- .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
70
+ .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-frame-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
71
71
  content: "\e739";
72
72
  }
73
73
  .e-image-editor .e-fill.e-template .e-caret::before {
@@ -216,6 +216,14 @@
216
216
  height: 48px !important; /* stylelint-disable-line declaration-no-important */
217
217
  min-height: 48px !important; /* stylelint-disable-line declaration-no-important */
218
218
  }
219
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span,
220
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span {
221
+ font-size: 16px;
222
+ }
223
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
224
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span {
225
+ font-size: 16px;
226
+ }
219
227
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
220
228
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
221
229
  font-size: 20px;
@@ -266,11 +274,46 @@
266
274
  position: relative;
267
275
  display: block;
268
276
  }
277
+ .e-image-editor .e-ie-drop-area {
278
+ height: calc(100% - 18px);
279
+ width: calc(100% - 20px);
280
+ border: 2px dashed #a19f9d;
281
+ border-radius: 10px;
282
+ margin: 10px;
283
+ }
284
+ .e-image-editor .e-ie-drop-area .e-upload {
285
+ display: none;
286
+ }
287
+ .e-image-editor .e-ie-drop-area .e-image::before {
288
+ font-size: 50px;
289
+ }
290
+ .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
291
+ top: calc(50% - 60px);
292
+ left: calc(50% - 25px);
293
+ }
294
+ .e-image-editor .e-ie-drop-area .e-ie-drop-content {
295
+ top: 50%;
296
+ left: calc(50% - 160px);
297
+ font-size: 14px;
298
+ }
299
+ .e-image-editor .e-ie-drop-area .e-ie-drop-info {
300
+ top: calc(50% + 40px);
301
+ left: calc(50% - 100px);
302
+ position: absolute;
303
+ font-size: 14px;
304
+ }
269
305
  .e-image-editor .e-toolbar {
270
306
  border: none;
271
307
  height: 40px !important; /* stylelint-disable-line declaration-no-important */
272
308
  min-height: 40px !important; /* stylelint-disable-line declaration-no-important */
273
309
  }
310
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
311
+ margin-left: 20px;
312
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
313
+ }
314
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
315
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
316
+ }
274
317
  .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
275
318
  font-size: 18px;
276
319
  }
@@ -331,6 +374,30 @@
331
374
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
332
375
  height: 130px !important; /* stylelint-disable-line declaration-no-important */
333
376
  }
377
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
378
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
379
+ }
380
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item {
381
+ display: -ms-inline-grid;
382
+ display: inline-grid;
383
+ }
384
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item > span {
385
+ font-weight: 500;
386
+ margin: 4px;
387
+ text-align: center;
388
+ }
389
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
390
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
391
+ }
392
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item:not(.e-hidden) {
393
+ display: -ms-inline-grid;
394
+ display: inline-grid;
395
+ }
396
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item > span {
397
+ font-weight: 500;
398
+ margin: 4px;
399
+ text-align: center;
400
+ }
334
401
  .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
335
402
  display: none;
336
403
  }
package/styles/image-editor/fluent-dark.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fluent-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/fluent-dark.scss';
2
2
  @import 'ej2-buttons/styles/button/fluent-dark-definition.scss';
3
3
  @import 'ej2-splitbuttons/styles/drop-down-button/fluent-dark-definition.scss';
4
4
  @import 'ej2-inputs/styles/numerictextbox/fluent-dark-definition.scss';
package/styles/image-editor/fluent.css CHANGED
@@ -67,7 +67,7 @@
67
67
  .e-image-editor .e-text-font-color.e-template .e-caret::before {
68
68
  content: "\e76f";
69
69
  }
70
- .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
70
+ .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-frame-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
71
71
  content: "\e739";
72
72
  }
73
73
  .e-image-editor .e-fill.e-template .e-caret::before {
@@ -216,6 +216,14 @@
216
216
  height: 48px !important; /* stylelint-disable-line declaration-no-important */
217
217
  min-height: 48px !important; /* stylelint-disable-line declaration-no-important */
218
218
  }
219
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span,
220
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span {
221
+ font-size: 16px;
222
+ }
223
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
224
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span {
225
+ font-size: 16px;
226
+ }
219
227
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
220
228
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
221
229
  font-size: 20px;
@@ -266,11 +274,46 @@
266
274
  position: relative;
267
275
  display: block;
268
276
  }
277
+ .e-image-editor .e-ie-drop-area {
278
+ height: calc(100% - 18px);
279
+ width: calc(100% - 20px);
280
+ border: 2px dashed #605e5c;
281
+ border-radius: 10px;
282
+ margin: 10px;
283
+ }
284
+ .e-image-editor .e-ie-drop-area .e-upload {
285
+ display: none;
286
+ }
287
+ .e-image-editor .e-ie-drop-area .e-image::before {
288
+ font-size: 50px;
289
+ }
290
+ .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
291
+ top: calc(50% - 60px);
292
+ left: calc(50% - 25px);
293
+ }
294
+ .e-image-editor .e-ie-drop-area .e-ie-drop-content {
295
+ top: 50%;
296
+ left: calc(50% - 160px);
297
+ font-size: 14px;
298
+ }
299
+ .e-image-editor .e-ie-drop-area .e-ie-drop-info {
300
+ top: calc(50% + 40px);
301
+ left: calc(50% - 100px);
302
+ position: absolute;
303
+ font-size: 14px;
304
+ }
269
305
  .e-image-editor .e-toolbar {
270
306
  border: none;
271
307
  height: 40px !important; /* stylelint-disable-line declaration-no-important */
272
308
  min-height: 40px !important; /* stylelint-disable-line declaration-no-important */
273
309
  }
310
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
311
+ margin-left: 20px;
312
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
313
+ }
314
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
315
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
316
+ }
274
317
  .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
275
318
  font-size: 18px;
276
319
  }
@@ -331,6 +374,30 @@
331
374
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
332
375
  height: 130px !important; /* stylelint-disable-line declaration-no-important */
333
376
  }
377
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
378
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
379
+ }
380
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item {
381
+ display: -ms-inline-grid;
382
+ display: inline-grid;
383
+ }
384
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item > span {
385
+ font-weight: 500;
386
+ margin: 4px;
387
+ text-align: center;
388
+ }
389
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
390
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
391
+ }
392
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item:not(.e-hidden) {
393
+ display: -ms-inline-grid;
394
+ display: inline-grid;
395
+ }
396
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item > span {
397
+ font-weight: 500;
398
+ margin: 4px;
399
+ text-align: center;
400
+ }
334
401
  .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
335
402
  display: none;
336
403
  }
package/styles/image-editor/fluent.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fluent-definition.scss';
1
+ @import 'ej2-base/styles/definition/fluent.scss';
2
2
  @import 'ej2-buttons/styles/button/fluent-definition.scss';
3
3
  @import 'ej2-splitbuttons/styles/drop-down-button/fluent-definition.scss';
4
4
  @import 'ej2-inputs/styles/numerictextbox/fluent-definition.scss';
package/styles/image-editor/highcontrast-light.css CHANGED
@@ -61,7 +61,7 @@
61
61
  .e-image-editor .e-text-font-color.e-template .e-caret::before {
62
62
  content: "\e35f";
63
63
  }
64
- .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
64
+ .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-frame-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
65
65
  content: "\eb6e";
66
66
  }
67
67
  .e-image-editor .e-fill.e-template .e-caret::before {
@@ -207,6 +207,14 @@
207
207
  height: 48px !important; /* stylelint-disable-line declaration-no-important */
208
208
  min-height: 48px !important; /* stylelint-disable-line declaration-no-important */
209
209
  }
210
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span,
211
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span {
212
+ font-size: 16px;
213
+ }
214
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
215
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span {
216
+ font-size: 16px;
217
+ }
210
218
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
211
219
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
212
220
  font-size: 18px;
@@ -257,11 +265,46 @@
257
265
  position: relative;
258
266
  display: block;
259
267
  }
268
+ .e-image-editor .e-ie-drop-area {
269
+ height: calc(100% - 18px);
270
+ width: calc(100% - 20px);
271
+ border: 2px dashed #000;
272
+ border-radius: 10px;
273
+ margin: 10px;
274
+ }
275
+ .e-image-editor .e-ie-drop-area .e-upload {
276
+ display: none;
277
+ }
278
+ .e-image-editor .e-ie-drop-area .e-image::before {
279
+ font-size: 50px;
280
+ }
281
+ .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
282
+ top: calc(50% - 60px);
283
+ left: calc(50% - 25px);
284
+ }
285
+ .e-image-editor .e-ie-drop-area .e-ie-drop-content {
286
+ top: 50%;
287
+ left: calc(50% - 160px);
288
+ font-size: 14px;
289
+ }
290
+ .e-image-editor .e-ie-drop-area .e-ie-drop-info {
291
+ top: calc(50% + 40px);
292
+ left: calc(50% - 100px);
293
+ position: absolute;
294
+ font-size: 14px;
295
+ }
260
296
  .e-image-editor .e-toolbar {
261
297
  border: none;
262
298
  height: 38px !important; /* stylelint-disable-line declaration-no-important */
263
299
  min-height: 38px !important; /* stylelint-disable-line declaration-no-important */
264
300
  }
301
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
302
+ margin-left: 20px;
303
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
304
+ }
305
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
306
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
307
+ }
265
308
  .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
266
309
  font-size: 16px;
267
310
  }
@@ -322,6 +365,30 @@
322
365
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
323
366
  height: 130px !important; /* stylelint-disable-line declaration-no-important */
324
367
  }
368
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
369
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
370
+ }
371
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item {
372
+ display: -ms-inline-grid;
373
+ display: inline-grid;
374
+ }
375
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item > span {
376
+ font-weight: 500;
377
+ margin: 4px;
378
+ text-align: center;
379
+ }
380
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
381
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
382
+ }
383
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item:not(.e-hidden) {
384
+ display: -ms-inline-grid;
385
+ display: inline-grid;
386
+ }
387
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item > span {
388
+ font-weight: 500;
389
+ margin: 4px;
390
+ text-align: center;
391
+ }
325
392
  .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
326
393
  display: none;
327
394
  }
@@ -355,7 +422,7 @@
355
422
  color: #000;
356
423
  }
357
424
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
358
- background: #400074 !important; /* stylelint-disable-line declaration-no-important */
425
+ background: #000 !important; /* stylelint-disable-line declaration-no-important */
359
426
  }
360
427
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn {
361
428
  background: inherit;
@@ -399,5 +466,5 @@
399
466
  }
400
467
 
401
468
  .e-dropdown-popup .e-selected-btn {
402
- background: #400074 !important; /* stylelint-disable-line declaration-no-important */
469
+ background: #000 !important; /* stylelint-disable-line declaration-no-important */
403
470
  }
package/styles/image-editor/highcontrast-light.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/highcontrast-light-definition.scss';
1
+ @import 'ej2-base/styles/definition/highcontrast-light.scss';
2
2
  @import 'ej2-buttons/styles/button/highcontrast-light-definition.scss';
3
3
  @import 'ej2-splitbuttons/styles/drop-down-button/highcontrast-light-definition.scss';
4
4
  @import 'ej2-inputs/styles/numerictextbox/highcontrast-light-definition.scss';